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 @@
Item Divider
+
+
+ Plain Ol' div with some text
+
-
- Plain Ol' div with some text
-
+
+ Single line text that should have ellipses when it doesn't all fit in the item
+
+
-
- Single line text that should have ellipses when it doesn't all fit in the item
-
+
+
+ Item Divider
+
-
- Item Divider
-
+
+ Multiline text that should wrap when it is too long
+ to fit on one line in the item. Attribute on .item
+
+
-
- Multiline text that should wrap when it is too long
- to fit on one line in the item. Attribute on .item
-
+
+ Dark
-
- H1 Title Text
- Paragraph line 1
-
+
+ H1 Title Text
+ Paragraph line 1
+
-
- H2 Title Text
- Paragraph line 1
-
+
+ H2 Title Text
+ Paragraph line 1
+
+
-
+
+ Light
-
- H3 Title Text
- Paragraph line 1
- Paragraph line 2
-
+
+ H3 Title Text
+ Paragraph line 1
+ Paragraph line 2
+
+
-
- H4 Title Text
- Paragraph line 1
- Paragraph line 2
- Paragraph line 3
-
+
+ Primary
-
-
- Column 1
-
-
- Column 2
-
-
- Column 3
-
-
+
+ H4 Title Text
+ Paragraph line 1
+ Paragraph line 2
+ Paragraph line 3
+
+
+
+
+ Secondary
+
+
+
+ Column 1
+
+
+ Column 2
+
+
+ Column 3
+
+
+