Merge pull request #98 from 18F/sw-uswds-update-fix

Hotfix for USWDS v1.4.4 update

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    uswds-jekyll (2.2.0)
+    uswds-jekyll (2.2.1)
       jekyll (~> 3.4)
 
 GEM

_sass/uswds/components/_header.scss

@@ -102,7 +102,7 @@ $z-index-nav:     9000;
   @include position(fixed, 0);
   background: $color-black;
   opacity: 0;
-  transition: all 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
   visibility: hidden;
   z-index: $z-index-overlay;
 

_sass/uswds/components/_sidenav.scss

@@ -1,8 +1,31 @@
 
 .usa-sidenav-list {
   @include usa-sidenav-list;
+  border-bottom: 1px solid;
+  border-top: 1px solid;
+
+  @include media($large-screen) {
+    border-bottom: none;
+    border-top: none;
+  }
+
+  .usa-grid & {
+    @include margin(null (-$site-margins-mobile) null (-$site-margins-mobile));
+
+    @include media($medium-screen) {
+      @include margin(null 0);
+    }
+  }
 }
 
 .usa-sidenav-sub_list {
   @include usa-sidenav-sublist;
 }
+
+.usa-layout-docs-sidenav {
+  padding-top: 2.4rem;
+
+  @include media($large-screen) {
+    padding-top: 0;
+  }
+}

_sass/uswds/core/_utilities.scss

@@ -191,7 +191,7 @@
     display: block;
     font-family: $font-sans;
     line-height: 1.3;
-    padding: 0.85rem 1rem 0.85rem 1.8rem;
+    padding: 0.85rem 1rem 0.85rem $site-margins-mobile;
     text-decoration: none;
 
     &:hover {
@@ -207,10 +207,10 @@
     }
 
     &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
-      border-left: 0.4rem solid $color-primary;
+      border-left: $sidenav-current-border-width solid $color-primary;
       color: $color-primary;
       font-weight: $font-bold;
-      padding-left: 1.4rem;
+      padding-left: $site-margins-mobile - $sidenav-current-border-width;
     }
   }
 }

_sass/uswds/core/_variables.scss

@@ -128,21 +128,22 @@ $image-path:  '../img' !default;
 $asset-pipeline:      false !default;
 
 // Magic Numbers
-$text-max-width:          66ch !default; // 66 characters per line
-$lead-max-width:          77rem !default;
-$site-max-width:          1040px !default;
-$site-margins:            3rem !default;
-$site-margins-mobile:     1.5rem !default;
-$article-max-width:       600px !default;
-$input-max-width:         46rem !default;
-$label-border-radius:     2px !default;
-$checkbox-border-radius:  2px !default;
-$border-radius:           3px !default;
-$button-border-radius:    5px !default;
-$box-shadow:              0 0 2px $color-shadow !default;
-$focus-outline:           2px dotted $color-gray-light;
-$focus-spacing:           3px;
-$nav-width:               951px !default;
+$text-max-width:                66ch !default; // 66 characters per line
+$lead-max-width:                77rem !default;
+$site-max-width:                1040px !default;
+$site-margins:                  3rem !default;
+$site-margins-mobile:           1.5rem !default;
+$article-max-width:             600px !default;
+$input-max-width:               46rem !default;
+$label-border-radius:           2px !default;
+$checkbox-border-radius:        2px !default;
+$border-radius:                 3px !default;
+$button-border-radius:          5px !default;
+$box-shadow:                    0 0 2px $color-shadow !default;
+$focus-outline:                 2px dotted $color-gray-light !default;
+$focus-spacing:                 3px !default;
+$nav-width:                     951px !default;
+$sidenav-current-border-width:  0.4rem !default; // must be in rem for math
 
 // 44 x 44 pixels hit target following Apple iOS Human Interface
 // Guidelines

_sass/uswds/elements/_inputs.scss

@@ -112,7 +112,9 @@ select {
   appearance: none;
   background-color: $color-white;
   background-image: url('#{$image-path}/arrow-both.png');
-  background-image: url('#{$image-path}/arrow-both.svg');
+  // Ensure browsers that don't support SVG in background-image (IE 11 and below) fall back to PNG. 
+  // See https://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/
+  background-image: none, url('#{$image-path}/arrow-both.svg'), url('#{$image-path}/arrow-both.png');
   background-position: right 1.3rem center;
   background-repeat: no-repeat;
   background-size: 1rem;

uswds-jekyll.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |s|
   s.name          = 'uswds-jekyll'
-  s.version       = '2.2.0'
+  s.version       = '2.2.1'
   s.authors       = ['Shawn Allen', 'Brian Hurst', 'Scott Weber']
   s.email         = ['[email protected]', '[email protected]']