| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- @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;
- }
- }
|