4fe12a71de1403165d15937b6610785ac57a702a06c710a0911df3e055484eff74a618014bb491f66a09237f2dbead45866113262787b3c60e6d61b41629fb 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. @use 'sass:math';
  2. @use 'sass:map';
  3. @use 'mixins/mixins' as *;
  4. @use 'common/var' as *;
  5. @include b(input-number) {
  6. position: relative;
  7. display: inline-flex;
  8. width: map.get($input-number-width, 'default');
  9. line-height: #{map.get($input-height, 'default') - 2};
  10. vertical-align: middle;
  11. .#{$namespace}-input {
  12. &__wrapper {
  13. padding-left: #{map.get($input-height, 'default') + 10};
  14. padding-right: #{map.get($input-height, 'default') + 10};
  15. }
  16. &__inner {
  17. -webkit-appearance: none;
  18. -moz-appearance: textfield;
  19. text-align: center;
  20. line-height: 1;
  21. &::-webkit-inner-spin-button,
  22. &::-webkit-outer-spin-button {
  23. margin: 0;
  24. -webkit-appearance: none;
  25. }
  26. }
  27. }
  28. @each $align in (left, right, center) {
  29. @include when($align) {
  30. .#{$namespace}-input__inner {
  31. text-align: $align;
  32. }
  33. }
  34. }
  35. @include e((increase, decrease)) {
  36. display: flex;
  37. justify-content: center;
  38. align-items: center;
  39. height: auto;
  40. position: absolute;
  41. z-index: 1;
  42. top: 1px;
  43. bottom: 1px;
  44. width: map.get($input-height, 'default');
  45. background: getCssVar('fill-color', 'light');
  46. color: getCssVar('text-color', 'regular');
  47. cursor: pointer;
  48. font-size: 13px;
  49. user-select: none;
  50. &:hover {
  51. color: getCssVar('color-primary');
  52. & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__wrapper {
  53. box-shadow: 0 0 0 1px
  54. var(
  55. #{getCssVarName('input', 'focus-border-color')},
  56. map.get($input, 'focus-border-color')
  57. )
  58. inset;
  59. }
  60. }
  61. &.is-disabled {
  62. color: getCssVar('disabled-text-color');
  63. cursor: not-allowed;
  64. }
  65. }
  66. @include e(increase) {
  67. right: 1px;
  68. border-radius: 0 getCssVar('border-radius-base')
  69. getCssVar('border-radius-base') 0;
  70. border-left: getCssVar('border');
  71. }
  72. @include e(decrease) {
  73. left: 1px;
  74. border-radius: getCssVar('border-radius-base') 0 0
  75. getCssVar('border-radius-base');
  76. border-right: getCssVar('border');
  77. }
  78. @include when(disabled) {
  79. @include e((increase, decrease)) {
  80. border-color: getCssVar('disabled-border-color');
  81. color: getCssVar('disabled-border-color');
  82. &:hover {
  83. color: getCssVar('disabled-border-color');
  84. cursor: not-allowed;
  85. }
  86. }
  87. }
  88. @each $size in (large, small) {
  89. @include m($size) {
  90. width: map.get($input-number-width, $size);
  91. line-height: #{map.get($input-height, $size) - 2};
  92. @include e((increase, decrease)) {
  93. width: map.get($input-height, $size);
  94. font-size: map.get($input-font-size, $size);
  95. }
  96. @include when(controls-right) {
  97. .#{$namespace}-input--#{$size} {
  98. .#{$namespace}-input__wrapper {
  99. padding-right: #{map.get($input-height, $size) + 7};
  100. }
  101. }
  102. }
  103. .#{$namespace}-input--#{$size} {
  104. .#{$namespace}-input__wrapper {
  105. padding-left: #{map.get($input-height, $size) + 7};
  106. padding-right: #{map.get($input-height, $size) + 7};
  107. }
  108. }
  109. }
  110. }
  111. @include m(small) {
  112. @include e((increase, decrease)) {
  113. [class*='#{$namespace}-icon'] {
  114. transform: scale(0.9);
  115. }
  116. }
  117. }
  118. @include when(without-controls) {
  119. .#{$namespace}-input__wrapper {
  120. padding-left: 15px;
  121. padding-right: 15px;
  122. }
  123. }
  124. @include when(controls-right) {
  125. .#{$namespace}-input__wrapper {
  126. padding-left: 15px;
  127. padding-right: #{map.get($input-height, 'default') + 10};
  128. }
  129. @include e((increase, decrease)) {
  130. @include set-css-var-value(
  131. ('input', 'number-controls-height'),
  132. math.div(map.get($input-height, 'default') - 2, 2)
  133. );
  134. height: getCssVar('input-number-controls-height');
  135. line-height: getCssVar('input-number-controls-height');
  136. [class*='#{$namespace}-icon'] {
  137. transform: scale(0.8);
  138. }
  139. }
  140. @include e(increase) {
  141. bottom: auto;
  142. left: auto;
  143. border-radius: 0 getCssVar('border-radius-base') 0 0;
  144. border-bottom: getCssVar('border');
  145. }
  146. @include e(decrease) {
  147. right: 1px;
  148. top: auto;
  149. left: auto;
  150. border-right: none;
  151. border-left: getCssVar('border');
  152. border-radius: 0 0 getCssVar('border-radius-base') 0;
  153. }
  154. @each $size in (large, small) {
  155. &[class*='#{$size}'] {
  156. [class*='increase'],
  157. [class*='decrease'] {
  158. @include set-css-var-value(
  159. ('input', 'number-controls-height'),
  160. math.div(map.get($input-height, $size) - 2, 2)
  161. );
  162. }
  163. }
  164. }
  165. }
  166. }