r3344 committed - proposed markup finalized. CSS updated to match class situations. Styl...
Revision: 3344
Author: scottjehl
Date: Thu Oct 1 09:15:13 2009
Log: proposed markup finalized. CSS updated to match class situations.
Styling still in progress..
http://code.google.com/p/jquery-ui/source/detail?r=3344
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 07:48:50 2009
+++ /branches/dev/tests/static/button/default.html Thu Oct 1 09:15:13 2009
@@ -6,6 +6,7 @@
<link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
<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>
+ <script type="text/javascript" src="../static.js"></script>
<style>
div { margin: 0 0 1em; }
h2 { margin: 2em 0 1em; }
@@ -20,16 +21,16 @@
<span class="ui-button-text">Button</span>
</button>
- <button class="ui-button ui-widget ui-state-default ui-corner-all">
- <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
+ <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>
- <button class="ui-button ui-widget ui-state-default ui-corner-all">
+ <button class="ui-button ui-button-text-icon ui-widget ui-state-default
ui-corner-all">
<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-widget ui-state-default ui-corner-all">
+ <button 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"></span>
<span class="ui-button-text">Button</span>
<span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
@@ -43,17 +44,17 @@
<span class="ui-button-text">Button</span>
</a>
- <a href="#" class="ui-button ui-widget ui-state-default ui-corner-all">
- <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
+ <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>
- <a href="#" class="ui-button ui-widget ui-state-default ui-corner-all">
+ <a href="#" class="ui-button ui-button-text-icon ui-widget
ui-state-default ui-corner-all">
<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-widget ui-state-default ui-corner-all">
- <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
+ <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-text">Button</span>
<span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
</a>
@@ -68,16 +69,16 @@
<span class="ui-button-text">Button</span>
</label>
- <label class="ui-button ui-widget ui-state-default ui-corner-all">
+ <label 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"></span>
</label>
- <label class="ui-button ui-widget ui-state-default ui-corner-all">
+ <label class="ui-button ui-button-text-icon ui-widget ui-state-default
ui-corner-all">
<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-widget ui-state-default ui-corner-all">
+ <label 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"></span>
<span class="ui-button-text">Button</span>
<span class="ui-button-icon-secondary ui-icon
ui-icon-triangle-1-s"></span>
@@ -88,9 +89,9 @@
<h2>Button Sets</h2>
<div class="ui-button-set">
- <button class="ui-button ui-widget ui-state-default
ui-corner-left"><span class="ui-button-text">Simple button</span></button>
- <button class="ui-button ui-widget ui-state-default"><span
class="ui-button-text">Simple button</span></button>
- <button class="ui-button ui-widget ui-state-default
ui-corner-right"><span class="ui-button-text">Simple button</span></button>
+ <button class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-left"><span class="ui-button-text">Simple button</span></button>
+ <button class="ui-button ui-button-text-only ui-widget
ui-state-default"><span class="ui-button-text">Simple button</span></button>
+ <button class="ui-button ui-button-text-only ui-widget ui-state-default
ui-corner-right"><span class="ui-button-text">Simple button</span></button>
</div>
=======================================
--- /branches/dev/themes/base/ui.button.css Thu Oct 1 07:24:35 2009
+++ /branches/dev/themes/base/ui.button.css Thu Oct 1 09:15:13 2009
@@ -1,34 +1,31 @@
/* Button
----------------------------------*/
-/* reset extra padding in Firefox */
-button::-moz-focus-inner { border: 0; padding: 0; }
-
-.ui-button { display: inline-block; 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 { 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 */
+
+/*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-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-text-icon .ui-icon-primary, .ui-button-text-icons .ui-icon-primary
{
left: .4em; }
+.ui-button-text-icons .ui-button-icon-secondary { right: .4em; }
+
+/*button sets*/
.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 { position: relative; top: auto; left:
auto; right: auto; margin: 0; }
-
+.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; }