mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-14 21:50:56 -05:00
64 lines
1.6 KiB
Text
64 lines
1.6 KiB
Text
|
@switch-circle-diameter: 16px;
|
||
|
@switch-inner-padding: 2px;
|
||
|
@switch-width: 34px;
|
||
|
@switch-height: @switch-circle-diameter + @switch-inner-padding +
|
||
|
@switch-inner-padding;
|
||
|
@switch-circle-translate-x: @switch-width - @switch-circle-diameter -
|
||
|
@switch-inner-padding - @switch-inner-padding;
|
||
|
@switch-circle-wrapper-border-radius: @switch-height / 2;
|
||
|
@switch-transition: 0.4s;
|
||
|
|
||
|
.switch-input {
|
||
|
position: relative;
|
||
|
display: inline-block;
|
||
|
width: @switch-width;
|
||
|
height: @switch-height;
|
||
|
|
||
|
input.invisible-input {
|
||
|
opacity: 0;
|
||
|
width: 0;
|
||
|
height: 0;
|
||
|
|
||
|
// span.switch -> circle "wrapper"
|
||
|
& + span.switch {
|
||
|
background-color: @ol-blue-gray-4;
|
||
|
position: absolute;
|
||
|
cursor: pointer;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
transition: @switch-transition;
|
||
|
border-radius: @switch-circle-wrapper-border-radius;
|
||
|
}
|
||
|
|
||
|
// span.switch::before is the circle itself
|
||
|
& + span.switch::before {
|
||
|
position: absolute;
|
||
|
content: '';
|
||
|
height: @switch-circle-diameter;
|
||
|
width: @switch-circle-diameter;
|
||
|
left: @switch-inner-padding;
|
||
|
bottom: @switch-inner-padding;
|
||
|
background-color: @white;
|
||
|
transition: @switch-transition;
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
|
||
|
&:checked + span.switch {
|
||
|
background-color: @ol-green;
|
||
|
}
|
||
|
|
||
|
// when input is checked, move circle to the right
|
||
|
&:checked + span.switch::before {
|
||
|
transform: translateX(@switch-circle-translate-x);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&.disabled {
|
||
|
input.invisible-input + span.switch {
|
||
|
background-color: @gray-light;
|
||
|
}
|
||
|
}
|
||
|
}
|