diff --git a/css/app.css b/css/app.css index d7ac60fb7..2b956888b 100644 --- a/css/app.css +++ b/css/app.css @@ -234,7 +234,7 @@ ul.toggle-list { ul.toggle-list li a { position: relative; - padding: 5px 10px 5px 25px; + padding: 5px 10px 5px 30px; display:block; border-top: 1px solid #ccc; } @@ -273,13 +273,13 @@ ul.link-list li:last-child { content: ""; display: inline-block; border-radius: 50%; - height: 12px; - width: 12px; + height: 16px; + width: 16px; margin-right: 10px; border: 1px solid #CCC; position: absolute; left: 5px; - top: 8px; + top: 5px; } .toggle-list a:hover::before { @@ -291,6 +291,19 @@ ul.link-list li:last-child { 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 { @@ -1124,20 +1137,20 @@ input[type=number] { border-bottom: 1px solid #CCC; color: #7092FF; width: 100%; - padding-left: 25px; + padding-left: 30px; } .radio-wrap button::before { content: ""; display: inline-block; border-radius: 50%; - height: 12px; - width: 12px; + height: 16px; + width: 16px; margin-right: 10px; border: 1px solid #CCC; position: absolute; left: 5px; - top: 8px; + top: 5px; } .radio-wrap button:hover::before { diff --git a/dist/img/sprite.svg b/dist/img/sprite.svg index 680ef2ce2..7c4d05738 100644 --- a/dist/img/sprite.svg +++ b/dist/img/sprite.svg @@ -38,22 +38,22 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="18.189894" - inkscape:cx="263.82239" - inkscape:cy="300.42147" + inkscape:zoom="16" + inkscape:cx="471.57386" + inkscape:cy="545.41375" inkscape:document-units="px" inkscape:current-layer="layer12" showgrid="true" - inkscape:window-width="1483" - inkscape:window-height="804" - inkscape:window-x="35" + inkscape:window-width="1280" + inkscape:window-height="756" + inkscape:window-x="56" inkscape:window-y="0" inkscape:window-maximized="0" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" - showguides="false" + showguides="true" inkscape:guide-bbox="true" inkscape:snap-bbox="true" inkscape:snap-nodes="true" @@ -228,7 +228,7 @@ image/svg+xml - + @@ -377,13 +377,6 @@ id="path3769" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccccccc" /> - @@ -925,7 +918,7 @@ transform="translate(10.000004,-1.9999957)"> @@ -959,11 +952,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-411.98649,15.371188)" /> @@ -1015,11 +1008,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-410.98649,15.371188)" /> @@ -1099,11 +1092,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-410.98649,14.371188)" /> @@ -1149,7 +1142,7 @@ transform="translate(10.000004,-1.9999957)"> @@ -1183,11 +1176,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-411.98649,15.371188)" /> @@ -1239,11 +1232,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-410.98649,15.371188)" /> @@ -1338,11 +1331,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-410.98649,14.371188)" /> @@ -1388,7 +1381,7 @@ transform="translate(10.000004,-1.9999957)"> @@ -1422,11 +1415,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-411.98649,15.371188)" /> + + + + + + diff --git a/js/id/ui/background.js b/js/id/ui/background.js index 5fa0bf25a..56f239f4c 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -240,12 +240,12 @@ iD.ui.Background = function(context) { var overlayList = content .append('ul') - .attr('class', 'toggle-list'); + .attr('class', 'toggle-list check-list'); var gpxLayerItem = content .append('ul') .style('display', iD.detect().filedrop ? 'block' : 'none') - .attr('class', 'toggle-list') + .attr('class', 'toggle-list check-list') .append('li') .append('a') .classed('layer-toggle-gpx', true)