index.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. @import '../common/index.css';
  2. .van-stepper {
  3. font-size: 0;
  4. }
  5. .van-stepper__minus,
  6. .van-stepper__plus {
  7. position: relative;
  8. display: inline-block;
  9. box-sizing: border-box;
  10. margin: 1px;
  11. vertical-align: middle;
  12. border: 0;
  13. background-color: #f2f3f5;
  14. background-color: var(--stepper-background-color, #f2f3f5);
  15. color: #323233;
  16. color: var(--stepper-button-icon-color, #323233);
  17. width: 28px;
  18. width: var(--stepper-input-height, 28px);
  19. height: 28px;
  20. height: var(--stepper-input-height, 28px);
  21. padding: 4px;
  22. padding: var(--padding-base, 4px);
  23. }
  24. .van-stepper__minus:before,
  25. .van-stepper__plus:before {
  26. width: 9px;
  27. height: 1px;
  28. }
  29. .van-stepper__minus:after,
  30. .van-stepper__plus:after {
  31. width: 1px;
  32. height: 9px;
  33. }
  34. .van-stepper__minus:after,
  35. .van-stepper__minus:before,
  36. .van-stepper__plus:after,
  37. .van-stepper__plus:before {
  38. position: absolute;
  39. top: 0;
  40. right: 0;
  41. bottom: 0;
  42. left: 0;
  43. margin: auto;
  44. background-color: currentColor;
  45. content: '';
  46. }
  47. .van-stepper__minus--hover,
  48. .van-stepper__plus--hover {
  49. background-color: #e8e8e8;
  50. background-color: var(--stepper-active-color, #e8e8e8);
  51. }
  52. .van-stepper__minus--disabled,
  53. .van-stepper__plus--disabled {
  54. color: #c8c9cc;
  55. color: var(--stepper-button-disabled-icon-color, #c8c9cc);
  56. }
  57. .van-stepper__minus--disabled,
  58. .van-stepper__minus--disabled.van-stepper__minus--hover,
  59. .van-stepper__minus--disabled.van-stepper__plus--hover,
  60. .van-stepper__plus--disabled,
  61. .van-stepper__plus--disabled.van-stepper__minus--hover,
  62. .van-stepper__plus--disabled.van-stepper__plus--hover {
  63. background-color: #f7f8fa;
  64. background-color: var(--stepper-button-disabled-color, #f7f8fa);
  65. }
  66. .van-stepper__minus {
  67. border-radius: 4px 0 0 4px;
  68. border-radius: var(--stepper-border-radius, 4px) 0 0 var(--stepper-border-radius, 4px);
  69. }
  70. .van-stepper__minus:after {
  71. display: none;
  72. }
  73. .van-stepper__plus {
  74. border-radius: 0 4px 4px 0;
  75. border-radius: 0 var(--stepper-border-radius, 4px) var(--stepper-border-radius, 4px) 0;
  76. }
  77. .van-stepper__input {
  78. display: inline-block;
  79. box-sizing: border-box;
  80. min-height: 0;
  81. margin: 1px;
  82. padding: 1px;
  83. text-align: center;
  84. vertical-align: middle;
  85. border: 0;
  86. border-width: 1px 0;
  87. border-radius: 0;
  88. -webkit-appearance: none;
  89. font-size: 14px;
  90. font-size: var(--stepper-input-font-size, 14px);
  91. color: #323233;
  92. color: var(--stepper-input-text-color, #323233);
  93. background-color: #f2f3f5;
  94. background-color: var(--stepper-background-color, #f2f3f5);
  95. width: 32px;
  96. width: var(--stepper-input-width, 32px);
  97. height: 28px;
  98. height: var(--stepper-input-height, 28px);
  99. }
  100. .van-stepper__input--disabled {
  101. color: #c8c9cc;
  102. color: var(--stepper-input-disabled-text-color, #c8c9cc);
  103. background-color: #f2f3f5;
  104. background-color: var(--stepper-input-disabled-background-color, #f2f3f5);
  105. }