3 files changed, 108 insertions, 20 deletions
diff --git a/src_web/style/grid.scss b/src_web/style/grid.scss
new file mode 100644
index 0000000..b1e9bf8
--- /dev/null
+++ b/src_web/style/grid.scss
@@ -0,0 +1,53 @@
+@import './color';
+
+
+table.grid {
+    table-layout: fixed;
+    border-spacing: 0px;
+    border: 1px solid $color-grey-400;
+
+    td:not(:last-child) {
+        border-right: 1px solid $color-grey-300;
+    }
+
+    thead tr, tfoot tr {
+        background-color: $color-grey-200;
+    }
+
+    td, th {
+        padding: 4px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    tbody td {
+        background-color: white;
+    }
+
+    tbody td, tfoot td {
+        border-top: 1px solid $color-grey-400;
+    }
+
+    input {
+        width: 100%;
+    }
+
+    input[type=text] {
+        position: relative;
+        border: 1px;
+        font-size: 10pt;
+        font-family: 'Roboto';
+    }
+
+    tfoot td > div {
+        display: flex;
+
+        & > .spacer {
+            flex-grow: 1;
+        }
+    }
+
+    .invalid {
+        background-color: rgba(red, 0.2);
+    }
+}
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);
+    }
 }
 
 
diff --git a/src_web/style/shadow.scss b/src_web/style/shadow.scss
new file mode 100644
index 0000000..8bcb900
--- /dev/null
+++ b/src_web/style/shadow.scss
@@ -0,0 +1,23 @@
+
+$shadow-key-umbra-opacity: 0.2 !default;
+$shadow-key-penumbra-opacity: 0.14 !default;
+$shadow-ambient-shadow-opacity: 0.12 !default;
+
+
+@mixin shadow-1dp() {
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+              0 2px 1px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+              0 1px 2px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+
+@mixin shadow-2dp() {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+              0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+              0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+
+@mixin shadow-4dp() {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+              0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+              0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}