padrino-admin 0.11.2 → 0.11.3

data/lib/padrino-admin/bootstrap-less/media.less

@@ -49,6 +49,6 @@
 
 // Undo default ul/ol styles
 .media-list {
-  margin-left: 0;
+  padding-left: 0;
   list-style: none;
 }

data/lib/padrino-admin/bootstrap-less/mixins.less

@@ -71,7 +71,7 @@
 // CSS image replacement
 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
 .hide-text() {
-  font: 0/0 a;
+  font: ~"0/0" a;
   color: transparent;
   text-shadow: none;
   background-color: transparent;
@@ -155,7 +155,6 @@
       -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
        -o-transform: skew(@x, @y);
           transform: skew(@x, @y);
-  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
 }
 .translate3d(@x, @y, @z) {
   -webkit-transform: translate3d(@x, @y, @z);
@@ -242,66 +241,71 @@
 
 
 
-// BACKGROUNDS
+// GRADIENTS
 // --------------------------------------------------
 
-// Gradients
 #gradient {
-  .horizontal(@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
-    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
-    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
+
+  // Horizontal gradient, from left to right
+  //
+  // Creates two color stops, start and end, by specifying a color and position for each color stop.
+  // Color stops are not available in IE9 and below.
+  .horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
+    background-color: @end-color;
+    background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
+    background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
+    background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
+    background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
     background-repeat: repeat-x;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
   }
-  .vertical(@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
-    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
+
+  // Vertical gradient, from top to bottom
+  //
+  // Creates two color stops, start and end, by specifying a color and position for each color stop.
+  // Color stops are not available in IE9 and below.
+  .vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
+    background-color: @end-color;
+    background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
+    background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
+    background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
+    background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
     background-repeat: repeat-x;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
   }
-  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
-    background-color: @endColor;
+
+  .directional(@start-color: #555, @end-color: #333, @deg: 45deg) {
+    background-color: @end-color;
     background-repeat: repeat-x;
-    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
-    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
+    background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
+    background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
+    background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
   }
-  .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
-    background-color: mix(@midColor, @endColor, 80%);
-    background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
-    background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
-    background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
-    background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
-    background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
+  .horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
+    background-color: mix(@mid-color, @end-color, 80%);
+    background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
+    background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
+    background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
+    background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
     background-repeat: no-repeat;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
   }
 
-  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
-    background-color: mix(@midColor, @endColor, 80%);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
-    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
-    background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
-    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
-    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
+  .vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
+    background-color: mix(@mid-color, @end-color, 80%);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
+    background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
+    background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
+    background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
     background-repeat: no-repeat;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
   }
-  .radial(@innerColor: #555, @outerColor: #333) {
-    background-color: @outerColor;
-    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
-    background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
-    background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
-    background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
+  .radial(@inner-color: #555, @outer-color: #333) {
+    background-color: @outer-color;
+    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
+    background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
+    background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
+    background-image: radial-gradient(circle, @inner-color, @outer-color);
     background-repeat: no-repeat;
   }
   .striped(@color: #555, @angle: 45deg) {
@@ -309,16 +313,20 @@
     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
     background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
     background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
-    background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
     background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
   }
 }
+
 // Reset filters for IE
+//
+// When you need to remove a gradient background, don't forget to use this to reset
+// the IE filter for IE9 and below.
 .reset-filter() {
   filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 }
 
 
+
 // RETINA IMAGE SUPPORT
 // --------------------------------------------------
 
@@ -347,7 +355,7 @@
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider(@top: #e5e5e5, @bottom: #fff) {
   height: 2px; // 1px for background, one for border
-  margin: ((@line-height-base / 2) - 1) 0;
+  margin: ((@line-height-computed / 2) - 1) 0;
   overflow: hidden;
   background-color: @top;
   border-bottom: 1px solid @bottom;
@@ -357,7 +365,8 @@
 // -------------------------
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
-.btn-pseudo-states(@background, @border) {
+.btn-pseudo-states(@color, @background, @border) {
+  color: @color;
   background-color: @background;
   border-color: @border;
 
@@ -372,6 +381,7 @@
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
+    &,
     &:hover,
     &:focus,
     &:active,
@@ -391,7 +401,22 @@
   margin-bottom: ((@navbar-height - @element-height) / 2);
 }
 
+// Responsive utilities
+// -------------------------
+// More easily include all the states for responsive-utilities.less.
+.responsive-visibility() {
+  display: block !important;
+  tr& { display: table-row !important; }
+  th&,
+  td& { display: table-cell !important; }
+}
 
+.responsive-invisibility() {
+  display: none !important;
+  tr& { display: none !important; }
+  th&,
+  td& { display: none !important; }
+}
 
 // Grid System
 // -----------
@@ -410,6 +435,11 @@
   // Then clear the floated columns
   .clearfix();
 
+  @media (min-width: @screen-small) {
+    margin-left:  (@grid-gutter-width / -2);
+    margin-right: (@grid-gutter-width / -2);
+  }
+
   // Negative margin nested rows out to align the content of columns
   .row {
     margin-left:  (@grid-gutter-width / -2);
@@ -418,16 +448,18 @@
 }
 // Generate the columns
 .make-column(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
-    float: left;
-    // Calculate width based on number of columns available
-    width: percentage(@columns / @grid-columns);
-  }
+  position: relative;
   // Prevent columns from collapsing when empty
   min-height: 1px;
-  // Set inner padding as gutters instead of margin
+  // Inner gutter via padding
   padding-left:  (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
+
+  // Calculate width based on number of columns available
+  @media (min-width: @grid-float-breakpoint) {
+    float: left;
+    width: percentage((@columns / @grid-columns));
+  }
 }
 // Generate the column offsets
 .make-column-offset(@columns) {
@@ -448,74 +480,13 @@
 
 
 
-// The Grid
-.generate-grid-columns(@grid-columns) {
-
-  // Default columns
-  .col-span-X (@index) when (@index > 0) {
-    .col-span-@{index} { .col-span-(@index); }
-    .col-span-X((@index - 1));
-  }
-  .col-span-X(0) {}
-
-  // Offsets (gaps between columns)
-  .col-offset-X (@index) when (@index > 0) {
-    .col-offset-@{index} { .col-offset-(@index); }
-    .col-offset-X((@index - 1));
-  }
-  .col-offset-X (0) {}
-
-  // Source ordering
-  .col-push-X (@index) when (@index > 0) {
-    .col-push-@{index} { .col-push-(@index); }
-    .col-push-X((@index - 1));
-  }
-  .col-push-X (0) {}
-
-  // Source ordering
-  .col-pull-X (@index) when (@index > 0) {
-    .col-pull-@{index} { .col-pull-(@index); }
-    .col-pull-X((@index - 1));
-  }
-  .col-pull-X (0) {}
-
-  // Apply the styles
-  .col-span-(@columns) {
-    width: percentage((@columns / @grid-columns));
-  }
-  .col-offset-(@columns) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
-  .col-push-(@columns) {
-    left: percentage((@columns / @grid-columns));
-  }
-  .col-pull-(@columns) {
-    right: percentage((@columns / @grid-columns));
-  }
-
-  // Generate .spanX and .offsetX
-  .col-span-X(@grid-columns);
-  .col-offset-X(@grid-columns);
-  .col-push-X(@grid-columns);
-  .col-pull-X(@grid-columns);
-}
-
-
-
 // Framework mixins
 // --------------------------------------------------
 
-// Generate rem font-sizes with pixel fallbacks
-// By default uses `@font-size-base` with an initial value of 14 (1.4rem or 14px)
-.font-size(@font-size: @font-size-base) {
-  @rem-size: (@font-size / 10);
-  font-size: ~"@{font-size}px";
-  font-size: ~"@{rem-size}rem";
-}
-
 // Generate form validation states
-.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
+.form-field-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
   // Color the label text
+  .help-block,
   .control-label {
     color: @text-color;
   }
@@ -530,4 +501,10 @@
       .box-shadow(@shadow);
     }
   }
+  // Set validation states also for addons
+  .input-group-addon {
+    color: @text-color;
+    border-color: @border-color;
+    background-color: @background-color;
+  }
 }

data/lib/padrino-admin/bootstrap-less/modals.less

@@ -74,18 +74,19 @@
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {
-  padding: 9px 15px;
+  padding: @modal-title-padding;
   border-bottom: 1px solid #e5e5e5;
+  min-height: (@modal-title-padding + @modal-title-line-height);
 }
 // Close icon
 .modal-header .close {
-  margin-top: 2px;
+  margin-top: -2px;
 }
 
 // Title text within header
 .modal-title {
   margin: 0;
-  line-height: 30px; // effectively set a min-height for the header
+  line-height: @modal-title-line-height;
 }
 
 // Modal body
@@ -119,7 +120,7 @@
 }
 
 // Scale up the modal
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
 
   .modal-dialog {
     left: 50%;

data/lib/padrino-admin/bootstrap-less/navbar.less

@@ -5,9 +5,12 @@
 // Wrapper and base class
 .navbar {
   position: relative;
-  padding: 10px 15px;
+  margin-bottom: 20px;
+  padding-left: @navbar-padding;
+  padding-right: @navbar-padding;
   background-color: @navbar-bg;
   border-radius: @border-radius-base;
+
   // Prevent floats from breaking the navbar
   .clearfix();
 }
@@ -15,34 +18,42 @@
 // Navbar nav links
 // -------------------------
 
-.navbar {
-  .nav {
-    // space out from .navbar .brand and .btn-navbar
-    margin-top: 15px;
-  }
-  .nav > li > a {
-    padding-top: ((@navbar-height - @line-height-base) / 2);
-    padding-bottom: ((@navbar-height - @line-height-base) / 2);
+.navbar-nav {
+  // Space out from .navbar .brand and .btn-navbar when stacked in mobile views
+  // and outdent nav links so text lines up with logo.
+  margin-top: 10px;
+  margin-bottom: 15px;
+
+  > li > a {
+    padding-top: ((@navbar-height - @line-height-computed) / 2);
+    padding-bottom: ((@navbar-height - @line-height-computed) / 2);
     color: @navbar-link-color;
     line-height: 20px;
+    border-radius: @border-radius-base;
   }
-  .nav > li > a:hover,
-  .nav > li > a:focus {
+  > li > a:hover,
+  > li > a:focus {
     color: @navbar-link-hover-color;
     background-color: @navbar-link-hover-bg;
   }
-  .nav > .active > a,
-  .nav > .active > a:hover,
-  .nav > .active > a:focus {
+  > .active > a,
+  > .active > a:hover,
+  > .active > a:focus {
     color: @navbar-link-active-color;
     background-color: @navbar-link-active-bg;
   }
-  .nav > .disabled > a,
-  .nav > .disabled > a:hover,
-  .nav > .disabled > a:focus {
+  > .disabled > a,
+  > .disabled > a:hover,
+  > .disabled > a:focus {
     color: @navbar-link-disabled-color;
     background-color: @navbar-link-disabled-bg;
   }
+
+  // Right aligned contents
+  // Make them full width first so that they align properly on mobile
+  &.pull-right {
+    width: 100%;
+  }
 }
 
 
@@ -65,8 +76,13 @@
   z-index: @zindex-navbar-fixed;
   border-radius: 0;
 }
-.navbar-fixed-top    { top: 0; }
-.navbar-fixed-bottom { bottom: 0; }
+.navbar-fixed-top {
+  top: 0;
+}
+.navbar-fixed-bottom {
+  bottom: 0;
+  margin-bottom: 0; // override .navbar defaults
+}
 
 
 
@@ -80,10 +96,10 @@
   max-width: 200px;
   margin-left: auto;
   margin-right: auto;
-  padding: 7px 15px;
-  font-size: 18px;
+  padding: @navbar-padding;
+  font-size: @font-size-large;
   font-weight: 500;
-  line-height: @line-height-base;
+  line-height: @line-height-computed;
   color: @navbar-brand-color;
   text-align: center;
   &:hover,
@@ -122,61 +138,57 @@
   }
 }
 
-// Dividers in navbar
-.navbar .nav > .divider {
-  .nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%));
-}
-
 // Navbar form
 .navbar-form {
-  .navbar-vertical-align(34px); // Vertically center in navbar
+  .form-inline();
+  .navbar-vertical-align(@input-height-base); // Vertically center in navbar
 }
 
 // Dropdown menus
 
 // Menu position and menu carets
-.navbar .nav > li > .dropdown-menu {
+.navbar-nav > li > .dropdown-menu {
   margin-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 // Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .nav > li > .dropdown-menu {
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 // Dropdown menu items and carets
-.navbar .nav {
+.navbar-nav {
   // Caret should match text color on hover
-  li.dropdown > a:hover .caret,
-  li.dropdown > a:focus .caret {
+  > .dropdown > a:hover .caret,
+  > .dropdown > a:focus .caret {
     border-top-color: @navbar-link-hover-color;
     border-bottom-color: @navbar-link-hover-color;
   }
 
   // Remove background color from open dropdown
-  li.dropdown.open > .dropdown-toggle,
-  li.dropdown.active > .dropdown-toggle,
-  li.dropdown.open.active > .dropdown-toggle {
+  > .open > a,
+  > .open > a:hover,
+  > .open > a:focus {
     background-color: @navbar-link-active-bg;
     color: @navbar-link-active-color;
   }
-  li.dropdown > .dropdown-toggle .caret {
+  > .dropdown > a .caret {
     border-top-color: @navbar-link-color;
     border-bottom-color: @navbar-link-color;
   }
-  li.dropdown.open > .dropdown-toggle .caret,
-  li.dropdown.active > .dropdown-toggle .caret,
-  li.dropdown.open.active > .dropdown-toggle .caret {
+  > .open > a .caret,
+  > .open > a:hover .caret,
+  > .open > a:focus .caret {
     border-top-color: @navbar-link-active-color;
     border-bottom-color: @navbar-link-active-color;
   }
 }
 
 // Right aligned menus need alt position
-.navbar .pull-right > li > .dropdown-menu,
-.navbar .nav > li > .dropdown-menu.pull-right {
+.navbar-nav.pull-right > li > .dropdown-menu,
+.navbar-nav > li > .dropdown-menu.pull-right {
   left: auto;
   right: 0;
 }
@@ -193,34 +205,36 @@
     color: @navbar-inverse-brand-color;
     &:hover,
     &:focus {
-      color: @navbar-inverse-brand-color-hover;
-      background-color: @navbar-inverse-brand-bg-hover;
+      color: @navbar-inverse-brand-hover-color;
+      background-color: @navbar-inverse-brand-hover-bg;
     }
   }
 
   .navbar-text {
-    color: @navbar-inverse-text;
+    color: @navbar-inverse-color;
   }
 
-  .nav > li > a {
-    color: @navbar-inverse-link-color;
-  }
-  .nav > li > a:hover,
-  .nav > li > a:focus {
-    color: @navbar-inverse-link-hover-color;
-    background-color: @navbar-inverse-link-hover-bg;
-  }
-  .nav > .active > a,
-  .nav > .active > a:hover,
-  .nav > .active > a:focus {
-    color: @navbar-inverse-link-active-color;
-    background-color: @navbar-inverse-link-active-bg;
-  }
-  .nav > .disabled > a,
-  .nav > .disabled > a:hover,
-  .nav > .disabled > a:focus {
-    color: @navbar-inverse-link-disabled-color;
-    background-color: @navbar-inverse-link-disabled-bg;
+  .navbar-nav {
+    > li > a {
+      color: @navbar-inverse-link-color;
+    }
+    > li > a:hover,
+    > li > a:focus {
+      color: @navbar-inverse-link-hover-color;
+      background-color: @navbar-inverse-link-hover-bg;
+    }
+    > .active > a,
+    > .active > a:hover,
+    > .active > a:focus {
+      color: @navbar-inverse-link-active-color;
+      background-color: @navbar-inverse-link-active-bg;
+    }
+    > .disabled > a,
+    > .disabled > a:hover,
+    > .disabled > a:focus {
+      color: @navbar-inverse-link-disabled-color;
+      background-color: @navbar-inverse-link-disabled-bg;
+    }
   }
 
   // Darken the responsive nav toggle
@@ -235,87 +249,62 @@
     }
   }
 
-  // Darken dividers
-  .nav > .divider {
-    background-color: darken(@navbar-inverse-bg, 5%);
-    border-bottom-color: lighten(@navbar-inverse-bg, 5%);
-  }
-
   // Dropdowns
-  .nav li.dropdown.open > .dropdown-toggle,
-  .nav li.dropdown.active > .dropdown-toggle,
-  .nav li.dropdown.open.active > .dropdown-toggle {
-    background-color: @navbar-inverse-link-active-bg;
-    color: @navbar-inverse-link-active-color;
-  }
-  .nav li.dropdown > a:hover .caret {
-    border-top-color: @navbar-inverse-link-hover-color;
-    border-bottom-color: @navbar-inverse-link-hover-color;
-  }
-  .nav li.dropdown > .dropdown-toggle .caret {
-    border-top-color: @navbar-inverse-link-color;
-    border-bottom-color: @navbar-inverse-link-color;
-  }
-  .nav li.dropdown.open > .dropdown-toggle .caret,
-  .nav li.dropdown.active > .dropdown-toggle .caret,
-  .nav li.dropdown.open.active > .dropdown-toggle .caret {
-    border-top-color: @navbar-inverse-link-active-color;
-    border-bottom-color: @navbar-inverse-link-active-color;
+  .navbar-nav {
+    > .open > a,
+    > .open > a:hover,
+    > .open > a:focus {
+      background-color: @navbar-inverse-link-active-bg;
+      color: @navbar-inverse-link-active-color;
+    }
+    > .dropdown > a:hover .caret {
+      border-top-color: @navbar-inverse-link-hover-color;
+      border-bottom-color: @navbar-inverse-link-hover-color;
+    }
+    > .dropdown > a .caret {
+      border-top-color: @navbar-inverse-link-color;
+      border-bottom-color: @navbar-inverse-link-color;
+    }
+    > .open > a .caret,
+    > .open > a:hover .caret,
+    > .open > a:focus .caret {
+      border-top-color: @navbar-inverse-link-active-color;
+      border-bottom-color: @navbar-inverse-link-active-color;
+    }
+
   }
 }
 
 
 
-// Inverse navbar
+// Responsive navbar
 // --------------------------------------------------
 
-@media screen and (min-width: 768px) {
-  .navbar {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
+@media screen and (min-width: @grid-float-breakpoint) {
+
   .navbar-brand {
     float: left;
-    padding-top: ((@navbar-height - @line-height-base) / 2);
-    padding-bottom: ((@navbar-height - @line-height-base) / 2);
-    margin-left: -10px;
+    margin-left: -(@navbar-padding);
+    margin-right: 5px;
   }
-  .navbar .nav {
+  .navbar-nav {
     float: left;
-    margin-top: 0; // undo top margin to make nav extend full height of navbar
-    .clearfix();
+    // undo margin to make nav extend full height of navbar
+    margin-top: 0;
+    margin-bottom: 0;
+
+    > li {
+      float: left;
+      > a {
+        border-radius: 0;
+      }
+    }
 
     &.pull-right {
       float: right;
+      width: auto;
     }
   }
-  .navbar .nav > li {
-    float: left;
-  }
-
-  // Dividers go vertical
-  // Change the height and height, disable bottom border, then add right border
-  .navbar .nav > .divider {
-    width: 1px;
-    height: (@navbar-height * .6);
-    margin: (@navbar-height * .2) 9px;
-    border-bottom: 0;
-    border-right: 1px solid lighten(@navbar-bg, 5%);
-  }
-  // Since we override the border, we need to specify it again for inverted navbars
-  .navbar-inverse .nav > .divider {
-    border-right-color: lighten(@navbar-inverse-bg, 5%);
-  }
-
-  .navbar-fixed-left {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .navbar-fixed-left .navbar-brand,
-  .navbar-fixed-left .nav,
-  .navbar-fixed-left .nav > li {
-    float: none;
-  }
 
   // Required to make the collapsing navbar work on regular desktops
   .navbar-toggle {
@@ -331,10 +320,33 @@
 
 }
 
-/*
 
-// Janky solution for now to account for links outside the .nav
-// -------------------------
+
+// Buttons in navbars
+//
+// Vertically center a button within a navbar (when *not* in a form).
+
+.navbar-btn {
+  margin-top: ((@navbar-height - @input-height-base) / 2);
+}
+
+
+
+// Text in navbars
+//
+// Add a class to make any element properly align itself vertically within the navbars.
+
+.navbar-text {
+  .navbar-vertical-align(@line-height-computed);
+}
+
+
+
+// Links in navbars
+//
+// Add a class to ensure links outside the navbar nav are colored correctly.
+
+// Default navbar variables
 .navbar-link {
   color: @navbar-link-color;
   &:hover {
@@ -342,48 +354,10 @@
   }
 }
 
-// Buttons in navbar
-// -------------------------
-.navbar .btn,
-.navbar .btn-group {
-  .navbarVerticalAlign(30px); // Vertically center in navbar
-}
-.navbar .btn-group .btn,
-.navbar .input-prepend .btn,
-.navbar .input-append .btn {
-  margin-top: 0; // then undo the margin here so we don't accidentally double it
-}
-
-// Navbar forms
-// -------------------------
-.navbar-form {
-  margin-bottom: 0; // remove default bottom margin
-  .clearfix();
-  input,
-  select,
-  .radio,
-  .checkbox {
-    .navbarVerticalAlign(30px); // Vertically center in navbar
-  }
-  input,
-  select,
-  .btn {
-    display: inline-block;
-    margin-bottom: 0;
-  }
-  input[type="image"],
-  input[type="checkbox"],
-  input[type="radio"] {
-    margin-top: 3px;
-  }
-  .input-append,
-  .input-prepend {
-    margin-top: 5px;
-    white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
-    input {
-      margin-top: 0; // remove the margin on top since it's on the parent
-    }
+// Use the inverse navbar variables
+.navbar-inverse .navbar-link {
+  color: @navbar-inverse-link-color;
+  &:hover {
+    color: @navbar-inverse-link-hover-color;
   }
 }
-
-*/