new navbar ideas

5 files changed, 67 insertions, 21 deletions

diff --git a/less/buttons.less b/less/buttons.less
index 2132c0868..1cd48a056 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -15,7 +15,7 @@
   touch-action: manipulation;
   cursor: pointer;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-  border: 1px solid transparent;
+  border: @border-width solid transparent;
   white-space: nowrap;
   .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
   user-select: none;
diff --git a/less/navbar.less b/less/navbar.less
index 65e780e68..988c61804 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -10,9 +10,10 @@
 
 .navbar {
   position: relative;
-  min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
+  padding: @spacer;
+  /*min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)*/
   margin-bottom: @navbar-margin-bottom;
-  border: 1px solid transparent;
+  /*border: 1px solid transparent;*/
 
   // Prevent floats from breaking the navbar
   &:extend(.clearfix all);
@@ -163,13 +164,15 @@
 
 .navbar-brand {
   float: left;
-  padding: @navbar-padding-vertical @navbar-padding-horizontal;
+  padding: .55rem .75rem;
+  margin-right: @spacer;
+  margin-bottom: 0; // For headings
   font-size: @font-size-large;
   line-height: @line-height-computed;
-  height: @navbar-height;
+  /*height: @navbar-height;*/
 
-  &:hover,
-  &:focus {
+  > a:hover,
+  > a:focus {
     text-decoration: none;
   }
 
@@ -177,14 +180,34 @@
     display: block;
   }
 
+/*
   @media (min-width: @grid-float-breakpoint) {
     .navbar > .container &,
     .navbar > .container-fluid & {
       margin-left: -@navbar-padding-horizontal;
     }
   }
+*/
 }
 
+// New hotness
+.navbar-toggler {
+  float: left;
+  padding: .55rem .75rem;
+  margin-right: @spacer;
+  margin-bottom: 0; // For headings
+  font-size: @font-size-large;
+  line-height: @line-height-computed;
+  background: none;
+  border: 0;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}
+
+
 
 // Navbar toggle
 //
@@ -225,6 +248,7 @@
 }
 
 
+
 // Navbar nav links
 //
 // Builds on top of the `.nav` components with its own modifier class to make
@@ -524,6 +548,29 @@
   background-color: @navbar-inverse-bg;
   border-color: @navbar-inverse-border;
 
+  .navbar-brand > a,
+  .nav-pills > .nav-item > .nav-link {
+    color: @navbar-inverse-link-color;
+
+    &:hover,
+    &:focus {
+      color: @navbar-inverse-link-hover-color;
+    }
+  }
+  .nav-pills > .nav-item > .nav-link {
+    &:hover,
+    &:focus {
+      color: @navbar-inverse-link-active-color;
+      background-color: @navbar-inverse-link-active-bg;
+    }
+  }
+  .nav-pills > .active > .nav-link,
+  .nav-pills > .nav-link.active {
+    color: @navbar-inverse-link-active-color;
+    background-color: @navbar-inverse-link-active-bg;
+  }
+
+
   .navbar-brand {
     color: @navbar-inverse-brand-color;
     &:hover,
diff --git a/less/navs.less b/less/navs.less
index 48c6e06d8..07c319ab7 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -3,6 +3,7 @@
 // --------------------------------------------------
 
 .nav {
+  margin-bottom: 0;
   .list-unstyled();
   &:extend(.clearfix all);
 }
@@ -44,7 +45,6 @@
 //
 
 .nav-tabs {
-  margin-bottom: @line-height-computed;
   border-bottom: 1px solid @nav-tabs-border-color;
 
   .nav-item {
@@ -99,8 +99,6 @@
 //
 
 .nav-pills {
-  margin-bottom: @line-height-computed;
-
   .nav-item {
     float: left;
 
diff --git a/less/type.less b/less/type.less
index bc4be377c..1bbf1af31 100644
--- a/less/type.less
+++ b/less/type.less
@@ -8,6 +8,7 @@
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
+  margin-top: 0;
   font-family: @headings-font-family;
   font-weight: @headings-font-weight;
   line-height: @headings-line-height;
@@ -24,7 +25,6 @@ h1, h2, h3, h4, h5, h6,
 h1, .h1,
 h2, .h2,
 h3, .h3 {
-  margin-top: @line-height-computed;
   margin-bottom: (@line-height-computed / 2);
 
   small,
@@ -35,7 +35,6 @@ h3, .h3 {
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  margin-top: (@line-height-computed / 2);
   margin-bottom: (@line-height-computed / 2);
 
   small,
diff --git a/less/variables.less b/less/variables.less
index 2115d31cd..665194069 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -45,6 +45,8 @@
 @enable-gradients:          true;
 @enable-transitions:        true;
 
+@spacer: 1rem;
+@border-width: .05rem;
 
 //== Typography
 //
@@ -88,7 +90,7 @@
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
 @padding-base-vertical:     .5rem;
-@padding-base-horizontal:   1rem;
+@padding-base-horizontal:   .75rem;
 
 @padding-large-vertical:    .75rem;
 @padding-large-horizontal:  1.5rem;
@@ -102,7 +104,7 @@
 @line-height-large:         1.33;
 @line-height-small:         1.5;
 
-@border-radius-base:        .2rem;
+@border-radius-base:        .25rem;
 @border-radius-large:       .3rem;
 @border-radius-small:       .2rem;
 
@@ -122,7 +124,7 @@
 //## Customizes the `.table` component with basic values, each used across all table variations.
 
 //** Padding for `<th>`s and `<td>`s.
-@table-cell-padding:            .6rem;
+@table-cell-padding:            .5rem;
 //** Padding for cells in `.table-condensed`.
 @table-condensed-cell-padding:  .3rem;
 
@@ -135,7 +137,7 @@
 @table-bg-active:               @table-bg-hover;
 
 //** Border color for table and cell borders.
-@table-border-color:            #ddd;
+@table-border-color:            @gray-lighter;
 
 
 //== Buttons
@@ -194,11 +196,11 @@
 @input-color-placeholder:        #999;
 
 //** Default `.form-control` height
-@input-height-base:              ((@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + .2);
+@input-height-base:              ((@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + (@border-width * 2));
 //** Large `.form-control` height
-@input-height-large:             ((@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + .2);
+@input-height-large:             ((@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + (@border-width * 2));
 //** Small `.form-control` height
-@input-height-small:             ((@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + .2);
+@input-height-small:             ((@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + (@border-width * 2));
 
 @legend-color:                   @gray-dark;
 @legend-border-color:            #e5e5e5;
@@ -342,7 +344,7 @@
 // Inverted navbar
 // Reset inverted navbar basics
 @navbar-inverse-color:                      lighten(@gray-light, 12%);
-@navbar-inverse-bg:                         #222;
+@navbar-inverse-bg:                         #373a3c;
 @navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
 
 // Inverted navbar links
@@ -370,7 +372,7 @@
 //##
 
 //=== Shared nav styles
-@nav-link-padding:                          .5em 1em;
+@nav-link-padding:                          .6em 1em;
 @nav-link-hover-bg:                         @gray-lighter;
 
 @nav-disabled-link-color:                   @gray-light;