diff --git a/ionic/components.wp.scss b/ionic/components.wp.scss index b48f65ee41..1dfd391ef2 100644 --- a/ionic/components.wp.scss +++ b/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"; diff --git a/ionic/components/alert/alert.wp.scss b/ionic/components/alert/alert.wp.scss index 9cf555a30d..c6aa03aff5 100644 --- a/ionic/components/alert/alert.wp.scss +++ b/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) { diff --git a/ionic/components/badge/badge.wp.scss b/ionic/components/badge/badge.wp.scss new file mode 100644 index 0000000000..ccd0ea18a6 --- /dev/null +++ b/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); + } + +} diff --git a/ionic/components/button/button.wp.scss b/ionic/components/button/button.wp.scss index a6d7c337c6..6208310c41 100644 --- a/ionic/components/button/button.wp.scss +++ b/ionic/components/button/button.wp.scss @@ -231,7 +231,7 @@ $button-wp-small-icon-font-size: 1.4em !default; border-color: transparent; &:hover:not(.disable-hover) { - border-color: transparent; + border-color: transparent; } } @@ -239,6 +239,10 @@ $button-wp-small-icon-font-size: 1.4em !default; padding: 0; } +ion-button-effect { + // wp does not use the button effect + display: none; +} // Generate Windows Button Colors // --------------------------------------------------