compass_twitter_bootstrap 2.0.0 → 2.0.1

data/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Overview
 
+## 2.0.1
+* Upgrade twitter bootstrap to 2.0.1
+* Use compass @image-url() for sprites (thanks to jpfuentes2)
+* Added !default to variables
+
 ## 2.0.0
 * Updated twitter bootstrap to 2.0
 * Updated import script

data/build/convert.rb

@@ -13,6 +13,10 @@ class Convert
           file = fix_progress_bar(file)
         end
 
+        if name == 'variables.less'
+          file = insert_default_vars(file)
+        end
+
         save_file(name, file) unless name == 'mixins.less'
       end
     end
@@ -77,6 +81,7 @@ private
     file = replace_includes(file)
     file = replace_spin(file)
     file = replace_opacity(file)
+    file = replace_image_urls(file)
 
     file
   end
@@ -135,6 +140,14 @@ private
     scss.gsub(/\@include opacity\((\d+)\)/) {|s| "@include opacity(#{$1.to_f / 100})"}
   end
 
+  def replace_image_urls(less)
+    less.gsub(/background-image: url\((.*)\);/) {|s| "background-image: image-url(\"#{$1.gsub('../img/','')}\");" }
+  end
+
+  def insert_default_vars(scss)
+    scss.gsub(/^(\$.+);$/, '\1 !default;')
+  end
+
   def convert_scss(file, folder='')
     sass_files = 'stylesheets_sass'
     system("sass-convert #{file.path} #{sass_files}/#{folder}#{File.basename(file, 'scss')}sass")

data/lib/compass_twitter_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module CompassTwitterBootstrap
-  VERSION = "2.0.0"
+  VERSION = "2.0.1"
 end

data/stylesheets/_compass_twitter_bootstrap_responsive.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Responsive v2.0.0
+ * Bootstrap Responsive v2.0.1
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
@@ -8,7 +8,7 @@
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  */
 
-// RESPONSIVE
+// Responsive
 // For phone and tablet devices
 // -------------------------------------------------------------
 
@@ -56,7 +56,7 @@
   .uneditable-input {
     display: block;
     width: 100%;
-    height: 28px; /* Make inputs at least the height of their button counterpart */
+    min-height: 28px; /* Make inputs at least the height of their button counterpart */
     /* Makes inputs behave like true block-level elements */
     -webkit-box-sizing: border-box; /* Older Webkit */
        -moz-box-sizing: border-box; /* Older FF */
@@ -123,7 +123,7 @@
 // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
 // --------------------------------------------------
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   // GRID & CONTAINERS
   // -----------------
   // Remove width from containers
@@ -154,7 +154,7 @@
 // PORTRAIT TABLET TO DEFAULT DESKTOP
 // ----------------------------------
 
-@media (min-width: 768px) and (max-width: 980px) {
+@media (min-width: 768px) and (max-width: 979px) {
 
   // Fixed grid
   @include gridSystem-generate(12, 42px, 20px);
@@ -171,7 +171,7 @@
 
 // TABLETS AND BELOW
 // -----------------
-@media (max-width: 980px) {
+@media (max-width: 979px) {
 
   // UNFIX THE TOPBAR
   // ----------------
@@ -215,6 +215,10 @@
   .navbar .nav > .divider-vertical {
     display: none;
   }
+  .navbar .nav .nav-header {
+    color: $navbarText;
+    text-shadow: none;
+  }
   // Nav and dropdown links in navbar
   .navbar .nav > li > a,
   .navbar .dropdown-menu a {
@@ -319,4 +323,5 @@
   .thumbnails > li {
     margin-left: 30px;
   }
+
 }

data/stylesheets/compass_twitter_bootstrap/_breadcrumbs.scss

@@ -9,7 +9,7 @@
   @include border-radius(3px);
   @include box-shadow(inset 0 1px 0 $white);
   li {
-    display: inline;
+    display: inline-block;
     text-shadow: 0 1px 0 $white;
   }
   .divider {

data/stylesheets/compass_twitter_bootstrap/_button-groups.scss

@@ -133,7 +133,8 @@
 .btn-primary,
 .btn-danger,
 .btn-info,
-.btn-success {
+.btn-success,
+.btn-inverse {
   .caret {
     border-top-color: $white;
     @include opacity(0.75);

data/stylesheets/compass_twitter_bootstrap/_buttons.scss

@@ -9,12 +9,14 @@
 .btn {
   display: inline-block;
   padding: 4px 10px 4px;
+  margin-bottom: 0; // For input.btn
   font-size: $baseFontSize;
   line-height: $baseLineHeight;
   color: $grayDark;
   text-align: center;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
-  @include gradient-vertical-three-colors($white, $white, 25%, darken($white, 10%)); // Don't use @include gradientbar(); here since it does a three-color gradient
+  vertical-align: middle;
+  @include buttonBackground($white, darken($white, 10%));
   border: 1px solid #ccc;
   border-bottom-color: #bbb;
   @include border-radius(4px);
@@ -23,6 +25,7 @@
   cursor: pointer;
 
   // Give IE7 some love
+  @include reset-filter();
   @include ie7-restore-left-whitespace();
 }
 
@@ -51,7 +54,6 @@
   @include box-shadow($shadow);
   background-color: darken($white, 10%);
   background-color: darken($white, 15%) e("\9");
-  color: rgba(0,0,0,.5);
   outline: 0;
 }
 
@@ -76,7 +78,7 @@
   line-height: normal;
   @include border-radius(5px);
 }
-.btn-large .icon {
+.btn-large [class^="icon-"] {
   margin-top: 1px;
 }
 
@@ -86,10 +88,17 @@
   font-size: $baseFontSize - 2px;
   line-height: $baseLineHeight - 2px;
 }
-.btn-small .icon {
+.btn-small [class^="icon-"] {
   margin-top: -1px;
 }
 
+// Mini
+.btn-mini {
+  padding: 2px 6px;
+  font-size: $baseFontSize - 2px;
+  line-height: $baseLineHeight - 4px;
+}
+
 
 // Alternate buttons
 // --------------------------------------------------
@@ -105,7 +114,9 @@
 .btn-success,
 .btn-success:hover,
 .btn-info,
-.btn-info:hover {
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   color: $white;
 }
@@ -114,7 +125,8 @@
 .btn-warning.active,
 .btn-danger.active,
 .btn-success.active,
-.btn-info.active {
+.btn-info.active,
+.btn-dark.active {
   color: rgba(255,255,255,.75);
 }
 
@@ -139,6 +151,10 @@
 .btn-info {
   @include buttonBackground(#5bc0de, #2f96b4);
 }
+// Inverse appears as dark gray
+.btn-inverse {
+  @include buttonBackground(#454545, #262626);
+}
 
 
 // Cross-browser Jank
@@ -146,8 +162,10 @@
 
 button.btn,
 input[type="submit"].btn {
+
+  // Firefox 3.6 only I believe
   &::-moz-focus-inner {
-  padding: 0;
+    padding: 0;
     border: 0;
   }
 

data/stylesheets/compass_twitter_bootstrap/_code.scss

@@ -11,12 +11,16 @@ pre {
   color: $grayDark;
   @include border-radius(3px);
 }
+
+// Inline code
 code {
   padding: 3px 4px;
   color: #d14;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
 }
+
+// Blocks of code
 pre {
   display: block;
   padding: ($baseLineHeight - 1) / 2;
@@ -30,6 +34,7 @@ pre {
   white-space: pre;
   white-space: pre-wrap;
   word-break: break-all;
+  word-wrap: break-word;
 
   // Make prettyprint styles more spaced out for readability
   &.prettyprint {
@@ -39,6 +44,14 @@ pre {
   // Account for some code outputs that place code tags in pre tags
   code {
     padding: 0;
+    color: inherit;
     background-color: transparent;
+    border: 0;
   }
 }
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}

data/stylesheets/compass_twitter_bootstrap/_dropdowns.scss

@@ -46,7 +46,6 @@
   float: left;
   display: none; // none by default, but block on "open" of the menu
   min-width: 160px;
-  max-width: 220px;
   _width: 160px;
   padding: 4px 0;
   margin: 0; // override default ul
@@ -93,7 +92,7 @@
     padding: 3px 15px;
     clear: both;
     font-weight: normal;
-    line-height: 18px;
+    line-height: $baseLineHeight;
     color: $gray;
     white-space: nowrap;
   }

data/stylesheets/compass_twitter_bootstrap/_forms.scss

@@ -28,6 +28,12 @@ legend {
   color: $grayDark;
   border: 0;
   border-bottom: 1px solid #eee;
+
+  // Small
+  small {
+    font-size: $baseLineHeight * .75;
+    color: $grayLight;
+  }
 }
 
 // Set font for forms
@@ -36,7 +42,13 @@ input,
 button,
 select,
 textarea {
-  @include font-sans-serif($baseFontSize,normal,$baseLineHeight);
+  @include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+  @include font-family-sans-serif(); // And only set font-family here for those that need it (note the missing label element)
 }
 
 // Identify controls by their labels
@@ -84,13 +96,17 @@ input[type="radio"] {
   margin: 3px 0;
   *margin-top: 0; /* IE7 */
   line-height: normal;
-  border: 0;
   cursor: pointer;
   @include border-radius(0);
+  border: 0 \9; /* IE9 and down */
+}
+input[type="image"] {
+  border: 0;
 }
 
 // Reset the file input to browser defaults
 input[type="file"] {
+  width: auto;
   padding: initial;
   line-height: initial;
   border: initial;
@@ -115,6 +131,11 @@ input[type="file"] {
   line-height: 28px;
 }
 
+// Reset line-height for IE
+input[type="file"] {
+  line-height: 18px \9;
+}
+
 // Chrome on Linux and Mobile Safari need background-color
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
@@ -165,9 +186,11 @@ input[type="hidden"] {
 }
 
 // Radios and checkboxes on same line
+// TODO v3: Convert .inline to .control-inline
 .radio.inline,
 .checkbox.inline {
   display: inline-block;
+  padding-top: 5px;
   margin-bottom: 0;
   vertical-align: middle;
 }
@@ -175,11 +198,6 @@ input[type="hidden"] {
 .checkbox.inline + .checkbox.inline {
   margin-left: 10px; // space out consecutive inline controls
 }
-// But don't forget to remove their padding on first-child
-.controls > .radio.inline:first-child,
-.controls > .checkbox.inline:first-child {
-  padding-top: 0;
-}
 
 
 
@@ -198,9 +216,10 @@ textarea:focus {
   $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
   @include box-shadow($shadow);
   outline: 0;
-  outline: thin dotted \9; /* IE6-8 */
+  outline: thin dotted \9; /* IE6-9 */
 }
 input[type="file"]:focus,
+input[type="radio"]:focus,
 input[type="checkbox"]:focus,
 select:focus {
   @include box-shadow(none); // override for file inputs
@@ -260,33 +279,6 @@ textarea[readonly] {
 // FORM FIELD FEEDBACK STATES
 // --------------------------
 
-// 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;
-  }
-}
 // Warning
 .control-group.warning {
   @include formFieldState($warningText, $warningText, $warningBackground);
@@ -344,6 +336,7 @@ select:focus:required:invalid {
 // ---------
 
 .help-block {
+  display: block; // account for any element using help-block
   margin-top: 5px;
   margin-bottom: 0;
   color: $grayLight;
@@ -412,6 +405,7 @@ select:focus:required:invalid {
     @include border-radius(3px 0 0 3px);
   }
   .uneditable-input {
+    border-left-color: #eee;
     border-right-color: #ccc;    
   }
   .add-on {
@@ -461,6 +455,10 @@ select:focus:required:invalid {
     display: inline-block;
     margin-bottom: 0;
   }
+  // Re-hide hidden elements due to specifity
+  .hide {
+    display: none;
+  }
 }
 .form-search label,
 .form-inline label,
@@ -477,28 +475,37 @@ select:focus:required:invalid {
 .form-inline .input-prepend .add-on {
   vertical-align: middle;
 }
+// Inline checkbox/radio labels
+.form-search .radio,
+.form-inline .radio,
+.form-search .checkbox,
+.form-inline .checkbox {
+  margin-bottom: 0;
+  vertical-align: middle;
+}
 
 // Margin to space out fieldsets
 .control-group {
   margin-bottom: $baseLineHeight / 2;
 }
 
+// Legend collapses margin, so next element is responsible for spacing
+legend + .control-group {
+  margin-top: $baseLineHeight;
+  -webkit-margin-top-collapse: separate;
+}
+
 // Horizontal-specific styles
 // --------------------------
 
 .form-horizontal {
-  // Legend collapses margin, so we're relegated to padding
-  legend + .control-group {
-    margin-top: $baseLineHeight;
-    -webkit-margin-top-collapse: separate;
-  }
   // Increase spacing between groups
   .control-group {
     margin-bottom: $baseLineHeight;
     @include clearfix();
   }
   // Float the labels left
-  .control-group > label {
+  .control-label {
     float: left;
     width: 140px;
     padding-top: 5px;