r3345 committed - Styling is good now. We will still need to fix inline-block in FF2, bu...
Revision: 3345
Author: scottjehl
Date: Thu Oct 1 11:53:50 2009
Log: Styling is good now. We will still need to fix inline-block in FF2,
but other browsers are looking good.
Note: buttons with only an icon showing still have their button text, but
it's hidden from view. This allows consistent styling across all elements,
regardless of their contents.
http://code.google.com/p/jquery-ui/source/detail?r=3345
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 09:15:13 2009
+++ /branches/dev/tests/static/button/default.html Thu Oct 1 11:53:50 2009
@@ -21,8 +21,9 @@
<span class="ui-button-text">Button</span>
</button>
- <button class="ui-button ui-button-icon-only ui-widget ui-state-default
ui-corner-all">
- <span class="ui-button-icon-primary ui-icon
ui-icon-locked">&npsp;</span>
+ <button class="ui-button ui-button-icon-only ui-widget ui-state-default
ui-corner-all" title="Button">
+ <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
+ <span class="ui-button-text">Button</span>
</button>
<button class="ui-button ui-button-text-icon ui-widget ui-state-default
ui-corner-all">
@@ -44,8 +45,9 @@
<span class="ui-button-text">Button</span>
</a>
- <a href="#" class="ui-button ui-button-icon-only ui-widget
ui-state-default ui-corner-all">
- <span class="ui-button-icon-primary ui-icon
ui-icon-locked">&npsp;</span>
+ <a href="#" class="ui-button ui-button-icon-only ui-widget
ui-state-default ui-corner-all" title="Button">
+ <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
+ <span class="ui-button-text">Button</span>
</a>
<a href="#" class="ui-button ui-button-text-icon ui-widget
ui-state-default ui-corner-all">
@@ -54,7 +56,7 @@
</a>
<a href="#" class="ui-button ui-button-text-icons ui-widget
ui-state-default ui-corner-all">
- <span class="ui-button-icon-primary ui-icon ui-icon-gear">&npsp;</span>
+ <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>
@@ -69,8 +71,9 @@
<span class="ui-button-text">Button</span>
</label>
- <label class="ui-button ui-button-icon-only ui-widget ui-state-default
ui-corner-all">
+ <label class="ui-button ui-button-icon-only ui-widget ui-state-default
ui-corner-all" title="Button">
<span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
+ <span class="ui-button-text">Button</span>
</label>
<label class="ui-button ui-button-text-icon ui-widget ui-state-default
ui-corner-all">
=======================================
--- /branches/dev/themes/base/ui.button.css Thu Oct 1 09:15:13 2009
+++ /branches/dev/themes/base/ui.button.css Thu Oct 1 11:53:50 2009
@@ -1,22 +1,20 @@
/* Button
----------------------------------*/
-.ui-button { display: inline-block; position: relative; margin: 0;
text-decoration: none !important; cursor: pointer; text-align: center;
zoom: 1; overflow: visible; } /* the overflow property removes extra width
in IE */
-
-/* button padding scenarios */
-.ui-button-text-only { padding: .4em 1em; }
-.ui-button-icon-only { padding: .4em; }
-.ui-button-icon-only .ui-button-icon-primary { }
-.ui-button-text-icon, .ui-button-text-icons { padding: 0; } /*when icons +
text are present, padding moves to text */
+.ui-button { display: inline-block; position: relative; padding: 0;
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 */
/*button text element */
-.ui-button .ui-button-text { display: block; min-height: 16px; }
-.ui-button-text-icon .ui-button-text, .ui-button-text-icons .ui-button-text
{
display: block; padding: .4em 1em .4em 1.8em; }
+.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-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 .ui-icon { display: block; }
-.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
{
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; }
@@ -24,8 +22,8 @@
.ui-button-set { margin-right: 7px; }
.ui-button-set .ui-button { margin-right: 0; margin-left: 0;
margin-right:-3px; }
-/* reset extra padding in Firefox */
-.ui-button::-moz-focus-inner { border: 0; padding: 0; }
+/* workarounds */
+button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset
extra padding in Firefox */