uswds-jekyll 4.0.0 → 5.2.0

data/_sass/uswds/src/core/mixins/_icon.scss

@@ -0,0 +1,183 @@
+@mixin display-icon($icon, $direction, $size, $margin, $hover) {
+  &::#{$direction} {
+    @include add-background-svg("#{$icon}");
+    background-size: 100%;
+    content: "";
+    display: inline-block;
+    height: $size;
+    width: $size;
+
+    /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */
+    @if $direction == "after" {
+      margin-left: $margin;
+    } @else {
+      margin-right: $margin;
+    }
+    /* stylelint-enable */
+  }
+
+  @if $hover == "hover" {
+    &:hover::#{$direction} {
+      @include add-background-svg("#{$icon}-hover");
+    }
+  }
+}
+
+@mixin remove-icon($direction) {
+  &::#{$direction} {
+    display: none;
+  }
+}
+
+@mixin add-icon(
+  $icon-name,
+  $direction,
+  $image-size,
+  $container-size,
+  $margin,
+  $hover
+) {
+  &::#{$direction} {
+    @include add-background-svg("#{$icon-name}");
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: units($image-size);
+    content: "";
+    display: inline-block;
+    height: units($container-size);
+    width: units($container-size);
+
+    /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */
+    @if $direction == "after" {
+      margin-left: units($margin);
+    } @else {
+      margin-right: units($margin);
+    }
+    /* stylelint-enable */
+  }
+
+  @if $hover == "hover" {
+    &:hover::#{$direction} {
+      @include add-background-svg("#{$icon-name}-hover");
+    }
+  }
+}
+
+// New icon mixins using SVG mask technique
+//
+// $image may be a specific SVG or a list in the form
+// ($base, $variant, $variant-alt, $bg)
+// the mixin will pick IE11-compatible svgs named
+// [base]-[variant].svg based on the specified background-color
+
+@mixin add-color-icon($icon-object, $contrast-bg) {
+  $filename-base: map-get($icon-object, "name");
+  $svg-height: map-get($icon-object, "svg-height");
+  $svg-width: map-get($icon-object, "svg-width");
+  $aspect: $svg-width / $svg-height;
+  $height: if(
+    unitless(map-get($icon-object, "height")),
+    units(map-get($icon-object, "height")),
+    map-get($icon-object, "height")
+  );
+  $width: $height * $aspect;
+  $container-height: if(
+    map-has-key($icon-object, "container-height"),
+    units(map-get($icon-object, "container-height")),
+    null
+  );
+  $container-width: if(
+    map-has-key($icon-object, "container-width"),
+    units(map-get($icon-object, "container-width")),
+    null
+  );
+  $color: if(
+    map-has-key($icon-object, "color"),
+    map-get($icon-object, "color"),
+    "ink"
+  );
+  $color-variant: if(
+    map-has-key($icon-object, "color-variant"),
+    map-get($icon-object, "color-variant"),
+    "white"
+  );
+  $color-hover: if(
+    map-has-key($icon-object, "color-hover"),
+    map-get($icon-object, "color-hover"),
+    null
+  );
+  $rotate: if(
+    map-has-key($icon-object, "rotate"),
+    map-get($icon-object, "rotate"),
+    null
+  );
+  $path: if(
+    map-has-key($icon-object, "path"),
+    map-get($icon-object, "path"),
+    $theme-image-path
+  );
+  $ie11-variant: get-token-from-bg($contrast-bg, $color-variant, "black");
+  $filename-ie11-variant: if($ie11-variant == "black", null, $ie11-variant);
+  $filename: if(
+    $filename-ie11-variant,
+    "#{$filename-base}-#{$filename-ie11-variant}.svg",
+    "#{$filename-base}.svg"
+  );
+
+  $image-props: url("#{$path}/#{$filename}") no-repeat center / #{$width} #{$height};
+
+  // Default background shorthand for browsers that don't support mask or supports.
+  background: $image-props;
+  display: inline-block;
+  height: if($container-height, $container-height, $height);
+  width: if($container-width, $container-width, $width);
+  @if $rotate {
+    transform: rotate($rotate);
+  }
+
+  // Mask supportered styles
+  @supports (mask: url("")) or (-webkit-mask: url("")) {
+    background: none;
+    background-color: color($color);
+    mask: $image-props;
+    @if $color-hover {
+      &:hover {
+        background-color: color($color-hover);
+      }
+    }
+  }
+}
+
+// Places an icon before or after an element as an inline-block,
+// using the `:before` or `:after` pseudoelements.
+@mixin place-icon(
+  $icon-object,
+  $direction,
+  $margin,
+  $vertical-align,
+  $contrast-bg
+) {
+  $color-hover: if(
+    map-has-key($icon-object, "color-hover"),
+    map-get($icon-object, "color-hover"),
+    null
+  );
+  &::#{$direction} {
+    @include add-color-icon($icon-object, $contrast-bg);
+    content: "";
+    vertical-align: $vertical-align;
+
+    @if $direction == "after" {
+      margin-left: units($margin);
+    } @else {
+      margin-right: units($margin);
+    }
+  }
+
+  @if $color-hover {
+    &:hover::#{$direction} {
+      content: ""; // Added to address a weird display bug
+      background-color: color($color-hover);
+    }
+  }
+}

data/_sass/uswds/src/core/mixins/_layout-grid.scss

@@ -0,0 +1,128 @@
+@mixin grid-gap-responsive {
+  $gap-mobile: if(
+    map-has-key($system-column-gaps, $theme-column-gap-mobile),
+    map-get($system-column-gaps, $theme-column-gap-mobile),
+    "error"
+  );
+  $gap-desktop: if(
+    map-has-key($system-column-gaps, $theme-column-gap-desktop),
+    map-get($system-column-gaps, $theme-column-gap-desktop),
+    "error"
+  );
+
+  @if $gap-mobile == "error" {
+    @error '$theme-column-gap-mobile is not set to a valid column gap width.';
+  }
+
+  @if $gap-desktop == "error" {
+    @error '$theme-column-gap-desktop is not set to a valid column gap width.';
+  }
+
+  @include u-margin-x(
+    unquote("#{$neg-prefix}-#{calc-gap-offset($gap-mobile)}")
+  );
+
+  > * {
+    @include this-border-box-sizing;
+    @include u-padding-x(calc-gap-offset($gap-mobile));
+  }
+
+  @include at-media("desktop") {
+    @include u-margin-x(
+      unquote("#{$neg-prefix}-#{calc-gap-offset($gap-desktop)}")
+    );
+
+    > * {
+      @include this-border-box-sizing;
+      @include u-padding-x(calc-gap-offset($gap-desktop));
+    }
+  }
+}
+
+@mixin grid-gap($props...) {
+  $props: unpack($props);
+  @if length($props) == 0 {
+    @include grid-gap-responsive;
+  } @else {
+    $gap: smart-quote(nth($props, 1));
+    @if $gap == 0 {
+      @include u-margin-x(append-important($props, 0));
+
+      > * {
+        @include this-border-box-sizing;
+        @include u-padding-x(append-important($props, 0));
+      }
+    } @else {
+      @if map-has-key($project-column-gaps, $gap) {
+        $gap: map-get($project-column-gaps, $gap);
+      } @else if map-has-key($system-column-gaps, $gap) {
+        $gap: map-get($system-column-gaps, $gap);
+      }
+      @include u-margin-x(
+        append-important(
+          $props,
+          unquote("#{$neg-prefix}-#{calc-gap-offset($gap)}")
+        )
+      );
+      > * {
+        @include this-border-box-sizing;
+        @include u-padding-x(append-important($props, calc-gap-offset($gap)));
+      }
+    }
+  }
+}
+
+@mixin grid-col($props...) {
+  $props: unpack($props);
+  @include this-border-box-sizing;
+
+  @if length($props) == 0 {
+    @include u-flex(fill);
+    @include u-width(auto);
+  } @else {
+    $col: smart-quote(nth($props, 1));
+    @if $col == "auto" {
+      $flex: append-important($props, auto);
+      $width: append-important($props, auto);
+      $maxw: append-important($props, full);
+      @include u-flex($flex);
+      @include u-width($width);
+      @include u-maxw($maxw);
+    } @else if $col == "fill" {
+      $flex: append-important($props, fill);
+      $width: append-important($props, auto);
+      $maxw: append-important($props, full);
+      @include u-flex($flex);
+      @include u-width($width);
+      @include u-maxw($maxw);
+      min-width: 1px; // IE 11
+    } @else if not map-has-key($system-layout-grid-widths, $col) {
+      @error '#{$col} is not a valid layout grid width. Valid width are #{map-keys($system-layout-grid-widths)}';
+    } @else {
+      $flex: append-important($props, auto);
+      $width: append-important(
+        $props,
+        map-get($system-layout-grid-widths, $col)
+      );
+      @include u-flex($flex);
+      @include u-width(override, $width);
+    }
+  }
+}
+
+@mixin grid-offset($props...) {
+  $props: unpack($props);
+  $offset: smart-quote(nth($props, 1));
+  @if $offset == "none" {
+    $width: append-important($props, 0);
+    @include u-margin-left(override, $width);
+  } @else if not map-has-key($system-layout-grid-widths, $offset) {
+    @error '#{$offset} is not a valid layout grid width. Valid width are #{map-keys($system-layout-grid-widths)}';
+  } @else {
+    $width: append-important(
+      $props,
+      map-get($system-layout-grid-widths, $offset)
+    );
+    @include u-margin-left(override, $width);
+  }
+}

data/_sass/uswds/src/core/mixins/_media-block-img.scss

@@ -0,0 +1,4 @@
+@mixin media-block-img($margin-right: units(1)) {
+  flex-shrink: 0;
+  margin-right: $margin-right;
+}

data/_sass/uswds/{elements/_figure.scss → src/core/mixins/_media-link.scss}

@@ -1,13 +1,5 @@
-img {
-  max-width: 100%;
-}
-
 // TODO: Add documentation instructions for using this class on image links
 @mixin media-link {
   display: inline-block;
   line-height: 0;
 }
-
-.media_link {
-  @include media-link();
-}

data/_sass/uswds/src/core/mixins/_nav-list.scss

@@ -0,0 +1,95 @@
+$sidenav-level-1-inset: 2;
+$sidenav-level-2-inset: 4;
+$sidenav-level-3-inset: 6;
+$sidenav-level-4-inset: 8;
+
+@mixin nav-list($type) {
+  @include unstyled-list();
+
+  @if $type == "sidenav" {
+    &__item {
+      border-top: units(1px) solid color("base-lighter");
+    }
+  }
+
+  @if $type == "nav" {
+    &-item {
+      border-top: units(1px) solid color("base-lighter");
+    }
+  }
+
+  a {
+    color: color("base-dark");
+    display: block;
+    padding: units(1) units($sidenav-level-1-inset);
+    text-decoration: none;
+
+    &:hover {
+      background-color: color("base-lightest");
+      color: color("primary");
+      text-decoration: none;
+    }
+
+    &:focus {
+      outline-offset: 0;
+    }
+  }
+
+  .usa-current {
+    @include add-bar(
+      $theme-sidenav-current-border-width,
+      "primary",
+      "left",
+      "pill",
+      0.5,
+      0.5
+    );
+    color: color("primary");
+    font-weight: font-weight("bold");
+
+    @include at-media("tablet") {
+      @include add-bar(
+        $theme-sidenav-current-border-width,
+        "primary",
+        "left",
+        "pill",
+        0,
+        0.5
+      );
+    }
+  }
+}
+
+@mixin nav-sublist {
+  @include unstyled-list();
+  margin: 0;
+
+  &-item {
+    border-top: units(1px) solid color("base-lighter");
+    font-size: font-size($theme-sidenav-font-family, "2xs");
+  }
+
+  .usa-current {
+    @include remove-bar;
+
+    @include at-media("tablet") {
+      @include remove-bar;
+    }
+  }
+
+  // level 2+
+  a {
+    padding-left: units($sidenav-level-2-inset);
+  }
+
+  // level 3+
+  & & a {
+    padding-left: units($sidenav-level-3-inset);
+  }
+
+  // level 4+
+  & & & a {
+    content: "foobar";
+    padding-left: units($sidenav-level-4-inset);
+  }
+}

data/_sass/uswds/src/core/mixins/_override-prose.scss

@@ -0,0 +1,6 @@
+@mixin override-prose {
+  @content;
+  .usa-prose {
+    @content;
+  }
+}

data/_sass/uswds/src/core/mixins/_screen-reader.scss

@@ -0,0 +1,23 @@
+// Screen reader only helper
+@mixin sr-only {
+  position: absolute;
+  left: -999em;
+}
+
+@mixin add-sr-only {
+  position: absolute;
+  left: -999em;
+}
+
+// This "negates" the sr-only helper; useful if
+// we want the default state of something to be
+// for screen readers only, but we want to force
+// it to show for sighted users under more specific
+// conditions.
+@mixin not-sr-only {
+  position: static;
+}
+
+@mixin add-no-sr-only {
+  position: static;
+}