@fluentui/react/lib-amd/components/Callout/CalloutContent.styles.js

Reusable React components for building web experiences.

define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.getStyles = void 0;
    function getBeakStyle(beakWidth) {
        return {
            height: beakWidth,
            width: beakWidth,
        };
    }
    var GlobalClassNames = {
        container: 'ms-Callout-container',
        root: 'ms-Callout',
        beak: 'ms-Callout-beak',
        beakCurtain: 'ms-Callout-beakCurtain',
        calloutMain: 'ms-Callout-main',
    };
    var getStyles = function (props) {
        var _a;
        var theme = props.theme, className = props.className, overflowYHidden = props.overflowYHidden, calloutWidth = props.calloutWidth, beakWidth = props.beakWidth, backgroundColor = props.backgroundColor, calloutMaxWidth = props.calloutMaxWidth, calloutMinWidth = props.calloutMinWidth, doNotLayer = props.doNotLayer;
        var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
        var semanticColors = theme.semanticColors, effects = theme.effects;
        return {
            container: [
                classNames.container,
                {
                    position: 'relative',
                },
            ],
            root: [
                classNames.root,
                theme.fonts.medium,
                {
                    position: 'absolute',
                    display: 'flex',
                    zIndex: doNotLayer ? Styling_1.ZIndexes.Layer : undefined,
                    boxSizing: 'border-box',
                    borderRadius: effects.roundedCorner2,
                    boxShadow: effects.elevation16,
                    selectors: (_a = {},
                        _a[Styling_1.HighContrastSelector] = {
                            borderWidth: 1,
                            borderStyle: 'solid',
                            borderColor: 'WindowText',
                        },
                        _a),
                },
                (0, Styling_1.focusClear)(),
                className,
                !!calloutWidth && { width: calloutWidth },
                !!calloutMaxWidth && { maxWidth: calloutMaxWidth },
                !!calloutMinWidth && { minWidth: calloutMinWidth },
            ],
            beak: [
                classNames.beak,
                {
                    position: 'absolute',
                    backgroundColor: semanticColors.menuBackground,
                    boxShadow: 'inherit',
                    border: 'inherit',
                    boxSizing: 'border-box',
                    transform: 'rotate(45deg)',
                },
                getBeakStyle(beakWidth),
                backgroundColor && {
                    backgroundColor: backgroundColor,
                },
            ],
            beakCurtain: [
                classNames.beakCurtain,
                {
                    position: 'absolute',
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    backgroundColor: semanticColors.menuBackground,
                    borderRadius: effects.roundedCorner2,
                },
            ],
            calloutMain: [
                classNames.calloutMain,
                {
                    backgroundColor: semanticColors.menuBackground,
                    overflowX: 'hidden',
                    overflowY: 'auto',
                    position: 'relative',
                    width: '100%',
                    borderRadius: effects.roundedCorner2,
                },
                overflowYHidden && {
                    overflowY: 'hidden',
                },
                backgroundColor && {
                    backgroundColor: backgroundColor,
                },
            ],
        };
    };
    exports.getStyles = getStyles;
});
//# sourceMappingURL=CalloutContent.styles.js.map