fix(docs): update styles (#486)

akveo · Jun 12, 2018 · 9e44fb8 · 9e44fb8
1 parent 6a8d62e
commit 9e44fb8
Show file tree

Hide file tree

Showing 15 changed files with 106 additions and 67 deletions.
diff --git a/docs/app/@theme/components/footer/footer.component.html b/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:https://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:https://akveo.com" target="_blank">Akveo LLC</a><br>
+ &copy; 2015-2018 <a href="http:https://akveo.com?utm_source=nebular_documentation&utm_medium=footer" target="_blank">Akveo LLC</a><br>
  Documentation licensed under CC BY 4.0.
  </li>
  </ul>

diff --git a/docs/app/@theme/components/footer/footer.component.scss b/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;
  }
  }
  }

diff --git a/docs/app/@theme/components/header/header.component.scss b/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;
  }
  }

diff --git a/docs/app/@theme/components/hero/hero.component.scss b/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;
  }
  }
  }

diff --git a/docs/app/@theme/components/hero/hero.component.ts b/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:https://akveo.com/ngx-admin">Demo</a>
+ <a class="btn" href="http:https://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>
  `,

diff --git a/docs/app/@theme/components/icon-card/icon-card.component.scss b/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 {

diff --git a/docs/app/@theme/styles/themes.scss b/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);
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
@@ -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;

diff --git a/docs/app/documentation/documentation.component.html b/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>

diff --git a/docs/app/documentation/documentation.component.scss b/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;
- }
  }
  }
 }
diff --git a/docs/app/documentation/documentation.component.ts b/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;
  }

diff --git a/docs/app/documentation/page/page.component.scss b/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;

diff --git a/docs/app/home/home.component.ts b/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',

diff --git a/docs/tsconfig.app.json b/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"]
  }