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/shared/elements/gaia_select/examples/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>GaiaSelect Demo</title>
+  <meta name="description" content="Demo app for gaia-switch" />
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+    }
+    section {
+      margin: 1rem;
+    }
+  </style>
+  <script src="../../../js/component_utils.js"></script>
+  <script>window.GaiaSelectBaseurl = '../';</script>
+  <script src="../script.js"></script>
+  <script defer src="example.js"></script>
+</head>
+<body role="application">
+  <section>
+    <gaia-select>
+      <label>Select an option</label>
+      <select>
+        <option>Ehad</option>
+        <option>Shtaim</option>
+        <option selected>Shalosh</option>
+      </select>
+    </gaia-select>
+  </section>
+</body>
+</html>

gaia/shared/elements/gaia_select/script.js

@@ -0,0 +1,34 @@
+'use strict';
+/* global ComponentUtils */
+
+window.GaiaSelect = (function(win) {
+  // Extend from the HTMLSelectElement prototype
+  var proto = Object.create(HTMLElement.prototype);
+
+  // Allow baseurl to be overridden (used for demo page)
+  var baseurl = window.GaiaSelectBaseurl || '/shared/elements/gaia_select/';
+
+  var selectCounter = 0;
+
+  proto.createdCallback = function() {
+    var label = this.querySelector('label');
+    if (label) {
+      // If we have a label, make sure it correctly associated
+      var select = this.querySelector('select');
+      if (label.control != select) {
+        // If it not associated, do so.
+        var id = select.id;
+        if (!id) {
+          // If the select does not already have an id, create one.
+          select.id = id = 'gaia-select-' + (++selectCounter);
+        }
+        label.htmlFor = id;
+      }
+    }
+
+    ComponentUtils.style.call(this, baseurl);
+  };
+
+  // Register and return the constructor
+  return document.registerElement('gaia-select', { prototype: proto });
+})(window);

gaia/shared/elements/gaia_select/style.css

@@ -0,0 +1,72 @@
+/* ----------------------------------
+ * SWITCHES
+ * ---------------------------------- */
+
+gaia-select {
+  width: 100%;
+  position: relative;
+  display: block;
+}
+
+gaia-select > label {
+  margin: 0 0 10px 15px;
+  line-height: 22px;
+  font-size: 18px;
+  display: block;
+}
+
+gaia-select::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: auto;
+  right: 0.8rem;
+  bottom: 0.5rem;
+  border-top: 0.7rem solid transparent;
+  border-bottom: 0.7rem solid transparent;
+  border-left: 0.7rem solid #00AAC5;
+  transform: rotate(45deg);
+  z-index: 1;
+  pointer-events: none;
+}
+
+gaia-select:-moz-dir(rtl)::after {
+  left: 0.8rem;
+  right: unset;
+  transform: rotate(135deg);
+}
+
+select {
+  border: 0.1rem solid #C7C7C7;
+  border-radius: 0;
+  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: initial;
+  width: 100%;
+  padding: 0.8rem 3rem 0.7rem 0.8rem;
+  margin: 0;
+  font-family: sans-serif;
+  font-style: italic;
+  white-space: nowrap;
+  font-weight: normal;
+  font-size: 1.6rem;
+  height: auto;
+  min-height: 4rem;
+  line-height: 2rem;
+  -moz-appearance: none;
+  /* remove dotted outline */
+  color: transparent;
+  text-shadow: 0 0 0 #333;
+}
+
+select:active {
+  background-color: #B2F2FF;
+  text-shadow: 0 0 0 #fff;
+}
+
+option {
+  background-color: initial;
+  color: #333;
+  text-shadow: none;
+}