diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 9b336f5fa8..f48f77ca7a 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -49,14 +49,14 @@ ion-item-group { display: block; } -ion-item-group-title { +ion-item-divider { display: block; min-height: 30px; font-weight: 500; width: 100%; z-index: 1000; - &.sticky { + &[sticky] { position: -webkit-sticky; position: sticky; top: 0px; diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index 990e28dbbf..bc3ca3d54c 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -32,12 +32,6 @@ $item-ios-sliding-transition: transform 250ms ease-in-out !default; ion-item-group { - ion-item-group-title { - padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left; - background-color: $item-ios-divider-bg; - color: $item-ios-divider-color; - } - .item:first-child { .item-inner { border-top-width: 0; @@ -50,6 +44,12 @@ ion-item-group { } } +ion-item-divider { + padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left; + background-color: $item-ios-divider-bg; + color: $item-ios-divider-color; +} + ion-note { color: $item-ios-note-color; } diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index 30bff925ec..34e75f3920 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -33,7 +33,7 @@ $item-md-sliding-content-bg: $background-color !default; $item-md-sliding-transition: transform 250ms ease-in-out !default; -ion-item-group-title { +ion-item-divider { padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left; background-color: $item-md-divider-bg; color: $item-md-divider-color; diff --git a/ionic/components/item/test/dividers/index.ts b/ionic/components/item/test/dividers/index.ts new file mode 100644 index 0000000000..43aed36502 --- /dev/null +++ b/ionic/components/item/test/dividers/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp {} diff --git a/ionic/components/item/test/dividers/main.html b/ionic/components/item/test/dividers/main.html new file mode 100644 index 0000000000..597d066165 --- /dev/null +++ b/ionic/components/item/test/dividers/main.html @@ -0,0 +1,59 @@ +Item Divider + + + + + Plain Ol' div with some text + + + + Single line text that should have ellipses when it doesn't all fit in the item + + + + Item Divider + + + + Multiline text that should wrap when it is too long + to fit on one line in the item. Attribute on .item + + + +

H1 Title Text

+

Paragraph line 1

+
+ + +

H2 Title Text

+

Paragraph line 1

+
+ + + + +

H3 Title Text

+

Paragraph line 1

+

Paragraph line 2

+
+ + +

H4 Title Text

+

Paragraph line 1

+

Paragraph line 2

+

Paragraph line 3

+
+ + + + Column 1 + + + Column 2 + + + Column 3 + + + +
diff --git a/ionic/components/item/test/groups/session-list.html b/ionic/components/item/test/groups/session-list.html index b49983673c..90113a9cbe 100644 --- a/ionic/components/item/test/groups/session-list.html +++ b/ionic/components/item/test/groups/session-list.html @@ -10,9 +10,9 @@ - + {{timeSlot.time}} - +