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.
- package/ChangeLog.txt +24 -0
- package/README.md +128 -97
- package/declarations/DragDrop.d.ts +1 -0
- package/declarations/Rect.d.ts +4 -0
- package/declarations/Types.d.ts +8 -1
- package/declarations/model/BorderNode.d.ts +2 -1
- package/declarations/model/IJsonModel.d.ts +8 -0
- package/declarations/model/Model.d.ts +1 -0
- package/declarations/view/Layout.d.ts +19 -6
- package/dist/flexlayout.js +19 -19
- package/dist/flexlayout_min.js +1 -1
- package/lib/DockLocation.js +25 -11
- package/lib/DockLocation.js.map +1 -1
- package/lib/DragDrop.js +19 -3
- package/lib/DragDrop.js.map +1 -1
- package/lib/PopupMenu.js +14 -9
- package/lib/PopupMenu.js.map +1 -1
- package/lib/Rect.js +3 -0
- package/lib/Rect.js.map +1 -1
- package/lib/Types.js +7 -0
- package/lib/Types.js.map +1 -1
- package/lib/model/BorderNode.js +61 -14
- package/lib/model/BorderNode.js.map +1 -1
- package/lib/model/BorderSet.js +33 -19
- package/lib/model/BorderSet.js.map +1 -1
- package/lib/model/Model.js +23 -3
- package/lib/model/Model.js.map +1 -1
- package/lib/model/RowNode.js +19 -5
- package/lib/model/RowNode.js.map +1 -1
- package/lib/model/TabNode.js +10 -0
- package/lib/model/TabNode.js.map +1 -1
- package/lib/model/TabSetNode.js +34 -19
- package/lib/model/TabSetNode.js.map +1 -1
- package/lib/view/BorderButton.js +17 -6
- package/lib/view/BorderButton.js.map +1 -1
- package/lib/view/BorderTabSet.js +17 -6
- package/lib/view/BorderTabSet.js.map +1 -1
- package/lib/view/Layout.js +232 -57
- package/lib/view/Layout.js.map +1 -1
- package/lib/view/Splitter.js +35 -4
- package/lib/view/Splitter.js.map +1 -1
- package/lib/view/Tab.js +2 -2
- package/lib/view/Tab.js.map +1 -1
- package/lib/view/TabButton.js +16 -7
- package/lib/view/TabButton.js.map +1 -1
- package/lib/view/TabFloating.js +24 -12
- package/lib/view/TabFloating.js.map +1 -1
- package/lib/view/TabSet.js +49 -24
- package/lib/view/TabSet.js.map +1 -1
- package/package.json +11 -6
- package/src/DockLocation.ts +30 -9
- package/src/DragDrop.ts +26 -3
- package/src/PopupMenu.tsx +32 -11
- package/src/Rect.ts +6 -2
- package/src/Types.ts +7 -0
- package/src/model/BorderNode.ts +57 -15
- package/src/model/BorderSet.ts +32 -19
- package/src/model/IJsonModel.ts +8 -0
- package/src/model/Model.ts +30 -3
- package/src/model/RowNode.ts +8 -5
- package/src/model/TabNode.ts +11 -0
- package/src/model/TabSetNode.ts +33 -19
- package/src/view/BorderButton.tsx +34 -6
- package/src/view/BorderTabSet.tsx +25 -5
- package/src/view/Layout.tsx +299 -82
- package/src/view/Splitter.tsx +53 -4
- package/src/view/Tab.tsx +8 -2
- package/src/view/TabButton.tsx +31 -7
- package/src/view/TabFloating.tsx +42 -20
- package/src/view/TabSet.tsx +70 -18
- package/style/_base.scss +78 -51
- package/style/dark.css +94 -68
- package/style/dark.css.map +1 -1
- package/style/dark.scss +20 -20
- package/style/gray.css +94 -68
- package/style/gray.css.map +1 -1
- package/style/gray.scss +20 -20
- package/style/light.css +94 -68
- package/style/light.css.map +1 -1
- package/style/light.scss +18 -18
- package/yarn-error.log +0 -11828
package/style/dark.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["_base.scss","dark.scss"],"names":[],"mappings":"AASI;
|
|
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:
|
|
17
|
+
background-color: var(--color-1);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
@mixin tabset_tabbar_mixin {
|
|
21
|
-
background-color:
|
|
21
|
+
background-color: var(--color-1);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
@mixin tabset_header_mixin {
|
|
25
|
-
background-color:
|
|
25
|
+
background-color: var(--color-1);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
@mixin tabset_selected_mixin {
|
|
29
|
-
background-image: linear-gradient(
|
|
29
|
+
background-image: linear-gradient(var(--color-background), var(--color-4));
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
@mixin tabset_header_mixin {
|
|
33
|
-
background-color:
|
|
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(
|
|
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(
|
|
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:
|
|
64
|
-
color:
|
|
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:
|
|
73
|
-
color:
|
|
72
|
+
background-color: var(--color-3);
|
|
73
|
+
color: var(--color-text);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
@mixin border_mixin {
|
|
77
|
-
background-color:
|
|
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:
|
|
83
|
+
background-color: var(--color-2);
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
@mixin border_button_selected_mixin {
|
|
87
|
-
background-color:
|
|
88
|
-
color:
|
|
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:
|
|
97
|
-
color:
|
|
96
|
+
background-color: var(--color-3);
|
|
97
|
+
color: var(--color-text);
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
@mixin splitter_mixin {
|
|
101
|
-
background-color:
|
|
101
|
+
background-color: var(--color-2);
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
@mixin splitter_hover_mixin {
|
|
105
|
-
background-color:
|
|
105
|
+
background-color: var(--color-4);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
@mixin splitter_drag_mixin {
|
|
109
109
|
border-radius: 5px;
|
|
110
|
-
background-color:
|
|
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:
|
|
23
|
+
background-color: var(--color-2);
|
|
11
24
|
}
|
|
12
25
|
@media (hover: hover) {
|
|
13
26
|
.flexlayout__splitter:hover {
|
|
14
|
-
background-color
|
|
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:
|
|
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
|
-
|
|
45
|
+
pointer-events: none;
|
|
28
46
|
box-sizing: border-box;
|
|
29
|
-
border: 2px solid
|
|
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
|
-
|
|
36
|
-
border: 2px solid
|
|
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:
|
|
52
|
-
background-color:
|
|
53
|
-
border: 2px solid
|
|
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:
|
|
67
|
-
font-family:
|
|
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:
|
|
90
|
+
background-color: var(--color-1);
|
|
72
91
|
box-sizing: border-box;
|
|
73
|
-
font-size:
|
|
74
|
-
font-family:
|
|
75
|
-
background-color:
|
|
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
|
|
86
|
-
color:
|
|
87
|
-
background-color:
|
|
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:
|
|
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:
|
|
120
|
+
background-color: var(--color-1);
|
|
102
121
|
}
|
|
103
122
|
.flexlayout__tabset_tabbar_outer_top {
|
|
104
|
-
border-bottom: 1px solid
|
|
123
|
+
border-bottom: 1px solid var(--color-3);
|
|
105
124
|
}
|
|
106
125
|
.flexlayout__tabset_tabbar_outer_bottom {
|
|
107
|
-
border-top: 1px solid
|
|
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(
|
|
150
|
+
background-image: linear-gradient(var(--color-background), var(--color-4));
|
|
132
151
|
}
|
|
133
152
|
.flexlayout__tabset-maximized {
|
|
134
|
-
background-image: linear-gradient(
|
|
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:
|
|
141
|
-
background-color:
|
|
159
|
+
color: var(--color-text);
|
|
160
|
+
background-color: var(--color-background);
|
|
142
161
|
}
|
|
143
162
|
.flexlayout__tab_button {
|
|
144
|
-
display:
|
|
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:
|
|
153
|
-
color:
|
|
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:
|
|
158
|
-
color:
|
|
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:
|
|
194
|
+
display: flex;
|
|
176
195
|
}
|
|
177
196
|
.flexlayout__tab_button_content {
|
|
178
|
-
display:
|
|
197
|
+
display: flex;
|
|
179
198
|
}
|
|
180
199
|
.flexlayout__tab_button_textbox {
|
|
181
200
|
border: none;
|
|
182
|
-
|
|
183
|
-
|
|
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:
|
|
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:
|
|
247
|
-
background-color:
|
|
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:
|
|
271
|
-
font-family:
|
|
272
|
-
background-color:
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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:
|
|
350
|
+
background-color: var(--color-2);
|
|
328
351
|
}
|
|
329
352
|
.flexlayout__border_button--selected {
|
|
330
|
-
background-color:
|
|
331
|
-
color:
|
|
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:
|
|
336
|
-
color:
|
|
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:
|
|
366
|
+
display: flex;
|
|
344
367
|
}
|
|
345
368
|
.flexlayout__border_button_content {
|
|
346
|
-
display:
|
|
369
|
+
display: flex;
|
|
347
370
|
}
|
|
348
371
|
.flexlayout__border_button_trailing {
|
|
349
|
-
display:
|
|
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:
|
|
403
|
-
font-family:
|
|
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:
|
|
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
|
|
417
|
-
color:
|
|
418
|
-
background:
|
|
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:
|
|
445
|
-
color:
|
|
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:
|
|
464
|
-
font-family:
|
|
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:
|
|
470
|
-
font-family:
|
|
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:
|
|
476
|
-
font-family:
|
|
501
|
+
font-size: var(--font-size);
|
|
502
|
+
font-family: var(--font-family);
|
|
477
503
|
}
|
|
478
504
|
|
|
479
505
|
/*# sourceMappingURL=gray.css.map */
|
package/style/gray.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["_base.scss","gray.scss"],"names":[],"mappings":"AASI;
|
|
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:
|
|
17
|
+
background-color:var(--color-1);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
@mixin tabset_tabbar_mixin {
|
|
21
|
-
background-color:
|
|
21
|
+
background-color:var(--color-1);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
@mixin tabset_header_mixin {
|
|
25
|
-
background-color:
|
|
25
|
+
background-color:var(--color-1);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
@mixin tabset_selected_mixin {
|
|
29
|
-
background-image: linear-gradient(
|
|
29
|
+
background-image: linear-gradient(var(--color-background),var(--color-4));
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
@mixin tabset_header_mixin {
|
|
33
|
-
background-color:
|
|
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(
|
|
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(
|
|
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:
|
|
63
|
-
color:
|
|
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:
|
|
72
|
-
color:
|
|
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:
|
|
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:
|
|
84
|
+
background-color:var(--color-2);
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
@mixin border_button_selected_mixin {
|
|
88
|
-
background-color:
|
|
89
|
-
color:
|
|
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:
|
|
98
|
-
color:
|
|
97
|
+
background-color:var(--color-3);
|
|
98
|
+
color:var(--color-text);
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
@mixin splitter_mixin {
|
|
102
|
-
background-color:
|
|
102
|
+
background-color:var(--color-2);
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
@mixin splitter_hover_mixin {
|
|
106
|
-
background-color:
|
|
106
|
+
background-color:var(--color-4);
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
@mixin splitter_drag_mixin {
|
|
110
110
|
border-radius: 5px;
|
|
111
|
-
background-color:
|
|
111
|
+
background-color:var(--color-5);
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
@mixin splitter_border_mixin {
|