| 123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- @import '../style/var';
- .van-switch {
- display: inline-block;
- position: relative;
- width: @switch-width;
- height: @switch-height;
- border: @switch-border;
- border-radius: @switch-node-size;
- box-sizing: content-box;
- background-color: @switch-background-color;
- transition: background-color @switch-transition-duration;
- &__node {
- top: 0;
- left: 0;
- position: absolute;
- border-radius: 100%;
- width: @switch-node-size;
- height: @switch-node-size;
- z-index: @switch-node-z-index;
- transition: @switch-transition-duration;
- box-shadow: @switch-node-box-shadow;
- background-color: @switch-node-background-color;
- }
- &__loading {
- top: 25%;
- left: 25%;
- width: 50%;
- height: 50%;
- }
- &--on {
- background-color: @switch-on-background-color;
- .van-switch__node {
- transform: translateX(@switch-width - @switch-node-size);
- }
- }
- &--disabled {
- opacity: @switch-disabled-opacity;
- }
- }
|