javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

different way to do block buttons

Browse Source
This commit is contained in:
Adam Bradley
2013-10-16 00:46:31 -05:00
parent 246fee2436
commit 18ad1f651d
6 changed files with 120 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
test/buttons.html
View File

@ -18,19 +18,7 @@
<div class="padding">
<h3>Default (Block w/ parent .padding)</h3>
<p>
<a class="button button-default">Default</a>
<a class="button button-secondary">Secondary</a>
<a class="button button-primary">Primary</a>
<a class="button button-info">Info</a>
<a class="button button-success">Success</a>
<a class="button button-warning">Warning</a>
<a class="button button-danger">Danger</a>
<a class="button button-dark">Dark</a>
</p>
<h3>Inline (.button-inline override)</h3>
<h3>Default (Inline)</h3>
<p>
<a class="button button-default button-inline">Default</a>
<a class="button button-secondary button-inline">Secondary</a>
@ -42,14 +30,26 @@
<a class="button button-dark button-inline">Dark</a>
</p>
<h3>Block (.block w/ parent .padding)</h3>
<p>
<a class="button block button-default">Default</a>
<a class="button block button-secondary">Secondary</a>
<a class="button block button-primary">Primary</a>
<a class="button block button-info">Info</a>
<a class="button block button-success">Success</a>
<a class="button block button-warning">Warning</a>
<a class="button block button-danger">Danger</a>
<a class="button block button-dark">Dark</a>
</p>
<h3>Icon (Inline Default)</h3>
<p>
<a class="button button-icon"><i class="icon-home"></i></a>
</p>
<h3>Icon (.button-block override)</h3>
<h3>Icon (.block override)</h3>
<p>
<a class="button button-icon button-block"><i class="icon-home"></i></a>
<a class="button button-icon block"><i class="icon-home"></i></a>
</p>
<h3>Outline (Inline Default)</h3>
@ -64,16 +64,16 @@
<a class="button button-dark button-outline">Dark</a>
</p>
<h3>Outline (.button-block override)</h3>
<h3>Outline (.block override)</h3>
<p>
<a class="button button-default button-outline button-block">Default</a>
<a class="button button-secondary button-outline button-block">Secondary</a>
<a class="button button-primary button-outline button-block">Primary</a>
<a class="button button-info button-outline button-block">Info</a>
<a class="button button-success button-outline button-block">Success</a>
<a class="button button-warning button-outline button-block">Warning</a>
<a class="button button-danger button-outline button-block">Danger</a>
<a class="button button-dark button-outline button-block">Dark</a>
<a class="button button-default button-outline block">Default</a>
<a class="button button-secondary button-outline block">Secondary</a>
<a class="button button-primary button-outline block">Primary</a>
<a class="button button-info button-outline block">Info</a>
<a class="button button-success button-outline block">Success</a>
<a class="button button-warning button-outline block">Warning</a>
<a class="button button-danger button-outline block">Danger</a>
<a class="button button-dark button-outline block">Dark</a>
</p>
<h3>Clear (Inline Default)</h3>
@ -88,46 +88,69 @@
<a class="button button-dark button-clear">Dark</a>
</p>
<h3>Clear (.button-block override)</h3>
<h3>Clear (.block override)</h3>
<p>
<a class="button button-default button-clear button-block">Default</a>
<a class="button button-secondary button-clear button-block">Secondary</a>
<a class="button button-primary button-clear button-block">Primary</a>
<a class="button button-info button-clear button-block">Info</a>
<a class="button button-success button-clear button-block">Success</a>
<a class="button button-warning button-clear button-block">Warning</a>
<a class="button button-danger button-clear button-block">Danger</a>
<a class="button button-dark button-clear button-block">Dark</a>
<a class="button button-default button-clear block">Default</a>
<a class="button button-secondary button-clear block">Secondary</a>
<a class="button button-primary button-clear block">Primary</a>
<a class="button button-info button-clear block">Info</a>
<a class="button button-success button-clear block">Success</a>
<a class="button button-warning button-clear block">Warning</a>
<a class="button button-danger button-clear block">Danger</a>
<a class="button button-dark button-clear block">Dark</a>
</p>
<p>
<a class="button button-secondary" href="index.html">Homepage</a>
</p>
</div>
<h3>Default (Block w/out padding)</h3>
<h3>Block w/out padding</h3>
<p>
<a class="button button-default">Default</a>
<a class="button button-secondary">Secondary</a>
<a class="button button-primary">Primary</a>
<a class="button button-info">Info</a>
<a class="button button-success">Success</a>
<a class="button button-warning">Warning</a>
<a class="button button-danger">Danger</a>
<a class="button button-dark">Dark</a>
<a class="button block button-default">Default</a>
<a class="button block button-secondary">Secondary</a>
<a class="button block button-primary">Primary</a>
<a class="button block button-info">Info</a>
<a class="button block button-success">Success</a>
<a class="button block button-warning">Warning</a>
<a class="button block button-danger">Danger</a>
<a class="button block button-dark">Dark</a>
</p>
<h3>Default (Block w/out padding and parent .margin)</h3>
<h3>Block w/out parent padding but parent .margin</h3>
<p class="margin">
<a class="button button-default">Default</a>
<a class="button button-secondary">Secondary</a>
<a class="button button-primary">Primary</a>
<a class="button button-info">Info</a>
<a class="button button-success">Success</a>
<a class="button button-warning">Warning</a>
<a class="button button-danger">Danger</a>
<a class="button button-dark">Dark</a>
<a class="button block button-default">Default</a>
<a class="button block button-secondary">Secondary</a>
<a class="button block button-primary">Primary</a>
<a class="button block button-info">Info</a>
<a class="button block button-success">Success</a>
<a class="button block button-warning">Warning</a>
<a class="button block button-danger">Danger</a>
<a class="button block button-dark">Dark</a>
</p>
<h3>&lt;a&gt; .block .margin set on each button and nothing on the parent</h3>
<p>
<a class="button block margin button-default">Default</a>
<a class="button block margin button-secondary">Secondary</a>
<a class="button block margin button-primary">Primary</a>
<a class="button block margin button-info">Info</a>
<a class="button block margin button-success">Success</a>
<a class="button block margin button-warning">Warning</a>
<a class="button block margin button-danger">Danger</a>
<a class="button block margin button-dark">Dark</a>
</p>
<h3>&lt;button&gt; .block .margin set on each button and nothing on the parent</h3>
<p>
<button class="button block margin button-default">Default</button>
<button class="button block margin button-secondary">Secondary</button>
<button class="button block margin button-primary">Primary</button>
<button class="button block margin button-info">Info</button>
<button class="button block margin button-success">Success</button>
<button class="button block margin button-warning">Warning</button>
<button class="button block margin button-danger">Danger</button>
<button class="button block margin button-dark">Dark</button>
</p>
<p>
<a class="button button-secondary" href="index.html">Homepage</a>
</p>
</main>