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/step/index.less
+27 -17
View File
@@ -1,22 +1,36 @@
@import './var.less';
:root {
--van-step-text-color: @step-text-color;
--van-step-active-color: @step-active-color;
--van-step-process-text-color: @step-process-text-color;
--van-step-font-size: @step-font-size;
--van-step-line-color: @step-line-color;
--van-step-finish-line-color: @step-finish-line-color;
--van-step-finish-text-color: @step-finish-text-color;
--van-step-icon-size: @step-icon-size;
--van-step-circle-size: @step-circle-size;
--van-step-circle-color: @step-circle-color;
--van-step-horizontal-title-font-size: @step-horizontal-title-font-size;
}
.van-step {
position: relative;
flex: 1;
color: @step-text-color;
font-size: @step-font-size;
color: var(--van-step-text-color);
font-size: var(--van-step-font-size);
&__circle {
display: block;
width: @step-circle-size;
height: @step-circle-size;
background-color: @step-circle-color;
width: var(--van-step-circle-size);
height: var(--van-step-circle-size);
background-color: var(--van-step-circle-color);
border-radius: 50%;
}
&__line {
position: absolute;
background-color: @step-line-color;
background-color: var(--van-step-line-color);
transition: background-color @animation-duration-base;
}
@@ -59,12 +73,8 @@
.van-step__title {
display: inline-block;
margin-left: 3px;
font-size: @step-horizontal-title-font-size;
font-size: var(--van-step-horizontal-title-font-size);
transform: translateX(-50%);
@media (max-width: 321px) {
font-size: @step-horizontal-title-font-size - 1px;
}
}
.van-step__line {
@@ -76,11 +86,11 @@
.van-step__icon {
display: block;
font-size: @step-icon-size;
font-size: var(--van-step-icon-size);
}
.van-step--process {
color: @step-process-text-color;
color: var(--van-step-process-text-color);
}
}
@@ -112,7 +122,7 @@
top: 19px;
left: -15px;
z-index: 2;
font-size: @step-icon-size;
font-size: var(--van-step-icon-size);
line-height: 1;
transform: translate(-50%, -50%);
}
@@ -132,11 +142,11 @@
}
&--finish {
color: @step-finish-text-color;
color: var(--van-step-finish-text-color);
.van-step__circle,
.van-step__line {
background-color: @step-finish-line-color;
background-color: var(--van-step-finish-line-color);
}
}
@@ -146,7 +156,7 @@
&--active,
&--finish {
color: @step-active-color;
color: var(--van-step-active-color);
}
}
}