Adds 2 new themes(ish) adds more missing menu variables

src/definitions/collections/menu.less

@@ -30,6 +30,7 @@
 .ui.menu {
   display: flex;
   margin: @margin;
+  font-family: @fontFamily;
   background: @background;
   font-weight: @fontWeight;
   box-shadow: @boxShadow;
@@ -84,7 +85,9 @@
 
   background: @itemBackground;
   padding: @itemVerticalPadding @itemHorizontalPadding;
-  color: @textColor;
+  text-transform: @itemTextTransform;
+  color: @itemTextColor;
+  font-weight: @itemFontWeight;
   transition: @itemTransition;
 }
 
@@ -212,9 +215,6 @@
     Dropdowns
 ---------------*/
 
-.ui.menu .ui.dropdown.item .visible.menu {
-  display: block;
-}
 
 .ui.menu .ui.active.dropdown.item {
   font-weight: normal;
@@ -257,6 +257,9 @@
   font-weight: @dropdownActiveItemFontWeight !important;
   color: @dropdownActiveItemColor !important;
 }
+.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
+  display: block;
+}
 
 
 /* Secondary */
@@ -362,8 +365,8 @@
 .ui.menu .link.item:hover,
 .ui.menu a.item:hover {
   cursor: pointer;
-  background: @hoverBackground;
-  color: @hoverColor;
+  background: @hoverItemBackground;
+  color: @hoverItemTextColor;
 }
 
 
@@ -374,8 +377,8 @@
 .ui.link.menu .item:active,
 .ui.menu .link.item:active,
 .ui.menu a.item:active {
-  background: @pressedBackground;
-  color: @pressedColor;
+  background: @pressedItemBackground;
+  color: @pressedItemColor;
 }
 
 /*--------------
@@ -383,10 +386,10 @@
 ---------------*/
 
 .ui.menu .active.item:not(.dropdown)  {
-  background: @activeBackground;
-  color: @selectedTextColor;
-  font-weight: @activeFontWeight;
-  box-shadow: @activeBoxShadow;
+  background: @activeItemBackground;
+  color: @activeItemTextColor;
+  font-weight: @activeItemFontWeight;
+  box-shadow: @activeItemBoxShadow;
 }
 .ui.menu .active.item:not(.dropdown) > i.icon {
   opacity: @activeIconOpacity;
@@ -399,7 +402,8 @@
 
 .ui.vertical.menu .active.item:hover,
 .ui.menu .active.item:hover {
-  background-color: @activeHoverBackground;
+  background-color: @activeHoverItemBackground;
+  color: @activeHoverItemColor;
 }
 
 /*--------------
@@ -449,6 +453,7 @@ Floated Menu / Item
 .ui.vertical.menu {
   display: block;
   background: @verticalBackground;
+  box-shadow: @verticalBoxShadow;
 }
 
 /*--- Item ---*/
@@ -502,11 +507,11 @@ Floated Menu / Item
 
 /*--- Sub Menu ---*/
 .ui.vertical.menu .item > .menu {
-  margin: @subMenuMargin -@itemHorizontalPadding 0em;
+  margin: @subMenuMargin;
 }
 .ui.vertical.menu .menu .item {
   background: none;
-  padding: @subMenuHorizontalPadding @subMenuVerticalPadding;
+  padding: @subMenuVerticalPadding @subMenuHorizontalPadding;
   font-size: @subMenuFontSize;
   color: @subMenuTextColor;
 }
@@ -520,7 +525,7 @@ Floated Menu / Item
 
 /* Vertical Active */
 .ui.vertical.menu .active.item {
-  background: @activeBackground;
+  background: @activeItemBackground;
   border-radius: 0em;
   box-shadow: @verticalActiveBoxShadow;
 }
@@ -540,7 +545,7 @@ Floated Menu / Item
   box-shadow: none;
   background-color: @subMenuActiveBackground;
   font-weight: @subMenuActiveFontWeight;
-  color: @subMenuActiveColor;
+  color: @subMenuActiveTextColor;
 }
 
 
@@ -749,6 +754,7 @@ Floated Menu / Item
   border-top: none;
   padding-top: @itemVerticalPadding;
   background-color: @paginationActiveBackground;
+  color: @paginationActiveTextColor;
   box-shadow: none;
 }
 
@@ -797,8 +803,8 @@ Floated Menu / Item
 .ui.secondary.menu .dropdown.item:hover,
 .ui.secondary.menu .link.item:hover,
 .ui.secondary.menu a.item:hover {
-  background: @secondaryHoveredItemBackground;
-  color: @secondaryHoveredItemColor;
+  background: @secondaryHoverItemBackground;
+  color: @secondaryHoverItemColor;
 }
 
 /* Active */
@@ -809,6 +815,15 @@ Floated Menu / Item
   color: @secondaryActiveItemColor;
 }
 
+/* Active Hover */
+.ui.secondary.menu > .menu > .active.item:hover,
+.ui.secondary.menu > .active.item:hover {
+  box-shadow: none;
+  background: @secondaryActiveHoverItemBackground;
+  color: @secondaryActiveHoverItemColor;
+}
+
+
 /* Inverted */
 .ui.secondary.inverted.menu .link.item,
 .ui.secondary.inverted.menu a.item {
@@ -942,6 +957,13 @@ Floated Menu / Item
   color: @secondaryPointingActiveTextColor;
 }
 
+/* Active Hover */
+.ui.secondary.pointing.menu > .menu > .item.active:hover,
+.ui.secondary.pointing.menu > .item.active:hover {
+  border-color: @secondaryPointingActiveHoverBorderColor;
+  color: @secondaryPointingActiveHoverTextColor;
+}
+
 /* Vertical Pointing */
 .ui.secondary.vertical.pointing.menu {
   border-bottom-width: 0px;
@@ -991,6 +1013,7 @@ Floated Menu / Item
   box-shadow: none;
   align-self: center;
   margin: @textMenuItemMargin;
+  font-weight: @textMenuItemFontWeight;
   color: @textMenuItemColor;
   transition: @textMenuItemTransition;
 }
@@ -1314,12 +1337,17 @@ Floated Menu / Item
 }
 
 /*--- Pointers ---*/
+.ui.inverted.pointing.menu .item:hover:after {
+  background: @invertedArrowHoverColor;
+  box-shadow: none;
+}
+.ui.inv
 .ui.inverted.pointing.menu .active.item:after {
-  background: #5B5B5B;
+  background: @invertedArrowActiveColor;
   box-shadow: none;
 }
 .ui.inverted.pointing.menu .active.item:hover:after {
-  background: #4A4A4A;
+  background: @invertedArrowActiveHoverColor;
 }
 
 
@@ -1640,6 +1668,9 @@ Floated Menu / Item
 .ui.pointing.menu .active.item:after {
   background-color: @arrowActiveColor;
 }
+.ui.pointing.menu .active.item:hover:after {
+  background-color: @arrowActiveHoverColor;
+}
 
 .ui.vertical.pointing.menu .item:hover:after {
   background-color: @arrowVerticalHoverColor;

src/themes/chubby/collections/menu.variables

@@ -0,0 +1,40 @@
+/*******************************
+             Menu
+*******************************/
+
+@background: @darkWhite;
+@boxShadow: none;
+@dividerSize: 0px;
+
+@verticalBoxShadow: 0px 0px 0px 2px @borderColor inset;
+@verticalActiveBoxShadow: none;
+
+@itemVerticalPadding: 1.25em;
+@itemHorizontalPadding: 2em;
+@itemFontWeight: bold;
+
+@activeItemBackground: @primaryColor;
+@activeItemTextColor: @white;
+@activeHoverItemBackground: @primaryColorHover;
+@activeHoverItemColor: @white;
+
+@secondaryItemPadding: @relativeSmall @relativeMedium;
+
+@secondaryActiveItemBackground: @primaryColor;
+@secondaryActiveItemColor: @white;
+@secondaryActiveHoverItemBackground: @primaryColorHover;
+@secondaryActiveHoverItemColor: @white;
+
+@secondaryPointingBorderWidth: 4px;
+@secondaryPointingActiveBorderColor: @primaryColor;
+@secondaryPointingActiveTextColor: @primaryColor;
+
+@arrowSize: 1em;
+@arrowActiveColor: @primaryColor;
+@arrowActiveHoverColor: @primaryColorHover;
+@arrowBorder: transparent;
+
+@paginationActiveBackground: @lightGrey;
+
+@borderColor: @darkWhite;
+@tabularBorderWidth: 2px;

src/themes/default/collections/menu.variables

@@ -18,6 +18,7 @@
 /* Menu */
 @margin: 1em 0rem;
 @background: #FFFFFF;
+@fontFamily: @pageFont;
 @itemBackground: none;
 @fontWeight: normal;
 @borderWidth: 1px;
@@ -30,11 +31,13 @@
 /* Menu Item */
 @itemVerticalPadding: @relativeSmall;
 @itemHorizontalPadding: @relativeLarge;
+@itemTextTransform: none;
 @itemTransition:
   opacity @transitionDuration @transitionEasing,
   background @transitionDuration @transitionEasing,
   box-shadow @transitionDuration @transitionEasing
 ;
+@itemFontWeight: normal;
 @itemTextColor: @textColor;
 
 /* Divider */
@@ -46,12 +49,14 @@
 ;
 
 /* Sub Menu */
-@subMenuMargin: 0.5em;
-@subMenuFontSize: @tiny;
+@subMenuDistance: 0.5em;
+@subMenuMargin: @subMenuDistance -@itemHorizontalPadding 0em;
+@subMenuFontSize: @relativeTiny;
 @subMenuTextColor: rgba(0, 0, 0, 0.5);
 
-@subMenuHorizontalPadding: 0.5em;
-@subMenuVerticalPadding: 1.5em;
+@subMenuIndent: 0em;
+@subMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent;
+@subMenuVerticalPadding: 0.5em;
 
 /* Text Item */
 @textLineHeight: 1.3;
@@ -65,17 +70,20 @@
 @iconMargin: 0em 0.25em 0em 0em;
 @iconOpacity: 0.75;
 
+/* Dropdown Icon */
 @dropdownIconFloat: right;
 @dropdownIconDistance: 1em;
 
-@verticalIconFloat: right;
-@verticalIconMargin: 0em 0em 0em 0.5em;
-
 /* Header */
 @headerBackground: '';
 @headerWeight: bold;
 @headerTextTransform: normal;
 
+/* Vertical Icon */
+@verticalIconFloat: right;
+@verticalIconMargin: 0em 0em 0em 0.5em;
+
+/* Vertical Header */
 @verticalHeaderMargin: 0em 0em 0.5em;
 @verticalHeaderFontSize: @relativeMedium;
 @verticalHeaderFontWeight: bold;
@@ -119,8 +127,7 @@
 @labelAndIconFloat: none;
 @labelAndIconMargin: 0em 0.5em 0em 0em;
 
-/* Dropdown (Overrides UI Dropdown) */
-
+/* Dropdown in Menu */
 @dropdownMenuBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
 
 @dropdownBackground: #FFFFFF;
@@ -139,10 +146,6 @@
 @dropdownHoveredItemBackground: @transparentBlack;
 @dropdownHoveredItemColor: @selectedTextColor;
 
-@dropdownActiveItemBackground: @transparentBlack;
-@dropdownActiveItemColor: @selectedTextColor;
-@dropdownActiveItemFontWeight: bold;
-
 /* Dropdown Variations */
 @dropdownVerticalMenuBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
 @secondaryDropdownMenuDistance: 0.25em;
@@ -158,6 +161,11 @@
 
 @arrowHoverColor: #FAFAFA;
 @arrowActiveColor: #F7F7F7;
+@arrowActiveHoverColor: @arrowHoverColor;
+
+@invertedArrowHoverColor: #5B5B5B;
+@invertedArrowActiveColor: #4A4A4A;
+@invertedArrowActiveHoverColor: @invertedArrowHoverColor;
 
 @arrowVerticalHoverColor: @arrowHoverColor;
 @arrowVerticalActiveColor: @arrowActiveColor;
@@ -167,22 +175,34 @@
      States
 ---------------*/
 
-@hoverBackground: @subtleTransparentBlack;
-@hoverColor: @textColor;
+/* Hovered Item */
+@hoverItemBackground: @subtleTransparentBlack;
+@hoverItemTextColor: @textColor;
 
-@pressedBackground: @subtleTransparentBlack;
-@pressedColor: @pressedTextColor;
+/* Pressed Item */
+@pressedItemBackground: @subtleTransparentBlack;
+@pressedItemColor: @pressedTextColor;
 
-@activeBackground: @subtleTransparentBlack;
-@activeColor: @selectedTextColor;
-@activePointerSize: 0px;
-@activeFontWeight: normal;
+
+/* Active Item */
+@activeItemBackground: @subtleTransparentBlack;
+@activeItemTextColor: @selectedTextColor;
+@activeItemFontWeight: @itemFontWeight;
 @activeIconOpacity: 1;
-@activeBoxShadow: none;
+@activeItemBoxShadow: none;
+
+/* Active Hovered Item */
+@activeHoverItemBackground: @hoverItemBackground;
+@activeHoverItemColor: @hoverItemTextColor;
+
+/* Active Dropdown */
+@dropdownActiveItemBackground: @transparentBlack;
+@dropdownActiveItemColor: @selectedTextColor;
+@dropdownActiveItemFontWeight: bold;
 
-@activeHoverBackground: @hoverBackground;
+/* Active Sub Menu */
 @subMenuActiveBackground: transparent;
-@subMenuActiveColor: @selectedTextColor;
+@subMenuActiveTextColor: @activeItemTextColor;
 @subMenuActiveFontWeight: bold;
 
 
@@ -191,6 +211,7 @@
 ---------------*/
 
 /* Vertical */
+@verticalBoxShadow: @boxShadow;
 @verticalPointerWidth: 2px;
 @verticalBackground: #FFFFFF;
 @verticalItemBackground: none;
@@ -200,7 +221,7 @@
   rgba(0, 0, 0, 0.03) 100%)
 ;
 
-@verticalActivePointerSize: 2px;
+@verticalActivePointerSize: @verticalPointerWidth;
 @verticalActiveBoxShadow:
   (@verticalActivePointerSize - @borderWidth) 0em 0em inset,
   -@borderWidth 0em 0em
@@ -217,11 +238,16 @@
 @secondaryItemTransition: color @transitionDuration @transitionEasing;
 @secondaryItemColor: @unselectedTextColor;
 
-@secondaryHoveredItemBackground: @transparentBlack;
-@secondaryHoveredItemColor: @selectedTextColor;
+@secondaryHoverItemBackground: @transparentBlack;
+@secondaryHoverItemColor: @selectedTextColor;
 
 @secondaryActiveItemBackground: @transparentBlack;
 @secondaryActiveItemColor: @selectedTextColor;
+@secondaryActiveHoverItemBackground: @transparentBlack;
+@secondaryActiveHoverItemColor: @selectedTextColor;
+
+@secondaryActiveHoveredItemBackground: @transparentBlack;
+@secondaryActiveHoveredItemColor: @selectedTextColor;
 
 @secondaryHeaderBackground: none transparent;
 @secondaryHeaderBorder: 0.1em solid rgba(0, 0, 0, 0.1);
@@ -235,19 +261,26 @@
 @secondaryPointingBorderWidth: 2px;
 @secondaryPointingBorderColor: @borderColor;
 @secondaryPointingInvertedBorderColor: @whiteBorderColor;
-@secondaryPointingActiveBorderColor: @black;
 @secondaryPointinInvertedActiveColor: @white;
 
 @secondaryPointingItemMargin: 0em 0em -@secondaryPointingBorderWidth;
 @secondaryPointingItemVerticalPadding: @relativeTiny;
 @secondaryPointingItemHorizontalPadding: @relativeMedium;
 @secondaryPointingHoverTextColor: @textColor;
-@secondaryPointingActiveFontWeight: bold;
+
+@secondaryPointingActiveBorderColor: @black;
 @secondaryPointingActiveTextColor: @selectedTextColor;
+@secondaryPointingActiveFontWeight: bold;
+
+@secondaryPointingActiveHoverBorderColor: @secondaryPointingActiveBorderColor;
+@secondaryPointingActiveHoverTextColor: @secondaryPointingActiveTextColor;
+
+
 @secondaryPointingHeaderColor: @darkTextColor;
 
 @secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em;
 
+
 /* Tiered */
 @tieredActiveItemBackground: #FCFCFC;
 @tieredActiveMenuBackground: #FCFCFC;
@@ -265,10 +298,12 @@
 
 @tieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2);
 
+
 /* Icon */
 @iconMenuTextAlign: center;
 @iconMenuItemColor: rgba(0, 0, 0, 0.6);
 
+
 /* Tabular */
 @tabularBorderColor: @solidBorderColor;
 @tabularBackgroundColor: #FFFFFF;
@@ -286,20 +321,24 @@
 @tabularActiveWeight: bold;
 @tabularBorderRadius: 5px;
 
+
 /* Pagination */
 @paginationMinWidth: 3em;
-@paginationActiveBackground: rgba(0, 0, 0, 0.03);
+@paginationActiveBackground: @transparentBlack;
+@paginationActiveTextColor: @selectedTextColor;
 
 /* Labeled Icon */
 @labeledIconSize: 1.5em;
 @labeledIconMinWidth: 6em;
 @labeledIconTextMargin: 0.5em;
 
+
 /* Text */
 @textMenuMargin: @relativeLarge -@textMenuItemSpacing;
 
 @textMenuItemSpacing: 1em;
 @textMenuItemColor: rgba(0, 0, 0, 0.6);
+@textMenuItemFontWeight: normal;
 @textMenuItemMargin: 0em @textMenuItemSpacing;
 @textMenuItemTransition: opacity @transitionDuration @transitionEasing;
 
@@ -318,6 +357,7 @@
 @textVerticalMenuIconFloat: none;
 @textVerticalMenuIconMargin: @iconMargin;
 
+
 /*--------------
    Variations
 ---------------*/
@@ -370,14 +410,9 @@
 @fixedGridMargin: 2.75rem;
 
 /* Attached */
-@attachedBoxShadow: 0px 0px 0px 1px #DDDDDD;
+@attachedBoxShadow: 0px 0px 0px 1px @solidBorderColor;
 
 /* Sizes */
-@smallSubMenu: 0.875rem;
 @smallWidth: 13rem;
-
-@medium: 1rem;
 @mediumWidth: 15rem;
-
-@large: 1.125rem;
 @largeWidth: 18rem;

src/themes/material/collections/menu.overrides

@@ -0,0 +1 @@
+@import url(http://fonts.googleapis.com/css?family=Roboto);

src/themes/material/collections/menu.variables

@@ -0,0 +1,10 @@
+/*******************************
+             Menu
+*******************************/
+
+@fontFamily: 'Roboto', Arial, sans-serif;
+@boxShadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+@dividerSize: 0px;
+
+@itemVerticalPadding: @relativeLarge;
+@itemHorizontaPadding: @relativeLarge;