@fluentui/react-northstar
Version:
A themable React component library.
108 lines (107 loc) • 4.5 kB
JavaScript
import { alertDismissActionSlotClassNames } from '../../../../components/Alert/AlertDismissAction';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { getIconFillOrOutlineStyles } from '../../getIconFillOrOutlineStyles';
import { dismissIndicatorUrl } from './dismissIndicatorUrl';
import { getIntentColorsFromProps } from './alertStyles';
import { faster } from '../../animations/durations';
var getIndicatorStyles = function getIndicatorStyles(color, outline, size) {
return {
width: size,
height: size,
backgroundImage: dismissIndicatorUrl(color, outline),
backgroundRepeat: 'no-repeat'
};
};
export var alertDismissActionStyles = {
root: function root(_ref) {
var _ref2, _ref3, _ref4;
var p = _ref.props,
v = _ref.variables,
theme = _ref.theme;
var siteVariables = theme.siteVariables;
var borderWidth = siteVariables.borderWidth;
var _getIntentColorsFromP = getIntentColorsFromProps(p, v),
dismissActionIndicatorColor = _getIntentColorsFromP.color;
var borderFocusStyles = getBorderFocusStyles({
variables: {
borderRadius: v.focusBorderRadius,
borderWidth: v.focusBorderWidth,
focusInnerBorderColor: v.focusInnerBorderColor,
focusOuterBorderColor: v.focusOuterBorderColor,
zIndexes: {
foreground: v.focusBorderZIndex
}
},
borderPadding: borderWidth
});
return Object.assign({
height: v.dismissActionSize,
minWidth: v.dismissActionSize,
color: v.dismissActionColor || 'currentColor',
outline: 0,
padding: 0,
borderWidth: 0,
backgroundColor: v.dismissActionBackgroundColor,
borderRadius: v.borderRadius,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
verticalAlign: 'middle',
cursor: 'pointer',
transition: faster
}, getIconFillOrOutlineStyles({
outline: true
}), !p.hasContent && (_ref2 = {}, _ref2["& ." + alertDismissActionSlotClassNames.content] = Object.assign({}, getIndicatorStyles(dismissActionIndicatorColor, true, v.dismissActionIndicatorSize)), _ref2), {
':hover': Object.assign({
backgroundColor: v.hoverBackgroundColor,
color: 'currentColor'
}, getIconFillOrOutlineStyles({
outline: false
}), !p.hasContent && (_ref3 = {}, _ref3["& ." + alertDismissActionSlotClassNames.content] = Object.assign({}, getIndicatorStyles(dismissActionIndicatorColor, false, v.dismissActionIndicatorSize)), _ref3), getBorderFocusStyles({
variables: {
borderRadius: v.dismissActionHoverBorderRadius,
borderWidth: v.dismissActionHoverBorderWidth,
focusInnerBorderColor: v.dismissActionHoverInnerBorderColor,
focusOuterBorderColor: v.dismissActionHoverOuterBorderColor,
zIndexes: {
foreground: v.dismissActionHoverZIndex
}
}
})[':focus-visible']),
':focus': borderFocusStyles[':focus'],
':focus-visible': Object.assign({
backgroundColor: v.focusBackgroundColor,
borderColor: v.dismissActionBorderColorFocus,
color: v.dismissActionColorFocus,
borderWidth: borderWidth
}, borderFocusStyles[':focus-visible'], getIconFillOrOutlineStyles({
outline: false
}), !p.hasContent && (_ref4 = {}, _ref4["& ." + alertDismissActionSlotClassNames.content] = Object.assign({}, getIndicatorStyles(dismissActionIndicatorColor, false, v.dismissActionIndicatorSize)), _ref4), {
':hover': {
borderColor: v.dismissActionBorderColorHover
}
})
}, p.disabled && {
cursor: 'default',
color: v.dismissActionColorDisabled,
boxShadow: 'none',
pointerEvents: 'none',
':hover': {
color: v.dismissActionColorDisabled
},
backgroundColor: v.dismissActionBackgroundColorDisabled,
borderColor: v.dismissActionBorderColorDisabled
});
},
content: function content(_ref5) {
var p = _ref5.props,
v = _ref5.variables;
var _getIntentColorsFromP2 = getIntentColorsFromProps(p, v),
dismissActionIndicatorColor = _getIntentColorsFromP2.color;
return Object.assign({
fontWeight: v.dismissActionContentFontWeight
}, !p.hasContent && Object.assign({}, getIndicatorStyles(dismissActionIndicatorColor, false, v.dismissActionIndicatorSize)));
}
};
//# sourceMappingURL=alertDismissActionStyles.js.map