feat(windows): initial add for windows badges

also hide ion-button-effect and change alert buttons to full width

references #5565

Author: brandyscarney

ionic/components.wp.scss

@@ -8,5 +8,6 @@
   "components/app/app.wp",
   "components/action-sheet/action-sheet.wp",
   "components/alert/alert.wp",
+  "components/badge/badge.wp",
   "components/button/button.wp",
   "components/toolbar/toolbar.wp";

ionic/components/alert/alert.wp.scss

@@ -226,7 +226,7 @@ $alert-wp-buttons-justify-content:        flex-end !default;
   flex-wrap: wrap-reverse;
 
   &.vertical .alert-button {
-    margin-left: 50.5%;
+    width: 100%;
     margin-top: 5px;
 
     &:first-child:not(:only-child) {

ionic/components/badge/badge.wp.scss

@@ -0,0 +1,27 @@
+@import "./badge";
+
+// Windows Badge
+// --------------------------------------------------
+
+$badge-wp-border-radius:            0 !default;
+$badge-wp-background-color:         map-get($colors-wp, primary) !default;
+
+
+ion-badge {
+  border-radius: $badge-wp-border-radius;
+  background-color: $badge-wp-background-color;
+  color: color-inverse($badge-wp-background-color);
+}
+
+
+// Generate Windows Badge Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-wp {
+
+  .badge-#{$color-name} {
+    background-color: $color-value;
+    color: color-inverse($color-value);
+  }
+
+}

ionic/components/button/button.wp.scss

@@ -231,14 +231,18 @@ $button-wp-small-icon-font-size:           1.4em !default;
   border-color: transparent;
 
   &:hover:not(.disable-hover) {
-    border-color: transparent; 
+    border-color: transparent;
   }
 }
 
 .button-icon-only {
   padding: 0;
 }
 
+ion-button-effect {
+  // wp does not use the button effect
+  display: none;
+}
 
 // Generate Windows Button Colors
 // --------------------------------------------------