@elastic/eui/lib/components/skeleton/utils.js

Elastic UI Component Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.euiSkeletonGradientAnimation = void 0;
var _react = require("@emotion/react");
var _global_styling = require("../../global_styling");
var _animations = require("../../global_styling/utility/animations");
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

var euiSkeletonGradientAnimation = exports.euiSkeletonGradientAnimation = function euiSkeletonGradientAnimation(_ref) {
  var euiTheme = _ref.euiTheme,
    highContrastMode = _ref.highContrastMode;
  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
    _ref2$slideSize = _ref2.slideSize,
    slideSize = _ref2$slideSize === void 0 ? '-53%' : _ref2$slideSize,
    _ref2$gradientSize = _ref2.gradientSize,
    gradientSize = _ref2$gradientSize === void 0 ? '220%' : _ref2$gradientSize;
  var gradientStartStop = euiTheme.colors.backgroundBaseSkeletonEdge;
  // Increase "shine" visibility in high contrast modes
  var gradientMiddle = highContrastMode ? euiTheme.components.skeletonBackgroundSkeletonMiddleHighContrast : euiTheme.colors.backgroundBaseSkeletonMiddle;
  return /*#__PURE__*/(0, _react.css)(_global_styling.euiCantAnimate, "{background-color:", gradientStartStop, ";}", _global_styling.euiCanAnimate, "{overflow:hidden;isolation:isolate;&::after{content:'';display:block;", (0, _global_styling.logicalCSS)('width', gradientSize), " ", (0, _global_styling.logicalCSS)('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );animation:", (0, _animations.euiAnimSlideX)(slideSize), " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiSkeletonGradientAnimation;");
};