uswds-jekyll 2.2.1 → 5.0.0

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

@@ -0,0 +1,64 @@
+@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");
+    }
+  }
+}

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)) {
+  float: left;
+  margin-right: $margin-right;
+}

data/_sass/uswds/src/core/mixins/_media-link.scss

@@ -0,0 +1,5 @@
+// TODO: Add documentation instructions for using this class on image links
+@mixin media-link {
+  display: inline-block;
+  line-height: 0;
+}

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

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

@@ -0,0 +1,161 @@
+/*
+----------------------------------------
+typeset()
+----------------------------------------
+Sets:
+- family
+- size
+- line-height
+----------------------------------------
+*/
+
+@mixin typeset(
+  $family: $theme-body-font-family,
+  $scale: $theme-body-font-size,
+  $line-height: $theme-body-line-height
+) {
+  @if type-of($family) == "list" {
+    $list: $family;
+    $family: if(nth($list, 1), nth($list, 1), null);
+    $scale: if(nth($list, 2), nth($list, 2), null);
+    $line-height: if(nth($list, 3), nth($list, 3), null);
+  }
+  $family: if($family == null, $theme-body-font-family, $family);
+  $scale: if($scale == null, $theme-body-font-size, $scale);
+  $line-height: if($line-height == null, $theme-body-line-height, $line-height);
+  @include u-font($family, $scale);
+  @include u-line-height($family, $line-height);
+}
+
+@mixin typeset-heading {
+  @include u-margin-y(0);
+  clear: both;
+
+  * + & {
+    margin-top: 1.5em; // TODO: add as var to settings?
+  }
+
+  + * {
+    margin-top: 1em;
+  }
+}
+
+// typeset element mixins
+@mixin typeset-p {
+  line-height: line-height($theme-body-font-family, $theme-body-line-height);
+  margin-bottom: 0;
+  margin-top: 0;
+  max-width: measure($theme-text-measure);
+
+  * + & {
+    margin-top: 1em; // TODO: add as var to settings?
+  }
+
+  + * {
+    margin-top: 1em;
+  }
+}
+
+@mixin typeset-link {
+  color: color($theme-link-color);
+  text-decoration: underline;
+
+  &:hover {
+    color: color($theme-link-hover-color);
+  }
+
+  &:active {
+    color: color($theme-link-active-color);
+  }
+
+  &:focus {
+    @include focus-outline;
+  }
+
+  &:visited {
+    color: color($theme-link-visited-color);
+  }
+}
+
+@mixin display {
+  @include typeset(
+    "heading",
+    $theme-display-font-size,
+    $theme-heading-line-height
+  );
+
+  font-weight: fw("bold");
+}
+
+@mixin typeset-display {
+  @include typeset-heading;
+  @include display;
+}
+
+@mixin h1 {
+  @include typeset("heading", $theme-h1-font-size, $theme-heading-line-height);
+
+  font-weight: fw("bold");
+}
+
+@mixin typeset-h1 {
+  @include typeset-heading;
+  @include h1;
+}
+
+@mixin h2 {
+  @include typeset("heading", $theme-h2-font-size, $theme-heading-line-height);
+
+  font-weight: fw("bold");
+}
+
+@mixin typeset-h2 {
+  @include typeset-heading;
+  @include h2;
+}
+
+@mixin h3 {
+  @include typeset("heading", $theme-h3-font-size, $theme-heading-line-height);
+
+  font-weight: fw("bold");
+}
+
+@mixin typeset-h3 {
+  @include typeset-heading;
+  @include h3;
+}
+
+@mixin h4 {
+  @include typeset("heading", $theme-h4-font-size, $theme-heading-line-height);
+
+  font-weight: fw("bold");
+}
+
+@mixin typeset-h4 {
+  @include typeset-heading;
+  @include h4;
+}
+
+@mixin h5 {
+  @include typeset("heading", $theme-h5-font-size, $theme-heading-line-height);
+
+  font-weight: fw("bold");
+}
+
+@mixin typeset-h5 {
+  @include typeset-heading;
+  @include h5;
+}
+
+@mixin h6 {
+  @include typeset("body", $theme-h6-font-size, $theme-heading-line-height);
+
+  font-weight: fw("normal");
+  letter-spacing: ls("ls-1");
+  text-transform: uppercase;
+}
+
+@mixin typeset-h6 {
+  @include typeset-heading;
+  @include h6;
+}