flexlayout-react 0.8.6 → 0.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/ChangeLog.txt +9 -0
  2. package/README.md +49 -0
  3. package/declarations/Rect.d.ts +2 -0
  4. package/declarations/view/Layout.d.ts +1 -1
  5. package/dist/flexlayout.js +6 -6
  6. package/dist/flexlayout_min.js +1 -1
  7. package/lib/Rect.js +6 -0
  8. package/lib/Rect.js.map +1 -1
  9. package/lib/view/BorderTabSet.js +5 -6
  10. package/lib/view/BorderTabSet.js.map +1 -1
  11. package/lib/view/Layout.js +1 -1
  12. package/lib/view/PopupMenu.js +14 -1
  13. package/lib/view/PopupMenu.js.map +1 -1
  14. package/lib/view/TabOverflowHook.js +55 -52
  15. package/lib/view/TabOverflowHook.js.map +1 -1
  16. package/lib/view/TabSet.js +4 -4
  17. package/lib/view/TabSet.js.map +1 -1
  18. package/package.json +1 -2
  19. package/src/Rect.ts +8 -0
  20. package/src/view/BorderTabSet.tsx +5 -6
  21. package/src/view/Layout.tsx +1 -1
  22. package/src/view/PopupMenu.tsx +18 -0
  23. package/src/view/TabOverflowHook.tsx +63 -60
  24. package/src/view/TabSet.tsx +4 -4
  25. package/style/_base.scss +1 -0
  26. package/style/_themes.scss +3 -6
  27. package/style/combined.css +4 -6
  28. package/style/combined.css.map +1 -1
  29. package/style/dark.css +705 -704
  30. package/style/dark.css.map +1 -1
  31. package/style/gray.css +708 -707
  32. package/style/gray.css.map +1 -1
  33. package/style/light.css +682 -681
  34. package/style/light.css.map +1 -1
  35. package/style/rounded.css +4 -6
  36. package/style/rounded.css.map +1 -1
  37. package/style/underline.css +711 -710
  38. package/style/underline.css.map +1 -1
package/style/underline.css CHANGED
@@ -1,710 +1,711 @@
1
- .flexlayout__layout {
2
- --color-text: black;
3
- --color-background: white;
4
- --color-base: white;
5
- --color-1: rgb(249.9, 249.9, 249.9);
6
- --color-2: rgb(244.8, 244.8, 244.8);
7
- --color-3: rgb(237.15, 237.15, 237.15);
8
- --color-4: rgb(229.5, 229.5, 229.5);
9
- --color-5: rgb(221.85, 221.85, 221.85);
10
- --color-6: rgb(214.2, 214.2, 214.2);
11
- --color-drag1: rgb(95, 134, 196);
12
- --color-drag2: rgb(119, 166, 119);
13
- --color-drag1-background: rgba(95, 134, 196, 0.1);
14
- --color-drag2-background: rgba(119, 166, 119, 0.075);
15
- --font-size: medium;
16
- --font-family: Roboto, Arial, sans-serif;
17
- --color-overflow: gray;
18
- --color-icon: gray;
19
- --color-tabset-background: var(--color-background);
20
- --color-tabset-background-selected: var(--color-1);
21
- --color-tabset-background-maximized: var(--color-6);
22
- --color-tabset-divider-line: var(--color-3);
23
- --color-tabset-header-background: var(--color-background);
24
- --color-tabset-header: var(--color-text);
25
- --color-border-tab-content: var(--color-background);
26
- --color-border-background: var(--color-background);
27
- --color-border-divider-line: var(--color-3);
28
- --color-tab-content: var(--color-background);
29
- --color-tab-selected: var(--color-text);
30
- --color-tab-selected-background: transparent;
31
- --color-tab-unselected: gray;
32
- --color-tab-unselected-background: transparent;
33
- --color-tab-textbox: var(--color-text);
34
- --color-tab-textbox-background: var(--color-3);
35
- --color-border-tab-selected: var(--color-text);
36
- --color-border-tab-selected-background: transparent;
37
- --color-border-tab-unselected: gray;
38
- --color-border-tab-unselected-background: transparent;
39
- --color-splitter: var(--color-1);
40
- --color-splitter-hover: var(--color-4);
41
- --color-splitter-drag: var(--color-4);
42
- --color-drag-rect-border: var(--color-6);
43
- --color-drag-rect-background: var(--color-4);
44
- --color-drag-rect: var(--color-text);
45
- --color-popup-border: var(--color-6);
46
- --color-popup-unselected: var(--color-text);
47
- --color-popup-unselected-background: white;
48
- --color-popup-selected: var(--color-text);
49
- --color-popup-selected-background: var(--color-3);
50
- --color-edge-marker: #aaa;
51
- --color-edge-icon: #555;
52
- --color-underline: rgb(65, 105, 225);
53
- --color-underline-hover: #aaa;
54
- --underline_height: 3px;
55
- --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);
56
- --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
57
- --size-mini-scroll-indicator: 4px;
58
- --color-toolbar-button-hover: var(--color-3);
59
- }
60
-
61
- /*
62
- base classes
63
- */
64
- .flexlayout__layout {
65
- left: 0;
66
- top: 0;
67
- right: 0;
68
- bottom: 0;
69
- position: absolute;
70
- display: flex;
71
- background-color: var(--color-background);
72
- }
73
- .flexlayout__layout_overlay {
74
- left: 0;
75
- top: 0;
76
- right: 0;
77
- bottom: 0;
78
- position: absolute;
79
- z-index: 1000;
80
- }
81
- .flexlayout__layout_tab_stamps {
82
- position: absolute;
83
- top: -10000px;
84
- z-index: 100;
85
- display: flex;
86
- flex-direction: column;
87
- align-items: start;
88
- }
89
- .flexlayout__layout_moveables {
90
- visibility: hidden;
91
- position: absolute;
92
- width: 100px;
93
- height: 100px;
94
- top: -20000px;
95
- }
96
- .flexlayout__layout_main {
97
- display: flex;
98
- flex-basis: 0px;
99
- min-width: 0;
100
- min-height: 0;
101
- flex-grow: 1;
102
- position: relative;
103
- }
104
- .flexlayout__layout_border_container {
105
- display: flex;
106
- flex-basis: 0px;
107
- min-width: 0;
108
- min-height: 0;
109
- flex-grow: 1;
110
- }
111
- .flexlayout__layout_border_container_inner {
112
- display: flex;
113
- flex-basis: 0px;
114
- min-width: 0;
115
- min-height: 0;
116
- flex-grow: 1;
117
- }
118
- .flexlayout__splitter {
119
- display: flex;
120
- align-items: center;
121
- justify-content: center;
122
- background-color: var(--color-splitter);
123
- touch-action: none;
124
- z-index: 10;
125
- }
126
- @media (hover: hover) {
127
- .flexlayout__splitter:hover {
128
- background-color: var(--color-splitter-hover);
129
- transition: background-color ease-in 0.1s;
130
- transition-delay: 0.05s;
131
- }
132
- }
133
- .flexlayout__splitter_drag {
134
- position: absolute;
135
- display: flex;
136
- align-items: center;
137
- justify-content: center;
138
- z-index: 1000;
139
- border-radius: 5px;
140
- background-color: var(--color-splitter-drag);
141
- }
142
- .flexlayout__splitter_handle {
143
- background-color: #ccc;
144
- border-radius: 3px;
145
- }
146
- .flexlayout__splitter_handle_horz {
147
- width: 3px;
148
- height: 30px;
149
- }
150
- .flexlayout__splitter_handle_vert {
151
- width: 30px;
152
- height: 3px;
153
- }
154
- .flexlayout__splitter_extra {
155
- touch-action: none;
156
- background-color: transparent;
157
- }
158
- .flexlayout__outline_rect {
159
- position: absolute;
160
- pointer-events: none;
161
- box-sizing: border-box;
162
- border: 2px solid var(--color-drag1);
163
- background: var(--color-drag1-background);
164
- border-radius: 5px;
165
- z-index: 1000;
166
- }
167
- .flexlayout__outline_rect_edge {
168
- pointer-events: none;
169
- border: 2px solid var(--color-drag2);
170
- background: var(--color-drag2-background);
171
- border-radius: 5px;
172
- z-index: 1000;
173
- box-sizing: border-box;
174
- }
175
- .flexlayout__edge_rect {
176
- position: absolute;
177
- z-index: 1000;
178
- background-color: var(--color-edge-marker);
179
- pointer-events: none;
180
- display: flex;
181
- align-items: center;
182
- justify-content: center;
183
- }
184
- .flexlayout__drag_rect {
185
- color: var(--color-drag-rect);
186
- background-color: var(--color-drag-rect-background);
187
- border: 2px solid var(--color-drag-rect-border);
188
- border-radius: 5px;
189
- box-sizing: border-box;
190
- display: flex;
191
- justify-content: center;
192
- flex-direction: column;
193
- overflow: hidden;
194
- padding: 0.3em 0.8em;
195
- word-wrap: break-word;
196
- font-size: var(--font-size);
197
- font-family: var(--font-family);
198
- }
199
- .flexlayout__row {
200
- display: flex;
201
- flex-basis: 0px;
202
- min-width: 0;
203
- min-height: 0;
204
- position: relative;
205
- box-sizing: border-box;
206
- overflow: hidden;
207
- }
208
- .flexlayout__tabset {
209
- display: flex;
210
- flex-direction: column;
211
- position: relative;
212
- background-color: var(--color-tabset-background);
213
- box-sizing: border-box;
214
- font-family: var(--font-family);
215
- overflow: hidden;
216
- flex-grow: 1;
217
- }
218
- .flexlayout__tabset_container {
219
- display: flex;
220
- flex-basis: 0px;
221
- min-width: 0;
222
- min-height: 0;
223
- flex-direction: column;
224
- overflow: hidden;
225
- flex-grow: 1;
226
- }
227
- .flexlayout__tabset_tab_divider {
228
- width: 4px;
229
- }
230
- .flexlayout__tabset_content {
231
- display: flex;
232
- flex-basis: 0px;
233
- min-width: 0;
234
- min-height: 0;
235
- flex-grow: 1;
236
- box-sizing: border-box;
237
- position: relative;
238
- }
239
- .flexlayout__tabset_header {
240
- display: flex;
241
- align-items: center;
242
- padding: 3px 3px 3px 5px;
243
- box-sizing: border-box;
244
- border-bottom: 1px solid var(--color-tabset-divider-line);
245
- color: var(--color-tabset-header);
246
- background-color: var(--color-tabset-header-background);
247
- font-size: var(--font-size);
248
- }
249
- .flexlayout__tabset_header_content {
250
- flex-grow: 1;
251
- }
252
- .flexlayout__tabset_tabbar_outer {
253
- box-sizing: border-box;
254
- background-color: var(--color-tabset-background);
255
- overflow: hidden;
256
- display: flex;
257
- font-size: var(--font-size);
258
- }
259
- .flexlayout__tabset_tabbar_outer_top {
260
- padding: 0px 2px 0px 2px;
261
- border-bottom: 1px solid var(--color-tabset-divider-line);
262
- }
263
- .flexlayout__tabset_tabbar_outer_bottom {
264
- padding: 0px 2px 0px 2px;
265
- border-top: 1px solid var(--color-tabset-divider-line);
266
- }
267
- .flexlayout__tabset_tabbar_inner {
268
- position: relative;
269
- box-sizing: border-box;
270
- display: flex;
271
- flex-grow: 1;
272
- scrollbar-width: none;
273
- }
274
- .flexlayout__tabset_tabbar_inner::-webkit-scrollbar {
275
- display: none;
276
- }
277
- .flexlayout__tabset_tabbar_inner_tab_container {
278
- position: relative;
279
- display: flex;
280
- padding-left: 4px;
281
- padding-right: 4px;
282
- box-sizing: border-box;
283
- white-space: nowrap;
284
- }
285
- .flexlayout__tabset_tabbar_inner_tab_container_top {
286
- border-top: 2px solid transparent;
287
- }
288
- .flexlayout__tabset_tabbar_inner_tab_container_bottom {
289
- border-bottom: 2px solid transparent;
290
- }
291
- .flexlayout__tabset-selected {
292
- background-color: var(--color-tabset-background-selected);
293
- }
294
- .flexlayout__tabset-maximized {
295
- background-color: var(--color-tabset-background-maximized);
296
- }
297
- .flexlayout__tab_button_stamp {
298
- display: inline-flex;
299
- align-items: center;
300
- gap: 0.3em;
301
- white-space: nowrap;
302
- box-sizing: border-box;
303
- }
304
- .flexlayout__tab {
305
- overflow: hidden;
306
- box-sizing: border-box;
307
- background-color: var(--color-tab-content);
308
- color: var(--color-text);
309
- position: relative;
310
- }
311
- .flexlayout__tab_moveable {
312
- position: relative;
313
- height: 100%;
314
- min-width: 1px;
315
- min-height: 1px;
316
- overflow: auto;
317
- box-sizing: border-box;
318
- }
319
- .flexlayout__tab_overlay {
320
- z-index: 20;
321
- position: absolute;
322
- top: 0;
323
- left: 0;
324
- right: 0;
325
- bottom: 0;
326
- background-color: rgba(0, 0, 0, 0.2392156863);
327
- }
328
- .flexlayout__tab_button {
329
- display: flex;
330
- gap: 0.3em;
331
- align-items: center;
332
- box-sizing: border-box;
333
- padding: 3px 0.5em;
334
- cursor: pointer;
335
- }
336
- .flexlayout__tab_button_stretch {
337
- background-color: transparent;
338
- color: var(--color-tab-selected);
339
- width: 100%;
340
- padding: 3px 0em;
341
- text-wrap: nowrap;
342
- display: flex;
343
- gap: 0.3em;
344
- align-items: center;
345
- box-sizing: border-box;
346
- cursor: pointer;
347
- }
348
- @media (hover: hover) {
349
- .flexlayout__tab_button_stretch:hover {
350
- color: var(--color-tab-selected);
351
- }
352
- }
353
- .flexlayout__tab_button--selected {
354
- background-color: var(--color-tab-selected-background);
355
- color: var(--color-tab-selected);
356
- }
357
- @media (hover: hover) {
358
- .flexlayout__tab_button:hover {
359
- color: var(--color-tab-selected);
360
- }
361
- }
362
- .flexlayout__tab_button--unselected {
363
- background-color: var(--color-tab-unselected-background);
364
- color: var(--color-tab-unselected);
365
- }
366
- .flexlayout__tab_button_leading {
367
- display: flex;
368
- }
369
- .flexlayout__tab_button_content {
370
- display: flex;
371
- text-wrap: nowrap;
372
- }
373
- .flexlayout__tab_button_textbox {
374
- border: none;
375
- font-family: var(--font-family);
376
- font-size: var(--font-size);
377
- color: var(--color-tab-textbox);
378
- background-color: var(--color-tab-textbox-background);
379
- border: 1px inset var(--color-1);
380
- border-radius: 3px;
381
- width: 10em;
382
- }
383
- .flexlayout__tab_button_textbox:focus {
384
- outline: none;
385
- }
386
- .flexlayout__tab_button_trailing {
387
- display: flex;
388
- visibility: hidden;
389
- border-radius: 4px;
390
- }
391
- .flexlayout__tab_button_trailing:hover {
392
- background-color: var(--color-toolbar-button-hover);
393
- }
394
- @media (hover: hover) {
395
- .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
396
- visibility: visible;
397
- }
398
- }
399
- .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
400
- visibility: visible;
401
- }
402
- .flexlayout__tab_button_overflow {
403
- display: flex;
404
- align-items: center;
405
- border: none;
406
- color: var(--color-overflow);
407
- font-size: inherit;
408
- background-color: transparent;
409
- width: 2em;
410
- overflow: hidden;
411
- }
412
- .flexlayout__tab_toolbar {
413
- display: flex;
414
- align-items: center;
415
- gap: 0.3em;
416
- padding-left: 0.5em;
417
- padding-right: 0.3em;
418
- }
419
- .flexlayout__tab_toolbar_icon {
420
- border: none;
421
- outline: none;
422
- font-size: inherit;
423
- margin: 0px;
424
- background-color: transparent;
425
- padding: 1px;
426
- }
427
- .flexlayout__tab_toolbar_button {
428
- border: none;
429
- outline: none;
430
- font-size: inherit;
431
- margin: 0px;
432
- background-color: transparent;
433
- border-radius: 4px;
434
- padding: 1px;
435
- }
436
- @media (hover: hover) {
437
- .flexlayout__tab_toolbar_button:hover {
438
- background-color: var(--color-toolbar-button-hover);
439
- }
440
- }
441
- .flexlayout__tab_toolbar_sticky_buttons_container {
442
- display: flex;
443
- gap: 0.3em;
444
- padding-left: 5px;
445
- align-items: center;
446
- }
447
- .flexlayout__border {
448
- box-sizing: border-box;
449
- overflow: hidden;
450
- display: flex;
451
- font-size: var(--font-size);
452
- font-family: var(--font-family);
453
- color: var(--color-border);
454
- background-color: var(--color-border-background);
455
- }
456
- .flexlayout__border_tab_contents {
457
- box-sizing: border-box;
458
- overflow: hidden;
459
- background-color: var(--color-border-tab-content);
460
- }
461
- .flexlayout__border_top {
462
- border-bottom: 1px solid var(--color-border-divider-line);
463
- align-items: center;
464
- }
465
- .flexlayout__border_bottom {
466
- border-top: 1px solid var(--color-border-divider-line);
467
- align-items: center;
468
- }
469
- .flexlayout__border_left {
470
- border-right: 1px solid var(--color-border-divider-line);
471
- align-content: center;
472
- flex-direction: column;
473
- }
474
- .flexlayout__border_right {
475
- border-left: 1px solid var(--color-border-divider-line);
476
- align-content: center;
477
- flex-direction: column;
478
- }
479
- .flexlayout__border_inner {
480
- position: relative;
481
- box-sizing: border-box;
482
- align-items: center;
483
- display: flex;
484
- flex-grow: 1;
485
- scrollbar-width: none;
486
- }
487
- .flexlayout__border_inner::-webkit-scrollbar {
488
- display: none;
489
- }
490
- .flexlayout__border_inner_tab_container {
491
- white-space: nowrap;
492
- display: flex;
493
- padding-left: 2px;
494
- padding-right: 2px;
495
- box-sizing: border-box;
496
- position: absolute;
497
- }
498
- .flexlayout__border_inner_tab_container_right {
499
- transform-origin: top left;
500
- transform: rotate(90deg);
501
- }
502
- .flexlayout__border_inner_tab_container_left {
503
- flex-direction: row-reverse;
504
- transform-origin: top right;
505
- transform: rotate(-90deg);
506
- }
507
- .flexlayout__border_tab_divider {
508
- width: 4px;
509
- }
510
- .flexlayout__border_button {
511
- display: flex;
512
- gap: 0.3em;
513
- align-items: center;
514
- cursor: pointer;
515
- padding: 3px 0.5em;
516
- margin: 2px 0px;
517
- box-sizing: border-box;
518
- white-space: nowrap;
519
- }
520
- .flexlayout__border_button--selected {
521
- background-color: var(--color-border-tab-selected-background);
522
- color: var(--color-border-tab-selected);
523
- }
524
- @media (hover: hover) {
525
- .flexlayout__border_button:hover {
526
- color: var(--color-border-tab-selected);
527
- }
528
- }
529
- .flexlayout__border_button--unselected {
530
- background-color: var(--color-border-tab-unselected-background);
531
- color: var(--color-border-tab-unselected);
532
- }
533
- .flexlayout__border_button_leading {
534
- display: flex;
535
- }
536
- .flexlayout__border_button_content {
537
- display: flex;
538
- }
539
- .flexlayout__border_button_trailing {
540
- display: flex;
541
- border-radius: 4px;
542
- visibility: hidden;
543
- }
544
- @media (hover: hover) {
545
- .flexlayout__border_button:hover .flexlayout__border_button_trailing {
546
- visibility: visible;
547
- }
548
- }
549
- .flexlayout__border_button--selected .flexlayout__border_button_trailing {
550
- visibility: visible;
551
- }
552
- .flexlayout__border_toolbar {
553
- display: flex;
554
- gap: 0.3em;
555
- align-items: center;
556
- }
557
- .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
558
- flex-direction: column;
559
- padding-top: 0.5em;
560
- padding-bottom: 0.3em;
561
- }
562
- .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
563
- padding-left: 0.5em;
564
- padding-right: 0.3em;
565
- }
566
- .flexlayout__border_toolbar_button {
567
- border: none;
568
- outline: none;
569
- font-size: inherit;
570
- background-color: transparent;
571
- border-radius: 4px;
572
- padding: 1px;
573
- }
574
- @media (hover: hover) {
575
- .flexlayout__border_toolbar_button:hover {
576
- background-color: var(--color-toolbar-button-hover);
577
- }
578
- }
579
- .flexlayout__border_toolbar_button_overflow {
580
- display: flex;
581
- align-items: center;
582
- border: none;
583
- color: var(--color-overflow);
584
- font-size: inherit;
585
- background-color: transparent;
586
- width: 1.5em;
587
- }
588
- .flexlayout__popup_menu {
589
- font-size: var(--font-size);
590
- font-family: var(--font-family);
591
- }
592
- .flexlayout__popup_menu_item {
593
- padding: 2px 0.5em;
594
- white-space: nowrap;
595
- cursor: pointer;
596
- border-radius: 2px;
597
- }
598
- .flexlayout__popup_menu_item--selected {
599
- font-weight: 500;
600
- background-color: var(--color-tab-selected-background);
601
- color: var(--color-tab-selected);
602
- }
603
- @media (hover: hover) {
604
- .flexlayout__popup_menu_item:hover {
605
- background-color: var(--color-6);
606
- }
607
- }
608
- .flexlayout__popup_menu_container {
609
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
610
- border: 1px solid var(--color-popup-border);
611
- color: var(--color-popup-unselected);
612
- background: var(--color-popup-unselected-background);
613
- border-radius: 3px;
614
- position: absolute;
615
- z-index: 1000;
616
- max-height: 50%;
617
- min-width: 100px;
618
- overflow: auto;
619
- padding: 2px;
620
- }
621
- .flexlayout__floating_window _body {
622
- height: 100%;
623
- }
624
- .flexlayout__floating_window_content {
625
- left: 0;
626
- top: 0;
627
- right: 0;
628
- bottom: 0;
629
- position: absolute;
630
- }
631
- .flexlayout__error_boundary_container {
632
- left: 0;
633
- top: 0;
634
- right: 0;
635
- bottom: 0;
636
- position: absolute;
637
- display: flex;
638
- justify-content: center;
639
- }
640
- .flexlayout__error_boundary_content {
641
- display: flex;
642
- align-items: center;
643
- }
644
- .flexlayout__border_sizer {
645
- position: absolute;
646
- top: -30000px;
647
- padding-top: 6px;
648
- padding-bottom: 5px;
649
- font-size: var(--font-size);
650
- font-family: var(--font-family);
651
- }
652
- .flexlayout__mini_scrollbar {
653
- position: absolute;
654
- background-color: var(--color-mini-scroll-indicator);
655
- border-radius: 5px;
656
- width: var(--size-mini-scroll-indicator);
657
- height: var(--size-mini-scroll-indicator);
658
- visibility: hidden;
659
- opacity: 0;
660
- transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
661
- }
662
- .flexlayout__mini_scrollbar:hover {
663
- background-color: var(--color-mini-scroll-indicator-hovered);
664
- transition: background-color 0.3s ease-in-out;
665
- }
666
- .flexlayout__mini_scrollbar_container {
667
- position: relative;
668
- display: flex;
669
- flex-grow: 1;
670
- overflow: hidden;
671
- }
672
- @media (hover: hover) {
673
- .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {
674
- opacity: 1;
675
- visibility: visible;
676
- }
677
- }
678
-
679
- /* ======================== End of Base Classes =========================== */
680
- /*
681
- underline theme overrides
682
- */
683
- .flexlayout__tab_button {
684
- padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
685
- }
686
- .flexlayout__tab_button--selected {
687
- border-bottom: var(--underline_height) solid var(--color-underline);
688
- }
689
- .flexlayout__tab_button--unselected {
690
- border-bottom: var(--underline_height) solid transparent;
691
- }
692
- .flexlayout__border_button {
693
- padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
694
- }
695
- .flexlayout__border_button--selected {
696
- border-bottom: var(--underline_height) solid var(--color-underline);
697
- }
698
- .flexlayout__border_button--unselected {
699
- border-bottom: var(--underline_height) solid transparent;
700
- }
701
- .flexlayout__tabset_tab_divider, .flexlayout__border_tab_divider {
702
- width: 1px;
703
- margin: 4px 6px 4px 6px;
704
- border-left: 1px solid #ddd;
705
- }
706
- .flexlayout__tab_button_textbox {
707
- border: none;
708
- }
709
-
710
- /*# sourceMappingURL=underline.css.map */
1
+ .flexlayout__layout {
2
+ --color-text: black;
3
+ --color-background: white;
4
+ --color-base: white;
5
+ --color-1: rgb(249.9, 249.9, 249.9);
6
+ --color-2: rgb(244.8, 244.8, 244.8);
7
+ --color-3: rgb(237.15, 237.15, 237.15);
8
+ --color-4: rgb(229.5, 229.5, 229.5);
9
+ --color-5: rgb(221.85, 221.85, 221.85);
10
+ --color-6: rgb(214.2, 214.2, 214.2);
11
+ --color-drag1: rgb(95, 134, 196);
12
+ --color-drag2: rgb(119, 166, 119);
13
+ --color-drag1-background: rgba(95, 134, 196, 0.1);
14
+ --color-drag2-background: rgba(119, 166, 119, 0.075);
15
+ --font-size: medium;
16
+ --font-family: Roboto, Arial, sans-serif;
17
+ --color-overflow: gray;
18
+ --color-icon: gray;
19
+ --color-tabset-background: var(--color-background);
20
+ --color-tabset-background-selected: var(--color-1);
21
+ --color-tabset-background-maximized: var(--color-6);
22
+ --color-tabset-divider-line: var(--color-3);
23
+ --color-tabset-header-background: var(--color-background);
24
+ --color-tabset-header: var(--color-text);
25
+ --color-border-tab-content: var(--color-background);
26
+ --color-border-background: var(--color-background);
27
+ --color-border-divider-line: var(--color-3);
28
+ --color-tab-content: var(--color-background);
29
+ --color-tab-selected: var(--color-text);
30
+ --color-tab-selected-background: transparent;
31
+ --color-tab-unselected: gray;
32
+ --color-tab-unselected-background: transparent;
33
+ --color-tab-textbox: var(--color-text);
34
+ --color-tab-textbox-background: var(--color-3);
35
+ --color-border-tab-selected: var(--color-text);
36
+ --color-border-tab-selected-background: transparent;
37
+ --color-border-tab-unselected: gray;
38
+ --color-border-tab-unselected-background: transparent;
39
+ --color-splitter: var(--color-1);
40
+ --color-splitter-hover: var(--color-4);
41
+ --color-splitter-drag: var(--color-4);
42
+ --color-drag-rect-border: var(--color-6);
43
+ --color-drag-rect-background: var(--color-4);
44
+ --color-drag-rect: var(--color-text);
45
+ --color-popup-border: var(--color-6);
46
+ --color-popup-unselected: var(--color-text);
47
+ --color-popup-unselected-background: white;
48
+ --color-popup-selected: var(--color-text);
49
+ --color-popup-selected-background: var(--color-3);
50
+ --color-edge-marker: #aaa;
51
+ --color-edge-icon: #555;
52
+ --color-underline: rgb(65, 105, 225);
53
+ --color-underline-hover: #aaa;
54
+ --underline_height: 3px;
55
+ --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);
56
+ --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
57
+ --size-mini-scroll-indicator: 4px;
58
+ --color-toolbar-button-hover: var(--color-3);
59
+ }
60
+
61
+ /*
62
+ base classes
63
+ */
64
+ .flexlayout__layout {
65
+ left: 0;
66
+ top: 0;
67
+ right: 0;
68
+ bottom: 0;
69
+ position: absolute;
70
+ display: flex;
71
+ background-color: var(--color-background);
72
+ }
73
+ .flexlayout__layout_overlay {
74
+ left: 0;
75
+ top: 0;
76
+ right: 0;
77
+ bottom: 0;
78
+ position: absolute;
79
+ z-index: 1000;
80
+ }
81
+ .flexlayout__layout_tab_stamps {
82
+ position: absolute;
83
+ top: -10000px;
84
+ z-index: 100;
85
+ display: flex;
86
+ flex-direction: column;
87
+ align-items: start;
88
+ }
89
+ .flexlayout__layout_moveables {
90
+ visibility: hidden;
91
+ position: absolute;
92
+ width: 100px;
93
+ height: 100px;
94
+ top: -20000px;
95
+ }
96
+ .flexlayout__layout_main {
97
+ display: flex;
98
+ flex-basis: 0px;
99
+ min-width: 0;
100
+ min-height: 0;
101
+ flex-grow: 1;
102
+ position: relative;
103
+ }
104
+ .flexlayout__layout_border_container {
105
+ display: flex;
106
+ flex-basis: 0px;
107
+ min-width: 0;
108
+ min-height: 0;
109
+ flex-grow: 1;
110
+ }
111
+ .flexlayout__layout_border_container_inner {
112
+ display: flex;
113
+ flex-basis: 0px;
114
+ min-width: 0;
115
+ min-height: 0;
116
+ flex-grow: 1;
117
+ }
118
+ .flexlayout__splitter {
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ background-color: var(--color-splitter);
123
+ touch-action: none;
124
+ z-index: 10;
125
+ }
126
+ @media (hover: hover) {
127
+ .flexlayout__splitter:hover {
128
+ background-color: var(--color-splitter-hover);
129
+ transition: background-color ease-in 0.1s;
130
+ transition-delay: 0.05s;
131
+ border-radius: 5px;
132
+ }
133
+ }
134
+ .flexlayout__splitter_drag {
135
+ position: absolute;
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: center;
139
+ z-index: 1000;
140
+ border-radius: 5px;
141
+ background-color: var(--color-splitter-drag);
142
+ }
143
+ .flexlayout__splitter_handle {
144
+ background-color: #ccc;
145
+ border-radius: 3px;
146
+ }
147
+ .flexlayout__splitter_handle_horz {
148
+ width: 3px;
149
+ height: 30px;
150
+ }
151
+ .flexlayout__splitter_handle_vert {
152
+ width: 30px;
153
+ height: 3px;
154
+ }
155
+ .flexlayout__splitter_extra {
156
+ touch-action: none;
157
+ background-color: transparent;
158
+ }
159
+ .flexlayout__outline_rect {
160
+ position: absolute;
161
+ pointer-events: none;
162
+ box-sizing: border-box;
163
+ border: 2px solid var(--color-drag1);
164
+ background: var(--color-drag1-background);
165
+ border-radius: 5px;
166
+ z-index: 1000;
167
+ }
168
+ .flexlayout__outline_rect_edge {
169
+ pointer-events: none;
170
+ border: 2px solid var(--color-drag2);
171
+ background: var(--color-drag2-background);
172
+ border-radius: 5px;
173
+ z-index: 1000;
174
+ box-sizing: border-box;
175
+ }
176
+ .flexlayout__edge_rect {
177
+ position: absolute;
178
+ z-index: 1000;
179
+ background-color: var(--color-edge-marker);
180
+ pointer-events: none;
181
+ display: flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ }
185
+ .flexlayout__drag_rect {
186
+ color: var(--color-drag-rect);
187
+ background-color: var(--color-drag-rect-background);
188
+ border: 2px solid var(--color-drag-rect-border);
189
+ border-radius: 5px;
190
+ box-sizing: border-box;
191
+ display: flex;
192
+ justify-content: center;
193
+ flex-direction: column;
194
+ overflow: hidden;
195
+ padding: 0.3em 0.8em;
196
+ word-wrap: break-word;
197
+ font-size: var(--font-size);
198
+ font-family: var(--font-family);
199
+ }
200
+ .flexlayout__row {
201
+ display: flex;
202
+ flex-basis: 0px;
203
+ min-width: 0;
204
+ min-height: 0;
205
+ position: relative;
206
+ box-sizing: border-box;
207
+ overflow: hidden;
208
+ }
209
+ .flexlayout__tabset {
210
+ display: flex;
211
+ flex-direction: column;
212
+ position: relative;
213
+ background-color: var(--color-tabset-background);
214
+ box-sizing: border-box;
215
+ font-family: var(--font-family);
216
+ overflow: hidden;
217
+ flex-grow: 1;
218
+ }
219
+ .flexlayout__tabset_container {
220
+ display: flex;
221
+ flex-basis: 0px;
222
+ min-width: 0;
223
+ min-height: 0;
224
+ flex-direction: column;
225
+ overflow: hidden;
226
+ flex-grow: 1;
227
+ }
228
+ .flexlayout__tabset_tab_divider {
229
+ width: 4px;
230
+ }
231
+ .flexlayout__tabset_content {
232
+ display: flex;
233
+ flex-basis: 0px;
234
+ min-width: 0;
235
+ min-height: 0;
236
+ flex-grow: 1;
237
+ box-sizing: border-box;
238
+ position: relative;
239
+ }
240
+ .flexlayout__tabset_header {
241
+ display: flex;
242
+ align-items: center;
243
+ padding: 3px 3px 3px 5px;
244
+ box-sizing: border-box;
245
+ border-bottom: 1px solid var(--color-tabset-divider-line);
246
+ color: var(--color-tabset-header);
247
+ background-color: var(--color-tabset-header-background);
248
+ font-size: var(--font-size);
249
+ }
250
+ .flexlayout__tabset_header_content {
251
+ flex-grow: 1;
252
+ }
253
+ .flexlayout__tabset_tabbar_outer {
254
+ box-sizing: border-box;
255
+ background-color: var(--color-tabset-background);
256
+ overflow: hidden;
257
+ display: flex;
258
+ font-size: var(--font-size);
259
+ }
260
+ .flexlayout__tabset_tabbar_outer_top {
261
+ padding: 0px 2px 0px 2px;
262
+ border-bottom: 1px solid var(--color-tabset-divider-line);
263
+ }
264
+ .flexlayout__tabset_tabbar_outer_bottom {
265
+ padding: 0px 2px 0px 2px;
266
+ border-top: 1px solid var(--color-tabset-divider-line);
267
+ }
268
+ .flexlayout__tabset_tabbar_inner {
269
+ position: relative;
270
+ box-sizing: border-box;
271
+ display: flex;
272
+ flex-grow: 1;
273
+ scrollbar-width: none;
274
+ }
275
+ .flexlayout__tabset_tabbar_inner::-webkit-scrollbar {
276
+ display: none;
277
+ }
278
+ .flexlayout__tabset_tabbar_inner_tab_container {
279
+ position: relative;
280
+ display: flex;
281
+ padding-left: 4px;
282
+ padding-right: 4px;
283
+ box-sizing: border-box;
284
+ white-space: nowrap;
285
+ }
286
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
287
+ border-top: 2px solid transparent;
288
+ }
289
+ .flexlayout__tabset_tabbar_inner_tab_container_bottom {
290
+ border-bottom: 2px solid transparent;
291
+ }
292
+ .flexlayout__tabset-selected {
293
+ background-color: var(--color-tabset-background-selected);
294
+ }
295
+ .flexlayout__tabset-maximized {
296
+ background-color: var(--color-tabset-background-maximized);
297
+ }
298
+ .flexlayout__tab_button_stamp {
299
+ display: inline-flex;
300
+ align-items: center;
301
+ gap: 0.3em;
302
+ white-space: nowrap;
303
+ box-sizing: border-box;
304
+ }
305
+ .flexlayout__tab {
306
+ overflow: hidden;
307
+ box-sizing: border-box;
308
+ background-color: var(--color-tab-content);
309
+ color: var(--color-text);
310
+ position: relative;
311
+ }
312
+ .flexlayout__tab_moveable {
313
+ position: relative;
314
+ height: 100%;
315
+ min-width: 1px;
316
+ min-height: 1px;
317
+ overflow: auto;
318
+ box-sizing: border-box;
319
+ }
320
+ .flexlayout__tab_overlay {
321
+ z-index: 20;
322
+ position: absolute;
323
+ top: 0;
324
+ left: 0;
325
+ right: 0;
326
+ bottom: 0;
327
+ background-color: rgba(0, 0, 0, 0.2392156863);
328
+ }
329
+ .flexlayout__tab_button {
330
+ display: flex;
331
+ gap: 0.3em;
332
+ align-items: center;
333
+ box-sizing: border-box;
334
+ padding: 3px 0.5em;
335
+ cursor: pointer;
336
+ }
337
+ .flexlayout__tab_button_stretch {
338
+ background-color: transparent;
339
+ color: var(--color-tab-selected);
340
+ width: 100%;
341
+ padding: 3px 0em;
342
+ text-wrap: nowrap;
343
+ display: flex;
344
+ gap: 0.3em;
345
+ align-items: center;
346
+ box-sizing: border-box;
347
+ cursor: pointer;
348
+ }
349
+ @media (hover: hover) {
350
+ .flexlayout__tab_button_stretch:hover {
351
+ color: var(--color-tab-selected);
352
+ }
353
+ }
354
+ .flexlayout__tab_button--selected {
355
+ background-color: var(--color-tab-selected-background);
356
+ color: var(--color-tab-selected);
357
+ }
358
+ @media (hover: hover) {
359
+ .flexlayout__tab_button:hover {
360
+ color: var(--color-tab-selected);
361
+ }
362
+ }
363
+ .flexlayout__tab_button--unselected {
364
+ background-color: var(--color-tab-unselected-background);
365
+ color: var(--color-tab-unselected);
366
+ }
367
+ .flexlayout__tab_button_leading {
368
+ display: flex;
369
+ }
370
+ .flexlayout__tab_button_content {
371
+ display: flex;
372
+ text-wrap: nowrap;
373
+ }
374
+ .flexlayout__tab_button_textbox {
375
+ border: none;
376
+ font-family: var(--font-family);
377
+ font-size: var(--font-size);
378
+ color: var(--color-tab-textbox);
379
+ background-color: var(--color-tab-textbox-background);
380
+ border: 1px inset var(--color-1);
381
+ border-radius: 3px;
382
+ width: 10em;
383
+ }
384
+ .flexlayout__tab_button_textbox:focus {
385
+ outline: none;
386
+ }
387
+ .flexlayout__tab_button_trailing {
388
+ display: flex;
389
+ visibility: hidden;
390
+ border-radius: 4px;
391
+ }
392
+ .flexlayout__tab_button_trailing:hover {
393
+ background-color: var(--color-toolbar-button-hover);
394
+ }
395
+ @media (hover: hover) {
396
+ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
397
+ visibility: visible;
398
+ }
399
+ }
400
+ .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
401
+ visibility: visible;
402
+ }
403
+ .flexlayout__tab_button_overflow {
404
+ display: flex;
405
+ align-items: center;
406
+ border: none;
407
+ color: var(--color-overflow);
408
+ font-size: inherit;
409
+ background-color: transparent;
410
+ width: 2em;
411
+ overflow: hidden;
412
+ }
413
+ .flexlayout__tab_toolbar {
414
+ display: flex;
415
+ align-items: center;
416
+ gap: 0.3em;
417
+ padding-left: 0.5em;
418
+ padding-right: 0.3em;
419
+ }
420
+ .flexlayout__tab_toolbar_icon {
421
+ border: none;
422
+ outline: none;
423
+ font-size: inherit;
424
+ margin: 0px;
425
+ background-color: transparent;
426
+ padding: 1px;
427
+ }
428
+ .flexlayout__tab_toolbar_button {
429
+ border: none;
430
+ outline: none;
431
+ font-size: inherit;
432
+ margin: 0px;
433
+ background-color: transparent;
434
+ border-radius: 4px;
435
+ padding: 1px;
436
+ }
437
+ @media (hover: hover) {
438
+ .flexlayout__tab_toolbar_button:hover {
439
+ background-color: var(--color-toolbar-button-hover);
440
+ }
441
+ }
442
+ .flexlayout__tab_toolbar_sticky_buttons_container {
443
+ display: flex;
444
+ gap: 0.3em;
445
+ padding-left: 5px;
446
+ align-items: center;
447
+ }
448
+ .flexlayout__border {
449
+ box-sizing: border-box;
450
+ overflow: hidden;
451
+ display: flex;
452
+ font-size: var(--font-size);
453
+ font-family: var(--font-family);
454
+ color: var(--color-border);
455
+ background-color: var(--color-border-background);
456
+ }
457
+ .flexlayout__border_tab_contents {
458
+ box-sizing: border-box;
459
+ overflow: hidden;
460
+ background-color: var(--color-border-tab-content);
461
+ }
462
+ .flexlayout__border_top {
463
+ border-bottom: 1px solid var(--color-border-divider-line);
464
+ align-items: center;
465
+ }
466
+ .flexlayout__border_bottom {
467
+ border-top: 1px solid var(--color-border-divider-line);
468
+ align-items: center;
469
+ }
470
+ .flexlayout__border_left {
471
+ border-right: 1px solid var(--color-border-divider-line);
472
+ align-content: center;
473
+ flex-direction: column;
474
+ }
475
+ .flexlayout__border_right {
476
+ border-left: 1px solid var(--color-border-divider-line);
477
+ align-content: center;
478
+ flex-direction: column;
479
+ }
480
+ .flexlayout__border_inner {
481
+ position: relative;
482
+ box-sizing: border-box;
483
+ align-items: center;
484
+ display: flex;
485
+ flex-grow: 1;
486
+ scrollbar-width: none;
487
+ }
488
+ .flexlayout__border_inner::-webkit-scrollbar {
489
+ display: none;
490
+ }
491
+ .flexlayout__border_inner_tab_container {
492
+ white-space: nowrap;
493
+ display: flex;
494
+ padding-left: 2px;
495
+ padding-right: 2px;
496
+ box-sizing: border-box;
497
+ position: absolute;
498
+ }
499
+ .flexlayout__border_inner_tab_container_right {
500
+ transform-origin: top left;
501
+ transform: rotate(90deg);
502
+ }
503
+ .flexlayout__border_inner_tab_container_left {
504
+ flex-direction: row-reverse;
505
+ transform-origin: top right;
506
+ transform: rotate(-90deg);
507
+ }
508
+ .flexlayout__border_tab_divider {
509
+ width: 4px;
510
+ }
511
+ .flexlayout__border_button {
512
+ display: flex;
513
+ gap: 0.3em;
514
+ align-items: center;
515
+ cursor: pointer;
516
+ padding: 3px 0.5em;
517
+ margin: 2px 0px;
518
+ box-sizing: border-box;
519
+ white-space: nowrap;
520
+ }
521
+ .flexlayout__border_button--selected {
522
+ background-color: var(--color-border-tab-selected-background);
523
+ color: var(--color-border-tab-selected);
524
+ }
525
+ @media (hover: hover) {
526
+ .flexlayout__border_button:hover {
527
+ color: var(--color-border-tab-selected);
528
+ }
529
+ }
530
+ .flexlayout__border_button--unselected {
531
+ background-color: var(--color-border-tab-unselected-background);
532
+ color: var(--color-border-tab-unselected);
533
+ }
534
+ .flexlayout__border_button_leading {
535
+ display: flex;
536
+ }
537
+ .flexlayout__border_button_content {
538
+ display: flex;
539
+ }
540
+ .flexlayout__border_button_trailing {
541
+ display: flex;
542
+ border-radius: 4px;
543
+ visibility: hidden;
544
+ }
545
+ @media (hover: hover) {
546
+ .flexlayout__border_button:hover .flexlayout__border_button_trailing {
547
+ visibility: visible;
548
+ }
549
+ }
550
+ .flexlayout__border_button--selected .flexlayout__border_button_trailing {
551
+ visibility: visible;
552
+ }
553
+ .flexlayout__border_toolbar {
554
+ display: flex;
555
+ gap: 0.3em;
556
+ align-items: center;
557
+ }
558
+ .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
559
+ flex-direction: column;
560
+ padding-top: 0.5em;
561
+ padding-bottom: 0.3em;
562
+ }
563
+ .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
564
+ padding-left: 0.5em;
565
+ padding-right: 0.3em;
566
+ }
567
+ .flexlayout__border_toolbar_button {
568
+ border: none;
569
+ outline: none;
570
+ font-size: inherit;
571
+ background-color: transparent;
572
+ border-radius: 4px;
573
+ padding: 1px;
574
+ }
575
+ @media (hover: hover) {
576
+ .flexlayout__border_toolbar_button:hover {
577
+ background-color: var(--color-toolbar-button-hover);
578
+ }
579
+ }
580
+ .flexlayout__border_toolbar_button_overflow {
581
+ display: flex;
582
+ align-items: center;
583
+ border: none;
584
+ color: var(--color-overflow);
585
+ font-size: inherit;
586
+ background-color: transparent;
587
+ width: 1.5em;
588
+ }
589
+ .flexlayout__popup_menu {
590
+ font-size: var(--font-size);
591
+ font-family: var(--font-family);
592
+ }
593
+ .flexlayout__popup_menu_item {
594
+ padding: 2px 0.5em;
595
+ white-space: nowrap;
596
+ cursor: pointer;
597
+ border-radius: 2px;
598
+ }
599
+ .flexlayout__popup_menu_item--selected {
600
+ font-weight: 500;
601
+ background-color: var(--color-tab-selected-background);
602
+ color: var(--color-tab-selected);
603
+ }
604
+ @media (hover: hover) {
605
+ .flexlayout__popup_menu_item:hover {
606
+ background-color: var(--color-6);
607
+ }
608
+ }
609
+ .flexlayout__popup_menu_container {
610
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
611
+ border: 1px solid var(--color-popup-border);
612
+ color: var(--color-popup-unselected);
613
+ background: var(--color-popup-unselected-background);
614
+ border-radius: 3px;
615
+ position: absolute;
616
+ z-index: 1000;
617
+ max-height: 50%;
618
+ min-width: 100px;
619
+ overflow: auto;
620
+ padding: 2px;
621
+ }
622
+ .flexlayout__floating_window _body {
623
+ height: 100%;
624
+ }
625
+ .flexlayout__floating_window_content {
626
+ left: 0;
627
+ top: 0;
628
+ right: 0;
629
+ bottom: 0;
630
+ position: absolute;
631
+ }
632
+ .flexlayout__error_boundary_container {
633
+ left: 0;
634
+ top: 0;
635
+ right: 0;
636
+ bottom: 0;
637
+ position: absolute;
638
+ display: flex;
639
+ justify-content: center;
640
+ }
641
+ .flexlayout__error_boundary_content {
642
+ display: flex;
643
+ align-items: center;
644
+ }
645
+ .flexlayout__border_sizer {
646
+ position: absolute;
647
+ top: -30000px;
648
+ padding-top: 6px;
649
+ padding-bottom: 5px;
650
+ font-size: var(--font-size);
651
+ font-family: var(--font-family);
652
+ }
653
+ .flexlayout__mini_scrollbar {
654
+ position: absolute;
655
+ background-color: var(--color-mini-scroll-indicator);
656
+ border-radius: 5px;
657
+ width: var(--size-mini-scroll-indicator);
658
+ height: var(--size-mini-scroll-indicator);
659
+ visibility: hidden;
660
+ opacity: 0;
661
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
662
+ }
663
+ .flexlayout__mini_scrollbar:hover {
664
+ background-color: var(--color-mini-scroll-indicator-hovered);
665
+ transition: background-color 0.3s ease-in-out;
666
+ }
667
+ .flexlayout__mini_scrollbar_container {
668
+ position: relative;
669
+ display: flex;
670
+ flex-grow: 1;
671
+ overflow: hidden;
672
+ }
673
+ @media (hover: hover) {
674
+ .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {
675
+ opacity: 1;
676
+ visibility: visible;
677
+ }
678
+ }
679
+
680
+ /* ======================== End of Base Classes =========================== */
681
+ /*
682
+ underline theme overrides
683
+ */
684
+ .flexlayout__tab_button {
685
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
686
+ }
687
+ .flexlayout__tab_button--selected {
688
+ border-bottom: var(--underline_height) solid var(--color-underline);
689
+ }
690
+ .flexlayout__tab_button--unselected {
691
+ border-bottom: var(--underline_height) solid transparent;
692
+ }
693
+ .flexlayout__border_button {
694
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
695
+ }
696
+ .flexlayout__border_button--selected {
697
+ border-bottom: var(--underline_height) solid var(--color-underline);
698
+ }
699
+ .flexlayout__border_button--unselected {
700
+ border-bottom: var(--underline_height) solid transparent;
701
+ }
702
+ .flexlayout__tabset_tab_divider, .flexlayout__border_tab_divider {
703
+ width: 1px;
704
+ margin: 4px 6px 4px 6px;
705
+ border-left: 1px solid #ddd;
706
+ }
707
+ .flexlayout__tab_button_textbox {
708
+ border: none;
709
+ }
710
+
711
+ /*# sourceMappingURL=underline.css.map */