|
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