r3341 committed - Partial update to the button widget CSS to display icons with absolute...
Revision: 3341
Author: fg.maggie
Date: Thu Oct 1 06:38:40 2009
Log: Partial update to the button widget CSS to display icons with absolute
positioning. Still need to add the classes we proposed in the dev list and
discussed yesterday -- we're planning to tackle that today.
http://code.google.com/p/jquery-ui/source/detail?r=3341
Modified:
/branches/dev/tests/static/button/default.html
/branches/dev/themes/base/ui.button.css
=======================================
--- /branches/dev/tests/static/button/default.html Tue Sep 29 10:39:44 2009
+++ /branches/dev/tests/static/button/default.html Thu Oct 1 06:38:40 2009
@@ -17,33 +17,33 @@
<div>
No icon
- <button class="ui-button ui-widget ui-state-default
ui-corner-all">Simple button, only text</button>
- <button class="ui-priority-secondary ui-button ui-widget
ui-state-default ui-corner-all">Secondary priority button</button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all">Highlight button</button>
- <button class="ui-state-error ui-button ui-widget ui-state-default
ui-corner-all">Error button</button>
+ <button class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-all"><span class="ui-button-text">Simple button, only
text</span></button>
+ <button class="ui-priority-secondary ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all"><span
class="ui-button-text">Secondary priority button</span></button>
+ <button class="ui-state-highlight ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all"><span
class="ui-button-text">Highlight button</span></button>
+ <button class="ui-state-error ui-button ui-button-text-only ui-widget
ui-state-default ui-corner-all"><span class="ui-button-text">Error
button</span></button>
</div>
<div>
No icon (hover)
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover">Simple button, only text</button>
- <button class="ui-priority-secondary ui-button ui-widget
ui-state-default ui-corner-all ui-state-hover">Secondary priority
button</button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover">Highlight button</button>
- <button class="ui-state-error ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover">Error button</button>
+ <button class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-all ui-state-hover"><span class="ui-button-text">Simple button,
only text</span></button>
+ <button class="ui-priority-secondary ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-hover"><span
class="ui-button-text">Secondary priority button</span></button>
+ <button class="ui-state-highlight ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-hover"><span
class="ui-button-text">Highlight button</span></button>
+ <button class="ui-state-error ui-button ui-button-text-only ui-widget
ui-state-default ui-corner-all ui-state-hover"><span
class="ui-button-text">Error button</span></button>
</div>
<div>
No icon (active)
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active">Simple button, only text</button>
- <button class="ui-priority-secondary ui-button ui-widget
ui-state-default ui-corner-all ui-state-active">Secondary priority
button</button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active">Highlight button</button>
- <button class="ui-state-error ui-button ui-widget ui-state-default
ui-corner-all ui-state-active">Error button</button>
+ <button class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-all ui-state-active"><span class="ui-button-text">Simple button,
only text</span></button>
+ <button class="ui-priority-secondary ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-active"><span
class="ui-button-text">Secondary priority button</span></button>
+ <button class="ui-state-highlight ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-active"><span
class="ui-button-text">Highlight button</span></button>
+ <button class="ui-state-error ui-button ui-button-text-only ui-widget
ui-state-default ui-corner-all ui-state-active"><span
class="ui-button-text">Error button</span></button>
</div>
<div>
No icon (disabled)
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-disabled">Simple button, only text</button>
- <button class="ui-priority-secondary ui-button ui-widget
ui-state-default ui-corner-all ui-state-disabled">Secondary priority
button</button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled">Highlight button</button>
- <button class="ui-state-error ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled">Error button</button>
+ <button class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-all ui-state-disabled"><span class="ui-button-text">Simple
button, only text</span></button>
+ <button class="ui-priority-secondary ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-disabled"><span
class="ui-button-text">Secondary priority button</span></button>
+ <button class="ui-state-highlight ui-button ui-button-text-only
ui-widget ui-state-default ui-corner-all ui-state-disabled"><span
class="ui-button-text">Highlight button</span></button>
+ <button class="ui-state-error ui-button ui-button-text-only ui-widget
ui-state-default ui-corner-all ui-state-disabled"><span
class="ui-button-text">Error button</span></button>
</div>
- <div class="with-icon">
+ <div>
With icon
<button class="ui-button ui-widget ui-state-default ui-corner-all"><span
class="ui-icon ui-icon-locked"></span> <span class="ui-button-text">Button
with icon on the left</span></button>
<button class="ui-button ui-button-icon-right ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-scissors"></span> <span
class="ui-button-text">Button with icon on the right</span></button>
@@ -85,50 +85,50 @@
</div>
<div class="ui-button-set">
Set
- <button class="ui-button ui-widget ui-state-default
ui-corner-left">Simple button, only text</button>
- <button class="ui-button ui-widget ui-state-default">Simple button, only
text</button>
- <button class="ui-button ui-widget ui-state-default
ui-corner-right">Simple button, only text</button>
+ <button class="ui-button ui-widget ui-state-default
ui-corner-left"><span class="ui-button-text">Simple button, only
text</span></button>
+ <button class="ui-button ui-widget ui-state-default"><span
class="ui-button-text">Simple button, only text</span></button>
+ <button class="ui-button ui-widget ui-state-default
ui-corner-right"><span class="ui-button-text">Simple button, only
text</span></button>
</div>
<div class="ui-button-set">
Set (hover)
- <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-hover">Simple button, only text</button>
- <button class="ui-button ui-widget ui-state-default
ui-state-hover">Simple button, only text</button>
- <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-hover">Simple button, only text</button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-hover"><span class="ui-button-text">Simple button, only
text</span></button>
+ <button class="ui-button ui-widget ui-state-default
ui-state-hover"><span class="ui-button-text">Simple button, only
text</span></button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-hover"><span class="ui-button-text">Simple button, only
text</span></button>
</div>
<div class="ui-button-set">
Set (active)
- <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-active">Simple button, only text</button>
- <button class="ui-button ui-widget ui-state-default
ui-state-active">Simple button, only text</button>
- <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-active">Simple button, only text</button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-active"><span class="ui-button-text">Simple button, only
text</span></button>
+ <button class="ui-button ui-widget ui-state-default
ui-state-active"><span class="ui-button-text">Simple button, only
text</span></button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-active"><span class="ui-button-text">Simple button, only
text</span></button>
</div>
<div class="ui-button-set">
Set (disabled)
- <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-disabled">Simple button, only text</button>
- <button class="ui-button ui-widget ui-state-default
ui-state-disabled">Simple button, only text</button>
- <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-disabled">Simple button, only text</button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-disabled"><span class="ui-button-text">Simple button, only
text</span></button>
+ <button class="ui-button ui-widget ui-state-default
ui-state-disabled"><span class="ui-button-text">Simple button, only
text</span></button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-right
ui-state-disabled"><span class="ui-button-text">Simple button, only
text</span></button>
</div>
<div class="ui-widget-header ui-corner-all ui-helper-clearfix"
id="toolbar">
- <button class="ui-button ui-widget ui-state-default
ui-corner-all">Toolbar</button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover">Toolbar</button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active">Toolbar</button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-all"><span
class="ui-button-text">Toolbar</span></button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover"><span class="ui-button-text">Toolbar</span></button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active"><span class="ui-button-text">Toolbar</span></button>
<span>
<button class="ui-button ui-button-icon ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-folder-open"/></button>
<button class="ui-button ui-button-icon ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-disk"/></button>
<button class="ui-button ui-button-icon ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-trash"/></button>
</span>
<span class="ui-button-set">
- <input type="checkbox" id="check1" style="display: none;"/><button
class="ui-button ui-widget ui-state-default
ui-corner-left">B</button><label for="check1" style="display:
none;">B</label>
- <input type="checkbox" id="check2" style="display: none;"/><button
class="ui-button ui-widget ui-state-default">I</button><label for="check2"
style="display: none;">I</label>
- <input type="checkbox" id="check3" style="display: none;"/><button
class="ui-button ui-widget ui-state-default
ui-corner-right">U</button><label for="check3" style="display:
none;">U</label>
+ <input type="checkbox" id="check1" style="display: none;"/><button
class="ui-button ui-widget ui-state-default ui-corner-left"><span
class="ui-button-text">B</span></button><label for="check1" style="display:
none;">B</label>
+ <input type="checkbox" id="check2" style="display: none;"/><button
class="ui-button ui-widget ui-state-default"><span
class="ui-button-text">I</span></button><label for="check2" style="display:
none;">I</label>
+ <input type="checkbox" id="check3" style="display: none;"/><button
class="ui-button ui-widget ui-state-default ui-corner-right"><span
class="ui-button-text">U</span></button><label for="check3" style="display:
none;">U</label>
</span>
<span>
<button class="ui-button ui-button-icon ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-print"/></button>
<button class="ui-button ui-button-icon ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-mail-closed"/></button>
</span>
<span id="mode" class="ui-button-set">
- <input type="radio" name="radio" id="mode1" style="display:
none;"/><button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-active">Edit</button><label for="mode1" style="display:
none;">Edit</label>
- <input type="radio" name="radio" id="mode2" style="display:
none;"/><button class="ui-button ui-widget ui-state-default
ui-corner-right">View</button><label for="mode2" style="display:
none;">View</label>
+ <input type="radio" name="radio" id="mode1" style="display:
none;"/><button class="ui-button ui-widget ui-state-default ui-corner-left
ui-state-active"><span class="ui-button-text">Edit</span></button><label
for="mode1" style="display: none;">Edit</label>
+ <input type="radio" name="radio" id="mode2" style="display:
none;"/><button class="ui-button ui-widget ui-state-default
ui-corner-right"><span class="ui-button-text">View</span></button><label
for="mode2" style="display: none;">View</label>
</span>
</div>
=======================================
--- /branches/dev/themes/base/ui.button.css Tue Sep 29 10:39:44 2009
+++ /branches/dev/themes/base/ui.button.css Thu Oct 1 06:38:40 2009
@@ -4,17 +4,30 @@
/* reset extra padding in Firefox */
button::-moz-focus-inner { border: 0; padding: 0; }
-.ui-button { position: relative; outline: 0; margin: 0 4px 0 0;
padding: .4em 1em; text-decoration: none !important; cursor: pointer;
text-align: center; zoom: 1; overflow: visible; } /* the overflow property
removes extra width in IE */
-
-.ui-button .ui-icon { float: left; margin: 0 .5em 0 -.5em; }
-
+.ui-button { position: relative; outline: 0; margin: 0 4px 0 0; padding:
0; height: 2.5em; text-decoration: none !important; cursor: pointer;
text-align: center; zoom: 1; overflow: visible; } /* the overflow property
removes extra width in IE */
+
+.ui-button .ui-button-text { display: block; padding: .4em 1em .4em 2.3em;
}
+.ui-button .ui-icon { display: block; position: absolute; top: 50%;
left: .5em; margin-top: -8px; }
+
+.ui-button.ui-button-icon-right .ui-button-text { padding-right: 2.3em;
padding-left: 1em; }
+.ui-button.ui-button-icon-right .ui-icon { left: auto; right: .5em; }
+
+
+/* using display: inline / inline-block
+.ui-button .ui-icon { display: inline; display: inline-block; margin:
0 .5em 0 -.5em; }
+.ui-button.ui-button-icon-right .ui-icon { margin: 0 -.5em 0 .5em; }
+*/
+
+/* using float left / right :
+.ui-button .ui-icon { float: left; margin: 0 .5em 0 -.5em; }
.ui-button.ui-button-icon-right .ui-icon { float: right; margin: 0 -.5em
0 .5em; }
+*/
.ui-button-set { margin-right: 7px; }
.ui-button-set .ui-button { margin-right:-3px; }
.ui-button.ui-button-icon { padding: .3em; } /* reduce padding to make
room for icon span */
-.ui-button.ui-button-icon .ui-icon { margin: 0; }
+.ui-button.ui-button-icon .ui-icon { position: relative; top: auto; left:
auto; right: auto; margin: 0; }