bourbon 3.0.1 → 3.1.0

data/LICENSE

@@ -2,7 +2,7 @@ LICENSE
 
 The MIT License
 
-Copyright (c) 2011-2012 thoughtbot, inc.
+Copyright (c) 2011-2013 thoughtbot, inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/app/assets/stylesheets/_bourbon-deprecated-upcoming.scss

@@ -1,3 +1,8 @@
 //************************************************************************//
-// These mixins/functions will be deprecated in the next MAJOR version release
+// These mixins/functions are deprecated
+// They will be removed in the next MAJOR version release
 //************************************************************************//
+@mixin box-shadow ($shadows...) {
+    @include prefixer(box-shadow, $shadows, spec);
+    @warn "box-shadow is deprecated and will be removed in the next major version release";
+}

data/app/assets/stylesheets/_bourbon.scss

@@ -5,6 +5,7 @@
 @import "functions/grid-width";
 @import "functions/linear-gradient";
 @import "functions/modular-scale";
+@import "functions/px-to-em";
 @import "functions/radial-gradient";
 @import "functions/render-gradients";
 @import "functions/tint-shade";
@@ -18,7 +19,6 @@
 @import "css3/background-size";
 @import "css3/border-image";
 @import "css3/border-radius";
-@import "css3/box-shadow";
 @import "css3/box-sizing";
 @import "css3/columns";
 @import "css3/flex-box";
@@ -26,12 +26,14 @@
 @import "css3/hidpi-media-query";
 @import "css3/image-rendering";
 @import "css3/inline-block";
+@import "css3/keyframes";
 @import "css3/linear-gradient";
 @import "css3/perspective";
 @import "css3/radial-gradient";
 @import "css3/transform";
 @import "css3/transition";
 @import "css3/user-select";
+@import "css3/placeholder";
 
 // Addons & other mixins
 @import "addons/button";
@@ -41,7 +43,10 @@
 @import "addons/html5-input-types";
 @import "addons/position";
 @import "addons/prefixer";
+@import "addons/retina-image";
+@import "addons/size";
 @import "addons/timing-functions";
+@import "addons/triangle";
 
 // Soon to be deprecated Mixins
 @import "bourbon-deprecated-upcoming";

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

@@ -1,23 +1,28 @@
 //************************************************************************//
 // Example: @include prefixer(border-radius, $radii, webkit ms spec);
 //************************************************************************//
-@mixin prefixer ($property, $value, $prefixes) {
+$prefix-for-webkit:    true !default;
+$prefix-for-mozilla:   true !default;
+$prefix-for-microsoft: true !default;
+$prefix-for-opera:     true !default;
+$prefix-for-spec:      true !default; // required for keyframe mixin
 
+@mixin prefixer ($property, $value, $prefixes) {
   @each $prefix in $prefixes {
 
-    @if $prefix == webkit {
+    @if $prefix == webkit and $prefix-for-webkit == true {
       -webkit-#{$property}: $value;
     }
-    @else if $prefix == moz {
+    @else if $prefix == moz and $prefix-for-mozilla == true {
       -moz-#{$property}: $value;
     }
-    @else if $prefix == ms {
+    @else if $prefix == ms and $prefix-for-microsoft == true {
       -ms-#{$property}: $value;
     }
-    @else if $prefix == o {
+    @else if $prefix == o and $prefix-for-opera == true {
       -o-#{$property}: $value;
     }
-    @else if $prefix == spec {
+    @else if $prefix == spec and $prefix-for-spec == true {
       #{$property}: $value;
     }
     @else  {
@@ -25,3 +30,11 @@
     }
   }
 }
+
+@mixin disable-prefix-for-all() {
+  $prefix-for-webkit:    false;
+  $prefix-for-mozilla:   false;
+  $prefix-for-microsoft: false;
+  $prefix-for-opera:     false;
+  $prefix-for-spec:      false;
+}

data/app/assets/stylesheets/addons/_retina-image.scss

@@ -0,0 +1,27 @@
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) {
+  background-image: url($filename + "." + $extension);
+
+  @include hidpi {
+
+    @if $asset-pipeline {
+      @if $retina-filename {
+        background-image: image_url($retina-filename + "." + $extension);
+      }
+      @else {
+        background-image: image_url($filename + "@2x" + "." + $extension);
+      }
+    }
+
+    @else {
+      @if $retina-filename {
+        background-image: url($retina-filename + "." + $extension);
+      }
+      @else {
+        background-image: url($filename + "@2x" + "." + $extension);
+      }
+    }
+
+    background-size: $background-size;
+
+  }
+}

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

@@ -0,0 +1,44 @@
+@mixin size($size) {
+  @if length($size) == 1 {
+    @if $size == auto {
+      width:  $size;
+      height: $size;
+    }
+
+    @else if unitless($size) {
+      width:  $size + px;
+      height: $size + px;
+    }
+
+    @else if not(unitless($size)) {
+      width:  $size;
+      height: $size;
+    }
+  }
+
+  // Width x Height
+  @if length($size) == 2 {
+    $width:  nth($size, 1);
+    $height: nth($size, 2);
+
+    @if $width == auto {
+      width: $width;
+    }
+    @else if not(unitless($width)) {
+      width: $width;
+    }
+    @else if unitless($width) {
+      width: $width + px;
+    }
+
+    @if $height == auto {
+      height: $height;
+    }
+    @else if not(unitless($height)) {
+      height: $height;
+    }
+    @else if unitless($height) {
+      height: $height + px;
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+@mixin triangle ($size, $color, $direction) {
+  height: 0;
+  width: 0;
+
+  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
+    border-color: transparent;
+    border-style: solid;
+    border-width: $size / 2;
+
+    @if $direction == up {
+      border-bottom-color: $color;
+
+    } @else if $direction == right {
+      border-left-color:   $color;
+
+    } @else if $direction == down {
+      border-top-color:    $color;
+
+    } @else if $direction == left {
+      border-right-color:  $color;
+    }
+  }
+
+  @else if ($direction == up-right) or ($direction == up-left) {
+    border-top: $size solid $color;
+
+    @if $direction == up-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == up-left {
+      border-right: $size solid transparent;
+    }
+  }
+
+  @else if ($direction == down-right) or ($direction == down-left) {
+    border-bottom: $size solid $color;
+
+    @if $direction == down-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == down-left {
+      border-right: $size solid transparent;
+    }
+  }
+}

data/app/assets/stylesheets/css3/_font-face.scss

@@ -1,3 +1,5 @@
+// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
+
 @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
   @font-face {
     font-family: $font-family;

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

@@ -0,0 +1,51 @@
+// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
+@mixin keyframes($name) {
+  $original-prefix-for-webkit:    $prefix-for-webkit;
+  $original-prefix-for-mozilla:   $prefix-for-mozilla;
+  $original-prefix-for-microsoft: $prefix-for-microsoft;
+  $original-prefix-for-opera:     $prefix-for-opera;
+  $original-prefix-for-spec:      $prefix-for-spec;
+
+  @if $original-prefix-for-webkit {
+    @include disable-prefix-for-all();
+    $prefix-for-webkit: true;
+    @-webkit-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-mozilla {
+    @include disable-prefix-for-all();
+    $prefix-for-mozilla: true;
+    @-moz-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-microsoft {
+    @include disable-prefix-for-all();
+    $prefix-for-microsoft: true;
+    @-ms-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-opera {
+    @include disable-prefix-for-all();
+    $prefix-for-opera: true;
+    @-o-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-spec {
+    $prefix-for-spec:     true !default;
+    @include disable-prefix-for-all();
+    $prefix-for-spec: true;
+    @keyframes #{$name} {
+      @content;
+    }
+  }
+
+  $prefix-for-webkit:    $original-prefix-for-webkit;
+  $prefix-for-mozilla:   $original-prefix-for-mozilla;
+  $prefix-for-microsoft: $original-prefix-for-microsoft;
+  $prefix-for-opera:     $original-prefix-for-opera;
+  $prefix-for-spec:      $original-prefix-for-spec;
+}

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

@@ -0,0 +1,18 @@
+$placeholders: '-webkit-input-placeholder',
+               '-moz-placeholder',
+               '-ms-input-placeholder';
+
+@mixin placeholder {
+  @each $placeholder in $placeholders {
+    @if $placeholder == "-webkit-input-placeholder" {
+      &::#{$placeholder} {
+        @content;
+      }
+    }
+    @else {
+      &:#{$placeholder} {
+        @content;
+      }
+    }
+  }
+}

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

@@ -14,13 +14,17 @@
 // 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.
 //
+// The calculation presumes that your column structure will be missing the last gutter:
+//
+//   -- column -- gutter -- column -- gutter -- column
+//
 //  $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%;
+//    width: flex-grid(4);        // returns (315px / 995px) = 31.65829%;
+//    margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
 //
 //    p {
 //      width: flex-grid(2, 4);  // returns (145px / 315px) = 46.031746%;
@@ -32,4 +36,4 @@
 //      float: left;
 //      width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
 //    }
-//  }
+//  }

data/app/assets/stylesheets/functions/_px-to-em.scss

@@ -0,0 +1,8 @@
+// Convert pixels to ems
+// eg. for a relational value of 12px write em(12) when the parent is 16px
+// if the parent is another value say 24px write em(12, 24)
+
+@function em($pxval, $base: 16) {
+  @return ($pxval / $base) * 1em;
+}
+

data/lib/bourbon.rb

@@ -4,6 +4,10 @@ $LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
 
 require "bourbon/generator"
 
+unless defined?(Sass)
+  require 'sass'
+end
+
 module Bourbon
   if defined?(Rails) && defined?(Rails::Engine)
     class Engine < ::Rails::Engine
@@ -17,9 +21,7 @@ module Bourbon
         end
       end
     end
+  else
+    Sass.load_paths << File.expand_path("../../app/assets/stylesheets", __FILE__)
   end
 end
-
-unless defined?(Sass)
-  require 'sass'
-end

data/lib/bourbon/version.rb

@@ -1,3 +1,3 @@
 module Bourbon
-  VERSION = "3.0.1"
+  VERSION = "3.1.0"
 end

data/readme.md

@@ -92,4 +92,4 @@ Got questions? Need help? Tweet at [@phillapier](http://twitter.com/phillapier).
 License
 -------
 
-Bourbon is Copyright © 2011-2012 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
+Bourbon is Copyright © 2011-2013 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: 3.0.1
+  version: 3.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -20,11 +20,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-07 00:00:00.000000000 Z
+date: 2013-02-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &70316178000920 !ruby/object:Gem::Requirement
+  requirement: &70359801408200 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -32,10 +32,10 @@ dependencies:
         version: 3.2.0
   type: :runtime
   prerelease: false
-  version_requirements: *70316178000920
+  version_requirements: *70359801408200
 - !ruby/object:Gem::Dependency
   name: thor
-  requirement: &70316178000500 !ruby/object:Gem::Requirement
+  requirement: &70359801407740 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -43,10 +43,10 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70316178000500
+  version_requirements: *70359801407740
 - !ruby/object:Gem::Dependency
   name: aruba
-  requirement: &70316177999960 !ruby/object:Gem::Requirement
+  requirement: &70359801407200 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -54,10 +54,10 @@ dependencies:
         version: '0.4'
   type: :development
   prerelease: false
-  version_requirements: *70316177999960
+  version_requirements: *70359801407200
 - !ruby/object:Gem::Dependency
   name: rake
-  requirement: &70316177999480 !ruby/object:Gem::Requirement
+  requirement: &70359801406780 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -65,7 +65,7 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *70316177999480
+  version_requirements: *70359801406780
 description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
   framework of
 
@@ -101,7 +101,10 @@ files:
 - app/assets/stylesheets/addons/_html5-input-types.scss
 - app/assets/stylesheets/addons/_position.scss
 - app/assets/stylesheets/addons/_prefixer.scss
+- app/assets/stylesheets/addons/_retina-image.scss
+- app/assets/stylesheets/addons/_size.scss
 - app/assets/stylesheets/addons/_timing-functions.scss
+- app/assets/stylesheets/addons/_triangle.scss
 - app/assets/stylesheets/css3/_animation.scss
 - app/assets/stylesheets/css3/_appearance.scss
 - app/assets/stylesheets/css3/_background-image.scss
@@ -109,7 +112,6 @@ files:
 - 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
 - app/assets/stylesheets/css3/_box-sizing.scss
 - app/assets/stylesheets/css3/_columns.scss
 - app/assets/stylesheets/css3/_flex-box.scss
@@ -117,8 +119,10 @@ files:
 - app/assets/stylesheets/css3/_hidpi-media-query.scss
 - app/assets/stylesheets/css3/_image-rendering.scss
 - app/assets/stylesheets/css3/_inline-block.scss
+- app/assets/stylesheets/css3/_keyframes.scss
 - app/assets/stylesheets/css3/_linear-gradient.scss
 - app/assets/stylesheets/css3/_perspective.scss
+- app/assets/stylesheets/css3/_placeholder.scss
 - app/assets/stylesheets/css3/_radial-gradient.scss
 - app/assets/stylesheets/css3/_transform.scss
 - app/assets/stylesheets/css3/_transition.scss
@@ -129,6 +133,7 @@ files:
 - 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/_px-to-em.scss
 - app/assets/stylesheets/functions/_radial-gradient.scss
 - app/assets/stylesheets/functions/_render-gradients.scss
 - app/assets/stylesheets/functions/_tint-shade.scss

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

@@ -1,3 +0,0 @@
-@mixin box-shadow ($shadows...) {
-    @include prefixer(box-shadow, $shadows, webkit spec);
-}