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

Reusable React components for building experiences for Office 365.

import { HighContrastSelector, ZIndexes, getGlobalClassNames } from '../../Styling';
var GlobalClassNames = {
    root: 'ms-ScrollablePane',
    contentContainer: 'ms-ScrollablePane--contentContainer'
};
export var getStyles = function (props) {
    var className = props.className, theme = props.theme;
    var classNames = getGlobalClassNames(GlobalClassNames, theme);
    var AboveAndBelowStyles = {
        position: 'absolute',
        pointerEvents: 'auto',
        zIndex: ZIndexes.ScrollablePane
    };
    var positioningStyle = {
        zIndex: ZIndexes.ScrollablePane,
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        WebkitOverflowScrolling: 'touch'
    };
    return {
        root: [classNames.root, positioningStyle, className],
        contentContainer: [
            classNames.contentContainer,
            {
                overflowY: props.scrollbarVisibility === 'always' ? 'scroll' : 'auto'
            },
            positioningStyle
        ],
        stickyAbove: [
            {
                top: 0,
                selectors: (_a = {},
                    _a[HighContrastSelector] = {
                        borderBottom: '1px solid WindowText'
                    },
                    _a)
            },
            AboveAndBelowStyles
        ],
        stickyBelow: [
            {
                bottom: 0,
                selectors: (_b = {},
                    _b[HighContrastSelector] = {
                        borderTop: '1px solid WindowText'
                    },
                    _b)
            },
            AboveAndBelowStyles
        ],
        stickyBelowItems: [
            {
                bottom: 0
            },
            AboveAndBelowStyles,
            {
                width: '100%'
            }
        ]
    };
    var _a, _b;
};
//# sourceMappingURL=ScrollablePane.styles.js.map