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

v4: Revamp list group items built with anchors and buttons #19103

Merged
merged 1 commit into from
Feb 7, 2016
Merged

v4: Revamp list group items built with anchors and buttons #19103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
60 changes: 30 additions & 30 deletions docs/components/list-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,13 @@ Add labels to any list group item to show unread counts, activity, etc.
</ul>
{% endexample %}

## Linked items
## Disabled items

Linkify list group items by using anchor tags instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element.
Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.

{% example html %}
<div class="list-group">
<a href="#" class="list-group-item active">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
Expand All @@ -61,33 +61,33 @@ Linkify list group items by using anchor tags instead of list items (that also m
</div>
{% endexample %}

## Button items
## Anchors and buttons

Use anchors or buttons to create actionable list group items with hover, disabled, and active states by adding `.list-group-item-action`. This separate class contains a few overrides to add compatibility for `<a>`s and `<button>`s, as well as the hover and focus states.

List group items may be buttons instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element. **Don't use the standard `.btn` classes here.**
Be sure to **not use the standard `.btn` classes here**.

{% example html %}
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
{% endexample %}

## Disabled items

Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.

{% example html %}
<div class="list-group">
<a href="#" class="list-group-item disabled">
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action disabled">Vestibulum at eros</button>
</div>
{% endexample %}

Expand All @@ -97,10 +97,10 @@ Use contextual classes to style list items, default or linked. Also includes `.a

{% example html %}
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
</div>
{% endexample %}

Expand All @@ -110,16 +110,16 @@ Add nearly any HTML within, even for linked list groups like the one below.

{% example html %}
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<a href="#" class="list-group-item list-group-item-action active">
<h5 class="list-group-item-heading">List group item heading</h5>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<a href="#" class="list-group-item list-group-item-action">
<h5 class="list-group-item-heading">List group item heading</h5>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<a href="#" class="list-group-item list-group-item-action">
<h5 class="list-group-item-heading">List group item heading</h5>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
Expand Down
68 changes: 31 additions & 37 deletions scss/_list-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,50 +22,15 @@
background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color;

// Round the first and last items
&:first-child {
@include border-top-radius($list-group-border-radius);
}

&:last-child {
margin-bottom: 0;
@include border-bottom-radius($list-group-border-radius);
}
}

.list-group-flush {
.list-group-item {
border-radius: 0;
}
}


// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// list items. Includes an extra `.active` modifier class for selected items.

// scss-lint:disable QualifyingElement
a.list-group-item,
button.list-group-item {
width: 100%;
color: $list-group-link-color;
text-align: inherit;

.list-group-item-heading {
color: $list-group-link-heading-color;
}

// Hover state
@include hover-focus {
color: $list-group-link-hover-color;
text-decoration: none;
background-color: $list-group-hover-bg;
}
}
// scss-lint:enable QualifyingElement

.list-group-item {
// Disabled state
&.disabled {
@include plain-hover-focus {
color: $list-group-disabled-color;
Expand All @@ -82,11 +47,11 @@ button.list-group-item {
}
}

// Active class on item itself, not parent
&.active {
@include plain-hover-focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color;
text-decoration: none; // Repeat here because it inherits global a:hover otherwise
background-color: $list-group-active-bg;
border-color: $list-group-active-border;

Expand All @@ -103,6 +68,35 @@ button.list-group-item {
}
}

.list-group-flush {
.list-group-item {
border-radius: 0;
}
}


// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// list items. Includes an extra `.active` modifier class for selected items.

.list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though)
color: $list-group-link-color;
text-align: inherit; // For `<button>`s (anchors inherit)

.list-group-item-heading {
color: $list-group-link-heading-color;
}

// Hover state
@include hover-focus {
color: $list-group-link-hover-color;
text-decoration: none;
background-color: $list-group-hover-bg;
}
}


// Contextual variants
//
Expand Down