react-misc-toolbox
Version:
- [ ] diagramexample | optimize creating from blank slate
198 lines (182 loc) • 7.62 kB
JavaScript
;
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;