@aptre/flex-layout 0.1.0

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 (115) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +527 -0
  3. package/declarations/Attribute.d.ts +1 -0
  4. package/declarations/AttributeDefinitions.d.ts +1 -0
  5. package/declarations/DockLocation.d.ts +12 -0
  6. package/declarations/DragDrop.d.ts +15 -0
  7. package/declarations/DropInfo.d.ts +12 -0
  8. package/declarations/I18nLabel.d.ts +14 -0
  9. package/declarations/Orientation.d.ts +7 -0
  10. package/declarations/PopupMenu.d.ts +1 -0
  11. package/declarations/Rect.d.ts +28 -0
  12. package/declarations/Types.d.ts +78 -0
  13. package/declarations/index.d.ts +22 -0
  14. package/declarations/model/Action.d.ts +5 -0
  15. package/declarations/model/Actions.d.ts +110 -0
  16. package/declarations/model/BorderNode.d.ts +34 -0
  17. package/declarations/model/BorderSet.d.ts +4 -0
  18. package/declarations/model/ICloseType.d.ts +5 -0
  19. package/declarations/model/IDraggable.d.ts +2 -0
  20. package/declarations/model/IDropTarget.d.ts +2 -0
  21. package/declarations/model/IJsonModel.d.ts +146 -0
  22. package/declarations/model/Model.d.ts +86 -0
  23. package/declarations/model/Node.d.ts +17 -0
  24. package/declarations/model/RowNode.d.ts +11 -0
  25. package/declarations/model/SplitterNode.d.ts +5 -0
  26. package/declarations/model/TabNode.d.ts +36 -0
  27. package/declarations/model/TabSetNode.d.ts +40 -0
  28. package/declarations/model/Utils.d.ts +1 -0
  29. package/declarations/view/BorderButton.d.ts +1 -0
  30. package/declarations/view/BorderTabSet.d.ts +1 -0
  31. package/declarations/view/ErrorBoundary.d.ts +1 -0
  32. package/declarations/view/FloatingWindow.d.ts +1 -0
  33. package/declarations/view/FloatingWindowTab.d.ts +1 -0
  34. package/declarations/view/Icons.d.ts +6 -0
  35. package/declarations/view/Layout.d.ts +158 -0
  36. package/declarations/view/Splitter.d.ts +1 -0
  37. package/declarations/view/Tab.d.ts +1 -0
  38. package/declarations/view/TabButton.d.ts +1 -0
  39. package/declarations/view/TabButtonStamp.d.ts +1 -0
  40. package/declarations/view/TabFloating.d.ts +1 -0
  41. package/declarations/view/TabOverflowHook.d.ts +1 -0
  42. package/declarations/view/TabSet.d.ts +1 -0
  43. package/declarations/view/Utils.d.ts +1 -0
  44. package/dist/index.js +5669 -0
  45. package/package.json +73 -0
  46. package/style/_base.scss +631 -0
  47. package/style/dark.css +560 -0
  48. package/style/dark.css.map +1 -0
  49. package/style/dark.scss +173 -0
  50. package/style/gray.css +543 -0
  51. package/style/gray.css.map +1 -0
  52. package/style/gray.scss +172 -0
  53. package/style/light.css +544 -0
  54. package/style/light.css.map +1 -0
  55. package/style/light.scss +156 -0
  56. package/style/underline.css +565 -0
  57. package/style/underline.css.map +1 -0
  58. package/style/underline.scss +178 -0
  59. package/tsconfig.json +18 -0
  60. package/typedoc/.nojekyll +1 -0
  61. package/typedoc/assets/highlight.css +106 -0
  62. package/typedoc/assets/main.js +58 -0
  63. package/typedoc/assets/search.js +1 -0
  64. package/typedoc/assets/style.css +1338 -0
  65. package/typedoc/classes/Action.html +134 -0
  66. package/typedoc/classes/Actions.html +499 -0
  67. package/typedoc/classes/BorderNode.html +374 -0
  68. package/typedoc/classes/BorderSet.html +112 -0
  69. package/typedoc/classes/DockLocation.html +163 -0
  70. package/typedoc/classes/DragDrop.html +242 -0
  71. package/typedoc/classes/DropInfo.html +155 -0
  72. package/typedoc/classes/Layout.html +600 -0
  73. package/typedoc/classes/Model.html +396 -0
  74. package/typedoc/classes/Node.html +221 -0
  75. package/typedoc/classes/Orientation.html +148 -0
  76. package/typedoc/classes/Rect.html +312 -0
  77. package/typedoc/classes/RowNode.html +275 -0
  78. package/typedoc/classes/SplitterNode.html +238 -0
  79. package/typedoc/classes/TabNode.html +389 -0
  80. package/typedoc/classes/TabSetNode.html +453 -0
  81. package/typedoc/enums/CLASSES.html +480 -0
  82. package/typedoc/enums/I18nLabel.html +160 -0
  83. package/typedoc/enums/ICloseType.html +115 -0
  84. package/typedoc/index.html +148 -0
  85. package/typedoc/interfaces/IBorderAttributes.html +166 -0
  86. package/typedoc/interfaces/ICustomDropDestination.html +149 -0
  87. package/typedoc/interfaces/IDraggable.html +95 -0
  88. package/typedoc/interfaces/IDropTarget.html +96 -0
  89. package/typedoc/interfaces/IFontValues.html +124 -0
  90. package/typedoc/interfaces/IGlobalAttributes.html +329 -0
  91. package/typedoc/interfaces/IIcons.html +134 -0
  92. package/typedoc/interfaces/IJsonBorderNode.html +188 -0
  93. package/typedoc/interfaces/IJsonModel.html +119 -0
  94. package/typedoc/interfaces/IJsonRowNode.html +141 -0
  95. package/typedoc/interfaces/IJsonTabNode.html +220 -0
  96. package/typedoc/interfaces/IJsonTabSetNode.html +273 -0
  97. package/typedoc/interfaces/ILayoutProps.html +365 -0
  98. package/typedoc/interfaces/ILayoutState.html +144 -0
  99. package/typedoc/interfaces/IRowAttributes.html +131 -0
  100. package/typedoc/interfaces/ITabAttributes.html +201 -0
  101. package/typedoc/interfaces/ITabRenderValues.html +124 -0
  102. package/typedoc/interfaces/ITabSetAttributes.html +241 -0
  103. package/typedoc/interfaces/ITabSetRenderValues.html +134 -0
  104. package/typedoc/interfaces/ITitleObject.html +114 -0
  105. package/typedoc/types/CustomDragCallback.html +108 -0
  106. package/typedoc/types/DragRectRenderCallback.html +104 -0
  107. package/typedoc/types/FloatingTabPlaceholderRenderCallback.html +114 -0
  108. package/typedoc/types/IBorderLocation.html +87 -0
  109. package/typedoc/types/IInsets.html +98 -0
  110. package/typedoc/types/ITabLocation.html +87 -0
  111. package/typedoc/types/IconFactory.html +100 -0
  112. package/typedoc/types/NodeMouseEvent.html +102 -0
  113. package/typedoc/types/ShowOverflowMenuCallback.html +122 -0
  114. package/typedoc/types/TabSetPlaceHolderCallback.html +100 -0
  115. package/typedoc/types/TitleFactory.html +100 -0
@@ -0,0 +1,156 @@
1
+ $color_text: black !default;
2
+ $color_background: white !default;
3
+ $color_base: white !default;
4
+ $color_1: scale_color($color_base, $lightness: -3%) !default;
5
+ $color_2: scale_color($color_1, $lightness: -3%) !default;
6
+ $color_3: scale_color($color_2, $lightness: -3%) !default;
7
+ $color_4: scale_color($color_3, $lightness: -3%) !default;
8
+ $color_5: scale_color($color_4, $lightness: -3%) !default;
9
+ $color_6: scale_color($color_5, $lightness: -3%) !default;
10
+ $color_drag1: rgb(95, 134, 196) !default;
11
+ $color_drag2: rgb(119, 166, 119) !default;
12
+ $color_drag1_background: rgba(95, 134, 196, 0.1) !default;
13
+ $color_drag2_background: rgba(119, 166, 119, 0.075) !default;
14
+
15
+ $font-size: medium !default;
16
+ $font-family: Roboto, Arial, sans-serif !default;
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
+ --color-icon: gray;
39
+
40
+ --color-tabset-background: var(--color-background);
41
+ --color-tabset-background-selected: var(--color-1);
42
+ --color-tabset-background-maximized: var(--color-6);
43
+ --color-tabset-divider-line: var(--color-4);
44
+
45
+ --color-tabset-header-background: var(--color-background);
46
+ --color-tabset-header: var(--color-text);
47
+
48
+ --color-border-background: var(--color-background);
49
+ --color-border-divider-line: var(--color-4);
50
+
51
+ --color-tab-selected: var(--color-text);
52
+ --color-tab-selected-background: var(--color-4);
53
+ --color-tab-unselected: gray;
54
+ --color-tab-unselected-background: transparent;
55
+ --color-tab-textbox: var(--color-text);
56
+ --color-tab-textbox-background: var(--color-3);
57
+
58
+ --color-border-tab-selected: var(--color-text);
59
+ --color-border-tab-selected-background: var(--color-4);
60
+ --color-border-tab-unselected: gray;
61
+ --color-border-tab-unselected-background: var(--color-2);
62
+
63
+ --color-splitter: var(--color-1);
64
+ --color-splitter-hover: var(--color-4);
65
+ --color-splitter-drag: var(--color-4);
66
+
67
+ --color-drag-rect-border: var(--color-6);
68
+ --color-drag-rect-background: var(--color-4);
69
+ --color-drag-rect: var(--color-text);
70
+
71
+ --color-popup-border: var(--color-6);
72
+ --color-popup-unselected: var(--color-text);
73
+ --color-popup-unselected-background: #{$color_background};
74
+ --color-popup-selected: var(--color-text);
75
+ --color-popup-selected-background: var(--color-3);
76
+
77
+ --color-edge-marker: gray;
78
+ }
79
+ }
80
+
81
+ @mixin tabset_mixin {
82
+ }
83
+
84
+ @mixin tabset_tabbar_mixin {
85
+ }
86
+
87
+ @mixin tabset_header_mixin {
88
+ }
89
+
90
+ @mixin tabset_selected_mixin {
91
+ }
92
+
93
+ @mixin tabset_maximized_mixin {
94
+ }
95
+
96
+ @mixin tab_top_mixin {
97
+ }
98
+
99
+ @mixin tab_bottom_mixin {
100
+ }
101
+
102
+ @mixin tab_button_mixin {
103
+ }
104
+
105
+ @mixin tab_button_selected_mixin {
106
+ }
107
+
108
+ @mixin tab_button_unselected_mixin {
109
+ color: gray;
110
+ }
111
+
112
+ @mixin tab_button_hovered_mixin {
113
+ }
114
+
115
+ @mixin close_button_hovered_mixin {
116
+ background-color:var(--color-3);
117
+ }
118
+
119
+ @mixin toolbar_button_hovered_mixin {
120
+ background-color:var(--color-2);
121
+ }
122
+
123
+ @mixin border_mixin {
124
+ }
125
+
126
+ @mixin border_button_mixin {
127
+ }
128
+
129
+ @mixin border_button_selected_mixin {
130
+ }
131
+
132
+ @mixin border_button_unselected_mixin {
133
+ }
134
+
135
+ @mixin border_button_hovered_mixin {
136
+ }
137
+
138
+ @mixin splitter_mixin {
139
+ }
140
+
141
+ @mixin splitter_hover_mixin {
142
+ }
143
+
144
+ @mixin splitter_drag_mixin {
145
+ }
146
+
147
+ @mixin splitter_border_mixin {
148
+ }
149
+
150
+ @mixin tabset_tab_divider_mixin {
151
+ }
152
+
153
+ @mixin border_tab_divider_mixin {
154
+ }
155
+
156
+ @import "_base";
@@ -0,0 +1,565 @@
1
+ .flexlayout__layout {
2
+ --color-text: black;
3
+ --color-background: white;
4
+ --color-base: white;
5
+ --color-1: #fafafa;
6
+ --color-2: whitesmoke;
7
+ --color-3: #eeeeee;
8
+ --color-4: #e6e6e6;
9
+ --color-5: #e0e0e0;
10
+ --color-6: #d9d9d9;
11
+ --color-drag1: rgb(95, 134, 196);
12
+ --color-drag2: rgb(119, 166, 119);
13
+ --color-drag1-background: rgba(95, 134, 196, 0.1);
14
+ --color-drag2-background: rgba(119, 166, 119, 0.075);
15
+ --font-size: medium;
16
+ --font-family: Roboto, Arial, sans-serif;
17
+ --color-overflow: gray;
18
+ --color-icon: gray;
19
+ --color-tabset-background: var(--color-background);
20
+ --color-tabset-background-selected: var(--color-1);
21
+ --color-tabset-background-maximized: var(--color-6);
22
+ --color-tabset-divider-line: var(--color-3);
23
+ --color-tabset-header-background: var(--color-background);
24
+ --color-tabset-header: var(--color-text);
25
+ --color-border-background: var(--color-background);
26
+ --color-border-divider-line: var(--color-3);
27
+ --color-tab-selected: var(--color-text);
28
+ --color-tab-selected-background: transparent;
29
+ --color-tab-unselected: gray;
30
+ --color-tab-unselected-background: transparent;
31
+ --color-tab-textbox: var(--color-text);
32
+ --color-tab-textbox-background: var(--color-3);
33
+ --color-border-tab-selected: var(--color-text);
34
+ --color-border-tab-selected-background: transparent;
35
+ --color-border-tab-unselected: gray;
36
+ --color-border-tab-unselected-background: transparent;
37
+ --color-splitter: var(--color-1);
38
+ --color-splitter-hover: var(--color-4);
39
+ --color-splitter-drag: var(--color-4);
40
+ --color-drag-rect-border: var(--color-6);
41
+ --color-drag-rect-background: var(--color-4);
42
+ --color-drag-rect: var(--color-text);
43
+ --color-popup-border: var(--color-6);
44
+ --color-popup-unselected: var(--color-text);
45
+ --color-popup-unselected-background: white;
46
+ --color-popup-selected: var(--color-text);
47
+ --color-popup-selected-background: var(--color-3);
48
+ --color-edge-marker: gray;
49
+ --color-underline: rgb(65, 105, 225);
50
+ --color-underline-hover: #aaa;
51
+ --underline_height: 3px;
52
+ }
53
+
54
+ .flexlayout__layout {
55
+ left: 0;
56
+ top: 0;
57
+ right: 0;
58
+ bottom: 0;
59
+ position: absolute;
60
+ overflow: hidden;
61
+ }
62
+ .flexlayout__splitter {
63
+ background-color: var(--color-splitter);
64
+ }
65
+ @media (hover: hover) {
66
+ .flexlayout__splitter:hover {
67
+ background-color: var(--color-splitter-hover);
68
+ transition: background-color ease-in 0.1s;
69
+ transition-delay: 0.05s;
70
+ }
71
+ }
72
+ .flexlayout__splitter_border {
73
+ z-index: 10;
74
+ }
75
+ .flexlayout__splitter_drag {
76
+ z-index: 1000;
77
+ background-color: var(--color-splitter-drag);
78
+ }
79
+ .flexlayout__splitter_extra {
80
+ background-color: transparent;
81
+ }
82
+ .flexlayout__outline_rect {
83
+ position: absolute;
84
+ pointer-events: none;
85
+ box-sizing: border-box;
86
+ border: 2px solid var(--color-drag1);
87
+ background: var(--color-drag1-background);
88
+ border-radius: 5px;
89
+ z-index: 1000;
90
+ }
91
+ .flexlayout__outline_rect_edge {
92
+ pointer-events: none;
93
+ border: 2px solid var(--color-drag2);
94
+ background: var(--color-drag2-background);
95
+ border-radius: 5px;
96
+ z-index: 1000;
97
+ box-sizing: border-box;
98
+ }
99
+ .flexlayout__edge_rect {
100
+ position: absolute;
101
+ z-index: 1000;
102
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
103
+ background-color: var(--color-edge-marker);
104
+ pointer-events: none;
105
+ }
106
+ .flexlayout__drag_rect {
107
+ position: absolute;
108
+ cursor: move;
109
+ color: var(--color-drag-rect);
110
+ background-color: var(--color-drag-rect-background);
111
+ border: 2px solid var(--color-drag-rect-border);
112
+ border-radius: 5px;
113
+ z-index: 1000;
114
+ box-sizing: border-box;
115
+ opacity: 0.9;
116
+ text-align: center;
117
+ display: flex;
118
+ justify-content: center;
119
+ flex-direction: column;
120
+ overflow: hidden;
121
+ padding: 0.3em 1em;
122
+ word-wrap: break-word;
123
+ font-size: var(--font-size);
124
+ font-family: var(--font-family);
125
+ }
126
+ .flexlayout__tabset {
127
+ display: flex;
128
+ flex-direction: column;
129
+ overflow: hidden;
130
+ background-color: var(--color-tabset-background);
131
+ box-sizing: border-box;
132
+ font-size: var(--font-size);
133
+ font-family: var(--font-family);
134
+ }
135
+ .flexlayout__tabset_tab_divider {
136
+ width: 4px;
137
+ width: 1px;
138
+ margin: 4px 6px 4px 6px;
139
+ border-left: 1px solid #ddd;
140
+ }
141
+ .flexlayout__tabset_content {
142
+ display: flex;
143
+ flex-grow: 1;
144
+ align-items: center;
145
+ justify-content: center;
146
+ }
147
+ .flexlayout__tabset_header {
148
+ display: flex;
149
+ align-items: center;
150
+ padding: 3px 3px 3px 5px;
151
+ box-sizing: border-box;
152
+ border-bottom: 1px solid var(--color-tabset-divider-line);
153
+ color: var(--color-tabset-header);
154
+ background-color: var(--color-tabset-header-background);
155
+ }
156
+ .flexlayout__tabset_header_content {
157
+ flex-grow: 1;
158
+ }
159
+ .flexlayout__tabset_tabbar_outer {
160
+ box-sizing: border-box;
161
+ background-color: var(--color-tabset-background);
162
+ overflow: hidden;
163
+ display: flex;
164
+ }
165
+ .flexlayout__tabset_tabbar_outer_top {
166
+ border-bottom: 1px solid var(--color-tabset-divider-line);
167
+ }
168
+ .flexlayout__tabset_tabbar_outer_bottom {
169
+ border-top: 1px solid var(--color-tabset-divider-line);
170
+ }
171
+ .flexlayout__tabset_tabbar_inner {
172
+ position: relative;
173
+ box-sizing: border-box;
174
+ display: flex;
175
+ flex-grow: 1;
176
+ overflow: hidden;
177
+ }
178
+ .flexlayout__tabset_tabbar_inner_tab_container {
179
+ display: flex;
180
+ padding-left: 4px;
181
+ padding-right: 4px;
182
+ box-sizing: border-box;
183
+ position: absolute;
184
+ top: 0;
185
+ bottom: 0;
186
+ width: 10000px;
187
+ }
188
+ .flexlayout__tabset_tabbar_inner_tab_container_top {
189
+ border-top: 2px solid transparent;
190
+ }
191
+ .flexlayout__tabset_tabbar_inner_tab_container_bottom {
192
+ border-bottom: 2px solid transparent;
193
+ }
194
+ .flexlayout__tabset-selected {
195
+ background-color: var(--color-tabset-background-selected);
196
+ }
197
+ .flexlayout__tabset-maximized {
198
+ background-color: var(--color-tabset-background-maximized);
199
+ }
200
+ .flexlayout__tab_button_stamp {
201
+ display: inline-flex;
202
+ align-items: center;
203
+ gap: 0.3em;
204
+ white-space: nowrap;
205
+ box-sizing: border-box;
206
+ }
207
+ .flexlayout__tab {
208
+ overflow: auto;
209
+ position: absolute;
210
+ box-sizing: border-box;
211
+ background-color: var(--color-background);
212
+ color: var(--color-text);
213
+ }
214
+ .flexlayout__tab_button {
215
+ display: flex;
216
+ gap: 0.3em;
217
+ align-items: center;
218
+ box-sizing: border-box;
219
+ padding: 3px 0.5em;
220
+ cursor: pointer;
221
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
222
+ }
223
+ .flexlayout__tab_button--selected {
224
+ background-color: var(--color-tab-selected-background);
225
+ color: var(--color-tab-selected);
226
+ border-bottom: var(--underline_height) solid var(--color-underline);
227
+ }
228
+ @media (hover: hover) {
229
+ .flexlayout__tab_button:hover {
230
+ background-color: var(--color-tab-selected-background);
231
+ color: var(--color-tab-selected);
232
+ border-bottom: var(--underline_height) solid var(--color-underline-hover);
233
+ }
234
+ }
235
+ .flexlayout__tab_button--unselected {
236
+ background-color: var(--color-tab-unselected-background);
237
+ color: var(--color-tab-unselected);
238
+ color: gray;
239
+ border-bottom: var(--underline_height) solid transparent;
240
+ }
241
+ .flexlayout__tab_button_leading {
242
+ display: flex;
243
+ }
244
+ .flexlayout__tab_button_content {
245
+ display: flex;
246
+ }
247
+ .flexlayout__tab_button_textbox {
248
+ border: none;
249
+ font-family: var(--font-family);
250
+ font-size: var(--font-size);
251
+ color: var(--color-tab-textbox);
252
+ background-color: var(--color-tab-textbox-background);
253
+ border: 1px inset var(--color-1);
254
+ border-radius: 3px;
255
+ width: 10em;
256
+ }
257
+ .flexlayout__tab_button_textbox:focus {
258
+ outline: none;
259
+ }
260
+ .flexlayout__tab_button_trailing {
261
+ display: flex;
262
+ visibility: hidden;
263
+ border-radius: 4px;
264
+ }
265
+ .flexlayout__tab_button_trailing:hover {
266
+ background-color: var(--color-3);
267
+ }
268
+ @media (hover: hover) {
269
+ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
270
+ visibility: visible;
271
+ }
272
+ }
273
+ .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
274
+ visibility: visible;
275
+ }
276
+ .flexlayout__tab_button_overflow {
277
+ display: flex;
278
+ align-items: center;
279
+ border: none;
280
+ color: var(--color-overflow);
281
+ font-size: inherit;
282
+ background-color: transparent;
283
+ }
284
+ .flexlayout__tab_toolbar {
285
+ display: flex;
286
+ align-items: center;
287
+ gap: 0.3em;
288
+ padding-left: 0.5em;
289
+ padding-right: 0.3em;
290
+ }
291
+ .flexlayout__tab_toolbar_button {
292
+ border: none;
293
+ outline: none;
294
+ font-size: inherit;
295
+ margin: 0px;
296
+ background-color: transparent;
297
+ border-radius: 4px;
298
+ padding: 1px;
299
+ }
300
+ @media (hover: hover) {
301
+ .flexlayout__tab_toolbar_button:hover {
302
+ background-color: var(--color-2);
303
+ }
304
+ }
305
+ .flexlayout__tab_toolbar_sticky_buttons_container {
306
+ display: flex;
307
+ gap: 0.3em;
308
+ padding-left: 5px;
309
+ align-items: center;
310
+ }
311
+ .flexlayout__tab_floating {
312
+ overflow: auto;
313
+ position: absolute;
314
+ box-sizing: border-box;
315
+ color: var(--color-text);
316
+ background-color: var(--color-background);
317
+ display: flex;
318
+ justify-content: center;
319
+ align-items: center;
320
+ }
321
+ .flexlayout__tab_floating_inner {
322
+ overflow: auto;
323
+ display: flex;
324
+ flex-direction: column;
325
+ justify-content: center;
326
+ align-items: center;
327
+ }
328
+ .flexlayout__tab_floating_inner div {
329
+ margin-bottom: 5px;
330
+ text-align: center;
331
+ }
332
+ .flexlayout__tab_floating_inner div a {
333
+ color: royalblue;
334
+ }
335
+ .flexlayout__border {
336
+ box-sizing: border-box;
337
+ overflow: hidden;
338
+ display: flex;
339
+ font-size: var(--font-size);
340
+ font-family: var(--font-family);
341
+ color: var(--color-border);
342
+ background-color: var(--color-border-background);
343
+ }
344
+ .flexlayout__border_top {
345
+ border-bottom: 1px solid var(--color-border-divider-line);
346
+ align-items: center;
347
+ }
348
+ .flexlayout__border_bottom {
349
+ border-top: 1px solid var(--color-border-divider-line);
350
+ align-items: center;
351
+ }
352
+ .flexlayout__border_left {
353
+ border-right: 1px solid var(--color-border-divider-line);
354
+ align-content: center;
355
+ flex-direction: column;
356
+ }
357
+ .flexlayout__border_right {
358
+ border-left: 1px solid var(--color-border-divider-line);
359
+ align-content: center;
360
+ flex-direction: column;
361
+ }
362
+ .flexlayout__border_inner {
363
+ position: relative;
364
+ box-sizing: border-box;
365
+ display: flex;
366
+ overflow: hidden;
367
+ flex-grow: 1;
368
+ }
369
+ .flexlayout__border_inner_tab_container {
370
+ white-space: nowrap;
371
+ display: flex;
372
+ padding-left: 2px;
373
+ padding-right: 2px;
374
+ box-sizing: border-box;
375
+ position: absolute;
376
+ top: 0;
377
+ bottom: 0;
378
+ width: 10000px;
379
+ }
380
+ .flexlayout__border_inner_tab_container_right {
381
+ transform-origin: top left;
382
+ transform: rotate(90deg);
383
+ }
384
+ .flexlayout__border_inner_tab_container_left {
385
+ flex-direction: row-reverse;
386
+ transform-origin: top right;
387
+ transform: rotate(-90deg);
388
+ }
389
+ .flexlayout__border_tab_divider {
390
+ width: 4px;
391
+ width: 1px;
392
+ margin: 4px 6px 4px 6px;
393
+ border-left: 1px solid #ddd;
394
+ }
395
+ .flexlayout__border_button {
396
+ display: flex;
397
+ gap: 0.3em;
398
+ align-items: center;
399
+ cursor: pointer;
400
+ padding: 3px 0.5em;
401
+ margin: 2px 0px;
402
+ box-sizing: border-box;
403
+ white-space: nowrap;
404
+ padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
405
+ }
406
+ .flexlayout__border_button--selected {
407
+ background-color: var(--color-border-tab-selected-background);
408
+ color: var(--color-border-tab-selected);
409
+ border-bottom: var(--underline_height) solid var(--color-underline);
410
+ }
411
+ @media (hover: hover) {
412
+ .flexlayout__border_button:hover {
413
+ background-color: var(--color-border-tab-selected-background);
414
+ color: var(--color-border-tab-selected);
415
+ border-bottom: var(--underline_height) solid var(--color-underline-hover);
416
+ }
417
+ }
418
+ .flexlayout__border_button--unselected {
419
+ background-color: var(--color-border-tab-unselected-background);
420
+ color: var(--color-border-tab-unselected);
421
+ border-bottom: var(--underline_height) solid transparent;
422
+ }
423
+ .flexlayout__border_button_leading {
424
+ display: flex;
425
+ }
426
+ .flexlayout__border_button_content {
427
+ display: flex;
428
+ }
429
+ .flexlayout__border_button_trailing {
430
+ display: flex;
431
+ border-radius: 4px;
432
+ visibility: hidden;
433
+ }
434
+ .flexlayout__border_button_trailing:hover {
435
+ background-color: var(--color-3);
436
+ }
437
+ @media (hover: hover) {
438
+ .flexlayout__border_button:hover .flexlayout__border_button_trailing {
439
+ visibility: visible;
440
+ }
441
+ }
442
+ .flexlayout__border_button--selected .flexlayout__border_button_trailing {
443
+ visibility: visible;
444
+ }
445
+ .flexlayout__border_toolbar {
446
+ display: flex;
447
+ gap: 0.3em;
448
+ align-items: center;
449
+ }
450
+ .flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {
451
+ flex-direction: column;
452
+ padding-top: 0.5em;
453
+ padding-bottom: 0.3em;
454
+ }
455
+ .flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {
456
+ padding-left: 0.5em;
457
+ padding-right: 0.3em;
458
+ }
459
+ .flexlayout__border_toolbar_button {
460
+ border: none;
461
+ outline: none;
462
+ font-size: inherit;
463
+ background-color: transparent;
464
+ border-radius: 4px;
465
+ padding: 1px;
466
+ }
467
+ @media (hover: hover) {
468
+ .flexlayout__border_toolbar_button:hover {
469
+ background-color: var(--color-2);
470
+ }
471
+ }
472
+ .flexlayout__border_toolbar_button_overflow {
473
+ display: flex;
474
+ align-items: center;
475
+ border: none;
476
+ color: var(--color-overflow);
477
+ font-size: inherit;
478
+ background-color: transparent;
479
+ }
480
+ .flexlayout__popup_menu {
481
+ font-size: var(--font-size);
482
+ font-family: var(--font-family);
483
+ }
484
+ .flexlayout__popup_menu_item {
485
+ padding: 2px 0.5em;
486
+ white-space: nowrap;
487
+ cursor: pointer;
488
+ border-radius: 2px;
489
+ }
490
+ @media (hover: hover) {
491
+ .flexlayout__popup_menu_item:hover {
492
+ background-color: var(--color-6);
493
+ }
494
+ }
495
+ .flexlayout__popup_menu_container {
496
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
497
+ border: 1px solid var(--color-popup-border);
498
+ color: var(--color-popup-unselected);
499
+ background: var(--color-popup-unselected-background);
500
+ border-radius: 3px;
501
+ position: absolute;
502
+ z-index: 1000;
503
+ max-height: 50%;
504
+ min-width: 100px;
505
+ overflow: auto;
506
+ padding: 2px;
507
+ }
508
+ .flexlayout__floating_window _body {
509
+ height: 100%;
510
+ }
511
+ .flexlayout__floating_window_content {
512
+ left: 0;
513
+ top: 0;
514
+ right: 0;
515
+ bottom: 0;
516
+ position: absolute;
517
+ }
518
+ .flexlayout__floating_window_tab {
519
+ overflow: auto;
520
+ left: 0;
521
+ top: 0;
522
+ right: 0;
523
+ bottom: 0;
524
+ position: absolute;
525
+ box-sizing: border-box;
526
+ background-color: var(--color-background);
527
+ color: var(--color-text);
528
+ }
529
+ .flexlayout__error_boundary_container {
530
+ left: 0;
531
+ top: 0;
532
+ right: 0;
533
+ bottom: 0;
534
+ position: absolute;
535
+ display: flex;
536
+ justify-content: center;
537
+ }
538
+ .flexlayout__error_boundary_content {
539
+ display: flex;
540
+ align-items: center;
541
+ }
542
+ .flexlayout__tabset_sizer {
543
+ padding-top: 5px;
544
+ padding-bottom: 3px;
545
+ font-size: var(--font-size);
546
+ font-family: var(--font-family);
547
+ }
548
+ .flexlayout__tabset_header_sizer {
549
+ padding-top: 3px;
550
+ padding-bottom: 3px;
551
+ font-size: var(--font-size);
552
+ font-family: var(--font-family);
553
+ }
554
+ .flexlayout__border_sizer {
555
+ padding-top: 6px;
556
+ padding-bottom: 5px;
557
+ font-size: var(--font-size);
558
+ font-family: var(--font-family);
559
+ }
560
+
561
+ .flexlayout__tab_button_textbox {
562
+ border: none;
563
+ }
564
+
565
+ /*# sourceMappingURL=underline.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["underline.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;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;EAEA;EACA;EACA;;;ACvEJ;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;ED6DR;EACA;EACA;;AC3DI;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;EDrGR;;ACwGQ;EACI;EACA;EDtGZ;;ACyGQ;EACI;IACI;IACA;IDnGhB;;;ACwGQ;EACI;EACA;ED/GZ;EACA;;AC0HQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;ED7IZ;;ACqJQ;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;IDrLhB;;;ACuMQ;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;EDlQR;EACA;EACA;;ACoQI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDhTR;;ACmTQ;EACI;EACA;EDjTZ;;ACoTQ;EACI;IACI;IACA;ID/ShB;;;ACoTQ;EACI;EACA;ED1TZ;;AC8TQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;ED7VZ;;ACqWQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDtYhB;;;AC8YY;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;;;ADrcR;EACI","file":"underline.css"}