.stepper-index { display: block; height: initial; } @import "../common/index.acss"; .stepper-index .van-stepper { font-size: 0; } .stepper-index .van-stepper__minus, .stepper-index .van-stepper__plus { position: relative; display: inline-block; box-sizing: border-box; margin: 1px; vertical-align: middle; border: 0; background-color: #f2f3f5; background-color: var(--stepper-background-color, #f2f3f5); color: #323233; color: var(--stepper-button-icon-color, #323233); width: 28px; width: var(--stepper-input-height, 28px); height: 28px; height: var(--stepper-input-height, 28px); padding: 4px; padding: var(--padding-base, 4px); } .stepper-index .van-stepper__minus:before, .stepper-index .van-stepper__plus:before { width: 9px; height: 1px; } .stepper-index .van-stepper__minus:after, .stepper-index .van-stepper__plus:after { width: 1px; height: 9px; } .stepper-index .van-stepper__minus:after, .stepper-index .van-stepper__minus:before, .stepper-index .van-stepper__plus:after, .stepper-index .van-stepper__plus:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: currentColor; content: ""; } .stepper-index .van-stepper__minus--hover, .stepper-index .van-stepper__plus--hover { background-color: #e8e8e8; background-color: var(--stepper-active-color, #e8e8e8); } .stepper-index .van-stepper__minus--disabled, .stepper-index .van-stepper__plus--disabled { color: #c8c9cc; color: var(--stepper-button-disabled-icon-color, #c8c9cc); } .stepper-index .van-stepper__minus--disabled, .stepper-index .van-stepper__minus--disabled.van-stepper__minus--hover, .stepper-index .van-stepper__minus--disabled.van-stepper__plus--hover, .stepper-index .van-stepper__plus--disabled, .stepper-index .van-stepper__plus--disabled.van-stepper__minus--hover, .stepper-index .van-stepper__plus--disabled.van-stepper__plus--hover { background-color: #f7f8fa; background-color: var(--stepper-button-disabled-color, #f7f8fa); } .stepper-index .van-stepper__minus { border-radius: 4px 0 0 4px; border-radius: var(--stepper-border-radius, 4px) 0 0 var(--stepper-border-radius, 4px); } .stepper-index .van-stepper__minus:after { display: none; } .stepper-index .van-stepper__plus { border-radius: 0 4px 4px 0; border-radius: 0 var(--stepper-border-radius, 4px) var(--stepper-border-radius, 4px) 0; } .stepper-index .van-stepper__input { display: inline-block; box-sizing: border-box; min-height: 0; margin: 1px; padding: 1px; text-align: center; vertical-align: middle; border: 0; border-width: 1px 0; border-radius: 0; -webkit-appearance: none; font-size: 14px; font-size: var(--stepper-input-font-size, 14px); color: #323233; color: var(--stepper-input-text-color, #323233); background-color: #f2f3f5; background-color: var(--stepper-background-color, #f2f3f5); width: 32px; width: var(--stepper-input-width, 32px); height: 28px; height: var(--stepper-input-height, 28px); } .stepper-index .van-stepper__input--disabled { color: #c8c9cc; color: var(--stepper-input-disabled-text-color, #c8c9cc); background-color: #f2f3f5; background-color: var(--stepper-input-disabled-background-color, #f2f3f5); }