0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

updating css

Browse source
This commit is contained in:
Rolux 2010-02-27 09:16:58 +01:00
parent e805486d86
commit dc84b4ccf9
3 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
build/css/ox.ui.classic.css
View file

@ -103,13 +103,12 @@ Forms
background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(255, 255, 255)); background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(255, 255, 255));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(255, 255, 255))); background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
} }
.OxThemeClassic textarea.OxInput:focus { .OxThemeClassic .OxInput:focus {
border: 1px solid rgb(160, 160, 160); border: 1px solid rgb(160, 160, 160);
-moz-box-shadow: 0 0 2px rgb(128, 128, 128); -moz-box-shadow: 0 0 2px rgb(128, 128, 128);
-webkit-box-shadow: 0 0 2px rgb(128, 128, 128); -webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
} }
.OxThemeClassic input.OxInput.OxPlaceholder, .OxThemeClassic .OxInput.OxPlaceholder {
.OxThemeClassic textarea.OxInput.OxPlaceholder {
color: rgb(160, 160, 160) color: rgb(160, 160, 160)
} }

19
build/js/ox.ui.js
View file

@ -1734,7 +1734,7 @@ requires
highlight: false, highlight: false,
id: "", id: "",
label: "", label: "",
labelWidth: 0, labelWidth: 64,
placeholder: "", placeholder: "",
selected: 0, selected: 0,
size: "medium", size: "medium",
@ -1994,16 +1994,23 @@ requires
} }
that.height = function(value) { that.height = function(value) {
var percent = 8 / value * 100; var stop = 8 / value;
if (self.options.type == "textarea") { if (self.options.type == "textarea") {
that.$element.height(value); that.$element
.height(value)
.css({
background: "-moz-linear-gradient(top, rgb(224, 224, 224), rgb(208, 208, 208) " + (stop * 100) + "%, rgb(208, 208, 208) " + (100 - stop * 100) + "%, rgb(192, 192, 192))"
})
.css({
background: "-webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), color-stop(" + stop + ", rgb(208, 208, 208)), color-stop(" + (1 - stop) + ", rgb(208, 208, 208)), to(rgb(192, 192, 192)))"
});
that.$input that.$input
.height(value) .height(value)
.css({ .css({
background: "-moz-linear-gradient(top, rgb(224, 224, 224), rgb(240, 240, 240) " + percent + "%, rgb(240, 240, 240) " + (100 - percent) + "%, rgb(255, 255, 255))" background: "-moz-linear-gradient(top, rgb(224, 224, 224), rgb(240, 240, 240) " + (stop * 100) + "%, rgb(240, 240, 240) " + (100 - stop * 100) + "%, rgb(255, 255, 255))"
}) })
.css({ .css({
background: "-webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), color-stop(" + (percent / 100) + ", rgb(240, 240, 240)), color-stop(" + (1 - percent / 100) + ", rgb(240, 240, 240)), to(rgb(255, 255, 255)))" background: "-webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), color-stop(" + stop + ", rgb(240, 240, 240)), color-stop(" + (1 - stop) + ", rgb(240, 240, 240)), to(rgb(255, 255, 255)))"
}); });
} }
return that; return that;
@ -2012,7 +2019,7 @@ requires
that.width = function(value) { that.width = function(value) {
that.$element.width(value); that.$element.width(value);
that.$input.width(value - (self.options.type == "textarea" ? 0 : 2) - that.$input.width(value - (self.options.type == "textarea" ? 0 : 2) -
(self.options.labelWidth ? self.options.labelWidth + 18 : 0) - (self.options.label ? self.options.labelWidth + 18 : 0) -
(self.options.placeholder.length > 1 ? 26 : 0) - (self.options.placeholder.length > 1 ? 26 : 0) -
(self.options.clear ? 31 : 0)); (self.options.clear ? 31 : 0));
// fixme: the values above are all weird guesswork // fixme: the values above are all weird guesswork

4
demos/test/index.html
View file

@ -517,14 +517,12 @@
$("<br>").appendTo(mainPanel.$element); $("<br>").appendTo(mainPanel.$element);
$("<br>").appendTo(mainPanel.$element); $("<br>").appendTo(mainPanel.$element);
Ox.Input({ Ox.Input({
label: "Label", label: "Label"
labelWidth: 48,
}).width(400).addClass("margin").appendTo(mainPanel); }).width(400).addClass("margin").appendTo(mainPanel);
$("<br>").appendTo(mainPanel.$element); $("<br>").appendTo(mainPanel.$element);
$("<br>").appendTo(mainPanel.$element); $("<br>").appendTo(mainPanel.$element);
Ox.Input({ Ox.Input({
label: "Label", label: "Label",
labelWidth: 48,
//placeholder: "some\ntext", //placeholder: "some\ntext",
type: "textarea" type: "textarea"
}).width(400).height(100).addClass("margin").appendTo(mainPanel); }).width(400).height(100).addClass("margin").appendTo(mainPanel);