From 8a9d577fda812ae02bc3e8095af615642bb8301e Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Tue, 12 Nov 2013 10:36:29 -0600
Subject: [PATCH] border items / .item required with .item-divider

---
 dist/css/ionic.css   | 50 +++++++++++++++++++-------------------------
 scss/_form.scss      |  2 +-
 scss/_items.scss     | 22 +++++++++----------
 scss/_list.scss      | 12 +++--------
 scss/_variables.scss |  3 +--
 test/biglists.html   |  8 +++----
 test/cards.html      |  6 +++---
 test/lists.html      | 18 ++++++++--------
 8 files changed, 52 insertions(+), 69 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 7e00038049..9fb8a0524a 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -3250,11 +3250,19 @@ a.subdued‎ {
   display: block;
   margin: -1px;
   padding: 15px;
-  border: none;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #dddddd;
   background-color: white;
-  box-shadow: inset 0 0 1px #666666;
   font-size: 16px;
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
+  .item.active {
+    color: #888888;
+    background-color: white;
+    border-color: #888888; }
+    .item.active .item-content {
+      background-color: white;
+      color: #888888; }
   .item h2 {
     margin: 0 0 4px 0;
     font-size: 16px; }
@@ -3286,13 +3294,6 @@ a.subdued‎ {
     z-index: 2; }
     .item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
       color: inherit; }
-  .item.active {
-    color: #888888;
-    background-color: white;
-    border-color: #888888; }
-    .item.active .item-content {
-      background-color: white;
-      color: #888888; }
 
 .item-primary.active {
   color: white;
@@ -3439,7 +3440,6 @@ a.item {
   padding: 15px 40px 15px 15px;
   border: none;
   background-color: white;
-  box-shadow: inset 0 0 1px #666666;
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
 
 .item-text-wrap,
@@ -3654,12 +3654,10 @@ button.item-button-right:after {
     margin-bottom: 15px; }
 
 .item-divider {
-  margin: -1px;
-  padding: 5px 15px;
+  padding-top: 7.5px;
+  padding-bottom: 7.5px;
   min-height: 30px;
-  border: none;
   background-color: whitesmoke;
-  box-shadow: inset 0 0 1px #666666;
   color: #222222;
   font-weight: bold; }
 
@@ -3694,7 +3692,6 @@ button.item-button-right:after {
   .item-edit .button {
     height: 100%; }
     .item-edit .button .icon, .item-edit .button i {
-      color: #ef4e3a;
       display: -webkit-box;
       display: -webkit-flex;
       display: -moz-flex;
@@ -3705,10 +3702,11 @@ button.item-button-right:after {
       -webkit-align-items: center;
       -moz-align-items: center;
       align-items: center;
-      font-size: 24px;
       position: absolute;
       top: 0;
-      height: 100%; }
+      height: 100%;
+      color: #ef4e3a;
+      font-size: 24px; }
   .item-edit.ng-enter {
     left: -48px;
     opacity: 0;
@@ -3745,10 +3743,10 @@ button.item-button-right:after {
       -webkit-align-items: center;
       -moz-align-items: center;
       align-items: center;
-      font-size: 24px;
       position: absolute;
       top: 0;
-      height: 100%; }
+      height: 100%;
+      font-size: 24px; }
 
 /**
  * The hidden right-side buttons that can be exposed under a list item
@@ -3836,22 +3834,16 @@ button.item-button-right:after {
   margin-bottom: -1px; }
 
 .card .item,
-.card .item-divider,
 .list-inset .item,
-.list-inset .item-divider,
 .padding > .list .item,
-.padding-horizontal > .list .item,
-.padding > .list .item-divider,
-.padding-horizontal > .list .item-divider {
+.padding-horizontal > .list .item {
   margin-left: 0;
   margin-right: 0; }
 
-.padding-left > .list .item,
-.padding-left > .list .item-divider {
+.padding-left > .list .item {
   margin-left: 0; }
 
-.padding-right > .list .item,
-.padding-right > .list .item-divider {
+.padding-right > .list .item {
   margin-right: 0; }
 
 /**
@@ -4122,7 +4114,7 @@ textarea {
   padding: 4px 8px 3px;
   border: none;
   background-color: white;
-  box-shadow: inset 0 0 1px #666666; }
+  box-shadow: inset 0 0 1px #dddddd; }
 
 .item-stacked-label input {
   height: 46px; }
diff --git a/scss/_form.scss b/scss/_form.scss
index 81feec0cf3..4bf6528116 100644
--- a/scss/_form.scss
+++ b/scss/_form.scss
@@ -105,7 +105,7 @@ textarea {
   padding: 4px 8px 3px;
   border: none;
   background-color: $input-bg;
-  box-shadow: $item-box-shadow; 
+  box-shadow: inset 0 0 $item-border-width $item-border-color;
 }
 .item-stacked-label input {
   height: $line-height-computed + $font-size-base + 12px;
diff --git a/scss/_items.scss b/scss/_items.scss
index b3afae8d46..4c3f6cd450 100644
--- a/scss/_items.scss
+++ b/scss/_items.scss
@@ -5,6 +5,7 @@
  */
 
 .item {
+  @include item-style-active($secondary, $subdued-dark, $subdued-dark);
   position: relative;
 
   z-index: 2; // Make sure the borders and stuff don't get hidden by children
@@ -13,9 +14,10 @@
 
   padding: $item-padding;
 
-  border: none;
+  border-width: $item-border-width;
+  border-style: $item-border-style;
+  border-color: $item-border-color;
   background-color: $list-bg;
-  box-shadow: $item-box-shadow;
   font-size: $list-font-size;
 
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
@@ -70,7 +72,6 @@
       color: inherit;
     }
   }
-  @include item-style-active($secondary, $subdued-dark, $subdued-dark);
 }
 
 // Different themes for list items
@@ -141,7 +142,6 @@ a.item {
 
   border: none;
   background-color: $list-bg;
-  box-shadow: $item-box-shadow;
 
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
 }
@@ -275,7 +275,7 @@ a.item {
 
 a.item, 
 button.item {
-  padding-right: (($item-padding * 3) - 5)
+  padding-right: (($item-padding * 3) - 5);
 }
 
 a.item:after,
@@ -394,12 +394,10 @@ button.item-button-right:after {
 // -------------------------------
 
 .item-divider {
-  margin: $item-border-width * -1;
-  padding: $item-divider-padding;
+  padding-top: $item-padding / 2;
+  padding-bottom: $item-padding / 2;
   min-height: 30px;
-  border: none;
   background-color: $item-divider-bg;
-  box-shadow: $item-box-shadow;
   color: $item-divider-color;
   font-weight: bold;
 }
@@ -449,13 +447,13 @@ button.item-button-right:after {
   .button {
     height: 100%;
     .icon, i {
-      color: $assertive;
       @include display-flex();
       @include align-items(center);
-      font-size: 24px;
       position: absolute;
       top: 0;
       height: 100%;
+      color: $assertive;
+      font-size: 24px;
     }
   }
 
@@ -493,10 +491,10 @@ button.item-button-right:after {
     .icon, i {
       @include display-flex();
       @include align-items(center);
-      font-size: 24px;
       position: absolute;
       top: 0;
       height: 100%;
+      font-size: 24px;
     }
   }
 }
diff --git a/scss/_list.scss b/scss/_list.scss
index d4183052aa..2494c359cc 100644
--- a/scss/_list.scss
+++ b/scss/_list.scss
@@ -96,21 +96,15 @@
 }
 
 .card .item,
-.card .item-divider,
 .list-inset .item,
-.list-inset .item-divider,
 .padding > .list .item,
-.padding-horizontal > .list .item,
-.padding > .list .item-divider,
-.padding-horizontal > .list .item-divider {
+.padding-horizontal > .list .item {
   margin-left: 0;
   margin-right: 0;
 }
-.padding-left > .list .item,
-.padding-left > .list .item-divider {
+.padding-left > .list .item {
   margin-left: 0;
 }
-.padding-right > .list .item,
-.padding-right > .list .item-divider {
+.padding-right > .list .item {
   margin-right: 0;
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 920215c38f..71aad605b6 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -466,9 +466,8 @@ $card-border-radius:        2px !default;
 // -------------------------------
 
 $item-border-width:            1px !default;
-$item-border-color:            #666;
+$item-border-color:            #ddd;
 $item-border-style:            solid;
-$item-box-shadow:              inset 0 0 $item-border-width $item-border-color;
 $item-padding:                 15px !default;
 
 $item-divider-bg:              #f5f5f5;
diff --git a/test/biglists.html b/test/biglists.html
index 47c0c56cf6..f10ee7a67d 100644
--- a/test/biglists.html
+++ b/test/biglists.html
@@ -20,7 +20,7 @@
         <div id="list" class="scroll">
           <div class="list">
 
-            <div class="item-divider">
+            <div class="item item-divider">
               Work
             </div>
 
@@ -35,7 +35,7 @@
               <input type="text" placeholder="name">
             </a>
 
-            <div class="item-divider">
+            <div class="item item-divider">
               Work
             </div>
 
@@ -69,7 +69,7 @@
               </span>
             </a>
 
-            <div class="item-divider">
+            <div class="item item-divider">
               Leisure
             </div>
 
@@ -125,7 +125,7 @@
               </div>
             </a>
 
-            <div class="item-divider">
+            <div class="item item-divider">
               List Divider
             </div>
 
diff --git a/test/cards.html b/test/cards.html
index 2c26409ec7..7336e842c9 100644
--- a/test/cards.html
+++ b/test/cards.html
@@ -24,7 +24,7 @@
         </div>
         
         <div class="card">
-          <div class="item-divider">
+          <div class="item item-divider">
             I'm a Header in a Card!
           </div>
           <div class="item item-text-wrap">
@@ -33,13 +33,13 @@
         </div>
         
         <div class="card">
-          <div class="item-divider">
+          <div class="item item-divider">
             I'm a Header in a Card!
           </div>
           <div class="item item-text-wrap">
             This is a basic Card with some text.
           </div>
-          <div class="item-divider">
+          <div class="item item-divider">
             I'm a Footer in a Card!
           </div>
         </div>
diff --git a/test/lists.html b/test/lists.html
index adae67bebc..ee0a0c36a4 100644
--- a/test/lists.html
+++ b/test/lists.html
@@ -21,11 +21,11 @@
     </header>
 
     <div id="list">
-    <main id="content" class="content overflow-scroll">
+    <main id="content" class="content has-header overflow-scroll">
 
       <div class="list">
 
-          <div class="item-divider">
+          <div class="item item-divider">
             Work
           </div>
 
@@ -43,7 +43,7 @@
 
         <div class="list">
 
-          <div class="item-divider">
+          <div class="item item-divider">
             Work
           </div>
 
@@ -84,7 +84,7 @@
             </span>
           </a>
 
-          <div class="item-divider">
+          <div class="item item-divider">
             Leisure
           </div>
 
@@ -143,7 +143,7 @@
             </div>
           </a>
 
-          <div class="item-divider">
+          <div class="item item-divider">
             List Divider
           </div>
 
@@ -191,7 +191,7 @@
               </div>
             </a>
 
-            <div class="item-divider">
+            <div class="item item-divider">
               List Divider
             </div>
 
@@ -232,7 +232,7 @@
            </div>
           </a>
 
-          <div class="item-divider">
+          <div class="item item-divider">
             List Divider
           </div>
 
@@ -247,7 +247,7 @@
 
         <div class="list">
 
-          <div class="item-divider">
+          <div class="item item-divider">
             Without .item-content
           </div>
 
@@ -320,7 +320,7 @@
             </div>
           </a>
 
-          <div class="item-divider">
+          <div class="item item-divider">
             List Divider
           </div>