From 1f745948769ccb0d18bd6e03a9c588160b533541 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jacklukic@gmail.com>
Date: Mon, 17 Aug 2015 19:42:39 -0400
Subject: [PATCH] #2862 adds variables, and fixes spacing for sub menu in
 secondary menu and text menu

---
 RELEASE-NOTES.md                              |  1 +
 src/definitions/collections/menu.less         | 23 +++++++++++++++----
 src/themes/default/collections/menu.variables | 11 ++++++++-
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index 1f957fc5d..13da4df07 100644
--- a/RELEASE-NOTES.md
+++ b/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
diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index d64c25c9d..f17cfa582 100755
--- a/src/definitions/collections/menu.less
+++ b/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;
diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables
index 2356606be..2a3b43397 100644
--- a/src/themes/default/collections/menu.variables
+++ b/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;