refactor(style): improve secondary nav styling

Author: sirajc

src/app/forms/forms.component.html

@@ -1,5 +1,5 @@
 <h4> Forms Component </h4>
-<ul class="nav nav-pills">
+<ul class="nav nav-tabs">
   <li class="nav-item">
     <a class="nav-link" routerLink="template" routerLinkActive="active">Template Driven</a>
   </li>
@@ -10,11 +10,11 @@ <h4> Forms Component </h4>
     <a class="nav-link" routerLink="model-form-builder" routerLinkActive="active">Model Driven - Form Builder</a>
   </li>
 </ul>
+<br>
+<div style="max-width: 42em;">
+
+  <router-outlet></router-outlet>
+  <br><br>
+  Angular Forms (Template Driven and Model Driven)
 
-<div class="card" style="max-width: 42em;">
-  <div class="card-block">
-    <router-outlet></router-outlet>
-    <br><br>
-    Angular Forms (Template Driven and Model Driven)
-  </div>
 </div>

src/app/forms/forms.component.scss

@@ -0,0 +1,32 @@
+.nav-tabs {
+  border-bottom: 1px solid #eee;
+}
+
+.nav-tabs> li {
+  padding: 0;
+  // font-size: smaller;
+}
+
+.nav-tabs> li.active> a,
+.nav-tabs> li.active> a:focus,
+.nav-tabs> li.active> a:hover {
+  border-width: 0;
+}
+
+.nav-tabs> li> a {
+  border: none;
+  color: #666;
+  padding: 0.125rem 1rem;
+}
+
+.nav-tabs> li> a:hover {
+  border-bottom: solid 2px lighten($color: #4285F4, $amount: 20%);
+  background: transparent;
+}
+
+.nav-tabs> li> a.active,
+.nav-tabs> li> a:hover .active {
+  border-bottom: solid 2px #4285F4;
+  color: #4285F4;
+  background: transparent;
+}

src/app/forms/forms.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'labs-forms',
-  templateUrl: 'forms.component.html'
+  templateUrl: 'forms.component.html',
+  styleUrls: ['forms.component.scss']
 })
 export class FormsComponent {}

src/app/forms/forms.routes.ts

@@ -7,7 +7,7 @@ import { ModelBuilderModule } from './model-builder';
 const ROUTES: Route[] = [
   { path: '', component: FormsComponent,
     children: [
-      { path: '', pathMatch: 'full' },
+      { path: '', redirectTo: 'template' },
       { path: 'template', loadChildren: () => TemplateModule },
       { path: 'model-form-controls', loadChildren: () => ModelControlsModule },
       { path: 'model-form-builder', loadChildren: () => ModelBuilderModule }

src/app/lazy/lazy.component.html

@@ -1,5 +1,5 @@
 <h4> Lazy Component </h4>
-<ul class="nav nav-pills">
+<ul class="nav nav-tabs">
   <li class="nav-item">
     <a class="nav-link" routerLink="." routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" >Lazy</a>
   </li>

src/app/lazy/lazy.component.scss

@@ -1,3 +1,36 @@
 .card {
   max-width: 32em;
-}
+}
+
+.nav-tabs {
+  border-bottom: 1px solid #eee;
+}
+
+.nav-tabs> li {
+  padding: 0;
+  // font-size: smaller;
+}
+
+.nav-tabs> li.active> a,
+.nav-tabs> li.active> a:focus,
+.nav-tabs> li.active> a:hover {
+  border-width: 0;
+}
+
+.nav-tabs> li> a {
+  border: none;
+  color: #666;
+  padding: 0.125rem 1rem;
+}
+
+.nav-tabs> li> a:hover {
+  border-bottom: solid 2px lighten($color: #4285F4, $amount: 20%);
+  background: transparent;
+}
+
+.nav-tabs> li> a.active,
+.nav-tabs> li> a:hover .active {
+  border-bottom: solid 2px #4285F4;
+  color: #4285F4;
+  background: transparent;
+}

src/app/masonry/masonry-demo.component.html

@@ -4,7 +4,7 @@
   width and number of columns are adjusted based on screen size
 </p>
 
-<ul class="nav nav-pills">
+<ul class="nav nav-tabs">
   <li class="nav-item">
     <a class="nav-link" routerLink="markup" routerLinkActive="active">Markup based</a>
   </li>

src/app/masonry/masonry-demo.component.scss

@@ -0,0 +1,32 @@
+.nav-tabs {
+  border-bottom: 1px solid #eee;
+}
+
+.nav-tabs> li {
+  padding: 0;
+  // font-size: smaller;
+}
+
+.nav-tabs> li.active> a,
+.nav-tabs> li.active> a:focus,
+.nav-tabs> li.active> a:hover {
+  border-width: 0;
+}
+
+.nav-tabs> li> a {
+  border: none;
+  color: #666;
+  padding: 0.125rem 1rem;
+}
+
+.nav-tabs> li> a:hover {
+  border-bottom: solid 2px lighten($color: #4285F4, $amount: 20%);
+  background: transparent;
+}
+
+.nav-tabs> li> a.active,
+.nav-tabs> li> a:hover .active {
+  border-bottom: solid 2px #4285F4;
+  color: #4285F4;
+  background: transparent;
+}

src/app/masonry/masonry-demo.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'labs-masonry-demo',
-  templateUrl: 'masonry-demo.component.html'
+  templateUrl: 'masonry-demo.component.html',
+  styleUrls: [ 'masonry-demo.component.scss' ]
 })
 export class MasonryDemoComponent {}