From 8de80fbc0e650f9dcd5477686c4694e08093f325 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Tue, 20 Jan 2015 17:44:06 -0500
Subject: [PATCH] Arrows now use translateX/Y instead of @arrowOffset. Adds
 better arrow bg colors for pointing menu #1653

---
 src/definitions/collections/menu.less         | 24 ++++++++++---------
 src/themes/default/collections/menu.variables | 12 ++++++----
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index e2825a3ad..e702e6e32 100755
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@@ -1502,11 +1502,15 @@
 
 .ui.pointing.menu .active.item:after {
   position: absolute;
-  bottom: @arrowOffset;
-  left: 50%;
   content: '';
 
-  margin-left: @arrowOffset;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  margin: @arrowBorderSize 0em 0em 0em;
+
+  background: none;
+
   width: @arrowSize;
   height: @arrowSize;
 
@@ -1514,13 +1518,9 @@
   border-bottom: @arrowBorder;
   border-right: @arrowBorder;
 
-  background: none;
-  transform: rotate(45deg);
-  z-index: 2;
+  z-index: @arrowZIndex;
 
-  transition:
-    background 0.2s ease
-  ;
+  transition: @arrowTransition;
 }
 
 /* Don't double up pointers */
@@ -1531,11 +1531,13 @@
 .ui.vertical.pointing.menu .active.item:after {
   position: absolute;
   top: 50%;
-  margin-top: @arrowOffset;
-  right: @arrowOffset;
+  right: 0%;
   bottom: auto;
   left: auto;
 
+  transform: translateX(50%) translateY(-50%) rotate(45deg);
+  margin: 0em -@arrowBorderSize 0em 0em;
+
   border: none;
   border-top: @arrowBorder;
   border-right: @arrowBorder;
diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables
index 2e08f4305..6bcb3e98e 100644
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@@ -132,14 +132,16 @@
 
 /* Pointing Arrow */
 @arrowSize: 0.6em;
-@arrowOffset: -(@arrowSize / 2);
-@arrowBorder: 1px solid rgba(0, 0, 0, 0.1);
+@arrowBorderSize: 1px;
+@arrowBorder: @arrowBorderSize solid @solidBorderColor;
+@arrowTransition: background @transitionDuration @transitionEasing;
+@arrowZIndex: 2;
 
 @arrowHoverColor: #FAFAFA;
-@arrowActiveColor: #F6F6F6;
+@arrowActiveColor: #F7F7F7;
 
-@arrowVerticalHoverColor: #FAFAFA;
-@arrowVerticalActiveColor: #FCFCFC;
+@arrowVerticalHoverColor: @arrowHoverColor;
+@arrowVerticalActiveColor: @arrowActiveColor;
 
 /*--------------
      States