Alex/Pterodactyl-Panel
1
1
Fork 1
mirror of https://github.com/pterodactyl/panel.git synced 2024-11-26 02:52:30 +01:00
Code Issues Releases Wiki Activity

Support modals with content outside the white background area

Browse Source
This commit is contained in:
Dane Everitt 2019-05-14 16:48:38 -07:00
parent be03dba5b5
commit da2044fb10
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/assets/scripts/components/core/Modal.vue
View File

@ -5,7 +5,9 @@
<div class="modal-close-icon" v-on:click="close" v-if="dismissable && showCloseIcon">
<Icon name="x" aria-label="Close modal" role="button"/>
</div>
<slot/>
<div class="modal-content">
<slot/>
</div>
</div>
</div>
</transition>

10
resources/assets/styles/components/modal.css
View File

@ -4,9 +4,7 @@
transition: opacity 250ms ease;
& > .modal-container {
@apply .relative .bg-white .w-full .max-w-md .m-auto .flex-col .flex .rounded .shadow-md;
transition: all 250ms ease;
margin-top: 15%;
@apply .relative .w-full .max-w-md .m-auto .flex-col .flex;
& > .modal-close-icon {
@apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50;
@ -19,6 +17,12 @@
}
}
& > .modal-content {
@apply .bg-white .rounded .shadow-md;
transition: all 250ms ease;
margin-top: 15%;
}
/**
* On tiny phone screens make sure there is a margin on the sides and also
* center the modal rather than putting it towards the top of the screen.