flexlayout-react 0.8.5 → 0.8.7

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