@procore/core-react
Version:
React library of Procore Design Guidelines
151 lines • 7.68 kB
JavaScript
import { Warning } from '@procore/core-icons';
import styled, { css } from 'styled-components';
import { Card } from '../Card/Card';
import { StyledSection, StyledSectionInner } from '../Section/Section.styles';
import { Typography } from '../Typography/Typography';
import { getTypographyIntent } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { getFocusInset } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
export var fadeInClassName = 'fade-in';
export var fadeOutClassName = 'fade-out';
export var modalMaxWidth = '640px';
export var modalPixelGutter = spacing.xl;
export var modalPixelWidths = {
sm: 432,
md: 688,
lg: 1152,
xl: 1920
};
var compactModalFullscreenMaxHeight = 940;
var screenWidthPixelBreakpoints = {
mobile: {
small: {
min: 0,
max: 439
},
large: {
min: 440,
max: 767
}
}
};
export var StyledModal = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledModal",
componentId: "core-12_44_0__sc-1ijdug2-0"
})(["display:flex;height:100vh;position:absolute;opacity:0;transition:0.3s opacity ease;width:100vw;z-index:0;pointer-events:none;&.", "{opacity:1;pointer-events:auto;}&.", "{opacity:0;pointer-events:none;}"], fadeInClassName, fadeOutClassName);
export var StyledModalButtons = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledModalButtons",
componentId: "core-12_44_0__sc-1ijdug2-1"
})(["display:flex;flex:0 0 auto;margin-left:", "px;> * + *{margin-left:", "px;}"], spacing.lg, spacing.sm);
export var StyledModalContainer = /*#__PURE__*/styled(Card).withConfig({
displayName: "StyledModalContainer",
componentId: "core-12_44_0__sc-1ijdug2-2"
})(["display:flex;flex-direction:row;position:absolute;z-index:2;", " ", " ", ""], function (_ref) {
var $compact = _ref.$compact;
if (!$compact) {
return '';
}
return css(["@media (max-width:", "px) and (max-height:", "px){border-radius:0;height:100vh;width:100vw;}@media (min-width:", "px) and (max-width:", "px){max-height:calc(100vh - 24px);width:416px;}@media (min-height:", "px){height:916px;max-width:100vw;}"], screenWidthPixelBreakpoints.mobile.small.max, compactModalFullscreenMaxHeight, screenWidthPixelBreakpoints.mobile.large.min, screenWidthPixelBreakpoints.mobile.large.max, compactModalFullscreenMaxHeight + 1);
}, function (_ref2) {
var $placement = _ref2.$placement;
if ($placement === 'top') {
return css(["top:5vh;"]);
}
return css(["top:50vh;transform:translateY(-50%);"]);
}, function (_ref3) {
var $width = _ref3.$width,
$placement = _ref3.$placement;
if ($width) {
return css(["left:", "px;right:", "px;margin-left:auto;margin-right:auto;max-width:", "px;", "{max-width:none;}"], modalPixelGutter, modalPixelGutter, modalPixelWidths[$width], StyledModalBody);
}
// TODO deprecated, uses new centering, required width
return css(["left:50vw;transform:translateX(-50%) ", ";"], $placement === 'center' && 'translateY(-50%)');
});
export var StyledModalFooter = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledModalFooter",
componentId: "core-12_44_0__sc-1ijdug2-3"
})(["align-items:center;display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;padding:", "px ", "px ", "px;"], spacing.xl, spacing.xxl, spacing.xxl);
export var StyledModalBody = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledModalBody",
componentId: "core-12_44_0__sc-1ijdug2-4"
})(["", " &:focus-visible{", "}box-sizing:border-box;color:", ";display:flex;flex-direction:column;overflow:auto;", " ", " > ", "{padding-left:0;padding-right:0;&:first-child > ", "{padding-top:0;}}", ""], getTypographyIntent('body'), getFocusInset(), colors.gray15, function (_ref4) {
var $noSideSpacing = _ref4.$noSideSpacing;
return css(["padding:", "px ", "px;"], spacing.xl, $noSideSpacing ? 0 : spacing.xxl);
}, function (_ref5) {
var $compact = _ref5.$compact;
if (!$compact) {
// TODO deprecated, moving width up. delete line in breaking change
return css(["max-width:", ";"], modalMaxWidth);
}
return css(["padding:8px 16px;"]);
}, StyledSection, StyledSectionInner, function (_ref6) {
var $isOverflowingY = _ref6.$isOverflowingY;
return $isOverflowingY && css(["& + ", "{border-top-width:1px;border-top-style:solid;border-top-color:", ";", "{border-top:none;}}"], StyledModalFooter, colors.gray85, StyledModalFooterSummary);
});
export var StyledModalContent = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledModalContent",
componentId: "core-12_44_0__sc-1ijdug2-5"
})(["display:flex;flex-direction:column;max-height:90vh;overflow:hidden;width:100%;", ""], function (_ref7) {
var _ref7$$compact = _ref7.$compact,
$compact = _ref7$$compact === void 0 ? false : _ref7$$compact;
if (!$compact) {
return '';
}
return css(["max-height:unset;"]);
});
export var StyledModalFooterNotation = /*#__PURE__*/styled(Typography).withConfig({
displayName: "StyledModalFooterNotation",
componentId: "core-12_44_0__sc-1ijdug2-6"
})(["flex-grow:1;"]);
export var StyledModalHeader = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledModalHeader",
componentId: "core-12_44_0__sc-1ijdug2-7"
})(["align-items:flex-start;color:", ";display:flex;flex:0 0 auto;position:relative;", " ", ""], colors.gray10, function (_ref8) {
var $compact = _ref8.$compact,
$isBodyScrolled = _ref8.$isBodyScrolled;
if ($compact) {
return css(["border-bottom:1px solid ", ";"], colors.gray85);
}
return css(["border-bottom:1px solid ", ";"], $isBodyScrolled ? colors.gray85 : 'transparent');
}, function (_ref9) {
var $compact = _ref9.$compact;
var spacings = "".concat(spacing.xl, "px ").concat(spacing.xxl, "px");
if ($compact) {
spacings = "".concat(spacing.md, "px ").concat(spacing.lg, "px");
}
return css(["padding:", ";"], spacings);
});
export var StyledModalHeading = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledModalHeading",
componentId: "core-12_44_0__sc-1ijdug2-8"
})(["", " align-items:center;display:flex;flex:1 1 auto;min-height:36px;padding-right:", "px;", ""], function (_ref0) {
var $compact = _ref0.$compact;
return getTypographyIntent($compact ? 'h3' : 'h2');
}, function (_ref1) {
var $compact = _ref1.$compact;
return $compact ? 36 : spacing.lg;
}, function (_ref10) {
var $compact = _ref10.$compact;
if (!$compact) {
return '';
}
return css(["min-height:unset;"]);
});
export var StyledModalCancel = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledModalCancel",
componentId: "core-12_44_0__sc-1ijdug2-9"
})(["flex:0 0 auto;"]);
export var StyledModalScrim = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledModalScrim",
componentId: "core-12_44_0__sc-1ijdug2-10"
})(["background:hsla(200,8%,10%,0.6);height:100vh;left:0;position:absolute;top:0;width:100vw;z-index:1;"]);
export var StyledModalWarningIcon = /*#__PURE__*/styled(Warning).withConfig({
displayName: "StyledModalWarningIcon",
componentId: "core-12_44_0__sc-1ijdug2-11"
})(["color:", ";margin-right:", "px;"], colors.yellow40, spacing.sm);
export var StyledModalFooterSummary = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledModalFooterSummary",
componentId: "core-12_44_0__sc-1ijdug2-12"
})(["", " border-top:1px solid ", ";border-bottom:1px solid ", ";padding:", "px ", "px;color:", ";font-style:italic;background-color:", ";margin:-", "px -", "px ", "px -", "px;flex:1 1 100%;"], getTypographyIntent('small'), colors.gray85, colors.gray85, spacing.md, spacing.xxl, colors.gray15, colors.gray98, spacing.xl, spacing.xxl, spacing.xl, spacing.xxl);
//# sourceMappingURL=Modal.styles.js.map