bootstrap 4.0.0.alpha5 → 4.0.0.alpha6

data/assets/stylesheets/bootstrap/_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;
@@ -19,26 +21,7 @@
   // Disabled state lightens text and removes hover/tab effects
   &.disabled {
     color: $nav-disabled-link-color;
-
-    @include plain-hover-focus {
-      color: $nav-disabled-link-hover-color;
-      cursor: $cursor-disabled;
-      background-color: $nav-disabled-link-hover-bg;
-    }
-  }
-}
-
-
-// Nav inline
-
-.nav-inline {
-  .nav-item {
-    display: inline-block;
-  }
-
-  .nav-item + .nav-item,
-  .nav-link + .nav-link {
-    margin-left: $nav-item-inline-spacer;
+    cursor: $cursor-disabled;
   }
 }
 
@@ -49,21 +32,12 @@
 
 .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);
 
@@ -72,21 +46,17 @@
     }
 
     &.disabled {
-      @include plain-hover-focus {
-        color: $nav-disabled-link-color;
-        background-color: transparent;
-        border-color: transparent;
-      }
+      color: $nav-disabled-link-color;
+      background-color: transparent;
+      border-color: transparent;
     }
   }
 
   .nav-link.active,
-  .nav-item.open .nav-link {
-    @include plain-hover-focus {
-      color: $nav-tabs-active-link-hover-color;
-      background-color: $nav-tabs-active-link-hover-bg;
-      border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
-    }
+  .nav-item.show .nav-link {
+    color: $nav-tabs-active-link-hover-color;
+    background-color: $nav-tabs-active-link-hover-bg;
+    border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg;
   }
 
   .dropdown-menu {
@@ -103,50 +73,42 @@
 //
 
 .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);
   }
 
   .nav-link.active,
-  .nav-item.open .nav-link {
-    @include plain-hover-focus {
-      color: $nav-pills-active-link-color;
-      cursor: default;
-      background-color: $nav-pills-active-link-bg;
-    }
+  .nav-item.show .nav-link {
+    color: $nav-pills-active-link-color;
+    cursor: default;
+    background-color: $nav-pills-active-link-bg;
   }
 }
 
-.nav-stacked {
+
+//
+// Justified variants
+//
+
+.nav-fill {
   .nav-item {
-    display: block;
-    float: none;
+    flex: 1 1 auto;
+    text-align: center;
+  }
+}
 
-    + .nav-item {
-      margin-top: $nav-item-margin;
-      margin-left: 0;
-    }
+.nav-justified {
+  .nav-item {
+    flex: 1 1 100%;
+    text-align: center;
   }
 }
 
 
-//
 // Tabbable tabs
 //
-
 // Hide tabbable panes to start, show them when `.active`
+
 .tab-content {
   > .tab-pane {
     display: none;

data/assets/stylesheets/bootstrap/_navbar.scss

@@ -1,79 +1,40 @@
-// Wrapper and base class
+// Contents
+//
+// Navbar
+// Navbar brand
+// Navbar nav
+// Navbar text
+// Navbar divider
+// Responsive navbar
+// Navbar position
+// Navbar themes
+
+
+// Navbar
 //
 // Provide a static navbar from which we expand to create full-width, fixed, and
 // other navbar variations.
 
 .navbar {
   position: relative;
+  display: flex;
+  flex-direction: column;
   padding: $navbar-padding-y $navbar-padding-x;
-  @include clearfix;
-
-  @include media-breakpoint-up(sm) {
-    @include border-radius($navbar-border-radius);
-  }
 }
 
 
-// Navbar alignment options
-//
-// Display the navbar across the entirety of the page or fixed it to the top or
-// bottom of the page.
-
-// A static, full width modifier with no rounded corners.
-.navbar-full {
-  z-index: $zindex-navbar;
-
-  @include media-breakpoint-up(sm) {
-    @include border-radius(0);
-  }
-}
-
-// Fix the top/bottom navbars when screen real estate supports it
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  position: fixed;
-  right: 0;
-  left: 0;
-  z-index: $zindex-navbar-fixed;
-
-  // Undo the rounded corners
-  @include media-breakpoint-up(sm) {
-    @include border-radius(0);
-  }
-}
-
-.navbar-fixed-top {
-  top: 0;
-}
-
-.navbar-fixed-bottom {
-  bottom: 0;
-}
-
-.navbar-sticky-top {
-  position: sticky;
-  top: 0;
-  z-index: $zindex-navbar-sticky;
-  width: 100%;
-
-  // Undo the rounded corners
-  @include media-breakpoint-up(sm) {
-    @include border-radius(0);
-  }
-}
-
-
-//
-// Brand/project name
+// Navbar brand
 //
+// Used for brand, project, or site names.
 
 .navbar-brand {
-  float: left;
-  padding-top: $navbar-brand-padding-y;
-  padding-bottom: $navbar-brand-padding-y;
-  margin-right: 1rem;
+  display: inline-block;
+  padding-top: .25rem;
+  padding-bottom: .25rem;
+  margin-right: $navbar-padding-x;
   font-size: $font-size-lg;
   line-height: inherit;
+  white-space: nowrap;
 
   @include hover-focus {
     text-decoration: none;
@@ -81,17 +42,20 @@
 }
 
 
-.navbar-divider {
-  float: left;
-  width: $border-width;
-  padding-top: $navbar-divider-padding-y;
-  padding-bottom: $navbar-divider-padding-y;
-  margin-right: $navbar-padding-x;
-  margin-left:  $navbar-padding-x;
-  overflow: hidden;
+// Navbar nav
+//
+// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
+
+.navbar-nav {
+  display: flex;
+  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
 
-  &::before {
-    content: "\00a0";
+  .nav-link {
+    padding-right: 0;
+    padding-left: 0;
   }
 }
 
@@ -107,20 +71,19 @@
 }
 
 
-// Navbar toggle
+// Responsive navbar
 //
-// Custom button for toggling the `.navbar-collapse`, powered by the collapse
-// Bootstrap JavaScript plugin.
+// Custom styles for responsive collapsing and toggling of navbar contents.
+// Powered by the collapse Bootstrap JavaScript plugin.
 
+// Button for toggling the navbar when in its collapsed state
 .navbar-toggler {
-  width: 2.5em;
-  height: 2em;
+  align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
   font-size: $navbar-toggler-font-size;
   line-height: 1;
-  background: transparent no-repeat center center;
-  background-size: 24px 24px;
-  border: $border-width solid transparent;
+  background: transparent; // remove default button style
+  border: $border-width solid transparent; // remove default button style
   @include border-radius($navbar-toggler-border-radius);
 
   @include hover-focus {
@@ -128,66 +91,92 @@
   }
 }
 
-// scss-lint:disable ImportantRule
+// Keep as a separate element so folks can easily override it with another icon
+// or image file as needed.
+.navbar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  content: "";
+  background: no-repeat center center;
+  background-size: 100% 100%;
+}
+
+// Use `position` on the toggler to prevent it from being auto placed as a flex
+// item and allow easy placement.
+.navbar-toggler-left {
+  position: absolute;
+  left: $navbar-padding-x;
+}
+.navbar-toggler-right {
+  position: absolute;
+  right: $navbar-padding-x;
+}
+
+// Generate series of `.navbar-toggleable-*` responsive classes for configuring
+// where your navbar collapses.
 .navbar-toggleable {
   @each $breakpoint in map-keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    &-#{$breakpoint} {
-      @include clearfix;
-
+    &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
-        .navbar-brand {
-          display: block;
-          float: none;
-          margin-top: .5rem;
-          margin-right: 0;
-        }
-
         .navbar-nav {
-          margin-top: .5rem;
-          margin-bottom: .5rem;
-
           .dropdown-menu {
             position: static;
             float: none;
           }
         }
+
+        > .container {
+          padding-right: 0;
+          padding-left: 0;
+        }
       }
 
       @include media-breakpoint-up($next) {
-        display: block;
-      }
-    }
-  }
-}
-// scss-lint:enable ImportantRule
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
 
+        .navbar-nav {
+          flex-direction: row;
 
-// Navigation
-//
-// Custom navbar navigation built on the base `.nav` styles.
+          .nav-link {
+            padding-right: .5rem;
+            padding-left: .5rem;
+          }
+        }
 
-.navbar-nav {
-  .nav-item {
-    float: left;
-  }
+        // For nesting containers, have to redeclare for alignment purposes
+        > .container {
+          display: flex;
+          flex-wrap: nowrap;
+          align-items: center;
+        }
 
-  .nav-link {
-    display: block;
-    padding-top:    .425rem;
-    padding-bottom: .425rem;
+        // scss-lint:disable ImportantRule
+        .navbar-collapse {
+          display: flex !important;
+          width: 100%;
+        }
+        // scss-lint:enable ImportantRule
 
-    + .nav-link {
-      margin-left: 1rem;
+        .navbar-toggler {
+          display: none;
+        }
+      }
     }
   }
-
-  .nav-item + .nav-item {
-    margin-left: 1rem;
-  }
 }
 
+
+// Navbar themes
+//
+// Styles for switching between navbars with light or dark background.
+
 // Dark links against a light background
 .navbar-light {
   .navbar-brand,
@@ -206,45 +195,54 @@
       @include hover-focus {
         color: $navbar-light-hover-color;
       }
+
+      &.disabled {
+        color: $navbar-light-disabled-color;
+      }
     }
 
     .open > .nav-link,
     .active > .nav-link,
     .nav-link.open,
     .nav-link.active {
-      @include plain-hover-focus {
-        color: $navbar-light-active-color;
-      }
+      color: $navbar-light-active-color;
     }
   }
 
   .navbar-toggler {
-    background-image: $navbar-light-toggler-bg;
     border-color: $navbar-light-toggler-border;
   }
 
-  .navbar-divider {
-    background-color: rgba(0,0,0,.075);
+  .navbar-toggler-icon {
+    background-image: $navbar-light-toggler-bg;
+  }
+
+  .navbar-text {
+    color: $navbar-light-color;
   }
 }
 
 // White links against a dark background
-.navbar-dark {
+.navbar-inverse {
   .navbar-brand,
   .navbar-toggler {
-    color: $navbar-dark-active-color;
+    color: $navbar-inverse-active-color;
 
     @include hover-focus {
-      color: $navbar-dark-active-color;
+      color: $navbar-inverse-active-color;
     }
   }
 
   .navbar-nav {
     .nav-link {
-      color: $navbar-dark-color;
+      color: $navbar-inverse-color;
 
       @include hover-focus {
-        color: $navbar-dark-hover-color;
+        color: $navbar-inverse-hover-color;
+      }
+
+      &.disabled {
+        color: $navbar-inverse-disabled-color;
       }
     }
 
@@ -252,64 +250,19 @@
     .active > .nav-link,
     .nav-link.open,
     .nav-link.active {
-      @include plain-hover-focus {
-        color: $navbar-dark-active-color;
-      }
+      color: $navbar-inverse-active-color;
     }
   }
 
   .navbar-toggler {
-    background-image: $navbar-dark-toggler-bg;
-    border-color: $navbar-dark-toggler-border;
+    border-color: $navbar-inverse-toggler-border;
   }
 
-  .navbar-divider {
-    background-color: rgba(255,255,255,.075);
+  .navbar-toggler-icon {
+    background-image: $navbar-inverse-toggler-bg;
   }
-}
 
-
-// Navbar toggleable
-//
-// Custom override for collapse plugin in navbar.
-
-.navbar-toggleable {
-  &-xs {
-    @include clearfix;
-    @include media-breakpoint-down(xs) {
-      .navbar-nav .nav-item {
-        float: none;
-        margin-left: 0;
-      }
-    }
-    @include media-breakpoint-up(sm) {
-      display: block !important;
-    }
-  }
-
-  &-sm {
-    @include clearfix;
-    @include media-breakpoint-down(sm) {
-      .navbar-nav .nav-item {
-        float: none;
-        margin-left: 0;
-      }
-    }
-    @include media-breakpoint-up(md) {
-      display: block !important;
-    }
-  }
-
-  &-md {
-    @include clearfix;
-    @include media-breakpoint-down(md) {
-      .navbar-nav .nav-item {
-        float: none;
-        margin-left: 0;
-      }
-    }
-    @include media-breakpoint-up(lg) {
-      display: block !important;
-    }
+  .navbar-text {
+    color: $navbar-inverse-color;
   }
 }