-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
101 lines (94 loc) · 4.53 KB
/
demo.html
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
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="/dist/index.js"></script>
<title>VSCode Webview Playground</title>
<style>
.badge {
background-color: var(--vscode-badge-background);
border: 1px solid var(--vscode-contrastBorder, transparent);
border-radius: 2px;
box-sizing: border-box;
color: var(--vscode-badge-foreground);
display: inline-block;
font-family: var(--vscode-font-family);
font-size: 11px;
font-weight: 400;
line-height: 14px;
min-width: 18px;
padding: 2px 3px;
text-align: center;
white-space: nowrap;
}
.badge.counter {
border-radius: 11px;
box-sizing: border-box;
height: 18px;
line-height: 1;
padding: 3px 5px;
}
.badge.activity-bar-counter {
background-color: var(--vscode-activityBarBadge-background);
border-radius: 20px;
color: var(--vscode-activityBarBadge-foreground);
font-size: 9px;
font-weight: 600;
line-height: 16px;
padding: 0 4px;
}
</style>
</head>
<body>
<vscode-demo>
<span class="badge">308 Settings Found</span>
</vscode-demo>
<vscode-demo>
<span class="badge counter">42</span>
</vscode-demo>
<vscode-demo>
<span class="badge activity-bar-counter">42</span>
</vscode-demo>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<pre><code>npm install lipsum</code></pre> Ut finibus imperdiet nisl. <a href="#">Nunc vel nisl a felis pretium
venenatis quis vel mauris.</a> Mauris eget urna gravida, tincidunt arcu at, volutpat felis. Integer quis diam ut dui
aliquam viverra. Proin ex sem, euismod in dui nec, tincidunt auctor sem. Nunc vel leo non mi lobortis vulputate.
Aenean cursus libero ligula, at dignissim dui semper ut. Pellentesque porttitor euismod eleifend. Nam in condimentum
tortor. In posuere metus orci, vel pretium ipsum rutrum dapibus. Nam dignissim sit amet leo a porta.</p>
<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd></p>
<blockquote>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed mauris odio,
suscipit vel augue sed, luctus euismod nisi. Sed iaculis nisi vel nunc tincidunt egestas. Aliquam erat volutpat.
Nunc non condimentum velit. Integer dapibus lacus a urna maximus mattis. Proin elementum commodo tortor vel
molestie. Pellentesque vestibulum elit ac nulla rhoncus, nec cursus justo auctor.
</p>
</blockquote>
<p>Pellentesque non sem mattis, auctor nisi in, lacinia diam. Aliquam erat volutpat. Suspendisse viverra ut nisl nec
facilisis. Fusce congue purus quis libero eleifend lobortis. Morbi ullamcorper tortor sed dictum cursus. Nunc eget
ante et ipsum euismod tempor nec quis augue. Maecenas sit amet vulputate justo, et elementum dolor. Aliquam erat
volutpat.</p>
<vscode-demo>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<pre><code>npm install lipsum</code></pre> Ut finibus imperdiet nisl. <a href="#">Nunc vel nisl a felis pretium
venenatis quis vel mauris.</a> Mauris eget urna gravida, tincidunt arcu at, volutpat felis. Integer quis diam ut
dui aliquam viverra. Proin ex sem, euismod in dui nec, tincidunt auctor sem. Nunc vel leo non mi lobortis vulputate.
Aenean cursus libero ligula, at dignissim dui semper ut. Pellentesque porttitor euismod eleifend. Nam in condimentum
tortor. In posuere metus orci, vel pretium ipsum rutrum dapibus. Nam dignissim sit amet leo a porta.</p>
<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd></p>
<blockquote>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed mauris odio,
suscipit vel augue sed, luctus euismod nisi. Sed iaculis nisi vel nunc tincidunt egestas. Aliquam erat volutpat.
Nunc non condimentum velit. Integer dapibus lacus a urna maximus mattis. Proin elementum commodo tortor vel
molestie. Pellentesque vestibulum elit ac nulla rhoncus, nec cursus justo auctor.
</p>
</blockquote>
<p>Pellentesque non sem mattis, auctor nisi in, lacinia diam. Aliquam erat volutpat. Suspendisse viverra ut nisl nec
facilisis. Fusce congue purus quis libero eleifend lobortis. Morbi ullamcorper tortor sed dictum cursus. Nunc eget
ante et ipsum euismod tempor nec quis augue. Maecenas sit amet vulputate justo, et elementum dolor. Aliquam erat
volutpat.</p>
</vscode-demo>
</body>
</html>