@helpscout/hsds-react/components/Page/Page.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.SectionUI = exports.HeadingUI = exports.SubTitleUI = exports.HeaderUI = exports.CardUI = exports.ContentUI = exports.StickyActionsWrapperUI = exports.ActionsBlockUI = exports.ActionsItemUI = exports.ActionsUI = exports.PageUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var _breakpoints = require("../../styles/mixins/breakpoints.css");

var _depth = require("../../styles/mixins/depth.css");

var _Page = require("./Page.config");

var _Heading = _interopRequireDefault(require("../Heading"));

/**
 * ====================
 * PAGE
 * ====================
 */
var PageUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Pagecss__PageUI",
  componentId: "sc-1qrofms-0"
})(["margin-left:auto;margin-right:auto;max-width:", ";min-width:", ";transition:", ";width:100%;&.is-responsive{", ";", ";}"], _Page.pageConfig.maxWidth.default, _Page.pageConfig.minWidth, _Page.pageConfig.transition, (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.superWidescreen, "\n      max-width: " + _Page.pageConfig.maxWidth.superWidescreen + ";\n    "), (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.widest, "\n      max-width: " + _Page.pageConfig.maxWidth.widest + ";\n    "));
/**
 * ====================
 * PAGE ACTIONS
 * ====================
 */

exports.PageUI = PageUI;
var ActionsUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Pagecss__ActionsUI",
  componentId: "sc-1qrofms-1"
})(["display:flex;flex-direction:row-reverse;align-items:center;margin-left:-", "px;margin-right:-", "px;margin-bottom:", "px;margin-top:", "px;&.is-left{flex-direction:row;}&.is-right{flex-direction:row-reverse;}", ";"], _Page.actionsConfig.spacing, _Page.actionsConfig.spacing, _Page.actionsConfig.marginBottom, _Page.actionsConfig.marginTop, function (_ref) {
  var withStickyWrapper = _ref.withStickyWrapper,
      zIndex = _ref.zIndex;
  return withStickyWrapper && "\n  margin-top: 0;\n  margin-bottom: 0;\n  z-index: " + zIndex + ";\n";
});
exports.ActionsUI = ActionsUI;
var ActionsItemUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Pagecss__ActionsItemUI",
  componentId: "sc-1qrofms-2"
})(["min-width:0;margin:0 ", "px;"], _Page.actionsConfig.spacing);
exports.ActionsItemUI = ActionsItemUI;
var ActionsBlockUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Pagecss__ActionsBlockUI",
  componentId: "sc-1qrofms-3"
})(["flex:1;max-width:100%;min-width:0;"]);
exports.ActionsBlockUI = ActionsBlockUI;
var StickyActionsWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Pagecss__StickyActionsWrapperUI",
  componentId: "sc-1qrofms-4"
})(["position:fixed;bottom:0;left:0;right:0;background:white;padding:10px;border-top:1px solid ", ";box-shadow:0 -3px 0 rgba(0,0,0,0.03);", ";@media (max-width:", "px){@-moz-document url-prefix(){display:none;}}}"], (0, _color.getColor)('border'), function (_ref2) {
  var zIndex = _ref2.zIndex;
  return "\n  z-index: " + zIndex + ";\n";
}, parseInt(_Page.pageBreakpointsConfig.minWidth, 10) + 1);
/**
 * ====================
 * PAGE CONTENT
 * ====================
 */

exports.StickyActionsWrapperUI = StickyActionsWrapperUI;
var ContentUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Pagecss__ContentUI",
  componentId: "sc-1qrofms-5"
})(["flex:1;max-width:100%;min-width:0;"]);
/**
 * ====================
 * PAGE CARD ACTIONS
 * ====================
 */

exports.ContentUI = ContentUI;
var CardUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Pagecss__CardUI",
  componentId: "sc-1qrofms-6"
})(["", " border-radius:", ";display:flex;flex-direction:", ";padding:", ";margin-bottom:", ";width:100%;&:hover{", "}", ";.is-responsive &{", ";", ";}"], _depth.d300, _Page.pageCardConfig.borderRadius, _Page.pageCardConfig.flexDirection.default, _Page.pageCardConfig.padding.default, _Page.pageCardConfig.marginBottom, _depth.d300Effect, (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.widescreen, "\n      padding: " + _Page.pageCardConfig.padding.widescreen + ";\n    "), (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.superWidescreen, "\n        padding: " + _Page.pageCardConfig.padding.superWidescreen + ";\n      "), (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.fullscreen, "\n        padding: " + _Page.pageCardConfig.padding.fullscreen + ";\n      "));
/**
 * ====================
 * PAGE HEADER
 * ====================
 */

exports.CardUI = CardUI;
var HeaderUI = (0, _styledComponents.default)('header').withConfig({
  displayName: "Pagecss__HeaderUI",
  componentId: "sc-1qrofms-7"
})(["margin-bottom:0;width:", ";&.is-withBorder{border-bottom:1px solid #e3e8eb;padding-bottom:", ";}&.is-withBottomMargin{margin-bottom:", ";}&.is-responsive{", ";", ";}"], _Page.headerConfig.width.default, _Page.headerConfig.paddingBottom, _Page.headerConfig.marginBottom, (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.superWidescreen, "\n        border-bottom: none;\n        width: " + _Page.headerConfig.width.superWidescreen + ";\n        margin-right: " + _Page.headerConfig.marginRight.superWidescreen + "\n      "), (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.widest, "\n        width: " + _Page.headerConfig.width.widest + ";\n      "));
exports.HeaderUI = HeaderUI;
var SubTitleUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Pagecss__SubTitleUI",
  componentId: "sc-1qrofms-8"
})(["margin-top:5px;"]);
exports.SubTitleUI = SubTitleUI;
var HeadingUI = (0, _styledComponents.default)(_Heading.default).withConfig({
  displayName: "Pagecss__HeadingUI",
  componentId: "sc-1qrofms-9"
})(["margin:0;padding:0;"]);
/**
 * ====================
 * PAGE SECTION
 * ====================
 */

exports.HeadingUI = HeadingUI;
var SectionUI = (0, _styledComponents.default)('section').withConfig({
  displayName: "Pagecss__SectionUI",
  componentId: "sc-1qrofms-10"
})(["display:flex;flex-direction:", ";width:100%;margin-bottom:", ";&:last-child{margin-bottom:0;}&.is-responsive{", ";}"], _Page.pageSectionConfig.flexDirection.default, _Page.pageSectionConfig.marginBottom, (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.superWidescreen, "\n        flex-direction: " + _Page.pageSectionConfig.flexDirection.superWidescreen + ";\n        align-items: " + _Page.pageSectionConfig.flexItemsAlign.superWidescreen + ";\n      "));
exports.SectionUI = SectionUI;