index.less 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. @import '../style/var';
  2. .van-stepper {
  3. font-size: 0;
  4. &__minus,
  5. &__plus {
  6. width: 28px;
  7. height: 28px;
  8. box-sizing: border-box;
  9. background-color: @stepper-background-color;
  10. border: 0;
  11. margin: 1px;
  12. position: relative;
  13. padding: 5px;
  14. vertical-align: middle;
  15. &::before {
  16. width: 9px;
  17. height: 1px;
  18. }
  19. &::after {
  20. width: 1px;
  21. height: 9px;
  22. }
  23. &::before,
  24. &::after {
  25. content: '';
  26. position: absolute;
  27. margin: auto;
  28. top: 0;
  29. left: 0;
  30. right: 0;
  31. bottom: 0;
  32. background-color: @text-color;
  33. }
  34. &:active {
  35. background-color: @stepper-active-color;
  36. }
  37. &--disabled {
  38. background-color: @stepper-button-disabled-color;
  39. &::before,
  40. &::after {
  41. background-color: @gray;
  42. }
  43. }
  44. &--disabled:active {
  45. background-color: @stepper-button-disabled-color;
  46. }
  47. }
  48. &__minus {
  49. border-radius: @stepper-border-radius 0 0 @stepper-border-radius;
  50. &::after {
  51. display: none;
  52. }
  53. }
  54. &__plus {
  55. border-radius: 0 @stepper-border-radius @stepper-border-radius 0;
  56. }
  57. &__input {
  58. width: 30px;
  59. height: 26px;
  60. padding: 1px;
  61. border: 0;
  62. margin: 1px;
  63. background-color: @stepper-background-color;
  64. border-width: 1px 0;
  65. border-radius: 0;
  66. box-sizing: content-box;
  67. color: @text-color;
  68. font-size: 14px;
  69. vertical-align: middle;
  70. text-align: center;
  71. -webkit-appearance: none;
  72. &[disabled] {
  73. color: @gray;
  74. background-color: @stepper-input-disabled-color;
  75. }
  76. }
  77. input[type="number"]::-webkit-inner-spin-button,
  78. input[type="number"]::-webkit-outer-spin-button {
  79. -webkit-appearance: none;
  80. margin: 0;
  81. }
  82. }