STuff

ionic/components/app/test/material/index.ts

@@ -28,6 +28,22 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
         Blues
       </ion-item>
     </ion-list>
+
+    <div class="padding">
+      <div class="card">
+        <div class="card-header">
+          New Post
+        </div>
+        <div class="card-content">
+          Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
+        </div>
+        <img src="http://ionic-io-assets.s3.amazonaws.com/images/p4.png">
+        <div class="card-footer">
+          Posted 5 days ago
+        </div>
+      </div>
+    </div>
+
     ` +
   '</ion-content>'
 })

ionic/components/card/extensions/material.scss

@@ -0,0 +1,40 @@
+
+// iOS Card
+// --------------------------------------------------
+
+$card-md-background-color:          #fff !default;
+$card-md-box-shadow:                $md-whiteframe-shadow-z1;
+$card-md-border-radius:             2px !default;
+$card-md-font-size:                 1.4rem !default;
+$card-md-item-content-padding:      15px !default;
+
+
+.mode-md .card {
+  background: $card-md-background-color;
+  box-shadow: $card-md-box-shadow;
+  border-radius: $card-md-border-radius;
+  font-size: $card-md-font-size;
+
+  .item,
+  .item-content {
+    padding: 0;
+    background: transparent;
+  }
+
+  .item:last-of-type .item-content:after {
+    background: transparent;
+  }
+
+  .card-header {
+    font-size: 1.7rem;
+  }
+
+  .card-footer {
+    color: #6d6d72;
+  }
+
+  .item-content {
+    padding: $card-md-item-content-padding
+  }
+
+}

ionic/components/checkbox/checkbox.ts

@@ -29,8 +29,7 @@ import {Icon} from '../icon/icon';
 @IonicView({
   template:
   '<div class="item-media media-checkbox">' +
-    '<icon [name]="iconOff" class="checkbox-off"></icon>' +
+    '<div class="media-checkbox-outline"></div>' +
-    '<icon [name]="iconOn" class="checkbox-on"></icon>' +
   '</div>' +
   '<div class="item-content">' +
     '<content></content>' +

ionic/components/checkbox/extensions/material.scss

@@ -0,0 +1,38 @@
+
+// iOS Checkbox
+// --------------------------------------------------
+
+$checkbox-md-color:          #007aff;
+
+
+.checkbox[mode="md"] {
+  position: relative;
+  z-index: 1;
+  vertical-align: middle;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+
+  .media-checkbox-outline {
+    min-width: 20px;
+    color: $checkbox-md-color;
+
+    position: absolute;
+    top: 3px;
+    left: 0;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    cursor: pointer;
+    overflow: hidden;
+    border: 2px solid rgba(0,0,0,.54);
+    border-radius: 2px;
+    z-index: 2;
+  }
+
+}

ionic/components/material/variables.scss

@@ -0,0 +1,6 @@
+$shadow-multiplier: 0.7;
+$shadow-key-umbra-opacity:      $shadow-multiplier * 0.2;
+$shadow-key-penumbra-opacity:   $shadow-multiplier * 0.14;
+$shadow-ambient-shadow-opacity: $shadow-multiplier * 0.12;
+
+$md-whiteframe-shadow-z1: 0px 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 5px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;

ionic/components/nav-bar/extensions/material.scss

@@ -10,7 +10,7 @@ $navbar-order-material: (
 );
 
 $navbar-material-height:                  6.4rem !default;
-$navbar-material-background:              #f7f7f8; //get-color(primary, base) !default;//#f7f7f8 !default;
+$navbar-material-background:              get-color(primary, base) !default;//#f7f7f8 !default;
 
 $navbar-material-title-font-size:         2rem !default;
 $navbar-material-button-font-size:        24px !default;

ionic/components/segment/segment.ts

@@ -143,7 +143,8 @@ export class SegmentControlValueAccessor {
     // both this.value and setProperty are required at the moment
     // remove when a proper imperative API is provided
     this.value = !value ? '' : value;
-    this.renderer.setElementProperty(this.elementRef.parentView.render, this.elementRef.boundElementIndex, 'value', this.value);
+
+    this.renderer.setElementProperty(this.elementRef, 'value', this.value);
 
     this.segment.value = this.value;
     this.segment.selectFromValue(value);

ionic/components/toolbar/extensions/material.scss

@@ -1,5 +1,5 @@
 $toolbar-material-height:                  6.4rem !default;
-$toolbar-material-background:              #f7f7f8; //get-color(primary, base) !default;//#f7f7f8 !default;
+$toolbar-material-background:              get-color(primary, base) !default;//#f7f7f8 !default;
 
 $toolbar-material-title-font-size:         2rem !default;
 $toolbar-material-button-font-size:        2rem !default;

ionic/ionic.scss

@@ -73,12 +73,15 @@
 
 // Material Design Components
 @import
+  "components/material/variables",
   "components/material/ripple",
 
   "components/app/extensions/material",
   "components/action-menu/extensions/material",
   "components/alert/extensions/material",
   "components/button/extensions/material",
+  "components/card/extensions/material",
+  "components/checkbox/extensions/material",
   "components/item/extensions/material",
   "components/list/extensions/material",
   "components/nav-bar/extensions/material",