From b3445155aa5f1e999ea787d7835925ace0ade165 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@codiqa.com>
Date: Wed, 6 Nov 2013 09:55:16 -0600
Subject: [PATCH] Slight tweak for item editing

---
 dist/css/ionic-ios7.css       | 57 ++++++++++++++++++++---------------
 dist/css/ionic-scoped.css     | 57 ++++++++++++++++++++---------------
 dist/css/ionic.css            | 57 ++++++++++++++++++++---------------
 dist/js/ionic-angular.js      |  1 -
 js/ext/angular/test/list.html |  2 +-
 scss/ionic/_items.scss        | 21 +++++++------
 scss/ionic/_list.scss         |  7 -----
 7 files changed, 109 insertions(+), 93 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 0ab142cb1f..7e81972071 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -182,7 +182,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -518,13 +518,13 @@ address {
   font-style: normal;
   line-height: 1.42857; }
 
-a.subdued‎ {
+a.subduedΓÇÄ {
   padding-right: 10px;
   color: #555555;
   text-decoration: none; }
-  a.subdued‎:hover {
+  a.subduedΓÇÄ:hover {
     text-decoration: none; }
-  a.subdued‎:last-child {
+  a.subduedΓÇÄ:last-child {
     padding-right: 0; }
 
 .bar {
@@ -1407,24 +1407,36 @@ button.item-button-right:after {
 .item-edit {
   position: absolute;
   top: 0;
-  left: -48px;
+  left: 8px;
   z-index: 0;
   width: 48px;
   height: 100%;
   line-height: 100%;
-  opacity: 0;
   -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
   .item-edit .button {
     height: 100%; }
-  .item-edit .icon {
-    color: #ef4e3a;
-    font-size: 24px; }
+    .item-edit .button .icon, .item-edit .button i {
+      color: #ef4e3a;
+      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;
+      font-size: 24px;
+      position: absolute;
+      top: 0;
+      height: 100%; }
   .item-edit.ng-enter {
     left: -48px;
     opacity: 0;
     -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
   .item-edit.ng-enter-active {
-    left: 0;
+    left: 8px;
     opacity: 1; }
   .item-edit.ng-leave {
     left: 0px;
@@ -1475,11 +1487,6 @@ button.item-button-right:after {
 .list-editing .item-content {
   margin-right: 50px;
   margin-left: 50px; }
-.list-editing .item-edit {
-  left: 0px;
-  opacity: 1; }
-  .list-editing .item-edit i {
-    left: 5px; }
 
 .list-header {
   margin-top: 20px;
@@ -1733,7 +1740,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
@@ -1805,7 +1812,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition-delay: 0s, .05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1820,7 +1827,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }
 
 .item-radio {
   padding: 0; }
@@ -2141,7 +2148,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px white; }
+    text-shadow: 0px 0px 10px #fff; }
 
 .padding > .button.block:first-child {
   margin-top: 0; }
@@ -2461,9 +2468,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .ion-loading:before {
     content: "\e144"; }
 
@@ -2476,9 +2483,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .ion-refreshing:before {
     content: "\e144"; }
 
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index fff0a8b5b8..f3389e67f3 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -1680,7 +1680,7 @@
   .ionic fieldset {
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
-    border: 1px solid silver; }
+    border: 1px solid #c0c0c0; }
   .ionic legend {
     padding: 0;
     /* 2 */
@@ -1911,13 +1911,13 @@
     margin-bottom: 20px;
     font-style: normal;
     line-height: 1.42857; }
-  .ionic a.subdued‎ {
+  .ionic a.subduedΓÇÄ {
     padding-right: 10px;
     color: #555555;
     text-decoration: none; }
-    .ionic a.subdued‎:hover {
+    .ionic a.subduedΓÇÄ:hover {
       text-decoration: none; }
-    .ionic a.subdued‎:last-child {
+    .ionic a.subduedΓÇÄ:last-child {
       padding-right: 0; }
   .ionic .action-sheet {
     position: fixed;
@@ -2745,24 +2745,36 @@
   .ionic .item-edit {
     position: absolute;
     top: 0;
-    left: -48px;
+    left: 8px;
     z-index: 0;
     width: 48px;
     height: 100%;
     line-height: 100%;
-    opacity: 0;
     -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
     .ionic .item-edit .button {
       height: 100%; }
-    .ionic .item-edit .icon {
-      color: #ef4e3a;
-      font-size: 24px; }
+      .ionic .item-edit .button .icon, .ionic .item-edit .button i {
+        color: #ef4e3a;
+        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;
+        font-size: 24px;
+        position: absolute;
+        top: 0;
+        height: 100%; }
     .ionic .item-edit.ng-enter {
       left: -48px;
       opacity: 0;
       -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
     .ionic .item-edit.ng-enter-active {
-      left: 0;
+      left: 8px;
       opacity: 1; }
     .ionic .item-edit.ng-leave {
       left: 0px;
@@ -2801,11 +2813,6 @@
   .ionic .list-editing .item-content {
     margin-right: 50px;
     margin-left: 50px; }
-  .ionic .list-editing .item-edit {
-    left: 0px;
-    opacity: 1; }
-    .ionic .list-editing .item-edit i {
-      left: 5px; }
   .ionic .list-header {
     margin-top: 20px;
     padding: 5px 15px;
@@ -3028,7 +3035,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] {
@@ -3077,7 +3084,7 @@
       border-radius: 50%;
       background: white;
       content: ' ';
-      transition: background-color 0.1s ease-in-out; }
+      transition: background-color .1s ease-in-out; }
   .ionic .checkbox input:after {
     position: absolute;
     top: 34%;
@@ -3090,7 +3097,7 @@
     border-right: 0;
     content: ' ';
     opacity: 0;
-    transition: opacity 0.05s ease-in-out;
+    transition: opacity .05s ease-in-out;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg); }
   .ionic .checkbox input:checked:before {
@@ -3464,7 +3471,7 @@
     .ionic .button-icon:active, .ionic .button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px white; }
+      text-shadow: 0px 0px 10px #fff; }
   .ionic .padding > .button.block:first-child {
     margin-top: 0; }
   .ionic .button-full,
@@ -3692,9 +3699,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin 0.75s linear infinite;
-    animation: spin 0.75s linear infinite; }
+    -webkit-animation: spin .75s linear infinite;
+    -moz-animation: spin .75s linear infinite;
+    animation: spin .75s linear infinite; }
     .ionic .ion-loading:before {
       content: "\e144"; }
   .ionic .ion-refreshing {
@@ -3706,9 +3713,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin 0.75s linear infinite;
-    animation: spin 0.75s linear infinite; }
+    -webkit-animation: spin .75s linear infinite;
+    -moz-animation: spin .75s linear infinite;
+    animation: spin .75s linear infinite; }
     .ionic .ion-refreshing:before {
       content: "\e144"; }
   .ionic .hidden,
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 429e2dc2d6..08516c0ffc 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2013,7 +2013,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -2349,13 +2349,13 @@ address {
   font-style: normal;
   line-height: 1.42857; }
 
-a.subdued‎ {
+a.subduedΓÇÄ {
   padding-right: 10px;
   color: #555555;
   text-decoration: none; }
-  a.subdued‎:hover {
+  a.subduedΓÇÄ:hover {
     text-decoration: none; }
-  a.subdued‎:last-child {
+  a.subduedΓÇÄ:last-child {
     padding-right: 0; }
 
 .action-sheet {
@@ -3302,24 +3302,36 @@ button.item-button-right:after {
 .item-edit {
   position: absolute;
   top: 0;
-  left: -48px;
+  left: 8px;
   z-index: 0;
   width: 48px;
   height: 100%;
   line-height: 100%;
-  opacity: 0;
   -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
   .item-edit .button {
     height: 100%; }
-  .item-edit .icon {
-    color: #ef4e3a;
-    font-size: 24px; }
+    .item-edit .button .icon, .item-edit .button i {
+      color: #ef4e3a;
+      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;
+      font-size: 24px;
+      position: absolute;
+      top: 0;
+      height: 100%; }
   .item-edit.ng-enter {
     left: -48px;
     opacity: 0;
     -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
   .item-edit.ng-enter-active {
-    left: 0;
+    left: 8px;
     opacity: 1; }
   .item-edit.ng-leave {
     left: 0px;
@@ -3370,11 +3382,6 @@ button.item-button-right:after {
 .list-editing .item-content {
   margin-right: 50px;
   margin-left: 50px; }
-.list-editing .item-edit {
-  left: 0px;
-  opacity: 1; }
-  .list-editing .item-edit i {
-    left: 5px; }
 
 .list-header {
   margin-top: 20px;
@@ -3628,7 +3635,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
@@ -3683,7 +3690,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color 0.1s ease-in-out; }
+    transition: background-color .1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -3698,7 +3705,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity 0.05s ease-in-out;
+  transition: opacity .05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -4114,7 +4121,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px white; }
+    text-shadow: 0px 0px 10px #fff; }
 
 .padding > .button.block:first-child {
   margin-top: 0; }
@@ -4691,9 +4698,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .ion-loading:before {
     content: "\e144"; }
 
@@ -4706,9 +4713,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .ion-refreshing:before {
     content: "\e144"; }
 
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index c9ae6a73f4..89a6ba2e23 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -902,7 +902,6 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 
 })();
 ;
-;
 (function() {
 'use strict';
 
diff --git a/js/ext/angular/test/list.html b/js/ext/angular/test/list.html
index 28fbdda787..4af067361d 100644
--- a/js/ext/angular/test/list.html
+++ b/js/ext/angular/test/list.html
@@ -64,7 +64,7 @@
   <body>
 
     <content ng-controller="TestCtrl" class="reveal-animation">
-      <list is-editing="isEditingItems" on-refresh-holding="almostRefreshing()" on-refresh-opening="almostRefreshProjects(ratio)" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="ion ion-minus-circled" reorder-icon="icon-navicon">
+      <list is-editing="isEditingItems" on-refresh-holding="almostRefreshing()" on-refresh-opening="almostRefreshProjects(ratio)" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
         <list-refresher>
         </list-refresher>
         <list-item ng-repeat="item in items" 
diff --git a/scss/ionic/_items.scss b/scss/ionic/_items.scss
index 970ef6cc0b..914268508e 100644
--- a/scss/ionic/_items.scss
+++ b/scss/ionic/_items.scss
@@ -431,22 +431,25 @@ button.item-button-right:after {
 .item-edit {
   position: absolute;
   top: 0;
-  left: -48px;
+  left: 8px;
   z-index: 0;
   width: 48px;
   height: 100%;
   line-height: 100%;
-  opacity: 0;
 
   -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
 
   .button {
     height: 100%;
-  }
-
-  .icon {
-    color: $brand-danger;
-    font-size: 24px;
+    .icon, i {
+      color: $brand-danger;
+      @include display-flex();
+      @include align-items(center);
+      font-size: 24px;
+      position: absolute;
+      top: 0;
+      height: 100%;
+    }
   }
 
   &.ng-enter {
@@ -455,7 +458,7 @@ button.item-button-right:after {
     -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
   }
   &.ng-enter-active {
-    left: 0;
+    left: 8px;
     opacity: 1;
   }
   &.ng-leave {
@@ -498,4 +501,4 @@ button.item-button-right:after {
     border: none;
     border-radius: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/scss/ionic/_list.scss b/scss/ionic/_list.scss
index a3231692b7..6e9e52eb10 100644
--- a/scss/ionic/_list.scss
+++ b/scss/ionic/_list.scss
@@ -20,13 +20,6 @@
     margin-right: 50px;
     margin-left: 50px;
   }
-  .item-edit {
-    left: 0px;
-    opacity: 1;
-    i {
-      left: 5px;
-    }
-  }
 }