blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-10-31 03:22:08 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Slider: add less vars (#3125)

Browse Source
This commit is contained in:
neverland 2019-04-10 16:45:30 +08:00 committed by GitHub
parent e5fc82e96b
commit 26543e89eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/slider/index.less
View File

@ -3,20 +3,20 @@
.van-slider { .van-slider {
position: relative; position: relative;
border-radius: 999px; border-radius: 999px;
background-color: @gray-light; background-color: @slider-inactive-background-color;
&__bar { &__bar {
position: relative; position: relative;
border-radius: inherit; border-radius: inherit;
background-color: @blue; background-color: @slider-active-background-color;
} }
&__button { &__button {
width: 20px; width: @slider-button-width;
height: 20px; height: @slider-button-height;
border-radius: 50%; box-shadow: @slider-button-box-shadow;
background-color: @white; border-radius: @slider-button-border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, .5); background-color: @slider-button-background-color;
&-wrapper { &-wrapper {
position: absolute; position: absolute;
@ -37,7 +37,7 @@
} }
&--disabled { &--disabled {
opacity: .3; opacity: @slider-disabled-opacity;
} }
&--vertical { &--vertical {

10
packages/style/var.less
View File

@ -186,6 +186,16 @@
@radio-disabled-label-color: @gray; @radio-disabled-label-color: @gray;
@radio-disabled-background-color: @border-color; @radio-disabled-background-color: @border-color;
// Slider
@slider-active-background-color: @blue;
@slider-inactive-background-color: @gray-light;
@slider-disabled-opacity: .3;
@slider-button-width: 20px;
@slider-button-height: 20px;
@slider-button-border-radius: 50%;
@slider-button-background-color: @white;
@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
// Swipe // Swipe
@swipe-indicator: 6px; @swipe-indicator: 6px;