uswds-jekyll 4.1.0 → 4.2.0

data/_sass/uswds/components/_header.scss

@@ -102,7 +102,7 @@ $z-index-nav:     9000;
   @include position(fixed, 0);
   background: $color-black;
   opacity: 0;
-  transition: all 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
   visibility: hidden;
   z-index: $z-index-overlay;
 
@@ -154,11 +154,10 @@ $z-index-nav:     9000;
 
   .usa-navbar {
     @include media($nav-width) {
-      @include outer-container();
+      @include outer-container($site-max-width);
       @include padding(null $site-margins);
       display: block;
       height: auto;
-      max-width: $site-max-width;
     }
   }
 
@@ -173,10 +172,8 @@ $z-index-nav:     9000;
 
   .usa-nav-inner {
     @include media($nav-width) {
-      @include outer-container();
+      @include outer-container($site-max-width);
       @include padding(null $site-margins null 1.5rem);
-      margin-top: -1px;
-      max-width: $site-max-width;
       position: relative;
     }
   }
@@ -215,4 +212,17 @@ $z-index-nav:     9000;
       padding-left: $site-margins;
     }
   }
+
+  // Temp code for v1 to force show the search at mobile, not dekstop
+  /* stylelint-disable selector-no-id, declaration-no-important  */
+  .usa-search {
+    &[hidden] {
+      display: block !important;
+
+      @include media($nav-width) {
+        display: none !important;
+      }
+    }
+  }
+  /* stylelint-enable */
 }

data/_sass/uswds/components/_navigation.scss

@@ -44,25 +44,32 @@
 
 .usa-nav-container {
   @include media($nav-width) {
-    @include outer-container();
+    @include outer-container($site-max-width);
     @include padding(null $site-margins);
-    max-width: $site-max-width;
   }
 }
 
 .usa-nav {
   $sliding-panel-width: 26rem;
 
-  @include position(fixed, 0 0 0 auto);
+  @keyframes slidein-left {
+    from {
+      transform: translateX($sliding-panel-width);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
 
+  @include position(fixed, 0 0 0 auto);
   background: $color-white;
   border-left: 1px solid $color-gray-light;
   border-right: 0;
-  display: flex;
+  display: none;
   flex-direction: column;
   overflow-y: auto;
   padding: 2rem;
-  transform: translateX($sliding-panel-width);
   width: $sliding-panel-width;
   z-index: $z-index-nav;
 
@@ -78,8 +85,8 @@
   }
 
   &.is-visible {
-    transform: translateX(0);
-    transition: all 0.3s ease-in-out;
+    animation: slidein-left 0.3s ease-in-out;
+    display: flex;
   }
 
   nav {
@@ -442,11 +449,16 @@
 .usa-nav-close {
   @include button-unstyled;
   @include margin(-1.2rem -1.5rem 1.5rem auto);
+  color: currentColor;
   float: right;
   height: $hit-area;
   text-align: center;
   width: $hit-area;
 
+  &:hover {
+    color: currentColor;
+  }
+
   @include media($nav-width) {
     display: none;
   }

data/_sass/uswds/components/_search.scss

@@ -81,7 +81,7 @@ $usa-btn-big-width:     11.6rem;
 // Extra specificity to override rules set in reset.css.
 input[type=search] { /* stylelint-disable-line selector-no-qualifying-type */
   box-sizing: border-box;
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 [type=search],

data/_sass/uswds/components/_sidenav.scss

@@ -1,8 +1,31 @@
 
 .usa-sidenav-list {
   @include usa-sidenav-list;
+  border-bottom: 1px solid;
+  border-top: 1px solid;
+
+  @include media($large-screen) {
+    border-bottom: none;
+    border-top: none;
+  }
+
+  .usa-grid & {
+    @include margin(null (-$site-margins-mobile) null (-$site-margins-mobile));
+
+    @include media($medium-screen) {
+      @include margin(null 0);
+    }
+  }
 }
 
 .usa-sidenav-sub_list {
   @include usa-sidenav-sublist;
 }
+
+.usa-layout-docs-sidenav {
+  padding-top: 2.4rem;
+
+  @include media($large-screen) {
+    padding-top: 0;
+  }
+}

data/_sass/uswds/core/_base.scss

@@ -13,6 +13,7 @@ html {
 
 body {
   background-color: $color-white;
+  color: $color-base;
   overflow-x: hidden;
 }
 

data/_sass/uswds/core/_grid.scss

@@ -1,8 +1,7 @@
 // Grid container
 .usa-grid,
 .usa-grid-full {
-  @include outer-container();
-  max-width: $site-max-width;
+  @include outer-container($site-max-width);
 }
 
 .usa-grid {

data/_sass/uswds/core/_utilities.scss

@@ -191,7 +191,7 @@
     display: block;
     font-family: $font-sans;
     line-height: 1.3;
-    padding: 0.85rem 1rem 0.85rem 1.8rem;
+    padding: 0.85rem 1rem 0.85rem $site-margins-mobile;
     text-decoration: none;
 
     &:hover {
@@ -207,10 +207,10 @@
     }
 
     &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
-      border-left: 0.4rem solid $color-primary;
+      border-left: $sidenav-current-border-width solid $color-primary;
       color: $color-primary;
       font-weight: $font-bold;
-      padding-left: 1.4rem;
+      padding-left: $site-margins-mobile - $sidenav-current-border-width;
     }
   }
 }

data/_sass/uswds/core/_variables-vendor.scss

@@ -0,0 +1,12 @@
+/// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag.
+///
+/// @type Bool
+///
+/// @example css - CSS Output
+///   html {
+///     box-sizing: border-box; }
+///
+///   *, *::after, *::before {
+///     box-sizing: inherit;
+///   }
+$border-box-sizing: false;

data/_sass/uswds/core/_variables.scss

@@ -120,29 +120,33 @@ $small: new-breakpoint(min-width $small-screen $grid-columns-small) !default;
 $medium: new-breakpoint(min-width $medium-screen $grid-columns-medium) !default;
 $large: new-breakpoint(min-width $large-screen $grid-columns-large) !default;
 
+// Set the base path for assets (used for font and image paths below)
+$asset-path: '../' !default;
+
 // Relative font and image file paths
-$font-path:   '../fonts' !default;
-$image-path:  '../img' !default;
+$font-path: '#{$asset-path}fonts' !default;
+$image-path: '#{$asset-path}img' !default;
 
 // Set $asset-pipeline to true if you're using the Rails Asset Pipeline
 $asset-pipeline:      false !default;
 
 // Magic Numbers
-$text-max-width:          66ch !default; // 66 characters per line
-$lead-max-width:          77rem !default;
-$site-max-width:          1040px !default;
-$site-margins:            3rem !default;
-$site-margins-mobile:     1.5rem !default;
-$article-max-width:       600px !default;
-$input-max-width:         46rem !default;
-$label-border-radius:     2px !default;
-$checkbox-border-radius:  2px !default;
-$border-radius:           3px !default;
-$button-border-radius:    5px !default;
-$box-shadow:              0 0 2px $color-shadow !default;
-$focus-outline:           2px dotted $color-gray-light;
-$focus-spacing:           3px;
-$nav-width:               951px !default;
+$text-max-width:                66ch !default; // 66 characters per line
+$lead-max-width:                77rem !default;
+$site-max-width:                1040px !default;
+$site-margins:                  3rem !default;
+$site-margins-mobile:           1.5rem !default;
+$article-max-width:             600px !default;
+$input-max-width:               46rem !default;
+$label-border-radius:           2px !default;
+$checkbox-border-radius:        2px !default;
+$border-radius:                 3px !default;
+$button-border-radius:          5px !default;
+$box-shadow:                    0 0 2px $color-shadow !default;
+$focus-outline:                 2px dotted $color-gray-light !default;
+$focus-spacing:                 3px !default;
+$nav-width:                     951px !default;
+$sidenav-current-border-width:  0.4rem !default; // must be in rem for math
 
 // 44 x 44 pixels hit target following Apple iOS Human Interface
 // Guidelines

data/_sass/uswds/elements/_inputs.scss

@@ -86,16 +86,28 @@ select {
   padding-top: 3px;
 }
 
+// Deprecated: Some screen readers can't read CSS content.
+// Will be removed in 2.0.
 .usa-input-required:after {
   color: $color-secondary-darkest;
   content: ' (*required)';
 }
 
+// Deprecated: Some screen readers can't read CSS content.
+// Will be removed in 2.0.
 .usa-input-optional:after {
   color: $color-gray-medium;
   content: ' (optional)';
 }
 
+.usa-input-label-helper {
+  color: $color-gray-medium;
+}
+
+.usa-input-label-required {
+  color: $color-secondary-darkest;
+}
+
 label {
   display: block;
   margin-top: 3rem;
@@ -107,12 +119,12 @@ textarea {
 }
 
 select {
-  -moz-appearance: none;
-  -webkit-appearance: none;
   appearance: none;
   background-color: $color-white;
   background-image: url('#{$image-path}/arrow-both.png');
-  background-image: url('#{$image-path}/arrow-both.svg');
+  // Ensure browsers that don't support SVG in background-image (IE 11 and below) fall back to PNG.
+  // See https://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/
+  background-image: none, url('#{$image-path}/arrow-both.svg'), url('#{$image-path}/arrow-both.png');
   background-position: right 1.3rem center;
   background-repeat: no-repeat;
   background-size: 1rem;
@@ -184,15 +196,19 @@ legend {
 [type=checkbox] + label::before,
 [type=radio] + label::before {
   background: $color-white;
-  border-radius: $checkbox-border-radius;
-  box-shadow: 0 0 0 1px $color-gray-medium;
   content: '\a0';
   display: inline-block;
+  text-indent: 0.15em;
+  vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
+}
+
+[type=checkbox] + label::before {
+  border-radius: $checkbox-border-radius;
+  box-shadow: 0 0 0 1px $color-gray-medium;
   height: $spacing-medium;
   line-height: $spacing-medium;
+  margin-left: 1px;
   margin-right: 0.6em;
-  text-indent: 0.15em;
-  vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
   width: $spacing-medium;
 }
 
@@ -201,6 +217,7 @@ legend {
   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-left: 3px;
   margin-right: 0.75em;
   width: 1.4rem;
 }
@@ -244,96 +261,133 @@ legend {
   cursor: not-allowed;
 }
 
-// Range inputs
-
-[type=range] {
-  -webkit-appearance: none;
-  border: none;
-  padding-left: 0;
-  width: 100%;
-}
-
-[type=range]::-webkit-slider-runnable-track {
-  background: $color-gray-light;
-  border: 1px solid $color-gray-medium;
-  cursor: pointer;
-  height: 1.2rem;
-  width: 100%;
+@media print {
+  [type=checkbox]:checked + label::before,
+  [type=checkbox]:checked:disabled + label::before {
+    background-image: none;
+    background-color: $color-white;
+    content: url('#{$image-path}/correct8-alt.png');
+    content: url('#{$image-path}/correct8-alt.svg');
+    text-indent: 0;
+  }
 }
 
-[type=range]::-moz-range-track {
-  background: $color-primary;
-  border: 1px solid $color-gray-medium;
-  cursor: pointer;
-  height: 1.2rem;
-  width: 100%;
-}
+// Range inputs
 
-[type=range]::-ms-track {
-  background: transparent;
-  color: transparent;
-  cursor: pointer;
-  height: 1.2rem;
-  width: 100%;
+// Change to $color-focus in 2.0
+@mixin range-focus {
+  box-shadow: 0 0 0 2px $color-primary;
 }
 
-[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
+@mixin range-track {
+  background: $color-gray-lighter;
   border: 1px solid $color-gray-medium;
-  height: 2.2rem;
-  border-radius: 1.5rem;
-  background: $color-gray-lightest;
   cursor: pointer;
-  margin-top: -.65rem;
-  width: 2.2rem;
-}
-
-[type=range]::-moz-range-thumb {
-  background: $color-gray-lightest;
-  border: 1px solid $color-gray-medium;
-  border-radius: 1.5rem;
-  cursor: pointer;
-  height: 2.2rem;
-  width: 2.2rem;
+  height: 1.6rem;
+  width: 100%;
 }
 
-[type=range]::-ms-thumb {
+@mixin range-thumb {
   background: $color-gray-lightest;
-  border: 1px solid $color-gray-medium;
+  box-shadow: 0 0 0 1px $color-gray-medium;
   border-radius: 1.5rem;
   cursor: pointer;
-  height: 2.2rem;
-  width: 2.2rem;
+  height: 2.5rem;
+  width: 2.5rem;
 }
 
-[type=range]::-ms-fill-lower {
+@mixin range-ms-fill {
   background: $color-gray-light;
   border: 1px solid $color-gray-medium;
   border-radius: 2rem;
 }
 
-[type=range]::-ms-fill-upper {
-  background: $color-gray-light;
-  border: 1px solid $color-gray-medium;
-  border-radius: 2rem;
+[type=range] {
+  appearance: none;
+  border: none;
+  padding-left: 0;
+  overflow: hidden;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+
+    &::-webkit-slider-thumb {
+      @include range-focus;
+    }
+
+    &::-moz-range-thumb {
+      @include range-focus;
+    }
+
+    &::-ms-thumb {
+      @include range-focus;
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    @include range-track;
+  }
+
+  &::-moz-range-track {
+    @include range-track;
+  }
+
+  &::-ms-track {
+    @include range-track;
+  }
+
+  &::-webkit-slider-thumb {
+    @include range-thumb;
+    appearance: none;
+    margin-top: -0.6rem;
+  }
+
+  &::-moz-range-thumb {
+    @include range-thumb;
+  }
+
+  &::-ms-thumb {
+    @include range-thumb;
+  }
+
+  &::-ms-fill-lower {
+    @include range-ms-fill;
+  }
+
+  &::-ms-fill-upper {
+    @include range-ms-fill;
+  }
+}
+
+// File input type
+[type='file'] {
+  border: none;
+  padding-left: 0;
 }
 
 // Memorable dates
 
-.usa-date-of-birth {
+.usa-date-of-birth { /* stylelint-disable-line */
   label {
     margin-top: 0;
   }
 
-  [type=number]::-webkit-inner-spin-button,
-  [type=number]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-  }
-
   [type=number] {
     -moz-appearance: textfield;
+
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+
+    &::-webkit-contacts-auto-fill-button {
+      visibility: hidden;
+      display: none !important; /* stylelint-disable-line declaration-no-important */
+      pointer-events: none;
+      height: 0;
+      width: 0;
+      margin: 0;
+    }
   }
 }