mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-26 11:34:05 +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
|
||||
|
||||
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
|
||||
|
||||
|
|
@ -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.
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -3083,3 +3083,144 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.slider-material-lightgrey .noUi-handle {
|
||||
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 {
|
||||
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
|
||||
@import "_plugin-snackbarjs.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