orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/orders/StorefrontOrders.module.css

@@ -1,633 +0,0 @@
-.root {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1.5rem;
-  color: var(--orionplace-text);
-  font: inherit;
-  container-type: inline-size;
-}
-
-.heading,
-.cardHeading {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.heading {
-  align-items: flex-end;
-}
-
-.heading > div {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.heading h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  line-height: 1.25;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-/* The payment panel, payment form and order details inside keep their own buttons. */
-.root button:where(:not([data-feature-part=PaymentPanel] *, [data-feature-part=OrderPaymentForm] *, [data-feature-part=OrderDetails] *)),
-.root .primary {
-  display: inline-flex;
-  min-height: 2.75rem;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0 1rem;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  color: inherit;
-  background: var(--orionplace-surface);
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-decoration: none;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-.root .primary {
-  border-color: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-  background: var(--orionplace-accent);
-}
-
-.root button:where(:not([data-feature-part=PaymentPanel] *, [data-feature-part=OrderPaymentForm] *, [data-feature-part=OrderDetails] *)):disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-
-/* The order's own actions and their confirmation are outlined in the text
-   colour, as Nuxt's `op-orders-button`. */
-.cardActions button:not(.primary):where(:not([data-feature-part=OrderPaymentForm] *)),
-.confirmation button:not(.primary) {
-  padding: 0 1.5rem;
-  border-color: var(--orionplace-text);
-  color: var(--orionplace-text);
-  background: transparent;
-}
-
-.cardActions button:not(.primary):where(:not([data-feature-part=OrderPaymentForm] *)):focus-visible,
-.confirmation button:not(.primary):focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .cardActions button:not(.primary):where(:not([data-feature-part=OrderPaymentForm] *)):hover:not(:disabled),
-  .confirmation button:not(.primary):hover:not(:disabled) {
-    background: var(--orionplace-hover);
-  }
-}
-
-.cardActions .primary,
-.confirmation .primary {
-  padding: 0 1.5rem;
-}
-
-/* Underlined text action, as Nuxt `op-orders-link` («← All orders»). */
-.link {
-  display: inline-flex;
-  align-items: center;
-  align-self: flex-start;
-  gap: 0.375rem;
-  padding: 0 0 0.125rem;
-  border-bottom: 1px solid currentColor;
-  color: var(--orionplace-text);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-decoration: none;
-  text-transform: uppercase;
-  outline: none;
-}
-
-.link:focus-visible {
-  opacity: 0.7;
-}
-
-@media (hover: hover) {
-  .link:hover {
-    opacity: 0.7;
-  }
-}
-
-/* «Обновить» beside the title: an underlined text action, as
-   `op-orders-link` in the other packages. */
-.root .refresh {
-  min-height: 0;
-  align-self: start;
-  gap: 0.375rem;
-  padding: 0 0 0.125rem;
-  border: 0;
-  border-bottom: 1px solid currentColor;
-  background: transparent;
-  color: var(--orionplace-text);
-  font-weight: 400;
-}
-
-.root .refresh:focus-visible {
-  background: transparent;
-  opacity: 0.7;
-}
-
-@media (hover: hover) {
-  .root .refresh:hover:not(:disabled) {
-    background: transparent;
-    opacity: 0.7;
-  }
-}
-
-.tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0 1.5rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-/* Tabs as Nuxt `order-tab`: text with a 2px rule under the current one. */
-.root .tabs button {
-  display: block;
-  min-height: 0;
-  margin-bottom: -1px;
-  padding: 0.75rem 0;
-  border: 0;
-  border-bottom: 2px solid transparent;
-  color: var(--orionplace-muted);
-  background: transparent;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.root .tabs button:focus-visible {
-  color: var(--orionplace-text);
-  outline: none;
-}
-
-@media (hover: hover) {
-  .root .tabs button:hover:not(:disabled) {
-    color: var(--orionplace-text);
-  }
-}
-
-.root .tabs button[aria-current='page'] {
-  border-color: var(--orionplace-text);
-  color: var(--orionplace-text);
-}
-
-/* The shared notices, as Nuxt `op-notice`: neutral, error and success. */
-.notice {
-  composes: notice from '../account/account.module.css';
-}
-
-.error {
-  composes: notice noticeError from '../account/account.module.css';
-}
-
-.success {
-  composes: notice noticeSuccess from '../account/account.module.css';
-}
-
-.confirmation p {
-  margin: 0;
-}
-
-.placeholders {
-  display: grid;
-  gap: 2.5rem;
-}
-
-.placeholders > div {
-  min-height: 27.5rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-muted-surface);
-}
-
-/*
- * One order card, as Nuxt `op-orders-card`: a frame and a heavier opening edge
- * in the text colour, a tinted header strip, and blocks that stack on a phone.
- */
-.card {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  border: 1px solid var(--orionplace-text);
-  border-top-width: 3px;
-  background: var(--orionplace-surface);
-}
-
-.card + .card {
-  margin-top: 1rem;
-}
-
-.root .cardHeading {
-  align-items: flex-start;
-  padding: 1.25rem;
-  border-bottom: 1px solid var(--orionplace-text);
-  background: var(--orionplace-muted-surface);
-}
-
-.cardHeading > div {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.cardHeading h2,
-.cardHeading p {
-  margin: 0;
-}
-
-.cardHeading h2 {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.cardHeading p {
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.cardHeading time {
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-.badges {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-}
-
-.badges dd {
-  margin: 0;
-}
-
-.badge {
-  display: inline-flex;
-  box-sizing: border-box;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.25rem 0.5rem;
-  border: 1px solid var(--orionplace-text);
-  color: var(--orionplace-text);
-  background: transparent;
-  font-size: 0.6875rem;
-  line-height: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.badge .icon {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-.badge[data-tone='progress'] {
-  border-color: var(--orionplace-inverse-surface);
-  color: var(--orionplace-inverse-text);
-  background: var(--orionplace-inverse-surface);
-}
-
-.badge[data-tone='success'] {
-  border-color: var(--orionplace-success);
-  color: var(--orionplace-success);
-  background: var(--orionplace-success-surface);
-}
-
-.badge[data-tone='danger'] {
-  border-color: var(--orionplace-danger);
-  color: var(--orionplace-danger);
-  background: var(--orionplace-danger-surface);
-}
-
-.icon {
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-
-/* Blocks stack on a narrow card, then items take a full row above delivery
-   and the amounts, then all three share one row. */
-.cardBody {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 1.5rem;
-  padding: 1.25rem;
-}
-
-.cardBody > section {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.cardBody > * + * {
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.cardBody h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.cardBody p {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.thumbnails {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-/* Thumbnails sit on the page surface, never on grey (Nuxt `orders.css`). */
-.thumbnails li {
-  box-sizing: border-box;
-  display: flex;
-  width: 3.5rem;
-  height: 3.5rem;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  padding: 0.375rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-}
-
-.thumbnails img,
-.thumbnails [data-image-placeholder] {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.thumbnails .more {
-  font-size: 0.875rem;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.25rem;
-}
-
-/* Label/value pairs: one label column, aligned across every row. */
-.pairs {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: 0.5rem 1rem;
-  margin: 0;
-}
-
-.pairs > div {
-  display: contents;
-}
-
-.pairs dt {
-  max-width: 12rem;
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.pairs dd {
-  min-width: 0;
-  margin: 0;
-  color: var(--orionplace-text);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  overflow-wrap: break-word;
-}
-
-.amounts {
-  column-gap: 0;
-}
-
-.amounts dd {
-  padding-left: 1rem;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.amounts div[data-tone='discount'] dd {
-  color: var(--orionplace-danger);
-}
-
-.amounts div[data-tone='due'] dd {
-  font-weight: 500;
-}
-
-.amounts div[data-tone='total'] dt,
-.amounts div[data-tone='total'] dd {
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--orionplace-border);
-  color: var(--orionplace-text);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-}
-
-.card > .notice {
-  margin: 0 1.25rem 1.25rem;
-}
-
-.cardActions {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.25rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-/* Full-width buttons on a phone, one row from 592px (Nuxt). */
-.root .cardActions > div[role='group'],
-.root .confirmation > div {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.confirmation {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.25rem;
-  border: 1px solid var(--orionplace-border);
-}
-
-.disclosure {
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.disclosure > summary {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 1rem 1.25rem;
-  outline: none;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  list-style: none;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-.disclosure > summary::-webkit-details-marker {
-  display: none;
-}
-
-.disclosure > summary:focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .disclosure > summary:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.disclosure > summary::after {
-  margin-left: auto;
-  padding-left: 1rem;
-  font-size: 1rem;
-  line-height: 1;
-  font-weight: 400;
-  content: '+';
-}
-
-.disclosure[open] > summary::after {
-  content: '\2212';
-}
-
-.disclosure > div {
-  padding: 0.5rem 1.25rem 1.5rem;
-}
-
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-@container (min-width: 36rem) {
-  .cardBody {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .cardBody > :first-child {
-    grid-column: 1 / -1;
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid var(--orionplace-border);
-  }
-
-  .cardBody > * + * {
-    padding-top: 0;
-    border-top: 0;
-  }
-
-  .cardBody > :nth-child(3) {
-    padding-left: 1.5rem;
-    border-left: 1px solid var(--orionplace-border);
-  }
-}
-
-@container (min-width: 56rem) {
-  .cardBody {
-    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
-    gap: 2rem;
-  }
-
-  .cardBody > :first-child {
-    grid-column: auto;
-    padding-bottom: 0;
-    border-bottom: 0;
-  }
-
-  .cardBody > * + * {
-    padding-left: 2rem;
-    border-left: 1px solid var(--orionplace-border);
-  }
-}
-
-/* The title follows the component's own width, as in the other packages. */
-@container (min-width: 592px) {
-  .heading h1 { font-size: 1.875rem; }
-
-  .root .cardHeading,
-  .cardBody,
-  .cardActions,
-  .disclosure > summary,
-  .disclosure > div {
-    padding-right: 1.5rem;
-    padding-left: 1.5rem;
-  }
-
-  .card > .notice {
-    margin-right: 1.5rem;
-    margin-left: 1.5rem;
-  }
-
-  .root .cardActions > div[role='group'],
-  .root .confirmation > div {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.75rem;
-  }
-}