diff --git a/css/app.css b/css/app.css index 0799ca93c..9907d7281 100644 --- a/css/app.css +++ b/css/app.css @@ -130,6 +130,10 @@ a:hover { border:1px solid rgba(255, 255, 255, .5); } +textarea { + resize: vertical; +} + textarea, input[type=text], input[type=search], @@ -139,31 +143,32 @@ input[type=tel], input[type=email] { background-color: white; border:1px solid #ccc; - padding:10px; - resize: vertical; + padding:5px 10px; + width: 100%; + border-radius:4px; + -webkit-transition: all 100ms; + -moz-transition: all 100ms; + transition: all 100ms; } textarea:focus, -input[type=text]:focus { - background-color: #ececec; +input:focus { + background-color: #F1F1F1; } input[type=text] { padding:5px 10px; height:30px; - resize: none; } -input[type=text].major { +input.major { width: 100%; padding:5px 10px; font-size: 18px; font-weight: bold; height:40px; - resize: none; } - /* tables */ table { @@ -478,13 +483,16 @@ button[disabled] .label { .icon.zoom-in { background-position: -240px 0px;} .icon.zoom-out { background-position: -260px 0px;} .icon.plus { background-position: -240px 0px;} -.icon.geocode { background-position: -280px 0px;} + +.icon.geocode { background-position: -280px -20px;} .icon.layers { background-position: -300px 0px;} .icon.avatar { background-position: -320px 0px;} .icon.nearby { background-position: -340px 0px;} .icon.geolocate { background-position: -360px 0px;} .icon.warning { background-position: -380px 0px;} +.icon.search { background-position: -280px 0px;} + .icon.close-modal { background-position: -200px 0px;} .fillD .icon.avatar { background-position: -320px -20px;} @@ -565,6 +573,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} .inspector-inner { padding: 10px; border-bottom: 1px solid #ddd; + position: relative; } .inspector-inner.message { @@ -585,7 +594,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} /* preset form */ - .inspector-body .name-help, .inspector-body .type-help { position: absolute; @@ -606,13 +614,30 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} .preset-input { padding-left: 10px;} -.preset-search-input { - width:100%; +.preset-grid-search-wrap { + height: 60px; } -.preset-search-input input { - width: 100%; - padding: 5px; +.preset-grid-search-wrap .icon { + display: block; + position: absolute; + left: 10px; + top: 20px; + pointer-events: none; + z-index: 2; +} + +.preset-grid-search-wrap input { + left: 0px; + right: 0px; + top: 0; + bottom: 0; + border-radius: 0; + border: 0; + text-indent: 30px; + width: auto; height: auto; + position: absolute; + z-index: 1; } .preset-search-result { @@ -632,10 +657,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} padding: 0 10px; } -.preset-input input { - width: 100%; -} - div.combobox { width:155px; z-index: 9999; @@ -743,22 +764,24 @@ div.combobox { .preset-input .addr-housename { border-bottom: none; - width:100%; + border-radius: 4px 4px 0 0; } .preset-input .addr-number { width: 20%; border-right: none; border-bottom: none; + border-radius: 0; } .preset-input .addr-street { width: 80%; + border-radius: 0; border-bottom: none; } .preset-input .addr-city { - width:100%; + border-radius: 0 0 4px 4px; } /* tag editor */ @@ -925,12 +948,6 @@ div.combobox { top: 80%; } -.preset-grid-search { - width: 100%; - height: 20px; -} - - /* Preset icon colors */ .preset-icon-fill.tag-shop, diff --git a/css/reset.css b/css/reset.css index 45ccf2bc5..d8c4036a9 100644 --- a/css/reset.css +++ b/css/reset.css @@ -117,9 +117,9 @@ input[type="radio"] { input[type="search"] { -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; /* 2 */ + box-sizing: border-box; } /* diff --git a/img/source/sprite.svg b/img/source/sprite.svg index 24f0fc2f4..280b55590 100644 --- a/img/source/sprite.svg +++ b/img/source/sprite.svg @@ -39,8 +39,8 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="1" - inkscape:cx="70.692872" - inkscape:cy="47.524828" + inkscape:cx="307.92385" + inkscape:cy="182.74459" inkscape:document-units="px" inkscape:current-layer="layer12" showgrid="false" @@ -579,7 +579,7 @@ inkscape:export-ydpi="90" /> diff --git a/img/sprite.png b/img/sprite.png index fc93b53d4..85205ccd0 100644 Binary files a/img/sprite.png and b/img/sprite.png differ diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js index b336cab4b..b2ed1337d 100644 --- a/js/id/ui/preset_grid.js +++ b/js/id/ui/preset_grid.js @@ -23,8 +23,11 @@ iD.ui.PresetGrid = function(context) { .attr('class', 'preset-grid fillD inspector-body inspector-body-' + entity.geometry(context.graph())) .call(drawGrid, context.presets().defaults(entity, 12)); + searchwrap.append('span').attr('class', 'icon search'); + var search = searchwrap.append('input') - .attr('class', 'preset-grid-search') + .attr('class', 'preset-grid-search major') + .attr('placeholder','Search') .attr('type', 'search') .one('keydown', function() { // hack to let delete shortcut work when search is autofocused