From c0f3c4ff01d8163c14a345d02de37f44011ef40a Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Tue, 28 Jul 2015 12:24:11 -0400
Subject: [PATCH] Adjust appearance of labeled icon menu

---
 RELEASE-NOTES.md                              |  4 ++
 src/definitions/collections/menu.less         | 44 ++++++++++---------
 src/themes/default/collections/menu.variables |  2 +-
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index 800e5918f..ff4b4b726 100644
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -2,6 +2,10 @@
 
 ### Version 2.x.x - July 23, 2015
 
+**[Enhancements](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)**
+
+- **Menu** - Appearance of `labeled icon menu` has been modified. Horizontal menus now have icons above text, and icons are slightly larger than before.
+
 **[Reported Bugs](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)**
 - **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
diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index 46dbc5883..3b5ad0064 100755
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@@ -1081,35 +1081,38 @@ Floated Menu / Item
     Icon Only
 ---------------*/
 
+/* Vertical Menu */
+.ui.vertical.icon.menu {
+  display: inline-block;
+  width: auto;
+}
+
+/* Item */
 .ui.icon.menu .item {
   height: auto;
   text-align: @iconMenuTextAlign;
   color: @iconMenuItemColor;
 }
-.ui.icon.menu .item > .icon {
-  margin: 0em;
-  opacity: 1;
-}
+
+/* Icon */
 .ui.vertical.icon.menu .item > .icon:not(.dropdown) {
   display: block;
+  opacity: 1;
   margin: 0em auto;
   float: none;
 }
+
+/* Icon Gylph */
 .ui.icon.menu .icon:before {
   opacity: 1;
 }
 
-/* Item Icon Only */
+/* (x) Item Icon */
 .ui.menu .icon.item > .icon {
   width: auto;
   margin: 0em auto;
 }
 
-/* Vertical */
-.ui.vertical.icon.menu {
-  width: auto;
-}
-
 /* Inverted */
 .ui.inverted.icon.menu .item {
   color: @iconMenuInvertedItemColor;
@@ -1119,31 +1122,30 @@ Floated Menu / Item
    Labeled Icon
 ---------------*/
 
+/* Menu */
 .ui.labeled.icon.menu {
   text-align: center;
 }
-.ui.fluid.labeled.icon.menu .item {
-  min-width: 0em;
-}
 
-.ui.labeled.icon.menu .item {
+/* Item */
+.ui.labeled.icon.menu  .item {
   min-width: @labeledIconMinWidth;
-}
-.ui.labeled.icon.menu:not(.vertical) .item {
-  padding-left: @labeledIconItemHorizontalPadding;
-  padding-right: @labeledIconItemHorizontalPadding;
+  flex-direction: column;
 }
 
+/* Icon */
 .ui.labeled.icon.menu .item > .icon:not(.dropdown) {
   height: 1em;
   display: block;
   font-size: @labeledIconSize !important;
-  margin: 0em @labeledIconTextMargin 0em 0em !important;
-}
-.ui.vertical.labeled.icon.menu .item > .icon:not(.dropdown) {
   margin: 0em auto @labeledIconTextMargin !important;
 }
 
+/* Fluid */
+.ui.fluid.labeled.icon.menu > .item {
+  min-width: 0em;
+}
+
 
 /*******************************
            Variations
diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables
index 22cdbbe37..e57d34d53 100644
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@@ -325,7 +325,7 @@
 
 /* Labeled Icon */
 @labeledIconItemHorizontalPadding: @relativeMassive;
-@labeledIconSize: @relativeHuge;
+@labeledIconSize: @relativeMassive;
 @labeledIconMinWidth: 6em;
 @labeledIconTextMargin: 0.5rem;