index.less 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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. background-color: @switch-node-background-color;
  21. border-radius: 100%;
  22. box-shadow: @switch-node-box-shadow;
  23. transition: transform @switch-transition-duration
  24. cubic-bezier(0.3, 1.05, 0.4, 1.05);
  25. }
  26. &__loading {
  27. top: 25%;
  28. left: 25%;
  29. width: 50%;
  30. height: 50%;
  31. line-height: 1;
  32. }
  33. &--on {
  34. background-color: @switch-on-background-color;
  35. .van-switch__node {
  36. transform: translateX(@switch-width - @switch-node-size);
  37. }
  38. .van-switch__loading {
  39. color: @switch-on-background-color;
  40. }
  41. }
  42. &--disabled {
  43. cursor: not-allowed;
  44. opacity: @switch-disabled-opacity;
  45. }
  46. &--loading {
  47. cursor: default;
  48. }
  49. }