Updated Bootstrap to 3.1.1

app/browser/style/app.less

@@ -1,52 +1,57 @@
+// Built on Bootstrap 3.1.1
+
 // Core variables and mixins
-@import "colors";
-@import "variables";
-@import "mixins";
+@import "colors.less";
+@import "variables.less";
+@import "mixins.less";
 
-// Reset
-@import "normalize";
-@import "print";
+// Reset and dependencies
+@import "normalize.less";
+@import "print.less";
+@import "glyphicons.less";
 
 // Core CSS
-@import "scaffolding";
-@import "type";
-@import "code";
-@import "grid";
-@import "tables";
-@import "forms";
-@import "buttons";
+@import "scaffolding.less";
+@import "type.less";
+@import "code.less";
+@import "grid.less";
+@import "tables.less";
+@import "forms.less";
+@import "buttons.less";
 
 // Components
-@import "component-animations";
-@import "glyphicons";
-@import "dropdowns";
-@import "button-groups";
-@import "input-groups";
-@import "navs";
-@import "navbar";
-@import "breadcrumbs";
-@import "pagination";
-@import "pager";
-@import "labels";
-@import "badges";
-@import "thumbnails";
-@import "alerts";
-@import "progress-bars";
-@import "media";
-@import "list-group";
-@import "panels";
-@import "wells";
-@import "close";
-
-@import "window";
-@import "desktop-notification.less";
+@import "component-animations.less";
+@import "dropdowns.less";
+@import "button-groups.less";
+@import "input-groups.less";
+@import "navs.less";
+@import "navbar.less";
+@import "breadcrumbs.less";
+@import "pagination.less";
+@import "pager.less";
+@import "labels.less";
+@import "badges.less";
+@import "jumbotron.less";
+@import "thumbnails.less";
+@import "alerts.less";
+@import "progress-bars.less";
+@import "media.less";
+@import "list-group.less";
+@import "panels.less";
+@import "responsive-embed.less";
+@import "wells.less";
+@import "close.less";
 
 // Components w/ JavaScript
-@import "modals";
-@import "tooltip";
-@import "popovers";
-@import "carousel";
+@import "modals.less";
+@import "tooltip.less";
+@import "popovers.less";
+@import "carousel.less";
+
+// Specifics
+@import "window.less";
+@import "desktop-notification.less";
 
 // Utility classes
-@import "utilities";
-@import "responsive-utilities";
+@import "utilities.less";
+@import "responsive-utilities.less";

app/browser/style/badges.less

@@ -3,7 +3,7 @@
 // --------------------------------------------------
 
 
-// Base classes
+// Base class
 .badge {
   display: inline-block;
   min-width: 10px;
@@ -32,24 +32,24 @@
     top: 0;
     padding: 1px 5px;
   }
-}
 
-// Hover state, but only for links
-a.badge {
-  &:hover,
-  &:focus {
-    color: @badge-link-hover-color;
-    text-decoration: none;
-    cursor: pointer;
+  // Hover state, but only for links
+  a& {
+    &:hover,
+    &:focus {
+      color: @badge-link-hover-color;
+      text-decoration: none;
+      cursor: pointer;
+    }
   }
-}
 
-// Account for counters in navs
-a.list-group-item.active > .badge,
-.nav-pills > .active > a > .badge {
-  color: @badge-active-color;
-  background-color: @badge-active-bg;
-}
-.nav-pills > li > a > .badge {
-  margin-left: 3px;
+  // Account for badges in navs
+  a.list-group-item.active > &,
+  .nav-pills > .active > a > & {
+    color: @badge-active-color;
+    background-color: @badge-active-bg;
+  }
+  .nav-pills > li > a > & {
+    margin-left: 3px;
+  }
 }

app/browser/style/button-groups.less

@@ -20,7 +20,7 @@
     }
     &:focus {
       // Remove focus outline when dropdown JS adds it after closing the menu
-      outline: none;
+      outline: 0;
     }
   }
 }
@@ -220,7 +220,17 @@
 
 
 // Checkbox and radio options
+//
+// In order to support the browser's form validation feedback, powered by the
+// `required` attribute, we have to "hide" the inputs via `opacity`. We cannot
+// use `display: none;` or `visibility: hidden;` as that also hides the popover.
+// This way, we ensure a DOM element is visible to position the popover from.
+//
+// See https://github.com/twbs/bootstrap/pull/12794 for more.
+
 [data-toggle="buttons"] > .btn > input[type="radio"],
 [data-toggle="buttons"] > .btn > input[type="checkbox"] {
-  display: none;
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
 }

app/browser/style/carousel.less

@@ -91,7 +91,7 @@
   // Hover/focus state
   &:hover,
   &:focus {
-    outline: none;
+    outline: 0;
     color: @carousel-control-color;
     text-decoration: none;
     .opacity(.9);

app/browser/style/code.less

@@ -17,7 +17,6 @@ code {
   font-size: 90%;
   color: @code-color;
   background-color: @code-bg;
-  white-space: nowrap;
   border-radius: @border-radius-base;
 }
 

app/browser/style/component-animations.less

@@ -5,7 +5,7 @@
 // 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.
+// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
 
 .fade {
   opacity: 0;
@@ -17,10 +17,12 @@
 
 .collapse {
   display: none;
-  &.in {
-    display: block;
-  }
+
+  &.in      { display: block; }
+  tr&.in    { display: table-row; }
+  tbody&.in { display: table-row-group; }
 }
+
 .collapsing {
   position: relative;
   height: 0;

app/browser/style/dropdowns.less

@@ -38,6 +38,7 @@
   margin: 2px 0 0; // override default ul
   list-style: none;
   font-size: @font-size-base;
+  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   background-color: @dropdown-bg;
   border: 1px solid @dropdown-fallback-border; // IE8 fallback
   border: 1px solid @dropdown-border;

app/browser/style/forms.less

@@ -31,6 +31,7 @@ legend {
 
 label {
   display: inline-block;
+  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
   margin-bottom: 5px;
   font-weight: bold;
 }
@@ -51,7 +52,7 @@ input[type="search"] {
 input[type="radio"],
 input[type="checkbox"] {
   margin: 4px 0 0;
-  margin-top: 1px \9; /* IE8-9 */
+  margin-top: 1px \9; // IE8-9
   line-height: normal;
 }
 
@@ -167,10 +168,23 @@ input[type="search"] {
 // Special styles for iOS date input
 //
 // In Mobile Safari, date inputs require a pixel line-height that matches the
-// given height of the input.
+// given height of the input. Since this fucks up everything else, we have to
+// appropriately reset it for Internet Explorer and the size variations.
 
-input[type="date"] {
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
   line-height: @input-height-base;
+  // IE8+ misaligns the text within date inputs, so we reset
+  line-height: @line-height-base ~"\0";
+
+  &.input-sm {
+    line-height: @input-height-small;
+  }
+  &.input-lg {
+    line-height: @input-height-large;
+  }
 }
 
 
@@ -194,9 +208,10 @@ input[type="date"] {
   min-height: @line-height-computed; // clear the floating input if there is no label text
   margin-top: 10px;
   margin-bottom: 10px;
-  padding-left: 20px;
+
   label {
-    display: inline;
+    padding-left: 20px;
+    margin-bottom: 0;
     font-weight: normal;
     cursor: pointer;
   }
@@ -271,18 +286,28 @@ input[type="checkbox"],
   .form-control {
     padding-right: (@input-height-base * 1.25);
   }
-
-  // Feedback icon (requires .glyphicon classes)
-  .form-control-feedback {
-    position: absolute;
-    top: (@line-height-computed + 5); // Height of the `label` and its margin
-    right: 0;
-    display: block;
-    width: @input-height-base;
-    height: @input-height-base;
-    line-height: @input-height-base;
-    text-align: center;
-  }
+}
+// Feedback icon (requires .glyphicon classes)
+.form-control-feedback {
+  position: absolute;
+  top: (@line-height-computed + 5); // Height of the `label` and its margin
+  right: 0;
+  z-index: 2; // Ensure icon is above input groups
+  display: block;
+  width: @input-height-base;
+  height: @input-height-base;
+  line-height: @input-height-base;
+  text-align: center;
+}
+.input-lg + .form-control-feedback {
+  width: @input-height-large;
+  height: @input-height-large;
+  line-height: @input-height-large;
+}
+.input-sm + .form-control-feedback {
+  width: @input-height-small;
+  height: @input-height-small;
+  line-height: @input-height-small;
 }
 
 // Feedback states
@@ -349,6 +374,18 @@ input[type="checkbox"],
       width: auto; // Prevent labels from stacking above inputs in `.form-group`
       vertical-align: middle;
     }
+
+    .input-group {
+      display: inline-table;
+      vertical-align: middle;
+
+      .input-group-addon,
+      .input-group-btn,
+      .form-control {
+        width: auto;
+      }
+    }
+
     // Input groups need that 100% width though
     .input-group > .form-control {
       width: 100%;
@@ -394,8 +431,9 @@ input[type="checkbox"],
 
 .form-horizontal {
 
-  // Consistent vertical alignment of labels, radios, and checkboxes
-  .control-label,
+  // Consistent vertical alignment of radios and checkboxes
+  //
+  // Labels also get some reset styles, but that is scoped to a media query below.
   .radio,
   .checkbox,
   .radio-inline,
@@ -418,12 +456,16 @@ input[type="checkbox"],
 
   .form-control-static {
     padding-top: (@padding-base-vertical + 1);
+    padding-bottom: (@padding-base-vertical + 1);
   }
 
-  // Only right align form labels here when the columns stop stacking
+  // Reset spacing and right align labels, but scope to media queries so that
+  // labels on narrow viewports stack the same as a default form example.
   @media (min-width: @screen-sm-min) {
     .control-label {
       text-align: right;
+      margin-bottom: 0;
+      padding-top: (@padding-base-vertical + 1); // Default padding plus a border
     }
   }