@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/CartItem/CartItem.css

@@ -0,0 +1,509 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
+ *******************************************************************/
+
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-cart-item {
+  --item-group-spacing: 0;
+  --group-spacing: var(--spacing-xsmall);
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+  color: var(--color-neutral-700);
+  container-type: inline-size;
+  container-name: cart-item;
+  position: relative;
+}
+
+/* Skeleton */
+.dropin-cart-item__skeleton {
+  gap: var(--spacing-xsmall);
+}
+
+.dropin-cart-item__skeleton__item {
+  width: 100%;
+  height: auto;
+}
+
+.dropin-cart-item__skeleton__item::after {
+  content: '';
+  display: inline-block;
+}
+
+.dropin-cart-item__image .dropin-cart-item__skeleton__item {
+  padding-bottom: 100%;
+}
+
+.dropin-cart-item__image:is(img),
+.dropin-cart-item__image img {
+  width: 100%;
+  height: auto;
+}
+
+.dropin-cart-item__title {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item__sku {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+}
+
+.dropin-cart-item__configurations {
+  list-style-type: none;
+  margin: var(--group-spacing) 0 0 0;
+  padding: 0;
+}
+
+.dropin-cart-item__configurations__item__value {
+  font-weight: inherit;
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item__configurations__item:not(:last-child) {
+  margin-right: var(--spacing-xxsmall);
+}
+
+.dropin-cart-item__quantity__value {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  display: none;
+}
+
+.dropin-cart-item__quantity__number {
+  font-weight: inherit;
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item__quantity__incrementer,
+.dropin-cart-item__quantity__picker {
+  max-width: 160px;
+  margin-top: calc(var(--group-spacing) / 2);
+  margin-bottom: var(--group-spacing);
+}
+
+.dropin-cart-item__remove {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.dropin-cart-item__warning,
+.dropin-cart-item__alert {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  margin-bottom: var(--group-spacing);
+  display: flex;
+  align-items: center;
+}
+
+.dropin-cart-item__discount,
+.dropin-cart-item__savings {
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+}
+
+.dropin-cart-item__warning svg,
+.dropin-cart-item__alert svg {
+  margin-right: var(--spacing-xxsmall);
+}
+
+.dropin-cart-item__savings__large-screen,
+.dropin-cart-item__discount__large-screen,
+.dropin-cart-item__savings__wrapper {
+  display: none;
+}
+
+.dropin-cart-item__warning,
+.dropin-cart-item__discount,
+.dropin-cart-item__savings {
+  color: var(--color-warning-800);
+}
+
+.dropin-cart-item__warning svg {
+  fill: var(--color-warning-800);
+  color: var(--color-neutral-50);
+}
+
+.dropin-cart-item__alert {
+  color: var(--color-alert-800);
+}
+
+.dropin-cart-item__alert svg {
+  fill: var(--color-alert-800);
+  color: var(--color-neutral-50);
+}
+
+.dropin-cart-item__total {
+  display: flex;
+  gap: var(--spacing-xxsmall);
+  flex-direction: column;
+}
+
+.dropin-cart-item__row-total {
+  display: flex;
+  gap: var(--spacing-xxsmall);
+}
+
+.dropin-cart-item__row-total__wrapper {
+  display: flex;
+}
+
+.dropin-cart-item__total-tax-excluded {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item--updating {
+  opacity: 0.4;
+  pointer-events: none;
+  position: relative;
+}
+
+.dropin-cart-item__spinner {
+  margin: 0 auto;
+  position: absolute;
+  z-index: 999;
+  left: 0;
+  right: 0;
+  top: calc(50% - (var(--size) / 2));
+  bottom: 0;
+}
+
+.dropin-cart-item__sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1;
+  margin: 0 -1px -1px 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1;
+}
+
+/* Grid */
+.dropin-cart-item__wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: min-content;
+  grid-column-gap: var(--spacing-small);
+}
+
+.dropin-cart-item__image {
+  grid-column: 1 / 2;
+  grid-row: 1 / 10;
+}
+
+.dropin-cart-item__title,
+.dropin-cart-item__sku,
+.dropin-cart-item__attributes,
+.dropin-cart-item__configurations,
+.dropin-cart-item__price,
+.dropin-cart-item__total,
+.dropin-cart-item__warning,
+.dropin-cart-item__alert,
+.dropin-cart-item__quantity,
+.dropin-cart-item__footer {
+  grid-column: 2 / 5;
+}
+
+.dropin-cart-item__actions {
+  grid-column: 1 / 5;
+  grid-row: 5 / 10;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.dropin-cart-item__actions button:only-child {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.dropin-cart-item__title--edit {
+  padding-right: var(--spacing-xbig);
+}
+
+/* Spacings */
+.dropin-cart-item__description,
+.dropin-cart-item__sku {
+  margin-top: var(--item-group-spacing);
+}
+
+.dropin-cart-item__price,
+.dropin-cart-item__footer div,
+.dropin-cart-item__attributes div {
+  margin-top: var(--group-spacing);
+}
+
+.dropin-cart-item__footer p {
+  margin-top: 0;
+}
+
+.dropin-cart-item__quantity:not(.dropin-cart-item__quantity--edit) {
+  display: none;
+}
+
+.dropin-cart-item__warning--quantity,
+.dropin-cart-item__alert--quantity {
+  display: none;
+}
+
+.dropin-cart-item__description {
+  display: none;
+}
+
+.dropin-cart-item__price-tax-message,
+.dropin-cart-item__price-tax-excluded-message,
+.dropin-cart-item__total-tax-message {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item__total-tax-message {
+  margin-left: var(--spacing-xxsmall);
+}
+
+.dropin-cart-item__footer {
+  font: var(--type-body-2-emphasized-font);
+  letter-spacing: var(--type-body-2-emphasized-letter-spacing);
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item__attributes {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+  color: var(--color-neutral-800);
+}
+
+/*  Smallish / Medium */
+@container cart-item (width >= 400px) and (width < 737px) {
+  .dropin-cart-item__title,
+  .dropin-cart-item__sku,
+  .dropin-cart-item__attributes,
+  .dropin-cart-item__configurations,
+  .dropin-cart-item__price,
+  .dropin-cart-item__warning,
+  .dropin-cart-item__alert,
+  .dropin-cart-item__quantity,
+  .dropin-cart-item__footer {
+    grid-column: 2 / 4;
+  }
+
+  .dropin-cart-item__actions {
+    grid-column: 1 / 4;
+    grid-row: 5 / 10;
+  }
+
+  .dropin-cart-item__title--edit {
+    grid-column: 2 / 5;
+  }
+
+  .dropin-cart-item__total:not(.dropin-cart-item__total--edit) {
+    grid-auto-rows: min-content;
+    grid-column: 4 / 5;
+    grid-row: 1 / 10;
+    display: grid;
+    justify-self: end;
+    text-align: right;
+    gap: unset;
+  }
+}
+
+/* Large */
+@container cart-item (width >= 737px) and (width < 1192px) {
+  /* Grid */
+  .dropin-cart-item__wrapper {
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  .dropin-cart-item__image {
+    grid-column: 1 / 3;
+  }
+
+  .dropin-cart-item__savings,
+  .dropin-cart-item__discount {
+    display: none;
+  }
+
+  .dropin-cart-item__savings__large-screen,
+  .dropin-cart-item__discount__large-screen,
+  .dropin-cart-item__savings__wrapper {
+    display: block;
+  }
+
+  .dropin-cart-item__savings__wrapper:empty {
+    display: none;
+  }
+
+  .dropin-cart-item__title,
+  .dropin-cart-item__sku,
+  .dropin-cart-item__savings__large-screen,
+  .dropin-cart-item__discount__large-screen,
+  .dropin-cart-item__attributes,
+  .dropin-cart-item__configurations,
+  .dropin-cart-item__savings__wrapper,
+  .dropin-cart-item__price,
+  .dropin-cart-item__warning,
+  .dropin-cart-item__alert,
+  .dropin-cart-item__quantity,
+  .dropin-cart-item__footer {
+    grid-column: 3 / 9;
+  }
+
+  .dropin-cart-item__actions {
+    grid-column: 10 / 13;
+    grid-row: 4 / 10;
+    text-align: right;
+  }
+
+  .dropin-cart-item__savings__wrapper {
+    margin-top: var(--spacing-xsmall);
+  }
+
+  .dropin-cart-item__title--edit {
+    padding-right: unset;
+  }
+
+  .dropin-cart-item__total {
+    grid-column: 10 / 13;
+    grid-row: 1 / 10;
+    text-align: right;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .dropin-cart-item__row-total {
+    display: contents;
+    gap: var(--spacing-xxsmall);
+  }
+
+  .dropin-cart-item__total--edit {
+    padding-right: calc(var(--spacing-xbig) + var(--spacing-xsmall));
+  }
+
+  .dropin-cart-item__row-total__wrapper {
+    display: contents;
+  }
+}
+
+/* Extra Large */
+@container cart-item (width >= 1192px) {
+  .dropin-cart-item {
+    --item-group-spacing: var(--spacing-xxsmall);
+    --group-spacing: var(--spacing-small);
+  }
+
+  /* Grid */
+  .dropin-cart-item__wrapper {
+    grid-template-columns: repeat(8, 1fr);
+    grid-column-gap: var(--spacing-medium);
+  }
+
+  .dropin-cart-item__image {
+    grid-column: 1 / 2;
+  }
+
+  .dropin-cart-item__title,
+  .dropin-cart-item__description,
+  .dropin-cart-item__sku,
+  .dropin-cart-item__price,
+  .dropin-cart-item__attributes,
+  .dropin-cart-item__configurations,
+  .dropin-cart-item__footer {
+    grid-column: 2 / 6;
+  }
+
+  .dropin-cart-item__title {
+    padding-right: unset;
+  }
+
+  .dropin-cart-item__actions {
+    grid-column: 9 / 13;
+    grid-row: 4 / 10;
+    text-align: right;
+  }
+
+  .dropin-cart-item__warning,
+  .dropin-cart-item__alert {
+    grid-column: 6 / 7;
+  }
+
+  .dropin-cart-item__warning--quantity,
+  .dropin-cart-item__alert--quantity {
+    display: flex;
+    align-items: center;
+  }
+
+  .dropin-cart-item__warning--quantity svg,
+  .dropin-cart-item__alert--quantity svg {
+    margin-right: var(--spacing-xxsmall);
+  }
+
+  .dropin-cart-item__warning--quantity svg {
+    fill: var(--color-warning-800);
+    color: var(--color-neutral-50);
+  }
+
+  .dropin-cart-item__alert--quantity svg {
+    fill: var(--color-alert-800);
+    color: var(--color-neutral-50);
+  }
+
+  .dropin-cart-item__warning:not(.dropin-cart-item__warning--quantity),
+  .dropin-cart-item__alert:not(.dropin-cart-item__alert--quantity) {
+    display: none;
+  }
+
+  .dropin-cart-item__total {
+    grid-column: 10 / 13;
+    grid-row: 1 / 10;
+    justify-self: end;
+    text-align: right;
+  }
+
+  .dropin-cart-item__total:has(.dropin-cart-item__total-tax-excluded) {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .dropin-cart-item__row-total {
+    display: flex;
+    gap: var(--spacing-xxsmall);
+  }
+
+  .dropin-cart-item__total--edit {
+    padding-right: calc(var(--spacing-xbig) + var(--spacing-xsmall));
+  }
+
+  .dropin-cart-item__quantity__incrementer,
+  .dropin-cart-item__quantity__picker {
+    margin-top: 0;
+  }
+
+  .dropin-cart-item__quantity:not(.dropin-cart-item__quantity--edit),
+  .dropin-cart-item__quantity__value {
+    display: unset;
+  }
+
+  .dropin-cart-item__price__quantity {
+    display: none;
+  }
+
+  .dropin-cart-item__title {
+    font: var(--type-headline-2-default-font);
+    letter-spacing: var(--type-headline-2-default-letter-spacing);
+  }
+}