mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 21:22:52 +02:00
Code Issues Releases Wiki Activity

Merge branch 'flex-cards' into v4-dev

Browse Source
This commit is contained in:
Mark Otto
2016-12-22 21:27:54 -08:00
parent 5b2d9f95d5 4b62a93906
commit 94bd6b76be
5 changed files with 292 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
scss/_card.scss
View File

@@ -4,14 +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);
}
.card-block {
// 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;
}
@@ -28,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;
@@ -200,21 +195,17 @@
.card-deck {
display: flex;
flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-bottom: $card-spacer-y; // Margin balancing
margin-left: -$card-deck-margin;
.card {
display: flex;
flex: 1 0 0;
flex-direction: column;
margin-right: $card-deck-margin;
margin-bottom: 0; // Margin balancing
margin-left: $card-deck-margin;
}
.card-block {
flex-grow: 1;
// 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; }
}
}
}
@@ -275,17 +266,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;
}
}
}

6
scss/_variables.scss
View File

@@ -707,9 +707,11 @@ $card-link-hover-color: $white !default;
$card-img-overlay-padding: 1.25rem !default;
$card-deck-margin: .625rem !default;
$card-deck-margin: ($grid-gutter-width-base / 2) !default;
$card-columns-sm-up-column-gap: 1.25rem !default;
$card-columns-count: 3 !default;
$card-columns-gap: 1.25rem !default;
$card-columns-margin: $card-spacer-y !default;
// 22. Tooltips