UNPKG

@fluentui/react-northstar

Version:
106 lines (104 loc) 3.37 kB
"use strict"; 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