flexlayout-react 0.5.16 → 0.5.20

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 (81) hide show
  1. package/ChangeLog.txt +24 -0
  2. package/README.md +128 -97
  3. package/declarations/DragDrop.d.ts +1 -0
  4. package/declarations/Rect.d.ts +4 -0
  5. package/declarations/Types.d.ts +8 -1
  6. package/declarations/model/BorderNode.d.ts +2 -1
  7. package/declarations/model/IJsonModel.d.ts +8 -0
  8. package/declarations/model/Model.d.ts +1 -0
  9. package/declarations/view/Layout.d.ts +19 -6
  10. package/dist/flexlayout.js +19 -19
  11. package/dist/flexlayout_min.js +1 -1
  12. package/lib/DockLocation.js +25 -11
  13. package/lib/DockLocation.js.map +1 -1
  14. package/lib/DragDrop.js +19 -3
  15. package/lib/DragDrop.js.map +1 -1
  16. package/lib/PopupMenu.js +14 -9
  17. package/lib/PopupMenu.js.map +1 -1
  18. package/lib/Rect.js +3 -0
  19. package/lib/Rect.js.map +1 -1
  20. package/lib/Types.js +7 -0
  21. package/lib/Types.js.map +1 -1
  22. package/lib/model/BorderNode.js +61 -14
  23. package/lib/model/BorderNode.js.map +1 -1
  24. package/lib/model/BorderSet.js +33 -19
  25. package/lib/model/BorderSet.js.map +1 -1
  26. package/lib/model/Model.js +23 -3
  27. package/lib/model/Model.js.map +1 -1
  28. package/lib/model/RowNode.js +19 -5
  29. package/lib/model/RowNode.js.map +1 -1
  30. package/lib/model/TabNode.js +10 -0
  31. package/lib/model/TabNode.js.map +1 -1
  32. package/lib/model/TabSetNode.js +34 -19
  33. package/lib/model/TabSetNode.js.map +1 -1
  34. package/lib/view/BorderButton.js +17 -6
  35. package/lib/view/BorderButton.js.map +1 -1
  36. package/lib/view/BorderTabSet.js +17 -6
  37. package/lib/view/BorderTabSet.js.map +1 -1
  38. package/lib/view/Layout.js +232 -57
  39. package/lib/view/Layout.js.map +1 -1
  40. package/lib/view/Splitter.js +35 -4
  41. package/lib/view/Splitter.js.map +1 -1
  42. package/lib/view/Tab.js +2 -2
  43. package/lib/view/Tab.js.map +1 -1
  44. package/lib/view/TabButton.js +16 -7
  45. package/lib/view/TabButton.js.map +1 -1
  46. package/lib/view/TabFloating.js +24 -12
  47. package/lib/view/TabFloating.js.map +1 -1
  48. package/lib/view/TabSet.js +49 -24
  49. package/lib/view/TabSet.js.map +1 -1
  50. package/package.json +11 -6
  51. package/src/DockLocation.ts +30 -9
  52. package/src/DragDrop.ts +26 -3
  53. package/src/PopupMenu.tsx +32 -11
  54. package/src/Rect.ts +6 -2
  55. package/src/Types.ts +7 -0
  56. package/src/model/BorderNode.ts +57 -15
  57. package/src/model/BorderSet.ts +32 -19
  58. package/src/model/IJsonModel.ts +8 -0
  59. package/src/model/Model.ts +30 -3
  60. package/src/model/RowNode.ts +8 -5
  61. package/src/model/TabNode.ts +11 -0
  62. package/src/model/TabSetNode.ts +33 -19
  63. package/src/view/BorderButton.tsx +34 -6
  64. package/src/view/BorderTabSet.tsx +25 -5
  65. package/src/view/Layout.tsx +299 -82
  66. package/src/view/Splitter.tsx +53 -4
  67. package/src/view/Tab.tsx +8 -2
  68. package/src/view/TabButton.tsx +31 -7
  69. package/src/view/TabFloating.tsx +42 -20
  70. package/src/view/TabSet.tsx +70 -18
  71. package/style/_base.scss +78 -51
  72. package/style/dark.css +94 -68
  73. package/style/dark.css.map +1 -1
  74. package/style/dark.scss +20 -20
  75. package/style/gray.css +94 -68
  76. package/style/gray.css.map +1 -1
  77. package/style/gray.scss +20 -20
  78. package/style/light.css +94 -68
  79. package/style/light.css.map +1 -1
  80. package/style/light.scss +18 -18
  81. package/yarn-error.log +0 -11828
package/style/light.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: #f0f0f0;
7
+ --color-3: #e9e9e9;
8
+ --color-4: #e2e2e2;
9
+ --color-5: #dbdbdb;
10
+ --color-6: #d4d4d4;
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: #f7f7f7;
23
+ background-color: var(--color-1);
11
24
  }
12
25
  @media (hover: hover) {
13
26
  .flexlayout__splitter:hover {
14
- background-color: #e2e2e2;
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 {
@@ -19,20 +34,23 @@
19
34
  }
20
35
  .flexlayout__splitter_drag {
21
36
  z-index: 1000;
22
- background-color: #e2e2e2;
37
+ background-color: var(--color-4);
38
+ }
39
+ .flexlayout__splitter_extra {
40
+ background-color: transparent;
23
41
  }
24
42
  .flexlayout__outline_rect {
25
43
  position: absolute;
26
- cursor: move;
44
+ pointer-events: none;
27
45
  box-sizing: border-box;
28
- border: 2px solid red;
46
+ border: 2px solid var(--color-drag1);
29
47
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
30
48
  border-radius: 5px;
31
49
  z-index: 1000;
32
50
  }
33
51
  .flexlayout__outline_rect_edge {
34
- cursor: move;
35
- border: 2px solid green;
52
+ pointer-events: none;
53
+ border: 2px solid var(--color-drag2);
36
54
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
37
55
  border-radius: 5px;
38
56
  z-index: 1000;
@@ -43,13 +61,14 @@
43
61
  z-index: 1000;
44
62
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
45
63
  background-color: gray;
64
+ pointer-events: none;
46
65
  }
47
66
  .flexlayout__drag_rect {
48
67
  position: absolute;
49
68
  cursor: move;
50
- color: black;
51
- background-color: #f7f7f7;
52
- border: 2px solid #e2e2e2;
69
+ color: var(--color-text);
70
+ background-color: var(--color-1);
71
+ border: 2px solid var(--color-4);
53
72
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
54
73
  border-radius: 5px;
55
74
  z-index: 1000;
@@ -62,16 +81,16 @@
62
81
  overflow: hidden;
63
82
  padding: 10px;
64
83
  word-wrap: break-word;
65
- font-size: medium;
66
- font-family: Roboto, Arial, sans-serif;
84
+ font-size: var(--font-size);
85
+ font-family: var(--font-family);
67
86
  }
68
87
  .flexlayout__tabset {
69
88
  overflow: hidden;
70
- background-color: #f7f7f7;
89
+ background-color: var(--color-1);
71
90
  box-sizing: border-box;
72
- font-size: medium;
73
- font-family: Roboto, Arial, sans-serif;
74
- background-color: white;
91
+ font-size: var(--font-size);
92
+ font-family: var(--font-family);
93
+ background-color: var(--color-background);
75
94
  }
76
95
  .flexlayout__tabset_header {
77
96
  position: absolute;
@@ -81,28 +100,28 @@
81
100
  right: 0;
82
101
  padding: 3px 3px 3px 5px;
83
102
  box-sizing: border-box;
84
- border-bottom: 1px solid #e9e9e9;
85
- color: black;
86
- background-color: white;
103
+ border-bottom: 1px solid var(--color-3);
104
+ color: var(--color-text);
105
+ background-color: var(--color-background);
87
106
  }
88
107
  .flexlayout__tabset_header_content {
89
108
  flex-grow: 1;
90
109
  }
91
110
  .flexlayout__tabset_tabbar_outer {
92
111
  box-sizing: border-box;
93
- background-color: #f7f7f7;
112
+ background-color: var(--color-1);
94
113
  position: absolute;
95
114
  left: 0;
96
115
  right: 0;
97
116
  overflow: hidden;
98
117
  display: flex;
99
- background-color: white;
118
+ background-color: var(--color-background);
100
119
  }
101
120
  .flexlayout__tabset_tabbar_outer_top {
102
- border-bottom: 1px solid #e9e9e9;
121
+ border-bottom: 1px solid var(--color-3);
103
122
  }
104
123
  .flexlayout__tabset_tabbar_outer_bottom {
105
- border-top: 1px solid #e9e9e9;
124
+ border-top: 1px solid var(--color-3);
106
125
  }
107
126
  .flexlayout__tabset_tabbar_inner {
108
127
  position: relative;
@@ -126,20 +145,20 @@
126
145
  border-bottom: 2px solid transparent;
127
146
  }
128
147
  .flexlayout__tabset-selected {
129
- background-color: #f7f7f7;
148
+ background-color: var(--color-1);
130
149
  }
131
150
  .flexlayout__tabset-maximized {
132
- background-color: #d4d4d4;
151
+ background-color: var(--color-6);
133
152
  }
134
153
  .flexlayout__tab {
135
154
  overflow: auto;
136
155
  position: absolute;
137
156
  box-sizing: border-box;
138
- color: black;
139
- background-color: white;
157
+ color: var(--color-text);
158
+ background-color: var(--color-background);
140
159
  }
141
160
  .flexlayout__tab_button {
142
- display: inline-flex;
161
+ display: flex;
143
162
  align-items: center;
144
163
  box-sizing: border-box;
145
164
  padding: 3px 8px;
@@ -147,34 +166,38 @@
147
166
  cursor: pointer;
148
167
  }
149
168
  .flexlayout__tab_button--selected {
150
- background-color: #e9e9e9;
151
- color: black;
169
+ background-color: var(--color-3);
170
+ color: var(--color-text);
152
171
  }
153
172
  @media (hover: hover) {
154
173
  .flexlayout__tab_button:hover {
155
- background-color: #e9e9e9;
156
- color: black;
174
+ background-color: var(--color-3);
175
+ color: var(--color-text);
157
176
  }
158
177
  }
159
178
  .flexlayout__tab_button--unselected {
160
179
  color: gray;
161
180
  }
162
181
  .flexlayout__tab_button_leading {
163
- display: inline-block;
182
+ display: flex;
164
183
  }
165
184
  .flexlayout__tab_button_content {
166
- display: inline-block;
185
+ display: flex;
167
186
  }
168
187
  .flexlayout__tab_button_textbox {
169
188
  border: none;
170
- color: green;
171
- background-color: #e9e9e9;
189
+ font-family: var(--font-family);
190
+ font-size: var(--font-size);
191
+ color: var(--color-text);
192
+ background-color: var(--color-5);
193
+ border: 1px inset var(--color-1);
194
+ border-radius: 3px;
172
195
  }
173
196
  .flexlayout__tab_button_textbox:focus {
174
197
  outline: none;
175
198
  }
176
199
  .flexlayout__tab_button_trailing {
177
- display: inline-block;
200
+ display: flex;
178
201
  margin-left: 8px;
179
202
  min-width: 8px;
180
203
  min-height: 8px;
@@ -231,8 +254,8 @@
231
254
  overflow: auto;
232
255
  position: absolute;
233
256
  box-sizing: border-box;
234
- color: black;
235
- background-color: white;
257
+ color: var(--color-text);
258
+ background-color: var(--color-background);
236
259
  display: flex;
237
260
  justify-content: center;
238
261
  align-items: center;
@@ -255,25 +278,25 @@
255
278
  box-sizing: border-box;
256
279
  overflow: hidden;
257
280
  display: flex;
258
- font-size: medium;
259
- font-family: Roboto, Arial, sans-serif;
260
- background-color: white;
281
+ font-size: var(--font-size);
282
+ font-family: var(--font-family);
283
+ background-color: var(--color-background);
261
284
  }
262
285
  .flexlayout__border_top {
263
- border-bottom: 1px solid #e9e9e9;
286
+ border-bottom: 1px solid var(--color-3);
264
287
  align-items: center;
265
288
  }
266
289
  .flexlayout__border_bottom {
267
- border-top: 1px solid #e9e9e9;
290
+ border-top: 1px solid var(--color-3);
268
291
  align-items: center;
269
292
  }
270
293
  .flexlayout__border_left {
271
- border-right: 1px solid #e9e9e9;
294
+ border-right: 1px solid var(--color-3);
272
295
  align-content: center;
273
296
  flex-direction: column;
274
297
  }
275
298
  .flexlayout__border_right {
276
- border-left: 1px solid #e9e9e9;
299
+ border-left: 1px solid var(--color-3);
277
300
  align-content: center;
278
301
  flex-direction: column;
279
302
  }
@@ -310,29 +333,29 @@
310
333
  margin: 2px;
311
334
  box-sizing: border-box;
312
335
  white-space: nowrap;
313
- background-color: #f0f0f0;
336
+ background-color: var(--color-2);
314
337
  }
315
338
  .flexlayout__border_button--selected {
316
- background-color: #e9e9e9;
317
- color: black;
339
+ background-color: var(--color-3);
340
+ color: var(--color-text);
318
341
  }
319
342
  @media (hover: hover) {
320
343
  .flexlayout__border_button:hover {
321
- background-color: #e9e9e9;
322
- color: black;
344
+ background-color: var(--color-3);
345
+ color: var(--color-text);
323
346
  }
324
347
  }
325
348
  .flexlayout__border_button--unselected {
326
349
  color: gray;
327
350
  }
328
351
  .flexlayout__border_button_leading {
329
- display: inline;
352
+ display: flex;
330
353
  }
331
354
  .flexlayout__border_button_content {
332
- display: inline-block;
355
+ display: flex;
333
356
  }
334
357
  .flexlayout__border_button_trailing {
335
- display: inline-block;
358
+ display: flex;
336
359
  margin-left: 8px;
337
360
  min-width: 8px;
338
361
  min-height: 8px;
@@ -385,23 +408,26 @@
385
408
  margin-top: 5px;
386
409
  }
387
410
  .flexlayout__popup_menu {
388
- font-size: medium;
389
- font-family: Roboto, Arial, sans-serif;
411
+ font-size: var(--font-size);
412
+ font-family: var(--font-family);
390
413
  }
391
414
  .flexlayout__popup_menu_item {
415
+ margin: 2px;
392
416
  padding: 2px 10px 2px 10px;
393
417
  white-space: nowrap;
418
+ cursor: pointer;
419
+ border-radius: 2px;
394
420
  }
395
421
  @media (hover: hover) {
396
422
  .flexlayout__popup_menu_item:hover {
397
- background-color: #d4d4d4;
423
+ background-color: var(--color-6);
398
424
  }
399
425
  }
400
426
  .flexlayout__popup_menu_container {
401
427
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
402
- border: 1px solid #d4d4d4;
403
- color: black;
404
- background: white;
428
+ border: 1px solid var(--color-6);
429
+ color: var(--color-text);
430
+ background: var(--color-background);
405
431
  border-radius: 3px;
406
432
  position: absolute;
407
433
  z-index: 1000;
@@ -427,8 +453,8 @@
427
453
  bottom: 0;
428
454
  position: absolute;
429
455
  box-sizing: border-box;
430
- background-color: white;
431
- color: black;
456
+ background-color: var(--color-background);
457
+ color: var(--color-text);
432
458
  }
433
459
  .flexlayout__error_boundary_container {
434
460
  left: 0;
@@ -446,20 +472,20 @@
446
472
  .flexlayout__tabset_sizer {
447
473
  padding-top: 5px;
448
474
  padding-bottom: 3px;
449
- font-size: medium;
450
- font-family: Roboto, Arial, sans-serif;
475
+ font-size: var(--font-size);
476
+ font-family: var(--font-family);
451
477
  }
452
478
  .flexlayout__tabset_header_sizer {
453
479
  padding-top: 3px;
454
480
  padding-bottom: 3px;
455
- font-size: medium;
456
- font-family: Roboto, Arial, sans-serif;
481
+ font-size: var(--font-size);
482
+ font-family: var(--font-family);
457
483
  }
458
484
  .flexlayout__border_sizer {
459
485
  padding-top: 6px;
460
486
  padding-bottom: 5px;
461
- font-size: medium;
462
- font-family: Roboto, Arial, sans-serif;
487
+ font-size: var(--font-size);
488
+ font-family: var(--font-family);
463
489
  }
464
490
 
465
491
  /*# sourceMappingURL=light.css.map */
package/style/light.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["_base.scss","light.scss"],"names":[],"mappings":"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","file":"light.css"}
1
+ {"version":3,"sourceRoot":"","sources":["_base.scss","light.scss"],"names":[],"mappings":"AASI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAtBJ;EACA;EACA;EACA;EACA;EAqBI;;AAGJ;ECoDA;;ADjDI;EACI;IACI;IACA;ICkDZ;;;AD9CI;EACI;;AAGJ;EACI;EC6CR;;AD1CI;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;;AAEA;EACI;;AAEJ;EACI;;AAMhB;ECnJJ;;ADuJI;ECnJJ;;ADwJA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EC3JR;EACA;;AD6JQ;EACI;ICtJZ;IACA;;;AD0JQ;EC/JR;;AD2KQ;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;EC3RJ;;AD8RI;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;ECnVR;;ADsVQ;EClVR;EACA;;ADoVQ;EACI;IC7UZ;IACA;;;ADiVQ;ECtVR;;AD0VQ;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":"light.css"}
package/style/light.scss CHANGED
@@ -14,23 +14,23 @@ $font-size: medium !default;
14
14
  $font-family: Roboto, Arial, sans-serif !default;
15
15
 
16
16
  @mixin tabset_mixin {
17
- background-color: $color_background;
17
+ background-color: var(--color-background);
18
18
  }
19
19
 
20
20
  @mixin tabset_tabbar_mixin {
21
- background-color: $color_background;
21
+ background-color: var(--color-background);
22
22
  }
23
23
 
24
24
  @mixin tabset_header_mixin {
25
- background-color: $color_background;
25
+ background-color: var(--color-background);
26
26
  }
27
27
 
28
28
  @mixin tabset_selected_mixin {
29
- background-color: $color_1;
29
+ background-color: var(--color-1);
30
30
  }
31
31
 
32
32
  @mixin tabset_maximized_mixin {
33
- background-color: $color_6;
33
+ background-color: var(--color-6);
34
34
  }
35
35
 
36
36
  @mixin tab_top_mixin {
@@ -43,8 +43,8 @@ $font-family: Roboto, Arial, sans-serif !default;
43
43
  }
44
44
 
45
45
  @mixin tab_button_selected_mixin {
46
- background-color: $color_3;
47
- color: $color_text;
46
+ background-color: var(--color-3);
47
+ color: var(--color-text);
48
48
  }
49
49
 
50
50
  @mixin tab_button_unselected_mixin {
@@ -52,21 +52,21 @@ $font-family: Roboto, Arial, sans-serif !default;
52
52
  }
53
53
 
54
54
  @mixin tab_button_hovered_mixin {
55
- background-color: $color_3;
56
- color: $color_text;
55
+ background-color: var(--color-3);
56
+ color: var(--color-text);
57
57
  }
58
58
 
59
59
  @mixin border_mixin {
60
- background-color: $color_background;
60
+ background-color: var(--color-background);
61
61
  }
62
62
 
63
63
  @mixin border_button_mixin {
64
- background-color: $color_2;
64
+ background-color: var(--color-2);
65
65
  }
66
66
 
67
67
  @mixin border_button_selected_mixin {
68
- background-color: $color_3;
69
- color: $color_text;
68
+ background-color: var(--color-3);
69
+ color: var(--color-text);
70
70
  }
71
71
 
72
72
  @mixin border_button_unselected_mixin {
@@ -74,20 +74,20 @@ $font-family: Roboto, Arial, sans-serif !default;
74
74
  }
75
75
 
76
76
  @mixin border_button_hovered_mixin {
77
- background-color: $color_3;
78
- color: $color_text;
77
+ background-color: var(--color-3);
78
+ color: var(--color-text);
79
79
  }
80
80
 
81
81
  @mixin splitter_mixin {
82
- background-color: $color_1;
82
+ background-color: var(--color-1);
83
83
  }
84
84
 
85
85
  @mixin splitter_hover_mixin {
86
- background-color: $color_4;
86
+ background-color: var(--color-4);
87
87
  }
88
88
 
89
89
  @mixin splitter_drag_mixin {
90
- background-color: $color_4;
90
+ background-color: var(--color-4);
91
91
  }
92
92
 
93
93
  @mixin splitter_border_mixin {