diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_card.scss')
-rw-r--r-- | vendor/twbs/bootstrap/scss/_card.scss | 79 |
1 files changed, 38 insertions, 41 deletions
diff --git a/vendor/twbs/bootstrap/scss/_card.scss b/vendor/twbs/bootstrap/scss/_card.scss index c6b67ce05..7c35f7ed8 100644 --- a/vendor/twbs/bootstrap/scss/_card.scss +++ b/vendor/twbs/bootstrap/scss/_card.scss @@ -7,6 +7,7 @@ display: flex; flex-direction: column; min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 + height: $card-height; word-wrap: break-word; background-color: $card-bg; background-clip: border-box; @@ -18,23 +19,36 @@ margin-left: 0; } - > .list-group:first-child { - .list-group-item:first-child { - @include border-top-radius($card-border-radius); + > .list-group { + border-top: inherit; + border-bottom: inherit; + + &:first-child { + border-top-width: 0; + @include border-top-radius($card-inner-border-radius); } - } - > .list-group:last-child { - .list-group-item:last-child { - @include border-bottom-radius($card-border-radius); + &:last-child { + border-bottom-width: 0; + @include border-bottom-radius($card-inner-border-radius); } } + + // Due to specificity of the above selector (`.card > .list-group`), we must + // use a child selector here to prevent double borders. + > .card-header + .list-group, + > .list-group + .card-footer { + border-top: 0; + } } .card-body { // 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; + // Workaround for the image size bug in IE + // See: https://github.com/twbs/bootstrap/pull/28855 + min-height: 1px; padding: $card-spacer-x; color: $card-color; } @@ -53,7 +67,7 @@ } .card-link { - @include hover { + @include hover() { text-decoration: none; } @@ -76,16 +90,11 @@ &:first-child { @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); } - - + .list-group { - .list-group-item:first-child { - border-top: 0; - } - } } .card-footer { padding: $card-spacer-y $card-spacer-x; + color: $card-cap-color; background-color: $card-cap-bg; border-top: $card-border-width solid $card-border-color; @@ -119,21 +128,23 @@ bottom: 0; left: 0; padding: $card-img-overlay-padding; + @include border-radius($card-inner-border-radius); } -.card-img { +.card-img, +.card-img-top, +.card-img-bottom { + flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396 width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch - @include border-radius($card-inner-border-radius); } -// Card image caps +.card-img, .card-img-top { - width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-top-radius($card-inner-border-radius); } +.card-img, .card-img-bottom { - width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-bottom-radius($card-inner-border-radius); } @@ -141,23 +152,19 @@ // Card deck .card-deck { - display: flex; - flex-direction: column; - .card { margin-bottom: $card-deck-margin; } @include media-breakpoint-up(sm) { + display: flex; flex-flow: row wrap; margin-right: -$card-deck-margin; margin-left: -$card-deck-margin; .card { - display: flex; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; - flex-direction: column; margin-right: $card-deck-margin; margin-bottom: 0; // Override the default margin-left: $card-deck-margin; @@ -171,9 +178,6 @@ // .card-group { - display: flex; - flex-direction: column; - // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { @@ -181,6 +185,7 @@ } @include media-breakpoint-up(sm) { + display: flex; flex-flow: row wrap; // The child selector allows nested `.card` within `.card-group` // to display properly. @@ -259,30 +264,22 @@ // .accordion { + overflow-anchor: none; + > .card { overflow: hidden; - &:not(:first-of-type) { - .card-header:first-child { - @include border-radius(0); - } - - &:not(:last-of-type) { - border-bottom: 0; - @include border-radius(0); - } - } - - &:first-of-type { + &:not(:last-of-type) { border-bottom: 0; @include border-bottom-radius(0); } - &:last-of-type { + &:not(:first-of-type) { @include border-top-radius(0); } - .card-header { + > .card-header { + @include border-radius(0); margin-bottom: -$card-border-width; } } |