@atlaskit/editor-common/dist/cjs/ui/MultiBodiedExtension/index.js

A package that contains common classes and components for editor and renderer

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.sharedMultiBodiedExtensionStyles = exports.removeMarginsAndBorder = void 0;
var _react = require("@emotion/react");
var _colors = require("@atlaskit/theme/colors");
/** @jsx jsx */

// Wraps the navigation bar and extensionFrames
var mbeExtensionContainer = (0, _react.css)({
  background: 'transparent !important',
  'padding:': {
    left: "var(--ds-space-100, 8px)".concat(" !important"),
    right: "var(--ds-space-100, 8px)".concat(" !important")
  },
  paddingBottom: "var(--ds-space-100, 8px)",
  '&.remove-padding': {
    paddingBottom: 0
  },
  position: 'relative',
  verticalAlign: 'middle',
  cursor: 'pointer',
  '.multiBodiedExtension-handler-result': {
    marginLeft: "var(--ds-space-100, 8px)"
  },
  ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
    display: 'none',
    background: "var(--ds-surface, white)"
  },
  '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
    "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
      marginTop: 0
    }
  }
});
var mbeNavigation = (0, _react.css)({
  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
  borderTopRightRadius: "var(--ds-border-radius, 3px)",
  userSelect: 'none',
  WebkitUserModify: 'read-only',
  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
  borderBottom: 'none !important',
  background: "var(--ds-surface, white)",
  marginLeft: "var(--ds-space-100, 8px)",
  marginRight: "var(--ds-space-100, 8px)",
  '&.remove-margins': {
    marginLeft: 0,
    marginRight: 0
  },
  '&.remove-border': {
    border: 'none'
  }
});
var extensionFrameContent = (0, _react.css)({
  padding: "var(--ds-space-100, 8px)".concat(" !important"),
  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")")),
  display: 'block',
  minHeight: '100px',
  background: "var(--ds-surface, white)",
  borderBottomLeftRadius: "var(--ds-border-radius, 3px)",
  borderBottomRightRadius: "var(--ds-border-radius, 3px)",
  marginLeft: "var(--ds-space-100, 8px)",
  marginRight: "var(--ds-space-100, 8px)",
  cursor: 'initial',
  '.pm-table-with-controls': {
    marginLeft: "var(--ds-space-150, 12px)".concat(" !important"),
    paddingRight: "var(--ds-space-150, 12px)".concat(" !important")
  },
  '.bodiedExtensionView-content-wrap': {
    marginTop: "var(--ds-space-150, 12px)".concat(" !important")
  },
  '.extensionView-content-wrap': {
    marginTop: "var(--ds-space-100, 8px)".concat(" !important")
  }
});
var removeMarginsAndBorder = exports.removeMarginsAndBorder = (0, _react.css)({
  marginLeft: 0,
  marginRight: 0,
  border: 'none'
});
var sharedMultiBodiedExtensionStyles = exports.sharedMultiBodiedExtensionStyles = {
  mbeExtensionContainer: mbeExtensionContainer,
  mbeNavigation: mbeNavigation,
  extensionFrameContent: extensionFrameContent
};