Release/14.0.0 duplicate (#3436)

Shopify · Apr 24, 2024 · 3f4284a · 3f4284a
1 parent ce39a3c
commit 3f4284a
Show file tree

Hide file tree

Showing 27 changed files with 427 additions and 319 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -2263,13 +2263,25 @@ product-info .loading__spinner:not(.hidden) ~ *,
 }
 
 @keyframes translateAnnouncementSlideIn {
-  0% {opacity: 0; transform: translateX(var(--announcement-translate-from))}
-  100% {opacity: 1; transform: translateX(0)}
+  0% {
+    opacity: 0;
+    transform: translateX(var(--announcement-translate-from));
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @keyframes translateAnnouncementSlideOut {
-  0% {opacity: 1; transform: translateX(0)}
-  100% {opacity: 0; transform: translateX(var(--announcement-translate-to))}
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(var(--announcement-translate-to));
+  }
 }
 
 /* section-header */

diff --git a/assets/cart.js b/assets/cart.js
@@ -43,7 +43,12 @@ class CartItems extends HTMLElement {
   }
 
   onChange(event) {
-    this.updateQuantity(event.target.dataset.index, event.target.value, document.activeElement.getAttribute('name'), event.target.dataset.quantityVariantId);
+    this.updateQuantity(
+      event.target.dataset.index,
+      event.target.value,
+      document.activeElement.getAttribute('name'),
+      event.target.dataset.quantityVariantId
+    );
   }
 
   onCartUpdate() {

diff --git a/assets/component-card.css b/assets/component-card.css
@@ -58,7 +58,8 @@
   top: calc(var(--border-width) * -1);
   left: calc(var(--border-width) * -1);
   border-radius: var(--border-radius);
-  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
+  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
+    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 */
@@ -138,17 +139,18 @@
   padding: 1.3rem 1rem;
 }
 
-.card:not(.ratio)>.card__content {
+.card:not(.ratio) > .card__content {
   grid-template-rows: max-content minmax(0, 1fr) max-content auto;
 }
 
 .card-information .card__information-volume-pricing-note {
   margin-top: 0.6rem;
-  line-height: calc(0.5 + .4 / var(--font-body-scale));
+  line-height: calc(0.5 + 0.4 / var(--font-body-scale));
   color: rgba(var(--color-foreground), 0.75);
 }
 
-.card__information-volume-pricing-note--button, .card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label {
+.card__information-volume-pricing-note--button,
+.card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label {
   position: relative;
   z-index: 1;
   cursor: pointer;
@@ -203,7 +205,10 @@
     width: calc(100% + var(--border-width) + 3.5rem);
   }
 
-  .grid--6-col-desktop .card--standard .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
+  .grid--6-col-desktop
+    .card--standard
+    .card__information-volume-pricing-note--button
+    + .global-settings-popup.quantity-popover__info {
     width: calc(100% + var(--border-width) + 1rem);
   }
 }
@@ -213,16 +218,29 @@
     width: calc(3.5rem / var(--font-body-scale));
   }
 
-  .grid--2-col-tablet-down .card--card .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info,   .grid--2-col-tablet-down .card--standard .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info  {
+  .grid--2-col-tablet-down
+    .card--card
+    .card__information-volume-pricing-note--button
+    + .global-settings-popup.quantity-popover__info,
+  .grid--2-col-tablet-down
+    .card--standard
+    .card__information-volume-pricing-note--button
+    + .global-settings-popup.quantity-popover__info {
     left: 50%;
     transform: translate(-50%);
   }
 
-  .grid--2-col-tablet-down .card--standard .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
+  .grid--2-col-tablet-down
+    .card--standard
+    .card__information-volume-pricing-note--button
+    + .global-settings-popup.quantity-popover__info {
     width: 100%;
   }
 
-  .grid--2-col-tablet-down .card--card .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
+  .grid--2-col-tablet-down
+    .card--card
+    .card__information-volume-pricing-note--button
+    + .global-settings-popup.quantity-popover__info {
     width: calc(100% + var(--border-width) + 4rem);
   }
 
@@ -237,10 +255,10 @@
 
 @media screen and (max-width: 989px) {
   .card-information quantity-popover .quantity__rules ~ volume-pricing {
-     margin-top: 0;
+    margin-top: 0;
   }
 
-  .card-information quantity-popover  volume-pricing {
+  .card-information quantity-popover volume-pricing {
     margin-top: 4.2rem;
   }
 }
@@ -267,7 +285,7 @@
   justify-self: flex-end;
 }
 
-.card:not(.card--horizontal)>.card__content>.card__badge {
+.card:not(.card--horizontal) > .card__content > .card__badge {
   margin: 1.3rem;
 }
 
@@ -278,7 +296,7 @@
   width: 100%;
 }
 
-.card__inner:not(.ratio)>.card__content {
+.card__inner:not(.ratio) > .card__content {
   height: 100%;
 }
 
@@ -297,7 +315,10 @@
   font-size: calc(var(--font-heading-scale) * 1.2rem);
 }
 
-.card--horizontal .card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note) {
+.card--horizontal
+  .card-information
+  > *:not(.visually-hidden:first-child)
+  + *:not(.rating):not(.card__information-volume-pricing-note) {
   margin-top: 0;
 }
 
@@ -306,15 +327,14 @@
 }
 
 @media only screen and (min-width: 750px) {
-
   .card--horizontal .card__heading,
   .card--horizontal .price__container .price-item,
   .card--horizontal__quick-add {
     font-size: calc(var(--font-heading-scale) * 1.3rem);
   }
 }
 
-.card--card.card--media>.card__content {
+.card--card.card--media > .card__content {
   margin-top: calc(0rem - var(--image-padding));
 }
 
@@ -361,22 +381,21 @@
 }
 
 @media screen and (min-width: 990px) {
-
-  .card .media.media--hover-effect>img:only-child,
-  .card-wrapper .media.media--hover-effect>img:only-child {
+  .card .media.media--hover-effect > img:only-child,
+  .card-wrapper .media.media--hover-effect > img:only-child {
     transition: transform var(--duration-long) ease;
   }
 
-  .card:hover .media.media--hover-effect>img:first-child:only-child,
-  .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child {
+  .card:hover .media.media--hover-effect > img:first-child:only-child,
+  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
     transform: scale(1.03);
   }
 
-  .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
+  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
     opacity: 0;
   }
 
-  .card-wrapper:hover .media.media--hover-effect>img+img {
+  .card-wrapper:hover .media.media--hover-effect > img + img {
     opacity: 1;
     transition: transform var(--duration-long) ease;
     transform: scale(1.03);
@@ -389,29 +408,29 @@
 }
 
 .card--standard.card--media .card__inner .card__information,
-.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 {
+.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 {
   width: 100%;
 }
 
-.card--standard>.card__content {
+.card--standard > .card__content {
   padding: 0;
 }
 
-.card--standard>.card__content .card__information {
+.card--standard > .card__content .card__information {
   padding-left: 0;
   padding-right: 0;
 }
 
 .card--card.card--media .card__inner .card__information,
 .card--card.card--text .card__inner,
-.card--card.card--media>.card__content .card__badge {
+.card--card.card--media > .card__content .card__badge {
   display: none;
 }
 
@@ -442,37 +461,40 @@
   overflow: hidden;
 }
 
-.card-information>*+* {
+.card-information > * + * {
   margin-top: 0.5rem;
 }
 
 .card-information {
   width: 100%;
 }
 
-.card-information>* {
+.card-information > * {
   line-height: calc(1 + 0.4 / var(--font-body-scale));
   color: rgb(var(--color-foreground));
 }
 
-.card-information>.price {
+.card-information > .price {
   color: rgb(var(--color-foreground));
 }
 
-.card--horizontal .card-information>.price {
+.card--horizontal .card-information > .price {
   color: rgba(var(--color-foreground), 0.75);
 }
 
-.card-information>.rating {
+.card-information > .rating {
   margin-top: 0.4rem;
 }
 
 /* Specificity needed due to the changes below */
-.card-information > *:not(.visually-hidden:first-child) + quantity-popover:not(.rating):not(.card__information-volume-pricing-note), .card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button {
+.card-information
+  > *:not(.visually-hidden:first-child)
+  + quantity-popover:not(.rating):not(.card__information-volume-pricing-note),
+.card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button {
   margin-top: 0;
 }
 
-.card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note) {
+.card-information > *:not(.visually-hidden:first-child) + *:not(.rating):not(.card__information-volume-pricing-note) {
   margin-top: 0.7rem;
 }
 
@@ -494,7 +516,10 @@
   border: 0;
   /* Border is not currently compatible with image shapes for standard cards. */
   background-color: transparent;
-  filter: drop-shadow(var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)));
+  filter: drop-shadow(
+    var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
+      rgba(var(--color-shadow), var(--shadow-opacity))
+  );
 }
 
 .card--shape.card--standard:not(.card--text) .card__inner:after {

diff --git a/assets/component-menu-drawer.css b/assets/component-menu-drawer.css
@@ -221,7 +221,7 @@ details[open].menu-opening > .menu-drawer__submenu {
 
 .menu-drawer .list-social {
   justify-content: flex-start;
-  margin-left: -1.25rem
+  margin-left: -1.25rem;
 }
 
 .menu-drawer .list-social:empty {