office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
72 lines • 2.69 kB
JavaScript
define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.animationDuration = Styling_1.AnimationVariables.durationValue2;
exports.getOverlayStyles = {
root: {
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
opacity: 0
},
_a)
}
};
var globalClassNames = {
root: 'ms-Modal',
main: 'ms-Dialog-main',
scrollableContent: 'ms-Modal-scrollableContent',
isOpen: 'is-open'
};
exports.getStyles = function (props) {
var className = props.className, containerClassName = props.containerClassName, scrollableContentClassName = props.scrollableContentClassName, isOpen = props.isOpen, isVisible = props.isVisible, theme = props.theme;
var palette = theme.palette;
var classNames = Styling_1.getGlobalClassNames(globalClassNames, theme);
return {
root: [
classNames.root,
{
backgroundColor: 'transparent',
position: 'fixed',
height: '100%',
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
opacity: 0,
pointerEvents: 'none',
transition: "opacity " + exports.animationDuration
},
isOpen && classNames.isOpen,
isVisible && {
opacity: 1,
pointerEvents: 'auto'
},
className
],
main: [
classNames.main,
{
boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',
backgroundColor: palette.white,
boxSizing: 'border-box',
position: 'relative',
textAlign: 'left',
outline: '3px solid tranparent',
maxHeight: '100%',
overflowY: 'auto'
},
containerClassName
],
scrollableContent: [
classNames.scrollableContent,
{
overflowY: 'auto',
flexGrow: 1
},
scrollableContentClassName
]
};
};
var _a;
});
//# sourceMappingURL=Modal.styles.js.map