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

React library of Procore Design Guidelines

import styled, { css, keyframes } from 'styled-components';
import { StyledButton, StyledLinkButton } from '../Button/Button.styles';
import { DropdownButton } from '../Dropdown/Dropdown';
import { Flex } from '../Flex';
import { getTypographyIntent, typographyWeights } from '../Typography';
import { borderRadius } from '../_styles/borderRadius';
import { colors } from '../_styles/colors';
import { focusable } from '../_styles/mixins';
import { getShadow } from '../_styles/shadows';
import { spacing } from '../_styles/spacing';
var bannerLeft = 8;
var bannerVariantColors = {
  attention: {
    primary: colors.yellow40,
    secondary: colors.yellow94
  },
  error: {
    primary: colors.red50,
    secondary: colors.red98
  },
  info: {
    primary: colors.blue50,
    secondary: colors.blue96
  },
  UNSAFE_attention_emphasized: {
    primary: colors.orange50,
    secondary: colors.orange98
  }
};
var miniBannerVariantColors = {
  attention: colors.yellow50,
  error: colors.red50,
  info: colors.blue50,
  UNSAFE_attention_emphasized: colors.green50
};
var bannerShadow = getShadow(1, 'bottom');
var expandContent = function expandContent(maxHeight) {
  return keyframes(["from{padding-top:0;padding-bottom:0;max-height:0;min-height:0;overflow-y:hidden;}to{padding-top:", "px;padding-bottom:", "px;min-height:32px;max-height:", "px;overflow-y:auto;}"], spacing.sm, spacing.sm, maxHeight);
};
export var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledBannerContainer",
  componentId: "core-12_44_0__sc-149wm7c-0"
})(["align-items:center;border-left:", "px solid;border-radius:", "px;color:", ";display:flex;justify-content:space-between;min-height:52px;padding:0 ", "px;", " ", " ", ""], bannerLeft, borderRadius.md, colors.gray15, spacing.lg, bannerShadow, function (_ref) {
  var $variant = _ref.$variant;
  var _bannerVariantColors$ = bannerVariantColors[$variant],
    primary = _bannerVariantColors$.primary,
    secondary = _bannerVariantColors$.secondary;
  return css(["border-left-color:", ";background-color:", ";& ", "{color:", ";}"], primary, secondary, StyledIconContainer, primary);
}, function (_ref2) {
  var $isExpandable = _ref2.$isExpandable;
  return $isExpandable && css(["flex-direction:column;align-items:stretch;padding:0;"]);
});
export var StyledContent = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledContent",
  componentId: "core-12_44_0__sc-149wm7c-1"
})(["align-self:center;margin:", "px ", "px ", "px 0;width:100%;"], spacing.sm, spacing.lg, spacing.sm);
export var StyledExpandableContentContainer = /*#__PURE__*/styled(Flex).withConfig({
  displayName: "StyledExpandableContentContainer",
  componentId: "core-12_44_0__sc-149wm7c-2"
})(["color:", ";min-height:52px;padding:0 ", "px;position:relative;z-index:1;", ""], colors.gray15, spacing.lg, bannerShadow);
export var StyledExpandableContent = /*#__PURE__*/styled(Flex).withConfig({
  displayName: "StyledExpandableContent",
  componentId: "core-12_44_0__sc-149wm7c-3"
})(["animation-duration:450ms;animation-fill-mode:forwards;animation-timing-function:ease-out;background-color:", ";box-sizing:border-box;font-size:14px;font-weight:500;letter-spacing:0.25px;line-height:20px;overflow-y:auto;padding:0 ", "px;position:relative;z-index:0;", " ", ""], colors.white, spacing.xl * 2 + spacing.sm, function (_ref3) {
  var $isOverflowingY = _ref3.$isOverflowingY;
  return $isOverflowingY && focusable;
}, function (_ref4) {
  var $expandableContentMaxHeight = _ref4.$expandableContentMaxHeight;
  return css(["animation-name:", ";"], expandContent($expandableContentMaxHeight));
});
export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTitle",
  componentId: "core-12_44_0__sc-149wm7c-4"
})(["", " color:", ";font-weight:", ";"], getTypographyIntent('body'), colors.gray15, typographyWeights.semibold);
export var StyledBody = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledBody",
  componentId: "core-12_44_0__sc-149wm7c-5"
})(["", " color:", ";"], getTypographyIntent('body'), colors.gray15);
export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledIconContainer",
  componentId: "core-12_44_0__sc-149wm7c-6"
})(["flex:0 0 auto;margin:", "px 0;"], spacing.lg);
export var StyledActionsTrigger = /*#__PURE__*/styled(DropdownButton).withConfig({
  displayName: "StyledActionsTrigger",
  componentId: "core-12_44_0__sc-149wm7c-7"
})(["flex-shrink:0;& + ", ",& + ", "{margin-left:-", "px;}"], StyledButton, StyledLinkButton, spacing.sm);
export var StyledAction = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledAction",
  componentId: "core-12_44_0__sc-149wm7c-8"
})(["margin:", "px 0 ", "px -", "px;& + ", ",& + ", ",& + ", "{margin-left:-", "px;}", ",", "{background:rgba(0,0,0,0.05);color:", ";&:hover{background:", ";color:", ";}}"], spacing.sm, spacing.sm, spacing.sm, StyledButton, StyledLinkButton, StyledActionsTrigger, spacing.sm, StyledButton, StyledLinkButton, colors.gray15, colors.gray85, colors.gray15);
function getMiniBannerIconColor(_ref5) {
  var variant = _ref5.variant;
  return css(["& ", "{color:", ";}"], StyledIconContainer, miniBannerVariantColors[variant]);
}
export var StyledMiniBannerContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMiniBannerContainer",
  componentId: "core-12_44_0__sc-149wm7c-9"
})(["align-items:center;background-color:", ";display:flex;justify-content:space-between;padding:0 ", "px;", " ", " & ", "{margin:", "px;}"], colors.gray96, spacing.md, getTypographyIntent('small'), getMiniBannerIconColor, StyledContent, spacing.sm);
//# sourceMappingURL=Banner.styles.js.map