wix-style-react/src/ImageViewer/ImageViewer.st.css

wix-style-react

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D10-66, B50, B40, R10, D50, D80, Y10;
}

:import {
  -st-from: "../Foundation/stylable/border.st.css";
  -st-named: radius08;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-6, ease-9;
}

:import {
  -st-from: "wix-ui-core/dist/src/hocs/Focusable/Focusable.st.css";
  -st-default: Focusable;
}

.root {
  -st-states: status(enum(error, warning)),
    disabled,
    removeRadius,
    hasImage,
    popoverOpen,
    imageLoading;

  position: relative;
  width: 204.7px;
  height: 144px;
  border-radius: value(radius08);
  background-color: value(B50);
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background 0.2s value(ease-9);
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.root:removeRadius {
  border-radius: 0;
}

.root:hasImage {
  background-color: transparent;
}

.root:status(error) {
  border: 1px solid value(R10);
}

.root:status(warning) {
  border: 1px solid value(Y10);
}

/* buttons group style */

.buttons {
  display: flex;
  color: value(D80);
  justify-content: center;
  margin: auto;
  align-items: baseline;
  transition: opacity 0.1s value(ease-9);
}

.buttons > :last-child:not(:first-child) {
  margin-left: 12px;
}

.root:imageLoading .buttons {
  display: none;
}

/* image styles */

.imageContainer {
  -st-states: shouldDisplay;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.imageContainer:not(:shouldDisplay) {
  display: none;
}

.overlay {
  -st-states: removeRadius, shouldDisplay;
  transition: all 0.1s value(ease-9);
  border-radius: value(radius08);
  background-color: value(D10-66);
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: auto;
  opacity: 0;
}

.overlay:not(:shouldDisplay) {
  display: none;
}

.root:hasImage:hover .overlay,
.root:hasImage:focus-within .overlay,
.root:popoverOpen .overlay,
.root:imageLoading .overlay {
  opacity: 1;
}

.root:hasImage:not(:imageLoading) .overlay {
  cursor: pointer;
}

.overlay:removeRadius {
  border-radius: 0;
}

.image {
  display: none;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.2s value(ease-6);
}

.image.imageVisible {
  display: flex;
}

.root:hover .image,
.root.root:popoverOpen .image {
  transform: scale(1.1);
}

/* status styles */
.statusContainer {
  position: absolute;
  right: 9px;
  top: 9px;
}

/* disabled styles */

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

.root:disabled .image {
  opacity: .3;
}

.root:disabled .image:hover {
  transform: none;
}

.root:disabled .imageContainer {
  background-color: value(D50);
  transition: none;
}

.stretch {
  width: 100%;
  height: 100%;
}