Style changes

controller.boolean.js

@@ -16,7 +16,8 @@ var BooleanController = function() {
     	input.checked = !input.checked; // counteracts default.
     }, false);
     
-    this.domElement.style.cursor = 'pointer';
+    this.domElement.style.cursor = "pointer";
+    this.propertyNameElement.style.cursor = "pointer";
     this.domElement.appendChild(input);
 
 };

controller.function.js

@@ -2,13 +2,11 @@ var FunctionController = function() {
 	this.type = "function";
 	var _this = this;
     Controller.apply(this, arguments);
-    var input = document.createElement('input');
-    input.setAttribute('type', 'submit');
     this.domElement.addEventListener('click', function() {
     	_this.object[_this.propertyName].call(_this.object);
     }, false);
     this.domElement.style.cursor = "pointer";
-    this.domElement.appendChild(input);
+    this.propertyNameElement.style.cursor = "pointer";
 };
 FunctionController.prototype = new Controller();
 FunctionController.prototype.constructor = FunctionController;

demo.html

@@ -16,6 +16,7 @@ var controllableObject =
       constrainedNum: 0,
       textProperty: "a string",
       booleanProperty: false,
+      anotherBooleanProperty: false,
       functionProperty: function() {
          alert("I am a function!");
       }
@@ -39,6 +40,8 @@ window.onload = function() {
    
    // Creates a checkbox
    GUI.add(controllableObject, "booleanProperty");
+   // Creates a checkbox
+   GUI.add(controllableObject, "anotherBooleanProperty");
    
    // Creates a button
    GUI.add(controllableObject, "functionProperty");

gui.css

@@ -20,6 +20,7 @@
 #guidat-controllers { 
 	height: 300px;
 	overflow-y: auto;
+	overflow-x: hidden;
 	background-color: #eee;
 }
 
@@ -41,31 +42,50 @@
 	padding: 5px;
 	height: 23px;
 	clear: left;
-	border-bottom: 1px solid #444;
+	border-bottom: 1px solid #222;
 	background-color: #111;
 }
+
+.guidat-controller.boolean:hover,
+.guidat-controller.function:hover{
+	background-color: #000;
+}
 .guidat-controller input { 
 	float: right;
+	outline: none;
 	clear: both;
 	border: 0;
 	padding: 2px;
 }
-
-
-.guidat-controller.number input[type=number] {
-	width: 55px;
-
+.guidat-controller.number { 
+	border-left: 5px solid #00aeff ;
 }
-
-
 .guidat-controller.string { 
-	border-left-color: #0af;
+	border-left: 5px solid #1ed36f;
+}
+.guidat-controller.string input { 
+	border: 0;
+	text-align: right;
+	color: #1ed36f;
+	
+	background-color: rgba(0,0,0,0);
+}
+.guidat-controller.boolean { 
+	border-left: 5px solid #54396e;
+}
+.guidat-controller.function { 
+	border-left: 5px solid #e61d5f;
+}
+.guidat-controller.number input[type=number] {
+	width: 45px;
 }
 
-.guidat-controller:nth-child(even) {
-	background-color: #1a1a1a;
+.guidat-controller.boolean input { 
+margin-top: 6px;
 }
 
+
+
 .guidat-controller:last-child {
 	
 	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
@@ -75,5 +95,6 @@ padding: 2px;
 
 .guidat-propertyname { 
 	padding: 5px;
+	cursor: default;
 	display: inline-block;
 }