maxq-button.html

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="maxq-button">
  <template>
    <style>
      :host {
        display: inline-flex;
        font-family: inherit;
        height: 32px;
        border-radius: 32px;
        padding: 0 16px;
        font-size: 16px;
        align-items: center;
        background-color: #ebebeb;
        transition: background-color 0.2s ease;
        outline: none;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }

      :host(:hover) {
        background-color: #f5f5f5;
      }

      :host(:active) {
        background-color: #e1e1e1;
      }

      :host(.primary) {
        background-color: #3569a4;
        color: white;
      }

      :host(.primary:hover) {
        background-color: #4978ad;
      }

      :host(.primary:active) {
        background-color: #2B5384;
      }

      :host(.group-element:first-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      :host(.group-element:last-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      :host(.group-element:not(:first-child):not(:last-child)) {
        border-radius: 0;
      }

      :host(.group-element:not(:last-child)) {
        border-right: 1px solid #ddd;
        margin-right: -4px;
      }

      :host([toggles][active]) {
        background-color: #e1e1e1;
      }

      :host(.primary[toggles][active]) {
        background-color: #2B5384;
      }
    </style>
    <slot></slot>
  </template>

  <script>
    /**
     * `maxq-button`
     * A button for the MaxQ design system
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class MaxqButton extends Polymer.Element {
      static get is() { return 'maxq-button'; }
      static get properties() {
        return {
          toggles: {
            type: Boolean,
            value: false,
            reflectToAttribute: true,
            observer: '_togglesChanged'
          },
          active: {
            type: Boolean,
            value: false,
            reflectToAttribute: true
          }
        };
      }
      constructor() {
        super();
        this.tabIndex = 0;
      }

      _togglesChanged(newVal, oldVal) {

        this.addEventListener('click', (e) => {
          this.active = !this.active;
        });
      }
    }

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