diff --git a/ionic/components/app/test/material/index.ts b/ionic/components/app/test/material/index.ts index e376e159fd..b0265612d7 100644 --- a/ionic/components/app/test/material/index.ts +++ b/ionic/components/app/test/material/index.ts @@ -28,6 +28,22 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic'; Blues + +
+
+
+ New Post +
+
+ 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. +
+ +
+ Posted 5 days ago +
+
+
+ ` + '' }) diff --git a/ionic/components/card/extensions/material.scss b/ionic/components/card/extensions/material.scss new file mode 100644 index 0000000000..8744f46177 --- /dev/null +++ b/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 + } + +} diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index ea5354c25a..b1d2203fd0 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -29,8 +29,7 @@ import {Icon} from '../icon/icon'; @IonicView({ template: '
' + - '' + - '' + + '
' + '
' + '
' + '' + diff --git a/ionic/components/checkbox/extensions/material.scss b/ionic/components/checkbox/extensions/material.scss new file mode 100644 index 0000000000..1e71163e9d --- /dev/null +++ b/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; + } + +} diff --git a/ionic/components/material/variables.scss b/ionic/components/material/variables.scss new file mode 100644 index 0000000000..a0f5dc29d8 --- /dev/null +++ b/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; diff --git a/ionic/components/nav-bar/extensions/material.scss b/ionic/components/nav-bar/extensions/material.scss index e5301c9e42..12fe098bb1 100644 --- a/ionic/components/nav-bar/extensions/material.scss +++ b/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; diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts index 1e5c473a6e..9ded0e9be5 100644 --- a/ionic/components/segment/segment.ts +++ b/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); diff --git a/ionic/components/toolbar/extensions/material.scss b/ionic/components/toolbar/extensions/material.scss index 36874a7d2a..0959358238 100644 --- a/ionic/components/toolbar/extensions/material.scss +++ b/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; diff --git a/ionic/ionic.scss b/ionic/ionic.scss index 4e446aa51c..b2640ae91e 100755 --- a/ionic/ionic.scss +++ b/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",