@fluentui/react-northstar
Version:
A themable React component library.
93 lines (92 loc) • 2.89 kB
JavaScript
import { getIconFillOrOutlineStyles } from '../../getIconFillOrOutlineStyles';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { pxToRem } from '../../../../utils';
import { loaderSlotClassNames } from '../../../../components/Loader/Loader';
export var attachmentActionStyles = {
root: function root(_ref) {
var p = _ref.props,
v = _ref.variables,
theme = _ref.theme;
var siteVariables = theme.siteVariables;
var iconFilledStyles = getIconFillOrOutlineStyles({
outline: false
});
var borderFocusStyles = getBorderFocusStyles({
variables: siteVariables,
borderRadius: v.actionFocusBorderRadius
});
return Object.assign({
height: v.actionHeight,
maxWidth: v.actionMaxWidth,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
verticalAlign: 'middle',
cursor: 'pointer',
// text button defaults
color: v.actionColor,
// textColor
backgroundColor: 'transparent',
borderColor: 'transparent',
padding: 0
}, getIconFillOrOutlineStyles({
outline: true
}), {
':focus': Object.assign({
boxShadow: 'none'
}, borderFocusStyles[':focus']),
':focus-visible': Object.assign({}, iconFilledStyles, borderFocusStyles[':focus-visible'])
}, p.primary && {
color: v.actionPrimaryColor
}, p.disabled && {
cursor: 'default',
boxShadow: 'none',
pointerEvents: 'none',
color: v.actionColorDisabled,
backgroundColor: 'transparent',
':hover': {
color: v.actionColorDisabled
}
}, {
minWidth: v.actionHeight,
':hover': Object.assign({}, getIconFillOrOutlineStyles({
outline: false
}))
});
},
icon: function icon(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
return Object.assign({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: v.actionIconSize,
height: v.actionIconSize
}, p.loading && {
margin: 0,
opacity: 0,
width: 0
}, p.hasContent && Object.assign({
margin: "0 " + pxToRem(10) + " 0 0"
}, p.iconPosition === 'after' && {
margin: "0 0 0 " + pxToRem(10)
}));
},
loader: function loader(_ref3) {
var _Object$assign;
var p = _ref3.props,
v = _ref3.variables;
return Object.assign((_Object$assign = {}, _Object$assign["& ." + loaderSlotClassNames.indicator] = {
width: v.actionLoaderSize,
height: v.actionLoaderSize
}, _Object$assign["& ." + loaderSlotClassNames.indicator + " > svg"] = {
width: v.actionLoaderSize,
height: v.actionLoaderSvgHeight
}, _Object$assign), p.hasContent && {
marginRight: pxToRem(4)
});
}
};
//# sourceMappingURL=attachmentActionStyles.js.map