@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
85 lines • 2.95 kB
JavaScript
/*!
* Copyright (C) Microsoft Corporation. All rights reserved.
*/
import { concatStyleSets } from 'office-ui-fabric-react/lib/Styling';
import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';
import { sidebarFonts } from './Sidebar.styles';
import { SidebarStylingConstants } from './Sidebar.types';
export var getSidebarButtonStyles = memoizeFunction(function (theme, sidebarButtonStyles, customStyles) {
var buttonStyles = {
root: {
width: '100%',
minWidth: SidebarStylingConstants.sidebarCollapsedWidth,
padding: '0',
minHeight: '48px',
height: 'auto',
lineHeight: '20px',
paddingLeft: '4px',
border: '0',
},
rootChecked: {
borderLeft: "4px solid " + theme.palette.themePrimary,
paddingLeft: '0',
},
rootCheckedHovered: {
borderLeft: "4px solid " + theme.palette.themePrimary,
paddingLeft: '0',
},
rootCheckedPressed: {
borderLeft: "4px solid " + theme.palette.themePrimary,
paddingLeft: '0',
},
flexContainer: {
justifyContent: 'flex-start',
minHeight: '48px',
height: 'auto',
},
icon: {
marginLeft: '12px',
marginRight: '16px',
fontSize: SidebarStylingConstants.sidebarIconSize,
height: SidebarStylingConstants.sidebarIconSize,
width: SidebarStylingConstants.sidebarIconSize,
},
labelChecked: {
fontWeight: 'bold',
fontFamily: sidebarFonts.segoeUiSemibold,
},
labelDisabled: {
fontFamily: sidebarFonts.segoeUiSemilight,
},
label: {
verticalAlign: 'middle',
textAlign: 'left',
fontSize: '14px',
whiteSpace: 'normal',
display: 'inline-block',
fontFamily: sidebarFonts.segoeUiSemilight,
float: 'left',
lineHeight: '20px',
paddingRight: '8px',
fontWeight: 'normal',
},
menuIcon: {
marginLeft: '16px',
marginRight: '16px',
fontSize: SidebarStylingConstants.sidebarIconSize,
height: SidebarStylingConstants.sidebarIconSize,
width: SidebarStylingConstants.sidebarIconSize,
},
};
return concatStyleSets(buttonStyles, sidebarButtonStyles, customStyles);
});
export var getSidebarChildrenStyles = memoizeFunction(function (theme, customStyles) {
var sidebarChildrenStyles = {
flexContainer: {
paddingLeft: '44px',
},
icon: {
padding: '0',
marginLeft: '0',
},
};
return concatStyleSets(getSidebarButtonStyles(theme), sidebarChildrenStyles, customStyles);
});
//# sourceMappingURL=SidebarButton.styles.js.map