]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // |
2 | // Base styles | |
3 | // | |
4 | ||
5 | .card { | |
6 | position: relative; | |
7 | display: flex; | |
8 | flex-direction: column; | |
9 | background-color: $card-bg; | |
10 | border: $card-border-width solid $card-border-color; | |
11 | @include border-radius($card-border-radius); | |
12 | } | |
13 | ||
14 | .card-block { | |
15 | // Enable `flex-grow: 1` for decks and groups so that card blocks take up | |
16 | // as much space as possible, ensuring footers are aligned to the bottom. | |
17 | flex: 1 1 auto; | |
18 | padding: $card-spacer-x; | |
19 | } | |
20 | ||
21 | .card-title { | |
22 | margin-bottom: $card-spacer-y; | |
23 | } | |
24 | ||
25 | .card-subtitle { | |
26 | margin-top: -($card-spacer-y / 2); | |
27 | margin-bottom: 0; | |
28 | } | |
29 | ||
30 | .card-text:last-child { | |
31 | margin-bottom: 0; | |
32 | } | |
33 | ||
34 | .card-link { | |
35 | @include hover { | |
36 | text-decoration: none; | |
37 | } | |
38 | ||
39 | + .card-link { | |
40 | margin-left: $card-spacer-x; | |
41 | } | |
42 | } | |
43 | ||
44 | .card { | |
45 | > .list-group:first-child { | |
46 | .list-group-item:first-child { | |
47 | @include border-top-radius($card-border-radius); | |
48 | } | |
49 | } | |
50 | ||
51 | > .list-group:last-child { | |
52 | .list-group-item:last-child { | |
53 | @include border-bottom-radius($card-border-radius); | |
54 | } | |
55 | } | |
56 | } | |
57 | ||
58 | ||
59 | // | |
60 | // Optional textual caps | |
61 | // | |
62 | ||
63 | .card-header { | |
64 | padding: $card-spacer-y $card-spacer-x; | |
65 | margin-bottom: 0; // Removes the default margin-bottom of <hN> | |
66 | background-color: $card-cap-bg; | |
67 | border-bottom: $card-border-width solid $card-border-color; | |
68 | ||
69 | &:first-child { | |
70 | @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); | |
71 | } | |
72 | } | |
73 | ||
74 | .card-footer { | |
75 | padding: $card-spacer-y $card-spacer-x; | |
76 | background-color: $card-cap-bg; | |
77 | border-top: $card-border-width solid $card-border-color; | |
78 | ||
79 | &:last-child { | |
80 | @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); | |
81 | } | |
82 | } | |
83 | ||
84 | ||
85 | // | |
86 | // Header navs | |
87 | // | |
88 | ||
89 | .card-header-tabs { | |
90 | margin-right: -($card-spacer-x / 2); | |
91 | margin-bottom: -$card-spacer-y; | |
92 | margin-left: -($card-spacer-x / 2); | |
93 | border-bottom: 0; | |
94 | } | |
95 | ||
96 | .card-header-pills { | |
97 | margin-right: -($card-spacer-x / 2); | |
98 | margin-left: -($card-spacer-x / 2); | |
99 | } | |
100 | ||
101 | ||
102 | // | |
103 | // Background variations | |
104 | // | |
105 | ||
106 | .card-primary { | |
107 | @include card-variant($brand-primary, $brand-primary); | |
108 | } | |
109 | .card-success { | |
110 | @include card-variant($brand-success, $brand-success); | |
111 | } | |
112 | .card-info { | |
113 | @include card-variant($brand-info, $brand-info); | |
114 | } | |
115 | .card-warning { | |
116 | @include card-variant($brand-warning, $brand-warning); | |
117 | } | |
118 | .card-danger { | |
119 | @include card-variant($brand-danger, $brand-danger); | |
120 | } | |
121 | ||
122 | // Remove all backgrounds | |
123 | .card-outline-primary { | |
124 | @include card-outline-variant($btn-primary-bg); | |
125 | } | |
126 | .card-outline-secondary { | |
127 | @include card-outline-variant($btn-secondary-border); | |
128 | } | |
129 | .card-outline-info { | |
130 | @include card-outline-variant($btn-info-bg); | |
131 | } | |
132 | .card-outline-success { | |
133 | @include card-outline-variant($btn-success-bg); | |
134 | } | |
135 | .card-outline-warning { | |
136 | @include card-outline-variant($btn-warning-bg); | |
137 | } | |
138 | .card-outline-danger { | |
139 | @include card-outline-variant($btn-danger-bg); | |
140 | } | |
141 | ||
142 | // | |
143 | // Inverse text within a card for use with dark backgrounds | |
144 | // | |
145 | ||
146 | .card-inverse { | |
147 | @include card-inverse; | |
148 | } | |
149 | ||
150 | // | |
151 | // Blockquote | |
152 | // | |
153 | ||
154 | .card-blockquote { | |
155 | padding: 0; | |
156 | margin-bottom: 0; | |
157 | border-left: 0; | |
158 | } | |
159 | ||
160 | // Card image | |
161 | .card-img { | |
162 | // margin: -1.325rem; | |
163 | @include border-radius($card-border-radius-inner); | |
164 | } | |
165 | .card-img-overlay { | |
166 | position: absolute; | |
167 | top: 0; | |
168 | right: 0; | |
169 | bottom: 0; | |
170 | left: 0; | |
171 | padding: $card-img-overlay-padding; | |
172 | } | |
173 | ||
174 | ||
175 | ||
176 | // Card image caps | |
177 | .card-img-top { | |
178 | @include border-top-radius($card-border-radius-inner); | |
179 | } | |
180 | .card-img-bottom { | |
181 | @include border-bottom-radius($card-border-radius-inner); | |
182 | } | |
183 | ||
184 | ||
185 | // Card deck | |
186 | ||
187 | @include media-breakpoint-up(sm) { | |
188 | .card-deck { | |
189 | display: flex; | |
190 | flex-flow: row wrap; | |
191 | ||
192 | .card { | |
193 | display: flex; | |
194 | flex: 1 0 0; | |
195 | flex-direction: column; | |
196 | ||
197 | // Selectively apply horizontal margins to cards to avoid doing the | |
198 | // negative margin dance like our grid. This differs from the grid | |
199 | // due to the use of margins as gutters instead of padding. | |
200 | &:not(:first-child) { margin-left: $card-deck-margin; } | |
201 | &:not(:last-child) { margin-right: $card-deck-margin; } | |
202 | } | |
203 | } | |
204 | } | |
205 | ||
206 | ||
207 | // | |
208 | // Card groups | |
209 | // | |
210 | ||
211 | @include media-breakpoint-up(sm) { | |
212 | .card-group { | |
213 | display: flex; | |
214 | flex-flow: row wrap; | |
215 | ||
216 | .card { | |
217 | flex: 1 0 0; | |
218 | ||
219 | + .card { | |
220 | margin-left: 0; | |
221 | border-left: 0; | |
222 | } | |
223 | ||
224 | // Handle rounded corners | |
225 | @if $enable-rounded { | |
226 | &:first-child { | |
227 | @include border-right-radius(0); | |
228 | ||
229 | .card-img-top { | |
230 | border-top-right-radius: 0; | |
231 | } | |
232 | .card-img-bottom { | |
233 | border-bottom-right-radius: 0; | |
234 | } | |
235 | } | |
236 | &:last-child { | |
237 | @include border-left-radius(0); | |
238 | ||
239 | .card-img-top { | |
240 | border-top-left-radius: 0; | |
241 | } | |
242 | .card-img-bottom { | |
243 | border-bottom-left-radius: 0; | |
244 | } | |
245 | } | |
246 | ||
247 | &:not(:first-child):not(:last-child) { | |
248 | border-radius: 0; | |
249 | ||
250 | .card-img-top, | |
251 | .card-img-bottom { | |
252 | border-radius: 0; | |
253 | } | |
254 | } | |
255 | } | |
256 | } | |
257 | } | |
258 | } | |
259 | ||
260 | ||
261 | // | |
262 | // Columns | |
263 | // | |
264 | ||
265 | @include media-breakpoint-up(sm) { | |
266 | .card-columns { | |
267 | column-count: $card-columns-count; | |
268 | column-gap: $card-columns-gap; | |
269 | ||
270 | .card { | |
271 | display: inline-block; // Don't let them vertically span multiple columns | |
272 | width: 100%; // Don't let their width change | |
273 | margin-bottom: $card-columns-margin; | |
274 | } | |
275 | } | |
276 | } |