fix(note): separate note from item so its styles will alway be applied

this was discussed with Ben previously, fixes #9173

src/components/card/card.ios.scss

@@ -122,8 +122,7 @@ $card-ios-header-color:                #333 !default;
   padding-top: 0;
 }
 
-.card-ios ion-note[item-left],
+.card .note-ios {
-.card-ios ion-note[item-right] {
   font-size: 1.3rem;
 }
 

src/components/card/card.md.scss

@@ -126,8 +126,7 @@ $card-md-header-color:                #222 !default;
   padding-top: 0;
 }
 
-.card-md ion-note[item-left],
+.card .note-md {
-.card-md ion-note[item-right] {
   font-size: 1.3rem;
 }
 

src/components/card/card.wp.scss

@@ -128,8 +128,7 @@ $card-wp-header-color:                #222 !default;
   padding-top: 0;
 }
 
-.card-wp ion-note[item-left],
+.card .note-wp {
-.card-wp ion-note[item-right] {
   font-size: 1.3rem;
 }
 

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

@@ -77,11 +77,10 @@
             Listen
           </button>
         </ion-col>
-        <ion-col no-padding text-right>
+        <ion-col no-padding center padding-right text-right>
-          <button ion-button icon-left clear small color="danger" class="activated">
+          <ion-note>
-            <ion-icon name="share"></ion-icon>
+            11h ago
-            Activated
+          </ion-note>
-          </button>
         </ion-col>
       </ion-row>
     </ion-grid>

src/components/item/item.ios.scss

@@ -21,9 +21,6 @@ $item-ios-avatar-size:                    3.6rem !default;
 /// @prop - Size of the thumbnail in the item
 $item-ios-thumbnail-size:                 5.6rem !default;
 
-/// @prop - Color of the note in the item
-$item-ios-note-color:                     darken($list-ios-border-color, 10%) !default;
-
 /// @prop - Shows the detail arrow icon on an item
 $item-ios-detail-push-show:               true !default;
 
@@ -181,10 +178,6 @@ $item-ios-sliding-content-background:     $list-ios-background-color !default;
   max-height: $item-ios-thumbnail-size;
 }
 
-.item-ios ion-note {
-  color: $item-ios-note-color;
-}
-
 
 // iOS Item Detail Push
 // --------------------------------------------------

src/components/item/item.md.scss

@@ -21,9 +21,6 @@ $item-md-avatar-size:                4rem !default;
 /// @prop - Size of the thumbnail in the item
 $item-md-thumbnail-size:             8rem !default;
 
-/// @prop - Color of the note in the item
-$item-md-note-color:                 darken($list-md-border-color, 10%) !default;
-
 /// @prop - Shows the detail arrow icon on an item
 $item-md-detail-push-show:           false !default;
 
@@ -203,10 +200,6 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   max-height: $item-md-thumbnail-size;
 }
 
-.item-md ion-note {
-  color: $item-md-note-color;
-}
-
 
 // Material Design Item Group
 // --------------------------------------------------

src/components/item/item.wp.scss

@@ -27,9 +27,6 @@ $item-wp-avatar-size:                4rem !default;
 /// @prop - Size of the thumbnail in the item
 $item-wp-thumbnail-size:             8rem !default;
 
-/// @prop - Color of the note in the item
-$item-wp-note-color:                 $input-wp-border-color !default;
-
 /// @prop - Shows the detail arrow icon on an item
 $item-wp-detail-push-show:           false !default;
 
@@ -213,10 +210,6 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
   max-height: $item-wp-thumbnail-size;
 }
 
-.item-wp ion-note {
-  color: $item-wp-note-color;
-}
-
 
 // Windows Item Divider
 // --------------------------------------------------

src/components/list/test/headers/main.html

@@ -42,7 +42,7 @@
     <ion-item>
       <ion-icon name="home" item-left></ion-icon>
       Home
-      <ion-note item-right>
+      <ion-note item-right color="danger">
         Where the heart is
       </ion-note>
     </ion-item>

src/components/note/note.ios.scss

@@ -0,0 +1,24 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Note
+// --------------------------------------------------
+
+/// @prop - Text color of the note
+$note-ios-color:      darken($list-ios-border-color, 10%) !default;
+
+
+.note-ios {
+  color: $note-ios-color;
+}
+
+
+// Generate iOS Note Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .note-ios-#{$color-name} {
+    color: $color-base;
+  }
+
+}

src/components/note/note.md.scss

@@ -0,0 +1,24 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Note
+// --------------------------------------------------
+
+/// @prop - Text color of the note
+$note-md-color:      darken($list-md-border-color, 10%) !default;
+
+
+.note-md {
+  color: $note-md-color;
+}
+
+
+// Generate Material Design Note Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .note-md-#{$color-name} {
+    color: $color-base;
+  }
+
+}

src/components/note/note.ts

@@ -1,5 +1,7 @@
-import { Directive } from '@angular/core';
+import { Directive, ElementRef, Input, Renderer } from '@angular/core';
 
+import { Config } from '../../config/config';
+import { Ion } from '../ion';
 
 /**
   * @private
@@ -7,4 +9,26 @@ import { Directive } from '@angular/core';
 @Directive({
   selector: 'ion-note'
 })
-export class Note {}
+export class Note extends Ion {
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  set color(val: string) {
+    this._setColor(val);
+  }
+
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode(val);
+  }
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer, 'note');
+  }
+
+}

src/components/note/note.wp.scss

@@ -0,0 +1,24 @@
+@import "../../themes/ionic.globals.wp";
+
+// Windows Note
+// --------------------------------------------------
+
+/// @prop - Text color of the note
+$note-wp-color:      $input-wp-border-color !default;
+
+
+.note-wp {
+  color: $note-wp-color;
+}
+
+
+// Generate Windows Note Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .note-wp-#{$color-name} {
+    color: $color-base;
+  }
+
+}

src/themes/ionic.components.scss

@@ -131,6 +131,11 @@
 "../components/modal/modal.md",
 "../components/modal/modal.wp";
 
+@import
+"../components/note/note.ios",
+"../components/note/note.md",
+"../components/note/note.wp";
+
 @import
 "../components/picker/picker",
 "../components/picker/picker.ios",