refactor(icon): rename icon to ion-icon

Closes #855
This commit is contained in:
Adam Bradley
2016-01-05 22:27:04 -06:00
parent 8987e4b932
commit 883e1b68b1
62 changed files with 307 additions and 303 deletions

View File

@@ -24,7 +24,7 @@ $button-fab-size: 56px !default;
font-size: 14px;
icon {
ion-icon {
flex: 1;
font-size: 2.8rem;
}

View File

@@ -4,14 +4,14 @@
// --------------------------------------------------
.button-icon-left icon {
.button-icon-left ion-icon {
padding-right: 0.3em;
font-size: 1.4em;
line-height: 0.67;
pointer-events: none;
}
.button-icon-right icon {
.button-icon-right ion-icon {
padding-left: 0.4em;
font-size: 1.4em;
line-height: 0.67;
@@ -22,7 +22,7 @@
padding: 0;
min-width: 0.9em;
icon {
ion-icon {
padding: 0 0.5em;
font-size: 1.8em;
line-height: 0.67;

View File

@@ -85,7 +85,7 @@ $button-ios-small-icon-font-size: 1.3em !default;
font-size: $button-ios-small-font-size;
}
.button-small.button-icon-only icon {
.button-small.button-icon-only ion-icon {
font-size: $button-ios-small-icon-font-size;
}

View File

@@ -104,7 +104,7 @@ $button-md-small-icon-font-size: 1.4em !default;
font-size: $button-md-small-font-size;
}
.button-small.button-icon-only icon {
.button-small.button-icon-only ion-icon {
font-size: $button-md-small-icon-font-size;
}

View File

@@ -123,12 +123,12 @@ export class Button {
}
} else if (childNode.nodeType === 1) {
if (childNode.nodeName === 'ICON') {
if (childNode.nodeName === 'ION-ICON') {
// icon element node
nodes.push(ICON);
} else {
// element other than an <icon>
// element other than an <ion-icon>
nodes.push(TEXT);
}
}

View File

@@ -11,8 +11,8 @@
</p>
<p>
<a button block href="#"><icon help-circle></icon> a[button][block] icon</a>
<button block><icon help-circle></icon> button[block] icon</button>
<a button block href="#"><ion-icon name="help-circle"></ion-icon> a[button][block] icon</a>
<button block><ion-icon name="help-circle"></ion-icon> button[block] icon</button>
</p>
<p>

View File

@@ -1,24 +1,24 @@
<button fab fab-left fab-top>
<icon add></icon>
<ion-icon name="add"></ion-icon>
</button>
<button fab fab-center fab-top secondary>
<icon add></icon>
<ion-icon name="add"></ion-icon>
</button>
<button fab fab-right fab-top danger>
<icon add></icon>
<ion-icon name="add"></ion-icon>
</button>
<button fab fab-left fab-bottom light>
<icon add></icon>
<ion-icon name="add"></ion-icon>
</button>
<button fab fab-center fab-bottom primary>
<icon add></icon>
<ion-icon name="add"></ion-icon>
</button>
<button fab fab-right fab-bottom dark>
<icon add></icon>
<ion-icon name="add"></ion-icon>
</button>

View File

@@ -7,11 +7,11 @@
<div>
<button>
<icon home></icon>
<ion-icon name="home"></ion-icon>
Left Icon
</button>
<a button>
<icon home></icon>
<ion-icon name="home"></ion-icon>
Left Icon
</a>
</div>
@@ -19,30 +19,30 @@
<div>
<button>
Right Icon
<icon star></icon>
<ion-icon name="star"></ion-icon>
</button>
<a button>
Right Icon
<icon star></icon>
<ion-icon name="star"></ion-icon>
</a>
</div>
<div>
<button>
<icon flag></icon>
<ion-icon name="flag"></ion-icon>
</button>
<a button>
<icon flag></icon>
<ion-icon name="flag"></ion-icon>
</a>
</div>
<div>
<button large>
<icon help-circle></icon>
<ion-icon name="help-circle"></ion-icon>
Left, Large
</button>
<a button large>
<icon help-circle></icon>
<ion-icon name="help-circle"></ion-icon>
Left, Large
</a>
</div>
@@ -50,30 +50,30 @@
<div>
<button large>
Right, Large
<icon settings></icon>
<ion-icon name="settings"></ion-icon>
</button>
<a button large>
Right, Large
<icon settings></icon>
<ion-icon name="settings"></ion-icon>
</a>
</div>
<div>
<button large>
<icon heart></icon>
<ion-icon name="heart"></ion-icon>
</button>
<a button large>
<icon heart></icon>
<ion-icon name="heart"></ion-icon>
</a>
</div>
<div>
<button small>
<icon checkmark></icon>
<ion-icon name="checkmark"></ion-icon>
Left, Small
</button>
<a button small>
<icon checkmark></icon>
<ion-icon name="checkmark"></ion-icon>
Left, Small
</a>
</div>
@@ -81,20 +81,20 @@
<div>
<button small>
Right, Small
<icon arrow-forward></icon>
<ion-icon name="arrow-forward"></ion-icon>
</button>
<a button small>
Right, Small
<icon arrow-forward></icon>
<ion-icon name="arrow-forward"></ion-icon>
</a>
</div>
<div>
<button small>
<icon search></icon>
<ion-icon name="search"></ion-icon>
</button>
<a button small>
<icon search></icon>
<ion-icon name="search"></ion-icon>
</a>
</div>