MAGETWO-32315: Side Panels

- CR & QA updates

Author: Oleg Zinoviev

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_page-nav.less

@@ -18,7 +18,9 @@
 
 @admin__page-nav-item__border-color: @border__color;
 @admin__page-nav-item__margin-vertical: 1.3rem;
+@admin__page-nav-item__margin-horizontal: .7rem;
 @admin__page-nav-item__active__color: @color-phoenix;
+@admin__page-nav-item__hover__background-color: darken(@admin__page-nav__background-color, 5%);
 
 @admin__page-nav-link__color: @color-very-dark-gray-black;
 @admin__page-nav-link__padding: 2rem 4rem 2rem 1rem;
@@ -37,7 +39,7 @@
 @admin__page-nav-tooltip__z-index1: @field-tooltip__z-index;
 @admin__page-nav-tooltip__border-color: @color-gray75;
 
-@admin__page-nav-transition: background-color .1s ease-out;
+@admin__page-nav-transition: border-color .1s ease-out, background-color .1s ease-out;
 
 //
 //  Page Nav (can be simple and collapsed)
@@ -109,7 +111,7 @@
             font-weight: @font-weight__bold;
             position: absolute;
             right: 1.8rem;
-            top: 1.8rem;
+            top: 2rem;
         }
 
         &:hover {
@@ -136,11 +138,20 @@
 
 .admin__page-nav-item {
     border-left: 3px solid transparent;
-    margin-left: .7rem;
+    margin-left: @admin__page-nav-item__margin-horizontal;
     padding: 0;
     position: relative;
+    transition: @admin__page-nav-transition;
+
+    &:hover {
+        border-color: @admin__page-nav-item__hover__background-color;
+        .admin__page-nav-link {
+            background: @admin__page-nav-item__hover__background-color;
+            color: @admin__page-nav-link__hover__color;
+            text-decoration: none;
+        }
+    }
 
-    &:hover,
     &._active,
     &.ui-state-active {
         border-color: @admin__page-nav-item__active__color;
@@ -150,9 +161,6 @@
             border-right: 1px solid @admin__page-nav-title__collapsible__background-color;
             color: @admin__page-nav-link__hover__color;
             margin-right: -1px;
-            &:hover {
-                text-decoration: none;
-            }
         }
     }
 

app/design/adminhtml/Magento/backend/web/css/override.less

@@ -4243,7 +4243,7 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   cursor: pointer;
   margin: 0;
   padding-right: 3.5rem;
-  transition: background-color 0.1s ease-out;
+  transition: border-color 0.1s ease-out, background-color 0.1s ease-out;
 }
 .admin__page-nav-title._collapsible + .admin__page-nav-items {
   display: none;
@@ -4255,7 +4255,7 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   font-weight: 700;
   position: absolute;
   right: 1.8rem;
-  top: 1.8rem;
+  top: 2rem;
 }
 .admin__page-nav-title._collapsible:hover {
   background: #f1f1f1;
@@ -4276,16 +4276,23 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
 }
 .admin__page-nav-item {
   border-left: 3px solid transparent;
-  margin-left: .7rem;
+  margin-left: 0.7rem;
   padding: 0;
   position: relative;
+  transition: border-color 0.1s ease-out, background-color 0.1s ease-out;
+}
+.admin__page-nav-item:hover {
+  border-color: #e4e4e4;
+}
+.admin__page-nav-item:hover .admin__page-nav-link {
+  background: #e4e4e4;
+  color: #303030;
+  text-decoration: none;
 }
-.admin__page-nav-item:hover,
 .admin__page-nav-item._active,
 .admin__page-nav-item.ui-state-active {
   border-color: #eb5202;
 }
-.admin__page-nav-item:hover .admin__page-nav-link,
 .admin__page-nav-item._active .admin__page-nav-link,
 .admin__page-nav-item.ui-state-active .admin__page-nav-link {
   background: #ffffff;
@@ -4294,11 +4301,6 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   color: #303030;
   margin-right: -1px;
 }
-.admin__page-nav-item:hover .admin__page-nav-link:hover,
-.admin__page-nav-item._active .admin__page-nav-link:hover,
-.admin__page-nav-item.ui-state-active .admin__page-nav-link:hover {
-  text-decoration: none;
-}
 .admin__page-nav-item._active .admin__page-nav-link,
 .admin__page-nav-item.ui-state-active .admin__page-nav-link {
   font-weight: 600;
@@ -4323,7 +4325,7 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   line-height: 1.2;
   margin: 0 0 -1px;
   padding: 2rem 4rem 2rem 1rem;
-  transition: background-color 0.1s ease-out;
+  transition: border-color 0.1s ease-out, background-color 0.1s ease-out;
   word-break: break-all;
 }
 .admin__page-nav-link._changed .admin__page-nav-item-message._changed {

lib/web/mage/backend/tabs.js

@@ -304,7 +304,7 @@
                     .appendTo(curItemMessages);
             }
 
-            curItemMessage = curItemMessages.find('.'+messageType).addClass(activeClass);
+            curItemMessage = curItemMessages.find('.' + messageType).addClass(activeClass);
         },
 
         /**
@@ -315,7 +315,7 @@
         _onInvalid: function(e) {
             var cssError = '_error';
 
-            this.anchors.eq(e.data.index).addClass(cssError).find('.'+cssError).show();
+            this.anchors.eq(e.data.index).addClass(cssError).find('.' + cssError).show();
             this._updateNavTitleMessages(e, cssError);
         },