choices js styling

src/pages/_data/libs.json

@@ -17,8 +17,6 @@
     "choices": "choices.js/public/assets/scripts/choices.js"
   },
   "css": {
-    "choices": "choices.js/public/assets/styles/choices.css",
-    "nouislider": "nouislider/distribute/nouislider.min.css",
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
   }
 }

src/pages/_data/selects.yml

@@ -55,4 +55,4 @@ countries:
 
 people:
   value: 4
-  options: people
+  data: people

src/pages/_includes/ui/select.html

@@ -2,14 +2,33 @@
 
 {% if id %}
 
-{% assign key = include.key | default: 'people' %}
-{% assign data = site.data.selects[key] %}
-{% assign options = data.options %}
-
-<select type="text" class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}">
-	{% for option in options %}
-	<option value="{{ option }}">{{ option }}</option>
-	{% endfor %}
+<select type="text" class="form-select{% if include.class %} {{ include.class }}{% endif %}{% if include.state %} is-{{ include.state }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}">
+	{% if include.values %}
+		{% assign values = include.values | split: ',' %}
+
+		{% for value in values %}
+			<option value="{{ value }}">{{ value }}</option>
+		{% endfor %}
+	{% else %}
+		{% assign key = include.key | default: 'people' %}
+		{% assign data = site.data.selects[key] %}
+		{% assign options = data.options %}
+
+		{% if data.data == 'people' %}
+			{% for person in site.data.people %}
+				<option value="{{ person.id }}">{{ person.full_name }}</option>
+			{% endfor %}
+
+		{% else %}
+			{% for option in options %}
+				{% if option.first %}
+					<option value="{{ option[0] }}">{{ option[1].name }}</option>
+				{% else %}
+					<option value="{{ option }}">{{ option }}</option>
+				{% endif %}
+			{% endfor %}
+		{% endif %}
+	{% endif %}
 </select>
 
 
@@ -21,8 +40,19 @@
 		window.tabler_select = window.tabler_select || {};
 		{% endif %}
 
-		window.Choices && ({% if jekyll.environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new Choices(document.getElementById('select-{{ id }}'), {
-
+		var el;
+		window.Choices && ({% if jekyll.environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new Choices(el = document.getElementById('select-{{ id }}'), {
+			classNames: {
+				containerInner: el.className,
+				input: 'form-control',
+				inputCloned: 'form-control-sm',
+				listDropdown: 'dropdown-menu',
+				itemChoice: 'dropdown-item',
+				activeState: 'show',
+				selectedState: 'active',
+			},
+			shouldSort: false,
+			{% unless include.show-search %}searchEnabled: false,{% endunless %}
 		}));
 
 	});

src/pages/form-elements.html

@@ -2,7 +2,7 @@
 title: Form elements
 page-header: Form elements
 menu: forms
-libs: nouislider, autosize, tabler-flags, tabler-payments, litepicker
+libs: nouislider, autosize, tabler-flags, tabler-payments, litepicker, choices
 ---
 
 <div class="row row-cards">

src/scss/_variables.scss

@@ -82,7 +82,7 @@ $text-muted-light-opacity: .4 !default;
 $text-muted-dark-opacity: .8 !default;
 
 $border-opacity: .16 !default;
-$border-dark-opacity: .24 !default;
+$border-dark-opacity: .32 !default;
 
 $light: #f4f6fa !default;
 $dark: #232e3c !default;
@@ -361,6 +361,8 @@ $dropdown-spacer: 1px !default;
 $dropdown-min-width: 11rem !default;
 $dropdown-max-width: 25rem !default;
 
+$dropdown-scrollable-height: 12rem !default;
+
 $dropdown-link-active-color: $primary !default;
 $dropdown-link-active-bg: $active-bg !default;
 

src/scss/mixins/_mixins.scss

@@ -26,7 +26,15 @@
     @if ($is-dark) {
       background: transparent;
     } @else {
-      background: $gray-400;
+      background: $gray-600;
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    @if ($is-dark) {
+      background: transparent;
+    } @else {
+      background: $gray-300;
     }
   }
 
@@ -35,12 +43,10 @@
   }
 
   &:hover::-webkit-scrollbar-thumb {
-    background: $gray-500;
-
     @if ($is-dark) {
       background: mix($white, $dark, 20%);
     } @else {
-      background: $gray-500;
+      background: $gray-600;
     }
   }
 }

src/scss/tabler-vendors.scss

@@ -2,4 +2,5 @@
 
 @import "vendor/apexcharts";
 @import "vendor/nouislider";
-@import "vendor/litepicker";
\ No newline at end of file
+@import "vendor/litepicker";
+@import "vendor/choices";
\ No newline at end of file

src/scss/ui/_dropdowns.scss

 .dropdown-menu {
   box-shadow: $box-shadow;
   user-select: none;
-  margin: 0;
+  margin: 0 !important;
 
   &.card {
     padding: 0;
@@ -39,7 +39,7 @@
 
 .dropdown-menu-scrollable {
   height: auto;
-  max-height: 12rem;
+  max-height: $dropdown-scrollable-height;
   overflow-x: hidden;
 }
 

src/scss/vendor/_choices.scss

+@import "~choices.js/public/assets/styles/choices";
+
+.choices {
+  margin: 0;
+  font-size: inherit;
+  position: relative;
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:after {
+    content: none !important;
+  }
+
+  &.is-focused .form-select {
+    border-color: $form-select-focus-border-color;
+    box-shadow: $form-select-focus-box-shadow;
+  }
+
+  .dropdown-menu {
+    width: 100%;
+    height: auto;
+    max-height: $dropdown-scrollable-height;
+    overflow-x: hidden;
+
+    .dropdown-item {
+      padding-left: $input-padding-x;
+      padding-right: $input-padding-x;
+
+      &.active {
+        background: transparent;
+        color: inherit;
+      }
+
+      &.is-highlighted {
+        color: $dropdown-link-active-color;
+        background-color: $dropdown-link-active-bg;
+      }
+    }
+  }
+}
+
+.choices__placeholder {
+  color: $input-placeholder-color;
+  opacity: 1;
+}
+
+.choices__list--single {
+  padding: 0;
+}
+
+.choices__list--dropdown {
+
+  .is-focused &,
+  .is-open & {
+  }
+
+  .choices__item--selectable:after {
+    content: none;
+  }
+}
\ No newline at end of file

src/scss/vendor/_nouislider.scss

+@import "~nouislider/distribute/nouislider";
+
 .noUi-target {
   border: 0;
   box-shadow: none;