Use new asset filter (#3582)

* Moved snippets to assets and changed to svg * Changed snippet icon rendering to use new inline_asset_content filter * Removed hardcoded SVGs * Made SVGs valid * Refactored + Optimized svg files (#3586) --------- Co-authored-by: Ludo <[email protected]> Co-authored-by: melissaperreault <[email protected]>
Shopify · Aug 27, 2024 · 755f6a4 · 755f6a4
1 parent f4e01e2
commit 755f6a4
Show file tree

Hide file tree

Showing 199 changed files with 974 additions and 1,175 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -634,6 +634,19 @@ h3 .icon-arrow,
   transform: translateX(-0.05rem);
 }
 
+.svg-wrapper {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+}
+
+.svg-wrapper > svg {
+  height: 100%;
+  width: 100%;
+}
+
 /* base-details-summary */
 summary {
   cursor: pointer;
@@ -687,6 +700,11 @@ summary::-webkit-details-marker {
   }
 }
 
+.placeholder-svg {
+  height: 100%;
+  width: 100%;
+}
+
 /* base-focus */
 /*
   Focus ring - default (with offset)
@@ -823,7 +841,7 @@ summary::-webkit-details-marker {
   align-items: center;
 }
 
-.title-wrapper-with-link .link-with-icon svg {
+.title-wrapper-with-link .link-with-icon .svg-wrapper {
   width: 1.5rem;
 }
 
@@ -1464,7 +1482,7 @@ details[open] > .share-button__fallback {
   color: rgba(var(--color-foreground), 0.75);
 }
 
-.share-button__fallback button:hover svg {
+.share-button__fallback button:hover .svg-wrapper {
   transform: scale(1.07);
 }
 
@@ -1662,13 +1680,14 @@ details[open] > .share-button__fallback {
 
 /* Select */
 
-.select .icon-caret,
-.customer select + svg {
+.select .svg-wrapper,
+.customer select + .svg-wrapper {
   height: 0.6rem;
+  width: 1rem;
   pointer-events: none;
   position: absolute;
   top: calc(50% - 0.2rem);
-  right: calc(var(--inputs-border-width) + 1.5rem);
+  right: 0;
 }
 
 .select__select,
@@ -1769,7 +1788,7 @@ details[open] > .share-button__fallback {
   width: 4.4rem;
 }
 
-.field__button > svg {
+.field__button > .svg-wrapper {
   height: 2.5rem;
   width: 2.5rem;
 }
@@ -1821,21 +1840,21 @@ input[type='checkbox'] {
 }
 
 .form__message .icon,
-.customer .form__message svg {
+.customer .form__message .svg-wrapper {
   flex-shrink: 0;
   height: 1.3rem;
   margin-right: 0.5rem;
   width: 1.3rem;
 }
 
 .form__message--large .icon,
-.customer .form__message svg {
+.customer .form__message .svg-wrapper {
   height: 1.5rem;
   width: 1.5rem;
   margin-right: 1rem;
 }
 
-.customer .field .form__message svg {
+.customer .field .form__message .svg-wrapper {
   align-self: start;
 }
 
@@ -1937,7 +1956,7 @@ input[type='checkbox'] {
   margin-right: calc(var(--inputs-border-width));
 }
 
-.quantity__button svg {
+.quantity__button .svg-wrapper {
   width: 1rem;
   pointer-events: none;
 }
@@ -2515,6 +2534,11 @@ input[type='checkbox'] {
   height: 100%;
 }
 
+.header__icon .svg-wrapper {
+  width: 44px;
+  height: 44px;
+}
+
 .header__icon::after {
   content: none;
 }
@@ -2558,6 +2582,14 @@ input[type='checkbox'] {
   --shop-avatar-size: 2.8rem;
 }
 
+details .header__icon-close {
+  display: none;
+}
+
+details[open] .header__icon-close {
+  display: inline-block;
+}
+
 account-icon {
   display: flex;
 }
@@ -3222,7 +3254,7 @@ details-disclosure > details {
 }
 
 .animate--zoom-in > img,
-.animate--zoom-in > svg {
+.animate--zoom-in > .svg-wrapper {
   transition: scale var(--duration-short) linear;
   scale: var(--zoom-in-ratio);
 }
@@ -3231,7 +3263,7 @@ details-disclosure > details {
 
 @media (prefers-reduced-motion: no-preference) {
   .animate--ambient > img,
-  .animate--ambient > svg {
+  .animate--ambient > .svg-wrapper {
     animation: animateAmbient 30s linear infinite;
   }
 

diff --git a/assets/component-accordion.css b/assets/component-accordion.css
@@ -34,7 +34,7 @@
   word-break: break-word;
 }
 
-.accordion .icon-accordion {
+.accordion .svg-wrapper {
   align-self: center;
   fill: rgb(var(--color-foreground));
   height: calc(var(--font-heading-scale) * 2rem);

diff --git a/assets/component-cart-drawer.css b/assets/component-cart-drawer.css
@@ -99,7 +99,7 @@ cart-drawer:not(.is-empty) .cart-drawer__collection {
   right: 5px;
 }
 
-.drawer__close svg {
+.drawer__close .svg-wrapper {
   height: 2rem;
   width: 2rem;
 }

diff --git a/assets/component-cart-items.css b/assets/component-cart-items.css
@@ -190,15 +190,15 @@ cart-remove-button .icon-remove {
   order: 1;
 }
 
-.cart-item__error-text + svg {
+.cart-item__error-text + .svg-wrapper {
   flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.7rem;
   margin-top: 0.25rem;
 }
 
-.cart-item__error-text:empty + svg {
+.cart-item__error-text:empty + .svg-wrapper {
   display: none;
 }
 
@@ -306,10 +306,6 @@ cart-remove-button .icon-remove {
     width: 10rem;
   }
 
-  .cart-item cart-remove-button {
-    margin: 0.5rem 0 0 1.5rem;
-  }
-
   .cart-item__price-wrapper > *:only-child:not(.cart-item__discounted-prices) {
     margin-top: 1rem;
   }

diff --git a/assets/component-facets.css b/assets/component-facets.css
@@ -95,6 +95,10 @@
   transition: none;
 }
 
+.select .icon-caret {
+  width: 10px;
+}
+
 .facet-filters button {
   margin-left: 2.5rem;
 }
@@ -195,6 +199,11 @@
   margin-bottom: 1.5rem;
 }
 
+.facets__summary .svg-wrapper {
+  height: auto;
+  width: auto;
+}
+
 .facets__disclosure fieldset {
   padding: 0;
   margin: 0;
@@ -211,7 +220,7 @@
   animation: animateMenuOpen var(--duration-default) ease;
 }
 
-.facets__summary span {
+.facets__summary span:first-of-type {
   transition: text-decoration var(--duration-short) ease;
 }
 
@@ -498,21 +507,24 @@
   display: flex;
 }
 
-.facet-checkbox > svg {
+.facet-checkbox > svg,
+.facet-checkbox > .svg-wrapper {
   background-color: rgb(var(--color-background));
   margin-right: 1.2rem;
   flex-shrink: 0;
 }
 
-.facet-checkbox .icon-checkmark {
+.facet-checkbox .svg-wrapper {
   visibility: hidden;
   position: absolute;
   left: 0.3rem;
   z-index: 5;
   top: 1.4rem;
+  width: 1.1rem;
+  height: 0.7rem;
 }
 
-.facet-checkbox > input[type='checkbox']:checked ~ .icon-checkmark {
+.facet-checkbox > input[type='checkbox']:checked ~ .svg-wrapper > .icon-checkmark {
   visibility: visible;
 }
 
@@ -522,7 +534,7 @@
     border: 0.1rem solid rgb(var(--color-background));
   }
 
-  .facet-checkbox > input[type='checkbox']:checked ~ .icon-checkmark {
+  .facet-checkbox > input[type='checkbox']:checked ~ .svg-wrapper > .icon-checkmark {
     border: none;
   }
 }
@@ -582,7 +594,7 @@ span.active-facets__button-inner {
   font-size: 1rem;
   min-height: 0;
   min-width: 0;
-  padding: 0.5rem 1rem;
+  padding: 0.25rem 1.25rem;
   display: flex;
   align-items: center;
 }
@@ -626,8 +638,8 @@ span.active-facets__button-inner:after {
   }
 
   span.active-facets__button-inner {
-    padding-bottom: 0.3rem;
-    padding-top: 0.3rem;
+    padding-bottom: 0.1rem;
+    padding-top: 0.1rem;
   }
 
   .active-facets__button-wrapper {
@@ -676,7 +688,7 @@ a.active-facets__button.focused .active-facets__button-inner {
   outline: none;
 }
 
-.active-facets__button svg {
+.active-facets__button .svg-wrapper {
   align-self: center;
   flex-shrink: 0;
   margin-left: 0.6rem;
@@ -686,10 +698,10 @@ a.active-facets__button.focused .active-facets__button-inner {
 }
 
 @media all and (min-width: 990px) {
-  .active-facets__button svg {
+  .active-facets__button .svg-wrapper {
     margin-right: -0.4rem;
     margin-top: 0.1rem;
-    width: 1.4rem;
+    width: 1.2rem;
   }
 }
 
@@ -848,7 +860,7 @@ a.active-facets__button.focused .active-facets__button-inner {
   margin-left: 1rem;
 }
 
-.mobile-facets__open svg {
+.mobile-facets__open .svg-wrapper {
   width: 2rem;
 }
 
@@ -871,7 +883,7 @@ a.active-facets__button.focused .active-facets__button-inner {
   transition: opacity var(--duration-short) ease;
 }
 
-.mobile-facets__close svg {
+.mobile-facets__close .svg-wrapper {
   width: 2.2rem;
 }
 
@@ -880,7 +892,7 @@ details.menu-opening .mobile-facets__close {
   opacity: 1;
 }
 
-details.menu-opening .mobile-facets__close svg {
+details.menu-opening .mobile-facets__close .svg-wrapper {
   margin: 0;
 }
 
@@ -943,7 +955,7 @@ details.menu-opening .mobile-facets__close svg {
   padding: 1.3rem 2.5rem;
 }
 
-.mobile-facets__summary svg {
+.mobile-facets__summary .svg-wrapper {
   margin-left: auto;
 }
 
@@ -1020,6 +1032,8 @@ input.mobile-facets__checkbox {
   top: 1.9rem;
   left: 2.8rem;
   visibility: hidden;
+  width: 11px;
+  height: 9px;
 }
 
 .mobile-facets__label > input[type='checkbox']:checked ~ .icon-checkmark {

diff --git a/assets/component-image-with-text.css b/assets/component-image-with-text.css
@@ -74,7 +74,7 @@
   fill: currentColor;
 }
 
-.image-with-text__media--placeholder:is(.animate--ambient, .animate--zoom-in) > svg {
+.image-with-text__media--placeholder:is(.animate--ambient, .animate--zoom-in) > .svg-wrapper {
   top: 0;
   left: 0;
   transform: translate(0);

diff --git a/assets/component-localization-form.css b/assets/component-localization-form.css
@@ -148,7 +148,7 @@
   max-height: 20.5rem;
   max-width: 25.5rem;
   min-width: 12rem;
-  width: max-content;
+  width: 100%;
 }
 
 .country-selector__list {
@@ -176,6 +176,10 @@
   z-index: 6;
 }
 
+.country-filter__input {
+  min-width: 200px;
+}
+
 .country-filter__reset-button,
 .country-filter__search-icon {
   right: calc(var(--inputs-border-width));
@@ -441,3 +445,7 @@
 .menu-drawer__localization + .list-social {
   margin-top: 1rem;
 }
+
+.language-selector .disclosure__list {
+  min-width: 200px;
+}