From 7ab34d9586a17104647e60c1ebb20f64fb79ae41 Mon Sep 17 00:00:00 2001 From: LucasLacerdaUX Date: Thu, 12 May 2022 09:31:16 -0400 Subject: [PATCH 1/4] Update spacing below product media --- assets/section-main-product.css | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/section-main-product.css b/assets/section-main-product.css index 55030dac022..bcc2b3e33f1 100644 --- a/assets/section-main-product.css +++ b/assets/section-main-product.css @@ -472,7 +472,6 @@ a.product__text { @media screen and (max-width: 749px) { .product__media-list { margin-left: -2.5rem; - padding-bottom: 2rem; margin-bottom: 3rem; width: calc(100% + 4rem); } From 7aad8ab5c8148e168dac0cdb814c7f87051ae379 Mon Sep 17 00:00:00 2001 From: LucasLacerdaUX Date: Thu, 12 May 2022 10:25:03 -0400 Subject: [PATCH 2/4] Update visible --- assets/base.css | 1 + assets/component-slider.css | 4 ++-- layout/theme.liquid | 2 ++ 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/assets/base.css b/assets/base.css index 1e228f09389..4cf252661d8 100644 --- a/assets/base.css +++ b/assets/base.css @@ -186,6 +186,7 @@ --shadow-vertical-offset: var(--media-shadow-vertical-offset); --shadow-blur-radius: var(--media-shadow-blur-radius); --shadow-opacity: var(--media-shadow-opacity); + --shadow-visible: var(--media-shadow-visible); } /* base */ diff --git a/assets/component-slider.css b/assets/component-slider.css index 22f1e0d8619..d04fc899d00 100644 --- a/assets/component-slider.css +++ b/assets/component-slider.css @@ -28,8 +28,8 @@ slider-component.slider-component-full-width { .slider__slide { --focus-outline-padding: 0.5rem; - --shadow-padding-top: calc(var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)); - --shadow-padding-bottom: calc(var(--shadow-vertical-offset) + var(--shadow-blur-radius)); + --shadow-padding-top: calc((var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible)); + --shadow-padding-bottom: calc((var(--shadow-vertical-offset) + var(--shadow-blur-radius)) * var(--shadow-visible)); scroll-snap-align: start; flex-shrink: 0; padding-bottom: 0; diff --git a/layout/theme.liquid b/layout/theme.liquid index 088b81acf20..d311dfa8096 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -81,6 +81,8 @@ --media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px; --media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px; --media-shadow-blur-radius: {{ settings.media_shadow_blur }}px; + --media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %}; + --page-width: {{ settings.page_width | divided_by: 10 }}rem; --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem; From 0801fb158cdcc263a59a82769f931ebb4e687ddf Mon Sep 17 00:00:00 2001 From: LucasLacerdaUX Date: Thu, 12 May 2022 10:38:40 -0400 Subject: [PATCH 3/4] Remove extra spacing --- layout/theme.liquid | 1 - 1 file changed, 1 deletion(-) diff --git a/layout/theme.liquid b/layout/theme.liquid index d311dfa8096..49521cba180 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -83,7 +83,6 @@ --media-shadow-blur-radius: {{ settings.media_shadow_blur }}px; --media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %}; - --page-width: {{ settings.page_width | divided_by: 10 }}rem; --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem; From a333e3521e25d5b5bf16b64bce8e600e92014e4b Mon Sep 17 00:00:00 2001 From: LucasLacerdaUX Date: Mon, 16 May 2022 10:11:34 -0400 Subject: [PATCH 4/4] Update desktop layout --- assets/section-main-product.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/section-main-product.css b/assets/section-main-product.css index bcc2b3e33f1..c392fb37b1b 100644 --- a/assets/section-main-product.css +++ b/assets/section-main-product.css @@ -502,11 +502,11 @@ a.product__text { @media screen and (min-width: 750px) { .product--thumbnail .product__media-list, .product--thumbnail_slider .product__media-list { - padding-bottom: var(--media-shadow-vertical-offset); + padding-bottom: calc(var(--media-shadow-vertical-offset) * var(--media-shadow-visible)); } .product__media-list { - padding-right: var(--media-shadow-horizontal-offset); + padding-right: calc(var(--media-shadow-horizontal-offset) * var(--media-shadow-visible)); } .product--thumbnail .product__media-item:not(.is-active),