_inputs.scss in uswds-rails-1.4.0

- old
+ new

@@ -30,19 +30,13 @@
   font-size: $base-font-size;
   height: $input-height;
   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;
   }
 }
 /* stylelint-enable */
@@ -95,10 +89,16 @@
 .usa-input-required:after {
   color: $color-secondary-darkest;
   content: ' (*Required)';
 }
 
+.usa-input-optional:after {
+  color: $color-gray-medium;
+  content: ' - optional';
+  font-style: italic;
+}
+
 label {
   display: block;
   margin-top: 3rem;
   max-width: $input-max-width;
 }
@@ -110,17 +110,21 @@
 select {
   -moz-appearance: none;
   -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;
 }
 
@@ -157,34 +161,35 @@
 
 [type=checkbox] + label,
 [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,
 [type=radio]:checked + label::before {
   background-color: $color-primary;
@@ -193,33 +198,35 @@
 
 [type=radio]:checked + label::before {
   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');
   background-image: asset-url('#{$image-path}/correct8.svg');
   background-position: 50%;
   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;
 }
 
 // Range inputs
@@ -229,15 +236,10 @@
   border: none;
   padding-left: 0;
   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;
   cursor: pointer;
   height: 1.2rem;
@@ -297,21 +299,9 @@
 
 [type=range]::-ms-fill-upper {
   background: $color-gray-light;
   border: 1px solid $color-gray-medium;
   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 {