Sha256: b76cb18fc8f16880632782a49fe39a9d6c6d62bb2c9a98d410316d037dd7083b
Contents?: true
Size: 1.71 KB
Versions: 12
Compression:
Stored size: 1.71 KB
Contents
@import "../tokens/colors";
@import "../tokens/border_radius";
[class^=pb_typeahead_kit] {
.pb_typeahead_wrapper {
position: relative;
.pb_typeahead_loading_indicator {
position: absolute;
width: min-content;
bottom: 0.6em;
right: 1em;
opacity: 0;
color: $text_lt_light;
transition: opacity .15s ease-in-out;
}
}
[class^=pb_text_input_kit] {
.text_input_wrapper > input:first-child {
padding-right: $space_xl;
}
}
.pb_item_kit {
padding: ($space_xs + 2) 0;
@media (hover:hover) {
&:hover {
background-color: $bg_light;
}
}
}
[class^=pb_list_kit] {
max-height: 18em;
overflow-y: auto;
overscroll-behavior: contain;
position: absolute;
left: 0;
right: 0;
background: white;
box-shadow: $shadow_deep;
z-index: 100;
border-radius: $border_rad_heavier;
transition: opacity .25s ease-in-out;
}
&:focus-within [class^=pb_list_kit] {
display: block;
opacity: 1;
}
&:not(:focus-within) [class^=pb_list_kit] {
display: none;
opacity: 0;
}
[class^=pb_list_kit] {
margin-top: -$space-sm;
li {
transition: background-color .25s ease-in-out;
}
& > [data-pb-typeahead-kit-results] > li {
&:focus-within {
background-color: $active_light;
}
> button {
background: none;
color: $text_lt_default;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
width: 100%;
height: 100%;
text-align: left;
}
}
}
.dark {
.pb_typeahead_wrapper .pb_typeahead_loading_indicator {
color: $text_dk_light;
}
}
}
Version data entries
12 entries across 12 versions & 1 rubygems