jekyll-theme-uswds 0.1.0

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

@@ -0,0 +1,49 @@
+@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

@@ -0,0 +1,114 @@
+// 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

@@ -0,0 +1,13 @@
+// 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

@@ -0,0 +1,15 @@
+// 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

@@ -0,0 +1,24 @@
+@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

@@ -0,0 +1,17 @@
+@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

@@ -0,0 +1,24 @@
+@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

@@ -0,0 +1,22 @@
+// 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

@@ -0,0 +1,27 @@
+@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

@@ -0,0 +1,15 @@
+@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

@@ -0,0 +1,33 @@
+@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

@@ -0,0 +1,28 @@
+@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

@@ -0,0 +1,22 @@
+@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

@@ -0,0 +1,92 @@
+@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;
+    }
+  }
+}