rewrote the stylesheet into something more readable. RegisterItemForm is completely broken rn

1 files changed, 33 insertions, 100 deletions

diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 601b8e9..eed0189 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -8,8 +8,6 @@
 
 @import "../../styles/theme";
 
-$inputBorders: 1px solid $altBorderColor;
-
 /* hide arrows in numericInputs */
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
@@ -17,135 +15,70 @@ input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-
 /* Firefox */
 input[type=number] {
   -moz-appearance: textfield;
 }
 
+@mixin formPane {
+  padding: 1.5rem;
+  box-sizing: border-box;
+  border: 1px solid pink;
 
-.formContainer {
-  /*border: 1px solid pink;*/
-  /*padding: 2rem;*/
-
-  height: 50vh;
-  border-radius: 1rem;
-  padding: 1.5rem 0;
-}
-
-.addNewItemForm .textInputs,
-.addNewItemForm .numericInputs
-label {
-  font-size: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
-.addNewItemForm {
+@mixin formWideLabel {
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
 
-  height: 100%;
-}
-
-.addNewItemForm .textInputs,
-.addNewItemForm .numericInputs {
-  border: $inputBorders;
-  width: 30%;
-  justify-content: space-around;
-}
-
-.addNewItemForm .numericInputs input {
-  width: 5.5rem;
+  border-bottom: 1px dotted $labelUnderlineColor;
+  padding: 0.8rem 0;
+  font-size: 1.5rem;
 }
 
-.addNewItemForm .menuButtons {
-  border: $inputBorders;
-  width: 15%;
-  justify-content: space-around;
+input {
+  box-sizing: border-box;
 }
 
-.addNewItemForm .menuButtons * {
+.formContainer {
+  padding: 1rem 0;
   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 {
+.threePaneForm {
   display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   justify-content: space-between;
-  padding: 0.8rem 0;
-  border-bottom: 1px dotted $labelUnderlineColor;
-}
-
-.RegisterItemFormContainer {
-  /*display: none;*/
-  position: fixed;
 
-  width: 95%;
-  height: 70vh;
-
-  left: 0;right: 0;
-  margin: auto;
-  top: 15vh;
-
-  background-color: $altBG;
+  height: 22rem;
+  width: 100%;
 }
 
-.RegisterItemForm .textInputs,
-.RegisterItemForm .numericInputs {
-  width: 40%;
+.threePaneForm div {
+  @include formPane();
 }
 
-.RegisterItemForm {
-  width: 95%;
-  height: 60vh;
-  margin: 1rem auto;
-  justify-content: space-around;
+.threePaneForm .widePane {
+  width: 27rem;
 }
 
-.RegisterItemFormContainer .menu {
-  position: absolute;
-  right: 1rem; bottom: 0.25rem;
+.threePaneForm .smallPane {
+  width: 15rem;
 }
 
-.RegisterItemFormContainer input[type=submit], 
-.RegisterItemFormContainer input[type=button] {
-  margin: 1rem;
+.threePaneForm label {
+  @include formWideLabel();
 }
 
-.MetaInfoForm {
-  width: 60%;
+.wideInputBox, .selectInputBox {
+  width: 12rem;
 }
 
-@media only screen and (max-device-width: 480px) {
-  .formContainer {
-    padding: 0.5rem;
-    height: auto;
-  }
-  .addNewItemForm {
-    flex-direction: column;
-  }
-  .addNewItemForm .textInputs,
-  .addNewItemForm .numericInputs,
-  .addNewItemForm .menuButtons {
-    width: 90%;
-    padding: 1rem;
-    margin: 1rem auto;
-  }
+.smallInputBox {
+  width: 6.5rem;
 }
+