Merge pull request #431 from bitjson/feature/settings-polish
Design: settings polish
This commit is contained in:
Gustavo Maximiliano Cortez
GitHub
commit
b836e3b9ab
41 changed files with 422 additions and 368 deletions
|
|
@ -1,18 +1,4 @@
|
|||
.gravatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.gravatar-content {
|
||||
position: relative;
|
||||
height: 70px;
|
||||
border-color: #172565;
|
||||
background-color: #1e3186;
|
||||
background-image: linear-gradient(0deg, #172565, #172565 0%, transparent 0%);
|
||||
color: #fff;
|
||||
margin-bottom: 50px;
|
||||
.gravatar {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
left: 41%;
|
||||
}
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,20 @@
|
|||
.icon.bp-arrow-right {
|
||||
@extend .ion-ios-arrow-right;
|
||||
@extend .just-a-hint;
|
||||
}
|
||||
|
||||
.icon.bp-arrow-down {
|
||||
@extend .ion-ios-arrow-down;
|
||||
@extend .just-a-hint;
|
||||
}
|
||||
|
||||
.icon.bp-arrow-up {
|
||||
@extend .ion-ios-arrow-up;
|
||||
@extend .just-a-hint;
|
||||
}
|
||||
|
||||
.just-a-hint {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.item.item-big-icon-left {
|
||||
|
|
|
|||
|
|
@ -15,19 +15,6 @@ ion-tabs.ion-tabs-transparent {
|
|||
background: none transparent;
|
||||
}
|
||||
|
||||
// Some overrides for the card class which can't be set by variable
|
||||
.card, .list {
|
||||
.icon {
|
||||
color: $light-gray;
|
||||
}
|
||||
& > .item-heading {
|
||||
font-weight: 700;
|
||||
.icon {
|
||||
color: $mid-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .placeholder-icon padding cannot be modified by a variable
|
||||
$placeholder-icon-padding: 10px;
|
||||
.placeholder-icon {
|
||||
|
|
@ -38,3 +25,8 @@ $placeholder-icon-padding: 10px;
|
|||
padding-left: $placeholder-icon-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// .item-input-wrapper background cannot be modified by a variable
|
||||
.item-input-wrapper {
|
||||
background: none transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
$royal: #1e3186;
|
||||
$soft-blue: #647ce8;
|
||||
$fill-blue: #D5DFFF;
|
||||
$subtle-gray: #f7f7f7;
|
||||
$subtle-gray: darken(#fff, 5%);
|
||||
$roboto: "Roboto", sans-serif;
|
||||
$roboto-light: "Roboto-Light", sans-serif-light;
|
||||
$success-green: #17ae8c;
|
||||
|
|
@ -10,7 +10,7 @@ $warning-orange: #ffa500;
|
|||
$dark-gray: #445;
|
||||
$mid-gray: #667;
|
||||
$light-gray: #9b9bab;
|
||||
$subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
$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;
|
||||
|
|
@ -18,21 +18,34 @@ $unmistakable-radius: 12px;
|
|||
|
||||
/* Set ionic variables */
|
||||
|
||||
$positive: $soft-blue;
|
||||
$positive: $soft-blue;
|
||||
|
||||
$font-size-base: 16px;
|
||||
$font-size-small: 12px;
|
||||
$font-family-sans-serif: $roboto;
|
||||
$font-family-light-sans-serif: $roboto-light;
|
||||
$font-size-base: 16px;
|
||||
$font-size-small: 12px;
|
||||
$font-family-sans-serif: $roboto;
|
||||
$font-family-light-sans-serif: $roboto-light;
|
||||
|
||||
$button-border-radius: $visible-radius;
|
||||
$button-height: 52px;
|
||||
$button-padding: 16px;
|
||||
$button-border-radius: $visible-radius;
|
||||
$button-height: 52px;
|
||||
$button-padding: 16px;
|
||||
|
||||
$base-background-color: $subtle-gray;
|
||||
$base-background-color: $subtle-gray;
|
||||
|
||||
$item-default-active-bg: $subtle-gray;
|
||||
$item-icon-font-size: 24px;
|
||||
$item-default-active-bg: $subtle-gray;
|
||||
$item-icon-font-size: 24px;
|
||||
|
||||
$input-color: $dark-gray;
|
||||
$input-border: $light-gray;
|
||||
$input-label-color: $mid-gray;
|
||||
$input-color-placeholder: lighten($dark-gray, 40%);
|
||||
|
||||
$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%);
|
||||
|
||||
$bar-default-border: $subtle-gray;
|
||||
|
||||
$tabs-icon-size: 22px;
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
.add-type {
|
||||
color: $dark-gray;
|
||||
}
|
||||
.bg{
|
||||
background-color:rgb(100,124,232);
|
||||
height: 50px;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,15 @@
|
|||
#add-address{
|
||||
.list{
|
||||
background: #ffffff;
|
||||
#add-address {
|
||||
.zero-state-cta {
|
||||
padding-bottom: 3vh;
|
||||
}
|
||||
.list {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
#view-address-book {
|
||||
.scroll{
|
||||
.scroll {
|
||||
height:100%;
|
||||
}
|
||||
#add-contact{
|
||||
min-width: 300px;
|
||||
img{
|
||||
width: 10rem;
|
||||
display: inline-block;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
.item {
|
||||
color: #444;
|
||||
|
|
@ -67,4 +60,26 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#address-book-view {
|
||||
.bar.bar-royal {
|
||||
border: 0 transparent;
|
||||
}
|
||||
.gravatar-content {
|
||||
position: relative;
|
||||
height: 70px;
|
||||
border-color: $royal;
|
||||
background-color: $royal;
|
||||
padding-top: 20px;
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.address-book-field-label {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
color: $mid-gray;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,6 @@
|
|||
.settings {
|
||||
.item {
|
||||
color: #444;
|
||||
border-color: rgba(221, 221, 221, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
#advanced-settings {
|
||||
.list {
|
||||
.item {
|
||||
color: #444;
|
||||
border-top: none;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -23,31 +12,19 @@
|
|||
content: '';
|
||||
}
|
||||
&.item-divider {
|
||||
color: rgba(74, 74, 74, .8);
|
||||
}
|
||||
&.item-heading {
|
||||
&:before {
|
||||
top: 99%
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&:before {
|
||||
width: 0;
|
||||
}
|
||||
color: $dark-gray;
|
||||
}
|
||||
.item-note {
|
||||
color: rgb(58, 58, 58);
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
.has-comment {
|
||||
border-bottom: 0 none;
|
||||
}
|
||||
.comment {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
color: rgba(74, 74, 74, 0.8);
|
||||
}
|
||||
.divider-comment {
|
||||
padding: 15px;
|
||||
color: rgba(74, 74, 74, 0.8);
|
||||
font-size: 15px;
|
||||
color: $mid-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
input:checked + .checkbox-icon:after {
|
||||
border-color: rgb(19, 229, 182);
|
||||
top: 4px;
|
||||
left: 5px;
|
||||
left: 3px;
|
||||
}
|
||||
.item-content {
|
||||
width: 90%;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,18 @@
|
|||
border-top:none;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-top:1.5rem;
|
||||
&.wallet{
|
||||
.big-icon-svg{
|
||||
& > .bg{
|
||||
padding: .25rem
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-sub {
|
||||
&:first-child:before {
|
||||
width: 100%
|
||||
}
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -37,29 +49,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&.item-heading{
|
||||
&:before{
|
||||
width:100% !important;
|
||||
top:99%
|
||||
}
|
||||
}
|
||||
&:nth-child(1){
|
||||
&:before{
|
||||
width:0;
|
||||
}
|
||||
}
|
||||
&:nth-child(2):last-child{
|
||||
&:before{
|
||||
width:0;
|
||||
}
|
||||
}
|
||||
&.wallet{
|
||||
.big-icon-svg{
|
||||
& > .bg{
|
||||
padding: .25rem
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.next-step.item {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,60 @@
|
|||
.settings {
|
||||
.item {
|
||||
color: #444;
|
||||
color: $dark-gray;
|
||||
border-color: rgba(221, 221, 221, 0.3);
|
||||
}
|
||||
&-explaination, &-button-group {
|
||||
padding: 0 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
&-heading {
|
||||
font-size: 17px;
|
||||
color: $dark-gray;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
&-description {
|
||||
font-size: 15px;
|
||||
color: $mid-gray;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.setting-title, .setting-value {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.setting-value {
|
||||
color: $light-gray;
|
||||
font-size: 14px;
|
||||
}
|
||||
.settings-input-group {
|
||||
background-color: #fff;
|
||||
.item-stacked-label {
|
||||
padding: 1rem;
|
||||
}
|
||||
.input-label {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.settings-list {
|
||||
.item {
|
||||
color: $dark-gray;
|
||||
padding-top: 1.3rem;
|
||||
padding-bottom: 1.3rem;
|
||||
&.item-divider {
|
||||
color: $mid-gray;
|
||||
padding-bottom: .5rem;
|
||||
font-size: .9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tab-settings {
|
||||
.list {
|
||||
.item {
|
||||
color: #444;
|
||||
border-top: none;
|
||||
padding-top: 1.3rem;
|
||||
padding-bottom: 1.3rem;
|
||||
.big-icon-svg {
|
||||
& > .bg{
|
||||
width:20px;
|
||||
|
|
@ -23,9 +66,10 @@
|
|||
left:8px;
|
||||
.bg {
|
||||
border-radius: 50%;
|
||||
width:30px;
|
||||
height:30px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
padding:.1rem;
|
||||
box-shadow: 0px 1px 5px rgba($mid-gray, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -39,11 +83,6 @@
|
|||
right: 0;
|
||||
content: '';
|
||||
}
|
||||
&.item-divider {
|
||||
color: $mid-gray;
|
||||
padding-bottom: .5rem;
|
||||
font-size: .9rem;
|
||||
}
|
||||
&.item-heading {
|
||||
&:before {
|
||||
top: 99%
|
||||
|
|
@ -54,12 +93,43 @@
|
|||
width: 0;
|
||||
}
|
||||
}
|
||||
.item-note {
|
||||
color: $light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-radio .radio-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#settings-fee {
|
||||
.estimates {
|
||||
font-size: 15px;
|
||||
color: $dark-gray;
|
||||
}
|
||||
.fee-minutes, .fee-rate {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.fee-policies {
|
||||
border-color: #fff;
|
||||
border-width: 2px 0;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
.settings-color-name {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.settings-color-block {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 10px;
|
||||
float: left; // we don't want these indicators to affect their container's sizing
|
||||
}
|
||||
|
||||
#settings-tos {
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,3 +35,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tab-home, #tab-send {
|
||||
.card, .list {
|
||||
.icon {
|
||||
color: $light-gray;
|
||||
}
|
||||
& > .item-heading {
|
||||
font-weight: 700;
|
||||
.icon {
|
||||
color: $mid-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
@import "bitpayCard";
|
||||
@import "address-book";
|
||||
@import "wallet-backup-phrase";
|
||||
@import "address-book";
|
||||
@import "zero-state";
|
||||
@import "onboarding/onboarding";
|
||||
@import "includes/walletActivity";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue