Rename `.flex-xs-*` and `.flex-items-xs-*` to `.flex-*` and `.flex-items-*` (#21218)

* Clean up _flex.scss a little

This commit just cleans up the formating of _flex.scss by changing
it so that it uses a single `@include media-breakpoint-up` instead
of multiple. It also aligns all of the CSS properties so it looks
a bit nicer.

* Remove `-xs` from flex classes

diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index dea8eb5f348684a624999c6fb414841796d2339e..01cd0187103a5e7edfc2137d5d3f3944e2003e0e 100644 (file)
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -19,9 +19,9 @@
     }
   }
 
-  .flex-items-xs-top,
-  .flex-items-xs-middle,
-  .flex-items-xs-bottom {
+  .flex-items-top,
+  .flex-items-middle,
+  .flex-items-bottom {
     min-height: 6rem;
     background-color: rgba(255,0,0,.1);
   }

diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 49a6ced6313fd33ff2bbf2b39a1fa413ae6ffe2f..820470bbba4d2cc448e5982446bc5310ef48c691 100644 (file)
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -46,19 +46,19 @@ Add badges to any list group item to show unread counts, activity, etc.
 </ul>
 {% endexample %}
 
-When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-xs-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges.
+When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges.
 
 {% highlight html %}
 <ul class="list-group">
-  <li class="list-group-item flex-items-xs-between">
+  <li class="list-group-item flex-items-between">
     Cras justo odio
     <span class="badge badge-default badge-pill">14</span>
   </li>
-  <li class="list-group-item flex-items-xs-between">
+  <li class="list-group-item flex-items-between">
     Dapibus ac facilisis in
     <span class="badge badge-default badge-pill">2</span>
   </li>
-  <li class="list-group-item flex-items-xs-between">
+  <li class="list-group-item flex-items-between">
     Morbi leo risus
     <span class="badge badge-default badge-pill">1</span>
   </li>

diff --git a/docs/components/navs.md b/docs/components/navs.md
index 86fd0463fc6b3472cca1927a8b5c181a7d464871..7ac1b52324a7614cba312a3c0910dec2ec34f4e4 100644 (file)
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -282,7 +282,7 @@ And pills, too:
 Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component.
 
 {% example html %}
-<ul class="nav nav-inline d-flex flex-items-xs-center">
+<ul class="nav nav-inline d-flex flex-items-center">
   <li class="nav-item">
     <a class="nav-link active" href="#">Active</a>
   </li>

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index eafe7b59c5f4fa2958ddd38acff81e24d8ca0bb6..482392504127c17f3724d7615c17677966ec7fc8 100644 (file)
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -157,7 +157,7 @@ Use the flexbox alignment utilities to vertically align columns.
 <div class="bd-example-row">
 {% example html %}
 <div class="container">
-  <div class="row flex-items-xs-top">
+  <div class="row flex-items-top">
     <div class="col-xs">
       One of three columns
     </div>
@@ -168,7 +168,7 @@ Use the flexbox alignment utilities to vertically align columns.
       One of three columns
     </div>
   </div>
-  <div class="row flex-items-xs-middle">
+  <div class="row flex-items-middle">
     <div class="col-xs">
       One of three columns
     </div>
@@ -179,7 +179,7 @@ Use the flexbox alignment utilities to vertically align columns.
       One of three columns
     </div>
   </div>
-  <div class="row flex-items-xs-bottom">
+  <div class="row flex-items-bottom">
     <div class="col-xs">
       One of three columns
     </div>
@@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs flex-xs-top">
+    <div class="col-xs flex-top">
       One of three columns
     </div>
-    <div class="col-xs flex-xs-middle">
+    <div class="col-xs flex-middle">
       One of three columns
     </div>
-    <div class="col-xs flex-xs-bottom">
+    <div class="col-xs flex-bottom">
       One of three columns
     </div>
   </div>
@@ -219,7 +219,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
 <div class="bd-example-row">
 {% example html %}
 <div class="container">
-  <div class="row flex-items-xs-left">
+  <div class="row flex-items-left">
     <div class="col-4">
       One of two columns
     </div>
@@ -227,7 +227,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-xs-center">
+  <div class="row flex-items-center">
     <div class="col-4">
       One of two columns
     </div>
@@ -235,7 +235,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-xs-right">
+  <div class="row flex-items-right">
     <div class="col-4">
       One of two columns
     </div>
@@ -243,7 +243,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-xs-around">
+  <div class="row flex-items-around">
     <div class="col-4">
       One of two columns
     </div>
@@ -251,7 +251,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-xs-between">
+  <div class="row flex-items-between">
     <div class="col-4">
       One of two columns
     </div>
@@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs flex-xs-unordered">
+    <div class="col-xs flex-unordered">
       First, but unordered
     </div>
-    <div class="col-xs flex-xs-last">
+    <div class="col-xs flex-last">
       Second, but last
     </div>
-    <div class="col-xs flex-xs-first">
+    <div class="col-xs flex-first">
       Third, but first
     </div>
   </div>

diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
index 502885a81e267b30450b8f48a46fd6348882ea31..6e3c39b8f7b81acb7cf4f31316b768f83d76936b 100644 (file)
--- a/scss/utilities/_flex.scss
+++ b/scss/utilities/_flex.scss
@@ -4,34 +4,54 @@
 
 @if $enable-flex {
   @each $breakpoint in map-keys($grid-breakpoints) {
-    // Flex column reordering
     @include media-breakpoint-up($breakpoint) {
-      .flex-#{$breakpoint}-first { order: -1; }
-      .flex-#{$breakpoint}-last { order: 1; }
-      .flex-#{$breakpoint}-unordered { order: 0; }
-    }
+      $min: breakpoint-min($breakpoint, $grid-breakpoints);
 
-    // Alignment for every item
-    @include media-breakpoint-up($breakpoint) {
-      .flex-items-#{$breakpoint}-top { align-items: flex-start; }
-      .flex-items-#{$breakpoint}-middle { align-items: center; }
-      .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
-    }
+      @if $min {
+        // Flex column reordering
+        .flex-#{$breakpoint}-first     { order: -1; }
+        .flex-#{$breakpoint}-last      { order: 1; }
+        .flex-#{$breakpoint}-unordered { order: 0; }
 
-    // Alignment per item
-    @include media-breakpoint-up($breakpoint) {
-      .flex-#{$breakpoint}-top   { align-self: flex-start; }
-      .flex-#{$breakpoint}-middle { align-self: center; }
-      .flex-#{$breakpoint}-bottom { align-self: flex-end; }
-    }
+        // Alignment for every item
+        .flex-items-#{$breakpoint}-top    { align-items: flex-start; }
+        .flex-items-#{$breakpoint}-middle { align-items: center; }
+        .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
 
-    // Horizontal alignment of item
-    @include media-breakpoint-up($breakpoint) {
-      .flex-items-#{$breakpoint}-left { justify-content: flex-start; }
-      .flex-items-#{$breakpoint}-center { justify-content: center; }
-      .flex-items-#{$breakpoint}-right { justify-content: flex-end; }
-      .flex-items-#{$breakpoint}-around { justify-content: space-around; }
-      .flex-items-#{$breakpoint}-between { justify-content: space-between; }
+        // Alignment per item
+        .flex-#{$breakpoint}-top    { align-self: flex-start; }
+        .flex-#{$breakpoint}-middle { align-self: center; }
+        .flex-#{$breakpoint}-bottom { align-self: flex-end; }
+
+        // Horizontal alignment of item
+        .flex-items-#{$breakpoint}-left    { justify-content: flex-start; }
+        .flex-items-#{$breakpoint}-center  { justify-content: center; }
+        .flex-items-#{$breakpoint}-right   { justify-content: flex-end; }
+        .flex-items-#{$breakpoint}-around  { justify-content: space-around; }
+        .flex-items-#{$breakpoint}-between { justify-content: space-between; }
+      } @else {
+        // Flex column reordering
+        .flex-first     { order: -1; }
+        .flex-last      { order: 1; }
+        .flex-unordered { order: 0; }
+
+        // Alignment for every item
+        .flex-items-top    { align-items: flex-start; }
+        .flex-items-middle { align-items: center; }
+        .flex-items-bottom { align-items: flex-end; }
+
+        // Alignment per item
+        .flex-top    { align-self: flex-start; }
+        .flex-middle { align-self: center; }
+        .flex-bottom { align-self: flex-end; }
+
+        // Horizontal alignment of item
+        .flex-items-left    { justify-content: flex-start; }
+        .flex-items-center  { justify-content: center; }
+        .flex-items-right   { justify-content: flex-end; }
+        .flex-items-around  { justify-content: space-around; }
+        .flex-items-between { justify-content: space-between; }
+      }
     }
   }
 }