@atlaskit/editor-core/dist/esm/ui/EditorContentContainer/styles/syncBlockStyles.js

A package contains Atlassian editor core functionality

import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _$concat$concat;
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
import { css, keyframes } from '@emotion/react';
import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var syncBlockStylesBase = css(_defineProperty({
  '@property --angle': {
    syntax: '"<angle>"',
    initialValue: '0deg',
    inherits: 'false'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': _defineProperty(_defineProperty(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.prefix, ", .").concat(BodiedSyncBlockSharedCssClassName.prefix), (_$concat$concat = {
    position: 'relative',
    cursor: 'pointer',
    borderRadius: "var(--ds-radius-small, 3px)",
    marginBottom: 0,
    marginTop: "var(--ds-space-075, 6px)",
    paddingBlock: "var(--ds-space-150, 12px)",
    color: 'inherit',
    /* Hover state */
    '&:hover': _defineProperty({
      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
      boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border, #0B120E24)"),
      transition: 'box-shadow 200ms ease-in'
    }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
      opacity: 1,
      visibility: 'visible',
      transition: 'opacity 200ms ease-in, visibility 200ms ease-in'
    })
  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat$concat, "&.".concat(BodiedSyncBlockSharedCssClassName.selectionInside), _defineProperty({
    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
    opacity: 1,
    visibility: 'visible'
  })), '&.ak-editor-selected-node', _defineProperty({
    boxShadow: "0 0 0 1px ".concat("var(--ds-border-focused, #4688EC)")
  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
    opacity: 1,
    visibility: 'visible',
    backgroundColor: "var(--ds-background-selected, #E9F2FE)",
    top: '-14px',
    paddingBottom: "var(--ds-space-050, 4px)",
    paddingTop: "var(--ds-space-050, 4px)",
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '> span': {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
      color: "var(--ds-text-selected, #1868DB)".concat(" !important")
    }
  })), '&.danger', _defineProperty({
    boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.ak-editor-panel__icon': {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
      color: "var(--ds-icon-danger, #C9372C)".concat(" !important")
    }
  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
    backgroundColor: "var(--ds-background-danger, #FFECEB)",
    top: '-14px',
    paddingBottom: "var(--ds-space-050, 4px)",
    paddingTop: "var(--ds-space-050, 4px)",
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '> span': {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
      color: "var(--ds-text-danger, #AE2E24)".concat(" !important")
    }
  })), "&.".concat(SyncBlockStateCssClassName.disabledClassName), _defineProperty({
    backgroundColor: "var(--ds-background-disabled, #17171708)",
    boxShadow: "0 0 0 1px ".concat("var(--ds-border-disabled, #0515240F)"),
    userSelect: 'none'
  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
    backgroundColor: "var(--ds-surface, #FFFFFF)",
    '&::before': {
      border: 'none'
    }
  })), "&.".concat(SyncBlockStateCssClassName.creationLoadingClassName), _defineProperty({
    animation: "".concat(keyframes({
      from: {
        '--angle': '0deg'
      },
      to: {
        '--angle': '360deg'
      }
    }), " 2s linear infinite"),
    border: '1px solid transparent',
    background: "linear-gradient(".concat("var(--ds-surface, #FFFFFF)", ", ", "var(--ds-surface, #FFFFFF)", ") padding-box, conic-gradient(from var(--angle), #1868DB, ", "var(--ds-background-accent-purple-subtlest-pressed, #E3BDFA)", ", #3279E0, #1868DB) border-box"),
    backgroundClip: 'padding-box, border-box',
    boxShadow: 'none',
    transition: 'boxShadow 200ms ease-in'
  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
    display: 'none'
  })), ":has(.".concat(SyncBlockSharedCssClassName.error, ")"), {
    backgroundColor: "var(--ds-background-disabled, #17171708)"
  }), ":has(.".concat(SyncBlockSharedCssClassName.loading, ")"), _defineProperty({
    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
    opacity: 0,
    visibility: 'hidden'
  })), "&.".concat(SyncBlockStateCssClassName.viewModeClassName), _defineProperty({
    boxShadow: 'none',
    backgroundColor: 'unset'
  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
    opacity: 0,
    visibility: 'hidden'
  })), "&.".concat(SyncBlockStateCssClassName.draggingClassName), _defineProperty({
    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
    opacity: 1,
    visibility: 'visible'
  })), ".".concat(BodiedSyncBlockSharedCssClassName.content), {
    paddingTop: 0,
    paddingBottom: 0,
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
    paddingLeft: '19px',
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
    paddingRight: '18px',
    cursor: 'text'
  }), _defineProperty(_$concat$concat, ".".concat(SyncBlockSharedCssClassName.renderer), {
    paddingTop: 0,
    paddingBottom: 0,
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
    paddingLeft: '19px',
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
    paddingRight: '18px'
  }))), ".".concat(BodiedSyncBlockSharedCssClassName.content), {
    // First child node that has drag handle widget next to it is overridden with marginTop: 0, see globalStyles in editor-plugin-block-controls/src/ui/global-styles.tsx
    // Hence we set marginTop: 0 when by default to avoid flickering when hovering on and off the first node
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
    '> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
      marginTop: 0
    }
  }), ".".concat(SyncBlockSharedCssClassName.renderer), {
    // First child node in bodiedSyncBlock is overridden with marginTop: 0, hence apply the same style to syncBlock for consistency
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
    '.ak-renderer-document > :first-child': {
      marginTop: 0
    }
  })
}, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
  borderRadius: "var(--ds-radius-small, 3px)",
  position: 'absolute',
  gap: "var(--ds-space-050, 4px)",
  justifyContent: 'center',
  alignItems: 'center',
  display: 'flex',
  opacity: 0,
  visibility: 'hidden',
  boxShadow: 'none',
  zIndex: 1,
  paddingLeft: "var(--ds-space-100, 8px)",
  paddingRight: "var(--ds-space-100, 8px)",
  top: '-10px',
  right: "var(--ds-space-150, 12px)",
  backgroundColor: "var(--ds-surface, #FFFFFF)",
  maxWidth: '140px'
}));

// Export the default styles with negative margins (original behavior)
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var syncBlockStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': _defineProperty({}, ".".concat(SyncBlockSharedCssClassName.prefix, ", .").concat(BodiedSyncBlockSharedCssClassName.prefix), {
    marginRight: "-19px",
    marginLeft: "-19px"
  })
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var syncBlockOverflowStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': _defineProperty(_defineProperty({}, ".".concat(BodiedSyncBlockSharedCssClassName.content), {
    // Contain floated elements (wrap-left/wrap-right) within synced block borders
    // Use display: flow-root to create a block formatting context without clipping other content e.g. telepointers
    display: 'flow-root'
  }), ".".concat(SyncBlockSharedCssClassName.renderer), {
    // Contain floated elements (wrap-left/wrap-right) within synced block borders
    // Use display: flow-root to create a block formatting context without clipping other content e.g. telepointers
    display: 'flow-root'
  })
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var syncBlockFirstNodeStyles = css(_defineProperty({}, ".ProseMirror > .fabric-editor-breakout-mark:first-child", _defineProperty({}, ".".concat(SyncBlockSharedCssClassName.prefix, ", .").concat(BodiedSyncBlockSharedCssClassName.prefix), {
  marginTop: 0
})));