third_party/polymer/components/paper-focusable/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright 2013 The Polymer Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style
   5 license that can be found in the LICENSE file.
   6 -->
   7 <html>
   8 <head>
   9
  10   <meta charset="utf-8">
  11   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  13
  14   <title>paper-focusable</title>
  15
  16   <script src="../platform/platform.js"></script>
  17
  18   <link href="../font-roboto/roboto.html" rel="import">
  19   <link href="paper-focusable.html" rel="import">
  20
  21   <style shim-shadowdom>
  22     body {
  23       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  24       margin: 0;
  25       padding: 24px;
  26       -webkit-user-select: none;
  27       -moz-user-select: none;
  28       -ms-user-select: none;
  29       user-select: none;
  30       -webkit-tap-highlight-color: rgba(0,0,0,0);
  31       -webkit-touch-callout: none;
  32       -webkit-transform: translateZ(0);
  33       transform: translateZ(0);
  34     }
  35
  36     section {
  37       padding: 20px 0;
  38
  39       width: 37em;
  40     }
  41
  42     section > div {
  43       padding: 14px 0;
  44
  45       font-size: 1.5em;
  46     }
  47
  48     paper-focusable[active].focusable-active {
  49
  50       background: #9c27b0;
  51
  52     }
  53
  54     paper-focusable[active].focusable-toggle {
  55
  56       background: #9c27b0;
  57
  58     }
  59
  60     paper-focusable[pressed].focusable-pressed {
  61
  62       background: #ff80ab;
  63
  64     }
  65
  66     paper-focusable[focused].focusable-focused {
  67
  68       background: #ec407a;
  69
  70     }
  71
  72     paper-focusable[disabled].focusable-disabled {
  73
  74       opacity: 0.5;
  75
  76     }
  77
  78
  79   </style>
  80 </head>
  81 <body unresolved>
  82
  83   <div class="main-descriptor">
  84
  85       The "paper-focused" item allows you to handle focusing on items.
  86
  87   </div>
  88
  89   <section>
  90
  91     <div>Focusable Item - active</div>
  92
  93     <paper-focusable class="focusable-active">
  94
  95       This paragraph shows a style with the "paper-focusable[active]" selector.
  96       It functions much like using the "pressed" attribute.
  97     </paper-focusable>
  98
  99   </section>
 100
 101   <section>
 102
 103     <div>Focusable Item - pressed</div>
 104
 105     <paper-focusable class="focusable-pressed">
 106
 107     This paragraph shows a style with the "paper-focusable[pressed]" selector.
 108     It functions much like usin the "active" attribute.
 109
 110     </paper-focusable>
 111
 112   </section>
 113
 114   <section>
 115
 116     <div>Focusable Item - focused</div>
 117
 118     <paper-focusable class="focusable-focused">
 119
 120     This paragraph shows a style with the "paper-focusable[focused]" selector.
 121     This will be active on items that are focused but not active or pressed.
 122
 123     </paper-focusable>
 124
 125   </section>
 126
 127   <section>
 128
 129     <div>Focusable Item - disabled</div>
 130
 131     <paper-focusable disabled class="focusable-disabled">
 132
 133     This paragraph shows a style with the "disabled" attribute.
 134     The "paper-focusable" item with a "disabled" attribute cannot be selected,
 135     and will prevent mouse actions.
 136
 137     </paper-focusable>
 138
 139   </section>
 140
 141   <section>
 142
 143     <div>Focusable Item - toggle</div>
 144
 145     <paper-focusable isToggle class="focusable-toggle">
 146
 147     This paragraph shows a style with the "isToggle" attribute.
 148     The "paper-focusable" item with an "isToggle" toggles the active state on each tap.
 149
 150     </paper-focusable>
 151
 152   </section>
 153
 154 </body>
 155 </html>