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> | <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> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
|  | @ -157,8 +157,8 @@ const props = withDefaults(defineProps<{ | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" module> | ||||||
| .havbbuyv { | .root { | ||||||
| 	white-space: pre-wrap; | 	white-space: pre-wrap; | ||||||
| 
 | 
 | ||||||
| 	&.nowrap { | 	&.nowrap { | ||||||
|  | @ -167,24 +167,5 @@ const props = withDefaults(defineProps<{ | ||||||
| 		overflow: hidden; | 		overflow: hidden; | ||||||
| 		text-overflow: ellipsis; | 		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> | </style> | ||||||
|  |  | ||||||
|  | @ -12,6 +12,15 @@ import MkA from '@/components/global/MkA.vue'; | ||||||
| import { host } from '@/config'; | import { host } from '@/config'; | ||||||
| import { MFM_TAGS } from '@/scripts/mfm-tags'; | 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({ | export default defineComponent({ | ||||||
| 	props: { | 	props: { | ||||||
| 		text: { | 		text: { | ||||||
|  | @ -276,11 +285,11 @@ export default defineComponent({ | ||||||
| 				case 'quote': { | 				case 'quote': { | ||||||
| 					if (!this.nowrap) { | 					if (!this.nowrap) { | ||||||
| 						return [h('div', { | 						return [h('div', { | ||||||
| 							class: 'quote', | 							style: QUOTE_STYLE, | ||||||
| 						}, genEl(token.children))]; | 						}, genEl(token.children))]; | ||||||
| 					} else { | 					} else { | ||||||
| 						return [h('span', { | 						return [h('span', { | ||||||
| 							class: 'quote', | 							style: QUOTE_STYLE, | ||||||
| 						}, genEl(token.children))]; | 						}, genEl(token.children))]; | ||||||
| 					} | 					} | ||||||
| 				} | 				} | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue