Skip to content

Commit d0d24a1

Browse files
arschmitzarschmitz
committed
Button: Inital commit of button refactor
Move to using element stats rather then js class states remove ui-button-text spans. Removed button set
1 parent 9fad37d commit d0d24a1

File tree

7 files changed

+237
-386
lines changed

7 files changed

+237
-386
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎demos/button/default.html

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="stylesheet" href="../demos.css">
1212
<script>
1313
$(function() {
14-
$( "input[type=submit], a, button" )
14+
$( ".widget input[type=submit], .widget a, .widget button" )
1515
.button()
1616
.click(function( event ) {
1717
event.preventDefault();
@@ -20,12 +20,20 @@
2020
</script>
2121
</head>
2222
<body>
23+
<div class="widget">
24+
<h1>Widget Buttons</h1>
25+
<button>A button element</button>
2326

24-
<button>A button element</button>
27+
<input type="submit" value="A submit button">
2528

26-
<input type="submit" value="A submit button">
29+
<a href="#">An anchor</a>
30+
</div>
31+
<h1>CSS Buttons</h1>
32+
<button class="ui-button ui-widget ui-corner-all">A button element</button>
33+
34+
<input class="ui-button ui-widget ui-corner-all" type="submit" value="A submit button">
2735

28-
<a href="#">An anchor</a>
36+
<a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>
2937

3038
<div class="demo-description">
3139
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>

‎demos/button/icons.html

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,39 +11,58 @@
1111
<link rel="stylesheet" href="../demos.css">
1212
<script>
1313
$(function() {
14-
$( "button:first" ).button({
15-
icons: {
16-
primary: "ui-icon-locked"
17-
},
14+
$( ".widget button:first" ).button({
15+
icon: "ui-icon-gear",
1816
text: false
1917
}).next().button({
20-
icons: {
21-
primary: "ui-icon-locked"
22-
}
18+
icon: "ui-icon-triangle-1-w"
2319
}).next().button({
24-
icons: {
25-
primary: "ui-icon-gear",
26-
secondary: "ui-icon-triangle-1-s"
27-
}
20+
icon: "ui-icon-triangle-1-e",
21+
iconPosition: "end"
2822
}).next().button({
29-
icons: {
30-
primary: "ui-icon-gear",
31-
secondary: "ui-icon-triangle-1-s"
32-
},
33-
text: false
23+
icon: "ui-icon-triangle-1-s",
24+
iconPosition: "bottom"
25+
}).next().button({
26+
icon: "ui-icon-triangle-1-n",
27+
iconPosition: "top"
3428
});
3529
});
3630
</script>
3731
</head>
3832
<body>
39-
40-
<button>Button with icon only</button>
41-
<button>Button with icon on the left</button>
42-
<button>Button with two icons</button>
43-
<button>Button with two icons and no text</button>
44-
4533
<div class="demo-description">
4634
<p>Some buttons with various combinations of text and icons.</p>
35+
</div>
36+
<div class="widget">
37+
<h1>Widget</h2>
38+
<button>Button with icon only</button>
39+
<button>Button with icon on the left</button>
40+
<button>Button with two icons</button>
41+
<button>Button with two icons and no text</button>
42+
</div>
43+
<div class="css">
44+
<h1>CSS</h2>
45+
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only">
46+
<span class="ui-icon ui-icon-gear"></span>
47+
Button with icon only
48+
</button>
49+
<button class="ui-button ui-widget ui-corner-all ui-icon-begining">
50+
<span class="ui-icon ui-icon-triangle-1-w"></span>
51+
Button with icon on the left
52+
</button>
53+
<button class="ui-button ui-widget ui-corner-all ui-icon-end">
54+
<span class="ui-icon ui-icon-triangle-1-e"></span>
55+
Button with icon on the right
56+
</button>
57+
<button class="ui-button ui-widget ui-corner-all ui-icon-bottom">
58+
<span class="ui-icon ui-icon-triangle-1-s"></span>
59+
Button with icon on bottom
60+
</button>
61+
<button class="ui-button ui-widget ui-corner-all ui-icon-top">
62+
<span class="ui-icon ui-icon-triangle-1-n"></span>
63+
Button with icon on top
64+
</button>
65+
4766
</div>
4867
</body>
4968
</html>

‎themes/base/button.css

Lines changed: 6 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
* http://api.jqueryui.com/button/#theming
1010
*/
1111
.ui-button {
12+
padding: .4em 1em;
1213
display: inline-block;
1314
position: relative;
14-
padding: 0;
1515
line-height: normal;
1616
margin-right: .1em;
1717
cursor: pointer;
@@ -28,7 +28,11 @@
2828
}
2929
/* to make room for the icon, a width needs to be set here */
3030
.ui-button-icon-only {
31-
width: 2.2em;
31+
padding: 0;
32+
width: 2.1em;
33+
height: 2.1em;
34+
text-indent: -9999px;
35+
white-space: nowrap;
3236
}
3337
/* button elements seem to need a little more width */
3438
button.ui-button-icon-only {
@@ -41,31 +45,6 @@ button.ui-button-icons-only {
4145
width: 3.7em;
4246
}
4347

44-
/* button text element */
45-
.ui-button .ui-button-text {
46-
display: block;
47-
line-height: normal;
48-
}
49-
.ui-button-text-only .ui-button-text {
50-
padding: .4em 1em;
51-
}
52-
.ui-button-icon-only .ui-button-text,
53-
.ui-button-icons-only .ui-button-text {
54-
padding: .4em;
55-
text-indent: -9999999px;
56-
}
57-
.ui-button-text-icon-primary .ui-button-text,
58-
.ui-button-text-icons .ui-button-text {
59-
padding: .4em 1em .4em 2.1em;
60-
}
61-
.ui-button-text-icon-secondary .ui-button-text,
62-
.ui-button-text-icons .ui-button-text {
63-
padding: .4em 2.1em .4em 1em;
64-
}
65-
.ui-button-text-icons .ui-button-text {
66-
padding-left: 2.1em;
67-
padding-right: 2.1em;
68-
}
6948
/* no icon support for input elements, provide padding by default */
7049
input.ui-button {
7150
padding: .4em 1em;
@@ -85,16 +64,6 @@ input.ui-button {
8564
left: 50%;
8665
margin-left: -8px;
8766
}
88-
.ui-button-text-icon-primary .ui-button-icon-primary,
89-
.ui-button-text-icons .ui-button-icon-primary,
90-
.ui-button-icons-only .ui-button-icon-primary {
91-
left: .5em;
92-
}
93-
.ui-button-text-icon-secondary .ui-button-icon-secondary,
94-
.ui-button-text-icons .ui-button-icon-secondary,
95-
.ui-button-icons-only .ui-button-icon-secondary {
96-
right: .5em;
97-
}
9867

9968
/* button sets */
10069
.ui-buttonset {

‎themes/base/core.css

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,14 +71,81 @@
7171
/* Icons
7272
----------------------------------*/
7373

74-
/* states and images */
7574
.ui-icon {
7675
display: block;
7776
text-indent: -99999px;
7877
overflow: hidden;
7978
background-repeat: no-repeat;
8079
}
8180

81+
.ui-button .ui-icon {
82+
position: absolute;
83+
display: block;
84+
}
85+
86+
.ui-button.ui-icon-begining {
87+
padding-left: 2.1em;
88+
}
89+
90+
.ui-button.ui-icon-end {
91+
padding: .4em 2.1em .4em 1em;
92+
}
93+
94+
.ui-button.ui-icon-top {
95+
padding: 1.1em 1em .4em 1em;
96+
}
97+
98+
.ui-button.ui-icon-bottom {
99+
padding: .4em 1em 1.1em 1em;
100+
}
101+
102+
.ui-icon {
103+
left: .5em;
104+
top: .2em;
105+
}
106+
107+
.ui-icon-end .ui-icon {
108+
left: auto;
109+
right: .5em;
110+
}
111+
112+
.ui-icon-top .ui-icon,
113+
.ui-icon-bottom .ui-icon {
114+
left: 50%;
115+
margin-left: -11px;
116+
}
117+
118+
.ui-icon-top .ui-icon {
119+
top: .1em;
120+
}
121+
122+
.ui-icon-bottom .ui-icon {
123+
top: auto;
124+
bottom: .1em;
125+
}
126+
127+
.ui-icon-notext .ui-icon {
128+
left: 50%;
129+
margin-left: -8px;
130+
}
131+
132+
.ui-button.ui-icon-notext .ui-icon {
133+
padding: 0;
134+
width: 2.1em;
135+
height: 2.1em;
136+
text-indent: -9999px;
137+
white-space: nowrap;
138+
139+
}
140+
141+
input.ui-button.ui-icon-notext .ui-icon {
142+
width: auto;
143+
height: auto;
144+
text-indent: 0;
145+
white-space: normal;
146+
padding: .4em 1em;
147+
}
148+
82149

83150
/* Misc visuals
84151
----------------------------------*/

‎themes/base/theme.css

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,20 @@
5050
----------------------------------*/
5151
.ui-state-default,
5252
.ui-widget-content .ui-state-default,
53-
.ui-widget-header .ui-state-default {
53+
.ui-widget-header .ui-state-default,
54+
.ui-button {
5455
border: 1px solid #d3d3d3/*{borderColorDefault}*/;
5556
background: #e6e6e6/*{bgColorDefault}*/ url("images/ui-bg_glass_75_e6e6e6_1x400.png")/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/;
5657
font-weight: normal/*{fwDefault}*/;
5758
color: #555555/*{fcDefault}*/;
5859
}
5960
.ui-state-default a,
6061
.ui-state-default a:link,
61-
.ui-state-default a:visited {
62+
.ui-state-default a:visited,
63+
a.ui-button,
64+
a:link.ui-button,
65+
a:visited.ui-button,
66+
.ui-button {
6267
color: #555555/*{fcDefault}*/;
6368
text-decoration: none;
6469
}
@@ -67,7 +72,9 @@
6772
.ui-widget-header .ui-state-hover,
6873
.ui-state-focus,
6974
.ui-widget-content .ui-state-focus,
70-
.ui-widget-header .ui-state-focus {
75+
.ui-widget-header .ui-state-focus,
76+
.ui-button:hover,
77+
.ui-button:focus {
7178
border: 1px solid #999999/*{borderColorHover}*/;
7279
background: #dadada/*{bgColorHover}*/ url("images/ui-bg_glass_75_dadada_1x400.png")/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/;
7380
font-weight: normal/*{fwDefault}*/;
@@ -80,13 +87,17 @@
8087
.ui-state-focus a,
8188
.ui-state-focus a:hover,
8289
.ui-state-focus a:link,
83-
.ui-state-focus a:visited {
90+
.ui-state-focus a:visited,
91+
a.ui-button:hover,
92+
a.ui-button:focus {
8493
color: #212121/*{fcHover}*/;
8594
text-decoration: none;
8695
}
8796
.ui-state-active,
8897
.ui-widget-content .ui-state-active,
89-
.ui-widget-header .ui-state-active {
98+
.ui-widget-header .ui-state-active,
99+
a.ui-button:active,
100+
.ui-button:active {
90101
border: 1px solid #aaaaaa/*{borderColorActive}*/;
91102
background: #ffffff/*{bgColorActive}*/ url("images/ui-bg_glass_65_ffffff_1x400.png")/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/;
92103
font-weight: normal/*{fwDefault}*/;
@@ -168,15 +179,19 @@
168179
.ui-widget-header .ui-icon {
169180
background-image: url("images/ui-icons_222222_256x240.png")/*{iconsHeader}*/;
170181
}
171-
.ui-state-default .ui-icon {
172-
background-image: url("images/ui-icons_888888_256x240.png")/*{iconsDefault}*/;
182+
.ui-state-default .ui-icon,
183+
.ui-button .ui-icon {
184+
background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/;
173185
}
174186
.ui-state-hover .ui-icon,
175-
.ui-state-focus .ui-icon {
176-
background-image: url("images/ui-icons_454545_256x240.png")/*{iconsHover}*/;
177-
}
178-
.ui-state-active .ui-icon {
179-
background-image: url("images/ui-icons_454545_256x240.png")/*{iconsActive}*/;
187+
.ui-state-focus .ui-icon,
188+
.ui-button:hover .ui-icon,
189+
.ui-button:focus .ui-icon {
190+
background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHover}*/;
191+
}
192+
.ui-state-active .ui-icon,
193+
.ui-button:active .ui-icon {
194+
background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/;
180195
}
181196
.ui-state-highlight .ui-icon {
182197
background-image: url("images/ui-icons_2e83ff_256x240.png")/*{iconsHighlight}*/;

0 commit comments

Comments
 (0)