us_web_design_standards 0.0.0 → 0.0.2

data/app/assets/stylesheets/lib/bourbon/addons/_retina-image.scss

@@ -0,0 +1,25 @@
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
+  @if $asset-pipeline {
+    background-image: image-url("#{$filename}.#{$extension}");
+  } @else {
+    background-image:       url("#{$filename}.#{$extension}");
+  }
+
+  @include hidpi {
+    @if $asset-pipeline {
+      @if $retina-filename {
+        background-image: image-url("#{$retina-filename}.#{$extension}");
+      } @else {
+        background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
+      }
+    } @else {
+      @if $retina-filename {
+        background-image: url("#{$retina-filename}.#{$extension}");
+      } @else {
+        background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
+      }
+    }
+
+    background-size: $background-size;
+  }
+}

data/app/assets/stylesheets/lib/bourbon/addons/_size.scss

@@ -0,0 +1,51 @@
+@charset "UTF-8";
+
+/// Sets the `width` and `height` of the element.
+///
+/// @param {List} $size
+///   A list of at most 2 size values.
+///
+///   If there is only a single value in `$size` it is used for both width and height. All units are supported.
+///
+/// @example scss - Usage
+///   .first-element {
+///     @include size(2em);
+///   }
+///
+///   .second-element {
+///     @include size(auto 10em);
+///   }
+///
+/// @example css - CSS Output
+///   .first-element {
+///     width: 2em;
+///     height: 2em;
+///   }
+///
+///   .second-element {
+///     width: auto;
+///     height: 10em;
+///   }
+///
+/// @todo Refactor in 5.0.0 to use a comma-separated argument
+
+@mixin size($value) {
+  $width: nth($value, 1);
+  $height: $width;
+
+  @if length($value) > 1 {
+    $height: nth($value, 2);
+  }
+
+  @if is-size($height) {
+    height: $height;
+  } @else {
+    @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
+  }
+
+  @if is-size($width) {
+    width: $width;
+  } @else {
+    @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
+  }
+}

data/app/assets/stylesheets/lib/bourbon/addons/_text-inputs.scss

@@ -0,0 +1,112 @@
+@charset "UTF-8";
+
+/// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`.
+///
+/// @example scss - Usage
+///   #{$all-text-inputs} {
+///     border: 1px solid #f00;
+///   }
+///
+///   #{$all-text-inputs-focus},
+///   #{$all-text-inputs-hover} {
+///     border: 1px solid #0f0;
+///   }
+///
+///   #{$all-text-inputs-active} {
+///     border: 1px solid #00f;
+///   }
+///
+/// @example css - CSS Output
+///   input[type="color"],
+///   input[type="date"],
+///   input[type="datetime"],
+///   input[type="datetime-local"],
+///   input[type="email"],
+///   input[type="month"],
+///   input[type="number"],
+///   input[type="password"],
+///   input[type="search"],
+///   input[type="tel"],
+///   input[type="text"],
+///   input[type="time"],
+///   input[type="url"],
+///   input[type="week"],
+///   textarea {
+///     border: 1px solid #f00;
+///   }
+///
+///   input[type="color"]:focus,
+///   input[type="date"]:focus,
+///   input[type="datetime"]:focus,
+///   input[type="datetime-local"]:focus,
+///   input[type="email"]:focus,
+///   input[type="month"]:focus,
+///   input[type="number"]:focus,
+///   input[type="password"]:focus,
+///   input[type="search"]:focus,
+///   input[type="tel"]:focus,
+///   input[type="text"]:focus,
+///   input[type="time"]:focus,
+///   input[type="url"]:focus,
+///   input[type="week"]:focus,
+///   textarea:focus,
+///   input[type="color"]:hover,
+///   input[type="date"]:hover,
+///   input[type="datetime"]:hover,
+///   input[type="datetime-local"]:hover,
+///   input[type="email"]:hover,
+///   input[type="month"]:hover,
+///   input[type="number"]:hover,
+///   input[type="password"]:hover,
+///   input[type="search"]:hover,
+///   input[type="tel"]:hover,
+///   input[type="text"]:hover,
+///   input[type="time"]:hover,
+///   input[type="url"]:hover,
+///   input[type="week"]:hover,
+///   textarea:hover {
+///     border: 1px solid #0f0;
+///   }
+///
+///   input[type="color"]:active,
+///   input[type="date"]:active,
+///   input[type="datetime"]:active,
+///   input[type="datetime-local"]:active,
+///   input[type="email"]:active,
+///   input[type="month"]:active,
+///   input[type="number"]:active,
+///   input[type="password"]:active,
+///   input[type="search"]:active,
+///   input[type="tel"]:active,
+///   input[type="text"]:active,
+///   input[type="time"]:active,
+///   input[type="url"]:active,
+///   input[type="week"]:active,
+///   textarea:active {
+///     border: 1px solid #00f;
+///   }
+///
+/// @require assign-inputs
+///
+/// @type List
+
+$text-inputs-list: 'input[type="color"]',
+                   'input[type="date"]',
+                   'input[type="datetime"]',
+                   'input[type="datetime-local"]',
+                   'input[type="email"]',
+                   'input[type="month"]',
+                   'input[type="number"]',
+                   'input[type="password"]',
+                   'input[type="search"]',
+                   'input[type="tel"]',
+                   'input[type="text"]',
+                   'input[type="time"]',
+                   'input[type="url"]',
+                   'input[type="week"]',
+                   'textarea';
+
+$all-text-inputs:        assign-inputs($text-inputs-list);
+$all-text-inputs-active: assign-inputs($text-inputs-list, active);
+$all-text-inputs-focus:  assign-inputs($text-inputs-list, focus);
+$all-text-inputs-hover:  assign-inputs($text-inputs-list, hover);

data/app/assets/stylesheets/lib/bourbon/addons/_timing-functions.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+/// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+///
+/// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html
+///
+/// @type cubic-bezier
+
+$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+
+$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);

data/app/assets/stylesheets/lib/bourbon/addons/_triangle.scss

@@ -0,0 +1,63 @@
+@mixin triangle($size, $color, $direction) {
+  $width: nth($size, 1);
+  $height: nth($size, length($size));
+  $foreground-color: nth($color, 1);
+  $background-color: if(length($color) == 2, nth($color, 2), transparent);
+  height: 0;
+  width: 0;
+
+  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
+    $width: $width / 2;
+    $height: if(length($size) > 1, $height, $height/2);
+
+    @if $direction == up {
+      border-bottom: $height solid $foreground-color;
+      border-left: $width solid $background-color;
+      border-right: $width solid $background-color;
+    } @else if $direction == right {
+      border-bottom: $width solid $background-color;
+      border-left: $height solid $foreground-color;
+      border-top: $width solid $background-color;
+    } @else if $direction == down {
+      border-left: $width solid $background-color;
+      border-right: $width solid $background-color;
+      border-top: $height solid $foreground-color;
+    } @else if $direction == left {
+      border-bottom: $width solid $background-color;
+      border-right: $height solid $foreground-color;
+      border-top: $width solid $background-color;
+    }
+  } @else if ($direction == up-right) or ($direction == up-left) {
+    border-top: $height solid $foreground-color;
+
+    @if $direction == up-right {
+      border-left:  $width solid $background-color;
+    } @else if $direction == up-left {
+      border-right: $width solid $background-color;
+    }
+  } @else if ($direction == down-right) or ($direction == down-left) {
+    border-bottom: $height solid $foreground-color;
+
+    @if $direction == down-right {
+      border-left:  $width solid $background-color;
+    } @else if $direction == down-left {
+      border-right: $width solid $background-color;
+    }
+  } @else if ($direction == inset-up) {
+    border-color: $background-color $background-color $foreground-color;
+    border-style: solid;
+    border-width: $height $width;
+  } @else if ($direction == inset-down) {
+    border-color: $foreground-color $background-color $background-color;
+    border-style: solid;
+    border-width: $height $width;
+  } @else if ($direction == inset-right) {
+    border-color: $background-color $background-color $background-color $foreground-color;
+    border-style: solid;
+    border-width: $width $height;
+  } @else if ($direction == inset-left) {
+    border-color: $background-color $foreground-color $background-color $background-color;
+    border-style: solid;
+    border-width: $width $height;
+  }
+}

data/app/assets/stylesheets/lib/bourbon/addons/_word-wrap.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+
+/// Provides an easy way to change the `word-wrap` property.
+///
+/// @param {String} $wrap [break-word]
+///   Value for the `word-break` property.
+///
+/// @example scss - Usage
+///   .wrapper {
+///     @include word-wrap(break-word);
+///   }
+///
+/// @example css - CSS Output
+///   .wrapper {
+///     overflow-wrap: break-word;
+///     word-break: break-all;
+///     word-wrap: break-word;
+///   }
+
+@mixin word-wrap($wrap: break-word) {
+  overflow-wrap: $wrap;
+  word-wrap: $wrap;
+
+  @if $wrap == break-word {
+    word-break: break-all;
+  } @else {
+    word-break: $wrap;
+  }
+}

data/app/assets/stylesheets/lib/bourbon/css3/_animation.scss

@@ -0,0 +1,43 @@
+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+@mixin animation($animations...) {
+  @include prefixer(animation, $animations, webkit moz spec);
+}
+
+@mixin animation-name($names...) {
+  @include prefixer(animation-name, $names, webkit moz spec);
+}
+
+@mixin animation-duration($times...) {
+  @include prefixer(animation-duration, $times, webkit moz spec);
+}
+
+@mixin animation-timing-function($motions...) {
+  // ease | linear | ease-in | ease-out | ease-in-out
+  @include prefixer(animation-timing-function, $motions, webkit moz spec);
+}
+
+@mixin animation-iteration-count($values...) {
+  // infinite | <number>
+  @include prefixer(animation-iteration-count, $values, webkit moz spec);
+}
+
+@mixin animation-direction($directions...) {
+  // normal | alternate
+  @include prefixer(animation-direction, $directions, webkit moz spec);
+}
+
+@mixin animation-play-state($states...) {
+  // running | paused
+  @include prefixer(animation-play-state, $states, webkit moz spec);
+}
+
+@mixin animation-delay($times...) {
+  @include prefixer(animation-delay, $times, webkit moz spec);
+}
+
+@mixin animation-fill-mode($modes...) {
+  // none | forwards | backwards | both
+  @include prefixer(animation-fill-mode, $modes, webkit moz spec);
+}

data/app/assets/stylesheets/lib/bourbon/css3/_appearance.scss

@@ -0,0 +1,3 @@
+@mixin appearance($value) {
+  @include prefixer(appearance, $value, webkit moz ms o spec);
+}

data/app/assets/stylesheets/lib/bourbon/css3/_backface-visibility.scss

@@ -0,0 +1,3 @@
+@mixin backface-visibility($visibility) {
+  @include prefixer(backface-visibility, $visibility, webkit spec);
+}

data/app/assets/stylesheets/lib/bourbon/css3/_background-image.scss

@@ -0,0 +1,42 @@
+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+
+@mixin background-image($images...) {
+  $webkit-images: ();
+  $spec-images: ();
+
+  @each $image in $images {
+    $webkit-image: ();
+    $spec-image: ();
+
+    @if (type-of($image) == string) {
+      $url-str:       str-slice($image, 0, 3);
+      $gradient-type: str-slice($image, 0, 6);
+
+      @if $url-str == "url" {
+        $webkit-image: $image;
+        $spec-image:   $image;
+      }
+
+      @else if $gradient-type == "linear" {
+        $gradients: _linear-gradient-parser($image);
+        $webkit-image:  map-get($gradients, webkit-image);
+        $spec-image:    map-get($gradients, spec-image);
+      }
+
+      @else if $gradient-type == "radial" {
+        $gradients: _radial-gradient-parser($image);
+        $webkit-image: map-get($gradients, webkit-image);
+        $spec-image:   map-get($gradients, spec-image);
+      }
+    }
+
+    $webkit-images: append($webkit-images, $webkit-image, comma);
+    $spec-images:   append($spec-images,   $spec-image,   comma);
+  }
+
+  background-image: $webkit-images;
+  background-image: $spec-images;
+}

data/app/assets/stylesheets/lib/bourbon/css3/_background.scss

@@ -0,0 +1,55 @@
+//************************************************************************//
+// Background property for adding multiple backgrounds using shorthand
+// notation.
+//************************************************************************//
+
+@mixin background($backgrounds...) {
+  $webkit-backgrounds: ();
+  $spec-backgrounds: ();
+
+  @each $background in $backgrounds {
+    $webkit-background: ();
+    $spec-background: ();
+    $background-type: type-of($background);
+
+    @if $background-type == string or $background-type == list {
+      $background-str: if($background-type == list, nth($background, 1), $background);
+
+      $url-str:       str-slice($background-str, 0, 3);
+      $gradient-type: str-slice($background-str, 0, 6);
+
+      @if $url-str == "url" {
+        $webkit-background: $background;
+        $spec-background:   $background;
+      }
+
+      @else if $gradient-type == "linear" {
+        $gradients: _linear-gradient-parser("#{$background}");
+        $webkit-background: map-get($gradients, webkit-image);
+        $spec-background:   map-get($gradients, spec-image);
+      }
+
+      @else if $gradient-type == "radial" {
+        $gradients: _radial-gradient-parser("#{$background}");
+        $webkit-background: map-get($gradients, webkit-image);
+        $spec-background:   map-get($gradients, spec-image);
+      }
+
+      @else {
+        $webkit-background: $background;
+        $spec-background:   $background;
+      }
+    }
+
+    @else {
+      $webkit-background: $background;
+      $spec-background:   $background;
+    }
+
+    $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
+    $spec-backgrounds:   append($spec-backgrounds,   $spec-background,   comma);
+  }
+
+  background: $webkit-backgrounds;
+  background: $spec-backgrounds;
+}