compass_twitter_bootstrap 0.1.4 → 0.1.5

data/.gitignore

@@ -16,3 +16,4 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
+.sass-cache

data/README.md

@@ -24,6 +24,29 @@ Compass Twitter Bootstrap is Twitter's toolkit converted for Compass.
 
     @import "compass_twitter_bootstrap";
 
+## Usage with asset pipeline(Rails 3.1)
+
+**Add it to your Gemfile**
+
+    gem 'compass_twitter_bootstrap'
+
+**Bundle install**
+
+    bundle install
+
+**Add it to your Application.rb**
+        
+    # Enable the asset pipeline
+    config.assets.enabled = true
+
+    # Compass integration
+    config.sass.load_paths << Compass::Frameworks['compass'].stylesheets_directory
+    config.sass.load_paths << Compass::Frameworks['twitter_bootstrap'].stylesheets_directory
+
+**Import it into your SCSS file**
+
+    @import "compass_twitter_bootstrap"
+    
 
 ## TWITTER BOOTSTRAP
 

data/lib/compass_twitter_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module CompassTwitterBootstrap
-  VERSION = "0.1.4"
+  VERSION = "0.1.5"
 end

data/lib/compass_twitter_bootstrap.rb

@@ -1,6 +1,6 @@
 require "compass_twitter_bootstrap/version"
 require 'compass'
-Compass::Frameworks.register("afadf", :path => "#{File.dirname(__FILE__)}/..")
+Compass::Frameworks.register("twitter_bootstrap", :path => "#{File.dirname(__FILE__)}/..")
 
 module CompassTwitterBootstrap
   STYLESHEETS = File.expand_path("../stylesheets", __FILE__)

data/stylesheets/_compass_twitter_bootstrap.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v1.1.1
+ * Bootstrap v1.3.0
  *
  * Copyright 2011 Twitter, Inc
  * Licensed under the Apache License v2.0
@@ -10,11 +10,15 @@
  */
 
 @import "compass";
+
 // CSS Reset
 @import "compass_twitter_bootstrap/reset";
 
-// Core
-@import "compass_twitter_bootstrap/preboot";
+// Core variables and mixins
+@import "compass_twitter_bootstrap/variables";
+@import "compass_twitter_bootstrap/mixins";
+
+// Grid system and page structure
 @import "compass_twitter_bootstrap/scaffolding";
 
 // Styled patterns and elements

data/stylesheets/compass_twitter_bootstrap/_forms.scss

@@ -16,18 +16,19 @@ fieldset {
   padding-top: $baseline;
   legend {
     display: block;
-    margin-left: 150px;
-    font-size: 20px;
+    padding-left: 150px;
+    font-size: $basefont * 1.5;
     line-height: 1;
-    *margin: 0 0 5px 145px; /* IE6-7 */
-    *line-height: 1.5; /* IE6-7 */
     color: $grayDark;
+    *padding: 0 0 5px 145px; /* IE6-7 */
+    *line-height: 1.5; /* IE6-7 */
   }
 }
 
 // Parent element that clears floats and wraps labels and fields together
-.clearfix {
+form .clearfix {
   margin-bottom: $baseline;
+  @include clearfix();
 }
 
 // Set font for forms
@@ -41,8 +42,8 @@ textarea {
 // Float labels left
 label {
   padding-top: 6px;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: $basefont;
+  line-height: $baseline;
   float: left;
   width: 130px;
   text-align: right;
@@ -50,7 +51,7 @@ label {
 }
 
 // Shift over the inside div to align all label's relevant content
-div.input {
+form .input {
   margin-left: 150px;
 }
 
@@ -69,7 +70,7 @@ select,
   width: 210px;
   height: $baseline;
   padding: 4px;
-  font-size: 13px;
+  font-size: $basefont;
   line-height: $baseline;
   color: $gray;
   border: 1px solid #ccc;
@@ -89,7 +90,7 @@ input[type=radio] {
 }
 
 input[type=file] {
-  background-color: #fff;
+  background-color: $white;
   padding: initial;
   border: initial;
   line-height: initial;
@@ -105,19 +106,27 @@ input[type=submit] {
 
 select,
 input[type=file] {
-  height: $baseline * 1.5;
+  height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
   line-height: $baseline * 1.5;
+  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
+}
+
+// Make multiple select elements height not fixed
+select[multiple] {
+  height: inherit;
 }
 
 textarea {
   height: auto;
 }
 
+// For text that needs to appear as an input but should not be an input
 .uneditable-input {
-  background-color: #eee;
+  background-color: $white;
   display: block;
-  border-color: #ccc;
-  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
+  border-color: #eee;
+  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+  cursor: not-allowed;
 }
 
 // Placeholder text gets special styles; can't be bundled together though for some reason
@@ -130,21 +139,27 @@ textarea {
 
 // Focus states
 input,
-select, textarea {
+textarea {
   $transition: border linear .2s, box-shadow linear .2s;
   @include transition($transition);
   @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
 }
 input:focus,
 textarea:focus {
-  outline: none;
+  outline: 0;
   border-color: rgba(82,168,236,.8);
   $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
   @include box-shadow($shadow);
 }
+input[type=file]:focus,
+input[type=checkbox]:focus,
+select:focus {
+  @include box-shadow(none); // override for file inputs
+  outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
+}
 
 // Error styles
-form div.error {
+form div.clearfix.error {
   background: lighten($red, 57%);
   padding: 10px 0;
   margin: -10px 0 10px;
@@ -175,35 +190,87 @@ form div.error {
 }
 
 // Form element sizes
-.input-mini, input.mini, textarea.mini, select.mini {
+// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
+.input-mini,
+input.mini,
+textarea.mini,
+select.mini {
   width: 60px;
 }
-.input-small, input.small, textarea.small, select.small {
+.input-small,
+input.small,
+textarea.small,
+select.small {
   width: 90px;
 }
-.input-medium, input.medium, textarea.medium, select.medium {
+.input-medium,
+input.medium,
+textarea.medium,
+select.medium {
   width: 150px;
 }
-.input-large, input.large, textarea.large, select.large {
+.input-large,
+input.large,
+textarea.large,
+select.large {
   width: 210px;
 }
-.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
+.input-xlarge,
+input.xlarge,
+textarea.xlarge,
+select.xlarge {
   width: 270px;
 }
-.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
+.input-xxlarge,
+input.xxlarge,
+textarea.xxlarge,
+select.xxlarge {
   width: 530px;
 }
 textarea.xxlarge {
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
-// Turn off focus for disabled (read-only) form elements
-input[readonly]:focus,
-textarea[readonly]:focus,
-input.disabled {
-  background: #f5f5f5;
+// Grid style input sizes
+// This is a duplication of the main grid @include columns(); mixin, but subtracts 10px to account for input padding and border
+@mixin formColumns($columnSpan: 1) {
+  display: inline-block;
+  float: none;
+  width: (($gridColumnWidth - 10) * $columnSpan) + (($gridColumnWidth - 10) * ($columnSpan - 1));
+  margin-left: 0;
+}
+input,
+textarea,
+select {
+  // Default columns
+  &.span1     { @include formColumns(1); }
+  &.span2     { @include formColumns(2); }
+  &.span3     { @include formColumns(3); }
+  &.span4     { @include formColumns(4); }
+  &.span5     { @include formColumns(5); }
+  &.span6     { @include formColumns(6); }
+  &.span7     { @include formColumns(7); }
+  &.span8     { @include formColumns(8); }
+  &.span9     { @include formColumns(9); }
+  &.span10    { @include formColumns(10); }
+  &.span11    { @include formColumns(11); }
+  &.span12    { @include formColumns(12); }
+  &.span13    { @include formColumns(13); }
+  &.span14    { @include formColumns(14); }
+  &.span15    { @include formColumns(15); }
+  &.span16    { @include formColumns(16); }
+}
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  background-color: #f5f5f5;
   border-color: #ddd;
-  @include box-shadow(none);
+  cursor: not-allowed;
 }
 
 // Actions (the buttons)
@@ -228,7 +295,7 @@ input.disabled {
 // Help Text
 .help-inline,
 .help-block {
-  font-size: 12px;
+  font-size: $basefont - 2;
   line-height: $baseline;
   color: $grayLight;
 }
@@ -268,20 +335,22 @@ input.disabled {
     @include border-radius(0 3px 3px 0);
   }
   .add-on {
+    position: relative;
     background: #f5f5f5;
+    border: 1px solid #ccc;
+    z-index: 2;
     float: left;
     display: block;
     width: auto;
     min-width: 16px;
+    height: 18px;
     padding: 4px 4px 4px 5px;
-    color: $grayLight;
+    margin-right: -1px;
     font-weight: normal;
     line-height: 18px;
-    height: 18px;
+    color: $grayLight;
     text-align: center;
-    text-shadow: 0 1px 0 #fff;
-    border: 1px solid #ccc;
-    border-right-width: 0;
+    text-shadow: 0 1px 0 $white;
     @include border-radius(3px 0 0 3px);
   }
   .active {
@@ -301,8 +370,8 @@ input.disabled {
   }
   .add-on {
     @include border-radius(0 3px 3px 0);
-    border-right-width: 1px;
-    border-left-width: 0;
+    margin-right: 0;
+    margin-left: -1px;
   }
 }
 
@@ -314,31 +383,34 @@ input.disabled {
     display: block;
     padding: 0;
     width: 100%;
-    label {
-      display: block;
-      float: none;
-      width: auto;
-      padding: 0;
-      line-height: $baseline;
-      text-align: left;
-      white-space: normal;
-      strong {
-        color: $gray;
-      }
-      small {
-        font-size: 12px;
-        font-weight: normal;
-      }
-    }
-    ul.inputs-list {
-      margin-left: 25px;
-      margin-bottom: 10px;
-      padding-top: 0;
+  }
+  label {
+    display: block;
+    float: none;
+    width: auto;
+    padding: 0;
+    line-height: $baseline;
+    text-align: left;
+    white-space: normal;
+    strong {
+      color: $gray;
     }
-    &:first-child {
-      padding-top: 5px;
+    small {
+      font-size: $basefont - 2;
+      font-weight: normal;
     }
   }
+  .inputs-list {
+    margin-left: 25px;
+    margin-bottom: 10px;
+    padding-top: 0;
+  }
+  &:first-child {
+    padding-top: 6px;
+  }
+  li + li {
+    padding-top: 2px;
+  }
   input[type=radio],
   input[type=checkbox] {
     margin-bottom: 0;
@@ -352,7 +424,7 @@ input.disabled {
     padding-top: $baseline / 2;
   }
   legend {
-    margin-left: 0;
+    padding-left: 0;
   }
   label {
     display: block;
@@ -379,7 +451,7 @@ input.disabled {
       }
     }
   }
-  div.error {
+  div.clearfix.error {
     padding-top: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
@@ -390,4 +462,4 @@ input.disabled {
     margin-left: -20px;
     padding-left: 20px;
   }
-}
+}

data/stylesheets/compass_twitter_bootstrap/{_preboot.scss → _mixins.scss}

@@ -1,62 +1,10 @@
-/* Preboot.less
- * Variables and mixins to pre-ignite any new web development project
- * ------------------------------------------------------------------ */
-
-
-// VARIABLES
-// ---------
-
-// Links
-$linkColor:         #0069d6;
-$linkColorHover:    darken($linkColor, 10);
-
-// Grays
-$black:             #000;
-$grayDark:          lighten($black, 25%);
-$gray:              lighten($black, 50%);
-$grayLight:         lighten($black, 75%);
-$grayLighter:       lighten($black, 90%);
-$white:             #fff;
-
-// Accent Colors
-$blue:              #049CDB;
-$blueDark:          #0064CD;
-$green:             #46a546;
-$red:               #9d261d;
-$yellow:            #ffc40d;
-$orange:            #f89406;
-$pink:              #c3325f;
-$purple:            #7a43b6;
-
-// Baseline grid
-$basefont:          13px;
-$baseline:          18px;
-
-// Griditude
-$gridColumns:       16;
-$gridColumnWidth:   40px;
-$gridGutterWidth:   20px;
-$extraSpace:        ($gridGutterWidth * 2); // For our grid calculations
-$siteWidth:         ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
-
-// Color Scheme
-$baseColor:         $blue;                  // Set a base color
-$complement:        spin($baseColor, 180);  // Determine a complementary color
-$split1:            spin($baseColor, 158);  // Split complements
-$split2:            spin($baseColor, -158);
-$triad1:            spin($baseColor, 135);  // Triads colors
-$triad2:            spin($baseColor, -135);
-$tetra1:            spin($baseColor, 90);   // Tetra colors
-$tetra2:            spin($baseColor, -90);
-$analog1:           spin($baseColor, 22);   // Analogs colors
-$analog2:           spin($baseColor, -22);
-
-
-// MIXINS
-// ------
+/* Mixins.scss
+ * Snippets of reusable CSS to develop faster and keep code readable
+ * ----------------------------------------------------------------- */
+
 
 // Clearfix for clearing floats like a boss h5bp.com/q
-@mixin cft {
+@mixin clearfix {
   zoom: 1;
   &:before, &:after {
     display: table;
@@ -98,18 +46,21 @@ $analog2:           spin($baseColor, -22);
   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;
@@ -118,28 +69,77 @@ $analog2:           spin($baseColor, -22);
 }
 
 // Grid System
-@mixin container {
+@mixin fixed-container() {
   width: $siteWidth;
-  margin: 0 auto;
-  @include cft();
+  margin-left: auto;
+  margin-right: auto;
+  @include clearfix();
 }
+
 @mixin columns($columnSpan: 1) {
   width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
 }
+
 @mixin offset($columnOffset: 1) {
   margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace;
 }
 
+// Necessary grid styles for every column to make them appear next to each other horizontally
+@mixin gridColumn() {
+  display: inline;
+  float: left;
+  margin-left: $gridGutterWidth;
+}
+
+// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
+@mixin makeColumn($columnSpan: 1) {
+  @include gridColumn();
+  @include columns($columnSpan);
+}
+
+// Border Radius (Will use compass version)
+
+// Drop shadows (Will use compass version)
+
 // Transitions
 @mixin transition($transition) {
   -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;
+}
+
+// CSS3 Content Columns
+@mixin content-columns($columnCount, $columnGap: 20px) {
+  -webkit-column-count: $columnCount;
+     -moz-column-count: $columnCount;
+          column-count: $columnCount;
+  -webkit-column-gap: $columnGap;
+     -moz-column-gap: $columnGap;
+          column-gap: $columnGap;
+}
+
+// Add an alphatransparency value to any background or border color (via Elyse Holladay)
+@mixin translucent-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;
+}
+
 
 // Gradients
-@mixin horizontal($startColor: #555, $endColor: #333) {
+@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
   background-color: $endColor;
   background-repeat: repeat-x;
   @include filter-gradient($startColor, $endColor, horizontal);
@@ -147,7 +147,7 @@ $analog2:           spin($baseColor, -22);
   @include background-image(linear-gradient(left, $startColor, $endColor));
 }
 
-@mixin vertical ($startColor: #555, $endColor: #333) {
+@mixin gradient-vertical ($startColor: #555, $endColor: #333) {
   background-color: $endColor;
   background-repeat: repeat-x;
   @include filter-gradient($startColor, $endColor);
@@ -155,72 +155,32 @@ $analog2:           spin($baseColor, -22);
   @include background-image(linear-gradient($startColor, $endColor));
 }
 
-@mixin directional ($startColor: #555, $endColor: #333, $deg: 45deg) {
+@mixin gradient-directional ($startColor: #555, $endColor: #333, $deg: 45deg) {
   background-color: $endColor;
   background-repeat: repeat-x;
   @include background-image(linear-gradient(left top, $startColor, $endColor));
 }
 
-@mixin vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
+@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
   background-color: $endColor;
   background-repeat: no-repeat;
   @include filter-gradient($startColor, $endColor);
   @include background-image(linear-gradient($startColor, $midColor $colorStop, $endColor));
 }
 
-// CSS3 Content Columns
-@mixin content-columns($columnCount, $columnGap: 20px) {
-  @include column-count($columnCount);
-  @include column-count($columnGap);
-}
-
-// Add an alphatransparency value to any background or border color (via Elyse Holladay)
-@mixin background($color: $white, $alpha: 1) {
-  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
-}
-
-@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 vertical($primaryColor, $secondaryColor);
+  @include gradient-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%);
 }
-// Shared colors for buttons and alerts
-.btn,
-.alert-message {
-  // Set text color
-  &.danger,
-  &.danger:hover,
-  &.error,
-  &.error:hover,
-  &.success,
-  &.success:hover,
-  &.info,
-  &.info:hover {
-    color: $white
-  }
-  // Danger and error appear as red
-  &.danger,
-  &.error {
-    @include gradientBar(#ee5f5b, #c43c35);
-  }
-  // Success appears as green
-  &.success {
-    @include gradientBar(#62c462, #57a957);
-  }
-  // Info appears as a neutral blue
-  &.info {
-    @include gradientBar(#5bc0de, #339bb9);
-  }
-}
+
 
 // Reset filters for IE
 @mixin reset-filter() {
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
-}
+}
+
+// Opacity (Will use compass version)