mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 19:31:35 +02:00
Code Issues Releases Wiki Activity

Revamp list group items built with anchors and buttons

Browse Source 
- Make it an explicit class instead of qualifying with elements (.list-group-item-action)
- Rearrange the entire file for more straightforward flow
- Fix text-decoration bug as a result of the reorder
- Switch from h4's to h5's in docs
- Update docs to merge anchors and buttons sections; clearify usage guidelines there, too
- Nullify #17479 in the process
This commit is contained in:
Mark Otto
2016-02-06 19:50:00 -08:00
parent de944e088b
commit cbda7e3862
2 changed files with 71 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
scss/_list-group.scss
View File

@@ -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;
@@ -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;
@@ -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
//