button fixes

This commit is contained in:
Adam Bradley
2015-06-19 12:51:18 -05:00
parent 4e947f216d
commit 21c1b550ef
21 changed files with 128 additions and 319 deletions

View File

@@ -1,49 +1,49 @@
<div>
<a class="button button-clear" href="#">a (default)</a>
<button class="button button-clear">button (default)</button>
<button class="button button-clear hover">hover</button>
<button class="button button-clear activated">activated</button>
<a button clear href="#">a[button][clear]</a>
<button clear>button[clear]</button>
<button clear class="hover">hover</button>
<button clear class="activated">activated</button>
</div>
<div>
<a class="button button-clear button-primary" href="#">a.primary</a>
<button class="button button-clear button-primary">button.primary</button>
<button class="button button-clear button-primary hover">hover</button>
<button class="button button-clear button-primary activated">activated</button>
<a button clear primary href="#">a.primary</a>
<button clear primary>button.primary</button>
<button clear primary class="hover">hover</button>
<button clear primary class="activated">activated</button>
</div>
<div>
<a class="button button-clear button-secondary" href="#">a.secondary</a>
<button class="button button-clear button-secondary">button.secondary</button>
<button class="button button-clear button-secondary hover">hover</button>
<button class="button button-clear button-secondary activated">activated</button>
<a button clear secondary href="#">a.secondary</a>
<button clear secondary>button.secondary</button>
<button clear secondary class="hover">hover</button>
<button clear secondary class="activated">activated</button>
</div>
<div>
<a class="button button-clear button-danger" href="#">a.danger</a>
<button class="button button-clear button-danger">button.danger</button>
<button class="button button-clear button-danger hover">hover</button>
<button class="button button-clear button-danger activated">activated</button>
<a button clear danger href="#">a.danger</a>
<button clear danger>button.danger</button>
<button clear danger class="hover">hover</button>
<button clear danger class="activated">activated</button>
</div>
<div>
<a class="button button-clear button-light" href="#">a.light</a>
<button class="button button-clear button-light">button.light</button>
<button class="button button-clear button-light hover">hover</button>
<button class="button button-clear button-light activated">activated</button>
<a button clear light href="#">a.light</a>
<button clear light>button.light</button>
<button clear light class="hover">hover</button>
<button clear light class="activated">activated</button>
</div>
<div>
<a class="button button-clear button-stable" href="#">a.stable</a>
<button class="button button-clear button-stable">button.stable</button>
<button class="button button-clear button-stable hover">hover</button>
<button class="button button-clear button-stable activated">activated</button>
<a button clear stable href="#">a.stable</a>
<button clear stable>button.stable</button>
<button clear stable class="hover">hover</button>
<button clear stable class="activated">activated</button>
</div>
<div>
<a class="button button-clear button-dark" href="#">a.dark</a>
<button class="button button-clear button-dark">button.dark</button>
<button class="button button-clear button-dark hover">hover</button>
<button class="button button-clear button-dark activated">activated</button>
<a button clear dark href="#">a.dark</a>
<button clear dark>button.dark</button>
<button clear dark class="hover">hover</button>
<button clear dark class="activated">activated</button>
</div>

View File

@@ -1,15 +1,15 @@
<div>
<a class="button button-full button-primary" href="#">a.button-full</a>
<button class="button button-full button-primary">button.button-full</button>
<a button full primary href="#">a[button][full]</a>
<button full primary>button[full]</button>
</div>
<div>
<a class="button button-full button-outline button-primary" href="#">a.button-full</a>
<button class="button button-full button-outline button-primary">button.button-full</button>
<a button full outline primary href="#">a[button][full][outline]</a>
<button full outline primary>button[full][outline]</button>
</div>
<div>
<a class="button button-full button-clear button-primary" href="#">a.button-full</a>
<button class="button button-full button-clear button-primary">button.button-full</button>
<a button full clear primary href="#">a[button][full][clear]</a>
<button full clear primary>button[full][clear]</button>
</div>

View File

@@ -2,77 +2,77 @@
<div class="padding">
<div>
<button class="button button-primary ion-home icon-left">
<button primary class="ion-home icon-left">
Left Icon
</button>
<a class="button button-primary ion-home icon-left">
<a button primary class="ion-home icon-left">
Left Icon
</a>
</div>
<div>
<button class="button button-primary ion-star icon-right">
<button primary class="ion-star icon-right">
Right Icon
</button>
<a class="button button-primary ion-star icon-right">
<a button primary class="ion-star icon-right">
Right Icon
</a>
</div>
<div>
<button class="button button-primary ion-ionic button-icon">
<button primary class="ion-ionic button-icon">
</button>
<a class="button button-primary ion-ionic button-icon">
<a button primary class="ion-ionic button-icon">
</a>
</div>
<div>
<button class="button button-primary button-large ion-home icon-left">
<button large primary class="ion-home icon-left">
Left, Large
</button>
<a class="button button-primary button-large ion-home icon-left">
<a button large primary class="ion-home icon-left">
Left, Large
</a>
</div>
<div>
<button class="button button-primary button-large ion-star icon-right">
<button large primary class="ion-star icon-right">
Right, Large
</button>
<a class="button button-primary button-large ion-star icon-right">
<a button large primary class="ion-star icon-right">
Right, Large
</a>
</div>
<div>
<button class="button button-primary ion-ionic button-icon button-large">
<button primary class="ion-ionic button-icon button-large">
</button>
<a class="button button-primary ion-ionic button-icon button-large">
<a button primary class="ion-ionic button-icon button-large">
</a>
</div>
<div>
<button class="button button-primary button-small ion-home icon-left">
<button small primary class="ion-home icon-left">
Left Icon, Small
</button>
<a class="button button-primary button-small ion-home icon-left">
<a button small primary class="ion-home icon-left">
Left Icon, Small
</a>
</div>
<div>
<button class="button button-primary button-small ion-star icon-right">
<button small primary class="ion-star icon-right">
Right Icon, Small
</button>
<a class="button button-primary button-small ion-star icon-right">
<a button small primary class="ion-star icon-right">
Right Icon, Small
</a>
</div>
<div>
<button class="button button-primary ion-ionic button-icon button-small">
<button small icon primary class="ion-ionic">
</button>
<a class="button button-primary ion-ionic button-icon button-small">
<a button small icon primary class="ion-ionic">
</a>
</div>

View File

@@ -1,42 +1,42 @@
<div>
<a class="button button-outline button-primary" href="#">a.primary</a>
<button class="button button-outline button-primary">button.primary</button>
<button class="button button-outline button-primary hover">hover</button>
<button class="button button-outline button-primary activated">activated</button>
<a button outline primary href="#">a.primary</a>
<button outline primary>button.primary</button>
<button outline primary class="hover">hover</button>
<button outline primary class="activated">activated</button>
</div>
<div>
<a class="button button-outline button-secondary" href="#">a.secondary</a>
<button class="button button-outline button-secondary">button.secondary</button>
<button class="button button-outline button-secondary hover">hover</button>
<button class="button button-outline button-secondary activated">activated</button>
<a button outline secondary href="#">a.secondary</a>
<button outline secondary>button.secondary</button>
<button outline secondary class="hover">hover</button>
<button outline secondary class="activated">activated</button>
</div>
<div>
<a class="button button-outline button-danger" href="#">a.danger</a>
<button class="button button-outline button-danger">button.danger</button>
<button class="button button-outline button-danger hover">hover</button>
<button class="button button-outline button-danger activated">activated</button>
<a button outline danger href="#">a.danger</a>
<button outline danger>button.danger</button>
<button outline danger class="hover">hover</button>
<button outline danger class="activated">activated</button>
</div>
<div>
<a class="button button-outline button-light" href="#">a.light</a>
<button class="button button-outline button-light">button.light</button>
<button class="button button-outline button-light hover">hover</button>
<button class="button button-outline button-light activated">activated</button>
<a button outline light href="#">a.light</a>
<button outline light>button.light</button>
<button outline light class="hover">hover</button>
<button outline light class="activated">activated</button>
</div>
<div>
<a class="button button-outline button-stable" href="#">a.stable</a>
<button class="button button-outline button-stable">button.stable</button>
<button class="button button-outline button-stable hover">hover</button>
<button class="button button-outline button-stable activated">activated</button>
<a button outline stable href="#">a.stable</a>
<button outline stable>button.stable</button>
<button outline stable class="hover">hover</button>
<button outline stable class="activated">activated</button>
</div>
<div>
<a class="button button-outline button-dark" href="#">a.dark</a>
<button class="button button-outline button-dark">button.dark</button>
<button class="button button-outline button-dark hover">hover</button>
<button class="button button-outline button-dark activated">activated</button>
<a button outline dark href="#">a.dark</a>
<button outline dark>button.dark</button>
<button outline dark class="hover">hover</button>
<button outline dark class="activated">activated</button>
</div>

View File

@@ -1,36 +1,36 @@
<div>
<a class="button button-primary" href="#">a (default)</a>
<button class="button button-primary">button (default)</button>
<a button primary href="#">a[button]</a>
<button primary>button</button>
</div>
<div>
<a class="button button-small button-primary" href="#">a.small</a>
<button class="button button-small button-primary">button.small</button>
<a button small primary href="#">a[small]</a>
<button small primary>button[small]</button>
<a class="button button-outline button-small button-primary" href="#">a.outline.small</a>
<button class="button button-outline button-small button-primary">button.outline.small</button>
<a button outline small primary href="#">a[outline][small]</a>
<button outline small primary>button[outline][small]</button>
</div>
<div>
<a class="button button-clear button-small button-primary" href="#">a.clear.small</a>
<button class="button button-clear button-small button-primary">button.clear.small</button>
<a button clear small primary href="#">a[clear][small]</a>
<button clear small primary>button[clear][small]</button>
</div>
<div>
<a class="button button-large button-primary" href="#">
<a button large primary href="#">
<span style="font-size:48px">H</span>
<span style="font-size:38px">E</span>
<span style="font-size:32px">L</span>
<span style="font-size:24px">L</span>
O</a>
<button class="button button-large button-primary">button</button>
<button large primary>button</button>
</div>
<div>
<a class="button button-outline button-large button-primary" href="#">a</a>
<button class="button button-outline button-large button-primary">button</button>
<a button outline large primary href="#">a</a>
<button outline large primary>button</button>
<a class="button button-clear button-large button-primary" href="#">a</a>
<button class="button button-clear button-large button-primary">button</button>
<a button clear large primary href="#">a</a>
<button clear large primary>button</button>
</div>