diff --git a/css/app.css b/css/app.css index e0fede7a5..cadacef08 100644 --- a/css/app.css +++ b/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 { diff --git a/js/id/ui/modal.js b/js/id/ui/modal.js index cd69e0219..539c89de8 100644 --- a/js/id/ui/modal.js +++ b/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(); }); diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js index e46383b49..a629bee83 100644 --- a/js/id/ui/tag_editor.js +++ b/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() }));