Add fuzzy search to sidebar

pangolinjs · Nov 10, 2017 · d74f3a1 · d74f3a1
1 parent 33e168a
commit d74f3a1
Show file tree

Hide file tree

Showing 11 changed files with 289 additions and 82 deletions.
diff --git a/docs/css/index.scss b/docs/css/index.scss
@@ -8,3 +8,4 @@
 @import "header";
 @import "section";
 @import "sidebar";
+@import "sidebar-toggle";
diff --git a/docs/css/scaffolding.scss b/docs/css/scaffolding.scss
@@ -1,3 +1,19 @@
+.fesg-sr-only {
+  position: absolute;
+
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+
+  white-space: nowrap;
+
+  clip-path: inset(100%);
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+
 .fesg-content {
   @include fesg-reset-pseudo;
 

diff --git a/docs/css/sidebar-toggle.scss b/docs/css/sidebar-toggle.scss
@@ -0,0 +1,72 @@
+.fesg-sidebar-toggle {
+  @include fesg-reset;
+
+  position: fixed;
+  top: 0;
+  left: ($fesg-sidebar-width - 0.125rem);
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  transform: translateX(-$fesg-sidebar-width);
+
+  z-index: ($fesg-z-index-sidebar + 1);
+
+  background: $fesg-color-sidebar-button-background;
+  background: var(--fesg-color-sidebar-button-background, var(--fesg-color-primary, $fesg-color-sidebar-button-background));
+  border: none;
+  border-radius: 0;
+
+  cursor: pointer;
+
+  &.is-active {
+    transform: translateX(0);
+  }
+
+  &.is-animated {
+    transition: transform $fesg-transition-sidebar;
+  }
+}
+
+.fesg-sidebar-toggle__line {
+  @include fesg-reset;
+
+  position: absolute;
+  top: calc(50% - 0.0625rem);
+  left: 20%;
+  height: 0.125rem;
+
+  background: $fesg-color-sidebar-button-foreground;
+  background: var(--fesg-color-sidebar-button-foreground, $fesg-color-sidebar-button-foreground);
+  border-radius: 0.0625rem;
+
+  transition:
+    transform $fesg-transition-sidebar,
+    opacity $fesg-transition-sidebar;
+
+  &:nth-child(1) {
+    width: 60%;
+    transform: translateY(-0.375rem);
+
+    .is-active & {
+      transform: rotate(45deg);
+    }
+  }
+
+  &:nth-child(2) {
+    width: 45%;
+
+    .is-active & {
+      opacity: 0;
+    }
+  }
+
+  &:nth-child(3) {
+    width: 55%;
+    transform: translateY(0.375rem);
+
+    .is-active & {
+      width: 60%;
+      transform: rotate(-45deg);
+    }
+  }
+}
diff --git a/docs/css/sidebar.scss b/docs/css/sidebar.scss
@@ -1,140 +1,146 @@
-.fesg-sidebar-toggle {
+.fesg-sidebar {
   @include fesg-reset;
 
   position: fixed;
   top: 0;
-  left: ($fesg-sidebar-width - 0.125rem);
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  transform: translateX(-$fesg-sidebar-width);
+  left: 0;
+  width: $fesg-sidebar-width;
+  height: 100%;
+  padding: $fesg-sidebar-padding 0;
+  transform: translateX(-100%);
 
-  z-index: ($fesg-z-index-sidebar + 1);
+  z-index: $fesg-z-index-sidebar;
 
-  background: $fesg-color-sidebar-button-background;
-  background: var(--fesg-color-sidebar-button-background, var(--fesg-color-primary, $fesg-color-sidebar-button-background));
-  border: none;
-  border-radius: 0;
+  background: $fesg-color-sidebar-background;
+  background: var(--fesg-color-sidebar-background, $fesg-color-sidebar-background);
+  border-right: 0.125rem solid;
+  border-right-color: $fesg-color-sidebar-border;
+  border-right-color: var(--fesg-color-sidebar-border, var(--fesg-color-border, $fesg-color-sidebar-border));
 
-  cursor: pointer;
+  overflow-y: auto;
 
-  &.is-active {
+  &.is-open {
     transform: translateX(0);
+    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
   }
 
   &.is-animated {
     transition: transform $fesg-transition-sidebar;
   }
+
+  @media (min-width: $fesg-breakpoint-sidebar) {
+    &.is-open {
+      box-shadow: none;
+    }
+  }
 }
 
-.fesg-sidebar-toggle__line {
+.fesg-sidebar__form {
   @include fesg-reset;
 
-  position: absolute;
-  top: calc(50% - 0.0625rem);
-  left: 20%;
-  height: 0.125rem;
-
-  background: $fesg-color-sidebar-button-foreground;
-  background: var(--fesg-color-sidebar-button-foreground, $fesg-color-sidebar-button-foreground);
-  border-radius: 0.0625rem;
-
-  transition:
-    transform $fesg-transition-sidebar,
-    opacity $fesg-transition-sidebar;
+  position: relative;
+  margin: 0 $fesg-sidebar-padding;
+}
 
-  &:nth-child(1) {
-    width: 60%;
-    transform: translateY(-0.375rem);
+.fesg-sidebar__search {
+  @include fesg-reset;
 
-    .is-active & {
-      transform: rotate(45deg);
-    }
-  }
+  display: block;
+  width: 100%;
+  padding: ($fesg-sidebar-padding / 1.5) ($fesg-sidebar-padding + 1.5rem) ($fesg-sidebar-padding / 1.5) $fesg-sidebar-padding;
 
-  &:nth-child(2) {
-    width: 45%;
+  border: 0.0625rem solid;
+  border-color: $fesg-color-sidebar-border;
+  border-color: var(--fesg-color-sidebar-border, var(--fesg-color-border, $fesg-color-sidebar-border));
+}
 
-    .is-active & {
-      opacity: 0;
-    }
-  }
+.fesg-sidebar__search-reset {
+  @include fesg-reset;
 
-  &:nth-child(3) {
-    width: 55%;
-    transform: translateY(0.375rem);
+  display: none;
+  position: absolute;
+  width: 1.25rem;
+  height: 1.25rem;
+  top: 50%;
+  right: ($fesg-sidebar-padding / 1.5);
 
-    .is-active & {
-      width: 60%;
-      transform: rotate(-45deg);
-    }
-  }
-}
+  transform: translateY(-50%);
 
-.fesg-sidebar {
-  @include fesg-reset;
+  border: 0.0625rem solid;
+  border-color: $fesg-color-sidebar-button-background;
+  border-color: var(--fesg-color-sidebar-button-background, var(--fesg-color-primary, $fesg-color-sidebar-button-background));
+  border-radius: 50%;
 
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: $fesg-sidebar-width;
-  height: 100%;
-  padding: $fesg-sidebar-padding 0;
-  transform: translateX(-100%);
+  cursor: pointer;
 
-  z-index: $fesg-z-index-sidebar;
+  &.is-visible {
+    display: block;
+  }
 
-  background: $fesg-color-sidebar-background;
-  background: var(--fesg-color-sidebar-background, $fesg-color-sidebar-background);
-  border-right: 0.125em solid;
-  border-right-color: $fesg-color-sidebar-border;
-  border-right-color: var(--fesg-color-sidebar-border, var(--fesg-color-border, $fesg-color-sidebar-border));
+  &::before,
+  &::after {
+    content: "";
 
-  overflow-y: auto;
+    display: block;
+    position: absolute;
+    width: 80%;
+    height: 0.0625rem;
+    top: 50%;
+    left: 50%;
 
-  &.is-open {
-    transform: translateX(0);
-    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
+    background: $fesg-color-sidebar-button-background;
+    background: var(--fesg-color-sidebar-button-background, var(--fesg-color-primary, $fesg-color-sidebar-button-background));
   }
 
-  &.is-animated {
-    transition: transform $fesg-transition-sidebar;
+  &::before {
+    transform: translate(-50%, -50%) rotate(45deg);
   }
 
-  @media (min-width: $fesg-breakpoint-sidebar) {
-    &.is-open {
-      box-shadow: none;
-    }
+  &::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
   }
 }
 
 .fesg-sidebar__section {
   @include fesg-reset;
 
-  margin-bottom: 1.25rem;
+  margin-bottom: 1.5rem;
 
   &:last-child {
     margin-bottom: 0;
   }
 }
 
-.fesg-sidebar__title {
+.fesg-sidebar__title,
+.fesg-sidebar__heading {
   @include fesg-reset;
-  @include fesg-fluid-type(1rem, 1.125rem);
 
   margin: 0 $fesg-sidebar-padding 0.5rem;
 
+  font-size: 1.125rem;
   font-weight: 600;
   color: $fesg-color-sidebar-text;
   color: var(--fesg-color-sidebar-text, var(--fesg-color-text, $fesg-color-sidebar-text));
 }
 
+.fesg-sidebar__heading--title {
+  font-size: 1.25rem;
+}
+
 .fesg-sidebar__list {
   @include fesg-reset;
 
   list-style: none;
 }
 
+.fesg-sidebar__item {
+  @include fesg-reset;
+}
+
+.fesg-sidebar__item--empty {
+  padding: 0.5rem $fesg-sidebar-padding;
+}
+
 .fesg-sidebar__link {
   @include fesg-reset;
 

diff --git a/docs/css/variables.scss b/docs/css/variables.scss
@@ -30,7 +30,7 @@ $fesg-color-footer-border: $fesg-color-border;
 $fesg-spacing: 2vw;
 
 // Sidebar
-$fesg-sidebar-width: 12.5rem;
+$fesg-sidebar-width: 14rem;
 $fesg-sidebar-padding: 0.75rem;
 
 // Breakpoints

diff --git a/docs/js/index.js b/docs/js/index.js
@@ -1,4 +1,5 @@
 import './button'
+import './search'
 import './section'
 import './sidebar'