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.
-
+