big cleanup of UI toggles, removed lots of redundancy,ect.

css/app.css

@@ -11,7 +11,7 @@ html, body {
 }
 
 body {
-    font:normal 12px/1.6666 'Helvetica Neue', Arial, sans-serif;
+    font:normal 12px/1.6667 'Helvetica Neue', Arial, sans-serif;
     margin:0;
     padding:0;
     min-width: 768px;
@@ -237,37 +237,62 @@ table.tags, table.tags td, table.tags th {
 
 ul li { list-style: none;}
 
-ul.toggle-list {
+.toggle-list {
     border-radius: 4px;
     border: 1px solid #CCC;
-    margin-bottom: 10px;
 }
 
-ul.toggle-list li a {
+.toggle-list > button {
+    text-align: left;
     position: relative;
     padding: 5px 10px 5px 30px;
     display:block;
-    border-top: 1px solid #ccc;
+    border-radius: 0;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    height: 30px;
+    color: #7092FF;
 }
 
-ul.toggle-list li:first-child a {
-    border-top: 0;
+.toggle-list > button:first-child {
     border-radius: 3px 3px 0 0;
 }
 
-ul.toggle-list li:last-child a {
+.toggle-list > button:last-child {
     border-radius: 0 0 3px 3px;
+    border-bottom-width: 0;
 }
 
-ul.toggle-list li:only-child a {
+.toggle-list > button:only-child {
     border-radius: 3px;
 }
 
-ul.toggle-list li a:hover { background-color: #ececec;}
+.toggle-list > button.active {
+    background: #E8EBFF;
+}
 
-ul.toggle-list li a.selected { background-color: #e8ebff;}
+.toggle-list > button::before {
+    content: "";
+    display: inline-block;
+    border-radius: 50%;
+    height: 10px;
+    width: 10px;
+    margin-right: 10px;
+    background: #808080;
+    position: absolute;
+    left: 10px;
+    top: 10px;
+}
 
-ul.link-list li {
+.toggle-list > button.active::before {
+    background: #7092ff;
+}
+
+.toggle-list.check-list > button::before {
+    border-radius: 2px;
+}
+
+.link-list li {
     float: right;
     border-left: 1px solid rgba(255,255,255,.5);
     padding: 5px 0 5px 5px;
@@ -280,41 +305,6 @@ ul.link-list li:last-child {
     padding-left: 0;
 }
 
-.toggle-list a::before {
-    content: "";
-    display: inline-block;
-    border-radius: 50%;
-    height: 16px;
-    width: 16px;
-    margin-right: 10px;
-    border: 1px solid #CCC;
-    position: absolute;
-    left: 5px;
-    top: 5px;
-}
-
-.toggle-list a:hover::before {
-    box-shadow: inset 0 0 0 2px white;
-}
-
-.toggle-list a.selected::before {
-    background: #7092ff;
-    box-shadow: inset 0 0 0 2px white;
-}
-
-.toggle-list.check-list a::before {
-    border-radius: 2px;
-}
-
-.toggle-list.check-list a:hover::before {
-    background: white url(img/sprite.svg) no-repeat -480px -0px;
-    box-shadow: none;
-}
-
-.toggle-list.check-list a.selected::before {
-    background: white url(img/sprite.svg) no-repeat -480px -20px;
-}
-
 /* Utility Classes
 ------------------------------------------------------- */
 .fillL {
@@ -386,7 +376,6 @@ a.hide {
 
 button {
     text-align: center;
-    font-weight:bold;
     line-height:20px;
     border:0;
     background: white;
@@ -414,7 +403,7 @@ button.disabled {
     cursor: auto;
 }
 
-button.active:not([disabled]):not(.disabled) {
+button.active {
     background: #7092ff;
 }
 
@@ -992,10 +981,10 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 /* hide and remove from layout */
 .inspector-hidden,
 .inspector-hover .checkselect label input[type="checkbox"],
-.inspector-hover .radio-wrap button::before,
-.inspector-hover .preset-radio button:not(.active),
+.inspector-hover .toggle-list button::before,
+.inspector-hover .toggle-list button:not(.active),
 .inspector-hover .inspector-inner .add-tag,
-.inspector-hover .radio-wrap button.remove .icon {
+.inspector-hover .toggle-list button.remove .icon {
     height: 0;
     width: 0;
     overflow: hidden;
@@ -1041,7 +1030,7 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 }
 
 /* Unstyle button fields */
-.inspector-hover .form-field.preset-radio button.active,
+.inspector-hover .toggle-list button.active,
 .inspector-hover .entity-editor-pane a.hide-toggle {
     opacity: 1;
     background-color: transparent;
@@ -1050,30 +1039,32 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     border-width: 0;
 }
 
-.inspector-hover .form-field.preset-radio button.active {
+.inspector-hover .toggle-list button.active {
     padding-left: 10px;
 }
 
 /* Add placeholder only on hover for radio buttons */
-.inspector-hover .form-field.preset-radio .placeholder {
+.inspector-hover .toggle-list .placeholder {
     color: #a9a9a9;
     padding: 5px 10px;
     opacity: 1;
+    line-height: 19px;
     width: 100%;
 }
 
 /* Hide placeholder for radio buttons if another is active, or not in hover state */
-.form-field.preset-radio button.active ~ .placeholder,
-.form-field.preset-radio .placeholder {
+.toggle-list button.active ~ .placeholder,
+.toggle-list .placeholder {
     padding: 0;
     opacity: 0;
     width: 0;
-    display: inline-block;
+    line-height: 0;
+    display: block;
     overflow: hidden;
-    -webkit-transition: opacity 200ms, width 0 200ms, padding 0 200ms;
-       -moz-transition: opacity 200ms, width 0 200ms, padding 0 200ms;
-         -o-transition: opacity 200ms, width 0 200ms, padding 0 200ms;
-            transition: opacity 200ms, width 0 200ms, padding 0 200ms;
+    -webkit-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
+       -moz-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
+         -o-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
+            transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
 }
 
 /* first phase hover-to-active animations */
@@ -1088,7 +1079,6 @@ header,
 textarea,
 .form-label,
 .preset-input-wrap,
-.preset-input-wrap li,
 .preset-input-wrap .label {
     -webkit-transition: all 200ms;
        -moz-transition: all 200ms;
@@ -1114,26 +1104,19 @@ input,
 .more-buttons,
 .view-on-osm,
 .hide-toggle:before,
-.radio-wrap button::before,
-.radio-wrap button.remove .icon {
+.entity-editor-pane .toggle-list button::before,
+.entity-editor-pane .toggle-list button.remove .icon {
     -webkit-transition: opacity 200ms 200ms;
        -moz-transition: opacity 200ms 200ms;
          -o-transition: opacity 200ms 200ms;
             transition: opacity 200ms 200ms;
 }
 
-.preset-radio button:not(.active) {
-    -webkit-transition: height 200ms 200ms, padding-left 200ms 200ms, border-width 100ms 300ms;
-       -moz-transition: height 200ms 200ms, padding-left 200ms 200ms, border-width 100ms 300ms;
-         -o-transition: height 200ms 200ms, padding-left 200ms 200ms, border-width 100ms 300ms;
-            transition: height 200ms 200ms, padding-left 200ms 200ms, border-width 100ms 300ms;
-}
-
-.form-field.preset-radio button.active {
-    -webkit-transition: border-width 100ms 300ms, padding-left 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
-       -moz-transition: border-width 100ms 300ms, padding-left 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
-         -o-transition: border-width 100ms 300ms, padding-left 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
-            transition: border-width 100ms 300ms, padding-left 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
+.entity-editor-pane .toggle-list button {
+    -webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
+       -moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
+         -o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
+            transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
 }
 
 .entity-editor-pane a.hide-toggle {
@@ -1143,6 +1126,20 @@ input,
             transition: padding-left 200ms 200ms, color 200ms 200ms;
 }
 
+.entity-editor-pane .toggle-list button:not(.active) {
+    -webkit-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
+       -moz-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
+         -o-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
+            transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
+}
+
+.entity-editor-pane .toggle-list button {
+    -webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
+       -moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
+         -o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
+            transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
+}
+
 /* adding additional preset fields */
 
 .inspector-body .more-buttons {
@@ -1229,19 +1226,19 @@ button.preset-add-field:nth-last-child(8) ~ button.preset-add-field {
 
 /* preset form access */
 
-.preset-input-wrap li {
-    border-bottom: 1px solid #CCC;
-}
-.preset-input-wrap li:last-child {
-    border-bottom: 0;
-}
-
 .preset-input-wrap .label {
     height: 30px;
     background: #F6F6F6;
     padding: 5px 10px;
 }
 
+.form-field-access .preset-input-wrap li {
+    border-bottom: 1px solid #CCC;
+}
+.form-field-access .preset-input-wrap li:last-child {
+    border-bottom: 0;
+}
+
 .preset-input-access-wrap input {
     border-radius: 0;
     border-width: 0;
@@ -1335,58 +1332,16 @@ input[type=number] {
 
 /* Preset form radio button */
 
-.radio-wrap button {
-    position: relative;
-    text-align: left;
-    float: left;
-    font-weight: normal;
-    height: 30px;
-    border-radius: 0;
-    border-bottom: 1px solid #CCC;
-    color: #7092FF;
-    width: 100%;
-    padding-left: 30px;
-}
-
-.radio-wrap button::before {
-    content: "";
-    display: inline-block;
-    border-radius: 50%;
-    height: 16px;
-    width: 16px;
-    margin-right: 10px;
-    border: 1px solid #CCC;
-    position: absolute;
-    left: 5px;
-    top: 5px;
-}
-
-.radio-wrap button:hover::before {
-    box-shadow: inset 0 0 0 2px white;
-}
-
-.radio-wrap button.active::before {
-    background: #7092ff;
-    box-shadow: inset 0 0 0 2px white;
-}
-
-.radio-wrap button:last-child {
-    border-bottom: 0;
-}
-
-.form-field .radio-wrap button.active {
-    background-color: #E8EBFF;
-}
-
-.radio-wrap button.remove {
+.toggle-list button.remove {
     border-radius: 0 0 3px 3px;
 }
-.radio-wrap button.remove .icon {
+
+.toggle-list button.remove .icon {
     position: absolute;
     left: 5px;
 }
 
-.radio-wrap button.remove::before {
+.toggle-list button.remove::before {
     content: none;
 }
 
@@ -1586,6 +1541,7 @@ div.combobox {
 }
 
 .tag-row input.key {
+    font-weight: bold;
     background-color: #f6f6f6;
 }
 
@@ -1779,6 +1735,10 @@ img.wiki-image {
 
 /* Background Settings */
 
+.toggle-list.layer-list { 
+    margin-bottom: 10px;
+}
+
 .background-control button {
     border-radius:0 4px 0 0;
 }

js/id/ui/background.js

@@ -27,14 +27,14 @@ iD.ui.Background = function(context) {
                 .attr('data-opacity', d);
 
             opacityList.selectAll('li')
-                .classed('selected', function(_) { return _ === d; });
+                .classed('active', function(_) { return _ === d; });
 
             context.storage('background-opacity', d);
         }
 
         function selectLayer() {
-            content.selectAll('a.layer')
-                .classed('selected', function(d) {
+            content.selectAll('button.layer')
+                .classed('active', function(d) {
                     var overlay = context.map().layers[2].source();
                     return d.data.name === context.background().source().data.name ||
                         (overlay.data && overlay.data.name === d.data.name);
@@ -78,21 +78,20 @@ iD.ui.Background = function(context) {
                 context.map().layers[1]
                     .enable(!context.map().layers[1].enable());
                 d3.select(this)
-                    .classed('selected', context.map().layers[1].enable());
+                    .classed('active', context.map().layers[1].enable());
                 context.redraw();
             }
         }
 
         function drawList(layerList, click, filter) {
 
-            var layerLinks = layerList.selectAll('a.layer')
+            var layerLinks = layerList.selectAll('button.layer')
                 .data(getSources().filter(filter), function(d) {
                     return d.data.name;
                 });
 
             var layerInner = layerLinks.enter()
-                .append('li')
-                .append('a');
+                .append('button');
 
             layerInner
                 .attr('href', '#')
@@ -114,7 +113,7 @@ iD.ui.Background = function(context) {
             layerLinks.exit()
                 .remove();
 
-            layerList.style('display', layerList.selectAll('a.layer').data().length > 0 ? 'block' : 'none');
+            layerList.style('display', layerList.selectAll('button.layer').data().length > 0 ? 'block' : 'none');
         }
 
         function update() {
@@ -128,7 +127,7 @@ iD.ui.Background = function(context) {
             });
 
             gpxLayerItem
-                .classed('selected', function() {
+                .classed('active', function() {
                     var gpxLayer = context.map().layers[1];
                     return !_.isEmpty(gpxLayer.geojson()) &&
                         gpxLayer.enable();
@@ -170,7 +169,7 @@ iD.ui.Background = function(context) {
             if (d3.event) d3.event.preventDefault();
             tooltip.hide(button);
             setVisible(!button.classed('active'));
-            content.selectAll('.toggle-list li:first-child a').node().focus();
+            content.selectAll('.toggle-list button:first-child').node().focus();
         }
 
         function setVisible(show) {
@@ -235,19 +234,18 @@ iD.ui.Background = function(context) {
             .style('opacity', String);
 
         var backgroundList = content
-            .append('ul')
-            .attr('class', 'toggle-list');
+            .append('div')
+            .attr('class', 'toggle-list layer-list');
 
         var overlayList = content
-            .append('ul')
-            .attr('class', 'toggle-list check-list');
+            .append('div')
+            .attr('class', 'toggle-list layer-list check-list');
 
         var gpxLayerItem = content
-            .append('ul')
+            .append('div')
             .style('display', iD.detect().filedrop ? 'block' : 'none')
-            .attr('class', 'toggle-list check-list')
-            .append('li')
-            .append('a')
+            .attr('class', 'toggle-list layer-list check-list')
+            .append('button')
             .classed('layer-toggle-gpx', true)
             .on('click.set-gpx', clickGpx);
 

js/id/ui/preset/radio.js

@@ -10,13 +10,13 @@ iD.ui.preset.radio = function(field) {
             .data([0]);
 
         var buttonWrap = wrap.enter().append('div')
-            .attr('class', 'preset-input-wrap toggle-list radio-wrap');
+            .attr('class', 'preset-input-wrap toggle-list');
 
         buttons = wrap.selectAll('button')
             .data(field.options || field.keys);
 
         buttons.enter().append('button')
-            .text(function(d) { return field.t('options.' + d, { 'default': d }); });
+                .text(function(d) { return field.t('options.' + d, { 'default': d }); });
 
         buttons
             .on('click', function(d) {
@@ -29,6 +29,7 @@ iD.ui.preset.radio = function(field) {
             .attr('class','placeholder')
             .text(field.placeholder());
 
+
         var remove = wrap.selectAll('button.remove')
             .data([0]);