|
|
|
|
@ -3,94 +3,82 @@
|
|
|
|
|
@import '../../input/style/mixin'; |
|
|
|
|
@import '../../button/style/mixin'; |
|
|
|
|
@import '../../grid/style/mixin'; |
|
|
|
|
@import './components'; |
|
|
|
|
@import './inline'; |
|
|
|
|
@import './horizontal'; |
|
|
|
|
@import './vertical'; |
|
|
|
|
@import './status'; |
|
|
|
|
@import './mixin'; |
|
|
|
|
|
|
|
|
|
@form-prefix-cls: ~'@{ant-prefix}-form'; |
|
|
|
|
@form-component-height: @input-height-base; |
|
|
|
|
@form-component-max-height: @input-height-lg; |
|
|
|
|
@form-feedback-icon-size: @font-size-base; |
|
|
|
|
@form-help-margin-top: ((@form-component-height - @form-component-max-height) / 2) + 2px; |
|
|
|
|
@form-explain-font-size: @font-size-base; |
|
|
|
|
// Extends additional 1px to fix precision issue. |
|
|
|
|
// https://github.com/ant-design/ant-design/issues/12803 |
|
|
|
|
// https://github.com/ant-design/ant-design/issues/8220 |
|
|
|
|
@form-explain-precision: 1px; |
|
|
|
|
@form-explain-height: floor(@form-explain-font-size * @line-height-base); |
|
|
|
|
@form-item-prefix-cls: ~'@{form-prefix-cls}-item'; |
|
|
|
|
@form-font-height: ceil(@font-size-base * @line-height-base); |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls} { |
|
|
|
|
.reset-component(); |
|
|
|
|
.reset-form(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-item-required::before { |
|
|
|
|
display: inline-block; |
|
|
|
|
margin-right: 4px; |
|
|
|
|
color: @label-required-color; |
|
|
|
|
font-size: @font-size-base; |
|
|
|
|
font-family: SimSun, sans-serif; |
|
|
|
|
line-height: 1; |
|
|
|
|
content: '*'; |
|
|
|
|
.@{form-prefix-cls}-hide-required-mark & { |
|
|
|
|
display: none; |
|
|
|
|
.@{form-prefix-cls}-text { |
|
|
|
|
display: inline-block; |
|
|
|
|
padding-right: 8px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-item-label > label { |
|
|
|
|
color: @label-color; |
|
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
& when (@form-item-trailing-colon=true) { |
|
|
|
|
content: ':'; |
|
|
|
|
} |
|
|
|
|
& when not (@form-item-trailing-colon=true) { |
|
|
|
|
content: ' '; |
|
|
|
|
// ================================================================ |
|
|
|
|
// = Size = |
|
|
|
|
// ================================================================ |
|
|
|
|
.formSize(@input-height) { |
|
|
|
|
.@{form-item-prefix-cls}-label > label { |
|
|
|
|
height: @input-height; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
top: -0.5px; |
|
|
|
|
margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left; |
|
|
|
|
.@{form-item-prefix-cls}-control-input { |
|
|
|
|
min-height: @input-height; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.@{form-prefix-cls}-item-no-colon::after { |
|
|
|
|
content: ' '; |
|
|
|
|
&-small { |
|
|
|
|
.formSize(@input-height-sm); |
|
|
|
|
} |
|
|
|
|
&-large { |
|
|
|
|
.formSize(@input-height-lg); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Form items |
|
|
|
|
// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing |
|
|
|
|
.@{form-prefix-cls}-item { |
|
|
|
|
label { |
|
|
|
|
position: relative; |
|
|
|
|
.explainAndExtraDistance(@num) when (@num >= 0) { |
|
|
|
|
padding-top: floor(@num); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
> .@{iconfont-css-prefix} { |
|
|
|
|
font-size: @font-size-base; |
|
|
|
|
vertical-align: top; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.explainAndExtraDistance(@num) when (@num < 0) { |
|
|
|
|
margin-top: ceil(@num); |
|
|
|
|
margin-bottom: ceil(@num); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// ================================================================ |
|
|
|
|
// = Item = |
|
|
|
|
// ================================================================ |
|
|
|
|
.@{form-item-prefix-cls} { |
|
|
|
|
.reset-component(); |
|
|
|
|
|
|
|
|
|
margin-bottom: @form-item-margin-bottom; |
|
|
|
|
vertical-align: top; |
|
|
|
|
|
|
|
|
|
&-control { |
|
|
|
|
position: relative; |
|
|
|
|
line-height: @form-component-max-height; |
|
|
|
|
.clearfix(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&-children { |
|
|
|
|
position: relative; |
|
|
|
|
&-with-help { |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&-with-help { |
|
|
|
|
margin-bottom: max(0, @form-item-margin-bottom - @form-explain-height - @form-help-margin-top); |
|
|
|
|
&-hidden, |
|
|
|
|
&-hidden.@{ant-prefix}-row { |
|
|
|
|
// https://github.com/ant-design/ant-design/issues/26141 |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// ============================================================== |
|
|
|
|
// = Label = |
|
|
|
|
// ============================================================== |
|
|
|
|
&-label { |
|
|
|
|
display: inline-block; |
|
|
|
|
flex-grow: 0; |
|
|
|
|
overflow: hidden; |
|
|
|
|
line-height: @form-component-max-height - 0.0001px; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
text-align: right; |
|
|
|
|
vertical-align: middle; |
|
|
|
|
@ -98,505 +86,126 @@
|
|
|
|
|
&-left { |
|
|
|
|
text-align: left; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-switch { |
|
|
|
|
margin: 2px 0 4px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-explain, |
|
|
|
|
.@{form-prefix-cls}-extra { |
|
|
|
|
clear: both; |
|
|
|
|
min-height: @form-explain-height + @form-explain-precision; |
|
|
|
|
margin-top: @form-help-margin-top; |
|
|
|
|
color: @text-color-secondary; |
|
|
|
|
font-size: @form-explain-font-size; |
|
|
|
|
line-height: @line-height-base; |
|
|
|
|
transition: color 0.3s @ease-out; // sync input color transition |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-explain { |
|
|
|
|
margin-bottom: -@form-explain-precision; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-extra { |
|
|
|
|
padding-top: 4px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-text { |
|
|
|
|
display: inline-block; |
|
|
|
|
padding-right: 8px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-split { |
|
|
|
|
display: block; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
form { |
|
|
|
|
.has-feedback { |
|
|
|
|
// https://github.com/ant-design/ant-design/issues/19884 |
|
|
|
|
.@{ant-prefix}-input-affix-wrapper { |
|
|
|
|
.@{ant-prefix}-input-suffix { |
|
|
|
|
padding-right: 18px; |
|
|
|
|
> label { |
|
|
|
|
position: relative; |
|
|
|
|
// display: inline; |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
height: @form-item-label-height; |
|
|
|
|
color: @label-color; |
|
|
|
|
font-size: @form-item-label-font-size; |
|
|
|
|
|
|
|
|
|
> .@{iconfont-css-prefix} { |
|
|
|
|
font-size: @form-item-label-font-size; |
|
|
|
|
vertical-align: top; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 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-selection__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-selection__clear { |
|
|
|
|
right: (@form-component-height / 2) + @form-feedback-icon-size - 2px; |
|
|
|
|
} |
|
|
|
|
> .@{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; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-cascader-picker { |
|
|
|
|
&-arrow { |
|
|
|
|
margin-right: (@form-component-height / 2) + @form-feedback-icon-size - 13px; |
|
|
|
|
} |
|
|
|
|
&-clear { |
|
|
|
|
right: (@form-component-height / 2) + @form-feedback-icon-size - 2px; |
|
|
|
|
// Required mark |
|
|
|
|
&.@{form-item-prefix-cls}-required:not(.@{form-item-prefix-cls}-required-mark-optional)::before { |
|
|
|
|
display: inline-block; |
|
|
|
|
margin-right: 4px; |
|
|
|
|
color: @label-required-color; |
|
|
|
|
font-size: @form-item-label-font-size; |
|
|
|
|
font-family: SimSun, sans-serif; |
|
|
|
|
line-height: 1; |
|
|
|
|
content: '*'; |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-hide-required-mark & { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 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: (@form-component-height / 2) + @form-feedback-icon-size - 2px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// Optional mark |
|
|
|
|
.@{form-item-prefix-cls}-optional { |
|
|
|
|
display: inline-block; |
|
|
|
|
margin-left: @margin-xss; |
|
|
|
|
color: @text-color-secondary; |
|
|
|
|
|
|
|
|
|
// Fix issue: https://github.com/ant-design/ant-design/issues/4783 |
|
|
|
|
.@{ant-prefix}-calendar-picker, |
|
|
|
|
.@{ant-prefix}-time-picker { |
|
|
|
|
&-icon, |
|
|
|
|
&-clear { |
|
|
|
|
right: (@form-component-height / 2) + @form-feedback-icon-size - 2px; |
|
|
|
|
.@{form-prefix-cls}-hide-required-mark & { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-mentions, |
|
|
|
|
textarea.@{ant-prefix}-input { |
|
|
|
|
height: auto; |
|
|
|
|
margin-bottom: 4px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// input[type=file] |
|
|
|
|
.@{ant-prefix}-upload { |
|
|
|
|
background: transparent; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
input[type='radio'], |
|
|
|
|
input[type='checkbox'] { |
|
|
|
|
width: 14px; |
|
|
|
|
height: 14px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Radios and checkboxes on same line |
|
|
|
|
.@{ant-prefix}-radio-inline, |
|
|
|
|
.@{ant-prefix}-checkbox-inline { |
|
|
|
|
display: inline-block; |
|
|
|
|
margin-left: 8px; |
|
|
|
|
font-weight: normal; |
|
|
|
|
vertical-align: middle; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&:first-child { |
|
|
|
|
margin-left: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-checkbox-vertical, |
|
|
|
|
.@{ant-prefix}-radio-vertical { |
|
|
|
|
display: block; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical, |
|
|
|
|
.@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical { |
|
|
|
|
margin-left: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-input-number { |
|
|
|
|
+ .@{form-prefix-cls}-text { |
|
|
|
|
margin-left: 8px; |
|
|
|
|
} |
|
|
|
|
&-handler-wrap { |
|
|
|
|
z-index: 2; // https://github.com/ant-design/ant-design/issues/6289 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-select, |
|
|
|
|
.@{ant-prefix}-cascader-picker { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Don't impact select inside input group |
|
|
|
|
.@{ant-prefix}-input-group .@{ant-prefix}-select, |
|
|
|
|
.@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker { |
|
|
|
|
width: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// fix input with addon position. https://github.com/ant-design/ant-design/issues/8243 |
|
|
|
|
:not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group, |
|
|
|
|
.@{ant-prefix}-input-group-wrapper { |
|
|
|
|
display: inline-block; |
|
|
|
|
vertical-align: middle; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/20616 |
|
|
|
|
&:not(.@{form-prefix-cls}-vertical) { |
|
|
|
|
:not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group, |
|
|
|
|
.@{ant-prefix}-input-group-wrapper { |
|
|
|
|
position: relative; |
|
|
|
|
top: -1px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Form layout |
|
|
|
|
//== Vertical Form |
|
|
|
|
.make-vertical-layout-label() { |
|
|
|
|
display: block; |
|
|
|
|
margin: @form-vertical-label-margin; |
|
|
|
|
padding: @form-vertical-label-padding; |
|
|
|
|
line-height: @line-height-base; |
|
|
|
|
white-space: initial; |
|
|
|
|
text-align: left; |
|
|
|
|
|
|
|
|
|
label::after { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.make-vertical-layout() { |
|
|
|
|
.@{form-prefix-cls}-item-label, |
|
|
|
|
.@{form-prefix-cls}-item-control-wrapper { |
|
|
|
|
display: block; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.@{form-prefix-cls}-item-label { |
|
|
|
|
.make-vertical-layout-label(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-vertical { |
|
|
|
|
.@{form-prefix-cls}-item { |
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
&-label > label { |
|
|
|
|
height: auto; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// fix https://github.com/vueComponent/ant-design-vue/issues/3319 |
|
|
|
|
.@{form-prefix-cls}-item-control-wrapper { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label, |
|
|
|
|
// when labelCol is 24, it is a vertical form |
|
|
|
|
.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label, |
|
|
|
|
.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label { |
|
|
|
|
.make-vertical-layout-label(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-vertical { |
|
|
|
|
.@{form-prefix-cls}-item { |
|
|
|
|
padding-bottom: 8px; |
|
|
|
|
} |
|
|
|
|
.@{form-prefix-cls}-item-control { |
|
|
|
|
line-height: @line-height-base; |
|
|
|
|
} |
|
|
|
|
.@{form-prefix-cls}-explain { |
|
|
|
|
margin-top: 2px; |
|
|
|
|
margin-bottom: -4px - @form-explain-precision; |
|
|
|
|
} |
|
|
|
|
.@{form-prefix-cls}-extra { |
|
|
|
|
margin-top: 2px; |
|
|
|
|
margin-bottom: -4px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (max-width: @screen-xs-max) { |
|
|
|
|
.make-vertical-layout(); |
|
|
|
|
.@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label { |
|
|
|
|
.make-vertical-layout-label(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (max-width: @screen-sm-max) { |
|
|
|
|
.@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label { |
|
|
|
|
.make-vertical-layout-label(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (max-width: @screen-md-max) { |
|
|
|
|
.@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label { |
|
|
|
|
.make-vertical-layout-label(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (max-width: @screen-lg-max) { |
|
|
|
|
.@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label { |
|
|
|
|
.make-vertical-layout-label(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (max-width: @screen-xl-max) { |
|
|
|
|
.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label { |
|
|
|
|
.make-vertical-layout-label(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//== Inline Form |
|
|
|
|
.@{form-prefix-cls}-inline { |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
.@{form-prefix-cls}-item { |
|
|
|
|
flex: none; |
|
|
|
|
flex-wrap: nowrap; |
|
|
|
|
margin-right: 16px; |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
|
|
|
|
|
&-with-help { |
|
|
|
|
margin-bottom: @form-item-margin-bottom; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
> .@{form-prefix-cls}-item-control-wrapper, |
|
|
|
|
> .@{form-prefix-cls}-item-label { |
|
|
|
|
display: inline-block; |
|
|
|
|
vertical-align: top; |
|
|
|
|
} |
|
|
|
|
> .@{form-prefix-cls}-item-label { |
|
|
|
|
flex: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{form-prefix-cls}-text { |
|
|
|
|
display: inline-block; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.has-feedback { |
|
|
|
|
display: inline-block; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Validation state |
|
|
|
|
.has-success, |
|
|
|
|
.has-warning, |
|
|
|
|
.has-error, |
|
|
|
|
.is-validating { |
|
|
|
|
&.has-feedback .@{form-prefix-cls}-item-children-icon { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 50%; |
|
|
|
|
right: 0; |
|
|
|
|
z-index: 1; |
|
|
|
|
width: @form-component-height; |
|
|
|
|
height: 20px; |
|
|
|
|
margin-top: -10px; |
|
|
|
|
font-size: @form-feedback-icon-size; |
|
|
|
|
line-height: 20px; |
|
|
|
|
text-align: center; |
|
|
|
|
visibility: visible; |
|
|
|
|
animation: zoomIn 0.3s @ease-out-back; |
|
|
|
|
pointer-events: none; |
|
|
|
|
|
|
|
|
|
& svg { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
right: 0; |
|
|
|
|
bottom: 0; |
|
|
|
|
left: 0; |
|
|
|
|
margin: auto; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.has-success { |
|
|
|
|
&.has-feedback .@{form-prefix-cls}-item-children-icon { |
|
|
|
|
color: @success-color; |
|
|
|
|
animation-name: diffZoomIn1 !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.has-warning { |
|
|
|
|
.form-control-validation(@warning-color; @warning-color; @form-warning-input-bg;); |
|
|
|
|
|
|
|
|
|
&.has-feedback .@{form-prefix-cls}-item-children-icon { |
|
|
|
|
color: @warning-color; |
|
|
|
|
animation-name: diffZoomIn3 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//select |
|
|
|
|
.@{ant-prefix}-select { |
|
|
|
|
&-selector { |
|
|
|
|
border-color: @warning-color; |
|
|
|
|
&:hover { |
|
|
|
|
border-color: @warning-color; |
|
|
|
|
// Optional mark |
|
|
|
|
.@{form-item-prefix-cls}-tooltip { |
|
|
|
|
color: @text-color-secondary; |
|
|
|
|
cursor: help; |
|
|
|
|
writing-mode: horizontal-tb; |
|
|
|
|
margin-inline-start: @margin-xss; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&-open .@{ant-prefix}-select-selector, |
|
|
|
|
&-focused .@{ant-prefix}-select-selector { |
|
|
|
|
.active(@warning-color); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// arrow and icon |
|
|
|
|
.@{ant-prefix}-calendar-picker-icon::after, |
|
|
|
|
.@{ant-prefix}-time-picker-icon::after, |
|
|
|
|
.@{ant-prefix}-picker-icon::after, |
|
|
|
|
.@{ant-prefix}-select-arrow, |
|
|
|
|
.@{ant-prefix}-cascader-picker-arrow { |
|
|
|
|
color: @warning-color; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//input-number, timepicker |
|
|
|
|
.@{ant-prefix}-input-number, |
|
|
|
|
.@{ant-prefix}-time-picker-input { |
|
|
|
|
border-color: @warning-color; |
|
|
|
|
&-focused, |
|
|
|
|
&:focus { |
|
|
|
|
.active(@warning-color); |
|
|
|
|
} |
|
|
|
|
&:not([disabled]):hover { |
|
|
|
|
border-color: @warning-color; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-cascader-picker { |
|
|
|
|
&:focus .@{ant-prefix}-cascader-input { |
|
|
|
|
.active(@warning-color); |
|
|
|
|
} |
|
|
|
|
&:hover .@{ant-prefix}-cascader-input { |
|
|
|
|
border-color: @warning-color; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.has-error, |
|
|
|
|
&-has-error { |
|
|
|
|
.form-control-validation(@error-color; @error-color; @form-error-input-bg;); |
|
|
|
|
|
|
|
|
|
&.has-feedback .@{form-prefix-cls}-item-children-icon { |
|
|
|
|
color: @error-color; |
|
|
|
|
animation-name: diffZoomIn2 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//select |
|
|
|
|
.@{ant-prefix}-select:not(.@{ant-prefix}-select-borderless) { |
|
|
|
|
.@{ant-prefix}-select-selector { |
|
|
|
|
border-color: @error-color !important; |
|
|
|
|
} |
|
|
|
|
&.@{ant-prefix}-select-open .@{ant-prefix}-select-selector, |
|
|
|
|
&.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector { |
|
|
|
|
.active(@error-color); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-select.@{ant-prefix}-select-auto-complete { |
|
|
|
|
.@{ant-prefix}-input:focus { |
|
|
|
|
border-color: @error-color; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&::after { |
|
|
|
|
& when (@form-item-trailing-colon=true) { |
|
|
|
|
content: ':'; |
|
|
|
|
} |
|
|
|
|
& when not (@form-item-trailing-colon=true) { |
|
|
|
|
content: ' '; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-input-group-addon .@{ant-prefix}-select { |
|
|
|
|
&-selection { |
|
|
|
|
border-color: transparent; |
|
|
|
|
box-shadow: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
position: relative; |
|
|
|
|
top: -0.5px; |
|
|
|
|
margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//input-number, timepicker |
|
|
|
|
.@{ant-prefix}-input-number, |
|
|
|
|
.@{ant-prefix}-time-picker-input { |
|
|
|
|
border-color: @error-color; |
|
|
|
|
&-focused, |
|
|
|
|
&:focus { |
|
|
|
|
.active(@error-color); |
|
|
|
|
} |
|
|
|
|
&:not([disabled]):hover { |
|
|
|
|
border-color: @error-color; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.@{ant-prefix}-mention-wrapper { |
|
|
|
|
.@{ant-prefix}-mention-editor { |
|
|
|
|
&, |
|
|
|
|
&:not([disabled]):hover { |
|
|
|
|
border-color: @error-color; |
|
|
|
|
&.@{form-item-prefix-cls}-no-colon::after { |
|
|
|
|
content: ' '; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor, |
|
|
|
|
.@{ant-prefix}-mention-editor:not([disabled]):focus { |
|
|
|
|
.active(@error-color); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-cascader-picker { |
|
|
|
|
&:focus .@{ant-prefix}-cascader-input { |
|
|
|
|
.active(@error-color); |
|
|
|
|
} |
|
|
|
|
&:hover .@{ant-prefix}-cascader-input { |
|
|
|
|
border-color: @error-color; |
|
|
|
|
// ============================================================== |
|
|
|
|
// = Input = |
|
|
|
|
// ============================================================== |
|
|
|
|
&-control { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
flex-grow: 1; |
|
|
|
|
|
|
|
|
|
&:first-child:not([class^=~"'@{ant-prefix}-col-'"]):not([class*=~"' @{ant-prefix}-col-'"]) { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// transfer |
|
|
|
|
.@{ant-prefix}-transfer { |
|
|
|
|
&-list { |
|
|
|
|
border-color: @error-color; |
|
|
|
|
|
|
|
|
|
&-search:not([disabled]) { |
|
|
|
|
border-color: @input-border-color; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
.hover(); |
|
|
|
|
} |
|
|
|
|
&-control-input { |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
min-height: @input-height-base; |
|
|
|
|
|
|
|
|
|
&:focus { |
|
|
|
|
.active(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&-content { |
|
|
|
|
flex: auto; |
|
|
|
|
max-width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.is-validating { |
|
|
|
|
&.has-feedback .@{form-prefix-cls}-item-children-icon { |
|
|
|
|
display: inline-block; |
|
|
|
|
color: @primary-color; |
|
|
|
|
&-explain, |
|
|
|
|
&-extra { |
|
|
|
|
clear: both; |
|
|
|
|
min-height: @form-item-margin-bottom; |
|
|
|
|
color: @text-color-secondary; |
|
|
|
|
font-size: @font-size-base; |
|
|
|
|
line-height: @line-height-base; |
|
|
|
|
transition: color 0.3s @ease-out; // sync input color transition |
|
|
|
|
.explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.@{ant-prefix}-advanced-search-form { |
|
|
|
|
.@{form-prefix-cls}-item { |
|
|
|
|
margin-bottom: @form-item-margin-bottom; |
|
|
|
|
|
|
|
|
|
&-with-help { |
|
|
|
|
margin-bottom: @form-item-margin-bottom - @form-explain-height - @form-help-margin-top; |
|
|
|
|
.@{ant-prefix}-input-textarea-show-count { |
|
|
|
|
&::after { |
|
|
|
|
margin-bottom: -22px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) { |
|
|
|
|
.make-motion(@className, @keyframeName, @duration); |
|
|
|
|
.@{className}-enter, |
|
|
|
|
.@{className}-appear { |
|
|
|
|
@name: ~'@{ant-prefix}-@{className}'; |
|
|
|
|
.make-motion(@name, @keyframeName, @duration); |
|
|
|
|
.@{name}-enter, |
|
|
|
|
.@{name}-appear { |
|
|
|
|
opacity: 0; |
|
|
|
|
animation-timing-function: @ease-in-out; |
|
|
|
|
} |
|
|
|
|
.@{className}-leave { |
|
|
|
|
.@{name}-leave { |
|
|
|
|
animation-timing-function: @ease-in-out; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -649,3 +258,5 @@ form {
|
|
|
|
|
transform: scale(1); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@import './rtl'; |
|
|
|
|
|
tangjinzhou
4 years ago