fix(tabs): add sass variable for inactive opacity and pass it to the colors loop

Author: brandyscarney

src/components/tabs/tabs.md.scss

@@ -12,7 +12,8 @@ $tabbar-md-item-icon-size:           2.4rem !default;
 $tabbar-md-item-height:              4.8rem !default;
 
 $tab-button-md-active-color:         $toolbar-md-active-color !default;
-$tab-button-md-inactive-color:       rgba($toolbar-md-inactive-color, .7) !default;
+$tab-button-md-inactive-opacity:     .7 !default;
+$tab-button-md-inactive-color:       rgba($toolbar-md-inactive-color, $tab-button-md-inactive-opacity) !default;
 
 
 ion-tabbar {
@@ -103,7 +104,7 @@ tab-highlight {
     background-color: $color-base;
 
     .tab-button {
-      color: $color-contrast;
+      color: rgba($color-contrast, $tab-button-md-inactive-opacity);
     }
 
     .tab-button:hover:not(.disable-hover),

src/components/tabs/tabs.wp.scss

@@ -12,7 +12,8 @@ $tabbar-wp-item-icon-size:           2.4rem !default;
 $tabbar-wp-item-height:              4.8rem !default;
 
 $tab-button-wp-active-color:         $toolbar-wp-active-color !default;
-$tab-button-wp-inactive-color:       rgba($toolbar-wp-inactive-color, .7) !default;
+$tab-button-wp-inactive-opacity:     .7 !default;
+$tab-button-wp-inactive-color:       rgba($toolbar-wp-inactive-color, $tab-button-wp-inactive-opacity) !default;
 
 $tab-button-wp-background-activated: rgba(0, 0, 0, .1) !default;
 
@@ -96,7 +97,7 @@ ion-tabbar {
     background-color: $color-base;
 
     .tab-button {
-      color: $color-contrast;
+      color: rgba($color-contrast, $tab-button-wp-inactive-opacity);
     }
 
     .tab-button:hover:not(.disable-hover),