Skip to content
Snippets Groups Projects
Commit a5472401 authored by Janne Mareike Koschinski's avatar Janne Mareike Koschinski
Browse files

Additional animations

parent 8c9a0d17
No related branches found
No related tags found
No related merge requests found
...@@ -6,3 +6,21 @@ ...@@ -6,3 +6,21 @@
to to
margin-top: 0 margin-top: 0
opacity: 1 opacity: 1
@keyframes slidein_msg_before
from
margin-bottom: .5rem
opacity: 0
to
margin-bottom: 0
opacity: 1
@keyframes slidein_msg_after
from
margin-top: .5rem
opacity: 0
to
margin-top: 0
opacity: 1
\ No newline at end of file
...@@ -199,6 +199,9 @@ ...@@ -199,6 +199,9 @@
animation-duration: 1s animation-duration: 1s
animation-name: slidein animation-name: slidein
.container .inline-button:first-child:last-child
display: none
&.focus &.focus
padding: 0 padding: 0
margin: 0.5rem -0.5rem margin: 0.5rem -0.5rem
...@@ -206,19 +209,15 @@ ...@@ -206,19 +209,15 @@
@media(max-width: 800px) @media(max-width: 800px)
margin: 1rem 0 margin: 1rem 0
&:before .container.before
bottom: 0 .message, .inline-button
box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24) animation-name: slidein_msg_before
content: '' animation-duration: 400ms
display: block
left: 0
pointer-events: none
position: absolute
right: 0
top: 0
> .container > .inline-button .container.after
box-shadow: none .message, .inline-button
animation-name: slidein_msg_after
animation-duration: 400ms
&:not(.focus) &:not(.focus)
> .before, > .after > .before, > .after
...@@ -236,6 +235,17 @@ ...@@ -236,6 +235,17 @@
background: #fff background: #fff
position: relative position: relative
&:before
bottom: 0
box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24)
content: ''
display: block
left: 0
pointer-events: none
position: absolute
right: 0
top: 0
> .more > .more
height: 56px height: 56px
width: 56px width: 56px
......
...@@ -1076,24 +1076,20 @@ body { ...@@ -1076,24 +1076,20 @@ body {
position: relative; position: relative;
animation-duration: 1s; animation-duration: 1s;
animation-name: slidein; } animation-name: slidein; }
.results .buffer .container .context .container .inline-button:first-child:last-child {
display: none; }
.results .buffer .container .context.focus { .results .buffer .container .context.focus {
padding: 0; padding: 0;
margin: 0.5rem -0.5rem; } margin: 0.5rem -0.5rem; }
@media (max-width: 800px) { @media (max-width: 800px) {
.results .buffer .container .context.focus { .results .buffer .container .context.focus {
margin: 1rem 0; } } margin: 1rem 0; } }
.results .buffer .container .context:before { .results .buffer .container .context.focus .container.before .message, .results .buffer .container .context.focus .container.before .inline-button {
bottom: 0; animation-name: slidein_msg_before;
box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); animation-duration: 400ms; }
content: ''; .results .buffer .container .context.focus .container.after .message, .results .buffer .container .context.focus .container.after .inline-button {
display: block; animation-name: slidein_msg_after;
left: 0; animation-duration: 400ms; }
pointer-events: none;
position: absolute;
right: 0;
top: 0; }
.results .buffer .container .context > .container > .inline-button {
box-shadow: none; }
.results .buffer .container .context:not(.focus) > .before, .results .buffer .container .context:not(.focus) > .after { .results .buffer .container .context:not(.focus) > .before, .results .buffer .container .context:not(.focus) > .after {
display: none; } display: none; }
.results .buffer .container .context:not(.focus) > .inline-button { .results .buffer .container .context:not(.focus) > .inline-button {
...@@ -1106,6 +1102,16 @@ body { ...@@ -1106,6 +1102,16 @@ body {
color: #212121; color: #212121;
background: #fff; background: #fff;
position: relative; } position: relative; }
.results .buffer .container .context .message:before {
bottom: 0;
box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
content: '';
display: block;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0; }
.results .buffer .container .context .message > .more { .results .buffer .container .context .message > .more {
height: 56px; height: 56px;
width: 56px; width: 56px;
...@@ -1217,3 +1223,19 @@ body { ...@@ -1217,3 +1223,19 @@ body {
to { to {
margin-top: 0; margin-top: 0;
opacity: 1; } } opacity: 1; } }
@keyframes slidein_msg_before {
from {
margin-bottom: .5rem;
opacity: 0; }
to {
margin-bottom: 0;
opacity: 1; } }
@keyframes slidein_msg_after {
from {
margin-top: .5rem;
opacity: 0; }
to {
margin-top: 0;
opacity: 1; } }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment