Files
web-apps/apps/common/main/resources/less/switcher.less
2026-03-09 13:50:09 +03:00

66 lines
1.8 KiB
Plaintext

.switcher {
position: relative;
width: 30px;
height: 16px;
background-color: @background-normal-ie;
background-color: @background-normal;
border-radius: 11px;
cursor: pointer;
border: 1px solid @chb-border-normal-ie;
border: 1px solid @chb-border-normal;
box-sizing: initial;
transition: background-color .2s ease;
.thumb {
position: absolute;
left: 0;
//right: auto;
top: 0;
height: 12px;
border-radius: 12px;
background-color: @chb-border-normal-ie;
background-color: @chb-border-normal;
transition: left .2s ease, background-color .2s ease;
margin: 2px;
}
&.on {
background-color: @background-primary-dialog-button-ie;
background-color: @background-primary-dialog-button;
border-color: @background-primary-dialog-button-ie;
border-color: @background-primary-dialog-button;
transition: border-color .2s, background-color .2s ease;
.thumb {
//right: 0;
left: 14px;
background-color: @background-normal-ie;
background-color: @background-normal;
transition: left .2s ease, background-color .2s ease;
}
}
&.disabled {
cursor: default;
opacity: @component-disabled-opacity-ie;
opacity: @component-disabled-opacity;
}
}
.switcher-labeled {
display: inline-flex;
align-items: center;
gap: 5px;
padding-left: 4px;
.rtl & {
padding-right: 4px;
padding-left: 0;
}
.switcher-label {
cursor: pointer;
margin: 0;
font-size: 11px;
font-size: var(--font-size-base-app-custom, var(--font-size-base, 11px));
}
}