diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
index eff9962746b..7ee9f394ef1 100644
--- a/ionic/components/action-sheet/action-sheet.ts
+++ b/ionic/components/action-sheet/action-sheet.ts
@@ -18,7 +18,7 @@ import {ViewController} from '../nav/view-controller';
* dismissed by the user before they can resume interaction with the app.
* Dangerous (destructive) options are made obvious. There are easy
* ways to cancel out of the action sheet, such as tapping the backdrop or
- * hitting the escape key on desktop.
+ * hitting the escape key on desktop.
*
* An action sheet is created from an array of `buttons`, with each button
* including properties for its `text`, and optionally a `handler` and `role`.
@@ -363,3 +363,36 @@ class ActionSheetMdSlideOut extends Transition {
}
}
Transition.register('action-sheet-md-slide-out', ActionSheetMdSlideOut);
+
+class ActionSheetWpSlideIn extends Transition {
+ constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+ super(opts);
+
+ let ele = enteringView.pageRef().nativeElement;
+ let backdrop = new Animation(ele.querySelector('.backdrop'));
+ let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
+
+ backdrop.fromTo('opacity', 0.01, 0.1);
+ wrapper.fromTo('translateY', '100%', '0%');
+
+ this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper);
+ }
+}
+Transition.register('action-sheet-wp-slide-in', ActionSheetWpSlideIn);
+
+
+class ActionSheetWpSlideOut extends Transition {
+ constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+ super(opts);
+
+ let ele = leavingView.pageRef().nativeElement;
+ let backdrop = new Animation(ele.querySelector('.backdrop'));
+ let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
+
+ backdrop.fromTo('opacity', 0.1, 0);
+ wrapper.fromTo('translateY', '0%', '100%');
+
+ this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper);
+ }
+}
+Transition.register('action-sheet-wp-slide-out', ActionSheetWpSlideOut);
diff --git a/ionic/components/action-sheet/action-sheet.wp.scss b/ionic/components/action-sheet/action-sheet.wp.scss
index 9f69df78b95..b40115ec8c0 100644
--- a/ionic/components/action-sheet/action-sheet.wp.scss
+++ b/ionic/components/action-sheet/action-sheet.wp.scss
@@ -7,6 +7,7 @@
$action-sheet-wp-text-align: left !default;
$action-sheet-wp-background-color: #F2F2F2 !default;
+$action-sheet-wp-box-shadow: 0px -1px 0px rgba(0,0,0,0.2) !default;
$action-sheet-wp-title-padding: 19px 16px 17px !default;
$action-sheet-wp-title-font-size: 2.0rem !default;
@@ -23,6 +24,9 @@ $action-sheet-wp-button-background-active-color: $list-wp-activated-background-
$action-sheet-wp-icon-font-size: 2.4rem !default;
$action-sheet-wp-icon-margin: 0 28px 0 0 !default;
+.action-sheet-wrapper {
+ box-shadow: $action-sheet-wp-box-shadow;
+}
.action-sheet-title {
padding: $action-sheet-wp-title-padding;
diff --git a/ionic/components/alert/alert.wp.scss b/ionic/components/alert/alert.wp.scss
index ab19e6d3620..1fa537099fd 100644
--- a/ionic/components/alert/alert.wp.scss
+++ b/ionic/components/alert/alert.wp.scss
@@ -4,6 +4,7 @@
// Windows Alerts
// --------------------------------------------------
+$alert-wp-backdrop-color: white !default;
$alert-wp-width: 100% !default;
$alert-wp-border-radius: 0 !default;
$alert-wp-border-width: 1px !default;
@@ -45,6 +46,11 @@ $alert-wp-radio-border-color: $input-wp-border-color !default;
$alert-wp-buttons-padding: 10px 20px !default;
$alert-wp-buttons-justify-content: flex-end !default;
+ion-alert {
+ .backdrop {
+ background-color: $alert-wp-backdrop-color;
+ }
+}
.alert-wrapper {
width: $alert-wp-width;
diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss
index 1f8b7c2163a..8d6024b3eb9 100644
--- a/ionic/components/card/card.scss
+++ b/ionic/components/card/card.scss
@@ -24,13 +24,3 @@ ion-card-header {
ion-card-content {
display: block;
}
-
-ion-card > :first-child {
- border-top-left-radius: inherit;
- border-top-right-radius: inherit;
-}
-
-ion-card > :last-child {
- border-bottom-left-radius: inherit;
- border-bottom-right-radius: inherit;
-}
diff --git a/ionic/components/card/card.wp.scss b/ionic/components/card/card.wp.scss
index 74182ee9378..3b17d15ef7e 100644
--- a/ionic/components/card/card.wp.scss
+++ b/ionic/components/card/card.wp.scss
@@ -4,10 +4,10 @@
// Windows Card
// --------------------------------------------------
-$card-wp-margin-top: 10px !default;
-$card-wp-margin-right: 10px !default;
-$card-wp-margin-bottom: 10px !default;
-$card-wp-margin-left: 10px !default;
+$card-wp-margin-top: 8px !default;
+$card-wp-margin-right: 8px !default;
+$card-wp-margin-bottom: 8px !default;
+$card-wp-margin-left: 8px !default;
$card-wp-padding-top: 13px !default;
$card-wp-padding-right: 16px !default;
@@ -21,9 +21,9 @@ $card-wp-avatar-size: 4rem !default;
$card-wp-thumbnail-size: 8rem !default;
$card-wp-background-color: $list-wp-background-color !default;
-$card-wp-border-radius: 0 !default;
-$card-wp-border-width: 2px !default;
-$card-wp-border-color: $input-wp-border-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-font-size: 1.4rem !default;
$card-wp-line-height: 1.5 !default;
@@ -44,7 +44,8 @@ ion-card {
background: $card-wp-background-color;
border-radius: $card-wp-border-radius;
- border: $card-wp-border-width solid $card-wp-border-color;
+ box-shadow: $card-wp-box-shadow;
+ border: $card-wp-border;
ion-list {
margin-bottom: 0;
diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html
index 6cee3f5fa82..57b3d4eba52 100644
--- a/ionic/components/card/test/advanced/main.html
+++ b/ionic/components/card/test/advanced/main.html
@@ -19,17 +19,17 @@
-
-
+
+
-
+
@@ -55,21 +55,23 @@ Card With An Inset Picture
Hello. I am a paragraph.
-
-
+
+
+
+
-
+
@@ -85,21 +87,21 @@ Card With An Inset Picture
This card was breaking the border radius.
-
-
+
+
-
+
-
+