@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
114 lines • 4.15 kB
JavaScript
/*!
* 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