mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-15 08:20:56 -05:00
d94eaa19cc
[web] Enable SSO switch on Group Settings GitOrigin-RevId: 591881eb4e6bad912de026f7a687f3b020712c2d
63 lines
1.6 KiB
Text
63 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;
|
|
}
|
|
}
|
|
}
|