anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

feat(card): polish design of bitpay card intro view

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-20 23:59:03 -04:00
commit ffa8aa39ce
3 changed files with 50 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/js/controllers/bitpayCardIntro.js
View file

@ -59,6 +59,11 @@ angular.module('copayApp.controllers').controller('bitpayCardIntroController', f
}
});
$scope.bitPayCardInfo = function() {
var url = 'https://bitpay.com/visa/faq';
externalLinkService.open(url);
};
$scope.orderBitPayCard = function() {
var url = 'https://bitpay.com/visa/get-started';
externalLinkService.open(url);

79
src/sass/views/bitpayCardIntro.scss
View file

@ -1,70 +1,55 @@
#bitpayCard-intro {
.slider-pager .slider-pager-page {
color: #fff;
}
.cta-button{
background: url(../img/onboarding-welcome-bg.png), linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background-position: top center;
background-size: contain;
background-repeat: no-repeat;
color: #fff;
.cta-button {
text-align: center;
position: absolute;
bottom: 55px;
padding: 0 1.5rem;
width: 100%;
}
background: rgba(30, 49, 134, 1);
background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1)));
background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
color: #fff;
height: 100%;
.bar.bar-header {
background: rgb(30, 49, 134);
color: #fff;
button {
color: #fff;
}
.secondary-buttons {
button {
color: rgba(255, 255, 255, .5);
}
}
background: transparent none;
border: 0 none transparent;
}
.bar.bar-stable{
border-color: transparent;
border:none;
}
.button-transparent{
background: none !important;
}
.button-translucent{
background: rgba(215, 215, 215, 0.1)
}
.button-primary{
background: rgb(100, 124, 232) !important;
color:#fff;
}
.light-blue{
color:rgb(100, 124, 232);
}
.text-white{
color: #ffffff;
.bitpayCard {
&__illustration {
padding: 2rem;
&__img {
width: 100%;
max-width: 400px;
}
}
&__info:before {
font-size: 22px;
line-height: 22px;
margin-top: 6px;
}
}
ion-content {
background: url(../img/onboarding-welcome-bg.png);
background-position: top center;
background-size: contain;
background-repeat: repeat-x;
height: 100%;
.scroll{
height: 100%;
}
color: #fff;
p {
text-align: center;
margin: 40px 20px;
font-size: 1.2rem;
color: rgba(255, 255, 255, .5);
}
}
.slider__text {
text-align: center;
margin: 40px 20px;
font-size: 1rem;
color: rgba(255, 255, 255, .7);
}
.slider-pager .slider-pager-page {
color: $soft-blue;
font-size: 8px;
margin: 0;
}
}