anjlab-bootstrap-rails 3.0.0.rc1 → 3.0.0.rc2

data/app/assets/stylesheets/twitter/bootstrap/_badges.scss

@@ -9,16 +9,16 @@
   min-width: 10px;
   padding: 3px 7px;
   font-size: $font-size-small;
-  font-weight: bold;
+  font-weight: $badge-font-weight;
   color: $badge-color;
-  line-height: 1;
-  vertical-align: middle;
+  line-height: $badge-line-height;
+  vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
   background-color: $badge-bg;
-  border-radius: 10px;
+  border-radius: $badge-border-radius;
 
-  // Empty labels/badges collapse
+  // Empty badges collapse automatically (not available in IE8)
   &:empty {
     display: none;
   }

data/app/assets/stylesheets/twitter/bootstrap/_bootstrap.scss

@@ -28,6 +28,7 @@
 
 // Components: common
 @import "component-animations";
+@import "input-groups";
 @import "dropdowns";
 @import "list-group";
 @import "panels";
@@ -54,7 +55,6 @@
 @import "labels";
 @import "badges";
 @import "progress-bars";
-@import "accordion";
 @import "carousel";
 @import "jumbotron";
 

data/app/assets/stylesheets/twitter/bootstrap/_button-groups.scss

@@ -3,11 +3,32 @@
 // --------------------------------------------------
 
 // Button carets
-.btn .caret {
-  border-top-color: $btn-default-color;
+//
+// Match the button text color to the arrow/caret for indicating dropdown-ness.
+
+.caret {
+  .btn-default & {
+    border-top-color: $btn-default-color;
+  }
+  .btn-primary &,
+  .btn-success &,
+  .btn-warning &,
+  .btn-danger &,
+  .btn-info & {
+    border-top-color: #fff;
+  }
 }
-.dropup .btn .caret {
-  border-bottom-color: $btn-default-color;
+.dropup .caret {
+  .btn-default & {
+    border-bottom-color: $btn-default-color;
+  }
+  .btn-primary &,
+  .btn-success &,
+  .btn-warning &,
+  .btn-danger &,
+  .btn-info & {
+    border-bottom-color: #fff;
+  }
 }
 
 // Make the div behave like a button
@@ -21,15 +42,26 @@
     float: left;
     // Bring the "active" button to the front
     &:hover,
-    &:active {
+    &:focus,
+    &:active,
+    &.active {
       z-index: 2;
     }
+    &:focus {
+      // Remove focus outline when dropdown JS adds it after closing the menu
+      outline: none;
+    }
   }
 }
 
 // Prevent double borders when buttons are next to each other
-.btn-group .btn + .btn {
-  margin-left: -1px;
+.btn-group {
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -1px;
+  }
 }
 
 // Optional: Group multiple button groups together for a toolbar
@@ -90,6 +122,14 @@
 }
 
 
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-xs > .btn { @include btn-xs(); }
+.btn-group-sm > .btn { @include btn-sm(); }
+.btn-group-lg > .btn { @include btn-lg(); }
+
 
 // Split button dropdowns
 // ----------------------
@@ -99,7 +139,7 @@
   padding-left: 8px;
   padding-right: 8px;
 }
-.btn-group > .btn-large + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px;
 }
@@ -116,38 +156,70 @@
   margin-left: 0;
 }
 // Carets in other button sizes
-.btn-large .caret {
-  border-width: 5px;
+.btn-lg .caret {
+  border-width: $caret-width-large;
 }
 // Upside down carets for .dropup
-.dropup .btn-large .caret {
-  border-bottom-width: 5px;
+.dropup .btn-lg .caret {
+  border-bottom-width: $caret-width-large;
 }
 
 
 // Vertical button groups
 // ----------------------
 
-.btn-group-vertical > .btn {
-  display: block;
-  float: none;
-  width: 100%;
-  max-width: 100%;
-  + .btn {
+.btn-group-vertical {
+  > .btn,
+  > .btn-group {
+    display: block;
+    float: none;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  // Clear floats so dropdown menus can be properly placed
+  > .btn-group {
+    @include clearfix();
+    > .btn {
+      float: none;
+    }
+  }
+
+  > .btn + .btn,
+  > .btn + .btn-group,
+  > .btn-group + .btn,
+  > .btn-group + .btn-group {
     margin-top: -1px;
+    margin-left: 0;
   }
 }
-.btn-group-vertical .btn {
+
+.btn-group-vertical > .btn {
   &:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
-  &:first-child {
+  &:first-child:not(:last-child) {
+    border-top-right-radius: $border-radius-base;
     @include border-bottom-radius(0);
   }
-  &:last-child {
+  &:last-child:not(:first-child) {
+    border-bottom-left-radius: $border-radius-base;
     @include border-top-radius(0);
   }
 }
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+.btn-group-vertical > .btn-group:first-child {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    @include border-bottom-radius(0);
+  }
+}
+.btn-group-vertical > .btn-group:last-child > .btn:first-child {
+  @include border-top-radius(0);
+}
+
 
 
 // Justified button groups
@@ -156,6 +228,7 @@
 .btn-group-justified {
   display: table;
   width: 100%;
+  table-layout: fixed;
   .btn {
     float: none;
     display: table-cell;
@@ -165,7 +238,7 @@
 
 
 // Checkbox and radio options
-.btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
-.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
+[data-toggle="buttons"] > .btn > input[type="radio"],
+[data-toggle="buttons"] > .btn > input[type="checkbox"] {
   display: none;
 }

data/app/assets/stylesheets/twitter/bootstrap/_buttons.scss

@@ -12,7 +12,7 @@
   padding: $padding-base-vertical $padding-base-horizontal;
   margin-bottom: 0; // For input.btn
   font-size: $font-size-base;
-  font-weight: 500;
+  font-weight: $btn-font-weight;
   line-height: $line-height-base;
   text-align: center;
   vertical-align: middle;
@@ -20,6 +20,7 @@
   border: 1px solid transparent;
   border-radius: $border-radius-base;
   white-space: nowrap;
+  @include user-select(none);
 
   &:focus {
     @include tab-focus();
@@ -27,7 +28,7 @@
 
   &:hover,
   &:focus {
-    color: $btn-hover-color;
+    color: $btn-default-color;
     text-decoration: none;
   }
 
@@ -53,26 +54,26 @@
 // --------------------------------------------------
 
 .btn-default {
-  @include btn-pseudo-states($btn-default-color, $btn-default-bg, $btn-default-border);
+  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
 }
 .btn-primary {
-  @include btn-pseudo-states($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
 }
 // Warning appears as orange
 .btn-warning {
-  @include btn-pseudo-states($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
 }
 // Danger and error appear as red
 .btn-danger {
-  @include btn-pseudo-states($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
 }
 // Success appears as green
 .btn-success {
-  @include btn-pseudo-states($btn-success-color, $btn-success-bg, $btn-success-border);
+  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
 }
 // Info appears as blue-green
 .btn-info {
-  @include btn-pseudo-states($btn-info-color, $btn-info-bg, $btn-info-border);
+  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
 }
 
 
@@ -109,7 +110,7 @@
   fieldset[disabled] & {
     &:hover,
     &:focus {
-      color: $gray-dark;
+      color: $btn-link-disabled-color;
       text-decoration: none;
     }
   }
@@ -119,17 +120,22 @@
 // Button Sizes
 // --------------------------------------------------
 
-.btn-large {
-  padding: $padding-large-vertical $padding-large-horizontal;
-  font-size: $font-size-large;
-  border-radius: $border-radius-large;
+@mixin btn-lg {
+  // line-height: ensure even-numbered height of button next to large input
+  @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
 }
-.btn-small {
-  padding: $padding-small-vertical $padding-small-horizontal;
-  font-size: $font-size-small;
-  line-height: 1.5; // ensure proper height of button next to small input
-  border-radius: $border-radius-small;
+@mixin btn-sm {
+  // line-height: ensure proper height of button next to small input
+  @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
 }
+@mixin btn-xs {
+  padding: 3px 5px;
+}
+
+.btn-lg {@include btn-lg}
+.btn-sm,
+.btn-xs {@include btn-sm}
+.btn-xs {@include btn-xs}
 
 
 // Block button

data/app/assets/stylesheets/twitter/bootstrap/_carousel.scss

@@ -69,9 +69,9 @@
   top: 0;
   left: 0;
   bottom: 0;
-  width: 15%;
-  @include opacity(.5);
-  font-size: 20px;
+  width: $carousel-control-width;
+  @include opacity($carousel-control-opacity);
+  font-size: $carousel-control-font-size;
   color: $carousel-control-color;
   text-align: center;
   text-shadow: $carousel-text-shadow;
@@ -81,13 +81,11 @@
   // Set gradients for backgrounds
   &.left {
     @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
-    background-color: transparent;
   }
   &.right {
     left: auto;
     right: 0;
     @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
-    background-color: transparent;
   }
 
   // Hover/focus state
@@ -99,7 +97,6 @@
   }
 
   // Toggles
-  .glyphicon,
   .icon-prev,
   .icon-next {
     position: absolute;
@@ -113,7 +110,7 @@
     margin-left: -10px;
     font-family: serif;
   }
-  // Non-glyphicon toggles
+
   .icon-prev {
     &:before {
       content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
@@ -127,14 +124,17 @@
 }
 
 // Optional indicator pips
-// -----------------------------
+//
+// Add an unordered list with the following class and add a list item for each
+// slide your carousel holds.
+
 .carousel-indicators {
   position: absolute;
   bottom: 10px;
   left: 50%;
   z-index: 15;
-  width: 120px;
-  margin-left: -60px;
+  width: 60%;
+  margin-left: -30%;
   padding-left: 0;
   list-style: none;
   text-align: center;
@@ -181,7 +181,6 @@
 @media screen and (min-width: $screen-tablet) {
 
   // Scale up the controls a smidge
-  .carousel-control .glyphicon,
   .carousel-control .icon-prev,
   .carousel-control .icon-next {
     width: 30px;

data/app/assets/stylesheets/twitter/bootstrap/_close.scss

@@ -6,7 +6,7 @@
 .close {
   float: right;
   font-size: ($font-size-base * 1.5);
-  font-weight: bold;
+  font-weight: $close-font-weight;
   line-height: 1;
   color: $close-color;
   text-shadow: $close-text-shadow;

data/app/assets/stylesheets/twitter/bootstrap/_code.scss

@@ -16,7 +16,7 @@ code {
   color: $code-color;
   background-color: $code-bg;
   white-space: nowrap;
-  border-radius: 4px;
+  border-radius: $border-radius-base;
 }
 
 // Blocks of code
@@ -28,7 +28,7 @@ pre {
   line-height: $line-height-base;
   word-break: break-all;
   word-wrap: break-word;
-  color: $gray-dark;
+  color: $pre-color;
   background-color: $pre-bg;
   border: 1px solid $pre-border-color;
   border-radius: $border-radius-base;
@@ -41,6 +41,7 @@ pre {
   // Account for some code outputs that place code tags in pre tags
   code {
     padding: 0;
+    font-size: inherit;
     color: inherit;
     white-space: pre-wrap;
     background-color: transparent;
@@ -50,6 +51,6 @@ pre {
 
 // Enable scrollable blocks of code
 .pre-scrollable {
-  max-height: 340px;
+  max-height: $pre-scrollable-max-height;
   overflow-y: scroll;
 }

data/app/assets/stylesheets/twitter/bootstrap/_dropdowns.scss

@@ -4,21 +4,29 @@
 
 
 // Dropdown arrow/caret
-// --------------------
 .caret {
   display: inline-block;
   width: 0;
   height: 0;
   margin-left: 2px;
   vertical-align: middle;
-  border-top:   4px solid $dropdown-caret-color;
-  border-right: 4px solid transparent;
-  border-left:  4px solid transparent;
+  border-top:   $caret-width-base solid $dropdown-caret-color;
+  border-right: $caret-width-base solid transparent;
+  border-left:  $caret-width-base solid transparent;
   content: "";
 }
 
+// The dropdown wrapper (div)
+.dropdown {
+  position: relative;
+}
+
+// Prevent the focus on the dropdown toggle when closing dropdowns
+.dropdown-toggle:focus {
+  outline: 0;
+}
+
 // The dropdown menu (ul)
-// ----------------------
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -30,12 +38,13 @@
   padding: 5px 0;
   margin: 2px 0 0; // override default ul
   list-style: none;
+  font-size: $font-size-base;
   background-color: $dropdown-bg;
   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));
-  @include background-clip(padding-box);
+  background-clip: padding-box;
 
   // Aligns the dropdown menu to right
   &.pull-right {
@@ -61,18 +70,17 @@
 }
 
 // Hover/Focus state
-// -----------
 .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%));
+    background-color: darken($dropdown-link-hover-bg, 5%);
   }
 }
 
 // Active state
-// ------------
 .dropdown-menu > .active > a {
   &,
   &:hover,
@@ -81,17 +89,19 @@
     text-decoration: none;
     outline: 0;
     @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%));
+    background-color: darken($dropdown-link-active-bg, 5%);
   }
 }
 
 // Disabled state
-// --------------
+//
 // Gray out text and ensure the hover/focus state remains gray
+
 .dropdown-menu > .disabled > a {
   &,
   &:hover,
   &:focus {
-    color: $gray-light;
+    color: $dropdown-link-disabled-color;
   }
 }
 // Nuke hover/focus effects
@@ -107,7 +117,6 @@
 }
 
 // Open state for the dropdown
-// ---------------------------
 .open {
   // Show the menu
   > .dropdown-menu {
@@ -121,19 +130,15 @@
 }
 
 // Dropdown section headers
-// ---------------------------
 .dropdown-header {
   display: block;
   padding: 3px 20px;
   font-size: $font-size-small;
   line-height: $line-height-base;
-  color: $gray-light;
+  color: $dropdown-header-color;
 }
 
-
-
 // Backdrop to catch body clicks on mobile, etc.
-// ---------------------------
 .dropdown-backdrop {
   position: fixed;
   left: 0;
@@ -144,16 +149,16 @@
 }
 
 // Right aligned dropdowns
-// ---------------------------
 .pull-right > .dropdown-menu {
   right: 0;
   left: auto;
 }
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
-// ------------------------------------------------------
+//
 // Just add .dropup after the standard .dropdown class and you're set, bro.
 // TODO: abstract this so that the navbar fixed styles are not placed here?
+
 .dropup,
 .navbar-fixed-bottom .dropdown {
   // Reverse the caret