@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
10 lines • 1.55 kB
JavaScript
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject, _templateObject2;
import { css } from '@emotion/react';
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
// Normal .className gets overridden by input[type=text] hence this hack to produce input.className
export var panelTextInput = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n input& {\n background: transparent;\n border: 2px solid ", ";\n border-radius: 0;\n box-sizing: content-box;\n color: ", ";\n flex-grow: 1;\n font-size: ", ";\n line-height: 20px;\n padding: ", " ", "\n ", " ", ";\n min-width: 145px;\n\n /* Hides IE10+ built-in [x] clear input button */\n &::-ms-clear {\n display: none;\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n }\n\n &::placeholder {\n color: ", ";\n }\n }\n"])), "var(--ds-border, ".concat(N30, ")"), "var(--ds-text-subtle, ".concat(N400, ")"), relativeFontSizeToBase16(13), "var(--ds-space-075, 6px)", "var(--ds-space-400, 32px)", "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(B100, ")"), "var(--ds-text-subtlest, ".concat(N100, ")"));
export var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n input& {\n width: ", "px;\n }\n"])), width);
};