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

Experimental React components for building experiences for Office 365.

"use strict";
/*!
 * Copyright (C) Microsoft Corporation. All rights reserved.
 */
Object.defineProperty(exports, "__esModule", { value: true });
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var Sidebar_types_1 = require("./Sidebar.types");
exports.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'
};
var SidebarColors;
(function (SidebarColors) {
    SidebarColors[SidebarColors["Dark"] = 0] = "Dark";
    SidebarColors[SidebarColors["Light"] = 1] = "Light";
})(SidebarColors = exports.SidebarColors || (exports.SidebarColors = {}));
var SidebarDarkColors = {
    background: '#212121',
    backgroundHovered: '#333',
    backgroundActive: '#3c3c3c',
    buttonColor: '#f4f4f4'
};
var SidebarLightColors = {
    background: '#f4f4f4',
    backgroundHovered: '#c8c8c8',
    backgroundActive: '#eaeaea',
    buttonColor: '#212121'
};
exports.getSidebarStyles = office_ui_fabric_react_1.memoizeFunction(function (theme, sidebarColors, customStyles) {
    var currentSidebarColors = sidebarColors === SidebarColors.Dark ? SidebarDarkColors : SidebarLightColors;
    var sidebarStyles = {
        root: {
            height: '100%',
            backgroundColor: currentSidebarColors.background,
            width: Sidebar_types_1.SidebarStylingConstants.sidebarWidth,
            position: 'relative'
        },
        rootCollapsed: {
            width: Sidebar_types_1.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 office_ui_fabric_react_1.concatStyleSets(sidebarStyles, customStyles);
});
exports.getButtonColoredStyles = office_ui_fabric_react_1.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 office_ui_fabric_react_1.concatStyleSets(buttonStyles, customStyles);
});
//# sourceMappingURL=Sidebar.styles.js.map