flexlayout-react 0.6.3 → 0.6.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 (115) hide show
  1. package/ChangeLog.txt +13 -0
  2. package/declarations/Types.d.ts +2 -0
  3. package/declarations/model/Model.d.ts +1 -2
  4. package/declarations/model/RowNode.d.ts +0 -2
  5. package/dist/flexlayout.js +193 -319
  6. package/dist/flexlayout_min.js +1 -1
  7. package/lib/Attribute.js +1 -1
  8. package/lib/Attribute.js.map +1 -1
  9. package/lib/AttributeDefinitions.js +21 -12
  10. package/lib/AttributeDefinitions.js.map +1 -1
  11. package/lib/DockLocation.js +6 -6
  12. package/lib/DockLocation.js.map +1 -1
  13. package/lib/DragDrop.js +24 -22
  14. package/lib/DragDrop.js.map +1 -1
  15. package/lib/Orientation.js +1 -1
  16. package/lib/Orientation.js.map +1 -1
  17. package/lib/PopupMenu.js +6 -6
  18. package/lib/PopupMenu.js.map +1 -1
  19. package/lib/Rect.js +1 -1
  20. package/lib/Rect.js.map +1 -1
  21. package/lib/Types.js +2 -0
  22. package/lib/Types.js.map +1 -1
  23. package/lib/model/BorderNode.js +31 -31
  24. package/lib/model/BorderNode.js.map +1 -1
  25. package/lib/model/BorderSet.js +18 -14
  26. package/lib/model/BorderSet.js.map +1 -1
  27. package/lib/model/Model.js +40 -35
  28. package/lib/model/Model.js.map +1 -1
  29. package/lib/model/Node.js +29 -28
  30. package/lib/model/Node.js.map +1 -1
  31. package/lib/model/RowNode.js +53 -50
  32. package/lib/model/RowNode.js.map +1 -1
  33. package/lib/model/SplitterNode.js +11 -11
  34. package/lib/model/SplitterNode.js.map +1 -1
  35. package/lib/model/TabNode.js +17 -17
  36. package/lib/model/TabNode.js.map +1 -1
  37. package/lib/model/TabSetNode.js +52 -51
  38. package/lib/model/TabSetNode.js.map +1 -1
  39. package/lib/model/Utils.js +3 -3
  40. package/lib/model/Utils.js.map +1 -1
  41. package/lib/view/BorderButton.js +52 -12
  42. package/lib/view/BorderButton.js.map +1 -1
  43. package/lib/view/BorderTabSet.js +5 -4
  44. package/lib/view/BorderTabSet.js.map +1 -1
  45. package/lib/view/ErrorBoundary.js +1 -1
  46. package/lib/view/ErrorBoundary.js.map +1 -1
  47. package/lib/view/FloatingWindow.js +27 -16
  48. package/lib/view/FloatingWindow.js.map +1 -1
  49. package/lib/view/FloatingWindowTab.js +1 -1
  50. package/lib/view/FloatingWindowTab.js.map +1 -1
  51. package/lib/view/Layout.js +80 -75
  52. package/lib/view/Layout.js.map +1 -1
  53. package/lib/view/Splitter.js +1 -1
  54. package/lib/view/Splitter.js.map +1 -1
  55. package/lib/view/Tab.js +5 -5
  56. package/lib/view/Tab.js.map +1 -1
  57. package/lib/view/TabButton.js +10 -15
  58. package/lib/view/TabButton.js.map +1 -1
  59. package/lib/view/TabButtonStamp.js +2 -2
  60. package/lib/view/TabButtonStamp.js.map +1 -1
  61. package/lib/view/TabFloating.js +8 -2
  62. package/lib/view/TabFloating.js.map +1 -1
  63. package/lib/view/TabOverflowHook.js +1 -1
  64. package/lib/view/TabOverflowHook.js.map +1 -1
  65. package/lib/view/TabSet.js +17 -12
  66. package/lib/view/TabSet.js.map +1 -1
  67. package/lib/view/Utils.js +3 -3
  68. package/lib/view/Utils.js.map +1 -1
  69. package/package.json +22 -16
  70. package/src/Attribute.ts +1 -1
  71. package/src/AttributeDefinitions.ts +16 -12
  72. package/src/DockLocation.ts +9 -9
  73. package/src/DragDrop.ts +42 -38
  74. package/src/Orientation.ts +2 -2
  75. package/src/PopupMenu.tsx +4 -4
  76. package/src/Rect.ts +1 -1
  77. package/src/Types.ts +2 -0
  78. package/src/model/BorderNode.ts +29 -28
  79. package/src/model/BorderSet.ts +16 -16
  80. package/src/model/IDraggable.ts +2 -2
  81. package/src/model/IDropTarget.ts +3 -3
  82. package/src/model/Model.ts +41 -41
  83. package/src/model/Node.ts +38 -38
  84. package/src/model/RowNode.ts +46 -44
  85. package/src/model/SplitterNode.ts +11 -11
  86. package/src/model/TabNode.ts +21 -21
  87. package/src/model/TabSetNode.ts +46 -44
  88. package/src/model/Utils.ts +3 -3
  89. package/src/view/BorderButton.tsx +82 -14
  90. package/src/view/BorderTabSet.tsx +6 -2
  91. package/src/view/ErrorBoundary.tsx +3 -3
  92. package/src/view/FloatingWindow.tsx +8 -6
  93. package/src/view/FloatingWindowTab.tsx +2 -2
  94. package/src/view/Layout.tsx +93 -93
  95. package/src/view/Splitter.tsx +2 -2
  96. package/src/view/Tab.tsx +3 -3
  97. package/src/view/TabButton.tsx +11 -15
  98. package/src/view/TabButtonStamp.tsx +2 -2
  99. package/src/view/TabFloating.tsx +11 -2
  100. package/src/view/TabOverflowHook.tsx +1 -1
  101. package/src/view/TabSet.tsx +6 -5
  102. package/src/view/Utils.tsx +3 -3
  103. package/style/_base.scss +55 -43
  104. package/style/dark.css +86 -45
  105. package/style/dark.css.map +1 -1
  106. package/style/dark.scss +70 -25
  107. package/style/gray.css +84 -60
  108. package/style/gray.css.map +1 -1
  109. package/style/gray.scss +70 -24
  110. package/style/light.css +84 -45
  111. package/style/light.css.map +1 -1
  112. package/style/light.scss +68 -19
  113. package/style/underline.css +557 -0
  114. package/style/underline.css.map +1 -0
  115. package/style/underline.scss +172 -0
package/style/light.css CHANGED
@@ -14,6 +14,40 @@
14
14
  --color-drag2-background: rgba(119, 166, 119, 0.075);
15
15
  --font-size: medium;
16
16
  --font-family: Roboto, Arial, sans-serif;
17
+ --color-overflow: gray;
18
+ --color-tabset-background: var(--color-background);
19
+ --color-tabset-background-selected: var(--color-1);
20
+ --color-tabset-background-maximized: var(--color-6);
21
+ --color-tabset-divider-line: var(--color-4);
22
+ --color-tabset-header-background: var(--color-background);
23
+ --color-tabset-header: var(--color-text);
24
+ --color-border-background: var(--color-background);
25
+ --color-border-divider-line: var(--color-4);
26
+ --color-tab-selected: var(--color-text);
27
+ --color-tab-selected-background: var(--color-4);
28
+ --color-tab-unselected: gray;
29
+ --color-tab-unselected-background: transparent;
30
+ --color-tab-textbox: var(--color-text);
31
+ --color-tab-textbox-background: var(--color-3);
32
+ --color-border-tab-selected: var(--color-text);
33
+ --color-border-tab-selected-background: var(--color-4);
34
+ --color-border-tab-unselected: gray;
35
+ --color-border-tab-unselected-background: var(--color-2);
36
+ --color-splitter: var(--color-1);
37
+ --color-splitter-hover: var(--color-4);
38
+ --color-splitter-drag: var(--color-4);
39
+ --color-drag-rect-border: var(--color-6);
40
+ --color-drag-rect-background: var(--color-4);
41
+ --color-drag-rect: var(--color-text);
42
+ --color-popup-border: var(--color-6);
43
+ --color-popup-unselected: var(--color-text);
44
+ --color-popup-unselected-background: white;
45
+ --color-popup-selected: var(--color-text);
46
+ --color-popup-selected-background: var(--color-3);
47
+ --color-edge-marker: gray;
48
+ }
49
+
50
+ .flexlayout__layout {
17
51
  left: 0;
18
52
  top: 0;
19
53
  right: 0;
@@ -22,13 +56,13 @@
22
56
  overflow: hidden;
23
57
  }
24
58
  .flexlayout__splitter {
25
- background-color: var(--color-1);
59
+ background-color: var(--color-splitter);
26
60
  }
27
61
  @media (hover: hover) {
28
62
  .flexlayout__splitter:hover {
63
+ background-color: var(--color-splitter-hover);
29
64
  transition: background-color ease-in 0.1s;
30
65
  transition-delay: 0.05s;
31
- background-color: var(--color-4);
32
66
  }
33
67
  }
34
68
  .flexlayout__splitter_border {
@@ -36,7 +70,7 @@
36
70
  }
37
71
  .flexlayout__splitter_drag {
38
72
  z-index: 1000;
39
- background-color: var(--color-4);
73
+ background-color: var(--color-splitter-drag);
40
74
  }
41
75
  .flexlayout__splitter_extra {
42
76
  background-color: transparent;
@@ -62,16 +96,15 @@
62
96
  position: absolute;
63
97
  z-index: 1000;
64
98
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
65
- background-color: gray;
99
+ background-color: var(--color-edge-marker);
66
100
  pointer-events: none;
67
101
  }
68
102
  .flexlayout__drag_rect {
69
103
  position: absolute;
70
104
  cursor: move;
71
- color: var(--color-text);
72
- background-color: var(--color-1);
73
- border: 2px solid var(--color-4);
74
- box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
105
+ color: var(--color-drag-rect);
106
+ background-color: var(--color-drag-rect-background);
107
+ border: 2px solid var(--color-drag-rect-border);
75
108
  border-radius: 5px;
76
109
  z-index: 1000;
77
110
  box-sizing: border-box;
@@ -81,18 +114,20 @@
81
114
  justify-content: center;
82
115
  flex-direction: column;
83
116
  overflow: hidden;
84
- padding: 0.5em 1em;
117
+ padding: 0.3em 1em;
85
118
  word-wrap: break-word;
86
119
  font-size: var(--font-size);
87
120
  font-family: var(--font-family);
88
121
  }
89
122
  .flexlayout__tabset {
90
123
  overflow: hidden;
91
- background-color: var(--color-1);
124
+ background-color: var(--color-tabset-background);
92
125
  box-sizing: border-box;
93
126
  font-size: var(--font-size);
94
127
  font-family: var(--font-family);
95
- background-color: var(--color-background);
128
+ }
129
+ .flexlayout__tabset_tab_divider {
130
+ width: 4px;
96
131
  }
97
132
  .flexlayout__tabset_header {
98
133
  position: absolute;
@@ -102,28 +137,27 @@
102
137
  right: 0;
103
138
  padding: 3px 3px 3px 5px;
104
139
  box-sizing: border-box;
105
- border-bottom: 1px solid var(--color-3);
106
- color: var(--color-text);
107
- background-color: var(--color-background);
140
+ border-bottom: 1px solid var(--color-tabset-divider-line);
141
+ color: var(--color-tabset-header);
142
+ background-color: var(--color-tabset-header-background);
108
143
  }
109
144
  .flexlayout__tabset_header_content {
110
145
  flex-grow: 1;
111
146
  }
112
147
  .flexlayout__tabset_tabbar_outer {
113
148
  box-sizing: border-box;
114
- background-color: var(--color-1);
149
+ background-color: var(--color-tabset-background);
115
150
  position: absolute;
116
151
  left: 0;
117
152
  right: 0;
118
153
  overflow: hidden;
119
154
  display: flex;
120
- background-color: var(--color-background);
121
155
  }
122
156
  .flexlayout__tabset_tabbar_outer_top {
123
- border-bottom: 1px solid var(--color-3);
157
+ border-bottom: 1px solid var(--color-tabset-divider-line);
124
158
  }
125
159
  .flexlayout__tabset_tabbar_outer_bottom {
126
- border-top: 1px solid var(--color-3);
160
+ border-top: 1px solid var(--color-tabset-divider-line);
127
161
  }
128
162
  .flexlayout__tabset_tabbar_inner {
129
163
  position: relative;
@@ -134,7 +168,6 @@
134
168
  }
135
169
  .flexlayout__tabset_tabbar_inner_tab_container {
136
170
  display: flex;
137
- gap: 4px;
138
171
  padding-left: 4px;
139
172
  padding-right: 4px;
140
173
  box-sizing: border-box;
@@ -150,10 +183,10 @@
150
183
  border-bottom: 2px solid transparent;
151
184
  }
152
185
  .flexlayout__tabset-selected {
153
- background-color: var(--color-1);
186
+ background-color: var(--color-tabset-background-selected);
154
187
  }
155
188
  .flexlayout__tabset-maximized {
156
- background-color: var(--color-6);
189
+ background-color: var(--color-tabset-background-maximized);
157
190
  }
158
191
  .flexlayout__tab_button_stamp {
159
192
  display: inline-flex;
@@ -166,8 +199,8 @@
166
199
  overflow: auto;
167
200
  position: absolute;
168
201
  box-sizing: border-box;
169
- color: var(--color-text);
170
202
  background-color: var(--color-background);
203
+ color: var(--color-text);
171
204
  }
172
205
  .flexlayout__tab_button {
173
206
  display: flex;
@@ -178,16 +211,18 @@
178
211
  cursor: pointer;
179
212
  }
180
213
  .flexlayout__tab_button--selected {
181
- background-color: var(--color-4);
182
- color: var(--color-text);
214
+ background-color: var(--color-tab-selected-background);
215
+ color: var(--color-tab-selected);
183
216
  }
184
217
  @media (hover: hover) {
185
218
  .flexlayout__tab_button:hover {
186
- background-color: var(--color-4);
187
- color: var(--color-text);
219
+ background-color: var(--color-tab-selected-background);
220
+ color: var(--color-tab-selected);
188
221
  }
189
222
  }
190
223
  .flexlayout__tab_button--unselected {
224
+ background-color: var(--color-tab-unselected-background);
225
+ color: var(--color-tab-unselected);
191
226
  color: gray;
192
227
  }
193
228
  .flexlayout__tab_button_leading {
@@ -200,10 +235,11 @@
200
235
  border: none;
201
236
  font-family: var(--font-family);
202
237
  font-size: var(--font-size);
203
- color: var(--color-text);
204
- background-color: var(--color-5);
238
+ color: var(--color-tab-textbox);
239
+ background-color: var(--color-tab-textbox-background);
205
240
  border: 1px inset var(--color-1);
206
241
  border-radius: 3px;
242
+ width: 10em;
207
243
  }
208
244
  .flexlayout__tab_button_textbox:focus {
209
245
  outline: none;
@@ -228,7 +264,7 @@
228
264
  display: flex;
229
265
  align-items: center;
230
266
  border: none;
231
- color: gray;
267
+ color: var(--color-overflow);
232
268
  font-size: inherit;
233
269
  background-color: transparent;
234
270
  }
@@ -289,23 +325,24 @@
289
325
  display: flex;
290
326
  font-size: var(--font-size);
291
327
  font-family: var(--font-family);
292
- background-color: var(--color-background);
328
+ color: var(--color-border);
329
+ background-color: var(--color-border-background);
293
330
  }
294
331
  .flexlayout__border_top {
295
- border-bottom: 1px solid var(--color-3);
332
+ border-bottom: 1px solid var(--color-border-divider-line);
296
333
  align-items: center;
297
334
  }
298
335
  .flexlayout__border_bottom {
299
- border-top: 1px solid var(--color-3);
336
+ border-top: 1px solid var(--color-border-divider-line);
300
337
  align-items: center;
301
338
  }
302
339
  .flexlayout__border_left {
303
- border-right: 1px solid var(--color-3);
340
+ border-right: 1px solid var(--color-border-divider-line);
304
341
  align-content: center;
305
342
  flex-direction: column;
306
343
  }
307
344
  .flexlayout__border_right {
308
- border-left: 1px solid var(--color-3);
345
+ border-left: 1px solid var(--color-border-divider-line);
309
346
  align-content: center;
310
347
  flex-direction: column;
311
348
  }
@@ -319,7 +356,6 @@
319
356
  .flexlayout__border_inner_tab_container {
320
357
  white-space: nowrap;
321
358
  display: flex;
322
- gap: 4px;
323
359
  padding-left: 2px;
324
360
  padding-right: 2px;
325
361
  box-sizing: border-box;
@@ -337,6 +373,9 @@
337
373
  transform-origin: top right;
338
374
  transform: rotate(-90deg);
339
375
  }
376
+ .flexlayout__border_tab_divider {
377
+ width: 4px;
378
+ }
340
379
  .flexlayout__border_button {
341
380
  display: flex;
342
381
  gap: 0.3em;
@@ -346,20 +385,20 @@
346
385
  margin: 2px 0px;
347
386
  box-sizing: border-box;
348
387
  white-space: nowrap;
349
- background-color: var(--color-2);
350
388
  }
351
389
  .flexlayout__border_button--selected {
352
- background-color: var(--color-4);
353
- color: var(--color-text);
390
+ background-color: var(--color-border-tab-selected-background);
391
+ color: var(--color-border-tab-selected);
354
392
  }
355
393
  @media (hover: hover) {
356
394
  .flexlayout__border_button:hover {
357
- background-color: var(--color-4);
358
- color: var(--color-text);
395
+ background-color: var(--color-border-tab-selected-background);
396
+ color: var(--color-border-tab-selected);
359
397
  }
360
398
  }
361
399
  .flexlayout__border_button--unselected {
362
- color: gray;
400
+ background-color: var(--color-border-tab-unselected-background);
401
+ color: var(--color-border-tab-unselected);
363
402
  }
364
403
  .flexlayout__border_button_leading {
365
404
  display: flex;
@@ -414,7 +453,7 @@
414
453
  display: flex;
415
454
  align-items: center;
416
455
  border: none;
417
- color: gray;
456
+ color: var(--color-overflow);
418
457
  font-size: inherit;
419
458
  background-color: transparent;
420
459
  }
@@ -435,9 +474,9 @@
435
474
  }
436
475
  .flexlayout__popup_menu_container {
437
476
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
438
- border: 1px solid var(--color-6);
439
- color: var(--color-text);
440
- background: var(--color-background);
477
+ border: 1px solid var(--color-popup-border);
478
+ color: var(--color-popup-unselected);
479
+ background: var(--color-popup-unselected-background);
441
480
  border-radius: 3px;
442
481
  position: absolute;
443
482
  z-index: 1000;
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["_base.scss","light.scss"],"names":[],"mappings":"AASI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAxBJ;EACA;EACA;EACA;EACA;EAuBI;;AAGJ;EC4DA;;ADzDI;EACI;IACI;IACA;IC0DZ;;;ADtDI;EACI;;AAGJ;EACI;ECqDR;;ADlDI;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EC3FJ;;AD8FI;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EChGR;;ADmGQ;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;ECrHZ;;ADyHQ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;ECtJJ;;AD0JI;ECtJJ;;AD2JA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;ECvKR;EACA;;ADyKQ;EACI;IClKZ;IACA;;;ADsKQ;EC3KR;;ADuLQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;ECxMZ;;ADgNQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IChPhB;;;ADkQQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;ECxSJ;;AD2SI;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECpWR;;ADuWQ;ECnWR;EACA;;ADqWQ;EACI;IC9VZ;IACA;;;ADkWQ;ECvWR;;AD2WQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EC5YZ;;ADoZQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ICrbhB;;;AD6bY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EAtjBJ;EACA;EACA;EACA;EACA;;AAsjBI;EACI;EA3jBR;EACA;EACA;EACA;EACA;EA0jBQ;EACA;EACA;;AAIR;EApkBA;EACA;EACA;EACA;EACA;EAkkBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"light.css"}
1
+ {"version":3,"sourceRoot":"","sources":["light.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;;;AClEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAIJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;EDnHZ;;AC+HQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDnJZ;;AC2JQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID3LhB;;;AC6MQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDnWZ;;AC2WQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID5YhB;;;ACoZY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EAlkBJ;EACA;EACA;EACA;EACA;;AAkkBI;EACI;EAvkBR;EACA;EACA;EACA;EACA;EAskBQ;EACA;EACA;;AAIR;EAhlBA;EACA;EACA;EACA;EACA;EA8kBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"light.css"}
package/style/light.scss CHANGED
@@ -15,24 +15,81 @@ $color_drag2_background: rgba(119, 166, 119, 0.075) !default;
15
15
  $font-size: medium !default;
16
16
  $font-family: Roboto, Arial, sans-serif !default;
17
17
 
18
+ .flexlayout {
19
+ &__layout {
20
+ --color-text: #{$color_text};
21
+ --color-background: #{$color_background};
22
+ --color-base: #{$color_base};
23
+ --color-1: #{$color_1};
24
+ --color-2: #{$color_2};
25
+ --color-3: #{$color_3};
26
+ --color-4: #{$color_4};
27
+ --color-5: #{$color_5};
28
+ --color-6: #{$color_6};
29
+ --color-drag1: #{$color_drag1};
30
+ --color-drag2: #{$color_drag2};
31
+ --color-drag1-background: #{$color_drag1_background};
32
+ --color-drag2-background: #{$color_drag2_background};
33
+
34
+ --font-size: #{$font_size};
35
+ --font-family: #{$font_family};
36
+
37
+ --color-overflow: gray;
38
+
39
+ --color-tabset-background: var(--color-background);
40
+ --color-tabset-background-selected: var(--color-1);
41
+ --color-tabset-background-maximized: var(--color-6);
42
+ --color-tabset-divider-line: var(--color-4);
43
+
44
+ --color-tabset-header-background: var(--color-background);
45
+ --color-tabset-header: var(--color-text);
46
+
47
+ --color-border-background: var(--color-background);
48
+ --color-border-divider-line: var(--color-4);
49
+
50
+ --color-tab-selected: var(--color-text);
51
+ --color-tab-selected-background: var(--color-4);
52
+ --color-tab-unselected: gray;
53
+ --color-tab-unselected-background: transparent;
54
+ --color-tab-textbox: var(--color-text);
55
+ --color-tab-textbox-background: var(--color-3);
56
+
57
+ --color-border-tab-selected: var(--color-text);
58
+ --color-border-tab-selected-background: var(--color-4);
59
+ --color-border-tab-unselected: gray;
60
+ --color-border-tab-unselected-background: var(--color-2);
61
+
62
+ --color-splitter: var(--color-1);
63
+ --color-splitter-hover: var(--color-4);
64
+ --color-splitter-drag: var(--color-4);
65
+
66
+ --color-drag-rect-border: var(--color-6);
67
+ --color-drag-rect-background: var(--color-4);
68
+ --color-drag-rect: var(--color-text);
69
+
70
+ --color-popup-border: var(--color-6);
71
+ --color-popup-unselected: var(--color-text);
72
+ --color-popup-unselected-background: #{$color_background};
73
+ --color-popup-selected: var(--color-text);
74
+ --color-popup-selected-background: var(--color-3);
75
+
76
+ --color-edge-marker: gray;
77
+ }
78
+ }
79
+
18
80
  @mixin tabset_mixin {
19
- background-color: var(--color-background);
20
81
  }
21
82
 
22
83
  @mixin tabset_tabbar_mixin {
23
- background-color: var(--color-background);
24
84
  }
25
85
 
26
86
  @mixin tabset_header_mixin {
27
- background-color: var(--color-background);
28
87
  }
29
88
 
30
89
  @mixin tabset_selected_mixin {
31
- background-color: var(--color-1);
32
90
  }
33
91
 
34
92
  @mixin tabset_maximized_mixin {
35
- background-color: var(--color-6);
36
93
  }
37
94
 
38
95
  @mixin tab_top_mixin {
@@ -45,8 +102,6 @@ $font-family: Roboto, Arial, sans-serif !default;
45
102
  }
46
103
 
47
104
  @mixin tab_button_selected_mixin {
48
- background-color: var(--color-4);
49
- color: var(--color-text);
50
105
  }
51
106
 
52
107
  @mixin tab_button_unselected_mixin {
@@ -54,8 +109,6 @@ $font-family: Roboto, Arial, sans-serif !default;
54
109
  }
55
110
 
56
111
  @mixin tab_button_hovered_mixin {
57
- background-color: var(--color-4);
58
- color: var(--color-text);
59
112
  }
60
113
 
61
114
  @mixin close_button_hovered_mixin {
@@ -67,40 +120,36 @@ $font-family: Roboto, Arial, sans-serif !default;
67
120
  }
68
121
 
69
122
  @mixin border_mixin {
70
- background-color: var(--color-background);
71
123
  }
72
124
 
73
125
  @mixin border_button_mixin {
74
- background-color: var(--color-2);
75
126
  }
76
127
 
77
128
  @mixin border_button_selected_mixin {
78
- background-color: var(--color-4);
79
- color: var(--color-text);
80
129
  }
81
130
 
82
131
  @mixin border_button_unselected_mixin {
83
- color: gray;
84
132
  }
85
133
 
86
134
  @mixin border_button_hovered_mixin {
87
- background-color: var(--color-4);
88
- color: var(--color-text);
89
135
  }
90
136
 
91
137
  @mixin splitter_mixin {
92
- background-color: var(--color-1);
93
138
  }
94
139
 
95
140
  @mixin splitter_hover_mixin {
96
- background-color: var(--color-4);
97
141
  }
98
142
 
99
143
  @mixin splitter_drag_mixin {
100
- background-color: var(--color-4);
101
144
  }
102
145
 
103
146
  @mixin splitter_border_mixin {
104
147
  }
105
148
 
149
+ @mixin tabset_tab_divider_mixin {
150
+ }
151
+
152
+ @mixin border_tab_divider_mixin {
153
+ }
154
+
106
155
  @import "_base";