compass-bootstrap-rails 0.1.3.3 → 0.1.4.0

data/README.mkdn

@@ -4,7 +4,7 @@ Twitter Bootstrap- Compass Plugin
 Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
 It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.: <http://twitter.github.com/bootstrap/>
 
-* This plugin is consistent with 1.3.0 version of Bootstrap  
+* This plugin is consistent with 1.4.0 version of Bootstrap
 ------------------------------------------------------------
 
 This plugin adds the Bootstrap to [Compass](http://compass-style.org/).
@@ -22,7 +22,7 @@ Add compass and compass-bootstrap to the assets group in you Gemfile
     gem 'compass-bootstrap'
 
 
-Adding the Bootstrap plugin to an existing Rails 3.0 project 
+Adding the Bootstrap plugin to an existing Rails 3.0 project
 ============================================
 Add the following to your compass.rb
 
@@ -31,33 +31,33 @@ Add the following to your compass.rb
 
 Run the following on your project's directory
 
-    compass install compass-bootstrap/compass-bootstrap 
-    
+    compass install compass-bootstrap/compass-bootstrap
+
 this will add the following files to your stylesheets dir:
 
-    create sass/compass_bootstrap.scss 
-    create sass/_reset.scss 
-    create sass/_variables.scss 
-    create sass/_mixins.scss 
-    create sass/_scaffolding.scss 
-    create sass/_type.scss 
-    create sass/_tables.scss 
-    create sass/_forms.scss 
-    create sass/_patterns.scss 
-    create javascripts/bootstrap-alerts.js 
-    create javascripts/bootstrap-dropdown.js 
-    create javascripts/bootstrap-modal.js 
-    create javascripts/bootstrap-popover.js 
-    create javascripts/bootstrap-scrollspy.js 
-    create javascripts/bootstrap-tabs.js 
-    create javascripts/bootstrap-twipsy.js 
-    create stylesheets/compass_bootstrap.css 
+    create sass/compass_bootstrap.scss
+    create sass/_reset.scss
+    create sass/_variables.scss
+    create sass/_mixins.scss
+    create sass/_scaffolding.scss
+    create sass/_type.scss
+    create sass/_tables.scss
+    create sass/_forms.scss
+    create sass/_patterns.scss
+    create javascripts/bootstrap-alerts.js
+    create javascripts/bootstrap-dropdown.js
+    create javascripts/bootstrap-modal.js
+    create javascripts/bootstrap-popover.js
+    create javascripts/bootstrap-scrollspy.js
+    create javascripts/bootstrap-tabs.js
+    create javascripts/bootstrap-twipsy.js
+    create stylesheets/compass_bootstrap.css
 
 Now you can add the bootstrap style to your .scss/.sass files:
 
     @import 'compass_bootstrap';
-    
-this will make available all the classes and styles from bootstrap 
+
+this will make available all the classes and styles from bootstrap
 
 ### If you only want to add some bootstrap styles to your files, add:
 
@@ -119,7 +119,7 @@ Open _preboot.sccs and you will see the entire list of colors, you can change th
     $analog1:           spin($baseColor, 22);   // Analogs colors
     $analog2:           spin($baseColor, -22);
 
-Adding the Bootstrap plugin to an existing Rails 3.1 project 
+Adding the Bootstrap plugin to an existing Rails 3.1 project
 ============================================
 Open config/application.rb and add the following line after config.assets.enabled = true
 

data/compass-bootstrap-rails.gemspec

@@ -21,5 +21,4 @@ Gem::Specification.new do |s|
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
   s.require_paths = ["lib"]
   s.add_dependency(%q<compass>, [">= 0.10.0"])
-
 end

data/lib/compass-bootstrap-rails/version.rb

@@ -1,5 +1,5 @@
 module Compass
   module BootstrapRails
-    VERSION = "0.1.3.3"
+    VERSION = "0.1.4.0"
   end
 end

data/stylesheets/compass-bootstrap/_forms.scss

@@ -36,7 +36,7 @@ label,
 input,
 select,
 textarea {
-  @include font-sans-serif(normal,13px,normal);
+  @include sans-serif(normal,13px,normal);
 }
 
 // Float labels left
@@ -77,6 +77,11 @@ select,
   @include border-radius(3px);
 }
 
+/* remove padding from select */
+select {
+  padding: initial;
+}
+
 /* mini reset for non-html5 file types */
 input[type=checkbox],
 input[type=radio] {
@@ -107,6 +112,7 @@ input[type=submit] {
 select,
 input[type=file] {
   height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
+  *height: auto; // Reset for IE7
   line-height: $baseline * 1.5;
   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
 }
@@ -114,6 +120,7 @@ input[type=file] {
 // Make multiple select elements height not fixed
 select[multiple] {
   height: inherit;
+  background-color: $white; // Fixes Chromium bug of unreadable items
 }
 
 textarea {
@@ -158,36 +165,47 @@ select:focus {
   outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
 }
 
-// Error styles
-form div.clearfix.error {
-  background: lighten($red, 57%);
-  padding: 10px 0;
-  margin: -10px 0 10px;
-  @include border-radius(4px);
-  $error-text: desaturate(lighten($red, 25%), 25%);
+/* FORM FIELD FEEDBACK STATES
+   -------------------------- */
+
+// Mixin for form field states
+@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
+  // Set the text color
   > label,
-  span.help-inline,
-  span.help-block {
-    color: $red;
+  .help-block,
+  .help-inline {
+    color: $textColor;
   }
+  // Style inputs accordingly
   input,
   textarea {
-    border-color: $error-text;
-    @include box-shadow(0 0 3px rgba(171,41,32,.25));
+    color: $textColor;
+    border-color: $borderColor;
     &:focus {
-      border-color: darken($error-text, 10%);
-      @include box-shadow(0 0 6px rgba(171,41,32,.5));
+      border-color: darken($borderColor, 10%);
+      .box-shadow(0 0 6px lighten($borderColor, 20%);
     }
   }
-  .input-prepend,
-  .input-append {
-    span.add-on {
-      background: lighten($red, 50%);
-      border-color: $error-text;
-      color: darken($error-text, 10%);
-    }
+  // Give a small background color for input-prepend/-append
+  .input-prepend .add-on,
+  .input-append .add-on {
+    color: $textColor;
+    background-color: $backgroundColor;
+    border-color: $textColor;
   }
 }
+// Error
+form .clearfix.error {
+  @include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
+}
+// Warning
+form .clearfix.warning {
+  @include formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
+}
+// Success
+form .clearfix.success {
+  @include formFieldState(#468847, #57a957, lighten(#57a957, 30%));
+}
 
 // Form element sizes
 // TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
@@ -236,12 +254,11 @@ textarea.xxlarge {
 @mixin formColumns($columnSpan: 1) {
   display: inline-block;
   float: none;
-  width: (($gridColumnWidth - 10) * $columnSpan) + (($gridColumnWidth - 10) * ($columnSpan - 1));
+  width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 10;
   margin-left: 0;
 }
 input,
-textarea,
-select {
+textarea {
   // Default columns
   &.span1     { @include formColumns(1); }
   &.span2     { @include formColumns(2); }
@@ -293,9 +310,10 @@ textarea[readonly] {
 }
 
 // Help Text
+// TODO: Do we need to set basefont and baseline here?
 .help-inline,
 .help-block {
-  font-size: $basefont - 2;
+  font-size: $basefont;
   line-height: $baseline;
   color: $grayLight;
 }
@@ -314,15 +332,6 @@ textarea[readonly] {
 // Inline Fields (input fields that appear as inline objects
 .inline-inputs {
   color: $gray;
-  span, input {
-    display: inline-block;
-  }
-  input.mini {
-    width: 60px;
-  }
-  input.small {
-    width: 90px;
-  }
   span {
     padding: 0 2px 0 1px;
   }
@@ -389,6 +398,7 @@ textarea[readonly] {
     float: none;
     width: auto;
     padding: 0;
+    margin-left: 20px;
     line-height: $baseline;
     text-align: left;
     white-space: normal;
@@ -414,6 +424,8 @@ textarea[readonly] {
   input[type=radio],
   input[type=checkbox] {
     margin-bottom: 0;
+    margin-left: -20px;
+    float: left;
   }
 }
 

data/stylesheets/compass-bootstrap/_mixins.scss

@@ -1,36 +1,37 @@
-/* Variables.less
+/* Mixins.less
  * Snippets of reusable CSS to develop faster and keep code readable
  * ----------------------------------------------------------------- */
 
+
 // Clearfix for clearing floats like a boss h5bp.com/q
 @mixin clearfix() {
   zoom: 1;
-	&:before,
+  &:before,
   &:after {
     display: table;
     content: "";
     zoom: 1;
     *display: inline;
-	}
-	&:after {
+  }
+  &:after {
     clear: both;
-	}
+  }
 }
 
 // Center-align a block level element
 @mixin center-block() {
-	display: block;
+  display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
 // Sizing shortcuts
 @mixin size($height: 5px, $width: 5px) {
-	height: $height;
-	width: $width;
+  height: $height;
+  width: $width;
 }
 @mixin square($size: 5px) {
-	@include size($size, $size);
+  @include size($size, $size);
 }
 
 // Input placeholder text
@@ -44,28 +45,30 @@
 }
 
 // Font Stacks
-@mixin font-shorthand($weight: normal, $size: 14px, $lineHeight: 20px) {
-  font-size: $size;
-  font-weight: $weight;
-  line-height: $lineHeight;
-}
-@mixin font-sans-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: $size;
-  font-weight: $weight;
-  line-height: $lineHeight;
-}
-@mixin font-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
-  font-family: "Georgia", Times New Roman, Times, serif;
-  font-size: $size;
-  font-weight: $weight;
-  line-height: $lineHeight;
-}
-@mixin font-monospace($weight: normal, $size: 12px, $lineHeight: 20px) {
-  font-family: "Monaco", Courier New, monospace;
-  font-size: $size;
-  font-weight: $weight;
-  line-height: $lineHeight;
+#font {
+  @mixin shorthand($weight: normal, $size: 14px, $lineHeight: 20px) {
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lineHeight;
+  }
+  @mixin sans-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lineHeight;
+  }
+  @mixin serif($weight: normal, $size: 14px, $lineHeight: 20px) {
+    font-family: "Georgia", Times New Roman, Times, serif;
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lineHeight;
+  }
+  @mixin monospace($weight: normal, $size: 12px, $lineHeight: 20px) {
+    font-family: "Monaco", Courier New, monospace;
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lineHeight;
+  }
 }
 
 // Grid System
@@ -109,102 +112,114 @@
 
 // Transitions
 @mixin transition($transition) {
-	-webkit-transition: $transition;
-	   -moz-transition: $transition;
- 	    -ms-transition: $transition;
-	     -o-transition: $transition;
-	        transition: $transition;
+-webkit-transform-style: e(%("preserve-3d"));
+    -webkit-transition: $transition;
+       -moz-transition: $transition;
+        -ms-transition: $transition;
+         -o-transition: $transition;
+            transition: $transition;
 }
 
 // Background clipping
 @mixin background-clip($clip) {
-	-webkit-background-clip: $clip;
-	   -moz-background-clip: $clip;
-	        background-clip: $clip;
+  -webkit-background-clip: $clip;
+     -moz-background-clip: $clip;
+          background-clip: $clip;
 }
 
 // CSS3 Content Columns
 @mixin content-columns($columnCount, $columnGap: 20px) {
-	-webkit-column-count: $columnCount;
-	   -moz-column-count: $columnCount;
+  -webkit-column-count: $columnCount;
+     -moz-column-count: $columnCount;
           column-count: $columnCount;
   -webkit-column-gap: $columnGap;
-	   -moz-column-gap: $columnGap;
+     -moz-column-gap: $columnGap;
           column-gap: $columnGap;
 }
 
+
+// Make any element resizable for prototyping
+@mixin resizable($direction: both) {
+  resize: $direction; // Options are horizontal, vertical, both
+  overflow: auto; // Safari fix
+}
+
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
-@mixin translucent-background($color: $white, $alpha: 1) {
+#translucent {
+  @mixin background($color: $white, $alpha: 1) {
     background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
-}
-@mixin translucent-border($color: $white, $alpha: 1) {
-	border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
-	background-clip: padding-box;
+  }
+  @mixin border($color: $white, $alpha: 1) {
+    border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+    background-clip: padding-box;
+  }
 }
 
 // Gradient Bar Colors for buttons and allerts
 @mixin gradientBar($primaryColor, $secondaryColor) {
-  @include gradient-vertical($primaryColor, $secondaryColor);
+  #gradient > @include vertical($primaryColor, $secondaryColor);
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
 }
 
 // Gradients
-@mixin gradient-horizontal ($startColor: #555, $endColor: #333) {
-  background-color: $endColor;
-  background-repeat: repeat-x;
-  background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
-  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
-  background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
-  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
-  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
-  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
-  background-image: linear-gradient(left, $startColor, $endColor); // Le standard
-  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down
-}
-@mixin gradient-vertical ($startColor: #555, $endColor: #333) {
-  background-color: $endColor;
-  background-repeat: repeat-x;
-  background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
-  background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
-  background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
-  background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
-  background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
-  background-image: linear-gradient(top, $startColor, $endColor); // The standard
-  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down
-}
-@mixin gradient-directional ($startColor: #555, $endColor: #333, $deg: 45deg) {
-  background-color: $endColor;
-  background-repeat: repeat-x;
-  background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
-  background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
-  background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
-  background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
-  background-image: linear-gradient($deg, $startColor, $endColor); // The standard
-}
-@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
-  background-color: $endColor;
-  background-repeat: no-repeat;
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
-  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
-  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
-  background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
-  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
-  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
-  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down
+#gradient {
+  @mixin horizontal ($startColor: #555, $endColor: #333) {
+    background-color: $endColor;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
+    background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
+    background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
+    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
+    background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+    background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
+    background-image: linear-gradient(left, $startColor, $endColor); // Le standard
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",$startColor,$endColor)); // IE9 and down
+  }
+  @mixin vertical ($startColor: #555, $endColor: #333) {
+    background-color: $endColor;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
+    background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
+    background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
+    background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+    background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
+    background-image: linear-gradient(top, $startColor, $endColor); // The standard
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",$startColor,$endColor)); // IE9 and down
+  }
+  @mixin directional ($startColor: #555, $endColor: #333, $deg: 45deg) {
+    background-color: $endColor;
+    background-repeat: repeat-x;
+    background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
+    background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
+    background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+    background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
+    background-image: linear-gradient($deg, $startColor, $endColor); // The standard
+  }
+  @mixin vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
+    background-color: $endColor;
+    background-repeat: no-repeat;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
+    background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
+    background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
+    background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
+    background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
+    background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",$startColor,$endColor)); // IE9 and down, gets no color-stop at all for proper fallback
+  }
 }
 
 // Reset filters for IE
 @mixin reset-filter() {
-  filter: progid:DXImageTransform.Microsoft.Gradient(enabled = false);
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 }
 
 // Opacity
 @mixin opacity($opacity: 100) {
-	filter: alpha(opacity='#{$opacity}');
-	-khtml-opacity: $opacity / 100;
-	  -moz-opacity: $opacity / 100;
-	       opacity: $opacity / 100;
+  filter: e(%("alpha(opacity=%d)", $opacity));
+  -khtml-opacity: $opacity / 100;
+    -moz-opacity: $opacity / 100;
+         opacity: $opacity / 100;
 }