1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.getStyles = void 0;
|
4 | var tslib_1 = require("tslib");
|
5 | var Styling_1 = require("../../Styling");
|
6 | var Utilities_1 = require("../../Utilities");
|
7 | var globalClassNames = {
|
8 | root: 'ms-TeachingBubble',
|
9 | body: 'ms-TeachingBubble-body',
|
10 | bodyContent: 'ms-TeachingBubble-bodycontent',
|
11 | closeButton: 'ms-TeachingBubble-closebutton',
|
12 | content: 'ms-TeachingBubble-content',
|
13 | footer: 'ms-TeachingBubble-footer',
|
14 | header: 'ms-TeachingBubble-header',
|
15 | headerIsCondensed: 'ms-TeachingBubble-header--condensed',
|
16 | headerIsSmall: 'ms-TeachingBubble-header--small',
|
17 | headerIsLarge: 'ms-TeachingBubble-header--large',
|
18 | headline: 'ms-TeachingBubble-headline',
|
19 | image: 'ms-TeachingBubble-image',
|
20 | primaryButton: 'ms-TeachingBubble-primaryButton',
|
21 | secondaryButton: 'ms-TeachingBubble-secondaryButton',
|
22 | subText: 'ms-TeachingBubble-subText',
|
23 |
|
24 |
|
25 | button: 'ms-Button',
|
26 | buttonLabel: 'ms-Button-label',
|
27 | };
|
28 | var opacityFadeIn = Utilities_1.memoizeFunction(function () {
|
29 | return Styling_1.keyframes({
|
30 | '0%': {
|
31 | opacity: 0,
|
32 | animationTimingFunction: Styling_1.AnimationVariables.easeFunction1,
|
33 | transform: 'scale3d(.90,.90,.90)',
|
34 | },
|
35 | '100%': {
|
36 | opacity: 1,
|
37 | transform: 'scale3d(1,1,1)',
|
38 | },
|
39 | });
|
40 | });
|
41 | var rootStyle = function (isWide, calloutProps) {
|
42 | var _a = calloutProps || {}, calloutWidth = _a.calloutWidth, calloutMaxWidth = _a.calloutMaxWidth;
|
43 | return [
|
44 | {
|
45 | display: 'block',
|
46 | maxWidth: 364,
|
47 | border: 0,
|
48 | outline: 'transparent',
|
49 | width: calloutWidth || 'calc(100% + 1px)',
|
50 | animationName: "" + opacityFadeIn(),
|
51 | animationDuration: '300ms',
|
52 | animationTimingFunction: 'linear',
|
53 | animationFillMode: 'both',
|
54 | },
|
55 | isWide && {
|
56 | maxWidth: calloutMaxWidth || 456,
|
57 | },
|
58 | ];
|
59 | };
|
60 | var headerStyle = function (classNames, hasCondensedHeadline, hasSmallHeadline) {
|
61 | if (hasCondensedHeadline) {
|
62 | return [
|
63 | classNames.headerIsCondensed,
|
64 | {
|
65 | marginBottom: 14,
|
66 | },
|
67 | ];
|
68 | }
|
69 | return [
|
70 | hasSmallHeadline && classNames.headerIsSmall,
|
71 | !hasSmallHeadline && classNames.headerIsLarge,
|
72 | {
|
73 | selectors: {
|
74 | ':not(:last-child)': {
|
75 | marginBottom: 14,
|
76 | },
|
77 | },
|
78 | },
|
79 | ];
|
80 | };
|
81 | var getStyles = function (props) {
|
82 | var _a, _b, _c;
|
83 | var hasCondensedHeadline = props.hasCondensedHeadline, hasSmallHeadline = props.hasSmallHeadline, hasCloseButton = props.hasCloseButton, hasHeadline = props.hasHeadline, isWide = props.isWide, primaryButtonClassName = props.primaryButtonClassName, secondaryButtonClassName = props.secondaryButtonClassName, theme = props.theme, _d = props.calloutProps, calloutProps = _d === void 0 ? { className: undefined, theme: theme } : _d;
|
84 | var hasLargeHeadline = !hasCondensedHeadline && !hasSmallHeadline;
|
85 | var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
|
86 | var classNames = Styling_1.getGlobalClassNames(globalClassNames, theme);
|
87 | var hideDefaultFocusRing = Styling_1.getFocusStyle(theme, {
|
88 | outlineColor: 'transparent',
|
89 | borderColor: 'transparent',
|
90 | });
|
91 | return {
|
92 | root: [classNames.root, fonts.medium, calloutProps.className],
|
93 | body: [
|
94 | classNames.body,
|
95 | hasCloseButton && !hasHeadline && { marginRight: 24 },
|
96 | {
|
97 | selectors: {
|
98 | ':not(:last-child)': {
|
99 | marginBottom: 20,
|
100 | },
|
101 | },
|
102 | },
|
103 | ],
|
104 | bodyContent: [
|
105 | classNames.bodyContent,
|
106 | {
|
107 | padding: '20px 24px 20px 24px',
|
108 | },
|
109 | ],
|
110 | closeButton: [
|
111 | classNames.closeButton,
|
112 | {
|
113 | position: 'absolute',
|
114 | right: 0,
|
115 | top: 0,
|
116 | margin: '15px 15px 0 0',
|
117 | borderRadius: 0,
|
118 | color: palette.white,
|
119 | fontSize: fonts.small.fontSize,
|
120 | selectors: {
|
121 | ':hover': {
|
122 | background: palette.themeDarkAlt,
|
123 | color: palette.white,
|
124 | },
|
125 | ':active': {
|
126 | background: palette.themeDark,
|
127 | color: palette.white,
|
128 | },
|
129 | ':focus': {
|
130 | border: "1px solid " + semanticColors.variantBorder,
|
131 | },
|
132 | },
|
133 | },
|
134 | ],
|
135 | content: tslib_1.__spreadArray(tslib_1.__spreadArray([
|
136 | classNames.content
|
137 | ], rootStyle(isWide)), [
|
138 | isWide && {
|
139 | display: 'flex',
|
140 | },
|
141 | ]),
|
142 | footer: [
|
143 | classNames.footer,
|
144 | {
|
145 | display: 'flex',
|
146 | flex: 'auto',
|
147 | alignItems: 'center',
|
148 | color: palette.white,
|
149 | selectors: (_a = {},
|
150 |
|
151 | _a["." + classNames.button + ":not(:first-child)"] = {
|
152 | marginLeft: 10,
|
153 | },
|
154 | _a),
|
155 | },
|
156 | ],
|
157 | header: tslib_1.__spreadArray(tslib_1.__spreadArray([
|
158 | classNames.header
|
159 | ], headerStyle(classNames, hasCondensedHeadline, hasSmallHeadline)), [
|
160 | hasCloseButton && { marginRight: 24 },
|
161 | (hasCondensedHeadline || hasSmallHeadline) && [
|
162 | fonts.medium,
|
163 | {
|
164 | fontWeight: Styling_1.FontWeights.semibold,
|
165 | },
|
166 | ],
|
167 | ]),
|
168 | headline: [
|
169 | classNames.headline,
|
170 | {
|
171 | margin: 0,
|
172 | color: palette.white,
|
173 | fontWeight: Styling_1.FontWeights.semibold,
|
174 | overflowWrap: 'break-word',
|
175 | },
|
176 | hasLargeHeadline && [
|
177 | {
|
178 | fontSize: fonts.xLarge.fontSize,
|
179 | },
|
180 | ],
|
181 | ],
|
182 | imageContent: [
|
183 | classNames.header,
|
184 | classNames.image,
|
185 | isWide && {
|
186 | display: 'flex',
|
187 | alignItems: 'center',
|
188 | maxWidth: 154,
|
189 | },
|
190 | ],
|
191 | primaryButton: [
|
192 | classNames.primaryButton,
|
193 | primaryButtonClassName,
|
194 | hideDefaultFocusRing,
|
195 | {
|
196 | backgroundColor: palette.white,
|
197 | borderColor: palette.white,
|
198 | color: palette.themePrimary,
|
199 | whiteSpace: 'nowrap',
|
200 | selectors: (_b = {},
|
201 |
|
202 | _b["." + classNames.buttonLabel] = fonts.medium,
|
203 | _b[':hover'] = {
|
204 | backgroundColor: palette.themeLighter,
|
205 | borderColor: palette.themeLighter,
|
206 | color: palette.themeDark,
|
207 | },
|
208 | _b[':focus'] = {
|
209 | backgroundColor: palette.themeLighter,
|
210 | border: "1px solid " + palette.black,
|
211 | color: palette.themeDark,
|
212 | outline: "1px solid " + palette.white,
|
213 | outlineOffset: '-2px',
|
214 | },
|
215 | _b[':active'] = {
|
216 | backgroundColor: palette.white,
|
217 | borderColor: palette.white,
|
218 | color: palette.themePrimary,
|
219 | },
|
220 | _b),
|
221 | },
|
222 | ],
|
223 | secondaryButton: [
|
224 | classNames.secondaryButton,
|
225 | secondaryButtonClassName,
|
226 | hideDefaultFocusRing,
|
227 | {
|
228 | backgroundColor: palette.themePrimary,
|
229 | borderColor: palette.white,
|
230 | whiteSpace: 'nowrap',
|
231 | selectors: (_c = {},
|
232 |
|
233 | _c["." + classNames.buttonLabel] = [
|
234 | fonts.medium,
|
235 | {
|
236 | color: palette.white,
|
237 | },
|
238 | ],
|
239 | _c[':hover'] = {
|
240 | backgroundColor: palette.themeDarkAlt,
|
241 | borderColor: palette.white,
|
242 | },
|
243 | _c[':focus'] = {
|
244 | backgroundColor: palette.themeDark,
|
245 | border: "1px solid " + palette.black,
|
246 | outline: "1px solid " + palette.white,
|
247 | outlineOffset: '-2px',
|
248 | },
|
249 | _c[':active'] = {
|
250 | backgroundColor: palette.themePrimary,
|
251 | borderColor: palette.white,
|
252 | },
|
253 | _c),
|
254 | },
|
255 | ],
|
256 | subText: [
|
257 | classNames.subText,
|
258 | {
|
259 | margin: 0,
|
260 | fontSize: fonts.medium.fontSize,
|
261 | color: palette.white,
|
262 | fontWeight: Styling_1.FontWeights.regular,
|
263 | },
|
264 | ],
|
265 | subComponentStyles: {
|
266 | callout: {
|
267 | root: tslib_1.__spreadArray(tslib_1.__spreadArray([], rootStyle(isWide, calloutProps)), [fonts.medium]),
|
268 | beak: [
|
269 | {
|
270 | background: palette.themePrimary,
|
271 | },
|
272 | ],
|
273 | calloutMain: [
|
274 | {
|
275 | background: palette.themePrimary,
|
276 | },
|
277 | ],
|
278 | },
|
279 | },
|
280 | };
|
281 | };
|
282 | exports.getStyles = getStyles;
|
283 |
|
\ | No newline at end of file |