sky/framework/sky-button/sky-button.sky

<!--
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-->
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />

<sky-element name="sky-button" attributes="highlight:boolean">
<template>
  <style>
    :host {
      display: inline-flex;
      border-radius: 4px;
      justify-content: center;
      align-items: center;
      border: 1px solid blue;
      -webkit-user-select: none;
      margin: 5px;
    }
    :host([highlight=true]) {
      background-color: orange;
    }
  </style>
  <content />
</template>
<script>
module.exports = class extends SkyElement {
  created() {
    this.tabIndex = 0; // Make focusable.

    this.addEventListener('mousedown', function() {
      this.highlight = true;
    });
    this.addEventListener('mouseup', function() {
      this.highlight = false;
    });
    this.addEventListener('mouseout', function() {
      this.highlight = false;
    });
  }
}.register();
</script>
</sky-element>