// No need to set list-style: none; since .list-group-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
- background-color: @list-group-bg;
}
// Individual list items
.list-group-item {
position: relative;
display: block;
- padding: 10px 30px 10px 15px;
+ padding: 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
+ background-color: @list-group-bg;
border: 1px solid @list-group-border;
// Round the first and last items
&:first-child {
- .border-top-radius(@border-radius-base);
+ .border-top-radius(@list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
- .border-bottom-radius(@border-radius-base);
+ .border-bottom-radius(@list-group-border-radius);
}
// Align badges within list items
> .badge {
float: right;
- margin-right: -15px;
}
-}
-
-// Custom content options
-// -------------------------
-
-.list-group-item-heading {
- margin-top: 0;
- margin-bottom: 5px;
-}
-.list-group-item-text {
- margin-bottom: 0;
- line-height: 1.3;
+ > .badge + .badge {
+ margin-right: 5px;
+ }
}
// Linked list items
-// -------------------------
-
-// Custom content within linked items
a.list-group-item {
- // Colorize content accordingly
+ color: @list-group-link-color;
+
.list-group-item-heading {
color: @list-group-link-heading-color;
}
- .list-group-item-text {
- color: @list-group-link-color;
- }
// Hover state
&:hover,
}
// Active class on item itself, not parent
- &.active {
+ &.active,
+ &.active:hover,
+ &.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color;
background-color: @list-group-active-bg;
}
}
}
+
+// Custom content options
+// -------------------------
+
+.list-group-item-heading {
+ margin-top: 0;
+ margin-bottom: 5px;
+}
+.list-group-item-text {
+ margin-bottom: 0;
+ line-height: 1.3;
+}