benivo-ui-library/input.less

Benivo UI library

@input-pad-x: 0.75rem;
@input-pad-y: 0.375rem;

// Inputs
select,
textarea,
input[type='url'],
input[type='tel'],
input[type='time'],
input[type='text'],
input[type='email'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='week'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='month'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    display: block;
    min-height: inherit;
    width: 100%;
    padding: @input-pad-y @input-pad-x;
    line-height: 2;
    color: inherit;
    font-style: normal;
    font-family: @form-font-family;
    font-weight: @form-font-weight;
    font-size: @form-font-size;
    border: 1px solid var(--border-200);
    .box-shadow(@form-box-shadow);
    .border-radius(@form-border-radius);

    //  transition: border 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    @media @lg {
        line-height: 1.4;
    }

    &.disabled {
        pointer-events: none;
        background-color: rgba(var(--black-rgb), 0.03);
    }
}

input[type='url'],
input[type='tel'],
input[type='time'],
input[type='text'],
input[type='email'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='week'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='month'] {
    @media @lg {
        max-height: 36px;
    }
}

.locked {
    position: relative;

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

    input {
        pointer-events: none;
        padding-right: 25px;
    }
}

.has-pre-box {
    display: flex;

    .pre-box {
        width: 80px;
        display: block;
        padding: 0.375rem 0.75rem;
        font-weight: @font-weight-semibold;
        font-size: @form-font-size;
        line-height: 2;
        border: 1px solid var(--border-200);
        .border-radius(@form-border-radius 0 0 @form-border-radius);
        .box-shadow(@form-box-shadow);

        @media @lg {
            line-height: 1.4;
            max-height: 36px;
        }
    }

    .form-control {
        width: ~'calc(100% - 80px)';
        .border-radius(0 @form-border-radius @form-border-radius 0);
    }
}

.has-post-box {
    display: flex;

    .post-box {
        width: 35px;
        display: block;
        background: var(--bg-50);
        padding: 0.375rem;
        font-weight: @font-weight-bold;
        font-size: @form-font-size;
        line-height: 2;
        border: 1px solid var(--border-200);
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        .border-radius(@form-border-radius);
        .box-shadow(@form-box-shadow);

        @media @lg {
            line-height: 1.4;
        }
    }

    .form-control {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}

.pre-box-auto-width {
    .pre-box {
        width: auto;
    }
}

.has-custom-post-box {
    display: flex;

    .form-control {
        border-right: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}

.custom-post-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-200);
    border-left: none;
    border-radius: 0 @form-border-radius @form-border-radius 0;
    background-color: var(--white);
}