Added "Transform to Responsive" CSS feature.

Author: petersirka

changelog.txt

@@ -2,6 +2,7 @@
 
 - added color palette
 - added version parser
+- added Transform to Responsive
 - updated tree by adding `Show this folder only`
 
 ========================= 1.4

code.bundle

@@ -1067,7 +1067,96 @@ FUNC.colorize = function(css, cls) {
 		}
 	}
 
-	return builder.join('\n');
+	var arr = [];
+	var prev = '';
+	for (var i = 0; i < builder.length; i++) {
+		var line = builder[i];
+		if (prev === line)
+			continue;
+		prev = line;
+		arr.push(line);
+	}
+
+	return arr.join('\n');
+};
+
+FUNC.responsive = function(css) {
+
+	var lines = css.split('\n');
+	var builder = [];
+
+	for (var i = 0; i < lines.length; i++) {
+
+		var line = lines[i];
+
+		if (!line) {
+			builder.push('');
+			continue;
+		}
+
+		var beg = line.indexOf('{');
+		if (beg === -1)
+			continue;
+
+		var end = line.lastIndexOf('}');
+		if (end === -1)
+			continue;
+
+		var cmd = line.substring(beg + 1, end).split(';');
+		var cmdnew = [];
+
+		for (var j = 0; j < cmd.length; j++) {
+			var c = cmd[j].trim().split(':').trim();
+			switch (c[0]) {
+				case 'margin':
+				case 'left':
+				case 'top':
+				case 'right':
+				case 'bottom':
+				case 'padding':
+				case 'max-width':
+				case 'max-height':
+				case 'position':
+				case 'z-index':
+				case 'min-width':
+				case 'min-height':
+				case 'margin-left':
+				case 'margin-top':
+				case 'margin-right':
+				case 'margin-bottom':
+				case 'padding-left':
+				case 'padding-top':
+				case 'padding-right':
+				case 'padding-bottom':
+				case 'width':
+				case 'font':
+				case 'font-size':
+				case 'line-height':
+				case 'height':
+					cmdnew.push(c[0] + ': ' + c[1]);
+					break;
+			}
+		}
+		if (cmdnew.length) {
+			var selector = line.substring(0, beg).trim();
+			var sel = selector.split(',').trim();
+			for (var k = 0; k < sel.length; k++)
+				sel[k] = sel[k].trim().replace(/\s{2,}/g, ' ');
+			builder.push(sel.join(', ') + ' { ' + cmdnew.join('; ') + '; }');
+		}
+	}
+
+	var arr = [];
+	var prev = '';
+	for (var i = 0; i < builder.length; i++) {
+		var line = builder[i];
+		if (prev === line)
+			continue;
+		prev = line;
+		arr.push(line);
+	}
+
+	return arr.join('\n');
 };
 
 FUNC.makejsonfromschema = function(val) {

public/js/func.js

@@ -648,9 +648,12 @@
 					tools.push({ name: '@(Parse keys)', icon: 'barcode', value: 'parsekeys' });
 
 				if ((code.current.ext === 'css' || code.current.ext === 'html') && (/\:(\s)?#|#\w{6}|color\:/).test(text))
-					items.push({ name: '@(Transform for Dark mode)', icon: 'tint', value: 'darkmode' });
+					items.push({ name: '@(Transform to Dark mode)', icon: 'tint', value: 'darkmode' });
 
-				if ((/(#)?[A-F0-9]{6}/i).test(text))
+				if ((code.current.ext === 'css' || code.current.ext === 'html'))
+					items.push({ name: '@(Transform to Responsive)', icon: 'tablet', value: 'responsive' });
+
+				if ((/(#)?[A-F0-9]{6}/i).test(text) && text.indexOf('\n') === -1)
 					items.push({ name: '@(Convert to RGBA)', icon: 'palette', value: 'hex2rgba' });
 
 				if (((/\d+,(\s)?\d+,(\s)?\d+/i)).test(text))
@@ -867,6 +870,11 @@
 					return;
 				}
 
+				if (value.value === 'responsive') {
+					editor.replaceSelection(FUNC.responsive(text));
+					return;
+				}
+
 				if (value.value === 'removedarkmode') {
 					editor.replaceSelection(FUNC.removecssclass('.ui-dark', text));
 					return;