godaddy-wordpress/go

/*! Forms */
fieldset {
    margin-top: 5rem;
}

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"] {
    appearance: none;
    background-color: var(--go-input--color--background, var(--go--color--white));
    border: var(--go-input--border);
    border-radius: var(--go-input--border-radius, var(--go-button--border-radius));
    box-shadow: var(--go-input--box-shadow, none);
    color: var(--go-input--color--text);
    font-size: var(--go-input--font-size);
    font-weight: var(--go-input--font-weight, 400);
    line-height: 1;
    margin-bottom: var(--go-input--margin-bottom);
    padding: var(--go-input--padding--y) var(--go-input--padding--x);
    width: 100%;

    &:focus {
        background: var(--go-input-interactive--color--background, var(--go--color--white));
        border-color: var(--go-input-interactive--color--border-color, var(--go--color--primary));
        box-shadow: var(--go-input-interactive--box-shadow, none);
        color: var(--go-input-interactive--color--text, var(--go--color--text));
        outline: none;
    }
}

input[type="radio"],
input[type="checkbox"] {
    height: 19px;
    opacity: 0;
    width: 20px;
}

.coblocks-field {

    & input[type="radio"],
    & input[type="checkbox"],
    & input[type="hidden"] {
        display: none;
    }

    & .coblocks--inline {

        & .coblocks-checkbox-label,
        & .coblocks-radio-label {
            margin-right: 20px;
            padding-left: 2rem;

            &::before {
                top: 3px;
            }
        }
    }
}

input[type="radio"]:checked + label::before,
input[type="radio"]:checked + br + label::before {
    background-color: var(--go--color--primary) !important;
}

.coblocks-radio-label {
    @include checkbox-radio-label;
    position: relative;

    &:hover {
        cursor: pointer;
    }

    &::before {
        @include checkbox-radio-label-before;
        @include radio-label-before;
        top: 5px;
    }
}

.coblocks-checkbox-label {
    @include checkbox-radio-label;
    position: relative;

    &:hover {
        cursor: pointer;
    }

    &::before {
        @include checkbox-radio-label-before;
        @include checkbox-label-before;
        top: 5px;
    }
}

input[type="checkbox"]:checked + label,
input[type="checkbox"]:checked + br + label {

    &::before {
        @include checkbox-label-checked-before;
    }
}

textarea {
    background-color: var(--go-input--color--background, var(--go--color--white));
    border: var(--go-input--border);
    border-radius: var(--go-input--border-radius, var(--go-button--border-radius));
    color: var(--go-input--color--text);
    display: block;
    font-size: var(--go-input--font-size);
    font-weight: var(--go-input--font-weight, 400);
    margin-bottom: var(--go-input--margin-bottom);
    min-height: calc(0.5rem * 10);
    padding: var(--go-input--padding--x) var(--go-input--padding--x);
    width: 100%;

    &:focus {
        background: var(--go-input-interactive--color--background, var(--go--color--white));
        border-color: var(--go-input-interactive--color--border-color, var(--go--color--primary));
        box-shadow: var(--go-input-interactive--box-shadow, none);
        color: var(--go-input-interactive--color--text, var(--go--color--text));
        outline: none;
    }
}

select {
    @include select-menu;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin-bottom: var(--go-input--margin-bottom);
    padding: var(--go-input--padding--y) var(--go-input--padding--x) !important;

    /* CAUTION: IE hackery ahead */
    &::-ms-expand {
        display: none; /* remove default arrow on ie10 and ie11 */
    }

    &:focus {
        @include select-menu-focus;
    }

    /* Target Internet Explorer 9 to undo the custom arrow */
    @media screen and (min-width: 0) {
        background: none;
        padding: 5px;
    }
}

option {
    font-weight: var(--go-input--font-weight, 400);
}

::placeholder {
    color: var(--go-input-placeholder--color--text, hsl(0, 0%, 47%));
    line-height: 1.5;
    opacity: 1;
}

::-ms-input-placeholder {
    color: var(--go-input-placeholder--color--text, hsl(0, 0%, 47%));
}

:-ms-input-placeholder {
    color: var(--go-input-placeholder--color--text, hsl(0, 0%, 47%));
}