@import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; @input-number-prefix-cls: ~'@{ant-prefix}-input-number'; @form-item-prefix-cls: ~'@{ant-prefix}-form-item'; .@{input-number-prefix-cls} { .reset-component(); .input(); display: inline-block; width: 90px; margin: 0; padding: 0; border: @border-width-base @border-style-base @border-color-base; border-radius: @border-radius-base; &-handler { position: relative; display: block; width: 100%; height: 50%; overflow: hidden; color: @text-color-secondary; font-weight: bold; line-height: 0; text-align: center; transition: all 0.1s linear; &:active { background: @input-number-handler-active-bg; } &:hover &-up-inner, &:hover &-down-inner { color: @input-number-handler-hover-bg; } } &-handler-up-inner, &-handler-down-inner { .iconfont-mixin(); position: absolute; right: 4px; width: 12px; height: 12px; color: @text-color-secondary; line-height: 12px; transition: all 0.1s linear; user-select: none; } &:hover { .hover(@input-number-hover-border-color); & + .@{form-item-prefix-cls}-children-icon { opacity: 0; transition: opacity 0.24s linear 0.24s; } } &-focused { .active(); } &-disabled { .disabled(); .@{input-number-prefix-cls}-input { cursor: not-allowed; } .@{input-number-prefix-cls}-handler-wrap { display: none; } } &-readonly { .@{input-number-prefix-cls}-handler-wrap { display: none; } } &-input { width: 100%; height: @input-height-base - 2px; padding: 0 @control-padding-horizontal - 1px; text-align: left; background-color: transparent; border: 0; border-radius: @border-radius-base; outline: 0; transition: all 0.3s linear; -moz-appearance: textfield !important; .placeholder(); &[type='number']::-webkit-inner-spin-button, &[type='number']::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } } &-lg { padding: 0; font-size: @font-size-lg; input { height: @input-height-lg - 2px; } } &-sm { padding: 0; input { height: @input-height-sm - 2px; padding: 0 @control-padding-horizontal-sm - 1px; } } &-handler-wrap { position: absolute; top: 0; right: 0; width: 22px; height: 100%; background: @input-number-handler-bg; border-left: @border-width-base @border-style-base @input-number-handler-border-color; border-radius: 0 @border-radius-base @border-radius-base 0; opacity: 0; transition: opacity 0.24s linear 0.1s; // Fix input number inside Menu makes icon too large // We arise the selector priority by nest selector here // https://github.com/ant-design/ant-design/issues/14367 .@{input-number-prefix-cls}-handler { .@{input-number-prefix-cls}-handler-up-inner, .@{input-number-prefix-cls}-handler-down-inner { min-width: auto; margin-right: 0; font-size: 7px; } } .@{input-number-prefix-cls}-borderless & { border-left-width: 0; } } &-handler-wrap:hover &-handler { height: 40%; } &:hover &-handler-wrap { opacity: 1; } &-handler-up { border-top-right-radius: @border-radius-base; cursor: pointer; &-inner { top: 50%; margin-top: -5px; text-align: center; } &:hover { height: 60% !important; } } &-handler-down { top: 0; border-top: @border-width-base @border-style-base @border-color-base; border-bottom-right-radius: @border-radius-base; cursor: pointer; &-inner { top: 50%; text-align: center; transform: translateY(-50%); } &:hover { height: 60% !important; } .@{input-number-prefix-cls}-borderless & { border-top-width: 0; } } &-handler-up-disabled, &-handler-down-disabled { cursor: not-allowed; } &-handler-up-disabled:hover &-handler-up-inner, &-handler-down-disabled:hover &-handler-down-inner { color: @disabled-color; } &-borderless { box-shadow: none; } // ===================== Out Of Range ===================== &-out-of-range { input { color: @error-color; } } } @import './rtl';