react-misc-toolbox/dist/StyledModalDialog.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Body = exports.ExitButton = exports.Buttons = exports.Header = exports.Container = exports.Ushiro = undefined;

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  position: fixed;\n  height: 100%;\n  top: 0;\n  left: 0;\n  width: 100%;\n  background: ', ';\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-tap-highlight-color: transparent;\n'], ['\n  position: fixed;\n  height: 100%;\n  top: 0;\n  left: 0;\n  width: 100%;\n  background: ', ';\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-tap-highlight-color: transparent;\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  overflow-y: ', ';\n  background: ', ';\n  padding: ', ';\n  border-radius: ', ';\n'], ['\n  overflow-y: ', ';\n  background: ', ';\n  padding: ', ';\n  border-radius: ', ';\n']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  z-index: 2;\n  position: fixed;\n  cursor: pointer;\n  background: ', ';\n  height: ', ';\n  width: ', ';\n  border: ', ';\n  top: ', ';\n  right: ', ';\n  border-radius: 1rem;\n  display: flex;\n'], ['\n  z-index: 2;\n  position: fixed;\n  cursor: pointer;\n  background: ', ';\n  height: ', ';\n  width: ', ';\n  border: ', ';\n  top: ', ';\n  right: ', ';\n  border-radius: 1rem;\n  display: flex;\n']),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  background: ', ';\n  padding: ', ';\n  border-radius: ', ';\n  border-top: ', ';\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n'], ['\n  background: ', ';\n  padding: ', ';\n  border-radius: ', ';\n  border-top: ', ';\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n']),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n  position: relative;\n  cursor: default;\n  z-index: 0;\n  background: ', ';\n  color: ', ';\n  margin: ', ';\n  border: ', ';\n  border-radius: ', ';\n'], ['\n  position: relative;\n  cursor: default;\n  z-index: 0;\n  background: ', ';\n  color: ', ';\n  margin: ', ';\n  border: ', ';\n  border-radius: ', ';\n']),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  align-items: center;\n\n  padding: ', ';\n  margin: ', ';\n  border-bottom: ', ';\n  border-radius: ', ';\n  background: ', ';\n'], ['\n  display: flex;\n  align-items: center;\n\n  padding: ', ';\n  margin: ', ';\n  border-bottom: ', ';\n  border-radius: ', ';\n  background: ', ';\n']);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var Ushiro = _styledComponents2.default.div(_templateObject, function (_ref) {
  var theme = _ref.theme;
  return theme.modaldialog.ushiro.background;
});
Ushiro.defaultProps = {
  theme: {
    modaldialog: {
      ushiro: {
        background: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }
};
var Body = _styledComponents2.default.div(_templateObject2, function (_ref2) {
  var theme = _ref2.theme;
  return theme.modaldialog.body.overflowY;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.modaldialog.body.background;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.modaldialog.body.padding;
}, function (_ref5) {
  var hasHeader = _ref5.hasHeader,
      hasFooter = _ref5.hasFooter,
      theme = _ref5.theme;
  return (hasHeader ? '0 0' : theme.modaldialog.body.borderRadius + ' ' + theme.modaldialog.body.borderRadius) + ' ' + (hasFooter ? '0 0' : theme.modaldialog.body.borderRadius + ' ' + theme.modaldialog.body.borderRadius);
});
Body.defaultProps = {
  hasFooter: false,
  hasHeader: false,
  theme: {
    modaldialog: {
      body: {
        background: '#fdfdfd',
        padding: '2.4rem 2rem',
        overflowY: 'auto',
        borderRadius: '1rem'
      }
    }
  }
};
var ExitButton = _styledComponents2.default.div(_templateObject3, function (_ref6) {
  var theme = _ref6.theme;
  return theme.modaldialog.exitbutton.background;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.modaldialog.exitbutton.height;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.modaldialog.exitbutton.width;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.modaldialog.exitbutton.border;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.modaldialog.exitbutton.top;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.modaldialog.exitbutton.right;
});
ExitButton.defaultProps = {
  theme: {
    modaldialog: {
      exitbutton: {
        zIndex: 2,
        top: '2rem',
        right: '2rem',
        position: 'fixed',
        height: '1.75rem',
        width: '1.75rem',

        background: '#fff',
        border: '1px solid #575757'
      }
    }
  }
};

var Buttons = _styledComponents2.default.div(_templateObject4, function (_ref12) {
  var theme = _ref12.theme;
  return theme.modaldialog.buttons.background;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.modaldialog.buttons.padding;
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.modaldialog.buttons.borderRadius;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.modaldialog.buttons.borderTop;
});

Buttons.defaultProps = {
  theme: {
    modaldialog: {
      buttons: {
        borderTop: '1px solid #575757',
        borderRadius: '0 0 0.375rem 0.375rem',
        padding: '0.5rem',
        background: '#fafafa'
      }
    }
  }
};

var Container = _styledComponents2.default.div(_templateObject5, function (_ref16) {
  var theme = _ref16.theme;
  return theme.modaldialog.container.background;
}, function (_ref17) {
  var theme = _ref17.theme;
  return theme.modaldialog.container.color;
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.modaldialog.container.margin;
}, function (_ref19) {
  var theme = _ref19.theme;
  return theme.modaldialog.container.border;
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.modaldialog.container.borderRadius;
});

Container.defaultProps = {
  theme: {
    modaldialog: {
      container: {
        margin: '0 1rem',
        border: '1px solid #575757',
        borderRadius: '0.375rem',
        color: '#020202',
        background: '#fff'
      }
    }
  }
};

var Header = _styledComponents2.default.div(_templateObject6, function (_ref21) {
  var theme = _ref21.theme;
  return theme.modaldialog.header.padding;
}, function (_ref22) {
  var theme = _ref22.theme;
  return theme.modaldialog.header.margin;
}, function (_ref23) {
  var theme = _ref23.theme;
  return theme.modaldialog.header.borderBottom;
}, function (_ref24) {
  var theme = _ref24.theme;
  return theme.modaldialog.header.borderRadius;
}, function (_ref25) {
  var theme = _ref25.theme;
  return theme.modaldialog.header.background;
});

Header.defaultProps = {
  theme: {
    modaldialog: {
      header: {
        margin: '0',
        padding: '2rem 2rem 1.5rem 2rem',
        borderBottom: '0.5rem solid #f0f0f0',
        borderRadius: '0.375rem 0.375rem 0 0 ',
        background: '#fafafa'
      }
    }
  }
};

exports.Ushiro = Ushiro;
exports.Container = Container;
exports.Header = Header;
exports.Buttons = Buttons;
exports.ExitButton = ExitButton;
exports.Body = Body;