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