From 70c26867976e5b4857b581a910623324b108ce64 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Wed, 20 Jan 2016 16:39:43 -0600
Subject: [PATCH] Resolves #18978 - flexbox list-group implementation. Requires
the pull-right and pull-left flex change from PR #18976
---
docs/components/list-group.md | 6 +++---
scss/_list-group.scss | 13 ++++++++++++-
2 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 0d32549841..3e4ec9a022 100644
--- 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
index 5115e56fa2..21a43eb770 100644
--- 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;
--
GitLab