orionplace-react 0.7.8 → 0.8.0

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

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