flexlayout-react 0.5.18 → 0.5.19

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 (53) hide show
  1. package/ChangeLog.txt +8 -0
  2. package/README.md +109 -96
  3. package/declarations/Types.d.ts +7 -1
  4. package/declarations/view/Layout.d.ts +5 -0
  5. package/dist/flexlayout.js +12 -12
  6. package/dist/flexlayout_min.js +1 -1
  7. package/lib/PopupMenu.js +14 -9
  8. package/lib/PopupMenu.js.map +1 -1
  9. package/lib/Types.js +6 -0
  10. package/lib/Types.js.map +1 -1
  11. package/lib/model/BorderNode.js +8 -7
  12. package/lib/model/BorderNode.js.map +1 -1
  13. package/lib/model/Model.js +7 -3
  14. package/lib/model/Model.js.map +1 -1
  15. package/lib/model/RowNode.js +19 -5
  16. package/lib/model/RowNode.js.map +1 -1
  17. package/lib/model/TabSetNode.js +8 -4
  18. package/lib/model/TabSetNode.js.map +1 -1
  19. package/lib/view/BorderButton.js +14 -3
  20. package/lib/view/BorderButton.js.map +1 -1
  21. package/lib/view/BorderTabSet.js +15 -4
  22. package/lib/view/BorderTabSet.js.map +1 -1
  23. package/lib/view/Layout.js +81 -48
  24. package/lib/view/Layout.js.map +1 -1
  25. package/lib/view/TabButton.js +11 -2
  26. package/lib/view/TabButton.js.map +1 -1
  27. package/lib/view/TabFloating.js +23 -11
  28. package/lib/view/TabFloating.js.map +1 -1
  29. package/lib/view/TabSet.js +43 -18
  30. package/lib/view/TabSet.js.map +1 -1
  31. package/package.json +1 -1
  32. package/src/PopupMenu.tsx +28 -10
  33. package/src/Types.ts +6 -0
  34. package/src/model/BorderNode.ts +8 -7
  35. package/src/model/Model.ts +7 -3
  36. package/src/model/RowNode.ts +8 -5
  37. package/src/model/TabSetNode.ts +8 -4
  38. package/src/view/BorderButton.tsx +22 -3
  39. package/src/view/BorderTabSet.tsx +21 -4
  40. package/src/view/Layout.tsx +100 -58
  41. package/src/view/TabButton.tsx +16 -1
  42. package/src/view/TabFloating.tsx +36 -19
  43. package/src/view/TabSet.tsx +56 -17
  44. package/style/_base.scss +65 -41
  45. package/style/dark.css +81 -59
  46. package/style/dark.css.map +1 -1
  47. package/style/dark.scss +20 -20
  48. package/style/gray.css +81 -59
  49. package/style/gray.css.map +1 -1
  50. package/style/gray.scss +20 -20
  51. package/style/light.css +81 -59
  52. package/style/light.css.map +1 -1
  53. package/style/light.scss +18 -18
package/style/dark.scss CHANGED
@@ -14,32 +14,32 @@ $font-size: medium !default;
14
14
  $font-family: Roboto, Arial, sans-serif !default;
15
15
 
16
16
  @mixin tabset_mixin {
17
- background-color: $color_1;
17
+ background-color: var(--color-1);
18
18
  }
19
19
 
20
20
  @mixin tabset_tabbar_mixin {
21
- background-color: $color_1;
21
+ background-color: var(--color-1);
22
22
  }
23
23
 
24
24
  @mixin tabset_header_mixin {
25
- background-color: $color_1;
25
+ background-color: var(--color-1);
26
26
  }
27
27
 
28
28
  @mixin tabset_selected_mixin {
29
- background-image: linear-gradient($color_background, $color_4);
29
+ background-image: linear-gradient(var(--color-background), var(--color-4));
30
30
  }
31
31
 
32
32
  @mixin tabset_header_mixin {
33
- background-color: $color_1;
33
+ background-color: var(--color-1);
34
34
  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
35
35
  }
36
36
 
37
37
  @mixin tabset_selected_mixin {
38
- background-image: linear-gradient($color_background, $color_4);
38
+ background-image: linear-gradient(var(--color-background), var(--color-4));
39
39
  }
40
40
 
41
41
  @mixin tabset_maximized_mixin {
42
- background-image: linear-gradient($color_6, $color_2);
42
+ background-image: linear-gradient(var(--color-6), var(--color-2));
43
43
  }
44
44
 
45
45
  @mixin tab_top_mixin {
@@ -60,8 +60,8 @@ $font-family: Roboto, Arial, sans-serif !default;
60
60
  }
61
61
 
62
62
  @mixin tab_button_selected_mixin {
63
- background-color: $color_3;
64
- color: $color_text;
63
+ background-color: var(--color-3);
64
+ color: var(--color-text);
65
65
  }
66
66
 
67
67
  @mixin tab_button_unselected_mixin {
@@ -69,23 +69,23 @@ $font-family: Roboto, Arial, sans-serif !default;
69
69
  }
70
70
 
71
71
  @mixin tab_button_hovered_mixin {
72
- background-color: $color_3;
73
- color: $color_text;
72
+ background-color: var(--color-3);
73
+ color: var(--color-text);
74
74
  }
75
75
 
76
76
  @mixin border_mixin {
77
- background-color: $color_1;
77
+ background-color: var(--color-1);
78
78
  }
79
79
 
80
80
  @mixin border_button_mixin {
81
81
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
82
82
  border-radius: 3px;
83
- background-color: $color_2;
83
+ background-color: var(--color-2);
84
84
  }
85
85
 
86
86
  @mixin border_button_selected_mixin {
87
- background-color: $color_3;
88
- color: $color_text;
87
+ background-color: var(--color-3);
88
+ color: var(--color-text);
89
89
  }
90
90
 
91
91
  @mixin border_button_unselected_mixin {
@@ -93,21 +93,21 @@ $font-family: Roboto, Arial, sans-serif !default;
93
93
  }
94
94
 
95
95
  @mixin border_button_hovered_mixin {
96
- background-color: $color_3;
97
- color: $color_text;
96
+ background-color: var(--color-3);
97
+ color: var(--color-text);
98
98
  }
99
99
 
100
100
  @mixin splitter_mixin {
101
- background-color: $color_2;
101
+ background-color: var(--color-2);
102
102
  }
103
103
 
104
104
  @mixin splitter_hover_mixin {
105
- background-color: $color_4;
105
+ background-color: var(--color-4);
106
106
  }
107
107
 
108
108
  @mixin splitter_drag_mixin {
109
109
  border-radius: 5px;
110
- background-color: $color_5;
110
+ background-color: var(--color-5);
111
111
  }
112
112
 
113
113
  @mixin splitter_border_mixin {
package/style/gray.css CHANGED
@@ -1,4 +1,17 @@
1
1
  .flexlayout__layout {
2
+ --color-text: black;
3
+ --color-background: white;
4
+ --color-base: white;
5
+ --color-1: #f7f7f7;
6
+ --color-2: #e6e6e6;
7
+ --color-3: #d9d9d9;
8
+ --color-4: #cccccc;
9
+ --color-5: #bfbfbf;
10
+ --color-6: #b3b3b3;
11
+ --color-drag1: red;
12
+ --color-drag2: green;
13
+ --font-size: medium;
14
+ --font-family: Roboto, Arial, sans-serif;
2
15
  left: 0;
3
16
  top: 0;
4
17
  right: 0;
@@ -7,11 +20,13 @@
7
20
  overflow: hidden;
8
21
  }
9
22
  .flexlayout__splitter {
10
- background-color: #e6e6e6;
23
+ background-color: var(--color-2);
11
24
  }
12
25
  @media (hover: hover) {
13
26
  .flexlayout__splitter:hover {
14
- background-color: #cccccc;
27
+ transition: background-color ease-in 0.1s;
28
+ transition-delay: 0.05s;
29
+ background-color: var(--color-4);
15
30
  }
16
31
  }
17
32
  .flexlayout__splitter_border {
@@ -20,7 +35,7 @@
20
35
  .flexlayout__splitter_drag {
21
36
  z-index: 1000;
22
37
  border-radius: 5px;
23
- background-color: #bfbfbf;
38
+ background-color: var(--color-5);
24
39
  }
25
40
  .flexlayout__splitter_extra {
26
41
  background-color: transparent;
@@ -29,14 +44,14 @@
29
44
  position: absolute;
30
45
  pointer-events: none;
31
46
  box-sizing: border-box;
32
- border: 2px solid red;
47
+ border: 2px solid var(--color-drag1);
33
48
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
34
49
  border-radius: 5px;
35
50
  z-index: 1000;
36
51
  }
37
52
  .flexlayout__outline_rect_edge {
38
53
  pointer-events: none;
39
- border: 2px solid green;
54
+ border: 2px solid var(--color-drag2);
40
55
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
41
56
  border-radius: 5px;
42
57
  z-index: 1000;
@@ -52,9 +67,9 @@
52
67
  .flexlayout__drag_rect {
53
68
  position: absolute;
54
69
  cursor: move;
55
- color: black;
56
- background-color: #f7f7f7;
57
- border: 2px solid #cccccc;
70
+ color: var(--color-text);
71
+ background-color: var(--color-1);
72
+ border: 2px solid var(--color-4);
58
73
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
59
74
  border-radius: 5px;
60
75
  z-index: 1000;
@@ -67,16 +82,16 @@
67
82
  overflow: hidden;
68
83
  padding: 10px;
69
84
  word-wrap: break-word;
70
- font-size: medium;
71
- font-family: Roboto, Arial, sans-serif;
85
+ font-size: var(--font-size);
86
+ font-family: var(--font-family);
72
87
  }
73
88
  .flexlayout__tabset {
74
89
  overflow: hidden;
75
- background-color: #f7f7f7;
90
+ background-color: var(--color-1);
76
91
  box-sizing: border-box;
77
- font-size: medium;
78
- font-family: Roboto, Arial, sans-serif;
79
- background-color: #f7f7f7;
92
+ font-size: var(--font-size);
93
+ font-family: var(--font-family);
94
+ background-color: var(--color-1);
80
95
  }
81
96
  .flexlayout__tabset_header {
82
97
  position: absolute;
@@ -86,9 +101,9 @@
86
101
  right: 0;
87
102
  padding: 3px 3px 3px 5px;
88
103
  box-sizing: border-box;
89
- border-bottom: 1px solid #d9d9d9;
90
- color: black;
91
- background-color: #f7f7f7;
104
+ border-bottom: 1px solid var(--color-3);
105
+ color: var(--color-text);
106
+ background-color: var(--color-1);
92
107
  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
93
108
  }
94
109
  .flexlayout__tabset_header_content {
@@ -96,19 +111,19 @@
96
111
  }
97
112
  .flexlayout__tabset_tabbar_outer {
98
113
  box-sizing: border-box;
99
- background-color: #f7f7f7;
114
+ background-color: var(--color-1);
100
115
  position: absolute;
101
116
  left: 0;
102
117
  right: 0;
103
118
  overflow: hidden;
104
119
  display: flex;
105
- background-color: #f7f7f7;
120
+ background-color: var(--color-1);
106
121
  }
107
122
  .flexlayout__tabset_tabbar_outer_top {
108
- border-bottom: 1px solid #d9d9d9;
123
+ border-bottom: 1px solid var(--color-3);
109
124
  }
110
125
  .flexlayout__tabset_tabbar_outer_bottom {
111
- border-top: 1px solid #d9d9d9;
126
+ border-top: 1px solid var(--color-3);
112
127
  }
113
128
  .flexlayout__tabset_tabbar_inner {
114
129
  position: relative;
@@ -132,17 +147,17 @@
132
147
  border-bottom: 2px solid transparent;
133
148
  }
134
149
  .flexlayout__tabset-selected {
135
- background-image: linear-gradient(white, #cccccc);
150
+ background-image: linear-gradient(var(--color-background), var(--color-4));
136
151
  }
137
152
  .flexlayout__tabset-maximized {
138
- background-image: linear-gradient(#b3b3b3, #e6e6e6);
153
+ background-image: linear-gradient(var(--color-6), var(--color-2));
139
154
  }
140
155
  .flexlayout__tab {
141
156
  overflow: auto;
142
157
  position: absolute;
143
158
  box-sizing: border-box;
144
- color: black;
145
- background-color: white;
159
+ color: var(--color-text);
160
+ background-color: var(--color-background);
146
161
  }
147
162
  .flexlayout__tab_button {
148
163
  display: inline-flex;
@@ -153,13 +168,13 @@
153
168
  cursor: pointer;
154
169
  }
155
170
  .flexlayout__tab_button--selected {
156
- background-color: #d9d9d9;
157
- color: black;
171
+ background-color: var(--color-3);
172
+ color: var(--color-text);
158
173
  }
159
174
  @media (hover: hover) {
160
175
  .flexlayout__tab_button:hover {
161
- background-color: #d9d9d9;
162
- color: black;
176
+ background-color: var(--color-3);
177
+ color: var(--color-text);
163
178
  }
164
179
  }
165
180
  .flexlayout__tab_button--unselected {
@@ -183,8 +198,12 @@
183
198
  }
184
199
  .flexlayout__tab_button_textbox {
185
200
  border: none;
186
- color: green;
187
- background-color: #d9d9d9;
201
+ font-family: var(--font-family);
202
+ font-size: var(--font-size);
203
+ color: var(--color-text);
204
+ background-color: var(--color-5);
205
+ border: 1px inset var(--color-1);
206
+ border-radius: 3px;
188
207
  }
189
208
  .flexlayout__tab_button_textbox:focus {
190
209
  outline: none;
@@ -247,8 +266,8 @@
247
266
  overflow: auto;
248
267
  position: absolute;
249
268
  box-sizing: border-box;
250
- color: black;
251
- background-color: white;
269
+ color: var(--color-text);
270
+ background-color: var(--color-background);
252
271
  display: flex;
253
272
  justify-content: center;
254
273
  align-items: center;
@@ -271,25 +290,25 @@
271
290
  box-sizing: border-box;
272
291
  overflow: hidden;
273
292
  display: flex;
274
- font-size: medium;
275
- font-family: Roboto, Arial, sans-serif;
276
- background-color: #f7f7f7;
293
+ font-size: var(--font-size);
294
+ font-family: var(--font-family);
295
+ background-color: var(--color-1);
277
296
  }
278
297
  .flexlayout__border_top {
279
- border-bottom: 1px solid #d9d9d9;
298
+ border-bottom: 1px solid var(--color-3);
280
299
  align-items: center;
281
300
  }
282
301
  .flexlayout__border_bottom {
283
- border-top: 1px solid #d9d9d9;
302
+ border-top: 1px solid var(--color-3);
284
303
  align-items: center;
285
304
  }
286
305
  .flexlayout__border_left {
287
- border-right: 1px solid #d9d9d9;
306
+ border-right: 1px solid var(--color-3);
288
307
  align-content: center;
289
308
  flex-direction: column;
290
309
  }
291
310
  .flexlayout__border_right {
292
- border-left: 1px solid #d9d9d9;
311
+ border-left: 1px solid var(--color-3);
293
312
  align-content: center;
294
313
  flex-direction: column;
295
314
  }
@@ -328,16 +347,16 @@
328
347
  white-space: nowrap;
329
348
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
330
349
  border-radius: 3px;
331
- background-color: #e6e6e6;
350
+ background-color: var(--color-2);
332
351
  }
333
352
  .flexlayout__border_button--selected {
334
- background-color: #d9d9d9;
335
- color: black;
353
+ background-color: var(--color-3);
354
+ color: var(--color-text);
336
355
  }
337
356
  @media (hover: hover) {
338
357
  .flexlayout__border_button:hover {
339
- background-color: #d9d9d9;
340
- color: black;
358
+ background-color: var(--color-3);
359
+ color: var(--color-text);
341
360
  }
342
361
  }
343
362
  .flexlayout__border_button--unselected {
@@ -403,23 +422,26 @@
403
422
  margin-top: 5px;
404
423
  }
405
424
  .flexlayout__popup_menu {
406
- font-size: medium;
407
- font-family: Roboto, Arial, sans-serif;
425
+ font-size: var(--font-size);
426
+ font-family: var(--font-family);
408
427
  }
409
428
  .flexlayout__popup_menu_item {
429
+ margin: 2px;
410
430
  padding: 2px 10px 2px 10px;
411
431
  white-space: nowrap;
432
+ cursor: pointer;
433
+ border-radius: 2px;
412
434
  }
413
435
  @media (hover: hover) {
414
436
  .flexlayout__popup_menu_item:hover {
415
- background-color: #b3b3b3;
437
+ background-color: var(--color-6);
416
438
  }
417
439
  }
418
440
  .flexlayout__popup_menu_container {
419
441
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
420
- border: 1px solid #b3b3b3;
421
- color: black;
422
- background: white;
442
+ border: 1px solid var(--color-6);
443
+ color: var(--color-text);
444
+ background: var(--color-background);
423
445
  border-radius: 3px;
424
446
  position: absolute;
425
447
  z-index: 1000;
@@ -445,8 +467,8 @@
445
467
  bottom: 0;
446
468
  position: absolute;
447
469
  box-sizing: border-box;
448
- background-color: white;
449
- color: black;
470
+ background-color: var(--color-background);
471
+ color: var(--color-text);
450
472
  }
451
473
  .flexlayout__error_boundary_container {
452
474
  left: 0;
@@ -464,20 +486,20 @@
464
486
  .flexlayout__tabset_sizer {
465
487
  padding-top: 5px;
466
488
  padding-bottom: 3px;
467
- font-size: medium;
468
- font-family: Roboto, Arial, sans-serif;
489
+ font-size: var(--font-size);
490
+ font-family: var(--font-family);
469
491
  }
470
492
  .flexlayout__tabset_header_sizer {
471
493
  padding-top: 3px;
472
494
  padding-bottom: 3px;
473
- font-size: medium;
474
- font-family: Roboto, Arial, sans-serif;
495
+ font-size: var(--font-size);
496
+ font-family: var(--font-family);
475
497
  }
476
498
  .flexlayout__border_sizer {
477
499
  padding-top: 6px;
478
500
  padding-bottom: 5px;
479
- font-size: medium;
480
- font-family: Roboto, Arial, sans-serif;
501
+ font-size: var(--font-size);
502
+ font-family: var(--font-family);
481
503
  }
482
504
 
483
505
  /*# sourceMappingURL=gray.css.map */
package/style/gray.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["_base.scss","gray.scss"],"names":[],"mappings":"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","file":"gray.css"}
1
+ {"version":3,"sourceRoot":"","sources":["_base.scss","gray.scss"],"names":[],"mappings":"AASI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAtBJ;EACA;EACA;EACA;EACA;EAqBI;;AAGJ;ECwEA;;ADrEI;EACI;IACI;IACA;ICsEZ;;;ADlEI;EACI;;AAGJ;EACI;ECiER;EACA;;AD/DI;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;ECxFR;EACA;;AD0FQ;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;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EC1IJ;;AD8II;EC1IJ;;AD+IA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EC3IR;EACA;;AD6IQ;EACI;ICtIZ;IACA;;;AD0IQ;EC/IR;;ADmJQ;ECxKR;EACA;EACA;;AD0KQ;ECtKR;EACA;EACA;;ADwKQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;IACI;IACA;;;AAGR;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAIR;EACI;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;ECzQJ;;AD4QI;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;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;ECjUR;EACA;EACA;;ADkUQ;EC9TR;EACA;;ADgUQ;EACI;ICzTZ;IACA;;;AD6TQ;EClUR;;ADsUQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;IACA;;;AAIR;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAMhB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EAnhBJ;EACA;EACA;EACA;EACA;;AAmhBI;EACI;EAxhBR;EACA;EACA;EACA;EACA;EAuhBQ;EACA;EACA;;AAIR;EAjiBA;EACA;EACA;EACA;EACA;EA+hBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"gray.css"}
package/style/gray.scss CHANGED
@@ -14,32 +14,32 @@ $font-size: medium !default;
14
14
  $font-family: Roboto, Arial, sans-serif !default;
15
15
 
16
16
  @mixin tabset_mixin {
17
- background-color: $color_1;
17
+ background-color:var(--color-1);
18
18
  }
19
19
 
20
20
  @mixin tabset_tabbar_mixin {
21
- background-color: $color_1;
21
+ background-color:var(--color-1);
22
22
  }
23
23
 
24
24
  @mixin tabset_header_mixin {
25
- background-color: $color_1;
25
+ background-color:var(--color-1);
26
26
  }
27
27
 
28
28
  @mixin tabset_selected_mixin {
29
- background-image: linear-gradient($color_background, $color_4);
29
+ background-image: linear-gradient(var(--color-background),var(--color-4));
30
30
  }
31
31
 
32
32
  @mixin tabset_header_mixin {
33
- background-color: $color_1;
33
+ background-color:var(--color-1);
34
34
  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
35
35
  }
36
36
 
37
37
  @mixin tabset_selected_mixin {
38
- background-image: linear-gradient($color_background, $color_4);
38
+ background-image: linear-gradient(var(--color-background),var(--color-4));
39
39
  }
40
40
 
41
41
  @mixin tabset_maximized_mixin {
42
- background-image: linear-gradient($color_6, $color_2);
42
+ background-image: linear-gradient(var(--color-6),var(--color-2));
43
43
  }
44
44
 
45
45
  @mixin tab_top_mixin {
@@ -59,8 +59,8 @@ $font-family: Roboto, Arial, sans-serif !default;
59
59
  }
60
60
 
61
61
  @mixin tab_button_selected_mixin {
62
- background-color: $color_3;
63
- color: $color_text;
62
+ background-color:var(--color-3);
63
+ color:var(--color-text);
64
64
  }
65
65
 
66
66
  @mixin tab_button_unselected_mixin {
@@ -68,25 +68,25 @@ $font-family: Roboto, Arial, sans-serif !default;
68
68
  }
69
69
 
70
70
  @mixin tab_button_hovered_mixin {
71
- background-color: $color_3;
72
- color: $color_text;
71
+ background-color:var(--color-3);
72
+ color:var(--color-text);
73
73
  }
74
74
 
75
75
 
76
76
 
77
77
  @mixin border_mixin {
78
- background-color: $color_1;
78
+ background-color:var(--color-1);
79
79
  }
80
80
 
81
81
  @mixin border_button_mixin {
82
82
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
83
83
  border-radius: 3px;
84
- background-color: $color_2;
84
+ background-color:var(--color-2);
85
85
  }
86
86
 
87
87
  @mixin border_button_selected_mixin {
88
- background-color: $color_3;
89
- color: $color_text;
88
+ background-color:var(--color-3);
89
+ color:var(--color-text);
90
90
  }
91
91
 
92
92
  @mixin border_button_unselected_mixin {
@@ -94,21 +94,21 @@ $font-family: Roboto, Arial, sans-serif !default;
94
94
  }
95
95
 
96
96
  @mixin border_button_hovered_mixin {
97
- background-color: $color_3;
98
- color: $color_text;
97
+ background-color:var(--color-3);
98
+ color:var(--color-text);
99
99
  }
100
100
 
101
101
  @mixin splitter_mixin {
102
- background-color: $color_2;
102
+ background-color:var(--color-2);
103
103
  }
104
104
 
105
105
  @mixin splitter_hover_mixin {
106
- background-color: $color_4;
106
+ background-color:var(--color-4);
107
107
  }
108
108
 
109
109
  @mixin splitter_drag_mixin {
110
110
  border-radius: 5px;
111
- background-color: $color_5;
111
+ background-color:var(--color-5);
112
112
  }
113
113
 
114
114
  @mixin splitter_border_mixin {