aboutsummaryrefslogtreecommitdiffstats
path: root/apps/web-shared/src/styles/components/autocomplete.scss
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web-shared/src/styles/components/autocomplete.scss')
-rw-r--r--apps/web-shared/src/styles/components/autocomplete.scss76
1 files changed, 0 insertions, 76 deletions
diff --git a/apps/web-shared/src/styles/components/autocomplete.scss b/apps/web-shared/src/styles/components/autocomplete.scss
deleted file mode 100644
index c20d508..0000000
--- a/apps/web-shared/src/styles/components/autocomplete.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@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-xs);
- 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);
- }
-}