ulysia/szurubooru
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/css: animate compact-tags updates

Browse source
This commit is contained in:
Ben Klein 2021-04-13 00:41:41 +00:00
parent 70f566ef63
commit 6fff36fa15
1 changed files with 24 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
client/css/tag-input-control.styl
View file

@ -86,6 +86,18 @@ div.tag-input
font-size: 90% font-size: 90%
unselectable() unselectable()
@keyframes tag-background-updated
from
background-position: 200% 0%
to
background-position: 0% 0%
@keyframes new-tag-added
from
max-height: 0
to
max-height: 5em
ul.compact-tags ul.compact-tags
width: 100% width: 100%
margin: 0.5em 0 0 0 margin: 0.5em 0 0 0
@ -104,14 +116,23 @@ ul.compact-tags
outline: 0 outline: 0
box-shadow: inset 0 0 0 2px $main-color box-shadow: inset 0 0 0 2px $main-color
&.implication &.implication
background: $implied-tag-background-color // background: $implied-tag-background-color
color: $implied-tag-text-color color: $implied-tag-text-color
background: linear-gradient(90deg, transparent, transparent, $implied-tag-background-color)
background-size: 200%
animation: tag-background-updated 2s ease forwards
&.new &.new
background: $new-tag-background-color // background: $new-tag-background-color
color: $new-tag-text-color color: $new-tag-text-color
background: linear-gradient(90deg, transparent, transparent, $new-tag-background-color)
background-size: 200%;
animation: new-tag-added 1s ease forwards, tag-background-updated 2s ease forwards
&.duplicate &.duplicate
background: $duplicate-tag-background-color // background: $duplicate-tag-background-color
color: $duplicate-tag-text-color color: $duplicate-tag-text-color
background: linear-gradient(90deg, transparent, transparent, $duplicate-tag-background-color)
background-size: 200%
animation: tag-background-updated 2s ease forwards
i i
padding-right: 0.4em padding-right: 0.4em