From f367f53acad121e4b71c1d2d55f3a60cd9217cc0 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 20 Aug 2015 13:03:17 -0500
Subject: [PATCH] list updates

---
 ionic/components/card/modes/ios.scss          | 12 +++--
 ionic/components/card/modes/material.scss     | 53 +++++++++++--------
 ionic/components/card/test/advanced/main.html | 25 ++++++---
 ionic/components/card/test/basic/index.ts     |  3 ++
 ionic/components/card/test/images/index.ts    |  3 ++
 ionic/components/card/test/links/index.ts     |  3 ++
 ionic/components/item/modes/ios.scss          | 12 ++++-
 ionic/components/item/modes/material.scss     |  4 ++
 ionic/components/item/test/text/index.ts      |  2 +
 ionic/components/list/modes/ios.scss          |  3 +-
 ionic/components/list/test/headers/index.ts   |  2 +
 11 files changed, 87 insertions(+), 35 deletions(-)

diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index c40e32a251..163978d544 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -12,8 +12,9 @@ $card-ios-box-shadow:                  0 1px 2px rgba(0,0,0,.3) !default;
 $card-ios-border-radius:               2px !default;
 $card-ios-font-size:                   1.4rem !default;
 
-$card-ios-header-background-color:     $card-ios-background-color !default;
-$card-ios-header-padding:              10px;
+$card-ios-title-font-size:             1.8rem !default;
+$card-ios-title-padding:               8px 0 8px 0;
+$card-ios-title-text-color:            #222 !default;
 
 
 .card.list[mode=ios] {
@@ -43,9 +44,10 @@ $card-ios-header-padding:              10px;
     left: 0;
   }
 
-  ion-header {
-    padding: $card-ios-header-padding;
-    background-color: $card-ios-header-background-color;
+  .card-title {
+    padding: $card-ios-title-padding;
+    font-size: $card-ios-title-font-size;
+    color: $card-ios-title-text-color;
   }
 
 }
diff --git a/ionic/components/card/modes/material.scss b/ionic/components/card/modes/material.scss
index 277e98fd7a..9212b9a1d5 100644
--- a/ionic/components/card/modes/material.scss
+++ b/ionic/components/card/modes/material.scss
@@ -2,19 +2,22 @@
 // Material Design Card
 // --------------------------------------------------
 
-$card-md-margin-top:                  16px !default;
-$card-md-margin-right:                16px !default;
-$card-md-margin-bottom:               16px !default;
-$card-md-margin-left:                 16px !default;
+$card-md-margin-top:                  8px !default;
+$card-md-margin-right:                8px !default;
+$card-md-margin-bottom:               8px !default;
+$card-md-margin-left:                 8px !default;
 
 $card-md-background-color:            $list-background-color !default;
 $card-md-box-shadow:                  0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 $card-md-border-radius:               2px !default;
 $card-md-font-size:                   1.4rem !default;
 
-$card-md-header-font-size:            2.4rem !default;
-$card-md-header-background-color:     $card-md-background-color !default;
-$card-md-header-padding:              16px;
+$card-md-text-color:                  #222 !default;
+$card-md-title-font-size:             2.4rem !default;
+$card-md-title-padding:               8px 0 8px 0;
+$card-md-title-text-color:            #222 !default;
+
+$card-md-header-font-size:            1.6rem !default;
 
 
 .card.list[mode=md] {
@@ -26,18 +29,25 @@ $card-md-header-padding:              16px;
   font-size: $card-md-font-size;
   overflow: hidden;
 
+  .item:before,
+  .item:after {
+    left: 0;
+  }
+
   .item:first-child {
     margin-top: 0;
+
+    &:before {
+      border-top: none;
+    }
   }
 
   .item:last-child {
     margin-bottom: 0;
-    padding-bottom: 8px;
-  }
 
-  .item::before,
-  .item::after {
-    border: none;
+    &:after {
+      border-top: none;
+    }
   }
 
   .item-content button:first-child,
@@ -45,29 +55,27 @@ $card-md-header-padding:              16px;
     margin-left: 0;
   }
 
-  .item-content {
-    margin-top: 8px;
-    margin-bottom: 8px;
-  }
-
   ion-header {
-    padding: $card-md-header-padding;
     font-size: $card-md-header-font-size;
-    background-color: $card-md-header-background-color;
+    color: $card-md-text-color;
   }
 
-  .item > img {
-    padding-bottom: 8px;
+  .card-title {
+    padding: $card-md-title-padding;
+    font-size: $card-md-title-font-size;
+    color: $card-md-title-text-color;
   }
 
   h1 {
     margin: 0 0 2px;
     font-size: 2.4rem;
+    color: $card-md-text-color;
   }
 
   h2 {
     margin: 2px 0 2px;
     font-size: 1.6rem;
+    color: $card-md-text-color;
   }
 
   h3,
@@ -76,11 +84,14 @@ $card-md-header-padding:              16px;
   h6 {
     margin: 2px 0 2px;
     font-size: 1.4rem;
+    color: $card-md-text-color;
   }
 
   p {
     font-size: 1.4rem;
     margin: 0 0 2px;
+    line-height: 1.5;
+    color: $card-md-text-color;
   }
 
 }
diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html
index 8c7a983e53..c1f6e57e6a 100644
--- a/ionic/components/card/test/advanced/main.html
+++ b/ionic/components/card/test/advanced/main.html
@@ -8,19 +8,30 @@
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </div>
 
-  <ion-header>
-    Title goes here
-  </ion-header>
 
   <div class="item item-text-wrap">
     <div class="item-content">
-      Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain.
+
+      <h2 class="card-title">
+        Card Title Goes Here
+      </h2>
+
+      <p>
+        Keep close to Nature's heart... and break clear away,
+        once in awhile, and climb a mountain.
+      </p>
     </div>
   </div>
 
-  <ion-item>
-    <button clear>Action 1</button>
-    <button clear>Action 2</button>
+  <ion-item actions>
+    <button clear>
+      <icon name="ion-star"></icon>
+      Favorite
+    </button>
+    <button clear>
+      <icon name="ion-reply"></icon>
+      Reply
+    </button>
   </ion-item>
 
 </ion-card>
diff --git a/ionic/components/card/test/basic/index.ts b/ionic/components/card/test/basic/index.ts
index 43aed36502..f02a733534 100644
--- a/ionic/components/card/test/basic/index.ts
+++ b/ionic/components/card/test/basic/index.ts
@@ -5,3 +5,6 @@ import {App} from 'ionic/ionic';
   templateUrl: 'main.html'
 })
 class E2EApp {}
+
+
+document.body.style.background='#eee';
diff --git a/ionic/components/card/test/images/index.ts b/ionic/components/card/test/images/index.ts
index 43aed36502..f02a733534 100644
--- a/ionic/components/card/test/images/index.ts
+++ b/ionic/components/card/test/images/index.ts
@@ -5,3 +5,6 @@ import {App} from 'ionic/ionic';
   templateUrl: 'main.html'
 })
 class E2EApp {}
+
+
+document.body.style.background='#eee';
diff --git a/ionic/components/card/test/links/index.ts b/ionic/components/card/test/links/index.ts
index 43aed36502..f02a733534 100644
--- a/ionic/components/card/test/links/index.ts
+++ b/ionic/components/card/test/links/index.ts
@@ -5,3 +5,6 @@ import {App} from 'ionic/ionic';
   templateUrl: 'main.html'
 })
 class E2EApp {}
+
+
+document.body.style.background='#eee';
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 606c86320c..5be069f1c2 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -43,8 +43,18 @@ $item-ios-forward-icon-color:     $item-ios-border-color !default;
       border-top: 1px solid $item-ios-border-color;
     }
 
-    &:last-child {
+    &:first-of-type {
+      &:before {
+        left: 0;
+      }
+    }
+
+    &:last-of-type {
       margin-bottom: -1px;
+
+      &:after {
+        left: 0;
+      }
     }
   }
 
diff --git a/ionic/components/item/modes/material.scss b/ionic/components/item/modes/material.scss
index 6167c85c84..2d105987f4 100644
--- a/ionic/components/item/modes/material.scss
+++ b/ionic/components/item/modes/material.scss
@@ -92,6 +92,10 @@ $item-md-forward-icon-color:     $item-md-border-color !default;
     margin-top: $item-md-padding-media-top;
   }
 
+  .item[actions] .item-content {
+    margin: 8px;
+  }
+
   .badge {
     margin-right: $item-md-padding-right;
   }
diff --git a/ionic/components/item/test/text/index.ts b/ionic/components/item/test/text/index.ts
index 43aed36502..e3c40c1136 100644
--- a/ionic/components/item/test/text/index.ts
+++ b/ionic/components/item/test/text/index.ts
@@ -5,3 +5,5 @@ import {App} from 'ionic/ionic';
   templateUrl: 'main.html'
 })
 class E2EApp {}
+
+document.body.style.background='#eee';
diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss
index e8b45dc565..39f07e9e0d 100644
--- a/ionic/components/list/modes/ios.scss
+++ b/ionic/components/list/modes/ios.scss
@@ -4,7 +4,7 @@
 
 $list-ios-margin-top:                10px !default;
 $list-ios-margin-right:              0 !default;
-$list-ios-margin-bottom:             10px !default;
+$list-ios-margin-bottom:             32px !default;
 $list-ios-margin-left:               0 !default;
 
 $list-inset-ios-margin-top:           16px !default;
@@ -20,6 +20,7 @@ $list-ios-header-color:               #333 !default;
 
 
 .list[mode=ios] {
+  margin: 0 $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
 
   ion-header {
     padding: $list-ios-header-padding;
diff --git a/ionic/components/list/test/headers/index.ts b/ionic/components/list/test/headers/index.ts
index 43aed36502..e3c40c1136 100644
--- a/ionic/components/list/test/headers/index.ts
+++ b/ionic/components/list/test/headers/index.ts
@@ -5,3 +5,5 @@ import {App} from 'ionic/ionic';
   templateUrl: 'main.html'
 })
 class E2EApp {}
+
+document.body.style.background='#eee';