@microsoft/atlas-css 3.56.0 → 3.57.1

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 (6) 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 +14 -4
  6. package/src/components/site-header.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/atlas-css",
3
- "version": "3.56.0",
3
+ "version": "3.57.1",
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
@@ -40,6 +40,16 @@ $default-flyout-width-widescreen: 480px;
40
40
  margin-inline: var(#{$layout-gap-scalable-custom-property-name}) !important;
41
41
  }
42
42
 
43
+ @include tablet {
44
+ .layout-padding-tablet {
45
+ padding-inline: var(#{$layout-gap-custom-property-name}) !important;
46
+ }
47
+
48
+ .layout-margin-tablet {
49
+ margin-inline: var(#{$layout-gap-scalable-custom-property-name}) !important;
50
+ }
51
+ }
52
+
43
53
  .layout-body {
44
54
  display: grid;
45
55
  width: 100%;
@@ -353,9 +363,9 @@ $default-flyout-width-widescreen: 480px;
353
363
  &.layout-twin,
354
364
  &.layout-sidecar-left,
355
365
  &.layout-sidecar-right {
356
- // 👇 minus two pixel at the end to account for percentage points and rounding, one px generally suffices though
366
+ // 👇 minus a pixel at the end to account for percentage points and rounding
357
367
  --atlas-contained-height: calc(
358
- var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 2px
368
+ var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 1px
359
369
  );
360
370
  }
361
371
 
@@ -379,9 +389,9 @@ $default-flyout-width-widescreen: 480px;
379
389
  // Because the holy grail has two rows (containing menu main, menu aside) on tablet, we cannot apply height constraints at that size
380
390
  @include desktop {
381
391
  .layout.layout-constrained.layout-holy-grail {
382
- // 👇 minus two pixel at the end to account for percentage points and rounding, one px generally suffices though
392
+ // 👇 minus a pixel at the end to account for percentage points and rounding
383
393
  --atlas-contained-height: calc(
384
- var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 2px
394
+ var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 1px
385
395
  );
386
396
 
387
397
  .layout-body-main,
package/src/components/site-header.scss CHANGED
@@ -177,7 +177,7 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
177
177
  background-color: $site-header-panel-background-color;
178
178
  text-wrap: wrap;
179
179
  box-shadow: $site-header-panel-shadow;
180
- z-index: $zindex-dropdown;
180
+ z-index: $zindex-popover;
181
181
  inset-inline-start: 0;
182
182
  inset-block-start: calc($site-header-height - 1px);
183
183
  border-block-start: $site-header-panel-border;