46 lines
1.2 KiB
Plaintext

@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-switch {
position: relative;
display: inline-block;
box-sizing: content-box;
.theme(width, '@switch-width');
.theme(height, '@switch-height');
.theme(background-color, '@switch-background-color');
.theme(border, '@switch-border');
.theme(border-radius, '@switch-node-size');
.theme(transition, 'background-color @switch-transition-duration');
&__node {
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
.theme(z-index, '@switch-node-z-index');
.theme(width, '@switch-node-size');
.theme(height, '@switch-node-size');
.theme(background-color, '@switch-node-background-color');
.theme(box-shadow, '@switch-node-box-shadow');
.theme(transition, 'transform @switch-transition-duration cubic-bezier(.3, 1.05, .4, 1.05)');
}
&__loading {
position: absolute !important;
top: 25%;
left: 25%;
}
&--on {
.theme(background-color, '@switch-on-background-color');
.van-switch__node {
.theme(transform, 'translateX(calc(@switch-width - @switch-node-size))');
}
}
&--disabled {
.theme(opacity, '@switch-disabled-opacity');
}
}