diff --git a/assets/base.css b/assets/base.css index e758d3be7d5..979d9bd2ff7 100644 --- 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,7 +1840,7 @@ 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; @@ -1829,13 +1848,13 @@ input[type='checkbox'] { } .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 index f2acd3c11d8..188ff803da6 100644 --- 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 index ce318d53c95..888362c144a 100644 --- 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 index d2294b4e961..d673bd9693a 100644 --- a/assets/component-cart-items.css +++ b/assets/component-cart-items.css @@ -190,7 +190,7 @@ 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; @@ -198,7 +198,7 @@ cart-remove-button .icon-remove { 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 index 25f8599f10a..7eb860faf62 100644 --- 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 index e8a5a3c96b5..5a97c82c009 100644 --- 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 index f2cfcd776e5..2abd1b3ff86 100644 --- 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; +} diff --git a/assets/component-menu-drawer.css b/assets/component-menu-drawer.css index 2fc887dd153..319a4edb535 100644 --- a/assets/component-menu-drawer.css +++ b/assets/component-menu-drawer.css @@ -125,7 +125,8 @@ details[open].menu-opening > .menu-drawer__submenu { display: none; } -.menu-drawer__menu-item > .icon-arrow { +.menu-drawer__menu-item > .svg-wrapper { + width: 15px; position: absolute; right: 3rem; top: 50%; @@ -162,9 +163,10 @@ details[open].menu-opening > .menu-drawer__submenu { text-align: left; } -.menu-drawer__close-button .icon-arrow { +.menu-drawer__close-button .svg-wrapper { transform: rotate(180deg); margin-right: 1rem; + width: 15px; } .menu-drawer__utility-links { @@ -203,7 +205,7 @@ details[open].menu-opening > .menu-drawer__submenu { margin: 0; } -.menu-drawer__account .icon-account { +.menu-drawer__account account-icon > .svg-wrapper { height: 2rem; width: 2rem; margin-right: 1rem; @@ -215,7 +217,7 @@ details[open].menu-opening > .menu-drawer__submenu { margin-left: -0.45rem; } -.menu-drawer__account:hover .icon-account { +.menu-drawer__account:hover account-icon > .svg-wrapper { transform: scale(1.07); } diff --git a/assets/component-slideshow.css b/assets/component-slideshow.css index 01dab0142bf..9c2cfb5a2b5 100644 --- a/assets/component-slideshow.css +++ b/assets/component-slideshow.css @@ -189,7 +189,7 @@ slideshow-component:not(.page-width) .slider-buttons { } } -.slideshow__autoplay:hover svg { +.slideshow__autoplay:hover .svg-wrapper { transform: scale(1.1); } diff --git a/assets/customer.css b/assets/customer.css index 394d12d585d..0128da7efe2 100644 --- a/assets/customer.css +++ b/assets/customer.css @@ -302,16 +302,16 @@ text-decoration: none; } -.customer .pagination li :first-child svg { +.customer .pagination li :first-child .svg-wrapper { height: 0.6rem; } -.customer .pagination li:first-of-type svg { +.customer .pagination li:first-of-type .svg-wrapper { margin-left: -0.2rem; transform: rotate(90deg); } -.customer .pagination li:last-of-type svg { +.customer .pagination li:last-of-type .svg-wrapper { margin-right: -0.2rem; transform: rotate(-90deg); } @@ -463,7 +463,7 @@ align-items: center; } -.account a svg { +.account a .svg-wrapper { width: 1.5rem; margin-bottom: -0.03rem; margin-right: 1rem; @@ -620,7 +620,7 @@ line-height: calc(1 + 0.2 / var(--font-body-scale)); } -.order svg { +.order .svg-wrapper { width: 1.1rem; color: rgb(var(--color-foreground)); margin-right: 0.5rem; diff --git a/assets/email-signup-banner-background-mobile.svg b/assets/email-signup-banner-background-mobile.svg new file mode 100644 index 00000000000..6197f1ca4ba --- /dev/null +++ b/assets/email-signup-banner-background-mobile.svg @@ -0,0 +1 @@ + diff --git a/assets/email-signup-banner-background.svg b/assets/email-signup-banner-background.svg new file mode 100644 index 00000000000..9d05efff8fd --- /dev/null +++ b/assets/email-signup-banner-background.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-3d-model.svg b/assets/icon-3d-model.svg new file mode 100644 index 00000000000..0ed91d3c668 --- /dev/null +++ b/assets/icon-3d-model.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-account.svg b/assets/icon-account.svg new file mode 100644 index 00000000000..31c7b28ae82 --- /dev/null +++ b/assets/icon-account.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-apple.svg b/assets/icon-apple.svg new file mode 100644 index 00000000000..f42568143b1 --- /dev/null +++ b/assets/icon-apple.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-arrow.svg b/assets/icon-arrow.svg new file mode 100644 index 00000000000..562b93d1297 --- /dev/null +++ b/assets/icon-arrow.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-banana.svg b/assets/icon-banana.svg new file mode 100644 index 00000000000..e891f6deea9 --- /dev/null +++ b/assets/icon-banana.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-bottle.svg b/assets/icon-bottle.svg new file mode 100644 index 00000000000..2b5c77c2b73 --- /dev/null +++ b/assets/icon-bottle.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-box.svg b/assets/icon-box.svg new file mode 100644 index 00000000000..bf7ef8898ff --- /dev/null +++ b/assets/icon-box.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-caret.svg b/assets/icon-caret.svg new file mode 100644 index 00000000000..47d0848f00a --- /dev/null +++ b/assets/icon-caret.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-carrot.svg b/assets/icon-carrot.svg new file mode 100644 index 00000000000..0d79780759c --- /dev/null +++ b/assets/icon-carrot.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-cart-empty.svg b/assets/icon-cart-empty.svg new file mode 100644 index 00000000000..fb80f283371 --- /dev/null +++ b/assets/icon-cart-empty.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-cart.svg b/assets/icon-cart.svg new file mode 100644 index 00000000000..c662b14f62d --- /dev/null +++ b/assets/icon-cart.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-chat-bubble.svg b/assets/icon-chat-bubble.svg new file mode 100644 index 00000000000..03511cb430d --- /dev/null +++ b/assets/icon-chat-bubble.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-check-mark.svg b/assets/icon-check-mark.svg new file mode 100644 index 00000000000..f46543450ad --- /dev/null +++ b/assets/icon-check-mark.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-checkmark.svg b/assets/icon-checkmark.svg new file mode 100644 index 00000000000..676f3262a5b --- /dev/null +++ b/assets/icon-checkmark.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-clipboard.svg b/assets/icon-clipboard.svg new file mode 100644 index 00000000000..f8c194473d6 --- /dev/null +++ b/assets/icon-clipboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icon-close-small.svg b/assets/icon-close-small.svg new file mode 100644 index 00000000000..817bd56ea47 --- /dev/null +++ b/assets/icon-close-small.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-close.svg b/assets/icon-close.svg new file mode 100644 index 00000000000..0d9e48634c9 --- /dev/null +++ b/assets/icon-close.svg @@ -0,0 +1 @@ + diff --git a/snippets/icon-clipboard.liquid b/assets/icon-copy.svg similarity index 100% rename from snippets/icon-clipboard.liquid rename to assets/icon-copy.svg diff --git a/assets/icon-dairy-free.svg b/assets/icon-dairy-free.svg new file mode 100644 index 00000000000..30fe522d4fd --- /dev/null +++ b/assets/icon-dairy-free.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-dairy.svg b/assets/icon-dairy.svg new file mode 100644 index 00000000000..d53874b002e --- /dev/null +++ b/assets/icon-dairy.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-discount.svg b/assets/icon-discount.svg new file mode 100644 index 00000000000..78c2be8b5be --- /dev/null +++ b/assets/icon-discount.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-dryer.svg b/assets/icon-dryer.svg new file mode 100644 index 00000000000..04796df686c --- /dev/null +++ b/assets/icon-dryer.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-error.svg b/assets/icon-error.svg new file mode 100644 index 00000000000..451c189615e --- /dev/null +++ b/assets/icon-error.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-eye.svg b/assets/icon-eye.svg new file mode 100644 index 00000000000..4bbfbc680f2 --- /dev/null +++ b/assets/icon-eye.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-facebook.svg b/assets/icon-facebook.svg new file mode 100644 index 00000000000..e0e3ef2a992 --- /dev/null +++ b/assets/icon-facebook.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-filter.svg b/assets/icon-filter.svg new file mode 100644 index 00000000000..69a73781d62 --- /dev/null +++ b/assets/icon-filter.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-fire.svg b/assets/icon-fire.svg new file mode 100644 index 00000000000..f0240003d03 --- /dev/null +++ b/assets/icon-fire.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-gluten-free.svg b/assets/icon-gluten-free.svg new file mode 100644 index 00000000000..02136230ea9 --- /dev/null +++ b/assets/icon-gluten-free.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-hamburger.svg b/assets/icon-hamburger.svg new file mode 100644 index 00000000000..613bbb710f3 --- /dev/null +++ b/assets/icon-hamburger.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-heart.svg b/assets/icon-heart.svg new file mode 100644 index 00000000000..7cb69e45897 --- /dev/null +++ b/assets/icon-heart.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-info.svg b/assets/icon-info.svg new file mode 100644 index 00000000000..031c0f02221 --- /dev/null +++ b/assets/icon-info.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-instagram.svg b/assets/icon-instagram.svg new file mode 100644 index 00000000000..af0c85eb91c --- /dev/null +++ b/assets/icon-instagram.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-inventory-status.svg b/assets/icon-inventory-status.svg new file mode 100644 index 00000000000..022826312e4 --- /dev/null +++ b/assets/icon-inventory-status.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-iron.svg b/assets/icon-iron.svg new file mode 100644 index 00000000000..b3fcf0cd17b --- /dev/null +++ b/assets/icon-iron.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-leaf.svg b/assets/icon-leaf.svg new file mode 100644 index 00000000000..d41a5bf9f6c --- /dev/null +++ b/assets/icon-leaf.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-leather.svg b/assets/icon-leather.svg new file mode 100644 index 00000000000..fe0e5bb04a3 --- /dev/null +++ b/assets/icon-leather.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-lightning-bolt.svg b/assets/icon-lightning-bolt.svg new file mode 100644 index 00000000000..41f02b9d46c --- /dev/null +++ b/assets/icon-lightning-bolt.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-lipstick.svg b/assets/icon-lipstick.svg new file mode 100644 index 00000000000..8c74b34268f --- /dev/null +++ b/assets/icon-lipstick.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-lock.svg b/assets/icon-lock.svg new file mode 100644 index 00000000000..fbf76ff0744 --- /dev/null +++ b/assets/icon-lock.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-map-pin.svg b/assets/icon-map-pin.svg new file mode 100644 index 00000000000..da0d5206d79 --- /dev/null +++ b/assets/icon-map-pin.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-minus.svg b/assets/icon-minus.svg new file mode 100644 index 00000000000..a1ec0d0814e --- /dev/null +++ b/assets/icon-minus.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-nut-free.svg b/assets/icon-nut-free.svg new file mode 100644 index 00000000000..b8fef8f3f4e --- /dev/null +++ b/assets/icon-nut-free.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-padlock.svg b/assets/icon-padlock.svg new file mode 100644 index 00000000000..50a0af1862d --- /dev/null +++ b/assets/icon-padlock.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-pants.svg b/assets/icon-pants.svg new file mode 100644 index 00000000000..eef2414f56e --- /dev/null +++ b/assets/icon-pants.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-pause.svg b/assets/icon-pause.svg new file mode 100644 index 00000000000..cb47bfb71c2 --- /dev/null +++ b/assets/icon-pause.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-paw-print.svg b/assets/icon-paw-print.svg new file mode 100644 index 00000000000..e350a938400 --- /dev/null +++ b/assets/icon-paw-print.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-pepper.svg b/assets/icon-pepper.svg new file mode 100644 index 00000000000..f9bcea33f33 --- /dev/null +++ b/assets/icon-pepper.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-perfume.svg b/assets/icon-perfume.svg new file mode 100644 index 00000000000..6110d200e23 --- /dev/null +++ b/assets/icon-perfume.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-pinterest.svg b/assets/icon-pinterest.svg new file mode 100644 index 00000000000..ee6935808e8 --- /dev/null +++ b/assets/icon-pinterest.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-plane.svg b/assets/icon-plane.svg new file mode 100644 index 00000000000..c1036946a64 --- /dev/null +++ b/assets/icon-plane.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-plant.svg b/assets/icon-plant.svg new file mode 100644 index 00000000000..67307e31092 --- /dev/null +++ b/assets/icon-plant.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-play.svg b/assets/icon-play.svg new file mode 100644 index 00000000000..d7db603bc44 --- /dev/null +++ b/assets/icon-play.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-plus.svg b/assets/icon-plus.svg new file mode 100644 index 00000000000..e7f138b8578 --- /dev/null +++ b/assets/icon-plus.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-price-tag.svg b/assets/icon-price-tag.svg new file mode 100644 index 00000000000..f0436688d7b --- /dev/null +++ b/assets/icon-price-tag.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-question-mark.svg b/assets/icon-question-mark.svg new file mode 100644 index 00000000000..152f08d53a4 --- /dev/null +++ b/assets/icon-question-mark.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-recycle.svg b/assets/icon-recycle.svg new file mode 100644 index 00000000000..fbf8a7098ee --- /dev/null +++ b/assets/icon-recycle.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-remove.svg b/assets/icon-remove.svg new file mode 100644 index 00000000000..091fd038bf3 --- /dev/null +++ b/assets/icon-remove.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-reset.svg b/assets/icon-reset.svg new file mode 100644 index 00000000000..0c1aa0a9e1a --- /dev/null +++ b/assets/icon-reset.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-return.svg b/assets/icon-return.svg new file mode 100644 index 00000000000..6a5c8f1cef0 --- /dev/null +++ b/assets/icon-return.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-ruler.svg b/assets/icon-ruler.svg new file mode 100644 index 00000000000..d42789757ac --- /dev/null +++ b/assets/icon-ruler.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-search.svg b/assets/icon-search.svg new file mode 100644 index 00000000000..b747f54208d --- /dev/null +++ b/assets/icon-search.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-serving-dish.svg b/assets/icon-serving-dish.svg new file mode 100644 index 00000000000..800626db3ec --- /dev/null +++ b/assets/icon-serving-dish.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-share.svg b/assets/icon-share.svg new file mode 100644 index 00000000000..84611d30bc6 --- /dev/null +++ b/assets/icon-share.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-shirt.svg b/assets/icon-shirt.svg new file mode 100644 index 00000000000..3281794aab3 --- /dev/null +++ b/assets/icon-shirt.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-shoe.svg b/assets/icon-shoe.svg new file mode 100644 index 00000000000..b0975084b8a --- /dev/null +++ b/assets/icon-shoe.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-shopify.svg b/assets/icon-shopify.svg new file mode 100644 index 00000000000..b6a58bf8d84 --- /dev/null +++ b/assets/icon-shopify.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-silhouette.svg b/assets/icon-silhouette.svg new file mode 100644 index 00000000000..b2b32b4a625 --- /dev/null +++ b/assets/icon-silhouette.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-snapchat.svg b/assets/icon-snapchat.svg new file mode 100644 index 00000000000..150993237b2 --- /dev/null +++ b/assets/icon-snapchat.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-snowflake.svg b/assets/icon-snowflake.svg new file mode 100644 index 00000000000..afa00097a67 --- /dev/null +++ b/assets/icon-snowflake.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-star.svg b/assets/icon-star.svg new file mode 100644 index 00000000000..0982e97996f --- /dev/null +++ b/assets/icon-star.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-stopwatch.svg b/assets/icon-stopwatch.svg new file mode 100644 index 00000000000..403adcfe2c4 --- /dev/null +++ b/assets/icon-stopwatch.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-success.svg b/assets/icon-success.svg new file mode 100644 index 00000000000..b4e2b95fc97 --- /dev/null +++ b/assets/icon-success.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-tick.svg b/assets/icon-tick.svg new file mode 100644 index 00000000000..5e24b1bcab3 --- /dev/null +++ b/assets/icon-tick.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-tiktok.svg b/assets/icon-tiktok.svg new file mode 100644 index 00000000000..e4c29422f2d --- /dev/null +++ b/assets/icon-tiktok.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-truck.svg b/assets/icon-truck.svg new file mode 100644 index 00000000000..731cce89052 --- /dev/null +++ b/assets/icon-truck.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-tumblr.svg b/assets/icon-tumblr.svg new file mode 100644 index 00000000000..df8c452167e --- /dev/null +++ b/assets/icon-tumblr.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-twitter.svg b/assets/icon-twitter.svg new file mode 100644 index 00000000000..2d9d4eabebc --- /dev/null +++ b/assets/icon-twitter.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-unavailable.svg b/assets/icon-unavailable.svg new file mode 100644 index 00000000000..1c29a803734 --- /dev/null +++ b/assets/icon-unavailable.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-vimeo.svg b/assets/icon-vimeo.svg new file mode 100644 index 00000000000..a8c8c1424b4 --- /dev/null +++ b/assets/icon-vimeo.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-washing.svg b/assets/icon-washing.svg new file mode 100644 index 00000000000..365a961cfac --- /dev/null +++ b/assets/icon-washing.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-youtube.svg b/assets/icon-youtube.svg new file mode 100644 index 00000000000..c2e2ee694d1 --- /dev/null +++ b/assets/icon-youtube.svg @@ -0,0 +1 @@ + diff --git a/assets/icon-zoom.svg b/assets/icon-zoom.svg new file mode 100644 index 00000000000..f4ac1c736e5 --- /dev/null +++ b/assets/icon-zoom.svg @@ -0,0 +1 @@ + diff --git a/assets/loading-spinner.svg b/assets/loading-spinner.svg new file mode 100644 index 00000000000..913484cabe8 --- /dev/null +++ b/assets/loading-spinner.svg @@ -0,0 +1 @@ + diff --git a/snippets/mask-arch.liquid b/assets/mask-arch.svg similarity index 100% rename from snippets/mask-arch.liquid rename to assets/mask-arch.svg diff --git a/assets/quantity-popover.css b/assets/quantity-popover.css index 617923a2d22..2a60890f75e 100644 --- a/assets/quantity-popover.css +++ b/assets/quantity-popover.css @@ -42,12 +42,13 @@ quantity-popover quick-order-list-remove-button .button { } .quantity-popover__info-button--icon-with-label { - align-items: flex-start; text-align: left; } .quantity-popover__info-button--icon-with-label svg { flex-shrink: 0; + width: 15px; + height: 14px; } .quantity-popover__info-button--open { @@ -64,6 +65,8 @@ quantity-popover quick-order-list-remove-button .button { .quantity-popover__info-button--icon-only svg { transition: transform var(--duration-default) ease; + width: 15px; + height: 14px; } @media screen and (max-width: 989px) { diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css index fb1468e309a..bcd6726884f 100644 --- a/assets/quick-order-list.css +++ b/assets/quick-order-list.css @@ -277,7 +277,7 @@ quick-order-list-remove-button .icon-remove { display: block; } -.quick-order-list__message svg { +.quick-order-list__message .svg-wrapper { margin-right: 1rem; width: 1.3rem; } @@ -287,7 +287,7 @@ quick-order-list-remove-button .icon-remove { display: flex; } -.quick-order-list-error svg { +.quick-order-list-error .svg-wrapper { flex-shrink: 0; width: 1.2rem; margin-right: 0.7rem; @@ -348,14 +348,14 @@ quick-order-list-remove-button:hover .icon-remove { order: 1; } -.variant-item__error-text + svg { +.variant-item__error-text + .svg-wrapper { flex-shrink: 0; width: 1.2rem; margin-right: 0.5rem; margin-top: 0.1rem; } -.variant-item__error-text:empty + svg { +.variant-item__error-text:empty + .svg-wrapper { display: none; } diff --git a/assets/section-footer.css b/assets/section-footer.css index e78fa0984db..e9fa17da14e 100644 --- a/assets/section-footer.css +++ b/assets/section-footer.css @@ -436,8 +436,6 @@ .footer-block__brand-info .footer__list-social.list-social { justify-content: flex-start; - margin-left: -1.3rem; - margin-right: -1.3rem; } .footer-block__details-content .placeholder-svg { diff --git a/assets/section-main-product.css b/assets/section-main-product.css index 2b7afd744f0..d50877fc836 100644 --- a/assets/section-main-product.css +++ b/assets/section-main-product.css @@ -159,7 +159,7 @@ product-info { margin-bottom: 1.5rem; } -.product-form__error-message-wrapper svg { +.product-form__error-message-wrapper .svg-wrapper { flex-shrink: 0; width: 1.5rem; height: 1.5rem; @@ -1185,6 +1185,12 @@ a.product__text { gap: 0.5rem; } +.product__inventory .svg-wrapper, +.product__inventory svg { + width: 15px; + height: 15px; +} + .product--no-media .product__inventory { justify-content: center; } @@ -1198,6 +1204,10 @@ a.product__text { content: '#'; } +.product__inventory .icon-inventory-status circle:first-of-type { + opacity: .3; +} + /* Icon with text */ .icon-with-text { --icon-size: calc(var(--font-heading-scale) * 3rem); @@ -1215,18 +1225,18 @@ a.product__text { --icon-size: calc(var(--font-heading-scale) * 2rem); } -.icon-with-text .icon { +.icon-with-text .svg-wrapper { fill: rgb(var(--color-foreground)); height: var(--icon-size); width: var(--icon-size); } -.icon-with-text--horizontal .icon, +.icon-with-text--horizontal .svg-wrapper, .icon-with-text--horizontal img { margin-bottom: var(--icon-spacing); } -.icon-with-text--vertical .icon { +.icon-with-text--vertical .svg-wrapper { min-height: var(--icon-size); min-width: var(--icon-size); margin-right: var(--icon-spacing); @@ -1247,7 +1257,7 @@ a.product__text { text-align: center; } -.icon-with-text--horizontal svg + .h4, +.icon-with-text--horizontal .svg-wrapper + .h4, .icon-with-text--horizontal img + .h4, .icon-with-text--horizontal.icon-with-text--text-only .h4 { padding-top: 0; @@ -1421,6 +1431,8 @@ a.product__text { left: 0.28rem; z-index: 5; top: 0.4rem; + width: 10px; + height: 9px; } .recipient-form > input[type='checkbox']:checked + label .icon-checkmark { diff --git a/assets/section-password.css b/assets/section-password.css index 6ff288750d4..6e7ce05edc4 100644 --- a/assets/section-password.css +++ b/assets/section-password.css @@ -63,7 +63,7 @@ body { white-space: nowrap; } -.password-link svg { +.password-link .svg-wrapper { width: 1.8rem; height: 1.8rem; margin-right: 1rem; @@ -247,7 +247,7 @@ details[open].modal .modal__toggle-close { } details[open].modal .modal__toggle-close svg, -.modal__close-button svg { +.modal__close-button .svg-wrapper { height: 1.7rem; width: 1.7rem; } diff --git a/assets/square.svg b/assets/square.svg new file mode 100644 index 00000000000..abf2ffa4787 --- /dev/null +++ b/assets/square.svg @@ -0,0 +1 @@ + diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid index b40c7a95a62..d51fb296b9e 100644 --- a/sections/announcement-bar.liquid +++ b/sections/announcement-bar.liquid @@ -43,7 +43,9 @@
{%- if section.blocks.first.settings.link != blank -%} @@ -66,7 +68,9 @@ aria-label="{{ 'sections.announcements.previous_announcement' | t }}" aria-controls="Slider-{{ section.id }}" > - {% render 'icon-caret' %} + + {{- 'icon-caret.svg' | inline_asset_content -}} + diff --git a/sections/cart-icon-bubble.liquid b/sections/cart-icon-bubble.liquid index b73b6976e42..66fff0bad8f 100644 --- a/sections/cart-icon-bubble.liquid +++ b/sections/cart-icon-bubble.liquid @@ -1,10 +1,9 @@ -{%- liquid - if cart == empty - render 'icon-cart-empty' - else - render 'icon-cart' - endif --%} +{% if cart == empty %} + {{ 'icon-cart-empty.svg' | inline_asset_content }} +{% else %} + {{ 'icon-cart.svg' | inline_asset_content }} +{% endif %} + {{ 'templates.cart.cart' | t }} {%- if cart != empty -%}