mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
selectize plugin, sidenav init
This commit is contained in:
codecalm
@@ -96,7 +96,7 @@
|
||||
"jquery": "3.4.1",
|
||||
"jqvmap": "1.5.1",
|
||||
"peity": "3.3.0",
|
||||
"selectize": "0.12.6"
|
||||
"selectize": "^0.12.6"
|
||||
},
|
||||
"bundlesize": [
|
||||
{
|
||||
|
||||
@@ -11,9 +11,11 @@
|
||||
"jqvmap/dist/maps/jquery.vmap.world.js",
|
||||
"jqvmap/dist/maps/jquery.vmap.usa.js",
|
||||
"jqvmap/dist/maps/continents/jquery.vmap.europe.js",
|
||||
"peity/jquery.peity.min.js"
|
||||
"peity/jquery.peity.min.js",
|
||||
"selectize/dist/js/selectize.min.js"
|
||||
],
|
||||
"css": [
|
||||
"jqvmap/dist/jqvmap.min.css"
|
||||
"jqvmap/dist/jqvmap.min.css",
|
||||
"selectize/dist/css/selectize.css"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ home:
|
||||
title: Home
|
||||
icon: home
|
||||
|
||||
form-elements:
|
||||
forms:
|
||||
url: form-elements.html
|
||||
title: Form elements
|
||||
icon: check-square
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
38
pages/_data/selects.yml
Normal file
38
pages/_data/selects.yml
Normal file
@@ -0,0 +1,38 @@
|
||||
users:
|
||||
value: 3
|
||||
options:
|
||||
1:
|
||||
name: Chuck Tesla
|
||||
2:
|
||||
name: Elon Musk
|
||||
3:
|
||||
name: Paweł Kuna
|
||||
4:
|
||||
name: Nikola Tesla
|
||||
|
||||
tags:
|
||||
value: dev, test
|
||||
options:
|
||||
- dev
|
||||
- live
|
||||
- test
|
||||
|
||||
countries:
|
||||
value: pl
|
||||
options:
|
||||
pl:
|
||||
name: Poland
|
||||
image: img/flags/pl.svg
|
||||
de:
|
||||
name: Germany
|
||||
image: img/flags/de.svg
|
||||
cz:
|
||||
name: Czech Republic
|
||||
image: img/flags/cz.svg
|
||||
br:
|
||||
name: Brazil
|
||||
image: img/flags/br.svg
|
||||
|
||||
people:
|
||||
value: 4
|
||||
options: people
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Autosize
|
||||
menu: docs.autosize
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Username</label>
|
||||
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
||||
@@ -42,38 +40,21 @@
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tags</label>
|
||||
<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
|
||||
{% include ui/form/selectize.html key="tags" %}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Beast</label>
|
||||
<select name="beast" id="select-beast" class="form-select">
|
||||
<option value="1">Chuck Testa</option>
|
||||
<option value="4">Sage Cattabriga-Alosa</option>
|
||||
<option value="3">Nikola Tesla</option>
|
||||
</select>
|
||||
<label class="form-label">Top person</label>
|
||||
{% include ui/form/selectize.html key="users" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Users list</label>
|
||||
<select name="user" id="select-users" class="form-select">
|
||||
{% for user in site.data.people limit: 10 %}
|
||||
<option value="{{ forloop.index }}" data-data='{"image": "{{ user.photo }}"}'>
|
||||
{{ user.first_name }} {{ user.last_name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% include ui/form/selectize.html key="people" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Countries</label>
|
||||
<select name="country" id="select-countries" class="form-select">
|
||||
<option value="br" data-data='{"image": "{{ site.base }}/assets/images/flags/br.svg"}'>Brazil</option>
|
||||
<option value="cz" data-data='{"image": "{{ site.base }}/assets/images/flags/cz.svg"}'>Czech Republic
|
||||
</option>
|
||||
<option value="de" data-data='{"image": "{{ site.base }}/assets/images/flags/de.svg"}'>Germany
|
||||
</option>
|
||||
<option value="pl" data-data='{"image": "{{ site.base }}/assets/images/flags/pl.svg"}' selected>Poland
|
||||
</option>
|
||||
</select>
|
||||
{% include ui/form/selectize.html key="countries" %}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
{% assign menu = page.menu | default: layout.menu %}
|
||||
<aside class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar">
|
||||
<aside class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if include.right %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar">
|
||||
{% unless include.empty %}
|
||||
{% include layout/sidenav-content.html menu=menu %}
|
||||
{% endunless %}
|
||||
</aside>
|
||||
<div class="navbar-bg"></div>
|
||||
|
||||
77
pages/_includes/ui/form/selectize.html
Normal file
77
pages/_includes/ui/form/selectize.html
Normal file
@@ -0,0 +1,77 @@
|
||||
{% assign key = include.key | default: 'people' %}
|
||||
{% assign data = site.data.selects[key] %}
|
||||
{% assign options = data.options %}
|
||||
<select name="{{ key }}" id="select-{{ key }}" class="form-select">
|
||||
{% if options == 'people' %}
|
||||
{% for person in site.data.people limit: 20 %}
|
||||
<option value="{{ person.id }}" data-data='{"image": "{{ site.base }}/{{ person.photo }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
{% for option in options %}
|
||||
{% if option[1] %}
|
||||
{% assign value = option[0] %}
|
||||
{% assign name = option[1].name %}
|
||||
{% assign all-data = option[1] %}
|
||||
{% else %}
|
||||
{% assign value = option %}
|
||||
{% assign name = option %}
|
||||
{% endif %}
|
||||
<option value="{{ value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% endif %}{% if data.value == value %} selected{% endif %}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
</select>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#select-{{ key }}').selectize({});
|
||||
});
|
||||
|
||||
// $('#input-tags').selectize({
|
||||
// delimiter: ',',
|
||||
// persist: false,
|
||||
// create: function (input) {
|
||||
// return {
|
||||
// value: input,
|
||||
// text: input
|
||||
// };
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// $('#select-beast').selectize({});
|
||||
//
|
||||
// $('#select-users').selectize({
|
||||
// render: {
|
||||
// option: function (data, escape) {
|
||||
// return '<div>' +
|
||||
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
// '<span class="title">' + escape(data.text) + '</span>' +
|
||||
// '</div>';
|
||||
// },
|
||||
// item: function (data, escape) {
|
||||
// return '<div>' +
|
||||
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
// escape(data.text) +
|
||||
// '</div>';
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// $('#select-countries').selectize({
|
||||
// render: {
|
||||
// option: function (data, escape) {
|
||||
// return '<div>' +
|
||||
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
// '<span class="title">' + escape(data.text) + '</span>' +
|
||||
// '</div>';
|
||||
// },
|
||||
// item: function (data, escape) {
|
||||
// return '<div>' +
|
||||
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
// escape(data.text) +
|
||||
// '</div>';
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
</script>
|
||||
@@ -3,9 +3,7 @@ layout: base
|
||||
---
|
||||
|
||||
<div class="d-flex flex-row h-100p">
|
||||
{% if page.nav-position == 'left' or page.nav-position == 'right'%}
|
||||
{% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded fixed=true %}
|
||||
{% endif %}
|
||||
{% include layout/sidenav.html dark=true folded=false fixed=true %}
|
||||
|
||||
<div class="layout-main d-flex flex-column flex-fill max-w-full">
|
||||
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Cards
|
||||
page-title: Cards
|
||||
menu: cards
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -40,59 +40,5 @@ menu: forms
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% comment %}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#input-tags').selectize({
|
||||
delimiter: ',',
|
||||
persist: false,
|
||||
create: function (input) {
|
||||
return {
|
||||
value: input,
|
||||
text: input
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
$('#select-beast').selectize({});
|
||||
|
||||
$('#select-users').selectize({
|
||||
render: {
|
||||
option: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
'<span class="title">' + escape(data.text) + '</span>' +
|
||||
'</div>';
|
||||
},
|
||||
item: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
escape(data.text) +
|
||||
'</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#select-countries').selectize({
|
||||
render: {
|
||||
option: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
'<span class="title">' + escape(data.text) + '</span>' +
|
||||
'</div>';
|
||||
},
|
||||
item: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
escape(data.text) +
|
||||
'</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endcomment %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -129,6 +129,10 @@ Markdown
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
table {
|
||||
@extend .table, .table-bordered;
|
||||
}
|
||||
|
||||
18
scss/vendor/_pace.scss
vendored
18
scss/vendor/_pace.scss
vendored
@@ -1,18 +0,0 @@
|
||||
.pace {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pace-inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pace .pace-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
z-index: 2000;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
362
scss/vendor/_selectize.scss
vendored
362
scss/vendor/_selectize.scss
vendored
@@ -1,333 +1,43 @@
|
||||
/**
|
||||
* selectize.css (v0.12.6)
|
||||
* Copyright (c) 2013–2015 Brian Reavis & contributors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
|
||||
* file except in compliance with the License. You may obtain a copy of the License at:
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software distributed under
|
||||
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
|
||||
* ANY KIND, either express or implied. See the License for the specific language
|
||||
* governing permissions and limitations under the License.
|
||||
*
|
||||
* @author Brian Reavis <brian@thirdroute.com>
|
||||
*/
|
||||
|
||||
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
|
||||
visibility: visible !important;
|
||||
background: #f2f2f2 !important;
|
||||
background: rgba(0, 0, 0, .06) !important;
|
||||
border: 0 none !important;
|
||||
-webkit-box-shadow: inset 0 0 12px 4px #fff;
|
||||
box-shadow: inset 0 0 12px 4px #fff;
|
||||
}
|
||||
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
|
||||
visibility: hidden;
|
||||
content: "!";
|
||||
}
|
||||
.selectize-control.plugin-drag_drop .ui-sortable-helper {
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
|
||||
}
|
||||
.selectize-dropdown-header {
|
||||
position: relative;
|
||||
padding: 5px 8px;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #d0d0d0;
|
||||
-webkit-border-radius: 3px 3px 0 0;
|
||||
-moz-border-radius: 3px 3px 0 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.selectize-dropdown-header-close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 8px;
|
||||
margin-top: -12px;
|
||||
font-size: 20px !important;
|
||||
line-height: 20px;
|
||||
color: #303030;
|
||||
opacity: .4;
|
||||
}
|
||||
.selectize-dropdown-header-close:hover {
|
||||
color: #000;
|
||||
}
|
||||
.selectize-dropdown.plugin-optgroup_columns .optgroup {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
border-top: 0 none;
|
||||
border-right: 1px solid #f2f2f2;
|
||||
}
|
||||
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
|
||||
border-right: 0 none;
|
||||
}
|
||||
.selectize-dropdown.plugin-optgroup_columns .optgroup::before {
|
||||
display: none;
|
||||
}
|
||||
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
|
||||
border-top: 0 none;
|
||||
}
|
||||
.selectize-control.plugin-remove_button [data-value] {
|
||||
position: relative;
|
||||
padding-right: 24px !important;
|
||||
}
|
||||
.selectize-control.plugin-remove_button [data-value] .remove {
|
||||
/* fixes ie bug (see #392) */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
padding: 2px 0 0;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
border-left: 1px solid #d0d0d0;
|
||||
-webkit-border-radius: 0 2px 2px 0;
|
||||
-moz-border-radius: 0 2px 2px 0;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
.selectize-control.plugin-remove_button [data-value] .remove:hover {
|
||||
background: rgba(0, 0, 0, .05);
|
||||
}
|
||||
.selectize-control.plugin-remove_button [data-value].active .remove {
|
||||
border-left-color: #cacaca;
|
||||
}
|
||||
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
|
||||
background: none;
|
||||
}
|
||||
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.selectize-control.plugin-remove_button .remove-single {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 23px;
|
||||
}
|
||||
.selectize-control {
|
||||
position: relative;
|
||||
}
|
||||
.selectize-dropdown,
|
||||
.selectize-input,
|
||||
.selectize-input input {
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #303030;
|
||||
-webkit-font-smoothing: inherit;
|
||||
}
|
||||
.selectize-input,
|
||||
.selectize-control.single .selectize-input.input-active {
|
||||
display: inline-block;
|
||||
cursor: text;
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.selectize-input {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d0d0d0;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
|
||||
}
|
||||
.selectize-control.multi .selectize-input.has-items {
|
||||
padding: 6px 8px 3px;
|
||||
}
|
||||
.selectize-input.full {
|
||||
background-color: #fff;
|
||||
}
|
||||
.selectize-input.disabled,
|
||||
.selectize-input.disabled * {
|
||||
cursor: default !important;
|
||||
}
|
||||
.selectize-input.focus {
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
|
||||
}
|
||||
.selectize-input.dropdown-active {
|
||||
-webkit-border-radius: 3px 3px 0 0;
|
||||
-moz-border-radius: 3px 3px 0 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.selectize-input > * {
|
||||
display: -moz-inline-stack;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
vertical-align: baseline;
|
||||
zoom: 1;
|
||||
}
|
||||
.selectize-control.multi .selectize-input > div {
|
||||
padding: 2px 6px;
|
||||
margin: 0 3px 3px 0;
|
||||
color: #303030;
|
||||
cursor: pointer;
|
||||
background: #f2f2f2;
|
||||
border: 0 solid #d0d0d0;
|
||||
}
|
||||
.selectize-control.multi .selectize-input > div.active {
|
||||
color: #303030;
|
||||
background: #e8e8e8;
|
||||
border: 0 solid #cacaca;
|
||||
}
|
||||
.selectize-control.multi .selectize-input.disabled > div,
|
||||
.selectize-control.multi .selectize-input.disabled > div.active {
|
||||
color: #7d7d7d;
|
||||
background: #fff;
|
||||
border: 0 solid #fff;
|
||||
}
|
||||
.selectize-input > input {
|
||||
display: inline-block !important;
|
||||
max-width: 100% !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 2px 0 0 !important;
|
||||
line-height: inherit !important;
|
||||
text-indent: 0 !important;
|
||||
-webkit-user-select: auto !important;
|
||||
background: none !important;
|
||||
border: 0 none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.selectize-input > input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
.selectize-input > input:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
.selectize-input::after {
|
||||
display: block;
|
||||
clear: left;
|
||||
content: " ";
|
||||
}
|
||||
.selectize-input.dropdown-active::before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
height: 1px;
|
||||
content: " ";
|
||||
background: #f0f0f0;
|
||||
border: 1px solid $border-color;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $input-font-size;
|
||||
box-shadow: none;
|
||||
line-height: $input-line-height;
|
||||
|
||||
.selectize-control.single & {
|
||||
background: $form-select-bg escape-svg($form-select-indicator) $form-select-background;
|
||||
}
|
||||
|
||||
&.focus {
|
||||
border-color: $form-select-focus-border-color;
|
||||
box-shadow: $form-select-focus-box-shadow;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-dropdown {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: -1px 0 0;
|
||||
background: #fff;
|
||||
border: 1px solid #d0d0d0;
|
||||
border-top: 0 none;
|
||||
-webkit-border-radius: 0 0 3px 3px;
|
||||
-moz-border-radius: 0 0 3px 3px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
|
||||
}
|
||||
.selectize-dropdown [data-selectable] {
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
background: $form-select-bg;
|
||||
padding: $input-padding-y 0;
|
||||
margin-top: 1px;
|
||||
|
||||
.option,
|
||||
.option-header {
|
||||
padding: .25rem $input-padding-x;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: $hover-bg;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selectize-dropdown [data-selectable] .highlight {
|
||||
background: rgba(125, 168, 208, .2);
|
||||
-webkit-border-radius: 1px;
|
||||
-moz-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.selectize-dropdown .option,
|
||||
.selectize-dropdown .optgroup-header {
|
||||
padding: 5px 8px;
|
||||
}
|
||||
.selectize-dropdown .option,
|
||||
.selectize-dropdown [data-disabled],
|
||||
.selectize-dropdown [data-disabled] [data-selectable].option {
|
||||
cursor: inherit;
|
||||
opacity: .5;
|
||||
}
|
||||
.selectize-dropdown [data-selectable].option {
|
||||
opacity: 1;
|
||||
}
|
||||
.selectize-dropdown .optgroup:first-child .optgroup-header {
|
||||
border-top: 0 none;
|
||||
}
|
||||
.selectize-dropdown .optgroup-header {
|
||||
color: #303030;
|
||||
cursor: default;
|
||||
background: #fff;
|
||||
}
|
||||
.selectize-dropdown .active {
|
||||
color: #495c68;
|
||||
background-color: #f5fafd;
|
||||
}
|
||||
.selectize-dropdown .active.create {
|
||||
color: #495c68;
|
||||
}
|
||||
.selectize-dropdown .create {
|
||||
color: rgba(48, 48, 48, .5);
|
||||
}
|
||||
.selectize-dropdown-content {
|
||||
max-height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.selectize-control.single .selectize-input,
|
||||
.selectize-control.single .selectize-input input {
|
||||
cursor: pointer;
|
||||
}
|
||||
.selectize-control.single .selectize-input.input-active,
|
||||
.selectize-control.single .selectize-input.input-active input {
|
||||
cursor: text;
|
||||
}
|
||||
.selectize-control.single .selectize-input::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: -3px;
|
||||
content: " ";
|
||||
border-color: #808080 transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 5px 0;
|
||||
}
|
||||
.selectize-control.single .selectize-input.dropdown-active::after {
|
||||
margin-top: -4px;
|
||||
border-color: transparent transparent #808080;
|
||||
border-width: 0 5px 5px;
|
||||
}
|
||||
.selectize-control.rtl.single .selectize-input::after {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
}
|
||||
.selectize-control.rtl .selectize-input > input {
|
||||
margin: 0 4px 0 -2px !important;
|
||||
}
|
||||
.selectize-control .selectize-input.disabled {
|
||||
background-color: #fafafa;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user