@procore/core-react/dist/FileSelect/GridSource/GridSource.styles.js

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { EmptyState } from '../../EmptyState/EmptyState';
import { colors } from '../../_styles/colors';
import { spacing } from '../../_styles/spacing';
var inputHeight = 32;
var toolbarPaddingTop = spacing.xl;
var toolbarPaddingBottom = spacing.md;
var toolbarHeight = inputHeight + toolbarPaddingTop + toolbarPaddingBottom;
var modalBodyBorderTopWidth = 1;
var modalBodyWidth = 540;
export var contentHeight = modalBodyWidth - modalBodyBorderTopWidth - toolbarHeight;

// TODO Update box-shadow to use getShadow instead
export var StyledToolbar = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledToolbar",
  componentId: "core-12_44_0__sc-1sj6hvp-0"
})(["display:flex;align-items:center;flex-direction:row;width:100%;min-height:", "px;padding:16px 24px;", " ", " & > * + *{margin-left:", "px;}"], toolbarHeight, function (_ref) {
  var $alignRight = _ref.$alignRight;
  return css(["justify-content:", ";"], $alignRight ? 'flex-end' : 'space-between');
}, function (_ref2) {
  var $hasScrollShadow = _ref2.$hasScrollShadow;
  return $hasScrollShadow && "\n      box-shadow: 0px ".concat(spacing.xs, "px ").concat(spacing.xs, "px ").concat(colors.gray90, ";\n      z-index: 1;\n    ");
}, spacing.sm);
export var StyledSearchWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSearchWrapper",
  componentId: "core-12_44_0__sc-1sj6hvp-1"
})(["width:286px;flex-shrink:1;min-width:180px;"]);
export var StyledEmptyStateWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledEmptyStateWrapper",
  componentId: "core-12_44_0__sc-1sj6hvp-2"
})(["width:100%;height:100%;display:flex;justify-content:center;align-items:center;"]);
export var StyledEmptyState = /*#__PURE__*/styled(EmptyState).withConfig({
  displayName: "StyledEmptyState",
  componentId: "core-12_44_0__sc-1sj6hvp-3"
})(["margin-top:0;margin-bottom:0;img{width:160px;}"]);
export var StyledSpinnerWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSpinnerWrapper",
  componentId: "core-12_44_0__sc-1sj6hvp-4"
})(["height:", "px;width:100%;display:flex;align-items:center;justify-content:center;"], contentHeight);
export var StyledGrid = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledGrid",
  componentId: "core-12_44_0__sc-1sj6hvp-5"
})(["display:flex;flex-direction:column;", ""], function (_ref3) {
  var $isEmpty = _ref3.$isEmpty;
  return $isEmpty && 'height: 100%;';
});
//# sourceMappingURL=GridSource.styles.js.map