bbm-component-library-test/dist/Card/styles.js

React based component library for all BBM web applications

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Section = exports.Header = exports.IconContainer = exports.Title = undefined;

var _templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-family: \"Lato\";\n  font-size: ", ";\n  font-weight: bold;\n  line-height: 1.45;\n  text-transform: uppercase;\n\n  ", ";\n"], ["\n  color: ", ";\n  font-family: \"Lato\";\n  font-size: ", ";\n  font-weight: bold;\n  line-height: 1.45;\n  text-transform: uppercase;\n\n  ", ";\n"]),
    _templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "]),
    _templateObject3 = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border-radius: ", ";\n  color: ", ";\n  display: inline-flex;\n  height: ", ";\n  justify-content: center;\n  margin-right: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background: ", ";\n  border-radius: ", ";\n  color: ", ";\n  display: inline-flex;\n  height: ", ";\n  justify-content: center;\n  margin-right: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n"]),
    _templateObject4 = _taggedTemplateLiteral(["\n      background: rgba(", ", 0.2);\n    "], ["\n      background: rgba(", ", 0.2);\n    "]),
    _templateObject5 = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    margin-right: ", ";\n  "], ["\n    height: ", ";\n    width: ", ";\n    margin-right: ", ";\n  "]),
    _templateObject6 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"]),
    _templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  box-shadow: 0 ", " ", " ", " rgba(211, 225, 232, 0.13);\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  box-shadow: 0 ", " ", " ", " rgba(211, 225, 232, 0.13);\n\n  ", ";\n\n  ", ";\n"]),
    _templateObject8 = _taggedTemplateLiteral(["\n    padding: ", ";\n  "], ["\n    padding: ", ";\n  "]),
    _templateObject9 = _taggedTemplateLiteral(["\n      ", " {\n        margin-bottom: ", ";\n\n        ", ";\n\n        ", ";\n      }\n    "], ["\n      ", " {\n        margin-bottom: ", ";\n\n        ", ";\n\n        ", ";\n      }\n    "]),
    _templateObject10 = _taggedTemplateLiteral(["\n          margin-bottom: ", ";\n        "], ["\n          margin-bottom: ", ";\n        "]);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _settings = require("../Common/styles/settings");

var _index = require("../Common/styles/tools/index");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Title = exports.Title = _styledComponents2.default.h1(_templateObject, _settings.blue, (0, _index.rem)(11), function (_ref) {
  var titleColor = _ref.titleColor;
  return titleColor && (0, _styledComponents.css)(_templateObject2, titleColor);
});

var IconContainer = exports.IconContainer = _styledComponents2.default.span(_templateObject3, _settings.white40, (0, _index.rem)(4), _settings.blue, (0, _index.rem)(24), (0, _index.rem)(9), (0, _index.rem)(24), function (_ref2) {
  var iconContainerBg = _ref2.iconContainerBg;
  return iconContainerBg && (0, _styledComponents.css)(_templateObject4, iconContainerBg);
}, _index.media.md((0, _styledComponents.css)(_templateObject5, (0, _index.rem)(28), (0, _index.rem)(28), (0, _index.rem)(13))));

var Header = exports.Header = _styledComponents2.default.header(_templateObject6);

var Section = exports.Section = _styledComponents2.default.section(_templateObject7, _settings.white, (0, _index.rem)(2), (0, _index.rem)(12), (0, _index.rem)(1), (0, _index.rem)(12), (0, _index.rem)(6), _index.media.md((0, _styledComponents.css)(_templateObject8, (0, _index.rem)(20))), function (_ref3) {
  var hasChildren = _ref3.hasChildren;
  return hasChildren && (0, _styledComponents.css)(_templateObject9, Header, (0, _index.rem)(20), _index.media.md((0, _styledComponents.css)(_templateObject10, (0, _index.rem)(14))), _index.media.lg((0, _styledComponents.css)(_templateObject10, (0, _index.rem)(10))));
});