diff --git a/ionic/components/action-sheet/action-sheet.ios.scss b/ionic/components/action-sheet/action-sheet.ios.scss
index 050cec1a56..faf71360bd 100644
--- a/ionic/components/action-sheet/action-sheet.ios.scss
+++ b/ionic/components/action-sheet/action-sheet.ios.scss
@@ -81,7 +81,7 @@ ion-action-sheet {
}
.action-sheet-cancel {
- font-weight: bold;
+ font-weight: 600;
background: $action-sheet-ios-cancel-button-background-color;
}
diff --git a/ionic/components/alert/alert.ios.scss b/ionic/components/alert/alert.ios.scss
index 7e92b72ea2..9b1244bcf5 100644
--- a/ionic/components/alert/alert.ios.scss
+++ b/ionic/components/alert/alert.ios.scss
@@ -222,7 +222,7 @@ ion-alert {
flex: 1 1 auto;
min-width: 50%;
font-size: $alert-ios-button-font-size;
- min-height: $alert-ios-button-min-height;
+ height: $alert-ios-button-min-height;
border-radius: $alert-ios-button-border-radius;
border-top: 1px solid $alert-ios-button-border-color;
border-right: 1px solid $alert-ios-button-border-color;
diff --git a/ionic/components/button/button.ios.scss b/ionic/components/button/button.ios.scss
index b5cad1f3e4..d5c6246c61 100644
--- a/ionic/components/button/button.ios.scss
+++ b/ionic/components/button/button.ios.scss
@@ -30,7 +30,7 @@ $button-ios-small-icon-font-size: 1.3em !default;
margin: $button-ios-margin;
padding: $button-ios-padding;
- min-height: $button-ios-height;
+ height: $button-ios-height;
font-size: $button-ios-font-size;
border-radius: $button-ios-border-radius;
@@ -75,13 +75,13 @@ $button-ios-small-icon-font-size: 1.3em !default;
.button-large {
padding: 0 $button-ios-large-padding;
- min-height: $button-ios-large-height;
+ height: $button-ios-large-height;
font-size: $button-ios-large-font-size;
}
.button-small {
padding: 0 $button-ios-small-padding;
- min-height: $button-ios-small-height;
+ height: $button-ios-small-height;
font-size: $button-ios-small-font-size;
}
@@ -93,9 +93,6 @@ $button-ios-small-icon-font-size: 1.3em !default;
// --------------------------------------------------
.button-block {
- // This fixes an issue with flexbox and button on iOS Safari. See #225
- display: block;
- line-height: $button-ios-height;
margin-left: 0;
margin-right: 0;
}
diff --git a/ionic/components/button/button.md.scss b/ionic/components/button/button.md.scss
index ac5fe0ef34..d49f12a52c 100644
--- a/ionic/components/button/button.md.scss
+++ b/ionic/components/button/button.md.scss
@@ -43,7 +43,7 @@ $button-md-small-icon-font-size: 1.4em !default;
.button {
margin: $button-md-margin;
padding: $button-md-padding;
- min-height: $button-md-height;
+ height: $button-md-height;
border-radius: $button-md-border-radius;
font-weight: 500;
@@ -96,13 +96,13 @@ $button-md-small-icon-font-size: 1.4em !default;
.button-large {
padding: 0 $button-md-large-padding;
- min-height: $button-md-large-height;
+ height: $button-md-large-height;
font-size: $button-md-large-font-size;
}
.button-small {
padding: 0 $button-md-small-padding;
- min-height: $button-md-small-height;
+ height: $button-md-small-height;
font-size: $button-md-small-font-size;
}
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 669265179e..3b26fc0234 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -9,11 +9,7 @@ $button-round-border-radius: 64px !default;
.button {
position: relative;
- display: inline-flex;
- flex-shrink: 0;
- flex-flow: row nowrap;
- align-items: center;
- justify-content: center;
+ display: inline-block;
transition: background-color, opacity 100ms linear;
z-index: 0;
@@ -23,6 +19,7 @@ $button-round-border-radius: 64px !default;
text-align: center;
text-transform: none;
+ font-kerning: none;
vertical-align: top; // the better option for most scenarios
vertical-align: -webkit-baseline-middle; // the best for those that support it
@@ -32,6 +29,16 @@ $button-round-border-radius: 64px !default;
@include appearance(none);
}
+span.button-inner {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-shrink: 0;
+ flex-flow: row nowrap;
+ align-items: center;
+ justify-content: center;
+}
+
a.button {
text-decoration: none;
}
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 794dc90933..1ee615b68e 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Renderer, Attribute, Optional, Input} from 'angular2/core';
+import {Component, ElementRef, Renderer, Attribute, Optional, Input} from 'angular2/core';
import {Config} from '../../config/config';
import {Toolbar} from '../toolbar/toolbar';
@@ -28,8 +28,9 @@ import {Toolbar} from '../toolbar/toolbar';
* @see {@link /docs/v2/components#buttons Button Component Docs}
*/
-@Directive({
- selector: 'button,[button]'
+@Component({
+ selector: 'button:not([ion-item]),[button]',
+ template: ''
})
export class Button {
private _role: string = 'button'; // bar-button/item-button
@@ -78,7 +79,6 @@ export class Button {
}
this._readAttrs(element);
- this._readIcon(element);
}
/**
@@ -89,6 +89,7 @@ export class Button {
if (this.color) {
this._colors = [this.color];
}
+ this._readIcon(this._elementRef.nativeElement);
this._assignCss(true);
}
@@ -124,6 +125,9 @@ export class Button {
private _readIcon(element: HTMLElement) {
// figure out if and where the icon lives in the button
let childNodes = element.childNodes;
+ if (childNodes.length == 1) {
+ childNodes = childNodes[0].childNodes;
+ }
let childNode;
let nodes = [];
for (let i = 0, l = childNodes.length; i < l; i++) {
@@ -218,9 +222,9 @@ export class Button {
}
}
-/**
- * @private
- */
+ /**
+ * @private
+ */
static setRoles(contentButtonChildren, role: string) {
let buttons = contentButtonChildren.toArray();
buttons.forEach(button => {
diff --git a/ionic/components/button/test/full/main.html b/ionic/components/button/test/full/main.html
index 15590211b5..195c7296fb 100644
--- a/ionic/components/button/test/full/main.html
+++ b/ionic/components/button/test/full/main.html
@@ -1,28 +1,37 @@
-