diff --git a/scss/_card.scss b/scss/_card.scss index b3d6e39615..03a2aa814e 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -2,15 +2,19 @@ // Base styles // -$card-spacer-x: 1.25rem; -$card-spacer-y: .75rem; -$card-border-width: .0625rem; -$card-border-radius: .25rem; +$card-spacer-x: 1.25rem; +$card-spacer-y: .75rem; +$card-border-width: .0625rem; +$card-border-radius: .25rem; +$card-border-color: #e5e5e5; +$card-border-radius-inner: ($card-border-radius - $card-border-width); + +$card-cap-bg: #f5f5f5; .card { position: relative; margin-bottom: $card-spacer-y; - border: $card-border-width solid #e5e5e5; + border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); } @@ -73,19 +77,21 @@ $card-border-radius: .25rem; .card-header { padding: $card-spacer-y $card-spacer-x; - border-bottom: $card-border-width solid #eee; + background-color: $card-cap-bg; + border-bottom: $card-border-width solid $card-border-color; &:first-child { - @include border-radius($card-border-radius $card-border-radius 0 0); + @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); } } .card-footer { padding: $card-spacer-y $card-spacer-x; - border-top: $card-border-width solid #eee; + background-color: $card-cap-bg; + border-top: $card-border-width solid $card-border-color; &:last-child { - @include border-radius(0 0 $card-border-radius $card-border-radius); + @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); } } @@ -233,6 +239,7 @@ $card-border-radius: .25rem; flex: 1 0 0; } @else { display: table-cell; + vertical-align: top; } + .card { @@ -241,34 +248,31 @@ $card-border-radius: .25rem; } // Handle rounded corners - &:first-child { - .card-img-top { - @if $enable-rounded { + @if $enable-rounded { + &:first-child { + .card-img-top { border-top-right-radius: 0; } - } - .card-img-bottom { - @if $enable-rounded { + .card-img-bottom { border-bottom-right-radius: 0; } } - } - &:last-child { - .card-img-top { - @if $enable-rounded { + &:last-child { + .card-img-top { border-top-left-radius: 0; } - } - .card-img-bottom { - @if $enable-rounded { + .card-img-bottom { border-bottom-left-radius: 0; } } - } - &:not(:first-child):not(:last-child) { - .card-img-top, - .card-img-bottom { - @include border-radius(0); + + &:not(:first-child):not(:last-child) { + border-radius: 0; + + .card-img-top, + .card-img-bottom { + border-radius: 0; + } } } }