ui/keyboard/resources/elements/kb-key.html

   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>