acud/lib/form/style/mixin.less

acg react 组件库

/**
 * @file mixins tools
 * @author chenqiang(chenqiang03)
 */

// input status
// == when focus or actived
.active(@color: @outline-color) {
    border-color: @color;
    border-right-width: @border-width-base !important;
    outline: 0;
}

.form-control-validation(
    @text-color: @form-input-text-color;
    @border-color: @form-input-border-color;
    @background-color: @form-input-background-color
) {
    .@{acud-prefix}-form-item-split {
        color: @text-color;
    }

    .@{acud-prefix}-input,
    .@{acud-prefix}-input-affix-wrapper {
        &,
        &:hover,
        &:focus,
        &-focused {
            background-color: @background-color;
            border-color: @border-color;
            .active(@border-color);
        }
    }

    .@{acud-prefix}-input-disabled {
        &,
        &:hover {
            background-color: @form-input-disabled-background-color;
            border-color: @form-input-disabled-border-color;
        }
    }

    .@{acud-prefix}-input-affix-wrapper-disabled {
        &,
        &:hover {
            background-color: @form-input-disabled-background-color;
            border-color: @form-input-disabled-border-color;

            input:focus {
                box-shadow: none !important;
            }
        }
    }

    .@{acud-prefix}-calendar-picker-open .@{acud-prefix}-calendar-picker-input {
        .active(@border-color);
    }

    .@{acud-prefix}-input-prefix {
        color: @text-color;
    }

    .@{acud-prefix}-input-group-addon {
        color: @text-color;
        border-color: @border-color;
    }

    .has-feedback {
        color: @text-color;
    }
}

.reset-form() {
    legend {
        display: block;
        width: 100%;
        margin-bottom: 20px;
        padding: 0;
        color: @form-input-text-color;
        font-size: @form-font-size-lg;
        line-height: inherit;
        border: 0;
        border-bottom: @border-width-base @border-style-base @form-input-border-color;
    }

    label {
        font-size: @form-font-size-base;
    }

    input[type='search'] {
        box-sizing: border-box;
    }

    // Position radios and checkboxes better
    input[type='radio'],
    input[type='checkbox'] {
        line-height: normal;
    }

    input[type='file'] {
        display: block;
    }

    // Make range inputs behave like textual form controls
    input[type='range'] {
        display: block;
        width: 100%;
    }

    // Make multiple select elements height not fixed
    select[multiple],
    select[size] {
        height: auto;
    }

    // Focus for file, radio, and checkbox
    input[type='file']:focus,
    input[type='radio']:focus,
    input[type='checkbox']:focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    // Adjust output element
    output {
        display: block;
        padding-top: 15px;
        color: @form-input-text-color;
        font-size: @form-font-size-base;
        line-height: @form-line-height-base;
    }
}

.form-cols(@cols: 1) {
    display: grid;
    grid-column-gap: 4 * @P;
    grid-template-columns: repeat(@cols, 1fr);
}