feat(style): component using basic css variables
This commit is contained in:
@@ -17,15 +17,15 @@
|
||||
width: 100%;
|
||||
height: var(--van-slider-bar-height);
|
||||
background-color: var(--van-slider-inactive-background-color);
|
||||
border-radius: @border-radius-max;
|
||||
border-radius: var(--van-border-radius-max);
|
||||
cursor: pointer;
|
||||
|
||||
// use pseudo element to expand click area
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -@padding-xs;
|
||||
top: -var(--van-padding-xs);
|
||||
right: 0;
|
||||
bottom: -@padding-xs;
|
||||
bottom: -var(--van-padding-xs);
|
||||
left: 0;
|
||||
content: '';
|
||||
}
|
||||
@@ -36,7 +36,7 @@
|
||||
height: 100%;
|
||||
background-color: var(--van-slider-active-background-color);
|
||||
border-radius: inherit;
|
||||
transition: all @animation-duration-fast;
|
||||
transition: all var(--van-animation-duration-fast);
|
||||
}
|
||||
|
||||
&__button {
|
||||
@@ -98,9 +98,9 @@
|
||||
// use pseudo element to expand click area
|
||||
&::before {
|
||||
top: 0;
|
||||
right: -@padding-xs;
|
||||
right: -var(--van-padding-xs);
|
||||
bottom: 0;
|
||||
left: -@padding-xs;
|
||||
left: -var(--van-padding-xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+4
-4
@@ -1,11 +1,11 @@
|
||||
@import '../style/var.less';
|
||||
|
||||
@slider-active-background-color: @blue;
|
||||
@slider-inactive-background-color: @gray-3;
|
||||
@slider-disabled-opacity: @disabled-opacity;
|
||||
@slider-active-background-color: var(--van-blue);
|
||||
@slider-inactive-background-color: var(--van-gray-3);
|
||||
@slider-disabled-opacity: var(--van-disabled-opacity);
|
||||
@slider-bar-height: 2px;
|
||||
@slider-button-width: 24px;
|
||||
@slider-button-height: 24px;
|
||||
@slider-button-border-radius: 50%;
|
||||
@slider-button-background-color: @white;
|
||||
@slider-button-background-color: var(--van-white);
|
||||
@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
|
||||
Reference in New Issue
Block a user