mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-15 05:30:35 +02:00
re-organizing + cleaning up CSS, starting to style the UI.
This commit is contained in:
Saman Bemel-Benrud
+79
-79
@@ -5,10 +5,13 @@ body {
|
||||
font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
|
||||
margin:0;
|
||||
padding:0;
|
||||
color:#444;
|
||||
}
|
||||
|
||||
#iD * {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color:#444;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -58,6 +61,9 @@ input[type=text]:focus {
|
||||
/* Utility Classes
|
||||
------------------------------------------------------- */
|
||||
|
||||
.fillL { background-color: white;}
|
||||
.fillL2 { background: #f7f7f7 url(/img/background-pattern-1.png) repeat;}
|
||||
|
||||
div.hide {
|
||||
display:none;
|
||||
}
|
||||
@@ -69,14 +75,69 @@ a.selected {
|
||||
/* Buttons */
|
||||
|
||||
button {
|
||||
background:#7092ff;
|
||||
border:0;
|
||||
color:#fff;
|
||||
font-size:12px;
|
||||
line-height:18px;
|
||||
margin:5px 5px 0 0;
|
||||
line-height:20px;
|
||||
cursor:pointer;
|
||||
border-radius:2px;
|
||||
border-radius:4px;
|
||||
border:1px solid #b0b0b0;
|
||||
color:#222;
|
||||
background: white;
|
||||
font-weight:bold;
|
||||
white-space:nowrap;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
button.big {
|
||||
margin:10px;
|
||||
height:40px;
|
||||
}
|
||||
|
||||
button.mini {
|
||||
width:auto;
|
||||
}
|
||||
|
||||
.buttons-joined {
|
||||
margin:10px;
|
||||
padding:1px;
|
||||
border-radius: 4px;
|
||||
background:#fff;
|
||||
display:inline-block;
|
||||
border:1px solid #b0b0b0;
|
||||
}
|
||||
|
||||
.buttons-joined button {
|
||||
height:36px;
|
||||
border:0;
|
||||
border-right:1px solid #ccc;
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
.buttons-joined button:first-child {
|
||||
border-radius:3px 0 0 3px;
|
||||
}
|
||||
|
||||
.buttons-joined button:last-child {
|
||||
border-right:0;
|
||||
border-radius:0 3px 3px 0;
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
color:#eee;
|
||||
cursor:auto;
|
||||
}
|
||||
|
||||
button.active:not([disabled]) {
|
||||
background:#7392ff;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
button.save {
|
||||
display:inline-block;
|
||||
color:#6dc643;
|
||||
}
|
||||
|
||||
button.cancel {
|
||||
@@ -87,6 +148,14 @@ button.delete {
|
||||
background:#DD5757;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width:150px;
|
||||
height:20px;
|
||||
border:1px solid #ccc;
|
||||
padding:5px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
button small {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
@@ -95,15 +164,6 @@ button small {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div.buttons-joined {
|
||||
margin:5px;
|
||||
padding:1px;
|
||||
background:#fff;
|
||||
display:inline-block;
|
||||
border-radius:3px;
|
||||
border:1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Map
|
||||
------------------------------------------------------- */
|
||||
|
||||
@@ -147,80 +207,20 @@ img.tile {
|
||||
------------------------------------------------------- */
|
||||
|
||||
#bar {
|
||||
background:#e8e8e8;
|
||||
border-bottom:1px solid #aaa;
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
height:44px;
|
||||
right:0;
|
||||
height:60px;
|
||||
}
|
||||
|
||||
#bar button,
|
||||
button.white {
|
||||
width:80px;
|
||||
white-space:nowrap;
|
||||
cursor:pointer;
|
||||
display:inline-block;
|
||||
background:#fff;
|
||||
color:#222;
|
||||
font-weight:bold;
|
||||
font-size:14px;
|
||||
line-height:19px;
|
||||
border-radius:3px;
|
||||
border:1px solid #ccc;
|
||||
padding:0 10px;
|
||||
height:35px;
|
||||
margin:0;
|
||||
}
|
||||
/* Status box */
|
||||
|
||||
#bar div.buttons-joined button:first-child {
|
||||
border-radius:2px 0 0 2px;
|
||||
}
|
||||
|
||||
#bar div.buttons-joined button:last-child {
|
||||
border-right:0;
|
||||
border-radius:0 2px 2px 0;
|
||||
}
|
||||
|
||||
#bar div.buttons-joined button {
|
||||
height:31px;
|
||||
border:0;
|
||||
border-right:1px solid #ccc;
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
#bar .messages {
|
||||
.messages {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#bar button[disabled] {
|
||||
color:#eee;
|
||||
cursor:auto;
|
||||
}
|
||||
|
||||
#bar button.active:not([disabled]) {
|
||||
background:#7392ff;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
#bar button.save {
|
||||
display:inline-block;
|
||||
color:#6dc643;
|
||||
}
|
||||
|
||||
#bar button.mini,
|
||||
#bar button.mini {
|
||||
width:auto;
|
||||
}
|
||||
|
||||
#bar input[type=text] {
|
||||
width:150px;
|
||||
height:20px;
|
||||
border:1px solid #ccc;
|
||||
padding:5px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
/* Map Controls */
|
||||
|
||||
|
||||
+98
-4
@@ -1,4 +1,4 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
@@ -12,8 +12,8 @@ b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
@@ -24,7 +24,7 @@ time, mark, audio, video {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
@@ -46,3 +46,97 @@ table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects font family not being inherited in all browsers.
|
||||
* 2. Corrects font size not being inherited in all browsers.
|
||||
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Corrects inability to style clickable `input` types in iOS.
|
||||
* 3. Improves usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Removes excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 165 B After Width: | Height: | Size: 165 B |
+1897
-1743
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 242 KiB After Width: | Height: | Size: 245 KiB |
+4
-4
@@ -23,7 +23,7 @@ window.iD = function(container) {
|
||||
.call(map);
|
||||
|
||||
var bar = this.append('div')
|
||||
.attr('id', 'bar');
|
||||
.attr('id', 'bar').attr('class', 'fillL2');
|
||||
|
||||
var buttons_joined = bar.append('div')
|
||||
.attr('class', 'buttons-joined');
|
||||
@@ -66,7 +66,7 @@ window.iD = function(container) {
|
||||
.attr('class', 'hello');
|
||||
|
||||
bar.append('button')
|
||||
.attr('class', 'save')
|
||||
.attr('class', 'save big')
|
||||
.html("Upload<small id='as-username'></small>")
|
||||
.attr('title', 'Save changes to OpenStreetMap, making them visible to other users')
|
||||
.call(bootstrap.tooltip()
|
||||
@@ -111,12 +111,12 @@ window.iD = function(container) {
|
||||
.attr('class', 'zoombuttons')
|
||||
.selectAll('button')
|
||||
.data([['zoom-in', '+', map.zoomIn], ['zoom-out', '-', map.zoomOut]])
|
||||
.enter().append('button').attr('class', function(d) { return d[0]; })
|
||||
.enter().append('button').attr('class', function(d) { return d[0] + ' big'; })
|
||||
.text(function(d) { return d[1]; })
|
||||
.on('click', function(d) { return d[2](); });
|
||||
|
||||
var gc = bar.append('div').attr('class', 'geocode-control');
|
||||
gc.append('button').text('?');
|
||||
gc.append('button').text('?').attr('class','big');
|
||||
gc
|
||||
.on('mouseover', function() {
|
||||
d3.select('.geocode-control input').style('display', 'inline-block');
|
||||
|
||||
@@ -15,7 +15,7 @@ iD.layerswitcher = function(map) {
|
||||
function layerswitcher(selection) {
|
||||
selection
|
||||
.append('button')
|
||||
.attr('class', 'white')
|
||||
.attr('class', 'big')
|
||||
.text('L')
|
||||
.on('click', function() {
|
||||
content.classed('hide', function() {
|
||||
|
||||
Reference in New Issue
Block a user