@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;
import { css } from '@emotion/react';
import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
import * as colors from '@atlaskit/theme/colors';
import { N0, N20A, N50, N60A, N800, N90 } from '@atlaskit/theme/colors';
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
import { gridSize } from '@atlaskit/theme/constants';
// menuItemDimensions and itemSpacing are copied from
// packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
export var menuItemDimensions = {
  width: 175,
  height: 32
};

// TODO: Migrate away from gridSize
// Recommendation: Replace directly with 4 due to itemSpacing being used in calculations
export var itemSpacing = gridSize() / 2;
export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  &::after {\n    content: '\u203A';\n    margin-left: ", ";\n    line-height: 20px;\n    color: ", ";\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
export var contextualMenuColorIcon = function contextualMenuColorIcon(color) {
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  &::before {\n    content: '';\n    display: block;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    width: 20px;\n    height: 20px;\n    ", "\n  }\n"])), contextualMenuArrow, DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
};
export var contextualSubMenu = function contextualSubMenu(index) {
  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  padding: ", ";\n\n  > div {\n    padding: 0;\n  }\n"])), "var(--ds-border-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
};
export var buttonStyle = function buttonStyle(selected) {
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  border-radius: 4px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), selected ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-background-neutral, ".concat(N20A, ")"), DEFAULT_BORDER_COLOR);
};

/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:focus-within,\n  &:focus,\n  &:hover {\n    border-color: ", " !important;\n  }\n"])), N50);
export var line = function line(size, selected) {
  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 12px;\n    height: ", "px;\n    background-color: ", ";\n    border-radius: 90px;\n    transform: translate(-50%, -50%) rotate(135deg);\n  }\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, #44546F)");
};
var getHoverStyles = function getHoverStyles(selector) {
  return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n    } \n  }");
};
export var toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
  var enabled = _ref.enabled,
    isOpen = _ref.isOpen;
  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  .image-border-toolbar-btn {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n  }\n  .image-border-toolbar-dropdown {\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n    width: 16px !important;\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    margin-left: 1px;\n  }\n\n  ", "\n  ", "\n"])), !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
};