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