fix(web): transition bg and border-radius (#27438)
* fix(web): transition bg and border-radius * also transition thumbpull/27401/head^2
parent
d1e2e8ab4e
commit
da4b88fc14
|
|
@ -208,7 +208,11 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class={['group focus-visible:outline-none flex overflow-hidden', backgroundColorClass, { 'rounded-xl': selected }]}
|
||||
class={[
|
||||
'group focus-visible:outline-none flex overflow-hidden transition-[background-color,border-radius]',
|
||||
backgroundColorClass,
|
||||
{ 'rounded-xl': selected },
|
||||
]}
|
||||
style:width="{width}px"
|
||||
style:height="{height}px"
|
||||
onmouseenter={onMouseEnter}
|
||||
|
|
@ -248,8 +252,16 @@
|
|||
]}
|
||||
>
|
||||
<ImageThumbnail
|
||||
class={['absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, imageClass]}
|
||||
brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, brokenAssetClass]}
|
||||
class={[
|
||||
'absolute group-focus-visible:rounded-lg transition-[border-radius]',
|
||||
{ 'rounded-xl': selected },
|
||||
imageClass,
|
||||
]}
|
||||
brokenAssetClass={[
|
||||
'z-1 absolute group-focus-visible:rounded-lg transition-[border-radius]',
|
||||
{ 'rounded-xl': selected },
|
||||
brokenAssetClass,
|
||||
]}
|
||||
url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
|
||||
altText={$getAltText(asset)}
|
||||
widthStyle="{width}px"
|
||||
|
|
|
|||
Loading…
Reference in New Issue