@linzjs/lui 21.24.1 → 21.24.2

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.
@@ -140,9 +140,12 @@
140
140
  // ---------------------- LUI App footer small --------------------------------
141
141
  // -----------------------------------------------------------------------------
142
142
 
143
- $AppFooterSmlContainerBreakPointLg: 1100px;
144
- $AppFooterSmlContainerBreakPointMd: 860px;
143
+ $AppFooterSmlContainerBreakPointLg: 1200px;
144
+ $AppFooterSmlContainerBreakPointMd: 900px;
145
+ $AppFooterSmlContainerBreakPointSml: 750px;
145
146
  $FooterLogoHeight: toRem(56px);
147
+ $FooterLogoWidthPlusPadding: toRem(211px + 40px);
148
+ $FooterCopyWriteForceLineBreak: toRem(250px);
146
149
 
147
150
  .luiAppFooter-sm {
148
151
  container-type: inline-size;
@@ -156,8 +159,8 @@ $FooterLogoHeight: toRem(56px);
156
159
  grid-template-columns: 1fr;
157
160
  align-items: center;
158
161
  padding: lui.$unit-md;
159
- @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointLg}) {
160
- grid-template-columns: 1fr 240px;
162
+ @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointMd}) {
163
+ grid-template-columns: 1fr $FooterLogoWidthPlusPadding;
161
164
  padding: 0 lui.$unit-md;
162
165
  }
163
166
  }
@@ -167,18 +170,28 @@ $FooterLogoHeight: toRem(56px);
167
170
  grid-template-columns: 1fr;
168
171
  column-gap: lui.$unit-md;
169
172
  row-gap: lui.$unit-sm;
173
+ // Stack the links on top of the copywright text
174
+ grid-template-columns: 1fr;
175
+ grid-template-rows: repeat(2, minmax(32px, max-content));
170
176
  @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointMd}) {
171
- grid-template-columns: 1fr 350px;
177
+ row-gap: toRem(4px);
172
178
  }
173
179
  @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointLg}) {
174
- grid-template-columns: minmax(min-content, max-content) 350px;
180
+ grid-template-columns: minmax(32px, max-content) 1fr;
181
+ grid-template-rows: 1fr;
175
182
  }
176
183
  }
177
184
 
178
185
  .luiAppFooter-linksCell {
186
+ grid-row-start: 1;
187
+ grid-row-end: 2;
179
188
  display: flex;
180
189
  column-gap: lui.$unit-md;
181
190
  flex-wrap: wrap;
191
+ align-items: center;
192
+ @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointMd}) {
193
+ align-items: end;
194
+ }
182
195
  a {
183
196
  color: lui.$snow;
184
197
  font-size: toRem(14px);
@@ -198,6 +211,23 @@ $FooterLogoHeight: toRem(56px);
198
211
  line-height: toRem(24px);
199
212
  opacity: 0.8;
200
213
  margin: 0;
214
+ align-items: end;
215
+ @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointSml}) {
216
+ grid-row-start: -2;
217
+ grid-row-end: -1;
218
+ }
219
+ @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointMd}) {
220
+ align-self: start;
221
+ }
222
+ @container appFooterSml (inline-size >= #{$AppFooterSmlContainerBreakPointLg}) {
223
+ grid-row-start: 1;
224
+ grid-row-end: -1;
225
+ }
226
+
227
+ }
228
+
229
+ .luiAppFooter-linzName {
230
+ white-space: nowrap;
201
231
  }
202
232
 
203
233
  .luiAppFooter-nzGovtLogo {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "21.24.1",
2
+ "version": "21.24.2",
3
3
  "license": "MIT",
4
4
  "repository": {
5
5
  "type": "git",