From ad8a8b378b0dc9084d8966fdac44d2b10230b283 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sun, 23 Feb 2020 17:07:06 +0100
Subject: [PATCH] #485 fix

---
 pages/_includes/forms/form-elements-6.html |  7 ++++-
 pages/_includes/ui/form/selectize.html     |  5 ++--
 scss/vendor/_selectize.scss                | 31 ++++++++++++++++++++--
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/pages/_includes/forms/form-elements-6.html b/pages/_includes/forms/form-elements-6.html
index c79018109..002760aa4 100644
--- a/pages/_includes/forms/form-elements-6.html
+++ b/pages/_includes/forms/form-elements-6.html
@@ -48,5 +48,10 @@
 
 <div class="mb-3">
 	<label class="form-label">Select with flags</label>
-	{% include ui/form/selectize.html key="countries" %}
+	{% include ui/form/selectize.html key="countries"  %}
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Advanced select with validation state</label>
+	{% include ui/form/selectize.html key="countries" state="valid" select-id="states" %}
 </div>
\ No newline at end of file
diff --git a/pages/_includes/ui/form/selectize.html b/pages/_includes/ui/form/selectize.html
index f3ac039b7..bc266c9a1 100644
--- a/pages/_includes/ui/form/selectize.html
+++ b/pages/_includes/ui/form/selectize.html
@@ -1,8 +1,9 @@
 {% assign key = include.key | default: 'people' %}
+{% assign id = include.select-id | default: key %}
 {% assign data = site.data.selects[key] %}
 {% assign options = data.options %}
 
-<select name="{{ key }}" id="select-{{ key }}" class="form-select"{% if data.multiple %} multiple{% endif %}>
+<select name="{{ key }}" id="select-{{ id }}" class="form-select{% if include.state %} is-{{ include.state }}{% endif %}"{% if data.multiple %} multiple{% endif %}>
 	{% if options == 'people' %}
 		{% for person in site.data.people limit: 20 %}
 		{% capture avatar %}
@@ -32,7 +33,7 @@
 {% capture_global scripts %}
 <script>
 	$(document).ready(function () {
-		$('#select-{{ key }}').selectize({
+		$('#select-{{ id }}').selectize({
 			{% if key == "countries" %}
 			render: {
 				option: function (data, escape) {
diff --git a/scss/vendor/_selectize.scss b/scss/vendor/_selectize.scss
index aa3894ced..6660b508f 100644
--- a/scss/vendor/_selectize.scss
+++ b/scss/vendor/_selectize.scss
@@ -23,6 +23,29 @@
     border-left: 0 !important;
     color: $text-muted !important;
   }
+
+  @each $state, $data in $form-validation-states {
+    $color: map-get($data, 'color');
+
+    &.is-#{$state} {
+      padding: 0;
+
+      .selectize-input {
+        border-color: $color;
+
+        &.focus {
+          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        }
+      }
+
+      .selectize-dropdown {
+        background: none;
+        background-color: inherit;
+        border-color: $border-color;
+        padding-right: 0;
+      }
+    }
+  }
 }
 
 .selectize-input {
@@ -33,15 +56,19 @@
   font-size: $input-font-size;
   box-shadow: none;
   line-height: $input-line-height;
-  background-color: inherit !important;
+  background-color: inherit;
   color: inherit !important;
 
+  &.full {
+    background-color: inherit;
+  }
+
   &.dropdown-active {
     border-radius: $border-radius;
   }
 
   .selectize-control.single & {
-    background: $form-select-bg escape-svg($form-select-indicator) $form-select-bg;
+    background: $form-select-bg escape-svg($form-select-indicator) no-repeat $form-select-bg-position/$form-select-bg-size;
   }
 
   &.focus {