• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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