@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
116 lines • 4.27 kB
JavaScript
"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