r3348 committed - added the markup and CSS to support 2 icons, no text
Revision: 3348
Author: scottjehl
Date: Thu Oct 1 12:37:06 2009
Log: added the markup and CSS to support 2 icons, no text
http://code.google.com/p/jquery-ui/source/detail?r=3348
Modified:
/branches/dev/tests/static/button/default.html
/branches/dev/themes/base/ui.button.css
=======================================
--- /branches/dev/tests/static/button/default.html Thu Oct 1 11:53:50 2009
+++ /branches/dev/tests/static/button/default.html Thu Oct 1 12:37:06 2009
@@ -36,6 +36,12 @@
<span class="ui-button-text">Button</span>
<span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
</button>
+
+ <button class="ui-button ui-button-icons-only ui-widget ui-state-default
ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
+ <span class="ui-button-text">Button</span>
+ <span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
+ </button>
</div>
<h2>Using anchor elements</h2>
@@ -60,6 +66,12 @@
<span class="ui-button-text">Button</span>
<span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
</a>
+
+ <a href="#" class="ui-button ui-button-icons-only ui-widget
ui-state-default ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
+ <span class="ui-button-text">Button</span>
+ <span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
+ </a>
</div>
@@ -86,6 +98,12 @@
<span class="ui-button-text">Button</span>
<span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
</label>
+
+ <label class="ui-button ui-button-icons-only ui-widget ui-state-default
ui-corner-all">
+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
+ <span class="ui-button-text">Button</span>
+ <span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
+ </label>
</div>
=======================================
--- /branches/dev/themes/base/ui.button.css Thu Oct 1 12:08:42 2009
+++ /branches/dev/themes/base/ui.button.css Thu Oct 1 12:37:06 2009
@@ -4,19 +4,22 @@
.ui-button { display: inline-block; position: relative; padding: 0;
margin-right: .1em; text-decoration: none !important; cursor: pointer;
text-align: center; zoom: 1; overflow: visible; } /* the overflow property
removes extra width in IE */
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a
width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to
need a little more width */
+.ui-button-icons-only { width: 3em; }
+button.ui-button-icons-only { width: 3.2em; }
+
/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.3; }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
-.ui-button-icon-only .ui-button-text { padding: .4em; text-indent:
-9999999px; }
+.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text
{
padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon .ui-button-text, .ui-button-text-icons .ui-button-text
{
padding: .4em 1em .4em 1.8em; }
.ui-button-text-icons .ui-button-text { padding-right: 1.8em; }
/*button icon element(s) */
-.ui-button-icon-only .ui-icon, .ui-button-text-icon .ui-icon, .ui-button-text-icons .ui-icon
{
position: absolute; top: 50%; margin-top: -8px; }
+.ui-button-icon-only .ui-icon, .ui-button-text-icon .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon
{
position: absolute; top: 50%; margin-top: -8px; }
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
-.ui-button-text-icon .ui-icon-primary, .ui-button-text-icons .ui-icon-primary
{
left: .4em; }
-.ui-button-text-icons .ui-button-icon-secondary { right: .4em; }
+.ui-button-text-icon .ui-icon-primary, .ui-button-text-icons .ui-icon-primary, .ui-button-icons-only .ui-icon-primary
{
left: .4em; }
+.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary
{
right: .4em; }
/*button sets*/
.ui-button-set { margin-right: 7px; }