83 lines
2.1 KiB
CSS
83 lines
2.1 KiB
CSS
|
.button {
|
||
|
|
&.switch {
|
||
|
|
--default: #F0F0F0;
|
||
|
|
--active: #3366FF;
|
||
|
|
--height: 39px;
|
||
|
|
height: var(--height);
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
background-color: var(--default);
|
||
|
|
border-radius: var(--height);
|
||
|
|
position: relative;
|
||
|
|
user-select:none;
|
||
|
|
|
||
|
|
input {
|
||
|
|
opacity: 0;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
&:checked {
|
||
|
|
~.switch-label {
|
||
|
|
span {
|
||
|
|
transition: ease all 0.4s;
|
||
|
|
|
||
|
|
&:first-of-type {
|
||
|
|
color: #fff;
|
||
|
|
font-weight:500;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:last-of-type {
|
||
|
|
color: #999999;
|
||
|
|
font-weight:400;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
transform: translateX(0%);
|
||
|
|
transition:ease all 0.4s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.switch-label {
|
||
|
|
height: var(--height);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap:23px;
|
||
|
|
font-weight: 400;
|
||
|
|
line-height: 1.193em;
|
||
|
|
|
||
|
|
span {
|
||
|
|
z-index: 1;
|
||
|
|
transition: ease all 0.4s;
|
||
|
|
|
||
|
|
&:first-of-type {
|
||
|
|
padding-left:19px;
|
||
|
|
color: #999999;
|
||
|
|
font-weight:400;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:last-of-type {
|
||
|
|
padding-right:12px;
|
||
|
|
color: #fff;
|
||
|
|
font-weight:500;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
z-index: 0;
|
||
|
|
width: 98px;
|
||
|
|
height: var(--height);
|
||
|
|
background-color:var(--active);
|
||
|
|
border-radius: var(--height);
|
||
|
|
transform: translateX(calc(100% - 9px));
|
||
|
|
transition:ease all 0.4s;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|