uswds-rails 1.3.1.1 → 1.4.0

data/app/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: asset-url('#{$image-path}/angle-arrow-down.png');
         background-image: asset-url('#{$image-path}/angle-arrow-down.svg');
         background-position: right 1.5rem top $button-vertical-offset;
+
+        &:hover {
+          background-image: asset-url('#{$image-path}/angle-arrow-down-primary.png');
+          background-image: asset-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: asset-url('#{$image-path}/search-alt.png');
-      background-image: asset-url('#{$image-path}/search-alt.svg');
+      background-image: asset-url('#{$image-path}/search-primary.png');
+      background-image: asset-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%;
   }
 

data/app/assets/stylesheets/uswds/components/_search.scss

@@ -50,10 +50,10 @@ $usa-btn-big-width:     11.6rem;
   }
 
   .usa-search-submit-text {
-    display: none;
+    @include sr-only();
 
     @include media($small-screen) {
-      display: block;
+      @include not-sr-only();
     }
   }
 

data/app/assets/stylesheets/uswds/core/_utilities.scss

@@ -30,9 +30,9 @@
 }
 
 @mixin h6 {
-  font-family: $font-sans;
   font-size: $h6-font-size;
   font-weight: $font-normal;
+  line-height: $base-line-height;
   text-transform: uppercase;
 }
 
@@ -49,6 +49,15 @@
   left: -999em;
 }
 
+// This "negates" the sr-only() helper; useful if
+// we want the default state of something to be
+// for screen readers only, but we want to force
+// it to show for sighted users under more specific
+// conditions.
+@mixin not-sr-only() {
+  position: static;
+}
+
 .usa-sr-only {
   @include sr-only();
 }
@@ -180,12 +189,12 @@
     text-decoration: none;
 
     &:hover {
-      background-color: $color-gray-lightest;
       color: $color-primary;
       text-decoration: none;
     }
 
     &:focus {
+      outline-offset: 0;
       position: relative;
       z-index: 1;
     }
@@ -224,6 +233,10 @@
     a {
       padding-left: 3.8rem;
 
+      &:focus {
+        outline-offset: 0;
+      }
+
       &:hover {
         padding-left: 3.8rem;
       }

data/app/assets/stylesheets/uswds/elements/_inputs.scss

@@ -32,15 +32,9 @@ select {
   line-height: $input-line-height;
   margin: 0.2em 0;
   max-width: $input-max-width;
-  outline: none;
   padding: $input-padding-vertical 0.7em;
   width: 100%;
 
-  &:focus,
-  &.usa-input-focus {
-    box-shadow: $focus-shadow;
-  }
-
   &.usa-input-success {
     border: 3px solid $color-green-light;
   }
@@ -97,6 +91,12 @@ select {
   content: ' (*Required)';
 }
 
+.usa-input-optional:after {
+  color: $color-gray-medium;
+  content: ' - optional';
+  font-style: italic;
+}
+
 label {
   display: block;
   margin-top: 3rem;
@@ -112,13 +112,17 @@ select {
   -webkit-appearance: none;
   appearance: none;
   background-color: $color-white;
-  background-image: asset-url('#{$image-path}/arrow-down.png');
-  background-image: asset-url('#{$image-path}/arrow-down.svg');
+  background-image: asset-url('#{$image-path}/arrow-both.png');
+  background-image: asset-url('#{$image-path}/arrow-both.svg');
   background-position: right 1.3rem center;
   background-repeat: no-repeat;
   background-size: 1.3rem;
 }
 
+option:first-child {
+  font-weight: $font-bold;
+}
+
 legend {
   font-size: $h2-font-size;
   font-weight: $font-bold;
@@ -159,30 +163,31 @@ legend {
 [type=radio] + label {
   cursor: pointer;
   font-weight: 400;
-  margin-bottom: 0.5em;
+  margin-bottom: 0.65em;
 }
 
 [type=checkbox] + label::before,
 [type=radio] + label::before {
   background: $color-white;
-  border-radius: $border-radius;
+  border-radius: $checkbox-border-radius;
   box-shadow: 0 0 0 1px $color-gray-medium;
   content: '\a0';
   display: inline-block;
-  height: 1.8rem;
-  line-height: 1.8rem;
+  height: $spacing-medium;
+  line-height: $spacing-medium;
   margin-right: 0.6em;
   text-indent: 0.15em;
   vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
-  width: 1.8rem;
+  width: $spacing-medium;
 }
 
 [type=radio] + label::before {
-  box-shadow: 0 0 0 2px $color-white, 0 0 0 3px $color-gray-medium;
-  height: 1.6rem;
-  line-height: 1.6rem;
-  width: 1.6rem;
   border-radius: 100%;
+  box-shadow: 0 0 0 2px $color-white, 0 0 0 3px $color-gray-medium;
+  height: 1.4rem; // Size overrides to account for shape + checked styling
+  line-height: 1.4rem;
+  margin-right: 0.75em;
+  width: 1.4rem;
 }
 
 [type=checkbox]:checked + label::before,
@@ -195,10 +200,6 @@ legend {
   box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary;
 }
 
-[type=radio]:focus + label::before {
-  box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary, 0 0 3px 4px $color-focus, 0 0 7px 4px $color-focus;
-}
-
 [type=checkbox]:checked + label::before,
 [type=checkbox]:checked:disabled + label::before {
   background-image: asset-url('#{$image-path}/correct8.png');
@@ -207,17 +208,23 @@ legend {
   background-repeat: no-repeat;
 }
 
-[type=checkbox]:focus + label::before {
-  box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-primary;
+[type=radio]:focus + label::before {
+  outline: $focus-outline;
+  outline-offset: 5px;
 }
 
 [type=checkbox]:disabled + label {
-  color: $color-gray;
+  color: $color-gray-lighter;
+}
+
+[type=checkbox]:focus + label::before {
+  outline: $focus-outline;
+  outline-offset: $focus-spacing;
 }
 
 [type=checkbox]:disabled + label::before,
 [type=radio]:disabled + label::before {
-  background: $color-gray-lighter;
+  background: $color-gray-lightest;
   box-shadow: 0 0 0 1px $color-gray-light;
   cursor: not-allowed;
 }
@@ -231,11 +238,6 @@ legend {
   width: 100%;
 }
 
-[type=range]:focus {
-  box-shadow: none;
-  outline: none;
-}
-
 [type=range]::-webkit-slider-runnable-track {
   background: $color-gray-light;
   border: 1px solid $color-gray-medium;
@@ -301,18 +303,6 @@ legend {
   border-radius: 2rem;
 }
 
-[type=range]:focus::-webkit-slider-thumb {
-  border: 2px solid $color-focus;
-}
-
-[type=range]:focus::-moz-range-thumb {
-  border: 2px solid $color-focus;
-}
-
-[type=range]:focus::-ms-thumb {
-  border: 2px solid $color-focus;
-}
-
 // Memorable dates
 
 .usa-date-of-birth {

data/app/assets/stylesheets/uswds/elements/_typography.scss

@@ -25,11 +25,6 @@ a {
   &:visited {
     color: $color-visited;
   }
-
-  &:focus {
-    box-shadow: $focus-shadow;
-    outline: 0;
-  }
 }
 
 @mixin external-link($external-link, $external-link-hover) {
@@ -162,6 +157,7 @@ dfn {
 .usa-font-lead {
   font-family: $font-serif;
   font-size: $lead-font-size;
+  font-weight: $font-normal;
   line-height: $lead-line-height;
   max-width: $lead-max-width;
 }