CSS -> LESS. Fix #648

.gitignore

@@ -10,4 +10,5 @@ dist_package
 releases
 webogram*.zip
 app/js/templates.js
+app/css
 cldr

app/less/font.less

@@ -34,7 +34,6 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 
-
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;

app/less/lib/mixins.less

@@ -0,0 +1,76 @@
+@user_colors:   '#8365ab',
+                '#539e4f',
+                '#ae9661',
+                '#4979a3',
+                '#b7635d',
+                '#b3577a',
+                '#5397b4',
+                '#c07844';
+
+@user_bgcolors: '#cc90e2',
+                '#80d066',
+                '#ecd074',
+                '#6fb1e4',
+                '#e57979',
+                '#f98bae',
+                '#73cdd0',
+                '#fba76f';
+
+.generate_user(@arr, @isColor) {
+    .-(@i: 1) when (@i <= length(@arr)) {
+        @color: e(extract(@arr, @i));
+        & when (@isColor) {
+          &_color_@{i},
+          &_color_@{i}:hover {
+            color: @color;
+          }
+        }
+        & when not (@isColor) {
+          &_bgcolor_@{i} {
+            background: @color;
+          }
+        }
+        .-((@i + 1));
+    } .-;
+}
+
+.user-select(@argument: none) {
+  -webkit-user-select: @argument;
+  -moz-user-select: @argument;
+  -ms-user-select: @argument;
+  user-select: @argument;
+}
+
+.box-shadow(@arguments) {
+  -webkit-box-shadow: @arguments;
+  -moz-box-shadow: @arguments;
+  box-shadow: @arguments;
+}
+
+.transform(@arguments) {
+  -webkit-transform: @arguments;
+  -moz-transform: @arguments;
+  -o-transform: @arguments;
+  -ms-transform: @arguments;
+  transform: @arguments;
+}
+
+.box-sizing(@sizing: border-box) {
+  -ms-box-sizing: @sizing;
+  -moz-box-sizing: @sizing;
+  -webkit-box-sizing: @sizing;
+  box-sizing: @sizing;
+}
+
+.rounded(@radius: 2px) {
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+  border-radius: @radius;
+}
+
+.noTransition() {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  transition: none;
+}

gulpfile.js

@@ -7,6 +7,8 @@ var path = require('path');
 var http = require('http');
 var livereload = require('gulp-livereload');
 var st = require('st');
+var less = require('gulp-less');
+var runSequence = require('run-sequence');
 
 // The generated file is being created at src
 // so it can be fetched by usemin.
@@ -37,6 +39,14 @@ gulp.task('imagemin', function() {
     .pipe(gulp.dest('dist/img'));
 });
 
+gulp.task('less', function () {
+  gulp.src('app/less/*.less')
+    .pipe(less({
+      paths: [path.join(__dirname, 'less', 'includes')]
+    }))
+    .pipe(gulp.dest('app/css'));
+});
+
 gulp.task('copy-images', function() {
   return gulp.src(['app/img/**/*', '!app/img/screenshot*', '!app/img/*.wav'])
     .pipe(gulp.dest('dist/img'));
@@ -115,7 +125,6 @@ gulp.task('update-version-comments', function() {
   .pipe(gulp.dest('app'));
 });
 
-
 gulp.task('enable-production', function() {
  return es.concat(
   gulp.src('app/**/*.html')
@@ -143,7 +152,6 @@ gulp.task('disable-production', function() {
 });
 
 gulp.task('add-appcache-manifest', function() {
-
   var sources = [
     './dist/**/*',
     '!dist/manifest.*',
@@ -221,6 +229,7 @@ gulp.task('watchhtml', function() {
 gulp.task('watch', ['server'], function() {
   livereload.listen({ basePath: 'app' });
   gulp.watch('app/css/*.css', ['watchcss']);
+  gulp.watch('app/less/*.less', ['less']);
   gulp.watch('app/partials/**/*.html', ['watchhtml']);
 });
 
@@ -230,18 +239,22 @@ gulp.task('server', function(done) {
   ).listen(8000, done);
 });
 
-
 gulp.task('clean', function() {
-  return gulp.src(['dist/*', 'app/js/templates.js', '!dist/.git']).pipe($.clean());
+  return gulp.src(['dist/*', 'app/js/templates.js', 'app/css/*', '!dist/.git']).pipe($.clean());
 });
 
 gulp.task('bump', ['update-version-manifests', 'update-version-config'], function () {
   gulp.start('update-version-comments');
 });
 
-gulp.task('build', ['usemin', 'copy', 'copy-locales', 'copy-images'], function () {
+gulp.task('build', function(callback) {
+  runSequence('less', 'usemin',
+    ['copy', 'copy-locales', 'copy-images'], function() {
       gulp.start('disable-production');
+    }
+  );
 });
+
 gulp.task('package', ['cleanup-dist']);
 
 gulp.task('publish', ['build'], function() {

package.json

@@ -48,6 +48,7 @@
     "gulp-concat": "^2.1.7",
     "gulp-grep-stream": "0.0.2",
     "gulp-imagemin": "^0.1.5",
+    "gulp-less": "^3.0.0",
     "gulp-livereload": "^3.0.2",
     "gulp-load-plugins": "^0.4.0",
     "gulp-manifest": "0.0.3",
@@ -60,6 +61,7 @@
     "gulp-usemin": "^0.3.11",
     "gulp-zip": "^0.1.2",
     "http": "0.0.0",
+    "run-sequence": "^1.0.2",
     "st": "^0.5.2"
   }
 }