bootstrapped 0.0.4 → 0.0.6

data/lib/bootstrapped/engine.rb

@@ -1,5 +1,7 @@
 module Bootstrapped
   class Engine < ::Rails::Engine
-    
+    initializer 'bootstrapped-less.setup', :after => 'less-rails.after.load_config_initializers', :group => :all do |app|
+      app.config.less.paths << File.join(app.root, 'app', 'assets', 'stylesheets','bootstrap','less')
+    end
   end
 end

data/lib/bootstrapped/version.rb

@@ -1,3 +1,3 @@
 module Bootstrapped
-  VERSION = "0.0.4"
+  VERSION = "0.0.6"
 end

data/lib/generators/bootstrapped/install/install_generator.rb

@@ -0,0 +1,26 @@
+require 'generators/bootstrapped'
+
+module Bootstrapped
+  module Generators
+    class InstallGenerator < Base
+      argument :less, :type => :string, :default => true, :banner => 'less'
+      
+      def self.source_root
+        @source_root ||= File.expand_path("../../../../../vendor/framework", __FILE__)
+      end
+      
+      def copy_less_files
+        copy_file 'bootstrap.less', "app/assets/stylesheets/bootstrap/less/bootstrap.less"
+        copy_file 'forms.less', "app/assets/stylesheets/bootstrap/less/forms.less"
+        copy_file 'mixins.less', "app/assets/stylesheets/bootstrap/less/mixins.less"
+        copy_file 'patterns.less', "app/assets/stylesheets/bootstrap/less/patterns.less"
+        copy_file 'reset.less', "app/assets/stylesheets/bootstrap/less/reset.less"
+        copy_file 'scaffolding.less', "app/assets/stylesheets/bootstrap/less/scaffolding.less"
+        copy_file 'tables.less', "app/assets/stylesheets/bootstrap/less/tables.less"
+        copy_file 'type.less', "app/assets/stylesheets/bootstrap/less/type.less"
+        copy_file 'variables.less', "app/assets/stylesheets/bootstrap/less/variables.less"
+      end
+
+    end
+  end
+end

data/{vendor/assets/stylesheets/bootstrap.css.less → lib/generators/bootstrapped/install/templates/bootstrap.less}

@@ -10,10 +10,10 @@
  */
 
 // CSS Reset
-@import "reset.less";
+@import "bootstrap/less/reset.less";
 
 // Core variables and mixins
-@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+@import "variables.css.less"; // Modify this for custom colors, font-sizes, etc
 @import "mixins.less";
 
 // Grid system and page structure

data/{vendor/assets/stylesheets/forms.css.less → lib/generators/bootstrapped/install/templates/forms.less}

@@ -77,7 +77,12 @@ select,
   .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;
-  .border-radius(4px);
-  @error-text: desaturate(lighten(@red, 25%), 25%);
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// Mixin for form field states
+.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;
-    .box-shadow(0 0 3px rgba(171,41,32,.25));
+    color: @textColor;
+    border-color: @borderColor;
     &:focus {
-      border-color: darken(@error-text, 10%);
-      .box-shadow(0 0 6px rgba(171,41,32,.5));
+      border-color: darken(@borderColor, 10%);
+      .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 {
+  .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
+}
+// Warning
+form .clearfix.warning {
+  .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
+}
+// Success
+form .clearfix.success {
+  .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 {
 .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     { .formColumns(1); }
   &.span2     { .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/{vendor/assets/stylesheets/mixins.css.less → lib/generators/bootstrapped/install/templates/mixins.less}

@@ -1,4 +1,4 @@
-/* Variables.less
+/* Mixins.less
  * Snippets of reusable CSS to develop faster and keep code readable
  * ----------------------------------------------------------------- */
 
@@ -6,32 +6,31 @@
 // Clearfix for clearing floats like a boss h5bp.com/q
 .clearfix() {
   zoom: 1;
-	&:before,
+  &:before,
   &:after {
     display: table;
     content: "";
     zoom: 1;
-    *display: inline;
-	}
-	&:after {
+  }
+  &:after {
     clear: both;
-	}
+  }
 }
 
 // Center-align a block level element
 .center-block() {
-	display: block;
+  display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
 // Sizing shortcuts
 .size(@height: 5px, @width: 5px) {
-	height: @height;
-	width: @width;
+  height: @height;
+  width: @width;
 }
 .square(@size: 5px) {
-	.size(@size, @size);
+  .size(@size, @size);
 }
 
 // Input placeholder text
@@ -112,39 +111,45 @@
 
 // Transitions
 .transition(@transition) {
-	-webkit-transition: @transition;
-	   -moz-transition: @transition;
- 	    -ms-transition: @transition;
-	     -o-transition: @transition;
-	        transition: @transition;
+     -webkit-transition: @transition;
+        -moz-transition: @transition;
+         -ms-transition: @transition;
+          -o-transition: @transition;
+             transition: @transition;
 }
 
 // Background clipping
 .background-clip(@clip) {
-	-webkit-background-clip: @clip;
-	   -moz-background-clip: @clip;
-	        background-clip: @clip;
+  -webkit-background-clip: @clip;
+     -moz-background-clip: @clip;
+          background-clip: @clip;
 }
 
 // CSS3 Content Columns
 .content-columns(@columnCount, @columnGap: 20px) {
-	-webkit-column-count: @columnCount;
-	   -moz-column-count: @columnCount;
+  -webkit-column-count: @columnCount;
+     -moz-column-count: @columnCount;
           column-count: @columnCount;
   -webkit-column-gap: @columnGap;
-	   -moz-column-gap: @columnGap;
+     -moz-column-gap: @columnGap;
           column-gap: @columnGap;
 }
 
+// Make any element resizable for prototyping
+.resizable(@direction: both) {
+  resize: @direction; // Options are horizontal, vertical, both
+  overflow: auto; // Safari fix
+}
+
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 #translucent {
   .background(@color: @white, @alpha: 1) {
     background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
-	}
-	.border(@color: @white, @alpha: 1) {
-		border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
-		background-clip: padding-box;
-	}
+  }
+  .border(@color: @white, @alpha: 1) {
+    border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+    background-clip: padding-box;
+  }
 }
 
 // Gradient Bar Colors for buttons and allerts
@@ -210,8 +215,8 @@
 
 // Opacity
 .opacity(@opacity: 100) {
-	filter: e(%("alpha(opacity=%d)", @opacity));
-	-khtml-opacity: @opacity / 100;
-	  -moz-opacity: @opacity / 100;
-	       opacity: @opacity / 100;
+  filter: e(%("alpha(opacity=%d)", @opacity));
+  -khtml-opacity: @opacity / 100;
+    -moz-opacity: @opacity / 100;
+         opacity: @opacity / 100;
 }

data/{vendor/assets/stylesheets/patterns.css.less → lib/generators/bootstrapped/install/templates/patterns.less}

@@ -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);
@@ -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 {
       #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;
   .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;
       .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;
     .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;
   #gradient > .vertical(#ffffff, #f5f5f5);
   border: 1px solid #ddd;
   .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,7 +580,8 @@ footer {
   .transition(.1s linear all);
 
   // Active and Disabled states
-  &:active {
+  &.active,
+  :active {
     @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
     .box-shadow(@shadow);
   }
@@ -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);
-  .opacity(20);
+  .opacity(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 {
   .opacity(80);
 }
 
@@ -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);
@@ -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
 // --------------
@@ -920,8 +974,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;
@@ -964,11 +1018,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;
   .border-radius(3px);
   &.important { background-color: #c43c35; }
   &.warning   { background-color: @orange; }
@@ -981,7 +1036,7 @@ input[type=submit].btn {
 // -----------
 
 .media-grid {
-  margin-left: -20px;
+  margin-left: -@gridGutterWidth;
   margin-bottom: 0;
   .clearfix();
   li {
@@ -990,7 +1045,7 @@ input[type=submit].btn {
   a {
     float: left;
     padding: 4px;
-    margin: 0 0 20px 20px;
+    margin: 0 0 @baseline @gridGutterWidth;
     border: 1px solid #ddd;
     .border-radius(4px);
     .box-shadow(0 1px 1px rgba(0,0,0,.075));