added ItemTable for the invoice page

2 files changed, 31 insertions, 42 deletions

diff --git a/src/components/pickers/scss/_picker.scss b/src/components/pickers/scss/_picker.scss
index 625a1e3..4d8d1b1 100644
--- a/src/components/pickers/scss/_picker.scss
+++ b/src/components/pickers/scss/_picker.scss
@@ -65,41 +65,3 @@
         color: $primaryAccentColor;
     }
 }
-
-@mixin picker {
-    .picker {
-        padding-bottom: 2.5rem;
-        margin: auto;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: space-evenly;
-        align-items: center;
-        min-width: 90%;
-        @include label;
-
-        .buttons {
-            position: absolute;
-            display: flex;
-            justify-content: space-between;
-            width: 13.5rem;
-            input {
-                padding: 0.2rem 0;
-                width: 4rem;
-                background-color: $inputBackgroundColor;
-                border: 1px solid $primaryAccentColor;
-                color: $fgColor;
-                border-radius: 4px;
-                transition: background-color 0.4s, color 0.4s;
-            }
-            input:hover {
-                background-color: $primaryAccentColor;
-                color: $fgColorAlt;
-            }
-            bottom: 0;
-            left: 0;
-            right: 0;
-            margin: auto;
-        }
-    }
-}
diff --git a/src/components/pickers/scss/item-picker.scss b/src/components/pickers/scss/item-picker.scss
index b04fb54..093b0e9 100644
--- a/src/components/pickers/scss/item-picker.scss
+++ b/src/components/pickers/scss/item-picker.scss
@@ -23,8 +23,13 @@
 }
 
 .item-picker {
-    display: flex;
-    justify-content: space-evenly;
+    //display: flex;
+    //flex-wrap: wrap;
+    //justify-content: space-between;
+    //align-items: center;
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+
     .options {
         width: 27rem;
         flex-grow: 1;
@@ -46,14 +51,36 @@
         white-space: pre-line;
     }
 
-    input[type=number], input.narrow {
+    label.narrow {
+        max-width: 16rem;
+        input { width: 7rem; }
+    }
+
+    input[type=number] {
         -moz-appearance: textfield;
         width: 7rem;
     }
-
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
         -webkit-appearance: none;
         margin: 0;
     }
+
+    input[type=button], input[type=submit] {
+        padding: 0.2rem 0;
+        width: 4rem;
+        height: 1.7rem;
+        margin-top: 0.3rem;
+        margin-left: auto;
+        background-color: $inputBackgroundColor;
+        border: 1px solid $primaryAccentColor;
+        color: $fgColor;
+        border-radius: 4px;
+        transition: background-color 0.4s, color 0.4s;
+    }
+
+    input[type=button]:hover, input[type=submit]:hover {
+        background-color: $primaryAccentColor;
+        color: $fgColorAlt;
+    }
 }