From 5033194313b2971ae8f1522edca5189ae973d252 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Wed, 16 Sep 2020 09:53:02 +0200
Subject: [PATCH] Fix styling of select boxes in wizard

---
 src/components/modals/Modal.scss           |  4 ++
 src/components/modals/TransformWizard.scss | 49 ++++++++++++++++------
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/components/modals/Modal.scss b/src/components/modals/Modal.scss
index 5d284ce..13e5a70 100644
--- a/src/components/modals/Modal.scss
+++ b/src/components/modals/Modal.scss
@@ -4,6 +4,10 @@
   // styling for the select box, 
   // see docs: https://github.com/rob-balfre/svelte-select#styling
   --height: 36px;
+  --multiItemHeight: 28px;
+  --multiItemMargin: 2px;
+  --multiItemPadding: 2px 8px;
+  --multiClearTop: 6px;
   --clearSelectTop: 2px;
   --clearSelectBottom: 2px;
   --itemIsActiveBG: #3883fa; // theme-color
diff --git a/src/components/modals/TransformWizard.scss b/src/components/modals/TransformWizard.scss
index 1c91dea..c508b9c 100644
--- a/src/components/modals/TransformWizard.scss
+++ b/src/components/modals/TransformWizard.scss
@@ -9,6 +9,7 @@ table.transform-wizard {
     th {
       font-weight: normal;
       text-align: left;
+      width: 60px;
     }
   
     td {
@@ -16,21 +17,45 @@ table.transform-wizard {
         width: 100%;
         display: flex;
         flex-direction: row;
-  
-        .selectContainer.filter-field {
-          flex: 4;
-          margin-right: $padding;
-        }
-        
-        .selectContainer.filter-relation {
-          flex: 1;
-          margin-right: $padding;
-        }
-        
+        margin-bottom: $padding/2;
+
+        :global(.selectContainer) {
+          &.filter-field {
+            flex: 4;
+            margin-right: $padding/2;
+          }
+          
+          &.filter-relation {
+            flex: 1;
+            margin-right: $padding/2;
+          }
+
+          &.sort-field {
+            flex: 3;
+            margin-right: $padding/2;
+          }
+          
+          &.sort-direction {
+            flex: 1;
+          }
+
+          &.pick-fields {
+            flex: 1;
+          }
+        }  
+
         .filter-value {
           flex: 4;
+          padding: $padding;
+          border: 1px solid $border-gray;
+          border-radius: $border-radius;
+          outline: none;
+
+          &:focus {
+            border-color: $theme-color;
+          }
         }
       }
     }
   }
-}
\ No newline at end of file
+}