@fluentui/react-northstar
Version:
A themable React component library.
74 lines (72 loc) • 3.68 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.getBorderFocusStyles = void 0;
var defaultColor = 'transparent';
/**
* Returns style object that can be used for styling components on focus state.
* NOTE: the element where this is used needs to have relative positioning so that the
* pseudo elements created on focus can be properly positioned.
*/
var getBorderFocusStyles = function getBorderFocusStyles(args) {
var sv = args.variables;
var _args$borderRadius = args.borderRadius,
borderRadius = _args$borderRadius === void 0 ? sv.focusBorderRadius || sv.borderRadius : _args$borderRadius,
_args$focusInnerBorde = args.focusInnerBorderColor,
focusInnerBorderColor = _args$focusInnerBorde === void 0 ? sv.focusInnerBorderColor || defaultColor : _args$focusInnerBorde,
_args$focusOuterBorde = args.focusOuterBorderColor,
focusOuterBorderColor = _args$focusOuterBorde === void 0 ? sv.focusOuterBorderColor || defaultColor : _args$focusOuterBorde,
borderPadding = args.borderPadding,
_args$focusInnerBorde2 = args.focusInnerBorderWidth,
focusInnerBorderWidth = _args$focusInnerBorde2 === void 0 ? sv.focusInnerBorderWidth || sv.borderWidth : _args$focusInnerBorde2,
_args$focusOuterBorde2 = args.focusOuterBorderWidth,
focusOuterBorderWidth = _args$focusOuterBorde2 === void 0 ? sv.focusOuterBorderWidth || sv.borderWidth : _args$focusOuterBorde2,
_args$zIndex = args.zIndex,
zIndex = _args$zIndex === void 0 ? sv.zIndexes.foreground : _args$zIndex;
var defaultPreudoStyles = {
content: '""',
position: 'absolute',
borderStyle: 'solid',
pointerEvents: 'none',
borderRadius: borderRadius
};
var borderPaddingTop = (borderPadding == null ? void 0 : borderPadding.top) || borderPadding;
var borderPaddingBottom = (borderPadding == null ? void 0 : borderPadding.bottom) || borderPadding;
var borderPaddingLeft = (borderPadding == null ? void 0 : borderPadding.left) || borderPadding;
var borderPaddingRight = (borderPadding == null ? void 0 : borderPadding.right) || borderPadding;
return {
':focus': {
outline: 'none'
},
':focus-visible': {
borderColor: 'transparent',
':before': Object.assign({}, defaultPreudoStyles, {
borderWidth: focusInnerBorderWidth,
zIndex: zIndex,
borderColor: focusInnerBorderColor,
top: borderPadding == null ? '0' : "-" + borderPaddingTop,
bottom: borderPadding == null ? '0' : "-" + borderPaddingBottom,
left: borderPadding == null ? '0' : "-" + borderPaddingLeft,
right: borderPadding == null ? '0' : "-" + borderPaddingRight
}),
':after': Object.assign({}, defaultPreudoStyles, {
borderWidth: focusOuterBorderWidth,
zIndex: zIndex,
borderColor: focusOuterBorderColor,
top: borderPadding == null ? "-" + focusInnerBorderWidth : "calc(0px - " + borderPaddingTop + " - " + focusInnerBorderWidth + ")",
bottom: borderPadding == null ? "-" + focusInnerBorderWidth : "calc(0px - " + borderPaddingBottom + " - " + focusInnerBorderWidth + ")",
left: borderPadding == null ? "-" + focusInnerBorderWidth : "calc(0px - " + borderPaddingLeft + " - " + focusInnerBorderWidth + ")",
right: borderPadding == null ? "-" + focusInnerBorderWidth : "calc(0px - " + borderPaddingRight + " - " + focusInnerBorderWidth + ")"
}),
'@media(forced-colors: active)': {
':before': {
borderColor: 'Highlight'
},
':after': {
borderColor: 'Highlight'
}
}
}
};
};
exports.getBorderFocusStyles = getBorderFocusStyles;
//# sourceMappingURL=getBorderFocusStyles.js.map