@nbamford123/arwes/lib/Logo/styles.js

Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps

'use strict';

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

var _polished = require('polished');

exports.default = function (theme) {
  return {
    root: {
      display: 'inline-block',
      verticalAlign: 'middle',
      transition: 'opacity ' + theme.animTime + 'ms ease-out',
      animation: function animation(props) {
        return props.animate ? 'arwes-logo-rotate ' + theme.animTime * 200 + 'ms infinite linear' : '';
      },
      opacity: 1,

      '&$exiting, &$exited': {
        opacity: 0
      }
    },

    light: {
      fill: function fill(props) {
        return theme.color[props.layer].base;
      }
    },

    center: {
      fill: function fill(props) {
        return (0, _polished.rgba)(theme.color[props.layer].base, 0.5);
      }
    },

    outer: {
      fill: function fill(props) {
        return (0, _polished.rgba)(theme.color[props.layer].base, 0.2);
      }
    },

    elementFilter: {
      filter: 'url(#arwes-logo-filter-blur)'
    },

    entering: {},
    entered: {},
    exiting: {},
    exited: {},

    '@keyframes arwes-logo-rotate': {
      '0%': {
        transform: 'rotate(0deg)'
      },
      '100%': {
        transform: 'rotate(360deg)'
      }
    }
  };
};