finish modal
This commit is contained in:
1
resources/sass/app.scss
vendored
1
resources/sass/app.scss
vendored
@@ -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";
|
||||
|
||||
4
resources/sass/components/_elements.scss
vendored
4
resources/sass/components/_elements.scss
vendored
@@ -36,3 +36,7 @@ a {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
|
||||
}
|
||||
|
||||
26
resources/sass/components/modal.scss
vendored
26
resources/sass/components/modal.scss
vendored
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
2
resources/sass/setup/_containers.scss
vendored
2
resources/sass/setup/_containers.scss
vendored
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user