shut/src/less/css.Forms.less

Shut UI Framework

@import "utilities/border";

// input text template
.input() {
    /* used to mimic the text input for regular text */
    border: 1px solid @grey-light;
    padding: @input-padding;

    .border-radius(@input-radius);
    outline: none;

    &:focus {
        outline: solid 1px;
    }
}

.input-control {
    // type text
    .input();

    &::placeholder {
        opacity: 0.8;
        font-size: 90%;
    }
}

// field wrapper for asterik and invalid feedback
.input-field {
    position: relative;
    display: block;
    & .input-control:focus ~ .input-asterisk {
        display: none;
    }
}
.input-label {
    display: inline-block;
}
.input-asterisk {
    display: inline-block;
    position: absolute;
    inset-inline-end: 5px;
    inset-block-start: 0;
    &:after {
        display: block;
        content: "*";
        #rem > .font-size(1.8);
        font-weight: @font-weight-bold;
        line-height: 1.5;
        color: @red;
    }
}
.input-invalid-feedback {
        background-color: @red;
        color: @white;
        .small();
        position: absolute;
        inset-block-end: -24px;
        inset-inline-start: 5px;
        z-index: 1000;
        border-radius: @radius;
        padding: 2px 5px;
        white-space: nowrap;
        width: auto; // god damn u bootstrap
        &:before {
            border-color: @red;
            content: "";
            display: inline-block;
            height: 0;
            width: 0;
            position: absolute;
            inset-inline-start: 45%;
            inset-block-start: -4px;

            border-style: solid;
            border-color: transparent;
            border-width: 0 4px 4px;
            border-block-end-color: @red;
        }
}