Replace Chosen jQuery plugin by custom UI component

4 files changed, 62 insertions, 12 deletions

diff --git a/assets/sass/_header.sass b/assets/sass/_header.sass
index c2bcb90e..017d4445 100644
--- a/assets/sass/_header.sass
+++ b/assets/sass/_header.sass
@@ -12,22 +12,20 @@ header
     @include md-device
       @include grid_width(15/100)
     @include sm-device
-      @include grid_width(65/100)
+      @include grid_width(30/100)
       order: 2
 
   .board-selector-container
-    @include grid_width(15/100)
+    @include grid_width(25/100)
     @include md-device
       @include grid_width(20/100)
     @include sm-device
-      @include grid_width(35/100)
+      @include grid_width(70/100)
       order: 1
       margin-bottom: 5px
 
   .title-container
-    @include grid_width(75/100)
-    @include md-device
-      @include grid_width(65/100)
+    @include grid_width(65/100)
     @include sm-device
       @include grid_width(1)
       order: 3
diff --git a/assets/sass/_input_addon.sass b/assets/sass/_input_addon.sass
index 6be78fdf..f721deae 100644
--- a/assets/sass/_input_addon.sass
+++ b/assets/sass/_input_addon.sass
@@ -10,12 +10,24 @@
   margin: 0
   +appearance
 
+  &:first-child
+    border-radius: 5px 0 0 5px
+
+  &:last-child
+    border-radius: 0 5px 5px 0
+
 .input-addon-item
   background-color: rgba(147, 128, 108, 0.1)
   color: #666
   font: inherit
   font-weight: normal
 
+  &:first-child
+    border-radius: 5px 0 0 5px
+
+  &:last-child
+    border-radius: 0 5px 5px 0
+
   @include xs-device
     .dropdown
       .fa-caret-down
@@ -27,9 +39,3 @@
 
   &:not(:first-child)
     border-left: 0
-
-.input-addon-field:first-child, .input-addon-item:first-child
-  border-radius: 5px 0 0 5px
-
-.input-addon-field:last-child, .input-addon-item:last-child
-  border-radius: 0 5px 5px 0
diff --git a/assets/sass/_select_dropdown.sass b/assets/sass/_select_dropdown.sass
new file mode 100644
index 00000000..0c4dcf38
--- /dev/null
+++ b/assets/sass/_select_dropdown.sass
@@ -0,0 +1,45 @@
+@import variables
+
+#select-dropdown-menu
+  position: absolute
+  display: block
+  z-index: 1000
+  min-width: 160px
+  padding: 5px 0
+  background: #fff
+  list-style: none
+  border: 1px solid #ccc
+  border-radius: 3px
+  box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
+
+.select-dropdown-menu-item
+  white-space: nowrap
+  overflow: hidden
+  padding: 3px 10px
+  color: color('medium')
+  cursor: pointer
+  border-bottom: 1px solid #f8f8f8
+  line-height: 1.5em
+  font-weight: 400
+  &.active
+    color: #fff
+    background: #428bca
+  &:last-child
+    border: none
+
+.select-dropdown-input-container
+  position: relative
+  border: 1px solid #ccc
+  border-radius: 5px
+  input.select-dropdown-input
+    margin: 0 0 0 5px
+    border: none
+    &:focus
+      border: none
+      box-shadow: none
+  .select-dropdown-chevron
+    color: color('medium')
+    position: absolute
+    top: 4px
+    right: 5px
+    cursor: pointer
diff --git a/assets/sass/app.sass b/assets/sass/app.sass
index 4c58f39c..7615f817 100644
--- a/assets/sass/app.sass
+++ b/assets/sass/app.sass
@@ -12,6 +12,7 @@
 @import tooltip
 @import dropdown
 @import accordion
+@import select_dropdown
 @import suggest_menu
 @import dialog_box
 @import popover