Replace bootstrap modals with homemade modals

[gruntmaster-page.git] / css / modal.css

diff --git a/css/modal.css b/css/modal.css
new file mode 100644 (file)
index 0000000..77f7657
--- /dev/null
+++ b/css/modal.css
@@ -0,0 +1,50 @@
+.backdrop {
+       position: fixed;
+       top: 0;
+       left: 0;
+       width: 100%;
+       height: 100%;
+       background-color: #000;
+       z-index: 1;
+}
+
+.modal {
+       position: absolute;
+       width: 60%;
+       top: 10%;
+       left: 20%;
+       background-color: #272B30;
+       color: #C8C8C8;
+       padding: 0.7em;
+
+       transform: scale(1.5);
+       -webkit-transform: scale(1.5);
+       z-index: 2;
+}
+
+.modal:after {
+       position: absolute;
+       content: "";
+       bottom: -10%;
+       height: 10%;
+       width: 1px;
+}
+
+.modal,.backdrop {
+       transition: transform 0.6s, opacity 0.6s;
+       -webkit-transition: transform 0.6s, opacity 0.6s;
+       pointer-events: none;
+       opacity: 0;
+}
+
+.modal-open .modal {
+       transform: scale(1);
+       -webkit-transform: scale(1);
+       opacity: 1;
+       pointer-events: auto;
+}
+
+.modal-open .backdrop {
+       opacity: 0.7;
+       pointer-events: auto;
+}