gaja-group
/
matrix-bot
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add some style improvements to autocompletions 

- Fix https://github.com/vector-im/riot-web/issues/2230 by adding text-overflow: ellipsis to pill spans
 - Add padding to pills
 - Make sure to only apply horizontal margin of pill children at one level of the DOM tree
This commit is contained in:
Luke Barnard 2017-06-28 16:36:32 +01:00
parent c614bc2356
commit 2ea69624af
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
View File

@ -38,6 +38,7 @@
.mx_Autocomplete_Completion_pill { .mx_Autocomplete_Completion_pill {
border-radius: 17px; border-radius: 17px;
height: 34px; height: 34px;
padding: 0px 5px;
display: flex; display: flex;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
@ -45,10 +46,21 @@
color: $primary-fg-color; color: $primary-fg-color;
} }
.mx_Autocomplete_Completion_pill * { .mx_Autocomplete_Completion_pill > * {
margin: 0 3px; margin: 0 3px;
} }
.mx_Autocomplete_provider_name,
.mx_Autocomplete_Completion_title,
.mx_Autocomplete_Completion_subtitle,
.mx_Autocomplete_Completion_description {
/* Ellipsis for long names/subtitles/descriptions*/
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* container for pill-style completions */ /* container for pill-style completions */
.mx_Autocomplete_Completion_container_pill { .mx_Autocomplete_Completion_container_pill {
margin: 12px; margin: 12px;