Spaces:
Sleeping
Sleeping
File size: 1,583 Bytes
731e3bd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
body {
/* MARK: Toggle Button Checkbox */
/* INFO: gr.Checkbox elem_classes".toggle-btn" */
.toggle-btn {
display: flex;
flex-direction: column-reverse;
&>div.wrap {
display: none;
}
&>div:not(.wrap) {
margin-top: var(--spacing-lg);
margin-bottom: 0;
}
&>label {
position: relative;
width: 57px;
height: 27px;
display: inline-block;
border-radius: 13px;
background: var(--neutral-700);
box-shadow: var(--shadow-inset);
transition: background-color 0.3s, cursor 0.3s;
border: solid 0.4px var(--border-color-primary);
cursor: pointer;
&>input[type="checkbox"] {
width: 0;
height: 0;
opacity: 0;
}
&>span {
position: absolute;
left: 60px;
height: 27px;
min-width: 140px;
line-height: 27px;
}
}
&>label:has(input[type="checkbox"])::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--neutral-900);
box-shadow: var(--shadow-inset);
transition: left 0.2s ease-in-out, background 0.2s ease-in-out;
}
&>label:has(input[type="checkbox"]:checked)::after {
content: "";
position: absolute;
background: var(--neutral-900);
opacity: 0.8;
left: 32px;
}
&>label:has(input[type="checkbox"]:checked) {
background: var(--primary-600);
}
}
}
|