[feature] toast-header .close
Created by: zjbarg
Modal has padding and margin for the close button (.close)
.modal-header {
display: flex;
align-items: flex-start; // so the close btn always stays on the upper right corner
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include border-top-radius($modal-content-border-radius);
.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-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
}
}
I suggest we add the same thing to toasts
.toast-header {
display: flex;
align-items: center;
padding: $toast-padding-y $toast-padding-x;
color: $toast-header-color;
background-color: $toast-header-background-color;
background-clip: padding-box;
border-bottom: $toast-border-width solid $toast-header-border-color;
// add this ----->
.close {
padding: $toast-padding-y $toast-padding-x;
margin-right: auto;
}
}
Maybe add a $toast-header-padding
, $toast-header-padding-x
, $toast-header-padding-y
variables and margin?
The main thing is the margin-right
or something that does its job.