@procore/core-react/dist/Tearsheet/Tearsheet.styles.js

React library of Procore Design Guidelines

import styled, { css, keyframes } from 'styled-components';
import { Card } from '../Card';
import { colors } from '../_styles/colors';
import { getGapOutlineFocus } from '../_styles/mixins';
import { getShadow } from '../_styles/shadows';
import { spacing } from '../_styles/spacing';
export var animationSpeed = {
  disabled: 0,
  tearsheet: 800,
  scrim: 300,
  closeButton: 150
};
var slideDistance = '100%';
var positioningProps = {
  right: {
    open: "translateX(0);",
    closed: "translateX(".concat(slideDistance, ");"),
    placement: css(["flex-direction:row;justify-content:flex-end;"]),
    shadow: getShadow(4, 'left')
  },
  // @ts-ignore
  top: {
    open: "translateY(0);",
    closed: "translateY(-".concat(slideDistance, ");"),
    placement: css(["flex-direction:column-reverse;justify-content:flex-end;"]),
    shadow: getShadow(4, 'bottom')
  },
  bottom: {
    open: "translateY(0);",
    closed: "translateY(".concat(slideDistance, ");"),
    placement: css(["flex-direction:column;justify-content:flex-end;"]),
    shadow: getShadow(4, 'top')
  },
  left: {
    open: "translateX(0);",
    closed: "translateX(-".concat(slideDistance, ");"),
    placement: css(["flex-direction:row-reverse;justify-content:flex-end;"]),
    shadow: getShadow(4, 'right')
  }
};
var getSlideInAnimation = function getSlideInAnimation($placement) {
  return keyframes(["from{transform:", ";}to{transform:", ";}"], positioningProps[$placement].closed, positioningProps[$placement].open);
};
var getSlideOutAnimation = function getSlideOutAnimation($placement) {
  return keyframes(["from{transform:", ";}to{transform:", ";}"], positioningProps[$placement].open, positioningProps[$placement].closed);
};
export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTearsheetContent",
  componentId: "core-12_44_0__sc-ljrxoq-0"
})(["display:flex;z-index:2;width:100%;", " ", " ", " ", ""], function (_ref) {
  var $open = _ref.$open,
    $placement = _ref.$placement;
  return $open ? css(["transform:", ";"], positioningProps[$placement].open) : css(["transform:", ";"], positioningProps[$placement].closed);
}, function (_ref2) {
  var $placement = _ref2.$placement;
  return positioningProps[$placement].placement;
}, function (_ref3) {
  var $opening = _ref3.$opening,
    $placement = _ref3.$placement;
  return $opening && css(["animation:", " ", "ms ease-out;transform:", ";pointer-events:none;"], getSlideInAnimation($placement), animationSpeed.tearsheet, positioningProps[$placement].open);
}, function (_ref4) {
  var $closing = _ref4.$closing,
    $placement = _ref4.$placement;
  return $closing && css(["animation:", " ", "ms ease-out;transform:", ";pointer-events:none;"], getSlideOutAnimation($placement), animationSpeed.tearsheet, positioningProps[$placement].closed);
});
export var minScrimSize = spacing.xxl * 3;
export var StyledTearsheetBody = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTearsheetBody",
  componentId: "core-12_44_0__sc-ljrxoq-1"
})(["display:flex;overflow-y:auto;flex-direction:column;background-color:", ";&:focus-visible{", "}", ""], colors.white, getGapOutlineFocus('inside'), function (_ref5) {
  var $block = _ref5.$block,
    $placement = _ref5.$placement,
    $stretch = _ref5.$stretch;
  var size = ['top', 'bottom'].includes($placement) ? '100vh' : '100vw';
  return ($stretch || $block) && css(["flex:0 0 calc(", " - ", "px);"], size, minScrimSize);
});
var zoomIn = /*#__PURE__*/keyframes(["from{transform:scale(0);}to{transform:scale(1);}"]);
var zoomOut = /*#__PURE__*/keyframes(["from{transform:scale(1);}to{transform:scale(0);}"]);
export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledScrimContainer",
  componentId: "core-12_44_0__sc-ljrxoq-2"
})(["", ""], function (_ref6) {
  var $placement = _ref6.$placement;
  var minSizeProp = ['top', 'bottom'].includes($placement) ? 'min-height' : 'min-width';
  return css(["", ":", "px;flex-grow:1;"], minSizeProp, minScrimSize);
});
export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledButtonContainer",
  componentId: "core-12_44_0__sc-ljrxoq-3"
})(["", ""], function (_ref7) {
  var $placement = _ref7.$placement;
  switch ($placement) {
    case 'bottom':
      return css(["display:flex;justify-content:flex-end;flex-direction:column;height:100%;"]);
    case 'right':
      return css(["display:flex;justify-content:flex-end;"]);
    case 'left':
    default:
      return;
  }
});
export var StyledButtonCard = /*#__PURE__*/styled(Card).withConfig({
  displayName: "StyledButtonCard",
  componentId: "core-12_44_0__sc-ljrxoq-4"
})(["display:inline-flex;margin:", "px;", " ", " ", ""], spacing.xl, function (_ref8) {
  var $open = _ref8.$open;
  return $open ? css(["transform:scale(1);"]) : css(["transform:scale(0);"]);
}, function (_ref9) {
  var $opening = _ref9.$opening;
  return $opening && css(["animation:", " ", "ms;transform:scale(1);"], zoomIn, animationSpeed.closeButton);
}, function (_ref0) {
  var $closing = _ref0.$closing;
  return $closing && css(["animation:", " ", "ms;transform:scale(0);"], zoomOut, animationSpeed.closeButton);
});
//# sourceMappingURL=Tearsheet.styles.js.map