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

/**
 *
 *  fields
 *
 *  @author Björn Hase, me@herr-hase.wtf
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/plain-ui.git
 *
 */

.field-group {
    margin: $margin;

    &--valid {
        .field-text {
            border-color: var(--success);
        }

        .icon {
            fill: var(--success);
        }
    }

    &--error {
        .field-text {
            border-color: var(--danger);
        }

        .icon {
            fill: var(--danger);
        }
    }
}

.field-label {
    font-size: 1rem;
    font-family: var(--font-family);

    .icon {
        vertical-align: text-bottom;
    }

    &:hover {
        cursor: pointer;
    }
}

.field-text, .field-choice {
    font-family: var(--font-family);
    font-size: 0.95rem;

    width: 100%;

    border: 1px solid lighten($color__primary, 40%);
    border-radius: $border-radius;

    margin: 0.7rem 0 0;

    &:focus, &:active {
        outline: 0;
        border-color: var(--border);
    }
}

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

textarea.field-text {
    height: 180px;
}


/**
 * field-choice
 *
 *
 */

.field-choice {
    appearance: none;
    padding: 0.8em;

    background-image: linear-gradient(to right, $color__active, $color__active);
    background-position: 100%;
    background-size: 1.5rem 100%;
    background-repeat: no-repeat;

    &:active, &:focus {
        background-image: linear-gradient(to right, $color__border, $color__border);
    }
}

/**
 * radio & checkbox
 *
 * <div class="field">
 *     <label for="field__checkbox__1" class="field__label">
 *         <input class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
 *         <svg class="icon field__choice__unchecked" aria-hidden="true">
 *             <use xlink:href="symbol-defs.svg#icon-minus"></use>
 *         </svg>
 *         <svg class="icon field__choice__checked" aria-hidden="true">
 *             <use xlink:href="symbol-defs.svg#icon-checked"></use>
 *         </svg>
 *         checkbox 1
 *    </label>
 * </div>
 *
 */

[type=checkbox].field-choice,
[type=radio].field-choice {
    position: relative;
    display: none;

    ~ .field-choice__checked {
        display: none;
    }

    &:checked ~ .field-choice__checked {
        display: inline-block;
    }

    &:checked ~ .field-choice__unchecked {
        display: none;
    }
}

svg.field-choice__unchecked {
    fill: var(--active);
}

svg.field-choice__checked {
    fill: var(--success);
}

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

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

/**
 *
 *
 */

.field-switch {
    position: relative;
    display: inline-block;
    width: 75px;
    height: 35px;

    border: $border;
    border-radius: $border-radius;

    &:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        content: '';

        border: $border;
        border-color: var(--border-contrast);
        border-radius: $border-radius;
        background-color: var(--active);

        transition: transform 0.25s;
    }
}

[type=checkbox].field-choice {
    ~ .field-switch:after {
        left: 0;
    }

    &:checked ~ .field-switch {
        border-color: var(--success);

        &:after {
            background-color: var(--success);
            transform: translateX(100%);
        }
    }
}

/**
 * display error for fields
 *
 */
.field-error {
    color: var(--danger);
}