Rename .navbar-toggleable-xs to .navbar-toggleable + more cleanup (#21226)

* Clean up some utilities

- Align CSS properties
- In `_spacing.scss`, we had a comment saying what 'a' was for, but we removed that so this comment no longer applies

* Remove '-xs' from `.navbar-toggleable-xs` and remove duplication

* Fix outdated classes to use newer ones

docs/_includes/nav-home.html

@@ -1,7 +1,7 @@
 <header class="navbar navbar-light navbar-static-top bd-navbar">
   <div class="container">
     {% comment %}
-    <nav class="nav navbar-nav float-xs-right">
+    <nav class="nav navbar-nav float-right">
       <div class="nav-item dropdown">
         <a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           v{{ site.current_version }}
@@ -27,12 +27,12 @@
 
     <nav>
       <div class="clearfix">
-        <button class="navbar-toggler float-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
+        <button class="navbar-toggler float-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
         <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
           Bootstrap
         </a>
       </div>
-      <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
+      <div class="collapse navbar-toggleable" id="bd-main-nav">
         <ul class="nav navbar-nav">
           <li class="nav-item active">
             <a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>

docs/examples/album/index.html

@@ -103,7 +103,7 @@
 
     <footer class="text-muted">
       <div class="container">
-        <p class="float-xs-right">
+        <p class="float-right">
           <a href="#">Back to top</a>
         </p>
         <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>

docs/examples/carousel/index.html

@@ -164,7 +164,7 @@
 
       <!-- FOOTER -->
       <footer>
-        <p class="float-xs-right"><a href="#">Back to top</a></p>
+        <p class="float-right"><a href="#">Back to top</a></p>
         <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
       </footer>
 

docs/examples/narrow-jumbotron/index.html

@@ -23,7 +23,7 @@
     <div class="container">
       <div class="header clearfix">
         <nav>
-          <ul class="nav nav-pills float-xs-right">
+          <ul class="nav nav-pills float-right">
             <li class="nav-item">
               <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
             </li>

docs/examples/navbar/index.html

@@ -23,7 +23,7 @@
     <div class="container">
       <nav class="navbar navbar-light bg-faded">
         <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
-        <div class="collapse navbar-toggleable-xs" id="navbar-header">
+        <div class="collapse navbar-toggleable" id="navbar-header">
           <a class="navbar-brand" href="#">Navbar</a>
           <ul class="nav navbar-nav">
             <li class="nav-item active">
@@ -39,7 +39,7 @@
               <a class="nav-link" href="#">About</a>
             </li>
           </ul>
-          <form class="form-inline float-xs-right">
+          <form class="form-inline float-right">
             <input class="form-control" type="text" placeholder="Search">
             <button class="btn btn-outline-success" type="submit">Search</button>
           </form>

docs/examples/offcanvas/index.html

@@ -35,7 +35,7 @@
       <div class="row row-offcanvas row-offcanvas-right">
 
         <div class="col-12 col-sm-9">
-          <p class="float-xs-right hidden-sm-up">
+          <p class="float-right hidden-sm-up">
             <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
           </p>
           <div class="jumbotron">

docs/examples/sticky-footer-navbar/index.html

@@ -31,7 +31,7 @@
       <nav class="navbar navbar-light navbar-static-top bg-faded">
         <div class="container">
           <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-expanded="false" aria-controls="exCollapsingNavbar2" aria-label="Toggle navigation"></button>
-          <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
+          <div class="collapse navbar-toggleable" id="exCollapsingNavbar2">
             <a class="navbar-brand" href="#">Sticky footer</a>
             <ul class="nav navbar-nav">
               <li class="nav-item active">

docs/examples/tooltip-viewport/index.html

@@ -20,7 +20,7 @@
 
   <body>
 
-    <button class="btn btn-secondary float-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
+    <button class="btn btn-secondary float-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
     <button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
     <button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>
 
@@ -30,7 +30,7 @@
       <button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
       <button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
 
-      <button class="btn btn-secondary float-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
+      <button class="btn btn-secondary float-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
 
       <button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
     </div>

scss/_navbar.scss

@@ -128,42 +128,6 @@
   }
 }
 
-// scss-lint:disable ImportantRule
-.navbar-toggleable {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-
-    &-#{$breakpoint} {
-      @include clearfix;
-
-      @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;
-          }
-        }
-      }
-
-      @include media-breakpoint-up($next) {
-        display: block;
-      }
-    }
-  }
-}
-// scss-lint:enable ImportantRule
-
-
 // Navigation
 //
 // Custom navbar navigation built on the base `.nav` styles.
@@ -284,48 +248,48 @@
   }
 }
 
-
 // Navbar toggleable
 //
 // Custom override for collapse plugin in navbar.
 
+// Placed at the end of the file so it can override some CSS properties
+// scss-lint:disable ImportantRule
 .navbar-toggleable {
-  &-xs {
+  @each $breakpoint in map-keys($grid-breakpoints) {
-    @include clearfix;
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    @include media-breakpoint-down(xs) {
-      .navbar-nav .nav-item {
-        float: none;
-        margin-left: 0;
-      }
-    }
-    @include media-breakpoint-up(sm) {
-      display: block !important;
-    }
-  }
 
-  &-sm {
+    // Get rid of the 'xs' prefix while reducing duplication
-    @include clearfix;
+    #{if(breakpoint-min($breakpoint, $grid-breakpoints), "&-#{$breakpoint}", "&")} {
-    @include media-breakpoint-down(sm) {
+      @include clearfix;
-      .navbar-nav .nav-item {
-        float: none;
-        margin-left: 0;
-      }
-    }
-    @include media-breakpoint-up(md) {
-      display: block !important;
-    }
-  }
 
-  &-md {
+      @include media-breakpoint-down($breakpoint) {
-    @include clearfix;
+        .navbar-brand {
-    @include media-breakpoint-down(md) {
+          display: block;
-      .navbar-nav .nav-item {
+          float: none;
-        float: none;
+          margin-top: .5rem;
-        margin-left: 0;
+          margin-right: 0;
+        }
+
+        .navbar-nav {
+          margin-top: .5rem;
+          margin-bottom: .5rem;
+
+          .dropdown-menu {
+            position: static;
+            float: none;
+          }
+
+          .nav-item {
+            float: none;
+            margin-left: 0;
+          }
+        }
+      }
+
+      @include media-breakpoint-up($next) {
+        display: block !important;
       }
-    }
-    @include media-breakpoint-up(lg) {
-      display: block !important;
     }
   }
 }
+// scss-lint:enable ImportantRule

scss/utilities/_align.scss

@@ -1,6 +1,6 @@
-.align-baseline { vertical-align: baseline !important; } // Browser default
+.align-baseline    { vertical-align: baseline !important; } // Browser default
-.align-top { vertical-align: top !important; }
+.align-top         { vertical-align: top !important; }
-.align-middle { vertical-align: middle !important; }
+.align-middle      { vertical-align: middle !important; }
-.align-bottom { vertical-align: bottom !important; }
+.align-bottom      { vertical-align: bottom !important; }
 .align-text-bottom { vertical-align: text-bottom !important; }
-.align-text-top { vertical-align: text-top !important; }
+.align-text-top    { vertical-align: text-top !important; }

scss/utilities/_borders.scss

@@ -2,11 +2,11 @@
 // Border
 //
 
-.border-0 { border: 0 !important; }
+.border-0        { border: 0 !important; }
-.border-top-0 { border-top: 0 !important; }
+.border-top-0    { border-top: 0 !important; }
-.border-right-0 { border-right: 0 !important; }
+.border-right-0  { border-right: 0 !important; }
 .border-bottom-0 { border-bottom: 0 !important; }
-.border-left-0 { border-left: 0 !important; }
+.border-left-0   { border-left: 0 !important; }
 
 //
 // Border-radius

scss/utilities/_display.scss

@@ -8,21 +8,21 @@
     $min: breakpoint-min($breakpoint, $grid-breakpoints);
 
     @if $min {
-      .d-#{$breakpoint}-none { display: none !important; }
+      .d-#{$breakpoint}-none         { display: none !important; }
-      .d-#{$breakpoint}-inline { display: inline !important; }
+      .d-#{$breakpoint}-inline       { display: inline !important; }
       .d-#{$breakpoint}-inline-block { display: inline-block !important; }
-      .d-#{$breakpoint}-block { display: block !important; }
+      .d-#{$breakpoint}-block        { display: block !important; }
-      .d-#{$breakpoint}-table { display: table !important; }
+      .d-#{$breakpoint}-table        { display: table !important; }
-      .d-#{$breakpoint}-table-cell { display: table-cell !important; }
+      .d-#{$breakpoint}-table-cell   { display: table-cell !important; }
-      .d-#{$breakpoint}-flex { display: flex !important; }
+      .d-#{$breakpoint}-flex         { display: flex !important; }
     } @else {
-      .d-none { display: none !important; }
+      .d-none         { display: none !important; }
-      .d-inline { display: inline !important; }
+      .d-inline       { display: inline !important; }
       .d-inline-block { display: inline-block !important; }
-      .d-block { display: block !important; }
+      .d-block        { display: block !important; }
-      .d-table { display: table !important; }
+      .d-table        { display: table !important; }
-      .d-table-cell { display: table-cell !important; }
+      .d-table-cell   { display: table-cell !important; }
-      .d-flex { display: flex !important; }
+      .d-flex         { display: flex !important; }
     }
   }
 }

scss/utilities/_float.scss

@@ -4,14 +4,14 @@
 
     @if $min {
       // everything else
-      .float-#{$breakpoint}-left { @include float-left; }
+      .float-#{$breakpoint}-left  { @include float-left; }
       .float-#{$breakpoint}-right { @include float-right; }
-      .float-#{$breakpoint}-none { @include float-none; }
+      .float-#{$breakpoint}-none  { @include float-none; }
     } @else {
       // xs
-      .float-left { @include float-left; }
+      .float-left  { @include float-left; }
       .float-right { @include float-right; }
-      .float-none { @include float-none; }
+      .float-none  { @include float-none; }
     }
   }
 }

scss/utilities/_spacing.scss

@@ -24,7 +24,7 @@
 
         @if $min {
           // everything else
-          .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
+          .#{$abbrev}-#{$breakpoint}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
           .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top:    $length-y !important; }
           .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right:  $length-x !important; }
           .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; }
@@ -39,7 +39,7 @@
           }
         } @else {
           // xs
-          .#{$abbrev}-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
+          .#{$abbrev}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
           .#{$abbrev}t-#{$size} { #{$prop}-top:    $length-y !important; }
           .#{$abbrev}r-#{$size} { #{$prop}-right:  $length-x !important; }
           .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }

scss/utilities/_text.scss

@@ -4,9 +4,9 @@
 
 // Alignment
 
-.text-justify        { text-align: justify !important; }
+.text-justify  { text-align: justify !important; }
-.text-nowrap         { white-space: nowrap !important; }
+.text-nowrap   { white-space: nowrap !important; }
-.text-truncate       { @include text-truncate; }
+.text-truncate { @include text-truncate; }
 
 // Responsive alignment
 
@@ -28,15 +28,15 @@
 
 // Transformation
 
-.text-lowercase      { text-transform: lowercase !important; }
+.text-lowercase  { text-transform: lowercase !important; }
-.text-uppercase      { text-transform: uppercase !important; }
+.text-uppercase  { text-transform: uppercase !important; }
-.text-capitalize     { text-transform: capitalize !important; }
+.text-capitalize { text-transform: capitalize !important; }
 
 // Weight and italics
 
-.font-weight-normal  { font-weight: $font-weight-normal; }
+.font-weight-normal { font-weight: $font-weight-normal; }
-.font-weight-bold    { font-weight: $font-weight-bold; }
+.font-weight-bold   { font-weight: $font-weight-bold; }
-.font-italic         { font-style: italic; }
+.font-italic        { font-style: italic; }
 
 // Contextual colors