misc_pterodactyl-panel/resources/assets/styles/components/modal.css
2019-03-10 18:42:53 -07:00

24 lines
601 B
CSS

.modal-mask {
@apply .fixed .pin .z-50 .overflow-auto .flex;
background: rgba(0, 0, 0, 0.7);
transition: opacity 250ms ease;
& > .modal-container {
@apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex .rounded;
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.
*/
@screen smx {
margin-top: auto;
width: 90%;
}
}
& > .modal-container.w-auto {
@apply .w-auto;
}
}