GH-101: Portal Nav Mobile - Use Mixin

- New CSS plugin test for nested @extend's.
- New mixin "mobile button".
- Use mixin for mobile button styles in header.

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

@@ -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");
 
 
 
@@ -232,32 +233,17 @@ Styleguide Trumps.Scopes.Header.Compressed
 
   /* 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;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  /* To position dropdown toggle at the right of the link icon and link text */
-  /* FAQ: Target logged in nav link, but permit styles on logged out nav link */
-  .s-header .s-portal-nav .nav-link/*.dropdown-toggle */ {
-    height: 56px; /* FAQ: A static height seems required to trigger wrapping */
-    flex-wrap: wrap;
 
-    /* To overwrite Boostrap */
-    /* To ensure dropdown toggle wraps by limited available content height */
-    padding-top: 5px;
-    padding-bottom: 5px;
+    /* 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 {
-    content: attr(data-icon-label);
-    display: block;
-
-    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);
+    @extend %x-mobile-button__text;
   }
 
 

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") */