feat(docs): Eva update (#1433)

akveo · May 27, 2019 · e4fb525 · e4fb525
1 parent 660ab68
commit e4fb525
Show file tree

Hide file tree

Showing 17 changed files with 110 additions and 69 deletions.
diff --git a/docs/app/@theme/components/footer/footer.component.scss b/docs/app/@theme/components/footer/footer.component.scss
@@ -2,8 +2,8 @@
 
 @include nb-install-component() {
 
-  $text-fg: nb-theme(footer-fg);
-  $social-fg: nb-theme(color-fg-icon);
+  $text-fg: nb-theme(footer-text-color);
+  $icon-color: nb-theme(footer-icon-color);
   $title-fg: nb-theme(color-fg-heading);
 
   display: flex;
@@ -21,10 +21,6 @@
       margin-right: 0;
     }
 
-    a {
-      color: $text-fg;
-    }
-
     ul {
       list-style: none;
       padding-left: 0;
@@ -61,7 +57,7 @@
       a {
         font-size: 3rem;
         text-decoration: none;
-        color: $social-fg;
+        color: $icon-color;
         margin-right: 1rem;
       }
     }

diff --git a/docs/app/@theme/components/header/header.component.scss b/docs/app/@theme/components/header/header.component.scss
@@ -63,7 +63,6 @@
 
           &:hover, &.active, &:focus {
             color: $menu-item-fg-active;
-            text-shadow: 0.5px 0 0 currentColor;
             outline: none!important;
           }
         }

diff --git a/docs/app/@theme/styles/_common.scss b/docs/app/@theme/styles/_common.scss
@@ -30,4 +30,13 @@
   .algolia-docsearch-suggestion--category-header {
     background-color: transparent;
   }
+
+  .visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+  }
 }
diff --git a/docs/app/@theme/styles/themes.scss b/docs/app/@theme/styles/themes.scss
@@ -22,19 +22,17 @@ $nb-enabled-themes: (docs-home, docs-page);
 
 /* stylelint-disable max-line-length */
 $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"'),
+  font-family-primary: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'),
+  font-family-secondary: font-family-primary,
 
   // custom
   content-width: 1140px,
   settings-col-width: 0,
   settings-col-margin: 0,
   color-fg-heading-light: #ffffff,
-  color-fg-icon: #cdd6e3,
   header-menu-fg-active: color-fg,
   footer-menu-fg: color-fg-text,
 
-  separator: transparent,
-  color-bg: transparent,
   color-fg: white,
   color-fg-heading: #0d1c2e,
   color-fg-text: #919fb1,
@@ -43,6 +41,10 @@ $nb-themes: nb-register-theme((
   layout-padding: 0,
   layout-medium-padding: 0,
   layout-small-padding: 0,
+  footer-text-color: color-fg-text,
+  footer-icon-color: #cdd6e3,
+  footer-background-color: transparent,
+  footer-divider-width: 0,
   header-padding: 0 0,
   header-height: 4.25rem,
   header-fg: color-fg-heading-light,
@@ -53,7 +55,6 @@ $nb-themes: nb-register-theme((
   footer-padding: 1.25rem 0,
   menu-font-size: 0.95rem,
   menu-font-weight: font-weight-normal,
-  footer-fg: color-fg-text,
 ), docs-home, default);
 /* stylelint-enable max-line-length */
 
@@ -90,7 +91,6 @@ $nb-themes: nb-register-theme((
   menu-fg: black,
   menu-submenu-fg: color-fg-heading-light,
   menu-active-fg: menu-fg,
-  menu-submenu-padding: 0,
   menu-submenu-item-container-padding: 0 1rem,
   menu-submenu-active-border-color: transparent,
   menu-submenu-active-fg: color-fg-highlight,
@@ -101,5 +101,5 @@ $nb-themes: nb-register-theme((
   card-header-fg-heading: black,
   card-margin: 2.5rem,
   footer-shadow: none,
-  footer-fg: color-fg-heading-light,
+  footer-text-color: color-fg-heading-light,
 ), docs-page, docs-home);
diff --git a/.../app/blocks/components/components-overview-block/components-overview-block.component.html b/.../app/blocks/components/components-overview-block/components-overview-block.component.html
@@ -1,10 +1,12 @@
 <nb-card class="header-card">
-  <nb-card-header>Components Overview</nb-card-header>
+  <nb-card-header>
+    <h2 class="h4">Components Overview</h2>
+  </nb-card-header>
 </nb-card>
 
 <div class="components-list">
   <ng-container *ngFor="let component of components">
-    <h2 *ngIf="component.group">{{ component.name }}</h2>
+    <h3 *ngIf="component.group" class="group-title h4">{{ component.name }}</h3>
     <div *ngIf="!component.group" class="component-card-wrapper">
       <a class="component-navigate-link" [routerLink]="component.link">
         <nb-card [attr.title]="component.name">

diff --git a/.../app/blocks/components/components-overview-block/components-overview-block.component.scss b/.../app/blocks/components/components-overview-block/components-overview-block.component.scss
@@ -6,7 +6,7 @@
     display: flex;
     flex-wrap: wrap;
 
-    h2 {
+    .group-title {
       flex: 1 1 100%;
       color: nb-theme(color-fg-heading-light);
       margin: 1rem 0 2rem;
@@ -19,6 +19,8 @@
 
     .component-icon {
       margin-bottom: 1rem;
+      width: 4rem;
+      height: 4rem;
     }
 
     .component-name {

diff --git a/docs/app/documentation/documentation.component.scss b/docs/app/documentation/documentation.component.scss
@@ -5,11 +5,10 @@
   $content-width: nb-theme(content-width);
   $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);
+  $layout-background-color: nb-theme(layout-background-color);
 
   .menu-sidebar {
-    background-color: $layout-bg;
+    background-color: $layout-background-color;
 
     &.fixed {
       box-shadow: 8px 0 20px 0 rgba(218, 224, 235, 0.6);
@@ -27,17 +26,21 @@
 
   .contact-us {
     padding: 5rem 1rem;
+
     h2 {
-      color: black;
+      font-family: nb-theme(text-heading-4-font-family);
+      font-size: nb-theme(text-heading-4-font-size);
+      font-weight: normal;
+      line-height: nb-theme(text-heading-4-line-height);
     }
   }
 
   .collapse-all {
     position: absolute;
-    right: 1px;
-    top: 0.75rem;
+    right: 0.5rem;
+    top: 1.05rem;
     font-size: 0.75rem;
-    color: $color-heading;
+    color: nb-theme(text-hint-color);
     appearance: none;
     background: none;
     border: none;
@@ -59,31 +62,20 @@
   }
 
   /deep/ nb-sidebar nb-menu {
-    > .menu-items > .menu-item {
-      margin-bottom: 0.5rem;
-      font-weight: bold;
-      a:hover {
-        font-weight: bold;
-      }
-      li {
-        font-size: 0.875rem;
-        font-weight: normal;
-      }
-      li.menu-group {
-        font-weight: bold;
-        padding-top: 1.25rem;
-        padding-bottom: 1rem;
-      }
+    .menu-group {
+      padding-left: 0;
     }
 
     nb-icon {
       display: none;
     }
 
+    .menu-item {
+      border: none!important;
+    }
+
     .menu-items .menu-item .menu-item a {
       &:hover, &.active, &:focus {
-        text-shadow: 0.5px 0 0 currentColor;
-        font-weight: normal;
         outline: none!important;
       }
     }

diff --git a/docs/app/documentation/page/page.component.html b/docs/app/documentation/page/page.component.html
@@ -2,7 +2,10 @@
 
   <nb-card *ngIf="currentItem?.tabs" class="horizontal-nav">
     <nb-card-header>
-      {{ currentItem?.name }}
+      <h1 class="page-header h4">
+        {{ currentItem?.name }}
+        <span class="visually-hidden">{{ tabbedBlock?.currentTab?.tab }}</span>
+      </h1>
     </nb-card-header>
     <nb-card-body>
       <ngd-page-tabs [tabs]="currentItem?.tabs" horizontal></ngd-page-tabs>

diff --git a/docs/app/documentation/page/page.component.scss b/docs/app/documentation/page/page.component.scss
@@ -3,15 +3,15 @@
 @include nb-install-component() {
   display: flex;
 
-  $note-fg-info: nb-theme(color-info);
+  $note-fg-info: nb-theme(color-info-500);
   $note-bg-info: #f0f6ff;
-  $note-fg-warning: nb-theme(color-warning);
+  $note-fg-warning: nb-theme(color-warning-500);
   $note-bg-warning: #fffae4;
   $settings-width: nb-theme(settings-col-width);
   $settings-margin: nb-theme(settings-col-margin);
   $heading-light: nb-theme(color-fg-heading-light);
   $code-bg: #f1f2f3;
-  $code-fg: nb-theme(color-info);
+  $code-fg: nb-theme(color-info-500);
   $code-block-bg: nb-theme(code-block-bg);
   $table-head-fg: #8994a3;
   $table-border: 1px solid #f1f2f3;
@@ -26,7 +26,11 @@
     flex: 3;
     min-width: 0;
 
-    /deep/ nb-card {
+    .page-header {
+      margin: 0;
+    }
+
+    ::ng-deep nb-card {
 
       nb-card-body {
         padding: 2rem 1rem;
@@ -41,9 +45,22 @@
       }
 
       h1, h2, h3, h4, h5, h6 {
-        line-height: 1.25;
         margin-bottom: 1.25rem;
-        font-weight: bold;
+
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:not(:first-child) {
+          margin-top: 3rem;
+        }
+      }
+
+      h1, h2, h3 {
+        font-family: nb-theme(text-heading-4-font-family);
+        font-size: nb-theme(text-heading-4-font-size);
+        font-weight: nb-theme(text-heading-4-font-weight);
+        line-height: nb-theme(text-heading-4-line-height);
       }
 
       h3 {

diff --git a/docs/app/documentation/page/page.component.ts b/docs/app/documentation/page/page.component.ts
@@ -4,11 +4,12 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, Inject, NgZone, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { filter, map, publishReplay, refCount, tap, takeWhile } from 'rxjs/operators';
 import { NB_WINDOW } from '@nebular/theme';
+import { NgdTabbedBlockComponent } from '../../blocks/components/tabbed-block/tabbed-block.component';
 import { NgdStructureService } from '../../@theme/services';
 
 @Component({
@@ -21,6 +22,8 @@ export class NgdPageComponent implements OnInit, OnDestroy {
   currentItem;
   private alive = true;
 
+  @ViewChild(NgdTabbedBlockComponent) tabbedBlock: NgdTabbedBlockComponent;
+
   constructor(@Inject(NB_WINDOW) private window,
               private ngZone: NgZone,
               private router: Router,

diff --git a/src/framework/theme/components/calendar/_calendar.component.theme.scss b/src/framework/theme/components/calendar/_calendar.component.theme.scss
@@ -24,6 +24,7 @@
     }
 
     nb-card {
+      border: none;
       margin: 0;
     }
 

diff --git a/src/framework/theme/components/layout/_layout.component.theme.scss b/src/framework/theme/components/layout/_layout.component.theme.scss
@@ -168,7 +168,7 @@
 
           nav {
             background-color: nb-theme(footer-background-color);
-            border-top: 1px solid nb-theme(footer-divider-color);
+            border-top: nb-theme(footer-divider-width) nb-theme(footer-divider-style) nb-theme(footer-divider-color);
             color: nb-theme(footer-text-color);
             font-family: nb-theme(footer-text-font-family);
             font-size: nb-theme(footer-text-font-size);

diff --git a/src/framework/theme/components/layout/layout.component.ts b/src/framework/theme/components/layout/layout.component.ts
@@ -86,13 +86,15 @@ export class NbLayoutColumnComponent {
  *
  * @styles
  *
- * header-font-family
- * header-line-height
- * header-fg
- * header-bg
- * header-height
- * header-padding
- * header-shadow
+ * header-background-color:
+ * header-text-color:
+ * header-text-font-family:
+ * header-text-font-size:
+ * header-text-font-weight:
+ * header-text-line-height:
+ * header-height:
+ * header-padding:
+ * header-shadow:
  */
 @Component({
   selector: 'nb-layout-header',
@@ -140,12 +142,19 @@ export class NbLayoutHeaderComponent {
  *
  * @styles
  *
- * footer-height
- * footer-padding
- * footer-fg
- * footer-bg
- * footer-separator
- * footer-shadow
+ * footer-background-color:
+ * footer-text-color:
+ * footer-text-font-family:
+ * footer-text-font-size:
+ * footer-text-font-weight:
+ * footer-text-line-height:
+ * footer-text-highlight-color:
+ * footer-height:
+ * footer-padding:
+ * footer-divider-color:
+ * footer-divider-style:
+ * footer-divider-width:
+ * footer-shadow:
  */
 @Component({
   selector: 'nb-layout-footer',
@@ -194,7 +203,7 @@ export class NbLayoutFooterComponent {
  * ```ts
  * @NgModule({
  *   imports: [
- *   	// ...
+ *     // ...
  *     NbLayoutModule.forRoot(),
  *   ],
  * })
@@ -204,7 +213,7 @@ export class NbLayoutFooterComponent {
  * ```ts
  * @NgModule({
  *   imports: [
- *   	// ...
+ *     // ...
  *     NbLayoutModule,
  *   ],
  * })
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ @@
         }
         nb-card {
+          border: none;
           margin: 0;
         }
@@ Expand Down @@