MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): finish Link component (for Sidebar)

This commit is contained in:
upsiflu 2024-12-14 10:38:09 +01:00
parent 95dd23dbd0
commit 10361af8f9
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
front/src/components/ui/Link.vue
View File

@ -19,8 +19,8 @@ const isExternalLink = computed(() => {
<slot /> <slot />
</a> </a>
<RouterLink v-if="to && !isExternalLink" :to="to" :class="$style[colorClass]"> <RouterLink v-if="to && !isExternalLink" :to="to" :class="$style[colorClass]">
<slot /> <i v-if="icon" :class="['bi', icon]" />
<i v-if="icon" :class="['bi', icon]" /> <slot />
</RouterLink> </RouterLink>
</template> </template>
@ -33,7 +33,7 @@ const isExternalLink = computed(() => {
border: 1px solid var(--fw-bg-color); border: 1px solid var(--fw-bg-color);
position: relative; position: relative;
display: inline-flex; display: flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
@ -51,6 +51,19 @@ const isExternalLink = computed(() => {
transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale)); transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale));
transition: all .2s ease; transition: all .2s ease;
i {
margin-right:1ch;
font-size:1.4em;
}
&:not(:hover) {
text-decoration:none;
background-color:transparent;
border-color:transparent;
}
transition:background-color .3s, border-color .2s;
@include light-theme { @include light-theme {
&.is-secondary.is-outline { &.is-secondary.is-outline {
--fw-bg-color: var(--fw-gray-600); --fw-bg-color: var(--fw-gray-600);