index.less 962 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. @import '../style/var';
  2. .van-switch {
  3. display: inline-block;
  4. position: relative;
  5. width: @switch-width;
  6. height: @switch-height;
  7. border: @switch-border;
  8. border-radius: @switch-node-size;
  9. box-sizing: content-box;
  10. background-color: @switch-background-color;
  11. transition: background-color @switch-transition-duration;
  12. &__node {
  13. top: 0;
  14. left: 0;
  15. position: absolute;
  16. border-radius: 100%;
  17. width: @switch-node-size;
  18. height: @switch-node-size;
  19. z-index: @switch-node-z-index;
  20. transition: @switch-transition-duration;
  21. box-shadow: @switch-node-box-shadow;
  22. background-color: @switch-node-background-color;
  23. }
  24. &__loading {
  25. top: 25%;
  26. left: 25%;
  27. width: 50%;
  28. height: 50%;
  29. }
  30. &--on {
  31. background-color: @switch-on-background-color;
  32. .van-switch__node {
  33. transform: translateX(@switch-width - @switch-node-size);
  34. }
  35. }
  36. &--disabled {
  37. opacity: @switch-disabled-opacity;
  38. }
  39. }