@fluentui/react/lib-commonjs/components/Stack/StackItem/StackItem.styles.js

Reusable React components for building web experiences.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StackItemStyles = exports.GlobalClassNames = void 0;
var Styling_1 = require("../../../Styling");
exports.GlobalClassNames = {
    root: 'ms-StackItem',
};
var alignMap = {
    start: 'flex-start',
    end: 'flex-end',
};
var StackItemStyles = function (props, theme, tokens) {
    var grow = props.grow, shrink = props.shrink, disableShrink = props.disableShrink, align = props.align, verticalFill = props.verticalFill, order = props.order, className = props.className, _a = props.basis, basis = _a === void 0 ? 'auto' : _a;
    var classNames = (0, Styling_1.getGlobalClassNames)(exports.GlobalClassNames, theme);
    return {
        root: [
            theme.fonts.medium,
            classNames.root,
            {
                flexBasis: basis,
                margin: tokens.margin,
                padding: tokens.padding,
                height: verticalFill ? '100%' : 'auto',
                width: 'auto',
            },
            grow && {
                flexGrow: grow === true ? 1 : grow,
            },
            (disableShrink || (!grow && !shrink)) && {
                flexShrink: 0,
            },
            shrink &&
                !disableShrink && {
                flexShrink: 1,
            },
            align && {
                alignSelf: alignMap[align] || align,
            },
            order && {
                order: order,
            },
            className,
        ],
        // TODO: this cast may be hiding some potential issues with styling and name
        //        lookups and should be removed
    };
};
exports.StackItemStyles = StackItemStyles;
//# sourceMappingURL=StackItem.styles.js.map