StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update modal code

Browse source
This commit is contained in:
Dane Everitt 2019-05-10 22:50:59 -07:00
parent 2c73991f2b
commit 32db345238
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
8 changed files with 38 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,10 +4,21 @@
transition: opacity 250ms ease;
& > .modal-container {
@apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex .rounded;
@apply .relative .bg-white .w-full .max-w-md .m-auto .flex-col .flex .rounded .shadow-md;
transition: all 250ms ease;
margin-top: 15%;
& > .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);
}
}
/**
* 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.
@ -18,6 +29,12 @@
}
}
& > .modal-container.full-screen {
@apply .w-3/4 .mt-32;
height: calc(100vh - 16rem);
max-width: none;
}
& > .modal-container.w-auto {
@apply .w-auto;
}