mirror of
https://github.com/Xevion/old.xevion.github.io.git
synced 2025-12-07 07:15:36 -06:00
63 lines
1.2 KiB
SCSS
63 lines
1.2 KiB
SCSS
.switch-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 30px;
|
|
@include mobile {
|
|
top: 10px;
|
|
right: 20px;
|
|
}
|
|
.sun, .moon {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
.sun {
|
|
background: url('../img/switch/sun.svg') no-repeat center;
|
|
background-size: 100%;
|
|
}
|
|
.moon {
|
|
background: url('../img/switch/moon.svg') no-repeat center;
|
|
background-size: 100%;
|
|
}
|
|
.toggle-wrapper {
|
|
margin: 10px;
|
|
#switch {
|
|
height: 0;
|
|
width: 0;
|
|
visibility: hidden;
|
|
position: absolute;
|
|
&:checked + label {
|
|
background: $green;
|
|
}
|
|
&:checked + label:after {
|
|
left: calc(100% - 3px);
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
label {
|
|
cursor: pointer;
|
|
text-indent: -9999px;
|
|
width: 45px;
|
|
height: 25px;
|
|
background: grey;
|
|
display: block;
|
|
border-radius: 100px;
|
|
position: relative;
|
|
&:after {
|
|
@include transition;
|
|
content: '';
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 19px;
|
|
height: 19px;
|
|
background: #fff;
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|