fix(dropdown): very short menu had wrong order specificity

The very short size variation did not work. It was always overridden by the short variation because both share same specificity, thus the declaration order matters.
fomantic · Sep 3, 2020 · 891f6e6 · 891f6e6
1 parent e1a8393
commit 891f6e6
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -448,12 +448,12 @@ select.ui.dropdown {
 
   @media only screen and (max-width : @largestMobileScreen) {
     & when (@variationDropdownShort) {
-      .ui.selection.dropdown[class*="very short"] .menu {
-        max-height: @selectionMobileMaxMenuHeight * 0.5;
-      }
       .ui.selection.dropdown.short .menu {
         max-height: @selectionMobileMaxMenuHeight * 0.75;
       }
+      .ui.selection.dropdown[class*="very short"] .menu {
+        max-height: @selectionMobileMaxMenuHeight * 0.5;
+      }
     }
     .ui.selection.dropdown .menu {
       max-height: @selectionMobileMaxMenuHeight;
@@ -469,12 +469,12 @@ select.ui.dropdown {
   }
   @media only screen and (min-width: @tabletBreakpoint) {
     & when (@variationDropdownShort) {
-      .ui.selection.dropdown[class*="very short"] .menu {
-        max-height: @selectionTabletMaxMenuHeight * 0.5;
-      }
       .ui.selection.dropdown.short .menu {
         max-height: @selectionTabletMaxMenuHeight * 0.75;
       }
+      .ui.selection.dropdown[class*="very short"] .menu {
+        max-height: @selectionTabletMaxMenuHeight * 0.5;
+      }
     }
     .ui.selection.dropdown .menu {
       max-height: @selectionTabletMaxMenuHeight;
@@ -490,12 +490,12 @@ select.ui.dropdown {
   }
   @media only screen and (min-width: @computerBreakpoint) {
     & when (@variationDropdownShort) {
-      .ui.selection.dropdown[class*="very short"] .menu {
-        max-height: @selectionComputerMaxMenuHeight * 0.5;
-      }
       .ui.selection.dropdown.short .menu {
         max-height: @selectionComputerMaxMenuHeight * 0.75;
       }
+      .ui.selection.dropdown[class*="very short"] .menu {
+        max-height: @selectionComputerMaxMenuHeight * 0.5;
+      }
     }
     .ui.selection.dropdown .menu {
       max-height: @selectionComputerMaxMenuHeight;
@@ -511,12 +511,12 @@ select.ui.dropdown {
   }
   @media only screen and (min-width: @widescreenMonitorBreakpoint) {
     & when (@variationDropdownShort) {
-      .ui.selection.dropdown[class*="very short"] .menu {
-        max-height: @selectionWidescreenMaxMenuHeight * 0.5;
-      }
       .ui.selection.dropdown.short .menu {
         max-height: @selectionWidescreenMaxMenuHeight * 0.75;
       }
+      .ui.selection.dropdown[class*="very short"] .menu {
+        max-height: @selectionWidescreenMaxMenuHeight * 0.5;
+      }
     }
     .ui.selection.dropdown .menu {
       max-height: @selectionWidescreenMaxMenuHeight;