Wallet/src/sass/variables.scss
2018-08-03 14:28:56 +02:00

203 lines
12 KiB
SCSS

/*
* App variables
*/
/* Fonts */
$v-font-family: "Roboto", sans-serif !default;
$v-font-family-light: "Roboto-Light", sans-serif-light !default;
/* Colors */
$v-bitcoin-orange: #fab915 !default;
$v-bitcoin-core: #535353 !default;
$v-off-black: #262424;
$v-dark-gray: #445 !default;
$v-mid-gray: #667 !default;
$v-light-gray: #9b9bab !default;
$v-subtle-gray: darken(#ffffff, 5%) !default;
$v-primary-color: #1e3186 !default;
$v-secondary-color: #111b49 !default;
$v-accent-color: #647ce8 !default;
$v-text-primary-color: #1e3186 !default;
$v-text-secondary-color: #ffffff !default;
$v-text-accent-color: #647ce8 !default;
$v-success-color: #13e5b6 !default;
$v-warning-color: #ffa500 !default;
$v-warning-color-2: #b7664d;
$v-error-color: #ef473a !default;
$v-background-under-card: #f2f2f2;
$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: #eeb640, name: 'Light Orange'),
7: (color: #535353, name: 'Dark Grey'),
8: (color: #77dada, name: 'Turquoise Blue'),
9: (color: #4a90e2, name: 'Cornflower Blue'),
10: (color: #484ed3, name: 'Free Speech Blue'),
11: (color: #9b59b6, name: 'Deep Lilac'),
12: (color: #e856ef, name: 'Free Speech Magenta'),
13: (color: #ff599e, name: 'Brilliant Rose'),
14: (color: #7a8c9e, name: 'Light Slate Grey')
) !default;
/* Theme */
$v-default-wallet-color-index: 7 !default; // See $v-wallet-color-map
$v-default-cashwallet-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;
$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;
$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-disabled-bg: $v-mid-gray;
$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;
$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;
/* Slide */
$v-slide-bg-color: $v-accent-color !default;
$v-slider-bg-color: #5063B9 !default;
$v-slide-text-color: #FFFFFF !default;
$v-success-bg-color: #11D1A6 !default;
/* 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-accent-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-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;