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

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { getTypographyIntent } from '../Typography';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
var emptyStateWidth = 312;
export var StyledSvg = /*#__PURE__*/styled.svg.withConfig({
  displayName: "StyledSvg",
  componentId: "core-12_44_0__sc-1xaoo8n-0"
})(["width:200px;height:200px;"]);
export var StyledImage = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledImage",
  componentId: "core-12_44_0__sc-1xaoo8n-1"
})([""]);
export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTitle",
  componentId: "core-12_44_0__sc-1xaoo8n-2"
})(["color:", ";max-width:", "px;width:100%;", ""], colors.gray15, emptyStateWidth, getTypographyIntent('h2'));
export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDescription",
  componentId: "core-12_44_0__sc-1xaoo8n-3"
})(["margin-top:", "px;color:", ";max-width:", "px;width:100%;", ""], spacing.lg, colors.gray45, emptyStateWidth, getTypographyIntent('body'));
export var StyledActions = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledActions",
  componentId: "core-12_44_0__sc-1xaoo8n-4"
})(["margin-top:", "px;"], spacing.xl);
export var StyledEmptyState = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledEmptyState",
  componentId: "core-12_44_0__sc-1xaoo8n-5"
})(["display:flex;justify-content:center;align-items:", ";gap:", "px;flex-direction:", ";margin-top:", "px;margin-bottom:", "px;", "{> img{max-width:200px;}}", " ", "}"], function (_ref) {
  var $isHorizontal = _ref.$isHorizontal;
  return $isHorizontal ? 'flex-start' : 'center';
}, spacing.xl, function (_ref2) {
  var $isHorizontal = _ref2.$isHorizontal;
  return $isHorizontal ? 'row' : 'column';
}, function (_ref3) {
  var $compact = _ref3.$compact;
  return $compact ? 0 : 96;
}, function (_ref4) {
  var $compact = _ref4.$compact;
  return $compact ? 0 : 64;
}, StyledImage, function (_ref5) {
  var _ref5$$compact = _ref5.$compact,
    $compact = _ref5$$compact === void 0 ? false : _ref5$$compact,
    $size = _ref5.$size;
  return ($compact || $size === 'md') && css(["", "{> img{max-width:120px;}}", "{width:120px;height:120px;}"], StyledImage, StyledSvg);
}, function (_ref6) {
  var $size = _ref6.$size;
  return $size === 'sm' && css(["gap:", "px;", "{> img{max-width:96px;}}", "{width:96px;height:96px;}", "{", "}"], spacing.lg, StyledImage, StyledSvg, StyledTitle, getTypographyIntent('h3'));
});
//# sourceMappingURL=EmptyState.styles.js.map