orionplace-react 0.7.8 → 0.8.0

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

@@ -1,730 +0,0 @@
-.root {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 2rem;
-  color: var(--orionplace-text);
-  font: inherit;
-  container-type: inline-size;
-}
-
-.block,
-.divided {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.divided {
-  padding-top: 2rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.root h3,
-.root h4,
-.root h5,
-.digital h4,
-.optionGroup h4 {
-  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;
-}
-
-.root p {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.icon {
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-
-/* Delivery steps, as Nuxt `op-orders-steps`: three columns tied by a rail. */
-.steps {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  column-gap: 0.75rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.step {
-  position: relative;
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding-top: 2rem;
-}
-
-/* The rail runs from the marker of this step to the marker of the next one. */
-.step::before {
-  position: absolute;
-  top: 9px;
-  right: calc(-0.75rem - 12px);
-  left: 0.75rem;
-  height: 0.125rem;
-  background: var(--orionplace-border);
-  content: '';
-}
-
-.step:last-child::before {
-  display: none;
-}
-
-.step[data-step-state='done']::before {
-  background: var(--orionplace-inverse-surface);
-}
-
-.stepMarker {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  box-sizing: border-box;
-  width: 1.25rem;
-  height: 1.25rem;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 50%;
-  color: var(--orionplace-muted);
-  background: var(--orionplace-surface);
-}
-
-.stepMarker .icon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
-.step[data-step-state='done'] .stepMarker {
-  border-color: var(--orionplace-inverse-surface);
-  color: var(--orionplace-inverse-text);
-  background: var(--orionplace-inverse-surface);
-}
-
-.step[data-step-current='true'] .stepMarker {
-  border-width: 2px;
-  border-color: var(--orionplace-attention);
-  color: var(--orionplace-attention);
-  background: var(--orionplace-attention-surface);
-}
-
-/* The current step keeps the dot even when it is already complete. */
-.stepDot {
-  display: block;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background: currentColor;
-}
-
-.stepLabel,
-.stepState {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.step[data-step-state='done'] .stepLabel,
-.step[data-step-current='true'] .stepLabel {
-  color: var(--orionplace-text);
-}
-
-.stepState {
-  color: var(--orionplace-attention);
-}
-
-.stepNote {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.itemInfo small {
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 400;
-}
-
-.columns {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 2.5rem;
-  padding-top: 2rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.columns > section + section {
-  padding-left: 2.5rem;
-  border-left: 1px solid var(--orionplace-border);
-}
-
-.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;
-}
-
-/* The options of an item and their total, aligned with the line amounts. */
-.amounts {
-  column-gap: 0;
-}
-
-.amounts dd {
-  padding-left: 1rem;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.amounts .total > dt,
-.amounts .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;
-}
-
-.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);
-}
-
-.shipments {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.shipment {
-  display: flex;
-  box-sizing: border-box;
-  min-width: 0;
-  flex-direction: column;
-  border: 1px solid var(--orionplace-border);
-}
-
-.shipment > header {
-  display: flex;
-  box-sizing: border-box;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem 1rem;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--orionplace-border);
-  background: var(--orionplace-muted-surface);
-}
-
-.shipment > header h4 {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.25rem 0.75rem;
-  color: var(--orionplace-text);
-}
-
-.shipment > header small {
-  min-width: 0;
-  color: var(--orionplace-muted);
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-.shipmentBody {
-  display: flex;
-  box-sizing: border-box;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1.25rem;
-  padding: 1rem;
-}
-
-/* The tracking number is copied into a carrier's site, so it stands apart
-   and is selected whole with one click (Nuxt `op-orders-track`). */
-.track {
-  display: inline-block;
-  padding: 0.125rem 0.5rem;
-  border: 1px solid var(--orionplace-border);
-  color: var(--orionplace-text);
-  background: var(--orionplace-muted-surface);
-  font-family: ui-monospace, monospace;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  letter-spacing: 0.04em;
-  overflow-wrap: anywhere;
-  user-select: all;
-}
-
-.items,
-.optionList {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.items > li {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.items > li + li {
-  margin-top: 1.25rem;
-  padding-top: 1.25rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.itemMain {
-  display: flex;
-  min-width: 0;
-  align-items: flex-start;
-  gap: 1rem;
-}
-
-.optionMain {
-  gap: 0.75rem;
-}
-
-/* Thumbnails sit on the page surface in a light frame, as in the order list. */
-.thumb {
-  display: flex;
-  box-sizing: border-box;
-  width: 4rem;
-  height: 4rem;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  padding: 0.375rem;
-  border: 1px solid var(--orionplace-border);
-  color: var(--orionplace-text);
-  background: var(--orionplace-surface);
-}
-
-.thumbSmall {
-  width: 3rem;
-  height: 3rem;
-  padding: 0.25rem;
-}
-
-.thumbImage {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.itemInfo {
-  display: grid;
-  min-width: 0;
-  flex: 1;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.25rem 1.5rem;
-}
-
-.itemInfo a {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.itemInfo a {
-  color: var(--orionplace-text);
-  overflow-wrap: anywhere;
-  text-decoration: none;
-  outline: none;
-}
-
-.itemInfo a:focus-visible,
-.link:focus-visible {
-  opacity: 0.7;
-}
-
-@media (hover: hover) {
-  .itemInfo a:hover,
-  .link:hover {
-    opacity: 0.7;
-  }
-}
-
-.itemInfo small {
-  line-height: 1.25rem;
-}
-
-.itemInfo p,
-.itemInfo small {
-  grid-column: 1;
-}
-
-.itemInfo strong {
-  grid-column: 2;
-  grid-row: 1 / 4;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-/* A request or conversation link: a small uppercase underlined action. */
-.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;
-}
-
-.muted {
-  color: var(--orionplace-muted);
-}
-
-/*
- * Return state of one item or option: an accented strip with the units at
- * each stage, the amount and the way into the conversation.
- */
-.refund {
-  display: flex;
-  box-sizing: border-box;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem 0.75rem 0.75rem 1rem;
-  border-left: 2px solid var(--orionplace-attention);
-  background: var(--orionplace-attention-surface);
-}
-
-.refund[data-tone='success'] {
-  border-left-color: var(--orionplace-success);
-  background: var(--orionplace-success-surface);
-}
-
-.refund[data-tone='danger'] {
-  border-left-color: var(--orionplace-danger);
-  background: var(--orionplace-danger-surface);
-}
-
-.refund h5 {
-  color: var(--orionplace-text);
-}
-
-.refundRows {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) max-content;
-  gap: 0.25rem 1rem;
-  margin: 0;
-}
-
-.refundRows > div {
-  display: contents;
-}
-
-.refundRows dt,
-.refundRows dd {
-  margin: 0;
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-}
-
-.refundRows dt {
-  color: var(--orionplace-muted);
-}
-
-.refundRows dd {
-  color: var(--orionplace-text);
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.digital,
-.attachment,
-.optionCard {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.attachment {
-  box-sizing: border-box;
-  padding: 1rem;
-  border: 1px solid var(--orionplace-border);
-}
-
-/*
- * Options of an ordered item, in the same shape as the cart: the groups are
- * indented to the name column of the item and tied to it by one branch line.
- */
-.options {
-  display: flex;
-  box-sizing: border-box;
-  min-width: 0;
-  flex-direction: column;
-  margin-left: 0.75rem;
-  padding-left: 1rem;
-  border-left: 1px solid var(--orionplace-border);
-}
-
-.optionGroup {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem 0;
-}
-
-.optionGroup + .optionGroup {
-  border-top: 1px solid var(--orionplace-border);
-}
-
-/* A short connector from the branch line to the name of the group. */
-.optionGroup > h4::before {
-  display: block;
-  width: 0.75rem;
-  height: 1px;
-  flex-shrink: 0;
-  margin-left: -1rem;
-  background: var(--orionplace-border);
-  content: '';
-}
-
-.optionList {
-  gap: 1rem;
-}
-
-.optionCard + .optionCard {
-  padding-top: 1rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-/* Option names and amounts read one step smaller than the item above. */
-.optionInfo {
-  gap: 0.25rem 1rem;
-}
-
-.optionInfo a,
-.optionInfo p,
-.optionInfo strong {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  font-weight: 400;
-}
-
-.attachmentRow {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.attachmentRow p {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-/* Download buttons, as Nuxt `op-orders-button`. */
-.root button {
-  display: inline-flex;
-  box-sizing: border-box;
-  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;
-  color: var(--orionplace-text);
-  background: transparent;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  cursor: pointer;
-  outline: none;
-}
-
-.root button:focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .root button:hover:not(:disabled) {
-    background: var(--orionplace-hover);
-  }
-}
-
-.root button:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-.itemSummary {
-  width: 100%;
-  max-width: 20rem;
-  align-self: flex-end;
-}
-
-.pre {
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-@container (max-width: 47.99rem) {
-  .columns {
-    grid-template-columns: 1fr;
-    gap: 2rem;
-  }
-
-  .columns > section + section {
-    padding-top: 2rem;
-    padding-left: 0;
-    border-top: 1px solid var(--orionplace-border);
-    border-left: 0;
-  }
-}
-
-/*
- * The narrow and wide layouts of an item, its options and returns switch at
- * 34rem of the details' own width, as in the Nuxt and Svelte packages.
- */
-@container (max-width: 33.99rem) {
-  .itemInfo {
-    grid-template-columns: 1fr;
-  }
-
-  .itemInfo strong {
-    order: 1;
-    grid-column: 1;
-    grid-row: auto;
-  }
-}
-
-@container (min-width: 34rem) {
-  .indent {
-    margin-left: 5rem;
-  }
-
-  .optionIndent {
-    margin-left: 3.75rem;
-  }
-
-  .options {
-    margin-left: 5rem;
-    padding-left: 1.25rem;
-  }
-
-  .optionGroup > h4::before {
-    width: 1rem;
-    margin-left: -1.25rem;
-  }
-}