calcite-react/Loader/Loader-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledLoaderText = exports.StyledLoaderBars = exports.StyledLoader = void 0;

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _helpers = require("../utils/helpers");

var _CalciteThemeProvider = require("../CalciteThemeProvider");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

// Copyright 2019 Esri
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.​
// styled-components
// Utils, common elements
// Calcite theme and Esri colors
// Calcite components
// Icons
// Third party libraries
var loaderVariables = {
  loaderWidth: '0.85em',
  loaderHeight: '2em',
  loaderZoom: '0.5em',
  loaderSpacing: '1.25em',
  loaderSpeed: '0.8s',
  loaderDelay: '0.16s',
  loaderBlue: _CalciteThemeProvider.CalciteTheme.palette.blue
};

var loadKeyframes = function loadKeyframes(color) {
  return (0, _styledComponents.keyframes)(["0%,80%,100%{opacity:.75;box-shadow:0 0 ", ";height:", ";}40%{opacity:1;box-shadow:0 -0.5em ", ";height:", ";}"], color || loaderVariables.loaderBlue, loaderVariables.loaderHeight, color || loaderVariables.loaderBlue, (0, _helpers.unitCalc)(loaderVariables.loaderHeight, loaderVariables.loaderZoom, '+'));
};

var loadAnimation = function loadAnimation(color) {
  return (0, _styledComponents.css)(["", " ", " infinite ease-in-out;"], loadKeyframes(color), loaderVariables.loaderSpeed);
};

var loaderStyles = function loaderStyles(color) {
  return (0, _styledComponents.css)(["background:", ";animation:", ";width:", ";height:", ";"], color || loaderVariables.loaderBlue, loadAnimation(color), loaderVariables.loaderWidth, loaderVariables.loaderHeight);
};

var loaderPseudoElements = function loaderPseudoElements(color) {
  return (0, _styledComponents.css)(["", ";position:absolute;top:0;content:'';"], loaderStyles(color));
};

var StyledLoader = _styledComponents.default.div.withConfig({
  displayName: "StyledLoader",
  componentId: "v05kzr-0"
})(["position:relative;min-height:", "px;"], function (props) {
  return props.sizeRatio * 3;
});

exports.StyledLoader = StyledLoader;
StyledLoader.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledLoaderBars = _styledComponents.default.div.withConfig({
  displayName: "StyledLoaderBars",
  componentId: "v05kzr-1"
})(["", ";text-indent:-9999em;margin:auto;position:absolute;right:", ";font-size:", "px;animation-delay:", ";margin:", " 0 0;&:before{", ";left:-", ";html[dir='rtl'] &{animation-delay:", ";}}&:after{", ";left:", ";animation-delay:", ";html[dir='rtl'] &{animation-delay:initial;}}"], function (props) {
  return loaderStyles(props.color);
}, function (props) {
  return "calc(50% - ".concat(parseFloat(loaderVariables.loaderWidth) / 2, "em)");
}, function (props) {
  return props.sizeRatio;
}, loaderVariables.loaderDelay, function (props) {
  return (0, _helpers.unitCalc)(loaderVariables.loaderHeight, 0.25, '*');
}, function (props) {
  return loaderPseudoElements(props.color);
}, loaderVariables.loaderSpacing, (0, _helpers.unitCalc)(loaderVariables.loaderDelay, 2, '*'), function (props) {
  return loaderPseudoElements(props.color);
}, loaderVariables.loaderSpacing, (0, _helpers.unitCalc)(loaderVariables.loaderDelay, 2, '*'));

exports.StyledLoaderBars = StyledLoaderBars;
StyledLoaderBars.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledLoaderText = _styledComponents.default.div.withConfig({
  displayName: "StyledLoaderText",
  componentId: "v05kzr-2"
})(["text-align:center;padding-top:", "px;", ";"], function (props) {
  return props.sizeRatio * 3.5;
}, (0, _helpers.fontSize)(0));

exports.StyledLoaderText = StyledLoaderText;
StyledLoaderText.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};