data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

use flexbox for dialog button

Browse source
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">
<button class="close-dialog-button"
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>
</div>
</div>
@ -79,17 +79,22 @@
}
.close-dialog-button-wrapper {
flex: 1;
text-align: right;
display: flex;
justify-content: flex-end;
}
.close-dialog-button {
padding: 0 0 7px;
padding: 0;
background: none;
border: none;
display: flex;
justify-content: center;
align-items: center;
}
.close-dialog-button span {
padding: 0 10px 7px;
.close-dialog-button-span {
padding: 0 10px 5px;
font-size: 32px;
color: var(--button-primary-text);
flex: 1;
}
.muted-style .modal-dialog-header {
background: var(--muted-modal-bg);