Update spacing below product media (#1689)

* Update spacing below product media * Update visible * Remove extra spacing * Update desktop layout
Shopify · May 18, 2022 · 1f08866 · 1f08866
1 parent af7ecee
commit 1f08866
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
diff --git 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
@@ -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/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);
   }
@@ -503,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),

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -81,6 +81,7 @@
         --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;