@import './index.less'; .@{form-item-prefix-cls} { // ================================================================ // = Status = // ================================================================ /* Some non-status related component style is in `components.less` */ // ========================= Explain ========================= /* To support leave along ErrorList. We add additional className to handle explain style */ &-explain { &&-error { color: @error-color; } &&-warning { color: @warning-color; } } &-has-feedback { // ========================= Input ========================= .@{ant-prefix}-input { padding-right: 24px; } // https://github.com/ant-design/ant-design/issues/19884 .@{ant-prefix}-input-affix-wrapper { .@{ant-prefix}-input-suffix { padding-right: 18px; } } // Fix issue: https://github.com/ant-design/ant-design/issues/7854 .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) { .@{ant-prefix}-input-suffix { right: 28px; } } // ======================== Switch ========================= .@{ant-prefix}-switch { margin: 2px 0 4px; } // ======================== Select ========================= // Fix overlapping between feedback icon and <Select>'s arrow. // https://github.com/ant-design/ant-design/issues/4431 > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, > .@{ant-prefix}-select .@{ant-prefix}-select-clear, :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-clear { right: 32px; } > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value, :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value { padding-right: 42px; } // ======================= Cascader ======================== .@{ant-prefix}-cascader-picker { &-arrow { margin-right: 19px; } &-clear { right: 32px; } } // ======================== Picker ========================= // Fix issue: https://github.com/ant-design/ant-design/issues/4783 .@{ant-prefix}-picker { padding-right: @input-padding-horizontal-base + @font-size-base * 1.3; &-large { padding-right: @input-padding-horizontal-lg + @font-size-base * 1.3; } &-small { padding-right: @input-padding-horizontal-sm + @font-size-base * 1.3; } } // ===================== Status Group ====================== &.@{form-item-prefix-cls} { &-has-success, &-has-warning, &-has-error, &-is-validating { // ====================== Icon ====================== .@{form-item-prefix-cls}-children-icon { position: absolute; top: 50%; right: 0; z-index: 1; width: @input-height-base; height: 20px; margin-top: -10px; font-size: @font-size-base; line-height: 20px; text-align: center; visibility: visible; animation: zoomIn 0.3s @ease-out-back; pointer-events: none; } } } } // ======================== Success ======================== &-has-success { &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon { color: @success-color; animation-name: diffZoomIn1 !important; } } // ======================== Warning ======================== &-has-warning { .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg); &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon { color: @warning-color; animation-name: diffZoomIn3 !important; } // Select .@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled):not(.@{ant-prefix}-select-customize-input) { .@{ant-prefix}-select-selector { background-color: @form-warning-input-bg; border-color: @warning-color !important; } &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector, &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector { .active(@warning-color); } } // InputNumber, TimePicker .@{ant-prefix}-input-number, .@{ant-prefix}-picker { background-color: @form-warning-input-bg; border-color: @warning-color; &-focused, &:focus { .active(@warning-color); } &:not([disabled]):hover { background-color: @form-warning-input-bg; border-color: @warning-color; } } .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input { .active(@warning-color); } } // ========================= Error ========================= &-has-error { .form-control-validation(@error-color; @error-color; @form-error-input-bg); &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon { color: @error-color; animation-name: diffZoomIn2 !important; } // Select .@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled):not(.@{ant-prefix}-select-customize-input) { .@{ant-prefix}-select-selector { background-color: @form-error-input-bg; border-color: @error-color !important; } &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector, &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector { .active(@error-color); } } // fixes https://github.com/ant-design/ant-design/issues/20482 .@{ant-prefix}-input-group-addon .@{ant-prefix}-select { &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input) .@{ant-prefix}-select-selector { background-color: inherit; border: 0; box-shadow: none; } } .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete { .@{ant-prefix}-input:focus { border-color: @error-color; } } // InputNumber, TimePicker .@{ant-prefix}-input-number, .@{ant-prefix}-picker { background-color: @form-error-input-bg; border-color: @error-color; &-focused, &:focus { .active(@error-color); } &:not([disabled]):hover { background-color: @form-error-input-bg; border-color: @error-color; } } .@{ant-prefix}-mention-wrapper { .@{ant-prefix}-mention-editor { &, &:not([disabled]):hover { background-color: @form-error-input-bg; border-color: @error-color; } } &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor, .@{ant-prefix}-mention-editor:not([disabled]):focus { .active(@error-color); } } // cascader .@{ant-prefix}-cascader-picker { &:hover .@{ant-prefix}-cascader-picker-label:hover + .@{ant-prefix}-cascader-input.@{ant-prefix}-input { border-color: @error-color; } &:focus .@{ant-prefix}-cascader-input { background-color: @form-error-input-bg; .active(@error-color); } } // transfer .@{ant-prefix}-transfer { &-list { border-color: @error-color; &-search:not([disabled]) { border-color: @input-border-color; &:hover { .hover(); } &:focus { .active(); } } } } // RadioGroup .@{ant-prefix}-radio-button-wrapper { border-color: @error-color !important; &:not(:first-child) { &::before { background-color: @error-color; } } } } // ====================== Validating ======================= &-is-validating { &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon { display: inline-block; color: @primary-color; } } }