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

React library of Procore Design Guidelines

import styled, { css, keyframes } from 'styled-components';
import { StyledAnchorNavigation } from '../AnchorNavigation/AnchorNavigation.styles';
import { minScrimSize } from '../Tearsheet/Tearsheet.styles';
import { colors } from '../_styles/colors';
import { getShadow } from '../_styles/shadows';
import { spacing } from '../_styles/spacing';
import { isIE11 } from '../_utils/isIE11';
import { mediaBreakpointsDown } from './PageLayout.utils';
var headerVerticalSpacing = spacing.sm;
var outerPageSpacing = spacing.lg;
var outerPageSpacingSmaller = spacing.md;
export var StyledPageHeader = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledPageHeader",
  componentId: "core-12_44_0__sc-1cvdbsv-0"
})(["padding-top:", "px;padding-right:", "px;padding-left:", "px;@media ", "{padding-right:", "px;padding-left:", "px;}", ""], headerVerticalSpacing, outerPageSpacing, outerPageSpacing, mediaBreakpointsDown.tabletMd, outerPageSpacingSmaller, outerPageSpacingSmaller, function (_ref) {
  var $transparent = _ref.$transparent;
  return !$transparent && css(["", " background-color:", ";"], getShadow(1.5), colors.white);
});
export var StyledPageHeaderItem = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledPageHeaderItem",
  componentId: "core-12_44_0__sc-1cvdbsv-1"
})(["margin-top:", "px;&:first-child{margin-top:0;}"], headerVerticalSpacing);
export var StyledPageTitle = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
  displayName: "StyledPageTitle",
  componentId: "core-12_44_0__sc-1cvdbsv-2"
})(["&:last-child{padding-bottom:", "px;}"], headerVerticalSpacing);
export var StyledPageBreadcrumbs = /*#__PURE__*/styled(StyledPageHeaderItem).attrs({
  as: 'nav'
}).withConfig({
  displayName: "StyledPageBreadcrumbs",
  componentId: "core-12_44_0__sc-1cvdbsv-3"
})([""]);
export var StyledPageBanner = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
  displayName: "StyledPageBanner",
  componentId: "core-12_44_0__sc-1cvdbsv-4"
})([""]);
export var getActions = function getActions() {
  return css(["flex-shrink:0;padding-left:", "px;> button,> a{&:first-child{margin-left:0;}margin-left:", "px;}"], spacing.xl, spacing.sm);
};
export var StyledPageActions = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledPageActions",
  componentId: "core-12_44_0__sc-1cvdbsv-5"
})(["", ""], getActions());
export var StyledPageTabs = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
  displayName: "StyledPageTabs",
  componentId: "core-12_44_0__sc-1cvdbsv-6"
})([""]);
export var StyledBody = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledBody",
  componentId: "core-12_44_0__sc-1cvdbsv-7"
})(["padding-top:", "px;padding-left:", "px;padding-right:", "px;@media ", "{padding-top:", "px;padding-left:", "px;padding-right:", "px;}"], outerPageSpacing, outerPageSpacing, outerPageSpacing, mediaBreakpointsDown.tabletMd, outerPageSpacingSmaller, outerPageSpacingSmaller, outerPageSpacingSmaller);
var navigationWidth = 200;
export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledNavigation",
  componentId: "core-12_44_0__sc-1cvdbsv-8"
})(["float:left;max-height:100vh;min-width:", "px;overflow-y:auto;position:sticky;top:0;width:", "px;", "{padding:20px ", "px 0 0;}@media screen and (max-width:1024px){display:none;}"], navigationWidth, navigationWidth, StyledAnchorNavigation, spacing.sm);
export var StyledContent = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledContent",
  componentId: "core-12_44_0__sc-1cvdbsv-9"
})([""]);
var panelWidth = 400;
var zIndexes = {
  panelWideScreen: 3,
  panelNarrowScreen: 1,
  footer: 2
};
export var animationDuration = {
  panel: 600
};
export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledFooter",
  componentId: "core-12_44_0__sc-1cvdbsv-10"
})(["background-color:", ";", " position:sticky;bottom:0;z-index:", ";", ""], colors.white, function (_ref2) {
  var $hasShadow = _ref2.$hasShadow;
  return $hasShadow && getShadow(2, 'top');
}, zIndexes.footer, function (_ref3) {
  var $isAsideOpen = _ref3.$isAsideOpen;
  return $isAsideOpen && css(["@media ", "{z-index:", ";}"], mediaBreakpointsDown.tabletMd, zIndexes.footer);
});
export var StyledAside = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledAside",
  componentId: "core-12_44_0__sc-1cvdbsv-11"
})(["", " @media ", "{position:absolute;right:0;}"], function (_ref4) {
  var $closed = _ref4.$closed,
    $open = _ref4.$open;
  return isIE11() && css(["display:flex;flex-grow:0;flex-shrink:0;flex-basis:0;transition:flex-basis ", "ms;", " ", ""], animationDuration.panel, $closed && css(["flex-basis:0;"]), $open && css(["flex-basis:", "px;"], panelWidth));
}, mediaBreakpointsDown.tabletMd);
var slideDistance = '100%';
var slideIn = /*#__PURE__*/keyframes(["from{transform:translateX(", ");}to{transform:translateX(0);}"], slideDistance);
var slideOut = /*#__PURE__*/keyframes(["from{transform:translateX(0);}to{transform:translateX(", ");}"], slideDistance);
var getPanelAnimation = function getPanelAnimation() {
  return css(["", " ", ""], function (_ref5) {
    var $opening = _ref5.$opening;
    return $opening && css(["animation:", " ease-out ", "ms;"], slideIn, animationDuration.panel);
  }, function (_ref6) {
    var $closing = _ref6.$closing;
    return $closing && css(["animation:", " ease-out ", "ms;"], slideOut, animationDuration.panel);
  });
};
export var StyledAsidePanel = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledAsidePanel",
  componentId: "core-12_44_0__sc-1cvdbsv-12"
})(["", " @media ", "{", "}", " ", " border-left:1px solid ", ";width:", "px;position:fixed;background-color:", ";overflow:auto;z-index:", ";", " ", ""], function (_ref7) {
  var $rightOffset = _ref7.$rightOffset;
  return css(["@media ", "{", " border-left:0;z-index:", ";right:", "px;}"], mediaBreakpointsDown.tabletMd, getShadow(2), zIndexes.panelNarrowScreen, $rightOffset);
}, mediaBreakpointsDown.tabletMd, getPanelAnimation(), function (_ref8) {
  var $altAnimation = _ref8.$altAnimation;
  return $altAnimation && getPanelAnimation();
}, function (_ref9) {
  var $closed = _ref9.$closed;
  return $closed && css(["display:none;"]);
}, colors.gray85, panelWidth, colors.gray96, zIndexes.panelWideScreen, function (_ref0) {
  var $minusHeight = _ref0.$minusHeight;
  return css(["height:calc(100dvh - ", "px);"], $minusHeight);
}, function (_ref1) {
  var $offsetTop = _ref1.$offsetTop;
  return $offsetTop !== null && css(["top:", "px;"], $offsetTop);
});
export var StyledPageMain = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledPageMain",
  componentId: "core-12_44_0__sc-1cvdbsv-13"
})(["position:relative;max-width:100%;background-color:", ";", " ", ""], colors.gray96, function () {
  return isIE11() && css(["flex:1 0 0%;"]);
}, function (_ref10) {
  var $tearsheetPlacement = _ref10.$tearsheetPlacement;
  if (!$tearsheetPlacement) {
    return '';
  }
  if (['top', 'bottom'].includes($tearsheetPlacement)) {
    return css(["min-height:calc(100vh - ", "px);"], minScrimSize);
  }
  return css(["min-height:100vh;"]);
});
export var StyledPageContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledPageContainer",
  componentId: "core-12_44_0__sc-1cvdbsv-14"
})(["display:grid;grid-template-columns:1fr auto;", ""], function () {
  return isIE11() && css(["display:flex;flex-wrap:wrap;"]);
});
export var StyledAsideFluidContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledAsideFluidContainer",
  componentId: "core-12_44_0__sc-1cvdbsv-15"
})(["", ""], function (_ref11) {
  var $closed = _ref11.$closed,
    $open = _ref11.$open;
  return !isIE11() && css(["transition:width ", "ms;", " ", ""], animationDuration.panel, $closed && css(["width:0;"]), $open && css(["width:", "px;"], panelWidth));
});
//# sourceMappingURL=PageLayout.styles.js.map