Merge pull request #6 from FinalAngel/feature/libsass

Port to libsass

.gitignore

@@ -39,4 +39,5 @@ lib/
 man/
 share/
 .editorconfig
-cms/static/cms/compass_app_log.txt
+cms/static/cms/compass_app_log.txt
+cms/static/cms/node_modules

cms/static/cms/gulpfile.js

@@ -0,0 +1,46 @@
+'use strict';
+
+// #####################################################################################################################
+// #IMPORTS#
+var autoprefixer = require('gulp-autoprefixer');
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var sass = require('gulp-sass');
+var sourcemaps = require('gulp-sourcemaps');
+var minifyCss = require('gulp-minify-css');
+
+// #####################################################################################################################
+// #SETTINGS#
+var PROJECT_ROOT = '.';
+var PROJECT_PATH = {
+    'sass': PROJECT_ROOT + '/sass',
+    'css': PROJECT_ROOT + '/css'
+};
+
+var PROJECT_PATTERNS = {
+    'sass': [
+        PROJECT_PATH.sass + '/**/*.{scss,sass}'
+    ]
+};
+
+// #####################################################################################################################
+// #TASKS#
+gulp.task('sass', function () {
+    gulp.src(PROJECT_PATTERNS.sass)
+        .pipe(sourcemaps.init())
+        .pipe(sass())
+        .on('error', gutil.log.bind(console))
+        .pipe(autoprefixer({
+            browsers: ['last 3 versions'],
+            cascade: false
+        }))
+        .pipe(minifyCss())
+        .pipe(sourcemaps.write())
+        .pipe(gulp.dest(PROJECT_PATH.css));
+});
+
+gulp.task('watch', function () {
+    gulp.watch(PROJECT_PATTERNS.sass, ['sass']);
+});
+
+gulp.task('default', ['sass', 'watch']);

cms/static/cms/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "package",
+    "private": true,
+    "dependencies": {
+        "gulp": "3.8.11",
+        "gulp-autoprefixer": "2.3.1",
+        "gulp-minify-css": "^1.1.6",
+        "gulp-sass": "2.0.1",
+        "gulp-sourcemaps": "1.5.2",
+        "gulp-util": "3.0.5"
+    },
+    "engines": {
+       "node": "0.9.0"
+    }
+}

cms/static/cms/sass/cms.base.scss

@@ -42,7 +42,7 @@
 .cms_dialog {
 	position:absolute; left:50%; top:50%; z-index:99999;
 	width:500px; height:200px; padding:25px; margin:-100px 0 0 -275px;
-	background:white; border:1px solid #ccc; @include border-radius(5px);
+	background:white; border:1px solid #ccc; border-radius:5px;
 
 	h1 { padding:0; margin:0 0 15px; }
 	form { padding:15px 0; margin:15px 0; border-top:1px solid #f3f3f3; }

cms/static/cms/sass/cms.pagetree.scss

@@ -127,7 +127,7 @@ $color-background-blue-hover: #e6f6fd;
 	.info-details { cursor:default;
 		position:absolute; right:-6px; top:-6px; z-index:100;
 		text-align:left; line-height:18px; padding:5px 10px;
-		background:white; border:1px solid #ccc; @include border-radius(3px 0 3px 3px);
+		background:white; border:1px solid #ccc; border-radius:3px 0 3px 3px;
 		mark { font-weight:bold; background:none; font-style:normal;
 			@include inline-block(); min-width:100px; }
 		span { display:inline !important; }
@@ -166,7 +166,7 @@ $color-background-blue-hover: #e6f6fd;
 		border: 1px solid transparent;
 		width:12px !important; height:12px !important; margin:-3px 0 0 !important;
 		@include inline-block();
-		@include border-radius(7px);
+		border-radius:7px;
 		color: transparent;
 		// colors used within the tree
 		&.dirty { background-color:#6ba6ff;
@@ -187,7 +187,7 @@ $color-background-blue-hover: #e6f6fd;
 .language-tooltip { display:none; position:absolute; right:20px; top:4px; z-index:9999;
 	line-height:1; padding:4px 6px; font-size:11px; color:#ccc;
 	background-color:black; background:rgba(black, 0.8); border:none;
-	@include border-radius(3px);
+	border-radius:3px;
 	a { color:#ddd; }
 	a:hover { color:white; text-decoration:none; }
 	&:before { display:block; width:0; height:0;

cms/static/cms/sass/includes/_clipboard.scss

@@ -7,20 +7,20 @@
 //##################################################################################################################
 // #CLIPBOARD#
 .cms_clipboard { position:fixed; left:0; top:130px; z-index:99999; display:none;
-	background:rgba(255,255,255,0.6); padding:3px 3px 3px 0; @include border-radius(0 3px 3px 0);
+	background:rgba(255,255,255,0.6); padding:3px 3px 3px 0; border-radius:0 3px 3px 0;
 
 	p { padding:0; margin:0; }
 
 	.cms_clipboard-numbers { margin:0 0 2px; }
-	.cms_clipboard-numbers a { display:block; width:20px; height:30px; @include hide-text(); @include border-radius(0 3px 3px 0);
+	.cms_clipboard-numbers a { display:block; width:20px; height:30px; @include hide-text(); border-radius:0 3px 3px 0;
 		border:5px solid $color-grey-70; border-left:none; border-right:none; overflow:hidden;
 		background:$color-grey-70 url('../img/toolbar/sprite_toolbar.png') no-repeat left -130px;
 		@include box-sizing(border-box);
 		&:hover, &:active, &:focus { background-color:$color-grey-90; background-position:-20px -130px; }
 	}
 	.cms_clipboard-numbers .cms_clipboard-numbers { display:none !important; }
 
-	.cms_clipboard-empty a { display:block; width:20px; height:20px; @include hide-text(); @include border-radius(0 3px 3px 0);
+	.cms_clipboard-empty a { display:block; width:20px; height:20px; @include hide-text(); border-radius:0 3px 3px 0;
 		background:$color-grey-70 url('../img/toolbar/sprite_toolbar.png') no-repeat left -110px; cursor:pointer;
 		&:hover, &:active, &:focus { background-color:$color-grey-90; background-position:-20px -110px; }
 	}
@@ -35,11 +35,11 @@
 	// custom style for draggable item
 	.cms_dragarea { padding-top:3px; }
 	.cms_draggable { position:relative; left:0; top:0; z-index:99; cursor:move;
-		@include border-radius(3px); padding:4px 5px 3px 5px; margin:0 0 2px;
+		border-radius:3px; padding:4px 5px 3px 5px; margin:0 0 2px;
 		background:$color-grey-5; border:1px solid $color-grey-70; }
 	.cms_draggable .cms_dragitem { padding-left:20px; }
 	.cms_draggable .cms_dragitem .cms_submenu { display:none !important; }
-	.cms_draggable .cms_dragitem-text { @include inline-block(); width:140px; height:21px; overflow:hidden; }
+	.cms_draggable .cms_dragitem-text { @include inline-block(); width:140px; height:15px; overflow:hidden; }
 
 	.cms_plugins { display:none; }
 }