office-ui-fabric-react/lib/components/Modal/Modal.styles.js

Reusable React components for building experiences for Office 365.

import { AnimationVariables, getGlobalClassNames, HighContrastSelector } from '../../Styling';
export var animationDuration = AnimationVariables.durationValue2;
export var getOverlayStyles = {
    root: {
        selectors: (_a = {},
            _a[HighContrastSelector] = {
                opacity: 0
            },
            _a)
    }
};
var globalClassNames = {
    root: 'ms-Modal',
    main: 'ms-Dialog-main',
    scrollableContent: 'ms-Modal-scrollableContent',
    isOpen: 'is-open'
};
export var 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 = 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 " + 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