deploy: b56196f

dropins/cart/cart-styles/index.html

@@ -39,4 +39,4 @@
 </div></div><div class=ec-line><div class=code><span style=--0:#74A061;--1:#616972>/* Medium (portrait tablets and large phones, 768px and up) */</span></div></div><div class=ec-line><div class=code><span style=--0:#74A061;--1:#616972>/* @media only screen and (min-width: 768px) { } */</span></div></div><div class=ec-line><div class=code>
 </div></div><div class=ec-line><div class=code><span style=--0:#74A061;--1:#616972>/* Large (landscape tablets, 1024px and up) */</span></div></div><div class=ec-line><div class=code><span style=--0:#74A061;--1:#616972>/* @media only screen and (min-width: 1024px) { } */</span></div></div><div class=ec-line><div class=code>
 </div></div><div class=ec-line><div class=code><span style=--0:#74A061;--1:#616972>/* XLarge (laptops/desktops, 1366px and up) */</span></div></div><div class=ec-line><div class=code><span style=--0:#74A061;--1:#616972>/* @media only screen and (min-width: 1366px) { } */</span></div></div><div class=ec-line><div class=code>
-</div></div><div class=ec-line><div class=code><span style=--0:#74A061;--1:#616972>/* XXlarge (large laptops and desktops, 1920px and up) */</span></div></div><div class=ec-line><div class=code><span style=--0:#74A061;--1:#616972>/* @media only screen and (min-width: 1920px) { } */</span></div></div></code></pre><div class=copy><button data-code="/* https://cssguidelin.es/#bem-like-naming */.cart-mini-cart {  display: flex;  flex-direction: column;  height: 100%;  padding: var(--spacing-small) var(--spacing-small) var(--spacing-medium);  box-sizing: border-box;}.cart-mini-cart__empty-cart {  width: 100%;  max-width: 800px;  height: 100%;  display: flex;  flex-direction: column;  justify-content: center;  align-self: center;}.cart-mini-cart__heading {  display: grid;  row-gap: var(--spacing-xsmall);  font: var(--type-headline-2-default-font);  letter-spacing: var(--type-headline-2-default-letter-spacing);}.cart-mini-cart__heading-divider {  width: 100%;  margin: var(--spacing-xxsmall) 0 0 0;}.cart-mini-cart__products {  flex: 1;  overflow-y: auto;  max-height: 100%;  padding-top: var(--spacing-medium);  padding-bottom: var(--spacing-medium);}.cart-mini-cart__products .dropin-cart-item__configurations li {  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;}.cart-mini-cart__footer {  display: grid;  grid-auto-flow: row;  gap: var(--spacing-small);  padding-top: var(--spacing-small);  row-gap: var(--spacing-xsmall);}.cart-mini-cart__footer__estimated-total {  font: var(--type-body-1-emphasized-font);  letter-spacing: var(--type-body-1-emphasized-letter-spacing);  display: grid;  grid-template: max-content / 1fr auto;  gap: var(--spacing-xsmall);}.cart-mini-cart__footer__estimated-total-excluding-taxes {  font: var(--type-body-2-default-font);  letter-spacing: var(--type-body-2-default-letter-spacing);  display: grid;  grid-template: max-content / 1fr auto;  gap: var(--spacing-xsmall);  color: var(--color-neutral-700);}.cart-mini-cart__footer__ctas {  display: grid;  grid-auto-flow: row;  gap: var(--spacing-xsmall);  padding-top: var(--spacing-small);}/* Medium (portrait tablets and large phones, 768px and up) *//* @media only screen and (min-width: 768px) { } *//* Large (landscape tablets, 1024px and up) *//* @media only screen and (min-width: 1024px) { } *//* XLarge (laptops/desktops, 1366px and up) *//* @media only screen and (min-width: 1366px) { } *//* XXlarge (large laptops and desktops, 1920px and up) *//* @media only screen and (min-width: 1920px) { } */" data-copied=Copied! title="Copy to clipboard"><div></div></button></div></figure></div></div></details><h2 id=summary>Summary</h2><p>You can customize the Cart dropin by overriding the CSS classes provided for each component. Create a CSS file for each component to make it easier to maintain and update your Cart CSS. Use the BEM naming convention and your browser’s dev tools to identify and copy the class to your corresponding component CSS file and override it as needed. Happy styling! 🎨</p></div><footer class="sl-flex astro-owwkwkko"><div class="sl-flex astro-owwkwkko meta"><a href=https://github.com/commerce-docs/microsite-commerce-storefront/edit/develop/src/content/docs/dropins/cart/cart-styles.mdx class="sl-flex astro-y5vay7ab"><svg class="astro-o5yzykuj astro-y5vay7ab" fill=currentColor viewBox="0 0 24 24" style=--sl-icon-size:1.2em aria-hidden=true height=16 width=16><path d="M22 7.24a1 1 0 0 0-.29-.71l-4.24-4.24a1 1 0 0 0-1.1-.22 1 1 0 0 0-.32.22l-2.83 2.83L2.29 16.05a1 1 0 0 0-.29.71V21a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .76-.29l10.87-10.93L21.71 8c.1-.1.17-.2.22-.33a1 1 0 0 0 0-.24v-.14l.07-.05ZM6.83 20H4v-2.83l9.93-9.93 2.83 2.83L6.83 20ZM18.17 8.66l-2.83-2.83 1.42-1.41 2.82 2.82-1.41 1.42Z"/></svg> Edit page</a><p>Last updated: <time datetime=2024-10-23T14:13:58.000Z>Oct 23, 2024</time></p></div><div class="astro-5r2yt2lu pagination-links" dir=ltr><a href=/microsite-commerce-storefront/dropins/cart/cart-installation/ class=astro-5r2yt2lu rel=prev><svg class="astro-ixejw5kg astro-5r2yt2lu" fill=currentColor viewBox="0 0 24 24" style=--sl-icon-size:1.5rem aria-hidden=true><title></title><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg><div class="astro-5r2yt2lu pb-3 pt-0"><div class="astro-5r2yt2lu text-gray-500 text-sm">Previous</div><div class="astro-5r2yt2lu flex-column"><div class="astro-5r2yt2lu text-base text-red-600">Cart Installation</div><div class="astro-5r2yt2lu link-title">Cart Installation</div></div></div></a><a href=/microsite-commerce-storefront/dropins/cart/cart-containers/ class=astro-5r2yt2lu rel=next><svg class="astro-ixejw5kg astro-5r2yt2lu" fill=currentColor viewBox="0 0 24 24" style=--sl-icon-size:1.5rem aria-hidden=true><title></title><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg><div class="astro-5r2yt2lu pb-3 pt-0"><div class="astro-5r2yt2lu text-gray-500 text-sm">Next</div><div class="astro-5r2yt2lu flex-column"><div class="astro-5r2yt2lu text-base text-red-600">Cart Containers</div><div class="astro-5r2yt2lu link-title">Cart Containers</div></div></div></a></div></footer></div></div></main></div></div></div></div></body></html>
+</div></div><div class=ec-line><div class=code><span style=--0:#74A061;--1:#616972>/* XXlarge (large laptops and desktops, 1920px and up) */</span></div></div><div class=ec-line><div class=code><span style=--0:#74A061;--1:#616972>/* @media only screen and (min-width: 1920px) { } */</span></div></div></code></pre><div class=copy><button data-code="/* https://cssguidelin.es/#bem-like-naming */.cart-mini-cart {  display: flex;  flex-direction: column;  height: 100%;  padding: var(--spacing-small) var(--spacing-small) var(--spacing-medium);  box-sizing: border-box;}.cart-mini-cart__empty-cart {  width: 100%;  max-width: 800px;  height: 100%;  display: flex;  flex-direction: column;  justify-content: center;  align-self: center;}.cart-mini-cart__heading {  display: grid;  row-gap: var(--spacing-xsmall);  font: var(--type-headline-2-default-font);  letter-spacing: var(--type-headline-2-default-letter-spacing);}.cart-mini-cart__heading-divider {  width: 100%;  margin: var(--spacing-xxsmall) 0 0 0;}.cart-mini-cart__products {  flex: 1;  overflow-y: auto;  max-height: 100%;  padding-top: var(--spacing-medium);  padding-bottom: var(--spacing-medium);}.cart-mini-cart__products .dropin-cart-item__configurations li {  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;}.cart-mini-cart__footer {  display: grid;  grid-auto-flow: row;  gap: var(--spacing-small);  padding-top: var(--spacing-small);  row-gap: var(--spacing-xsmall);}.cart-mini-cart__footer__estimated-total {  font: var(--type-body-1-emphasized-font);  letter-spacing: var(--type-body-1-emphasized-letter-spacing);  display: grid;  grid-template: max-content / 1fr auto;  gap: var(--spacing-xsmall);}.cart-mini-cart__footer__estimated-total-excluding-taxes {  font: var(--type-body-2-default-font);  letter-spacing: var(--type-body-2-default-letter-spacing);  display: grid;  grid-template: max-content / 1fr auto;  gap: var(--spacing-xsmall);  color: var(--color-neutral-700);}.cart-mini-cart__footer__ctas {  display: grid;  grid-auto-flow: row;  gap: var(--spacing-xsmall);  padding-top: var(--spacing-small);}/* Medium (portrait tablets and large phones, 768px and up) *//* @media only screen and (min-width: 768px) { } *//* Large (landscape tablets, 1024px and up) *//* @media only screen and (min-width: 1024px) { } *//* XLarge (laptops/desktops, 1366px and up) *//* @media only screen and (min-width: 1366px) { } *//* XXlarge (large laptops and desktops, 1920px and up) *//* @media only screen and (min-width: 1920px) { } */" data-copied=Copied! title="Copy to clipboard"><div></div></button></div></figure></div></div></details><h2 id=summary>Summary</h2><p>You can customize the Cart dropin by overriding the CSS classes provided for each component. Create a CSS file for each component to make it easier to maintain and update your Cart CSS. Use the BEM naming convention and your browser’s dev tools to identify and copy the class to your corresponding component CSS file and override it as needed. Happy styling! 🎨</p></div><footer class="sl-flex astro-owwkwkko"><div class="sl-flex astro-owwkwkko meta"><a href=https://github.com/commerce-docs/microsite-commerce-storefront/edit/develop/src/content/docs/dropins/cart/cart-styles.mdx class="sl-flex astro-y5vay7ab"><svg class="astro-o5yzykuj astro-y5vay7ab" fill=currentColor viewBox="0 0 24 24" style=--sl-icon-size:1.2em aria-hidden=true height=16 width=16><path d="M22 7.24a1 1 0 0 0-.29-.71l-4.24-4.24a1 1 0 0 0-1.1-.22 1 1 0 0 0-.32.22l-2.83 2.83L2.29 16.05a1 1 0 0 0-.29.71V21a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .76-.29l10.87-10.93L21.71 8c.1-.1.17-.2.22-.33a1 1 0 0 0 0-.24v-.14l.07-.05ZM6.83 20H4v-2.83l9.93-9.93 2.83 2.83L6.83 20ZM18.17 8.66l-2.83-2.83 1.42-1.41 2.82 2.82-1.41 1.42Z"/></svg> Edit page</a><p>Last updated: <time datetime=2024-10-23T15:20:13.000Z>Oct 23, 2024</time></p></div><div class="astro-5r2yt2lu pagination-links" dir=ltr><a href=/microsite-commerce-storefront/dropins/cart/cart-installation/ class=astro-5r2yt2lu rel=prev><svg class="astro-ixejw5kg astro-5r2yt2lu" fill=currentColor viewBox="0 0 24 24" style=--sl-icon-size:1.5rem aria-hidden=true><title></title><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg><div class="astro-5r2yt2lu pb-3 pt-0"><div class="astro-5r2yt2lu text-gray-500 text-sm">Previous</div><div class="astro-5r2yt2lu flex-column"><div class="astro-5r2yt2lu text-base text-red-600">Cart Installation</div><div class="astro-5r2yt2lu link-title">Cart Installation</div></div></div></a><a href=/microsite-commerce-storefront/dropins/cart/cart-containers/ class=astro-5r2yt2lu rel=next><svg class="astro-ixejw5kg astro-5r2yt2lu" fill=currentColor viewBox="0 0 24 24" style=--sl-icon-size:1.5rem aria-hidden=true><title></title><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg><div class="astro-5r2yt2lu pb-3 pt-0"><div class="astro-5r2yt2lu text-gray-500 text-sm">Next</div><div class="astro-5r2yt2lu flex-column"><div class="astro-5r2yt2lu text-base text-red-600">Cart Containers</div><div class="astro-5r2yt2lu link-title">Cart Containers</div></div></div></a></div></footer></div></div></main></div></div></div></div></body></html>