acud/lib/style/themes/default/components/form.less

acg react 组件库

// global variables
@form-font-size-base: @T2;
@form-font-size-lg: @T3;
@form-line-height-base: 1.6667;

// ========== form ========== //

// normal
@form-input-height: @height;
@form-item-margin-bottom: 6 * @P;
@form-item-trailing-colon: true;
@form-item-label-font-size: @form-font-size-base;
@form-item-with-extra-margin: @P 0 0;
@form-item-extra-min-height: @form-line-height-base * @form-font-size-base;
@form-item-label-height: @height;
@form-item-label-colon-margin-left: 2px;
@form-item-label-colon-margin-right: 0;
@form-item-input-padding-horizontal-base: @padding-sm;
@form-item-input-padding-horizontal-lg: @padding-m;
@form-item-input-padding-horizontal-sm: @padding-xsm;

// size
// tiny
@form-item-tiny-margin-bottom: 4 * @P;

// vertical align
@form-vertical-label-margin: 0;
@form-vertical-label-padding: 0 0 2 * @P;

// status
@form-success-color: @S6;
@form-error-color: @E6;
@form-error-input-bg: inherit;
@form-warning-color: @W6;
@form-warning-input-bg: @W1;

// color series
// optional color
@form-secondary-color: @G6;

// label
@form-label-tp: tp23;
@form-item-label-color: ~'@{@{form-label-tp}-default-color}';
@form-item-label-required-color: @E6;

// input
@form-input-tp: tp34;
@form-input-p: p5;

@form-input-text-color: ~'@{@{form-input-tp}-default-color}';
@form-input-border-color: ~'@{@{form-input-p}-default-border-color}';
@form-input-background-color: ~'@{@{form-input-p}-default-background-color}';
@form-input-box-shadow: ~'@{@{form-input-p}-default-box-shadow}';

@form-input-active-text-color: ~'@{@{form-input-tp}-hover-color}';
@form-input-active-border-color: ~'@{@{form-input-p}-hover-border-color}';
@form-input-active-background-color: ~'@{@{form-input-p}-hover-background-color}';
@form-input-active-box-shadow: ~'@{@{form-input-p}-hover-box-shadow}';

@form-input-click-text-color: ~'@{@{form-input-tp}-click-color}';
@form-input-click-border-color: ~'@{@{form-input-p}-click-border-color}';
@form-input-click-background-color: ~'@{@{form-input-p}-click-background-color}';
@form-input-click-box-shadow: ~'@{@{form-input-p}-click-box-shadow}';

@form-input-disabled-text-color: ~'@{@{form-input-tp}-disabled-color}';
@form-input-disabled-border-color: ~'@{@{form-input-p}-disabled-border-color}';
@form-input-disabled-background-color: ~'@{@{form-input-p}-disabled-background-color}';
@form-input-disabled-box-shadow: ~'@{@{form-input-p}-disabled-box-shadow}';