diff --git a/css/app.css b/css/app.css index b16cfe7cc..359f3b25e 100644 --- a/css/app.css +++ b/css/app.css @@ -28,6 +28,14 @@ h3 { line-height:30px; } +h4 { + font-size: 12px; + font-weight: normal; + font-style: italic; + line-height: 20px; + padding-bottom: 10px; +} + :focus { outline-color: transparent; outline-style: none; @@ -56,17 +64,14 @@ a:hover { input[type=text] { background-color: white; - width:150px; - line-height:20px; - height:20px; + height:30px; border:1px solid #ccc; - padding: 5px; + padding:4px 10px; margin:0; - box-shadow: inset 0 0 3px 0 rgba(0,0,0,.25);; } input[type=text]:focus { - border-color:#aaa; + background-color: #ececec; } /* tables */ @@ -174,7 +179,7 @@ button.Browse { button.minor { height: 20px; width: 20px; - margin: 0; + margin: 5px; } .buttons-joined { @@ -362,6 +367,10 @@ button.Browse .label { padding: 10px; } +.inspector-inner.head { + border-bottom: 1px solid #ccc; +} + .inspector-inner button { position: absolute; top: 0; @@ -390,26 +399,30 @@ button.Browse .label { } .input-wrap { - position: absolute; - left: 0px; - right: 80px; + position: relative; + margin-top: -1px; } .tag-row input { width: 50%; - margin:0; - height: 30px; - padding:4px; - border:1px solid #ccc; border-right: 0; - border-top: 0; - background:#fff; } +.tag-row input.key { + font-weight: bold; +} + +.tag-row:first-child input { + border-top: 1px solid #ccc; +} .tag-row input.value { border-right: 1px solid #ccc; } +.inspector-buttons { + border-top: 1px solid #ccc; +} + /* Map Controls */ .map-control { @@ -454,7 +467,7 @@ button.Browse .label { } .opacity-options-wrapper { - padding: 10px; + padding: 10px 10px 0 10px; } .opacity-options { @@ -462,7 +475,9 @@ button.Browse .label { background: url(../img/background-pattern-opacity.png) 0 0 repeat; height:20px; width:62px; - float: right; + position: absolute; + right: 10px; + top: 10px; } .opacity-options li { @@ -568,17 +583,30 @@ img.tile { margin-left:10px; } +/* typeahead dropdowns +------------------------------------------------------- */ + div.typeahead { - background:#fff; - width:148px; - border:1px solid #ccc; + width:200px; + z-index: 9999; + box-shadow: 0 5px 10px 0 rgba(0,0,0,.2); + margin-top: -1px; } div.typeahead a { + height: 30px; + border:1px solid #ccc; + border-top: 0; + background-color: #fff; padding:1px 4px; display:block; } +div.typeahead a:first-child { + border-top: 1px solid #ccc; +} + + /* Modals ------------------------------------------------------- */ diff --git a/img/source/design.svg b/img/source/design.svg index 401817c2d..8206480f0 100644 --- a/img/source/design.svg +++ b/img/source/design.svg @@ -391,10 +391,10 @@ inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:zoom="1" - inkscape:cx="245.71977" - inkscape:cy="806.33291" + inkscape:cx="890.32523" + inkscape:cy="742.11499" inkscape:document-units="px" - inkscape:current-layer="layer1" + inkscape:current-layer="layer13" showgrid="false" inkscape:window-width="1543" inkscape:window-height="834" @@ -538,7 +538,7 @@ image/svg+xml - + @@ -589,7 +589,7 @@ id="g48109-9"> + Layers") - .append('ul') + + opa.append('h4').text('Layers') + + opa.append('ul') .attr('class', 'opacity-options') .selectAll('div.opacity') .data(opacities) @@ -76,6 +78,7 @@ iD.layerswitcher = function(map) { .style('opacity', function(d) { return d; }); + // Make sure there is an active selection by default d3.select('.opacity-options li').classed('selected', true);