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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.StatusBarButtonUI = exports.StatusBarUI = void 0;

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

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

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

var _color2 = require("../../utilities/color");

var statusStyles = {
  error: 'red',
  info: 'blue',
  success: 'green',
  warning: 'yellow'
};

var statusBarStyleBold = function statusBarStyleBold(color) {
  return "\n    background-color: " + (0, _color.getColor)(color + ".500") + ";\n    border-bottom: 1px solid " + (0, _color.getColor)(color + ".600") + ";\n    color: white;\n    font-weight: bold;\n    .c-StatusBarButton{\n        background-color: " + (0, _color.getColor)(color + ".700") + ";\n        text-shadow: 0 1px 1px " + (0, _color2.rgba)('black', 0.1) + ";\n    }\n    ";
};

var statusBarStyleLight = function statusBarStyleLight(color) {
  return "\n    background-color: " + (0, _color.getColor)(color + ".200") + ";\n    border-bottom: 1px solid " + (0, _color.getColor)(color + ".300") + ";\n    color: " + (0, _color.getColor)(color + ".500") + ";\n\n    .c-StatusBarButton{\n        background-color: " + (0, _color.getColor)(color + ".500") + ";\n        &:focus {\n        box-shadow: 0 0 0 2px " + (0, _color2.rgba)('white', 0.8) + ";\n        }\n    }\n    ";
};

var makeStatusStyles = function makeStatusStyles() {
  return (0, _forEach.default)(statusStyles, function (name, value) {
    return "\n      &.is-" + name + " {\n          &.is-bold {\n              " + statusBarStyleBold(value) + ";\n          }\n          &.is-light {\n              " + statusBarStyleLight(value) + ";\n          }\n\n          \n      }\n    ";
  });
};

var StatusBarUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "StatusBarcss__StatusBarUI",
  componentId: "sc-90hh0t-0"
})(["cursor:pointer;padding:6px 20px;min-height:32px;text-align:center;height:100%;display:flex;align-items:center;justify-content:center;", ";.c-StatusBar__content{font-size:13px;line-height:1;}&.is-bold{.c-StatusBar__content{text-shadow:0 1px 1px ", ";}}", ";"], statusBarStyleLight('blue'), (0, _color2.rgba)('black', 0.1), makeStatusStyles());
exports.StatusBarUI = StatusBarUI;

var StatusBarButtonUI = _styledComponents.default.button.withConfig({
  displayName: "StatusBarcss__StatusBarButtonUI",
  componentId: "sc-90hh0t-1"
})(["appearance:none;box-sizing:border-box;border-radius:9999px;border:none;color:white;cursor:pointer;font-size:13px;font-weight:normal;padding:3px 8px;line-height:1;outline:none;&:focus{box-shadow:0 0 0 2px ", ";outline:none;}.c-StatusBarButton__icon{margin-left:3px;vertical-align:middle;}"], (0, _color2.rgba)('white', 0.4));

exports.StatusBarButtonUI = StatusBarButtonUI;