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