Skip to content

Commit 3a56b25

Browse files
committed
Button: Switch to placing contents in the flow rather then positioning
1 parent dd6802a commit 3a56b25

File tree

6 files changed

+46
-108
lines changed

6 files changed

+46
-108
lines changed

demos/button/icons.html

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,25 +41,24 @@ <h1>Widget</h1>
4141
<div class="css">
4242
<h1>CSS</h1>
4343
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only">
44-
<span class="ui-icon ui-icon-gear"></span>
45-
Button with icon only
44+
<span class="ui-icon ui-icon-gear"></span>Button with icon only
4645
</button>
4746
<button class="ui-button ui-widget ui-corner-all ui-icon-beginning">
48-
<span class="ui-icon ui-icon-triangle-1-w"></span>
49-
Button with icon on the left
47+
Button with no text
48+
</button>
49+
<button class="ui-button ui-widget ui-corner-all ui-icon-beginning">
50+
<span class="ui-icon ui-icon-triangle-1-w"></span>Button with icon on the left
5051
</button>
5152
<button class="ui-button ui-widget ui-corner-all ui-icon-end">
52-
<span class="ui-icon ui-icon-triangle-1-e"></span>
53-
Button with icon on the right
53+
Button with icon on the right<span class="ui-icon ui-icon-triangle-1-e"></span>
5454
</button>
55-
<button class="ui-button ui-widget ui-corner-all ui-icon-bottom">
56-
<span class="ui-icon ui-icon-triangle-1-s"></span>
57-
Button with icon on bottom
55+
<button class="ui-button ui-widget ui-corner-all">
56+
Button with icon on bottom<span class="ui-icon ui-icon-triangle-1-s ui-icon-display-block"></span>
5857
</button>
59-
<button class="ui-button ui-widget ui-corner-all ui-icon-top">
60-
<span class="ui-icon ui-icon-triangle-1-n"></span>
61-
Button with icon on top
58+
<button class="ui-button ui-widget ui-corner-all">
59+
<span class="ui-icon ui-icon-triangle-1-n ui-icon-display-block"></span>Button with icon on top
6260
</button>
61+
<button class="ui-button ui-widget ui-corner-all"><span class="ui-icon ui-icon-triangle-1-n ui-icon-display-block"></span><span class="ui-icon ui-icon-triangle-1-w"></span>Button with <span class="ui-icon ui-icon-arrow-4"></span> many icons<span class="ui-icon ui-icon-triangle-1-e"></span><span class="ui-icon ui-icon-triangle-1-s ui-icon-display-block"></span></button>
6362

6463
</div>
6564
<div class="demo-description">

themes/base/accordion.css

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,6 @@
1616
padding: .5em .5em .5em .7em;
1717
font-size: 100%;
1818
}
19-
.ui-accordion .ui-accordion-icons {
20-
padding-left: 2.2em;
21-
}
22-
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
23-
padding-left: 2.2em;
24-
}
25-
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
26-
position: absolute;
27-
left: .5em;
28-
top: 50%;
29-
margin-top: -8px;
30-
}
3119
.ui-accordion .ui-accordion-content {
3220
padding: 1em 2.2em;
3321
border-top: 0;

themes/base/button.css

Lines changed: 4 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
* http://api.jqueryui.com/button/#theming
1010
*/
1111
.ui-button {
12-
padding: .4em 1em;
12+
padding: .4em;
1313
display: inline-block;
1414
position: relative;
1515
line-height: normal;
@@ -34,93 +34,24 @@
3434

3535
/* to make room for the icon, a width needs to be set here */
3636
.ui-button-icon-only {
37-
width: 2.2em;
37+
width: 2em;
3838
box-sizing: border-box;
3939
text-indent: -9999px;
4040
white-space: nowrap;
4141
}
4242

43-
.ui-icon {
44-
position: absolute;
45-
display: block;
46-
}
47-
4843
/* no icon support for input elements, provide padding by default */
49-
input.ui-button.ui-icon-end,
50-
input.ui-button.ui-icon-beginning,
51-
input.ui-button.ui-icon-top,
52-
input.ui-button.ui-icon-bottom{
53-
padding: .4em 1em;
54-
}
5544
input.ui-button.ui-button-icon-only {
5645
text-indent: 0;
5746
}
5847

5948
/* button icon element(s) */
60-
.ui-button.ui-icon-end .ui-icon {
61-
left: auto;
62-
right: .5em;
63-
}
64-
65-
.ui-button.ui-icon-top .ui-icon,
66-
.ui-button.ui-icon-bottom .ui-icon {
67-
left: 50%;
68-
margin-left: -11px;
69-
}
70-
71-
.ui-button.ui-icon-top .ui-icon {
72-
top: .6em;
73-
}
74-
75-
.ui-button.ui-icon-bottom .ui-icon {
76-
top: auto;
77-
bottom: .05em;
78-
79-
}
80-
8149
.ui-button-icon-only .ui-icon {
82-
left: 50%;
83-
margin-left: -8px;
84-
}
85-
86-
.ui-button .ui-icon {
8750
position: absolute;
88-
display: block;
8951
top: 50%;
52+
left: 50%;
9053
margin-top: -8px;
91-
}
92-
93-
.ui-button.ui-icon-beginning {
94-
padding-left: 2.4em;
95-
}
96-
97-
.ui-button.ui-icon-end {
98-
padding: .4em 2.1em .4em 1em;
99-
}
100-
101-
.ui-button.ui-icon-top {
102-
padding: 1.1em 1em .4em 1em;
103-
}
104-
105-
.ui-button.ui-icon-bottom {
106-
padding: .4em 1em 1.1em 1em;
107-
}
108-
109-
.ui-button.ui-icon-notext .ui-icon {
110-
padding: 0;
111-
width: 2.1em;
112-
height: 2.1em;
113-
text-indent: -9999px;
114-
white-space: nowrap;
115-
116-
}
117-
118-
input.ui-button.ui-icon-notext .ui-icon {
119-
width: auto;
120-
height: auto;
121-
text-indent: 0;
122-
white-space: normal;
123-
padding: .4em 1em;
54+
margin-left: -8px;
12455
}
12556

12657
/* workarounds */

themes/base/core.css

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,17 +68,18 @@
6868

6969
/* Icons
7070
----------------------------------*/
71-
7271
.ui-icon {
73-
display: block;
74-
text-indent: -99999px;
75-
overflow: hidden;
76-
background-repeat: no-repeat;
77-
left: .5em;
78-
top: .3em;
72+
display: inline-block;
73+
vertical-align: middle;
74+
margin-top: -.25em;
75+
position: relative;
7976
}
8077

81-
78+
.ui-icon-display-block {
79+
left: 50%;
80+
margin-left: -8px;
81+
display: block;
82+
}
8283

8384
/* Misc visuals
8485
----------------------------------*/

themes/base/datepicker.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,3 +173,14 @@
173173
border-right-width: 0;
174174
border-left-width: 1px;
175175
}
176+
177+
/* Icons */
178+
.ui-datepicker .ui-icon {
179+
display: block;
180+
text-indent: -99999px;
181+
overflow: hidden;
182+
background-repeat: no-repeat;
183+
left: .5em;
184+
top: .3em;
185+
}
186+

ui/button.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,20 +127,28 @@ $.widget( "ui.button", {
127127
},
128128

129129
_updateIcon: function( icon ) {
130+
var placementMethod =
131+
( this.options.iconPosition === "top" ||
132+
this.options.iconPosition === "beginning" ) ?
133+
"prependTo" :
134+
"appendTo",
135+
displayBlock =
136+
( this.options.iconPosition === "top" ||
137+
this.options.iconPosition === "bottom" );
130138
if ( !this.icon ) {
131139
this.icon = $( "<span>" );
132140
this._addClass( this.icon, "ui-button-icon", " ui-icon" );
133141

134142
if ( !this.options.showLabel ) {
135143
this._addClass( "ui-button-icon-only" );
136-
} else {
137-
this._addClass( null, "ui-icon-" + this.options.iconPosition );
144+
} else if ( displayBlock ) {
145+
this._addClass( this.icon, null, "ui-icon-display-block" );
138146
}
139147
} else {
140148
this._removeClass( this.icon, null, this.options.icon );
141149
}
142150
this._addClass( this.icon, null, icon );
143-
this.icon.appendTo( this.element );
151+
this.icon[ placementMethod ]( this.element );
144152
return this;
145153
},
146154

0 commit comments

Comments
 (0)