button-element/button-element.html at master · hrlink/button-element · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-behaviors/iron-button-state.html">
<link rel="import" href="../iron-behaviors/iron-control-state.html">

<dom-module id="button-element">
  <template>
    <style>
      :host {
        @apply --layout-horizontal;
        @apply --layout-center-center;
        height: 2.5em;
      }
      :host([pressed]) {
        color: var(--dark-primary-color);
      }
      :host(:not([disabled])) {
        cursor: pointer;
      }
      :host([primary]) {
        border-radius: 2px;
        transition: background-color .4s;
        color: var(--dark-theme-text-color);
        background-color: var(--dark-primary-color);
      }
      :host([primary][pressed]) {
        background-color: var(--primary-color);
      }
      :host([outline]) {
        border-radius: 2px;
        transition: color .4s, background-color .4s;
        color: var(--dark-theme-text-color);
        color: var(--dark-primary-color);
        box-shadow: 0 0 0 1px var(--dark-primary-color);
      }
      :host([outline][pressed]) {
        color: var(--dark-theme-text-color);
        background-color: var(--dark-primary-color);
      }
    </style>
    <div>[[text]]</div>
  </template>

  <script>
    /**
     * `button-element`
     * A button element
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class ButtonElement extends Polymer.mixinBehaviors([Polymer.IronControlState, Polymer.IronButtonState], Polymer.Element) {
      static get is() { return 'button-element'; }
      static get properties() {
        return {
          text: {
            type: String
          }
        };
      }
      connectedCallback() {
        super.connectedCallback();
//        this.setAttribute('tabindex', 0);
      }
    }

    window.customElements.define(ButtonElement.is, ButtonElement);
  </script>
</dom-module>