Fix #2733 pointing dropdown incorrectly overwrites upward rules

RELEASE-NOTES.md

@@ -7,6 +7,7 @@
 - **Breadcrumb** - Breadcrumb no longer receives vertical spacing by default. This may often cause vertical alignment issues when displayed next to other `inline-block` content.
 - **Button** - Added `labeled button` variation for display a count next to a button.
 - **Divider** - Vertical divider can now be used multiple times in a single column row (not just 50/50 split). #2808
+- **Dropdown** - Pointing dropdown (dropdown with arrows) now support `upward`, and will automatically move pointer arrows when appearing upward #2733
 - **Input** - Added `disabled` state for inputs #2694
 - **Label** - Added `basic` label variation, useful for item counts
 - **Menu** - Added new `tabular` menu types, `right tabular`, `bottom tabular`, added many new `tabular` menu variables for customizing

src/definitions/modules/dropdown.less

@@ -1314,4 +1314,21 @@ select.ui.dropdown {
   right: @pointingArrowDistanceFromEdge;
 }
 
+/* Upward pointing */
+.ui.upward.pointing.dropdown > .menu,
+.ui.upward.top.pointing.dropdown > .menu {
+  top: auto;
+  bottom: 100%;
+  margin: 0em 0em @pointingMenuDistance;
+  border-radius: @pointingUpwardMenuBorderRadius;
+}
+.ui.upward.pointing.dropdown > .menu:after,
+.ui.upward.top.pointing.dropdown > .menu:after {
+  top: 100%;
+  bottom: auto;
+  box-shadow: @pointingUpwardArrowBoxShadow;
+  margin: @pointingArrowOffset 0em 0em;
+}
+
+
 .loadUIOverrides();

src/themes/default/modules/dropdown.variables

@@ -358,8 +358,13 @@
 
 @pointingArrowBackground: @white;
 @pointingArrowZIndex: 2;
-@pointingArrowBoxShadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1);
+@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px @menuBorderWidth @menuBorderColor;
 @pointingArrowSize: @relative7px;
 
 @pointingMenuDistance: @mini;
-@pointingMenuBorderRadius: @borderRadius;
+@pointingMenuBorderRadius: @borderRadius;
+@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px @menuBorderWidth @menuBorderColor;
+
+/* Pointing Upward */
+@pointingUpwardMenuBorderRadius: @borderRadius;
+@pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0px @menuBorderWidth @menuBorderColor;