|
48 | 48 | } |
49 | 49 | } |
50 | 50 |
|
51 | | -// Interactive list items |
52 | | -// |
53 | | -// Use anchor or button elements instead of `li`s or `div`s to create interactive |
54 | | -// list items. Includes an extra `.active` modifier class for selected items. |
55 | | - |
56 | | -.list-group-item-action { |
57 | | - width: 100%; // For `<button>`s (anchors become 100% by default though) |
58 | | - color: var(--#{$prefix}list-group-action-color); |
59 | | - text-align: inherit; // For `<button>`s (anchors inherit) |
60 | | - |
61 | | - // Hover state |
62 | | - &:hover, |
63 | | - &:focus { |
64 | | - z-index: 1; // Place hover/focus items above their siblings for proper border styling |
65 | | - color: var(--#{$prefix}list-group-action-hover-color); |
66 | | - text-decoration: none; |
67 | | - background-color: var(--#{$prefix}list-group-action-hover-bg); |
68 | | - } |
69 | | - |
70 | | - &:active { |
71 | | - color: var(--#{$prefix}list-group-action-active-color); |
72 | | - background-color: var(--#{$prefix}list-group-action-active-bg); |
73 | | - } |
74 | | -} |
75 | | - |
76 | 51 | // Individual list items |
77 | 52 | // |
78 | 53 | // Use on `li`s or `div`s within the `.list-group` parent. |
|
120 | 95 | } |
121 | 96 | } |
122 | 97 |
|
| 98 | +// Interactive list items |
| 99 | +// |
| 100 | +// Use anchor or button elements instead of `li`s or `div`s to create interactive |
| 101 | +// list items. Includes an extra `.active` modifier class for selected items. |
| 102 | + |
| 103 | +.list-group-item-action { |
| 104 | + width: 100%; // For `<button>`s (anchors become 100% by default though) |
| 105 | + color: var(--#{$prefix}list-group-action-color); |
| 106 | + text-align: inherit; // For `<button>`s (anchors inherit) |
| 107 | + |
| 108 | + &:not(.active) { |
| 109 | + // Hover state |
| 110 | + &:hover, |
| 111 | + &:focus { |
| 112 | + z-index: 1; // Place hover/focus items above their siblings for proper border styling |
| 113 | + color: var(--#{$prefix}list-group-action-hover-color); |
| 114 | + text-decoration: none; |
| 115 | + background-color: var(--#{$prefix}list-group-action-hover-bg); |
| 116 | + } |
| 117 | + |
| 118 | + &:active { |
| 119 | + color: var(--#{$prefix}list-group-action-active-color); |
| 120 | + background-color: var(--#{$prefix}list-group-action-active-bg); |
| 121 | + } |
| 122 | + } |
| 123 | +} |
| 124 | + |
123 | 125 | // Horizontal |
124 | 126 | // |
125 | 127 | // Change the layout of list group items from vertical (default) to horizontal. |
|