| OLD | NEW |
| (Empty) |
| 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> | |
| OLD | NEW |