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