fine tuned button appearance and transitions.

This commit is contained in:
Saman Bemel-Benrud
2013-06-20 15:10:16 -04:00
parent f387cea021
commit ec7921ded8
2 changed files with 24 additions and 11 deletions

View File

@@ -185,7 +185,10 @@ input:focus {
input[type="checkbox"],
input[type="radio"] {
width: 20px;
vertical-align: middle;
margin-right: 5px;
margin-bottom: 3px;
vertical-align: bottom;
height: 14px;
}
/* remove bottom border radius when combobox is open */
@@ -272,6 +275,11 @@ ul li { list-style: none;}
border-radius: 3px;
}
.toggle-list > label.remove span {
margin-right: 5px;
background-position: -201px 0;
}
.toggle-list > label.active {
background: #E8EBFF;
}
@@ -1040,9 +1048,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 .checkselect label input[type="radio"],
.inspector-hover label input[type="checkbox"],
.inspector-hover label input[type="radio"],
.inspector-hover .toggle-list label:not(.active),
.inspector-hover .toggle-list label span,
.inspector-hover .inspector-inner .add-tag,
.inspector-hover .inspector-inner .add-relation,
.inspector-hover .toggle-list label.remove .icon {
@@ -1144,16 +1153,17 @@ textarea,
input,
.checkselect label:last-of-type {
-webkit-transition: all 200ms 200ms;
-moz-transition: all 200ms 200ms;
-o-transition: all 200ms 200ms;
transition: all 200ms 200ms;
-webkit-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
-moz-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
-o-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
}
.modified .form-label .modified-icon,
.entity-editor-pane button.minor,
.combobox-carat,
.entity-editor-pane .header button,
.toggle-list label span,
.spin-control,
.more-buttons,
.view-on-osm,

View File

@@ -36,12 +36,15 @@ iD.ui.preset.radio = function(field) {
var remove = wrap.selectAll('label.remove')
.data([0]);
remove.enter().append('label')
.attr('class', 'remove')
.text(t('inspector.remove'))
.append('span')
var removeButton = remove.enter().append('label')
.attr('class', 'remove');
removeButton.append('span')
.attr('class', 'icon remove');
removeButton.append('span')
.text(t('inspector.remove'));
remove
.on('click', function() {
d3.event.preventDefault();