r2630 - spinner: added an additional span (ui-spinner-button-inner) for better control of horizon...
Author: pazu2k@gmail.com
Date: Sat May 30 12:11:39 2009
New Revision: 2630
Modified:
branches/dev/spinner/themes/base/ui.spinner.css
branches/dev/spinner/ui/ui.spinner.js
Log:
spinner: added an additional span (ui-spinner-button-inner) for better
control of horizontal/vertical icon alignment and to support resizing in
Safari. Added a .ui-spinner-button css class to group button styles.
Modified: branches/dev/spinner/themes/base/ui.spinner.css
==============================================================================
--- branches/dev/spinner/themes/base/ui.spinner.css (original)
+++ branches/dev/spinner/themes/base/ui.spinner.css Sat May 30 12:11:39 2009
@@ -2,8 +2,11 @@
----------------------------------*/
.ui-spinner { position:relative; display: inline-block; overflow: hidden;
padding: 0; vertical-align: middle; height: 1.8em; }
.ui-spinner-box { float: left; border: none; background: none; padding: 0;
margin: .2em 22px .2em .4em; vertical-align: middle; color: inherit; }
-.ui-spinner-up, .ui-spinner-down { width: 22px; height: 42.5%;
font-size: .5em; padding: 0; margin: 0; z-index: 100; text-align: center;
vertical-align: middle; position: absolute; right: 0; cursor: default;
display: block; overflow: hidden; }
-.ui-spinner-down { bottom: 0; border-bottom: 0; }
-.ui-spinner .ui-icon { position: relative; margin: -50% auto 0; top: 8px; }
+.ui-spinner-button { width: 22px; height: 50%; font-size: .5em; padding:
0; margin: 0; z-index: 100; text-align: center; vertical-align: middle;
position: absolute; right: 0; cursor: default; display: block; overflow:
hidden; }
+.ui-spinner a.ui-spinner-button { border-top: none; border-right: none;
border-bottom: none; } /* more specificity required here to overide default
borders */
+.ui-spinner-button-inner { width: 16px; height: 100%; display: block;
position: relative; margin: auto; } /* horizontal centre icon */
+.ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; }
/* vertical centre icon */
+.ui-spinner-up { top: 0; }
+.ui-spinner-down { bottom: 0; }
.ui-spinner-list, .ui-spinner-listitem { display: block; }
.ui-spinner-list { margin: 0; padding: .4em; height: 1.8em; }
Modified: branches/dev/spinner/ui/ui.spinner.js
==============================================================================
--- branches/dev/spinner/ui/ui.spinner.js (original)
+++ branches/dev/spinner/ui/ui.spinner.js Sat May 30 12:11:39 2009
@@ -88,7 +88,7 @@
.css({
display: !$.support.opacity &&
$(self).css('display', 'inline-block') ? 'inline' : false
})
- .append('<a class="ui-spinner-up ui-state-default ui-corner-tr"><span
class="ui-icon ui-icon-triangle-1-n">▲</span></a>')
+ .append('<a class="ui-spinner-button ui-spinner-up ui-state-default
ui-corner-tr"><span class="ui-spinner-button-inner"><span class="ui-icon
ui-icon-triangle-1-n">▲</span></span></a>')
.find('.ui-spinner-up')
.bind('mousedown', function(event) {
$(this).addClass(active);
@@ -113,7 +113,7 @@
}
})
.end()
- .append('<a class="ui-spinner-down ui-state-default ui-corner-br"><span
class="ui-icon ui-icon-triangle-1-s">▼</span></a>')
+ .append('<a class="ui-spinner-button ui-spinner-down ui-state-default
ui-corner-br"><span class="ui-spinner-button-inner"><span class="ui-icon
ui-icon-triangle-1-s">▼</span></span></a>')
.find('.ui-spinner-down')
.bind('mousedown', function(event) {
$(this).addClass(active);