flexlayout-react 0.6.6 → 0.6.9
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.
- package/.github/ISSUE_TEMPLATE/bug_report.yml +104 -0
- package/.github/ISSUE_TEMPLATE/config.yml +5 -0
- package/ChangeLog.txt +9 -0
- package/README.md +10 -0
- package/declarations/Types.d.ts +3 -0
- package/declarations/view/Layout.d.ts +3 -0
- package/dist/flexlayout.js +6 -6
- package/dist/flexlayout_min.js +1 -1
- package/lib/Types.js +3 -0
- package/lib/Types.js.map +1 -1
- package/lib/model/Node.js +13 -8
- package/lib/model/Node.js.map +1 -1
- package/lib/model/TabSetNode.js +4 -1
- package/lib/model/TabSetNode.js.map +1 -1
- package/lib/view/BorderTabSet.js +1 -0
- package/lib/view/BorderTabSet.js.map +1 -1
- package/lib/view/Layout.js +8 -2
- package/lib/view/Layout.js.map +1 -1
- package/lib/view/TabSet.js +29 -11
- package/lib/view/TabSet.js.map +1 -1
- package/package.json +3 -3
- package/src/Types.ts +3 -0
- package/src/model/Node.ts +11 -7
- package/src/model/TabSetNode.ts +4 -1
- package/src/view/BorderTabSet.tsx +4 -0
- package/src/view/Layout.tsx +13 -2
- package/src/view/TabSet.tsx +29 -11
- package/style/_base.scss +63 -49
- package/style/dark.css +91 -49
- package/style/dark.css.map +1 -1
- package/style/dark.scss +66 -21
- package/style/gray.css +91 -66
- package/style/gray.css.map +1 -1
- package/style/gray.scss +70 -24
- package/style/light.css +91 -51
- package/style/light.css.map +1 -1
- package/style/light.scss +68 -19
- package/style/underline.css +559 -0
- package/style/underline.css.map +1 -0
- 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-
|
|
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-
|
|
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:
|
|
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-
|
|
72
|
-
background-color: var(--color-
|
|
73
|
-
border: 2px solid var(--color-
|
|
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.
|
|
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-
|
|
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
|
-
|
|
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-
|
|
106
|
-
color: var(--color-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
188
|
+
background-color: var(--color-tabset-background-selected);
|
|
154
189
|
}
|
|
155
190
|
.flexlayout__tabset-maximized {
|
|
156
|
-
background-color: var(--color-
|
|
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-
|
|
182
|
-
color: var(--color-
|
|
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-
|
|
187
|
-
color: var(--color-
|
|
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-
|
|
204
|
-
background-color: var(--color-
|
|
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:
|
|
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
|
-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
354
|
-
color: var(--color-
|
|
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-
|
|
359
|
-
color: var(--color-
|
|
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:
|
|
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:
|
|
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-
|
|
440
|
-
color: var(--color-
|
|
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":["
|
|
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";
|