Merge remote-tracking branch 'origin/MAGETWO-35096' into UI

Author: Natalia Momotenko

lib/web/css/source/lib/_navigation.less

@@ -68,6 +68,7 @@
                 .css(padding, @_nav-level0-item-padding);
                 .css(text-transform, @_nav-level0-text-transform);
                 display: block;
+                word-break: break-all;
             }
             &.active > a {
                 .css(background, @_nav-level0-item-background-color-active);
@@ -79,42 +80,48 @@
                 .css(border-bottom, @_nav-level0-item-border);
             }
         }
-        .submenu:not(:first-child) {
-            .css(background, @_submenu-background-color);
-            .css(border, @_submenu-border);
-            .css(font-size, @_submenu-font-size);
-            .css(font-weight, @_submenu-font-weight);
-            overflow-x: hidden;
-            position: relative;
-            transition: left .3s ease-out 0;
-            top: auto !important;
-            left: auto !important;
-            padding: 10px 20px;
-            > ul {
-                display: block;
-                .css(padding, @_submenu-padding);
-                > li {
-                    margin: 0;
-                    a {
-                        .css(background, @_submenu-item-background-color);
-                        .css(border, @_submenu-item-border);
-                        .css(color, @_submenu-item-color);
-                        .css(text-decoration, @_submenu-item-text-decoration);
-                        display: block;
-                        line-height: normal;
-                        .css(padding, @_submenu-item-padding);
+        .submenu {
+            > li {
+                word-break: break-all;
+            }
+            &:not(:first-child) {
+                .css(background, @_submenu-background-color);
+                .css(border, @_submenu-border);
+                .css(font-size, @_submenu-font-size);
+                .css(font-weight, @_submenu-font-weight);
+                overflow-x: hidden;
+                position: relative;
+                transition: left .3s ease-out 0;
+                top: auto !important;
+                left: auto !important;
+                padding: 10px 20px;
+                > ul {
+                    display: block;
+                    .css(padding, @_submenu-padding);
+                    > li {
+                        margin: 0;
+                        a {
+                            .css(background, @_submenu-item-background-color);
+                            .css(border, @_submenu-item-border);
+                            .css(color, @_submenu-item-color);
+                            .css(text-decoration, @_submenu-item-text-decoration);
+                            display: block;
+                            line-height: normal;
+                            .css(padding, @_submenu-item-padding);
+                        }
                     }
                 }
-            }
-            &.expanded {
-              display: block !important;
-              top: 0 !important;
-            }
-            .active > a {
-                .css(background, @_submenu-item-background-color-active);
-                .css(border, @_submenu-item-border-active);
-                .css(color, @_submenu-item-color-active);
-                .css(text-decoration, @_submenu-item-text-decoration-active);
+                &.expanded {
+                    display: block !important;
+                    top: 0 !important;
+                    padding-right: 0;
+                }
+                .active > a {
+                    .css(background, @_submenu-item-background-color-active);
+                    .css(border, @_submenu-item-border-active);
+                    .css(color, @_submenu-item-color-active);
+                    .css(text-decoration, @_submenu-item-text-decoration-active);
+                }
             }
         }
     }

lib/web/css/source/lib/variables/_navigation.less

@@ -14,7 +14,7 @@
 @navigation-level0-item__font-weight: @font-weight__bold;
 @navigation-level0-item__line-height: false;
 @navigation-level0-item__margin: 0;
-@navigation-level0-item__padding: 8px @indent__base;
+@navigation-level0-item__padding: 8px @indent__xl 8px @indent__base;
 @navigation-level0-item__text-transform: uppercase;
 
 @navigation-level0-item__background: '';