Modal header padding

[envolute]

It is not possible to assign a different vertical and horizontal padding in the modal header, this breaks the margin of the ".close"

.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;
}

If you put "padding: .5rem 1rem" the result of the margin would be:
margin: -0.5rem 1rem -0.5rem 1rem -0.5rem 1rem auto;

A simple solution would be to split the padding vertically and horizontally. It would look like this:

_variables.scss
change:
$modal-header-padding: 1rem;
for:
$modal-header-padding-y: 1rem; => .5rem;
$modal-header-padding-x: 1rem;

_modal.scss
.modal-header {
...
padding: $modal-header-padding-y $modal-header-padding-x;
...
}

.close {
padding: $modal-header-padding-y $modal-header-padding-x;
// auto on the left force icon to the right even when there is no .modal-title
margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
}

[mdo]

Because of backward compatibility concerns, we couldn't drop the current variable outright. We'd have to reassign it to those separate values to enable both properly. Open to that change though.

[envolute]

I understand!!
I thank you for your consideration, for as it stands, i am having to do it separately. while it could be solved only through a simple variable...

[envolute]

Perfect!!
Thanks @MartijnCuppens . I have already updated my project!