mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Changes to gui.css
This commit is contained in:
parent
506d5b597c
commit
2c03829a83
@ -1,9 +1,14 @@
|
|||||||
var Controller = function() {
|
var Controller = function(object, propertyName) {
|
||||||
this.domElement = document.createElement('div');
|
this.domElement = document.createElement('div');
|
||||||
this.domElement.setAttribute('class', 'guidat-controller');
|
this.domElement.setAttribute('class', 'guidat-controller');
|
||||||
|
|
||||||
this.object = arguments[0];
|
this.object = arguments[0];
|
||||||
this.propertyName = arguments[1];
|
this.propertyName = arguments[1];
|
||||||
|
|
||||||
|
this.propertyNameElement = document.createElement('span');
|
||||||
|
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
|
||||||
|
this.propertyNameElement.innerHTML = arguments[1];
|
||||||
|
this.domElement.appendChild(this.propertyNameElement);
|
||||||
};
|
};
|
||||||
|
|
||||||
var NumberController = function() {
|
var NumberController = function() {
|
||||||
|
31
gui.css
31
gui.css
@ -7,16 +7,19 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 100%;
|
left: 100%;
|
||||||
margin-left: -270px;
|
margin-left: -270px;
|
||||||
|
background-color: #fff;
|
||||||
-moz-transition: margin-top .2s ease-out;
|
-moz-transition: margin-top .2s ease-out;
|
||||||
-webkit-transition: margin-top .2s ease-out;
|
-webkit-transition: margin-top .2s ease-out;
|
||||||
transition: margin-top .2s ease-out;
|
transition: margin-top .2s ease-out;
|
||||||
background-color: #fff;
|
|
||||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||||
|
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
#guidat-controllers {
|
#guidat-controllers {
|
||||||
height: 300px;
|
height: 300px;
|
||||||
overflow-y: scroll;
|
overflow-y: auto;
|
||||||
|
background-color: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
#guidat-toggle {
|
#guidat-toggle {
|
||||||
@ -33,3 +36,27 @@
|
|||||||
#guidat-toggle:hover {
|
#guidat-toggle:hover {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.guidat-controller {
|
||||||
|
padding: 5px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
text-align: right;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guidat-controller:nth-child(even) {
|
||||||
|
background-color: #E1F9FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guidat-controller:last-child {
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.guidat-propertyname {
|
||||||
|
float: left;
|
||||||
|
margin: 5px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
6
gui.js
6
gui.js
@ -57,8 +57,10 @@ var GUI = new function() {
|
|||||||
var addHandlers = {
|
var addHandlers = {
|
||||||
|
|
||||||
"number": function() {
|
"number": function() {
|
||||||
var n = new NumberController(arguments);
|
|
||||||
return n;
|
return new NumberController(arguments);
|
||||||
|
|
||||||
|
// return n.button;
|
||||||
},
|
},
|
||||||
|
|
||||||
"string": function() {
|
"string": function() {
|
||||||
|
Loading…
Reference in New Issue
Block a user