mirror of
https://github.com/zulip/zulip.git
synced 2026-07-15 21:03:26 +08:00
82c2da8aae
To increase the number of options available for the user to pick from, we increase the limit of options shown to 50 for all typeaheads, and make the menu scrollable. The max height is set to original height of the composebox typeahead menu, which fit 8 options or to 95% of the window height, whichever is smaller. Fixes: #20620.
98 lines
2.6 KiB
CSS
98 lines
2.6 KiB
CSS
/* CSS for Bootstrap typeahead */
|
|
|
|
.dropdown-menu {
|
|
display: none;
|
|
min-width: 160px;
|
|
list-style: none;
|
|
}
|
|
|
|
.open > .dropdown-menu {
|
|
display: block;
|
|
}
|
|
|
|
.typeahead {
|
|
z-index: 1051;
|
|
}
|
|
|
|
.typeahead.dropdown-menu .typeahead-menu .simplebar-content {
|
|
& > li {
|
|
word-break: break-word;
|
|
|
|
& > a {
|
|
display: flex;
|
|
padding: 3px 10px;
|
|
gap: 5px;
|
|
font-weight: normal;
|
|
/* We want to keep this `max-width` less than 320px. */
|
|
max-width: 292px;
|
|
line-height: var(--base-line-height-unitless);
|
|
color: var(--color-dropdown-item);
|
|
white-space: nowrap;
|
|
|
|
@media (width >= $ml_min) {
|
|
/* Scale up with font size on larger widths. */
|
|
/* 292px / 14px */
|
|
max-width: 20.86em;
|
|
}
|
|
|
|
/* hidden text just to maintain line height for a blank option */
|
|
strong:empty {
|
|
&::after {
|
|
content: ".";
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
outline: 0;
|
|
}
|
|
|
|
/* styles defined for user_circle here only deal with positioning of user_presence_circle
|
|
in typeahead list in order to ensure they are rendered correctly in in all screen sizes.
|
|
Most of the style rules related to color, gradient etc. which are generally common throughout
|
|
the app are defined in user_circles.css and are not overridden here. */
|
|
.user_circle {
|
|
width: var(--length-user-status-circle);
|
|
height: var(--length-user-status-circle);
|
|
position: relative;
|
|
left: -2px;
|
|
flex-shrink: 0;
|
|
align-self: center;
|
|
}
|
|
|
|
.typeahead-text-container {
|
|
display: flex;
|
|
align-self: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
gap: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: var(--color-active-dropdown-item);
|
|
background-color: var(--background-color-active-typeahead-item);
|
|
}
|
|
}
|
|
|
|
.autocomplete_secondary {
|
|
align-self: center;
|
|
opacity: 0.8;
|
|
font-size: 85%;
|
|
flex: 1 1 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.active .autocomplete_secondary {
|
|
opacity: 1;
|
|
}
|
|
}
|