refactor(client): use css modules
This commit is contained in:
parent
4b1009b34e
commit
5da74897ae
2 changed files with 14 additions and 24 deletions
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" class="havbbuyv" :class="{ nowrap }"/>
|
||||
<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" :class="[$style.root, { [$style.nowrap]: nowrap }]"/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
@ -157,8 +157,8 @@ const props = withDefaults(defineProps<{
|
|||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.havbbuyv {
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
white-space: pre-wrap;
|
||||
|
||||
&.nowrap {
|
||||
|
@ -167,24 +167,5 @@ const props = withDefaults(defineProps<{
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
::v-deep(.quote) {
|
||||
display: block;
|
||||
margin: 8px;
|
||||
padding: 6px 0 6px 12px;
|
||||
color: var(--fg);
|
||||
border-left: solid 3px var(--fg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
::v-deep(pre) {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
> ::v-deep(code) {
|
||||
font-size: 0.8em;
|
||||
word-break: break-all;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,6 +12,15 @@ import MkA from '@/components/global/MkA.vue';
|
|||
import { host } from '@/config';
|
||||
import { MFM_TAGS } from '@/scripts/mfm-tags';
|
||||
|
||||
const QUOTE_STYLE = `
|
||||
display: block;
|
||||
margin: 8px;
|
||||
padding: 6px 0 6px 12px;
|
||||
color: var(--fg);
|
||||
border-left: solid 3px var(--fg);
|
||||
opacity: 0.7;
|
||||
`.split('\n').join(' ');
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
text: {
|
||||
|
@ -276,11 +285,11 @@ export default defineComponent({
|
|||
case 'quote': {
|
||||
if (!this.nowrap) {
|
||||
return [h('div', {
|
||||
class: 'quote',
|
||||
style: QUOTE_STYLE,
|
||||
}, genEl(token.children))];
|
||||
} else {
|
||||
return [h('span', {
|
||||
class: 'quote',
|
||||
style: QUOTE_STYLE,
|
||||
}, genEl(token.children))];
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue