GH-101: Navigation Bar (Responsive Design Sans Search & Icons)

taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css

@@ -61,10 +61,6 @@ Styleguide Components.Branding
  width: 0;
  overflow: hidden;
 }
-.c-branding__image {
- /* To match parent height */
- height: 100%;
-}
 
 /* Specific brands */
 .c-branding__nsf-link { --height: 35px; }

taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css

@@ -23,8 +23,7 @@ Styleguide Components.Logo
 /* Elements */
 
 .c-logo__image {
- /* To delegate height control to base/container */
- height: 100%;
- /* To prevent length wider than (but allow narrower than) base/container */
+ /* Of base i.e. container */
+ max-height: 100%;
  max-width: 100%;
 }

taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css

@@ -30,7 +30,7 @@ body {
 
 body {
  /* To avoid negative whitespace at right on horz scroll on tiny screen */
- min-width: 290px; /* developer-decided value */
+ min-width: 320px; /* developer-decided value */
 
  font-family: var(--global-font-family);
 

taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css

@@ -51,12 +51,10 @@ Styleguide Tools.CustomMediaQueries.Breakpoints
 
 /* Header Navbar State (Compressed/Expanded) */
 
-/* I.e. --medium-and-below */
-@custom-media --nav-compressed--sans-portal (width < 992px);
-/* I.e. --medium-and-below */
-@custom-media --nav-expanded--sans-portal (width >= 992px);
-
-/* I.e. --wide-and-below */
-@custom-media --nav-compressed--with-portal (width < 1200px);
-/* I.e. --wide-and-above */
-@custom-media --nav-expanded--with-portal (width >= 1200px);
+/* Map `s-header.html`'s `navbar-expand-*` to `--*-and-below|above`:
+ - `...-xl` → `--wide-and-...`
+ - `...-lg` → `--medium-and-...`
+ - `...-md` → `--narrow-and-...`
+ - `...-sm` → `--x-narrow-and-...` */
+@custom-media --nav-compressed (width < 992px);
+@custom-media --nav-expanded (width >= 992px);

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.compressed.css

@@ -0,0 +1,144 @@
+/*
+Header (Compressed Navigation)
+
+Styles for when navigation is compressed.
+
+Styleguide Trumps.Scopes.Header.Compressed
+*/
+
+
+
+
+
+/* COMPARABLE (to Expanded Styles) */
+
+@media (--nav-compressed) {
+
+ /* Nav */
+
+
+
+ /* Container */
+
+ .s-header .navbar-nav {
+ /* --nav-link-horz-pad: … *//* set within different media queries */
+ --nav-line-color: env(--header-accent-color);
+ }
+
+
+
+ /* Nav Links */
+
+ .s-header .nav-link {
+ height: auto;
+
+ /* To overwrite Bootstrap */
+ padding-top: 0.8em;
+ padding-bottom: 0.8em;
+
+ font-size: 2em;
+ }
+
+ /* NOTE: Design may want hover .s-header active background color with alpha */
+ /* SEE: `./s-header.css` */
+
+ /* NOTE: Design may want hover/focus/active styles to differ per nav state */
+ .s-header .nav-link:hover,
+ .s-header .nav-link:focus,
+ .s-header .nav-link:active,
+ .s-header .nav-item.active .nav-link,
+ .s-header .nav-item.dropdown.show .nav-link {
+ /* border-top: none *//* to mirror props on `s-header.compressed.css` */
+ /* border-bottom: none *//* to mirror props on `s-header.compressed.css` */
+ }
+
+
+
+
+
+ /* Dropdowns */
+
+
+
+ /* Container */
+
+ .s-header .dropdown {
+ --menu-link-horz-pad: 26px;
+ --menu-line-color: transparent;
+ }
+
+
+
+ /* Menu */
+
+ /* To overwrite Bootstrap */
+ .s-header .dropdown-menu {
+ padding: 0;
+
+ background-color: transparent;
+ border: none;
+
+ font-size: 20px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */
+ }
+
+
+
+ /* Item */
+
+ /* FAQ: Selector specificty trumps Bootstrap, so no need for `:hover` (etc.) */
+ .s-header .dropdown-item {
+ /* To overwrite Bootstrap */
+ padding-top: 1em;
+ padding-bottom: 1em;
+ }
+
+
+ /* Search */
+
+ /* GH-101: Retain search design until Wes works on it */
+ .s-header .s-search-bar,
+ .s-header .s-search-bar::part(input),
+ .s-header .s-search-bar::part(button) {
+ font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */
+ }
+
+ /* Create space between search bar and login (only if both elements exist) */
+ .s-header .s-search-bar ~ .s-portal-nav {
+ margin-left: 2px;
+ }
+
+
+
+
+
+ /* Icons */
+
+ .s-header .s-portal-nav .nav-link .nav-icon {
+ margin-right: 0.5em;
+ }
+
+}
+
+
+
+
+
+/* UNIQUE (to Compressed Styles) */
+
+@media (--nav-compressed) {
+ .s-header .navbar-nav {
+ --nav-link-horz-pad: calc(
+ env(--portal-sidebar-padding) + env(--portal-navlink-padding)
+ );
+
+ margin-left: calc(-1 * var(--nav-link-horz-pad));
+ }
+
+ .s-header .s-cms-nav .dropdown-menu {
+ --menu-link-horz-pad: calc(
+ env(--portal-sidebar-padding) + env(--portal-navlink-padding)
+ );
+
+ margin-left: var(--menu-link-horz-pad);
+ }
+}