kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Redo .card-deck and .card-group so they're always flex (#22860)

Browse source
This commit is contained in:
Mark Otto 2017-08-13 14:53:24 -07:00 • committed by GitHub
parent 2be34d5ce9
commit 54d76805a5
2 changed files with 23 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
scss/_card.scss
View file

@ -130,9 +130,15 @@
// Card deck // Card deck
@include media-breakpoint-up(sm) { .card-deck {
.card-deck { display: flex;
display: flex; flex-direction: column;
.card {
margin-bottom: $card-deck-margin;
}
@include media-breakpoint-up(sm) {
flex-flow: row wrap; flex-flow: row wrap;
margin-right: -$card-deck-margin; margin-right: -$card-deck-margin;
margin-left: -$card-deck-margin; margin-left: -$card-deck-margin;
@ -142,6 +148,7 @@
flex: 1 0 0%; flex: 1 0 0%;
flex-direction: column; flex-direction: column;
margin-right: $card-deck-margin; margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default
margin-left: $card-deck-margin; margin-left: $card-deck-margin;
} }
} }
@ -152,15 +159,22 @@
// Card groups // Card groups
// //
@include media-breakpoint-up(sm) { .card-group {
.card-group { display: flex;
display: flex; flex-direction: column;
.card {
margin-bottom: $card-group-margin;
}
@include media-breakpoint-up(sm) {
flex-flow: row wrap; flex-flow: row wrap;
.card { .card {
flex: 1 0 0%; flex: 1 0 0%;
+ .card { + .card {
margin-bottom: 0;
margin-left: 0; margin-left: 0;
border-left: 0; border-left: 0;
} }
@ -177,6 +191,7 @@
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
} }
&:last-child { &:last-child {
@include border-left-radius(0); @include border-left-radius(0);

3
scss/_variables.scss
View file

@ -632,7 +632,8 @@ $card-bg: $white !default;
$card-img-overlay-padding: 1.25rem !default; $card-img-overlay-padding: 1.25rem !default;
$card-deck-margin: ($grid-gutter-width / 2) !default; $card-group-margin: ($grid-gutter-width / 2) !default;
$card-deck-margin: $card-group-margin !default;
$card-columns-count: 3 !default; $card-columns-count: 3 !default;
$card-columns-gap: 1.25rem !default; $card-columns-gap: 1.25rem !default;