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

/**
 *
 *
 *
 */

@mixin plain-ui__component__field()
{
    .label {
        font-family: $plain-ui__font-family;

        .icon {
            vertical-align: text-top;
            font-size: 1.2rem;
        }
    }

    input.text, textarea.text {
        font-family: $plain-ui__font-family;

        width: 100%;
        padding: 0.8em 1.1em;
        font-size: 0.9rem;

        border: 1px solid;
        border-radius: 2px;

        margin: 0.7em 0 0;

        &:focus, &:active {
            outline: 0;
            border-color: #4d8c4d;
        }
    }

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

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

    .error {
        color: $plain-ui__danger-light;
    }

    .group {
        margin-bottom: 1.2em;

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

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

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

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

    .text-wrapper {
        display: flex;

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