diff --git a/res/css/_animations.sass b/res/css/_animations.sass index 03ba8b9e8b79932236b57506d52be6c47f04f66c..03993488a66c49dd76d7fea702ebff5816520024 100644 --- a/res/css/_animations.sass +++ b/res/css/_animations.sass @@ -3,6 +3,24 @@ margin-top: 1rem opacity: 0 + to + margin-top: 0 + 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 diff --git a/res/css/_content.sass b/res/css/_content.sass index ee95b8faf394842326d7087275b3e0e1ef14d6eb..a4d6c9e5f90da229f083a3ddd7bb48005775fb45 100644 --- a/res/css/_content.sass +++ b/res/css/_content.sass @@ -187,7 +187,7 @@ vertical-align: top margin-right: 16px - &.before > .inline-button:before + &.before> .inline-button:before background-image: url(../icons/chevron-up.svg) &.after > .inline-button:before @@ -199,6 +199,9 @@ animation-duration: 1s animation-name: slidein + .container .inline-button:first-child:last-child + display: none + &.focus padding: 0 margin: 0.5rem -0.5rem @@ -206,19 +209,15 @@ @media(max-width: 800px) margin: 1rem 0 - &: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 + .container.before + .message, .inline-button + animation-name: slidein_msg_before + animation-duration: 400ms - > .container > .inline-button - box-shadow: none + .container.after + .message, .inline-button + animation-name: slidein_msg_after + animation-duration: 400ms &:not(.focus) > .before, > .after @@ -236,6 +235,17 @@ background: #fff 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 height: 56px width: 56px diff --git a/res/css/search.css b/res/css/search.css index e8c2a7a20fb56693f9ec6b14c897e3949d48bf0d..f8fccc34f09c9b213a711df7daca411b45683585 100644 --- a/res/css/search.css +++ b/res/css/search.css @@ -1076,24 +1076,20 @@ body { position: relative; animation-duration: 1s; animation-name: slidein; } + .results .buffer .container .context .container .inline-button:first-child:last-child { + display: none; } .results .buffer .container .context.focus { padding: 0; margin: 0.5rem -0.5rem; } @media (max-width: 800px) { .results .buffer .container .context.focus { margin: 1rem 0; } } - .results .buffer .container .context: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 > .container > .inline-button { - box-shadow: none; } + .results .buffer .container .context.focus .container.before .message, .results .buffer .container .context.focus .container.before .inline-button { + animation-name: slidein_msg_before; + animation-duration: 400ms; } + .results .buffer .container .context.focus .container.after .message, .results .buffer .container .context.focus .container.after .inline-button { + animation-name: slidein_msg_after; + animation-duration: 400ms; } .results .buffer .container .context:not(.focus) > .before, .results .buffer .container .context:not(.focus) > .after { display: none; } .results .buffer .container .context:not(.focus) > .inline-button { @@ -1106,6 +1102,16 @@ body { color: #212121; background: #fff; 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 { height: 56px; width: 56px; @@ -1217,3 +1223,19 @@ body { to { margin-top: 0; 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; } }