From ef9a3da0528c659cc0ea430ba2729044fdcc8747 Mon Sep 17 00:00:00 2001
From: TrueKuehli <rctcoaster2000@hotmail.de>
Date: Sun, 30 Sep 2018 20:27:17 +0200
Subject: Added basic layout for login modal

Shows form for inputting password and name.
---
 WebInterface/NodeJSServer/src/style/index.scss     |  1 +
 .../src/style/partials/modal/_base.scss            |  2 ++
 .../src/style/partials/modal/_login.scss           | 30 ++++++++++++++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 WebInterface/NodeJSServer/src/style/partials/modal/_login.scss

(limited to 'WebInterface/NodeJSServer/src/style')

diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss
index 285a47b..04c896a 100644
--- a/WebInterface/NodeJSServer/src/style/index.scss
+++ b/WebInterface/NodeJSServer/src/style/index.scss
@@ -7,3 +7,4 @@
 @import 'partials/front-layer/server-listing';
 @import 'partials/front-layer/copyright';
 @import 'partials/modal/base';
+@import 'partials/modal/login';
diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss
index 1e7742e..1665003 100644
--- a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss
@@ -24,7 +24,9 @@
   }
 
   .modal-title {
+    max-width: 85vw;
     margin: 1rem;
+    text-align: center;
   }
 
   .modal-body {
diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
new file mode 100644
index 0000000..7aa1bf8
--- /dev/null
+++ b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
@@ -0,0 +1,30 @@
+.modal {
+  .modal-title {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .modal-body {
+    display: grid;
+    grid-template-columns: 10em 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-row-gap: 0.5rem;
+
+    div {
+      display: contents;
+      font-size: 1.25rem;
+
+      label {
+        flex-basis: 30%;
+        margin-right: 2rem;
+
+        grid-column: 1 2;
+      }
+
+      input {
+        flex-basis: calc(70% - 2rem);
+        grid-column: 2 3;
+      }
+    }
+  }
+}
-- 
cgit v1.2.3-70-g09d2