imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Discover: sidebarFilter toggle button done.

Browse Source
This commit is contained in:
chiayin
2023-04-24 12:30:29 +08:00
parent 3d5dba4c42
commit 0cff786e9a
8 changed files with 165 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/assets/components.css
View File

@@ -31,63 +31,6 @@
}
}
/* toggle */
/* <div class="toggle">
<input type="checkbox"/>
<label></label>
</div> */
.toggle {
position: relative;
}
.toggle input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.toggle label {
position: relative;
display: flex;
align-items: center;
}
.toggle label:before {
content: '';
border: 5px solid #bbb;
height: 35px;
width: 70px;
position: relative;
display: inline-block;
border-radius: 46px;
transition: 0.2s ease-in;
}
.toggle label:after {
content: '';
position: absolute;
background: #555;
width: 28px;
height: 28px;
left: 8px;
top: 8px;
border-radius: 50%;
z-index: 2;
box-shadow: 0 0 5px #0002;
transition: 0.2s ease-in;
}
.toggle input[type="checkbox"]:hover + label:after {
box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
}
.toggle input[type="checkbox"]:checked + label:before {
border-color: #77C2BB;
}
.toggle input[type="checkbox"]:checked + label:after {
background: #009688;
left: 44px;
}
/* components */
/* Scrollbar */
@layer utilities {