blob: c20d5087c868cf09f5600631ab21bd8936adcf03 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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-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);
}
}
|
