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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.ActionRightUI = exports.CloseWrapperUI = exports.IconWrapperUI = exports.BlockUI = exports.BadgeWrapperUI = exports.ContentUI = exports.AlertUI = exports.config = void 0;

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

var _constants = require("../../styles/configs/constants");

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

var _forEach = _interopRequireDefault(require("../../styles/utilities/forEach"));

var config = {
  backgroundColor: (0, _color.getColor)('state.warning.backgroundColor'),
  color: (0, _color.getColor)('state.warning.color'),
  boxShadow: "inset 4px 0 0 0 " + (0, _color.getColor)('state.warning.borderColor')
};
exports.config = config;
var AlertUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Alertcss__AlertUI",
  componentId: "ql3c9m-0"
})(["background-color:", ";color:", ";box-shadow:", ";padding:0 16px;min-height:44px;display:flex;margin-bottom:16px;text-align:left;> *:first-child{margin-top:0;}> *:last-child{margin-bottom:0;}a:not(.c-button,.c-Button){color:inherit;text-decoration:underline;&:hover{color:inherit;}}&.is-noMargin{margin-bottom:0;}", ";"], config.backgroundColor, config.color, config.boxShadow, makeStateStyles);
exports.AlertUI = AlertUI;
var ContentUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Alertcss__ContentUI",
  componentId: "ql3c9m-1"
})(["align-items:center;display:flex;flex:1 1 100%;> *{max-width:100%;min-width:0;+ *{margin-left:12px;}}"]);
exports.ContentUI = ContentUI;
var BadgeWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Alertcss__BadgeWrapperUI",
  componentId: "ql3c9m-2"
})(["padding:4px 0;+ *{margin-left:8px;}"]);
exports.BadgeWrapperUI = BadgeWrapperUI;
var BlockUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Alertcss__BlockUI",
  componentId: "ql3c9m-3"
})(["max-width:100%;min-width:0;padding:13px 0;.c-Heading,.c-Text,.c-Link,h1,h2,h3,h4,h5,h6,p,ol,ul{color:inherit;}ul{margin-bottom:8px;li:last-child{margin-bottom:0;}}> p{margin:5px 0;}"]);
exports.BlockUI = BlockUI;
var IconWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Alertcss__IconWrapperUI",
  componentId: "ql3c9m-4"
})(["align-self:center;padding:0;flex:0 0 auto;+ *{margin-left:8px;}"]);
exports.IconWrapperUI = IconWrapperUI;
var CloseWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Alertcss__CloseWrapperUI",
  componentId: "ql3c9m-5"
})(["margin-left:auto;margin-right:-4px;padding-left:8px;flex:0 0 auto;"]);
exports.CloseWrapperUI = CloseWrapperUI;

var ActionRightUI = _styledComponents.default.div.withConfig({
  displayName: "Alertcss__ActionRightUI",
  componentId: "ql3c9m-6"
})(["flex:0 0 auto;margin-left:auto;padding:22px 12px 22px 0;"]);

exports.ActionRightUI = ActionRightUI;

function makeStateStyles() {
  return (0, _forEach.default)(_constants.STATUSES, function (state) {
    return "\n    &.is-" + state + " {\n      background-color: " + (0, _color.getColor)('state', state, 'backgroundColor') + ";\n      box-shadow: inset 4px 0 0 0 " + (0, _color.getColor)('state', state, 'borderColor') + ";\n      color: " + (0, _color.getColor)('state', state, 'color') + ";\n\n      .c-Badge,\n      .c-badge {\n        background-color: " + (0, _color.getColor)('state', state, 'borderColor') + ";\n      }\n    }\n  ";
  });
}