Make sure menu items have the same height, add padding block

Amsterdam · Dec 9, 2024 · 3774a33 · 3774a33
1 parent c915f14
commit 3774a33
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
@@ -81,6 +81,7 @@
   font-weight: var(--ams-header-menu-item-font-weight);
   line-height: var(--ams-header-menu-item-line-height);
   outline-offset: var(--ams-header-menu-item-outline-offset);
+  padding-block: var(--ams-header-menu-item-padding-block);
   touch-action: manipulation;
   white-space: nowrap;
 
@@ -92,6 +93,7 @@
 }
 
 .ams-header__menu-link {
+  display: inline-block;
   text-decoration-line: var(--ams-header-menu-link-text-decoration-line);
   text-decoration-thickness: var(--ams-header-menu-link-text-decoration-thickness);
   text-underline-offset: var(--ams-header-menu-link-text-underline-offset);
@@ -114,7 +116,6 @@
   border: 0;
   margin-block: 0; // [1]
   margin-inline: 0; // [1]
-  padding-block: 0;
   padding-inline: 0;
 
   // [1] Remove the margin in older Safari.

diff --git a/proprietary/tokens/src/components/ams/header.tokens.json b/proprietary/tokens/src/components/ams/header.tokens.json
@@ -29,6 +29,7 @@
           "font-weight": { "value": "{ams.text.font-weight.normal}" },
           "line-height": { "value": "{ams.text.level.6.line-height}" },
           "outline-offset": { "value": "{ams.focus.outline-offset}" },
+          "padding-block": { "value": "{ams.space.xs}" },
           "hover": {
             "color": { "value": "{ams.link-appearance.hover.color}" }
           }