@atlaskit/editor-common/dist/es2019/styles/shared/media-single.js

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

/* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css } from '@emotion/react';
import { akEditorWrappedNodeZIndex } from '@atlaskit/editor-shared-styles';
const richMediaClassName = 'rich-media-item';
const wrappedMediaBreakoutPoint = 410;
const mediaSingleSharedStyle = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  [`li .${richMediaClassName}`]: {
    margin: 0
  },
  // Hack for chrome to fix media single position inside a list when media is the first child
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.ua-chrome li > .mediaSingleView-content-wrap::before': {
    content: "''",
    display: 'block',
    height: 0
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.ua-firefox': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '.mediaSingleView-content-wrap': {
      userSelect: 'none'
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '.captionView-content-wrap': {
      userSelect: 'text'
    }
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  ".mediaSingleView-content-wrap[layout='center']": {
    clear: 'both'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  [`table .${richMediaClassName}`]: {
    marginTop: "var(--ds-space-150, 12px)",
    marginBottom: "var(--ds-space-150, 12px)",
    clear: 'both',
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '&.image-wrap-left[data-layout], &.image-wrap-right[data-layout]': {
      clear: 'none',
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
      '&:first-child': {
        marginTop: "var(--ds-space-150, 12px)"
      }
    }
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  [`.${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-left`]: {
    clear: 'both'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  [`.${richMediaClassName}.image-wrap-left + .${richMediaClassName}.image-wrap-right, .${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-left, .${richMediaClassName}.image-wrap-left + .${richMediaClassName}.image-wrap-left, .${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-right`]: {
    marginRight: 0,
    marginLeft: 0
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  [`@media all and (max-width: ${wrappedMediaBreakoutPoint}px)`]: {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    "div.mediaSingleView-content-wrap[layout='wrap-left'], div.mediaSingleView-content-wrap[data-layout='wrap-left'], div.mediaSingleView-content-wrap[layout='wrap-right'], div.mediaSingleView-content-wrap[data-layout='wrap-right']": {
      float: 'none',
      overflow: 'auto',
      margin: `${"var(--ds-space-150, 12px)"} 0`
    }
  }
});
const mediaSingleSharedStyleNew = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  [`li .${richMediaClassName}`]: {
    margin: 0
  },
  // Hack for chrome to fix media single position inside a list when media is the first child
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.ua-chrome li > .mediaSingleView-content-wrap::before': {
    content: "''",
    display: 'block',
    height: 0
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.ua-firefox': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '.mediaSingleView-content-wrap': {
      userSelect: 'none'
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '.captionView-content-wrap': {
      userSelect: 'text'
    }
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  ".mediaSingleView-content-wrap[layout^='wrap-']": {
    position: 'relative',
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
    zIndex: akEditorWrappedNodeZIndex
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  ".mediaSingleView-content-wrap[layout='center']": {
    clear: 'both'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  [`table .${richMediaClassName}`]: {
    marginTop: "var(--ds-space-150, 12px)",
    marginBottom: "var(--ds-space-150, 12px)",
    clear: 'both',
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '&.image-wrap-left[data-layout], &.image-wrap-right[data-layout]': {
      clear: 'none',
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
      '&:first-child': {
        marginTop: "var(--ds-space-150, 12px)"
      }
    }
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  [`.${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-left`]: {
    clear: 'both'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  [`.${richMediaClassName}.image-wrap-left + .${richMediaClassName}.image-wrap-right, .${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-left, .${richMediaClassName}.image-wrap-left + .${richMediaClassName}.image-wrap-left, .${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-right`]: {
    marginRight: 0,
    marginLeft: 0
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  [`@media all and (max-width: ${wrappedMediaBreakoutPoint}px)`]: {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    "div.mediaSingleView-content-wrap[layout='wrap-left'], div.mediaSingleView-content-wrap[data-layout='wrap-left'], div.mediaSingleView-content-wrap[layout='wrap-right'], div.mediaSingleView-content-wrap[data-layout='wrap-right']": {
      float: 'none',
      overflow: 'auto',
      margin: `${"var(--ds-space-150, 12px)"} 0`
    }
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export { mediaSingleSharedStyle, mediaSingleSharedStyleNew, richMediaClassName };