created very basic client editor

6 files changed, 282 insertions, 67 deletions

diff --git a/src/components/editors/scss/_editor.scss b/src/components/editors/scss/_editor.scss
new file mode 100644
index 0000000..1ca7067
--- /dev/null
+++ b/src/components/editors/scss/_editor.scss
@@ -0,0 +1,105 @@
+/* OpenBills-web - Web based libre billing software
+ * Copyright (C) 2022  Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
+
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@import "colors";
+
+@mixin label {
+    label {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        max-width: 24rem;
+        width: 90%;
+        padding: 0.3rem 0.1rem;
+        border-bottom: 1px dotted $secondaryAccentColor;
+
+        select,input {
+            padding: 0.2rem;
+            max-width: 13rem;
+            width: 100%;
+            box-sizing: border-box;
+            background-color: $inputBackgroundColor;
+            border: 1px solid $primaryAccentColor;
+            color: $fgColor;
+            border-radius: 4px;
+            outline: 0;
+            font-size: 0.8rem;
+        }
+        textarea {
+            background-color: $inputBackgroundColor;
+            color: $fgColor;
+            outline: 0;
+            border: 1px solid $primaryAccentColor;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font-size: 0.8rem;
+        }
+    }
+}
+
+.editor-wrapper {
+    width: 100%;
+    margin: auto;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    p {
+        text-align: center;
+        font-weight: bold;
+        font-size: 1.7rem;
+        color: $primaryAccentColor;
+    }
+}
+
+@mixin editor {
+    .editor {
+        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/editors/scss/address-editor.scss b/src/components/editors/scss/address-editor.scss
new file mode 100644
index 0000000..49b0a0a
--- /dev/null
+++ b/src/components/editors/scss/address-editor.scss
@@ -0,0 +1,65 @@
+/* OpenBills-web - Web based libre billing software
+ * Copyright (C) 2022  Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
+
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@import "colors";
+@import "editor";
+
+.address-editor {
+    min-height: 18rem;
+    .heading {
+      font-size: 1.1rem;
+      color: $primaryAccentColor;
+      font-weight: bold;
+      align: center;
+    }
+
+    .checkbox-label {
+        border: none;
+        max-width: none;
+        justify-content: left;
+        input {
+            display: inline;
+            width: 1.4rem;
+        }
+    }
+
+    .labels-wrapper {
+        @include label;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+
+        div {
+            width: 50%;
+            max-width: 20rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            input, textarea {
+                width: 100%;
+                max-width: none;
+                margin-top: 0.2rem;
+            }
+            textarea {
+                min-height: 6rem;
+                max-height: 6rem;
+                resize: none;
+            }
+        }
+    }
+}
diff --git a/src/components/editors/scss/client-editor.scss b/src/components/editors/scss/client-editor.scss
new file mode 100644
index 0000000..52b7189
--- /dev/null
+++ b/src/components/editors/scss/client-editor.scss
@@ -0,0 +1,28 @@
+/* OpenBills-web - Web based libre billing software
+ * Copyright (C) 2022  Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
+
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@import "editor";
+
+.client-editor {
+    max-width: 90%;
+    justify-content: space-around;
+    .top {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+    }
+}
diff --git a/src/components/editors/scss/colors.scss b/src/components/editors/scss/colors.scss
new file mode 100644
index 0000000..4e5b1c2
--- /dev/null
+++ b/src/components/editors/scss/colors.scss
@@ -0,0 +1,24 @@
+/* OpenBills-web - Web based libre billing software
+ * Copyright (C) 2022  Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
+
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+$primaryAccentColor: #bd93f9;
+$secondaryAccentColor: #d0afff;
+
+$fgColor: white;
+$fgColorAlt: black;
+
+$inputBackgroundColor: #00000000;
diff --git a/src/components/editors/scss/contact-editor.scss b/src/components/editors/scss/contact-editor.scss
new file mode 100644
index 0000000..61e0ceb
--- /dev/null
+++ b/src/components/editors/scss/contact-editor.scss
@@ -0,0 +1,51 @@
+/* OpenBills-web - Web based libre billing software
+ * Copyright (C) 2022  Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
+
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@import "colors";
+@import "editor";
+
+@include editor;
+.contact-editor {
+  width: 90%;
+  max-width: 30rem;
+  min-height: 18rem;
+
+  .heading {
+    font-size: 1.1rem;
+    color: $primaryAccentColor;
+    font-weight: bold;
+    text-align: center;
+  }
+  .labels-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: wrap;
+
+    label {
+      margin: 0.2rem 0;
+      textarea {
+        min-height: 3rem;
+        max-height: 3rem;
+        resize: none;
+        width: 100%;
+        max-width: 13rem;
+        margin-top: 0.2rem;
+      }
+    }
+  }
+}
diff --git a/src/components/editors/scss/item-editor.scss b/src/components/editors/scss/item-editor.scss
index 968795a..8f60ec7 100644
--- a/src/components/editors/scss/item-editor.scss
+++ b/src/components/editors/scss/item-editor.scss
@@ -15,74 +15,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-.editor-wrapper {
-    width: 100%;
-    margin: auto;
-    padding: 0;
-    margin: 0;
-    position: relative;
-    p {
-        text-align: center;
-        font-weight: bold;
-        font-size: 1.7rem;
-        color: #bd93f9;
-    }
-}
-
-.editor {
-    padding-bottom: 2.5rem;
-    margin: auto;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-items: center;
-    min-width: 90%;
+@import "editor";
 
-    label {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-items: center;
-        max-width: 24rem;
-        width: 90%;
-        padding: 0.3rem 0.1rem;
-        border-bottom: 1px dotted #d0afff;
-
-        select,input {
-            padding: 0.2rem;
-            max-width: 13rem;
-            width: 90%;
-            box-sizing: border-box;
-            background-color: #00000000;
-            border: 1px solid #bd93f9;
-            color: white;
-            border-radius: 4px;
-            outline: 0;
-        }
+.editor-wrapper {
+    // hide up/down arrows from number input
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
     }
-
-    .buttons {
-        position: absolute;
-        display: flex;
-        justify-content: space-between;
-        width: 13.5rem;
-        input {
-            padding: 0.2rem 0;
-            width: 4rem;
-            background-color: #00000000;
-            border: 1px solid #bd93f9;
-            color: white;
-            border-radius: 4px;
-            transition: background-color 0.4s, color 0.4s;
-        }
-        input:hover {
-            background-color: #bd93f9;
-            color: black;
-        }
-        bottom: 0;
-        left: 0;
-        right: 0;
-        margin: auto;
+    input[type=number] {
+        -moz-appearance: textfield;
     }
 }