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);
    z-index: 1;
    box-sizing: border-box;

    //  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);
        background-color: var(--bg-50);
    }

    &:focus,
    &:focus-visible {
        box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(41, 112, 255, 0.24);
        outline: none;
    }
}

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'] {
    height: 40px;

    @media @lg {
        max-height: 40px;
    }
}

.form-control-box {
    position: relative;
}

.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;
    }
}

&.pre-icon {
    width: auto;
    min-width: auto;
    height: auto;
    border: none;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 0.75rem;
    .transform(translateY(-50%));
    z-index: 2;

    &~.form-control {
        padding-left: 2.5rem;
        max-width: 100%;
    }
}

.has-pre-box {
    display: flex;

    .pre-box {
        min-width: 35px;
        height: 40px;
        display: block;
        padding: 0.5rem 0.75rem;
        font-weight: @font-weight-semibold;
        font-size: @form-font-size;
        line-height: 1.4;
        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: 40px;
        }

        &~.pre-icon {
            left: ~'calc(45px + 0.75rem)';
        }
    }

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

&.post-icon {
    width: auto;
    height: auto;
    min-width: auto;
    border: none;
    padding: 0;
    position: absolute;
    top: 50%;
    right: 0.75rem;
    .transform(translateY(-50%));
    z-index: 2;
}

.has-post-box {
    display: flex;

    .post-box {
        min-width: 35px;
        height: 40px;
        display: block;
        padding: 0.5rem 0.75rem;
        font-weight: @font-weight-bold;
        font-size: @form-font-size;
        line-height: 1.4;
        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;
        }

        &~.post-icon {
            right: ~'calc(45px + 0.75rem)';
        }
    }

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

.has-post-icon {
    .form-control {
        padding-right: 2.5rem;
    }
}

.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);
}