Home | History | Annotate | Download | only in paper-focusable 
      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>
    156