integrating LESS

gulpfile.js

@@ -1,13 +1,15 @@
 var gulp   = require('gulp');
 var jshint = require('gulp-jshint');
 var qunit  = require('gulp-qunit');
+var less   = require('gulp-less');
 var concat = require('gulp-concat');
 var uglify = require('gulp-uglify');
 var rename = require('gulp-rename');
 var header = require('gulp-header');
 var footer = require('gulp-footer');
 var util   = require('gulp-util');
 var open   = require('gulp-open');
+var path   = require('path');
 
 var pkg = require('./package.json');
 
@@ -27,12 +29,12 @@ var jsSrc = [
 ];
 
 var cssSrc = [
-  './src/css/editor.css',
-  './src/css/toolbar.css',
-  './src/css/tooltip.css',
-  './src/css/embeds.css',
-  './src/css/icons.css',
-  './src/css/animations.css'
+  './src/css/editor.less',
+  './src/css/toolbar.less',
+  './src/css/tooltip.less',
+  './src/css/embeds.less',
+  './src/css/icons.less',
+  './src/css/animations.less'
 ];
 
 var distDest = './dist/';
@@ -85,6 +87,7 @@ gulp.task('build', function() {
 
   gulp.src(cssSrc)
       .pipe(concat(cssDistName))
+      .pipe(less())
       .pipe(gulp.dest(distDest));
 });
 

package.json

@@ -22,6 +22,7 @@
     "gulp-footer": "~1.0.3",
     "gulp-header": "~1.0.2",
     "gulp-jshint": "~1.3.4",
+    "gulp-less": "^1.3.1",
     "gulp-open": "^0.2.8",
     "gulp-qunit": "^0.3.3",
     "gulp-rename": "~0.2.2",

src/css/editor.css → src/css/editor.less

@@ -2,6 +2,8 @@
  * Editor
  */
 
+ @import 'variables.less';
+
 .ck-editor {
   font-family: Georgia, serif;
   margin: 1em 0;
@@ -22,10 +24,10 @@
   color: #bbb;
 }
 .ck-editor a {
-  color: #40b855;
+  color: @themeColorText;
 }
 .ck-editor blockquote {
-  border-left: 4px solid #4CD964;
+  border-left: 4px solid @themeColorText;
   margin: 0 0 0 -1.2em;
   padding-left: 1.05em;
   color: #a0a0a0;

src/css/safari-hacks.css

@@ -0,0 +1,12 @@
+/* Safari only media query hack */
+@media \\0 screen {
+  /* Safari bug: can't remove top/left properties so transition always animates from corner */
+  .ck-toolbar {
+    transition: none;
+  }
+  /* Safari bug: text rendering antialiasing shifts when animating opacity */
+  .ck-tooltip {
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+  }
+}

src/css/toolbar.css → src/css/toolbar.less

@@ -17,12 +17,6 @@
   transition: left 0.1s, top 0.1s;
   margin-bottom: 0.5em; /* space for arrow */
 }
-@media \\0 screen {
-  /* Safari fix: always transitions from 0,0 */
-  .ck-toolbar {
-    transition: none;
-  }
-}
 
 .ck-toolbar:after {
   content: '';
@@ -88,7 +82,7 @@
 }
 .ck-toolbar-btn:active,
 .ck-toolbar-btn.active {
-  color: #4CD964;
+  color: @themeColor;
 }
 
 .ck-toolbar-prompt {
@@ -124,5 +118,5 @@
   position: absolute;
   z-index: -1;
   background-color: rgba(76,217,100,0.08);
-  border-bottom: 2px dotted #4CD964;
+  border-bottom: 2px dotted @themeColor;
 }

src/css/tooltip.css → src/css/tooltip.less

@@ -42,10 +42,3 @@
 .ck-tooltip a:hover {
   text-decoration: underline;
 }
-@media \\0 screen {
-  /* Safari fix: text rendering when animating opacity */
-  .ck-tooltip {
-    font-weight: 500;
-    -webkit-font-smoothing: antialiased;
-  }
-}

src/css/variables.less

@@ -0,0 +1,4 @@
+// LESS Variables
+
+@themeColor     : rgb(76, 217, 100);
+@themeColorText : darken(@themeColor, 10%);