diff options
| author | Mark Otto <[email protected]> | 2017-08-13 14:53:24 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-08-13 14:53:24 -0700 |
| commit | 54d76805a5e425bc870d7cff9a75210170711ea4 (patch) | |
| tree | 791058397d45e483b85ba04788e1e3a2c63ac7ea | |
| parent | 2be34d5ce9ba1e4b03e534775e692f7de0267156 (diff) | |
| download | bootstrap-54d76805a5e425bc870d7cff9a75210170711ea4.tar.xz bootstrap-54d76805a5e425bc870d7cff9a75210170711ea4.zip | |
Redo .card-deck and .card-group so they're always flex (#22860)
| -rw-r--r-- | scss/_card.scss | 27 | ||||
| -rw-r--r-- | scss/_variables.scss | 3 |
2 files changed, 23 insertions, 7 deletions
diff --git a/scss/_card.scss b/scss/_card.scss index 1ab85a4ec..b5bc26b15 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -130,9 +130,15 @@ // Card deck -@include media-breakpoint-up(sm) { - .card-deck { - display: flex; +.card-deck { + display: flex; + flex-direction: column; + + .card { + margin-bottom: $card-deck-margin; + } + + @include media-breakpoint-up(sm) { flex-flow: row wrap; margin-right: -$card-deck-margin; margin-left: -$card-deck-margin; @@ -142,6 +148,7 @@ flex: 1 0 0%; flex-direction: column; margin-right: $card-deck-margin; + margin-bottom: 0; // Override the default margin-left: $card-deck-margin; } } @@ -152,15 +159,22 @@ // Card groups // -@include media-breakpoint-up(sm) { - .card-group { - display: flex; +.card-group { + display: flex; + flex-direction: column; + + .card { + margin-bottom: $card-group-margin; + } + + @include media-breakpoint-up(sm) { flex-flow: row wrap; .card { flex: 1 0 0%; + .card { + margin-bottom: 0; margin-left: 0; border-left: 0; } @@ -177,6 +191,7 @@ border-bottom-right-radius: 0; } } + &:last-child { @include border-left-radius(0); diff --git a/scss/_variables.scss b/scss/_variables.scss index 4b3299ce9..049956178 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -632,7 +632,8 @@ $card-bg: $white !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-gap: 1.25rem !default; |