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. - - + + - + - +