@atlaskit/editor-common/dist/cjs/styles/shared/shadow.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.shadowSharedStyle = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _OverflowShadow = require("../../ui/OverflowShadow");
var _shadowObserver = require("../../ui/OverflowShadow/shadowObserver");
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var shadowWidth = 8;

/**
 * TODO: This is close to working and removes a tone of JS from OverflowShadow component
 *
 *  background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
 *         linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 100% 0,
 *        linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
 *         linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) 100% 0;
 *       background-repeat: no-repeat;
 *       background-color: white;
 *       background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
 *
 *      background-attachment: local, local, scroll, scroll;
 */

var shadowSharedStyle = exports.shadowSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "& .".concat(_OverflowShadow.shadowClassNames.RIGHT_SHADOW, "::before, .").concat(_OverflowShadow.shadowClassNames.RIGHT_SHADOW, "::after, .").concat(_OverflowShadow.shadowClassNames.LEFT_SHADOW, "::before, .").concat(_OverflowShadow.shadowClassNames.LEFT_SHADOW, "::after"), {
  display: 'none',
  position: 'absolute',
  pointerEvents: 'none',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  zIndex: _editorSharedStyles.akEditorShadowZIndex,
  width: "".concat(shadowWidth, "px"),
  content: "''",
  height: 'calc(100%)'
}), "& .".concat(_OverflowShadow.shadowClassNames.RIGHT_SHADOW, ", .").concat(_OverflowShadow.shadowClassNames.LEFT_SHADOW), {
  position: 'relative'
}), "& .".concat(_OverflowShadow.shadowClassNames.LEFT_SHADOW, "::before"), {
  background: "linear-gradient( to left, transparent 0, ".concat("var(--ds-shadow-overflow-spread, #091e4229)", " 140% ), linear-gradient( to right, ", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px, transparent 1px )"),
  top: '0px',
  left: 0,
  display: 'block'
}), "& .".concat(_OverflowShadow.shadowClassNames.RIGHT_SHADOW, "::after"), {
  background: "linear-gradient( to right, transparent 0, ".concat("var(--ds-shadow-overflow-spread, #091e4229)", " 140% ), linear-gradient( to left, ", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px, transparent 1px )"),
  right: '0px',
  top: '0px',
  display: 'block'
}), "& .".concat(_shadowObserver.shadowObserverClassNames.SENTINEL_LEFT), {
  height: '100%',
  width: '0px',
  minWidth: '0px'
}), "& .".concat(_shadowObserver.shadowObserverClassNames.SENTINEL_RIGHT), {
  height: '100%',
  width: '0px',
  minWidth: '0px'
}));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766