Make .nav flex-powered

- Set an explicit `display: flex` on the base `.nav` class and remove the floats/clearfixes from our navs.

- Set some global styles for `.nav-link`, a departure from the previous solution that featured no predefined padding.

- Move `.nav-link` from `inline-block` to `block` given this setting was added for our tabs and pills anyway.

- Remove horizontal margin from nav tabs; let folks set that on their own from now on.

diff --git a/scss/_nav.scss b/scss/_nav.scss
index 10d5f5c6220cac187c0f1705e58ca07092aca009..66d16ef061c7c548756709382491ad0b9afa9bf6 100644 (file)
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -4,13 +4,15 @@
 // `<nav>`s or `<ul>`s.
 
 .nav {
+  display: flex;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
 }
 
 .nav-link {
-  display: inline-block;
+  display: block;
+  padding: $nav-link-padding;
 
   @include hover-focus {
     text-decoration: none;
@@ -29,41 +31,18 @@
 }
 
 
-// Nav inline
-
-.nav-inline {
-  .nav-item {
-    display: inline-block;
-  }
-
-  .nav-item + .nav-item,
-  .nav-link + .nav-link {
-    margin-left: $nav-item-inline-spacer;
-  }
-}
-
-
 //
 // Tabs
 //
 
 .nav-tabs {
   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
-  @include clearfix();
 
   .nav-item {
-    float: left;
-    // Make the list-items overlay the bottom border
     margin-bottom: -$nav-tabs-border-width;
-
-    + .nav-item {
-      margin-left: $nav-item-margin;
-    }
   }
 
   .nav-link {
-    display: block;
-    padding: $nav-link-padding;
     border: $nav-tabs-border-width solid transparent;
     @include border-top-radius($nav-tabs-border-radius);
 
@@ -103,19 +82,7 @@
 //
 
 .nav-pills {
-  @include clearfix();
-
-  .nav-item {
-    float: left;
-
-    + .nav-item {
-      margin-left: $nav-item-margin;
-    }
-  }
-
   .nav-link {
-    display: block;
-    padding: $nav-link-padding;
     @include border-radius($nav-pills-border-radius);
   }