diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index f70ac17c63..39f345eb3e 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -37,7 +37,7 @@ export class Button {
) {
this._role = 'button'; // bar-button/item-button
this._size = null; // large/small
- this._style = null; // outline/clear/solid
+ this._style = 'default'; // outline/clear/solid
this._shape = null; // round/fab
this._display = null; // block/full
this._colors = []; // primary/secondary
@@ -136,14 +136,13 @@ export class Button {
if (role) {
this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button
- this._setClass(this._style, assignCssClass); // button-clear
this._setClass(this._style, assignCssClass); // button-clear
this._setClass(this._shape, assignCssClass); // button-round
this._setClass(this._display, assignCssClass); // button-full
this._setClass(this._size, assignCssClass); // button-small
this._setClass(this._icon, assignCssClass); // button-icon-left
- let colorStyle = (this._style && this._style !== 'solid' ? this._style + '-' : '');
+ let colorStyle = (this._style !== 'default' ? this._style + '-' : '');
this._colors.forEach(colorName => {
this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
});
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index c49dd925f8..98df3f9637 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -98,9 +98,12 @@ $button-ios-small-padding: 0.9em !default;
// --------------------------------------------------
.button-outline {
- border: 1px solid $button-ios-color;
- background-color: transparent;
+ border-width: 1px;
+ border-style: solid;
+ border-color: $button-ios-color;
color: $button-ios-color;
+ background-color: transparent;
+ border-radius: 4px;
&.activated {
opacity: 1;
@@ -118,8 +121,8 @@ $button-ios-small-padding: 0.9em !default;
.button-outline-#{$color-name} {
$fg-color: color-shade($color-value, 5%);
border-color: $fg-color;
- background-color: transparent;
color: $fg-color;
+ background-color: transparent;
&.activated {
color: $background-ios-color;
@@ -158,13 +161,13 @@ $button-ios-small-padding: 0.9em !default;
&.activated {
opacity: 0.4;
- background-color: transparent;
}
&:hover:not(.disable-hover) {
color: color-shade($fg-color);
}
}
+
}
diff --git a/ionic/components/button/test/button.spec.ts b/ionic/components/button/test/button.spec.ts
index e2a4e2f7aa..333915c3d6 100644
--- a/ionic/components/button/test/button.spec.ts
+++ b/ionic/components/button/test/button.spec.ts
@@ -82,8 +82,21 @@ export function run() {
b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-solid')).toEqual(true);
- expect(hasClass(b, 'button-primary')).toEqual(true);
- expect(hasClass(b, 'button-secondary')).toEqual(true);
+ expect(hasClass(b, 'button-solid-primary')).toEqual(true);
+ expect(hasClass(b, 'button-solid-secondary')).toEqual(true);
+ });
+
+ it('should auto add the default style', () => {
+ let b = mockButton();
+ b._assignCss(true);
+ expect(hasClass(b, 'button')).toEqual(true);
+ expect(hasClass(b, 'button-default')).toEqual(true);
+
+ b = mockButton(['clear']);
+ b._assignCss(true);
+ expect(hasClass(b, 'button')).toEqual(true);
+ expect(hasClass(b, 'button-default')).toEqual(false);
+ expect(hasClass(b, 'button-clear')).toEqual(true);
});
it('should read button color attributes', () => {
@@ -180,7 +193,7 @@ export function run() {
expect(b._role).toEqual('button');
expect(b._size).toEqual(null);
expect(b._colors.length).toEqual(0);
- expect(b._style).toEqual(null);
+ expect(b._style).toEqual('default');
expect(b._display).toEqual(null);
});
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 6a6f4f2ca8..6bdfcd5687 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -22,6 +22,9 @@ $toolbar-ios-button-font-size: 1.7rem !default;
$toolbar-ios-title-font-size: 1.7rem !default;
$navbar-ios-height: $toolbar-ios-height !default;
+$bar-button-ios-color: $toolbar-ios-active-color !default;
+$bar-button-ios-border-radius: 4px !default;
+
.toolbar {
padding: $toolbar-ios-padding;
@@ -90,7 +93,7 @@ ion-title {
}
-// iOS Toolbar Buttons
+// iOS Toolbar Button Placement
// --------------------------------------------------
ion-buttons {
@@ -113,6 +116,10 @@ ion-buttons[right] {
order: map-get($toolbar-order-ios, buttons-right);
}
+
+// iOS Toolbar Button Default
+// --------------------------------------------------
+
.bar-button {
margin-top: 0;
margin-bottom: 0;
@@ -120,10 +127,101 @@ ion-buttons[right] {
min-height: 32px;
border: 0;
font-size: $toolbar-ios-button-font-size;
- color: $toolbar-ios-active-color;
- background-color: transparent;
+ border-radius: $bar-button-ios-border-radius;
}
+@mixin ios-bar-button-default($color-name, $color-value) {
+
+ .bar-button-#{$color-name} {
+ $fg-color: color-shade($color-value);
+ color: $fg-color;
+ background-color: transparent;
+
+ &:hover:not(.disable-hover) {
+ color: color-shade($fg-color);
+ }
+
+ &.activated {
+ opacity: 0.4;
+ }
+ }
+
+}
+
+
+// iOS Toolbar Button Outline
+// --------------------------------------------------
+
+.bar-button-outline {
+ border-width: 1px;
+ border-style: solid;
+ border-color: $bar-button-ios-color;
+ color: $bar-button-ios-color;
+ background-color: transparent;
+
+ &:hover:not(.disable-hover) {
+ opacity: 0.4;
+ }
+
+ &.activated {
+ color: inverse($bar-button-ios-color);
+ background-color: $bar-button-ios-color;
+ }
+}
+
+@mixin ios-bar-button-outline($color-name, $color-value) {
+
+ .bar-button-outline-#{$color-name} {
+ $fg-color: color-shade($color-value);
+ border-color: $fg-color;
+ color: $fg-color;
+ background-color: transparent;
+
+ &.activated {
+ color: inverse($fg-color);
+ background-color: $fg-color;
+ }
+ }
+
+}
+
+
+// iOS Toolbar Button Solid
+// --------------------------------------------------
+
+.bar-button-solid {
+ color: inverse($bar-button-ios-color);
+ background-color: $bar-button-ios-color;
+
+ &:hover:not(.disable-hover) {
+ opacity: 0.4;
+ color: inverse($bar-button-ios-color);
+ }
+
+ &.activated {
+ opacity: 0.4;
+ color: inverse($bar-button-ios-color);
+ background-color: color-shade($bar-button-ios-color);
+ }
+}
+
+@mixin ios-bar-button-solid($color-name, $color-value) {
+
+ .bar-button-solid-#{$color-name} {
+ color: inverse($color-value);
+ background-color: $color-value;
+
+ &.activated {
+ background-color: color-shade($color-value);
+ }
+ }
+
+}
+
+
+// iOS Toolbar Button Icon
+// --------------------------------------------------
+
.bar-button-icon-left icon {
margin-left: -0.1em;
padding-right: 0.3em;
@@ -153,7 +251,7 @@ ion-buttons[right] {
}
-// iOS Toolbar Back Button
+// iOS Toolbar Back Button
// --------------------------------------------------
.back-button {
@@ -196,6 +294,11 @@ ion-segment-button[button] {
// iOS Toolbar Color Generation
// --------------------------------------------------
+@include ios-bar-button-default(default, $bar-button-ios-color);
+
@each $color-name, $color-value in $colors-ios {
@include ios-toolbar-theme($color-name, $color-value);
+ @include ios-bar-button-default($color-name, $color-value);
+ @include ios-bar-button-outline($color-name, $color-value);
+ @include ios-bar-button-solid($color-name, $color-value);
}
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index b0056aa62a..4c02fed7cd 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -74,7 +74,7 @@ ion-title {
}
-// Material Design Toolbar Buttons
+// Material Design Toolbar Button Placement
// --------------------------------------------------
ion-buttons {
@@ -102,6 +102,12 @@ ion-buttons[right] {
}
+// Material Design Toolbar Buttons
+// --------------------------------------------------
+
+// HI!
+
+
// Material Design Toolbar Back Button
// --------------------------------------------------
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
index 585b0f5f33..c881c22591 100644
--- a/ionic/components/toolbar/test/scenarios/main.html
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -14,7 +14,7 @@
-
@@ -32,7 +32,7 @@
-
@@ -40,46 +40,6 @@
-
-
-
-
-
- Solid
-
-
-
-
-
-
-
-
-
-
-
- Solid Activated
-
-
-
-
-
-