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

A package contains Atlassian editor core functionality

/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
import { css } from '@emotion/react';
// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var hideNativeBrowserTextSelectionStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '&::selection,*::selection': {
    backgroundColor: 'transparent'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
  '&::-moz-selection,*::-moz-selection': {
    backgroundColor: 'transparent'
  }
});

// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var borderSelectionStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
  border: "1px solid ".concat("var(--ds-border-selected, #1868DB)"),
  // Fixes ED-15246: Trello card is visible through a border of a table border
  '&::after': {
    height: '100%',
    content: "'\\00a0'",
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
    background: "var(--ds-border-selected, #1868DB)",
    position: 'absolute',
    right: -1,
    top: 0,
    bottom: 0,
    width: 1,
    border: 'none',
    display: 'inline-block'
  }
});

// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var boxShadowSelectionStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)"),
  borderColor: 'transparent'
});

// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var backgroundSelectionStyles = css({
  backgroundColor: "var(--ds-background-selected, #E9F2FE)"
});

// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var blanketSelectionStyles = css({
  position: 'relative',
  // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel
  // in Safari. Looks like it's caused by user-select: all in the emoji element
  WebkitUserSelect: 'text',
  '&::before': {
    position: 'absolute',
    content: "''",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    width: '100%',
    pointerEvents: 'none',
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
    zIndex: 12,
    backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var hideSelectionStyles = css({
  // Hide selection styles for ProseMirror editor
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror-hideselection': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '*::selection': {
      background: 'transparent'
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
    '*::-moz-selection': {
      background: 'transparent'
    }
  }
});

/**
 * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var hideCursorWhenHideSelectionStyles = css({
  // Hide cursor when hide selection styles are applied
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror-hideselection': {
    caretColor: 'transparent'
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var selectedNodeStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror-selectednode': {
    outline: 'none'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror-selectednode:empty': {
    outline: "2px solid ".concat("var(--ds-border-focused, #4688EC)")
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var dangerBorderStyles = css({
  boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var dangerBackgroundStyles = css({
  backgroundColor: "var(--ds-background-danger, #FFECEB)"
});