@fluentui/react-northstar
Version:
A themable React component library.
96 lines (95 loc) • 2.86 kB
JavaScript
import { pxToRem } from '../../../../utils';
export var labelStyles = {
root: function root(_ref) {
var p = _ref.props,
v = _ref.variables,
theme = _ref.theme;
var siteVariables = theme.siteVariables;
return Object.assign({
display: 'inline-flex',
alignItems: 'center',
overflow: 'hidden',
height: v.height,
lineHeight: v.height,
color: v.foreground,
backgroundColor: v.background,
fontSize: pxToRem(14),
borderRadius: siteVariables.borderRadiusMedium,
padding: v.padding
}, p.hasImage && (p.imagePosition === 'start' ? {
paddingLeft: v.startPaddingLeft
} : {
paddingRight: v.endPaddingRight
}), p.circular && {
borderRadius: v.circularRadius
}, p.color === 'black' && {
color: v.blackForeground,
backgroundColor: v.blackBackground
}, p.color === 'white' && {
color: v.whiteForeground,
backgroundColor: v.whiteBackground
}, p.color === 'brand' && {
color: v.brandForeground,
backgroundColor: v.brandBackground
}, p.color === 'grey' && {
color: v.greyForeground,
backgroundColor: v.greyBackground
}, p.color === 'orange' && {
color: v.orangeForeground,
backgroundColor: v.orangeBackground
}, p.color === 'red' && {
color: v.redForeground,
backgroundColor: v.redBackground
}, p.color === 'green' && {
color: v.greenForeground,
backgroundColor: v.greenBackground
}, p.color === 'yellow' && {
color: v.yellowForeground,
backgroundColor: v.yellowBackground
});
},
content: function content(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
var hasStartElement = p.hasImage && p.imagePosition === 'start' || p.hasIcon && p.iconPosition === 'start';
var hasEndElement = p.hasImage && p.imagePosition === 'end' || p.hasIcon && p.iconPosition === 'end';
return Object.assign({}, hasStartElement && {
marginLeft: pxToRem(3)
}, !hasStartElement && p.circular && {
marginLeft: pxToRem(4)
}, hasEndElement && {
marginRight: pxToRem(3)
}, !hasEndElement && p.circular && {
marginRight: pxToRem(4)
});
},
image: function image(_ref3) {
var v = _ref3.variables;
return {
height: v.height,
width: v.height
};
},
icon: function icon(_ref4) {
var p = _ref4.props,
v = _ref4.variables;
return Object.assign({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: v.iconSize,
height: v.iconSize,
'& > :first-child': {
height: '100%',
width: '100%',
'& svg': {
height: '100%',
width: '100%'
}
}
}, p.hasActionableIcon && {
cursor: 'pointer'
});
}
};
//# sourceMappingURL=labelStyles.js.map