benivo-ui-library/forms.less

Benivo UI library

//
// Forms
//
@label-width-lg: 210px;
@label-width: 170px;

.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -@gatter;
    margin-left: -@gatter;

    >.col,
    >[class*='col-'] {
        padding-right: @gatter;
        padding-left: @gatter;
    }
}

.form-group label,
.form-label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: @form-label-font-size;
    font-weight: @form-label-font-wight;
    word-break: break-word;
    line-height: 20px;
    color: var(--grey-700);

    .required-point {
        color: var(--error-main);
    }

    .has-tooltip {
        font-size: @font-size;
        margin: 0 0 0 12px;
    }
}

//Form fields wraps
.form-group {
    position: relative;
    margin-bottom: @spacer * 1.75;
    text-align: left;

    .form-text {
        font-size: 12px;

        @media @lg {
            position: absolute;
        }
    }

    .text-muted {
        color: color-mix(in srgb, white 30%, var(--text-600));
    }

    .icon-close-icon {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        .transform(translateY(-50%));
        font-size: 10px;
        font-weight: 700;
        padding: 6px;

        &:hover {
            cursor: pointer;
        }

        &:before {
            color: var(--text-600);

            @media @lg {
                color: var(--text-600);
            }
        }
    }

    &.inline-field {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 1.75rem;

        @media @md {
            flex-direction: row;
        }

        label {
            font: inherit;
            word-break: break-word;
            width: @label-width;
            min-width: @label-width;

            @media @lg {
                width: @label-width-lg;
                min-width: @label-width-lg;
            }

            &+div {
                width: 100%;
                word-break: break-word;
            }
        }
    }
}

// Placeholder
::-webkit-input-placeholder {
    color: var(--text-400);
}

::-moz-placeholder {
    color: var(--text-400);
}

:-ms-input-placeholder {
    color: var(--text-400) !important;
}

:-moz-placeholder {
    color: var(--text-400);
}

[placeholder] {
    text-overflow: ellipsis;
}

// Validation
.invalid,
.field-invalid {
    border-color: var(--error-main) !important;

    .form-group label,
    .form-label {
        color: var(--error-main) !important;
    }

    .has-pre-box {
        .pre-box {
            border-color: var(--error-main) !important;
            border-right-color: transparent !important;
        }
    }

    .native-date-picker {
        border-color: var(--error-main) !important;
    }

    .react-datepicker__input-container input,
    .form-select__control,
    .form-control,
    .choose-file {
        border-color: var(--error-main) !important;

        &:focus,
        &:focus-visible {
            box-shadow: @form-focus-error-box-shadow;
        }
    }

    .form-select__control--is-focused {
        box-shadow: @form-focus-error-box-shadow;
    }

    .react-datepicker {
        .form-select__control {
            border-color: var(--border-200) !important;
        }
    }
}

.field-invalid-msg {
    font-size: @extra-small-font-size;
    color: var(--error-main) !important;
    display: block;
    word-break: break-word;
    line-height: 1.4;
    margin-top: .25rem;
}

.alert {

    &-danger,
    &-warning,
    &-success {
        font-size: @extra-small-font-size;
        .border-radius (4px);
        padding: 6px 15px;
        margin-bottom: 5px;
    }

    &-danger {
        color: var(--error-main);
        background-color: var(--error-light);
        border: 1px solid var(--error-main);
    }

    &-warning {
        color: var(--warning-main);
        background-color: var(--warning-light);
        border: 1px solid rgba(138, 99, 0, 0.28);
        margin-bottom: 9px;
    }

    &-success {
        color: var(--success-main);
        background-color: var(--success-light);
        border: 1px solid var(--success-main);
    }
}

.info {
    position: relative;
    display: block;

    &:before {
        content: '\e90a';
        font-family: 'icomoon';
        display: block;
        position: absolute;
        right: 11px;
        top: 0;
        font-size: @small-font-size;
        font-weight: lighter;
        color: var(--text-200);
        line-height: 1;
    }

    input {
        pointer-events: none;
    }
}

.locked {
    position: relative;

    &:before {
        content: '\e98a';
        font-family: 'icomoon';
        display: flex;
        align-items: center;
        position: absolute;
        right: 11px;
        font-size: 14px;
        color: var(--text-200);
    }

    input {
        pointer-events: none;
    }
}