src/ui/keyboard/resources/elements/kb-altkey-set.html

   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>