forked from cypress-io/cypress-example-recipes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
114 lines (108 loc) · 3.53 KB
/
index.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
102
103
104
105
106
107
108
109
110
111
112
113
114
<head>
<script type="module" src="https://unpkg.com/@github/clipboard-copy-element@latest" defer></script>
<script src="https://unpkg.com/[email protected]/dist/tiny-toast.js" defer></script>
<style>
pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #f6f8fa;
border-radius: 6px;
}
.snippet-clipboard-content {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
position: relative!important;
}
.zeroclipboard-container {
display: none;
animation: fade-out .2s both;
}
.right-0 {
right: 0!important;
}
.top-0 {
top: 0!important;
}
.position-relative {
position: relative!important;
}
.position-absolute {
position: absolute!important;
}
.p-0 {
padding:0!important;
}
.m-2 {
margin: 8px!important;
}
.ClipboardButton {
position: relative;
}
.btn {
position: relative;
display: inline-block;
padding: 5px 16px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid;
border-radius: 6px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.btn .octicon {
color: lightgray;
margin-right: 4px;
vertical-align: text-bottom;
}
.octicon {
display: inline-block;
overflow: visible!important;
vertical-align: text-bottom;
}
</style>
</head>
<body>
<h1>Clipboard</h1>
<div class="snippet-clipboard-content position-relative">
<pre><code>$ npm install -D cypress</code></pre>
<div class="zeroclipboard-container position-absolute right-0 top-0">
<clipboard-copy aria-label="Copy"
class="ClipboardButton btn js-clipboard-copy m-2 p-0 tooltipped-no-delay"
data-copy-feedback="Copied!"
data-tooltip-direction="w"
value="npm install -D cypress" tabindex="0" role="button">
<svg aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true" height="16" width="16" class="octicon octicon-clippy js-clipboard-clippy-icon m-2">
<path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path>
</svg>
</clipboard-copy>
</div>
</div>
<textarea id="paste-here" rows="4" cols="40"></textarea>
<script>
const contents = document.querySelector('.snippet-clipboard-content')
const clipboardContainer = contents.querySelector('.zeroclipboard-container')
contents.addEventListener('mouseover', (e) => {
clipboardContainer.style.display = 'inherit'
})
contents.addEventListener('mouseout', (e) => {
clipboardContainer.style.display = 'none'
})
document.addEventListener('clipboard-copy', function(event) {
tinyToast.show('Copied!').hide(1500)
})
</script>
</body>