button icons

This commit is contained in:
Adam Bradley
2015-04-02 22:32:10 -05:00
parent 9f937eb24d
commit a7e438a848
2 changed files with 33 additions and 1 deletions

View File

@ -68,15 +68,22 @@ $button-ios-small-icon-size: 16px !default;
.button-ios { .button-ios {
padding: $button-ios-padding; padding: $button-ios-padding;
min-height: $button-ios-height; min-height: $button-ios-height;
font-size: $button-ios-font-size;
border-radius: $button-ios-border-radius; border-radius: $button-ios-border-radius;
font-size: $button-ios-font-size;
&.button-icon {
font-size: $button-ios-font-size + 1.5;
}
&.button-large { &.button-large {
padding: 0 $button-ios-large-padding; padding: 0 $button-ios-large-padding;
min-width: ($button-ios-large-padding * 4); min-width: ($button-ios-large-padding * 4);
min-height: $button-ios-large-height + 5; min-height: $button-ios-large-height + 5;
font-size: $button-ios-large-font-size; font-size: $button-ios-large-font-size;
&.button-icon {
font-size: $button-ios-large-font-size + 1.7;
}
} }
@ -85,6 +92,10 @@ $button-ios-small-icon-size: 16px !default;
min-width: ($button-ios-small-padding * 4); min-width: ($button-ios-small-padding * 4);
min-height: $button-ios-small-height + 2; min-height: $button-ios-small-height + 2;
font-size: $button-ios-small-font-size; font-size: $button-ios-small-font-size;
&.button-icon {
font-size: $button-ios-small-font-size + 1.2;
}
} }
} }

View File

@ -19,6 +19,13 @@
</a> </a>
</p> </p>
<p>
<button class="button button-positive ion-ionic button-icon">
</button>
<a class="button button-positive ion-ionic button-icon">
</a>
</p>
<p> <p>
<button class="button button-positive button-large ion-home icon-left"> <button class="button button-positive button-large ion-home icon-left">
Left, Large Left, Large
@ -37,6 +44,13 @@
</a> </a>
</p> </p>
<p>
<button class="button button-positive ion-ionic button-icon button-large">
</button>
<a class="button button-positive ion-ionic button-icon button-large">
</a>
</p>
<p> <p>
<button class="button button-positive button-small ion-home icon-left"> <button class="button button-positive button-small ion-home icon-left">
Left Icon, Small Left Icon, Small
@ -55,4 +69,11 @@
</a> </a>
</p> </p>
<p>
<button class="button button-positive ion-ionic button-icon button-small">
</button>
<a class="button button-positive ion-ionic button-icon button-small">
</a>
</p>
</div> </div>