diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 36d0e0520a..2912de588d 100755 --- a/src/definitions/modules/dropdown.less +++ b/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; + } + } } } diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index ddc1ba36a4..139d6d645a 100755 --- a/src/themes/default/modules/dropdown.variables +++ b/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;