awx/awx/ui/client/lib/components/input/_index.less

.at-Input {
    .at-mixin-Placeholder(@at-color-input-placeholder);

    height: @at-height-input;
    background: @at-color-input-background;
    border-radius: @at-border-radius;
    color: @at-color-input-text;
    padding: 0 @at-padding-input;

    &, &:active {
        border-color: @at-color-input-border;
    }

    &:focus {
        border-color: @at-color-input-focus;
    }

    &[readonly] {
        background: @at-color-input-readonly;
    }

    &[disabled] {
        background: @at-color-input-disabled;
    }
}

.at-InputCheckbox {
    margin: 0;
    padding: 0;
    display: block;
    min-height: 20px;

    & > label {
        font-weight: normal;

        & > input[type=checkbox] {
            height: @at-height-input;
            margin: 0;
            padding: 0;
            float: left;
        }

        & > p {
            margin: 0;
            padding: 0 0 0 @at-padding-panel;
            line-height: @at-line-height-tall;
        }
    }
}

.at-InputContainer {
    margin-top: @at-margin-panel;
}

.at-Input-button {
    .at-mixin-InputButton();
}

.at-Input-button--fixed-xs {
    .at-mixin-InputButton();
    min-width: @at-width-input-button-sm;
    height: @at-height-input;
}

.at-Input-button--fixed-sm {
    .at-mixin-InputButton();
    min-width: @at-width-input-button-md;
    height: @at-height-input;
}

.at-Input-button--fixed-md {
    .at-mixin-InputButton();
    display: inherit;
    min-width: @at-width-input-button-md;
    height: @at-height-textarea;
}

.at-Input-button--active {
    .at-mixin-ButtonColor(at-color-info, at-color-default);
}

.at-Input--focus {
    border-color: @at-color-input-focus;
}

.at-Input--rejected {
    &, &:focus {
        border-color: @at-color-input-error;
    }
}

.at-InputFile--hidden {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    z-index: -2;
    opacity: 0;
}

.at-InputFile--drag {
    z-index: 3;
}

.at-InputGroup {
    padding: 0;
    margin: @at-margin-panel 0 0 0;
}

.at-InputGroup-border {
    position: absolute;
    width: 5px;
    height: 100%;
    background: @at-color-panel-border;
    left: -5px;
}

.at-InputGroup-title {
    .at-mixin-Heading(@at-font-size-panel-inset-heading);
    margin: 0 0 0 @at-margin-panel-inset;
}

.at-InputGroup-divider {
    clear: both;
    margin: 0;
    padding: 0;
    height: @at-height-divider;
}

.at-InputLabel {
    display: inline-block;
    width: 100%;
}

.at-InputLabel-name {
    color: @at-color-form-label;
    font-size: @at-font-size-form-label;
    font-weight: @at-font-weight-body;
    text-transform: uppercase;
}

.at-InputLabel-hint {
    margin-left: @at-margin-form-label-hint;
    color: @at-color-input-hint;
    font-size: @at-font-size-help-text;
    font-weight: @at-font-weight-body;
    line-height: @at-line-height-short;
}

.at-InputLabel-checkbox {
    margin: 0;
    padding: 0;
}

.at-InputLabel-checkboxLabel {
    margin-bottom: 0;

    & > input[type=checkbox] {
        margin: 0 3px 0 0;
    }

    & > p {
        font-size: @at-font-size-help-text;
        color: @at-color-form-label;
        font-weight: @at-font-weight-body;
        display: inline;
        margin: 0;
        padding: 0;
    }
}

.at-InputMessage--rejected {
    font-size: @at-font-size-help-text;
    color: @at-color-error;
    margin: @at-margin-input-message 0 0 0;
    padding: 0;
}

.at-InputLabel-required {
    color: @at-color-error;
    font-weight: @at-font-weight-heading;
    font-size: @at-font-size-form-label;
    margin: 0;
}

.at-InputSelect {
    position: relative;
    width: 100%;

    & > i {
        font-size: @at-font-size-button;
        position: absolute;
        z-index: 3;
        pointer-events: none;
        top: @at-height-input / 3;
        right: @at-height-input / 3;
        color: @at-color-input-icon;
    }
}

.at-InputSelect-input {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.at-InputSelect-select {
    height: @at-height-input;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    top: 0;

    & > optgroup {
        text-transform: uppercase;

        & > option {
            text-transform: none;
        }
    }
}

.at-InputTextarea {
    .at-mixin-FontFixedWidth();
    min-height: @at-height-textarea;
    padding: 6px @at-padding-input 0 @at-padding-input;
}

.at-InputLookup {
    display: flex;

    .at-InputLookup-button {
        .at-mixin-InputButton();
        border-radius: @at-border-radius 0 0 @at-border-radius;
        border-right: none;
        flex: 0 0 35px;
        height: auto;
        min-height: 30px
    }

    .at-InputLookup-tagContainer {
        .at-mixin-Border;
        display: flex;
        flex-flow: row wrap;
        padding: 0 10px;
        width: 100%;
    }

    .at-InputLookup-button + .at-Input,
    .at-InputLookup-tagContainer {
        border-radius: 0 @at-border-radius @at-border-radius 0;
    }
}

.at-InputSlider {
    display: flex;
    padding: 5px 0;

    p {
        color: @at-color-form-label;
        font-size: @at-font-size-help-text;
        font-weight: @at-font-weight-body;
        margin: 0 0 0 10px;
        padding: 0;
        width: 50px;
    }

    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        background: transparent;
        height: 20px;
        border-right: 1px solid @at-color-input-slider-track;
        border-left: 1px solid @at-color-input-slider-track;

        &:focus {
            outline: none;
        }

        &::-webkit-slider-runnable-track {
            background: @at-color-input-slider-track;
            cursor: pointer;
            height: 1px;
            width: 100%;
        }

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            background-color: @at-color-input-slider-thumb;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            height: 16px;
            margin-top: -7px;
            width: 16px;
        }

    }

    input[type=range]::-moz-range-thumb {
        -webkit-appearance: none;
        background-color: @at-color-input-slider-thumb;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        height: 16px;
        width: 16px;
    }

    input[type=range]::-moz-range-track {
        background: @at-color-input-slider-track;
        cursor: pointer;
        height: 1px;
        width: 100%;
    }

    input[type=range][disabled] {
        &::-webkit-slider-thumb {
            background: @at-color-disabled;
            border: solid 1px @at-color-disabled;
            cursor: not-allowed;
        }
    }
}

.at-InputGroup-container {
    .row {
        margin: 0;
    }
}