removes float from selection dropdown icon, adds setting for touch delay

server/documents/modules/dropdown.html.eco

@@ -82,8 +82,8 @@ type        : 'UI Module'
     <p>A dropdown can be formatted to allow selection of a menu choice.</p>
     <div class="ui selection dropdown">
       <input type="hidden" name="gender">
-      <i class="dropdown icon"></i>
       <div class="default text">Gender</div>
+      <i class="dropdown icon"></i>
       <div class="menu">
         <div class="item" data-value="male">Male</div>
         <div class="item" data-value="female">Female</div>
@@ -337,8 +337,8 @@ type        : 'UI Module'
         <label>Gender</label>
         <div class="ui dropdown selection">
           <input type="hidden" name="gender">
-          <i class="dropdown icon"></i>
           <div class="default text">...</div>
+          <i class="dropdown icon"></i>
           <div class="menu">
             <div class="item" data-value="male">Male</div>
             <div class="item" data-value="female">Female</div>

src/collections/menu.less

@@ -301,6 +301,9 @@
   min-width: calc(100% - 1px);
   box-shadow: 0 1px 1px 1px #DDDDDD;
 }
+.ui.menu .pointing.dropdown.item .menu {
+  margin-top: 0.75em;
+}
 .ui.menu .simple.dropdown.item .menu {
   margin: 0px !important;
 }
@@ -495,7 +498,6 @@
 
 .ui.vertical.menu .item > .label {
   float: right;
-  min-width: 2.5;
   text-align: center;
 }
 .ui.vertical.menu .item > .icon:not(.input) {

src/modules/dropdown.js

@@ -168,7 +168,7 @@ $.fn.dropdown = function(parameters) {
             touch: function(event) {
               module.determine.intent(event, function() {
                 if(event.type == 'touchstart') {
-                  module.timer = setTimeout(module.hide, 50);
+                  module.timer = setTimeout(module.hide, settings.delay.touch);
                 }
                 else if(event.type == 'touchmove') {
                   clearTimeout(module.timer);
@@ -178,7 +178,6 @@ $.fn.dropdown = function(parameters) {
             },
             hide: function(event) {
               module.determine.intent(event, module.hide);
-              event.stopPropagation();
             }
           },
 
@@ -254,9 +253,11 @@ $.fn.dropdown = function(parameters) {
             if( $(event.target).closest($menu).size() === 0 ) {
               module.verbose('Triggering event', callback);
               callback();
+              return true;
             }
             else {
               module.verbose('Event occurred in dropdown, canceling callback');
+              return false;
             }
           }
         },
@@ -760,8 +761,9 @@ $.fn.dropdown.settings = {
   action      : 'activate',
 
   delay: {
-    show: 200,
-    hide: 300
+    show  : 200,
+    hide  : 300,
+    touch : 50
   },
 
   transition : 'slide down',

src/modules/dropdown.less

@@ -320,8 +320,6 @@
   display: none;
 }
 .ui.selection.dropdown > .dropdown.icon {
-  float: right;
-
   opacity: 0.7;
   margin: 0.2em 0em 0.2em 1.25em;
 
@@ -348,9 +346,9 @@
   overflow-x: hidden;
   overflow-y: auto;
 
-  -webkit-box-shadow: 0px 1px 0px 1px #EEEEEE;
-  -moz-box-shadow: 0px 1px 0px 1px #EEEEEE;
-  box-shadow: 0px 1px 0px 1px #EEEEEE;
+  -webkit-box-shadow: 0px 1px 0px 1px #E0E0E0;
+  -moz-box-shadow: 0px 1px 0px 1px #E0E0E0;
+  box-shadow: 0px 1px 0px 1px #E0E0E0;
 
   -moz-border-radius: 0px 0px 0.325em 0.325em;
   -webkit-border-radius: 0px 0px 0.325em 0.325em;
@@ -368,33 +366,31 @@
 }
 
 /* Hover */
-.ui.selection.dropdown:hover,
-.ui.selection.dropdown.hover {
+.ui.selection.dropdown:hover {
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
 }
+.ui.selection.dropdown:hover .menu {
+  -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
+  -moz-box-shadow: 0px 1px 0px 1px #D3D3D3;
+  box-shadow: 0px 1px 0px 1px #D3D3D3;
+}
 .ui.selection.dropdown:hover > .dropdown.icon {
   opacity: 1;
 }
 
-/* Visible */
-.ui.selection.active.dropdown {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
+/* Active */
+.ui.active.selection.dropdown {
 
   -webkit-border-radius: 0.3125em 0.3125em 0em 0em !important;
   -moz-border-radius: 0.3125em 0.3125em 0em 0em !important;
   border-radius: 0.3125em 0.3125em 0em 0em !important;
 }
-.ui.selection.active.dropdown > .dropdown.icon {
+.ui.active.selection.dropdown > .dropdown.icon {
   opacity: 1;
 }
-.ui.selection.active.dropdown .menu {
-  -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
-  -moz-box-shadow: 0px 1px 0px 1px #D3D3D3;
-  box-shadow: 0px 1px 0px 1px #D3D3D3;
+.ui.active.selection.dropdown .menu {
 }
 
 /*--------------