acud
Version:
acg react 组件库
1,042 lines (1,041 loc) • 31.2 kB
CSS
/* color */
/* 默认颜色 */
/* 通用-icon */
/* 标签 */
/* 默认颜色 */
/* 其他颜色 */
/* 通用 */
/* 水平 */
/* 垂直 */
/* 序号水平 */
/* 序号垂直 */
/**
* @file Style of form children components
* @author chenqiang(chenqiang03)
*/
.acud-form-item .acud-mentions {
height: auto;
}
.acud-form-item .acud-upload {
background: transparent;
}
.acud-form-item input[type='radio'],
.acud-form-item input[type='checkbox'] {
width: 14px;
height: 14px;
}
.acud-form-item .acud-radio-inline,
.acud-form-item .acud-checkbox-inline {
display: inline-block;
margin-left: 8px;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.acud-form-item .acud-radio-inline:first-child,
.acud-form-item .acud-checkbox-inline:first-child {
margin-left: 0;
}
.acud-form-item .acud-checkbox-vertical,
.acud-form-item .acud-radio-vertical {
display: block;
}
.acud-form-item .acud-checkbox-vertical + .acud-checkbox-vertical,
.acud-form-item .acud-radio-vertical + .acud-radio-vertical {
margin-left: 0;
}
.acud-form-item .acud-input-number + .acud-form-text {
margin-left: 8px;
}
.acud-form-item .acud-input-number-handler-wrap {
z-index: 2;
}
.acud-form-item .acud-picker-calendar-year-select,
.acud-form-item .acud-picker-calendar-month-select,
.acud-form-item .acud-input-group .acud-select,
.acud-form-item .acud-input-group .acud-cascader-picker {
width: auto;
}
/**
* @file styles for inline form
* @author chenqiang(chenqiang03)
*/
.acud-form-inline {
display: flex;
flex-wrap: wrap;
}
.acud-form-inline .acud-form-item {
flex: none;
flex-wrap: nowrap;
margin-right: 16px;
margin-bottom: 0;
}
.acud-form-inline .acud-form-item-with-help {
margin-bottom: 24px;
}
.acud-form-inline .acud-form-item > .acud-form-item-label,
.acud-form-inline .acud-form-item > .acud-form-item-control {
display: inline-block;
vertical-align: top;
}
.acud-form-inline .acud-form-item > .acud-form-item-label {
flex: none;
}
.acud-form-inline .acud-form-item .acud-form-text {
display: inline-block;
}
.acud-form-inline .acud-form-item .acud-form-item-has-feedback {
display: inline-block;
}
/**
* @file style only impact horizontal layout
* @author chenqiang(chenqiang03)
*/
.acud-form-horizontal .acud-form-item-label {
flex-grow: 0;
line-height: 1.6667;
padding-left: calc(.5em + 4px);
box-sizing: content-box;
}
.acud-form-horizontal .acud-form-item-label:not([class*=' acud-col-']) {
margin-right: 16px;
}
.acud-form-horizontal .acud-form-item-label > label.acud-form-item-required:not(.acud-form-item-required-mark-optional)::before {
text-indent: -0.5em;
margin-left: -4px;
}
.acud-form-horizontal .acud-form-item-control {
flex: 1;
}
/**
* @file styles for multiple columns
* @author chenqiang(chenqiang03)
*/
.acud-form-col-1 {
display: grid;
grid-column-gap: 16px;
grid-template-columns: repeat(1, 1fr);
}
.acud-form-col-2 {
display: grid;
grid-column-gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
.acud-form-col-3 {
display: grid;
grid-column-gap: 16px;
grid-template-columns: repeat(3, 1fr);
}
.acud-form-col-4 {
display: grid;
grid-column-gap: 16px;
grid-template-columns: repeat(4, 1fr);
}
/**
* @file style only impact vertical layout
* @author chenqiang(chenqiang03)
*/
.acud-form-vertical .acud-form-item {
flex-direction: column;
}
.acud-form-vertical .acud-form-item-label > label {
height: auto;
}
.acud-form-vertical .acud-form-item-explain,
.acud-form-vertical .acud-form-item-extra {
margin: 4px 0 0;
}
.acud-form-vertical .acud-form-item-label,
.acud-col-24.acud-form-item-label,
.acud-col-xl-24.acud-form-item-label {
padding: 0 0 8px;
line-height: 1.6667;
white-space: initial;
text-align: left;
}
.acud-form-vertical .acud-form-item-label > label,
.acud-col-24.acud-form-item-label > label,
.acud-col-xl-24.acud-form-item-label > label {
margin: 0;
}
.acud-form-vertical .acud-form-item-label > label::after,
.acud-col-24.acud-form-item-label > label::after,
.acud-col-xl-24.acud-form-item-label > label::after {
display: none;
}
.acud-form-vertical .acud-form-item-label .acud-form-item-label-extra,
.acud-col-24.acud-form-item-label .acud-form-item-label-extra,
.acud-col-xl-24.acud-form-item-label .acud-form-item-label-extra {
display: block;
float: right;
}
.acud-form-rtl.acud-form-vertical .acud-form-item-label,
.acud-form-rtl.acud-col-24.acud-form-item-label,
.acud-form-rtl.acud-col-xl-24.acud-form-item-label {
text-align: right;
}
@media (max-width: 575px) {
.acud-form-item .acud-form-item-label {
padding: 0 0 8px;
line-height: 1.6667;
white-space: initial;
text-align: left;
}
.acud-form-item .acud-form-item-label > label {
margin: 0;
}
.acud-form-item .acud-form-item-label > label::after {
display: none;
}
.acud-form-item .acud-form-item-label .acud-form-item-label-extra {
display: block;
float: right;
}
.acud-form-rtl.acud-form-item .acud-form-item-label {
text-align: right;
}
.acud-form .acud-form-item {
flex-wrap: wrap;
}
.acud-form .acud-form-item .acud-form-item-label,
.acud-form .acud-form-item .acud-form-item-control {
flex: 0 0 100%;
max-width: 100%;
}
.acud-col-xs-24.acud-form-item-label {
padding: 0 0 8px;
line-height: 1.6667;
white-space: initial;
text-align: left;
}
.acud-col-xs-24.acud-form-item-label > label {
margin: 0;
}
.acud-col-xs-24.acud-form-item-label > label::after {
display: none;
}
.acud-col-xs-24.acud-form-item-label .acud-form-item-label-extra {
display: block;
float: right;
}
.acud-form-rtl.acud-col-xs-24.acud-form-item-label {
text-align: right;
}
}
@media (max-width: 767px) {
.acud-col-sm-24.acud-form-item-label {
padding: 0 0 8px;
line-height: 1.6667;
white-space: initial;
text-align: left;
}
.acud-col-sm-24.acud-form-item-label > label {
margin: 0;
}
.acud-col-sm-24.acud-form-item-label > label::after {
display: none;
}
.acud-col-sm-24.acud-form-item-label .acud-form-item-label-extra {
display: block;
float: right;
}
.acud-form-rtl.acud-col-sm-24.acud-form-item-label {
text-align: right;
}
}
@media (max-width: 991px) {
.acud-col-md-24.acud-form-item-label {
padding: 0 0 8px;
line-height: 1.6667;
white-space: initial;
text-align: left;
}
.acud-col-md-24.acud-form-item-label > label {
margin: 0;
}
.acud-col-md-24.acud-form-item-label > label::after {
display: none;
}
.acud-col-md-24.acud-form-item-label .acud-form-item-label-extra {
display: block;
float: right;
}
.acud-form-rtl.acud-col-md-24.acud-form-item-label {
text-align: right;
}
}
@media (max-width: 1199px) {
.acud-col-lg-24.acud-form-item-label {
padding: 0 0 8px;
line-height: 1.6667;
white-space: initial;
text-align: left;
}
.acud-col-lg-24.acud-form-item-label > label {
margin: 0;
}
.acud-col-lg-24.acud-form-item-label > label::after {
display: none;
}
.acud-col-lg-24.acud-form-item-label .acud-form-item-label-extra {
display: block;
float: right;
}
.acud-form-rtl.acud-col-lg-24.acud-form-item-label {
text-align: right;
}
}
@media (max-width: 1599px) {
.acud-col-xl-24.acud-form-item-label {
padding: 0 0 8px;
line-height: 1.6667;
white-space: initial;
text-align: left;
}
.acud-col-xl-24.acud-form-item-label > label {
margin: 0;
}
.acud-col-xl-24.acud-form-item-label > label::after {
display: none;
}
.acud-col-xl-24.acud-form-item-label .acud-form-item-label-extra {
display: block;
float: right;
}
.acud-form-rtl.acud-col-xl-24.acud-form-item-label {
text-align: right;
}
}
/**
* @file status style
* @author chenqiang(chenqiang03)
*/
.acud-form-item {
/* Some non-status related component style is in `components.less` */
/* To support leave along ErrorList. We add additional className to handle explain style */
}
.acud-form-item-explain {
display: none;
}
.acud-form-item-explain.acud-form-item-explain-error {
color: #F33E3E;
}
.acud-form-item-explain.acud-form-item-explain-warning {
color: #FF9326;
}
.acud-form-item-has-feedback .acud-input {
padding-right: 24px;
}
.acud-form-item-has-feedback .acud-input-affix-wrapper .acud-input-suffix {
padding-right: 18px;
}
.acud-form-item-has-feedback .acud-input-search:not(.acud-input-search-enter-button) .acud-input-suffix {
right: 28px;
}
.acud-form-item-has-feedback .acud-switch {
margin: 2px 0 4px;
}
.acud-form-item-has-feedback > .acud-select .acud-select-arrow,
.acud-form-item-has-feedback > .acud-select .acud-select-clear,
.acud-form-item-has-feedback :not(.acud-input-group-addon) > .acud-select .acud-select-arrow,
.acud-form-item-has-feedback :not(.acud-input-group-addon) > .acud-select .acud-select-clear {
right: 32px;
}
.acud-form-item-has-feedback > .acud-select .acud-select-selection-selected-value,
.acud-form-item-has-feedback :not(.acud-input-group-addon) > .acud-select .acud-select-selection-selected-value {
padding-right: 42px;
}
.acud-form-item-has-feedback .acud-cascader-picker-arrow {
margin-right: 19px;
}
.acud-form-item-has-feedback .acud-cascader-picker-clear {
right: 32px;
}
.acud-form-item-has-feedback .acud-picker {
padding-right: 23.6px;
}
.acud-form-item-has-feedback .acud-picker-large {
padding-right: 27.6px;
}
.acud-form-item-has-feedback .acud-picker-small {
padding-right: 19.6px;
}
.acud-form-item-has-feedback.acud-form-item-has-success .acud-form-item-children-icon,
.acud-form-item-has-feedback.acud-form-item-has-warning .acud-form-item-children-icon,
.acud-form-item-has-feedback.acud-form-item-has-error .acud-form-item-children-icon,
.acud-form-item-has-feedback.acud-form-item-is-validating .acud-form-item-children-icon {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
width: 32px;
height: 20px;
margin-top: -10px;
font-size: 12px;
line-height: 20px;
text-align: center;
visibility: visible;
animation: zoomIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
pointer-events: none;
}
.acud-form-item-has-success.acud-form-item-has-feedback .acud-form-item-children-icon {
color: #30BF13;
animation-name: diffZoomIn1 ;
}
.acud-form-item-has-warning .acud-form-item-split {
color: #FF9326;
}
.acud-form-item-has-warning .acud-input,
.acud-form-item-has-warning .acud-input-affix-wrapper,
.acud-form-item-has-warning .acud-input:hover,
.acud-form-item-has-warning .acud-input-affix-wrapper:hover,
.acud-form-item-has-warning .acud-input:focus,
.acud-form-item-has-warning .acud-input-affix-wrapper:focus,
.acud-form-item-has-warning .acud-input-focused,
.acud-form-item-has-warning .acud-input-affix-wrapper-focused {
background-color: #FFF4E6;
border-color: #FF9326;
border-right-width: 1px ;
outline: 0;
}
.acud-form-item-has-warning .acud-input-disabled,
.acud-form-item-has-warning .acud-input-disabled:hover {
background-color: #F7F7F9;
border-color: #E8E9EB;
}
.acud-form-item-has-warning .acud-input-affix-wrapper-disabled,
.acud-form-item-has-warning .acud-input-affix-wrapper-disabled:hover {
background-color: #F7F7F9;
border-color: #E8E9EB;
}
.acud-form-item-has-warning .acud-input-affix-wrapper-disabled input:focus,
.acud-form-item-has-warning .acud-input-affix-wrapper-disabled:hover input:focus {
box-shadow: none ;
}
.acud-form-item-has-warning .acud-calendar-picker-open .acud-calendar-picker-input {
border-color: #FF9326;
border-right-width: 1px ;
outline: 0;
}
.acud-form-item-has-warning .acud-input-prefix {
color: #FF9326;
}
.acud-form-item-has-warning .acud-input-group-addon {
color: #FF9326;
border-color: #FF9326;
}
.acud-form-item-has-warning .has-feedback {
color: #FF9326;
}
.acud-form-item-has-warning.acud-form-item-has-feedback .acud-form-item-children-icon {
color: #FF9326;
animation-name: diffZoomIn3 ;
}
.acud-form-item-has-warning .acud-select:not(.acud-select-disabled):not(.acud-select-customize-input) .acud-select-selector {
background-color: #FFF4E6;
border-color: #FF9326 ;
}
.acud-form-item-has-warning .acud-select:not(.acud-select-disabled):not(.acud-select-customize-input).acud-select-open .acud-select-selector,
.acud-form-item-has-warning .acud-select:not(.acud-select-disabled):not(.acud-select-customize-input).acud-select-focused .acud-select-selector {
border-color: #FF9326;
border-right-width: 1px ;
outline: 0;
}
.acud-form-item-has-warning .acud-input-number,
.acud-form-item-has-warning .acud-picker,
.acud-form-item-has-warning .acud-input-textarea {
background-color: #FFF4E6;
border-color: #FF9326;
}
.acud-form-item-has-warning .acud-input-number-focused,
.acud-form-item-has-warning .acud-picker-focused,
.acud-form-item-has-warning .acud-input-textarea-focused,
.acud-form-item-has-warning .acud-input-number:focus,
.acud-form-item-has-warning .acud-picker:focus,
.acud-form-item-has-warning .acud-input-textarea:focus {
border-color: #FF9326;
border-right-width: 1px ;
outline: 0;
}
.acud-form-item-has-warning .acud-input-number:not([disabled]):hover,
.acud-form-item-has-warning .acud-picker:not([disabled]):hover,
.acud-form-item-has-warning .acud-input-textarea:not([disabled]):hover {
background-color: #FFF4E6;
border-color: #FF9326;
}
.acud-form-item-has-warning .acud-cascader-picker:focus .acud-cascader-input {
border-color: #FF9326;
border-right-width: 1px ;
outline: 0;
}
.acud-form-item-has-error .acud-form-item-split {
color: #F33E3E;
}
.acud-form-item-has-error .acud-input,
.acud-form-item-has-error .acud-input-affix-wrapper,
.acud-form-item-has-error .acud-input:hover,
.acud-form-item-has-error .acud-input-affix-wrapper:hover,
.acud-form-item-has-error .acud-input:focus,
.acud-form-item-has-error .acud-input-affix-wrapper:focus,
.acud-form-item-has-error .acud-input-focused,
.acud-form-item-has-error .acud-input-affix-wrapper-focused {
background-color: inherit;
border-color: #F33E3E;
border-right-width: 1px ;
outline: 0;
}
.acud-form-item-has-error .acud-input-disabled,
.acud-form-item-has-error .acud-input-disabled:hover {
background-color: #F7F7F9;
border-color: #E8E9EB;
}
.acud-form-item-has-error .acud-input-affix-wrapper-disabled,
.acud-form-item-has-error .acud-input-affix-wrapper-disabled:hover {
background-color: #F7F7F9;
border-color: #E8E9EB;
}
.acud-form-item-has-error .acud-input-affix-wrapper-disabled input:focus,
.acud-form-item-has-error .acud-input-affix-wrapper-disabled:hover input:focus {
box-shadow: none ;
}
.acud-form-item-has-error .acud-calendar-picker-open .acud-calendar-picker-input {
border-color: #F33E3E;
border-right-width: 1px ;
outline: 0;
}
.acud-form-item-has-error .acud-input-prefix {
color: #F33E3E;
}
.acud-form-item-has-error .acud-input-group-addon {
color: #F33E3E;
border-color: #F33E3E;
}
.acud-form-item-has-error .has-feedback {
color: #F33E3E;
}
.acud-form-item-has-error .acud-form-item-explain {
display: block;
}
.acud-form-item-has-error .acud-form-item-explain-error + .acud-form-item-extra {
display: none;
}
.acud-form-item-has-error.acud-form-item-has-feedback .acud-form-item-children-icon {
color: #F33E3E;
animation-name: diffZoomIn2 ;
}
.acud-form-item-has-error .acud-select:not(.acud-select-disabled):not(.acud-select-customize-input) .acud-select-selector {
background-color: inherit;
border-color: #F33E3E ;
}
.acud-form-item-has-error .acud-select:not(.acud-select-disabled):not(.acud-select-customize-input).acud-select-open .acud-select-selector,
.acud-form-item-has-error .acud-select:not(.acud-select-disabled):not(.acud-select-customize-input).acud-select-focused .acud-select-selector {
border-color: #F33E3E;
border-right-width: 1px ;
outline: 0;
}
.acud-form-item-has-error .acud-input-group-addon .acud-select.acud-select-single:not(.acud-select-customize-input) .acud-select-selector {
background-color: inherit;
border: 0;
box-shadow: none;
}
.acud-form-item-has-error .acud-select.acud-select-auto-complete .acud-input:focus {
border-color: #F33E3E;
}
.acud-form-item-has-error .acud-input-number,
.acud-form-item-has-error .acud-picker,
.acud-form-item-has-error .acud-input-textarea {
background-color: inherit;
border-color: #F33E3E;
}
.acud-form-item-has-error .acud-input-number-focused,
.acud-form-item-has-error .acud-picker-focused,
.acud-form-item-has-error .acud-input-textarea-focused,
.acud-form-item-has-error .acud-input-number:focus,
.acud-form-item-has-error .acud-picker:focus,
.acud-form-item-has-error .acud-input-textarea:focus {
border-color: #F33E3E;
border-right-width: 1px ;
outline: 0;
}
.acud-form-item-has-error .acud-input-number:not([disabled]):hover,
.acud-form-item-has-error .acud-picker:not([disabled]):hover,
.acud-form-item-has-error .acud-input-textarea:not([disabled]):hover {
background-color: inherit;
border-color: #F33E3E;
}
.acud-form-item-has-error .acud-mention-wrapper .acud-mention-editor,
.acud-form-item-has-error .acud-mention-wrapper .acud-mention-editor:not([disabled]):hover {
background-color: inherit;
border-color: #F33E3E;
}
.acud-form-item-has-error .acud-mention-wrapper.acud-mention-active:not([disabled]) .acud-mention-editor,
.acud-form-item-has-error .acud-mention-wrapper .acud-mention-editor:not([disabled]):focus {
border-color: #F33E3E;
border-right-width: 1px ;
outline: 0;
}
.acud-form-item-has-error .acud-cascader-picker:hover .acud-cascader-picker-label:hover + .acud-cascader-input.acud-input {
border-color: #F33E3E;
}
.acud-form-item-has-error .acud-cascader-picker:focus .acud-cascader-input {
background-color: inherit;
border-color: #F33E3E;
border-right-width: 1px ;
outline: 0;
}
.acud-form-item-has-error .acud-transfer-list {
border-color: #F33E3E;
}
.acud-form-item-has-error .acud-transfer-list-search:not([disabled]) {
background-color: #FFFFFF;
border-color: #E8E9EB;
}
.acud-form-item-has-error .acud-transfer-list-search:not([disabled]):hover {
background-color: #FFFFFF;
}
.acud-form-item-has-error .acud-transfer-list-search:not([disabled]):focus,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled]):active {
background-color: #FFFFFF;
}
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[disabled],
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[aria-disabled="true"],
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[disabled]:hover,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[aria-disabled="true"]:hover,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[disabled]:focus,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[aria-disabled="true"]:focus,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[disabled]:active,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[aria-disabled="true"]:active {
background-color: #F7F7F9;
}
.acud-form-item-has-error .acud-transfer-list-search:not([disabled]):hover {
border-color: #2468F2;
}
.acud-form-item-has-error .acud-transfer-list-search:not([disabled]):focus,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled]):active {
border-color: #144BCC;
}
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[disabled],
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[aria-disabled="true"],
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[disabled]:hover,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[aria-disabled="true"]:hover,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[disabled]:focus,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[aria-disabled="true"]:focus,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[disabled]:active,
.acud-form-item-has-error .acud-transfer-list-search:not([disabled])[aria-disabled="true"]:active {
border-color: #E8E9EB;
}
.acud-form-item-has-error .acud-radio-button-wrapper {
border-color: #F33E3E ;
}
.acud-form-item-has-error .acud-radio-button-wrapper:not(:first-child)::before {
background-color: #F33E3E;
}
.acud-form-item-with-extra-always-display .acud-form-item-explain-error + .acud-form-item-extra {
display: block;
}
.acud-form-item-is-validating.acud-form-item-has-feedback .acud-form-item-children-icon {
display: inline-block;
color: #D4E5FF;
}
/**
* @file mixins tools
* @author chenqiang(chenqiang03)
*/
.acud-form {
margin: 0;
padding: 0;
}
.acud-form legend {
display: block;
width: 100%;
margin-bottom: 20px;
padding: 0;
color: transparent;
font-size: 14px;
line-height: inherit;
border: 0;
border-bottom: 1px solid #E8E9EB;
}
.acud-form label {
font-size: 12px;
}
.acud-form input[type='search'] {
box-sizing: border-box;
}
.acud-form input[type='radio'],
.acud-form input[type='checkbox'] {
line-height: normal;
}
.acud-form input[type='file'] {
display: block;
}
.acud-form input[type='range'] {
display: block;
width: 100%;
}
.acud-form select[multiple],
.acud-form select[size] {
height: auto;
}
.acud-form input[type='file']:focus,
.acud-form input[type='radio']:focus,
.acud-form input[type='checkbox']:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.acud-form output {
display: block;
padding-top: 15px;
color: transparent;
font-size: 12px;
line-height: 1.6667;
}
.acud-form .acud-form-text {
display: inline-block;
padding-right: 8px;
}
.acud-form-small .acud-form-item-label > label {
height: 24px;
}
.acud-form-small .acud-form-item-control-input {
min-height: 24px;
}
.acud-form-large .acud-form-item-label > label {
height: 40px;
}
.acud-form-large .acud-form-item-control-input {
min-height: 40px;
}
.acud-form-tiny .acud-form-item-label > label {
height: 32px;
}
.acud-form-tiny .acud-form-item-control-input {
min-height: 32px;
}
.acud-form-tiny .acud-form-item {
margin-bottom: 16px;
}
.acud-form-item {
margin: 0;
padding: 0;
margin-bottom: 24px;
vertical-align: top;
}
.acud-form-item-hidden,
.acud-form-item-hidden.acud-row {
display: none;
}
.acud-form-item-label {
display: inline-block;
flex-grow: 0;
white-space: nowrap;
text-align: right;
vertical-align: middle;
}
.acud-form-item-label.acud-form-item-label-left {
text-align: left;
}
.acud-form-item-label > label {
position: relative;
display: inline-flex;
align-items: center;
height: 32px;
color: #5C5F66;
font-size: 12px;
}
.acud-form-item-label > label > .acudicon {
font-size: 12px;
vertical-align: top;
}
.acud-form-item-label > label.acud-form-item-required:not(.acud-form-item-required-mark-optional)::before {
display: inline-block;
color: #F33E3E;
font-size: 12px;
font-family: SimSun, sans-serif;
line-height: 1;
content: '*';
margin-right: 4px;
}
.acud-form-hide-required-mark .acud-form-item-label > label.acud-form-item-required:not(.acud-form-item-required-mark-optional)::before {
display: none;
}
.acud-form-item-label > label .acud-form-item-optional {
display: inline-block;
margin-left: 4px;
color: #B8BABF;
}
.acud-form-hide-required-mark .acud-form-item-label > label .acud-form-item-optional {
display: none;
}
.acud-form-item-label > label .acud-form-item-tooltip {
color: #B8BABF;
cursor: help;
writing-mode: horizontal-tb;
margin-inline-start: 4px;
}
.acud-form-item-label > label .acud-form-item-tooltip::before {
content: '\ff1a';
position: relative;
top: -1px;
margin-left: -4px;
color: #5C5F66;
font-size: 12px;
}
.acud-form-item-label > label.acud-form-item-has-tooltip::after {
content: ' ';
}
.acud-form-item-label > label::after {
content: '\ff1a';
position: relative;
top: 1px;
}
.acud-form-item-label > label.acud-form-item-no-colon::after {
content: ' ';
}
.acud-form-item-label > label.acud-form-item-no-colon > .acud-form-item-tooltip::before {
display: none;
}
.acud-form-item-label-extra {
font-size: 12px;
}
.acud-form-item-control {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.acud-form-item-control:first-child:not([class^='acud-col-']):not([class*=' acud-col-']) {
width: 100%;
}
.acud-form-item-control-input {
position: relative;
display: flex;
align-items: center;
min-height: 32px;
}
.acud-form-item-control-input-content {
flex: auto;
max-width: 100%;
}
.acud-form-item-explain,
.acud-form-item-extra {
clear: both;
margin: 4px 0 0;
min-height: 20.0004px;
color: #84868C;
font-size: 12px;
line-height: 1.6667;
transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.acud-form-item-with-extra .acud-form-item-explain {
margin-bottom: 0;
}
.acud-form-item .acud-input-textarea-show-count::after {
margin-bottom: -22px;
}
.acud-show-help-enter,
.acud-show-help-appear {
animation-duration: 0.3s;
animation-fill-mode: both;
animation-play-state: paused;
}
.acud-show-help-leave {
animation-duration: 0.3s;
animation-fill-mode: both;
animation-play-state: paused;
}
.acud-show-help-enter.acud-show-help-enter-active,
.acud-show-help-appear.acud-show-help-appear-active {
animation-name: antShowHelpIn;
animation-play-state: running;
}
.acud-show-help-leave.acud-show-help-leave-active {
animation-name: antShowHelpOut;
animation-play-state: running;
pointer-events: none;
}
.acud-show-help-enter,
.acud-show-help-appear {
opacity: 0;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.acud-show-help-leave {
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
@keyframes antShowHelpIn {
0% {
transform: translateY(-5px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes antShowHelpOut {
to {
transform: translateY(-5px);
opacity: 0;
}
}
@keyframes diffZoomIn1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes diffZoomIn2 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes diffZoomIn3 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
/**
* @file style for rtl layout
* @author chenqiang(chenqiang03)
*/
.acud-form-rtl {
direction: rtl;
}
.acud-form-rtl .acud-form-item-label {
text-align: left;
}
.acud-form-rtl .acud-form-item-label > label.acud-form-item-required::before {
margin-right: 0;
margin-left: 4px;
}
.acud-form-rtl .acud-form-item-label > label::after {
margin: 0 2px 0 0;
}
.acud-form-rtl .acud-form-item-label > label .acud-form-item-optional {
margin-right: 4px;
margin-left: 0;
}
.acud-col-rtl .acud-form-item-control:first-child {
width: 100%;
}
.acud-form-rtl .acud-form-item-has-feedback .acud-input {
padding-right: 8px;
padding-left: 24px;
}
.acud-form-rtl .acud-form-item-has-feedback .acud-input-affix-wrapper .acud-input-suffix {
padding-right: 8px;
padding-left: 18px;
}
.acud-form-rtl .acud-form-item-has-feedback .acud-input-affix-wrapper .acud-input {
padding: 0;
}
.acud-form-rtl .acud-form-item-has-feedback .acud-input-search:not(.acud-input-search-enter-button) .acud-input-suffix {
right: auto;
left: 28px;
}
.acud-form-rtl .acud-form-item-has-feedback .acud-input-number {
padding-left: 18px;
}
.acud-form-rtl .acud-form-item-has-feedback > .acud-select .acud-select-arrow,
.acud-form-rtl .acud-form-item-has-feedback > .acud-select .acud-select-clear,
.acud-form-rtl .acud-form-item-has-feedback :not(.acud-input-group-addon) > .acud-select .acud-select-arrow,
.acud-form-rtl .acud-form-item-has-feedback :not(.acud-input-group-addon) > .acud-select .acud-select-clear {
right: auto;
left: 32px;
}
.acud-form-rtl .acud-form-item-has-feedback > .acud-select .acud-select-selection-selected-value,
.acud-form-rtl .acud-form-item-has-feedback :not(.acud-input-group-addon) > .acud-select .acud-select-selection-selected-value {
padding-right: 0;
padding-left: 42px;
}
.acud-form-rtl .acud-form-item-has-feedback .acud-cascader-picker-arrow {
margin-right: 0;
margin-left: 19px;
}
.acud-form-rtl .acud-form-item-has-feedback .acud-cascader-picker-clear {
right: auto;
left: 32px;
}
.acud-form-rtl .acud-form-item-has-feedback .acud-picker {
padding-right: 8px;
padding-left: 23.6px;
}
.acud-form-rtl .acud-form-item-has-feedback .acud-picker-large {
padding-right: 12px;
padding-left: 27.6px;
}
.acud-form-rtl .acud-form-item-has-feedback .acud-picker-small {
padding-right: 4px;
padding-left: 19.6px;
}
.acud-form-rtl .acud-form-item-has-feedback.acud-form-item-has-success .acud-form-item-children-icon,
.acud-form-rtl .acud-form-item-has-feedback.acud-form-item-has-warning .acud-form-item-children-icon,
.acud-form-rtl .acud-form-item-has-feedback.acud-form-item-has-error .acud-form-item-children-icon,
.acud-form-rtl .acud-form-item-has-feedback.acud-form-item-is-validating .acud-form-item-children-icon {
right: auto;
left: 0;
}
.acud-form-rtl.acud-form-inline .acud-form-item {
margin-right: 0;
margin-left: 16px;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label-ellipsed {
display: inline-block;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label {
padding-top: 8px;
line-height: normal;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label > label {
height: auto;
line-height: 16px;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label > label::before {
position: absolute;
top: 4px;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label > label::after {
display: none;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label > label.acud-form-item-no-colon::after {
display: none;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label > label.acud-form-item-no-colon .acud-form-item-label-content-opt-not-ellipsed::before {
display: none;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label > label .acudicon-outlined-question-circle::before {
display: none;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label .acud-form-item-label-content {
display: -webkit-box;
max-width: 160px;
max-height: 32px;
overflow: hidden;
white-space: normal;
text-align: left;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label .acud-form-item-label-content > * {
display: inline-block;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label .acud-form-item-label-content .acud-form-item-label-content-opt-ellipsed {
position: absolute;
right: -10px;
bottom: 0;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label .acud-form-item-label-content .acud-form-item-label-content-opt-ellipsed::after {
display: none;
}
body.locale-en .acud-form .acud-form-item .acud-form-item-label .acud-form-item-label-content .acud-form-item-label-content-opt-not-ellipsed::before {
content: ':';
}