mx-react-toaster/src/alert/Alert.js

A simple react toaster component

'use strict';

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

var _glamorousCjs = require('glamorous/dist/glamorous.cjs.tiny');

var _glamorousCjs2 = _interopRequireDefault(_glamorousCjs);

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

var Alert = (0, _glamorousCjs2.default)('div')({
  width: '300px',
  minHeight: '50px',
  margin: '10px 0 0 0',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  borderRadius: '2px',
  fontSize: '11px',
  boxShadow: '0 8px 12px 0 rgba(0,0,0,0.3)',
  position: 'relative',
  '&.scale-enter': {
    transform: 'scale(0)'
  },
  '&.scale-enter.scale-enter-active': {
    transform: 'scale(1)',
    transition: 'all 250ms cubic-bezier(0, 0, 0.5, 1.5)'
  },
  '&.scale-leave': {
    transform: 'scale(1)'
  },
  '&.scale-leave.scale-leave-active': {
    transform: 'scale(0)',
    transition: 'all 250ms ease-in-out'
  },
  '&.fade-enter': {
    opacity: '0.1'
  },
  '&.fade-enter.fade-enter-active': {
    opacity: '1',
    transition: 'all 250ms ease-out'
  },
  '&.fade-leave': {
    opacity: '1'
  },
  '&.fade-leave.fade-leave-active': {
    opacity: '0.1',
    transition: 'all 250ms ease-in'
  }
}, function (props) {
  var glam = props.glam;
  var type = glam.type,
      dark = glam.dark,
      color = glam.color;

  var style = {};

  if (dark) {
    style.backgroundColor = '#333';
    style.color = '#fff';
  } else if (color) {
    style.color = '#fff';
    if (type === "error") {
      style.backgroundColor = '#C82800';
    } else if (type === "success") {
      style.backgroundColor = '#0D8600';
    } else if (type === "info") {
      style.backgroundColor = '#005289';
    }
  } else {
    style.backgroundColor = '#fff';
    style.color = '#333';
  }

  return style;
});

exports.default = Alert;