alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(style): add component css variables

Browse Source
This commit is contained in:
chenjiahan
2021-06-12 15:52:22 +08:00
committed by neverland
parent dafea4e1e8
commit fe1cba97b7
73 changed files with 1702 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/slider/index.less
+22 -10
View File
@@ -1,10 +1,22 @@
@import './var.less';
:root {
--van-slider-active-background-color: @slider-active-background-color;
--van-slider-inactive-background-color: @slider-inactive-background-color;
--van-slider-disabled-opacity: @slider-disabled-opacity;
--van-slider-bar-height: @slider-bar-height;
--van-slider-button-width: @slider-button-width;
--van-slider-button-height: @slider-button-height;
--van-slider-button-border-radius: @slider-button-border-radius;
--van-slider-button-background-color: @slider-button-background-color;
--van-slider-button-box-shadow: @slider-button-box-shadow;
}
.van-slider {
position: relative;
width: 100%;
height: @slider-bar-height;
background-color: @slider-inactive-background-color;
height: var(--van-slider-bar-height);
background-color: var(--van-slider-inactive-background-color);
border-radius: @border-radius-max;
cursor: pointer;
@@ -22,17 +34,17 @@
position: relative;
width: 100%;
height: 100%;
background-color: @slider-active-background-color;
background-color: var(--van-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;
width: var(--van-slider-button-width);
height: var(--van-slider-button-height);
background-color: var(--van-slider-button-background-color);
border-radius: var(--van-slider-button-border-radius);
box-shadow: var(--van-slider-button-box-shadow);
&-wrapper,
&-wrapper-right {
@@ -54,7 +66,7 @@
&--disabled {
cursor: not-allowed;
opacity: @slider-disabled-opacity;
opacity: var(--van-slider-disabled-opacity);
.van-slider__button-wrapper,
.van-slider__button-wrapper-left,
@@ -65,7 +77,7 @@
&--vertical {
display: inline-block;
width: @slider-bar-height;
width: var(--van-slider-bar-height);
height: 100%;
.van-slider__button-wrapper,