/// ========================================================================
/// Bootstrap: list-group.less
/// https://github.com/twbs/bootstrap/blob/master/less/list-group.less
///
/// ZUI: The file has been changed in ZUI. It will not keep update with the
/// Bootsrap version in the future.
/// http://zui.sexy
/// ========================================================================
/// Bootrap: Copyright 2011-2016 Twitter, Inc. Licensed under MIT
/// ========================================================================
// Base class
// Easily usable on
, , or .
.list-group {
// 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
}
// Individual list items
.list-group-item {
position: relative;
display: block;
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(@list-group-border-radius); }
&:last-child { margin-bottom: 0; .border-bottom-radius(@list-group-border-radius); }
// Align badges within list items
> .label-badge { float: right; }
> .label-badge + .label-badge { margin-right: 5px; }
// Linked list items
a& {
color: @list-group-link-color;
.list-group-item-heading { color: @list-group-link-heading-color; }
// Hover state
&:hover,
&:focus { text-decoration: none; background-color: @list-group-hover-bg; color: @list-group-hover-color}
}
// Active class on item itself, not parent
&.active,
&.active:hover,
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
background-color: @component-active-bg;
border-color: @component-active-bg;
color: @component-active-color;
// Force color to inherit for custom content
.list-group-item-heading { color: inherit; }
.list-group-item-text { color: darken(@component-active-color, 10%); }
}
}
// Custom content options
.list-group-item-heading { margin-top: 0; margin-bottom: 5px; color: @color-gray-dark; }
.list-group-item-text { margin-bottom: 0; line-height: 1.3; }