index.less 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. @import '../style/var';
  2. .van-slider {
  3. position: relative;
  4. width: 100%;
  5. height: @slider-bar-height;
  6. background-color: @slider-inactive-background-color;
  7. border-radius: @border-radius-max;
  8. cursor: pointer;
  9. // use pseudo element to expand click area
  10. &::before {
  11. position: absolute;
  12. top: -@padding-xs;
  13. right: 0;
  14. bottom: -@padding-xs;
  15. left: 0;
  16. content: '';
  17. }
  18. &__bar {
  19. position: relative;
  20. width: 100%;
  21. height: 100%;
  22. background-color: @slider-active-background-color;
  23. border-radius: inherit;
  24. transition: all @animation-duration-fast;
  25. }
  26. &__button {
  27. width: @slider-button-width;
  28. height: @slider-button-height;
  29. background-color: @slider-button-background-color;
  30. border-radius: @slider-button-border-radius;
  31. box-shadow: @slider-button-box-shadow;
  32. &-wrapper,
  33. &-wrapper-right {
  34. position: absolute;
  35. top: 50%;
  36. right: 0;
  37. transform: translate3d(50%, -50%, 0);
  38. cursor: grab;
  39. }
  40. &-wrapper-left {
  41. position: absolute;
  42. top: 50%;
  43. left: 0;
  44. transform: translate3d(-50%, -50%, 0);
  45. cursor: grab;
  46. }
  47. }
  48. &--disabled {
  49. cursor: not-allowed;
  50. opacity: @slider-disabled-opacity;
  51. .van-slider__button-wrapper,
  52. .van-slider__button-wrapper-left,
  53. .van-slider__button-wrapper-right {
  54. cursor: not-allowed;
  55. }
  56. }
  57. &--vertical {
  58. display: inline-block;
  59. width: @slider-bar-height;
  60. height: 100%;
  61. .van-slider__button-wrapper,
  62. .van-slider__button-wrapper-right {
  63. top: auto;
  64. right: 50%;
  65. bottom: 0;
  66. transform: translate3d(50%, 50%, 0);
  67. }
  68. .van-slider__button-wrapper-left {
  69. top: 0;
  70. right: 50%;
  71. left: auto;
  72. transform: translate3d(50%, -50%, 0);
  73. }
  74. // use pseudo element to expand click area
  75. &::before {
  76. top: 0;
  77. right: -@padding-xs;
  78. bottom: 0;
  79. left: -@padding-xs;
  80. }
  81. }
  82. }