fix(dropdown): support selection floating or pointing

When pointing or floating was used

background color overlayed the border corners of first and last item if menu was not scrolled/overflowed
in combination with selection borders were missing
inverted upward pointing had wrong arrow direction
I also added a new unlimited variant which does not make the selection menu scrollable but shows all items at once instead. This is especially needed in combination with pointing. Otherwise the arrow wont be displayed as the arrow is part of the (overflowing) dom node.

Author: lubber-de

src/definitions/modules/dropdown.less

@@ -435,20 +435,24 @@ select.ui.dropdown {
     }
 
     /* Selection Menu */
-    .ui.selection.dropdown .menu {
+    .ui.selection.dropdown:not(.unlimited) .menu {
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
-        border-top-width: 0 !important;
+    }
+    .ui.selection.dropdown .menu {
         outline: none;
         margin: 0 -@menuBorderWidth;
         min-width: @menuMinWidth;
         width: @menuMinWidth;
-        border-radius: @selectionMenuBorderRadius;
         box-shadow: @selectionMenuBoxShadow;
         transition: @selectionMenuTransition;
     }
+    .ui.selection.dropdown:not(.pointing):not(.floating) .menu {
+        border-top-width: 0;
+        border-radius: @selectionMenuBorderRadius;
+    }
     .ui.selection.dropdown .menu::after,
     .ui.selection.dropdown .menu::before {
         display: none;
@@ -471,7 +475,7 @@ select.ui.dropdown {
                 max-height: @selectionMobileMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionMobileMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -492,7 +496,7 @@ select.ui.dropdown {
                 max-height: @selectionTabletMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionTabletMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -513,7 +517,7 @@ select.ui.dropdown {
                 max-height: @selectionComputerMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionComputerMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -534,7 +538,7 @@ select.ui.dropdown {
                 max-height: @selectionWidescreenMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionWidescreenMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -554,6 +558,12 @@ select.ui.dropdown {
         white-space: normal;
         word-wrap: normal;
     }
+    & when (@variationDropdownPointing) or (@variationDropdownFloating) {
+        .ui.selection.pointing.dropdown .menu > .item:first-child,
+        .ui.selection.floating.dropdown .menu > .item:first-child {
+            border-top: none;
+        }
+    }
 
     /* User Item */
     .ui.selection.dropdown .menu > .hidden.addition.item {
@@ -621,7 +631,7 @@ select.ui.dropdown {
     }
 
     /* Connecting Border */
-    .ui.active.selection.dropdown {
+    .ui.active.selection.dropdown:not(.pointing):not(.floating) {
         border-bottom-left-radius: @selectionVisibleConnectingBorder !important;
         border-bottom-right-radius: @selectionVisibleConnectingBorder !important;
     }
@@ -749,29 +759,29 @@ select.ui.dropdown {
     }
 
     /* Search Menu */
-    .ui.search.dropdown .menu {
+    .ui.search.dropdown:not(.unlimited) .menu {
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
     }
     @media only screen and (max-width: @largestMobileScreen) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchMobileMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @tabletBreakpoint) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchTabletMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @computerBreakpoint) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchComputerMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchWidescreenMaxMenuHeight;
         }
     }
@@ -1283,9 +1293,9 @@ select.ui.dropdown {
 
     & when (@variationDropdownSelection) {
         /* Selection */
-        .ui.ui.upward.selection.dropdown .menu {
-            border-top-width: @menuBorderWidth !important;
-            border-bottom-width: 0 !important;
+        .ui.ui.upward.selection.dropdown:not(.pointing):not(.floating) .menu {
+            border-top-width: @menuBorderWidth;
+            border-bottom-width: 0;
             box-shadow: @upwardSelectionMenuBoxShadow;
             border-radius: @upwardSelectionMenuBorderRadius;
         }
@@ -1294,21 +1304,23 @@ select.ui.dropdown {
         }
 
         /* Active Upward */
-        .ui.active.upward.selection.dropdown {
+        .ui.active.upward.selection.dropdown:not(.pointing):not(.floating) {
             border-radius: @upwardSelectionVisibleBorderRadius !important;
         }
 
         /* Visible Upward */
         .ui.upward.selection.dropdown.visible {
             box-shadow: @upwardSelectionVisibleBoxShadow;
-            border-radius: @upwardSelectionVisibleBorderRadius !important;
+            &:not(.pointing):not(.floating) {
+                border-radius: @upwardSelectionVisibleBorderRadius !important;
+            }
         }
 
         /* Visible Hover Upward */
         .ui.upward.active.selection.dropdown:hover {
             box-shadow: @upwardSelectionActiveHoverBoxShadow;
         }
-        .ui.upward.active.selection.dropdown:hover .menu {
+        .ui.upward.active.selection.dropdown:hover:not(.pointing):not(.floating) .menu {
             box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
         }
     }
@@ -1623,6 +1635,22 @@ select.ui.dropdown {
         z-index: @pointingArrowZIndex;
     }
 
+    @supports selector(:has(.f)) {
+        .ui.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,
+        .ui.upward.pointing.dropdown .menu:has(:last-child:hover)::after {
+            background: @hoveredItemBackground;
+        }
+        .ui.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,
+        .ui.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after {
+            background: @selectedBackground;
+        }
+    }
+
+    & when (@variationDropdownSelection) {
+        .ui.selection.pointing.dropdown > .menu::after {
+            box-shadow: @pointingArrowBoxShadowSelection;
+        }
+    }
     .ui.pointing.dropdown > .menu:not(.hidden)::after {
         top: @pointingArrowOffset;
         left: 50%;
@@ -1768,6 +1796,12 @@ select.ui.dropdown {
         margin: @pointingArrowOffset 0 0;
     }
 
+    & when (@variationDropdownSelection) {
+        .ui.selection.pointing.upward.dropdown .menu::after {
+            box-shadow: @pointingUpwardArrowBoxShadowSelection;
+        }
+    }
+
     /* Right Pointing Upward */
     .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
         top: auto !important;
@@ -1795,6 +1829,19 @@ select.ui.dropdown {
     }
 }
 
+& when (@variationDropdownPointing) or (@variationDropdownFloating) {
+    .ui.floating.dropdown .menu .item:first-child,
+    .ui.pointing.dropdown .menu .item:first-child {
+        border-top-left-radius: @borderRadius;
+        border-top-right-radius: @borderRadius;
+    }
+    .ui.floating.dropdown .menu .item:last-child,
+    .ui.pointing.dropdown .menu .item:last-child {
+        border-bottom-left-radius: @borderRadius;
+        border-bottom-right-radius: @borderRadius;
+    }
+}
+
 /* --------------------
         Sizes
 --------------------- */
@@ -2008,6 +2055,21 @@ select.ui.dropdown {
             background: @invertedPointingArrowBackground;
             box-shadow: @invertedPointingArrowBoxShadow;
         }
+        & when (@variationDropdownUpward) {
+            .ui.inverted.upward.pointing.dropdown > .menu::after {
+                box-shadow: @invertedPointingUpwardArrowBoxShadow;
+            }
+        }
+        @supports selector(:has(.f)) {
+            .ui.inverted.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,
+            .ui.inverted.upward.pointing.dropdown .menu:has(:last-child:hover)::after {
+                background: @invertedHoveredItemBackground;
+            }
+            .ui.inverted.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,
+            .ui.inverted.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after {
+                background: @invertedSelectedBackground;
+            }
+        }
     }
 }
 

src/themes/default/modules/dropdown.variables

@@ -292,7 +292,7 @@
 @additionZIndex: @hoveredZIndex + 1;
 
 /* Hovered */
-@hoveredItemBackground: @transparentBlack;
+@hoveredItemBackground: #f2f2f2;
 @hoveredItemColor: @selectedTextColor;
 @hoveredZIndex: @menuZIndex + 2;
 
@@ -311,7 +311,7 @@
 @activeItemColor: @selectedTextColor;
 
 /* Selected */
-@selectedBackground: @subtleTransparentBlack;
+@selectedBackground: #f7f7f7;
 @selectedColor: @selectedTextColor;
 
 /* Clearable */
@@ -382,6 +382,7 @@
 @pointingArrowBackground: @white;
 @pointingArrowZIndex: 2;
 @pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0 0 @menuBorderColor;
+@pointingArrowBoxShadowSelection: -@menuBorderWidth -@menuBorderWidth 0 0 @selectionVisibleBorderColor;
 @pointingArrowSize: @relative7px;
 
 @pointingMenuDistance: @mini;
@@ -390,6 +391,7 @@
 /* Pointing Upward */
 @pointingUpwardMenuBorderRadius: @borderRadius;
 @pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0 0 @menuBorderColor;
+@pointingUpwardArrowBoxShadowSelection: @menuBorderWidth @menuBorderWidth 0 0 @selectionVisibleBorderColor;
 
 /* Scrollhint */
 @scrollhintWidth: 0.25em;
@@ -416,15 +418,16 @@
 
 @invertedPointingArrowBackground: @black;
 @invertedPointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0 0 @invertedMenuBorderColor;
+@invertedPointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0 0 @invertedMenuBorderColor;
 
-@invertedHoveredItemBackground: @transparentWhite;
+@invertedHoveredItemBackground: #2d2e2f;
 @invertedHoveredItemColor: @invertedMenuColor;
 
 @invertedActiveItemBackground: transparent;
 @invertedActiveItemColor: @invertedMenuColor;
 @invertedActiveItemBoxShadow: none;
 
-@invertedSelectedBackground: @strongTransparentWhite;
+@invertedSelectedBackground: #3d3e3f;
 @invertedSelectedColor: @invertedMenuColor;
 
 @invertedMenuHeaderColor: @white;