1 |
|
2 |
|
3 |
|
4 |
|
5 | .list-group {
|
6 | display: flex;
|
7 | flex-direction: column;
|
8 |
|
9 |
|
10 | padding-left: 0;
|
11 | margin-bottom: 0;
|
12 | }
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 | .list-group-item-action {
|
21 | width: 100%;
|
22 | color: $list-group-link-color;
|
23 | text-align: inherit;
|
24 |
|
25 | .list-group-item-heading {
|
26 | color: $list-group-link-heading-color;
|
27 | }
|
28 |
|
29 |
|
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 |
|
44 |
|
45 |
|
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 |
|
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 |
|
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 |
|
87 | &.active {
|
88 | z-index: 2;
|
89 | color: $list-group-active-color;
|
90 | background-color: $list-group-active-bg;
|
91 | border-color: $list-group-active-border;
|
92 |
|
93 |
|
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 |
|
108 |
|
109 |
|
110 |
|
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 |
|
134 |
|
135 |
|
136 |
|
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);
|