// // List groups // -------------------------------------------------- // Base class // // Easily usable on <ul>, <ol>, or <div>. .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 background-color: @list-group-bg; } // Individual list items // ------------------------- .list-group-item { position: relative; display: block; padding: 10px 30px 10px 15px; // Place the border on the list items and negative margin up for better styling margin-bottom: -1px; border: 1px solid @list-group-border; // Round the first and last items &:first-child { .border-top-radius(@border-radius-base); } &:last-child { margin-bottom: 0; .border-bottom-radius(@border-radius-base); } // 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; } // Linked list items // ------------------------- // Custom content within linked items a.list-group-item { // Colorize content accordingly .list-group-item-heading { color: @list-group-link-heading-color; } .list-group-item-text { color: @list-group-link-color; } // Hover state &:hover, &:focus { text-decoration: none; background-color: @list-group-hover-bg; } // Active class on item itself, not parent &.active { z-index: 2; // Place active items above their siblings for proper border styling color: @list-group-active-color; background-color: @list-group-active-bg; border-color: @list-group-active-border; // Force color to inherit for custom content .list-group-item-heading { color: inherit; } .list-group-item-text { color: lighten(@list-group-active-bg, 40%); } } }