From 337e59b918c8179e15d7add25d9a8a6987db5c82 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: Mon, 1 Oct 2018 18:52:23 +0300
Subject: [PATCH] docs

---
 .../Helpers/TagHelpers/TreeTagHelper.cs       |  15 +-
 .../Pages/Documents/Project/Index.cshtml      |   7 +-
 .../Volo.Docs.Web/Pages/Documents/_docs.css   | 184 ++++++++++--------
 .../Pages/Documents/_docs.min.css             |   2 +-
 .../Volo.Docs.Web/Pages/Documents/_docs.scss  | 160 ++++++++-------
 .../src/Volo.Docs.Web/Pages/Documents/vs.css  | 184 ++++++++++--------
 .../src/Volo.Docs.Web/Pages/Documents/vs.js   |  60 ++++--
 .../Volo.Docs.Web/Pages/Documents/vs.min.css  |   2 +-
 8 files changed, 340 insertions(+), 274 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Areas/Documents/Helpers/TagHelpers/TreeTagHelper.cs b/modules/docs/src/Volo.Docs.Web/Areas/Documents/Helpers/TagHelpers/TreeTagHelper.cs
index bfba3edcb9..bd3d6c6e65 100644
--- a/modules/docs/src/Volo.Docs.Web/Areas/Documents/Helpers/TagHelpers/TreeTagHelper.cs
+++ b/modules/docs/src/Volo.Docs.Web/Areas/Documents/Helpers/TagHelpers/TreeTagHelper.cs
@@ -9,15 +9,12 @@ namespace Volo.Docs.Areas.Documents.Helpers.TagHelpers
     [HtmlTargetElement("ul", Attributes = "root-node")]
     public class TreeTagHelper : TagHelper
     {
-        private const string LiItemTemplate = @"<li class='{6}'>
-                                                  <label class='tree-toggle {3}'>
-                                                      <span class='plus-icon'>
-                                                            <i class='fa fa-{4}'></i>
-                                                      </span>
-                                                  </label>
-                                                  <a href='{0}' class='{5}'>{1}</a>
+        private const string LiItemTemplate = @"<li class='{6}'> 
+                                                  <a href='{0}' class='{5}'> 
+                                                      <span class='plus-icon {3}'><i class='fa fa-{4}'></i></span>{1}
+                                                  </a>
                                                   {2}
-                                              </li>";
+                                                </li>";
 
         private const string UlItemTemplate = @"<ul class='nav nav-list tree' style='{1}'>
                                                     {0}
@@ -112,7 +109,7 @@ namespace Volo.Docs.Areas.Documents.Helpers.TagHelpers
                 node.Text.IsNullOrEmpty() ? "?" : node.Text,
                 content,
                 node.HasChildItems ? "nav-header" : "last-link",
-                node.HasChildItems ? "chevron-down" : "long-arrow-right",
+                node.HasChildItems ? "chevron-right" : "long-arrow-right",
                 anchorCss,
                 isNodeSelected ? "selected-tree" : "");
         }
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 6655141126..ec0696759c 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
@@ -21,9 +21,8 @@
         <abp-style src="/lib/bootstrap-toc/bootstrap-toc.css" />
     </abp-style-bundle>
 }
-
 @section scripts {
-    <abp-script-bundle name="@typeof(IndexModel).FullName">
+    <abp-script-bundle name="@typeof(IndexModel).FullName"> 
         <abp-script src="/lib/anchor-js/anchor.js" />
         <abp-script src="/Pages/Documents/Project/index.js" />
         <abp-script src="/lib/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js" />
@@ -133,8 +132,8 @@
         <div class="col-md-2 docs-page-index position-relative bg-light">
 
             <div class="docs-inner-anchors mt-2">
-                <nav class="navbar p-0 pt-2" data-toggle="toc">
-                    <h5>@L["InThisDocument"]</h5>
+                <h5>@L["InThisDocument"]</h5>
+                <nav id="docs-sticky-index" class="navbar">
                 </nav>
 
                 <div class="row">
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.css
index cc3a21bc38..d1fed628b0 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.css
@@ -1,4 +1,7 @@
-.docs-page {
+body {
+  position: relative; }
+
+.docs-page {
   background: #f5f7f9; }
   .docs-page .anchorjs-link {
     transition: all .25s linear; }
@@ -57,68 +60,64 @@
           line-height: 1.5; }
           .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 > ul {
-        display: block;
-        height: calc(100vh - 190px); }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul {
-        font-size: .913em;
-        list-style: none;
-        padding: 0 1rem;
-        margin: 0; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li {
-          margin-left: 0px;
-          padding-left: 24px;
+      .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;
-          width: 100%;
-          position: relative; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label {
-            margin: 0; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle {
-              transition: .3s;
-              display: inline-block;
-              width: 18px;
-              height: 18px;
-              text-align: center;
-              padding: 0;
-              line-height: 1;
-              border-radius: 50%;
-              margin-right: 4px;
-              position: absolute;
-              left: 2px;
-              top: 8px;
-              color: #aaa;
-              cursor: pointer; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:hover {
-                color: #000; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle .plus-icon {
-                font-size: .85em; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened {
-                transform: rotate(-90deg);
-                color: #000; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link {
-                top: 9px;
-                color: #aaa; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a {
-            color: #222;
-            font-weight: 700;
-            padding: 7px 0;
+          height: calc(100vh - 210px); }
+        .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: 0px;
+            padding-left: 24px;
             display: block;
-            border-bottom: 1px solid #eeeff3; }
-            .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 ul {
-            padding: 0; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li label.tree-toggle {
-              top: 7px; }
-            .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 {
+            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: 1px solid #eeeff3; }
+              .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 .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: pointer; }
+                .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
+                  top: 11px;
+                  color: #aaa; }
+            .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 ul li a {
-                font-weight: 300; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
-            color: #38003c;
-            font-weight: bold; }
+              .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 > a span .fa {
+                color: #000; }
+              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa {
+                transform: rotate(90deg);
+                color: #000; }
     .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
       font-size: 1.5rem;
       color: #000;
@@ -156,7 +155,7 @@
         color: #444;
         text-decoration: none; }
   .docs-page .docs-content .docs-text-field {
-    padding: 0 2rem 2rem; }
+    padding: 2rem; }
   .docs-page .docs-content article.docs-body h1 {
     padding-top: 2rem;
     font-size: 2.25rem;
@@ -197,28 +196,30 @@
       font-size: .90em;
       height: 100vh; }
       .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
-        font-size: .95em;
-        margin-left: 18px;
-        border-left: 1px solid #e5e5e5; }
+        font-size: .96em;
+        margin-left: 15px;
+        border-left: 1px solid #eee; }
         .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link {
-          padding: .2rem 0rem .2rem 1rem;
+          padding: 5px 14px 6px;
           color: #aaa;
-          line-height: 1.1;
+          line-height: 1.2;
           position: relative;
-          border-left: 3px solid transparent;
+          border-left: 1px solid #eee;
           border-radius: 0;
-          margin-left: -2px;
-          margin-top: 2px;
-          margin-bottom: 2px;
+          margin-left: -1px;
+          margin-top: 1px;
+          margin-bottom: 1px;
           transition: .2s; }
           .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active {
+            border-left: 2px solid #007bff;
             background: none;
-            color: #000;
-            border-color: #000; }
+            color: #007bff; }
         .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active {
-          color: #000; }
+          color: #007bff; }
         .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active {
-          color: #000; }
+          color: #007bff; }
+      .docs-page .docs-page-index .docs-inner-anchors > .navbar {
+        margin-left: -30px; }
       .docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper {
         max-width: 300px;
         float: left; }
@@ -252,21 +253,36 @@
       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 label.tree-toggle {
-      color: #666; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:hover {
-        color: #fff; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened {
-        color: #fff; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link {
-        color: #666; }
     .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a {
-      color: #ddd;
+      color: #aaa;
       border-bottom: 1px solid #333; }
       .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: 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.selected-tree > a {
-      color: #fff; }
+      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; }
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.min.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.min.css
index d63a7df95b..82f624f0f1 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.min.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.min.css
@@ -1 +1 @@
-.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;}.docs-page .anchorjs-link:hover{color:#2500ad;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;padding-left:36px;width:100%;background:#eeeff2;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:.5rem 0 1rem;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select{padding:1px;border-radius:8px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{line-height:1;border-top-left-radius:0;border-bottom-left-radius:0;padding:.3em .5em .5em;}.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{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter{position:relative;padding:0 1rem;margin:.5rem 0;font-size:.9em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon{position:absolute;top:0;padding:8px 10px;line-height:1;left:16px;background:none;padding:.375rem .75rem;font-size:1rem;line-height:1.5;}.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>ul{display:block;height:calc(100vh - 190px);}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul{font-size:.913em;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 label{margin:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle{transition:.3s;display:inline-block;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:8px;color:#aaa;cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:hover{color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle .plus-icon{font-size:.85em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened{transform:rotate(-90deg);color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link{top:9px;color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#222;font-weight:700;padding:7px 0;display:block;border-bottom:1px solid #eeeff3;}.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 ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li label.tree-toggle{top:7px;}.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:#38003c;font-weight:bold;}.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:.9rem;opacity:.6;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#000;opacity:.15;transition:.4s;font-size:.75rem;font-weight:300;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover{text-decoration:none;opacity:.5;}.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 .docs-link-btns{border-bottom:1px solid #f4f5f7;background:#fdfdfd;padding:10px 20px;margin:0 -15px;text-align:right;font-size:.8em;}.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-text-field{padding:0 2rem 2rem;}.docs-page .docs-content article.docs-body h1{padding-top:2rem;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 img{max-width:100%;border:1px solid #f4f5f7;margin:15px 0 25px;box-shadow:0 0 45px #f8f9fa;border-radius:6px;}.docs-page .docs-page-index{position:relative;}.docs-page .docs-page-index .docs-inner-anchors{position:fixed;top:0;max-width:270px;padding:10px;font-size:.9em;height:100vh;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills{font-size:.95em;margin-left:18px;border-left:1px solid #e5e5e5;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link{padding:.2rem 0 .2rem 1rem;color:#aaa;line-height:1.1;position:relative;border-left:3px solid transparent;border-radius:0;margin-left:-2px;margin-top:2px;margin-bottom:2px;transition:.2s;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active{background:none;color:#000;border-color:#000;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active{color:#000;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active{color:#000;}.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:#222;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{background:#333;border-color:#333;color:#999;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select label{background:#444;border-color:#444;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 label.tree-toggle{color:#666;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:hover{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link{color:#666;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#ddd;border-bottom:1px solid #333;}.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.selected-tree>a{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .navbar-brand{color:#fff;text-transform:uppercase;}.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{position:relative;padding:0 0 1rem !important;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter .filter-icon{left:0;}.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;}
\ 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;}.docs-page .anchorjs-link:hover{color:#2500ad;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;padding-left:36px;width:100%;background:#eeeff2;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:.5rem 0 1rem;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select{padding:1px;border-radius:8px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{line-height:1;border-top-left-radius:0;border-bottom-left-radius:0;padding:.3em .5em .5em;}.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{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter{position:relative;padding:0 1rem;margin:.5rem 0;font-size:.9em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon{position:absolute;top:0;padding:8px 10px;line-height:1;left:16px;background:none;padding:.375rem .75rem;font-size:1rem;line-height:1.5;}.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 - 210px);}.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:1px solid #eeeff3;}.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 .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:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link{top:11px;color:#aaa;}.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>a span .fa{color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span:not(.last-link) .fa{transform:rotate(90deg);color:#000;}.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:.9rem;opacity:.6;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#000;opacity:.15;transition:.4s;font-size:.75rem;font-weight:300;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover{text-decoration:none;opacity:.5;}.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 .docs-link-btns{border-bottom:1px solid #f4f5f7;background:#fdfdfd;padding:10px 20px;margin:0 -15px;text-align:right;font-size:.8em;}.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-text-field{padding:2rem;}.docs-page .docs-content article.docs-body h1{padding-top:2rem;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 img{max-width:100%;border:1px solid #f4f5f7;margin:15px 0 25px;box-shadow:0 0 45px #f8f9fa;border-radius:6px;}.docs-page .docs-page-index{position:relative;}.docs-page .docs-page-index .docs-inner-anchors{position:fixed;top:0;max-width:270px;padding:10px;font-size:.9em;height:100vh;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills{font-size:.96em;margin-left:15px;border-left:1px solid #eee;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link{padding:5px 14px 6px;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;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active{border-left:2px solid #007bff;background:none;color:#007bff;}.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>.navbar{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:#222;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{background:#333;border-color:#333;color:#999;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select label{background:#444;border-color:#444;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:1px solid #333;}.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: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.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;}.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{position:relative;padding:0 0 1rem !important;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter .filter-icon{left:0;}.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;}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.scss
index 4cd2ca0fbf..3febd8246c 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.scss
@@ -1,4 +1,6 @@
-
+body {
+    position: relative;
+}
 .docs-page {
     background: rgb(245, 247, 249);
 
@@ -89,13 +91,15 @@
             }
 
             .docs-tree-list {
+                height: 100vh;
+
                 > ul {
                     display: block;
-                    height: calc(100vh - 190px);
+                    height: calc(100vh - 210px);
                 }
 
                 ul {
-                    font-size: .913em;
+                    font-size: .935em;
                     list-style: none;
                     padding: 0 1rem;
                     margin: 0;
@@ -107,12 +111,21 @@
                         width: 100%;
                         position: relative;
 
-                        label {
-                            margin: 0;
 
-                            &.tree-toggle {
+                        a {
+                            color: #999;
+                            font-weight: 700;
+                            padding: 7px 0;
+                            display: block;
+                            border-bottom: 1px solid #eeeff3;
+
+                            &:hover {
+                                color: #000;
+                            }
+
+                            .plus-icon {
+                                font-size: .85em;
                                 transition: .3s;
-                                display: inline-block;
                                 width: 18px;
                                 height: 18px;
                                 text-align: center;
@@ -122,51 +135,22 @@
                                 margin-right: 4px;
                                 position: absolute;
                                 left: 2px;
-                                top: 8px;
+                                top: 11px;
                                 color: #aaa;
                                 cursor: pointer;
 
-                                &:hover {
-                                    color: #000;
-                                }
-
-                                .plus-icon {
-                                    font-size: .85em;
-                                }
-
-                                &:not(.last-link).opened {
-                                    transform: rotate(-90deg);
-                                    color: #000;
-                                }
-
                                 &.last-link {
-                                    top: 9px;
+                                    top: 11px;
                                     color: #aaa;
                                 }
                             }
                         }
 
-                        a {
-                            color: #222;
-                            font-weight: 700;
-                            padding: 7px 0;
-                            display: block;
-                            border-bottom: 1px solid #eeeff3;
-
-                            &:hover {
-                                color: #000;
-                            }
-                        }
 
                         ul {
                             padding: 0;
 
                             li {
-                                label {
-                                    &.tree-toggle {
-                                        top: 7px;
-                                    }
-                                }
 
                                 a {
                                     font-weight: 400;
@@ -186,8 +170,19 @@
 
                         &.selected-tree {
                             > a {
-                                color: #38003c;
-                                font-weight: bold;
+                                color: #000;
+                                transition: .4s;
+
+                                span {
+                                    .fa {
+                                        color: #000;
+                                    }
+
+                                    &:not(.last-link) .fa {
+                                        transform: rotate(90deg);
+                                        color: #000;
+                                    }
+                                }
                             }
                         }
                     }
@@ -256,7 +251,7 @@
         }
 
         .docs-text-field {
-            padding: 0 2rem 2rem;
+            padding: 2rem;
         }
 
         article.docs-body {
@@ -321,40 +316,40 @@
 
             .navbar {
                 .nav-pills {
-                    font-size: .95em;
-                    margin-left: 18px;
-                    border-left: 1px solid #e5e5e5;
+                    font-size: .96em;
+                    margin-left: 15px;
+                    border-left: 1px solid #eee;
 
                     .nav-link {
-                        padding: .2rem 0rem .2rem 1rem;
+                        padding: 5px 14px 6px;
                         color: #aaa;
-                        line-height: 1.1;
+                        line-height: 1.2;
                         position: relative;
-                        border-left: 3px solid transparent;
+                        border-left: 1px solid #eee;
                         border-radius: 0;
-                        margin-left: -2px;
-                        margin-top: 2px;
-                        margin-bottom: 2px;
+                        margin-left: -1px;
+                        margin-top: 1px;
+                        margin-bottom: 1px;
                         transition: .2s;
 
                         &.active {
+                            border-left: 2px solid #007bff;
                             background: none;
-                            color: #000;
-                            border-color: #000;
+                            color: #007bff;
                         }
                     }
 
                     .nav-pills {
                         .nav-link {
                             &.active {
-                                color: #000;
+                                color: #007bff;
                             }
                         }
 
                         .nav-pills {
                             .nav-link {
                                 &.active {
-                                    color: #000;
+                                    color: #007bff;
                                 }
                             }
                         }
@@ -363,6 +358,7 @@
             }
 
             > .navbar {
+                margin-left: -30px;
             }
 
             .docs-anchors-wrapper {
@@ -435,39 +431,55 @@
                     .docs-tree-list {
                         ul {
                             li {
-                                label {
-                                    &.tree-toggle {
-                                        color: #666;
-
-                                        &:hover {
-                                            color: #fff;
-                                        }
 
-                                        .plus-icon {
-                                        }
-
-                                        &:not(.last-link).opened {
-                                            color: #fff;
-                                        }
-
-                                        &.last-link {
-                                            color: #666;
-                                        }
-                                    }
-                                }
 
                                 a {
-                                    color: #ddd;
+                                    color: #aaa; 
                                     border-bottom: 1px solid #333;
 
                                     &:hover {
                                         color: #fff;
                                     }
+
+                                    .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: pointer;
+
+                                        &.last-link {
+                                            top: 11px; 
+                                        }
+                                    }
                                 }
 
+                                 
+
                                 &.selected-tree {
                                     > a {
                                         color: #fff;
+                                        transition: .4s;
+
+                                        span {
+                                            .fa {
+                                                color: #fff;
+                                            }
+
+                                            &:not(.last-link) .fa {
+                                                transform: rotate(90deg);
+                                                color: #fff;
+                                            }
+                                        }
                                     }
                                 }
                             }
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.css
index 9475243feb..6b90899778 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.css
@@ -1,4 +1,7 @@
-.docs-page {
+body {
+  position: relative; }
+
+.docs-page {
   background: #f5f7f9; }
   .docs-page .anchorjs-link {
     transition: all .25s linear; }
@@ -57,68 +60,64 @@
           line-height: 1.5; }
           .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 > ul {
-        display: block;
-        height: calc(100vh - 190px); }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul {
-        font-size: .913em;
-        list-style: none;
-        padding: 0 1rem;
-        margin: 0; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li {
-          margin-left: 0px;
-          padding-left: 24px;
+      .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;
-          width: 100%;
-          position: relative; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label {
-            margin: 0; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle {
-              transition: .3s;
-              display: inline-block;
-              width: 18px;
-              height: 18px;
-              text-align: center;
-              padding: 0;
-              line-height: 1;
-              border-radius: 50%;
-              margin-right: 4px;
-              position: absolute;
-              left: 2px;
-              top: 8px;
-              color: #aaa;
-              cursor: pointer; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:hover {
-                color: #000; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle .plus-icon {
-                font-size: .85em; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened {
-                transform: rotate(-90deg);
-                color: #000; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link {
-                top: 9px;
-                color: #aaa; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a {
-            color: #222;
-            font-weight: 700;
-            padding: 7px 0;
+          height: calc(100vh - 210px); }
+        .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: 0px;
+            padding-left: 24px;
             display: block;
-            border-bottom: 1px solid #eeeff3; }
-            .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 ul {
-            padding: 0; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li label.tree-toggle {
-              top: 7px; }
-            .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 {
+            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: 1px solid #eeeff3; }
+              .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 .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: pointer; }
+                .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
+                  top: 11px;
+                  color: #aaa; }
+            .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 ul li a {
-                font-weight: 300; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
-            color: #38003c;
-            font-weight: bold; }
+              .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 > a span .fa {
+                color: #000; }
+              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa {
+                transform: rotate(90deg);
+                color: #000; }
     .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
       font-size: 1.5rem;
       color: #000;
@@ -156,7 +155,7 @@
         color: #444;
         text-decoration: none; }
   .docs-page .docs-content .docs-text-field {
-    padding: 0 2rem 2rem; }
+    padding: 2rem; }
   .docs-page .docs-content article.docs-body h1 {
     padding-top: 2rem;
     font-size: 2.25rem;
@@ -197,28 +196,30 @@
       font-size: .90em;
       height: 100vh; }
       .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
-        font-size: .95em;
-        margin-left: 18px;
-        border-left: 1px solid #e5e5e5; }
+        font-size: .96em;
+        margin-left: 15px;
+        border-left: 1px solid #eee; }
         .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link {
-          padding: .2rem 0rem .2rem 1rem;
+          padding: 5px 14px 6px;
           color: #aaa;
-          line-height: 1.1;
+          line-height: 1.2;
           position: relative;
-          border-left: 3px solid transparent;
+          border-left: 1px solid #eee;
           border-radius: 0;
-          margin-left: -2px;
-          margin-top: 2px;
-          margin-bottom: 2px;
+          margin-left: -1px;
+          margin-top: 1px;
+          margin-bottom: 1px;
           transition: .2s; }
           .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active {
+            border-left: 2px solid #007bff;
             background: none;
-            color: #000;
-            border-color: #000; }
+            color: #007bff; }
         .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active {
-          color: #000; }
+          color: #007bff; }
         .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active {
-          color: #000; }
+          color: #007bff; }
+      .docs-page .docs-page-index .docs-inner-anchors > .navbar {
+        margin-left: -30px; }
       .docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper {
         max-width: 300px;
         float: left; }
@@ -252,21 +253,36 @@
       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 label.tree-toggle {
-      color: #666; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:hover {
-        color: #fff; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened {
-        color: #fff; }
-      .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link {
-        color: #666; }
     .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a {
-      color: #ddd;
+      color: #aaa;
       border-bottom: 1px solid #333; }
       .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: 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.selected-tree > a {
-      color: #fff; }
+      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; }
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.js b/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.js
index 8c5904c31e..f2c81d748e 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.js
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.js
@@ -1,6 +1,6 @@
 $('.tree-toggle').click(function () {
     $(this).parent().children('ul.tree').toggle(100);
-    $(this).toggleClass("opened");
+    $(this).closest("li").toggleClass("selected-tree");
 });
 
 $(document).ready(function () {
@@ -23,30 +23,31 @@ $(document).ready(function () {
             scrollTop: 0
         }, 500);
         return false;
-    });
+    }); 
+     
 });
 
-
-$(function () {
+$(document).ready(function () {
     var navSelector = '#docs-sticky-index';
     var $myNav = $(navSelector);
-    Toc.init($myNav);
+    Toc.init($myNav); 
     $('body').scrollspy({
-        target: navSelector
+        target: $myNav
+    });
+    $("#docs-sticky-index a").on('click', function (event) {
+        if (this.hash !== "") {
+            event.preventDefault();
+            var hash = this.hash;
+            $('html, body').animate({
+                scrollTop: $(hash).offset().top
+            }, 500, function () {
+                window.location.hash = hash;
+            });
+        }
     });
 });
 
-$("#docs-sticky-index a").on('click', function (event) {
-    if (this.hash !== "") {
-        event.preventDefault();
-        var hash = this.hash;
-        $('html, body').animate({
-            scrollTop: $(hash).offset().top
-        }, 800, function () {
-            window.location.hash = hash;
-        });
-    }
-});
+
 
 $('.btn-toggle').on("click", function () {
     $(".toggle-row").slideToggle(400);
@@ -76,5 +77,30 @@ $('.open-dmenu').on("click", function () {
         });
     });
 
+
+
+    window.Toc.helpers.createNavList = function() {
+        return $('<ul class="nav nav-pills flex-column"></ul>');
+    };
+
+    window.Toc.helpers.createChildNavList = function($parent) {
+        var $childList = this.createNavList();
+        $parent.append($childList);
+        return $childList;
+    };
+
+    window.Toc.helpers.generateNavEl = function(anchor, text) {
+        var $a = $('<a class="nav-link"></a>');
+        $a.attr('href', '#' + anchor);
+        $a.text(text);
+        var $li = $('<li class="nav-item"></li>');
+        $li.append($a);
+        return $li;
+    };
+
+
 })(jQuery);
 
+
+
+
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.min.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.min.css
index 8f0c5eb21f..6fe16972c2 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.min.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.min.css
@@ -1 +1 @@
-.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;}.docs-page .anchorjs-link:hover{color:#2500ad;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;padding-left:36px;width:100%;background:#eeeff2;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:.5rem 0 1rem;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select{padding:1px;border-radius:8px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{line-height:1;border-top-left-radius:0;border-bottom-left-radius:0;padding:.3em .5em .5em;}.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{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter{position:relative;padding:0 1rem;margin:.5rem 0;font-size:.9em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon{position:absolute;top:0;padding:8px 10px;line-height:1;left:16px;background:none;padding:.375rem .75rem;font-size:1rem;line-height:1.5;}.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>ul{display:block;height:calc(100vh - 190px);}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul{font-size:.913em;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 label{margin:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle{transition:.3s;display:inline-block;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:8px;color:#aaa;cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:hover{color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle .plus-icon{font-size:.85em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened{transform:rotate(-90deg);color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link{top:9px;color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#222;font-weight:700;padding:7px 0;display:block;border-bottom:1px solid #eeeff3;}.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 ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li label.tree-toggle{top:7px;}.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:#38003c;font-weight:bold;}.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:.9rem;opacity:.6;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#000;opacity:.15;transition:.4s;font-size:.75rem;font-weight:300;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover{text-decoration:none;opacity:.5;}.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 .docs-link-btns{border-bottom:1px solid #f4f5f7;background:#fdfdfd;padding:10px 20px;margin:0 -15px;text-align:right;font-size:.8em;}.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-text-field{padding:0 2rem 2rem;}.docs-page .docs-content article.docs-body h1{padding-top:2rem;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 img{max-width:100%;border:1px solid #f4f5f7;margin:15px 0 25px;box-shadow:0 0 45px #f8f9fa;border-radius:6px;}.docs-page .docs-page-index{position:relative;}.docs-page .docs-page-index .docs-inner-anchors{position:fixed;top:0;max-width:270px;padding:10px;font-size:.9em;height:100vh;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills{font-size:.95em;margin-left:18px;border-left:1px solid #e5e5e5;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link{padding:.2rem 0 .2rem 1rem;color:#aaa;line-height:1.1;position:relative;border-left:3px solid transparent;border-radius:0;margin-left:-2px;margin-top:2px;margin-bottom:2px;transition:.2s;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active{background:none;color:#000;border-color:#000;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active{color:#000;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active{color:#000;}.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:#222;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{background:#333;border-color:#333;color:#999;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select label{background:#444;border-color:#444;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 label.tree-toggle{color:#666;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:hover{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link{color:#666;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#ddd;border-bottom:1px solid #333;}.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.selected-tree>a{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .navbar-brand{color:#fff;text-transform:uppercase;}.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{position:relative;padding:0 0 1rem !important;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter .filter-icon{left:0;}.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;}@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;}.jumbotron .btn,footer .btn{display:block;margin-bottom:10px;}.multi-tenancy{text-align:center !important;}.section-with-logos img{margin:15px;opacity:1;-webkit-filter:grayscale(0%);filter:grayscale(0%);}.jumbotron{padding-top:160px;margin-top:-160px;border-radius:0;padding-bottom:40px;margin-bottom:0;font-size:.85em;padding-left:45px;padding-right:45px;}.jumbotron .jumbotron-logo{display:none;}span.code-arrow{padding:0 0 0;display:block;transform:rotate(90deg);font-size:2em;}.mb-5,.my-5{margin-bottom:2rem !important;}}
\ 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;}.docs-page .anchorjs-link:hover{color:#2500ad;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;padding-left:36px;width:100%;background:#eeeff2;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:.5rem 0 1rem;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select{padding:1px;border-radius:8px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{line-height:1;border-top-left-radius:0;border-bottom-left-radius:0;padding:.3em .5em .5em;}.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{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter{position:relative;padding:0 1rem;margin:.5rem 0;font-size:.9em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon{position:absolute;top:0;padding:8px 10px;line-height:1;left:16px;background:none;padding:.375rem .75rem;font-size:1rem;line-height:1.5;}.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 - 210px);}.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:1px solid #eeeff3;}.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 .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:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link{top:11px;color:#aaa;}.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>a span .fa{color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span:not(.last-link) .fa{transform:rotate(90deg);color:#000;}.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:.9rem;opacity:.6;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#000;opacity:.15;transition:.4s;font-size:.75rem;font-weight:300;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover{text-decoration:none;opacity:.5;}.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 .docs-link-btns{border-bottom:1px solid #f4f5f7;background:#fdfdfd;padding:10px 20px;margin:0 -15px;text-align:right;font-size:.8em;}.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-text-field{padding:2rem;}.docs-page .docs-content article.docs-body h1{padding-top:2rem;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 img{max-width:100%;border:1px solid #f4f5f7;margin:15px 0 25px;box-shadow:0 0 45px #f8f9fa;border-radius:6px;}.docs-page .docs-page-index{position:relative;}.docs-page .docs-page-index .docs-inner-anchors{position:fixed;top:0;max-width:270px;padding:10px;font-size:.9em;height:100vh;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills{font-size:.96em;margin-left:15px;border-left:1px solid #eee;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link{padding:5px 14px 6px;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;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active{border-left:2px solid #007bff;background:none;color:#007bff;}.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>.navbar{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:#222;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{background:#333;border-color:#333;color:#999;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select label{background:#444;border-color:#444;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:1px solid #333;}.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: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.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;}.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{position:relative;padding:0 0 1rem !important;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter .filter-icon{left:0;}.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;}@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;}.jumbotron .btn,footer .btn{display:block;margin-bottom:10px;}.multi-tenancy{text-align:center !important;}.section-with-logos img{margin:15px;opacity:1;-webkit-filter:grayscale(0%);filter:grayscale(0%);}.jumbotron{padding-top:160px;margin-top:-160px;border-radius:0;padding-bottom:40px;margin-bottom:0;font-size:.85em;padding-left:45px;padding-right:45px;}.jumbotron .jumbotron-logo{display:none;}span.code-arrow{padding:0 0 0;display:block;transform:rotate(90deg);font-size:2em;}.mb-5,.my-5{margin-bottom:2rem !important;}}
\ No newline at end of file