From 5304ec8d79aeb30150a91a63601ef50e048ef4b7 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 15 Dec 2015 11:08:52 -0500
Subject: [PATCH] feat(item-divider): added colors for item dividers and
 modified test case

closes #713
---
 ionic/components/item/item.scss               |   7 ++
 ionic/components/item/test/dividers/main.html | 105 ++++++++++--------
 2 files changed, 68 insertions(+), 44 deletions(-)

diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index 4a77ca8f68..9e97a098f4 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -88,5 +88,12 @@ ion-item-content + ion-item-content[cnt] {
   display: none;
 }
 
+@each $color-name, $color-value in $colors {
+  ion-item-divider[#{$color-name}] {
+    background-color: $color-value;
+    color: inverse($color-value);
+  }
+}
+
 @import "item-media";
 @import "item-sliding";
diff --git a/ionic/components/item/test/dividers/main.html b/ionic/components/item/test/dividers/main.html
index 597d066165..487ccfc9fa 100644
--- a/ionic/components/item/test/dividers/main.html
+++ b/ionic/components/item/test/dividers/main.html
@@ -1,59 +1,76 @@
 <ion-toolbar><ion-title>Item Divider</ion-title></ion-toolbar>
 
 <ion-content class="outer-content">
+  <ion-item-group>
+    <ion-item>
+      Plain Ol' div with some text
+    </ion-item>
 
-  <ion-item>
-    Plain Ol' div with some text
-  </ion-item>
+    <ion-item>
+      Single line text that should have ellipses when it doesn't all fit in the item
+    </ion-item>
+  </ion-item-group>
 
-  <ion-item>
-    Single line text that should have ellipses when it doesn't all fit in the item
-  </ion-item>
+  <ion-item-group>
+    <ion-item-divider>
+      Item Divider
+    </ion-item-divider>
 
-  <ion-item-divider>
-    Item Divider
-  </ion-item-divider>
+    <ion-item text-wrap>
+      Multiline text that should wrap when it is too long
+      to fit on one line in the item. Attribute on .item
+    </ion-item>
+  </ion-item-group>
 
-  <ion-item text-wrap>
-    Multiline text that should wrap when it is too long
-    to fit on one line in the item. Attribute on .item
-  </ion-item>
+  <ion-item-group>
+    <ion-item-divider dark>Dark</ion-item-divider>
 
-  <ion-item text-wrap>
-    <h1>H1 Title Text</h1>
-    <p>Paragraph line 1</p>
-  </ion-item>
+    <ion-item text-wrap>
+      <h1>H1 Title Text</h1>
+      <p>Paragraph line 1</p>
+    </ion-item>
 
-  <ion-item text-wrap>
-    <h2>H2 Title Text</h2>
-    <p>Paragraph line 1</p>
-  </ion-item>
+    <ion-item text-wrap>
+      <h2>H2 Title Text</h2>
+      <p>Paragraph line 1</p>
+    </ion-item>
+  </ion-item-group>
 
-  <ion-item-divider></ion-item-divider>
+  <ion-item-group>
+    <ion-item-divider light>Light</ion-item-divider>
 
-  <ion-item text-wrap>
-    <h3>H3 Title Text</h3>
-    <p>Paragraph line 1</p>
-    <p>Paragraph line 2</p>
-  </ion-item>
+    <ion-item text-wrap>
+      <h3>H3 Title Text</h3>
+      <p>Paragraph line 1</p>
+      <p>Paragraph line 2</p>
+    </ion-item>
+  </ion-item-group>
 
-  <ion-item text-wrap>
-    <h4>H4 Title Text</h4>
-    <p>Paragraph line 1</p>
-    <p>Paragraph line 2</p>
-    <p>Paragraph line 3</p>
-  </ion-item>
+  <ion-item-group>
+    <ion-item-divider primary>Primary</ion-item-divider>
 
-  <ion-item>
-    <ion-item-content>
-      Column 1
-    </ion-item-content>
-    <ion-item-content>
-      Column 2
-    </ion-item-content>
-    <ion-item-content>
-      Column 3
-    </ion-item-content>
-  </ion-item>
+    <ion-item text-wrap>
+      <h4>H4 Title Text</h4>
+      <p>Paragraph line 1</p>
+      <p>Paragraph line 2</p>
+      <p>Paragraph line 3</p>
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider secondary>Secondary</ion-item-divider>
+
+    <ion-item>
+      <ion-item-content>
+        Column 1
+      </ion-item-content>
+      <ion-item-content>
+        Column 2
+      </ion-item-content>
+      <ion-item-content>
+        Column 3
+      </ion-item-content>
+    </ion-item>
+  </ion-item-group>
 
 </ion-content>