orionplace-react 0.1.0 → 0.2.0

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

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