From b92c5285403aa6ff6a1576fe1837ce3d98621167 Mon Sep 17 00:00:00 2001 From: Jonathan Sadowski Date: Sun, 22 Nov 2020 22:44:56 -0600 Subject: [PATCH 1/7] 2021 Compat: Update the style of the "sale" badge --- assets/css/twenty-twenty-one.scss | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index 1d86f162d8f..30f587ccc78 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -8,7 +8,7 @@ $headings: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, sans- $body: nonbreakingspaceoverride, "Hoefler Text", garamond, "Times New Roman", serif; $body-color: currentColor; -$highlights-color: #cd2653; +$highlights-color: #88a171; /** * Fonts @@ -156,8 +156,8 @@ a.button { .onsale { position: absolute; - top: 0; - left: 0; + top: -0.7rem; + right: -0.7rem; display: inline-block; background: $highlights-color; color: #fff; @@ -165,10 +165,14 @@ a.button { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; - line-height: 1.2; - padding: 1rem; - text-transform: uppercase; + line-height: 4rem; z-index: 1; + border-radius: 50%; + height: 4.2rem; + width: 4.2rem; + text-align: center; + padding: 0; + margin: 0; } .price { @@ -2157,7 +2161,7 @@ a.reset_variations { ul.products[class*=columns-] { li.product { - width: 100%; + width: auto; } } } @@ -2185,7 +2189,9 @@ a.reset_variations { .onsale { font-size: 1.2rem; - padding: 1rem; + height: 4.2rem; + width: 4.2rem; + line-height: 4rem; } } } @@ -2428,7 +2434,9 @@ a.reset_variations { .onsale { font-size: 1rem; - padding: 0.8rem; + width: 3.4rem; + height: 3.4rem; + line-height: 3.2rem; } } @@ -2581,7 +2589,9 @@ a.reset_variations { .onsale { font-size: 1.2rem; - padding: 1rem; + height: 4.2rem; + width: 4.2rem; + line-height: 4rem; } } From 6240b412151d33130e47e48f2f7d7c051736cb90 Mon Sep 17 00:00:00 2001 From: Jonathan Sadowski Date: Mon, 23 Nov 2020 10:41:01 -0600 Subject: [PATCH 2/7] Update badge to have dynamic width --- assets/css/twenty-twenty-one.scss | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index 30f587ccc78..f6b2bb67e2d 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -158,21 +158,28 @@ a.button { position: absolute; top: -0.7rem; right: -0.7rem; - display: inline-block; background: $highlights-color; color: #fff; font-family: $headings; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; - line-height: 4rem; z-index: 1; border-radius: 50%; - height: 4.2rem; - width: 4.2rem; text-align: center; - padding: 0; + padding: 0.8rem; margin: 0; + display: inline-flex; + align-items: center; + justify-content: center; + + &::after { + content: ''; + display: block; + height: 0; + width: 100%; + padding-bottom: 100%; + } } .price { @@ -2189,9 +2196,6 @@ a.reset_variations { .onsale { font-size: 1.2rem; - height: 4.2rem; - width: 4.2rem; - line-height: 4rem; } } } @@ -2434,9 +2438,6 @@ a.reset_variations { .onsale { font-size: 1rem; - width: 3.4rem; - height: 3.4rem; - line-height: 3.2rem; } } @@ -2589,9 +2590,6 @@ a.reset_variations { .onsale { font-size: 1.2rem; - height: 4.2rem; - width: 4.2rem; - line-height: 4rem; } } From a9601fbebf7848f17054ff2236b298734d24f377 Mon Sep 17 00:00:00 2001 From: Christopher Allford Date: Mon, 23 Nov 2020 21:26:31 -0800 Subject: [PATCH 3/7] Added appropriate styling to checkout page --- assets/css/twenty-twenty-one.scss | 142 +++++++++++++++++------------- 1 file changed, 82 insertions(+), 60 deletions(-) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index f6b2bb67e2d..cfe79ae7e14 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -200,9 +200,9 @@ a.button { .woocommerce-message, .woocommerce-error, .woocommerce-info { - margin-bottom: 5rem; + margin-bottom: 2rem; margin-left: 0; - background: #eee; + background: var(--global--color-background); font-size: 0.88889em; font-family: $headings; list-style: none; @@ -1429,8 +1429,7 @@ a.reset_variations { display: inline-block; width: 14px; height: 14px; - border: 2px solid #fff; - box-shadow: 0 0 0 2px #6d6d6d; + border: var(--form--border-width) solid var(--form--border-color); background: #fff; margin-left: 4px; margin-right: 1.2rem; @@ -1442,7 +1441,7 @@ a.reset_variations { &:checked + label { &::before { - background: #555; + background: var(--global--color-background); } } } @@ -1460,11 +1459,9 @@ a.reset_variations { #shipping_method { list-style: none; margin: 0; - padding: 0 0 1.5rem; font-family: $headings; li { - margin-bottom: 0.5rem; margin-left: 0; input { @@ -1475,6 +1472,7 @@ a.reset_variations { label { line-height: 2.5rem; + margin-bottom: 0; } } } @@ -1520,20 +1518,28 @@ a.reset_variations { height: 48px; } + .select2-container .select2-dropdown { + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); + border-top: none; + } + .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 .select2-selection { + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } - .select2-container--focus .select2-selection { - border-color: #000; + .select2-container--focus .select2-selection,.select2-container--open .select2-selection { + outline-offset: 2px; + outline: 2px dotted var(--form--border-color); } .select2-results__option { @@ -1543,7 +1549,7 @@ a.reset_variations { .select2-container { .select2-search__field { - height: 4rem; + height: 3rem; background: #eee; } } @@ -1559,6 +1565,39 @@ a.reset_variations { /** * Checkout */ +.woocommerce-form-coupon-toggle .woocommerce-info { + display: block; + margin-bottom: 2rem; + padding: 1rem; +} +.woocommerce-form-coupon { + background: #eee; + padding: 1rem; + font-size: 0.88889em; + color: var(--form--color-text); + + #coupon_code { + border: var(--form--border-width) solid var(--form--border-color); + } + + button[name="apply_coupon"] { + padding: 0.5rem; + border: var(--button--border-width) solid var(--button--color-text); + background: var(--button--color-text); + color: var(--button--color-background); + + &:active { + color: var(--button--color-background-active); + background: transparent; + } + + &:hover { + color: var(--button--color-background-active); + background: transparent; + } + } +} + #ship-to-different-address { font-size: 1em; display: inline-block; @@ -1579,8 +1618,8 @@ a.reset_variations { display: block; height: 16px; width: 30px; - border: 2px solid #bbb; - background: #bbb; + border: 2px solid var(--form--border-color); + background: var(--global--color-primary); border-radius: 13rem; box-sizing: content-box; transition: all ease-in-out 0.3s; @@ -1594,7 +1633,7 @@ a.reset_variations { display: block; width: 14px; height: 14px; - background: #fff; + background: var(--global--color-background); position: absolute; top: 3px; right: 17px; @@ -1609,11 +1648,11 @@ a.reset_variations { input[type="checkbox"]:checked + span::after { right: 3px; + background: var(--global--color-primary); } input[type="checkbox"]:checked + span::before { - border-color: #000; - background: #000; + background: var(--global--color-background); } } } @@ -1681,7 +1720,7 @@ a.reset_variations { .woocommerce-billing-fields { h3 { - margin-top: 4rem; + margin: 2rem 0; } } @@ -1708,10 +1747,6 @@ a.reset_variations { width: 100%; } - input { - border: 1px solid #ddd; - } - label { font-family: $headings; letter-spacing: normal; @@ -1723,7 +1758,7 @@ a.reset_variations { } #order_review_heading { - margin-top: 4rem; + margin-top: 2rem; } #order_review_heading, @@ -1734,7 +1769,7 @@ a.reset_variations { clear: right; .woocommerce-checkout-review-order-table { - margin-top: 2.85rem; + margin-top: 2rem; border: 0; th, @@ -1746,19 +1781,13 @@ a.reset_variations { display: none; } - tbody::after { - content: ""; - display: block; - height: 2rem; - } - .woocommerce-Price-amount { font-weight: bold; } .cart-subtotal, .order-total { - border-top: 1px solid #ddd; + border-top: 2px solid var(--form--border-color); } } } @@ -1815,18 +1844,6 @@ a.reset_variations { } } - input#coupon_code { - padding-top: 1.55rem; - padding-bottom: 1.59rem; - border: 1px solid #ddd; - } - - button[name="apply_coupon"] { - padding-top: 1.55rem; - padding-bottom: 1.8rem; - font-size: 1.6rem; - } - .select2-choice, .select2-choice:hover { box-shadow: none !important; @@ -1842,18 +1859,26 @@ a.reset_variations { .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 .select2-selection { + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); + } + + .select2-container .select2-dropdown { + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); + border-top: none; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } - .select2-container--focus .select2-selection { - border-color: #000; + .select2-container--focus .select2-selection,.select2-container--open .select2-selection { + outline-offset: 2px; + outline: 2px dotted var(--form--border-color); } .select2-results__option { @@ -1863,7 +1888,7 @@ a.reset_variations { .select2-container { .select2-search__field { - height: 4rem; + height: 3rem; background: #eee; } } @@ -1881,8 +1906,7 @@ a.reset_variations { display: inline-block; width: 14px; height: 14px; - border: 2px solid #fff; - box-shadow: 0 0 0 2px #6d6d6d; + border: var(--form--border-width) solid var(--form--border-color); background: #fff; margin-left: 4px; margin-right: 1.2rem; @@ -1894,7 +1918,7 @@ a.reset_variations { &:checked + label { &::before { - background: #555; + background: var(--global--color-background); } } } @@ -2048,8 +2072,7 @@ a.reset_variations { display: inline-block; width: 14px; height: 14px; - border: 2px solid #fff; - box-shadow: 0 0 0 2px #6d6d6d; + border: var(--form--border-width) solid var(--form--border-color); background: #fff; margin-left: 4px; margin-right: 1.2rem; @@ -2061,7 +2084,7 @@ a.reset_variations { &:checked + label { &::before { - background: #555; + background: var(--global--color-background); } } } @@ -2073,7 +2096,6 @@ a.reset_variations { p { font-family: $headings; - font-size: 1.6rem; } } } @@ -2352,7 +2374,7 @@ a.reset_variations { } #order_review_heading { - margin-top: 4rem; + margin-top: 2rem; } #order_review_heading, From 9d612269875118bd80ff7b0dd14adefb7280835d Mon Sep 17 00:00:00 2001 From: Christopher Allford Date: Mon, 23 Nov 2020 21:50:19 -0800 Subject: [PATCH 4/7] Fixed the apply_coupon button --- assets/css/twenty-twenty-one.scss | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index cfe79ae7e14..c49fe3c3ef4 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -1582,19 +1582,7 @@ a.reset_variations { button[name="apply_coupon"] { padding: 0.5rem; - border: var(--button--border-width) solid var(--button--color-text); - background: var(--button--color-text); - color: var(--button--color-background); - - &:active { - color: var(--button--color-background-active); - background: transparent; - } - - &:hover { - color: var(--button--color-background-active); - background: transparent; - } + } } From fa47b118168b1f68f6628b6fb705b104eeaff5a2 Mon Sep 17 00:00:00 2001 From: Christopher Allford Date: Tue, 24 Nov 2020 10:19:24 -0800 Subject: [PATCH 5/7] Adjusted the checkbox visibility --- assets/css/twenty-twenty-one.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index c49fe3c3ef4..7b700481d24 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -1441,7 +1441,7 @@ a.reset_variations { &:checked + label { &::before { - background: var(--global--color-background); + background: var(--global--color-border); } } } @@ -1582,7 +1582,6 @@ a.reset_variations { button[name="apply_coupon"] { padding: 0.5rem; - } } @@ -1906,7 +1905,7 @@ a.reset_variations { &:checked + label { &::before { - background: var(--global--color-background); + background: var(--global--color-border); } } } @@ -2072,7 +2071,7 @@ a.reset_variations { &:checked + label { &::before { - background: var(--global--color-background); + background: var(--global--color-border); } } } From 4795ee86ddfbe4640a5066b0478fd83dabc5f9f3 Mon Sep 17 00:00:00 2001 From: Christopher Allford Date: Tue, 24 Nov 2020 10:35:10 -0800 Subject: [PATCH 6/7] Adjusted the checkbox --- assets/css/twenty-twenty-one.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index 7b700481d24..8487635fbd9 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -1326,8 +1326,8 @@ a.reset_variations { } button[name="update_cart"] { - background: #fff; - color: #000; + background: var(--global--color-white); + color: var(--global--color-black); } } @@ -1430,7 +1430,7 @@ a.reset_variations { width: 14px; height: 14px; border: var(--form--border-width) solid var(--form--border-color); - background: #fff; + background: var(--global--color-white); margin-left: 4px; margin-right: 1.2rem; border-radius: 100%; @@ -1894,7 +1894,7 @@ a.reset_variations { width: 14px; height: 14px; border: var(--form--border-width) solid var(--form--border-color); - background: #fff; + background: var(--global--color-white); margin-left: 4px; margin-right: 1.2rem; border-radius: 100%; @@ -2060,7 +2060,7 @@ a.reset_variations { width: 14px; height: 14px; border: var(--form--border-width) solid var(--form--border-color); - background: #fff; + background: var(--global--color-white); margin-left: 4px; margin-right: 1.2rem; border-radius: 100%; From 3921ac3b50f5086394988cda49cfd4de2a44a740 Mon Sep 17 00:00:00 2001 From: Christopher Allford Date: Tue, 24 Nov 2020 11:08:44 -0800 Subject: [PATCH 7/7] Adjusted the dark mode --- assets/css/twenty-twenty-one.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss index 8487635fbd9..31e853111e3 100644 --- a/assets/css/twenty-twenty-one.scss +++ b/assets/css/twenty-twenty-one.scss @@ -1443,6 +1443,10 @@ a.reset_variations { &::before { background: var(--global--color-border); } + + .is-dark-theme &::before { + background: var(--global--color-background); + } } } } @@ -1582,6 +1586,15 @@ a.reset_variations { button[name="apply_coupon"] { padding: 0.5rem; + + .is-dark-theme & { + border-color: var(--global--color-background); + + &:hover, + &:active { + background: var(--global--color-background); + } + } } } @@ -1907,6 +1920,10 @@ a.reset_variations { &::before { background: var(--global--color-border); } + + .is-dark-theme &::before { + background: var(--global--color-background); + } } } @@ -2073,6 +2090,10 @@ a.reset_variations { &::before { background: var(--global--color-border); } + + .is-dark-theme &::before { + background: var(--global--color-background); + } } } }