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