@atlassian/aui/src/less/imports/aui-theme/components/forms.less

Atlassian User Interface library

@import '../theme';

@aui-form-placeholder-text-color: @ak-color-N100;
@aui-form-placeholder-disabled-text-color: @ak-color-N70;
@aui-form-label-text-color: @ak-color-N200;
@aui-form-error-text-color: @aui-color-red;
@aui-form-description-text-color: @ak-color-N200;
@aui-form-disabled-field-bg-color: @ak-color-N20;
@aui-form-disabled-field-text-color: @ak-color-N80;
@aui-form-disabled-field-label-color: @ak-color-N80;
@aui-form-field-border-color: @ak-color-N40;
@aui-form-field-hover-border-color: @ak-color-N40;
@aui-form-field-default-text-color: @ak-color-N800;
@aui-form-field-default-bg-color: @ak-color-N10;
@aui-form-field-hover-text-color: @aui-form-field-default-text-color;
@aui-form-field-hover-bg-color: @ak-color-N30;
@aui-form-field-focus-bg-color: @ak-color-N0;
@aui-form-select-bg-color: @ak-color-N30;
@aui-form-select-border-color: @ak-color-N30;
@aui-form-select-hover-bg-color: @ak-color-N40;
@aui-form-checkbox-radio-hover-bg-color: @ak-color-B300;
@aui-form-checkbox-radio-active-bg-color: @ak-color-B50;
@aui-form-optgroup-text-color: @aui-color-medium-gray;
@aui-form-optgroup-bg-color: @aui-color-light-gray;
@aui-form-option-bg-color: @aui-color-white;
@aui-form-pre-bg-color: @aui-color-light-gray;

@aui-form-field-border-radius: @aui-border-radius-smallish;
@aui-form-field-border-width: 2px;

@aui-form-field-width-default: 250px;
@aui-form-field-width-short: 75px;
@aui-form-field-width-medium: 165px;
@aui-form-field-width-medium-long: 350px;
@aui-form-field-width-long: 500px;
@aui-form-field-width-full: none;
@aui-form-field-height: unit(30px / @aui-font-size-medium, em); // 30px - using ems so the fields increase in line with user specified font-sizes

@aui-form-transition-time: 0.2s;

@aui-form-button-size: 10px;
@aui-form-button-focus-border-width: 2px;

#aui-forms {
    .aui-input-field-style(normal) {
        background-color: @aui-form-field-default-bg-color;
        color: @aui-form-field-default-text-color;
    }

    .aui-input-field-style(hover) {
        background-color: @aui-form-field-hover-bg-color;
        border-color: @aui-form-field-hover-border-color;
        color: @aui-form-field-hover-text-color;
    }

    .aui-input-field-style(focus) {
        background-color: @aui-form-field-focus-bg-color;
        color: @aui-text-color;
    }

    .aui-select-icon(@icon-url) {
        background: @aui-form-select-bg-color @icon-url no-repeat 100% 50%;
    }

    .aui-select2-input-field-style(normal) {
        background-color: @aui-select2-field-default-bg-color;
        color: @aui-form-field-default-text-color;
    }

    .aui-select2-input-field-style(hover) {
        background-color: @aui-select2-field-hover-bg-color;
        border-color: @aui-form-field-hover-border-color;
        color: @aui-form-field-hover-text-color;
    }

    .aui-radio-checkbox-size() {
        display: inline-block;
        width: @aui-form-button-size;
        height: @aui-form-button-size;
    }
}

@aui-legacy-form-field-default-bg-color: @aui-color-white;
@aui-legacy-form-field-default-text-color: @ak-color-N800;
@aui-legacy-form-field-border-width: 1px;
@aui-legacy-form-field-border-color: @ak-color-N50;
@aui-legacy-form-label-text-color: @ak-color-N200;
@aui-legacy-form-placeholder-text-color: @aui-color-gray;
@aui-legacy-form-disabled-field-bg-color: @aui-color-light-gray;
@aui-legacy-form-disabled-field-text-color: @aui-color-gray;
#aui-legacy-forms {
    .aui-input-field-style(normal) {
        background-color: @aui-legacy-form-field-default-bg-color;
        color: @aui-legacy-form-field-default-text-color;
    }

    .aui-input-field-style(hover) {
        background-color: @aui-form-field-hover-bg-color;
        border-color: @aui-form-field-hover-border-color;
        color: @aui-form-field-hover-text-color;
    }

    .aui-input-field-style(focus) {
        background-color: @aui-form-field-focus-bg-color;
        color: @aui-text-color;
    }

    .aui-select-icon(@icon-url) {
        background: @aui-form-select-bg-color @icon-url no-repeat 100% 50%;
    }

    .aui-radio-checkbox-size() {
        display: inline-block;
        width: @aui-form-button-size;
        height: @aui-form-button-size;
    }
}