Commits

Christoffer Niska committed bf231e0

updated bootstrap less files

  • Participants
  • Parent commits fb4fbc2
  • Branches 1.0.0-wip

Comments (0)

Files changed (12)

File lib/bootstrap/less/breadcrumbs.less

 
 
 .breadcrumb {
-  padding: 7px 14px;
+  padding: 8px 15px;
   margin: 0 0 @baseLineHeight;
   list-style: none;
-  #gradient > .vertical(@white, #f5f5f5);
-  border: 1px solid #ddd;
-  .border-radius(3px);
-  .box-shadow(inset 0 1px 0 @white);
+  background-color: #f5f5f5;
+  .border-radius(4px);
   li {
     display: inline-block;
     .ie7-inline-block();
   }
   .divider {
     padding: 0 5px;
+    color: #ccc;
+  }
+  .active {
     color: @grayLight;
   }
-  .active a {
-    color: @grayDark;
-  }
 }

File lib/bootstrap/less/button-groups.less

 }
 .btn-group > .btn,
 .btn-group > .dropdown-menu {
-  font-size: 13px; // redeclare as part 2 of font-size inline-block hack
+  font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
 }
 
 // Reset fonts for other sizes
-.btn-group > .btn-mini,
+.btn-group > .btn-mini {
+  font-size: 11px;
+}
 .btn-group > .btn-small {
   font-size: 12px;
 }
 // ----------------------
 
 // Give the line between buttons some depth
-.btn-group > .dropdown-toggle {
+.btn-group > .btn + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px;
   .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
   *padding-top: 4px;
   *padding-bottom: 4px;
 }
-.btn-group > .btn-mini.dropdown-toggle {
+.btn-group > .btn-mini + .dropdown-toggle {
   padding-left: 5px;
   padding-right: 5px;
 }
-.btn-group > .btn-small.dropdown-toggle {
+.btn-group > .btn-small + .dropdown-toggle {
   *padding-top: 4px;
   *padding-bottom: 4px;
 }
-.btn-group > .btn-large.dropdown-toggle {
+.btn-group > .btn-large + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px;
 }
 
 // Reposition the caret
 .btn .caret {
-  margin-top: 7px;
+  margin-top: 8px;
   margin-left: 0;
 }
-.btn:hover .caret,
-.open.btn-group .caret {
-  .opacity(100);
-}
 // Carets in other button sizes
-.btn-mini .caret {
-  margin-top: 5px;
-}
-.btn-small .caret {
+.btn-mini .caret,
+.btn-small .caret,
+.btn-large .caret {
   margin-top: 6px;
 }
 .btn-large .caret {
-  margin-top: 6px;
   border-left-width:  5px;
   border-right-width: 5px;
   border-top-width:   5px;
   .caret {
     border-top-color: @white;
     border-bottom-color: @white;
-    .opacity(75);
   }
 }
 

File lib/bootstrap/less/buttons.less

   .ie7-inline-block();
   padding: 4px 14px;
   margin-bottom: 0; // For input.btn
-  font-size: 13px;
-  line-height: 20px;
-  *line-height: 20px;
+  font-size: @baseFontSize;
+  line-height: @baseLineHeight;
+  *line-height: @baseLineHeight;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
 // Mini
 .btn-mini {
   padding: 2px 6px;
-  font-size: @baseFontSize - 2px;
+  font-size: @baseFontSize - 3px;
   line-height: @baseLineHeight - 4px;
 }
 
   padding-right: 0;
   .box-sizing(border-box);
 }
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
 
 
 // Alternate buttons

File lib/bootstrap/less/dropdowns.less

   border-right: 4px solid transparent;
   border-left:  4px solid transparent;
   content: "";
-  .opacity(30);
 }
 
 // Place the caret
   margin-top: 8px;
   margin-left: 2px;
 }
-.dropdown a:focus .caret,
-.dropdown a:hover .caret,
-.open .caret {
-  .opacity(100);
-}
-
-.navbar .nav .open > a {
-  color: @navbarLinkColorActive;
-}
 
 // The dropdown menu (ul)
 // ----------------------
   float: left;
   min-width: 160px;
   padding: 5px 0;
-  margin: 1px 0 0; // override default ul
+  margin: 2px 0 0; // override default ul
   list-style: none;
   background-color: @dropdownBackground;
   border: 1px solid #ccc; // Fallback for IE7-8

File lib/bootstrap/less/forms.less

   background-color: @inputBackground;
   border: 1px solid @inputBorder;
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  @transition: border linear .2s, box-shadow linear .2s;
-  .transition(@transition);
+  .transition(~"border linear .2s, box-shadow linear .2s");
 
   // Focus state
   &:focus {
 .input-append .uneditable-input[class*="span"],
 .input-prepend input[class*="span"],
 .input-prepend .uneditable-input[class*="span"],
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"],
 .row-fluid .input-prepend [class*="span"],
 .row-fluid .input-append [class*="span"] {
   display: inline-block;

File lib/bootstrap/less/grid.less

 #grid > .core(@gridColumnWidth, @gridGutterWidth);
 
 // Fluid (940px)
-#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
+#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
+
+// Reset utility classes due to specificity
+[class*="span"].hide,
+.row-fluid [class*="span"].hide {
+  display: none;
+}
+
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
+  float: right;
+}

File lib/bootstrap/less/labels-badges.less

   &-inverse           { background-color: @grayDark; }
   &-inverse[href]     { background-color: darken(@grayDark, 10%); }
 }
+
+// Quick fix for labels/badges in buttons
+.btn {
+  .label,
+  .badge {
+    position: relative;
+    top: -1px;
+  }
+}
+.btn-mini {
+  .label,
+  .badge {
+    top: 0;
+  }
+}

File lib/bootstrap/less/mixins.less

 
 .ie7-restore-right-whitespace() {
   *margin-right: .3em;
-
-  &:last-child {
-    *margin-left: 0;
-  }
 }
 
 // Sizing shortcuts

File lib/bootstrap/less/navbar.less

 //
-// Navbars
+// Navbars (Redux)
 // --------------------------------------------------
 
 
 // COMMON STYLES
 // -------------
 
+// Base class and wrapper
 .navbar {
+  overflow: visible;
+  margin-bottom: @baseLineHeight;
+  color: @navbarText;
+
   // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
   *position: relative;
   *z-index: 2;
-
-  overflow: visible;
-  margin-bottom: @baseLineHeight;
 }
 
+// Inner for background effects
 // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
 .navbar-inner {
   min-height: @navbarHeight;
   padding-left:  20px;
   padding-right: 20px;
   #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
+  border: 1px solid @navbarBorder;
   .border-radius(4px);
-  .box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)");
+  .box-shadow(0 1px 4px rgba(0,0,0,.065));
 }
 
 // Set width to auto for default container
 }
 
 
-// Brand, links, text, and buttons
-.navbar {
-  color: @navbarText;
-  // Hover and active states
-  .brand:hover {
+// Brand: website or project name
+// -------------------------
+.navbar .brand {
+  float: left;
+  display: block;
+  // Vertically center the text given @navbarHeight
+  @elementHeight: 20px;
+  @heightDifference: @navbarHeight - @elementHeight;
+  padding: ((@heightDifference / 2) - 2) 20px ((@heightDifference / 2) + 2);
+  margin-left: -20px; // negative indent to left-align the text down the page
+  font-size: 20px;
+  font-weight: 200;
+  color: @navbarBrandColor;
+  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
+  &:hover {
     text-decoration: none;
   }
-  // Website or project name
-  .brand {
-    float: left;
-    display: block;
-    // Vertically center the text given @navbarHeight
-    @elementHeight: 20px;
-    padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
-    margin-left: -20px; // negative indent to left-align the text down the page
-    font-size: 20px;
-    font-weight: 200;
-    line-height: 1;
-    color: @navbarBrandColor;
+}
+
+// Plain text in topbar
+// -------------------------
+.navbar-text {
+  margin-bottom: 0;
+  line-height: @navbarHeight;
+}
+
+// Janky solution for now to account for links outside the .nav
+// -------------------------
+.navbar-link {
+  color: @navbarLinkColor;
+  &:hover {
+    color: @navbarLinkColorHover;
   }
-  // Plain text in topbar
-  .navbar-text {
-    margin-bottom: 0;
-    line-height: @navbarHeight;
-  }
-  // Janky solution for now to account for links outside the .nav
-  .navbar-link {
-    color: @navbarLinkColor;
-    &:hover {
-      color: @navbarLinkColorHover;
-    }
-  }
-  // Buttons in navbar
-  .btn,
-  .btn-group {
-    .navbarVerticalAlign(28px); // Vertically center in navbar
-  }
-  .btn-group .btn {
-    margin: 0; // then undo the margin here so we don't accidentally double it
-  }
+}
+
+// Buttons in navbar
+// -------------------------
+.navbar .btn,
+.navbar .btn-group {
+  .navbarVerticalAlign(28px); // Vertically center in navbar
+}
+.navbar .btn-group .btn {
+  margin: 0; // then undo the margin here so we don't accidentally double it
 }
 
 // Navbar forms
   select,
   .radio,
   .checkbox {
-    .navbarVerticalAlign(28px); // Vertically center in navbar
+    .navbarVerticalAlign(30px); // Vertically center in navbar
   }
   input,
   select,
     margin-bottom: 0;
     padding: 4px 14px;
     #font > .sans-serif(13px, normal, 1);
-    color: @white;
-    background-color: @navbarSearchBackground;
-    border: 1px solid @navbarSearchBorder;
     .border-radius(15px); // redeclare because of specificity of the type attribute
-    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
-    .transition(none);
-
     .placeholder(@navbarSearchPlaceholderColor);
-
-    // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
-    &:focus,
-    &.focused {
-      padding: 5px 15px;
-      color: @grayDark;
-      text-shadow: 0 1px 0 @white;
-      background-color: @navbarSearchBackgroundFocus;
-      border: 0;
-      .box-shadow(0 0 3px rgba(0,0,0,.15));
-      outline: 0;
-    }
   }
 }
 
 // Fixed to top
 .navbar-fixed-top {
   top: 0;
-  -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-     -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-          box-shadow: 0 1px 10px rgba(0,0,0,.1);
+  .navbar-inner {
+    border-width: 0 0 1px;
+    .box-shadow(0 1px 10px rgba(0,0,0,.1));
+  }
 }
 
 // Fixed to bottom
 .navbar-fixed-bottom {
   bottom: 0;
-  -webkit-box-shadow: 0 -1px 10px rgba(0,0,0,.1);
-     -moz-box-shadow: 0 -1px 10px rgba(0,0,0,.1);
-          box-shadow: 0 -1px 10px rgba(0,0,0,.1);
+  .navbar-inner {
+    border-width: 1px 0 0;
+    .box-shadow(0 -1px 10px rgba(0,0,0,.1));
+  }
 }
 
 
   float: none;
   // Vertically center the text given @navbarHeight
   @elementHeight: 20px;
-  padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
-  line-height: 19px;
+  padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2);
   color: @navbarLinkColor;
   text-decoration: none;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
 }
 .navbar .nav .dropdown-toggle .caret {
   margin-top: 8px;
 }
 
-// Buttons
-.navbar .btn {
-  display: inline-block;
-  padding: 4px 10px 4px;
-  // Vertically center the button given @navbarHeight
-  @elementHeight: 28px;
-  margin: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
-  line-height: @baseLineHeight;
-}
-.navbar .btn-group {
-  margin: 0;
-  // Vertically center the button given @navbarHeight
-  @elementHeight: 28px;
-  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
-}
 // Hover
 .navbar .nav > li > a:focus,
 .navbar .nav > li > a:hover {
   color: @navbarLinkColorActive;
   text-decoration: none;
   background-color: @navbarLinkBackgroundActive;
-}
-
-// Dividers (basically a vertical hr)
-.navbar .divider-vertical {
-  height: @navbarHeight;
-  width: 1px;
-  margin: 0 9px;
-  overflow: hidden;
-  background-color: @navbarBackground;
-  border-right: 1px solid @navbarBackgroundHighlight;
-}
-
-// Secondary (floated right) nav in topbar
-.navbar .nav.pull-right {
-  margin-left: 10px;
-  margin-right: 0;
+  -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
+     -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
+          box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
 }
 
 // Navbar button for toggling navbar items in responsive layouts
 }
 
 
+
 // Dropdown menus
 // --------------
 
     top: auto;
   }
 }
-// Dropdown toggle caret
-.navbar .nav li.dropdown .dropdown-toggle .caret,
-.navbar .nav li.dropdown.open .caret {
-  border-top-color: @white;
-  border-bottom-color: @white;
-}
-.navbar .nav li.dropdown.active .caret {
-  .opacity(100);
-}
 
 // Remove background color from open dropdown
 .navbar .nav li.dropdown.open > .dropdown-toggle,
 .navbar .nav li.dropdown.active > .dropdown-toggle,
 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
-  background-color: transparent;
+  background-color: @navbarLinkBackgroundActive;
+  color: @navbarLinkColorActive;
 }
-
-// Dropdown link on hover
-.navbar .nav li.dropdown.active > .dropdown-toggle:focus,
-.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
-  color: @white;
+.navbar .nav li.dropdown > .dropdown-toggle .caret {
+  border-top-color: @navbarLinkColor;
+  border-bottom-color: @navbarLinkColor;
+}
+.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
+  border-top-color: @navbarLinkColorActive;
+  border-bottom-color: @navbarLinkColorActive;
 }
 
 // Right aligned menus need alt position
-// TODO: rejigger this at some point to simplify the selectors
 .navbar .pull-right .dropdown-menu,
 .navbar .dropdown-menu.pull-right {
   left: auto;
 }
 
 
-/* Subnav navbar
--------------------------------------------------- */
-// In the future, we may make two options available for the navbar:
-// a default state, the lighter one, and the darker one as an option
-// to enable. This would prevent some overriding back to defaults.
+// Inverted navbar
+// -------------------------
 
+.navbar-inverse {
+  color: @navbarInverseText;
 
-// Override the default .navbar
-.navbar-subnav .navbar-inner {
-  #gradient > .vertical(#ffffff, #f1f1f1);
-  .box-shadow(none);
-  border: 1px solid #e5e5e5;
-  padding-left: 10px;
-  padding-right: 10px;
+  .navbar-inner {
+    #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
+    border-color: @navbarInverseBorder;
+  }
+
+  .brand,
+  .nav > li > a {
+    color: @navbarInverseLinkColor;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+    &:hover {
+      color: @navbarInverseLinkColorHover;
+    }
+  }
+
+  .nav > li > a:focus,
+  .nav > li > a:hover {
+    background-color: @navbarInverseLinkBackgroundHover;
+    color: @navbarInverseLinkColorHover;
+  }
+
+  .nav .active > a,
+  .nav .active > a:hover,
+  .nav .active > a:focus {
+    color: @navbarInverseLinkColorActive;
+    background-color: @navbarInverseLinkBackgroundActive;
+  }
+
+  // Inline text links
+  .navbar-link {
+    color: @navbarInverseLinkColor;
+    &:hover {
+      color: @navbarInverseLinkColorHover;
+    }
+  }
+
+  // Dropdowns
+  .nav li.dropdown.open > .dropdown-toggle,
+  .nav li.dropdown.active > .dropdown-toggle,
+  .nav li.dropdown.open.active > .dropdown-toggle {
+    background-color: @navbarInverseLinkBackgroundActive;
+    color: @navbarInverseLinkColorActive;
+  }
+  .nav li.dropdown > .dropdown-toggle .caret {
+    border-top-color: @navbarInverseLinkColor;
+    border-bottom-color: @navbarInverseLinkColor;
+  }
+  .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: @navbarInverseLinkColorActive;
+    border-bottom-color: @navbarInverseLinkColorActive;
+  }
+
+  // Navbar search
+  .navbar-search {
+    .search-query {
+      color: @white;
+      background-color: @navbarInverseSearchBackground;
+      border-color: @navbarInverseSearchBorder;
+      .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
+      .transition(none);
+      .placeholder(@navbarInverseSearchPlaceholderColor);
+
+      // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
+      &:focus,
+      &.focused {
+        padding: 5px 15px;
+        color: @grayDark;
+        text-shadow: 0 1px 0 @white;
+        background-color: @navbarInverseSearchBackgroundFocus;
+        border: 0;
+        .box-shadow(0 0 3px rgba(0,0,0,.15));
+        outline: 0;
+      }
+    }
+  }
+
+  // Navbar collapse button
+  .btn-navbar {
+    .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
+  }
+
 }
 
-// Lighten vertical dividers
-.navbar-subnav .divider-vertical {
-  background-color: #f1f1f1;
-  border-right-color: #ffffff;
-}
 
 
-// Change link colors back
-.navbar-subnav .nav > li > a {
-  color: @linkColor;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-}
-.navbar-subnav .nav > li > a:hover {
-  color: @linkColorHover;
-}
-
-// Active nav links
-.navbar-subnav .nav > .active > a,
-.navbar-subnav .nav > .active > a:hover {
-  color: #777;
-  background-color: #eee;
-  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
-     -moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
-          box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
-}
-
-// Dropdown carets
-.navbar-subnav .nav li.dropdown .dropdown-toggle .caret,
-.navbar-subnav .nav li.dropdown.open .caret {
-  border-top-color: @linkColor;
-  border-bottom-color: @linkColor;
-}
-
-// Reset search input form
-.navbar-subnav .search-query {
-  background-color: #fff;
-  border-color: #ccc;
-  .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)");
-
-  // On :focus, keep the same padding and border
-  &:focus,
-  &.focused {
-    padding: 4px 9px;
-    border: 1px solid rgba(82,168,236,.8);
-    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)");
-  }
-}
-
-// Open dropdown dropdown-toggle
-.navbar-subnav .nav .open > a {
-  color: @linkColorHover;
-}
-
-// Collapse button
-.navbar-subnav .btn-navbar {
-  .buttonBackground(darken(#ffffff, 5%), darken(#f1f1f1, 5%));
-  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.25)");
-}
-.navbar .btn-navbar .icon-bar {
-  background-color: #999;
-  .box-shadow(0 1px 0 rgba(0,0,0,.25));
-}
-
-
-// Fixed subnav on scroll, but only for 980px and up (sorry IE!)
-.navbar-subnav-fixed {
-  position: fixed;
-  top: 40px;
-  left: 0;
-  right: 0;
-  z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
-  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1);
-     -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1);
-          box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1);
-}
-.navbar-subnav-fixed .navbar-inner {
-  border-color: #d5d5d5;
-  border-width: 0 0 1px; /* drop the border on the fixed edges */
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
-  .border-radius(0);
-}
-.navbar-subnav-fixed .nav {
-  float: none;
-  max-width: 970px;
-  margin: 0 auto;
-  padding: 0 1px;
-}
-.navbar-subnav .nav > li:first-child > a,
-.navbar-subnav .nav > li:first-child > a:hover {
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-

File lib/bootstrap/less/responsive-navbar.less

 
 // TABLETS AND BELOW
 // -----------------
-@media (max-width: 979px) {
+@media (max-width: @navbarCollapseWidth) {
 
   // UNFIX THE TOPBAR
   // ----------------

File lib/bootstrap/less/tables.less

 .table-bordered {
   border: 1px solid @tableBorder;
   border-collapse: separate; // Done so we can round those corners!
-  *border-collapse: collapsed; // IE7 can't round corners anyway
+  *border-collapse: collapse; // IE7 can't round corners anyway
   border-left: 0;
   .border-radius(4px);
   th,

File lib/bootstrap/less/variables.less

 // -------------------------
 @btnBackground:                     @white;
 @btnBackgroundHighlight:            darken(@white, 10%);
-@btnBorder:                         #ccc;
+@btnBorder:                         #bbb;
 
 @btnPrimaryBackground:              @linkColor;
 @btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
 
 // Navbar
 // -------------------------
+@navbarCollapseWidth:             979px;
+
 @navbarHeight:                    40px;
-@navbarBackground:                #111;
-@navbarBackgroundHighlight:       #222;
+@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
+@navbarBackgroundHighlight:       #ffffff;
+@navbarBorder:                    darken(@navbarBackground, 12%);
 
-@navbarText:                      @grayLight;
-@navbarLinkColor:                 @grayLight;
-@navbarLinkColorHover:            @white;
-@navbarLinkColorActive:           @navbarLinkColorHover;
+@navbarText:                      @gray;
+@navbarLinkColor:                 @gray;
+@navbarLinkColorHover:            @grayDark;
+@navbarLinkColorActive:           @gray;
 @navbarLinkBackgroundHover:       transparent;
-@navbarLinkBackgroundActive:      @navbarBackground;
+@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
 
 @navbarSearchBackground:          lighten(@navbarBackground, 25%);
 @navbarSearchBackgroundFocus:     @white;
 @navbarSearchPlaceholderColor:    #ccc;
 @navbarBrandColor:                @navbarLinkColor;
 
+// Inverted navbar
+@navbarInverseBackground:                #111111;
+@navbarInverseBackgroundHighlight:       #222222;
+@navbarInverseBorder:                    #252525;
+
+@navbarInverseText:                      @grayLight;
+@navbarInverseLinkColor:                 @grayLight;
+@navbarInverseLinkColorHover:            @white;
+@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
+@navbarInverseLinkBackgroundHover:       transparent;
+@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;
+
+@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
+@navbarInverseSearchBackgroundFocus:     @white;
+@navbarInverseSearchBorder:              @navbarInverseBackground;
+@navbarInverseSearchPlaceholderColor:    #ccc;
+
+@navbarInverseBrandColor:                @navbarInverseLinkColor;
+
+
 
 // Hero unit
 // -------------------------