diff --git a/src/pages/_includes/ui/select.html b/src/pages/_includes/ui/select.html
index bd6f2916b4..779de96ed7 100644
--- a/src/pages/_includes/ui/select.html
+++ b/src/pages/_includes/ui/select.html
@@ -15,14 +15,20 @@
{% assign options = data.options %}
{% if data.data == 'people' %}
- {% for person in site.data.people %}
-
+ {% for person in site.data.people limit: 20 %}
+
{% endfor %}
{% else %}
{% for option in options %}
{% if option.first %}
-
+ {% if include.indicator == 'flag' %}
+ {% capture indicator-html %}
+ {% include ui/flag.html size="xs" flag=option.flag %}
+ {% endcapture %}
+ {% endif %}
+
+
{% else %}
{% endif %}
@@ -53,6 +59,31 @@
},
shouldSort: false,
{% unless include.show-search %}searchEnabled: false,{% endunless %}
+
+ {% if include.indicator %}
+ callbackOnCreateTemplates: function(template) {
+ var classNames = this.config.className,
+ itemSelectText = this.config.itemSelectText;
+
+ {% capture indicator-text %}
+ {% if include.indicator == 'avatar' %}
+
+ {% elsif include.indicator == 'flag' %}
+
+ {% endif %}
+ {% endcapture %}
+
+ return {
+ item: function(classNames, data) {
+ return template('
{{ indicator-text | strip }}' + String(data.label) + '
');
+ },
+ choice: function(classNames, data) {
+ console.log('data', data);
+ return template(' 0 ? 'role="treeitem"' : 'role="option"' ) + ' >{{ indicator-text | strip }}' + String(data.label) + '
');
+ },
+ };
+ },
+ {% endif %}
}));
});
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index e05273ceb2..b2f1b16293 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -361,7 +361,7 @@ $dropdown-spacer: 1px !default;
$dropdown-min-width: 11rem !default;
$dropdown-max-width: 25rem !default;
-$dropdown-scrollable-height: 12rem !default;
+$dropdown-scrollable-height: 13rem !default;
$dropdown-link-active-color: $primary !default;
$dropdown-link-active-bg: $active-bg !default;
diff --git a/src/scss/ui/_dropdowns.scss b/src/scss/ui/_dropdowns.scss
index 17974226aa..db89454e93 100644
--- a/src/scss/ui/_dropdowns.scss
+++ b/src/scss/ui/_dropdowns.scss
@@ -31,6 +31,16 @@
text-align: center;
}
+.dropdown-item-indicator {
+ margin-right: .5rem;
+ margin-left: -.25rem;
+ height: 1.25rem;
+ display: inline-flex;
+ line-height: 1;
+ vertical-align: middle;
+ align-items: center;
+}
+
.dropdown-header {
@include subheader;
padding-bottom: .25rem;
diff --git a/src/scss/vendor/_choices.scss b/src/scss/vendor/_choices.scss
index 45a2ccce51..bd38e65cbe 100644
--- a/src/scss/vendor/_choices.scss
+++ b/src/scss/vendor/_choices.scss
@@ -22,8 +22,11 @@
.dropdown-menu {
width: 100%;
height: auto;
- max-height: $dropdown-scrollable-height;
- overflow-x: hidden;
+
+ .choices__list {
+ max-height: $dropdown-scrollable-height;
+ overflow-x: hidden;
+ }
.dropdown-item {
padding-left: $input-padding-x;
@@ -52,11 +55,6 @@
}
.choices__list--dropdown {
-
- .is-focused &,
- .is-open & {
- }
-
.choices__item--selectable:after {
content: none;
}