From aab32ad8c5dc6c968f42f4e6ee57953f68eec5a8 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Fri, 27 Mar 2020 09:10:45 +0300
Subject: [PATCH 01/11] chore: set dev-app as default project

---
 npm/ng-packs/angular.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/npm/ng-packs/angular.json b/npm/ng-packs/angular.json
index d0289505fe..af185688b2 100644
--- a/npm/ng-packs/angular.json
+++ b/npm/ng-packs/angular.json
@@ -526,5 +526,5 @@
       }
     }
   },
-  "defaultProject": "core"
+  "defaultProject": "dev-app"
 }

From 83645730b9bc38eae238861c9432acb05518189f Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Fri, 27 Mar 2020 09:16:45 +0300
Subject: [PATCH 02/11] refactor: deprecate the requirements obj

---
 .../apps/dev-app/src/app/app.module.ts        |  3 --
 .../packages/core/src/lib/models/common.ts    |  6 ++-
 templates/app/angular/src/app/app.module.ts   |  6 +--
 .../module/angular/src/app/app.module.ts      | 46 +++++++++----------
 4 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/npm/ng-packs/apps/dev-app/src/app/app.module.ts b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
index f1324c233a..64f8150f01 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
@@ -21,9 +21,6 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
   imports: [
     CoreModule.forRoot({
       environment,
-      requirements: {
-        layouts: LAYOUTS,
-      },
     }),
     ThemeSharedModule.forRoot(),
     AccountConfigModule.forRoot({ redirectUrl: '/' }),
diff --git a/npm/ng-packs/packages/core/src/lib/models/common.ts b/npm/ng-packs/packages/core/src/lib/models/common.ts
index 8b4fb76cb0..79792a1b61 100644
--- a/npm/ng-packs/packages/core/src/lib/models/common.ts
+++ b/npm/ng-packs/packages/core/src/lib/models/common.ts
@@ -6,7 +6,11 @@ import { Subject } from 'rxjs';
 export namespace ABP {
   export interface Root {
     environment: Partial<Config.Environment>;
-    requirements: Config.Requirements;
+    /**
+     *
+     * @deprecated To be deleted in v3.0
+     */
+    requirements?: Config.Requirements;
   }
 
   export type PagedResponse<T> = {
diff --git a/templates/app/angular/src/app/app.module.ts b/templates/app/angular/src/app/app.module.ts
index 5df354fb38..928dff5172 100644
--- a/templates/app/angular/src/app/app.module.ts
+++ b/templates/app/angular/src/app/app.module.ts
@@ -3,7 +3,6 @@ import { CoreModule } from '@abp/ng.core';
 import { IdentityConfigModule } from '@abp/ng.identity.config';
 import { SettingManagementConfigModule } from '@abp/ng.setting-management.config';
 import { TenantManagementConfigModule } from '@abp/ng.tenant-management.config';
-import { LAYOUTS } from '@abp/ng.theme.basic';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -20,10 +19,7 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
 @NgModule({
   imports: [
     CoreModule.forRoot({
-      environment,
-      requirements: {
-        layouts: LAYOUTS
-      }
+      environment
     }),
     ThemeSharedModule.forRoot(),
     AccountConfigModule.forRoot({ redirectUrl: '/' }),
diff --git a/templates/module/angular/src/app/app.module.ts b/templates/module/angular/src/app/app.module.ts
index c0fef36c9a..2705a3318b 100644
--- a/templates/module/angular/src/app/app.module.ts
+++ b/templates/module/angular/src/app/app.module.ts
@@ -1,21 +1,20 @@
-import { AccountConfigModule } from '@abp/ng.account.config';
-import { CoreModule } from '@abp/ng.core';
-import { IdentityConfigModule } from '@abp/ng.identity.config';
-import { SettingManagementConfigModule } from '@abp/ng.setting-management.config';
-import { TenantManagementConfigModule } from '@abp/ng.tenant-management.config';
-import { LAYOUTS } from '@abp/ng.theme.basic';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
-import { NgxsModule } from '@ngxs/store';
-import { OAuthModule } from 'angular-oauth2-oidc';
-import { environment } from '../environments/environment';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { SharedModule } from './shared/shared.module';
-import { MyProjectNameConfigModule } from '../../projects/my-project-name-config/src/public-api';
+import { AccountConfigModule } from "@abp/ng.account.config";
+import { CoreModule } from "@abp/ng.core";
+import { IdentityConfigModule } from "@abp/ng.identity.config";
+import { SettingManagementConfigModule } from "@abp/ng.setting-management.config";
+import { TenantManagementConfigModule } from "@abp/ng.tenant-management.config";
+import { ThemeSharedModule } from "@abp/ng.theme.shared";
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { NgxsLoggerPluginModule } from "@ngxs/logger-plugin";
+import { NgxsModule } from "@ngxs/store";
+import { OAuthModule } from "angular-oauth2-oidc";
+import { environment } from "../environments/environment";
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
+import { SharedModule } from "./shared/shared.module";
+import { MyProjectNameConfigModule } from "../../projects/my-project-name-config/src/public-api";
 
 const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
 
@@ -24,14 +23,11 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
   imports: [
     ThemeSharedModule.forRoot(),
     CoreModule.forRoot({
-      environment,
-      requirements: {
-        layouts: LAYOUTS,
-      },
+      environment
     }),
     OAuthModule.forRoot(),
     NgxsModule.forRoot([]),
-    AccountConfigModule.forRoot({ redirectUrl: '/' }),
+    AccountConfigModule.forRoot({ redirectUrl: "/" }),
     IdentityConfigModule,
     TenantManagementConfigModule,
     SettingManagementConfigModule,
@@ -41,8 +37,8 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
     AppRoutingModule,
     SharedModule,
 
-    ...(environment.production ? [] : LOGGERS),
+    ...(environment.production ? [] : LOGGERS)
   ],
-  bootstrap: [AppComponent],
+  bootstrap: [AppComponent]
 })
 export class AppModule {}

From 4ad19ebf84a7af0d68dcd9968bf13e510c6b77ee Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Fri, 27 Mar 2020 10:21:56 +0300
Subject: [PATCH 03/11] feat(theme-basic): add layouts to replaceable
 components state

---
 .../src/lib/services/initial.service.ts       | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts b/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts
index 33c7c18770..21fb1756bc 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts
@@ -1,12 +1,29 @@
+import { LazyLoadService, AddReplaceableComponent } from '@abp/ng.core';
 import { Injectable } from '@angular/core';
-import { Router } from '@angular/router';
-import { LazyLoadService } from '@abp/ng.core';
+import { Store } from '@ngxs/store';
 import styles from '../constants/styles';
+import { ApplicationLayoutComponent } from '../components/application-layout/application-layout.component';
+import { AccountLayoutComponent } from '../components/account-layout/account-layout.component';
+import { EmptyLayoutComponent } from '../components/empty-layout/empty-layout.component';
 
 @Injectable({ providedIn: 'root' })
 export class InitialService {
-  constructor(private lazyLoadService: LazyLoadService) {
+  constructor(private lazyLoadService: LazyLoadService, private store: Store) {
     this.appendStyle().subscribe();
+    this.store.dispatch([
+      new AddReplaceableComponent({
+        key: 'Theme.ApplicationLayoutComponent',
+        component: ApplicationLayoutComponent,
+      }),
+      new AddReplaceableComponent({
+        key: 'Theme.AccountLayoutComponent',
+        component: AccountLayoutComponent,
+      }),
+      new AddReplaceableComponent({
+        key: 'Theme.EmptyLayoutComponent',
+        component: EmptyLayoutComponent,
+      }),
+    ]);
   }
 
   appendStyle() {

From 857ee6b9ef82376c42229c613764feaee7896a95 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Fri, 27 Mar 2020 10:22:45 +0300
Subject: [PATCH 04/11] feat(core): get layouts from store in
 dynamic-layout.component

---
 .../components/dynamic-layout.component.ts    |  49 +++++----
 .../tests/dynamic-layout.component.spec.ts    | 102 +++++++++++-------
 2 files changed, 93 insertions(+), 58 deletions(-)

diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
index 7fc1826efe..fc3926a1ea 100644
--- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
@@ -1,13 +1,15 @@
 import { Component, Input, OnDestroy, Type, Injector } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, UrlSegment } from '@angular/router';
 import { Select, Store } from '@ngxs/store';
-import { Observable } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 import snq from 'snq';
 import { eLayoutType } from '../enums/common';
 import { Config } from '../models/config';
 import { ABP } from '../models/common';
 import { ConfigState } from '../states/config.state';
 import { takeUntilDestroy } from '../utils/rxjs-utils';
+import { ReplaceableComponentsState } from '../states/replaceable-components.state';
+import { ReplaceableComponents } from '../models/replaceable-components';
 
 @Component({
   selector: 'abp-dynamic-layout',
@@ -20,24 +22,24 @@ import { takeUntilDestroy } from '../utils/rxjs-utils';
   `,
 })
 export class DynamicLayoutComponent implements OnDestroy {
-  @Select(ConfigState.getOne('requirements')) requirements$: Observable<Config.Requirements>;
+  @Select(ReplaceableComponentsState.getComponent('Theme.ApplicationLayoutComponent'))
+  applicationLayout$: Observable<ReplaceableComponents.ReplaceableComponent>;
+
+  @Select(ReplaceableComponentsState.getComponent('Theme.AccountLayoutComponent'))
+  accountLayout$: Observable<ReplaceableComponents.ReplaceableComponent>;
+
+  @Select(ReplaceableComponentsState.getComponent('Theme.EmptyLayoutComponent'))
+  emptyLayout$: Observable<ReplaceableComponents.ReplaceableComponent>;
 
   layout: Type<any>;
 
+  layouts = {} as { [key in eLayoutType]: Type<any> };
+
+  expectedLayout: eLayoutType = eLayoutType.empty;
+
   constructor(private router: Router, private route: ActivatedRoute, private store: Store) {
-    const {
-      requirements: { layouts },
-      routes,
-    } = this.store.selectSnapshot(ConfigState.getAll);
-
-    if ((this.route.snapshot.data || {}).layout) {
-      this.layout = layouts
-        .filter(l => !!l)
-        .find(
-          (l: any) =>
-            snq(() => l.type.toLowerCase().indexOf(this.route.snapshot.data.layout), -1) > -1,
-        );
-    }
+    this.listenToLayouts();
+    const { routes } = this.store.selectSnapshot(ConfigState.getAll);
 
     router.events.pipe(takeUntilDestroy(this)).subscribe(event => {
       if (event instanceof NavigationEnd) {
@@ -45,16 +47,25 @@ export class DynamicLayoutComponent implements OnDestroy {
           { path: router.url.replace('/', '') },
         ] as any);
 
-        const layout = (this.route.snapshot.data || {}).layout || findLayout(segments, routes);
+        this.expectedLayout =
+          (this.route.snapshot.data || {}).layout || findLayout(segments, routes);
 
-        this.layout = layouts
-          .filter(l => !!l)
-          .find((l: any) => snq(() => l.type.toLowerCase().indexOf(layout), -1) > -1);
+        this.layout = this.layouts[this.expectedLayout];
       }
     });
   }
 
   ngOnDestroy() {}
+
+  listenToLayouts() {
+    combineLatest(this.applicationLayout$, this.accountLayout$, this.emptyLayout$)
+      .pipe(takeUntilDestroy(this))
+      .subscribe(([application, account, empty]) => {
+        this.layouts.application = application.component;
+        this.layouts.account = account.component;
+        this.layouts.empty = empty.component;
+      });
+  }
 }
 
 function findLayout(segments: UrlSegment[], routes: ABP.FullRoute[]): eLayoutType {
diff --git a/npm/ng-packs/packages/core/src/lib/tests/dynamic-layout.component.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/dynamic-layout.component.spec.ts
index 54a602b84a..0a123b6a4f 100644
--- a/npm/ng-packs/packages/core/src/lib/tests/dynamic-layout.component.spec.ts
+++ b/npm/ng-packs/packages/core/src/lib/tests/dynamic-layout.component.spec.ts
@@ -1,36 +1,36 @@
 import { Component, NgModule } from '@angular/core';
 import { ActivatedRoute, RouterModule } from '@angular/router';
-import { createRoutingFactory, SpectatorRouting, SpyObject } from '@ngneat/spectator/jest';
-import { Store } from '@ngxs/store';
+import { createRoutingFactory, SpectatorRouting } from '@ngneat/spectator/jest';
+import { NgxsModule, Store } from '@ngxs/store';
+import { DynamicLayoutComponent, RouterOutletComponent } from '../components';
 import { eLayoutType } from '../enums';
 import { ABP } from '../models';
-import { DynamicLayoutComponent, RouterOutletComponent } from '../components';
+import { ConfigState, ReplaceableComponentsState } from '../states';
+import { ApplicationConfigurationService } from '../services';
 
 @Component({
   selector: 'abp-layout-application',
   template: '<router-outlet></router-outlet>',
 })
-class DummyApplicationLayoutComponent {
-  static type = eLayoutType.application;
-}
+class DummyApplicationLayoutComponent {}
 
 @Component({
   selector: 'abp-layout-account',
   template: '<router-outlet></router-outlet>',
 })
-class DummyAccountLayoutComponent {
-  static type = eLayoutType.account;
-}
+class DummyAccountLayoutComponent {}
 
 @Component({
   selector: 'abp-layout-empty',
   template: '<router-outlet></router-outlet>',
 })
-class DummyEmptyLayoutComponent {
-  static type = eLayoutType.empty;
-}
+class DummyEmptyLayoutComponent {}
 
-const LAYOUTS = [DummyApplicationLayoutComponent, DummyAccountLayoutComponent, DummyEmptyLayoutComponent];
+const LAYOUTS = [
+  DummyApplicationLayoutComponent,
+  DummyAccountLayoutComponent,
+  DummyEmptyLayoutComponent,
+];
 
 @NgModule({
   imports: [RouterModule],
@@ -47,13 +47,57 @@ class DummyComponent {
   constructor(public route: ActivatedRoute) {}
 }
 
+const storeData = {
+  ConfigState: {
+    routes: [
+      {
+        path: '',
+        wrapper: true,
+        children: [
+          {
+            path: 'parentWithLayout',
+            layout: eLayoutType.application,
+            children: [
+              { path: 'childWithoutLayout' },
+              { path: 'childWithLayout', layout: eLayoutType.account },
+            ],
+          },
+        ],
+      },
+      { path: 'withData', layout: eLayoutType.application },
+      ,
+    ] as ABP.FullRoute[],
+    environment: { application: {} },
+  },
+  ReplaceableComponentsState: {
+    replaceableComponents: [
+      {
+        key: 'Theme.ApplicationLayoutComponent',
+        component: DummyApplicationLayoutComponent,
+      },
+      {
+        key: 'Theme.AccountLayoutComponent',
+        component: DummyAccountLayoutComponent,
+      },
+      {
+        key: 'Theme.EmptyLayoutComponent',
+        component: DummyEmptyLayoutComponent,
+      },
+    ],
+  },
+};
+
 describe('DynamicLayoutComponent', () => {
   const createComponent = createRoutingFactory({
     component: RouterOutletComponent,
     stubsEnabled: false,
-    mocks: [Store],
     declarations: [DummyComponent, DynamicLayoutComponent],
-    imports: [RouterModule, DummyLayoutModule],
+    mocks: [ApplicationConfigurationService],
+    imports: [
+      RouterModule,
+      DummyLayoutModule,
+      NgxsModule.forRoot([ConfigState, ReplaceableComponentsState]),
+    ],
     routes: [
       { path: '', component: RouterOutletComponent },
       {
@@ -100,33 +144,13 @@ describe('DynamicLayoutComponent', () => {
   });
 
   let spectator: SpectatorRouting<RouterOutletComponent>;
-  let store: SpyObject<Store>;
-  const mockStoreData = {
-    requirements: { layouts: LAYOUTS },
-    routes: [
-      {
-        path: '',
-        wrapper: true,
-        children: [
-          {
-            path: 'parentWithLayout',
-            layout: eLayoutType.application,
-            children: [{ path: 'childWithoutLayout' }, { path: 'childWithLayout', layout: eLayoutType.account }],
-          },
-        ],
-      },
-      { path: 'withData', layout: eLayoutType.application },
-      ,
-    ] as ABP.FullRoute[],
-    environment: { application: {} },
-  };
-  let storeSpy: jest.SpyInstance;
+  let store: Store;
 
   beforeEach(async () => {
     spectator = createComponent();
     store = spectator.get(Store);
-    storeSpy = jest.spyOn(store, 'selectSnapshot');
-    storeSpy.mockReturnValue(mockStoreData);
+
+    store.reset(storeData);
   });
 
   it('should handle application layout from parent abp route and display it', async () => {
@@ -159,7 +183,7 @@ describe('DynamicLayoutComponent', () => {
   });
 
   it('should not display any layout when layouts are empty', async () => {
-    storeSpy.mockReturnValue({ ...mockStoreData, requirements: { layouts: [] } });
+    store.reset({ ...storeData, ReplaceableComponentsState: {} });
 
     spectator.detectChanges();
 

From e08290b1c5ac4456c21c6cb6760427d50579a0a3 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Fri, 27 Mar 2020 13:52:01 +0300
Subject: [PATCH 05/11] docs: add how to replace a layout section to
 component-replacement.md

---
 docs/en/UI/Angular/Component-Replacement.md | 53 +++++++++++++++++++--
 1 file changed, 50 insertions(+), 3 deletions(-)

diff --git a/docs/en/UI/Angular/Component-Replacement.md b/docs/en/UI/Angular/Component-Replacement.md
index b17c61ae73..d718b46117 100644
--- a/docs/en/UI/Angular/Component-Replacement.md
+++ b/docs/en/UI/Angular/Component-Replacement.md
@@ -1,10 +1,10 @@
-# Component Replacement
+## Component Replacement
 
 You can replace some ABP components with your custom components.
 
 The reason that you **can replace** but **cannot customize** default ABP components is disabling or changing a part of that component can cause problems. So we named those components as _Replaceable Components_.
 
-## How to Replace a Component
+### How to Replace a Component
 
 Create a new component that you want to use instead of an ABP component. Add that component to `declarations` and `entryComponents` in the `AppModule`.
 
@@ -29,7 +29,54 @@ export class AppComponent {
 
 ![Example Usage](./images/component-replacement.gif)
 
-## Available Replaceable Components
+
+### How to Replace a Layout
+
+Each ABP theme module has 3 layouts named `ApplicationLayoutComponent`, `AccountLayoutComponent`, `EmptyLayoutComponent`. These layouts can be replaced with the same way.
+
+> A layout component template should contain `<router-outlet></router-outlet>` element.
+
+The below example describes how to replace the `ApplicationLayoutComponent`:
+
+Run the following command to generate a layout in `angular` folder:
+
+```bash
+yarn ng generate component shared/my-application-layout --export --entryComponent
+
+# You don't need the --entryComponent option in Angular 9
+```
+
+Add the following code in your layout template (`my-layout.component.html`) where you want the page to be loaded.
+
+```html
+<router-outlet></router-outlet>
+```
+
+Open the `app.component.ts` and add the below content:
+
+```js
+import { ..., AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent
+import { MyApplicationLayoutComponent } from './shared/my-application-layout/my-application-layout.component'; // imported MyApplicationLayoutComponent
+import { Store } from '@ngxs/store'; // imported Store
+//...
+export class AppComponent {
+  constructor(..., private store: Store) {} // injected Store
+
+  ngOnInit() {
+    // added below content
+    this.store.dispatch(
+      new AddReplaceableComponent({
+        component: MyApplicationLayoutComponent,
+        key: 'Theme.ApplicationLayoutComponent',
+      }),
+    );
+
+    //...
+  }
+}
+```
+
+### Available Replaceable Components
 
 | Component key                                      | Description                                   |
 | -------------------------------------------------- | --------------------------------------------- |

From 0ccce0bbf999b95ff224e8c8ca78046c937bf0c5 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Fri, 27 Mar 2020 13:52:17 +0300
Subject: [PATCH 06/11] docs: fix the links

---
 docs/en/UI/Angular/Service-Proxies.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/en/UI/Angular/Service-Proxies.md b/docs/en/UI/Angular/Service-Proxies.md
index 97b43b7513..6209350349 100644
--- a/docs/en/UI/Angular/Service-Proxies.md
+++ b/docs/en/UI/Angular/Service-Proxies.md
@@ -25,9 +25,9 @@ The files generated with the `--module all` option like below:
 
 ### Services
 
-Each generated service matches a back-end controller. The services methods call back-end APIs via [RestService](./Http-Requests.md#restservice).
+Each generated service matches a back-end controller. The services methods call back-end APIs via [RestService](./Http-Requests#restservice).
 
-A variable named `apiName` (available as of v2.4) is defined in each service. `apiName` matches the module's RemoteServiceName. This variable passes to the `RestService` as a parameter at each request. If there is no microservice API defined in the environment, `RestService` uses the default. See [getting a specific API endpoint from application config](./Http-Requests.md#how-to-get-a-specific-api-endpoint-from-application-config)
+A variable named `apiName` (available as of v2.4) is defined in each service. `apiName` matches the module's RemoteServiceName. This variable passes to the `RestService` as a parameter at each request. If there is no microservice API defined in the environment, `RestService` uses the default. See [getting a specific API endpoint from application config](./Http-Requests#how-to-get-a-specific-api-endpoint-from-application-config)
 
 The `providedIn` property of the services is defined as `'root'`. Therefore no need to add a service as a provider to a module. You can use a service by injecting it into a constructor as shown below:
 
@@ -64,4 +64,4 @@ Initial values ​​can optionally be passed to each class constructor.
 
 ## What's Next?
 
-* [HTTP Requests](./Http-Requests.md)
+* [HTTP Requests](./Http-Requests)

From 8d71b74281dd6fac4279970d14c47806c86e50ba Mon Sep 17 00:00:00 2001
From: Arman Ozak <arman@armanozak.com>
Date: Fri, 27 Mar 2020 14:31:09 +0300
Subject: [PATCH 07/11] style: add prettierrc and rules matching other angular
 projects

---
 templates/module/angular/.prettierrc          |  5 +++
 .../module/angular/src/app/app.module.ts      | 42 +++++++++----------
 2 files changed, 26 insertions(+), 21 deletions(-)
 create mode 100644 templates/module/angular/.prettierrc

diff --git a/templates/module/angular/.prettierrc b/templates/module/angular/.prettierrc
new file mode 100644
index 0000000000..5e2863a11f
--- /dev/null
+++ b/templates/module/angular/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/templates/module/angular/src/app/app.module.ts b/templates/module/angular/src/app/app.module.ts
index 2705a3318b..93e09321ec 100644
--- a/templates/module/angular/src/app/app.module.ts
+++ b/templates/module/angular/src/app/app.module.ts
@@ -1,20 +1,20 @@
-import { AccountConfigModule } from "@abp/ng.account.config";
-import { CoreModule } from "@abp/ng.core";
-import { IdentityConfigModule } from "@abp/ng.identity.config";
-import { SettingManagementConfigModule } from "@abp/ng.setting-management.config";
-import { TenantManagementConfigModule } from "@abp/ng.tenant-management.config";
-import { ThemeSharedModule } from "@abp/ng.theme.shared";
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { NgxsLoggerPluginModule } from "@ngxs/logger-plugin";
-import { NgxsModule } from "@ngxs/store";
-import { OAuthModule } from "angular-oauth2-oidc";
-import { environment } from "../environments/environment";
-import { AppRoutingModule } from "./app-routing.module";
-import { AppComponent } from "./app.component";
-import { SharedModule } from "./shared/shared.module";
-import { MyProjectNameConfigModule } from "../../projects/my-project-name-config/src/public-api";
+import { AccountConfigModule } from '@abp/ng.account.config';
+import { CoreModule } from '@abp/ng.core';
+import { IdentityConfigModule } from '@abp/ng.identity.config';
+import { SettingManagementConfigModule } from '@abp/ng.setting-management.config';
+import { TenantManagementConfigModule } from '@abp/ng.tenant-management.config';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
+import { NgxsModule } from '@ngxs/store';
+import { OAuthModule } from 'angular-oauth2-oidc';
+import { MyProjectNameConfigModule } from '../../projects/my-project-name-config/src/public-api';
+import { environment } from '../environments/environment';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { SharedModule } from './shared/shared.module';
 
 const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
 
@@ -23,11 +23,11 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
   imports: [
     ThemeSharedModule.forRoot(),
     CoreModule.forRoot({
-      environment
+      environment,
     }),
     OAuthModule.forRoot(),
     NgxsModule.forRoot([]),
-    AccountConfigModule.forRoot({ redirectUrl: "/" }),
+    AccountConfigModule.forRoot({ redirectUrl: '/' }),
     IdentityConfigModule,
     TenantManagementConfigModule,
     SettingManagementConfigModule,
@@ -37,8 +37,8 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
     AppRoutingModule,
     SharedModule,
 
-    ...(environment.production ? [] : LOGGERS)
+    ...(environment.production ? [] : LOGGERS),
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

From 2f7e69e1a27f2dc1732e4a55ef98d752b6f86f20 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Fri, 27 Mar 2020 15:06:07 +0300
Subject: [PATCH 08/11] refactor: reduce codes and increase readability

---
 .../components/dynamic-layout.component.ts    | 48 +++++++------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
index fc3926a1ea..e835dd777d 100644
--- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
@@ -1,15 +1,13 @@
-import { Component, Input, OnDestroy, Type, Injector } from '@angular/core';
+import { Component, OnDestroy, Type } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, UrlSegment } from '@angular/router';
-import { Select, Store } from '@ngxs/store';
-import { Observable, combineLatest } from 'rxjs';
+import { Store } from '@ngxs/store';
 import snq from 'snq';
 import { eLayoutType } from '../enums/common';
-import { Config } from '../models/config';
 import { ABP } from '../models/common';
+import { ReplaceableComponents } from '../models/replaceable-components';
 import { ConfigState } from '../states/config.state';
-import { takeUntilDestroy } from '../utils/rxjs-utils';
 import { ReplaceableComponentsState } from '../states/replaceable-components.state';
-import { ReplaceableComponents } from '../models/replaceable-components';
+import { takeUntilDestroy } from '../utils/rxjs-utils';
 
 @Component({
   selector: 'abp-dynamic-layout',
@@ -22,23 +20,9 @@ import { ReplaceableComponents } from '../models/replaceable-components';
   `,
 })
 export class DynamicLayoutComponent implements OnDestroy {
-  @Select(ReplaceableComponentsState.getComponent('Theme.ApplicationLayoutComponent'))
-  applicationLayout$: Observable<ReplaceableComponents.ReplaceableComponent>;
-
-  @Select(ReplaceableComponentsState.getComponent('Theme.AccountLayoutComponent'))
-  accountLayout$: Observable<ReplaceableComponents.ReplaceableComponent>;
-
-  @Select(ReplaceableComponentsState.getComponent('Theme.EmptyLayoutComponent'))
-  emptyLayout$: Observable<ReplaceableComponents.ReplaceableComponent>;
-
   layout: Type<any>;
 
-  layouts = {} as { [key in eLayoutType]: Type<any> };
-
-  expectedLayout: eLayoutType = eLayoutType.empty;
-
   constructor(private router: Router, private route: ActivatedRoute, private store: Store) {
-    this.listenToLayouts();
     const { routes } = this.store.selectSnapshot(ConfigState.getAll);
 
     router.events.pipe(takeUntilDestroy(this)).subscribe(event => {
@@ -47,25 +31,25 @@ export class DynamicLayoutComponent implements OnDestroy {
           { path: router.url.replace('/', '') },
         ] as any);
 
-        this.expectedLayout =
+        const layouts = {
+          application: this.getComponent('Theme.ApplicationLayoutComponent'),
+          account: this.getComponent('Theme.AccountLayoutComponent'),
+          empty: this.getComponent('Theme.EmptyApplicationLayoutComponent'),
+        };
+
+        const expectedLayout =
           (this.route.snapshot.data || {}).layout || findLayout(segments, routes);
 
-        this.layout = this.layouts[this.expectedLayout];
+        this.layout = layouts[expectedLayout].component;
       }
     });
   }
 
-  ngOnDestroy() {}
-
-  listenToLayouts() {
-    combineLatest(this.applicationLayout$, this.accountLayout$, this.emptyLayout$)
-      .pipe(takeUntilDestroy(this))
-      .subscribe(([application, account, empty]) => {
-        this.layouts.application = application.component;
-        this.layouts.account = account.component;
-        this.layouts.empty = empty.component;
-      });
+  getComponent(key: string): ReplaceableComponents.ReplaceableComponent {
+    return this.store.selectSnapshot(ReplaceableComponentsState.getComponent(key));
   }
+
+  ngOnDestroy() {}
 }
 
 function findLayout(segments: UrlSegment[], routes: ABP.FullRoute[]): eLayoutType {

From 91668b35f423dcca63be06f972e23a8a9e6bfb22 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Fri, 27 Mar 2020 15:14:00 +0300
Subject: [PATCH 09/11] =?UTF-8?q?refactor(core):=20make=20getComponent=20m?=
 =?UTF-8?q?ethod=20in=20DynamicCompo=C4=B1nent=20private?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core/src/lib/components/dynamic-layout.component.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
index e835dd777d..71dd0f3fdf 100644
--- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
@@ -45,7 +45,7 @@ export class DynamicLayoutComponent implements OnDestroy {
     });
   }
 
-  getComponent(key: string): ReplaceableComponents.ReplaceableComponent {
+  private getComponent(key: string): ReplaceableComponents.ReplaceableComponent {
     return this.store.selectSnapshot(ReplaceableComponentsState.getComponent(key));
   }
 

From 1f2418b8721e0d991f2289bc4c57ca666de14c60 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Fri, 27 Mar 2020 15:48:37 +0300
Subject: [PATCH 10/11] fix(core): fix component key in dynamic layout

---
 .../core/src/lib/components/dynamic-layout.component.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
index 71dd0f3fdf..c07f11580f 100644
--- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
@@ -34,7 +34,7 @@ export class DynamicLayoutComponent implements OnDestroy {
         const layouts = {
           application: this.getComponent('Theme.ApplicationLayoutComponent'),
           account: this.getComponent('Theme.AccountLayoutComponent'),
-          empty: this.getComponent('Theme.EmptyApplicationLayoutComponent'),
+          empty: this.getComponent('Theme.EmptyLayoutComponent'),
         };
 
         const expectedLayout =

From 6239fcd585958de01da89725d3d3cbc9b244ef5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arma=C4=9Fan=20=C3=9Cnl=C3=BC?=
 <36102404+armgnunlu@users.noreply.github.com>
Date: Fri, 27 Mar 2020 17:40:04 +0300
Subject: [PATCH 11/11] Resolved #3238

---
 .../Pages/Documents/Project/Index.cshtml      |  31 +-
 .../Pages/Documents/Search.cshtml             |  88 +++--
 .../Pages/Documents/Shared/Styles/vs.css      | 240 ++++++------
 .../Pages/Documents/Shared/Styles/vs.min.css  |   2 +-
 .../Pages/Documents/Shared/Styles/vs.scss     | 349 ++++++++++--------
 5 files changed, 384 insertions(+), 326 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 67e5352e22..6fcf402d70 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -68,7 +68,7 @@
                             }
 
                             <div class="for-mobile">
-                                <div class="navbar-light">
+                                <div class="navbar-dark">
                                     <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
                                         <span class="navbar-toggler-icon"></span>
                                     </button>
@@ -108,7 +108,7 @@
                                             <div class="input-group">
                                                 <div class="input-group-prepend">
                                                     <label class="input-group-text">
-                                                        <i class="fa fa-check-square-o" aria-hidden="true" data-toggle="tooltip" title="@L["Version"]"></i>
+                                                        <i class="fas fa-code-branch" aria-hidden="true" data-toggle="tooltip" title="@L["Version"]"></i>
                                                     </label>
                                                 </div>
 
@@ -124,15 +124,15 @@
 
                             @if (Model.LanguageSelectListItems.Count > 1)
                             {
-                                <div class="col  @(Model.VersionSelectItems.Any()?"pl-0":"")">
+                                <div class="col-5  @(Model.VersionSelectItems.Any()?"pl-0":"")">
                                     <div class="docs-version docs-language @(Model.VersionSelectItems.Any()?"pl-1":"")">
                                         <div class="version-select">
                                             <div class="input-group">
-                                                <div class="input-group-prepend">
+                                                @*<div class="input-group-prepend">
                                                     <label class="input-group-text">
                                                         <i class="fa fa-globe" aria-hidden="true" data-toggle="tooltip" title="@L["Language"]"></i>
                                                     </label>
-                                                </div>
+                                                </div>*@
                                                 <select asp-items="Model.LanguageSelectListItems"
                                                         class="form-control"
                                                         onchange="window.location.replace(this.value)">
@@ -163,11 +163,11 @@
 
                         @if (Model.FullSearchEnabled)
                         {
-                            <div class="docs-version mb-4">
+                            <div class="docs-version mt-2 mb-4">
                                 <div class="version-select">
                                     <div class="input-group">
                                         <div class="input-group-prepend">
-                                            <label class="input-group-text"><i class="fa fa-filter"></i></label>
+                                            <label class="input-group-text"><i class="fa fa-search"></i></label>
                                         </div>
 
                                         <input class="form-control" 
@@ -224,7 +224,9 @@
                             @if (!string.IsNullOrEmpty(Model.Document.EditLink))
                             {
                                 <a href="@Model.Document.EditLink" target="_blank">
-                                    <i class="fa fa-edit"></i> @(L["Edit"]) (@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString())
+                                    <i class="fa fa-edit"></i> 
+                                    @(L["Edit"]) 
+                                    <span class="for-desktop">(@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString())</span>
                                 </a>
                             }
                         </div>
@@ -232,20 +234,21 @@
                         <div class="float-right mr-3">
                             @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
                             {
-                                @(L["Contributors"].Value + " :")
+                            <span class="for-desktop">
+                                @(L["Contributors"].Value + " :") </span>
                                 @foreach (var contributor in Model.Document.Contributors)
                                 {
                                     <a href="@contributor.UserProfileUrl" target="_blank">
                                         <img src="@contributor.AvatarUrl"
-                                             class="rounded-circle" 
+                                             class="rounded-circle"
                                              alt="Avatar"
-                                             height="21" 
-                                             width="21" 
+                                             height="21"
+                                             width="21"
                                              title="@contributor.Username" />
                                     </a>
                                 }
-                            }
-                        </div>
+                                }
+</div>
 
                     </div>
 
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Search.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Search.cshtml
index 0e518ddf0e..635553c111 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Search.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Search.cshtml
@@ -15,53 +15,73 @@
     <style>
         highlight {
             font-weight: bold;
-            color: red;
-            font-style: italic;
+            color: #212529;
+            background: #f9efa6;
+            padding: 0 3px;
+            border-radius: 3px;
+        }
+
+        body {
+            background-color: rgba(0, 0, 0, 0.03);
         }
     </style>
 }
 
-<div class="container">
+<div class="container mb-5">
+
     <form method="get" action="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/" class="mt-4">
-        <input type="text" asp-for="@Model.KeyWord" class="form-control" />
-        <button type="submit" class="btn-block btn-primary btn-lg mt-3">Search</button>
+        <h4 class="text-center my-3">Search in Documents</h4>
+        <div class="card rounded">
+            <div class="p-3 bg-white">
+                <div class="form-row">
+                    <div class="col"><input type="text" asp-for="@Model.KeyWord" class="form-control" /></div>
+                    <div class="col-auto"><button type="submit" class="btn btn-primary px-md-5">Search</button></div>
+                </div>
+            </div>
+        </div>
     </form>
 
-    <div class="my-3 p-3 bg-white rounded">
-        <h6 class="border-bottom pb-4 mb-0">Search results</h6>
-
-        @foreach (var docs in Model.SearchOutputs)
-        {
-            <div class="media text-muted pt-3">
-                <div class="media-body pb-3 mb-0 small border-bottom">
-                    <div class="list-group">
+    <div class="card mt-4 rounded">
+        <div class="card-header">
+            <h5 class="text-center ">Search Results</h5>
+        </div>
+        <div class="p-5 card-body">
+            @foreach (var docs in Model.SearchOutputs)
+            {
+                <div class="media text-muted">
+                    <div class="media-body pb-3 small">
+                        <div class="list-group">
 
-                        @functions
-                        {
-                            string RemoveFileExtensionFromPath(string path)
-                            {
-                                if (path == null)
+                            @functions
                                 {
-                                    return null;
-                                }
+                                string RemoveFileExtensionFromPath(string path)
+                                {
+                                    if (path == null)
+                                    {
+                                        return null;
+                                    }
 
-                                return path.EndsWith("." + @Model.Project.Format)
-                                    ? path.Left(path.Length - Model.Project.Format.Length - 1)
-                                    : path;
+                                    return path.EndsWith("." + @Model.Project.Format)
+                                        ? path.Left(path.Length - Model.Project.Format.Length - 1)
+                                        : path;
+                                }
                             }
-                        }
-
-                        <a href="/@Model.LanguageCode/@Model.ProjectName/@Model.Version/@RemoveFileExtensionFromPath(docs.Name)">
-                            <h3>@RemoveFileExtensionFromPath(docs.Name)</h3></a>
-
-                        @foreach (var highlight in docs.Highlight)
-                        {
-                            <p class="list-group-item list-group-item-action">@Html.Raw(highlight)</p>
-                        }
 
+                            <h5 class="mb-3">
+                                <a href="/@Model.LanguageCode/@Model.ProjectName/@Model.Version/@RemoveFileExtensionFromPath(docs.Name)">
+                                    @RemoveFileExtensionFromPath(docs.Name)
+                                </a>
+                            </h5>
+                            <div class="mb-4">
+                                @foreach (var highlight in docs.Highlight)
+                                {
+                                    <p class=" ">@Html.Raw(highlight)</p>
+                                }
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
-        }
+            }
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index cbff2c6272..c25daac526 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -10,21 +10,21 @@
     transition: color .25s linear;
     color: gray; }
   .docs-page .anchorjs-link:hover {
-    color: #007bff;
     text-decoration: none; }
   .docs-page .docs-sidebar {
-    background: #f5f7f9;
     padding-right: 1rem;
     position: relative;
     top: 0px;
     left: 0;
-    position: fixed; }
+    position: fixed;
+    background: #1d1d1d; }
+    .docs-page .docs-sidebar .input-group {
+      border-radius: 5px;
+      overflow: hidden; }
     .docs-page .docs-sidebar .docs-sidebar-wrapper {
       width: 270px;
       float: right; }
       .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control {
-        background: none;
-        background: #fff;
         border: 0; }
         .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:visited {
           box-shadow: none; }
@@ -33,27 +33,28 @@
         padding: 0 1rem;
         margin: .25rem 0; }
         .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select {
-          border-radius: 3px;
-          border: 1px solid #e9ecef; }
+          border-radius: 3px; }
           .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text {
-            padding: 0.375rem 0.6rem;
+            padding: 0 10px;
             font-size: .9rem;
-            width: 32px;
-            height: 30px;
+            width: 26px;
+            height: 34px;
             line-height: 1;
             border-radius: 0px;
-            border: 1px solid #e9ecef; }
+            border: 0; }
+            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text i {
+              color: #666; }
           .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
-            padding: 0 10px;
+            padding: 0 10px 2px 10px;
             border: 0;
-            min-height: 30px;
-            height: 30px;
-            font-size: .85em;
-            border-radius: 1px; }
+            min-height: 34px;
+            height: 34px;
+            font-size: .9em;
+            border-radius: 0px; }
             .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited {
               box-shadow: none; }
           .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control {
-            padding-left: 6px; }
+            padding: 0 10px 2px 6px; }
       .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter {
         padding: 0 1rem;
         margin: .5rem 0;
@@ -64,7 +65,7 @@
         height: 100vh; }
         .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul {
           display: block;
-          height: calc(100vh - 220px);
+          height: calc(100vh - 320px);
           overflow-y: auto; }
         .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul {
           font-size: .935em;
@@ -88,6 +89,12 @@
               .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
                 top: 11px;
                 color: #aaa; }
+            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .badge {
+              text-transform: uppercase;
+              font-size: 9px;
+              position: relative;
+              letter-spacing: .125px;
+              top: -2px; }
             .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
               color: #999;
               padding: 7px 0;
@@ -129,10 +136,10 @@
             .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
               transform: rotate(0deg); }
     .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
-      font-size: 1.5rem;
+      font-size: 1.35rem;
       color: #000;
       font-weight: 700;
-      padding: 20px 0 10px;
+      padding: 15px 0 15px;
       line-height: 1; }
       .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong {
         font-weight: 300;
@@ -153,7 +160,8 @@
       .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong {
         display: block; }
   .docs-page .docs-content {
-    overflow-x: scroll; }
+    overflow-x: scroll;
+    min-height: 100vh; }
     .docs-page .docs-content .contributors {
       position: absolute;
       top: 15px;
@@ -222,10 +230,11 @@
       .docs-page .docs-content article.docs-body .blockquote {
         margin-bottom: 1rem;
         margin-left: 0;
-        border-left: 2px solid gray;
-        padding: 1em;
-        background-color: #eee;
-        padding-bottom: .2em; }
+        border-left: 3px solid #d2dbe4;
+        padding: 1em 1.5em;
+        background-color: #e9edf1;
+        padding-bottom: .2em;
+        font-size: 1em; }
       .docs-page .docs-content article.docs-body img {
         max-width: 100%;
         border: 1px solid #f4f5f7;
@@ -257,10 +266,8 @@
     .docs-page .docs-page-index .docs-inner-anchors {
       position: fixed;
       top: 0px;
-      /* max-width: 270px; */
       padding: 10px;
-      font-size: .90em;
-      /* height: 100vh; */ }
+      font-size: .90em; }
       .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
         font-size: .92em;
         margin-left: 15px;
@@ -300,83 +307,95 @@
       .docs-page .docs-page-index .scroll-top-btn.showup {
         display: block; }
 
+.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
+  background: #000000;
+  color: white; }
+
+.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
+  background: #000000;
+  color: white; }
+  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder {
+    color: white;
+    opacity: .5; }
+
+.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select label {
+  background: #000000;
+  border-color: #000000;
+  color: #ddd; }
+
+.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .form-control {
+  background: #333;
+  color: #999; }
+
+.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter select {
+  border: 0;
+  border-radius: 6px; }
+
+.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
+  color: #aaa; }
+
+.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a {
+  color: #aaa;
+  border-bottom: 0; }
+  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
+    color: #fff; }
+  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon {
+    font-size: .85em;
+    transition: .3s;
+    width: 18px;
+    height: 18px;
+    text-align: center;
+    padding: 0;
+    line-height: 1;
+    border-radius: 50%;
+    margin-right: 4px;
+    position: absolute;
+    left: 2px;
+    top: 11px;
+    color: #aaa;
+    cursor: default; }
+    .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link {
+      color: #555; }
+    .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right {
+      cursor: pointer; }
+    .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
+      top: 11px; }
+
+.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
+  color: #555;
+  padding: 7px 0;
+  display: block;
+  border-bottom: 0; }
+
+.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
+  color: #fff;
+  transition: .4s; }
+  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa {
+    color: #fff; }
+  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa {
+    transform: rotate(90deg);
+    color: #fff; }
+
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
+  color: #fff;
+  text-transform: uppercase;
+  white-space: unset; }
+
+.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
+  color: #fff;
+  text-align: center;
+  display: block;
+  width: 100%;
+  background: #444;
+  padding: 6px 0 8px;
+  border-radius: 5px; }
+
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
+  color: #ddd; }
+
 @media (min-width: 1100px) {
   .container {
-    max-width: 1080px; }
-  .docs-page .docs-sidebar.dark-sidebar {
-    background: #191919; }
-    .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select {
-      border: 1px solid #333; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
-        background: #191919;
-        border-color: #191919;
-        color: #999; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
-        background: #191919;
-        border-color: #191919;
-        color: #999; }
-        .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder {
-          color: #999;
-          opacity: .5; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select label {
-        background: #333;
-        border-color: #333;
-        color: #ddd; }
-    .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .form-control {
-      background: #333;
-      color: #999; }
-    .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter select {
-      border: 0;
-      border-radius: 6px; }
-    .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
-      color: #aaa; }
-    .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a {
-      color: #aaa;
-      border-bottom: 0; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
-        color: #fff; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon {
-        font-size: .85em;
-        transition: .3s;
-        width: 18px;
-        height: 18px;
-        text-align: center;
-        padding: 0;
-        line-height: 1;
-        border-radius: 50%;
-        margin-right: 4px;
-        position: absolute;
-        left: 2px;
-        top: 11px;
-        color: #aaa;
-        cursor: default; }
-        .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link {
-          color: #555; }
-        .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right {
-          cursor: pointer; }
-        .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
-          top: 11px; }
-    .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
-      color: #555;
-      padding: 7px 0;
-      display: block;
-      border-bottom: 0; }
-    .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
-      color: #fff;
-      transition: .4s; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa {
-        color: #fff; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa {
-        transform: rotate(90deg);
-        color: #fff; }
-    .docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .navbar-brand {
-      color: #fff;
-      text-transform: uppercase;
-      white-space: unset; }
-    .docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .go-back-site {
-      color: #fff; }
-    .docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .navbar-logo-desc {
-      color: #ddd; } }
+    max-width: 1080px; } }
 
 @media (min-width: 1366px) {
   .container {
@@ -420,30 +439,21 @@
           left: 0;
           width: 100%;
           z-index: 100;
-          background: #f5f7f9;
+          background: #1d1d1d;
           display: none; }
           .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter {
             padding: 0 0 1rem !important; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version label {
-          width: 36px;
-          text-align: center;
-          padding-left: 0;
-          padding-right: 0;
-          display: inline-block;
-          line-height: 26px; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version input.form-control {
-          padding-left: 12px !important; }
       .docs-page .docs-sidebar .docs-top .navbar-logo {
         padding: 0rem;
         padding-top: .3rem;
         display: block;
         text-align: center; }
         .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
-          font-size: 1.5rem;
+          font-size: 1.25rem;
           font-weight: 700;
           display: block;
           margin-right: 0em;
-          padding: 7px 0 10px;
+          padding: 10px 0 15px;
           text-transform: uppercase; }
           .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo {
             width: 110px; }
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css
index 2111ae8075..9a3b7d32e5 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css
@@ -1 +1 @@
-body{position:relative;}.docs-page{background:#f5f7f9;}.docs-page .anchorjs-link{transition:all .25s linear;}.docs-page *:hover>.anchorjs-link{margin-left:-1.125em !important;transition:color .25s linear;color:#808080;}.docs-page .anchorjs-link:hover{color:#007bff;text-decoration:none;}.docs-page .docs-sidebar{background:#f5f7f9;padding-right:1rem;position:relative;top:0;left:0;position:fixed;}.docs-page .docs-sidebar .docs-sidebar-wrapper{width:270px;float:right;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control{background:none;background:#fff;border:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version{position:relative;padding:0 1rem;margin:.25rem 0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select{border-radius:3px;border:1px solid #e9ecef;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text{padding:.375rem .6rem;font-size:.9rem;width:32px;height:30px;line-height:1;border-radius:0;border:1px solid #e9ecef;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{padding:0 10px;border:0;min-height:30px;height:30px;font-size:.85em;border-radius:1px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{padding-left:6px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter{padding:0 1rem;margin:.5rem 0;font-size:.9em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#ddd;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{height:100vh;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list>ul{display:block;height:calc(100vh - 220px);overflow-y:auto;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul{font-size:.935em;list-style:none;padding:0 1rem;margin:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li{margin-left:0;padding-left:24px;display:block;width:100%;position:relative;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#999;font-weight:700;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link{top:11px;color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#999;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a{font-weight:400;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul li a{font-weight:300;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#000;transition:.4s;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>span .fa{transform:rotate(90deg);color:#007bff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link>span .fa{transform:rotate(0deg);}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.5rem;color:#000;font-weight:700;padding:20px 0 10px;line-height:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong{font-weight:300;text-transform:uppercase;font-size:.7em;letter-spacing:1px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#000;opacity:.65;transition:.2s;font-size:.8em;font-weight:300;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover{text-decoration:none;opacity:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:.85em;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong{display:block;}.docs-page .docs-content{overflow-x:scroll;}.docs-page .docs-content .contributors{position:absolute;top:15px;right:5px;}.docs-page .docs-content .contributors .contributors-avatar{border-radius:21px;width:21px;height:21px;}.docs-page .docs-content .contributors a{padding:0;width:21px;height:21px;display:inline-block;margin:0 0 0 2px;}.docs-page .docs-content .contributors a:hover{text-decoration:none;}.docs-page .docs-content .docs-link-btns{border-bottom:1px solid #f4f5f7;background:#fdfdfd;padding:10px 20px;margin:0 -15px;text-align:right;font-size:.8em;min-height:40px;}.docs-page .docs-content .docs-link-btns a{color:#999;}.docs-page .docs-content .docs-link-btns a:hover{color:#444;text-decoration:none;}.docs-page .docs-content .docs-link-btns .twitter{color:#00acee;}.docs-page .docs-content .docs-link-btns .linkedin{color:#0077b5;}.docs-page .docs-content .docs-link-btns .email{color:#5a5a5a;}.docs-page .docs-content .docs-link-btns .share-button{margin-left:10px;}.docs-page .docs-content .docs-text-field{padding:2rem;}.docs-page .docs-content article.docs-body{word-break:break-word;}.docs-page .docs-content article.docs-body h1{padding-top:1rem;font-size:2.25rem;padding-bottom:10px;}.docs-page .docs-content article.docs-body h2{padding-top:2rem;padding-bottom:10px;font-size:2rem;}.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{padding-top:20px;padding-bottom:5px;font-size:1.5rem;}.docs-page .docs-content article.docs-body h1,.docs-page .docs-content article.docs-body h2,.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{position:relative;}.docs-page .docs-content article.docs-body h1 .anchor,.docs-page .docs-content article.docs-body h2 .anchor,.docs-page .docs-content article.docs-body h3 .anchor,.docs-page .docs-content article.docs-body h4 .anchor,.docs-page .docs-content article.docs-body h5 .anchor,.docs-page .docs-content article.docs-body h6 .anchor{position:absolute;right:-26px;font-size:18px;bottom:5px;color:#999;opacity:0;transition:.5s;}.docs-page .docs-content article.docs-body h1:hover .anchor,.docs-page .docs-content article.docs-body h2:hover .anchor,.docs-page .docs-content article.docs-body h3:hover .anchor,.docs-page .docs-content article.docs-body h4:hover .anchor,.docs-page .docs-content article.docs-body h5:hover .anchor,.docs-page .docs-content article.docs-body h6:hover .anchor{opacity:1;}.docs-page .docs-content article.docs-body .blockquote{margin-bottom:1rem;margin-left:0;border-left:2px solid #808080;padding:1em;background-color:#eee;padding-bottom:.2em;}.docs-page .docs-content article.docs-body img{max-width:100%;border:1px solid #f4f5f7;margin:15px 0 25px;box-shadow:0 0 45px #f8f9fa;border-radius:6px;}.docs-page .docs-content article.docs-body table{display:block;overflow:auto;width:100%;}.docs-page .docs-content article.docs-body table thead tr{border-bottom:2px inset;}.docs-page .docs-content article.docs-body table th{font-weight:600;}.docs-page .docs-content article.docs-body table td,.docs-page .docs-content article.docs-body table th{border:1px solid #dfe2e5;padding:6px 13px;}.docs-page .docs-content article.docs-body table tr{background-color:#fff;border-top:1px solid #c6cbd1;}.docs-page .docs-content article.docs-body table tr:nth-child(2n){background-color:#f6f8fa;}.docs-page .docs-content article.docs-body table img{background-color:initial;}.docs-page .docs-page-index{min-height:96vh;}.docs-page .docs-page-index #scroll-index{max-height:96vh;}.docs-page .docs-page-index .docs-inner-anchors{position:fixed;top:0;padding:10px;font-size:.9em;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills{font-size:.92em;margin-left:15px;border-left:1px solid #eee;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link{padding:3px 14px 4px;color:#aaa;line-height:1.2;position:relative;border-left:1px solid #eee;border-radius:0;margin-left:-1px;margin-top:1px;margin-bottom:1px;transition:.2s;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active{border-left:1px solid #007bff;background:none;color:#007bff;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .index-scroll{margin-left:-30px;}.docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper{max-width:300px;float:left;}.docs-page .docs-page-index .scroll-top-btn{display:none;font-size:.85em;color:#aaa;text-decoration:none;padding-left:18px;}.docs-page .docs-page-index .scroll-top-btn.showup{display:block;}@media(min-width:1100px){.container{max-width:1080px;}.docs-page .docs-sidebar.dark-sidebar{background:#191919;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select{border:1px solid #333;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#191919;border-color:#191919;color:#999;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#191919;border-color:#191919;color:#999;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder{color:#999;opacity:.5;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select label{background:#333;border-color:#333;color:#ddd;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .form-control{background:#333;color:#999;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter select{border:0;border-radius:6px;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#aaa;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#aaa;border-bottom:0;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link{top:11px;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#555;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#fff;transition:.4s;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span .fa{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span:not(.last-link) .fa{transform:rotate(90deg);color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .navbar-brand{color:#fff;text-transform:uppercase;white-space:unset;}.docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .go-back-site{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .navbar-logo-desc{color:#ddd;}}@media(min-width:1366px){.container{max-width:1340px;}}@media(min-width:1440px){.container{max-width:1400px;}}@media(max-width:767px){.docs-page .docs-content article.docs-body h1{padding-top:1.5rem;}.docs-page{background:#f5f7f9;}.docs-page>.container-fluid{display:block;}.docs-page>.container-fluid>.row{display:block;}.docs-page .docs-sidebar{position:fixed;max-width:100%;width:100%;display:block;padding:0 !important;top:0;left:0;z-index:100;right:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper{max-width:100%;width:100%;top:0;position:relative;margin:0 !important;height:72px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{padding:.5rem 1.5rem 2rem 1.5rem;position:fixed;top:70px;font-size:17px;left:0;width:100%;z-index:100;background:#f5f7f9;display:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter{padding:0 0 1rem !important;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version label{width:36px;text-align:center;padding-left:0;padding-right:0;display:inline-block;line-height:26px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version input.form-control{padding-left:12px !important;}.docs-page .docs-sidebar .docs-top .navbar-logo{padding:0;padding-top:.3rem;display:block;text-align:center;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.5rem;font-weight:700;display:block;margin-right:0;padding:7px 0 10px;text-transform:uppercase;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo{width:110px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{display:none;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:1em;display:none;}.docs-page .docs-sidebar .docs-top .open-dmenu{position:absolute;top:10px;left:20px;}.docs-page .docs-content{padding-top:72px;max-width:100%;display:block !important;}.docs-page .docs-content .docs-text-field{padding:1rem 1.5rem;}.docs-page .docs-page-index{display:none;}}.for-mobile{display:none;}.for-desktop{display:inline-block;}pre[class*="language-"]{padding:1.4em 2em !important;margin:15px 0 25px !important;border-radius:6px;}code{padding:.2em .4em;margin:0;font-size:82%;background-color:#f0f1f3;border-radius:3px;color:#28a745;}pre code{padding:0;}pre .token.keyword{color:#569cd6;}pre .token.atrule,pre .token.attr-value,pre .token.function,pre .token.class-name{color:#d69d85;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#191919 !important;}div.code-toolbar>.toolbar span{cursor:default;}div.code-toolbar>.toolbar a{cursor:copy;}@media(max-width:767px){body{font-size:14px;}.for-mobile{display:inline-block;}.for-desktop{display:none;}.close-mmenu,.close-dmenu{position:absolute;top:-78px;left:25px;color:#fff;font-size:68px;background:#fff;opacity:0;}.navbar{padding:.5rem 1.75rem;}.navbar .navbar-collapse{background:#38003d;position:fixed;top:86px;left:0;width:100%;height:100vh;height:calc(100vh - 86px);z-index:100 !important;}.navbar .navbar-collapse .navbar-nav{height:100vh;padding:20px 30px;overflow:auto;}.navbar .navbar-collapse .navbar-nav .nav-link{padding:1.2rem !important;}.navbar .navbar-toggler{padding:.5rem .75rem;font-size:1.5rem;line-height:1;background-color:transparent;border:0;border-radius:.25rem;color:#fff !important;margin-left:-1rem;}.section-with-logos img{margin:15px;opacity:1;-webkit-filter:grayscale(0%);filter:grayscale(0%);}span.code-arrow{padding:0 0 0;display:block;transform:rotate(90deg);font-size:2em;}.mb-5,.my-5{margin-bottom:2rem !important;}}@media screen and (max-width:767px){.navbar-logo .navbar-brand{display:inline-block;margin:0 auto !important;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}.alert-criteria{padding:1.25em 1.5em;max-width:100%;}.alert-criteria p.alert-p{font-size:.96em;}.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.96em;}@media screen and (max-width:767px){.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.88em;}}.alert-criteria .input-group .input-group-text{color:#004085;background-color:#bddcfd;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .input-group-text{display:none;}}.alert-criteria .input-group .form-control{color:#004085;background-color:#fff;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .form-control{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;}}.scrolledMore{padding-top:107px;}.scrolledMore .alert-criteria{position:fixed;top:0;z-index:10;border:0;border-radius:0;margin-left:-47px;padding:.5em .75em;}@media screen and (max-width:767px){.scrolledMore .alert-criteria{top:72px;margin-left:-36px;}}.scrolledMore .alert-criteria p.alert-p{display:none;}
\ No newline at end of file
+body{position:relative;}.docs-page{background:#f5f7f9;}.docs-page .anchorjs-link{transition:all .25s linear;}.docs-page *:hover>.anchorjs-link{margin-left:-1.125em !important;transition:color .25s linear;color:#808080;}.docs-page .anchorjs-link:hover{text-decoration:none;}.docs-page .docs-sidebar{padding-right:1rem;position:relative;top:0;left:0;position:fixed;background:#1d1d1d;}.docs-page .docs-sidebar .input-group{border-radius:5px;overflow:hidden;}.docs-page .docs-sidebar .docs-sidebar-wrapper{width:270px;float:right;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control{border:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version{position:relative;padding:0 1rem;margin:.25rem 0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select{border-radius:3px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text{padding:0 10px;font-size:.9rem;width:26px;height:34px;line-height:1;border-radius:0;border:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text i{color:#666;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{padding:0 10px 2px 10px;border:0;min-height:34px;height:34px;font-size:.9em;border-radius:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{padding:0 10px 2px 6px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter{padding:0 1rem;margin:.5rem 0;font-size:.9em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#ddd;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{height:100vh;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list>ul{display:block;height:calc(100vh - 320px);overflow-y:auto;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul{font-size:.935em;list-style:none;padding:0 1rem;margin:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li{margin-left:0;padding-left:24px;display:block;width:100%;position:relative;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#999;font-weight:700;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link{top:11px;color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .badge{text-transform:uppercase;font-size:9px;position:relative;letter-spacing:.125px;top:-2px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#999;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a{font-weight:400;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul li a{font-weight:300;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#000;transition:.4s;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>span .fa{transform:rotate(90deg);color:#007bff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link>span .fa{transform:rotate(0deg);}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.35rem;color:#000;font-weight:700;padding:15px 0 15px;line-height:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong{font-weight:300;text-transform:uppercase;font-size:.7em;letter-spacing:1px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#000;opacity:.65;transition:.2s;font-size:.8em;font-weight:300;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover{text-decoration:none;opacity:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:.85em;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong{display:block;}.docs-page .docs-content{overflow-x:scroll;min-height:100vh;}.docs-page .docs-content .contributors{position:absolute;top:15px;right:5px;}.docs-page .docs-content .contributors .contributors-avatar{border-radius:21px;width:21px;height:21px;}.docs-page .docs-content .contributors a{padding:0;width:21px;height:21px;display:inline-block;margin:0 0 0 2px;}.docs-page .docs-content .contributors a:hover{text-decoration:none;}.docs-page .docs-content .docs-link-btns{border-bottom:1px solid #f4f5f7;background:#fdfdfd;padding:10px 20px;margin:0 -15px;text-align:right;font-size:.8em;min-height:40px;}.docs-page .docs-content .docs-link-btns a{color:#999;}.docs-page .docs-content .docs-link-btns a:hover{color:#444;text-decoration:none;}.docs-page .docs-content .docs-link-btns .twitter{color:#00acee;}.docs-page .docs-content .docs-link-btns .linkedin{color:#0077b5;}.docs-page .docs-content .docs-link-btns .email{color:#5a5a5a;}.docs-page .docs-content .docs-link-btns .share-button{margin-left:10px;}.docs-page .docs-content .docs-text-field{padding:2rem;}.docs-page .docs-content article.docs-body{word-break:break-word;}.docs-page .docs-content article.docs-body h1{padding-top:1rem;font-size:2.25rem;padding-bottom:10px;}.docs-page .docs-content article.docs-body h2{padding-top:2rem;padding-bottom:10px;font-size:2rem;}.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{padding-top:20px;padding-bottom:5px;font-size:1.5rem;}.docs-page .docs-content article.docs-body h1,.docs-page .docs-content article.docs-body h2,.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{position:relative;}.docs-page .docs-content article.docs-body h1 .anchor,.docs-page .docs-content article.docs-body h2 .anchor,.docs-page .docs-content article.docs-body h3 .anchor,.docs-page .docs-content article.docs-body h4 .anchor,.docs-page .docs-content article.docs-body h5 .anchor,.docs-page .docs-content article.docs-body h6 .anchor{position:absolute;right:-26px;font-size:18px;bottom:5px;color:#999;opacity:0;transition:.5s;}.docs-page .docs-content article.docs-body h1:hover .anchor,.docs-page .docs-content article.docs-body h2:hover .anchor,.docs-page .docs-content article.docs-body h3:hover .anchor,.docs-page .docs-content article.docs-body h4:hover .anchor,.docs-page .docs-content article.docs-body h5:hover .anchor,.docs-page .docs-content article.docs-body h6:hover .anchor{opacity:1;}.docs-page .docs-content article.docs-body .blockquote{margin-bottom:1rem;margin-left:0;border-left:3px solid #d2dbe4;padding:1em 1.5em;background-color:#e9edf1;padding-bottom:.2em;font-size:1em;}.docs-page .docs-content article.docs-body img{max-width:100%;border:1px solid #f4f5f7;margin:15px 0 25px;box-shadow:0 0 45px #f8f9fa;border-radius:6px;}.docs-page .docs-content article.docs-body table{display:block;overflow:auto;width:100%;}.docs-page .docs-content article.docs-body table thead tr{border-bottom:2px inset;}.docs-page .docs-content article.docs-body table th{font-weight:600;}.docs-page .docs-content article.docs-body table td,.docs-page .docs-content article.docs-body table th{border:1px solid #dfe2e5;padding:6px 13px;}.docs-page .docs-content article.docs-body table tr{background-color:#fff;border-top:1px solid #c6cbd1;}.docs-page .docs-content article.docs-body table tr:nth-child(2n){background-color:#f6f8fa;}.docs-page .docs-content article.docs-body table img{background-color:initial;}.docs-page .docs-page-index{min-height:96vh;}.docs-page .docs-page-index #scroll-index{max-height:96vh;}.docs-page .docs-page-index .docs-inner-anchors{position:fixed;top:0;padding:10px;font-size:.9em;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills{font-size:.92em;margin-left:15px;border-left:1px solid #eee;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link{padding:3px 14px 4px;color:#aaa;line-height:1.2;position:relative;border-left:1px solid #eee;border-radius:0;margin-left:-1px;margin-top:1px;margin-bottom:1px;transition:.2s;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active{border-left:1px solid #007bff;background:none;color:#007bff;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .index-scroll{margin-left:-30px;}.docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper{max-width:300px;float:left;}.docs-page .docs-page-index .scroll-top-btn{display:none;font-size:.85em;color:#aaa;text-decoration:none;padding-left:18px;}.docs-page .docs-page-index .scroll-top-btn.showup{display:block;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#000;color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#000;color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder{color:#fff;opacity:.5;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select label{background:#000;border-color:#000;color:#ddd;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .form-control{background:#333;color:#999;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter select{border:0;border-radius:6px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#aaa;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link{top:11px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#555;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#fff;transition:.4s;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span .fa{color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span:not(.last-link) .fa{transform:rotate(90deg);color:#fff;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{color:#fff;text-transform:uppercase;white-space:unset;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#fff;text-align:center;display:block;width:100%;background:#444;padding:6px 0 8px;border-radius:5px;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{color:#ddd;}@media(min-width:1100px){.container{max-width:1080px;}}@media(min-width:1366px){.container{max-width:1340px;}}@media(min-width:1440px){.container{max-width:1400px;}}@media(max-width:767px){.docs-page .docs-content article.docs-body h1{padding-top:1.5rem;}.docs-page{background:#f5f7f9;}.docs-page>.container-fluid{display:block;}.docs-page>.container-fluid>.row{display:block;}.docs-page .docs-sidebar{position:fixed;max-width:100%;width:100%;display:block;padding:0 !important;top:0;left:0;z-index:100;right:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper{max-width:100%;width:100%;top:0;position:relative;margin:0 !important;height:72px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{padding:.5rem 1.5rem 2rem 1.5rem;position:fixed;top:70px;font-size:17px;left:0;width:100%;z-index:100;background:#1d1d1d;display:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter{padding:0 0 1rem !important;}.docs-page .docs-sidebar .docs-top .navbar-logo{padding:0;padding-top:.3rem;display:block;text-align:center;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.25rem;font-weight:700;display:block;margin-right:0;padding:10px 0 15px;text-transform:uppercase;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo{width:110px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{display:none;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:1em;display:none;}.docs-page .docs-sidebar .docs-top .open-dmenu{position:absolute;top:10px;left:20px;}.docs-page .docs-content{padding-top:72px;max-width:100%;display:block !important;}.docs-page .docs-content .docs-text-field{padding:1rem 1.5rem;}.docs-page .docs-page-index{display:none;}}.for-mobile{display:none;}.for-desktop{display:inline-block;}pre[class*="language-"]{padding:1.4em 2em !important;margin:15px 0 25px !important;border-radius:6px;}code{padding:.2em .4em;margin:0;font-size:82%;background-color:#f0f1f3;border-radius:3px;color:#28a745;}pre code{padding:0;}pre .token.keyword{color:#569cd6;}pre .token.atrule,pre .token.attr-value,pre .token.function,pre .token.class-name{color:#d69d85;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#191919 !important;}div.code-toolbar>.toolbar span{cursor:default;}div.code-toolbar>.toolbar a{cursor:copy;}@media(max-width:767px){body{font-size:14px;}.for-mobile{display:inline-block;}.for-desktop{display:none;}.close-mmenu,.close-dmenu{position:absolute;top:-78px;left:25px;color:#fff;font-size:68px;background:#fff;opacity:0;}.navbar{padding:.5rem 1.75rem;}.navbar .navbar-collapse{background:#38003d;position:fixed;top:86px;left:0;width:100%;height:100vh;height:calc(100vh - 86px);z-index:100 !important;}.navbar .navbar-collapse .navbar-nav{height:100vh;padding:20px 30px;overflow:auto;}.navbar .navbar-collapse .navbar-nav .nav-link{padding:1.2rem !important;}.navbar .navbar-toggler{padding:.5rem .75rem;font-size:1.5rem;line-height:1;background-color:transparent;border:0;border-radius:.25rem;color:#fff !important;margin-left:-1rem;}.section-with-logos img{margin:15px;opacity:1;-webkit-filter:grayscale(0%);filter:grayscale(0%);}span.code-arrow{padding:0 0 0;display:block;transform:rotate(90deg);font-size:2em;}.mb-5,.my-5{margin-bottom:2rem !important;}}@media screen and (max-width:767px){.navbar-logo .navbar-brand{display:inline-block;margin:0 auto !important;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}.alert-criteria{padding:1.25em 1.5em;max-width:100%;}.alert-criteria p.alert-p{font-size:.96em;}.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.96em;}@media screen and (max-width:767px){.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.88em;}}.alert-criteria .input-group .input-group-text{color:#004085;background-color:#bddcfd;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .input-group-text{display:none;}}.alert-criteria .input-group .form-control{color:#004085;background-color:#fff;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .form-control{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;}}.scrolledMore{padding-top:107px;}.scrolledMore .alert-criteria{position:fixed;top:0;z-index:10;border:0;border-radius:0;margin-left:-47px;padding:.5em .75em;}@media screen and (max-width:767px){.scrolledMore .alert-criteria{top:72px;margin-left:-36px;}}.scrolledMore .alert-criteria p.alert-p{display:none;}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index 771070f775..de56885610 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -16,19 +16,20 @@ body {
     }
 
     .anchorjs-link:hover {
-        color: #007bff;
         text-decoration: none;
     }
 
     .docs-sidebar {
-        background: #f5f7f9;
         padding-right: 1rem;
         position: relative;
         top: 0px;
         left: 0;
         position: fixed;
-
-        .docs-language {
+        background: #1d1d1d;
+         
+        .input-group {
+            border-radius: 5px;
+            overflow: hidden;
         }
 
         .docs-sidebar-wrapper {
@@ -36,8 +37,6 @@ body {
             float: right;
 
             input.form-control {
-                background: none;
-                background: #fff;
                 border: 0;
 
                 &:focus, &:active, &:hover, &:visited {
@@ -52,25 +51,28 @@ body {
 
                 .version-select {
                     border-radius: 3px;
-                    border: 1px solid #e9ecef;
 
                     .input-group-text {
-                        padding: 0.375rem 0.6rem;
+                        padding: 0 10px;
                         font-size: .9rem;
-                        width: 32px;
-                        height: 30px;
+                        width: 26px;
+                        height: 34px;
                         line-height: 1;
                         border-radius: 0px;
-                        border: 1px solid #e9ecef;
+                        border: 0;
+
+                        i {
+                            color: #666;
+                        }
                     }
 
                     select.form-control, input.form-control {
-                        padding: 0 10px;
+                        padding: 0 10px 2px 10px;
                         border: 0;
-                        min-height: 30px;
-                        height: 30px;
-                        font-size: .85em;
-                        border-radius: 1px;
+                        min-height: 34px;
+                        height: 34px;
+                        font-size: .9em;
+                        border-radius: 0px;
 
                         &:focus, &:active, &:hover, &:visited {
                             box-shadow: none;
@@ -78,10 +80,7 @@ body {
                     }
 
                     select.form-control {
-                        padding-left: 6px;
-                    }
-
-                    label {
+                        padding: 0 10px 2px 6px;
                     }
                 }
             }
@@ -104,7 +103,7 @@ body {
 
                 > ul {
                     display: block;
-                    height: calc(100vh - 220px);
+                    height: calc(100vh - 320px);
                     overflow-y: auto;
                 }
 
@@ -139,6 +138,14 @@ body {
                             }
                         }
 
+                        .badge {
+                            text-transform: uppercase;
+                            font-size: 9px;
+                            position: relative;
+                            letter-spacing: .125px;
+                            top: -2px;
+                        }
+
                         span.tree-toggle {
                             color: #999;
                             padding: 7px 0;
@@ -224,16 +231,16 @@ body {
         .docs-top {
             .navbar-logo {
                 .navbar-brand {
-                    font-size: 1.5rem;
+                    font-size: 1.35rem;
                     color: #000;
                     font-weight: 700;
-                    padding: 20px 0 10px;
+                    padding: 15px 0 15px;
                     line-height: 1;
 
                     strong {
                         font-weight: 300;
                         text-transform: uppercase;
-                        font-size: .7em; 
+                        font-size: .7em;
                         letter-spacing: 1px;
                     }
                 }
@@ -264,6 +271,7 @@ body {
 
     .docs-content {
         overflow-x: scroll;
+        min-height: 100vh;
 
         .contributors {
             position: absolute;
@@ -372,10 +380,11 @@ body {
             .blockquote {
                 margin-bottom: 1rem;
                 margin-left: 0;
-                border-left: 2px solid gray;
-                padding: 1em;
-                background-color: #eee;
-                padding-bottom: .2em
+                border-left: 3px solid #d2dbe4;
+                padding: 1em 1.5em;
+                background-color: #e9edf1;
+                padding-bottom: .2em;
+                font-size: 1em;
             }
 
             img {
@@ -433,10 +442,9 @@ body {
         .docs-inner-anchors {
             position: fixed;
             top: 0px;
-            /* max-width: 270px; */
             padding: 10px;
             font-size: .90em;
-            /* height: 100vh; */
+
             .navbar {
                 .nav-pills {
                     font-size: .92em;
@@ -508,163 +516,189 @@ body {
 }
 
 
-@media (min-width: 1100px) {
-    .container {
-        max-width: 1080px;
-    }
-
-    .docs-page {
-        .docs-sidebar {
-            &.dark-sidebar {
-                background: #191919;
-
-                .docs-sidebar-wrapper {
-
-                    .docs-version {
-                        .version-select {
-                            border: 1px solid #333;
+.docs-page {
+    .docs-sidebar { 
+        .docs-sidebar-wrapper {
 
-                            select.form-control, input.form-control {
-                                background: #191919;
-                                border-color: #191919;
-                                color: #999;
-                            }
+            .docs-version {
+                .version-select { 
 
-                            input.form-control {
-                                background: #191919;
-                                border-color: #191919;
-                                color: #999;
+                    select.form-control, input.form-control {
+                        background: #000000;
+                        color: white;
+                    }
 
-                                &::placeholder {
-                                    color: #999;
-                                    opacity: .5;
-                                }
-                            }
+                    input.form-control {
+                        background: #000000;
+                        color: white;
 
-                            label {
-                                background: #333;
-                                border-color: #333;
-                                color: #ddd;
-                            }
+                        &::placeholder {
+                            color: white;
+                            opacity: .5;
                         }
                     }
 
-                    .docs-filter {
-                        .form-control {
-                            background: #333;
-                            color: #999;
-                        }
+                    label {
+                        background: #000000;
+                        border-color: #000000;
+                        color: #ddd;
+                    }
+                }
+            }
 
-                        select {
-                            border: 0;
-                            border-radius: 6px;
-                        }
+            .docs-filter {
+                .form-control {
+                    background: #333;
+                    color: #999;
+                }
 
-                        .filter-icon {
-                            i.fa {
-                                color: #aaa;
-                            }
-                        }
-                    }
+                select {
+                    border: 0;
+                    border-radius: 6px;
+                }
 
-                    .docs-tree-list {
-                        ul {
-                            li {
+                .filter-icon {
+                    i.fa {
+                        color: #aaa;
+                    }
+                }
+            }
 
+            .docs-tree-list {
+                ul {
+                    li {
 
-                                a {
-                                    color: #aaa;
-                                    border-bottom: 0;
 
-                                    &:hover {
-                                        color: #fff;
-                                    }
+                        a {
+                            color: #aaa;
+                            border-bottom: 0;
 
-                                    .plus-icon {
-                                        font-size: .85em;
-                                        transition: .3s;
-                                        width: 18px;
-                                        height: 18px;
-                                        text-align: center;
-                                        padding: 0;
-                                        line-height: 1;
-                                        border-radius: 50%;
-                                        margin-right: 4px;
-                                        position: absolute;
-                                        left: 2px;
-                                        top: 11px;
-                                        color: #aaa;
-                                        cursor: default;
-
-                                        .fa-long-arrow-right {
-                                            &.no-link {
-                                                color: #555;
-                                            }
-                                        }
+                            &:hover {
+                                color: #fff;
+                            }
 
-                                        .fa-chevron-right {
-                                            cursor: pointer;
-                                        }
+                            .plus-icon {
+                                font-size: .85em;
+                                transition: .3s;
+                                width: 18px;
+                                height: 18px;
+                                text-align: center;
+                                padding: 0;
+                                line-height: 1;
+                                border-radius: 50%;
+                                margin-right: 4px;
+                                position: absolute;
+                                left: 2px;
+                                top: 11px;
+                                color: #aaa;
+                                cursor: default;
 
-                                        &.last-link {
-                                            top: 11px;
-                                        }
+                                .fa-long-arrow-right {
+                                    &.no-link {
+                                        color: #555;
                                     }
                                 }
 
+                                .fa-chevron-right {
+                                    cursor: pointer;
+                                }
 
-                                span.tree-toggle {
-                                    color: #555;
-                                    padding: 7px 0;
-                                    display: block;
-                                    border-bottom: 0;
+                                &.last-link {
+                                    top: 11px;
                                 }
+                            }
+                        }
 
 
-                                &.selected-tree {
-                                    > a {
-                                        color: #fff;
-                                        transition: .4s;
+                        span.tree-toggle {
+                            color: #555;
+                            padding: 7px 0;
+                            display: block;
+                            border-bottom: 0;
+                        }
 
-                                        span {
-                                            .fa {
-                                                color: #fff;
-                                            }
 
-                                            &:not(.last-link) .fa {
-                                                transform: rotate(90deg);
-                                                color: #fff;
-                                            }
-                                        }
+                        &.selected-tree {
+                            > a {
+                                color: #fff;
+                                transition: .4s;
+
+                                span {
+                                    .fa {
+                                        color: #fff;
+                                    }
+
+                                    &:not(.last-link) .fa {
+                                        transform: rotate(90deg);
+                                        color: #fff;
                                     }
                                 }
                             }
                         }
                     }
                 }
+            }
+        }
 
-                .docs-top {
-                    .navbar-logo {
-                        .navbar-brand {
-                            color: #fff;
-                            text-transform: uppercase;
-                            white-space: unset;
-                        }
+        .docs-top {
+            .navbar-logo {
+                .navbar-brand {
+                    color: #fff;
+                    text-transform: uppercase;
+                    white-space: unset;
+                }
 
-                        .go-back-site {
-                            color: #fff;
-                        }
+                .go-back-site {
+                    color: #fff;
+                    text-align: center;
+                    display: block;
+                    width: 100%;
+                    background: #444;
+                    padding: 6px 0 8px;
+                    border-radius: 5px;
+                }
 
-                        .navbar-logo-desc {
-                            color: #ddd;
-                        }
-                    }
+                .navbar-logo-desc {
+                    color: #ddd;
                 }
             }
         }
     }
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@media (min-width: 1100px) {
+    .container {
+        max-width: 1080px;
+    }
+
+}
+
 @media (min-width: 1366px) {
     .container {
         max-width: 1340px;
@@ -720,7 +754,7 @@ body {
                     left: 0;
                     width: 100%;
                     z-index: 100;
-                    background: #f5f7f9;
+                    background: #1d1d1d;
                     display: none;
 
                     .docs-filter {
@@ -732,17 +766,6 @@ body {
                 }
 
                 .docs-version {
-                    label {
-                        width: 36px;
-                        text-align: center;
-                        padding-left: 0;
-                        padding-right: 0;
-                        display: inline-block;
-                        line-height: 26px;
-                    }
-                    input.form-control {
-                        padding-left: 12px !important;
-                    }
                 }
             }
 
@@ -754,11 +777,11 @@ body {
                     text-align: center;
 
                     .navbar-brand {
-                        font-size: 1.5rem;
+                        font-size: 1.25rem;
                         font-weight: 700;
                         display: block;
                         margin-right: 0em;
-                        padding: 7px 0 10px;
+                        padding: 10px 0 15px;
                         text-transform: uppercase;
 
                         .docs-logo {
@@ -971,6 +994,7 @@ div.code-toolbar > .toolbar a {
             background-color: #bddcfd;
             border: 1px solid #bddcfd;
 
+
             @media screen and (max-width: 1366px) {
                 display: none;
             }
@@ -1009,4 +1033,5 @@ div.code-toolbar > .toolbar a {
             display: none;
         }
     }
-}
\ No newline at end of file
+}
+ 
\ No newline at end of file