Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix wrapping card decks #22289

Merged
merged 2 commits into from
Mar 28, 2017
Merged

Fix wrapping card decks #22289

merged 2 commits into from
Mar 28, 2017

Conversation

mdo
Copy link
Member

@mdo mdo commented Mar 28, 2017

Fixes #22007 and fixes #21976 by changing margin strategy for card deck gutters. Note this doesn't apply any vertical margin to the cards; it only fixes the wrapping issue.

@mdo mdo added this to the v4.0.0-beta milestone Mar 28, 2017
@mdo
Copy link
Member Author

mdo commented Mar 28, 2017

Demo: https://jsbin.com/kesacuj/

scss/_card.scss Outdated
// 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; }
margin-left: $card-deck-margin;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Properties should be ordered display, flex, flex-direction, margin-right, margin-left

scss/_card.scss Outdated
@@ -188,17 +188,15 @@
.card-deck {
display: flex;
flex-flow: row wrap;
margin-left: -$card-deck-margin;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Properties should be ordered display, flex-flow, margin-right, margin-left

@mdo mdo merged commit bebdbe4 into v4-dev Mar 28, 2017
@mdo mdo deleted the card-deck branch March 28, 2017 05:53
@mdo mdo mentioned this pull request Mar 28, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants