uswds-jekyll 4.2.0 → 5.0.0

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

@@ -0,0 +1,287 @@
+// Header helpers
+// ---------------------------------
+
+@mixin nav-border-extended {
+  @include add-bar(0.5, "primary", "bottom", 0, 2);
+}
+
+@mixin nav-border-basic {
+  @include add-bar(0.5, "primary", "bottom", 0, 2, -0.5);
+}
+
+$z-index-header: 300;
+$z-index-overlay: 400;
+
+// Header
+// ---------------------------------
+
+.usa-header {
+  @include clearfix;
+  @include typeset($theme-header-font-family);
+  @include border-box-sizing;
+  z-index: z-index($z-index-header);
+
+  a {
+    border-bottom: none;
+  }
+
+  // The search <form>
+  .usa-search {
+    @include at-media($theme-header-min-width) {
+      float: right;
+    }
+  }
+
+  // Accessibility: The <div> with search role
+  [role="search"] {
+    @include at-media($theme-header-min-width) {
+      float: right;
+      max-width: calc(
+        #{$theme-search-min-width} + #{units($theme-button-small-width)}
+      );
+      width: 100%;
+    }
+  }
+
+  // The search <input>
+  [type="search"] {
+    min-width: 0; // Fix a Firefox display quirk
+  }
+
+  + .usa-hero {
+    @include at-media($theme-header-min-width) {
+      border-top: units(1px) solid color("white");
+    }
+  }
+
+  + .usa-section,
+  + main {
+    @include at-media($theme-header-min-width) {
+      border-top: units(1px) solid color("base-lighter");
+    }
+  }
+}
+
+.usa-logo {
+  @include at-media-max($theme-header-min-width) {
+    @include u-flex("fill");
+    font-size: font-size($theme-header-font-family, "2xs");
+    line-height: line-height($theme-header-font-family, 1);
+    margin-left: units($theme-site-margins-mobile-width);
+  }
+
+  @include at-media($theme-header-min-width) {
+    margin-top: units(4);
+    margin-bottom: units(2);
+    font-size: font-size($theme-header-font-family, "lg");
+    line-height: line-height($theme-header-font-family, 2);
+  }
+
+  a {
+    color: color("ink");
+    text-decoration: none;
+  }
+}
+
+.usa-logo__text {
+  display: block;
+  font-style: normal;
+  font-weight: font-weight("bold");
+  margin: 0;
+}
+
+.usa-menu-btn {
+  @include button-unstyled;
+  @include u-flex("auto");
+  @include u-padding-x(1.5);
+  background-color: color("primary");
+  color: color("white");
+  font-size: font-size($theme-header-font-family, "3xs");
+  height: units($size-touch-target);
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  @include at-media($theme-header-min-width) {
+    display: none;
+  }
+
+  &:hover {
+    background-color: color("primary-dark");
+    color: color("white");
+    text-decoration: none;
+  }
+
+  &:active {
+    color: color("white");
+  }
+
+  &:visited {
+    color: color("white");
+  }
+}
+
+.usa-overlay {
+  @include u-pin("all");
+  position: fixed;
+  background: color("black");
+  opacity: opacity(0);
+  transition: opacity 0.2s ease-in-out;
+  visibility: hidden;
+  z-index: z-index($z-index-overlay);
+
+  &.is-visible {
+    opacity: opacity(20);
+    visibility: visible;
+  }
+}
+
+// usa-header--basic
+// ---------------------------------
+
+.usa-header--basic {
+  @include at-media($theme-header-min-width) {
+    .usa-navbar {
+      position: relative;
+      width: $theme-header-logo-text-width; // TODO: review this more
+    }
+
+    .usa-nav {
+      @include u-flex("row", "align-center", "justify-end");
+      display: flex;
+      padding: 0 0 units(0.5) units(1);
+      width: 100%;
+    }
+
+    .usa-nav-container {
+      @include u-flex("align-end", "justify");
+      display: flex;
+    }
+
+    .usa-nav__primary-item > .usa-current,
+    .usa-nav__link:hover {
+      @include nav-border-basic;
+    }
+
+    // Don't show extended border if dropdown is active.
+    .usa-nav__link[aria-expanded="true"]::after,
+    .usa-nav__link[aria-expanded="true"]:hover::after {
+      display: none;
+    }
+
+    .usa-nav__primary {
+      width: auto;
+    }
+
+    // Issue #3401: last dropdown gets cutoff.
+    .usa-nav__primary-item:last-of-type {
+      position: relative;
+
+      .usa-nav__submenu {
+        @include u-pin-right;
+      }
+    }
+
+    .usa-search {
+      top: 0;
+    }
+  }
+  &.usa-header--megamenu {
+    .usa-nav__inner {
+      display: flex;
+      flex-direction: column;
+
+      @include at-media($theme-header-min-width) {
+        display: block;
+        float: right;
+        margin-top: units(-5);
+      }
+    }
+
+    .usa-nav__primary-item:last-of-type {
+      @include at-media($theme-header-min-width) {
+        position: static;
+      }
+    }
+  }
+}
+
+// usa-header--extended
+// ---------------------------------
+
+.usa-header--extended {
+  @include at-media($theme-header-min-width) {
+    padding-top: 0;
+
+    .usa-nav__primary-item > .usa-current,
+    .usa-nav__primary-item > .usa-nav__link:hover {
+      @include nav-border-extended;
+    }
+
+    // Don't show extended border if dropdown is active.
+    .usa-nav__link[aria-expanded="true"]::after,
+    .usa-nav__link[aria-expanded="true"]:hover::after {
+      display: none;
+    }
+  }
+
+  .usa-logo {
+    @include at-media($theme-header-min-width) {
+      font-size: font-size($theme-header-font-family, "xl");
+      margin: units(4) 0 units(3);
+      max-width: 50%;
+    }
+  }
+
+  .usa-navbar {
+    @include at-media($theme-header-min-width) {
+      @include grid-container($theme-header-max-width);
+      display: block;
+      height: auto;
+      overflow: auto;
+    }
+  }
+
+  .usa-nav {
+    @include at-media($theme-header-min-width) {
+      border-top: units(1px) solid color("base-lighter");
+      padding: 0;
+      width: 100%;
+    }
+  }
+
+  .usa-nav__inner {
+    @include at-media($theme-header-min-width) {
+      @include grid-container($theme-header-max-width);
+      position: relative;
+    }
+  }
+
+  .usa-nav__primary {
+    @include at-media($theme-header-min-width) {
+      @include clearfix;
+      margin-left: units(-2);
+    }
+  }
+
+  .usa-nav__link {
+    @include at-media($theme-header-min-width) {
+      @include u-padding-y(2);
+    }
+  }
+
+  .usa-nav__submenu {
+    .usa-grid-full {
+      @include at-media($theme-header-min-width) {
+        padding-left: units(1.5);
+      }
+    }
+  }
+
+  .usa-nav__submenu.usa-megamenu {
+    @include at-media($theme-header-min-width) {
+      left: 0;
+      padding-left: units($theme-site-margins-width);
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+// Hero feature
+// ==========================
+
+.usa-hero {
+  @include border-box-sizing;
+  @include typeset;
+  @include u-padding-y($theme-site-margins-width);
+  background-image: url("#{$theme-hero-image}");
+  background-position: center;
+  background-size: cover;
+  color: color("white");
+}
+
+.usa-hero__callout {
+  background-color: color("primary-darker");
+  padding: units(4);
+
+  @include at-media("tablet") {
+    max-width: units("mobile");
+  }
+}
+
+.usa-hero__heading {
+  @include typeset-h2;
+  color: color("accent-cool");
+  line-height: line-height("heading", 2);
+}
+
+.usa-hero__heading--alt {
+  color: color("white");
+  display: block;
+}

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

@@ -0,0 +1,15 @@
+// Flexbox positioning to move sidenav below main content on small screens
+.usa-layout-docs__sidenav {
+  order: 2;
+  padding-top: units(4);
+
+  @include at-media("desktop") {
+    padding-top: 0;
+  }
+}
+
+.usa-layout-docs__main {
+  @include at-media("desktop") {
+    order: 2;
+  }
+}

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

@@ -0,0 +1,7 @@
+.usa-media-block__img {
+  @include media-block-img;
+}
+
+.usa-media-block__body {
+  overflow: hidden;
+}

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

@@ -0,0 +1,42 @@
+@mixin outer-megamenu {
+  @include u-pin("y");
+  background-color: color("primary-darker");
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+}
+
+.usa-megamenu {
+  .usa-col {
+    @include u-flex(1);
+    @include at-media($theme-header-min-width) {
+      // needs this round() to avoid a compile bug
+      @include u-flex(round(12 / $theme-megamenu-columns));
+    }
+  }
+}
+
+.usa-megamenu.usa-nav__submenu {
+  @include at-media($theme-header-min-width) {
+    @include u-padding-x(0);
+    @include u-padding-y(4);
+    left: -$theme-header-logo-text-width;
+    right: 0;
+    width: auto;
+  }
+
+  &::before {
+    @include at-media($theme-header-min-width) {
+      @include outer-megamenu;
+      right: 100%;
+    }
+  }
+
+  &::after {
+    @include at-media($theme-header-min-width) {
+      @include outer-megamenu;
+      left: 100%;
+    }
+  }
+}

data/_sass/uswds/src/components/_nav-container.scss

@@ -0,0 +1,7 @@
+.usa-nav-container {
+  @include at-media($theme-header-min-width) {
+    @include clearfix;
+    @include grid-container($theme-header-max-width);
+    @include u-padding-x($theme-site-margins-width);
+  }
+}

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

@@ -0,0 +1,16 @@
+.usa-navbar {
+  @include border-box-sizing;
+  height: units($size-touch-target);
+
+  @include at-media-max($theme-header-min-width) {
+    @include u-flex("align-center");
+    border-bottom: units(1px) solid color("base-lighter");
+    display: flex;
+  }
+
+  @include at-media($theme-header-min-width) {
+    border-bottom: none;
+    display: inline-block;
+    height: auto;
+  }
+}

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

@@ -0,0 +1,348 @@
+// Navigation helpers
+// ---------------------------------
+
+@mixin primary-nav-link {
+  line-height: line-height($theme-navigation-font-family, 1);
+  padding: units(2);
+}
+
+$nav-link-color: "base-dark";
+$sliding-panel-width: "card-lg";
+$nav-link-accordion-icon-size: 1.5;
+$nav-link-arrow-icon-size: 1;
+
+// TODO: Collect animations in a common location?
+@keyframes slidein-left {
+  from {
+    transform: translateX(units($sliding-panel-width));
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+// Header navigation
+// ---------------------------------
+.usa-nav {
+  @include typeset($theme-navigation-font-family, null, 1);
+  @include at-media-max($theme-header-min-width) {
+    @include u-pin("right");
+    @include u-pin("y");
+    position: fixed;
+    background: color("white");
+    border-right: 0;
+    display: none;
+    flex-direction: column;
+    overflow-y: auto;
+    padding: units(2);
+    width: units($sliding-panel-width);
+    z-index: z-index(500);
+
+    &.is-visible {
+      animation: slidein-left 0.3s ease-in-out;
+      display: flex;
+    }
+  }
+
+  @include at-media($theme-header-min-width) {
+    float: right;
+    position: relative;
+  }
+
+  .usa-search {
+    @include at-media($theme-header-min-width) {
+      margin-left: units(2);
+    }
+  }
+
+  .usa-accordion {
+    @include typeset($theme-navigation-font-family, null, 1);
+  }
+}
+
+// Primary navigation
+// ---------------------------------
+
+.usa-nav__primary {
+  // Until the $theme-header-width,
+  // use the usa-nav-list styles for the slide-in nav
+  @include at-media-max($theme-header-min-width) {
+    @include nav-list("nav");
+    margin-top: units(3);
+    order: 2;
+
+    a {
+      @include u-padding-y(1.5);
+    }
+  }
+
+  // At $theme-header-width and wider...
+  @include at-media($theme-header-min-width) {
+    display: flex;
+  }
+
+  // all nav items in the nav
+  .usa-nav__primary-item {
+    a {
+      text-decoration: none;
+    }
+  }
+
+  // just level 1 nav items...
+  > .usa-nav__primary-item {
+    line-height: line-height($theme-navigation-font-family, 2);
+    @include at-media($theme-header-min-width) {
+      font-size: font-size($theme-navigation-font-family, "2xs");
+      line-height: line-height($theme-navigation-font-family, 1);
+    }
+
+    // ...and their direct links
+    > a {
+      @include at-media($theme-header-min-width) {
+        @include primary-nav-link;
+        color: color($nav-link-color);
+        display: block;
+        font-weight: font-weight("bold");
+
+        &:hover {
+          color: color("primary");
+        }
+      }
+    }
+  }
+
+  a {
+    @include at-media($theme-header-min-width) {
+      @include u-padding-y(1);
+    }
+  }
+
+  button {
+    $button-vertical-offset: 53%; // XXX: Magic number
+
+    @include button-unstyled;
+    color: color($nav-link-color);
+    font-weight: font-weight("normal");
+    line-height: line-height($theme-navigation-font-family, 2);
+    padding: units(1.5) units(2);
+    text-decoration: none;
+
+    @include at-media($theme-header-min-width) {
+      @include primary-nav-link;
+      font-size: font-size($theme-navigation-font-family, "2xs");
+      font-weight: font-weight("bold");
+    }
+
+    &:hover {
+      color: color("primary");
+      background-color: color("base-lightest");
+      text-decoration: none;
+
+      @include at-media($theme-header-min-width) {
+        background-color: transparent;
+      }
+    }
+
+    &[aria-expanded="false"] {
+      /* stylelint-disable-line selector-no-qualifying-type */
+      @include add-background-svg("plus-alt");
+      background-position: right 0 center;
+      background-size: units($nav-link-accordion-icon-size);
+
+      @include at-media($theme-header-min-width) {
+        @include add-background-svg("angle-arrow-down");
+        background-size: units($nav-link-arrow-icon-size);
+        background-position: right units(2) top $button-vertical-offset;
+      }
+
+      &:hover {
+        @include at-media($theme-header-min-width) {
+          @include add-background-svg("angle-arrow-down-primary");
+        }
+      }
+    }
+
+    &[aria-expanded="true"] {
+      /* stylelint-disable-line selector-no-qualifying-type */
+      @include add-background-svg("minus-alt");
+      background-position: right 0 center;
+      background-size: units($nav-link-accordion-icon-size);
+
+      @include at-media($theme-header-min-width) {
+        @include add-background-svg("angle-arrow-up-white");
+        @include add-knockout-font-smoothing;
+        background-size: units($nav-link-arrow-icon-size);
+        background-color: color("primary-darker");
+        background-position: right units(2) top $button-vertical-offset;
+        color: color("white");
+      }
+    }
+  }
+
+  .usa-accordion__button {
+    span {
+      @include at-media($theme-header-min-width) {
+        margin-right: 0;
+        padding-right: units(2);
+      }
+    }
+  }
+}
+
+// Secondary navigation
+// ---------------------------------
+
+.usa-nav__secondary {
+  margin-top: units(2);
+
+  @include at-media($theme-header-min-width) {
+    // Note: Previius calc() couldn't work. don't hardcode rem vals
+    bottom: units(8); // XXX magic number
+    font-size: font-size($theme-navigation-font-family, "2xs");
+    margin-top: units(1);
+    min-width: calc(
+      #{$theme-search-min-width} + #{units($theme-button-small-width)}
+    );
+    position: absolute;
+    right: units($theme-site-margins-width);
+  }
+
+  .usa-search {
+    margin-top: units(2);
+    width: 100%;
+
+    @include at-media($theme-header-min-width) {
+      margin-left: 0;
+      margin-top: units(1);
+    }
+  }
+}
+
+.usa-nav__secondary-links {
+  @include add-list-reset;
+  line-height: line-height($theme-navigation-font-family, 3);
+  margin-top: units(3);
+
+  @include at-media($theme-header-min-width) {
+    float: right;
+    line-height: line-height($theme-navigation-font-family, 1);
+    margin-bottom: units(0.5);
+    margin-top: 0;
+  }
+
+  .usa-nav__secondary-item {
+    @include at-media($theme-header-min-width) {
+      display: inline;
+      padding-left: units(0.5);
+
+      & + .usa-nav__secondary-item::before {
+        color: color("base-lighter");
+        content: "|";
+        padding-right: units(0.5);
+      }
+    }
+  }
+
+  a {
+    color: color("base");
+    display: inline-block;
+    font-size: font-size($theme-navigation-font-family, "2xs");
+    text-decoration: none;
+
+    &:hover {
+      color: color("primary");
+      text-decoration: underline;
+    }
+  }
+}
+
+// Navigation dropdowns
+// ---------------------------------
+
+.usa-nav__submenu {
+  @include at-media-max($theme-header-min-width) {
+    @include nav-sublist;
+  }
+
+  @include at-media($theme-header-min-width) {
+    @include add-list-reset;
+    background-color: color("primary-darker");
+    width: units("card-lg");
+    padding: units(2);
+    position: absolute;
+    z-index: z-index(400);
+  }
+
+  &[aria-hidden="true"] {
+    display: none;
+  }
+
+  .usa-nav__submenu-item {
+    @include at-media($theme-header-min-width) {
+      & + * {
+        margin-top: units(1.5);
+      }
+
+      a {
+        color: color("white");
+        padding: 0;
+        line-height: line-height($theme-navigation-font-family, 3);
+
+        &:hover {
+          background-color: transparent;
+          color: color("white");
+          padding: 0;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+
+.usa-nav__submenu-list {
+  @include unstyled-list;
+
+  .usa-nav__submenu-list-item {
+    margin: 0;
+    font-size: font-size($theme-navigation-font-family, "2xs");
+
+    a {
+      line-height: line-height($theme-navigation-font-family, 3);
+    }
+  }
+}
+
+// Navigation close button
+// ---------------------------------
+
+.usa-nav__close {
+  @include button-unstyled;
+  @include u-square($size-touch-target);
+  color: currentColor;
+  flex: none;
+  float: right;
+  margin: units(-1.5) units(-2) units(2) auto;
+  text-align: center;
+
+  &:hover {
+    color: currentColor;
+    text-decoration: none;
+  }
+
+  @include at-media($theme-header-min-width) {
+    display: none;
+  }
+
+  img {
+    width: units(1.5);
+  }
+
+  + * {
+    clear: both;
+  }
+}
+
+.usa-js-mobile-nav--active {
+  overflow: hidden;
+}