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: }