| 1 |
efrain |
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 |
@include border-radius($list-group-border-radius);
|
|
|
13 |
}
|
|
|
14 |
|
|
|
15 |
|
|
|
16 |
// Interactive list items
|
|
|
17 |
//
|
|
|
18 |
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
|
|
19 |
// list items. Includes an extra `.active` modifier class for selected items.
|
|
|
20 |
|
|
|
21 |
.list-group-item-action {
|
|
|
22 |
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
|
|
23 |
color: $list-group-action-color;
|
|
|
24 |
text-align: inherit; // For `<button>`s (anchors inherit)
|
|
|
25 |
border-bottom: 1px solid $border-color;
|
|
|
26 |
|
|
|
27 |
.theme-dark & {
|
|
|
28 |
color: $dm-list-group-action-color;
|
|
|
29 |
}
|
|
|
30 |
|
|
|
31 |
// Hover state
|
|
|
32 |
@include hover-focus() {
|
|
|
33 |
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
|
|
34 |
color: $list-group-action-hover-color;
|
|
|
35 |
text-decoration: none;
|
|
|
36 |
border-bottom: 1px solid var(--primary-color-300);
|
|
|
37 |
|
|
|
38 |
.theme-dark & {
|
|
|
39 |
color: $dm-list-group-action-hover-color;
|
|
|
40 |
border-bottom: 1px solid var(--primary-color-300);
|
|
|
41 |
}
|
|
|
42 |
}
|
|
|
43 |
|
|
|
44 |
&:active {
|
|
|
45 |
color: $list-group-action-active-color;
|
|
|
46 |
background-color: $list-group-action-active-bg;
|
|
|
47 |
|
|
|
48 |
.theme-dark & {
|
|
|
49 |
color: $dm-list-group-action-active-color;
|
|
|
50 |
background-color: $dm-list-group-action-active-bg;
|
|
|
51 |
}
|
|
|
52 |
}
|
|
|
53 |
}
|
|
|
54 |
|
|
|
55 |
|
|
|
56 |
// Individual list items
|
|
|
57 |
//
|
|
|
58 |
// Use on `li`s or `div`s within the `.list-group` parent.
|
|
|
59 |
.list-group-item {
|
|
|
60 |
position: relative;
|
|
|
61 |
display: block;
|
|
|
62 |
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
|
|
63 |
color: $list-group-color;
|
|
|
64 |
text-decoration: if($link-decoration==none, null, none);
|
|
|
65 |
word-break: keep-all;
|
|
|
66 |
|
|
|
67 |
.modal-dialog & {
|
|
|
68 |
padding: $list-group-item-padding-y 0;
|
|
|
69 |
font-size: $font-size-sm;
|
|
|
70 |
font-weight: $font-weight-medium;
|
|
|
71 |
}
|
|
|
72 |
|
|
|
73 |
.theme-dark & {
|
|
|
74 |
color: $dm-list-group-color;
|
|
|
75 |
}
|
|
|
76 |
|
|
|
77 |
// &:first-child {
|
|
|
78 |
// @include border-top-radius(inherit);
|
|
|
79 |
// }
|
|
|
80 |
|
|
|
81 |
&:last-child {
|
|
|
82 |
//@include border-bottom-radius(inherit);
|
|
|
83 |
border-bottom: none;
|
|
|
84 |
}
|
|
|
85 |
|
|
|
86 |
&.disabled,
|
|
|
87 |
&:disabled {
|
|
|
88 |
color: $list-group-disabled-color;
|
|
|
89 |
pointer-events: none;
|
|
|
90 |
background-color: $list-group-disabled-bg;
|
|
|
91 |
|
|
|
92 |
.theme-dark & {
|
|
|
93 |
color: $dm-list-group-disabled-color;
|
|
|
94 |
background-color: $dm-list-group-disabled-bg;
|
|
|
95 |
}
|
|
|
96 |
}
|
|
|
97 |
|
|
|
98 |
// Include both here for `<a>`s and `<button>`s
|
|
|
99 |
&.active {
|
|
|
100 |
z-index: 2; // Place active items above their siblings for proper border styling
|
|
|
101 |
color: $list-group-active-color;
|
|
|
102 |
background-color: $list-group-active-bg;
|
|
|
103 |
|
|
|
104 |
.theme-dark & {
|
|
|
105 |
color: $dm-list-group-active-color;
|
|
|
106 |
background-color: $dm-list-group-active-bg;
|
|
|
107 |
}
|
|
|
108 |
}
|
|
|
109 |
|
|
|
110 |
& + & {
|
|
|
111 |
border-top-width: 0;
|
|
|
112 |
|
|
|
113 |
&.active {
|
|
|
114 |
margin-top: -$list-group-border-width;
|
|
|
115 |
border-top-width: $list-group-border-width;
|
|
|
116 |
}
|
|
|
117 |
}
|
|
|
118 |
}
|
|
|
119 |
|
|
|
120 |
|
|
|
121 |
// Horizontal
|
|
|
122 |
//
|
|
|
123 |
// Change the layout of list group items from vertical (default) to horizontal.
|
|
|
124 |
|
|
|
125 |
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
|
126 |
@include media-breakpoint-up($breakpoint) {
|
|
|
127 |
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
128 |
|
|
|
129 |
.list-group-horizontal#{$infix} {
|
|
|
130 |
flex-direction: row;
|
|
|
131 |
|
|
|
132 |
> .list-group-item {
|
|
|
133 |
&:first-child {
|
|
|
134 |
@include border-bottom-left-radius($list-group-border-radius);
|
|
|
135 |
@include border-top-right-radius(0);
|
|
|
136 |
}
|
|
|
137 |
|
|
|
138 |
&:last-child {
|
|
|
139 |
@include border-top-right-radius($list-group-border-radius);
|
|
|
140 |
@include border-bottom-left-radius(0);
|
|
|
141 |
}
|
|
|
142 |
|
|
|
143 |
&.active {
|
|
|
144 |
margin-top: 0;
|
|
|
145 |
}
|
|
|
146 |
|
|
|
147 |
+ .list-group-item {
|
|
|
148 |
border-top-width: $list-group-border-width;
|
|
|
149 |
border-left-width: 0;
|
|
|
150 |
|
|
|
151 |
&.active {
|
|
|
152 |
margin-left: -$list-group-border-width;
|
|
|
153 |
border-left-width: $list-group-border-width;
|
|
|
154 |
}
|
|
|
155 |
}
|
|
|
156 |
}
|
|
|
157 |
}
|
|
|
158 |
}
|
|
|
159 |
}
|
|
|
160 |
|
|
|
161 |
|
|
|
162 |
// Flush list items
|
|
|
163 |
//
|
|
|
164 |
// Remove borders and border-radius to keep list group items edge-to-edge. Most
|
|
|
165 |
// useful within other components (e.g., cards).
|
|
|
166 |
|
|
|
167 |
.list-group-flush {
|
|
|
168 |
@include border-radius(0);
|
|
|
169 |
|
|
|
170 |
> .list-group-item {
|
|
|
171 |
border-width: 0 0 $list-group-border-width;
|
|
|
172 |
|
|
|
173 |
&:last-child {
|
|
|
174 |
border-bottom-width: 0;
|
|
|
175 |
}
|
|
|
176 |
}
|
|
|
177 |
}
|