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.
2026-09-30 23:13:03 +02:00 · 2026-09-30 23:13:03 +02:00 · b38dea0597
commit b38dea0597
parent 93e3a48004
25901 changed files with 9982925 additions and 369 deletions
--- a/gaia/shared/elements/gaia_buttons/examples/index.html
+++ b/gaia/shared/elements/gaia_buttons/examples/index.html
@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8" />
+  <title>GaiaButtons Demo</title>
+  <meta name="description" content="Demo app for gaia-buttons" />
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+  </style>
+  <script>
+    window.onload = function() {
+      var dirInput = document.getElementById('dir');
+      dirInput.checked = false;
+      dirInput.onchange= function() {
+        document.documentElement.dir = this.checked ? "rtl" : "ltr";
+      }
+    };
+  </script>
+  <script>window.GaiaButtonsBaseurl = '../';</script>
+  <script src="../../../js/component_utils.js"></script>
+  <script src="../script.js" type="text/javascript"></script>
+</head>
+<body role="application">
+  <p dir="ltr">
+    <label class="bb-docs">
+      <input id="dir" type="checkbox"> RTL mode
+    </label>
+  </p>
+
+  <gaia-buttons class="inline">
+    <button class="full" dir="auto">With class="inline"</button>
+  </gaia-buttons>
+  <gaia-buttons skin="dark">
+    <button class="recommend icon icon-previous">Button 1</button>
+    <button disabled>Button 2</button>
+    <a href="#" class="danger">Anchor 1</a>
+  </gaia-buttons>
+</body>
+</html>
--- a/gaia/shared/elements/gaia_buttons/examples/stress.html
+++ b/gaia/shared/elements/gaia_buttons/examples/stress.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8" />
+  <title>GaiaButtons Demo</title>
+  <meta name="description" content="Demo app for gaia-buttons" />
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+  </style>
+  <script>
+    window.onload = function() {
+      var dirInput = document.getElementById('dir');
+      dirInput.checked = false;
+      dirInput.onchange = function() {
+        document.documentElement.dir = this.checked ? "rtl" : "ltr";
+      };
+    };
+
+  </script>
+  <script>window.GaiaButtonsBaseurl = '../';</script>
+  <script src="../../../js/component_utils.js"></script>
+  <script src="../script.js" type="text/javascript"></script>
+</head>
+<body role="application">
+  <p dir="ltr">
+    <label class="bb-docs">
+      <input id="dir" type="checkbox"> RTL mode
+    </label>
+  </p>
+
+  <section id="stress-test">
+  </section>
+  <script>
+    // add a thousand buttons
+    var stressSection = document.getElementById('stress-test');
+    var innerSectionHtml = '';
+    for (var i = 0; i < 1000; i++) {
+      innerSectionHtml += 
+        '<gaia-buttons class="inline">' +
+        '  <button class="icon icon-next">next</button>' +
+        '</gaia-buttons>';
+    }
+    stressSection.innerHTML = innerSectionHtml;
+  </script>
+</body>
+</html>
--- a/gaia/shared/elements/gaia_buttons/images/left-light.svg
+++ b/gaia/shared/elements/gaia_buttons/images/left-light.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 18.2995,19.66 -5.056,-5.057 5.056,-5.056 c -0.31,-0.516 -0.62,-1.032 -0.93,-1.34 l -5.672,5.673 v 1.652 l 5.675,5.676 c 0.31,-0.515 0.722,-0.928 0.93,-1.547 z"/></svg>
--- a/gaia/shared/elements/gaia_buttons/images/right-light.svg
+++ b/gaia/shared/elements/gaia_buttons/images/right-light.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="M11.8,19.9l4.9-4.9l-4.9-4.9c0.3-0.5,0.6-1,0.9-1.3l5.5,5.5c0,0.3,0,0.5,0,0.8c0,0.3,0,0.5,0,0.8l-5.5,5.5 C12.4,20.9,12,20.5,11.8,19.9z"/></svg>
--- a/gaia/shared/elements/gaia_buttons/script.js
+++ b/gaia/shared/elements/gaia_buttons/script.js
@ -0,0 +1,18 @@
+'use strict';
+/* global ComponentUtils */
+
+window.GaiaButtons = (function(win) {
+  // Extend from the HTMLElement prototype
+  var proto = Object.create(HTMLElement.prototype);
+
+  // Allow baseurl to be overridden (used for demo page)
+  var baseurl = window.GaiaButtonsBaseurl ||
+    '/shared/elements/gaia_buttons/';
+
+  proto.createdCallback = function() {
+    ComponentUtils.style.call(this, baseurl);
+  };
+
+  // Register and return the constructor
+  return document.registerElement('gaia-buttons', { prototype: proto });
+})(window);
--- a/gaia/shared/elements/gaia_buttons/style.css
+++ b/gaia/shared/elements/gaia_buttons/style.css
@ -0,0 +1,281 @@
+/* ---------------------------------------
+ * gaia-buttons:
+ * Container for buttons e.g:
+ * action menu, confirm, edit mode, FTU
+ * --------------------------------------- */
+
+gaia-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 7rem;
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+
+gaia-buttons:not(.inline) {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  border-top: 0.1rem solid #e7e7e7;
+  padding: 0;
+  background-color: #f4f4f4;
+}
+/* this 'end' padding must match the buttons 'start' margin */
+gaia-buttons:not(.inline):-moz-dir(ltr) { padding-right: 1.5rem; }
+gaia-buttons:not(.inline):-moz-dir(rtl) { padding-left: 1.5rem; }
+
+gaia-buttons.inline a,
+gaia-buttons.inline button {
+  margin: 0;
+}
+
+button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+a,
+button {
+  position: relative;
+  font-family: sans-serif;
+  font-style: italic;
+  width: 100%;
+  height: 4rem;
+  margin: 0;
+  padding: 0 0.2rem;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #d8d8d8;
+  border: none;
+  border-radius: 2rem;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 4rem;
+  color: #333;
+  text-align: center;
+  text-decoration: none;
+  outline: none;
+}
+:-moz-dir(ltr) a,
+:-moz-dir(ltr) button {
+  margin-left: 1.5rem;
+}
+:-moz-dir(rtl) a,
+:-moz-dir(rtl) button {
+  margin-right: 1.5rem;
+}
+
+/* Recommend */
+a.recommend,
+button.recommend {
+  background-color: #00caf2;
+  color: #fff;
+}
+
+/* Danger */
+a.danger,
+button.danger {
+  background-color: #e51e1e;
+  color: #fff;
+}
+
+/* Pressed */
+a:active,
+button:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+
+a::-moz-selection,
+button::-moz-selection {
+  background-color: transparent;
+}
+
+/* Disabled */
+a[aria-disabled="true"],
+button[disabled] {
+  background-color: rgba(0,0,0,0.05);
+  color: #c7c7c7;
+  pointer-events: auto;
+}
+
+a[aria-disabled="true"].recommend,
+button[disabled].recommend {
+  background-color: #97cbd5;
+  color: rgba(255,255,255,0.5);
+}
+
+a[aria-disabled="true"].danger,
+button[disabled].danger {
+  background-color: #eb7474;
+  color: rgba(255,255,255,0.5);
+}
+
+a[aria-disabled="true"]::-moz-selection,
+button[disabled]::-moz-selection {
+  -moz-user-select: none;
+}
+
+/* Hidden */
+[hidden] {
+  visibility: hidden;
+}
+
+/* Icons */
+a.icon,
+button.icon {
+  position: relative;
+}
+
+a.icon:before,
+button.icon:before {
+  content: "";
+  width: 3rem;
+  height: 3rem;
+  position: absolute;
+  top: 50%;
+  margin-top: -1.5rem;
+  background: transparent no-repeat center center / 100% auto;
+}
+:-moz-dir(ltr) a.icon:before,
+:-moz-dir(ltr) button.icon:before { right: 0.5rem; }
+:-moz-dir(rtl) a.icon:before,
+:-moz-dir(rtl) button.icon:before { left: 0.5rem; }
+
+a.icon-next:before,
+button.icon-next:before {
+  background-size: 3rem;
+}
+:-moz-dir(ltr) a.icon-next:before,
+:-moz-dir(ltr) button.icon-next:before {
+  background-image: url(images/right-light.svg);
+}
+:-moz-dir(rtl) a.icon-next:before,
+:-moz-dir(rtl) button.icon-next:before {
+  background-image: url(images/left-light.svg);
+}
+
+a.icon-previous:before,
+button.icon-previous:before {
+  background-size: 3rem;
+}
+:-moz-dir(ltr) a.icon-previous:before,
+:-moz-dir(ltr) button.icon-previous:before {
+  left: 0.5rem;
+  background-image: url(images/left-light.svg);
+}
+:-moz-dir(rtl) a.icon-previous:before,
+:-moz-dir(rtl) button.icon-previous:before {
+  right: 0.5rem;
+  background-image: url(images/right-light.svg);
+}
+
+
+/* -----------------------------------------------------------------
+  SKIN: dark
+----------------------------------------------------------------- */
+
+gaia-buttons[skin="dark"] {
+  background: #4d4d4d;
+  border: none;
+}
+
+/* Pressed */
+[skin="dark"] a:active,
+[skin="dark"] button:active {
+  background-color: #00aacc;
+}
+
+/* Disabled */
+[skin="dark"] a[aria-disabled="true"],
+[skin="dark"] button[disabled] {
+  background-color: #565656;
+  color: rgba(255,255,255,0.4);
+}
+
+[skin="dark"] a[aria-disabled="true"].recommend,
+[skin="dark"] button[disabled].recommend {
+  background-color: #006579;
+}
+
+[skin="dark"] a[aria-disabled="true"].danger,
+[skin="dark"] button[disabled].danger {
+  background-color: #730f0f;
+}
+
+/* -----------------------------------------------------------------
+  Transitions
+----------------------------------------------------------------- */
+
+[transition] {
+  display: flex;
+  transition: visibility var(--transition-duration);
+}
+
+[transition][hidden] {
+  pointer-events: none;
+}
+
+[transition="slide"] {
+  transform: translateY(0);
+  transition: transform var(--transition-duration) ease,
+              visibility var(--transition-duration);
+}
+
+[transition="slide"][hidden] {
+  transform: translateY(100%);
+}
+
+[transition="fade"] {
+  opacity: 1;
+  transition: opacity var(--transition-duration) ease,
+              visibility var(--transition-duration);
+}
+
+[transition="fade"][hidden] {
+  opacity: 0;
+}
+
+/* -----------------------------------------------------------------
+  RESPONSIVE: tablet
+----------------------------------------------------------------- */
+
+@media (min-width: 768px) {
+
+  gaia-buttons {
+    height: 10rem;
+  }
+
+  gaia-buttons:not(.inline) {
+    border-top-width: 0.2rem;
+  }
+  /* this 'end' padding must match the buttons 'start' margin */
+  gaia-buttons:not(.inline):-moz-dir(ltr) { padding-right: 3rem; }
+  gaia-buttons:not(.inline):-moz-dir(rtl) { padding-left: 3rem; }
+
+  a,
+  button {
+    font-size: 2rem;
+    height: 5rem;
+    line-height: 5rem;
+    border-radius: 2.5rem;
+    max-width: 40rem;
+  }
+  :-moz-dir(ltr) a,
+  :-moz-dir(ltr) button {
+    margin-left: 3rem;
+  }
+  :-moz-dir(rtl) a,
+  :-moz-dir(rtl) button {
+    margin-right: 3rem;
+  }
+
+}
+
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 18.2995,19.66 -5.056,-5.057 5.056,-5.056 c -0.31,-0.516 -0.62,-1.032 -0.93,-1.34 l -5.672,5.673 v 1.652 l 5.675,5.676 c 0.31,-0.515 0.722,-0.928 0.93,-1.547 z"/></svg>`