wix-style-react/dist/src/Thumbnail/Thumbnail.st.css

wix-style-react

@st-import [
  --wds-thumbnail-border-radius,
  --wds-color-border-standard-secondary,
  --wds-color-border-standard-secondary-hover,
  --wds-color-border-standard-secondary-active,
  --wds-color-border-standard-secondary-disabled,
  --wds-color-fill-standard-primary,
  --wds-color-fill-standard-primary-disabled,
  --wds-color-fill-standard-tertiary,
  --wds-color-blue-250,
  --wds-space-100,
  --wds-space-250,
  --wds-space-300,
] from '@wix/design-system-tokens/all.st.css';

:import {
  -st-from: "../common/Focusable/Focusable.st.css";
  -st-default: Focusable;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named:  B00-24, B10-18, THEME-COLOR-10, THEME-COLOR-20, D50, D80, D10-30, F00;
}

:import {
  -st-from: "../Foundation/stylable/spacing.st.css";
  -st-named: spacing06;
}

:import {
  -st-from: "../Text/Text.st.css";
  -st-default: Text;
}

:vars {
  borderRadius: var(--wds-thumbnail-border-radius, 6px);
}

.root {
  -st-extends: Focusable;
  -st-states: disabled;
}

.root:not(:disabled) {
  cursor: pointer;
}

.root:disabled {
  cursor: not-allowed;
}

.thumbnail {
  -st-states: selected, disabled, size(enum(tiny, small, medium)), hasBackground, hasChildren, contentAlignment(enum(top, center)), newColorsBranding, textPosition(enum(outside, inside)), noPadding;
  position: relative;
  display: flex;
  margin: 0 auto;
  padding: var(--wds-space-300, 18px);
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: value(borderRadius);
  box-sizing: border-box;
  outline: none;
}

.thumbnail:textPosition(outside) {
  position: relative;
  display: flex;
  padding: 0;
}

.thumbnail:textPosition(inside):size(tiny) {
  padding: var(--wds-space-250, 15px);
}

.thumbnail:textPosition(inside):noPadding{
  padding: 0;
}

.thumbnail::after {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 0 1px var(--wds-color-border-standard-secondary, value(B00-24)) inset;
  border-radius: value(borderRadius);
  content: ' ';
}

.thumbnail:newColorsBranding:not(:disabled):not(:selected):not(:hover)::after {
  box-shadow: 0 0 0 1px var(--wds-color-border-standard-secondary, value(B10-18)) inset;
}

.thumbnail:hover::after {
  box-shadow: 0 0 0 1px var(--wds-color-border-standard-secondary-hover, value(THEME-COLOR-20)) inset;
}

.thumbnail:focus-visible::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 0 3px var(--wds-color-blue-250, value(F00));
  border-radius: value(borderRadius);
  content: ' ';
}

.thumbnail:contentAlignment(center) {
  justify-content: center;
}

.thumbnail:contentAlignment(top) {
  justify-content: flex-start;
}

.thumbnail:selected::after {
  box-shadow: 0 0 0 2px var(--wds-color-border-standard-secondary-active, value(THEME-COLOR-10)) inset;
}

.thumbnail:selected:disabled::after {
  box-shadow: 0 0 0 2px var(--wds-color-border-standard-secondary-disabled, value(D10-30)) inset;
}

.thumbnail:disabled::after {
  box-shadow: 0 0 0 1px var(--wds-color-border-standard-secondary-disabled, value(D10-30)) inset;
  cursor: default;
}

.thumbnail:disabled .imageContainer {
  opacity: .42;
}

.thumbnail:disabled .selectedIcon {
  color: var(--wds-color-fill-standard-tertiary, value(D80));
  /* Since the token has an opacity applied to it, border gets seen through the icon.  Therefore to replicate figma, a layer of white background is applied through linear gradients*/
  background: linear-gradient(to right, var(--wds-color-fill-standard-primary-disabled, value(D50)) 0%, var(--wds-color-fill-standard-primary-disabled, value(D50)) 100%),
  linear-gradient(to right, var(--wds-color-fill-standard-tertiary, #FFF) 0%, var(--wds-color-fill-standard-tertiary, #FFF) 100%);
}

.thumbnail:hasChildren {
  padding: 0;
  align-items: stretch;
}

.thumbnail:hasBackground,
.thumbnail:hasChildren {
  padding: 0;
  background-color: value(D80);
}

.customChild {
  -st-states: disabled;
  overflow: auto; /* is required to make thumbnail border be always on top of custom child */
  border-radius: value(borderRadius);
}

.customChild:disabled {
  opacity: 0.3;
}

.contentContainer {
  -st-states: textPosition(enum(inside, outside));
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.contentContainer:textPosition(outside) {
  height: 100%;
  width: 100%;
}

.thumbnailTextContent {
  -st-states: textPosition(enum(inside, outside)), size(enum(tiny, small, medium));
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-100, value(spacing06));
}

.thumbnailTextContent:textPosition(outside) {
  margin-top: var(--wds-space-100, 6px);
}

.thumbnailTextContent:textPosition(outside):size(tiny) {
  gap: 0px;
}

.title,
.description,
.imageContainer {
  word-break: break-word;
  text-align: center;
}

.title:last-child,
.description:last-child,
.imageContainer:last-child {
  padding: 0;
}

.bottomTitle {
  -st-extends: Text;
  -st-states: selected, disabled;
  text-align: center;
  padding-top: 6px;
}

.bottomTitle:skin(standard):selected {
  color: value(THEME-COLOR-10);
}

.bottomTitle:skin(standard):disabled {
  color: value(D10-30);
}

.imageContainer {
  -st-states: textPosition(enum(outside, inside));
  min-height: 0;
  min-width: 0;
  padding-bottom: 12px;
}

.imageContainer:textPosition(outside) {
  line-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: value(borderRadius);
}

.backgroundImage {
  -st-states: disabled;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: value(borderRadius);
}

.backgroundImage:disabled {
  opacity: 0.3;
}

.selectedIcon {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--wds-color-fill-standard-primary, value(THEME-COLOR-10));
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--wds-color-fill-standard-tertiary, value(D80));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

:global([dir="rtl"]) .selectedIcon {
  left: -10px;
  right: auto;
}

/* st-namespace-reference="../../../src/Thumbnail/Thumbnail.st.css" */