Updates dropdown js to include enhancements from prelease, several bugfixes for dropdown

src/definitions/collections/menu.less

@@ -58,24 +58,19 @@
 ---------------*/
 
 /* Text Color */
-.ui.menu .item,
-.ui.menu .item > a:not(.button) {
+.ui.menu .item {
   color: @menuTextColor;
 }
-.ui.menu .item .item,
-.ui.menu .item .item > a:not(.button) {
+.ui.menu .item .item {
   color: @subMenuTextColor;
 }
+
 /* Hover */
 .ui.menu .item .menu a.item:hover,
 .ui.menu .item .menu .link.item:hover {
   color: @darkTextColor;
 }
-/* Hover */
-.ui.menu .item .menu a.item:hover,
-.ui.menu .item .menu .link.item:hover {
-  color: rgba(0, 0, 0, 0.85);
-}
+
 /* Active */
 .ui.menu .active.item {
   color: @selectedTextColor;
@@ -254,10 +249,7 @@
 .ui.vertical.menu .header.item {
   background: @headerBackground;
   margin: 0em;
-  font-size: @headerFontSize;
   text-transform: @headerTextTransform;
-}
-.ui.vertical.menu .header.item {
   font-weight: @headerWeight;
 }
 
@@ -291,37 +283,6 @@
   margin: 0px !important;
 }
 
-/* Dropdown Menu Item */
-.ui.menu .dropdown .menu .item {
-  width: 100%;
-  cursor: pointer;
-  color: @dropdownTextColor;
-}
-
-/* Hover */
-.ui.menu .dropdown .menu .item:hover {
-  background: @hoverBackground;
-  color: @darkTextColor;
-}
-
-/* Pressed */
-.ui.menu .dropdown .menu .item:active {
-  background: @downBackground;
-}
-
-/* Active */
-.ui.menu .dropdown.item .menu .active.item {
-  box-shadow: none !important;
-}
-
-/* Dropdown Menu Item Content */
-.ui.menu .dropdown .menu .item .icon {
-  float: none;
-  margin: 0em 0.75em 0em 0em;
-}
-.ui.menu .dropdown .menu .item:before {
-  display: none;
-}
 
 /* Secondary Menu Dropdown */
 .ui.secondary.menu > .menu > .active.dropdown.item {
@@ -513,6 +474,7 @@
   margin: @labelAndIconMargin;
 }
 
+
 /*--- Border ---*/
 .ui.vertical.menu .item:before {
   position: absolute;
@@ -718,6 +680,12 @@
   margin: 1px 0px 0px 1px;
 }
 
+/* Coupling with accordion */
+.ui.accordion.menu .item .title > i.dropdown.icon {
+  float: @dropdownIconFloat;
+  margin-left: @dropdownIconDistance;
+}
+
 
 /*--------------
    Pagination

src/definitions/elements/icon.less

@@ -83,6 +83,7 @@ i.icon {
 ---------------*/
 
 i.icon.loading {
+  height: 1em;
   animation: icon-loading @loadingDuration linear infinite;
 }
 @keyframes icon-loading {

src/definitions/modules/accordion.less

@@ -60,6 +60,7 @@
   height: @iconHeight;
   margin: @iconMargin;
   transition: @iconTransition;
+  vertical-align: @iconVerticalAlign;
 }
 
 

src/definitions/modules/dropdown.js

@@ -72,6 +72,7 @@ $.fn.dropdown = function(parameters) {
             module.bind.touchEvents();
           }
           module.bind.mouseEvents();
+          module.bind.keyboardEvents();
           module.instantiate();
         },
 
@@ -95,6 +96,15 @@ $.fn.dropdown = function(parameters) {
         },
 
         bind: {
+          keyboardEvents: function() {
+            module.debug('Binding keyboard events');
+            $module
+              .on('keydown' + eventNamespace, module.handleKeyboard)
+            ;
+            $module
+              .on('focus' + eventNamespace, module.show)
+            ;
+          },
           touchEvents: function() {
             module.debug('Touch device detected binding touch events');
             $module
@@ -158,6 +168,69 @@ $.fn.dropdown = function(parameters) {
           }
         },
 
+        handleKeyboard: function(event) {
+          var
+            $selectedItem = $item.filter('.' + className.selected),
+            pressedKey    = event.which,
+            keys          = {
+              enter     : 13,
+              escape    : 27,
+              upArrow   : 38,
+              downArrow : 40
+            },
+            selectedClass   = className.selected,
+            currentIndex    = $item.index( $selectedItem ),
+            hasSelectedItem = ($selectedItem.size() > 0),
+            resultSize      = $item.size(),
+            newIndex
+          ;
+          // close shortcuts
+          if(pressedKey == keys.escape) {
+            module.verbose('Escape key pressed, closing dropdown');
+            module.hide();
+          }
+          // result shortcuts
+          if(module.is.visible()) {
+            if(pressedKey == keys.enter && hasSelectedItem) {
+              module.verbose('Enter key pressed, choosing selected item');
+              $.proxy(module.event.item.click, $item.filter('.' + selectedClass) )(event);
+              event.preventDefault();
+              return false;
+            }
+            else if(pressedKey == keys.upArrow) {
+              module.verbose('Up key pressed, changing active item');
+              newIndex = (currentIndex - 1 < 0)
+                ? currentIndex
+                : currentIndex - 1
+              ;
+              $item
+                .removeClass(selectedClass)
+                .eq(newIndex)
+                  .addClass(selectedClass)
+              ;
+              event.preventDefault();
+            }
+            else if(pressedKey == keys.downArrow) {
+              module.verbose('Down key pressed, changing active item');
+              newIndex = (currentIndex + 1 >= resultSize)
+                ? currentIndex
+                : currentIndex + 1
+              ;
+              $item
+                .removeClass(selectedClass)
+                .eq(newIndex)
+                  .addClass(selectedClass)
+              ;
+              event.preventDefault();
+            }
+          }
+          else {
+            if(pressedKey == keys.enter) {
+              module.show();
+            }
+          }
+        },
+
         event: {
           test: {
             toggle: function(event) {
@@ -533,8 +606,8 @@ $.fn.dropdown = function(parameters) {
           },
           animated: function($subMenu) {
             return ($subMenu)
-              ? $subMenu.is(':animated') || $subMenu.transition('is animating')
-              : $menu.is(':animated') || $menu.transition('is animating')
+              ? $subMenu.is(':animated') || $subMenu.transition && $subMenu.transition('is animating')
+              : $menu.is(':animated') || $menu.transition && $menu.transition('is animating')
             ;
           },
           visible: function($subMenu) {
@@ -955,6 +1028,7 @@ $.fn.dropdown.settings = {
     placeholder : 'default',
     disabled    : 'disabled',
     visible     : 'visible',
+    selected    : 'selected',
     selection   : 'selection'
   }
 

src/definitions/modules/dropdown.less

@@ -199,6 +199,10 @@
   /* Matches selection dropdown height to input height */
   border-top: 1px solid transparent;
 }
+.ui.selection.dropdown.active {
+  transform: rotateZ(0deg);
+  z-index: 10;
+}
 .ui.selection.dropdown select {
   display: none;
 }

src/themes/packages/default/collections/menu.variables

@@ -84,7 +84,6 @@
 @headerBackground: rgba(0, 0, 0, 0.04);
 @headerWeight: bold;
 @headerTextTransform: normal;
-@headerFontSize: 1rem;
 
 /*--------------
     Couplings
@@ -127,7 +126,11 @@
 @dropdownBackground: #FFFFFF;
 @dropdownMenuOffset: 1px;
 @dropdownPointingDistance: 0.75em;
+
 @dropdownTextColor: @textColor;
+@dropdownTextColorHover: @darkTextColor;
+@dropdownIconMargin: 0em 0em 0em 1em;
+
 @dropdownBoxShadow: 0 1px 1px 1px @solidBorderColor;
 @dropdownVerticalBoxShadow: 0 0px 1px 1px @solidBorderColor;
 

src/themes/packages/default/modules/accordion.variables

@@ -21,6 +21,7 @@
   transform 0.2s ease,
   opacity 0.2s ease
 ;
+@iconVerticalAlign: top;
 
 /* Child Accordion */
 @childAccordionMargin: 1em 0em 0em;

src/themes/packages/default/modules/dropdown.variables

@@ -20,6 +20,7 @@
 /* Icon */
 @dropdownIconMargin: 0em 0em 0em 1em;
 
+/* Sub Menu Pointer Icon */
 @dropdownSubMenuIconFloat: right;
 @dropdownSubMenuIconMargin: 0em 0em 0em 0.5em;
 
@@ -74,7 +75,7 @@
 @selectionBackground: @white;
 @selectionDisplay: inline-block;
 @selectionVerticalPadding: 0.65em;
-@selectionHorizontalPadding: 1em;
+@selectionHorizontalPadding: 1.1em;
 @selectionTextColor: @textColor;
 @selectionBoxShadow: 0px 0px 0px 1px @borderColor;
 @selectionBorderRadius: @borderRadius;