fix(dropdown): non selection and button upward variant border radius

A dropdown menu in a non-selection dropdown did not have a rounded bottom border radius (this is only needed for the selection variant) Tagged as breaking change, because i changed the variable name (it was used only once and is now dedicated to the selection variant) Fixed dropdown button as well The dropdown button was also not correctly styled (not even the downward version)
fomantic · Aug 18, 2021 · 507e60a · 507e60a
1 parent 1e91d10
commit 507e60a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 33 deletions.
diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -367,9 +367,15 @@
   .ui.dropdown.icon.button > .dropdown.icon {
     margin: 0;
   }
-  .ui.button.dropdown .menu {
+  .ui.dropdown.button .menu {
     min-width: 100%;
   }
+  .ui.dropdown.button:not(.pointing):not(.floating).active {
+    border-radius: @borderRadius @borderRadius 0 0;
+  }
+  .ui.dropdown.button:not(.pointing):not(.floating) > .menu {
+    border-radius: 0 0 @borderRadius @borderRadius;
+  }
 }
 
 
@@ -1228,7 +1234,6 @@ select.ui.dropdown {
     top: auto;
     bottom: 100%;
     box-shadow: @upwardMenuBoxShadow;
-    border-radius: @upwardMenuBorderRadius;
   }
 
   /* Upward Sub Menu */
@@ -1237,42 +1242,54 @@ select.ui.dropdown {
     bottom: 0 !important;
   }
 
-  /* Active Upward */
-  .ui.simple.upward.active.dropdown,
-  .ui.simple.upward.dropdown:hover {
-    border-radius: @borderRadius @borderRadius 0 0 !important;
-  }
-  .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
-    border-radius: @borderRadius @borderRadius 0 0;
+  & when (@variationDropdownSimple) {
+    /* Active Upward */
+    .ui.simple.upward.active.dropdown,
+    .ui.simple.upward.dropdown:hover {
+      border-radius: @borderRadius @borderRadius 0 0 !important;
+    }
   }
 
-  /* Selection */
-  .ui.upward.selection.dropdown .menu {
-    border-top-width: @menuBorderWidth !important;
-    border-bottom-width: 0 !important;
-    box-shadow: @upwardSelectionMenuBoxShadow;
-  }
-  .ui.upward.selection.dropdown:hover {
-    box-shadow: @upwardSelectionHoverBoxShadow;
+  & when (@variationDropdownButton) {
+    /* Button */
+    .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
+      border-radius: 0 0 @borderRadius @borderRadius;
+    }
+    .ui.upward.dropdown.button:not(.pointing):not(.floating) > .menu {
+      border-radius: @borderRadius @borderRadius 0 0;
+    }
   }
 
-  /* Active Upward */
-  .ui.active.upward.selection.dropdown {
-    border-radius: @upwardSelectionVisibleBorderRadius !important;
-  }
+  & when (@variationDropdownSelection) {
+    /* Selection */
+    .ui.upward.selection.dropdown .menu {
+      border-top-width: @menuBorderWidth !important;
+      border-bottom-width: 0 !important;
+      box-shadow: @upwardSelectionMenuBoxShadow;
+      border-radius: @upwardSelectionMenuBorderRadius;
+    }
+    .ui.upward.selection.dropdown:hover {
+      box-shadow: @upwardSelectionHoverBoxShadow;
+    }
 
-  /* Visible Upward */
-  .ui.upward.selection.dropdown.visible {
-    box-shadow: @upwardSelectionVisibleBoxShadow;
-    border-radius: @upwardSelectionVisibleBorderRadius !important;
-  }
+    /* Active Upward */
+    .ui.active.upward.selection.dropdown {
+      border-radius: @upwardSelectionVisibleBorderRadius !important;
+    }
 
-  /* Visible Hover Upward */
-  .ui.upward.active.selection.dropdown:hover {
-    box-shadow: @upwardSelectionActiveHoverBoxShadow;
-  }
-  .ui.upward.active.selection.dropdown:hover .menu {
-    box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
+    /* Visible Upward */
+    .ui.upward.selection.dropdown.visible {
+      box-shadow: @upwardSelectionVisibleBoxShadow;
+      border-radius: @upwardSelectionVisibleBorderRadius !important;
+    }
+
+    /* Visible Hover Upward */
+    .ui.upward.active.selection.dropdown:hover {
+      box-shadow: @upwardSelectionActiveHoverBoxShadow;
+    }
+    .ui.upward.active.selection.dropdown:hover .menu {
+      box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
+    }
   }
 }
 

diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables
@@ -345,7 +345,7 @@
 @upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius;
 @upwardMenuBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
 @upwardSelectionMenuBoxShadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
-@upwardMenuBorderRadius: @borderRadius @borderRadius 0 0;
+@upwardSelectionMenuBorderRadius: @borderRadius @borderRadius 0 0;
 @upwardSelectionHoverBoxShadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
 @upwardSelectionVisibleBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
 @upwardSelectionActiveHoverBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);