Stefan Hacker
102 lines
3.9 KiB
JavaScript
102 lines
3.9 KiB
JavaScript
define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = void 0;
|
|
function getBeakStyle(beakWidth) {
|
|
return {
|
|
height: beakWidth,
|
|
width: beakWidth,
|
|
};
|
|
}
|
|
var GlobalClassNames = {
|
|
container: 'ms-Callout-container',
|
|
root: 'ms-Callout',
|
|
beak: 'ms-Callout-beak',
|
|
beakCurtain: 'ms-Callout-beakCurtain',
|
|
calloutMain: 'ms-Callout-main',
|
|
};
|
|
var getStyles = function (props) {
|
|
var _a;
|
|
var theme = props.theme, className = props.className, overflowYHidden = props.overflowYHidden, calloutWidth = props.calloutWidth, beakWidth = props.beakWidth, backgroundColor = props.backgroundColor, calloutMaxWidth = props.calloutMaxWidth, calloutMinWidth = props.calloutMinWidth, doNotLayer = props.doNotLayer;
|
|
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
var semanticColors = theme.semanticColors, effects = theme.effects;
|
|
return {
|
|
container: [
|
|
classNames.container,
|
|
{
|
|
position: 'relative',
|
|
},
|
|
],
|
|
root: [
|
|
classNames.root,
|
|
theme.fonts.medium,
|
|
{
|
|
position: 'absolute',
|
|
display: 'flex',
|
|
zIndex: doNotLayer ? Styling_1.ZIndexes.Layer : undefined,
|
|
boxSizing: 'border-box',
|
|
borderRadius: effects.roundedCorner2,
|
|
boxShadow: effects.elevation16,
|
|
selectors: (_a = {},
|
|
_a[Styling_1.HighContrastSelector] = {
|
|
borderWidth: 1,
|
|
borderStyle: 'solid',
|
|
borderColor: 'WindowText',
|
|
},
|
|
_a),
|
|
},
|
|
(0, Styling_1.focusClear)(),
|
|
className,
|
|
!!calloutWidth && { width: calloutWidth },
|
|
!!calloutMaxWidth && { maxWidth: calloutMaxWidth },
|
|
!!calloutMinWidth && { minWidth: calloutMinWidth },
|
|
],
|
|
beak: [
|
|
classNames.beak,
|
|
{
|
|
position: 'absolute',
|
|
backgroundColor: semanticColors.menuBackground,
|
|
boxShadow: 'inherit',
|
|
border: 'inherit',
|
|
boxSizing: 'border-box',
|
|
transform: 'rotate(45deg)',
|
|
},
|
|
getBeakStyle(beakWidth),
|
|
backgroundColor && {
|
|
backgroundColor: backgroundColor,
|
|
},
|
|
],
|
|
beakCurtain: [
|
|
classNames.beakCurtain,
|
|
{
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
backgroundColor: semanticColors.menuBackground,
|
|
borderRadius: effects.roundedCorner2,
|
|
},
|
|
],
|
|
calloutMain: [
|
|
classNames.calloutMain,
|
|
{
|
|
backgroundColor: semanticColors.menuBackground,
|
|
overflowX: 'hidden',
|
|
overflowY: 'auto',
|
|
position: 'relative',
|
|
width: '100%',
|
|
borderRadius: effects.roundedCorner2,
|
|
},
|
|
overflowYHidden && {
|
|
overflowY: 'hidden',
|
|
},
|
|
backgroundColor && {
|
|
backgroundColor: backgroundColor,
|
|
},
|
|
],
|
|
};
|
|
};
|
|
exports.getStyles = getStyles;
|
|
});
|
|
//# sourceMappingURL=CalloutContent.styles.js.map
|