Add release/v10.0.0 branch fixes to main (Shopify#2693)

* Fix color for image in password (Shopify#2608) * [Image behavior] fixed background jitter fix on mobile (Shopify#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (Shopify#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (Shopify#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (Shopify#2621) * Update reverse scheme (Shopify#2626) * [Footer] Remove Global Media settings inheritance from images (Shopify#2631) * Send timezone offset as string instead of integer (Shopify#2636) * Fix slider scrolling issue (Shopify#2635) * Fix background gradient for Related Products. (Shopify#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (Shopify#2657) * Add default values for color scheme group (Shopify#2660) * Revert unwanted changes (Shopify#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (Shopify#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (Shopify#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <[email protected]> * Gradient fix for transparent background medias and cards (Shopify#2651) * Fix media, product, and collection cards placeholder (Shopify#2682) * Fix missing else for collection cards (Shopify#2692) --------- Co-authored-by: Sofia Matulis <[email protected]> Co-authored-by: Eugene Kasimov <[email protected]> Co-authored-by: Mateusz Krzeszowiak <[email protected]> Co-authored-by: Lucas Lacerda <[email protected]> Co-authored-by: Kjell Reigstad <[email protected]> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <[email protected]> Co-authored-by: Andrew Etchen <[email protected]>
Gravytrain-UK · Jun 6, 2023 · 632fd30 · 632fd30
1 parent f417600
commit 632fd30
Show file tree

Hide file tree

Showing 55 changed files with 433 additions and 437 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -978,8 +978,8 @@ summary::-webkit-details-marker {
     margin: 0;
   }
 
-  .slider--tablet .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in,
-  .slider--mobile .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
+  .slider.slider--tablet .scroll-trigger.animate--slide-in,
+  .slider.slider--mobile .scroll-trigger.animate--slide-in {
     animation: none;
     opacity: 1;
     transform: inherit;
@@ -1016,7 +1016,7 @@ summary::-webkit-details-marker {
     max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
   }
 
-  .slider--desktop .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
+  .slider.slider--desktop .scroll-trigger.animate--slide-in {
     animation: none;
     opacity: 1;
     transform: inherit;
@@ -2137,12 +2137,12 @@ product-info .loading-overlay:not(.hidden) ~ *,
 }
 
 .announcement-bar .slider-button--next {
-  margin-right: -1.6rem;
+  margin-right: -1.5rem;
   min-width: 44px;
 }
 
 .announcement-bar .slider-button--prev {
-  margin-left: -1.6rem;
+  margin-left: -1.5rem;
   min-width: 44px;
 }
 
@@ -2154,11 +2154,11 @@ product-info .loading-overlay:not(.hidden) ~ *,
 
 @media screen and (min-width: 750px) {
   .announcement-bar .slider-button--next {
-    margin-right: -3.8rem;
+    margin-right: -3.2rem;
   }
 
   .announcement-bar .slider-button--prev {
-    margin-left: -3.8rem;
+    margin-left: -3.2rem;
   }
 }
 
@@ -2917,15 +2917,17 @@ details-disclosure > details {
 .global-media-settings img,
 .global-media-settings iframe,
 .global-media-settings model-viewer,
-.global-media-settings video {
+.global-media-settings video,
+.global-media-settings .placeholder-svg {
   border-radius: calc(var(--media-radius) - var(--media-border-width));
 }
 
 .content-container--full-width,
 .global-media-settings--full-width,
 .global-media-settings--full-width img,
 .global-media-settings--full-width video,
-.global-media-settings--full-width iframe {
+.global-media-settings--full-width iframe,
+.global-media-settings--full-width .placeholder-svg {
   border-radius: 0;
   border-left: none;
   border-right: none;
@@ -3127,6 +3129,7 @@ details-disclosure > details {
 .animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
 .animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
   position: fixed;
+  height: 100vh;
 }
 
 /* Animations */
@@ -3174,6 +3177,10 @@ details-disclosure > details {
     transition: none;
   }
 
+  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
+    transform: translateY(0);
+  }
+
   @keyframes slideIn {
     from {
       transform: translateY(2rem);

diff --git a/assets/collage.css b/assets/collage.css
@@ -111,14 +111,18 @@
 }
 
 .collage-card {
-  background: rgb(var(--color-background));
   height: 100%;
   position: relative;
   border-radius: var(--border-radius);
   border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
   padding: var(--image-padding);
 }
 
+/* Needed for gradient continuity with or without animation, background-attachment: local scopes the gradient to its container which happens automatically when a transform is applied (animation on scroll) */
+.collage-card.gradient {
+  transform: perspective(0);
+}
+
 .collage-card:after {
   content: '';
   position: absolute;

diff --git a/assets/collapsible-content.css b/assets/collapsible-content.css
@@ -15,6 +15,11 @@
   }
 }
 
+/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
+.collapsible-content__media {
+  background: transparent;
+}
+
 .collapsible-content__media--small {
   height: 19.4rem;
 }
@@ -82,6 +87,8 @@
 .collapsible-row-layout .accordion {
   border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
   margin-bottom: 1.5rem;
+  /* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
+  transform: perspective(0);
 }
 
 .collapsible-row-layout .accordion summary,

diff --git a/assets/component-card.css b/assets/component-card.css
@@ -62,6 +62,17 @@
     rgba(var(--color-shadow), var(--shadow-opacity));
 }
 
+/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
+.card--card.gradient,
+.card__inner.gradient {
+  transform: perspective(0);
+}
+
+/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
+.card__inner.color-background-1 {
+  background: transparent;
+}
+
 .card .card__inner .card__media {
   overflow: hidden;
   /* Fix for Safari border bug on hover */
@@ -274,13 +285,18 @@
 }
 
 .card--standard.card--media .card__inner .card__information,
-.card--standard.card--text:not(.card--horizontal) > .card__content .card__heading,
+.card--standard.card--text:not(.card--horizontal) > .card__content .card__heading:not(.card__heading--placeholder),
 .card--standard:not(.card--horizontal) > .card__content .card__badge,
 .card--standard.card--text.article-card > .card__content .card__information,
 .card--standard > .card__content .card__caption {
   display: none;
 }
 
+.card--standard:not(.card--horizontal) .placeholder-svg {
+  height: auto;
+  width: 100%;
+}
+
 .card--standard > .card__content {
   padding: 0;
 }

diff --git a/assets/component-image-with-text.css b/assets/component-image-with-text.css
@@ -51,8 +51,6 @@
 .image-with-text__media--placeholder:after {
   content: '';
   position: absolute;
-  width: 100%;
-  height: 100%;
   background: rgba(var(--color-foreground), 0.04);
 }
 
@@ -69,10 +67,10 @@
 .image-with-text__media--placeholder > svg {
   position: absolute;
   left: 50%;
-  max-width: 80rem;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
+  height: 100%;
   fill: currentColor;
 }
 
@@ -136,7 +134,8 @@
 @media screen and (max-width: 749px) {
   .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media-item:after,
   .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__media,
-  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media img {
+  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media img,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media .placeholder-svg {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
@@ -246,6 +245,10 @@
     .grid:not(.image-with-text__grid--reverse)
     .image-with-text__media
     img,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .grid:not(.image-with-text__grid--reverse)
+    .image-with-text__media
+    .placeholder-svg,
   .image-with-text.collapse-corners:not(.image-with-text--overlap)
     .image-with-text__grid--reverse
     .image-with-text__text-item:after,
@@ -277,7 +280,11 @@
   .image-with-text.collapse-corners:not(.image-with-text--overlap)
     .image-with-text__grid--reverse
     .image-with-text__media
-    img {
+    img,
+  .image-with-text.collapse-corners:not(.image-with-text--overlap)
+    .image-with-text__grid--reverse
+    .image-with-text__media
+    .placeholder-svg {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
@@ -299,6 +306,17 @@
   z-index: 2;
 }
 
+/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
+.image-with-text:not(.image-with-text--overlap) .color-background-1,
+.image-with-text.image-with-text--overlap .image-with-text__media.color-background-1 {
+  background: transparent;
+}
+
+/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
+.image-with-text .gradient {
+  transform: perspective(0);
+}
+
 .image-with-text__content {
   border-radius: var(--text-boxes-radius);
   box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)

diff --git a/assets/quick-add.css b/assets/quick-add.css
@@ -29,6 +29,11 @@
   z-index: 101;
 }
 
+.quick-add-modal .scroll-trigger.scroll-trigger {
+  animation: none;
+  opacity: 1;
+}
+
 .quick-add-modal__content {
   --modal-height-offset: 3.2rem;
   position: absolute;