From f23588559bed5a8c703879e8b87305b88185fb00 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Fri, 25 Oct 2013 10:16:39 -0500
Subject: [PATCH] forms updated w/ .item conventions

---
 dist/css/ionic-ios7.css         | 104 +++++++++++----------
 dist/css/ionic-scoped.css       |  97 ++++++++++----------
 dist/css/ionic.css              | 104 +++++++++++----------
 scss/ionic-ios7/ionic-ios7.scss |   1 -
 scss/ionic/_card.scss           |  43 ---------
 scss/ionic/_form.scss           |  47 +++-------
 scss/ionic/_items.scss          |   6 +-
 scss/ionic/_list.scss           |  70 ++++++++++++++-
 scss/ionic/_variables.scss      |  10 +--
 scss/ionic/ionic-scoped.scss    |   1 -
 scss/ionic/ionic.scss           |   1 -
 test/input-text.html            | 155 +++++++++++++++++---------------
 12 files changed, 331 insertions(+), 308 deletions(-)
 delete mode 100644 scss/ionic/_card.scss

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 3e2a4144d1..5e9217defa 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -1354,38 +1354,64 @@ button.item-icon-right .item-content:after {
   color: #aaa;
   font-size: 14px; }
 
-.card {
+/*
+  A card and list-inset are close to the same thing, except a card as a box shadow.
+*/
+.card,
+.list-inset {
   overflow: hidden;
   margin: 20px 10px;
   background-color: white;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 2px; }
 
-.card .item {
+.card {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
+
+.card .item,
+.list-inset .item,
+.padding > .list .item {
   margin-left: 0;
   margin-right: 0; }
-  .card .item:first-child {
+  .card .item:first-child,
+  .list-inset .item:first-child,
+  .padding > .list .item:first-child {
     margin-top: 0;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px; }
-    .card .item:first-child .item-content {
+    .card .item:first-child .item-content,
+    .list-inset .item:first-child .item-content,
+    .padding > .list .item:first-child .item-content {
       border-top-left-radius: 2px;
       border-top-right-radius: 2px; }
-  .card .item:last-child {
+  .card .item:last-child,
+  .list-inset .item:last-child,
+  .padding > .list .item:last-child {
     margin-bottom: 0;
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px; }
-    .card .item:last-child .item-content {
+    .card .item:last-child .item-content,
+    .list-inset .item:last-child .item-content,
+    .padding > .list .item:last-child .item-content {
       border-bottom-left-radius: 2px;
       border-bottom-right-radius: 2px; }
 
-.card.list .item:last-child {
+.card.list .item:last-child,
+.list-inset .item:last-child {
   margin-bottom: -1px; }
 
-.card.list .item-divider {
+.card.list .item-divider,
+.list-inset .item-divider,
+.padding > .list .item,
+.padding-horizontal > .list .item {
   margin-right: 0;
   margin-left: 0; }
 
+.padding-left > .list .item {
+  margin-left: 0; }
+
+.padding-right > .list .item {
+  margin-right: 0; }
+
 form {
   margin: 0 0 1.42857; }
 
@@ -1418,34 +1444,13 @@ select,
 textarea {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
 
-.input-group {
-  display: block;
-  overflow: hidden;
-  border-top: 1px solid #cccccc;
-  border-bottom: 1px solid #cccccc;
-  background-color: white; }
-
-.padded > .input-group,
-.input-group.margin {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  border-right: 1px solid #cccccc;
-  border-left: 1px solid #cccccc; }
-
-.input-group .input-row + .input-row {
-  border-top: 1px solid #cccccc; }
-
-.input-group + .input-group {
-  margin-top: 10px; }
-
-.input-row {
+.item-input {
   position: relative;
   display: -webkit-flex;
   display: flex;
   overflow: hidden;
   padding: 6px 8px 5px; }
-  .input-row input {
+  .item-input input {
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
@@ -1453,45 +1458,46 @@ textarea {
     background-color: transparent;
     flex: 1 0 220px;
     -webkit-appearance: none; }
-  .input-row .input-label {
+  .item-input .input-label {
     padding: 7px 10px 7px 3px;
     max-width: 200px;
     color: black;
     font-weight: bold;
     flex: 1 0 100px; }
-  .input-row [class^="icon-"], .input-row [class*=" icon-"] {
+  .item-input [class^="icon-"], .item-input [class*=" icon-"] {
     display: inline-block;
     text-align: center;
     font-size: 16px;
     flex: 0 0 24px;
     align-self: center; }
-  .input-row .placeholder-icon {
+  .item-input .placeholder-icon {
     color: #999; }
 
-.input-group.stacked-label,
-.input-group.stacked-label .input-row {
+.list.stacked-label,
+.list.stacked-label .item-input {
   display: block;
-  border: 0;
-  background-color: transparent; }
-  .input-group.stacked-label .input-label, .input-group.stacked-label [class^="icon-"], .input-group.stacked-label [class*=" icon-"],
-  .input-group.stacked-label .input-row .input-label,
-  .input-group.stacked-label .input-row [class^="icon-"],
-  .input-group.stacked-label .input-row [class*=" icon-"] {
+  background-color: transparent;
+  box-shadow: none; }
+  .list.stacked-label .input-label, .list.stacked-label [class^="icon-"], .list.stacked-label [class*=" icon-"],
+  .list.stacked-label .item-input .input-label,
+  .list.stacked-label .item-input [class^="icon-"],
+  .list.stacked-label .item-input [class*=" icon-"] {
     display: inline-block;
     padding: 4px 0;
     vertical-align: middle; }
 
-.input-group.stacked-label input,
-.input-group.stacked-label textarea {
+.list.stacked-label input,
+.list.stacked-label textarea {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   overflow: hidden;
   padding: 4px 8px 3px;
-  border: 1px solid #cccccc;
-  background-color: white; }
+  border: none;
+  background-color: white;
+  box-shadow: inset 0 0 1px #666666; }
 
-.input-group.stacked-label input {
+.list.stacked-label input {
   height: 46px; }
 
 select,
@@ -1560,7 +1566,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index d829426587..c114073a7b 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -161,6 +161,9 @@
    * List editing styles. These trigger when the entire list goes into
    * "edit mode"
    */
+  /*
+    A card and list-inset are close to the same thing, except a card as a box shadow.
+  */
   /* the checkmark within the box */
   /* what the background looks like when its checked */
   /* what the checkmark looks like when its checked */
@@ -2038,34 +2041,54 @@
     float: right;
     color: #aaa;
     font-size: 14px; }
-  .ionic .card {
+  .ionic .card,
+  .ionic .list-inset {
     overflow: hidden;
     margin: 20px 10px;
     background-color: white;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     border-radius: 2px; }
-  .ionic .card .item {
+  .ionic .card {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
+  .ionic .card .item,
+  .ionic .list-inset .item,
+  .ionic .padding > .list .item {
     margin-left: 0;
     margin-right: 0; }
-    .ionic .card .item:first-child {
+    .ionic .card .item:first-child,
+    .ionic .list-inset .item:first-child,
+    .ionic .padding > .list .item:first-child {
       margin-top: 0;
       border-top-left-radius: 2px;
       border-top-right-radius: 2px; }
-      .ionic .card .item:first-child .item-content {
+      .ionic .card .item:first-child .item-content,
+      .ionic .list-inset .item:first-child .item-content,
+      .ionic .padding > .list .item:first-child .item-content {
         border-top-left-radius: 2px;
         border-top-right-radius: 2px; }
-    .ionic .card .item:last-child {
+    .ionic .card .item:last-child,
+    .ionic .list-inset .item:last-child,
+    .ionic .padding > .list .item:last-child {
       margin-bottom: 0;
       border-bottom-left-radius: 2px;
       border-bottom-right-radius: 2px; }
-      .ionic .card .item:last-child .item-content {
+      .ionic .card .item:last-child .item-content,
+      .ionic .list-inset .item:last-child .item-content,
+      .ionic .padding > .list .item:last-child .item-content {
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px; }
-  .ionic .card.list .item:last-child {
+  .ionic .card.list .item:last-child,
+  .ionic .list-inset .item:last-child {
     margin-bottom: -1px; }
-  .ionic .card.list .item-divider {
+  .ionic .card.list .item-divider,
+  .ionic .list-inset .item-divider,
+  .ionic .padding > .list .item,
+  .ionic .padding-horizontal > .list .item {
     margin-right: 0;
     margin-left: 0; }
+  .ionic .padding-left > .list .item {
+    margin-left: 0; }
+  .ionic .padding-right > .list .item {
+    margin-right: 0; }
   .ionic form {
     margin: 0 0 1.42857; }
   .ionic legend {
@@ -2094,30 +2117,13 @@
   .ionic select,
   .ionic textarea {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
-  .ionic .input-group {
-    display: block;
-    overflow: hidden;
-    border-top: 1px solid #cccccc;
-    border-bottom: 1px solid #cccccc;
-    background-color: white; }
-  .ionic .padded > .input-group,
-  .ionic .input-group.margin {
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
-    border-radius: 2px;
-    border-right: 1px solid #cccccc;
-    border-left: 1px solid #cccccc; }
-  .ionic .input-group .input-row + .input-row {
-    border-top: 1px solid #cccccc; }
-  .ionic .input-group + .input-group {
-    margin-top: 10px; }
-  .ionic .input-row {
+  .ionic .item-input {
     position: relative;
     display: -webkit-flex;
     display: flex;
     overflow: hidden;
     padding: 6px 8px 5px; }
-    .ionic .input-row input {
+    .ionic .item-input input {
       -webkit-border-radius: 0;
       -moz-border-radius: 0;
       border-radius: 0;
@@ -2125,42 +2131,43 @@
       background-color: transparent;
       flex: 1 0 220px;
       -webkit-appearance: none; }
-    .ionic .input-row .input-label {
+    .ionic .item-input .input-label {
       padding: 7px 10px 7px 3px;
       max-width: 200px;
       color: black;
       font-weight: bold;
       flex: 1 0 100px; }
-    .ionic .input-row [class^="icon-"], .ionic .input-row [class*=" icon-"] {
+    .ionic .item-input [class^="icon-"], .ionic .item-input [class*=" icon-"] {
       display: inline-block;
       text-align: center;
       font-size: 16px;
       flex: 0 0 24px;
       align-self: center; }
-    .ionic .input-row .placeholder-icon {
+    .ionic .item-input .placeholder-icon {
       color: #999; }
-  .ionic .input-group.stacked-label,
-  .ionic .input-group.stacked-label .input-row {
+  .ionic .list.stacked-label,
+  .ionic .list.stacked-label .item-input {
     display: block;
-    border: 0;
-    background-color: transparent; }
-    .ionic .input-group.stacked-label .input-label, .ionic .input-group.stacked-label [class^="icon-"], .ionic .input-group.stacked-label [class*=" icon-"],
-    .ionic .input-group.stacked-label .input-row .input-label,
-    .ionic .input-group.stacked-label .input-row [class^="icon-"],
-    .ionic .input-group.stacked-label .input-row [class*=" icon-"] {
+    background-color: transparent;
+    box-shadow: none; }
+    .ionic .list.stacked-label .input-label, .ionic .list.stacked-label [class^="icon-"], .ionic .list.stacked-label [class*=" icon-"],
+    .ionic .list.stacked-label .item-input .input-label,
+    .ionic .list.stacked-label .item-input [class^="icon-"],
+    .ionic .list.stacked-label .item-input [class*=" icon-"] {
       display: inline-block;
       padding: 4px 0;
       vertical-align: middle; }
-  .ionic .input-group.stacked-label input,
-  .ionic .input-group.stacked-label textarea {
+  .ionic .list.stacked-label input,
+  .ionic .list.stacked-label textarea {
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
     overflow: hidden;
     padding: 4px 8px 3px;
-    border: 1px solid #cccccc;
-    background-color: white; }
-  .ionic .input-group.stacked-label input {
+    border: none;
+    background-color: white;
+    box-shadow: inset 0 0 1px #666666; }
+  .ionic .list.stacked-label input {
     height: 46px; }
   .ionic select,
   .ionic textarea,
@@ -2221,7 +2228,7 @@
   .ionic input[type="file"] {
     line-height: 34px; }
   .ionic select {
-    border: 1px solid #cccccc;
+    border: 1px solid #ccc;
     background-color: white; }
   .ionic select[multiple],
   .ionic select[size] {
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 9826960833..789b348c97 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2497,38 +2497,64 @@ button.item-icon-right .item-content:after {
   color: #aaa;
   font-size: 14px; }
 
-.card {
+/*
+  A card and list-inset are close to the same thing, except a card as a box shadow.
+*/
+.card,
+.list-inset {
   overflow: hidden;
   margin: 20px 10px;
   background-color: white;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 2px; }
 
-.card .item {
+.card {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
+
+.card .item,
+.list-inset .item,
+.padding > .list .item {
   margin-left: 0;
   margin-right: 0; }
-  .card .item:first-child {
+  .card .item:first-child,
+  .list-inset .item:first-child,
+  .padding > .list .item:first-child {
     margin-top: 0;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px; }
-    .card .item:first-child .item-content {
+    .card .item:first-child .item-content,
+    .list-inset .item:first-child .item-content,
+    .padding > .list .item:first-child .item-content {
       border-top-left-radius: 2px;
       border-top-right-radius: 2px; }
-  .card .item:last-child {
+  .card .item:last-child,
+  .list-inset .item:last-child,
+  .padding > .list .item:last-child {
     margin-bottom: 0;
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px; }
-    .card .item:last-child .item-content {
+    .card .item:last-child .item-content,
+    .list-inset .item:last-child .item-content,
+    .padding > .list .item:last-child .item-content {
       border-bottom-left-radius: 2px;
       border-bottom-right-radius: 2px; }
 
-.card.list .item:last-child {
+.card.list .item:last-child,
+.list-inset .item:last-child {
   margin-bottom: -1px; }
 
-.card.list .item-divider {
+.card.list .item-divider,
+.list-inset .item-divider,
+.padding > .list .item,
+.padding-horizontal > .list .item {
   margin-right: 0;
   margin-left: 0; }
 
+.padding-left > .list .item {
+  margin-left: 0; }
+
+.padding-right > .list .item {
+  margin-right: 0; }
+
 form {
   margin: 0 0 1.42857; }
 
@@ -2561,34 +2587,13 @@ select,
 textarea {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
 
-.input-group {
-  display: block;
-  overflow: hidden;
-  border-top: 1px solid #cccccc;
-  border-bottom: 1px solid #cccccc;
-  background-color: white; }
-
-.padded > .input-group,
-.input-group.margin {
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  border-right: 1px solid #cccccc;
-  border-left: 1px solid #cccccc; }
-
-.input-group .input-row + .input-row {
-  border-top: 1px solid #cccccc; }
-
-.input-group + .input-group {
-  margin-top: 10px; }
-
-.input-row {
+.item-input {
   position: relative;
   display: -webkit-flex;
   display: flex;
   overflow: hidden;
   padding: 6px 8px 5px; }
-  .input-row input {
+  .item-input input {
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
@@ -2596,45 +2601,46 @@ textarea {
     background-color: transparent;
     flex: 1 0 220px;
     -webkit-appearance: none; }
-  .input-row .input-label {
+  .item-input .input-label {
     padding: 7px 10px 7px 3px;
     max-width: 200px;
     color: black;
     font-weight: bold;
     flex: 1 0 100px; }
-  .input-row [class^="icon-"], .input-row [class*=" icon-"] {
+  .item-input [class^="icon-"], .item-input [class*=" icon-"] {
     display: inline-block;
     text-align: center;
     font-size: 16px;
     flex: 0 0 24px;
     align-self: center; }
-  .input-row .placeholder-icon {
+  .item-input .placeholder-icon {
     color: #999; }
 
-.input-group.stacked-label,
-.input-group.stacked-label .input-row {
+.list.stacked-label,
+.list.stacked-label .item-input {
   display: block;
-  border: 0;
-  background-color: transparent; }
-  .input-group.stacked-label .input-label, .input-group.stacked-label [class^="icon-"], .input-group.stacked-label [class*=" icon-"],
-  .input-group.stacked-label .input-row .input-label,
-  .input-group.stacked-label .input-row [class^="icon-"],
-  .input-group.stacked-label .input-row [class*=" icon-"] {
+  background-color: transparent;
+  box-shadow: none; }
+  .list.stacked-label .input-label, .list.stacked-label [class^="icon-"], .list.stacked-label [class*=" icon-"],
+  .list.stacked-label .item-input .input-label,
+  .list.stacked-label .item-input [class^="icon-"],
+  .list.stacked-label .item-input [class*=" icon-"] {
     display: inline-block;
     padding: 4px 0;
     vertical-align: middle; }
 
-.input-group.stacked-label input,
-.input-group.stacked-label textarea {
+.list.stacked-label input,
+.list.stacked-label textarea {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   overflow: hidden;
   padding: 4px 8px 3px;
-  border: 1px solid #cccccc;
-  background-color: white; }
+  border: none;
+  background-color: white;
+  box-shadow: inset 0 0 1px #666666; }
 
-.input-group.stacked-label input {
+.list.stacked-label input {
   height: 46px; }
 
 select,
@@ -2703,7 +2709,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
diff --git a/scss/ionic-ios7/ionic-ios7.scss b/scss/ionic-ios7/ionic-ios7.scss
index 00a947e345..e4ab13f814 100644
--- a/scss/ionic-ios7/ionic-ios7.scss
+++ b/scss/ionic-ios7/ionic-ios7.scss
@@ -18,7 +18,6 @@
   "../ionic/modal",
   "../ionic/items",
   "../ionic/list",
-  "../ionic/card",
 
   // Forms
   "../ionic/form",
diff --git a/scss/ionic/_card.scss b/scss/ionic/_card.scss
deleted file mode 100644
index 9925756250..0000000000
--- a/scss/ionic/_card.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-
-// Cards
-// --------------------------------------------------
-
-.card {
-  overflow: hidden;
-  margin: ($content-padding * 2) $content-padding;
-  background-color: $card-body-bg;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
-  border-radius: $card-border-radius;
-}
-.card .item {
-  margin-left: 0;
-  margin-right: 0;
-
-  &:first-child {
-    margin-top: 0;
-    border-top-left-radius: $card-border-radius;
-    border-top-right-radius: $card-border-radius;
-
-    .item-content {
-      border-top-left-radius: $card-border-radius;
-      border-top-right-radius: $card-border-radius;
-    }
-  }
-  &:last-child {
-    margin-bottom: 0;
-    border-bottom-left-radius: $card-border-radius;
-    border-bottom-right-radius: $card-border-radius;
-
-    .item-content {
-      border-bottom-left-radius: $card-border-radius;
-      border-bottom-right-radius: $card-border-radius;
-    }
-  }
-}
-.card.list .item:last-child {
-  margin-bottom: $item-border-width * -1;
-}
-.card.list .item-divider {
-  margin-right: 0;
-  margin-left: 0;
-}
\ No newline at end of file
diff --git a/scss/ionic/_form.scss b/scss/ionic/_form.scss
index 14e8fbc796..8280b56808 100644
--- a/scss/ionic/_form.scss
+++ b/scss/ionic/_form.scss
@@ -42,32 +42,10 @@ textarea {
 }
 
 
-// Input groups
+// Input List
 // -------------------------------
 
-.input-group {
-  display: block;
-  overflow: hidden;
-  border-top: $input-border-width solid $input-border-color;
-  border-bottom: $input-border-width solid $input-border-color;
-  background-color: $input-bg;
-}
-.padded > .input-group,
-.input-group.margin {
-  @include border-radius($input-border-radius);
-  border-right: $input-border-width solid $input-border-color;
-  border-left: $input-border-width solid $input-border-color;
-}
-
-.input-group .input-row + .input-row {
-  border-top: $input-border-width solid $input-border-color;
-}
-
-.input-group + .input-group {
-  margin-top: $content-padding;
-}
-
-.input-row {
+.item-input {
   position: relative;
   display: -webkit-flex;
   display: flex;
@@ -101,11 +79,11 @@ textarea {
   }
 }
 
-.input-group.stacked-label,
-.input-group.stacked-label .input-row {
+.list.stacked-label,
+.list.stacked-label .item-input {
   display: block;
-  border: 0;
   background-color: transparent;
+  box-shadow: none;
 
   .input-label, [class^="icon-"], [class*=" icon-"] {
     display: inline-block;
@@ -114,16 +92,17 @@ textarea {
   }
 }
 
-.input-group.stacked-label input,
-.input-group.stacked-label textarea
+.list.stacked-label input,
+.list.stacked-label textarea
 {
-  @include border-radius($input-border-radius);
+  @include border-radius(2px);
   overflow: hidden;
   padding: 4px 8px 3px;
-  border: $input-border-width solid $input-border-color;
-  background-color: $input-bg; 
+  border: none;
+  background-color: $input-bg;
+  box-shadow: $item-box-shadow; 
 }
-.input-group.stacked-label input {
+.list.stacked-label input {
   height: $line-height-computed + $font-size-base + 12px;
 }
 
@@ -211,7 +190,7 @@ input[type="file"] {
 
 // Make select elements obey height by applying a border
 select {
-  border: $input-border-width solid $input-border-color;
+  border: 1px solid #ccc;
   background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
 }
 
diff --git a/scss/ionic/_items.scss b/scss/ionic/_items.scss
index a5df18d29f..a0323f4f6c 100644
--- a/scss/ionic/_items.scss
+++ b/scss/ionic/_items.scss
@@ -12,7 +12,7 @@
   border: none;
 
   background-color: $list-default-background;
-  box-shadow: inset 0 0 $item-border-width #666;
+  box-shadow: $item-box-shadow;
 
   // Align badges within list items
   .badge {
@@ -76,7 +76,7 @@ a.item {
 
   border: none;
   background-color: #fff;
-  box-shadow: inset 0 0 $item-border-width #666;
+  box-shadow: $item-box-shadow;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: $list-font-size;
@@ -255,7 +255,7 @@ button.item-icon-right {
   padding: $item-divider-padding;
   border: none;
   background-color: $item-divider-bg;
-  box-shadow: inset 0 0 $item-border-width #666;
+  box-shadow: $item-box-shadow;
   color: $item-divider-color;
   font-weight: bold;
 }
diff --git a/scss/ionic/_list.scss b/scss/ionic/_list.scss
index 0a48beb607..9b0ae6275c 100644
--- a/scss/ionic/_list.scss
+++ b/scss/ionic/_list.scss
@@ -5,13 +5,10 @@
 .list {
   position: relative;
   overflow: hidden;
-  // No need to set list-style: none; since .list-item is block level
   margin-bottom: 20px;
   padding-top: $item-border-width;
   padding-bottom: $item-border-width;
   padding-left: 0; // reset padding because ul and ol
-
-  // make room for the list item borders
 }
 
 /**
@@ -65,3 +62,70 @@
   color: #aaa;
   font-size: 14px;
 }
+
+
+// Cards / Inset Lists
+// --------------------------------------------------
+/*
+  A card and list-inset are close to the same thing, except a card as a box shadow.
+*/
+
+.card, 
+.list-inset {
+  overflow: hidden;
+  margin: ($content-padding * 2) $content-padding;
+  background-color: $card-body-bg;
+  border-radius: $card-border-radius;
+}
+
+.card {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
+}
+
+.card .item,
+.list-inset .item,
+.padding > .list .item
+{
+  margin-left: 0;
+  margin-right: 0;
+
+  &:first-child {
+    margin-top: 0;
+    border-top-left-radius: $card-border-radius;
+    border-top-right-radius: $card-border-radius;
+
+    .item-content {
+      border-top-left-radius: $card-border-radius;
+      border-top-right-radius: $card-border-radius;
+    }
+  }
+  &:last-child {
+    margin-bottom: 0;
+    border-bottom-left-radius: $card-border-radius;
+    border-bottom-right-radius: $card-border-radius;
+
+    .item-content {
+      border-bottom-left-radius: $card-border-radius;
+      border-bottom-right-radius: $card-border-radius;
+    }
+  }
+}
+
+.card.list .item:last-child, 
+.list-inset .item:last-child {
+  margin-bottom: $item-border-width * -1;
+}
+
+.card.list .item-divider,
+.list-inset .item-divider,
+.padding > .list .item,
+.padding-horizontal > .list .item {
+  margin-right: 0;
+  margin-left: 0;
+}
+.padding-left > .list .item {
+  margin-left: 0;
+}
+.padding-right > .list .item {
+  margin-right: 0;
+}
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index 6246b9c494..d0ad74ace5 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -124,19 +124,12 @@ $input-bg-disabled:               $gray-lighter !default;
 
 $input-color:                     $gray !default;
 $input-label-color:               $black !default;
-$input-border-color:              #ccc !default;
-$input-border-width:              1px !default;
-$input-border-radius:             2px !default;
-$input-border-focus:              #66afe9 !default;
 
 $input-color-placeholder:         $gray-light !default;
 
 $legend-color:                    $gray-dark !default;
 $legend-border-color:             #e5e5e5 !default;
 
-$input-group-addon-bg:            $gray-lighter !default;
-$input-group-addon-border-color:  $input-border-color !default;
-
 
 // Toggle
 // -------------------------------
@@ -390,7 +383,8 @@ $card-border-radius:        2px !default;
 // -------------------------------
 
 $item-border-width:            1px !default;
-$item-border-color:            #ddd;
+$item-border-color:            #666;
+$item-box-shadow:              inset 0 0 $item-border-width $item-border-color;
 $item-padding:                 15px !default;
 
 $item-divider-bg:              #f5f5f5;
diff --git a/scss/ionic/ionic-scoped.scss b/scss/ionic/ionic-scoped.scss
index f69e26e762..9954897519 100644
--- a/scss/ionic/ionic-scoped.scss
+++ b/scss/ionic/ionic-scoped.scss
@@ -24,7 +24,6 @@
   "modal",
   "items",
   "list",
-  "card",
 
   // Forms
   "form",
diff --git a/scss/ionic/ionic.scss b/scss/ionic/ionic.scss
index 60e840e68f..2dbedfb63b 100644
--- a/scss/ionic/ionic.scss
+++ b/scss/ionic/ionic.scss
@@ -23,7 +23,6 @@
   "popup",
   "items",
   "list",
-  "card",
 
   // Forms
   "form",
diff --git a/test/input-text.html b/test/input-text.html
index 7d8f651bab..34ffd89ee8 100644
--- a/test/input-text.html
+++ b/test/input-text.html
@@ -23,55 +23,68 @@
         <div class="content has-header has-footer">
 
           <h3>Default Text Input, Not Inset, No Content Padding</h3>
-          <div class="input-group">
-            <label class="input-row">
+          <div class="list">
+            <label class="item item-input">
               <input type="text" placeholder="First Name">
             </label>
-            <label class="input-row">
+            <label class="item item-input">
               <input type="text" placeholder="Last Name">
             </label>
-            <label class="input-row">
+            <label class="item item-input">
               <input type="email" placeholder="Email">
             </label>
           </div>
 
-          <h3>Default Text Input, Is Inset, No Content Padding</h3>
-          <div class="input-group margin">
-            <label class="input-row">
+          <h3>Default Text Input, list-inset, No Content Padding</h3>
+          <div class="list list-inset">
+            <label class="item item-input">
               <input type="text" placeholder="First Name">
             </label>
-            <label class="input-row">
+            <label class="item item-input">
               <input type="text" placeholder="Last Name">
             </label>
-            <label class="input-row">
+            <label class="item item-input">
+              <input type="email" placeholder="Email">
+            </label>
+          </div>
+
+          <h3>Default Text Input, card, No Content Padding</h3>
+          <div class="list card">
+            <label class="item item-input">
+              <input type="text" placeholder="First Name">
+            </label>
+            <label class="item item-input">
+              <input type="text" placeholder="Last Name">
+            </label>
+            <label class="item item-input">
               <input type="email" placeholder="Email">
             </label>
           </div>
 
           <div class="padding">
 
-            <h3>Default Text Input, Not Inset, With Content Padding</h3>
-            <div class="input-group">
-              <label class="input-row">
+            <h3>Default Text Input, With Parent Content Padding</h3>
+            <div class="list">
+              <label class="item item-input">
                 <input type="text" placeholder="Username">
               </label>
-              <label class="input-row">
+              <label class="item item-input">
                 <input type="email" placeholder="Email">
               </label>
             </div>
 
-            <div class="input-group">
-              <label class="input-row">
+            <div class="list">
+              <label class="item item-input">
                 <input type="text" placeholder="Filter by name">
               </label>
             </div>
 
-            <h3>Default Text Input, Is Inset, With Content Padding</h3>
-            <div class="input-group margin">
-              <label class="input-row">
+            <h3>Default Text Input, list-inset, With Parent Content Padding</h3>
+            <div class="list list-inset">
+              <label class="item item-input">
                 <input type="email" placeholder="Email">
               </label>
-              <label class="input-row">
+              <label class="item item-input">
                 <input type="text" placeholder="Name">
               </label>
             </div>
@@ -81,40 +94,40 @@
 
 
 
-          <h3>Label left of input, Not Inset, No Content Padding</h3>
-          <div class="input-group">
-            <label class="input-row">
+          <h3>Label left of input, No Parent Content Padding</h3>
+          <div class="list">
+            <label class="item item-input">
               <span class="input-label">Username</span>
               <input type="text" placeholder="@drifty">
             </label>
-            <label class="input-row">
+            <label class="item item-input">
               <span class="input-label">Email</span>
               <input type="email" placeholder="your@email.com">
             </label>
-            <label class="input-row">
+            <label class="item item-input">
               <span class="input-label">First Name</span>
               <input type="text" placeholder="Sir Derp">
             </label>
           </div>
 
 
-          <h3>Label left of input, Not Inset, No Content Padding</h3>
-          <div class="input-group">
-            <label class="input-row">
+          <h3>Label left of input, No Parent Content Padding</h3>
+          <div class="list">
+            <label class="item item-input">
               <i class="icon-person"></i>
               <span class="input-label">Username</span>
               <input type="text" placeholder="@drifty">
             </label>
-            <label class="input-row">
+            <label class="item item-input">
               <i class="icon-email"></i>
               <span class="input-label">Email</span>
               <input type="email" placeholder="your@email.com">
             </label>
           </div>
 
-          <h3>Inline Label On Top Of Text Input, Is Inset, No Content Padding</h3>
-          <div class="input-group margin">
-            <label class="input-row">
+          <h3>Inline Label On Top Of Text Input, list-inset, No Parent Content Padding</h3>
+          <div class="list list-inset">
+            <label class="item item-input">
               <span class="input-label">Email</span>
               <input type="text" placeholder="your@email.com">
             </label>
@@ -122,27 +135,27 @@
 
           <div class="padding">
 
-            <h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
-            <div class="input-group">
-              <label class="input-row">
+            <h3>Inline Label On Top Of Text Input, With Parent Content Padding</h3>
+            <div class="list">
+              <label class="item item-input">
                 <span class="input-label">First Name</span>
                 <input type="text" placeholder="John">
               </label>
-              <label class="input-row">
+              <label class="item item-input">
                 <span class="input-label">Last Name</span>
                 <input type="text" placeholder="Suhr">
               </label>
             </div>
 
-            <h3>Inline Label On Top Of Text Input, Is Inset, With Content Padding</h3>
-            <div class="input-group margin">
-              <label class="input-row">
+            <h3>Inline Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
+            <div class="list list-inset">
+              <label class="item item-input">
                 <span class="input-label">Email</span>
                 <input type="text" placeholder="your@email.com">
               </label>
             </div>
-            <div class="input-group margin">
-              <label class="input-row">
+            <div class="list list-inset">
+              <label class="item item-input">
                 <span class="input-label">Filter By Name</span>
                 <input type="text" placeholder="Enter keywords">
               </label>
@@ -153,31 +166,31 @@
 
 
 
-          <h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
-          <div class="input-group stacked-label">
-            <label class="input-row">
+          <h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
+          <div class="list stacked-label">
+            <label class="item item-input">
               <span class="input-label">First Name</span>
               <input type="text" placeholder="Drifty">
             </label>
-            <label class="input-row">
+            <label class="item item-input">
               <span class="input-label">Last Name</span>
               <input type="text" placeholder="Co">
             </label>
-            <label class="input-row">
+            <label class="item item-input">
               <span class="input-label">Email</span>
               <input type="text" placeholder="your@email.com">
             </label>
           </div>
-          <div class="input-group stacked-label">
-            <label class="input-row">
+          <div class="list stacked-label">
+            <label class="item item-input">
               <span class="input-label">Filter By Name</span>
               <input type="text" placeholder="">
             </label>
           </div>
 
-          <h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
-          <div class="input-group stacked-label margin">
-            <label class="input-row">
+          <h3>Stacked Label On Top Of Text Input, list-inset, No Parent Content Padding</h3>
+          <div class="list stacked-label list-inset">
+            <label class="item item-input">
               <span class="input-label">Email</span>
               <input type="text" placeholder="your@email.com">
             </label>
@@ -185,17 +198,17 @@
 
           <div class="padding">
 
-            <h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
-            <div class="input-group stacked-label">
-              <label class="input-row">
+            <h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
+            <div class="list stacked-label">
+              <label class="item item-input">
                 <span class="input-label">Email</span>
                 <input type="text" placeholder="your@email.com">
               </label>
             </div>
 
-            <h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
-            <div class="input-group stacked-label margin">
-              <label class="input-row">
+            <h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
+            <div class="list stacked-label list-inset">
+              <label class="item item-input">
                 <span class="input-label">Email</span>
                 <input type="text" placeholder="your@email.com">
               </label>
@@ -203,26 +216,26 @@
 
           </div>
 
-          <h3>Default Text Input, Not Inset, No Content Padding</h3>
-          <div class="input-group">
-            <label class="input-row">
+          <h3>Default Text Input, No Parent Content Padding</h3>
+          <div class="list">
+            <label class="item item-input">
               <i class="icon-search placeholder-icon"></i>
               <input type="search" placeholder="Search">
             </label>
           </div>
 
-          <h3>Default Text Input, Is Inset, No Content Padding</h3>
-          <div class="input-group margin">
-            <label class="input-row">
+          <h3>Default Text Input, list-inset, No Parent Content Padding</h3>
+          <div class="list list-inset">
+            <label class="item item-input">
               <i class="icon-star placeholder-icon"></i>
               <input type="text" placeholder="Favorites">
             </label>
           </div>
 
 
-          <h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
-          <div class="input-group stacked-label">
-            <label class="input-row">
+          <h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
+          <div class="list stacked-label">
+            <label class="item item-input">
               <i class="icon-email"></i> 
               <span class="input-label">Email</span>
               <input type="text" placeholder="your@email.com">
@@ -231,18 +244,18 @@
 
           <div class="padding">
 
-            <h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
-            <div class="input-group stacked-label">
-              <label class="input-row">
+            <h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
+            <div class="list stacked-label">
+              <label class="item item-input">
                 <i class="icon-cloud"></i> 
                 <span class="input-label">SaaS</span>
                 <input type="text" placeholder="Codiqa">
               </label>
             </div>
 
-            <h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
-            <div class="input-group stacked-label margin">
-              <label class="input-row">
+            <h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
+            <div class="list stacked-label list-inset">
+              <label class="item item-input">
                 <i class="icon-headphone"></i> 
                 <span class="input-label">Favorite Music</span>
                 <input type="text" placeholder="Bee Gees">