camerin
/
portfolio
mirror of https://github.com/RaspberryProgramming/portfolio.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Modal - enters from top on mobile

This commit is contained in:
Camerin Figueroa 2022-06-15 20:33:31 -04:00
parent 7db92b80a0
commit 788779a083
1 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/css/Modal.css
View File

@ -11,6 +11,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: opacity 300ms ease-out 50ms, width 300ms ease-out 50ms, background-color 80ms ease-out; transition: opacity 300ms ease-out 50ms, width 300ms ease-out 50ms, background-color 80ms ease-out;
overflow: hidden;
} }
.modal.hide * { .modal.hide * {
visibility: hidden; visibility: hidden;
@ -20,7 +21,7 @@
.modal.show { .modal.show {
display:flex; display:flex;
width: 100%; width: 100vw;
background-color: rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4);
opacity: 1; opacity: 1;
transition: opacity 300ms ease-in, width 300ms ease-in, background-color 300ms ease-in 200ms; transition: opacity 300ms ease-in, width 300ms ease-in, background-color 300ms ease-in 200ms;
@ -71,8 +72,18 @@
border: 2px solid #544545; border: 2px solid #544545;
border-radius: 10px; border-radius: 10px;
background-color: white; background-color: white;
padding: 25px; padding: 1.5rem;
max-width: 80vw; max-width: 90vw;
width: 30rem;
}
.modal .box .content {
padding: 0;
margin: 0;
}
.modal .box .title {
text-align: center;
} }
.modal textarea.large { .modal textarea.large {
@ -80,4 +91,16 @@
width: auto; width: auto;
} }
.modal {
width:100vw;
height:0;
transition: opacity 300ms ease-out 50ms, height 300ms ease-out 50ms, background-color 80ms ease-out;
}
.modal.show {
height:100vh;
transition: opacity 300ms ease-in, height 300ms ease-in, background-color 300ms ease-in 200ms;
}
} }