animate details icon

This commit is contained in:
Laura Klünder 2017-11-22 15:35:29 +01:00
parent c311d1f397
commit 7fa979fc1a
2 changed files with 7 additions and 1 deletions

View file

@ -210,6 +210,12 @@ main:not([data-view=route-result]) #route-details,
main:not(.show-details) #resultswrapper .details { main:not(.show-details) #resultswrapper .details {
display:none; display:none;
} }
main .buttons .details .material-icons {
transition: transform 250ms;
}
main.show-details .buttons .details .material-icons {
transform: scale(1, -1);
}
main.show-details #resultswrapper .details { main.show-details #resultswrapper .details {
animation: show-details; animation: show-details;
animation-duration: 150ms; animation-duration: 150ms;

View file

@ -47,7 +47,7 @@
<i class="material-icons" id="route-dots">more_vert</i> <i class="material-icons" id="route-dots">more_vert</i>
<div class="buttons" id="location-buttons"> <div class="buttons" id="location-buttons">
<button class="button-clear details"> <button class="button-clear details">
<i class="material-icons">arrow_downward</i> <i class="material-icons">expand_more</i>
Details Details
</button> </button>
<button class="button-clear share"> <button class="button-clear share">