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

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { Card } from '../Card';
import { StyledSection, StyledSectionInner } from '../Section/Section.styles';
import { H2 } from '../Semantic';
import { colors } from '../_styles/colors';
import { getFocusInset } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
var headerActionSize = 36;
var buttonShadowWidth = 2;
var gutter = /*#__PURE__*/css(["> * + *{margin-left:", "px;}"], spacing.sm);
var panel = /*#__PURE__*/css(["display:flex;padding:", "px;background:", ";"], spacing.lg, colors.white);
export var StyledHeader = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledHeader",
  componentId: "core-12_44_0__sc-lidix2-0"
})(["border-bottom:1px solid ", ";", ""], colors.gray85, panel);
export var StyledTitle = /*#__PURE__*/styled(H2).withConfig({
  displayName: "StyledTitle",
  componentId: "core-12_44_0__sc-lidix2-1"
})(["flex-grow:1;"]);
export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledHeaderBackAction",
  componentId: "core-12_44_0__sc-lidix2-2"
})(["transition:all 300ms ease-out;flex-shrink:0;width:", "px;margin-right:", "px;opacity:", ";transform:translateX( ", "px );"], function (_ref) {
  var $active = _ref.$active;
  return $active ? headerActionSize : 0;
}, function (_ref2) {
  var $active = _ref2.$active;
  return $active ? spacing.lg : 0;
}, function (_ref3) {
  var $active = _ref3.$active;
  return $active ? 1 : 0;
}, function (_ref4) {
  var $active = _ref4.$active;
  return $active ? 0 : -(spacing.lg + headerActionSize + buttonShadowWidth);
});
export var StyledMoreMenu = /*#__PURE__*/styled(Card).withConfig({
  displayName: "StyledMoreMenu",
  componentId: "core-12_44_0__sc-lidix2-3"
})(["max-height:128px;"]);
export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledHeaderActions",
  componentId: "core-12_44_0__sc-lidix2-4"
})(["display:flex;margin-left:", "px;flex-shrink:0;", ""], spacing.lg, gutter);
export var StyledCloseButton = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledCloseButton",
  componentId: "core-12_44_0__sc-lidix2-5"
})(["margin-left:", "px;"], spacing.sm);
export var StyledBody = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledBody",
  componentId: "core-12_44_0__sc-lidix2-6"
})(["height:100%;background:", ";overflow-y:auto;&:focus-visible{", "}> ", "{padding-left:", "px;padding-right:", "px;", "{padding-left:0;padding-right:0;}&:first-child > ", "{padding-top:", "px;}}"], function (_ref5) {
  var secondaryBgColor = _ref5.secondaryBgColor;
  return secondaryBgColor ? colors.gray96 : colors.white;
}, getFocusInset(), StyledSection, spacing.lg, spacing.lg, StyledSection, StyledSectionInner, spacing.lg);
export var StyledPanel = /*#__PURE__*/styled.aside.withConfig({
  displayName: "StyledPanel",
  componentId: "core-12_44_0__sc-lidix2-7"
})(["display:flex;flex-direction:column;width:100%;height:100%;background:", ";overflow:hidden;"], colors.white);
export var StyledFooterNotation = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledFooterNotation",
  componentId: "core-12_44_0__sc-lidix2-8"
})(["flex-grow:1;"]);
export var StyledFooterActions = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledFooterActions",
  componentId: "core-12_44_0__sc-lidix2-9"
})(["", ""], gutter);
export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledFooter",
  componentId: "core-12_44_0__sc-lidix2-10"
})(["border-top:1px solid ", ";justify-content:flex-end;", " ", ""], colors.gray85, panel, function (_ref6) {
  var $hasShadow = _ref6.$hasShadow;
  return $hasShadow && css(["box-shadow:0 -4px 6px 0 #0000001a;z-index:1;"]);
});
//# sourceMappingURL=Panel.styles.js.map