Add xtrm-button

xtrm-button/xtrm-button.html

@@ -0,0 +1,119 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../bower_components/font-roboto/roboto.html">
+
+<link rel="import" href="../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+
+<dom-module id="xtrm-button">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+        box-sizing: border-box;
+        min-width: 5.14em;
+        margin: 0 0.29em;
+        background: transparent;
+        /*noinspection CssUnresolvedCustomProperty*/
+        color: var(--xtrm-button-color, var(--primary-text-color, #000));
+        text-align: center;
+        font: inherit;
+        font-family: 'Roboto', 'Noto', sans-serif;
+        text-transform: uppercase;
+        cursor: pointer;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -webkit-user-select: none;
+        user-select: none;
+        z-index: 0;
+        padding: 0.7em 0.57em 0.3em 0.57em;
+        font-weight: bold;
+      }
+
+      :host:hover {
+        color: var(--primary-color);
+        font-weight: bold;
+      }
+
+      :host:focus {
+        color: var(--primary-color);
+        outline: none;
+        font-weight: bold;
+      }
+
+      #underline {
+        width: 100%;
+        height: 2px;
+        background-color: var(--primary-color);
+        transform: scale3d(0, 1, 1);
+        transition: transform 0.25s ease;
+      }
+
+      /*noinspection CssUnusedSymbol*/
+      #underline.focused {
+        transform: none;
+      }
+    </style>
+    <div>
+      <content></content>
+    </div>
+    <div id="underline"></div>
+  </template>
+  <script>
+    /// <reference path="polymer.d.ts"/>
+    Polymer({
+      is: 'xtrm-button',
+
+      behaviors: [Polymer.IronA11yKeysBehavior],
+
+      hostAttributes: {
+        role: 'button',
+        tabindex: '0'
+      },
+
+      properties: {
+        focused: {
+          type: Boolean,
+          value: false,
+          readOnly: true,
+          notify: true,
+          observer: '_focusedChanged'
+        }
+      },
+
+      listeners: {
+        'focus': '_onFocus',
+        'blur': '_onBlur',
+        'mouseenter': '_onFocus',
+        'mouseleave': '_onBlur'
+      },
+
+      keyBindings: {
+        'enter': '_click',
+        'space': '_click'
+      },
+
+      _click: function () {
+        this.click();
+      },
+
+      _onFocus: function () {
+        //noinspection JSUnresolvedFunction
+        this._setFocused(true);
+      },
+
+      _onBlur: function () {
+        //noinspection JSUnresolvedFunction
+        this._setFocused(false);
+      },
+
+      _focusedChanged: function (focused) {
+        if (focused) {
+          this.$.underline.style['will-change'] = 'transform';
+          this.$.underline.classList.add('focused');
+        } else {
+          this.$.underline.classList.remove('focused');
+        }
+      }
+    });
+  </script>
+</dom-module>

xtrm-drop-up-menu/xtrm-drop-up-menu.html

@@ -2,6 +2,8 @@
 
 <link rel="import" href="../../iron-overlay-behavior/iron-overlay-behavior.html">
 
+<link rel="import" href="../xtrm-button/xtrm-button.html">
+
 <dom-module id="xtrm-drop-up-menu">
   <template>
     <style>

xtrm-footer/xtrm-footer.html

@@ -1,5 +1,6 @@
 <link rel="import" href="../../polymer/polymer.html">
 
+<link rel="import" href="../xtrm-button/xtrm-button.html">
 <link rel="import" href="../xtrm-drop-up-menu/xtrm-drop-up-menu.html">
 
 <dom-module id="xtrm-footer">