@microsoft/atlas-css 3.57.1 → 3.57.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.
Files changed (4) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.css.map +1 -1
  3. package/package.json +1 -1
  4. package/src/components/layout.scss +64 -38
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/atlas-css",
3
- "version": "3.57.1",
3
+ "version": "3.57.2",
4
4
  "description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
package/src/components/layout.scss CHANGED
@@ -104,13 +104,15 @@ $default-flyout-width-widescreen: 480px;
104
104
  .layout,
105
105
  .layout.layout-single {
106
106
  .layout-body {
107
- grid-template: auto auto auto 1fr auto auto / minmax(0, 1fr);
107
+ grid-template: minmax(auto, max-content) auto auto 1fr auto auto / minmax(0, 1fr);
108
108
  grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
109
109
  }
110
110
 
111
111
  &.layout-flyout-active .layout-body {
112
112
  @include desktop {
113
- grid-template: auto auto auto 1fr auto auto / minmax(0, 1fr) var(#{$layout-flyout-width-name});
113
+ grid-template: minmax(auto, max-content) auto auto 1fr auto auto / minmax(0, 1fr) var(
114
+ #{$layout-flyout-width-name}
115
+ );
114
116
  grid-template-areas: 'header header' 'hero flyout' 'menu flyout' 'main flyout' 'aside flyout' 'footer footer';
115
117
  }
116
118
  }
@@ -118,14 +120,13 @@ $default-flyout-width-widescreen: 480px;
118
120
 
119
121
  .layout.layout-holy-grail {
120
122
  .layout-body {
121
- grid-template: auto auto auto 1fr auto auto / minmax(0, 1fr);
123
+ grid-template: minmax(auto, max-content) auto auto 1fr auto auto / minmax(0, 1fr);
122
124
  grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
123
125
 
124
126
  @include tablet {
125
- grid-template: auto auto var(--atlas-contained-height) auto auto / minmax(0, 1fr) minmax(
126
- 0,
127
- 2fr
128
- );
127
+ grid-template:
128
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto auto / minmax(0, 1fr)
129
+ minmax(0, 2fr);
129
130
  grid-template-areas:
130
131
  'header header'
131
132
  'hero hero'
@@ -135,10 +136,12 @@ $default-flyout-width-widescreen: 480px;
135
136
  }
136
137
 
137
138
  @include desktop {
138
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(
139
+ grid-template:
140
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
139
141
  0,
140
- 1fr
141
- );
142
+ 2fr
143
+ )
144
+ minmax(0, 1fr);
142
145
  grid-template-areas:
143
146
  'header header header'
144
147
  'hero hero hero'
@@ -147,7 +150,7 @@ $default-flyout-width-widescreen: 480px;
147
150
  }
148
151
 
149
152
  @include widescreen {
150
- grid-template: auto auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
153
+ grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
151
154
  grid-template-areas:
152
155
  'header header header header header'
153
156
  'hero hero hero hero hero'
@@ -187,11 +190,13 @@ $default-flyout-width-widescreen: 480px;
187
190
  }
188
191
 
189
192
  .layout-body {
190
- grid-template: auto auto auto 1fr auto / minmax(0, 1fr);
193
+ grid-template: minmax(auto, max-content) auto auto 1fr auto / minmax(0, 1fr);
191
194
  grid-template-areas: 'header' 'hero' 'menu' 'main' 'footer';
192
195
 
193
196
  @include tablet {
194
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr);
197
+ grid-template:
198
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
199
+ minmax(0, 2fr);
195
200
  grid-template-areas:
196
201
  'header header'
197
202
  'hero hero'
@@ -200,7 +205,9 @@ $default-flyout-width-widescreen: 480px;
200
205
  }
201
206
 
202
207
  @include desktop {
203
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 3fr);
208
+ grid-template:
209
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
210
+ minmax(0, 3fr);
204
211
  grid-template-areas:
205
212
  'header header'
206
213
  'hero hero'
@@ -209,7 +216,7 @@ $default-flyout-width-widescreen: 480px;
209
216
  }
210
217
 
211
218
  @include widescreen {
212
- grid-template: auto auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
219
+ grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
213
220
  grid-template-areas:
214
221
  'header header header header'
215
222
  'hero hero hero hero'
@@ -220,9 +227,12 @@ $default-flyout-width-widescreen: 480px;
220
227
 
221
228
  &.layout-flyout-active .layout-body {
222
229
  @include desktop {
223
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 3fr) var(
224
- #{$layout-flyout-width-name}
225
- );
230
+ grid-template:
231
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
232
+ 0,
233
+ 3fr
234
+ )
235
+ var(#{$layout-flyout-width-name});
226
236
  grid-template-areas:
227
237
  'header header header'
228
238
  'hero hero flyout'
@@ -230,9 +240,12 @@ $default-flyout-width-widescreen: 480px;
230
240
  'footer footer footer';
231
241
  }
232
242
  @include widescreen {
233
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 3fr) var(
234
- #{$layout-flyout-width-name}
235
- );
243
+ grid-template:
244
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
245
+ 0,
246
+ 3fr
247
+ )
248
+ var(#{$layout-flyout-width-name});
236
249
  grid-template-areas:
237
250
  'header header header'
238
251
  'hero hero flyout'
@@ -248,11 +261,13 @@ $default-flyout-width-widescreen: 480px;
248
261
  }
249
262
 
250
263
  .layout-body {
251
- grid-template: auto auto auto 1fr auto / minmax(0, 1fr);
264
+ grid-template: minmax(auto, max-content) auto auto 1fr auto / minmax(0, 1fr);
252
265
  grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
253
266
 
254
267
  @include tablet {
255
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 2fr) minmax(0, 1fr);
268
+ grid-template:
269
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 2fr)
270
+ minmax(0, 1fr);
256
271
  grid-template-areas:
257
272
  'header header'
258
273
  'hero hero'
@@ -261,7 +276,9 @@ $default-flyout-width-widescreen: 480px;
261
276
  }
262
277
 
263
278
  @include desktop {
264
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(0, 1fr);
279
+ grid-template:
280
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr)
281
+ minmax(0, 1fr);
265
282
  grid-template-areas:
266
283
  'header header'
267
284
  'hero hero'
@@ -270,7 +287,7 @@ $default-flyout-width-widescreen: 480px;
270
287
  }
271
288
 
272
289
  @include widescreen {
273
- grid-template: auto auto var(--atlas-contained-height) auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
290
+ grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
274
291
  grid-template-areas:
275
292
  'header header header header'
276
293
  'hero hero hero hero'
@@ -281,9 +298,12 @@ $default-flyout-width-widescreen: 480px;
281
298
 
282
299
  &.layout-flyout-active .layout-body {
283
300
  @include desktop {
284
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(0, 1fr) var(
285
- #{$layout-flyout-width-name}
286
- );
301
+ grid-template:
302
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(
303
+ 0,
304
+ 1fr
305
+ )
306
+ var(#{$layout-flyout-width-name});
287
307
  grid-template-areas:
288
308
  'header header header'
289
309
  'hero hero flyout'
@@ -292,9 +312,12 @@ $default-flyout-width-widescreen: 480px;
292
312
  }
293
313
 
294
314
  @include widescreen {
295
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(0, 1fr) var(
296
- #{$layout-flyout-width-name}
297
- );
315
+ grid-template:
316
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(
317
+ 0,
318
+ 1fr
319
+ )
320
+ var(#{$layout-flyout-width-name});
298
321
  grid-template-areas:
299
322
  'header header header'
300
323
  'hero hero flyout'
@@ -310,12 +333,14 @@ $default-flyout-width-widescreen: 480px;
310
333
  }
311
334
 
312
335
  .layout-body {
313
- grid-template: auto auto auto 1fr auto / minmax(0, 1fr);
336
+ grid-template: minmax(auto, max-content) auto auto 1fr auto / minmax(0, 1fr);
314
337
  grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
315
338
 
316
339
  // note that to make some extra room this layout is not constrained by the widescreen breakpoint like others
317
340
  @include tablet {
318
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 1fr);
341
+ grid-template:
342
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
343
+ minmax(0, 1fr);
319
344
  grid-template-areas:
320
345
  'header header'
321
346
  'hero hero'
@@ -326,9 +351,12 @@ $default-flyout-width-widescreen: 480px;
326
351
 
327
352
  &.layout-flyout-active .layout-body {
328
353
  @include desktop {
329
- grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 1fr) var(
330
- #{$layout-flyout-width-name}
331
- );
354
+ grid-template:
355
+ minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
356
+ 0,
357
+ 1fr
358
+ )
359
+ var(#{$layout-flyout-width-name});
332
360
  grid-template-areas:
333
361
  'header header header'
334
362
  'hero hero flyout'
@@ -363,7 +391,6 @@ $default-flyout-width-widescreen: 480px;
363
391
  &.layout-twin,
364
392
  &.layout-sidecar-left,
365
393
  &.layout-sidecar-right {
366
- // 👇 minus a pixel at the end to account for percentage points and rounding
367
394
  --atlas-contained-height: calc(
368
395
  var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 1px
369
396
  );
@@ -389,7 +416,6 @@ $default-flyout-width-widescreen: 480px;
389
416
  // Because the holy grail has two rows (containing menu main, menu aside) on tablet, we cannot apply height constraints at that size
390
417
  @include desktop {
391
418
  .layout.layout-constrained.layout-holy-grail {
392
- // 👇 minus a pixel at the end to account for percentage points and rounding
393
419
  --atlas-contained-height: calc(
394
420
  var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 1px
395
421
  );