index.less 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. @import '../style/var';
  2. .van-switch {
  3. position: relative;
  4. display: inline-block;
  5. box-sizing: content-box;
  6. width: @switch-width;
  7. height: @switch-height;
  8. font-size: @switch-size;
  9. background-color: @switch-background-color;
  10. border: @switch-border;
  11. border-radius: @switch-node-size;
  12. cursor: pointer;
  13. transition: background-color @switch-transition-duration;
  14. &__node {
  15. position: absolute;
  16. top: 0;
  17. left: 0;
  18. width: @switch-node-size;
  19. height: @switch-node-size;
  20. // https://github.com/vant-ui/vant/issues/9839
  21. font-size: inherit;
  22. background-color: @switch-node-background-color;
  23. border-radius: 100%;
  24. box-shadow: @switch-node-box-shadow;
  25. transition: transform @switch-transition-duration
  26. cubic-bezier(0.3, 1.05, 0.4, 1.05);
  27. }
  28. &__loading {
  29. top: 25%;
  30. left: 25%;
  31. width: 50%;
  32. height: 50%;
  33. line-height: 1;
  34. }
  35. &--on {
  36. background-color: @switch-on-background-color;
  37. .van-switch__node {
  38. transform: translateX(@switch-width - @switch-node-size);
  39. }
  40. .van-switch__loading {
  41. color: @switch-on-background-color;
  42. }
  43. }
  44. &--disabled {
  45. cursor: not-allowed;
  46. opacity: @switch-disabled-opacity;
  47. }
  48. &--loading {
  49. cursor: default;
  50. }
  51. }