diff --git a/demos/cards/main.html b/demos/cards/main.html index 614186d229..7f873bceb2 100644 --- a/demos/cards/main.html +++ b/demos/cards/main.html @@ -38,27 +38,23 @@ Card Link Item 1 - Card Link Item 2 - - \ No newline at end of file + diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss index ec55188b04..a48b0ebdbc 100644 --- a/ionic/components/card/modes/ios.scss +++ b/ionic/components/card/modes/ios.scss @@ -83,11 +83,6 @@ ion-card { font-size: 1.3rem; } - icon[forward] { - font-size: 2rem; - color: $item-ios-forward-icon-color; - } - .card-title { padding: $card-ios-title-padding; font-size: $card-ios-title-font-size; diff --git a/ionic/components/card/test/basic/main.html b/ionic/components/card/test/basic/main.html index c4707bb112..afcac6f52c 100644 --- a/ionic/components/card/test/basic/main.html +++ b/ionic/components/card/test/basic/main.html @@ -38,25 +38,21 @@ Card Link Item 1 - Card Link Item 2 - diff --git a/ionic/components/icon/icon.scss b/ionic/components/icon/icon.scss index 1c93ea46a7..f0823cb9a7 100644 --- a/ionic/components/icon/icon.scss +++ b/ionic/components/icon/icon.scss @@ -1,4 +1,8 @@ +// Icon +// -------------------------------------------------- + + icon { display: inline-block; font-size: 1.2em; diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 9926b160b4..e489ab74ff 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -53,10 +53,7 @@ export class Icon { onInit() { let ele = this.eleRef.nativeElement; - if (ele.hasAttribute('forward')) { - this.name = this.config.setting('forwardIcon'); - - } else if (this.mode == 'ios' && this.ios) { + if (this.mode == 'ios' && this.ios) { this.name = this.ios; } else if (this.mode == 'md' && this.md) { diff --git a/ionic/components/icon/modes/ios.scss b/ionic/components/icon/modes/ios.scss new file mode 100644 index 0000000000..64a8de114c --- /dev/null +++ b/ionic/components/icon/modes/ios.scss @@ -0,0 +1,12 @@ + +// iOS Icon +// -------------------------------------------------- + + +$icon-forward-ios-background-svg: "" !default; + + +@mixin ios-icon-forward($fg-color) { + $svg: str-replace($icon-forward-ios-background-svg, 'fg-color', $fg-color); + @include svg-background-image($svg); +} diff --git a/ionic/components/icon/test/basic/main.html b/ionic/components/icon/test/basic/main.html index 7f94ed6db8..9aecc23dac 100644 --- a/ionic/components/icon/test/basic/main.html +++ b/ionic/components/icon/test/basic/main.html @@ -77,11 +77,10 @@ - + - <icon forward></icon> + ion-item w/ [forward-icon] attr. text text text text text text - diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index 4fd9c46aec..e0b71ff223 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -122,11 +122,6 @@ $item-ios-forward-icon-color: $item-ios-border-color !default; color: $item-ios-note-color; } - icon[forward] { - font-size: 2rem; - color: $item-ios-forward-icon-color; - } - ion-avatar { min-width: $item-ios-avatar-size; @@ -148,6 +143,19 @@ $item-ios-forward-icon-color: $item-ios-border-color !default; } +.list, +.card { + button[ion-item]:not([no-forward-icon]), + a[ion-item]:not([no-forward-icon]), + [forward-icon] { + @include ios-icon-forward($item-ios-forward-icon-color); + background-repeat: no-repeat; + background-position: right ($item-ios-padding-right - 4) center; + background-size: 16px 16px; + padding-right: 32px; + } +} + &.hairlines .list .item { margin-top: -0.5px; @@ -161,4 +169,3 @@ $item-ios-forward-icon-color: $item-ios-border-color !default; border-top-width: 0.55px; } } - diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index 74c2fda56b..fbec5ff56a 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -136,11 +136,6 @@ $item-md-forward-icon-color: $item-md-border-color !default; margin-left: $item-md-padding-left + ($item-md-padding-left / 2); } - icon[forward] { - font-size: 2rem; - color: $item-md-forward-icon-color; - } - ion-avatar { min-width: $item-md-avatar-size; diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html index c695a1449a..2810fb108c 100644 --- a/ionic/components/item/test/buttons/main.html +++ b/ionic/components/item/test/buttons/main.html @@ -4,22 +4,18 @@ a[ion-item] - a[ion-item].activated - diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html index 1156ee57d9..895c224360 100644 --- a/ionic/components/item/test/icons/main.html +++ b/ionic/components/item/test/icons/main.html @@ -2,19 +2,16 @@ - - ion-item forward icon - + + ion-item [forward-icon] attr a[ion-item] w/ forward icon - @@ -37,9 +34,9 @@ button[ion-item] w/ left side icon - diff --git a/ionic/components/list/test/inset/main.html b/ionic/components/list/test/inset/main.html index 159b067fca..15006fbbbd 100644 --- a/ionic/components/list/test/inset/main.html +++ b/ionic/components/list/test/inset/main.html @@ -13,13 +13,11 @@ List Link Item 1 - List Link Item 2 - @@ -33,13 +31,11 @@ diff --git a/ionic/config/modes.ts b/ionic/config/modes.ts index 15942f0b95..6411ca3c88 100644 --- a/ionic/config/modes.ts +++ b/ionic/config/modes.ts @@ -13,7 +13,6 @@ IonicConfig.modeConfig('ios', { backButtonText: 'Back', backButtonIcon: 'ion-ios-arrow-back', - forwardIcon: 'ion-ios-arrow-forward', iconMode: 'ios', tabBarPlacement: 'bottom', @@ -33,7 +32,6 @@ IonicConfig.modeConfig('md', { backButtonText: '', backButtonIcon: 'ion-md-arrow-back', - forwardIcon: '', iconMode: 'md', tabBarPlacement: 'top', diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss index e12ea9884f..bd4b3c0365 100644 --- a/ionic/ionic.ios.scss +++ b/ionic/ionic.ios.scss @@ -3,6 +3,7 @@ // iOS Components @import + "components/icon/modes/ios", "components/item/modes/ios", "components/toolbar/modes/ios", "components/action-sheet/modes/ios", diff --git a/ionic/util/mixins.scss b/ionic/util/mixins.scss index e69a6660d4..8c2aba2019 100644 --- a/ionic/util/mixins.scss +++ b/ionic/util/mixins.scss @@ -105,8 +105,7 @@ // -------------------------------------------------- @function url-encode($val) { - $val: str-replace($val, ' ', '%20'); - @return $val; + @return str-replace($val, ' ', '%20'); }