feat(windows): add tabs component and clean up windows UI

references #5565

ionic/components.wp.scss

@@ -24,5 +24,6 @@
   "components/searchbar/searchbar.wp",
   "components/segment/segment.wp",
   "components/select/select.wp",
+  "components/tabs/tabs.wp",
   "components/toggle/toggle.wp",
   "components/toolbar/toolbar.wp";

ionic/components/item/item.scss

@@ -52,7 +52,6 @@ ion-item-divider {
   min-height: 30px;
   width: 100%;
   z-index: 1000;
-  font-weight: 500;
 
   &[sticky] {
     position: -webkit-sticky;

ionic/components/item/item.wp.scss

@@ -6,6 +6,8 @@
 
 $item-wp-body-text-font-size:        1.4rem !default;
 $item-wp-body-text-line-height:      1.5 !default;
+$item-wp-body-background-color:      $list-wp-background-color !default;
+$item-wp-body-text-color:            $list-wp-text-color !default;
 $item-wp-paragraph-text-color:       #666 !default;
 
 $item-wp-font-size:                  1.6rem !default;
@@ -28,8 +30,8 @@ $item-wp-sliding-content-bg:         $list-wp-background-color !default;
   text-transform: none;
   font-weight: normal;
 
-  color: $list-wp-text-color;
+  color: $item-wp-body-text-color;
-  background-color: $list-wp-background-color;
+  background-color: $item-wp-body-background-color;
   box-shadow: none;
   transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
 
@@ -110,7 +112,7 @@ ion-icon[item-right] {
 
 ion-icon[item-left] + .item-inner,
 ion-icon[item-left] + .item-input {
-  margin-left: $item-wp-padding-left + ($item-wp-padding-left / 2);
+  margin-left: ($item-wp-padding-left / 2);
 }
 
 ion-avatar[item-left],

ionic/components/list/list.wp.scss

@@ -17,7 +17,7 @@ $list-inset-wp-border-radius:    2px !default;
 
 $list-wp-header-padding:         16px $item-wp-padding-right 16px $item-wp-padding-left !default;
 $list-wp-header-font-size:       2.0rem !default;
-$list-wp-header-color:           #515151 !default;
+$list-wp-header-color:           $list-wp-text-color !default;
 
 
 /****************/

ionic/components/tabs/tabs.wp.scss

@@ -0,0 +1,98 @@
+@import "../../globals.wp";
+@import "./tabs";
+
+// Windows Tabs
+// --------------------------------------------------
+
+$tabbar-wp-background:               $toolbar-wp-background !default;
+$tabbar-wp-item-padding:             12px 10px 5px 10px !default;
+$tabbar-wp-item-font-size:           1.4rem !default;
+$tabbar-wp-item-font-weight:         500 !default;
+$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:       $toolbar-wp-inactive-color !default;
+
+
+tabbar {
+  background: $tabbar-wp-background;
+}
+
+
+.tab-button {
+  padding: $tabbar-wp-item-padding;
+  min-height: $tabbar-wp-item-height;
+  font-size: $tabbar-wp-item-font-size;
+  font-weight: $tabbar-wp-item-font-weight;
+  opacity: 0.7;
+
+  box-shadow: none;
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+  color: $tab-button-wp-inactive-color;
+
+  &[aria-selected=true] {
+    opacity: 1.0;
+    color: $tab-button-wp-active-color;
+  }
+}
+
+.tab-button-text {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+}
+
+.tab-button-icon {
+  font-size: $tabbar-wp-item-icon-size;
+  min-width: $tabbar-wp-item-icon-size + 5;
+}
+
+[tabbarIcons=bottom] .tab-button {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+[tabbarIcons=right] .tab-button,
+[tabbarIcons=left] .tab-button {
+  padding-bottom: 10px;
+
+  ion-icon {
+    min-width: 24px;
+  }
+}
+
+.tab-button.icon-only,
+.tab-button.has-title-only {
+  padding: 6px 10px 6px 10px;
+}
+
+
+// Windows Tabbar Color Mixin
+// --------------------------------------------------
+
+@mixin tabbar-wp($color-name, $color-value) {
+
+  ion-tabs[#{$color-name}] tabbar {
+    background-color: $color-value;
+
+    .tab-button {
+      color: color-inverse($color-value);
+    }
+
+    .tab-button:hover:not(.disable-hover),
+    .tab-button[aria-selected=true] {
+      color: color-inverse($color-value);
+    }
+  }
+
+}
+
+
+// Windows Tabbar Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-wp {
+  @include tabbar-wp($color-name, $color-value);
+}

ionic/config/modes.ts

@@ -70,9 +70,9 @@ Config.setModeConfig('wp', {
   alertLeave: 'alert-md-pop-out',
 
   backButtonText: '',
-  backButtonIcon: 'md-arrow-back',
+  backButtonIcon: 'ios-arrow-back',
 
-  iconMode: 'md',
+  iconMode: 'ios',
 
   menuType: 'overlay',
 
@@ -82,7 +82,6 @@ Config.setModeConfig('wp', {
   pageTransition: 'md-transition',
   pageTransitionDelay: 96,
 
-  tabbarHighlight: true,
   tabbarPlacement: 'top',
 
   tabSubPages: true,