laid out the BillingForm elements in a sexy way

1 files changed, 70 insertions, 3 deletions

diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css
index d0ecc5f..9dbfd6f 100644
--- a/src/components/Form/Form.css
+++ b/src/components/Form/Form.css
@@ -1,4 +1,71 @@
-form {
-  border: 1px solid purple;
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
+/* Experimental color scheme */
+/* light theme */
+/* 
+$defBG: #FFFFFF;
+$altBG: lightgray;
+$defFG: #000000;
+$altFG: #232627;
+$defLink: brown;
+$altLink: brown;
+
+$defShadow: 0px 0px 4px #232627;
+*/
+/* Inspired by Dracula */
+.formContainer {
+  border: 1px solid pink;
+  padding: 2rem;
+  height: 60vh;
+  border-radius: 1rem; }
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs
+label {
+  font-size: 1.5rem; }
+
+.addNewItemForm {
   display: flex;
-  justify-content: space-evenly; }
+  flex-direction: row;
+  justify-content: space-between;
+  height: 50vh; }
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs {
+  border: 1px solid #FF79C6;
+  width: 30%;
+  justify-content: space-around; }
+
+.addNewItemForm .numericInputs input {
+  width: 5.5rem; }
+
+.addNewItemForm .menuButtons {
+  justify-content: space-around;
+  border: 1px solid lightgreen;
+  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-between;
+  padding: 0.8rem 0;
+  border-bottom: 1px dotted lightblue; }