blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 22:49:15 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Stepper: update style (#2790)

Browse Source
This commit is contained in:
rex 2019-02-19 16:51:46 +08:00 committed by neverland
parent 9d0255d9e1
commit 519b5bf80a
2 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/stepper/index.less
View File

@ -5,11 +5,12 @@
&__minus, &__minus,
&__plus { &__plus {
width: 40px; width: 28px;
height: 30px; height: 28px;
box-sizing: border-box; box-sizing: border-box;
background-color: @white; background-color: @stepper-background-color;
border: 1px solid @border-color; border: 0;
margin: 1px;
position: relative; position: relative;
padding: 5px; padding: 5px;
vertical-align: middle; vertical-align: middle;
@ -33,7 +34,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: @gray-darker; background-color: @text-color;
} }
&:active { &:active {
@ -41,7 +42,7 @@
} }
&--disabled { &--disabled {
background-color: @background-color; background-color: @stepper-button-disabled-color;
&::before, &::before,
&::after { &::after {
@ -50,12 +51,12 @@
} }
&--disabled:active { &--disabled:active {
background-color: @background-color; background-color: @stepper-button-disabled-color;
} }
} }
&__minus { &__minus {
border-radius: 2px 0 0 2px; border-radius: @stepper-border-radius 0 0 @stepper-border-radius;
&::after { &::after {
display: none; display: none;
@ -63,18 +64,20 @@
} }
&__plus { &__plus {
border-radius: 0 2px 2px 0; border-radius: 0 @stepper-border-radius @stepper-border-radius 0;
} }
&__input { &__input {
width: 33px; width: 30px;
height: 26px; height: 26px;
padding: 1px; padding: 1px;
border: 1px solid @border-color; border: 0;
margin: 1px;
background-color: @stepper-background-color;
border-width: 1px 0; border-width: 1px 0;
border-radius: 0; border-radius: 0;
box-sizing: content-box; box-sizing: content-box;
color: @gray-darker; color: @text-color;
font-size: 14px; font-size: 14px;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
@ -82,7 +85,7 @@
&[disabled] { &[disabled] {
color: @gray; color: @gray;
background-color: @background-color; background-color: @stepper-input-disabled-color;
} }
} }

6
packages/style/var.less
View File

@ -148,3 +148,9 @@
// Search // Search
@search-background-color: #f7f8fA; @search-background-color: #f7f8fA;
// Stepper
@stepper-background-color: #f2f3f5;
@stepper-button-disabled-color: #f7f8fa;
@stepper-border-radius: 4px;
@stepper-input-disabled-color: #f2f3f5;