528bd2baa6
* core functionality in place * fix dark theme background issues * separate list for aria-live, add delete and blur functionality * fix issue with input resize on edit * handle input blur, prevent special characters, tweak keyup to keydown to ensure runs before change event * group buttons and add default styles * style tweaks * fix logic error with insert index * refactors * clear suggestions on blur, even if no input value * tweaks
114 lines
2.6 KiB
SCSS
114 lines
2.6 KiB
SCSS
@import '../config/import';
|
|
@import './forms';
|
|
@import '@reach/combobox/styles';
|
|
|
|
.crayons-autocomplete {
|
|
// Override of the default hidden class to make sure it takes priority over any display style attached to the 'replaceElement' textarea
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
&__popover {
|
|
padding: var(--su-1);
|
|
z-index: var(--z-elevate);
|
|
|
|
&[data-reach-popover] {
|
|
// Reach UI adds a width directly to this element as an inline style. !important is needed to make sure the size is constrained.
|
|
width: 250px !important;
|
|
background: var(--card-bg);
|
|
color: var(--card-color);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
&__option {
|
|
border-bottom: 1px solid var(--base-10);
|
|
padding-top: var(--su-2);
|
|
padding-bottom: var(--su-2);
|
|
|
|
&[data-reach-combobox-option]:hover,
|
|
&[data-reach-combobox-option][aria-selected='true'] {
|
|
& .crayons-autocomplete__name {
|
|
color: var(--link-color-hover);
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
&__name {
|
|
font-size: var(--fs-m);
|
|
font-weight: var(--fw-medium);
|
|
}
|
|
|
|
&__username {
|
|
color: var(--base-60);
|
|
font-size: var(--fs-s);
|
|
}
|
|
|
|
&__empty {
|
|
display: block;
|
|
margin: var(--su-2);
|
|
color: var(--base-60);
|
|
font-size: var(--fs-s);
|
|
}
|
|
}
|
|
|
|
.c-autocomplete--multi {
|
|
&__wrapper:focus-within {
|
|
@extend %form-styling-focus;
|
|
|
|
.c-autocomplete--multi__input {
|
|
background-color: var(--form-bg-focus);
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
background-color: var(--form-bg);
|
|
color: var(--body-color);
|
|
border: none;
|
|
}
|
|
|
|
.crayons-btn.c-autocomplete--multi__selected {
|
|
&:first-child {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
&:last-child:hover,
|
|
&:last-child:focus-visible {
|
|
color: var(--accent-danger);
|
|
}
|
|
}
|
|
|
|
ul.c-autocomplete--multi__popover {
|
|
padding: var(--su-1);
|
|
z-index: var(--z-elevate);
|
|
background: var(--card-bg);
|
|
color: var(--card-color);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
border: none;
|
|
|
|
[role='option'] {
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&[aria-selected='true'] {
|
|
background: var(--link-bg-hover);
|
|
color: var(--link-color-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|