Added Polymer
This commit is contained in:
22
rpg-docs/public/bower_components/paper-dialog/.bower.json
vendored
Normal file
22
rpg-docs/public/bower_components/paper-dialog/.bower.json
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "paper-dialog",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^0.5.0",
|
||||
"core-overlay": "Polymer/core-overlay#^0.5.0",
|
||||
"core-transition": "Polymer/core-transition#^0.5.0",
|
||||
"paper-button": "Polymer/paper-button#^0.5.0",
|
||||
"paper-shadow": "Polymer/paper-shadow#^0.5.0"
|
||||
},
|
||||
"version": "0.5.1",
|
||||
"homepage": "https://github.com/Polymer/paper-dialog",
|
||||
"_release": "0.5.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "0.5.1",
|
||||
"commit": "a2591c69a084ef3b79f526a5f495b8fc715d07af"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/paper-dialog.git",
|
||||
"_target": "^0.5.0",
|
||||
"_originalSource": "Polymer/paper-dialog"
|
||||
}
|
||||
1
rpg-docs/public/bower_components/paper-dialog/.gitignore
vendored
Normal file
1
rpg-docs/public/bower_components/paper-dialog/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
vulcanized.html
|
||||
4
rpg-docs/public/bower_components/paper-dialog/README.md
vendored
Normal file
4
rpg-docs/public/bower_components/paper-dialog/README.md
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
paper-dialog
|
||||
===================
|
||||
|
||||
See the [component page](http://www.polymer-project.org/docs/elements/paper-elements.html#paper-dialog) for more information.
|
||||
12
rpg-docs/public/bower_components/paper-dialog/bower.json
vendored
Normal file
12
rpg-docs/public/bower_components/paper-dialog/bower.json
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "paper-dialog",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^0.5.0",
|
||||
"core-overlay": "Polymer/core-overlay#^0.5.0",
|
||||
"core-transition": "Polymer/core-transition#^0.5.0",
|
||||
"paper-button": "Polymer/paper-button#^0.5.0",
|
||||
"paper-shadow": "Polymer/paper-shadow#^0.5.0"
|
||||
},
|
||||
"version": "0.5.1"
|
||||
}
|
||||
281
rpg-docs/public/bower_components/paper-dialog/demo.html
vendored
Normal file
281
rpg-docs/public/bower_components/paper-dialog/demo.html
vendored
Normal file
@@ -0,0 +1,281 @@
|
||||
<!--
|
||||
@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>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<title>paper-dialog</title>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||||
|
||||
<link href="../font-roboto/roboto.html" rel="import">
|
||||
<link href="../paper-button/paper-button.html" rel="import">
|
||||
|
||||
<link href="paper-dialog.html" rel="import">
|
||||
<link href="paper-action-dialog.html" rel="import">
|
||||
|
||||
<style shim-shadowdom>
|
||||
body {
|
||||
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
section > div {
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 8px 4px;
|
||||
}
|
||||
|
||||
html /deep/ [autofocus] {
|
||||
color: #03a9f4;
|
||||
}
|
||||
|
||||
html /deep/ .scrolling::shadow #scroller {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
html /deep/ .colored {
|
||||
border: 1px solid #0f9d58;
|
||||
background-color: #b7e1cd;
|
||||
color: #0f9d58;
|
||||
}
|
||||
|
||||
html /deep/ .size-position {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
html /deep/ .size-position::shadow #scroller {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!--
|
||||
<style>
|
||||
body {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
paper-dialog {
|
||||
width: 50%;
|
||||
min-width: 430px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
paper-dialog paper-button {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
paper-button[autofocus] {
|
||||
color: #4285f4;
|
||||
}
|
||||
</style>
|
||||
-->
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<template is="auto-binding">
|
||||
|
||||
<section on-tap="{{toggleDialog1}}">
|
||||
|
||||
<div>Dialog Layouts</div>
|
||||
|
||||
<button>
|
||||
Plain dialog
|
||||
|
||||
<paper-dialog>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</paper-dialog>
|
||||
|
||||
</button>
|
||||
|
||||
<button>
|
||||
Dialog with heading
|
||||
|
||||
<paper-dialog heading="Title">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</paper-dialog>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
Dialog with actions
|
||||
|
||||
<paper-action-dialog heading="Title">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
|
||||
<paper-button dismissive>More Info...</paper-button>
|
||||
<paper-button affirmative>Decline</paper-button>
|
||||
<paper-button affirmative autofocus>Accept</paper-button>
|
||||
</paper-action-dialog>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
Modal dialog with backdrop and actions
|
||||
|
||||
<paper-action-dialog backdrop autoCloseDisabled>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
|
||||
<paper-button affirmative autofocus>Tap me to close</paper-button>
|
||||
</paper-action-dialog>
|
||||
|
||||
</button>
|
||||
|
||||
</section>
|
||||
|
||||
<section on-tap="{{toggleDialog1}}">
|
||||
|
||||
<div>Scrolling</div>
|
||||
|
||||
<button>
|
||||
Dialog with heading
|
||||
|
||||
<paper-dialog heading="Title" class="scrolling">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</paper-dialog>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
Dialog with actions
|
||||
|
||||
<paper-action-dialog heading="Title" class="scrolling">
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<paper-button dismissive>More Info...</paper-button>
|
||||
<paper-button affirmative>Decline</paper-button>
|
||||
<paper-button affirmative autofocus>Accept</paper-button>
|
||||
|
||||
</paper-action-dialog>
|
||||
|
||||
</button>
|
||||
|
||||
</section>
|
||||
|
||||
<section on-tap="{{toggleDialog2}}">
|
||||
|
||||
<div>Transitions</div>
|
||||
|
||||
<template repeat="{{transitions}}">
|
||||
<button transition="{{}}">{{}}</button>
|
||||
</template>
|
||||
|
||||
<paper-dialog id="dialog2" transition="{{transition}}">
|
||||
|
||||
<h1>{{transition || 'No Transition'}}</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
|
||||
</paper-dialog>
|
||||
|
||||
</section>
|
||||
|
||||
<section on-tap="{{toggleDialog1}}">
|
||||
|
||||
<div>Custom Styling</div>
|
||||
|
||||
<button>
|
||||
Colors
|
||||
|
||||
<paper-dialog heading="Custom Colors" class="colored">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</paper-dialog>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
Size & Position
|
||||
|
||||
<paper-dialog heading="Custom Size & Position" class="size-position">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</paper-dialog>
|
||||
</button>
|
||||
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
var scope = document.querySelector('template[is=auto-binding]');
|
||||
|
||||
scope.toggleDialog1 = function(e) {
|
||||
if (e.target.localName != 'button') {
|
||||
return;
|
||||
}
|
||||
var d = e.target.querySelector('paper-dialog,paper-action-dialog');
|
||||
if (!d) {
|
||||
return;
|
||||
}
|
||||
d.toggle();
|
||||
};
|
||||
|
||||
scope.transitions = [
|
||||
'core-transition-center',
|
||||
'core-transition-top',
|
||||
'core-transition-bottom',
|
||||
'core-transition-left',
|
||||
'core-transition-right'
|
||||
];
|
||||
|
||||
scope.toggleDialog2 = function(e) {
|
||||
if (e.target.localName != 'button') {
|
||||
return;
|
||||
}
|
||||
scope.transition = e.target.getAttribute('transition');
|
||||
document.getElementById('dialog2').toggle();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
rpg-docs/public/bower_components/paper-dialog/index.html
vendored
Normal file
22
rpg-docs/public/bower_components/paper-dialog/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 sources='["paper-dialog.html","paper-action-dialog.html","paper-dialog-base.html"]'></core-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
104
rpg-docs/public/bower_components/paper-dialog/paper-action-dialog.html
vendored
Normal file
104
rpg-docs/public/bower_components/paper-dialog/paper-action-dialog.html
vendored
Normal file
@@ -0,0 +1,104 @@
|
||||
<!--
|
||||
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
|
||||
-->
|
||||
|
||||
<!--
|
||||
|
||||
Material Design: <a href="http://www.google.com/design/spec/components/dialogs.html">Dialogs</a>
|
||||
|
||||
`paper-action-dialog` is a `paper-dialog` a row of buttons at the bottom that
|
||||
indicate user action. The action buttons do not scroll with the dialog body.
|
||||
|
||||
The buttons should have either the `affirmative` or `dismissive` attribute. See
|
||||
the Material Design spec for more info.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-action-dialog heading="Dialog Title">
|
||||
<p>Some content</p>
|
||||
<paper-button dismissive>More Info</paper-button>
|
||||
<paper-button affirmative>Decline</paper-button>
|
||||
<paper-button affirmative>Accept</paper-button>
|
||||
</paper-action-dialog>
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-action-dialog
|
||||
@extends paper-dialog-base
|
||||
@homepage github.io
|
||||
@status unstable
|
||||
-->
|
||||
<link href="../polymer/polymer.html" rel="import">
|
||||
<link href="../paper-shadow/paper-shadow.html" rel="import">
|
||||
|
||||
<link href="paper-dialog-base.html" rel="import">
|
||||
|
||||
<polymer-element name="paper-action-dialog" extends="paper-dialog-base" role="dialog">
|
||||
|
||||
<template>
|
||||
|
||||
<style>
|
||||
:host {
|
||||
background: #fff;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
margin: 32px;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 24px 24px 0 24px;
|
||||
}
|
||||
|
||||
#actions {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<paper-shadow z="3" fit></paper-shadow>
|
||||
|
||||
<!-- need this because the host needs to be overflow: visible -->
|
||||
<div id="scroller" relative>
|
||||
<template if="{{heading}}">
|
||||
<h1>{{heading}}</h1>
|
||||
</template>
|
||||
|
||||
<content select=":not([affirmative]):not([dismissive])"></content>
|
||||
</div>
|
||||
|
||||
<div id="actions" relative layout horizontal>
|
||||
<content select="[dismissive]"></content>
|
||||
<div flex></div>
|
||||
<content select="[affirmative]"></content>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
publish: {
|
||||
|
||||
/**
|
||||
* @attribute closeSelector
|
||||
* @type string
|
||||
* @default '[affirmative],[dismissive]'
|
||||
*/
|
||||
closeSelector: '[affirmative],[dismissive]'
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</polymer-element>
|
||||
81
rpg-docs/public/bower_components/paper-dialog/paper-dialog-base.html
vendored
Normal file
81
rpg-docs/public/bower_components/paper-dialog/paper-dialog-base.html
vendored
Normal file
@@ -0,0 +1,81 @@
|
||||
<!--
|
||||
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
|
||||
-->
|
||||
|
||||
<!--
|
||||
|
||||
Material Design: <a href="http://www.google.com/design/spec/components/dialogs.html">Dialogs</a>
|
||||
|
||||
`paper-dialog-base` is a base class used to implement Material Design styled
|
||||
dialogs.
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-dialog-base
|
||||
@extends core-overlay
|
||||
@homepage github.io
|
||||
@status unstable
|
||||
-->
|
||||
<link href="../polymer/polymer.html" rel="import">
|
||||
<link href="../core-overlay/core-overlay.html" rel="import">
|
||||
<link href="../core-transition/core-transition-css.html" rel="import">
|
||||
|
||||
<polymer-element name="paper-dialog-base" extends="core-overlay" role="dialog" on-core-overlay-open="{{openAction}}">
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
publish: {
|
||||
|
||||
/**
|
||||
* The title of the dialog.
|
||||
*
|
||||
* @attribute heading
|
||||
* @type string
|
||||
* @default ''
|
||||
*/
|
||||
heading: '',
|
||||
|
||||
/**
|
||||
* @attribute transition
|
||||
* @type string
|
||||
* @default ''
|
||||
*/
|
||||
transition: '',
|
||||
|
||||
/**
|
||||
* @attribute layered
|
||||
* @type boolean
|
||||
* @default true
|
||||
*/
|
||||
layered: true
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this.super();
|
||||
this.sizingTarget = this.$.scroller;
|
||||
},
|
||||
|
||||
headingChanged: function(old) {
|
||||
var label = this.getAttribute('aria-label');
|
||||
if (!label || label === old) {
|
||||
this.setAttribute('aria-label', this.heading);
|
||||
}
|
||||
},
|
||||
|
||||
openAction: function() {
|
||||
if (this.$.scroller.scrollTop) {
|
||||
this.$.scroller.scrollTop = 0;
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</polymer-element>
|
||||
59
rpg-docs/public/bower_components/paper-dialog/paper-dialog-transition.css
vendored
Normal file
59
rpg-docs/public/bower_components/paper-dialog/paper-dialog-transition.css
vendored
Normal file
@@ -0,0 +1,59 @@
|
||||
/* 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(.paper-dialog-transition) {
|
||||
outline: none;
|
||||
opacity: 0;
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
:host(.paper-dialog-transition.core-opened) {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
-webkit-transform: none;
|
||||
}
|
||||
|
||||
:host(.paper-dialog-transition-bottom) {
|
||||
transform: scale(0.9) translateY(200%);
|
||||
-webkit-transform: scale(0.9) translateY(200%);
|
||||
}
|
||||
|
||||
:host(.paper-dialog-transition-center.core-opened) {
|
||||
animation: paper-dialog-transition-center-keyframes 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
-webkit-animation: paper-dialog-transition-center-keyframes 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes paper-dialog-transition-center-keyframes {
|
||||
0% {
|
||||
transform: scale(0.5) translateY(0);
|
||||
-webkit-transform: scale(0.5) translateY(0);
|
||||
}
|
||||
90% {
|
||||
transform: scale(1) translateY(-10px);
|
||||
-webkit-transform: scale(1) translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateY(0);
|
||||
-webkit-transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes paper-dialog-transition-center-keyframes {
|
||||
0% {
|
||||
transform: scale(0.5) translateY(0);
|
||||
-webkit-transform: scale(0.5) translateY(0);
|
||||
}
|
||||
90% {
|
||||
transform: scale(1) translateY(-10px);
|
||||
-webkit-transform: scale(1) translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateY(0);
|
||||
-webkit-transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
27
rpg-docs/public/bower_components/paper-dialog/paper-dialog-transition.html
vendored
Normal file
27
rpg-docs/public/bower_components/paper-dialog/paper-dialog-transition.html
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
<!--
|
||||
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
|
||||
-->
|
||||
|
||||
<link href="../core-transition/core-transition-css.html" rel="import">
|
||||
|
||||
<polymer-element name="paper-dialog-transition" extends="core-transition-css">
|
||||
|
||||
<template>
|
||||
<link no-shim href="paper-dialog-transition.css" rel="stylesheet">
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
baseClass: 'paper-dialog-transition'
|
||||
});
|
||||
</script>
|
||||
|
||||
</polymer-element>
|
||||
|
||||
<paper-dialog-transition id="paper-dialog-transition-bottom" transitionType="bottom"></paper-dialog-transition>
|
||||
<paper-dialog-transition id="paper-dialog-transition-center" transitionType="center"></paper-dialog-transition>
|
||||
101
rpg-docs/public/bower_components/paper-dialog/paper-dialog.html
vendored
Normal file
101
rpg-docs/public/bower_components/paper-dialog/paper-dialog.html
vendored
Normal file
@@ -0,0 +1,101 @@
|
||||
<!--
|
||||
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
|
||||
-->
|
||||
|
||||
<!--
|
||||
|
||||
Material Design: <a href="http://www.google.com/design/spec/components/dialogs.html">Dialogs</a>
|
||||
|
||||
`paper-dialog` is an overlay with a drop shadow.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-dialog heading="Dialog Title">
|
||||
<p>Some content</p>
|
||||
</paper-dialog>
|
||||
|
||||
Styling
|
||||
-------
|
||||
|
||||
Because a `paper-dialog` is `layered` by default, you need to use the `/deep/`
|
||||
combinator to style all instances of the `paper-dialog`. Style the position,
|
||||
colors and other inherited properties of the dialog using the
|
||||
`html /deep/ paper-dialog` selector. Use the `html /deep/ paper-dialog::shadow #scroller` selector to size the dialog. Note that if you provided actions, the height
|
||||
of the actions will be added to the height of the dialog.
|
||||
|
||||
html /deep/ paper-dialog {
|
||||
color: green;
|
||||
}
|
||||
|
||||
html /deep/ paper-dialog::shadow #scroller {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
Transitions
|
||||
-----------
|
||||
|
||||
You can use transitions provided by `core-transition` with this element.
|
||||
|
||||
<paper-dialog transition="core-transition-center">
|
||||
<p>Some content</p>
|
||||
</paper-dialog>
|
||||
|
||||
Accessibility
|
||||
-------------
|
||||
|
||||
By default, the `aria-label` will be set to the value of the `heading` attribute.
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-dialog
|
||||
@extends paper-dialog-base
|
||||
@homepage github.io
|
||||
@status unstable
|
||||
-->
|
||||
<link href="../polymer/polymer.html" rel="import">
|
||||
<link href="../paper-shadow/paper-shadow.html" rel="import">
|
||||
|
||||
<link href="paper-dialog-base.html" rel="import">
|
||||
|
||||
<polymer-element name="paper-dialog" extends="paper-dialog-base" role="dialog" noscript>
|
||||
|
||||
<template>
|
||||
|
||||
<style>
|
||||
:host {
|
||||
background: #fff;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
margin: 32px;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<paper-shadow z="3" fit></paper-shadow>
|
||||
|
||||
<!-- need this because the host needs to be overflow: visible -->
|
||||
<div id="scroller" relative>
|
||||
<template if="{{heading}}">
|
||||
<h1>{{heading}}</h1>
|
||||
</template>
|
||||
|
||||
<content></content>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</polymer-element>
|
||||
Reference in New Issue
Block a user