flexlayout-react 0.8.3 → 0.8.5

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 (54) hide show
  1. package/ChangeLog.txt +8 -0
  2. package/declarations/Types.d.ts +4 -1
  3. package/declarations/model/BorderNode.d.ts +1 -0
  4. package/declarations/model/IJsonModel.d.ts +29 -1
  5. package/declarations/model/TabSetNode.d.ts +1 -0
  6. package/declarations/view/Layout.d.ts +1 -1
  7. package/dist/flexlayout.js +10 -10
  8. package/dist/flexlayout_min.js +1 -1
  9. package/lib/Types.js +3 -0
  10. package/lib/Types.js.map +1 -1
  11. package/lib/model/BorderNode.js +4 -0
  12. package/lib/model/BorderNode.js.map +1 -1
  13. package/lib/model/Model.js +2 -0
  14. package/lib/model/Model.js.map +1 -1
  15. package/lib/model/TabSetNode.js +4 -0
  16. package/lib/model/TabSetNode.js.map +1 -1
  17. package/lib/view/BorderTabSet.js +24 -14
  18. package/lib/view/BorderTabSet.js.map +1 -1
  19. package/lib/view/Layout.js +1 -1
  20. package/lib/view/PopupMenu.js +11 -5
  21. package/lib/view/PopupMenu.js.map +1 -1
  22. package/lib/view/Splitter.js +2 -2
  23. package/lib/view/TabOverflowHook.js +226 -116
  24. package/lib/view/TabOverflowHook.js.map +1 -1
  25. package/lib/view/TabSet.js +20 -20
  26. package/lib/view/TabSet.js.map +1 -1
  27. package/package.json +1 -1
  28. package/src/Types.ts +5 -1
  29. package/src/model/BorderNode.ts +7 -0
  30. package/src/model/IJsonModel.ts +33 -1
  31. package/src/model/Model.ts +2 -0
  32. package/src/model/TabSetNode.ts +9 -0
  33. package/src/view/BorderTabSet.tsx +48 -23
  34. package/src/view/Layout.tsx +1 -1
  35. package/src/view/PopupMenu.tsx +31 -19
  36. package/src/view/Splitter.tsx +2 -2
  37. package/src/view/TabOverflowHook.tsx +256 -128
  38. package/src/view/TabSet.tsx +43 -31
  39. package/style/_base.scss +53 -5
  40. package/style/dark.css +46 -4
  41. package/style/dark.css.map +1 -1
  42. package/style/dark.scss +4 -0
  43. package/style/gray.css +48 -6
  44. package/style/gray.css.map +1 -1
  45. package/style/gray.scss +6 -2
  46. package/style/light.css +47 -5
  47. package/style/light.css.map +1 -1
  48. package/style/light.scss +5 -1
  49. package/style/rounded.css +69 -10
  50. package/style/rounded.css.map +1 -1
  51. package/style/rounded.scss +28 -6
  52. package/style/underline.css +46 -5
  53. package/style/underline.css.map +1 -1
  54. package/style/underline.scss +5 -1
package/style/rounded.css CHANGED
@@ -18,7 +18,7 @@
18
18
  --color-icon: #999db2;
19
19
  --color-tabset-background: white;
20
20
  --color-tabset-background-selected: white;
21
- --color-tabset-background-maximized: var(--color-2);
21
+ --color-tabset-background-maximized: white;
22
22
  --color-tabset-divider-line: white;
23
23
  --color-tabset-header-background: var(--color-background);
24
24
  --color-tabset-header: var(--color-text);
@@ -29,7 +29,7 @@
29
29
  --color-tab-selected: var(--color-text);
30
30
  --color-tab-selected-background: var(--color-2);
31
31
  --color-tab-unselected: gray;
32
- --color-tab-unselected-background: transparent;
32
+ --color-tab-unselected-background: #d3d4e745;
33
33
  --color-tab-textbox: var(--color-text);
34
34
  --color-tab-textbox-background: var(--color-3);
35
35
  --color-border-tab-selected: var(--color-text);
@@ -49,6 +49,9 @@
49
49
  --color-popup-selected-background: var(--color-3);
50
50
  --color-edge-marker: #a6bbdf;
51
51
  --color-edge-icon: #555;
52
+ --color-mini-scroll-indicator:rgba(180, 200, 230, 0.5);
53
+ --color-mini-scroll-indicator-hovered:rgba(180, 200, 230, 0.7);
54
+ --size-mini-scroll-indicator:4px;
52
55
  }
53
56
 
54
57
  .flexlayout__layout {
@@ -258,7 +261,10 @@
258
261
  box-sizing: border-box;
259
262
  display: flex;
260
263
  flex-grow: 1;
261
- overflow: hidden;
264
+ scrollbar-width: none;
265
+ }
266
+ .flexlayout__tabset_tabbar_inner::-webkit-scrollbar {
267
+ display: none;
262
268
  }
263
269
  .flexlayout__tabset_tabbar_inner_tab_container {
264
270
  position: relative;
@@ -319,7 +325,7 @@
319
325
  padding: 3px 0.5em;
320
326
  cursor: pointer;
321
327
  border-radius: 10px;
322
- padding: 2px 0.6em;
328
+ padding: 2px 0.8em;
323
329
  }
324
330
  .flexlayout__tab_button_stretch {
325
331
  background-color: transparent;
@@ -344,7 +350,6 @@
344
350
  }
345
351
  @media (hover: hover) {
346
352
  .flexlayout__tab_button:hover {
347
- background-color: var(--color-tab-selected-background);
348
353
  color: var(--color-tab-selected);
349
354
  }
350
355
  }
@@ -396,6 +401,8 @@
396
401
  color: var(--color-overflow);
397
402
  font-size: inherit;
398
403
  background-color: transparent;
404
+ width: 2em;
405
+ overflow: hidden;
399
406
  }
400
407
  .flexlayout__tab_toolbar {
401
408
  display: flex;
@@ -491,9 +498,13 @@
491
498
  .flexlayout__border_inner {
492
499
  position: relative;
493
500
  box-sizing: border-box;
501
+ align-items: center;
494
502
  display: flex;
495
- overflow: hidden;
496
503
  flex-grow: 1;
504
+ scrollbar-width: none;
505
+ }
506
+ .flexlayout__border_inner::-webkit-scrollbar {
507
+ display: none;
497
508
  }
498
509
  .flexlayout__border_inner_tab_container {
499
510
  white-space: nowrap;
@@ -502,7 +513,6 @@
502
513
  padding-right: 2px;
503
514
  box-sizing: border-box;
504
515
  position: absolute;
505
- width: 10000px;
506
516
  }
507
517
  .flexlayout__border_inner_tab_container_right {
508
518
  transform-origin: top left;
@@ -526,7 +536,7 @@
526
536
  box-sizing: border-box;
527
537
  white-space: nowrap;
528
538
  border-radius: 10px;
529
- padding: 2px 0.7em;
539
+ padding: 2px 0.8em;
530
540
  }
531
541
  .flexlayout__border_button--selected {
532
542
  background-color: var(--color-border-tab-selected-background);
@@ -598,6 +608,7 @@
598
608
  color: var(--color-overflow);
599
609
  font-size: inherit;
600
610
  background-color: transparent;
611
+ width: 1.5em;
601
612
  }
602
613
  .flexlayout__popup_menu {
603
614
  font-size: var(--font-size);
@@ -609,6 +620,11 @@
609
620
  cursor: pointer;
610
621
  border-radius: 2px;
611
622
  }
623
+ .flexlayout__popup_menu_item--selected {
624
+ font-weight: 500;
625
+ background-color: var(--color-tab-selected-background);
626
+ color: var(--color-tab-selected);
627
+ }
612
628
  @media (hover: hover) {
613
629
  .flexlayout__popup_menu_item:hover {
614
630
  background-color: var(--color-6);
@@ -670,20 +686,55 @@
670
686
  font-size: var(--font-size);
671
687
  font-family: var(--font-family);
672
688
  }
689
+ .flexlayout__mini_scrollbar {
690
+ position: absolute;
691
+ background-color: var(--color-mini-scroll-indicator);
692
+ border-radius: 5px;
693
+ width: var(--size-mini-scroll-indicator);
694
+ height: var(--size-mini-scroll-indicator);
695
+ visibility: hidden;
696
+ opacity: 0;
697
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
698
+ }
699
+ .flexlayout__mini_scrollbar:hover {
700
+ background-color: var(--color-mini-scroll-indicator-hovered);
701
+ transition: background-color 0.3s ease-in-out;
702
+ }
703
+ .flexlayout__mini_scrollbar_container {
704
+ position: relative;
705
+ display: flex;
706
+ flex-grow: 1;
707
+ overflow: hidden;
708
+ }
709
+ @media (hover: hover) {
710
+ .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {
711
+ opacity: 1;
712
+ visibility: visible;
713
+ }
714
+ }
715
+
716
+ .flexlayout__tabset {
717
+ padding: 3px;
718
+ }
673
719
 
674
720
  .flexlayout__tabset_content {
675
- padding: 1px 5px 5px 5px;
721
+ padding: 1px 3px 3px 3px;
676
722
  border-bottom-left-radius: 10px;
677
723
  border-bottom-right-radius: 10px;
678
724
  }
679
725
 
680
726
  .flexlayout__tab_border {
681
727
  border-radius: 10px;
682
- padding: 3px;
728
+ padding: 5px;
683
729
  }
684
730
 
685
731
  .flexlayout__tabset_tabbar_outer_top {
686
732
  border-bottom: unset;
733
+ padding-bottom: 1px;
734
+ }
735
+
736
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
737
+ border-bottom: 2px solid transparent;
687
738
  }
688
739
 
689
740
  .flexlayout__border_tab_contents {
@@ -694,4 +745,12 @@
694
745
  border-radius: 10px;
695
746
  }
696
747
 
748
+ .flexlayout__border_sizer {
749
+ padding-bottom: 6px;
750
+ }
751
+
752
+ .flexlayout__border_bottom {
753
+ border-top: 2px solid var(--color-border-divider-line);
754
+ }
755
+
697
756
  /*# sourceMappingURL=rounded.css.map */
package/style/rounded.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["rounded.scss","_base.scss"],"names":[],"mappings":"AAkBI;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AChEJ;EAfA;EACA;EACA;EACA;EACA;EAaI;;AAEA;EAnBJ;EACA;EACA;EACA;EACA;EAiBQ;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAjCJ;EACA;EACA;EACA;EAgCQ;EACA;;AAIR;EAxCA;EACA;EACA;EACA;EAuCI;;AAGJ;EA7CA;EACA;EACA;EACA;EA4CI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;IACA;IACA;;;AAOR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EAlJA;EACA;EACA;EACA;EAiJI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDrFJ;;ACwFI;EApKJ;EACA;EACA;EACA;EAmKQ;EACA;EACA;;AAGJ;EACI;;AAIJ;EAhLJ;EACA;EACA;EACA;EA+KQ;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EDzMR;EACA;;AC2MQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;;;AAMZ;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;EDxOZ;;ACoPQ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDnQZ;;AC2QQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDpThB;;;ACsUQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDnbR;EACA;;ACqbQ;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDheZ;;ACweQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDzgBhB;;;ACihBY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EA7sBJ;EACA;EACA;EACA;EACA;;AA8sBA;EAltBA;EACA;EACA;EACA;EACA;EAgtBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;ADzkBR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI","file":"rounded.css"}
1
+ {"version":3,"sourceRoot":"","sources":["rounded.scss","_base.scss"],"names":[],"mappings":"AAkBI;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;;;ACrEJ;EAfA;EACA;EACA;EACA;EACA;EAaI;;AAEA;EAnBJ;EACA;EACA;EACA;EACA;EAiBQ;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAjCJ;EACA;EACA;EACA;EAgCQ;EACA;;AAIR;EAxCA;EACA;EACA;EACA;EAuCI;;AAGJ;EA7CA;EACA;EACA;EACA;EA4CI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;IACA;IACA;;;AAOR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EAlJA;EACA;EACA;EACA;EAiJI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDhFJ;;ACmFI;EApKJ;EACA;EACA;EACA;EAmKQ;EACA;EACA;;AAGJ;EACI;;AAIJ;EAhLJ;EACA;EACA;EACA;EA+KQ;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EDxMR;EACA;;AC0MQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;;;AAMZ;EACI;EACA;;AAGJ;EACI;IACI;;;AAKR;EACI;EACA;EDtOZ;;ACkPQ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDjQZ;;ACyQQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDpThB;;;ACsUQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDvbR;EACA;;ACybQ;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDpeZ;;AC4eQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID7gBhB;;;ACqhBY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EA7tBJ;EACA;EACA;EACA;EACA;;AA8tBA;EAluBA;EACA;EACA;EACA;EACA;EAguBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;IACI;IACA;;;;ADhnBhB;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI","file":"rounded.css"}
package/style/rounded.scss CHANGED
@@ -40,7 +40,7 @@ $font-family: Roboto, Arial, sans-serif !default;
40
40
 
41
41
  --color-tabset-background: white;
42
42
  --color-tabset-background-selected: white;
43
- --color-tabset-background-maximized: var(--color-2);
43
+ --color-tabset-background-maximized: white;
44
44
  --color-tabset-divider-line: white;
45
45
 
46
46
  --color-tabset-header-background: var(--color-background);
@@ -54,7 +54,7 @@ $font-family: Roboto, Arial, sans-serif !default;
54
54
  --color-tab-selected: var(--color-text);
55
55
  --color-tab-selected-background: var(--color-2);
56
56
  --color-tab-unselected: gray;
57
- --color-tab-unselected-background: transparent;
57
+ --color-tab-unselected-background: #d3d4e745;
58
58
  --color-tab-textbox: var(--color-text);
59
59
  --color-tab-textbox-background: var(--color-3);
60
60
 
@@ -79,6 +79,11 @@ $font-family: Roboto, Arial, sans-serif !default;
79
79
 
80
80
  --color-edge-marker: #a6bbdf;
81
81
  --color-edge-icon: #555;
82
+
83
+ --color-mini-scroll-indicator:rgba(180, 200, 230, 0.5);
84
+ --color-mini-scroll-indicator-hovered:rgba(180, 200, 230, 0.7);
85
+
86
+ --size-mini-scroll-indicator:4px;
82
87
  }
83
88
  }
84
89
 
@@ -106,7 +111,7 @@ $font-family: Roboto, Arial, sans-serif !default;
106
111
 
107
112
  @mixin tab_button_mixin {
108
113
  border-radius: 10px;
109
- padding: 2px 0.6em;
114
+ padding: 2px 0.8em;
110
115
  }
111
116
 
112
117
  @mixin tab_button_selected_mixin {
@@ -138,7 +143,7 @@ $font-family: Roboto, Arial, sans-serif !default;
138
143
 
139
144
  @mixin border_button_mixin {
140
145
  border-radius: 10px;
141
- padding: 2px 0.7em;
146
+ padding: 2px 0.8em;
142
147
  }
143
148
 
144
149
  @mixin border_button_selected_mixin {
@@ -170,19 +175,28 @@ $font-family: Roboto, Arial, sans-serif !default;
170
175
 
171
176
  @import "_base";
172
177
 
178
+ .flexlayout__tabset {
179
+ padding: 3px;
180
+ }
181
+
173
182
  .flexlayout__tabset_content {
174
- padding: 1px 5px 5px 5px;
183
+ padding: 1px 3px 3px 3px;
175
184
  border-bottom-left-radius: 10px;
176
185
  border-bottom-right-radius: 10px;
177
186
  }
178
187
 
179
188
  .flexlayout__tab_border {
180
189
  border-radius: 10px;
181
- padding:3px;
190
+ padding:5px;
182
191
  }
183
192
 
184
193
  .flexlayout__tabset_tabbar_outer_top {
185
194
  border-bottom:unset;
195
+ padding-bottom: 1px;
196
+ }
197
+
198
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
199
+ border-bottom: 2px solid transparent;
186
200
  }
187
201
 
188
202
  .flexlayout__border_tab_contents {
@@ -192,3 +206,11 @@ $font-family: Roboto, Arial, sans-serif !default;
192
206
  .flexlayout__border_tab_contents {
193
207
  border-radius: 10px;
194
208
  }
209
+
210
+ .flexlayout__border_sizer {
211
+ padding-bottom: 6px;
212
+ }
213
+
214
+ .flexlayout__border_bottom {
215
+ border-top: 2px solid var(--color-border-divider-line);
216
+ }
package/style/underline.css CHANGED
@@ -52,6 +52,9 @@
52
52
  --color-underline: rgb(65, 105, 225);
53
53
  --color-underline-hover: #aaa;
54
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;
55
58
  }
56
59
 
57
60
  .flexlayout__layout {
@@ -263,7 +266,10 @@
263
266
  box-sizing: border-box;
264
267
  display: flex;
265
268
  flex-grow: 1;
266
- overflow: hidden;
269
+ scrollbar-width: none;
270
+ }
271
+ .flexlayout__tabset_tabbar_inner::-webkit-scrollbar {
272
+ display: none;
267
273
  }
268
274
  .flexlayout__tabset_tabbar_inner_tab_container {
269
275
  position: relative;
@@ -349,9 +355,7 @@
349
355
  }
350
356
  @media (hover: hover) {
351
357
  .flexlayout__tab_button:hover {
352
- background-color: var(--color-tab-selected-background);
353
358
  color: var(--color-tab-selected);
354
- border-bottom: var(--underline_height) solid var(--color-underline-hover);
355
359
  }
356
360
  }
357
361
  .flexlayout__tab_button--unselected {
@@ -403,6 +407,8 @@
403
407
  color: var(--color-overflow);
404
408
  font-size: inherit;
405
409
  background-color: transparent;
410
+ width: 2em;
411
+ overflow: hidden;
406
412
  }
407
413
  .flexlayout__tab_toolbar {
408
414
  display: flex;
@@ -498,9 +504,13 @@
498
504
  .flexlayout__border_inner {
499
505
  position: relative;
500
506
  box-sizing: border-box;
507
+ align-items: center;
501
508
  display: flex;
502
- overflow: hidden;
503
509
  flex-grow: 1;
510
+ scrollbar-width: none;
511
+ }
512
+ .flexlayout__border_inner::-webkit-scrollbar {
513
+ display: none;
504
514
  }
505
515
  .flexlayout__border_inner_tab_container {
506
516
  white-space: nowrap;
@@ -509,7 +519,6 @@
509
519
  padding-right: 2px;
510
520
  box-sizing: border-box;
511
521
  position: absolute;
512
- width: 10000px;
513
522
  }
514
523
  .flexlayout__border_inner_tab_container_right {
515
524
  transform-origin: top left;
@@ -610,6 +619,7 @@
610
619
  color: var(--color-overflow);
611
620
  font-size: inherit;
612
621
  background-color: transparent;
622
+ width: 1.5em;
613
623
  }
614
624
  .flexlayout__popup_menu {
615
625
  font-size: var(--font-size);
@@ -621,6 +631,11 @@
621
631
  cursor: pointer;
622
632
  border-radius: 2px;
623
633
  }
634
+ .flexlayout__popup_menu_item--selected {
635
+ font-weight: 500;
636
+ background-color: var(--color-tab-selected-background);
637
+ color: var(--color-tab-selected);
638
+ }
624
639
  @media (hover: hover) {
625
640
  .flexlayout__popup_menu_item:hover {
626
641
  background-color: var(--color-6);
@@ -682,6 +697,32 @@
682
697
  font-size: var(--font-size);
683
698
  font-family: var(--font-family);
684
699
  }
700
+ .flexlayout__mini_scrollbar {
701
+ position: absolute;
702
+ background-color: var(--color-mini-scroll-indicator);
703
+ border-radius: 5px;
704
+ width: var(--size-mini-scroll-indicator);
705
+ height: var(--size-mini-scroll-indicator);
706
+ visibility: hidden;
707
+ opacity: 0;
708
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
709
+ }
710
+ .flexlayout__mini_scrollbar:hover {
711
+ background-color: var(--color-mini-scroll-indicator-hovered);
712
+ transition: background-color 0.3s ease-in-out;
713
+ }
714
+ .flexlayout__mini_scrollbar_container {
715
+ position: relative;
716
+ display: flex;
717
+ flex-grow: 1;
718
+ overflow: hidden;
719
+ }
720
+ @media (hover: hover) {
721
+ .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {
722
+ opacity: 1;
723
+ visibility: visible;
724
+ }
725
+ }
685
726
 
686
727
  .flexlayout__tab_button_textbox {
687
728
  border: none;
package/style/underline.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["underline.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;;;ACnEJ;EAfA;EACA;EACA;EACA;EACA;EAaI;;AAEA;EAnBJ;EACA;EACA;EACA;EACA;EAiBQ;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAjCJ;EACA;EACA;EACA;EAgCQ;EACA;;AAIR;EAxCA;EACA;EACA;EACA;EAuCI;;AAGJ;EA7CA;EACA;EACA;EACA;EA4CI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;IACA;IACA;;;AAOR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EAlJA;EACA;EACA;EACA;EAiJI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EApKJ;EACA;EACA;EACA;EAmKQ;EACA;EACA;;AAGJ;EACI;EDVR;EACA;EACA;;ACYI;EAhLJ;EACA;EACA;EACA;EA+KQ;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EDvMR;;AC0MQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;;;AAMZ;EACI;EACA;ED7NZ;;ACgOQ;EACI;IACI;IACA;ID1NhB;;;AC+NQ;EACI;EACA;EDtOZ;EACA;;ACiPQ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDrQZ;;AC6QQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDtThB;;;ACwUQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EDjYR;EACA;EACA;;ACmYI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ED/aR;;ACkbQ;EACI;EACA;EDhbZ;;ACmbQ;EACI;IACI;IACA;ID9ahB;;;ACmbQ;EACI;EACA;EDzbZ;;AC6bQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDleZ;;AC0eQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID3gBhB;;;ACmhBY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EA7sBJ;EACA;EACA;EACA;EACA;;AA8sBA;EAltBA;EACA;EACA;EACA;EACA;EAgtBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AD7jBR;EACI","file":"underline.css"}
1
+ {"version":3,"sourceRoot":"","sources":["underline.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;ACvEJ;EAfA;EACA;EACA;EACA;EACA;EAaI;;AAEA;EAnBJ;EACA;EACA;EACA;EACA;EAiBQ;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAjCJ;EACA;EACA;EACA;EAgCQ;EACA;;AAIR;EAxCA;EACA;EACA;EACA;EAuCI;;AAGJ;EA7CA;EACA;EACA;EACA;EA4CI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;IACA;IACA;;;AAOR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EAlJA;EACA;EACA;EACA;EAiJI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EApKJ;EACA;EACA;EACA;EAmKQ;EACA;EACA;;AAGJ;EACI;EDNR;EACA;EACA;;ACQI;EAhLJ;EACA;EACA;EACA;EA+KQ;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EDvMR;;AC0MQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;;;AAMZ;EACI;EACA;ED7NZ;;ACgOQ;EACI;IACI;;;AAKR;EACI;EACA;EDrOZ;EACA;;ACgPQ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDpQZ;;AC4QQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDvThB;;;ACyUQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EDtYR;EACA;EACA;;ACwYI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDpbR;;ACubQ;EACI;EACA;EDrbZ;;ACwbQ;EACI;IACI;IACA;IDnbhB;;;ACwbQ;EACI;EACA;ED9bZ;;ACkcQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDveZ;;AC+eQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDhhBhB;;;ACwhBY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EA7tBJ;EACA;EACA;EACA;EACA;;AA8tBA;EAluBA;EACA;EACA;EACA;EACA;EAguBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;IACI;IACA;;;;ADrmBhB;EACI","file":"underline.css"}
package/style/underline.scss CHANGED
@@ -82,6 +82,10 @@ $font-family: Roboto, Arial, sans-serif !default;
82
82
  --color-underline: rgb(65, 105, 225);
83
83
  --color-underline-hover: #aaa;
84
84
  --underline_height: 3px;
85
+
86
+ --color-mini-scroll-indicator:rgba(128, 128, 128, 0.5);
87
+ --color-mini-scroll-indicator-hovered:rgba(128, 128, 128, 0.7);
88
+ --size-mini-scroll-indicator:4px;
85
89
  }
86
90
  }
87
91
 
@@ -120,7 +124,7 @@ $font-family: Roboto, Arial, sans-serif !default;
120
124
  }
121
125
 
122
126
  @mixin tab_button_hovered_mixin {
123
- border-bottom: var(--underline_height) solid var(--color-underline-hover);
127
+ // border-bottom: var(--underline_height) solid var(--color-underline-hover);
124
128
  }
125
129
 
126
130
  @mixin close_button_hovered_mixin {