New Docs experience

trilbymedia · Jul 19, 2017 · ad7ee1b · ad7ee1b
1 parent ef7586b
commit ad7ee1b
Show file tree

Hide file tree

Showing 13 changed files with 1,718 additions and 634 deletions.
diff --git a/docs/components.html b/docs/components.html
diff --git a/docs/css/docs.css b/docs/css/docs.css
@@ -17,6 +17,15 @@
   position: relative;
   z-index: 300;
 }
+.section-footer {
+  color: #acb3c2;
+  padding: 25px 15px 10px 15px;
+  position: relative;
+  z-index: 200;
+}
+.section-footer a {
+  color: #727e96;
+}
 .grid-header .navbar {
   height: 40px;
 }
@@ -28,6 +37,7 @@
 }
 .grid-header .btn-link {
   color: #5b657a;
+  margin-left: -5px;
   padding-left: 6px;
   padding-right: 6px;
 }
@@ -69,12 +79,9 @@
   font-size: 18px;
   margin-bottom: 0;
 }
-.grid-footer {
-  color: #acb3c2;
-  padding: 20px 0 10px 0;
-}
-.grid-footer a {
-  color: #727e96;
+.docs-container {
+  height: 100%;
+  overflow: auto;
 }
 .docs-content {
   padding-top: 0;
@@ -89,6 +96,7 @@
   height: 0;
   margin-left: -1em;
   overflow: hidden;
+  padding: 0 4px;
   position: absolute;
   width: 0;
 }
@@ -194,25 +202,33 @@
   -webkit-filter: grayscale(75%);
   filter: grayscale(75%);
 }
+.docs-sidebar {
+  width: 240px;
+}
+.docs-sidebar .accordion input:checked ~ .accordion-header {
+  font-weight: bold;
+}
+.docs-sidebar .accordion .menu .menu-item > a {
+  padding-left: 16px;
+}
 @media screen and (min-width: 601px) {
   .section-header .navbar-section {
     padding: 0 5px;
   }
   .docs-sidebar {
-    padding: 70px 10px 50px 10px;
+    padding: 70px 10px 30px 10px;
+    position: relative;
   }
   .docs-sidebar .docs-nav {
-    position: relative;
+    bottom: 30px;
+    height: calc(100vh - 120px);
+    overflow-y: auto;
+    position: fixed;
+    top: 90px;
+    width: 240px;
   }
-  @supports ((position: -webkit-sticky) or (position: sticky)) {
-    .docs-sidebar .docs-nav {
-      position: sticky;
-      position: -webkit-sticky;
-      top: 80px;
-    }
-    .docs-sidebar .docs-nav .nav-item a:focus {
-      box-shadow: none;
-    }
+  .docs-content {
+    width: calc(100% - 240px);
   }
 }
 .docs-nav-clear {
@@ -239,7 +255,6 @@
     transition: transform .2s ease, -webkit-transform .2s ease;
     transition: transform .2s ease;
     transition: -webkit-transform .2s ease;
-    width: 240px;
     z-index: 400;
   }
   .docs-sidebar:target {

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -1797,24 +1797,24 @@ code {
   -webkit-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
-  transition: all .25s ease;
+  transition: all .2s ease;
 }
 .accordion .accordion-item input:checked ~ .accordion-body {
   max-height: 1000px;
-  transition: max-height 3s ease;
+  transition: max-height 2s ease;
 }
 .accordion .accordion-item .accordion-header {
   display: block;
-  padding: 10px;
+  padding: 4px 8px;
 }
 .accordion .accordion-item .accordion-header .icon {
-  transition: all .25s ease;
+  transition: all .2s ease;
 }
 .accordion .accordion-item .accordion-body {
   margin-bottom: 10px;
   max-height: 0;
   overflow: hidden;
-  transition: max-height .3s ease;
+  transition: max-height .2s ease;
 }
 .form-autocomplete {
   position: relative;
@@ -2146,7 +2146,7 @@ code {
   list-style: none;
   margin: 0;
   min-width: 180px;
-  padding: 10px;
+  padding: 8px;
   -webkit-transform: translateY(5px);
   -ms-transform: translateY(5px);
   transform: translateY(5px);
@@ -2166,6 +2166,7 @@ code {
 }
 .menu .menu-item > a {
   border-radius: 2px;
+  box-shadow: none;
   color: inherit;
   display: block;
   margin: 0 -8px;
@@ -2174,11 +2175,12 @@ code {
 }
 .menu .menu-item > a:focus,
 .menu .menu-item > a:hover {
+  background: #fbfbfe;
   color: #5764c6;
 }
 .menu .menu-item > a:active,
 .menu .menu-item > a.active {
-  background: #fbfbfe;
+  background: #eff1fa;
   color: #5764c6;
 }
 .menu .menu-badge {
@@ -2344,9 +2346,10 @@ code {
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
+  padding: 4px 0;
 }
 .pagination .page-item {
-  margin: 10px 1px;
+  margin: 4px 1px;
 }
 .pagination .page-item span {
   display: inline-block;

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css