@microsoft/atlas-css 3.51.0 → 3.52.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 (5) hide show
  1. package/dist/class-names.json +1 -1
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/package.json +1 -1
  5. package/src/components/layout.scss +75 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/atlas-css",
3
- "version": "3.51.0",
3
+ "version": "3.52.0",
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
@@ -4,6 +4,13 @@ $quarter-widescreen: math.div($breakpoint-widescreen, 4);
4
4
  $half-widescreen: math.div($breakpoint-widescreen, 2);
5
5
  $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
6
6
 
7
+ :root {
8
+ --window-inner-height: 100vh; // to be overwritten by JS
9
+ --atlas-header-height: 0px; // to be overwritten by JS
10
+ --atlas-footer-height: 0px; // to be overwritten by JS
11
+ --atlas-contained-height: 1fr; // default value, does not contain the height
12
+ }
13
+
7
14
  .layout {
8
15
  display: flex;
9
16
  flex-direction: column;
@@ -82,7 +89,10 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
82
89
  grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
83
90
 
84
91
  @include tablet {
85
- grid-template: auto auto 1fr auto auto / minmax(0, 1fr) minmax(0, 2fr);
92
+ grid-template: auto auto var(--atlas-contained-height) auto auto / minmax(0, 1fr) minmax(
93
+ 0,
94
+ 2fr
95
+ );
86
96
  grid-template-areas:
87
97
  'header header'
88
98
  'hero hero'
@@ -92,7 +102,10 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
92
102
  }
93
103
 
94
104
  @include desktop {
95
- grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
105
+ grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(
106
+ 0,
107
+ 1fr
108
+ );
96
109
  grid-template-areas:
97
110
  'header header header'
98
111
  'hero hero hero'
@@ -101,7 +114,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
101
114
  }
102
115
 
103
116
  @include widescreen {
104
- grid-template: auto auto 1fr auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
117
+ grid-template: auto auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
105
118
  grid-template-areas:
106
119
  'header header header header header'
107
120
  'hero hero hero hero hero'
@@ -121,7 +134,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
121
134
  grid-template-areas: 'header' 'hero' 'menu' 'main' 'footer';
122
135
 
123
136
  @include tablet {
124
- grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 2fr);
137
+ grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr);
125
138
  grid-template-areas:
126
139
  'header header'
127
140
  'hero hero'
@@ -130,7 +143,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
130
143
  }
131
144
 
132
145
  @include desktop {
133
- grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 3fr);
146
+ grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 3fr);
134
147
  grid-template-areas:
135
148
  'header header'
136
149
  'hero hero'
@@ -139,7 +152,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
139
152
  }
140
153
 
141
154
  @include widescreen {
142
- grid-template: auto auto 1fr auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
155
+ grid-template: auto auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
143
156
  grid-template-areas:
144
157
  'header header header header'
145
158
  'hero hero hero hero'
@@ -159,7 +172,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
159
172
  grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
160
173
 
161
174
  @include tablet {
162
- grid-template: auto auto 1fr auto / minmax(0, 2fr) minmax(0, 1fr);
175
+ grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 2fr) minmax(0, 1fr);
163
176
  grid-template-areas:
164
177
  'header header'
165
178
  'hero hero'
@@ -168,7 +181,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
168
181
  }
169
182
 
170
183
  @include desktop {
171
- grid-template: auto auto 1fr auto / minmax(0, 3fr) minmax(0, 1fr);
184
+ grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(0, 1fr);
172
185
  grid-template-areas:
173
186
  'header header'
174
187
  'hero hero'
@@ -177,7 +190,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
177
190
  }
178
191
 
179
192
  @include widescreen {
180
- grid-template: auto auto 1fr auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
193
+ grid-template: auto auto var(--atlas-contained-height) auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
181
194
  grid-template-areas:
182
195
  'header header header header'
183
196
  'hero hero hero hero'
@@ -198,7 +211,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
198
211
 
199
212
  // note that to make some extra room this layout is not constrained by the widescreen breakpoint like others
200
213
  @include tablet {
201
- grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 1fr);
214
+ grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 1fr);
202
215
  grid-template-areas:
203
216
  'header header'
204
217
  'hero hero'
@@ -207,3 +220,55 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
207
220
  }
208
221
  }
209
222
  }
223
+
224
+ @mixin constrained-layout-child {
225
+ position: sticky;
226
+ inset-block-start: 0;
227
+ overflow-x: hidden;
228
+ overflow-y: auto;
229
+ -webkit-overflow-scrolling: touch;
230
+ }
231
+
232
+ @include tablet {
233
+ .layout.layout-constrained {
234
+ &.layout-twin,
235
+ &.layout-sidecar-left,
236
+ &.layout-sidecar-right {
237
+ // 👇 minus two pixel at the end to account for percentage points and rounding, one px generally suffices though
238
+ --atlas-contained-height: calc(
239
+ var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 2px
240
+ );
241
+ }
242
+
243
+ &.layout-twin,
244
+ &.layout-sidecar-right {
245
+ .layout-body-main,
246
+ .layout-body-aside {
247
+ @include constrained-layout-child;
248
+ }
249
+ }
250
+
251
+ &.layout-sidecar-left {
252
+ .layout-body-menu,
253
+ .layout-body-main {
254
+ @include constrained-layout-child;
255
+ }
256
+ }
257
+ }
258
+ }
259
+
260
+ // Because the holy grail has two rows (containing menu main, menu aside) on tablet, we cannot apply height constraints at that size
261
+ @include desktop {
262
+ .layout.layout-constrained.layout-holy-grail {
263
+ // 👇 minus two pixel at the end to account for percentage points and rounding, one px generally suffices though
264
+ --atlas-contained-height: calc(
265
+ var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 2px
266
+ );
267
+
268
+ .layout-body-main,
269
+ .layout-body-menu,
270
+ .layout-body-aside {
271
+ @include constrained-layout-child;
272
+ }
273
+ }
274
+ }