WIP web frontend

1 files changed, 32 insertions, 20 deletions

diff --git a/src_web/style/main.scss b/src_web/style/main.scss
index 6b848b4..612c2a7 100644
--- a/src_web/style/main.scss
+++ b/src_web/style/main.scss
@@ -1,8 +1,11 @@
 @import '~normalize.css/normalize';
+@import '~izitoast/dist/css/iziToast.min';
 
 @import './fonts/fontawesome';
 @import './fonts/roboto';
 @import './color';
+@import './shadow';
+@import './grid';
 
 
 html, body {
@@ -20,19 +23,12 @@ html, body {
 
 
 .left-panel {
-    width: 300px;
+    @include shadow-4dp();
+    width: 400px;
     display: flex;
     flex-direction: column;
     background-color: $color-grey-100;
 
-    .group {
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: column;
-        margin: 10px;
-        margin-bottom: 0px;
-    }
-
     .header {
         flex-shrink: 0;
         margin: 10px;
@@ -60,33 +56,49 @@ html, body {
         }
     }
 
-    .list {
+    .group {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        margin: 10px;
+        margin-bottom: 0px;
+    }
+
+    .content {
         flex-grow: 1;
         display: flex;
         flex-direction: column;
         margin: 10px;
         margin-bottom: 0px;
+        align-items: stretch;
+        overflow: auto;
 
-        & > * {
-            flex-shrink: 0;
-        }
+        table.grid {
+            width: 100%;
 
-        .content {
-            flex-grow: 1;
-            flex-shrink: 1;
-            overflow: auto;
+            .fixed {
+                width: 50px
+            }
+
+            tbody td:last-child {
+                text-align: center;
+            }
         }
 
-        .add {
-            align-self: flex-end;
+        & > *:not(:last-child) {
+            margin-bottom: 10px;
         }
     }
 
-    .submit {
+    .calculate {
         flex-shrink: 0;
         margin: 10px;
         padding: 10px;
     }
+
+    .invalid {
+        background-color: rgba(red, 0.2);
+    }
 }