Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/distros/spark/apps/customizer-launcher/components/gaia-button/gaia-button.js

@@ -0,0 +1,217 @@
+(function(define){define(function(require,exports,module){
+/*jshint esnext:true*/
+'use strict';
+
+/**
+ * Dependencies
+ */
+
+var component = require('gaia-component');
+
+/**
+ * Exports
+ */
+
+module.exports = component.register('gaia-button', {
+  created: function() {
+    this.setupShadowRoot();
+
+    this.els = {
+      inner: this.shadowRoot.querySelector('.inner'),
+      content: this.shadowRoot.querySelector('.content')
+    };
+
+    this.circular = this.hasAttribute('circular');
+    this.disabled = this.hasAttribute('disabled');
+    this.setAttribute('role', 'button');
+    this.tabIndex = 0;
+  },
+
+  attrs: {
+    circular: {
+      get: function() { this.getAttribute('circular'); },
+      set: function(value) {
+        value = !!(value === '' || value);
+        if (value) {
+          this.setAttribute('circular', '');
+          this.els.inner.setAttribute('circular', '');
+        } else {
+          this.removeAttribute('circular');
+          this.els.inner.removeAttribute('circular');
+        }
+      }
+    },
+
+    disabled: {
+      get: function() { this.getAttribute('disabled'); },
+      set: function(value) {
+        value = !!(value === '' || value);
+        if (value) {
+          this.setAttribute('disabled', '');
+          this.els.inner.setAttribute('disabled', '');
+        } else {
+          this.removeAttribute('disabled');
+          this.els.inner.removeAttribute('disabled');
+        }
+      }
+    }
+  },
+
+  template: `
+    <div class="inner">
+      <div class="background"></div>
+      <div class="content"><content></content></div>
+    </div>
+
+    <style>
+
+    :host {
+      display: block;
+      box-sizing: border-box;
+      height: 50px;
+      min-width: 50%;
+      margin: var(--base-m, 18px);
+      outline: 0;
+      font-style: italic;
+      font-size: 17px;
+    }
+
+    @media(min-width:500px) {
+      :host { min-width: 140px; }
+    }
+
+    :host([circular]) {
+      width: 50px;
+      min-width: 0;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    /** Inner
+     ---------------------------------------------------------*/
+
+    .inner {
+      position: relative;
+      height: 100%;
+      border-radius: 50px;
+      overflow: hidden;
+      cursor: pointer;
+      -moz-user-select: none;
+      line-height: 1;
+      transition: color 0ms 300ms;
+
+      background:
+        var(--button-background,
+        var(--input-background,
+        var(--background-plus,
+        #fff)));
+
+      color:
+        var(--button-color,
+        var(--text-color,
+        inherit));
+
+      box-shadow:
+        var(--button-box-shadow,
+        var(--box-shadow,
+        none));
+    }
+
+    /**
+     * [circular]
+     */
+
+    .inner[circular] {
+      border-radius: 50%;
+    }
+
+    /**
+     * .pressed
+     */
+
+    .inner:active {
+      transition: none;
+      color: var(--button-color-active, #fff);
+      box-shadow: var(--button-box-shadow-active, none);
+    }
+
+    /** Background
+     ---------------------------------------------------------*/
+
+    .background {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+
+      transition: opacity 500ms 200ms;
+
+      background:
+        var(--button-background-active,
+        var(--highlight-color,
+        #333));
+    }
+
+    :active .background {
+      transition: none;
+      opacity: 1;
+    }
+
+    .released .background {
+      transition: opacity 500ms;
+    }
+
+    i:before {
+      font-size: 26px;
+    }
+
+    ::content i {
+      margin-left: -2px;
+      margin-right: -2px;
+    }
+
+    ::content i + span,
+    ::content span + i {
+      -moz-margin-start: 8px;
+    }
+
+
+
+    /** Content
+     ---------------------------------------------------------*/
+
+    /**
+     * 1. In some cases events seems to be getting
+     *    swallowed by text-nodes. Ignoring pointer-
+     *    events means we can listen on parent nodes
+     *    instead.
+     */
+
+    .content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      z-index: 2;
+      height: 100%;
+      padding: 0 18px;
+      pointer-events: none; /* 1 */
+    }
+
+    [circular] .content {
+      padding: 0;
+    }
+
+    </style>`
+});
+
+});})((function(n,w){return typeof define=='function'&&define.amd?
+define:typeof module=='object'?function(c){c(require,exports,module);}:function(c){
+var m={exports:{}},r=function(n){return w[n];};w[n]=c(r,m.exports,m)||m.exports;};})('gaia-button',this));