diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-01-14 11:23:02 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-01-14 11:23:02 +0900 |
| commit | ce5506f331d5048be0c7d67d14cb4e29e09c5a96 (patch) | |
| tree | cadd8b33778b49a564eeb3ebd554e687f7583ca2 /packages/frontend/src/components/global/MkEllipsis.vue | |
| parent | refactor(client): use css modules (diff) | |
| download | misskey-ce5506f331d5048be0c7d67d14cb4e29e09c5a96.tar.gz misskey-ce5506f331d5048be0c7d67d14cb4e29e09c5a96.tar.bz2 misskey-ce5506f331d5048be0c7d67d14cb4e29e09c5a96.zip | |
refactor(client): use css modules
Diffstat (limited to 'packages/frontend/src/components/global/MkEllipsis.vue')
| -rw-r--r-- | packages/frontend/src/components/global/MkEllipsis.vue | 46 |
1 files changed, 24 insertions, 22 deletions
diff --git a/packages/frontend/src/components/global/MkEllipsis.vue b/packages/frontend/src/components/global/MkEllipsis.vue index 0a46f486d6..b3cf69c075 100644 --- a/packages/frontend/src/components/global/MkEllipsis.vue +++ b/packages/frontend/src/components/global/MkEllipsis.vue @@ -1,28 +1,10 @@ <template> - <span class="mk-ellipsis"> - <span>.</span><span>.</span><span>.</span> - </span> +<span :class="$style.root"> + <span :class="$style.dot">.</span><span :class="$style.dot">.</span><span :class="$style.dot">.</span> +</span> </template> -<style lang="scss" scoped> -.mk-ellipsis { - > span { - animation: ellipsis 1.4s infinite ease-in-out both; - - &:nth-child(1) { - animation-delay: 0s; - } - - &:nth-child(2) { - animation-delay: 0.16s; - } - - &:nth-child(3) { - animation-delay: 0.32s; - } - } -} - +<style lang="scss" module> @keyframes ellipsis { 0%, 80%, 100% { opacity: 1; @@ -31,4 +13,24 @@ opacity: 0; } } + +.root { + +} + +.dot { + animation: ellipsis 1.4s infinite ease-in-out both; + + &:nth-child(1) { + animation-delay: 0s; + } + + &:nth-child(2) { + animation-delay: 0.16s; + } + + &:nth-child(3) { + animation-delay: 0.32s; + } +} </style> |