orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/wallet/StorefrontWallet.module.css

@@ -0,0 +1,507 @@
+.root {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 1.5rem;
+  color: var(--orionplace-text);
+  font: inherit;
+  container-type: inline-size;
+}
+
+.heading {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.heading h1,
+.panelHeading h2 {
+  margin: 0;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.heading h1 {
+  font-size: 1.5rem;
+  line-height: 1.25;
+}
+
+.heading p,
+.confirmation p {
+  margin: 0;
+  color: var(--orionplace-muted);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.balance {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.5rem 1.25rem;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-muted-surface);
+}
+
+.balanceIdentity {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 1rem;
+}
+
+.iconTile {
+  display: grid;
+  width: 3rem;
+  height: 3rem;
+  box-sizing: border-box;
+  flex: none;
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+}
+
+.iconTile svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.iconTile img,
+.iconTile > span {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* A payment row keeps a smaller tile than the balance, its logo inset. */
+.rowTile {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.rowTile img {
+  box-sizing: border-box;
+  padding: 0.25rem;
+}
+
+.button,
+.textButton,
+.tab {
+  box-sizing: border-box;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.button {
+  display: inline-flex;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0 1.5rem;
+  border: 1px solid var(--orionplace-text);
+}
+
+.button svg,
+.textButton svg,
+.panelHeading svg,
+.refund svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+
+/* The refresh arrows are drawn on a 20px grid and shown at 14px. */
+.textButton .refreshIcon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.primary {
+  border-color: var(--orionplace-accent);
+  background: var(--orionplace-accent);
+  color: var(--orionplace-surface);
+}
+
+.button:disabled,
+.textButton:disabled,
+.tab:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+/* A refused request uses the shared error notice, as Nuxt `op-notice-error`. */
+.notice {
+  composes: notice noticeError from '../account/account.module.css';
+}
+
+.panel {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  border: 1px solid var(--orionplace-border);
+}
+
+.panelHeading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.25rem 1.25rem 0.75rem;
+}
+
+.panelHeading h2 {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+  letter-spacing: 0.08em;
+}
+
+.textButton,
+.relation {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0 0.125rem;
+  border: 0;
+  border-bottom: 1px solid currentColor;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 1.5rem;
+  padding: 0 1.25rem;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+
+.tab {
+  margin-bottom: -1px;
+  padding: 0.75rem 0;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  color: var(--orionplace-muted);
+}
+
+.tab[aria-current="page"] {
+  border-color: var(--orionplace-text);
+  color: var(--orionplace-text);
+}
+
+.loading {
+  min-height: 10rem;
+  margin: 0;
+  padding: 0 1.25rem;
+}
+
+.empty {
+  padding: 2rem 1.25rem;
+}
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.75rem;
+  padding: 1.25rem;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+
+.row:last-child {
+  border-bottom: 0;
+}
+
+.rowMain,
+.rowDetails,
+.amount {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.rowMain {
+  gap: 0.5rem;
+}
+
+.rowDetails {
+  gap: 0.75rem;
+}
+
+.rowHeading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+}
+
+.number,
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--orionplace-text);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  line-height: 1rem;
+  text-transform: uppercase;
+}
+
+.meta {
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  line-height: calc(1 / 0.75);
+  text-transform: uppercase;
+}
+
+.purpose {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+}
+
+.relation {
+  color: inherit;
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.rowDetails {
+  grid-column: 2 / 4;
+}
+
+.amount {
+  align-items: flex-end;
+  gap: 0.375rem;
+  text-align: right;
+}
+
+.amountValue {
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.positive {
+  color: var(--orionplace-success);
+}
+
+.negative {
+  color: var(--orionplace-danger);
+}
+
+.badge {
+  border-color: var(--orionplace-border);
+  background: var(--orionplace-muted-surface);
+  color: var(--orionplace-muted);
+  font-weight: 400;
+}
+
+.badge[data-tone="success"] {
+  border-color: var(--orionplace-success);
+  color: var(--orionplace-success);
+}
+
+.badge[data-tone="attention"] {
+  border-color: var(--orionplace-attention);
+  color: var(--orionplace-attention);
+}
+
+.badge[data-tone="danger"] {
+  border-color: var(--orionplace-danger);
+  color: var(--orionplace-danger);
+}
+
+.reference {
+  display: grid;
+  margin: 0;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+}
+
+.reference div {
+  display: grid;
+}
+
+.reference div + div {
+  border-top: 1px solid var(--orionplace-border);
+}
+
+.reference dt,
+.reference dd {
+  min-width: 0;
+  margin: 0;
+  padding: 0.375rem 0.75rem;
+  line-height: 1.25rem;
+  overflow-wrap: anywhere;
+}
+
+.reference dt {
+  background: var(--orionplace-muted-surface);
+  color: var(--orionplace-muted);
+  font-size: 0.6875rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.reference dd {
+  word-break: break-all;
+}
+
+/* A comment is written text, so it wraps between words like ordinary copy. */
+.reference .note dd {
+  word-break: normal;
+}
+
+.refunds {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  background: var(--orionplace-muted-surface);
+  list-style: none;
+}
+
+.refund {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.25rem 0.75rem;
+  padding: 0.75rem 1rem;
+}
+
+.refund + .refund {
+  border-top: 1px solid var(--orionplace-border);
+}
+
+/* A refund amount is smaller than the payment it belongs to. */
+.refund .amountValue {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.refundCopy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.refundCopy p {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+}
+
+.refundReference {
+  grid-column: 2 / 4;
+  margin-top: 0.5rem;
+}
+
+.actions,
+.confirmationActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.confirmation {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.row .button {
+  min-height: 2.25rem;
+  padding: 0 1rem;
+}
+
+.screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/*
+ * The wallet's own width, not the screen's, as in the other packages: from
+ * 592px the sides get more room and each payment reference puts its label
+ * beside its value.
+ */
+@container (min-width: 592px) {
+  .balance,
+  .panelHeading,
+  .tabs,
+  .loading,
+  .empty,
+  .row {
+    padding-inline: 1.5rem;
+  }
+
+  .row {
+    column-gap: 1rem;
+  }
+
+  .reference {
+    grid-template-columns: 11rem minmax(0, 1fr);
+  }
+
+  .reference div {
+    display: contents;
+  }
+
+  .reference div + div {
+    border-top: 0;
+  }
+
+  .reference div + div dt,
+  .reference div + div dd {
+    border-top: 1px solid var(--orionplace-border);
+  }
+
+  .reference dt {
+    border-right: 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; }
+}