| 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 |
|
|
|
26 |
// Hover state
|
|
|
27 |
@include hover-focus() {
|
|
|
28 |
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
|
|
29 |
color: $list-group-action-hover-color;
|
|
|
30 |
text-decoration: none;
|
|
|
31 |
background-color: $list-group-hover-bg;
|
|
|
32 |
}
|
|
|
33 |
|
|
|
34 |
&:active {
|
|
|
35 |
color: $list-group-action-active-color;
|
|
|
36 |
background-color: $list-group-action-active-bg;
|
|
|
37 |
}
|
|
|
38 |
}
|
|
|
39 |
|
|
|
40 |
|
|
|
41 |
// Individual list items
|
|
|
42 |
//
|
|
|
43 |
// Use on `li`s or `div`s within the `.list-group` parent.
|
|
|
44 |
|
|
|
45 |
.list-group-item {
|
|
|
46 |
position: relative;
|
|
|
47 |
display: block;
|
|
|
48 |
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
|
|
49 |
color: $list-group-color;
|
|
|
50 |
text-decoration: if($link-decoration == none, null, none);
|
|
|
51 |
background-color: $list-group-bg;
|
|
|
52 |
border: $list-group-border-width solid $list-group-border-color;
|
|
|
53 |
|
|
|
54 |
&:first-child {
|
|
|
55 |
@include border-top-radius(inherit);
|
|
|
56 |
}
|
|
|
57 |
|
|
|
58 |
&:last-child {
|
|
|
59 |
@include border-bottom-radius(inherit);
|
|
|
60 |
}
|
|
|
61 |
|
|
|
62 |
&.disabled,
|
|
|
63 |
&:disabled {
|
|
|
64 |
color: $list-group-disabled-color;
|
|
|
65 |
pointer-events: none;
|
|
|
66 |
background-color: $list-group-disabled-bg;
|
|
|
67 |
}
|
|
|
68 |
|
|
|
69 |
// Include both here for `<a>`s and `<button>`s
|
|
|
70 |
&.active {
|
|
|
71 |
z-index: 2; // Place active items above their siblings for proper border styling
|
|
|
72 |
color: $list-group-active-color;
|
|
|
73 |
background-color: $list-group-active-bg;
|
|
|
74 |
border-color: $list-group-active-border-color;
|
|
|
75 |
}
|
|
|
76 |
|
|
|
77 |
& + & {
|
|
|
78 |
border-top-width: 0;
|
|
|
79 |
|
|
|
80 |
&.active {
|
|
|
81 |
margin-top: -$list-group-border-width;
|
|
|
82 |
border-top-width: $list-group-border-width;
|
|
|
83 |
}
|
|
|
84 |
}
|
|
|
85 |
}
|
|
|
86 |
|
|
|
87 |
|
|
|
88 |
// Horizontal
|
|
|
89 |
//
|
|
|
90 |
// Change the layout of list group items from vertical (default) to horizontal.
|
|
|
91 |
|
|
|
92 |
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
|
93 |
@include media-breakpoint-up($breakpoint) {
|
|
|
94 |
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
95 |
|
|
|
96 |
.list-group-horizontal#{$infix} {
|
|
|
97 |
flex-direction: row;
|
|
|
98 |
|
|
|
99 |
> .list-group-item {
|
|
|
100 |
&:first-child {
|
|
|
101 |
@include border-bottom-left-radius($list-group-border-radius);
|
|
|
102 |
@include border-top-right-radius(0);
|
|
|
103 |
}
|
|
|
104 |
|
|
|
105 |
&:last-child {
|
|
|
106 |
@include border-top-right-radius($list-group-border-radius);
|
|
|
107 |
@include border-bottom-left-radius(0);
|
|
|
108 |
}
|
|
|
109 |
|
|
|
110 |
&.active {
|
|
|
111 |
margin-top: 0;
|
|
|
112 |
}
|
|
|
113 |
|
|
|
114 |
+ .list-group-item {
|
|
|
115 |
border-top-width: $list-group-border-width;
|
|
|
116 |
border-left-width: 0;
|
|
|
117 |
|
|
|
118 |
&.active {
|
|
|
119 |
margin-left: -$list-group-border-width;
|
|
|
120 |
border-left-width: $list-group-border-width;
|
|
|
121 |
}
|
|
|
122 |
}
|
|
|
123 |
}
|
|
|
124 |
}
|
|
|
125 |
}
|
|
|
126 |
}
|
|
|
127 |
|
|
|
128 |
|
|
|
129 |
// Flush list items
|
|
|
130 |
//
|
|
|
131 |
// Remove borders and border-radius to keep list group items edge-to-edge. Most
|
|
|
132 |
// useful within other components (e.g., cards).
|
|
|
133 |
|
|
|
134 |
.list-group-flush {
|
|
|
135 |
@include border-radius(0);
|
|
|
136 |
|
|
|
137 |
> .list-group-item {
|
|
|
138 |
border-width: 0 0 $list-group-border-width;
|
|
|
139 |
|
|
|
140 |
&:last-child {
|
|
|
141 |
border-bottom-width: 0;
|
|
|
142 |
}
|
|
|
143 |
}
|
|
|
144 |
}
|
|
|
145 |
|
|
|
146 |
|
|
|
147 |
// Contextual variants
|
|
|
148 |
//
|
|
|
149 |
// Add modifier classes to change text and background color on individual items.
|
|
|
150 |
// Organizationally, this must come after the `:hover` states.
|
|
|
151 |
|
|
|
152 |
@each $color, $value in $theme-colors {
|
|
|
153 |
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
|
|
|
154 |
}
|