add back button

This commit is contained in:
Marty Alcala 2016-10-12 15:21:38 -04:00
parent ce298fdfb6
commit 1d5299e254
3 changed files with 30 additions and 4 deletions

View File

@ -9,11 +9,19 @@ action-sheet {
bottom: 0;
left: 0;
transform: translateY(100%);
transition: transform 250ms ease;
transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
z-index: 100;
&.slide-up {
transform: translateY(0);
box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, .3);
}
.back-arrow {
padding: 1rem;
padding-top: 1.5rem;
padding-left: 2rem;
cursor: pointer;
}
}
@ -24,12 +32,12 @@ action-sheet {
top: 0;
left: 0;
background: rgba(0, 0, 0, 0);
transition: background 250ms ease;
transition: background 250ms cubic-bezier(0.4, 0.0, 0.2, 1);;
pointer-events: none;
z-index: 99;
&.fade-in {
background: rgba(0, 0, 0, .5);
background: rgba(0, 0, 0, .4);
pointer-events: all;
}
}

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<title>controls-ico-back</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Header/Controls/Back-(Dark)" transform="translate(-20.000000, -35.000000)" stroke-width="2" stroke="#4D4D4D">
<g id="controls-ico-back" transform="translate(21.000000, 36.000000)">
<g id="Icons/Back-Arrow/Light">
<g id="Back-arrow-(White)">
<path d="M12.1129878,12.8087726 L19.6825617,6.27049696 M11.9604103,0.0270404646 L19.7044837,6.19072819 M0.25515308,6.21111111 L19.5439223,6.21111111" id="Line" transform="translate(9.979818, 6.417907) scale(-1, 1) translate(-9.979818, -6.417907) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -4,5 +4,5 @@
ng-click="hide()">
</div>
<div class="bp-action-sheet__sheet" ng-class="{'slide-up': show}">
<img class="back-arrow" src="img/icon-back-arrow.svg" ng-click="hide()">
</div>