From 2cb7a1abc258e7bcbd35ad951eea24076c9a802b Mon Sep 17 00:00:00 2001 From: Sofia Matulis Date: Thu, 18 Nov 2021 14:11:56 -0500 Subject: [PATCH] Clean up popup drawer feed (#902) --- assets/base.css | 12 ++++-------- assets/component-cart-notification.css | 12 ++++-------- assets/component-facets.css | 24 ++++++++---------------- assets/component-menu-drawer.css | 12 ++++-------- assets/component-pickup-availability.css | 12 ++++-------- assets/component-predictive-search.css | 12 ++++-------- assets/disclosure.css | 12 ++++-------- assets/section-main-product.css | 12 ++++-------- 8 files changed, 36 insertions(+), 72 deletions(-) diff --git a/assets/base.css b/assets/base.css index 3f5affba306..db6c12ab83f 100644 --- a/assets/base.css +++ b/assets/base.css @@ -2323,19 +2323,15 @@ details[open] > .header__icon--menu .icon-hamburger { } .header__submenu.list-menu--disclosure { - --shadow-horizontal-offset: var(--popup-drawer-shadow-horizontal-offset); - --shadow-vertical-offset: var(--popup-drawer-shadow-vertical-offset); - --shadow-blur-radius: var(--popup-drawer-shadow-blur-radius); - --shadow-opacity: var(--popup-drawer-shadow-opacity); border-radius: var(--popup-drawer-corner-radius); border-color: rgba(var(--color-foreground), var(--popup-drawer-border-opacity)); border-style: solid; border-width: var(--popup-drawer-border-width); filter: drop-shadow( - var(--shadow-horizontal-offset) - var(--shadow-vertical-offset) - var(--shadow-blur-radius) - rgba(var(--color-foreground), var(--shadow-opacity)) + var(--popup-drawer-shadow-horizontal-offset) + var(--popup-drawer-shadow-vertical-offset) + var(--popup-drawer-shadow-blur-radius) + rgba(var(--color-foreground), var(--popup-drawer-shadow-opacity)) ); } diff --git a/assets/component-cart-notification.css b/assets/component-cart-notification.css index a7e8cbbd6e1..d65fa5ac7aa 100644 --- a/assets/component-cart-notification.css +++ b/assets/component-cart-notification.css @@ -7,10 +7,6 @@ } .cart-notification { - --shadow-horizontal-offset: var(--popup-drawer-shadow-horizontal-offset); - --shadow-vertical-offset: var(--popup-drawer-shadow-vertical-offset); - --shadow-blur-radius: var(--popup-drawer-shadow-blur-radius); - --shadow-opacity: var(--popup-drawer-shadow-opacity); border-bottom-right-radius: var(--popup-drawer-corner-radius); border-bottom-left-radius: var(--popup-drawer-corner-radius); background-color: rgb(var(--color-background)); @@ -25,10 +21,10 @@ width: 100%; z-index: -1; filter: drop-shadow( - var(--shadow-horizontal-offset) - var(--shadow-vertical-offset) - var(--shadow-blur-radius) - rgba(var(--color-foreground), var(--shadow-opacity)) + var(--popup-drawer-shadow-horizontal-offset) + var(--popup-drawer-shadow-vertical-offset) + var(--popup-drawer-shadow-blur-radius) + rgba(var(--color-foreground), var(--popup-drawer-shadow-opacity)) ); } diff --git a/assets/component-facets.css b/assets/component-facets.css index ca44d788c54..370e6974a31 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -211,19 +211,15 @@ } .facets__display { - --shadow-horizontal-offset: var(--popup-drawer-shadow-horizontal-offset); - --shadow-vertical-offset: var(--popup-drawer-shadow-vertical-offset); - --shadow-blur-radius: var(--popup-drawer-shadow-blur-radius); - --shadow-opacity: var(--popup-drawer-shadow-opacity); border-width: var(--popup-drawer-border-width); border-style: solid; border-color: rgba(var(--color-foreground), var(--popup-drawer-border-opacity)); border-radius: var(--popup-drawer-corner-radius); filter: drop-shadow( - var(--shadow-horizontal-offset) - var(--shadow-vertical-offset) - var(--shadow-blur-radius) - rgba(var(--color-foreground), var(--shadow-opacity)) + var(--popup-drawer-shadow-horizontal-offset) + var(--popup-drawer-shadow-vertical-offset) + var(--popup-drawer-shadow-blur-radius) + rgba(var(--color-foreground), var(--popup-drawer-shadow-opacity)) ); background-color: rgb(var(--color-background)); position: absolute; @@ -518,10 +514,6 @@ a.active-facets__button.focused .active-facets__button-inner, } .mobile-facets__inner { - --shadow-horizontal-offset: var(--popup-drawer-shadow-horizontal-offset); - --shadow-vertical-offset: var(--popup-drawer-shadow-vertical-offset); - --shadow-blur-radius: var(--popup-drawer-shadow-blur-radius); - --shadow-opacity: var(--popup-drawer-shadow-opacity); background-color: rgb(var(--color-background)); width: calc(100% - 5rem); margin-left: auto; @@ -536,10 +528,10 @@ a.active-facets__button.focused .active-facets__button-inner, border-style: solid; border-width: 0 0 0 var(--popup-drawer-border-width); filter: drop-shadow( - var(--shadow-horizontal-offset) - var(--shadow-vertical-offset) - var(--shadow-blur-radius) - rgba(var(--color-foreground), var(--shadow-opacity)) + var(--popup-drawer-shadow-horizontal-offset) + var(--popup-drawer-shadow-vertical-offset) + var(--popup-drawer-shadow-blur-radius) + rgba(var(--color-foreground), var(--popup-drawer-shadow-opacity)) ); } diff --git a/assets/component-menu-drawer.css b/assets/component-menu-drawer.css index c263b06313d..8530a5f6546 100644 --- a/assets/component-menu-drawer.css +++ b/assets/component-menu-drawer.css @@ -29,10 +29,6 @@ menu-drawer > details[open] > summary::before { } .menu-drawer { - --shadow-horizontal-offset: var(--popup-drawer-shadow-horizontal-offset); - --shadow-vertical-offset: var(--popup-drawer-shadow-vertical-offset); - --shadow-blur-radius: var(--popup-drawer-shadow-blur-radius); - --shadow-opacity: var(--popup-drawer-shadow-opacity); position: absolute; transform: translateX(-100%); visibility: hidden; @@ -47,10 +43,10 @@ menu-drawer > details[open] > summary::before { border-style: solid; border-color: rgba(var(--color-foreground), var(--popup-drawer-border-opacity)); filter: drop-shadow( - var(--shadow-horizontal-offset) - var(--shadow-vertical-offset) - var(--shadow-blur-radius) - rgba(var(--color-foreground), var(--shadow-opacity)) + var(--popup-drawer-shadow-horizontal-offset) + var(--popup-drawer-shadow-vertical-offset) + var(--popup-drawer-shadow-blur-radius) + rgba(var(--color-foreground), var(--popup-drawer-shadow-opacity)) ); } diff --git a/assets/component-pickup-availability.css b/assets/component-pickup-availability.css index f2964dfb07b..e97c8aa4565 100644 --- a/assets/component-pickup-availability.css +++ b/assets/component-pickup-availability.css @@ -41,10 +41,6 @@ pickup-availability[available] { } pickup-availability-drawer { - --shadow-horizontal-offset: var(--popup-drawer-shadow-horizontal-offset); - --shadow-vertical-offset: var(--popup-drawer-shadow-vertical-offset); - --shadow-blur-radius: var(--popup-drawer-shadow-blur-radius); - --shadow-opacity: var(--popup-drawer-shadow-opacity); background-color: rgb(var(--color-background)); height: 100%; opacity: 0; @@ -62,10 +58,10 @@ pickup-availability-drawer { border-color: rgba(var(--color-foreground), var(--popup-drawer-border-opacity)); border-style: solid; filter: drop-shadow( - var(--shadow-horizontal-offset) - var(--shadow-vertical-offset) - var(--shadow-blur-radius) - rgba(var(--color-foreground), var(--shadow-opacity)) + var(--popup-drawer-shadow-horizontal-offset) + var(--popup-drawer-shadow-vertical-offset) + var(--popup-drawer-shadow-blur-radius) + rgba(var(--color-foreground), var(--popup-drawer-shadow-opacity)) ); } diff --git a/assets/component-predictive-search.css b/assets/component-predictive-search.css index be5c8032486..17f338b3676 100644 --- a/assets/component-predictive-search.css +++ b/assets/component-predictive-search.css @@ -1,8 +1,4 @@ .predictive-search { - --shadow-horizontal-offset: var(--popup-drawer-shadow-horizontal-offset); - --shadow-vertical-offset: var(--popup-drawer-shadow-vertical-offset); - --shadow-blur-radius: var(--popup-drawer-shadow-blur-radius); - --shadow-opacity: var(--popup-drawer-shadow-opacity); display: none; position: absolute; top: calc(100% + 0.1rem); @@ -15,10 +11,10 @@ border-bottom-right-radius: var(--popup-drawer-corner-radius); border-bottom-left-radius: var(--popup-drawer-corner-radius); filter: drop-shadow( - var(--shadow-horizontal-offset) - var(--shadow-vertical-offset) - var(--shadow-blur-radius) - rgba(var(--color-foreground), var(--shadow-opacity)) + var(--popup-drawer-shadow-horizontal-offset) + var(--popup-drawer-shadow-vertical-offset) + var(--popup-drawer-shadow-blur-radius) + rgba(var(--color-foreground), var(--popup-drawer-shadow-opacity)) ); } diff --git a/assets/disclosure.css b/assets/disclosure.css index 048f77740e1..e63077ee724 100644 --- a/assets/disclosure.css +++ b/assets/disclosure.css @@ -13,10 +13,6 @@ } .disclosure__list { - --shadow-horizontal-offset: var(--popup-drawer-shadow-horizontal-offset); - --shadow-vertical-offset: var(--popup-drawer-shadow-vertical-offset); - --shadow-blur-radius: var(--popup-drawer-shadow-blur-radius); - --shadow-opacity: var(--popup-drawer-shadow-opacity); border-width: var(--popup-drawer-border-width); border-style: solid; border-color: rgba(var(--color-foreground), var(--popup-drawer-border-opacity)); @@ -37,10 +33,10 @@ background-color: rgb(var(--color-background)); border-radius: var(--popup-drawer-corner-radius); filter: drop-shadow( - var(--shadow-horizontal-offset) - var(--shadow-vertical-offset) - var(--shadow-blur-radius) - rgba(var(--color-foreground), var(--shadow-opacity)) + var(--popup-drawer-shadow-horizontal-offset) + var(--popup-drawer-shadow-vertical-offset) + var(--popup-drawer-shadow-blur-radius) + rgba(var(--color-foreground), var(--popup-drawer-shadow-opacity)) ); } diff --git a/assets/section-main-product.css b/assets/section-main-product.css index 4907a665e67..2b3ec4e3181 100644 --- a/assets/section-main-product.css +++ b/assets/section-main-product.css @@ -797,10 +797,6 @@ a.product__text { } .product-popup-modal__content { - --shadow-horizontal-offset: var(--popup-drawer-shadow-horizontal-offset); - --shadow-vertical-offset: var(--popup-drawer-shadow-vertical-offset); - --shadow-blur-radius: var(--popup-drawer-shadow-blur-radius); - --shadow-opacity: var(--popup-drawer-shadow-opacity); border-radius: var(--popup-drawer-corner-radius); background-color: rgb(var(--color-background)); overflow: auto; @@ -817,10 +813,10 @@ a.product__text { border-style: solid; border-width: var(--popup-drawer-border-width); filter: drop-shadow( - var(--shadow-horizontal-offset) - var(--shadow-vertical-offset) - var(--shadow-blur-radius) - rgba(var(--color-foreground), var(--shadow-opacity)) + var(--popup-drawer-shadow-horizontal-offset) + var(--popup-drawer-shadow-vertical-offset) + var(--popup-drawer-shadow-blur-radius) + rgba(var(--color-foreground), var(--popup-drawer-shadow-opacity)) ); }