diff options
author | Mark Otto <markdotto@gmail.com> | 2016-12-23 05:59:05 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2016-12-23 05:59:05 +0300 |
commit | 040acd30dbd4c2cf3a21ff061b60755c793c2c64 (patch) | |
tree | 0698464175f5b661b01d37c71589415f1a502031 /scss/_card.scss | |
parent | b3d8426ffe59af516e3d371c7cc37dc49cd588fe (diff) |
change card deck margin strategy
- Instead of negative left/right margins, we selectively apply margins to the cards as needed. This way the first and last child never receive a left and right margin (respectively), so we don't need to negative indent those at the .card-deck level.
- Drops the margin-bottom override on the .card because there's no more default margin there.
- Drop the margin-bottom from the .card-deck to match our lack of margins on the card.
This and the previous commit fixes #19883.
Diffstat (limited to 'scss/_card.scss')
-rw-r--r-- | scss/_card.scss | 12 |
1 files changed, 6 insertions, 6 deletions
diff --git a/scss/_card.scss b/scss/_card.scss index deb789ea0e..9857ea2d98 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -195,17 +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; + + // 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; } } } } |