refactor(button): add classes for clear buttons in toolbars

fixes #7523
ionic-team · Aug 23, 2016 · 7acdc58 · 7acdc58
1 parent 705606c
commit 7acdc58
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/src/components/button/test/attributes/index.ts b/src/components/button/test/attributes/index.ts
@@ -6,7 +6,7 @@ import { App, ionicBootstrap } from '../../../../../src';
   templateUrl: 'main.html'
 })
 class E2EPage {
-  isFull: boolean = false;
+  isFull: boolean = true;
   isBlock: boolean = true;
   isBarClear: boolean = true;
 

diff --git a/src/components/button/test/attributes/main.html b/src/components/button/test/attributes/main.html
@@ -14,7 +14,7 @@
 
 <ion-content padding style="text-align:center" no-bounce>
   <h5>Button Displays</h5>
-  <button ion-button [full]="isFull" [block]="isBlock" (click)="toggleBlock()">Block (toggle)</button>
+  <button ion-button [block]="isBlock" (click)="toggleBlock()">Block (toggle)</button>
   <button ion-button [full]="isFull">Full</button>
   <button ion-button full block>Both</button>
 
@@ -44,7 +44,7 @@ <h5>Button Colors (Click to Toggle)</h5>
       <button ion-button color="secondary">Default</button>
       <button ion-button solid color="danger">Solid</button>
       <button ion-button outline color="dark">Outline</button>
-      <button ion-button clear color="primary">Clear</button>
+      <button ion-button clear color="secondary">Clear</button>
     </ion-buttons>
   </ion-toolbar>
 

diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss
@@ -118,6 +118,7 @@ ion-title {
     }
 
     .toolbar-title,
+    .bar-button-clear,
     .bar-button-default {
       color: $color-contrast;
     }
@@ -166,7 +167,8 @@ ion-buttons[right] {
 
 @mixin ios-bar-button-default($color-name, $color-base, $color-contrast) {
 
-  .bar-button-#{$color-name} {
+  .bar-button-#{$color-name},
+  .bar-button-clear-#{$color-name} {
     color: $color-base;
     background-color: transparent;
 
@@ -350,6 +352,7 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 @include ios-bar-button-default(default, $toolbar-ios-button-color, color-contrast($colors-ios, $toolbar-ios-button-color, ios));
+@include ios-bar-button-default(clear, $toolbar-ios-button-color, color-contrast($colors-ios, $toolbar-ios-button-color, ios));
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
   @include ios-toolbar-theme($color-name, $color-base, $color-contrast);

diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss
@@ -113,12 +113,14 @@ ion-footer[no-shadow]::before,
       background: $color-base;
     }
 
+    .bar-button-clear,
     .bar-button-default,
     .bar-button-outline,
     .toolbar-title {
       color: $fg-color;
     }
 
+    .bar-button-clear,
     .bar-button-default,
     .bar-button-outline {
       ion-button-effect {
@@ -196,6 +198,7 @@ ion-buttons[right] {
 
 @mixin md-bar-button-default($color-name, $color-base, $color-contrast) {
 
+  .bar-button-clear-#{$color-name},
   .bar-button-#{$color-name} {
     color: $color-base;
     background-color: transparent;
@@ -373,6 +376,7 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 @include md-bar-button-default(default, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, md));
+@include md-bar-button-default(clear, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, md));
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
   @include md-toolbar-theme($color-name, $color-base, $color-contrast);

diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss
@@ -75,19 +75,13 @@ $navbar-wp-height:                       $toolbar-wp-height !default;
       background: $color-base;
     }
 
+    .bar-button-clear,
     .bar-button-default,
     .bar-button-outline,
     .toolbar-title {
       color: $fg-color;
     }
 
-    .bar-button-default,
-    .bar-button-outline {
-      ion-button-effect {
-        background-color: $fg-color;
-      }
-    }
-
     .bar-button-outline {
       border-color: $fg-color;
     }
@@ -158,6 +152,7 @@ ion-buttons[right] {
 
 @mixin wp-bar-button-default($color-name, $color-base, $color-contrast) {
 
+  .bar-button-clear-#{$color-name},
   .bar-button-#{$color-name} {
     color: $color-base;
     background-color: transparent;
@@ -329,6 +324,7 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 @include wp-bar-button-default(default, $toolbar-wp-button-color, color-contrast($colors-wp, $toolbar-wp-button-color, wp));
+@include wp-bar-button-default(clear, $toolbar-wp-button-color, color-contrast($colors-wp, $toolbar-wp-button-color, wp));
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
   @include wp-toolbar-theme($color-name, $color-base, $color-contrast);