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
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["_base.scss","dark.scss"],"names":[],"mappings":"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","file":"dark.css"}
1
+ {"version":3,"sourceRoot":"","sources":["_base.scss","dark.scss"],"names":[],"mappings":"AASI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAtBJ;EACA;EACA;EACA;EACA;EAqBI;;AAGJ;ECuEA;;ADpEI;EACI;IACI;IACA;ICqEZ;;;ADjEI;EACI;;AAGJ;EACI;ECgER;EACA;;AD9DI;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;EC1IR;EACA;;AD4IQ;EACI;ICrIZ;IACA;;;ADyIQ;EC9IR;;ADkJQ;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;EC1QJ;;AD6QI;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;EClUR;EACA;EACA;;ADmUQ;EC/TR;EACA;;ADiUQ;EACI;IC1TZ;IACA;;;AD8TQ;ECnUR;;ADuUQ;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":"dark.css"}
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,20 +35,23 @@
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);
39
+ }
40
+ .flexlayout__splitter_extra {
41
+ background-color: transparent;
24
42
  }
25
43
  .flexlayout__outline_rect {
26
44
  position: absolute;
27
- cursor: move;
45
+ pointer-events: none;
28
46
  box-sizing: border-box;
29
- border: 2px solid red;
47
+ border: 2px solid var(--color-drag1);
30
48
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
31
49
  border-radius: 5px;
32
50
  z-index: 1000;
33
51
  }
34
52
  .flexlayout__outline_rect_edge {
35
- cursor: move;
36
- border: 2px solid green;
53
+ pointer-events: none;
54
+ border: 2px solid var(--color-drag2);
37
55
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
38
56
  border-radius: 5px;
39
57
  z-index: 1000;
@@ -44,13 +62,14 @@
44
62
  z-index: 1000;
45
63
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
46
64
  background-color: gray;
65
+ pointer-events: none;
47
66
  }
48
67
  .flexlayout__drag_rect {
49
68
  position: absolute;
50
69
  cursor: move;
51
- color: black;
52
- background-color: #f7f7f7;
53
- border: 2px solid #cccccc;
70
+ color: var(--color-text);
71
+ background-color: var(--color-1);
72
+ border: 2px solid var(--color-4);
54
73
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
55
74
  border-radius: 5px;
56
75
  z-index: 1000;
@@ -63,16 +82,16 @@
63
82
  overflow: hidden;
64
83
  padding: 10px;
65
84
  word-wrap: break-word;
66
- font-size: medium;
67
- font-family: Roboto, Arial, sans-serif;
85
+ font-size: var(--font-size);
86
+ font-family: var(--font-family);
68
87
  }
69
88
  .flexlayout__tabset {
70
89
  overflow: hidden;
71
- background-color: #f7f7f7;
90
+ background-color: var(--color-1);
72
91
  box-sizing: border-box;
73
- font-size: medium;
74
- font-family: Roboto, Arial, sans-serif;
75
- background-color: #f7f7f7;
92
+ font-size: var(--font-size);
93
+ font-family: var(--font-family);
94
+ background-color: var(--color-1);
76
95
  }
77
96
  .flexlayout__tabset_header {
78
97
  position: absolute;
@@ -82,9 +101,9 @@
82
101
  right: 0;
83
102
  padding: 3px 3px 3px 5px;
84
103
  box-sizing: border-box;
85
- border-bottom: 1px solid #d9d9d9;
86
- color: black;
87
- background-color: #f7f7f7;
104
+ border-bottom: 1px solid var(--color-3);
105
+ color: var(--color-text);
106
+ background-color: var(--color-1);
88
107
  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
89
108
  }
90
109
  .flexlayout__tabset_header_content {
@@ -92,19 +111,19 @@
92
111
  }
93
112
  .flexlayout__tabset_tabbar_outer {
94
113
  box-sizing: border-box;
95
- background-color: #f7f7f7;
114
+ background-color: var(--color-1);
96
115
  position: absolute;
97
116
  left: 0;
98
117
  right: 0;
99
118
  overflow: hidden;
100
119
  display: flex;
101
- background-color: #f7f7f7;
120
+ background-color: var(--color-1);
102
121
  }
103
122
  .flexlayout__tabset_tabbar_outer_top {
104
- border-bottom: 1px solid #d9d9d9;
123
+ border-bottom: 1px solid var(--color-3);
105
124
  }
106
125
  .flexlayout__tabset_tabbar_outer_bottom {
107
- border-top: 1px solid #d9d9d9;
126
+ border-top: 1px solid var(--color-3);
108
127
  }
109
128
  .flexlayout__tabset_tabbar_inner {
110
129
  position: relative;
@@ -128,20 +147,20 @@
128
147
  border-bottom: 2px solid transparent;
129
148
  }
130
149
  .flexlayout__tabset-selected {
131
- background-image: linear-gradient(white, #cccccc);
150
+ background-image: linear-gradient(var(--color-background), var(--color-4));
132
151
  }
133
152
  .flexlayout__tabset-maximized {
134
- background-image: linear-gradient(#b3b3b3, #e6e6e6);
153
+ background-image: linear-gradient(var(--color-6), var(--color-2));
135
154
  }
136
155
  .flexlayout__tab {
137
156
  overflow: auto;
138
157
  position: absolute;
139
158
  box-sizing: border-box;
140
- color: black;
141
- background-color: white;
159
+ color: var(--color-text);
160
+ background-color: var(--color-background);
142
161
  }
143
162
  .flexlayout__tab_button {
144
- display: inline-flex;
163
+ display: flex;
145
164
  align-items: center;
146
165
  box-sizing: border-box;
147
166
  padding: 3px 8px;
@@ -149,13 +168,13 @@
149
168
  cursor: pointer;
150
169
  }
151
170
  .flexlayout__tab_button--selected {
152
- background-color: #d9d9d9;
153
- color: black;
171
+ background-color: var(--color-3);
172
+ color: var(--color-text);
154
173
  }
155
174
  @media (hover: hover) {
156
175
  .flexlayout__tab_button:hover {
157
- background-color: #d9d9d9;
158
- color: black;
176
+ background-color: var(--color-3);
177
+ color: var(--color-text);
159
178
  }
160
179
  }
161
180
  .flexlayout__tab_button--unselected {
@@ -172,21 +191,25 @@
172
191
  border-bottom-right-radius: 3px;
173
192
  }
174
193
  .flexlayout__tab_button_leading {
175
- display: inline-block;
194
+ display: flex;
176
195
  }
177
196
  .flexlayout__tab_button_content {
178
- display: inline-block;
197
+ display: flex;
179
198
  }
180
199
  .flexlayout__tab_button_textbox {
181
200
  border: none;
182
- color: green;
183
- 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;
184
207
  }
185
208
  .flexlayout__tab_button_textbox:focus {
186
209
  outline: none;
187
210
  }
188
211
  .flexlayout__tab_button_trailing {
189
- display: inline-block;
212
+ display: flex;
190
213
  margin-left: 8px;
191
214
  min-width: 8px;
192
215
  min-height: 8px;
@@ -243,8 +266,8 @@
243
266
  overflow: auto;
244
267
  position: absolute;
245
268
  box-sizing: border-box;
246
- color: black;
247
- background-color: white;
269
+ color: var(--color-text);
270
+ background-color: var(--color-background);
248
271
  display: flex;
249
272
  justify-content: center;
250
273
  align-items: center;
@@ -267,25 +290,25 @@
267
290
  box-sizing: border-box;
268
291
  overflow: hidden;
269
292
  display: flex;
270
- font-size: medium;
271
- font-family: Roboto, Arial, sans-serif;
272
- background-color: #f7f7f7;
293
+ font-size: var(--font-size);
294
+ font-family: var(--font-family);
295
+ background-color: var(--color-1);
273
296
  }
274
297
  .flexlayout__border_top {
275
- border-bottom: 1px solid #d9d9d9;
298
+ border-bottom: 1px solid var(--color-3);
276
299
  align-items: center;
277
300
  }
278
301
  .flexlayout__border_bottom {
279
- border-top: 1px solid #d9d9d9;
302
+ border-top: 1px solid var(--color-3);
280
303
  align-items: center;
281
304
  }
282
305
  .flexlayout__border_left {
283
- border-right: 1px solid #d9d9d9;
306
+ border-right: 1px solid var(--color-3);
284
307
  align-content: center;
285
308
  flex-direction: column;
286
309
  }
287
310
  .flexlayout__border_right {
288
- border-left: 1px solid #d9d9d9;
311
+ border-left: 1px solid var(--color-3);
289
312
  align-content: center;
290
313
  flex-direction: column;
291
314
  }
@@ -324,29 +347,29 @@
324
347
  white-space: nowrap;
325
348
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
326
349
  border-radius: 3px;
327
- background-color: #e6e6e6;
350
+ background-color: var(--color-2);
328
351
  }
329
352
  .flexlayout__border_button--selected {
330
- background-color: #d9d9d9;
331
- color: black;
353
+ background-color: var(--color-3);
354
+ color: var(--color-text);
332
355
  }
333
356
  @media (hover: hover) {
334
357
  .flexlayout__border_button:hover {
335
- background-color: #d9d9d9;
336
- color: black;
358
+ background-color: var(--color-3);
359
+ color: var(--color-text);
337
360
  }
338
361
  }
339
362
  .flexlayout__border_button--unselected {
340
363
  color: gray;
341
364
  }
342
365
  .flexlayout__border_button_leading {
343
- display: inline;
366
+ display: flex;
344
367
  }
345
368
  .flexlayout__border_button_content {
346
- display: inline-block;
369
+ display: flex;
347
370
  }
348
371
  .flexlayout__border_button_trailing {
349
- display: inline-block;
372
+ display: flex;
350
373
  margin-left: 8px;
351
374
  min-width: 8px;
352
375
  min-height: 8px;
@@ -399,23 +422,26 @@
399
422
  margin-top: 5px;
400
423
  }
401
424
  .flexlayout__popup_menu {
402
- font-size: medium;
403
- font-family: Roboto, Arial, sans-serif;
425
+ font-size: var(--font-size);
426
+ font-family: var(--font-family);
404
427
  }
405
428
  .flexlayout__popup_menu_item {
429
+ margin: 2px;
406
430
  padding: 2px 10px 2px 10px;
407
431
  white-space: nowrap;
432
+ cursor: pointer;
433
+ border-radius: 2px;
408
434
  }
409
435
  @media (hover: hover) {
410
436
  .flexlayout__popup_menu_item:hover {
411
- background-color: #b3b3b3;
437
+ background-color: var(--color-6);
412
438
  }
413
439
  }
414
440
  .flexlayout__popup_menu_container {
415
441
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
416
- border: 1px solid #b3b3b3;
417
- color: black;
418
- background: white;
442
+ border: 1px solid var(--color-6);
443
+ color: var(--color-text);
444
+ background: var(--color-background);
419
445
  border-radius: 3px;
420
446
  position: absolute;
421
447
  z-index: 1000;
@@ -441,8 +467,8 @@
441
467
  bottom: 0;
442
468
  position: absolute;
443
469
  box-sizing: border-box;
444
- background-color: white;
445
- color: black;
470
+ background-color: var(--color-background);
471
+ color: var(--color-text);
446
472
  }
447
473
  .flexlayout__error_boundary_container {
448
474
  left: 0;
@@ -460,20 +486,20 @@
460
486
  .flexlayout__tabset_sizer {
461
487
  padding-top: 5px;
462
488
  padding-bottom: 3px;
463
- font-size: medium;
464
- font-family: Roboto, Arial, sans-serif;
489
+ font-size: var(--font-size);
490
+ font-family: var(--font-family);
465
491
  }
466
492
  .flexlayout__tabset_header_sizer {
467
493
  padding-top: 3px;
468
494
  padding-bottom: 3px;
469
- font-size: medium;
470
- font-family: Roboto, Arial, sans-serif;
495
+ font-size: var(--font-size);
496
+ font-family: var(--font-family);
471
497
  }
472
498
  .flexlayout__border_sizer {
473
499
  padding-top: 6px;
474
500
  padding-bottom: 5px;
475
- font-size: medium;
476
- font-family: Roboto, Arial, sans-serif;
501
+ font-size: var(--font-size);
502
+ font-family: var(--font-family);
477
503
  }
478
504
 
479
505
  /*# sourceMappingURL=gray.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["_base.scss","gray.scss"],"names":[],"mappings":"AASI;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;ECuFA,kBAjGM;;ADaF;EACI;ICuFR,kBAnGM;;;ADgBF;EACI;;AAIJ;EACI;ECiFR;EACA,kBAvGM;;AD0BN;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA,OC9DK;ED+DL,kBC5DE;ED6DF;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA,WClEI;EDmEJ,aClEM;;ADqEV;EACI;EACA,kBCjFE;EDkFF;EACA,WC1EI;ED2EJ,aC1EM;EAGV,kBAbM;;ADuFF;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OCpGC;EAgCT,kBA7BM;EA8BN;;ADsEQ;EACI;;AAKJ;EAEI;EACA,kBC7GN;ED8GM;EACA;EACA;EACA;EACA;ECjGZ,kBAjBM;;ADsHE;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;ECtHJ;;AD0HI;ECtHJ;;AD2HA;EACI;EACA;EACA;EACA,OCxKK;EDyKL,kBCxKW;;AD0KX;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;ECvHR,kBAxDM;EAyDN,OA9DS;;ADuLD;EACI;IClHZ,kBAjEM;IAkEN,OAvES;;;AD6LD;EC3HR;;AD+HQ;ECpJR;EACA;EACA;;ADsJQ;EClJR;EACA;EACA;;ADoJQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA,kBC/MN;;ADkNE;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,OChSC;EDiSD,kBChSO;EDiSP;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA,WCjTI;EDkTJ,aCjTM;EAgEV,kBA1EM;;AD8TF;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;ECzSR;EACA;EACA,kBA/EM;;ADyXE;ECtSR,kBAlFM;EAmFN,OAxFS;;ADgYD;EACI;ICjSZ,kBA3FM;IA4FN,OAjGS;;;ADsYD;EC1SR;;AD8SQ;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,WC5cI;ED6cJ,aC5cM;;AD8cN;EACI;EACA;;AAGJ;EACI;IACI,kBC1dN;;;AD8dF;EACI;EACA;EACA,OCzeC;ED0eD,YCzeO;ED0eP;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EAxfJ;EACA;EACA;EACA;EACA;;AAwfI;EACI;EA7fR;EACA;EACA;EACA;EACA;EA4fQ;EACA,kBCjgBO;EDkgBP,OCngBC;;ADugBT;EAtgBA;EACA;EACA;EACA;EACA;EAogBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA,WC5gBI;ED6gBJ,aC5gBM;;AD+gBV;EACI;EACA;EACA,WCnhBI;EDohBJ,aCnhBM;;ADshBV;EACI;EACA;EACA,WC1hBI;ED2hBJ,aC1hBM","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 {