@fluentui/react-northstar
Version:
A themable React component library.
113 lines (111 loc) • 4.9 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.alertDismissActionStyles = void 0;
var _AlertDismissAction = require("../../../../components/Alert/AlertDismissAction");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var _getIconFillOrOutlineStyles = require("../../getIconFillOrOutlineStyles");
var _dismissIndicatorUrl = require("./dismissIndicatorUrl");
var _alertStyles = require("./alertStyles");
var _durations = require("../../animations/durations");
var getIndicatorStyles = function getIndicatorStyles(color, outline, size) {
return {
width: size,
height: size,
backgroundImage: (0, _dismissIndicatorUrl.dismissIndicatorUrl)(color, outline),
backgroundRepeat: 'no-repeat'
};
};
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 = (0, _alertStyles.getIntentColorsFromProps)(p, v),
dismissActionIndicatorColor = _getIntentColorsFromP.color;
var borderFocusStyles = (0, _getBorderFocusStyles.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: _durations.faster
}, (0, _getIconFillOrOutlineStyles.getIconFillOrOutlineStyles)({
outline: true
}), !p.hasContent && (_ref2 = {}, _ref2["& ." + _AlertDismissAction.alertDismissActionSlotClassNames.content] = Object.assign({}, getIndicatorStyles(dismissActionIndicatorColor, true, v.dismissActionIndicatorSize)), _ref2), {
':hover': Object.assign({
backgroundColor: v.hoverBackgroundColor,
color: 'currentColor'
}, (0, _getIconFillOrOutlineStyles.getIconFillOrOutlineStyles)({
outline: false
}), !p.hasContent && (_ref3 = {}, _ref3["& ." + _AlertDismissAction.alertDismissActionSlotClassNames.content] = Object.assign({}, getIndicatorStyles(dismissActionIndicatorColor, false, v.dismissActionIndicatorSize)), _ref3), (0, _getBorderFocusStyles.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'], (0, _getIconFillOrOutlineStyles.getIconFillOrOutlineStyles)({
outline: false
}), !p.hasContent && (_ref4 = {}, _ref4["& ." + _AlertDismissAction.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 = (0, _alertStyles.getIntentColorsFromProps)(p, v),
dismissActionIndicatorColor = _getIntentColorsFromP2.color;
return Object.assign({
fontWeight: v.dismissActionContentFontWeight
}, !p.hasContent && Object.assign({}, getIndicatorStyles(dismissActionIndicatorColor, false, v.dismissActionIndicatorSize)));
}
};
exports.alertDismissActionStyles = alertDismissActionStyles;
//# sourceMappingURL=alertDismissActionStyles.js.map