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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.SyntaxHighlight = exports.CopyButtonUI = exports.CopyCodeUI = exports.WrapperUI = exports.config = void 0;

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

var _CopyButton = _interopRequireDefault(require("../CopyButton"));

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

var config = {
  borderColor: (0, _color.getColor)('border'),
  borderColorFocus: (0, _color.getColor)('blue.500'),
  boxShadow: '0 0 0 0 transparent',
  boxShadowFocus: "0 0 0 1px " + (0, _color.getColor)('blue.500'),
  fontSize: 12,
  lineHeight: 22,
  padding: 20
};
exports.config = config;
var WrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "CopyCodecss__WrapperUI",
  componentId: "sc-1qg86k0-0"
})(["position:relative;max-width:", ";"], function (_ref) {
  var maxWidth = _ref.maxWidth;
  return maxWidth + 'px' || '100%';
});
exports.WrapperUI = WrapperUI;
var CopyCodeUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "CopyCodecss__CopyCodeUI",
  componentId: "sc-1qg86k0-1"
})(["border-radius:4px;border:1px solid ", ";box-shadow:", ";box-sizing:border-box;font-family:var(--HSDSGlobalFontFamilyMono);font-size:", ";height:auto;line-height:calc(", " / ", ");outline:none;overflow:hidden;padding:15px 20px;white-space:normal;width:auto;word-break:break-all;:focus{border-color:", ";box-shadow:", ";}pre{margin:0;white-space:normal;}"], config.borderColor, config.boxShadow, config.fontSize, config.lineHeight, config.fontSize, config.borderColorFocus, config.boxShadowFocus);
exports.CopyCodeUI = CopyCodeUI;
var CopyButtonUI = (0, _styledComponents.default)(_CopyButton.default).withConfig({
  displayName: "CopyCodecss__CopyButtonUI",
  componentId: "sc-1qg86k0-2"
})(["box-shadow:0 0 0 2px white;position:absolute !important;bottom:10px;right:10px;"]);
exports.CopyButtonUI = CopyButtonUI;
var SyntaxHighlight = (0, _styledComponents.default)('div').withConfig({
  displayName: "CopyCodecss__SyntaxHighlight",
  componentId: "sc-1qg86k0-3"
})(["width:100%;height:100%;word-break:break-all;white-space:pre-wrap;background:none;font-family:'Roboto Mono',monospace;font-size:12px;line-height:26px;outline:none;color:#4f5d6b;div::-moz-selection,span::-moz-selection{background:", ";}div::selection,span::selection{background:", ";}.token.parameter{color:#e87800;}.token.operator,.token.attr-name,.token.punctuation{color:#4f5d6b;}.token.class-name,.token.tag{color:#d21b14;}.token.builtin,.token.number{color:#e87800;}.token.function,.token.keyword{color:#237ab3;}.token.attr-value,.token.string{color:#3cb170;}"], (0, _color.getColor)('blue.200'), (0, _color.getColor)('blue.200'));
exports.SyntaxHighlight = SyntaxHighlight;