diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue index ccf0dc4bdf..33ea44e13a 100644 --- a/src/components/ContactsList.vue +++ b/src/components/ContactsList.vue @@ -5,32 +5,81 @@ @@ -175,4 +332,25 @@ export default { padding: 0 var(--default-grid-baseline); } +.contacts-list__multiselect-header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: var(--color-main-background-translucent); + position: sticky; + height: calc(var(--default-grid-baseline) * 12); + z-index: 100; +} + +.contacts-list__multiselect-header-enter-active, .contacts-list__multiselect-header-leave-active { + transition: all calc(var(--animation-slow) / 2); +} + +.contacts-list__multiselect-header-enter, +.contacts-list__multiselect-header-leave-to { + opacity: 0; + height: 0; + transform: scaleY(0); +} diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue index 20366b2f94..55cfabb9cd 100644 --- a/src/components/ContactsList/ContactsListItem.vue +++ b/src/components/ContactsList/ContactsListItem.vue @@ -5,7 +5,8 @@