Add UI changes (#349)

Add UI changes

Breeze.UI/src/app/app.component.html

@@ -18,8 +18,8 @@
             </svg>
           </div>
           <!-- /row-->
-          <div>
-            <em class="display-4 text-center">Loading the future... </em>
+          <div class="loadingText">
+            <em class="display-4 text-center">Loading the future ... </em>
           </div>
           <!-- /row-->
         </div>

Breeze.UI/src/app/setup/create/create.component.html

 <section id="breeze">
   <div class="login d-flex align-items-center text-center">
     <div class="container">
-      <p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
-      <h3 class="display-5">Welcome</h3>
+      <p class="textback text-left mb-5 col-11 mx-auto">
+        <a (click)="onBackClicked()">
+          <span class="ico-arrow-left2"></span>
+        </a>
+      </p>
+      <h3 class="display-5">Create a new wallet</h3>
       <div class="row d-flex justify-content-center">
-        <form class="col-md-6 col-xs-12 text-left" [formGroup]="createWalletForm">
+        <form class="col-8 mx-auto row text-left" [formGroup]="createWalletForm">
           <!--<div class="form-group has-success">-->
-          <div class="form-group">
-            <label class="col-12 row" for="walletName">Name</label>
+          <div class="form-group col-12">
+            <label class="text-left" for="walletName">Name</label>
             <input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
             <div *ngIf="formErrors.walletName" class="text-danger mt-2">{{ formErrors.walletName }}</div>
           </div>
-          <div class="form-group">
+          <div class="form-group col-6">
             <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.">
             <div *ngIf="formErrors.walletPassword" class="text-danger mt-2">{{ formErrors.walletPassword }}</div>
           </div>
-          <div class="form-group">
+          <div class="form-group col-6">
             <label class="text-left" for="walletPasswordConfirmation">Confirm Password</label>
             <input type="password" class="form-control form-control-success" formControlName="walletPasswordConfirmation" id="walletPasswordConfirmation" placeholder="Enter a password.">
-            <div *ngIf="formErrors.walletPasswordConfirmation" class="form-control-feedback">{{ formErrors.walletPasswordConfirmation }}</div>
+            <div *ngIf="formErrors.walletPasswordConfirmation" class="text-danger mt-2">{{ formErrors.walletPasswordConfirmation }}</div>
+          </div>
+          <div class="col-12">
             <div class="form-control-feedback">Your password will be required to recover your wallet in the future. Keep it safe.</div>
           </div>
-          <div class="form-group">
+          <div class="form-group col-12">
             <label class="text-left" for="walletNetwork">Network</label>
             <select class="form-control custom-select" name="network" formControlName="selectNetwork">
               <!--<option value="main">Main</option>-->

Breeze.UI/src/app/setup/recover/recover.component.html

 <section id="breeze">
   <div class="login d-flex align-items-center text-center">
     <div class="container">
-      <p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
-      <h3 class="display-5">Welcome</h3>
+      <p class="textback text-left mb-5 col-11 mx-auto">
+        <a (click)="onBackClicked()">
+          <span class="ico-arrow-left2"></span>
+        </a>
+      </p>
+      <h3 class="display-5 mb-4">Restore a wallet</h3>
       <div class="row d-flex justify-content-center">
-        <form class="col-md-6 col-xs-12 text-left" [formGroup]="recoverWalletForm">
+        <form class="col-8 mx-auto row text-left mt-4" [formGroup]="recoverWalletForm">
           <!--<div class="form-group has-success">-->
-          <div class="form-group">
-            <label class="col-12 row" for="walletName">Name</label>
+          <div class="form-group col-6">
+            <label class="text-left" for="walletName">Name</label>
             <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 mt-2">{{ formErrors.walletName }}</div>
           </div>
-          <div class="form-group">
-            <label class="col-12 row" for="creationDate">Earliest Possible Creation Date</label>
+          <div class="form-group col-6">
+            <label class="text-left" for="creationDate">Earliest Possible Creation Date</label>
             <input type="text" class="form-control" bsDatepicker formControlName="walletDate" placeholder="Select the date your wallet was created." [bsConfig]="bsConfig" [maxDate]="maxDate"/>
-            <div *ngIf="formErrors.walletDate" class="form-control-feedback mt-2">{{ formErrors.walletDate }}</div>
+            <div *ngIf="formErrors.walletDate" class="text-danger mt-2">{{ formErrors.walletDate }}</div>
           </div>
-          <div class="form-group">
-            <label class="col-12 row" for="walletMnemonic">Secret Words</label>
+          <div class="col-12 mb-2">
+            <div *ngIf="formErrors.walletName" class="text-danger mt-2">{{ formErrors.walletName }}</div>
+          </div>
+          <div class="form-group col-12">
+            <label class="text-left" for="walletMnemonic">Secret Words</label>
             <input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your secret words.">
-            <div *ngIf="formErrors.walletMnemonic" class="form-control-feedback mt-2">{{ formErrors.walletMnemonic }}</div>
+            <div *ngIf="formErrors.walletMnemonic" class="text-danger mt-2">{{ formErrors.walletMnemonic }}</div>
           </div>
-          <div class="form-group">
+          <div class="form-group col-6">
             <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.">
-            <div *ngIf="formErrors.walletPassword" class="form-control-feedback mt-2">{{ formErrors.walletPassword }}</div>
+            <div *ngIf="formErrors.walletPassword" class="text-danger mt-2">{{ formErrors.walletPassword }}</div>
           </div>
-          <div class="form-group">
+          <div class="form-group col-6">
             <label class="text-left" for="walletNetwork">Network</label>
             <select class="form-control custom-select" name="network" formControlName="selectNetwork">
               <!--<option value="main">Main</option>-->

Breeze.UI/src/app/setup/setup.component.html

@@ -5,15 +5,19 @@
         <button type="button" class="btn btn-link text-back" (click)="onBackClicked()">Back</button>
       </p>-->
 
-      <p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
+      <p class="textback text-left col-8 mx-auto">
+        <a (click)="onBackClicked()">
+          <span class="ico-arrow-left2"></span>
+        </a>
+      </p>
       <h3 class="display-5">Welcome</h3>
-      <p class="lead my-5">
+      <p class="lead my-4 mb-5">
         If you would like to create a new wallet, please click Create. <br/>
         If you used Breeze before, please click Restore to recover your old wallet.
       </p>
-      <div class="row d-flex justify-content-center">
-        <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 class="col-3 mt-4 mx-auto row d-flex justify-content-center">
+        <button type="button" class="btn btn-secondary btn-block btn-lg" (click)="onRecoverClicked()">Restore</button>
+        <button type="button" class="btn btn-darkgray btn-block btn-lg mt-3" (click)="onCreateClicked()">Create</button>
       </div>
     </div>
     <!-- /container-->

Breeze.UI/src/app/wallet/dashboard/dashboard.component.html

@@ -3,7 +3,7 @@
   <section id="content" class="bitcoin">
     <!-- JUMBOTRON-->
     <div class="jumbotron jumbotron-fluid">
-      <div class="container">
+      <div class="col-10 mx-auto">
         <div class="col-xs-12 text-left">
           <h5 class="text-capitalize walletName">{{ walletName }}</h5>
         </div>
@@ -48,15 +48,15 @@
     <!-- /JUMBOTRON-->
 
     <!-- TRANSACTIONS -->
-    <section id="transaction" class="container">
+    <section id="transaction" class="col-10 mx-auto">
       <h5>Latest Transactions</h5>
       <div *ngIf="transactionArray; else noTransactions">
         <div *ngFor="let transaction of transactionArray; let i=index">
           <div class="card" *ngIf="i<3" (click)="openTransactionDetailDialog(transaction)">
             <div class="card-block text-nowrap">
               <ul class="list-inline row">
-                <li class="list-inline-item hidden-xs-down col-2 text-uppercase align-bottom">{{ transaction.transactionType }}</li>
-                <li class="list-inline-item col-3 amount text-left align-baseline">
+                <li class="list-inline-item hidden-xs-down col-3 text-uppercase align-bottom">{{ transaction.transactionType }}</li>
+                <li class="list-inline-item col-4 amount text-left align-baseline">
                   <span *ngIf="transaction.transactionType == 'received'" class="text-success">+</span>
                   <span *ngIf="transaction.transactionType == 'sent'" class="text-danger">-</span>
                   {{ transaction.transactionAmount + transaction.transactionFee | coinNotation }}
@@ -66,7 +66,7 @@
                   <span *ngIf="transaction.transactionConfirmedInBlock" class="badge badge-success text-capitalize">Confirmed</span>
                   <span *ngIf="!transaction.transactionConfirmedInBlock" class="badge badge-warning text-capitalize">Pending</span>
                 </li>
-                <li class="list-inline-item col-3 text-right align-baseline transactionDate">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li>
+                <li class="list-inline-item col text-right align-baseline transactionDate">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li>
               </ul>
             </div>
           </div>

Breeze.UI/src/app/wallet/history/history.component.html

@@ -19,8 +19,8 @@
     <!-- /JUMBOTRON-->
 
     <!-- TRANSACTIONS -->
-    <section id="transaction" class="container">
-      <h5>Transactions</h5>
+    <section id="transaction" class="col-10 mx-auto">
+      <h5 class="mt-4">Transactions</h5>
       <div *ngIf="transactions; else noTransactions">
         <div *ngFor="let transaction of transactions">
           <div class="card" (click)="openTransactionDetailDialog(transaction)">

Breeze.UI/src/app/wallet/logout-confirmation/logout-confirmation.component.html

@@ -2,7 +2,7 @@
   <div class="modal-dialog modalBg" role="document">
     <div>
       <div class="modal-header">
-        <div class="bubble"><i class="icon-download"></i></div>
+        <div class="bubble"><i class="icon-switch"></i></div>
       </div>
       <div class="modal-body">
         <h5 class="modal-title text-uppercase" id="modalReceive">Log out</h5>
@@ -11,8 +11,8 @@
             <p class="text-muted text-center">Are you sure you want to log out?</p>
           </div>
           <div class="text-center">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Logout" (click)="onLogout()">Yes</button>
-            <button type="button" class="btn btn-link" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">Cancel</button>
+            <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">Cancel</button>
+            <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Logout" (click)="onLogout()">Yes</button>
           </div>
           <br>
         </form>

Breeze.UI/src/assets/images/check.svg

-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
-    <title>check</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
-        <g id="Breeze-Wallet---dashboard-&gt;-Send-&gt;-BTC" transform="translate(-471.000000, -283.000000)" stroke="#2ECCA9" stroke-width="2">
-            <g id="popup-+-wallet" transform="translate(-455.000000, -265.000000)">
-                <g id="popup" transform="translate(820.000000, 317.000000)">
-                    <g id="Amount" transform="translate(90.000000, 195.000000)">
-                        <g id="check" transform="translate(17.000000, 37.000000)">
-                            <circle id="Oval" stroke-opacity="0.200775589" cx="8" cy="8" r="8"></circle>
-                            <polyline id="Shape" points="3.73333333 8 6.4 10.6666667 12.2666667 4.8"></polyline>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+    <title>check</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Breeze-Wallet---dashboard-&gt;-Send-&gt;-BTC" transform="translate(-471.000000, -283.000000)" stroke="#2ECCA9" stroke-width="2">
+            <g id="popup-+-wallet" transform="translate(-455.000000, -265.000000)">
+                <g id="popup" transform="translate(820.000000, 317.000000)">
+                    <g id="Amount" transform="translate(90.000000, 195.000000)">
+                        <g id="check" transform="translate(17.000000, 37.000000)">
+                            <circle id="Oval" stroke-opacity="0.200775589" cx="8" cy="8" r="8"></circle>
+                            <polyline id="Shape" points="3.73333333 8 6.4 10.6666667 12.2666667 4.8"></polyline>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
 </svg>
\ No newline at end of file

Breeze.UI/src/assets/images/cross.svg

-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
-    <title>cross</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
-        <g id="Breeze-Wallet---dashboard-&gt;-Send-&gt;-BTC" transform="translate(-471.000000, -376.000000)" stroke="#FF5B8A" stroke-width="2">
-            <g id="popup-+-wallet" transform="translate(-455.000000, -265.000000)">
-                <g id="popup" transform="translate(820.000000, 317.000000)">
-                    <g id="Send-to" transform="translate(90.000000, 288.000000)">
-                        <g id="cross" transform="translate(17.000000, 37.000000)">
-                            <circle id="Oval" stroke-opacity="0.2" cx="8" cy="8" r="8"></circle>
-                            <path d="M4.8,4.8 L11.2,11.2" id="Shape"></path>
-                            <path d="M11.2,4.8 L4.8,11.2" id="Shape"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+    <title>cross</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Breeze-Wallet---dashboard-&gt;-Send-&gt;-BTC" transform="translate(-471.000000, -376.000000)" stroke="#FF5B8A" stroke-width="2">
+            <g id="popup-+-wallet" transform="translate(-455.000000, -265.000000)">
+                <g id="popup" transform="translate(820.000000, 317.000000)">
+                    <g id="Send-to" transform="translate(90.000000, 288.000000)">
+                        <g id="cross" transform="translate(17.000000, 37.000000)">
+                            <circle id="Oval" stroke-opacity="0.2" cx="8" cy="8" r="8"></circle>
+                            <path d="M4.8,4.8 L11.2,11.2" id="Shape"></path>
+                            <path d="M11.2,4.8 L4.8,11.2" id="Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
 </svg>
\ No newline at end of file

Breeze.UI/src/assets/images/ico_bitcoin.svg

@@ -7,18 +7,18 @@
         <rect id="path-1" x="0" y="0" width="42" height="42" rx="8"></rect>
     </defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Breeze-Wallet---Stratis-light---Tumbling---V2-after-review" transform="translate(-9.000000, -30.000000)">
-            <g id="wallet" transform="translate(-5.000000, -10.000000)">
+        <g id="Breeze-Wallet---V2" transform="translate(-14.000000, -30.000000)">
+            <g id="wallet" transform="translate(0.000000, -24.000000)">
                 <g id="content">
-                    <g id="left-nav" transform="translate(0.000000, 10.000000)">
+                    <g id="left-nav" transform="translate(0.000000, 24.000000)">
                         <g id="content" transform="translate(14.000000, 30.000000)">
                             <g id="icons">
                                 <g id="Bitcoin-(active)">
                                     <mask id="mask-2" fill="white">
                                         <use xlink:href="#path-1"></use>
                                     </mask>
-                                    <use id="Mask" fill="#F69D32" xlink:href="#path-1"></use>
-                                    <path d="M27.274994,20.6150151 C26.5661248,20.0811297 25.556326,19.867595 25.556326,19.867595 C25.556326,19.867595 26.4108533,19.3721633 26.7600442,18.8772172 C27.1096236,18.3820769 27.2843161,17.6149444 27.3135449,17.2169095 C27.3425794,16.8186803 27.4106502,15.1489534 26.1095353,14.1879015 C25.1031352,13.4442685 23.9498146,13.1490681 22.4010809,13.0530309 L22.4010809,9.68328014 L20.3234143,9.68328014 L20.3234143,13.0132177 C19.8598332,13.0132177 19.3180823,13.0132177 18.740888,13.0132177 L18.740888,9.68328014 L16.6634155,9.68328014 L16.6634155,13.0132177 C14.542537,13.0132177 12.576056,13.0132177 12.576056,13.0132177 L12.576056,15.1708021 C12.576056,15.1708021 13.4498102,15.1708021 13.7774437,15.1708021 C14.1049802,15.1708021 14.6875153,15.2072166 14.9350369,15.4842583 C15.1826556,15.7608144 15.2263531,15.9065695 15.2263531,16.445116 C15.2263531,16.9838566 15.2264502,24.8384192 15.2264502,25.0423405 C15.2264502,25.2461647 15.187608,25.4984445 15.0127212,25.6636207 C14.8381258,25.828797 14.6634332,25.8673478 14.245783,25.8673478 C13.8282298,25.8673478 13.0032226,25.8673478 13.0032226,25.8673478 L12.576056,28.3627618 C12.576056,28.3627618 14.6073063,28.3627618 16.6634155,28.3627618 L16.6634155,31.6832801 L18.7409851,31.6832801 L18.7409851,28.3627618 C19.3793558,28.3627618 19.935187,28.3627618 20.3235114,28.3627618 L20.3235114,31.6832801 L22.4011781,31.6832801 L22.4011781,28.3079943 C22.9382679,28.2766293 23.4390403,28.2359421 23.7311333,28.1976826 C24.3234761,28.1201925 25.6631419,27.9648239 26.9158012,27.0909726 C28.1680722,26.2170243 28.4493865,24.8480327 28.4786152,23.4695247 C28.5081352,22.0909197 27.9831835,21.1489975 27.274994,20.6150151 Z M18.740888,15.3627794 C18.740888,15.3627794 19.4010103,15.3046133 20.0515192,15.3141296 C20.7022224,15.3237431 21.2747557,15.3432612 22.1293801,15.6054458 C22.9836161,15.8677274 23.4880785,16.5085258 23.507888,17.2658506 C23.527212,18.0231754 23.1967624,18.5278321 22.6145186,18.8482798 C22.0320805,19.1686305 21.2266885,19.3434201 20.4690724,19.3722604 C19.7119417,19.4014892 18.740888,19.3722604 18.740888,19.3722604 L18.740888,15.3627794 L18.740888,15.3627794 Z M23.3912645,25.2946203 C22.9155452,25.5569019 21.9640096,25.7898577 21.041897,25.8576373 C20.119493,25.9257081 18.740888,25.8965765 18.740888,25.8965765 L18.740888,21.4401194 C18.740888,21.4401194 20.0613269,21.3723399 21.0905468,21.4401194 C22.1195725,21.5083845 22.9836161,21.7702777 23.3717463,21.9647798 C23.7600707,22.1587963 24.4399054,22.5858658 24.4399054,23.6054722 C24.4399054,24.6246903 23.8666924,25.0325329 23.3912645,25.2946203 Z" id="BTC_alt_1_" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-2)" transform="translate(20.527929, 20.683280) rotate(-345.000000) translate(-20.527929, -20.683280) "></path>
+                                    <use id="Mask" fill="#FFFFFF" xlink:href="#path-1"></use>
+                                    <path d="M28.274994,20.6150151 C27.5661248,20.0811297 26.556326,19.867595 26.556326,19.867595 C26.556326,19.867595 27.4108533,19.3721633 27.7600442,18.8772172 C28.1096236,18.3820769 28.2843161,17.6149444 28.3135449,17.2169095 C28.3425794,16.8186803 28.4106502,15.1489534 27.1095353,14.1879015 C26.1031352,13.4442685 24.9498146,13.1490681 23.4010809,13.0530309 L23.4010809,9.68328014 L21.3234143,9.68328014 L21.3234143,13.0132177 C20.8598332,13.0132177 20.3180823,13.0132177 19.740888,13.0132177 L19.740888,9.68328014 L17.6634155,9.68328014 L17.6634155,13.0132177 C15.542537,13.0132177 13.576056,13.0132177 13.576056,13.0132177 L13.576056,15.1708021 C13.576056,15.1708021 14.4498102,15.1708021 14.7774437,15.1708021 C15.1049802,15.1708021 15.6875153,15.2072166 15.9350369,15.4842583 C16.1826556,15.7608144 16.2263531,15.9065695 16.2263531,16.445116 C16.2263531,16.9838566 16.2264502,24.8384192 16.2264502,25.0423405 C16.2264502,25.2461647 16.187608,25.4984445 16.0127212,25.6636207 C15.8381258,25.828797 15.6634332,25.8673478 15.245783,25.8673478 C14.8282298,25.8673478 14.0032226,25.8673478 14.0032226,25.8673478 L13.576056,28.3627618 C13.576056,28.3627618 15.6073063,28.3627618 17.6634155,28.3627618 L17.6634155,31.6832801 L19.7409851,31.6832801 L19.7409851,28.3627618 C20.3793558,28.3627618 20.935187,28.3627618 21.3235114,28.3627618 L21.3235114,31.6832801 L23.4011781,31.6832801 L23.4011781,28.3079943 C23.9382679,28.2766293 24.4390403,28.2359421 24.7311333,28.1976826 C25.3234761,28.1201925 26.6631419,27.9648239 27.9158012,27.0909726 C29.1680722,26.2170243 29.4493865,24.8480327 29.4786152,23.4695247 C29.5081352,22.0909197 28.9831835,21.1489975 28.274994,20.6150151 Z M19.740888,15.3627794 C19.740888,15.3627794 20.4010103,15.3046133 21.0515192,15.3141296 C21.7022224,15.3237431 22.2747557,15.3432612 23.1293801,15.6054458 C23.9836161,15.8677274 24.4880785,16.5085258 24.507888,17.2658506 C24.527212,18.0231754 24.1967624,18.5278321 23.6145186,18.8482798 C23.0320805,19.1686305 22.2266885,19.3434201 21.4690724,19.3722604 C20.7119417,19.4014892 19.740888,19.3722604 19.740888,19.3722604 L19.740888,15.3627794 L19.740888,15.3627794 Z M24.3912645,25.2946203 C23.9155452,25.5569019 22.9640096,25.7898577 22.041897,25.8576373 C21.119493,25.9257081 19.740888,25.8965765 19.740888,25.8965765 L19.740888,21.4401194 C19.740888,21.4401194 21.0613269,21.3723399 22.0905468,21.4401194 C23.1195725,21.5083845 23.9836161,21.7702777 24.3717463,21.9647798 C24.7600707,22.1587963 25.4399054,22.5858658 25.4399054,23.6054722 C25.4399054,24.6246903 24.8666924,25.0325329 24.3912645,25.2946203 Z" id="BTC_alt_1_" fill="#189BC5" fill-rule="nonzero" mask="url(#mask-2)" transform="translate(21.527929, 20.683280) rotate(-345.000000) translate(-21.527929, -20.683280) "></path>
                                 </g>
                             </g>
                         </g>

Breeze.UI/src/assets/images/ico_stratis.svg

-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8"?>
 <svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
     <title>stratis</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Breeze-Wallet---Stratis-light---dashboard-&gt;-BTC" transform="translate(-14.000000, -92.000000)">
+        <g id="Breeze-Wallet---V2" transform="translate(-14.000000, -92.000000)">
             <g id="wallet" transform="translate(0.000000, -24.000000)">
                 <g id="content">
                     <g id="left-nav" transform="translate(0.000000, 24.000000)">
@@ -13,7 +13,7 @@
                             <g id="icons">
                                 <g id="stratis" transform="translate(0.000000, 62.000000)">
                                     <rect id="Rectangle-3-Copy" fill="#FFFFFF" x="0" y="0" width="42" height="42" rx="8"></rect>
-                                    <path d="M7.46002337,16.8770481 L20.9852984,24.4456138 C20.9942689,24.4512619 21.005565,24.4512619 21.0145354,24.4456138 L34.5368204,16.8772142 C34.5539307,16.8664164 34.5540968,16.8416646 34.5369865,16.8307007 L21.0122098,9.26097213 C21.0030732,9.25532407 20.9914449,9.25532407 20.9824744,9.26113825 L7.45969113,16.8308669 C7.44291307,16.8418307 7.44307919,16.8664164 7.46002337,16.8770481 Z M20.4827873,33.8803649 L6.15299596,25.855303 C6.14020477,25.8471632 6.13655014,25.830219 6.14468999,25.8174278 L6.76448146,24.8559287 C6.77262131,24.8431376 6.78973161,24.839649 6.80235668,24.8477889 L20.9824744,32.7876315 C20.9914449,32.7934457 21.0030732,32.7936118 21.0120437,32.7876315 L34.3017614,25.3486389 C34.628186,25.1657414 34.7919798,24.7938001 34.7919798,24.4208621 L34.7919798,22.4011824 C34.7919798,22.3794208 34.7680586,22.3662974 34.7497854,22.3779257 L21.5089068,29.7915021 C21.1439425,29.995829 20.8555592,29.9984869 20.4864419,29.7921666 L7.09572353,22.2988529 C6.40616192,21.8611283 6.00332239,21.1120959 6.00332239,20.2952869 L6,16.7662464 C6,16.2555954 6.26446208,16.0931306 6.65118803,15.8763448 L20.465677,8.14165965 C20.8047267,7.95244965 21.1929477,7.95228353 21.5338247,8.14415144 L35.5592852,15.9964491 C35.8481669,16.1582494 36,16.5001232 36,16.8439903 C36,17.1685876 35.8161058,17.532223 35.5592852,17.6760824 L21.5040893,25.5453242 C21.1444408,25.7461626 20.8500772,25.7461626 20.4899304,25.544992 L7.2359283,18.1242725 C7.21748905,18.1128102 7.19373398,18.1259337 7.19373398,18.1475292 L7.19722248,20.2952869 C7.19722248,20.6982925 7.40022039,21.0677421 7.74026679,21.2836973 L20.9826405,28.6999316 C20.991611,28.7055796 21.0030732,28.7055796 21.0120437,28.6999316 L34.5094107,21.1408346 C34.859092,20.9180685 35.3584469,20.907603 35.6823797,21.1953217 C35.8891984,21.3792159 36,21.6484955 36,21.9250843 L35.9996678,24.4117255 C35.9973421,25.180526 35.5592852,26.015276 34.9419856,26.3608044 L21.5055844,33.8833551 C21.1399556,34.0880142 20.8560575,34.0880142 20.4827873,33.8803649 L20.4827873,33.8803649 Z" id="logo" fill="#2FBAFF"></path>
+                                    <path d="M7.46002337,16.8770481 L20.9852984,24.4456138 C20.9942689,24.4512619 21.005565,24.4512619 21.0145354,24.4456138 L34.5368204,16.8772142 C34.5539307,16.8664164 34.5540968,16.8416646 34.5369865,16.8307007 L21.0122098,9.26097213 C21.0030732,9.25532407 20.9914449,9.25532407 20.9824744,9.26113825 L7.45969113,16.8308669 C7.44291307,16.8418307 7.44307919,16.8664164 7.46002337,16.8770481 Z M20.4827873,33.8803649 L6.15299596,25.855303 C6.14020477,25.8471632 6.13655014,25.830219 6.14468999,25.8174278 L6.76448146,24.8559287 C6.77262131,24.8431376 6.78973161,24.839649 6.80235668,24.8477889 L20.9824744,32.7876315 C20.9914449,32.7934457 21.0030732,32.7936118 21.0120437,32.7876315 L34.3017614,25.3486389 C34.628186,25.1657414 34.7919798,24.7938001 34.7919798,24.4208621 L34.7919798,22.4011824 C34.7919798,22.3794208 34.7680586,22.3662974 34.7497854,22.3779257 L21.5089068,29.7915021 C21.1439425,29.995829 20.8555592,29.9984869 20.4864419,29.7921666 L7.09572353,22.2988529 C6.40616192,21.8611283 6.00332239,21.1120959 6.00332239,20.2952869 L6,16.7662464 C6,16.2555954 6.26446208,16.0931306 6.65118803,15.8763448 L20.465677,8.14165965 C20.8047267,7.95244965 21.1929477,7.95228353 21.5338247,8.14415144 L35.5592852,15.9964491 C35.8481669,16.1582494 36,16.5001232 36,16.8439903 C36,17.1685876 35.8161058,17.532223 35.5592852,17.6760824 L21.5040893,25.5453242 C21.1444408,25.7461626 20.8500772,25.7461626 20.4899304,25.544992 L7.2359283,18.1242725 C7.21748905,18.1128102 7.19373398,18.1259337 7.19373398,18.1475292 L7.19722248,20.2952869 C7.19722248,20.6982925 7.40022039,21.0677421 7.74026679,21.2836973 L20.9826405,28.6999316 C20.991611,28.7055796 21.0030732,28.7055796 21.0120437,28.6999316 L34.5094107,21.1408346 C34.859092,20.9180685 35.3584469,20.907603 35.6823797,21.1953217 C35.8891984,21.3792159 36,21.6484955 36,21.9250843 L35.9996678,24.4117255 C35.9973421,25.180526 35.5592852,26.015276 34.9419856,26.3608044 L21.5055844,33.8833551 C21.1399556,34.0880142 20.8560575,34.0880142 20.4827873,33.8803649 L20.4827873,33.8803649 Z" id="logo" fill="#189BC5"></path>
                                 </g>
                             </g>
                         </g>

Breeze.UI/src/assets/images/illustration.svg

-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="60px" height="50px" viewBox="0 0 60 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
-    <title>illustration</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Breeze-Wallet---Stratis-light---welcome" transform="translate(-266.000000, -553.000000)" fill="#F69D32">
-            <g id="software">
-                <g id="logo" transform="translate(266.000000, 553.000000)">
-                    <path d="M37.6306633,38.592449 C34.4689286,37.5710204 31.1051531,34.142449 29.1485204,31.3582653 C27.1918878,28.5740816 24.9393367,22.939898 18.8806633,24.0240816 C13.6857653,24.9536735 11.4066837,31.1077551 6.60413265,31.2516327 C4.77403061,31.3067347 3.37607143,30.575102 2.52862245,29.8358163 C11.8755612,31.1322449 12.3255612,16.4026531 20.8362755,15.4995918 C27.1270918,14.8322449 29.7469898,19.7307143 31.7255612,23.8103061 C35.3622959,31.3082653 38.3852551,38.0291837 48.1536224,37.3531633 C47.0260714,38.1526531 42.1980102,40.0684694 37.6306633,38.592449 M50.0883163,34.8021429 C42.2225,35.9929592 37.650051,30.2827551 35.7852551,25.8796939 C32.6138265,18.3909184 29.9352551,12.7786735 20.475051,13.5332653 C22.1796429,12.7511224 24.5536224,11.7077551 28.5107653,12.0664286 C37.3117857,12.8633673 39.4801531,27.0853061 48.7520918,27.4980612 C54.5362755,27.7552041 57.6561735,25.1720408 58.7077041,19.6194898 C58.7117857,19.5960204 58.7444388,19.5888776 58.7617857,19.5730612 C55.9730102,6.69857143 43.5321939,-1.84632653 30.3980102,0.341428571 C19.8418878,2.09959184 11.9638265,10.2735714 10.0719898,20.2062245 C10.0719898,20.2062245 9.29545918,23.850102 6.35872449,26.7031633 C4.74443878,28.2710204 4.00515306,28.3608163 3.00260204,28.3490816 C1.69392857,28.3342857 5.10204082e-05,27.3169388 5.10204082e-05,27.3169388 C5.10204082e-05,27.3169388 0.510765306,32.8817347 6.3102551,33.2628571 C7.65107143,33.3511224 10.8184184,33.0720408 11.7684184,34.9363265 C16.2510714,45.0531633 27.1434184,51.267449 38.5633163,49.364898 C50.7219898,47.339898 59.3321939,36.8062245 59.3281122,24.8740816 C57.6709694,30.3531633 54.8153571,34.0868367 50.0883163,34.8021429" id="illustration"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file

Breeze.UI/src/scss/_alert.scss

-//
-// Base styles
-//
-
-.alert {
-  padding: $alert-padding-y $alert-padding-x;
-  margin-bottom: $alert-margin-bottom;
-  border: $alert-border-width solid transparent;
-  @include border-radius($alert-border-radius);
-}
-
-// Headings for larger alerts
-.alert-heading {
-  // Specified to prevent conflicts of changing $headings-color
-  color: inherit;
-}
-
-// Provide class for links that match alerts
-.alert-link {
-  font-weight: $alert-link-font-weight;
-}
-
-
-// Dismissible alerts
-//
-// Expand the right padding and account for the close button's positioning.
-
-.alert-dismissible {
-  // Adjust close link position
-  .close {
-    position: relative;
-    top: -$alert-padding-y;
-    right: -$alert-padding-x;
-    padding: $alert-padding-y $alert-padding-x;
-    color: inherit;
-  }
-}
-
-
-// Alternate styles
-//
-// Generate contextual modifier classes for colorizing the alert.
-
-.alert-success {
-  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
-}
-.alert-info {
-  @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
-}
-.alert-warning {
-  @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
-}
-.alert-danger {
-  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
-}
+//
+// Base styles
+//
+
+.alert {
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
+  @include border-radius($alert-border-radius);
+}
+
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  // Adjust close link position
+  .close {
+    position: relative;
+    top: -$alert-padding-y;
+    right: -$alert-padding-x;
+    padding: $alert-padding-y $alert-padding-x;
+    color: inherit;
+  }
+}
+
+
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+.alert-success {
+  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
+}
+.alert-info {
+  @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
+}
+.alert-warning {
+  @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
+}
+.alert-danger {
+  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
+}

Breeze.UI/src/scss/_badge.scss

-// Base class
-//
-// Requires one of the contextual, color modifier classes for `color` and
-// `background-color`.
-
-.badge {
-  display: inline-block;
-  padding: $badge-padding-y $badge-padding-x;
-  font-size: $badge-font-size;
-  font-weight: $badge-font-weight;
-  line-height: 1;
-  color: $badge-color;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  @include border-radius();
-
-  // Empty badges collapse automatically
-  &:empty {
-    display: none;
-  }
-}
-
-// Quick fix for badges in buttons
-.btn .badge {
-  position: relative;
-  top: -1px;
-}
-
-// scss-lint:disable QualifyingElement
-// Add hover effects, but only for links
-a.badge {
-  @include hover-focus {
-    color: $badge-link-hover-color;
-    text-decoration: none;
-    cursor: pointer;
-  }
-}
-// scss-lint:enable QualifyingElement
-
-// Pill badges
-//
-// Make them extra rounded with a modifier to replace v3's badges.
-
-.badge-pill {
-  padding-right: $badge-pill-padding-x;
-  padding-left: $badge-pill-padding-x;
-  @include border-radius($badge-pill-border-radius);
-}
-
-// Colors
-//
-// Contextual variations (linked badges get darker on :hover).
-
-.badge-default {
-  @include badge-variant($badge-default-bg);
-}
-
-.badge-primary {
-  @include badge-variant($badge-primary-bg);
-}
-
-.badge-success {
-  @include badge-variant($badge-success-bg);
-}
-
-.badge-info {
-  @include badge-variant($badge-info-bg);
-}
-
-.badge-warning {
-  @include badge-variant($badge-warning-bg);
-}
-
-.badge-danger {
-  @include badge-variant($badge-danger-bg);
-}
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  color: $badge-color;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius();
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+// scss-lint:disable QualifyingElement
+// Add hover effects, but only for links
+a.badge {
+  @include hover-focus {
+    color: $badge-link-hover-color;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+// scss-lint:enable QualifyingElement
+
+// Pill badges
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+.badge-default {
+  @include badge-variant($badge-default-bg);
+}
+
+.badge-primary {
+  @include badge-variant($badge-primary-bg);
+}
+
+.badge-success {
+  @include badge-variant($badge-success-bg);
+}
+
+.badge-info {
+  @include badge-variant($badge-info-bg);
+}
+
+.badge-warning {
+  @include badge-variant($badge-warning-bg);
+}
+
+.badge-danger {
+  @include badge-variant($badge-danger-bg);
+}

Breeze.UI/src/scss/_breadcrumb.scss

-.breadcrumb {
-  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
-  margin-bottom: $spacer-y;
-  list-style: none;
-  background-color: $breadcrumb-bg;
-  @include border-radius($border-radius);
-  @include clearfix;
-}
-
-.breadcrumb-item {
-  float: left;
-
-  // The separator between breadcrumbs (by default, a forward-slash: "/")
-  + .breadcrumb-item::before {
-    display: inline-block; // Suppress underlining of the separator in modern browsers
-    padding-right: $breadcrumb-item-padding;
-    padding-left: $breadcrumb-item-padding;
-    color: $breadcrumb-divider-color;
-    content: "#{$breadcrumb-divider}";
-  }
-
-  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
-  // without `<ul>`s. The `::before` pseudo-element generates an element
-  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
-  //
-  // To trick IE into suppressing the underline, we give the pseudo-element an
-  // underline and then immediately remove it.
-  + .breadcrumb-item:hover::before {
-    text-decoration: underline;
-  }
-  + .breadcrumb-item:hover::before {
-    text-decoration: none;
-  }
-
-  &.active {
-    color: $breadcrumb-active-color;
-  }
-}
+.breadcrumb {
+  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  margin-bottom: $spacer-y;
+  list-style: none;
+  background-color: $breadcrumb-bg;
+  @include border-radius($border-radius);
+  @include clearfix;
+}
+
+.breadcrumb-item {
+  float: left;
+
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item::before {
+    display: inline-block; // Suppress underlining of the separator in modern browsers
+    padding-right: $breadcrumb-item-padding;
+    padding-left: $breadcrumb-item-padding;
+    color: $breadcrumb-divider-color;
+    content: "#{$breadcrumb-divider}";
+  }
+
+  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
+  // without `<ul>`s. The `::before` pseudo-element generates an element
+  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
+  //
+  // To trick IE into suppressing the underline, we give the pseudo-element an
+  // underline and then immediately remove it.
+  + .breadcrumb-item:hover::before {
+    text-decoration: underline;
+  }
+  + .breadcrumb-item:hover::before {
+    text-decoration: none;
+  }
+
+  &.active {
+    color: $breadcrumb-active-color;
+  }
+}

Breeze.UI/src/scss/_buttons.scss

-// scss-lint:disable QualifyingElement
-
-//
-// Base styles
-//
-
-.btn {
-  display: inline-block;
-  font-weight: $btn-font-weight;
-  line-height: $btn-line-height;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-  border: $input-btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
-  @include transition($btn-transition);
-
-  // Share hover and focus styles
-  @include hover-focus {
-    text-decoration: none;
-  }
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: $btn-focus-box-shadow;
-  }
-
-  // Disabled comes first so active can properly restyle
-  &.disabled,
-  &:disabled {
-    cursor: $cursor-disabled;
-    opacity: 0;
-    @include box-shadow(none);
-  }
-
-  &:active,
-  &.active {
-    background-image: none;
-    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
-  }
-}
-
-// Future-proof disabling of clicks on `<a>` elements
-a.btn.disabled,
-fieldset[disabled] a.btn {
-  pointer-events: none;
-}
-
-
-//
-// Alternate buttons
-//
-
-.btn-primary {
-  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
-}
-.btn-secondary {
-  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
-}
-.btn-info {
-  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
-}
-.btn-success {
-  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
-}
-.btn-warning {
-  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
-}
-.btn-danger {
-  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
-}
-.btn-darkgray {
-  @include button-variant($btn-darkgray-color, $btn-darkgray-bg, $btn-darkgray-border);
-}
-
-// Remove all backgrounds
-.btn-outline-primary {
-  @include button-outline-variant($btn-primary-bg);
-}
-.btn-outline-secondary {
-  @include button-outline-variant($btn-secondary-border);
-}
-.btn-outline-info {
-  @include button-outline-variant($btn-info-bg);
-}
-.btn-outline-success {
-  @include button-outline-variant($btn-success-bg);
-}
-.btn-outline-warning {
-  @include button-outline-variant($btn-warning-bg);
-}
-.btn-outline-danger {
-  @include button-outline-variant($btn-danger-bg);
-}
-
-
-//
-// Link buttons
-//
-
-// Make a button look and behave like a link
-.btn-link {
-  font-weight: $font-weight-normal;
-  color: $link-color;
-  border-radius: 0;
-
-  &,
-  &:active,
-  &.active,
-  &:disabled {
-    background-color: transparent;
-    @include box-shadow(none);
-  }
-  &,
-  &:focus,
-  &:active {
-    border-color: transparent;
-  }
-  @include hover {
-    border-color: transparent;
-  }
-  @include hover-focus {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
-    background-color: transparent;
-  }
-  &:disabled {
-    color: $btn-link-disabled-color;
-
-    @include hover-focus {
-      text-decoration: none;
-    }
-  }
-}
-
-
-//
-// Button Sizes
-//
-
-.btn-lg {
-  // line-height: ensure even-numbered height of button next to large input
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
-}
-.btn-sm {
-  // line-height: ensure proper height of button next to small input
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
-}
-
-
-//
-// Block button
-//
-
-.btn-block {
-  display: block;
-  width: 100%;
-}
-
-// Vertically space out multiple block buttons
-.btn-block + .btn-block {
-  margin-top: $btn-block-spacing-y;
-}
-
-// Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  &.btn-block {
-    width: 100%;
-  }
-}
+// scss-lint:disable QualifyingElement
+
+//
+// Base styles
+//
+
+.btn {
+  display: inline-block;
+  font-weight: $btn-font-weight;
+  line-height: $btn-line-height;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border: $input-btn-border-width solid transparent;
+  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
+  @include transition($btn-transition);
+
+  // Share hover and focus styles
+  @include hover-focus {
+    text-decoration: none;
+  }
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: $btn-focus-box-shadow;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    cursor: $cursor-disabled;
+    opacity: 0;
+    @include box-shadow(none);
+  }
+
+  &:active,
+  &.active {
+    background-image: none;
+    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+  }
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+a.btn.disabled,
+fieldset[disabled] a.btn {
+  pointer-events: none;
+}
+
+
+//
+// Alternate buttons
+//
+
+.btn-primary {
+  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+}
+.btn-secondary {
+  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
+}
+.btn-info {
+  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
+}
+.btn-success {
+  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
+}
+.btn-warning {
+  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+}
+.btn-danger {
+  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+}
+.btn-darkgray {
+  @include button-variant($btn-darkgray-color, $btn-darkgray-bg, $btn-darkgray-border);
+}
+
+// Remove all backgrounds
+.btn-outline-primary {
+  @include button-outline-variant($btn-primary-bg);
+}
+.btn-outline-secondary {
+  @include button-outline-variant($btn-secondary-border);
+}
+.btn-outline-info {
+  @include button-outline-variant($btn-info-bg);
+}
+.btn-outline-success {
+  @include button-outline-variant($btn-success-bg);
+}
+.btn-outline-warning {
+  @include button-outline-variant($btn-warning-bg);
+}
+.btn-outline-danger {
+  @include button-outline-variant($btn-danger-bg);
+}
+
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+  font-weight: $font-weight-normal;
+  color: $link-color;
+  border-radius: 0;
+
+  &,
+  &:active,
+  &.active,
+  &:disabled {
+    background-color: transparent;
+    @include box-shadow(none);
+  }
+  &,
+  &:focus,
+  &:active {
+    border-color: transparent;
+  }
+  @include hover {
+    border-color: transparent;
+  }
+  @include hover-focus {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+    background-color: transparent;
+  }
+  &:disabled {
+    color: $btn-link-disabled-color;
+
+    @include hover-focus {
+      text-decoration: none;
+    }
+  }
+}
+
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+  // line-height: ensure even-numbered height of button next to large input
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
+}
+.btn-sm {
+  // line-height: ensure proper height of button next to small input
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
+}
+
+
+//
+// Block button
+//
+
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+  margin-top: $btn-block-spacing-y;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}

Breeze.UI/src/scss/_carousel.scss

-// Wrapper for the slide container and indicators
-.carousel {
-  position: relative;
-}
-
-.carousel-inner {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.carousel-item {
-  position: relative;
-  display: none;
-  width: 100%;
-
-  @include if-supports-3d-transforms() {
-    @include transition($carousel-transition);
-    backface-visibility: hidden;
-    perspective: 1000px;
-  }
-}
-
-.carousel-item.active,
-.carousel-item-next,
-.carousel-item-prev {
-  display: flex;
-}
-
-.carousel-item-next,
-.carousel-item-prev {
-  position: absolute;
-  top: 0;
-}
-
-// CSS3 transforms when supported by the browser
-@include if-supports-3d-transforms() {
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
-    transform: translate3d(0, 0, 0);
-  }
-
-  .carousel-item-next,
-  .active.carousel-item-right {
-    transform: translate3d(100%, 0, 0);
-  }
-
-  .carousel-item-prev,
-  .active.carousel-item-left {
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-
-//
-// Left/right controls for nav
-//
-
-.carousel-control-prev,
-.carousel-control-next {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  // Use flex for alignment (1-3)
-  display: flex; // 1. allow flex styles
-  align-items: center; // 2. vertically center contents
-  justify-content: center; // 3. horizontally center contents
-  width: $carousel-control-width;
-  color: $carousel-control-color;
-  text-align: center;
-  opacity: $carousel-control-opacity;
-  // We can't have a transition here because WebKit cancels the carousel
-  // animation if you trip this while in the middle of another animation.
-
-  // Hover/focus state
-  @include hover-focus {
-    color: $carousel-control-color;
-    text-decoration: none;
-    outline: 0;
-    opacity: .9;
-  }
-}
-.carousel-control-prev {
-  left: 0;
-}
-.carousel-control-next {
-  right: 0;
-}
-
-// Icons for within
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  display: inline-block;
-  width: $carousel-control-icon-width;
-  height: $carousel-control-icon-width;
-  background: transparent no-repeat center center;
-  background-size: 100% 100%;
-}
-.carousel-control-prev-icon {
-  background-image: $carousel-control-prev-icon-bg;
-}
-.carousel-control-next-icon {
-  background-image: $carousel-control-next-icon-bg;
-}
-
-
-// Optional indicator pips
-//
-// Add an ordered list with the following class and add a list item for each
-// slide your carousel holds.
-
-.carousel-indicators {
-  position: absolute;
-  right: 0;
-  bottom: 10px;
-  left: 0;
-  z-index: 15;
-  display: flex;
-  justify-content: center;
-  padding-left: 0; // override <ol> default
-  // Use the .carousel-control's width as margin so we don't overlay those
-  margin-right: $carousel-control-width;
-  margin-left: $carousel-control-width;
-  list-style: none;
-
-  li {
-    position: relative;
-    flex: 1 0 auto;
-    max-width: $carousel-indicator-width;
-    height: $carousel-indicator-height;
-    margin-right: $carousel-indicator-spacer;
-    margin-left: $carousel-indicator-spacer;
-    text-indent: -999px;
-    cursor: pointer;
-    background-color: rgba($carousel-indicator-active-bg, .5);
-
-    // Use pseudo classes to increase the hit area by 10px on top and bottom.
-    &::before {
-      position: absolute;
-      top: -10px;
-      left: 0;
-      display: inline-block;
-      width: 100%;
-      height: 10px;
-      content: "";
-    }
-    &::after {
-      position: absolute;
-      bottom: -10px;
-      left: 0;
-      display: inline-block;
-      width: 100%;
-      height: 10px;
-      content: "";
-    }
-  }
-
-  .active {
-    background-color: $carousel-indicator-active-bg;
-  }
-}
-
-
-// Optional captions
-//
-//
-
-.carousel-caption {
-  position: absolute;
-  right: ((100% - $carousel-caption-width) / 2);
-  bottom: 20px;
-  left: ((100% - $carousel-caption-width) / 2);
-  z-index: 10;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  color: $carousel-caption-color;
-  text-align: center;
-}
+// Wrapper for the slide container and indicators
+.carousel {
+  position: relative;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  width: 100%;
+
+  @include if-supports-3d-transforms() {
+    @include transition($carousel-transition);
+    backface-visibility: hidden;
+    perspective: 1000px;
+  }
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: flex;
+}
+
+.carousel-item-next,
+.carousel-item-prev {
+  position: absolute;
+  top: 0;
+}
+
+// CSS3 transforms when supported by the browser
+@include if-supports-3d-transforms() {
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    transform: translate3d(0, 0, 0);
+  }
+
+  .carousel-item-next,
+  .active.carousel-item-right {
+    transform: translate3d(100%, 0, 0);
+  }
+
+  .carousel-item-prev,
+  .active.carousel-item-left {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+
+//
+// Left/right controls for nav
+//
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  // Use flex for alignment (1-3)
+  display: flex; // 1. allow flex styles
+  align-items: center; // 2. vertically center contents
+  justify-content: center; // 3. horizontally center contents
+  width: $carousel-control-width;
+  color: $carousel-control-color;
+  text-align: center;
+  opacity: $carousel-control-opacity;
+  // We can't have a transition here because WebKit cancels the carousel
+  // animation if you trip this while in the middle of another animation.
+
+  // Hover/focus state
+  @include hover-focus {
+    color: $carousel-control-color;
+    text-decoration: none;
+    outline: 0;
+    opacity: .9;
+  }
+}
+.carousel-control-prev {
+  left: 0;
+}
+.carousel-control-next {
+  right: 0;
+}
+
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: $carousel-control-icon-width;
+  height: $carousel-control-icon-width;
+  background: transparent no-repeat center center;
+  background-size: 100% 100%;
+}
+.carousel-control-prev-icon {
+  background-image: $carousel-control-prev-icon-bg;
+}
+.carousel-control-next-icon {
+  background-image: $carousel-control-next-icon-bg;
+}
+
+
+// Optional indicator pips
+//
+// Add an ordered list with the following class and add a list item for each
+// slide your carousel holds.
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  left: 0;
+  z-index: 15;
+  display: flex;
+  justify-content: center;
+  padding-left: 0; // override <ol> default
+  // Use the .carousel-control's width as margin so we don't overlay those
+  margin-right: $carousel-control-width;
+  margin-left: $carousel-control-width;
+  list-style: none;
+
+  li {
+    position: relative;
+    flex: 1 0 auto;
+    max-width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: rgba($carousel-indicator-active-bg, .5);
+
+    // Use pseudo classes to increase the hit area by 10px on top and bottom.
+    &::before {
+      position: absolute;
+      top: -10px;
+      left: 0;
+      display: inline-block;
+      width: 100%;
+      height: 10px;
+      content: "";
+    }
+    &::after {
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      display: inline-block;
+      width: 100%;
+      height: 10px;
+      content: "";
+    }
+  }
+
+  .active {
+    background-color: $carousel-indicator-active-bg;
+  }
+}
+
+
+// Optional captions
+//
+//
+
+.carousel-caption {
+  position: absolute;
+  right: ((100% - $carousel-caption-width) / 2);
+  bottom: 20px;
+  left: ((100% - $carousel-caption-width) / 2);
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: $carousel-caption-color;
+  text-align: center;
+}

Breeze.UI/src/scss/_close.scss

-.close {
-  float: right;
-  font-size: $close-font-size;
-  font-weight: $close-font-weight;
-  line-height: 1;
-  color: $close-color;
-  text-shadow: $close-text-shadow;
-  opacity: .5;
-
-  @include hover-focus {
-    color: $close-color;
-    text-decoration: none;
-    cursor: pointer;
-    opacity: .75;
-  }
-}
-
-// Additional properties for button version
-// iOS requires the button element instead of an anchor tag.
-// If you want the anchor version, it requires `href="#"`.
-// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-// scss-lint:disable QualifyingElement
-button.close {
-  padding: 0;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  -webkit-appearance: none;
-}
-// scss-lint:enable QualifyingElement
+.close {
+  float: right;
+  font-size: $close-font-size;
+  font-weight: $close-font-weight;
+  line-height: 1;
+  color: $close-color;
+  text-shadow: $close-text-shadow;
+  opacity: .5;
+
+  @include hover-focus {
+    color: $close-color;
+    text-decoration: none;
+    cursor: pointer;
+    opacity: .75;
+  }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// scss-lint:disable QualifyingElement
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}
+// scss-lint:enable QualifyingElement

Breeze.UI/src/scss/_code.scss

-// Inline and block code styles
-code,
-kbd,
-pre,
-samp {
-  font-family: $font-family-monospace;
-}
-
-// Inline code
-code {
-  padding: $code-padding-y $code-padding-x;
-  font-size: $code-font-size;
-  color: $code-color;
-  background-color: $code-bg;
-  @include border-radius($border-radius);
-  overflow-wrap: break-word;
-
-  // Streamline the style when inside anchors to avoid broken underline and more
-  a > & {
-    padding: 0;
-    color: inherit;
-    background-color: inherit;
-  }
-}
-
-// User input typically entered via keyboard
-kbd {
-  padding: $code-padding-y $code-padding-x;
-  font-size: $code-font-size;
-  color: $kbd-color;
-  background-color: $kbd-bg;
-  @include border-radius($border-radius-sm);
-  @include box-shadow($kbd-box-shadow);
-
-  kbd {
-    padding: 0;
-    font-size: 100%;
-    font-weight: $nested-kbd-font-weight;
-    @include box-shadow(none);
-  }
-}
-
-// Blocks of code
-pre {
-  display: block;
-  margin-top: 0;
-  margin-bottom: 1rem;
-  font-size: $code-font-size;
-  color: $pre-color;
-
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    padding: 0;
-    font-size: inherit;
-    color: inherit;
-    background-color: transparent;
-    border-radius: 0;
-  }
-}
-
-// Enable scrollable blocks of code
-.pre-scrollable {
-  max-height: $pre-scrollable-max-height;
-  overflow-y: scroll;
-}
+// Inline and block code styles
+code,
+kbd,
+pre,
+samp {
+  font-family: $font-family-monospace;
+}
+
+// Inline code
+code {
+  padding: $code-padding-y $code-padding-x;
+  font-size: $code-font-size;
+  color: $code-color;
+  background-color: $code-bg;
+  @include border-radius($border-radius);
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    padding: 0;
+    color: inherit;
+    background-color: inherit;
+  }
+}
+
+// User input typically entered via keyboard
+kbd {
+  padding: $code-padding-y $code-padding-x;
+  font-size: $code-font-size;
+  color: $kbd-color;
+  background-color: $kbd-bg;
+  @include border-radius($border-radius-sm);
+  @include box-shadow($kbd-box-shadow);
+
+  kbd {
+    padding: 0;
+    font-size: 100%;
+    font-weight: $nested-kbd-font-weight;
+    @include box-shadow(none);
+  }
+}
+
+// Blocks of code
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: $code-font-size;
+  color: $pre-color;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    background-color: transparent;
+    border-radius: 0;
+  }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: $pre-scrollable-max-height;
+  overflow-y: scroll;
+}

Breeze.UI/src/scss/_dropdown.scss

-// The dropdown wrapper (`<div>`)
-.dropup,
-.dropdown {
-  position: relative;
-}
-
-.dropdown-toggle {
-  // Generate the caret automatically
-  &::after {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-left: $caret-width;
-    vertical-align: middle;
-    content: "";
-    border-top: $caret-width solid;
-    border-right: $caret-width solid transparent;
-    border-left: $caret-width solid transparent;
-  }
-
-  // Prevent the focus on the dropdown toggle when closing dropdowns
-  &:focus {
-    outline: 0;
-  }
-}
-
-.dropup {
-  .dropdown-toggle {
-    &::after {
-      border-top: 0;
-      border-bottom: $caret-width solid;
-    }
-  }
-}
-
-// The dropdown menu
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: $zindex-dropdown;
-  display: none; // none by default, but block on "open" of the menu
-  float: left;
-  min-width: $dropdown-min-width;
-  padding: $dropdown-padding-y 0;
-  margin: $dropdown-margin-top 0 0; // override default ul
-  font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
-  color: $body-color;
-  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
-  list-style: none;
-  background-color: $dropdown-bg;
-  background-clip: padding-box;
-  border: $dropdown-border-width solid $dropdown-border-color;
-  border-radius: 50px;
-  @include box-shadow($dropdown-box-shadow);
-}
-
-// Dividers (basically an `<hr>`) within the dropdown
-.dropdown-divider {
-  @include nav-divider($dropdown-divider-bg);
-}
-
-// Links, buttons, and more within the dropdown menu
-//
-// `<button>`-specific styles are denoted with `// For <button>s`
-.dropdown-item {
-  display: block;
-  width: 100%; // For `<button>`s
-  padding: 3px $dropdown-item-padding-x;
-  clear: both;
-  font-weight: $font-weight-normal;
-  color: $dropdown-link-color;
-  text-align: inherit; // For `<button>`s
-  white-space: nowrap; // prevent links from randomly breaking onto new lines
-  background: none; // For `<button>`s
-  border: 0; // For `<button>`s
-
-  @include hover-focus {
-    color: $dropdown-link-hover-color;
-    text-decoration: none;
-    background-color: $dropdown-link-hover-bg;
-  }
-
-  &.active,
-  &:active {
-    color: $dropdown-link-active-color;
-    text-decoration: none;
-    background-color: $dropdown-link-active-bg;
-  }
-
-  &.disabled,
-  &:disabled {
-    color: $dropdown-link-disabled-color;
-    cursor: $cursor-disabled;
-    background-color: transparent;
-    // Remove CSS gradients if they're enabled
-    @if $enable-gradients {
-      background-image: none;
-    }
-  }
-}
-
-// Open state for the dropdown
-.show {
-  // Show the menu
-  > .dropdown-menu {
-    display: block;
-  }
-
-  // Remove the outline when :focus is triggered
-  > a {
-    outline: 0;
-  }
-}
-
-// Menu positioning
-//
-// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
-// menu with the parent.
-.dropdown-menu-right {
-  right: 0;
-  left: auto; // Reset the default from `.dropdown-menu`
-}
-
-.dropdown-menu-left {
-  right: auto;
-  left: 0;
-}
-
-// Dropdown section headers
-.dropdown-header {
-  display: block;
-  padding: $dropdown-padding-y $dropdown-item-padding-x;
-  margin-bottom: 0; // for use with heading elements
-  font-size: $font-size-sm;
-  color: $dropdown-header-color;
-  white-space: nowrap; // as with > li > a
-}
-
-// Backdrop to catch body clicks on mobile, etc.
-.dropdown-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-dropdown-backdrop;
-}
-
-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-//
-// Just add .dropup after the standard .dropdown class and you're set.
-
-.dropup {
-  // Different positioning for bottom up menu
-  .dropdown-menu {
-    top: auto;
-    bottom: 100%;
-    margin-bottom: $dropdown-margin-top;
-  }
-}
+// The dropdown wrapper (`<div>`)
+.dropup,
+.dropdown {
+  position: relative;
+}
+
+.dropdown-toggle {
+  // Generate the caret automatically
+  &::after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: $caret-width;
+    vertical-align: middle;
+    content: "";
+    border-top: $caret-width solid;
+    border-right: $caret-width solid transparent;
+    border-left: $caret-width solid transparent;
+  }
+
+  // Prevent the focus on the dropdown toggle when closing dropdowns
+  &:focus {
+    outline: 0;
+  }
+}
+
+.dropup {
+  .dropdown-toggle {
+    &::after {
+      border-top: 0;
+      border-bottom: $caret-width solid;
+    }
+  }
+}
+
+// The dropdown menu
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: $zindex-dropdown;
+  display: none; // none by default, but block on "open" of the menu
+  float: left;
+  min-width: $dropdown-min-width;
+  padding: $dropdown-padding-y 0;
+  margin: $dropdown-margin-top 0 0; // override default ul
+  font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
+  color: $body-color;
+  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  list-style: none;
+  background-color: $dropdown-bg;
+  background-clip: padding-box;
+  border: $dropdown-border-width solid $dropdown-border-color;
+  @include border-radius($border-radius);
+  @include box-shadow($dropdown-box-shadow);
+}
+
+// Dividers (basically an `<hr>`) within the dropdown
+.dropdown-divider {
+  @include nav-divider($dropdown-divider-bg);
+}
+
+// Links, buttons, and more within the dropdown menu
+//
+// `<button>`-specific styles are denoted with `// For <button>s`
+.dropdown-item {
+  display: block;
+  width: 100%; // For `<button>`s
+  padding: 3px $dropdown-item-padding-x;
+  clear: both;
+  font-weight: $font-weight-normal;
+  color: $dropdown-link-color;
+  text-align: inherit; // For `<button>`s
+  white-space: nowrap; // prevent links from randomly breaking onto new lines
+  background: none; // For `<button>`s
+  border: 0; // For `<button>`s
+
+  @include hover-focus {
+    color: $dropdown-link-hover-color;
+    text-decoration: none;
+    background-color: $dropdown-link-hover-bg;
+  }
+
+  &.active,
+  &:active {
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+    background-color: $dropdown-link-active-bg;
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $dropdown-link-disabled-color;
+    cursor: $cursor-disabled;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
+}
+
+// Open state for the dropdown
+.show {
+  // Show the menu
+  > .dropdown-menu {
+    display: block;
+  }
+
+  // Remove the outline when :focus is triggered
+  > a {
+    outline: 0;
+  }
+}
+
+// Menu positioning
+//
+// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
+// menu with the parent.
+.dropdown-menu-right {
+  right: 0;
+  left: auto; // Reset the default from `.dropdown-menu`
+}
+
+.dropdown-menu-left {
+  right: auto;
+  left: 0;
+}
+
+// Dropdown section headers
+.dropdown-header {
+  display: block;
+  padding: $dropdown-padding-y $dropdown-item-padding-x;
+  margin-bottom: 0; // for use with heading elements
+  font-size: $font-size-sm;
+  color: $dropdown-header-color;
+  white-space: nowrap; // as with > li > a
+}
+
+// Backdrop to catch body clicks on mobile, etc.
+.dropdown-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-dropdown-backdrop;
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+//
+// Just add .dropup after the standard .dropdown class and you're set.
+
+.dropup {
+  // Different positioning for bottom up menu
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: $dropdown-margin-top;
+  }
+}

Breeze.UI/src/scss/_grid.scss

-// Container widths
-//
-// Set the container width, and override it for fixed navbars in media queries.
-
-@if $enable-grid-classes {
-  .container {
-    @include make-container();
-    @include make-container-max-widths();
-  }
-}
-
-// Fluid container
-//
-// Utilizes the mixin meant for fixed width containers, but without any defined
-// width for fluid, full width layouts.
-
-@if $enable-grid-classes {
-  .container-fluid {
-    @include make-container();
-  }
-}
-
-// Row
-//
-// Rows contain and clear the floats of your columns.
-
-@if $enable-grid-classes {
-  .row {
-    @include make-row();
-  }
-
-  // Remove the negative margin from default .row, then the horizontal padding
-  // from all immediate children columns (to prevent runaway style inheritance).
-  .no-gutters {
-    margin-right: 0;
-    margin-left: 0;
-
-    > .col,
-    > [class*="col-"] {
-      padding-right: 0;
-      padding-left: 0;
-    }
-  }
-}
-
-// Columns
-//
-// Common styles for small and large grid columns
-
-@if $enable-grid-classes {
-  @include make-grid-columns();
-}
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+@if $enable-grid-classes {
+  .container {
+    @include make-container();
+    @include make-container-max-widths();
+  }
+}
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+@if $enable-grid-classes {
+  .container-fluid {
+    @include make-container();
+  }
+}
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
+@if $enable-grid-classes {
+  .row {
+    @include make-row();
+  }
+
+  // Remove the negative margin from default .row, then the horizontal padding
+  // from all immediate children columns (to prevent runaway style inheritance).
+  .no-gutters {
+    margin-right: 0;
+    margin-left: 0;
+
+    > .col,
+    > [class*="col-"] {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+}
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@if $enable-grid-classes {
+  @include make-grid-columns();
+}

Breeze.UI/src/scss/_images.scss

-// Responsive images (ensure images don't scale beyond their parents)
-//
-// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
-// We previously tried the "images are responsive by default" approach in Bootstrap v2,
-// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
-// which weren't expecting the images within themselves to be involuntarily resized.
-// See also https://github.com/twbs/bootstrap/issues/18178
-.img-fluid {
-  @include img-fluid;
-}
-
-
-// Image thumbnails
-.img-thumbnail {
-  padding: $thumbnail-padding;
-  background-color: $thumbnail-bg;
-  border: $thumbnail-border-width solid $thumbnail-border-color;
-  @include border-radius($thumbnail-border-radius);
-  @include transition($thumbnail-transition);
-  @include box-shadow($thumbnail-box-shadow);
-
-  // Keep them at most 100% wide
-  @include img-fluid;
-}
-
-//
-// Figures
-//
-
-.figure {
-  // Ensures the caption's text aligns with the image.
-  display: inline-block;
-}
-
-.figure-img {
-  margin-bottom: ($spacer-y / 2);
-  line-height: 1;
-}
-
-.figure-caption {
-  font-size: $figure-caption-font-size;
-  color: $figure-caption-color;
-}
+// Responsive images (ensure images don't scale beyond their parents)
+//
+// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
+// We previously tried the "images are responsive by default" approach in Bootstrap v2,
+// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+// which weren't expecting the images within themselves to be involuntarily resized.
+// See also https://github.com/twbs/bootstrap/issues/18178
+.img-fluid {
+  @include img-fluid;
+}
+
+
+// Image thumbnails
+.img-thumbnail {
+  padding: $thumbnail-padding;
+  background-color: $thumbnail-bg;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
+  @include border-radius($thumbnail-border-radius);
+  @include transition($thumbnail-transition);
+  @include box-shadow($thumbnail-box-shadow);
+
+  // Keep them at most 100% wide
+  @include img-fluid;
+}
+
+//
+// Figures
+//
+
+.figure {
+  // Ensures the caption's text aligns with the image.
+  display: inline-block;
+}
+
+.figure-img {
+  margin-bottom: ($spacer-y / 2);
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: $figure-caption-font-size;
+  color: $figure-caption-color;
+}

Breeze.UI/src/scss/_media.scss

-.media {
-  display: flex;
-  align-items: flex-start;
-}
-
-.media-body {
-  flex: 1;
-}
+.media {
+  display: flex;
+  align-items: flex-start;
+}
+
+.media-body {
+  flex: 1;
+}

Breeze.UI/src/scss/mixins/_clearfix.scss

-@mixin clearfix() {
-  &::after {
-    display: block;
-    content: "";
-    clear: both;
-  }
-}
+@mixin clearfix() {
+  &::after {
+    display: block;
+    content: "";
+    clear: both;
+  }
+}