You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.5 KiB
Vue
136 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { normalizeLink } from 'vitepress/dist/client/theme-default/support/utils'
|
|
import { EXTERNAL_URL_RE } from 'vitepress/dist/client/shared'
|
|
|
|
const props = defineProps<{
|
|
tag?: string
|
|
theme?: 'brand' | 'alt' | 'sponsor'
|
|
text: string
|
|
href?: string
|
|
target?: string
|
|
}>()
|
|
|
|
const classes = computed(() => [
|
|
props.theme ?? 'brand'
|
|
])
|
|
|
|
const isExternal = computed(() => props.href && EXTERNAL_URL_RE.test(props.href))
|
|
|
|
const component = computed(() => {
|
|
if (props.tag) {
|
|
return props.tag
|
|
}
|
|
|
|
return props.href ? 'a' : 'button'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
:is="component"
|
|
class="Button"
|
|
:class="classes"
|
|
:href="href ? normalizeLink(href) : undefined"
|
|
:target="target ?? (isExternal ? '_blank' : undefined)"
|
|
:rel="isExternal ? 'noreferrer' : undefined"
|
|
:aria-label="text"
|
|
>
|
|
{{ text }}
|
|
</component>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.Button {
|
|
position: relative;
|
|
display: inline-block;
|
|
border: 4px solid transparent;
|
|
border-radius: 8px;
|
|
padding: 8px 18px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
transition: all 0.25s, color 0.25s;
|
|
}
|
|
|
|
.Button.alt {
|
|
border: 4px solid var(--vp-c-gray-1);
|
|
}
|
|
|
|
.Button.alt:hover {
|
|
background-color: var(--vp-c-gray-1);
|
|
color: var(--vp-c-black);
|
|
}
|
|
|
|
.Button.alt:active {
|
|
border-color: var(--vp-c-black);
|
|
background-color: var(--vp-c-black);
|
|
color: var(--vp-c-white);
|
|
}
|
|
|
|
.Button.cta:hover {
|
|
background-color: var(--vp-c-gray-1);
|
|
color: var(--vp-c-black);
|
|
}
|
|
|
|
.Button.cta:before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 25px;
|
|
height: 25px;
|
|
top: calc(50% - 12.5px);
|
|
left: 12px;
|
|
}
|
|
|
|
.Button.cta.question {
|
|
padding-left: 45px;
|
|
}
|
|
|
|
.Button.cta.question::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="dodgerblue" class="w-6 h-6"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" /></svg>');
|
|
background-size: 25px;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.Button.brand {
|
|
border-color: var(--vp-button-brand-bg);
|
|
color: var(--vp-button-brand-active-text);
|
|
background-color: var(--vp-button-brand-bg);
|
|
}
|
|
|
|
.Button.brand:hover {
|
|
border-color: var(--vp-button-brand-hover-bg);
|
|
color: var(--vp-button-brand-active-text);
|
|
background-color: var(--vp-button-brand-hover-bg);
|
|
}
|
|
|
|
.Button.brand:active {
|
|
border-color: var(--vp-button-brand-active-bg);
|
|
color: var(--vp-button-brand-active-text);
|
|
background-color: var(--vp-button-brand-active-bg);
|
|
}
|
|
|
|
.Button.sponsor {
|
|
border-color: var(--vp-button-sponsor-border);
|
|
color: var(--vp-button-sponsor-text);
|
|
background-color: var(--vp-button-sponsor-bg);
|
|
}
|
|
|
|
.Button.sponsor:hover {
|
|
border-color: var(--vp-button-sponsor-hover-border);
|
|
color: var(--vp-button-sponsor-hover-text);
|
|
background-color: var(--vp-button-sponsor-hover-bg);
|
|
}
|
|
|
|
.Button.sponsor:active {
|
|
border-color: var(--vp-button-sponsor-active-border);
|
|
color: var(--vp-button-sponsor-active-text);
|
|
background-color: var(--vp-button-sponsor-active-bg);
|
|
}
|
|
</style> |