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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.CenteredContentUI = exports.StatusDotUI = exports.config = void 0;

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

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

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

var config = {
  backgroundColor: 'white',
  borderWidth: 2,
  color: {
    default: (0, _color.getColor)('grey.600'),
    active: (0, _color.getColor)('green.500'),
    inactive: (0, _color.getColor)('grey.600'),
    offline: (0, _color.getColor)('red.500'),
    busy: (0, _color.getColor)('yellow.500'),
    custom: (0, _color.getColor)('purple.400')
  },
  dotSize: 6,
  defaultSize: 2 * 2 + 6,
  iconSize: 18,
  size: {
    md: 8,
    sm: 4
  }
};
exports.config = config;
var StatusDotUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "StatusDotcss__StatusDotUI",
  componentId: "sc-1hgdygv-0"
})(["background-color:currentColor;border-radius:50%;border:", "px solid ", ";color:", ";height:", "px;width:", "px;&.is-inline{display:inline-block;}&.is-available,&.is-active,&.is-online,&.is-new{border:none;color:", ";}&.is-unavailable,&.is-offline{border-color:", ";color:", ";}&.is-assign,&.is-busy{border-color:", ";color:", ";}&.is-inactive{border:none;color:", ";}&.is-custom{border-color:", ";color:", ";}", " &.is-icon{background-color:", ";border-width:0;height:", "px;width:", "px;&.is-offline{color:", ";}&.is-busy{color:", ";}}"], config.borderWidth, config.backgroundColor, config.color.default, config.defaultSize, config.defaultSize, config.color.active, config.color.offline, config.backgroundColor, config.color.busy, config.backgroundColor, config.color.inactive, config.color.custom, config.backgroundColor, makeSizeStyles(), config.backgroundColor, config.iconSize, config.iconSize, config.color.offline, config.color.busy);
exports.StatusDotUI = StatusDotUI;
var CenteredContentUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "StatusDotcss__CenteredContentUI",
  componentId: "sc-1hgdygv-1"
})(["height:100%;display:flex;align-items:center;justify-content:center;"]);
exports.CenteredContentUI = CenteredContentUI;

function makeSizeStyles() {
  return (0, _forEach.default)(config.size, function (name, value) {
    var size = Math.floor(config.borderWidth * 2) + value;
    return "\n      &.is-" + name + " {\n        height: " + size + "px;\n        width: " + size + "px;\n      }\n    ";
  });
}