@fluentui/react-northstar
Version:
A themable React component library.
119 lines (117 loc) • 3.34 kB
JavaScript
;
exports.__esModule = true;
exports.svgIconStyles = void 0;
var _styles = require("@fluentui/styles");
var _utils = require("../../../../utils");
var getPaddedStyle = function getPaddedStyle() {
return {
padding: (0, _utils.pxToRem)(4)
};
};
var getBorderedStyles = function getBorderedStyles(boxShadowColor) {
return Object.assign({}, getPaddedStyle(), {
boxShadow: "0 0 0 .05rem " + boxShadowColor + " inset"
});
};
var getIconSize = function getIconSize(size, v) {
var modifiedSizes = {
large: {
x: 24,
xx: 28
}
};
return v.sizeModifier && modifiedSizes[size] && modifiedSizes[size][v.sizeModifier] ? (0, _utils.pxToRem)(modifiedSizes[size][v.sizeModifier]) : v[size + "Size"];
};
var getXSpacingStyles = function getXSpacingStyles(xSpacing, horizontalSpace) {
switch (xSpacing) {
case 'none':
return {
marginLeft: 0,
marginRight: 0
};
case 'before':
return {
marginLeft: horizontalSpace,
marginRight: 0
};
case 'after':
return {
marginLeft: 0,
marginRight: horizontalSpace
};
case 'both':
return {
marginLeft: horizontalSpace,
marginRight: horizontalSpace
};
}
};
var svgIconStyles = {
root: function root(_ref) {
var p = _ref.props,
v = _ref.variables;
return Object.assign({
speak: 'none',
verticalAlign: 'middle'
}, getXSpacingStyles(p.xSpacing, v.horizontalSpace), p.circular && Object.assign({}, getPaddedStyle(), {
borderRadius: '50%'
}), p.disabled && {
color: v.disabledColor
}, {
display: 'inline-block'
}, (p.bordered || v.borderColor) && getBorderedStyles(v.borderColor || v.color || 'currentColor'), {
backgroundColor: v.backgroundColor
});
},
outlinePart: function outlinePart(_ref2) {
var p = _ref2.props;
return Object.assign({
display: 'none'
}, p.outline && {
display: 'block'
});
},
filledPart: function filledPart(_ref3) {
var p = _ref3.props;
return Object.assign({}, p.outline && {
display: 'none'
});
},
svg: function svg(_ref4) {
var _ref4$props = _ref4.props,
size = _ref4$props.size,
disabled = _ref4$props.disabled,
rotate = _ref4$props.rotate,
v = _ref4.variables,
rtl = _ref4.rtl;
var iconSizeInRems = getIconSize(size, v);
return Object.assign({
display: 'block',
width: iconSizeInRems,
height: iconSizeInRems,
fill: v.color || 'currentColor'
}, disabled && {
fill: v.disabledColor
}, {
// Manual flipping to make it compatible with Emotion and Fela in the same time
transform: "rotate(" + rotate + "deg) /* @noflip */"
}, rtl && {
transform: "rotate(" + -1 * rotate + "deg) /* @noflip */"
});
},
svgFlippingInRtl: function svgFlippingInRtl(config) {
var props = config.props,
rtl = config.rtl;
return Object.assign({}, (0, _styles.callable)(svgIconStyles.svg)(config), rtl && {
transform: "scaleX(-1) rotate(" + props.rotate + "deg) /* @noflip */"
});
},
redPath: function redPath(_ref5) {
var v = _ref5.variables;
return {
fill: v.redColor
};
}
};
exports.svgIconStyles = svgIconStyles;
//# sourceMappingURL=svgIconStyles.js.map