mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
115 lines
2.8 KiB
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;
|
|
}
|
|
}
|