|
23 | 23 | }
|
24 | 24 | }
|
25 | 25 |
|
| 26 | +// Interactive list items |
| 27 | +// |
| 28 | +// Use anchor or button elements instead of `li`s or `div`s to create interactive |
| 29 | +// list items. Includes an extra `.active` modifier class for selected items. |
| 30 | + |
| 31 | +.list-group-item-action { |
| 32 | + width: 100%; // For `<button>`s (anchors become 100% by default though) |
| 33 | + color: $list-group-action-color; |
| 34 | + text-align: inherit; // For `<button>`s (anchors inherit) |
| 35 | + |
| 36 | + // Hover state |
| 37 | + &:hover, |
| 38 | + &:focus { |
| 39 | + z-index: 1; // Place hover/focus items above their siblings for proper border styling |
| 40 | + color: $list-group-action-hover-color; |
| 41 | + text-decoration: none; |
| 42 | + background-color: $list-group-hover-bg; |
| 43 | + } |
| 44 | + |
| 45 | + &:active { |
| 46 | + color: $list-group-action-active-color; |
| 47 | + background-color: $list-group-action-active-bg; |
| 48 | + } |
| 49 | +} |
| 50 | + |
26 | 51 | // Individual list items
|
27 | 52 | //
|
28 | 53 | // Use on `li`s or `div`s within the `.list-group` parent.
|
|
69 | 94 | }
|
70 | 95 | }
|
71 | 96 |
|
72 |
| -// Interactive list items |
73 |
| -// |
74 |
| -// Use anchor or button elements instead of `li`s or `div`s to create interactive |
75 |
| -// list items. Includes an extra `.active` modifier class for selected items. |
76 |
| - |
77 |
| -.list-group-item-action { |
78 |
| - width: 100%; // For `<button>`s (anchors become 100% by default though) |
79 |
| - color: $list-group-action-color; |
80 |
| - text-align: inherit; // For `<button>`s (anchors inherit) |
81 |
| - |
82 |
| - // Hover state |
83 |
| - &:hover, |
84 |
| - &:focus { |
85 |
| - z-index: 1; // Place hover/focus items above their siblings for proper border styling |
86 |
| - color: $list-group-action-hover-color; |
87 |
| - text-decoration: none; |
88 |
| - background-color: $list-group-hover-bg; |
89 |
| - } |
90 |
| - |
91 |
| - &:active { |
92 |
| - color: $list-group-action-active-color; |
93 |
| - background-color: $list-group-action-active-bg; |
94 |
| - } |
95 |
| -} |
96 |
| - |
97 | 97 | // Horizontal
|
98 | 98 | //
|
99 | 99 | // Change the layout of list group items from vertical (default) to horizontal.
|
|
0 commit comments