3030 < h1 > Button test page</ h1 >
3131
3232 < div class ="example ">
33- < button class ="button primary "> Primary</ button >
34- < button class ="button secondary "> Secondary</ button >
35- < button class ="button tertiary "> Tertiary</ button >
36- < button class ="button success "> Success</ button >
37- < button class ="button alert "> Alert</ button >
38- < button class ="button warning "> Warning</ button >
39- < button class ="button info "> Info</ button >
40- < button class ="button dark "> Dark</ button >
41- < button class ="button yellow "> Yellow</ button >
33+ < button class ="primary "> Primary</ button >
34+ < button class ="secondary "> Secondary</ button >
35+ < button class ="tertiary "> Tertiary</ button >
36+ < button class ="success "> Success</ button >
37+ < button class ="alert "> Alert</ button >
38+ < button class ="warning "> Warning</ button >
39+ < button class ="info "> Info</ button >
40+ < button class ="dark "> Dark</ button >
41+ < button class ="yellow "> Yellow</ button >
4242 </ div >
4343
4444 < div class ="example ">
45- < button class ="button primary outline "> Primary</ button >
46- < button class ="button secondary outline "> Secondary</ button >
47- < button class ="button tertiary outline "> Tertiary</ button >
48- < button class ="button success outline "> Success</ button >
49- < button class ="button alert outline "> Alert</ button >
50- < button class ="button warning outline "> Warning</ button >
51- < button class ="button info outline "> Info</ button >
52- < button class ="button dark outline "> Dark</ button >
53- < button class ="button yellow outline "> Yellow</ button >
45+ < button class ="primary outline "> Primary</ button >
46+ < button class ="secondary outline "> Secondary</ button >
47+ < button class ="tertiary outline "> Tertiary</ button >
48+ < button class ="success outline "> Success</ button >
49+ < button class ="alert outline "> Alert</ button >
50+ < button class ="warning outline "> Warning</ button >
51+ < button class ="info outline "> Info</ button >
52+ < button class ="dark outline "> Dark</ button >
53+ < button class ="yellow outline "> Yellow</ button >
5454 </ div >
5555
5656 < div class ="example ">
5757 < button class ="button "> < span class ="mif-checkmark "> </ span > < span > Font</ span > </ button >
58- < button id =" MACHINE " class ="button success cycle mini outline mr-1 " data-machine =" mrdo "> < span class ="icon mif-gamepad "> </ span > </ button >
58+ < button class ="button success cycle outline "> < span class ="icon mif-gamepad "> </ span > </ button >
5959 < button class ="button " onclick ="$(this).toggleClass('loading') ">
60- < span class ="loader "> < span class ="mif-spinner3 "> </ span > </ span >
60+ < span class ="loader "> < span class ="mif-spinner3 ani-spin "> </ span > </ span >
6161 < span class ="caption "> Load Data</ span >
6262 </ button >
6363 </ div >
@@ -110,34 +110,30 @@ <h1>Button test page</h1>
110110 </ div >
111111
112112 < div class ="example ">
113- < button class ="button small "> Button</ button >
114- < span class ="button small "> Span</ span >
115- < a class ="button small "> Anchor</ a >
116- < button class ="button small outline "> Outline</ button >
117- < button class ="button small hovered "> Hovered</ button >
118- < button class ="button small shadow "> Shadowed</ button >
119- </ div >
120-
121- < div class ="example ">
122- < button class ="button shift "> Button</ button >
123- < span class ="button "> Span</ span >
124- < a class ="button "> Anchor</ a >
113+ < button class ="button shift "> Shift</ button >
125114 < button class ="button outline "> Outline</ button >
126115 < button class ="button hovered "> Hovered</ button >
127- < button class ="button shadow alert "> Shadowed</ button >
128- </ div >
129-
130- < div class ="example ">
131- < button class ="button large "> Button</ button >
132- < span class ="button large "> Span</ span >
133- < a class ="button large "> Anchor</ a >
134- < button class ="button large outline "> Outline</ button >
135- < button class ="button large hovered "> Hovered</ button >
136- < button class ="button large shadow "> Shadowed</ button >
116+ < button class ="button animated-border "> Shadowed</ button >
117+ < button class ="button rainbow-border "> Shadowed</ button >
118+ < button class ="button shadow "> Shadowed</ button >
137119 </ div >
138120
139121 < div class ="example ">
140- < button class ="command-button shadowed ">
122+ < button class ="command-button ">
123+ < span class ="mif-share icon "> </ span >
124+ < span class ="caption ">
125+ Yes, share and connect
126+ < small > Use this option for home or work</ small >
127+ </ span >
128+ </ button >
129+ < button class ="command-button shift ">
130+ < span class ="mif-share icon "> </ span >
131+ < span class ="caption ">
132+ Yes, share and connect
133+ < small > Use this option for home or work</ small >
134+ </ span >
135+ </ button >
136+ < button class ="command-button shadow ">
141137 < span class ="mif-share icon "> </ span >
142138 < span class ="caption ">
143139 Yes, share and connect
@@ -151,12 +147,77 @@ <h1>Button test page</h1>
151147 < span class ="mif-share icon "> </ span >
152148 < span class ="caption "> Share it</ span >
153149 </ button >
154- < button class ="image-button shadowed ">
150+ < button class ="image-button shift ">
151+ < span class ="mif-share icon "> </ span >
152+ < span class ="caption "> Share it</ span >
153+ </ button >
154+ < button class ="image-button shadow ">
155+ < span class ="mif-share icon "> </ span >
156+ < span class ="caption "> Share it</ span >
157+ </ button >
158+ </ div >
159+
160+ < div class ="example ">
161+ < button class ="image-button mini ">
162+ < span class ="mif-share icon "> </ span >
163+ < span class ="caption "> Share it</ span >
164+ </ button >
165+ < button class ="image-button small ">
166+ < span class ="mif-share icon "> </ span >
167+ < span class ="caption "> Share it</ span >
168+ </ button >
169+ < button class ="image-button medium ">
170+ < span class ="mif-share icon "> </ span >
171+ < span class ="caption "> Share it</ span >
172+ </ button >
173+ < button class ="image-button ">
174+ < span class ="mif-share icon "> </ span >
175+ < span class ="caption "> Share it</ span >
176+ </ button >
177+ < button class ="image-button large ">
155178 < span class ="mif-share icon "> </ span >
156179 < span class ="caption "> Share it</ span >
157180 </ button >
158181 </ div >
159182
183+ < div class ="example ">
184+ < button class ="info-button ">
185+ < span class ="title mif-share icon "> </ span >
186+ < span class ="value "> Share it</ span >
187+ </ button >
188+ < button class ="info-button shift ">
189+ < span class ="title mif-share icon "> </ span >
190+ < span class ="value "> Share it</ span >
191+ </ button >
192+ < button class ="info-button shadow ">
193+ < span class ="title mif-share icon "> </ span >
194+ < span class ="value "> Share it</ span >
195+ </ button >
196+ </ div >
197+
198+ < div class ="example ">
199+ < button class ="info-button mini ">
200+ < span class ="title mif-share icon "> </ span >
201+ < span class ="value "> Share it</ span >
202+ </ button >
203+ < button class ="info-button small ">
204+ < span class ="title mif-share icon "> </ span >
205+ < span class ="value "> Share it</ span >
206+ </ button >
207+ < button class ="info-button medium ">
208+ < span class ="title mif-share icon "> </ span >
209+ < span class ="value "> Share it</ span >
210+ </ button >
211+ < button class ="info-button ">
212+ < span class ="title mif-share icon "> </ span >
213+ < span class ="value "> Share it</ span >
214+ </ button >
215+ < button class ="info-button large ">
216+ < span class ="title mif-share icon "> </ span >
217+ < span class ="value "> Share it</ span >
218+ </ button >
219+ </ div >
220+
160221 < div class ="example ">
161222 < button class ="shortcut ">
162223 < span class ="caption "> Rocket</ span >
@@ -204,6 +265,22 @@ <h1>Button test page</h1>
204265 < button class ="button "> corner < span class ="badge corner info "> 10</ span > </ button >
205266 < button class ="button "> corner outside < span class ="badge corner-outside alert "> 10</ span > </ button >
206267 </ div >
268+
269+ < div class ="example ">
270+ < button class ="mini "> Button</ button >
271+ < button class ="small "> Button</ button >
272+ < button class ="medium "> Button</ button >
273+ < button class =""> Button</ button >
274+ < button class ="large "> Button</ button >
275+ </ div >
276+
277+ < div class ="example ">
278+ < button class ="pill-button mini "> Button</ button >
279+ < button class ="pill-button small "> Button</ button >
280+ < button class ="pill-button medium "> Button</ button >
281+ < button class ="pill-button "> Button</ button >
282+ < button class ="pill-button large "> Button</ button >
283+ </ div >
207284
208285 </ div >
209286
0 commit comments