compass_twitter_bootstrap 2.0.0 → 2.0.1

data/stylesheets/compass_twitter_bootstrap/_labels.scss

@@ -1,16 +1,32 @@
 // LABELS
 // ------
 
+// Base
 .label {
-  padding: 1px 3px 2px;
-  font-size: $baseFontSize * .75;
+  padding: 2px 4px 3px;
+  font-size: $baseFontSize * .85;
   font-weight: bold;
   color: $white;
-  text-transform: uppercase;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   background-color: $grayLight;
   @include border-radius(3px);
 }
-.label-important { background-color: $errorText; }
-.label-warning   { background-color: $orange; }
-.label-success   { background-color: $successText; }
-.label-info      { background-color: $infoText; }
+
+// Hover state
+.label:hover {
+  color: $white;
+  text-decoration: none;
+}
+
+// Colors
+.label-important        { background-color: $errorText; }
+.label-important:hover  { background-color: darken($errorText, 10%); }
+
+.label-warning          { background-color: $orange; }
+.label-warning:hover    { background-color: darken($orange, 10%); }
+
+.label-success          { background-color: $successText; }
+.label-success:hover    { background-color: darken($successText, 10%); }
+
+.label-info             { background-color: $infoText; }
+.label-info:hover       { background-color: darken($infoText, 10%); }

data/stylesheets/compass_twitter_bootstrap/_mixins.scss

@@ -25,7 +25,7 @@
 // ------------------
 @mixin tab-focus() {
   // Default
-  outline: thin dotted;
+  outline: thin dotted #333;
   // Webkit
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
@@ -89,7 +89,14 @@
   }
 }
 
-
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+@mixin text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 // FONTS
 // --------------------------------------------------
@@ -223,18 +230,18 @@
       margin-left: 0;
     }
     // Default columns
-    .span1     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1); }
-    .span2     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2); }
-    .span3     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3); }
-    .span4     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4); }
-    .span5     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5); }
-    .span6     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6); }
-    .span7     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7); }
-    .span8     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8); }
-    .span9     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9); }
-    .span10    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10); }
-    .span11    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11); }
-    .span12    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12); }
+    > .span1     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1); }
+    > .span2     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2); }
+    > .span3     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3); }
+    > .span4     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4); }
+    > .span5     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5); }
+    > .span6     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6); }
+    > .span7     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7); }
+    > .span8     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8); }
+    > .span9     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9); }
+    > .span10    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10); }
+    > .span11    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11); }
+    > .span12    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12); }
   }
 }
 
@@ -265,6 +272,51 @@
   }
 }
 
+// Make a Grid
+// -------------------------
+// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
+@mixin makeRow() {
+  margin-left: $gridGutterWidth * -1;
+  @include clearfix();
+}
+@mixin makeColumn($columns: 1) {
+  float: left;
+  margin-left: $gridGutterWidth;
+  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+}
+
+
+// Form field states (used in forms.less)
+// --------------------------------------------------
+
+// Mixin for form field states
+@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
+  // Set the text color
+  > label,
+  .help-block,
+  .help-inline {
+    color: $textColor;
+  }
+  // Style inputs accordingly
+  input,
+  select,
+  textarea {
+    color: $textColor;
+    border-color: $borderColor;
+    &:focus {
+      border-color: darken($borderColor, 10%);
+      @include box-shadow(0 0 6px lighten($borderColor, 20%));
+    }
+  }
+  // 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;
+  }
+}
+
 
 // CSS3 PROPERTIES
 // --------------------------------------------------
@@ -308,13 +360,6 @@
        -o-transform: translate($x, $y);
           transform: translate($x, $y);
 }
-@mixin skew($x: 0, $y: 0) {
-  -webkit-transform: translate($x, $y);
-     -moz-transform: translate($x, $y);
-      -ms-transform: translate($x, $y);
-       -o-transform: translate($x, $y);
-          transform: translate($x, $y);
-}
 @mixin skew($x: 0, $y: 0) {
   -webkit-transform: skew($x, $y);
      -moz-transform: skew($x, $y);
@@ -322,6 +367,13 @@
        -o-transform: skew($x, $y);
           transform: skew($x, $y);
 }
+@mixin translate3d($x: 0, $y: 0, $z: 0) {
+  -webkit-transform: translate($x, $y, $z);
+     -moz-transform: translate($x, $y, $z);
+      -ms-transform: translate($x, $y, $z);
+       -o-transform: translate($x, $y, $z);
+          transform: translate($x, $y, $z);
+}
 
 // Background clipping
 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"

data/stylesheets/compass_twitter_bootstrap/_modals.scss

@@ -1,6 +1,7 @@
 // MODALS
 // ------
 
+// Recalculate z-index where appropriate
 .modal-open {
   .dropdown-menu {  z-index: $zindexDropdown + $zindexModal; }
   .dropdown.open { *z-index: $zindexDropdown + $zindexModal; }
@@ -8,6 +9,7 @@
   .tooltip       {  z-index: $zindexTooltip  + $zindexModal; }
 }
 
+// Background
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -25,6 +27,7 @@
   @include opacity(0.8);
 }
 
+// Base modal
 .modal {
   position: fixed;
   top: 50%;
@@ -53,9 +56,17 @@
   // Close icon
   .close { margin-top: 2px; }
 }
+
+// Body (where all modal content resises)
 .modal-body {
   padding: 15px;
 }
+// Remove bottom margin if need be
+.modal-body .modal-form {
+  margin-bottom: 0;
+}
+
+// Footer (for actions)
 .modal-footer {
   padding: 14px 15px 15px;
   margin-bottom: 0;

data/stylesheets/compass_twitter_bootstrap/_navbar.scss

@@ -81,7 +81,7 @@
     margin-top: 5px; // make buttons vertically centered in navbar
   }
   .btn-group .btn {
-    margin-top: 0;
+    margin-top: 0; // then undo the margin here so we don't accidentally double it
   }
 }
 
@@ -104,6 +104,14 @@
   input[type="radio"] {
     margin-top: 3px;
   }
+  .input-append,
+  .input-prepend {
+    margin-top: 6px;
+    white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
+    input {
+      margin-top: 0; // remove the margin on top since it's on the parent
+    }
+  }
 }
 
 // Navbar search
@@ -133,7 +141,7 @@
       background-color: $grayLight;
       background-color: rgba(255,255,255,.5);
     }
-    // Focus states (we use .focused since IE8 and down doesn't support :focus)
+    // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
     &:focus,
     &.focused {
       padding: 5px 10px;
@@ -194,7 +202,7 @@
 }
 // Hover
 .navbar .nav > li > a:hover {
-  background-color: transparent;
+  background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
   color: $navbarLinkColorHover;
   text-decoration: none;
 }
@@ -205,7 +213,6 @@
   color: $navbarLinkColorHover;
   text-decoration: none;
   background-color: $navbarBackground;
-  background-color: rgba(0,0,0,.5);
 }
 
 // Dividers (basically a vertical hr)

data/stylesheets/compass_twitter_bootstrap/_navs.scss

@@ -21,6 +21,21 @@
   background-color: $grayLighter;
 }
 
+// Nav headers (for dropdowns and lists)
+.nav .nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: $baseLineHeight;
+  color: $grayLight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  text-transform: uppercase;
+}
+// Space them out when they follow another list item (link)
+.nav li + .nav-header {
+  margin-top: 9px;
+}
 
 
 // NAV LIST
@@ -33,21 +48,12 @@
 }
 .nav-list > li > a,
 .nav-list .nav-header {
-  display: block;
-  padding: 3px 15px;
   margin-left:  -15px;
   margin-right: -15px;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
 }
-.nav-list .nav-header {
-  font-size: 11px;
-  font-weight: bold;
-  line-height: $baseLineHeight;
-  color: $grayLight;
-  text-transform: uppercase;
-}
-.nav-list > li + .nav-header {
-  margin-top: 9px;
+.nav-list > li > a {
+  padding: 3px 15px;
 }
 .nav-list .active > a,
 .nav-list .active > a:hover {
@@ -249,6 +255,9 @@
 .tabbable {
   @include clearfix();
 }
+.tab-content {
+  overflow: hidden; // prevent content from running below tabs
+}
 
 // Remove border on bottom, left, right
 .tabs-below .nav-tabs,

data/stylesheets/compass_twitter_bootstrap/_reset.scss

@@ -108,7 +108,7 @@ input[type="button"],
 input[type="reset"],
 input[type="submit"] {
   cursor: pointer; // Cursors on all buttons applied consistently
-  -webkit-appearance: button; // Style clicable inputs in iOS
+  -webkit-appearance: button; // Style clickable inputs in iOS
 }
 input[type="search"] { // Appearance in Safari/Chrome
   -webkit-appearance: textfield;

data/stylesheets/compass_twitter_bootstrap/_sprites.scss

@@ -9,24 +9,26 @@
 // All icons receive the styles of the <i> tag with a base class 
 // of .i and are then given a unique class to add width, height, 
 // and background-position. Your resulting HTML will look like
-// <i class="i icon-inbox"></i>.
+// <i class="icon-inbox"></i>.
 
 // For the white version of the  icons, just add the .icon-white class:
-// <i class="i icon-inbox icon-white"></i>
+// <i class="icon-inbox icon-white"></i>
 
-[class^="icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
   display: inline-block;
   width: 14px;
   height: 14px;
+  line-height: 14px;
   vertical-align: text-top;
-  background-image: url(../img/glyphicons-halflings.png);
+  background-image: image-url("$iconSpritePath");
   background-position: 14px 14px;
   background-repeat: no-repeat;
 
   @include ie7-restore-right-whitespace();
 }
 .icon-white {
-  background-image: url(../img/glyphicons-halflings-white.png);
+  background-image: image-url("$iconWhiteSpritePath");
 }
 
 .icon-glass              { background-position: 0      0; }

data/stylesheets/compass_twitter_bootstrap/_tables.scss

@@ -25,14 +25,15 @@ table {
     padding: 8px;
     line-height: $baseLineHeight;
     text-align: left;
+    vertical-align: top;
     border-top: 1px solid #ddd;
   }
   th {
     font-weight: bold;
-    vertical-align: bottom;
   }
-  td {
-    vertical-align: top;
+  // Bottom align for column headings
+  thead th {
+    vertical-align: bottom;
   }
   // Remove top border from thead by default
   thead:first-child tr th,
@@ -113,6 +114,16 @@ table {
 }
 
 
+// HOVER EFFECT
+// ------------
+// Placed here since it has to come after the potential zebra striping
+.table {
+  tbody tr:hover td,
+  tbody tr:hover th {
+    background-color: #f5f5f5;
+  }
+}
+
 
 // TABLE CELL SIZING
 // -----------------

data/stylesheets/compass_twitter_bootstrap/_thumbnails.scss

@@ -2,13 +2,13 @@
 // ----------
 
 .thumbnails {
-  margin-left: -20px;
+  margin-left: -$gridGutterWidth;
   list-style: none;
   @include clearfix();
 }
 .thumbnails > li {
   float: left;
-  margin: 0 0 $baseLineHeight 20px;
+  margin: 0 0 $baseLineHeight $gridGutterWidth;
 }
 .thumbnail {
   display: block;

data/stylesheets/compass_twitter_bootstrap/_type.scss

@@ -110,7 +110,8 @@ ol {
 li {
   line-height: $baseLineHeight;
 }
-ul.unstyled {
+ul.unstyled,
+ol.unstyled {
   margin-left: 0;
   list-style: none;
 }
@@ -137,7 +138,7 @@ dd {
 hr {
   margin: $baseLineHeight 0;
   border: 0;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid $hrBorder;
   border-bottom: 1px solid $white;
 }
 

data/stylesheets/compass_twitter_bootstrap/_variables.scss

@@ -8,36 +8,36 @@
 // --------------------------------------------------
 
 // Links
-$linkColor:             #08c;
-$linkColorHover:        darken($linkColor, 15%);
+$linkColor:             #08c !default;
+$linkColorHover:        darken($linkColor, 15%) !default;
 
 // Grays
-$black:                 #000;
-$grayDarker:            #222;
-$grayDark:              #333;
-$gray:                  #555;
-$grayLight:             #999;
-$grayLighter:           #eee;
-$white:                 #fff;
+$black:                 #000 !default;
+$grayDarker:            #222 !default;
+$grayDark:              #333 !default;
+$gray:                  #555 !default;
+$grayLight:             #999 !default;
+$grayLighter:           #eee !default;
+$white:                 #fff !default;
 
 // Accent colors
-$blue:                  #049cdb;
-$blueDark:              #0064cd;
-$green:                 #46a546;
-$red:                   #9d261d;
-$yellow:                #ffc40d;
-$orange:                #f89406;
-$pink:                  #c3325f;
-$purple:                #7a43b6;
+$blue:                  #049cdb !default;
+$blueDark:              #0064cd !default;
+$green:                 #46a546 !default;
+$red:                   #9d261d !default;
+$yellow:                #ffc40d !default;
+$orange:                #f89406 !default;
+$pink:                  #c3325f !default;
+$purple:                #7a43b6 !default;
 
 // Typography
-$baseFontSize:          13px;
-$baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
-$baseLineHeight:        18px;
-$textColor:             $grayDark;
+$baseFontSize:          13px !default;
+$baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$baseLineHeight:        18px !default;
+$textColor:             $grayDark !default;
 
 // Buttons
-$primaryButtonBackground:    $linkColor;
+$primaryButtonBackground:    $linkColor !default;
 
 
 
@@ -47,41 +47,49 @@ $primaryButtonBackground:    $linkColor;
 // Z-index master list
 // Used for a bird's eye view of components dependent on the z-axis
 // Try to avoid customizing these :)
-$zindexDropdown:        1000;
-$zindexPopover:         1010;
-$zindexTooltip:         1020;
-$zindexFixedNavbar:     1030;
-$zindexModalBackdrop:   1040;
-$zindexModal:           1050;
+$zindexDropdown:          1000 !default;
+$zindexPopover:           1010 !default;
+$zindexTooltip:           1020 !default;
+$zindexFixedNavbar:       1030 !default;
+$zindexModalBackdrop:     1040 !default;
+$zindexModal:             1050 !default;
+
+// Sprite icons path
+$iconSpritePath:          "../img/glyphicons-halflings.png" !default;
+$iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png" !default;
 
 // Input placeholder text color
-$placeholderText:       $grayLight;
+$placeholderText:         $grayLight !default;
+
+// Hr border color
+$hrBorder:                $grayLighter !default;
 
 // Navbar
-$navbarHeight:                    40px;
-$navbarBackground:                $grayDarker;
-$navbarBackgroundHighlight:       $grayDark;
+$navbarHeight:                    40px !default;
+$navbarBackground:                $grayDarker !default;
+$navbarBackgroundHighlight:       $grayDark !default;
+$navbarLinkBackgroundHover:       transparent !default;
 
-$navbarText:                      $grayLight;
-$navbarLinkColor:                 $grayLight;
-$navbarLinkColorHover:            $white;
+$navbarText:                      $grayLight !default;
+$navbarLinkColor:                 $grayLight !default;
+$navbarLinkColorHover:            $white !default;
 
 // Form states and alerts
-$warningText:             #c09853;
-$warningBackground:       #fcf8e3;
-$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
+$warningText:             #c09853 !default;
+$warningBackground:       #fcf8e3 !default;
+$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%) !default;
 
-$errorText:               #b94a48;
-$errorBackground:         #f2dede;
-$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
+$errorText:               #b94a48 !default;
+$errorBackground:         #f2dede !default;
+$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%) !default;
 
-$successText:             #468847;
-$successBackground:       #dff0d8;
-$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
+$successText:             #468847 !default;
+$successBackground:       #dff0d8 !default;
+$successBorder:           darken(adjust-hue($successBackground, -10), 5%) !default;
 
-$infoText:                #3a87ad;
-$infoBackground:          #d9edf7;
-$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
+$infoText:                #3a87ad !default;
+$infoBackground:          #d9edf7 !default;
+$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%) !default;
 
 
 
@@ -89,11 +97,11 @@ $infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
 // --------------------------------------------------
 
 // Default 940px grid
-$gridColumns:             12;
-$gridColumnWidth:         60px;
-$gridGutterWidth:         20px;
-$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
+$gridColumns:             12 !default;
+$gridColumnWidth:         60px !default;
+$gridGutterWidth:         20px !default;
+$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
 
 // Fluid grid
-$fluidGridColumnWidth:    6.382978723%;
-$fluidGridGutterWidth:    2.127659574%;
+$fluidGridColumnWidth:    6.382978723% !default;
+$fluidGridGutterWidth:    2.127659574% !default;