Resolves twbs#18978 - flexbox list-group implementation. Requires the…

… pull-right and pull-left flex change from PR twbs#18976
rosskevin · Jan 20, 2016 · 70c2686 · 70c2686
1 parent a38e8a6
commit 70c2686
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
@@ -31,16 +31,16 @@ Add labels to any list group item to show unread counts, activity, etc.
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-xs-right">14</span>
     Cras justo odio
+    <span class="label label-default label-pill pull-right">14</span>
   </li>
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-xs-right">2</span>
     Dapibus ac facilisis in
+    <span class="label label-default label-pill pull-right">2</span>
   </li>
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-xs-right">1</span>
     Morbi leo risus
+    <span class="label label-default label-pill pull-right">1</span>
   </li>
 </ul>
 {% endexample %}

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -3,6 +3,11 @@
 // Easily usable on <ul>, <ol>, or <div>.
 
 .list-group {
+  @if $enable-flex {
+    display: flex;
+    flex-direction: column;
+  }
+
   // No need to set list-style: none; since .list-group-item is block level
   padding-left: 0; // reset padding because ul and ol
   margin-bottom: 0;
@@ -14,8 +19,14 @@
 // Use on `li`s or `div`s within the `.list-group` parent.
 
 .list-group-item {
+  @if $enable-flex {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+  } @else {
+    display: block;
+  }
   position: relative;
-  display: block;
   padding: .75rem 1.25rem;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -$list-group-border-width;