@uifabric/experiments/lib/components/Sidebar/Sidebar.styles.js

Experimental React components for building experiences for Microsoft 365.

/*!
 * Copyright (C) Microsoft Corporation. All rights reserved.
 */
import { memoizeFunction, concatStyleSets } from 'office-ui-fabric-react';
import { SidebarStylingConstants } from './Sidebar.types';
export var sidebarFonts = {
    segoeUiSemibold: 'wf_segoe-ui_semibold, "Segoe UI Semibold", "Segoe WP Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
    segoeUiSemilight: 'wf_segoe-ui_semilight, "Segoe UI Light", "Segoe WP Light", "Segoe UI", "Segoe WP",Tahoma, Arial, sans-serif',
};
export var SidebarColors;
(function (SidebarColors) {
    SidebarColors[SidebarColors["Dark"] = 0] = "Dark";
    SidebarColors[SidebarColors["Light"] = 1] = "Light";
})(SidebarColors || (SidebarColors = {}));
var SidebarDarkColors = {
    background: '#212121',
    backgroundHovered: '#333',
    backgroundActive: '#3c3c3c',
    buttonColor: '#f4f4f4',
};
var SidebarLightColors = {
    background: '#f4f4f4',
    backgroundHovered: '#c8c8c8',
    backgroundActive: '#eaeaea',
    buttonColor: '#212121',
};
export var getSidebarStyles = memoizeFunction(function (theme, sidebarColors, customStyles) {
    var currentSidebarColors = sidebarColors === SidebarColors.Dark ? SidebarDarkColors : SidebarLightColors;
    var sidebarStyles = {
        root: {
            height: '100%',
            backgroundColor: currentSidebarColors.background,
            width: SidebarStylingConstants.sidebarWidth,
            position: 'relative',
        },
        rootCollapsed: {
            width: SidebarStylingConstants.sidebarCollapsedWidth,
            backgroundColor: currentSidebarColors.background,
            height: '100%',
            position: 'relative',
        },
        content: {
            height: 'auto',
            width: '100%',
            backgroundColor: currentSidebarColors.background,
            overflowX: 'hidden',
        },
        contentCollapsed: {
            backgroundColor: currentSidebarColors.background,
            overflow: 'hidden',
        },
        footer: {
            bottom: '0',
            position: 'absolute',
            width: '100%',
            zIndex: 100,
        },
    };
    return concatStyleSets(sidebarStyles, customStyles);
});
export var getButtonColoredStyles = memoizeFunction(function (theme, sidebarColors, customStyles) {
    var currentSidebarColors = sidebarColors === SidebarColors.Dark ? SidebarDarkColors : SidebarLightColors;
    var buttonStyles = {
        root: {
            backgroundColor: currentSidebarColors.background,
        },
        rootExpanded: {
            backgroundColor: currentSidebarColors.backgroundHovered,
        },
        rootDisabled: {
            backgroundColor: currentSidebarColors.background,
        },
        rootHovered: {
            backgroundColor: currentSidebarColors.backgroundHovered,
        },
        rootPressed: {
            backgroundColor: currentSidebarColors.backgroundHovered,
        },
        rootChecked: {
            backgroundColor: currentSidebarColors.backgroundActive,
        },
        rootCheckedHovered: {
            backgroundColor: currentSidebarColors.backgroundActive,
        },
        rootCheckedPressed: {
            backgroundColor: currentSidebarColors.backgroundActive,
        },
        icon: {
            fill: currentSidebarColors.buttonColor,
            color: currentSidebarColors.buttonColor,
        },
        iconDisabled: {
            color: currentSidebarColors.buttonColor,
        },
        iconExpanded: {
            color: currentSidebarColors.buttonColor,
            fill: currentSidebarColors.buttonColor,
        },
        labelDisabled: {
            color: currentSidebarColors.buttonColor,
        },
        label: {
            color: currentSidebarColors.buttonColor,
        },
        menuIcon: {
            color: currentSidebarColors.buttonColor,
        },
        menuIconDisabled: {
            color: currentSidebarColors.buttonColor,
        },
    };
    return concatStyleSets(buttonStyles, customStyles);
});
//# sourceMappingURL=Sidebar.styles.js.map