#485 fix

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>

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) {

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 {