12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- @import '../style/var';
- .van-slider {
- position: relative;
- width: 100%;
- height: @slider-bar-height;
- background-color: @slider-inactive-background-color;
- border-radius: @border-radius-max;
- cursor: pointer;
- // use pseudo element to expand click area
- &::before {
- position: absolute;
- top: -@padding-xs;
- right: 0;
- bottom: -@padding-xs;
- left: 0;
- content: '';
- }
- &__bar {
- position: relative;
- width: 100%;
- height: 100%;
- background-color: @slider-active-background-color;
- border-radius: inherit;
- transition: all @animation-duration-fast;
- }
- &__button {
- width: @slider-button-width;
- height: @slider-button-height;
- background-color: @slider-button-background-color;
- border-radius: @slider-button-border-radius;
- box-shadow: @slider-button-box-shadow;
- &-wrapper,
- &-wrapper-right {
- position: absolute;
- top: 50%;
- right: 0;
- transform: translate3d(50%, -50%, 0);
- cursor: grab;
- }
- &-wrapper-left {
- position: absolute;
- top: 50%;
- left: 0;
- transform: translate3d(-50%, -50%, 0);
- cursor: grab;
- }
- }
- &--disabled {
- cursor: not-allowed;
- opacity: @slider-disabled-opacity;
- .van-slider__button-wrapper,
- .van-slider__button-wrapper-left,
- .van-slider__button-wrapper-right {
- cursor: not-allowed;
- }
- }
- &--vertical {
- display: inline-block;
- width: @slider-bar-height;
- height: 100%;
- .van-slider__button-wrapper,
- .van-slider__button-wrapper-right {
- top: auto;
- right: 50%;
- bottom: 0;
- transform: translate3d(50%, 50%, 0);
- }
- .van-slider__button-wrapper-left {
- top: 0;
- right: 50%;
- left: auto;
- transform: translate3d(50%, -50%, 0);
- }
- // use pseudo element to expand click area
- &::before {
- top: 0;
- right: -@padding-xs;
- bottom: 0;
- left: -@padding-xs;
- }
- }
- }
|