MAGETWO-31515: [UI] CSS styling for Installation Form

- CR changes
- Added extend mixins
- Added general comment creation via Grunt concat plugin

Author: Bogdan Plieshka

Gruntfile.js

@@ -9,7 +9,9 @@ module.exports = function (grunt) {
 
     //  Required plugins
     //  _____________________________________________
-    var specRunner = require('./dev/tests/js/framework/spec_runner')(grunt);
+
+    var specRunner = require('./dev/tests/js/framework/spec_runner')(grunt),
+        svgo = require('imagemin-svgo');
 
     require('./dev/tools/grunt/tasks/mage-minify')(grunt);
 
@@ -21,8 +23,6 @@ module.exports = function (grunt) {
         pattern: ['grunt-*', '!grunt-template-jasmine-requirejs']
     });
 
-    var svgo = require('imagemin-svgo');
-
     //  Configuration
     //  _____________________________________________
 
@@ -318,7 +318,8 @@ module.exports = function (grunt) {
 
         cssmin: {
             options: {
-                report: 'gzip'
+                report: 'gzip',
+                keepSpecialComments: 0
             },
             setup: {
                 files: {
@@ -342,6 +343,20 @@ module.exports = function (grunt) {
             }
         },
 
+        //  Concatenation
+        //  ---------------------------------------------
+
+        concat: {
+            options: {
+                stripBanners: true,
+                banner: '/**\n * Copyright © <%= grunt.template.today("yyyy") %> Magento. All rights reserved.\n * See COPYING.txt for license details.\n */\n'
+            },
+            setup: {
+                src: '<%= path.css.setup %>/setup.css',
+                dest: '<%= path.css.setup %>/setup.css'
+            }
+        },
+
 
         //  Watches files for changes and runs tasks based on the changed files
         //  ---------------------------------------------
@@ -538,7 +553,8 @@ module.exports = function (grunt) {
             grunt.task.run([
                 'less:' + component,
                 'autoprefixer:' + component,
-                'cssmin:' + component
+                'cssmin:' + component,
+                'concat:' + component
             ]);
         }
         if (component == undefined) {

package.json

@@ -1,35 +1,36 @@
 {
-    "name": "Magento2",
-    "author": "Magento, an eBay Inc. company",
-    "description": "Magento2 node modules dependencies for local development",
-    "version": "0.42.0-beta1",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/magento/magento2.git"
-    },
-    "homepage": "http://magento.com/",
-    "devDependencies": {
-        "connect": "^3.3.3",
-        "grunt": "^0.4.5",
-        "grunt-autoprefixer": "^2.0.0",
-        "grunt-contrib-clean": "^0.6.0",
-        "grunt-contrib-cssmin": "^0.10.0",
-        "grunt-contrib-imagemin": "^0.9.2",
-        "grunt-contrib-jasmine": "^0.8.1",
-        "grunt-contrib-less": "^0.12.0",
-        "grunt-contrib-watch": "^0.6.1",
-        "grunt-exec": "^0.4.6",
-        "grunt-styledocco": "^0.1.4",
-        "imagemin-svgo": "^4.0.1",
-        "grunt-template-jasmine-requirejs": "^0.2.0",
-        "load-grunt-tasks": "^1.0.0",
-        "morgan": "^1.5.0",
-        "node-minify": "^1.0.1",
-        "serve-static": "^1.7.1",
-        "time-grunt": "^1.0.0",
-        "underscore": "^1.7.0"
-    },
-    "engines": {
-        "node": ">=0.10.0"
-    }
+  "name": "Magento2",
+  "author": "Magento, an eBay Inc. company",
+  "description": "Magento2 node modules dependencies for local development",
+  "version": "0.42.0-beta1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/magento/magento2.git"
+  },
+  "homepage": "http://magento.com/",
+  "devDependencies": {
+    "connect": "^3.3.3",
+    "grunt": "^0.4.5",
+    "grunt-autoprefixer": "^2.0.0",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-concat": "^0.5.0",
+    "grunt-contrib-cssmin": "^0.10.0",
+    "grunt-contrib-imagemin": "^0.9.2",
+    "grunt-contrib-jasmine": "^0.8.1",
+    "grunt-contrib-less": "^0.12.0",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-exec": "^0.4.6",
+    "grunt-styledocco": "^0.1.4",
+    "grunt-template-jasmine-requirejs": "^0.2.0",
+    "imagemin-svgo": "^4.0.1",
+    "load-grunt-tasks": "^1.0.0",
+    "morgan": "^1.5.0",
+    "node-minify": "^1.0.1",
+    "serve-static": "^1.7.1",
+    "time-grunt": "^1.0.0",
+    "underscore": "^1.7.0"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  }
 }

setup/module/Magento/Setup/styles/components/_navigation-bar.less

@@ -40,7 +40,7 @@
     background-color: @nav__background-color;
     border-bottom: 1px solid @nav__border-color;
     border-top: 1px solid @nav__border-color;
-    .clearer();
+    .extend__clearer();
     display: none;
     padding: @nav-bar-dot__size @nav__indent-right 0 0;
 }
@@ -271,7 +271,7 @@
         margin-top: 0;
     }
     .nav-bar {
-        .clearer();
+        .extend__clearer();
         display: block;
         margin-bottom: 0;
         margin-left: auto;

setup/module/Magento/Setup/styles/lib/_alerts.less

@@ -17,6 +17,7 @@
 
 @alert-icon__size: 3.8rem;
 
+//
 //  Common
 //  _____________________________________________
 
@@ -29,7 +30,7 @@
         min-width: @spinner__size;
     }
     .ie9 & {
-        .clearer();
+        .extend__clearer();
         .spinner {
             float: left;
         }

setup/module/Magento/Setup/styles/lib/_extends.less

@@ -0,0 +1,14 @@
+// /**
+//  * Copyright © 2015 Magento. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+// Clearfix
+
+.abs-clearer {
+    .clearer();
+}
+
+.extend__clearer() {
+    &:extend(.abs-clearer all);
+}

setup/module/Magento/Setup/styles/lib/forms/_forms.less

@@ -35,7 +35,7 @@
 //  ---------------------------------------------
 
 .form-row {
-    .clearer();
+    .extend__clearer();
     margin-bottom: 2.2rem;
 
     .form-row {

setup/module/Magento/Setup/styles/lib/utilities/_grid.less

@@ -18,15 +18,15 @@
     margin-right: auto;
     padding-left: (@gutter / 2);
     padding-right: (@gutter / 2);
-    .clearer();
+    .extend__clearer();
 }
 
 //  Creates a wrapper for a series of columns
 
 .make-row(@gutter: @grid-gutter-width) {
     margin-left: (@gutter / -2);
     margin-right: (@gutter / -2);
-    .clearer();
+    .extend__clearer();
 }
 
 //

setup/module/Magento/Setup/styles/pages/_common.less

@@ -24,7 +24,7 @@
 //  _____________________________________________
 
 .header {
-    .clearer();
+    .extend__clearer();
     display: none;
     .logo {
         float: left;

setup/module/Magento/Setup/styles/setup.less

@@ -18,6 +18,7 @@
 @import 'lib/_variables';
 @import 'lib/_utilities';
 @import 'lib/_reset';
+@import 'lib/_extends';
 @import 'lib/_classes';
 @import 'lib/_typography';
 @import 'lib/_icons';