feat(windows): UI fixes

references #5565

Author: brandyscarney

ionic/components/alert/alert.wp.scss

@@ -48,6 +48,7 @@ $alert-wp-button-font-weight:                  300 !default;
 
 $alert-wp-checkbox-background:                 map-get($colors-wp, primary) !default;
 $alert-wp-checkbox-border-color:               $input-wp-border-color !default;
+$alert-wp-checkbox-border-radius:              0 !default;
 $alert-wp-radio-background:                    map-get($colors-wp, primary) !default;
 $alert-wp-radio-border-color:                  $input-wp-border-color !default;
 
@@ -218,7 +219,7 @@ ion-alert {
   left: 13px;
   width: 16px;
   height: 16px;
-  border-radius: 2px;
+  border-radius: $alert-wp-checkbox-border-radius;
   border-width: 2px;
   border-style: solid;
   border-color: $alert-wp-checkbox-border-color;

ionic/components/card/card.wp.scss

@@ -21,9 +21,8 @@ $card-wp-avatar-size:                 4rem !default;
 $card-wp-thumbnail-size:              8rem !default;
 
 $card-wp-background-color:            $list-wp-background-color !default;
-$card-wp-border:                      2px solid rgba(0,0,0,0.2) !default;
-$card-wp-box-shadow:                  none !default;
-$card-wp-border-radius:               4px !default;
+$card-wp-box-shadow:                  0px 1px 1px 1px rgba(0, 0, 0, 0.2) !default;
+$card-wp-border-radius:               1px !default;
 $card-wp-font-size:                   1.4rem !default;
 $card-wp-line-height:                 1.5 !default;
 
@@ -45,7 +44,6 @@ ion-card {
   background: $card-wp-background-color;
   border-radius: $card-wp-border-radius;
   box-shadow: $card-wp-box-shadow;
-  border: $card-wp-border;
 
   ion-list {
     margin-bottom: 0;

ionic/components/searchbar/searchbar.wp.scss

@@ -150,7 +150,7 @@ ion-searchbar {
 
 @each $color-name, $color-value in $colors-wp {
 
-  ion-searchbar[#{$color-name}] .searchbar-focused {
+  ion-searchbar[#{$color-name}].searchbar-focused {
     border-color: $color-value;
   }
 

ionic/components/searchbar/test/toolbar/main.html

@@ -10,12 +10,12 @@ <h5 padding-left padding-top> Search - Default Toolbar </h5>
 
   <h5 padding-left padding-top> Search - Primary Toolbar </h5>
   <ion-toolbar primary>
-    <ion-searchbar [(ngModel)]="primaryToolbarSearch" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar dark [(ngModel)]="primaryToolbarSearch" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Danger Toolbar </h5>
   <ion-toolbar danger>
-    <ion-searchbar [(ngModel)]="dangerToolbarSearch" class="e2eDangerToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar dark [(ngModel)]="dangerToolbarSearch" class="e2eDangerToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Light Toolbar </h5>

ionic/components/segment/segment.wp.scss

@@ -16,7 +16,7 @@ $segment-button-wp-icon-size:                  2.6rem !default;
 $segment-button-wp-icon-line-height:           $segment-button-wp-line-height !default;
 $segment-button-wp-background-color:           transparent !default;
 
-$segment-button-wp-opacity:                    0.7 !default;
+$segment-button-wp-opacity:                    0.5 !default;
 $segment-button-wp-opacity-activated:          1.0 !default;
 
 $segment-button-wp-buttons-justify-content:    flex-start !default;

ionic/components/tabs/tabs.wp.scss

@@ -35,6 +35,11 @@ tabbar {
   &[aria-selected=true] {
     opacity: 1.0;
     color: $tab-button-wp-active-color;
+    border-bottom: 2px solid $tab-button-wp-active-color;
+  }
+
+  &.activated {
+    background: rgba(0,0,0,0.1);
   }
 }
 
@@ -45,7 +50,7 @@ tabbar {
 
 .tab-button-icon {
   font-size: $tabbar-wp-item-icon-size;
-  min-width: $tabbar-wp-item-icon-size + 5;
+  min-width: $tabbar-wp-item-icon-size;
 }
 
 [tabbarIcons=bottom] .tab-button {
@@ -83,6 +88,7 @@ tabbar {
     .tab-button:hover:not(.disable-hover),
     .tab-button[aria-selected=true] {
       color: color-inverse($color-value);
+      border-color: color-inverse($color-value);
     }
   }
 

ionic/components/tabs/test/basic/index.ts

@@ -174,7 +174,7 @@ class Tab3 {
       </ion-content>
     </ion-menu>
 
-    <ion-tabs #content primary>
+    <ion-tabs #content>
       <ion-tab tabTitle="Plain List" tabIcon="star" [root]="root1"></ion-tab>
       <ion-tab tabTitle="Schedule" tabIcon="globe" [root]="root2"></ion-tab>
       <ion-tab tabTitle="Stopwatch" tabIcon="stopwatch" [root]="root3"></ion-tab>

ionic/components/toolbar/toolbar.wp.scss

@@ -55,6 +55,7 @@ ion-navbar-section {
   flex: 1;
   order: map-get($toolbar-order-wp, content);
   max-width: 100%;
+  min-width: 0;
 }
 
 .toolbar-title {