OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Update autocomplete design

pull/1978/head
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; 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,58 @@
} }
.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 {
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;
} }