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

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

import { css } from '@emotion/react';
import { akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
import { B200, B50, N60 } from '@atlaskit/theme/colors';
/*
  Styles in this file are based on
  packages/editor/editor-core/src/plugins/media/styles.ts
*/
export const resizerItemClassName = 'resizer-item';
export const resizerHoverZoneClassName = 'resizer-hover-zone';
export const resizerExtendedZone = 'resizer-is-extended';
export const resizerHandleClassName = 'resizer-handle';
export const resizerHandleTrackClassName = `${resizerHandleClassName}-track`;
export const resizerHandleThumbClassName = `${resizerHandleClassName}-thumb`;
export const resizerDangerClassName = `${resizerHandleClassName}-danger`;

// akEditorSelectedNodeClassName from '@atlaskit/editor-shared-styles';
const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
export const handleWrapperClass = 'resizer-handle-wrapper';
export const resizerHandleZIndex = 1;

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems perfectly safe to autofix, but comments would be lost…
export const resizerStyles = css`
  .${resizerItemClassName} {
    will-change: width;

    &:hover,
    &.display-handle {
      & > .${handleWrapperClass} > .${resizerHandleClassName} {
        visibility: visible;
        opacity: 1;
      }
    }

    &.is-resizing {
      & .${resizerHandleThumbClassName} {
        background: ${`var(--ds-border-focused, ${B200})`};
      }
    }

    &.${resizerDangerClassName} {
      & .${resizerHandleThumbClassName} {
        transition: none;
        background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`};
      }
    }
  }

  .${resizerHandleClassName} {
    display: flex;
    visibility: hidden;
    opacity: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 7px;
    transition: visibility 0.2s, opacity 0.2s;

    /*
      NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles
      into the tooltip
    */
    & div[role='presentation'] {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: ${"var(--ds-space-negative-200, -16px)"};
      white-space: normal;
    }

    /*
      Handle Positions
    */
    &.left {
      align-items: flex-start;
    }
    &.right {
      align-items: flex-end;
    }

    /*
      Handle Sizing
    */
    &.small {
      & .${resizerHandleThumbClassName} {
        height: 43px;
      }
    }
    &.medium {
      & .${resizerHandleThumbClassName} {
        height: 64px;
      }
    }
    &.large {
      & .${resizerHandleThumbClassName} {
        height: 96px;
      }
    }

    /*
      Handle Alignment
    */
    &.sticky {
      & .${resizerHandleThumbClassName} {
        position: sticky;
        top: ${"var(--ds-space-150, 12px)"};
        bottom: ${"var(--ds-space-150, 12px)"};
      }
    }

    &:hover {
      & .${resizerHandleThumbClassName} {
        background: ${`var(--ds-border-focused, ${B200})`};
      }

      & .${resizerHandleTrackClassName} {
        visibility: visible;
        opacity: 0.5;
      }
    }
  }

  .${resizerHandleThumbClassName} {
    content: ' ';
    display: flex;
    width: 3px;
    margin: 0 ${"var(--ds-space-025, 2px)"};
    height: 64px;
    transition: background-color 0.2s;
    border-radius: 6px;
    border: 0;
    padding: 0;
    z-index: 2;
    outline: none;
    min-height: 24px;
    background: ${`var(--ds-border, ${N60})`};

    &:hover {
      cursor: col-resize;
    }

    &:focus {
      background: ${"var(--ds-border-selected, #0C66E4)"};

      &::after {
        content: '';
        position: absolute;
        top: ${"var(--ds-space-negative-050, -4px)"};
        right: ${"var(--ds-space-negative-050, -4px)"};
        bottom: ${"var(--ds-space-negative-050, -4px)"};
        left: ${"var(--ds-space-negative-050, -4px)"};
        border: 2px solid ${"var(--ds-border-focused, #388BFF)"};
        border-radius: inherit;
        z-index: -1;
      }
    }
  }

  .${resizerHandleTrackClassName} {
    visibility: hidden;
    position: absolute;
    width: 7px;
    height: calc(100% - 40px);
    border-radius: 4px;
    opacity: 0;
    transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;

    &.none {
      background: none;
    }

    &.shadow {
      background: ${`var(--ds-background-selected, ${B50})`};
    }

    &.full-height {
      background: ${`var(--ds-background-selected, ${B50})`};
      height: 100%;
      min-height: 36px;
    }
  }

  .${akEditorSelectedNodeClassName} {
    & .${resizerHandleThumbClassName} {
      background: ${`var(--ds-border-focused, ${B200})`};
    }
  }

  .${resizerHoverZoneClassName} {
    position: relative;
    display: inline-block;
    width: 100%;

    &.${resizerExtendedZone} {
      padding: 0 ${"var(--ds-space-150, 12px)"};
      left: ${"var(--ds-space-negative-150, -12px)"};
    }
  }

  // This below style is here to make sure the image width is correct when nested in a table
  table
    .${resizerHoverZoneClassName},
    table
    .${resizerHoverZoneClassName}.${resizerExtendedZone} {
    padding: unset;
    left: unset;
  }
`;