1 |
|
2 |
|
3 |
|
4 |
|
5 | .list-group {
|
6 |
|
7 | --#{$prefix}list-group-color: #{$list-group-color};
|
8 | --#{$prefix}list-group-bg: #{$list-group-bg};
|
9 | --#{$prefix}list-group-border-color: #{$list-group-border-color};
|
10 | --#{$prefix}list-group-border-width: #{$list-group-border-width};
|
11 | --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
|
12 | --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
|
13 | --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
|
14 | --#{$prefix}list-group-action-color: #{$list-group-action-color};
|
15 | --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
|
16 | --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
|
17 | --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
|
18 | --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
|
19 | --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
|
20 | --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
|
21 | --#{$prefix}list-group-active-color: #{$list-group-active-color};
|
22 | --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
|
23 | --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
|
24 |
|
25 |
|
26 | display: flex;
|
27 | flex-direction: column;
|
28 |
|
29 |
|
30 | padding-left: 0;
|
31 | margin-bottom: 0;
|
32 | @include border-radius(var(--#{$prefix}list-group-border-radius));
|
33 | }
|
34 |
|
35 | .list-group-numbered {
|
36 | list-style-type: none;
|
37 | counter-reset: section;
|
38 |
|
39 | > .list-group-item::before {
|
40 |
|
41 | content: counters(section, ".") ". ";
|
42 | counter-increment: section;
|
43 | }
|
44 | }
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 | .list-group-item-action {
|
52 | width: 100%;
|
53 | color: var(--#{$prefix}list-group-action-color);
|
54 | text-align: inherit;
|
55 |
|
56 |
|
57 | &:hover,
|
58 | &:focus {
|
59 | z-index: 1;
|
60 | color: var(--#{$prefix}list-group-action-hover-color);
|
61 | text-decoration: none;
|
62 | background-color: var(--#{$prefix}list-group-action-hover-bg);
|
63 | }
|
64 |
|
65 | &:active {
|
66 | color: var(--#{$prefix}list-group-action-active-color);
|
67 | background-color: var(--#{$prefix}list-group-action-active-bg);
|
68 | }
|
69 | }
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 | .list-group-item {
|
76 | position: relative;
|
77 | display: block;
|
78 | padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
|
79 | color: var(--#{$prefix}list-group-color);
|
80 | text-decoration: if($link-decoration == none, null, none);
|
81 | background-color: var(--#{$prefix}list-group-bg);
|
82 | border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
|
83 |
|
84 | &:first-child {
|
85 | @include border-top-radius(inherit);
|
86 | }
|
87 |
|
88 | &:last-child {
|
89 | @include border-bottom-radius(inherit);
|
90 | }
|
91 |
|
92 | &.disabled,
|
93 | &:disabled {
|
94 | color: var(--#{$prefix}list-group-disabled-color);
|
95 | pointer-events: none;
|
96 | background-color: var(--#{$prefix}list-group-disabled-bg);
|
97 | }
|
98 |
|
99 |
|
100 | &.active {
|
101 | z-index: 2;
|
102 | color: var(--#{$prefix}list-group-active-color);
|
103 | background-color: var(--#{$prefix}list-group-active-bg);
|
104 | border-color: var(--#{$prefix}list-group-active-border-color);
|
105 | }
|
106 |
|
107 | & + & {
|
108 | border-top-width: 0;
|
109 |
|
110 | &.active {
|
111 | margin-top: calc(var(--#{$prefix}list-group-border-width) * -1);
|
112 | border-top-width: var(--#{$prefix}list-group-border-width);
|
113 | }
|
114 | }
|
115 | }
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 | @each $breakpoint in map-keys($grid-breakpoints) {
|
122 | @include media-breakpoint-up($breakpoint) {
|
123 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
124 |
|
125 | .list-group-horizontal#{$infix} {
|
126 | flex-direction: row;
|
127 |
|
128 | > .list-group-item {
|
129 | &:first-child {
|
130 | @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
|
131 | @include border-top-end-radius(0);
|
132 | }
|
133 |
|
134 | &:last-child {
|
135 | @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
|
136 | @include border-bottom-start-radius(0);
|
137 | }
|
138 |
|
139 | &.active {
|
140 | margin-top: 0;
|
141 | }
|
142 |
|
143 | + .list-group-item {
|
144 | border-top-width: var(--#{$prefix}list-group-border-width);
|
145 | border-left-width: 0;
|
146 |
|
147 | &.active {
|
148 | margin-left: calc(var(--#{$prefix}list-group-border-width) * -1);
|
149 | border-left-width: var(--#{$prefix}list-group-border-width);
|
150 | }
|
151 | }
|
152 | }
|
153 | }
|
154 | }
|
155 | }
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 | .list-group-flush {
|
164 | @include border-radius(0);
|
165 |
|
166 | > .list-group-item {
|
167 | border-width: 0 0 var(--#{$prefix}list-group-border-width);
|
168 |
|
169 | &:last-child {
|
170 | border-bottom-width: 0;
|
171 | }
|
172 | }
|
173 | }
|
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 | @each $state, $value in $theme-colors {
|
183 | $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
|
184 | $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
|
185 | @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
|
186 | $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
|
187 | }
|
188 |
|
189 | @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
|
190 | }
|
191 |
|