@fluentui/react-northstar
Version:
A themable React component library.
62 lines (61 loc) • 1.85 kB
JavaScript
import { reactionSlotClassNames } from '../../../../components/Reaction/Reaction';
import { pxToRem } from '../../../../utils';
var contentClassNameSelector = "& ." + reactionSlotClassNames.content;
export var reactionStyles = {
root: function root(_ref) {
var _hover;
var p = _ref.props,
v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
return {
cursor: 'pointer',
background: 'transparent',
border: pxToRem(0),
padding: pxToRem(0),
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
color: v.meReacting ? v.meReactingColor : v.otherReactingColor,
':hover': (_hover = {
color: v.meReacting ? v.meReactingColorHover : v.otherReactingColorHover
}, _hover[contentClassNameSelector] = {
fontWeight: v.fontWeightHover
}, _hover),
position: 'relative',
':focus': {
outline: 'none'
},
':focus-visible': {
':after': {
content: '""',
position: 'absolute',
top: "-" + pxToRem(2),
right: "-" + pxToRem(2),
bottom: "-" + pxToRem(2),
left: "-" + pxToRem(2),
borderWidth: '1px',
borderStyle: 'solid',
borderColor: v.borderColorFocus,
borderRadius: siteVariables.borderRadiusMedium,
boxShadow: "0px 0px 0px 1px " + v.boxShadowColor + " inset"
}
}
};
},
icon: function icon(_ref2) {
var p = _ref2.props;
return {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
marginRight: p.hasContent ? pxToRem(4) : pxToRem(0)
};
},
content: function content(_ref3) {
var v = _ref3.variables;
return {
fontSize: v.contentFontSize
};
}
};
//# sourceMappingURL=reactionStyles.js.map