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.
This commit is contained in:
OverSu 2026-09-30 23:13:03 +02:00
commit b38dea0597
25901 changed files with 9982925 additions and 369 deletions

View file

@ -0,0 +1,28 @@
{
"name": "evt",
"main": "index.js",
"version": "0.4.0",
"homepage": "https://github.com/wilsonpage/evt",
"authors": [
"Wilson Page <wilsonpage@me.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"package.json",
"test",
"tests",
"README.md"
],
"_release": "0.4.0",
"_resolution": {
"type": "version",
"tag": "v0.4.0",
"commit": "3593dd6b4dd19f683d00fd0eaf2581c11a128da6"
},
"_source": "git://github.com/gaia-components/evt.git",
"_target": "~0.4.0",
"_originalSource": "gaia-components/evt"
}

View file

@ -0,0 +1,19 @@
{
"name": "evt",
"main": "index.js",
"version": "0.4.0",
"homepage": "https://github.com/wilsonpage/evt",
"authors": [
"Wilson Page <wilsonpage@me.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"package.json",
"test",
"tests",
"README.md"
]
}

View file

@ -0,0 +1,154 @@
/**
* Evt
*
* A super lightweight
* event emitter library.
*
* @version 0.3.3
* @author Wilson Page <wilson.page@me.com>
*/
;(function() {
/**
* Locals
*/
var proto = Events.prototype;
var slice = [].slice;
/**
* Creates a new event emitter
* instance, or if passed an
* object, mixes the event logic
* into it.
*
* @param {Object} obj
* @return {Object}
*/
function Events(obj) {
if (!(this instanceof Events)) return new Events(obj);
if (obj) return mixin(obj, proto);
}
/**
* Registers a callback
* with an event name.
*
* @param {String} name
* @param {Function} cb
* @return {Event}
*/
proto.on = function(name, cb) {
this._cbs = this._cbs || {};
(this._cbs[name] || (this._cbs[name] = [])).push(cb);
return this;
};
/**
* Attach a callback that once
* called, detaches itself.
*
* TODO: Implement `.off()` to work
* with `once()` callbacks.
*
* @param {String} name
* @param {Function} cb
* @public
*/
proto.once = function(name, cb) {
this.on(name, one);
function one() {
cb.apply(this, arguments);
this.off(name, one);
}
};
/**
* Removes a single callback,
* or all callbacks associated
* with the passed event name.
*
* @param {String} name
* @param {Function} cb
* @return {Event}
*/
proto.off = function(name, cb) {
this._cbs = this._cbs || {};
if (!name) { this._cbs = {}; return; }
if (!cb) { return delete this._cbs[name]; }
var cbs = this._cbs[name] || [];
var i;
while (cbs && ~(i = cbs.indexOf(cb))) { cbs.splice(i, 1); }
return this;
};
/**
* Fires an event, triggering
* all callbacks registered on this
* event name.
*
* @param {String} name
* @return {Event}
*/
proto.fire = proto.emit = function(options) {
var cbs = this._cbs = this._cbs || {};
var name = options.name || options;
var batch = (cbs[name] || []).concat(cbs['*'] || []);
var ctx = options.ctx || this;
if (batch.length) {
this._fireArgs = arguments;
var args = slice.call(arguments, 1);
while (batch.length) {
batch.shift().apply(ctx, args);
}
}
return this;
};
proto.firer = function(name) {
var self = this;
return function() {
var args = slice.call(arguments);
args.unshift(name);
self.fire.apply(self, args);
};
};
/**
* Util
*/
/**
* Mixes in the properties
* of the second object into
* the first.
*
* @param {Object} a
* @param {Object} b
* @return {Object}
*/
function mixin(a, b) {
for (var key in b) a[key] = b[key];
return a;
}
/**
* Expose 'Event' (UMD)
*/
if (typeof exports === 'object') {
module.exports = Events;
} else if (typeof define === 'function' && define.amd) {
define(function(){ return Events; });
} else {
window.evt = Events;
}
})();

View file

@ -0,0 +1,29 @@
{
"name": "smart-banner",
"homepage": "https://github.com/gaia-components/smart-banner",
"main": "script.js",
"license": "MPL",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"LICENSE",
"README.md"
],
"devDependencies": {
"evt": "gaia-components/evt#~0.4.0",
"smart-button": "gaia-components/smart-button"
},
"_release": "01f885eced",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "01f885eced4ebe6e601bd252b2b5730309960b90"
},
"_source": "git://github.com/gaia-components/smart-banner.git",
"_target": "*",
"_originalSource": "gaia-components/smart-banner"
}

View file

@ -0,0 +1,21 @@
{
"name": "smart-banner",
"version": "0.0.0",
"homepage": "https://github.com/gaia-components/smart-banner",
"main": "script.js",
"license": "MPL",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"LICENSE",
"README.md"
],
"devDependencies": {
"evt": "gaia-components/evt#~0.4.0",
"smart-button": "gaia-components/smart-button"
}
}

View file

@ -0,0 +1,130 @@
'use strict';
/* global evt */
window.SmartBanner = (function(win) {
// Extend from the HTMLElement prototype
var proto = evt(Object.create(HTMLElement.prototype));
proto.createdCallback = function() {
this.init();
this.addEventListener('transitionend', this);
this.addEventListener('animationend', this);
};
proto.init = function() {
this.style.width = '0';
this.classList.add('closed');
};
proto.calculateChildWidth = function() {
var child = this.firstElementChild;
var childWidth = 0;
var style;
while(child) {
style = window.getComputedStyle(child);
childWidth += child.offsetWidth + parseInt(style.marginLeft, 10) +
parseInt(style.marginRight, 10);
child = child.nextElementSibling;
}
return childWidth;
};
proto.fireEvent = function(event, detail) {
var evtObject = new CustomEvent(event, {
bubbles: false,
detail: detail || this
});
this.dispatchEvent(evtObject);
this.fire(event, detail);
};
proto.handleEvent = function(evt) {
switch(evt.type) {
// Like System app, the transition is our state machine.
case 'transitionend':
// We only process 'background-color' because all states have this
// change.
if ((evt.propertyName !== 'background-color' &&
evt.propertyName !== 'opacity' &&
evt.propertyName !== 'width') ||
evt.target !== this) {
break;
}
if (this.classList.contains('opening')) {
this.classList.add('opened');
this.classList.remove('opening');
// final state: opened
this.fireEvent('opened');
} else if (this.classList.contains('closing')) {
this.classList.add('closed');
this.classList.remove('closing');
// final state: closed
this.fireEvent('closed');
}
// go back to initial state after hiding
if (this.classList.contains('hiding')) {
this.classList.remove('opened');
this.classList.remove('opening');
this.classList.remove('closing');
this.classList.remove('flying');
this.classList.remove('hiding');
this.init();
this.fireEvent('hidden');
}
break;
case 'animationend':
this.classList.remove('flying');
this.open();
break;
}
};
proto.open = function() {
// no operation during flying and hiding
if (this.classList.contains('flying') ||
this.classList.contains('hiding')) {
return;
}
this.fireEvent('will-open');
// If we get focus when we closing the group, we need to cancel the closing
// state.
this.classList.remove('closed');
this.classList.remove('closing');
this.classList.add('opening');
// change to opening
this.style.width = this.calculateChildWidth() + 'px';
};
proto.close = function() {
// no operation during flying and hiding
if (this.classList.contains('flying') ||
this.classList.contains('hiding')) {
return;
}
this.fireEvent('will-close');
// We may call close at mid state, we need to reset all of them and go to
// closing state
this.classList.remove('opened');
this.classList.remove('opening');
this.classList.add('closing');
this.style.width = '0';
};
proto.hide = function(callback) {
this.classList.add('hiding');
};
proto.flyOpen = function() {
if (this.classList.contains('closed')) {
this.classList.add('flying');
}
};
// Register and return the constructor
return document.registerElement('smart-banner', { prototype: proto });
})(window);

View file

@ -0,0 +1,135 @@
/**
* Button state:
* 1. normal (class name: [none])
* 2. opening (class name: opening)
* 3. opened (class name: opened)
* 4. closing (class name: closing)
* 5. closed (class name: closed)
* 6. hiding (class name: hiding)
* 8. flying (class name: flying)
**/
/**
* Normal:
* open: closed -> opening -> opened
* close: opened -> closing -> closed
* hide: current state -> hiding -> closed
* flyOpen: flying -> closed -> opening -> opened
**/
smart-banner {
outline: 0;
display: inline-block;
height: 7rem;
/* Same as closed state */
padding-left: 11rem;
padding-right: 0;
padding-top: 2rem;
padding-bottom: 2rem;
opacity: 1;
/* we need to set border to none to remove the button border */
border: none;
/* the radius is still make button as round even if we don't have border */
border-radius: 5.5rem;
background-color: rgba(0, 0, 0, 0.5);
background-repeat: no-repeat;
background-size: 5.4rem auto;
background-position: 2.8rem 50%;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
position: relative;
font-size: 2.8rem;
line-height: 7rem;
transition-property: none;
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
transition-duration: 0s;
}
smart-banner:before {
content: " ";
background-repeat: no-repeat;
background-size: 5.4rem auto;
background-position: center;
width: 5.4rem;
height: 7rem;
display: inline-block;
position: absolute;
left: 2.8rem;
transition-property: all;
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
transition-duration: 0.42s;
}
smart-banner.closed:before {
width: 11rem;
left: 0;
}
smart-banner[data-icon]:before {
width: 5.4rem;
left: 4.4rem;
font-size: 5.4rem;
line-height: 11rem;
text-align: center;
color: #5f6368;
white-space: normal;
top: 0;
}
smart-banner[data-icon].closed:before {
left: 2.8rem;
}
smart-banner.closed {
padding-left: 11rem;
padding-right: 0;
transition-duration: 0.5s;
background-color: rgba(0, 0, 0, 0.5);
}
smart-banner.closed > * {
display: none;
}
smart-banner.opened {
padding-right: 4.4rem;
}
smart-banner.opening {
transition-property: all;
transition-duration: 0.72s;
/* add the same padding-right of normal to make it run transition */
padding-right: 4.4rem;
}
smart-banner.opening:before {
transition-duration: 0.72s;
}
smart-banner.closing {
transition-property: all;
transition-duration: 0.5s;
padding-left: 11rem;
padding-right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
smart-banner.hiding {
opacity: 0;
transition-property: opacity;
transition-duration: 1s;
}
smart-banner.flying {
animation: flyAnimation 1s;
}
@keyframes flyAnimation {
from {transform: translateY(20rem);}
to {transform: translateY(0);}
}

View file

@ -0,0 +1,30 @@
{
"name": "smart-bubbles",
"homepage": "https://github.com/smart-components/smart-bubbles",
"main": "script.js",
"license": "MPL",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"LICENSE",
"README.md",
"gulpfile.js",
"package.json"
],
"devDependencies": {
"smart-button": "smart-components/smart-button"
},
"_release": "5c08ef5d84",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "5c08ef5d84b0bd1d8252600cfc744aa7869e9f92"
},
"_source": "git://github.com/smart-components/smart-bubbles.git",
"_target": "*",
"_originalSource": "smart-components/smart-bubbles"
}

View file

@ -0,0 +1,22 @@
{
"name": "smart-bubbles",
"version": "0.0.0",
"homepage": "https://github.com/smart-components/smart-bubbles",
"main": "script.js",
"license": "MPL",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"LICENSE",
"README.md",
"gulpfile.js",
"package.json"
],
"devDependencies": {
"smart-button": "smart-components/smart-button"
}
}

View file

@ -0,0 +1,83 @@
window.SmartBubbles = (function(win) {
'use strict';
var DEFAULT_INTERVAL = 100;
// Extend from the HTMLElement prototype
var proto = Object.create(HTMLElement.prototype);
proto.fireEvent = function(event, detail) {
var evtObject = new CustomEvent(event, {
bubbles: false,
detail: detail || this
});
this.dispatchEvent(evtObject);
};
proto.handleEvent = function(evt) {
switch(evt.type) {
case 'animationend':
this.fireEvent('item-bubbled', ++this._finishedAnimationCount);
if (this._targetAnimationCount === this._finishedAnimationCount) {
this.playing = false;
[].forEach.call(this._elements, function(elem) {
elem.classList.remove('smart-bubble-playing');
// XXX:Usually we use <smart-button> within container of
// smart-bubbles. If we remove style of smart-bubble-playing,
// Gecko would apply original style of smart-button instead and it
// has transition property too. This results in another transition
// happens on <smart-button> while we thought we'd just stop
// animation. That is why we need to add 'smart-bubble-stopped' here
// to prevent unexpected animation from happening.
elem.classList.add('smart-bubble-stopped');
// use getComputedStyle to force flushing re-style
window.getComputedStyle(elem).animationName;
elem.classList.remove('smart-bubble-stopped');
window.getComputedStyle(elem).animationName;
elem.style.animationDelay = '';
}.bind(this));
this._elements = null;
this.fireEvent('all-items-bubbled');
}
evt.currentTarget.removeEventListener('animationend', this);
break;
}
};
proto.play = function(elements) {
this.stopImmediately();
this._elements = elements;
this._finishedAnimationCount = 0;
this._targetAnimationCount = 0;
var interval = parseInt(this.getAttribute('interval'), 10) ||
DEFAULT_INTERVAL;
[].forEach.call(elements, function(elem) {
this._targetAnimationCount++;
var delay = this._targetAnimationCount * interval / 1000;
elem.classList.add('smart-bubble-playing');
elem.style.animationDelay = delay + 's';
elem.addEventListener('animationend', this);
}.bind(this));
this.playing = true;
};
proto.stopImmediately = function() {
if (!this.playing || !this._elements) {
return;
}
[].forEach.call(this._elements, function(elem) {
elem.classList.remove('smart-bubble-playing');
elem.classList.add('smart-bubble-stopped');
elem.removeEventListener('animationend', this);
// use getComputedStyle to force flushing re-style
window.getComputedStyle(elem).animationName;
elem.classList.remove('smart-bubble-stopped');
}.bind(this));
this._elements = null;
this.playing = false;
this.fireEvent('all-items-stopped');
};
// Register and return the constructor
return document.registerElement('smart-bubbles', { prototype: proto });
})(window);

View file

@ -0,0 +1 @@
window.SmartBubbles=function(t){"use strict";var e=100,i=Object.create(HTMLElement.prototype);return i.fireEvent=function(t,e){var i=new CustomEvent(t,{bubbles:!1,detail:e||this});this.dispatchEvent(i)},i.handleEvent=function(t){switch(t.type){case"animationend":this.fireEvent("item-bubbled",++this._finishedAnimationCount),this._targetAnimationCount===this._finishedAnimationCount&&(this.playing=!1,[].forEach.call(this._elements,function(t){t.classList.remove("smart-bubble-playing"),t.classList.add("smart-bubble-stopped"),window.getComputedStyle(t).animationName,t.classList.remove("smart-bubble-stopped"),window.getComputedStyle(t).animationName,t.style.animationDelay=""}.bind(this)),this._elements=null,this.fireEvent("all-items-bubbled")),t.currentTarget.removeEventListener("animationend",this)}},i.play=function(t){this.stopImmediately(),this._elements=t,this._finishedAnimationCount=0,this._targetAnimationCount=0;var i=parseInt(this.getAttribute("interval"),10)||e;[].forEach.call(t,function(t){this._targetAnimationCount++;var e=this._targetAnimationCount*i/1e3;t.classList.add("smart-bubble-playing"),t.style.animationDelay=e+"s",t.addEventListener("animationend",this)}.bind(this)),this.playing=!0},i.stopImmediately=function(){this.playing&&this._elements&&([].forEach.call(this._elements,function(t){t.classList.remove("smart-bubble-playing"),t.classList.add("smart-bubble-stopped"),t.removeEventListener("animationend",this),window.getComputedStyle(t).animationName,t.classList.remove("smart-bubble-stopped")}.bind(this)),this._elements=null,this.playing=!1,this.fireEvent("all-items-stopped"))},document.registerElement("smart-bubbles",{prototype:i})}(window);

View file

@ -0,0 +1,83 @@
window.SmartBubbles = (function(win) {
'use strict';
var DEFAULT_INTERVAL = 100;
// Extend from the HTMLElement prototype
var proto = Object.create(HTMLElement.prototype);
proto.fireEvent = function(event, detail) {
var evtObject = new CustomEvent(event, {
bubbles: false,
detail: detail || this
});
this.dispatchEvent(evtObject);
};
proto.handleEvent = function(evt) {
switch(evt.type) {
case 'animationend':
this.fireEvent('item-bubbled', ++this._finishedAnimationCount);
if (this._targetAnimationCount === this._finishedAnimationCount) {
this.playing = false;
[].forEach.call(this._elements, function(elem) {
elem.classList.remove('smart-bubble-playing');
// XXX:Usually we use <smart-button> within container of
// smart-bubbles. If we remove style of smart-bubble-playing,
// Gecko would apply original style of smart-button instead and it
// has transition property too. This results in another transition
// happens on <smart-button> while we thought we'd just stop
// animation. That is why we need to add 'smart-bubble-stopped' here
// to prevent unexpected animation from happening.
elem.classList.add('smart-bubble-stopped');
// use getComputedStyle to force flushing re-style
window.getComputedStyle(elem).animationName;
elem.classList.remove('smart-bubble-stopped');
window.getComputedStyle(elem).animationName;
elem.style.animationDelay = '';
}.bind(this));
this._elements = null;
this.fireEvent('all-items-bubbled');
}
evt.currentTarget.removeEventListener('animationend', this);
break;
}
};
proto.play = function(elements) {
this.stopImmediately();
this._elements = elements;
this._finishedAnimationCount = 0;
this._targetAnimationCount = 0;
var interval = parseInt(this.getAttribute('interval'), 10) ||
DEFAULT_INTERVAL;
[].forEach.call(elements, function(elem) {
this._targetAnimationCount++;
var delay = this._targetAnimationCount * interval / 1000;
elem.classList.add('smart-bubble-playing');
elem.style.animationDelay = delay + 's';
elem.addEventListener('animationend', this);
}.bind(this));
this.playing = true;
};
proto.stopImmediately = function() {
if (!this.playing || !this._elements) {
return;
}
[].forEach.call(this._elements, function(elem) {
elem.classList.remove('smart-bubble-playing');
elem.classList.add('smart-bubble-stopped');
elem.removeEventListener('animationend', this);
// use getComputedStyle to force flushing re-style
window.getComputedStyle(elem).animationName;
elem.classList.remove('smart-bubble-stopped');
}.bind(this));
this._elements = null;
this.playing = false;
this.fireEvent('all-items-stopped');
};
// Register and return the constructor
return document.registerElement('smart-bubbles', { prototype: proto });
})(window);

View file

@ -0,0 +1,26 @@
*[smart-bubbles="true"] .smart-bubble-playing {
transition-property: none;
transform: none;
animation: bubble-animation 0.5s cubic-bezier(0.25, 0, 0, 1) both;
}
*[smart-bubbles="true"][smart-bubbles-direction="down"] .smart-bubble-playing {
animation: sinking-animation 0.5s cubic-bezier(0.25, 0, 0, 1) both;
}
*[smart-bubbles="true"] .smart-bubble-stopped {
transition-property: none;
transform: none;
animation: none;
}
@keyframes bubble-animation {
0% {opacity: 0; transform: translateY(8rem);}
50% {opacity: 1;}
100% {transform: translateY(0);}
}
@keyframes sinking-animation {
0% {opacity: 1; transform: translateY(0);}
100% {opacity: 0; transform: translateY(8rem);}
}

View file

@ -0,0 +1,26 @@
*[smart-bubbles="true"] .smart-bubble-playing {
transition-property: none;
transform: none;
animation: bubble-animation 0.5s cubic-bezier(0.25, 0, 0, 1) both;
}
*[smart-bubbles="true"][smart-bubbles-direction="down"] .smart-bubble-playing {
animation: sinking-animation 0.5s cubic-bezier(0.25, 0, 0, 1) both;
}
*[smart-bubbles="true"] .smart-bubble-stopped {
transition-property: none;
transform: none;
animation: none;
}
@keyframes bubble-animation {
0% {opacity: 0; transform: translateY(8rem);}
50% {opacity: 1;}
100% {transform: translateY(0);}
}
@keyframes sinking-animation {
0% {opacity: 1; transform: translateY(0);}
100% {opacity: 0; transform: translateY(8rem);}
}

View file

@ -0,0 +1,26 @@
{
"name": "smart-button",
"version": "0.0.2",
"homepage": "https://github.com/gaia-components/smart-button",
"main": "script.js",
"license": "MPL",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"LICENSE",
"README.md"
],
"_release": "0.0.2",
"_resolution": {
"type": "version",
"tag": "v0.0.2",
"commit": "04fdae935e2f2ba99d1c4f3e156d17f12eb2d142"
},
"_source": "git://github.com/gaia-components/smart-button.git",
"_target": "~0.0.2",
"_originalSource": "gaia-components/smart-button"
}

View file

@ -0,0 +1,17 @@
{
"name": "smart-button",
"version": "0.0.2",
"homepage": "https://github.com/gaia-components/smart-button",
"main": "script.js",
"license": "MPL",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"LICENSE",
"README.md"
]
}

View file

@ -0,0 +1,62 @@
'use strict';
/* global KeyEvent */
window.SmartButton = (function(win) {
// Extend from the HTMLButtonElement prototype
var proto = Object.create(HTMLButtonElement.prototype);
proto.createdCallback = function() {
this.addEventListener('mousedown', this);
this.addEventListener('mouseup', this);
this.addEventListener('touchstart', this);
this.addEventListener('touchend', this);
this.addEventListener('keydown', this);
this.addEventListener('keyup', this);
this.addEventListener('focus', this);
this.addEventListener('blur', this);
this.addEventListener('transitionend', this);
this.tabIndex = 0;
};
proto.handleEvent = function(evt) {
switch(evt.type) {
case 'mousedown':
case 'touchstart':
this.classList.add('pressed');
break;
case 'keydown':
if (evt.keyCode === KeyEvent.DOM_VK_RETURN) {
this.classList.add('pressed');
}
break;
case 'mouseup':
case 'touchend':
this.classList.remove('pressed');
this.classList.add('released');
break;
case 'keyup':
if (evt.keyCode === KeyEvent.DOM_VK_RETURN) {
this.classList.remove('pressed');
this.classList.add('released');
this.click();
}
break;
case 'transitionend':
if (this.classList.contains('released')) {
this.classList.remove('released');
}
break;
case 'focus':
this.classList.add('focused');
break;
case 'blur':
this.classList.remove('pressed');
this.classList.remove('released');
this.classList.remove('focused');
break;
}
};
// Register and return the constructor
return document.registerElement('smart-button', { prototype: proto });
})(window);

View file

@ -0,0 +1,497 @@
/**
* Button state:
* 1. normal
* In this state, we don't add any class.
* 2. focused (class name: focused)
* The focused state may be triggered by keyboard or touch/mouse.
* 3. pressed (class name: pressed)
* This state is triggered by user pressed confirm button, mousedown,
* and touchdown.
* 4. released (class name: released)
* This state is only for changing duration of transition. We enter this
* state when user release the button. After transitionend, we goes back
* to focused state.
**/
smart-button {
font-family: "Fira Sans";
display: inline-block;
width: 8rem;
height: 8rem;
/* we need to set border to none to remove the button border */
border: none;
/* the radius is still make button as round even if we don't have border */
border-radius: 50%;
/* 50% is not a real circle because of rounding, we have to use a value larger
than 50% */
-moz-outline-radius: 60%;
outline: transparent 0 solid;
background-color: rgba(0, 0, 0, 0.5);
background-repeat: no-repeat;
background-size: 5.4rem auto;
background-position: center center;
font-style: italic;
transition-property: all;
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
transition-duration: 0.42s;
}
smart-button.focused {
outline: 0;
background-color: #ffffff;
transform: scale(1.2);
transition-duration: 0.42s;
}
smart-button.released {
transition-duration: 0.16s;
}
smart-button.toggled {
background-color: #00caf2;
}
smart-button.pressed {
background-color: #00caf2;
transform: scale(0.8);
transition-duration: 0.06s;
}
smart-button.disabled {
background-color: rgba(0, 0, 0, 0.5);
}
smart-button[data-icon]:before {
width: 5.4rem;
left: 1.3rem;
font-size: 5.4rem;
line-height: 8rem;
text-align: center;
color: #ffffff;
white-space: normal;
top: 0;
position: absolute;
}
smart-button[data-icon].focused:before {
color: #2d2d2d;
}
smart-button[data-icon].toggled:before {
color: #00caf2;
}
smart-button[data-icon].pressed:before {
color: #ffffff;
}
smart-button[data-icon].disabled:before {
color: #ffffff;
opacity: 0.3;
}
/**
* Simple Text Button
**/
smart-button[type="simple-text"] {
color: #dddddd;
background: none;
border: none;
border-radius: 0;
width: auto;
height: 8rem;
line-height: 8rem;
font-size: 2.4rem;
-moz-user-select: none;
padding-left: 2.6rem;
padding-right: 2.6rem;
}
smart-button[type="simple-text"].focused {
color: #ffffff;
background: none;
}
smart-button[type="simple-text"].toggled {
color: #00caf2;
}
smart-button[type="simple-text"].pressed {
color: #00caf2;
background: none;
}
/**
* End of Simple Text Button
**/
/**
* underlined text button
*/
smart-button[type="underlined-text"] {
position: relative;
color: white;
font-size: 2.4rem;
padding-left: 3.8rem;
padding-right: 3.8rem;
border-radius: 4rem;
width: auto;
line-height: 8rem;
margin-right: 1.4rem;
overflow: hidden;
}
smart-button[type="underlined-text"]:after {
position: absolute;
width: 100%;
height: 100%;
left: 0;
content: ' ';
border-bottom: 0.6rem #61acd7 solid;
box-sizing: border-box;
}
smart-button[type="underlined-text"].focused {
transform: scale(1.2);
color: #2d2d2d;
}
smart-button[type="underlined-text"].pressed {
transform: scale(1);
color: white;
background-color: #00caf2;
}
/**
* End of underlined text button
*/
/**
* App Icons
**/
smart-button[type="app-button"] {
/* To use 33.4rem instead of to use 33.6rem is to work around the anti-alias
pixel. So, the circle is filled by the background almost totally. */
width: 33.4rem;
height: 33.4rem;
position: relative;
overflow: hidden;
background-color: transparent;
}
smart-button[type="app-button"].focused {
transform: scale(1.4);
/* To use outline will not change the size of button and make the whole button
thrilling. */
outline: 0.8rem solid #ffffff;
}
smart-button[type="app-button"].pressed {
/* While scaling, we may have a gap between outline and icon which may be
anti-alias pixel. So, we use scale(1.22) to prevent such kind of case */
transform: scale(1.22);
/* To use outline will not change the size of button and make the whole button
thrilling. */
outline: 1.0rem solid #ffffff;
}
smart-button[type="app-button"].fullsized {
background-size: 33.6rem auto;
}
smart-button[type="app-button"].fitted {
background-size: 22rem auto;
}
/** we use :after as label */
smart-button[type="app-button"]:after {
content: attr(label);
position: absolute;
bottom: 0;
left: auto;
right: auto;
width: 33.6rem;
height: 8rem;
padding-top: 1rem;
line-height: 3rem;
text-align: center;
font-size: 2.8rem;
font-style: italic;
color: #ffffff;
}
/**
* text backgorund color
**/
smart-button[type="app-button"][app-type="deck"]:after {
background-color: transparent;
}
smart-button[type="app-button"][app-type="tv"]:after {
background-color: #d90c83;
}
smart-button[type="app-button"][app-type="app"]:after {
background-color: rgba(0, 0, 0, 0.4);
}
smart-button[type="app-button"][app-type="device"]:after {
background-color: #4a82ea;
}
smart-button[type="app-button"][app-type="folder"] {
background-color: #595959;
}
smart-button[type="app-button"]:before {
left: 0;
line-height: 30rem;
font-size: 16rem;
width: 100%;
}
smart-button[type="app-button"][app-type="folder"]:before {
color: #CCCCCC;
}
/**
* End of App Icons
**/
/**
* text and icon button
*/
smart-button[type="text-and-icon"] {
position: relative;
color: white;
font-size: 2.4rem;
padding-left: 4.6rem;
padding-right: 4.6rem;
border-radius: 4rem;
width: auto;
line-height: 8rem;
margin-right: 1.4rem;
overflow: hidden;
}
smart-button[type="text-and-icon"][data-icon] {
padding-left: 9.6rem;
}
smart-button[type="text-and-icon"][data-icon]:before {
left: 3.8rem;
}
smart-button[type="text-and-icon"].focused {
transform: scale(1.2);
color: #2d2d2d;
}
smart-button[type="text-and-icon"].pressed {
transform: scale(1);
color: white;
background-color: #00caf2;
}
/**
* End of text and icon button
*/
/**
* banner button
**/
smart-button[type="banner-button"] {
position: relative;
color: #ffffff;
font-size: 2rem;
width: 36rem;
height: 20rem;
overflow: hidden;
border-radius: 0;
border: 0 solid #ffffff;
background-color: #5f5f5f;
background-repeat: no-repeat;
background-size: 120%;
box-sizing: border-box;
transition-property: all;
transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1.0);
transition-duration: 0.1s;
}
smart-button[type="banner-button"][label]:before {
content: attr(label);
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 5rem;
line-height: 5rem;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
}
smart-button[type="banner-button"]:after {
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
transition-property: all;
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
transition-duration: 0.06s;
background-color: rgba(255, 255, 255, 0);
}
smart-button[type="banner-button"].focused {
transform: none;
border-width: 1.2rem;
background-size: 100%;
transition-duration: 0.24s;
}
smart-button[type="banner-button"].pressed {
transform: scale(0.945, 0.9);
}
smart-button[type="banner-button"].pressed:after {
background-color: rgba(255, 255, 255, 0.5);
}
/**
* banner button
**/
/**
* circle text button
*/
smart-button[type="circle-text"] {
width: 21rem;
height: 21rem;
color: white;
background-color: #5f6368;
line-height: 21rem;
padding: 2.5rem 2rem 1.5rem 2rem;
text-align: center;
font-size: 3.2rem;
font-weight: bolder;
overflow: hidden;
transition-property: transform, color, background-color;
}
smart-button[type="circle-text"].focused {
transform: scale(1.2);
color: #2d2d2d;
background-color: white;
transition-property: transform, color, background-color;
}
smart-button[type="circle-text"].pressed {
transform: scale(1);
color: white;
background-color: #00caf2;
transition-property: transform, color, background-color;
}
smart-button[type="circle-text"].primary {
background-color: #00caf2;
transition-property: transform, color, background-color;
}
smart-button[type="circle-text"].primary.focused {
color: #ffffff;
background-color: #00caf2;
transition-property: transform, color, background-color;
}
smart-button[type="circle-text"].primary.pressed {
background-color: #0097b5;
transition-property: transform, color, background-color;
}
smart-button[type="circle-text"].danger {
background-color: #e63d2f;
transition-property: transform, color, background-color;
}
smart-button[type="circle-text"].danger.focused {
color: #ffffff;
background-color: #e63d2f;
transition-property: transform, color, background-color;
}
smart-button[type="circle-text"].danger.pressed {
background-color: #ac2e23;
transition-property: transform, color, background-color;
}
/**
* End of circle text button
*/
/**
* rounded-corner text button
*/
smart-button[type="rounded-corner-text"] {
-moz-user-select: none;
width: auto;
height: 8rem;
border-radius: 4rem;
background-color: #5f6368;
padding: 0 3.8rem;
line-height: 8rem;
color: white;
text-align: center;
font-size: 2.4rem;
overflow: hidden;
transition-property: transform, color, background-color;
}
smart-button[type="rounded-corner-text"].focused,
smart-button[type="rounded-corner-text"]:hover {
transform: scale(1.2);
color: #2d2d2d;
background-color: white;
}
smart-button[type="rounded-corner-text"].pressed {
transform: scale(1);
/*color: white;*/
background-color: #00caf2;
}
smart-button[type="rounded-corner-text"].primary {
background-color: #00caf2;
}
smart-button[type="rounded-corner-text"].primary:hover,
smart-button[type="rounded-corner-text"].primary.focused {
color: #ffffff;
background-color: #00caf2;
}
smart-button[type="rounded-corner-text"].primary.pressed {
background-color: #0097b5;
}
/**
* End of rounded-corner text button
*/

View file

@ -0,0 +1,25 @@
{
"name": "smart-dialog",
"homepage": "https://github.com/smart-components/smart-dialog",
"main": "script.js",
"license": "MPL",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"LICENSE",
"README.md"
],
"_release": "8910d99b8f",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "8910d99b8fb7c624b32ac494fea63c0898e886df"
},
"_source": "git://github.com/smart-components/smart-dialog.git",
"_target": "*",
"_originalSource": "smart-components/smart-dialog"
}

View file

@ -0,0 +1,17 @@
{
"name": "smart-dialog",
"version": "0.0.0",
"homepage": "https://github.com/smart-components/smart-dialog",
"main": "script.js",
"license": "MPL",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"LICENSE",
"README.md"
]
}

View file

@ -0,0 +1,123 @@
/**
* Smart-Dialog
* - Event:
* 1. will-open
* 2. opened
* 3. will-close
* 4. closed
* - API:
* 1. open - open a smart-dialog: closed -> opening -> opened
* 2. close - close a smart-dialog: opened -> closing -> closed
* - Attribute:
* 1. title - title of the smart-dialog
* 2. esc-close - close dialog when ESC key is clicked (default true).
* Default scale: 1920x1080 (2*sqrt(960*960 + 1080*1080) / 20 = 144.5)
*/
window.SmartDialog = (function(win) {
'use strict';
// The value of openDuration and closeDuration should be the same as
// transitionDuration in opening and closing css class.
const openDuration = 1000;
const closeDuration = 650;
// Extend from the HTMLElement prototype
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function sd_createdCallback() {
this.addEventListener('transitionend', this);
document.addEventListener('keyup', this);
this.transitionTimer = null;
this.classList.add('closed');
if (this.hasAttribute('background-color')) {
this.style.backgroundColor = this.getAttribute('background-color');
}
};
proto._onOpened = function sd_onOpened() {
this.classList.remove('opening');
this.classList.add('opened');
this.fireEvent('opened');
};
proto._onClosed = function sd_onClosed() {
this.classList.remove('closing');
this.classList.add('closed');
this.fireEvent('closed');
};
proto.open = function sd_open() {
if (this.classList.contains('opened') ||
this.classList.contains('opening')) {
return;
}
this.fireEvent('will-open');
this.classList.remove('closing');
this.classList.remove('closed');
this.classList.add('opening');
// handle the case when transitionend event is not fired
clearTimeout(this.transitionTimer);
this.transitionTimer = setTimeout(function() {
this._onOpened();
this.transitionTimer = null;
}.bind(this), openDuration);
};
proto.close = function sd_close() {
if (this.classList.contains('closed') ||
this.classList.contains('closing')) {
return;
}
this.fireEvent('will-close');
this.classList.remove('opening');
this.classList.remove('opened');
this.classList.add('closing');
// handle the case when transitionend event is not fired
clearTimeout(this.transitionTimer);
this.transitionTimer = setTimeout(function() {
this._onClosed();
this.transitionTimer = null;
}.bind(this), closeDuration);
};
proto.handleEvent = function sd_handleEvent(evt) {
switch(evt.type) {
case 'transitionend':
if (evt.target === this && this.transitionTimer) {
if (this.classList.contains('opening')) {
this._onOpened();
} else if (this.classList.contains('closing')) {
this._onClosed();
}
clearTimeout(this.transitionTimer);
this.transitionTimer = null;
}
break;
case 'keyup':
// close dialog when Back is triggered
if (this.getAttribute('esc-close') != 'false' &&
(evt.keyCode === window.KeyEvent.DOM_VK_BACK_SPACE ||
evt.key === 'Backspace') &&
this.classList.contains('opened')) {
evt.preventDefault();
evt.stopPropagation();
this.close();
}
break;
}
};
proto.fireEvent = function sd_fireEvent(event, detail) {
var evtObject = new CustomEvent(event, {
bubbles: false,
detail: detail || this
});
this.dispatchEvent(evtObject);
};
// Register and return the constructor
return document.registerElement('smart-dialog', { prototype: proto });
})(window);

View file

@ -0,0 +1,103 @@
/**
* Smart-Dialog
* - State:
* 1. closed
* 2. opening
* 3. opened - content visible
* 4. closing
* Default scale: 1920x1080 (2*sqrt(960*960 + 1080*1080) / 20 = 144.5)
*/
smart-dialog {
position: fixed;
z-index: 2147483647;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
smart-dialog:before {
content: attr(title);
display: block;
margin-top: 5rem;
margin-left: 7.6rem;
font-family: "Fira Sans";
font-size: 5.4rem;
font-style: italic;
color: #ffffff;
}
smart-dialog:after {
content: "";
display: block;
position: fixed;
height: 2rem;
width: 2rem;
top: calc(100% - 1rem);
left: calc(50% - 1rem);
background-color: rgba(0, 0, 0, 0.9);
transition: none;
transform: scale(20);
}
smart-dialog.closed > *,
smart-dialog.closing > *,
smart-dialog.opening > *,
smart-dialog.closed:before,
smart-dialog.closing:before,
smart-dialog.opening:before {
display: none;
}
smart-dialog.closed {
visibility: hidden;
}
smart-dialog.opened {
background-color: rgba(0, 0, 0, 0.9);
}
smart-dialog.opened:after {
visibility: hidden;
border-radius: 50%;
transform: scale(144.5);
}
smart-dialog.opening:after {
border-radius: 50%;
transform: scale(144.5);
/* transitionDuration should be the same as openDuration variable in script */
transition: transform 1s cubic-bezier(0, 0, 0 ,1);
}
smart-dialog.closing:after {
border-radius: 50%;
transform: scale(20);
/* transitionDuration should be the same as closeDuration variable in script */
transition: transform 0.65s cubic-bezier(0.6, 0, 1 ,1);
}
/* 1280x800 for flatfish */
@media (width: 1280px) and (height: 800px) {
smart-dialog:after,
smart-dialog.closing:after {
transform: scale(7.5);
}
smart-dialog.opening:after {
transform: scale(102.5);
}
}
/* 800x1280 for flatfish vertical */
@media (width: 800px) and (height: 1280px) {
smart-dialog:after,
smart-dialog.closing:after {
transform: scale(8.3);
}
smart-dialog.opening:after {
transform: scale(134);
}
}

View file

@ -0,0 +1,30 @@
{
"name": "smart-icons",
"version": "0.0.3",
"homepage": "https://github.com/smart-components/smart-icons",
"description": "Icon font for smart-screen",
"license": "MPL",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"templates",
"images",
"test",
"tests",
"index.html",
"Gruntfile.js",
"README.md",
"package.json"
],
"_release": "0.0.3",
"_resolution": {
"type": "version",
"tag": "v0.0.3",
"commit": "0c335ac23f484069b4fafa7b7e5afd9f3c08d66e"
},
"_source": "git://github.com/smart-components/smart-icons.git",
"_target": "*",
"_originalSource": "smart-components/smart-icons"
}

View file

@ -0,0 +1,21 @@
{
"name": "smart-icons",
"version": "0.0.3",
"homepage": "https://github.com/smart-components/smart-icons",
"description": "Icon font for smart-screen",
"license": "MPL",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"templates",
"images",
"test",
"tests",
"index.html",
"Gruntfile.js",
"README.md",
"package.json"
]
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,25 @@
/* Generated by grunt-webfont */
/* Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css */
@font-face {
font-family: "smart-icons";
src: url("fonts/smart-icons.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
[data-icon]:before,
.ligature-icons {
font-family: "smart-icons";
content: attr(data-icon);
display: inline-block;
font-weight: 500;
font-style: normal;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
font-size: 30px;
-webkit-font-smoothing: antialiased;
}

View file

@ -0,0 +1,31 @@
{
"name": "smart-modal-dialog",
"homepage": "https://github.com/smart-components/smart-modal-dialog",
"main": "script.js",
"license": "MPL",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"LICENSE",
"README.md"
],
"dependencies": {
"smart-dialog": "smart-components/smart-dialog",
"smart-bubbles": "smart-components/smart-bubbles",
"smart-button": "smart-components/smart-button",
"smart-icons": "smart-components/smart-icons"
},
"_release": "36275a3742",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "36275a3742389663d16c61b53a426fd3401e4850"
},
"_source": "git://github.com/smart-components/smart-modal-dialog.git",
"_target": "*",
"_originalSource": "smart-components/smart-modal-dialog"
}

View file

@ -0,0 +1,362 @@
Mozilla Public License, version 2.0
1. Definitions
1.1. "Contributor"
means each individual or legal entity that creates, contributes to the
creation of, or owns Covered Software.
1.2. "Contributor Version"
means the combination of the Contributions of others (if any) used by a
Contributor and that particular Contributor's Contribution.
1.3. "Contribution"
means Covered Software of a particular Contributor.
1.4. "Covered Software"
means Source Code Form to which the initial Contributor has attached the
notice in Exhibit A, the Executable Form of such Source Code Form, and
Modifications of such Source Code Form, in each case including portions
thereof.
1.5. "Incompatible With Secondary Licenses"
means
a. that the initial Contributor has attached the notice described in
Exhibit B to the Covered Software; or
b. that the Covered Software was made available under the terms of
version 1.1 or earlier of the License, but not also under the terms of
a Secondary License.
1.6. "Executable Form"
means any form of the work other than Source Code Form.
1.7. "Larger Work"
means a work that combines Covered Software with other material, in a
separate file or files, that is not Covered Software.
1.8. "License"
means this document.
1.9. "Licensable"
means having the right to grant, to the maximum extent possible, whether
at the time of the initial grant or subsequently, any and all of the
rights conveyed by this License.
1.10. "Modifications"
means any of the following:
a. any file in Source Code Form that results from an addition to,
deletion from, or modification of the contents of Covered Software; or
b. any new file in Source Code Form that contains any Covered Software.
1.11. "Patent Claims" of a Contributor
means any patent claim(s), including without limitation, method,
process, and apparatus claims, in any patent Licensable by such
Contributor that would be infringed, but for the grant of the License,
by the making, using, selling, offering for sale, having made, import,
or transfer of either its Contributions or its Contributor Version.
1.12. "Secondary License"
means either the GNU General Public License, Version 2.0, the GNU Lesser
General Public License, Version 2.1, the GNU Affero General Public
License, Version 3.0, or any later versions of those licenses.
1.13. "Source Code Form"
means the form of the work preferred for making modifications.
1.14. "You" (or "Your")
means an individual or a legal entity exercising rights under this
License. For legal entities, "You" includes any entity that controls, is
controlled by, or is under common control with You. For purposes of this
definition, "control" means (a) the power, direct or indirect, to cause
the direction or management of such entity, whether by contract or
otherwise, or (b) ownership of more than fifty percent (50%) of the
outstanding shares or beneficial ownership of such entity.
2. License Grants and Conditions
2.1. Grants
Each Contributor hereby grants You a world-wide, royalty-free,
non-exclusive license:
a. under intellectual property rights (other than patent or trademark)
Licensable by such Contributor to use, reproduce, make available,
modify, display, perform, distribute, and otherwise exploit its
Contributions, either on an unmodified basis, with Modifications, or
as part of a Larger Work; and
b. under Patent Claims of such Contributor to make, use, sell, offer for
sale, have made, import, and otherwise transfer either its
Contributions or its Contributor Version.
2.2. Effective Date
The licenses granted in Section 2.1 with respect to any Contribution
become effective for each Contribution on the date the Contributor first
distributes such Contribution.
2.3. Limitations on Grant Scope
The licenses granted in this Section 2 are the only rights granted under
this License. No additional rights or licenses will be implied from the
distribution or licensing of Covered Software under this License.
Notwithstanding Section 2.1(b) above, no patent license is granted by a
Contributor:
a. for any code that a Contributor has removed from Covered Software; or
b. for infringements caused by: (i) Your and any other third party's
modifications of Covered Software, or (ii) the combination of its
Contributions with other software (except as part of its Contributor
Version); or
c. under Patent Claims infringed by Covered Software in the absence of
its Contributions.
This License does not grant any rights in the trademarks, service marks,
or logos of any Contributor (except as may be necessary to comply with
the notice requirements in Section 3.4).
2.4. Subsequent Licenses
No Contributor makes additional grants as a result of Your choice to
distribute the Covered Software under a subsequent version of this
License (see Section 10.2) or under the terms of a Secondary License (if
permitted under the terms of Section 3.3).
2.5. Representation
Each Contributor represents that the Contributor believes its
Contributions are its original creation(s) or it has sufficient rights to
grant the rights to its Contributions conveyed by this License.
2.6. Fair Use
This License is not intended to limit any rights You have under
applicable copyright doctrines of fair use, fair dealing, or other
equivalents.
2.7. Conditions
Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in
Section 2.1.
3. Responsibilities
3.1. Distribution of Source Form
All distribution of Covered Software in Source Code Form, including any
Modifications that You create or to which You contribute, must be under
the terms of this License. You must inform recipients that the Source
Code Form of the Covered Software is governed by the terms of this
License, and how they can obtain a copy of this License. You may not
attempt to alter or restrict the recipients' rights in the Source Code
Form.
3.2. Distribution of Executable Form
If You distribute Covered Software in Executable Form then:
a. such Covered Software must also be made available in Source Code Form,
as described in Section 3.1, and You must inform recipients of the
Executable Form how they can obtain a copy of such Source Code Form by
reasonable means in a timely manner, at a charge no more than the cost
of distribution to the recipient; and
b. You may distribute such Executable Form under the terms of this
License, or sublicense it under different terms, provided that the
license for the Executable Form does not attempt to limit or alter the
recipients' rights in the Source Code Form under this License.
3.3. Distribution of a Larger Work
You may create and distribute a Larger Work under terms of Your choice,
provided that You also comply with the requirements of this License for
the Covered Software. If the Larger Work is a combination of Covered
Software with a work governed by one or more Secondary Licenses, and the
Covered Software is not Incompatible With Secondary Licenses, this
License permits You to additionally distribute such Covered Software
under the terms of such Secondary License(s), so that the recipient of
the Larger Work may, at their option, further distribute the Covered
Software under the terms of either this License or such Secondary
License(s).
3.4. Notices
You may not remove or alter the substance of any license notices
(including copyright notices, patent notices, disclaimers of warranty, or
limitations of liability) contained within the Source Code Form of the
Covered Software, except that You may alter any license notices to the
extent required to remedy known factual inaccuracies.
3.5. Application of Additional Terms
You may choose to offer, and to charge a fee for, warranty, support,
indemnity or liability obligations to one or more recipients of Covered
Software. However, You may do so only on Your own behalf, and not on
behalf of any Contributor. You must make it absolutely clear that any
such warranty, support, indemnity, or liability obligation is offered by
You alone, and You hereby agree to indemnify every Contributor for any
liability incurred by such Contributor as a result of warranty, support,
indemnity or liability terms You offer. You may include additional
disclaimers of warranty and limitations of liability specific to any
jurisdiction.
4. Inability to Comply Due to Statute or Regulation
If it is impossible for You to comply with any of the terms of this License
with respect to some or all of the Covered Software due to statute,
judicial order, or regulation then You must: (a) comply with the terms of
this License to the maximum extent possible; and (b) describe the
limitations and the code they affect. Such description must be placed in a
text file included with all distributions of the Covered Software under
this License. Except to the extent prohibited by statute or regulation,
such description must be sufficiently detailed for a recipient of ordinary
skill to be able to understand it.
5. Termination
5.1. The rights granted under this License will terminate automatically if You
fail to comply with any of its terms. However, if You become compliant,
then the rights granted under this License from a particular Contributor
are reinstated (a) provisionally, unless and until such Contributor
explicitly and finally terminates Your grants, and (b) on an ongoing
basis, if such Contributor fails to notify You of the non-compliance by
some reasonable means prior to 60 days after You have come back into
compliance. Moreover, Your grants from a particular Contributor are
reinstated on an ongoing basis if such Contributor notifies You of the
non-compliance by some reasonable means, this is the first time You have
received notice of non-compliance with this License from such
Contributor, and You become compliant prior to 30 days after Your receipt
of the notice.
5.2. If You initiate litigation against any entity by asserting a patent
infringement claim (excluding declaratory judgment actions,
counter-claims, and cross-claims) alleging that a Contributor Version
directly or indirectly infringes any patent, then the rights granted to
You by any and all Contributors for the Covered Software under Section
2.1 of this License shall terminate.
5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user
license agreements (excluding distributors and resellers) which have been
validly granted by You or Your distributors under this License prior to
termination shall survive termination.
6. Disclaimer of Warranty
Covered Software is provided under this License on an "as is" basis,
without warranty of any kind, either expressed, implied, or statutory,
including, without limitation, warranties that the Covered Software is free
of defects, merchantable, fit for a particular purpose or non-infringing.
The entire risk as to the quality and performance of the Covered Software
is with You. Should any Covered Software prove defective in any respect,
You (not any Contributor) assume the cost of any necessary servicing,
repair, or correction. This disclaimer of warranty constitutes an essential
part of this License. No use of any Covered Software is authorized under
this License except under this disclaimer.
7. Limitation of Liability
Under no circumstances and under no legal theory, whether tort (including
negligence), contract, or otherwise, shall any Contributor, or anyone who
distributes Covered Software as permitted above, be liable to You for any
direct, indirect, special, incidental, or consequential damages of any
character including, without limitation, damages for lost profits, loss of
goodwill, work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses, even if such party shall have been
informed of the possibility of such damages. This limitation of liability
shall not apply to liability for death or personal injury resulting from
such party's negligence to the extent applicable law prohibits such
limitation. Some jurisdictions do not allow the exclusion or limitation of
incidental or consequential damages, so this exclusion and limitation may
not apply to You.
8. Litigation
Any litigation relating to this License may be brought only in the courts
of a jurisdiction where the defendant maintains its principal place of
business and such litigation shall be governed by laws of that
jurisdiction, without reference to its conflict-of-law provisions. Nothing
in this Section shall prevent a party's ability to bring cross-claims or
counter-claims.
9. Miscellaneous
This License represents the complete agreement concerning the subject
matter hereof. If any provision of this License is held to be
unenforceable, such provision shall be reformed only to the extent
necessary to make it enforceable. Any law or regulation which provides that
the language of a contract shall be construed against the drafter shall not
be used to construe this License against a Contributor.
10. Versions of the License
10.1. New Versions
Mozilla Foundation is the license steward. Except as provided in Section
10.3, no one other than the license steward has the right to modify or
publish new versions of this License. Each version will be given a
distinguishing version number.
10.2. Effect of New Versions
You may distribute the Covered Software under the terms of the version
of the License under which You originally received the Covered Software,
or under the terms of any subsequent version published by the license
steward.
10.3. Modified Versions
If you create software not governed by this License, and you want to
create a new license for such software, you may create and use a
modified version of this License if you rename the license and remove
any references to the name of the license steward (except to note that
such modified license differs from this License).
10.4. Distributing Source Code Form that is Incompatible With Secondary
Licenses If You choose to distribute Source Code Form that is
Incompatible With Secondary Licenses under the terms of this version of
the License, the notice described in Exhibit B of this License must be
attached.
Exhibit A - Source Code Form License Notice
This Source Code Form is subject to the
terms of the Mozilla Public License, v.
2.0. If a copy of the MPL was not
distributed with this file, You can
obtain one at
http://mozilla.org/MPL/2.0/.
If it is not possible or desirable to put the notice in a particular file,
then You may include the notice in a location (such as a LICENSE file in a
relevant directory) where a recipient would be likely to look for such a
notice.
You may add additional accurate notices of copyright ownership.
Exhibit B - "Incompatible With Secondary Licenses" Notice
This Source Code Form is "Incompatible
With Secondary Licenses", as defined by
the Mozilla Public License, v. 2.0.

View file

@ -0,0 +1,23 @@
{
"name": "smart-modal-dialog",
"version": "0.0.0",
"homepage": "https://github.com/smart-components/smart-modal-dialog",
"main": "script.js",
"license": "MPL",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"LICENSE",
"README.md"
],
"dependencies": {
"smart-dialog": "smart-components/smart-dialog",
"smart-bubbles": "smart-components/smart-bubbles",
"smart-button": "smart-components/smart-button",
"smart-icons": "smart-components/smart-icons"
}
}

View file

@ -0,0 +1,353 @@
/**
* SmartModalDialog creates a dialog with a group of buttons as select
* options. It also includes open/close animation and bubbling animation.
* The template is shown below:
* <smart-dialog class="modal-dialog">
* <div class="outer-container">
* <div class="container">
* <div class="modal-dialog-message-container">
* <div class="modal-dialog-message"></div>
* <div class="modal-dialog-custom-group"></div>
* </div>
* <div class="modal-dialog-button-group">
* <smart-button></smart-button>
* ...
* <smart-button></smart-button>
* </div>
* </div>
* </div>
* </smart-dialog>
*/
(function(exports) {
'use strict';
var DEFAULT_MARGIN = 44;
function SmartModalDialog(container, options) {
// Determine whether this dialog is opened or not
this.isOpened = false;
this._clickedIndex = null;
this.defaultFocusIndex = -1;
this._margin = options && options.margin ? options.margin : DEFAULT_MARGIN;
this._translateX = 0;
this.smartBubble = document.createElement('smart-bubbles');
// smart-dialog helps us to handle ESC key to close the dialog.
this.element = document.createElement('smart-dialog');
this.element.classList.add('modal-dialog');
// make dialog focusable in order to catch focus from mouse click or touch
// event.
this.element.setAttribute('tabIndex', '-1');
// in order to make vertical align, we need additional container
this.outerContainer = document.createElement('div');
this.outerContainer.classList.add('outer-container');
this.innerContainer = document.createElement('div');
this.innerContainer.classList.add('container');
this.messageElement = document.createElement('div');
this.messageElement.classList.add('modal-dialog-message');
this.customElementGroup = document.createElement('div');
this.customElementGroup.classList.add('modal-dialog-custom-group');
this.messageContainer = document.createElement('div');
this.messageContainer.classList.add('modal-dialog-message-container');
this.messageContainer.appendChild(this.messageElement);
this.messageContainer.appendChild(this.customElementGroup);
this.buttonGroup = document.createElement('div');
this.buttonGroup.classList.add('modal-dialog-button-group');
this.buttonGroup.setAttribute('smart-bubbles', 'true');
this.innerContainer.appendChild(this.messageContainer);
this.innerContainer.appendChild(this.buttonGroup);
this.outerContainer.appendChild(this.innerContainer);
this.element.appendChild(this.outerContainer);
this.container = container || document.body;
this.container.appendChild(this.element);
this.element.addEventListener('will-open', this);
this.element.addEventListener('will-close', this);
this.element.addEventListener('opened', this);
this.element.addEventListener('closed', this);
this.smartBubble.addEventListener('all-items-bubbled', this);
this._init();
}
var proto = Object.create(SmartDialog.prototype);
proto._init = function(container, options) {
// Put your custom init code here.
};
proto._setL10n = function(element, l10n) {
if ((typeof l10n) === 'string') {
element.setAttribute('data-l10n-id', l10n);
} else if (navigator.mozL10n) {
navigator.mozL10n.setAttributes(element, l10n.id, l10n.args);
}
};
proto._open = function(options) {
this.message = options.message || {};
var renderedCallback = options.onButtonRendered;
this.customSettings = options.customElementSettings || null;
if (this.customSettings) {
while (this.customElementGroup.firstChild) {
this.customElementGroup.removeChild(this.customElementGroup.firstChild);
}
this.customElementGroup.appendChild(this.customSettings.element);
this.customElementGroup.classList.remove('hidden');
} else {
this.customElementGroup.classList.add('hidden');
}
// onCancel is triggered when ESC key is pressed.
this.onCancel = options.onCancel || function() {};
this.buttonElements = [];
this.buttonSettings = options.buttonSettings || [];
if (!this.message.textRaw && !this.message.textL10nId) {
this.messageElement.classList.add('hidden');
} else {
this.messageElement.classList.remove('hidden');
this.messageElement.textContent = this.message.textRaw || '';
if (this.message.textL10nId) {
this._setL10n(this.messageElement, this.message.textL10nId);
}
}
this.buttonGroup.innerHTML = '';
// Set up every button
this.buttonSettings.forEach(function buildButton(buttonSetting, index) {
var button = document.createElement('smart-button');
button.setAttribute('type', buttonSetting.type || 'circle-text');
button.textContent = buttonSetting.textRaw || 'OK';
if (buttonSetting.textL10nId) {
this._setL10n(button, buttonSetting.textL10nId);
}
button.classList.add(buttonSetting.class || 'confirm');
if (buttonSetting.icon) {
button.style.backgroundImage = 'url(' + buttonSetting.icon + ')';
} else if (buttonSetting.iconFont) {
button.dataset.icon = buttonSetting.iconFont;
}
button.addEventListener('click', function() {
// Click action will be handled in closed event
this._clickedIndex = index;
this.element.close();
this.element.focus();
}.bind(this));
this.buttonElements.push(button);
this.buttonGroup.appendChild(button);
this._focusedIndex =
(buttonSetting.defaultFocus) ? index : this._focusedIndex;
if (renderedCallback) {
// We add render callback to let user to do more complex visual
// modifications.
renderedCallback(button, buttonSetting);
}
}.bind(this));
this.element.classList.add('visible');
this.element.open();
this.element.focus();
};
proto.open = function(options) {
if (this.isOpened) {
return;
}
this.isOpened = true;
this._focusedIndex = this.defaultFocusIndex;
// We should wait two frames for reflow.
window.requestAnimationFrame(function() {
window.requestAnimationFrame(this._open.bind(this, options));
}.bind(this));
};
proto.close = function() {
this.element.close();
this.element.focus();
};
proto.remove = function() {
this.container.removeChild(this.element);
};
proto.startKeyNavigation = function() {
this.element.addEventListener('keydown', this);
if (this.buttonElements.length > 0) {
if (this._focusedIndex === -1) {
this._focusedIndex = 0;
}
this.focus();
}
};
/**
* Scroll the list to the input element
*/
proto._scrollTo = function(element) {
var newTransition = this._getScrollOffset(element);
this._translateX = newTransition;
this.buttonGroup.style.transform = 'translateX(' + this._translateX +
'px)';
};
/**
* Get the offset of the node element
*/
proto._getScrollOffset = function(nodeElem) {
if (!this._viewWidth) {
this._viewWidth = this.innerContainer.clientWidth - 2 * this._margin;
}
var nodeLeft = nodeElem.offsetLeft;
var nodeWidth = nodeElem.offsetWidth;
var listWidth = this.buttonGroup.offsetWidth;
var newTranslate = this._translateX;
var lastElement = this.buttonElements[this.buttonElements.length - 1];
var firstElement = this.buttonElements[0];
if (listWidth < this._viewWidth) {
// align to horizontal center if list width is smaller than the container
return (this._viewWidth - listWidth) / 2 + this._margin;
} else if (nodeLeft + nodeWidth >
-this._translateX + this._viewWidth + this._margin) {
// scroll left if the node falls beyond the right edge of container
newTranslate = this._viewWidth - nodeLeft - nodeWidth + this._margin;
} else if (nodeLeft < -this._translateX + this._margin) {
// scroll right if the node falls beyond the left edge of container
newTranslate = -nodeLeft + this._margin;
}
// If the new scroll offset contains first/last node, we have to align the
// list to begin/end.
if (lastElement.offsetLeft + lastElement.offsetWidth <=
-newTranslate + this._viewWidth + this._margin) {
return this._viewWidth + this._margin - lastElement.offsetLeft -
lastElement.offsetWidth;
} else if (firstElement.offsetLeft >= -newTranslate + this._margin) {
return -firstElement.offsetLeft + this._margin;
}
return newTranslate;
};
proto._getFocusedElement = function() {
return this.buttonElements[this._focusedIndex];
};
proto.focus = function() {
if (this.element.classList.contains('opening') ||
this.element.classList.contains('closing')) {
this.element.focus();
} else {
var elem = this._getFocusedElement()
this._scrollTo(elem);
// move focus to smart dialog while transition running
if (elem.focus && (typeof elem.focus) === 'function') {
elem.focus();
}
}
};
proto.blur = function() {
var elem = this._getFocusedElement();
if (elem.blur && (typeof elem.blur === 'function')) {
elem.blur();
}
};
proto.stopKeyNavigation = function() {
this.element.removeEventListener('keydown', this);
};
proto.movePrevious = function() {
if (this._focusedIndex < 1) {
// Do nothing when focus index is at the first button element.
return;
}
this._focusedIndex--;
this.focus();
};
proto.moveNext = function() {
if (this._focusedIndex > this.buttonElements.length - 2) {
// Do nothing when focus index is at the last button element
return;
}
this._focusedIndex++;
this.focus();
};
proto._handleKeyEvent = function(e) {
if (e.keyCode === KeyEvent.DOM_VK_LEFT) {
this.movePrevious();
} else if (e.keyCode === KeyEvent.DOM_VK_RIGHT) {
this.moveNext();
}
};
proto.handleEvent = function(e) {
this._handleKeyEvent(e);
switch(e.target) {
case this.element:
if (e.type === 'will-open' || e.type === 'will-close') {
this.fireEvent('modal-dialog-' + e.type);
} else if (e.type === 'opened') {
this._scrollTo(this.buttonElements[0]);
// Play bubble animation when the smart-dialog is opened
this.smartBubble.play(this.buttonElements);
} else if (e.type === 'closed') {
// Do click actions when the smart-dialog is closed
this.element.classList.remove('visible');
if ((this._clickedIndex || this._clickedIndex === 0) &&
this.buttonSettings[this._clickedIndex].onClick) {
this.buttonSettings[this._clickedIndex].onClick(
this.buttonSettings[this._clickedIndex]);
this._clickedIndex = null;
} else if (this.onCancel) {
// ESC key enter
this.onCancel();
}
this.isOpened = false;
this.stopKeyNavigation();
this.element.classList.remove('modal-dialog-opened');
this.fireEvent('modal-dialog-closed');
}
break;
case this.smartBubble:
this.element.classList.add('modal-dialog-opened');
this.startKeyNavigation();
this.focus();
this.fireEvent('modal-dialog-opened');
break;
}
};
proto.fireEvent = function smd_fireEvent(event, detail) {
var evtObject = new CustomEvent(event, {
bubbles: true,
detail: detail || this
});
this.container.dispatchEvent(evtObject);
};
SmartModalDialog.prototype = proto;
exports.SmartModalDialog = SmartModalDialog;
})(window);

View file

@ -0,0 +1,271 @@
/**
* SmartInputDialog creates an input text box with a clear button to clear text,
* and a dialog with a group of buttons as select options, Text box includes
* focus/blur animation, buttons includes open/close and bubbling animation.
* The template is shown below:
* <smart-dialog class="modal-dialog">
* <div class="outer-container">
* <div class="container">
* <div class="modal-dialog-message-container">
* <div class="modal-dialog-message"></div>
* <div class="modal-dialog-custom-group"></div>
* <div class="modal-dialog-input-group">
* <input></input>
* <button class="clear"></button>
* <div class="focus"></div>
* </div>
* </div>
* <div class="modal-dialog-button-group">
* <smart-button></smart-button>
* ...
* <smart-button></smart-button>
* </div>
* </div>
* </div>
* </smart-dialog>
*/
(function(exports) {
'use strict';
var DEFAULT_MARGIN = 44;
var INPUT_GROUP_INDEX = 0;
var BUTTON_GROUP_INDEX = 1;
function SmartInputDialog(container, options) {
SmartModalDialog.call(this, container, options);
}
var proto = Object.create(SmartModalDialog.prototype);
proto._init = function() {
this.defaultFocusIndex = [-1, -1];
this.textInput = document.createElement('input');
this.textInput.addEventListener('keydown', function(e) {
if (e.keyCode === KeyEvent.DOM_VK_RIGHT) {
if (this.selectionEnd < this.value.length) {
// We are going to move cursor in the text input, calling
// stopPropagation to prevent focus being transfer to clear button.
e.stopPropagation();
}
}
});
this.clearButton = document.createElement('button');
this.clearButton.setAttribute('data-icon', 'close');
this.clearButton.classList.add('clear');
this.clearButton.addEventListener('click', function() {
this.textInput.value = '';
this.textInput.focus();
}.bind(this));
this.focusBar = document.createElement('div');
this.focusBar.classList.add('focus');
this.smartInputGroup = document.createElement('div');
this.smartInputGroup.classList.add('modal-dialog-input-group');
this.smartInputGroup.appendChild(this.textInput);
this.smartInputGroup.appendChild(this.clearButton);
this.smartInputGroup.appendChild(this.focusBar);
this.messageContainer.appendChild(this.smartInputGroup);
};
proto._createMessageGroup = function(options) {
this.message = options.message || {};
if (!this.message.textRaw && !this.message.textL10nId) {
this.messageElement.classList.add('hidden');
} else {
this.messageElement.classList.remove('hidden');
this.messageElement.textContent = this.message.textRaw || '';
if (this.message.textL10nId) {
this.messageElement.setAttribute('data-l10n-id',
this.message.textL10nId);
}
}
};
proto._createCustomGroup = function(options) {
this.customElements = [];
this.customElementOffset = 0;
this.customSettings = options.customElementSettings || null;
if (this.customSettings) {
while (this.customElementGroup.firstChild) {
this.customElementGroup.removeChild(this.customElementGroup.firstChild);
}
this.customElementGroup.appendChild(this.customSettings.element);
this.customElementGroup.classList.remove('hidden');
} else {
this.customElementGroup.classList.add('hidden');
}
};
proto._createInputGroup = function(options) {
this.inputElements = [this.textInput, this.clearButton];
if (options.initialInputValue) {
this.textInput.value = options.initialInputValue;
}
var retrunedCallback = options.onReturned;
if (retrunedCallback) {
this.textInput.addEventListener('keydown', function(evt) {
if (evt.keyCode === KeyEvent.DOM_VK_RETURN &&
this._getFocusedElement() !== this.clearButton) {
retrunedCallback();
}
}.bind(this));
}
};
proto._createButtonGroup = function(options) {
this.buttonElements = [];
// onCancel is triggered when ESC key is pressed.
this.onCancel = options.onCancel || function() {};
this.buttonElements = [];
this.buttonSettings = options.buttonSettings || [];
this.buttonGroup.innerHTML = '';
this._focusedIndex[BUTTON_GROUP_INDEX] = 0;
// Set up every button
this.buttonSettings.forEach(function buildButton(buttonSetting, index) {
var button = document.createElement('smart-button');
button.setAttribute('type', buttonSetting.type || 'circle-text');
if (buttonSetting.textL10nId) {
button.setAttribute('data-l10n-id', buttonSetting.textL10nId);
}
button.textContent = buttonSetting.textRaw || 'OK';
button.classList.add(buttonSetting.class || 'confirm');
if (buttonSetting.icon) {
button.style.backgroundImage = 'url(' + buttonSetting.icon + ')';
} else if (buttonSetting.iconFont) {
button.dataset.icon = buttonSetting.iconFont;
}
button.addEventListener('click', function() {
// Click action will be handled in closed event
this._clickedIndex = index;
this.element.close();
this.element.focus();
}.bind(this));
this.buttonElements.push(button);
this.buttonGroup.appendChild(button);
var customFocus = this.customSettings && this.customSettings.defaultFocus;
if (buttonSetting.defaultFocus && !customFocus) {
this._focusedIndex[BUTTON_GROUP_INDEX] = index;
}
var renderedCallback = options.onButtonRendered;
if (renderedCallback) {
// We add render callback to let user to do more complex visual
// modifications.
renderedCallback(button, buttonSetting);
}
}.bind(this));
};
proto._open = function(options) {
this._createMessageGroup(options);
this._createCustomGroup(options);
this._createInputGroup(options);
this._createButtonGroup(options);
this._focusedGroupIndex = 0;
this._focusedGroupIndex[INPUT_GROUP_INDEX] = 0;
// Put focusable element groups into verticalGroup,
// so we can simply navigate up/down among these groups.
this.verticalGroup = [this.inputElements, this.buttonElements];
this.element.classList.add('visible');
this.element.open();
this.element.focus();
};
proto.startKeyNavigation = function() {
this.element.addEventListener('keydown', this);
if (this._focusedIndex[0] === -1) {
this._focusedIndex[0] = 0;
}
this.focus();
};
proto._getFocusedElement = function() {
return this.verticalGroup[this._focusedGroupIndex]
[this._focusedIndex[this._focusedGroupIndex]];
};
proto.moveUp = function(e) {
if (this._focusedGroupIndex < 1) {
return;
}
this._focusedGroupIndex--;
this.focus();
};
proto.moveDown = function(e) {
if (this._focusedGroupIndex > this.verticalGroup.length - 1) {
return;
}
// Move input-group's focus back to input box when focus on button-group
this._focusedIndex[INPUT_GROUP_INDEX] = 0;
this._focusedGroupIndex++;
this.focus();
};
proto.movePrevious = function(e) {
if (this._focusedIndex[this._focusedGroupIndex] < 1) {
// Do nothing when focus index is at the first element.
return;
}
this._focusedIndex[this._focusedGroupIndex]--;
if (this._focusedGroupIndex === INPUT_GROUP_INDEX) {
// Moving from clean button to input text will move input caret position
// back one character, preventDefault so we don't change the position.
e.preventDefault();
}
this.focus();
};
proto.moveNext = function(e) {
if (this._focusedIndex[this._focusedGroupIndex] >
this.verticalGroup[this._focusedGroupIndex].length - 2) {
// Do nothing when focus index is at the last element
return;
}
this._focusedIndex[this._focusedGroupIndex]++;
this.focus();
};
proto._handleKeyEvent = function(e) {
if (e.keyCode === KeyEvent.DOM_VK_UP) {
this.moveUp(e);
} else if (e.keyCode === KeyEvent.DOM_VK_DOWN) {
this.moveDown(e);
} else if (e.keyCode === KeyEvent.DOM_VK_LEFT) {
this.movePrevious(e);
} else if (e.keyCode === KeyEvent.DOM_VK_RIGHT) {
this.moveNext(e);
} else if (e.keyCode == KeyEvent.DOM_VK_TAB) {
e.preventDefault();
if (this._focusedGroupIndex === INPUT_GROUP_INDEX) {
this.moveDown(e);
} else {
this.moveUp(e);
}
}
};
SmartInputDialog.prototype = proto;
exports.SmartInputDialog = SmartInputDialog;
})(window);

View file

@ -0,0 +1,124 @@
.modal-dialog > .outer-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.modal-dialog > .outer-container:before {
content: "";
display: inline-block;
height: 100%;
width: 0.1rem;
margin-left: -0.1rem;
vertical-align: middle;
}
.modal-dialog .container {
width: 100%;
vertical-align: middle;
display: inline-block;
}
.modal-dialog .modal-dialog-message-container {
width: 96rem;
position: relative;
margin: 0 auto 13rem auto;
word-wrap: break-word;
}
.modal-dialog .modal-dialog-custom-group {
color: #ffffff;
text-align: center;
font-family: Fira Sans;
}
.modal-dialog .modal-dialog-custom-group.hidden {
display: none;
}
.modal-dialog-input-group {
text-align: center;
position: relative;
margin: 0 auto;
width: 70rem;
}
.modal-dialog-input-group input {
font-size: 3.8rem;
font-size: 3.8rem;
color: #ffffff;
text-align: center;
background: none;
border: none;
}
.modal-dialog-input-group .focus {
bottom: 0px;
width: 100%;
height: 0.4rem;
margin: 0.4rem auto 0 auto;
visibility: hidden;
background: #00caf2;
}
.modal-dialog-input-group .clear:before {
vertical-align: top;
line-height: 3rem;
}
.modal-dialog-input-group .clear {
position: absolute;
left: calc(100% - 4rem);
border: 0;
margin: 0;
padding: 0;
width: 3rem;
height: 3rem;
border-radius: 50%;
opacity: 0;
color: #ffffff;
cursor: pointer;
background: #999999;
}
.modal-dialog-input-group :focus ~ .focus {
visibility: visible;
}
.modal-dialog-input-group :focus ~ .clear,
.modal-dialog-input-group :focus.clear {
opacity: 1;
}
.modal-dialog .modal-dialog-message {
font-size: 3.8rem;
font-style: italic;
color: #ffffff;
text-align: center;
font-family: Fira Sans;
font-weight: 100;
margin-bottom: 3.4rem;
}
.modal-dialog .modal-dialog-message.hidden {
display: none;
}
.modal-dialog .modal-dialog-button-group {
white-space: nowrap;
/* use inline-block to wrap content */
display: inline-block;
}
.modal-dialog.modal-dialog-opened .modal-dialog-button-group {
transition: transform 0.2s ease;
}
.modal-dialog .modal-dialog-button-group > * {
margin-right: 4.4rem;
}
.modal-dialog .modal-dialog-button-group > *:last-child {
margin-right: 0;
}