Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 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 | @include border-top-radius($list-group-border-radius); |
||
| 33 | } |
||
| 34 | &:last-child { |
||
| 35 | margin-bottom: 0; |
||
| 36 | @include border-bottom-radius($list-group-border-radius); |
||
| 37 | } |
||
| 38 | } |
||
| 39 | |||
| 40 | |||
| 41 | // Interactive list items |
||
| 42 | // |
||
| 43 | // Use anchor or button elements instead of `li`s or `div`s to create interactive items. |
||
| 44 | // Includes an extra `.active` modifier class for showing selected items. |
||
| 45 | |||
| 46 | a.list-group-item, |
||
| 47 | button.list-group-item { |
||
| 48 | color: $list-group-link-color; |
||
| 49 | |||
| 50 | .list-group-item-heading { |
||
| 51 | color: $list-group-link-heading-color; |
||
| 52 | } |
||
| 53 | |||
| 54 | // Hover state |
||
| 55 | &:hover, |
||
| 56 | &:focus { |
||
| 57 | text-decoration: none; |
||
| 58 | color: $list-group-link-hover-color; |
||
| 59 | background-color: $list-group-hover-bg; |
||
| 60 | } |
||
| 61 | } |
||
| 62 | |||
| 63 | button.list-group-item { |
||
| 64 | width: 100%; |
||
| 65 | text-align: left; |
||
| 66 | } |
||
| 67 | |||
| 68 | .list-group-item { |
||
| 69 | // Disabled state |
||
| 70 | &.disabled, |
||
| 71 | &.disabled:hover, |
||
| 72 | &.disabled:focus { |
||
| 73 | background-color: $list-group-disabled-bg; |
||
| 74 | color: $list-group-disabled-color; |
||
| 75 | cursor: $cursor-disabled; |
||
| 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-disabled-text-color; |
||
| 83 | } |
||
| 84 | } |
||
| 85 | |||
| 86 | // Active class on item itself, not parent |
||
| 87 | &.active, |
||
| 88 | &.active:hover, |
||
| 89 | &.active:focus { |
||
| 90 | z-index: 2; // Place active items above their siblings for proper border styling |
||
| 91 | color: $list-group-active-color; |
||
| 92 | background-color: $list-group-active-bg; |
||
| 93 | border-color: $list-group-active-border; |
||
| 94 | |||
| 95 | // Force color to inherit for custom content |
||
| 96 | .list-group-item-heading, |
||
| 97 | .list-group-item-heading > small, |
||
| 98 | .list-group-item-heading > .small { |
||
| 99 | color: inherit; |
||
| 100 | } |
||
| 101 | .list-group-item-text { |
||
| 102 | color: $list-group-active-text-color; |
||
| 103 | } |
||
| 104 | } |
||
| 105 | } |
||
| 106 | |||
| 107 | |||
| 108 | // Contextual variants |
||
| 109 | // |
||
| 110 | // Add modifier classes to change text and background color on individual items. |
||
| 111 | // Organizationally, this must come after the `:hover` states. |
||
| 112 | |||
| 113 | @include list-group-item-variant(success, $state-success-bg, $state-success-text); |
||
| 114 | @include list-group-item-variant(info, $state-info-bg, $state-info-text); |
||
| 115 | @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); |
||
| 116 | @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text); |
||
| 117 | |||
| 118 | |||
| 119 | // Custom content options |
||
| 120 | // |
||
| 121 | // Extra classes for creating well-formatted content within `.list-group-item`s. |
||
| 122 | |||
| 123 | .list-group-item-heading { |
||
| 124 | margin-top: 0; |
||
| 125 | margin-bottom: 5px; |
||
| 126 | } |
||
| 127 | .list-group-item-text { |
||
| 128 | margin-bottom: 0; |
||
| 129 | line-height: 1.3; |
||
| 130 | } |