jcreek/SelectionWheel
1
0
Fork 0
mirror of https://github.com/jcreek/SelectionWheel.git synced 2026-07-13 11:13:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(#26): Display selection in modal

Browse Source
This commit is contained in:
Josh Creek
2022-10-25 10:08:32 +01:00
parent f20995a879
commit 4b94d42271
4 changed files with 80 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/modal.scss
+55
View File
@@ -0,0 +1,55 @@
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
// padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
#modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.8s;
animation-name: animatetop;
animation-duration: 0.4s;
top: 30%;
transform: translateY(-30%);
text-align: center;
border-radius: 10px;
}
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0;
}
to {
top: 30%;
opacity: 1;
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0;
}
to {
top: 30%;
opacity: 1;
}
}