#2862 adds variables, and fixes spacing for sub menu in secondary menu and text menu

RELEASE-NOTES.md

@@ -67,6 +67,7 @@
 - **Item** - Fixed `bottom aligned` not working in item due to incorrect flex value #2826
 - **List** - Lists can now be `right floated` or `left floated`
 - **Menu** - Fixed `(x) column` nested grid with alignment stacking vertically (wrong flex-direction) #2810
+- **Menu** - Sub menus now work correctly and are correctly spaced inside `secondary menu` and text menu` #2862
 - **Modal** - Fix autofocus setting in modal not working due to improper selector #2737
 - **Modal** - Increased `close` specificity, modal will now only close on `> .close` #2736
 - **Popup** - Fixes issue where variation would not be added to a pre-existing popup even if specified in javascript #26011

src/definitions/collections/menu.less

@@ -857,6 +857,15 @@ Floated Menu / Item
   box-shadow: none;
 }
 
+/* Sub Menu */
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
+  margin: @secondaryMenuSubMenuMargin;
+}
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
+  margin: @secondaryMenuSubMenuItemMargin;
+  padding: @secondaryMenuSubMenuItemPadding;
+}
+
 
 /*---------------------
    Secondary Vertical
@@ -1021,11 +1030,6 @@ Floated Menu / Item
   transition: @textMenuItemTransition;
 }
 
-/* Sub Menu */
-.ui.vertical.text.menu > .menu {
-  margin: @textMenuSubMenuMargin;
-}
-
 /* Border */
 .ui.text.menu .item:before,
 .ui.text.menu .menu .item:before {
@@ -1073,6 +1077,15 @@ Floated Menu / Item
   margin: @textVerticalMenuHeaderMargin;
 }
 
+/* Vertical Sub Menu */
+.ui.vertical.text.menu .item:not(.dropdown) > .menu {
+  margin: @textMenuSubMenuMargin;
+}
+.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
+  margin: @textMenuSubMenuItemMargin;
+  padding: @textMenuSubMenuItemPadding;
+}
+
 /*--- hover ---*/
 .ui.text.menu .item:hover {
   opacity: 1;

src/themes/default/collections/menu.variables

@@ -212,6 +212,8 @@
 @secondaryItemBackground: none;
 @secondaryItemSpacing: @relative5px;
 @secondaryItemMargin: 0em @secondaryItemSpacing;
+@secondaryItemVerticalPadding: @relativeMini;
+@secondaryItemHorizontalPadding: @relativeSmall;
 @secondaryItemPadding: @relativeMini @relativeSmall;
 @secondaryItemBorderRadius: @defaultBorderRadius;
 @secondaryItemTransition: color @defaultDuration @defaultEasing;
@@ -235,6 +237,11 @@
 @secondaryVerticalItemMargin: 0em 0em @secondaryItemVerticalSpacing;
 @secondaryVerticalItemBorderRadius: @defaultBorderRadius;
 
+@secondaryMenuSubMenuMargin: 0em -@secondaryItemHorizontalPadding;
+@secondaryMenuSubMenuItemMargin: 0em;
+@secondarySubMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent;
+@secondaryMenuSubMenuItemPadding: @relative7px @secondarySubMenuHorizontalPadding;
+
 /* Pointing */
 @secondaryPointingBorderWidth: 2px;
 @secondaryPointingBorderColor: @borderColor;
@@ -336,7 +343,7 @@
 
 
 /* Text */
-@textMenuItemSpacing: 0.5em;
+@textMenuItemSpacing: @relative7px;
 @textMenuMargin: @relativeMedium -(@textMenuItemSpacing);
 @textMenuItemColor: @mutedTextColor;
 @textMenuItemFontWeight: normal;
@@ -345,6 +352,8 @@
 @textMenuItemTransition: opacity @defaultDuration @defaultEasing;
 
 @textMenuSubMenuMargin: 0em;
+@textMenuSubMenuItemMargin: 0em;
+@textMenuSubMenuItemPadding: @relative7px 0em;
 
 @textMenuActiveItemFontWeight: normal;
 @textMenuActiveItemColor: @selectedTextColor;