refactor: simple explicit header nav link padding (#462)

* fix: some header styles not scoped with .s-header

* fix: different rems give diff header spacing

- has no effect on CMS (tested _in situ_)
- has expected effect on Portal (tested in TACC/Core-Portal#1068)

* refactor: header__nav-link--tall → …--not-expanded

* refactor: simplify header navlink padding

* fix: padding-block should differ for expand v. not

Author: wesleyboar

dist/core-styles.header.css

@@ -103,9 +103,11 @@ Styleguide Trumps.Scopes.Header
 
   /* If link text uses 2 lines, header grows taller (but it must not do so) */
   white-space: nowrap;
+
+  padding-inline: 14px;
 }
 
-@define-mixin header__nav-link--tall {
+@define-mixin header--not-expanded {
   &.s-header .nav-item {
     display: flex;
   }
@@ -116,19 +118,39 @@ Styleguide Trumps.Scopes.Header
 
     /* To align the underline of a hovered link to bottom of header */
     height: calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));
+
+    padding-block: 5px;
   }
 }
 @media (--x-narrow-and-above) {
-  .navbar-expand-sm { @mixin header__nav-link--tall; }
+  .navbar-expand-sm { @mixin header--not-expanded; }
 }
 @media (--narrow-and-above) {
-  .navbar-expand-md { @mixin header__nav-link--tall; }
+  .navbar-expand-md { @mixin header--not-expanded; }
 }
 @media (--medium-and-above) {
-  .navbar-expand-lg { @mixin header__nav-link--tall; }
+  .navbar-expand-lg { @mixin header--not-expanded; }
 }
 @media (--wide-and-above) {
-  .navbar-expand-xl { @mixin header__nav-link--tall; }
+  .navbar-expand-xl { @mixin header--not-expanded; }
+}
+
+@define-mixin header--is-expanded {
+  &.s-header .nav-link {
+    padding-block: 8px;
+  }
+}
+@media (--x-narrow-and-below) {
+  .navbar-expand-sm { @mixin header--is-expanded; }
+}
+@media (--narrow-and-below) {
+  .navbar-expand-md { @mixin header--is-expanded; }
+}
+@media (--medium-and-below) {
+  .navbar-expand-lg { @mixin header--is-expanded; }
+}
+@media (--wide-and-below) {
+  .navbar-expand-xl { @mixin header--is-expanded; }
 }
 
 .s-header .nav-link:hover,
@@ -144,19 +166,6 @@ Styleguide Trumps.Scopes.Header
   color: var(--header-text-color);
 }
 
-/* Navigation: Links: Responsive Design */
-
-/* Tweak Bootstrap `_nav.scss` (which selects via `navbar-expand-` class) */
-.s-header[class*="navbar-expand-"] .navbar-nav .nav-link {
-  padding-right: 14px; /* NO-R/EM: .875rem (overwrite Bootstrap) */
-  padding-left: 14px; /* NO-R/EM: .875rem (overwrite Bootstrap) */
-}
-
-@media (--medium-and-below) {
-  .s-header[class*="navbar-expand-"] .navbar-nav .nav-link {
-      padding-block: 8px;
-  }
-}
 
 /* Search */
 
@@ -170,9 +179,19 @@ Styleguide Trumps.Scopes.Header
 
 /* Dropdown */
 
-.dropdown-menu {
+/* To ensure sizes match between clients with different rem value */
+/* FAQ: Bootstrap uses rem space values but CMS and Portal rem values differ */
+.s-header .dropdown-menu {
   font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */
 }
+/* - to match portal nav size */
+.s-header .dropdown-menu {
+  padding-block: 5px;
+}
+.s-header .dropdown-item {
+  padding-block: 2.5px;
+  padding-inline: 15px;
+}
 
 /* Icons */
 
@@ -226,6 +245,6 @@ Styleguide Trumps.Scopes.Header
     ```
 */
 
-.navbar-toggler-icon  {
+.s-header .navbar-toggler-icon {
   filter: var(--menu-toggle-icon);
 }