bourbon 1.3.6 → 1.4.0

data/app/assets/stylesheets/_bourbon.scss

@@ -1,7 +1,11 @@
 // Custom Functions
 @import "functions/deprecated-webkit-gradient";
+@import "functions/flex-grid";
 @import "functions/grid-width";
+@import "functions/linear-gradient";
 @import "functions/modular-scale";
+@import "functions/radial-gradient";
+@import "functions/render-gradients";
 @import "functions/tint-shade";
 
 // CSS3 Mixins
@@ -20,9 +24,11 @@
 @import "css3/radial-gradient";
 @import "css3/transform";
 @import "css3/transition";
+@import "css3/user-select";
 
 // Addons & other mixins
 @import "addons/button";
+@import "addons/clearfix";
 @import "addons/font-family";
 @import "addons/html5-input-types";
 @import "addons/position";

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

@@ -0,0 +1,29 @@
+// Micro clearfix provides an easy way to contain floats without adding additional markup
+//
+// Example usage:
+//
+//    // Contain all floats within .wrapper
+//    .wrapper {
+//      @include clearfix;
+//      .content,
+//      .sidebar {
+//        float : left;
+//      }
+//    }
+
+@mixin clearfix {
+  zoom: 1;
+
+  &:before,
+  &:after {
+    content: "";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+// Acknowledgements
+// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)

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

@@ -2,8 +2,6 @@
 // Background-image property for adding multiple background images with
 // gradients, or for stringing multiple gradients together.
 //************************************************************************//
-@import "../functions/linear-gradient";
-@import "../functions/radial-gradient";
 
 @mixin background-image(
   $image-1       , $image-2: false,
@@ -50,18 +48,6 @@
 }
 
 
-@function render-gradients($gradients, $gradient-type, $vendor: false) {
-  $vendor-gradients: false;
-  @if $vendor {
-    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
-  }
-
-  @else if $vendor == false {
-    $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
-    $vendor-gradients: unquote($vendor-gradients);
-  }
-  @return $vendor-gradients;
-}
 
 //Examples:
   //@include background-image(linear-gradient(top, orange, red));

data/app/assets/stylesheets/css3/_border-image.scss

@@ -1,7 +1,56 @@
-@mixin border-image ($image) {
-  -webkit-border-image: $image;
-     -moz-border-image: $image;
-      -ms-border-image: $image;
-       -o-border-image: $image;
-          border-image: $image;
+@mixin border-image($images) {
+  -webkit-border-image: border-add-prefix($images, webkit);
+     -moz-border-image: border-add-prefix($images, moz);
+       -o-border-image: border-add-prefix($images, o);
+          border-image: border-add-prefix($images);
 }
+
+@function border-add-prefix($images, $vendor: false) {
+  $border-image: ();
+  $images-type:  type-of(nth($images, 1));
+  $first-var:    nth(nth($images, 1), 1);          // Get type of Gradient (Linear || radial)
+
+  // If input is a gradient
+  @if $images-type == string {
+    @if ($first-var == "linear") or ($first-var == "radial") {
+      @for $i from 2 through length($images) {
+        $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
+        $gradient-args: nth($images, $i);          // Get actual gradient (red, blue)
+        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
+      }
+    }
+
+    // If input is a URL
+    @else {
+      $border-image: $images;
+    }
+  }
+
+  // If input is gradient or url + additional args
+  @else if $images-type == list {
+    @for $i from 1 through length($images) {
+      $type: type-of(nth($images, $i));           // Get type of variable - List or String
+
+      // If variable is a list - Gradient
+      @if $type == list {
+        $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
+      }
+
+      // If variable is a string - Image or number
+      @else if ($type == string) or ($type == number) {
+        $border-image: append($border-image, nth($images, $i));
+      }
+    }
+  }
+  @return $border-image;
+}
+
+//Examples:
+// @include border-image(url("image.png"));
+// @include border-image(url("image.png") 20 stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow));
+// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
+// @include border-image(radial-gradient(top, cover, orange, yellow, orange));

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

@@ -9,6 +9,7 @@
 @mixin border-top-left-radius($radii) {
   -webkit-border-top-left-radius: $radii;
      -moz-border-top-left-radius: $radii;
+      -moz-border-radius-topleft: $radii;
       -ms-border-top-left-radius: $radii;
        -o-border-top-left-radius: $radii;
           border-top-left-radius: $radii;
@@ -17,6 +18,7 @@
 @mixin border-top-right-radius($radii) {
   -webkit-border-top-right-radius: $radii;
      -moz-border-top-right-radius: $radii;
+      -moz-border-radius-topright: $radii;
       -ms-border-top-right-radius: $radii;
        -o-border-top-right-radius: $radii;
           border-top-right-radius: $radii;
@@ -25,6 +27,7 @@
 @mixin border-bottom-left-radius($radii) {
   -webkit-border-bottom-left-radius: $radii;
      -moz-border-bottom-left-radius: $radii;
+      -moz-border-radius-bottomleft: $radii;
       -ms-border-bottom-left-radius: $radii;
        -o-border-bottom-left-radius: $radii;
           border-bottom-left-radius: $radii;
@@ -33,6 +36,7 @@
 @mixin border-bottom-right-radius($radii) {
   -webkit-border-bottom-right-radius: $radii;
      -moz-border-bottom-right-radius: $radii;
+      -moz-border-radius-bottomright: $radii;
       -ms-border-bottom-right-radius: $radii;
        -o-border-bottom-right-radius: $radii;
           border-bottom-right-radius: $radii;

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

@@ -10,7 +10,5 @@
 
   -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.scss

@@ -2,7 +2,5 @@
 //  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/_linear-gradient.scss

@@ -20,7 +20,7 @@
   $fallback-color: nth($G1, 1);
 
   // If $fallback is a color use that color as the fallback color
-  @if type-of($fallback) == color {
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
     $fallback-color: $fallback;
   }
 

data/app/assets/stylesheets/css3/_radial-gradient.scss

@@ -4,11 +4,20 @@
                        $G3: false, $G4: false,
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
-                       $G9: false, $G10: false) {
+                       $G9: false, $G10: false,
+                       $fallback: false) {
 
   $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
-  background-color:  nth($G1, 1);
+  // Set $G1 as the default fallback color
+  $fallback-color: nth($G1, 1);
+
+  // If $fallback is a color use that color as the fallback color
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  background-color:  $fallback-color;
   background-image:          deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
   background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
   background-image:     -moz-radial-gradient($pos, $shape-size, $full);

data/app/assets/stylesheets/css3/_user-select.scss

@@ -0,0 +1,6 @@
+@mixin user-select($arg: none) {
+  -webkit-user-select: $arg;
+     -moz-user-select: $arg;
+      -ms-user-select: $arg;
+          user-select: $arg;
+}

data/app/assets/stylesheets/functions/_flex-grid.scss

@@ -0,0 +1,35 @@
+// Flexible grid
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+// Flexible gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
+// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
+//
+//  $fg-column: 60px;             // Column Width
+//  $fg-gutter: 25px;             // Gutter Width
+//  $fg-max-columns: 12;          // Total Columns For Main Container
+//
+//  div {
+//    width: flex-grid(4);        // returns (315px / 1020px) = 30.882353%;
+//    margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
+//
+//    p {
+//      width: flex-grid(2, 4);  // returns (145px / 315px) = 46.031746%;
+//      float: left;
+//      margin: flex-gutter(4);  // returns (25px / 315px) = 7.936508%;
+//    }
+//
+//    blockquote {
+//      float: left;
+//      width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+//    }
+//  }

data/app/assets/stylesheets/functions/_render-gradients.scss

@@ -0,0 +1,14 @@
+// User for linear and radial gradients within background-image or border-image properties
+
+@function render-gradients($gradients, $gradient-type, $vendor: false) {
+  $vendor-gradients: false;
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
+  }
+
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
+  }
+  @return $vendor-gradients;
+}

data/lib/bourbon/generator.rb

@@ -36,7 +36,7 @@ module Bourbon
     private
 
     def bourbon_files_already_exist?
-      Dir.exist?("bourbon")
+      File.directory?("bourbon")
     end
 
     def install_files

data/lib/bourbon/version.rb

@@ -1,3 +1,3 @@
 module Bourbon
-  VERSION = "1.3.6"
+  VERSION = "1.4.0"
 end

data/readme.md

@@ -179,6 +179,7 @@ Bourbon aims to provide support for CSS3 properties that are not yet fully suppo
     #Addons
     --------------------------------
       @ button(*args)
+      @ clearfix
       @ position(*args)
 
       #{$all-text-inputs}
@@ -197,6 +198,7 @@ Bourbon aims to provide support for CSS3 properties that are not yet fully suppo
         * = quad, cubic, quart, quint, sine, expo, circ, back
 
 
+
 ## Help Out
 
 Currently the project is a work in progress. Feel free to help out.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bourbon
 version: !ruby/object:Gem::Version
-  version: 1.3.6
+  version: 1.4.0
   prerelease: 
 platform: ruby
 authors:
@@ -19,11 +19,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-01-27 00:00:00.000000000 Z
+date: 2012-02-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &70251317326880 !ruby/object:Gem::Requirement
+  requirement: &70233260471540 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -31,10 +31,10 @@ dependencies:
         version: '3.1'
   type: :runtime
   prerelease: false
-  version_requirements: *70251317326880
+  version_requirements: *70233260471540
 - !ruby/object:Gem::Dependency
   name: aruba
-  requirement: &70251317326340 !ruby/object:Gem::Requirement
+  requirement: &70233260470160 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -42,7 +42,7 @@ dependencies:
         version: '0.4'
   type: :development
   prerelease: false
-  version_requirements: *70251317326340
+  version_requirements: *70233260470160
 description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
   framework of
 
@@ -71,6 +71,7 @@ files:
 - Rakefile
 - app/assets/stylesheets/_bourbon.scss
 - app/assets/stylesheets/addons/_button.scss
+- app/assets/stylesheets/addons/_clearfix.scss
 - app/assets/stylesheets/addons/_font-family.scss
 - app/assets/stylesheets/addons/_html5-input-types.scss
 - app/assets/stylesheets/addons/_position.scss
@@ -90,11 +91,14 @@ files:
 - app/assets/stylesheets/css3/_radial-gradient.scss
 - app/assets/stylesheets/css3/_transform.scss
 - app/assets/stylesheets/css3/_transition.scss
+- app/assets/stylesheets/css3/_user-select.scss
 - app/assets/stylesheets/functions/_deprecated-webkit-gradient.scss
+- app/assets/stylesheets/functions/_flex-grid.scss
 - app/assets/stylesheets/functions/_grid-width.scss
 - app/assets/stylesheets/functions/_linear-gradient.scss
 - app/assets/stylesheets/functions/_modular-scale.scss
 - app/assets/stylesheets/functions/_radial-gradient.scss
+- app/assets/stylesheets/functions/_render-gradients.scss
 - app/assets/stylesheets/functions/_tint-shade.scss
 - bin/bourbon
 - bourbon.gemspec