| <!-- |
| -- Copyright 2013 The Chromium Authors. All rights reserved. |
| -- Use of this source code is governed by a BSD-style license that can be |
| -- found in the LICENSE file. |
| --> |
| |
| <polymer-element name="kb-key" extends="kb-key-base" attributes="image keyCode |
| keyName shiftModifier sound stretch weight"> |
| <template> |
| <style> |
| :host { |
| background-color: #ffffff; |
| border-radius: 1px; |
| border-style: solid; |
| border-width: 0px 0px; |
| color: #666666; |
| font-family: 'Droid Sans'; |
| font-weight: 100; |
| } |
| |
| :host .key { |
| background-image: none; |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: contain; |
| bottom: 0; |
| height: 1.2em; |
| left: 0; |
| margin: auto; |
| position: absolute; |
| right: 0; |
| text-align: center; |
| top: 0; |
| } |
| |
| :host([align=left]) .key { |
| padding-left: 1em; |
| } |
| |
| /* TODO(rsadam@): Remove when we fully switch to native shadow dom. */ |
| /* TODO(rsadam@): Move shift key rules to kb-shift-key. */ |
| kb-shift-key .key, |
| :host(kb-shift-key) .key { |
| height: 70%; |
| width: auto; |
| } |
| |
| :host([image].cursor) .key { |
| height: 85%; |
| } |
| |
| :host([image]) .key { |
| height: 30%; |
| } |
| |
| :host([image].search) .key { |
| height: 80%; |
| } |
| |
| :host .hint, |
| :host([invert]) key { |
| color: #bbbbbb; |
| } |
| |
| :host .hint { |
| font-size: 70%; |
| position: absolute; |
| right: 7%; |
| top: 5%; |
| } |
| |
| :host([invert]) .hint { |
| color: #666666; |
| } |
| |
| :host(.dark) { |
| font-size: 70%; |
| } |
| |
| :host(.active) { |
| background-color: #dddddd; |
| background-size: cover; |
| } |
| |
| :host(.dark:not(.active)) { |
| background-color: #555555; |
| } |
| |
| :host(:not(.dark):not(.active)) { |
| background-color: #ffffff; |
| background-size: cover; |
| } |
| </style> |
| <div id="key" class="key"> |
| <content></content> |
| </div> |
| <div class="hint" part="hint">{{hintText}}</div> |
| </template> |
| </polymer-element> |
| |
| <!-- Special keys --> |
| <polymer-element name="kb-abc-key" class="symbol dark" char="Invalid" |
| extends="kb-key" weight="125"> |
| </polymer-element> |
| |
| <polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark" |
| align="center" attributes="showMenu" char="Invalid" extends="kb-key"> |
| </polymer-element> |