From fa179f766c734953528a5d6ba8c1c471a049517e Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Wed, 29 Jul 2015 16:51:03 -0400
Subject: [PATCH] Add #1032 tabular variations for all directions

---
 RELEASE-NOTES.md                      |  2 +
 src/definitions/collections/menu.less | 58 ++++++++++++++++++++++++---
 src/definitions/elements/icon.less    |  6 +--
 3 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index c82669c2c..ca32eff09 100644
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -6,6 +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** - `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)**
@@ -22,6 +23,7 @@
 - **Menu** - Fixed issue with `labeled input` text inside menu not appearing vertically centered
 - **Menu** - `@pressedItemColor` has been renamed to `@pressedItemTextColor` to match naming conventions of other variables
 - **Menu** - Fix text align on `dropdown item` inside `icon menu`
+- **Icons** - Fixed issue where `active icon` or `emphasized icon` would not adjust opacity inside menus
 
 **[Merged PR](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 963597fbc..2adbe1ca8 100755
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@@ -640,14 +640,40 @@ Floated Menu / Item
 }
 
 /* Coupling with segment for attachment */
-.ui.tabular.menu + .bottom.attached.segment,
-.ui.tabular.menu ~ .bottom.attached.segment + .bottom.attached.segment {
+.ui.tabular.menu + .bottom.attached.segment {
   border-top: none;
   margin: 0px;
   width: 100%;
 }
+.top.attached.segment + .ui.bottom.tabular.menu {
+  width: @tabularFluidWidth;
+  margin: 0px 0px 0px -@tabularFluidOffset;
+}
+
+/* Bottom Vertical Tabular */
+.ui.bottom.tabular.menu {
+  background-color: @tabularBackgroundColor;
+  border-radius: 0em;
+  box-shadow: none !important;
+  border-bottom: none;
+  border-top: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.bottom.tabular.menu .item {
+  background: none;
+  border-left: @tabularBorderWidth solid transparent;
+  border-right: @tabularBorderWidth solid transparent;
+  border-bottom: @tabularBorderWidth solid transparent;
+  border-top: none;
+}
+.ui.bottom.tabular.menu .active.item {
+  background-color: @tabularMenuActiveBackground;
+  color: @tabularMenuActiveColor;
+  border-color: @tabularBorderColor;
+  margin: -@tabularBorderWidth 0px 0px 0px;
+  border-radius: 0px 0px @tabularBorderRadius @tabularBorderRadius !important;
+}
 
-/* Vertical Tabular */
+/* Vertical Tabular (Left) */
 .ui.vertical.tabular.menu {
   background-color: @tabularBackgroundColor;
   border-radius: 0em;
@@ -662,8 +688,6 @@ Floated Menu / Item
   border-top: @tabularBorderWidth solid transparent;
   border-right: none;
 }
-
-/* Active */
 .ui.vertical.tabular.menu .active.item {
   background-color: @tabularMenuActiveBackground;
   color: @tabularMenuActiveColor;
@@ -672,6 +696,30 @@ Floated Menu / Item
   border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important;
 }
 
+/* Vertical Right Tabular */
+.ui.vertical.right.tabular.menu {
+  background-color: @tabularBackgroundColor;
+  border-radius: 0em;
+  box-shadow: none !important;
+  border-bottom: none;
+  border-right: none;
+  border-left: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.vertical.right.tabular.menu .item {
+  background: none;
+  border-right: @tabularBorderWidth solid transparent;
+  border-bottom: @tabularBorderWidth solid transparent;
+  border-top: @tabularBorderWidth solid transparent;
+  border-left: none;
+}
+.ui.vertical.right.tabular.menu .active.item {
+  background-color: @tabularMenuActiveBackground;
+  color: @tabularMenuActiveColor;
+  border-color: @tabularBorderColor;
+  margin: 0px 0px 0px -@tabularBorderWidth;
+  border-radius: 0px @tabularBorderRadius @tabularBorderRadius 0px !important;
+}
+
 /* Dropdown */
 .ui.tabular.menu .active.dropdown.item {
   margin-bottom: 0px;
diff --git a/src/definitions/elements/icon.less b/src/definitions/elements/icon.less
index 3e5bd8bd1..6c1428482 100755
--- a/src/definitions/elements/icon.less
+++ b/src/definitions/elements/icon.less
@@ -88,15 +88,15 @@ i.icon.loading {
 *******************************/
 
 i.icon.hover {
-  opacity: 1;
+  opacity: 1 !important;
 }
 
 i.icon.active {
-  opacity: 1;
+  opacity: 1 !important;
 }
 
 i.emphasized.icon {
-  opacity: 1;
+  opacity: 1 !important;
 }
 
 i.disabled.icon {