bourbon 2.1.0 → 2.1.1

data/app/assets/stylesheets/_bourbon.scss

@@ -12,6 +12,7 @@
 // CSS3 Mixins
 @import "css3/animation";
 @import "css3/appearance";
+@import "css3/background";
 @import "css3/background-image";
 @import "css3/background-size";
 @import "css3/border-image";

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

@@ -0,0 +1,107 @@
+//************************************************************************//
+// Background property for adding multiple backgrounds using shorthand
+// notation.
+//************************************************************************//
+
+@mixin background(
+  $background-1       , $background-2: false,
+  $background-3: false, $background-4: false,
+  $background-5: false, $background-6: false,
+  $background-7: false, $background-8: false,
+  $background-9: false, $background-10: false,
+  $fallback: false
+) {
+  $backgrounds: compact($background-1, $background-2,
+                $background-3, $background-4,
+                $background-5, $background-6,
+                $background-7, $background-8,
+                $background-9, $background-10);
+
+  $fallback-color: false;
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+  @else {
+    $fallback-color: extract-background-color($backgrounds);
+  }
+
+  @if $fallback-color {
+    background-color: $fallback-color;
+  }
+  background: background-add-prefix($backgrounds, webkit);
+  background: background-add-prefix($backgrounds, moz);
+  background: background-add-prefix($backgrounds, ms);
+  background: background-add-prefix($backgrounds, o);
+  background: background-add-prefix($backgrounds);
+}
+
+@function extract-background-color($backgrounds) {
+  $final-bg-layer: nth($backgrounds, length($backgrounds));
+  @if type-of($final-bg-layer) == list {
+    @for $i from 1 through length($final-bg-layer) {
+      $value: nth($final-bg-layer, $i);
+      @if type-of($value) == color {
+        @return $value;
+      }
+    }
+  }
+  @return false;
+}
+
+
+@function background-add-prefix($backgrounds, $vendor: false) {
+  $backgrounds-prefixed: ();
+
+  @for $i from 1 through length($backgrounds) {
+    $shorthand: nth($backgrounds, $i); // Get member for current index
+    $type: type-of($shorthand); // Get type of variable - List or String
+
+    // If shorthand is a list
+    @if $type == list {
+      $first-member: nth($shorthand, 1); // Get first member of shorthand
+
+      // Linear Gradient
+      @if index(linear radial, nth($first-member, 1)) {
+        $gradient-type: nth($first-member, 1); // linear || radial
+
+        // Get actual gradient (red, blue)
+        $gradient-args: false;
+        $shorthand-start: false;
+        // Linear gradient and positioning, repeat, etc. values
+        @if type-of($first-member) == list {
+          $gradient-args: nth($first-member, 2);
+          $shorthand-start: 2;
+        }
+        // Linear gradient only
+        @else {
+          $gradient-args: nth($shorthand, 2); // Get actual gradient (red, blue)
+          $shorthand-start: 3;
+        }
+
+        $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+        @for $j from $shorthand-start through length($shorthand) {
+          $gradient: join($gradient, nth($shorthand, $j), space);
+        }
+        $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
+      }
+
+      // Image with additional properties
+      @else {
+        $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
+      }
+
+    }
+
+    // If shorthand is a simple string, color or image
+    @else if $type == string {
+      $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
+    }
+  }
+  @return $backgrounds-prefixed;
+}
+
+//Examples:
+  //@include background(linear-gradient(top, orange, red));
+  //@include background(radial-gradient(50% 50%, cover circle, orange, red));
+  //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
+  //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));

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

@@ -1,24 +1,26 @@
 @mixin border-radius ($radii) {
-  @include prefixer(border-radius, $radii);
+  @include prefixer(border-radius, $radii, webkit, not moz);
+  @warn "border-radius mixin is deprecated and will be removed in the next major version release.";
 }
 
 @mixin border-top-left-radius($radii) {
-  -moz-border-radius-topleft: $radii;
-  @include prefixer(border-top-left-radius, $radii);
+  @include prefixer(border-top-left-radius, $radii, webkit, not moz);
+  @warn "border-top-left-radius mixin is deprecated and will be removed in the next major version release.";
 }
 
 @mixin border-top-right-radius($radii) {
-  -moz-border-radius-topright: $radii;
-  @include prefixer(border-top-right-radius, $radii);
+  @include prefixer(border-top-right-radius, $radii, webkit, not moz);
+  @warn "border-top-right-radius mixin is deprecated and will be removed in the next major version release.";
 }
 
 @mixin border-bottom-left-radius($radii) {
-  -moz-border-radius-bottomleft: $radii;
-  @include prefixer(border-bottom-left-radius, $radii);
+  @include prefixer(border-bottom-left-radius, $radii, webkit, not moz);
+  @warn "border-bottom-left-radius mixin is deprecated and will be removed in the next major version release.";
 }
 
 @mixin border-bottom-right-radius($radii) {
-  @include prefixer(border-bottom-right-radius, $radii);
+  @include prefixer(border-bottom-right-radius, $radii, webkit, not moz);
+  @warn "border-bottom-right-radius mixin is deprecated and will be removed in the next major version release.";
 }
 
 @mixin border-top-radius($radii) {

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

@@ -8,5 +8,5 @@
     $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
                    $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
 
-    @include prefixer(box-shadow, $full);
+    @include prefixer(box-shadow, $full, webkit, not moz);
 }

data/app/assets/stylesheets/css3/_transition.scss

@@ -67,6 +67,6 @@
     $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
                    $time-6, $time-7, $time-8, $time-9);
 
-  @include prefixer(transition-transition-delay, $full, webkit, moz, ms, o);
+  @include prefixer(transition-delay, $full, webkit, moz, ms, o);
 }
 

data/lib/bourbon/version.rb

@@ -1,3 +1,3 @@
 module Bourbon
-  VERSION = "2.1.0"
+  VERSION = "2.1.1"
 end

data/readme.md

@@ -235,4 +235,4 @@ The names and logos for thoughtbot are trademarks of thoughtbot, inc.
 License
 -------
 
-Bourbon is Copyright © 2011 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
+Bourbon is Copyright © 2012 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bourbon
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 2.1.1
   prerelease: 
 platform: ruby
 authors:
@@ -19,11 +19,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-05-10 00:00:00.000000000 Z
+date: 2012-06-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &70230720209340 !ruby/object:Gem::Requirement
+  requirement: &70123579816480 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -31,10 +31,10 @@ dependencies:
         version: '3.1'
   type: :runtime
   prerelease: false
-  version_requirements: *70230720209340
+  version_requirements: *70123579816480
 - !ruby/object:Gem::Dependency
   name: aruba
-  requirement: &70230720208840 !ruby/object:Gem::Requirement
+  requirement: &70123579815840 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -42,10 +42,10 @@ dependencies:
         version: '0.4'
   type: :development
   prerelease: false
-  version_requirements: *70230720208840
+  version_requirements: *70123579815840
 - !ruby/object:Gem::Dependency
   name: rake
-  requirement: &70230720208460 !ruby/object:Gem::Requirement
+  requirement: &70123579815040 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -53,7 +53,7 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *70230720208460
+  version_requirements: *70123579815040
 description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
   framework of
 
@@ -80,47 +80,6 @@ files:
 - Gemfile.lock
 - LICENSE
 - Rakefile
-- _config.yml
-- _includes/animation.html
-- _includes/appearance.html
-- _includes/background-image.html
-- _includes/background-size.html
-- _includes/border-image.html
-- _includes/border-radius.html
-- _includes/box-shadow.html
-- _includes/box-sizing.html
-- _includes/buttons.html
-- _includes/clearfix.html
-- _includes/columns.html
-- _includes/compact.html
-- _includes/complete-list.html
-- _includes/flex-box.html
-- _includes/flex-grid.html
-- _includes/font-family.html
-- _includes/footer.html
-- _includes/golden-ratio.html
-- _includes/grid-width.html
-- _includes/hide-text.html
-- _includes/html5-input-types.html
-- _includes/inline-block.html
-- _includes/intro.html
-- _includes/linear-gradient-function.html
-- _includes/linear-gradient.html
-- _includes/modular-scale.html
-- _includes/navigation.html
-- _includes/position.html
-- _includes/radial-gradient-function.html
-- _includes/radial-gradient.html
-- _includes/timing-functions.html
-- _includes/tint-shade.html
-- _includes/transform-origin.html
-- _includes/transform.html
-- _includes/transitions.html
-- _includes/user-select.html
-- _site/images/border.png
-- _site/images/bourbon-logo.png
-- _site/index.html
-- _site/stylesheets/style.css
 - app/assets/stylesheets/_bourbon.scss
 - app/assets/stylesheets/addons/_button.scss
 - app/assets/stylesheets/addons/_clearfix.scss
@@ -134,6 +93,7 @@ files:
 - app/assets/stylesheets/css3/_appearance.scss
 - app/assets/stylesheets/css3/_background-image.scss
 - app/assets/stylesheets/css3/_background-size.scss
+- app/assets/stylesheets/css3/_background.scss
 - app/assets/stylesheets/css3/_border-image.scss
 - app/assets/stylesheets/css3/_border-radius.scss
 - app/assets/stylesheets/css3/_box-shadow.scss
@@ -158,15 +118,11 @@ files:
 - app/assets/stylesheets/functions/_transition-property-name.scss
 - bin/bourbon
 - bourbon.gemspec
-- doc/README.md
 - features/install.feature
 - features/step_definitions/bourbon_steps.rb
 - features/support/bourbon_support.rb
 - features/support/env.rb
 - features/update.feature
-- images/border.png
-- images/bourbon-logo.png
-- index.html
 - lib/bourbon.rb
 - lib/bourbon/engine.rb
 - lib/bourbon/generator.rb
@@ -176,15 +132,6 @@ files:
 - lib/bourbon/version.rb
 - lib/tasks/install.rake
 - readme.md
-- stylesheets/sass/_animation-keyframes.scss
-- stylesheets/sass/_base.scss
-- stylesheets/sass/_demos.scss
-- stylesheets/sass/_mixins.scss
-- stylesheets/sass/_normalize.scss
-- stylesheets/sass/_pygments-theme-dark.scss
-- stylesheets/sass/_pygments-theme-light.scss
-- stylesheets/sass/style.scss
-- stylesheets/style.css
 homepage: https://github.com/thoughtbot/bourbon
 licenses: []
 post_install_message: 

data/_config.yml

@@ -1,42 +0,0 @@
-safe:        false
-auto:        true
-server:      false
-server_port: 4000
-base-url:    /
-
-source:      .
-destination: ./_site
-plugins:     ./_plugins
-exclude:     ./app, ./doc, ./bourbon, ./demo, ./lib, sass, ./bourbon.gemspec, ./Gemfile, ./Gemfile.lock, ./generate-bourbon.sh, ./LICENSE, ./Rakefile, ./readme.md, ./features
-
-future:      true
-lsi:         false
-pygments:    true
-markdown:    maruku
-permalink:   date
-
-maruku:
-  use_tex:    false
-  use_divs:   false
-  png_engine: blahtex
-  png_dir:    images/latex
-  png_url:    /images/latex
-
-rdiscount:
-  extensions: []
-
-kramdown:
-  auto_ids: true,
-  footnote_nr: 1
-  entity_output: as_char
-  toc_levels: 1..6
-  use_coderay: false
-
-  coderay:
-    coderay_wrap: div
-    coderay_line_numbers: inline
-    coderay_line_numbers_start: 1
-    coderay_tab_width: 4
-    coderay_bold_every: 10
-    coderay_css: style
-

data/_includes/animation.html

@@ -1,20 +0,0 @@
-<section id="animations">
-  <h2>Animations <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_animation.scss">View source</a></h2>
-  <p>The animation 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.</p>
-
-{% highlight scss %}
-box:hover {
-  @include animation-name(scale, slide);
-  @include animation-duration(2s);
-  @include animation-timing-function(ease);
-  @include animation-iteration-count(infinite);
-
-  // Animation shorthand works the same as the CSS3 animation shorthand
-  @include animation(scale 1.0s ease-in, slide 2.0s ease);
-}
-{% endhighlight %}
-  <h3>Demo</h3>
-  <section class="demo">
-    <div id="run-demo" class="box"></div>
-  </section>
-</section>

data/_includes/appearance.html

@@ -1,8 +0,0 @@
-<section id="appearance">
-  <h2>Appearance <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_appearance.scss">View source</a></h2>
-  <p>The <code>appearance</code> CSS property is used to display an element using a platform-native styling based on the operating system's theme.</p>
-
-{% highlight scss %}
-@include appearance(none);
-{% endhighlight %}
-</section>

data/_includes/background-image.html

@@ -1,36 +0,0 @@
-<section id="background-image">
-  <h2>Background Image <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_background-image.scss">View source</a></h2>
-  <p>The background-image mixin is helpful for chaining multiple comma delimited background images and/or linear/radial-gradients into one background-image property. The Background-image mixin supports up to 10 background-images.</p>
-  <p>Use in combination with the <a href="#linear-gradient-function">linear-gradient function</a> and the <a href="#radial-gradient-function">radial-gradient function</a>.
-
-{% highlight scss %}
-// Multiple image assets
-@include background-image(url("/images/a.png"), url("images/b.png"));
-
-// Image asset with a linear-gradient
-@include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
-
-// Multiple linear-gradients - Demo
-@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), 
-                           linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)));
-
-// NOT SUPPORTED - Multiple image assets with shorthand notation
-@include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);
-{% endhighlight %}
-
-  <h3>Demo</h3>
-  <section class="demo">
-  </section>
-
-<h3>Note about shorthand notation</h3>
-
-<p>All CSS background properties support comma delimited values. For multiple background images you can specify the background properties like position, repeat, etc. for each image. For example:</p>
-
-{% highlight scss %}
-@include background-image(url("/images/a.png"), url("images/b.png"));
-background-position: center top, center;
-background-repeat: no-repeat, repeat-x;
-{% endhighlight %}
-
-</section>
-

data/_includes/background-size.html

@@ -1,12 +0,0 @@
-<section id="background-size">
-  <h2>Background Size<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_background-size.scss">View source</a></h2>
-  <p>The background-size mixin supports multiple background-sizes for use with multiple background-images via comma delimitation.</p>
-
-{% highlight scss %}
-@include background-size(50% 100%); // Single
-@include background-size(50% 100%, 75% 100%); // Multiple
-{% endhighlight %}
-</section>
-
-
-