add icons to buttons

This commit is contained in:
Laura Klünder 2017-11-15 12:36:10 +01:00
parent 08ecc2be9f
commit b7b0f2c21e
2 changed files with 32 additions and 11 deletions

View file

@ -172,9 +172,6 @@ main:not([data-view=route-result]) #route-result-buttons{
.locationinput button.locate {
font-size: 38px;
top: 7px;
}
.locationinput button.clear, #route-summary button.close {
}
.locationinput:not(.empty) button.locate, .locationinput.empty button.clear {
transform: scale(0.7);
@ -224,6 +221,10 @@ main:not([data-view=route-result]) #route-result-buttons{
.buttons > *:hover, .buttons > *:active {
background-color: #eeeeee;
}
.buttons .material-icons {
font-size: 15px;
vertical-align: -3px;
}
#route-summary > div:first-child {
padding: 10px;

View file

@ -43,18 +43,38 @@
<button class="button-clear clear material-icons">clear</button>
</div>
<div class="buttons" id="location-buttons">
<button class="button-clear details">Details</button>
<button class="button-clear share">Share</button>
<button class="button-clear route">Route</button>
<button class="button-clear details">
<i class="material-icons">arrow_downward</i>
Details
</button>
<button class="button-clear share">
<i class="material-icons">share</i>
Share
</button>
<button class="button-clear route">
<i class="material-icons">navigation</i>
Route
</button>
</div>
<div class="buttons" id="route-search-buttons">
<button class="button-clear swap">Swap</button>
<button class="button-clear close">Close</button>
<button class="button-clear swap">
<i class="material-icons">swap_vert</i>
Swap
</button>
<button class="button-clear close">
<i class="material-icons">close</i>
Close
</button>
</div>
<div class="buttons" id="route-result-buttons">
<button class="button-clear swap">Swap</button>
<button class="button-clear show-map">Show Map</button>
<button class="button-clear close">Close</button>
<button class="button-clear swap">
<i class="material-icons">swap_vert</i>
Swap
</button>
<button class="button-clear details">
<i class="material-icons">arrow_downward</i>
Details
</button>
</div>
</section>
<section id="route-summary">