Form: add select2 form multiple select

app/assets/javascripts/new_design/application.js

@@ -17,4 +17,5 @@
 //= require leaflet.1.1.0
 //= require highcharts
 //= require chartkick
+//= require select2
 //= require_tree .

app/assets/javascripts/new_design/champs/multiple_drop_down_list.js

@@ -0,0 +1,3 @@
+document.addEventListener('turbolinks:load', function() {
+  $('select.select2').select2();
+});

app/assets/stylesheets/new_design/forms.scss

@@ -58,7 +58,8 @@
     max-width: 180px;
   }
 
-  select {
+  select,
+  .select2-selection {
     // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -81,6 +82,31 @@
     }
   }
 
+  .select2 {
+    min-width: 50%;
+  }
+
+  .select2-container {
+    display: block;
+    margin-bottom: 2 * $default-padding;
+
+    &.select2-container--focus {
+      .select2-selection {
+        border-color: $border-grey;
+      }
+    }
+
+    // scss-lint:disable SelectorFormat
+    .select2-selection__rendered {
+      padding: $default-padding;
+    }
+
+    .select2-selection__choice {
+      background-color: #FFFFFF;
+    }
+    // scss-lint:enable
+  }
+
   .datetime {
     input[type=date] {
       display: inline-block;

app/assets/stylesheets/new_design/new_application.scss

@@ -4,4 +4,5 @@
 // = require ./utils
 // = require ./fonts
 // = require leaflet.1.1.0
+// = require select2
 // = require_tree .

app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml

@@ -5,4 +5,5 @@
     options_for_select(champ.drop_down_list.options,
       selected: champ.drop_down_list.selected_options_without_decorator(champ),
       disabled: champ.drop_down_list.disabled_options),
-      multiple: true)
+      multiple: true,
+      class: 'select2')