react-ions/lib/components/Alerts/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
});
exports.alertSystemWrapper = exports.countdownBar = exports.countdownBarWrapper = exports.closeIcon = exports.alertWrapper = undefined;

var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  padding: 7px 10px;\n  border-radius: 4px;\n  background-color: ', ';\n  color: ', ';\n  font-size: 13px;\n  line-height: 1.5;\n  font-weight: 200;\n  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);\n  margin-bottom: 15px;\n  position: relative;\n  overflow: hidden;\n\n  ', '\n  \n  > svg {\n    fill: ', ';\n    margin-top: 1px;\n    min-width: 17px;\n\n    + div {\n      margin-left: 10px;\n      margin-right: ', ';\n    }\n  }\n\n  &:hover .countdown-bar {\n    animation-play-state: paused;\n  }\n'], ['\n  display: flex;\n  padding: 7px 10px;\n  border-radius: 4px;\n  background-color: ', ';\n  color: ', ';\n  font-size: 13px;\n  line-height: 1.5;\n  font-weight: 200;\n  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);\n  margin-bottom: 15px;\n  position: relative;\n  overflow: hidden;\n\n  ', '\n  \n  > svg {\n    fill: ', ';\n    margin-top: 1px;\n    min-width: 17px;\n\n    + div {\n      margin-left: 10px;\n      margin-right: ', ';\n    }\n  }\n\n  &:hover .countdown-bar {\n    animation-play-state: paused;\n  }\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n      animation: ', ';\n      animation-iteration-count: 1;\n      max-width: 350px;\n      margin-left: 15px;\n    '], ['\n      animation: ', ';\n      animation-iteration-count: 1;\n      max-width: 350px;\n      margin-left: 15px;\n    ']),
    _templateObject3 = _taggedTemplateLiteral(['\n  animation: ', ';\n  height: 100%;\n  position: absolute;\n  background-color: ', '\n'], ['\n  animation: ', ';\n  height: 100%;\n  position: absolute;\n  background-color: ', '\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  0% {\n    width: 100%;\n  }\n\n  100% {\n    width: 0%;\n  }\n'], ['\n  0% {\n    width: 100%;\n  }\n\n  100% {\n    width: 0%;\n  }\n']),
    _templateObject5 = _taggedTemplateLiteral(['\n  ', ' ', 's linear 1;\n'], ['\n  ', ' ', 's linear 1;\n']),
    _templateObject6 = _taggedTemplateLiteral(['\n  0% {\n    opacity: 0;\n    transform: translate3d(3000px, 0, 0);\n  }\n\n  80% {\n    opacity: 1;\n    transform: translate3d(-25px, 0, 0);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n'], ['\n  0% {\n    opacity: 0;\n    transform: translate3d(3000px, 0, 0);\n  }\n\n  80% {\n    opacity: 1;\n    transform: translate3d(-25px, 0, 0);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n']),
    _templateObject7 = _taggedTemplateLiteral(['\n  ', ' .75s ease-out;\n'], ['\n  ', ' .75s ease-out;\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 alertWrapper = exports.alertWrapper = function alertWrapper(type, closable, slideIn) {
  return (0, _styledComponents.css)(_templateObject, _colors2.default.white, _colors2.default.primary_4, slideIn && (0, _styledComponents.css)(_templateObject2, slideInAnimation), _colors2.default[type], closable ? '20px' : 0);
};

var closeIcon = exports.closeIcon = {
  cursor: 'pointer',
  height: '15px',
  margin: 0,
  position: 'absolute',
  right: '10px',
  top: '9px',

  '> svg': {
    marginTop: 0,
    fill: _colors2.default.neutral_4
  }
};

var countdownBarWrapper = exports.countdownBarWrapper = {
  position: 'absolute',
  left: 0,
  right: 0,
  bottom: 0,
  height: '2px',
  margin: 0
};

var countdownBar = exports.countdownBar = function countdownBar(type, timeout) {
  return (0, _styledComponents.css)(_templateObject3, countdownAnimation(timeout / 1000), _colors2.default[type]);
};

var alertSystemWrapper = exports.alertSystemWrapper = function alertSystemWrapper(slideIn) {
  if (!slideIn) return {};

  return {
    position: 'fixed',
    top: '15px',
    right: '15px',
    zIndex: _functions.zLayers.alert
  };
};

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

var countdownAnimation = function countdownAnimation(duration) {
  return (0, _styledComponents.css)(_templateObject5, countdown, duration);
};

var slideInRight = (0, _styledComponents.keyframes)(_templateObject6);

var slideInAnimation = (0, _styledComponents.css)(_templateObject7, slideInRight);