[Improvement] Stepper: update disabled style (#997)

This commit is contained in:
neverland 2018-05-05 18:08:17 +08:00 committed by GitHub
parent cb525ca98e
commit 829dd6a36c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 21 deletions

View File

@ -1,5 +1,5 @@
<template>
<div :class="b({ disabled })">
<div :class="b()">
<button
:class="b('minus', { disabled: minusDisabled })"
@click="onChange('minus')"

View File

@ -3,14 +3,6 @@
.van-stepper {
font-size: 0;
&--disabled {
.van-stepper__input,
.van-stepper__minus,
.van-stepper__plus {
border-color: $active-color;
}
}
&__minus,
&__plus {
width: 40px;
@ -48,6 +40,15 @@
background-color: $active-color;
}
&--disabled {
background-color: $background-color;
&::before,
&::after {
background-color: $gray;
}
}
&--disabled:active {
background-color: $background-color;
}
@ -59,20 +60,10 @@
&::after {
display: none;
}
&--disabled {
background-color: $background-color;
border-color: $active-color $border-color $active-color $active-color;
}
}
&__plus {
border-radius: 0 2px 2px 0;
&--disabled {
background-color: $background-color;
border-color: $active-color $active-color $active-color $border-color;
}
}
&__input {
@ -88,10 +79,14 @@
vertical-align: middle;
text-align: center;
-webkit-appearance: none;
&[disabled] {
color: $gray;
}
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}