From bd0d2987203c14f5be58325a1939e45ed71c41ca Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Mon, 4 Nov 2013 08:34:59 -0600
Subject: [PATCH] item buttons

---
 dist/css/ionic-ios7.css   | 56 ++++++++++++++++++++++++++++++++++++++-
 dist/css/ionic-scoped.css | 52 +++++++++++++++++++++++++++++++++++-
 dist/css/ionic.css        | 56 ++++++++++++++++++++++++++++++++++++++-
 scss/ionic/_items.scss    | 54 ++++++++++++++++++++++++++++++++++++-
 test/lists.html           | 15 ++++++++---
 5 files changed, 225 insertions(+), 8 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index a29c1f8bc5..c1b054d4ab 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -1245,6 +1245,58 @@ button.item:active,
 .item.active {
   background-color: #F7F7F7; }
 
+.item-button-left {
+  padding-left: 75px; }
+
+.item-button-left > .button,
+.item-button-left .item-content > .button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -moz-align-items: center;
+  align-items: center;
+  position: absolute;
+  top: 7.5px;
+  left: 7.5px;
+  font-size: 32px;
+  min-height: 32px; }
+  .item-button-left > .button i,
+  .item-button-left .item-content > .button i {
+    position: relative;
+    line-height: 31px;
+    left: auto; }
+
+.item-button-right {
+  padding-right: 75px; }
+
+.item-button-right > .button,
+.item-button-right .item-content > .button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -moz-align-items: center;
+  align-items: center;
+  position: absolute;
+  top: 7.5px;
+  right: 15px;
+  font-size: 32px;
+  min-height: 32px; }
+  .item-button-right > .button i,
+  .item-button-right .item-content > .button i {
+    position: relative;
+    line-height: 31px;
+    left: auto; }
+
 a.item:after,
 button.item:after {
   /* By default, both <a> and <button> have right side arrow icons */
@@ -1275,7 +1327,9 @@ button.item:after {
   -webkit-font-smoothing: antialiased; }
 
 a.item-icon-right:after,
-button.item-icon-right:after {
+button.item-icon-right:after,
+a.item-button-right:after,
+button.item-button-right:after {
   display: none; }
 
 .item-avatar {
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 2fa3c3be26..c9791901ab 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -2125,6 +2125,54 @@
   .ionic button.item:active,
   .ionic .item.active {
     background-color: #F7F7F7; }
+  .ionic .item-button-left {
+    padding-left: 75px; }
+  .ionic .item-button-left > .button,
+  .ionic .item-button-left .item-content > .button {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    -moz-align-items: center;
+    align-items: center;
+    position: absolute;
+    top: 7.5px;
+    left: 7.5px;
+    font-size: 32px;
+    min-height: 32px; }
+    .ionic .item-button-left > .button i,
+    .ionic .item-button-left .item-content > .button i {
+      position: relative;
+      line-height: 31px;
+      left: auto; }
+  .ionic .item-button-right {
+    padding-right: 75px; }
+  .ionic .item-button-right > .button,
+  .ionic .item-button-right .item-content > .button {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    -moz-align-items: center;
+    align-items: center;
+    position: absolute;
+    top: 7.5px;
+    right: 15px;
+    font-size: 32px;
+    min-height: 32px; }
+    .ionic .item-button-right > .button i,
+    .ionic .item-button-right .item-content > .button i {
+      position: relative;
+      line-height: 31px;
+      left: auto; }
   .ionic a.item:after,
   .ionic button.item:after {
     /* By default, both <a> and <button> have right side arrow icons */
@@ -2154,7 +2202,9 @@
     speak: none;
     -webkit-font-smoothing: antialiased; }
   .ionic a.item-icon-right:after,
-  .ionic button.item-icon-right:after {
+  .ionic button.item-icon-right:after,
+  .ionic a.item-button-right:after,
+  .ionic button.item-button-right:after {
     display: none; }
   .ionic .item-avatar {
     padding-left: 70px;
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 85f7d260c1..e2ac4a0b4e 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2648,6 +2648,58 @@ button.item:active,
 .item.active {
   background-color: #F7F7F7; }
 
+.item-button-left {
+  padding-left: 75px; }
+
+.item-button-left > .button,
+.item-button-left .item-content > .button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -moz-align-items: center;
+  align-items: center;
+  position: absolute;
+  top: 7.5px;
+  left: 7.5px;
+  font-size: 32px;
+  min-height: 32px; }
+  .item-button-left > .button i,
+  .item-button-left .item-content > .button i {
+    position: relative;
+    line-height: 31px;
+    left: auto; }
+
+.item-button-right {
+  padding-right: 75px; }
+
+.item-button-right > .button,
+.item-button-right .item-content > .button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -moz-align-items: center;
+  align-items: center;
+  position: absolute;
+  top: 7.5px;
+  right: 15px;
+  font-size: 32px;
+  min-height: 32px; }
+  .item-button-right > .button i,
+  .item-button-right .item-content > .button i {
+    position: relative;
+    line-height: 31px;
+    left: auto; }
+
 a.item:after,
 button.item:after {
   /* By default, both <a> and <button> have right side arrow icons */
@@ -2678,7 +2730,9 @@ button.item:after {
   -webkit-font-smoothing: antialiased; }
 
 a.item-icon-right:after,
-button.item-icon-right:after {
+button.item-icon-right:after,
+a.item-button-right:after,
+button.item-button-right:after {
   display: none; }
 
 .item-avatar {
diff --git a/scss/ionic/_items.scss b/scss/ionic/_items.scss
index d20f3a4636..d09444ae92 100644
--- a/scss/ionic/_items.scss
+++ b/scss/ionic/_items.scss
@@ -225,6 +225,56 @@ button.item:active,
   background-color: #F7F7F7;
 }
 
+
+// Item Button
+// -------------------------------
+
+.item-button-left {
+  padding-left: $item-padding * 5;
+}
+
+.item-button-left > .button,
+.item-button-left .item-content > .button {
+  @include display-flex();
+  @include align-items(center);
+  position: absolute;
+  top: $item-padding / 2;
+  left: $item-padding / 2;
+  font-size: $item-icon-font-size;
+  min-height: $item-icon-font-size;
+
+  i {
+    position: relative;
+    line-height: $item-icon-font-size - 1;
+    left: auto;
+  }
+}
+
+.item-button-right {
+  padding-right: $item-padding * 5;
+}
+
+.item-button-right > .button,
+.item-button-right .item-content > .button {
+  @include display-flex();
+  @include align-items(center);
+  position: absolute;
+  top: $item-padding / 2;
+  right: $item-padding;
+  font-size: $item-icon-font-size;
+  min-height: $item-icon-font-size;
+
+  i {
+    position: relative;
+    line-height: $item-icon-font-size - 1;
+    left: auto;
+  }
+}
+
+
+// Auto Right Arrow Icon
+// -------------------------------
+
 a.item:after,
 button.item:after {
   /* By default, both <a> and <button> have right side arrow icons */
@@ -249,7 +299,9 @@ button.item:after {
 
 // do not show the default right arrow when they want their own right side icon
 a.item-icon-right:after,
-button.item-icon-right:after {
+button.item-icon-right:after,
+a.item-button-right:after,
+button.item-button-right:after {
   display: none;
 }
 
diff --git a/test/lists.html b/test/lists.html
index 8b2f3df56b..e6e78d1353 100644
--- a/test/lists.html
+++ b/test/lists.html
@@ -53,12 +53,19 @@
             <span class="badge badge-info">5</span>
           </a>
 
-          <a href="#" class="item item-icon-left">
+          <a href="#" class="item item-icon-left item-button-right">
             <i class="icon-chatbubble-working icon-primary"></i>
             Call Ma
-            <span class="item-note">
-              Cell
-            </span>
+            <button class="button button-success">
+              <i class="icon-ios7-telephone"></i>
+            </button>
+          </a>
+
+          <a href="#" class="item item-button-left">
+            <button class="button button-success">
+              <i class="icon-ios7-telephone"></i>
+            </button>
+            Me Button
           </a>
 
           <a href="#" class="item item-icon-left">