Add subtle css animations for conv list
This commit is contained in:
Nithin David
parent
43147b3163
commit
93b1526192
9 changed files with 50 additions and 20 deletions
|
|
@ -88,8 +88,8 @@ $woot-snackbar-bg: #323232;
|
|||
$woot-snackbar-button: #ffeb3b;
|
||||
|
||||
$swift-ease-out-duration: .4s !default;
|
||||
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
|
||||
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
|
||||
$swift-ease-out-function: cubic-bezier(.25, .8, .25, 1) !default;
|
||||
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
|
||||
|
||||
// Ionicons
|
||||
$ionicons-font-path: '~ionicons/fonts';
|
||||
|
|
|
|||
|
|
@ -88,8 +88,8 @@ $woot-snackbar-bg: #323232;
|
|||
$woot-snackbar-button: #ffeb3b;
|
||||
|
||||
$swift-ease-out-duration: .4s !default;
|
||||
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
|
||||
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
|
||||
$swift-ease-out-function: cubic-bezier(0.37, 0, 0.63, 1) !default;
|
||||
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
|
||||
|
||||
// Ionicons
|
||||
$ionicons-font-path: '~ionicons/fonts';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,15 @@
|
|||
@keyframes left-shift-animation {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
}
|
||||
|
||||
.conversation {
|
||||
@include flex;
|
||||
@include flex-shrink;
|
||||
|
|
@ -10,6 +22,7 @@
|
|||
position: relative;
|
||||
|
||||
&.active {
|
||||
animation: left-shift-animation .5s $swift-ease-out-function;
|
||||
background: $color-background;
|
||||
border-bottom-color: $color-border-light;
|
||||
border-left-color: $color-woot;
|
||||
|
|
@ -30,7 +43,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:nth-last-child(2) {
|
||||
&:last-child {
|
||||
.conversation--details {
|
||||
border-bottom-color: $color-border-light;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -120,6 +120,21 @@
|
|||
@include scroll-on-hover;
|
||||
}
|
||||
|
||||
.conversation-transition-list-move {
|
||||
transition: transform .3s $swift-ease-out-function;
|
||||
}
|
||||
|
||||
.conversation-transition-list-enter-active,
|
||||
.conversation-transition-list-leave-active {
|
||||
transition: all .3s $swift-ease-out-function;
|
||||
}
|
||||
|
||||
.conversation-transition-list-enter,
|
||||
.conversation-transition-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.chat-list__top {
|
||||
@include flex;
|
||||
@include padding($space-normal $zero $space-small $zero);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
margin: $space-normal;
|
||||
margin-top: 0;
|
||||
max-height: $space-mega * 3;
|
||||
transition: box-shadow .35s $ease-in-out-cubic, height 2s $ease-in-out-cubic;
|
||||
transition: box-shadow .35s $swift-ease-out-function, height 2s $swift-ease-out-function;
|
||||
|
||||
&.is-focused {
|
||||
@include normal-shadow;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
&.is-private {
|
||||
background: lighten($warning-color, 38%);
|
||||
|
||||
> input {
|
||||
>input {
|
||||
background: lighten($warning-color, 38%);
|
||||
}
|
||||
}
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.file-uploads > label {
|
||||
.file-uploads>label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
padding: 0 $space-small;
|
||||
}
|
||||
|
||||
> textarea {
|
||||
>textarea {
|
||||
@include ghost-input();
|
||||
@include margin(0);
|
||||
background: transparent;
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
|
||||
.tabs-title {
|
||||
margin: 0;
|
||||
transition: all .2s $ease-in-out-cubic;
|
||||
transition: all .2s $swift-ease-out-function;
|
||||
transition-property: color, background;
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: $font-size-small;
|
||||
transition: all .15s $ease-in-out-cubic;
|
||||
transition: all .15s $swift-ease-out-function;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ table {
|
|||
tr {
|
||||
.show-if-hover {
|
||||
opacity: 0;
|
||||
transition: all 0.2s $ease-in-out-cubic;
|
||||
transition: all 0.2s $swift-ease-out-function;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -20,12 +20,14 @@
|
|||
</p>
|
||||
|
||||
<div class="conversations-list">
|
||||
<conversation-card
|
||||
v-for="chat in conversationList"
|
||||
:key="chat.id"
|
||||
:active-label="label"
|
||||
:chat="chat"
|
||||
/>
|
||||
<transition-group name="conversation-transition-list" tag="div">
|
||||
<conversation-card
|
||||
v-for="chat in conversationList"
|
||||
:key="chat.id"
|
||||
:active-label="label"
|
||||
:chat="chat"
|
||||
/>
|
||||
</transition-group>
|
||||
|
||||
<div v-if="chatListLoading" class="text-center">
|
||||
<span class="spinner"></span>
|
||||
|
|
|
|||
|
|
@ -84,8 +84,8 @@ $woot-snackbar-bg: #323232;
|
|||
$woot-snackbar-button: #ffeb3b;
|
||||
|
||||
$swift-ease-out-duration: .4s !default;
|
||||
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
|
||||
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
|
||||
$swift-ease-out-function: cubic-bezier(.25, .8, .25, 1) !default;
|
||||
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
|
||||
|
||||
$border-radius: 3px;
|
||||
$line-height: 1;
|
||||
|
|
|
|||
Loading…
Reference in a new issue