refactor(frontend): use css modules

This commit is contained in:
syuilo
2023-05-14 10:21:56 +09:00
parent 89a3195dfd
commit 8c97c54cfa
40 changed files with 148 additions and 262 deletions

View File

@@ -3,15 +3,15 @@
<FromSlot>
<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
<div v-panel style="border-radius: 6px;">
<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
<Sortable v-model="reactions" :class="$style.reactions" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
<template #item="{element}">
<button class="_button item" @click="remove(element, $event)">
<button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)">
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
<MkEmoji v-else :emoji="element" :normal="true"/>
</button>
</template>
<template #footer>
<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
<button class="_button" :class="$style.reactionsAdd" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
</template>
</Sortable>
</div>
@@ -135,20 +135,20 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.zoaiodol {
<style lang="scss" module>
.reactions {
padding: 12px;
font-size: 1.1em;
}
> .item {
display: inline-block;
padding: 8px;
cursor: move;
}
.reactionsItem {
display: inline-block;
padding: 8px;
cursor: move;
}
> .add {
display: inline-block;
padding: 8px;
}
.reactionsAdd {
display: inline-block;
padding: 8px;
}
</style>