input-number.scss 4.2 KB

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