flexlayout-react 0.6.5 → 0.6.8

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 (38) hide show
  1. package/ChangeLog.txt +9 -0
  2. package/README.md +1 -0
  3. package/declarations/Types.d.ts +3 -0
  4. package/declarations/view/Layout.d.ts +3 -0
  5. package/dist/flexlayout.js +6 -6
  6. package/dist/flexlayout_min.js +1 -1
  7. package/lib/AttributeDefinitions.js +6 -1
  8. package/lib/AttributeDefinitions.js.map +1 -1
  9. package/lib/Types.js +3 -0
  10. package/lib/Types.js.map +1 -1
  11. package/lib/view/BorderTabSet.js +1 -0
  12. package/lib/view/BorderTabSet.js.map +1 -1
  13. package/lib/view/Layout.js +4 -0
  14. package/lib/view/Layout.js.map +1 -1
  15. package/lib/view/TabFloating.js +6 -0
  16. package/lib/view/TabFloating.js.map +1 -1
  17. package/lib/view/TabSet.js +23 -10
  18. package/lib/view/TabSet.js.map +1 -1
  19. package/package.json +3 -3
  20. package/src/AttributeDefinitions.ts +5 -1
  21. package/src/Types.ts +3 -0
  22. package/src/view/BorderTabSet.tsx +4 -0
  23. package/src/view/Layout.tsx +9 -0
  24. package/src/view/TabFloating.tsx +9 -0
  25. package/src/view/TabSet.tsx +24 -10
  26. package/style/_base.scss +63 -49
  27. package/style/dark.css +91 -49
  28. package/style/dark.css.map +1 -1
  29. package/style/dark.scss +66 -21
  30. package/style/gray.css +91 -66
  31. package/style/gray.css.map +1 -1
  32. package/style/gray.scss +70 -24
  33. package/style/light.css +91 -51
  34. package/style/light.css.map +1 -1
  35. package/style/light.scss +68 -19
  36. package/style/underline.css +559 -0
  37. package/style/underline.css.map +1 -0
  38. package/style/underline.scss +172 -0
package/style/gray.scss CHANGED
@@ -11,19 +11,79 @@ $color_drag1: rgb(95, 134, 196) !default;
11
11
  $color_drag2: rgb(119, 166, 119) !default;
12
12
  $color_drag1_background: rgba(95, 134, 196, 0.1) !default;
13
13
  $color_drag2_background: rgba(119, 166, 119, 0.075) !default;
14
- $font-size: medium !default;
15
- $font-family: Roboto, Arial, sans-serif !default;
14
+ $font_size: medium !default;
15
+ $font_family: Roboto, Arial, sans-serif !default;
16
+
17
+ .flexlayout {
18
+ &__layout {
19
+ --color-text: #{$color_text};
20
+ --color-background: #{$color_background};
21
+ --color-base: #{$color_base};
22
+ --color-1: #{$color_1};
23
+ --color-2: #{$color_2};
24
+ --color-3: #{$color_3};
25
+ --color-4: #{$color_4};
26
+ --color-5: #{$color_5};
27
+ --color-6: #{$color_6};
28
+ --color-drag1: #{$color_drag1};
29
+ --color-drag2: #{$color_drag2};
30
+ --color-drag1-background: #{$color_drag1_background};
31
+ --color-drag2-background: #{$color_drag2_background};
32
+
33
+ --font-size: #{$font_size};
34
+ --font-family: #{$font_family};
35
+
36
+ --color-overflow: gray;
37
+
38
+ --color-tabset-background: var(--color-1);
39
+ --color-tabset-background-selected: var(--color-1);
40
+ --color-tabset-background-maximized: var(--color-6);
41
+ --color-tabset-divider-line: var(--color-3);
42
+
43
+ --color-tabset-header-background: var(--color-1);
44
+ --color-tabset-header: var(--color-text);
45
+
46
+ --color-border-background: var(--color-1);
47
+ --color-border-divider-line: var(--color-3);
48
+
49
+ --color-tab-selected: var(--color-text);
50
+ --color-tab-selected-background: var(--color-3);
51
+ --color-tab-unselected: gray;
52
+ --color-tab-unselected-background: transparent;
53
+ --color-tab-textbox: var(--color-text);
54
+ --color-tab-textbox-background: var(--color-3);
55
+
56
+ --color-border-tab-selected: var(--color-text);
57
+ --color-border-tab-selected-background: var(--color-3);
58
+ --color-border-tab-unselected: gray;
59
+ --color-border-tab-unselected-background: var(--color-2);
60
+
61
+ --color-splitter: var(--color-2);
62
+ --color-splitter-hover: var(--color-4);
63
+ --color-splitter-drag: var(--color-5);
64
+
65
+ --color-drag-rect-border: var(--color-4);
66
+ --color-drag-rect-background: var(--color-3);
67
+ --color-drag-rect: var(--color-text);
68
+
69
+ --color-popup-border: var(--color-6);
70
+ --color-popup-unselected: var(--color-text);
71
+ --color-popup-unselected-background: #{$color_background};
72
+ --color-popup-selected: var(--color-text);
73
+ --color-popup-selected-background: var(--color-3);
74
+
75
+ --color-edge-marker: gray;
76
+ }
77
+ }
78
+
16
79
 
17
80
  @mixin tabset_mixin {
18
- background-color:var(--color-1);
19
81
  }
20
82
 
21
83
  @mixin tabset_tabbar_mixin {
22
- background-color:var(--color-1);
23
84
  }
24
85
 
25
86
  @mixin tabset_header_mixin {
26
- background-color:var(--color-1);
27
87
  }
28
88
 
29
89
  @mixin tabset_selected_mixin {
@@ -31,7 +91,6 @@ $font-family: Roboto, Arial, sans-serif !default;
31
91
  }
32
92
 
33
93
  @mixin tabset_header_mixin {
34
- background-color:var(--color-1);
35
94
  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
36
95
  }
37
96
 
@@ -56,70 +115,57 @@ $font-family: Roboto, Arial, sans-serif !default;
56
115
  }
57
116
 
58
117
  @mixin tab_button_mixin {
59
-
60
118
  }
61
119
 
62
120
  @mixin tab_button_selected_mixin {
63
- background-color:var(--color-3);
64
- color:var(--color-text);
65
121
  }
66
122
 
67
123
  @mixin tab_button_unselected_mixin {
68
- color: gray;
69
124
  }
70
125
 
71
126
  @mixin tab_button_hovered_mixin {
72
- background-color:var(--color-3);
73
- color:var(--color-text);
74
127
  }
75
128
 
76
129
  @mixin close_button_hovered_mixin {
77
- background-color:var(--color-2);
78
130
  }
79
131
 
80
132
  @mixin toolbar_button_hovered_mixin {
81
- background-color:var(--color-2);
82
133
  }
83
134
 
84
135
  @mixin border_mixin {
85
- background-color:var(--color-1);
86
136
  }
87
137
 
88
138
  @mixin border_button_mixin {
89
139
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
90
140
  border-radius: 3px;
91
- background-color:var(--color-2);
92
141
  }
93
142
 
94
143
  @mixin border_button_selected_mixin {
95
- background-color:var(--color-3);
96
- color:var(--color-text);
97
144
  }
98
145
 
99
146
  @mixin border_button_unselected_mixin {
100
- color: gray;
101
147
  }
102
148
 
103
149
  @mixin border_button_hovered_mixin {
104
- background-color:var(--color-3);
105
- color:var(--color-text);
106
150
  }
107
151
 
108
152
  @mixin splitter_mixin {
109
- background-color:var(--color-2);
110
153
  }
111
154
 
112
155
  @mixin splitter_hover_mixin {
113
- background-color:var(--color-4);
114
156
  }
115
157
 
116
158
  @mixin splitter_drag_mixin {
117
159
  border-radius: 5px;
118
- background-color:var(--color-5);
119
160
  }
120
161
 
121
162
  @mixin splitter_border_mixin {
122
163
  }
123
164
 
165
+ @mixin tabset_tab_divider_mixin {
166
+ }
167
+
168
+ @mixin border_tab_divider_mixin {
169
+ }
124
170
 
125
171
  @import "_base";
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,49 +114,52 @@
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 {
123
+ display: flex;
124
+ flex-direction: column;
90
125
  overflow: hidden;
91
- background-color: var(--color-1);
126
+ background-color: var(--color-tabset-background);
92
127
  box-sizing: border-box;
93
128
  font-size: var(--font-size);
94
129
  font-family: var(--font-family);
95
- background-color: var(--color-background);
130
+ }
131
+ .flexlayout__tabset_tab_divider {
132
+ width: 4px;
133
+ }
134
+ .flexlayout__tabset_content {
135
+ display: flex;
136
+ flex-grow: 1;
137
+ align-items: center;
138
+ justify-content: center;
96
139
  }
97
140
  .flexlayout__tabset_header {
98
- position: absolute;
99
141
  display: flex;
100
142
  align-items: center;
101
- left: 0;
102
- right: 0;
103
143
  padding: 3px 3px 3px 5px;
104
144
  box-sizing: border-box;
105
- border-bottom: 1px solid var(--color-3);
106
- color: var(--color-text);
107
- background-color: var(--color-background);
145
+ border-bottom: 1px solid var(--color-tabset-divider-line);
146
+ color: var(--color-tabset-header);
147
+ background-color: var(--color-tabset-header-background);
108
148
  }
109
149
  .flexlayout__tabset_header_content {
110
150
  flex-grow: 1;
111
151
  }
112
152
  .flexlayout__tabset_tabbar_outer {
113
153
  box-sizing: border-box;
114
- background-color: var(--color-1);
115
- position: absolute;
116
- left: 0;
117
- right: 0;
154
+ background-color: var(--color-tabset-background);
118
155
  overflow: hidden;
119
156
  display: flex;
120
- background-color: var(--color-background);
121
157
  }
122
158
  .flexlayout__tabset_tabbar_outer_top {
123
- border-bottom: 1px solid var(--color-3);
159
+ border-bottom: 1px solid var(--color-tabset-divider-line);
124
160
  }
125
161
  .flexlayout__tabset_tabbar_outer_bottom {
126
- border-top: 1px solid var(--color-3);
162
+ border-top: 1px solid var(--color-tabset-divider-line);
127
163
  }
128
164
  .flexlayout__tabset_tabbar_inner {
129
165
  position: relative;
@@ -134,7 +170,6 @@
134
170
  }
135
171
  .flexlayout__tabset_tabbar_inner_tab_container {
136
172
  display: flex;
137
- gap: 4px;
138
173
  padding-left: 4px;
139
174
  padding-right: 4px;
140
175
  box-sizing: border-box;
@@ -150,10 +185,10 @@
150
185
  border-bottom: 2px solid transparent;
151
186
  }
152
187
  .flexlayout__tabset-selected {
153
- background-color: var(--color-1);
188
+ background-color: var(--color-tabset-background-selected);
154
189
  }
155
190
  .flexlayout__tabset-maximized {
156
- background-color: var(--color-6);
191
+ background-color: var(--color-tabset-background-maximized);
157
192
  }
158
193
  .flexlayout__tab_button_stamp {
159
194
  display: inline-flex;
@@ -166,8 +201,8 @@
166
201
  overflow: auto;
167
202
  position: absolute;
168
203
  box-sizing: border-box;
169
- color: var(--color-text);
170
204
  background-color: var(--color-background);
205
+ color: var(--color-text);
171
206
  }
172
207
  .flexlayout__tab_button {
173
208
  display: flex;
@@ -178,16 +213,18 @@
178
213
  cursor: pointer;
179
214
  }
180
215
  .flexlayout__tab_button--selected {
181
- background-color: var(--color-4);
182
- color: var(--color-text);
216
+ background-color: var(--color-tab-selected-background);
217
+ color: var(--color-tab-selected);
183
218
  }
184
219
  @media (hover: hover) {
185
220
  .flexlayout__tab_button:hover {
186
- background-color: var(--color-4);
187
- color: var(--color-text);
221
+ background-color: var(--color-tab-selected-background);
222
+ color: var(--color-tab-selected);
188
223
  }
189
224
  }
190
225
  .flexlayout__tab_button--unselected {
226
+ background-color: var(--color-tab-unselected-background);
227
+ color: var(--color-tab-unselected);
191
228
  color: gray;
192
229
  }
193
230
  .flexlayout__tab_button_leading {
@@ -200,8 +237,8 @@
200
237
  border: none;
201
238
  font-family: var(--font-family);
202
239
  font-size: var(--font-size);
203
- color: var(--color-text);
204
- background-color: var(--color-5);
240
+ color: var(--color-tab-textbox);
241
+ background-color: var(--color-tab-textbox-background);
205
242
  border: 1px inset var(--color-1);
206
243
  border-radius: 3px;
207
244
  width: 10em;
@@ -229,7 +266,7 @@
229
266
  display: flex;
230
267
  align-items: center;
231
268
  border: none;
232
- color: gray;
269
+ color: var(--color-overflow);
233
270
  font-size: inherit;
234
271
  background-color: transparent;
235
272
  }
@@ -290,23 +327,24 @@
290
327
  display: flex;
291
328
  font-size: var(--font-size);
292
329
  font-family: var(--font-family);
293
- background-color: var(--color-background);
330
+ color: var(--color-border);
331
+ background-color: var(--color-border-background);
294
332
  }
295
333
  .flexlayout__border_top {
296
- border-bottom: 1px solid var(--color-3);
334
+ border-bottom: 1px solid var(--color-border-divider-line);
297
335
  align-items: center;
298
336
  }
299
337
  .flexlayout__border_bottom {
300
- border-top: 1px solid var(--color-3);
338
+ border-top: 1px solid var(--color-border-divider-line);
301
339
  align-items: center;
302
340
  }
303
341
  .flexlayout__border_left {
304
- border-right: 1px solid var(--color-3);
342
+ border-right: 1px solid var(--color-border-divider-line);
305
343
  align-content: center;
306
344
  flex-direction: column;
307
345
  }
308
346
  .flexlayout__border_right {
309
- border-left: 1px solid var(--color-3);
347
+ border-left: 1px solid var(--color-border-divider-line);
310
348
  align-content: center;
311
349
  flex-direction: column;
312
350
  }
@@ -320,7 +358,6 @@
320
358
  .flexlayout__border_inner_tab_container {
321
359
  white-space: nowrap;
322
360
  display: flex;
323
- gap: 4px;
324
361
  padding-left: 2px;
325
362
  padding-right: 2px;
326
363
  box-sizing: border-box;
@@ -338,6 +375,9 @@
338
375
  transform-origin: top right;
339
376
  transform: rotate(-90deg);
340
377
  }
378
+ .flexlayout__border_tab_divider {
379
+ width: 4px;
380
+ }
341
381
  .flexlayout__border_button {
342
382
  display: flex;
343
383
  gap: 0.3em;
@@ -347,20 +387,20 @@
347
387
  margin: 2px 0px;
348
388
  box-sizing: border-box;
349
389
  white-space: nowrap;
350
- background-color: var(--color-2);
351
390
  }
352
391
  .flexlayout__border_button--selected {
353
- background-color: var(--color-4);
354
- color: var(--color-text);
392
+ background-color: var(--color-border-tab-selected-background);
393
+ color: var(--color-border-tab-selected);
355
394
  }
356
395
  @media (hover: hover) {
357
396
  .flexlayout__border_button:hover {
358
- background-color: var(--color-4);
359
- color: var(--color-text);
397
+ background-color: var(--color-border-tab-selected-background);
398
+ color: var(--color-border-tab-selected);
360
399
  }
361
400
  }
362
401
  .flexlayout__border_button--unselected {
363
- color: gray;
402
+ background-color: var(--color-border-tab-unselected-background);
403
+ color: var(--color-border-tab-unselected);
364
404
  }
365
405
  .flexlayout__border_button_leading {
366
406
  display: flex;
@@ -415,7 +455,7 @@
415
455
  display: flex;
416
456
  align-items: center;
417
457
  border: none;
418
- color: gray;
458
+ color: var(--color-overflow);
419
459
  font-size: inherit;
420
460
  background-color: transparent;
421
461
  }
@@ -436,9 +476,9 @@
436
476
  }
437
477
  .flexlayout__popup_menu_container {
438
478
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
439
- border: 1px solid var(--color-6);
440
- color: var(--color-text);
441
- background: var(--color-background);
479
+ border: 1px solid var(--color-popup-border);
480
+ color: var(--color-popup-unselected);
481
+ background: var(--color-popup-unselected-background);
442
482
  border-radius: 3px;
443
483
  position: absolute;
444
484
  z-index: 1000;
package/style/light.css.map CHANGED
@@ -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;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;ECzMZ;;ADiNQ;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;ICjPhB;;;ADmQQ;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;ECzSJ;;AD4SI;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;ECrWR;;ADwWQ;ECpWR;EACA;;ADsWQ;EACI;IC/VZ;IACA;;;ADmWQ;ECxWR;;AD4WQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EC7YZ;;ADqZQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ICtbhB;;;AD8bY;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;EAvjBJ;EACA;EACA;EACA;EACA;;AAujBI;EACI;EA5jBR;EACA;EACA;EACA;EACA;EA2jBQ;EACA;EACA;;AAIR;EArkBA;EACA;EACA;EACA;EACA;EAmkBI;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;EACA;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;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;EDtHZ;;ACkIQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDtJZ;;AC8JQ;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;ID9LhB;;;ACgNQ;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;EDtWZ;;AC8WQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID/YhB;;;ACuZY;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;EArkBJ;EACA;EACA;EACA;EACA;;AAqkBI;EACI;EA1kBR;EACA;EACA;EACA;EACA;EAykBQ;EACA;EACA;;AAIR;EAnlBA;EACA;EACA;EACA;EACA;EAilBI;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";