overleaf/services/web/frontend/stylesheets/components/input-switch.less
Alf Eaton 6cc2db3cdd Merge pull request #17525 from overleaf/ae-upgrade-prettier
Upgrade Prettier to v3

GitOrigin-RevId: 6f1338f196408f3edb4892d5220ad3665ff1a5bc
2024-03-26 09:04:05 +00:00

57 lines
1 KiB
Text

.input-switch {
display: inline-block;
vertical-align: middle;
padding-left: 5px;
}
.input-switch-hidden-input {
display: none;
+ .input-switch-btn {
display: block;
width: 34px;
height: 20px;
position: relative;
outline: 0;
margin: 0;
font-weight: normal;
cursor: pointer;
user-select: none;
padding: 1px;
background-color: @rp-highlight-blue;
border-radius: 0.875em;
transition:
background 0.15s ease,
border-color 0.15s ease;
&::before {
content: '';
display: block;
width: 16px;
height: 16px;
position: relative;
left: 1px;
top: 1px;
background-color: #fff;
border-radius: 0.875em;
transition:
background-color 0.15s ease,
color 0.15s ease,
left 0.15s ease;
}
}
&:checked + .input-switch-btn {
background-color: @ol-green;
border-color: #fff;
&::before {
left: 15px;
top: 1px;
}
}
&:disabled + .input-switch-btn {
cursor: default;
opacity: 0.35;
}
}