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:15:25 -05:00
parent ec70a74d0a
commit 9f937eb24d
5 changed files with 89 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -91,6 +91,19 @@ input.button.button-block {
margin-top: 0; margin-top: 0;
} }
.icon-left:before {
font-size: 1.5em;
margin-top: -0.1em;
margin-right: 0.25em;
}
.icon-right:before {
@include flex-order(2);
font-size: 1.5em;
margin-top: -0.1em;
margin-left: 0.25em;
}
// Button Misc // Button Misc

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

@ -4,18 +4,18 @@
$button-ios-font-size: 1.4rem !default; $button-ios-font-size: 1.4rem !default;
$button-ios-padding: 0 10px !default; $button-ios-padding: 0 10px !default;
$button-ios-height: 29px !default; $button-ios-height: 42px !default;
$button-ios-border-width: 1px !default; $button-ios-border-width: 1px !default;
$button-ios-border-radius: 5px !default; $button-ios-border-radius: 5px !default;
$button-ios-large-font-size: 2rem !default; $button-ios-large-font-size: 2rem !default;
$button-ios-large-height: 54px !default; $button-ios-large-height: 54px !default;
$button-ios-large-padding: 16px !default; $button-ios-large-padding: 14px !default;
$button-ios-large-icon-size: 32px !default; $button-ios-large-icon-size: 32px !default;
$button-ios-small-font-size: 1.2rem !default; $button-ios-small-font-size: 1.2rem !default;
$button-ios-small-height: 28px !default; $button-ios-small-height: 28px !default;
$button-ios-small-padding: 4px !default; $button-ios-small-padding: 6px !default;
$button-ios-small-icon-size: 16px !default; $button-ios-small-icon-size: 16px !default;
@ -67,7 +67,7 @@ $button-ios-small-icon-size: 16px !default;
.button-ios { .button-ios {
padding: $button-ios-padding; padding: $button-ios-padding;
height: $button-ios-height; min-height: $button-ios-height;
font-size: $button-ios-font-size; font-size: $button-ios-font-size;
border-radius: $button-ios-border-radius; border-radius: $button-ios-border-radius;

1
src/components/button/test/icons/e2e.js Normal file
View File

@ -0,0 +1 @@

58
src/components/button/test/icons/main.html Normal file
View File

@ -0,0 +1,58 @@
<div class="padding">
<p>
<button class="button button-positive ion-home icon-left">
Left Icon
</button>
<a class="button button-positive ion-home icon-left">
Left Icon
</a>
</p>
<p>
<button class="button button-positive ion-star icon-right">
Right Icon
</button>
<a class="button button-positive ion-star icon-right">
Right Icon
</a>
</p>
<p>
<button class="button button-positive button-large ion-home icon-left">
Left, Large
</button>
<a class="button button-positive button-large ion-home icon-left">
Left, Large
</a>
</p>
<p>
<button class="button button-positive button-large ion-star icon-right">
Right, Large
</button>
<a class="button button-positive button-large ion-star icon-right">
Right, Large
</a>
</p>
<p>
<button class="button button-positive button-small ion-home icon-left">
Left Icon, Small
</button>
<a class="button button-positive button-small ion-home icon-left">
Left Icon, Small
</a>
</p>
<p>
<button class="button button-positive button-small ion-star icon-right">
Right Icon, Small
</button>
<a class="button button-positive button-small ion-star icon-right">
Right Icon, Small
</a>
</p>
</div>

13
src/components/button/test/icons/main.js Normal file
View File

@ -0,0 +1,13 @@
import {bootstrap} from 'angular2/core'
import {Component, Template} from 'angular2/angular2'
import {Button} from 'ionic2/components/button/button'
@Component({ selector: '[ion-app]' })
@Template({
url: 'main.html',
directives: [Button]
})
class IonicApp {}
bootstrap(IonicApp)