website/_src/_assets/scss/_forms.scss

//
// Forms
// ---
// ipdb.io
//

@import 'variables';

.form {
    margin-bottom: $spacer;

    @media ($screen-sm) {
        max-width: 25rem;
    }
}

.form__group {
    margin-bottom: $spacer / $line-height;
}

.form__label {
    user-select: none;
    display: block;
    font-size: $font-size-mini;
    font-weight: $font-weight-bold;
    text-transform: uppercase;
    color: $brand-02;
    margin-bottom: $spacer / 4;

    .required & {
        &:after {
            content: '*';
            color: $brand-01;
            padding-left: .1rem;
            padding-right: .1rem;
        }
    }

    &.valid {
        color: $brand-success;

        &:after { display: none; }
    }

    &.error {
        color: $brand-failure;

        &:after { display: none; }

        a {
            text-decoration: underline;
        }
    }
}

.form__control {
    display: block;
    width: 100%;
    max-width: 100%;
    appearance: none;
    padding: $spacer / 3 $spacer / 2;
    margin: 0;
    font-family: $font-family-base;
    font-size: $font-size-base;
    font-weight: $font-weight-bold;
    box-shadow: none;
    border: 1.5px solid darken($brand-05, 10%);
    border-radius: $border-radius / 2;
    color: $brand-03;
    background: lighten($brand-05, 4%);
    transition: .15s ease-out;

    &:focus {
        outline: 0;
        border-color: $brand-02;
        background: $brand-05;
    }

    // Placeholder
    &::placeholder {
        color: $text-color;
        opacity: .4;
        font-weight: $font-weight-normal;
    }

    &:disabled,
    &[readonly] {
        cursor: disabled;

        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
        opacity: 1;
    }

    //
    // Form Validation States
    //
    // Success style
    &:valid:not(:focus):not(:placeholder-shown) {
        &,
        &:focus {
            border-color: $brand-success;
        }
    }

    // Error style
    &:invalid:not(:focus):not(:placeholder-shown):not(select) {
        &,
        &:focus {
            border-color: $brand-failure;
        }
    }

    &textarea {
        // for textarea-autogrow
        resize: none;
        box-sizing: content-box;
        max-width: 95%;
    }
}

.form__help {
    font-size: $font-size-small;
    color: $brand-02;
    line-height: 1.2;
    display: inline-block;
    margin-top: $spacer / 4;

    input + & {
        padding-right: $spacer / 2;
    }
}

.input-group {
    display: flex;

    .form__control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 0;
    }

    .button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

//
// Size modifiers
//
.form__control--small {
    font-size: $font-size-small;
    padding-top: $spacer / 5;
    padding-bottom: $spacer / 5;
}


//
// required indicator
//
.required {
    color: $brand-01;
    padding-left: .1rem;
    padding-right: .1rem;
}