1 | 'use strict';
|
2 |
|
3 | var React = require('react');
|
4 |
|
5 | var theming = require('@storybook/theming');
|
6 |
|
7 | function _interopDefaultLegacy(e) {
|
8 | return e && typeof e === 'object' && 'default' in e ? e : {
|
9 | 'default': e
|
10 | };
|
11 | }
|
12 |
|
13 | var React__default = _interopDefaultLegacy(React);
|
14 |
|
15 | const hsResizeObserverDummyAnimation = theming.keyframes`0%{z-index:0}to{z-index:-1}`;
|
16 |
|
17 | const getScrollAreaStyles = theme => ({
|
18 | 'html.os-html, html.os-html>.os-host': {
|
19 | display: 'block',
|
20 | overflow: 'hidden',
|
21 | boxSizing: 'border-box',
|
22 | height: '100%!important',
|
23 | width: '100%!important',
|
24 | minWidth: '100%!important',
|
25 | minHeight: '100%!important',
|
26 | margin: '0!important',
|
27 | position: 'absolute!important'
|
28 | },
|
29 | 'html.os-html>.os-host>.os-padding': {
|
30 | position: 'absolute'
|
31 | },
|
32 | 'body.os-dragging, body.os-dragging *': {
|
33 | cursor: 'default'
|
34 | },
|
35 | '.os-host, .os-host-textarea': {
|
36 | position: 'relative',
|
37 | overflow: 'visible!important',
|
38 | flexDirection: 'column',
|
39 | flexWrap: 'nowrap',
|
40 | justifyContent: 'flex-start',
|
41 | alignContent: 'flex-start',
|
42 | alignItems: 'flex-start'
|
43 | },
|
44 | '.os-host-flexbox': {
|
45 | overflow: 'hidden!important',
|
46 | display: 'flex'
|
47 | },
|
48 | '.os-host-flexbox>.os-size-auto-observer': {
|
49 | height: 'inherit!important'
|
50 | },
|
51 | '.os-host-flexbox>.os-content-glue': {
|
52 | flexGrow: 1,
|
53 | flexShrink: 0
|
54 | },
|
55 | '.os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue': {
|
56 | minHeight: 0,
|
57 | minWidth: 0,
|
58 | flexGrow: 0,
|
59 | flexShrink: 1,
|
60 | flexBasis: 'auto'
|
61 | },
|
62 | '#os-dummy-scrollbar-size': {
|
63 | position: 'fixed',
|
64 | opacity: 0,
|
65 | visibility: 'hidden',
|
66 | overflow: 'scroll',
|
67 | height: 500,
|
68 | width: 500
|
69 | },
|
70 | '#os-dummy-scrollbar-size>div': {
|
71 | width: '200%',
|
72 | height: '200%',
|
73 | margin: 10
|
74 | },
|
75 | '#os-dummy-scrollbar-size, .os-viewport': {},
|
76 | '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport': {
|
77 | scrollbarWidth: 'none!important'
|
78 | },
|
79 | '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner': {
|
80 | display: 'none!important',
|
81 | width: '0!important',
|
82 | height: '0!important',
|
83 | visibility: 'hidden!important',
|
84 | background: '0 0!important'
|
85 | },
|
86 | '.os-content-glue': {
|
87 | boxSizing: 'inherit',
|
88 | maxHeight: '100%',
|
89 | maxWidth: '100%',
|
90 | width: '100%',
|
91 | pointerEvents: 'none'
|
92 | },
|
93 | '.os-padding': {
|
94 | boxSizing: 'inherit',
|
95 | direction: 'inherit',
|
96 | position: 'absolute',
|
97 | overflow: 'visible',
|
98 | padding: 0,
|
99 | margin: 0,
|
100 | left: 0,
|
101 | top: 0,
|
102 | bottom: 0,
|
103 | right: 0,
|
104 | width: 'auto!important',
|
105 | height: 'auto!important',
|
106 | zIndex: 1
|
107 | },
|
108 | '.os-host-overflow>.os-padding': {
|
109 | overflow: 'hidden'
|
110 | },
|
111 | '.os-viewport': {
|
112 | direction: 'inherit!important',
|
113 | boxSizing: 'inherit!important',
|
114 | resize: 'none!important',
|
115 | outline: '0!important',
|
116 | position: 'absolute',
|
117 | overflow: 'hidden',
|
118 | top: 0,
|
119 | left: 0,
|
120 | bottom: 0,
|
121 | right: 0,
|
122 | padding: 0,
|
123 | margin: 0
|
124 | },
|
125 | '.os-content-arrange': {
|
126 | position: 'absolute',
|
127 | zIndex: -1,
|
128 | minHeight: 1,
|
129 | minWidth: 1,
|
130 | pointerEvents: 'none'
|
131 | },
|
132 | '.os-content': {
|
133 | direction: 'inherit',
|
134 | boxSizing: 'border-box!important',
|
135 | position: 'relative',
|
136 | display: 'block',
|
137 | height: '100%',
|
138 | width: '100%',
|
139 | visibility: 'visible'
|
140 | },
|
141 | '.os-content:before, .os-content:after': {
|
142 | content: "''",
|
143 | display: 'table',
|
144 | width: 0,
|
145 | height: 0,
|
146 | lineHeight: 0,
|
147 | fontSize: 0
|
148 | },
|
149 | '.os-content>.os-textarea': {
|
150 | boxSizing: 'border-box!important',
|
151 | direction: 'inherit!important',
|
152 | background: '0 0!important',
|
153 | outline: '0 transparent!important',
|
154 | overflow: 'hidden!important',
|
155 | position: 'absolute!important',
|
156 | display: 'block!important',
|
157 | top: '0!important',
|
158 | left: '0!important',
|
159 | margin: '0!important',
|
160 | borderRadius: '0!important',
|
161 | float: 'none!important',
|
162 | filter: 'none!important',
|
163 | border: '0!important',
|
164 | resize: 'none!important',
|
165 | transform: 'none!important',
|
166 | maxWidth: 'none!important',
|
167 | maxHeight: 'none!important',
|
168 | boxShadow: 'none!important',
|
169 | perspective: 'none!important',
|
170 | opacity: '1!important',
|
171 | zIndex: '1!important',
|
172 | clip: 'auto!important',
|
173 | verticalAlign: 'baseline!important',
|
174 | padding: 0
|
175 | },
|
176 | '.os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea': {
|
177 | right: '0!important'
|
178 | },
|
179 | '.os-content>.os-textarea-cover': {
|
180 | zIndex: -1,
|
181 | pointerEvents: 'none'
|
182 | },
|
183 | '.os-content>.os-textarea[wrap=off]': {
|
184 | whiteSpace: 'pre!important',
|
185 | margin: '0!important'
|
186 | },
|
187 | '.os-text-inherit': {
|
188 | fontFamily: 'inherit',
|
189 | fontSize: 'inherit',
|
190 | fontWeight: 'inherit',
|
191 | fontStyle: 'inherit',
|
192 | fontVariant: 'inherit',
|
193 | textTransform: 'inherit',
|
194 | textDecoration: 'inherit',
|
195 | textIndent: 'inherit',
|
196 | textAlign: 'inherit',
|
197 | textShadow: 'inherit',
|
198 | textOverflow: 'inherit',
|
199 | letterSpacing: 'inherit',
|
200 | wordSpacing: 'inherit',
|
201 | lineHeight: 'inherit',
|
202 | unicodeBidi: 'inherit',
|
203 | direction: 'inherit',
|
204 | color: 'inherit',
|
205 | cursor: 'text'
|
206 | },
|
207 | '.os-resize-observer, .os-resize-observer-host': {
|
208 | boxSizing: 'inherit',
|
209 | display: 'block',
|
210 | opacity: 0,
|
211 | position: 'absolute',
|
212 | top: 0,
|
213 | left: 0,
|
214 | height: '100%',
|
215 | width: '100%',
|
216 | overflow: 'hidden',
|
217 | pointerEvents: 'none',
|
218 | zIndex: -1
|
219 | },
|
220 | '.os-resize-observer-host': {
|
221 | padding: 'inherit',
|
222 | border: 'inherit',
|
223 | borderColor: 'transparent',
|
224 | borderStyle: 'solid',
|
225 | boxSizing: 'border-box'
|
226 | },
|
227 | '.os-resize-observer-host:after': {
|
228 | content: "''"
|
229 | },
|
230 | '.os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after': {
|
231 | height: '200%',
|
232 | width: '200%',
|
233 | padding: 'inherit',
|
234 | border: 'inherit',
|
235 | margin: 0,
|
236 | display: 'block',
|
237 | boxSizing: 'content-box'
|
238 | },
|
239 | '.os-resize-observer.observed, object.os-resize-observer': {
|
240 | boxSizing: 'border-box!important'
|
241 | },
|
242 | '.os-size-auto-observer': {
|
243 | boxSizing: 'inherit!important',
|
244 | height: '100%',
|
245 | width: 'inherit',
|
246 | maxWidth: 1,
|
247 | position: 'relative',
|
248 | float: 'left',
|
249 | maxHeight: 1,
|
250 | overflow: 'hidden',
|
251 | zIndex: -1,
|
252 | padding: 0,
|
253 | margin: 0,
|
254 | pointerEvents: 'none',
|
255 | flexGrow: 'inherit',
|
256 | flexShrink: 0,
|
257 | flexBasis: 0
|
258 | },
|
259 | '.os-size-auto-observer>.os-resize-observer': {
|
260 | width: '1000%',
|
261 | height: '1000%',
|
262 | minHeight: 1,
|
263 | minWidth: 1
|
264 | },
|
265 | '.os-resize-observer-item': {
|
266 | position: 'absolute',
|
267 | top: 0,
|
268 | right: 0,
|
269 | bottom: 0,
|
270 | left: 0,
|
271 | overflow: 'hidden',
|
272 | zIndex: -1,
|
273 | opacity: 0,
|
274 | direction: 'ltr!important',
|
275 | flex: 'none!important'
|
276 | },
|
277 | '.os-resize-observer-item-final': {
|
278 | position: 'absolute',
|
279 | left: 0,
|
280 | top: 0,
|
281 | transition: 'none!important',
|
282 | flex: 'none!important'
|
283 | },
|
284 | '.os-resize-observer': {
|
285 | animationDuration: '.001s',
|
286 | animationName: `${hsResizeObserverDummyAnimation}`
|
287 | },
|
288 | '.os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner': {
|
289 | transition: 'opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s'
|
290 | },
|
291 | 'html.os-html>.os-host>.os-scrollbar': {
|
292 | position: 'absolute',
|
293 | zIndex: 999999
|
294 | },
|
295 | '.os-scrollbar, .os-scrollbar-corner': {
|
296 | position: 'absolute',
|
297 | opacity: 1,
|
298 | zIndex: 1
|
299 | },
|
300 | '.os-scrollbar-corner': {
|
301 | bottom: 0,
|
302 | right: 0,
|
303 | height: 10,
|
304 | width: 10,
|
305 | backgroundColor: 'transparent'
|
306 | },
|
307 | '.os-scrollbar': {
|
308 | pointerEvents: 'none',
|
309 | padding: 2,
|
310 | boxSizing: 'border-box',
|
311 | background: 0
|
312 | },
|
313 | '.os-scrollbar-track': {
|
314 | pointerEvents: 'auto',
|
315 | position: 'relative',
|
316 | height: '100%',
|
317 | width: '100%',
|
318 | padding: '0!important',
|
319 | border: '0!important'
|
320 | },
|
321 | '.os-scrollbar-handle': {
|
322 | pointerEvents: 'auto',
|
323 | position: 'absolute',
|
324 | width: '100%',
|
325 | height: '100%'
|
326 | },
|
327 | '.os-scrollbar-handle-off, .os-scrollbar-track-off': {
|
328 | pointerEvents: 'none'
|
329 | },
|
330 | '.os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *': {
|
331 | pointerEvents: 'none!important'
|
332 | },
|
333 | '.os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle': {
|
334 | opacity: '0!important'
|
335 | },
|
336 | '.os-scrollbar-horizontal': {
|
337 | bottom: 0,
|
338 | left: 0,
|
339 | right: 10,
|
340 | height: 10
|
341 | },
|
342 | '.os-scrollbar-vertical': {
|
343 | top: 0,
|
344 | right: 0,
|
345 | bottom: 10,
|
346 | width: 10
|
347 | },
|
348 | '.os-host-rtl>.os-scrollbar-horizontal': {
|
349 | right: 0
|
350 | },
|
351 | '.os-host-rtl>.os-scrollbar-vertical': {
|
352 | right: 'auto',
|
353 | left: 0
|
354 | },
|
355 | '.os-host-rtl>.os-scrollbar-corner': {
|
356 | right: 'auto',
|
357 | left: 0
|
358 | },
|
359 | '.os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner': {
|
360 | opacity: 0,
|
361 | visibility: 'hidden',
|
362 | pointerEvents: 'none'
|
363 | },
|
364 | '.os-scrollbar-corner-resize-both': {
|
365 | cursor: 'nwse-resize'
|
366 | },
|
367 | '.os-host-rtl>.os-scrollbar-corner-resize-both': {
|
368 | cursor: 'nesw-resize'
|
369 | },
|
370 | '.os-scrollbar-corner-resize-horizontal': {
|
371 | cursor: 'ew-resize'
|
372 | },
|
373 | '.os-scrollbar-corner-resize-vertical': {
|
374 | cursor: 'ns-resize'
|
375 | },
|
376 | '.os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize': {
|
377 | cursor: 'default'
|
378 | },
|
379 | '.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical': {
|
380 | top: 0,
|
381 | bottom: 0
|
382 | },
|
383 | '.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal': {
|
384 | right: 0,
|
385 | left: 0
|
386 | },
|
387 | '.os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize': {
|
388 | opacity: '1!important',
|
389 | visibility: 'visible!important'
|
390 | },
|
391 | '.os-scrollbar-corner.os-scrollbar-corner-resize': {
|
392 | backgroundImage: 'linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)',
|
393 | backgroundRepeat: 'no-repeat',
|
394 | backgroundPosition: '100% 100%',
|
395 | pointerEvents: 'auto!important'
|
396 | },
|
397 | '.os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize': {
|
398 | transform: 'scale(-1,1)'
|
399 | },
|
400 | '.os-host-overflow': {
|
401 | overflow: 'hidden!important'
|
402 | },
|
403 | '.os-theme-dark.os-host-rtl>.os-scrollbar-horizontal': {
|
404 | left: 10,
|
405 | right: 0
|
406 | },
|
407 | '.os-scrollbar.os-scrollbar-unusable': {
|
408 | background: 0
|
409 | },
|
410 | '.os-scrollbar>.os-scrollbar-track': {
|
411 | background: 0
|
412 | },
|
413 | '.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle': {
|
414 | minWidth: 30
|
415 | },
|
416 | '.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle': {
|
417 | minHeight: 30
|
418 | },
|
419 | '.os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
|
420 | transition: 'background-color .3s'
|
421 | },
|
422 | '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track': {
|
423 | borderRadius: 10
|
424 | },
|
425 | '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
|
426 | background: theme.color.mediumdark,
|
427 | opacity: 0.5
|
428 | },
|
429 | '.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle': {
|
430 | opacity: 0.6
|
431 | },
|
432 | '.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before': {
|
433 | content: "''",
|
434 | position: 'absolute',
|
435 | left: 0,
|
436 | right: 0,
|
437 | top: 0,
|
438 | bottom: 0,
|
439 | display: 'block'
|
440 | },
|
441 | '.os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before': {
|
442 | display: 'none'
|
443 | },
|
444 | '.os-scrollbar-horizontal .os-scrollbar-handle:before': {
|
445 | top: -6,
|
446 | bottom: -2
|
447 | },
|
448 | '.os-scrollbar-vertical .os-scrollbar-handle:before': {
|
449 | left: -6,
|
450 | right: -2
|
451 | },
|
452 | '.os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before': {
|
453 | right: -6,
|
454 | left: -2
|
455 | }
|
456 | });
|
457 |
|
458 | const GlobalScrollAreaStyles = () => React__default["default"].createElement(theming.Global, {
|
459 | styles: getScrollAreaStyles
|
460 | });
|
461 |
|
462 | exports["default"] = GlobalScrollAreaStyles;
|
463 | exports.getScrollAreaStyles = getScrollAreaStyles;
|