uswds-rails 1.3.1.1 → 1.4.0

data/vendor/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: url('#{$image-path}/arrow-down.png');
-  background-image: url('#{$image-path}/arrow-down.svg');
+  background-image: url('#{$image-path}/arrow-both.png');
+  background-image: 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: 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/vendor/assets/stylesheets/uswds/elements/_labels.scss

@@ -1,6 +1,6 @@
 .usa-label {
-  background-color: $color-primary;
-  border-radius: $border-radius;
+  background-color: $color-gray;
+  border-radius: $label-border-radius;
   color: $color-white;
   font-size: $h5-font-size;
   margin-right: 0.5rem;

data/vendor/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;
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: uswds-rails
 version: !ruby/object:Gem::Version
-  version: 1.3.1.1
+  version: 1.4.0
 platform: ruby
 authors:
 - Jason Garber
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-09-01 00:00:00.000000000 Z
+date: 2017-10-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -277,11 +277,15 @@ files:
 - vendor/assets/images/uswds/angle-arrow-up-primary-hover.svg
 - vendor/assets/images/uswds/angle-arrow-up-primary.png
 - vendor/assets/images/uswds/angle-arrow-up-primary.svg
+- vendor/assets/images/uswds/arrow-both.png
+- vendor/assets/images/uswds/arrow-both.svg
 - vendor/assets/images/uswds/arrow-down.png
 - vendor/assets/images/uswds/arrow-down.svg
 - vendor/assets/images/uswds/arrow-right.png
 - vendor/assets/images/uswds/arrow-right.svg
 - vendor/assets/images/uswds/circle-124.png
+- vendor/assets/images/uswds/close-primary.png
+- vendor/assets/images/uswds/close-primary.svg
 - vendor/assets/images/uswds/close.png
 - vendor/assets/images/uswds/close.svg
 - vendor/assets/images/uswds/correct8.png
@@ -319,6 +323,8 @@ files:
 - vendor/assets/images/uswds/plus.svg
 - vendor/assets/images/uswds/search-alt.png
 - vendor/assets/images/uswds/search-alt.svg
+- vendor/assets/images/uswds/search-primary.png
+- vendor/assets/images/uswds/search-primary.svg
 - vendor/assets/images/uswds/search.png
 - vendor/assets/images/uswds/search.svg
 - vendor/assets/images/uswds/social-icons/png/facebook25.png