@fluentui/react-northstar
Version:
A themable React component library.
144 lines (143 loc) • 4.87 kB
JavaScript
export var getContainerStyles = function getContainerStyles(options) {
var padding = options.padding,
placement = options.placement;
return Object.assign({}, placement === 'bottom' && {
paddingTop: padding
}, placement === 'top' && {
paddingBottom: padding
}, placement === 'left' && {
paddingRight: padding
}, placement === 'right' && {
paddingLeft: padding
});
};
export var getPointerStyles = function getPointerStyles(options) {
var backgroundColor = options.backgroundColor,
borderColor = options.borderColor,
rtl = options.rtl,
borderSize = options.borderSize,
gap = options.gap,
height = options.height,
padding = options.padding,
placement = options.placement,
svg = options.svg,
width = options.width;
return Object.assign({
display: 'block',
position: 'absolute',
zIndex: 1
}, (placement === 'bottom' || placement === 'top') && {
paddingLeft: gap,
paddingRight: gap,
height: height,
width: "calc(" + width + " + (" + gap + " * 2))"
}, (placement === 'left' || placement === 'right') && {
paddingBottom: gap,
paddingTop: gap,
height: "calc(" + width + " + (" + gap + " * 2))",
width: height
}, placement === 'bottom' && {
top: "calc(" + padding + " - " + height + " + (" + borderSize + " * 2))"
}, placement === 'top' && {
bottom: "calc(" + padding + " - " + height + " + " + borderSize + ")"
}, placement === 'left' && {
right: "calc(" + padding + " - " + height + " + " + borderSize + ")"
}, placement === 'right' && {
left: "calc(" + padding + " - " + height + " + " + borderSize + ")"
}, {
'::before': Object.assign({
content: '" "',
display: 'block',
height: height,
position: 'relative',
transformOrigin: 'center top',
borderBottomColor: 'transparent',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderTopColor: 'transparent',
borderStyle: 'solid',
left: 0,
top: 0
}, placement === 'bottom' && {
borderBottomColor: backgroundColor,
borderWidth: "0 " + height + " " + height
}, placement === 'top' && {
borderTopColor: backgroundColor,
borderWidth: height + " " + height + " 0",
top: "calc(" + borderSize + " * -1)"
}, placement === 'left' && {
borderLeftColor: backgroundColor,
borderWidth: height + " 0 " + height + " " + height
}, placement === 'right' && {
borderRightColor: backgroundColor,
borderWidth: height + " " + height + " " + height + " 0"
}),
'::after': Object.assign({
content: '" "',
display: 'block',
height: height,
position: 'relative',
transformOrigin: 'center top',
zIndex: -1,
borderBottomColor: 'transparent',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderTopColor: 'transparent',
borderStyle: 'solid'
}, placement === 'bottom' && {
borderBottomColor: borderColor,
borderWidth: "0 " + height + " " + height,
left: 0,
bottom: "calc(" + height + " + 1px)"
}, placement === 'top' && {
borderTopColor: borderColor,
borderWidth: height + " " + height + " 0",
left: 0,
bottom: height
}, placement === 'left' && {
borderLeftColor: borderColor,
borderWidth: height + " 0 " + height + " " + height,
left: borderSize,
bottom: width
}, placement === 'right' && {
borderRightColor: borderColor,
borderWidth: height + " " + height + " " + height + " 0",
right: borderSize,
bottom: width
})
}, svg && {
// :before & :after are used to draw CSS triangles, not valid for SVG
'::before': Object.assign({
content: '" "',
backgroundImage: svg,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
display: 'block',
position: 'relative'
}, placement === 'bottom' && {
height: "calc(" + width + " + (" + gap + " * 2))",
width: height,
left: gap,
bottom: "calc(" + width + " - " + height + " + " + borderSize + ")",
transform: 'rotate(90deg) /* @noflip */'
}, placement === 'top' && {
height: "calc(" + width + " + (" + gap + " * 2))",
width: height,
left: gap,
bottom: "calc(" + gap + " + " + height + " - " + borderSize + ")",
transform: 'rotate(-90deg) /* @noflip */'
}, placement === 'left' && {
height: width,
width: height,
left: 0,
transform: rtl ? 'rotate(0) /* @noflip */' : 'rotate(180deg) /* @noflip */'
}, placement === 'right' && {
height: width,
width: height,
right: 0,
transform: rtl ? 'rotate(180deg) /* @noflip */' : 'rotate(0) /* @noflip */'
}),
'::after': undefined
});
};
//# sourceMappingURL=getPointerStyles.js.map