orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/products/ProductReviews.module.css

@@ -1,602 +0,0 @@
-/*
- * The reviews follow the width of this component, not of the screen. The
- * heading grows from 592px, the width the full-width product and seller
- * pages of the Nuxt reference give the reviews on a 640px screen; the 480,
- * 640 and 820px rules are the container rules of the Nuxt reference.
- */
-.section {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  max-width: 70rem;
-  color: var(--orionplace-text);
-  font-size: .875rem;
-  line-height: 1.5rem;
-  container: reviews / inline-size;
-}
-
-.header,
-.toolbar,
-.tabs,
-.actions,
-.error {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.header {
-  justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-.header h2 {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 500;
-  line-height: 1.75rem;
-  letter-spacing: .04em;
-  text-transform: uppercase;
-}
-
-/* As `op-feature-button op-feature-primary` in the other packages. */
-.primary,
-.error button {
-  min-height: 2.75rem;
-  padding: .5rem 1.25rem;
-  border: 1px solid var(--orionplace-accent);
-  background: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-  font: inherit;
-  font-size: .75rem;
-  line-height: calc(1 / 0.75);
-  font-weight: 500;
-  letter-spacing: .08em;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-.layout,
-.content,
-.summary,
-.ratingRows,
-.reviews,
-.review,
-.reviewBody,
-.parent {
-  display: grid;
-  min-width: 0;
-}
-
-.layout { gap: 2.5rem; }
-.content { align-content: start; gap: 1.5rem; }
-.summary { width: 100%; max-width: 26rem; align-content: start; gap: 1.5rem; }
-.averageLine { display: flex; align-items: flex-end; gap: 1rem; }
-.averageLine > span:last-child { display: grid; gap: .25rem; padding-bottom: .125rem; }
-.average { font-size: 3rem; font-weight: 500; line-height: 1; }
-.averageLine small {
-  color: var(--orionplace-muted);
-  font-size: .75rem;
-  line-height: 1rem;
-  font-variant-numeric: tabular-nums;
-}
-.ratingRows { gap: .25rem; }
-.ratingRows button {
-  display: grid;
-  grid-template-columns: 2.25rem minmax(0, 1fr) 2.5rem;
-  align-items: center;
-  gap: .75rem;
-  min-height: 2rem;
-  padding-inline: .5rem;
-  border: 1px solid transparent;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: .75rem;
-  line-height: 1rem;
-  font-variant-numeric: tabular-nums;
-  text-align: left;
-  cursor: pointer;
-}
-
-.ratingRows button[aria-pressed='true'] {
-  border-color: currentColor;
-}
-
-.ratingRows button:disabled {
-  cursor: default;
-  opacity: .5;
-}
-
-.ratingRows button > span:last-child {
-  color: var(--orionplace-muted);
-  text-align: right;
-}
-
-.meter {
-  position: relative;
-  height: .375rem;
-  overflow: hidden;
-  background: var(--orionplace-border);
-}
-
-.meter span {
-  position: absolute;
-  inset-block: 0;
-  left: 0;
-  background: var(--orionplace-text);
-}
-
-.toolbar {
-  justify-content: space-between;
-  gap: .75rem 1.5rem;
-  padding-bottom: .75rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-.tabs {
-  gap: .5rem 1.25rem;
-}
-
-.tabs button,
-.chips button {
-  min-height: 2rem;
-  padding: .25rem .5rem;
-  border: 0;
-  border-bottom: 1px solid transparent;
-  background: transparent;
-  color: var(--orionplace-muted);
-  font: inherit;
-  font-size: .75rem;
-  line-height: calc(1 / 0.75);
-  cursor: pointer;
-}
-
-/* As `review-action` in the other packages. */
-.actions button,
-.parent button {
-  box-sizing: border-box;
-  display: inline-flex;
-  min-height: 2rem;
-  align-items: center;
-  gap: .375rem;
-  padding: 1px .5rem;
-  border: 0;
-  background: transparent;
-  color: var(--orionplace-muted);
-  font: inherit;
-  font-size: .75rem;
-  line-height: 1rem;
-  cursor: pointer;
-}
-
-.actions button span {
-  font-variant-numeric: tabular-nums;
-}
-
-.actions button svg {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-
-.tabs button {
-  padding-inline: 0;
-  font-weight: 500;
-  letter-spacing: .08em;
-  text-transform: uppercase;
-}
-
-.tabs button[aria-pressed='true'],
-.tabs button[aria-expanded='true'] {
-  border-color: var(--orionplace-text);
-  color: var(--orionplace-text);
-}
-
-.actions button[aria-pressed='true'] {
-  color: var(--orionplace-text);
-}
-
-.checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: .5rem;
-  color: var(--orionplace-muted);
-  font-size: .75rem;
-  line-height: calc(1 / 0.75);
-  letter-spacing: .08em;
-  text-transform: uppercase;
-}
-
-.checkbox input {
-  width: 1rem;
-  height: 1rem;
-  margin: 0;
-  accent-color: var(--orionplace-accent);
-}
-
-.chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: .5rem;
-}
-
-.chips button {
-  padding-inline: .75rem;
-  border: 1px solid var(--orionplace-border);
-  color: var(--orionplace-text);
-}
-
-.chips button[aria-pressed='true'] {
-  border-color: var(--orionplace-text);
-  box-shadow: inset 0 0 0 1px var(--orionplace-text);
-}
-
-.parent {
-  gap: .75rem;
-  padding: .25rem 0 .25rem 1rem;
-  border-left: 2px solid var(--orionplace-text);
-}
-
-.parent > span {
-  display: flex;
-  align-items: center;
-  gap: .75rem;
-}
-
-.parent p {
-  margin: 0;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.parent button {
-  justify-self: start;
-}
-
-.parentName {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  font-size: .875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-}
-
-.error {
-  gap: 1rem;
-  padding: .75rem 1rem;
-  border: 1px solid var(--orionplace-danger);
-  color: var(--orionplace-danger);
-}
-
-.error button {
-  border-color: currentColor;
-  background: transparent;
-  color: inherit;
-}
-
-.reviews {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.review {
-  gap: .75rem;
-  padding-block: 1.5rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-.review:first-child {
-  padding-top: 0;
-}
-
-.author {
-  display: flex;
-  min-width: 0;
-  align-items: flex-start;
-  gap: .75rem;
-}
-
-.authorText {
-  display: grid;
-  min-width: 0;
-  flex: 1;
-  gap: .125rem;
-}
-
-.authorLine {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: .25rem .75rem;
-}
-
-.authorName {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  font-size: .875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-}
-
-.author time {
-  color: var(--orionplace-muted);
-  font-size: .75rem;
-  line-height: 1rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.stars {
-  flex-shrink: 0;
-  font-size: .875rem;
-  line-height: 1.25rem;
-  letter-spacing: .06em;
-}
-
-.starsLarge {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
-.stars span {
-  color: var(--orionplace-border);
-}
-
-.stars span[data-filled='true'] {
-  color: var(--orionplace-text);
-}
-
-.reviewBody {
-  align-content: start;
-  gap: .75rem;
-}
-
-.reviewBody > p {
-  max-width: 68ch;
-  margin: 0;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  font-size: .875rem;
-  line-height: 1.5rem;
-}
-
-.status {
-  justify-self: start;
-  padding: .125rem .5rem;
-  border: 1px solid var(--orionplace-border);
-  color: var(--orionplace-muted);
-  font-size: .6875rem;
-  letter-spacing: .08em;
-  text-transform: uppercase;
-}
-
-.reviewImages {
-  display: flex;
-  flex-wrap: wrap;
-  gap: .5rem;
-}
-
-.reviewImages button {
-  width: 5rem;
-  height: 5rem;
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  cursor: pointer;
-}
-
-.reviewImages img,
-.reviewImages [data-image-placeholder] {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.actions {
-  margin-left: -.5rem;
-  gap: .25rem;
-}
-
-.actions button:focus-visible,
-.parent button:focus-visible {
-  outline: none;
-  background: var(--orionplace-hover);
-  color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .actions button:hover,
-  .parent button:hover {
-    background: var(--orionplace-hover);
-    color: var(--orionplace-text);
-  }
-}
-
-.actions button:disabled,
-.parent button:disabled {
-  cursor: default;
-  opacity: .6;
-}
-
-.tabs button:disabled,
-.chips button:disabled,
-.primary:disabled,
-.error button:disabled {
-  cursor: default;
-  opacity: .5;
-}
-
-.productCard,
-.productInline {
-  display: flex;
-  min-width: 0;
-  align-items: flex-start;
-  gap: .75rem;
-  color: inherit;
-  text-decoration: none;
-}
-
-.productCard > span:last-child,
-.productInline > span:last-child {
-  display: grid;
-  min-width: 0;
-  gap: .25rem;
-  overflow-wrap: anywhere;
-}
-
-.productCard small,
-.productInline small {
-  color: var(--orionplace-muted);
-  font-size: .6875rem;
-  letter-spacing: .08em;
-  text-transform: uppercase;
-}
-
-.productCardImage {
-  box-sizing: border-box;
-  width: 4rem;
-  height: 4rem;
-  flex-shrink: 0;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  object-fit: contain;
-  transition: border-color 150ms;
-}
-
-/* The product of an own review: a plain name of up to three lines and its
-   variant in the muted small text, as in Nuxt. */
-.productCardName {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  font-size: .875rem;
-  line-height: 1.25rem;
-  transition: opacity 150ms;
-}
-
-.productCardVariant {
-  color: var(--orionplace-muted);
-  font-size: .75rem;
-  line-height: 1.25rem;
-}
-
-.productCard:focus-visible .productCardImage {
-  border-color: var(--orionplace-text);
-}
-
-.productCard:focus-visible .productCardName {
-  opacity: .7;
-}
-
-@media (hover: hover) {
-  .productCard:hover .productCardImage {
-    border-color: var(--orionplace-text);
-  }
-
-  .productCard:hover .productCardName {
-    opacity: .7;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .productCardImage,
-  .productCardName {
-    transition: none;
-  }
-}
-
-/* As the other packages: the link is as wide as its text, the picture is
-   48px inside its frame (50px), name and label 2px apart. */
-.productInline {
-  max-width: 68ch;
-  align-items: center;
-  justify-self: start;
-}
-
-.productInline > span:last-child {
-  gap: .125rem;
-}
-
-.productInline img,
-.productInline [data-image-placeholder] {
-  box-sizing: content-box;
-  width: 3rem;
-  height: 3rem;
-  flex-shrink: 0;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  object-fit: contain;
-}
-
-.replyForm {
-  padding-left: 1rem;
-}
-
-.editForm {
-  min-width: 0;
-}
-
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-@container reviews (min-width: 480px) {
-  .review:not(.ownReview) .reviewBody {
-    padding-left: 3.25rem;
-  }
-}
-
-@container reviews (min-width: 592px) {
-  .header h2 {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}
-
-@container reviews (min-width: 640px) {
-  .ownReview {
-    grid-template-columns: 10rem minmax(0, 1fr);
-    grid-template-rows: auto 1fr;
-    column-gap: 2rem;
-  }
-
-  .ownReview > :not(.productCard) {
-    grid-column: 2;
-  }
-
-  .productCard {
-    grid-row: span 2;
-    flex-direction: column;
-  }
-
-  .productCardImage {
-    width: 100%;
-    height: auto;
-    aspect-ratio: 1;
-  }
-}
-
-@container reviews (min-width: 820px) {
-  .withSummary {
-    grid-template-columns: 16.25rem minmax(0, 1fr);
-    gap: 4rem;
-  }
-
-  .summary {
-    position: sticky;
-    top: 1.5rem;
-  }
-}