Commit 57e7842a authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub

Merge pull request #174 from bokobza/master

Merge Design branch
parents a45f6281 eceb78a5
<div *ngIf="loading">Loading...</div> <div *ngIf="loading">
<div class="login d-flex align-items-center text-center">
<div class="container">
<div class="mb-4">
<svg version="1.1" id="loading" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
</path>
<path d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="-360 50 50" repeatCount="indefinite"></animateTransform>
</path>
<path d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
L82,35.7z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</div>
<!-- /row-->
<div>
<em class="display-4 text-center">Loading the future... </em>
</div>
<!-- /row-->
</div>
<!-- /container-->
</div>
<!-- /login-->
</div>
<router-outlet *ngIf="!loading"></router-outlet> <router-outlet *ngIf="!loading"></router-outlet>
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div *ngIf="hasWallet"> <div *ngIf="hasWallet">
<p class="lead">Please choose the wallet you would like to open</p> <p class="lead">Please choose the wallet you would like to open</p>
<div class="row d-flex justify-content-center"> <div class="row d-flex justify-content-center">
<form class="col-md-8 col-xs-12 text-left" [formGroup]="openWalletForm"> <form class="col-md-6 col-xs-12 text-left" [formGroup]="openWalletForm">
<div class="form-group"> <div class="form-group">
<label class="col-12 row" for="Select">Wallet</label> <label class="col-12 row" for="Select">Wallet</label>
<select class="form-control custom-select col-12" formControlName="selectWallet"> <select class="form-control custom-select col-12" formControlName="selectWallet">
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<p class="lead">Looks like you're new here. <br />Please create or restore a wallet.</p> <p class="lead">Looks like you're new here. <br />Please create or restore a wallet.</p>
</ng-template> </ng-template>
<div class="row d-flex justify-content-center"> <div class="row d-flex justify-content-center">
<button type="button" class="btn btn-link btn-lg" (click)="onCreateClicked()">Create or restore a wallet</button> <button type="button" class="btn btn-linkgray btn-lg" (click)="onCreateClicked()">Create or restore a wallet</button>
</div> </div>
</div> </div>
<!-- /container--> <!-- /container-->
...@@ -40,4 +40,3 @@ ...@@ -40,4 +40,3 @@
<!-- /login--> <!-- /login-->
</section> </section>
<!-- /breeze--> <!-- /breeze-->
<section id="breeze"> <section id="breeze">
<div class="login d-flex align-items-center text-center"> <div class="login d-flex align-items-center text-center">
<div class="container"> <div class="container">
<p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p> <p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
<h3 class="display-5">Welcome</h3> <h3 class="display-5">Welcome</h3>
<div class="row d-flex justify-content-center"> <div class="row d-flex justify-content-center">
<form class="col-md-8 col-xs-12 text-left" [formGroup]="createWalletForm"> <form class="col-md-6 col-xs-12 text-left" [formGroup]="createWalletForm">
<!--<div class="form-group has-success">--> <!--<div class="form-group has-success">-->
<div class="form-group"> <div class="form-group">
<label class="col-12 row" for="walletName">Name</label> <label class="col-12 row" for="walletName">Name</label>
<input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name."> <input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
<div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div> <div *ngIf="formErrors.walletName" class="text-danger mt-2">{{ formErrors.walletName }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="text-left" for="walletPassword">Password</label> <label class="text-left" for="walletPassword">Password</label>
<input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password."> <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div> <div *ngIf="formErrors.walletPassword" class="text-danger mt-2">{{ formErrors.walletPassword }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="text-left" for="walletPasswordConfirmation">Confirm Password</label> <label class="text-left" for="walletPasswordConfirmation">Confirm Password</label>
......
<section id="breeze"> <section id="breeze">
<div class="login d-flex align-items-center text-center"> <div class="login d-flex align-items-center text-center">
<div class="container"> <div class="container">
<p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p> <p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
<h3 class="display-5">Welcome</h3> <h3 class="display-5">Welcome</h3>
<div class="row d-flex justify-content-center"> <div class="row d-flex justify-content-center">
<form class="col-md-8 col-xs-12 text-left" [formGroup]="recoverWalletForm"> <form class="col-md-6 col-xs-12 text-left" [formGroup]="recoverWalletForm">
<!--<div class="form-group has-success">--> <!--<div class="form-group has-success">-->
<div class="form-group"> <div class="form-group">
<label class="col-12 row" for="walletName">Name</label> <label class="col-12 row" for="walletName">Name</label>
<input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name."> <input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
<div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div> <div *ngIf="formErrors.walletName" class="text-danger mt-2">{{ formErrors.walletName }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-12 row" for="creationDate">Creation Date (optional)</label> <label class="col-12 row" for="creationDate">Creation Date (optional)</label>
<material-datepicker class="form-control" [(date)]="creationDate"></material-datepicker> <material-datepicker class="form-control col-7" [(date)]="creationDate"></material-datepicker>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-12 row" for="walletMnemonic">12 Secret Words</label> <label class="col-12 row" for="walletMnemonic">12 Secret Words</label>
<input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your 12 secret words."> <input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your 12 secret words.">
<div *ngIf="formErrors.walletMnemonic" class="form-control-feedback">{{ formErrors.walletMnemonic }}</div> <div *ngIf="formErrors.walletMnemonic" class="text-danger mt-2">{{ formErrors.walletMnemonic }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="text-left" for="walletPassword">Password</label> <label class="text-left" for="walletPassword">Password</label>
<input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password."> <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div> <div *ngIf="formErrors.walletPassword" class="text-danger mt-2">{{ formErrors.walletPassword }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="text-left" for="walletNetwork">Network</label> <label class="text-left" for="walletNetwork">Network</label>
......
...@@ -4,15 +4,15 @@ ...@@ -4,15 +4,15 @@
<!--<p class="text-back text-left mb-5 col-6 row"> <!--<p class="text-back text-left mb-5 col-6 row">
<button type="button" class="btn btn-link text-back" (click)="onBackClicked()">Back</button> <button type="button" class="btn btn-link text-back" (click)="onBackClicked()">Back</button>
</p>--> </p>-->
<p class="text-back text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p> <p class="text-back text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
<h3 class="display-5">Welcome</h3> <h3 class="display-5">Welcome</h3>
<p class="lead"> <p class="lead mb-6">
If you would like to create a new wallet, please click Create. <br/> If you would like to create a new wallet, please click Create. <br/>
When you have used Breeze before, you can click Restore to recover your wallet. When you have used Breeze before, you can click Restore to recover your wallet.
</p> </p>
<div class="row d-flex justify-content-center"> <div class="row d-flex justify-content-center">
<button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create</button>
<button type="button" class="btn btn-linkgray btn-lg" (click)="onRecoverClicked()">Restore</button> <button type="button" class="btn btn-linkgray btn-lg" (click)="onRecoverClicked()">Restore</button>
<button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create</button>
</div> </div>
</div> </div>
<!-- /container--> <!-- /container-->
......
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
<!-- /card--> <!-- /card-->
</div> </div>
</div> </div>
<ng-template #noTransactions class="text-muted">Looks like you haven't made any transactions yet</ng-template> <ng-template #noTransactions><em class="muted">Looks like you haven't made any transactions yet.</em></ng-template>
</section> </section>
<!-- /TRANSACTIONS --> <!-- /TRANSACTIONS -->
<status-bar></status-bar> <status-bar></status-bar>
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
<!-- /card--> <!-- /card-->
<div> <div>
<ng-template #noTransactions class="text-muted">Looks like you haven't made any transactions yet.</ng-template> <ng-template #noTransactions><em class="muted">Looks like you haven't made any transactions yet.</em></ng-template>
</div> </div>
</section> </section>
<!-- /TRANSACTIONS --> <!-- /TRANSACTIONS -->
......
<div id="modalLogout" tabindex="-1" role="dialog" aria-labelledby="modal_logout" aria-hidden="true"> <div id="modalLogout" tabindex="-1" role="dialog" aria-labelledby="modal_logout" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog modalBg" role="document">
<div> <div>
<div class="modal-header"> <div class="modal-header">
<div class="bubble"><i class="icon-download"></i></div> <div class="bubble"><i class="icon-download"></i></div>
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
<h5 class="modal-title text-uppercase" id="modalReceive">Logout</h5> <h5 class="modal-title text-uppercase" id="modalReceive">Logout</h5>
<form> <form>
<div class="form-group clearfix"> <div class="form-group clearfix">
<label class="float-left">Are you sure you want to logout?</label> <p class="text-muted text-center">Are you sure you want to logout?</p>
</div> </div>
<div> <div class="text-center">
<button type="button" class="btn btn-lg btn-primary float-left" data-dismiss="modal" aria-label="Logout" (click)="onLogout()">Yes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Logout" (click)="onLogout()">Yes</button>
<button type="button" class="btn btn-lg btn-primary float-right" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">Cancel</button> <button type="button" class="btn btn-link" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">Cancel</button>
</div> </div>
<br> <br>
</form> </form>
......
<div id="modalReceive" tabindex="-1" role="dialog" aria-labelledby="modal_receive" aria-hidden="true"> <div id="modalReceive" tabindex="-1" role="dialog" aria-labelledby="modal_receive" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog modalBg" role="document">
<div> <div>
<div class="modal-header"> <div class="modal-header">
<div class="bubble"><i class="icon-download"></i></div> <div class="bubble"><i class="icon-download"></i></div>
......
<div id="modalSend" tabindex="-1" role="dialog" aria-labelledby="modal_send" aria-hidden="true"> <div id="modalSend" tabindex="-1" role="dialog" aria-labelledby="modal_send" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog modalBg" role="document">
<div> <div>
<div class="modal-header"> <div class="modal-header">
<div class="bubble"><i class="icon-upload"></i></div> <div class="bubble"><i class="icon-upload"></i></div>
......
<div class="status"> <div class="status">
<ul class="list-inline align-self-center row" title="Total blocks: {{ chainTip }}&#013;Last block received: {{ lastBlockSyncedHeight }}&#013;Connections: {{ connectedNodes }}"> <ul class="list-inline align-self-center row" title="Total blocks: {{ chainTip }}&#013;Last block received: {{ lastBlockSyncedHeight }}&#013;Connections: {{ connectedNodes }}">
<li class="list-inline-item pending"><i class="icon-syncr text-success"></i></li> <li class="list-inline-item"><i class="icon-syncr text-success"></i></li>
<li class="list-inline-item">{{ percentSynced }}</li> <li class="list-inline-item">{{ percentSynced }}</li>
<li class="list-inline-item"><i class="icon-earth text-success"></i></li> <li class="list-inline-item ml-2"><i class="icon-earth text-info"></i></li>
<li class="list-inline-item">{{ connectedNodes }}</li> <li class="list-inline-item">{{ connectedNodes }}</li>
</ul> </ul>
</div> </div>
<div id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="modal_detail" aria-hidden="true"> <div id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="modal_detail" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog modalBg" role="document">
<div> <div>
<div class="modal-header"> <div class="modal-header">
<div class="bubble"><i class="icon-block"></i></div> <div class="bubble"><i class="icon-block"></i></div>
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
<h5 class="modal-title text-uppercase" id="modalDetail">Transaction Details</h5> <h5 class="modal-title text-uppercase" id="modalDetail">Transaction Details</h5>
<ul class="list-inline row"> <ul class="list-inline row">
<li class="list-inline-item col blockLabel">Type</li> <li class="list-inline-item col blockLabel">Type</li>
<li class="list-inline-item col-9 blockText">{{ transaction.type }}</li> <li class="list-inline-item col-9 blockText text-capitalize">{{ transaction.type }}</li>
</ul> </ul>
<ul class="list-inline row"> <ul class="list-inline row">
<li class="list-inline-item col blockLabel">Amount</li> <li class="list-inline-item col blockLabel">Amount</li>
<li class="list-inline-item col-9 blockText"><strong class="text-success">{{transaction.amount | coinNotation }}</strong></li> <li class="list-inline-item col-9 blockText text-success">{{transaction.amount | coinNotation }}</li>
</ul> </ul>
<!--<ul class="list-inline row"> <!--<ul class="list-inline row">
<li class="list-inline-item col blockLabel">From</li> <li class="list-inline-item col blockLabel">From</li>
...@@ -20,15 +20,15 @@ ...@@ -20,15 +20,15 @@
</ul>--> </ul>-->
<ul class="list-inline row"> <ul class="list-inline row">
<li class="list-inline-item col blockLabel">Date</li> <li class="list-inline-item col blockLabel">Date</li>
<li class="list-inline-item col-9 blockText"><small>{{ transaction.timestamp * 1000 | date:'medium' }}</small></li> <li class="list-inline-item col-9 blockText">{{ transaction.timestamp * 1000 | date:'medium' }}</li>
</ul> </ul>
<ul class="list-inline row"> <ul class="list-inline row">
<li class="list-inline-item col blockLabel">Block</li> <li class="list-inline-item col blockLabel">Block</li>
<li class="list-inline-item col-9 blockText">#{{ transaction.confirmedInBlock }}</li> <li class="list-inline-item col-9 blockText">#{{ transaction.confirmedInBlock }}</li>
</ul> </ul>
<ul class="list-inline row"> <ul class="list-inline row">
<li class="list-inline-item col blockLabel">Transaction ID</li> <li class="list-inline-item col blockLabel my-3">Transaction ID</li>
<li class="list-inline-item col-9 blockText blockID"><code>{{ transaction.id }}</code></li> <li class="list-inline-item col-10 blockID"><code>{{ transaction.id }}</code></li>
<span class="float-right"><a ngxClipboard [cbContent]="transaction.id" (click)="onCopiedClick()">copy</a></span> <span class="float-right"><a ngxClipboard [cbContent]="transaction.id" (click)="onCopiedClick()">copy</a></span>
<span class="badge badge-success list-inline-item col" *ngIf="copied">The transaction ID has been copied to your clipboard.</span> <span class="badge badge-success list-inline-item col" *ngIf="copied">The transaction ID has been copied to your clipboard.</span>
</ul> </ul>
......
...@@ -8,9 +8,7 @@ a, button {&:hover {cursor: pointer !important;}} ...@@ -8,9 +8,7 @@ a, button {&:hover {cursor: pointer !important;}}
code {color: $spacegray !important;} code {color: $spacegray !important;}
.form-control::-webkit-input-placeholder { color: $input-color-placeholder; } /* WebKit, Blink, Edge */ .form-control::-webkit-input-placeholder { color: $input-color-placeholder; } /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: $input-color-placeholder; } /* Mozilla Firefox 4 to 18 */ .form-control:-moz-placeholder { color: $input-color-placeholder; } /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: $input-color-placeholder; } /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: $input-color-placeholder; } /* Internet Explorer 10-11 */ .form-control:-ms-input-placeholder { color: $input-color-placeholder; } /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: $input-color-placeholder; } /* Microsoft Edge */
// button // button
.twitter { .twitter {
...@@ -30,16 +28,47 @@ code {color: $spacegray !important;} ...@@ -30,16 +28,47 @@ code {color: $spacegray !important;}
} }
} }
// loading
#loading {
width: 150px;
height: 150px;
display:inline-block;
fill: $darkgray !important;
}
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
em {
&.display-4 {
font-size: 1.6em;
color: $darkgray;
font-weight: 400;
padding-right: 5px;
border-right: .1em solid $blue;
white-space: nowrap;
-webkit-animation: blink-caret .5s step-end infinite alternate;
}
}
// datepicker
.datepicker__input {
border-color: transparent !important;
padding: 0 !important;
text-align: left;
color: $input-color !important;
width: 100%;
text-align: center;
&::-webkit-input-placeholder { color: $input-color-placeholder; } /* WebKit, Blink, Edge */
}
// container // container
#content { #content {
width: 100%; width: 100%;
position: relative; position: relative;
padding-left: 70px; padding: 0 0 70px 70px;
} }
// sidebar // sidebar
#sidebar { #sidebar {
z-index: 1000; z-index: 1035;
position: fixed; position: fixed;
width: 70px; width: 70px;
height: 100%; height: 100%;
...@@ -65,6 +94,7 @@ code {color: $spacegray !important;} ...@@ -65,6 +94,7 @@ code {color: $spacegray !important;}
} }
&:hover { &:hover {
opacity: .8; opacity: .8;
cursor: pointer !important;
.bar {opacity: 0;} .bar {opacity: 0;}
} }
img {width: 42px;} img {width: 42px;}
...@@ -91,6 +121,9 @@ code {color: $spacegray !important;} ...@@ -91,6 +121,9 @@ code {color: $spacegray !important;}
} }
} }
// NAVBAR
#navbarBreeze {}
// jumbotron // jumbotron
.jumbotron { .jumbotron {
h5 { h5 {
...@@ -116,6 +149,8 @@ code {color: $spacegray !important;} ...@@ -116,6 +149,8 @@ code {color: $spacegray !important;}
// transactions // transactions
#transaction { #transaction {
padding-top: 2em;
.muted {opacity: .5;}
h5 { h5 {
font-size: .85em; font-size: .85em;
color: $gray-dark; color: $gray-dark;
...@@ -144,7 +179,7 @@ code {color: $spacegray !important;} ...@@ -144,7 +179,7 @@ code {color: $spacegray !important;}
// status box // status box
.status { .status {
background: $white; background: $white;
width: 80px; width: auto;
height: 40px; height: 40px;
border: 1px solid #DBDBDB; border: 1px solid #DBDBDB;
box-shadow: 0 1px 11px 0 rgba(80,96,120,.2); box-shadow: 0 1px 11px 0 rgba(80,96,120,.2);
...@@ -153,29 +188,33 @@ code {color: $spacegray !important;} ...@@ -153,29 +188,33 @@ code {color: $spacegray !important;}
bottom: 2%; bottom: 2%;
right: 2%; right: 2%;
text-align: center; text-align: center;
ul {transform: translateY(50%) translateX(15%);} ul {
transform: translateY(50%) translateX(0);
display: inline-block;
position: relative;
padding: 0 2em;
}
li { li {
font-size: .9em; font-size: .9em;
position: relative; position: relative;
padding: 0 8px; float: left;
margin-right: 4px;
.text-info {color: $gray-dark !important;}
&.pending { &.pending {
i { i {
font-size: 1.3em; font-size: .9em;
position: absolute;
color: $brand-warning; color: $brand-warning;
animation: spin 4s linear infinite;
} }
} }
&.statusOK { &.statusOK {
i { i {
color: $brand-success; color: $brand-success;
font-size: 1.3em; font-size: .9em;
position: absolute; position: absolute;
} }
} }
} }
} }
@keyframes spin {100%{transform:rotate(360deg);}}
// modal // modal
.modal-header { .modal-header {
...@@ -439,8 +478,9 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000); ...@@ -439,8 +478,9 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
text-transform: uppercase; text-transform: uppercase;
} }
.lead { .lead {
font-size: 1.25em; font-size: 1.15em;
color: $blue; color: $blue;
font-weight: 400;
line-height: 1.25em; line-height: 1.25em;
margin: 2em 0; margin: 2em 0;
} }
...@@ -453,7 +493,7 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000); ...@@ -453,7 +493,7 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
text-decoration: underline; text-decoration: underline;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: lighten($darkgray,20%); color: lighten($darkgray,10%);
} }
} }
form {margin-bottom: 4em;} form {margin-bottom: 4em;}
......
...@@ -40,19 +40,17 @@ ...@@ -40,19 +40,17 @@
src: url("./assets/fonts/Lato-Black.ttf") format("truetype") src: url("./assets/fonts/Lato-Black.ttf") format("truetype")
} }
// icons
@font-face { @font-face {
font-family: 'icon'; font-family: 'icon';
src: url('./assets/fonts/icon.eot?uu062v'); src: url('./assets/fonts/icon.eot?qz0v16');
src: url('./assets/fonts/icon.eot?uu062v#iefix') format('embedded-opentype'), src: url('./assets/fonts/icon.eot?qz0v16#iefix') format('embedded-opentype'),
url('./assets/fonts/icon.ttf?uu062v') format('truetype'), url('./assets/fonts/icon.ttf?qz0v16') format('truetype'),
url('./assets/fonts/icon.woff?uu062v') format('woff'), url('./assets/fonts/icon.woff?qz0v16') format('woff'),
url('./assets/fonts/icon.svg?uu062v#icomoon') format('svg'); url('./assets/fonts/icon.svg?qz0v16#icomoon') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
[class^="icon-"], [class*=" icon-"] { [class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */ /* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icon' !important; font-family: 'icon' !important;
...@@ -68,19 +66,6 @@ ...@@ -68,19 +66,6 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-stratis:before {
content: "\e900";
}
.icon-syncr:before {
content: "\e902";
}
.icon-bitcoin:before {
content: "\e904";
}
.icon-block:before {
content: "\e92e";
}
.icon-coin-dollar:before { .icon-coin-dollar:before {
content: "\e93b"; content: "\e93b";
} }
...@@ -90,23 +75,80 @@ ...@@ -90,23 +75,80 @@
.icon-coin-pound:before { .icon-coin-pound:before {
content: "\e93d"; content: "\e93d";
} }
.icon-database:before { .icon-coin-yen:before {
content: "\e93e";
}
.icon-bell:before {
content: "\e951";
}
.icon-download:before {
content: "\e960";
}
.icon-upload:before {
content: "\e961";
}
.icon-coin:before {
content: "\e964"; content: "\e964";
} }
.icon-settings:before { .icon-lock:before {
content: "\e98f";
}
.icon-unlocked:before {
content: "\e990";
}
.icon-cog:before {
content: "\e994"; content: "\e994";
} }
.icon-download:before { .icon-bin:before {
content: "\e9ac";
}
.icon-switch:before {
content: "\e9b6";
}
.icon-cloud:before {
content: "\e9c1";
}
.icon-cloud-download:before {
content: "\e9c2"; content: "\e9c2";
} }
.icon-upload:before { .icon-cloud-upload:before {
content: "\e9c3"; content: "\e9c3";
} }
.icon-cancel-circle:before { .icon-cloud-check:before {
content: "\ea0d"; content: "\e9c4";
}
.icon-download2:before {
content: "\e9c5";
}
.icon-upload2:before {
content: "\e9c6";
}
.icon-download3:before {
content: "\e9c7";
}
.icon-upload3:before {
content: "\e9c8";
}
.icon-sphere:before {
content: "\e9c9";
}
.icon-earth:before {
content: "\e9ca";
}
.icon-link:before {
content: "\e9cb";
}
.icon-circle-up:before {
content: "\ea41";
}
.icon-circle-right:before {
content: "\ea42";
} }
.icon-checkmark2:before { .icon-circle-down:before {
content: "\ea11"; content: "\ea43";
}
.icon-circle-left:before {
content: "\ea44";
} }
.icon-checkbox-checked:before { .icon-checkbox-checked:before {
content: "\ea52"; content: "\ea52";
...@@ -120,3 +162,15 @@ ...@@ -120,3 +162,15 @@
.icon-radio-unchecked:before { .icon-radio-unchecked:before {
content: "\ea56"; content: "\ea56";
} }
.icon-block:before {
content: "\eae8";
}
.icon-stratis:before {
content: "\e900";
}
.icon-syncr:before {
content: "\e1";
}
.icon-bitcoin:before {
content: "\e2";
}
.jumbotron { .jumbotron {
padding: $jumbotron-padding; padding: $jumbotron-padding;
margin-bottom: $jumbotron-padding;
background-color: $jumbotron-bg; background-color: $jumbotron-bg;
border-top: 1px solid $gray-light;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
@include border-radius($border-radius-lg); @include border-radius($border-radius-lg);
......
...@@ -45,14 +45,18 @@ ...@@ -45,14 +45,18 @@
margin: $modal-dialog-margin; margin: $modal-dialog-margin;
} }
// Custom
.modalBg {
background-color: $modal-content-bg;
border: $modal-content-border-width solid $modal-content-border-color;
}
// Actual modal // Actual modal
.modal-content { .modal-content {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: $modal-content-bg;
background-clip: padding-box; background-clip: padding-box;
border: $modal-content-border-width solid $modal-content-border-color;
@include border-radius($border-radius-lg); @include border-radius($border-radius-lg);
@include box-shadow($modal-content-xs-box-shadow); @include box-shadow($modal-content-xs-box-shadow);
// Remove focus outline from opened modal // Remove focus outline from opened modal
......
...@@ -19,8 +19,11 @@ ...@@ -19,8 +19,11 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: $navbar-padding-y $navbar-padding-x 0 $navbar-padding-x; padding: 0 $navbar-padding-x 0 70px;
box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.08); box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.08);
background: $white;
border-bottom: 1px solid $gray-light;
height: auto;
} }
...@@ -60,7 +63,7 @@ ...@@ -60,7 +63,7 @@
font-size: .96rem; font-size: .96rem;
letter-spacing: 0.53px; letter-spacing: 0.53px;
font-weight: 500; font-weight: 500;
padding-bottom: 1.25rem; padding: 1.5rem 0 1.25rem;
} }
} }
......
...@@ -223,7 +223,7 @@ $container-max-widths: ( ...@@ -223,7 +223,7 @@ $container-max-widths: (
sm: 540px, sm: 540px,
md: 720px, md: 720px,
lg: 960px, lg: 960px,
xl: 1140px xl: 1080px
) !default; ) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths"); @include _assert-ascending($container-max-widths, "$container-max-widths");
...@@ -619,7 +619,7 @@ $navbar-toggler-padding-y: .25rem !default; ...@@ -619,7 +619,7 @@ $navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default; $navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-inverse-color: $brand-primary !default; $navbar-inverse-color: $gray-dark !default;
$navbar-inverse-hover-color: darken($brand-primary, 20%) !default; $navbar-inverse-hover-color: darken($brand-primary, 20%) !default;
$navbar-inverse-active-color: $brand-primary !default; $navbar-inverse-active-color: $brand-primary !default;
$navbar-inverse-disabled-color: rgba($white,.25) !default; $navbar-inverse-disabled-color: rgba($white,.25) !default;
......
...@@ -30,22 +30,25 @@ $btn-secondary-border: $gray-light !default; ...@@ -30,22 +30,25 @@ $btn-secondary-border: $gray-light !default;
// //
///////////////////////////// /////////////////////////////
#content { // NAVBAR
&.bitcoin { #navbarBreeze {
.navbar-nav {
// NAVBAR
.navbar {
.nav-item { .nav-item {
.nav-link { .nav-link {
color: $gray-dark; color: $gray-dark;
&:hover {color: lighten($brand-primary,20%);} &:hover {color: lighten($brand-primary,20%);}
&.is-active {
border-bottom: 2px solid $brand-primary !important;
color: $brand-primary !important;
} }
&.active {
border-bottom: 2px solid $brand-primary;
.nav-link {color: $brand-primary;}
} }
} }
} }
}
#content {
&.bitcoin {
// JUMBOTRON // JUMBOTRON
.jumbotron { .jumbotron {
...@@ -88,6 +91,9 @@ $btn-secondary-border: $gray-light !default; ...@@ -88,6 +91,9 @@ $btn-secondary-border: $gray-light !default;
i {color: $brand-primary;} i {color: $brand-primary;}
} }
} }
.modal-dialog {
.badge {margin: 1em 0;}
}
#modalDetail { #modalDetail {
a { a {
color: $link-color; color: $link-color;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment