Index: third_party/polymer/components-chromium/paper-focusable/demo.html |
diff --git a/third_party/polymer/components-chromium/paper-focusable/demo.html b/third_party/polymer/components-chromium/paper-focusable/demo.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..9fd58a2ad6a06f463c2a3a978249798b7bfc7ac2 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/paper-focusable/demo.html |
@@ -0,0 +1,155 @@ |
+<!doctype html> |
+<!-- |
+Copyright 2013 The Polymer Authors. All rights reserved. |
+Use of this source code is governed by a BSD-style |
+license that can be found in the LICENSE file. |
+--> |
+<html> |
+<head> |
+ |
+ <meta charset="utf-8"> |
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
+ |
+ <title>paper-focusable</title> |
+ |
+ <script src="../platform/platform.js"></script> |
+ |
+ <link href="../font-roboto/roboto.html" rel="import"> |
+ <link href="paper-focusable.html" rel="import"> |
+ |
+ <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; |
+ -webkit-transform: translateZ(0); |
+ transform: translateZ(0); |
+ } |
+ |
+ section { |
+ padding: 20px 0; |
+ |
+ width: 37em; |
+ } |
+ |
+ section > div { |
+ padding: 14px 0; |
+ |
+ font-size: 1.5em; |
+ } |
+ |
+ paper-focusable[active].focusable-active { |
+ |
+ background: #9c27b0; |
+ |
+ } |
+ |
+ paper-focusable[active].focusable-toggle { |
+ |
+ background: #9c27b0; |
+ |
+ } |
+ |
+ paper-focusable[pressed].focusable-pressed { |
+ |
+ background: #ff80ab; |
+ |
+ } |
+ |
+ paper-focusable[focused].focusable-focused { |
+ |
+ background: #ec407a; |
+ |
+ } |
+ |
+ paper-focusable[disabled].focusable-disabled { |
+ |
+ opacity: 0.5; |
+ |
+ } |
+ |
+ |
+ </style> |
+</head> |
+<body unresolved> |
+ |
+ <div class="main-descriptor"> |
+ |
+ The "paper-focused" item allows you to handle focusing on items. |
+ |
+ </div> |
+ |
+ <section> |
+ |
+ <div>Focusable Item - active</div> |
+ |
+ <paper-focusable class="focusable-active"> |
+ |
+ This paragraph shows a style with the "paper-focusable[active]" selector. |
+ It functions much like using the "pressed" attribute. |
+ </paper-focusable> |
+ |
+ </section> |
+ |
+ <section> |
+ |
+ <div>Focusable Item - pressed</div> |
+ |
+ <paper-focusable class="focusable-pressed"> |
+ |
+ This paragraph shows a style with the "paper-focusable[pressed]" selector. |
+ It functions much like usin the "active" attribute. |
+ |
+ </paper-focusable> |
+ |
+ </section> |
+ |
+ <section> |
+ |
+ <div>Focusable Item - focused</div> |
+ |
+ <paper-focusable class="focusable-focused"> |
+ |
+ This paragraph shows a style with the "paper-focusable[focused]" selector. |
+ This will be active on items that are focused but not active or pressed. |
+ |
+ </paper-focusable> |
+ |
+ </section> |
+ |
+ <section> |
+ |
+ <div>Focusable Item - disabled</div> |
+ |
+ <paper-focusable disabled class="focusable-disabled"> |
+ |
+ This paragraph shows a style with the "disabled" attribute. |
+ The "paper-focusable" item with a "disabled" attribute cannot be selected, |
+ and will prevent mouse actions. |
+ |
+ </paper-focusable> |
+ |
+ </section> |
+ |
+ <section> |
+ |
+ <div>Focusable Item - toggle</div> |
+ |
+ <paper-focusable isToggle class="focusable-toggle"> |
+ |
+ This paragraph shows a style with the "isToggle" attribute. |
+ The "paper-focusable" item with an "isToggle" toggles the active state on each tap. |
+ |
+ </paper-focusable> |
+ |
+ </section> |
+ |
+</body> |
+</html> |