Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Code Issues Projects Releases Wiki Activity

#485 fix

Browse Source
This commit is contained in:
codecalm
2020-02-23 17:07:06 +01:00
parent 43e8415114
commit ad8a8b378b
3 changed files with 38 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pages/_includes/forms/form-elements-6.html
View File

@@ -50,3 +50,8 @@
<label class="form-label">Select with flags</label> <label class="form-label">Select with flags</label>
{% include ui/form/selectize.html key="countries" %} {% include ui/form/selectize.html key="countries" %}
</div> </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>

5
pages/_includes/ui/form/selectize.html
View File

@@ -1,8 +1,9 @@
{% assign key = include.key | default: 'people' %} {% assign key = include.key | default: 'people' %}
{% assign id = include.select-id | default: key %}
{% assign data = site.data.selects[key] %} {% assign data = site.data.selects[key] %}
{% assign options = data.options %} {% 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' %} {% if options == 'people' %}
{% for person in site.data.people limit: 20 %} {% for person in site.data.people limit: 20 %}
{% capture avatar %} {% capture avatar %}
@@ -32,7 +33,7 @@
{% capture_global scripts %} {% capture_global scripts %}
<script> <script>
$(document).ready(function () { $(document).ready(function () {
$('#select-{{ key }}').selectize({ $('#select-{{ id }}').selectize({
{% if key == "countries" %} {% if key == "countries" %}
render: { render: {
option: function (data, escape) { option: function (data, escape) {

31
scss/vendor/_selectize.scss vendored
View File

@@ -23,6 +23,29 @@
border-left: 0 !important; border-left: 0 !important;
color: $text-muted !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 { .selectize-input {
@@ -33,15 +56,19 @@
font-size: $input-font-size; font-size: $input-font-size;
box-shadow: none; box-shadow: none;
line-height: $input-line-height; line-height: $input-line-height;
background-color: inherit !important; background-color: inherit;
color: inherit !important; color: inherit !important;
&.full {
background-color: inherit;
}
&.dropdown-active { &.dropdown-active {
border-radius: $border-radius; border-radius: $border-radius;
} }
.selectize-control.single & { .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 { &.focus {