@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
110 lines • 4.65 kB
JavaScript
define(["require", "exports", "tslib", "@uifabric/styling"], function (require, exports, tslib_1, styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GlobalClassNames = {
root: 'ms-FloatingSuggestionsItem',
itemButton: 'ms-FloatingSuggestionsItem-itemButton',
closeButton: 'ms-FloatingSuggestionsItem-closeButton',
isSelected: 'ms-FloatingSuggestionsItem-isSelected',
displayText: 'ms-FloatingSuggestionsItem-displayText',
};
exports.getStyles = function (props) {
var _a, _b, _c, _d, _e;
var theme = styling_1.getTheme();
if (!theme) {
throw new Error('theme is undefined or null in FloatingSuggestionsItem getStyles function.');
}
var isSelected = props.isSelected;
var palette = theme.palette, fonts = theme.fonts;
var classNames = styling_1.getGlobalClassNames(GlobalClassNames, theme);
return {
root: [
classNames.root,
{
display: 'flex',
alignItems: 'stretch',
boxSizing: 'border-box',
width: '100%',
position: 'relative',
overflow: 'hidden',
selectors: {
'&:hover': {
background: palette.neutralLighter,
},
'&:hover .ms-FloatingSuggestionsItem-closeButton': {
display: 'block',
},
'&:active, &:focus': {
background: palette.themeLight,
},
},
},
],
itemButton: [
classNames.itemButton,
{
width: '100%',
padding: '0px',
minWidth: '0',
height: '100%',
selectors: (_a = {},
_a[styling_1.HighContrastSelector] = {
color: 'WindowText',
},
_a),
},
isSelected && [
classNames.isSelected,
{
background: palette.themeLighter,
selectors: (_b = {
':hover': (_c = {
background: palette.themeLight
},
_c[styling_1.HighContrastSelector] = tslib_1.__assign({ background: 'Highlight', color: 'HighlightText' }, styling_1.getHighContrastNoAdjustStyle()),
_c)
},
_b[styling_1.HighContrastSelector] = tslib_1.__assign({ background: 'Highlight', color: 'HighlightText' }, styling_1.getHighContrastNoAdjustStyle()),
_b),
},
],
],
closeButton: [
classNames.closeButton,
{
display: 'none',
padding: '0 4px',
height: 'auto',
width: 32,
selectors: {
':hover': (_d = {},
_d[styling_1.HighContrastSelector] = tslib_1.__assign({ background: 'Window', color: 'WindowText' }, styling_1.getHighContrastNoAdjustStyle()),
_d),
},
},
isSelected && [
classNames.isSelected,
{
background: palette.themeLighter,
selectors: (_e = {
':hover': {
background: palette.themeLight,
}
},
_e[styling_1.HighContrastSelector] = tslib_1.__assign({ background: 'Highlight', color: 'HighlightText' }, styling_1.getHighContrastNoAdjustStyle()),
_e),
},
],
],
displayText: [
classNames.displayText,
{
padding: '0 12px',
fontSize: fonts.medium.fontSize,
lineHeight: '40px',
},
],
};
};
});
//# sourceMappingURL=FloatingSuggestionsItem.styles.js.map