Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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"> <div class="modal-close-icon" v-on:click="close" v-if="dismissable && showCloseIcon">
<Icon name="x" aria-label="Close modal" role="button"/> <Icon name="x" aria-label="Close modal" role="button"/>
</div> </div>
<slot/> <div class="modal-content">
<slot/>
</div>
</div> </div>
</div> </div>
</transition> </transition>

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

@ -4,9 +4,7 @@
transition: opacity 250ms ease; transition: opacity 250ms ease;
& > .modal-container { & > .modal-container {
@apply .relative .bg-white .w-full .max-w-md .m-auto .flex-col .flex .rounded .shadow-md; @apply .relative .w-full .max-w-md .m-auto .flex-col .flex;
transition: all 250ms ease;
margin-top: 15%;
& > .modal-close-icon { & > .modal-close-icon {
@apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50; @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 * 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. * center the modal rather than putting it towards the top of the screen.