corrade-nucleus-nucleons – Blame information for rev 20
?pathlinks?
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 20 | office | 1 | // |
| 2 | // List groups |
||
| 3 | // -------------------------------------------------- |
||
| 4 | |||
| 5 | |||
| 6 | // Base class |
||
| 7 | // |
||
| 8 | // Easily usable on <ul>, <ol>, or <div>. |
||
| 9 | |||
| 10 | .list-group { |
||
| 11 | // No need to set list-style: none; since .list-group-item is block level |
||
| 12 | margin-bottom: 20px; |
||
| 13 | padding-left: 0; // reset padding because ul and ol |
||
| 14 | } |
||
| 15 | |||
| 16 | |||
| 17 | // Individual list items |
||
| 18 | // |
||
| 19 | // Use on `li`s or `div`s within the `.list-group` parent. |
||
| 20 | |||
| 21 | .list-group-item { |
||
| 22 | position: relative; |
||
| 23 | display: block; |
||
| 24 | padding: 10px 15px; |
||
| 25 | // Place the border on the list items and negative margin up for better styling |
||
| 26 | margin-bottom: -1px; |
||
| 27 | background-color: @list-group-bg; |
||
| 28 | border: 1px solid @list-group-border; |
||
| 29 | |||
| 30 | // Round the first and last items |
||
| 31 | &:first-child { |
||
| 32 | .border-top-radius(@list-group-border-radius); |
||
| 33 | } |
||
| 34 | &:last-child { |
||
| 35 | margin-bottom: 0; |
||
| 36 | .border-bottom-radius(@list-group-border-radius); |
||
| 37 | } |
||
| 38 | |||
| 39 | // Align badges within list items |
||
| 40 | > .badge { |
||
| 41 | float: right; |
||
| 42 | } |
||
| 43 | > .badge + .badge { |
||
| 44 | margin-right: 5px; |
||
| 45 | } |
||
| 46 | } |
||
| 47 | |||
| 48 | |||
| 49 | // Linked list items |
||
| 50 | // |
||
| 51 | // Use anchor elements instead of `li`s or `div`s to create linked list items. |
||
| 52 | // Includes an extra `.active` modifier class for showing selected items. |
||
| 53 | |||
| 54 | a.list-group-item { |
||
| 55 | color: @list-group-link-color; |
||
| 56 | |||
| 57 | .list-group-item-heading { |
||
| 58 | color: @list-group-link-heading-color; |
||
| 59 | } |
||
| 60 | |||
| 61 | // Hover state |
||
| 62 | &:hover, |
||
| 63 | &:focus { |
||
| 64 | text-decoration: none; |
||
| 65 | background-color: @list-group-hover-bg; |
||
| 66 | } |
||
| 67 | |||
| 68 | // Active class on item itself, not parent |
||
| 69 | &.active, |
||
| 70 | &.active:hover, |
||
| 71 | &.active:focus { |
||
| 72 | z-index: 2; // Place active items above their siblings for proper border styling |
||
| 73 | color: @list-group-active-color; |
||
| 74 | background-color: @list-group-active-bg; |
||
| 75 | border-color: @list-group-active-border; |
||
| 76 | |||
| 77 | // Force color to inherit for custom content |
||
| 78 | .list-group-item-heading { |
||
| 79 | color: inherit; |
||
| 80 | } |
||
| 81 | .list-group-item-text { |
||
| 82 | color: @list-group-active-text-color; |
||
| 83 | } |
||
| 84 | } |
||
| 85 | } |
||
| 86 | |||
| 87 | |||
| 88 | // Contextual variants |
||
| 89 | // |
||
| 90 | // Add modifier classes to change text and background color on individual items. |
||
| 91 | // Organizationally, this must come after the `:hover` states. |
||
| 92 | |||
| 93 | .list-group-item-variant(success; @state-success-bg; @state-success-text); |
||
| 94 | .list-group-item-variant(info; @state-info-bg; @state-info-text); |
||
| 95 | .list-group-item-variant(warning; @state-warning-bg; @state-warning-text); |
||
| 96 | .list-group-item-variant(danger; @state-danger-bg; @state-danger-text); |
||
| 97 | |||
| 98 | |||
| 99 | // Custom content options |
||
| 100 | // |
||
| 101 | // Extra classes for creating well-formatted content within `.list-group-item`s. |
||
| 102 | |||
| 103 | .list-group-item-heading { |
||
| 104 | margin-top: 0; |
||
| 105 | margin-bottom: 5px; |
||
| 106 | } |
||
| 107 | .list-group-item-text { |
||
| 108 | margin-bottom: 0; |
||
| 109 | line-height: 1.3; |
||
| 110 | } |