oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-05-27 11:35:26 +09:00
parent 98aef974df
commit a879607479
9 changed files with 206 additions and 283 deletions
Download patch file Download diff file Expand all files Collapse all files

120
packages/frontend/src/components/form/link.vue
View file

@ -1,19 +1,19 @@
<template>
<div class="ffcbddfc" :class="{ inline }">
<a v-if="external" class="main _button" :href="to" target="_blank">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
<span class="right">
<span class="text"><slot name="suffix"></slot></span>
<i class="ti ti-external-link icon"></i>
<div :class="[$style.root, { [$style.inline]: inline }]">
<a v-if="external" :class="$style.main" class="_button" :href="to" target="_blank">
<span :class="$style.icon"><slot name="icon"></slot></span>
<span :class="$style.text"><slot></slot></span>
<span :class="$style.suffix">
<span :class="$style.suffixText"><slot name="suffix"></slot></span>
<i class="ti ti-external-link" :class="$style.suffixIcon"></i>
</span>
</a>
<MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
<span class="right">
<span class="text"><slot name="suffix"></slot></span>
<i class="ti ti-chevron-right icon"></i>
<MkA v-else :class="[$style.main, { [$style.active]: active }]" class="_button" :to="to" :behavior="behavior">
<span :class="$style.icon"><slot name="icon"></slot></span>
<span :class="$style.text"><slot></slot></span>
<span :class="$style.suffix">
<span :class="$style.suffixText"><slot name="suffix"></slot></span>
<i class="ti ti-chevron-right" :class="$style.suffixIcon"></i>
</span>
</MkA>
</div>
@ -31,65 +31,65 @@ const props = defineProps<{
}>();
</script>
<style lang="scss" scoped>
.ffcbddfc {
<style lang="scss" module>
.root {
display: block;
&.inline {
display: inline-block;
}
}
> .main {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 10px 14px;
background: var(--buttonBg);
border-radius: 6px;
font-size: 0.9em;
.main {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 10px 14px;
background: var(--buttonBg);
border-radius: 6px;
font-size: 0.9em;
&:hover {
text-decoration: none;
background: var(--buttonHoverBg);
}
&:hover {
text-decoration: none;
background: var(--buttonHoverBg);
}
&.active {
color: var(--accent);
background: var(--buttonHoverBg);
}
&.active {
color: var(--accent);
background: var(--buttonHoverBg);
}
}
> .icon {
margin-right: 0.75em;
flex-shrink: 0;
text-align: center;
color: var(--fgTransparentWeak);
.icon {
margin-right: 0.75em;
flex-shrink: 0;
text-align: center;
color: var(--fgTransparentWeak);
&:empty {
display: none;
&:empty {
display: none;
& + .text {
padding-left: 4px;
}
}
}
> .text {
flex-shrink: 1;
white-space: normal;
padding-right: 12px;
text-align: center;
}
> .right {
margin-left: auto;
opacity: 0.7;
white-space: nowrap;
> .text:not(:empty) {
margin-right: 0.75em;
}
& + .text {
padding-left: 4px;
}
}
}
.text {
flex-shrink: 1;
white-space: normal;
padding-right: 12px;
text-align: center;
}
.suffix {
margin-left: auto;
opacity: 0.7;
white-space: nowrap;
> .suffixText:not(:empty) {
margin-right: 0.75em;
}
}
</style>