index.wxss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. .wux-input-number {
  2. position: relative;
  3. display: flex
  4. }
  5. .wux-input-number__input {
  6. width: 96rpx;
  7. height: 52rpx;
  8. font-size: 32rpx;
  9. line-height: 52rpx;
  10. color: rgba(0,0,0,.65);
  11. -webkit-appearance: none;
  12. -moz-appearance: none;
  13. appearance: none;
  14. border: 2rpx solid #e8e8e8;
  15. padding: 6rpx 0;
  16. text-align: center;
  17. min-height: inherit;
  18. box-sizing: border-box
  19. }
  20. .wux-input-number__input--disabled {
  21. opacity: 1
  22. }
  23. .wux-input-number__selector {
  24. width: 68rpx;
  25. height: 52rpx;
  26. font-size: 48rpx;
  27. line-height: 52rpx;
  28. color: #33cd5f;
  29. border: 2rpx solid #e8e8e8;
  30. box-sizing: border-box;
  31. display: flex;
  32. align-items: center;
  33. justify-content: center
  34. }
  35. .wux-input-number__selector--disabled {
  36. color: #ccc!important
  37. }
  38. .wux-input-number__selector--sub {
  39. border-right: none;
  40. padding: 6rpx 20rpx;
  41. border-radius: 4rpx 0 0 4rpx
  42. }
  43. .wux-input-number__selector--add {
  44. border-left: none;
  45. padding: 6rpx 16rpx;
  46. border-radius: 0 4rpx 4rpx 0
  47. }
  48. .wux-input-number__icon {
  49. font-size: inherit!important;
  50. vertical-align: middle;
  51. line-height: inherit
  52. }
  53. .wux-input-number--circle .wux-input-number__input {
  54. border-color: transparent
  55. }
  56. .wux-input-number--circle .wux-input-number__selector {
  57. width: 52rpx;
  58. border-radius: 50%;
  59. border: 2rpx solid #33cd5f
  60. }
  61. .wux-input-number--circle .wux-input-number__selector--disabled {
  62. border-color: #ccc!important
  63. }
  64. .wux-input-number .wux-input-number__selector--light {
  65. color: #ddd
  66. }
  67. .wux-input-number--circle .wux-input-number__selector--light {
  68. border-color: #ddd
  69. }
  70. .wux-input-number .wux-input-number__selector--stable {
  71. color: #b2b2b2
  72. }
  73. .wux-input-number--circle .wux-input-number__selector--stable {
  74. border-color: #b2b2b2
  75. }
  76. .wux-input-number .wux-input-number__selector--positive {
  77. color: #387ef5
  78. }
  79. .wux-input-number--circle .wux-input-number__selector--positive {
  80. border-color: #387ef5
  81. }
  82. .wux-input-number .wux-input-number__selector--calm {
  83. color: #11c1f3
  84. }
  85. .wux-input-number--circle .wux-input-number__selector--calm {
  86. border-color: #11c1f3
  87. }
  88. .wux-input-number .wux-input-number__selector--assertive {
  89. color: #ef473a
  90. }
  91. .wux-input-number--circle .wux-input-number__selector--assertive {
  92. border-color: #ef473a
  93. }
  94. .wux-input-number .wux-input-number__selector--balanced {
  95. color: #33cd5f
  96. }
  97. .wux-input-number--circle .wux-input-number__selector--balanced {
  98. border-color: #33cd5f
  99. }
  100. .wux-input-number .wux-input-number__selector--energized {
  101. color: #ffc900
  102. }
  103. .wux-input-number--circle .wux-input-number__selector--energized {
  104. border-color: #ffc900
  105. }
  106. .wux-input-number .wux-input-number__selector--royal {
  107. color: #886aea
  108. }
  109. .wux-input-number--circle .wux-input-number__selector--royal {
  110. border-color: #886aea
  111. }
  112. .wux-input-number .wux-input-number__selector--dark {
  113. color: #444
  114. }
  115. .wux-input-number--circle .wux-input-number__selector--dark {
  116. border-color: #444
  117. }