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