flexlayout-react 0.8.4 → 0.8.6

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 (56) hide show
  1. package/ChangeLog.txt +9 -0
  2. package/README.md +29 -2
  3. package/declarations/Types.d.ts +2 -6
  4. package/declarations/view/Layout.d.ts +3 -1
  5. package/dist/flexlayout.js +7 -7
  6. package/dist/flexlayout_min.js +1 -1
  7. package/lib/Types.js +2 -6
  8. package/lib/Types.js.map +1 -1
  9. package/lib/model/TabSetNode.js +9 -4
  10. package/lib/model/TabSetNode.js.map +1 -1
  11. package/lib/view/BorderTabSet.js +11 -5
  12. package/lib/view/BorderTabSet.js.map +1 -1
  13. package/lib/view/Layout.js +3 -2
  14. package/lib/view/Layout.js.map +1 -1
  15. package/lib/view/PopupMenu.js +11 -5
  16. package/lib/view/PopupMenu.js.map +1 -1
  17. package/lib/view/TabOverflowHook.js +104 -21
  18. package/lib/view/TabOverflowHook.js.map +1 -1
  19. package/lib/view/TabSet.js +11 -5
  20. package/lib/view/TabSet.js.map +1 -1
  21. package/package.json +2 -2
  22. package/src/Types.ts +3 -8
  23. package/src/model/TabSetNode.ts +8 -4
  24. package/src/view/BorderTabSet.tsx +38 -24
  25. package/src/view/Layout.tsx +9 -5
  26. package/src/view/PopupMenu.tsx +31 -19
  27. package/src/view/TabOverflowHook.tsx +112 -21
  28. package/src/view/TabSet.tsx +36 -22
  29. package/style/_base.scss +569 -595
  30. package/style/_themes.scss +649 -0
  31. package/style/combined.css +1055 -0
  32. package/style/combined.css.map +1 -0
  33. package/style/combined.scss +46 -0
  34. package/style/dark.css +704 -701
  35. package/style/dark.css.map +1 -1
  36. package/style/dark.scss +5 -181
  37. package/style/gray.css +707 -684
  38. package/style/gray.css.map +1 -1
  39. package/style/gray.scss +5 -180
  40. package/style/light.css +681 -685
  41. package/style/light.css.map +1 -1
  42. package/style/light.scss +5 -163
  43. package/style/rounded.css +723 -730
  44. package/style/rounded.css.map +1 -1
  45. package/style/rounded.scss +5 -210
  46. package/style/underline.css +710 -705
  47. package/style/underline.css.map +1 -1
  48. package/style/underline.scss +5 -186
  49. package/.editorconfig +0 -8
  50. package/.github/ISSUE_TEMPLATE/bug_report.yml +0 -104
  51. package/.github/ISSUE_TEMPLATE/config.yml +0 -5
  52. package/.prettierrc.json +0 -3
  53. package/Screenshot_light.png +0 -0
  54. package/Screenshot_rounded.png +0 -0
  55. package/dist/bundles/demo.js +0 -232052
  56. package/dist/bundles/demo.js.map +0 -1
package/style/_base.scss CHANGED
@@ -13,771 +13,745 @@
13
13
  min-height: 0;
14
14
  }
15
15
 
16
- .flexlayout {
17
- &__layout {
18
- @include absoluteFill;
19
- display:flex;
20
-
21
- &_overlay {
16
+ @mixin baseMixin {
17
+ /*
18
+ base classes
19
+ */
20
+ .flexlayout {
21
+ &__layout {
22
22
  @include absoluteFill;
23
- z-index: 1000;
24
- }
25
-
26
- &_tab_stamps {
27
- position:absolute;
28
- top:-10000px; // offscreen
29
- z-index:100;
30
23
  display: flex;
31
- flex-direction: column;
32
- align-items: start;
24
+ background-color: var(--color-background);
25
+
26
+ &_overlay {
27
+ @include absoluteFill;
28
+ z-index: 1000;
29
+ }
30
+
31
+ &_tab_stamps {
32
+ position: absolute;
33
+ top: -10000px; // offscreen
34
+ z-index: 100;
35
+ display: flex;
36
+ flex-direction: column;
37
+ align-items: start;
38
+ }
39
+
40
+ &_moveables {
41
+ visibility: hidden;
42
+ position: absolute;
43
+ width: 100px; // size is needed to tabs have something to draw into
44
+ height: 100px;
45
+ top: -20000px; // offscreen
46
+ }
47
+
48
+ &_main {
49
+ @include flexFix;
50
+ flex-grow: 1;
51
+ position: relative;
52
+ }
33
53
  }
34
54
 
35
- &_moveables {
36
- visibility: hidden;
37
- position:absolute;
38
- width: 100px; // size is needed to tabs have something to draw into
39
- height: 100px;
40
- top:-20000px; // offscreen
55
+ &__layout_border_container {
56
+ @include flexFix;
57
+ flex-grow: 1;
41
58
  }
42
59
 
43
- &_main {
60
+ &__layout_border_container_inner {
44
61
  @include flexFix;
45
- flex-grow:1;
46
- position:relative;
62
+ flex-grow: 1;
47
63
  }
48
- }
49
64
 
50
- &__layout_border_container {
51
- @include flexFix;
52
- flex-grow:1;
53
- }
65
+ &__splitter {
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ background-color: var(--color-splitter);
70
+ touch-action: none;
71
+ z-index: 10;
54
72
 
55
- &__layout_border_container_inner {
56
- @include flexFix;
57
- flex-grow: 1;
58
- }
73
+ @media (hover: hover) {
74
+ &:hover {
75
+ background-color: var(--color-splitter-hover);
76
+ transition: background-color ease-in .1s;
77
+ transition-delay: 0.05s;
78
+ }
79
+ }
59
80
 
60
- &__splitter {
61
- display: flex;
62
- align-items: center;
63
- justify-content: center;
64
- background-color: var(--color-splitter);
65
- touch-action: none;
66
- z-index: 10;
67
- @include splitter_mixin;
68
-
69
- @media (hover: hover) {
70
- &:hover {
71
- background-color: var(--color-splitter-hover);
72
- transition: background-color ease-in .1s;
73
- transition-delay: 0.05s;
74
- @include splitter_hover_mixin;
81
+ &_border {
75
82
  }
76
- }
77
- &_border {
78
- @include splitter_border_mixin;
79
- }
80
- &_drag {
81
- position:absolute;
82
- display:flex;
83
- align-items: center;
84
- justify-content: center;
85
- z-index: 1000;
86
- background-color: var(--color-splitter-drag);
87
- @include splitter_drag_mixin;
88
- }
89
- &_handle {
90
- background-color:#ccc;
91
- border-radius:3px;
92
83
 
93
- &_horz {
94
- width: 3px;
95
- height:30px;
84
+ &_drag {
85
+ position: absolute;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ z-index: 1000;
90
+ border-radius: 5px;
91
+ background-color: var(--color-splitter-drag);
96
92
  }
97
- &_vert {
98
- width: 30px;
99
- height:3px;
93
+
94
+ &_handle {
95
+ background-color: #ccc;
96
+ border-radius: 3px;
97
+
98
+ &_horz {
99
+ width: 3px;
100
+ height: 30px;
101
+ }
102
+
103
+ &_vert {
104
+ width: 30px;
105
+ height: 3px;
106
+ }
100
107
  }
101
- }
102
108
 
103
- &_extra {
104
- touch-action: none;
105
- background-color: transparent;
109
+ &_extra {
110
+ touch-action: none;
111
+ background-color: transparent;
112
+ }
106
113
  }
107
- }
108
114
 
109
- &__outline_rect {
110
- position: absolute;
111
- pointer-events: none;
112
- box-sizing: border-box;
113
- border: 2px solid var(--color-drag1);
114
- background: var(--color-drag1-background);
115
- border-radius: 5px;
116
- z-index: 1000;
117
-
118
- &_edge {
115
+ &__outline_rect {
116
+ position: absolute;
119
117
  pointer-events: none;
120
- border: 2px solid var(--color-drag2);
121
- background: var(--color-drag2-background);
118
+ box-sizing: border-box;
119
+ border: 2px solid var(--color-drag1);
120
+ background: var(--color-drag1-background);
122
121
  border-radius: 5px;
123
122
  z-index: 1000;
124
- box-sizing: border-box;
125
- }
126
- }
127
123
 
128
- &__edge_rect {
129
- position: absolute;
130
- z-index: 1000;
131
- background-color: var(--color-edge-marker);
132
- pointer-events: none;
133
- display:flex;
134
- align-items: center;
135
- justify-content: center;
136
- }
124
+ &_edge {
125
+ pointer-events: none;
126
+ border: 2px solid var(--color-drag2);
127
+ background: var(--color-drag2-background);
128
+ border-radius: 5px;
129
+ z-index: 1000;
130
+ box-sizing: border-box;
131
+ }
132
+ }
137
133
 
138
- &__drag_rect {
139
- color: var(--color-drag-rect);
140
- background-color: var(--color-drag-rect-background);
141
- border: 2px solid var(--color-drag-rect-border);
142
- border-radius: 5px;
143
- box-sizing: border-box;
144
- // text-align: center;
145
-
146
- display: flex;
147
- justify-content: center;
148
- flex-direction: column;
149
- overflow: hidden;
150
- padding: 0.3em .8em;
151
- word-wrap: break-word;
152
- font-size: var(--font-size);
153
- font-family: var(--font-family);
154
- }
134
+ &__edge_rect {
135
+ position: absolute;
136
+ z-index: 1000;
137
+ background-color: var(--color-edge-marker);
138
+ pointer-events: none;
139
+ display: flex;
140
+ align-items: center;
141
+ justify-content: center;
142
+ }
155
143
 
156
- &__row {
157
- @include flexFix;
158
- position: relative;
159
- box-sizing: border-box;
160
- overflow: hidden;
161
- }
144
+ &__drag_rect {
145
+ color: var(--color-drag-rect);
146
+ background-color: var(--color-drag-rect-background);
147
+ border: 2px solid var(--color-drag-rect-border);
148
+ border-radius: 5px;
149
+ box-sizing: border-box;
150
+ // text-align: center;
162
151
 
163
- &__tabset {
164
- display:flex;
165
- flex-direction: column;
166
- position: relative;
167
- background-color: var(--color-tabset-background);
168
- box-sizing: border-box;
169
- font-family: var(--font-family);
170
- overflow: hidden;
171
- flex-grow:1;
172
- @include tabset_mixin;
173
-
174
- &_container {
175
- @include flexFix;
152
+ display: flex;
153
+ justify-content: center;
176
154
  flex-direction: column;
177
155
  overflow: hidden;
178
- flex-grow:1;
179
- }
180
-
181
- &_tab_divider {
182
- width: 4px;
183
- @include tabset_tab_divider_mixin;
156
+ padding: 0.3em .8em;
157
+ word-wrap: break-word;
158
+ font-size: var(--font-size);
159
+ font-family: var(--font-family);
184
160
  }
185
161
 
186
- &_content {
162
+ &__row {
187
163
  @include flexFix;
188
- flex-grow: 1;
189
- box-sizing: border-box;
190
164
  position: relative;
165
+ box-sizing: border-box;
166
+ overflow: hidden;
191
167
  }
192
168
 
193
- &_header {
194
- // tabset header bar
169
+ &__tabset {
195
170
  display: flex;
196
- align-items: center;
197
- padding: 3px 3px 3px 5px;
171
+ flex-direction: column;
172
+ position: relative;
173
+ background-color: var(--color-tabset-background);
198
174
  box-sizing: border-box;
199
- border-bottom: 1px solid var(--color-tabset-divider-line);
200
- color: var(--color-tabset-header);
201
- background-color: var(--color-tabset-header-background);
202
- font-size: var(--font-size);
203
- @include tabset_header_mixin;
175
+ font-family: var(--font-family);
176
+ overflow: hidden;
177
+ flex-grow: 1;
204
178
 
205
- &_content {
179
+ &_container {
180
+ @include flexFix;
181
+ flex-direction: column;
182
+ overflow: hidden;
206
183
  flex-grow: 1;
207
184
  }
208
- }
209
185
 
210
- &_tabbar {
211
- &_outer {
212
- // tabset tabbar outer
186
+ &_tab_divider {
187
+ width: 4px;
188
+ }
189
+
190
+ &_content {
191
+ @include flexFix;
192
+ flex-grow: 1;
213
193
  box-sizing: border-box;
214
- background-color: var(--color-tabset-background);
215
- overflow: hidden;
216
- display: flex;
217
- font-size: var(--font-size);
218
- @include tabset_tabbar_mixin;
194
+ position: relative;
219
195
  }
220
196
 
221
- &_outer_top {
222
- padding:0px 2px 0px 2px;
197
+ &_header {
198
+ // tabset header bar
199
+ display: flex;
200
+ align-items: center;
201
+ padding: 3px 3px 3px 5px;
202
+ box-sizing: border-box;
223
203
  border-bottom: 1px solid var(--color-tabset-divider-line);
224
- }
204
+ color: var(--color-tabset-header);
205
+ background-color: var(--color-tabset-header-background);
206
+ font-size: var(--font-size);
225
207
 
226
- &_outer_bottom {
227
- padding: 0px 2px 0px 2px;
228
- border-top: 1px solid var(--color-tabset-divider-line);
208
+ &_content {
209
+ flex-grow: 1;
210
+ }
229
211
  }
230
212
 
231
- &_inner {
232
- // tabset tabbar inner
233
- position: relative;
234
- box-sizing: border-box;
235
- display: flex;
236
- flex-grow: 1;
237
- overflow: hidden;
213
+ &_tabbar {
214
+ &_outer {
215
+ // tabset tabbar outer
216
+ box-sizing: border-box;
217
+ background-color: var(--color-tabset-background);
218
+ overflow: hidden;
219
+ display: flex;
220
+ font-size: var(--font-size);
221
+ }
238
222
 
239
- &_tab_container {
223
+ &_outer_top {
224
+ padding: 0px 2px 0px 2px;
225
+ border-bottom: 1px solid var(--color-tabset-divider-line);
226
+ }
227
+
228
+ &_outer_bottom {
229
+ padding: 0px 2px 0px 2px;
230
+ border-top: 1px solid var(--color-tabset-divider-line);
231
+ }
232
+
233
+ &_inner {
234
+ // tabset tabbar inner
240
235
  position: relative;
241
- display: flex;
242
- padding-left: 4px;
243
- padding-right: 4px;
244
236
  box-sizing: border-box;
245
- white-space: nowrap;
246
-
247
- &_top {
248
- border-top: 2px solid transparent;
237
+ display: flex;
238
+ flex-grow: 1;
239
+ scrollbar-width: none; // firefox
240
+
241
+ &::-webkit-scrollbar {
242
+ display: none;
249
243
  }
250
- &_bottom {
251
- border-bottom: 2px solid transparent;
244
+
245
+ &_tab_container {
246
+ position: relative;
247
+ display: flex;
248
+ padding-left: 4px;
249
+ padding-right: 4px;
250
+ box-sizing: border-box;
251
+ white-space: nowrap;
252
+
253
+ &_top {
254
+ border-top: 2px solid transparent;
255
+ }
256
+
257
+ &_bottom {
258
+ border-bottom: 2px solid transparent;
259
+ }
252
260
  }
253
261
  }
254
262
  }
255
- }
256
263
 
257
- &-selected {
258
- background-color: var(--color-tabset-background-selected);
259
- @include tabset_selected_mixin;
260
- }
264
+ &-selected {
265
+ background-color: var(--color-tabset-background-selected);
266
+ }
261
267
 
262
- &-maximized {
263
- background-color: var(--color-tabset-background-maximized);
264
- @include tabset_maximized_mixin;
268
+ &-maximized {
269
+ background-color: var(--color-tabset-background-maximized);
270
+ }
265
271
  }
266
- }
267
272
 
268
- &__tab_button_stamp {
269
- display: inline-flex;
270
- align-items: center;
271
- gap: 0.3em;
272
- white-space: nowrap;
273
- box-sizing: border-box;
274
- }
275
-
276
- &__tab {
277
- overflow: hidden;
278
- box-sizing: border-box;
279
- background-color: var(--color-tab-content);
280
- color: var(--color-text);
281
- position: relative;
282
-
283
- &_moveable {
284
- position:relative;
285
- height:100%;
286
- min-width:1px;
287
- min-height:1px;
288
- overflow:auto;
273
+ &__tab_button_stamp {
274
+ display: inline-flex;
275
+ align-items: center;
276
+ gap: 0.3em;
277
+ white-space: nowrap;
289
278
  box-sizing: border-box;
290
279
  }
291
280
 
292
- &_overlay {
293
- z-index: 20;
294
- position: absolute;
295
- top: 0;
296
- left: 0;
297
- right: 0;
298
- bottom: 0;
299
- background-color: #0000003d;
300
- }
301
-
302
- &_button {
303
- display: flex;
304
- gap: 0.3em;
305
- align-items: center;
281
+ &__tab {
282
+ overflow: hidden;
306
283
  box-sizing: border-box;
307
- padding: 3px 0.5em; // if you change top or bottom update the tabset_sizer above
284
+ background-color: var(--color-tab-content);
285
+ color: var(--color-text);
286
+ position: relative;
308
287
 
309
- cursor: pointer;
310
- @include tab_button_mixin;
288
+ &_moveable {
289
+ position: relative;
290
+ height: 100%;
291
+ min-width: 1px;
292
+ min-height: 1px;
293
+ overflow: auto;
294
+ box-sizing: border-box;
295
+ }
311
296
 
312
- &_stretch {
313
- background-color: transparent;
314
- color:var(--color-tab-selected);
315
- width: 100%;
316
- padding: 3px 0em;
317
- text-wrap: nowrap;
297
+ &_overlay {
298
+ z-index: 20;
299
+ position: absolute;
300
+ top: 0;
301
+ left: 0;
302
+ right: 0;
303
+ bottom: 0;
304
+ background-color: #0000003d;
305
+ }
306
+
307
+ &_button {
318
308
  display: flex;
319
309
  gap: 0.3em;
320
310
  align-items: center;
321
311
  box-sizing: border-box;
312
+ padding: 3px 0.5em; // if you change top or bottom update the tabset_sizer above
313
+
322
314
  cursor: pointer;
323
- @include tab_button_stretch_mixin;
315
+
316
+ &_stretch {
317
+ background-color: transparent;
318
+ color: var(--color-tab-selected);
319
+ width: 100%;
320
+ padding: 3px 0em;
321
+ text-wrap: nowrap;
322
+ display: flex;
323
+ gap: 0.3em;
324
+ align-items: center;
325
+ box-sizing: border-box;
326
+ cursor: pointer;
327
+
328
+ @media (hover: hover) {
329
+ &:hover {
330
+ color: var(--color-tab-selected);
331
+ }
332
+ }
333
+ }
334
+
335
+ &--selected {
336
+ background-color: var(--color-tab-selected-background);
337
+ color: var(--color-tab-selected);
338
+ }
324
339
 
325
340
  @media (hover: hover) {
326
341
  &:hover {
327
- color:var(--color-tab-selected);
328
- @include tab_button_stretch_hovered_mixin;
342
+ color: var(--color-tab-selected);
329
343
  }
330
344
  }
331
- }
332
345
 
333
- &--selected {
334
- background-color:var(--color-tab-selected-background);
335
- color:var(--color-tab-selected);
336
- @include tab_button_selected_mixin;
337
- }
338
- @media (hover: hover) {
339
- &:hover {
340
- color:var(--color-tab-selected);
341
- @include tab_button_hovered_mixin;
346
+ &--unselected {
347
+ background-color: var(--color-tab-unselected-background);
348
+ color: var(--color-tab-unselected);
342
349
  }
343
- }
344
350
 
345
- &--unselected {
346
- background-color:var(--color-tab-unselected-background);
347
- color:var(--color-tab-unselected);
348
- @include tab_button_unselected_mixin;
349
- }
351
+ &_top {
352
+ }
350
353
 
351
- &_top {
352
- @include tab_top_mixin;
353
- }
354
+ &_bottom {
355
+ }
354
356
 
355
- &_bottom {
356
- @include tab_bottom_mixin;
357
- }
357
+ &_leading {
358
+ display: flex;
359
+ }
358
360
 
359
- &_leading {
360
- display: flex;
361
- }
361
+ &_content {
362
+ display: flex;
363
+ text-wrap: nowrap;
364
+ }
362
365
 
363
- &_content {
364
- display: flex;
365
- text-wrap: nowrap;
366
- }
366
+ &_textbox {
367
+ border: none;
368
+ font-family: var(--font-family);
369
+ font-size: var(--font-size);
370
+ color: var(--color-tab-textbox);
371
+ background-color: var(--color-tab-textbox-background);
372
+ border: 1px inset var(--color-1);
373
+ border-radius: 3px;
374
+ width: 10em;
375
+ }
367
376
 
368
- &_textbox {
369
- border: none;
370
- font-family: var(--font-family);
371
- font-size: var(--font-size);
372
- color: var(--color-tab-textbox);
373
- background-color: var(--color-tab-textbox-background);
374
- border: 1px inset var(--color-1);
375
- border-radius: 3px;
376
- width: 10em;
377
- }
377
+ &_textbox:focus {
378
+ outline: none;
379
+ }
378
380
 
379
- &_textbox:focus {
380
- outline: none;
381
- }
381
+ &_trailing {
382
+ display: flex;
383
+ visibility: hidden;
384
+ border-radius: 4px;
382
385
 
383
- &_trailing {
384
- display: flex;
385
- visibility: hidden;
386
- border-radius: 4px;
387
- &:hover {
388
- @include close_button_hovered_mixin;
386
+ &:hover {
387
+ background-color: var(--color-toolbar-button-hover);
388
+ }
389
389
  }
390
- }
391
- @media (pointer: coarse) {
392
- &_trailing {
390
+
391
+ @media (pointer: coarse) {
392
+ &_trailing {}
393
393
  }
394
- }
395
- @media (hover: hover) {
396
- &:hover &_trailing {
394
+
395
+ @media (hover: hover) {
396
+ &:hover &_trailing {
397
+ visibility: visible;
398
+ }
399
+ }
400
+
401
+ &--selected &_trailing {
397
402
  visibility: visible;
398
403
  }
399
- }
400
404
 
401
- &--selected &_trailing {
402
- visibility: visible;
405
+ &_overflow {
406
+ display: flex;
407
+ align-items: center;
408
+ border: none;
409
+ color: var(--color-overflow);
410
+ font-size: inherit;
411
+ background-color: transparent;
412
+ width: 2em;
413
+ overflow: hidden;
414
+ }
403
415
  }
404
416
 
405
- &_overflow {
417
+ &_toolbar {
406
418
  display: flex;
407
419
  align-items: center;
408
- border: none;
409
- color: var(--color-overflow);
410
- font-size: inherit;
411
- background-color: transparent;
412
- width:2em;
413
- overflow: hidden;
414
- }
415
- }
420
+ gap: .3em;
421
+ padding-left: .5em;
422
+ padding-right: .3em;
416
423
 
417
- &_toolbar {
418
- display: flex;
419
- align-items: center;
420
- gap: .3em;
421
- padding-left: .5em;
422
- padding-right: .3em;
423
-
424
- &_icon {
425
- border: none;
426
- outline: none;
427
- font-size: inherit;
428
- margin: 0px;
429
- background-color: transparent;
430
- padding: 1px;
431
- }
424
+ &_icon {
425
+ border: none;
426
+ outline: none;
427
+ font-size: inherit;
428
+ margin: 0px;
429
+ background-color: transparent;
430
+ padding: 1px;
431
+ }
432
432
 
433
- &_button {
434
- border: none;
435
- outline: none;
436
- font-size: inherit;
437
- margin: 0px;
438
- background-color: transparent;
439
- border-radius: 4px;
440
- padding: 1px;
441
- @media (hover: hover) {
442
- &:hover {
443
- @include toolbar_button_hovered_mixin;
433
+ &_button {
434
+ border: none;
435
+ outline: none;
436
+ font-size: inherit;
437
+ margin: 0px;
438
+ background-color: transparent;
439
+ border-radius: 4px;
440
+ padding: 1px;
441
+
442
+ @media (hover: hover) {
443
+ &:hover {
444
+ background-color: var(--color-toolbar-button-hover);
445
+ }
444
446
  }
445
- }
446
447
 
447
- &-min {
448
- }
448
+ &-min {}
449
449
 
450
- &-max {
451
- }
450
+ &-max {}
452
451
 
453
- &-float {
454
- }
452
+ &-float {}
455
453
 
456
- &-close {
454
+ &-close {}
457
455
  }
458
- }
459
456
 
460
- &_sticky_buttons_container {
461
- display: flex;
462
- gap: 0.3em;
463
- padding-left: 5px;
464
- align-items: center;
457
+ &_sticky_buttons_container {
458
+ display: flex;
459
+ gap: 0.3em;
460
+ padding-left: 5px;
461
+ align-items: center;
462
+ }
465
463
  }
466
464
  }
467
465
 
468
- &_floating {
469
- overflow: auto;
470
- position: absolute;
466
+ &__border {
471
467
  box-sizing: border-box;
472
- color: var(--color-text);
473
- background-color: var(--color-background);
468
+ overflow: hidden;
474
469
  display: flex;
475
- justify-content: center;
476
- align-items: center;
470
+ font-size: var(--font-size);
471
+ font-family: var(--font-family);
472
+ color: var(--color-border);
473
+ background-color: var(--color-border-background);
477
474
 
478
- &_inner {
479
- overflow: auto;
480
- display: flex;
481
- flex-direction: column;
482
- justify-content: center;
483
- align-items: center;
475
+ &_tab_contents {
476
+ box-sizing: border-box;
477
+ overflow: hidden;
478
+ background-color: var(--color-border-tab-content);
484
479
  }
485
480
 
486
- &_inner div {
487
- margin-bottom: 5px;
488
- text-align: center;
481
+ &_top {
482
+ border-bottom: 1px solid var(--color-border-divider-line);
483
+ align-items: center;
489
484
  }
490
485
 
491
- &_inner div a {
492
- color: royalblue;
486
+ &_bottom {
487
+ border-top: 1px solid var(--color-border-divider-line);
488
+ align-items: center;
493
489
  }
494
- }
495
- }
496
490
 
497
- &__border {
498
- box-sizing: border-box;
499
- overflow: hidden;
500
- display: flex;
501
- font-size: var(--font-size);
502
- font-family: var(--font-family);
503
- color: var(--color-border);
504
- background-color: var(--color-border-background);
505
- @include border_mixin;
506
-
507
- &_tab_contents {
508
- box-sizing: border-box;
509
- overflow:hidden;
510
- background-color: var(--color-border-tab-content);
511
- }
512
-
513
- &_top {
514
- border-bottom: 1px solid var(--color-border-divider-line);
515
- align-items: center;
516
- }
491
+ &_left {
492
+ border-right: 1px solid var(--color-border-divider-line);
493
+ align-content: center;
494
+ flex-direction: column;
495
+ }
517
496
 
518
- &_bottom {
519
- border-top: 1px solid var(--color-border-divider-line);
520
- align-items: center;
521
- }
497
+ &_right {
498
+ border-left: 1px solid var(--color-border-divider-line);
499
+ align-content: center;
500
+ flex-direction: column;
501
+ }
522
502
 
523
- &_left {
524
- border-right: 1px solid var(--color-border-divider-line);
525
- align-content: center;
526
- flex-direction: column;
527
- }
503
+ &_inner {
504
+ position: relative;
505
+ box-sizing: border-box;
506
+ align-items: center;
507
+ display: flex;
508
+ flex-grow: 1;
509
+ scrollbar-width: none; // firefox
528
510
 
529
- &_right {
530
- border-left: 1px solid var(--color-border-divider-line);
531
- align-content: center;
532
- flex-direction: column;
533
- }
511
+ &::-webkit-scrollbar {
512
+ display: none;
513
+ }
534
514
 
535
- &_inner {
536
- position: relative;
537
- box-sizing: border-box;
538
- align-items: center;
539
- display: flex;
540
- overflow: hidden;
541
- flex-grow: 1;
515
+ &_tab_container {
516
+ white-space: nowrap;
517
+ display: flex;
518
+ padding-left: 2px;
519
+ padding-right: 2px;
520
+ box-sizing: border-box;
521
+ position: absolute;
542
522
 
543
- &_tab_container {
544
- white-space: nowrap;
545
- display: flex;
546
- padding-left: 2px;
547
- padding-right: 2px;
548
- box-sizing: border-box;
549
- position: absolute;
523
+ &_right {
524
+ transform-origin: top left;
525
+ transform: rotate(90deg);
526
+ }
550
527
 
551
- &_right {
552
- transform-origin: top left;
553
- transform: rotate(90deg);
554
- }
555
- &_left {
556
- flex-direction: row-reverse;
557
- transform-origin: top right;
558
- transform: rotate(-90deg);
528
+ &_left {
529
+ flex-direction: row-reverse;
530
+ transform-origin: top right;
531
+ transform: rotate(-90deg);
532
+ }
559
533
  }
560
534
  }
561
- }
562
535
 
563
- &_tab_divider {
564
- width: 4px;
565
- @include border_tab_divider_mixin;
536
+ &_tab_divider {
537
+ width: 4px;
566
538
  }
567
539
 
568
- &_button {
569
- display: flex;
570
- gap: 0.3em;
571
- align-items: center;
572
- cursor: pointer;
573
- padding: 3px 0.5em;
574
- margin: 2px 0px;
575
- box-sizing: border-box;
576
- white-space: nowrap;
577
- @include border_button_mixin;
540
+ &_button {
541
+ display: flex;
542
+ gap: 0.3em;
543
+ align-items: center;
544
+ cursor: pointer;
545
+ padding: 3px 0.5em;
546
+ margin: 2px 0px;
547
+ box-sizing: border-box;
548
+ white-space: nowrap;
578
549
 
579
- &--selected {
580
- background-color: var(--color-border-tab-selected-background);
581
- color: var(--color-border-tab-selected);
582
- @include border_button_selected_mixin;
583
- }
584
- @media (hover: hover) {
585
- &:hover {
550
+ &--selected {
586
551
  background-color: var(--color-border-tab-selected-background);
587
552
  color: var(--color-border-tab-selected);
588
- @include border_button_hovered_mixin;
589
553
  }
590
- }
591
554
 
592
- &--unselected {
593
- background-color: var(--color-border-tab-unselected-background);
594
- color: var(--color-border-tab-unselected);
595
- @include border_button_unselected_mixin;
596
- }
555
+ @media (hover: hover) {
556
+ &:hover {
557
+ // background-color: var(--color-border-tab-selected-background);
558
+ color: var(--color-border-tab-selected);
559
+ }
560
+ }
597
561
 
598
- &_leading {
599
- display: flex;
600
- }
562
+ &--unselected {
563
+ background-color: var(--color-border-tab-unselected-background);
564
+ color: var(--color-border-tab-unselected);
565
+ }
601
566
 
602
- &_content {
603
- display: flex;
604
- }
567
+ &_leading {
568
+ display: flex;
569
+ }
605
570
 
606
- &_trailing {
607
- display: flex;
608
- border-radius: 4px;
609
- visibility: hidden;
610
- &:hover {
611
- @include close_button_hovered_mixin;
571
+ &_content {
572
+ display: flex;
612
573
  }
613
- }
614
- @media (pointer: coarse) {
574
+
615
575
  &_trailing {
576
+ display: flex;
577
+ border-radius: 4px;
578
+ visibility: hidden;
579
+
580
+ &:hover {
581
+ }
616
582
  }
617
- }
618
- @media (hover: hover) {
619
- &:hover &_trailing {
620
- visibility: visible;
621
- }
622
- }
623
583
 
624
- &--selected &_trailing {
625
- visibility: visible;
626
- }
627
- }
584
+ @media (pointer: coarse) {
585
+ &_trailing {}
586
+ }
628
587
 
629
- &_toolbar {
630
- display: flex;
631
- gap: .3em;
632
- align-items: center;
588
+ @media (hover: hover) {
589
+ &:hover &_trailing {
590
+ visibility: visible;
591
+ }
592
+ }
633
593
 
634
- &_left,
635
- &_right {
636
- flex-direction: column;
637
- padding-top: .5em;
638
- padding-bottom: .3em;
594
+ &--selected &_trailing {
595
+ visibility: visible;
596
+ }
639
597
  }
640
598
 
641
- &_top,
642
- &_bottom {
643
- padding-left: .5em;
644
- padding-right: .3em;
645
- }
599
+ &_toolbar {
600
+ display: flex;
601
+ gap: .3em;
602
+ align-items: center;
646
603
 
647
- &_button {
648
- border: none;
649
- outline: none;
650
- font-size: inherit;
651
- background-color: transparent;
652
- border-radius: 4px;
653
- padding: 1px;
654
- @media (hover: hover) {
655
- &:hover {
656
- @include toolbar_button_hovered_mixin;
657
- }
604
+ &_left,
605
+ &_right {
606
+ flex-direction: column;
607
+ padding-top: .5em;
608
+ padding-bottom: .3em;
658
609
  }
659
-
660
- &-float {
610
+
611
+ &_top,
612
+ &_bottom {
613
+ padding-left: .5em;
614
+ padding-right: .3em;
661
615
  }
662
616
 
663
- &_overflow {
664
- display: flex;
665
- align-items: center;
617
+ &_button {
666
618
  border: none;
667
- color: var(--color-overflow);
619
+ outline: none;
668
620
  font-size: inherit;
669
621
  background-color: transparent;
670
- width:2em;
671
- }
622
+ border-radius: 4px;
623
+ padding: 1px;
672
624
 
673
- &_overflow_top,
674
- &_overflow_bottom {
675
- }
625
+ @media (hover: hover) {
626
+ &:hover {
627
+ background-color: var(--color-toolbar-button-hover);
628
+ }
629
+ }
630
+
631
+ &-float {}
632
+
633
+ &_overflow {
634
+ display: flex;
635
+ align-items: center;
636
+ border: none;
637
+ color: var(--color-overflow);
638
+ font-size: inherit;
639
+ background-color: transparent;
640
+ width: 1.5em;
641
+ }
676
642
 
677
- &_overflow_right,
678
- &_overflow_left {
643
+ &_overflow_top,
644
+ &_overflow_bottom {}
645
+
646
+ &_overflow_right,
647
+ &_overflow_left {}
679
648
  }
680
649
  }
681
650
  }
682
- }
683
651
 
684
- &__popup_menu {
685
- font-size: var(--font-size);
686
- font-family: var(--font-family);
652
+ &__popup_menu {
653
+ font-size: var(--font-size);
654
+ font-family: var(--font-family);
687
655
 
688
- &_item {
689
- padding: 2px 0.5em;
690
- white-space: nowrap;
691
- cursor: pointer;
692
- border-radius: 2px;
693
- }
656
+ &_item {
657
+ padding: 2px 0.5em;
658
+ white-space: nowrap;
659
+ cursor: pointer;
660
+ border-radius: 2px;
694
661
 
695
- @media (hover: hover) {
696
- &_item:hover {
697
- background-color: var(--color-6);
662
+ &--selected {
663
+ font-weight: 500;
664
+ background-color: var(--color-tab-selected-background);
665
+ color: var(--color-tab-selected);
666
+ }
698
667
  }
699
- }
700
668
 
701
- &_container {
702
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
703
- border: 1px solid var(--color-popup-border);
704
- color: var(--color-popup-unselected);
705
- background: var(--color-popup-unselected-background);
706
- border-radius: 3px;
707
- position: absolute;
708
- z-index: 1000;
709
- max-height: 50%;
710
- min-width: 100px;
711
- overflow: auto;
712
- padding: 2px;
669
+ @media (hover: hover) {
670
+ &_item:hover {
671
+ background-color: var(--color-6);
672
+ }
673
+ }
674
+
675
+ &_container {
676
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
677
+ border: 1px solid var(--color-popup-border);
678
+ color: var(--color-popup-unselected);
679
+ background: var(--color-popup-unselected-background);
680
+ border-radius: 3px;
681
+ position: absolute;
682
+ z-index: 1000;
683
+ max-height: 50%;
684
+ min-width: 100px;
685
+ overflow: auto;
686
+ padding: 2px;
687
+ }
713
688
  }
714
- }
715
689
 
716
- &__floating_window {
717
- _body {
718
- height: 100%;
690
+ &__floating_window {
691
+ _body {
692
+ height: 100%;
693
+ }
694
+
695
+ &_content {
696
+ @include absoluteFill;
697
+ }
719
698
  }
720
699
 
721
- &_content {
700
+ &__error_boundary_container {
722
701
  @include absoluteFill;
702
+ display: flex;
703
+ justify-content: center;
723
704
  }
724
- }
725
705
 
726
- &__error_boundary_container {
727
- @include absoluteFill;
728
- display: flex;
729
- justify-content: center;
730
- }
731
- &__error_boundary_content {
732
- display: flex;
733
- align-items: center;
734
- }
706
+ &__error_boundary_content {
707
+ display: flex;
708
+ align-items: center;
709
+ }
735
710
 
736
- // These classes are used to measure the sizes for tab header bar, tab bar and border bars,
737
- // only the height is used, the padding should match the vertical spacing (padding & margins)
738
- // that have been used in the above classes
711
+ // This class is used to measure the size for the border bars,
712
+ // only the height is used, the padding should match the vertical spacing (padding & margins)
713
+ // that have been used in the above classes
739
714
 
740
- &__tabset_sizer {
741
- padding-top: 5px; // tab_button has 3 padding top, tabset header inner has 2 border
742
- padding-bottom: 3px; // tab_button has 3 padding bottom
743
- font-size: var(--font-size);
744
- font-family: var(--font-family);
745
- }
715
+ &__border_sizer {
716
+ position: absolute;
717
+ top: -30000px; // offscreen
718
+ padding-top: 6px;
719
+ padding-bottom: 5px;
720
+ font-size: var(--font-size);
721
+ font-family: var(--font-family);
722
+ }
746
723
 
747
- &__tabset_header_sizer {
748
- padding-top: 3px;
749
- padding-bottom: 3px;
750
- font-size: var(--font-size);
751
- font-family: var(--font-family);
752
- }
724
+ &__mini_scrollbar {
725
+ position: absolute;
726
+ background-color: var(--color-mini-scroll-indicator);
727
+ border-radius: 5px;
728
+ width: var(--size-mini-scroll-indicator);
729
+ height: var(--size-mini-scroll-indicator);
730
+ visibility: hidden;
731
+ opacity: 0;
732
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
733
+ }
753
734
 
754
- &__border_sizer {
755
- position:absolute;
756
- top:-30000px; // offscreen
757
- padding-top: 6px;
758
- padding-bottom: 5px;
759
- font-size: var(--font-size);
760
- font-family: var(--font-family);
761
- }
735
+ &__mini_scrollbar:hover {
736
+ background-color: var(--color-mini-scroll-indicator-hovered);
737
+ transition: background-color 0.3s ease-in-out;
738
+ }
762
739
 
763
- &__mini_scrollbar::-webkit-scrollbar {
764
- width: 3px;
765
- height: 3px;
766
- }
740
+ &__mini_scrollbar_container {
741
+ position: relative;
742
+ display: flex;
743
+ flex-grow: 1;
744
+ overflow: hidden;
767
745
 
768
- &__mini_scrollbar_hidden::-webkit-scrollbar {
769
- display: none;
770
- }
771
-
772
- &__mini_scrollbar::-webkit-scrollbar-button {
773
- display: none;
774
- }
775
-
776
- &__mini_scrollbar::-webkit-scrollbar-thumb {
777
- background: #aaa;
778
- border-radius: 10px;
746
+ @media (hover: hover) {
747
+ &:hover .flexlayout__mini_scrollbar {
748
+ opacity: 1;
749
+ visibility: visible;
750
+ }
751
+ }
752
+ }
779
753
  }
780
754
 
781
- }
782
-
755
+ /* ======================== End of Base Classes =========================== */
783
756
 
757
+ }