From 08ec8d2547d719961cc96fd487963f93b89f4117 Mon Sep 17 00:00:00 2001 From: vedanshujain Date: Mon, 23 Nov 2020 23:42:29 +0530 Subject: [PATCH 1/5] Style fixes for cart page for 2021 theme. --- assets/css/twenty-twenty-one.scss | 92 +++++++++++++++++++++++++++++++ includes/class-woocommerce.php | 3 - 2 files changed, 92 insertions(+), 3 deletions(-) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index 1d86f162d8f..6b4f3851c52 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -2608,3 +2608,95 @@ a.reset_variations { } } } + +.woocommerce { + .woocommerce-notices-wrapper { + & > * { + max-width: 47rem; + margin: auto; + background: var(--global--color-light-gray); + padding: 15px; + list-style: none; + } + } + + .woocommerce-cart-form { + .shop_table_responsive { + max-width: 46rem; + display: block; + margin: auto; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + + th { + border: none; + } + + #coupon_code { + min-width: 9rem; + } + } + } + + .cart-collaterals { + margin: auto; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + max-width: 92rem; + + h2 { + margin-bottom: var(--global--spacing-vertical); + } + + #shipping_method { + list-style: none; + padding-left: 0; + } + + .shipping-calculator-form { + + p { + margin-bottom: 0.5rem; + } + + .select2-container { + + .select2-selection { + height: auto; + } + + .select2-selection__rendered { + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); + color: var(--form--color-text); + height: var(--global--line-height-body); + padding: var(--form--spacing-unit); + } + + .select2-selection__arrow { + height: 100%; + } + } + } + + .wc-proceed-to-checkout { + + a.button { + margin-top: var(--global--spacing-vertical); + float: left; + } + } + + .cross-sells { + + li { + list-style: none; + } + + li > em, + a { + display: inline-block; + } + } + } +} diff --git a/includes/class-woocommerce.php b/includes/class-woocommerce.php index c5313fdbd63..a4059876149 100644 --- a/includes/class-woocommerce.php +++ b/includes/class-woocommerce.php @@ -530,9 +530,6 @@ final class WooCommerce { case 'twentytwenty': include_once WC_ABSPATH . 'includes/theme-support/class-wc-twenty-twenty.php'; break; - case 'twentytwentyone': - include_once WC_ABSPATH . 'includes/theme-support/class-wc-twenty-twenty-one.php'; - break; } } } From 528e7b7d91f8e4cd9c878efb95b2ca2c130163d5 Mon Sep 17 00:00:00 2001 From: vedanshujain Date: Tue, 24 Nov 2020 00:27:10 +0530 Subject: [PATCH 2/5] More style fixes --- assets/css/twenty-twenty-one.scss | 34 +++++++++++++++---------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index 6b4f3851c52..b1ffd5b9a7f 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -2610,21 +2610,33 @@ a.reset_variations { } .woocommerce { + + & > * { + max-width: var( --responsive--alignwide-width ); + display: block; + margin: var(--global--spacing-vertical) auto; + } + .woocommerce-notices-wrapper { + & > * { - max-width: 47rem; - margin: auto; background: var(--global--color-light-gray); padding: 15px; list-style: none; } } + .return-to-shop,.wc-proceed-to-checkout { + a.button { + margin-top: var(--global--spacing-vertical); + float: left; + display: inline-block; + } + } + .woocommerce-cart-form { + .shop_table_responsive { - max-width: 46rem; - display: block; - margin: auto; margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); @@ -2639,10 +2651,6 @@ a.reset_variations { } .cart-collaterals { - margin: auto; - margin-top: var(--global--spacing-vertical); - margin-bottom: var(--global--spacing-vertical); - max-width: 92rem; h2 { margin-bottom: var(--global--spacing-vertical); @@ -2679,14 +2687,6 @@ a.reset_variations { } } - .wc-proceed-to-checkout { - - a.button { - margin-top: var(--global--spacing-vertical); - float: left; - } - } - .cross-sells { li { From a0b999191e890eb9764406e6b4503f3fc4d5f003 Mon Sep 17 00:00:00 2001 From: vedanshujain Date: Tue, 24 Nov 2020 14:26:23 +0530 Subject: [PATCH 3/5] Merge fixups --- assets/css/twenty-twenty-one.scss | 6 ++++-- includes/class-woocommerce.php | 3 +++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index b1ffd5b9a7f..75cef33eb73 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -2609,13 +2609,15 @@ a.reset_variations { } } -.woocommerce { - +.alignwide .woocommerce { & > * { max-width: var( --responsive--alignwide-width ); display: block; margin: var(--global--spacing-vertical) auto; } +} + +.woocommerce { .woocommerce-notices-wrapper { diff --git a/includes/class-woocommerce.php b/includes/class-woocommerce.php index a4059876149..c5313fdbd63 100644 --- a/includes/class-woocommerce.php +++ b/includes/class-woocommerce.php @@ -530,6 +530,9 @@ final class WooCommerce { case 'twentytwenty': include_once WC_ABSPATH . 'includes/theme-support/class-wc-twenty-twenty.php'; break; + case 'twentytwentyone': + include_once WC_ABSPATH . 'includes/theme-support/class-wc-twenty-twenty-one.php'; + break; } } } From ede094bba87843f71d1ef720e72e48ff1f9caed0 Mon Sep 17 00:00:00 2001 From: vedanshujain Date: Tue, 24 Nov 2020 17:12:17 +0530 Subject: [PATCH 4/5] Removed old styles that conflicts with new. --- assets/css/twenty-twenty-one.scss | 273 +----------------------------- 1 file changed, 6 insertions(+), 267 deletions(-) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index 75cef33eb73..f4f60fc17cb 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -186,57 +186,6 @@ a.button { } } -.woocommerce-message, -.woocommerce-error, -.woocommerce-info { - margin-bottom: 5rem; - margin-left: 0; - background: #eee; - font-size: 0.88889em; - font-family: $headings; - list-style: none; - overflow: hidden; -} - -.woocommerce-message, -.woocommerce-error li, -.woocommerce-info { - padding: 1.5rem 3rem; - display: flex; - justify-content: space-between; - align-items: center; - - .button { - order: 2; - } -} - -.woocommerce-message { - background: #eee; - color: $body-color; -} - -.woocommerce-error { - color: #fff; - background: #b22222; - - a { - color: #fff; - - &:hover { - color: #fff; - } - - &.button { - background: #111; - } - } - - > li { - margin: 0; - } -} - #main { .woocommerce-error, @@ -1266,208 +1215,6 @@ a.reset_variations { } } -/** - * Cart - */ -.woocommerce-cart-form { - - img { - max-width: 120px; - height: auto; - display: block; - } - - dl.variation { - margin-top: 1rem; - - dt, - dd, - p { - font-family: $headings; - font-size: 1.4rem; - } - - p, - &:last-child { - margin-bottom: 0; - } - } - - .product-remove { - text-align: center; - } - - .actions { - - .input-text { - width: 280px !important; - float: left; - margin-right: 0.25rem; - border: 1px solid #ddd; - padding-top: 1.7rem; - padding-bottom: 1.9rem; - } - - .button { - background: #f9f9f9; - border: 1px solid #555; - color: #555; - } - - button[name="update_cart"] { - background: #fff; - color: #000; - } - } - - .quantity { - - input { - width: 8rem; - border: 1px solid #eee; - } - } - - table { - border: 0; - - th, - tbody, - td { - border: 0; - } - - td.product-thumbnail { - padding: 1.4rem; - width: 10%; - - img { - height: auto !important; - } - } - - td.product-name { - padding-left: 1.5vw; - } - - tbody { - - tr { - border-top: 1px solid #eee; - } - } - - input.qty { - display: inline-block; - } - } - - .actions { - - button { - padding-top: 1.55rem; - padding-bottom: 1.59rem; - font-size: 1.6rem; - } - } -} - -.cart_totals { - - th, - td { - vertical-align: top; - } - - th { - padding-right: 1rem; - } - - .woocommerce-shipping-destination { - margin-bottom: 1.5rem; - font-family: $headings; - } - - table { - border: 0; - - tbody, - th, - tr, - td { - border: 0; - padding: 1rem; - } - - th { - width: 33%; - } - } - - .checkout-button { - width: 100%; - } - - input[type="radio"].shipping_method { - display: none; - - & + label { - - &::before { - content: ""; - display: inline-block; - width: 14px; - height: 14px; - border: 2px solid #fff; - box-shadow: 0 0 0 2px #6d6d6d; - background: #fff; - margin-left: 4px; - margin-right: 1.2rem; - border-radius: 100%; - transform: translateY(2px); - } - } - - &:checked + label { - - &::before { - background: #555; - } - } - } -} - -.shipping-calculator-button { - margin-top: 0.5rem; - display: inline-block; -} - -.shipping-calculator-form { - margin: 1rem 0 0 0; -} - -#shipping_method { - list-style: none; - margin: 0; - padding: 0 0 1.5rem; - font-family: $headings; - - li { - margin-bottom: 0.5rem; - margin-left: 0; - - input { - float: left; - margin-top: 0.5rem; - margin-right: 0.6rem; - } - - label { - line-height: 2.5rem; - } - } -} - .checkout-button { display: block; padding: 1rem 2rem; @@ -1505,20 +1252,9 @@ a.reset_variations { } } - .select2-container .select2-selection--single { - height: 48px; - } - .select2-container .select2-selection--single .select2-selection__rendered { - line-height: 48px; font-family: $headings; - font-size: 1.6rem; color: #000; - padding-left: 1.8rem; - } - - .select2-container--default .select2-selection--single .select2-selection__arrow { - height: 46px; } .select2-container--focus .select2-selection { @@ -2007,7 +1743,7 @@ a.reset_variations { } input[type=checkbox] { - width: 25px !important; + width: 25px !important; } } @@ -2610,8 +2346,9 @@ a.reset_variations { } .alignwide .woocommerce { + & > * { - max-width: var( --responsive--alignwide-width ); + max-width: var(--responsive--alignwide-width); display: block; margin: var(--global--spacing-vertical) auto; } @@ -2628,7 +2365,9 @@ a.reset_variations { } } - .return-to-shop,.wc-proceed-to-checkout { + .return-to-shop, + .wc-proceed-to-checkout { + a.button { margin-top: var(--global--spacing-vertical); float: left; From fb4b9db3f1bf8dbbc04be98331ae75003442480e Mon Sep 17 00:00:00 2001 From: Jonathan Sadowski Date: Tue, 24 Nov 2020 14:48:17 -0600 Subject: [PATCH 5/5] Remove cart padding; set proceed to checkout button width to 100% --- assets/css/twenty-twenty-one.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index eeba42f1e87..d2be0569a2e 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -1308,7 +1308,6 @@ a.reset_variations { .woocommerce { max-width: var(--responsive--alignwide-width); - padding: 0 5vw; margin: 0 auto; } @@ -2458,6 +2457,7 @@ a.reset_variations { margin-top: var(--global--spacing-vertical); float: left; display: inline-block; + width: 100%; } }