@fluentui/react-northstar
Version:
A themable React component library.
101 lines (100 loc) • 2.93 kB
JavaScript
import { dropdownSelectedItemSlotClassNames } from '../../../../components/Dropdown/DropdownSelectedItem';
import { getIconFillOrOutlineStyles } from '../../getIconFillOrOutlineStyles';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { pxToRem } from '../../../../utils';
export var dropdownSelectedItemStyles = {
root: function root(_ref) {
var _hover;
var p = _ref.props,
v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
var borderFocusStyles = getBorderFocusStyles({
variables: siteVariables
});
return Object.assign({
maxWidth: v.selectedItemsMaxWidth,
display: 'inline-flex',
alignItems: 'center',
padding: "0 " + pxToRem(8),
startPaddingLeft: '0px',
lineHeight: pxToRem(20),
borderRadius: pxToRem(9999),
fontSize: pxToRem(14)
}, p.hasImage && {
paddingLeft: '0px'
}, {
cursor: 'pointer',
margin: '.25rem 0 0 .4rem',
color: v.selectedItemColor,
position: 'relative',
border: v.selectedItemBorder,
height: pxToRem(24),
overflow: 'visible',
outline: 0,
fontWeight: siteVariables.fontWeightSemibold
}, v.selectedItemBackgroundColor && {
backgroundColor: v.selectedItemBackgroundColor
}, {
':focus': {
color: v.selectedItemColorFocus
},
':hover': (_hover = {
color: v.selectedItemColorHover,
backgroundColor: v.selectedItemBackgroundColorHover
}, _hover["& ." + dropdownSelectedItemSlotClassNames.icon] = {
color: v.selectedItemIconColorHover
}, _hover),
':focus-visible': {
':after': borderFocusStyles[':focus-visible'][':after']
}
});
},
image: function image() {
return {
height: pxToRem(20),
width: pxToRem(20)
};
},
header: function header(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
return Object.assign({}, p.hasImage && {
marginLeft: pxToRem(3)
}, {
marginRight: pxToRem(3),
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
});
},
icon: function icon(_ref3) {
var v = _ref3.variables;
return Object.assign({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: pxToRem(16),
minWidth: pxToRem(16),
height: pxToRem(16),
'& > :first-child': {
width: pxToRem(16),
height: pxToRem(16),
'& svg': {
width: pxToRem(16),
height: pxToRem(16)
}
},
cursor: 'pointer',
color: v.selectedItemIconColor
}, getIconFillOrOutlineStyles({
outline: true
}), {
':hover': Object.assign({
color: v.selectedItemIconColorHover
}, getIconFillOrOutlineStyles({
outline: false
}))
});
}
};
//# sourceMappingURL=dropdownSelectedItemStyles.js.map