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

Fix modal design

Browse source
This commit is contained in:
Dane Everitt 2019-05-14 16:51:38 -07:00
parent da2044fb10
commit 487128d00f
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
2 changed files with 9 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

@ -1,11 +1,11 @@
<template> <template>
<transition name="modal"> <transition name="modal">
<div class="modal-mask" v-show="isVisible" v-on:click="closeOnBackground && close()"> <div class="modal-mask" v-show="isVisible" v-on:click="closeOnBackground && close()">
<div class="modal-container p-8" :class="{ 'full-screen': isFullScreen }" @click.stop> <div class="modal-container top" :class="{ 'full-screen': isFullScreen }" @click.stop>
<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>
<div class="modal-content"> <div class="modal-content p-8">
<slot/> <slot/>
</div> </div>
</div> </div>

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

@ -6,6 +6,10 @@
& > .modal-container { & > .modal-container {
@apply .relative .w-full .max-w-md .m-auto .flex-col .flex; @apply .relative .w-full .max-w-md .m-auto .flex-col .flex;
&.top {
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;
transition: opacity 150ms linear, transform 150ms ease-in; transition: opacity 150ms linear, transform 150ms ease-in;
@ -20,7 +24,6 @@
& > .modal-content { & > .modal-content {
@apply .bg-white .rounded .shadow-md; @apply .bg-white .rounded .shadow-md;
transition: all 250ms ease; transition: all 250ms ease;
margin-top: 15%;
} }
/** /**
@ -28,8 +31,10 @@
* 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.
*/ */
@screen smx { @screen smx {
margin-top: auto;
width: 90%; width: 90%;
.top {
margin-top: auto;
}
} }
} }