Added Polymer
This commit is contained in:
Thaum
23
rpg-docs/public/bower_components/paper-checkbox/.bower.json
vendored
Normal file
23
rpg-docs/public/bower_components/paper-checkbox/.bower.json
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "paper-checkbox",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"font-roboto": "Polymer/font-roboto#^0.5.0",
|
||||
"core-label": "Polymer/core-label#^0.5.0",
|
||||
"paper-radio-button": "Polymer/paper-radio-button#^0.5.0"
|
||||
},
|
||||
"ignore": [
|
||||
"externs/**"
|
||||
],
|
||||
"version": "0.5.1",
|
||||
"homepage": "https://github.com/Polymer/paper-checkbox",
|
||||
"_release": "0.5.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "0.5.1",
|
||||
"commit": "c82e4cbd5b91afdedaba6a614d32fabb1b610621"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/paper-checkbox.git",
|
||||
"_target": "^0.5.0",
|
||||
"_originalSource": "Polymer/paper-checkbox"
|
||||
}
|
||||
4
rpg-docs/public/bower_components/paper-checkbox/README.md
vendored
Normal file
4
rpg-docs/public/bower_components/paper-checkbox/README.md
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
paper-checkbox
|
||||
===================
|
||||
|
||||
See the [component page](http://www.polymer-project.org/docs/elements/paper-elements.html#paper-checkbox) for more information.
|
||||
13
rpg-docs/public/bower_components/paper-checkbox/bower.json
vendored
Normal file
13
rpg-docs/public/bower_components/paper-checkbox/bower.json
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "paper-checkbox",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"font-roboto": "Polymer/font-roboto#^0.5.0",
|
||||
"core-label": "Polymer/core-label#^0.5.0",
|
||||
"paper-radio-button": "Polymer/paper-radio-button#^0.5.0"
|
||||
},
|
||||
"ignore": [
|
||||
"externs/**"
|
||||
],
|
||||
"version": "0.5.1"
|
||||
}
|
||||
114
rpg-docs/public/bower_components/paper-checkbox/demo.html
vendored
Normal file
114
rpg-docs/public/bower_components/paper-checkbox/demo.html
vendored
Normal file
@@ -0,0 +1,114 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>paper-checkbox</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||||
|
||||
<link rel="import" href="paper-checkbox.html">
|
||||
<link rel="import" href="../font-roboto/roboto.html">
|
||||
<link rel="import" href="../core-label/core-label.html">
|
||||
|
||||
<style shim-shadowdom>
|
||||
|
||||
body {
|
||||
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
paper-checkbox {
|
||||
padding: 20px 20px 20px 0;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
paper-checkbox.blue::shadow #ink[checked] {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
paper-checkbox.blue::shadow #checkbox.checked {
|
||||
border-color: #4285f4;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<core-label horizontal layout>
|
||||
<paper-checkbox for></paper-checkbox>
|
||||
<div vertical layout>
|
||||
<h4>Notifications</h4>
|
||||
<div>Notify me about updates to apps or games that I've downloaded</div>
|
||||
</div>
|
||||
</core-label>
|
||||
|
||||
<br>
|
||||
|
||||
<core-label horizontal layout>
|
||||
<paper-checkbox checked for></paper-checkbox>
|
||||
<div vertical layout>
|
||||
<h4>Auto-updates</h4>
|
||||
<div>Auto-update apps over wifi only</div>
|
||||
</div>
|
||||
</core-label>
|
||||
|
||||
<br>
|
||||
|
||||
<core-label horizontal layout>
|
||||
<paper-checkbox for></paper-checkbox>
|
||||
<div vertical layout>
|
||||
<h4>Clear search history</h4>
|
||||
<div>Remove all the searches you have ever performed</div>
|
||||
</div>
|
||||
</core-label>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<section>
|
||||
|
||||
<h3>Sound</h3>
|
||||
|
||||
<core-label center horizontal layout>
|
||||
<div flex>Touch sounds</div>
|
||||
<paper-checkbox class="blue" checked for></paper-checkbox>
|
||||
</core-label>
|
||||
|
||||
<core-label center horizontal layout>
|
||||
<div flex>Screen lock sound</div>
|
||||
<paper-checkbox class="blue" for></paper-checkbox>
|
||||
</core-label>
|
||||
|
||||
<core-label center horizontal layout>
|
||||
<div flex>Vibrate on touch</div>
|
||||
<paper-checkbox class="blue" for></paper-checkbox>
|
||||
</core-label>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
rpg-docs/public/bower_components/paper-checkbox/index.html
vendored
Normal file
22
rpg-docs/public/bower_components/paper-checkbox/index.html
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||||
<link rel="import" href="../core-component-page/core-component-page.html">
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<core-component-page></core-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
17
rpg-docs/public/bower_components/paper-checkbox/metadata.html
vendored
Normal file
17
rpg-docs/public/bower_components/paper-checkbox/metadata.html
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<x-meta id="paper-checkbox" label="Checkbox" group="Paper">
|
||||
<template>
|
||||
<paper-checkbox label="click me"></paper-checkbox>
|
||||
</template>
|
||||
<template id="imports">
|
||||
<link rel="import" href="paper-checkbox.html">
|
||||
</template>
|
||||
</x-meta>
|
||||
263
rpg-docs/public/bower_components/paper-checkbox/paper-checkbox.css
vendored
Normal file
263
rpg-docs/public/bower_components/paper-checkbox/paper-checkbox.css
vendored
Normal file
@@ -0,0 +1,263 @@
|
||||
/*
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:host(:focus) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#checkboxContainer {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
#checkboxContainer.labeled {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#ink {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: #5a5f5a;
|
||||
}
|
||||
|
||||
#ink[checked] {
|
||||
color: #0f9d58;
|
||||
}
|
||||
|
||||
#checkbox {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: solid 2px;
|
||||
border-color: #5a5a5a;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* checkbox checked animations */
|
||||
#checkbox.checked.box {
|
||||
border: solid 2px;
|
||||
-webkit-animation: box-shrink 140ms ease-out forwards;
|
||||
animation: box-shrink 140ms ease-out forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes box-shrink {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
top: 13px;
|
||||
left: 5px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes box-shrink {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(45deg);
|
||||
top: 13px;
|
||||
left: 5px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
#checkbox.checked.checkmark {
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
-webkit-animation: checkmark-expand 140ms ease-out forwards;
|
||||
animation: checkmark-expand 140ms ease-out forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes checkmark-expand {
|
||||
0% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
top: 13px;
|
||||
left: 5px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
top: -4px;
|
||||
left: 6px;
|
||||
width: 10px;
|
||||
height: 21px;
|
||||
border-right-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmark-expand {
|
||||
0% {
|
||||
transform: rotate(45deg);
|
||||
top: 13px;
|
||||
left: 5px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(45deg);
|
||||
top: -4px;
|
||||
left: 6px;
|
||||
width: 10px;
|
||||
height: 21px;
|
||||
border-right-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
#checkbox.checked {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
top: -4px;
|
||||
left: 6px;
|
||||
width: 10px;
|
||||
height: 21px;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-color: #0f9d58;
|
||||
}
|
||||
|
||||
/* checkbox unchecked animations */
|
||||
#checkbox.unchecked.checkmark {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
-webkit-animation: checkmark-shrink 140ms ease-out forwards;
|
||||
animation: checkmark-shrink 140ms ease-out forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes checkmark-shrink {
|
||||
0% {
|
||||
top: -4px;
|
||||
left: 6px;
|
||||
width: 10px;
|
||||
height: 21px;
|
||||
border-right-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
100% {
|
||||
top: 13px;
|
||||
left: 5px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmark-shrink {
|
||||
0% {
|
||||
top: -4px;
|
||||
left: 6px;
|
||||
width: 10px;
|
||||
height: 21px;
|
||||
border-right-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
100% {
|
||||
top: 13px;
|
||||
left: 5px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
#checkbox.unchecked.box {
|
||||
-webkit-animation: box-expand 140ms ease-out forwards;
|
||||
animation: box-expand 140ms ease-out forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes box-expand {
|
||||
0% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
top: 13px;
|
||||
left: 5px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes box-expand {
|
||||
0% {
|
||||
transform: rotate(45deg);
|
||||
top: 13px;
|
||||
left: 5px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* label */
|
||||
#checkboxLabel {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-left: 8px;
|
||||
white-space: normal;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#checkboxLabel[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* disabled state */
|
||||
:host([disabled]) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host([disabled]) #checkbox {
|
||||
opacity: 0.33;
|
||||
border-color: #5a5a5a;
|
||||
}
|
||||
110
rpg-docs/public/bower_components/paper-checkbox/paper-checkbox.html
vendored
Normal file
110
rpg-docs/public/bower_components/paper-checkbox/paper-checkbox.html
vendored
Normal file
@@ -0,0 +1,110 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<!--
|
||||
`paper-checkbox` is a button that can be either checked or unchecked. User
|
||||
can tap the checkbox to check or uncheck it. Usually you use checkboxes
|
||||
to allow user to select multiple options from a set. If you have a single
|
||||
ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
|
||||
instead.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-checkbox></paper-checkbox>
|
||||
|
||||
<paper-checkbox checked></paper-checkbox>
|
||||
|
||||
Styling checkbox:
|
||||
|
||||
To change the ink color for checked state:
|
||||
|
||||
paper-checkbox::shadow #ink[checked] {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
To change the checkbox checked color:
|
||||
|
||||
paper-checkbox::shadow #checkbox.checked {
|
||||
border-color: #4285f4;
|
||||
}
|
||||
|
||||
To change the ink color for unchecked state:
|
||||
|
||||
paper-checkbox::shadow #ink {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
|
||||
To change the checbox unchecked color:
|
||||
|
||||
paper-checkbox::shadow #checkbox {
|
||||
border-color: #b5b5b5;
|
||||
}
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-checkbox
|
||||
@extends paper-radio-button
|
||||
@homepage github.io
|
||||
-->
|
||||
|
||||
<link rel="import" href="../paper-radio-button/paper-radio-button.html">
|
||||
|
||||
<polymer-element name="paper-checkbox" extends="paper-radio-button" role="checkbox">
|
||||
<template>
|
||||
|
||||
<link rel="stylesheet" href="paper-checkbox.css">
|
||||
|
||||
<div id="checkboxContainer" class="{{ {labeled: label} | tokenList }}" >
|
||||
|
||||
<paper-ripple id="ink" class="circle recenteringTouch" checked?="{{!checked}}"></paper-ripple>
|
||||
|
||||
<div id="checkbox" on-animationend="{{checkboxAnimationEnd}}" on-webkitAnimationEnd="{{checkboxAnimationEnd}}"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="checkboxLabel" hidden?="{{!label}}">{{label}}<content></content></div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
Polymer('paper-checkbox', {
|
||||
|
||||
/**
|
||||
* Fired when the checked state changes due to user interaction.
|
||||
*
|
||||
* @event change
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the checked state changes.
|
||||
*
|
||||
* @event core-change
|
||||
*/
|
||||
|
||||
toggles: true,
|
||||
|
||||
checkedChanged: function() {
|
||||
var cl = this.$.checkbox.classList;
|
||||
cl.toggle('checked', this.checked);
|
||||
cl.toggle('unchecked', !this.checked);
|
||||
cl.toggle('checkmark', !this.checked);
|
||||
cl.toggle('box', this.checked);
|
||||
this.setAttribute('aria-checked', this.checked ? 'true': 'false');
|
||||
this.fire('core-change');
|
||||
},
|
||||
|
||||
checkboxAnimationEnd: function() {
|
||||
var cl = this.$.checkbox.classList;
|
||||
cl.toggle('checkmark', this.checked && !cl.contains('checkmark'));
|
||||
cl.toggle('box', !this.checked && !cl.contains('box'));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</polymer-element>
|
||||
Reference in New Issue
Block a user