fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

smoother fade-ins for modals

Browse Source
This commit is contained in:
Felix Hamann 2018-03-29 00:19:56 +02:00
parent 05dd196b43
commit 9858224bdd
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
templates/widgets/modal.lucius
View File

@ -2,7 +2,7 @@
position: fixed; position: fixed;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%) scale(0.8, 0.8);
display: block; display: block;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
min-width: 60vw; min-width: 60vw;
@ -13,9 +13,13 @@
color: var(--fontbase); color: var(--fontbase);
padding: 20px; padding: 20px;
overflow: auto; overflow: auto;
opacity: 0;
transition: all .15s ease;
&.modal--open { &.modal--open {
opacity: 1;
z-index: 200; z-index: 200;
transform: translate(-50%, -50%) scale(1, 1);
} }
} }
@ -43,10 +47,12 @@
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
z-index: -1; z-index: -1;
transition: background-color .2s ease; opacity: 0;
transition: all .2s ease;
&.modal__overlay--open { &.modal__overlay--open {
z-index: 199; z-index: 199;
opacity: 1;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
} }
} }