MAGETWO-35195: JS loader is displayed outside the content area in Backend

- Added main menu submenu group title style support
- Fixed Grunt Less compile tasks

Author: Bogdan Plieshka

Gruntfile.js

@@ -65,7 +65,7 @@ module.exports = function (grunt) {
          */
         backend: [
             'less:backend',
-            'replace:example',
+            'replace:escapeCalc',
             'less:override'
         ],
         /**

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_menu.less

@@ -234,13 +234,14 @@
         .parent {
             margin-bottom: 4.5rem;
             //  Section title
-            //  ToDo UI: Should be not a link, strong instead and have a classname
-            > a {
+            > a, // ToDo UI: Should be deleted after template changes a -> strong.submenu-group-title
+            .submenu-group-title {
                 color: @submenu-section-label__color;
                 display: block;
                 font-size: 1.6rem;
                 font-weight: @font-weight__semibold;
                 margin-bottom: .7rem;
+                padding: 1.25rem @submenu__padding-horizontal;
                 pointer-events: none;
             }
         }

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

@@ -2791,6 +2791,7 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   margin: 0 0 3rem;
 }
 .page-layout-admin-login {
+  align-items: center;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -3197,12 +3198,14 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
 .admin__menu .submenu .parent {
   margin-bottom: 4.5rem;
 }
-.admin__menu .submenu .parent > a {
+.admin__menu .submenu .parent > a,
+.admin__menu .submenu .parent .submenu-group-title {
   color: #a79d95;
   display: block;
   font-size: 1.6rem;
   font-weight: 600;
   margin-bottom: .7rem;
+  padding: 1.25rem 1.5rem;
   pointer-events: none;
 }
 .admin__menu .submenu .column {

dev/tools/grunt/configs/replace.js

@@ -9,7 +9,7 @@
  * Replace task for backend migration
  */
 module.exports = {
-    example: {
+    escapeCalc: {
         src: ['<%= combo.autopath("backend","pub") %>/css/styles.css'], // source files array (supports minimatch)
         dest: '<%= combo.autopath("backend","pub") %>/css/override.less', // destination directory or file
         replacements: [{

dev/tools/grunt/configs/themes.js

@@ -46,8 +46,6 @@ module.exports = {
         files: [
             'css/styles-old',
             'css/styles',
-            'css/pages',
-            'css/admin',
             'css/styles-migration'
         ],
         dsl: 'less'

dev/tools/grunt/configs/watch.js

@@ -24,7 +24,16 @@ var watchOptions = {
     "setup": {
         "files": "<%= path.less.setup %>/**/*.less",
         "tasks": "less:setup"
+    },
+    "backendMigration": {
+        "files": [
+            "<%= combo.autopath(\"backend\",\"pub\") %>/css/styles.css"
+        ],
+        "tasks": [
+            "replace:escapeCalc",
+            "less:override"
+        ]
     }
 };
 
-module.exports = _.extend(themeOptions, watchOptions);
+module.exports = _.extend(themeOptions, watchOptions);