orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/cart/StorefrontCart.module.css

@@ -1,460 +0,0 @@
-.root {
-  container-type: inline-size;
-  display: flex;
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  flex-direction: column;
-  gap: 2rem;
-  color: var(--orionplace-text);
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.pageHeading {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 1rem;
-  padding-bottom: 1.25rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-.pageHeading h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 1.25;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.layout {
-  display: grid;
-  min-width: 0;
-  align-items: start;
-  gap: 2rem;
-}
-
-.content {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-.lines {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-}
-
-.lines > h2,
-.panel > h2,
-.summary > h2 {
-  margin: 0;
-  padding-bottom: 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.panel {
-  display: flex;
-  box-sizing: border-box;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1.25rem;
-  padding: 1.25rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-}
-
-.shipment {
-  gap: 0;
-}
-
-.delivery {
-  padding-top: 1.25rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.origin {
-  display: flex;
-  min-width: 0;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0 0 1.25rem;
-}
-
-.origin svg {
-  width: 1.5rem;
-  height: 1.5rem;
-  flex: 0 0 auto;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.origin div {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-}
-
-.origin strong {
-  font-weight: 500;
-}
-
-.meta {
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.origin .muted {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.summary {
-  gap: 1.25rem;
-}
-
-.summary > h2,
-.created > h2 {
-  padding-bottom: 0;
-}
-
-.totals {
-  display: flex;
-  margin: 0;
-  flex-direction: column;
-}
-
-.totals div {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.5rem 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.totals dt,
-.totals dd {
-  margin: 0;
-}
-
-.totals dd {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-/* The total: 16px/24px, weight 500, under a rule, as the Nuxt reference. */
-.totals div:last-child {
-  margin-top: 0.5rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--orionplace-border);
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 500;
-}
-
-.promo {
-  display: flex;
-  align-items: flex-end;
-}
-
-.promo label {
-  display: grid;
-  min-width: 0;
-  flex: 1;
-  gap: 0.5rem;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.promo label b {
-  color: var(--orionplace-danger);
-}
-
-.promo input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 2.75rem;
-  padding: 0 0.75rem;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  color: var(--orionplace-text);
-  background: var(--orionplace-surface);
-  font: inherit;
-  /* The code itself is regular text (the label above is the small caps). */
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  letter-spacing: normal;
-  text-transform: none;
-  outline: none;
-}
-
-.promo input:focus-visible {
-  border-color: var(--orionplace-text);
-}
-
-.promo .button {
-  margin-left: -1px;
-  padding-inline: 1.5rem;
-}
-
-.appliedPromo {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.appliedPromo p,
-.confirmation p,
-.error p {
-  margin: 0;
-}
-
-.appliedPromo p {
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.button,
-.textButton {
-  box-sizing: border-box;
-  color: inherit;
-  background: transparent;
-  font: inherit;
-  cursor: pointer;
-  outline: none;
-}
-
-.button {
-  display: inline-flex;
-  width: fit-content;
-  min-height: 2.75rem;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0 1.5rem;
-  border: 1px solid var(--orionplace-text);
-  border-radius: 0;
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  font-weight: 500;
-  text-decoration: none;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.button:focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .button:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.button:disabled,
-.textButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-.primary {
-  border-color: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-  background: var(--orionplace-accent);
-}
-
-.primary:focus-visible {
-  background: var(--orionplace-accent);
-  opacity: 0.85;
-}
-
-@media (hover: hover) {
-  .primary:hover {
-    background: var(--orionplace-accent);
-    opacity: 0.85;
-  }
-}
-
-.wide {
-  width: 100%;
-}
-
-.textButton,
-.link {
-  display: inline-flex;
-  width: fit-content;
-  align-self: flex-start;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0 0 0.125rem;
-  border: 0;
-  border-bottom: 1px solid currentColor;
-  border-radius: 0;
-  color: var(--orionplace-text);
-  background: transparent;
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  text-decoration: none;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.textButton:focus-visible,
-.link:focus-visible {
-  opacity: 0.7;
-}
-
-@media (hover: hover) {
-  .textButton:hover,
-  .link:hover {
-    opacity: 0.7;
-  }
-}
-
-.notice,
-.error {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0.875rem 1rem;
-  border: 1px solid var(--orionplace-border);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.error {
-  display: grid;
-  gap: 0.75rem;
-  border-color: var(--orionplace-danger);
-  color: var(--orionplace-danger);
-}
-
-.attention {
-  border-color: var(--orionplace-attention);
-  color: var(--orionplace-attention);
-  background: var(--orionplace-attention-surface);
-}
-
-/*
- * A promo notice (the Nuxt reference's op-notice tones): 12px 16px, the
- * icon in the left padding, so wrapped text keeps its own column. The icon
- * is decorative and drawn by CSS.
- */
-.notice.attention,
-.notice.error {
-  position: relative;
-  padding: 0.75rem 1rem 0.75rem 44px;
-}
-
-.notice.error {
-  background: var(--orionplace-danger-surface);
-}
-
-.notice.attention::before,
-.notice.error::before {
-  position: absolute;
-  top: 0.875rem;
-  left: 0.875rem;
-  width: 1.25rem;
-  height: 1.25rem;
-  content: "";
-  background: currentColor;
-  -webkit-mask: var(--cart-notice-icon) center / contain no-repeat;
-  mask: var(--cart-notice-icon) center / contain no-repeat;
-}
-
-.notice.attention {
-  --cart-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19Z'/%3E%3Cpath d='M12 10v4.5m0 2.5h.01'/%3E%3C/svg%3E");
-}
-
-.notice.error {
-  --cart-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6m0 4h.01'/%3E%3C/svg%3E");
-}
-
-.muted {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-}
-
-.empty {
-  min-height: 12rem;
-  margin: 0;
-  color: var(--orionplace-muted);
-  text-align: center;
-}
-
-.emptyState {
-  border: 1px solid var(--orionplace-border);
-}
-
-.confirmation {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding-top: 1.25rem;
-  border-top: 1px solid var(--orionplace-border);
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-}
-
-.confirmation > div {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.5rem;
-}
-
-.confirmation .button {
-  width: 100%;
-  padding-inline: 0.75rem;
-}
-
-@container (min-width: 64rem) {
-  .layout {
-    grid-template-columns: minmax(0, 1fr) 22.5rem;
-    gap: 3rem;
-  }
-
-  .summary {
-    position: sticky;
-    top: 1.5rem;
-  }
-}
-
-/* The cart's own width, not the screen's, as in the other packages. */
-@container (min-width: 592px) {
-  .panel {
-    padding: 1.5rem;
-  }
-}
-
-/* The title follows the component's own width, as in the other packages. */
-@container (min-width: 592px) {
-  .pageHeading h1 { font-size: 1.875rem; }
-}