refactor(client): use css modules
This commit is contained in:
		
							parent
							
								
									194fb14e07
								
							
						
					
					
						commit
						eac6ebb239
					
				
					 1 changed files with 32 additions and 32 deletions
				
			
		|  | @ -1,19 +1,19 @@ | ||||||
| <template> | <template> | ||||||
| <component | <component | ||||||
| 	:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel" :target="target" | 	:is="self ? 'MkA' : 'a'" ref="el" :class="$style.root" class="_link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel" :target="target" | ||||||
| 	@contextmenu.stop="() => {}" | 	@contextmenu.stop="() => {}" | ||||||
| > | > | ||||||
| 	<template v-if="!self"> | 	<template v-if="!self"> | ||||||
| 		<span class="schema">{{ schema }}//</span> | 		<span :class="$style.schema">{{ schema }}//</span> | ||||||
| 		<span class="hostname">{{ hostname }}</span> | 		<span :class="$style.hostname">{{ hostname }}</span> | ||||||
| 		<span v-if="port != ''" class="port">:{{ port }}</span> | 		<span v-if="port != ''" :class="$style.port">:{{ port }}</span> | ||||||
| 	</template> | 	</template> | ||||||
| 	<template v-if="pathname === '/' && self"> | 	<template v-if="pathname === '/' && self"> | ||||||
| 		<span class="self">{{ hostname }}</span> | 		<span :class="$style.self">{{ hostname }}</span> | ||||||
| 	</template> | 	</template> | ||||||
| 	<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substring(1) : pathname }}</span> | 	<span v-if="pathname != ''" :class="$style.pathname">{{ self ? pathname.substring(1) : pathname }}</span> | ||||||
| 	<span class="query">{{ query }}</span> | 	<span :class="$style.query">{{ query }}</span> | ||||||
| 	<span class="hash">{{ hash }}</span> | 	<span :class="$style.hash">{{ hash }}</span> | ||||||
| 	<i v-if="target === '_blank'" class="ti ti-external-link icon"></i> | 	<i v-if="target === '_blank'" class="ti ti-external-link icon"></i> | ||||||
| </component> | </component> | ||||||
| </template> | </template> | ||||||
|  | @ -53,37 +53,37 @@ const attr = self ? 'to' : 'href'; | ||||||
| const target = self ? null : '_blank'; | const target = self ? null : '_blank'; | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" module> | ||||||
| .ieqqeuvs { | .root { | ||||||
| 	word-break: break-all; | 	word-break: break-all; | ||||||
|  | } | ||||||
| 
 | 
 | ||||||
| 	> .icon { | .icon { | ||||||
| 		padding-left: 2px; | 	padding-left: 2px; | ||||||
| 		font-size: .9em; | 	font-size: .9em; | ||||||
| 	} | } | ||||||
| 
 | 
 | ||||||
| 	> .self { | .self { | ||||||
| 		font-weight: bold; | 	font-weight: bold; | ||||||
| 	} | } | ||||||
| 
 | 
 | ||||||
| 	> .schema { | .schema { | ||||||
| 		opacity: 0.5; | 	opacity: 0.5; | ||||||
| 	} | } | ||||||
| 
 | 
 | ||||||
| 	> .hostname { | .hostname { | ||||||
| 		font-weight: bold; | 	font-weight: bold; | ||||||
| 	} | } | ||||||
| 
 | 
 | ||||||
| 	> .pathname { | .pathname { | ||||||
| 		opacity: 0.8; | 	opacity: 0.8; | ||||||
| 	} | } | ||||||
| 
 | 
 | ||||||
| 	> .query { | .query { | ||||||
| 		opacity: 0.5; | 	opacity: 0.5; | ||||||
| 	} | } | ||||||
| 
 | 
 | ||||||
| 	> .hash { | .hash { | ||||||
| 		font-style: italic; | 	font-style: italic; | ||||||
| 	} |  | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue