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

Add a basic modal template to be used

Browse source
This commit is contained in:
Dane Everitt 2018-06-16 16:25:26 -07:00
parent 84fecb7a92
commit d6959ea3dd
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
8 changed files with 130 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

12
resources/assets/styles/components/animations.css
View file

@ -34,3 +34,15 @@
@apply .bg-red-dark;
}
}
/*
* transition="modal"
*/
.modal-enter, .modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
animation: opacity 250ms linear;
}

8
resources/assets/styles/components/buttons.css
View file

@ -12,6 +12,14 @@
}
}
&.btn-green {
@apply .bg-green .border-green-dark .border .text-white;
&:hover:enabled {
@apply .bg-green-dark .border-green-darker;
}
}
&.btn-secondary {
@apply .border .border-grey-light .text-grey-dark;

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

@ -0,0 +1,10 @@
.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;
transition: all 250ms ease;
}
}