feat(share): add brief entry animation for the sharing view
This commit is contained in:
parent
b18dcc4734
commit
d53f19bbbf
4 changed files with 19 additions and 12 deletions
|
|
@ -6,10 +6,6 @@
|
|||
/* Ionic Overrides and Workarounds */
|
||||
// Please include a description of the problem solved by the workaround.
|
||||
|
||||
// class to dynamically hide the ion-nav-bar for v1 Amazon flow
|
||||
// Fix hide-nav-bar (true|false)
|
||||
//ion-nav-bar.hide { display: block !important; }
|
||||
|
||||
// the ion tabs element never needs it's own background (backgrounds are
|
||||
// rendered by the tabs), and the default background would cover the scanner
|
||||
ion-tabs.ion-tabs-transparent {
|
||||
|
|
|
|||
|
|
@ -64,13 +64,13 @@
|
|||
padding: 50px 10px 30px;
|
||||
background-color: $subtle-gray;
|
||||
text-align: center;
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1) .2s, opacity .5s ease-in .2s;
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
&.slide-up {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
animation-name: slideUpFadeIn;
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
animation-delay: .2s;
|
||||
}
|
||||
.share-buttons__action {
|
||||
display: inline-block;
|
||||
|
|
@ -81,3 +81,14 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUpFadeIn {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,11 +28,11 @@
|
|||
padding: 10px 30px 20px 40px;
|
||||
color: #667;
|
||||
}
|
||||
.buttons {
|
||||
.rate-buttons {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-color: $subtle-gray;
|
||||
padding: 50px 0;
|
||||
padding: 30px 0 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="subtitle">
|
||||
<span class="text-bold" translate>Would you be willing to rate BitPay in the app store?</span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="rate-buttons">
|
||||
<button type="submit" class="button button-standard button-primary" ng-click="goAppStore()">
|
||||
<span translate>Rate on the app store</span>
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue