Allow multiple ways of padding declaration for modal header (#26976)

* #26967: Allow multiple ways of padding declaration for modal header
* #26976: split vertical and horizontal modal padding

diff --git a/scss/_modal.scss b/scss/_modal.scss
index bc349ff8e670ee428c7d840fc121604e3c16b776..cc8d41ca1c37e81196383e6f9c88a7d9c3e71a90 100644 (file)
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -108,7 +108,7 @@
   .close {
     padding: $modal-header-padding;
     // auto on the left force icon to the right even when there is no .modal-title
-    margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
+    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
   }
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7b0d3a2f5a2cd03b66a8770b7b34c285a2a9e97d..9ac52e3d320171a642f991c7a6b53d0193066306 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -854,7 +854,9 @@ $modal-header-border-color:         $gray-200 !default;
 $modal-footer-border-color:         $modal-header-border-color !default;
 $modal-header-border-width:         $modal-content-border-width !default;
 $modal-footer-border-width:         $modal-header-border-width !default;
-$modal-header-padding:              1rem !default;
+$modal-header-padding-y:            1rem !default;
+$modal-header-padding-x:            1rem !default;
+$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
 
 $modal-xl:                          1140px !default;
 $modal-lg:                          800px !default;