fix(docs): update styles

docs/app/@theme/components/footer/footer.component.html

@@ -4,9 +4,8 @@
 <div>
   <ul>
     <li><strong class="title">More from Akveo</strong></li>
-    <li><a href="#">Homepage</a></li>
-    <li><a href="#">Nebular</a></li>
-    <li><a href="#">Kitten Tricks</a></li>
+    <li><a href="http://akveo.com?utm_source=nebular_documentation&utm_medium=footer" target="_blank">Homepage</a></li>
+    <li><a href="https://akveo.github.io/react-native-ui-kitten?utm_source=nebular_documentation&utm_medium=footer">React Native UI Kitten</a></li>
   </ul>
 </div>
 <div>
@@ -24,7 +23,7 @@
       </a>
     </li>
     <li class="copy">
-      &copy; 2015-2018 <a href="http://akveo.com" target="_blank">Akveo LLC</a><br>
+      &copy; 2015-2018 <a href="http://akveo.com?utm_source=nebular_documentation&utm_medium=footer" target="_blank">Akveo LLC</a><br>
       Documentation licensed under CC BY 4.0.
     </li>
   </ul>

docs/app/@theme/components/footer/footer.component.scss

@@ -86,12 +86,13 @@
 
   @include media-breakpoint-up(lg) {
     > div.logo {
-      display: block;
+      display: flex;
       flex-direction: column;
-      margin-top: -1.2rem;
+      margin-top: -2.5rem;
       text-align: center;
+      justify-content: center;
       img {
-        max-width: 9rem;
+        max-width: 7rem;
       }
     }
   }

docs/app/@theme/components/header/header.component.scss

@@ -57,8 +57,11 @@
           color: $menu-item-fg;
           display: block;
 
-          &:hover, &.active {
+          &:hover, &.active, &:focus {
             color: $menu-item-fg-active;
+            text-shadow: 0.5px 0 0 currentColor;
+            font-weight: normal;
+            outline: none!important;
           }
         }
       }
@@ -173,7 +176,7 @@
 
       .menu-items {
         li {
-          margin-top: 0.4rem;
+          margin-top: 0.25rem;
           display: none;
         }
       }

docs/app/@theme/components/hero/hero.component.scss

@@ -2,7 +2,7 @@
 
 @include nb-install-component() {
 
-  $shadow: 0 12px 34px 0 rgba(0, 60, 183, 0.25);
+  $shadow: 0 12px 34px rgba(0, 60, 183, 0.25);
   $btn-bg: linear-gradient(90deg, #18f297 0%, #00e6e6 100%);
   $btn-shadow-hover: 0 18px 34px 0 rgba(0, 60, 183, 0.35);
   $btn-shadow-active: inset 0 1px 3px 0 rgba(0, 60, 183, 0.5);
@@ -121,9 +121,11 @@
 
       h3 {
         font-size: 32px;
+        line-height: 1;
       }
       h3:nth-child(2) {
-        font-size: 94px;
+        font-size: 98px;
+        font-weight: bold;
       }
     }
   }

docs/app/@theme/components/hero/hero.component.ts

@@ -6,14 +6,15 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   template: `
     <div class="block">
       <h1>Nebular</h1>
-      <p>Components, Auth & Security for your next Angular app</p>
+      <p>Components, Auth & Security for your next Angular App</p>
       <a class="btn get-started" routerLink="docs">Get Started</a>
-      <a class="btn" href="http://akveo.com/ngx-admin">Demo</a>
+      <a class="btn" href="http://akveo.com/ngx-admin?utm_source=nebular_documentation&utm_medium=demo_button"
+         target="_blank">Demo</a>
     </div>
     <div class="right-block">
       <div class="shield">
         <h3>Not Just Another</h3>
-        <h3>UI kit</h3>
+        <h3>UI Kit</h3>
       </div>
     </div>
   `,

docs/app/@theme/components/icon-card/icon-card.component.scss

@@ -18,9 +18,11 @@
   flex-direction: column;
   cursor: pointer;
   max-width: 30rem;
+  transition: transform 0.25s ease;
 
   &:hover {
     box-shadow: $shadow-hover;
+    transform: translateY(-1rem);
   }
 
   h2 {

docs/app/@theme/styles/themes.scss

@@ -8,7 +8,9 @@ $grid-breakpoints: map-merge($grid-breakpoints, (macpro: 1280px));
 
 $nb-enabled-themes: (docs-home, docs-page);
 
+/* stylelint-disable */
 $nb-themes: nb-register-theme((
+  font-main: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'),
   // custom
   content-width: 1144px,
   settings-col-width: 0,
@@ -31,6 +33,7 @@ $nb-themes: nb-register-theme((
   header-padding: 0 0,
   header-height: 4.25rem,
   header-fg: color-fg-heading-light,
+  menu-item-padding: 0.675rem 1rem,
   menu-fg: color-fg-heading-light,
   menu-active-fg: menu-fg,
   footer-height: 18.75rem,
@@ -40,7 +43,7 @@ $nb-themes: nb-register-theme((
   menu-font-weight: font-weight-normal,
   footer-fg: color-fg-text,
 ), docs-home, default);
-
+/* stylelint-enable foo */
 $nb-themes: nb-register-theme((
   // custom
   content-width: 1440px,
@@ -71,19 +74,20 @@ $nb-themes: nb-register-theme((
   link-color-visited: color-fg-highlight,
   header-padding: 0,
   header-fg: black,
-  menu-fg: color-fg,
+  menu-fg: black,
+  menu-submenu-fg: color-fg-heading-light,
   menu-active-fg: menu-fg,
   menu-submenu-padding: 0,
-  menu-submenu-item-padding: 0.5rem 0,
+  menu-submenu-item-padding: 0.375rem 0,
   menu-submenu-item-container-padding: 0 1rem,
   menu-submenu-active-border-color: transparent,
   menu-submenu-active-fg: color-fg-highlight,
+  menu-active-font-weight: bold,
   card-bg: white,
   card-header-font-size: 2rem,
   card-header-font-weight: bold,
   card-header-fg-heading: black,
   card-margin: 2.5rem,
-  card-padding: 2rem 3rem 2rem 2rem,
   footer-shadow: none,
   footer-fg: color-fg-heading-light,
 ), docs-page, docs-home);

docs/app/blocks/components/components-overview-block/components-overview-block.component.scss

@@ -28,34 +28,35 @@
       text-decoration: none;
     }
 
-    nb-card > nb-card-body {
-      height: 200px;
-      padding: 2rem;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
 
     nb-card {
       box-shadow: 0 4px 27px 0 rgba(230, 234, 240, 0.2);
-    }
+      transition: transform 0.25s ease;
 
-    nb-card:hover {
-      box-shadow: 0 15px 37px 0 #dbe2eb;
+      > nb-card-body {
+        height: 200px;
+        padding: 2rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
 
-      .component-name {
-        color: nb-theme(color-fg);
+      &:hover {
+        box-shadow: 0 15px 37px 0 #dbe2eb;
+        transform: translateY(-1rem);
+        .component-name {
+          color: nb-theme(color-fg);
+        }
       }
     }
   }
 
   @include media-breakpoint-up(is) {
     .components-list {
-      margin-left: -1rem;
-      margin-right: -1rem;
 
-      .components-list .component-card-wrapper {
+      .component-card-wrapper {
+        flex: 1 0 auto;
         width: 50%;
         padding-left: 1rem;
         padding-right: 1rem;
@@ -65,8 +66,6 @@
 
   @include media-breakpoint-up(md) {
     .components-list {
-      margin-left: -1.5rem;
-      margin-right: -1.5rem;
 
       .component-card-wrapper {
         flex: 1 0 auto;

docs/app/documentation/documentation.component.html

@@ -5,6 +5,7 @@
     </div>
   </nb-layout-header>
   <nb-sidebar class="menu-sidebar" [tag]="sidebarTag" [responsive]="true" [compactedBreakpoints]="[]" [collapsedBreakpoints]="collapsedBreakpoints">
+    <button (click)="collapseMenu()" class="collapse-all">Collapse all</button>
     <nb-menu [items]="menuItems" tag="leftMenu"></nb-menu>
   </nb-sidebar>
   <nb-layout-column>

docs/app/documentation/documentation.component.scss

@@ -6,6 +6,7 @@
   $settings-width: nb-theme(settings-col-width);
   $settings-margin: nb-theme(settings-col-margin);
   $layout-bg: nb-theme(layout-bg);
+  $color-heading: nb-theme(color-fg-heading-light);
 
   .menu-sidebar {
     background-color: $layout-bg;
@@ -31,6 +32,17 @@
     }
   }
 
+  .collapse-all {
+    position: absolute;
+    right: 1px;
+    top: 0.75rem;
+    font-size: 0.75rem;
+    color: $color-heading;
+    appearance: none;
+    background: none;
+    border: none;
+  }
+
   /deep/ nb-layout .main-container {
     padding-top: 3rem;
 
@@ -48,13 +60,24 @@
 
   /deep/ nb-sidebar nb-menu {
     > ul > li {
-      margin-bottom: 1.25rem;
+      margin-bottom: 0.5rem;
       font-weight: bold;
+      a:hover {
+        font-weight: bold;
+      }
       li {
         font-size: 0.875rem;
         font-weight: normal;
       }
     }
+
+    .menu-items .menu-item .menu-item a {
+      &:hover, &.active, &:focus {
+        text-shadow: 0.5px 0 0 currentColor;
+        font-weight: normal;
+        outline: none!important;
+      }
+    }
   }
 
   /deep/ nb-layout-footer ngd-footer .contact {
@@ -70,10 +93,6 @@
   @include media-breakpoint-up(macpro) {
     /deep/ nb-layout-footer {
       margin-right: $settings-width + $settings-margin;
-
-      ngd-footer .contact {
-        display: flex;
-      }
     }
   }
 }

docs/app/documentation/documentation.component.ts

@@ -7,7 +7,7 @@
 import { Component, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { takeWhile, withLatestFrom, map } from 'rxjs/operators';
-import { NbThemeService, NbMenuItem, NbSidebarService } from '@nebular/theme';
+import { NbThemeService, NbMenuItem, NbSidebarService, NbMenuService } from '@nebular/theme';
 
 import { NgdMenuService } from './menu.service';
 import { NgdPaginationService } from '../@theme/services';
@@ -31,6 +31,7 @@ export class NgdDocumentationComponent implements OnDestroy {
     private router: Router,
     private themeService: NbThemeService,
     private sidebarService: NbSidebarService,
+    private menuService: NbMenuService,
     private paginationService: NgdPaginationService) {
 
     this.themeService.changeTheme('docs-page');
@@ -56,6 +57,10 @@ export class NgdDocumentationComponent implements OnDestroy {
       });
   }
 
+  collapseMenu() {
+    this.menuService.collapseAll('leftMenu');
+  }
+
   ngOnDestroy() {
     this.alive = false;
   }

docs/app/documentation/page/page.component.scss

@@ -22,6 +22,11 @@
     min-width: 0;
 
     /deep/ nb-card {
+
+      nb-card-body {
+        padding: 2rem 1rem;
+      }
+
       h1, h2, h3, h4, h5, h6 {
         line-height: 1.25;
         margin-bottom: 1.25rem;
@@ -183,6 +188,12 @@
     display: none;
   }
 
+  @include media-breakpoint-up(md) {
+    .middle-column /deep/ nb-card nb-card-body {
+      padding: 2rem 3rem 2rem 2rem;
+    }
+  }
+
   @include media-breakpoint-up(lg) {
     .horizontal-nav {
       margin-top: 0;

docs/app/home/home.component.ts

@@ -28,19 +28,19 @@ export class NgdHomeComponent {
       icon: 'assets/img/guides.svg',
       link: 'docs/guides/install-based-on-starter-kit',
     },
+    {
+      title: 'Components',
+      description: 'Native Angular components with configurable styles',
+      icon: 'assets/img/components.svg',
+      link: 'docs/components/components-overview',
+    },
     {
       title: 'Theme System',
       description: `Two built-in themes & hundreds of variables to create your own.
                     Multiple themes with hot reload out of the box.`,
       icon: 'assets/img/themes.svg',
       link: 'docs/guides/theme-system',
     },
-    {
-      title: 'Components',
-      description: 'Native Angular components with configurable styles',
-      icon: 'assets/img/components.svg',
-      link: 'docs/components/components-overview',
-    },
     {
       title: 'Auth',
       description: 'Authentication layer with configurable Strategies',

docs/tsconfig.app.json

@@ -17,6 +17,7 @@
     "types": [],
     "paths": {
       "@nebular/theme": ["../src/framework/theme"],
+      "@nebular/theme/*": ["../src/framework/theme/*"],
       "@nebular/auth": ["../src/framework/auth"],
       "@nebular/security": ["../src/framework/security"]
     }