jquery / jquery-ui

Downloads

The official jQuery user interface library. — Read more

This URL has Read+Write access

Button: Removed ui-button-text-icon class. Added ui-button-text-icon-primary and ui-button-text-icon-secondary classes. Fixed #5382 - Button: specifying only a secondary icon for the button widget locates the icon on the left

rdworth (author)

Wed May 26 12:08:37 -0700 2010

commit 202ddd0c58933e80b603
tree e22001e7001c0f9ca65d
parent e815e7c1e49632651052

Showing 4 changed files with 67 additions and 39 deletions.

M	tests/static/button/default.html	81 ••••
M	tests/visual/button/button.html	6 ••••
M	themes/base/jquery.ui.button.css	13 ••••
M	ui/jquery.ui.button.js	6 ••••

tests/static/button/default.html

View file @ 202ddd0

          
@@ -23,24 +23,34 @@

     </button>

     <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>

+      <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>

+      <span class="ui-button-text">Primary icon</span>

     </button>

-    

-    <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 class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">

+      <span class="ui-button-text">Secondary icon</span>

+      <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>

+    </button>

+

+    <button class="ui-button ui-button-text-icon-primary 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">Primary icon</span>

+    </button>

+

+    <button class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">

+      <span class="ui-button-text">Secondary icon</span>

+      <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>

     </button>

     <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-text">Both icons</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-text">No text</span>

       <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>

     </button>

   </div>

@@ -53,24 +63,34 @@

     </a>

     <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>

+      <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>

+      <span class="ui-button-text">Primary icon</span>

     </a>

-    <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 href="#" class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">

+      <span class="ui-button-text">Secondary icon</span>

+      <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>

+    </a>

+    

+    <a href="#" class="ui-button ui-button-text-icon-primary 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">Primary icon</span>

+    </a>

+

+    <a href="#" class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">

+      <span class="ui-button-text">Secondary icon</span>

+      <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>

     </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"></span>

-      <span class="ui-button-text">Button</span>

+      <span class="ui-button-text">Both icons</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-text">No text</span>

       <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>

     </a>

   </div>

@@ -85,24 +105,34 @@

     </label>

     <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>

+      <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>

+      <span class="ui-button-text">Primary icon</span>

     </label>

-    <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 class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">

+      <span class="ui-button-text">Secondary icon</span>

+      <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>

+    </label>

+    

+    <label class="ui-button ui-button-text-icon-primary 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">Primary icon</span>

+    </label>

+    

+    <label class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">

+      <span class="ui-button-text">Secondary icon</span>

+      <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>

     </label>

     <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-text">Both icons</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-text">No text</span>

       <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>

     </label>

   </div>

@@ -111,9 +141,10 @@

   <h2>Button Sets</h2>

   <div class="ui-buttonset">

-    <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>

+    <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-left"><span class="ui-button-text">First</span></button>

+    <button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Middle</span></button>

+    <button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Middle</span></button>

+    <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-right"><span class="ui-button-text">Last</span></button>

   </div>

tests/visual/button/button.html

View file @ 202ddd0

@@ -58,9 +58,9 @@
   <div>
     With icon
     <button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
-    <button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
-    <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
-    <button class="{button:{icons:{secondary:'ui-icon-triangle-1-s'}}}">Button with text and secondary icon</button>
+    <button class="{button:{icons:{primary:'ui-icon-locked'}}}">Primary icon</button>
+    <button class="{button:{icons:{secondary:'ui-icon-triangle-1-s'}}}">Secondary icon</button>
+    <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Both icons</button>
     <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons and no text</button>
   </div>
 </div>

themes/base/jquery.ui.button.css

View file @ 202ddd0

@@ -11,15 +11,17 @@ button.ui-button-icons-only { width: 3.7em; }
 .ui-button .ui-button-text { display: block; line-height: 1.4;  }
 .ui-button-text-only .ui-button-text { padding: .4em 1em; }
 .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 2.1em; }
+.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
+.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
 .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
 /* no icon support for input elements, provide padding by default */
 input.ui-button { padding: .4em 1em; }
 
 /*button icon element(s) */
-.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, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .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-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
+.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
+.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
 .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
 
 /*button sets*/
@@ -28,8 +30,3 @@ input.ui-button { padding: .4em 1em; }
 
 /* workarounds */
 button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
-
-
-
-
-

ui/jquery.ui.button.js

View file @ 202ddd0

          
@@ -16,7 +16,7 @@

 var lastActive,

   baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",

   stateClasses = "ui-state-hover ui-state-active ",

-  typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon ui-button-text-only",

+  typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",

   formResetHandler = function( event ) {

     $( ":ui-button", event.target.form ).each(function() {

       var inst = $( this ).data( "button" );

@@ -288,7 +288,7 @@ $.widget( "ui.button", {

       multipleIcons = icons.primary && icons.secondary;

     if ( icons.primary || icons.secondary ) {

       buttonElement.addClass( "ui-button-text-icon" +

-        ( multipleIcons ? "s" : "" ) );

+        ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );

       if ( icons.primary ) {

         buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );

       }

@@ -298,7 +298,7 @@ $.widget( "ui.button", {

       if ( !this.options.text ) {

         buttonElement

           .addClass( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" )

-          .removeClass( "ui-button-text-icons ui-button-text-icon" );

+          .removeClass( "ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary" );

         if ( !this.hasTitle ) {

           buttonElement.attr( "title", buttonText );

         }

1 notes on commit `202ddd0` Show line notes below

jzaefferer added a note to 202ddd0 repo collab

Wed May 26 15:19:34 -0700 2010

Looks great: http://view.jqueryui.com/master/tests/visual/button/button.html

Please log in to comment.

jquery / jquery-ui

1 notes on commit `202ddd0` Show line notes below

Your current locale selection: English. Choose another?

Keyboard Shortcuts

Site wide shortcuts

Commit list

Pull request list

Issues

Network Graph

...	...	@@ -23,24 +23,34 @@
23	23	</button>
24	24
25	25	<button class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
26		- <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
27		- <span class="ui-button-text">Button</span>
	26	+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
	27	+ <span class="ui-button-text">Primary icon</span>
28	28	</button>
29		-
30		- <button class="ui-button ui-button-text-icon ui-widget ui-state-default ui-corner-all">
31		- <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
32		- <span class="ui-button-text">Button</span>
	29	+
	30	+ <button class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
	31	+ <span class="ui-button-text">Secondary icon</span>
	32	+ <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
	33	+ </button>
	34	+
	35	+ <button class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all">
	36	+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
	37	+ <span class="ui-button-text">Primary icon</span>
	38	+ </button>
	39	+
	40	+ <button class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">
	41	+ <span class="ui-button-text">Secondary icon</span>
	42	+ <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
33	43	</button>
34	44
35	45	<button class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
36	46	<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
37		- <span class="ui-button-text">Button</span>
	47	+ <span class="ui-button-text">Both icons</span>
38	48	<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
39	49	</button>
40	50
41	51	<button class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
42	52	<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
43		- <span class="ui-button-text">Button</span>
	53	+ <span class="ui-button-text">No text</span>
44	54	<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
45	55	</button>
46	56	</div>
...	...	@@ -53,24 +63,34 @@
53	63	</a>
54	64
55	65	<a href="#" class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
56		- <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
57		- <span class="ui-button-text">Button</span>
	66	+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
	67	+ <span class="ui-button-text">Primary icon</span>
58	68	</a>
59	69
60		- <a href="#" class="ui-button ui-button-text-icon ui-widget ui-state-default ui-corner-all">
61		- <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
62		- <span class="ui-button-text">Button</span>
	70	+ <a href="#" class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
	71	+ <span class="ui-button-text">Secondary icon</span>
	72	+ <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
	73	+ </a>
	74	+
	75	+ <a href="#" class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all">
	76	+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
	77	+ <span class="ui-button-text">Primary icon</span>
	78	+ </a>
	79	+
	80	+ <a href="#" class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">
	81	+ <span class="ui-button-text">Secondary icon</span>
	82	+ <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
63	83	</a>
64	84
65	85	<a href="#" class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
66	86	<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
67		- <span class="ui-button-text">Button</span>
	87	+ <span class="ui-button-text">Both icons</span>
68	88	<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
69	89	</a>
70	90
71	91	<a href="#" class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
72	92	<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
73		- <span class="ui-button-text">Button</span>
	93	+ <span class="ui-button-text">No text</span>
74	94	<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
75	95	</a>
76	96	</div>
...	...	@@ -85,24 +105,34 @@
85	105	</label>
86	106
87	107	<label class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
88		- <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
89		- <span class="ui-button-text">Button</span>
	108	+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
	109	+ <span class="ui-button-text">Primary icon</span>
90	110	</label>
91	111
92		- <label class="ui-button ui-button-text-icon ui-widget ui-state-default ui-corner-all">
93		- <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
94		- <span class="ui-button-text">Button</span>
	112	+ <label class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button">
	113	+ <span class="ui-button-text">Secondary icon</span>
	114	+ <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
	115	+ </label>
	116	+
	117	+ <label class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all">
	118	+ <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
	119	+ <span class="ui-button-text">Primary icon</span>
	120	+ </label>
	121	+
	122	+ <label class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">
	123	+ <span class="ui-button-text">Secondary icon</span>
	124	+ <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
95	125	</label>
96	126
97	127	<label class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
98	128	<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
99		- <span class="ui-button-text">Button</span>
	129	+ <span class="ui-button-text">Both icons</span>
100	130	<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
101	131	</label>
102	132
103	133	<label class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
104	134	<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>
105		- <span class="ui-button-text">Button</span>
	135	+ <span class="ui-button-text">No text</span>
106	136	<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
107	137	</label>
108	138	</div>
...	...	@@ -111,9 +141,10 @@
111	141	<h2>Button Sets</h2>
112	142
113	143	<div class="ui-buttonset">
114		- <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>
115		- <button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Simple button</span></button>
116		- <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>
	144	+ <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-left"><span class="ui-button-text">First</span></button>
	145	+ <button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Middle</span></button>
	146	+ <button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Middle</span></button>
	147	+ <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-right"><span class="ui-button-text">Last</span></button>
117	148	</div>
118	149
119	150

...	...	@@ -58,9 +58,9 @@
58	58	<div>
59	59	With icon
60	60	<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
61		- <button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
62		- <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
63		- <button class="{button:{icons:{secondary:'ui-icon-triangle-1-s'}}}">Button with text and secondary icon</button>
	61	+ <button class="{button:{icons:{primary:'ui-icon-locked'}}}">Primary icon</button>
	62	+ <button class="{button:{icons:{secondary:'ui-icon-triangle-1-s'}}}">Secondary icon</button>
	63	+ <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Both icons</button>
64	64	<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons and no text</button>
65	65	</div>
66	66	</div>

...	...	@@ -11,15 +11,17 @@ button.ui-button-icons-only { width: 3.7em; }
11	11	.ui-button .ui-button-text { display: block; line-height: 1.4; }
12	12	.ui-button-text-only .ui-button-text { padding: .4em 1em; }
13	13	.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
14		-.ui-button-text-icon .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
	14	+.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
	15	+.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
15	16	.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
16	17	/* no icon support for input elements, provide padding by default */
17	18	input.ui-button { padding: .4em 1em; }
18	19
19	20	/button icon element(s) /
20		-.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; }
	21	+.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
21	22	.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
22		-.ui-button-text-icon .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
	23	+.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
	24	+.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
23	25	.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
24	26
25	27	/button sets/
...	...	@@ -28,8 +30,3 @@ input.ui-button { padding: .4em 1em; }
28	30
29	31	/* workarounds */
30	32	button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
31		-
32		-
33		-
34		-
35		-

...	...	@@ -16,7 +16,7 @@
16	16	var lastActive,
17	17	baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
18	18	stateClasses = "ui-state-hover ui-state-active ",
19		- typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon ui-button-text-only",
	19	+ typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",
20	20	formResetHandler = function( event ) {
21	21	$( ":ui-button", event.target.form ).each(function() {
22	22	var inst = $( this ).data( "button" );
...	...	@@ -288,7 +288,7 @@ $.widget( "ui.button", {
288	288	multipleIcons = icons.primary && icons.secondary;
289	289	if ( icons.primary \|\| icons.secondary ) {
290	290	buttonElement.addClass( "ui-button-text-icon" +
291		- ( multipleIcons ? "s" : "" ) );
	291	+ ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );
292	292	if ( icons.primary ) {
293	293	buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
294	294	}
...	...	@@ -298,7 +298,7 @@ $.widget( "ui.button", {
298	298	if ( !this.options.text ) {
299	299	buttonElement
300	300	.addClass( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" )
301		- .removeClass( "ui-button-text-icons ui-button-text-icon" );
	301	+ .removeClass( "ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary" );
302	302	if ( !this.hasTitle ) {
303	303	buttonElement.attr( "title", buttonText );
304	304	}

jquery / jquery-ui

1 notes on commit 202ddd0 Show line notes below

Your current locale selection: English. Choose another?

Keyboard Shortcuts

Site wide shortcuts

Commit list

Pull request list

Issues

Network Graph

1 notes on commit `202ddd0` Show line notes below