From 299f62be651c046fc3475e8b0eafee5333154322 Mon Sep 17 00:00:00 2001
From: Filip Kajetaniak <filip.kajetaniak@codequest.com>
Date: Mon, 23 Dec 2019 16:29:35 +0100
Subject: [PATCH] Style forms for two column layout

---
 .../stylesheets/fae/globals/_plugins.scss     | 18 +++++-
 .../fae/globals/imports/_mixins.scss          | 55 ++++++++++++++++---
 .../stylesheets/fae/globals/layout/_base.scss | 26 ++++++++-
 .../stylesheets/fae/modules/forms/_base.scss  | 34 +++++++++---
 .../stylesheets/fae/modules/forms/_label.scss |  3 +
 .../stylesheets/fae/modules/forms/_text.scss  |  5 +-
 6 files changed, 119 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/fae/globals/_plugins.scss b/app/assets/stylesheets/fae/globals/_plugins.scss
index 3947ffc9..4d8eba8a 100644
--- a/app/assets/stylesheets/fae/globals/_plugins.scss
+++ b/app/assets/stylesheets/fae/globals/_plugins.scss
@@ -1,8 +1,13 @@
 // plugin overrides
 .chosen-container-single .chosen-single abbr,
 .chosen-container-single .chosen-single div b,
-.chosen-container-multi .chosen-choices li.search-choice .search-choice-close
-.chosen-rtl .chosen-search, .chosen-container-single .chosen-search {
+.chosen-container-multi
+  .chosen-choices
+  li.search-choice
+  .search-choice-close
+  .chosen-rtl
+  .chosen-search,
+.chosen-container-single .chosen-search {
   background: none;
 
   &:after {
@@ -31,7 +36,8 @@
   }
 }
 
-.chosen-rtl .chosen-search, .chosen-container-single .chosen-search {
+.chosen-rtl .chosen-search,
+.chosen-container-single .chosen-search {
   &:after {
     content: fae-icon(search);
     font-size: 12px;
@@ -49,3 +55,9 @@
     }
   }
 }
+
+.chosen-container {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
diff --git a/app/assets/stylesheets/fae/globals/imports/_mixins.scss b/app/assets/stylesheets/fae/globals/imports/_mixins.scss
index 148488f2..4a63831b 100644
--- a/app/assets/stylesheets/fae/globals/imports/_mixins.scss
+++ b/app/assets/stylesheets/fae/globals/imports/_mixins.scss
@@ -18,14 +18,14 @@
   border-color: $color transparent transparent transparent;
 }
 
-@mixin user-select($val){
+@mixin user-select($val) {
   -webkit-user-select: $val; /* Chrome all / Safari all */
   -moz-user-select: $val; /* Firefox all */
   -ms-user-select: $val; /* IE 10+ */
   user-select: $val;
 }
 
-@mixin transform($value){
+@mixin transform($value) {
   -webkit-transform: $value;
   -moz-transform: $value;
   -ms-transform: $value;
@@ -33,18 +33,41 @@
   transform: $value;
 }
 
-@mixin gradient-vertical($start-color: $c-light-button, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
-  background-image: -webkit-gradient(linear, left $start-percent, left $end-percent, from($start-color), to($end-color));
-  background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
-  background-image:  -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
-  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
+@mixin gradient-vertical(
+  $start-color: $c-light-button,
+  $end-color: #333,
+  $start-percent: 0%,
+  $end-percent: 100%
+) {
+  background-image: -webkit-gradient(
+    linear,
+    left $start-percent,
+    left $end-percent,
+    from($start-color),
+    to($end-color)
+  );
+  background-image: -webkit-linear-gradient(
+    top,
+    $start-color $start-percent,
+    $end-color $end-percent
+  );
+  background-image: -moz-linear-gradient(
+    top,
+    $start-color $start-percent,
+    $end-color $end-percent
+  );
+  background-image: linear-gradient(
+    to bottom,
+    $start-color $start-percent,
+    $end-color $end-percent
+  );
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0);
 }
 
 // quick mixin for using icon font in :before :after
 @mixin icon-stuff {
-  font-family: 'icons';
+  font-family: "icons";
   speak: none;
   font-style: normal;
   font-weight: normal;
@@ -56,3 +79,19 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+// mixin for 2 columns grid layout
+@mixin column {
+  flex: 1;
+  width: 50%;
+  min-width: 50%;
+  max-width: 50%;
+  padding-left: 15px;
+  padding-right: 15px;
+  @media (max-width: 900px) {
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    padding: 0;
+  }
+}
diff --git a/app/assets/stylesheets/fae/globals/layout/_base.scss b/app/assets/stylesheets/fae/globals/layout/_base.scss
index 75b2b083..b61d32f6 100644
--- a/app/assets/stylesheets/fae/globals/layout/_base.scss
+++ b/app/assets/stylesheets/fae/globals/layout/_base.scss
@@ -7,7 +7,7 @@
   }
 
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     left: $sidenav-width - 10px;
     top: 0;
@@ -32,7 +32,7 @@
     border-top: 1px solid $c-border;
     text-transform: uppercase;
     font-size: 14px;
-    letter-spacing: .2em;
+    letter-spacing: 0.2em;
     // counters the padding from .content
     margin: 0 negate($content-buffer) 30px;
   }
@@ -46,3 +46,25 @@
     margin-bottom: 20px;
   }
 }
+
+// section.content,
+// .grid-form {
+//   width: inherit;
+//   display: flex;
+//   flex-direction: row;
+//   // flex-wrap: wrap;
+//   width: 100%;
+//   flex-flow: row wrap;
+//   justify-content: flex-start;
+// }
+
+main.content,
+section.content {
+  width: inherit;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+}
diff --git a/app/assets/stylesheets/fae/modules/forms/_base.scss b/app/assets/stylesheets/fae/modules/forms/_base.scss
index 0a029600..0011e7ca 100644
--- a/app/assets/stylesheets/fae/modules/forms/_base.scss
+++ b/app/assets/stylesheets/fae/modules/forms/_base.scss
@@ -1,17 +1,21 @@
-input[type=text],
-input[type=number],
-input[type=textarea],
-input[type=url],
-input[type=tel],
-input[type=password],
-input[type=email] {
-  @include transition(border-color .2s);
+@import "../../globals/imports/mixins";
+
+input[type="text"],
+input[type="number"],
+input[type="textarea"],
+input[type="url"],
+input[type="tel"],
+input[type="password"],
+input[type="email"] {
+  @include transition(border-color 0.2s);
   padding: 12px 15px;
   border: 1px solid $c-border;
   font-size: 14px;
   outline: none;
   border-radius: 2px;
   max-width: 100%;
+  width: 100%;
+  // @include column;
 
   &:focus {
     border-color: $c-notice-content;
@@ -21,9 +25,23 @@ input[type=email] {
 .input {
   margin-bottom: 20px;
 
+  @include column;
+
   &.disabled {
     opacity: 0.5;
   }
+  .asset-actions {
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+  }
+  .input {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+  }
 }
 
 .addedit-form {
diff --git a/app/assets/stylesheets/fae/modules/forms/_label.scss b/app/assets/stylesheets/fae/modules/forms/_label.scss
index b62704b7..c48b1303 100644
--- a/app/assets/stylesheets/fae/modules/forms/_label.scss
+++ b/app/assets/stylesheets/fae/modules/forms/_label.scss
@@ -1,9 +1,12 @@
+@import '../../globals/imports/mixins';
+
 label {
   display: block;
   margin-bottom: 10px;
   font-weight: bold;
   font-size: 15px;
   color: $c-text-heavy;
+  // @include column;
 
   abbr {
     color: $c-custom-highlight;
diff --git a/app/assets/stylesheets/fae/modules/forms/_text.scss b/app/assets/stylesheets/fae/modules/forms/_text.scss
index 03039adc..3fb3ce75 100644
--- a/app/assets/stylesheets/fae/modules/forms/_text.scss
+++ b/app/assets/stylesheets/fae/modules/forms/_text.scss
@@ -1,3 +1,5 @@
+@import '../../globals/imports/mixins';
+
 @include placeholder {
   color: $c-darker-grey;
 }
@@ -12,13 +14,14 @@
   &.select,
   > .label {
     max-width: 515px;
-
+    @include column;
     input {
       width: 100%;
     }
   }
 
   &.string {
+    @include column;
     min-width: 223px;
   }
 }