mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
Adds base website by using some bower dependencies
This commit is contained in:
Zeno Rocha
parent
6ecabeb38f
commit
10fdf4ff1c
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
||||
bower_components
|
||||
node_modules
|
||||
|
||||
16
bower.json
Normal file
16
bower.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "clipboard",
|
||||
"version": "0.0.0",
|
||||
"description": "A modern approach to copy & cut to the clipboard",
|
||||
"license": "MIT",
|
||||
"main": "src/clipboard.js",
|
||||
"keywords": [
|
||||
"clipboard",
|
||||
"copy",
|
||||
"cut"
|
||||
],
|
||||
"devDependencies": {
|
||||
"primer-css": "~2.3.3",
|
||||
"octicons": "~3.1.0"
|
||||
}
|
||||
}
|
||||
61
demo.css
Normal file
61
demo.css
Normal file
@ -0,0 +1,61 @@
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Header
|
||||
========================================================================== */
|
||||
|
||||
header {
|
||||
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));
|
||||
background: -webkit-linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%);
|
||||
background: -o-linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%);
|
||||
background: -ms-linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%);
|
||||
background: linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cd964', endColorstr='#5ac8fa', GradientType=1 );
|
||||
margin: 0 auto;
|
||||
padding: 36px 0;
|
||||
}
|
||||
|
||||
header .title {
|
||||
font-size: 64px;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
header .subtitle {
|
||||
font-size: 27px;
|
||||
color: #16a085;
|
||||
font-weight: 400;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Main
|
||||
========================================================================== */
|
||||
|
||||
.wrap {
|
||||
margin: 0 auto 30px;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #333;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
47
index.html
47
index.html
@ -2,16 +2,51 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Clipboard.js</title>
|
||||
<title>clipboard.js</title>
|
||||
|
||||
<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="https://fonts.googleapis.com/css?family=Montserrat:400,700">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body>
|
||||
<button class="btn" data-action="copy" data-value="lorem ipsum">Copy</button>
|
||||
<header class="text-center">
|
||||
<h1 class="title">clipboard.js</h1>
|
||||
<h2 class="subtitle">A modern approach to copy & cut to the clipboard</h2>
|
||||
<h2 class="subtitle" style="color: white">No Flash. No dependencies. Just 2kb</h2>
|
||||
</header>
|
||||
|
||||
<blockquote id="foo">Lorem ipsum dolor.</blockquote>
|
||||
<button class="btn" data-action="copy" data-target="foo">Copy</button>
|
||||
<main class="wrap">
|
||||
<h3>Copy text from attribute</h3>
|
||||
|
||||
<input id="bar" type="text" value="qwe">
|
||||
<button class="btn" data-action="cut" data-target="bar">Cut</button>
|
||||
<button class="btn" data-action="copy" data-value="Just because you can doesn't mean you should — clipboard.js">Copy to the clipboard</button>
|
||||
|
||||
<h3>Copy text from another element</h3>
|
||||
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git">
|
||||
<span class="input-group-button">
|
||||
<button class="btn" type="button" data-action="copy" data-target="foo">
|
||||
<span class="octicon octicon-clippy"></span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h3>Cut text from another element</h3>
|
||||
|
||||
<form>
|
||||
<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>
|
||||
<div class="form-actions">
|
||||
<button class="btn" type="button" data-action="cut" data-target="bar">
|
||||
Cut to the clipboard
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<script src="dist/clipboard.min.js"></script>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "clipboard.js",
|
||||
"name": "clipboard",
|
||||
"version": "0.0.0",
|
||||
"description": "A modern approach to copy to the clipboard",
|
||||
"main": "src/clipboard.js",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user