uswds-jekyll 4.1.0 → 5.3.0

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

@@ -0,0 +1,17 @@
+.usa-checklist {
+  @include add-list-reset;
+  @include border-box-sizing;
+  @include typeset;
+}
+
+.usa-checklist__item {
+  @include add-checkbox-placeholder;
+  @include u-margin-y(0);
+  margin-bottom: 0;
+  margin-top: units(1);
+
+  // Deprecate usa-checklist__item--checked once the js is updated
+  &.usa-checklist__item--checked {
+    @include add-success-mark;
+  }
+}

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

@@ -0,0 +1,359 @@
+// General footer styles
+
+.usa-footer {
+  @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 {
+  @include u-padding-y(2.5);
+  line-height: line-height($theme-footer-font-family, 1);
+
+  a {
+    @include typeset-link;
+  }
+}
+
+.usa-footer__nav {
+  @include grid-container($theme-footer-max-width);
+  @include u-padding-x(0);
+  border-bottom: 1px solid color("base-light");
+
+  @include at-media("mobile-lg") {
+    @include add-responsive-site-margins;
+    border-bottom: none;
+  }
+
+  > ul {
+    @include add-list-reset;
+  }
+}
+
+.usa-footer__primary-section {
+  background-color: color("base-lightest");
+
+  > .grid-container {
+    @include grid-container($theme-footer-max-width);
+  }
+}
+
+.usa-footer__primary-container {
+  @include grid-container($theme-footer-max-width);
+
+  @include at-media("desktop") {
+    @include u-padding-x(4);
+  }
+}
+
+.usa-footer__primary-content {
+  line-height: line-height($theme-footer-font-family, 2);
+}
+
+.usa-footer__primary-link a,
+.usa-footer__secondary-link a {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.usa-footer__primary-link {
+  @include u-padding-x($theme-site-margins-mobile-width);
+  @include u-padding-y(2);
+  @include u-text("ink", "no-underline", "bold");
+  display: block;
+
+  @include at-media("mobile-lg") {
+    @include u-padding-x(0);
+  }
+
+  &:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}
+
+.usa-footer__secondary-link {
+  line-height: line-height($theme-footer-font-family, 2);
+  margin-left: units(2);
+  padding: 0;
+
+  a {
+    @include typeset-link;
+  }
+
+  & + .usa-footer__secondary-link {
+    padding-top: units(2);
+  }
+
+  @include at-media("mobile-lg") {
+    margin-left: 0;
+  }
+}
+
+.usa-footer__contact-info {
+  line-height: line-height($theme-footer-font-family, 2);
+
+  a {
+    @include u-text("ink", "no-underline");
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @include at-media("mobile-lg") {
+    @include u-flex("justify-end");
+    margin-top: units(1);
+  }
+}
+
+.usa-footer__primary-content {
+  border-top: 1px solid color("base-light");
+
+  @include at-media("mobile-lg") {
+    border: none;
+  }
+}
+
+.usa-sign-up {
+  padding-bottom: units(4);
+  padding-top: units(3);
+
+  .usa-label,
+  .usa-button {
+    margin-top: units(1.5);
+  }
+}
+
+.usa-sign-up__heading {
+  @include h3;
+  margin: 0;
+}
+
+.usa-footer__secondary-section {
+  @include u-padding-y(2.5);
+  background-color: color("base-lighter");
+
+  > .grid-container {
+    @include grid-container($theme-footer-max-width);
+  }
+
+  a {
+    color: color("ink");
+  }
+}
+
+.usa-footer__logo {
+  @include u-margin-y(1);
+  @include at-media("mobile-lg") {
+    @include u-margin-y(0);
+    @include u-flex("align-center");
+  }
+}
+
+.usa-footer__logo-img {
+  max-width: units(10);
+}
+
+.usa-footer__logo-heading {
+  @include typeset($theme-footer-font-family, $theme-h3-font-size, 1);
+  @include u-margin-y(1);
+}
+
+.usa-footer__contact-links {
+  margin-top: units(3);
+
+  @include at-media("mobile-lg") {
+    margin-top: 0;
+    text-align: right;
+  }
+}
+
+.usa-footer__contact-heading {
+  @include typeset(
+    $theme-footer-font-family,
+    $theme-h3-font-size,
+    $theme-heading-line-height
+  );
+  margin-top: 0;
+
+  @include at-media("mobile-lg") {
+    @include u-margin-y(0.5);
+  }
+}
+
+.usa-footer__social-links {
+  line-height: line-height($theme-footer-font-family, 1);
+  padding-bottom: units(1);
+
+  a {
+    text-decoration: none;
+  }
+
+  @include at-media("mobile-lg") {
+    @include u-flex("justify-end");
+  }
+}
+
+.usa-social-link {
+  $background-height: units(3); // Height of icon within hit area.
+  @include u-square($size-touch-target);
+  background-position: center center;
+  background-size: auto $background-height;
+  background-color: color("black-transparent-10");
+  display: inline-block;
+
+  span {
+    @include sr-only();
+  }
+}
+
+.usa-social-link--facebook {
+  @include add-background-svg("social-icons/facebook25");
+}
+
+.usa-social-link--twitter {
+  @include add-background-svg("social-icons/twitter16");
+}
+
+.usa-social-link--youtube {
+  @include add-background-svg("social-icons/youtube15");
+}
+
+.usa-social-link--rss {
+  @include add-background-svg("social-icons/rss25");
+}
+
+.usa-footer__address {
+  @include at-media("mobile-lg") {
+    @include u-flex("justify-end");
+  }
+}
+
+// Slim footer styles
+
+.usa-footer--slim {
+  .usa-footer__nav {
+    @include at-media("desktop") {
+      @include u-padding-x(0);
+    }
+  }
+
+  .usa-footer__address {
+    @include u-padding-x($theme-site-margins-mobile-width);
+    @include u-padding-y(2);
+    @include at-media("mobile-lg") {
+      @include u-padding(0);
+    }
+  }
+
+  .usa-footer__logo {
+    @include u-flex("align-center");
+  }
+
+  .usa-footer__logo-img {
+    max-width: units(6);
+  }
+
+  .usa-footer__contact-info {
+    display: inline-block;
+
+    @include at-media("mobile-lg") {
+      @include u-padding-y(2);
+      margin-top: 0;
+    }
+  }
+}
+
+// Big footer styles
+
+.usa-footer--big {
+  .usa-footer__nav {
+    @include u-margin-x($theme-site-margins-mobile-width * -1);
+    @include at-media("mobile-lg") {
+      border-bottom: 1px solid color("base-light");
+      padding-top: units(4);
+    }
+    @include at-media("tablet") {
+      @include u-margin-x(0);
+      @include u-padding-x(0);
+      border-bottom: none;
+    }
+  }
+
+  .usa-footer__primary-link {
+    @include h4;
+    line-height: line-height("heading", 2);
+    margin: 0;
+
+    @include at-media("mobile-lg") {
+      @include u-padding-y(0);
+      margin-bottom: units(1);
+
+      &:hover {
+        cursor: auto;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .usa-footer__primary-content--collapsible {
+    .usa-footer__primary-link {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      justify-content: flex-start;
+
+      // Arrow for collapsible content.
+      &::before {
+        @include add-background-svg("arrow-down");
+        align-items: center;
+        background-size: contain;
+        content: "";
+        display: inline-flex;
+        height: units(1.5);
+        justify-content: center;
+        margin-right: units(1);
+        width: units(1.5);
+      }
+
+      @include at-media("mobile-lg") {
+        &::before {
+          content: none;
+        }
+      }
+    }
+
+    &.hidden {
+      .usa-list--unstyled {
+        display: none;
+      }
+
+      .usa-footer__primary-link {
+        &::before {
+          @include add-background-svg("arrow-right");
+        }
+
+        @include at-media("mobile-lg") {
+          margin: 0;
+        }
+      }
+    }
+
+    .usa-list--unstyled {
+      @include u-padding-x($theme-site-margins-mobile-width);
+      padding-bottom: units(2.5);
+
+      @include at-media("mobile-lg") {
+        @include u-padding-x(0);
+        padding-bottom: units(4);
+        padding-top: units(1.5);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+.usa-form {
+  @include typeset(
+    $theme-form-font-family,
+    $theme-body-font-size,
+    $theme-input-line-height
+  );
+  @include border-box-sizing;
+}
+
+.usa-form {
+  @include at-media("mobile-lg") {
+    max-width: units("mobile");
+  }
+
+  .usa-input,
+  .usa-range,
+  .usa-select,
+  .usa-textarea {
+    // max width not needed since .usa-form has one of its own
+    max-width: none;
+  }
+
+  .usa-input--small {
+    max-width: units(8);
+  }
+
+  .usa-input--medium {
+    max-width: units(15);
+  }
+
+  .usa-button {
+    margin-top: units(1);
+
+    @include at-media("mobile-lg") {
+      margin-top: units(3);
+    }
+  }
+
+  a {
+    @include typeset-link;
+  }
+}
+
+.usa-form--large {
+  @include at-media("mobile-lg") {
+    max-width: units("mobile-lg");
+  }
+}
+
+.usa-form__note {
+  @include typeset($theme-form-font-family, "2xs", 3);
+  float: right;
+  margin: units(0.5) 0 units(2);
+}

data/_sass/uswds/src/components/_graphic-list.scss

@@ -0,0 +1,42 @@
+// A collection of media block objects
+
+.usa-graphic-list {
+  @include typeset;
+  @include border-box-sizing;
+
+  .usa-graphic-list__row {
+    .usa-media-block {
+      margin-bottom: units(4);
+
+      @include at-media("tablet") {
+        margin-bottom: units(8);
+      }
+    }
+
+    &:last-child {
+      .usa-media-block {
+        @include at-media("tablet") {
+          margin-bottom: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .usa-media-block__img {
+    margin-right: units(3);
+  }
+
+  .usa-media-block__body {
+    > :first-child {
+      margin-top: 0;
+    }
+  }
+}
+
+.usa-graphic-list__heading {
+  @include typeset-h3;
+}