BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(common): gc common.scss, organize styles in proper places

This commit is contained in:
Jason Dreyzehner 2016-10-03 19:38:57 -04:00
parent 9bf5d0f4ce
commit 99573f30b8
21 changed files with 163 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/views/add.html
View File

@ -12,7 +12,7 @@
<img src="img/icon-wallet.svg" class="bg"/>
</i>
<h2 translate>New Personal Wallet</h2>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-remove-animate item-icon-right item-icon-left item-big-icon-left" type="item-text-wrap" ui-sref="tabs.add.create-shared">
@ -20,7 +20,7 @@
<img src="img/icon-wallet.svg" class="bg"/>
</i>
<h2 translate>Create Shared Wallet</h2>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-remove-animate item-icon-right item-icon-left item-big-icon-left" type="item-text-wrap" ui-sref="tabs.add.join">
@ -28,7 +28,7 @@
<img src="img/item-ico-addwallet.svg" class="bg join"/>
</i>
<h2 translate>Join shared wallet</h2>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-remove-animate item-icon-right item-icon-left item-big-icon-left" type="item-text-wrap" ui-sref="tabs.add.import">
@ -36,7 +36,7 @@
<img src="img/item-ico-import.svg" class="bg"/>
</i>
<h2 translate>Import wallet</h2>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</ion-list>

2
public/views/addressbook.html
View File

@ -31,7 +31,7 @@
<gravatar name="{{addrEntry.name}}" width="50" email="{{addrEntry.email}}"></gravatar>
<h2>{{addrEntry.name}}</h2>
<p>{{addrEntry.address}}</p>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
<ion-option-button class="button-assertive" ng-click="remove(addrEntry.address)">
<i class="icon ion-minus-circled"></i>

2
public/views/amazon.html
View File

@ -33,7 +33,7 @@
<a class="item item-icon-left item-icon-right" href ui-sref="tabs.giftcards.amazon.buy">
<i class="icon ion-bag"></i>
Buy Gift Card
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>

2
public/views/buyandsell.html
View File

@ -8,7 +8,7 @@
<ion-list>
<ion-item class="item item-icon-right" ui-sref="tabs.buyandsell.glidera">
<img src="img/glidera-logo.png" width="90">
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</ion-item>
</ion-list>
</ion-content>

6
public/views/glidera.html
View File

@ -87,7 +87,7 @@
<span class="item-note" ng-show="email">
{{email}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>
<div class="padding">
@ -112,14 +112,14 @@
href ui-sref="tabs.buyandsell.glidera.buy">
<img src="img/buy-bitcoin.svg" alt="buy bitcoin" width="30">
Buy Bitcoin
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right"
ng-show="status.userCanSell"
href ui-sref="tabs.buyandsell.glidera.sell">
<img src="img/sell-bitcoin.svg" alt="buy bitcoin" width="30">
Sell Bitcoin
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>

12
public/views/preferences.html
View File

@ -14,7 +14,7 @@
<span class="item-note">
{{wallet.name}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item" ng-show="wallet.isPrivKeyExternal()">
<span translate>Hardware Wallet</span>
@ -27,7 +27,7 @@
<span class="item-note" ng-style="{'color': wallet.color}">
&block;
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesEmail">
<span translate>Email Notifications</span>
@ -35,14 +35,14 @@
<span ng-if="!wallet.email" translate>Disabled</span>
<span ng-if="wallet.email">{{wallet.email}}</span>
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider" translate>
Security
</div>
<a class="item item-icon-right" ui-sref="tabs.preferences.backupWarning({from: 'tabs.preferences'})" ng-hide="wallet.isPrivKeyExternal()">
<span translate>Backup</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div ng-show="wallet.canSign()">
<ion-toggle ng-model="encryptEnabled.value" toggle-class="toggle-balanced" ng-change="encryptChange()">
@ -56,12 +56,12 @@
</div>
<a class="item item-icon-right" ui-sref="tabs.preferences.deleteWords" ng-show ="!deleted">
<span translate>Delete recovery phrase</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider"></div>
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesAdvanced">
<span translate>Advanced</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>
</ion-content>

6
public/views/preferencesAbout.html
View File

@ -28,17 +28,17 @@
<a class="item item-icon-left item-icon-right" ui-sref="tabs.about.termsOfUse">
<i class="icon ion-ios-list-outline"></i>
<span translate>Terms of Use</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.about.translators">
<i class="icon ion-ios-people-outline"></i>
<span translate>Translators</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.about.logs">
<i class="icon ion-ios-copy-outline"></i>
<span translate>Session log</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>
</ion-content>

12
public/views/preferencesAdvanced.html
View File

@ -10,27 +10,27 @@
</div>
<a class="item item-icon-right" ui-sref="tabs.preferences.information">
<span translate>Wallet Information</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ng-show="network == 'livenet'" ui-sref="tabs.preferences.paperWallet">
<span translate>Sweep paper wallet</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ui-sref="tabs.preferences.export">
<span translate>Export Wallet</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesBwsUrl">
<span translate>Wallet Service URL</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesHistory">
<span translate>Transaction History</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ui-sref="tabs.preferences.delete">
<span translate>Delete Wallet</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>
</ion-content>

4
public/views/preferencesDeleteWallet.html
View File

@ -5,13 +5,13 @@
</ion-nav-back-button>
</ion-nav-bar>
<ion-content>
<div class="white-bg padding">
<div class="padding">
<h1 class="text-center assertive" translate>Warning!</h2>
<div class="padding text-center">
<p translate>
Permanently delete this wallet.
</p>
<p translate class="bold-text">
<p translate>
THIS ACTION CANNOT BE REVERSED
</p>
</div>

18
public/views/tab-settings.html
View File

@ -11,7 +11,7 @@
<img src="img/icon-address-book.svg" class="bg"/>
</i>
<span translate>Address Book</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider" translate>Preferences</div>
@ -21,7 +21,7 @@
<img src="img/icon-notifications.svg" class="bg"/>
</i>
<span translate>Notifications</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.language">
@ -32,7 +32,7 @@
<span class="item-note">
{{currentLanguageName|translate}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.unit">
@ -43,7 +43,7 @@
<span class="item-note">
{{unitName}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.altCurrency">
@ -54,7 +54,7 @@
<span class="item-note">
{{selectedAlternative.name}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.fee">
@ -65,7 +65,7 @@
<span class="item-note">
{{feeOpts[currentFeeLevel]|translate}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider" ng-show="wallets[0]" translate>Wallets Preferences</div>
@ -80,13 +80,13 @@
<span class="right text-light assertive" ng-show="!item.isComplete()" translate>
Incomplete
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider"></div>
<a class="item item-icon-right" href ui-sref="tabs.advanced">
<span translate>Advanced</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider"></div>
@ -95,7 +95,7 @@
<img src="img/icon-about.svg" class="bg"/>
</i>
<span translate>About</span> {{appName}}
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>
</ion-content>

131
src/sass/common.scss
View File

@ -1,131 +0,0 @@
.icon.nav-item-arrow-right {
color: #666;
font-size: 26px;
@extend .ion-ios-arrow-right;
}
.icon.nav-item-arrow-down {
color: #666;
font-size: 26px;
@extend .ion-ios-arrow-down;
}
.icon.nav-item-arrow-up {
color: #666;
font-size: 26px;
@extend .ion-ios-arrow-up;
}
.item.item-heading {
font-weight: bold;
}
.item.item-footer {
font-weight: lighter;
}
.icon.close-home-tip {
color: #666;
font-size: 38px;
}
.icon.list-add-button {
color: #666;
font-size: 38px;
}
.item.item-big-icon-left {
padding-left: 74px;
}
.item-no-bottom-border + .item {
border-top: 0;
}
.big-icon-svg {
padding: 0 7px;
> .bg {
border-radius: 50%;
width: 40px;
height: 40px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
background-repeat:no-repeat;
background-clip: padding-box;
background-size: 103%;
&.green{
background: rgb(1, 209, 162);
}
}
}
.white-bg{
background: #fff;
}
.overlay {
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
background: rgba(0,0,0,.4);
z-index: 4;
}
.back-button {
border: 0;
.icon:before {
color: #fff;
font-size: 30px !important;
font-weight: bold;
margin-left: 5px;
}
}
.search-button {
.icon:before {
color: #fff;
font-size: 30px !important;
margin-left: 5px;
}
}
.button-block {
width: 90% !important;
margin-left: auto;
margin-right: auto;
}
.bar-green{
background: rgb(17, 209, 166) !important;
}
ion-header-bar{
button{
border:none;
}
}
.border-top{
border-top:1px solid rgb(228,228,228);
}
.bold-text{
font-weight: bold !important;
}
.card{
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
/* Wrap text from item-note */
.item-note{
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
white-space: -webkit-pre-wrap;
word-break: break-all;
white-space: normal;
}

31
src/sass/icons.scss Normal file
View File

@ -0,0 +1,31 @@
.icon.bp-arrow-right {
@extend .ion-ios-arrow-right;
}
.icon.bp-arrow-down {
@extend .ion-ios-arrow-down;
}
.icon.bp-arrow-up {
@extend .ion-ios-arrow-up;
}
.item.item-big-icon-left {
padding-left: 74px;
}
.big-icon-svg {
padding: 0 7px;
> .bg {
border-radius: 50%;
width: 40px;
height: 40px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
background-repeat:no-repeat;
background-clip: padding-box;
background-size: 103%;
&.green{
background: rgb(1, 209, 162);
}
}
}

31
src/sass/ionic.scss
View File

@ -1,19 +1,9 @@
/* constants */
$royal: #1e3186;
$soft-blue: #647ce8;
$subtle-gray: #f5f5f5;
$roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light;
// This file is for changes to the standard Ionic Framework which cannot be made
// in variables.scss.
/* 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;
@import "../../bower_components/ionic/scss/ionic";
$ios-transition-duration: 200ms;
/* Ionic Workarounds */
/* Ionic Overrides and Workarounds */
// Please include a description of the problem solved by the workaround.
// class to dynamically hide the ion-nav-bar for v1 Amazon flow
@ -25,4 +15,15 @@ ion-tabs.ion-tabs-transparent {
background: none transparent;
}
@import "../../bower_components/ionic/scss/ionic";
// 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;
}
}
}

3
src/sass/main.scss
View File

@ -1,6 +1,7 @@
@import "fonts";
@import "variables";
@import "icons";
@import "ionic";
@import "common";
@import "forms";
@import "mixins/mixins";
@import "views/views";

36
src/sass/shame.scss
View File

@ -62,6 +62,42 @@ input[type=number] {
height: 24px;
}
/* Wrap text from item-note */
.item-note{
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
white-space: -webkit-pre-wrap;
word-break: break-all;
white-space: normal;
}
.back-button {
border: 0;
.icon:before {
color: #fff;
font-size: 30px !important;
font-weight: bold;
margin-left: 5px;
}
}
.search-button {
.icon:before {
color: #fff;
font-size: 30px !important;
margin-left: 5px;
}
}
.button-block {
width: 90% !important;
margin-left: auto;
margin-right: auto;
}
.name-wallet {
font-size: 14px;
font-weight: 400;

20
src/sass/variables.scss Normal file
View File

@ -0,0 +1,20 @@
/* constants */
$royal: #1e3186;
$soft-blue: #647ce8;
$subtle-gray: #f5f5f5;
$roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light;
$mid-gray: #667;
$light-gray: #9b9bab;
/* 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;
$card-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
$item-icon-font-size: 24px;

3
src/sass/views/amount.scss
View File

@ -1,4 +1,7 @@
#view-amount {
.item-no-bottom-border + .item {
border-top: 0;
}
.icon-bitpay-card {
background-image: url("../img/icon-bitpay.svg");
}

9
src/sass/views/onboarding/onboard-collect-email.scss
View File

@ -1,5 +1,14 @@
#onboarding-collect-email {
background: rgb(17, 209, 166);
.overlay {
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
background: rgba(0,0,0,.4);
z-index: 4;
}
.scroll-content {
margin-top: 0;
height: 101%;

3
src/sass/views/tab-receive.scss
View File

@ -7,6 +7,9 @@
}
}
}
.border-top{
border-top:1px solid rgb(228,228,228);
}
#address {
background: #fff;
.incomplete {

5
src/sass/views/wallet-backup-phrase.scss
View File

@ -26,6 +26,9 @@
color: rgb(43, 43, 43);
}
}
.bold-text {
font-weight: bold !important;
}
p {
color: rgb(58, 58, 58);
font-weight: 200;
@ -115,7 +118,7 @@
&,
& ion-content,
& ion-content .scroll {
overflow-y:visible;
overflow-y:visible;
}
#select-phrase {
float: left;

3
src/sass/views/walletDetails.scss
View File

@ -28,6 +28,9 @@
line-height: 100%;
}
}
.item.item-footer {
font-weight: lighter;
}
}
.wallet-details-release {