1 | import { HighContrastSelector, focusClear, getGlobalClassNames, ZIndexes } from '../../Styling';
|
2 | function getBeakStyle(beakWidth) {
|
3 | return {
|
4 | height: beakWidth,
|
5 | width: beakWidth,
|
6 | };
|
7 | }
|
8 | var GlobalClassNames = {
|
9 | container: 'ms-Callout-container',
|
10 | root: 'ms-Callout',
|
11 | beak: 'ms-Callout-beak',
|
12 | beakCurtain: 'ms-Callout-beakCurtain',
|
13 | calloutMain: 'ms-Callout-main',
|
14 | };
|
15 | export var getStyles = function (props) {
|
16 | var _a;
|
17 | 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;
|
18 | var classNames = getGlobalClassNames(GlobalClassNames, theme);
|
19 | var semanticColors = theme.semanticColors, effects = theme.effects;
|
20 | return {
|
21 | container: [
|
22 | classNames.container,
|
23 | {
|
24 | position: 'relative',
|
25 | },
|
26 | ],
|
27 | root: [
|
28 | classNames.root,
|
29 | theme.fonts.medium,
|
30 | {
|
31 | position: 'absolute',
|
32 | display: 'flex',
|
33 | zIndex: doNotLayer ? ZIndexes.Layer : undefined,
|
34 | boxSizing: 'border-box',
|
35 | borderRadius: effects.roundedCorner2,
|
36 | boxShadow: effects.elevation16,
|
37 | selectors: (_a = {},
|
38 | _a[HighContrastSelector] = {
|
39 | borderWidth: 1,
|
40 | borderStyle: 'solid',
|
41 | borderColor: 'WindowText',
|
42 | },
|
43 | _a),
|
44 | },
|
45 | focusClear(),
|
46 | className,
|
47 | !!calloutWidth && { width: calloutWidth },
|
48 | !!calloutMaxWidth && { maxWidth: calloutMaxWidth },
|
49 | !!calloutMinWidth && { minWidth: calloutMinWidth },
|
50 | ],
|
51 | beak: [
|
52 | classNames.beak,
|
53 | {
|
54 | position: 'absolute',
|
55 | backgroundColor: semanticColors.menuBackground,
|
56 | boxShadow: 'inherit',
|
57 | border: 'inherit',
|
58 | boxSizing: 'border-box',
|
59 | transform: 'rotate(45deg)',
|
60 | },
|
61 | getBeakStyle(beakWidth),
|
62 | backgroundColor && {
|
63 | backgroundColor: backgroundColor,
|
64 | },
|
65 | ],
|
66 | beakCurtain: [
|
67 | classNames.beakCurtain,
|
68 | {
|
69 | position: 'absolute',
|
70 | top: 0,
|
71 | right: 0,
|
72 | bottom: 0,
|
73 | left: 0,
|
74 | backgroundColor: semanticColors.menuBackground,
|
75 | borderRadius: effects.roundedCorner2,
|
76 | },
|
77 | ],
|
78 | calloutMain: [
|
79 | classNames.calloutMain,
|
80 | {
|
81 | backgroundColor: semanticColors.menuBackground,
|
82 | overflowX: 'hidden',
|
83 | overflowY: 'auto',
|
84 | position: 'relative',
|
85 | width: '100%',
|
86 | borderRadius: effects.roundedCorner2,
|
87 | },
|
88 | overflowYHidden && {
|
89 | overflowY: 'hidden',
|
90 | },
|
91 | backgroundColor && {
|
92 | backgroundColor: backgroundColor,
|
93 | },
|
94 | ],
|
95 | };
|
96 | };
|
97 |
|
\ | No newline at end of file |