Adjust card spacing variables (#29813)

diff --git a/scss/_card.scss b/scss/_card.scss
index 542220b4051c0e4ce4fd3d30e416869173805c1e..510fbcea1e5a5cb995443d3bdf3a725e92320569 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -39,16 +39,16 @@
   // Workaround for the image size bug in IE
   // See: https://github.com/twbs/bootstrap/pull/28855
   min-height: 1px;
-  padding: $card-spacer-x;
+  padding: $card-spacer-y $card-spacer-x;
   color: $card-color;
 }
 
 .card-title {
-  margin-bottom: $card-spacer-y;
+  margin-bottom: $card-title-spacer-y;
 }
 
 .card-subtitle {
-  margin-top: -$card-spacer-y / 2;
+  margin-top: -$card-title-spacer-y / 2;
   margin-bottom: 0;
 }
 
@@ -71,7 +71,7 @@
 //
 
 .card-header {
-  padding: $card-spacer-y $card-spacer-x;
+  padding: $card-cap-padding-y $card-cap-padding-x;
   margin-bottom: 0; // Removes the default margin-bottom of <hN>
   color: $card-cap-color;
   background-color: $card-cap-bg;
@@ -89,7 +89,7 @@
 }
 
 .card-footer {
-  padding: $card-spacer-y $card-spacer-x;
+  padding: $card-cap-padding-y $card-cap-padding-x;
   background-color: $card-cap-bg;
   border-top: $card-border-width solid $card-border-color;
 
@@ -104,9 +104,9 @@
 //
 
 .card-header-tabs {
-  margin-right: -$card-spacer-x / 2;
-  margin-bottom: -$card-spacer-y;
-  margin-left: -$card-spacer-x / 2;
+  margin-right: -$card-cap-padding-x / 2;
+  margin-bottom: -$card-cap-padding-y;
+  margin-left: -$card-cap-padding-x / 2;
   border-bottom: 0;
 
   @if $nav-tabs-link-active-bg != $card-bg {
@@ -118,8 +118,8 @@
 }
 
 .card-header-pills {
-  margin-right: -$card-spacer-x / 2;
-  margin-left: -$card-spacer-x / 2;
+  margin-right: -$card-cap-padding-x / 2;
+  margin-left: -$card-cap-padding-x / 2;
 }
 
 // Card image

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 48cdfd523e2cbb7f1d55e7b54f4b6eecdcbd2834..2fa04f6ce5001ee97e86ecaa31319ee5f37e133b 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -936,12 +936,15 @@ $pagination-disabled-border-color:  $gray-300 !default;
 
 // Cards
 
-$card-spacer-y:                     .75rem !default;
+$card-spacer-y:                     1.25rem !default;
 $card-spacer-x:                     1.25rem !default;
+$card-title-spacer-y:               .75rem !default;
 $card-border-width:                 $border-width !default;
 $card-border-radius:                $border-radius !default;
 $card-border-color:                 rgba($black, .125) !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
+$card-cap-padding-y:                .75rem !default;
+$card-cap-padding-x:                1.25rem !default;
 $card-cap-bg:                       rgba($black, .03) !default;
 $card-cap-color:                    null !default;
 $card-height:                       null !default;