PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #1978 from aviraldg/feature-autocomplete-improvements

Browse source 
Update autocomplete design
This commit is contained in:
Matthew Hodgson 2016-08-24 14:48:06 +01:00 committed by GitHub
commit 2ee4fa484e
1 changed files with 44 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css
View file

@ -4,7 +4,7 @@
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
background: rgba(255, 255, 255, 0.9); background: white;
border-bottom: none; border-bottom: none;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
max-height: 50vh; max-height: 50vh;
@ -12,56 +12,68 @@
} }
.mx_Autocomplete_ProviderSection { .mx_Autocomplete_ProviderSection {
padding: 12px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
.mx_Autocomplete_ProviderSection * { .mx_Autocomplete_Completion_container_pill {
padding: 2px; margin: 12px;
border-radius: 4px; display: flex;
} }
.mx_Autocomplete_Completion { /* a "block" completion takes up a whole line */
.mx_Autocomplete_Completion_block {
height: 34px;
display: flex;
padding: 0 12px;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
transition: 0.3s all ease;
display: flex;
align-items: center; align-items: center;
color: #4a4a4a;
} }
.mx_Autocomplete_Completion.selected * { .mx_Autocomplete_Completion_block * {
transition: 0.3s all ease; margin: 0 3px;
}
.mx_Autocomplete_Completion_pill {
border-radius: 17px;
height: 34px;
display: flex;
user-select: none;
cursor: pointer;
align-items: center;
color: #4a4a4a;
}
.mx_Autocomplete_Completion_pill * {
margin: 0 3px;
}
/* container for pill-style completions */
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: flex;
flex-flow: wrap;
} }
.mx_Autocomplete_Completion.selected { .mx_Autocomplete_Completion.selected {
background: #76cfa6; background: #f6f6f6;
color: white;
outline: none; outline: none;
} }
.mx_Autocomplete_Completion.selected * {
color: white !important;
}
.mx_Autocomplete_provider_name { .mx_Autocomplete_provider_name {
color: #76cfa6; margin: 12px;
font-weight: 600; color: #454545;
font-weight: 400;
opacity: 0.4;
} }
.autocomplete-enter { /* styling for common completion elements */
opacity: 0.01; .mx_Autocomplete_Completion_subtitle {
font-style: italic;
flex: 1;
} }
.autocomplete-enter.autocomplete-enter-active { .mx_Autocomplete_Completion_description {
opacity: 1; color: gray;
transition: opacity 300ms ease-in;
}
.autocomplete-leave {
opacity: 1;
}
.autocomplete-leave.autocomplete-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
} }