plain-ui/src/scss/components/_field.scss

/**
 *
 *
 *
 *
 */

@mixin plain-ui__component__field()
{
    // group, container for fields
    .field-group {
        margin-bottom: 1.2em;

        &--valid {
            input.field-text, textarea.field-text {
                border-color: $plain-ui__success-light;
            }

            .icon {
                fill: $plain-ui__success-light;
            }
        }

        &--error {
            input.field-text, textarea.field-text {
                border-color: $plain-ui__danger-light;
            }

            .icon {
                fill: $plain-ui__danger-light;
            }
        }
    }
    
    .field-label {
        font-size: 1rem;
        font-family: $plain-ui__font-family;

        .icon {
            vertical-align: sub;
            font-size: 1.1rem;
        }
    }

    input.field-text, textarea.field-text, select.field-choice {
        font-family: $plain-ui__font-family;
        font-size: 0.95rem;

        width: 100%;

        border: 1px solid lighten($plain-ui__primary-light, 40%);
        background-color: white;
        border-radius: 2px;

        margin: 0.7em 0 0;

        &:focus, &:active {
            outline: 0;
            border-color: $plain-ui__primary-light;
        }
    }

    input.field-text, textarea.field-text {
        padding: 0.8em 1.1em;
    }

    select.field-choice {
        padding: 0.8em;
    }

    //
    .field-help, .field-error {
        display: inline-block;
        width: 100%;

        padding: 0.6em 0.5em;
        font-size: 0.8rem;
    }

    // display error for fields
    .field-error {
        color: $plain-ui__danger-light;
    }
}