orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,633 @@
+.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;
+  }
+}