Updated to version 1.4

vwall · Dec 6, 2011 · c5348f2 · c5348f2
1 parent da3ef77
commit c5348f2
Show file tree

Hide file tree

Showing 8 changed files with 317 additions and 167 deletions.
diff --git a/Rakefile b/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
diff --git a/lib/convert.rb → build/convert.rb b/lib/convert.rb → build/convert.rb
@@ -1,10 +1,21 @@
+require 'open-uri'
+
 class Convert
   def process
     less_files.each do |name, file|
       file = open_git_file(file)
       file = convert(file)
       save_file(name, file)
     end
+
+    self.process_mixins
+  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
 
 private
@@ -14,10 +25,10 @@ def less_files
       '_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 +44,14 @@ def convert(file)
   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)
@@ -67,3 +79,5 @@ def replace_spin(less)
   end
 
 end
+
+Convert.new.process
diff --git a/stylesheets/compass_twitter_bootstrap/_forms.scss b/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,13 +112,15 @@ 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 */
 }
 
 // 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;
   }
 }
 

diff --git a/stylesheets/compass_twitter_bootstrap/_mixins.scss b/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