80 lines
1.6 KiB
CSS
80 lines
1.6 KiB
CSS
.toggle-checkbox {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.toggle-slot {
|
|
position: relative;
|
|
height: 2em;
|
|
width: 3em;
|
|
border: none;
|
|
border-radius: 10em;
|
|
background-color: white;
|
|
transition: background-color 250ms;
|
|
}
|
|
|
|
.toggle-checkbox:checked ~ .toggle-slot {
|
|
background-color: #374151;
|
|
}
|
|
|
|
.toggle-button {
|
|
transform: translate(1.6em, 0.5em);
|
|
position: absolute;
|
|
height: 1em;
|
|
width: 1em;
|
|
border-radius: 50%;
|
|
background-color: #ffeccf;
|
|
transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
|
|
}
|
|
|
|
.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
|
|
background-color: #485367;
|
|
transform: translate(0.5em, 0.5em);
|
|
}
|
|
|
|
.sun-icon {
|
|
position: absolute;
|
|
height: 1em;
|
|
width: 1em;
|
|
color: #ffbb52;
|
|
}
|
|
|
|
.sun-icon-wrapper {
|
|
position: absolute;
|
|
height: 1em;
|
|
width: 1em;
|
|
opacity: 1;
|
|
transform: translate(0.55em, 0.25em) rotate(15deg);
|
|
transform-origin: 50% 50%;
|
|
transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
|
|
}
|
|
|
|
.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
|
|
opacity: 0;
|
|
transform: translate(1.6em, 0.5em) rotate(0deg);
|
|
}
|
|
|
|
.moon-icon {
|
|
position: absolute;
|
|
height: 1em;
|
|
width: 1em;
|
|
color: white;
|
|
}
|
|
|
|
.moon-icon-wrapper {
|
|
position: absolute;
|
|
height: 1em;
|
|
width: 1em;
|
|
opacity: 0;
|
|
transform: translate(1.6em, .5em) rotate(0deg);
|
|
transform-origin: 50% 50%;
|
|
transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2.5, .46, .71);
|
|
}
|
|
|
|
.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
|
|
opacity: 1;
|
|
transform: translate(1.85em, 0.15em) rotate(-15deg);
|
|
} |