compass_twitter_bootstrap 2.0.3 → 2.2.2

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Overview
 
+## 2.2.2
+* Upgraded twiter bootstrap to 2.2.2 (@tijsverkoyen)
+
+## 2.1.0
+* Upgrade twitter bootstrap to 2.1.0 in the scss files (@kristianmandrup)
+
 ## 2.0.1.2
 * Really fix sprites, maybe.
 * Update JS

data/README.md

@@ -28,12 +28,9 @@ Demo App at https://github.com/vwall/Compass-Twitter-Bootstrap-Demo-App
 
 ## Usage with asset pipeline(Rails 3.2)
 
-**Add it to your Gemfile**
+**Add these gems to your Gemfile. To learn about the new compass-rails gem, see https://github.com/Compass/compass-rails for more info.**
 
     gem 'compass_twitter_bootstrap'
-
-**Use the new compass-rails gem.  See https://github.com/Compass/compass-rails for more info.**
-
     gem 'compass-rails'
 
 **Bundle install**
@@ -41,7 +38,7 @@ Demo App at https://github.com/vwall/Compass-Twitter-Bootstrap-Demo-App
     bundle install
 
 **Add it to your Application.rb**
-        
+
     # Enable the asset pipeline
     config.assets.enabled = true
 
@@ -65,7 +62,7 @@ Demo App at https://github.com/vwall/Compass-Twitter-Bootstrap-Demo-App
   Rails.configuration.sass.tap do |config|
     ...
 
-    # twitter bootstrap  
+    # twitter bootstrap
     config.load_paths << Compass::Frameworks['twitter_bootstrap'].stylesheets_directory
 
     ...
@@ -86,12 +83,49 @@ To use the font awesome font and icons simply change the standard import to:
 
 Javascript Libraries are located in vendor/assets/javascripts
 
-Include them individually or 
+Include them individually or
 
     //=require bootstrap-all
 
 to include all files
 
+## SCSS to SASS Conversion tip
+
+To easily convert `.scss` files to `.sass` files you can use this little bash script:
+
+`$ for f in *.scss; do sass-convert -F scss -T sass $f ${f%%.*}.sass; done`
+
+To convert all twitter bootstrap .scss files to .sass (with overwrite):
+
+`$ for f in stylesheets/compass_twitter_bootstrap/*.scss; do sass-convert -F scss -T sass $f stylesheets_sass/compass_twitter_bootstrap/${f%%.*}.sass; done`
+
+`$ for f in stylesheets/*.scss; do sass-convert -F scss -T sass $f stylesheets_sass/${f%%.*}.sass; done`
+
+Nice and easy :)
+
+## Upgrading
+
+If you want to contribute and help out keeping this gem in sync with the latest release of Twitter Bootstrap, you should keep in mind that all mixins are prefixed with `ctb-`.
+With this prefixed we can't run into problems where the converted less-mixins conflict with native Compass names, parameters, ...
+
+There is a Rake-task that will help you to fetch all recent changes from the Twitter Bootstrap master:
+
+`rake convert`
+
+When that is done
+
+* update the assets
+* replace `$media ` with @media `, `$page ` with @page `, `$-ms-keyframes ` with @-ms-keyframes `, `$-o-keyframes ` with @-o-keyframes `, see https://github.com/vwall/compass-twitter-bootstrap/issues/100.
+* replace `ctb-reset-filter(` with `ctb-gradient-reset-filter(`
+* replace `ctb-span(` with `ctb-core-span(`
+* replace `@include ctb-opacity(100)` with `@include ctb-opacity(1)` as seen in https://github.com/vwall/compass-twitter-bootstrap/commit/b80ea1bc20f031a4abad7906ba14590bccadc74e
+* search for `(e(` and fix it
+* search for `&-` and fix it, see https://github.com/vwall/compass-twitter-bootstrap/issues/101
+* search fo `.navbar-fixed-bottom .container {` and fix it
+* readd the imports into _buttons.scss as seen in https://github.com/vwall/compass-twitter-bootstrap/commit/18d2d061235d5477c3a30beab9f02c7e9387f0c4
+
+@remark: if some Ruby-genius wants to automate this feel free
+
 
 ## TWITTER BOOTSTRAP
 

data/build/convert.rb

@@ -7,7 +7,7 @@ class Convert
     get_less_files.each do |name|
       unless ['bootstrap.less', 'responsive.less'].include?(name)
         file = open_git_file("https://raw.github.com/twitter/bootstrap/master/less/#{name}")
-        file = convert(file) 
+        file = convert(file)
 
         if name == 'progress-bars.less'
           file = fix_progress_bar(file)
@@ -23,7 +23,7 @@ class Convert
 
     self.create_sass_files
   end
-  
+
   def create_sass_files
     puts 'Creating sass files for testing'
 
@@ -57,11 +57,12 @@ private
   def get_less_files
     files = open("https://api.github.com/repos/twitter/bootstrap/git/trees/#{get_tree_sha}").read
     files = JSON.parse files
-    files['tree'].map{|f| f['path']}
+    files['tree'].select{|f| f['type'] == 'blob' }.map{|f| f['path'] }
   end
 
 
   def convert(file)
+    file = replace_interpolation(file)
     file = replace_vars(file)
     file = replace_fonts(file)
     file = replace_font_family(file)
@@ -72,6 +73,8 @@ private
     file = replace_spin(file)
     file = replace_opacity(file)
     file = replace_image_urls(file)
+    file = replace_image_paths(file)
+    file = replace_escaping(file)
 
     file
   end
@@ -88,6 +91,10 @@ private
     puts "Converted #{name}\n"
   end
 
+  def replace_interpolation(less)
+    less.gsub(/@{([^}]+)}/, '#{$\1}')
+  end
+
   def replace_vars(less)
     less.gsub(/@/, '$')
   end
@@ -99,15 +106,15 @@ private
   end
 
   def replace_fonts(less)
-    less.gsub(/#font \> \.([\w-]+)/, '@include font-\1')
+    less.gsub(/#font \> \.([\w-]+)/, '@include ctb-font-\1')
   end
 
   def replace_font_family(less)
-    less.gsub(/#font \> #family \> \.([\w-]+)/, '@include font-family-\1')
+    less.gsub(/#font \> #family \> \.([\w-]+)/, '@include ctb-font-family-\1')
   end
 
   def replace_grads(less)
-    less.gsub(/#gradient \> \.([\w-]+)/, '@include gradient-\1')
+    less.gsub(/#gradient \> \.([\w-]+)/, '@include ctb-gradient-\1')
   end
 
   def replace_mixins(less)
@@ -115,11 +122,11 @@ private
   end
 
   def replace_includes(less)
-    less.gsub(/\.([\w-]*)(\(.*\));?/, '@include \1\2;')
+    less.gsub(/\.([\w-]*)(\(.*\));?/, '@include ctb-\1\2;')
   end
 
   def replace_less_extend(less)
-    less.gsub(/\#(\w+) \> \.([\w-]*)(\(.*\));?/, '@include \1-\2\3;')
+    less.gsub(/\#(\w+) \> \.([\w-]*)(\(.*\));?/, '@include ctb-\1-\2\3;')
   end
 
   def replace_spin(less)
@@ -127,11 +134,20 @@ private
   end
 
   def replace_opacity(scss)
-    scss.gsub(/\@include opacity\((\d+)\)/) {|s| "@include opacity(#{$1.to_f / 100})"}
+    scss.gsub(/\@include opacity\((\d+)\)/) {|s| "@include ctb-opacity(#{$1.to_f / 100})"}
   end
 
   def replace_image_urls(less)
-    less.gsub(/background-image: url\((.*)\);/) {|s| "background-image: image-url(\"#{$1.gsub('../img/','')}\");" }
+    less.gsub(/background-image: url\("?(.*?)"?\);/) {|s| "background-image: image-url(\"#{$1}\");" }
+  end
+
+  def replace_image_paths(less)
+    less.gsub('../img/', '')
+  end
+
+  def replace_escaping(less)
+    less = less.gsub(/\~"([^"]+)"/, '#{\1}') # Get rid of ~ escape
+    less.gsub(/(\W)e\("([^\)]+)"\)/) {|s| "#{$1 if $1 != /\s/}#{$2}"} # Get rid of e escape
   end
 
   def insert_default_vars(scss)
@@ -145,4 +161,4 @@ private
 
 end
 
-Convert.new.process
+Convert.new.process

data/lib/compass_twitter_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module CompassTwitterBootstrap
-  VERSION = "2.0.3"
+  VERSION = "2.2.2"
 end

data/stylesheets/_compass_twitter_bootstrap.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v2.0.3
+ * Bootstrap v2.1.0
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
@@ -56,6 +56,7 @@
 
 // Components: Misc
 @import "compass_twitter_bootstrap/thumbnails";
+@import "compass_twitter_bootstrap/media";
 @import "compass_twitter_bootstrap/labels-badges";
 @import "compass_twitter_bootstrap/progress-bars";
 @import "compass_twitter_bootstrap/accordion";

data/stylesheets/_compass_twitter_bootstrap_awesome.scss

@@ -1,5 +1,5 @@
 /*
- * Bootstrap v2.0.3
+ * Bootstrap v2.1.0
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0

data/stylesheets/_compass_twitter_bootstrap_responsive.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Responsive v2.0.3
+ * Bootstrap Responsive v2.1.0
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0

data/stylesheets/compass_twitter_bootstrap/_accordion.scss

@@ -1,5 +1,6 @@
-// ACCORDION
-// ---------
+//
+// Accordion
+// --------------------------------------------------
 
 
 // Parent container
@@ -11,7 +12,7 @@
 .accordion-group {
   margin-bottom: 2px;
   border: 1px solid #e5e5e5;
-  @include bootstrap-border-radius(4px);
+  @include ctb-border-radius($baseBorderRadius);
 }
 .accordion-heading {
   border-bottom: 0;

data/stylesheets/compass_twitter_bootstrap/_alerts.scss

@@ -1,18 +1,26 @@
-// ALERT STYLES
-// ------------
+//
+// Alerts
+// --------------------------------------------------
+
+
+// Base styles
+// -------------------------
 
-// Base alert styles
 .alert {
   padding: 8px 35px 8px 14px;
   margin-bottom: $baseLineHeight;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   background-color: $warningBackground;
   border: 1px solid $warningBorder;
-  @include bootstrap-border-radius(4px);
+  @include ctb-border-radius($baseBorderRadius);
+}
+.alert,
+.alert h4 {
+  // Specified for the h4 to prevent conflicts of changing $headingsColor
   color: $warningText;
 }
-.alert-heading {
-  color: inherit;
+.alert h4 {
+  margin: 0;
 }
 
 // Adjust close link position
@@ -20,15 +28,19 @@
   position: relative;
   top: -2px;
   right: -21px;
-  line-height: 18px;
+  line-height: $baseLineHeight;
 }
 
+
 // Alternate styles
-// ----------------
+// -------------------------
 
 .alert-success {
   background-color: $successBackground;
-  border-color: $successBorder;  
+  border-color: $successBorder;
+  color: $successText;
+}
+.alert-success h4 {
   color: $successText;
 }
 .alert-danger,
@@ -37,14 +49,23 @@
   border-color: $errorBorder;
   color: $errorText;
 }
+.alert-danger h4,
+.alert-error h4 {
+  color: $errorText;
+}
 .alert-info {
   background-color: $infoBackground;
   border-color: $infoBorder;
   color: $infoText;
 }
+.alert-info h4 {
+  color: $infoText;
+}
+
 
 // Block alerts
-// ------------------------
+// -------------------------
+
 .alert-block {
   padding-top: 14px;
   padding-bottom: 14px;

data/stylesheets/compass_twitter_bootstrap/_breadcrumbs.scss

@@ -1,24 +1,24 @@
-// BREADCRUMBS
-// -----------
+//
+// Breadcrumbs
+// --------------------------------------------------
+
 
 .breadcrumb {
-  padding: 7px 14px;
+  padding: 8px 15px;
   margin: 0 0 $baseLineHeight;
   list-style: none;
-  @include bootstrap-gradient-vertical($white, #f5f5f5);
-  border: 1px solid #ddd;
-  @include bootstrap-border-radius(3px);
-  @include bootstrap-box-shadow(inset 0 1px 0 $white);
-  li {
+  background-color: #f5f5f5;
+  @include ctb-border-radius($baseBorderRadius);
+  > li {
     display: inline-block;
-    @include bootstrap-ie7-inline-block();
+    @include ctb-ie7-inline-block();
     text-shadow: 0 1px 0 $white;
+    > .divider {
+      padding: 0 5px;
+      color: #ccc;
+    }
   }
-  .divider {
-    padding: 0 5px;
+  > .active {
     color: $grayLight;
   }
-  .active a {
-    color: $grayDark;
-  }
 }

data/stylesheets/compass_twitter_bootstrap/_button-groups.scss

@@ -1,12 +1,17 @@
-// BUTTON GROUPS
-// -------------
+//
+// Button groups
+// --------------------------------------------------
 
 
 // Make the div behave like a button
 .btn-group {
   position: relative;
-  @include bootstrap-clearfix(); // clears the floated buttons
-  @include bootstrap-ie7-restore-left-whitespace();
+  display: inline-block;
+  @include ctb-ie7-inline-block();
+  font-size: 0; // remove as part 1 of font-size inline-block hack
+  vertical-align: middle; // match .btn alignment given font-size hack above
+  white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
+  @include ctb-ie7-restore-left-whitespace();
 }
 
 // Space out series of button groups
@@ -16,59 +21,63 @@
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
+  font-size: 0; // Hack to remove whitespace that results from using inline-block
   margin-top: $baseLineHeight / 2;
   margin-bottom: $baseLineHeight / 2;
-  .btn-group {
-    display: inline-block;
-    @include bootstrap-ie7-inline-block();
+  > .btn + .btn,
+  > .btn-group + .btn,
+  > .btn + .btn-group {
+    margin-left: 5px;
   }
 }
 
 // Float them, remove border radius, then re-add to first and last elements
 .btn-group > .btn {
   position: relative;
-  float: left;
+  @include ctb-border-radius(0);
+}
+.btn-group > .btn + .btn {
   margin-left: -1px;
-  @include bootstrap-border-radius(0);
 }
+.btn-group > .btn,
+.btn-group > .dropdown-menu,
+.btn-group > .popover {
+  font-size: $baseFontSize; // redeclare as part 2 of font-size inline-block hack
+}
+
+// Reset fonts for other sizes
+.btn-group > .btn-mini {
+  font-size: $fontSizeMini;
+}
+.btn-group > .btn-small {
+  font-size: $fontSizeSmall;
+}
+.btn-group > .btn-large {
+  font-size: $fontSizeLarge;
+}
+
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
 .btn-group > .btn:first-child {
   margin-left: 0;
-     -webkit-border-top-left-radius: 4px;
-         -moz-border-radius-topleft: 4px;
-             border-top-left-radius: 4px;
-  -webkit-border-bottom-left-radius: 4px;
-      -moz-border-radius-bottomleft: 4px;
-          border-bottom-left-radius: 4px;
+  @include ctb-border-top-left-radius($baseBorderRadius);
+  @include ctb-border-bottom-left-radius($baseBorderRadius);
 }
 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
 .btn-group > .btn:last-child,
 .btn-group > .dropdown-toggle {
-     -webkit-border-top-right-radius: 4px;
-         -moz-border-radius-topright: 4px;
-             border-top-right-radius: 4px;
-  -webkit-border-bottom-right-radius: 4px;
-      -moz-border-radius-bottomright: 4px;
-          border-bottom-right-radius: 4px;
+  @include ctb-border-top-right-radius($baseBorderRadius);
+  @include ctb-border-bottom-right-radius($baseBorderRadius);
 }
 // Reset corners for large buttons
 .btn-group > .btn.large:first-child {
   margin-left: 0;
-     -webkit-border-top-left-radius: 6px;
-         -moz-border-radius-topleft: 6px;
-             border-top-left-radius: 6px;
-  -webkit-border-bottom-left-radius: 6px;
-      -moz-border-radius-bottomleft: 6px;
-          border-bottom-left-radius: 6px;
+  @include ctb-border-top-left-radius($borderRadiusLarge);
+  @include ctb-border-bottom-left-radius($borderRadiusLarge);
 }
 .btn-group > .btn.large:last-child,
 .btn-group > .large.dropdown-toggle {
-     -webkit-border-top-right-radius: 6px;
-         -moz-border-radius-topright: 6px;
-             border-top-right-radius: 6px;
-  -webkit-border-bottom-right-radius: 6px;
-      -moz-border-radius-bottomright: 6px;
-          border-bottom-right-radius: 6px;
+  @include ctb-border-top-right-radius($borderRadiusLarge);
+  @include ctb-border-bottom-right-radius($borderRadiusLarge);
 }
 
 // On hover/focus/active, bring the proper btn to front
@@ -91,24 +100,28 @@
 // ----------------------
 
 // Give the line between buttons some depth
-.btn-group > .dropdown-toggle {
+.btn-group > .btn + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px;
-  @include bootstrap-box-shadow("inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
-  *padding-top: 4px;
-  *padding-bottom: 4px;
+  @include ctb-box-shadow(#{inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
+  *padding-top: 5px;
+  *padding-bottom: 5px;
 }
-.btn-group > .btn-mini.dropdown-toggle {
+.btn-group > .btn-mini + .dropdown-toggle {
   padding-left: 5px;
   padding-right: 5px;
+  *padding-top: 2px;
+  *padding-bottom: 2px;
 }
-.btn-group > .btn-small.dropdown-toggle {
-  *padding-top: 4px;
+.btn-group > .btn-small + .dropdown-toggle {
+  *padding-top: 5px;
   *padding-bottom: 4px;
 }
-.btn-group > .btn-large.dropdown-toggle {
+.btn-group > .btn-large + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px;
+  *padding-top: 7px;
+  *padding-bottom: 7px;
 }
 
 .btn-group.open {
@@ -117,7 +130,7 @@
   // Remove the gradient and set the same inset shadow as the :active state
   .dropdown-toggle {
     background-image: none;
-    @include bootstrap-box-shadow("inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+    @include ctb-box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
   }
 
   // Keep the hover's background when dropdown is open
@@ -147,30 +160,23 @@
 
 // Reposition the caret
 .btn .caret {
-  margin-top: 7px;
+  margin-top: 8px;
   margin-left: 0;
 }
-.btn:hover .caret,
-.open.btn-group .caret {
-  @include bootstrap-opacity(100);
-}
 // Carets in other button sizes
-.btn-mini .caret {
-  margin-top: 5px;
-}
-.btn-small .caret {
+.btn-mini .caret,
+.btn-small .caret,
+.btn-large .caret {
   margin-top: 6px;
 }
 .btn-large .caret {
-  margin-top: 6px;
   border-left-width:  5px;
   border-right-width: 5px;
   border-top-width:   5px;
 }
 // Upside down carets for .dropup
 .dropup .btn-large .caret {
-  border-bottom: 5px solid $black;
-  border-top: 0;
+  border-bottom-width: 5px;
 }
 
 
@@ -185,7 +191,37 @@
   .caret {
     border-top-color: $white;
     border-bottom-color: $white;
-    @include bootstrap-opacity(75);
   }
 }
 
+
+
+// Vertical button groups
+// ----------------------
+
+.btn-group-vertical {
+  display: inline-block; // makes buttons only take up the width they need
+  @include ctb-ie7-inline-block();
+}
+.btn-group-vertical > .btn {
+  display: block;
+  float: none;
+  max-width: 100%;
+  @include ctb-border-radius(0);
+}
+.btn-group-vertical > .btn + .btn {
+  margin-left: 0;
+  margin-top: -1px;
+}
+.btn-group-vertical > .btn:first-child {
+  @include ctb-border-radius($baseBorderRadius $baseBorderRadius 0 0);
+}
+.btn-group-vertical > .btn:last-child {
+  @include ctb-border-radius(0 0 $baseBorderRadius $baseBorderRadius);
+}
+.btn-group-vertical > .btn-large:first-child {
+  @include ctb-border-radius($borderRadiusLarge $borderRadiusLarge 0 0);
+}
+.btn-group-vertical > .btn-large:last-child {
+  @include ctb-border-radius(0 0 $borderRadiusLarge $borderRadiusLarge);
+}