diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss index f5aa26f32d..f14385a093 100644 --- a/ionic/components/card/card.scss +++ b/ionic/components/card/card.scss @@ -22,3 +22,15 @@ ion-card-header { ion-card-content { display: block; } + +ion-card { + > .list:first-child { + border-top-left-radius: inherit; + border-top-right-radius: inherit; + } + + > .list:last-child { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + } +} diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss index 6a41f81645..335388f50a 100644 --- a/ionic/components/card/modes/ios.scss +++ b/ionic/components/card/modes/ios.scss @@ -50,16 +50,19 @@ ion-card { ion-item-content { padding: 0; } + + > .item:last-child, + > ion-item-sliding:last-child .item { + border-bottom: none; + } } .item { - padding-left: ($card-ios-padding-left / 2); - padding-right: ($card-ios-padding-right / 2); - font-size: $item-ios-font-size; + padding-left: $card-ios-padding-left / 2; } - ion-item-content { - padding: $card-ios-padding-top ($card-ios-padding-right / 2) $card-ios-padding-bottom ($card-ios-padding-left / 2); + .item-inner { + border: none; } ion-card-content { @@ -89,28 +92,13 @@ ion-card { button, [button] { - margin: $item-ios-padding-icon-top ($item-ios-padding-right / 2) $item-ios-padding-icon-bottom ($item-ios-padding-left / 2); + margin: 0 ($item-ios-padding-right / 2); padding: 2px 6px; min-height: 26px; font-size: 1.3rem; } } - [item-left], - [item-right] { - margin: $card-ios-padding-media-top ($card-ios-padding-right / 2) $card-ios-padding-media-bottom ($card-ios-padding-left / 2); - } - - button[item-left], - button[item-right], - [button][item-left], - [button][item-right], { - margin: $item-ios-padding-icon-top ($item-ios-padding-right / 2) $item-ios-padding-icon-bottom ($item-ios-padding-left / 2); - padding: 2px 6px; - min-height: 26px; - font-size: 1.3rem; - } - ion-note[item-left], ion-note[item-right], { font-size: 1.3rem; @@ -122,25 +110,6 @@ ion-card { color: $card-ios-title-text-color; } - ion-avatar { - min-width: $item-ios-avatar-size; - - img { - max-width: $item-ios-avatar-size; - max-height: $item-ios-avatar-size; - border-radius: $item-ios-avatar-size / 2; - } - } - - ion-thumbnail { - min-width: $item-ios-thumbnail-size; - - img { - max-width: $item-ios-thumbnail-size; - max-height: $item-ios-thumbnail-size; - } - } - h1 { margin: 0 0 2px; font-size: 2.4rem; diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss index cfd7c0e1fd..caba059d5d 100644 --- a/ionic/components/card/modes/md.scss +++ b/ionic/components/card/modes/md.scss @@ -49,16 +49,19 @@ ion-card { ion-item-content { padding: 0; } + + > .item:last-child, + > ion-item-sliding:last-child .item { + border-bottom: none; + } } .item { - padding-right: ($card-md-padding-right / 2); - padding-left: ($card-md-padding-left / 2); font-size: $item-md-font-size; } - ion-item-content { - padding: $card-md-padding-top ($card-md-padding-right / 2) $card-md-padding-bottom ($card-md-padding-left / 2); + .item-inner { + border: none; } ion-card-content { @@ -88,21 +91,6 @@ ion-card { } } - [item-left], - [item-right] { - margin: $card-md-padding-media-top ($card-md-padding-right / 2) $card-md-padding-media-bottom ($card-md-padding-left / 2); - } - - button[item-left], - button[item-right], - [button][item-left], - [button][item-right], { - margin: 0 ($card-md-padding-right / 4) 0 ($card-md-padding-left / 4); - min-height: 26px; - font-size: 1.3rem; - border-color: transparent; - } - ion-note[item-left], ion-note[item-right], { font-size: 1.3rem; @@ -114,25 +102,6 @@ ion-card { color: $card-md-title-text-color; } - ion-avatar { - min-width: $card-md-avatar-size; - - img { - max-width: $card-md-avatar-size; - max-height: $card-md-avatar-size; - border-radius: $card-md-avatar-size / 2; - } - } - - ion-thumbnail { - min-width: $card-md-thumbnail-size; - - img { - max-width: $card-md-thumbnail-size; - max-height: $card-md-thumbnail-size; - } - } - h1 { margin: 0 0 2px; font-size: 2.4rem; diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 9ce65209c1..ad2822a028 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -55,7 +55,7 @@ } a.item, -button.item.item { +button.item { margin: 0; padding: 0; width: 100%; diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index c8a78d40c9..24cd141de4 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -30,18 +30,11 @@ $item-ios-sliding-content-bg: $background-color !default; $item-ios-sliding-transition: transform 250ms ease-in-out !default; -.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; -} - -ion-note { - color: $item-ios-note-color; -} - .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; border-bottom: 1px solid $item-ios-border-color; } @@ -52,6 +45,16 @@ ion-note { } } +ion-note { + color: $item-ios-note-color; +} + +.item { + border-radius: 0; + padding-left: $item-ios-padding-left; + font-size: $item-ios-font-size; +} + .item.activated, a.item.activated, button.item.activated { @@ -64,3 +67,106 @@ a.item, button.item { transition-duration: 200ms; } + +.item-inner { + padding-right: ($item-ios-padding-right / 2); + border-bottom: 1px solid $item-ios-border-color; +} + +ion-item-content { + margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; +} + +[item-left] { + margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0; +} + +[item-right] { + margin: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2); +} + +icon[item-left], +icon[item-right] { + margin-top: $item-ios-padding-icon-top; + margin-bottom: $item-ios-padding-icon-bottom; +} + +ion-avatar[item-left], +ion-thumbnail[item-left] { + margin: ($item-ios-padding-right / 2) $item-ios-padding-right ($item-ios-padding-right / 2) 0; +} + +ion-avatar[item-right], +ion-thumbnail[item-right] { + margin: ($item-ios-padding-right / 2); +} + +button[item-left], +button[item-right], +[button][item-left], +[button][item-right] { + padding: 0 0.5em; + font-size: 1.3rem; + min-height: 25px; + margin-top: 9px; +} + +[item-left].icon-only, +[item-right].icon-only, +[item-left].icon-only icon, +[item-right].icon-only icon, +[item-left][clear], +[item-right][clear] { + padding: 0 1px; +} + +[item-left].icon-left icon, +[item-right].icon-left icon { + margin-left: 0; + margin-bottom: 1px; + padding-right: 0.3em; +} + +[item-left].icon-right icon, +[item-right].icon-right icon { + margin-right: 0; + margin-bottom: 1px; +} + +ion-avatar { + min-width: $item-ios-avatar-size; + min-height: $item-ios-avatar-size; + + img { + max-width: $item-ios-avatar-size; + max-height: $item-ios-avatar-size; + border-radius: $item-ios-avatar-size / 2; + } +} + +ion-thumbnail { + min-width: $item-ios-thumbnail-size; + min-height: $item-ios-thumbnail-size; + + img { + max-width: $item-ios-thumbnail-size; + max-height: $item-ios-thumbnail-size; + } +} + +button.item:not([detail-none]) .item-inner, +a.item:not([detail-none]) .item-inner, +.item[detail-push] .item-inner { + @include ios-detail-push-icon($item-ios-detail-push-color); + background-repeat: no-repeat; + background-position: right ($item-ios-padding-right - 2) center; + background-size: 14px 14px; + padding-right: 32px; +} + +&.hairlines { + .item-inner, + .item-group ion-item-group-title { + border-bottom-width: 0.55px; + } +} diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index 651d0bcf52..6213e8cfe1 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -42,6 +42,138 @@ ion-note { color: $item-md-note-color; } +.item { + padding-right: 0; + padding-left: ($item-md-padding-left); + font-size: $item-md-font-size; + text-transform: none; + font-weight: normal; + box-shadow: none; + + h1 { + margin: 0 0 2px; + font-size: 2.4rem; + font-weight: normal; + } + + h2 { + margin: 2px 0 2px; + font-size: 1.6rem; + font-weight: normal; + } + + h3, + h4, + h5, + h6 { + line-height: normal; + margin: 2px 0 2px; + font-size: 1.4rem; + font-weight: normal; + } + + p { + line-height: normal; + color: #666; + font-size: 1.4rem; + margin: 0 0 2px; + } +} + +.item-inner { + border-bottom: 1px solid $item-md-border-color; + padding-right: ($item-md-padding-right / 2); +} + +ion-item-content { + margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0; +} + +button.item.activated { + box-shadow: none; +} + +[item-left], +[item-right] { + margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0; +} + +icon[item-left], +icon[item-right] { + margin-top: $item-md-padding-icon-top; + margin-left: 0; + margin-bottom: $item-md-padding-icon-bottom; +} + +button[item-left], +button[item-right], +[button][item-left], +[button][item-right] { + padding: 0 0.6em; + min-height: 26px; + font-size: 1.2rem; +} + +[item-left].icon-only, +[item-right].icon-only, +[item-left].icon-only icon, +[item-right].icon-only icon { + padding: 0 1px; +} + +[item-left][clear], +[item-right][clear] { + padding: 0 8px; +} + +[item-left].icon-left icon, +[item-right].icon-left icon { + margin-left: 0; + margin-bottom: 1px; + padding-right: 0.3em; +} + +[item-left].icon-right icon, +[item-right].icon-right icon { + margin-right: 0; + margin-bottom: 1px; +} + +[text-wrap] ion-item-content { + font-size: $item-md-body-text-font-size; + line-height: $item-md-body-text-line-height; +} + +.item[actions] ion-item-content { + margin: 4px; +} + +icon[item-left] + .item-inner, +icon[item-left] + [text-input] { + margin-left: $item-md-padding-left + ($item-md-padding-left / 2); +} + +ion-avatar { + min-width: $item-md-avatar-size; + min-height: $item-md-avatar-size; + + img { + max-width: $item-md-avatar-size; + max-height: $item-md-avatar-size; + border-radius: $item-md-avatar-size / 2; + } +} + +ion-thumbnail { + min-width: $item-md-thumbnail-size; + min-height: $item-md-thumbnail-size; + + img { + max-width: $item-md-thumbnail-size; + max-height: $item-md-thumbnail-size; + } +} + .item, a.item, button.item { diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html index cb176c17a8..459d935d1c 100644 --- a/ionic/components/item/test/buttons/main.html +++ b/ionic/components/item/test/buttons/main.html @@ -1,6 +1,6 @@ Items as Links/Buttons - + a[ion-item] @@ -87,5 +87,5 @@ and a link. - - + + diff --git a/ionic/components/item/test/groups/component-list.html b/ionic/components/item/test/groups/component-list.html index 4fb57d1032..a7462260d8 100644 --- a/ionic/components/item/test/groups/component-list.html +++ b/ionic/components/item/test/groups/component-list.html @@ -4,10 +4,12 @@ {{data.day}} - Sessions -

{{session.name}}

-

- {{session.location}} -

+ diff --git a/ionic/components/item/test/groups/index.ts b/ionic/components/item/test/groups/index.ts index a9c7305aea..0be5ab9165 100644 --- a/ionic/components/item/test/groups/index.ts +++ b/ionic/components/item/test/groups/index.ts @@ -1,21 +1,20 @@ -import {ElementRef, Host} from 'angular2/angular2'; -import {Component, View, NgIf, NgFor} from 'angular2/angular2'; -import {App, Content, Icon, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, ListHeader, NavController} from 'ionic/ionic'; +import {Component, NgIf, NgFor} from 'angular2/angular2'; +import {App, Icon, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, ListHeader, NavController} from 'ionic/ionic'; @Component({ properties: ['data'], selector: 'component-list', - directives: [ComponentList, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, NgIf, NgFor], + directives: [Item, ItemGroup, ItemGroupTitle, ItemSliding, List, NgIf, NgFor], templateUrl: 'component-list.html' }) -class ComponentList { - constructor(elementRef: ElementRef, @Host() content:Content) { - console.log('Component List init', content); +export class ComponentList { + constructor() { + } } @App({ - directives: [Content, ComponentList, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, NgIf, NgFor], + directives: [ComponentList], templateUrl: 'main.html' }) class E2EApp { diff --git a/ionic/components/item/test/groups/main.html b/ionic/components/item/test/groups/main.html index fb598a56a6..db54c5f87a 100644 --- a/ionic/components/item/test/groups/main.html +++ b/ionic/components/item/test/groups/main.html @@ -1,4 +1,4 @@ +Item Groups -

Component List

diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html index e23e172f74..e98b67a447 100644 --- a/ionic/components/item/test/icons/main.html +++ b/ionic/components/item/test/icons/main.html @@ -1,6 +1,6 @@ Item Icons - + ion-item [detail-push] attr @@ -67,4 +67,4 @@ 99 - + diff --git a/ionic/components/item/test/images/main.html b/ionic/components/item/test/images/main.html index 615d71962a..53fa230b4b 100644 --- a/ionic/components/item/test/images/main.html +++ b/ionic/components/item/test/images/main.html @@ -1,6 +1,6 @@ Item Images - + Plain Ol' div w/ some text, no images @@ -58,7 +58,7 @@

Paragraph text.

-
+