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

A package contains Atlassian editor core functionality

/* 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 const syncBlockStylesBase = css({
  '@property --angle': {
    syntax: '"<angle>"',
    initialValue: '0deg',
    inherits: 'false'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
    [`.${SyncBlockSharedCssClassName.prefix}, .${BodiedSyncBlockSharedCssClassName.prefix}`]: {
      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': {
        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
        boxShadow: `0px 0px 0px 1px ${"var(--ds-border, #0B120E24)"}`,
        transition: 'box-shadow 200ms ease-in',
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
          opacity: 1,
          visibility: 'visible',
          transition: 'opacity 200ms ease-in, visibility 200ms ease-in'
        }
      },
      /* Selection state when cursor inside sync block */
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
      [`&.${BodiedSyncBlockSharedCssClassName.selectionInside}`]: {
        boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
          opacity: 1,
          visibility: 'visible'
        }
      },
      /* Node selection state */
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
      '&.ak-editor-selected-node': {
        boxShadow: `0 0 0 1px ${"var(--ds-border-focused, #4688EC)"}`,
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
        [`.${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)"} !important`
          }
        }
      },
      /* Danger state */
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
      '&.danger': {
        boxShadow: `0 0 0 1px ${"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)"} !important`
        },
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
        [`.${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)"} !important`
          }
        }
      },
      /* Node disabled state */
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
      [`&.${SyncBlockStateCssClassName.disabledClassName}`]: {
        backgroundColor: "var(--ds-background-disabled, #17171708)",
        boxShadow: `0 0 0 1px ${"var(--ds-border-disabled, #0515240F)"}`,
        userSelect: 'none',
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values,  @atlaskit/ui-styling-standard/no-imported-style-values
        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
          backgroundColor: "var(--ds-surface, #FFFFFF)",
          '&::before': {
            border: 'none'
          }
        }
      },
      /* Creation loading state */
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
      [`&.${SyncBlockStateCssClassName.creationLoadingClassName}`]: {
        animation: `${keyframes({
          from: {
            '--angle': '0deg'
          },
          to: {
            '--angle': '360deg'
          }
        })} 2s linear infinite`,
        border: '1px solid transparent',
        background: `linear-gradient(${"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',
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values,  @atlaskit/ui-styling-standard/no-imported-style-values
        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
          display: 'none'
        }
      },
      /* Error state */
      /* In error state sync block should have disabled background colour */
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
      [`:has(.${SyncBlockSharedCssClassName.error})`]: {
        backgroundColor: "var(--ds-background-disabled, #17171708)"
      },
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
      [`:has(.${SyncBlockSharedCssClassName.loading})`]: {
        boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
          opacity: 0,
          visibility: 'hidden'
        }
      },
      /* Live doc view mode state */
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
      [`&.${SyncBlockStateCssClassName.viewModeClassName}`]: {
        boxShadow: 'none',
        backgroundColor: 'unset',
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
          opacity: 0,
          visibility: 'hidden'
        }
      },
      /* Dragging state */
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
      [`&.${SyncBlockStateCssClassName.draggingClassName}`]: {
        boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
          opacity: 1,
          visibility: 'visible'
        }
      },
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
      [`.${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'
      },
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
      [`.${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'
      }
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
    [`.${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
      }
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
    [`.${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
      }
    }
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
  [`.${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 const syncBlockStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
    [`.${SyncBlockSharedCssClassName.prefix}, .${BodiedSyncBlockSharedCssClassName.prefix}`]: {
      marginRight: `-19px`,
      marginLeft: `-19px`
    }
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const syncBlockOverflowStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
    [`.${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'
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
    [`.${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 const syncBlockFirstNodeStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
  [`.ProseMirror > .fabric-editor-breakout-mark:first-child`]: {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
    [`.${SyncBlockSharedCssClassName.prefix}, .${BodiedSyncBlockSharedCssClassName.prefix}`]: {
      marginTop: 0
    }
  }
});