Updating modal headers to flexbox for better alignment

This commit is contained in:
Kris 2018-02-23 13:14:32 -05:00
parent d001183828
commit de30f3515b
3 changed files with 13 additions and 17 deletions

View File

@ -27,7 +27,17 @@
} }
.modal-header { .modal-header {
display: flex;
align-items: center;
padding: 10px 15px;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
h3 {
margin-bottom: 0;
}
.modal-close {
order: 2;
margin-left: auto;
}
} }
.modal-backdrop { .modal-backdrop {

View File

@ -35,19 +35,12 @@
margin-left: -1px; margin-left: -1px;
} }
.modal-close {
display: inline-block;
float: right;
margin: 7px;
}
.modal-header { .modal-header {
h3 { h3 {
display: inline-block;;
font-size: $font-up-3; font-size: $font-up-3;
padding: 10px 15px 7px;
} }
} }
.close { .close {
font-size: $font-up-3; font-size: $font-up-3;
text-decoration: none; text-decoration: none;

View File

@ -33,20 +33,13 @@
padding: 15px 7px 10px 7px; padding: 15px 7px 10px 7px;
} }
.modal-close {
display: inline-block;
float: right;
}
.modal-header { .modal-header {
padding: 10px 0 10px 10px; padding: 10px;
h3 { h3 {
display: inline;
font-size: $font-up-2; font-size: $font-up-2;
margin: 0;
} }
} }
.close { .close {
font-size: $font-up-4; font-size: $font-up-4;
padding: 10px 15px 5px 5px; padding: 10px 15px 5px 5px;