hover state for back button, closes #1094

css/app.css

@@ -212,19 +212,6 @@ table.tags, table.tags td, table.tags th {
 .col10   { float:left; width:83.3333%; }
 .col11   { float:left; width:91.6666%; }
 .col12   { float:left; width:100.0000%; }
-.margin0  { margin-left: 04.1666%; }
-.margin1  { margin-left: 08.3333%; }
-.margin2  { margin-left: 16.6666%; }
-.margin3  { margin-left: 25.0000%; }
-.margin4  { margin-left: 33.3333%; }
-.margin5  { margin-left: 41.6666%; }
-.margin6  { margin-left: 50.0000%; }
-.margin7  { margin-left: 58.3333%; }
-.margin8  { margin-left: 66.6666%; }
-.margin9  { margin-left: 75.0000%; }
-.margin10 { margin-left: 83.3333%; }
-.margin11 { margin-left: 91.6666%; }
-.margin12 { margin-left: 100.0000%; }
 
 /* UI Lists
 ------------------------------------------------------- */
@@ -340,9 +327,9 @@ button {
     display: inline-block;
     height:40px;
     border-radius:4px;
-    -webkit-transition: background 100ms;
-    -moz-transition: background 100ms;
-    transition: background 100ms;
+    -webkit-transition: all 200ms;
+       -moz-transition: all 200ms;
+            transition: all 200ms;
 }
 
 button:focus,
@@ -507,8 +494,7 @@ button[disabled] .label {
 .icon.add-line   { background-position: -40px 0px;}
 .icon.add-area   { background-position: -60px 0px;}
 .icon.undo       { background-position: -80px 0px;}
-.icon.redo      { background-position: -100px 0px;}
-
+.icon.redo       { background-position: -100px 0px;}
 .icon.apply      { background-position: -120px 0px;}
 .icon.save       { background-position: -140px 0px;}
 .icon.close      { background-position: -160px 0px;}
@@ -518,7 +504,7 @@ button[disabled] .label {
 .icon.zoom-in    { background-position: -240px 0px;}
 .icon.zoom-out   { background-position: -260px 0px;}
 .icon.plus       { background-position: -240px 0px;}
-
+.icon.search     { background-position: -280px 0px;}
 .icon.geocode    { background-position: -280px -20px;}
 .icon.layers     { background-position: -300px 0px;}
 .icon.avatar     { background-position: -320px 0px;}
@@ -528,10 +514,6 @@ button[disabled] .label {
 .icon.back       { background-position: -420px 0px;}
 .icon.forward    { background-position: -440px 0px;}
 
-.icon.search  { background-position: -280px 0px;}
-
-.icon.close-modal { background-position: -200px 0px;}
-
 .fillD .icon.avatar           { background-position: -320px -20px;}
 .fillD .icon.nearby           { background-position: -340px -20px;}
 
@@ -554,13 +536,6 @@ button[disabled] .icon.layers     { background-position: -300px -40px;}
 button[disabled] .icon.avatar     { background-position: -320px -40px;}
 button[disabled] .icon.nearby     { background-position: -340px -40px;}
 
-.icon.big-line     { background-position: 0px -80px;}
-.icon.big-point    { background-position: -40px -80px;}
-.icon.big-area     { background-position: -80px -80px;}
-.icon.big-vertex   { background-position: -120px -80px;}
-.icon.big-inspect  { background-position: -160px -80px;}
-.icon.big-relation { background-position: -200px -80px;}
-
 .icon-operation-delete        { background-position: 0px -140px;}
 .icon-operation-circularize   { background-position: -20px -140px;}
 .icon-operation-straighten    { background-position: -40px -140px;}
@@ -648,11 +623,30 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     min-width: 60px;
     text-align: center;
     overflow: hidden;
+    position: relative;
 }
 
 .inspector-wrap .message button > div {
     height: 100%;
     padding: 20px 0;
+    -webkit-transition: opacity 200ms;
+       -moz-transition: opacity 200ms;
+            transition: opacity 200ms;
+}
+
+.inspector-wrap .message button .col12:last-child {
+    position: absolute;
+    width: 100%;
+    padding: 20px 0;
+    opacity: 0;
+}
+
+.inspector-wrap .message button:hover .col12:first-child {
+    opacity: 0;
+}
+
+.inspector-wrap .message button:hover .col12:last-child {
+    opacity: 1;
 }
 
 .inspector-wrap .message button.line > div {
@@ -1629,9 +1623,6 @@ div.typeahead a:first-child {
     right:5px;
     top:5px;
     opacity: .5;
-    -webkit-transition: opacity 100ms;
-    -moz-transition: opacity 100ms;
-    transition: opacity 100ms;
 }
 
 .modal button.close-modal:hover {

js/id/ui/modal.js

@@ -24,7 +24,7 @@ iD.ui.modal = function(selection, blocking) {
         .attr('class', 'modal');
 
     modal.append('button')
-        .attr('class', 'icon close-modal')
+        .attr('class', 'icon remove')
         .on('click', function() {
             if (!blocking) shaded.remove();
         });

js/id/ui/tag_editor.js

@@ -34,11 +34,17 @@ iD.ui.TagEditor = function(context, entity) {
             .on('click', function() {
                 event.choose(preset);
             });
+
         back.append('div')
             .attr('class', 'col12')
             .append('span')
             .attr('class', 'preset-icon icon' + (preset ?  ' feature-' + (preset.icon || 'marker-stroked') : ''));
 
+        back.append('div')
+            .attr('class', 'col12')
+            .append('span')
+            .attr('class', 'icon back');
+
         messagewrap.append('h3')
             .attr('class', 'inspector-inner fl')
             .text(t('inspector.editing_feature', { feature: preset.name() }));