uswds-jekyll 4.1.0 → 5.3.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/_button-groups.scss

@@ -0,0 +1,134 @@
+// Default styles
+.usa-button-group {
+  @include u-margin-y(0);
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  list-style-type: none;
+  margin-left: units(-0.5);
+  margin-right: units(-0.5);
+  padding-left: 0;
+
+  @include at-media("mobile-lg") {
+    flex-direction: row;
+  }
+}
+
+.usa-button-group__item {
+  margin: units(0.5);
+
+  &:last-child {
+    @include at-media("mobile-lg") {
+      margin-right: 0;
+    }
+  }
+
+  .usa-button {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+// Segemented styles
+.usa-button-group--segmented {
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  margin-left: 0;
+  margin-right: 0;
+
+  @include at-media("mobile-lg") {
+    justify-content: flex-start;
+  }
+
+  .usa-button {
+    position: relative;
+    width: calc(100% + #{units($theme-button-stroke-width)});
+
+    @include at-media("mobile-lg") {
+      width: auto;
+    }
+
+    // Ensures edges are not cut off when interacting with outline buttons
+    &:hover,
+    &:active {
+      z-index: 2;
+    }
+
+    &:focus {
+      z-index: 3;
+    }
+  }
+
+  .usa-button-group__item {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+
+    @include at-media("mobile-lg") {
+      width: auto;
+    }
+
+    &:first-child > .usa-button {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      margin-right: -(units($theme-button-stroke-width)) / 2;
+    }
+
+    &:last-child > .usa-button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      margin-right: 0;
+      margin-left: -(units($theme-button-stroke-width));
+      width: calc(100% + #{units($theme-button-stroke-width)});
+
+      @include at-media("mobile-lg") {
+        margin-left: -(units($theme-button-stroke-width)) / 2;
+        width: auto;
+      }
+    }
+
+    &:not(:first-child):not(:last-child) > .usa-button {
+      border-radius: 0;
+      margin-right: -(units($theme-button-stroke-width)) / 2;
+      margin-left: -(units($theme-button-stroke-width)) / 2;
+    }
+
+    // Creates separators
+    &:not(:last-child) .usa-button::before {
+      border-right: 1px solid color("primary-dark");
+      bottom: 0;
+      content: "";
+      display: block;
+      height: 100%;
+      position: absolute;
+      right: 1px;
+      top: 0;
+      width: 1px;
+      z-index: 3;
+    }
+
+    &:not(:last-child) .usa-button--secondary::before {
+      border-right-color: color("secondary-dark");
+    }
+
+    &:not(:last-child) .usa-button--accent-cool::before {
+      border-right-color: color("accent-cool-dark");
+    }
+
+    &:not(:last-child) .usa-button--base::before {
+      border-right-color: color("base-dark");
+    }
+
+    &:not(:last-child) .usa-button--secondary:disabled::before,
+    &:not(:last-child) .usa-button--accent-cool:disabled::before,
+    &:not(:last-child) .usa-button--base:disabled::before {
+      border-right-color: color("base");
+    }
+
+    &:not(:last-child) .usa-button:active::before,
+    &:not(:last-child) .usa-button--outline::before {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,346 @@
+/* TODO:
+ * Add a way to change the flag breakpoint as a modifier/class?
+ */
+
+@mixin card-inner-radius {
+  border-top-left-radius: calc(
+    #{radius($theme-card-border-radius)} - #{units($theme-card-border-width)}
+  );
+  border-top-right-radius: calc(
+    #{radius($theme-card-border-radius)} - #{units($theme-card-border-width)}
+  );
+}
+
+@include override-prose {
+  .usa-card-group {
+    @include add-list-reset;
+  }
+}
+
+.usa-card-group {
+  @include u-display("flex");
+  @include u-flex("column", "wrap", "align-stretch");
+  @include u-margin-x($theme-card-gap / -2);
+  @include at-media($theme-card-flag-min-width) {
+    @include u-flex("row");
+  }
+}
+
+@include override-prose {
+  .usa-card {
+    @include u-margin-bottom($theme-card-margin-bottom + 1);
+    @include u-maxw("none"); // override prose scope
+    &:last-child {
+      @include u-margin-bottom(
+        $theme-card-margin-bottom + 1
+      ); // override prose scope
+    }
+    @include at-media("tablet") {
+      @include u-margin-bottom($theme-card-margin-bottom);
+      &:last-child {
+        @include u-margin-bottom(
+          $theme-card-margin-bottom
+        ); // override prose scope
+      }
+    }
+  }
+}
+
+.usa-card__container {
+  @include border-box-sizing;
+  @include typeset;
+  @include u-bg("white");
+  @include u-border($theme-card-border-width, $theme-card-border-color);
+  @include u-display("flex");
+  @include u-height("full");
+  @include u-flex("column");
+  @include u-margin-x($theme-card-gap / 2);
+  @include u-position("relative");
+  @include u-radius($theme-card-border-radius);
+}
+
+.usa-card:not(.usa-card--flag) .usa-card__container > :only-child {
+  @include u-padding($theme-card-padding-perimeter);
+}
+
+.usa-card .usa-card__img {
+  @include u-display("block");
+}
+
+// Header
+// ---------------------------------
+.usa-card__header {
+  @include u-padding-bottom($theme-card-padding-y / 2);
+  @include u-padding-top($theme-card-padding-perimeter);
+  @include u-padding-x($theme-card-padding-perimeter);
+
+  &:last-child {
+    @include u-padding-bottom($theme-card-padding-perimeter);
+  }
+}
+
+.usa-card__heading {
+  @include typeset($theme-card-header-typeset);
+  @include u-margin(0);
+}
+
+// Media
+// ---------------------------------
+.usa-card__media {
+  @include u-order("first");
+  // IE 11
+  // http://github.com/philipwalton/flexbugs/issues/75
+  min-height: 1px;
+}
+
+.usa-card__img {
+  @include card-inner-radius;
+  @include u-bg("base-lightest");
+  @include u-position("relative");
+  overflow: hidden;
+
+  img {
+    @include u-display("block");
+    @include u-height("full");
+    @include u-width("full");
+    object-fit: cover;
+  }
+}
+
+.usa-card__media--inset {
+  @include u-padding-top($theme-card-padding-perimeter);
+  @include u-padding-x($theme-card-padding-perimeter);
+
+  .usa-card__img {
+    @include u-radius(0);
+  }
+}
+
+// Body
+// ---------------------------------
+.usa-card__body {
+  @include u-flex("fill");
+  @include u-padding-x($theme-card-padding-perimeter);
+  @include u-padding-y($theme-card-padding-y / 2);
+  // IE 11
+  flex-basis: auto;
+
+  // adjust spacing if body lack siblings
+  &:last-child {
+    @include u-padding-bottom($theme-card-padding-perimeter);
+  }
+
+  &:first-child {
+    @include u-padding-top($theme-card-padding-perimeter);
+  }
+
+  &:only-child {
+    @include u-padding-y($theme-card-padding-perimeter);
+  }
+}
+
+// Footer
+// ---------------------------------
+.usa-card__footer {
+  @include u-padding-bottom($theme-card-padding-perimeter);
+  @include u-padding-top($theme-card-padding-y / 2);
+  @include u-padding-x($theme-card-padding-perimeter);
+}
+
+.usa-card__footer .usa-button:only-of-type {
+  @include u-margin-right(0);
+}
+
+.usa-card__header,
+.usa-card__body {
+  // strip spacing from first and last content
+  > :last-child {
+    @include u-padding-bottom(0);
+    @include u-margin-bottom(0);
+  }
+
+  > :first-child {
+    @include u-margin-top(0);
+    @include u-padding-top(0);
+  }
+
+  > :only-child {
+    @include u-margin-y(0);
+    @include u-padding-y(0);
+  }
+}
+
+// ---------------------------------
+// Variations
+// ---------------------------------
+
+// Exdent
+.usa-card__header--exdent,
+.usa-card__media--exdent,
+.usa-card__footer--exdent {
+  @include u-margin-x(-$theme-card-border-width);
+}
+
+.usa-card__header--exdent,
+.usa-card__footer--exdent {
+  > * {
+    @include u-padding-x($theme-card-border-width);
+  }
+}
+
+.usa-card__media--exdent {
+  @include u-margin-top(-$theme-card-border-width);
+
+  .usa-card__img {
+    @include u-radius-top($theme-card-border-radius);
+  }
+}
+
+// Header first
+// ---------------------------------
+.usa-card--header-first {
+  .usa-card__header {
+    @include card-inner-radius;
+    @include u-padding-bottom($theme-card-padding-y);
+  }
+
+  .usa-card__header--exdent {
+    @include u-margin-top(-$theme-card-border-width);
+    @include u-radius-top($theme-card-border-radius);
+  }
+
+  .usa-card__media--inset {
+    @include u-padding-top(0);
+  }
+
+  .usa-card__media {
+    @include u-order(0);
+  }
+
+  .usa-card__img {
+    @include u-radius(0);
+  }
+
+  .usa-card__body {
+    @include u-padding-top($theme-card-padding-y);
+  }
+}
+
+.usa-card--flag {
+  @include at-media($theme-card-flag-min-width) {
+    .usa-card__media {
+      @include u-display("flex");
+      @include u-overflow("hidden");
+      @include u-pin-y;
+      @include u-pin-left;
+      @include u-position("absolute");
+      @include u-width($theme-card-flag-image-width);
+    }
+    .usa-card__img {
+      @include u-radius(0);
+      border-top-left-radius: calc(
+        #{radius($theme-card-border-radius)} - #{units(
+            $theme-card-border-width
+          )}
+      );
+      border-bottom-left-radius: calc(
+        #{radius($theme-card-border-radius)} - #{units(
+            $theme-card-border-width
+          )}
+      );
+    }
+
+    .usa-card__header,
+    .usa-card__body,
+    .usa-card__footer {
+      @include u-margin-left($theme-card-flag-image-width);
+    }
+
+    .usa-card__media--exdent {
+      @include u-margin-left(-$theme-card-border-width);
+      @include u-margin-right(0);
+      @include u-margin-y(-$theme-card-border-width);
+
+      .usa-card__img {
+        @include u-radius-left($theme-card-border-radius);
+      }
+    }
+
+    .usa-card__media--inset {
+      @include u-padding-right(0);
+      @include u-padding-bottom($theme-card-padding-perimeter);
+
+      .usa-card__img {
+        @include u-radius(0);
+      }
+    }
+
+    &.usa-card--header-first {
+      .usa-card__header {
+        @include u-padding-bottom($theme-card-padding-y / 2);
+      }
+      .usa-card__body {
+        @include u-padding-top($theme-card-padding-y / 2);
+      }
+      .usa-card__media--inset {
+        @include u-padding-top($theme-card-padding-perimeter);
+      }
+    }
+
+    &.usa-card--media-right {
+      .usa-card__media {
+        @include u-left("auto");
+        @include u-right(0);
+      }
+
+      .usa-card__media--inset {
+        @include u-padding-left(0);
+        @include u-padding-right($theme-card-padding-perimeter);
+
+        .usa-card__img {
+          @include u-radius(0);
+        }
+      }
+
+      .usa-card__img {
+        @include u-radius(0);
+        border-top-right-radius: calc(
+          #{radius($theme-card-border-radius)} - #{units(
+              $theme-card-border-width
+            )}
+        );
+        border-bottom-right-radius: calc(
+          #{radius($theme-card-border-radius)} - #{units(
+              $theme-card-border-width
+            )}
+        );
+      }
+
+      .usa-card__header,
+      .usa-card__body,
+      .usa-card__footer {
+        @include u-margin-left(0);
+        @include u-margin-right($theme-card-flag-image-width);
+      }
+
+      .usa-card__media--exdent {
+        @include u-margin-right(-$theme-card-border-width);
+        @include u-margin-left(0);
+
+        .usa-card__img {
+          @include u-radius(0);
+          @include u-radius-right($theme-card-border-radius);
+        }
+      }
+    }
+  }
+}
+
+.usa-card:not(.usa-card--flag).usa-card__media--set-aspect {
+  @include add-aspect("16x9");
+  @include u-position("relative");
+
+  .usa-card__img {
+    @include u-pin-all;
+  }
+}