feat(ngdocs): support popover, foldouts and foldover annotations

2 files changed, 182 insertions, 0 deletions

diff --git a/docs/src/templates/css/animations.css b/docs/src/templates/css/animations.css
index d8c983a3..2d54bbfb 100644
--- a/docs/src/templates/css/animations.css
+++ b/docs/src/templates/css/animations.css
@@ -79,3 +79,26 @@
   -o-transition: color 0 ease-in; /* opera is special :) */
   transition: none;
 }
+
+.foldout-show, .foldout-enter, .foldout-hide {
+  -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+}
+
+.foldout-show, .foldout-enter {
+  opacity:0;
+}
+
+.foldout-show.foldout-show-active, .foldout-hide.foldout-hide-active {
+  opacity:1;
+}
+
+.foldout-hide {
+  opacity:1;
+}
+
+.foldout-hide.foldout-hide-active {
+  opacity:0;
+}
diff --git a/docs/src/templates/css/docs.css b/docs/src/templates/css/docs.css
index a98f7429..1b87c551 100644
--- a/docs/src/templates/css/docs.css
+++ b/docs/src/templates/css/docs.css
@@ -303,3 +303,162 @@ ul.events > li > h3 {
   top:0;
   right:0;
 }
+
+.nocode-content {
+  cursor:pointer;
+  display:inline-block;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+
+  -webkit-transition:0.5s linear all;
+  -moz-transition:0.5s linear all;
+  -o-transition:0.5s linear all;
+  transition:0.5s linear all;
+  color: #223f7a;
+  background:#ddd;
+  border: 1px solid #ccc;
+}
+
+.nocode-content:hover {
+  background-color: #99c2ff;
+  border: 1px solid #e1e1e8;
+}
+
+.popover-incode .popover-inner {
+  width:auto;
+  min-width:200px;
+  max-width:500px;
+}
+
+.popover-incode {
+  -webkit-transition:0.2s linear opacity;
+  -moz-transition:0.2s linear opacity;
+  -o-transition:0.2s linear opacity;
+  transition:0.2s linear opacity;
+  opacity:0;
+}
+
+.popover-incode.visible {
+  opacity:1;
+}
+
+.popover-incode code, 
+.popover-incode pre {
+  white-space:nowrap;
+}
+
+.popover-incode .arrow {
+  left:50px!important;
+}
+
+.foldover-content {
+  display:none;
+}
+
+.foldout:after {
+  content:"";
+  position:absolute;
+  left:50%;
+  top:-1px;
+  margin-left:-10px;
+  border-width:10px;
+  border-style:solid;
+  border-color:#f7f7f9 transparent transparent;
+}
+
+.foldout:before {
+  content:"";
+  position:absolute;
+  left:50%;
+  top:0px;
+  margin-left:-10px;
+  border-width:10px;
+  border-style:solid;
+  border-color:#bbb transparent transparent;
+}
+
+.foldout {
+  padding:8px 15px 5px;
+  position:relative;
+  background:#eee;
+  white-space:normal;
+  box-shadow:inset 0 0 20px #ccc;
+  border-top:1px solid #bbb;
+}
+
+.prettyprint {
+  padding-right:0!important;
+  padding-bottom:0!important;
+}
+
+pre ol li {
+  padding-bottom:2px;
+  padding-right:5px;
+}
+
+#docs-fold {
+  position:absolute;
+  top:0;
+  right:0;
+  width:500px;
+  min-height:100%;
+  padding-top:50px;
+  padding:50px 20px 20px 20px;
+  background:white;
+  border-left:1px solid #999;
+  box-shadow:0 0 10px #555;
+  z-index:1002;
+}
+
+#docs-fold.fold-show {
+  -webkit-transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -moz-transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -o-transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+}
+
+#docs-fold.fold-show {
+  right:-200px;
+  opacity:0;
+}
+
+#docs-fold.fold-show.fold-show-active {
+  right:0;
+  opacity:1;
+}
+
+#docs-fold-overlay {
+  background:rgba(255,255,255,0.5);
+  position:fixed;
+  left:0;
+  bottom:0;
+  right:0;
+  top:0;
+  z-index:1001;
+  cursor:pointer;
+}
+
+.fixed_body {
+  position:fixed;
+  top:0;
+  z-index:1000;
+  left:0;
+  right:0;
+}
+
+#docs-fold-close {
+  z-index: 1029;
+  position: absolute;
+  left: -30px;
+  top: 60px;
+  cursor:pointer;
+  text-align: center;
+  width:50px;
+  line-height:50px;
+  font-size: 2em;
+  background: #fff;
+  box-shadow:-6px 0 5px #555;
+  display:block;
+  border-radius:10px;
+}