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

Fix styling on mobile (slide to accept)

Browse source
This commit is contained in:
Gustavo Maximiliano Cortez 2017-03-02 11:17:04 -03:00
commit 1b58a66cea
No known key found for this signature in database
GPG key ID: 15EDAD8D9F2EB1AF
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-bg: darken($v-accent-color, 10%);
$v-button-secondary-outline-active-color: $v-accent-color; $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 */ /* Onboarding */
$v-onboarding-welcome-bg: none; $v-onboarding-welcome-bg: none;
$v-onboarding-color: $v-text-secondary-color; $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-bg: $v-dark-gray !default;
$v-button-secondary-outline-active-color: #ffffff !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 */ /* Onboarding */
$v-onboarding-pane-bg: $v-primary-color !default; $v-onboarding-pane-bg: $v-primary-color !default;
$v-onboarding-gradient-top-color: $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-to-accept {
$slide-bg-color: #647CE8;
$slider-bg-color: #5063B9;
$slide-text-color: #FFFFFF;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
height: 92px; height: 92px;
width: 100%; width: 100%;
background: $slide-bg-color; background: $v-slide-bg-color;
@mixin center-vertically { @mixin center-vertically {
display: flex; display: flex;
@ -26,7 +23,7 @@ slide-to-accept {
@include center-vertically; @include center-vertically;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: $slider-bg-color; background: $v-slider-bg-color;
-webkit-transform: translateX(0); -webkit-transform: translateX(0);
transform: translateX(0); transform: translateX(0);
margin-left: -100%; margin-left: -100%;
@ -37,7 +34,7 @@ slide-to-accept {
content: ''; content: '';
width: 10000px; width: 10000px;
left: -10000px + 1; left: -10000px + 1;
background: $slider-bg-color; background: $v-slider-bg-color;
} }
&::after { &::after {
@ -45,14 +42,14 @@ slide-to-accept {
content: ''; content: '';
width: 15px; width: 15px;
right: -10px; right: -10px;
background: $slider-bg-color; background: $v-slider-bg-color;
} }
&__tip { &__tip {
@include center-vertically; @include center-vertically;
width: 124px; width: 124px;
height: 116px; height: 116px;
background: $slider-bg-color; background: $v-slider-bg-color;
right: -71px; right: -71px;
border-radius: 50%; border-radius: 50%;
top: 50%; top: 50%;
@ -78,7 +75,7 @@ slide-to-accept {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
color: $slide-text-color; color: $v-slide-text-color;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
letter-spacing: .03rem; letter-spacing: .03rem;
@ -93,7 +90,7 @@ slide-to-accept {
&__status-text { &__status-text {
@include center-vertically; @include center-vertically;
justify-content: center; justify-content: center;
color: $slide-text-color; color: $v-slide-text-color;
z-index: 4; z-index: 4;
width: 100%; width: 100%;
font-size: 17px; font-size: 17px;

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

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