overleaf/services/web/frontend/stylesheets/components/input-switch.less
Tim Down cbc3aef728 Merge pull request #10109 from overleaf/ds-switch-component
Modifying the Switch

GitOrigin-RevId: 93b8483aa4aa164ea0be5fc2b4ccc5cfb17eae3c
2022-11-02 09:04:07 +00:00

52 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;
}
}