office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
113 lines • 4.48 kB
JavaScript
define(["require", "exports", "../../../Styling"], function (require, exports, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SuggestionsItemGlobalClassNames = {
root: 'ms-Suggestions-item',
itemButton: 'ms-Suggestions-itemButton',
closeButton: 'ms-Suggestions-closeButton',
isSuggested: 'is-suggested'
};
function getStyles(props) {
var _a, _b, _c;
var className = props.className, theme = props.theme, suggested = props.suggested;
var palette = theme.palette;
var classNames = Styling_1.getGlobalClassNames(exports.SuggestionsItemGlobalClassNames, theme);
return {
root: [
classNames.root,
{
display: 'flex',
alignItems: 'stretch',
boxSizing: 'border-box',
width: '100%',
position: 'relative',
selectors: {
'&:hover': {
background: palette.neutralLighter
},
'&:hover .ms-Suggestions-closeButton': {
display: 'block'
}
}
},
className
],
itemButton: [
classNames.itemButton,
{
width: '100%',
padding: 0,
border: 'none',
height: '100%',
// Force the item button to be collapsible so it can always shrink
// to accommodate the close button as a peer in its flex container.
minWidth: 0,
// Require for IE11 to truncate the component.
overflow: 'hidden',
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
color: 'WindowText',
selectors: {
':hover': {
background: 'Highlight',
color: 'HighlightText',
MsHighContrastAdjust: 'none'
}
}
},
_a[':hover'] = {
color: palette.neutralDark
},
_a)
},
suggested && [
classNames.isSuggested,
{
background: palette.neutralLight,
selectors: (_b = {
':hover': {
background: palette.neutralTertiaryAlt
}
},
_b[Styling_1.HighContrastSelector] = {
background: 'Highlight',
color: 'HighlightText',
MsHighContrastAdjust: 'none'
},
_b)
}
]
],
closeButton: [
classNames.closeButton,
{
display: 'none',
color: palette.neutralSecondary,
padding: '0 4px',
height: 'auto',
width: 32,
selectors: (_c = {
':hover, :active': {
background: palette.neutralTertiaryAlt,
color: palette.neutralDark
}
},
_c[Styling_1.HighContrastSelector] = {
color: 'WindowText'
},
_c)
},
suggested && {
selectors: {
':hover, :active': {
background: palette.neutralTertiary,
color: palette.neutralPrimary
}
}
}
]
};
}
exports.getStyles = getStyles;
});
//# sourceMappingURL=SuggestionsItem.styles.js.map