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-altkey-set" attributes="offset char"> 8 <template> 9 <style> 10 /* TODO(stevet): Migrate this to main.css using custom pseudo 11 * selectors. 12 */ 13 @host { 14 * { 15 background-color: #3b3b3e; 16 border-radius: 2px; 17 display: -webkit-box; 18 text-align: center; 19 position: absolute; 20 } 21 } 22 23 content::-webkit-distributed(.active) { 24 background-color: #848490 !important; 25 /* This artificial border is used to prevent the key contents from 26 * "bouncing" due to the inactive state having a different border size. 27 */ 28 border-radius: 2px; 29 border-top: 1px solid #848490; 30 /* Do not use box shadow until performance improves 31 * http://code.google.com/p/chromium/issues/detail?id=99045 32 box-shadow: 0px 0px 15px #fff; 33 */ 34 } 35 36 content::-webkit-distributed(kb-altkey) { 37 -webkit-flex: 1 auto; 38 background-color: #3b3b3e; 39 border-left: 1px solid rgba(0, 0, 0, 0.15); 40 border-top: 2px solid #4b4b4e; 41 color: #ffffff; 42 font-family: 'Open Sans', sans-serif; 43 font-weight: 100; 44 } 45 46 content::-webkit-distributed(kb-altkey:first-child) { 47 border-top-left-radius: 2px; 48 border-bottom-left-radius: 2px; 49 } 50 51 content::-webkit-distributed(kb-altkey:last-child) { 52 border-top-right-radius: 2px; 53 border-bottom-right-radius: 2px; 54 } 55 </style> 56 <content select="*"></content> 57 </template> 58 <script> 59 Polymer('kb-altkey-set', { 60 offset: 0, 61 }); 62 </script> 63 </polymer-element> 64
