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
|
<script setup lang="ts">
const { element } = useDocSearch()
const onClick = () => element.value.querySelector('button').click()
</script>
<template>
<div class="doc-search" @click="onClick">
<button type="button" aria-label="Search">
<span class="content">
<Icon name="heroicons-outline:search" />
<span>Search</span>
<span>
<kbd>⌘</kbd>
<kbd>K</kbd>
</span>
</span>
</button>
</div>
</template>
<style scoped lang="ts">
css({
'.doc-search': {
'&:hover': {
button: {
borderColor: '{color.gray.300}'
}
},
button: {
padding: '{space.2} {space.4}',
'.content': {
borderRadius: '{radii.md}',
display: 'flex',
alignItems: 'center',
color: '{color.gray.500}',
borderStyle: 'solid',
borderWidth: '1px',
borderColor: '{color.gray.100}',
fontSize: '{fontSize.xs}',
gap: '{space.2}',
padding: '{space.rem.375}',
'@dark': {
color: '{color.gray.400}',
borderColor: '{color.gray.900}',
},
'&:hover': {
color: '{color.gray.700}',
borderColor: '{color.gray.400}',
'@dark': {
color: '{color.gray.200}',
borderColor: '{color.gray.700}',
}
},
span: {
'&:first-child': {
display: 'block',
fontSize: '{fontSize.xs}',
fontWeight: '{fontWeight.medium}',
},
'&:nth-child(2)': {
flex: 'none',
display: 'none',
fontSize: '{fontSize.xs}',
fontWeight: '{fontWeight.semibold}',
'@sm': {
display: 'block'
}
}
}
}
},
}
})
</style>
|