Iterate over breakpoints to generate .navbar-toggleable classes

- Moves .navbar-brand margin and float to media queries
- Replaces the static media queries with an each loop to generate all the needed classes

1 files changed, 12 insertions, 19 deletions

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index def526fdd..2d504cbc4 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -68,10 +68,9 @@
 //
 
 .navbar-brand {
-  float: left;
+  display: block;
   padding-top:    $navbar-brand-padding-y;
   padding-bottom: $navbar-brand-padding-y;
-  margin-right: 1rem;
   font-size: $font-size-lg;
 
   @include hover-focus {
@@ -132,24 +131,18 @@
 }
 
 // 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;
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    &-#{$breakpoint} {
+      @include clearfix;
+      @include media-breakpoint-up($breakpoint) {
+        display: block !important;
+
+        .navbar-brand {
+          float: left;
+          margin-right: 1rem;
+        }
+      }
     }
   }
 }