compass_twitter_bootstrap 2.0.3 → 2.2.2

data/stylesheets/compass_twitter_bootstrap/_thumbnails.scss

@@ -1,12 +1,15 @@
-// THUMBNAILS
-// ----------
+//
+// Thumbnails
+// --------------------------------------------------
+
+
 // Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files
 
 // Make wrapper ul behave like the grid
 .thumbnails {
   margin-left: -$gridGutterWidth;
   list-style: none;
-  @include bootstrap-clearfix();
+  @include ctb-clearfix();
 }
 // Fluid rows have no left margin
 .row-fluid .thumbnails {
@@ -24,15 +27,16 @@
 .thumbnail {
   display: block;
   padding: 4px;
-  line-height: 1;
+  line-height: $baseLineHeight;
   border: 1px solid #ddd;
-  @include bootstrap-border-radius(4px);
-  @include bootstrap-box-shadow(0 1px 1px rgba(0,0,0,.075));
+  @include ctb-border-radius($baseBorderRadius);
+  @include ctb-box-shadow(0 1px 3px rgba(0,0,0,.055));
+  @include ctb-transition(all .2s ease-in-out);
 }
 // Add a hover state for linked versions only
 a.thumbnail:hover {
   border-color: $linkColor;
-  @include bootstrap-box-shadow(0 1px 4px rgba(0,105,214,.25));
+  @include ctb-box-shadow(0 1px 4px rgba(0,105,214,.25));
 }
 
 // Images and captions
@@ -44,4 +48,5 @@ a.thumbnail:hover {
 }
 .thumbnail .caption {
   padding: 9px;
+  color: $gray;
 }

data/stylesheets/compass_twitter_bootstrap/_tooltip.scss

@@ -1,6 +1,9 @@
-// TOOLTIP
-// ------=
+//
+// Tooltips
+// --------------------------------------------------
 
+
+// Base class
 .tooltip {
   position: absolute;
   z-index: $zindexTooltip;
@@ -8,28 +11,60 @@
   visibility: visible;
   padding: 5px;
   font-size: 11px;
-  @include bootstrap-opacity(0);
-  &.in     { @include bootstrap-opacity(80); }
-  &.top    { margin-top:  -2px; }
-  &.right  { margin-left:  2px; }
-  &.bottom { margin-top:   2px; }
-  &.left   { margin-left: -2px; }
-  &.top .tooltip-arrow    { @include bootstrap-popoverArrow-top(); }
-  &.left .tooltip-arrow   { @include bootstrap-popoverArrow-left(); }
-  &.bottom .tooltip-arrow { @include bootstrap-popoverArrow-bottom(); }
-  &.right .tooltip-arrow  { @include bootstrap-popoverArrow-right(); }
+  @include ctb-opacity(0);
+  &.in     { @include ctb-opacity(80); }
+  &.top    { margin-top:  -3px; }
+  &.right  { margin-left:  3px; }
+  &.bottom { margin-top:   3px; }
+  &.left   { margin-left: -3px; }
 }
+
+// Wrapper for the tooltip content
 .tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
-  color: $white;
+  color: $tooltipColor;
   text-align: center;
   text-decoration: none;
-  background-color: $black;
-  @include bootstrap-border-radius(4px);
+  background-color: $tooltipBackground;
+  @include ctb-border-radius($baseBorderRadius);
 }
+
+// Arrows
 .tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.tooltip {
+  &.top .tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -$tooltipArrowWidth;
+    border-width: $tooltipArrowWidth $tooltipArrowWidth 0;
+    border-top-color: $tooltipArrowColor;
+  }
+  &.right .tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -$tooltipArrowWidth;
+    border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0;
+    border-right-color: $tooltipArrowColor;
+  }
+  &.left .tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -$tooltipArrowWidth;
+    border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth;
+    border-left-color: $tooltipArrowColor;
+  }
+  &.bottom .tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -$tooltipArrowWidth;
+    border-width: 0 $tooltipArrowWidth $tooltipArrowWidth;
+    border-bottom-color: $tooltipArrowColor;
+  }
 }

data/stylesheets/compass_twitter_bootstrap/_type.scss

@@ -1,95 +1,96 @@
-// Typography.less
-// Headings, body text, lists, code, and more for a versatile and durable typography system
-// ----------------------------------------------------------------------------------------
+//
+// Typography
+// --------------------------------------------------
 
 
-// BODY TEXT
-// ---------
+// Body text
+// -------------------------
 
 p {
   margin: 0 0 $baseLineHeight / 2;
-  font-family: $baseFontFamily;
-  font-size: $baseFontSize;
-  line-height: $baseLineHeight;
-  small {
-    font-size: $baseFontSize - 2;
-    color: $grayLight;
-  }
 }
 .lead {
   margin-bottom: $baseLineHeight;
-  font-size: 20px;
+  font-size: $baseFontSize * 1.5;
   font-weight: 200;
   line-height: $baseLineHeight * 1.5;
 }
 
-// HEADINGS
-// --------
+
+// Emphasis & misc
+// -------------------------
+
+// Ex: 14px base font * 85% = about 12px
+small   { font-size: 85%; }
+
+strong  { font-weight: bold; }
+em      { font-style: italic; }
+cite    { font-style: normal; }
+
+// Utility classes
+.muted               { color: $grayLight; }
+a.muted:hover        { color: darken($grayLight, 10%); }
+
+.text-warning        { color: $warningText; }
+a.text-warning:hover { color: darken($warningText, 10%); }
+
+.text-error          { color: $errorText; }
+a.text-error:hover   { color: darken($errorText, 10%); }
+
+.text-info           { color: $infoText; }
+a.text-info:hover    { color: darken($infoText, 10%); }
+
+.text-success        { color: $successText; }
+a.text-success:hover { color: darken($successText, 10%); }
+
+
+// Headings
+// -------------------------
 
 h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+  margin: ($baseLineHeight / 2) 0;
   font-family: $headingsFontFamily;
   font-weight: $headingsFontWeight;
+  line-height: $baseLineHeight;
   color: $headingsColor;
   text-rendering: optimizelegibility; // Fix the character spacing for headings
   small {
     font-weight: normal;
+    line-height: 1;
     color: $grayLight;
   }
 }
-h1 {
-  font-size: 30px;
-  line-height: $baseLineHeight * 2;
-  small {
-    font-size: 18px;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: $baseLineHeight * 2;
-  small {
-    font-size: 18px;
-  }
-}
-h3 {
-  font-size: 18px;
-  line-height: $baseLineHeight * 1.5;
-  small {
-    font-size: 14px;
-  }
-}
-h4, h5, h6 {
-  line-height: $baseLineHeight;
-}
-h4 {
-  font-size: 14px;
-  small {
-    font-size: 12px;
-  }
-}
-h5 {
-  font-size: 12px;
-}
-h6 {
-  font-size: 11px;
-  color: $grayLight;
-  text-transform: uppercase;
-}
+
+h1,
+h2,
+h3 { line-height: $baseLineHeight * 2; }
+
+h1 { font-size: $baseFontSize * 2.75; } // ~38px
+h2 { font-size: $baseFontSize * 2.25; } // ~32px
+h3 { font-size: $baseFontSize * 1.75; } // ~24px
+h4 { font-size: $baseFontSize * 1.25; } // ~18px
+h5 { font-size: $baseFontSize; }
+h6 { font-size: $baseFontSize * 0.85; } // ~12px
+
+h1 small { font-size: $baseFontSize * 1.75; } // ~24px
+h2 small { font-size: $baseFontSize * 1.25; } // ~18px
+h3 small { font-size: $baseFontSize; }
+h4 small { font-size: $baseFontSize; }
+
 
 // Page header
+// -------------------------
+
 .page-header {
-  padding-bottom: $baseLineHeight - 1;
-  margin: $baseLineHeight 0;
+  padding-bottom: ($baseLineHeight / 2) - 1;
+  margin: $baseLineHeight 0 ($baseLineHeight * 1.5);
   border-bottom: 1px solid $grayLighter;
 }
-.page-header h1 {
-  line-height: 1;
-}
 
 
 
-// LISTS
-// -----
+// Lists
+// --------------------------------------------------
 
 // Unordered and Ordered lists
 ul, ol {
@@ -102,21 +103,29 @@ ol ol,
 ol ul {
   margin-bottom: 0;
 }
-ul {
-  list-style: disc;
-}
-ol {
-  list-style: decimal;
-}
 li {
   line-height: $baseLineHeight;
 }
+
+// Remove default list styles
 ul.unstyled,
 ol.unstyled {
   margin-left: 0;
   list-style: none;
 }
 
+// Single-line list items
+ul.inline,
+ol.inline {
+  margin-left: 0;
+  list-style: none;
+  & > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
 // Description Lists
 dl {
   margin-bottom: $baseLineHeight;
@@ -127,22 +136,22 @@ dd {
 }
 dt {
   font-weight: bold;
-  line-height: $baseLineHeight - 1; // fix jank Helvetica Neue font bug
 }
 dd {
   margin-left: $baseLineHeight / 2;
 }
 // Horizontal layout (like forms)
 .dl-horizontal {
+  @include ctb-clearfix(); // Ensure dl clears floats if empty dd elements present
   dt {
     float: left;
-    width: 120px;
+    width: $horizontalComponentOffset - 20;
     clear: left;
     text-align: right;
-    @include bootstrap-text-overflow();
+    @include ctb-text-overflow();
   }
   dd {
-    margin-left: 130px;
+    margin-left: $horizontalComponentOffset;
   }
 }
 
@@ -157,21 +166,12 @@ hr {
   border-bottom: 1px solid $white;
 }
 
-// Emphasis
-strong {
-  font-weight: bold;
-}
-em {
-  font-style: italic;
-}
-.muted {
-  color: $grayLight;
-}
-
 // Abbreviations and acronyms
-abbr[title] {
+abbr[title],
+// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
+abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted #ddd;
+  border-bottom: 1px dotted $grayLight;
 }
 abbr.initialism {
   font-size: 90%;
@@ -185,7 +185,7 @@ blockquote {
   border-left: 5px solid $grayLighter;
   p {
     margin-bottom: 0;
-    @include bootstrap-font-shorthand(16px,300,$baseLineHeight * 1.25);
+    @include ctb-font-shorthand(16px,300,$baseLineHeight * 1.25);
   }
   small {
     display: block;
@@ -207,6 +207,14 @@ blockquote {
     small {
       text-align: right;
     }
+    small {
+      &:before {
+        content: '';
+      }
+      &:after {
+        content: '\00A0 \2014';
+      }
+    }
   }
 }
 
@@ -225,11 +233,3 @@ address {
   font-style: normal;
   line-height: $baseLineHeight;
 }
-
-// Misc
-small {
-  font-size: 100%;
-}
-cite {
-  font-style: normal;
-}

data/stylesheets/compass_twitter_bootstrap/_utilities.scss

@@ -1,5 +1,7 @@
-// UTILITY CLASSES
-// ---------------
+//
+// Utility classes
+// --------------------------------------------------
+
 
 // Quick floats
 .pull-right {
@@ -21,3 +23,8 @@
 .invisible {
   visibility: hidden;
 }
+
+// For Affix plugin
+.affix {
+  position: fixed;
+}

data/stylesheets/compass_twitter_bootstrap/_variables.scss

@@ -1,10 +1,9 @@
-// Variables.less
-// Variables to customize the look and feel of Bootstrap
-// -----------------------------------------------------
-
+//
+// Variables
+// --------------------------------------------------
 
 
-// GLOBAL VALUES
+// Global values
 // --------------------------------------------------
 
 
@@ -47,34 +46,50 @@ $linkColorHover:        darken($linkColor, 15%) !default;
 // -------------------------
 $sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 $serifFontFamily:       Georgia, "Times New Roman", Times, serif !default;
-$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace !default;
 
-$baseFontSize:          13px !default;
+$baseFontSize:          14px !default;
 $baseFontFamily:        $sansFontFamily !default;
-$baseLineHeight:        18px !default;
+$baseLineHeight:        20px !default;
 $altFontFamily:         $serifFontFamily !default;
 
-$headingsFontFamily:    inherit !default; // empty to use BS default, $baseFontFamily
-$headingsFontWeight:    bold !default;    // instead of browser default, bold
-$headingsColor:         inherit !default; // empty to use BS default, $textColor
+$headingsFontFamily:    inherit; // empty to use BS default, $baseFontFamily
+$headingsFontWeight:    bold;    // instead of browser default, bold
+$headingsColor:         inherit; // empty to use BS default, $textColor
 
 
-// Tables
+// Component sizing
 // -------------------------
-$tableBackground:                   transparent !default; // overall background-color
-$tableBackgroundAccent:             #f9f9f9 !default; // for striping
-$tableBackgroundHover:              #f5f5f5 !default; // for hover
-$tableBorder:                       #ddd !default; // table and cell border
+// Based on 14px font-size and 20px line-height
+
+$fontSizeLarge:         $baseFontSize * 1.25; // ~18px
+$fontSizeSmall:         $baseFontSize * 0.85; // ~12px
+$fontSizeMini:          $baseFontSize * 0.75; // ~11px
+
+$paddingLarge:          11px 19px; // 44px
+$paddingSmall:          2px 10px;  // 26px
+$paddingMini:           0 6px;   // 22px
 
+$baseBorderRadius:      4px !default;
+$borderRadiusLarge:     6px !default;
+$borderRadiusSmall:     3px !default;
+
+
+// Tables
+// -------------------------
+$tableBackground:                   transparent; // overall background-color
+$tableBackgroundAccent:             #f9f9f9; // for striping
+$tableBackgroundHover:              #f5f5f5; // for hover
+$tableBorder:                       #ddd; // table and cell border
 
 // Buttons
 // -------------------------
 $btnBackground:                     $white !default;
 $btnBackgroundHighlight:            darken($white, 10%) !default;
-$btnBorder:                         #ccc !default;
+$btnBorder:                         #bbb !default;
 
 $btnPrimaryBackground:              $linkColor !default;
-$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15%) !default;
+$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 20%) !default;
 
 $btnInfoBackground:                 #5bc0de !default;
 $btnInfoBackgroundHighlight:        #2f96b4 !default;
@@ -88,7 +103,7 @@ $btnWarningBackgroundHighlight:     $orange !default;
 $btnDangerBackground:               #ee5f5b !default;
 $btnDangerBackgroundHighlight:      #bd362f !default;
 
-$btnInverseBackground:              $gray !default;
+$btnInverseBackground:              #444 !default;
 $btnInverseBackgroundHighlight:     $grayDarker !default;
 
 
@@ -96,31 +111,39 @@ $btnInverseBackgroundHighlight:     $grayDarker !default;
 // -------------------------
 $inputBackground:               $white !default;
 $inputBorder:                   #ccc !default;
-$inputBorderRadius:             3px !default;
+$inputBorderRadius:             $baseBorderRadius !default;
 $inputDisabledBackground:       $grayLighter !default;
 $formActionsBackground:         #f5f5f5 !default;
+$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
 
 // Dropdowns
 // -------------------------
 $dropdownBackground:            $white !default;
 $dropdownBorder:                rgba(0,0,0,.2) !default;
+$dropdownDividerTop:            #e5e5e5 !default;
+$dropdownDividerBottom:         $white !default;
+
 $dropdownLinkColor:             $grayDark !default;
 $dropdownLinkColorHover:        $white !default;
-$dropdownLinkBackgroundHover:   $linkColor !default;
+$dropdownLinkColorActive:       $white !default;
 
+$dropdownLinkBackgroundActive:  $linkColor !default;
+$dropdownLinkBackgroundHover:   $dropdownLinkBackgroundActive !default;
 
 
 
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
+
 // 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 !default;
 $zindexPopover:           1010 !default;
-$zindexTooltip:           1020 !default;
+$zindexTooltip:           1030 !default;
 $zindexFixedNavbar:       1030 !default;
 $zindexModalBackdrop:     1040 !default;
 $zindexModal:             1050 !default;
@@ -128,8 +151,8 @@ $zindexModal:             1050 !default;
 
 // Sprite icons path
 // -------------------------
-$iconSpritePath:          "../img/glyphicons-halflings.png" !default;
-$iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png" !default;
+$iconSpritePath:          "glyphicons-halflings.png" !default;
+$iconWhiteSpritePath:     "glyphicons-halflings-white.png" !default;
 
 
 // Input placeholder text color
@@ -142,25 +165,61 @@ $placeholderText:         $grayLight !default;
 $hrBorder:                $grayLighter !default;
 
 
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset:       180px !default;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  #f5f5f5 !default;
+
+
 // Navbar
 // -------------------------
-$navbarHeight:                    40px !default;
-$navbarBackground:                $grayDarker !default;
-$navbarBackgroundHighlight:       $grayDark !default;
+$navbarCollapseWidth:             979px !default;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1 !default;
 
-$navbarText:                      $grayLight !default;
-$navbarLinkColor:                 $grayLight !default;
-$navbarLinkColorHover:            $white !default;
-$navbarLinkColorActive:           $navbarLinkColorHover !default;
+$navbarHeight:                    40px !default;
+$navbarBackgroundHighlight:       #ffffff !default;
+$navbarBackground:                darken($navbarBackgroundHighlight, 5%) !default;
+$navbarBorder:                    darken($navbarBackground, 12%) !default;
+
+$navbarText:                      #777 !default;
+$navbarLinkColor:                 #777 !default;
+$navbarLinkColorHover:            $grayDark !default;
+$navbarLinkColorActive:           $gray !default;
 $navbarLinkBackgroundHover:       transparent !default;
-$navbarLinkBackgroundActive:      $navbarBackground !default;
+$navbarLinkBackgroundActive:      darken($navbarBackground, 5%) !default;
 
-$navbarSearchBackground:          lighten($navbarBackground, 25%) !default;
-$navbarSearchBackgroundFocus:     $white !default;
-$navbarSearchBorder:              darken($navbarSearchBackground, 30%) !default;
-$navbarSearchPlaceholderColor:    #ccc !default;
 $navbarBrandColor:                $navbarLinkColor !default;
 
+// Inverted navbar
+$navbarInverseBackground:                #111111 !default;
+$navbarInverseBackgroundHighlight:       #222222 !default;
+$navbarInverseBorder:                    #252525 !default;
+
+$navbarInverseText:                      $grayLight !default;
+$navbarInverseLinkColor:                 $grayLight !default;
+$navbarInverseLinkColorHover:            $white !default;
+$navbarInverseLinkColorActive:           $navbarInverseLinkColorHover !default;
+$navbarInverseLinkBackgroundHover:       transparent !default;
+$navbarInverseLinkBackgroundActive:      $navbarInverseBackground !default;
+
+$navbarInverseSearchBackground:          lighten($navbarInverseBackground, 25%) !default;
+$navbarInverseSearchBackgroundFocus:     $white !default;
+$navbarInverseSearchBorder:              $navbarInverseBackground !default;
+$navbarInverseSearchPlaceholderColor:    #ccc !default;
+
+$navbarInverseBrandColor:                $navbarInverseLinkColor !default;
+
+
+// Pagination
+// -------------------------
+$paginationBackground:                #fff !default;
+$paginationBorder:                    #ddd !default;
+$paginationActiveBackground:          #f5f5f5 !default;
+
 
 // Hero unit
 // -------------------------
@@ -188,10 +247,28 @@ $infoBackground:          #d9edf7 !default;
 $infoBorder:              darken(adjust-hue($infoBackground, -10), 7%) !default;
 
 
+// Tooltips and popovers
+// -------------------------
+$tooltipColor:            #fff !default;
+$tooltipBackground:       #000 !default;
+$tooltipArrowWidth:       5px !default;
+$tooltipArrowColor:       $tooltipBackground !default;
+
+$popoverBackground:       #fff !default;
+$popoverArrowWidth:       10px !default;
+$popoverArrowColor:       #fff !default;
+$popoverTitleBackground:  darken($popoverBackground, 3%) !default;
+
+// Special enhancement for popovers
+$popoverArrowOuterWidth:  $popoverArrowWidth + 1 !default;
+$popoverArrowOuterColor:  rgba(0,0,0,.25) !default;
+
+
 
 // GRID
 // --------------------------------------------------
 
+
 // Default 940px grid
 // -------------------------
 $gridColumns:             12 !default;
@@ -199,7 +276,26 @@ $gridColumnWidth:         60px !default;
 $gridGutterWidth:         20px !default;
 $gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
 
+// 1200px min
+$gridColumnWidth1200:     70px !default;
+$gridGutterWidth1200:     30px !default;
+$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;
+
+// 768px-979px
+$gridColumnWidth768:      42px !default;
+$gridGutterWidth768:      20px !default;
+$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;
+
+
 // Fluid grid
 // -------------------------
-$fluidGridColumnWidth:    6.382978723% !default;
-$fluidGridGutterWidth:    2.127659574% !default;
+$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth) !default;
+$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth) !default;
+
+// 1200px min
+$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
+$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200) !default;
+
+// 768px-979px
+$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768) !default;
+$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768) !default;