mirror/clipboard.js
1
0
Fork 0
mirror of https://github.com/zenorocha/clipboard.js.git synced 2023-08-10 21:12:48 +03:00
Code Issues Projects Releases Wiki Activity

Adds better demo styling, footer and GA

Browse Source
This commit is contained in:
Zeno Rocha 2015-09-19 01:38:46 -07:00
parent e8c26f6064
commit fb6365e222
2 changed files with 156 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
demo.css
View File

@ -2,11 +2,7 @@ body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* ==========================================================================
Header
========================================================================== */
header {
.gradient {
background: #4cd964;
background: -moz-linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, #4cd964), color-stop(100%, #5ac8fa));
@ -19,7 +15,11 @@ header {
padding: 36px 0;
}
header .title {
/* ==========================================================================
Header
========================================================================== */
.title {
font-size: 64px;
color: white;
font-weight: 700;
@ -27,7 +27,7 @@ header .title {
letter-spacing: -1px;
}
header .subtitle {
.subtitle {
font-size: 27px;
color: #16a085;
font-weight: 400;
@ -41,18 +41,43 @@ header .subtitle {
.wrap {
margin: 0 auto 30px;
width: 480px;
width: 500px;
}
h3 {
color: #333;
margin-top: 30px;
text-align: center;
font-size: 18px;
}
p {
color: #333;
font-size: 16px;
line-height: 1.6;
}
code {
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
font-size: 85%;
margin: 0;
padding: 0.2em;
}
.hljs-keyword {
color: #008080;
font-weight: normal;
}
.form-actions {
margin-top: 15px;
}
.form-actions .btn {
float: left;
}
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -63,5 +88,88 @@ textarea {
pre code {
font-size: 14px;
line-height: 20px;
margin-top: 15px;
}
/* Example
========================================================================== */
.example {
position: relative;
margin: 15px 0 0;
padding: 39px 19px 14px;
background-color: #fff;
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
}
.example p {
color: #666;
}
.example:after {
content: "Example";
position: absolute;
top: 0;
left: 0;
padding: 2px 8px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
color: #9da0a4;
border-radius: 4px 0 4px 0;
}
.example + pre {
background: #f8f8f8;
border-radius: 4px;
border: 1px solid #ddd;
clear: both;
margin-top: -20px;
padding: 20px 5px 0;
}
/* ==========================================================================
Footer
========================================================================== */
.credits {
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: #16a085;
}
.credits-link {
color: white;
text-decoration: none;
border-bottom: 1px dotted white;
}
.credits-link:hover,
.credits-link:focus {
text-decoration: none;
}
.love {
display: inline-block;
position: relative;
top: .2em;
font-size: 1.4em;
-webkit-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
-webkit-animation: love .5s infinite linear alternate-reverse;
-moz-animation: love .5s infinite linear alternate-reverse;
animation: love .5s infinite linear alternate-reverse;
}
@-webkit-keyframes love {
to {-webkit-transform: scale(1.2);}
}
@-moz-keyframes love {
to {-moz-transform: scale(1.2);}
}
@keyframes love {
to {transform: scale(1.2);}
}

45
index.html
View File

@ -6,27 +6,41 @@
<link rel="stylesheet" href="bower_components/primer-css/css/primer.css">
<link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">
<link rel="stylesheet" href="bower_components/highlightjs/styles/github.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
<link rel="stylesheet" href="demo.css">
</head>
<body>
<header class="text-center">
<header class="gradient text-center">
<h1 class="title">clipboard.js</h1>
<h2 class="subtitle">A modern approach to copy &amp; cut to the clipboard</h2>
<h2 class="subtitle" style="color: white">No Flash. No dependencies. Just 2kb</h2>
</header>
<main class="wrap">
<h1>Usage</h1>
<p>First, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <code>&lt;button&gt;</code>.</p>
<pre><code class="js">new Clipboard('.btn');</code></pre>
<h3>Copy text from attribute</h3>
<button class="btn" data-action="copy" data-value="Just because you can doesn't mean you should — clipboard.js">Copy to the clipboard</button>
<p>The easiest way to copy some content to the clipboard, is to include a <code>data-value</code> attribute in your trigger element.</p>
<form class="example">
<button class="btn" data-action="copy" data-value="Just because you can doesn't mean you should — clipboard.js">Copy to the clipboard</button>
</form>
<pre><code class="html">&lt;!-- Trigger --&gt;
&lt;button class="btn" data-value="Heya!"&gt;Copy&lt;/button&gt;</code></pre>
<h3>Copy text from another element</h3>
<form>
<p>Alternatively, you can copy content from another element by adding a <code>data-target</code> attribute in your trigger element.</p>
<p>The value you include on this attribute needs to match another's element <code>id</code> attribute.</p>
<form class="example">
<div class="input-group">
<input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git">
<span class="input-group-button">
@ -45,7 +59,10 @@
<h3>Cut text from another element</h3>
<form>
<p>Additionally, you can define a <code>data-action</code> attribute to specify if you want to either <code>copy</code> or <code>cut</code> content.</p>
<p>If you omit this attribute, <code>copy</code> will be used by default.</p>
<form class="example">
<div class="input-group">
<textarea id="bar" cols="62" rows="4" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
</div>
@ -63,9 +80,15 @@
&lt;button class="btn" data-action="cut" data-target="bar"&gt;
Copy
&lt;/button&gt;</code></pre>
<p>As you may expect, the <code>cut</code> action only works on <code>&lt;input&gt;</code> or <code>&lt;textarea&gt;</code> elements.</p>
</main>
<script src="dist/clipboard.min.js"></script>
<footer class="gradient text-center">
<p class="credits">
Made with <span class="love">♥</span> by <a class="credits-link" href="http://zenorocha.com/">Zeno Rocha</a> under <a class="credits-link" href="http://zenorocha.mit-license.org/">MIT license</a>
</p>
</footer>
<!-- Clipboard.js -->
<script src="dist/clipboard.min.js"></script>
@ -76,8 +99,18 @@
</script>
<!-- Highlight.js -->
<link rel="stylesheet" href="bower_components/highlightjs/styles/github.css">
<script src="bower_components/highlightjs/highlight.pack.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4114546-44', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>