@@ -248,17 +248,6 @@ sub isDisabled {
# Overrides
#
-sub setId {
- my ($self, $id) = @_;
- $self->SUPER::setId($id);
- $self->{image}->setId($id . '_image');
- my $index = 0;
- foreach (qw(tl top tr l content r bl bottom br)) {
- $self->{__parts}[$index++]->setId($id . '_' . $_);
- }
- return $self;
-}
-
sub setAlt {
my ($self, $alt) = @_;
@@ -290,16 +279,14 @@ sub getHref {
sub _realize {
my $self = shift;
my $id = $self->getId;
- my $visibility = $self->getStyle('visibility');
my $options = {};
$self->SUPER::_realize;
+ $self->__buildParts;
$self->{__anchor}->prependChild($self->{image}->clone)
unless $self->getLabel;
- $self->{_options}{visibility} = $visibility if $visibility;
- $self->setStyle(visibility => 'hidden');
$options = toJSON($self->{_options});
$self->_appendInitScript("IWL.Button.create('$id', $options);");
}
@@ -308,12 +295,6 @@ sub _setupDefaultClass {
my $self = shift;
$self->SUPER::prependClass($self->{_defaultClass} . '_' . $self->{_options}{size});
$self->SUPER::prependClass($self->{_defaultClass});
- $self->{image}->prependClass($self->{_defaultClass} . '_image');
- my $index = 0;
- foreach (qw(tl top tr l content r bl bottom br)) {
- $self->{__parts}[$index++]->prependClass(
- $self->{_defaultClass} . '_' . $_);
- }
return $self;
}
@@ -324,20 +305,14 @@ sub _init {
my $id = $args{id};
$self->{_defaultClass} = 'button';
- $image->{_ignore} = 1;
-
$self->{image} = $image;
$self->{__anchor} = $anchor;
- $self->{__parts} = [IWL::Widget->newMultiple(9)];
+ $image->{_ignore} = 1;
$id = randomize($self->{_defaultClass}) unless $id;
- $self->{_tag} = 'div';
- foreach (@{$self->{__parts}}) {
- $_->{_tag} = 'div';
- $self->appendChild($_);
- }
- $self->{__parts}[4]->appendChild($image);
- $self->appendChild(IWL::Container->new(tag => 'noscript')->appendChild($anchor));
+ $self->{_tag} = 'table';
+ $self->setAttributes(cellspacing => 0, cellpadding => 0);
+ $self->appendAfter(IWL::Container->new(tag => 'noscript')->appendChild($anchor));
$self->setId($id);
$self->{_options}{size} = $args{size} || 'default';
@@ -358,6 +333,44 @@ sub _init {
return $self;
}
+# Internal
+#
+sub __buildParts {
+ my $self = shift;
+ for my $i (0 .. 2) {
+ my $row = IWL::Widget->new;
+ $row->{_tag} = 'tr';
+ $self->appendChild($row);
+ for (0 .. 2) {
+ my $cell = IWL::Widget->new;
+ $cell->{_tag} = 'td';
+ $row->appendChild($cell);
+ if ($i == 0 && $_ == 0) {
+ $cell->setClass($self->{_defaultClass} . '_top_left');
+ } elsif ($i == 0 && $_ == 1) {
+ $cell->setClass($self->{_defaultClass} . '_top_center');
+ } elsif ($i == 0 && $_ == 2) {
+ $cell->setClass($self->{_defaultClass} . '_top_right');
+ } elsif ($i == 1 && $_ == 0) {
+ $cell->setClass($self->{_defaultClass} . '_middle_left');
+ } elsif ($i == 1 && $_ == 1) {
+ $cell->setClass($self->{_defaultClass} . '_middle_center ' . $self->{_defaultClass} . '_content');
+ $cell->appendChild($self->{image}->setId($self->getId . '_image')->setClass($self->{_defaultClass} . '_image'));
+ $cell->appendChild(IWL::Label->new(id => $self->getId . '_label', class => $self->{_defaultClass} . '_label')
+ ->setText($self->{_options}{label})) if $self->{_options}{label};
+ } elsif ($i == 1 && $_ == 2) {
+ $cell->setClass($self->{_defaultClass} . '_middle_right');
+ } elsif ($i == 2 && $_ == 0) {
+ $cell->setClass($self->{_defaultClass} . '_bottom_left');
+ } elsif ($i == 2 && $_ == 1) {
+ $cell->setClass($self->{_defaultClass} . '_bottom_center');
+ } elsif ($i == 2 && $_ == 2) {
+ $cell->setClass($self->{_defaultClass} . '_bottom_right');
+ }
+ }
+ }
+}
+
1;
=head1 LICENCE AND COPYRIGHT
lib/IWL/Button.pm
share/images/button/button_horizontal.gif
@@ -4,58 +4,6 @@
* @extends IWL.Widget
* */
IWL.Button = Object.extend(Object.extend({}, IWL.Widget), (function () {
- function createElements() {
- var id = this.id;
- var className = $A(this.classNames()).first();
-
- this.buttonParts = this.childElements();
- this.buttonContent = $(id + '_content');
-
- var classNames = className + '_label ' + className + '_label_' + this.options.size;
- this.buttonContent.insert(
- '<span id="' + id + '_label" class="' + classNames + '">' +
- unescape(this.options.label) + '</span>'
- );
- this.buttonImage = $(id + '_image');
- this.buttonLabel = $(id + '_label');
- }
-
- function checkComplete(loaded) {
- if (!this.buttonImage || this.buttonImage.complete || loaded) {
- if (this.buttonLabel.getText()
- && !this.buttonContent.clientWidth)
- checkComplete.bind(this).delay(0.1);
- else
- adjust.call(this);
- } else {
- this.buttonImage.signalConnect('load', checkComplete.bind(this, true));
- }
- }
-
- function visibilityToggle(state) {
- if (!state) {
- var visible = this.visible();
- if (Prototype.Browser.Gecko && !visible) {
- var els = this.style;
- var originalVisibility = els.visibility;
- var originalPosition = els.position;
- var originalDisplay = els.display;
- els.visibility = 'hidden';
- els.position = 'absolute';
- els.display = 'block';
- return {visibility: originalVisibility, position: originalPosition, display: originalDisplay};
- }
- } else {
- if (Prototype.Browser.Gecko) {
- var els = this.style;
- els.display = state.display;
- els.position = state.position;
- els.visibility = state.visibility;
- return false;
- }
- }
- }
-
function createDisabledLayer() {
if (!this.parentNode)
return;
@@ -121,128 +69,6 @@ IWL.Button = Object.extend(Object.extend({}, IWL.Widget), (function () {
this.hidden.remove();
}
- function adjust() {
- var square = 6;
- var corner_size = 6;
- var image = this.buttonImage;
- var label = this.buttonLabel;
- var topleft = this.buttonParts[0];
- var top = this.buttonParts[1];
- var topright = this.buttonParts[2];
- var left = this.buttonParts[3];
- var content = this.buttonParts[4];
- var right = this.buttonParts[5];
- var bottomleft = this.buttonParts[6];
- var bottom = this.buttonParts[7];
- var bottomright = this.buttonParts[8];
- var state = visibilityToggle.call(this);
-
- if (!content) return;
- if (!label.getText()) {
- var text;
- if (image) {
- var ml = parseFloat(image.getStyle('margin-left')) || 0;
- var mr = parseFloat(image.getStyle('margin-right')) || 0;
- var ih = parseFloat(image.getStyle('height')) || image.height;
- if (this.options.size == 'small' && ih > 10) ih = 10;
- if (ml != mr)
- image.setStyle({marginLeft: ml + 'px', marginRight: ml + 'px'});
- }
- label.appendChild(text = 'M'.createTextNode());
- var height = content.getHeight();
- label.removeChild(text);
- if (height)
- content.style.height = height + 'px';
- if (image)
- image.style.marginTop = (height - ih)/2 + 'px';
- }
-
- if (this.options.size == 'medium') {
- square = 3;
- } else if (this.options.size == 'small') {
- square = 1;
- corner_size = 4;
- if (topleft) {
- topleft.style.width = corner_size + "px";
- topleft.style.height = corner_size + "px";
- }
- if (topright) {
- topright.style.width = corner_size + "px";
- topright.style.height = corner_size + "px";
- }
- if (bottomleft) {
- bottomleft.style.width = corner_size + "px";
- bottomleft.style.height = corner_size + "px";
- }
- if (bottomright) {
- bottomright.style.width = corner_size + "px";
- bottomright.style.height = corner_size + "px";
- }
- if (image && image.width && image.height) {
- var aspect = image.width / image.height;
- if (image.height > 10) {
- image.style.width = 10 * aspect + 'px';
- image.style.height = '10px';
- }
- }
- }
-
- var dims = content.getDimensions();
- var width = dims.width;
- height = height || dims.height;
-
- if (state) visibilityToggle.call(this, state);
- if (!width || !height) {
- adjust.bind(this).delay(0.5);
- return;
- }
-
- if (top) {
- top.style.left = corner_size + 'px';
- top.style.width = width + 'px';
- top.style.height = square + 'px';
- }
- if (topright) {
- topright.style.left = corner_size + width + 'px';
- }
- if (left) {
- left.style.top = corner_size + 'px';
- left.style.width = corner_size + 'px';
- left.style.height = 2 * square + height - (2 * corner_size) + 'px';
- }
- content.style.top = square + 'px';
- content.style.left = corner_size + 'px';
- if (right) {
- right.style.top = corner_size + 'px';
- right.style.left = corner_size + width + 'px';
- right.style.width = corner_size + 'px';
- right.style.height = 2 * square + height - (2 * corner_size) + 'px';
- }
- if (bottomleft) {
- bottomleft.style.top = 2 * square + height - corner_size + 'px';
- }
- if (bottom) {
- bottom.style.left = corner_size + 'px';
- bottom.style.top = square + height + 'px';
- bottom.style.width = width + 'px';
- bottom.style.height = square + 'px';
- }
- if (bottomright) {
- bottomright.style.left = corner_size + width + 'px';
- bottomright.style.top = 2 * square + height - corner_size + 'px';
- }
- this.style.width = 2 * corner_size + width + 'px';
- this.style.height = 2 * square + height + 'px';
-
- if (!this.loaded) {
- this.style.visibility = this.options.visibility || '';
- this.loaded = true;
- this.emitSignal('iwl:load');
- }
-
- return this.emitSignal('iwl:adjust');
- }
-
function mouseOverCallback() {
if (this._disabled) return;
var className = $A(this.classNames()).first();
@@ -282,7 +108,9 @@ IWL.Button = Object.extend(Object.extend({}, IWL.Widget), (function () {
* */
setLabel: function(text) {
this.buttonLabel.update(text && text.toString ? text.toString() : '');
- return adjust.call(this);
+ if (this._disabled)
+ disableButton.call(this);
+ return this;
},
/**
* Gets the image of the button
@@ -298,23 +126,30 @@ IWL.Button = Object.extend(Object.extend({}, IWL.Widget), (function () {
* */
setImage: function(source) {
if (source) {
- if (!this.buttonImage)
- this.buttonImage = this.buttonContent.insertBefore(
- new Element('img', {
- src: source,
- id: this.id + '_image',
- className: 'image ' + $A(this.classNames()).first() + '_image'
- }),
- this.buttonLabel
+ if (!this.buttonImage) {
+ var content = this.down('.button_content');
+ this.buttonImage = content.insertBefore(
+ Object.isElement(source)
+ ? source
+ : new Element('img', {
+ src: source,
+ id: this.id + '_image',
+ className: 'image ' + $A(this.classNames()).first() + '_image'
+ }),
+ content.firstChild
);
- else
+ } else
this.buttonImage.src = source;
- this.buttonImage.observe('load', adjust.bind(this));
+ this.buttonImage.complete
+ ? disableButton.call(this)
+ : this.buttonImage.observe('load', disableButton.bind(this));
} else {
this.buttonImage.remove();
this.buttonImage = undefined;
+ if (this._disabled)
+ disableButton.call(this);
}
- return adjust.call(this);
+ return this;
},
/**
* Sets the button as a form submit button
@@ -350,15 +185,13 @@ IWL.Button = Object.extend(Object.extend({}, IWL.Widget), (function () {
this._disabled = true;
this.addClassName(className + '_disabled ' + className + '_' + this.options.size + '_disabled');
createDisabledLayer.call(this);
- this._disabledCallback = disableButton.bind(this);
- this.signalConnect('iwl:adjust', this._disabledCallback);
- return adjust.call(this);
+ disableButton.call(this);
+ return this;
} else {
this._disabled = false;
this.removeClassName(className + '_disabled ' + className + '_' + this.options.size + '_disabled');
removeDisabledLayer.call(this);
- this.signalDisconnect('iwl:adjust', this._disabledCallback);
- return adjust.call(this);
+ return this;
}
},
/**
@@ -372,29 +205,28 @@ IWL.Button = Object.extend(Object.extend({}, IWL.Widget), (function () {
},
_init: function() {
- this.buttonParts = new Array;
this.buttonImage = null;
this.buttonLabel = null;
- this.buttonContent = null;
this.options = Object.extend({
size: 'default',
disabled: false,
submit: false,
label: ''
}, arguments[0] || {});
- this.loaded = false;
- this.cleanWhitespace();
- createElements.call(this);
- checkComplete.call(this);
+ this.buttonImage = $(this.id + '_image');
+ this.buttonLabel = $(this.id + '_label');
+
this.observe('mouseover', mouseOverCallback.bind(this));
this.observe('mouseout', mouseOutCallback.bind(this));
this.observe('mousedown', mouseDownCallback.bind(this));
this.observe('mouseup', mouseUpCallback.bind(this));
- if (this.options.disabled)
- this.setDisabled(true);
if (this.options.submit)
this.setSubmit.apply(this, Object.isArray(this.options.submit) ? this.options.submit : []);
- }
+ this.loaded = true;
+ this.emitSignal('iwl:load');
+ if (this.options.disabled)
+ this.setDisabled(true);
+ }
}
})());
share/jscript/button.js
@@ -322,84 +322,20 @@ a:hover {
/* Button */
.button {
- position: relative;
- float: left;
margin: 3px;
cursor: pointer;
}
.button_disabled {
cursor: default;
}
-.button_tl {
- position: absolute;
- top: 0px;
- left: 0px;
- width: 6px;
- height: 6px;
- font-size: 2px;
-}
-.button_top {
- position: absolute;
- top: 0px;
- left: 6px;
- height: 6px;
- font-size: 2px;
-}
-.button_tr {
- position: absolute;
- top: 0px;
- width: 6px;
- height: 6px;
- font-size: 2px;
-}
-.button_l {
- position: absolute;
- top: 6px;
- left: 0px;
- width: 6px;
- height: 15px;
- font-size: 2px;
-}
.button_content {
- position: absolute;
- top: 6px;
- left: 6px;
- white-space: nowrap;
background: #f0ebe6;
- font-size: 2px;
- padding: 0 2px;
}
.button_disabled .button_content {
background: #cccccc;
}
-.button_r {
- position: absolute;
- top: 6px;
- width: 6px;
- height: 15px;
- font-size: 2px;
-}
-.button_bl {
- position: absolute;
- left: 0px;
- width: 6px;
- height: 6px;
- font-size: 2px;
-}
-.button_bottom {
- position: absolute;
- left: 6px;
- height: 6px;
- font-size: 2px;
-}
-.button_br {
- position: absolute;
- width: 6px;
- height: 6px;
- font-size: 2px;
-}
.button_image {
- margin: 0px 5px 0px 0px;
+ margin: 0px 2px;
padding: 0px;
border: 0px;
vertical-align: middle;
@@ -420,243 +356,294 @@ a:hover {
text-align: center;
}
+.button_hover .button_label {
+ text-decoration: underline;
+}
+
.button_disabled .button_label {
color: #999;
font-weight: normal;
}
+.button_medium .button_image {
+ height: 14px;
+}
+
.button_medium .button_label {
font-size: 10px;
}
+
+.button_small .button_image {
+ height: 12px;
+}
+
.button_small .button_label {
font-size: 8px;
font-weight: normal;
color: black;
}
-.button_default .button_tl {
+.button_default .button_top_left {
+ width: 6px;
+ height: 6px;
background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat 0px 0px;
}
-.button_default .button_tr {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -6px 0px;
-}
-.button_default .button_bl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat 0px -6px;
+.button_default .button_top_center {
+ height: 6px;
+ background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px 0px;
}
-.button_default .button_br {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -6px -6px;
+.button_default .button_top_right {
+ width: 6px;
+ height: 6px;
+ background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -6px 0px;
}
-.button_default .button_l {
+.button_default .button_middle_left {
+ width: 6px;
+ height: 100%;
background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y 0px 0px;
}
-.button_default .button_r {
+.button_default .button_middle_right {
+ width: 6px;
+ height: 100%;
background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -6px 0px;
}
-.button_default .button_top {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px 0px;
+.button_default .button_bottom_left {
+ width: 6px;
+ height: 6px;
+ background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat 0px -6px;
}
-.button_default .button_bottom {
+.button_default .button_bottom_center {
+ height: 6px;
background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -6px;
}
+.button_default .button_bottom_right {
+ width: 6px;
+ height: 6px;
+ background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -6px -6px;
+}
-.button_default_press .button_tl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -12px 0px;
+.button_default.button_press .button_top_left {
+ background-position: -12px 0px;
}
-.button_default_press .button_tr {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -18px 0px;
+.button_default.button_press .button_top_center {
+ background-position: 0px -12px;
}
-.button_default_press .button_bl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -12px -6px;
+.button_default.button_press .button_top_right {
+ background-position: -18px 0px;
}
-.button_default_press .button_br {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -18px -6px;
+.button_default.button_press .button_middle_left {
+ background-position: -12px 0px;
}
-.button_default_press .button_l {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -12px 0px;
+.button_default.button_press .button_middle_right {
+ background-position: -18px 0px;
}
-.button_default_press .button_r {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -18px 0px;
+.button_default.button_press .button_bottom_left {
+ background-position: -12px -6px;
}
-.button_default_press .button_top {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -12px;
+.button_default.button_press .button_bottom_center {
+ background-position: 0px -18px;
}
-.button_default_press .button_bottom {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -18px;
+.button_default.button_press .button_bottom_right {
+ background-position: -18px -6px;
}
-.button_default_disabled .button_tl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -24px 0px;
+.button_default.button_disabled .button_top_left {
+ background-position: -24px 0px;
}
-.button_default_disabled .button_tr {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -30px 0px;
+.button_default.button_disabled .button_top_center {
+ background-position: 0px -24px;
}
-.button_default_disabled .button_bl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -24px -6px;
+.button_default.button_disabled .button_top_right {
+ background-position: -30px 0px;
}
-.button_default_disabled .button_br {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -30px -6px;
+.button_default.button_disabled .button_middle_left {
+ background-position: -24px 0px;
}
-.button_default_disabled .button_l {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -24px 0px;
+.button_default.button_disabled .button_middle_right {
+ background-position: -29px 0px;
}
-.button_default_disabled .button_r {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -29px 0px;
+.button_default.button_disabled .button_bottom_left {
+ background-position: -24px -6px;
}
-.button_default_disabled .button_top {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -24px;
+.button_default.button_disabled .button_bottom_center {
+ background-position: 0px -30px;
}
-.button_default_disabled .button_bottom {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -30px;
+.button_default.button_disabled .button_bottom_right {
+ background-position: -30px -6px;
}
-.button_medium .button_tl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat 0px 0px;
-}
-.button_medium .button_tr {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -6px 0px;
+.button_medium .button_top_left {
+ width: 4px;
+ height: 4px;
+ background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -2px 0px;
}
-.button_medium .button_bl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat 0px -6px;
+.button_medium .button_top_center {
+ height: 4px;
+ background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x -0px 0px;
}
-.button_medium .button_br {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -6px -6px;
+.button_medium .button_top_right {
+ width: 4px;
+ height: 4px;
+ background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -6px 0px;
}
-.button_medium .button_l {
+.button_medium .button_middle_left {
+ width: 4px;
background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y 0px -0px;
}
-.button_medium .button_r {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -6px -0px;
+.button_medium .button_middle_right {
+ width: 4px;
+ background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -8px -0px;
}
-.button_medium .button_top {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x -0px 0px;
+.button_medium .button_bottom_left {
+ width: 4px;
+ height: 4px;
+ background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat 0px -6px;
}
-.button_medium .button_bottom {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x -0px -9px;
+.button_medium .button_bottom_center {
+ height: 4px;
+ background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x -0px -8px;
+}
+.button_medium .button_bottom_right {
+ width: 4px;
+ height: 4px;
+ background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -8px -6px;
}
-.button_medium_press .button_tl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -12px 0px;
+.button_medium.button_press .button_top_left {
+ background-position: -14px 0px;
}
-.button_medium_press .button_tr {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -18px 0px;
+.button_medium.button_press .button_top_center {
+ background-position: 0px -12px;
}
-.button_medium_press .button_bl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -12px -6px;
+.button_medium.button_press .button_top_right {
+ background-position: -18px 0px;
}
-.button_medium_press .button_br {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -18px -6px;
+.button_medium.button_press .button_middle_left {
+ background-position: -12px 0px;
}
-.button_medium_press .button_l {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -12px 0px;
+.button_medium.button_press .button_middle_right {
+ background-position: -20px 0px;
}
-.button_medium_press .button_r {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -18px 0px;
+.button_medium.button_press .button_bottom_left {
+ background-position: -12px -6px;
}
-.button_medium_press .button_top {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -12px;
+.button_medium.button_press .button_bottom_center {
+ background-position: 0px -20px;
}
-.button_medium_press .button_bottom {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -21px;
+.button_medium.button_press .button_bottom_right {
+ background-position: -20px -6px;
}
-.button_medium_disabled .button_tl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -24px 0px;
+.button_medium.button_disabled .button_top_left {
+ background-position: -24px 0px;
}
-.button_medium_disabled .button_tr {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -30px 0px;
+.button_medium.button_disabled .button_top_center {
+ background-position: 0px -24px;
}
-.button_medium_disabled .button_bl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -24px -6px;
+.button_medium.button_disabled .button_top_right {
+ background-position: -30px 0px;
}
-.button_medium_disabled .button_br {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -30px -6px;
+.button_medium.button_disabled .button_middle_left {
+ background-position: -24px 0px;
}
-.button_medium_disabled .button_l {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -24px 0px;
+.button_medium.button_disabled .button_middle_right {
+ background-position: -31px 0px;
}
-.button_medium_disabled .button_r {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -29px 0px;
+.button_medium.button_disabled .button_bottom_left {
+ background-position: -24px -6px;
}
-.button_medium_disabled .button_top {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -24px;
+.button_medium.button_disabled .button_bottom_center {
+ background-position: 0px -32px;
}
-.button_medium_disabled .button_bottom {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -33px;
+.button_medium.button_disabled .button_bottom_right {
+ background-position: -31px -6px;
}
-.button_small .button_tl {
+.button_small .button_top_left {
+ width: 3px;
+ height: 3px;
background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -1px -1px;
}
-.button_small .button_tr {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -6px 0px;
-}
-.button_small .button_bl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat 0px -6px;
+.button_small .button_top_center {
+ height: 3px;
+ background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px 0px;
}
-.button_small .button_br {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -7px -7px;
+.button_small .button_top_right {
+ width: 3px;
+ height: 3px;
+ background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -6px 0px;
}
-.button_small .button_l {
+.button_small .button_middle_left {
+ width: 3px;
background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y 0px 0px;
}
-.button_small .button_r {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -8px 0px;
+.button_small .button_middle_right {
+ width: 3px;
+ background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -9px 0px;
}
-.button_small .button_top {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px 0px;
+.button_small .button_bottom_left {
+ width: 3px;
+ height: 3px;
+ background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat 0px -6px;
}
-.button_small .button_bottom {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -11px;
+.button_small .button_bottom_center {
+ height: 3px;
+ background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -9px;
+}
+.button_small .button_bottom_right {
+ width: 3px;
+ height: 3px;
+ background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -7px -7px;
}
-.button_small_press .button_tl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -13px -1px;
+.button_small.button_press .button_top_left {
+ background-position: -13px -1px;
}
-.button_small_press .button_tr {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -18px 0px;
+.button_small.button_press .button_top_center {
+ background-position: 0px -12px;
}
-.button_small_press .button_bl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -12px -6px;
+.button_small.button_press .button_top_right {
+ background-position: -18px 0px;
}
-.button_small_press .button_br {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -19px -7px;
+.button_small.button_press .button_middle_left {
+ background-position: -12px 0px;
}
-.button_small_press .button_l {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -12px 0px;
+.button_small.button_press .button_middle_right {
+ background-position: -21px 0px;
}
-.button_small_press .button_r {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -20px 0px;
+.button_small.button_press .button_bottom_left {
+ background-position: -12px -6px;
}
-.button_small_press .button_top {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -12px;
+.button_small.button_press .button_bottom_center {
+ background-position: 0px -21px;
}
-.button_small_press .button_bottom {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -23px;
+.button_small.button_press .button_bottom_right {
+ background-position: -20px -7px;
}
-.button_small_disabled .button_tl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -25px -1px;
+.button_small.button_disabled .button_top_left {
+ background-position: -25px -1px;
}
-.button_small_disabled .button_tr {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -30px 0px;
+.button_small.button_disabled .button_top_center {
+ background-position: 0px -24px;
}
-.button_small_disabled .button_bl {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -24px -6px;
+.button_small.button_disabled .button_top_right {
+ background-position: -30px 0px;
}
-.button_small_disabled .button_br {
- background: url(/iwl/skin/default/images/button/button_static.gif) no-repeat -31px -7px;
+.button_small.button_disabled .button_middle_left {
+ background-position: -24px 0px;
}
-.button_small_disabled .button_l {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -24px 0px;
+.button_small.button_disabled .button_middle_right {
+ background-position: -32px 0px;
}
-.button_small_disabled .button_r {
- background: url(/iwl/skin/default/images/button/button_vertical.gif) repeat-y -31px 0px;
+.button_small.button_disabled .button_bottom_left {
+ background-position: -24px -6px;
}
-.button_small_disabled .button_top {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -24px;
+.button_small.button_disabled .button_bottom_center {
+ background-position: 0px -33px;
}
-.button_small_disabled .button_bottom {
- background: url(/iwl/skin/default/images/button/button_horizontal.gif) repeat-x 0px -35px;
+.button_small.button_disabled .button_bottom_right {
+ background-position: -31px -7px;
}
/* ContentBox */
share/skin/main.css
138d7ae390a4162ef840009f4973c4179c174004
urandom
vkojouharov@gmail.com
http://github.com/urandom/iwl/commit/c28a32d2be4c65e61191e58f751f16382cbfffc5
c28a32d2be4c65e61191e58f751f16382cbfffc5
2008-11-19T12:22:30-08:00
2008-11-19T12:22:30-08:00
new button
c67ac3ee380d46c79c59d7ec985b08d60f48eb68
urandom
vkojouharov@gmail.com