@atlassian/aui/src/less/forms-current.less

Atlassian User Interface library

@import (reference) './imports/global';
@import (reference) './imports/mixins';
@import (reference) './imports/aui-theme/components/forms';
@import (reference) './imports/aui-theme/theme';

/* Field styles */
form.aui:not(.aui-legacy-forms) {
    ::-webkit-contacts-auto-fill-button {
        background: @aui-form-field-default-text-color;
    }
    .text,
    .password,
    .textarea,
    .select {
        #aui-forms.aui-input-field-style(normal);
        font-size: @aui-font-size-medium;
        font-family: inherit;

        &:hover,
        &.hover {
            #aui-forms.aui-input-field-style(hover);
        }

        &:-webkit-autofill {
            -webkit-text-fill-color: var(--aui-form-field-autofilled-text-color);
            // for some reason, setting background-color doesn't work. webkit does some weird shit.
            -webkit-box-shadow: 0 0 0 1000px var(--aui-form-field-autofilled-bg-color) inset;
            color: var(--aui-form-field-autofilled-text-color);
            border-color: var(--aui-form-field-autofilled-border-color);

            &::-webkit-contacts-auto-fill-button {
                background: var(--aui-form-field-autofilled-text-color);
            }
        }
    }

    .multi-select {
        #aui-forms.aui-select2-input-field-style(normal);
        font-size: @aui-font-size-medium;
        font-family: inherit;

        &:hover,
        &.hover {
            #aui-forms.aui-select2-input-field-style(hover);
        }
    }

    .select,
    .multi-select {
        &:hover,
        &.hover {
            background-color: @aui-form-select-hover-bg-color;
            border-color: @aui-form-select-border-color;
        }
    }

    .aui-select2-container {
        & > ul:hover,
        & > ul.hover {
            #aui-forms.aui-select2-input-field-style(hover);
        }

        &.select2-container-active > ul {
            #aui-forms.aui-input-field-style(focus);
        }
    }

    .text,
    .password,
    .textarea,
    .select {
        #aui.transition(background-color @aui-form-transition-time ease-in-out);
        #aui.transition(border-color @aui-form-transition-time ease-in-out);
        #aui.transition(box-shadow @aui-form-transition-time ease-in-out);
        border: @aui-form-field-border-width solid @aui-form-field-border-color;
        border-radius: @aui-form-field-border-radius;
        box-sizing: border-box;
        font-size: inherit;
        margin: 0;
        vertical-align: baseline;
    }

    .multi-select,
    .aui-select2-container .select2-choices {
        #aui.transition(background-color @aui-form-transition-time ease-in-out);
        #aui.transition(border-color @aui-form-transition-time ease-in-out);
        #aui.transition(box-shadow @aui-form-transition-time ease-in-out);
        border: @aui-form-field-border-width solid var(--aui-select2-field-border-color);
        border-radius: @aui-form-field-border-radius;
        box-sizing: border-box;
        font-size: inherit;
        margin: 0;
        vertical-align: baseline;
        background-image: none;
    }

    .multi-select {
        background-color: @aui-form-select-bg-color;
        border-color: @aui-form-select-border-color;
    }

    .text,
    .password,
    .select,
    .aui-select2-container .select2-choices {
        height: @aui-form-field-height;
        line-height: @aui-form-field-line-height;
        padding: 3px 4px;
    }

    .textarea,
    .select[size],
    .multi-select {
        height: auto;
        line-height: @aui-form-field-line-height;
        margin: 0;
        padding: 3px 4px;
    }

    .textarea {
        overflow-y: auto;
    }

    .multi-select {
        margin-top: 2px;
    }
    .group .field-group,
    .date-select .field-group {
        clear: none;
        padding-left: 0;
        padding-top: 0;
    }

    /* Focus styles */
    .text,
    .password,
    .textarea,
    .select,
    .multi-select {
        &:focus {
            #aui-forms.aui-input-field-style(focus);
        }
        &:focus > option {
            #aui-forms.aui-input-field-style(focus);
        }
    }
    .select,
    .multi-select {
        &:focus {
            #aui.with-focus-ring(@width: 1px, @inset: false, @set-border-color: true);
        }
    }
    .text,
    .password,
    .textarea,
    .aui-select2-container .select2-choices {
        &:focus {
            #aui.with-focus-ring(@width: 1px, @inset: true, @set-border-color: true);
        }
    }

    .aui-select2-container.select2-container-active .select2-choices {
        #aui.with-focus-ring(@width: 1px, @inset: false, @set-border-color: true);
    }

    .button,
    .cancel {
        #aui.without-focus-outline();
        #aui.focus-visible(#aui.with-focus-outline());
    }

    /* Placeholder form element styles */

    .text,
    .password,
    .textarea {
        #aui.placeholder(@aui-form-placeholder-text-color);

        &[disabled] {
            #aui.placeholder(@aui-form-placeholder-disabled-text-color);
        }
    }

    /* Disabled form element styles */

    .text[disabled],
    .password[disabled],
    .textarea[disabled],
    .select[disabled],
    .multi-select[disabled],
    .select[disabled] option,
    .select[disabled] optgroup,
    .multi-select[disabled] option,
    .multi-select[disabled] optgroup {
        background-color: @aui-form-disabled-field-bg-color;
        color: @aui-form-disabled-field-text-color;
        border: none;
    }
    .text[disabled],
    .password[disabled],
    .textarea[disabled],
    .select[disabled],
    .multi-select[disabled] {
        border: 2px solid transparent;
    }

    .select {
        margin-top: 1px;
        vertical-align: top;
        background-color: @aui-form-select-bg-color;
        border-color: @aui-form-select-border-color;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        &::-ms-expand {
            display: none;
        }
    }
    /* Ensure AUI Select2's do not show as regular text fields */
    .aui-select2-container {
        border: 0;
        height: auto;
        padding: 0;
        vertical-align: baseline;
        width: 100%;
    }

    .aui-select2-container .select2-choices {
        height: auto;
        max-width: none;
    }

    .field-group,
    .group,
    .date-select {
        box-sizing: border-box;
        clear: both;
        padding: 4px 0 4px 145px;
        position: relative;
        margin: 1px 0;
        width: 100%;
    }

    .group {
        padding-top: 0;
    }

    // Yes, this is a hardcoded image :pain: Why? Safari doesn't support pseudo elements yet
    // https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
    // This also means hardcoded tokens
    // Enabled - Light mode - "light" theme - #505258 --ds-text-subtle
    // Enabled - Dark mode - "dark" theme - #A9ABAF --ds-text-subtle
    // Disabled - Light mode - "light" theme - #080F214A --ds-text-disabled
    // Disabled - Dark mode - "dark" theme - #E5E9F640 --ds-text-disabled
    @chevron-enabled-light: url('data:image/svg+xml,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23505258" d="m14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z"/%3E%3C/svg%3E%0A');
    @chevron-enabled-dark: url('data:image/svg+xml,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A9ABAF" d="m14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z"/%3E%3C/svg%3E%0A');
    @chevron-disabled-light: url('data:image/svg+xml,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23080F214A" d="m14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z"/%3E%3C/svg%3E%0A');
    @chevron-disabled-dark: url('data:image/svg+xml,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23E5E9F640" d="m14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z"/%3E%3C/svg%3E%0A');

    select[disabled]:not([size]),
    .select:not([size]) {
        background-repeat: no-repeat;
        background-position: calc(100% - 3px) 50%;
        background-size: 12px;
    }

    select.select[disabled]:not([size]) {
        #aui-themes.when-light-mode({
            background-image: @chevron-disabled-light;
        });
        #aui-themes.when-dark-mode({
            background-image: @chevron-disabled-dark;
        });
    }

    select.select:not([size]) {
        padding-right: 20px;
        #aui-themes.when-light-mode({
            background-image: @chevron-enabled-light;
        });
        #aui-themes.when-dark-mode({
            background-image: @chevron-enabled-dark;
        });
    }

    .icon-required {
        left: 100%;
        position: absolute;
        top: 7px;

        &::before {
            content: '*';
            position: absolute;
            left: 0;
            top: 0;
            text-indent: initial;
            color: @aui-form-error-text-color;
            line-height: 1;
            font-size: @aui-font-size-small;
        }
    }

    legend,
    label {
        color: @aui-form-label-text-color;
        font-weight: @aui-font-weight-medium;
        font-size: @aui-font-size-medium;
    }

    legend + .field-group {
        margin-top: 0;
        padding-top: 5px;
    }

    div.description {
        font-size: @aui-font-size-xsmall;
        line-height: unit((20 / @aui-font-size-xsmall));
        color: @aui-form-description-text-color;
        margin: 5px 0 0 0;

        &:first-child {
            margin-top: 0;
        }
    }

    legend,
    .field-group > label,
    .field-group > aui-label {
        float: left;
        margin-left: -145px;
        padding: 5px 0 0 0;
        position: relative;
        text-align: right;
        width: 130px;
        word-wrap: break-word;
    }
}

@import 'forms-radios-and-checkboxes';