javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

button icons

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/button/extensions/ios.scss
View File

@ -68,15 +68,22 @@ $button-ios-small-icon-size: 16px !default;
.button-ios {
padding: $button-ios-padding;
min-height: $button-ios-height;
font-size: $button-ios-font-size;
border-radius: $button-ios-border-radius;
font-size: $button-ios-font-size;
&.button-icon {
font-size: $button-ios-font-size + 1.5;
}
&.button-large {
padding: 0 $button-ios-large-padding;
min-width: ($button-ios-large-padding * 4);
min-height: $button-ios-large-height + 5;
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-height: $button-ios-small-height + 2;
font-size: $button-ios-small-font-size;
&.button-icon {
font-size: $button-ios-small-font-size + 1.2;
}
}
}

21
src/components/button/test/icons/main.html
View File

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