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

Implementation for copay distribution sass.

Browse source
This commit is contained in:
Andy Phillipson 2017-02-23 16:46:41 -05:00
commit 73a06b595f
105 changed files with 1150 additions and 480 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/js/controllers/preferencesColor.js
View file

@ -5,15 +5,16 @@ angular.module('copayApp.controllers').controller('preferencesColorController',
$scope.wallet = wallet;
var walletId = wallet.credentials.walletId;
var config = configService.getSync();
$scope.colorList = configService.getColorList();
config.colorFor = config.colorFor || {};
$scope.currentColor = config.colorFor[walletId] || '#4A90E2';
$timeout(function() {
$scope.$apply();
});
var retries = 3;
$scope.colorCount = getColorCount();
setCurrentColorIndex();
$scope.save = function(i) {
var color = indexToColor(i);
if (!color) return;
$scope.save = function(color) {
var opts = {
colorFor: {}
};
@ -24,4 +25,53 @@ angular.module('copayApp.controllers').controller('preferencesColorController',
$ionicHistory.goBack();
});
};
function getColorDefault() {
return rgb2hex(window.getComputedStyle(document.getElementsByClassName('wallet-color-default')[0]).color);
};
function getColorCount() {
var count = window.getComputedStyle(document.getElementsByClassName('wallet-color-count')[0]).content;
return parseInt(count.replace(/[^0-9]/g, ''));
};
function setCurrentColorIndex() {
try {
$scope.currentColorIndex = colorToIndex(config.colorFor[walletId]);
if ($scope.currentColorIndex == undefined) {
$scope.currentColorIndex = colorToIndex(getColorDefault());
}
} catch(e) {
// Wait for DOM to render and try again.
$timeout(function() {
if (retries > 0) {
retries -= 1;
setCurrentColorIndex();
}
}, 100);
}
};
function colorToIndex(color) {
for (var i = 0; i < $scope.colorCount; i++) {
if (indexToColor(i) == color) {
return i;
}
}
return undefined;
};
function indexToColor(i) {
// Expect an exception to be thrown if can't getComputedStyle().
return rgb2hex(window.getComputedStyle(document.getElementsByClassName('wallet-color-' + i)[0]).backgroundColor);
};
function rgb2hex(rgb) {
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? "#" +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
};
});

44
src/js/directives/svg.js Normal file
View file

@ -0,0 +1,44 @@
'use strict';
angular.module('copayApp.directives')
/**
* Replaces img tag with its svg content to allow for CSS styling of the svg.
*/
.directive('svg', function($http) {
return {
restrict: 'C',
link: function(scope, element, attrs) {
var imgId = attrs.id;
var imgClass = attrs.class;
var imgUrl = attrs.src;
var svg;
// Load svg content
$http.get(imgUrl).success(function(data, status) {
svg = angular.element(data);
for (var i = svg.length - 1; i >= 0; i--) {
if (svg[i].constructor == SVGSVGElement) {
svg = angular.element(svg[i]);
break;
}
}
if (typeof imgId !== 'undefined') {
svg.attr('id', imgId);
}
if (typeof imgClass !== 'undefined') {
svg.attr('class', imgClass);
}
// Remove invalid attributes
svg = svg.removeAttr('xmlns:a');
element.replaceWith(svg);
});
scope.$on('$destroy', function() {
if (svg) svg.remove();
});
}
};
});

8
src/js/filters/filters.js
View file

@ -71,4 +71,12 @@ angular.module('copayApp.filters', [])
if (reverse) filtered.reverse();
return filtered;
};
})
.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++)
input.push(i);
return input;
};
});

63
src/js/services/configService.js
View file

@ -83,69 +83,6 @@ angular.module('copayApp.services').factory('configService', function(storageSer
var configCache = null;
var colorList = [
{
color: "#DD4B39",
name: "Cinnabar"
},
{
color: "#F38F12",
name: "Carrot Orange"
},
{
color: "#FAA77F",
name: "Light Salmon"
},
{
color: "#D0B136",
name: "Metallic Gold"
},
{
color: "#9EDD72",
name: "Feijoa"
},
{
color: "#29BB9C",
name: "Shamrock"
},
{
color: "#019477",
name: "Observatory"
},
{
color: "#77DADA",
name: "Turquoise Blue"
},
{
color: "#4A90E2",
name: "Cornflower Blue"
},
{
color: "#484ED3",
name: "Free Speech Blue"
},
{
color: "#9B59B6",
name: "Deep Lilac"
},
{
color: "#E856EF",
name: "Free Speech Magenta"
},
{
color: "#FF599E",
name: "Brilliant Rose"
},
{
color: "#7A8C9E",
name: "Light Slate Grey"
}
];
root.getColorList = function() {
return colorList;
};
root.getSync = function() {
if (!configCache)
throw new Error('configService#getSync called when cache is not initialized');

2
src/js/services/profileService.js
View file

@ -33,7 +33,7 @@ angular.module('copayApp.services')
configService.whenAvailable(function(config) {
wallet.usingCustomBWS = config.bwsFor && config.bwsFor[wallet.id] && (config.bwsFor[wallet.id] != defaults.bws.url);
wallet.name = (config.aliasFor && config.aliasFor[wallet.id]) || wallet.credentials.walletName;
wallet.color = (config.colorFor && config.colorFor[wallet.id]) || '#4A90E2';
wallet.color = (config.colorFor && config.colorFor[wallet.id]);
wallet.email = config.emailFor && config.emailFor[wallet.id];
});
}

70
src/sass/app/overrides.scss Normal file
View file

@ -0,0 +1,70 @@
/*
* Copay Distribution SCSS overrides
*/
/* Colors */
$v-primary-color: #192c3a;
$v-secondary-color: #31465b;
$v-accent-color: #1abb9b;
$v-text-primary-color: #192c3a;
$v-text-secondary-color: #c2c9d1;
$v-text-accent-color: #1abb9b;
$v-success-color: #1abb9b;
$v-warning-color: #bb331a;
/* Theme */
$v-default-wallet-color-index: 6;
$v-top-tabs-color: $v-accent-color;
$v-wallet-backup-phrase-color: $v-text-primary-color;
$v-wallet-backup-select-phrase-color: $v-secondary-color;
$v-wallet-backup-select-word-bg: $v-accent-color;
$v-wallet-backup-select-word-color: $v-text-primary-color;
$v-wallet-backup-select-word-disabled-color: $v-accent-color;
$v-tou-bg: $v-secondary-color;
$v-tou-color: $v-text-secondary-color;
$v-icon-border-radius: 3px;
$v-bitcoin-icon: url('../img/app/icon-bitcoin.svg');
$v-button-primary-color: $v-text-primary-color;
$v-button-primary-outline-active-color: $v-text-primary-color;
$v-button-secondary-bg: $v-secondary-color;
$v-button-secondary-color: $v-accent-color;
$v-button-secondary-active-bg: darken($v-secondary-color, 10%);
$v-button-secondary-clear-color: $v-accent-color;
$v-button-secondary-outline-border: $v-accent-color;
$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;
/* Onboarding */
$v-onboarding-welcome-bg: none;
$v-onboarding-color: $v-text-secondary-color;
$v-onboarding-bar-header-color: $v-text-primary-color;
$v-onboarding-bar-header-button-color: $v-accent-color;
$v-onboarding-tour-phone-bg: url(../img/app/onboarding/tour-phone.svg);
$v-onboarding-tour-currency-bg: url(../img/app/onboarding/tour-currency.svg);
$v-onboarding-tour-control-bg: url(../img/app/onboarding/tour-control.svg);
$v-onboarding-push-notification-bg: url(../img/app/onboarding/push-notifications.svg);
$v-onboarding-backup-warning-bg: url(../img/app/backup-warning.svg);
$v-onboarding-button-back-color: $v-accent-color;
$v-onboarding-button-secondary-bg: $v-secondary-color;
$v-onboarding-button-secondary-color: $v-accent-color;
$v-onboarding-button-secondary-active-bg: darken($v-secondary-color, 10%);
$v-onboarding-button-secondary-clear-color: $v-accent-color;
$v-onboarding-button-secondary-outline-border: $v-accent-color;
$v-onboarding-button-secondary-outline-color: $v-accent-color;
$v-onboarding-button-secondary-outline-active-bg: darken($v-accent-color, 10%);
$v-onboarding-button-secondary-outline-active-color: $v-accent-color;
/* Main tabs */
$v-tab-home-selected-icon: url('../img/app/tab-icons/ico-home-selected.svg');
$v-tab-receive-selected-icon: url('../img/app/tab-icons/ico-receive-selected.svg');
$v-tab-settings-selected-icon: url('../img/app/tab-icons/ico-settings-selected.svg');
$v-tab-scan-selected-icon: url('../img/app/tab-icons/ico-scan-selected.svg');
$v-tab-send-selected-icon: url('../img/app/tab-icons/ico-send-selected.svg');

39
src/sass/buttons.scss
View file

@ -1,24 +1,3 @@
// white on $positive
$button-primary-bg: $positive;
$button-primary-text: #fff;
$button-primary-border: transparent;
$button-primary-active-bg: darken($positive, 5%);
$button-primary-active-border: transparent;
//white on translucent-white
$button-secondary-onboarding-bg: rgba($light-gray, 0.1); // rgba(215, 215, 215, 0.1);
$button-secondary-onboarding-text: #fff;
$button-secondary-onboarding-border: transparent;
$button-secondary-onboarding-active-bg: rgba($light-gray, 0.2); // rgba(215, 215, 215, 0.2);
$button-secondary-onboarding-active-border: transparent;
//dark-gray on translucent-gray
$button-secondary-bg: $subtle-gray;
$button-secondary-text: $dark-gray;
$button-secondary-border: transparent;
$button-secondary-active-bg: darken($subtle-gray, 5%);
$button-secondary-active-border: transparent;
%button-standard {
width: 85%;
max-width: 300px;
@ -30,9 +9,9 @@ $button-secondary-active-border: transparent;
.button,
.onboarding .button {
&.button-primary {
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text);
@include button-clear($button-primary-bg);
@include button-outline($button-primary-bg);
@include button-style($v-button-primary-bg, $v-button-primary-border, $v-button-primary-active-bg, $v-button-primary-active-border, $v-button-primary-color);
@include button-clear($v-button-primary-bg);
@include button-outline($v-button-primary-bg);
}
&.button-primary,
&.button-secondary,
@ -48,16 +27,16 @@ $button-secondary-active-border: transparent;
}
.onboarding .button {
&.button-secondary {
@include button-style($button-secondary-onboarding-bg, $button-secondary-onboarding-border, $button-secondary-onboarding-active-bg, $button-secondary-onboarding-active-border, $button-secondary-onboarding-text);
@include button-clear($button-secondary-onboarding-text);
@include button-outline($button-secondary-onboarding-text);
@include button-style($v-onboarding-button-secondary-bg, $v-onboarding-button-secondary-border, $v-onboarding-button-secondary-active-bg, $v-onboarding-button-secondary-active-border, $v-onboarding-button-secondary-color);
@include button-clear($v-onboarding-button-secondary-color);
@include button-outline($v-onboarding-button-secondary-color);
}
}
.button {
&.button-secondary {
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text);
@include button-clear($button-secondary-text);
@include button-outline($button-secondary-text);
@include button-style($v-button-secondary-bg, $v-button-secondary-border, $v-button-secondary-active-bg, $v-button-secondary-active-border, $v-button-secondary-color);
@include button-clear($v-button-secondary-color);
@include button-outline($v-button-secondary-color);
}
}

2
src/sass/directives/gravatar.scss
View file

@ -1,4 +1,4 @@
.gravatar {
border-radius: 50%;
border-radius: $v-icon-border-radius;
display: inline-block;
}

8
src/sass/icons.scss
View file

@ -37,10 +37,10 @@
.big-icon-svg {
padding: 0 7px;
> .bg {
border-radius: 50%;
border-radius: $v-icon-border-radius;
width: 40px;
height: 40px;
box-shadow: $hovering-box-shadow;
box-shadow: $v-hovering-box-shadow;
background-repeat:no-repeat;
background-clip: padding-box;
background-size: 103%;
@ -61,12 +61,12 @@
&.circle{
left:8px;
.bg {
border-radius: 50%;
border-radius: $v-icon-border-radius;
width: 70px;
height: 70px;
padding:.1rem;
margin: 0.2rem;
box-shadow: 0px 1px 5px rgba($mid-gray, .1);
box-shadow: 0px 1px 5px rgba($v-mid-gray, .1);
display:flex;
margin:auto;
}

2
src/sass/ionic.scss
View file

@ -32,7 +32,7 @@ $placeholder-icon-padding: 10px;
// the default .item p color of #666 cannot be modified by a variable
.item p {
color: $mid-gray;
color: $v-mid-gray;
}
// we'd like to diverge from the standard ionic formula for left-right card margins

1
src/sass/main.scss
View file

@ -1,3 +1,4 @@
@import "app/overrides";
@import "fonts";
@import "variables";
@import "ionic";

6
src/sass/shame.scss
View file

@ -27,7 +27,7 @@
color: #fff;
&.warning-red{
border-color: #EB475A;
background-color: $warning-red;
background-color: $v-warning-color;
}
}
&.error {
@ -151,8 +151,8 @@ input[type=number] {
position: absolute;
font-size: 20px;
right: 10px;
background-color: $subtle-gray;
color: $dark-gray;
background-color: $v-subtle-gray;
color: $v-dark-gray;
border-radius: 4px;
padding: 2px 10px;
cursor: pointer;

221
src/sass/variables.scss
View file

@ -1,57 +1,188 @@
/* constants */
$royal: #1e3186;
$soft-blue: #647ce8;
$fill-blue: #D5DFFF;
$subtle-gray: darken(#fff, 5%);
$roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light;
$light-green: rgb(19, 229, 182);
$success-green: #17ae8c;
$warning-orange: #ffa500;
$warning-red: #E15061;
$dark-gray: #445;
$mid-gray: #667;
$light-gray: #9b9bab;
$subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
$hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
$subtle-radius: 3px;
$visible-radius: 6px;
$unmistakable-radius: 12px;
/*
* App variables
*/
/* Set ionic variables */
/* Fonts */
$v-font-family: "Roboto", sans-serif !default;
$v-font-family-light: "Roboto-Light", sans-serif-light !default;
$positive: $soft-blue;
/* Colors */
$v-bitcoin-orange: #ff9900 !default;
$font-size-base: 16px;
$font-size-small: 12px;
$font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light;
$v-dark-gray: #445 !default;
$v-mid-gray: #667 !default;
$v-light-gray: #9b9bab !default;
$v-subtle-gray: darken(#ffffff, 5%) !default;
$button-border-radius: $subtle-radius;
$button-height: 52px;
$button-padding: 16px;
$v-primary-color: #1e3186 !default;
$v-secondary-color: #111b49 !default;
$v-accent-color: #647ce8 !default;
$base-background-color: $subtle-gray;
$v-text-primary-color: #1e3186 !default;
$v-text-secondary-color: #ffffff !default;
$v-text-accent-color: #647ce8 !default;
$item-default-active-bg: $subtle-gray;
$item-icon-font-size: 24px;
$v-success-color: #13e5b6 !default;
$v-warning-color: #ffa500 !default;
$input-color: $dark-gray;
$input-border: $light-gray;
$input-label-color: $mid-gray;
$input-color-placeholder: lighten($dark-gray, 40%);
$v-wallet-color-map: (
0: (color: #dd4b39, name: 'Cinnabar'),
1: (color: #f38f12, name: 'Carrot Orange'),
2: (color: #faa77f, name: 'Light Salmon'),
3: (color: #d0b136, name: 'Metallic Gold'),
4: (color: #9edd72, name: 'Feijoa'),
5: (color: #29bb9c, name: 'Shamrock'),
6: (color: #019477, name: 'Observatory'),
7: (color: #77dada, name: 'Turquoise Blue'),
8: (color: #4a90e2, name: 'Cornflower Blue'),
9: (color: #484ed3, name: 'Free Speech Blue'),
10: (color: #9b59b6, name: 'Deep Lilac'),
11: (color: #e856ef, name: 'Free Speech Magenta'),
12: (color: #ff599e, name: 'Brilliant Rose'),
13: (color: #7a8c9e, name: 'Light Slate Grey')
) !default;
$item-default-bg: #ffffff;
$item-default-border: $subtle-gray;
$item-default-text: $dark-gray;
$item-default-active-bg: darken(#ffffff, 7%);
$item-default-active-border: darken($subtle-gray, 7%);
$item-divider-bg: $subtle-gray;
/* Theme */
$v-default-wallet-color-index: 6 !default; // See $v-wallet-color-map
$v-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !default;
$v-hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3) !default;
$v-subtle-radius: 3px !default;
$v-visible-radius: 6px !default;
$v-unmistakable-radius: 12px !default;
$v-scanner-background-color: $v-primary-color !default;
$v-scanner-guide-color: $v-accent-color !default;
$v-top-tabs-color: $v-primary-color !default;
$bar-default-border: $subtle-gray;
$v-wallet-backup-bg: #ffffff !default;
$v-wallet-backup-phrase-bg: $v-subtle-gray !default;
$v-wallet-backup-phrase-color: $v-dark-gray !default;
$v-wallet-backup-select-phrase-color: $v-subtle-gray;
$v-wallet-backup-select-word-bg: #ffffff !default;
$v-wallet-backup-select-word-color: $v-dark-gray !default;
$v-wallet-backup-select-word-disabled-color: $v-light-gray !default;
$v-tou-bg: #ffffff !default;
$v-tou-color: $v-dark-gray !default;
$v-icon-color: $v-accent-color !default;
$v-icon-negative-color: $v-accent-color !default;
$v-icon-border-radius: 50% !default;
$v-bitcoin-icon: url('../img/icon-bitcoin.svg') !default;
$tabs-icon-size: 22px;
$v-button-primary-bg: $v-accent-color !default;
$v-button-primary-color: #ffffff !default;
$v-button-primary-border: transparent !default;
$v-button-primary-active-bg: darken($v-accent-color, 10%) !default;
$v-button-primary-active-border: transparent !default;
$v-button-primary-clear-bg: none !default;
$v-button-primary-clear-color: $v-accent-color !default;
$v-button-primary-outline-bg: transparent !default;
$v-button-primary-outline-border: $v-accent-color !default;
$v-button-primary-outline-color: $v-accent-color !default;
$v-button-primary-outline-active-bg: $v-accent-color !default;
$v-button-primary-outline-active-color: #ffffff !default;
$ios-transition-duration: 200ms;
$v-button-secondary-bg: $v-subtle-gray !default;
$v-button-secondary-color: $v-dark-gray !default;
$v-button-secondary-border: transparent !default;
$v-button-secondary-active-bg: $v-subtle-gray !default;
$v-button-secondary-active-border: transparent !default;
$v-button-secondary-clear-bg: none !default;
$v-button-secondary-clear-color: $v-dark-gray !default;
$v-button-secondary-outline-border: $v-dark-gray !default;
$v-button-secondary-outline-bg: transparent !default;
$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;
$card-box-shadow: $subtle-box-shadow;
/* Onboarding */
$v-onboarding-pane-bg: $v-primary-color !default;
$v-onboarding-gradient-top-color: $v-primary-color !default;
$v-onboarding-gradient-bottom-color: $v-secondary-color !default;
$v-onboarding-welcome-bg: url(../img/onboarding-welcome-bg.png) !default;
$v-onboarding-color: #ffffff !default;
$v-onboarding-bar-header-color: #ffffff !default;
$v-onboarding-bar-header-button-color: #ffffff !default;
$v-onboarding-tour-swiper-pagination-bg: $v-accent-color !default;
$v-onboarding-backup-alert-icon-color: $v-accent-color !default;
$v-onboarding-checkbox-off-border: $v-accent-color !default;
$v-onboarding-checkbox-on-border: $v-success-color !default;
$v-onboarding-tour-phone-bg: url(../img/onboarding-tour-phone.svg) !default;
$v-onboarding-tour-currency-bg: url(../img/onboarding-tour-currency-bg.svg) !default;
$v-onboarding-tour-control-bg: url(../img/onboarding-tour-control.svg) !default;
$v-onboarding-push-notification-bg: url(../img/onboarding-push-notifications.svg) !default;
$v-onboarding-backup-warning-bg: url(../img/backup-warning.svg) !default;
$v-onboarding-button-back-color: #ffffff !default;
$v-onboarding-button-secondary-bg: rgba($v-light-gray, 0.1) !default;
$v-onboarding-button-secondary-color: #ffffff !default;
$v-onboarding-button-secondary-border: transparent !default;
$v-onboarding-button-secondary-active-bg: rgba($v-light-gray, 0.2) !default;
$v-onboarding-button-secondary-active-border: transparent !default;
$v-onboarding-button-secondary-clear-bg: transparent !default;
$v-onboarding-button-secondary-clear-color: #ffffff !default;
$v-onboarding-button-secondary-outline-border: #ffffff !default;
$v-onboarding-button-secondary-outline-bg: transparent !default;
$v-onboarding-button-secondary-outline-color: #ffffff !default;
$v-onboarding-button-secondary-outline-active-bg: #ffffff !default;
$v-onboarding-button-secondary-outline-active-color: #ffffff !default;
/* Main tabs */
$v-tab-home-icon: url('../img/tab-icons/ico-home.svg') !default;
$v-tab-home-selected-icon: url('../img/tab-icons/ico-home-selected.svg') !default;
$v-tab-receive-icon: url('../img/tab-icons/ico-receive.svg') !default;
$v-tab-receive-selected-icon: url('../img/tab-icons/ico-receive-selected.svg') !default;
$v-tab-settings-icon: url('../img/tab-icons/ico-settings.svg') !default;
$v-tab-settings-selected-icon: url('../img/tab-icons/ico-settings-selected.svg') !default;
$v-tab-scan-icon: url('../img/tab-icons/ico-scan.svg') !default;
$v-tab-scan-selected-icon: url('../img/tab-icons/ico-scan-selected.svg') !default;
$v-tab-send-icon: url('../img/tab-icons/ico-send.svg') !default;
$v-tab-send-selected-icon: url('../img/tab-icons/ico-send-selected.svg') !default;
/*
* Ionic variables
*/
$royal: $v-primary-color !default;
$positive: $v-accent-color !default;
$font-size-base: 16px !default;
$font-size-small: 12px !default;
$font-family-sans-serif: $v-font-family !default;
$font-family-light-sans-serif: $v-font-family-light !default;
$link-color: $v-accent-color !default;
$button-border-radius: $v-subtle-radius !default;
$button-height: 52px !default;
$button-padding: 16px !default;
$base-background-color: $v-subtle-gray !default;
$item-default-active-bg: $v-subtle-gray !default;
$item-icon-font-size: 24px !default;
$input-color: $v-dark-gray !default;
$input-border: $v-light-gray !default;
$input-label-color: $v-mid-gray !default;
$input-color-placeholder: lighten($v-dark-gray, 40%) !default;
$item-default-bg: #ffffff !default;
$item-default-border: $v-subtle-gray !default;
$item-default-text: $v-dark-gray !default;
$item-default-active-bg: darken(#ffffff, 7%) !default;
$item-default-active-border: darken($v-subtle-gray, 7%) !default;
$item-divider-bg: $v-subtle-gray !default;
$bar-default-border: $v-subtle-gray !default;
$bar-royal-bg: $v-primary-color !default;
$bar-royal-border: $v-primary-color !default;
$bar-royal-text: #ffffff !default;
$tabs-icon-size: 22px !default;
$ios-transition-duration: 200ms !default;
$card-box-shadow: $v-subtle-box-shadow !default;
$toggle-on-positive-border: $v-accent-color !default;
$toggle-on-positive-bg: $v-accent-color !default;

4
src/sass/views/add.scss
View file

@ -13,10 +13,10 @@
}
}
.add-type {
color: $dark-gray;
color: $v-dark-gray;
}
.bg{
background-color:rgb(100,124,232);
background-color: $v-icon-color;
height: 50px;
width: 50px;
padding:4px;

19
src/sass/views/address-book.scss
View file

@ -19,7 +19,7 @@
.icon {
&.valid {
padding-top: 3px;
color: #13E5B6;
color: $v-success-color;
}
&.invalid {
padding-top: 3px;
@ -39,17 +39,17 @@
}
.add-address-list {
.item {
color: $dark-gray;
color: $v-dark-gray;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
&.item-divider {
color: $mid-gray;
color: $v-mid-gray;
padding-bottom: .5rem;
font-size: .9rem;
}
}
.item-note {
color: $light-gray;
color: $v-light-gray;
}
}
}
@ -58,6 +58,9 @@
.scroll {
height:100%;
}
i.icon>svg#Add_Contact path.st0 {
stroke: $v-icon-negative-color;
}
.list {
.item {
color: #444;
@ -94,7 +97,7 @@
.big-icon-svg {
padding: 0 7px;
> .bg {
border-radius: 50%;
border-radius: $v-icon-border-radius;
width: 40px;
height: 40px;
box-shadow: none;
@ -128,16 +131,16 @@
font-weight: bold;
font-size: 12px;
display: block;
color: $mid-gray;
color: $v-mid-gray;
}
.big-icon-svg {
padding: 0 7px;
> .bg {
background-color: #f2f2f2;
border-radius: 50%;
border-radius: $v-icon-border-radius;
width: 70px;
height: 70px;
box-shadow: 0px 1px 5px rgba($mid-gray, .1);
box-shadow: 0px 1px 5px rgba($v-mid-gray, .1);
background-repeat: no-repeat;
background-clip: padding-box;
background-size: 103%;

17
src/sass/views/addresses.scss
View file

@ -7,7 +7,7 @@
&-description {
text-align: center;
font-size: 0.9em;
color: $mid-gray;
color: $v-mid-gray;
margin: 1rem 0;
a {
font-weight: bold;
@ -28,13 +28,16 @@
.banner-icon {
margin-top: 25px;
i {
box-shadow: $hovering-box-shadow;
box-shadow: $v-hovering-box-shadow;
img {
content: $v-tab-receive-selected-icon;
}
}
}
.addr-list {
.item {
color: $dark-gray;
color: $v-dark-gray;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
&.has-addr-value {
@ -42,7 +45,7 @@
padding-bottom: .65rem;
}
&.item-divider {
color: $mid-gray;
color: $v-mid-gray;
padding-bottom: .5rem;
font-size: .9rem;
}
@ -52,10 +55,10 @@
i {
font-size: 35px;
margin-right: 5px;
color: #647ce8;
color: $link-color;
}
span {
color: #647ce8;
color: $link-color;
font-weight: bold;
}
}
@ -82,7 +85,7 @@
}
}
.item-note {
color: $light-gray;
color: $v-light-gray;
}
}
}

6
src/sass/views/advancedSettings.scss
View file

@ -12,10 +12,10 @@
content: '';
}
&.item-divider {
color: $dark-gray;
color: $v-dark-gray;
}
.item-note {
color: $dark-gray;
color: $v-dark-gray;
}
}
.has-comment {
@ -24,7 +24,7 @@
.comment {
padding: 15px;
background-color: #fff;
color: $mid-gray;
color: $v-mid-gray;
font-size:0.9em;
}
}

38
src/sass/views/amount.scss
View file

@ -3,7 +3,7 @@
.recipient-label {
font-size: 14px;
padding-bottom: 0;
color: $mid-gray;
color: $v-mid-gray;
}
.item-no-bottom-border + .item {
border-top: 0;
@ -54,7 +54,7 @@
.title {
float: left;
padding-top: 10px;
color: $dark-gray;
color: $v-dark-gray;
font-weight: bold;
@media(max-height: 480px) {
padding: 0px;
@ -73,7 +73,7 @@
bottom: 254px;
top: 66px;
.light {
color: $light-gray;
color: $v-light-gray;
}
@media(max-height: 480px) {
top: 45px;
@ -93,11 +93,11 @@
font-size: 18px;
.title {
padding-top: 10px;
color: $dark-gray;
color: $v-dark-gray;
font-weight: bold;
.limits {
margin-top: 10px;
color: $light-gray;
color: $v-light-gray;
font-size: 12px;
}
.select {
@ -114,7 +114,7 @@
bottom: 254px;
top: 66px;
.light {
color: $light-gray;
color: $v-light-gray;
}
}
}
@ -131,15 +131,15 @@
}
}
&--placeholder {
color: $light-gray;
color: $v-light-gray;
}
}
&__number {
color: $dark-gray;
color: $v-dark-gray;
}
&__currency-toggle {
border: 1px solid $subtle-gray;
color: $dark-gray;
border: 1px solid $v-subtle-gray;
color: $v-dark-gray;
border-radius: 3px;
padding: 0 10px;
cursor: pointer;
@ -157,11 +157,11 @@
padding: 10px 0;
}
&--placeholder {
color: $light-gray;
color: $v-light-gray;
}
}
&__result {
color: $light-gray;
color: $v-light-gray;
font-size: .9em;
margin-bottom: -.9em;
line-height: 1;
@ -170,7 +170,7 @@
}
}
&__result-equiv {
color: $mid-gray;
color: $v-mid-gray;
font-size: 1.2em;
margin-top: 2rem;
@media(max-height: 480px) {
@ -186,7 +186,7 @@
position: absolute;
bottom: 0;
width: 100%;
color: $mid-gray;
color: $v-mid-gray;
.row {
padding: 0 !important;
@ -198,12 +198,12 @@
}
.operator {
background-color: $subtle-gray;
background-color: $v-subtle-gray;
font-weight: normal;
cursor: pointer;
&:active {
background-color: $light-gray;
background-color: $v-light-gray;
}
}
@ -221,10 +221,10 @@
.digit{
cursor: pointer;
border-top: 1px solid $subtle-gray;
border-left: 1px solid $subtle-gray;
border-top: 1px solid $v-subtle-gray;
border-left: 1px solid $v-subtle-gray;
&:active {
background-color: $subtle-gray;
background-color: $v-subtle-gray;
}
}

4
src/sass/views/bitpayCard.scss
View file

@ -134,7 +134,7 @@
}
}
.disclosure {
color: $light-gray;
color: $v-light-gray;
font-size: 12px;
text-align: left;
margin: 1rem;
@ -200,7 +200,7 @@
width: 100%;
}
.item-select select {
color: #667;
color: $v-mid-gray;
}
.get-started {

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

@ -49,7 +49,7 @@
color: rgba(255, 255, 255, .7);
}
.slider-pager .slider-pager-page {
color: $soft-blue;
color: $v-accent-color;
font-size: 8px;
margin: 0;
}

2
src/sass/views/bitpayServicesPreferences.scss
View file

@ -8,7 +8,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $light-gray;
color: $v-light-gray;
font-size: 14px;
}
&.item-icon-right {

9
src/sass/views/buyandsell.scss
View file

@ -7,12 +7,15 @@
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: $subtle-box-shadow;
border-radius: $v-icon-border-radius;
box-shadow: $v-subtle-box-shadow;
background-color: #fa912b;
img {
height: 100%;
width: 100%;
content: $v-bitcoin-icon;
background-color: $v-bitcoin-orange;
border-radius: $v-icon-border-radius;
}
}
.explain {
@ -30,6 +33,6 @@
}
}
.item-note {
color: $light-gray;
color: $v-light-gray;
}
}

2
src/sass/views/export.scss
View file

@ -10,7 +10,7 @@
cursor: pointer;
padding: 10px 5px;
border-bottom-width: 2px;
border-bottom-color: #172565;
border-bottom-color: $v-top-tabs-color;
}
input[type="password"] {
border: none;

8
src/sass/views/feedback/complete.scss
View file

@ -29,14 +29,14 @@
.feedback-title {
font-size: 20px;
font-weight: bold;
color: $dark-gray;
color: $v-dark-gray;
margin: 20px 10px;
text-align: center;
}
.subtitle {
padding: 10px 30px 20px;
text-align: center;
color: $mid-gray;
color: $v-mid-gray;
}
.icon-svg > img {
height: 16rem;
@ -54,7 +54,7 @@
}
.share-buttons {
padding: 50px 10px 30px;
background-color: $subtle-gray;
background-color: $v-subtle-gray;
text-align: center;
transform: translateY(100%);
opacity: 0;
@ -66,7 +66,7 @@
}
.share-buttons__action {
display: inline-block;
color: #667;
color: $v-mid-gray;
font-size: .9rem;
width: 90px;
height: 90px;

8
src/sass/views/feedback/rateApp.scss
View file

@ -2,7 +2,7 @@
background-color: #ffffff;
text-align: center;
.skip-rating {
color: $dark-gray;
color: $v-dark-gray;
position: absolute;
top: 5px;
right: 10px;
@ -16,7 +16,7 @@
.feedback-title {
font-size: 20px;
font-weight: bold;
color: $dark-gray;
color: $v-dark-gray;
margin: 80px 50px 10px;
text-align: center;
}
@ -26,13 +26,13 @@
}
.subtitle {
padding: 10px 30px 20px 40px;
color: #667;
color: $v-mid-gray;
}
.rate-buttons {
bottom: 0;
width: 100%;
position: absolute;
background-color: $subtle-gray;
background-color: $v-subtle-gray;
padding: 30px 0 15px;
}
}

8
src/sass/views/feedback/send.scss
View file

@ -14,7 +14,7 @@
padding-left: 10px;
font-size: 20px;
font-weight: bold;
color: $dark-gray;
color: $v-dark-gray;
}
.rating {
text-align: right;
@ -25,11 +25,11 @@
font-size: 1rem;
line-height: 1.5em;
font-weight: 300;
color: $dark-gray;
color: $v-dark-gray;
}
.user-feedback {
border-top: 1px solid $subtle-gray;
border-bottom: 1px solid $subtle-gray;
border-top: 1px solid $v-subtle-gray;
border-bottom: 1px solid $v-subtle-gray;
padding: 20px;
width: 100%;
margin-bottom: 20px;

2
src/sass/views/import.scss vendored
View file

@ -7,7 +7,7 @@
cursor: pointer;
padding: 10px 5px;
border-bottom-width: 2px;
border-bottom-color: #172565;
border-bottom-color: $v-top-tabs-color;
}
.qr-scan-icon a {
z-index: 10;

2
src/sass/views/includes/accountSelector.scss
View file

@ -29,7 +29,7 @@ account-selector {
background-color: $royal;
&.icon-add {
background-color: $light-gray;
background-color: $v-light-gray;
}
}

2
src/sass/views/includes/itemSelector.scss
View file

@ -17,7 +17,7 @@ item-selector {
overflow: visible;
> i {
color: #647ce8;
color: $v-accent-color;
padding: 0 0 5px 0;
margin-left: -5px;

16
src/sass/views/includes/modals/modals.scss
View file

@ -8,17 +8,17 @@
max-width: 350px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: $unmistakable-radius;
border-radius: $v-unmistakable-radius;
text-align: center;
&-header {
&-success {
background: $success-green;
background: $v-success-color;
}
&-warning {
background: $warning-orange;
background: $v-warning-color;
}
padding: 1rem;
border-radius: $unmistakable-radius $unmistakable-radius 0 0;
border-radius: $v-unmistakable-radius $v-unmistakable-radius 0 0;
min-height: 120px;
&-img{
height: 6rem;
@ -45,14 +45,14 @@
}
&-heading {
margin:0 0 1rem;
color: $dark-gray;
color: $v-dark-gray;
font-weight: bold;
font-size: 1.3rem;
margin-top: 1rem;
line-height: 1.3;
}
&-message {
color: $mid-gray;
color: $v-mid-gray;
font-weight: 200;
}
.button {
@ -60,12 +60,12 @@
}
&-content-success {
.button {
color: $success-green !important;
color: $v-success-color !important;
}
}
&-content-warning {
.button {
color: $warning-orange !important;
color: $v-warning-color !important;
}
}
}

8
src/sass/views/includes/txp-details.scss
View file

@ -202,8 +202,8 @@
}
> div {
border: 3px solid #13e5b6;
border-radius: 50%;
border: 3px solid $v-success-color;
border-radius: $v-icon-border-radius;
display: flex;
height: 26px;
width: 26px;
@ -212,7 +212,7 @@
justify-content: center;
font-weight: 600;
vertical-align: middle;
color: #13e5b6;
color: $v-success-color;
&.rejected {
background: #E15061;
@ -263,6 +263,6 @@
.glidera-description {
text-align: center;
font-size: 12px;
color: $mid-gray;
color: $v-mid-gray;
}
}

2
src/sass/views/includes/wallets.scss
View file

@ -6,7 +6,7 @@
}
.card {
max-width: 350px;
box-shadow:$subtle-box-shadow;
box-shadow:$v-subtle-box-shadow;
padding:0;
border-radius: 6px;
margin: 0 auto;

6
src/sass/views/integrations/glidera.scss
View file

@ -133,20 +133,20 @@
}
.glidera-lead {
margin: 2rem 1rem;
color: $dark-gray;
color: $v-dark-gray;
font-size: 20px;
line-height: 1.4;
text-align: center;
}
.glidera-text {
margin: 2rem 1rem;
color: $mid-gray;
color: $v-mid-gray;
font-size: 16px;
line-height: 1.4;
text-align: center;
}
.disclosure {
color: $light-gray;
color: $v-light-gray;
font-size: 12px;
text-align: left;
margin: 1rem;

2
src/sass/views/integrations/integrations.scss
View file

@ -45,7 +45,7 @@
margin-right: 2em;
}
input {
border-bottom: 2px solid $light-gray;
border-bottom: 2px solid $v-light-gray;
}
}
}

2
src/sass/views/join.scss
View file

@ -17,7 +17,7 @@
.icon {
&.valid {
padding-top: 3px;
color: #13E5B6;
color: $v-success-color;
}
&.invalid {
padding-top: 3px;

2
src/sass/views/onboarding/onboard-backup-request.scss
View file

@ -13,7 +13,7 @@
}
#arrow-down {
font-size: 4.2rem;
color: $soft-blue;
color: $v-accent-color;
}
#backup-tldr {
font-size: 16px;

14
src/sass/views/onboarding/onboard-collect-email.scss
View file

@ -41,20 +41,20 @@ $relish-success: 1.3s;
}
}
.heading {
color: $dark-gray;
color: $v-dark-gray;
font-size: 1.2rem;
font-weight: bold;
margin: 3rem 0 1rem;
}
.prompt {
margin: 1rem 1.5rem;
color: $mid-gray;
color: $v-mid-gray;
}
#email-form {
margin: 0 1.5rem 1rem;
}
#email-label {
border-radius: $visible-radius;
border-radius: $v-visible-radius;
background: rgba(200, 200, 200, 0.20);
height: 3rem;
margin-top:0;
@ -102,12 +102,12 @@ $relish-success: 1.3s;
}
.checkbox input:checked:after,
input:checked + .checkbox-icon:after {
border-color: rgb(19, 229, 182);
border-color: $v-onboarding-checkbox-on-border;
top: 4px;
left: 6px;
}
.item-content {
color: $mid-gray;
color: $v-mid-gray;
text-align: left;
margin-left: 75px;
white-space: initial;
@ -122,11 +122,11 @@ $relish-success: 1.3s;
}
.checkbox input:before,
.checkbox .checkbox-icon:before{
border-color: $soft-blue;
border-color: $v-onboarding-checkbox-on-border;
}
.checkbox input:checked:before,
.checkbox input:checked + .checkbox-icon:before {
border-color: rgb(19, 229, 182);
border-color: $v-onboarding-checkbox-on-border;
}
}

40
src/sass/views/onboarding/onboard-disclaimer.scss
View file

@ -1,15 +1,15 @@
#onboarding-disclaimer {
.checkbox input, .checkbox-icon {
position: relative;
width: 50px;
height: 50px;
width: 28px;
height: 28px;
display: block;
border: 0;
background: transparent;
cursor: pointer;
-webkit-appearance: none;
}
color: #fff;
color: $v-text-secondary-color;
height: 100%;
transition: transform 2.5s ease;
&.shrink{
@ -70,23 +70,17 @@
color: #fff;
text-align: left;
.checkbox input:before,
.checkbox .checkbox-icon:before,
.checkbox input:after,
.checkbox-icon:after,
.checkbox input:checked:after,
input:checked + .checkbox-icon:after{
border:none;
.checkbox .checkbox-icon:before{
border-color: $v-onboarding-checkbox-off-border;
background: transparent;
}
.checkbox input:before,
.checkbox .checkbox-icon:before {
padding: 1.2rem;
position: relative;
background:url("../img/onboarding-checkbox-unchecked.svg") top center no-repeat;
.checkbox input:after,
.checkbox .checkbox-icon:after{
border-color: $v-onboarding-checkbox-on-border;
}
.checkbox input:checked:before,
.checkbox input:checked + .checkbox-icon:before {
border:none;
background:url("../img/onboarding-checkbox-checked.svg") top center no-repeat;
border-color: $v-onboarding-checkbox-on-border;
}
.item-content {
width: 90%;
@ -136,7 +130,7 @@
}
}
#agree-to-terms {
background: #fff;
background: $v-tou-bg;
padding:1rem;
position: absolute;
bottom: 0;
@ -148,7 +142,7 @@
@include center-block();
}
.item{
color:rgb(58,58,58);
background-color: transparent;
padding-bottom: 2.5rem;
float: left;
border:none;
@ -157,7 +151,7 @@
}
}
p{
color:rgb(58,58,58);
color: $v-tou-color;
text-align: left;
}
@media (min-width:450px){
@ -168,16 +162,16 @@
}
.checkbox input:before,
.checkbox .checkbox-icon:before{
border-color:$soft-blue;
background:#fff;
border-color: $v-onboarding-checkbox-off-border;
background: transparent;
}
.checkbox input:after,
.checkbox .checkbox-icon:after{
border-color:#13e5b6;
border-color: $v-onboarding-checkbox-on-border;
}
.checkbox input:checked:before,
.checkbox input:checked + .checkbox-icon:before {
border-color: rgb(19, 229, 182);
border-color: $v-onboarding-checkbox-on-border;
}
button {
margin-top: 1.5rem;

4
src/sass/views/onboarding/onboard-tour.scss
View file

@ -20,9 +20,9 @@
}
.swiper-pagination {
&-bullet {
background: $soft-blue;
background: $v-onboarding-tour-swiper-pagination-bg;
&-active {
background: $soft-blue;
background: $v-onboarding-tour-swiper-pagination-bg;
}
}
}

2
src/sass/views/onboarding/onboard-welcome.scss
View file

@ -1,6 +1,6 @@
#onboard-welcome {
& > ion-content {
background: url(../img/onboarding-welcome-bg.png);
background: $v-onboarding-welcome-bg;
background-position: top center;
background-size: contain;
background-repeat: no-repeat;

36
src/sass/views/onboarding/onboarding.scss
View file

@ -1,15 +1,15 @@
.onboarding {
background: #1e3186;
color: #fff;
background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%);
background: $v-onboarding-gradient-top-color;
color: $v-onboarding-color;
background-image: linear-gradient(to bottom, $v-onboarding-gradient-top-color 0%, $v-onboarding-gradient-bottom-color 100%);
height: 100%;
text-align: center;
.bar.bar-header {
background: none;
border: 0 none transparent;
color: #fff;
color: $v-onboarding-bar-header-color;
button {
color: #fff;
color: $v-onboarding-bar-header-button-color;
}
}
.onboarding-topic,
@ -50,6 +50,18 @@
font-size: 14px;
}
}
svg#alert-icon g {
stroke: $v-onboarding-backup-alert-icon-color;
}
#arrow-down {
color: $v-onboarding-backup-alert-icon-color !important;
}
.back-button .icon:before {
color: $v-onboarding-button-back-color;
}
}
%cta-buttons {
@ -60,7 +72,7 @@
}
.pane-onboarding{
background: #0B1E4F;
background: $v-onboarding-pane-bg;
}
@import "terms-of-use";
@ -101,23 +113,23 @@
.onboarding-illustration {
&-secure {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-tour-phone.svg);
@extend %onboarding-illustration;
background-image: $v-onboarding-tour-phone-bg;
}
&-currency {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-tour-currency-bg.svg);
background-image: $v-onboarding-tour-currency-bg;
}
&-control {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-tour-control.svg);
background-image: $v-onboarding-tour-control-bg;
}
&-notifications {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-push-notifications.svg);
background-image: $v-onboarding-push-notification-bg;
}
&-backup-warning {
@extend %onboarding-illustration;
background-image: url(../img/backup-warning.svg);
background-image: $v-onboarding-backup-warning-bg;
}
}

69
src/sass/views/onboarding/terms-of-use.scss
View file

@ -2,24 +2,26 @@
.terms {
&__heading {
font-weight: bold;
color: $dark-gray;
color: $v-dark-gray;
}
}
}
#terms-of-use {
ion-header-bar {
background: #fff;
box-shadow: $subtle-box-shadow;
background: $bar-royal-bg;
box-shadow: $v-subtle-box-shadow;
color: $bar-royal-text;
.primary-buttons{
.button{
color: $bar-royal-text;
font-size: 2rem;
}
}
}
ion-content{
padding-top: 1.5rem;
color: $dark-gray;
color: $v-dark-gray;
margin-bottom: 210px;
p {
padding: 0 2.5%;
@ -29,63 +31,4 @@
}
}
}
#agree-to-terms {
background: #fff;
padding: 1rem;
position: absolute;
bottom: 0;
width: 100%;
.text-center {
text-align: center;
}
.checkbox input:before,
.checkbox .checkbox-icon:before {
border-radius: 50% !important;
background: none;
border-width: 2px;
padding: .9rem;
position: relative;
left: -7px;
top: -8px;
}
.checkbox input:checked:before,
.checkbox input:checked + .checkbox-icon:before {
border-color: $light-green;
}
.checkbox input:checked:after,
input:checked + .checkbox-icon:after {
border-color: $light-green;
top: 20%;
left: 11%;
}
.item {
color: $dark-gray;
padding-bottom: 1.2rem;
padding-bottom: 2.5rem;
float: left;
border: none;
width: 10%;
position: relative;
padding-right: 0;
padding-left: 50px;
.item-content {
white-space: normal;
}
}
p {
color: $dark-gray;
}
.checkbox input:before,
.checkbox .checkbox-icon:before {
border-color: $soft-blue;
}
.checkbox input:checked:before,
.checkbox input:checked + .checkbox-icon:before {
border-color: $light-green;
}
button {
margin-top: 1.5rem;
position: relative;
}
}
}

14
src/sass/views/starting.scss
View file

@ -1,11 +1,11 @@
#starting {
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%);
background: $v-primary-color;
background: -moz-linear-gradient(top, $v-primary-color 0%, $v-secondary-color 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, $v-primary-color), color-stop(100%, $v-secondary-color));
background: -webkit-linear-gradient(top, $v-primary-color 0%, $v-secondary-color 100%);
background: -o-linear-gradient(top, $v-primary-color 0%, $v-secondary-color 100%);
background: -ms-linear-gradient(top, $v-primary-color 0%, $v-secondary-color 100%);
background: linear-gradient(to bottom, $v-primary-color 0%, $v-secondary-color 100%);
color: #fff;
height: 100%;
.scroll-content {

11
src/sass/views/tab-home.scss
View file

@ -4,7 +4,8 @@
background-color: #4A90E2; // default wallet color
}
.icon-buy-bitcoin {
background-image: url("../img/icon-bitcoin.svg");
background-image: $v-bitcoin-icon;
background-color: $v-bitcoin-orange;
}
.icon-bitpay-card {
background-image: url("../img/icon-card.svg");
@ -78,14 +79,14 @@
& > .title {
font-size: 20px;
font-weight: bold;
color: $dark-gray;
color: $v-dark-gray;
margin: 20px 10px;
}
& > .subtitle {
font-size: 1rem;
line-height: 1.5em;
font-weight: 300;
color: $dark-gray;
color: $v-dark-gray;
margin: 20px 3em 2.5em;
}
.big-icon-svg{
@ -109,14 +110,14 @@
&__multisig-number {
font-size: .8rem;
font-weight: 300;
color: $light-gray;
color: $v-light-gray;
}
&__status-icon {
font-size: 18px;
margin-left: 5px;
position: relative;
top: 1px;
color: $light-gray;
color: $v-light-gray;
}
}
}

4
src/sass/views/tab-receive.scss
View file

@ -49,7 +49,7 @@
position: relative;
min-height: 40px;
#next-address {
color:$light-gray;
color:$v-light-gray;
}
}
.incomplete {
@ -127,7 +127,7 @@
@media(min-width:450px) {
font-size:1rem;
}
color:$light-gray;
color:$v-light-gray;
}
}
.qr {

9
src/sass/views/tab-scan.scss
View file

@ -1,5 +1,3 @@
$scannerBackgroundColor: #060d2d;
#tab-scan {
color: #fff;
text-align: center;
@ -7,12 +5,15 @@ $scannerBackgroundColor: #060d2d;
.bar-header {
opacity: .9;
}
svg#QR-scanner-guides path.st1 {
stroke: $v-scanner-guide-color;
}
.zero-state-cta {
padding-bottom: 6vh;
}
&-has-problems,
&-loading-camera {
background-color: $scannerBackgroundColor;
background-color: $v-scanner-background-color;
}
&-loading-camera {
height: 100%;
@ -72,5 +73,5 @@ $scannerBackgroundColor: #060d2d;
}
#cordova-plugin-qrscanner-still, #cordova-plugin-qrscanner-video-preview {
background-color: $scannerBackgroundColor !important;
background-color: $v-scanner-background-color !important;
}

7
src/sass/views/tab-send.scss
View file

@ -64,20 +64,23 @@
margin-top: 10px;
background: 0 none;
}
img {
content: $v-tab-send-selected-icon;
}
.item {
border-style: none;
}
& > .title {
font-size: 20px;
font-weight: bold;
color: $dark-gray;
color: $v-dark-gray;
margin: 20px 10px;
}
& > .subtitle {
font-size: 1rem;
line-height: 1.5em;
font-weight: 300;
color: $dark-gray;
color: $v-dark-gray;
margin: 20px 1em 2.5em;
}
.big-icon-svg{

24
src/sass/views/tab-settings.scss
View file

@ -4,7 +4,7 @@
background-image: url("../img/icon-bitpay.svg");
}
.item {
color: $dark-gray;
color: $v-dark-gray;
border-color: rgba(221, 221, 221, 0.3);
}
.has-comment {
@ -13,8 +13,8 @@
.comment {
padding: 15px;
background-color: #fff;
color: $mid-gray;
font-size:0.9em;
color: $v-mid-gray;
}
&-explanation, &-button-group {
padding: 0 1rem;
@ -22,11 +22,11 @@
}
&-heading {
font-size: 17px;
color: $dark-gray;
color: $v-dark-gray;
margin: 1rem 0;
}
&-description {
color: $mid-gray;
color: $v-mid-gray;
margin: 1rem 0;
font-size: 0.9em;
}
@ -42,7 +42,7 @@
white-space: nowrap;
}
.setting-value {
color: $light-gray;
color: $v-light-gray;
font-size: 14px;
}
.settings-input-group {
@ -58,7 +58,7 @@
}
.settings-list {
.item {
color: $dark-gray;
color: $v-dark-gray;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
&.has-setting-value {
@ -66,16 +66,16 @@
padding-bottom: .65rem;
}
&.item-divider {
color: $mid-gray;
color: $v-mid-gray;
padding-bottom: .5rem;
font-size: .9rem;
}
.icon {
color: $light-gray;
color: $v-light-gray;
}
}
.item-note {
color: $light-gray;
color: $v-light-gray;
}
.item-toggle .toggle,
.item-button-right > .button {
@ -100,11 +100,11 @@
&.circle{
left:8px;
.bg {
border-radius: 50%;
border-radius: $v-icon-border-radius;
width: 25px;
height: 25px;
padding:.1rem;
box-shadow: 0px 1px 5px rgba($mid-gray, .1);
box-shadow: 0px 1px 5px rgba($v-mid-gray, .1);
}
}
}
@ -138,7 +138,7 @@
#settings-fee {
.estimates {
font-size: 15px;
color: $dark-gray;
color: $v-dark-gray;
margin-bottom: .5rem;
}
.fee-minutes, .fee-rate {

24
src/sass/views/tabs.scss
View file

@ -4,34 +4,34 @@
background-position: center;
margin: 6px 0 2px;
&.ico-home {
background-image: url('../img/tab-icons/ico-home.svg');
background-image: $v-tab-home-icon;
}
&.ico-home-selected {
background-image: url('../img/tab-icons/ico-home-selected.svg');
background-image: $v-tab-home-selected-icon;
}
&.ico-receive {
background-image: url('../img/tab-icons/ico-receive.svg');
background-image: $v-tab-receive-icon;
}
&.ico-receive-selected {
background-image: url('../img/tab-icons/ico-receive-selected.svg');
background-image: $v-tab-receive-selected-icon;
}
&.ico-settings {
background-image: url('../img/tab-icons/ico-settings.svg');
background-image: $v-tab-settings-icon;
}
&.ico-settings-selected {
background-image: url('../img/tab-icons/ico-settings-selected.svg');
background-image: $v-tab-settings-selected-icon;
}
&.ico-scan {
background-image: url('../img/tab-icons/ico-scan.svg');
background-image: $v-tab-scan-icon;
}
&.ico-scan-selected {
background-image: url('../img/tab-icons/ico-scan-selected.svg');
background-image: $v-tab-scan-selected-icon;
}
&.ico-send {
background-image: url('../img/tab-icons/ico-send.svg');
background-image: $v-tab-send-icon;
}
&.ico-send-selected {
background-image: url('../img/tab-icons/ico-send-selected.svg');
background-image: $v-tab-send-selected-icon;
}
}
}
@ -39,12 +39,12 @@
#tab-home, #tab-send {
.card, .list {
.icon {
color: $light-gray;
color: $v-light-gray;
}
& > .item-heading {
font-weight: 700;
.icon {
color: $mid-gray;
color: $v-mid-gray;
}
}
}

1
src/sass/views/views.scss
View file

@ -9,6 +9,7 @@
@import "tab-scan";
@import "tab-send";
@import "tab-settings";
@import "wallet-colors";
@import "walletBalance";
@import "walletDetails";
@import "advancedSettings";

23
src/sass/views/wallet-backup-phrase.scss
View file

@ -9,7 +9,7 @@
padding: 1rem;
}
.password-prompt {
background-color: $subtle-gray;
background-color: $v-subtle-gray;
padding: 2rem;
.explanation {
padding: 0 1rem;
@ -29,14 +29,14 @@
.bar.bar-royal .title {
font-size: 1rem;
}
background: #fff;
background: $v-wallet-backup-bg;
text-align: center;
.backup-phrase {
background-color: $subtle-gray;
background: $v-wallet-backup-phrase-bg;
margin: auto;
border: 2px dashed darken($subtle-gray, 10%);
border-radius: $subtle-radius;
color: #2b2b2b;
border: 2px dashed darken($v-subtle-gray, 10%);
border-radius: $v-subtle-radius;
color: $v-wallet-backup-phrase-color;
text-align: center;
max-width: 500px;
min-height: 9rem;
@ -62,7 +62,7 @@
}
&-step-1 {
height: 70%;
color: $dark-gray;
color: $v-dark-gray;
.initial-prompt {
padding: 2.3rem;
@media(max-height: 480px) {
@ -94,13 +94,13 @@
}
}
#select-phrase {
background: $subtle-gray;
background: $v-wallet-backup-select-phrase-color;
.select-word {
&.button[disabled] {
background: transparent !important;
box-shadow: none !important;
color: transparent;
border: 1px solid rgb(211, 211, 211);
border: 1px solid $v-wallet-backup-select-word-disabled-color;
}
}
&-content {
@ -121,8 +121,9 @@
}
}
.select-word {
background: #fff;
box-shadow: $subtle-box-shadow;
background: $v-wallet-backup-select-word-bg;
color: $v-wallet-backup-select-word-color;
box-shadow: $v-subtle-box-shadow;
display: inline-block;
margin: 3px 0;
min-height: 35px;

29
src/sass/views/wallet-colors.scss Normal file
View file

@ -0,0 +1,29 @@
/*
* Generate wallet colors from color map
*/
.wallet-color-count {
content: '' + length($v-wallet-color-map);
}
/* background-color and color defaults should be the same */
$default-wallet-color: map-get( map-get($v-wallet-color-map, $v-default-wallet-color-index) , color);
.wallet-background-color-default {
background-color: $default-wallet-color;
}
.wallet-color-default {
color: $default-wallet-color;
}
/* generate classes for all colors */
@each $id, $map in $v-wallet-color-map {
.wallet-color-#{$id} {
background: map-get($map, color);
}
.wallet-color-#{$id}:before {
content: map-get($map, name);
margin-left: 2.4rem;
}
}

12
src/sass/views/walletBalance.scss
View file

@ -5,7 +5,7 @@
font-size: 16px;
&--total {
color: $mid-gray;
color: $v-mid-gray;
}
&--available {
@ -21,7 +21,7 @@
}
&--alternative {
color: $light-gray;
color: $v-light-gray;
font-size: 14px;
}
@ -29,14 +29,14 @@
&__title {
flex-grow: 1;
color: $dark-gray;
color: $v-dark-gray;
overflow: hidden;
}
&__icon {
float: left;
margin-right: 1rem;
color: $light-gray;
color: $v-light-gray;
font-size: 24px;
}
@ -81,13 +81,13 @@
&__heading {
font-size: 17px;
color: #445;
color: $v-dark-gray;
margin: 1rem 1rem 1rem 1rem;
}
&__description {
font-size: 12.5px;
color: #667;
color: $v-mid-gray;
margin: 0.7rem;
line-height: 16px;
}

12
src/sass/views/walletDetails.scss
View file

@ -2,23 +2,23 @@
&__tx-amount {
font-size: 16px;
&--recent {
color: $mid-gray;
color: $v-mid-gray;
font-weight: bold;
}
&--received {
color: #09C286;
}
&--sent {
color: $dark-gray;
color: $v-dark-gray;
}
}
&__tx-time {
color: $light-gray;
color: $v-light-gray;
font-size: 12.5px;
}
&__tx-title {
flex-grow: 1;
color: $dark-gray;
color: $v-dark-gray;
overflow: hidden;
}
&__tx-icon {
@ -207,7 +207,7 @@
background-color: #f2f2f2;
text-align: center;
font-size: 13px;
color: $mid-gray;
color: $v-mid-gray;
}
}
@ -244,6 +244,6 @@ a.item {
}
.updatingHistory {
color: #445;
color: $v-dark-gray;
font-size:0.9em;
}

4
src/sass/views/zero-state.scss
View file

@ -9,9 +9,9 @@
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
border-radius: $v-icon-border-radius;
padding: 13px;
box-shadow: $subtle-box-shadow;
box-shadow: $v-subtle-box-shadow;
background-color: #fff;
img {
height: 100%;