index.acss 3.3 KB

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