Merge branch 'master' into ui-progress-bar

scss/elements/_icons.scss

@@ -1,17 +1,19 @@
 @mixin icon {
-  display: inline-block;
-  vertical-align: bottom;
+  display: inline-flex;
 
   > svg {
     width: 100%;
     height: 100%;
+    * {
+      transition: fill $hover-transition-time;
+    }
   }
 }
 
 @mixin icon-size($size) {
   $icon-size: $size * .1rem;
   width: $icon-size;
-  height: $icon-size;
+  height: auto;
   margin: $icon-size / 4;
 }
 
@@ -21,8 +23,24 @@
   }
 }
 
+@mixin icon-style-active {
+  > svg * {
+    fill: $color-primary;
+  }
+}
+
+@mixin icon-style-inverted {
+  > svg * {
+    fill: $color-white;
+  }
+}
+
 .icon {
   @include icon;
   @include icon-size(16);
   @include icon-style-default;
+
+  &.icon--tiny {
+    @include icon-size(10);
+  }
 }

scss/elements/_panels.scss

@@ -44,36 +44,3 @@
     }
   }
 }
-
-/*
- * Panel Container
- * Grid container for panel blocks
- */
-
- .panel-container {
-  @include grid-row;
-  @include grid-pad;
-  @include margin(($site-margins-mobile * 2) null);
-
-  @include media($medium-screen) {
-    @include margin(($site-margins * 2) null);
-  }
-
-  @include media($large-screen) {
-    flex-wrap: nowrap;
-  }
-
-  > .col {
-    @include grid-pad;
-  }
-
-  h1 {
-    margin-bottom: 0;
-  }
-
-  h2 {
-    color: $color-gray;
-  }
-
-
-}

scss/elements/_sidenav.scss

@@ -0,0 +1,74 @@
+.sidenav {
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+     li {
+      margin: 0;
+      display: block;
+    }
+  }
+
+  .sidenav__link {
+    display: block;
+    border-top: 1px solid $color-black;
+    padding: $gap ($gap * 2);
+    color: $color-black;
+    text-decoration: none;
+    white-space: nowrap;
+
+    .sidenav__link-icon {
+      margin-left: - ($gap * .5);
+    }
+
+    &.sidenav__link--disabled {
+      color: $color-shadow;
+      pointer-events: none;
+    }
+
+    &.sidenav__link--active {
+      @include h4;
+      background-color: $color-white;
+      color: $color-primary;
+      box-shadow: inset .4rem 0 0 0 $color-primary;
+
+      .sidenav__link-icon {
+        @include icon-style-active;
+      }
+
+      + ul {
+        background-color: $color-white;
+
+        .sidenav__link {
+          &--active {
+            @include h5;
+            color: $color-primary;
+          }
+        }
+      }
+    }
+
+    + ul {
+      padding-bottom: $gap / 2;
+
+      li {
+        .sidenav__link {
+          @include h5;
+          padding: ($gap * .75) ($gap * 3);
+          border: 0;
+          font-weight: normal;
+        }
+      }
+    }
+
+    &:hover {
+      color: $color-primary;
+
+      .sidenav__link-icon {
+        @include icon-style-active;
+      }
+
+    }
+  }
+}

scss/elements/_typography.scss

@@ -4,7 +4,12 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss
  */
 
- h1, h2, h3, h4, h5, h6 {
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
   font-family: $font-sans;
 
   .usa-button {
@@ -24,12 +29,12 @@ h2 {
 }
 
 a,
-a > span {
+a:hover {
   transition:
   background 0.2s,
   border 0.2s,
   box-shadow 0.2s,
-  color 0.2s,
+  color 0.2s;
 }
 
 a:visited {
@@ -39,4 +44,4 @@ a:visited {
 dt {
   display: inline;
   font-weight: bold;
-}
+}