@elastic/eui
Version:
Elastic UI Component Library
40 lines (39 loc) • 3.41 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.euiLoadingLogoStyles = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _global_styling = require("../../global_styling");
var _templateObject, _templateObject2, _templateObject3;
/*
* 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 loadingPulsateAndFade = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n 0% {\n opacity: 0;\n }\n\n 50% {\n transform: scale(.5);\n opacity: .1;\n }\n\n 100% {\n opacity: 0;\n }\n"])));
var loadingPulsate = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n 0% {\n opacity: .15;\n }\n\n 50% {\n transform: scale(.5);\n opacity: .05;\n }\n\n 100% {\n opacity: .15;\n }\n"])));
var loadingBounce = (0, _react.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n 50% {\n transform: translateY(-50%);\n }\n"])));
var loadingPadding = {
m: 'xxs',
l: 'xs',
xl: 's'
};
var euiLoadingLogoStyles = exports.euiLoadingLogoStyles = function euiLoadingLogoStyles(_ref) {
var euiTheme = _ref.euiTheme;
return {
euiLoadingLogo: /*#__PURE__*/(0, _react.css)("position:relative;display:inline-block;", _global_styling.euiCanAnimate, "{&::before,&::after{position:absolute;content:'';inline-size:90%;inset-inline-start:5%;border-radius:50%;opacity:0.2;z-index:1;}&::before{box-shadow:0 0 ", euiTheme.size.s, " ", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsateAndFade, " ", euiTheme.animation.resistance, " infinite;}&::after{background-color:", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsate, " ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingLogo;"),
euiLoadingLogo__icon: /*#__PURE__*/(0, _react.css)("display:inline-block;", _global_styling.euiCanAnimate, "{animation:1s ", loadingBounce, " ", euiTheme.animation.resistance, " infinite;};label:euiLoadingLogo__icon;"),
/**
* 1. Requires pixel math for animation
* 2. Add a half the amount of animation distance padding to the top to give it more room
*/
m: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.m], ";}&::before,&::after{block-size:", euiTheme.base * 0.25, "px;inset-block-end:-", euiTheme.size.xs, ";};label:m;"),
l: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.l], ";}&::before,&::after{block-size:", euiTheme.base * 0.375, "px;inset-block-end:-", euiTheme.size.s, ";};label:l;"),
xl: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.xl], ";}&::before,&::after{block-size:", euiTheme.base * 0.5, "px;inset-block-end:-", euiTheme.size.m, ";};label:xl;")
};
};