uswds-jekyll 5.0.1 → 5.2.0

data/_sass/uswds/src/components/_breadcrumb.scss

@@ -0,0 +1,168 @@
+//
+// General Settings
+// =====================================
+
+// This helps balance spacing around inline-block elements
+$gap-inline-spacer: -0.25em;
+
+$breadcrumb-gap: 1.5;
+$breadcrumb-icon-height: 1.35ex;
+$breadcrumb-icon-spacing: calc(
+  #{units($breadcrumb-gap)} + #{$gap-inline-spacer}
+);
+
+$icon-breadcrumb-separator: (
+  "name": "angle-arrow-right",
+  "svg-height": 64,
+  "svg-width": 40,
+  "height": $breadcrumb-icon-height,
+  "color": $theme-breadcrumb-separator-color,
+);
+
+$icon-breadcrumb-back: (
+  "name": "arrow-left",
+  "svg-height": 64,
+  "svg-width": 64,
+  "height": $breadcrumb-icon-height,
+  "color": $theme-breadcrumb-separator-color,
+);
+
+// Set default value for custom mixin exdent-icon()
+$breadcrumb-back-icon-aspect: (
+  map-get($icon-breadcrumb-back, "svg-width"),
+  map-get($icon-breadcrumb-back, "svg-height")
+);
+
+// Defines spacing so back icon is optically placed
+@mixin exdent-icon($dim: $breadcrumb-back-icon-aspect) {
+  $aspect: nth($dim, 1) / nth($dim, 2);
+  $icon-width: $breadcrumb-icon-height * $aspect;
+  padding-left: calc(#{$icon-width} + #{$breadcrumb-icon-spacing});
+  text-indent: calc((#{$icon-width} + #{$breadcrumb-icon-spacing}) * -1);
+}
+
+.usa-breadcrumb {
+  @include typeset(
+    $theme-breadcrumb-font-family,
+    $theme-breadcrumb-font-size,
+    3
+  );
+  @include set-text-and-bg($theme-breadcrumb-background-color);
+  @include u-padding-x($theme-breadcrumb-padding-x);
+
+  @include at-media($theme-breadcrumb-min-width) {
+    @include u-padding-bottom($theme-breadcrumb-padding-bottom);
+    @include u-padding-top($theme-breadcrumb-padding-top);
+  }
+
+  &.usa-breadcrumb--wrap {
+    @include at-media($theme-breadcrumb-min-width) {
+      @include u-line-height($theme-breadcrumb-font-family, 4);
+    }
+  }
+
+  &:not(.usa-breadcrumb--wrap) {
+    .usa-breadcrumb__list {
+      @include at-media($theme-breadcrumb-min-width) {
+        @include u-white-space("no-wrap");
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+.usa-breadcrumb__list {
+  @include unstyled-list;
+  @include u-display("block");
+  @include u-margin(-$theme-focus-width);
+  @include u-padding($theme-focus-width);
+}
+
+.usa-breadcrumb__list-item {
+  @include sr-only;
+  @include u-display("inline");
+  @include u-white-space("no-wrap");
+
+  @include at-media-max($theme-breadcrumb-min-width) {
+    @include u-white-space("wrap");
+
+    // If parent link only (mobile), only show parent of current link
+    &:nth-last-child(2) {
+      @include not-sr-only;
+
+      .usa-breadcrumb__link {
+        @include button-unstyled;
+        @include exdent-icon;
+        @include place-icon(
+          $icon-breadcrumb-back,
+          "before",
+          0,
+          baseline,
+          $theme-breadcrumb-background-color
+        );
+
+        // Override link colors from button-unstyled()
+        @include set-link-from-bg(
+          $theme-breadcrumb-background-color,
+          $theme-breadcrumb-link-color
+        );
+
+        @include u-display("inline-block");
+        @include u-padding-bottom($theme-breadcrumb-padding-bottom);
+        @include u-padding-top($theme-breadcrumb-padding-top);
+
+        // Prevent underline that extends beyond text
+        &,
+        &:hover,
+        &:active {
+          @include u-text("no-underline");
+        }
+        span {
+          @include u-text("underline");
+        }
+      }
+
+      // Override icon spacing from place-icon() with non-token value
+      .usa-breadcrumb__link::before {
+        margin-right: $breadcrumb-icon-spacing;
+      }
+    }
+  }
+
+  @include at-media($theme-breadcrumb-min-width) {
+    @include not-sr-only;
+
+    // Breadcrumb separator ›
+    &:not(:last-child) {
+      @include place-icon(
+        $icon-breadcrumb-separator,
+        "after",
+        0,
+        baseline,
+        $theme-breadcrumb-background-color
+      );
+    }
+
+    // Style overrides for separator using non-token values
+    &:not(:last-child)::after {
+      margin-left: $breadcrumb-icon-spacing;
+      margin-right: $breadcrumb-icon-spacing;
+    }
+  }
+}
+
+.usa-breadcrumb__link {
+  @include set-link-from-bg(
+    $theme-breadcrumb-background-color,
+    $theme-breadcrumb-link-color
+  );
+  @include u-display("inline");
+
+  // Prevent underline that extends beyond text
+  @include u-text("no-underline");
+
+  span {
+    @include u-text("underline");
+  }
+}

data/_sass/uswds/src/components/_footer.scss

@@ -4,6 +4,10 @@
   @include border-box-sizing;
   @include typeset($theme-footer-font-family);
   overflow: hidden;
+
+  > .grid-container {
+    @include grid-container($theme-footer-max-width);
+  }
 }
 
 .usa-footer__return-to-top {
@@ -16,10 +20,9 @@
 }
 
 .usa-footer__nav {
-  @include u-margin-x("auto");
+  @include grid-container($theme-footer-max-width);
   @include u-padding-x(0);
   border-bottom: 1px solid color("base-light");
-  max-width: units("desktop");
 
   @include at-media("mobile-lg") {
     @include add-responsive-site-margins;
@@ -33,11 +36,14 @@
 
 .usa-footer__primary-section {
   background-color: color("base-lightest");
+
+  > .grid-container {
+    @include grid-container($theme-footer-max-width);
+  }
 }
 
 .usa-footer__primary-container {
-  @include u-margin-x("auto");
-  max-width: units("desktop");
+  @include grid-container($theme-footer-max-width);
 
   @include at-media("desktop") {
     @include u-padding-x(4);
@@ -133,6 +139,10 @@
   @include u-padding-y(2.5);
   background-color: color("base-lighter");
 
+  > .grid-container {
+    @include grid-container($theme-footer-max-width);
+  }
+
   a {
     color: color("ink");
   }

data/_sass/uswds/src/components/_header.scss

@@ -126,7 +126,7 @@ $z-index-overlay: 400;
   position: fixed;
   background: color("black");
   opacity: opacity(0);
-  transition: opacity 0.2s ease-in-out;
+  transition: opacity $project-easing;
   visibility: hidden;
   z-index: z-index($z-index-overlay);
 

data/_sass/uswds/src/components/_identifier.scss

@@ -0,0 +1,146 @@
+$identifier-logo-height: 6;
+$identifier-section-margin-y: 2;
+$identifier-section-margin-y-small: 1;
+$identifier-link-gap: 1.5;
+$identifier-link-gap-desktop: 1;
+$identifier-links-gap: 4 !default;
+
+@mixin identifier-secondary-link {
+  @include set-link-from-bg(
+    $theme-identifier-background-color,
+    $theme-identifier-secondary-link-color
+  );
+}
+
+//
+// General Styles
+// =====================================
+.usa-identifier {
+  @include typeset($theme-identifier-font-family, "sm", 3);
+  @include set-text-and-bg($theme-identifier-background-color);
+  padding-bottom: units(2);
+}
+
+.usa-identifier__container {
+  @include grid-container;
+  @include u-maxw($theme-identifier-max-width);
+}
+
+.usa-identifier__section {
+  @include u-padding-y($identifier-section-margin-y);
+}
+
+.usa-identifier__section--masthead {
+  .usa-identifier__container {
+    @include at-media("tablet") {
+      @include u-align-items("align-center");
+      @include u-display("flex");
+    }
+  }
+}
+
+.usa-identifier__logos {
+  display: flex;
+  margin-right: units(2);
+}
+
+.usa-identifier__logo {
+  @include u-text-decoration("no-underline");
+  height: units($identifier-logo-height);
+  display: block;
+
+  & + .usa-identifier__logo {
+    margin-left: units(1);
+  }
+}
+
+.usa-identifier__logo-img {
+  height: 100%;
+  width: auto;
+}
+
+.usa-identifier__identity {
+  @include u-flex("fill");
+  margin-top: units(2);
+
+  @include at-media("tablet") {
+    margin-top: units(0);
+  }
+}
+
+.usa-identifier__identity-domain,
+.usa-identifier__identity-disclaimer {
+  margin: 0;
+  padding: 0;
+}
+
+.usa-identifier__identity-domain {
+  @include u-text("light", $theme-identifier-identity-domain-color);
+}
+
+.usa-identifier__identity-disclaimer {
+  @include u-text("bold");
+
+  a {
+    @include set-link-from-bg($theme-identifier-background-color);
+  }
+}
+
+.usa-identifier__section--required-links {
+  @include at-media("tablet") {
+    @include u-padding-y($identifier-section-margin-y-small);
+  }
+  @include at-media("desktop") {
+    @include u-font-size($theme-identifier-font-family, "xs");
+  }
+}
+
+.usa-identifier__required-links-list {
+  @include add-list-reset;
+  @include u-margin-y(0);
+
+  @include at-media("tablet") {
+    column-count: 2;
+    column-gap: units($identifier-links-gap);
+    column-fill: balance;
+  }
+
+  @include at-media("desktop") {
+    column-count: 4;
+  }
+}
+
+.usa-identifier__required-links-item {
+  break-inside: avoid;
+  margin-bottom: units($identifier-link-gap);
+
+  &:last-child {
+    margin-bottom: units(0);
+  }
+
+  @include at-media("desktop") {
+    margin-bottom: units($identifier-link-gap-desktop);
+  }
+}
+
+.usa-identifier__required-link {
+  @include identifier-secondary-link;
+  display: inline-block;
+}
+
+.usa-identifier__section--usagov a {
+  @include set-link-from-bg($theme-identifier-background-color);
+  @include u-text("bold");
+  display: inline-block;
+  margin-top: units(1);
+
+  @include at-media("tablet") {
+    margin-top: 0;
+  }
+}
+
+.usa-identifier__usagov-description {
+  @include at-media("tablet") {
+    display: inline-flex;
+  }
+}

data/_sass/uswds/src/components/_media-block.scss

@@ -1,7 +1,12 @@
+.usa-media-block {
+  @include u-align-items("align-start");
+  @include u-display("flex");
+}
+
 .usa-media-block__img {
   @include media-block-img;
 }
 
 .usa-media-block__body {
-  overflow: hidden;
+  @include u-flex(1);
 }

data/_sass/uswds/src/components/_megamenu.scss

@@ -9,7 +9,10 @@
 
 .usa-megamenu {
   .usa-col {
-    @include u-flex(1);
+    // Flex grow to take up available width.
+    // Flex shrink so long nav lines don't extend beyond viewport.
+    // Finally `flex-basis: auto` for IE11.
+    flex: 1 1 auto;
     @include at-media($theme-header-min-width) {
       // needs this round() to avoid a compile bug
       @include u-flex(round(12 / $theme-megamenu-columns));

data/_sass/uswds/src/components/_section.scss

@@ -29,10 +29,14 @@
   }
 
   a {
-    color: color("base-lighter");
+    color: color($theme-link-reverse-color);
 
     &:hover {
-      color: color("white");
+      color: color($theme-link-reverse-hover-color);
+    }
+
+    &:active {
+      color: color($theme-link-reverse-active-color);
     }
   }
 }

data/_sass/uswds/src/components/_skipnav.scss

@@ -7,7 +7,7 @@
   padding: units(1) units(2);
   position: absolute;
   top: -3.8rem; // skipnav link height
-  transition: all 0.2s ease-in-out;
+  transition: $project-easing;
   z-index: z-index(100);
 
   &:focus {
@@ -15,6 +15,6 @@
     left: 0;
     position: absolute;
     top: 0;
-    transition: all 0.2s ease-in-out;
+    transition: $project-easing;
   }
 }

data/_sass/uswds/src/components/_step-indicator.scss

@@ -0,0 +1,444 @@
+$step-indicator-label-margin-top: 1;
+$step-indicator-margin-bottom: 4;
+$step-indicator-header-margin-top: 4;
+$step-indicator-header-margin-top-sm: 2;
+$step-indicator-segment-height-mobile: 1;
+$step-indicator-counter-size: 5;
+$step-indicator-counter-size-sm: 3;
+
+.usa-step-indicator {
+  @include typeset(
+    $theme-step-indicator-font-family,
+    $theme-step-indicator-label-font-size,
+    2
+  );
+  background-color: color($step-indicator-background-color);
+  margin-bottom: units($step-indicator-margin-bottom);
+  margin-left: units($theme-step-indicator-segment-gap) / -2;
+  margin-right: units($theme-step-indicator-segment-gap) / -2;
+
+  @include at-media($theme-step-indicator-min-width) {
+    @include u-margin-x(0);
+  }
+}
+
+.usa-step-indicator__segments {
+  counter-reset: usa-step-indicator;
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.usa-step-indicator__segment {
+  @include u-flex("fill");
+  counter-increment: usa-step-indicator;
+  margin-left: units($theme-step-indicator-segment-gap) / 2;
+  margin-right: units($theme-step-indicator-segment-gap) / 2;
+  max-width: units("card-lg");
+  min-height: units($theme-step-indicator-segment-height);
+  position: relative;
+
+  // Add segment
+  &:after {
+    background-color: color($theme-step-indicator-segment-color-pending);
+    content: "";
+    display: block;
+    // Use a fixed segment height for mobile regardless of settings
+    height: units($step-indicator-segment-height-mobile);
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    @include at-media($theme-step-indicator-min-width) {
+      height: units($theme-step-indicator-segment-height);
+    }
+  }
+}
+
+.usa-step-indicator__segment--complete {
+  &::after {
+    background-color: color($theme-step-indicator-segment-color-complete);
+  }
+  .usa-step-indicator__segment-label {
+    color: color($theme-step-indicator-segment-color-complete);
+  }
+}
+
+.usa-step-indicator__segment--current {
+  &::after {
+    background-color: color($theme-step-indicator-segment-color-current);
+  }
+  .usa-step-indicator__segment-label {
+    color: color($theme-step-indicator-segment-color-current);
+    font-weight: fw("bold");
+  }
+}
+
+.usa-step-indicator__segment-label {
+  display: none;
+  // Show labels only at the min-width
+  @include at-media($theme-step-indicator-min-width) {
+    color: color($theme-step-indicator-text-pending-color);
+    display: block;
+    font-size: size(
+      $theme-step-indicator-font-family,
+      $theme-step-indicator-label-font-size
+    );
+    // Add margin based on segment size
+    margin-top: calc(
+      #{units($theme-step-indicator-segment-height)} + #{units(
+          $step-indicator-label-margin-top
+        )}
+    );
+    padding-right: units(4);
+    text-align: left;
+  }
+}
+
+.usa-step-indicator__header {
+  align-items: baseline;
+  display: flex;
+}
+
+.usa-step-indicator__heading {
+  color: color($theme-step-indicator-heading-color);
+  font-family: family($theme-step-indicator-heading-font-family);
+  font-size: size(
+    $theme-step-indicator-heading-font-family,
+    $theme-step-indicator-heading-font-size-small
+  );
+  font-weight: font-weight("bold");
+  margin: units($step-indicator-header-margin-top-sm) 0 0;
+  @include at-media($theme-step-indicator-min-width) {
+    font-size: size(
+      $theme-step-indicator-heading-font-family,
+      $theme-step-indicator-heading-font-size
+    );
+    margin-top: units($step-indicator-header-margin-top);
+  }
+}
+
+.usa-step-indicator__current-step {
+  $step-lh: lh($theme-step-indicator-heading-font-family, 2);
+  @include u-circle($step-indicator-counter-size);
+  @include u-text("normal", "tabular");
+  background-color: color($theme-step-indicator-segment-color-current);
+  color: color($step-indicator-background-color);
+  display: inline-block;
+  // Magic number circle centering
+  padding: calc(
+    (#{units($step-indicator-counter-size)} - (2ex * #{$step-lh})) * 0.5
+  );
+  text-align: center;
+}
+
+.usa-step-indicator__total-steps {
+  @include u-text("normal", "tabular");
+  color: color($theme-step-indicator-segment-color-current);
+  margin-right: units(1);
+}
+
+.usa-step-indicator--counters,
+.usa-step-indicator--counters-sm {
+  .usa-step-indicator__segment {
+    @include at-media($theme-step-indicator-min-width) {
+      $counter-lh: lh($theme-step-indicator-font-family, 1);
+      // Remove segment gaps
+      @include u-margin-x(0);
+
+      // Add extra margin for counter
+      @if $theme-step-indicator-counter-gap == 0 {
+        margin-top: calc(
+          (
+            (
+                #{units($step-indicator-counter-size)} -
+                  #{units($theme-step-indicator-segment-height)}
+              ) /
+              2
+          )
+        );
+      } @else {
+        margin-top: calc(
+          (
+              (
+                  #{units($step-indicator-counter-size)} -
+                    #{units($theme-step-indicator-segment-height)}
+                ) /
+                2
+            ) +
+            #{units($theme-step-indicator-counter-gap)}
+        );
+      }
+
+      // Add counter
+      &:before {
+        @include u-circle($step-indicator-counter-size);
+        @include u-text("tabular");
+        background-color: color($step-indicator-background-color);
+        box-shadow: inset 0 0 0
+            units($theme-step-indicator-counter-border-width)
+            color($theme-step-indicator-segment-color-pending),
+          0 0 0 units($theme-step-indicator-counter-gap)
+            color($step-indicator-background-color);
+        color: color($theme-step-indicator-text-pending-color);
+        content: counter(usa-step-indicator);
+        display: block;
+        font-weight: fw("bold");
+        left: 0;
+        line-height: lh($theme-step-indicator-font-family, 1);
+        // Magic number circle centering
+        padding: calc(
+          (#{units($step-indicator-counter-size)} - (2ex * #{$counter-lh})) *
+            0.5
+        );
+        // padding: 1.5ex;
+        position: absolute;
+        text-align: center;
+        top: calc(
+          (
+              #{units($step-indicator-counter-size)} - #{units(
+                  $theme-step-indicator-segment-height
+                )}
+            ) / -2
+        );
+        z-index: z(100);
+      }
+
+      &:last-child {
+        // Don't show the last segment when counters appear
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .usa-step-indicator__segment--complete {
+    &::before {
+      background-color: color($theme-step-indicator-segment-color-complete);
+      box-shadow: 0 0 0 units($theme-step-indicator-counter-gap)
+        color($step-indicator-background-color);
+      color: color($step-indicator-background-color);
+    }
+  }
+
+  .usa-step-indicator__segment--current {
+    &::before {
+      background-color: color($theme-step-indicator-segment-color-current);
+      box-shadow: 0 0 0 units($theme-step-indicator-counter-gap)
+        color($step-indicator-background-color);
+      color: color($step-indicator-background-color);
+    }
+  }
+
+  .usa-step-indicator__segment-label {
+    @include at-media($theme-step-indicator-min-width) {
+      // Add counter margin
+      margin-top: calc(
+        (
+            (
+                #{units($step-indicator-counter-size)} + #{units(
+                    $theme-step-indicator-segment-height
+                  )}
+              ) / 2
+          ) + #{units($step-indicator-label-margin-top)}
+      );
+    }
+  }
+
+  // Adjust segments with centered variant
+  &.usa-step-indicator--center {
+    @include at-media($theme-step-indicator-min-width) {
+      .usa-step-indicator__segment {
+        &:first-child {
+          &:after {
+            left: 50%;
+            right: 0;
+            width: auto;
+          }
+        }
+        &:last-child {
+          &:after {
+            display: block;
+            left: 0;
+            right: 50%;
+            width: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+.usa-step-indicator--counters-sm {
+  .usa-step-indicator__segment {
+    @include at-media($theme-step-indicator-min-width) {
+      $counter-lh: lh($theme-step-indicator-font-family, 1);
+      // Add extra margin for counter
+      @if $theme-step-indicator-counter-gap == 0 {
+        margin-top: calc(
+          (
+            (
+                #{units($step-indicator-counter-size-sm)} -
+                  #{units($theme-step-indicator-segment-height)}
+              ) /
+              2
+          )
+        );
+      } @else {
+        margin-top: calc(
+          (
+              (
+                  #{units($step-indicator-counter-size-sm)} -
+                    #{units($theme-step-indicator-segment-height)}
+                ) /
+                2
+            ) +
+            #{units($theme-step-indicator-counter-gap)}
+        );
+      }
+
+      // Add counter
+      &:before {
+        @include u-circle($step-indicator-counter-size-sm);
+        @include u-font-size($theme-step-indicator-font-family, 3);
+        padding: calc(#{units(0.5)} + 1px);
+        top: calc(
+          (
+              #{units($step-indicator-counter-size-sm)} - #{units(
+                  $theme-step-indicator-segment-height
+                )}
+            ) / -2
+        );
+      }
+
+      &:last-child {
+        // Don't show the last segment when counters appear
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .usa-step-indicator__segment-label {
+    @include at-media($theme-step-indicator-min-width) {
+      // Add counter margin
+      margin-top: calc(
+        (
+            (
+                #{units($step-indicator-counter-size-sm)} + #{units(
+                    $theme-step-indicator-segment-height
+                  )}
+              ) / 2
+          ) + #{units($step-indicator-label-margin-top)}
+      );
+    }
+  }
+}
+
+.usa-step-indicator--no-labels {
+  margin-left: units($theme-step-indicator-segment-gap) / -2;
+  margin-right: units($theme-step-indicator-segment-gap) / -2;
+
+  .usa-step-indicator__segment {
+    // Remove extra counter margin
+    margin-top: 0;
+    // Add gap between segments
+    margin-left: units($theme-step-indicator-segment-gap) / 2;
+    margin-right: units($theme-step-indicator-segment-gap) / 2;
+    &:before {
+      // Don't show counters
+      display: none;
+    }
+    &:last-child {
+      // Show last segment
+      &:after {
+        display: block;
+      }
+    }
+  }
+  .usa-step-indicator__heading {
+    margin-top: units($step-indicator-header-margin-top-sm);
+  }
+}
+
+.usa-step-indicator--no-labels {
+  .usa-step-indicator__segment-label {
+    // Don't show labels, even if they exist
+    display: none;
+  }
+}
+
+.usa-step-indicator--center {
+  margin-left: units($theme-step-indicator-segment-gap) / -2;
+  margin-right: units($theme-step-indicator-segment-gap) / -2;
+
+  .usa-step-indicator__segment {
+    margin-left: units($theme-step-indicator-segment-gap) / 2;
+    margin-right: units($theme-step-indicator-segment-gap) / 2;
+
+    &:before {
+      @if $theme-step-indicator-counter-gap == 0 {
+        left: calc(50% - ((#{units($step-indicator-counter-size)}) / 2));
+      } @else {
+        left: calc(
+          50% -
+            (
+              (
+                  #{units($step-indicator-counter-size)} +
+                    #{units($theme-step-indicator-counter-gap)}
+                ) /
+                2
+            )
+        );
+      }
+    }
+  }
+
+  .usa-step-indicator__segment-label {
+    // Balance label padding
+    @include u-padding-x(1);
+    // Center labels
+    text-align: center;
+  }
+
+  &.usa-step-indicator--no-labels {
+    .usa-step-indicator__segment {
+      // Use full-width segments
+      &:first-child {
+        &:after {
+          left: 0;
+        }
+      }
+      &:last-child {
+        &:after {
+          right: 0;
+        }
+      }
+    }
+  }
+
+  &.usa-step-indicator--counters-sm {
+    .usa-step-indicator__segment {
+      &:before {
+        @if $theme-step-indicator-counter-gap == 0 {
+          left: calc(50% - ((#{units($step-indicator-counter-size-sm)}) / 2));
+        } @else {
+          left: calc(
+            50% -
+              (
+                (
+                    #{units($step-indicator-counter-size-sm)} +
+                      #{units($theme-step-indicator-counter-gap)}
+                  ) /
+                  2
+              )
+          );
+        }
+      }
+    }
+  }
+}