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

Merge pull request #5697 from cmgustavo/ref/sass-slide-to-accept

Browse source 
Fix styling on mobile (slide to accept)
This commit is contained in:
Javier Donadío 2017-03-02 16:39:52 +02:00 • committed by GitHub
commit ec884440e6
4 changed files with 20 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app-template/copay/sass/overrides.scss
View file

@ -39,6 +39,12 @@ $v-button-secondary-outline-color: $v-accent-color;
$v-button-secondary-outline-active-bg: darken($v-accent-color, 10%);
$v-button-secondary-outline-active-color: $v-accent-color;
/* Slide */
$v-slide-bg-color: $v-accent-color;
$v-slider-bg-color: #069074;
$v-slide-text-color: #FFFFFF;
/* Onboarding */
$v-onboarding-welcome-bg: none;
$v-onboarding-color: $v-text-secondary-color;

6
src/sass/variables.scss
View file

@ -93,6 +93,12 @@ $v-button-secondary-outline-color: $v-dark-gray !default;
$v-button-secondary-outline-active-bg: $v-dark-gray !default;
$v-button-secondary-outline-active-color: #ffffff !default;
/* Slide */
$v-slide-bg-color: $v-accent-color;
$v-slider-bg-color: #5063B9 !default;
$v-slide-text-color: #FFFFFF !default;
/* Onboarding */
$v-onboarding-pane-bg: $v-primary-color !default;
$v-onboarding-gradient-top-color: $v-primary-color !default;

17
src/sass/views/includes/slideToAccept.scss
View file

@ -1,12 +1,9 @@
slide-to-accept {
$slide-bg-color: #647CE8;
$slider-bg-color: #5063B9;
$slide-text-color: #FFFFFF;
position: fixed;
bottom: 0;
height: 92px;
width: 100%;
background: $slide-bg-color;
background: $v-slide-bg-color;
@mixin center-vertically {
display: flex;
@ -26,7 +23,7 @@ slide-to-accept {
@include center-vertically;
height: 100%;
width: 100%;
background: $slider-bg-color;
background: $v-slider-bg-color;
-webkit-transform: translateX(0);
transform: translateX(0);
margin-left: -100%;
@ -37,7 +34,7 @@ slide-to-accept {
content: '';
width: 10000px;
left: -10000px + 1;
background: $slider-bg-color;
background: $v-slider-bg-color;
}
&::after {
@ -45,14 +42,14 @@ slide-to-accept {
content: '';
width: 15px;
right: -10px;
background: $slider-bg-color;
background: $v-slider-bg-color;
}
&__tip {
@include center-vertically;
width: 124px;
height: 116px;
background: $slider-bg-color;
background: $v-slider-bg-color;
right: -71px;
border-radius: 50%;
top: 50%;
@ -78,7 +75,7 @@ slide-to-accept {
top: 0;
left: 0;
width: 100%;
color: $slide-text-color;
color: $v-slide-text-color;
font-size: 18px;
font-weight: 600;
letter-spacing: .03rem;
@ -93,7 +90,7 @@ slide-to-accept {
&__status-text {
@include center-vertically;
justify-content: center;
color: $slide-text-color;
color: $v-slide-text-color;
z-index: 4;
width: 100%;
font-size: 17px;

3
src/sass/views/includes/slideToAcceptSuccess.scss
View file

@ -1,5 +1,4 @@
slide-to-accept-success {
$slider-bg-color: #5063B9;
$success-bg-color: #11D1A6;
height: 100%;
width: 100%;
@ -19,7 +18,7 @@ slide-to-accept-success {
$scale-factor: 20;
height: 10vmax;
width: 10vmax;
background: $slider-bg-color;
background: $v-slider-bg-color;
bottom: 0;
position: absolute;
left: calc(50% - 5vmax);