index.less 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. @import '../style/var';
  2. .van-slider {
  3. position: relative;
  4. border-radius: 999px;
  5. background-color: @slider-inactive-background-color;
  6. &__bar {
  7. position: relative;
  8. border-radius: inherit;
  9. background-color: @slider-active-background-color;
  10. }
  11. &__button {
  12. width: @slider-button-width;
  13. height: @slider-button-height;
  14. box-shadow: @slider-button-box-shadow;
  15. border-radius: @slider-button-border-radius;
  16. background-color: @slider-button-background-color;
  17. &-wrapper {
  18. position: absolute;
  19. top: 50%;
  20. right: 0;
  21. transform: translate3d(50%, -50%, 0);
  22. /* use pseudo element to expand touch area */
  23. &::after {
  24. content: '';
  25. position: absolute;
  26. width: 200%;
  27. height: 200%;
  28. top: -50%;
  29. left: -50%;
  30. }
  31. }
  32. }
  33. &--disabled {
  34. opacity: @slider-disabled-opacity;
  35. }
  36. &--vertical {
  37. height: 100%;
  38. display: inline-block;
  39. .van-slider__button-wrapper {
  40. top: auto;
  41. bottom: 0;
  42. transform: translate3d(50%, 50%, 0);
  43. }
  44. }
  45. }