r3320 committed - Updated styles for buttons, but still needs work in IE. In short, we ...
Revision: 3320
Author: fg.maggie
Date: Tue Sep 29 10:39:44 2009
Log: Updated styles for buttons, but still needs work in IE. In short, we
found the best solution that works in most browsers is to float the icons
to one side or the other (left, by default), however IE 6 & 7 wrap the
button text below the icon instead of adjusting the size to fit the icon
and text side by side -- sometimes called the IE float drop bug.
http://code.google.com/p/jquery-ui/source/detail?r=3320
Modified:
/branches/dev/tests/static/button/default.html
/branches/dev/themes/base/ui.button.css
=======================================
--- /branches/dev/tests/static/button/default.html Mon Sep 28 10:25:40 2009
+++ /branches/dev/tests/static/button/default.html Tue Sep 29 10:39:44 2009
@@ -7,9 +7,11 @@
<link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
<style>
+ div { margin: 0 0 1em; }
+
#toolbar { margin-top: 2em; }
- #toolbar span { margin-right: 1em }
- </style>
+ #toolbar button, #toolbar .ui-button-set { float: left; }
+ </style>
</head>
<body>
@@ -41,53 +43,45 @@
<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>
</div>
- <div>
+ <div class="with-icon">
With icon
- <button class="ui-button ui-widget ui-state-default ui-corner-all"><span
class="ui-icon ui-icon-locked"></span> Button with icon on the left</button>
- <button class="ui-button ui-widget ui-state-default
ui-corner-all">Button with icon on the right<span class="ui-icon
ui-icon-scissors"></span></button>
- <button class="ui-button ui-widget ui-state-default
ui-corner-all">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+ <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>
</div>
<div>
With icon, highlight
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-locked"></span> Button with
icon on the left</button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all">Button with icon on the right<span class="ui-icon
ui-icon-scissors"></span></button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+ <button class="ui-state-highlight 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-state-highlight 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>
</div>
<div>
With icon (hover)
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover"><span class="ui-icon ui-icon-locked"></span> Button with
icon on the left</button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover">Button with icon on the right<span class="ui-icon
ui-icon-scissors"></span></button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-hover"><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-widget ui-state-default ui-corner-all
ui-state-hover ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
</div>
<div>
With icon, highlight (hover)
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover"><span class="ui-icon ui-icon-locked"></span>
Button with icon on the left</button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover">Button with icon on the right<span
class="ui-icon ui-icon-scissors"></span></button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+ <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover"><span class="ui-icon ui-icon-locked"></span>
<span class="ui-button-text">Button with icon on the left</span></button>
+ <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-hover ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
</div>
<div>
With icon (active)
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active"><span class="ui-icon ui-icon-locked"></span> Button with
icon on the left</button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active">Button with icon on the right<span class="ui-icon
ui-icon-scissors"></span></button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-active"><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-widget ui-state-default ui-corner-all
ui-state-active ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
</div>
<div>
With icon, highlight (active)
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active"><span class="ui-icon ui-icon-locked"></span>
Button with icon on the left</button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active">Button with icon on the right<span
class="ui-icon ui-icon-scissors"></span></button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+ <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active"><span class="ui-icon ui-icon-locked"></span>
<span class="ui-button-text">Button with icon on the left</span></button>
+ <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-active ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
</div>
<div>
With icon (disabled)
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-disabled"><span class="ui-icon ui-icon-locked"></span> Button with
icon on the left</button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-disabled">Button with icon on the right<span class="ui-icon
ui-icon-scissors"></span></button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-disabled">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+ <button class="ui-button ui-widget ui-state-default ui-corner-all
ui-state-disabled"><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-widget ui-state-default ui-corner-all
ui-state-disabled ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
</div>
<div>
With icon, highlight (disabled)
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled"><span class="ui-icon
ui-icon-locked"></span> Button with icon on the left</button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled">Button with icon on the right<span
class="ui-icon ui-icon-scissors"></span></button>
- <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled">Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+ <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled"><span class="ui-icon
ui-icon-locked"></span> <span class="ui-button-text">Button with icon on
the left</span></button>
+ <button class="ui-state-highlight ui-button ui-widget ui-state-default
ui-corner-all ui-state-disabled ui-button-icon-right"><span class="ui-icon
ui-icon-scissors"></span> <span class="ui-button-text">Button with icon on
the right</span></button>
</div>
<div class="ui-button-set">
Set
@@ -119,9 +113,9 @@
<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>
<span>
- <button class="ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-folder-open"/></button>
- <button class="ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-disk"/></button>
- <button class="ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-trash"/></button>
+ <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>
@@ -129,8 +123,8 @@
<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>
</span>
<span>
- <button class="ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-print"/></button>
- <button class="ui-button ui-widget ui-state-default
ui-corner-all"><span class="ui-icon ui-icon-mail-closed"/></button>
+ <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>
=======================================
--- /branches/dev/themes/base/ui.button.css Mon Sep 28 10:01:08 2009
+++ /branches/dev/themes/base/ui.button.css Tue Sep 29 10:39:44 2009
@@ -1,6 +1,23 @@
/* Button
----------------------------------*/
-.ui-button { outline: 0; margin:0 4px 0 0; padding: .4em 1em;
text-decoration:none !important; cursor:pointer; position: relative;
text-align: center; zoom: 1; }
-.ui-button .ui-icon, button .ui-icon { display: inline-block !important; }
-
+
+/* 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.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; }
+
+
+
+
+
+