Skip to content

Commit

Permalink
fix(dropdown): support selection floating or pointing
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@lubber-de
lubber-de authored Aug 23, 2023
1 parent 4ae1b43 commit a8dd05e
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 23 deletions.
100 changes: 81 additions & 19 deletions src/definitions/modules/dropdown.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
--------------------- */
Expand Down Expand Up @@ -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;
}
}
}
}

Expand Down
11 changes: 7 additions & 4 deletions src/themes/default/modules/dropdown.variables
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@
@additionZIndex: @hoveredZIndex + 1;

/* Hovered */
@hoveredItemBackground: @transparentBlack;
@hoveredItemBackground: #f2f2f2;
@hoveredItemColor: @selectedTextColor;
@hoveredZIndex: @menuZIndex + 2;

Expand All @@ -311,7 +311,7 @@
@activeItemColor: @selectedTextColor;

/* Selected */
@selectedBackground: @subtleTransparentBlack;
@selectedBackground: #f7f7f7;
@selectedColor: @selectedTextColor;

/* Clearable */
Expand Down Expand Up @@ -382,6 +382,7 @@
@pointingArrowBackground: @white;
@pointingArrowZIndex: 2;
@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0 0 @menuBorderColor;
@pointingArrowBoxShadowSelection: -@menuBorderWidth -@menuBorderWidth 0 0 @selectionVisibleBorderColor;
@pointingArrowSize: @relative7px;

@pointingMenuDistance: @mini;
Expand All @@ -390,6 +391,7 @@
/* Pointing Upward */
@pointingUpwardMenuBorderRadius: @borderRadius;
@pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0 0 @menuBorderColor;
@pointingUpwardArrowBoxShadowSelection: @menuBorderWidth @menuBorderWidth 0 0 @selectionVisibleBorderColor;

/* Scrollhint */
@scrollhintWidth: 0.25em;
Expand All @@ -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;
Expand Down

0 comments on commit a8dd05e

Please sign in to comment.