From 0e81ee180ba5318af37c2d6f35f98e921a575c48 Mon Sep 17 00:00:00 2001
From: Patrick Sun <patrick@lawipac.com>
Date: Mon, 28 Dec 2020 18:29:42 +1100
Subject: [PATCH] added white text divider with title

---
 src/app/app.module.ts                         |  4 +-
 .../bkp-divider-text.component.html           |  3 ++
 .../bkp-divider-text.component.scss           | 37 +++++++++++++++++++
 .../bkp-divider-text.component.spec.ts        | 25 +++++++++++++
 .../bkp-divider-text.component.ts             | 15 ++++++++
 src/app/dashboard/dashboard.component.html    |  1 +
 6 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/app/bkp-divider-text/bkp-divider-text.component.html
 create mode 100644 src/app/bkp-divider-text/bkp-divider-text.component.scss
 create mode 100644 src/app/bkp-divider-text/bkp-divider-text.component.spec.ts
 create mode 100644 src/app/bkp-divider-text/bkp-divider-text.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e00de05..6dbe8a9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -33,6 +33,7 @@ import { ChartsModule } from '@progress/kendo-angular-charts';
 import 'hammerjs';
 import { BkpDividerComponent } from './bkp-divider/bkp-divider.component';
 import { BkpDividerShadowBottomComponent } from './bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component';
+import { BkpDividerTextComponent } from './bkp-divider-text/bkp-divider-text.component';
 
 
 
@@ -48,7 +49,8 @@ import { BkpDividerShadowBottomComponent } from './bkp-divider-shadow-bottom/bkp
     CanvasComponent,
     LoanEditComponent,
     BkpDividerComponent,
-    BkpDividerShadowBottomComponent 
+    BkpDividerShadowBottomComponent,
+    BkpDividerTextComponent 
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/bkp-divider-text/bkp-divider-text.component.html b/src/app/bkp-divider-text/bkp-divider-text.component.html
new file mode 100644
index 0000000..ee12b1b
--- /dev/null
+++ b/src/app/bkp-divider-text/bkp-divider-text.component.html
@@ -0,0 +1,3 @@
+<div class='divider'>
+    <ng-content></ng-content>
+</div>
\ No newline at end of file
diff --git a/src/app/bkp-divider-text/bkp-divider-text.component.scss b/src/app/bkp-divider-text/bkp-divider-text.component.scss
new file mode 100644
index 0000000..1ad8e3d
--- /dev/null
+++ b/src/app/bkp-divider-text/bkp-divider-text.component.scss
@@ -0,0 +1,37 @@
+$link-color: #f52e62;
+$text-color: #3f517e;
+$hr-color:   rgba(0,0,0,0.35);
+$hr-text-color: #453986;
+
+$letter-spacing: .32em;
+
+$background-color: #fff;
+
+div.divider {
+    font-family: "Share Tech Mono", monospace;
+    color: $text-color;
+    font-size: 2vh;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
+    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      height: 0.09em;
+      min-width: 30vw;
+    }
+    
+    &::before {
+      background: linear-gradient(to right, rgba(240,240,240,0), #fff);
+      margin-right: 4vh;
+    }
+    
+    &::after {
+      background: linear-gradient(to left, rgba(240,240,240,0), #fff);
+      margin-left: 4vh;
+    } 
+  }
diff --git a/src/app/bkp-divider-text/bkp-divider-text.component.spec.ts b/src/app/bkp-divider-text/bkp-divider-text.component.spec.ts
new file mode 100644
index 0000000..c5d5b56
--- /dev/null
+++ b/src/app/bkp-divider-text/bkp-divider-text.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BkpDividerTextComponent } from './bkp-divider-text.component';
+
+describe('BkpDividerTextComponent', () => {
+  let component: BkpDividerTextComponent;
+  let fixture: ComponentFixture<BkpDividerTextComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BkpDividerTextComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BkpDividerTextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/bkp-divider-text/bkp-divider-text.component.ts b/src/app/bkp-divider-text/bkp-divider-text.component.ts
new file mode 100644
index 0000000..ba8c5fa
--- /dev/null
+++ b/src/app/bkp-divider-text/bkp-divider-text.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'bkp-divider-text',
+  templateUrl: './bkp-divider-text.component.html',
+  styleUrls: ['./bkp-divider-text.component.scss']
+})
+export class BkpDividerTextComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index c84159d..b43236a 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -98,5 +98,6 @@
     </div>
     
     <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>  
+    <bkp-divider-text> some text </bkp-divider-text>
   </div>
 </div>
\ No newline at end of file