From 03a07391b3f3f298589b696922a55d422572f423 Mon Sep 17 00:00:00 2001 From: Evan Herman Date: Mon, 16 Nov 2020 16:34:41 -0500 Subject: [PATCH] Fix visibility of WooCommerce checkboxes and radios (#598) * Fix visibility of checkboxes and radios * tweak * Remove & .selector in WooCommerce scss files --- .../assets/shared/css/woocommerce/blocks.scss | 26 +++++------ .../assets/shared/css/woocommerce/button.scss | 26 +++++------ .dev/assets/shared/css/woocommerce/cart.scss | 18 ++++---- .../shared/css/woocommerce/checkbox.scss | 1 + .dev/assets/shared/css/woocommerce/forms.scss | 4 +- .../assets/shared/css/woocommerce/notice.scss | 2 +- .../shared/css/woocommerce/pagination.scss | 18 ++++---- .../shared/css/woocommerce/product.scss | 20 ++++----- .dev/assets/shared/css/woocommerce/radio.scss | 15 +++++-- .dev/assets/shared/css/woocommerce/shop.scss | 26 +++++------ .../css/woocommerce/single-product.scss | 40 ++++++++--------- .../shared/css/woocommerce/slideout-menu.scss | 44 +++++++++---------- 12 files changed, 125 insertions(+), 115 deletions(-) diff --git a/.dev/assets/shared/css/woocommerce/blocks.scss b/.dev/assets/shared/css/woocommerce/blocks.scss index aee2dc2fa..d5aa512b0 100644 --- a/.dev/assets/shared/css/woocommerce/blocks.scss +++ b/.dev/assets/shared/css/woocommerce/blocks.scss @@ -8,7 +8,7 @@ .wp-block-woocommerce-all-reviews { - & .wc-block-sort-select__select { + .wc-block-sort-select__select { -moz-appearance: none; -webkit-appearance: none; display: inline; @@ -16,17 +16,17 @@ width: auto; } - & .wc-block-review-list { + .wc-block-review-list { padding-left: 0; - & .wc-block-review-list-item__item { + .wc-block-review-list-item__item { margin: 0 0 40px; &:last-child { margin: 0; } - & .wc-block-review-list-item__rating__stars span::before { + .wc-block-review-list-item__rating__stars span::before { color: var(--go--color--primary); color: var(--go--hyperlink--color--text, var(--go--color--primary)); } @@ -48,24 +48,24 @@ h2 + .wc-block-grid { .wc-block-grid { - & .wc-block-grid__product-rating { + .wc-block-grid__product-rating { margin-bottom: 1em; - & .star-rating span::before { + .star-rating span::before { color: var(--go--color--primary); color: var(--go--hyperlink--color--text, var(--go--color--primary)); } } - & .wc-block-grid__product-link { + .wc-block-grid__product-link { text-decoration: none; } - & .wc-block-grid__product-image { + .wc-block-grid__product-image { margin-bottom: 0; } - & .wc-block-grid__product-onsale { + .wc-block-grid__product-onsale { background-color: transparent; border-radius: unset; display: inline-block; @@ -80,20 +80,20 @@ h2 + .wc-block-grid { width: unset; } - & li .price { + li .price { margin: 0.5em 0; - & + .wc-block-grid__product-add-to-cart { + + .wc-block-grid__product-add-to-cart { margin-top: 1em; } } - & ul { + ul { justify-content: space-between; max-width: 100%; width: 100%; - & li { + li { margin: 0; } } diff --git a/.dev/assets/shared/css/woocommerce/button.scss b/.dev/assets/shared/css/woocommerce/button.scss index 8edcd5a1b..661eaef55 100644 --- a/.dev/assets/shared/css/woocommerce/button.scss +++ b/.dev/assets/shared/css/woocommerce/button.scss @@ -4,9 +4,9 @@ body { &.woocommerce-page { /* Primary Button */ - & #respond input#submit.alt, - & .button.alt, - & .button { + #respond input#submit.alt, + .button.alt, + .button { @include button; &:hover, @@ -16,19 +16,19 @@ body { } } - & .button.disabled, - & .button.alt.disabled, - & .button.disabled:hover, - & .button.alt.disabled:hover, - & .woocommerce button.button:disabled, - & .woocommerce button.button:disabled[disabled] { + .button.disabled, + .button.alt.disabled, + .button.disabled:hover, + .button.alt.disabled:hover, + .woocommerce button.button:disabled, + .woocommerce button.button:disabled[disabled] { @include button; } /* Secondary Button */ - & #respond input#submit, - & .button, - & .wp-block-button__link.add_to_cart_button { + #respond input#submit, + .button, + .wp-block-button__link.add_to_cart_button { @include button; &:hover, @@ -66,7 +66,7 @@ body { } } - & .widget_shopping_cart a.wc-forward { + .widget_shopping_cart a.wc-forward { @include button; &:hover, diff --git a/.dev/assets/shared/css/woocommerce/cart.scss b/.dev/assets/shared/css/woocommerce/cart.scss index 097eafd5f..4f884d4ae 100644 --- a/.dev/assets/shared/css/woocommerce/cart.scss +++ b/.dev/assets/shared/css/woocommerce/cart.scss @@ -3,16 +3,16 @@ body { &.woocommerce-cart { - & .coupon { + .coupon { display: flex; - & #coupon_code { + #coupon_code { padding: var(--go-input--padding--y) var(--go-input--padding--x); width: auto !important; } } - & td.product-remove a { + td.product-remove a { color: var(--go--color--primary) !important; margin: 0 auto; @@ -21,23 +21,23 @@ body { } } - & table.cart th, - & table.cart td { + table.cart th, + table.cart td { text-align: center; } - & .product-thumbnail img { + .product-thumbnail img { width: 150px; } - & .cart-empty-icon { + .cart-empty-icon { margin: 0 auto; max-width: 75px; text-align: center; width: 100%; } - & .return-to-shop { + .return-to-shop { margin-top: 1em; text-align: center; } @@ -47,7 +47,7 @@ body { &.woocommerce, &.woocommerce-page { - & .input-text { + .input-text { width: 180px; } } diff --git a/.dev/assets/shared/css/woocommerce/checkbox.scss b/.dev/assets/shared/css/woocommerce/checkbox.scss index ecd95ca74..564fd7c38 100644 --- a/.dev/assets/shared/css/woocommerce/checkbox.scss +++ b/.dev/assets/shared/css/woocommerce/checkbox.scss @@ -1,6 +1,7 @@ /*! WooCommerce: Checkbox */ .woocommerce-page input[type="checkbox"] { appearance: checkbox; + opacity: 1; } .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme { diff --git a/.dev/assets/shared/css/woocommerce/forms.scss b/.dev/assets/shared/css/woocommerce/forms.scss index 5bf752c54..673b162da 100644 --- a/.dev/assets/shared/css/woocommerce/forms.scss +++ b/.dev/assets/shared/css/woocommerce/forms.scss @@ -186,7 +186,7 @@ .comment-form-cookies-consent { position: relative; - & input[type="checkbox"] { + input[type="checkbox"] { display: none; } } @@ -195,7 +195,7 @@ border: none; padding: 0; - & legend { + legend { border-top: 1px solid var(--go-input--border-color, var(--go-heading--color--text)); display: block; margin: 0 0 1.5rem; diff --git a/.dev/assets/shared/css/woocommerce/notice.scss b/.dev/assets/shared/css/woocommerce/notice.scss index 8028e304e..387e90c34 100644 --- a/.dev/assets/shared/css/woocommerce/notice.scss +++ b/.dev/assets/shared/css/woocommerce/notice.scss @@ -12,7 +12,7 @@ top: inherit; z-index: 9998; - & a { + a { color: var(--go--color--white); text-decoration: underline; diff --git a/.dev/assets/shared/css/woocommerce/pagination.scss b/.dev/assets/shared/css/woocommerce/pagination.scss index 994328548..f53b3aae4 100644 --- a/.dev/assets/shared/css/woocommerce/pagination.scss +++ b/.dev/assets/shared/css/woocommerce/pagination.scss @@ -2,15 +2,15 @@ .woocommerce nav.woocommerce-pagination { text-align: center; - & ul, - & ul li { + ul, + ul li { border: none; } - & ul li { + ul li { - & a, - & span { + a, + span { border-bottom: 0; font-weight: 700; margin: 0 1px; @@ -41,8 +41,8 @@ } } - & .prev, - & .next { + .prev, + .next { font-size: 1rem; position: relative; text-indent: -9999px; @@ -59,11 +59,11 @@ } } - & .next { + .next { margin-left: 0.25rem; } - & .prev { + .prev { margin-right: 0.25rem; &::before { diff --git a/.dev/assets/shared/css/woocommerce/product.scss b/.dev/assets/shared/css/woocommerce/product.scss index 0f87cfbfd..e7e9f4b12 100644 --- a/.dev/assets/shared/css/woocommerce/product.scss +++ b/.dev/assets/shared/css/woocommerce/product.scss @@ -10,11 +10,11 @@ } /* Avoid last child bottom margin */ - & .wc-block-grid__product-link, - & .woocommerce-loop-product__link { + .wc-block-grid__product-link, + .woocommerce-loop-product__link { display: block; - & > *:last-child { + > *:last-child { margin-bottom: 0; } } @@ -108,7 +108,7 @@ table.variations tbody tr:nth-child(odd) { display: block; width: 100%; - & label { + label { margin-bottom: 0; padding: 0; } @@ -125,30 +125,30 @@ table.variations tbody tr:nth-child(odd) { /* Input qty and add to cart button when HAS variations */ .cart.variations_form { - & .single_variation_wrap { + .single_variation_wrap { - & .woocommerce-variation-add-to-cart { + .woocommerce-variation-add-to-cart { align-items: center; display: flex; justify-content: center; - & .quantity { + .quantity { flex: 1; - & input { + input { margin-bottom: 0; padding: var(--go-input--padding--y) 36px var(--go-input--padding--y) var(--go-input--padding--x); width: 100%; } } - & button[type="submit"] { + button[type="submit"] { flex: 1; margin-right: 1em; } } - & .woocommerce-variation-price { + .woocommerce-variation-price { margin: 0 0 1.5rem; } } diff --git a/.dev/assets/shared/css/woocommerce/radio.scss b/.dev/assets/shared/css/woocommerce/radio.scss index 51a6c7640..0981cdba5 100644 --- a/.dev/assets/shared/css/woocommerce/radio.scss +++ b/.dev/assets/shared/css/woocommerce/radio.scss @@ -1,12 +1,14 @@ .woocommerce-page { - & .wc_payment_methods { + .wc_payment_methods, + .woocommerce-shipping-methods { - & input[name="payment_method"] { + input[name="payment_method"], + .shipping_method { display: none; } - & label { + label { @include checkbox-radio-label; position: relative; @@ -21,4 +23,11 @@ } } } + + .woocommerce-shipping-methods { + + label::before { + top: 3px; + } + } } diff --git a/.dev/assets/shared/css/woocommerce/shop.scss b/.dev/assets/shared/css/woocommerce/shop.scss index bff981976..885e08adb 100644 --- a/.dev/assets/shared/css/woocommerce/shop.scss +++ b/.dev/assets/shared/css/woocommerce/shop.scss @@ -2,18 +2,18 @@ .content-area--woocommerce { margin-bottom: var(--go--spacing--vertical--lg); - & .page-title { + .page-title { display: none !important; } - & .woocommerce-result-count { + .woocommerce-result-count { float: left; margin-bottom: 0; padding: 0; position: relative; } - & .woocommerce-ordering { + .woocommerce-ordering { @include media(medium) { float: right; margin-bottom: 0; @@ -23,7 +23,7 @@ } - & .go-sorting { + .go-sorting { margin-bottom: 5rem; margin-top: 4rem; @@ -37,7 +37,7 @@ clear: both; } - & select { + select { line-height: 1; margin-bottom: 0; padding: 1rem 0.75rem !important; @@ -49,7 +49,7 @@ .woocommerce ul.products, .wc-block-grid__products { - & li { + li { margin-bottom: 5rem !important; text-align: center; @@ -57,17 +57,17 @@ margin-bottom: 5rem !important; } - & a { + a { &:hover { - & .star-rating { + .star-rating { color: var(--go--color--primary); color: var(--go--hyperlink--color--text, var(--go--color--primary)); } } - & img { + img { height: auto; margin: 0; width: 100%; @@ -85,8 +85,8 @@ } } - & .wc-block-grid__product-title, - & .woocommerce-loop-product__title { + .wc-block-grid__product-title, + .woocommerce-loop-product__title { color: var(--go-heading--color--text); font-display: swap; font-family: var(--go-heading--font-family); @@ -101,11 +101,11 @@ } } - & .star-rating { + .star-rating { margin: 0 auto 0.5em; } - & .price { + .price { color: var(--go-caption--color--text); font-size: var(--go--font-size--small); diff --git a/.dev/assets/shared/css/woocommerce/single-product.scss b/.dev/assets/shared/css/woocommerce/single-product.scss index 7b4ae93a3..d4044e3a4 100644 --- a/.dev/assets/shared/css/woocommerce/single-product.scss +++ b/.dev/assets/shared/css/woocommerce/single-product.scss @@ -2,7 +2,7 @@ &.single-product { - & .product-navigation-wrapper { + .product-navigation-wrapper { display: none; font-size: var(--go--font-size--small); line-height: 1; @@ -13,7 +13,7 @@ display: inline-block; } - & svg { + svg { display: inline-block; position: relative; top: -0.0015em; @@ -21,7 +21,7 @@ width: 1.5rem; } - & .back-to-shop { + .back-to-shop { display: inline-block; text-decoration: none; @@ -29,35 +29,35 @@ display: none; } - & svg { + svg { margin-right: 2px; top: -1px; } } } - & .post-navigation { + .post-navigation { float: right; text-align: right; - & div { + div { display: inline-block; } - & svg { + svg { top: -0.13em; transition: transform 300ms; } - & .nav-previous { + .nav-previous { margin-right: 3px; - & svg { + svg { margin-right: 5px; } } - & .nav-next { + .nav-next { margin-left: 5px; &::before { @@ -72,28 +72,28 @@ } } - & svg { + svg { margin-left: 5px; } } - & .nav-links { + .nav-links { - & .nav-next::before { + .nav-next::before { display: none; } - & .nav-previous + .nav-next::before { + .nav-previous + .nav-next::before { display: inline-block; } } } - & .woocommerce-breadcrumb { + .woocommerce-breadcrumb { display: none; float: left; - & .sep { + .sep { margin: 0 5px; } @@ -101,7 +101,7 @@ display: inline-block; } - & a { + a { color: var(--go-caption--color--text); &:hover { @@ -149,7 +149,7 @@ .single-product .entry-summary { text-align: center; - & .product_title { + .product_title { font-size: var(--go--type-scale-5); } } @@ -170,11 +170,11 @@ color: var(--go-caption--color--text); margin-top: 2.5rem; - & a { + a { color: var(--go-caption--color--text); } - & > span { + > span { display: block; font-size: var(--go--font-size--small); } diff --git a/.dev/assets/shared/css/woocommerce/slideout-menu.scss b/.dev/assets/shared/css/woocommerce/slideout-menu.scss index 6c9246868..6e56bfe83 100644 --- a/.dev/assets/shared/css/woocommerce/slideout-menu.scss +++ b/.dev/assets/shared/css/woocommerce/slideout-menu.scss @@ -6,12 +6,12 @@ body { &.woocommerce-checkout .woocommerce.widget_shopping_cart { - & a.remove_from_cart_button, - & .woocommerce-mini-cart__buttons a.checkout { + a.remove_from_cart_button, + .woocommerce-mini-cart__buttons a.checkout { display: none; } - & .cart_list li { + .cart_list li { padding-left: 0; } } @@ -47,9 +47,9 @@ body { .js-woo-slideout { - & .cart-menu { + .cart-menu { - & .count-holder { + .count-holder { height: 21px; left: 0; overflow: hidden; @@ -58,7 +58,7 @@ body { width: 30px; } - & .count { + .count { animation-duration: 300ms; font-size: 0.8125rem; font-weight: 700; @@ -81,7 +81,7 @@ body { animation-name: scroll-out; } - & svg { + svg { fill: var(--go-navigation--color--text); vertical-align: sub; width: 30px; @@ -113,7 +113,7 @@ body { transform: translateX(0); } - & .site-close-handle { + .site-close-handle { background: transparent; padding: 0; position: absolute; @@ -121,23 +121,23 @@ body { top: -2px; z-index: 10001; - & svg { + svg { width: 25px; } } - & #site-cart { + #site-cart { - & .top { + .top { padding-top: 50px; position: relative; } - & h6.title { + h6.title { margin: 3px 0 0 0; } - & p.subheading { + p.subheading { align-items: center; border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; @@ -147,22 +147,22 @@ body { opacity: 0.66 !important; } - & li.mini_cart_item { + li.mini_cart_item { margin-bottom: 1rem; &:last-child { margin-bottom: 0; } - & img.attachment-woocommerce_thumbnail { + img.attachment-woocommerce_thumbnail { width: 60px; } } - & .cart_list { + .cart_list { padding-bottom: 25px; - & .remove { + .remove { top: 4px; &:not(:hover) { @@ -174,20 +174,20 @@ body { } } - & .woocommerce-Price-amount { + .woocommerce-Price-amount { color: inherit; } } - & .total { + .total { border-top: 3px solid #000; padding: 15px 0 0; } - & p.buttons { + p.buttons { display: flex; - & a { + a { flex: 1; text-align: center; } @@ -197,7 +197,7 @@ body { body.admin-bar { - & #site-nav--cart { + #site-nav--cart { height: calc(100vh - 32px); margin-top: 32px;