bourbon 0.1.2 → 0.1.3

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

@@ -20,3 +20,4 @@
 // Addons & other mixins
 @import "addons/button";
 @import "addons/position";
+@import "addons/animation-keyframes";

data/app/assets/stylesheets/addons/_animation-keyframes.css.scss

@@ -0,0 +1,28 @@
+// Keyframes for Animations
+
+// Fade-In animation
+@mixin fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fade-in { @include fade-in; }
+   @-moz-keyframes fade-in { @include fade-in; }
+        @keyframes fade-in { @include fade-in; }
+
+
+// Fade-out animation
+@mixin fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes fade-out { @include fade-out; }
+   @-moz-keyframes fade-out { @include fade-out; }
+        @keyframes fade-out { @include fade-out; }

data/app/assets/stylesheets/css3/_background-image.css.scss

@@ -57,7 +57,8 @@
         $vendor-gradients: -#{$vendor}-linear-gradient($gradients);
       }
       @else if $vendor == false {
-        $vendor-gradients: linear-gradient($gradients);
+        $vendor-gradients: "linear-gradient(#{$gradients})";
+        $vendor-gradients: unquote($vendor-gradients);
       }
       @return $vendor-gradients;
     }

data/app/assets/stylesheets/css3/_linear-gradient.css.scss

@@ -8,7 +8,7 @@
   $pos-type: type-of(nth($pos, 1));
 
   // If $pos is missing from mixin, reassign vars and add default position
-  @if $pos-type == color or transparent {
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
     $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
      $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
     $pos: top; // Default position

data/app/assets/stylesheets/functions/_linear-gradient.css.scss

@@ -8,7 +8,7 @@
   $pos-type: type-of(nth($pos, 1));
 
   // If $pos is missing from mixin, reassign vars and add default position
-  @if $pos-type == color or transparent {
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
     $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
      $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
     $pos: top; // Default position
@@ -16,13 +16,6 @@
 
   $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
-  //If position was included in the mixin/function
-  @if type-of(nth($full, 1)) != color or transparent {
-    @return $full;
-  }
+  @return join($pos, $full, comma);
 
-  //Else add the default position
-  @else {
-    @return join($pos, $full, comma);
-  }
 }

data/readme.md

@@ -271,27 +271,39 @@ Shade is a mix of a color with black. Shade takes a color and a percent argument
 
 ##Add-ons
 
+###Animation-Keyframes
+
+Animation-keyframes are provided for quick out-of-the-box animations. Two animation-keyframes are provided: fade-in, fade-out. These animations can be called using the *animation-name* mixin; alternatively the *animation-basic* mixin can be used. Supports Webkit browsers and Mozilla 5.0+.
+
+    div.fade-in {
+      @include animation-name(fade-in);
+    }
+
+    div.fade-out {
+      @include animation-basic(fade-out, 2.0s, ease-in);
+      opacity: 0;
+    }
+
+
 ###Buttons
 
-The button add-on provides well-designed buttons with a single line in your CSS. The demo folder contains examples of the buttons in use.  
-The mixin can be called with no parameters to render a blue button with the "simple" style.
+The button add-on provides well-designed buttons with a single line in your CSS.  
+The mixin supports a style parameter and an optional color argument. The available styles are **"simple"** (default), **"shiny"**, and **"pill"**.
 
-    button,
-    input[type="button"] {
+    # The mixin can be called with no arguments, which will render a blue button with the "simple" style.
+    button, input[type="button"] {
       @include button;
     }
 
-The mixin supports a style parameter. Right now the available styles are "simple" (default), "shiny", and "pill".
-
-    button,
-    input[type="button"] {
+    # Pass a style argument
+    button, input[type="button"] {
       @include button(shiny);
     }
 
-The real power of the mixin is revealed when you pass in the optional color argument. Using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.
+Create beautiful buttons by defining a style and color argument; using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.
 
-    button,
-    input[type="button"] {
+    # Style + color arguments
+    button, input[type="button"] {
       @include button(shiny, #ff0000);
     }
 
@@ -324,6 +336,7 @@ The real power of the mixin is revealed when you pass in the optional color argu
 
       @ background-image(*args)
       @ border-radius(*args)
+      @ box-shadow(*args)
       @ box-sizing(*args)
 
       flex-box
@@ -352,6 +365,7 @@ The real power of the mixin is revealed when you pass in the optional color argu
 
     #Addons
     --------------------------------
+      animation-keyframes (fade-in, fade-out)
     @ button(*args)
     @ position(*args)
 

metadata

@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 0
   - 1
-  - 2
-  version: 0.1.2
+  - 3
+  version: 0.1.3
 platform: ruby
 authors: 
 - Phil LaPier
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-07-27 00:00:00 -04:00
+date: 2011-08-05 00:00:00 -04:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -55,6 +55,7 @@ files:
 - LICENSE
 - Rakefile
 - app/assets/stylesheets/_bourbon.css.scss
+- app/assets/stylesheets/addons/_animation-keyframes.css.scss
 - app/assets/stylesheets/addons/_button.css.scss
 - app/assets/stylesheets/addons/_position.css.scss
 - app/assets/stylesheets/css3/_animation.css.scss