.dev/assets/shared/css/woocommerce/forms.scss
/*! 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%;
}
}