@kwiz/fluentui/dist/styles/styles.js

KWIZ common controls for FluentUI

import { buttonClassNames, makeStyles, mergeClasses, tokens } from "@fluentui/react-components";
import { filterEmptyEntries, isString } from "@kwiz/common";
export const KnownClassNames = {
    print: 'print-root',
    printHide: 'print-hide',
    printShow: 'print-show',
    section: 'kfui-section',
    vertical: 'kfui-vertical',
    horizontal: 'kfui-horizontal',
    list: 'kfui-list',
    accordion: 'kfui-accordion',
    accordionHeader: 'kfui-accordion-header',
    accordionBody: 'kfui-accordion-body',
    accordionBodyWrapper: 'kfui-accordion-body-wrapper',
    isOpen: 'is-opened',
    progressBarStepLabel: 'kfui-step-label',
    left: 'float-left',
    right: 'float-right',
    cardList: 'kfui-card-list',
    tagSelected: 'kfui-tag-selected',
    tagUnselected: 'kfui-tag-unselected',
    tagNoSelection: 'kfui-tag-no-selection',
    /** put this on any content that might have a scroll */
    overflowContent: 'kfui-overflow-content',
};
export var mixins;
(function (mixins) {
    mixins.main = {
        flexShrink: 1,
        flexGrow: 1
    };
    mixins.clickable = {
        cursor: "pointer",
        ['& label']: {
            cursor: "pointer"
        }
    };
    mixins.box = {
        padding: tokens.spacingHorizontalM,
        borderRadius: tokens.borderRadiusMedium,
        boxShadow: tokens.shadow4,
        margin: tokens.spacingHorizontalXXS
    };
    mixins.float = Object.assign(Object.assign({}, mixins.box), { 
        /** make buttons work */
        position: "relative", 
        /** make buttons work */
        maxWidth: "33%", 
        /** stop bleeding into page */
        overflowX: "hidden", ['& img']: {
            maxWidth: "100%"
        } });
    mixins.flex = {
        display: 'flex',
        flexWrap: 'nowrap',
        rowGap: tokens.spacingVerticalM,
        columnGap: tokens.spacingVerticalM,
    };
    mixins.wrap = {
        flexWrap: "wrap",
        //for some reason priority here is not right
        [`&.${KnownClassNames.horizontal},&.${KnownClassNames.vertical}`]: {
            flexWrap: "wrap"
        }
    };
    mixins.nogap = {
        rowGap: 0,
        columnGap: 0
    };
    mixins.ellipsis = {
        whiteSpace: 'nowrap',
        display: 'block',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    };
    mixins.multiLineEllipsis2 = {
        display: '-webkit-box',
        WebkitBoxOrient: 'vertical',
        WebkitLineClamp: '2',
        overflow: "hidden"
    };
    mixins.multiLineEllipsis3 = {
        display: '-webkit-box',
        WebkitBoxOrient: 'vertical',
        WebkitLineClamp: '3',
        overflow: "hidden"
    };
    mixins.full = {
        top: 0, bottom: 0, left: 0, right: 0,
        zIndex: 1,
        backgroundColor: tokens.colorNeutralBackground1,
        overflow: "auto",
        padding: tokens.spacingHorizontalL,
        paddingLeft: "20px",
        paddingRight: "20px"
    };
})(mixins || (mixins = {}));
export const useCommonStyles = makeStyles({
    hintLabel: {
        color: tokens.colorNeutralForeground3,
        fontSize: tokens.fontSizeBase200,
        fontWeight: tokens.fontWeightRegular,
        lineHeight: tokens.lineHeightBase200
    },
    validationLabel: {
        color: tokens.colorPaletteRedForeground1,
        fontSize: tokens.fontSizeBase200,
        fontWeight: tokens.fontWeightRegular,
        lineHeight: tokens.lineHeightBase200
    },
    /** position fixed - full size of the window */
    fullscreen: Object.assign({ position: "fixed" }, mixins.full),
    /** position absolute - full size of the relative container */
    fullsize: Object.assign({ position: "absolute" }, mixins.full),
    header: {
        boxShadow: tokens.shadow4Brand,
        backgroundColor: tokens.colorBrandBackground,
        color: tokens.colorBrandBackgroundInverted,
        padding: `${tokens.spacingVerticalXL} ${tokens.spacingHorizontalXL}`,
        [`& .${KnownClassNames.tagSelected} button`]: {
            backgroundColor: tokens.colorBrandBackgroundSelected
        },
        [`& .${KnownClassNames.tagNoSelection} button`]: {
            backgroundColor: tokens.colorBrandBackgroundInvertedSelected,
            color: tokens.colorNeutralForeground1
        },
        [`& button, & button:hover, & a, & a:hover, & button:hover .${buttonClassNames.icon}`]: {
            color: tokens.colorBrandBackgroundInverted
        },
        '& button:hover': {
            backgroundColor: tokens.colorBrandBackgroundHover
        },
    }
});
export const commonSizes = {
    /** 360 */
    widthMedium: 360,
    /** 520 */
    widthWide: 520,
    /** 820 */
    extraWidthWide: 820,
};
/** calls mergeClasses handle string or string[], clean up null/undefined - later items maintain higher priority */
export function mergeClassesEX(...css) {
    const combined = filterEmptyEntries(css || []).map(i => isString(i) ? [i] : i).flat();
    return mergeClasses(...combined);
}
//# sourceMappingURL=styles.js.map