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

change style of modal

This commit is contained in:
Nolan Lawson 2018-02-06 09:09:47 -08:00
parent 8711bfb831
commit 503fb6e4e0
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
routes/_components/dialog/ConfirmationDialog.html
View File

@ -15,12 +15,13 @@
</ModalDialog> </ModalDialog>
<style> <style>
.confirmation-dialog-form-flex { .confirmation-dialog-form-flex {
display: flex; display: grid;
flex-direction: row; grid-template-columns: 1fr 1fr;
grid-gap: 10px;
padding: 10px 20px;
} }
.confirmation-dialog-form-flex button { .confirmation-dialog-form-flex button {
flex: 1; min-width: 125px;
min-width: 200px;
} }
.confirmation-dialog-form p { .confirmation-dialog-form p {
font-size: 1.3em; font-size: 1.3em;

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

@ -6,8 +6,10 @@
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-dialog-slot">
<slot></slot> <slot></slot>
</div> </div>
</div>
</div> </div>
<style> <style>
:global(#modal-dialog[aria-hidden='true']) { :global(#modal-dialog[aria-hidden='true']) {
@ -29,13 +31,15 @@
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding: 0; padding: 0;
border: 3px solid var(--main-border); border: 1px solid var(--main-border);
border-radius: 2px;
} }
.modal-dialog-document { .modal-dialog-document {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
max-width: calc(100vw - 20px);
} }
.close-dialog-button-wrapper { .close-dialog-button-wrapper {
text-align: right; text-align: right;
@ -53,6 +57,10 @@
color: var(--button-primary-text); color: var(--button-primary-text);
} }
.modal-dialog-slot {
max-width: 100%;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.close-dialog-button span { .close-dialog-button span {
padding: 0 10px 4px; padding: 0 10px 4px;