bourbon 0.1.5 → 0.1.6

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

@@ -61,52 +61,47 @@
 }
 
 @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%);
+  $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
+  $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
+  $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
+  $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
   $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%);
+  $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
+  $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
 
   @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);
+  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+  border: 1px solid $border;
+  border-bottom: 1px solid $border-bottom;
+  @include border-radius(5px);
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow);
   color: $color;
   display: inline;
-  font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
-  padding: 7px 18px;
+  font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
+  padding: 7px 20px 8px;
+  text-decoration: none;
+  text-align: center;
   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%);
+    $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+    $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+    $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+    $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
 
-    @include linear-gradient (top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
+    @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);
+    $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+    @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
   }
 }
 

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

@@ -4,7 +4,7 @@
 // EASE IN
 $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(1.895, 0.030, 0.685, 0.220);
+$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);

data/readme.md

@@ -14,17 +14,27 @@ Update your Gemfile
     bundle install
 
 ##Rails 3.1.x
-Bourbon needs the sass files to be imported in a specific order to function properly—therefore you will need to disabled the require_tree sprocket directive.  
-Comment-out the following sprocket directive in /application.css.scss (Remove the =)
+Rename application.css to application.css.scss
 
-    * require_tree .
+    mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss
 
-Import the mixins at the beginning of your stylesheet
+Bourbon needs the sass files to be imported in a specific order to function properly—therefore you will need to disabled the require_tree sprocket directive.
+Delete the following sprocket directive in application.css.scss
+
+    *= require_tree .
+
+Import bourbon at the beginning of application.css.scss
+
+    @import "bourbon";
+
+Import all additional stylesheets from your app/assets/stylsheets directory underneath the bourbon import
 
-    @import 'bourbon';
+    @import "bourbon";
+    @import "home";
+    @import "users";
 
 ##Rails 3.0.9 and below
-For Rails < 3.1 you must run the installation rake task. Please note, you should run this task everytime a new version of Bourbon is released.  
+For Rails < 3.1 you must run the installation rake task. Please note, you should run this task everytime a new version of Bourbon is released.
 This will copy the Sass files into your project's public/stylesheets/sass directory.
 
     rake bourbon:install
@@ -35,7 +45,7 @@ Import the mixins at the beginning of your stylesheet
 
 
 #Install without Rails
-The following script will generate a *bourbon* directory and convert all .css.scss to .scss extensions. The *bourbon* directory is for 'sass --watch' use outside of rails.  
+The following script will generate a *bourbon* directory and convert all .css.scss to .scss extensions. The *bourbon* directory is for 'sass --watch' use outside of rails.
 Preliminary step: clone this repo and cd into the directory.
 
 **Step 1:** Make script executable by changing file permission
@@ -48,7 +58,7 @@ Preliminary step: clone this repo and cd into the directory.
 
 **Step 3:** Move the new *bourbon* directory into your project's sass directory. *e.g. stylesheets/sass/*
 
-**Step 4:** Bourbon requires an additional sass extension to output properly. You must watch your sass files with the following flag appended:  
+**Step 4:** Bourbon requires an additional sass extension to output properly. You must watch your sass files with the following flag appended:
 *-r ./bourbon/lib/bourbon.rb*
 
     # Example (project root directory)
@@ -56,7 +66,7 @@ Preliminary step: clone this repo and cd into the directory.
 
 
 #Browser support
-Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.  
+Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.
 **Pull requests:** A general rule when considering a new mixin: Do the following browsers *only* support the CSS3 property using vendor specific prefixes? If the answer is yes, there is a high chance the mixin will be accepted via a pull request.
 
 * Firefox 3.6+
@@ -256,7 +266,7 @@ Easily setup and follow a grid based design. Need help gridding? Check out [grid
 
 ###Tint & Shade
 
-Tint & shade are different from lighten() and darken() functions built into sass.  
+Tint & shade are different from lighten() and darken() functions built into sass.
 Tint is a mix of a color with white. Tint takes a color and a percent argument.
 
     div {
@@ -274,21 +284,20 @@ Shade is a mix of a color with black. Shade takes a color and a percent argument
 
 ###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+.
+Animation-keyframes 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);
+    .spinner {
+      @include animation-name(spin);
     }
 
-    div.fade-out {
-      @include animation-basic(fade-out, 2.0s, ease-in);
-      opacity: 0;
+    .spinner {
+      @include animation-basic(spin, 2.0s, ease-in);
     }
 
 
 ###Buttons
 
-The button add-on provides well-designed buttons with a single line in your CSS.  
+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"**.
 
     # The mixin can be called with no arguments, which will render a blue button with the "simple" style.
@@ -310,7 +319,7 @@ Create beautiful buttons by defining a style and color argument; using a single
 
 
 ###Timing functions
-These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations. The provided timing functions are the same as the jQuery UI demo: [easing functions](http://jqueryui.com/demos/effect/easing.html).  
+These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations. The provided timing functions are the same as the jQuery UI demo: [easing functions](http://jqueryui.com/demos/effect/easing.html).
 
     Variables supported: $ease-in-*, $ease-out-*, $ease-in-out-*
     * = [quad, cubic, quart, quint, sine, expo, circ]
@@ -377,15 +386,14 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3
 
     #Addons
     --------------------------------
-      animation-keyframes (fade-in, fade-out)
     @ button(*args)
     @ position(*args)
-      timing-functions ($fade-in-*, $fade-out-*, $fade-in-out-*)
+      timing-functions ($ease-in-*, $ease-out-*, $ease-in-out-*)
 
 
 ##Help Out
 
-Currently the project is a work in progress. Feel free to help out.  
+Currently the project is a work in progress. Feel free to help out.
 **Pull requests:** See *Browser Support* in this readme for more info
 
 Credits

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bourbon
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.1.6
   prerelease: 
 platform: ruby
 authors:
@@ -11,11 +11,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-08-19 00:00:00.000000000Z
+date: 2011-09-06 00:00:00.000000000Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &70215233728500 !ruby/object:Gem::Requirement
+  requirement: &70262541198540 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -23,7 +23,7 @@ dependencies:
         version: '3.1'
   type: :runtime
   prerelease: false
-  version_requirements: *70215233728500
+  version_requirements: *70262541198540
 description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
   framework of
 
@@ -50,7 +50,6 @@ files:
 - LICENSE
 - Rakefile
 - app/assets/stylesheets/_bourbon.scss
-- app/assets/stylesheets/addons/_animation-keyframes.scss
 - app/assets/stylesheets/addons/_button.scss
 - app/assets/stylesheets/addons/_position.scss
 - app/assets/stylesheets/addons/_timing-functions.scss

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

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