Merge branch 'v4-dev' into v4-navbars

scss/_navbar.scss

@@ -105,10 +105,13 @@
 // Bootstrap JavaScript plugin.
 
 .navbar-toggler {
+  width: 2.5em;
+  height: 2em;
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
   font-size: $navbar-toggler-font-size;
   line-height: 1;
-  background: none;
+  background: transparent no-repeat center center;
+  background-size: 24px 24px;
   border: $border-width solid transparent;
   @include border-radius($navbar-toggler-border-radius);
 
@@ -117,28 +120,6 @@
   }
 }
 
-// scss-lint:disable ImportantRule
-// Custom override for
-.navbar-toggleable {
-  &-xs {
-    @include media-breakpoint-up(sm) {
-      display: block !important;
-    }
-  }
-  &-sm {
-    @include media-breakpoint-up(md) {
-      display: block !important;
-    }
-  }
-  &-md {
-    @include media-breakpoint-up(lg) {
-      display: block !important;
-    }
-  }
-}
-// scss-lint:enable ImportantRule
-
-
 // Navigation
 //
 // Custom navbar navigation built on the base `.nav` styles.
@@ -193,6 +174,10 @@
     }
   }
 
+  .navbar-toggler {
+    background-image: $navbar-light-toggler-bg;
+  }
+
   .navbar-divider {
     background-color: rgba(0,0,0,.075);
   }
@@ -228,7 +213,57 @@
     }
   }
 
+  .navbar-toggler {
+    background-image: $navbar-dark-toggler-bg;
+  }
+
   .navbar-divider {
     background-color: rgba(255,255,255,.075);
   }
 }
+
+
+// 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;
+    }
+  }
+}