UNPKG

@fluentui/react-northstar

Version:
62 lines (61 loc) 1.85 kB
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