refactor: misc UI bug fixes and cleanup relating to theme / layout variations / responsive behavior. add missing light theme interactive states to link styles. also globally improves focus state styles so outlines don't spill out / get cut off by other components

Author: sghoweri

packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss

@@ -37,6 +37,8 @@
   transition: background-color $pl-animate-quick ease-out,
     color $pl-animate-quick ease-out;
   cursor: pointer;
+  outline-offset: -3px;
+  outline-width: 2px;
 
   &:hover {
     color: $pl-color-white;
@@ -57,6 +59,15 @@
   .pl-c-body--theme-light & {
     background-color: $pl-color-white;
     color: $pl-color-gray-70;
+
+    &:hover {
+      background-color: $pl-color-gray-07;
+    }
+
+    &:active,
+    &:focus {
+      background-color: $pl-color-gray-13;
+    }
   }
 
   /**
@@ -100,9 +111,9 @@
   }
 }
 
-@mixin noSelect(){
-  -webkit-user-select: none;  /* Chrome all / Safari all */
-  -moz-user-select: none;     /* Firefox all */
-  -ms-user-select: none;      /* IE 10+ */
-  user-select: none;          /* Likely future */  
+@mixin noSelect() {
+  -webkit-user-select: none; /* Chrome all / Safari all */
+  -moz-user-select: none; /* Firefox all */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Likely future */
 }

packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss

@@ -10,32 +10,41 @@
 .pl-c-nav {
   background-color: inherit;
 
-  @media all and (max-width: $pl-bp-med) {
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    overflow: hidden;
-    max-height: 0; /* 1 */
-    display: flex;
-    flex-direction: column;
-    transition: max-height $pl-animate-quick ease-out;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  overflow: hidden;
+  max-height: 0; /* 1 */
+  display: flex;
+  flex-direction: column;
+  transition: max-height $pl-animate-quick ease-out;
 
-    /**
-         * Active navigaiton
-         * 1) Slide 
-         * 2) Set the height to the vierport height minus the height
-         *    of the header
-         */
-    &.pl-is-active {
-      max-height: 50rem; /* 1 */
-      height: calc(100vh - #{$offset-top}); /* 2 */
-      overflow: auto;
-      @include hideScrollBar();
+  /**
+      * Active navigaiton
+      * 1) Slide 
+      * 2) Set the height to the vierport height minus the height
+      *    of the header
+      */
+  &.pl-is-active {
+    @include hideScrollBar;
+    max-height: calc(100vh - #{$offset-top - 1rem}); /* 2 */
+    overflow: auto;
+
+    box-shadow: 0 1px 1px $pl-color-black;
+
+    .pl-c-body--theme-light & {
+      box-shadow: 0 1px 1px darken($pl-color-gray-20, 15%);
     }
   }
 
   @media all and (min-width: $pl-bp-med) {
-    display: flex;
+    flex-direction: row;
+    position: relative;
+    top: auto;
+    width: auto;
+    overflow: visible;
+    max-height: none;
+    box-shadow: none;
   }
 }
 
@@ -51,13 +60,11 @@
   padding: 0;
   list-style: none;
   flex-shrink: 0; // helps prevent top-level nav items from occasionally wrapping to multiple lines
-
-  @media all and (max-width: $pl-bp-med) {
-    order: 2; /* 3 */
-  }
+  order: 2;
 
   @media all and (min-width: $pl-bp-med) {
     display: flex; /* 2 */
+    order: 1;
 
     // workaround to Firefox-specific flexbox quirk
     .pl-c-body--theme-sidebar & {
@@ -72,6 +79,9 @@
 .pl-c-nav__item {
   cursor: pointer;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center; // vertically align nav items
 }
 
 /**
@@ -108,6 +118,7 @@
  * Nav link
  */
 .pl-c-nav__link--dropdown {
+  flex-grow: 1; // fill up extra space in parent nav item, if available
   /**
      * Dropdown caret after accordion handle
      */
@@ -141,8 +152,6 @@
          */
     &:after {
       color: $pl-color-gray-50;
-      -webkit-transform: rotate(180deg);
-      -ms-transform: rotate(180deg);
       transform: rotate(180deg);
     }
   }
@@ -182,7 +191,14 @@
  */
 .pl-c-nav__sublist--dropdown.pl-is-active {
   @media all and (min-width: $pl-bp-med) {
-    height: calc(100vh - #{$offset-top}); /* 1 */
+    height: auto;
+    max-height: calc(100vh - #{$offset-top} - 1rem); /* 1 */
+  }
+
+  border: 1px solid $pl-color-black;
+
+  .pl-c-body--theme-light & {
+    border: 1px solid $pl-color-gray-20;
   }
 }
 

packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss

@@ -49,10 +49,6 @@
   /**
      * All Nav links inside of subnav dropdown
      */
-  .pl-c-nav__sublist .pl-c-nav__link {
-    border-left: 1px solid $pl-color-gray-20;
-    border-right: 1px solid $pl-color-gray-20;
-  }
 
   /**
     * Last sublist item
@@ -61,7 +57,6 @@
     @media all and (min-width: $pl-bp-med) {
       border-bottom-left-radius: $pl-border-radius-med;
       border-bottom-right-radius: $pl-border-radius-med;
-      border-bottom: 1px solid $pl-color-gray-20;
     }
   }
 

packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss

@@ -2,7 +2,6 @@
     #SIDEBAR THEME
 \*------------------------------------*/
 
-
 @media all and (min-width: $pl-bp-med) {
   /**
     * A theme that places displays the header as a sidebar
@@ -61,15 +60,6 @@
       order: 2; /* 2 */
     }
 
-    /**
-        * Nav link
-        */
-    .pl-c-nav__link {
-      font-size: $pl-font-size-sm-2;
-      padding-left: 0;
-      padding-right: 0;
-    }
-
     /**
         * Nav sublist
         */
@@ -106,11 +96,6 @@
          * Dropdown sublist
          * 1) Undo fixed height
          */
-    .pl-c-nav__sublist--dropdown.pl-is-active {
-      @media all and (min-width: $pl-bp-med) {
-        height: auto; /* 1 */
-      }
-    }
 
     /**
         * Nav sub sub list
@@ -164,15 +149,6 @@
       display: none;
     }
 
-    /**
-         * Dynamically added wrapper around typeahead input
-         * 1) Have to use important to override JS-added inline styles
-         */
-    .pl-c-header .twitter-typeahead {
-      display: block !important; /* 1 */
-      margin-bottom: 0.5rem;
-    }
-
     /**
          * Tools toggle button
          */
@@ -194,17 +170,11 @@
     }
 
     /**
-         * Tools action
-         */
-    .pl-c-tools__action {
-    }
-
-    /**
-         * Modal
-         * 1) Position modal (that contains all the content)
-         *    so it fits in remaining available space
-         *    TODO: revisit to find ways to resize
-         */
+      * Modal
+      * 1) Position modal (that contains all the content)
+      *    so it fits in remaining available space
+      *    TODO: revisit to find ways to resize
+      */
     .pl-c-modal {
       right: 0; /* 1 */
       width: auto;