From 5cc8f33aebf3d6b7209e695422bb00a231d5bc71 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Thu, 26 Feb 2015 17:36:12 -0500
Subject: [PATCH] Iteration on menu fixes with flex, along with some design
 changes to make menu more neutral Fixes: #1281, #1475

---
 src/definitions/collections/menu.less         | 176 +++++++++---------
 src/definitions/modules/transition.js         |   1 -
 src/themes/default/collections/menu.variables |  71 +++----
 src/themes/github/collections/menu.variables  |   6 +-
 4 files changed, 131 insertions(+), 123 deletions(-)

diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index 19ffb9d16..3fe6d9dc5 100755
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@@ -51,96 +51,70 @@
   margin-bottom: 0rem;
 }
 
+
+/*--------------
+    Sub-Menu
+---------------*/
+
 .ui.menu .menu {
   margin: 0em;
 }
 
-
 .ui.menu:not(.vertical) > *,
 .ui.menu:not(.vertical) > .menu {
   display: flex;
 }
-.ui.menu:not(.vertical) .item {
-  display: flex;
-  align-items: center;
-}
 
 /*--------------
-     Colors
+      Item
 ---------------*/
 
-/* Text Color */
-.ui.menu .item {
-  color: @menuTextColor;
-}
-.ui.menu .item .item {
-  color: @subMenuTextColor;
-}
-
-/* Hover */
-.ui.menu .item .menu a.item:hover,
-.ui.menu .item .menu .link.item:hover {
-  color: @darkTextColor;
+.ui.menu:not(.vertical) .item {
+  display: flex;
+  align-items: center;
 }
 
-
-/*--------------
-      Items
----------------*/
-
 .ui.menu .item {
   position: relative;
-  padding: @verticalPadding @horizontalPadding;
-  border-top: @borderSize solid transparent;
-
-  background: @itemBackground;
   vertical-align: middle;
   line-height: 1;
   text-decoration: none;
   box-sizing: border-box;
-
   -webkit-tap-highlight-color: transparent;
   user-select: none;
-  transition: @transition;
-}
 
+  background: @itemBackground;
+  padding: @itemVerticalPadding @itemHorizontalPadding;
+  color: @textColor;
+  transition: @itemTransition;
+}
 
-/* Floated Content */
 .ui.menu > .item:first-child {
   border-radius: @borderRadius 0px 0px @borderRadius;
 }
-.ui.menu:not(.vertical) .item.left,
-.ui.menu:not(.vertical) .menu.left {
-  display: flex;
-  margin-right: auto;
-}
-.ui.menu:not(.vertical) .item.right,
-.ui.menu:not(.vertical) .menu.right {
-  display: flex;
-  margin-left: auto;
-}
-
-
-/*--------------
-    Borders
----------------*/
 
+/* Border */
 .ui.menu .item:before {
   position: absolute;
   content: '';
   top: 0%;
   right: 0px;
-  width: @dividerSize;
   height: 100%;
+
+  width: @dividerSize;
   background: @dividerBackground;
 }
-.ui.menu > .right.menu:first-child:before {
-  display: none;
+
+/*--------------
+    Sub-Item
+---------------*/
+
+.ui.menu .item .menu .item {
+  color: @subMenuTextColor;
 }
-.ui.menu .menu.right .item:before,
-.ui.menu .item.right:before {
-  right: auto;
-  left: 0px;
+.ui.menu .item .menu a.item:hover,
+.ui.menu .item .menu .link.item:hover {
+  color: @darkTextColor;
 }
 
 /*--------------
@@ -176,7 +150,6 @@
   margin-left: @dropdownIconDistance;
 }
 
-
 /*--------------
      Button
 ---------------*/
@@ -222,8 +195,8 @@
 
 .ui.menu .header.item,
 .ui.vertical.menu .header.item {
-  background: @headerBackground;
   margin: 0em;
+  background: @headerBackground;
   text-transform: @headerTextTransform;
   font-weight: @headerWeight;
 }
@@ -235,9 +208,9 @@
 
 /* Dropdown */
 .ui.menu .ui.dropdown.item.visible {
-  background: @subtleTransparentBlack;
   border-bottom-right-radius: 0em;
   border-bottom-left-radius: 0em;
+  background: @subtleTransparentBlack;
 }
 .ui.menu .ui.dropdown.active {
   box-shadow: none;
@@ -245,36 +218,22 @@
 
 /* Menu Position */
 .ui.menu .dropdown.item .menu {
-  background: @dropdownBackground;
   left: 0px;
+  background: @dropdownBackground;
   margin: @dropdownMenuOffset 0px 0px;
   min-width: ~"calc(100% - 1px)";
   box-shadow: @dropdownBoxShadow;
 }
 .ui.menu:not(.secondary) .pointing.dropdown.item .menu {
-  margin-top: @dropdownPointingDistance;
   border-top-left-radius: 0em;
   border-top-right-radius: 0em;
+  margin-top: @dropdownPointingDistance;
 }
 .ui.menu .simple.dropdown.item .menu {
   margin: 0px !important;
 }
 
 
-/* Secondary Menu Dropdown */
-.ui.secondary.menu > .menu > .active.dropdown.item {
-  background-color: transparent;
-}
-.ui.secondary.menu .dropdown.item .menu {
-  left: 0px;
-  min-width: 100%;
-}
-
-/* Even Width Menu Dropdown */
-.ui.item.menu .dropdown .menu .item {
-  width: 100%;
-}
-
 /*--------------
      Labels
 ---------------*/
@@ -340,17 +299,17 @@
   background: @activeBackground;
   color: @selectedTextColor;
   font-weight: @activeFontWeight;
-  box-shadow: 0em @activeBorderSize 0em inset;
+  box-shadow: @activeBoxShadow;
 }
 .ui.menu .active.item > i.icon {
   opacity: @activeIconOpacity;
 }
 
-/* Vertical */
+/* Vertical Active */
 .ui.vertical.menu .active.item {
   background: @activeBackground;
   border-radius: 0em;
-  box-shadow: @activeBorderSize 0em 0em inset;
+  box-shadow: @activeVerticalBoxShadow;
 }
 .ui.vertical.menu > .active.item:first-child {
   border-radius: 0em @borderRadius 0em 0em;
@@ -395,6 +354,34 @@
              Types
 *******************************/
 
+/*--------------
+ Floated Content
+---------------*/
+
+/* Left Floated */
+.ui.menu:not(.vertical) .item.left,
+.ui.menu:not(.vertical) .menu.left {
+  display: flex;
+  margin-right: auto;
+}
+/* Right Floated */
+.ui.menu:not(.vertical) .item.right,
+.ui.menu:not(.vertical) .menu.right {
+  display: flex;
+  margin-left: auto;
+}
+
+/* Floated Borders */
+.ui.menu > .right.menu:first-child:before {
+  display: none;
+}
+.ui.menu .menu.right .item:before,
+.ui.menu .item.right:before {
+  right: auto;
+  left: 0px;
+}
+
+
 /*--------------
     Vertical
 ---------------*/
@@ -410,7 +397,6 @@
   display: block;
   background: @verticalItemBackground;
   border-top: none;
-  border-left: @borderSize solid transparent;
   border-right: none;
 }
 .ui.vertical.menu > .item:first-child {
@@ -480,7 +466,7 @@
 
 /*--- Sub Menu ---*/
 .ui.vertical.menu .item:not(.dropdown) > .menu {
-  margin: @subMenuMargin -@horizontalPadding 0em;
+  margin: @subMenuMargin -@itemHorizontalPadding 0em;
 }
 .ui.vertical.menu .item:not(.dropdown) > .menu > .item {
   background: none;
@@ -547,7 +533,7 @@
 
 /* Sub Menu Active */
 .ui.tiered.menu .sub.menu .active.item {
-  padding-top: @verticalPadding;
+  padding-top: @itemVerticalPadding;
   background: @tieredSubMenuActiveBackground;
   border-radius: 0;
   border-top: medium none;
@@ -675,7 +661,7 @@
 /* Active */
 .ui.pagination.menu .active.item {
   border-top: none;
-  padding-top: @verticalPadding;
+  padding-top: @itemVerticalPadding;
   background-color: @paginationActiveBackground;
   box-shadow: none;
 }
@@ -753,6 +739,15 @@
   background-color: @secondaryInvertedActiveBackground;
 }
 
+/* Dropdown */
+.ui.secondary.menu > .menu > .active.dropdown.item {
+  background-color: transparent;
+}
+.ui.secondary.menu .dropdown.item .menu {
+  left: 0px;
+  min-width: 100%;
+}
+
 
 /* Disable variations */
 .ui.secondary.item.menu > .item {
@@ -978,7 +973,7 @@
 }
 .ui.vertical.text.menu .item > i.icon {
   float: none;
-  margin: 0em @verticalPadding 0em 0em;
+  margin: 0em @itemVerticalPadding 0em 0em;
 }
 .ui.vertical.text.menu .header.item {
   margin: 0.8em 0em;
@@ -1058,6 +1053,7 @@
 /* Item Icon Only */
 .ui.menu .icon.item .icon {
   margin: 0em;
+  width: auto;
 }
 
 .ui.vertical.icon.menu {
@@ -1178,7 +1174,13 @@
   color: @invertedSubMenuColor;
 }
 .ui.inverted.menu .dropdown .menu .item {
-  color: @dropdownTextColor !important;
+  background: @dropdownItemBackground !important;
+  color: @dropdownItemColor !important;
+  transition: @dropdownItemTransition;
+}
+.ui.inverted.menu .dropdown .menu .item:hover {
+  background: @dropdownHoveredItemBackground !important;
+  color: @dropdownHoveredItemColor !important;
 }
 .ui.inverted.menu .item.disabled,
 .ui.inverted.menu .item.disabled:hover {
@@ -1359,14 +1361,14 @@
 .ui.horizontally.fitted.menu .item,
 .ui.horizontally.fitted.menu .item .menu .item,
 .ui.menu .horizontally.fitted.item {
-  padding-top: @verticalPadding;
-  padding-bottom: @verticalPadding;
+  padding-top: @itemVerticalPadding;
+  padding-bottom: @itemVerticalPadding;
 }
 .ui.vertically.fitted.menu .item,
 .ui.vertically.fitted.menu .item .menu .item,
 .ui.menu .vertically.fitted.item {
-  padding-left: @horizontalPadding;
-  padding-right: @horizontalPadding;
+  padding-left: @itemHorizontalPadding;
+  padding-right: @itemHorizontalPadding;
 }
 
 /*--------------
@@ -1453,6 +1455,10 @@
   width: 8.333%;
 }
 
+/* Dropdown */
+.ui.item.menu .dropdown .menu .item {
+  width: 100%;
+}
 
 /*--------------
      Fixed
diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js
index ace7b0034..abcb74001 100644
--- a/src/definitions/modules/transition.js
+++ b/src/definitions/modules/transition.js
@@ -392,7 +392,6 @@ $.fn.transition = function() {
               $module.removeAttr('class');
             }
             if(module.cache.style) {
-              console.log(module.cache.style);
               module.verbose('Restoring original style attribute', module.cache.style);
               $module.attr('style', module.cache.style);
             }
diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables
index eb91f1005..3112c6a67 100644
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@@ -15,28 +15,29 @@
       Collection
 --------------------*/
 
+/* Menu */
 @margin: 1em 0rem;
-@verticalPadding: 0.78571em;
-@horizontalPadding: 0.95em;
-
 @background: #FFFFFF;
 @itemBackground: none;
-
 @fontWeight: normal;
+@borderWidth: 1px;
 @boxShadow:
-  0px 0px 0px 1px @borderColor,
+  0px 0px 0px @borderWidth @borderColor,
   @subtleShadow
 ;
+@borderRadius: @defaultBorderRadius;
 
-@borderSize: 0em;
-
-@transition:
-  opacity 0.2s ease,
-  background 0.2s ease,
-  box-shadow 0.2s ease
+/* Menu Item */
+@itemVerticalPadding: @relativeSmall;
+@itemHorizontalPadding: @relativeLarge;
+@itemTransition:
+  opacity @transitionDuration @transitionEasing,
+  background @transitionDuration @transitionEasing,
+  box-shadow @transitionDuration @transitionEasing
 ;
-@borderRadius: @defaultBorderRadius;
+@itemTextColor: @textColor;
 
+/* Divider */
 @dividerSize: 1px;
 @dividerBackground: linear-gradient(
   rgba(0, 0, 0, 0.05) 0%,
@@ -44,19 +45,6 @@
   rgba(0, 0, 0, 0.05) 100%)
 ;
 
-@headerBackground: rgba(0, 0, 0, 0.04);
-@headerWeight: bold;
-
-@textLineHeight: 1.3;
-
-@transition:
-  opacity 0.2s ease,
-  background 0.2s ease,
-  box-shadow 0.2s ease
-;
-
-@menuTextColor: @textColor;
-
 /* Sub Menu */
 @subMenuMargin: 0.5em;
 @subMenuFontSize: 0.875em;
@@ -65,6 +53,13 @@
 @subMenuHorizontalPadding: 0.5em;
 @subMenuVerticalPadding: 1.5em;
 
+/* Header Item */
+@headerBackground: rgba(0, 0, 0, 0.04);
+@headerWeight: bold;
+
+/* Text Item */
+@textLineHeight: 1.3;
+
 /*--------------
     Elements
 ---------------*/
@@ -124,9 +119,14 @@
 @dropdownMenuOffset: 0px;
 @dropdownPointingDistance: 0px;
 
-@dropdownTextColor: @textColor;
-@dropdownTextColorHover: @darkTextColor;
+@dropdownItemBackground: transparent;
+@dropdownItemTextColorHover: @selectedTextColor;
 @dropdownIconMargin: 0em 0em 0em 1em;
+@dropdownItemColor: @textColor;
+@dropdownItemTransition: none;
+
+@dropdownHoveredItemBackground: @transparentBlack;
+@dropdownHoveredItemColor: @selectedTextColor;
 
 @dropdownBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
 @dropdownVerticalBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
@@ -157,9 +157,11 @@
 
 @activeBackground: @subtleTransparentBlack;
 @activeColor: @darkTextColor;
-@activeBorderSize: 2px;
+@activePointerSize: 0px;
 @activeFontWeight: normal;
 @activeIconOpacity: 1;
+@activeBoxShadow: 0em @activePointerSize 0em inset;
+@activeVerticalBoxShadow: @verticalActivePointerSize 0em 0em inset;
 
 @activeHoverBackground: @hoverBackground;
 @subMenuActiveBackground: transparent;
@@ -174,6 +176,7 @@
 ---------------*/
 
 /* Vertical */
+@verticalPointerWidth: 2px;
 @verticalBackground: #FFFFFF;
 @verticalItemBackground: none;
 @verticalDividerBackground: linear-gradient(to right,
@@ -181,6 +184,7 @@
   rgba(0, 0, 0, 0.1) 1.5em,
   rgba(0, 0, 0, 0.03) 100%)
 ;
+@verticalActivePointerSize: 2px;
 
 
 /* Secondary */
@@ -244,11 +248,10 @@
 @tabularBackgroundColor: #FFFFFF;
 @tabularBorderWidth: 1px;
 @tabularHorizontalPadding: 1.4em;
-@tabularMenuTextColor: @menuTextColor;
+@tabularMenuTextColor: @itemTextColor;
 
 @tabularFluidOffset: 1px;
 @tabularFluidWidth: ~"calc(100% + "(@tabularFluidOffset * 2)~")";
-
 @tabularActiveColor: @selectedTextColor;
 @tabularActiveBoxShadow: none;
 
@@ -303,14 +306,14 @@
 
 /* Inverted Menu Divider */
 @invertedDividerBackground: linear-gradient(
-  rgba(255, 255, 255, 0.03) 0%,
+  rgba(255, 255, 255, 0.06) 0%,
   rgba(255, 255, 255, 0.1) 50%,
-  rgba(255, 255, 255, 0.03) 100%)
+  rgba(255, 255, 255, 0.06) 100%)
 ;
 @invertedVerticalDividerBackground: linear-gradient(to right,
-  rgba(255, 255, 255, 0.03) 0%,
+  rgba(255, 255, 255, 0.06) 0%,
   rgba(255, 255, 255, 0.1) 50%,
-  rgba(255, 255, 255, 0.03) 100%)
+  rgba(255, 255, 255, 0.06) 100%)
 ;
 
 /* Fixed */
diff --git a/src/themes/github/collections/menu.variables b/src/themes/github/collections/menu.variables
index d5e3e2a37..6dcbc1124 100644
--- a/src/themes/github/collections/menu.variables
+++ b/src/themes/github/collections/menu.variables
@@ -2,8 +2,8 @@
       Collection
 --------------------*/
 
-@verticalPadding       : 1em;
-@horizontalPadding     : 1.25em;
+@itemVerticalPadding       : 1em;
+@itemHorizontalPadding     : 1.25em;
 
 @background            : #FFFFFF linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05));
 @fontWeight            : normal;
@@ -18,7 +18,7 @@
 
 @boxShadow             :
   0px 1px 2px 0px rgba(0, 0, 0, 0.15),
-  0px 0px 0px 1px rgba(0, 0, 0, 0.05)
+  0px 0px 0px 1px rgba(0, 0, 0, 0.1)
 ;
 
 @headerBackground: rgba(0, 0, 0, 0.08);