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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.EmojiPickerUI = exports.EmojiItemUI = exports.TogglerUI = void 0;

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

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

var _DropList = require("../DropList/DropList.css");

var SIZES = {
  EMOJI: {
    sm: '16px',
    md: '24px',
    lg: '32px'
  },
  LIST_HEIGHT: {
    sm: '32px',
    md: '40px',
    lg: '48px'
  },
  LIST_WIDTH: {
    sm: '200px',
    md: '250px',
    lg: '300px'
  },
  GRID_COLUMNS: {
    sm: '32px',
    md: '40px',
    lg: '48px'
  }
};
var TogglerUI = (0, _styledComponents.default)('button').withConfig({
  displayName: "EmojiPickercss__TogglerUI",
  componentId: "sc-8m5mdr-0"
})(["border:0;background-color:transparent;cursor:pointer;color:", ";&:active,&:focus,&:hover{color:", ";}"], (0, _color.getColor)('grey.600'), (0, _color.getColor)('yellow.500'));
exports.TogglerUI = TogglerUI;
var EmojiItemUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EmojiPickercss__EmojiItemUI",
  componentId: "sc-8m5mdr-1"
})(["width:100%;text-align:center;cursor:pointer;transform:scale(1);display:flex;align-items:center;.is-highlighted &{transform:scale(1.075);}"]);
exports.EmojiItemUI = EmojiItemUI;
var EmojiPickerUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "EmojiPickercss__EmojiPickerUI",
  componentId: "sc-8m5mdr-2"
})(["", "{width:", ";height:", ";padding:0;}", "{display:grid;grid-template-columns:repeat( 6,", " );justify-items:center;align-items:center;width:100%;height:", ";padding:0;overflow:hidden;line-height:1;}", "{font-size:", ";}"], _DropList.DropListWrapperUI, function (_ref) {
  var emojiSize = _ref.emojiSize;
  return SIZES.LIST_WIDTH[emojiSize];
}, function (_ref2) {
  var emojiSize = _ref2.emojiSize;
  return SIZES.LIST_HEIGHT[emojiSize];
}, _DropList.MenuListUI, function (_ref3) {
  var emojiSize = _ref3.emojiSize;
  return SIZES.GRID_COLUMNS[emojiSize];
}, function (_ref4) {
  var emojiSize = _ref4.emojiSize;
  return SIZES.LIST_HEIGHT[emojiSize];
}, EmojiItemUI, function (_ref5) {
  var emojiSize = _ref5.emojiSize;
  return SIZES.EMOJI[emojiSize];
});
exports.EmojiPickerUI = EmojiPickerUI;