mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 21:14:13 +03:00
added support for selectize.js
This commit is contained in:
FezVrasta
parent
9b54709ade
commit
351aded5ba
|
|
@ -99,7 +99,7 @@ The syntax to add a Material icon is:
|
||||||
|
|
||||||
# Plugins
|
# Plugins
|
||||||
|
|
||||||
Material Design for Bootstrap comes with styling support for various external scripts. At the moment only two scripts are supported but others will come:
|
Material Design for Bootstrap comes with styling support for various external scripts:
|
||||||
|
|
||||||
### SnackbarJS
|
### SnackbarJS
|
||||||
|
|
||||||
|
|
@ -115,6 +115,11 @@ At the moment RipplesJS does not have its own repository but it will probably ha
|
||||||
Make cross-browser sliders and get them styled with Material Design thanks to the support provided by this theme.
|
Make cross-browser sliders and get them styled with Material Design thanks to the support provided by this theme.
|
||||||
Read more about [noUiSlider here](http://refreshless.com/nouislider/)
|
Read more about [noUiSlider here](http://refreshless.com/nouislider/)
|
||||||
|
|
||||||
|
### Selectize.js
|
||||||
|
|
||||||
|
Transform select and multi select inputs in advanced text inputs. Material Design for BS provides a fulle replacement of the plugin's CSS, don't include it so.
|
||||||
|
Read more about [selectize.js](http://brianreavis.github.io/selectize.js/)
|
||||||
|
|
||||||
|
|
||||||
# Compatibility
|
# Compatibility
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3083,3 +3083,144 @@ fieldset[disabled] .navbar .btn-link:focus {
|
||||||
.slider-material-lightgrey .noUi-handle {
|
.slider-material-lightgrey .noUi-handle {
|
||||||
border-color: #ececec;
|
border-color: #ececec;
|
||||||
}
|
}
|
||||||
|
.selectize-control.single,
|
||||||
|
.selectize-control.multi {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input,
|
||||||
|
.selectize-control.multi .selectize-input,
|
||||||
|
.selectize-control.single .selectize-input.input-active,
|
||||||
|
.selectize-control.multi .selectize-input.input-active {
|
||||||
|
cursor: text;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input .has-items,
|
||||||
|
.selectize-control.multi .selectize-input .has-items,
|
||||||
|
.selectize-control.single .selectize-input.input-active .has-items,
|
||||||
|
.selectize-control.multi .selectize-input.input-active .has-items {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input:after,
|
||||||
|
.selectize-control.multi .selectize-input:after,
|
||||||
|
.selectize-control.single .selectize-input.input-active:after,
|
||||||
|
.selectize-control.multi .selectize-input.input-active:after {
|
||||||
|
content: "\e611";
|
||||||
|
right: 5px;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 7px;
|
||||||
|
font-family: 'Material-Design';
|
||||||
|
speak: none;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 4;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input input,
|
||||||
|
.selectize-control.multi .selectize-input input,
|
||||||
|
.selectize-control.single .selectize-input.input-active input,
|
||||||
|
.selectize-control.multi .selectize-input.input-active input {
|
||||||
|
font-size: 14px;
|
||||||
|
outline: 0px;
|
||||||
|
border: 0px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input.floating-label-fix input,
|
||||||
|
.selectize-control.multi .selectize-input.floating-label-fix input,
|
||||||
|
.selectize-control.single .selectize-input.input-active.floating-label-fix input,
|
||||||
|
.selectize-control.multi .selectize-input.input-active.floating-label-fix input {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input > div,
|
||||||
|
.selectize-control.multi .selectize-input > div,
|
||||||
|
.selectize-control.single .selectize-input.input-active > div,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > div,
|
||||||
|
.selectize-control.single .selectize-input > .item,
|
||||||
|
.selectize-control.multi .selectize-input > .item,
|
||||||
|
.selectize-control.single .selectize-input.input-active > .item,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > .item {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 8px 3px 0;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input > div:after,
|
||||||
|
.selectize-control.multi .selectize-input > div:after,
|
||||||
|
.selectize-control.single .selectize-input.input-active > div:after,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > div:after,
|
||||||
|
.selectize-control.single .selectize-input > .item:after,
|
||||||
|
.selectize-control.multi .selectize-input > .item:after,
|
||||||
|
.selectize-control.single .selectize-input.input-active > .item:after,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > .item:after {
|
||||||
|
content: ",";
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input > div:last-of-type:after,
|
||||||
|
.selectize-control.multi .selectize-input > div:last-of-type:after,
|
||||||
|
.selectize-control.single .selectize-input.input-active > div:last-of-type:after,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > div:last-of-type:after,
|
||||||
|
.selectize-control.single .selectize-input > .item:last-of-type:after,
|
||||||
|
.selectize-control.multi .selectize-input > .item:last-of-type:after,
|
||||||
|
.selectize-control.single .selectize-input.input-active > .item:last-of-type:after,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > .item:last-of-type:after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input > div.active,
|
||||||
|
.selectize-control.multi .selectize-input > div.active,
|
||||||
|
.selectize-control.single .selectize-input.input-active > div.active,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > div.active,
|
||||||
|
.selectize-control.single .selectize-input > .item.active,
|
||||||
|
.selectize-control.multi .selectize-input > .item.active,
|
||||||
|
.selectize-control.single .selectize-input.input-active > .item.active,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > .item.active {
|
||||||
|
font-weight: bold;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-dropdown,
|
||||||
|
.selectize-control.multi .selectize-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
border: 0;
|
||||||
|
width: 100% !important;
|
||||||
|
left: 0 !important;
|
||||||
|
height: auto;
|
||||||
|
background-color: #FFF;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-dropdown .active,
|
||||||
|
.selectize-control.multi .selectize-dropdown .active {
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-dropdown .highlight,
|
||||||
|
.selectize-control.multi .selectize-dropdown .highlight {
|
||||||
|
background-color: #d5d8ff;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-dropdown .selected,
|
||||||
|
.selectize-control.multi .selectize-dropdown .selected,
|
||||||
|
.selectize-control.single .selectize-dropdown .selected.active,
|
||||||
|
.selectize-control.multi .selectize-dropdown .selected.active {
|
||||||
|
background-color: #EEEEEE;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-dropdown [data-selectable],
|
||||||
|
.selectize-control.multi .selectize-dropdown [data-selectable],
|
||||||
|
.selectize-control.single .selectize-dropdown .optgroup-header,
|
||||||
|
.selectize-control.multi .selectize-dropdown .optgroup-header {
|
||||||
|
padding: 10px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.selectize-control.single .dropdown-active ~ .selectize-dropdown,
|
||||||
|
.selectize-control.multi .dropdown-active ~ .selectize-dropdown {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
|
||||||
2
css-compiled/material-wfont.min.css
vendored
2
css-compiled/material-wfont.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -3082,3 +3082,144 @@ fieldset[disabled] .navbar .btn-link:focus {
|
||||||
.slider-material-lightgrey .noUi-handle {
|
.slider-material-lightgrey .noUi-handle {
|
||||||
border-color: #ececec;
|
border-color: #ececec;
|
||||||
}
|
}
|
||||||
|
.selectize-control.single,
|
||||||
|
.selectize-control.multi {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input,
|
||||||
|
.selectize-control.multi .selectize-input,
|
||||||
|
.selectize-control.single .selectize-input.input-active,
|
||||||
|
.selectize-control.multi .selectize-input.input-active {
|
||||||
|
cursor: text;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input .has-items,
|
||||||
|
.selectize-control.multi .selectize-input .has-items,
|
||||||
|
.selectize-control.single .selectize-input.input-active .has-items,
|
||||||
|
.selectize-control.multi .selectize-input.input-active .has-items {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input:after,
|
||||||
|
.selectize-control.multi .selectize-input:after,
|
||||||
|
.selectize-control.single .selectize-input.input-active:after,
|
||||||
|
.selectize-control.multi .selectize-input.input-active:after {
|
||||||
|
content: "\e611";
|
||||||
|
right: 5px;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 7px;
|
||||||
|
font-family: 'Material-Design';
|
||||||
|
speak: none;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 4;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input input,
|
||||||
|
.selectize-control.multi .selectize-input input,
|
||||||
|
.selectize-control.single .selectize-input.input-active input,
|
||||||
|
.selectize-control.multi .selectize-input.input-active input {
|
||||||
|
font-size: 14px;
|
||||||
|
outline: 0px;
|
||||||
|
border: 0px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input.floating-label-fix input,
|
||||||
|
.selectize-control.multi .selectize-input.floating-label-fix input,
|
||||||
|
.selectize-control.single .selectize-input.input-active.floating-label-fix input,
|
||||||
|
.selectize-control.multi .selectize-input.input-active.floating-label-fix input {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input > div,
|
||||||
|
.selectize-control.multi .selectize-input > div,
|
||||||
|
.selectize-control.single .selectize-input.input-active > div,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > div,
|
||||||
|
.selectize-control.single .selectize-input > .item,
|
||||||
|
.selectize-control.multi .selectize-input > .item,
|
||||||
|
.selectize-control.single .selectize-input.input-active > .item,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > .item {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 8px 3px 0;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input > div:after,
|
||||||
|
.selectize-control.multi .selectize-input > div:after,
|
||||||
|
.selectize-control.single .selectize-input.input-active > div:after,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > div:after,
|
||||||
|
.selectize-control.single .selectize-input > .item:after,
|
||||||
|
.selectize-control.multi .selectize-input > .item:after,
|
||||||
|
.selectize-control.single .selectize-input.input-active > .item:after,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > .item:after {
|
||||||
|
content: ",";
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input > div:last-of-type:after,
|
||||||
|
.selectize-control.multi .selectize-input > div:last-of-type:after,
|
||||||
|
.selectize-control.single .selectize-input.input-active > div:last-of-type:after,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > div:last-of-type:after,
|
||||||
|
.selectize-control.single .selectize-input > .item:last-of-type:after,
|
||||||
|
.selectize-control.multi .selectize-input > .item:last-of-type:after,
|
||||||
|
.selectize-control.single .selectize-input.input-active > .item:last-of-type:after,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > .item:last-of-type:after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-input > div.active,
|
||||||
|
.selectize-control.multi .selectize-input > div.active,
|
||||||
|
.selectize-control.single .selectize-input.input-active > div.active,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > div.active,
|
||||||
|
.selectize-control.single .selectize-input > .item.active,
|
||||||
|
.selectize-control.multi .selectize-input > .item.active,
|
||||||
|
.selectize-control.single .selectize-input.input-active > .item.active,
|
||||||
|
.selectize-control.multi .selectize-input.input-active > .item.active {
|
||||||
|
font-weight: bold;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-dropdown,
|
||||||
|
.selectize-control.multi .selectize-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
border: 0;
|
||||||
|
width: 100% !important;
|
||||||
|
left: 0 !important;
|
||||||
|
height: auto;
|
||||||
|
background-color: #FFF;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-dropdown .active,
|
||||||
|
.selectize-control.multi .selectize-dropdown .active {
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-dropdown .highlight,
|
||||||
|
.selectize-control.multi .selectize-dropdown .highlight {
|
||||||
|
background-color: #d5d8ff;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-dropdown .selected,
|
||||||
|
.selectize-control.multi .selectize-dropdown .selected,
|
||||||
|
.selectize-control.single .selectize-dropdown .selected.active,
|
||||||
|
.selectize-control.multi .selectize-dropdown .selected.active {
|
||||||
|
background-color: #EEEEEE;
|
||||||
|
}
|
||||||
|
.selectize-control.single .selectize-dropdown [data-selectable],
|
||||||
|
.selectize-control.multi .selectize-dropdown [data-selectable],
|
||||||
|
.selectize-control.single .selectize-dropdown .optgroup-header,
|
||||||
|
.selectize-control.multi .selectize-dropdown .optgroup-header {
|
||||||
|
padding: 10px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.selectize-control.single .dropdown-active ~ .selectize-dropdown,
|
||||||
|
.selectize-control.multi .dropdown-active ~ .selectize-dropdown {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
|
||||||
2
css-compiled/material.min.css
vendored
2
css-compiled/material.min.css
vendored
File diff suppressed because one or more lines are too long
91
less/_plugin-selectize.less
Normal file
91
less/_plugin-selectize.less
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
// Support for Selectize plugin
|
||||||
|
// http://brianreavis.github.io/selectize.js/
|
||||||
|
|
||||||
|
.selectize-control.single, .selectize-control.multi {
|
||||||
|
padding: 0;
|
||||||
|
.selectize-input, .selectize-input.input-active {
|
||||||
|
|
||||||
|
cursor: text;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 30px;
|
||||||
|
.has-items {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
content: "\e611";
|
||||||
|
right: 5px;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 7px;
|
||||||
|
font-family: 'Material-Design';
|
||||||
|
speak: none;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 4;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
font-size: 14px;
|
||||||
|
outline: 0px;
|
||||||
|
border: 0px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
&.floating-label-fix input {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
> div, > .item {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 8px 3px 0;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
&:after {
|
||||||
|
content: ",";
|
||||||
|
}
|
||||||
|
&:last-of-type:after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
font-weight: bold;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.selectize-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
border: 0;
|
||||||
|
width: 100% !important;
|
||||||
|
left: 0 !important;
|
||||||
|
height: auto;
|
||||||
|
background-color: #FFF;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 3px;
|
||||||
|
.active {
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
.highlight {
|
||||||
|
background-color: #d5d8ff;
|
||||||
|
}
|
||||||
|
.selected, .selected.active {
|
||||||
|
background-color: #EEEEEE;
|
||||||
|
}
|
||||||
|
[data-selectable], .optgroup-header {
|
||||||
|
padding: 10px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dropdown-active ~ .selectize-dropdown {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -108,3 +108,4 @@ legend {
|
||||||
// External plugins
|
// External plugins
|
||||||
@import "_plugin-snackbarjs.less";
|
@import "_plugin-snackbarjs.less";
|
||||||
@import "_plugin-nouislider.less";
|
@import "_plugin-nouislider.less";
|
||||||
|
@import "_plugin-selectize.less";
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user