Added Polymer

This commit is contained in:
Thaum
2014-11-26 10:18:35 +00:00
parent 5eea4714b2
commit 3408ba9e8d
1210 changed files with 394645 additions and 47 deletions

View 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"
}

View File

@@ -0,0 +1 @@
vulcanized.html

View 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.

View 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"
}

View 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 &amp; Position
<paper-dialog heading="Custom Size &amp; 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>

View 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>

View 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>

View 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>

View 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);
}
}

View 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>

View 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>