flexlayout-react 0.5.16 → 0.5.20

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 (81) hide show
  1. package/ChangeLog.txt +24 -0
  2. package/README.md +128 -97
  3. package/declarations/DragDrop.d.ts +1 -0
  4. package/declarations/Rect.d.ts +4 -0
  5. package/declarations/Types.d.ts +8 -1
  6. package/declarations/model/BorderNode.d.ts +2 -1
  7. package/declarations/model/IJsonModel.d.ts +8 -0
  8. package/declarations/model/Model.d.ts +1 -0
  9. package/declarations/view/Layout.d.ts +19 -6
  10. package/dist/flexlayout.js +19 -19
  11. package/dist/flexlayout_min.js +1 -1
  12. package/lib/DockLocation.js +25 -11
  13. package/lib/DockLocation.js.map +1 -1
  14. package/lib/DragDrop.js +19 -3
  15. package/lib/DragDrop.js.map +1 -1
  16. package/lib/PopupMenu.js +14 -9
  17. package/lib/PopupMenu.js.map +1 -1
  18. package/lib/Rect.js +3 -0
  19. package/lib/Rect.js.map +1 -1
  20. package/lib/Types.js +7 -0
  21. package/lib/Types.js.map +1 -1
  22. package/lib/model/BorderNode.js +61 -14
  23. package/lib/model/BorderNode.js.map +1 -1
  24. package/lib/model/BorderSet.js +33 -19
  25. package/lib/model/BorderSet.js.map +1 -1
  26. package/lib/model/Model.js +23 -3
  27. package/lib/model/Model.js.map +1 -1
  28. package/lib/model/RowNode.js +19 -5
  29. package/lib/model/RowNode.js.map +1 -1
  30. package/lib/model/TabNode.js +10 -0
  31. package/lib/model/TabNode.js.map +1 -1
  32. package/lib/model/TabSetNode.js +34 -19
  33. package/lib/model/TabSetNode.js.map +1 -1
  34. package/lib/view/BorderButton.js +17 -6
  35. package/lib/view/BorderButton.js.map +1 -1
  36. package/lib/view/BorderTabSet.js +17 -6
  37. package/lib/view/BorderTabSet.js.map +1 -1
  38. package/lib/view/Layout.js +232 -57
  39. package/lib/view/Layout.js.map +1 -1
  40. package/lib/view/Splitter.js +35 -4
  41. package/lib/view/Splitter.js.map +1 -1
  42. package/lib/view/Tab.js +2 -2
  43. package/lib/view/Tab.js.map +1 -1
  44. package/lib/view/TabButton.js +16 -7
  45. package/lib/view/TabButton.js.map +1 -1
  46. package/lib/view/TabFloating.js +24 -12
  47. package/lib/view/TabFloating.js.map +1 -1
  48. package/lib/view/TabSet.js +49 -24
  49. package/lib/view/TabSet.js.map +1 -1
  50. package/package.json +11 -6
  51. package/src/DockLocation.ts +30 -9
  52. package/src/DragDrop.ts +26 -3
  53. package/src/PopupMenu.tsx +32 -11
  54. package/src/Rect.ts +6 -2
  55. package/src/Types.ts +7 -0
  56. package/src/model/BorderNode.ts +57 -15
  57. package/src/model/BorderSet.ts +32 -19
  58. package/src/model/IJsonModel.ts +8 -0
  59. package/src/model/Model.ts +30 -3
  60. package/src/model/RowNode.ts +8 -5
  61. package/src/model/TabNode.ts +11 -0
  62. package/src/model/TabSetNode.ts +33 -19
  63. package/src/view/BorderButton.tsx +34 -6
  64. package/src/view/BorderTabSet.tsx +25 -5
  65. package/src/view/Layout.tsx +299 -82
  66. package/src/view/Splitter.tsx +53 -4
  67. package/src/view/Tab.tsx +8 -2
  68. package/src/view/TabButton.tsx +31 -7
  69. package/src/view/TabFloating.tsx +42 -20
  70. package/src/view/TabSet.tsx +70 -18
  71. package/style/_base.scss +78 -51
  72. package/style/dark.css +94 -68
  73. package/style/dark.css.map +1 -1
  74. package/style/dark.scss +20 -20
  75. package/style/gray.css +94 -68
  76. package/style/gray.css.map +1 -1
  77. package/style/gray.scss +20 -20
  78. package/style/light.css +94 -68
  79. package/style/light.css.map +1 -1
  80. package/style/light.scss +18 -18
  81. package/yarn-error.log +0 -11828
package/style/_base.scss CHANGED
@@ -8,6 +8,21 @@
8
8
 
9
9
  .flexlayout {
10
10
  &__layout {
11
+ --color-text: #{$color_text};
12
+ --color-background: #{$color_background};
13
+ --color-base: #{$color_base};
14
+ --color-1: #{$color_1};
15
+ --color-2: #{$color_2};
16
+ --color-3: #{$color_3};
17
+ --color-4: #{$color_4};
18
+ --color-5: #{$color_5};
19
+ --color-6: #{$color_6};
20
+ --color-drag1: #{$color_drag1};
21
+ --color-drag2: #{$color_drag2};
22
+
23
+ --font-size: #{$font-size};
24
+ --font-family: #{$font-family};
25
+
11
26
  @include absoluteFill;
12
27
  overflow: hidden;
13
28
  }
@@ -17,6 +32,8 @@
17
32
 
18
33
  @media (hover: hover) {
19
34
  &:hover {
35
+ transition: background-color ease-in .1s;
36
+ transition-delay: 0.05s;
20
37
  @include splitter_hover_mixin;
21
38
  }
22
39
  }
@@ -24,25 +41,27 @@
24
41
  z-index: 10;
25
42
  @include splitter_border_mixin;
26
43
  }
27
-
28
44
  &_drag {
29
45
  z-index: 1000;
30
46
  @include splitter_drag_mixin;
31
47
  }
48
+ &_extra {
49
+ background-color: transparent;
50
+ }
32
51
  }
33
52
 
34
53
  &__outline_rect {
35
54
  position: absolute;
36
- cursor: move;
55
+ pointer-events: none;
37
56
  box-sizing: border-box;
38
- border: 2px solid $color_drag1;
57
+ border: 2px solid var(--color-drag1);
39
58
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
40
59
  border-radius: 5px;
41
60
  z-index: 1000;
42
61
 
43
62
  &_edge {
44
- cursor: move;
45
- border: 2px solid $color_drag2;
63
+ pointer-events: none;
64
+ border: 2px solid var(--color-drag2);
46
65
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
47
66
  border-radius: 5px;
48
67
  z-index: 1000;
@@ -55,14 +74,15 @@
55
74
  z-index: 1000;
56
75
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
57
76
  background-color: gray;
77
+ pointer-events: none;
58
78
  }
59
79
 
60
80
  &__drag_rect {
61
81
  position: absolute;
62
82
  cursor: move;
63
- color: $color_text;
64
- background-color: $color_1;
65
- border: 2px solid $color_4;
83
+ color: var(--color-text);
84
+ background-color: var(--color-1);
85
+ border: 2px solid var(--color-4);
66
86
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
67
87
  border-radius: 5px;
68
88
  z-index: 1000;
@@ -76,16 +96,16 @@
76
96
  overflow: hidden;
77
97
  padding: 10px;
78
98
  word-wrap: break-word;
79
- font-size: $font-size;
80
- font-family: $font-family;
99
+ font-size: var(--font-size);
100
+ font-family: var(--font-family);
81
101
  }
82
102
 
83
103
  &__tabset {
84
104
  overflow: hidden;
85
- background-color: $color_1;
105
+ background-color: var(--color-1);
86
106
  box-sizing: border-box;
87
- font-size: $font-size;
88
- font-family: $font-family;
107
+ font-size: var(--font-size);
108
+ font-family: var(--font-family);
89
109
  @include tabset_mixin;
90
110
 
91
111
  &_header {
@@ -97,8 +117,8 @@
97
117
  right: 0;
98
118
  padding: 3px 3px 3px 5px;
99
119
  box-sizing: border-box;
100
- border-bottom: 1px solid $color_3;
101
- color: $color_text;
120
+ border-bottom: 1px solid var(--color-3);
121
+ color: var(--color-text);
102
122
  @include tabset_header_mixin;
103
123
 
104
124
  &_content {
@@ -110,7 +130,7 @@
110
130
  &_outer {
111
131
  // tabset tabbar outer
112
132
  box-sizing: border-box;
113
- background-color: $color_1;
133
+ background-color: var(--color-1);
114
134
  position: absolute;
115
135
  left: 0;
116
136
  right: 0;
@@ -120,11 +140,11 @@
120
140
  }
121
141
 
122
142
  &_outer_top {
123
- border-bottom: 1px solid $color_3;
143
+ border-bottom: 1px solid var(--color-3);
124
144
  }
125
145
 
126
146
  &_outer_bottom {
127
- border-top: 1px solid $color_3;
147
+ border-top: 1px solid var(--color-3);
128
148
  }
129
149
 
130
150
  &_inner {
@@ -166,11 +186,11 @@
166
186
  overflow: auto;
167
187
  position: absolute;
168
188
  box-sizing: border-box;
169
- color: $color_text;
170
- background-color: $color_background;
189
+ color: var(--color-text);
190
+ background-color: var(--color-background);
171
191
 
172
192
  &_button {
173
- display: inline-flex;
193
+ display: flex;
174
194
  align-items: center;
175
195
  box-sizing: border-box;
176
196
  padding: 3px 8px; // if you change top or bottom update the tabset_sizer above
@@ -200,17 +220,21 @@
200
220
  }
201
221
 
202
222
  &_leading {
203
- display: inline-block;
223
+ display: flex;
204
224
  }
205
225
 
206
226
  &_content {
207
- display: inline-block;
227
+ display: flex;
208
228
  }
209
229
 
210
230
  &_textbox {
211
231
  border: none;
212
- color: green;
213
- background-color: $color_3;
232
+ font-family: var(--font-family);
233
+ font-size: var(--font-size);
234
+ color: var(--color-text);
235
+ background-color: var(--color-5);
236
+ border: 1px inset var(--color-1);
237
+ border-radius: 3px;
214
238
  }
215
239
 
216
240
  &_textbox:focus {
@@ -218,7 +242,7 @@
218
242
  }
219
243
 
220
244
  &_trailing {
221
- display: inline-block;
245
+ display: flex;
222
246
  margin-left: 8px;
223
247
  min-width: 8px;
224
248
  min-height: 8px;
@@ -286,8 +310,8 @@
286
310
  overflow: auto;
287
311
  position: absolute;
288
312
  box-sizing: border-box;
289
- color: $color_text;
290
- background-color: $color_background;
313
+ color: var(--color-text);
314
+ background-color: var(--color-background);
291
315
  display: flex;
292
316
  justify-content: center;
293
317
  align-items: center;
@@ -315,28 +339,28 @@
315
339
  box-sizing: border-box;
316
340
  overflow: hidden;
317
341
  display: flex;
318
- font-size: $font-size;
319
- font-family: $font-family;
342
+ font-size: var(--font-size);
343
+ font-family: var(--font-family);
320
344
  @include border_mixin;
321
345
 
322
346
  &_top {
323
- border-bottom: 1px solid $color_3;
347
+ border-bottom: 1px solid var(--color-3);
324
348
  align-items: center;
325
349
  }
326
350
 
327
351
  &_bottom {
328
- border-top: 1px solid $color_3;
352
+ border-top: 1px solid var(--color-3);
329
353
  align-items: center;
330
354
  }
331
355
 
332
356
  &_left {
333
- border-right: 1px solid $color_3;
357
+ border-right: 1px solid var(--color-3);
334
358
  align-content: center;
335
359
  flex-direction: column;
336
360
  }
337
361
 
338
362
  &_right {
339
- border-left: 1px solid $color_3;
363
+ border-left: 1px solid var(--color-3);
340
364
  align-content: center;
341
365
  flex-direction: column;
342
366
  }
@@ -393,15 +417,15 @@
393
417
  }
394
418
 
395
419
  &_leading {
396
- display: inline;
420
+ display: flex;
397
421
  }
398
422
 
399
423
  &_content {
400
- display: inline-block;
424
+ display: flex;
401
425
  }
402
426
 
403
427
  &_trailing {
404
- display: inline-block;
428
+ display: flex;
405
429
  margin-left: 8px;
406
430
  min-width: 8px;
407
431
  min-height: 8px;
@@ -470,25 +494,28 @@
470
494
  }
471
495
 
472
496
  &__popup_menu {
473
- font-size: $font-size;
474
- font-family: $font-family;
497
+ font-size: var(--font-size);
498
+ font-family: var(--font-family);
475
499
 
476
500
  &_item {
501
+ margin: 2px;
477
502
  padding: 2px 10px 2px 10px;
478
503
  white-space: nowrap;
504
+ cursor: pointer;
505
+ border-radius: 2px;
479
506
  }
480
507
 
481
508
  @media (hover: hover) {
482
509
  &_item:hover {
483
- background-color: $color_6;
510
+ background-color: var(--color-6);
484
511
  }
485
512
  }
486
513
 
487
514
  &_container {
488
515
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
489
- border: 1px solid $color_6;
490
- color: $color_text;
491
- background: $color_background;
516
+ border: 1px solid var(--color-6);
517
+ color: var(--color-text);
518
+ background: var(--color-background);
492
519
  border-radius: 3px;
493
520
  position: absolute;
494
521
  z-index: 1000;
@@ -512,8 +539,8 @@
512
539
  @include absoluteFill;
513
540
 
514
541
  box-sizing: border-box;
515
- background-color: $color_background;
516
- color: $color_text;
542
+ background-color: var(--color-background);
543
+ color: var(--color-text);
517
544
  }
518
545
  }
519
546
 
@@ -534,21 +561,21 @@
534
561
  &__tabset_sizer {
535
562
  padding-top: 5px; // tab_button has 3 padding top, tabset header inner has 2 border
536
563
  padding-bottom: 3px; // tab_button has 3 padding bottom
537
- font-size: $font-size;
538
- font-family: $font-family;
564
+ font-size: var(--font-size);
565
+ font-family: var(--font-family);
539
566
  }
540
567
 
541
568
  &__tabset_header_sizer {
542
569
  padding-top: 3px;
543
570
  padding-bottom: 3px;
544
- font-size: $font-size;
545
- font-family: $font-family;
571
+ font-size: var(--font-size);
572
+ font-family: var(--font-family);
546
573
  }
547
574
 
548
575
  &__border_sizer {
549
576
  padding-top: 6px;
550
577
  padding-bottom: 5px;
551
- font-size: $font-size;
552
- font-family: $font-family;
578
+ font-size: var(--font-size);
579
+ font-family: var(--font-family);
553
580
  }
554
581
  }
package/style/dark.css CHANGED
@@ -1,4 +1,17 @@
1
1
  .flexlayout__layout {
2
+ --color-text: white;
3
+ --color-background: black;
4
+ --color-base: black;
5
+ --color-1: #121212;
6
+ --color-2: #1a1a1a;
7
+ --color-3: #262626;
8
+ --color-4: #333333;
9
+ --color-5: #404040;
10
+ --color-6: #4d4d4d;
11
+ --color-drag1: #cfe8ff;
12
+ --color-drag2: #b7d1b5;
13
+ --font-size: medium;
14
+ --font-family: Roboto, Arial, sans-serif;
2
15
  left: 0;
3
16
  top: 0;
4
17
  right: 0;
@@ -7,11 +20,13 @@
7
20
  overflow: hidden;
8
21
  }
9
22
  .flexlayout__splitter {
10
- background-color: #1a1a1a;
23
+ background-color: var(--color-2);
11
24
  }
12
25
  @media (hover: hover) {
13
26
  .flexlayout__splitter:hover {
14
- background-color: #333333;
27
+ transition: background-color ease-in 0.1s;
28
+ transition-delay: 0.05s;
29
+ background-color: var(--color-4);
15
30
  }
16
31
  }
17
32
  .flexlayout__splitter_border {
@@ -20,20 +35,23 @@
20
35
  .flexlayout__splitter_drag {
21
36
  z-index: 1000;
22
37
  border-radius: 5px;
23
- background-color: #404040;
38
+ background-color: var(--color-5);
39
+ }
40
+ .flexlayout__splitter_extra {
41
+ background-color: transparent;
24
42
  }
25
43
  .flexlayout__outline_rect {
26
44
  position: absolute;
27
- cursor: move;
45
+ pointer-events: none;
28
46
  box-sizing: border-box;
29
- border: 2px solid #cfe8ff;
47
+ border: 2px solid var(--color-drag1);
30
48
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
31
49
  border-radius: 5px;
32
50
  z-index: 1000;
33
51
  }
34
52
  .flexlayout__outline_rect_edge {
35
- cursor: move;
36
- border: 2px solid #b7d1b5;
53
+ pointer-events: none;
54
+ border: 2px solid var(--color-drag2);
37
55
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
38
56
  border-radius: 5px;
39
57
  z-index: 1000;
@@ -44,13 +62,14 @@
44
62
  z-index: 1000;
45
63
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
46
64
  background-color: gray;
65
+ pointer-events: none;
47
66
  }
48
67
  .flexlayout__drag_rect {
49
68
  position: absolute;
50
69
  cursor: move;
51
- color: white;
52
- background-color: #121212;
53
- border: 2px solid #333333;
70
+ color: var(--color-text);
71
+ background-color: var(--color-1);
72
+ border: 2px solid var(--color-4);
54
73
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
55
74
  border-radius: 5px;
56
75
  z-index: 1000;
@@ -63,16 +82,16 @@
63
82
  overflow: hidden;
64
83
  padding: 10px;
65
84
  word-wrap: break-word;
66
- font-size: medium;
67
- font-family: Roboto, Arial, sans-serif;
85
+ font-size: var(--font-size);
86
+ font-family: var(--font-family);
68
87
  }
69
88
  .flexlayout__tabset {
70
89
  overflow: hidden;
71
- background-color: #121212;
90
+ background-color: var(--color-1);
72
91
  box-sizing: border-box;
73
- font-size: medium;
74
- font-family: Roboto, Arial, sans-serif;
75
- background-color: #121212;
92
+ font-size: var(--font-size);
93
+ font-family: var(--font-family);
94
+ background-color: var(--color-1);
76
95
  }
77
96
  .flexlayout__tabset_header {
78
97
  position: absolute;
@@ -82,9 +101,9 @@
82
101
  right: 0;
83
102
  padding: 3px 3px 3px 5px;
84
103
  box-sizing: border-box;
85
- border-bottom: 1px solid #262626;
86
- color: white;
87
- background-color: #121212;
104
+ border-bottom: 1px solid var(--color-3);
105
+ color: var(--color-text);
106
+ background-color: var(--color-1);
88
107
  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
89
108
  }
90
109
  .flexlayout__tabset_header_content {
@@ -92,19 +111,19 @@
92
111
  }
93
112
  .flexlayout__tabset_tabbar_outer {
94
113
  box-sizing: border-box;
95
- background-color: #121212;
114
+ background-color: var(--color-1);
96
115
  position: absolute;
97
116
  left: 0;
98
117
  right: 0;
99
118
  overflow: hidden;
100
119
  display: flex;
101
- background-color: #121212;
120
+ background-color: var(--color-1);
102
121
  }
103
122
  .flexlayout__tabset_tabbar_outer_top {
104
- border-bottom: 1px solid #262626;
123
+ border-bottom: 1px solid var(--color-3);
105
124
  }
106
125
  .flexlayout__tabset_tabbar_outer_bottom {
107
- border-top: 1px solid #262626;
126
+ border-top: 1px solid var(--color-3);
108
127
  }
109
128
  .flexlayout__tabset_tabbar_inner {
110
129
  position: relative;
@@ -128,20 +147,20 @@
128
147
  border-bottom: 2px solid transparent;
129
148
  }
130
149
  .flexlayout__tabset-selected {
131
- background-image: linear-gradient(black, #333333);
150
+ background-image: linear-gradient(var(--color-background), var(--color-4));
132
151
  }
133
152
  .flexlayout__tabset-maximized {
134
- background-image: linear-gradient(#4d4d4d, #1a1a1a);
153
+ background-image: linear-gradient(var(--color-6), var(--color-2));
135
154
  }
136
155
  .flexlayout__tab {
137
156
  overflow: auto;
138
157
  position: absolute;
139
158
  box-sizing: border-box;
140
- color: white;
141
- background-color: black;
159
+ color: var(--color-text);
160
+ background-color: var(--color-background);
142
161
  }
143
162
  .flexlayout__tab_button {
144
- display: inline-flex;
163
+ display: flex;
145
164
  align-items: center;
146
165
  box-sizing: border-box;
147
166
  padding: 3px 8px;
@@ -149,13 +168,13 @@
149
168
  cursor: pointer;
150
169
  }
151
170
  .flexlayout__tab_button--selected {
152
- background-color: #262626;
153
- color: white;
171
+ background-color: var(--color-3);
172
+ color: var(--color-text);
154
173
  }
155
174
  @media (hover: hover) {
156
175
  .flexlayout__tab_button:hover {
157
- background-color: #262626;
158
- color: white;
176
+ background-color: var(--color-3);
177
+ color: var(--color-text);
159
178
  }
160
179
  }
161
180
  .flexlayout__tab_button--unselected {
@@ -172,21 +191,25 @@
172
191
  border-bottom-right-radius: 3px;
173
192
  }
174
193
  .flexlayout__tab_button_leading {
175
- display: inline-block;
194
+ display: flex;
176
195
  }
177
196
  .flexlayout__tab_button_content {
178
- display: inline-block;
197
+ display: flex;
179
198
  }
180
199
  .flexlayout__tab_button_textbox {
181
200
  border: none;
182
- color: green;
183
- background-color: #262626;
201
+ font-family: var(--font-family);
202
+ font-size: var(--font-size);
203
+ color: var(--color-text);
204
+ background-color: var(--color-5);
205
+ border: 1px inset var(--color-1);
206
+ border-radius: 3px;
184
207
  }
185
208
  .flexlayout__tab_button_textbox:focus {
186
209
  outline: none;
187
210
  }
188
211
  .flexlayout__tab_button_trailing {
189
- display: inline-block;
212
+ display: flex;
190
213
  margin-left: 8px;
191
214
  min-width: 8px;
192
215
  min-height: 8px;
@@ -243,8 +266,8 @@
243
266
  overflow: auto;
244
267
  position: absolute;
245
268
  box-sizing: border-box;
246
- color: white;
247
- background-color: black;
269
+ color: var(--color-text);
270
+ background-color: var(--color-background);
248
271
  display: flex;
249
272
  justify-content: center;
250
273
  align-items: center;
@@ -267,25 +290,25 @@
267
290
  box-sizing: border-box;
268
291
  overflow: hidden;
269
292
  display: flex;
270
- font-size: medium;
271
- font-family: Roboto, Arial, sans-serif;
272
- background-color: #121212;
293
+ font-size: var(--font-size);
294
+ font-family: var(--font-family);
295
+ background-color: var(--color-1);
273
296
  }
274
297
  .flexlayout__border_top {
275
- border-bottom: 1px solid #262626;
298
+ border-bottom: 1px solid var(--color-3);
276
299
  align-items: center;
277
300
  }
278
301
  .flexlayout__border_bottom {
279
- border-top: 1px solid #262626;
302
+ border-top: 1px solid var(--color-3);
280
303
  align-items: center;
281
304
  }
282
305
  .flexlayout__border_left {
283
- border-right: 1px solid #262626;
306
+ border-right: 1px solid var(--color-3);
284
307
  align-content: center;
285
308
  flex-direction: column;
286
309
  }
287
310
  .flexlayout__border_right {
288
- border-left: 1px solid #262626;
311
+ border-left: 1px solid var(--color-3);
289
312
  align-content: center;
290
313
  flex-direction: column;
291
314
  }
@@ -324,29 +347,29 @@
324
347
  white-space: nowrap;
325
348
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
326
349
  border-radius: 3px;
327
- background-color: #1a1a1a;
350
+ background-color: var(--color-2);
328
351
  }
329
352
  .flexlayout__border_button--selected {
330
- background-color: #262626;
331
- color: white;
353
+ background-color: var(--color-3);
354
+ color: var(--color-text);
332
355
  }
333
356
  @media (hover: hover) {
334
357
  .flexlayout__border_button:hover {
335
- background-color: #262626;
336
- color: white;
358
+ background-color: var(--color-3);
359
+ color: var(--color-text);
337
360
  }
338
361
  }
339
362
  .flexlayout__border_button--unselected {
340
363
  color: gray;
341
364
  }
342
365
  .flexlayout__border_button_leading {
343
- display: inline;
366
+ display: flex;
344
367
  }
345
368
  .flexlayout__border_button_content {
346
- display: inline-block;
369
+ display: flex;
347
370
  }
348
371
  .flexlayout__border_button_trailing {
349
- display: inline-block;
372
+ display: flex;
350
373
  margin-left: 8px;
351
374
  min-width: 8px;
352
375
  min-height: 8px;
@@ -399,23 +422,26 @@
399
422
  margin-top: 5px;
400
423
  }
401
424
  .flexlayout__popup_menu {
402
- font-size: medium;
403
- font-family: Roboto, Arial, sans-serif;
425
+ font-size: var(--font-size);
426
+ font-family: var(--font-family);
404
427
  }
405
428
  .flexlayout__popup_menu_item {
429
+ margin: 2px;
406
430
  padding: 2px 10px 2px 10px;
407
431
  white-space: nowrap;
432
+ cursor: pointer;
433
+ border-radius: 2px;
408
434
  }
409
435
  @media (hover: hover) {
410
436
  .flexlayout__popup_menu_item:hover {
411
- background-color: #4d4d4d;
437
+ background-color: var(--color-6);
412
438
  }
413
439
  }
414
440
  .flexlayout__popup_menu_container {
415
441
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
416
- border: 1px solid #4d4d4d;
417
- color: white;
418
- background: black;
442
+ border: 1px solid var(--color-6);
443
+ color: var(--color-text);
444
+ background: var(--color-background);
419
445
  border-radius: 3px;
420
446
  position: absolute;
421
447
  z-index: 1000;
@@ -441,8 +467,8 @@
441
467
  bottom: 0;
442
468
  position: absolute;
443
469
  box-sizing: border-box;
444
- background-color: black;
445
- color: white;
470
+ background-color: var(--color-background);
471
+ color: var(--color-text);
446
472
  }
447
473
  .flexlayout__error_boundary_container {
448
474
  left: 0;
@@ -460,20 +486,20 @@
460
486
  .flexlayout__tabset_sizer {
461
487
  padding-top: 5px;
462
488
  padding-bottom: 3px;
463
- font-size: medium;
464
- font-family: Roboto, Arial, sans-serif;
489
+ font-size: var(--font-size);
490
+ font-family: var(--font-family);
465
491
  }
466
492
  .flexlayout__tabset_header_sizer {
467
493
  padding-top: 3px;
468
494
  padding-bottom: 3px;
469
- font-size: medium;
470
- font-family: Roboto, Arial, sans-serif;
495
+ font-size: var(--font-size);
496
+ font-family: var(--font-family);
471
497
  }
472
498
  .flexlayout__border_sizer {
473
499
  padding-top: 6px;
474
500
  padding-bottom: 5px;
475
- font-size: medium;
476
- font-family: Roboto, Arial, sans-serif;
501
+ font-size: var(--font-size);
502
+ font-family: var(--font-family);
477
503
  }
478
504
 
479
505
  /*# sourceMappingURL=dark.css.map */