@fluentui/react-northstar
Version:
A themable React component library.
55 lines (54 loc) • 1.69 kB
JavaScript
import { svgIconClassName } from '@fluentui/react-icons-northstar';
export var pillIconStyles = {
root: function root(_ref) {
var _Object$assign;
var p = _ref.props,
v = _ref.variables;
return Object.assign({
border: 'none',
background: 'transparent',
margin: v.iconMargin,
width: v.iconWidth,
cursor: 'pointer',
outline: 'none'
}, (p.size === 'small' || p.size === 'smaller') && {
width: v.smallOrSmallerIconWidth
}, p.selectable && p.hasImage && Object.assign({
width: v.selectedImageIconWidth,
height: v.selectedImageIconWidth,
marginLeft: 0,
color: v.selectedIconColor
}, p.size === 'small' && {
width: v.smallSelectedImageIconWidth,
height: v.smallSelectedImageIconWidth
}, p.size === 'smaller' && {
width: v.smallerSelectedImageIconWidth,
height: v.smallerSelectedImageIconWidth
}), (_Object$assign = {}, _Object$assign["& ." + svgIconClassName] = Object.assign({
height: '100%',
width: '100%'
}, p.selectable && p.hasImage && {
position: 'relative',
// TODO: Remove this workaround once we have proper icon from designer
'::after': {
content: '""',
position: 'absolute',
background: v.selectedIconCheckColor,
left: '10%',
top: '10%',
borderRadius: '50%',
width: '80%',
height: '80%'
}
}, {
'& svg': Object.assign({}, p.selectable && p.hasImage && {
position: 'absolute'
}, {
zIndex: 100,
height: '100%',
width: '100%'
})
}), _Object$assign));
}
};
//# sourceMappingURL=pillIconStyles.js.map