bourbon 0.0.5

data/.gitignore

@@ -0,0 +1,3 @@
+*swp
+*gem
+.sass-cache/

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in sass-mixins.gemspec
+gemspec

data/Rakefile

@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks

data/app/assets/stylesheets/_bourbon.css.scss

@@ -0,0 +1,18 @@
+// Custom Functions
+@import "functions/compact";
+@import "functions/tint-shade";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/border-radius";
+@import "css3/box-shadow";
+@import "css3/box-sizing";
+@import "css3/flex-box";
+@import "css3/inline-block";
+@import "css3/linear-gradient";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+
+// Addons & other mixins
+@import "addons/button";

data/app/assets/stylesheets/addons/_button.css.scss

@@ -0,0 +1,174 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+  @if type-of($style) == color {
+    $base-color: $style;
+    $style: simple;
+  }
+
+  @if $style == simple {
+    @include simple($base-color);
+  }
+
+  @else if $style == shiny {
+    @include shiny($base-color);
+  }
+
+  @else if $style == pill {
+    @include pill($base-color);
+  }
+}
+
+@mixin simple ($base-color) {
+  $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
+  $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+  $color: hsl(0, 0, 100%);
+  $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
+  $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+  @if lightness($base-color) > 70% {
+    $color: hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  border: 1px solid $border;
+  @include border-radius (3px);
+  @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+  color: $color;
+  display: inline;
+  font: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 6px 18px 7px;
+  text-shadow: 0 1px 0 $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover {
+    $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+    $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
+    $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+
+    @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+  }
+
+  &:active {
+    $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+    border: 1px solid $border-active;
+    @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+  }
+}
+
+@mixin shiny($base-color) {
+  $second-stop: adjust-color($base-color, $saturation: 0%, $lightness: -15%);
+  $third-stop: adjust-color($base-color, $saturation: 5%, $lightness: -22%);
+  $fourth-stop: adjust-color($base-color, $saturation: 0%, $lightness: -19%);
+  $border-top: adjust-color($base-color, $saturation: 0%, $lightness: -23%);
+  $border-sides: adjust-color($base-color, $saturation: 0%, $lightness: -29%);
+  $border-bottom: adjust-color($base-color, $saturation: 0%, $lightness: -35%);
+  $color: hsl(0, 0, 100%);
+  $inset-shadow: adjust-color($base-color, $hue: -5, $saturation: 23%, $lightness:-8%);
+  $text-shadow: adjust-color($base-color, $saturation: 6%, $lightness: -21%);
+
+  @if lightness($base-color) > 70% {
+    $color: hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @include linear-gradient (top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+  border: 1px solid $border-top;
+  border-color: $border-top $border-sides $border-bottom;
+  @include border-radius (4px);
+  @include box-shadow(inset 0 0 2px 0 $inset-shadow);
+  color: $color;
+  display: inline;
+  font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
+  padding: 7px 18px;
+  text-shadow: 0 -1px 1px $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover {
+    $first-stop-hover: adjust-color($base-color, $saturation: 2%, $lightness: -5%);
+    $second-stop-hover: adjust-color($base-color, $saturation: 2%, $lightness: -18%);
+    $third-stop-hover: adjust-color($base-color, $saturation: 23%, $lightness: -26%);
+    $fourth-stop-hover: adjust-color($base-color, $saturation: 16%, $lightness: -23%);
+
+    @include linear-gradient (top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
+    cursor: pointer;
+  }
+
+  &:active {
+    $border-top-active: adjust-color($base-color, $saturation: 1%, $lightness: -19%);
+    $border-sides-active: adjust-color($base-color, $saturation: 1%, $lightness: -34%);
+    $border-bottom-active: adjust-color($base-color, $saturation: 1%, $lightness: -40%);
+    $inset-shadow-active: adjust-color($base-color, $saturation: -1%, $lightness: -33%);
+
+    border: 1px solid $border-top-active;
+    border-color: $border-top-active $border-sides-active $border-bottom-active;
+    @include box-shadow(inset 0 0 5px 2px $inset-shadow-active, 0 1px 0 #eee);
+  }
+}
+
+@mixin pill($base-color) {
+  $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
+  $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+  $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
+  $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
+  $color: hsl(0, 0, 100%);
+  $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
+  $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
+
+  @if lightness($base-color) > 70% {
+    $color: hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @include linear-gradient ($base-color, $stop-gradient);
+  border: 1px solid $border-top;
+  border-color: $border-top $border-sides $border-bottom;
+  @include border-radius(16px);
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+  color: $color;
+  display: inline;
+  font-family: "lucida grande", sans-serif;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 1;
+  padding: 3px 16px 5px;
+  text-align: center;
+  text-shadow: 0 -1px 1px $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover {
+    $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
+    $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
+    $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
+    $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
+    $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
+    $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
+    $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
+
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+    border: 1px solid $border-top;
+    border-color: $border-top $border-sides $border-bottom;
+    @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    text-shadow: 0 -1px 1px $text-shadow-hover;
+    -webkit-background-clip: padding-box;
+  }
+
+  &:active {
+    $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
+    $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
+    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
+    $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
+    $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
+
+    background: $active-color;
+    border: 1px solid $border-active;
+    border-bottom: 1px solid $border-bottom-active;
+    @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+    text-shadow: 0 -1px 1px $text-shadow-active;
+  }
+}

data/app/assets/stylesheets/css3/_animation.css.scss

@@ -0,0 +1,161 @@
+// 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-name ($name-1,
+  $name-2: false, $name-3: false,
+  $name-4: false, $name-5: false,
+  $name-6: false, $name-7: false,
+  $name-8: false, $name-9: false)
+  {
+    $full:  compact($name-1, $name-2, $name-3, $name-4,
+                    $name-5, $name-6, $name-7, $name-8, $name-9);
+
+  -webkit-animation-name: $full;
+     -moz-animation-name: $full;
+          animation-name: $full;
+}
+
+
+@mixin animation-duration ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full:  compact($time-1, $time-2, $time-3, $time-4,
+                    $time-5, $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-animation-duration: $full;
+     -moz-animation-duration: $full;
+          animation-duration: $full;
+}
+
+
+@mixin animation-timing-function ($motion-1: ease,
+//  ease | linear | ease-in | ease-out | ease-in-out
+  $motion-2: false, $motion-3: false,
+  $motion-4: false, $motion-5: false,
+  $motion-6: false, $motion-7: false,
+  $motion-8: false, $motion-9: false)
+  {
+    $full:  compact($motion-1, $motion-2, $motion-3, $motion-4,
+                    $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
+
+  -webkit-animation-timing-function: $full;
+     -moz-animation-timing-function: $full;
+          animation-timing-function: $full;
+}
+
+
+@mixin animation-iteration-count ($value-1: 1,
+//  infinite | <number>
+  $value-2: false, $value-3: false,
+  $value-4: false, $value-5: false,
+  $value-6: false, $value-7: false,
+  $value-8: false, $value-9: false)
+  {
+    $full:  compact($value-1, $value-2, $value-3, $value-4,
+                    $value-5, $value-6, $value-7, $value-8, $value-9);
+
+  -webkit-animation-iteration-count: $full;
+     -moz-animation-iteration-count: $full;
+          animation-iteration-count: $full;
+}
+
+
+@mixin animation-direction ($direction-1: normal,
+//  normal | alternate
+  $direction-2: false, $direction-3: false,
+  $direction-4: false, $direction-5: false,
+  $direction-6: false, $direction-7: false,
+  $direction-8: false, $direction-9: false)
+  {
+    $full:  compact($direction-1, $direction-2, $direction-3, $direction-4,
+                    $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+
+  -webkit-animation-direction: $full;
+     -moz-animation-direction: $full;
+          animation-direction: $full;
+}
+
+
+@mixin animation-play-state ($state-1: running,
+//  running | paused
+  $state-2: false, $state-3: false,
+  $state-4: false, $state-5: false,
+  $state-6: false, $state-7: false,
+  $state-8: false, $state-9: false)
+  {
+    $full:  compact($state-1, $state-2, $state-3, $state-4,
+                    $state-5, $state-6, $state-7, $state-8, $state-9);
+
+  -webkit-animation-play-state: $full;
+     -moz-animation-play-state: $full;
+          animation-play-state: $full;
+}
+
+
+@mixin animation-delay ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full:  compact($time-1, $time-2, $time-3, $time-4,
+                    $time-5, $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-animation-delay: $full;
+     -moz-animation-delay: $full;
+          animation-delay: $full;
+}
+
+
+@mixin animation-fill-mode ($mode-1: none,
+//  http://goo.gl/l6ckm
+//  none | forwards | backwards | both
+  $mode-2: false, $mode-3: false,
+  $mode-4: false, $mode-5: false,
+  $mode-6: false, $mode-7: false,
+  $mode-8: false, $mode-9: false)
+  {
+    $full:  compact($mode-1, $mode-2, $mode-3, $mode-4,
+                    $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+
+  -webkit-animation-fill-mode: $full;
+     -moz-animation-fill-mode: $full;
+          animation-fill-mode: $full;
+}
+
+
+// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
+@mixin animation-basic ($name, $time: 0, $motion: ease) {
+    $length-of-name: length($name);
+    $length-of-time: length($time);
+  $length-of-motion: length($motion);
+
+  @if $length-of-name > 1 {
+    @include animation-name(zip($name));
+  } @else {
+    @include animation-name(    $name);
+  }
+
+  @if $length-of-time > 1 {
+    @include animation-duration(zip($time));
+  } @else {
+    @include animation-duration(    $time);
+  }
+
+  @if $length-of-motion > 1 {
+    @include animation-timing-function(zip($motion));
+  } @else {
+    @include animation-timing-function(    $motion);
+  }
+}
+
+// Official animation shorthand property. Needs more work to actually be useful.
+@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
+  -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
+     -moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
+          animation: $name $duration $timing-function $delay $iteration-count $direction;
+}

data/app/assets/stylesheets/css3/_border-radius.css.scss

@@ -0,0 +1,7 @@
+@mixin border-radius ($radii) {
+  -webkit-border-radius: $radii;
+     -moz-border-radius: $radii;
+      -ms-border-radius: $radii;
+       -o-border-radius: $radii;
+          border-radius: $radii;
+}

data/app/assets/stylesheets/css3/_box-shadow.css.scss

@@ -0,0 +1,16 @@
+// Box-Shadow Mixin Requires Sass v3.1.1+
+@mixin box-shadow ($shadow-1,
+  $shadow-2: false, $shadow-3: false,
+  $shadow-4: false, $shadow-5: false,
+  $shadow-6: false, $shadow-7: false,
+  $shadow-8: false, $shadow-9: false)
+  {
+    $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
+                   $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
+
+  -webkit-box-shadow: $full;
+     -moz-box-shadow: $full;
+      -ms-box-shadow: $full;
+       -o-box-shadow: $full;
+          box-shadow: $full;
+}

data/app/assets/stylesheets/css3/_box-sizing.css.scss

@@ -0,0 +1,8 @@
+@mixin box-sizing ($box) {
+//  content-box | border-box | inherit
+  -webkit-box-sizing: $box;
+     -moz-box-sizing: $box;
+      -ms-box-sizing: $box;
+       -o-box-sizing: $box;
+          box-sizing: $box;
+}

data/app/assets/stylesheets/css3/_flex-box.css.scss

@@ -0,0 +1,59 @@
+// CSS3 Flexible Box Model and property defaults
+
+@mixin display-box {
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+}
+
+@mixin box-orient($orient: inline-axis) {
+// horizontal|vertical|inline-axis|block-axis|inherit
+  -webkit-box-orient: $orient;
+     -moz-box-orient: $orient;
+          box-orient: $orient;
+}
+
+@mixin box-pack($pack: start) {
+// start|end|center|justify
+  -webkit-box-pack: $pack;
+     -moz-box-pack: $pack;
+          box-pack: $pack;
+}
+
+@mixin box-align($align: stretch) {
+// start|end|center|baseline|stretch
+  -webkit-box-align: $align;
+     -moz-box-align: $align;
+          box-align: $align;
+}
+
+@mixin box-direction($direction: normal) {
+// normal|reverse|inherit
+  -webkit-box-direction: $direction;
+     -moz-box-direction: $direction;
+          box-direction: $direction;
+}
+@mixin box-lines($lines: single) {
+// single|multiple
+  -webkit-box-lines: $lines;
+     -moz-box-lines: $lines;
+          box-lines: $lines;
+}
+
+@mixin box-ordinal-group($integer: 1) {
+  -webkit-box-ordinal-group: $integer;
+     -moz-box-ordinal-group: $integer;
+          box-ordinal-group: $integer;
+}
+
+@mixin box-flex($value: 0.0) {
+  -webkit-box-flex: $value;
+     -moz-box-flex: $value;
+          box-flex: $value;
+}
+
+@mixin box-flex-group($integer: 1) {
+  -webkit-box-flex-group: $integer;
+     -moz-box-flex-group: $integer;
+          box-flex-group: $integer;
+}