uswds-jekyll 4.2.0 → 5.0.0

data/_sass/uswds/components/_usa-banner.scss

@@ -0,0 +1,30 @@
+.usa-banner {
+  @if variable-exists(usa-banner-bg) {
+    background-color: color($usa-banner-bg);
+  }
+
+  .usa-banner__header-text {
+    @if variable-exists(usa-banner-text) {
+      color: color($usa-banner-text);
+    }
+  }
+
+  .usa-banner__header-action,
+  .usa-banner__button-text {
+    @if variable-exists(usa-banner-link) {
+      color: color($usa-banner-link);
+    }
+
+    &:hover {
+      @if variable-exists(usa-banner-link-hover) {
+        color: color($usa-banner-link-hover);
+      }
+    }
+  }
+
+  .usa-banner__content {
+    @if variable-exists(usa-banner-text) {
+      color: color($usa-banner-text);
+    }
+  }
+}

data/_sass/uswds/custom/_uswds-theme-custom-styles.scss

@@ -0,0 +1,47 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS THEME CUSTOM STYLES
+----------------------------------------
+!! Copy this file to your project's
+   sass root. Don't edit the version
+   in node_modules.
+----------------------------------------
+Custom project SASS goes here.
+
+i.e.
+@include u-padding-right('05');
+----------------------------------------
+*/
+
+// uswds shims
+.usa-footer__logo-img {
+  width: 100%;
+}
+
+@include at-media("mobile-lg") {
+  .usa-footer--big a.usa-footer__primary-link {
+    margin-bottom: units(3);
+  }
+}
+
+.usa-header {
+  button[aria-expanded="true"],
+  button[aria-expanded="true"]:hover {
+    &:after {
+      display: none;
+    }
+  }
+}
+
+.usa-layout-docs__sidenav,
+.usa-layout-docs__main {
+  width: 100%;
+  overflow: hidden;
+}

data/_sass/uswds/src/base/_accessibility.scss

@@ -0,0 +1,3 @@
+.usa-sr-only {
+  @include sr-only;
+}

data/_sass/uswds/src/base/_body.scss

@@ -0,0 +1,5 @@
+body {
+  background-color: color("white");
+  color: color("ink");
+  overflow-x: hidden;
+}

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

@@ -0,0 +1,116 @@
+// Variables
+
+$accordion-border: units($theme-accordion-border-width) solid
+  color($theme-accordion-border-color);
+
+// Accordion Styles
+
+@mixin accordion-list-styles {
+  @include unstyled-list;
+  color: color("ink");
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+// scss-lint:disable PropertyCount
+@mixin accordion-button-styles {
+  @include button-unstyled;
+  @include add-background-svg("minus");
+
+  background-color: color("base-lightest");
+  background-position: right units(2.5) center;
+  background-size: units(2);
+  color: color("ink");
+  cursor: pointer;
+  display: inline-block;
+  font-weight: font-weight("bold");
+  margin: 0;
+  padding: units(2) units(2.5) * 2 + units(2) units(2) units(2.5);
+  text-decoration: none;
+  width: 100%;
+
+  &:hover {
+    background-color: color("base-lighter");
+    color: color("ink");
+    text-decoration: none;
+  }
+}
+// scss-lint:enable PropertyCount
+
+@mixin accordion-button-unopened-styles {
+  @include add-background-svg("plus");
+  background-size: units(2);
+}
+
+@mixin accordion-nested-list {
+  > ul li ul {
+    list-style: disc;
+    > li > ul {
+      list-style: circle;
+      > li > ul {
+        list-style: square;
+      }
+    }
+  }
+}
+
+.usa-accordion {
+  @include accordion-list-styles;
+  @include accordion-nested-list;
+  @include border-box-sizing;
+  @include typeset($theme-accordion-font-family);
+
+  + .usa-accordion,
+  + .usa-accordion--bordered {
+    margin-top: units(1);
+  }
+}
+
+.usa-accordion--bordered {
+  .usa-accordion__content {
+    border-bottom: $accordion-border;
+    border-left: $accordion-border;
+    border-right: $accordion-border;
+    padding-bottom: units(2);
+  }
+
+  .usa-accordion__heading {
+    margin-bottom: 0;
+  }
+}
+
+.usa-accordion__heading,
+// kludge to override .usa-prose styles
+// TODO: work this into a mixin
+.usa-prose .usa-accordion__heading {
+  @include typeset($theme-accordion-font-family, $theme-body-font-size, 1);
+  margin: 0;
+
+  &:not(:first-child) {
+    margin-top: units(1);
+  }
+}
+
+.usa-accordion__content {
+  background-color: color("white");
+  margin-top: 0;
+  overflow: auto;
+  padding: units(2) units(2.5) calc(#{units(2)} - #{units(0.5)}) units(2.5);
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.usa-accordion__button {
+  @include accordion-button-styles;
+}
+
+.usa-accordion__button[aria-expanded="false"] {
+  @include accordion-button-unopened-styles;
+}

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

@@ -0,0 +1,144 @@
+// Alert variables ---------- //
+// TODO: Custom alerts are effectively hidden and not well supported
+// Consider removing or rebuilding
+$usa-custom-alerts: () !default;
+$usa-custom-alerts-bar: () !default;
+
+$usa-alerts: (
+  success: "success-lighter",
+  warning: "warning-lighter",
+  error: "error-lighter",
+  info: "info-lighter"
+);
+
+$usa-alerts-bar: (
+  success: "success",
+  warning: "warning",
+  error: "error",
+  info: "info"
+);
+
+$alerts: map-merge($usa-alerts, $usa-custom-alerts);
+$alerts-bar: map-merge($usa-alerts-bar, $usa-custom-alerts-bar);
+$alert-padding-left: units($theme-alert-padding-x) +
+  units($theme-alert-bar-width);
+
+.usa-alert {
+  @include typeset($theme-alert-font-family);
+  @include border-box-sizing;
+  background-color: color("base-lightest");
+  background-position: $alert-padding-left units($theme-alert-padding-x);
+  background-repeat: no-repeat;
+  background-size: units(4);
+  padding-bottom: units(2);
+  padding-left: $alert-padding-left;
+  padding-right: units($theme-alert-padding-x);
+  padding-top: units($theme-alert-padding-x);
+  position: relative;
+
+  * + & {
+    margin-top: units(2);
+  }
+
+  // TODO: why is this not simply a border?
+  &::before {
+    background-color: color("base-light");
+    content: "";
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: units($theme-alert-bar-width);
+  }
+
+  ul {
+    margin-bottom: 0;
+    margin-top: units(1);
+    padding-left: units(1);
+  }
+
+  .usa-checklist {
+    padding-left: 0;
+  }
+}
+
+.usa-alert__icon {
+  display: table-cell;
+  padding-right: units($theme-alert-bar-width);
+}
+
+.usa-alert__body {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.usa-alert__heading {
+  @include typeset($theme-alert-font-family, "lg", 2);
+  margin-top: 0;
+  margin-bottom: units(1);
+}
+
+.usa-alert__text {
+  @include u-margin-y(0);
+
+  a {
+    @include typeset-link;
+  }
+}
+
+.usa-alert__text:only-child {
+  margin-bottom: units($theme-alert-bar-width);
+  padding-top: units(0.5);
+}
+
+@each $name, $bgcolor in $alerts {
+  .usa-alert--#{$name} {
+    @include add-background-svg("alerts/#{$name}");
+    background-color: color($bgcolor);
+
+    &::before {
+      background-color: color(map-get($alerts-bar, $name));
+    }
+
+    .usa-alert__body {
+      padding-left: units($theme-alert-icon-size) +
+        units($theme-alert-padding-x);
+    }
+  }
+}
+
+.usa-alert--slim {
+  background-position: $alert-padding-left center;
+  background-size: units(3);
+  padding-bottom: units($theme-alert-bar-width);
+  padding-top: units($theme-alert-bar-width);
+
+  .usa-alert__body {
+    padding-left: units(5);
+  }
+
+  .usa-alert__text:only-child {
+    margin-bottom: units(0.5);
+    padding-top: units(0.5);
+  }
+}
+
+.usa-alert--no-icon {
+  background-image: none;
+
+  .usa-alert__body {
+    padding-left: 0;
+  }
+}
+
+.usa-alert--validation {
+  background-size: units(3);
+
+  .usa-alert__body {
+    padding-left: units(5);
+  }
+
+  .usa-checklist {
+    margin-top: units(2);
+  }
+}

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

@@ -0,0 +1,226 @@
+.usa-banner {
+  @include typeset($theme-banner-font-family);
+  @include border-box-sizing;
+  background-color: color("base-lightest");
+
+  @include at-media("tablet") {
+    font-size: font-size($theme-banner-font-family, "3xs");
+    padding-bottom: units(0);
+  }
+
+  .usa-accordion {
+    @include typeset($theme-banner-font-family);
+  }
+}
+
+.usa-banner__content {
+  @include grid-container($theme-banner-max-width);
+  @include add-responsive-site-margins;
+  background-color: color("transparent");
+  font-size: font-size($theme-banner-font-family, 4);
+  overflow: hidden;
+  padding-bottom: units(2);
+  padding-left: units($theme-site-margins-mobile-width - 1);
+  padding-top: units(0.5);
+  width: 100%;
+
+  @include at-media("tablet") {
+    @include u-padding-y(3);
+  }
+
+  p {
+    &:first-child {
+      margin: 0;
+    }
+  }
+}
+
+.usa-banner__guidance {
+  padding-top: units(2);
+
+  @include at-media("tablet") {
+    padding-top: units(0);
+  }
+}
+
+.usa-banner__inner {
+  @include add-responsive-site-margins;
+  @include grid-container($theme-banner-max-width);
+  @include grid-row;
+  @include u-flex("align-start");
+  padding-right: units(0);
+
+  @include at-media("tablet") {
+    @include u-flex("align-center");
+  }
+}
+
+.usa-banner__header {
+  @include u-padding-y(1);
+  font-size: font-size($theme-banner-font-family, 1);
+  font-weight: font-weight("normal");
+  min-height: units($size-touch-target);
+  position: relative;
+
+  @include at-media("tablet") {
+    @include u-padding-y(0.5);
+    min-height: 0;
+  }
+}
+
+.usa-banner__header-close-text {
+  @include u-margin-y(0);
+  color: color("base-dark");
+  display: none;
+  font-size: font-size($theme-banner-font-family, 1);
+  line-height: line-height($theme-banner-font-family, 2);
+  padding-top: units(0.5);
+
+  .usa-banner__header--expanded & {
+    display: block;
+
+    @include at-media("tablet") {
+      display: none;
+    }
+  }
+}
+
+.usa-banner__header-text {
+  @include u-margin-y(0);
+  font-size: font-size($theme-banner-font-family, 1);
+  line-height: line-height($theme-banner-font-family, 2);
+}
+
+.usa-banner__header-action {
+  @include add-icon("angle-arrow-down-primary", "after", 1, 1, 0.5, "hover");
+  color: color("primary");
+  line-height: line-height($theme-banner-font-family, 2);
+  margin-bottom: units(0);
+  margin-top: units(2px);
+  text-decoration: underline;
+
+  .usa-banner__header--expanded & {
+    display: none;
+  }
+
+  @include at-media("tablet") {
+    display: none;
+  }
+}
+
+.usa-banner__header-flag {
+  @include u-float("left");
+  margin-right: units(1);
+  width: units(2);
+
+  @include at-media("tablet") {
+    margin-right: units(1);
+    padding-top: units(0);
+  }
+}
+
+.usa-banner__header--expanded {
+  padding-right: units($size-touch-target + 1);
+
+  @include at-media("tablet") {
+    background-color: transparent;
+    color: color("ink");
+    display: block;
+    font-size: font-size($theme-banner-font-family, 1);
+    font-weight: font-weight("normal");
+    min-height: units(0);
+    padding-right: units(0);
+  }
+
+  .usa-banner__inner {
+    margin-left: units(0);
+
+    @include at-media("tablet") {
+      margin-left: units(auto);
+    }
+  }
+
+  .usa-banner__header-action {
+    display: none;
+  }
+}
+
+.usa-banner__button {
+  @include button-unstyled;
+  @include u-pin("left");
+  @include u-pin("y");
+  @include u-text("primary", underline, baseline);
+  display: block;
+  font-size: font-size($theme-banner-font-family, 1);
+  height: auto;
+  line-height: line-height($theme-banner-font-family, 2);
+  padding-top: units(0);
+  padding-left: units(0);
+  text-decoration: none;
+  width: auto;
+
+  @include at-media-max("tablet") {
+    width: 100%;
+  }
+
+  @include at-media("tablet") {
+    @include add-icon("angle-arrow-down-primary", "after", 1, 1, 2px, "hover");
+    @include u-pin("none");
+    display: inline;
+    margin-left: units(1);
+    position: relative;
+
+    &:hover {
+      @include u-text("primary-darker");
+      // Underline added to inner text instead.
+      text-decoration: none;
+    }
+  }
+
+  &[aria-expanded="false"] {
+    background-image: none;
+  }
+
+  &[aria-expanded="true"] {
+    background-image: none;
+
+    @include at-media-max("tablet") {
+      @include add-icon(
+        "close-blue-60v-alt",
+        "after",
+        $theme-icon-image-size,
+        $size-touch-target,
+        0,
+        "no-hover"
+      );
+
+      &::after {
+        @include u-pin("y");
+        @include u-pin("right");
+        background-color: color("base-lighter");
+        height: auto;
+      }
+    }
+
+    @include at-media("tablet") {
+      @include add-icon("angle-arrow-up-primary", "after", 1, 1, 2px, "hover");
+      height: auto;
+      padding: units(0);
+      position: relative;
+    }
+  }
+}
+
+.usa-banner__button-text {
+  @include add-sr-only;
+  text-decoration: underline;
+
+  @include at-media("tablet") {
+    @include add-no-sr-only;
+    display: inline;
+  }
+}
+
+.usa-banner__icon {
+  width: units(5);
+}