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

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { breakpointMinWidthValues, breakpointRawMinWidthValues } from '../Grid/Grid.constants';
import { H2 } from '../Semantic';
import { colors } from '../_styles/colors';
import { getFocusInset } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
var MIN_CARD_HEIGHT = 364;
export var StyledSplitViewCardContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSplitViewCardContainer",
  componentId: "core-12_44_0__sc-9hrkda-0"
})(["display:grid;grid-template-columns:1fr auto;border-radius:", "px;box-shadow:0 0 4px 0 rgba(0,0,0,0.25);min-height:", "px;position:relative;width:100%;@media (max-width:", "){box-shadow:none;display:flex;flex-direction:column;width:100%;}"], spacing.sm, MIN_CARD_HEIGHT, breakpointMinWidthValues.tabletMd);
export var StyledSplitViewCardMain = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSplitViewCardMain",
  componentId: "core-12_44_0__sc-9hrkda-1"
})(["background-color:", ";border-top-left-radius:", "px;border-bottom-left-radius:", "px;position:relative;width:60%;transition:all ease 500ms;@media (max-width:", "){box-shadow:0 0 4px 0 rgba(0,0,0,0.25);border-radius:", "px;margin-bottom:", "px;width:100%;}", ""], colors.white, spacing.sm, spacing.sm, breakpointMinWidthValues.tabletMd, spacing.sm, spacing.sm, function (_ref) {
  var $open = _ref.$open;
  return !$open && css(["border-radius:", "px;width:100%;"], spacing.sm);
});
export var StyledSplitViewCardAside = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSplitViewCardAside",
  componentId: "core-12_44_0__sc-9hrkda-2"
})(["background-color:", ";border-left:1px solid ", ";border-top-right-radius:", "px;border-bottom-right-radius:", "px;display:flex;flex-direction:column;height:100%;width:40%;min-height:", "px;min-width:400px;transition:all ease 500ms;z-index:2;position:absolute;top:0;right:0;@media screen and (max-width:", "px){min-width:unset;}@media (max-width:", "){box-shadow:0 0 4px 0 rgba(0,0,0,0.25);border:none;border-radius:", "px;position:relative;width:100%;}", " ", ""], colors.white, colors.gray85, spacing.sm, spacing.sm, MIN_CARD_HEIGHT, breakpointRawMinWidthValues.tabletSm, breakpointMinWidthValues.tabletMd, spacing.sm, function (_ref2) {
  var $open = _ref2.$open;
  return !$open && css(["border:none;border-radius:", "px;overflow:hidden !important;@media (min-width:", "){min-width:0;width:0 !important;}@media (max-width:", "){display:none;}"], spacing.sm, breakpointMinWidthValues.tabletMd, breakpointMinWidthValues.tabletMd);
}, function (_ref3) {
  var $hasShadow = _ref3.$hasShadow;
  return $hasShadow && css(["box-shadow:-2px 0 6px 0 rgba(0,0,0,0.1);"]);
});
export var StyledSplitViewCardHeading = /*#__PURE__*/styled(H2).withConfig({
  displayName: "StyledSplitViewCardHeading",
  componentId: "core-12_44_0__sc-9hrkda-3"
})(["width:100%;"]);
export var StyledSplitViewCardTitle = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSplitViewCardTitle",
  componentId: "core-12_44_0__sc-9hrkda-4"
})(["display:flex;justify-content:space-between;margin-bottom:", "px;min-height:36px;"], spacing.sm);
export var StyledSplitViewCardHeader = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSplitViewCardHeader",
  componentId: "core-12_44_0__sc-9hrkda-5"
})(["border-bottom:1px solid ", ";display:flex;flex-direction:column;padding:", "px ", "px 0;"], colors.gray85, spacing.lg, spacing.lg);
export var StyledSplitViewCardBody = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSplitViewCardBody",
  componentId: "core-12_44_0__sc-9hrkda-6"
})(["display:flex;flex-direction:column;flex:1;padding:", "px ", "px 0;overflow-y:auto;&:focus-visible{", "}"], spacing.lg, spacing.lg, getFocusInset());
export var StyledSplitViewCardFooter = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSplitViewCardFooter",
  componentId: "core-12_44_0__sc-9hrkda-7"
})(["display:flex;align-items:center;justify-content:flex-end;padding:", "px;", ""], spacing.lg, function (_ref4) {
  var $hasShadow = _ref4.$hasShadow;
  return $hasShadow && css(["box-shadow:0 -4px 6px 0 #0000001a;"]);
});
//# sourceMappingURL=SplitViewCard.styles.js.map