Adds upward dropdown variation #1146

RELEASE-NOTES.md

@@ -8,6 +8,7 @@
 
 **Enhancements**
 - **Sidebar** - Having a sidebar visible on page load is now much simpler. You can include ``ui visible sidebar`` on page load to have a sidebar element appear on page load. To close call `$('.ui.sidebar').sidebar('hide')`
+- **Dropdown** - New `upward dropdown` variation, which opens its menu upward. Default animation now uses ``settings.transition = 'auto'` and determines direction of animation based on menu direction
 
 **Code / Build**
 - **Build** - `Dist/` files now set file permissions in build. `644` by default. Can adjust in `semantic.json` or during gulp install. You will need to run `npm install` to add the new gulp-chmod dependency *Thanks @PeterDaveHello*

src/definitions/modules/dropdown.js

@@ -1137,6 +1137,9 @@ $.fn.dropdown = function(parameters) {
           selection: function() {
             return $module.hasClass(className.selection);
           },
+          upward: function() {
+            return $module.hasClass(className.upward);
+          },
           visible: function($subMenu) {
             return ($subMenu)
               ? $subMenu.is(':visible')
@@ -1173,6 +1176,14 @@ $.fn.dropdown = function(parameters) {
             module.set.scrollPosition(module.get.activeItem(), true);
             module.verbose('Doing menu show animation', $currentMenu);
             if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) {
+
+              if(settings.transition == 'auto') {
+                settings.transition = module.is.upward()
+                  ? 'slide up'
+                  : 'slide down'
+                ;
+              }
+
               if(settings.transition == 'none') {
                 callback.call(element);
               }
@@ -1249,6 +1260,13 @@ $.fn.dropdown = function(parameters) {
             if( module.is.visible($currentMenu) || module.is.animating($currentMenu) ) {
               module.verbose('Doing menu hide animation', $currentMenu);
 
+              if(settings.transition == 'auto') {
+                settings.transition = module.is.upward()
+                  ? 'slide up'
+                  : 'slide down'
+                ;
+              }
+
               if(settings.transition == 'none') {
                 callback.call(element);
               }
@@ -1517,7 +1535,7 @@ $.fn.dropdown.settings = {
     touch  : 50
   },
 
-  transition : 'slide down',
+  transition : 'auto',
   duration   : 250,
 
   /* Callbacks */
@@ -1566,6 +1584,7 @@ $.fn.dropdown.settings = {
     search      : 'search',
     selected    : 'selected',
     selection   : 'selection',
+    upward      : 'upward',
     visible     : 'visible'
   }
 

src/definitions/modules/dropdown.less

@@ -730,10 +730,47 @@ select.ui.dropdown {
 
 
 /*--------------
-    Fly-Up
+     Upward
 ---------------*/
 
+.ui.upward.dropdown > .menu {
+  top: auto;
+  bottom: 100%;
+  box-shadow: @upwardMenuBoxShadow;
+  border-radius: @upwardMenuBorderRadius;
+}
+
+/* Active Upward */
+.ui.simple.upward.active.dropdown,
+.ui.simple.upward.dropdown:hover {
+  border-radius: @borderRadius @borderRadius 0em 0em !important;
+}
+.ui.upward.dropdown.button:not(.pointing):not(.floating).active,
+.ui.upward.dropdown.button:not(.pointing):not(.floating).visible {
+  border-radius: @borderRadius @borderRadius 0em 0em;
+}
 
+/* Selection */
+.ui.upward.selection.dropdown .menu {
+  border-top: 1px solid @selectionBorderColor !important;
+  border-bottom: none !important;
+}
+.ui.upward.selection.dropdown:hover {
+  box-shadow: @upwardSelectionHoverBoxShadow;
+}
+.ui.upward.selection.visible.dropdown:hover {
+  box-shadow: @upwardSelectionVisibleHoverBoxShadow;
+}
+.ui.active.upward.selection.dropdown,
+.ui.visible.upward.selection.dropdown {
+  border-radius: @upwardSelectionVisibleBorderRadius !important;
+}
+.ui.upward.selection.dropdown.visible {
+  box-shadow: @upwardSelectionVisibleBoxShadow;
+}
+.ui.upward.selection.visible.dropdown:hover .menu {
+  box-shadow: @upwardSelectionVisibleHoverMenuBoxShadow;
+}
 
 /*--------------
      Simple

src/themes/default/modules/dropdown.variables

@@ -32,7 +32,7 @@
 @menuTransition: none;
 
 @menuBorder: 1px solid @borderColor;
-@menuBoxShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
+@menuBoxShadow: 0px 1px 4px 0px @borderColor;
 @menuBorderRadius: 0em 0em @borderRadius @borderRadius;
 @menuTransition: opacity 0.2s ease;
 @menuZIndex: 11;
@@ -121,7 +121,8 @@
 @selectionTextColor: @textColor;
 
 @selectionBoxShadow: none;
-@selectionBorder: 1px solid @borderColor;
+@selectionBorderColor: @borderColor;
+@selectionBorder: 1px solid @selectionBorderColor;
 @selectionBorderRadius: @borderRadius;
 @selectionIconOpacity: 0.8;
 @selectionIconTransition: opacity 0.2s ease;
@@ -166,7 +167,7 @@
 @selectionVisibleHoverBorderColor: @selectedBorderColor;
 @selectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
 @selectionVisibleHoverMenuBorder: 1px solid @selectedBorderColor;
-@selectionVisibleHoverMenuBoxShadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
+@selectionVisibleHoverMenuBoxShadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
 
 @selectionVisibleConnectingBorder: 0em;
 @selectionVisibleIconOpacity: 1;
@@ -223,6 +224,15 @@
       Variations
 --------------------*/
 
+/* Upward */
+@upwardMenuBoxShadow: 0px -1px 4px 0px @borderColor;
+@upwardMenuBorderRadius: @borderRadius @borderRadius 0em 0em;
+@upwardSelectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
+@upwardSelectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
+@upwardSelectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
+@upwardSelectionVisibleHoverMenuBoxShadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.12);;
+@upwardSelectionVisibleBorderRadius:  @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius;
+
 /* Flyout Direction */
 @leftMenuDropdownIconFloat: left;
 @leftMenuDropdownIconMargin: @itemLineHeightOffset @itemElementDistance 0em 0em;