mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-05 07:16:34 +08:00
50983ca28e
* upgrade dependencies * 更改所有 saladcss 写法 * fix: 升级依赖导致的样式错误 * fix: build vant css * use es module when pack && webpack scope hoisting * fix: vue module version * delete unused npm script * fix: build:vant script not work * fix: webpack config format * fix: build minify vant.js * fix: captain ui relative link
60 lines
1.2 KiB
CSS
60 lines
1.2 KiB
CSS
@import './mixins/border_retina.css';
|
|
|
|
.van-switch {
|
|
height: 31px;
|
|
width: 51px;
|
|
display: inline-block;
|
|
position: relative;
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
&::after{
|
|
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
|
|
border-width: 3px;
|
|
border-radius: 32px;
|
|
}
|
|
|
|
&__node {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 13.5px;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
|
|
left: 1px;
|
|
top: 1px;
|
|
z-index: 2;
|
|
transition: transform .3s;
|
|
&::after {
|
|
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
|
|
border-radius: 27px;
|
|
}
|
|
}
|
|
|
|
&__loading {
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate3d(-50%, -50%, 0);
|
|
margin: 0;
|
|
}
|
|
|
|
&--on {
|
|
background-color: #44db5e;
|
|
&::after { border-color: #44db5e; }
|
|
.van-switch__node {
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
&--off {
|
|
background-color: #fff;
|
|
border-color: rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
&--disabled {
|
|
opacity: .4;
|
|
}
|
|
}
|