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 _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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']);

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 = {
  alignItems: 'center',
  bottom: 0,
  justifyContent: 'center',
  left: 0,
  right: 0,
  top: 0
};

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 _extends({}, sharedSpinnerSettings, {
      position: 'fixed',
      zIndex: _functions.zLayers['spinner-fixed']
    });
  }
  if (position === 'absolute') {
    return _extends({}, sharedSpinnerSettings, {
      position: 'absolute',
      zIndex: _functions.zLayers['spinner-absolute']
    });
  }
};

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 _extends({
    backgroundColor: backgroundColor || _colors2.default.white,
    display: 'none'

  }, loadingStyles(loading), positionStyles(position), hiddenStyles(!loading), {

    '.spinner-dots': {
      animation: dotsRotate + ' 2.0s infinite linear',
      height: (size || 40) + 'px',
      position: 'relative',
      width: (size || 40) + 'px',

      '.dot1, .dot2': {
        animation: dotsBounce + ' 2.0s infinite ease-in-out',
        backgroundColor: color || _colors2.default.primary_1,
        borderRadius: '100%',
        display: 'inline-block',
        height: '60%',
        position: 'absolute',
        top: 0,
        width: '60%'
      },
      '.dot2': {
        animationDelay: '-1.0s',
        backgroundColor: color || _colors2.default.danger,
        bottom: 0,
        top: 'auto'
      }
    },

    '.spinner-bounce': {
      '.bounce1, .bounce2, .bounce3': {
        animation: bounceDelay + ' 1.4s infinite ease-in-out both',
        backgroundColor: color || _colors2.default.neutral_4,
        borderRadius: '100%',
        display: 'inline-block',
        height: (size || 12) + 'px',
        marginRight: '3px',
        width: (size || 12) + 'px'
      },
      '.bounce1': {
        animationDelay: '-0.32s'
      },
      '.bounce2': {
        animationDelay: '-0.16s'
      },
      '.bounce3': {
        marginRight: 0
      }
    },

    '.spinner-circular': {
      display: 'inline-block',
      position: 'relative',
      width: (size || 16) + 'px',
      height: (size || 16) + 'px',
      '.sc-inner': {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'visible',
        verticalAlign: 'middle'
      },
      '.sc-inner-animation': {
        animation: ring + ' .5s linear infinite'
      },
      '.sc-inner svg': {
        display: 'block'
      },
      '.sc-inner path': {
        fillOpacity: '0'
      },
      '.sc-inner-head': {
        transformOrigin: 'center',
        transition: 'stroke-dashoffset .2s cubic-bezier(.4, 1, .75, .9)',
        stroke: '' + (color || _colors2.default.neutral_4),
        strokeLinecap: 'round'
      },
      '.sc-inner-track': {
        stroke: 'rgba(92, 112, 128, .2)'
      }
    }
  });
};

exports.default = styles;