uswds-rails 1.3.1.1 → 1.4.0

data/vendor/assets/stylesheets/uswds/components/_footer.scss

@@ -8,8 +8,8 @@
     display: block;
     font-weight: $font-bold;
     margin-top: 0;
-    padding-bottom: 2rem;
-    padding-top: 2rem;
+    padding-bottom: $spacing-medium;
+    padding-top: $spacing-medium;
     text-decoration: none;
 
     @include media($medium-screen) {
@@ -23,19 +23,35 @@
 
   a {
     font-weight: normal;
+    text-decoration: none;
+  }
+}
+
+.usa-footer-contact_info {
+  display: inline-block;
+
+  a {
+    color: $color-base;
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: underline;
   }
 }
 
 .usa-footer-return-to-top {
-  padding-bottom: 2rem;
-  padding-top: 2rem;
+  color: $color-primary;
+  padding-bottom: $spacing-medium;
+  padding-top: $spacing-medium;
+  text-decoration: underline;
 }
 
 .usa-footer-primary-section {
   background-color: $color-gray-lightest;
 
   .usa-footer-primary-content {
-    padding-left: 2.5rem;
+    padding-left: 1.5rem;
     padding-right: 2.5rem;
 
     @include media($medium-screen) {
@@ -61,17 +77,51 @@
 }
 
 .usa-footer-medium {
-  .usa-footer-primary-section {
-    padding: 0;
+  .usa-footer-contact_info {
+    p {
+      margin: 0 $spacing-small 0 0;
+
+      @include media($medium-screen) {
+        margin: 0 0 0 $spacing-small;
+      }
+    }
+  }
+
+  .usa-footer-contact-heading {
+    margin-top: 0;
+
+    @include media($medium-screen) {
+      margin-top: $spacing-x-small;
+      margin-bottom: $spacing-x-small;
+    }
+  }
+
+  .usa-footer-logo {
+    padding: $spacing-small 0;
 
     @include media($medium-screen) {
-      padding-bottom: 1rem;
-      padding-top: 1rem;
+      padding: $spacing-medium 0;
+    }
+  }
+
+  .usa-footer-primary-link {
+    padding-bottom: $spacing-md-small;
+    padding-top: $spacing-md-small;
+  }
+
+  .usa-footer-primary-section {
+    > .usa-grid {
+      padding: 0;
+
+      @include media($medium-screen) {
+        padding-left: $spacing-large;
+        padding-right: $spacing-large;
+      }
     }
 
     .usa-footer-primary-content {
       @include media($large-screen) {
-        margin-right: 6%;
+        margin-right: 5%;
         width: inherit;
       }
 
@@ -98,7 +148,7 @@
 
     .usa-footer-primary-content {
       @include media($large-screen) {
-        margin-right: 9%;
+        margin-right: 5%;
         width: inherit;
       }
 
@@ -110,12 +160,24 @@
     }
   }
 
+  .usa-footer-primary-link {
+    padding-bottom: $spacing-md-small;
+    padding-top: $spacing-md-small;
+  }
+
   .usa-footer-primary-section {
-    padding-bottom: 2rem;
+    > .usa-grid {
+      padding: 0;
+
+      @include media($medium-screen) {
+        padding-left: $spacing-large;
+        padding-right: $spacing-large;
+      }
+    }
 
     @include media($medium-screen) {
-      padding-bottom: 1rem;
-      padding-top: 1rem;
+      padding-bottom: 0;
+      padding-top: 0;
 
       .usa-grid-full {
         align-items: center;
@@ -131,7 +193,7 @@
     }
 
     @include media($medium-screen) {
-      @include padding (2rem null);
+      @include padding ($spacing-md-small null);
     }
 
     @include media($medium-screen) {
@@ -148,14 +210,14 @@
 ul.usa-footer-primary-content,
 li.usa-footer-primary-content,
 li.usa-footer-primary-content {
-  border-top: 1px solid $color-base;
+  border-top: 1px solid $color-gray-light;
 
   @include media($medium-screen) {
     border: none;
   }
 
   &:last-child {
-    border-bottom: 1px solid $color-base;
+    border-bottom: 1px solid $color-gray-light;
 
     @include media($medium-screen) {
       border-bottom: none;
@@ -165,9 +227,9 @@ li.usa-footer-primary-content {
 /* stylelint-enable */
 
 .usa-sign_up-block {
-  padding-bottom: 2rem;
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
+  padding-bottom: 4.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 
   @include media($medium-screen) {
     float: right;
@@ -191,8 +253,8 @@ li.usa-footer-primary-content {
 
 .usa-footer-secondary_section {
   background-color: $color-gray-lighter;
-  padding-bottom: 3rem;
-  padding-top: 3rem;
+  padding-bottom: $spacing-medium;
+  padding-top: $spacing-medium;
 
   a {
     color: $color-base;
@@ -201,7 +263,8 @@ li.usa-footer-primary-content {
 
 .usa-footer-big-secondary-section {
   @include media($medium-screen) {
-    padding-top: 5rem;
+    padding-top: $spacing-medium;
+    padding-bottom: $spacing-medium;
   }
 }
 
@@ -218,11 +281,63 @@ li.usa-footer-primary-content {
 }
 
 .usa-footer-big {
+  .usa-footer-contact_info {
+    display: block;
+
+    p {
+      margin: 0 $spacing-small 0 0;
+
+      @include media($medium-screen) {
+        margin: $spacing-x-small 0 0 $spacing-small;
+      }
+    }
+  }
+
+  .usa-footer-contact-links {
+    @include media($medium-screen) {
+      padding-top: $spacing-medium;
+    }
+  }
+
+  .usa-footer-logo {
+    padding: $spacing-small 0;
+
+    @include media($medium-screen) {
+      padding: $spacing-medium 0;
+    }
+  }
+
   .usa-footer-primary-section {
     @include media($medium-screen) {
       padding-bottom: 4rem;
       padding-top: 3rem;
     }
+
+    > .usa-grid {
+      padding: 0;
+
+      @include media($medium-screen) {
+        padding-left: $spacing-large;
+        padding-right: $spacing-large;
+      }
+    }
+
+    .usa-footer-primary-content {
+      padding-left: 0;
+      padding-right: 0;
+
+      li {
+        margin-left: $spacing-md-small;
+
+        @include media($medium-screen) {
+          margin-left: 0;
+        }
+      }
+
+      .usa-footer-primary-link {
+        margin-left: 0;
+      }
+    }
   }
 
   ul {
@@ -233,7 +348,7 @@ li.usa-footer-primary-content {
     }
 
     &:last-child {
-      border-bottom: 1px solid $color-base;
+      border-bottom: 1px solid $color-gray-light;
 
       @include media($medium-screen) {
         border-bottom: none;
@@ -300,33 +415,52 @@ li.usa-footer-primary-content {
 }
 
 .usa-footer-logo-img {
-  max-width: 14rem;
+  max-width: 8rem;
+
+  @include media($medium-screen) {
+    float: left;
+  }
+}
+
+.usa-footer-big-logo-img {
+  max-width: 10rem;
 }
 
 .usa-footer-slim-logo-img {
   float: left;
-  max-width: 10rem;
+  max-width: 5rem;
 }
 
 .usa-footer-logo-heading {
-  margin-top: 2rem;
+  display: block;
+  margin-top: $spacing-small;
+
+  @include media($medium-screen) {
+    display: inline-block;
+    margin-top: $spacing-large;
+    padding-left: $spacing-md-small;
+  }
 }
 
-.usa-footer-contact-heading {
-  margin-top: 0;
+.usa-footer-big-logo-heading {
+  margin-top: $spacing-md-small;
 
   @include media($medium-screen) {
-    margin-top: 1rem;
+    margin-top: $spacing-medium;
   }
 }
 
 .usa-footer-slim-logo-heading {
-  display: block;
-  padding-top: 1rem;
+  display: inline-block;
+  margin-top: $spacing-md-small;
+  padding-left: $spacing-md-small;
+}
+
+.usa-footer-contact-heading {
+  margin-top: 0;
 
   @include media($medium-screen) {
-    display: inline-block;
-    padding-left: 1em;
+    margin-top: 1rem;
   }
 }
 
@@ -348,8 +482,8 @@ li.usa-footer-primary-content {
   width: $hit-area;
 
   @include media($medium-screen) {
-    @include margin(0 0 0 1rem);
-    left: 1.2rem;
+    @include margin(0 0 0 $spacing-x-small);
+    left: $spacing-md-small;
   }
 
   span {

data/vendor/assets/stylesheets/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 {
@@ -28,7 +28,8 @@ $z-index-nav:     9000;
     @include media($nav-width) {
       float: right;
       margin-bottom: 0;
-      max-width: 21.5rem;
+      max-width: 23.5rem;
+      width: 21.5rem;
     }
   }
 }
@@ -120,7 +121,7 @@ $z-index-nav:     9000;
 .usa-header-basic {
   .usa-logo {
     @include media($nav-width) {
-      bottom: 1.9rem;
+      bottom: -4rem;
       position: absolute;
     }
   }
@@ -167,7 +168,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%;

data/vendor/assets/stylesheets/uswds/components/_navigation.scss

@@ -6,19 +6,31 @@
 }
 
 .usa-navbar {
-  border-bottom: 1px solid $color-gray-light;
+  border-bottom: 1px solid $color-gray-lighter;
   height: 4rem;
 
   @include media($nav-width) {
     border-bottom: none;
     display: inline-block;
-    height: 10.3rem; // XXX magic number
   }
 }
 
 .usa-nav-link {
   @include font-smoothing;
 
+  &:focus {
+    outline-offset: 0;
+  }
+
+  &.usa-accordion-button {
+    @include media($nav-width) {
+      span {
+        margin-right: -2rem;
+        padding-right: 2rem;
+      }
+    }
+  }
+
   &:hover {
     span {
       @include media($nav-width) {
@@ -42,7 +54,7 @@
   @include position(fixed, 0 0 0 auto);
 
   background: $color-white;
-  border-left: 1px solid $color-gray-light;
+  border-left: 1px solid $color-gray-lighter;
   border-right: 0;
   display: flex;
   flex-direction: column;
@@ -52,20 +64,40 @@
   width: $sliding-panel-width;
   z-index: $z-index-nav;
 
+  // Defaulting to hidden is very important for ensuring
+  // that the nav contents aren't in the tab order if
+  // the nav menu is off-screen.
+  visibility: hidden;
+
   @include media($nav-width) {
     @include padding(5rem 0 0 null);
+    background: transparent;
     border-left: none;
     display: block;
     float: right;
     overflow-y: visible;
+    padding-left: 0;
     position: relative;
     transform: translateX(0);
     width: auto;
+    visibility: visible;
   }
 
   &.is-visible {
+    // It's very important that we scope the transition to
+    // only include 'transform' here; we used to transition
+    // on 'all', but this prevented the close button from
+    // being focused after activating the nav menu, as the
+    // button wasn't yet visible due to 'visibility'
+    // implicitly being part of the CSS transition.
     transform: translateX(0);
-    transition: all 0.3s ease-in-out;
+    transition: transform 0.3s ease-in-out;
+
+    visibility: visible;
+  }
+
+  a:focus {
+    outline-offset: 0;
   }
 
   nav {
@@ -90,7 +122,7 @@
 
   .usa-search {
     @include media($nav-width) {
-      margin-left: 1.5rem; // XXX magic number
+      margin-left: 1.8rem; // XXX magic number
     }
   }
 }
@@ -145,20 +177,14 @@
     padding: 1.4rem 1.5rem 1rem 1.8rem;
 
     @include media($nav-width) {
-      @include padding(null 3rem 1.9rem 1.5rem);
+      @include padding(null 3.5rem 1.9rem 1.5rem);
       color: $color-gray;
       font-size: $h5-font-size;
       font-weight: $font-bold;
       width: initial;
     }
 
-    &:focus,
-    &:active {
-      box-shadow: $focus-shadow;
-    }
-
     &:hover {
-      background-color: $color-gray-lightest;
       color: $color-primary;
 
       @include media($nav-width) {
@@ -177,6 +203,11 @@
         background-image: url('#{$image-path}/angle-arrow-down.png');
         background-image: url('#{$image-path}/angle-arrow-down.svg');
         background-position: right 1.5rem top $button-vertical-offset;
+
+        &:hover {
+          background-image: url('#{$image-path}/angle-arrow-down-primary.png');
+          background-image: url('#{$image-path}/angle-arrow-down-primary.svg');
+        }
       }
     }
 
@@ -233,13 +264,14 @@
     @include media($nav-width) {
       @include margin(-0.2rem null 0 0);
       float: left;
+      width: 21.5rem;
     }
   }
 }
 
 .usa-nav-secondary-links {
   @include media($nav-width) {
-    float: left;
+    float: right;
   }
 
   li {
@@ -250,6 +282,7 @@
 
     &:not(:last-child)::after {
       @include media($nav-width) {
+        color: $color-gray-lighter;
         content: '|';
         padding-left: 1rem;
       }
@@ -265,6 +298,7 @@
 
     &:hover {
       color: $color-primary;
+      text-decoration: underline;
     }
   }
 
@@ -273,11 +307,10 @@
     display: none;
 
     @include media($nav-width) {
-      background-image: url('#{$image-path}/search-alt.png');
-      background-image: url('#{$image-path}/search-alt.svg');
+      background-image: url('#{$image-path}/search-primary.png');
+      background-image: url('#{$image-path}/search-primary.svg');
       background-repeat: no-repeat;
       background-position: left center;
-      background-size: 2.2rem;
       display: inline-block;
       padding-left: 2.3rem;
     }
@@ -302,6 +335,7 @@
 
 .usa-nav-submenu {
   // @include usa-sidenav-sublist;
+  padding-left: 1rem;
 
   @include media($nav-width) {
     @include unstyled-list;
@@ -342,8 +376,18 @@
 
   li {
     font-size: $h5-font-size;
+    list-style: none;
     margin-bottom: 0;
   }
+
+  .usa-width-one-fourth {
+    margin-right: 0;
+    width: 100%;
+
+    @include media($nav-width) {
+      @include span-columns(3);
+    }
+  }
 }
 
 // Navigation close button -------- //
@@ -383,11 +427,10 @@
 
 .usa-megamenu {
   @include media($nav-width) {
-    @include padding(3.15rem null); // XXX magic number
+    @include padding(2.15rem null); // XXX magic number
     // XXX this is the difference between the 2rem padding-left
     // of .usa-nav-inner and the $site-margins (3rem) padding-left
     // of .usa-megamenu
-    left: -1rem;
     width: 100%;
   }