@fluentui/react-northstar
Version:
A themable React component library.
106 lines (104 loc) • 3.37 kB
JavaScript
exports.__esModule = true;
exports.dropdownSelectedItemStyles = void 0;
var _DropdownSelectedItem = require("../../../../components/Dropdown/DropdownSelectedItem");
var _getIconFillOrOutlineStyles = require("../../getIconFillOrOutlineStyles");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var _utils = require("../../../../utils");
var dropdownSelectedItemStyles = {
root: function root(_ref) {
var _hover;
var p = _ref.props,
v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
var borderFocusStyles = (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: siteVariables
});
return Object.assign({
maxWidth: v.selectedItemsMaxWidth,
display: 'inline-flex',
alignItems: 'center',
padding: "0 " + (0, _utils.pxToRem)(8),
startPaddingLeft: '0px',
lineHeight: (0, _utils.pxToRem)(20),
borderRadius: (0, _utils.pxToRem)(9999),
fontSize: (0, _utils.pxToRem)(14)
}, p.hasImage && {
paddingLeft: '0px'
}, {
cursor: 'pointer',
margin: '.25rem 0 0 .4rem',
color: v.selectedItemColor,
position: 'relative',
border: v.selectedItemBorder,
height: (0, _utils.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["& ." + _DropdownSelectedItem.dropdownSelectedItemSlotClassNames.icon] = {
color: v.selectedItemIconColorHover
}, _hover),
':focus-visible': {
':after': borderFocusStyles[':focus-visible'][':after']
}
});
},
image: function image() {
return {
height: (0, _utils.pxToRem)(20),
width: (0, _utils.pxToRem)(20)
};
},
header: function header(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
return Object.assign({}, p.hasImage && {
marginLeft: (0, _utils.pxToRem)(3)
}, {
marginRight: (0, _utils.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: (0, _utils.pxToRem)(16),
minWidth: (0, _utils.pxToRem)(16),
height: (0, _utils.pxToRem)(16),
'& > :first-child': {
width: (0, _utils.pxToRem)(16),
height: (0, _utils.pxToRem)(16),
'& svg': {
width: (0, _utils.pxToRem)(16),
height: (0, _utils.pxToRem)(16)
}
},
cursor: 'pointer',
color: v.selectedItemIconColor
}, (0, _getIconFillOrOutlineStyles.getIconFillOrOutlineStyles)({
outline: true
}), {
':hover': Object.assign({
color: v.selectedItemIconColorHover
}, (0, _getIconFillOrOutlineStyles.getIconFillOrOutlineStyles)({
outline: false
}))
});
}
};
exports.dropdownSelectedItemStyles = dropdownSelectedItemStyles;
//# sourceMappingURL=dropdownSelectedItemStyles.js.map
;