fix(dropdown): long/short variants were not working anymore

lubber-de · web-flow · commit fa62639400cc · 2024-04-23T21:05:59.000+02:00
#2883 broke specificity when a (very) long/short variant was used for a search selection dropdown (a pure selection dropdown was not affected
diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -468,84 +468,84 @@ select.ui.dropdown {
 
     @media only screen and (max-width: @largestMobileScreen) {
         & when (@variationDropdownShort) {
-            .ui.selection.dropdown.short .menu {
+            .ui.ui.selection.dropdown.short .menu {
                 max-height: @selectionMobileMaxMenuHeight * 0.75;
             }
-            .ui.selection.dropdown[class*="very short"] .menu {
+            .ui.ui.selection.dropdown[class*="very short"] .menu {
                 max-height: @selectionMobileMaxMenuHeight * 0.5;
             }
         }
         .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionMobileMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
-            .ui.selection.dropdown.long .menu {
+            .ui.ui.selection.dropdown.long .menu {
                 max-height: @selectionMobileMaxMenuHeight * 2;
             }
-            .ui.selection.dropdown[class*="very long"] .menu {
+            .ui.ui.selection.dropdown[class*="very long"] .menu {
                 max-height: @selectionMobileMaxMenuHeight * 3;
             }
         }
     }
     @media only screen and (min-width: @tabletBreakpoint) {
         & when (@variationDropdownShort) {
-            .ui.selection.dropdown.short .menu {
+            .ui.ui.selection.dropdown.short .menu {
                 max-height: @selectionTabletMaxMenuHeight * 0.75;
             }
-            .ui.selection.dropdown[class*="very short"] .menu {
+            .ui.ui.selection.dropdown[class*="very short"] .menu {
                 max-height: @selectionTabletMaxMenuHeight * 0.5;
             }
         }
         .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionTabletMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
-            .ui.selection.dropdown.long .menu {
+            .ui.ui.selection.dropdown.long .menu {
                 max-height: @selectionTabletMaxMenuHeight * 2;
             }
-            .ui.selection.dropdown[class*="very long"] .menu {
+            .ui.ui.selection.dropdown[class*="very long"] .menu {
                 max-height: @selectionTabletMaxMenuHeight * 3;
             }
         }
     }
     @media only screen and (min-width: @computerBreakpoint) {
         & when (@variationDropdownShort) {
-            .ui.selection.dropdown.short .menu {
+            .ui.ui.selection.dropdown.short .menu {
                 max-height: @selectionComputerMaxMenuHeight * 0.75;
             }
-            .ui.selection.dropdown[class*="very short"] .menu {
+            .ui.ui.selection.dropdown[class*="very short"] .menu {
                 max-height: @selectionComputerMaxMenuHeight * 0.5;
             }
         }
         .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionComputerMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
-            .ui.selection.dropdown.long .menu {
+            .ui.ui.selection.dropdown.long .menu {
                 max-height: @selectionComputerMaxMenuHeight * 2;
             }
-            .ui.selection.dropdown[class*="very long"] .menu {
+            .ui.ui.selection.dropdown[class*="very long"] .menu {
                 max-height: @selectionComputerMaxMenuHeight * 3;
             }
         }
     }
     @media only screen and (min-width: @widescreenMonitorBreakpoint) {
         & when (@variationDropdownShort) {
-            .ui.selection.dropdown.short .menu {
+            .ui.ui.selection.dropdown.short .menu {
                 max-height: @selectionWidescreenMaxMenuHeight * 0.75;
             }
-            .ui.selection.dropdown[class*="very short"] .menu {
+            .ui.ui.selection.dropdown[class*="very short"] .menu {
                 max-height: @selectionWidescreenMaxMenuHeight * 0.5;
             }
         }
         .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionWidescreenMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
-            .ui.selection.dropdown.long .menu {
+            .ui.ui.selection.dropdown.long .menu {
                 max-height: @selectionWidescreenMaxMenuHeight * 2;
             }
-            .ui.selection.dropdown[class*="very long"] .menu {
+            .ui.ui.selection.dropdown[class*="very long"] .menu {
                 max-height: @selectionWidescreenMaxMenuHeight * 3;
             }
         }

Original file line number	Diff line number	Diff line change
`@@ -468,84 +468,84 @@ select.ui.dropdown {`
`468`	`468`
`469`	`469`	`@media only screen and (max-width: @largestMobileScreen) {`
`470`	`470`	`& when (@variationDropdownShort) {`
`471`		`- .ui.selection.dropdown.short .menu {`
	`471`	`+ .ui.ui.selection.dropdown.short .menu {`
`472`	`472`	`max-height: @selectionMobileMaxMenuHeight * 0.75;`
`473`	`473`	`}`
`474`		`- .ui.selection.dropdown[class*="very short"] .menu {`
	`474`	`+ .ui.ui.selection.dropdown[class*="very short"] .menu {`
`475`	`475`	`max-height: @selectionMobileMaxMenuHeight * 0.5;`
`476`	`476`	`}`
`477`	`477`	`}`
`478`	`478`	`.ui.selection.dropdown:not(.unlimited) .menu {`
`479`	`479`	`max-height: @selectionMobileMaxMenuHeight;`
`480`	`480`	`}`
`481`	`481`	`& when (@variationDropdownLong) {`
`482`		`- .ui.selection.dropdown.long .menu {`
	`482`	`+ .ui.ui.selection.dropdown.long .menu {`
`483`	`483`	`max-height: @selectionMobileMaxMenuHeight * 2;`
`484`	`484`	`}`
`485`		`- .ui.selection.dropdown[class*="very long"] .menu {`
	`485`	`+ .ui.ui.selection.dropdown[class*="very long"] .menu {`
`486`	`486`	`max-height: @selectionMobileMaxMenuHeight * 3;`
`487`	`487`	`}`
`488`	`488`	`}`
`489`	`489`	`}`
`490`	`490`	`@media only screen and (min-width: @tabletBreakpoint) {`
`491`	`491`	`& when (@variationDropdownShort) {`
`492`		`- .ui.selection.dropdown.short .menu {`
	`492`	`+ .ui.ui.selection.dropdown.short .menu {`
`493`	`493`	`max-height: @selectionTabletMaxMenuHeight * 0.75;`
`494`	`494`	`}`
`495`		`- .ui.selection.dropdown[class*="very short"] .menu {`
	`495`	`+ .ui.ui.selection.dropdown[class*="very short"] .menu {`
`496`	`496`	`max-height: @selectionTabletMaxMenuHeight * 0.5;`
`497`	`497`	`}`
`498`	`498`	`}`
`499`	`499`	`.ui.selection.dropdown:not(.unlimited) .menu {`
`500`	`500`	`max-height: @selectionTabletMaxMenuHeight;`
`501`	`501`	`}`
`502`	`502`	`& when (@variationDropdownLong) {`
`503`		`- .ui.selection.dropdown.long .menu {`
	`503`	`+ .ui.ui.selection.dropdown.long .menu {`
`504`	`504`	`max-height: @selectionTabletMaxMenuHeight * 2;`
`505`	`505`	`}`
`506`		`- .ui.selection.dropdown[class*="very long"] .menu {`
	`506`	`+ .ui.ui.selection.dropdown[class*="very long"] .menu {`
`507`	`507`	`max-height: @selectionTabletMaxMenuHeight * 3;`
`508`	`508`	`}`
`509`	`509`	`}`
`510`	`510`	`}`
`511`	`511`	`@media only screen and (min-width: @computerBreakpoint) {`
`512`	`512`	`& when (@variationDropdownShort) {`
`513`		`- .ui.selection.dropdown.short .menu {`
	`513`	`+ .ui.ui.selection.dropdown.short .menu {`
`514`	`514`	`max-height: @selectionComputerMaxMenuHeight * 0.75;`
`515`	`515`	`}`
`516`		`- .ui.selection.dropdown[class*="very short"] .menu {`
	`516`	`+ .ui.ui.selection.dropdown[class*="very short"] .menu {`
`517`	`517`	`max-height: @selectionComputerMaxMenuHeight * 0.5;`
`518`	`518`	`}`
`519`	`519`	`}`
`520`	`520`	`.ui.selection.dropdown:not(.unlimited) .menu {`
`521`	`521`	`max-height: @selectionComputerMaxMenuHeight;`
`522`	`522`	`}`
`523`	`523`	`& when (@variationDropdownLong) {`
`524`		`- .ui.selection.dropdown.long .menu {`
	`524`	`+ .ui.ui.selection.dropdown.long .menu {`
`525`	`525`	`max-height: @selectionComputerMaxMenuHeight * 2;`
`526`	`526`	`}`
`527`		`- .ui.selection.dropdown[class*="very long"] .menu {`
	`527`	`+ .ui.ui.selection.dropdown[class*="very long"] .menu {`
`528`	`528`	`max-height: @selectionComputerMaxMenuHeight * 3;`
`529`	`529`	`}`
`530`	`530`	`}`
`531`	`531`	`}`
`532`	`532`	`@media only screen and (min-width: @widescreenMonitorBreakpoint) {`
`533`	`533`	`& when (@variationDropdownShort) {`
`534`		`- .ui.selection.dropdown.short .menu {`
	`534`	`+ .ui.ui.selection.dropdown.short .menu {`
`535`	`535`	`max-height: @selectionWidescreenMaxMenuHeight * 0.75;`
`536`	`536`	`}`
`537`		`- .ui.selection.dropdown[class*="very short"] .menu {`
	`537`	`+ .ui.ui.selection.dropdown[class*="very short"] .menu {`
`538`	`538`	`max-height: @selectionWidescreenMaxMenuHeight * 0.5;`
`539`	`539`	`}`
`540`	`540`	`}`
`541`	`541`	`.ui.selection.dropdown:not(.unlimited) .menu {`
`542`	`542`	`max-height: @selectionWidescreenMaxMenuHeight;`
`543`	`543`	`}`
`544`	`544`	`& when (@variationDropdownLong) {`
`545`		`- .ui.selection.dropdown.long .menu {`
	`545`	`+ .ui.ui.selection.dropdown.long .menu {`
`546`	`546`	`max-height: @selectionWidescreenMaxMenuHeight * 2;`
`547`	`547`	`}`
`548`		`- .ui.selection.dropdown[class*="very long"] .menu {`
	`548`	`+ .ui.ui.selection.dropdown[class*="very long"] .menu {`
`549`	`549`	`max-height: @selectionWidescreenMaxMenuHeight * 3;`
`550`	`550`	`}`
`551`	`551`	`}`