Upstream version 7.36.149.0
[platform/framework/web/crosswalk.git] / src / ui / keyboard / resources / elements / kb-altkey.html
index 276ca5c..1d4cc4e 100644 (file)
         background-position: center center;
         background-repeat: no-repeat;
         background-size: contain;
-        border-left: 1px solid rgba(0, 0, 0, 0.15);
-        border-top: 2px solid #4b4b4e;
         display: -webkit-box;
         position: relative;
       }
 
-      :host.active {
-        background-color: #848490;
-        border-top: 1px solid #848490;
+      :host(.active) {
+        background-color: #dddddd
       }
 
-      :host:first-child {
+      :host(:first-child) {
         border-top-left-radius: 2px;
         border-bottom-left-radius: 2px;
       }
 
-      :host:last-child {
+      :host(:not(:first-child)) .key{
+        border-left: solid 2px #dddddd;
+      }
+
+      :host(:last-child) {
         border-top-right-radius: 2px;
         border-bottom-right-radius: 2px;
       }
 
-      ::part(key) {
+      :host .key {
         bottom: 0;
-        color: #ffffff;
-        font-family: 'Open Sans', 'Noto Sans UI', sans-serif;
+        color: #666666;
+        font-family: roboto-bold;
         font-weight: 100;
         height: 1.2em;
         left: 0;
         text-align: center;
       }
     </style>
-    <div part="key">
+    <div class="key">
       <content></content>
     </div>
   </template>
-  <script>
-    /**
-     * Filter out mouse/touch movements internal to this node. When moving
-     * inside a node, the event should be filter out.
-     * @param {Node} node The accent key node which receives event.
-     * @param {event} event A pointer move event.
-     * @return {boolean} True if event is external to node.
-     */
-    function isRelevantEvent(node, event) {
-      return !(node.compareDocumentPosition(event.relatedTarget)
-          & Node.DOCUMENT_POSITION_CONTAINED_BY);
-    };
-    Polymer('kb-altkey', {
-      over: function(event) {
-        if (isRelevantEvent(this, event)) {
-          // Dragging over an accent key is equivalent to pressing on the accent
-          // key.
-          this.fire('key-down', {});
-        }
-      },
-
-      out: function(event) {
-        if (isRelevantEvent(this, event)) {
-          this.classList.remove('active');
-        }
-      },
-
-      up: function(event) {
-        var detail = {
-            char: this.charValue
-        };
-        this.fire('key-up', detail);
-      },
-
-      // TODO(bshe): kb-altkey should extend from kb-key-base.
-      autoRelease: function() {
-      },
-
-      /**
-       * Character value associated with the key. Typically, the value is a
-       * single character, but may be multi-character in cases like a ".com"
-       * button.
-       * @return {string}
-       */
-      get charValue() {
-        return this.char || this.textContent;
-      }
-    });
-  </script>
 </polymer-element>