uswds-jekyll 4.1.0 → 5.3.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 $project-easing;
+  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/_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;
+  }
+}