diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index ef0abdcda..a984c4c7b 100644 --- a/RELEASE-NOTES.md +++ b/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 diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 87f1869e9..d750497e3 100755 --- a/src/definitions/modules/dropdown.less +++ b/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(); diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index b492c8995..66e854316 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/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; \ No newline at end of file +@pointingMenuBorderRadius: @borderRadius; +@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px @menuBorderWidth @menuBorderColor; + +/* Pointing Upward */ +@pointingUpwardMenuBorderRadius: @borderRadius; +@pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0px @menuBorderWidth @menuBorderColor; \ No newline at end of file