projects / mindcoding-template-patches.git / blame
| Commit | Line | Data |
|---|---|---|
| 7b869721 S |
1 | // |
| 2 | // List groups | |
| 3 | // -------------------------------------------------- | |
| 4 | ||
| 5 | // Base class | |
| 6 | // | |
| 7 | // Easily usable on <ul>, <ol>, or <div>. | |
| 8 | .list-group { | |
| 9 | // No need to set list-style: none; since .list-group-item is block level | |
| 10 | margin-bottom: 20px; | |
| 11 | padding-left: 0; // reset padding because ul and ol | |
| 12 | } | |
| 13 | ||
| 14 | // Individual list items | |
| 15 | // ------------------------- | |
| 16 | ||
| 17 | .list-group-item { | |
| 18 | position: relative; | |
| 19 | display: block; | |
| 20 | padding: 10px 15px; | |
| 21 | // Place the border on the list items and negative margin up for better styling | |
| 22 | margin-bottom: -1px; | |
| 23 | background-color: @list-group-bg; | |
| 24 | border: 1px solid @list-group-border; | |
| 25 | ||
| 26 | // Round the first and last items | |
| 27 | &:first-child { | |
| 28 | .border-top-radius(@list-group-border-radius); | |
| 29 | } | |
| 30 | &:last-child { | |
| 31 | margin-bottom: 0; | |
| 32 | .border-bottom-radius(@list-group-border-radius); | |
| 33 | } | |
| 34 | ||
| 35 | // Align badges within list items | |
| 36 | > .badge { | |
| 37 | float: right; | |
| 38 | } | |
| 39 | > .badge + .badge { | |
| 40 | margin-right: 5px; | |
| 41 | } | |
| 42 | } | |
| 43 | ||
| 44 | // Linked list items | |
| 45 | a.list-group-item { | |
| 46 | color: @list-group-link-color; | |
| 47 | ||
| 48 | .list-group-item-heading { | |
| 49 | color: @list-group-link-heading-color; | |
| 50 | } | |
| 51 | ||
| 52 | // Hover state | |
| 53 | &:hover, | |
| 54 | &:focus { | |
| 55 | text-decoration: none; | |
| 56 | background-color: @list-group-hover-bg; | |
| 57 | } | |
| 58 | ||
| 59 | // Active class on item itself, not parent | |
| 60 | &.active, | |
| 61 | &.active:hover, | |
| 62 | &.active:focus { | |
| 63 | z-index: 2; // Place active items above their siblings for proper border styling | |
| 64 | color: @list-group-active-color; | |
| 65 | background-color: @list-group-active-bg; | |
| 66 | border-color: @list-group-active-border; | |
| 67 | ||
| 68 | // Force color to inherit for custom content | |
| 69 | .list-group-item-heading { | |
| 70 | color: inherit; | |
| 71 | } | |
| 72 | .list-group-item-text { | |
| 73 | color: lighten(@list-group-active-bg, 40%); | |
| 74 | } | |
| 75 | } | |
| 76 | } | |
| 77 | ||
| 78 | // Custom content options | |
| 79 | // ------------------------- | |
| 80 | ||
| 81 | .list-group-item-heading { | |
| 82 | margin-top: 0; | |
| 83 | margin-bottom: 5px; | |
| 84 | } | |
| 85 | .list-group-item-text { | |
| 86 | margin-bottom: 0; | |
| 87 | line-height: 1.3; | |
| 88 | } |