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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = exports.ClearAllUI = exports.TagListUI = exports.ItemUI = exports.ListUI = exports.ShowAllButtonUI = void 0;

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

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

var _font = require("../../styles/utilities/font");

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

var _focusRing = require("../../styles/mixins/focusRing.css");

var ShowAllButtonUI = _styledComponents.default.button.withConfig({
  displayName: "TagListcss__ShowAllButtonUI",
  componentId: "itn4w0-0"
})(["", " margin-left:8px;border-radius:3px;display:flex;flex:0 0 auto;align-items:center;justify-content:center;padding:0 5px;height:28px;min-width:28px;border:1px solid ", ";color:", ";background-color:", ";box-shadow:none;font-size:12px;line-height:1;font-family:var(--HSDSGlobalFontFamilySystem);&:hover{cursor:pointer;border-color:", ";}"], _focusRing.focusRing, (0, _color.getColor)('grey.400'), (0, _color.getColor)('charcoal.600'), (0, _color.getColor)('grey.400'), (0, _color2.darken)((0, _color.getColor)('grey.400'), 30));

exports.ShowAllButtonUI = ShowAllButtonUI;

var ListUI = _styledComponents.default.ul.withConfig({
  displayName: "TagListcss__ListUI",
  componentId: "itn4w0-1"
})(["display:block;margin:0 0 8px 0;padding:0;max-width:100%;"]);

exports.ListUI = ListUI;

var ItemUI = _styledComponents.default.li.withConfig({
  displayName: "TagListcss__ItemUI",
  componentId: "itn4w0-2"
})(["display:inline-flex;margin:0 8px 8px 0;max-width:100%;padding:0;align-items:center;list-style:none;"]);

exports.ItemUI = ItemUI;
var TagListUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "TagListcss__TagListUI",
  componentId: "itn4w0-3"
})(["&.is-sm{", "{margin:0 0 4px 0;}", "{margin:0 4px 4px 0;}", "{height:18px;min-width:18px;}}&.is-md{", "{margin:0 0 8px 0;}", "{margin:0 4px 4px 0;}", "{height:22px;min-width:22px;}}"], ListUI, ItemUI, ShowAllButtonUI, ListUI, ItemUI, ShowAllButtonUI);
exports.TagListUI = TagListUI;
var ClearAllUI = (0, _styledComponents.default)('button').withConfig({
  displayName: "TagListcss__ClearAllUI",
  componentId: "itn4w0-4"
})(["", " border:none;background:none;cursor:pointer;padding:0 4px;height:16px;line-height:1;margin-left:8px;color:", ";", ";&:hover{color:", ";}"], _focusRing.focusRing, (0, _color.getColor)('charcoal.200'), (0, _font.setFontSize)(12), (0, _color.getColor)('charcoal.400'));
exports.ClearAllUI = ClearAllUI;
var _default = TagListUI;
exports.default = _default;