/
Banner.vue
88 lines (79 loc) · 1.57 KB
/
Banner.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script setup>
/**
* Adding a new banner:
* 1. uncomment the banner slot in ../index.ts
* 2. uncomment and update BANNER_ID in ../../inlined-scripts/restorePreferences.ts
* 3. update --vt-banner-height if necessary
*/
import { ref } from 'vue'
import { VTIconPlus } from '@vue/theme'
const open = ref(true)
/**
* Call this if the banner is dismissible
*/
function dismiss() {
open.value = false
document.documentElement.classList.add('banner-dismissed')
localStorage.setItem(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'true')
}
</script>
<template>
<div class="banner" v-if="open">
<a target="_blank"></a>
<button @click="dismiss">
<VTIconPlus class="close" />
</button>
</div>
</template>
<style>
html:not(.banner-dismissed) {
--vt-banner-height: 30px;
}
</style>
<style scoped>
.banner {
position: fixed;
z-index: var(--vp-z-index-banner);
box-sizing: border-box;
top: 0;
left: 0;
right: 0;
height: var(--vt-banner-height);
line-height: var(--vt-banner-height);
text-align: center;
font-size: 13px;
font-weight: 600;
color: #fff;
background-color: var(--vt-c-green);
background: linear-gradient(
90deg,
rgba(66, 184, 131, 1) 0%,
rgba(39, 179, 137, 1) 19%,
rgba(100, 126, 255, 1) 100%
);
}
.banner-dismissed .banner {
display: none;
}
a:hover {
text-decoration: underline;
}
button {
position: absolute;
right: 0;
top: 0;
padding: 5px;
}
.close {
width: 20px;
height: 20px;
fill: #fff;
transform: rotate(45deg);
}
/*
@media (max-width: 720px) {
a > span {
display: none;
}
} */
</style>