GH-101: Portal Nav Mobile - Link Style

taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-extend.css

@@ -54,7 +54,7 @@ Styleguide _Test.Extend
 /*! Class & Placeholder Selector, Use Placeholder Selector */
 
 /*! Goal: */
-._test_4{color:blue}
+._test_4,._test_mixin_4{color:blue}
 
 /*! Test: */
 %_test_mixin_4,
@@ -78,3 +78,21 @@ Styleguide _Test.Extend
 ._test_5 {
   @extend _test_mixin_5;
 }
+
+
+/*! Nested Extends */
+
+/*! Goal: */
+._test_6{color:#000}._test_6{background-color:#fff}
+
+/*! Test: */
+%_test_mixin_6a {
+  color: black;
+}
+%_test_mixin_6b {
+  @extend %_test_mixin_6a;
+  background-color: white;
+}
+._test_6 {
+  @extend %_test_mixin_6b;
+}

taccsite_cms/static/site_cms/css/src/_imports/tools/x-mobile-button.css

@@ -0,0 +1,54 @@
+/*
+Mobile Button (or Link)
+
+Styles to lay out button icon, text, and toggle in a compressed area.
+
+%x-mobile-button--toggle-on-side - Support toggle positioned on side of button
+
+Styleguide Tools.ExtendsAndMixins.MobileButton
+*/
+
+/* WARNING: A button must have `display: (inline-)flex` set externally */
+/* FAQ: Why not set `display: flex` here?
+        - It may break a button conditionally dependent on `display: none`.
+        - It would be overridden if button needs `display: inline-flex`.
+        - It makes user aware of the complexity of `display` and `flex`.
+*/
+
+
+
+/* Base */
+
+%x-mobile-button {
+  /* FAQ: The flex properties require `display` of `flex` or `inline-flex` */
+  /* display: flex; *//* set this externally */
+
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+
+
+/* Elements */
+
+%x-mobile-button__text {
+  font-family: var(--global-font-family--sans);
+  font-size: 10px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: env(--medium);
+}
+
+
+
+/* Modifiers */
+
+%x-mobile-button--toggle-on-side {
+  @extend %x-mobile-button;
+
+  /* FAQ: A height is required to force toggle to wrap */
+  /* height: 60px; *//* set this externally */
+
+  flex-wrap: wrap;
+}

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

@@ -5,6 +5,7 @@ Styles for when navigation is compressed.
 
 Styleguide Trumps.Scopes.Header.Compressed
 */
+@import url("_imports/tools/x-mobile-button.css");
 
 
 
@@ -70,7 +71,7 @@ Styleguide Trumps.Scopes.Header.Compressed
 
   /* Nav Links */
 
-  .s-header .nav-link {
+  .s-header .s-cms-nav .nav-link {
     /* height: auto; *//* to mirror props on `s-header.compressed.css` */
 
     /* To overwrite Bootstrap */
@@ -141,6 +142,10 @@ Styleguide Trumps.Scopes.Header.Compressed
 
   /* Icons */
 
+  .s-header .s-cms-nav .nav-icon {
+    margin-right: 0.5em;
+  }
+
   /* To enlarge all icons */
   .s-header .nav-icon {
     font-size: 26px;
@@ -226,6 +231,20 @@ Styleguide Trumps.Scopes.Header.Compressed
   .s-header .s-portal-nav { order: -1 }
   .s-header .s-search-bar { order: -2 }
 
+  /* To style "Log In" and "username" like navbar toggle button */
+  .s-header .s-portal-nav .nav-link {
+    @extend %x-mobile-button--toggle-on-side;
+    display: flex;
+
+    /* To ensure dropdown toggle wraps by limiting available content height */
+    height: 56px;
+    padding-top: 5px; /* to overwrite Boostrap */
+    padding-bottom: 5px; /* to overwrite Boostrap */
+  }
+  /* FAQ: The extra `.nav-link` specificity avoids styling dropdown link text */
+  .s-header .s-portal-nav .nav-link .nav-text {
+    @extend %x-mobile-button__text;
+  }
 
 
   /* Dropdowns */

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

@@ -27,6 +27,7 @@ Styleguide Trumps.Scopes.Header
 @import url("_imports/tools/selectors.css");
 @import url("_imports/tools/x-arrow.css");
 @import url("_imports/tools/x-truncate.css");
+@import url("_imports/tools/x-mobile-button.css");
 
 /* RFE: Make Portal & Docs markup match CMS (see "Portal & Docs Selectors") */
 /* RFE: Load Bootstrap before CMS stylesheets (see "Portal & Docs Selectors") */
@@ -204,10 +205,8 @@ Styleguide Trumps.Scopes.Header
 
 /* Button */
 .s-header :--navbar-button {
+  @extend %x-mobile-button--toggle-on-side;
   /* display: flex; *//* SEE `s-header.compressed.css` */
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
 
   width: env(--header-navbar-toggle-width);
   margin-right: env(--header-navbar-toggle-width);
@@ -252,14 +251,9 @@ Styleguide Trumps.Scopes.Header
 
 /* Text */
 .s-header :--navbar-button::after {
-  content: attr(data-icon-label);
-  display: block;
+  @extend %x-mobile-button__text;
 
-  font-family: Benton Sans, env(--header-font-family);
-  font-size: 10px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */
-  text-align: center;
-  text-transform: uppercase;
-  font-weight: env(--medium);
+  content: attr(data-icon-label);
 }
 .s-header :--navbar-button--opened::after { display: none; }
 /* To apply style to old markup (see "Portal & Docs Selectors") */
@@ -438,13 +432,3 @@ Styleguide Trumps.Scopes.Header
 :--for-portal .s-header .dropdown-item:hover {
   color: env(--header-text-color);
 }
-
-
-
-
-
-/* Icons */
-
-.s-header .nav-icon {
-  margin-right: 0.5em;
-}

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

@@ -141,6 +141,10 @@ Styleguide Trumps.Scopes.Header.Expanded
 
   /* Icons */
 
+  .s-header .nav-icon {
+    margin-right: 0.5em;
+  }
+
   /* To enlarge primary nav link icon */
   .s-header .nav-link .nav-icon {
     font-size: 26px;

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.html

@@ -6,6 +6,16 @@
 - Bootstrap class names
 - Bootstrap attributes
 -->
+<!-- Logged Out -->
+<ul class="s-portal-nav  navbar-nav">
+  <li class="nav-item">
+    <a class="nav-link" href="/auth/agave/">
+      <i class="fas fa-sign-in-alt nav-icon"></i>
+      <span>Log in</span>
+    </a>
+  </li>
+</ul>
+<!-- Logged In -->
 <ul class="s-portal-nav  navbar-nav">
   <li class="nav-item  dropdown">
     <a class="nav-link  dropdown-toggle"