@fringeworks/style-layouts 0.8.0 → 0.8.1

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 (31) hide show
  1. package/README.ja.md +3 -3
  2. package/README.md +3 -3
  3. package/_constants.cjs +49 -49
  4. package/_constants.d.cts +55 -55
  5. package/_constants.d.mts +55 -55
  6. package/_constants.mjs +49 -49
  7. package/balance/styles.css +55 -55
  8. package/center/styles.css +59 -59
  9. package/flow/styles.css +60 -60
  10. package/helpers/extractBalanceOptions.d.cts +1 -1
  11. package/helpers/extractBalanceOptions.d.mts +1 -1
  12. package/helpers/extractCenterOptions.d.cts +1 -1
  13. package/helpers/extractCenterOptions.d.mts +1 -1
  14. package/helpers/extractFlowOptions.d.cts +1 -1
  15. package/helpers/extractFlowOptions.d.mts +1 -1
  16. package/helpers/extractLayerOptions.d.cts +1 -1
  17. package/helpers/extractLayerOptions.d.mts +1 -1
  18. package/helpers/extractMatrixOptions.d.cts +1 -1
  19. package/helpers/extractMatrixOptions.d.mts +1 -1
  20. package/helpers/extractStackOptions.d.cts +1 -1
  21. package/helpers/extractStackOptions.d.mts +1 -1
  22. package/helpers/extractTileOptions.d.cts +1 -1
  23. package/helpers/extractTileOptions.d.mts +1 -1
  24. package/layer/styles.css +27 -27
  25. package/matrix/styles.css +82 -82
  26. package/pack/styles.css +13 -13
  27. package/package.json +1 -1
  28. package/pin/styles.css +11 -11
  29. package/stack/styles.css +64 -64
  30. package/styles.css +453 -453
  31. package/tile/styles.css +82 -82
package/styles.css CHANGED
@@ -1,678 +1,678 @@
1
- .lx-layout-stack {
2
- --lx-layout-gapX: 0px;
3
- --lx-layout-gapY: 0px;
4
- --lx-layout-itemSizeX: auto;
5
- --lx-layout-itemSizeY: auto;
6
- --lx-layout-itemRatio: auto;
1
+ .frg-layout-stack {
2
+ --frg-layout-gapX: 0px;
3
+ --frg-layout-gapY: 0px;
4
+ --frg-layout-itemSizeX: auto;
5
+ --frg-layout-itemSizeY: auto;
6
+ --frg-layout-itemRatio: auto;
7
7
  display: flex;
8
8
  }
9
- .lx-layout-stack.lx-layout-direction-x {
9
+ .frg-layout-stack.frg-layout-direction-x {
10
10
  flex-direction: row;
11
11
  }
12
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-left {
12
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-left {
13
13
  justify-content: flex-start;
14
14
  }
15
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-center {
15
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-center {
16
16
  justify-content: center;
17
17
  }
18
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-right {
18
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-right {
19
19
  justify-content: flex-end;
20
20
  }
21
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-spaceBetween {
21
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-spaceBetween {
22
22
  justify-content: space-between;
23
23
  }
24
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-spaceAround {
24
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-spaceAround {
25
25
  justify-content: space-around;
26
26
  }
27
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-spaceEvenly {
27
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignX-spaceEvenly {
28
28
  justify-content: space-evenly;
29
29
  }
30
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignY-top {
30
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignY-top {
31
31
  align-items: flex-start;
32
32
  }
33
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignY-middle {
33
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignY-middle {
34
34
  align-items: center;
35
35
  }
36
- .lx-layout-stack.lx-layout-direction-x.lx-layout-alignY-bottom {
36
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-alignY-bottom {
37
37
  align-items: flex-end;
38
38
  }
39
- .lx-layout-stack.lx-layout-direction-x > * {
39
+ .frg-layout-stack.frg-layout-direction-x > * {
40
40
  flex-grow: 0;
41
41
  flex-shrink: 0;
42
42
  min-width: 0;
43
43
  min-height: 0;
44
44
  }
45
- .lx-layout-stack.lx-layout-direction-x.lx-layout-itemSizeX > * {
46
- flex-basis: var(--lx-layout-itemSizeX);
45
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-itemSizeX > * {
46
+ flex-basis: var(--frg-layout-itemSizeX);
47
47
  }
48
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-fit {
48
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustX-fit {
49
49
  justify-content: flex-start;
50
50
  }
51
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-fit > * {
51
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustX-fit > * {
52
52
  flex-grow: 1;
53
53
  flex-shrink: 1;
54
54
  flex-basis: auto;
55
55
  }
56
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-fit.lx-layout-itemSizeX > * {
57
- flex-basis: var(--lx-layout-itemSizeX);
56
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustX-fit.frg-layout-itemSizeX > * {
57
+ flex-basis: var(--frg-layout-itemSizeX);
58
58
  }
59
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-grow > * {
59
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustX-grow > * {
60
60
  flex-grow: 1;
61
61
  }
62
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
62
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustX-shrink > * {
63
63
  flex-shrink: 1;
64
64
  }
65
- .lx-layout-stack.lx-layout-direction-x.lx-layout-itemSizeY > * {
66
- height: var(--lx-layout-itemSizeY);
65
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-itemSizeY > * {
66
+ height: var(--frg-layout-itemSizeY);
67
67
  }
68
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-fit {
68
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustY-fit {
69
69
  align-items: stretch;
70
70
  }
71
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-fit > * {
71
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustY-fit > * {
72
72
  min-height: 100%;
73
73
  max-height: 100%;
74
74
  }
75
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-fit.lx-layout-itemSizeY > * {
75
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustY-fit.frg-layout-itemSizeY > * {
76
76
  height: auto;
77
77
  }
78
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-grow > * {
78
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustY-grow > * {
79
79
  min-height: 100%;
80
80
  }
81
- .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-shrink > * {
81
+ .frg-layout-stack.frg-layout-direction-x.frg-layout-adjustY-shrink > * {
82
82
  max-height: 100%;
83
83
  }
84
- .lx-layout-stack.lx-layout-direction-y {
84
+ .frg-layout-stack.frg-layout-direction-y {
85
85
  flex-direction: column;
86
86
  }
87
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignX-left {
87
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignX-left {
88
88
  align-items: flex-start;
89
89
  }
90
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignX-center {
90
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignX-center {
91
91
  align-items: center;
92
92
  }
93
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignX-right {
93
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignX-right {
94
94
  align-items: flex-end;
95
95
  }
96
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-top {
96
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-top {
97
97
  justify-content: flex-start;
98
98
  }
99
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-middle {
99
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-middle {
100
100
  justify-content: center;
101
101
  }
102
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-bottom {
102
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-bottom {
103
103
  justify-content: flex-end;
104
104
  }
105
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-spaceBetween {
105
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-spaceBetween {
106
106
  justify-content: space-between;
107
107
  }
108
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-spaceAround {
108
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-spaceAround {
109
109
  justify-content: space-around;
110
110
  }
111
- .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-spaceEvenly {
111
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-alignY-spaceEvenly {
112
112
  justify-content: space-evenly;
113
113
  }
114
- .lx-layout-stack.lx-layout-direction-y > * {
114
+ .frg-layout-stack.frg-layout-direction-y > * {
115
115
  flex-grow: 0;
116
116
  flex-shrink: 0;
117
117
  min-width: 0;
118
118
  min-height: 0;
119
119
  }
120
- .lx-layout-stack.lx-layout-direction-y.lx-layout-itemSizeX > * {
121
- width: var(--lx-layout-itemSizeX);
120
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-itemSizeX > * {
121
+ width: var(--frg-layout-itemSizeX);
122
122
  }
123
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-fit {
123
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustX-fit {
124
124
  align-items: stretch;
125
125
  }
126
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-fit > * {
126
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustX-fit > * {
127
127
  min-width: 100%;
128
128
  max-width: 100%;
129
129
  }
130
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-fit.lx-layout-itemSizeX > * {
130
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustX-fit.frg-layout-itemSizeX > * {
131
131
  width: auto;
132
132
  }
133
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-grow > * {
133
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustX-grow > * {
134
134
  min-width: 100%;
135
135
  }
136
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-shrink > * {
136
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustX-shrink > * {
137
137
  max-width: 100%;
138
138
  }
139
- .lx-layout-stack.lx-layout-direction-y.lx-layout-itemSizeY > * {
140
- flex-basis: var(--lx-layout-itemSizeY);
139
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-itemSizeY > * {
140
+ flex-basis: var(--frg-layout-itemSizeY);
141
141
  }
142
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-fit {
142
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustY-fit {
143
143
  justify-content: flex-start;
144
144
  }
145
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-fit > * {
145
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustY-fit > * {
146
146
  flex-grow: 1;
147
147
  flex-shrink: 1;
148
148
  flex-basis: auto;
149
149
  }
150
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-fit.lx-layout-itemSizeY > * {
151
- flex-basis: var(--lx-layout-itemSizeY);
150
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustY-fit.frg-layout-itemSizeY > * {
151
+ flex-basis: var(--frg-layout-itemSizeY);
152
152
  }
153
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-grow > * {
153
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustY-grow > * {
154
154
  flex-grow: 1;
155
155
  }
156
- .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
156
+ .frg-layout-stack.frg-layout-direction-y.frg-layout-adjustY-shrink > * {
157
157
  flex-shrink: 1;
158
158
  }
159
- .lx-layout-stack.lx-layout-itemRatio > * {
160
- aspect-ratio: var(--lx-layout-itemRatio);
159
+ .frg-layout-stack.frg-layout-itemRatio > * {
160
+ aspect-ratio: var(--frg-layout-itemRatio);
161
161
  }
162
- .lx-layout-stack.lx-layout-gapX {
163
- column-gap: var(--lx-layout-gapX);
162
+ .frg-layout-stack.frg-layout-gapX {
163
+ column-gap: var(--frg-layout-gapX);
164
164
  }
165
- .lx-layout-stack.lx-layout-gapY {
166
- row-gap: var(--lx-layout-gapY);
165
+ .frg-layout-stack.frg-layout-gapY {
166
+ row-gap: var(--frg-layout-gapY);
167
167
  }
168
168
 
169
- .lx-layout-flow {
170
- --lx-layout-gapX: 0px;
171
- --lx-layout-gapY: 0px;
172
- --lx-layout-itemSizeX: auto;
173
- --lx-layout-itemSizeY: auto;
174
- --lx-layout-itemRatio: auto;
169
+ .frg-layout-flow {
170
+ --frg-layout-gapX: 0px;
171
+ --frg-layout-gapY: 0px;
172
+ --frg-layout-itemSizeX: auto;
173
+ --frg-layout-itemSizeY: auto;
174
+ --frg-layout-itemRatio: auto;
175
175
  display: flex;
176
176
  flex-wrap: wrap;
177
177
  }
178
- .lx-layout-flow.lx-layout-direction-x {
178
+ .frg-layout-flow.frg-layout-direction-x {
179
179
  flex-direction: row;
180
180
  }
181
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-left {
181
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-left {
182
182
  justify-content: flex-start;
183
183
  }
184
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-center {
184
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-center {
185
185
  justify-content: center;
186
186
  }
187
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-right {
187
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-right {
188
188
  justify-content: flex-end;
189
189
  }
190
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-spaceBetween {
190
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-spaceBetween {
191
191
  justify-content: space-between;
192
192
  }
193
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-spaceAround {
193
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-spaceAround {
194
194
  justify-content: space-around;
195
195
  }
196
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-spaceEvenly {
196
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-spaceEvenly {
197
197
  justify-content: space-evenly;
198
198
  }
199
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-top {
199
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-top {
200
200
  align-items: flex-start;
201
201
  align-content: flex-start;
202
202
  }
203
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-middle {
203
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-middle {
204
204
  align-items: center;
205
205
  align-content: center;
206
206
  }
207
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-bottom {
207
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-bottom {
208
208
  align-items: flex-end;
209
209
  align-content: flex-end;
210
210
  }
211
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-spaceBetween {
211
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-spaceBetween {
212
212
  align-content: space-between;
213
213
  }
214
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-spaceAround {
214
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-spaceAround {
215
215
  align-content: space-around;
216
216
  }
217
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-spaceEvenly {
217
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-spaceEvenly {
218
218
  align-content: space-evenly;
219
219
  }
220
- .lx-layout-flow.lx-layout-direction-x > * {
220
+ .frg-layout-flow.frg-layout-direction-x > * {
221
221
  flex-grow: 0;
222
222
  flex-shrink: 0;
223
223
  min-width: 0;
224
224
  min-height: 0;
225
225
  }
226
- .lx-layout-flow.lx-layout-direction-x.lx-layout-itemSizeX > * {
227
- flex-basis: var(--lx-layout-itemSizeX);
226
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-itemSizeX > * {
227
+ flex-basis: var(--frg-layout-itemSizeX);
228
228
  }
229
- .lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-fit {
229
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-adjustX-fit {
230
230
  justify-content: flex-start;
231
231
  }
232
- .lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-fit > * {
232
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-adjustX-fit > * {
233
233
  flex-grow: 1;
234
234
  flex-shrink: 1;
235
235
  flex-basis: auto;
236
236
  }
237
- .lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-fit.lx-layout-itemSizeX > * {
238
- flex-basis: var(--lx-layout-itemSizeX);
237
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-adjustX-fit.frg-layout-itemSizeX > * {
238
+ flex-basis: var(--frg-layout-itemSizeX);
239
239
  }
240
- .lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-grow > * {
240
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-adjustX-grow > * {
241
241
  flex-grow: 1;
242
242
  }
243
- .lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
243
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-adjustX-shrink > * {
244
244
  flex-shrink: 1;
245
245
  }
246
- .lx-layout-flow.lx-layout-direction-x.lx-layout-itemSizeY > * {
247
- height: var(--lx-layout-itemSizeY);
246
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-itemSizeY > * {
247
+ height: var(--frg-layout-itemSizeY);
248
248
  }
249
- .lx-layout-flow.lx-layout-direction-y {
249
+ .frg-layout-flow.frg-layout-direction-y {
250
250
  flex-direction: column;
251
251
  }
252
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-left {
252
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-left {
253
253
  align-items: flex-start;
254
254
  align-content: flex-start;
255
255
  }
256
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-center {
256
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-center {
257
257
  align-items: center;
258
258
  align-content: center;
259
259
  }
260
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-right {
260
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-right {
261
261
  align-items: flex-end;
262
262
  align-content: flex-end;
263
263
  }
264
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-spaceBetween {
264
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-spaceBetween {
265
265
  align-content: space-between;
266
266
  }
267
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-spaceAround {
267
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-spaceAround {
268
268
  align-content: space-around;
269
269
  }
270
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-spaceEvenly {
270
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-spaceEvenly {
271
271
  align-content: space-evenly;
272
272
  }
273
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-top {
273
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-top {
274
274
  justify-content: flex-start;
275
275
  }
276
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-middle {
276
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-middle {
277
277
  justify-content: center;
278
278
  }
279
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-bottom {
279
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-bottom {
280
280
  justify-content: flex-end;
281
281
  }
282
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-spaceBetween {
282
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-spaceBetween {
283
283
  justify-content: space-between;
284
284
  }
285
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-spaceAround {
285
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-spaceAround {
286
286
  justify-content: space-around;
287
287
  }
288
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-spaceEvenly {
288
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-spaceEvenly {
289
289
  justify-content: space-evenly;
290
290
  }
291
- .lx-layout-flow.lx-layout-direction-y > * {
291
+ .frg-layout-flow.frg-layout-direction-y > * {
292
292
  flex-grow: 0;
293
293
  flex-shrink: 0;
294
294
  min-width: 0;
295
295
  min-height: 0;
296
296
  }
297
- .lx-layout-flow.lx-layout-direction-y.lx-layout-itemSizeX > * {
298
- width: var(--lx-layout-itemSizeX);
297
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-itemSizeX > * {
298
+ width: var(--frg-layout-itemSizeX);
299
299
  }
300
- .lx-layout-flow.lx-layout-direction-y.lx-layout-itemSizeY > * {
301
- flex-basis: var(--lx-layout-itemSizeY);
300
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-itemSizeY > * {
301
+ flex-basis: var(--frg-layout-itemSizeY);
302
302
  }
303
- .lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-fit {
303
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-adjustY-fit {
304
304
  justify-content: flex-start;
305
305
  }
306
- .lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-fit > * {
306
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-adjustY-fit > * {
307
307
  flex-grow: 1;
308
308
  flex-shrink: 1;
309
309
  flex-basis: auto;
310
310
  }
311
- .lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-fit.lx-layout-itemSizeY > * {
312
- flex-basis: var(--lx-layout-itemSizeY);
311
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-adjustY-fit.frg-layout-itemSizeY > * {
312
+ flex-basis: var(--frg-layout-itemSizeY);
313
313
  }
314
- .lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-grow > * {
314
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-adjustY-grow > * {
315
315
  flex-grow: 1;
316
316
  }
317
- .lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
317
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-adjustY-shrink > * {
318
318
  flex-shrink: 1;
319
319
  }
320
- .lx-layout-flow.lx-layout-itemRatio > * {
321
- aspect-ratio: var(--lx-layout-itemRatio);
320
+ .frg-layout-flow.frg-layout-itemRatio > * {
321
+ aspect-ratio: var(--frg-layout-itemRatio);
322
322
  }
323
- .lx-layout-flow.lx-layout-gapX {
324
- column-gap: var(--lx-layout-gapX);
323
+ .frg-layout-flow.frg-layout-gapX {
324
+ column-gap: var(--frg-layout-gapX);
325
325
  }
326
- .lx-layout-flow.lx-layout-gapY {
327
- row-gap: var(--lx-layout-gapY);
326
+ .frg-layout-flow.frg-layout-gapY {
327
+ row-gap: var(--frg-layout-gapY);
328
328
  }
329
329
 
330
- .lx-layout-tile {
331
- --lx-layout-gapX: 0px;
332
- --lx-layout-gapY: 0px;
333
- --lx-layout-itemSizeX: auto;
334
- --lx-layout-itemSizeY: auto;
335
- --lx-layout-itemRatio: auto;
330
+ .frg-layout-tile {
331
+ --frg-layout-gapX: 0px;
332
+ --frg-layout-gapY: 0px;
333
+ --frg-layout-itemSizeX: auto;
334
+ --frg-layout-itemSizeY: auto;
335
+ --frg-layout-itemRatio: auto;
336
336
  display: grid;
337
337
  }
338
- .lx-layout-tile > * {
338
+ .frg-layout-tile > * {
339
339
  min-width: 0;
340
340
  min-height: 0;
341
341
  }
342
- .lx-layout-tile.lx-layout-direction-x {
342
+ .frg-layout-tile.frg-layout-direction-x {
343
343
  grid-auto-flow: row;
344
344
  grid-template-columns: repeat(auto-fit, minmax(max-content, 100%));
345
345
  }
346
- .lx-layout-tile.lx-layout-direction-x.lx-layout-itemSizeX {
347
- grid-template-columns: repeat(auto-fit, var(--lx-layout-itemSizeX));
346
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-itemSizeX {
347
+ grid-template-columns: repeat(auto-fit, var(--frg-layout-itemSizeX));
348
348
  }
349
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink {
349
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-fit, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-grow, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-shrink {
350
350
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
351
351
  }
352
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit > *, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow > *, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
352
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-fit > *, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-grow > *, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-shrink > * {
353
353
  width: auto;
354
354
  }
355
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit.lx-layout-itemSizeX {
356
- grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeX)), 1fr));
355
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-fit.frg-layout-itemSizeX {
356
+ grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--frg-layout-itemSizeX)), 1fr));
357
357
  }
358
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow.lx-layout-itemSizeX {
359
- grid-template-columns: repeat(auto-fit, minmax(var(--lx-layout-itemSizeX), 1fr));
358
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-grow.frg-layout-itemSizeX {
359
+ grid-template-columns: repeat(auto-fit, minmax(var(--frg-layout-itemSizeX), 1fr));
360
360
  }
361
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink.lx-layout-itemSizeX {
362
- grid-template-columns: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeX)));
361
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-shrink.frg-layout-itemSizeX {
362
+ grid-template-columns: repeat(auto-fit, minmax(0, var(--frg-layout-itemSizeX)));
363
363
  }
364
- .lx-layout-tile.lx-layout-direction-x {
364
+ .frg-layout-tile.frg-layout-direction-x {
365
365
  grid-auto-rows: auto;
366
366
  }
367
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-fit {
367
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-fit {
368
368
  grid-auto-rows: minmax(0, 100%);
369
369
  align-content: stretch;
370
370
  }
371
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-fit > * {
371
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-fit > * {
372
372
  height: auto;
373
373
  }
374
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow {
374
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow {
375
375
  grid-auto-rows: minmax(auto, 100%);
376
376
  }
377
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow > * {
377
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow > * {
378
378
  max-height: 100%;
379
379
  height: 100%;
380
380
  }
381
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow.lx-layout-itemSizeY {
382
- grid-auto-rows: minmax(var(--lx-layout-itemSizeY), 100%);
381
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow.frg-layout-itemSizeY {
382
+ grid-auto-rows: minmax(var(--frg-layout-itemSizeY), 100%);
383
383
  }
384
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow.lx-layout-itemSizeY > * {
385
- min-height: var(--lx-layout-itemSizeY);
384
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow.frg-layout-itemSizeY > * {
385
+ min-height: var(--frg-layout-itemSizeY);
386
386
  }
387
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink {
387
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink {
388
388
  grid-auto-rows: minmax(0, auto);
389
389
  }
390
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink > * {
390
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink > * {
391
391
  min-height: 100%;
392
392
  height: 100%;
393
393
  }
394
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink.lx-layout-itemSizeY {
395
- grid-auto-rows: minmax(0, var(--lx-layout-itemSizeY));
394
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink.frg-layout-itemSizeY {
395
+ grid-auto-rows: minmax(0, var(--frg-layout-itemSizeY));
396
396
  }
397
- .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink.lx-layout-itemSizeY > * {
398
- max-height: var(--lx-layout-itemSizeY);
397
+ .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink.frg-layout-itemSizeY > * {
398
+ max-height: var(--frg-layout-itemSizeY);
399
399
  }
400
- .lx-layout-tile.lx-layout-direction-y {
400
+ .frg-layout-tile.frg-layout-direction-y {
401
401
  grid-auto-flow: column;
402
402
  grid-auto-columns: auto;
403
403
  }
404
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-fit > *, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow > *, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink > * {
404
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-fit > *, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-grow > *, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-shrink > * {
405
405
  width: auto;
406
406
  }
407
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-fit {
407
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-fit {
408
408
  grid-auto-columns: minmax(0, 100%);
409
409
  }
410
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow {
410
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-grow {
411
411
  grid-auto-columns: minmax(auto, 100%);
412
412
  }
413
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow.lx-layout-itemSizeX {
414
- grid-auto-columns: minmax(var(--lx-layout-itemSizeX), 100%);
413
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-grow.frg-layout-itemSizeX {
414
+ grid-auto-columns: minmax(var(--frg-layout-itemSizeX), 100%);
415
415
  }
416
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink {
416
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-shrink {
417
417
  grid-auto-columns: minmax(0, auto);
418
418
  }
419
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink.lx-layout-itemSizeX {
420
- grid-auto-columns: minmax(0, var(--lx-layout-itemSizeX));
419
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-shrink.frg-layout-itemSizeX {
420
+ grid-auto-columns: minmax(0, var(--frg-layout-itemSizeX));
421
421
  }
422
- .lx-layout-tile.lx-layout-direction-y {
422
+ .frg-layout-tile.frg-layout-direction-y {
423
423
  grid-template-rows: repeat(auto-fit, minmax(max-content, 100%));
424
424
  }
425
- .lx-layout-tile.lx-layout-direction-y.lx-layout-itemSizeY {
426
- grid-template-rows: repeat(auto-fit, var(--lx-layout-itemSizeY));
425
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-itemSizeY {
426
+ grid-template-rows: repeat(auto-fit, var(--frg-layout-itemSizeY));
427
427
  }
428
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink {
428
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink {
429
429
  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
430
430
  }
431
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit {
431
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit {
432
432
  align-content: stretch;
433
433
  }
434
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit > * {
434
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit > * {
435
435
  height: auto;
436
436
  }
437
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit.lx-layout-itemSizeY {
438
- grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeY)), 1fr));
437
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit.frg-layout-itemSizeY {
438
+ grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--frg-layout-itemSizeY)), 1fr));
439
439
  }
440
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow > * {
440
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow > * {
441
441
  max-height: 100%;
442
442
  height: 100%;
443
443
  }
444
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow.lx-layout-itemSizeY {
445
- grid-template-rows: repeat(auto-fit, minmax(var(--lx-layout-itemSizeY), 1fr));
444
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow.frg-layout-itemSizeY {
445
+ grid-template-rows: repeat(auto-fit, minmax(var(--frg-layout-itemSizeY), 1fr));
446
446
  }
447
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow.lx-layout-itemSizeY > * {
448
- min-height: var(--lx-layout-itemSizeY);
447
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow.frg-layout-itemSizeY > * {
448
+ min-height: var(--frg-layout-itemSizeY);
449
449
  }
450
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
450
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink > * {
451
451
  min-height: 100%;
452
452
  height: 100%;
453
453
  }
454
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink.lx-layout-itemSizeY {
455
- grid-template-rows: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeY)));
454
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink.frg-layout-itemSizeY {
455
+ grid-template-rows: repeat(auto-fit, minmax(0, var(--frg-layout-itemSizeY)));
456
456
  }
457
- .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink.lx-layout-itemSizeY > * {
458
- max-height: var(--lx-layout-itemSizeY);
457
+ .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink.frg-layout-itemSizeY > * {
458
+ max-height: var(--frg-layout-itemSizeY);
459
459
  }
460
- .lx-layout-tile.lx-layout-alignX-left {
460
+ .frg-layout-tile.frg-layout-alignX-left {
461
461
  justify-content: flex-start;
462
462
  }
463
- .lx-layout-tile.lx-layout-alignX-center {
463
+ .frg-layout-tile.frg-layout-alignX-center {
464
464
  justify-content: center;
465
465
  }
466
- .lx-layout-tile.lx-layout-alignX-right {
466
+ .frg-layout-tile.frg-layout-alignX-right {
467
467
  justify-content: flex-end;
468
468
  }
469
- .lx-layout-tile.lx-layout-alignX-spaceBetween {
469
+ .frg-layout-tile.frg-layout-alignX-spaceBetween {
470
470
  justify-content: space-between;
471
471
  }
472
- .lx-layout-tile.lx-layout-alignX-spaceAround {
472
+ .frg-layout-tile.frg-layout-alignX-spaceAround {
473
473
  justify-content: space-around;
474
474
  }
475
- .lx-layout-tile.lx-layout-alignX-spaceEvenly {
475
+ .frg-layout-tile.frg-layout-alignX-spaceEvenly {
476
476
  justify-content: space-evenly;
477
477
  }
478
- .lx-layout-tile.lx-layout-alignY-top {
478
+ .frg-layout-tile.frg-layout-alignY-top {
479
479
  align-content: flex-start;
480
480
  }
481
- .lx-layout-tile.lx-layout-alignY-middle {
481
+ .frg-layout-tile.frg-layout-alignY-middle {
482
482
  align-content: center;
483
483
  }
484
- .lx-layout-tile.lx-layout-alignY-bottom {
484
+ .frg-layout-tile.frg-layout-alignY-bottom {
485
485
  align-content: flex-end;
486
486
  }
487
- .lx-layout-tile.lx-layout-alignY-spaceBetween {
487
+ .frg-layout-tile.frg-layout-alignY-spaceBetween {
488
488
  align-content: space-between;
489
489
  }
490
- .lx-layout-tile.lx-layout-alignY-spaceAround {
490
+ .frg-layout-tile.frg-layout-alignY-spaceAround {
491
491
  align-content: space-around;
492
492
  }
493
- .lx-layout-tile.lx-layout-alignY-spaceEvenly {
493
+ .frg-layout-tile.frg-layout-alignY-spaceEvenly {
494
494
  align-content: space-evenly;
495
495
  }
496
- .lx-layout-tile.lx-layout-itemSizeX > * {
497
- width: var(--lx-layout-itemSizeX);
496
+ .frg-layout-tile.frg-layout-itemSizeX > * {
497
+ width: var(--frg-layout-itemSizeX);
498
498
  }
499
- .lx-layout-tile.lx-layout-itemSizeY > * {
500
- height: var(--lx-layout-itemSizeY);
499
+ .frg-layout-tile.frg-layout-itemSizeY > * {
500
+ height: var(--frg-layout-itemSizeY);
501
501
  }
502
- .lx-layout-tile.lx-layout-itemRatio > * {
503
- aspect-ratio: var(--lx-layout-itemRatio);
502
+ .frg-layout-tile.frg-layout-itemRatio > * {
503
+ aspect-ratio: var(--frg-layout-itemRatio);
504
504
  }
505
- .lx-layout-tile.lx-layout-gapX {
506
- column-gap: var(--lx-layout-gapX);
505
+ .frg-layout-tile.frg-layout-gapX {
506
+ column-gap: var(--frg-layout-gapX);
507
507
  }
508
- .lx-layout-tile.lx-layout-gapY {
509
- row-gap: var(--lx-layout-gapY);
508
+ .frg-layout-tile.frg-layout-gapY {
509
+ row-gap: var(--frg-layout-gapY);
510
510
  }
511
511
 
512
- .lx-layout-matrix {
513
- --lx-layout-gapX: 0px;
514
- --lx-layout-gapY: 0px;
515
- --lx-layout-itemSizeX: auto;
516
- --lx-layout-itemSizeY: auto;
517
- --lx-layout-itemRatio: auto;
518
- --lx-layout-itemCountX: auto-fit;
519
- --lx-layout-itemCountY: auto-fit;
520
- --lx-layout-templateX: none;
521
- --lx-layout-templateY: none;
512
+ .frg-layout-matrix {
513
+ --frg-layout-gapX: 0px;
514
+ --frg-layout-gapY: 0px;
515
+ --frg-layout-itemSizeX: auto;
516
+ --frg-layout-itemSizeY: auto;
517
+ --frg-layout-itemRatio: auto;
518
+ --frg-layout-itemCountX: auto-fit;
519
+ --frg-layout-itemCountY: auto-fit;
520
+ --frg-layout-templateX: none;
521
+ --frg-layout-templateY: none;
522
522
  display: grid;
523
523
  }
524
- .lx-layout-matrix.lx-layout-direction-x {
524
+ .frg-layout-matrix.frg-layout-direction-x {
525
525
  grid-auto-flow: row;
526
526
  }
527
- .lx-layout-matrix.lx-layout-direction-y {
527
+ .frg-layout-matrix.frg-layout-direction-y {
528
528
  grid-auto-flow: column;
529
529
  }
530
- .lx-layout-matrix.lx-layout-alignX-left {
530
+ .frg-layout-matrix.frg-layout-alignX-left {
531
531
  justify-content: flex-start;
532
532
  }
533
- .lx-layout-matrix.lx-layout-alignX-center {
533
+ .frg-layout-matrix.frg-layout-alignX-center {
534
534
  justify-content: center;
535
535
  }
536
- .lx-layout-matrix.lx-layout-alignX-right {
536
+ .frg-layout-matrix.frg-layout-alignX-right {
537
537
  justify-content: flex-end;
538
538
  }
539
- .lx-layout-matrix.lx-layout-alignX-spaceBetween {
539
+ .frg-layout-matrix.frg-layout-alignX-spaceBetween {
540
540
  justify-content: space-between;
541
541
  }
542
- .lx-layout-matrix.lx-layout-alignX-spaceAround {
542
+ .frg-layout-matrix.frg-layout-alignX-spaceAround {
543
543
  justify-content: space-around;
544
544
  }
545
- .lx-layout-matrix.lx-layout-alignX-spaceEvenly {
545
+ .frg-layout-matrix.frg-layout-alignX-spaceEvenly {
546
546
  justify-content: space-evenly;
547
547
  }
548
- .lx-layout-matrix.lx-layout-alignY-top {
548
+ .frg-layout-matrix.frg-layout-alignY-top {
549
549
  align-content: flex-start;
550
550
  }
551
- .lx-layout-matrix.lx-layout-alignY-middle {
551
+ .frg-layout-matrix.frg-layout-alignY-middle {
552
552
  align-content: center;
553
553
  }
554
- .lx-layout-matrix.lx-layout-alignY-bottom {
554
+ .frg-layout-matrix.frg-layout-alignY-bottom {
555
555
  align-content: flex-end;
556
556
  }
557
- .lx-layout-matrix.lx-layout-alignY-spaceBetween {
557
+ .frg-layout-matrix.frg-layout-alignY-spaceBetween {
558
558
  align-content: space-between;
559
559
  }
560
- .lx-layout-matrix.lx-layout-alignY-spaceAround {
560
+ .frg-layout-matrix.frg-layout-alignY-spaceAround {
561
561
  align-content: space-around;
562
562
  }
563
- .lx-layout-matrix.lx-layout-alignY-spaceEvenly {
563
+ .frg-layout-matrix.frg-layout-alignY-spaceEvenly {
564
564
  align-content: space-evenly;
565
565
  }
566
- .lx-layout-matrix.lx-layout-itemSizeX {
567
- grid-template-columns: repeat(auto-fit, var(--lx-layout-itemSizeX));
566
+ .frg-layout-matrix.frg-layout-itemSizeX {
567
+ grid-template-columns: repeat(auto-fit, var(--frg-layout-itemSizeX));
568
568
  }
569
- .lx-layout-matrix.lx-layout-itemSizeX.lx-layout-itemCountX {
570
- grid-template-columns: repeat(var(--lx-layout-itemCountX), var(--lx-layout-itemSizeX));
569
+ .frg-layout-matrix.frg-layout-itemSizeX.frg-layout-itemCountX {
570
+ grid-template-columns: repeat(var(--frg-layout-itemCountX), var(--frg-layout-itemSizeX));
571
571
  }
572
- .lx-layout-matrix.lx-layout-itemCountX {
573
- grid-template-columns: repeat(var(--lx-layout-itemCountX), auto);
572
+ .frg-layout-matrix.frg-layout-itemCountX {
573
+ grid-template-columns: repeat(var(--frg-layout-itemCountX), auto);
574
574
  }
575
- .lx-layout-matrix.lx-layout-templateX {
576
- grid-template-columns: var(--lx-layout-templateX);
575
+ .frg-layout-matrix.frg-layout-templateX {
576
+ grid-template-columns: var(--frg-layout-templateX);
577
577
  }
578
- .lx-layout-matrix.lx-layout-adjustX-fit.lx-layout-itemSizeX {
579
- grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeX)), 1fr));
578
+ .frg-layout-matrix.frg-layout-adjustX-fit.frg-layout-itemSizeX {
579
+ grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--frg-layout-itemSizeX)), 1fr));
580
580
  }
581
- .lx-layout-matrix.lx-layout-adjustX-fit.lx-layout-itemSizeX.lx-layout-itemCountX {
582
- grid-template-columns: repeat(var(--lx-layout-itemCountX), minmax(clamp(0px, (100% - var(--lx-layout-gapX) * (var(--lx-layout-itemCountX) - 1)) / var(--lx-layout-itemCountX), var(--lx-layout-itemSizeX)), 1fr));
581
+ .frg-layout-matrix.frg-layout-adjustX-fit.frg-layout-itemSizeX.frg-layout-itemCountX {
582
+ grid-template-columns: repeat(var(--frg-layout-itemCountX), minmax(clamp(0px, (100% - var(--frg-layout-gapX) * (var(--frg-layout-itemCountX) - 1)) / var(--frg-layout-itemCountX), var(--frg-layout-itemSizeX)), 1fr));
583
583
  }
584
- .lx-layout-matrix.lx-layout-adjustX-fit.lx-layout-itemCountX {
585
- grid-template-columns: repeat(var(--lx-layout-itemCountX), 1fr);
584
+ .frg-layout-matrix.frg-layout-adjustX-fit.frg-layout-itemCountX {
585
+ grid-template-columns: repeat(var(--frg-layout-itemCountX), 1fr);
586
586
  }
587
- .lx-layout-matrix.lx-layout-adjustX-grow.lx-layout-itemSizeX {
588
- grid-template-columns: repeat(auto-fit, minmax(var(--lx-layout-itemSizeX), 1fr));
587
+ .frg-layout-matrix.frg-layout-adjustX-grow.frg-layout-itemSizeX {
588
+ grid-template-columns: repeat(auto-fit, minmax(var(--frg-layout-itemSizeX), 1fr));
589
589
  }
590
- .lx-layout-matrix.lx-layout-adjustX-grow.lx-layout-itemSizeX.lx-layout-itemCountX {
591
- grid-template-columns: repeat(var(--lx-layout-itemCountX), minmax(var(--lx-layout-itemSizeX), 1fr));
590
+ .frg-layout-matrix.frg-layout-adjustX-grow.frg-layout-itemSizeX.frg-layout-itemCountX {
591
+ grid-template-columns: repeat(var(--frg-layout-itemCountX), minmax(var(--frg-layout-itemSizeX), 1fr));
592
592
  }
593
- .lx-layout-matrix.lx-layout-adjustX-grow.lx-layout-itemCountX {
594
- grid-template-columns: repeat(var(--lx-layout-itemCountX), 1fr);
593
+ .frg-layout-matrix.frg-layout-adjustX-grow.frg-layout-itemCountX {
594
+ grid-template-columns: repeat(var(--frg-layout-itemCountX), 1fr);
595
595
  }
596
- .lx-layout-matrix.lx-layout-adjustX-shrink.lx-layout-itemSizeX {
597
- grid-template-columns: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeX)));
596
+ .frg-layout-matrix.frg-layout-adjustX-shrink.frg-layout-itemSizeX {
597
+ grid-template-columns: repeat(auto-fit, minmax(0, var(--frg-layout-itemSizeX)));
598
598
  }
599
- .lx-layout-matrix.lx-layout-adjustX-shrink.lx-layout-itemSizeX.lx-layout-itemCountX {
600
- grid-template-columns: repeat(var(--lx-layout-itemCountX), minmax(0, var(--lx-layout-itemSizeX)));
599
+ .frg-layout-matrix.frg-layout-adjustX-shrink.frg-layout-itemSizeX.frg-layout-itemCountX {
600
+ grid-template-columns: repeat(var(--frg-layout-itemCountX), minmax(0, var(--frg-layout-itemSizeX)));
601
601
  }
602
- .lx-layout-matrix.lx-layout-adjustX-shrink.lx-layout-itemCountX {
603
- grid-template-columns: repeat(var(--lx-layout-itemCountX), auto);
602
+ .frg-layout-matrix.frg-layout-adjustX-shrink.frg-layout-itemCountX {
603
+ grid-template-columns: repeat(var(--frg-layout-itemCountX), auto);
604
604
  }
605
- .lx-layout-matrix.lx-layout-itemSizeY {
606
- grid-template-rows: repeat(auto-fit, var(--lx-layout-itemSizeY));
605
+ .frg-layout-matrix.frg-layout-itemSizeY {
606
+ grid-template-rows: repeat(auto-fit, var(--frg-layout-itemSizeY));
607
607
  }
608
- .lx-layout-matrix.lx-layout-itemSizeY.lx-layout-itemCountY {
609
- grid-template-rows: repeat(var(--lx-layout-itemCountY), var(--lx-layout-itemSizeY));
608
+ .frg-layout-matrix.frg-layout-itemSizeY.frg-layout-itemCountY {
609
+ grid-template-rows: repeat(var(--frg-layout-itemCountY), var(--frg-layout-itemSizeY));
610
610
  }
611
- .lx-layout-matrix.lx-layout-itemCountY {
612
- grid-template-rows: repeat(var(--lx-layout-itemCountY), auto);
611
+ .frg-layout-matrix.frg-layout-itemCountY {
612
+ grid-template-rows: repeat(var(--frg-layout-itemCountY), auto);
613
613
  }
614
- .lx-layout-matrix.lx-layout-templateY {
615
- grid-template-rows: var(--lx-layout-templateY);
614
+ .frg-layout-matrix.frg-layout-templateY {
615
+ grid-template-rows: var(--frg-layout-templateY);
616
616
  }
617
- .lx-layout-matrix.lx-layout-adjustY-fit.lx-layout-itemSizeY {
618
- grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeY)), 1fr));
617
+ .frg-layout-matrix.frg-layout-adjustY-fit.frg-layout-itemSizeY {
618
+ grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--frg-layout-itemSizeY)), 1fr));
619
619
  }
620
- .lx-layout-matrix.lx-layout-adjustY-fit.lx-layout-itemSizeY.lx-layout-itemCountY {
621
- grid-template-rows: repeat(var(--lx-layout-itemCountY), minmax(clamp(0px, (100% - var(--lx-layout-gapY) * (var(--lx-layout-itemCountY) - 1)) / var(--lx-layout-itemCountY), var(--lx-layout-itemSizeY)), 1fr));
620
+ .frg-layout-matrix.frg-layout-adjustY-fit.frg-layout-itemSizeY.frg-layout-itemCountY {
621
+ grid-template-rows: repeat(var(--frg-layout-itemCountY), minmax(clamp(0px, (100% - var(--frg-layout-gapY) * (var(--frg-layout-itemCountY) - 1)) / var(--frg-layout-itemCountY), var(--frg-layout-itemSizeY)), 1fr));
622
622
  }
623
- .lx-layout-matrix.lx-layout-adjustY-fit.lx-layout-itemCountY {
624
- grid-template-rows: repeat(var(--lx-layout-itemCountY), 1fr);
623
+ .frg-layout-matrix.frg-layout-adjustY-fit.frg-layout-itemCountY {
624
+ grid-template-rows: repeat(var(--frg-layout-itemCountY), 1fr);
625
625
  }
626
- .lx-layout-matrix.lx-layout-adjustY-grow.lx-layout-itemSizeY {
627
- grid-template-rows: repeat(auto-fit, minmax(var(--lx-layout-itemSizeY), 1fr));
626
+ .frg-layout-matrix.frg-layout-adjustY-grow.frg-layout-itemSizeY {
627
+ grid-template-rows: repeat(auto-fit, minmax(var(--frg-layout-itemSizeY), 1fr));
628
628
  }
629
- .lx-layout-matrix.lx-layout-adjustY-grow.lx-layout-itemSizeY.lx-layout-itemCountY {
630
- grid-template-rows: repeat(var(--lx-layout-itemCountY), minmax(var(--lx-layout-itemSizeY), 1fr));
629
+ .frg-layout-matrix.frg-layout-adjustY-grow.frg-layout-itemSizeY.frg-layout-itemCountY {
630
+ grid-template-rows: repeat(var(--frg-layout-itemCountY), minmax(var(--frg-layout-itemSizeY), 1fr));
631
631
  }
632
- .lx-layout-matrix.lx-layout-adjustY-grow.lx-layout-itemCountY {
633
- grid-template-rows: repeat(var(--lx-layout-itemCountY), 1fr);
632
+ .frg-layout-matrix.frg-layout-adjustY-grow.frg-layout-itemCountY {
633
+ grid-template-rows: repeat(var(--frg-layout-itemCountY), 1fr);
634
634
  }
635
- .lx-layout-matrix.lx-layout-adjustY-shrink.lx-layout-itemSizeY {
636
- grid-template-rows: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeY)));
635
+ .frg-layout-matrix.frg-layout-adjustY-shrink.frg-layout-itemSizeY {
636
+ grid-template-rows: repeat(auto-fit, minmax(0, var(--frg-layout-itemSizeY)));
637
637
  }
638
- .lx-layout-matrix.lx-layout-adjustY-shrink.lx-layout-itemSizeY.lx-layout-itemCountY {
639
- grid-template-rows: repeat(var(--lx-layout-itemCountY), minmax(0, var(--lx-layout-itemSizeY)));
638
+ .frg-layout-matrix.frg-layout-adjustY-shrink.frg-layout-itemSizeY.frg-layout-itemCountY {
639
+ grid-template-rows: repeat(var(--frg-layout-itemCountY), minmax(0, var(--frg-layout-itemSizeY)));
640
640
  }
641
- .lx-layout-matrix.lx-layout-adjustY-shrink.lx-layout-itemCountY {
642
- grid-template-rows: repeat(var(--lx-layout-itemCountY), auto);
641
+ .frg-layout-matrix.frg-layout-adjustY-shrink.frg-layout-itemCountY {
642
+ grid-template-rows: repeat(var(--frg-layout-itemCountY), auto);
643
643
  }
644
- .lx-layout-matrix.lx-layout-itemRatio > * {
645
- aspect-ratio: var(--lx-layout-itemRatio);
644
+ .frg-layout-matrix.frg-layout-itemRatio > * {
645
+ aspect-ratio: var(--frg-layout-itemRatio);
646
646
  }
647
- .lx-layout-matrix.lx-layout-gapX {
648
- column-gap: var(--lx-layout-gapX);
647
+ .frg-layout-matrix.frg-layout-gapX {
648
+ column-gap: var(--frg-layout-gapX);
649
649
  }
650
- .lx-layout-matrix.lx-layout-gapY {
651
- row-gap: var(--lx-layout-gapY);
650
+ .frg-layout-matrix.frg-layout-gapY {
651
+ row-gap: var(--frg-layout-gapY);
652
652
  }
653
653
 
654
- .lx-layout-center {
655
- --lx-layout-gapX: 0px;
656
- --lx-layout-gapY: 0px;
657
- --lx-layout-itemSizeX: auto;
658
- --lx-layout-itemSizeY: auto;
659
- --lx-layout-itemRatio: auto;
654
+ .frg-layout-center {
655
+ --frg-layout-gapX: 0px;
656
+ --frg-layout-gapY: 0px;
657
+ --frg-layout-itemSizeX: auto;
658
+ --frg-layout-itemSizeY: auto;
659
+ --frg-layout-itemRatio: auto;
660
660
  display: flex;
661
661
  justify-content: flex-start;
662
662
  align-content: flex-start;
663
663
  flex-wrap: nowrap;
664
664
  }
665
- .lx-layout-center > * {
665
+ .frg-layout-center > * {
666
666
  min-width: 0;
667
667
  max-width: 100%;
668
668
  min-height: 0;
669
669
  max-height: 100%;
670
670
  margin: 0;
671
671
  }
672
- .lx-layout-center.lx-layout-direction-x {
672
+ .frg-layout-center.frg-layout-direction-x {
673
673
  flex-direction: row;
674
674
  }
675
- .lx-layout-center.lx-layout-direction-x > * {
675
+ .frg-layout-center.frg-layout-direction-x > * {
676
676
  max-width: none;
677
677
  max-height: none;
678
678
  flex-grow: 0;
@@ -680,64 +680,64 @@
680
680
  margin-top: auto;
681
681
  margin-bottom: auto;
682
682
  }
683
- .lx-layout-center.lx-layout-direction-x > *:first-child {
683
+ .frg-layout-center.frg-layout-direction-x > *:first-child {
684
684
  margin-left: auto;
685
685
  }
686
- .lx-layout-center.lx-layout-direction-x > *:last-child {
686
+ .frg-layout-center.frg-layout-direction-x > *:last-child {
687
687
  margin-right: auto;
688
688
  }
689
- .lx-layout-center.lx-layout-direction-x.lx-layout-itemSizeX > * {
690
- width: var(--lx-layout-itemSizeX);
691
- flex-basis: var(--lx-layout-itemSizeX);
689
+ .frg-layout-center.frg-layout-direction-x.frg-layout-itemSizeX > * {
690
+ width: var(--frg-layout-itemSizeX);
691
+ flex-basis: var(--frg-layout-itemSizeX);
692
692
  }
693
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustX-fit > * {
693
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustX-fit > * {
694
694
  width: 100%;
695
695
  max-width: none;
696
696
  flex-grow: 1;
697
697
  flex-shrink: 1;
698
698
  flex-basis: 0%;
699
699
  }
700
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustX-grow > * {
700
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustX-grow > * {
701
701
  width: 100%;
702
- min-width: var(--lx-layout-itemSizeX);
702
+ min-width: var(--frg-layout-itemSizeX);
703
703
  max-width: none;
704
704
  flex-grow: 1;
705
- flex-basis: var(--lx-layout-itemSizeX);
705
+ flex-basis: var(--frg-layout-itemSizeX);
706
706
  }
707
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
708
- width: var(--lx-layout-itemSizeX);
707
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustX-shrink > * {
708
+ width: var(--frg-layout-itemSizeX);
709
709
  max-width: 100%;
710
710
  flex-shrink: 1;
711
- flex-basis: var(--lx-layout-itemSizeX);
711
+ flex-basis: var(--frg-layout-itemSizeX);
712
712
  }
713
- .lx-layout-center.lx-layout-direction-x.lx-layout-itemSizeY > * {
714
- height: var(--lx-layout-itemSizeY);
713
+ .frg-layout-center.frg-layout-direction-x.frg-layout-itemSizeY > * {
714
+ height: var(--frg-layout-itemSizeY);
715
715
  }
716
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-fit {
716
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-fit {
717
717
  align-items: stretch;
718
718
  }
719
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-fit > * {
719
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-fit > * {
720
720
  height: 100%;
721
721
  max-height: none;
722
722
  }
723
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-grow {
723
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-grow {
724
724
  align-items: stretch;
725
725
  }
726
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-grow > * {
726
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-grow > * {
727
727
  height: 100%;
728
- min-height: var(--lx-layout-itemSizeY);
728
+ min-height: var(--frg-layout-itemSizeY);
729
729
  max-height: none;
730
730
  }
731
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-shrink > * {
732
- height: var(--lx-layout-itemSizeY);
731
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-shrink > * {
732
+ height: var(--frg-layout-itemSizeY);
733
733
  max-height: 100%;
734
734
  margin-top: auto;
735
735
  margin-bottom: auto;
736
736
  }
737
- .lx-layout-center.lx-layout-direction-y {
737
+ .frg-layout-center.frg-layout-direction-y {
738
738
  flex-direction: column;
739
739
  }
740
- .lx-layout-center.lx-layout-direction-y > * {
740
+ .frg-layout-center.frg-layout-direction-y > * {
741
741
  max-width: none;
742
742
  max-height: none;
743
743
  flex-grow: 0;
@@ -745,311 +745,311 @@
745
745
  margin-left: auto;
746
746
  margin-right: auto;
747
747
  }
748
- .lx-layout-center.lx-layout-direction-y > *:first-child {
748
+ .frg-layout-center.frg-layout-direction-y > *:first-child {
749
749
  margin-top: auto;
750
750
  }
751
- .lx-layout-center.lx-layout-direction-y > *:last-child {
751
+ .frg-layout-center.frg-layout-direction-y > *:last-child {
752
752
  margin-bottom: auto;
753
753
  }
754
- .lx-layout-center.lx-layout-direction-y.lx-layout-itemSizeX > * {
755
- width: var(--lx-layout-itemSizeX);
754
+ .frg-layout-center.frg-layout-direction-y.frg-layout-itemSizeX > * {
755
+ width: var(--frg-layout-itemSizeX);
756
756
  }
757
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-fit {
757
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-fit {
758
758
  align-items: stretch;
759
759
  }
760
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-fit > * {
760
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-fit > * {
761
761
  width: 100%;
762
762
  max-width: none;
763
763
  }
764
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-grow {
764
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-grow {
765
765
  align-items: stretch;
766
766
  }
767
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-grow > * {
767
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-grow > * {
768
768
  width: 100%;
769
- min-width: var(--lx-layout-itemSizeX);
769
+ min-width: var(--frg-layout-itemSizeX);
770
770
  max-width: none;
771
771
  }
772
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-shrink > * {
773
- width: var(--lx-layout-itemSizeX);
772
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-shrink > * {
773
+ width: var(--frg-layout-itemSizeX);
774
774
  max-width: 100%;
775
775
  margin-left: auto;
776
776
  margin-right: auto;
777
777
  }
778
- .lx-layout-center.lx-layout-direction-y.lx-layout-itemSizeY > * {
779
- height: var(--lx-layout-itemSizeY);
780
- flex-basis: var(--lx-layout-itemSizeY);
778
+ .frg-layout-center.frg-layout-direction-y.frg-layout-itemSizeY > * {
779
+ height: var(--frg-layout-itemSizeY);
780
+ flex-basis: var(--frg-layout-itemSizeY);
781
781
  }
782
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustY-fit > * {
782
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustY-fit > * {
783
783
  height: 100%;
784
784
  max-height: none;
785
785
  flex-grow: 1;
786
786
  flex-shrink: 1;
787
787
  flex-basis: 0%;
788
788
  }
789
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustY-grow > * {
789
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustY-grow > * {
790
790
  height: 100%;
791
- min-height: var(--lx-layout-itemSizeY);
791
+ min-height: var(--frg-layout-itemSizeY);
792
792
  max-height: none;
793
793
  flex-grow: 1;
794
- flex-basis: var(--lx-layout-itemSizeY);
794
+ flex-basis: var(--frg-layout-itemSizeY);
795
795
  }
796
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
797
- height: var(--lx-layout-itemSizeY);
796
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustY-shrink > * {
797
+ height: var(--frg-layout-itemSizeY);
798
798
  max-height: 100%;
799
799
  flex-shrink: 1;
800
- flex-basis: var(--lx-layout-itemSizeY);
800
+ flex-basis: var(--frg-layout-itemSizeY);
801
801
  }
802
- .lx-layout-center.lx-layout-itemRatio > * {
803
- aspect-ratio: var(--lx-layout-itemRatio);
802
+ .frg-layout-center.frg-layout-itemRatio > * {
803
+ aspect-ratio: var(--frg-layout-itemRatio);
804
804
  }
805
- .lx-layout-center.lx-layout-gapX {
806
- column-gap: var(--lx-layout-gapX);
805
+ .frg-layout-center.frg-layout-gapX {
806
+ column-gap: var(--frg-layout-gapX);
807
807
  }
808
- .lx-layout-center.lx-layout-gapY {
809
- row-gap: var(--lx-layout-gapY);
808
+ .frg-layout-center.frg-layout-gapY {
809
+ row-gap: var(--frg-layout-gapY);
810
810
  }
811
811
 
812
- .lx-layout-pack {
813
- --lx-layout-gapX: 0px;
814
- --lx-layout-gapY: 0px;
815
- --lx-layout-itemRatio: auto;
812
+ .frg-layout-pack {
813
+ --frg-layout-gapX: 0px;
814
+ --frg-layout-gapY: 0px;
815
+ --frg-layout-itemRatio: auto;
816
816
  display: flex;
817
817
  justify-content: flex-start;
818
818
  align-items: stretch;
819
819
  }
820
- .lx-layout-pack > * {
820
+ .frg-layout-pack > * {
821
821
  flex-basis: 0;
822
822
  flex-grow: 1;
823
823
  flex-shrink: 1;
824
824
  }
825
- .lx-layout-pack.lx-layout-direction-x {
825
+ .frg-layout-pack.frg-layout-direction-x {
826
826
  flex-direction: row;
827
827
  }
828
- .lx-layout-pack.lx-layout-direction-x > * {
828
+ .frg-layout-pack.frg-layout-direction-x > * {
829
829
  min-width: 0;
830
830
  min-height: 100%;
831
831
  max-height: 100%;
832
832
  }
833
- .lx-layout-pack.lx-layout-direction-y {
833
+ .frg-layout-pack.frg-layout-direction-y {
834
834
  flex-direction: column;
835
835
  }
836
- .lx-layout-pack.lx-layout-direction-y > * {
836
+ .frg-layout-pack.frg-layout-direction-y > * {
837
837
  min-height: 0;
838
838
  min-width: 100%;
839
839
  max-width: 100%;
840
840
  }
841
- .lx-layout-pack.lx-layout-gapX {
842
- column-gap: var(--lx-layout-gapX);
841
+ .frg-layout-pack.frg-layout-gapX {
842
+ column-gap: var(--frg-layout-gapX);
843
843
  }
844
- .lx-layout-pack.lx-layout-gapY {
845
- row-gap: var(--lx-layout-gapY);
844
+ .frg-layout-pack.frg-layout-gapY {
845
+ row-gap: var(--frg-layout-gapY);
846
846
  }
847
847
 
848
- .lx-layout-balance {
849
- --lx-layout-gapX: 0px;
850
- --lx-layout-gapY: 0px;
851
- --lx-layout-itemSizeX: auto;
852
- --lx-layout-itemSizeY: auto;
853
- --lx-layout-itemRatio: auto;
848
+ .frg-layout-balance {
849
+ --frg-layout-gapX: 0px;
850
+ --frg-layout-gapY: 0px;
851
+ --frg-layout-itemSizeX: auto;
852
+ --frg-layout-itemSizeY: auto;
853
+ --frg-layout-itemRatio: auto;
854
854
  display: grid;
855
855
  }
856
- .lx-layout-balance.lx-layout-direction-x {
856
+ .frg-layout-balance.frg-layout-direction-x {
857
857
  grid-auto-flow: column;
858
858
  grid-auto-columns: max-content;
859
859
  }
860
- .lx-layout-balance.lx-layout-direction-x.lx-layout-adjustX-grow, .lx-layout-balance.lx-layout-direction-x.lx-layout-adjustX-fit {
860
+ .frg-layout-balance.frg-layout-direction-x.frg-layout-adjustX-grow, .frg-layout-balance.frg-layout-direction-x.frg-layout-adjustX-fit {
861
861
  grid-auto-columns: auto;
862
862
  }
863
- .lx-layout-balance.lx-layout-direction-x.lx-layout-adjustX-shrink {
863
+ .frg-layout-balance.frg-layout-direction-x.frg-layout-adjustX-shrink {
864
864
  grid-auto-columns: minmax(0, max-content);
865
865
  }
866
- .lx-layout-balance.lx-layout-direction-x.lx-layout-itemSizeX {
866
+ .frg-layout-balance.frg-layout-direction-x.frg-layout-itemSizeX {
867
867
  grid-auto-columns: auto;
868
868
  }
869
- .lx-layout-balance.lx-layout-direction-y {
869
+ .frg-layout-balance.frg-layout-direction-y {
870
870
  grid-auto-flow: row;
871
871
  grid-auto-rows: max-content;
872
872
  }
873
- .lx-layout-balance.lx-layout-direction-y.lx-layout-adjustY-grow, .lx-layout-balance.lx-layout-direction-y.lx-layout-adjustY-fit {
873
+ .frg-layout-balance.frg-layout-direction-y.frg-layout-adjustY-grow, .frg-layout-balance.frg-layout-direction-y.frg-layout-adjustY-fit {
874
874
  grid-auto-rows: auto;
875
875
  }
876
- .lx-layout-balance.lx-layout-direction-y.lx-layout-adjustY-shrink {
876
+ .frg-layout-balance.frg-layout-direction-y.frg-layout-adjustY-shrink {
877
877
  grid-auto-rows: minmax(0, max-content);
878
878
  }
879
- .lx-layout-balance.lx-layout-direction-y.lx-layout-itemSizeY {
879
+ .frg-layout-balance.frg-layout-direction-y.frg-layout-itemSizeY {
880
880
  grid-auto-rows: auto;
881
881
  }
882
- .lx-layout-balance.lx-layout-alignX-left {
882
+ .frg-layout-balance.frg-layout-alignX-left {
883
883
  justify-items: flex-start;
884
884
  }
885
- .lx-layout-balance.lx-layout-alignX-center {
885
+ .frg-layout-balance.frg-layout-alignX-center {
886
886
  justify-items: center;
887
887
  }
888
- .lx-layout-balance.lx-layout-alignX-right {
888
+ .frg-layout-balance.frg-layout-alignX-right {
889
889
  justify-items: flex-end;
890
890
  }
891
- .lx-layout-balance.lx-layout-alignX-spaceBetween {
891
+ .frg-layout-balance.frg-layout-alignX-spaceBetween {
892
892
  justify-content: space-between;
893
893
  }
894
- .lx-layout-balance.lx-layout-alignX-spaceAround {
894
+ .frg-layout-balance.frg-layout-alignX-spaceAround {
895
895
  justify-content: space-around;
896
896
  }
897
- .lx-layout-balance.lx-layout-alignX-spaceEvenly {
897
+ .frg-layout-balance.frg-layout-alignX-spaceEvenly {
898
898
  justify-content: space-evenly;
899
899
  }
900
- .lx-layout-balance.lx-layout-alignY-top {
900
+ .frg-layout-balance.frg-layout-alignY-top {
901
901
  align-items: flex-start;
902
902
  }
903
- .lx-layout-balance.lx-layout-alignY-middle {
903
+ .frg-layout-balance.frg-layout-alignY-middle {
904
904
  align-items: center;
905
905
  }
906
- .lx-layout-balance.lx-layout-alignY-bottom {
906
+ .frg-layout-balance.frg-layout-alignY-bottom {
907
907
  align-items: flex-end;
908
908
  }
909
- .lx-layout-balance.lx-layout-alignY-spaceBetween {
909
+ .frg-layout-balance.frg-layout-alignY-spaceBetween {
910
910
  align-content: space-between;
911
911
  }
912
- .lx-layout-balance.lx-layout-alignY-spaceAround {
912
+ .frg-layout-balance.frg-layout-alignY-spaceAround {
913
913
  align-content: space-around;
914
914
  }
915
- .lx-layout-balance.lx-layout-alignY-spaceEvenly {
915
+ .frg-layout-balance.frg-layout-alignY-spaceEvenly {
916
916
  align-content: space-evenly;
917
917
  }
918
- .lx-layout-balance > * {
918
+ .frg-layout-balance > * {
919
919
  min-width: 0;
920
920
  min-height: 0;
921
921
  }
922
- .lx-layout-balance.lx-layout-itemSizeX > * {
923
- width: var(--lx-layout-itemSizeX);
922
+ .frg-layout-balance.frg-layout-itemSizeX > * {
923
+ width: var(--frg-layout-itemSizeX);
924
924
  }
925
- .lx-layout-balance.lx-layout-adjustX-fit {
925
+ .frg-layout-balance.frg-layout-adjustX-fit {
926
926
  justify-items: stretch;
927
927
  }
928
- .lx-layout-balance.lx-layout-adjustX-fit > * {
928
+ .frg-layout-balance.frg-layout-adjustX-fit > * {
929
929
  width: auto;
930
930
  }
931
- .lx-layout-balance.lx-layout-adjustX-grow > *, .lx-layout-balance.lx-layout-adjustX-shrink > * {
931
+ .frg-layout-balance.frg-layout-adjustX-grow > *, .frg-layout-balance.frg-layout-adjustX-shrink > * {
932
932
  width: 100%;
933
933
  }
934
- .lx-layout-balance.lx-layout-adjustX-grow > * {
934
+ .frg-layout-balance.frg-layout-adjustX-grow > * {
935
935
  min-width: max-content;
936
936
  }
937
- .lx-layout-balance.lx-layout-adjustX-grow.lx-layout-itemSizeX > * {
938
- min-width: var(--lx-layout-itemSizeX);
937
+ .frg-layout-balance.frg-layout-adjustX-grow.frg-layout-itemSizeX > * {
938
+ min-width: var(--frg-layout-itemSizeX);
939
939
  }
940
- .lx-layout-balance.lx-layout-adjustX-shrink > * {
940
+ .frg-layout-balance.frg-layout-adjustX-shrink > * {
941
941
  max-width: max-content;
942
942
  }
943
- .lx-layout-balance.lx-layout-adjustX-shrink.lx-layout-itemSizeX > * {
944
- max-width: var(--lx-layout-itemSizeX);
943
+ .frg-layout-balance.frg-layout-adjustX-shrink.frg-layout-itemSizeX > * {
944
+ max-width: var(--frg-layout-itemSizeX);
945
945
  }
946
- .lx-layout-balance.lx-layout-itemSizeY > * {
947
- height: var(--lx-layout-itemSizeY);
946
+ .frg-layout-balance.frg-layout-itemSizeY > * {
947
+ height: var(--frg-layout-itemSizeY);
948
948
  }
949
- .lx-layout-balance.lx-layout-adjustY-fit {
949
+ .frg-layout-balance.frg-layout-adjustY-fit {
950
950
  align-items: stretch;
951
951
  }
952
- .lx-layout-balance.lx-layout-adjustY-fit > * {
952
+ .frg-layout-balance.frg-layout-adjustY-fit > * {
953
953
  height: auto;
954
954
  }
955
- .lx-layout-balance.lx-layout-adjustY-grow > *, .lx-layout-balance.lx-layout-adjustY-shrink > * {
955
+ .frg-layout-balance.frg-layout-adjustY-grow > *, .frg-layout-balance.frg-layout-adjustY-shrink > * {
956
956
  height: 100%;
957
957
  }
958
- .lx-layout-balance.lx-layout-adjustY-grow:not(.lx-layout-itemSizeY) > * {
958
+ .frg-layout-balance.frg-layout-adjustY-grow:not(.frg-layout-itemSizeY) > * {
959
959
  min-height: max-content;
960
960
  }
961
- .lx-layout-balance.lx-layout-adjustY-grow.lx-layout-itemSizeY > * {
962
- min-height: var(--lx-layout-itemSizeY);
961
+ .frg-layout-balance.frg-layout-adjustY-grow.frg-layout-itemSizeY > * {
962
+ min-height: var(--frg-layout-itemSizeY);
963
963
  }
964
- .lx-layout-balance.lx-layout-adjustY-shrink:not(.lx-layout-itemSizeY) > * {
964
+ .frg-layout-balance.frg-layout-adjustY-shrink:not(.frg-layout-itemSizeY) > * {
965
965
  max-height: max-content;
966
966
  }
967
- .lx-layout-balance.lx-layout-adjustY-shrink.lx-layout-itemSizeY > * {
968
- max-height: var(--lx-layout-itemSizeY);
967
+ .frg-layout-balance.frg-layout-adjustY-shrink.frg-layout-itemSizeY > * {
968
+ max-height: var(--frg-layout-itemSizeY);
969
969
  }
970
- .lx-layout-balance.lx-layout-itemRatio > * {
971
- aspect-ratio: var(--lx-layout-itemRatio);
970
+ .frg-layout-balance.frg-layout-itemRatio > * {
971
+ aspect-ratio: var(--frg-layout-itemRatio);
972
972
  }
973
- .lx-layout-balance.lx-layout-gapX {
974
- column-gap: var(--lx-layout-gapX);
973
+ .frg-layout-balance.frg-layout-gapX {
974
+ column-gap: var(--frg-layout-gapX);
975
975
  }
976
- .lx-layout-balance.lx-layout-gapY {
977
- row-gap: var(--lx-layout-gapY);
976
+ .frg-layout-balance.frg-layout-gapY {
977
+ row-gap: var(--frg-layout-gapY);
978
978
  }
979
979
 
980
- .lx-layout-layer {
981
- --lx-layout-itemSizeX: auto;
982
- --lx-layout-itemSizeY: auto;
983
- --lx-layout-itemRatio: auto;
980
+ .frg-layout-layer {
981
+ --frg-layout-itemSizeX: auto;
982
+ --frg-layout-itemSizeY: auto;
983
+ --frg-layout-itemRatio: auto;
984
984
  display: grid;
985
985
  }
986
- .lx-layout-layer > * {
986
+ .frg-layout-layer > * {
987
987
  grid-area: 1/1;
988
988
  }
989
- .lx-layout-layer.lx-layout-alignX-left > * {
989
+ .frg-layout-layer.frg-layout-alignX-left > * {
990
990
  justify-self: start;
991
991
  }
992
- .lx-layout-layer.lx-layout-alignX-center > * {
992
+ .frg-layout-layer.frg-layout-alignX-center > * {
993
993
  justify-self: center;
994
994
  }
995
- .lx-layout-layer.lx-layout-alignX-right > * {
995
+ .frg-layout-layer.frg-layout-alignX-right > * {
996
996
  justify-self: end;
997
997
  }
998
- .lx-layout-layer.lx-layout-alignY-top > * {
998
+ .frg-layout-layer.frg-layout-alignY-top > * {
999
999
  align-self: start;
1000
1000
  }
1001
- .lx-layout-layer.lx-layout-alignY-middle > * {
1001
+ .frg-layout-layer.frg-layout-alignY-middle > * {
1002
1002
  align-self: center;
1003
1003
  }
1004
- .lx-layout-layer.lx-layout-alignY-bottom > * {
1004
+ .frg-layout-layer.frg-layout-alignY-bottom > * {
1005
1005
  align-self: end;
1006
1006
  }
1007
- .lx-layout-layer.lx-layout-itemSizeX > * {
1008
- width: var(--lx-layout-itemSizeX);
1007
+ .frg-layout-layer.frg-layout-itemSizeX > * {
1008
+ width: var(--frg-layout-itemSizeX);
1009
1009
  }
1010
- .lx-layout-layer.lx-layout-itemSizeY > * {
1011
- height: var(--lx-layout-itemSizeY);
1010
+ .frg-layout-layer.frg-layout-itemSizeY > * {
1011
+ height: var(--frg-layout-itemSizeY);
1012
1012
  }
1013
- .lx-layout-layer.lx-layout-adjustX-fit > *, .lx-layout-layer.lx-layout-adjustX-grow > * {
1013
+ .frg-layout-layer.frg-layout-adjustX-fit > *, .frg-layout-layer.frg-layout-adjustX-grow > * {
1014
1014
  justify-self: stretch;
1015
1015
  width: auto;
1016
1016
  }
1017
- .lx-layout-layer.lx-layout-adjustX-grow > * {
1018
- min-width: var(--lx-layout-itemSizeX);
1017
+ .frg-layout-layer.frg-layout-adjustX-grow > * {
1018
+ min-width: var(--frg-layout-itemSizeX);
1019
1019
  }
1020
- .lx-layout-layer.lx-layout-adjustX-shrink > * {
1021
- width: clamp(0px, 100%, var(--lx-layout-itemSizeX));
1020
+ .frg-layout-layer.frg-layout-adjustX-shrink > * {
1021
+ width: clamp(0px, 100%, var(--frg-layout-itemSizeX));
1022
1022
  }
1023
- .lx-layout-layer.lx-layout-adjustY-fit > *, .lx-layout-layer.lx-layout-adjustY-grow > * {
1023
+ .frg-layout-layer.frg-layout-adjustY-fit > *, .frg-layout-layer.frg-layout-adjustY-grow > * {
1024
1024
  align-self: stretch;
1025
1025
  height: auto;
1026
1026
  }
1027
- .lx-layout-layer.lx-layout-adjustY-grow > * {
1028
- min-height: var(--lx-layout-itemSizeY);
1027
+ .frg-layout-layer.frg-layout-adjustY-grow > * {
1028
+ min-height: var(--frg-layout-itemSizeY);
1029
1029
  }
1030
- .lx-layout-layer.lx-layout-adjustY-shrink > * {
1031
- height: clamp(0px, 100%, var(--lx-layout-itemSizeY));
1030
+ .frg-layout-layer.frg-layout-adjustY-shrink > * {
1031
+ height: clamp(0px, 100%, var(--frg-layout-itemSizeY));
1032
1032
  }
1033
- .lx-layout-layer.lx-layout-itemRatio > * {
1034
- aspect-ratio: var(--lx-layout-itemRatio);
1033
+ .frg-layout-layer.frg-layout-itemRatio > * {
1034
+ aspect-ratio: var(--frg-layout-itemRatio);
1035
1035
  }
1036
1036
 
1037
- .lx-layout-pin {
1038
- --lx-layout-itemSizeX: auto;
1039
- --lx-layout-itemSizeY: auto;
1040
- --lx-layout-itemRatio: auto;
1037
+ .frg-layout-pin {
1038
+ --frg-layout-itemSizeX: auto;
1039
+ --frg-layout-itemSizeY: auto;
1040
+ --frg-layout-itemRatio: auto;
1041
1041
  display: block;
1042
1042
  position: relative;
1043
1043
  }
1044
- .lx-layout-pin > * {
1044
+ .frg-layout-pin > * {
1045
1045
  position: absolute;
1046
1046
  }
1047
- .lx-layout-pin.lx-layout-itemSizeX > * {
1048
- width: var(--lx-layout-itemSizeX);
1047
+ .frg-layout-pin.frg-layout-itemSizeX > * {
1048
+ width: var(--frg-layout-itemSizeX);
1049
1049
  }
1050
- .lx-layout-pin.lx-layout-itemSizeY > * {
1051
- height: var(--lx-layout-itemSizeY);
1050
+ .frg-layout-pin.frg-layout-itemSizeY > * {
1051
+ height: var(--frg-layout-itemSizeY);
1052
1052
  }
1053
- .lx-layout-pin.lx-layout-itemRatio > * {
1054
- aspect-ratio: var(--lx-layout-itemRatio);
1053
+ .frg-layout-pin.frg-layout-itemRatio > * {
1054
+ aspect-ratio: var(--frg-layout-itemRatio);
1055
1055
  }