Arrows now use translateX/Y instead of @arrowOffset. Adds better arrow bg colors for pointing menu #1653

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;

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