component.jss.js

import {createUseStyles} from 'react-jss';

const TOP_BAR_HEIGHT = 56;
const DEFAULT_DIMENSION = 24;
const DEFAULT_PADDING = 16;

const TOP_BAR_HEIGHT_LARGE = 80;
const DEFAULT_DIMENSION_LARGE = 40;
const DEFAULT_PADDING_LARGE = 20;

const DEFAULT_GRID_PADDING = 5;
export const PADDING_ALLOWANCE = 40;

const gallery = {
  position: 'absolute !important',
  left: '0 !important',
  right: '0 !important',
  top: '0 !important',
  height: '100%',
  width: '100%',
  bottom: '0 !important',
  overflow: 'auto !important',
};

const controlsPanel = {
  position: 'absolute !important',
  height: `${TOP_BAR_HEIGHT}px !important`,
  width: '100% !important',
  zIndex: '1',
  background: 'linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0))',
  '@media (min-width:1024px)': {
    height: `${TOP_BAR_HEIGHT_LARGE}px !important`,
  },
};

const lightbox = {
  '&$showControls $control': {
    animationTimingFunction: 'ease-in',
    animationName: '$fadeIn',
  },
  '&$hideControls $control': {
    animationTimingFunction: 'linear',
    animationName: '$fadeOut',
  },
};

const grid = {
  display: 'grid !important',
  justifyContent: 'center !important',
  gridGap: `${DEFAULT_GRID_PADDING}px !important`,
  gridTemplateColumns: 'repeat(3, 1fr)',
  gridAutoRows: 'min-content !important',
  padding: `0px ${DEFAULT_GRID_PADDING}px !important`,
  top: `${TOP_BAR_HEIGHT}px !important`,
  height: `calc(100% - ${TOP_BAR_HEIGHT}px) !important`,
  width: 'calc(100% - 10px) !important',
  '@media (min-width: 1024px)': {
    gridTemplateColumns: `repeat(4, calc(1024px/4 - ${DEFAULT_GRID_PADDING}px * 5 / 4))`,
    top: `${TOP_BAR_HEIGHT_LARGE}px !important`,
    height: `calc(100% - ${TOP_BAR_HEIGHT_LARGE}px) !important`,
  },
};

const thumbnail = {
  position: 'relative !important',
  paddingTop: '100% !important',
  '& > img': {
    width: '100% !important',
    height: '100% !important',
    position: 'absolute !important',
    top: '0 !important',
    objectFit: 'cover !important',
    cursor: 'pointer !important',
  },
};

const showControls = {};
const hideControls = {};

const control = {
  animationFillMode: 'forwards',
  animationDuration: '400ms',
  position: 'absolute !important',
  boxSizing: 'content-box',
  cursor: 'pointer !important',
  zIndex: '2',
};

const topControl = {
  width: DEFAULT_DIMENSION,
  height: DEFAULT_DIMENSION,
  padding: DEFAULT_PADDING,
  '@media (min-width:1024px)': {
    width: DEFAULT_DIMENSION_LARGE,
    height: DEFAULT_DIMENSION_LARGE,
    padding: DEFAULT_PADDING_LARGE,
  },
};

const auto = {};
const clip = {};
const expanded = {};
const caption = {
  bottom: 0,
  boxSizing: 'border-box !important',
  color: '#ffffff',
  textShadow: '1px 0 5px rgba(0, 0, 0, 0.4) !important',
  maxHeight: 'calc(80px + 3rem) !important',
  transition: 'max-height ease-out 0.3s !important',
  pointerEvents: 'none !important',
  /*
   * Make sure we do not overlap with the buttons. This is not applied to
   * `captionText` to avoid expanding the hit area when
   * collapsed.
   */
  paddingTop: `${PADDING_ALLOWANCE}px !important`,
  overflow: 'hidden',
  '&$auto': {
    cursor: 'auto !important',
  },
  '&$clip': {
    /* Fade out the text, using an approximated exponential gradient. */
    maskImage: `linear-gradient(
to top,
rgba(0, 0, 0, 0.0) 0rem,
rgba(0, 0, 0, 0.2) 1rem,
rgba(0, 0, 0, 0.55) 2rem,
rgba(0, 0, 0, 1.0) 3rem
)`,
  },
  '&$expanded': {
    overflowY: 'auto !important',
    WebkitOverflowScrolling: 'touch !important',
    maxHeight: '100% !important',
    transition: 'max-height ease-in-out 0.7s !important',
    /* Fade out the text, using an approxximated exponential gradient. */
    maskImage: `linear-gradient(
      to top,
      rgba(0, 0, 0, 0.0) 0rem,
      rgba(0, 0, 0, 0.2) 0.5rem,
      rgba(0, 0, 0, 0.55) 1rem,
      rgba(0, 0, 0, 1.0) 2rem
      )`,
  },
};

const captionText = {
  padding: '20px !important',
  pointerEvents: 'all !important',
  '&:empty': {
    display: 'none !important',
  },
};

const closeButton = {
  top: 0,
  right: 0,
};

const prevArrow = {};

const nextArrow = {};

const arrow = {
  top: '0 !important',
  bottom: '0 !important',
  margin: 'auto !important',
  filter: 'drop-shadow(0 0 1px black) !important',
  width: DEFAULT_DIMENSION_LARGE,
  height: DEFAULT_DIMENSION_LARGE,
  padding: DEFAULT_PADDING_LARGE,
  '&$nextArrow': {
    right: '0 !important',
    /* Needed for screen reader mode to size correctly. */
    left: 'auto !important',
  },
  '&$prevArrow': {
    left: '0 !important',
    /* Needed for screen reader mode to size correctly. */
    right: 'auto !important',
  },
};

const JSS = {
  '@keyframes fadeIn': {
    from: {opacity: 0},
    to: {
      opacity: 1,
      visibility: 'visible',
    },
  },
  '@keyframes fadeOut': {
    from: {opacity: 1},
    to: {
      opacity: 0,
      visibility: 'hidden',
    },
  },
  arrow,
  auto,
  caption,
  captionText,
  clip,
  closeButton,
  control,
  controlsPanel,
  expanded,
  hideControls,
  lightbox,
  gallery,
  grid,
  nextArrow,
  prevArrow,
  showControls,
  thumbnail,
  topControl,
};

// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
// eslint-disable-next-line local/no-export-side-effect
export const useStyles = createUseStyles(JSS);