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

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

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject;
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 var resizerItemClassName = 'resizer-item';
export var resizerHoverZoneClassName = 'resizer-hover-zone';
export var resizerExtendedZone = 'resizer-is-extended';
export var resizerHandleClassName = 'resizer-handle';
export var resizerHandleTrackClassName = "".concat(resizerHandleClassName, "-track");
export var resizerHandleThumbClassName = "".concat(resizerHandleClassName, "-thumb");
export var resizerDangerClassName = "".concat(resizerHandleClassName, "-danger");

// akEditorSelectedNodeClassName from '@atlaskit/editor-shared-styles';
var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
export var handleWrapperClass = 'resizer-handle-wrapper';
export var 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 var resizerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    will-change: width;\n\n    &:hover,\n    &.display-handle {\n      & > .", " > .", " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }\n\n    &.is-resizing {\n      & .", " {\n        background: ", ";\n      }\n    }\n\n    &.", " {\n      & .", " {\n        transition: none;\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    display: flex;\n    visibility: hidden;\n    opacity: 0;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 7px;\n    transition: visibility 0.2s, opacity 0.2s;\n\n    /*\n      NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles\n      into the tooltip\n    */\n    & div[role='presentation'] {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      margin-top: ", ";\n      white-space: normal;\n    }\n\n    /*\n      Handle Positions\n    */\n    &.left {\n      align-items: flex-start;\n    }\n    &.right {\n      align-items: flex-end;\n    }\n\n    /*\n      Handle Sizing\n    */\n    &.small {\n      & .", " {\n        height: 43px;\n      }\n    }\n    &.medium {\n      & .", " {\n        height: 64px;\n      }\n    }\n    &.large {\n      & .", " {\n        height: 96px;\n      }\n    }\n\n    /*\n      Handle Alignment\n    */\n    &.sticky {\n      & .", " {\n        position: sticky;\n        top: ", ";\n        bottom: ", ";\n      }\n    }\n\n    &:hover {\n      & .", " {\n        background: ", ";\n      }\n\n      & .", " {\n        visibility: visible;\n        opacity: 0.5;\n      }\n    }\n  }\n\n  .", " {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    margin: 0 ", ";\n    height: 64px;\n    transition: background-color 0.2s;\n    border-radius: 6px;\n    border: 0;\n    padding: 0;\n    z-index: 2;\n    outline: none;\n    min-height: 24px;\n    background: ", ";\n\n    &:hover {\n      cursor: col-resize;\n    }\n\n    &:focus {\n      background: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        right: ", ";\n        bottom: ", ";\n        left: ", ";\n        border: 2px solid ", ";\n        border-radius: inherit;\n        z-index: -1;\n      }\n    }\n  }\n\n  .", " {\n    visibility: hidden;\n    position: absolute;\n    width: 7px;\n    height: calc(100% - 40px);\n    border-radius: 4px;\n    opacity: 0;\n    transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;\n\n    &.none {\n      background: none;\n    }\n\n    &.shadow {\n      background: ", ";\n    }\n\n    &.full-height {\n      background: ", ";\n      height: 100%;\n      min-height: 36px;\n    }\n  }\n\n  .", " {\n    & .", " {\n      background: ", ";\n    }\n  }\n\n  .", " {\n    position: relative;\n    display: inline-block;\n    width: 100%;\n\n    &.", " {\n      padding: 0 ", ";\n      left: ", ";\n    }\n  }\n\n  // This below style is here to make sure the image width is correct when nested in a table\n  table\n    .", ",\n    table\n    .", ".", " {\n    padding: unset;\n    left: unset;\n  }\n"])), resizerItemClassName, handleWrapperClass, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerDangerClassName, resizerHandleThumbClassName, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), resizerHandleClassName, "var(--ds-space-negative-200, -16px)", resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-space-025, 2px)", "var(--ds-border, ".concat(N60, ")"), "var(--ds-border-selected, #0C66E4)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-border-focused, #388BFF)", resizerHandleTrackClassName, "var(--ds-background-selected, ".concat(B50, ")"), "var(--ds-background-selected, ".concat(B50, ")"), akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHoverZoneClassName, resizerExtendedZone, "var(--ds-space-150, 12px)", "var(--ds-space-negative-150, -12px)", resizerHoverZoneClassName, resizerHoverZoneClassName, resizerExtendedZone);