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

[improvement] Step: add less vars

Browse Source
This commit is contained in:
陈嘉涵 2019-05-16 20:54:19 +08:00
parent aacd168dd6
commit 6160d4e620
3 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/step/index.less
View File

@ -3,17 +3,22 @@
.van-step { .van-step {
position: relative; position: relative;
flex: 1; flex: 1;
color: @gray-dark; color: @step-text-color;
font-size: 14px; font-size: @step-font-size;
&__circle { &__circle {
display: block; display: block;
width: 5px; width: @step-circle-size;
height: 5px; height: @step-circle-size;
background-color: @gray-dark; background-color: @step-circle-color;
border-radius: 50%; border-radius: 50%;
} }
&__line {
position: absolute;
background-color: @step-line-color;
}
&--horizontal { &--horizontal {
float: left; float: left;
@ -53,30 +58,28 @@
.van-step__title { .van-step__title {
display: inline-block; display: inline-block;
margin-left: 3px; margin-left: 3px;
font-size: 12px; font-size: @step-horizontal-title-font-size;
transform: translateX(-50%); transform: translateX(-50%);
@media (max-width: 321px) { @media (max-width: 321px) {
font-size: 11px; font-size: @step-horizontal-title-font-size - 1px;
} }
} }
.van-step__line { .van-step__line {
position: absolute;
top: 30px; top: 30px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: @border-color;
} }
.van-step__icon { .van-step__icon {
display: block; display: block;
font-size: 12px; font-size: @step-icon-size;
} }
.van-step--process { .van-step--process {
color: @text-color; color: @step-process-text-color;
} }
} }
@ -84,7 +87,6 @@
display: block; display: block;
float: none; float: none;
padding: 10px 10px 10px 0; padding: 10px 10px 10px 0;
font-size: 14px;
line-height: 18px; line-height: 18px;
&:not(:last-child)::after { &:not(:last-child)::after {
@ -109,18 +111,16 @@
top: 19px; top: 19px;
left: -15px; left: -15px;
z-index: 2; z-index: 2;
font-size: 12px; font-size: @step-icon-size;
line-height: 1; line-height: 1;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.van-step__line { .van-step__line {
position: absolute;
top: 16px; top: 16px;
left: -15px; left: -15px;
width: 1px; width: 1px;
height: 100%; height: 100%;
background-color: @border-color;
} }
} }
@ -131,11 +131,11 @@
} }
&--finish { &--finish {
color: @text-color; color: @step-finish-text-color;
.van-step__circle, .van-step__circle,
.van-step__line { .van-step__line {
background-color: @green; background-color: @step-finish-line-color;
} }
} }
} }

2
packages/steps/index.less
View File

@ -2,7 +2,7 @@
.van-steps { .van-steps {
overflow: hidden; overflow: hidden;
background-color: @white; background-color: @steps-background-color;
&--horizontal { &--horizontal {
padding: 10px 10px 0; padding: 10px 10px 0;

15
packages/style/var.less
View File

@ -434,6 +434,21 @@
@slider-button-background-color: @white; @slider-button-background-color: @white;
@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5); @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
// Step
@step-text-color: @gray-dark;
@step-process-text-color: @text-color;
@step-font-size: 14px;
@step-line-color: @border-color;
@step-finish-line-color: @green;
@step-finish-text-color: @text-color;
@step-icon-size: 12px;
@step-circle-size: 5px;
@step-circle-color: @gray-dark;
@step-horizontal-title-font-size: 12px;
// Steps
@steps-background-color: @white;
// Stepper // Stepper
@stepper-active-color: #e8e8e8; @stepper-active-color: #e8e8e8;
@stepper-background-color: @active-color; @stepper-background-color: @active-color;