@nbamford123/arwes/lib/Image/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: {
      position: 'relative',
      display: 'block',
      margin: [0, 0, theme.margin],
      width: '100%',
      minHeight: 1,
      verticalAlign: 'middle',

      '&$exiting, &$exited': {
        '& $separator': {
          width: 0
        },
        '& $img, & $children': {
          opacity: 0
        }
      }
    },
    holder: {
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      transition: 'all ' + theme.animTime + 'ms ease-out',
      minHeight: 200
    },
    img: {
      display: 'block',
      border: 'none',
      margin: 0,
      padding: 0,
      width: '100%',
      height: 'auto',
      verticalAlign: 'top',
      boxShadow: 'none',
      transition: 'all ' + theme.animTime + 'ms ease-in',
      opacity: 0
    },
    error: {
      display: 'block',
      margin: 'auto',
      textAlign: 'center',
      color: theme.color.alert.base
    },
    separator: {
      position: 'absolute',
      top: 'auto',
      left: '50%',
      transform: 'translateX(-50%)',
      display: 'block',
      width: '100%',
      borderStyle: 'solid',
      borderColor: function borderColor(props) {
        return (0, _polished.rgba)(theme.color[props.layer].dark, theme.alpha / 2);
      },
      borderWidth: '0 0 1px',
      transition: 'all ' + theme.animTime + 'ms ease-in'
    },
    children: {
      display: 'block',
      margin: 0,
      padding: theme.padding / 2,
      textAlign: 'center',
      backgroundColor: function backgroundColor(props) {
        return theme.background[props.layer].level1;
      },
      color: function color(props) {
        return theme.color[props.layer].dark;
      },
      transition: 'opacity ' + theme.animTime + 'ms ease-in',
      opacity: 1
    },

    ready: {
      '& $holder': {
        minHeight: 'auto'
      },
      '& $img': {
        opacity: 1
      }
    },

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