Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flexbox enable list-group #18981

Merged
merged 2 commits into from
Oct 30, 2016
Merged

Flexbox enable list-group #18981

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70c2686
Resolves #18978 - flexbox list-group implementation. Requires the pul…
rosskevin Jan 20, 2016
4b3c9e4
change back pull-right to pull-xs-right
rosskevin Jan 20, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/components/list-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no pull-right class anymore. Stick with pull-xs-right
Also, won't putting the floats last instead of first cause some breakage when flexbox is disabled?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. I'm confused about pull-right/left, because it is still there in on v4-dev tip and I'm not seeing the responsive classes. I can change that back.
  2. It does not appear to have any problems floating in my test (granted it may be limited testing considering I didn't go after a bunch of browsers). The fact is that pull-right appears to work this way in the docs for both flex and normal layouts.

I can change it back, but then we may have questions about a flexed pull-right not working too...

I'll change the pull-*-right back and commit.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(1) There are still pull-left/right mixins, but the pull-left/right classes are gone as of #18340. I just double-checked.
(2) I'm not 100% sure either. Will ask mdo when he reviews this.

</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 %}
Expand Down
13 changes: 12 additions & 1 deletion scss/_list-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down