amis/scss/components/form/_switch.scss

115 lines
2.8 KiB
SCSS

.#{$ns}Switch {
cursor: pointer;
position: relative;
display: inline-block;
width: $Switch-width;
height: $Switch-height;
overflow: hidden;
border-radius: px2rem(30px);
background-color: $Switch-onActive-bgColor;
margin: 0;
vertical-align: middle;
text-align: left;
&.is-disabled {
background-color: $Switch-onDisabled-bgColor;
}
i {
&:before {
content: "OFF";
color: $Switch-valueColor;
text-indent: ($Switch-width / 2) - px2rem(2px);
text-transform: uppercase;
font-size: $fontSizeSm;
line-height: $Switch-height;
font-style: normal;
position: absolute;
top: px2rem(-1px);
bottom: px2rem(-1px);
left: px2rem(-1px);
right: px2rem(-1px);
background-color: $Switch-bgColor;
border: px2rem(1px) solid $Switch-borderColor;
border-radius: px2rem(30px);
transition: all 0.2s;
}
&:after {
content: "";
position: absolute;
background-color: $white;
width: $Switch-height - px2rem(2px);
top: px2rem(1px);
bottom: px2rem(1px);
left: px2rem(1px);
border-radius: 50%;
// box-shadow: px2rem(1px) px2rem(1px) px2rem(3px) rgba(0, 0, 0, 0.25);
transition: margin-left 0.3s;
}
}
input {
position: absolute;
opacity: 0;
&:disabled {
& + i {
&:before {
color: $Switch-onDisabled-color;
background-color: $Switch-onDisabled-bgColor;
}
&:after {
color: $Switch-onDisabled-color;
}
}
}
&:checked {
& + i {
&:before {
left: 100%;
border-width: 0;
}
&:after {
margin-left: $Switch-width - $Switch-height;
content: "On";
color: $white;
text-indent: px2rem(-20px); // todo
text-transform: uppercase;
font-size: $fontSizeSm;
font-weight: normal;
font-style: normal;
line-height: $Switch-height;
}
}
}
}
}
.#{$ns}Switch-option {
vertical-align: middle;
margin-left: $Switch-gap;
&:first-child {
margin-left: 0;
margin-right: $Switch-gap;
}
&:empty {
display: none;
}
}
.#{$ns}SwitchControl {
padding-top: ($Form-input-height - $Switch-height) / 2;
&.is-inline {
display: inline-block;
}
}