diff --git a/css/map.css b/css/map.css index bcb8f4dbe..7b99ab28c 100644 --- a/css/map.css +++ b/css/map.css @@ -27,6 +27,16 @@ use { pointer-events: none; } +g.point .shadow, +g.vertex .shadow, +g.midpoint .shadow, +path.shadow { + pointer-events: all; + -webkit-transition: 200ms; + -moz-transition: 200ms; + transition: 200ms; +} + /* points */ g.point .stroke { @@ -37,21 +47,16 @@ g.point .stroke { g.point .shadow { fill: none; - pointer-events: all; - -webkit-transition: -webkit-transform 100ms linear; - transition: transform 100ms linear; - -moz-transition: fill 100ms linear; + stroke: #f6634f; + stroke-width: 8; + stroke-opacity: 0; } .behavior-hover g.point.hover:not(.selected) .shadow { - stroke-width: 8; - stroke: #f6634f; stroke-opacity: 0.5; } g.point.selected .shadow { - stroke-width: 8; - stroke: #f6634f; stroke-opacity: 0.7; } @@ -59,7 +64,7 @@ g.point.active, g.point.active * { pointer-events: none; } -/* vertices */ +/* vertices and midpoints */ g.vertex .fill { fill: none; @@ -79,23 +84,27 @@ g.vertex.tagged .fill { fill: #000; } -g.vertex .shadow { - fill: none; - pointer-events: all; - -webkit-transition: -webkit-transform 100ms linear; - transition: transform 100ms linear; - -moz-transition: fill 100ms linear; -} -.behavior-hover g.vertex.hover:not(.selected) .shadow { - fill: #f6634f; - fill-opacity: 0.3; -} -g.vertex.selected .shadow { - fill: #f6634f; - fill-opacity: 0.5; +g.midpoint .fill { + fill: #ddd; + stroke: black; + stroke-opacity: .5; + opacity: .5; } -/* midpoints */ +g.vertex .shadow, +g.midpoint .shadow { + fill: #f6634f; + fill-opacity: 0; +} + +.behavior-hover g.vertex.hover:not(.selected) .shadow, +.behavior-hover g.midpoint.hover:not(.selected) .shadow { + fill-opacity: 0.3; +} + +g.vertex.selected .shadow { + fill-opacity: 0.5; +} .mode-draw-area g.midpoint, .mode-draw-line g.midpoint, @@ -106,30 +115,6 @@ g.vertex.selected .shadow { display: none; } -g.midpoint .fill { - fill:#ddd; - stroke:black; - stroke-opacity: .5; - opacity: .5; -} -.behavior-hover g.midpoint .fill.hover:not(.selected) { - fill:white; - opacity: .75; -} - -g.midpoint .shadow { - fill: none; - pointer-events: all; - stroke-width: 10; - -webkit-transition: -webkit-transform 100ms linear; - transition: transform 100ms linear; - -moz-transition: fill 100ms linear; -} -.behavior-hover g.midpoint .shadow.hover:not(.selected) { - fill:#f6634f; - fill-opacity: 0.3; -} - /* lines */ path.line { @@ -143,18 +128,16 @@ path.stroke { } path.shadow { - pointer-events: stroke; + stroke: #f6634f; stroke-width: 10; - -webkit-transition: stroke 100ms linear; + stroke-opacity: 0; } .behavior-hover path.shadow.hover:not(.selected) { - stroke: #f6634f; stroke-opacity: 0.3; } path.shadow.selected { - stroke: #f6634f; stroke-opacity: 0.7; } diff --git a/js/id/svg/midpoints.js b/js/id/svg/midpoints.js index a06cf3779..9c81b44fe 100644 --- a/js/id/svg/midpoints.js +++ b/js/id/svg/midpoints.js @@ -42,7 +42,7 @@ iD.svg.Midpoints = function(projection) { .attr('class', 'midpoint'); group.append('circle') - .attr('r', 8) + .attr('r', 7) .attr('class', 'shadow'); group.append('circle') diff --git a/js/id/svg/points.js b/js/id/svg/points.js index f7908a078..5deb4183a 100644 --- a/js/id/svg/points.js +++ b/js/id/svg/points.js @@ -48,13 +48,9 @@ iD.svg.Points = function(projection, context) { groups.select('.shadow'); groups.select('.stroke'); groups.select('.icon') - .attr('xlink:href', function imageHref(entity) { + .attr('xlink:href', function(entity) { var preset = context.presets().match(entity, graph); - if (preset.icon === 'marker-stroked') { - return ''; - } else { - return '#maki-' + preset.icon + '-12'; - } + return preset.icon ? '#maki-' + preset.icon + '-12' : ''; }); groups.exit()