Merge branch 'v4-navbars' of github.com:twbs/bootstrap into v4-navbars

docs/components/navbar.md

@@ -69,13 +69,14 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
 <nav class="navbar navbar-light bg-faded">
   <h1 class="navbar-brand mb-0">Navbar</h1>
 </nav>
-
 {% endexample %}
 
 ### Nav
 
 Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.
 
+Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
+
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
   <ul class="nav navbar-nav">
@@ -136,6 +137,38 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
 </nav>
 {% endexample %}
 
+### Text
+
+Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <span class="navbar-text">
+    Navbar text with an inline element
+  </span>
+</nav>
+{% endexample %}
+
+Using our utility classes, you can change the alignment and appearance of your navbar text.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <span class="navbar-text pull-xs-right text-muted">
+    Muted navbar text that's floated right
+  </span>
+</nav>
+{% endexample %}
+
+Similarly, you can use utility classes to align navbar text to other navbar elements like the brand and navigation (which are automatically floated already).
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Navbar</a>
+  <span class="navbar-text pull-xs-left">
+    Navbar text that's floated left
+  </span>
+</nav>
+{% endexample %}
 
 ## Color schemes
 

scss/_navbar.scss

@@ -99,6 +99,17 @@
 }
 
 
+// Navbar text
+//
+//
+
+.navbar-text {
+  display: inline-block;
+  padding-top:    .425rem;
+  padding-bottom: .425rem;
+}
+
+
 // Navbar toggle
 //
 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
@@ -120,6 +131,31 @@
   }
 }
 
+// scss-lint:disable ImportantRule
+// Custom override for
+.navbar-toggleable {
+  &-xs {
+    @include clearfix;
+    @include media-breakpoint-up(sm) {
+      display: block !important;
+    }
+  }
+  &-sm {
+    @include clearfix;
+    @include media-breakpoint-up(md) {
+      display: block !important;
+    }
+  }
+  &-md {
+    @include clearfix;
+    @include media-breakpoint-up(lg) {
+      display: block !important;
+    }
+  }
+}
+// scss-lint:enable ImportantRule
+
+
 // Navigation
 //
 // Custom navbar navigation built on the base `.nav` styles.

scss/_variables.scss

@@ -500,6 +500,8 @@ $navbar-brand-padding-y:            .25rem !default;
 
 $navbar-divider-padding-y:          .425rem !default;
 
+$navbar-toggler-padding-x:           .75rem !default;
+$navbar-toggler-padding-y:           .5rem !default;
 $navbar-toggler-font-size:           $font-size-lg !default;
 $navbar-toggler-border-radius:       $btn-border-radius !default;
 $navbar-toggler-padding-x:           .75rem !default;
@@ -511,10 +513,10 @@ $navbar-dark-active-color:          rgba(255,255,255,1) !default;
 $navbar-dark-disabled-color:        rgba(255,255,255,.25) !default;
 $navbar-dark-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
 
-$navbar-light-color:                rgba(0,0,0,.3) !default;
+$navbar-light-color:                rgba(0,0,0,.5) !default;
-$navbar-light-hover-color:          rgba(0,0,0,.6) !default;
+$navbar-light-hover-color:          rgba(0,0,0,.7) !default;
-$navbar-light-active-color:         rgba(0,0,0,.8) !default;
+$navbar-light-active-color:         rgba(0,0,0,.9) !default;
-$navbar-light-disabled-color:       rgba(0,0,0,.15) !default;
+$navbar-light-disabled-color:       rgba(0,0,0,.3) !default;
 $navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;