@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
100 lines • 3.66 kB
JavaScript
import { __assign } from "tslib";
import { getGlobalClassNames, HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling';
export var SuggestionsItemGlobalClassNames = {
root: 'ms-Suggestions-item',
itemButton: 'ms-Suggestions-itemButton',
closeButton: 'ms-Suggestions-closeButton',
isSuggested: 'is-suggested',
};
export function getStyles(props) {
var _a, _b, _c;
var className = props.className, theme = props.theme, suggested = props.suggested;
var palette = theme.palette;
var classNames = getGlobalClassNames(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,
selectors: (_a = {},
_a[HighContrastSelector] = {
color: 'WindowText',
selectors: {
':hover': __assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),
},
},
_a[':hover'] = {
color: palette.neutralDark,
},
_a),
},
suggested && [
classNames.isSuggested,
{
background: palette.neutralLight,
selectors: (_b = {
':hover': {
background: palette.neutralTertiaryAlt,
}
},
_b[HighContrastSelector] = __assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),
_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[HighContrastSelector] = {
color: 'WindowText',
},
_c),
},
suggested && {
selectors: {
':hover, :active': {
background: palette.neutralTertiary,
color: palette.neutralPrimary,
},
},
},
],
};
}
//# sourceMappingURL=SuggestionsItem.styles.js.map