uswds-jekyll 4.2.0 → 5.0.0

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;
+  }
+}