Home | History | Annotate | Download | only in elements 
      1 <!--
      2   -- Copyright 2013 The Chromium Authors. All rights reserved.
      3   -- Use of this source code is governed by a BSD-style license that can be
      4   -- found in the LICENSE file.
      5   -->
      6 
      7 <polymer-element name="kb-key" extends="kb-key-base" attributes="image keyCode
      8     keyName shiftModifier sound stretch weight">
      9   <template>
     10     <style>
     11       :host {
     12         background-color: #ffffff;
     13         border-radius: 1px;
     14         border-style: solid;
     15         border-width: 0px 0px;
     16         color: #666666;
     17         font-family: roboto-bold;
     18         font-weight: 100;
     19       }
     20 
     21       :host .key {
     22         background-image: none;
     23         background-position: center;
     24         background-repeat: no-repeat;
     25         background-size: contain;
     26         bottom: 0;
     27         height: 1.2em;
     28         left: 0;
     29         margin: auto;
     30         position: absolute;
     31         right: 0;
     32         text-align: center;
     33         top: 0;
     34       }
     35 
     36       :host([align=left]) .key {
     37         padding-left: 1em;
     38       }
     39 
     40       /* TODO(rsadam@): Remove when we fully switch to native shadow dom. */
     41       /* TODO(rsadam@): Move shift key rules to kb-shift-key. */
     42       kb-shift-key .key,
     43       :host(kb-shift-key) .key {
     44         height: 70%;
     45         width: auto;
     46       }
     47 
     48       :host([image].cursor) .key {
     49         height: 85%;
     50       }
     51 
     52       :host([image]) .key {
     53         height: 30%;
     54       }
     55 
     56       :host([image].tab) .key {
     57         height: 40%;
     58       }
     59 
     60       :host .hint,
     61       :host([invert]) key {
     62         color: #bababa;
     63       }
     64 
     65       :host .hint {
     66         font-size: 70%;
     67         position: absolute;
     68         right: 7%;
     69         top: 5%;
     70       }
     71 
     72       :host-context(.hide-hint-text) .hint {
     73         display: none;
     74       }
     75 
     76       :host([invert]) .hint {
     77         color: #666666;
     78       }
     79 
     80       :host(.dark) {
     81         font-size: 70%;
     82       }
     83 
     84       :host(.dark.active) {
     85         background-color: #cccccc;
     86       }
     87 
     88       :host(.active) {
     89         background-color: #dddddd;
     90         background-size: cover;
     91       }
     92 
     93       :host(.dark:not(.active)) {
     94         background-color: #555555;
     95       }
     96 
     97       :host(:not(.dark):not(.active)) {
     98         background-color: #ffffff;
     99         background-size: cover;
    100       }
    101     </style>
    102     <div id="key" class="key">
    103       <content></content>
    104     </div>
    105     <div class="hint" part="hint">{{hintText}}</div>
    106   </template>
    107 </polymer-element>
    108 
    109 <!-- Special keys -->
    110 <polymer-element name="kb-abc-key" class="symbol dark" char="Invalid"
    111     extends="kb-key" weight="125">
    112 </polymer-element>
    113 
    114 <polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark"
    115     align="center" attributes="showMenu" char="Invalid" extends="kb-key">
    116 </polymer-element>
    117