orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,767 @@
+.root {
+  container: product / inline-size;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  color: var(--orionplace-text);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.breadcrumbs {
+  margin-bottom: 24px;
+}
+
+.error,
+.notice,
+.attention {
+  /* The shared notice of Nuxt and Svelte (op-notice): one square shape, the
+     tone's colours and a decorative icon drawn in the left padding. */
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 0.5rem 0.75rem;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 0;
+  background: var(--orionplace-muted-surface);
+  color: var(--orionplace-text);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  letter-spacing: normal;
+  text-transform: none;
+  overflow-wrap: anywhere;
+}
+
+.error,
+.noticeError,
+.noticeSuccess,
+.attention {
+  padding-left: 44px;
+}
+
+.error::before,
+.noticeError::before,
+.noticeSuccess::before,
+.attention::before {
+  position: absolute;
+  top: 0.875rem;
+  left: 0.875rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  content: '';
+  background: currentColor;
+  -webkit-mask: var(--op-notice-icon) center / contain no-repeat;
+  mask: var(--op-notice-icon) center / contain no-repeat;
+}
+
+.error,
+.noticeError {
+  --op-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");
+  border-color: var(--orionplace-danger);
+  background: var(--orionplace-danger-surface);
+  color: var(--orionplace-danger);
+}
+
+.noticeSuccess {
+  --op-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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.5 2.5L16 9.5'/%3E%3C/svg%3E");
+  border-color: var(--orionplace-success);
+  background: var(--orionplace-success-surface);
+  color: var(--orionplace-success);
+}
+
+.attention {
+  --op-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");
+  border-color: var(--orionplace-attention);
+  background: var(--orionplace-attention-surface);
+  color: var(--orionplace-attention);
+}
+
+/* Actions inside a notice: the regular feature button, as op-feature-button. */
+.noticeAction {
+  composes: button from '../shared/features.module.css';
+}
+
+.layout {
+  display: grid;
+  align-items: start;
+  gap: 32px;
+}
+
+.gallery {
+  display: grid;
+  min-width: 0;
+  gap: 12px;
+}
+
+.mainImage {
+  position: relative;
+  min-width: 0;
+}
+
+/* Sideways moves on several photos switch the photo. */
+.mainImageSwipe {
+  touch-action: pan-y;
+}
+
+.mainImageAsset {
+  box-sizing: border-box;
+  width: 100%;
+  height: auto;
+  max-height: 70vh;
+  aspect-ratio: 1;
+  object-fit: contain;
+  background: var(--orionplace-surface);
+  cursor: zoom-in;
+  outline: none;
+}
+
+.mainImageAsset:focus-visible {
+  outline: 1px solid var(--orionplace-text);
+}
+
+.imageArrow,
+.railArrow {
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--orionplace-surface) 90%, transparent);
+  color: var(--orionplace-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.imageArrow {
+  position: absolute;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  transform: translateY(-50%);
+  font-size: 28px;
+}
+
+.imageArrow svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.imageArrow:focus-visible,
+.railArrow:focus-visible {
+  border-color: var(--orionplace-text);
+  outline: none;
+}
+
+@media (hover: hover) {
+  .imageArrow:hover,
+  .railArrow:hover {
+    border-color: var(--orionplace-text);
+    outline: none;
+  }
+}
+
+.imagePrevious {
+  left: 8px;
+}
+
+.imageNext {
+  right: 8px;
+}
+
+.thumbnailRail {
+  position: relative;
+  min-width: 0;
+}
+
+.thumbnails {
+  display: flex;
+  min-width: 0;
+  gap: 8px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+
+.thumbnails::-webkit-scrollbar {
+  display: none;
+}
+
+.thumbnail {
+  box-sizing: border-box;
+  flex: 0 0 56px;
+  width: 56px;
+  height: 70px;
+  padding: 4px;
+  border: 1px solid transparent;
+  background: var(--orionplace-surface);
+  opacity: .75;
+  cursor: pointer;
+}
+
+.thumbnailSelected {
+  border-color: var(--orionplace-text);
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .thumbnail:hover {
+    border-color: var(--orionplace-text);
+    opacity: 1;
+  }
+}
+
+.thumbnail:focus-visible {
+  border-width: 2px;
+  border-color: var(--orionplace-text);
+  outline: none;
+}
+
+.thumbnailImage {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.railArrow {
+  position: absolute;
+  top: 50%;
+  width: 32px;
+  height: 32px;
+  transform: translateY(-50%);
+  font-size: 23px;
+}
+
+.railArrow svg {
+  width: .875rem;
+  height: .875rem;
+}
+
+.railArrow:disabled {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.railPrevious {
+  left: 4px;
+}
+
+.railNext {
+  right: 4px;
+}
+
+.summary {
+  display: grid;
+  min-width: 0;
+  align-content: start;
+  gap: 24px;
+}
+
+.heading {
+  display: grid;
+  min-width: 0;
+  gap: 12px;
+}
+
+.heading h1 {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.reviewAverage {
+  color: var(--orionplace-text);
+}
+
+.reviewSummary {
+  display: inline-flex;
+  align-items: center;
+  justify-self: start;
+  gap: 8px;
+  color: var(--orionplace-muted);
+  font-size: 12px;
+  line-height: 1rem;
+  text-decoration: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.reviewSummary:focus-visible {
+  color: var(--orionplace-text);
+  outline: none;
+}
+
+@media (hover: hover) {
+  .reviewSummary:hover {
+    color: var(--orionplace-text);
+    outline: none;
+  }
+}
+
+.stars {
+  display: inline-flex;
+  color: var(--orionplace-border);
+  font-size: 14px;
+  line-height: 1.25rem;
+  letter-spacing: .06em;
+}
+
+.starSelected {
+  color: var(--orionplace-text);
+}
+
+.information {
+  display: grid;
+  gap: 24px;
+  padding: 4px 0;
+}
+
+.informationSection {
+  display: grid;
+  gap: 12px;
+}
+
+.informationSection h2,
+.returns h2 {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1rem;
+  font-weight: 500;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.description {
+  overflow-wrap: anywhere;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.description p {
+  margin: .75rem 0;
+}
+
+.description p:first-child {
+  margin-top: 0;
+}
+
+.description img {
+  max-width: 100%;
+  height: auto;
+}
+
+.descriptionShort {
+  max-height: 10rem;
+  overflow: hidden;
+}
+
+.descriptionFade {
+  mask-image: linear-gradient(to bottom, currentColor 65%, transparent);
+}
+
+.textAction {
+  justify-self: start;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--orionplace-text);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1rem;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.textAction:focus-visible {
+  color: var(--orionplace-muted);
+  outline: none;
+}
+
+@media (hover: hover) {
+  .textAction:hover {
+    color: var(--orionplace-muted);
+    outline: none;
+  }
+}
+
+.specifications {
+  display: grid;
+  max-height: 14rem;
+  gap: 16px;
+  overflow: hidden;
+}
+
+.specificationsFade {
+  mask-image: linear-gradient(to bottom, currentColor 80%, transparent);
+}
+
+.specificationGroup {
+  display: grid;
+  gap: 4px;
+}
+
+.specificationGroup h3 {
+  margin: 0;
+  color: var(--orionplace-muted);
+  font-size: 14px;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+
+.specificationGroup dl {
+  display: grid;
+  margin: 0;
+}
+
+.specificationGroup dl > div {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+  gap: 16px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--orionplace-border);
+  font-size: 14px;
+  line-height: 1.25rem;
+}
+
+.specificationGroup dt {
+  overflow-wrap: anywhere;
+  color: var(--orionplace-muted);
+}
+
+.specificationGroup dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-line;
+}
+
+.specificationGroup a {
+  color: var(--orionplace-text);
+  text-decoration: none;
+  border-bottom: 1px solid currentColor;
+}
+
+.specificationGroup a:focus-visible {
+  outline: none;
+  color: var(--orionplace-muted);
+}
+
+@media (hover: hover) {
+  .specificationGroup a:hover {
+    color: var(--orionplace-muted);
+  }
+}
+
+.returns {
+  display: grid;
+  gap: 12px;
+  padding-top: 20px;
+  border-top: 1px solid var(--orionplace-border);
+}
+
+.returns dl {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.25rem;
+}
+
+.returns dl > div {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  column-gap: 16px;
+}
+
+.returns dt {
+  color: var(--orionplace-muted);
+}
+
+.returns dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.partners {
+  display: grid;
+  gap: 12px;
+}
+
+.partner {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--orionplace-border);
+  color: var(--orionplace-text);
+  text-decoration: none;
+}
+
+.partner:focus-visible {
+  border-color: var(--orionplace-text);
+  outline: none;
+}
+
+@media (hover: hover) {
+  .partner:hover {
+    border-color: var(--orionplace-text);
+    outline: none;
+  }
+}
+
+.partner > [data-product-manufacturer-logo] {
+  display: block;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 40px;
+}
+
+.partnerLogo {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.partnerText {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 2px;
+}
+
+.partnerText small {
+  color: var(--orionplace-muted);
+  font-size: 11px;
+  line-height: 1rem;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.partnerText > span {
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 1.25rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.partnerText em {
+  margin-left: 8px;
+  color: var(--orionplace-muted);
+  font-size: 12px;
+  line-height: 1rem;
+  font-style: normal;
+}
+
+.partner > svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.reviews {
+  margin-top: 56px;
+  padding-top: 40px;
+  border-top: 1px solid var(--orionplace-border);
+  scroll-margin-top: 24px;
+}
+
+/* More room above the reviews from 592px of the page, as in Nuxt. */
+@container product (min-width: 592px) {
+  .reviews {
+    margin-top: 80px;
+  }
+}
+
+.skeleton {
+  display: grid;
+  align-items: start;
+  gap: 32px;
+  animation: pulse 1.4s ease-in-out infinite;
+}
+
+.skeletonGallery,
+.skeletonSummary {
+  display: grid;
+  gap: 12px;
+}
+
+.skeletonImage {
+  width: 100%;
+  aspect-ratio: 1;
+  border: 1px solid var(--orionplace-border);
+}
+
+.skeletonThumbs {
+  display: flex;
+  gap: 8px;
+}
+
+.skeletonThumbs span {
+  width: 56px;
+  height: 70px;
+  border: 1px solid var(--orionplace-border);
+}
+
+.skeletonSummary > span {
+  display: block;
+  width: 100%;
+  height: 12px;
+  background: var(--orionplace-border);
+}
+
+.skeletonSummary .skeletonTitle {
+  width: 80%;
+  height: 28px;
+}
+
+.skeletonSummary .skeletonPrice {
+  width: 112px;
+  height: 24px;
+}
+
+@container product (min-width: 560px) {
+  .heading h1 {
+    font-size: 28px;
+  }
+
+  .gallery {
+    grid-template-columns: 72px minmax(0, 1fr);
+    gap: 16px;
+  }
+
+  .mainImage {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .mainImageAsset {
+    aspect-ratio: 4 / 5;
+  }
+
+  .thumbnailRail {
+    grid-column: 1;
+    grid-row: 1;
+    min-height: 100%;
+    height: 0;
+  }
+
+  .thumbnails {
+    height: 100%;
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .thumbnail {
+    flex-basis: 90px;
+    width: 72px;
+    height: 90px;
+  }
+
+  .railArrow {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%) rotate(90deg);
+  }
+
+  .railPrevious {
+    top: 4px;
+  }
+
+  .railNext {
+    top: auto;
+    bottom: 4px;
+  }
+}
+
+@container product (min-width: 960px) {
+  .layout,
+  .skeleton {
+    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+    align-items: stretch;
+    column-gap: 48px;
+  }
+
+  .gallery,
+  .skeletonGallery {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .summary,
+  .skeletonSummary {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .mainImage {
+    min-height: 384px;
+  }
+
+  .mainImageAsset {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-height: calc(100vh - 12rem);
+    margin: auto;
+    aspect-ratio: auto;
+  }
+
+  .skeletonGallery {
+    grid-template-columns: 72px minmax(0, 1fr);
+  }
+
+  .skeletonImage {
+    grid-column: 2;
+    grid-row: 1;
+    min-height: 384px;
+    aspect-ratio: auto;
+  }
+
+  .skeletonThumbs {
+    grid-column: 1;
+    grid-row: 1;
+    flex-direction: column;
+  }
+}
+
+@container product (min-width: 1200px) {
+  .layout,
+  .skeleton {
+    column-gap: 80px;
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .55;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}