Props: Display vectors in rows

bin/style.css

@@ -555,6 +555,9 @@ input[type=checkbox]:checked:after {
 .hide-properties .error {
   color: red;
 }
+.hide-properties .vector {
+  flex-direction: row;
+}
 /* Curve editor */
 .hide-curve-editor:focus {
   background-color: rgba(0, 0, 0, 0.219);

bin/style.less

@@ -604,6 +604,10 @@ input[type=checkbox] {
 		color: red;
 	}
 
+	.vector {
+		flex-direction: row;
+	}
+
 }
 
 /* Curve editor */

hide/comp/PropsEditor.hx

@@ -58,11 +58,9 @@ class PropsEditor extends Component {
 				new Element('<input type="color" field="${p.name}">').appendTo(parent);
 			}
 			else {
-				var names = isColor ? ["r", "g", "b", "a"] : ["x", "y", "z", "w"];
+				var row = new Element('<div class="flex"/>').appendTo(parent);
 				for( i in 0...n ) {
-					var div = new Element('<div>').appendTo(parent);
-					new Element('<span>${names[i]} </span>').appendTo(div);
-					var e = new Element('<input type="range" class="small" field="${p.name}.$i">').appendTo(div);
+					var e = new Element('<input type="number" field="${p.name}.$i">').appendTo(row);
 					if(min == null) min = isColor ? 0.0 : -1.0;
 					if(max == null)	max = 1.0;
 					e.attr("min", "" + min);