| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 -- Copyright 2013 The Chromium Authors. All rights reserved. | 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 | 3 -- Use of this source code is governed by a BSD-style license that can be |
| 4 -- found in the LICENSE file. | 4 -- found in the LICENSE file. |
| 5 --> | 5 --> |
| 6 | 6 |
| 7 <polymer-element name="kb-key" extends="kb-key-base" attributes="image keyCode | 7 <polymer-element name="kb-key" extends="kb-key-base" attributes="image keyCode |
| 8 keyName shiftModifier sound stretch weight"> | 8 keyName shiftModifier sound stretch weight"> |
| 9 <template> | 9 <template> |
| 10 <style> | 10 <style> |
| 11 :host { | 11 :host { |
| 12 background-color: #ffffff; | 12 background-color: #ffffff; |
| 13 border-radius: 1px; | 13 border-radius: 1px; |
| 14 border-style: solid; | 14 border-style: solid; |
| 15 border-width: 0px 0px; | 15 border-width: 0px 0px; |
| 16 color: #666666; | 16 color: #666666; |
| 17 font-family: 'Droid Sans'; | 17 font-family: roboto-bold; |
| 18 font-weight: 100; | 18 font-weight: 100; |
| 19 } | 19 } |
| 20 | 20 |
| 21 :host .key { | 21 :host .key { |
| 22 background-image: none; | 22 background-image: none; |
| 23 background-position: center; | 23 background-position: center; |
| 24 background-repeat: no-repeat; | 24 background-repeat: no-repeat; |
| 25 background-size: contain; | 25 background-size: contain; |
| 26 bottom: 0; | 26 bottom: 0; |
| 27 height: 1.2em; | 27 height: 1.2em; |
| (...skipping 18 matching lines...) Expand all Loading... |
| 46 } | 46 } |
| 47 | 47 |
| 48 :host([image].cursor) .key { | 48 :host([image].cursor) .key { |
| 49 height: 85%; | 49 height: 85%; |
| 50 } | 50 } |
| 51 | 51 |
| 52 :host([image]) .key { | 52 :host([image]) .key { |
| 53 height: 30%; | 53 height: 30%; |
| 54 } | 54 } |
| 55 | 55 |
| 56 :host([image].search) .key { | 56 :host([image].tab) .key { |
| 57 height: 80%; | 57 height: 40%; |
| 58 } | 58 } |
| 59 | 59 |
| 60 :host .hint, | 60 :host .hint, |
| 61 :host([invert]) key { | 61 :host([invert]) key { |
| 62 color: #bbbbbb; | 62 color: #bbbbbb; |
| 63 } | 63 } |
| 64 | 64 |
| 65 :host .hint { | 65 :host .hint { |
| 66 font-size: 70%; | 66 font-size: 70%; |
| 67 position: absolute; | 67 position: absolute; |
| 68 right: 7%; | 68 right: 7%; |
| 69 top: 5%; | 69 top: 5%; |
| 70 } | 70 } |
| 71 | 71 |
| 72 :host([invert]) .hint { | 72 :host([invert]) .hint { |
| 73 color: #666666; | 73 color: #666666; |
| 74 } | 74 } |
| 75 | 75 |
| 76 :host(.dark) { | 76 :host(.dark) { |
| 77 font-size: 70%; | 77 font-size: 70%; |
| 78 } | 78 } |
| 79 | 79 |
| 80 :host(.dark.active) { |
| 81 background-color: #cccccc; |
| 82 } |
| 83 |
| 80 :host(.active) { | 84 :host(.active) { |
| 81 background-color: #dddddd; | 85 background-color: #dddddd; |
| 82 background-size: cover; | 86 background-size: cover; |
| 83 } | 87 } |
| 84 | 88 |
| 85 :host(.dark:not(.active)) { | 89 :host(.dark:not(.active)) { |
| 86 background-color: #555555; | 90 background-color: #555555; |
| 87 } | 91 } |
| 88 | 92 |
| 89 :host(:not(.dark):not(.active)) { | 93 :host(:not(.dark):not(.active)) { |
| 90 background-color: #ffffff; | 94 background-color: #ffffff; |
| 91 background-size: cover; | 95 background-size: cover; |
| 92 } | 96 } |
| 93 </style> | 97 </style> |
| 94 <div id="key" class="key"> | 98 <div id="key" class="key"> |
| 95 <content></content> | 99 <content></content> |
| 96 </div> | 100 </div> |
| 97 <div class="hint" part="hint">{{hintText}}</div> | 101 <div class="hint" part="hint">{{hintText}}</div> |
| 98 </template> | 102 </template> |
| 99 </polymer-element> | 103 </polymer-element> |
| 100 | 104 |
| 101 <!-- Special keys --> | 105 <!-- Special keys --> |
| 102 <polymer-element name="kb-abc-key" class="symbol dark" char="Invalid" | 106 <polymer-element name="kb-abc-key" class="symbol dark" char="Invalid" |
| 103 extends="kb-key" weight="125"> | 107 extends="kb-key" weight="125"> |
| 104 </polymer-element> | 108 </polymer-element> |
| 105 | 109 |
| 106 <polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark" | 110 <polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark" |
| 107 align="center" attributes="showMenu" char="Invalid" extends="kb-key"> | 111 align="center" attributes="showMenu" char="Invalid" extends="kb-key"> |
| 108 </polymer-element> | 112 </polymer-element> |
| OLD | NEW |