123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- @use 'sass:math';
- @use 'sass:map';
- @use 'mixins/mixins' as *;
- @use 'common/var' as *;
- @include b(input-number) {
- position: relative;
- display: inline-flex;
- width: map.get($input-number-width, 'default');
- line-height: #{map.get($input-height, 'default') - 2};
- .#{$namespace}-input {
- &__wrapper {
- padding-left: #{map.get($input-height, 'default') + 10};
- padding-right: #{map.get($input-height, 'default') + 10};
- }
- &__inner {
- -webkit-appearance: none;
- -moz-appearance: textfield;
- &::-webkit-inner-spin-button,
- &::-webkit-outer-spin-button {
- margin: 0;
- -webkit-appearance: none;
- }
- text-align: center;
- line-height: 1;
- }
- }
- @include e((increase, decrease)) {
- display: flex;
- justify-content: center;
- align-items: center;
- height: auto;
- position: absolute;
- z-index: 1;
- top: 1px;
- bottom: 1px;
- width: map.get($input-height, 'default');
- background: getCssVar('fill-color', 'light');
- color: getCssVar('text-color', 'regular');
- cursor: pointer;
- font-size: 13px;
- user-select: none;
- &:hover {
- color: getCssVar('color-primary');
- & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__wrapper {
- box-shadow: 0 0 0 1px
- var(
- #{getCssVarName('input', 'focus-border-color')},
- map.get($input, 'focus-border-color')
- )
- inset;
- }
- }
- &.is-disabled {
- color: getCssVar('disabled-text-color');
- cursor: not-allowed;
- }
- }
- @include e(increase) {
- right: 1px;
- border-radius: 0 getCssVar('border-radius-base')
- getCssVar('border-radius-base') 0;
- border-left: getCssVar('border');
- }
- @include e(decrease) {
- left: 1px;
- border-radius: getCssVar('border-radius-base') 0 0
- getCssVar('border-radius-base');
- border-right: getCssVar('border');
- }
- @include when(disabled) {
- @include e((increase, decrease)) {
- border-color: getCssVar('disabled-border-color');
- color: getCssVar('disabled-border-color');
- &:hover {
- color: getCssVar('disabled-border-color');
- cursor: not-allowed;
- }
- }
- }
- @each $size in (large, small) {
- @include m($size) {
- width: map.get($input-number-width, $size);
- line-height: #{map.get($input-height, $size) - 2};
- @include e((increase, decrease)) {
- width: map.get($input-height, $size);
- font-size: map.get($input-font-size, $size);
- }
- .#{$namespace}-input--#{$size} {
- .#{$namespace}-input__wrapper {
- padding-left: #{map.get($input-height, $size) + 7};
- padding-right: #{map.get($input-height, $size) + 7};
- }
- }
- }
- }
- @include m(small) {
- @include e((increase, decrease)) {
- [class*='#{$namespace}-icon'] {
- transform: scale(0.9);
- }
- }
- }
- @include when(without-controls) {
- .#{$namespace}-input__wrapper {
- padding-left: 15px;
- padding-right: 15px;
- }
- }
- @include when(controls-right) {
- .#{$namespace}-input__wrapper {
- padding-left: 15px;
- padding-right: #{map.get($input-height, 'default') + 10};
- }
- @include e((increase, decrease)) {
- @include set-css-var-value(
- ('input', 'number-controls-height'),
- math.div(map.get($input-height, 'default') - 2, 2)
- );
- height: getCssVar('input-number-controls-height');
- line-height: getCssVar('input-number-controls-height');
- [class*='#{$namespace}-icon'] {
- transform: scale(0.8);
- }
- }
- @include e(increase) {
- bottom: auto;
- left: auto;
- border-radius: 0 getCssVar('border-radius-base') 0 0;
- border-bottom: getCssVar('border');
- }
- @include e(decrease) {
- right: 1px;
- top: auto;
- left: auto;
- border-right: none;
- border-left: getCssVar('border');
- border-radius: 0 0 getCssVar('border-radius-base') 0;
- }
- @each $size in (large, small) {
- &[class*='#{$size}'] {
- [class*='increase'],
- [class*='decrease'] {
- @include set-css-var-value(
- ('input', 'number-controls-height'),
- math.div(map.get($input-height, $size) - 2, 2)
- );
- }
- }
- }
- }
- }
|