flexlayout-react 0.6.6 → 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.
package/style/dark.css CHANGED
@@ -14,6 +14,40 @@
14
14
  --color-drag2-background: rgba(128, 128, 128, 0.15);
15
15
  --font-size: medium;
16
16
  --font-family: Roboto, Arial, sans-serif;
17
+ --color-overflow: gray;
18
+ --color-tabset-background: var(--color-1);
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-1);
23
+ --color-tabset-header: var(--color-text);
24
+ --color-border-background: var(--color-1);
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-2);
37
+ --color-splitter-hover: var(--color-4);
38
+ --color-splitter-drag: var(--color-5);
39
+ --color-drag-rect-border: var(--color-4);
40
+ --color-drag-rect-background: var(--color-1);
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: black;
45
+ --color-popup-selected: var(--color-text);
46
+ --color-popup-selected-background: var(--color-4);
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-2);
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,8 +70,8 @@
36
70
  }
37
71
  .flexlayout__splitter_drag {
38
72
  z-index: 1000;
73
+ background-color: var(--color-splitter-drag);
39
74
  border-radius: 5px;
40
- background-color: var(--color-5);
41
75
  }
42
76
  .flexlayout__splitter_extra {
43
77
  background-color: transparent;
@@ -63,16 +97,15 @@
63
97
  position: absolute;
64
98
  z-index: 1000;
65
99
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
66
- background-color: gray;
100
+ background-color: var(--color-edge-marker);
67
101
  pointer-events: none;
68
102
  }
69
103
  .flexlayout__drag_rect {
70
104
  position: absolute;
71
105
  cursor: move;
72
- color: var(--color-text);
73
- background-color: var(--color-1);
74
- border: 2px solid var(--color-4);
75
- box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
106
+ color: var(--color-drag-rect);
107
+ background-color: var(--color-drag-rect-background);
108
+ border: 2px solid var(--color-drag-rect-border);
76
109
  border-radius: 5px;
77
110
  z-index: 1000;
78
111
  box-sizing: border-box;
@@ -82,18 +115,20 @@
82
115
  justify-content: center;
83
116
  flex-direction: column;
84
117
  overflow: hidden;
85
- padding: 0.5em 1em;
118
+ padding: 0.3em 1em;
86
119
  word-wrap: break-word;
87
120
  font-size: var(--font-size);
88
121
  font-family: var(--font-family);
89
122
  }
90
123
  .flexlayout__tabset {
91
124
  overflow: hidden;
92
- background-color: var(--color-1);
125
+ background-color: var(--color-tabset-background);
93
126
  box-sizing: border-box;
94
127
  font-size: var(--font-size);
95
128
  font-family: var(--font-family);
96
- background-color: var(--color-1);
129
+ }
130
+ .flexlayout__tabset_tab_divider {
131
+ width: 4px;
97
132
  }
98
133
  .flexlayout__tabset_header {
99
134
  position: absolute;
@@ -103,9 +138,9 @@
103
138
  right: 0;
104
139
  padding: 3px 3px 3px 5px;
105
140
  box-sizing: border-box;
106
- border-bottom: 1px solid var(--color-3);
107
- color: var(--color-text);
108
- background-color: var(--color-1);
141
+ border-bottom: 1px solid var(--color-tabset-divider-line);
142
+ color: var(--color-tabset-header);
143
+ background-color: var(--color-tabset-header-background);
109
144
  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
110
145
  }
111
146
  .flexlayout__tabset_header_content {
@@ -113,19 +148,18 @@
113
148
  }
114
149
  .flexlayout__tabset_tabbar_outer {
115
150
  box-sizing: border-box;
116
- background-color: var(--color-1);
151
+ background-color: var(--color-tabset-background);
117
152
  position: absolute;
118
153
  left: 0;
119
154
  right: 0;
120
155
  overflow: hidden;
121
156
  display: flex;
122
- background-color: var(--color-1);
123
157
  }
124
158
  .flexlayout__tabset_tabbar_outer_top {
125
- border-bottom: 1px solid var(--color-3);
159
+ border-bottom: 1px solid var(--color-tabset-divider-line);
126
160
  }
127
161
  .flexlayout__tabset_tabbar_outer_bottom {
128
- border-top: 1px solid var(--color-3);
162
+ border-top: 1px solid var(--color-tabset-divider-line);
129
163
  }
130
164
  .flexlayout__tabset_tabbar_inner {
131
165
  position: relative;
@@ -136,7 +170,6 @@
136
170
  }
137
171
  .flexlayout__tabset_tabbar_inner_tab_container {
138
172
  display: flex;
139
- gap: 4px;
140
173
  padding-left: 4px;
141
174
  padding-right: 4px;
142
175
  box-sizing: border-box;
@@ -152,9 +185,11 @@
152
185
  border-bottom: 2px solid transparent;
153
186
  }
154
187
  .flexlayout__tabset-selected {
188
+ background-color: var(--color-tabset-background-selected);
155
189
  background-image: linear-gradient(var(--color-background), var(--color-4));
156
190
  }
157
191
  .flexlayout__tabset-maximized {
192
+ background-color: var(--color-tabset-background-maximized);
158
193
  background-image: linear-gradient(var(--color-6), var(--color-2));
159
194
  }
160
195
  .flexlayout__tab_button_stamp {
@@ -168,8 +203,8 @@
168
203
  overflow: auto;
169
204
  position: absolute;
170
205
  box-sizing: border-box;
171
- color: var(--color-text);
172
206
  background-color: var(--color-background);
207
+ color: var(--color-text);
173
208
  }
174
209
  .flexlayout__tab_button {
175
210
  display: flex;
@@ -180,17 +215,18 @@
180
215
  cursor: pointer;
181
216
  }
182
217
  .flexlayout__tab_button--selected {
183
- background-color: var(--color-4);
184
- color: var(--color-text);
218
+ background-color: var(--color-tab-selected-background);
219
+ color: var(--color-tab-selected);
185
220
  }
186
221
  @media (hover: hover) {
187
222
  .flexlayout__tab_button:hover {
188
- background-color: var(--color-4);
189
- color: var(--color-text);
223
+ background-color: var(--color-tab-selected-background);
224
+ color: var(--color-tab-selected);
190
225
  }
191
226
  }
192
227
  .flexlayout__tab_button--unselected {
193
- color: gray;
228
+ background-color: var(--color-tab-unselected-background);
229
+ color: var(--color-tab-unselected);
194
230
  }
195
231
  .flexlayout__tab_button_top {
196
232
  box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
@@ -212,8 +248,8 @@
212
248
  border: none;
213
249
  font-family: var(--font-family);
214
250
  font-size: var(--font-size);
215
- color: var(--color-text);
216
- background-color: var(--color-5);
251
+ color: var(--color-tab-textbox);
252
+ background-color: var(--color-tab-textbox-background);
217
253
  border: 1px inset var(--color-1);
218
254
  border-radius: 3px;
219
255
  width: 10em;
@@ -241,7 +277,7 @@
241
277
  display: flex;
242
278
  align-items: center;
243
279
  border: none;
244
- color: gray;
280
+ color: var(--color-overflow);
245
281
  font-size: inherit;
246
282
  background-color: transparent;
247
283
  }
@@ -302,23 +338,24 @@
302
338
  display: flex;
303
339
  font-size: var(--font-size);
304
340
  font-family: var(--font-family);
305
- background-color: var(--color-1);
341
+ color: var(--color-border);
342
+ background-color: var(--color-border-background);
306
343
  }
307
344
  .flexlayout__border_top {
308
- border-bottom: 1px solid var(--color-3);
345
+ border-bottom: 1px solid var(--color-border-divider-line);
309
346
  align-items: center;
310
347
  }
311
348
  .flexlayout__border_bottom {
312
- border-top: 1px solid var(--color-3);
349
+ border-top: 1px solid var(--color-border-divider-line);
313
350
  align-items: center;
314
351
  }
315
352
  .flexlayout__border_left {
316
- border-right: 1px solid var(--color-3);
353
+ border-right: 1px solid var(--color-border-divider-line);
317
354
  align-content: center;
318
355
  flex-direction: column;
319
356
  }
320
357
  .flexlayout__border_right {
321
- border-left: 1px solid var(--color-3);
358
+ border-left: 1px solid var(--color-border-divider-line);
322
359
  align-content: center;
323
360
  flex-direction: column;
324
361
  }
@@ -332,7 +369,6 @@
332
369
  .flexlayout__border_inner_tab_container {
333
370
  white-space: nowrap;
334
371
  display: flex;
335
- gap: 4px;
336
372
  padding-left: 2px;
337
373
  padding-right: 2px;
338
374
  box-sizing: border-box;
@@ -350,6 +386,9 @@
350
386
  transform-origin: top right;
351
387
  transform: rotate(-90deg);
352
388
  }
389
+ .flexlayout__border_tab_divider {
390
+ width: 4px;
391
+ }
353
392
  .flexlayout__border_button {
354
393
  display: flex;
355
394
  gap: 0.3em;
@@ -361,20 +400,21 @@
361
400
  white-space: nowrap;
362
401
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
363
402
  border-radius: 3px;
364
- background-color: var(--color-2);
365
403
  }
366
404
  .flexlayout__border_button--selected {
367
- background-color: var(--color-4);
368
- color: var(--color-text);
405
+ background-color: var(--color-border-tab-selected-background);
406
+ color: var(--color-border-tab-selected);
369
407
  }
370
408
  @media (hover: hover) {
371
409
  .flexlayout__border_button:hover {
410
+ background-color: var(--color-border-tab-selected-background);
411
+ color: var(--color-border-tab-selected);
372
412
  background-color: var(--color-4);
373
- color: var(--color-text);
374
413
  }
375
414
  }
376
415
  .flexlayout__border_button--unselected {
377
- color: gray;
416
+ background-color: var(--color-border-tab-unselected-background);
417
+ color: var(--color-border-tab-unselected);
378
418
  }
379
419
  .flexlayout__border_button_leading {
380
420
  display: flex;
@@ -429,7 +469,7 @@
429
469
  display: flex;
430
470
  align-items: center;
431
471
  border: none;
432
- color: gray;
472
+ color: var(--color-overflow);
433
473
  font-size: inherit;
434
474
  background-color: transparent;
435
475
  }
@@ -450,9 +490,9 @@
450
490
  }
451
491
  .flexlayout__popup_menu_container {
452
492
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
453
- border: 1px solid var(--color-6);
454
- color: var(--color-text);
455
- background: var(--color-background);
493
+ border: 1px solid var(--color-popup-border);
494
+ color: var(--color-popup-unselected);
495
+ background: var(--color-popup-unselected-background);
456
496
  border-radius: 3px;
457
497
  position: absolute;
458
498
  z-index: 1000;
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["_base.scss","dark.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;EC+EA;;AD5EI;EACI;IACI;IACA;IC6EZ;;;ADzEI;EACI;;AAGJ;EACI;ECwER;EACA;;ADtEI;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;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EC7IJ;;ADiJI;EC7IJ;;ADkJA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;ECtJR;EACA;;ADwJQ;EACI;ICjJZ;IACA;;;ADqJQ;EC1JR;;AD8JQ;ECpLR;EACA;EACA;;ADsLQ;EClLR;EACA;EACA;;ADoLQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;ECpLZ;;AD4LQ;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;IC5NhB;;;AD8OQ;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;EChSJ;;ADmSI;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;ECpVR;EACA;EACA;;ADqVQ;ECjVR;EACA;;ADmVQ;EACI;IC5UZ;IACA;;;ADgVQ;ECrVR;;ADyVQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;ECxXZ;;ADgYQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ICjahB;;;ADyaY;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":"dark.css"}
1
+ {"version":3,"sourceRoot":"","sources":["dark.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;ED+HR;;AC5HI;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;EDvBR;;AC0BQ;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;ED7ER;;ACiFI;EACI;ED9ER;;ACmFA;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;;AAIJ;ED3HR;EACA;EACA;;AC6HQ;EDzHR;EACA;EACA;;AC2HQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDnIZ;;AC2IQ;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;ID3KhB;;;AC6LQ;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;EDzSR;EACA;;AC2SQ;EACI;EACA;;AAGJ;EACI;IACI;IACA;IDzShB;;;AC8SQ;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDnVZ;;AC2VQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID5XhB;;;ACoYY;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":"dark.css"}
package/style/dark.scss CHANGED
@@ -15,24 +15,80 @@ $color_drag2_background: rgba(128, 128, 128, 0.15) !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-1);
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-1);
45
+ --color-tabset-header: var(--color-text);
46
+
47
+ --color-border-background: var(--color-1);
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-2);
63
+ --color-splitter-hover: var(--color-4);
64
+ --color-splitter-drag: var(--color-5);
65
+
66
+ --color-drag-rect-border: var(--color-4);
67
+ --color-drag-rect-background: var(--color-1);
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-4);
75
+
76
+ --color-edge-marker: gray;
77
+ }
78
+ }
18
79
  @mixin tabset_mixin {
19
- background-color: var(--color-1);
20
80
  }
21
81
 
22
82
  @mixin tabset_tabbar_mixin {
23
- background-color: var(--color-1);
24
83
  }
25
84
 
26
85
  @mixin tabset_header_mixin {
27
- background-color: var(--color-1);
28
86
  }
29
87
 
30
88
  @mixin tabset_selected_mixin {
31
- background-image: linear-gradient(var(--color-background), var(--color-4));
32
89
  }
33
90
 
34
91
  @mixin tabset_header_mixin {
35
- background-color: var(--color-1);
36
92
  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
37
93
  }
38
94
 
@@ -56,27 +112,19 @@ $font-family: Roboto, Arial, sans-serif !default;
56
112
  border-bottom-right-radius: 3px;
57
113
  }
58
114
 
59
-
60
115
  @mixin tab_button_mixin {
61
-
62
116
  }
63
117
 
64
118
  @mixin tab_button_selected_mixin {
65
- background-color: var(--color-4);
66
- color: var(--color-text);
67
119
  }
68
120
 
69
121
  @mixin tab_button_unselected_mixin {
70
- color: gray;
71
122
  }
72
123
 
73
124
  @mixin tab_button_hovered_mixin {
74
- background-color: var(--color-4);
75
- color: var(--color-text);
76
125
  }
77
126
 
78
127
  @mixin border_mixin {
79
- background-color: var(--color-1);
80
128
  }
81
129
 
82
130
  @mixin close_button_hovered_mixin {
@@ -90,38 +138,35 @@ $font-family: Roboto, Arial, sans-serif !default;
90
138
  @mixin border_button_mixin {
91
139
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
92
140
  border-radius: 3px;
93
- background-color: var(--color-2);
94
141
  }
95
142
 
96
143
  @mixin border_button_selected_mixin {
97
- background-color: var(--color-4);
98
- color: var(--color-text);
99
144
  }
100
145
 
101
146
  @mixin border_button_unselected_mixin {
102
- color: gray;
103
147
  }
104
148
 
105
149
  @mixin border_button_hovered_mixin {
106
150
  background-color: var(--color-4);
107
- color: var(--color-text);
108
151
  }
109
152
 
110
153
  @mixin splitter_mixin {
111
- background-color: var(--color-2);
112
154
  }
113
155
 
114
156
  @mixin splitter_hover_mixin {
115
- background-color: var(--color-4);
116
157
  }
117
158
 
118
159
  @mixin splitter_drag_mixin {
119
160
  border-radius: 5px;
120
- background-color: var(--color-5);
121
161
  }
122
162
 
123
163
  @mixin splitter_border_mixin {
124
164
  }
125
165
 
166
+ @mixin tabset_tab_divider_mixin {
167
+ }
168
+
169
+ @mixin border_tab_divider_mixin {
170
+ }
126
171
 
127
172
  @import "_base";