office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
126 lines • 4.26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../../Styling");
var GlobalClassNames = {
root: 'ms-Suggestions',
suggestionsContainer: 'ms-Suggestions-container',
title: 'ms-Suggestions-title',
forceResolveButton: 'ms-forceResolve-button',
searchForMoreButton: 'ms-SearchMore-button',
spinner: 'ms-Suggestions-spinner',
noSuggestions: 'ms-Suggestions-none',
suggestionsAvailable: 'ms-Suggestions-suggestionsAvailable',
isSelected: 'is-selected'
};
function getStyles(props) {
var className = props.className, suggestionsClassName = props.suggestionsClassName, theme = props.theme, forceResolveButtonSelected = props.forceResolveButtonSelected, searchForMoreButtonSelected = props.searchForMoreButtonSelected;
var palette = theme.palette, fonts = theme.fonts;
var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
var actionButtonStyles = {
background: 'none',
backgroundColor: 'transparent',
border: 0,
cursor: 'pointer',
margin: 0,
paddingLeft: 8,
position: 'relative',
borderTop: "1px solid " + palette.neutralLight,
height: 40,
textAlign: 'left',
width: '100%',
fontSize: fonts.small.fontSize,
selectors: {
':hover': {
backgroundColor: palette.neutralLight,
cursor: 'pointer'
},
':focus, :active': {
backgroundColor: palette.themeLight
},
'.ms-Button-icon': {
fontSize: fonts.mediumPlus.fontSize,
width: 25
},
'.ms-Button-label': {
margin: '0 4px 0 9px'
}
}
};
var actionButtonSelectedStyles = {
backgroundColor: palette.themeLight
};
return {
root: [
classNames.root,
{
minWidth: 260
},
className
],
suggestionsContainer: [
classNames.suggestionsContainer,
{
overflowY: 'auto',
overflowX: 'hidden',
maxHeight: 300
},
suggestionsClassName
],
title: [
classNames.title,
{
padding: '0 12px',
fontSize: fonts.small.fontSize,
color: palette.themePrimary,
lineHeight: 40,
borderBottom: "1px solid " + palette.neutralLight
}
],
forceResolveButton: [
classNames.forceResolveButton,
actionButtonStyles,
forceResolveButtonSelected && [classNames.isSelected, actionButtonSelectedStyles]
],
searchForMoreButton: [
classNames.searchForMoreButton,
actionButtonStyles,
searchForMoreButtonSelected && [classNames.isSelected, actionButtonSelectedStyles]
],
noSuggestions: [
classNames.noSuggestions,
{
textAlign: 'center',
color: palette.neutralSecondary,
fontSize: fonts.small.fontSize,
lineHeight: 30
}
],
suggestionsAvailable: [classNames.suggestionsAvailable, Styling_1.hiddenContentStyle],
subComponentStyles: {
spinner: {
root: [
classNames.spinner,
{
margin: '5px 0',
paddingLeft: 14,
textAlign: 'left',
whiteSpace: 'nowrap',
lineHeight: 20,
fontSize: fonts.small.fontSize
}
],
circle: {
display: 'inline-block',
verticalAlign: 'middle'
},
label: {
display: 'inline-block',
verticalAlign: 'middle',
margin: '0 10px 0 16px'
}
}
}
};
}
exports.getStyles = getStyles;
//# sourceMappingURL=Suggestions.styles.js.map