design(home): new icons and design improvements for the home tab
This commit is contained in:
Jason Dreyzehner
parent
15836bb817
commit
ceac7c2c2b
6 changed files with 48 additions and 399 deletions
|
|
@ -1,12 +1,22 @@
|
|||
/* Set ionic variables */
|
||||
$font-family-sans-serif: "Roboto", sans-serif;
|
||||
$font-family-light-sans-serif: "Roboto-Light", sans-serif-light;
|
||||
/* constants */
|
||||
$royal: #1e3186;
|
||||
$soft-blue: rgb(100,124,232);
|
||||
$base-background-color: #f5f5f5;
|
||||
$soft-blue: #647ce8;
|
||||
$subtle-gray: #f5f5f5;
|
||||
$roboto: "Roboto", sans-serif;
|
||||
$roboto-light: "Roboto-Light", sans-serif-light;
|
||||
|
||||
/* Ionic Workaround */
|
||||
/* Set ionic variables */
|
||||
$font-family-sans-serif: $roboto;
|
||||
$font-family-light-sans-serif: $roboto-light;
|
||||
$base-background-color: $subtle-gray;
|
||||
$item-default-active-bg: $subtle-gray;
|
||||
|
||||
$ios-transition-duration: 200ms;
|
||||
|
||||
/* Ionic Workarounds */
|
||||
// Please include a description of the problem solved by the workaround.
|
||||
|
||||
// class to dynamically hide the ion-nav-bar for v1 Amazon flow
|
||||
ion-nav-bar.hide { display: block !important; }
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -438,363 +438,6 @@ ul.wallet-selection.wallets {
|
|||
}
|
||||
|
||||
// General purpose
|
||||
.dn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dni {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.pr {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pa {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.m0 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.p0i {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.db {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dib {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.size-10 {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.size-12 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.size-14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.size-16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.size-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.size-21 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.size-24 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.size-28 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.size-32 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.size-36 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.size-42 {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.size-48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.size-60 {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.size-72 {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
.m5 {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.m5t {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.m8t {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.m5b {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.m5r {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.m10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.m10b {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.m3t {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.m10t {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.m15b {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.m15r {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.m20b {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.m30b {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.m40b {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.m50b {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.m10r {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.m40r {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.m55r {
|
||||
margin-right: 55px;
|
||||
}
|
||||
|
||||
.m25r {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.m10l {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.m5l {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.m15l {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.m15t {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.m20r {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.m20t {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.m20ti {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
.m20tp {
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
.m30tp {
|
||||
margin-top: 30%;
|
||||
}
|
||||
|
||||
.m15 {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.m15h {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.p10t {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.p10h {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.p15h {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.p0r {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.p70r {
|
||||
padding-right: 70px;
|
||||
}
|
||||
|
||||
.p70l {
|
||||
padding-left: 70px;
|
||||
}
|
||||
|
||||
.p5h {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.p20h {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.p20v {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.p20b {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.p25b {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
.p25l {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.p15l {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.p15 {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.p20 {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.p15t {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.p20t {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.p50t {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.p10 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.p10i {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.p10b {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.p45t {
|
||||
padding-top: 45px;
|
||||
}
|
||||
|
||||
.p60t {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.p60b {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.m60t {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.p45li {
|
||||
padding-left: 45px !important;
|
||||
}
|
||||
|
||||
.m30v {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.m15v {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.m10h {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.m10v {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.m20v {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.m30v {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.m30a {
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.m-negative-l {
|
||||
margin-left: -0.9375rem;
|
||||
}
|
||||
|
||||
.br100 {
|
||||
border-radius: 100% !important;
|
||||
}
|
||||
|
||||
.lh {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.lh140 {
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.oh {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -993,6 +636,7 @@ input[type=number] {
|
|||
@import "views/confirm";
|
||||
@import "views/tab-home";
|
||||
@import "views/tab-receive";
|
||||
@import "views/tab-scan";
|
||||
@import "views/tab-send";
|
||||
@import "views/tab-settings";
|
||||
@import "views/walletDetails";
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
#tab-home {
|
||||
.icon-create-wallet {
|
||||
background-image: url("../img/icon-bitcoin.svg");
|
||||
background-image: url("../img/icon-wallet.svg");
|
||||
background-color: #4A90E2; // default wallet color
|
||||
}
|
||||
.icon-buy-bitcoin {
|
||||
background-image: url("../img/icon-gift.svg");
|
||||
background-image: url("../img/icon-bitcoin.svg");
|
||||
}
|
||||
.icon-bitpay-card {
|
||||
background-image: url("../img/icon-bitpay.svg");
|
||||
background-image: url("../img/icon-card.svg");
|
||||
background-color: #1e3186;
|
||||
}
|
||||
.icon-gift {
|
||||
background-image: url("../img/icon-gift.svg");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue