uswds-jekyll 4.2.0 → 5.0.0

data/_sass/uswds/lib/functions/_new-breakpoint.scss

@@ -1,49 +0,0 @@
-@charset "UTF-8";
-
-/// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat.
-///
-/// @param {List} $query
-///   A list of media query features and values. Each `$feature` should have a corresponding `$value`.
-///
-///   If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
-///
-///   The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
-///
-/// @param {Number (unitless)} $total-columns [$grid-columns]
-///   - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
-///
-/// @example scss - Usage
-///   $mobile: new-breakpoint(max-width 480px 4);
-///
-///   .element {
-///     @include media($mobile) {
-///       @include span-columns(4);
-///     }
-///   }
-///
-/// @example css - CSS Output
-///   @media screen and (max-width: 480px) {
-///     .element {
-///       display: block;
-///       float: left;
-///       margin-right: 7.42297%;
-///       width: 100%;
-///     }
-///     .element:last-child {
-///       margin-right: 0;
-///     }
-///   }
-
-@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) {
-  @if length($query) == 1 {
-    $query: $default-feature nth($query, 1) $total-columns;
-  } @else if is-even(length($query)) {
-    $query: append($query, $total-columns);
-  }
-
-  @if is-not(belongs-to($query, $visual-grid-breakpoints)) {
-    $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global;
-  }
-
-  @return $query;
-}

data/_sass/uswds/lib/functions/_private.scss

@@ -1,114 +0,0 @@
-// Not function for Libsass compatibility
-// https://github.com/sass/libsass/issues/368
-@function is-not($value) {
-  @return if($value, false, true);
-}
-
-// Checks if a number is even
-@function is-even($int) {
-  @return $int % 2 == 0;
-}
-
-// Checks if an element belongs to a list or not
-@function belongs-to($tested-item, $list) {
-  @return is-not(not-belongs-to($tested-item, $list));
-}
-
-@function not-belongs-to($tested-item, $list) {
-  @return is-not(index($list, $tested-item));
-}
-
-// Contains display value
-@function contains-display-value($query) {
-  @return belongs-to(table, $query)
-       or belongs-to(block, $query)
-       or belongs-to(inline-block, $query)
-       or belongs-to(inline, $query);
-}
-
-// Parses the first argument of span-columns()
-@function container-span($span: $span) {
-  @if length($span) == 3 {
-    $container-columns: nth($span, 3);
-    @return $container-columns;
-  } @else if length($span) == 2 {
-    $container-columns: nth($span, 2);
-    @return $container-columns;
-  }
-
-  @return $grid-columns;
-}
-
-@function container-shift($shift: $shift) {
-  $parent-columns: $grid-columns !default !global;
-
-  @if length($shift) == 3 {
-    $container-columns: nth($shift, 3);
-    @return $container-columns;
-  } @else if length($shift) == 2 {
-    $container-columns: nth($shift, 2);
-    @return $container-columns;
-  }
-
-  @return $parent-columns;
-}
-
-// Generates a striped background
-@function gradient-stops($grid-columns, $color: $visual-grid-color) {
-  $transparent: transparent;
-
-  $column-width: flex-grid(1, $grid-columns);
-  $gutter-width: flex-gutter($grid-columns);
-  $column-offset: $column-width;
-
-  $values: ($transparent 0, $color 0);
-
-  @for $i from 1 to $grid-columns*2 {
-    @if is-even($i) {
-      $values: append($values, $transparent $column-offset, comma);
-      $values: append($values, $color $column-offset, comma);
-      $column-offset: $column-offset + $column-width;
-    } @else {
-      $values: append($values, $color $column-offset, comma);
-      $values: append($values, $transparent $column-offset, comma);
-      $column-offset: $column-offset + $gutter-width;
-    }
-  }
-
-  @return $values;
-}
-
-// Layout direction
-@function get-direction($layout, $default) {
-  $direction: null;
-
-  @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" {
-    $direction: direction-from-layout($layout);
-  } @else {
-    $direction: direction-from-layout($default);
-  }
-
-  @return $direction;
-}
-
-@function direction-from-layout($layout) {
-  $direction: null;
-
-  @if to-upper-case($layout) == "LTR" {
-    $direction: right;
-  } @else {
-    $direction: left;
-  }
-
-  @return $direction;
-}
-
-@function get-opposite-direction($direction) {
-  $opposite-direction: left;
-
-  @if $direction == "left" {
-    $opposite-direction: right;
-  }
-
-  @return $opposite-direction;
-}

data/_sass/uswds/lib/functions/_px-to-em.scss

@@ -1,13 +0,0 @@
-// Convert pixels to ems
-// eg. for a relational value of 12px write em(12) when the parent is 16px
-// if the parent is another value say 24px write em(12, 24)
-
-@function em($pxval, $base: $em-base) {
-  @if not unitless($pxval) {
-    $pxval: strip-units($pxval);
-  }
-  @if not unitless($base) {
-    $base: strip-units($base);
-  }
-  @return ($pxval / $base) * 1em;
-}

data/_sass/uswds/lib/functions/_px-to-rem.scss

@@ -1,15 +0,0 @@
-// Convert pixels to rems
-// eg. for a relational value of 12px write rem(12)
-// Assumes $em-base is the font-size of <html>
-
-@function rem($pxval) {
-  @if not unitless($pxval) {
-    $pxval: strip-units($pxval);
-  }
-
-  $base: $em-base;
-  @if not unitless($base) {
-    $base: strip-units($base);
-  }
-  @return ($pxval / $base) * 1rem;
-}

data/_sass/uswds/lib/functions/_shade.scss

@@ -1,24 +0,0 @@
-@charset "UTF-8";
-
-/// Mixes a color with black.
-///
-/// @param {Color} $color
-///
-/// @param {Number (Percentage)} $percent
-///   The amount of black to be mixed in.
-///
-/// @example scss - Usage
-///   .element {
-///     background-color: shade(#ffbb52, 60%);
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     background-color: #664a20;
-///   }
-///
-/// @return {Color}
-
-@function shade($color, $percent) {
-  @return mix(#000, $color, $percent);
-}

data/_sass/uswds/lib/functions/_strip-units.scss

@@ -1,17 +0,0 @@
-@charset "UTF-8";
-
-/// Strips the unit from a number.
-///
-/// @param {Number (With Unit)} $value
-///
-/// @example scss - Usage
-///   $dimension: strip-units(10em);
-///
-/// @example css - CSS Output
-///   $dimension: 10;
-///
-/// @return {Number (Unitless)}
-
-@function strip-units($value) {
-  @return ($value / ($value * 0 + 1));
-}

data/_sass/uswds/lib/functions/_tint.scss

@@ -1,24 +0,0 @@
-@charset "UTF-8";
-
-/// Mixes a color with white.
-///
-/// @param {Color} $color
-///
-/// @param {Number (Percentage)} $percent
-///   The amount of white to be mixed in.
-///
-/// @example scss - Usage
-///   .element {
-///     background-color: tint(#6ecaa6, 40%);
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     background-color: #a8dfc9;
-///   }
-///
-/// @return {Color}
-
-@function tint($color, $percent) {
-  @return mix(#fff, $color, $percent);
-}

data/_sass/uswds/lib/functions/_transition-property-name.scss

@@ -1,22 +0,0 @@
-// Return vendor-prefixed property names if appropriate
-// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
-//************************************************************************//
-@function transition-property-names($props, $vendor: false) {
-  $new-props: ();
-
-  @each $prop in $props {
-    $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
-  }
-
-  @return $new-props;
-}
-
-@function transition-property-name($prop, $vendor: false) {
-  // put other properties that need to be prefixed here aswell
-  @if $vendor and $prop == transform {
-    @return unquote('-'+$vendor+'-'+$prop);
-  }
-  @else {
-    @return $prop;
-  }
-}

data/_sass/uswds/lib/functions/_unpack.scss

@@ -1,27 +0,0 @@
-@charset "UTF-8";
-
-/// Converts shorthand to the 4-value syntax.
-///
-/// @param {List} $shorthand
-///
-/// @example scss - Usage
-///   .element {
-///     margin: unpack(1em 2em);
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     margin: 1em 2em 1em 2em;
-///   }
-
-@function unpack($shorthand) {
-  @if length($shorthand) == 1 {
-    @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
-  } @else if length($shorthand) == 2 {
-    @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
-  } @else if length($shorthand) == 3 {
-    @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
-  } @else {
-    @return $shorthand;
-  }
-}

data/_sass/uswds/lib/grid/_box-sizing.scss

@@ -1,15 +0,0 @@
-@charset "UTF-8";
-
-@if $border-box-sizing == true {
-  html { // http://bit.ly/1qk2tVR
-    box-sizing: border-box;
-  }
-
-  * {
-    &,
-    &::after,
-    &::before {
-      box-sizing: inherit;
-    }
-  }
-}

data/_sass/uswds/lib/grid/_direction-context.scss

@@ -1,33 +0,0 @@
-@charset "UTF-8";
-
-/// Changes the direction property used by other mixins called in the code block argument.
-///
-/// @param {String} $direction [left-to-right]
-///   Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`.
-///
-/// @example scss - Usage
-///   @include direction-context(right-to-left) {
-///    .right-to-left-block {
-///      @include span-columns(6);
-///     }
-///   }
-///
-/// @example css - CSS Output
-///   .right-to-left-block {
-///     float: right;
-///      ...
-///   }
-
-@mixin direction-context($direction: left-to-right) {
-  $scope-direction: $layout-direction;
-
-  @if to-lower-case($direction) == "left-to-right" {
-    $layout-direction: LTR !global;
-  } @else if to-lower-case($direction) == "right-to-left" {
-    $layout-direction: RTL !global;
-  }
-
-  @content;
-
-  $layout-direction: $scope-direction !global;
-}

data/_sass/uswds/lib/grid/_display-context.scss

@@ -1,28 +0,0 @@
-@charset "UTF-8";
-
-/// Changes the display property used by other mixins called in the code block argument.
-///
-/// @param {String} $display [block]
-///   Display value to be used within the block. Can be `table` or `block`.
-///
-/// @example scss
-///   @include display-context(table) {
-///    .display-table {
-///      @include span-columns(6);
-///     }
-///   }
-///
-/// @example css
-///   .display-table {
-///      display: table-cell;
-///      ...
-///   }
-
-@mixin display-context($display: block) {
-  $scope-display: $container-display-table;
-  $container-display-table: $display == table !global;
-
-  @content;
-
-  $container-display-table: $scope-display !global;
-}

data/_sass/uswds/lib/grid/_fill-parent.scss

@@ -1,22 +0,0 @@
-@charset "UTF-8";
-
-/// Forces the element to fill its parent container.
-///
-/// @example scss - Usage
-///   .element {
-///     @include fill-parent;
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     width: 100%;
-///     box-sizing: border-box;
-///   }
-
-@mixin fill-parent() {
-  width: 100%;
-
-  @if $border-box-sizing == false {
-    box-sizing: border-box;
-  }
-}

data/_sass/uswds/lib/grid/_media.scss

@@ -1,92 +0,0 @@
-@charset "UTF-8";
-
-/// Outputs a media-query block with an optional grid context (the total number of columns used in the grid).
-///
-/// @param {List} $query
-///   A list of media query features and values, where each `$feature` should have a corresponding `$value`.
-///   For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
-///
-///   If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
-///
-///   The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`).
-///
-///
-/// @param {Number (unitless)} $total-columns [$grid-columns]
-///   - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
-///
-/// @example scss - Usage
-///   .responsive-element {
-///      @include media(769px) {
-///        @include span-columns(6);
-///      }
-///   }
-///
-///  .new-context-element {
-///    @include media(min-width 320px max-width 480px, 6) {
-///      @include span-columns(6);
-///    }
-///  }
-///
-/// @example css - CSS Output
-///  @media screen and (min-width: 769px) {
-///    .responsive-element {
-///      display: block;
-///      float: left;
-///      margin-right: 2.35765%;
-///      width: 48.82117%;
-///    }
-///
-///    .responsive-element:last-child {
-///      margin-right: 0;
-///    }
-///  }
-///
-///  @media screen and (min-width: 320px) and (max-width: 480px) {
-///    .new-context-element {
-///      display: block;
-///      float: left;
-///      margin-right: 4.82916%;
-///      width: 100%;
-///    }
-///
-///    .new-context-element:last-child {
-///      margin-right: 0;
-///    }
-///  }
-
-@mixin media($query: $feature $value $columns, $total-columns: $grid-columns) {
-  @if length($query) == 1 {
-    @media screen and ($default-feature: nth($query, 1)) {
-      $default-grid-columns: $grid-columns;
-      $grid-columns: $total-columns !global;
-      @content;
-      $grid-columns: $default-grid-columns !global;
-    }
-  } @else {
-    $loop-to: length($query);
-    $media-query: "screen and ";
-    $default-grid-columns: $grid-columns;
-    $grid-columns: $total-columns !global;
-
-    @if is-not(is-even(length($query))) {
-      $grid-columns: nth($query, $loop-to) !global;
-      $loop-to: $loop-to - 1;
-    }
-
-    $i: 1;
-    @while $i <= $loop-to {
-      $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";
-
-      @if ($i + 1) != $loop-to {
-        $media-query: $media-query + "and ";
-      }
-
-      $i: $i + 2;
-    }
-
-    @media #{$media-query} {
-      @content;
-      $grid-columns: $default-grid-columns !global;
-    }
-  }
-}