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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.ShadowUI = exports.ToolbarUI = exports.WrapperUI = exports.config = void 0;

var _Flexy = _interopRequireDefault(require("../Flexy"));

var _Nav = _interopRequireDefault(require("../Nav"));

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

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

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

var config = {
  borderColor: (0, _color.getColor)('border'),
  // Note: Transferred from SCSS.
  // Will most likely change to a yellow.X00 shade
  noteBackgroundColor: '#fff7dd',
  noteTextColor: (0, _color.getColor)('yellow.800'),
  height: '54px',
  shadowSize: '8px',
  size: {
    xl: '24px',
    lg: '20px',
    md: '12px',
    sm: '8px',
    xs: '4px'
  }
};
exports.config = config;
var WrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Toolbarcss__WrapperUI",
  componentId: "sc-19wbnjt-0"
})(["position:relative;"]);
exports.WrapperUI = WrapperUI;
var ToolbarUI = (0, _styledComponents.default)(_Flexy.default).withConfig({
  displayName: "Toolbarcss__ToolbarUI",
  componentId: "sc-19wbnjt-1"
})(["background-color:white;min-height:", ";padding:4px 8px;position:relative;", ";&.has-shadow{z-index:1;}&.is-placement-top{border-bottom:1px solid ", ";}&.is-placement-bottom{border-top:1px solid ", ";}&.is-theme-default{background-color:white;}&.is-theme-note{background-color:", ";color:", ";}&.is-seamless{border:none;}"], config.height, makeSizeStyles(), config.borderColor, config.borderColor, config.noteBackgroundColor, config.noteTextColor);
exports.ToolbarUI = ToolbarUI;
var ShadowUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Toolbarcss__ShadowUI",
  componentId: "sc-19wbnjt-2"
})(["background:linear-gradient(to bottom,black,rgba(0,0,0,0));height:", ";opacity:0.04;position:absolute;width:100%;z-index:1;&.is-placement-top{bottom:calc(", " * -1);background:linear-gradient(to bottom,black,rgba(0,0,0,0));}&.is-placement-bottom{top:calc(", " * -1);background:linear-gradient(to top,black,rgba(0,0,0,0));}"], config.shadowSize, config.shadowSize, config.shadowSize);
exports.ShadowUI = ShadowUI;

function makeSizeStyles() {
  return (0, _forEach.default)(config.size, function (size, value) {
    return "\n      &.is-size-" + size + " {\n        padding-top: " + value + ";\n        padding-bottom: " + value + ";\n\n        ." + _Nav.default.className + " {\n          margin-bottom: calc(" + value + " * -1);\n        }\n      }\n    ";
  });
}