nolanlawson
/
pinafore
forked from cybrespace/pinafore
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use flexbox for dialog button

This commit is contained in:
Nolan Lawson 2018-03-27 17:31:17 -07:00
parent d4c63f04db
commit 148b1f1b38
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
routes/_components/dialog/ModalDialog.html
View File

@ -15,7 +15,7 @@
<div class="close-dialog-button-wrapper"> <div class="close-dialog-button-wrapper">
<button class="close-dialog-button" <button class="close-dialog-button"
data-a11y-dialog-hide aria-label="Close dialog"> data-a11y-dialog-hide aria-label="Close dialog">
<span aria-hidden="true">&times;</span> <span class="close-dialog-button-span" aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
</div> </div>
@ -79,17 +79,22 @@
} }
.close-dialog-button-wrapper { .close-dialog-button-wrapper {
flex: 1; flex: 1;
text-align: right; display: flex;
justify-content: flex-end;
} }
.close-dialog-button { .close-dialog-button {
padding: 0 0 7px; padding: 0;
background: none; background: none;
border: none; border: none;
display: flex;
justify-content: center;
align-items: center;
} }
.close-dialog-button span { .close-dialog-button-span {
padding: 0 10px 7px; padding: 0 10px 5px;
font-size: 32px; font-size: 32px;
color: var(--button-primary-text); color: var(--button-primary-text);
flex: 1;
} }
.muted-style .modal-dialog-header { .muted-style .modal-dialog-header {
background: var(--muted-modal-bg); background: var(--muted-modal-bg);