compass_twitter_bootstrap 0.1.3 → 0.1.4

data/stylesheets/compass_twitter_bootstrap/_preboot.scss

@@ -36,7 +36,7 @@ $baseline:          18px;
 $gridColumns:       16;
 $gridColumnWidth:   40px;
 $gridGutterWidth:   20px;
-$extraSpace:        40px;
+$extraSpace:        ($gridGutterWidth * 2); // For our grid calculations
 $siteWidth:         ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
 
 // Color Scheme
@@ -56,7 +56,7 @@ $analog2:           spin($baseColor, -22);
 // ------
 
 // Clearfix for clearing floats like a boss h5bp.com/q
-@mixin clearfix {
+@mixin cft {
   zoom: 1;
   &:before, &:after {
     display: table;
@@ -94,10 +94,10 @@ $analog2:           spin($baseColor, -22);
 
 // Font Stacks
 @mixin shorthand($weight: normal, $size: 14px, $lineHeight: 20px) {
-    font-size: $size;
-    font-weight: $weight;
-    line-height: $lineHeight;
- }
+  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;
@@ -105,23 +105,23 @@ $analog2:           spin($baseColor, -22);
   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;
- }
+  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;
- }
+  font-family: "Monaco", Courier New, monospace;
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
 
 // Grid System
 @mixin container {
   width: $siteWidth;
   margin: 0 auto;
-  @include clearfix();
+  @include cft();
 }
 @mixin columns($columnSpan: 1) {
   width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
@@ -130,11 +130,6 @@ $analog2:           spin($baseColor, -22);
   margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace;
 }
 
-// Drop shadows
-//@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
-//  @include box-shadow($shadow);
-//}
-
 // Transitions
 @mixin transition($transition) {
   -webkit-transition: $transition;
@@ -142,61 +137,53 @@ $analog2:           spin($baseColor, -22);
           transition: $transition;
 }
 
-// Background clipping
-//.background-clip($clip) {
-//  @include background-clip($clip);
-//}
-
-// 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)
-#translucent {
-  @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);
-    @include background-clip(padding-box);
-  }
-}
 
 // Gradients
-
-@mixin horizontal ($startColor: #555, $endColor: #333) {
+@mixin horizontal($startColor: #555, $endColor: #333) {
   background-color: $endColor;
   background-repeat: repeat-x;
+  @include filter-gradient($startColor, $endColor, horizontal);
   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
+  @include background-image(linear-gradient(left, $startColor, $endColor));
 }
+
 @mixin vertical ($startColor: #555, $endColor: #333) {
   background-color: $endColor;
   background-repeat: repeat-x;
+  @include filter-gradient($startColor, $endColor);
+  background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
   @include background-image(linear-gradient($startColor, $endColor));
 }
+
 @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
+  @include background-image(linear-gradient(left top, $startColor, $endColor));
 }
+
 @mixin 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);
@@ -231,4 +218,9 @@ $analog2:           spin($baseColor, -22);
   &.info {
     @include gradientBar(#5bc0de, #339bb9);
   }
+}
+
+// Reset filters for IE
+@mixin reset-filter() {
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
 }

data/stylesheets/compass_twitter_bootstrap/_reset.scss

@@ -1,4 +1,4 @@
-/* Reset.scss
+/* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
  * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
 
@@ -133,14 +133,4 @@ input[type="search"]::-webkit-search-decoration {
 textarea {
   overflow: auto; // Remove vertical scrollbar in IE6-9
   vertical-align: top; // Readability and alignment cross-browser
-}
-
-// Tables
-// -------------------------
-// Source: http://github.com/necolas/normalize.css
-
-// Remove spacing between table cells
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
 }

data/stylesheets/compass_twitter_bootstrap/_scaffolding.scss

@@ -8,29 +8,15 @@
 // -----------
 
 .row {
-  @include clearfix();
-  margin-left: -20px;
+  @include cft();
+  margin-left: -1 * $gridGutterWidth;
 
-  // Default columns
-  .span1,
-  .span2,
-  .span3,
-  .span4,
-  .span5,
-  .span6,
-  .span7,
-  .span8,
-  .span9,
-  .span10,
-  .span11,
-  .span12,
-  .span13,
-  .span14,
-  .span15,
-  .span16 {
+  // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
+  // Credit to $dhg for the idea
+  [class^="span"] {
     display: inline;
     float: left;
-    margin-left: 20px;
+    margin-left: $gridGutterWidth;
   }
 
   // Default columns
@@ -64,6 +50,12 @@
   .offset10  { @include offset(10); }
   .offset11  { @include offset(11); }
   .offset12  { @include offset(12); }
+
+  // Unique column sizes for 16-column grid
+  .span-one-third     { width: 300px; }
+  .span-two-thirds    { width: 620px; }
+  .offset-one-third   { margin-left: 340px; }
+  .offset-two-thirds  { margin-left: 660px; }
 }
 
 
@@ -77,32 +69,25 @@ body {
   margin: 0;
   @include sans-serif(normal,$basefont,$baseline);
   color: $gray;
-  text-rendering: optimizeLegibility;
 }
 
 // Container (centered, fixed-width layouts)
 .container {
   width: 940px;
   margin: 0 auto;
-}
-
-.container:before, .container:after {
-  display: table;
-  content: "";
-}
-.container:after {
-  clear: both;
+  @include cft();
 }
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
 .container-fluid {
   padding: 0 20px;
-  @include clearfix();
-  .sidebar {
+  @include cft();
+  > .sidebar {
     float: left;
     width: 220px;
   }
-  .content {
+  // TODO in v2: rename this and .popover .content to be more specific
+  > .content {
     min-width: 700px;
     max-width: 1180px;
     margin-left: 240px;
@@ -124,87 +109,3 @@ a {
     text-decoration: underline;
   }
 }
-
-// Buttons
-.btn {
-  display: inline-block;
-  @include vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
-  padding: 4px 14px;
-  text-shadow: 0 1px 1px rgba(255,255,255,.75);
-  color: #333;
-  font-size: 13px;
-  line-height: $baseline;
-  border: 1px solid #ccc;
-  border-bottom-color: #bbb;
-  @include border-radius(4px);
-  $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  @include box-shadow($shadow);
-  &:hover {
-    background-position: 0 -15px;
-    color: #333;
-    text-decoration: none;
-  }
-}
-.primary {
-  @include vertical(#049CDB, #0064CD);
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  border: 1px solid darken(#0064CD, 10%);
-  border-bottom-color: darken(#0064CD, 15%);
-  &:hover {
-    color: #fff;
-  }
-}
-
-.btn {
-  @include single-transition(all, .1s, linear);
-  &.primary {
-    color: #fff;
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-    border-color: $blueDark $blueDark darken($blueDark, 15%);
-    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
-    &:hover {
-      color: #fff;
-    }
-  }
-  &.large {
-    font-size: 16px;
-    line-height: 28px;
-    @include border-radius(6px);
-  }
-  &.small {
-    padding-right: 9px;
-    padding-left: 9px;
-    font-size: 11px;
-  }
-  &.disabled {
-    background-image: none;
-    @include opacity(65);
-    cursor: default;
-    @include box-shadow(none);
-  }
-
-  // this can't be included with the .disabled def because IE8 and below will drop it ;_;
-  &:disabled {
-    background-image: none;
-    @include opacity(65);
-    cursor: default;
-    @include box-shadow(none);
-    &.primary {
-      color: #fff;
-    }
-  }
-  &:active {
-    $shadow: inset 0 3px 7px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
-    @include box-shadow($shadow);
-  }
-}
-
-// Help Firefox not be a jerk about adding extra padding to buttons
-button.btn,
-input[type=submit].btn {
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass_twitter_bootstrap
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-08-29 00:00:00.000000000 Z
+date: 2011-09-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &70228306652360 !ruby/object:Gem::Requirement
+  requirement: &70335404125620 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70228306652360
+  version_requirements: *70335404125620
 description: Compass/SCSS version of the twitter bootstrap
 email:
 - vrwaller@gmail.com
@@ -58,7 +58,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -2212121783941429541
+      hash: 762713338064079276
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -67,7 +67,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -2212121783941429541
+      hash: 762713338064079276
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.10