From 73c1eb27bc00acb633223b0d62ae88dfe59fd81d Mon Sep 17 00:00:00 2001
From: Tony Air <tony@thewebdevelopmentagency.com>
Date: Mon, 29 Jun 2020 18:45:42 +0700
Subject: [PATCH] FIX: Make form fields flex

---
 src/scss/_components/_ui.form.basics.scss |  6 +-----
 src/scss/_components/_ui.main.scss        | 26 +++++++++++++++++++++++
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/scss/_components/_ui.form.basics.scss b/src/scss/_components/_ui.form.basics.scss
index ef46154..75e4d9b 100755
--- a/src/scss/_components/_ui.form.basics.scss
+++ b/src/scss/_components/_ui.form.basics.scss
@@ -21,7 +21,7 @@ input.time {
         font-variant: normal;
         text-rendering: auto;
         line-height: 1;
-        font-family: Font Awesome\5 Free;
+        font-family: Font awesome\5 Free;
         font-weight: 900;
     }
 
@@ -45,10 +45,6 @@ input.time {
         margin-top: 1rem;
     }
 
-    .field {
-        display: flex;
-    }
-
     .form-control {
         width: 100%;
     }
diff --git a/src/scss/_components/_ui.main.scss b/src/scss/_components/_ui.main.scss
index b23b6a7..2832cd0 100755
--- a/src/scss/_components/_ui.main.scss
+++ b/src/scss/_components/_ui.main.scss
@@ -125,12 +125,29 @@ textarea,
 }
 
 .field {
+    display: flex;
+    flex-wrap: wrap;
+
     position: relative;
     margin: $field-gutter-height 0;
 
+    &.collapse {
+        display: none;
+        &.show {
+            display: flex;
+        }
+    }
+
     &.composite {
+        display: block;
         margin-top: 0;
         margin-bottom: 0;
+        &.collapse {
+            display: none;
+            &.show {
+                display: block;
+            }
+        }
     }
 
     &.required {
@@ -157,7 +174,16 @@ textarea,
             color: $red;
         }
     }
+    .left {
+        flex: 1 1 20%;
+    }
 
+    .middleColumn {
+        flex: 1 1 80%;
+    }
+
+    .right {
+    }
     .bootstrap-select:not([class*='col-']):not([class*='form-control']):not(.input-group-btn) {
         width: 100%;
     }