mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 20:38:55 +03:00
Code Issues Projects Releases Packages Wiki Activity

Update autocomplete design

Browse source
This commit is contained in:
Aviral Dasgupta 2016-08-17 17:27:01 +05:30
parent d3eccc1d6f
commit 9a7f5388d9
1 changed files with 38 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@
z-index: 1000;
width: 100%;
border: 1px solid #e5e5e5;
background: rgba(255, 255, 255, 0.9);
background: white;
border-bottom: none;
border-radius: 4px 4px 0 0;
max-height: 50vh;
@ -12,56 +12,58 @@
}
.mx_Autocomplete_ProviderSection {
padding: 12px;
border-bottom: 1px solid #e5e5e5;
}
.mx_Autocomplete_ProviderSection * {
padding: 2px;
border-radius: 4px;
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
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;
cursor: pointer;
transition: 0.3s all ease;
display: flex;
align-items: center;
color: #4a4a4a;
}
.mx_Autocomplete_Completion.selected * {
transition: 0.3s all ease;
.mx_Autocomplete_Completion_block * {
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 {
background: #76cfa6;
color: white;
background: #f6f6f6;
outline: none;
}
.mx_Autocomplete_Completion.selected * {
color: white !important;
}
.mx_Autocomplete_provider_name {
color: #76cfa6;
font-weight: 600;
}
.autocomplete-enter {
opacity: 0.01;
}
.autocomplete-enter.autocomplete-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
.autocomplete-leave {
opacity: 1;
}
.autocomplete-leave.autocomplete-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
margin: 12px;
color: #454545;
font-weight: 400;
opacity: 0.4;
}