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

React library of Procore Design Guidelines

import { Error } from '@procore/core-icons/dist';
import styled, { css } from 'styled-components';
import { checkboxSize } from '../Checkbox/Checkbox.styles';
import { StyledFieldHeader } from '../Field';
import { Required } from '../Required';
import { Label } from '../Semantic';
import { getTypographyIntent } from '../Typography';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
var columnGutter = '24px';
var defaultLineHeight = '20px';
var textEditorOutputListPadding = '10px 0 10px 40px';
var traditionalBorder = 'rgb(216, 216, 216)';
var traditionalBgGray = 'rgb(242, 242, 242)';
var traditionalPadding = '10px';
var traditionalFontSize = '13px';
var traditionalLineHeight = '20px';
function getGridColumns(colStart, colEnd, colIeSpan) {
  return css(["-ms-grid-column:", ";grid-column-start:", ";grid-column-end:", ";-ms-grid-column-span:", ";"], colStart, colStart, colEnd, colIeSpan);
}
function applyStylesOnlyToIE11(styles) {
  return css(["@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){", "}"], styles);
}
export var StyledFormFieldMain = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledFormFieldMain",
  componentId: "core-12_44_0__sc-ncj3pf-0"
})(["-ms-grid-row:2;grid-row:2;", " ", " ", ""], function (_ref) {
  var $colStart = _ref.$colStart,
    $colEnd = _ref.$colEnd,
    $colIeSpan = _ref.$colIeSpan;
  return getGridColumns($colStart, $colEnd, $colIeSpan);
}, function (_ref2) {
  var $read = _ref2.$read;
  return $read && css(["word-wrap:break-word;color:", ";", ";"], colors.gray15, getTypographyIntent('body'));
}, applyStylesOnlyToIE11("\n      padding-left: ".concat(columnGutter, ";\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n  ")));
export var StyledLabel = /*#__PURE__*/styled(Label).withConfig({
  displayName: "StyledLabel",
  componentId: "core-12_44_0__sc-ncj3pf-1"
})(["word-wrap:break-word;word-break:break-word;"]);
export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDescription",
  componentId: "core-12_44_0__sc-ncj3pf-2"
})(["", " color:", ";word-wrap:break-word;word-break:break-word;"], getTypographyIntent('body'), colors.gray45);
export var StyledCheckboxInlineDescription = /*#__PURE__*/styled(StyledDescription).withConfig({
  displayName: "StyledCheckboxInlineDescription",
  componentId: "core-12_44_0__sc-ncj3pf-3"
})(["margin-top:", "px;", ""], spacing.xs, function (_ref3) {
  var $read = _ref3.$read;
  if (!$read) {
    return css(["padding-left:", "px;"], checkboxSize + spacing.md);
  }
});
export var StyledFormFieldHeader = /*#__PURE__*/styled(StyledFieldHeader).withConfig({
  displayName: "StyledFormFieldHeader",
  componentId: "core-12_44_0__sc-ncj3pf-4"
})(["-ms-grid-row:1;grid-row:1;align-self:end;margin-bottom:", "px;", " ", " * + ", "{margin-top:", "px;}"], spacing.xs, function (_ref4) {
  var $colStart = _ref4.$colStart,
    $colEnd = _ref4.$colEnd,
    $colIeSpan = _ref4.$colIeSpan;
  return getGridColumns($colStart, $colEnd, $colIeSpan);
}, applyStylesOnlyToIE11("\n    padding-left: ".concat(columnGutter, ";\n\n    &:first-child {\n      padding-left: 0;\n    }\n\n    ").concat(StyledFormFieldMain, " {\n      padding-left: ").concat(columnGutter, ";\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n    }\n  ")), StyledDescription, spacing.xs);
export var StyledFormFieldRequiredMark = /*#__PURE__*/styled(Required).withConfig({
  displayName: "StyledFormFieldRequiredMark",
  componentId: "core-12_44_0__sc-ncj3pf-5"
})(["padding-left:", "px;vertical-align:top;"], spacing.xs);
export var StyledFormFieldErrorIcon = /*#__PURE__*/styled(Error).withConfig({
  displayName: "StyledFormFieldErrorIcon",
  componentId: "core-12_44_0__sc-ncj3pf-6"
})(["vertical-align:sub;"]);
export var StyledFormFieldBanner = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledFormFieldBanner",
  componentId: "core-12_44_0__sc-ncj3pf-7"
})(["display:flex;align-items:flex-start;min-height:22px;margin-top:", "px;margin-bottom:2px;word-break:break-word;word-wrap:break-word;color:", ";", ""], spacing.xs, colors.red50, getTypographyIntent('body'));
/** @deprecated The traditional field layout is deprecated */
export var StyledTraditionalFormColumn = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTraditionalFormColumn",
  componentId: "core-12_44_0__sc-ncj3pf-8"
})(["padding:", ";align-self:center;height:100%;&:nth-child(1){-ms-grid-column:1;}&:nth-child(2){-ms-grid-column:2;}&:nth-child(3){-ms-grid-column:3;}&:nth-child(4){-ms-grid-column:4;}", " ", ""], traditionalPadding, function (_ref5) {
  var _ref5$$fullWidth = _ref5.$fullWidth,
    $fullWidth = _ref5$$fullWidth === void 0 ? false : _ref5$$fullWidth;
  return $fullWidth && css(["grid-column:2 / 5;-ms-grid-column-span:3;"]);
}, function (_ref6) {
  var _ref6$$output = _ref6.$output,
    $output = _ref6$$output === void 0 ? false : _ref6$$output;
  return $output && css(["font-weight:bold;font-size:", ";line-height:", ";word-wrap:break-word;"], traditionalFontSize, traditionalLineHeight);
});
export var StyledFormOutputTextArea = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledFormOutputTextArea",
  componentId: "core-12_44_0__sc-ncj3pf-9"
})(["white-space:pre-wrap;"]);
export var StyledFormOutputFiledset = /*#__PURE__*/styled.fieldset.withConfig({
  displayName: "StyledFormOutputFiledset",
  componentId: "core-12_44_0__sc-ncj3pf-10"
})(["border:none;padding:0;margin-top:", "px;"], spacing.xs);
export var StyledFormRow = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledFormRow",
  componentId: "core-12_44_0__sc-ncj3pf-11"
})(["", ""], function (_ref7) {
  var _ref7$$traditional = _ref7.$traditional,
    $traditional = _ref7$$traditional === void 0 ? false : _ref7$$traditional,
    _ref7$$read = _ref7.$read,
    $read = _ref7$$read === void 0 ? false : _ref7$$read;
  return $traditional ? css(["display:-ms-grid;display:grid;-ms-grid-columns:20% 30% 20% 30%;grid-template-columns:20% 30% 20% 30%;-ms-grid-rows:auto;grid-template-rows:auto;border-top:1px solid ", ";background-color:", ";&:last-of-type{border-bottom:1px solid ", ";}", ""], traditionalBorder, colors.white, traditionalBorder, $read && "\n            &:nth-child(2n + 1) {\n              background-color: ".concat(traditionalBgGray, ";\n            }\n            \n            & > ").concat(StyledTraditionalFormColumn, ":nth-child(2) {\n              border-right: 1px solid ").concat(traditionalBorder, ";\n      \n              &:last-child {\n                border-right: none;\n              }\n            }\n          ")) : css(["display:-ms-grid;display:grid;-ms-grid-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-columns:repeat(12,minmax(0,1fr));-ms-grid-rows:minmax(", ",max-content) minmax(", ",max-content);grid-template-rows:minmax(", ",auto) minmax( ", ",auto );justify-content:space-between;grid-column-gap:", ";"], defaultLineHeight, defaultLineHeight, defaultLineHeight, defaultLineHeight, columnGutter);
});
export var formWrapper = /*#__PURE__*/css(["display:inherit;flex-direction:inherit;height:inherit;max-height:inherit;"]);
export var StyledForm = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledForm",
  componentId: "core-12_44_0__sc-ncj3pf-12"
})(["", ""], formWrapper);
//# sourceMappingURL=Form.styles.js.map