Skip to content

B
Breeze
Commit 57e7842a authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub
Browse files
Options

Merge pull request #174 from bokobza/master 

Merge Design branch
parents a45f6281 eceb78a5
Expand all Show whitespace changes
Inline Side-by-side
Showing with 5799 additions and 3848 deletions
Breeze.UI/src/app/app.component.html
View file @ 57e7842a
<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>
Breeze.UI/src/app/login/login.component.html
View file @ 57e7842a
...@@ -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-->
Breeze.UI/src/app/setup/create/create.component.html
View file @ 57e7842a
<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>
......
Breeze.UI/src/app/setup/recover/recover.component.html
View file @ 57e7842a
<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>
......
Breeze.UI/src/app/setup/setup.component.html
View file @ 57e7842a
...@@ -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-->
......
Breeze.UI/src/app/wallet/dashboard/dashboard.component.html
View file @ 57e7842a
...@@ -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>
......
Breeze.UI/src/app/wallet/history/history.component.html
View file @ 57e7842a
...@@ -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 -->
......
Breeze.UI/src/app/wallet/logout-confirmation/logout-confirmation.component.html
View file @ 57e7842a
<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>
......
Breeze.UI/src/app/wallet/receive/receive.component.html
View file @ 57e7842a
<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>
......
Breeze.UI/src/app/wallet/send/send.component.html
View file @ 57e7842a
<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>
......
Breeze.UI/src/app/wallet/status-bar/status-bar.component.html
View file @ 57e7842a
<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>
Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.html
View file @ 57e7842a
<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>
......
Breeze.UI/src/scss/_custom.scss
View file @ 57e7842a
...@@ -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;}
......
Breeze.UI/src/scss/_font.scss
View file @ 57e7842a
...@@ -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";
}
Breeze.UI/src/scss/_jumbotron.scss
View file @ 57e7842a
.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);
......
Breeze.UI/src/scss/_modal.scss
View file @ 57e7842a
...@@ -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
......
Breeze.UI/src/scss/_navbar.scss
View file @ 57e7842a
...@@ -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;
} }
} }
......
Breeze.UI/src/scss/_variables.scss
View file @ 57e7842a
...@@ -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;
......
Breeze.UI/src/scss/themes/_bitcoin.scss
View file @ 57e7842a
...@@ -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;
......
Breeze.UI/src/styles.css
View file @ 57e7842a
This diff is collapsed.
Breeze.UI/src/styles.css.map
View file @ 57e7842a
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