worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-14 12:45:20 +09:00
parent 5da74897ae
commit e3c39d4b52
1 changed files with 11 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
packages/frontend/src/components/MkDigitalClock.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<span class="zjobosdg"> <span>
<span v-text="hh"></span> <span v-text="hh"></span>
<span class="colon" :class="{ showColon }">:</span> <span :class="[$style.colon, { [$style.showColon]: showColon }]">:</span>
<span v-text="mm"></span> <span v-text="mm"></span>
<span v-if="showS" class="colon" :class="{ showColon }">:</span> <span v-if="showS" :class="[$style.colon, { [$style.showColon]: showColon }]">:</span>
<span v-if="showS" v-text="ss"></span> <span v-if="showS" v-text="ss"></span>
<span v-if="showMs" class="colon" :class="{ showColon }">:</span> <span v-if="showMs" :class="[$style.colon, { [$style.showColon]: showColon }]">:</span>
<span v-if="showMs" v-text="ms"></span> <span v-if="showMs" v-text="ms"></span>
</span> </span>
</template> </template>
@ -62,16 +62,14 @@ onUnmounted(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.zjobosdg { .colon {
> .colon { opacity: 0;
opacity: 0; transition: opacity 1s ease;
transition: opacity 1s ease;
&.showColon { &.showColon {
opacity: 1; opacity: 1;
transition: opacity 0s; transition: opacity 0s;
}
} }
} }
</style> </style>