]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // Base class |
2 | // | |
3 | // Easily usable on <ul>, <ol>, or <div>. | |
4 | ||
5 | .list-group { | |
6 | display: flex; | |
7 | flex-direction: column; | |
8 | ||
9 | // No need to set list-style: none; since .list-group-item is block level | |
10 | padding-left: 0; // reset padding because ul and ol | |
11 | margin-bottom: 0; | |
12 | } | |
13 | ||
14 | ||
15 | // Interactive list items | |
16 | // | |
17 | // Use anchor or button elements instead of `li`s or `div`s to create interactive | |
18 | // list items. Includes an extra `.active` modifier class for selected items. | |
19 | ||
20 | .list-group-item-action { | |
21 | width: 100%; // For `<button>`s (anchors become 100% by default though) | |
22 | color: $list-group-link-color; | |
23 | text-align: inherit; // For `<button>`s (anchors inherit) | |
24 | ||
25 | .list-group-item-heading { | |
26 | color: $list-group-link-heading-color; | |
27 | } | |
28 | ||
29 | // Hover state | |
30 | @include hover-focus { | |
31 | color: $list-group-link-hover-color; | |
32 | text-decoration: none; | |
33 | background-color: $list-group-hover-bg; | |
34 | } | |
35 | ||
36 | &:active { | |
37 | color: $list-group-link-active-color; | |
38 | background-color: $list-group-link-active-bg; | |
39 | } | |
40 | } | |
41 | ||
42 | ||
43 | // Individual list items | |
44 | // | |
45 | // Use on `li`s or `div`s within the `.list-group` parent. | |
46 | ||
47 | .list-group-item { | |
48 | position: relative; | |
49 | display: flex; | |
50 | flex-flow: row wrap; | |
51 | align-items: center; | |
52 | padding: $list-group-item-padding-y $list-group-item-padding-x; | |
53 | // Place the border on the list items and negative margin up for better styling | |
54 | margin-bottom: -$list-group-border-width; | |
55 | background-color: $list-group-bg; | |
56 | border: $list-group-border-width solid $list-group-border-color; | |
57 | ||
58 | &:first-child { | |
59 | @include border-top-radius($list-group-border-radius); | |
60 | } | |
61 | ||
62 | &:last-child { | |
63 | margin-bottom: 0; | |
64 | @include border-bottom-radius($list-group-border-radius); | |
65 | } | |
66 | ||
67 | @include hover-focus { | |
68 | text-decoration: none; | |
69 | } | |
70 | ||
71 | &.disabled, | |
72 | &:disabled { | |
73 | color: $list-group-disabled-color; | |
74 | cursor: $cursor-disabled; | |
75 | background-color: $list-group-disabled-bg; | |
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 | // Include both here for `<a>`s and `<button>`s | |
87 | &.active { | |
88 | z-index: 2; // Place active items above their siblings for proper border styling | |
89 | color: $list-group-active-color; | |
90 | background-color: $list-group-active-bg; | |
91 | border-color: $list-group-active-border; | |
92 | ||
93 | // Force color to inherit for custom content | |
94 | .list-group-item-heading, | |
95 | .list-group-item-heading > small, | |
96 | .list-group-item-heading > .small { | |
97 | color: inherit; | |
98 | } | |
99 | ||
100 | .list-group-item-text { | |
101 | color: $list-group-active-text-color; | |
102 | } | |
103 | } | |
104 | } | |
105 | ||
106 | ||
107 | // Flush list items | |
108 | // | |
109 | // Remove borders and border-radius to keep list group items edge-to-edge. Most | |
110 | // useful within other components (e.g., cards). | |
111 | ||
112 | .list-group-flush { | |
113 | .list-group-item { | |
114 | border-right: 0; | |
115 | border-left: 0; | |
116 | border-radius: 0; | |
117 | } | |
118 | ||
119 | &:first-child { | |
120 | .list-group-item:first-child { | |
121 | border-top: 0; | |
122 | } | |
123 | } | |
124 | ||
125 | &:last-child { | |
126 | .list-group-item:last-child { | |
127 | border-bottom: 0; | |
128 | } | |
129 | } | |
130 | } | |
131 | ||
132 | ||
133 | // Contextual variants | |
134 | // | |
135 | // Add modifier classes to change text and background color on individual items. | |
136 | // Organizationally, this must come after the `:hover` states. | |
137 | ||
138 | @include list-group-item-variant(success, $state-success-bg, $state-success-text); | |
139 | @include list-group-item-variant(info, $state-info-bg, $state-info-text); | |
140 | @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); | |
141 | @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text); |