feat(style): component using basic css variables

This commit is contained in:
chenjiahan
2021-06-12 15:52:22 +08:00
committed by neverland
parent aef2579a95
commit 710aebaee4
117 changed files with 707 additions and 705 deletions
+6 -6
View File
@@ -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
View File
@@ -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);