| 1 | {"version":3,"file":"Modal.styles.js","sourceRoot":"../src/","sources":["components/Modal/Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { IModalStyleProps, IModalStyles } from './Modal.types';\nimport { AnimationVariables, getGlobalClassNames, ZIndexes } from '../../Styling';\n\nexport const animationDuration = AnimationVariables.durationValue2;\n\nconst globalClassNames = {\n root: 'ms-Modal',\n main: 'ms-Dialog-main',\n scrollableContent: 'ms-Modal-scrollableContent',\n isOpen: 'is-open',\n layer: 'ms-Modal-Layer',\n};\n\nexport const getStyles = (props: IModalStyleProps): IModalStyles => {\n const {\n className,\n containerClassName,\n scrollableContentClassName,\n isOpen,\n isVisible,\n hasBeenOpened,\n modalRectangleTop,\n theme,\n topOffsetFixed,\n isModeless,\n layerClassName,\n isDefaultDragHandle,\n } = props;\n const { palette, effects, fonts } = theme;\n\n const classNames = getGlobalClassNames(globalClassNames, theme);\n\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n backgroundColor: 'transparent',\n position: isModeless ? 'absolute' : 'fixed',\n height: '100%',\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n opacity: 0,\n pointerEvents: 'none',\n transition: `opacity ${animationDuration}`,\n },\n topOffsetFixed &&\n typeof modalRectangleTop === 'number' &&\n hasBeenOpened && {\n alignItems: 'flex-start',\n },\n isOpen && classNames.isOpen,\n isVisible && {\n opacity: 1,\n pointerEvents: 'auto',\n },\n className,\n ],\n main: [\n classNames.main,\n {\n boxShadow: effects.elevation64,\n borderRadius: effects.roundedCorner2,\n backgroundColor: palette.white,\n boxSizing: 'border-box',\n position: 'relative',\n textAlign: 'left',\n outline: '3px solid transparent',\n maxHeight: 'calc(100% - 32px)',\n maxWidth: 'calc(100% - 32px)',\n minHeight: '176px',\n minWidth: '288px',\n overflowY: 'auto',\n zIndex: isModeless ? ZIndexes.Layer : undefined,\n },\n topOffsetFixed &&\n typeof modalRectangleTop === 'number' &&\n hasBeenOpened && {\n top: modalRectangleTop,\n },\n isDefaultDragHandle && {\n cursor: 'move',\n },\n containerClassName,\n ],\n scrollableContent: [\n classNames.scrollableContent,\n {\n overflowY: 'auto',\n flexGrow: 1,\n maxHeight: '100vh',\n selectors: {\n ['@supports (-webkit-overflow-scrolling: touch)']: {\n maxHeight: window.innerHeight,\n },\n },\n },\n scrollableContentClassName,\n ],\n layer: isModeless && [\n layerClassName,\n classNames.layer,\n {\n position: 'static',\n width: 'unset',\n height: 'unset',\n },\n ],\n keyboardMoveIconContainer: {\n position: 'absolute',\n display: 'flex',\n justifyContent: 'center',\n width: '100%',\n padding: '3px 0px',\n },\n keyboardMoveIcon: {\n // eslint-disable-next-line deprecation/deprecation\n fontSize: fonts.xLargePlus.fontSize,\n width: '24px',\n },\n };\n};\n"]} |