index.less 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. @import '../style/var';
  2. .van-stepper {
  3. font-size: 0;
  4. user-select: none;
  5. &__minus,
  6. &__plus {
  7. position: relative;
  8. box-sizing: border-box;
  9. width: @stepper-input-height;
  10. height: @stepper-input-height;
  11. margin: 0;
  12. padding: 0;
  13. color: @stepper-button-icon-color;
  14. vertical-align: middle;
  15. background-color: @stepper-background-color;
  16. border: 0;
  17. cursor: pointer;
  18. &::before {
  19. width: 50%;
  20. height: 1px;
  21. }
  22. &::after {
  23. width: 1px;
  24. height: 50%;
  25. }
  26. &::before,
  27. &::after {
  28. position: absolute;
  29. top: 50%;
  30. left: 50%;
  31. background-color: currentColor;
  32. transform: translate(-50%, -50%);
  33. content: '';
  34. }
  35. &:active {
  36. background-color: @stepper-active-color;
  37. }
  38. &--disabled {
  39. color: @stepper-button-disabled-icon-color;
  40. background-color: @stepper-button-disabled-color;
  41. cursor: not-allowed;
  42. &:active {
  43. background-color: @stepper-button-disabled-color;
  44. }
  45. }
  46. }
  47. &__minus {
  48. border-radius: @stepper-border-radius 0 0 @stepper-border-radius;
  49. &::after {
  50. display: none;
  51. }
  52. }
  53. &__plus {
  54. border-radius: 0 @stepper-border-radius @stepper-border-radius 0;
  55. }
  56. &__input {
  57. box-sizing: border-box;
  58. width: @stepper-input-width;
  59. height: @stepper-input-height;
  60. margin: 0 2px;
  61. padding: 0;
  62. color: @stepper-input-text-color;
  63. font-size: @stepper-input-font-size;
  64. line-height: @stepper-input-line-height;
  65. text-align: center;
  66. vertical-align: middle;
  67. background-color: @stepper-background-color;
  68. border: 0;
  69. border-width: 1px 0;
  70. border-radius: 0;
  71. -webkit-appearance: none;
  72. &:disabled {
  73. color: @stepper-input-disabled-text-color;
  74. background-color: @stepper-input-disabled-background-color;
  75. // fix disabled color in iOSF
  76. -webkit-text-fill-color: @stepper-input-disabled-text-color;
  77. opacity: 1;
  78. }
  79. &:read-only {
  80. cursor: default;
  81. }
  82. }
  83. &--round {
  84. .van-stepper__input {
  85. background-color: transparent;
  86. }
  87. .van-stepper__plus,
  88. .van-stepper__minus {
  89. border-radius: 100%;
  90. &:active {
  91. opacity: @active-opacity;
  92. }
  93. &--disabled {
  94. &,
  95. &:active {
  96. opacity: 0.3;
  97. }
  98. }
  99. }
  100. .van-stepper__plus {
  101. color: @white;
  102. background-color: @stepper-button-round-theme-color;
  103. }
  104. .van-stepper__minus {
  105. color: @stepper-button-round-theme-color;
  106. background-color: @white;
  107. border: 1px solid @stepper-button-round-theme-color;
  108. }
  109. }
  110. }