diff options
author | Blake Gentry <blakesgentry@gmail.com> | 2017-01-06 21:10:24 +0300 |
---|---|---|
committer | Blake Gentry <blakesgentry@gmail.com> | 2017-01-06 21:10:24 +0300 |
commit | f82164992580fca0c3e3dde7d6d097784a514e5b (patch) | |
tree | bb3ff36c326d696623203563a53cab5982970ad8 /assets/stylesheets/bootstrap/_card.scss | |
parent | 023043a2da9098e7b8521a2ac62b7b5a470c40d9 (diff) |
rake update[v4.0.0-alpha.6]
Diffstat (limited to 'assets/stylesheets/bootstrap/_card.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_card.scss | 106 |
1 files changed, 30 insertions, 76 deletions
diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss index 01a5733..9fe70e8 100644 --- a/assets/stylesheets/bootstrap/_card.scss +++ b/assets/stylesheets/bootstrap/_card.scss @@ -4,16 +4,17 @@ .card { position: relative; - display: block; - margin-bottom: $card-spacer-y; + display: flex; + flex-direction: column; background-color: $card-bg; - // border: $card-border-width solid $card-border-color; - @include border-radius($card-border-radius); border: $card-border-width solid $card-border-color; + @include border-radius($card-border-radius); } .card-block { - @include clearfix; + // Enable `flex-grow: 1` for decks and groups so that card blocks take up + // as much space as possible, ensuring footers are aligned to the bottom. + flex: 1 1 auto; padding: $card-spacer-x; } @@ -30,14 +31,6 @@ margin-bottom: 0; } -// .card-actions { -// padding: $card-spacer-y $card-spacer-x; - -// .card-link + .card-link { -// margin-left: $card-spacer-x; -// } -// } - .card-link { @include hover { text-decoration: none; @@ -68,7 +61,6 @@ // .card-header { - @include clearfix; padding: $card-spacer-y $card-spacer-x; margin-bottom: 0; // Removes the default margin-bottom of <hN> background-color: $card-cap-bg; @@ -80,7 +72,6 @@ } .card-footer { - @include clearfix; padding: $card-spacer-y $card-spacer-x; background-color: $card-cap-bg; border-top: $card-border-width solid $card-border-color; @@ -191,77 +182,39 @@ } -// Card set -// -// Heads up! We do some funky style resetting here for margins across our two -// variations (one flex, one table). Individual cards have margin-bottom by -// default, but they're ignored due to table styles. For a consistent design, -// we've done the same to the flex variation. -// -// Those changes are noted by `// Margin balancing`. +// Card deck -@if $enable-flex { - @include media-breakpoint-up(sm) { - .card-deck { +@include media-breakpoint-up(sm) { + .card-deck { + display: flex; + flex-flow: row wrap; + + .card { display: flex; - flex-flow: row wrap; - margin-right: -$card-deck-margin; - margin-bottom: $card-spacer-y; // Margin balancing - margin-left: -$card-deck-margin; - - .card { - flex: 1 0 0; - margin-right: $card-deck-margin; - margin-bottom: 0; // Margin balancing - margin-left: $card-deck-margin; - } - } - } -} @else { - @include media-breakpoint-up(sm) { - $space-between-cards: (2 * $card-deck-margin); - .card-deck { - display: table; - width: 100%; - margin-bottom: $card-spacer-y; // Margin balancing - table-layout: fixed; - border-spacing: $space-between-cards 0; - - .card { - display: table-cell; - margin-bottom: 0; // Margin balancing - vertical-align: top; - } - } - .card-deck-wrapper { - margin-right: (-$space-between-cards); - margin-left: (-$space-between-cards); + flex: 1 0 0; + flex-direction: column; + + // Selectively apply horizontal margins to cards to avoid doing the + // negative margin dance like our grid. This differs from the grid + // due to the use of margins as gutters instead of padding. + &:not(:first-child) { margin-left: $card-deck-margin; } + &:not(:last-child) { margin-right: $card-deck-margin; } } } } + // // Card groups // @include media-breakpoint-up(sm) { .card-group { - @if $enable-flex { - display: flex; - flex-flow: row wrap; - } @else { - display: table; - width: 100%; - table-layout: fixed; - } + display: flex; + flex-flow: row wrap; .card { - @if $enable-flex { - flex: 1 0 0; - } @else { - display: table-cell; - vertical-align: top; - } + flex: 1 0 0; + .card { margin-left: 0; @@ -306,17 +259,18 @@ // -// Card +// Columns // @include media-breakpoint-up(sm) { .card-columns { - column-count: 3; - column-gap: $card-columns-sm-up-column-gap; + column-count: $card-columns-count; + column-gap: $card-columns-gap; .card { display: inline-block; // Don't let them vertically span multiple columns - width: 100%; // Don't let them exceed the column width + width: 100%; // Don't let their width change + margin-bottom: $card-columns-margin; } } } |