felixarntz/theme-boilerplate

.form-group {
    display: block;
    margin-bottom: $spacing_vertical;
}

form.form-horizontal .form-group {
    @media screen and (min-width: $site_breakpoint) {
        display: flex;
        align-items: stretch;
        justify-content: stretch;

        > label:first-child {
            flex: 1;
            padding: (0.5 * $padding_vertical) (0.5 * $padding_horizontal);
            text-align: right;
        }

        > label:first-child + *:last-child {
            flex: 3;
        }
    }
}

fieldset {
    margin-bottom: $spacing_vertical-big;
}

label {
    display: block;
    margin-bottom: (0.5 * $spacing_vertical);
    font-weight: 800;
    cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    display: block;
    padding: (0.5 * $padding_vertical) (0.5 * $padding_horizontal);
    width: 100%;
    color: $color__text-input;
    border: 1px solid $color__border-input;
    border-radius: $border-radius;

    &:focus {
        color: $color__text-input-focus;
        border-color: $color__border-input-focus;
    }
}

select {
    max-width: 100%;
    border: 1px solid $color__border-input;
    border-radius: $border-radius;
}

input[type="radio"],
input[type="checkbox"] {
    margin-right: (0.5 * $spacing_horizontal);
    cursor: pointer;

    + label {
        display: inline;
        font-weight: 400;
    }
}

/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {
    color: $color__text-input-placeholder;
    font-family: $font__main;
}

:-moz-placeholder {
    color: $color__text-input-placeholder;
    font-family: $font__main;
}

::-moz-placeholder {
    color: $color__text-input-placeholder;
    font-family: $font__main;

    /* Since FF19 lowers the opacity of the placeholder by default */
    opacity: 1;
}

:-ms-input-placeholder {
    color: $color__text-input-placeholder;
    font-family: $font__main;
}