Client - init Login form

fittrackee_client/src/scss/base.scss

@@ -23,6 +23,15 @@ a {
   text-decoration: none;
 }
 
+input {
+  border-radius: 0;
+  border: solid 1px var(--input-border-color);
+}
+
+label {
+  font-weight: bold;
+}
+
 button {
   background: var(--app-background-color);
   border: solid 1px var(--app-color);
@@ -42,6 +51,27 @@ button {
   }
 }
 
+.container {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+  max-width: $container-width;
+}
+
+.form-box {
+  .form-items {
+      display: flex;
+      flex-direction: column;
+
+      input {
+        margin: $default-margin;
+        padding: $default-padding * .5;
+      }
+    }
+}
+
 .upper {
   text-transform: uppercase;
 }

fittrackee_client/src/scss/colors.scss

@@ -2,6 +2,9 @@
   --app-background-color: #FFFFFF;
   --app-color: #2c3e50;
   --app-a-color: #40578a;
+  --app-shadow-color: lightgrey;
+
+  --input-border-color: #9da3af;
 
   --nav-bar-background-color: #FFFFFF;
   --nav-bar-link-active: #485b6e;
@@ -11,5 +14,4 @@
   --footer-border-color: #ebeef3;
   --footer-color: #8b8c8c;
 
-  --app-shadow-color: lightgrey;
 }

fittrackee_client/src/scss/vars.scss

@@ -3,4 +3,10 @@
 */
 $container-width: 1140px;
 $medium-limit: 1000px;
-$small-limit: 500px;
+$small-limit: 500px;
+
+/*
+* === PADDING / MARGIN ===
+*/
+$default-padding: 10px;
+$default-margin: $default-padding;