@atlaskit/editor-plugin-media/dist/cjs/ui/ImageBorder/styles.js

Media plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.toolbarButtonWrapper = exports.menuItemDimensions = exports.line = exports.itemSpacing = exports.dropdownWrapper = exports.dropdownOptionButton = exports.contextualSubMenu = exports.contextualMenuColorIcon = exports.contextualMenuArrow = exports.buttonWrapperStyle = exports.buttonStyle = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _uiColor = require("@atlaskit/editor-common/ui-color");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
// menuItemDimensions and itemSpacing are copied from
// packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx

var menuItemDimensions = exports.menuItemDimensions = {
  width: 175,
  height: 32
};

// itemSpacing is used in calculations expecting a number, hence not using a space token
var itemSpacing = exports.itemSpacing = 4;

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var contextualMenuArrow = exports.contextualMenuArrow = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\t&::after {\n\t\tcontent: '\u203A';\n\t\tmargin-left: ", ";\n\t\tline-height: 20px;\n\t\tcolor: ", ";\n\t}\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)");
var contextualMenuColorIcon = exports.contextualMenuColorIcon = function contextualMenuColorIcon(color) {
  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder: ", " solid ", ";\n\t\tborder-radius: ", ";\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\t", "\n\t}\n"])), contextualMenuArrow, "var(--ds-border-width, 1px)", _uiColor.DEFAULT_BORDER_COLOR, "var(--ds-radius-small, 3px)", color && "background: ".concat(color));
};
var contextualSubMenu = exports.contextualSubMenu = function contextualSubMenu(index) {
  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\tdisplay: flex;\n\tposition: absolute;\n\ttop: ", "px;\n\tleft: ", "px;\n\tpadding: ", ";\n\n\t> div {\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
};
var buttonStyle = exports.buttonStyle = function buttonStyle(selected) {
  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\theight: 26px;\n\twidth: 26px;\n\tpadding: 0;\n\tborder-radius: ", ";\n\tbackground-color: ", ";\n\tborder: 1px solid ", ";\n\tcursor: pointer;\n\tdisplay: block;\n"])), "var(--ds-radius-small, 4px)", selected ? "var(--ds-text, #292A2E)" : "var(--ds-background-neutral, #0515240F)", _uiColor.DEFAULT_BORDER_COLOR);
};

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var buttonWrapperStyle = exports.buttonWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\tborder: 1px solid transparent;\n\tmargin: ", ";\n\tfont-size: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ", ";\n\tborder-radius: ", ";\n\t&:focus-within,\n\t&:focus,\n\t&:hover {\n\t\tborder-color: ", " !important;\n\t}\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", "var(--ds-radius-medium, 6px)", "var(--ds-border, #0B120E24)");
var line = exports.line = function line(size, selected) {
  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\t&:before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\twidth: 12px;\n\t\theight: ", "px;\n\t\tbackground-color: ", ";\n\t\tborder-radius: 90px;\n\t\ttransform: translate(-50%, -50%) rotate(135deg);\n\t}\n"])), size, selected ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #292A2E)");
};
var getHoverStyles = function getHoverStyles(selector) {
  return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, #0515240F)", ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, #0B120E24)", ";\n    }\n  }");
};
var toolbarButtonWrapper = exports.toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
  var enabled = _ref.enabled,
    isOpen = _ref.isOpen;
  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\t.image-border-toolbar-btn {\n\t\tborder-top-right-radius: 0;\n\t\tborder-bottom-right-radius: 0;\n\t\tpadding: 0;\n\t\t& > span {\n\t\t\tmargin: 0;\n\t\t}\n\t\t&:not([disabled])::after {\n\t\t\tborder: none;\n\t\t}\n\t}\n\t.image-border-toolbar-dropdown {\n\t\tpadding: 0;\n\t\t& > span {\n\t\t\tmargin: 0;\n\t\t}\n\t\twidth: 16px !important;\n\t\tborder-top-left-radius: 0 !important;\n\t\tborder-bottom-left-radius: 0 !important;\n\t\tmargin-left: ", ";\n\t\t&:not([disabled])::after {\n\t\t\tborder: none;\n\t\t}\n\t}\n\n\t", "\n\t", "\n"])), "var(--ds-space-025, 2px)", !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
};

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var dropdownOptionButton = exports.dropdownOptionButton = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\tbackground: transparent;\n\tborder: ", " solid transparent;\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 8px 16px;\n\n\t&:focus {\n\t\tbackground-color: ", ";\n\t\tborder: ", " solid ", ";\n\t}\n"])), "var(--ds-border-width-focused, 2px)", "var(--ds-background-neutral-subtle-hovered, #0515240F)", "var(--ds-border-width-focused, 2px)", "var(--ds-border-focused, #4688EC)");

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var dropdownWrapper = exports.dropdownWrapper = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\tspan[role='menuitem'] {\n\t\tpadding: 0;\n\t}\n"])));