compass_twitter_bootstrap 2.0.3 → 2.2.2

data/stylesheets/compass_twitter_bootstrap/_progress-bars.scss

@@ -1,5 +1,6 @@
-// PROGRESS BARS
-// -------------
+//
+// Progress bars
+// --------------------------------------------------
 
 
 // ANIMATIONS
@@ -43,31 +44,35 @@
 // Outer container
 .progress {
   overflow: hidden;
-  height: 18px;
-  margin-bottom: 18px;
-  @include bootstrap-gradient-vertical(#f5f5f5, #f9f9f9);
-  @include bootstrap-box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
-  @include bootstrap-border-radius(4px);
+  height: $baseLineHeight;
+  margin-bottom: $baseLineHeight;
+  @include ctb-gradient-vertical(#f5f5f5, #f9f9f9);
+  @include ctb-box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+  @include ctb-border-radius($baseBorderRadius);
 }
 
 // Bar of progress
 .progress .bar {
   width: 0%;
-  height: 18px;
+  height: 100%;
   color: $white;
+  float: left;
   font-size: 12px;
   text-align: center;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  @include bootstrap-gradient-vertical(#149bdf, #0480be);
-  @include bootstrap-box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
-  @include bootstrap-box-sizing(border-box);
-  @include bootstrap-transition(width .6s ease);
+  @include ctb-gradient-vertical(#149bdf, #0480be);
+  @include ctb-box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
+  @include ctb-box-sizing(border-box);
+  @include ctb-transition(width .6s ease);
+}
+.progress .bar + .bar {
+  @include ctb-box-shadow(#{inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)});
 }
 
 // Striped bars
 .progress-striped .bar {
-  @include bootstrap-gradient-striped(#149bdf);
-  @include bootstrap-background-size(40px 40px);
+  @include ctb-gradient-striped(#149bdf);
+  @include ctb-background-size(40px 40px);
 }
 
 // Call animation for the active one
@@ -85,33 +90,33 @@
 // ------
 
 // Danger (red)
-.progress-danger .bar {
-  @include bootstrap-gradient-vertical(#ee5f5b, #c43c35);
+.progress-danger .bar, .progress .bar-danger {
+  @include ctb-gradient-vertical(#ee5f5b, #c43c35);
 }
-.progress-danger.progress-striped .bar {
-  @include bootstrap-gradient-striped(#ee5f5b);
+.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
+  @include ctb-gradient-striped(#ee5f5b);
 }
 
 // Success (green)
-.progress-success .bar {
-  @include bootstrap-gradient-vertical(#62c462, #57a957);
+.progress-success .bar, .progress .bar-success {
+  @include ctb-gradient-vertical(#62c462, #57a957);
 }
-.progress-success.progress-striped .bar {
-  @include bootstrap-gradient-striped(#62c462);
+.progress-success.progress-striped .bar, .progress-striped .bar-success {
+  @include ctb-gradient-striped(#62c462);
 }
 
 // Info (teal)
-.progress-info .bar {
-  @include bootstrap-gradient-vertical(#5bc0de, #339bb9);
+.progress-info .bar, .progress .bar-info {
+  @include ctb-gradient-vertical(#5bc0de, #339bb9);
 }
-.progress-info.progress-striped .bar {
-  @include bootstrap-gradient-striped(#5bc0de);
+.progress-info.progress-striped .bar, .progress-striped .bar-info {
+  @include ctb-gradient-striped(#5bc0de);
 }
 
 // Warning (orange)
-.progress-warning .bar {
-  @include bootstrap-gradient-vertical(lighten($orange, 15%), $orange);
+.progress-warning .bar, .progress .bar-warning {
+  @include ctb-gradient-vertical(lighten($orange, 15%), $orange);
 }
-.progress-warning.progress-striped .bar {
-  @include bootstrap-gradient-striped(lighten($orange, 15%));
+.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
+  @include ctb-gradient-striped(lighten($orange, 15%));
 }

data/stylesheets/compass_twitter_bootstrap/_reset.scss

@@ -1,6 +1,8 @@
-// Reset.less
-// Adapted from Normalize.css http://github.com/necolas/normalize.css
-// ------------------------------------------------------------------------
+//
+// Reset CSS
+// Adapted from http://github.com/necolas/normalize.css
+// --------------------------------------------------
+
 
 // Display in IE6-9 and FF3
 // -------------------------
@@ -46,7 +48,7 @@ html {
 }
 // Focus states
 a:focus {
-  @include bootstrap-tab-focus();
+  @include ctb-tab-focus();
 }
 // Hover & Active
 a:hover,
@@ -75,12 +77,22 @@ sub {
 // -------------------------
 
 img {
-  max-width: 100%; // Make images inherently responsive
+  /* Responsive images (ensure images don't scale beyond their parents) */
+  max-width: 100%; /* Part 1: Set a maxium relative to the parent */
+  width: auto\9; /* IE7-8 need help adjusting responsive images */
+  height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
+
   vertical-align: middle;
   border: 0;
   -ms-interpolation-mode: bicubic;
 }
 
+// Prevent max-width from affecting Google Maps
+#map_canvas img,
+.google-maps img {
+  max-width: none;
+}
+
 // Forms
 // -------------------------
 
@@ -104,16 +116,24 @@ input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
   border: 0;
 }
 button,
-input[type="button"],
+html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
 input[type="reset"],
 input[type="submit"] {
-  cursor: pointer; // Cursors on all buttons applied consistently
-  -webkit-appearance: button; // Style clickable inputs in iOS
+    -webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.
+    cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
+}
+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+    cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
 }
 input[type="search"] { // Appearance in Safari/Chrome
-  -webkit-box-sizing: content-box;
-     -moz-box-sizing: content-box;
-          box-sizing: content-box;
+  @include ctb-box-sizing(content-box);
   -webkit-appearance: textfield;
 }
 input[type="search"]::-webkit-search-decoration,
@@ -124,3 +144,73 @@ textarea {
   overflow: auto; // Remove vertical scrollbar in IE6-9
   vertical-align: top; // Readability and alignment cross-browser
 }
+
+
+// Printing
+// -------------------------
+// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
+
+@media print {
+
+  * {
+    text-shadow: none !important;
+    color: #000 !important; // Black prints faster: h5bp.com/s
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+
+  // Don't show links for images, or javascript/internal links
+  .ir a:after,
+  a[href^="javascript:"]:after,
+  a[href^="#"]:after {
+    content: "";
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  thead {
+    display: table-header-group; // h5bp.com/t
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  @page {
+    margin: 0.5cm;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}

data/stylesheets/compass_twitter_bootstrap/_responsive-1200px-min.scss

@@ -1,23 +1,25 @@
-// LARGE DESKTOP & UP
-// ------------------
+//
+// Responsive: Large desktop and up
+// --------------------------------------------------
+
 
 @media (min-width: 1200px) {
 
   // Fixed grid
-  @include bootstrap-grid-core(70px, 30px);
+  @include ctb-grid-core($gridColumnWidth1200, $gridGutterWidth1200);
 
   // Fluid grid
-  @include bootstrap-grid-fluid(5.982905983%, 2.564102564%);
+  @include ctb-grid-fluid($fluidGridColumnWidth1200, $fluidGridGutterWidth1200);
 
   // Input grid
-  @include bootstrap-grid-input(70px, 30px);
+  @include ctb-grid-input($gridColumnWidth1200, $gridGutterWidth1200);
 
   // Thumbnails
   .thumbnails {
-    margin-left: -30px;
+    margin-left: -$gridGutterWidth1200;
   }
   .thumbnails > li {
-    margin-left: 30px;
+    margin-left: $gridGutterWidth1200;
   }
   .row-fluid .thumbnails {
     margin-left: 0;

data/stylesheets/compass_twitter_bootstrap/_responsive-767px-max.scss

@@ -1,73 +1,8 @@
-// UP TO LANDSCAPE PHONE
-// ---------------------
-
-@media (max-width: 480px) {
-
-  // Smooth out the collapsing/expanding nav
-  .nav-collapse {
-    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
-  }
-
-  // Block level the page header small tag for readability
-  .page-header h1 small {
-    display: block;
-    line-height: $baseLineHeight;
-  }
-
-  // Update checkboxes for iOS
-  input[type="checkbox"],
-  input[type="radio"] {
-    border: 1px solid #ccc;
-  }
-
-  // Remove the horizontal form styles
-  .form-horizontal .control-group > label {
-    float: none;
-    width: auto;
-    padding-top: 0;
-    text-align: left;
-  }
-  // Move over all input controls and content
-  .form-horizontal .controls {
-    margin-left: 0;
-  }
-  // Move the options list down to align with labels
-  .form-horizontal .control-list {
-    padding-top: 0; // has to be padding because margin collaspes
-  }
-  // Move over buttons in .form-actions to align with .controls
-  .form-horizontal .form-actions {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
-  // Modals
-  .modal {
-    position: absolute;
-    top:   10px;
-    left:  10px;
-    right: 10px;
-    width: auto;
-    margin: 0;
-    &.fade.in { top: auto; }
-  }
-  .modal-header .close {
-    padding: 10px;
-    margin: -10px;
-  }
-
-  // Carousel
-  .carousel-caption {
-    position: static;
-  }
-
-}
-
-
-
-// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+//
+// Responsive: Landscape phone to desktop/tablet
 // --------------------------------------------------
 
+
 @media (max-width: 767px) {
 
   // Padding to set content in a bit
@@ -77,7 +12,8 @@
   }
   // Negative indent the now static "fixed" navbar
   .navbar-fixed-top,
-  .navbar-fixed-bottom {
+  .navbar-fixed-bottom,
+  .navbar-static-top {
     margin-left: -20px;
     margin-right: -20px;
   }
@@ -116,14 +52,28 @@
   .thumbnails {
     margin-left: 0;
   }
+  .thumbnails > li {
+    float: none;
+    margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
+  }
   // Make all grid-sized elements block level again
   [class*="span"],
+  .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
   .row-fluid [class*="span"] {
     float: none;
     display: block;
-    width: auto;
+    width: 100%;
     margin-left: 0;
+    @include ctb-box-sizing(border-box);
+  }
+  .span12,
+  .row-fluid .span12 {
+    width: 100%;
+    @include ctb-box-sizing(border-box);
   }
+  .row-fluid [class*="offset"]:first-child {
+		margin-left: 0;
+	}
 
   // FORM FIELDS
   // -----------
@@ -135,7 +85,7 @@
   select[class*="span"],
   textarea[class*="span"],
   .uneditable-input {
-    @include bootstrap-input-block-level();
+    @include ctb-input-block-level();
   }
   // But don't let it screw up prepend/append inputs
   .input-prepend input,
@@ -145,5 +95,99 @@
     display: inline-block; // redeclare so they don't wrap to new lines
     width: auto;
   }
+  .controls-row [class*="span"] + [class*="span"] {
+    margin-left: 0;
+  }
+
+  // Modals
+  .modal {
+    position: fixed;
+    top:   20px;
+    left:  20px;
+    right: 20px;
+    width: auto;
+    margin: 0;
+    &.fade  { top: -100px; }
+    &.fade.in { top: 20px; }
+  }
+
+}
+
+
+
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+
+  // Smooth out the collapsing/expanding nav
+  .nav-collapse {
+    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
+  }
+
+  // Block level the page header small tag for readability
+  .page-header h1 small {
+    display: block;
+    line-height: $baseLineHeight;
+  }
+
+  // Update checkboxes for iOS
+  input[type="checkbox"],
+  input[type="radio"] {
+    border: 1px solid #ccc;
+  }
+
+  // Remove the horizontal form styles
+  .form-horizontal {
+    .control-label {
+      float: none;
+      width: auto;
+      padding-top: 0;
+      text-align: left;
+    }
+    // Move over all input controls and content
+    .controls {
+      margin-left: 0;
+    }
+    // Move the options list down to align with labels
+    .control-list {
+      padding-top: 0; // has to be padding because margin collaspes
+    }
+    // Move over buttons in .form-actions to align with .controls
+    .form-actions {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+
+  // Medias
+  // Reset float and spacing to stack
+  .media .pull-left,
+  .media .pull-right  {
+    float: none;
+    display: block;
+    margin-bottom: 10px;
+  }
+  // Remove side margins since we stack instead of indent
+  .media-object {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  // Modals
+  .modal {
+    top:   10px;
+    left:  10px;
+    right: 10px;
+  }
+  .modal-header .close {
+    padding: 10px;
+    margin: -10px;
+  }
+
+  // Carousel
+  .carousel-caption {
+    position: static;
+  }
 
 }