Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Commit 53ca835

Browse files
author
Arthur Evans
committed
Adding components as regular files.
1 parent eb1d114 commit 53ca835

47 files changed

Lines changed: 3785 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎components/font-roboto2/.bower.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "font-roboto2",
3+
"homepage": "https://github.com/Polymer/font-roboto2",
4+
"version": "0.3.2",
5+
"_release": "0.3.2",
6+
"_resolution": {
7+
"type": "version",
8+
"tag": "0.3.2",
9+
"commit": "9fcb6ea2151121b0a73d1ba80abe303f15a8d954"
10+
},
11+
"_source": "git://github.com/Polymer/font-roboto2.git",
12+
"_target": ">=0.3.0 <1.0.0",
13+
"_originalSource": "Polymer/font-roboto2"
14+
}

‎components/font-roboto2/roboto2.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!--
2+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6+
Code distributed by Google as part of the polymer project is also
7+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8+
-->
9+
<link href='//fonts.googleapis.com/css?family=Roboto2:bold,regular,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>

‎components/paper-button/.bower.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "paper-button",
3+
"private": true,
4+
"dependencies": {
5+
"polymer": "Polymer/polymer#>=0.3.0 <1.0.0",
6+
"core-icon": "Polymer/core-icon#>=0.3.0 <1.0.0",
7+
"paper-focusable": "Polymer/paper-focusable#>=0.3.0 <1.0.0",
8+
"paper-ripple": "Polymer/paper-ripple#>=0.3.0 <1.0.0",
9+
"paper-shadow": "Polymer/paper-shadow#>=0.3.0 <1.0.0"
10+
},
11+
"homepage": "https://github.com/Polymer/paper-button",
12+
"version": "0.3.2",
13+
"_release": "0.3.2",
14+
"_resolution": {
15+
"type": "version",
16+
"tag": "0.3.2",
17+
"commit": "8c983a686e76f65bbebdb479ac76e7610839008b"
18+
},
19+
"_source": "git://github.com/Polymer/paper-button.git",
20+
"_target": ">=0.3.0 <1.0.0",
21+
"_originalSource": "Polymer/paper-button"
22+
}

‎components/paper-button/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
paper-button
2+
============
3+
4+
paper-button

‎components/paper-button/bower.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "paper-button",
3+
"private": true,
4+
"dependencies": {
5+
"polymer": "Polymer/polymer#>=0.3.0 <1.0.0",
6+
"core-icon": "Polymer/core-icon#>=0.3.0 <1.0.0",
7+
"paper-focusable": "Polymer/paper-focusable#>=0.3.0 <1.0.0",
8+
"paper-ripple": "Polymer/paper-ripple#>=0.3.0 <1.0.0",
9+
"paper-shadow": "Polymer/paper-shadow#>=0.3.0 <1.0.0"
10+
}
11+
}

‎components/paper-button/demo.html‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!doctype html>
2+
<!--
3+
Copyright 2013 The Polymer Authors. All rights reserved.
4+
Use of this source code is governed by a BSD-style
5+
license that can be found in the LICENSE file.
6+
-->
7+
<html>
8+
<head>
9+
<title>paper-button</title>
10+
<meta charset="utf-8">
11+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
12+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
13+
<script src="../platform/platform.js"></script>
14+
<link href="../font-roboto2/roboto2.html" rel="import">
15+
<link href="../core-icons/core-icons.html" rel="import">
16+
<link href="paper-button.html" rel="import">
17+
<style shim-shadowdom>
18+
body {
19+
font-family: Roboto2, 'Helvetica Neue', Helvetica, Arial;
20+
font-size: 14px;
21+
text-align: center;
22+
padding: 1em 2em;
23+
transform: translateZ(0);
24+
-webkit-transform: translateZ(0);
25+
transform: translateZ(0);
26+
}
27+
h1 {
28+
margin-bottom: 2em;
29+
}
30+
31+
section {
32+
display: inline-block;
33+
background: #f7f7f7;
34+
border-radius: 3px;
35+
width: 25%;
36+
text-align: center;
37+
margin: 1%;
38+
padding: 1em;
39+
}
40+
41+
paper-button {
42+
margin: 1em;
43+
width: 10em;
44+
}
45+
46+
paper-button.colored {
47+
color: #4285f4;
48+
fill: #4285f4;
49+
}
50+
51+
paper-button[raisedButton].colored {
52+
background: #4285f4;
53+
color: #fff;
54+
}
55+
paper-button[raisedButton].colored.hover:hover {
56+
background: #3367d6;
57+
}
58+
paper-button[raisedButton].colored::shadow #ripple {
59+
color: #2a56c6;
60+
}
61+
paper-button[raisedButton].colored::shadow #focusBg {
62+
background: #3367d6;
63+
}
64+
65+
.label {
66+
text-align: left;
67+
color: #bbb;
68+
font-size: 12px;
69+
margin-top: 2em;
70+
}
71+
</style>
72+
</head>
73+
<body unresolved>
74+
75+
<h1>&lt;paper-button&gt;</h1>
76+
77+
<section>
78+
<paper-button label="button"></paper-button>
79+
<br>
80+
<paper-button class="colored" label="colored"></paper-button>
81+
<br>
82+
<paper-button disabled label="disabled"></paper-button>
83+
<br>
84+
<div class="label">flat</div>
85+
</section>
86+
87+
<section>
88+
<paper-button raisedButton label="button"></paper-button>
89+
<br>
90+
<paper-button raisedButton class="colored" label="colored"></paper-button>
91+
<br>
92+
<paper-button raisedButton disabled label="disabled"></paper-button>
93+
<br>
94+
<div class="label">raised</div>
95+
</section>
96+
97+
<br>
98+
<br>
99+
100+
<section>
101+
<paper-button class="hover" label="button"></paper-button>
102+
<br>
103+
<paper-button class="colored hover" label="colored"></paper-button>
104+
<br>
105+
<div class="label">flat + hover state</div>
106+
</section>
107+
108+
<section>
109+
<paper-button raisedButton class="hover" label="button"></paper-button>
110+
<br>
111+
<paper-button raisedButton class="colored hover" label="colored"></paper-button>
112+
<br>
113+
<div class="label">raised + hover state</div>
114+
</section>
115+
116+
<br>
117+
<br>
118+
119+
<section>
120+
<paper-button focused label="button"></paper-button>
121+
<br>
122+
<paper-button focused class="colored" label="colored"></paper-button>
123+
<br>
124+
<div class="label">flat + focused</div>
125+
</section>
126+
127+
<section>
128+
<paper-button raisedButton focused label="button"></paper-button>
129+
<br>
130+
<paper-button raisedButton focused class="colored" label="colored"></paper-button>
131+
<br>
132+
<div class="label">raised + focused</div>
133+
</section>
134+
135+
</body>
136+
</html>

‎components/paper-button/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<!--
3+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
5+
The complete set of authors may be found at http://polymer.github.io/AUTHORS
6+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
7+
Code distributed by Google as part of the polymer project is also
8+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
9+
-->
10+
<html>
11+
<head>
12+
13+
<script src="../platform/platform.js"></script>
14+
<link rel="import" href="../polymer/polymer.html">
15+
<link rel="import" href="../core-component-page/core-component-page.html">
16+
17+
</head>
18+
<body unresolved>
19+
20+
<core-component-page></core-component-page>
21+
22+
</body>
23+
</html>

‎components/paper-button/metadata.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<x-meta id="paper-button" label="Quantum Paper Button" isContainer>
2+
<template>
3+
<paper-button label="Paper Button"></paper-button>
4+
</template>
5+
<template id="imports">
6+
<link rel="import" href="paper-button.html">
7+
</template>
8+
</x-meta>

‎components/paper-button/paper-button.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
:host {
2+
display: inline-block;
3+
border: 0;
4+
background: transparent;
5+
text-align: center;
6+
font: inherit;
7+
text-transform: uppercase;
8+
outline: none;
9+
border-radius: 3px;
10+
-webkit-user-select: none;
11+
user-select: none;
12+
cursor: pointer;
13+
}
14+
15+
:host(.hover:hover) {
16+
background: #e4e4e4;
17+
}
18+
19+
:host([raisedButton]) {
20+
background: #dfdfdf;
21+
}
22+
23+
:host([raisedButton].hover:hover) {
24+
background: #d6d6d6;
25+
}
26+
27+
:host([disabled]) {
28+
background: #eaeaea !important;
29+
color: #a8a8a8 !important;
30+
cursor: auto;
31+
}
32+
33+
#clip {
34+
position: relative;
35+
border-radius: inherit;
36+
overflow: hidden;
37+
}
38+
39+
#focusBg {
40+
position: absolute;
41+
top: 0;
42+
left: 0;
43+
bottom: 0;
44+
right: 0;
45+
opacity: 0;
46+
border-radius: inherit;
47+
background: #c3c3c3;
48+
-webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
49+
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
50+
}
51+
52+
:host([focused]) #focusBg {
53+
-webkit-transition: none;
54+
transition: none;
55+
-webkit-animation: focus-fade 0.7s infinite alternate;
56+
animation: focus-fade 0.7s infinite alternate;
57+
}
58+
59+
@-webkit-keyframes focus-fade {
60+
0% {
61+
opacity: 1;
62+
}
63+
100% {
64+
opacity: 0;
65+
}
66+
}
67+
68+
@keyframes focus-fade {
69+
0% {
70+
opacity: 1;
71+
}
72+
100% {
73+
opacity: 0;
74+
}
75+
}
76+
77+
#ripple {
78+
position: absolute;
79+
top: 0;
80+
left: 0;
81+
bottom: 0;
82+
right: 0;
83+
color: #d1d1d1;
84+
pointer-events: none;
85+
}
86+
87+
:host([raisedButton]) #ripple {
88+
color: #cecece;
89+
}
90+
91+
#ripple::shadow canvas {
92+
top: 0;
93+
left: 0;
94+
}
95+
96+
#content {
97+
/* needed to position the ink behind the content */
98+
position: relative;
99+
}
100+
101+
#icon {
102+
margin: 8px;
103+
}
104+
105+
#content > span {
106+
display: inline-block;
107+
margin: 0.5em;
108+
}

0 commit comments

Comments
 (0)