react-ions/lib/components/Spinner/styles.css.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _templateObject = _taggedTemplateLiteral(['\n  100% {\n    transform: rotate(360deg);\n  }\n'], ['\n  100% {\n    transform: rotate(360deg);\n  }\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  0%, 100% {\n    transform: scale(0.0);\n  } 50% {\n    transform: scale(1.0);\n  }\n'], ['\n  0%, 100% {\n    transform: scale(0.0);\n  } 50% {\n    transform: scale(1.0);\n  }\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n  0%, 80%, 100% {\n    transform: scale(0);\n  } 40% {\n    transform: scale(1.0);\n  }\n'], ['\n  0%, 80%, 100% {\n    transform: scale(0);\n  } 40% {\n    transform: scale(1.0);\n  }\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  0% {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(1turn);\n  }\n'], ['\n  0% {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(1turn);\n  }\n']),
    _templateObject5 = _taggedTemplateLiteral(['\n    background-color: ', ';\n    display: none;\n    ', '\n    ', '\n    ', '\n\n    .spinner-dots {\n      animation: ', ' 2.0s infinite linear;\n      height: ', 'px;\n      position: relative;\n      width: ', 'px;\n    }\n\n    .spinner-dots .dot1, .dot2 {\n      animation: ', ' 2.0s infinite ease-in-out;\n      border-radius: 100%;\n      display: inline-block;\n      height: 60%;\n      position: absolute;\n      top: 0;\n      width: 60%;\n    }\n\n    .spinner-dots .dot1 {\n      background-color: ', ';\n      height: 60%;\n      top: 0;\n    }\n\n    .spinner-dots .dot2 {\n      animation-delay: -1.0s;\n      background-color: ', ';\n      bottom: 0;\n      height: 60%;\n      top: auto;\n    }\n\n    .spinner-bounce .bounce1, .bounce2, .bounce3 {\n      animation: ', ' 1.4s infinite ease-in-out both;\n      background-color: ', ';\n      border-radius: 100%;\n      display: inline-block;\n      height: ', 'px;\n      margin-right: 3px;\n      width: ', 'px;\n    }\n\n    .spinner-bounce .bounce1 {\n      animation-delay: -0.32s;\n    }\n\n    .spinner-bounce .bounce2 {\n      animation-delay: -0.16s;\n    }\n\n    .spinner-bounce .bounce3 {\n      margin-right: 0;\n    }\n\n    .spinner-circular {\n      display: inline-block;\n      position: relative;\n      width: ', 'px;\n      height: ', 'px;\n    }\n\n    .spinner-circular .sc-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      overflow: visible;\n      vertical-align: middle;\n    }\n\n    .spinner-circular .sc-inner-animation {\n        animation: ', ' .5s linear infinite;\n    }\n\n    .spinner-circular .sc-inner svg {\n        display: block;\n    }\n\n    .spinner-circular .sc-inner path {\n        fill-opacity: 0;\n    }\n\n    .spinner-circular .sc-inner-head {\n        transform-origin: center;\n        transition: stroke-dashoffset .2s cubic-bezier(.4, 1, .75, .9);\n        stroke: ', ';\n        stroke-linecap: round;\n    }\n\n    .spinner-circular .sc-inner-track {\n        stroke: rgba(92, 112, 128, .2);\n    }\n  '], ['\n    background-color: ', ';\n    display: none;\n    ', '\n    ', '\n    ', '\n\n    .spinner-dots {\n      animation: ', ' 2.0s infinite linear;\n      height: ', 'px;\n      position: relative;\n      width: ', 'px;\n    }\n\n    .spinner-dots .dot1, .dot2 {\n      animation: ', ' 2.0s infinite ease-in-out;\n      border-radius: 100%;\n      display: inline-block;\n      height: 60%;\n      position: absolute;\n      top: 0;\n      width: 60%;\n    }\n\n    .spinner-dots .dot1 {\n      background-color: ', ';\n      height: 60%;\n      top: 0;\n    }\n\n    .spinner-dots .dot2 {\n      animation-delay: -1.0s;\n      background-color: ', ';\n      bottom: 0;\n      height: 60%;\n      top: auto;\n    }\n\n    .spinner-bounce .bounce1, .bounce2, .bounce3 {\n      animation: ', ' 1.4s infinite ease-in-out both;\n      background-color: ', ';\n      border-radius: 100%;\n      display: inline-block;\n      height: ', 'px;\n      margin-right: 3px;\n      width: ', 'px;\n    }\n\n    .spinner-bounce .bounce1 {\n      animation-delay: -0.32s;\n    }\n\n    .spinner-bounce .bounce2 {\n      animation-delay: -0.16s;\n    }\n\n    .spinner-bounce .bounce3 {\n      margin-right: 0;\n    }\n\n    .spinner-circular {\n      display: inline-block;\n      position: relative;\n      width: ', 'px;\n      height: ', 'px;\n    }\n\n    .spinner-circular .sc-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      overflow: visible;\n      vertical-align: middle;\n    }\n\n    .spinner-circular .sc-inner-animation {\n        animation: ', ' .5s linear infinite;\n    }\n\n    .spinner-circular .sc-inner svg {\n        display: block;\n    }\n\n    .spinner-circular .sc-inner path {\n        fill-opacity: 0;\n    }\n\n    .spinner-circular .sc-inner-head {\n        transform-origin: center;\n        transition: stroke-dashoffset .2s cubic-bezier(.4, 1, .75, .9);\n        stroke: ', ';\n        stroke-linecap: round;\n    }\n\n    .spinner-circular .sc-inner-track {\n        stroke: rgba(92, 112, 128, .2);\n    }\n  ']);

var _styledComponents = require('styled-components');

var _colors = require('../../styles/common/colors.css');

var _colors2 = _interopRequireDefault(_colors);

var _functions = require('../../styles/common/functions.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var dotsRotate = (0, _styledComponents.keyframes)(_templateObject);

var dotsBounce = (0, _styledComponents.keyframes)(_templateObject2);

var bounceDelay = (0, _styledComponents.keyframes)(_templateObject3);

var ring = (0, _styledComponents.keyframes)(_templateObject4);

var sharedSpinnerSettings = '\n  align-items: center;\n  bottom: 0;\n  justify-content: center;\n  left: 0;\n  right: 0;\n  top: 0;\n';

var loadingStyles = function loadingStyles(loading) {
  return loading ? 'display: flex;' : '';
};
var hiddenStyles = function hiddenStyles(hidden) {
  return hidden ? 'display: none;' : '';
};
var positionStyles = function positionStyles(position) {
  if (position === 'inline') return 'display: inline-flex;';
  if (position === 'fixed') {
    return '\n      ' + sharedSpinnerSettings + '\n      position: fixed;\n      z-index: ' + _functions.zLayers['spinner-fixed'] + ';\n    ';
  }
  if (position === 'absolute') {
    return '\n      ' + sharedSpinnerSettings + '\n      position: absolute;\n      z-index: ' + _functions.zLayers['spinner-absolute'] + ';\n    ';
  }
};

var styles = function styles(_ref) {
  var backgroundColor = _ref.backgroundColor,
      color = _ref.color,
      hidden = _ref.hidden,
      loading = _ref.loading,
      position = _ref.position,
      size = _ref.size;

  return (0, _styledComponents.css)(_templateObject5, backgroundColor || _colors2.default.white, loadingStyles(loading), positionStyles(position), hiddenStyles(!loading), dotsRotate, size || 40, size || 40, dotsBounce, color || _colors2.default.primary_1, color || _colors2.default.danger, bounceDelay, color || _colors2.default.neutral_4, size || 12, size || 12, size || 16, size || 16, ring, color || _colors2.default.neutral_4);
};

exports.default = styles;