flexlayout-react 0.8.5 → 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 (44) hide show
  1. package/ChangeLog.txt +6 -0
  2. package/README.md +29 -2
  3. package/declarations/Types.d.ts +0 -5
  4. package/declarations/view/Layout.d.ts +3 -1
  5. package/dist/flexlayout.js +3 -3
  6. package/dist/flexlayout_min.js +1 -1
  7. package/lib/Types.js +0 -5
  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/Layout.js +3 -2
  12. package/lib/view/Layout.js.map +1 -1
  13. package/package.json +2 -2
  14. package/src/Types.ts +0 -6
  15. package/src/model/TabSetNode.ts +8 -4
  16. package/src/view/Layout.tsx +9 -5
  17. package/style/_base.scss +563 -614
  18. package/style/_themes.scss +649 -0
  19. package/style/combined.css +1055 -0
  20. package/style/combined.css.map +1 -0
  21. package/style/combined.scss +46 -0
  22. package/style/dark.css +40 -63
  23. package/style/dark.css.map +1 -1
  24. package/style/dark.scss +5 -185
  25. package/style/gray.css +53 -56
  26. package/style/gray.css.map +1 -1
  27. package/style/gray.scss +5 -184
  28. package/style/light.css +22 -52
  29. package/style/light.css.map +1 -1
  30. package/style/light.scss +5 -167
  31. package/style/rounded.css +42 -75
  32. package/style/rounded.css.map +1 -1
  33. package/style/rounded.scss +5 -215
  34. package/style/underline.css +44 -65
  35. package/style/underline.css.map +1 -1
  36. package/style/underline.scss +5 -190
  37. package/.editorconfig +0 -8
  38. package/.github/ISSUE_TEMPLATE/bug_report.yml +0 -104
  39. package/.github/ISSUE_TEMPLATE/config.yml +0 -5
  40. package/.prettierrc.json +0 -3
  41. package/Screenshot_light.png +0 -0
  42. package/Screenshot_rounded.png +0 -0
  43. package/dist/bundles/demo.js +0 -232052
  44. package/dist/bundles/demo.js.map +0 -1
package/style/_base.scss CHANGED
@@ -13,796 +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
- scrollbar-width: none; // firefox
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
- &::-webkit-scrollbar {
240
- display: none;
223
+ &_outer_top {
224
+ padding: 0px 2px 0px 2px;
225
+ border-bottom: 1px solid var(--color-tabset-divider-line);
241
226
  }
242
227
 
243
- &_tab_container {
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
244
235
  position: relative;
245
- display: flex;
246
- padding-left: 4px;
247
- padding-right: 4px;
248
236
  box-sizing: border-box;
249
- white-space: nowrap;
250
-
251
- &_top {
252
- border-top: 2px solid transparent;
237
+ display: flex;
238
+ flex-grow: 1;
239
+ scrollbar-width: none; // firefox
240
+
241
+ &::-webkit-scrollbar {
242
+ display: none;
253
243
  }
254
- &_bottom {
255
- 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
+ }
256
260
  }
257
261
  }
258
262
  }
259
- }
260
263
 
261
- &-selected {
262
- background-color: var(--color-tabset-background-selected);
263
- @include tabset_selected_mixin;
264
- }
264
+ &-selected {
265
+ background-color: var(--color-tabset-background-selected);
266
+ }
265
267
 
266
- &-maximized {
267
- background-color: var(--color-tabset-background-maximized);
268
- @include tabset_maximized_mixin;
268
+ &-maximized {
269
+ background-color: var(--color-tabset-background-maximized);
270
+ }
269
271
  }
270
- }
271
272
 
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;
273
+ &__tab_button_stamp {
274
+ display: inline-flex;
275
+ align-items: center;
276
+ gap: 0.3em;
277
+ white-space: nowrap;
293
278
  box-sizing: border-box;
294
279
  }
295
280
 
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;
281
+ &__tab {
282
+ overflow: hidden;
310
283
  box-sizing: border-box;
311
- 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;
312
287
 
313
- cursor: pointer;
314
- @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
+ }
315
296
 
316
- &_stretch {
317
- background-color: transparent;
318
- color:var(--color-tab-selected);
319
- width: 100%;
320
- padding: 3px 0em;
321
- 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 {
322
308
  display: flex;
323
309
  gap: 0.3em;
324
310
  align-items: center;
325
311
  box-sizing: border-box;
312
+ padding: 3px 0.5em; // if you change top or bottom update the tabset_sizer above
313
+
326
314
  cursor: pointer;
327
- @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
+ }
328
339
 
329
340
  @media (hover: hover) {
330
341
  &:hover {
331
- color:var(--color-tab-selected);
332
- @include tab_button_stretch_hovered_mixin;
342
+ color: var(--color-tab-selected);
333
343
  }
334
344
  }
335
- }
336
345
 
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;
346
+ &--unselected {
347
+ background-color: var(--color-tab-unselected-background);
348
+ color: var(--color-tab-unselected);
346
349
  }
347
- }
348
350
 
349
- &--unselected {
350
- background-color:var(--color-tab-unselected-background);
351
- color:var(--color-tab-unselected);
352
- @include tab_button_unselected_mixin;
353
- }
351
+ &_top {
352
+ }
354
353
 
355
- &_top {
356
- @include tab_top_mixin;
357
- }
354
+ &_bottom {
355
+ }
358
356
 
359
- &_bottom {
360
- @include tab_bottom_mixin;
361
- }
357
+ &_leading {
358
+ display: flex;
359
+ }
362
360
 
363
- &_leading {
364
- display: flex;
365
- }
361
+ &_content {
362
+ display: flex;
363
+ text-wrap: nowrap;
364
+ }
366
365
 
367
- &_content {
368
- display: flex;
369
- text-wrap: nowrap;
370
- }
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
+ }
371
376
 
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
- }
377
+ &_textbox:focus {
378
+ outline: none;
379
+ }
382
380
 
383
- &_textbox:focus {
384
- outline: none;
385
- }
381
+ &_trailing {
382
+ display: flex;
383
+ visibility: hidden;
384
+ border-radius: 4px;
386
385
 
387
- &_trailing {
388
- display: flex;
389
- visibility: hidden;
390
- border-radius: 4px;
391
- &:hover {
392
- @include close_button_hovered_mixin;
386
+ &:hover {
387
+ background-color: var(--color-toolbar-button-hover);
388
+ }
393
389
  }
394
- }
395
- @media (pointer: coarse) {
396
- &_trailing {
390
+
391
+ @media (pointer: coarse) {
392
+ &_trailing {}
397
393
  }
398
- }
399
- @media (hover: hover) {
400
- &:hover &_trailing {
394
+
395
+ @media (hover: hover) {
396
+ &:hover &_trailing {
397
+ visibility: visible;
398
+ }
399
+ }
400
+
401
+ &--selected &_trailing {
401
402
  visibility: visible;
402
403
  }
403
- }
404
404
 
405
- &--selected &_trailing {
406
- 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
+ }
407
415
  }
408
416
 
409
- &_overflow {
417
+ &_toolbar {
410
418
  display: flex;
411
419
  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
- }
420
+ gap: .3em;
421
+ padding-left: .5em;
422
+ padding-right: .3em;
420
423
 
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
- }
424
+ &_icon {
425
+ border: none;
426
+ outline: none;
427
+ font-size: inherit;
428
+ margin: 0px;
429
+ background-color: transparent;
430
+ padding: 1px;
431
+ }
436
432
 
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;
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
+ }
448
446
  }
449
- }
450
447
 
451
- &-min {
452
- }
448
+ &-min {}
453
449
 
454
- &-max {
455
- }
450
+ &-max {}
456
451
 
457
- &-float {
458
- }
452
+ &-float {}
459
453
 
460
- &-close {
454
+ &-close {}
461
455
  }
462
- }
463
456
 
464
- &_sticky_buttons_container {
465
- display: flex;
466
- gap: 0.3em;
467
- padding-left: 5px;
468
- align-items: center;
457
+ &_sticky_buttons_container {
458
+ display: flex;
459
+ gap: 0.3em;
460
+ padding-left: 5px;
461
+ align-items: center;
462
+ }
469
463
  }
470
464
  }
471
465
 
472
- &_floating {
473
- overflow: auto;
474
- position: absolute;
466
+ &__border {
475
467
  box-sizing: border-box;
476
- color: var(--color-text);
477
- background-color: var(--color-background);
468
+ overflow: hidden;
478
469
  display: flex;
479
- justify-content: center;
480
- 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);
481
474
 
482
- &_inner {
483
- overflow: auto;
484
- display: flex;
485
- flex-direction: column;
486
- justify-content: center;
487
- align-items: center;
475
+ &_tab_contents {
476
+ box-sizing: border-box;
477
+ overflow: hidden;
478
+ background-color: var(--color-border-tab-content);
488
479
  }
489
480
 
490
- &_inner div {
491
- margin-bottom: 5px;
492
- text-align: center;
481
+ &_top {
482
+ border-bottom: 1px solid var(--color-border-divider-line);
483
+ align-items: center;
493
484
  }
494
485
 
495
- &_inner div a {
496
- color: royalblue;
486
+ &_bottom {
487
+ border-top: 1px solid var(--color-border-divider-line);
488
+ align-items: center;
497
489
  }
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
490
 
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
491
+ &_left {
492
+ border-right: 1px solid var(--color-border-divider-line);
493
+ align-content: center;
494
+ flex-direction: column;
495
+ }
546
496
 
547
- &::-webkit-scrollbar {
548
- display: none;
497
+ &_right {
498
+ border-left: 1px solid var(--color-border-divider-line);
499
+ align-content: center;
500
+ flex-direction: column;
549
501
  }
550
502
 
551
- &_tab_container {
552
- white-space: nowrap;
553
- display: flex;
554
- padding-left: 2px;
555
- padding-right: 2px;
503
+ &_inner {
504
+ position: relative;
556
505
  box-sizing: border-box;
557
- position: absolute;
506
+ align-items: center;
507
+ display: flex;
508
+ flex-grow: 1;
509
+ scrollbar-width: none; // firefox
558
510
 
559
- &_right {
560
- transform-origin: top left;
561
- transform: rotate(90deg);
511
+ &::-webkit-scrollbar {
512
+ display: none;
562
513
  }
563
- &_left {
564
- flex-direction: row-reverse;
565
- transform-origin: top right;
566
- transform: rotate(-90deg);
514
+
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;
522
+
523
+ &_right {
524
+ transform-origin: top left;
525
+ transform: rotate(90deg);
526
+ }
527
+
528
+ &_left {
529
+ flex-direction: row-reverse;
530
+ transform-origin: top right;
531
+ transform: rotate(-90deg);
532
+ }
567
533
  }
568
534
  }
569
- }
570
535
 
571
- &_tab_divider {
572
- width: 4px;
573
- @include border_tab_divider_mixin;
536
+ &_tab_divider {
537
+ width: 4px;
574
538
  }
575
539
 
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;
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;
586
549
 
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 {
550
+ &--selected {
594
551
  background-color: var(--color-border-tab-selected-background);
595
552
  color: var(--color-border-tab-selected);
596
- @include border_button_hovered_mixin;
597
553
  }
598
- }
599
554
 
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
- }
555
+ @media (hover: hover) {
556
+ &:hover {
557
+ // background-color: var(--color-border-tab-selected-background);
558
+ color: var(--color-border-tab-selected);
559
+ }
560
+ }
605
561
 
606
- &_leading {
607
- display: flex;
608
- }
562
+ &--unselected {
563
+ background-color: var(--color-border-tab-unselected-background);
564
+ color: var(--color-border-tab-unselected);
565
+ }
609
566
 
610
- &_content {
611
- display: flex;
612
- }
567
+ &_leading {
568
+ display: flex;
569
+ }
613
570
 
614
- &_trailing {
615
- display: flex;
616
- border-radius: 4px;
617
- visibility: hidden;
618
- &:hover {
619
- @include close_button_hovered_mixin;
571
+ &_content {
572
+ display: flex;
620
573
  }
621
- }
622
- @media (pointer: coarse) {
574
+
623
575
  &_trailing {
576
+ display: flex;
577
+ border-radius: 4px;
578
+ visibility: hidden;
579
+
580
+ &:hover {
581
+ }
624
582
  }
625
- }
626
- @media (hover: hover) {
627
- &:hover &_trailing {
628
- visibility: visible;
629
- }
630
- }
631
583
 
632
- &--selected &_trailing {
633
- visibility: visible;
634
- }
635
- }
584
+ @media (pointer: coarse) {
585
+ &_trailing {}
586
+ }
636
587
 
637
- &_toolbar {
638
- display: flex;
639
- gap: .3em;
640
- align-items: center;
588
+ @media (hover: hover) {
589
+ &:hover &_trailing {
590
+ visibility: visible;
591
+ }
592
+ }
641
593
 
642
- &_left,
643
- &_right {
644
- flex-direction: column;
645
- padding-top: .5em;
646
- padding-bottom: .3em;
594
+ &--selected &_trailing {
595
+ visibility: visible;
596
+ }
647
597
  }
648
598
 
649
- &_top,
650
- &_bottom {
651
- padding-left: .5em;
652
- padding-right: .3em;
653
- }
599
+ &_toolbar {
600
+ display: flex;
601
+ gap: .3em;
602
+ align-items: center;
654
603
 
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
- }
604
+ &_left,
605
+ &_right {
606
+ flex-direction: column;
607
+ padding-top: .5em;
608
+ padding-bottom: .3em;
666
609
  }
667
-
668
- &-float {
610
+
611
+ &_top,
612
+ &_bottom {
613
+ padding-left: .5em;
614
+ padding-right: .3em;
669
615
  }
670
616
 
671
- &_overflow {
672
- display: flex;
673
- align-items: center;
617
+ &_button {
674
618
  border: none;
675
- color: var(--color-overflow);
619
+ outline: none;
676
620
  font-size: inherit;
677
621
  background-color: transparent;
678
- width:1.5em;
679
- }
622
+ border-radius: 4px;
623
+ padding: 1px;
680
624
 
681
- &_overflow_top,
682
- &_overflow_bottom {
683
- }
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
+ }
684
642
 
685
- &_overflow_right,
686
- &_overflow_left {
643
+ &_overflow_top,
644
+ &_overflow_bottom {}
645
+
646
+ &_overflow_right,
647
+ &_overflow_left {}
687
648
  }
688
649
  }
689
650
  }
690
- }
691
651
 
692
- &__popup_menu {
693
- font-size: var(--font-size);
694
- font-family: var(--font-family);
652
+ &__popup_menu {
653
+ font-size: var(--font-size);
654
+ font-family: var(--font-family);
695
655
 
696
- &_item {
697
- padding: 2px 0.5em;
698
- white-space: nowrap;
699
- cursor: pointer;
700
- border-radius: 2px;
656
+ &_item {
657
+ padding: 2px 0.5em;
658
+ white-space: nowrap;
659
+ cursor: pointer;
660
+ border-radius: 2px;
701
661
 
702
- &--selected {
703
- font-weight: 500;
704
- background-color: var(--color-tab-selected-background);
705
- color: var(--color-tab-selected);
662
+ &--selected {
663
+ font-weight: 500;
664
+ background-color: var(--color-tab-selected-background);
665
+ color: var(--color-tab-selected);
666
+ }
667
+ }
668
+
669
+ @media (hover: hover) {
670
+ &_item:hover {
671
+ background-color: var(--color-6);
672
+ }
706
673
  }
707
- }
708
674
 
709
- @media (hover: hover) {
710
- &_item:hover {
711
- background-color: var(--color-6);
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;
712
687
  }
713
688
  }
714
689
 
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
- }
690
+ &__floating_window {
691
+ _body {
692
+ height: 100%;
693
+ }
729
694
 
730
- &__floating_window {
731
- _body {
732
- height: 100%;
695
+ &_content {
696
+ @include absoluteFill;
697
+ }
733
698
  }
734
699
 
735
- &_content {
700
+ &__error_boundary_container {
736
701
  @include absoluteFill;
702
+ display: flex;
703
+ justify-content: center;
737
704
  }
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
705
 
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
706
+ &__error_boundary_content {
707
+ display: flex;
708
+ align-items: center;
709
+ }
753
710
 
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
- }
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
760
714
 
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
- }
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
+ }
767
723
 
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
- }
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
+ }
776
734
 
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
- }
735
+ &__mini_scrollbar:hover {
736
+ background-color: var(--color-mini-scroll-indicator-hovered);
737
+ transition: background-color 0.3s ease-in-out;
738
+ }
787
739
 
788
- &__mini_scrollbar:hover {
789
- background-color: var(--color-mini-scroll-indicator-hovered);
790
- transition: background-color 0.3s ease-in-out;
791
- }
740
+ &__mini_scrollbar_container {
741
+ position: relative;
742
+ display: flex;
743
+ flex-grow: 1;
744
+ overflow: hidden;
792
745
 
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;
746
+ @media (hover: hover) {
747
+ &:hover .flexlayout__mini_scrollbar {
748
+ opacity: 1;
749
+ visibility: visible;
750
+ }
803
751
  }
804
752
  }
805
753
  }
806
- }
807
754
 
755
+ /* ======================== End of Base Classes =========================== */
808
756
 
757
+ }