office-ui-fabric-react/lib-amd/components/Callout/CalloutContent.styles.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "../../Styling", "../../utilities/positioning"], function (require, exports, Styling_1, positioning_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
    var ANIMATIONS = (_a = {},
        _a[positioning_1.RectangleEdge.top] = Styling_1.AnimationStyles.slideUpIn20,
        _a[positioning_1.RectangleEdge.bottom] = Styling_1.AnimationStyles.slideDownIn20,
        _a[positioning_1.RectangleEdge.left] = Styling_1.AnimationStyles.slideLeftIn20,
        _a[positioning_1.RectangleEdge.right] = Styling_1.AnimationStyles.slideRightIn20,
        _a);
    function getBeakStyle(beakWidth, beakStyle) {
        var beakStyleWidth = beakWidth;
        // This is here to support the old way of setting the beak size until version 1.0.0.
        // beakStyle is now deprecated and will be be removed at version 1.0.0
        if (beakStyle === 'ms-Callout-smallbeak') {
            beakStyleWidth = 16;
        }
        return {
            height: beakStyleWidth,
            width: beakStyleWidth
        };
    }
    exports.getStyles = function (props) {
        var theme = props.theme, className = props.className, overflowYHidden = props.overflowYHidden, calloutWidth = props.calloutWidth, contentMaxHeight = props.contentMaxHeight, positions = props.positions, beakWidth = props.beakWidth, backgroundColor = props.backgroundColor, beakStyle = props.beakStyle;
        var palette = theme.palette;
        return {
            container: [
                'ms-Callout-container',
                {
                    position: 'relative',
                }
            ],
            root: [
                'ms-Callout',
                {
                    position: 'absolute',
                    boxSizing: 'border-box',
                    borderWidth: 1,
                    borderStyle: 'solid',
                    borderColor: palette.neutralLight,
                    boxShadow: '0 0 5px 0px rgba(0,0,0,0.4)',
                    selectors: (_a = {},
                        _a[Styling_1.HighContrastSelector] = {
                            borderWidth: 1,
                            borderStyle: 'solid',
                            borderColor: 'WindowText',
                        },
                        _a)
                },
                Styling_1.focusClear(),
                className,
                positions && positions.targetEdge && ANIMATIONS[positions.targetEdge],
                !!calloutWidth && { width: calloutWidth },
            ],
            beak: [
                'ms-Callout-beak',
                {
                    position: 'absolute',
                    backgroundColor: palette.white,
                    boxShadow: 'inherit',
                    border: 'inherit',
                    boxSizing: 'border-box',
                    transform: 'rotate(45deg)'
                },
                getBeakStyle(beakWidth, beakStyle),
                backgroundColor && {
                    backgroundColor: backgroundColor
                }
            ],
            beakCurtain: [
                'ms-Callout-beakCurtain',
                {
                    position: 'absolute',
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    backgroundColor: palette.white,
                }
            ],
            calloutMain: [
                'ms-Callout-main',
                {
                    backgroundColor: palette.white,
                    overflowX: 'hidden',
                    overflowY: 'auto',
                    position: 'relative',
                    maxHeight: contentMaxHeight
                },
                !!calloutWidth && { width: calloutWidth },
                overflowYHidden && {
                    overflowY: 'hidden'
                },
                backgroundColor && {
                    backgroundColor: backgroundColor
                }
            ],
        };
        var _a;
    };
    var _a;
});
//# sourceMappingURL=CalloutContent.styles.js.map