docs: 4.0 fixes (#1465)

yggg · yggg · commit 46a022cb44ab · 2019-05-27T14:59:30.000+02:00
diff --git a/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss b/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss
@@ -74,6 +74,7 @@
 
   @include media-breakpoint-up(md) {
     .components-list {
+      margin: 0 -1.5rem;
 
       .component-card-wrapper {
         flex: 1 0 auto;
diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.scss b/docs/app/blocks/components/live-example-block/live-example-block.component.scss
@@ -6,10 +6,10 @@
   // colors
   $action-bg: white;
   $action-fg: nb-theme(color-fg-heading-light);
-  $block-bg-default: #ebeff5;
-  $block-bg-cosmic: #2f296b;
-  $block-fg-cosmic: #7d838b;
-  $block-bg-corporate: #f1f5f8;
+  $block-bg-default: #f7f8fa;
+  $block-bg-cosmic: #292766;
+  $block-bg-corporate: #f7f8fa;
+  $block-fg-cosmic: #e8e9fa;
 
   display: flex;
   flex-direction: column;
diff --git a/docs/app/home/home.component.html b/docs/app/home/home.component.html
@@ -7,7 +7,7 @@
       </div>
       <svg class="concave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 222" preserveAspectRatio="xMidYMin slice">
         <g>
-          <path fill="#fff" d="M1920,0c-248.44,93.45-587.33,151.09-960.52,151.09S248.44,93.45,0,0V222H1920Z"/>
+          <path d="M1920,0c-248.44,93.45-587.33,151.09-960.52,151.09S248.44,93.45,0,0V222H1920Z"/>
         </g>
       </svg>
     </section>
diff --git a/docs/app/home/home.component.scss b/docs/app/home/home.component.scss
@@ -33,6 +33,7 @@
     margin-top: -5rem;
     margin-left: -20%;
     margin-right: -20%;
+    fill: nb-theme(layout-background-color);
 
     @include media-breakpoint-up(md) {
       margin-top: -7rem;
diff --git a/src/playground/with-layout/dialog/components/auto-focus-dialog.component.ts b/src/playground/with-layout/dialog/components/auto-focus-dialog.component.ts
@@ -2,9 +2,8 @@ import { Component, Input } from '@angular/core';
 import { NbDialogRef } from '@nebular/theme';
 
 @Component({
-  selector: 'nb-dialog',
   template: `
-    <nb-card [style.width.px]="600" [style.height.px]="500">
+    <nb-card class="dialog-card">
       <nb-card-header>{{ title }}</nb-card-header>
       <nb-card-body>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
diff --git a/src/playground/with-layout/dialog/components/backdrop-click-dialog.component.ts b/src/playground/with-layout/dialog/components/backdrop-click-dialog.component.ts
@@ -2,9 +2,8 @@ import { Component, Input } from '@angular/core';
 import { NbDialogRef } from '@nebular/theme';
 
 @Component({
-  selector: 'nb-dialog',
   template: `
-    <nb-card [style.width.px]="600" [style.height.px]="500">
+    <nb-card class="dialog-card">
       <nb-card-header>{{ title }}</nb-card-header>
       <nb-card-body>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
diff --git a/src/playground/with-layout/dialog/components/esc-dialog.component.ts b/src/playground/with-layout/dialog/components/esc-dialog.component.ts
@@ -2,9 +2,8 @@ import { Component, Input } from '@angular/core';
 import { NbDialogRef } from '@nebular/theme';
 
 @Component({
-  selector: 'nb-dialog',
   template: `
-    <nb-card [style.width.px]="600" [style.height.px]="500">
+    <nb-card class="dialog-card">
       <nb-card-header>{{ title }}</nb-card-header>
       <nb-card-body>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
diff --git a/src/playground/with-layout/dialog/components/has-backdrop-dialog.component.ts b/src/playground/with-layout/dialog/components/has-backdrop-dialog.component.ts
@@ -2,9 +2,8 @@ import { Component, Input } from '@angular/core';
 import { NbDialogRef } from '@nebular/theme';
 
 @Component({
-  selector: 'nb-dialog',
   template: `
-    <nb-card [style.width.px]="600" [style.height.px]="500">
+    <nb-card class="dialog-card">
       <nb-card-header>{{ title }}</nb-card-header>
       <nb-card-body>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
diff --git a/src/playground/with-layout/dialog/components/name-prompt-dialog.component.ts b/src/playground/with-layout/dialog/components/name-prompt-dialog.component.ts
@@ -15,11 +15,6 @@ import { NbDialogRef } from '@nebular/theme';
       </nb-card-footer>
     </nb-card>
   `,
-  styles: [`
-    button {
-      margin: 1rem;
-    }
-  `],
 })
 export class DialogNamePromptComponent {
   constructor(protected dialogRef: NbDialogRef<DialogNamePromptComponent>) {
diff --git a/src/playground/with-layout/dialog/components/scroll-dialog.component.ts b/src/playground/with-layout/dialog/components/scroll-dialog.component.ts
@@ -2,9 +2,8 @@ import { Component, Input } from '@angular/core';
 import { NbDialogRef } from '@nebular/theme';
 
 @Component({
-  selector: 'nb-dialog',
   template: `
-    <nb-card [style.width.px]="600" [style.height.px]="500">
+    <nb-card class="dialog-card">
       <nb-card-header>{{ title }}</nb-card-header>
       <nb-card-body>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
diff --git a/src/playground/with-layout/dialog/components/showcase-dialog.component.ts b/src/playground/with-layout/dialog/components/showcase-dialog.component.ts
@@ -2,9 +2,8 @@ import { Component, Input } from '@angular/core';
 import { NbDialogRef } from '@nebular/theme';
 
 @Component({
-  selector: 'nb-dialog',
   template: `
-    <nb-card [style.width.px]="600" [style.height.px]="500">
+    <nb-card class="dialog-card">
       <nb-card-header>{{ title }}</nb-card-header>
       <nb-card-body>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
diff --git a/src/playground/with-layout/dialog/dialog-auto-focus.component.ts b/src/playground/with-layout/dialog/dialog-auto-focus.component.ts
@@ -10,15 +10,7 @@ import { AutoFocusDialogComponent } from './components/auto-focus-dialog.compone
       <button nbButton hero (click)="openWithoutAutoFocus()">Open without auto focus</button>
     </div>
   `,
-  styles: [`
-    /deep/ nb-layout-column {
-      height: 80vw;
-    }
-
-    button {
-      margin: 1rem;
-    }
-  `],
+  styleUrls: ['./dialog-common.scss'],
 })
 export class DialogAutoFocusComponent {
   constructor(private dialogService: NbDialogService) {
diff --git a/src/playground/with-layout/dialog/dialog-backdrop-click.component.ts b/src/playground/with-layout/dialog/dialog-backdrop-click.component.ts
@@ -10,15 +10,7 @@ import { BackdropClickDialogComponent } from './components/backdrop-click-dialog
       <button nbButton hero (click)="openWithoutBackdropClick()">Open without backdrop click close</button>
     </div>
   `,
-  styles: [`
-    /deep/ nb-layout-column {
-      height: 80vw;
-    }
-
-    button {
-      margin: 1rem;
-    }
-  `],
+  styleUrls: ['./dialog-common.scss'],
 })
 export class DialogBackdropClickComponent {
   constructor(private dialogService: NbDialogService) {
diff --git a/src/playground/with-layout/dialog/dialog-common.scss b/src/playground/with-layout/dialog/dialog-common.scss
@@ -0,0 +1,21 @@
+/deep/ {
+  nb-layout-column {
+    height: 80vw;
+  }
+
+  button + button {
+    margin-left: 1rem;
+  }
+
+  .dialog-card {
+    margin-left: auto;
+    margin-right: auto;
+    width: 90%;
+  }
+
+  @media (min-width: 40rem) {
+    .dialog-card {
+      width: 38rem;
+    }
+  }
+}
diff --git a/src/playground/with-layout/dialog/dialog-esc.component.ts b/src/playground/with-layout/dialog/dialog-esc.component.ts
@@ -10,15 +10,7 @@ import { EscDialogComponent } from './components/esc-dialog.component';
       <button nbButton hero (click)="openWithoutEscClose()">Open without escape close</button>
     </div>
   `,
-  styles: [`
-    /deep/ nb-layout-column {
-      height: 80vw;
-    }
-
-    button {
-      margin: 1rem;
-    }
-  `],
+  styleUrls: ['./dialog-common.scss'],
 })
 export class DialogEscComponent {
   constructor(private dialogService: NbDialogService) {
diff --git a/src/playground/with-layout/dialog/dialog-has-backdrop.component.ts b/src/playground/with-layout/dialog/dialog-has-backdrop.component.ts
@@ -10,15 +10,7 @@ import { HasBackdropDialogComponent } from './components/has-backdrop-dialog.com
       <button nbButton hero (click)="openWithoutBackdrop()">Open without backdrop</button>
     </div>
   `,
-  styles: [`
-    /deep/ nb-layout-column {
-      height: 80vw;
-    }
-
-    button {
-      margin: 1rem;
-    }
-  `],
+  styleUrls: ['./dialog-common.scss'],
 })
 export class DialogHasBackdropComponent {
   constructor(private dialogService: NbDialogService) {
diff --git a/src/playground/with-layout/dialog/dialog-result.component.ts b/src/playground/with-layout/dialog/dialog-result.component.ts
@@ -12,11 +12,7 @@ import { DialogNamePromptComponent } from './components/name-prompt-dialog.compo
       <li *ngFor="let name of names">{{ name }}</li>
     </ul>
   `,
-  styles: [`
-    /deep/ nb-layout-column {
-      height: 80vw;
-    }
-  `],
+  styleUrls: ['./dialog-common.scss'],
 })
 export class DialogResultComponent {
   names: string[] = [];
diff --git a/src/playground/with-layout/dialog/dialog-scroll.component.ts b/src/playground/with-layout/dialog/dialog-scroll.component.ts
@@ -10,15 +10,7 @@ import { ScrollDialogComponent } from './components/scroll-dialog.component';
       <button nbButton hero (click)="openWithoutScroll()">Open without scroll</button>
     </div>
   `,
-  styles: [`
-    /deep/ nb-layout-column {
-      height: 80vw;
-    }
-
-    button {
-      margin: 1rem;
-    }
-  `],
+  styleUrls: ['./dialog-common.scss'],
 })
 export class DialogScrollComponent {
   constructor(private dialogService: NbDialogService) {
diff --git a/src/playground/with-layout/dialog/dialog-showcase.component.ts b/src/playground/with-layout/dialog/dialog-showcase.component.ts
@@ -5,9 +5,7 @@ import { ShowcaseDialogComponent } from './components/showcase-dialog.component'
 @Component({
   selector: 'nb-dialog-showcase',
   template: '<button nbButton (click)="open()">Open Dialog</button>',
-  styles: [` /deep/ nb-layout-column {
-    height: 80vw;
-  } `],
+  styleUrls: ['./dialog-common.scss'],
 })
 export class DialogShowcaseComponent {
   constructor(private dialogService: NbDialogService) {
diff --git a/src/playground/with-layout/dialog/dialog-template.component.ts b/src/playground/with-layout/dialog/dialog-template.component.ts
@@ -16,11 +16,7 @@ import { NbDialogService } from '@nebular/theme';
     </ng-template>
     <button nbButton (click)="open(dialog)">Open Dialog</button>
   `,
-  styles: [`
-    /deep/ nb-layout-column {
-      height: 80vw;
-    }
-  `],
+  styleUrls: ['./dialog-common.scss'],
 })
 export class DialogTemplateComponent {
   constructor(private dialogService: NbDialogService) {
diff --git a/src/playground/with-layout/popover/popover-custom-component.component.ts b/src/playground/with-layout/popover/popover-custom-component.component.ts
@@ -13,7 +13,11 @@ import { DynamicToAddComponent } from './components/dynamic.components';
   styles: [`
     :host {
       display: block;
-      margin: 5rem;
+      padding-bottom: 3rem;
+    }
+
+    ::ng-deep nb-popover {
+      padding: 1rem;
     }
   `],
 })
diff --git a/src/playground/with-layout/popover/popover-dynamic-code.component.ts b/src/playground/with-layout/popover/popover-dynamic-code.component.ts
@@ -12,27 +12,7 @@ import { NbPopoverDirective } from '@nebular/theme';
 @Component({
   selector: 'nb-popover-dynamic-code',
   templateUrl: './popover-dynamic-code.component.html',
-  styles: [`
-    :host {
-      display: flex;
-      flex-direction: column;
-    }
-    .margin-bottom-0 {
-      margin-bottom: 0;
-    }
-    .section {
-      margin-bottom: 2rem;
-    }
-    .popover-container {
-      display: flex;
-      justify-content: center;
-      padding: 12rem;
-    }
-    button {
-      margin-right: 1rem;
-      margin-top: 1rem;
-    }
-  `],
+  styleUrls: ['./popover-dynamic.scss'],
 })
 export class PopoverDynamicCodeComponent implements OnDestroy, AfterViewInit {
 
diff --git a/src/playground/with-layout/popover/popover-dynamic.component.ts b/src/playground/with-layout/popover/popover-dynamic.component.ts
@@ -13,27 +13,7 @@ import { PopoverListComponent, PopoverTabsComponent } from './components/dynamic
 @Component({
   selector: 'nb-popover-dynamic',
   templateUrl: './popover-dynamic.component.html',
-  styles: [`
-    :host {
-      display: flex;
-      flex-direction: column;
-    }
-    .margin-bottom-0 {
-      margin-bottom: 0;
-    }
-    .section {
-      margin-bottom: 2rem;
-    }
-    .popover-container {
-      display: flex;
-      justify-content: center;
-      padding: 12rem;
-    }
-    button {
-      margin-right: 1rem;
-      margin-top: 1rem;
-    }
-  `],
+  styleUrls: ['./popover-dynamic.scss'],
 })
 export class PopoverDynamicComponent implements OnDestroy, AfterViewInit {
 
diff --git a/src/playground/with-layout/popover/popover-dynamic.scss b/src/playground/with-layout/popover/popover-dynamic.scss
@@ -0,0 +1,23 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+.margin-bottom-0 {
+  margin-bottom: 0;
+}
+.section {
+  margin-bottom: 2rem;
+}
+.popover-container {
+  display: flex;
+  justify-content: center;
+  padding: 12rem;
+}
+button {
+  margin-right: 1rem;
+  margin-top: 1rem;
+}
+
+::ng-deep nb-popover nb-card {
+  box-shadow: none !important;
+}
diff --git a/src/playground/with-layout/popover/popover-modes.component.html b/src/playground/with-layout/popover/popover-modes.component.html
@@ -1,13 +1,13 @@
 <div class="btn-group btn-divided-group btn-outline-divided-group">
-  <button nbButton outline nbPopover="Click Mode" nbPopoverTrigger="click">
+  <button nbButton outline nbPopover="Click Mode" nbPopoverTrigger="click" nbPopoverPlacement="bottom">
     Click Mode
   </button>
 
-  <button nbButton outline nbPopover="Hint Mode" nbPopoverTrigger="hint">
+  <button nbButton outline nbPopover="Hint Mode" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">
     Hint Mode
   </button>
 
-  <button nbButton outline nbPopover="Hover Mode" nbPopoverTrigger="hover">
+  <button nbButton outline nbPopover="Hover Mode" nbPopoverTrigger="hover" nbPopoverPlacement="bottom">
     Hover Mode
   </button>
 </div>
diff --git a/src/playground/with-layout/popover/popover-modes.component.ts b/src/playground/with-layout/popover/popover-modes.component.ts
@@ -6,18 +6,17 @@
 
 import { Component } from '@angular/core';
 
-
 @Component({
   selector: 'nb-popover-modes',
   templateUrl: './popover-modes.component.html',
   styles: [`
     :host {
       display: block;
-      margin: 5rem;
+      padding-bottom: 5rem;
     }
 
-    button {
-      margin: 0.5rem;
+    button + button {
+      margin-left: 1rem;
     }
   `],
 })
diff --git a/src/playground/with-layout/popover/popover-noop.component.ts b/src/playground/with-layout/popover/popover-noop.component.ts
diff --git a/src/playground/with-layout/popover/popover-placements.component.html b/src/playground/with-layout/popover/popover-placements.component.html
diff --git a/src/playground/with-layout/popover/popover-placements.component.ts b/src/playground/with-layout/popover/popover-placements.component.ts
diff --git a/src/playground/with-layout/popover/popover-showcase.component.ts b/src/playground/with-layout/popover/popover-showcase.component.ts
diff --git a/src/playground/with-layout/popover/popover-template-ref.component.ts b/src/playground/with-layout/popover/popover-template-ref.component.ts
diff --git a/src/playground/with-layout/window/window.scss b/src/playground/with-layout/window/window.scss
