uswds-jekyll 2.0.1 → 2.1.0

data/assets/uswds/scss/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;
   }
@@ -94,7 +88,12 @@ select {
 
 .usa-input-required:after {
   color: $color-secondary-darkest;
-  content: ' (*Required)';
+  content: ' (*required)';
+}
+
+.usa-input-optional:after {
+  color: $color-gray-medium;
+  content: ' (optional)';
 }
 
 label {
@@ -112,11 +111,31 @@ 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;
+  background-size: 1rem;
+  padding-right: 3rem;
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  // Show default webkit style on select element when autofilled to show icon
+  &:-webkit-autofill {
+    appearance: menulist;
+  }
+
+  // Remove dotted outline from select element on focus in Firefox
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $color-black;
+  }
+}
+
+option:first-child {
+  font-weight: $font-bold;
 }
 
 legend {
@@ -159,30 +178,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 +215,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 +223,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: $focus-spacing * 2; // Double the offset to account for circular shape
 }
 
 [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 +253,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 +318,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/assets/uswds/scss/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/assets/uswds/scss/elements/_table.scss

@@ -1,40 +1,35 @@
 table {
   border-spacing: 0;
   margin: 2em 0;
-  min-width: 100%;
-
-  thead {
-    th,
-    td {
-      background-color: $color-gray-lightest;
-    }
-  }
+}
 
+thead {
   th {
-    text-align: left;
-  }
-
-  tbody {
-    th {
-      font-weight: $font-normal;
-    }
+    font-weight: $font-bold;
   }
 
   th,
   td {
-    background-color: $color-white;
-    border: 1px solid $color-gray;
-    padding: 1.5rem;
+    background-color: $color-gray-lightest;
   }
 }
 
+th {
+  text-align: left;
+}
+
+th,
+td {
+  background-color: $color-white;
+  border: 1px solid $color-gray;
+  font-weight: $font-normal;
+  padding: 1rem 1.5rem;
+}
+
 .usa-table-borderless {
   thead {
-    tr {
-      background-color: transparent;
-    }
-
     th {
+      background-color: transparent;
       border-top: 0;
     }
   }
@@ -44,4 +39,17 @@ table {
     border-left: 0;
     border-right: 0;
   }
+
+  th {
+    &:first-child {
+      padding-left: 0;
+    }
+  }
+}
+
+caption {
+  @include h5;
+  font-family: $font-serif;
+  margin-bottom: 1.2rem;
+  text-align: left;
 }

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

@@ -22,13 +22,12 @@ a {
     color: $color-primary-darker;
   }
 
-  &:visited {
-    color: $color-visited;
+  &:focus {
+    @include focus;
   }
 
-  &:focus {
-    box-shadow: $focus-shadow;
-    outline: 0;
+  &:visited {
+    color: $color-visited;
   }
 }
 
@@ -67,8 +66,7 @@ h1,
 h2,
 h3,
 h4,
-h5,
-h6 {
+h5 {
   clear: both;
   font-family: $font-serif;
   line-height: $heading-line-height;
@@ -76,6 +74,10 @@ h6 {
   margin-top: 1.5em;
 }
 
+h6 {
+  font-family: $font-sans;
+}
+
 h1 {
   @include h1();
 }
@@ -112,7 +114,7 @@ dfn {
 // Custom typography
 
 .usa-content {
-  p:not(.usa-font-lead),
+  p,
   ul:not(.usa-accordion):not(.usa-accordion-bordered),
   ol:not(.usa-accordion):not(.usa-accordion-bordered) {
     max-width: $text-max-width;
@@ -162,6 +164,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;
 }

data/assets/uswds/scss/uswds.scss

@@ -8,9 +8,9 @@
 // Core -------------- //
 @import 'core/variables';
 @import 'core/fonts';
-@import 'core/base';
 @import 'core/grid';
 @import 'core/utilities';
+@import 'core/base';
 
 // Elements -------------- //
 // Styles basic HTML elements

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: uswds-jekyll
 version: !ruby/object:Gem::Version
-  version: 2.0.1
+  version: 2.1.0
 platform: ruby
 authors:
 - Shawn Allen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-11-21 00:00:00.000000000 Z
+date: 2017-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -61,6 +61,7 @@ extra_rdoc_files: []
 files:
 - LICENSE.md
 - README.md
+- _includes/analytics.html
 - _includes/banner.html
 - _includes/components/banner.html
 - _includes/components/footer.html
@@ -274,11 +275,15 @@ files:
 - assets/uswds/img/angle-arrow-up-primary-hover.svg
 - assets/uswds/img/angle-arrow-up-primary.png
 - assets/uswds/img/angle-arrow-up-primary.svg
+- assets/uswds/img/arrow-both.png
+- assets/uswds/img/arrow-both.svg
 - assets/uswds/img/arrow-down.png
 - assets/uswds/img/arrow-down.svg
 - assets/uswds/img/arrow-right.png
 - assets/uswds/img/arrow-right.svg
 - assets/uswds/img/circle-124.png
+- assets/uswds/img/close-primary.png
+- assets/uswds/img/close-primary.svg
 - assets/uswds/img/close.png
 - assets/uswds/img/close.svg
 - assets/uswds/img/correct8.png
@@ -316,6 +321,8 @@ files:
 - assets/uswds/img/plus.svg
 - assets/uswds/img/search-alt.png
 - assets/uswds/img/search-alt.svg
+- assets/uswds/img/search-primary.png
+- assets/uswds/img/search-primary.svg
 - assets/uswds/img/search.png
 - assets/uswds/img/search.svg
 - assets/uswds/img/social-icons/png/facebook25.png
@@ -463,7 +470,7 @@ files:
 - assets/uswds/scss/lib/settings/_px-to-em.scss
 - assets/uswds/scss/lib/settings/_visual-grid.scss
 - assets/uswds/scss/uswds.scss
-- assets/uswds/uswds-1.3.1.zip
+- assets/uswds/uswds-1.4.3.zip
 homepage: https://standards.usa.gov/
 licenses:
 - CC0-1.0
@@ -484,7 +491,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.10
+rubygems_version: 2.6.3
 signing_key: 
 specification_version: 4
 summary: A Jekyll theme for the U.S. Web Design Standards