Skip to content

Commit 351aded

Browse files
author
FezVrasta
committed
added support for selectize.js
1 parent 9b54709 commit 351aded

9 files changed

Lines changed: 384 additions & 5 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ The syntax to add a Material icon is:
9999

100100
# Plugins
101101

102-
Material Design for Bootstrap comes with styling support for various external scripts. At the moment only two scripts are supported but others will come:
102+
Material Design for Bootstrap comes with styling support for various external scripts:
103103

104104
### SnackbarJS
105105

@@ -115,6 +115,11 @@ At the moment RipplesJS does not have its own repository but it will probably ha
115115
Make cross-browser sliders and get them styled with Material Design thanks to the support provided by this theme.
116116
Read more about [noUiSlider here](http://refreshless.com/nouislider/)
117117

118+
### Selectize.js
119+
120+
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.
121+
Read more about [selectize.js](http://brianreavis.github.io/selectize.js/)
122+
118123

119124
# Compatibility
120125

‎css-compiled/material-wfont.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3083,3 +3083,144 @@ fieldset[disabled] .navbar .btn-link:focus {
30833083
.slider-material-lightgrey .noUi-handle {
30843084
border-color: #ececec;
30853085
}
3086+
.selectize-control.single,
3087+
.selectize-control.multi {
3088+
padding: 0;
3089+
}
3090+
.selectize-control.single .selectize-input,
3091+
.selectize-control.multi .selectize-input,
3092+
.selectize-control.single .selectize-input.input-active,
3093+
.selectize-control.multi .selectize-input.input-active {
3094+
cursor: text;
3095+
background: transparent;
3096+
box-shadow: none;
3097+
border: 0;
3098+
padding: 0;
3099+
height: 100%;
3100+
font-size: 14px;
3101+
line-height: 30px;
3102+
}
3103+
.selectize-control.single .selectize-input .has-items,
3104+
.selectize-control.multi .selectize-input .has-items,
3105+
.selectize-control.single .selectize-input.input-active .has-items,
3106+
.selectize-control.multi .selectize-input.input-active .has-items {
3107+
padding: 0;
3108+
}
3109+
.selectize-control.single .selectize-input:after,
3110+
.selectize-control.multi .selectize-input:after,
3111+
.selectize-control.single .selectize-input.input-active:after,
3112+
.selectize-control.multi .selectize-input.input-active:after {
3113+
content: "\e611";
3114+
right: 5px;
3115+
position: absolute;
3116+
font-size: 7px;
3117+
font-family: 'Material-Design';
3118+
speak: none;
3119+
font-style: normal;
3120+
font-weight: normal;
3121+
font-variant: normal;
3122+
text-transform: none;
3123+
line-height: 4;
3124+
-webkit-font-smoothing: antialiased;
3125+
-moz-osx-font-smoothing: grayscale;
3126+
}
3127+
.selectize-control.single .selectize-input input,
3128+
.selectize-control.multi .selectize-input input,
3129+
.selectize-control.single .selectize-input.input-active input,
3130+
.selectize-control.multi .selectize-input.input-active input {
3131+
font-size: 14px;
3132+
outline: 0px;
3133+
border: 0px;
3134+
background: transparent;
3135+
}
3136+
.selectize-control.single .selectize-input.floating-label-fix input,
3137+
.selectize-control.multi .selectize-input.floating-label-fix input,
3138+
.selectize-control.single .selectize-input.input-active.floating-label-fix input,
3139+
.selectize-control.multi .selectize-input.input-active.floating-label-fix input {
3140+
opacity: 0;
3141+
}
3142+
.selectize-control.single .selectize-input > div,
3143+
.selectize-control.multi .selectize-input > div,
3144+
.selectize-control.single .selectize-input.input-active > div,
3145+
.selectize-control.multi .selectize-input.input-active > div,
3146+
.selectize-control.single .selectize-input > .item,
3147+
.selectize-control.multi .selectize-input > .item,
3148+
.selectize-control.single .selectize-input.input-active > .item,
3149+
.selectize-control.multi .selectize-input.input-active > .item {
3150+
display: inline-block;
3151+
margin: 0 8px 3px 0;
3152+
padding: 0;
3153+
background: transparent;
3154+
border: 0;
3155+
}
3156+
.selectize-control.single .selectize-input > div:after,
3157+
.selectize-control.multi .selectize-input > div:after,
3158+
.selectize-control.single .selectize-input.input-active > div:after,
3159+
.selectize-control.multi .selectize-input.input-active > div:after,
3160+
.selectize-control.single .selectize-input > .item:after,
3161+
.selectize-control.multi .selectize-input > .item:after,
3162+
.selectize-control.single .selectize-input.input-active > .item:after,
3163+
.selectize-control.multi .selectize-input.input-active > .item:after {
3164+
content: ",";
3165+
}
3166+
.selectize-control.single .selectize-input > div:last-of-type:after,
3167+
.selectize-control.multi .selectize-input > div:last-of-type:after,
3168+
.selectize-control.single .selectize-input.input-active > div:last-of-type:after,
3169+
.selectize-control.multi .selectize-input.input-active > div:last-of-type:after,
3170+
.selectize-control.single .selectize-input > .item:last-of-type:after,
3171+
.selectize-control.multi .selectize-input > .item:last-of-type:after,
3172+
.selectize-control.single .selectize-input.input-active > .item:last-of-type:after,
3173+
.selectize-control.multi .selectize-input.input-active > .item:last-of-type:after {
3174+
content: "";
3175+
}
3176+
.selectize-control.single .selectize-input > div.active,
3177+
.selectize-control.multi .selectize-input > div.active,
3178+
.selectize-control.single .selectize-input.input-active > div.active,
3179+
.selectize-control.multi .selectize-input.input-active > div.active,
3180+
.selectize-control.single .selectize-input > .item.active,
3181+
.selectize-control.multi .selectize-input > .item.active,
3182+
.selectize-control.single .selectize-input.input-active > .item.active,
3183+
.selectize-control.multi .selectize-input.input-active > .item.active {
3184+
font-weight: bold;
3185+
background: transparent;
3186+
border: 0;
3187+
}
3188+
.selectize-control.single .selectize-dropdown,
3189+
.selectize-control.multi .selectize-dropdown {
3190+
position: absolute;
3191+
z-index: 1000;
3192+
border: 0;
3193+
width: 100% !important;
3194+
left: 0 !important;
3195+
height: auto;
3196+
background-color: #FFF;
3197+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
3198+
border-radius: 2px;
3199+
padding: 0;
3200+
margin-top: 3px;
3201+
}
3202+
.selectize-control.single .selectize-dropdown .active,
3203+
.selectize-control.multi .selectize-dropdown .active {
3204+
background-color: inherit;
3205+
}
3206+
.selectize-control.single .selectize-dropdown .highlight,
3207+
.selectize-control.multi .selectize-dropdown .highlight {
3208+
background-color: #d5d8ff;
3209+
}
3210+
.selectize-control.single .selectize-dropdown .selected,
3211+
.selectize-control.multi .selectize-dropdown .selected,
3212+
.selectize-control.single .selectize-dropdown .selected.active,
3213+
.selectize-control.multi .selectize-dropdown .selected.active {
3214+
background-color: #EEEEEE;
3215+
}
3216+
.selectize-control.single .selectize-dropdown [data-selectable],
3217+
.selectize-control.multi .selectize-dropdown [data-selectable],
3218+
.selectize-control.single .selectize-dropdown .optgroup-header,
3219+
.selectize-control.multi .selectize-dropdown .optgroup-header {
3220+
padding: 10px 20px;
3221+
cursor: pointer;
3222+
}
3223+
.selectize-control.single .dropdown-active ~ .selectize-dropdown,
3224+
.selectize-control.multi .dropdown-active ~ .selectize-dropdown {
3225+
display: block;
3226+
}

‎css-compiled/material-wfont.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css-compiled/material.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3082,3 +3082,144 @@ fieldset[disabled] .navbar .btn-link:focus {
30823082
.slider-material-lightgrey .noUi-handle {
30833083
border-color: #ececec;
30843084
}
3085+
.selectize-control.single,
3086+
.selectize-control.multi {
3087+
padding: 0;
3088+
}
3089+
.selectize-control.single .selectize-input,
3090+
.selectize-control.multi .selectize-input,
3091+
.selectize-control.single .selectize-input.input-active,
3092+
.selectize-control.multi .selectize-input.input-active {
3093+
cursor: text;
3094+
background: transparent;
3095+
box-shadow: none;
3096+
border: 0;
3097+
padding: 0;
3098+
height: 100%;
3099+
font-size: 14px;
3100+
line-height: 30px;
3101+
}
3102+
.selectize-control.single .selectize-input .has-items,
3103+
.selectize-control.multi .selectize-input .has-items,
3104+
.selectize-control.single .selectize-input.input-active .has-items,
3105+
.selectize-control.multi .selectize-input.input-active .has-items {
3106+
padding: 0;
3107+
}
3108+
.selectize-control.single .selectize-input:after,
3109+
.selectize-control.multi .selectize-input:after,
3110+
.selectize-control.single .selectize-input.input-active:after,
3111+
.selectize-control.multi .selectize-input.input-active:after {
3112+
content: "\e611";
3113+
right: 5px;
3114+
position: absolute;
3115+
font-size: 7px;
3116+
font-family: 'Material-Design';
3117+
speak: none;
3118+
font-style: normal;
3119+
font-weight: normal;
3120+
font-variant: normal;
3121+
text-transform: none;
3122+
line-height: 4;
3123+
-webkit-font-smoothing: antialiased;
3124+
-moz-osx-font-smoothing: grayscale;
3125+
}
3126+
.selectize-control.single .selectize-input input,
3127+
.selectize-control.multi .selectize-input input,
3128+
.selectize-control.single .selectize-input.input-active input,
3129+
.selectize-control.multi .selectize-input.input-active input {
3130+
font-size: 14px;
3131+
outline: 0px;
3132+
border: 0px;
3133+
background: transparent;
3134+
}
3135+
.selectize-control.single .selectize-input.floating-label-fix input,
3136+
.selectize-control.multi .selectize-input.floating-label-fix input,
3137+
.selectize-control.single .selectize-input.input-active.floating-label-fix input,
3138+
.selectize-control.multi .selectize-input.input-active.floating-label-fix input {
3139+
opacity: 0;
3140+
}
3141+
.selectize-control.single .selectize-input > div,
3142+
.selectize-control.multi .selectize-input > div,
3143+
.selectize-control.single .selectize-input.input-active > div,
3144+
.selectize-control.multi .selectize-input.input-active > div,
3145+
.selectize-control.single .selectize-input > .item,
3146+
.selectize-control.multi .selectize-input > .item,
3147+
.selectize-control.single .selectize-input.input-active > .item,
3148+
.selectize-control.multi .selectize-input.input-active > .item {
3149+
display: inline-block;
3150+
margin: 0 8px 3px 0;
3151+
padding: 0;
3152+
background: transparent;
3153+
border: 0;
3154+
}
3155+
.selectize-control.single .selectize-input > div:after,
3156+
.selectize-control.multi .selectize-input > div:after,
3157+
.selectize-control.single .selectize-input.input-active > div:after,
3158+
.selectize-control.multi .selectize-input.input-active > div:after,
3159+
.selectize-control.single .selectize-input > .item:after,
3160+
.selectize-control.multi .selectize-input > .item:after,
3161+
.selectize-control.single .selectize-input.input-active > .item:after,
3162+
.selectize-control.multi .selectize-input.input-active > .item:after {
3163+
content: ",";
3164+
}
3165+
.selectize-control.single .selectize-input > div:last-of-type:after,
3166+
.selectize-control.multi .selectize-input > div:last-of-type:after,
3167+
.selectize-control.single .selectize-input.input-active > div:last-of-type:after,
3168+
.selectize-control.multi .selectize-input.input-active > div:last-of-type:after,
3169+
.selectize-control.single .selectize-input > .item:last-of-type:after,
3170+
.selectize-control.multi .selectize-input > .item:last-of-type:after,
3171+
.selectize-control.single .selectize-input.input-active > .item:last-of-type:after,
3172+
.selectize-control.multi .selectize-input.input-active > .item:last-of-type:after {
3173+
content: "";
3174+
}
3175+
.selectize-control.single .selectize-input > div.active,
3176+
.selectize-control.multi .selectize-input > div.active,
3177+
.selectize-control.single .selectize-input.input-active > div.active,
3178+
.selectize-control.multi .selectize-input.input-active > div.active,
3179+
.selectize-control.single .selectize-input > .item.active,
3180+
.selectize-control.multi .selectize-input > .item.active,
3181+
.selectize-control.single .selectize-input.input-active > .item.active,
3182+
.selectize-control.multi .selectize-input.input-active > .item.active {
3183+
font-weight: bold;
3184+
background: transparent;
3185+
border: 0;
3186+
}
3187+
.selectize-control.single .selectize-dropdown,
3188+
.selectize-control.multi .selectize-dropdown {
3189+
position: absolute;
3190+
z-index: 1000;
3191+
border: 0;
3192+
width: 100% !important;
3193+
left: 0 !important;
3194+
height: auto;
3195+
background-color: #FFF;
3196+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
3197+
border-radius: 2px;
3198+
padding: 0;
3199+
margin-top: 3px;
3200+
}
3201+
.selectize-control.single .selectize-dropdown .active,
3202+
.selectize-control.multi .selectize-dropdown .active {
3203+
background-color: inherit;
3204+
}
3205+
.selectize-control.single .selectize-dropdown .highlight,
3206+
.selectize-control.multi .selectize-dropdown .highlight {
3207+
background-color: #d5d8ff;
3208+
}
3209+
.selectize-control.single .selectize-dropdown .selected,
3210+
.selectize-control.multi .selectize-dropdown .selected,
3211+
.selectize-control.single .selectize-dropdown .selected.active,
3212+
.selectize-control.multi .selectize-dropdown .selected.active {
3213+
background-color: #EEEEEE;
3214+
}
3215+
.selectize-control.single .selectize-dropdown [data-selectable],
3216+
.selectize-control.multi .selectize-dropdown [data-selectable],
3217+
.selectize-control.single .selectize-dropdown .optgroup-header,
3218+
.selectize-control.multi .selectize-dropdown .optgroup-header {
3219+
padding: 10px 20px;
3220+
cursor: pointer;
3221+
}
3222+
.selectize-control.single .dropdown-active ~ .selectize-dropdown,
3223+
.selectize-control.multi .dropdown-active ~ .selectize-dropdown {
3224+
display: block;
3225+
}

‎css-compiled/material.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)