misc_pterodactyl-panel/resources/assets/styles/components/modal.css

51 lines
1.1 KiB
CSS
Raw Normal View History

2018-06-16 23:25:26 +00:00
.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 .w-full .max-w-md .m-auto .flex-col .flex;
2018-06-16 23:50:18 +00:00
2019-05-14 23:51:38 +00:00
&.top {
margin-top: 15%;
}
2019-05-11 05:50:59 +00:00
& > .modal-close-icon {
@apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50;
transition: opacity 150ms linear, transform 150ms ease-in;
top: -2.5rem;
&:hover {
@apply .opacity-100;
transform: rotate(90deg);
}
}
& > .modal-content {
@apply .bg-white .rounded .shadow-md;
transition: all 250ms ease;
}
2018-06-16 23:50:18 +00:00
/**
* 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 {
width: 90%;
2019-05-14 23:51:38 +00:00
.top {
margin-top: auto;
}
2018-06-16 23:50:18 +00:00
}
2018-06-16 23:25:26 +00:00
}
2019-05-11 05:50:59 +00:00
& > .modal-container.full-screen {
@apply .w-3/4 .mt-32;
height: calc(100vh - 16rem);
max-width: none;
}
& > .modal-container.w-auto {
@apply .w-auto;
}
2018-06-16 23:25:26 +00:00
}