anjlab-bootstrap-rails 3.0.0.0.alpha1 → 3.0.0.rc1

data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_close.scss

@@ -8,13 +8,13 @@
   font-size: ($font-size-base * 1.5);
   font-weight: bold;
   line-height: 1;
-  color: #000;
-  text-shadow: 0 1px 0 rgba(255,255,255,1);
+  color: $close-color;
+  text-shadow: $close-text-shadow;
   @include opacity(.2);
 
   &:hover,
   &:focus {
-    color: #000;
+    color: $close-color;
     text-decoration: none;
     cursor: pointer;
     @include opacity(.5);

data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_code.scss

@@ -6,20 +6,17 @@
 // Inline and block code styles
 code,
 pre {
-  padding: 0 3px 2px;
   font-family: $font-family-monospace;
-  font-size: ($font-size-base - 2);
-  color: $gray-dark;
-  border-radius: 4px;
 }
 
 // Inline code
 code {
   padding: 2px 4px;
   font-size: 90%;
-  color: #c7254e;
-  background-color: #f9f2f4;
+  color: $code-color;
+  background-color: $code-bg;
   white-space: nowrap;
+  border-radius: 4px;
 }
 
 // Blocks of code
@@ -31,11 +28,9 @@ pre {
   line-height: $line-height-base;
   word-break: break-all;
   word-wrap: break-word;
-  white-space: pre;
-  white-space: pre-wrap;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc; // IE8 fallback
-  border: 1px solid rgba(0,0,0,.15);
+  color: $gray-dark;
+  background-color: $pre-bg;
+  border: 1px solid $pre-border-color;
   border-radius: $border-radius-base;
 
   // Make prettyprint styles more spaced out for readability
@@ -47,7 +42,6 @@ pre {
   code {
     padding: 0;
     color: inherit;
-    white-space: pre;
     white-space: pre-wrap;
     background-color: transparent;
     border: 0;

data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_component-animations.scss

@@ -2,6 +2,10 @@
 // Component animations
 // --------------------------------------------------
 
+// Heads up!
+//
+// We don't use the `.opacity()` mixin here since it causes a bug with text
+// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552.
 
 .fade {
   opacity: 0;
@@ -12,12 +16,14 @@
 }
 
 .collapse {
+  display: none;
+  &.in {
+    display: block;
+  }
+}
+.collapsing {
   position: relative;
   height: 0;
   overflow: hidden;
   @include transition(height .35s ease);
-
-  &.in {
-    height: auto;
-  }
 }

data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_dropdowns.scss

@@ -11,7 +11,7 @@
   height: 0;
   margin-left: 2px;
   vertical-align: middle;
-  border-top:   4px solid #000;
+  border-top:   4px solid $dropdown-caret-color;
   border-right: 4px solid transparent;
   border-left:  4px solid transparent;
   content: "";
@@ -31,7 +31,7 @@
   margin: 2px 0 0; // override default ul
   list-style: none;
   background-color: $dropdown-bg;
-  border: 1px solid #ccc; // IE8 fallback
+  border: 1px solid $dropdown-fallback-border; // IE8 fallback
   border: 1px solid $dropdown-border;
   border-radius: $border-radius-base;
   @include box-shadow(0 6px 12px rgba(0,0,0,.175));
@@ -45,7 +45,7 @@
 
   // Dividers (basically an hr) within the dropdown
   .divider {
-    @include nav-divider($dropdown-divider-top, $dropdown-divider-bottom);
+    @include nav-divider($dropdown-divider-bg);
   }
 
   // Links within the dropdown menu
@@ -62,42 +62,48 @@
 
 // Hover/Focus state
 // -----------
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus,
-.dropdown-submenu:hover > a,
-.dropdown-submenu:focus > a {
-  text-decoration: none;
-  color: $dropdown-link-hover-color;
-  @include gradient-vertical($dropdown-link-hover-bg, darken($dropdown-link-hover-bg, 5%));
+.dropdown-menu > li > a {
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: $dropdown-link-hover-color;
+    @include gradient-vertical($start-color: $dropdown-link-hover-bg, $end-color: darken($dropdown-link-hover-bg, 5%));
+  }
 }
 
 // Active state
 // ------------
-.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover,
-.dropdown-menu > .active > a:focus {
-  color: $dropdown-link-active-color;
-  text-decoration: none;
-  outline: 0;
-  @include gradient-vertical($dropdown-link-active-bg, darken($dropdown-link-active-bg, 5%));
+.dropdown-menu > .active > a {
+  &,
+  &:hover,
+  &:focus {
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+    outline: 0;
+    @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%));
+  }
 }
 
 // Disabled state
 // --------------
 // Gray out text and ensure the hover/focus state remains gray
-.dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
-  color: $gray-light;
+.dropdown-menu > .disabled > a {
+  &,
+  &:hover,
+  &:focus {
+    color: $gray-light;
+  }
 }
 // Nuke hover/focus effects
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
-  text-decoration: none;
-  background-color: transparent;
-  background-image: none; // Remove CSS gradient
-  @include reset-filter();
-  cursor: default;
+.dropdown-menu > .disabled > a {
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: transparent;
+    background-image: none; // Remove CSS gradient
+    @include reset-filter();
+    cursor: not-allowed;
+  }
 }
 
 // Open state for the dropdown
@@ -114,6 +120,17 @@
   }
 }
 
+// Dropdown section headers
+// ---------------------------
+.dropdown-header {
+  display: block;
+  padding: 3px 20px;
+  font-size: $font-size-small;
+  line-height: $line-height-base;
+  color: $gray-light;
+}
+
+
 
 // Backdrop to catch body clicks on mobile, etc.
 // ---------------------------
@@ -142,7 +159,7 @@
   // Reverse the caret
   .caret {
     border-top: 0;
-    border-bottom: 4px solid #000;
+    border-bottom: 4px solid $dropdown-caret-color;
     content: "";
   }
   // Different positioning for bottom up menu
@@ -152,75 +169,3 @@
     margin-bottom: 1px;
   }
 }
-
-// Sub menus
-// ---------------------------
-.dropdown-submenu {
-  position: relative;
-}
-// Default dropdowns
-.dropdown-submenu > .dropdown-menu {
-  top: 0;
-  left: 100%;
-  margin-top: -6px;
-  margin-left: -1px;
-  border-top-left-radius: 0; // Nuke the closest corner as appropriate
-}
-.dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-}
-
-// Dropups
-.dropup .dropdown-submenu > .dropdown-menu {
-  top: auto;
-  bottom: 0;
-  margin-top: 0;
-  margin-bottom: -2px;
-  border-bottom-left-radius: 0; // Nuke the closest corner as appropriate
-}
-
-// Caret to indicate there is a submenu
-.dropdown-submenu > a:after {
-  display: block;
-  content: " ";
-  float: right;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: darken($dropdown-bg, 20%);
-  margin-top: 5px;
-  margin-right: -10px;
-}
-.dropdown-submenu:hover > a:after {
-  border-left-color: $dropdown-link-hover-color;
-}
-
-// Left aligned submenus
-.dropdown-submenu.pull-left {
-  // Undo the float
-  // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
-  float: none;
-
-  // Positioning the submenu
-  > .dropdown-menu {
-    left: -100%;
-    margin-left: 10px;
-    border-top-right-radius: 0; // Remove the rounded corner here
-  }
-}
-
-// Tweak nav headers
-// ---------------------------
-// Increase padding from 15px to 20px on sides
-.dropdown .dropdown-menu .nav-header {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-// Typeahead
-// ---------------------------
-.typeahead {
-  z-index: 1051;
-}

data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_forms.scss

@@ -3,12 +3,9 @@
 // --------------------------------------------------
 
 
-// Non-controls
-// -------------------------
-
-form {
-  margin: 0;
-}
+// Normalize non-controls
+//
+// Restyle and baseline non-control form elements.
 
 fieldset {
   padding: 0;
@@ -25,7 +22,7 @@ legend {
   line-height: inherit;
   color: $gray-dark;
   border: 0;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid $legend-border-color;
 }
 
 label {
@@ -34,75 +31,14 @@ label {
   font-weight: bold;
 }
 
-// Form controls
-// -------------------------
-
-// Shared size and type resets
-select,
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"] {
-  display: block;
-  min-height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
-  padding: $padding-base-vertical $padding-base-horizontal;
-  font-size: $font-size-base;
-  line-height: $line-height-base;
-  color: $gray;
-  vertical-align: middle;
-  background-color: $input-bg;
-  border: 1px solid $input-border;
-  border-radius: $input-border-radius;
-  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  @include transition((border-color ease-in-out .15s, box-shadow ease-in-out .15s));
-
-  &:focus {
-    border-color: rgba(82,168,236,.8);
-    outline: 0;
-    @include box-shadow((inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)));
-  }
-}
 
-// Reset appearance properties for textual inputs and textarea
-// Can't be on input[type=*] selectors or it's too specific
-input,
-select,
-textarea {
-  width: 100%;
-}
-
-// Reset width of input images, buttons, radios, checkboxes
-input[type="file"],
-input[type="image"],
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-input[type="radio"],
-input[type="checkbox"] {
-  width: auto; // Override of generic input selector
-}
+// Normalize form controls
 
 // Override content-box in Normalize (* isn't specific enough)
 input[type="search"] {
   @include box-sizing(border-box);
 }
 
-// Reset height since textareas have rows
-textarea {
-  height: auto;
-}
-
 // Position radios and checkboxes better
 input[type="radio"],
 input[type="checkbox"] {
@@ -112,10 +48,8 @@ input[type="checkbox"] {
 }
 
 // Set the height of select and file controls to match text inputs
-select,
 input[type="file"] {
-  height: $input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
-  line-height: $input-height-base;
+  display: block;
 }
 
 // Make multiple select elements height not fixed
@@ -124,7 +58,7 @@ select[size] {
   height: auto;
 }
 
-// Fix optgroup Firefox bug per https://github.com/twitter/bootstrap/issues/7611
+// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
 select optgroup {
   font-size: inherit;
   font-style: inherit;
@@ -138,21 +72,101 @@ input[type="checkbox"]:focus {
   @include tab-focus();
 }
 
+// Fix for Chrome number input
+// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
+// See https://github.com/twbs/bootstrap/issues/8350 for more.
+input[type="number"] {
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button  {
+    height: auto;
+  }
+}
 
-// Placeholder
-// -------------------------
 
-// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
-input,
-textarea {
+// Placeholder
+//
+// Placeholder text gets special styles because when browsers invalidate entire
+// lines if it doesn't understand a selector/
+.form-control {
   @include placeholder();
 }
 
 
-// CHECKBOXES & RADIOS
-// -------------------
+// Common form controls
+//
+// Shared size and type resets for form controls. Apply `.form-control` to any
+// of the following form controls:
+//
+// select
+// textarea
+// input[type="text"]
+// input[type="password"]
+// input[type="datetime"]
+// input[type="datetime-local"]
+// input[type="date"]
+// input[type="month"]
+// input[type="time"]
+// input[type="week"]
+// input[type="number"]
+// input[type="email"]
+// input[type="url"]
+// input[type="search"]
+// input[type="tel"]
+// input[type="color"]
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: $padding-base-vertical $padding-base-horizontal;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  color: $gray;
+  vertical-align: middle;
+  background-color: $input-bg;
+  border: 1px solid $input-border;
+  border-radius: $input-border-radius;
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  @include transition((border-color ease-in-out .15s, box-shadow ease-in-out .15s));
+
+  &:focus {
+    border-color: rgba(82,168,236,.8);
+    outline: 0;
+    @include box-shadow((inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)));
+  }
+}
+
+// Disabled and read-only inputs
+// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
+//   disabled if the fieldset is disabled. Due to implementation difficulty,
+//   we don't honor that edge case; we style them as disabled anyway.
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+  cursor: not-allowed;
+  background-color: $input-bg-disabled;
+}
+
+// Reset height for `textarea`s
+textarea.form-control {
+  height: auto;
+}
+
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
 
-// Indent the labels to position radios/checkboxes as hanging
 .radio,
 .checkbox {
   display: block;
@@ -180,19 +194,10 @@ textarea {
   margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
 }
 
-/*
-// Move the options list down to align with labels
-.controls > .radio:first-child,
-.controls > .checkbox:first-child {
-  padding-top: 5px; // has to be padding because margin collaspes
-}
-*/
-
 // Radios and checkboxes on same line
 .radio-inline,
 .checkbox-inline {
   display: inline-block;
-//  padding-top: 5px;
   padding-left: 20px;
   margin-bottom: 0;
   vertical-align: middle;
@@ -207,104 +212,60 @@ textarea {
 
 
 
-// INPUT SIZES
-// -----------
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
 
-select,
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"] {
+.form-control {
   &.input-large {
+    height: $input-height-large;
     padding: $padding-large-vertical $padding-large-horizontal;
     font-size: $font-size-large;
     border-radius: $border-radius-large;
   }
   &.input-small {
-    min-height: $input-height-small;
+    height: $input-height-small;
     padding: $padding-small-vertical $padding-small-horizontal;
     font-size: $font-size-small;
     border-radius: $border-radius-small;
   }
 }
-
-
-// DISABLED STATE
-// --------------
-
-// Disabled and read-only inputs
-// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
-//   disabled if the fieldset is disabled. Due to implementation difficulty,
-//   we don't honor that edge case; we style them as disabled anyway.
-input,
-select,
-textarea {
-  &[disabled],
-  &[readonly],
-  fieldset[disabled] & {
-    cursor: not-allowed;
-    background-color: $input-bg-disabled;
+select {
+  &.input-large {
+    height: $input-height-large;
+    line-height: $input-height-large;
   }
-}
-// Explicitly reset the colors here
-input[type="radio"],
-input[type="checkbox"] {
-  &[disabled],
-  &[readonly],
-  fieldset[disabled] & {
-    background-color: transparent;
+  &.input-small {
+    height: $input-height-small;
+    line-height: $input-height-small;
   }
 }
 
 
-
-
-// FORM FIELD FEEDBACK STATES
-// --------------------------
+// Form control feedback states
+//
+// Apply contextual and semantic states to individual form controls.
 
 // Warning
 .has-warning {
-  @include form-field-validation($state-warning-text, $state-warning-text, $state-warning-bg);
+  @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
 }
 // Error
 .has-error {
-  @include form-field-validation($state-danger-text, $state-danger-text, $state-danger-bg);
+  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
 }
 // Success
 .has-success {
-  @include form-field-validation($state-success-text, $state-success-text, $state-success-bg);
+  @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
 }
 
-// HTML5 invalid states
-// Shares styles with the .control-group.error above
-input:focus:invalid,
-textarea:focus:invalid,
-select:focus:invalid {
-  color: #b94a48;
-  border-color: #ee5f5b;
-  &:focus {
-    border-color: darken(#ee5f5b, 10%);
-    $shadow: 0 0 6px lighten(#ee5f5b, 20%);
-    @include box-shadow($shadow);
-  }
-}
-
-
-
 
-// HELP TEXT
-// ---------
+// Help text
+//
+// Apply to any element you wish to create light text for placement immediately
+// below a form control. Use for general help, formatting, or instructional text.
 
 .help-block {
   display: block; // account for any element using help-block
@@ -322,6 +283,7 @@ select:focus:invalid {
 // -------------------------
 .input-group {
   display: table;
+  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
 
   // Undo padding and float of grid classes
   &.col {
@@ -330,8 +292,7 @@ select:focus:invalid {
     padding-right: 0;
   }
 
-  input,
-  select {
+  .form-control {
     width: 100%;
     margin-bottom: 0;
   }
@@ -341,7 +302,7 @@ select:focus:invalid {
 // -------------------------
 .input-group-addon,
 .input-group-btn,
-.input-group input {
+.input-group .form-control {
   display: table-cell;
 
   &:not(:first-child):not(:last-child) {
@@ -352,6 +313,7 @@ select:focus:invalid {
 .input-group-addon,
 .input-group-btn {
   width: 1%;
+  white-space: nowrap;
   vertical-align: middle; // Match the inputs
 }
 
@@ -359,14 +321,13 @@ select:focus:invalid {
 // -------------------------
 .input-group-addon {
   @include box-sizing(border-box);
-  padding: 6px 8px;
+  padding: $padding-base-vertical $padding-base-horizontal;
   font-size: $font-size-base;
   font-weight: normal;
   line-height: $line-height-base;
   text-align: center;
-  text-shadow: 0 1px 0 #fff;
   background-color: $gray-lighter;
-  border: 1px solid #ccc;
+  border: 1px solid $input-group-addon-border-color;
   border-radius: $border-radius-base;
 
   &.input-small {
@@ -382,7 +343,7 @@ select:focus:invalid {
 }
 
 // Reset rounded corners
-.input-group input:first-child,
+.input-group .form-control:first-child,
 .input-group-addon:first-child,
 .input-group-btn:first-child > .btn,
 .input-group-btn:first-child > .dropdown-toggle,
@@ -392,7 +353,7 @@ select:focus:invalid {
 .input-group-addon:first-child {
   border-right: 0;
 }
-.input-group input:last-child,
+.input-group .form-control:last-child,
 .input-group-addon:last-child,
 .input-group-btn:last-child > .btn,
 .input-group-btn:last-child > .dropdown-toggle,
@@ -411,9 +372,9 @@ select:focus:invalid {
 }
 .input-group-btn > .btn {
   position: relative;
-  float: left; // Collapse white-space
+  // Jankily prevent input button groups from wrapping
   + .btn {
-    margin-left: -1px;
+    margin-left: -4px;
   }
   // Bring the "active" button to the front
   &:hover,
@@ -427,9 +388,7 @@ select:focus:invalid {
 // --------------------------------------------------
 
 @mixin form-inline {
-  input,
-  select,
-  textarea,
+  .form-control,
   .radio,
   .checkbox {
     display: inline-block;
@@ -447,17 +406,18 @@ select:focus:invalid {
 // --------------------------------------------------
 // Horizontal forms are built on grid classes.
 
+.form-horizontal .control-label {
+  padding-top: 6px;
+}
+
 .form-horizontal {
-  .row + .row {
-    margin-top: 15px;
-  }
-  .control-label {
-    padding-top: 6px;
+  .form-group {
+    @include make-row();
   }
 }
 
-// Only right aline form labels here when the columns stop stacking
-@media (min-width: 768px) {
+// Only right align form labels here when the columns stop stacking
+@media (min-width: $screen-tablet) {
   .form-horizontal .control-label {
     text-align: right;
   }