added touchstart event and some css updates

Author: isteven

angular-multi-select.css

@@ -5,15 +5,15 @@
     display: inline-block;
 }
 
-/* multi select button style */
+/* button */
 .multiSelect .button {
     display: block;
     position: relative;
     margin:0 auto;       
     text-align: center;
     cursor: pointer;
     border: 1px solid #c6c6c6;
-    padding: 7px 12px 5px;
+    padding: 5px 8px 2px;
     font-size: 14px;
     line-height: 1.4;
     border-radius: 2px;
@@ -29,6 +29,7 @@
 
 }
 
+/* button on mouse hover */
 .multiSelect .button:hover {
     background-image: linear-gradient(#fff, #eee);    
 }
@@ -51,6 +52,7 @@
     float: left;        
 }
 
+/* The checkboxes container */
 .multiSelect .checkboxLayer {
     background-color: #fff;
     position: absolute;
@@ -61,10 +63,11 @@
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     background-clip: padding-box; 
-    padding: 15px;
+    padding: 14px 0px 7px 14px;
     min-width:270px;
 }
 
+/* Downward pointing arrow */
 .multiSelect .caret {
     display: inline-block;
     width: 0;
@@ -97,7 +100,6 @@
     min-width: 14px;
 }
 
-
 label.multiSelect span {
     white-space:nowrap;
     margin: 0;
@@ -137,15 +139,15 @@ label.multiSelect span {
 label.multiSelect input:focus ~ span::after,
 label.multiSelect span:focus::after, 
 label.multiSelect span:hover::after {     
-    /* Enable this if you want some arrow pointer */
+    /* Enable this if you want some arrow pointer on focus */
     /* content: ' \00AB'; */
 }
 
 label.multiSelect input:focus ~ span,
 label.multiSelect span:hover {
     color: #333;
     cursor: pointer;        
-    /* Enable this if you want some arrow pointer */
+    /* Enable this if you want some arrow pointer on focus */
     /* content: ' \00AB'; */
 }
 
@@ -161,7 +163,9 @@ label.multiSelect span:hover {
     cursor: not-allowed;
 }
 
-/* If you use images in button / checkbox label, you might want to change the image style here.. */
+/* 
+ * If you use images in button / checkbox label, you might want to change the image style here.
+ */
 .multiSelect img {
     vertical-align: middle;
     margin-bottom:3px;

angular-multi-select.js

@@ -64,7 +64,7 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', '$
                 '<button type="button" class="multiSelect button multiSelectButton" ng-click="toggleCheckboxes( $event ); refreshSelectedItems();" ng-bind-html="varButtonLabel" ng-focus="onFocus()" ng-blur="onBlur()">' +
                 '</button>' +                
                 '<div class="multiSelect checkboxLayer hide">' +
-                    '<div class="multiSelect line">' +
+                    '<div class="multiSelect line" ng-show="displayHelper( \'all\' ) || displayHelper( \'none\' ) || displayHelper( \'reset\' )">' +
                         '<span ng-if="!isDisabled && ( displayHelper( \'all\' ) || displayHelper( \'none\' ) || displayHelper( \'reset\' ))">Select: &nbsp;</span>' + 
                             '<button type="button" ng-click="select( \'all\' )"    class="multiSelect helperButton" ng-if="!isDisabled && displayHelper( \'all\' )">All</button> ' +
                             '<button type="button" ng-click="select( \'none\' )"   class="multiSelect helperButton" ng-if="!isDisabled && displayHelper( \'none\' )">None</button> ' + 
@@ -421,8 +421,8 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', '$
                 $scope.isDisabled = newVal;                               
             });
 
-            // Monitor for clicks outside the button element to hide the checkboxes
-            angular.element( document ).bind( 'click' , function( e ) {                                
+            // Monitor for clicks or touches outside the button element to hide the checkboxes
+            angular.element( document ).bind( 'click touchstart' , function( e ) {                                
                 var checkboxes = document.querySelectorAll( '.checkboxLayer' );     
                 if ( e.target.className.indexOf( 'multiSelect' ) === -1 ) {
                     for( i=0; i < checkboxes.length; i++ ) {