@fluentui/react
Version:
Reusable React components for building web experiences.
141 lines • 5.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = getStyles;
var Styling_1 = require("../../../Styling");
var BaseButton_classNames_1 = require("../../Button/BaseButton.classNames");
var Utilities_1 = require("../../../Utilities");
var GlobalClassNames = {
root: 'ms-TagItem',
text: 'ms-TagItem-text',
close: 'ms-TagItem-close',
isSelected: 'is-selected',
};
var TAG_HEIGHT = 26;
function getStyles(props) {
var _a, _b, _c, _d, _e, _f;
var className = props.className, theme = props.theme, selected = props.selected, disabled = props.disabled;
var palette = theme.palette, effects = theme.effects, fonts = theme.fonts, semanticColors = theme.semanticColors;
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
return {
root: [
classNames.root,
fonts.medium,
(0, Styling_1.getFocusStyle)(theme),
{
boxSizing: 'content-box',
flexShrink: '1',
margin: 2,
height: TAG_HEIGHT,
lineHeight: TAG_HEIGHT,
cursor: 'default',
userSelect: 'none',
display: 'flex',
flexWrap: 'nowrap',
maxWidth: 300,
minWidth: 0, // needed to prevent long tags from overflowing container
borderRadius: effects.roundedCorner2,
color: semanticColors.inputText,
background: palette.neutralLighter,
selectors: (_a = {
':hover': [
!disabled &&
!selected && {
color: palette.neutralDark,
background: palette.neutralLight,
selectors: {
'.ms-TagItem-close': {
color: palette.neutralPrimary,
},
},
},
disabled && { background: palette.neutralLighter },
]
},
_a[Styling_1.HighContrastSelector] = {
border: "1px solid ".concat(!selected ? 'WindowText' : 'WindowFrame'),
},
_a),
},
disabled && {
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
borderColor: 'GrayText',
},
_b),
},
selected &&
!disabled && [
classNames.isSelected,
{
':focus-within': (_c = {
background: palette.themePrimary,
color: palette.white
},
_c[Styling_1.HighContrastSelector] = {
color: 'HighLightText',
background: 'Highlight',
},
_c),
},
],
className,
],
text: [
classNames.text,
{
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
minWidth: 30,
margin: '0 8px',
},
disabled && {
selectors: (_d = {},
_d[Styling_1.HighContrastSelector] = {
color: 'GrayText',
},
_d),
},
],
close: [
classNames.close,
(0, Styling_1.getFocusStyle)(theme, { borderColor: 'transparent', inset: 1, outlineColor: palette.white }),
{
color: palette.neutralSecondary,
width: 30,
height: '100%',
flex: '0 0 auto',
borderRadius: (0, Utilities_1.getRTL)(theme)
? "".concat(effects.roundedCorner2, " 0 0 ").concat(effects.roundedCorner2)
: "0 ".concat(effects.roundedCorner2, " ").concat(effects.roundedCorner2, " 0"),
selectors: (_e = {
':hover': {
background: palette.neutralQuaternaryAlt,
color: palette.neutralPrimary,
}
},
_e[".".concat(classNames.isSelected, " &:focus")] = {
color: palette.white,
background: palette.themePrimary,
},
_e[':focus:hover'] = {
color: palette.white,
background: palette.themeDark,
},
_e[':active'] = {
color: palette.white,
backgroundColor: palette.themeDark,
},
_e),
},
disabled && {
selectors: (_f = {},
_f[".".concat(BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon)] = {
color: palette.neutralSecondary,
},
_f),
},
],
};
}
//# sourceMappingURL=TagItem.styles.js.map