uswds-jekyll 2.0.1 → 2.1.0

data/_sass/uswds/components/_header.scss

@@ -15,7 +15,7 @@ $z-index-nav:     9000;
   z-index: $z-index-header;
 
   @include media($nav-width) {
-    border-bottom: 1px solid $color-gray-light;
+    border-bottom: 1px solid $color-gray-lighter;
   }
 
   a {
@@ -23,11 +23,8 @@ $z-index-nav:     9000;
   }
 
   .usa-search {
-    margin-bottom: 1.5rem;
-
     @include media($nav-width) {
       float: right;
-      margin-bottom: 0;
       max-width: 21.5rem;
     }
   }
@@ -120,7 +117,7 @@ $z-index-nav:     9000;
 .usa-header-basic {
   .usa-logo {
     @include media($nav-width) {
-      bottom: 1.9rem;
+      bottom: 0;
       position: absolute;
     }
   }
@@ -167,7 +164,7 @@ $z-index-nav:     9000;
 
   .usa-nav {
     @include media($nav-width) {
-      border-top: 1px solid $color-gray-light;
+      border-top: 1px solid $color-gray-lighter;
       float: none;
       padding: 0;
       width: 100%;
@@ -177,7 +174,7 @@ $z-index-nav:     9000;
   .usa-nav-inner {
     @include media($nav-width) {
       @include outer-container();
-      @include padding(null $site-margins null 2rem);
+      @include padding(null $site-margins null 1.5rem);
       margin-top: -1px;
       max-width: $site-max-width;
       position: relative;
@@ -193,7 +190,7 @@ $z-index-nav:     9000;
       &[aria-expanded=false],
       &[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
         @include media($nav-width) { /* stylelint-disable-line selector-no-qualifying-type */
-          background-position: right 1.5rem top 50%;
+          background-position: right 1.5rem top 53%;
         }
       }
     }
@@ -201,7 +198,7 @@ $z-index-nav:     9000;
 
   .usa-nav-link {
     @include media($nav-width) {
-      padding-top: 1.9rem;
+      @include padding(1.8rem null);
     }
   }
 

data/_sass/uswds/components/_hero.scss

@@ -27,13 +27,7 @@
   }
 
   > *:first-child {
-    @include margin(0 null $site-margins null);
-  }
-
-  .usa-button {
-    font-size: $small-font-size;
-    margin-top: 7rem;
-    width: 100%;
+    @include margin(0 null $spacing-medium null);
   }
 }
 

data/_sass/uswds/components/_navigation.scss

@@ -1,8 +1,13 @@
 // Header navigation ------------- //
 
 @mixin nav-border {
+  border-bottom: 0.4rem solid $color-primary;
+  padding-bottom: 0.6rem;
+}
+
+@mixin nav-border-thick {
   border-bottom: 0.7rem solid $color-primary;
-  padding-bottom: 1rem;
+  padding-bottom: 0.9rem;
 }
 
 .usa-navbar {
@@ -12,7 +17,7 @@
   @include media($nav-width) {
     border-bottom: none;
     display: inline-block;
-    height: 10.3rem; // XXX magic number
+    height: 7.8rem; // XXX magic number
   }
 }
 
@@ -26,6 +31,15 @@
       }
     }
   }
+
+  &.usa-accordion-button {
+    span {
+      @include media($nav-width) {
+        margin-right: 0;
+        padding-right: 1.5rem;
+      }
+    }
+  }
 }
 
 .usa-nav-container {
@@ -53,7 +67,7 @@
   z-index: $z-index-nav;
 
   @include media($nav-width) {
-    @include padding(5rem 0 0 null);
+    @include padding(4.5rem 0 0 null);
     border-left: none;
     display: block;
     float: right;
@@ -82,6 +96,10 @@
     color: $color-primary;
     font-weight: $font-bold;
     padding-left: 1.4rem;
+
+    @include media($nav-width) {
+      color: $color-base;
+    }
   }
 
   .usa-button {
@@ -91,6 +109,7 @@
   .usa-search {
     @include media($nav-width) {
       margin-left: 1.5rem; // XXX magic number
+      top: 4px;
     }
   }
 }
@@ -99,6 +118,7 @@
 
 .usa-nav-primary {
   @include usa-sidenav-list;
+  margin-top: 1.5rem;
   order: 2;
 
   @include media($nav-width) {
@@ -121,11 +141,11 @@
 
     > a {
       @include media($nav-width) {
-        @include padding(1.3rem 1.5rem 1.7rem 1.5rem);
+        @include padding(1.3rem 1.5rem 2.2rem 1.5rem);
         color: $color-gray;
         font-size: $h5-font-size;
         font-weight: $font-bold;
-        line-height: 1.2;
+        line-height: 1;
       }
 
       &:hover {
@@ -136,25 +156,39 @@
     }
   }
 
+  a {
+    @include media($nav-width) {
+      @include padding(0.75rem null);
+    }
+
+    &:hover {
+      @include media($nav-width) {
+        // color: $color-base;
+      }
+    }
+  }
+
   button {
-    $button-vertical-offset: 44%;
+    $button-vertical-offset: 40%;
 
     @include button-unstyled;
     @include font-smoothing;
     font-weight: $font-normal;
-    padding: 1.4rem 1.5rem 1rem 1.8rem;
+    line-height: 1.3;
+    padding: 0.85rem 1.5rem 0.85rem 1.8rem;
 
     @include media($nav-width) {
-      @include padding(null 3rem 1.9rem 1.5rem);
+      @include padding(1.3rem 1.5rem 2.2rem 1.5rem);
       color: $color-gray;
       font-size: $h5-font-size;
       font-weight: $font-bold;
+      line-height: 1;
       width: initial;
     }
 
     &:focus,
     &:active {
-      box-shadow: $focus-shadow;
+      box-shadow: $focus-outline;
     }
 
     &:hover {
@@ -163,6 +197,7 @@
 
       @include media($nav-width) {
         background-color: transparent;
+        // color: $color-base;
       }
     }
 
@@ -178,6 +213,13 @@
         background-image: url('#{$image-path}/angle-arrow-down.svg');
         background-position: right 1.5rem top $button-vertical-offset;
       }
+
+      &:hover {
+        @include media($nav-width) {
+          background-image: url('#{$image-path}/angle-arrow-down-primary.png');
+          background-image: url('#{$image-path}/angle-arrow-down-primary.svg');
+        }
+      }
     }
 
     &[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
@@ -200,19 +242,60 @@
 
         span {
           @include nav-border;
+          color: $color-white;
         }
       }
     }
   }
 
   @include media($nav-width) {
-    a.usa-current { // stylelint-disable-line selector-no-qualifying-type
+    a.usa-current,
+    .usa-current { // stylelint-disable-line selector-no-qualifying-type
       // undo the sidenav style
       border-left: 0;
       padding-left: 1.5rem;
 
+      &:hover {
+        span {
+          color: $color-primary;
+        }
+      }
+
       span {
         @include nav-border;
+        color: $color-base;
+      }
+    }
+  }
+}
+
+// Extended header navigation ------- //
+
+.usa-header-extended {
+  .usa-nav-link {
+    &:hover {
+      span {
+        @include media($nav-width) {
+          @include nav-border-thick;
+        }
+      }
+    }
+  }
+
+  .usa-nav-primary {
+    button[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
+      span {
+        @include media($nav-width) {
+          @include nav-border-thick;
+        }
+      }
+    }
+
+    .usa-current {
+      @include media($nav-width) {
+        span {
+          @include nav-border-thick;
+        }
       }
     }
   }
@@ -221,37 +304,44 @@
 // Secondary navigation ----------- //
 
 .usa-nav-secondary {
+  margin-top: 1.5rem;
+
   @include media($nav-width) {
+    margin-top: 0;
     position: absolute;
     right: $site-margins;
     top: -5.7rem; // XXX magic number
   }
 
   .usa-search {
-    @include margin(3rem null);
+    @include margin(1.5rem null 0 null);
 
     @include media($nav-width) {
-      @include margin(-0.2rem null 0 0);
+      @include margin(-0.9rem null 0 0);
       float: left;
     }
   }
 }
 
 .usa-nav-secondary-links {
+  margin-top: 2.4rem;
+
   @include media($nav-width) {
     float: left;
+    margin-top: 0;
   }
 
   li {
     @include media($nav-width) {
       display: inline;
-      padding-left: 1rem;
+      padding-left: 0.5rem;
     }
 
     &:not(:last-child)::after {
       @include media($nav-width) {
+        color: $color-gray-lighter;
         content: '|';
-        padding-left: 1rem;
+        padding-left: 0.5rem;
       }
     }
   }
@@ -265,6 +355,7 @@
 
     &:hover {
       color: $color-primary;
+      text-decoration: underline;
     }
   }
 
@@ -301,14 +392,13 @@
 // Navigation submenu (dropdown and mega menu) ----- //
 
 .usa-nav-submenu {
-  // @include usa-sidenav-sublist;
+  @include usa-sidenav-sublist;
 
   @include media($nav-width) {
     @include unstyled-list;
-    @include padding(1.15rem null);
+    @include padding(0.75rem null 0.9rem null);
     background-color: $color-primary-darkest;
-    min-width: 21.5rem;
-    width: auto;
+    width: 21.5rem;
     position: absolute;
   }
 
@@ -326,6 +416,7 @@
       @include media($nav-width) {
         background-color: $color-primary-darkest;
         color: $color-white;
+        padding-left: 1.5rem;
         text-decoration: underline;
       }
     }
@@ -350,7 +441,7 @@
 
 .usa-nav-close {
   @include button-unstyled;
-  @include margin(-1.2rem -1.5rem 2.4rem auto);
+  @include margin(-1.2rem -1.5rem 1.5rem auto);
   float: right;
   height: $hit-area;
   text-align: center;
@@ -363,6 +454,10 @@
   img {
     width: 1.3rem;
   }
+
+  + * {
+    clear: both;
+  }
 }
 
 .usa-mobile_nav-active {
@@ -422,7 +517,7 @@
     @include media($nav-width) {
       display: block;
       float: right;
-      margin-top: -4.8rem;
+      margin-top: -3.8rem;
     }
   }
 

data/_sass/uswds/components/_search.scss

@@ -14,25 +14,6 @@ $usa-btn-big-width:     11.6rem;
   max-width: none;
   position: relative;
 
-  [type=search],
-  .usa-search-input {
-    @include padding(0 null);
-    -webkit-appearance: none;
-    border-bottom-right-radius: 0;
-    border-right: none;
-    border-top-right-radius: 0;
-    box-sizing: border-box;
-    float: left;
-    font-size: $small-font-size;
-    height: 3.3rem;
-    margin: 0;
-    width: calc(100% - #{$usa-btn-small-width});
-
-    @include media($small-screen) {
-      width: calc(100% - #{$usa-btn-medium-width});
-    }
-  }
-
   [type=submit],
   .usa-search-submit {
     @include search-icon;
@@ -49,14 +30,6 @@ $usa-btn-big-width:     11.6rem;
     }
   }
 
-  .usa-search-submit-text {
-    display: none;
-
-    @include media($small-screen) {
-      display: block;
-    }
-  }
-
   &.usa-search-big {
     @include media($small-screen) {
       $height: 4.4rem;
@@ -104,3 +77,35 @@ $usa-btn-big-width:     11.6rem;
     }
   }
 }
+
+// Extra specificity to override rules set in reset.css.
+input[type=search] { /* stylelint-disable-line selector-no-qualifying-type */
+  box-sizing: border-box;
+  -webkit-appearance: none;
+}
+
+[type=search],
+.usa-search-input {
+  @include padding(0 null);
+  border-bottom-right-radius: 0;
+  border-right: none;
+  border-top-right-radius: 0;
+  box-sizing: border-box;
+  float: left;
+  font-size: $small-font-size;
+  height: 3.3rem;
+  margin: 0;
+  width: calc(100% - #{$usa-btn-small-width});
+
+  @include media($small-screen) {
+    width: calc(100% - #{$usa-btn-medium-width});
+  }
+}
+
+.usa-search-submit-text {
+  @include sr-only;
+
+  @include media($small-screen) {
+    @include not-sr-only();
+  }
+}