godaddy-wordpress/go

View on GitHub
.dev/assets/shared/css/woocommerce/forms.scss

Summary

Maintainability
Test Coverage
/*! WooCommerce: Forms */
.woocommerce form .form-row {
    margin: 0 0 var(--go-input--margin-bottom);
}

.woocommerce form .form-row textarea,
.woocommerce form .form-row input.input-text {
    font-size: var(--go-input--font-size);
    line-height: 1.25;
}

.woocommerce form .form-row textarea {
    background-color: var(--go-input--color--background, var(--go--color--white));
    border-color: var(--go-input--border-color, var(--go-heading--color--text));
}

.woocommerce form .form-row textarea:focus {
    border-color: var(--go-input-interactive--color--border-color, var(--go--color--primary));
}

.select2-container--default .select2-selection--single {
    background-color: var(--go-input--color--background, var(--go--color--white));
    background-image: url(../shared/images/arrow-down-solid.svg);
    background-position: calc(100% - 10px) center;
    background-repeat: no-repeat;
    border: var(--go-input--border);
    border-radius: 0;
    font-weight: var(--go-input--font-weight, 400);
    height: initial;
    line-height: 1;
    padding: var(--go-input--padding--y) var(--go-input--padding--x);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.select2-container--default.select2-container--open.select2-container--default .select2-selection--single {
    border-color: var(--go-input-interactive--color--border-color, var(--go--color--primary));
    border-width: var(--go-input--border-width, 2px);
}

.select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--go-input--color--text);
    padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--go-input--color--text);
    font-size: var(--go-input--font-size);
    line-height: 1.25;
}

.select2-results__option {
    font-size: var(--go-input--font-size);
    font-weight: var(--go-input--font-weight, 400);
    margin: 0 0 2px;
    padding: 0.5rem;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    color: var(--go-input--color--text);
}

.select2-dropdown {
    border-color: var(--go-input-interactive--color--border-color, var(--go--color--primary));
    border-radius: 0;
    border-width: var(--go-input--border-width, 2px);
    line-height: 1.25;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--go-input--border-color, var(--go-heading--color--text));
    margin-bottom: 0;
    padding: var(--go-input--padding--y) var(--go-input--padding--x);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
    border: none;
    padding: 0;
}

.woocommerce form .form-row .required {
    color: var(--go-label--color--text, var(--go-heading--color--text));
}

#add_payment_method table.cart td.actions .coupon .input-text,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text {
    border: var(--go-input--border);
    height: auto;
    margin: 0 0.5rem 0 0;
    width: auto;

    &:focus {
        border-color: var(--go-input-interactive--color--border-color, var(--go--color--primary));
    }
}

.comment-form-cookies-consent input[type="checkbox"] + label {
    @include checkbox-radio-label;

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

.comment-form-cookies-consent input[type="checkbox"]:checked + label {

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

.woocommerce form .form-row.woocommerce-invalid .required,
.woocommerce form .form-row.woocommerce-invalid label {
    color: var(--go-input-error--color--text);
}

.woocommerce form .form-row.woocommerce-invalid .select2-container,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
    background-color: var(--go-input--color--background, var(--go--color--white));
    background-image: url(../shared/images/error-icon.svg);
    background-position: calc(100% - 10px) center;
    background-repeat: no-repeat;
    border-color: var(--go-input-error--border-color, hsl(0, 65%, 51%));
    line-height: 1.25;
}

.woocommerce form .form-row.woocommerce-validated .select2-container,
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
    background-color: var(--go-input--color--background, var(--go--color--white));
    border-color: var(--go-input--border-color, var(--go-heading--color--text));
    font-size: var(--go-input--font-size);
    font-weight: var(--go-input--font-weight, 400);
    line-height: 1.25;

    &:focus {
        border-color: var(--go-input-interactive--color--border-color, var(--go--color--primary));
    }
}

.single-product div.product form.cart div.quantity {
    float: none;
    margin: 0 0 0 0;
}

.woocommerce div.product form.cart .button {
    margin-bottom: 0;
}

.woocommerce div.product form.cart div.quantity {
    margin-right: 0.5rem;
}

.woocommerce .quantity .qty {
    margin-bottom: 1.5rem;
    max-height: 100%;
    padding: 0.5rem;
    width: 4rem;
}

/* Comment form p spacing */
.woocommerce #review_form #respond p {
    margin: 2rem 0;

    &.stars {
        margin: 0 0 2rem;
    }
}

.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
    line-height: 1.25;
    padding: var(--go-input--padding--y) var(--go-input--padding--x);
}

/* Comment form (aka product review form) consent checkbox */
.comment-form-cookies-consent {
    position: relative;

    input[type="checkbox"] {
        display: none;
    }
}

.woocommerce-page fieldset {
    border: none;
    padding: 0;

    legend {
        border-top: 1px solid var(--go-input--border-color, var(--go-heading--color--text));
        display: block;
        margin: 0 0 1.5rem;
        padding-top: 0.5rem;
        width: 100%;
    }
}

.woocommerce-Address {
    border-top: 1px solid var(--go-input--border-color, var(--go-heading--color--text));
    margin: 1.5rem 0;
    padding-top: 0.5rem;
}

.woocommerce-ResetPassword .woocommerce-form-row {
    width: 100% !important;
}

@media only screen and (max-width: 480px) {

    .woocommerce ul.products[class*="columns-"] li.product,
    .woocommerce-page ul.products[class*="columns-"] li.product {
        float: none;
        width: 100%;
    }
}