Added Polymer
This commit is contained in:
Thaum
19
rpg-docs/public/bower_components/paper-toggle-button/.bower.json
vendored
Normal file
19
rpg-docs/public/bower_components/paper-toggle-button/.bower.json
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "paper-toggle-button",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"font-roboto": "Polymer/font-roboto#^0.5.0",
|
||||
"paper-radio-button": "Polymer/paper-radio-button#^0.5.0"
|
||||
},
|
||||
"version": "0.5.1",
|
||||
"homepage": "https://github.com/Polymer/paper-toggle-button",
|
||||
"_release": "0.5.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "0.5.1",
|
||||
"commit": "67eaf2b426f3d4a5d9bc7d436f75a6624cb13666"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/paper-toggle-button.git",
|
||||
"_target": "^0.5.0",
|
||||
"_originalSource": "Polymer/paper-toggle-button"
|
||||
}
|
||||
4
rpg-docs/public/bower_components/paper-toggle-button/README.md
vendored
Normal file
4
rpg-docs/public/bower_components/paper-toggle-button/README.md
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
paper-toggle-button
|
||||
===================
|
||||
|
||||
See the [component page](http://www.polymer-project.org/docs/elements/paper-elements.html#paper-toggle-button) for more information.
|
||||
9
rpg-docs/public/bower_components/paper-toggle-button/bower.json
vendored
Normal file
9
rpg-docs/public/bower_components/paper-toggle-button/bower.json
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "paper-toggle-button",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"font-roboto": "Polymer/font-roboto#^0.5.0",
|
||||
"paper-radio-button": "Polymer/paper-radio-button#^0.5.0"
|
||||
},
|
||||
"version": "0.5.1"
|
||||
}
|
||||
77
rpg-docs/public/bower_components/paper-toggle-button/demo.html
vendored
Normal file
77
rpg-docs/public/bower_components/paper-toggle-button/demo.html
vendored
Normal file
@@ -0,0 +1,77 @@
|
||||
<!--
|
||||
@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-toggle-button</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-toggle-button.html">
|
||||
<link rel="import" href="../font-roboto/roboto.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;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
paper-toggle-button.blue::shadow paper-radio-button::shadow #ink[checked] {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
paper-toggle-button.blue::shadow paper-radio-button::shadow #onRadio {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
paper-toggle-button.blue::shadow #toggleBar[checked] {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<section>
|
||||
|
||||
<div center horizontal layout>
|
||||
<div flex>Wi-Fi</div>
|
||||
<paper-toggle-button checked></paper-toggle-button>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div center horizontal layout>
|
||||
<div flex>Bluetooth</div>
|
||||
<paper-toggle-button class="blue"></paper-toggle-button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
rpg-docs/public/bower_components/paper-toggle-button/index.html
vendored
Normal file
22
rpg-docs/public/bower_components/paper-toggle-button/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-toggle-button/metadata.html
vendored
Normal file
17
rpg-docs/public/bower_components/paper-toggle-button/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-toggle-button" label="Toggle Button" group="Paper">
|
||||
<template>
|
||||
<paper-toggle-button></paper-toggle-button>
|
||||
</template>
|
||||
<template id="imports">
|
||||
<link rel="import" href="paper-toggle-button.html">
|
||||
</template>
|
||||
</x-meta>
|
||||
67
rpg-docs/public/bower_components/paper-toggle-button/paper-toggle-button.css
vendored
Normal file
67
rpg-docs/public/bower_components/paper-toggle-button/paper-toggle-button.css
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#toggleContainer {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
#toggleBar {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 16px;
|
||||
height: 1px;
|
||||
width: 32px;
|
||||
background-color: #5a5a5a;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#toggleBar[checked] {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
|
||||
#toggleContainer[checked] #checkedBar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#toggleRadio {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
padding: 8px 48px 8px 0;
|
||||
margin: -8px -48px -8px 0;
|
||||
transition: -webkit-transform linear .08s;
|
||||
transition: transform linear .08s;
|
||||
}
|
||||
|
||||
#toggleRadio[checked] {
|
||||
-webkit-transform: translate(48px, 0);
|
||||
transform: translate(48px, 0);
|
||||
padding: 8px 0 8px 48px;
|
||||
margin: -8px 0 -8px -48px;
|
||||
}
|
||||
|
||||
#toggleRadio.dragging {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* disabled state */
|
||||
#toggleContainer[disabled] {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
154
rpg-docs/public/bower_components/paper-toggle-button/paper-toggle-button.html
vendored
Normal file
154
rpg-docs/public/bower_components/paper-toggle-button/paper-toggle-button.html
vendored
Normal file
@@ -0,0 +1,154 @@
|
||||
<!--
|
||||
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-toggle-button` provides a ON/OFF switch that user can toggle the state
|
||||
by tapping or by dragging the swtich.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-toggle-button></paper-toggle-button>
|
||||
|
||||
Styling toggle button:
|
||||
|
||||
To change the ink color for checked state:
|
||||
|
||||
paper-toggle-button::shadow paper-radio-button::shadow #ink[checked] {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
To change the radio checked color:
|
||||
|
||||
paper-toggle-button::shadow paper-radio-button::shadow #onRadio {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
To change the bar color for checked state:
|
||||
|
||||
paper-toggle-button::shadow #toggleBar[checked] {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
To change the ink color for unchecked state:
|
||||
|
||||
paper-toggle-button::shadow paper-radio-button::shadow #ink {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
|
||||
To change the radio unchecked color:
|
||||
|
||||
paper-toggle-button::shadow paper-radio-button::shadow #offRadio {
|
||||
border-color: #b5b5b5;
|
||||
}
|
||||
|
||||
To change the bar color for unchecked state:
|
||||
|
||||
paper-toggle-button::shadow #toggleBar {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-toggle-button
|
||||
@homepage github.io
|
||||
-->
|
||||
|
||||
<link rel="import" href="../paper-radio-button/paper-radio-button.html">
|
||||
|
||||
<polymer-element name="paper-toggle-button" attributes="checked disabled" role="button" aria-pressed="false" tabindex="0">
|
||||
<template>
|
||||
|
||||
<link rel="stylesheet" href="paper-toggle-button.css">
|
||||
|
||||
<div id="toggleContainer" disabled?="{{disabled}}">
|
||||
|
||||
<div id="toggleBar" checked?="{{checked}}"></div>
|
||||
|
||||
<paper-radio-button id="toggleRadio" toggles checked="{{checked}}" on-change="{{changeAction}}" on-core-change="{{stopPropagation}}"
|
||||
on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-radio-button>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
Polymer('paper-toggle-button', {
|
||||
|
||||
/**
|
||||
* Fired when the checked state changes due to user interaction.
|
||||
*
|
||||
* @event change
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the checked state changes.
|
||||
*
|
||||
* @event core-change
|
||||
*/
|
||||
|
||||
/**
|
||||
* Gets or sets the state, `true` is checked and `false` is unchecked.
|
||||
*
|
||||
* @attribute checked
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
checked: false,
|
||||
|
||||
/**
|
||||
* If true, the toggle button is disabled. A disabled toggle button cannot
|
||||
* be tapped or dragged to change the checked state.
|
||||
*
|
||||
* @attribute disabled
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
disabled: false,
|
||||
|
||||
trackStart: function(e) {
|
||||
this._w = this.$.toggleBar.offsetLeft + this.$.toggleBar.offsetWidth;
|
||||
e.preventTap();
|
||||
},
|
||||
|
||||
trackx: function(e) {
|
||||
this._x = Math.min(this._w,
|
||||
Math.max(0, this.checked ? this._w + e.dx : e.dx));
|
||||
this.$.toggleRadio.classList.add('dragging');
|
||||
var s = this.$.toggleRadio.style;
|
||||
s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)';
|
||||
},
|
||||
|
||||
trackEnd: function() {
|
||||
var s = this.$.toggleRadio.style;
|
||||
s.transform = s.webkitTransform = '';
|
||||
this.$.toggleRadio.classList.remove('dragging');
|
||||
var old = this.checked;
|
||||
this.checked = Math.abs(this._x) > this._w / 2;
|
||||
if (this.checked !== old) {
|
||||
this.fire('change');
|
||||
}
|
||||
},
|
||||
|
||||
checkedChanged: function() {
|
||||
this.setAttribute('aria-pressed', Boolean(this.checked));
|
||||
this.fire('core-change');
|
||||
},
|
||||
|
||||
changeAction: function(e) {
|
||||
e.stopPropagation();
|
||||
this.fire('change');
|
||||
},
|
||||
|
||||
stopPropagation: function(e) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</polymer-element>
|
||||
Reference in New Issue
Block a user