Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Commit 3cb1565

Browse files
sfrisksfrisk
committed
Buttons: Adding Success/Info/Warning/Danger buttons
1 parent e23fde7 commit 3cb1565

File tree

4 files changed

+678
-48
lines changed

4 files changed

+678
-48
lines changed

‎demos/buttons.html

Lines changed: 135 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -31,28 +31,50 @@ <h2>Button Classes</h2>
3131
<h2>Options</h2>
3232

3333
<form>
34-
<button class="ui-button--primary" type="submit">Primary</button>
3534
<button class="ui-button--default" type="submit">Default</button>
35+
<button class="ui-button--primary" type="submit">Primary</button>
36+
<button class="ui-button--success" type="submit">Success</button>
37+
<button class="ui-button--info" type="submit">Info</button>
38+
<button class="ui-button--warning" type="submit">Warning</button>
39+
<button class="ui-button--danger" type="submit">Danger</button>
40+
41+
3642
</form>
3743

3844
<h3>Sizes</h3>
3945

4046
<form>
4147
<p>
42-
<button class="ui-button--primary--large" type="submit">Large Button</button>
43-
<button class="ui-button--default--large" type="submit">Large Button</button>
48+
<button class="ui-button--default--large" type="submit">Large</button>
49+
<button class="ui-button--primary--large" type="submit">Large</button>
50+
<button class="ui-button--success--large" type="submit">Large</button>
51+
<button class="ui-button--info--large" type="submit">Large</button>
52+
<button class="ui-button--warning--large" type="submit">Large</button>
53+
<button class="ui-button--danger--large" type="submit">Large</button>
4454
</p>
4555
<p>
46-
<button class="ui-button--primary" type="submit">Default Button</button>
47-
<button class="ui-button--default" type="submit">Default Button</button>
56+
<button class="ui-button--default" type="submit">Default</button>
57+
<button class="ui-button--primary" type="submit">Default</button>
58+
<button class="ui-button--success" type="submit">Default</button>
59+
<button class="ui-button--info" type="submit">Default</button>
60+
<button class="ui-button--warning" type="submit">Default</button>
61+
<button class="ui-button--danger" type="submit">Default</button>
4862
</p>
4963
<p>
50-
<button class="ui-button--primary--small" type="submit">Small Button</button>
51-
<button class="ui-button--default--small" type="submit">Small Button</button>
64+
<button class="ui-button--default--small" type="submit">Small</button>
65+
<button class="ui-button--primary--small" type="submit">Small</button>
66+
<button class="ui-button--success--small" type="submit">Small</button>
67+
<button class="ui-button--info--small" type="submit">Small</button>
68+
<button class="ui-button--warning--small" type="submit">Small</button>
69+
<button class="ui-button--danger--small" type="submit">Small</button>
5270
</p>
5371
<p>
54-
<button class="ui-button--primary--extra-small" type="submit">Extra Small Button</button>
55-
<button class="ui-button--default--extra-small" type="submit">Extra Small Button</button>
72+
<button class="ui-button--default--extra-small" type="submit">Extra Small</button>
73+
<button class="ui-button--primary--extra-small" type="submit">Extra Small</button>
74+
<button class="ui-button--success--extra-small" type="submit">Extra Small</button>
75+
<button class="ui-button--info--extra-small" type="submit">Extra Small</button>
76+
<button class="ui-button--warning--extra-small" type="submit">Extra Small</button>
77+
<button class="ui-button--danger--extra-small" type="submit">Extra Small</button>
5678
</p>
5779
</form>
5880

@@ -65,20 +87,36 @@ <h3>Button Element</h3>
6587

6688
<form>
6789
<p>
68-
<button class="ui-button--primary--large" disabled="disabled" type="submit">Large Button</button>
69-
<button class="ui-button--default--large" disabled="disabled" type="submit">Large Button</button>
90+
<button class="ui-button--default--large" disabled="disabled" type="submit">Large</button>
91+
<button class="ui-button--primary--large" disabled="disabled" type="submit">Large</button>
92+
<button class="ui-button--success--large" disabled="disabled" type="submit">Large</button>
93+
<button class="ui-button--info--large" disabled="disabled" type="submit">Large</button>
94+
<button class="ui-button--warning--large" disabled="disabled" type="submit">Large</button>
95+
<button class="ui-button--danger--large" disabled="disabled" type="submit">Large</button>
7096
</p>
7197
<p>
72-
<button class="ui-button--primary" disabled="disabled" type="submit">Default Button</button>
73-
<button class="ui-button--default" disabled="disabled" type="submit">Default Button</button>
98+
<button class="ui-button--default" disabled="disabled" type="submit">Default</button>
99+
<button class="ui-button--primary" disabled="disabled" type="submit">Default</button>
100+
<button class="ui-button--success" disabled="disabled" type="submit">Default</button>
101+
<button class="ui-button--info" disabled="disabled" type="submit">Default</button>
102+
<button class="ui-button--warning" disabled="disabled" type="submit">Default</button>
103+
<button class="ui-button--danger" disabled="disabled" type="submit">Default</button>
74104
</p>
75105
<p>
76-
<button class="ui-button--primary--small" disabled="disabled" type="submit">Small Button</button>
77-
<button class="ui-button--default--small" disabled="disabled" type="submit">Small Button</button>
106+
<button class="ui-button--default--small" disabled="disabled" type="submit">Small</button>
107+
<button class="ui-button--primary--small" disabled="disabled" type="submit">Small</button>
108+
<button class="ui-button--success--small" disabled="disabled" type="submit">Small</button>
109+
<button class="ui-button--info--small" disabled="disabled" type="submit">Small</button>
110+
<button class="ui-button--warning--small" disabled="disabled" type="submit">Small</button>
111+
<button class="ui-button--danger--small" disabled="disabled" type="submit">Small</button>
78112
</p>
79113
<p>
80-
<button class="ui-button--primary--extra-small" disabled="disabled" type="submit">Extra Small Button</button>
81-
<button class="ui-button--default--extra-small" disabled="disabled" type="submit">Extra Small Button</button>
114+
<button class="ui-button--default--extra-small" disabled="disabled" type="submit">Extra Small</button>
115+
<button class="ui-button--primary--extra-small" disabled="disabled" type="submit">Extra Small</button>
116+
<button class="ui-button--success--extra-small" disabled="disabled" type="submit">Extra Small</button>
117+
<button class="ui-button--info--extra-small" disabled="disabled" type="submit">Extra Small</button>
118+
<button class="ui-button--warning--extra-small" disabled="disabled" type="submit">Extra Small</button>
119+
<button class="ui-button--danger--extra-small" disabled="disabled" type="submit">Extra Small</button>
82120
</p>
83121
</form>
84122

@@ -91,83 +129,147 @@ <h3>Disabled Class</h3>
91129
<p>Add <code>--disabled</code> to the end of the button class.</p>
92130
<form>
93131
<p>
94-
<a class="ui-button--primary--large--disabled" href="#" role="button">Disabled</a>
95132
<a class="ui-button--default--large--disabled" href="#" role="button">Disabled</a>
133+
<a class="ui-button--primary--large--disabled" href="#" role="button">Disabled</a>
134+
<a class="ui-button--success--large--disabled" href="#" role="button">Disabled</a>
135+
<a class="ui-button--info--large--disabled" href="#" role="button">Disabled</a>
136+
<a class="ui-button--warning--large--disabled" href="#" role="button">Disabled</a>
137+
<a class="ui-button--danger--large--disabled" href="#" role="button">Disabled</a>
96138
</p>
97139
<p>
98-
<a class="ui-button--primary--disabled" href="#" role="button">Disabled</a>
99140
<a class="ui-button--default--disabled" href="#" role="button">Disabled</a>
141+
<a class="ui-button--primary--disabled" href="#" role="button">Disabled</a>
142+
<a class="ui-button--success--disabled" href="#" role="button">Disabled</a>
143+
<a class="ui-button--info--disabled" href="#" role="button">Disabled</a>
144+
<a class="ui-button--warning--disabled" href="#" role="button">Disabled</a>
145+
<a class="ui-button--danger--disabled" href="#" role="button">Disabled</a>
100146
</p>
101147
<p>
102-
<a class="ui-button--primary--small--disabled" href="#" role="button">Disabled</a>
103148
<a class="ui-button--default--small--disabled" href="#" role="button">Disabled</a>
149+
<a class="ui-button--primary--small--disabled" href="#" role="button">Disabled</a>
150+
<a class="ui-button--success--small--disabled" href="#" role="button">Disabled</a>
151+
<a class="ui-button--info--small--disabled" href="#" role="button">Disabled</a>
152+
<a class="ui-button--warning--small--disabled" href="#" role="button">Disabled</a>
153+
<a class="ui-button--danger--small--disabled" href="#" role="button">Disabled</a>
104154
</p>
105155
<p>
106-
<a class="ui-button--primary--extra-small--disabled" href="#" role="button">Disabled</a>
107156
<a class="ui-button--default--extra-small--disabled" href="#" role="button">Disabled</a>
157+
<a class="ui-button--primary--extra-small--disabled" href="#" role="button">Disabled</a>
158+
<a class="ui-button--success--extra-small--disabled" href="#" role="button">Disabled</a>
159+
<a class="ui-button--info--extra-small--disabled" href="#" role="button">Disabled</a>
160+
<a class="ui-button--warning--extra-small--disabled" href="#" role="button">Disabled</a>
161+
<a class="ui-button--danger--extra-small--disabled" href="#" role="button">Disabled</a>
108162
</p>
109163
</form>
110164

111165
<h3>Active Class</h3>
112166
<p>Add <code>--active</code> to the end of the button class.</p>
113167
<form>
114168
<p>
115-
<a class="ui-button--primary--large--active" href="#" role="button">Active</a>
116169
<a class="ui-button--default--large--active" href="#" role="button">Active</a>
170+
<a class="ui-button--primary--large--active" href="#" role="button">Active</a>
171+
<a class="ui-button--success--large--active" href="#" role="button">Active</a>
172+
<a class="ui-button--info--large--active" href="#" role="button">Active</a>
173+
<a class="ui-button--warning--large--active" href="#" role="button">Active</a>
174+
<a class="ui-button--danger--large--active" href="#" role="button">Active</a>
117175
</p>
118176
<p>
119-
<a class="ui-button--primary--active" href="#" role="button">Active</a>
120177
<a class="ui-button--default--active" href="#" role="button">Active</a>
178+
<a class="ui-button--primary--active" href="#" role="button">Active</a>
179+
<a class="ui-button--success--active" href="#" role="button">Active</a>
180+
<a class="ui-button--info--active" href="#" role="button">Active</a>
181+
<a class="ui-button--warning--active" href="#" role="button">Active</a>
182+
<a class="ui-button--danger--active" href="#" role="button">Active</a>
121183
</p>
122184
<p>
123-
<a class="ui-button--primary--small--active" href="#" role="button">Active</a>
124185
<a class="ui-button--default--small--active" href="#" role="button">Active</a>
186+
<a class="ui-button--primary--small--active" href="#" role="button">Active</a>
187+
<a class="ui-button--success--small--active" href="#" role="button">Active</a>
188+
<a class="ui-button--info--small--active" href="#" role="button">Active</a>
189+
<a class="ui-button--warning--small--active" href="#" role="button">Active</a>
190+
<a class="ui-button--danger--small--active" href="#" role="button">Active</a>
125191
</p>
126192
<p>
127-
<a class="ui-button--primary--extra-small--active" href="#" role="button">Active</a>
128193
<a class="ui-button--default--extra-small--active" href="#" role="button">Active</a>
194+
<a class="ui-button--primary--extra-small--active" href="#" role="button">Active</a>
195+
<a class="ui-button--success--extra-small--active" href="#" role="button">Active</a>
196+
<a class="ui-button--info--extra-small--active" href="#" role="button">Active</a>
197+
<a class="ui-button--warning--extra-small--active" href="#" role="button">Active</a>
198+
<a class="ui-button--danger--extra-small--active" href="#" role="button">Active</a>
129199
</p>
130200
</form>
131201

132202
<h3>Focus Class</h3>
133203
<p>Add <code>--focus</code> to the end of the button class.</p>
134204
<form>
135205
<p>
136-
<a class="ui-button--primary--large--focus" href="#" role="button">Focus</a>
137206
<a class="ui-button--default--large--focus" href="#" role="button">Focus</a>
207+
<a class="ui-button--primary--large--focus" href="#" role="button">Focus</a>
208+
<a class="ui-button--success--large--focus" href="#" role="button">Focus</a>
209+
<a class="ui-button--info--large--focus" href="#" role="button">Focus</a>
210+
<a class="ui-button--warning--large--focus" href="#" role="button">Focus</a>
211+
<a class="ui-button--danger--large--focus" href="#" role="button">Focus</a>
138212
</p>
139213
<p>
140-
<a class="ui-button--primary--focus" href="#" role="button">Focus</a>
141214
<a class="ui-button--default--focus" href="#" role="button">Focus</a>
215+
<a class="ui-button--primary--focus" href="#" role="button">Focus</a>
216+
<a class="ui-button--success--focus" href="#" role="button">Focus</a>
217+
<a class="ui-button--info--focus" href="#" role="button">Focus</a>
218+
<a class="ui-button--warning--focus" href="#" role="button">Focus</a>
219+
<a class="ui-button--danger--focus" href="#" role="button">Focus</a>
142220
</p>
143221
<p>
144-
<a class="ui-button--primary--small--focus" href="#" role="button">Focus</a>
145222
<a class="ui-button--default--small--focus" href="#" role="button">Focus</a>
223+
<a class="ui-button--primary--small--focus" href="#" role="button">Focus</a>
224+
<a class="ui-button--success--small--focus" href="#" role="button">Focus</a>
225+
<a class="ui-button--info--small--focus" href="#" role="button">Focus</a>
226+
<a class="ui-button--warning--small--focus" href="#" role="button">Focus</a>
227+
<a class="ui-button--danger--small--focus" href="#" role="button">Focus</a>
146228
</p>
147229
<p>
148-
<a class="ui-button--primary--extra-small--focus" href="#" role="button">Focus</a>
149230
<a class="ui-button--default--extra-small--focus" href="#" role="button">Focus</a>
231+
<a class="ui-button--primary--extra-small--focus" href="#" role="button">Focus</a>
232+
<a class="ui-button--success--extra-small--focus" href="#" role="button">Focus</a>
233+
<a class="ui-button--info--extra-small--focus" href="#" role="button">Focus</a>
234+
<a class="ui-button--warning--extra-small--focus" href="#" role="button">Focus</a>
235+
<a class="ui-button--danger--extra-small--focus" href="#" role="button">Focus</a>
150236
</p>
151237
</form>
152238

153239
<h3>Hover Class</h3>
154240
<p>Add <code>--hover</code> to the end of the button class.</p>
155241
<form>
156242
<p>
157-
<a class="ui-button--primary--large--hover" href="#" role="button">Hover</a>
158243
<a class="ui-button--default--large--hover" href="#" role="button">Hover</a>
244+
<a class="ui-button--primary--large--hover" href="#" role="button">Hover</a>
245+
<a class="ui-button--success--large--hover" href="#" role="button">Hover</a>
246+
<a class="ui-button--info--large--hover" href="#" role="button">Hover</a>
247+
<a class="ui-button--warning--large--hover" href="#" role="button">Hover</a>
248+
<a class="ui-button--danger--large--hover" href="#" role="button">Hover</a>
159249
</p>
160250
<p>
161-
<a class="ui-button--primary--hover" href="#" role="button">Hover</a>
162251
<a class="ui-button--default--hover" href="#" role="button">Hover</a>
252+
<a class="ui-button--primary--hover" href="#" role="button">Hover</a>
253+
<a class="ui-button--success--hover" href="#" role="button">Hover</a>
254+
<a class="ui-button--info--hover" href="#" role="button">Hover</a>
255+
<a class="ui-button--warning--hover" href="#" role="button">Hover</a>
256+
<a class="ui-button--danger--hover" href="#" role="button">Hover</a>
163257
</p>
164258
<p>
165-
<a class="ui-button--primary--small--hover" href="#" role="button">Hover</a>
166259
<a class="ui-button--default--small--hover" href="#" role="button">Hover</a>
260+
<a class="ui-button--primary--small--hover" href="#" role="button">Hover</a>
261+
<a class="ui-button--success--small--hover" href="#" role="button">Hover</a>
262+
<a class="ui-button--info--small--hover" href="#" role="button">Hover</a>
263+
<a class="ui-button--warning--small--hover" href="#" role="button">Hover</a>
264+
<a class="ui-button--danger--small--hover" href="#" role="button">Hover</a>
167265
</p>
168266
<p>
169-
<a class="ui-button--primary--extra-small--hover" href="#" role="button">Hover</a>
170267
<a class="ui-button--default--extra-small--hover" href="#" role="button">Hover</a>
268+
<a class="ui-button--primary--extra-small--hover" href="#" role="button">Hover</a>
269+
<a class="ui-button--success--extra-small--hover" href="#" role="button">Hover</a>
270+
<a class="ui-button--info--extra-small--hover" href="#" role="button">Hover</a>
271+
<a class="ui-button--warning--extra-small--hover" href="#" role="button">Hover</a>
272+
<a class="ui-button--danger--extra-small--hover" href="#" role="button">Hover</a>
171273
</p>
172274
</form>
173275

0 commit comments

Comments
 (0)