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

Merge remote-tracking branch 'origin/wallet/task/439' into wallet/task/514

Browse source 
# Conflicts:
#	src/js/controllers/amount.js
This commit is contained in:
Sebastiaan Pasma 2018-08-01 11:16:59 +02:00
commit 5372ba3dac
No known key found for this signature in database
GPG key ID: 9A2B0C8B95A1D26F
18 changed files with 785 additions and 336 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/sass/components/amount.scss Normal file
View file

@ -0,0 +1,35 @@
.amount {
.start,
.middle,
.end,
.currency {
display: inline-block;
}
.start {
font-size: 1em;
}
.middle {
font-size: 0.7857em;
margin-left: 5px;
}
.end {
font-size: 0.7857em;
margin-left: 5px;
}
&.size-equal {
.middle,
.end {
font-size: 1em;
}
}
.currency {
font-size: 1em;
margin-left: 5px;
text-transform: uppercase;
}
}

1
src/sass/components/components.scss Normal file
View file

@ -0,0 +1 @@
@import "amount.scss";

1
src/sass/main.scss
View file

@ -9,4 +9,5 @@
@import "mixins/mixins";
@import "views/views";
@import "directives/directives";
@import "components/components";
@import "shame";

5
src/sass/variables.scss
View file

@ -9,6 +9,7 @@ $v-font-family-light: "Roboto-Light", sans-serif-
/* Colors */
$v-bitcoin-orange: #fab915 !default;
$v-off-black: #262424;
$v-dark-gray: #445 !default;
$v-mid-gray: #667 !default;
$v-light-gray: #9b9bab !default;
@ -24,8 +25,11 @@ $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'),
@ -77,6 +81,7 @@ $v-button-primary-active-bg: darken($v-accent-color, 10%
$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;

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

@ -244,6 +244,18 @@
flex-direction: column;
justify-content: center;
.send-amount-header-footer {
flex: 1 1 auto;
min-height: 20px;
.warning {
font-weight: bold;
font-size: 12px;
padding: 0 6px 6px 6px;
text-align: center;
}
}
.send-amount-tool {
flex: 0 1 auto;
@ -260,6 +272,8 @@
}
.primary-amount {
color: #333;
font-weight: bold;
input, .unit, .primary-amount-display {
font-size: 1.8em;
@ -329,16 +343,15 @@
line-height: 1em;
}
.unit {
font-weight: bold;
}
.primary-amount-display {
margin-right: 5px;
word-break: break-all;
}
}
.alternative-amount {
color: #6F6F70;
}
.switch-currencies {
position: absolute;
right: 0;
@ -351,27 +364,56 @@
}
}
}
}
}
.send-amount-actions {
margin-top: 15px;
.send-amount-extras {
display: flex;
flex: 0 0 auto;
/* So that if only one item is present, it appears on the right. */
flex-direction: row-reverse;
font-size: 12px;
align-items: center;
justify-content: space-between;
margin: 0 14px;
.available-funds {
color: #6F6F70;
}
.warning {
color: $v-warning-color-2;
}
.extra,
button.extra {
/*display: flex;*/
flex: 0 1 auto;
}
button.extra {
background: none;
border: none;
color: #000;
font-family: 'ProximaNova';
font-size: 14px;
line-height: normal;
min-height: auto;
min-width: auto;
padding: 0;
}
.button .icon:before {
font-size: 14px;
line-height: normal;
}
.button {
span {
display: flex;
align-items: center;
justify-content: center;
.button {
flex: 1 1 auto;
line-height: 1.2em;
+ .button {
margin-left: 10px;
}
span {
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
@ -394,37 +436,58 @@
.keypad-container {
position: relative;
font-size: 18px;
line-height: 2em;
//flex: 0 1 196px;
@media (min-height: 667px) {
font-size: 24px;
}
@media(max-height: 480px) {
font-size: 12px;
}
@media (min-height: 667px) {
//flex: 0 1 224px;
}
.sendmax {
background: $v-off-black;
.button {
color: white;
background: black;
border: 1px solid $v-off-black;
border-radius: 0;
font-size: 0.8em;
line-height: 2em;
width: 100%;
.available-funds-amount {
color: #C9C9C9;
}
&:active {
background-color: $v-dark-gray;
}
}
}
.keypad {
text-align: center;
font-size: 18px;
font-weight: lighter;
position: absolute;
bottom: 0;
width: 100%;
color: $v-mid-gray;
color: $v-text-primary-color;
@media (min-height: 667px) {
font-size: 24px;
}
.row {
padding: 0 !important;
margin: 0 !important;
}
.col {
line-height: 38px;
@media (min-height: 667px) {
line-height: 45px;
}
}
.row {
&:last-child {
@ -458,23 +521,34 @@
.digit{
cursor: pointer;
border-top: 1px solid $v-subtle-gray;
border-left: 1px solid $v-subtle-gray;
background-color: #000;
border: 1px solid $v-off-black;
transition: all 0.1s ease;
&:active {
background-color: $v-subtle-gray;
background-color: $v-dark-gray;
}
}
@media(max-height: 480px) {
font-size: 12px;
}
}
}
.button-primary {
background-color: $v-primary-color;
border-radius: 0;
font-weight: bold;
}
.button-primary[disabled] {
background-color: $v-button-primary-disabled-bg;
opacity: 1;
}
}
background: #494949;
.warning {
color: $v-warning-color-2;
}
background: $v-background-under-card;
ion-content {
margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */