feat: Initial after clean slate

1 files changed, 76 insertions, 0 deletions

diff --git a/apps/web-shared/src/styles/components/autocomplete.scss b/apps/web-shared/src/styles/components/autocomplete.scss
new file mode 100644
index 0000000..cde3632
--- /dev/null
+++ b/apps/web-shared/src/styles/components/autocomplete.scss
@@ -0,0 +1,76 @@
+@use '../base' as *;
+@use 'circle-loader.scss' as *;
+
+/* --------------------------------
+
+File#: _2_autocomplete
+Title: Autocomplete
+Descr: Autocomplete plugin for input elements
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+:root {
+  --autocomplete-dropdown-vertical-gap: 4px; // gap between input and results list
+  --autocomplete-dropdown-max-height: 150px;
+  --autocomplete-dropdown-scrollbar-width: 6px; // custom scrollbar width - webkit browsers
+}
+
+// results dropdown
+.autocomplete__results {
+  position: absolute;
+  z-index: var(--z-index-popover, 5);
+  width: 100%;
+  left: 0;
+  top: calc(100% + var(--autocomplete-dropdown-vertical-gap));
+  background-color: var(--color-bg-light);
+  box-shadow: var(--inner-glow), var(--shadow-md);
+  border-radius: var(--radius-md);
+  opacity: 0;
+  visibility: hidden;
+  overflow: hidden;
+
+  .autocomplete--results-visible & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.autocomplete__list {
+  max-height: var(--autocomplete-dropdown-max-height);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  // custom scrollbar
+  &::-webkit-scrollbar { // scrollbar width
+    width: var(--autocomplete-dropdown-scrollbar-width);
+  }
+
+  &::-webkit-scrollbar-track { // progress bar
+    background-color: alpha(var(--color-contrast-higher), 0.08);
+    border-radius: 0;
+  }
+
+  &::-webkit-scrollbar-thumb { // handle
+    background-color: alpha(var(--color-contrast-higher), 0.12);
+    border-radius: 0;
+
+    &:hover {
+      background-color: alpha(var(--color-contrast-higher), 0.2);
+    }
+  }
+}
+
+// single result item
+.autocomplete__item {
+  cursor: pointer;
+
+  &:hover {
+    background-color: alpha(var(--color-contrast-higher), 0.075);
+  }
+
+  &:focus {
+    outline: none;
+    background-color: alpha(var(--color-primary), 0.15);
+  }
+}