From 93d72e066264c84160e99a8b51639613b5c9ba45 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@thewebdevelopmentagency.com>
Date: Fri, 15 Nov 2019 02:34:43 +0700
Subject: [PATCH] Select2 dropdowns style integration

---
 src/scss/_components/_ui.form.basics.scss | 74 +++++++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/src/scss/_components/_ui.form.basics.scss b/src/scss/_components/_ui.form.basics.scss
index 5006ebf..7638596 100755
--- a/src/scss/_components/_ui.form.basics.scss
+++ b/src/scss/_components/_ui.form.basics.scss
@@ -53,3 +53,77 @@ input.time {
         width: 100%;
     }
 }
+
+// select2 dropdowns bootstrap4 styling
+.select2-container {
+    display: block;
+    width: 100% !important;
+}
+
+.select2-container--default {
+    &.select2-container--focus {
+        .select2-selection {
+            color: $input-focus-color;
+            background-color: $input-focus-bg;
+            border-color: $input-focus-border-color;
+            outline: 0;
+
+            // Avoid using mixin so we can pass custom focus shadow properly
+            @if $enable-shadows {
+                box-shadow: $input-box-shadow, $input-focus-box-shadow;
+            }
+            @else {
+                box-shadow: $input-focus-box-shadow;
+            }
+
+            &.select2-selection--single {}
+
+            &.select2-selection--multiple {}
+        }
+    }
+
+    .select2-selection {
+        @extend .form-control;
+
+        .select2-selection__rendered {
+            line-height: inherit;
+        }
+
+        &.select2-selection--single {}
+
+        &.select2-selection--multiple {
+            padding-top: 0;
+            padding-bottom: 0;
+
+            .select2-selection__choice {
+                @extend .badge;
+
+                @extend .badge-primary;
+
+                padding: $input-padding-y $input-padding-x;
+                border: 0;
+            }
+
+            .select2-selection__choice__remove {
+                color: color-yiq($primary);
+            }
+        }
+    }
+
+    .select2-results__option--highlighted[aria-selected] {
+        background: $primary;
+        color: color-yiq($primary);
+    }
+}
+
+.select2-dropdown {
+    border: $input-border-width solid $input-border-color;
+
+    .select2-search--dropdown {
+        padding: $input-padding-y $input-padding-x;
+    }
+
+    .select2-search__field {
+        @extend .form-control;
+    }
+}