feat(windows): windows UI cleanup

references #5565

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);

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;

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;

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;
-}

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;

ionic/components/card/test/advanced/main.html

@@ -19,17 +19,17 @@
       </p>
     </ion-card-content>
 
-    <ion-row no-padding>
-      <ion-col>
+    <ion-row>
+      <ion-col no-padding>
         <button clear small>
           <ion-icon name="star"></ion-icon>
           Star
         </button>
       </ion-col>
-      <ion-col text-right>
+      <ion-col no-padding text-right>
         <button clear small class="activated">
           <ion-icon name="share"></ion-icon>
-          Share.activated
+          Activated
         </button>
       </ion-col>
     </ion-row>
@@ -55,21 +55,23 @@ <h2>Card With An Inset Picture</h2>
       <p>Hello. I am a paragraph.</p>
     </ion-card-content>
 
-    <ion-row no-padding>
-      <ion-col>
+    <ion-row>
+      <ion-col no-padding>
         <button clear small>
           <ion-icon name="star"></ion-icon>
           Favorite
         </button>
+      </ion-col>
+      <ion-col no-padding text-center>
         <button clear small>
           <ion-icon name="musical-notes"></ion-icon>
           Listen
         </button>
       </ion-col>
-      <ion-col text-right>
+      <ion-col no-padding text-right>
         <button clear small danger class="activated">
           <ion-icon name="share"></ion-icon>
-          Share.activated
+          Activated
         </button>
       </ion-col>
     </ion-row>
@@ -85,21 +87,21 @@ <h2>Card With An Inset Picture</h2>
       This card was breaking the border radius.
     </ion-card-content>
 
-    <ion-row text-center no-padding>
-      <ion-col>
+    <ion-row>
+      <ion-col no-padding>
         <button clear small dark>
           <ion-icon name="star"></ion-icon>
           Favorite
         </button>
       </ion-col>
 
-      <ion-col>
+      <ion-col no-padding text-center>
         <button clear small dark>
           <ion-icon name="musical-notes"></ion-icon>
           Listen
         </button>
       </ion-col>
-      <ion-col>
+      <ion-col no-padding text-right>
         <button clear small dark>
           <ion-icon name="share-alt"></ion-icon>
           Share

ionic/components/card/test/basic/main.html

@@ -1,7 +1,7 @@
 
 <ion-toolbar><ion-title>Basic Cards</ion-title></ion-toolbar>
 
-<ion-content class="outer-content" style="background:#eee">
+<ion-content style="background: #e5e5e5">
 
   <ion-card>
 

ionic/components/checkbox/checkbox.wp.scss

@@ -8,7 +8,7 @@ $checkbox-wp-border-bottom-style:        solid !default;
 $checkbox-wp-border-bottom-color:        $list-wp-border-color !default;
 $checkbox-wp-padding:                    $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0 !default;
 $checkbox-wp-margin:                     0 !default;
-$checkbox-wp-media-margin:               $item-wp-padding-media-top 36px $item-wp-padding-media-bottom 4px !default;
+$checkbox-wp-media-margin:               $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px !default;
 $checkbox-wp-disabled-opacity:           0.3 !default;
 
 $checkbox-wp-icon-background-color-off:  $list-wp-background-color !default;

ionic/components/item/item.wp.scss

@@ -14,7 +14,6 @@ $item-wp-font-size:                  1.6rem !default;
 $item-wp-avatar-size:                4rem !default;
 $item-wp-thumbnail-size:             8rem !default;
 $item-wp-note-color:                 $input-wp-border-color !default;
-$item-wp-detail-push-color:          $input-wp-border-color !default;
 
 $item-wp-divider-bg:                 #fff !default;
 $item-wp-divider-color:              #222 !default;
@@ -34,7 +33,6 @@ $item-wp-sliding-content-bg:         $list-wp-background-color !default;
   color: $item-wp-body-text-color;
   background-color: $item-wp-body-background-color;
   box-shadow: none;
-  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
 
   h1 {
     margin: 0 0 2px;
@@ -79,16 +77,6 @@ $item-wp-sliding-content-bg:         $list-wp-background-color !default;
   border-bottom: 1px solid $list-wp-border-color;
 }
 
-button.item:not([detail-none]) .item-inner,
-a.item:not([detail-none]) .item-inner,
-.item[detail-push] .item-inner {
-  @include wp-detail-push-icon($item-wp-detail-push-color);
-  background-repeat: no-repeat;
-  background-position: right ($item-wp-padding-right - 2) center;
-  background-size: 14px 14px;
-  padding-right: 32px;
-}
-
 
 // Windows Item Media
 // --------------------------------------------------

ionic/components/label/label.wp.scss

@@ -34,7 +34,6 @@ ion-label[stacked] {
 ion-label[floating] {
   transform-origin: left top;
   transform: translate3d(8px, 34px, 0);
-  transition: transform 150ms ease-in-out;
 }
 
 ion-label[stacked],

ionic/components/radio/radio.wp.scss

@@ -6,6 +6,9 @@
 $radio-wp-color-on:               map-get($colors-wp, primary) !default;
 $radio-wp-color-off:              #333333 !default;
 
+// Places radio icon on the left of the item
+$radio-wp-order:                  -1 !default;
+
 $radio-wp-icon-width:             16px !default;
 $radio-wp-icon-height:            16px !default;
 $radio-wp-icon-border-width:      2px !default;
@@ -87,7 +90,8 @@ ion-radio {
 .item ion-radio {
   position: static;
   display: block;
-  margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0;
+  margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 0;
+  order: $radio-wp-order;
 }
 
 .item-radio ion-label {

ionic/components/toolbar/toolbar.wp.scss

@@ -18,6 +18,7 @@ $toolbar-order-wp: (
 
 $toolbar-wp-padding:                     4px !default;
 $toolbar-wp-height:                      4.6rem !default;
+$toolbar-wp-title-padding:               0 6px !default;
 $toolbar-wp-title-font-size:             1.5rem !default;
 $toolbar-wp-title-font-weight:           bold !default;
 $toolbar-wp-title-text-transform:        uppercase !default;
@@ -58,7 +59,7 @@ ion-navbar-section {
 
 .toolbar-title {
   color: $toolbar-wp-text-color;
-  padding: 0 12px;
+  padding: $toolbar-wp-title-padding;
   font-size: $toolbar-wp-title-font-size;
   font-weight: $toolbar-wp-title-font-weight;
   text-transform: $toolbar-wp-title-text-transform;

ionic/config/modes.ts

@@ -63,8 +63,8 @@ Config.setModeConfig('md', {
 Config.setModeConfig('wp', {
   activator: 'highlight',
 
-  actionSheetEnter: 'action-sheet-md-slide-in',
-  actionSheetLeave: 'action-sheet-md-slide-out',
+  actionSheetEnter: 'action-sheet-wp-slide-in',
+  actionSheetLeave: 'action-sheet-wp-slide-out',
 
   alertEnter: 'alert-md-pop-in',
   alertLeave: 'alert-md-pop-out',

ionic/themes/dark.wp.scss

@@ -72,17 +72,6 @@ $toggle-wp-handle-background-color-off: map-get($colors-wp, light) !default;
 $input-wp-border-color:                 map-get($colors-wp, light) !default;
 
 
-// Windows Icon
-// --------------------------------------------------
-
-$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
-
-@mixin wp-detail-push-icon($fg-color) {
-  $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
-  @include svg-background-image($svg);
-}
-
-
 // Windows Body
 // --------------------------------------------------
 

ionic/themes/default.wp.scss

@@ -55,17 +55,6 @@ $item-wp-padding-icon-bottom:         10px !default;
 $input-wp-border-color:               #818181 !default;
 
 
-// Windows Icon
-// --------------------------------------------------
-
-$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
-
-@mixin wp-detail-push-icon($fg-color) {
-  $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
-  @include svg-background-image($svg);
-}
-
-
 // Windows Body
 // --------------------------------------------------