@import '../style/var'; .van-stepper { font-size: 0; &__minus, &__plus { width: 28px; height: 28px; box-sizing: border-box; background-color: @stepper-background-color; border: 0; margin: 1px; position: relative; padding: 5px; vertical-align: middle; &::before { width: 9px; height: 1px; } &::after { width: 1px; height: 9px; } &::before, &::after { content: ''; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; background-color: @text-color; } &:active { background-color: @stepper-active-color; } &--disabled { background-color: @stepper-button-disabled-color; &::before, &::after { background-color: @gray; } } &--disabled:active { background-color: @stepper-button-disabled-color; } } &__minus { border-radius: @stepper-border-radius 0 0 @stepper-border-radius; &::after { display: none; } } &__plus { border-radius: 0 @stepper-border-radius @stepper-border-radius 0; } &__input { width: 30px; height: 26px; padding: 1px; border: 0; margin: 1px; background-color: @stepper-background-color; border-width: 1px 0; border-radius: 0; box-sizing: content-box; color: @text-color; font-size: 14px; vertical-align: middle; text-align: center; -webkit-appearance: none; &[disabled] { color: @gray; background-color: @stepper-input-disabled-color; } } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } }