finish modal

This commit is contained in:
2020-04-15 18:39:07 +02:00
parent 1e56daf807
commit e9b4fb573f
7 changed files with 44 additions and 25 deletions

View File

@@ -14,6 +14,7 @@
@import "components/main";
@import "components/nav";
@import "components/topbar";
@import "components/modal";
@import "components/avatar";
@import "components/alert_box";
@import "components/search_box";

View File

@@ -36,3 +36,7 @@ a {
color: $dark;
}
}
pre {
}

View File

@@ -0,0 +1,26 @@
$modal-duration: 1s;
.modal-container {
background-color: rgba(0,0,0,0.6);
//display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
.modal {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
width: 400px;
animation-name: modalopen;
animation-duration: $modal-duration;
}
}

View File

@@ -14,6 +14,7 @@
text-decoration: none;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
img,
svg {
@@ -58,6 +59,7 @@
background-color: $light;
padding: 0.5rem 1rem;
border-radius: 0.2rem;
cursor: pointer;
svg {
width: 2rem;