compass_twitter_bootstrap 0.1.7 → 0.1.8

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Overview
 
+## 0.1.8
+* Upgraded to twitter bootstrap version 1.4
+* Add Javascript files to vendors directory (thanks to tmaier)
+* Add Rails engine to tell Rails to look into vendor/assets (tmaier)
+* rails 3.1.1 plugin install support (tjgfernandes)
+
+
+## 0.1.7
+ Compass opacity fix (thanks to dnedbaylo)
+
 ## 0.1.6
 * Start of a less to scss converter
 * Added change log
@@ -19,4 +29,4 @@ Upgraded to twitter bootstrap version 1.2
 * Updated app name
 
 ## 0.1.1
-initial version
+initial version

data/README.md

@@ -20,7 +20,7 @@ Compass Twitter Bootstrap is Twitter's toolkit converted for Compass.
 
     require 'compass_twitter_bootstrap'
 
-**Import it into your SCSS file
+**Import it into your SCSS file**
 
     @import "compass_twitter_bootstrap";
 
@@ -46,7 +46,29 @@ Compass Twitter Bootstrap is Twitter's toolkit converted for Compass.
 **Import it into your SCSS file**
 
     @import "compass_twitter_bootstrap"
-    
+
+
+## Usage with Rails 3.1.1 (via plugin)
+
+**Install plugin**
+
+    rails plugin install git://github.com/vwall/compass-twitter-bootstrap.git
+
+**Add it to your config/initializers/sass.rb**
+
+  Rails.configuration.sass.tap do |config|
+    ...
+
+    # twitter bootstrap  
+    config.load_paths << Compass::Frameworks['twitter_bootstrap'].stylesheets_directory
+
+    ...
+  end
+
+**Import it into your SCSS file**
+
+    @import "compass_twitter_bootstrap"
+
 
 ## TWITTER BOOTSTRAP
 
@@ -81,4 +103,4 @@ Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
-limitations under the License.
+limitations under the License.

data/Rakefile

@@ -1,2 +1,7 @@
 #!/usr/bin/env rake
 require "bundler/gem_tasks"
+
+desc 'Convert less to scss'
+task :convert do
+  ruby('build/convert.rb')
+end

data/{lib → build}/convert.rb

@@ -1,3 +1,5 @@
+require 'open-uri'
+
 class Convert
   def process
     less_files.each do |name, file|
@@ -5,6 +7,43 @@ class Convert
       file = convert(file)
       save_file(name, file)
     end
+
+    self.fix_opacity
+
+    self.create_sass_files
+  end
+
+  def process_mixins
+    file = 'https://raw.github.com/twitter/bootstrap/master/lib/mixins.less'
+    file = open_git_file(file)
+    file = replace_mixins(file)
+    save_file('_mixins', file)
+  end
+
+  
+  def create_sass_files
+    scss_files = 'stylesheets'
+
+    Dir.glob(scss_files+'/*').each do |dir|
+      file_or_dir = File.open dir
+
+      if File.file? file_or_dir
+        convert_scss(file_or_dir)
+      else
+        Dir.open(file_or_dir).each do |filename|
+          file = File.open("#{file_or_dir.path}/#{filename}")
+          next unless File.fnmatch? '**.scss', file
+          convert_scss(file, 'compass_twitter_bootstrap/')
+        end
+      end
+    end
+  end
+
+  def fix_opacity
+    loc = "stylesheets/compass_twitter_bootstrap/_patterns.scss"
+    scss = File.open(loc, "r").read
+    scss = replace_opacity(scss)
+    save_file('_patterns', scss)
   end
 
 private
@@ -14,10 +53,10 @@ private
       '_reset'       => 'https://raw.github.com/twitter/bootstrap/master/lib/reset.less',
       '_variables'   => 'https://raw.github.com/twitter/bootstrap/master/lib/variables.less',
       '_scaffolding' => 'https://raw.github.com/twitter/bootstrap/master/lib/scaffolding.less',
-      '_type'        => 'https://raw.github.com/twitter/bootstrap/1.3-wip/lib/type.less',
+      '_type'        => 'https://raw.github.com/twitter/bootstrap/master/lib/type.less',
       '_forms'       => 'https://raw.github.com/twitter/bootstrap/master/lib/forms.less',
       '_tables'      => 'https://raw.github.com/twitter/bootstrap/master/lib/tables.less',
-      '_patterns'    => 'https://raw.github.com/twitter/bootstrap/1.3-wip/lib/patterns.less'
+      '_patterns'    => 'https://raw.github.com/twitter/bootstrap/master/lib/patterns.less'
     }
   end
 
@@ -33,13 +72,14 @@ private
   end
 
   def open_git_file(file)
-    URI.parse(file).read
+    open(file).read
   end
 
   def save_file(name, content)
-    f = File.new("#{name}.scss", "w")
+    f = File.open("stylesheets/compass_twitter_bootstrap/#{name}.scss", "w+")
     f.write(content)
     f.close
+    puts "Converted#{name}\n"
   end
 
   def replace_vars(less)
@@ -66,4 +106,15 @@ private
     less.gsub(/spin/, 'adjust-hue')
   end
 
+  def replace_opacity(scss)
+    scss.gsub(/\@include opacity\((\d+)\)/) {|s| "@include opacity(#{$1.to_f / 100})"}
+  end
+
+  def convert_scss(file, folder='')
+    sass_files = 'stylesheets_sass'
+    system("sass-convert #{file.path} #{sass_files}/#{folder}#{File.basename(file, 'scss')}sass")
+  end
+
 end
+
+Convert.new.process

data/init.rb

@@ -0,0 +1 @@
+require 'compass_twitter_bootstrap.rb'

data/lib/compass_twitter_bootstrap.rb

@@ -1,4 +1,9 @@
 require "compass_twitter_bootstrap/version"
+
+if ::Rails.version >= "3.1"
+  require 'compass_twitter_bootstrap/engine'
+end
+
 require 'compass'
 Compass::Frameworks.register("twitter_bootstrap", :path => "#{File.dirname(__FILE__)}/..")
 

data/lib/compass_twitter_bootstrap/engine.rb

@@ -0,0 +1,4 @@
+module CompassTwitterBootstrap
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/compass_twitter_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module CompassTwitterBootstrap
-  VERSION = "0.1.7"
+  VERSION = "0.1.8"
 end

data/stylesheets/compass_twitter_bootstrap/_forms.scss

@@ -77,7 +77,12 @@ select,
   @include border-radius(3px);
 }
 
-/* mini reset for non-html5 file types */
+// remove padding from select
+select {
+  padding: initial;
+}
+
+// mini reset for non-html5 file types
 input[type=checkbox],
 input[type=radio] {
   width: auto;
@@ -107,6 +112,7 @@ input[type=submit] {
 select,
 input[type=file] {
   height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
+  *height: auto; // Reset for IE7
   line-height: $baseline * 1.5;
   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
 }
@@ -114,6 +120,7 @@ input[type=file] {
 // Make multiple select elements height not fixed
 select[multiple] {
   height: inherit;
+  background-color: $white; // Fixes Chromium bug of unreadable items
 }
 
 textarea {
@@ -158,36 +165,49 @@ select:focus {
   outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
 }
 
-// Error styles
-form div.clearfix.error {
-  background: lighten($red, 57%);
-  padding: 10px 0;
-  margin: -10px 0 10px;
-  @include border-radius(4px);
-  $error-text: desaturate(lighten($red, 25%), 25%);
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// Mixin for form field states
+@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
+  // Set the text color
   > label,
-  span.help-inline,
-  span.help-block {
-    color: $red;
+  .help-block,
+  .help-inline {
+    color: $textColor;
   }
+  // Style inputs accordingly
   input,
   textarea {
-    border-color: $error-text;
-    @include box-shadow(0 0 3px rgba(171,41,32,.25));
+    color: $textColor;
+    border-color: $borderColor;
     &:focus {
-      border-color: darken($error-text, 10%);
-      @include box-shadow(0 0 6px rgba(171,41,32,.5));
+      border-color: darken($borderColor, 10%);
+      @include box-shadow(0 0 6px lighten($borderColor, 20%));
     }
   }
-  .input-prepend,
-  .input-append {
-    span.add-on {
-      background: lighten($red, 50%);
-      border-color: $error-text;
-      color: darken($error-text, 10%);
-    }
+  // 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;
   }
 }
+// Error
+form .clearfix.error {
+  @include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
+}
+// Warning
+form .clearfix.warning {
+  @include formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
+}
+// Success
+form .clearfix.success {
+  @include formFieldState(#468847, #57a957, lighten(#57a957, 30%));
+}
+
 
 // Form element sizes
 // TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
@@ -236,12 +256,11 @@ textarea.xxlarge {
 @mixin formColumns($columnSpan: 1) {
   display: inline-block;
   float: none;
-  width: (($gridColumnWidth - 10) * $columnSpan) + (($gridColumnWidth - 10) * ($columnSpan - 1));
+  width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 10;
   margin-left: 0;
 }
 input,
-textarea,
-select {
+textarea {
   // Default columns
   &.span1     { @include formColumns(1); }
   &.span2     { @include formColumns(2); }
@@ -293,9 +312,10 @@ textarea[readonly] {
 }
 
 // Help Text
+// TODO: Do we need to set basefont and baseline here?
 .help-inline,
 .help-block {
-  font-size: $basefont - 2;
+  font-size: $basefont;
   line-height: $baseline;
   color: $grayLight;
 }
@@ -314,15 +334,6 @@ textarea[readonly] {
 // Inline Fields (input fields that appear as inline objects
 .inline-inputs {
   color: $gray;
-  span, input {
-    display: inline-block;
-  }
-  input.mini {
-    width: 60px;
-  }
-  input.small {
-    width: 90px;
-  }
   span {
     padding: 0 2px 0 1px;
   }
@@ -389,6 +400,7 @@ textarea[readonly] {
     float: none;
     width: auto;
     padding: 0;
+    margin-left: 20px;
     line-height: $baseline;
     text-align: left;
     white-space: normal;
@@ -414,6 +426,8 @@ textarea[readonly] {
   input[type=radio],
   input[type=checkbox] {
     margin-bottom: 0;
+    margin-left: -20px;
+    float: left;
   }
 }
 

data/stylesheets/compass_twitter_bootstrap/_mixins.scss

@@ -6,9 +6,11 @@
 // Clearfix for clearing floats like a boss h5bp.com/q
 @mixin clearfix {
   zoom: 1;
-  &:before, &:after {
+  &:before,
+  &:after {
     display: table;
     content: "";
+    zoom: 1;
   }
   &:after {
     clear: both;
@@ -18,7 +20,8 @@
 // Center-align a block level element
 @mixin center-block {
   display: block;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 // Sizing shortcuts

data/stylesheets/compass_twitter_bootstrap/_patterns.scss

@@ -25,7 +25,7 @@
   // Hover and active states
   // h3 for backwards compatibility
   h3 a:hover,
-  .brand a:hover,
+  .brand:hover,
   ul .active > a {
     background-color: #333;
     background-color: rgba(255,255,255,.05);
@@ -65,7 +65,7 @@
     float: left;
     margin: 5px 0 0 0;
     position: relative;
-    @include opacity(1);
+    @include opacity(1.0);
   }
   // Todo: remove from v2.0 when ready, added for legacy
   form.pull-right {
@@ -278,7 +278,8 @@ a.menu:after,
   }
 }
 
-.topbar .dropdown-menu, .dropdown-menu {
+.topbar .dropdown-menu,
+.dropdown-menu {
   // Links within the dropdown menu
   a {
     display: block;
@@ -289,7 +290,8 @@ a.menu:after,
     color: $gray;
     text-shadow: 0 1px 0 $white;
     // Hover state
-    &:hover {
+    &:hover,
+    &.hover {
       @include gradient-vertical(#eeeeee, #dddddd);
       color: $grayDark;
       text-decoration: none;
@@ -318,10 +320,13 @@ a.menu:after,
 }
 
 
-// Tabs and Pills
+// TABS AND PILLS
+// --------------
+
+// Common styles
 .tabs,
 .pills {
-  margin: 0 0 20px;
+  margin: 0 0 $baseline;
   padding: 0;
   list-style: none;
   @include clearfix();
@@ -333,18 +338,18 @@ a.menu:after,
   }
 }
 
-// Basic Tabs
+// Tabs
 .tabs {
-  float: left;
-  width: 100%;
-  border-bottom: 1px solid #ddd;
+  border-color: #ddd;
+  border-style: solid;
+  border-width: 0 0 1px;
   > li {
     position: relative; // For the dropdowns mostly
-    top: 1px;
+    margin-bottom: -1px;
     > a {
       padding: 0 15px;
       margin-right: 2px;
-      line-height: $baseline * 2;
+      line-height: ($baseline * 2) - 2;
       border: 1px solid transparent;
       @include border-radius(4px 4px 0 0);
       &:hover {
@@ -353,13 +358,20 @@ a.menu:after,
         border-color: #eee #eee #ddd;
       }
     }
-    &.active > a {
-      color: $gray;
-      background-color: $white;
-      border: 1px solid #ddd;
-      border-bottom-color: transparent;
-    }
   }
+  // Active state, and it's :hover to override normal :hover
+  .active > a,
+  .active > a:hover {
+    color: $gray;
+    background-color: $white;
+    border: 1px solid #ddd;
+    border-bottom-color: transparent;
+    cursor: default;
+  }
+}
+
+// Dropdowns in tabs
+.tabs {
   // first one for backwards compatibility
   .menu-dropdown,
   .dropdown-menu {
@@ -385,40 +397,47 @@ a.menu:after,
     border-top-color: #555;
   }
 }
-.tab-content {
-  clear: both;
-}
 
-// Basic pill nav
+// Pills
 .pills {
   a {
-      margin: 5px 3px 5px 0;
+    margin: 5px 3px 5px 0;
     padding: 0 15px;
-    text-shadow: 0 1px 1px $white;
     line-height: 30px;
+    text-shadow: 0 1px 1px $white;
     @include border-radius(15px);
     &:hover {
-      background: $linkColorHover;
       color: $white;
       text-decoration: none;
       text-shadow: 0 1px 1px rgba(0,0,0,.25);
+      background-color: $linkColorHover;
     }
   }
   .active a {
-    background: $linkColor;
     color: $white;
     text-shadow: 0 1px 1px rgba(0,0,0,.25);
+    background-color: $linkColor;
   }
 }
 
-.tab-content > *,
-.pill-content > * {
-  display: none;
+// Stacked pills
+.pills-vertical > li {
+  float: none;
 }
 
+// Tabbable areas
+.tab-content,
+.pill-content {
+}
+.tab-content > .tab-pane,
+.pill-content > .pill-pane,
+.tab-content > div,
+.pill-content > div {
+  display: none;
+}
 .tab-content > .active,
 .pill-content > .active {
-  display:block;
+  display: block;
 }
 
 
@@ -426,8 +445,8 @@ a.menu:after,
 // -----------
 
 .breadcrumb {
-  margin: 0 0 $baseline;
   padding: 7px 14px;
+  margin: 0 0 $baseline;
   @include gradient-vertical(#ffffff, #f5f5f5);
   border: 1px solid #ddd;
   @include border-radius(3px);
@@ -440,8 +459,6 @@ a.menu:after,
     padding: 0 5px;
     color: $grayLight;
   }
-  a {
-  }
   .active a {
     color: $grayDark;
   }
@@ -505,6 +522,11 @@ footer {
   &.info:hover {
     color: $white
   }
+  // Sets the close button to the middle of message
+  .close{
+    font-family: Arial, sans-serif;
+    line-height: 18px;
+  }
   // Danger and error appear as red
   &.danger,
   &.error {
@@ -558,6 +580,7 @@ footer {
   @include transition(.1s linear all);
 
   // Active and Disabled states
+  &.active,
   &:active {
     $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
     @include box-shadow($shadow);
@@ -601,8 +624,8 @@ footer {
 button.btn,
 input[type=submit].btn {
   &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
+  	padding: 0;
+  	border: 0;
   }
 }
 
@@ -616,7 +639,7 @@ input[type=submit].btn {
   font-weight: bold;
   line-height: $baseline * .75;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
-  @include opacity(0.2);
+  @include opacity(0.25);
   &:hover {
     color: $black;
     text-decoration: none;
@@ -643,7 +666,20 @@ input[type=submit].btn {
 
   // Adjust close icon
   .close {
-    *margin-top: 3px; /* IE7 spacing */
+    margin-top: 1px;
+    *margin-top: 0; // For IE7
+  }
+
+  // Make links same color as text and stand out more
+  a {
+    font-weight: bold;
+    color: $grayDark;
+  }
+  &.danger p a,
+  &.error p a,
+  &.success p a,
+  &.info p a {
+    color: $white;
   }
 
   // Remove extra margin from content
@@ -700,6 +736,14 @@ input[type=submit].btn {
       background-color: lighten(#6bd0ee, 25%);
       border-color: lighten(#6bd0ee, 20%);
     }
+    // Change link color back
+    &.danger p a,
+    &.error p a,
+    &.success p a,
+    &.info p a {
+      color: $grayDark;
+    }
+
   }
 }
 
@@ -780,7 +824,8 @@ input[type=submit].btn {
   &.fade { opacity: 0; }
 }
 
-.modal-backdrop, .modal-backdrop.fade.in {
+.modal-backdrop,
+.modal-backdrop.fade.in {
   @include opacity(0.8);
 }
 
@@ -790,7 +835,7 @@ input[type=submit].btn {
   left: 50%;
   z-index: 11000;
   width: 560px;
-  margin: -250px 0 0 -250px;
+  margin: -250px 0 0 -280px;
   background-color: $white;
   border: 1px solid #999;
   border: 1px solid rgba(0,0,0,.3);
@@ -800,7 +845,7 @@ input[type=submit].btn {
   @include background-clip(padding-box);
   .close { margin-top: 7px; }
   &.fade {
-    @include transition(e('opacity .3s linear, top .3s ease-out'));
+    @include transition(unquote('opacity .3s linear, top .3s ease-out'));
     top: -25%;
   }
   &.fade.in { top: 50%; }
@@ -812,6 +857,9 @@ input[type=submit].btn {
 .modal-body {
   padding: 15px;
 }
+.modal-body form {
+  margin-bottom: 0;
+}
 .modal-footer {
   background-color: #f5f5f5;
   padding: 14px 15px 15px;
@@ -826,6 +874,12 @@ input[type=submit].btn {
   }
 }
 
+// Fix the stacking of these components when in modals
+.modal .popover,
+.modal .twipsy {
+  z-index: 12000;
+}
+
 
 // POPOVER ARROWS
 // --------------
@@ -918,8 +972,8 @@ input[type=submit].btn {
     height: 0;
   }
   .inner {
-    background-color: $black;
-    background-color: rgba(0,0,0,.8);
+    background: $black;
+    background: rgba(0,0,0,.8);
     padding: 3px;
     overflow: hidden;
     width: 280px;
@@ -962,11 +1016,12 @@ input[type=submit].btn {
 
 .label {
   padding: 1px 3px 2px;
-  background-color: $grayLight;
   font-size: $basefont * .75;
   font-weight: bold;
   color: $white;
   text-transform: uppercase;
+  white-space: nowrap;
+  background-color: $grayLight;
   @include border-radius(3px);
   &.important { background-color: #c43c35; }
   &.warning   { background-color: $orange; }
@@ -979,7 +1034,7 @@ input[type=submit].btn {
 // -----------
 
 .media-grid {
-  margin-left: -20px;
+  margin-left: -$gridGutterWidth;
   margin-bottom: 0;
   @include clearfix();
   li {
@@ -988,7 +1043,7 @@ input[type=submit].btn {
   a {
     float: left;
     padding: 4px;
-    margin: 0 0 20px 20px;
+    margin: 0 0 $baseline $gridGutterWidth;
     border: 1px solid #ddd;
     @include border-radius(4px);
     @include box-shadow(0 1px 1px rgba(0,0,0,.075));