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

Media plugin for @atlaskit/editor-core

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
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
import { css } from '@emotion/react';
import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
// menuItemDimensions and itemSpacing are copied from
// packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx

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

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

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)");
export var contextualMenuColorIcon = function contextualMenuColorIcon(color) {
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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)", DEFAULT_BORDER_COLOR, "var(--ds-radius-small, 3px)", color && "background: ".concat(color));
};
export var contextualSubMenu = function contextualSubMenu(index) {
  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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)");
};
export var buttonStyle = function buttonStyle(selected) {
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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)", DEFAULT_BORDER_COLOR);
};

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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)");
export var line = function line(size, selected) {
  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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  }");
};
export var toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
  var enabled = _ref.enabled,
    isOpen = _ref.isOpen;
  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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
export var dropdownOptionButton = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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
export var dropdownWrapper = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\tspan[role='menuitem'] {\n\t\tpadding: 0;\n\t}\n"])));