added material ui theme

Author: furqanZafar

themes/base.styl

@@ -68,8 +68,15 @@
 .react-selectize.dropdown-menu
     overflow auto
     position absolute
+    max-height 200px
     z-index 10
 
+    &.tethered
+        min-width 300px
+
+    &:not(.tethered)
+        width 100%
+
     .groups.as-columns
         display flex
         > div

themes/bootstrap3.styl

@@ -70,13 +70,6 @@
     border-radius 4px
     box-shadow 0 6px 12px rgba(0, 0, 0, 0.175)
     font-family Helvetica Neue, Helvetica, Arial, sans-serif
-    max-height 200px
-
-    &.tethered
-        min-width 300px
-
-    &:not(.tethered)
-        width 100%
 
     &.flipped
         margin-bottom 5px
@@ -96,8 +89,7 @@
         padding 8px 8px
 
     .option-wrapper
-        cursor pointer
-        outline none
+
         &.highlight
             background #428bca
 

themes/default.styl

@@ -95,13 +95,6 @@
     box-sizing border-box
     border 1px solid #ccc
     font-family Helvetica Neue, Helvetica, Arial, sans-serif
-    max-height 200px
-
-    &.tethered
-        min-width 300px
-
-    &:not(.tethered)
-        width 100%
 
     &.flipped
         border-top-left-radius 4px
@@ -124,6 +117,7 @@
         padding 8px 8px
 
     .option-wrapper
+        
         &.highlight
             background #f2f9fc
             color #333

themes/index.styl

@@ -1,2 +1,3 @@
 @require 'default'
-@require 'bootstrap3'
+@require 'bootstrap3'
+@require 'material'

themes/material.styl

@@ -0,0 +1,121 @@
+.react-selectize.material
+    color black
+    font-family Roboto, sans-serif
+
+    &.open .react-selectize-control:after
+        transform scaleX(1)
+
+    .react-selectize-control 
+        border-bottom 1px solid rgba(0, 0, 0, 0.3)
+
+        &:after
+            background-color  rgb(0, 188, 212)
+            content ""
+            transform scaleX(0)
+            transition transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms
+            position absolute
+            left 0px
+            bottom -1px
+            width 100%
+            height 2px
+
+        > div
+            min-height 30px
+
+        .react-selectize-placeholder
+            color rgba(0, 0, 0, 0.3)
+            text-indent 4px
+
+.react-selectize.dropdown-menu-container.material
+    font-family Roboto, sans-serif
+    width 300px
+
+    &.flipped
+        margin-bottom 8px
+
+        .dropdown-menu
+            transform-origin 100% 100%
+
+    &:not(.flipped)
+        margin-top 8px
+
+        .dropdown-menu
+            transform-origin 0% 0%
+
+    .dropdown-menu
+
+        &.custom-enter-active, &.custom-leave-active
+            transition transform 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms
+
+        &.custom-enter
+            opacity 0
+            transform scale(0, 0)
+
+        &.custom-enter-active
+            opacity 1
+            transform scale(1, 1)
+
+        &.custom-leave
+            opacity 1
+            transform scale(1, 1)
+
+        &.custom-leave-active
+            opacity 0
+
+.react-selectize.dropdown-menu.material
+    background-color white
+    border-radius 2px
+    box-shadow rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px
+    font-family Roboto, sans-serif
+    padding 8px 0px
+
+    &.flipped
+        margin-bottom 8px
+
+    &:not(.flipped)
+        margin-top 8px
+    
+    .no-results-found
+        font-style oblique
+        font-size 16px
+        height 32px
+        padding 0px 16px
+        display flex
+        align-items center
+
+    .option-wrapper
+
+        &.highlight
+            background-color rgba(0,0,0,0.098)
+
+        .simple-option
+            color rgba(0, 0, 0, 0.875)
+            cursor pointer
+            display flex
+            align-items center
+            font-size 16px
+            height 48px
+            padding 0px 16px
+
+            &.not-selectable
+                background-color #f8f8f8
+                color #999
+                cursor default
+                font-style oblique
+                text-shadow 0px 1px 0px white
+
+// MULTI SELECT
+.react-selectize.multi-select.material
+
+    .simple-value
+        padding 0px 4px
+        
+        &:after
+            content ","
+
+// SIMPLE SELECT
+.react-selectize.simple-select.material
+    
+    .simple-value
+        margin 4px 3px 3px 2px
+