From f98be4ca3816dcad16029fee30b66c9219c4cd57 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Thu, 15 Apr 2021 23:16:16 +0530
Subject: laid out the BillingForm elements in a sexy way

---
 src/components/Form/Form.scss | 70 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 3 deletions(-)

(limited to 'src/components/Form/Form.scss')

diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 01f9bf2..5dc6545 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -1,5 +1,69 @@
-form {
-  border: 1px solid purple;
+@import "../../styles/theme";
+
+.formContainer {
+  border: 1px solid pink;
+  padding: 2rem;
+
+  height: 60vh;
+  border-radius: 1rem;
+}
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs
+label {
+  font-size: 1.5rem;
+}
+
+.addNewItemForm {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  height: 50vh;
+}
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs {
+  border: 1px solid $altBorderColor;
+  width: 30%;
+  justify-content: space-around;
+}
+
+.addNewItemForm .numericInputs input {
+  width: 5.5rem;
+}
+
+.addNewItemForm .menuButtons {
+  justify-content: space-around;
+  border: 1px solid $defBorderColor;
+  width: 15%;
+}
+
+.addNewItemForm .menuButtons * {
+  width: 100%;
+}
+
+.addNewItemForm div {
+  display: flex;
+  flex-direction: column;
+  border-radius: 1rem;
+  padding: 1.5rem;
+
+  overflow: scroll;
+}
+
+/* hide scrollbars */
+.addNewItemForm div::-webkit-scrollbar {
+  display: none; /* Chrome/Safari/Opera */
+}
+.addNewItemForm div {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.addNewItemForm label {
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-between;
+  padding: 0.8rem 0;
+  border-bottom: 1px dotted $labelUnderlineColor;
 }
-- 
cgit v1.2.3