From 8cd1d304fce4979f9733d865e61f0bd6e5daf512 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Wed, 29 Jul 2015 17:36:31 -0400
Subject: [PATCH] Adds many new tabular variables

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

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index ca32eff09..4fb1407a1 100644
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -6,7 +6,7 @@
 
 - **Breadcrumb** - Breadcrumb no longer receives vertical spacing by default. This may often cause vertical alignment issues when displayed next to other `inline-block` content.
 - **Menu** - Appearance of `labeled icon menu` has been modified. Horizontal menus now have icons above text, and icons are slightly larger than before.
-- **Menu** - Added new `tabular` menu types, `right tabular`, `bottom tabular`
+- **Menu** - Added new `tabular` menu types, `right tabular`, `bottom tabular`, added many new `tabular` menu variables for customizing
 - **Menu** - `text menu` now uses padding for hitboxes to make target area for links larger
 
 **[Reported Bugs](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)**
diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index 2adbe1ca8..d990d5823 100755
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@@ -596,26 +596,24 @@ Floated Menu / Item
 ---------------*/
 
 .ui.tabular.menu {
-  background-color: @tabularBackgroundColor;
   border-radius: 0em;
   box-shadow: none !important;
   border: none;
+  background: @tabularBackground;
   border-bottom: @tabularBorderWidth solid @tabularBorderColor;
 }
 .ui.tabular.fluid.menu {
   width: @tabularFluidWidth !important;
 }
 .ui.tabular.menu .item {
-  background-color: transparent;
+  background: transparent;
+  border-bottom: none;
 
   border-left: @tabularBorderWidth solid transparent;
   border-right: @tabularBorderWidth solid transparent;
   border-top: @tabularOppositeBorderWidth solid transparent;
-  border-bottom: none;
-
-  padding-left: @tabularHorizontalPadding;
-  padding-right: @tabularHorizontalPadding;
-  color: @tabularMenuTextColor;
+  padding: @tabularVerticalPadding @tabularHorizontalPadding;
+  color: @tabularTextColor;
 }
 .ui.tabular.menu .item:before {
   display: none;
@@ -624,12 +622,12 @@ Floated Menu / Item
 /* Hover */
 .ui.tabular.menu .item:hover {
   background-color: transparent;
-  color: @hoveredTextColor;
+  color: @tabularHoveredTextColor;
 }
 
 /* Active */
 .ui.tabular.menu .active.item {
-  background-color: @tabularMenuActiveBackground;
+  background: @tabularActiveBackground;
   color: @tabularActiveColor;
   border-top-width: @tabularBorderWidth;
   border-color: @tabularBorderColor;
@@ -652,7 +650,7 @@ Floated Menu / Item
 
 /* Bottom Vertical Tabular */
 .ui.bottom.tabular.menu {
-  background-color: @tabularBackgroundColor;
+  background: @tabularBackground;
   border-radius: 0em;
   box-shadow: none !important;
   border-bottom: none;
@@ -666,8 +664,8 @@ Floated Menu / Item
   border-top: none;
 }
 .ui.bottom.tabular.menu .active.item {
-  background-color: @tabularMenuActiveBackground;
-  color: @tabularMenuActiveColor;
+  background: @tabularActiveBackground;
+  color: @tabularActiveColor;
   border-color: @tabularBorderColor;
   margin: -@tabularBorderWidth 0px 0px 0px;
   border-radius: 0px 0px @tabularBorderRadius @tabularBorderRadius !important;
@@ -675,7 +673,7 @@ Floated Menu / Item
 
 /* Vertical Tabular (Left) */
 .ui.vertical.tabular.menu {
-  background-color: @tabularBackgroundColor;
+  background: @tabularVerticalBackground;
   border-radius: 0em;
   box-shadow: none !important;
   border-bottom: none;
@@ -689,8 +687,8 @@ Floated Menu / Item
   border-right: none;
 }
 .ui.vertical.tabular.menu .active.item {
-  background-color: @tabularMenuActiveBackground;
-  color: @tabularMenuActiveColor;
+  background: @tabularActiveBackground;
+  color: @tabularActiveColor;
   border-color: @tabularBorderColor;
   margin: 0px -@tabularBorderWidth 0px 0px;
   border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important;
@@ -698,7 +696,7 @@ Floated Menu / Item
 
 /* Vertical Right Tabular */
 .ui.vertical.right.tabular.menu {
-  background-color: @tabularBackgroundColor;
+  background: @tabularVerticalBackground;
   border-radius: 0em;
   box-shadow: none !important;
   border-bottom: none;
@@ -713,8 +711,8 @@ Floated Menu / Item
   border-left: none;
 }
 .ui.vertical.right.tabular.menu .active.item {
-  background-color: @tabularMenuActiveBackground;
-  color: @tabularMenuActiveColor;
+  background: @tabularActiveBackground;
+  color: @tabularActiveColor;
   border-color: @tabularBorderColor;
   margin: 0px 0px 0px -@tabularBorderWidth;
   border-radius: 0px @tabularBorderRadius @tabularBorderRadius 0px !important;
diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables
index 5e8639908..c43651a9d 100644
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@@ -301,21 +301,26 @@
 /* Tabular */
 @tabularBorderColor: @solidBorderColor;
 @tabularBackgroundColor: transparent;
+@tabularBackground: none @tabularBackgroundColor;
 @tabularBorderWidth: 1px;
 @tabularOppositeBorderWidth: @tabularBorderWidth + 1px;
+@tabularVerticalPadding: @itemVerticalPadding;
 @tabularHorizontalPadding: @relativeHuge;
-@tabularMenuTextColor: @itemTextColor;
+@tabularBorderRadius: @defaultBorderRadius;
+@tabularTextColor: @itemTextColor;
+
+@tabularHoveredTextColor: @hoveredTextColor;
+
+@tabularVerticalBackground: none @tabularBackgroundColor;
 
 @tabularFluidOffset: 1px;
 @tabularFluidWidth: ~"calc(100% + "(@tabularFluidOffset * 2)~")";
+
+@tabularActiveBackground: none @white;
 @tabularActiveColor: @selectedTextColor;
 @tabularActiveBoxShadow: none;
-
-@tabularMenuActiveBackground: @white;
-@tabularMenuActiveColor: @selectedTextColor;
-
 @tabularActiveWeight: bold;
-@tabularBorderRadius: @defaultBorderRadius;
+
 
 
 /* Pagination */