@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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _colors = require("@atlaskit/theme/colors");
var _OverflowShadow = require("../../ui/OverflowShadow");
var _shadowObserver = require("../../ui/OverflowShadow/shadowObserver");
var _css;
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
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)((_css = {}, (0, _defineProperty2.default)(_css, "& .".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',
  zIndex: _editorSharedStyles.akEditorShadowZIndex,
  width: "".concat(shadowWidth, "px"),
  content: "''",
  height: 'calc(100%)'
}), (0, _defineProperty2.default)(_css, "& .".concat(_OverflowShadow.shadowClassNames.RIGHT_SHADOW, ", .").concat(_OverflowShadow.shadowClassNames.LEFT_SHADOW), {
  position: 'relative'
}), (0, _defineProperty2.default)(_css, "& .".concat(_OverflowShadow.shadowClassNames.LEFT_SHADOW, "::before"), {
  background: "linear-gradient( to left, transparent 0, ".concat("var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), " ", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "% ), linear-gradient( to right, ", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px, transparent 1px )"),
  top: '0px',
  left: 0,
  display: 'block'
}), (0, _defineProperty2.default)(_css, "& .".concat(_OverflowShadow.shadowClassNames.RIGHT_SHADOW, "::after"), {
  background: "linear-gradient( to right, transparent 0, ".concat("var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), " ", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "% ), linear-gradient( to left, ", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px, transparent 1px )"),
  right: '0px',
  top: '0px',
  display: 'block'
}), (0, _defineProperty2.default)(_css, "& .".concat(_shadowObserver.shadowObserverClassNames.SENTINEL_LEFT), {
  height: '100%',
  width: '0px',
  minWidth: '0px'
}), (0, _defineProperty2.default)(_css, "& .".concat(_shadowObserver.shadowObserverClassNames.SENTINEL_RIGHT), {
  height: '100%',
  width: '0px',
  minWidth: '0px'
}), _css));