amis2/scss/components/form/_switch.scss
2019-12-06 09:58:08 +08:00

118 lines
2.4 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: '\5173';
color: $Switch-valueColor;
text-indent: ($Switch-width / 2);
text-transform: uppercase;
font-size: $fontSizeSm;
line-height: $Switch-height;
font-style: normal;
font-weight: bold;
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,
&:disabled:checked {
& + i {
&:before {
color: $Switch-onDisabled-color;
background-color: $Switch-onDisabled-bgColor;
}
&:after {
background-color: $Switch-onDisabled-circle-BackgroundColor;
color: $Switch-onDisabled-color;
}
}
}
&:checked {
& + i {
&:before {
left: 100%;
border-width: 0;
}
&:after {
margin-left: $Switch-width - $Switch-height;
content: '\5f00';
color: $white;
text-indent: px2rem(-18px); // todo
text-transform: uppercase;
font-size: $fontSizeSm;
font-weight: bold;
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;
}
}