From 7811161205e743ba40ce036b1486520f52414c34 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Sun, 2 May 2021 14:59:03 +0530 Subject: organised css and rewrote some css for more consistency --- src/components/BillingPage.js | 4 +++- src/components/Form/Form.scss | 46 ++++++++++++++++++++++++++++++++++--------- 2 files changed, 40 insertions(+), 10 deletions(-) (limited to 'src/components') diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js index 0f7ddf9..567a7d2 100644 --- a/src/components/BillingPage.js +++ b/src/components/BillingPage.js @@ -13,7 +13,9 @@ import AddNewItemForm from "./Form/AddNewItemForm"; import RegisterItemForm from "./Form/RegisterItemForm"; import MetaInfoForm from "./Form/MetaInfoForm"; import ItemsDisplay from "./Display/ItemsDisplay"; -import SummaryDisplay from "./Display/SummaryDisplay"; const BillingPage = () => { +import SummaryDisplay from "./Display/SummaryDisplay"; + +const BillingPage = () => { const [savedItems, getSavedItems] = useState([]); const [registerFormVisibility, setRegisterFormVisibility] = useState(false); diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index eed0189..43aee39 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -23,7 +23,7 @@ input[type=number] { @mixin formPane { padding: 1.5rem; box-sizing: border-box; - border: 1px solid pink; + border: 1px solid $formPaneBorderColor; display: flex; flex-direction: column; @@ -39,20 +39,32 @@ input[type=number] { font-size: 1.5rem; } +@mixin formFlex($justify) { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: $justify; +} + input { box-sizing: border-box; } +.wideInputBox, .selectInputBox { + width: 12rem; +} + +.smallInputBox { + width: 5.5rem; +} + .formContainer { padding: 1rem 0; width: 100%; } .threePaneForm { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; + @include formFlex(space-around); height: 22rem; width: 100%; @@ -74,11 +86,27 @@ input { @include formWideLabel(); } -.wideInputBox, .selectInputBox { - width: 12rem; +.twoPaneForm { + @include formFlex(space-around); + + height: 22rem; + width: 100%; } -.smallInputBox { - width: 6.5rem; +.twoPaneForm div { + @include formPane(); +} + +.twoPaneForm .widePane { + width: 27rem; } +.threePaneForm .smallPane { + width: 15rem; +} + +.twoPaneForm label { + @include formWideLabel(); +} + + -- cgit v1.2.3