|
9 | 9 | background-color: $card-bg; |
10 | 10 | // border: $card-border-width solid $card-border-color; |
11 | 11 | @include border-radius($card-border-radius); |
12 | | - // Doesn't use mixin so that cards always have a "border" |
13 | | - box-shadow: inset 0 0 0 $card-border-width $card-border-color; |
| 12 | + border: $card-border-width solid $card-border-color; |
14 | 13 | } |
15 | 14 |
|
16 | 15 | .card-block { |
|
49 | 48 | } |
50 | 49 | } |
51 | 50 |
|
52 | | -@if $enable-rounded { |
53 | | - .card { |
54 | | - > .list-group:first-child { |
55 | | - .list-group-item:first-child { |
56 | | - border-top-left-radius: $card-border-radius; |
57 | | - border-top-right-radius: $card-border-radius; |
58 | | - } |
| 51 | +.card { |
| 52 | + > .list-group:first-child { |
| 53 | + .list-group-item:first-child { |
| 54 | + @include border-top-radius($card-border-radius); |
59 | 55 | } |
| 56 | + } |
60 | 57 |
|
61 | | - > .list-group:last-child { |
62 | | - .list-group-item:last-child { |
63 | | - border-bottom-right-radius: $card-border-radius; |
64 | | - border-bottom-left-radius: $card-border-radius; |
65 | | - } |
| 58 | + > .list-group:last-child { |
| 59 | + .list-group-item:last-child { |
| 60 | + @include border-bottom-radius($card-border-radius); |
66 | 61 | } |
67 | 62 | } |
68 | 63 | } |
|
76 | 71 | @include clearfix; |
77 | 72 | padding: $card-spacer-y $card-spacer-x; |
78 | 73 | background-color: $card-cap-bg; |
79 | | - // border-bottom: $card-border-width solid $card-border-color; |
80 | | - // Doesn't use mixin so that cards always have a "border" |
81 | | - box-shadow: inset 0 0 0 $card-border-width $card-border-color; |
| 74 | + border-bottom: $card-border-width solid $card-border-color; |
82 | 75 |
|
83 | 76 | &:first-child { |
84 | 77 | @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); |
|
89 | 82 | @include clearfix; |
90 | 83 | padding: $card-spacer-y $card-spacer-x; |
91 | 84 | background-color: $card-cap-bg; |
92 | | - // border-top: $card-border-width solid $card-border-color; |
93 | | - // Doesn't use mixin so that cards always have a "border" |
94 | | - box-shadow: inset 0 0 0 $card-border-width $card-border-color; |
| 85 | + border-top: $card-border-width solid $card-border-color; |
95 | 86 |
|
96 | 87 | &:last-child { |
97 | 88 | @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); |
|
108 | 99 | margin-bottom: -$card-spacer-y; |
109 | 100 | margin-left: -($card-spacer-x / 2); |
110 | 101 | border-bottom: 0; |
111 | | - |
112 | | - .nav-item { |
113 | | - margin-bottom: 0; |
114 | | - } |
115 | 102 | } |
116 | 103 |
|
117 | 104 | .card-header-pills { |
|
189 | 176 | right: 0; |
190 | 177 | bottom: 0; |
191 | 178 | left: 0; |
192 | | - padding: 1.25rem; |
| 179 | + padding: $card-img-overlay-padding; |
193 | 180 | } |
194 | 181 |
|
195 | 182 |
|
196 | 183 |
|
197 | 184 | // Card image caps |
198 | 185 | .card-img-top { |
199 | | - @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); |
| 186 | + @include border-top-radius($card-border-radius-inner); |
200 | 187 | } |
201 | 188 | .card-img-bottom { |
202 | | - @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); |
| 189 | + @include border-bottom-radius($card-border-radius-inner); |
203 | 190 | } |
204 | 191 |
|
205 | 192 |
|
206 | | -// |
207 | 193 | // Card set |
208 | 194 | // |
| 195 | +// Heads up! We do some funky style resetting here for margins across our two |
| 196 | +// variations (one flex, one table). Individual cards have margin-bottom by |
| 197 | +// default, but they're ignored due to table styles. For a consistent design, |
| 198 | +// we've done the same to the flex variation. |
| 199 | +// |
| 200 | +// Those changes are noted by `// Margin balancing`. |
209 | 201 |
|
210 | 202 | @if $enable-flex { |
211 | 203 | @include media-breakpoint-up(sm) { |
212 | 204 | .card-deck { |
213 | 205 | display: flex; |
214 | 206 | flex-flow: row wrap; |
215 | 207 | margin-right: -$card-deck-margin; |
| 208 | + margin-bottom: $card-spacer-y; // Margin balancing |
216 | 209 | margin-left: -$card-deck-margin; |
217 | 210 |
|
218 | 211 | .card { |
219 | 212 | flex: 1 0 0; |
220 | 213 | margin-right: $card-deck-margin; |
| 214 | + margin-bottom: 0; // Margin balancing |
221 | 215 | margin-left: $card-deck-margin; |
222 | 216 | } |
223 | 217 | } |
|
227 | 221 | $space-between-cards: (2 * $card-deck-margin); |
228 | 222 | .card-deck { |
229 | 223 | display: table; |
| 224 | + width: 100%; |
| 225 | + margin-bottom: $card-spacer-y; // Margin balancing |
230 | 226 | table-layout: fixed; |
231 | 227 | border-spacing: $space-between-cards 0; |
232 | 228 |
|
233 | 229 | .card { |
234 | 230 | display: table-cell; |
235 | | - width: 1%; |
| 231 | + margin-bottom: 0; // Margin balancing |
236 | 232 | vertical-align: top; |
237 | 233 | } |
238 | 234 | } |
|
0 commit comments