├── .gitignore
├── README.md
├── dist
    ├── bubb.min.css
    ├── bubb.min.css.gz
    ├── bubb.min.js
    └── bubb.min.js.gz
├── docs
    ├── CNAME
    ├── assets
    │   ├── bubb.min.css
    │   ├── bubb.min.js
    │   ├── demo.min.css
    │   ├── demo.min.js
    │   └── images
    │   │   ├── bubb.gif
    │   │   ├── bubb.png
    │   │   ├── bubb_720.gif
    │   │   ├── bubble_bobble.png
    │   │   ├── circle.png
    │   │   ├── circle.svg
    │   │   ├── cirque.svg
    │   │   ├── ghost.png
    │   │   └── icons
    │   │       ├── color
    │   │           ├── facebook.svg
    │   │           ├── reddit.svg
    │   │           └── twitter.svg
    │   │       ├── facebook.svg
    │   │       ├── fill
    │   │           ├── facebook.svg
    │   │           ├── reddit.svg
    │   │           └── twitter.svg
    │   │       ├── github.svg
    │   │       ├── reddit.svg
    │   │       └── twitter.svg
    ├── index.html
    └── libs
    │   ├── css
    │       └── tomorrow.min.css
    │   └── js
    │       └── highlight.min.js
├── gruntfile.js
├── html
    └── index.html
├── js
    ├── demo.js
    └── script.js
├── package-lock.json
├── package.json
└── scss
    ├── bubb.scss
    └── demo.scss


/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | node_modules
3 | .DS_Store
4 | _dev_*.*
5 | fonts
6 | .log
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![Alt text](/docs/assets/images/bubb.gif?raw=true "Bubb")
  2 | 
  3 | **Non-dependent**, non-fancy javascript _infotip_. **No CSS needed**.
  4 | 
  5 | [![dependencies Status](https://david-dm.org/frdnrdb/bubb/status.svg)](https://david-dm.org/frdnrdb/bubb)
  6 | [![dev dependencies](https://david-dm.org/frdnrdb/bubb/dev-status.svg)](https://badge.fury.io/js/bubb)
  7 | [![npm version](https://img.shields.io/badge/trump-sad-red.svg)](http://bubb.surge.sh)
  8 | 
  9 | ---
 10 | 
 11 | * **2.0.1** Options: toggle, autoDirection, autoHide
 12 | * **next** Mobile solution
 13 | 
 14 | ---
 15 | 
 16 | #### Usage
 17 | [→ See some examples](http://bubb.surge.sh)
 18 | 
 19 | ```html
 20 | 
 21 | <script src="bubb.min.js"></script>
 22 | 
 23 | <this data-bubb="bubble">info</this>
 24 | <that data-bubb="bobble">menu</that>
 25 | 
 26 | <script>
 27 | 
 28 |   const config = {
 29 |     bubble: 'simple bubb with <i>html</i> or text content',
 30 |     bobble: {
 31 |       jimi: 'hendrix',
 32 |       noel: 'redding',
 33 |       mitch: 'mitchell'
 34 |     }
 35 |   }
 36 | 
 37 |   const callback = (key, el) => {
 38 |     console.log(key); // eg. 'bubble' or 'bobble.mitch'
 39 |   }
 40 | 
 41 |   bubb(config, callback)
 42 | 
 43 | </script>
 44 | ```
 45 | ```js
 46 | 
 47 | // yarn add bubb | npm i --save bubb
 48 | const bubb = require('bubb');
 49 | ```
 50 | 
 51 | #### Options setup
 52 | 
 53 | ```js
 54 | 
 55 | const config = {
 56 |   bubble: {
 57 |     text: 'content',
 58 |     _: {
 59 |       // ... bubble options
 60 |     }
 61 |   },
 62 |   bobble: {
 63 |     menu_item_1: 'content',
 64 |     menu_item_2: 'content',
 65 |     _: {
 66 |       // ... bobble options
 67 |     }
 68 |   },
 69 |   _: {
 70 |     // ... global options
 71 |   }
 72 | }
 73 | 
 74 | ```
 75 | 
 76 | #### options
 77 | 
 78 | ```js
 79 | 
 80 | callback: false
 81 |   // function(){} overrides initial (or global) callback
 82 |   // boolean true adds click listener and reports to default callback
 83 | 
 84 | transitionOff: false
 85 |   // boolean
 86 | 
 87 | interactive: false
 88 |   // boolean, default true for menus and option callback
 89 | 
 90 | hoverCallback: false
 91 |   // boolean, trigger callback on element:hover
 92 | 
 93 | delay: false
 94 |   // int value, microseconds reveal delay
 95 | 
 96 | autoHide: false
 97 |   // false or milliseconds
 98 | 
 99 | toggle: false
100 |   // boolean, activate tooltip with function call bubb.toggle(key)
101 | 
102 | direction: false
103 |   // string 'north', 'west' or 'east' (default false = 'south')
104 | 
105 | autoDirection: false
106 |   // boolean, screen edge proximity aware direction change
107 | 
108 | anchor: false
109 |   // string 'left' or 'right' (default false = 'centered')
110 | 
111 | width: false
112 |   // int value <= 100 (document width percentage)
113 |   // css string with units (eg. '300px')
114 |   // querySelector string (eg. 'section:first-of-type')
115 | 
116 | borderRadius: '4px'
117 |   // css string with units
118 | 
119 | fontSize: '17px'
120 |   // css string with units
121 | 
122 | background: '#444'
123 |   // css color string
124 | 
125 | color: '#fff'
126 |   // css color string
127 | 
128 | class: false
129 |   // string, className to target current bubb specifically
130 | 
131 | 
132 | ```
133 | 
134 | #### Methods
135 | 
136 | ```js
137 | 
138 | bubb.refresh();
139 |   // initialize new data-bubb elements added to DOM
140 | 
141 | bubb.update(reference, content | options);
142 | 
143 | bubb.update(menu_reference, options);
144 | bubb.update(menu_reference.menu_item, content);
145 | 
146 | bubb.add(menu_reference.menu_item, content);
147 | bubb.remove(menu_reference.menu_item);
148 |   // these methods adds or removes DOM elements
149 | 
150 | ```
151 | 
152 | 
153 | #### Style overrides
154 | The content is targeted through **bubb-content** > **div**.
155 | The trigger element gets className **.bubb** *(and .bubb-menu)*.
156 | The bubb(le) tagname is **bubb-bobb**.
157 | 
158 | ---
159 | 
160 | #### Browser Support et cetera
161 | 
162 | Missed that train. Feel free to contribute if you're on board.
163 | 


--------------------------------------------------------------------------------
/dist/bubb.min.css:
--------------------------------------------------------------------------------
  1 | [bubb] {
  2 |   position: relative; }
  3 |   [bubb]:before, [bubb]:after {
  4 |     position: absolute;
  5 |     pointer-events: none;
  6 |     visibility: hidden;
  7 |     z-index: 1;
  8 |     bottom: 0;
  9 |     opacity: 0; }
 10 |   [bubb]:before {
 11 |     content: '';
 12 |     width: 0;
 13 |     height: 0;
 14 |     border-bottom: 10px solid #444;
 15 |     border-right: 10px solid transparent;
 16 |     border-left: 10px solid transparent; }
 17 |   [bubb]:after {
 18 |     content: attr(bubb);
 19 |     padding: .75em .9em .85em;
 20 |     line-height: 1.1;
 21 |     font-size: 17px;
 22 |     text-align: center;
 23 |     border-radius: 5px;
 24 |     background-color: #444;
 25 |     color: #fff;
 26 |     min-width: 9em;
 27 |     text-rendering: optimizeLegibility;
 28 |     -webkit-font-smoothing: antialiased;
 29 |     -moz-osx-font-smoothing: grayscale;
 30 |     -webkit-touch-callout: none;
 31 |     -webkit-user-select: none;
 32 |     -khtml-user-select: none;
 33 |     -moz-user-select: none;
 34 |     -ms-user-select: none;
 35 |     user-select: none; }
 36 |   [bubb]:hover:before, [bubb]:hover:after {
 37 |     transition: transform 0.35s cubic-bezier(0, 0, 0, 1), opacity 0.35s cubic-bezier(0, 0, 0, 1);
 38 |     visibility: visible;
 39 |     opacity: 1; }
 40 |   [bubb][still]:hover:before, [bubb][still]:hover:after {
 41 |     transition-duration: 0s; }
 42 |   [bubb][delay]:hover:before, [bubb][delay]:hover:after {
 43 |     transition-delay: 0.75s; }
 44 |   [bubb][round]:after {
 45 |     border-radius: 30px !important; }
 46 |   [bubb][round][north][left]:after, [bubb][round][east][right]:after {
 47 |     border-radius: 30px 30px 30px 0 !important; }
 48 |   [bubb][round][north][right]:after, [bubb][round][west][right]:after {
 49 |     border-radius: 30px 30px 0 30px !important; }
 50 |   [bubb][round][left]:not([east]):not([west]):not([north]):after, [bubb][round][east][left]:after {
 51 |     border-radius: 0 30px 30px 30px !important; }
 52 |   [bubb][round][right]:not([east]):not([west]):not([north]):after, [bubb][round][west][left]:after {
 53 |     border-radius: 30px 0 30px 30px !important; }
 54 |   [bubb][large]:after {
 55 |     font-size: 20px !important; }
 56 |   [bubb]:not([east]):not([west]):not([north]):before, [bubb]:not([east]):not([west]):not([north]):after {
 57 |     left: 50%; }
 58 |   [bubb]:not([east]):not([west]):not([north]):before {
 59 |     transform: translate(-50%, calc( 10px + .065rem + 4px + 20px)); }
 60 |   [bubb]:not([east]):not([west]):not([north]):after {
 61 |     transform: translate(-50%, calc( 100% + 10px + 4px + 20px)); }
 62 |   [bubb]:not([east]):not([west]):not([north]):hover:before {
 63 |     transform: translate(-50%, calc( 10px + .065rem + 4px)); }
 64 |   [bubb]:not([east]):not([west]):not([north]):hover:after {
 65 |     transform: translate(-50%, calc( 100% + 10px + 4px)); }
 66 |   [bubb]:not([east]):not([west]):not([north])[left]:before, [bubb]:not([east]):not([west]):not([north])[right]:before {
 67 |     transform: translate(0, calc( 10px + .065rem + 4px + 20px)); }
 68 |   [bubb]:not([east]):not([west]):not([north])[left]:after, [bubb]:not([east]):not([west]):not([north])[right]:after {
 69 |     transform: translate(0, calc( 100% + 10px + 4px + 20px)); }
 70 |   [bubb]:not([east]):not([west]):not([north])[left]:hover:before, [bubb]:not([east]):not([west]):not([north])[right]:hover:before {
 71 |     transform: translate(0, calc( 10px + .065rem + 4px)); }
 72 |   [bubb]:not([east]):not([west]):not([north])[left]:hover:after, [bubb]:not([east]):not([west]):not([north])[right]:hover:after {
 73 |     transform: translate(0, calc( 100% + 10px + 4px)); }
 74 |   [bubb]:not([east]):not([west]):not([north])[left]:before, [bubb]:not([east]):not([west]):not([north])[left]:after {
 75 |     left: 0; }
 76 |   [bubb]:not([east]):not([west]):not([north])[left]:before {
 77 |     border-left: none; }
 78 |   [bubb]:not([east]):not([west]):not([north])[left]:after {
 79 |     border-radius: 0 5px 5px 5px; }
 80 |   [bubb]:not([east]):not([west]):not([north])[right]:before, [bubb]:not([east]):not([west]):not([north])[right]:after {
 81 |     left: auto;
 82 |     right: 0; }
 83 |   [bubb]:not([east]):not([west]):not([north])[right]:before {
 84 |     border-right: none; }
 85 |   [bubb]:not([east]):not([west]):not([north])[right]:after {
 86 |     border-radius: 5px 0 5px 5px; }
 87 |   [bubb][north]:before, [bubb][north]:after {
 88 |     left: 50%;
 89 |     top: 0;
 90 |     bottom: auto; }
 91 |   [bubb][north]:before {
 92 |     border-bottom: none;
 93 |     border-top: 10px solid #444;
 94 |     border-left-color: transparent;
 95 |     border-right-color: transparent;
 96 |     transform: translate(-50%, calc( -10px - .065rem - 4px - 20px)); }
 97 |   [bubb][north]:after {
 98 |     transform: translate(-50%, calc( -100% - 10px - 4px - 20px)); }
 99 |   [bubb][north]:hover:before {
100 |     transform: translate(-50%, calc( -10px - .065rem - 4px)); }
101 |   [bubb][north]:hover:after {
102 |     transform: translate(-50%, calc( -100% - 10px - 4px)); }
103 |   [bubb][north][left]:before, [bubb][north][right]:before {
104 |     transform: translate(0, calc( -10px - .065rem - 4px - 20px)); }
105 |   [bubb][north][left]:after, [bubb][north][right]:after {
106 |     transform: translate(0, calc( -100% - 10px - 4px - 20px)); }
107 |   [bubb][north][left]:hover:before, [bubb][north][right]:hover:before {
108 |     transform: translate(0, calc( -10px - .065rem - 4px)); }
109 |   [bubb][north][left]:hover:after, [bubb][north][right]:hover:after {
110 |     transform: translate(0, calc( -100% - 10px - 4px)); }
111 |   [bubb][north][left]:before, [bubb][north][left]:after {
112 |     left: 0;
113 |     top: 0;
114 |     bottom: auto; }
115 |   [bubb][north][left]:before {
116 |     border-left: none; }
117 |   [bubb][north][left]:after {
118 |     border-radius: 5px 5px 5px 0; }
119 |   [bubb][north][right]:before, [bubb][north][right]:after {
120 |     left: auto;
121 |     right: 0;
122 |     top: 0;
123 |     bottom: auto; }
124 |   [bubb][north][right]:before {
125 |     border-right: none; }
126 |   [bubb][north][right]:after {
127 |     border-radius: 5px 5px 0 5px; }
128 |   [bubb][east]:before, [bubb][east]:after {
129 |     left: auto;
130 |     right: 0;
131 |     top: 50%;
132 |     bottom: auto; }
133 |   [bubb][east]:before {
134 |     border-left: none;
135 |     border-right-color: #444; }
136 |   [bubb][east]:before {
137 |     border-top: 10px solid transparent;
138 |     border-bottom-color: transparent;
139 |     transform: translate(calc( 10px + .065rem + 4px + 20px), -50%); }
140 |   [bubb][east]:after {
141 |     transform: translate(calc( 100% + 10px + 4px + 20px), -50%); }
142 |   [bubb][east]:hover:before {
143 |     transform: translate(calc( 10px + .065rem + 4px), -50%); }
144 |   [bubb][east]:hover:after {
145 |     transform: translate(calc( 100% + 10px + 4px), -50%); }
146 |   [bubb][east][left]:before {
147 |     border-top: none;
148 |     border-bottom-color: transparent;
149 |     transform: translate(calc( 10px + .065rem + 4px + 20px), 0); }
150 |   [bubb][east][left]:after {
151 |     border-radius: 0 5px 5px 5px;
152 |     transform: translate(calc( 100% + 10px + 4px + 20px), 0); }
153 |   [bubb][east][left]:hover:before {
154 |     transform: translate(calc( 10px + .065rem + 4px), 0); }
155 |   [bubb][east][left]:hover:after {
156 |     transform: translate(calc( 100% + 10px + 4px), 0); }
157 |   [bubb][east][right]:before {
158 |     border-top: 10px solid transparent;
159 |     border-bottom: none;
160 |     transform: translate(calc( 10px + .065rem + 4px + 20px), -100%); }
161 |   [bubb][east][right]:after {
162 |     border-radius: 5px 5px 5px 0;
163 |     transform: translate(calc( 100% + 10px + 4px + 20px), -100%); }
164 |   [bubb][east][right]:hover:before {
165 |     transform: translate(calc( 10px + .065rem + 4px), -100%); }
166 |   [bubb][east][right]:hover:after {
167 |     transform: translate(calc( 100% + 10px + 4px), -100%); }
168 |   [bubb][west]:before, [bubb][west]:after {
169 |     left: 0;
170 |     right: auto;
171 |     top: 50%;
172 |     bottom: auto; }
173 |   [bubb][west]:before {
174 |     border-right: none;
175 |     border-top: 10px solid transparent;
176 |     border-bottom-color: transparent;
177 |     border-left-color: #444; }
178 |   [bubb][west]:before {
179 |     transform: translate(calc( -10px - .065rem - 4px - 20px), -50%); }
180 |   [bubb][west]:after {
181 |     transform: translate(calc( -100% - 10px - 4px - 20px), -50%); }
182 |   [bubb][west]:hover:before {
183 |     transform: translate(calc( -10px - .065rem - 4px), -50%); }
184 |   [bubb][west]:hover:after {
185 |     transform: translate(calc( -100% - 10px - 4px), -50%); }
186 |   [bubb][west][left]:before {
187 |     border-top: none;
188 |     transform: translate(calc( -10px - .065rem - 4px - 20px), 0); }
189 |   [bubb][west][left]:after {
190 |     border-radius: 5px 0 5px 5px;
191 |     transform: translate(calc( -100% - 10px - 4px - 20px), 0); }
192 |   [bubb][west][left]:hover:before {
193 |     transform: translate(calc( -10px - .065rem - 4px), 0); }
194 |   [bubb][west][left]:hover:after {
195 |     transform: translate(calc( -100% - 10px - 4px), 0); }
196 |   [bubb][west][right]:before {
197 |     border-bottom: none;
198 |     transform: translate(calc( -10px - .065rem - 4px - 20px), -100%); }
199 |   [bubb][west][right]:after {
200 |     border-radius: 5px 5px 0 5px;
201 |     transform: translate(calc( -100% - 10px - 4px - 20px), -100%); }
202 |   [bubb][west][right]:hover:before {
203 |     transform: translate(calc( -10px - .065rem - 4px), -100%); }
204 |   [bubb][west][right]:hover:after {
205 |     transform: translate(calc( -100% - 10px - 4px), -100%); }
206 | 


--------------------------------------------------------------------------------
/dist/bubb.min.css.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frdnrdb/bubb/ea009ac3037d000b9f5a6c4fd0d78d18b5708cec/dist/bubb.min.css.gz


--------------------------------------------------------------------------------
/dist/bubb.min.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 |   TODO!
  4 | 
  5 |   * IMPROVE add eventEmitter
  6 |       - https://www.sitepoint.com/nodejs-events-and-eventemitter/
  7 |       - https://github.com/chrisdavies/eev
  8 | 
  9 |   * IMPROVE Implement some try/catch error handling and/or input type checks to prevent user input errors
 10 | 
 11 |   * ADD Implement dim-rest-of-page-option
 12 | 
 13 |   * TRY alternative tooltip layout (material-ui-dropdown-menu-ish) as option
 14 |   * TRY alternative theme (light (box-shadowed) or thin border) as option
 15 | 
 16 |   * CONSIDER Menu-style as part of package
 17 | 
 18 | */
 19 | 
 20 | (function(window, document) {var this$0 = this;
 21 | 
 22 | var bubb = function(config, callback)  {
 23 | 
 24 |   bubb.config = bubb.config || (typeof config === 'object' ? config : {});
 25 |   bubb.config._ = bubb.config._ || config._ || {};
 26 |   bubb.callback = bubb.callback || (typeof bubb.config._.callback === 'function' && bubb.config._.callback) || (typeof callback === 'function' && callback);
 27 | 
 28 |   // class bubb indicates the element has already been initiated/ configured
 29 |   var bubbs = arguments[0] === 'update' ? [arguments[1]] : Array.from( document.querySelectorAll('[data-bubb]:not(.bubb)') );
 30 | 
 31 |   if (!bubbs.length) return;
 32 | 
 33 |   !bubb._initialized && initBubb();
 34 | 
 35 |   bubbs.forEach(buildElement);
 36 | 
 37 | }
 38 | 
 39 | var buildElement = function(_trigger ) {
 40 | 
 41 |   var key = _trigger.dataset.bubb.trim(),
 42 |       data = bubb.config[key] || key,
 43 | 
 44 |       chck = typeof data === 'object',
 45 |       opts = chck && data._, // config contains options _
 46 |       only = opts && Object.keys(data).length === 1, // options only, use key as content
 47 |       menu = chck && !data.hasOwnProperty('text'); // config indicates a menu
 48 | 
 49 |       only && (data.text = key);
 50 | 
 51 |       var props = !menu ? opts ? ['text'] : [false] : Object.keys(data),
 52 |       bindMenu = typeof bubb.callback === 'function' || typeof bubb.config._.callback === 'function',
 53 |       triggerPosition = window.getComputedStyle(_trigger).position;
 54 | 
 55 |       _trigger._bubb = {
 56 |         key: key,
 57 |         config: setElementConfiguration(opts),
 58 |         type: menu ? 'menu' : opts ? 'opts' : 'string',
 59 |         markup: props.reduce( buildElementMarkup.bind(this$0, key), '' ),
 60 |         bind: (menu && bindMenu) || (opts && (typeof opts.callback === 'function' || typeof opts.callback === 'boolean'))
 61 |       };
 62 | 
 63 |       triggerPosition && !triggerPosition.match(/absolute|fixed|relative/) && (_trigger.style.position = 'relative');
 64 | 
 65 |       _trigger.classList.add('bubb');
 66 | 
 67 |       bubb.triggers[key] = _trigger;
 68 | 
 69 |       bindElement(_trigger);
 70 | 
 71 | };
 72 | 
 73 | var setElementConfiguration = function(opts ) {
 74 | 
 75 |   return availableOptions.reduce( function(config, option)  {
 76 |     opts && opts.hasOwnProperty(option) ? config[option] = opts[option]
 77 |       : bubb.config._.hasOwnProperty(option) ? config[option] = bubb.config._[option]
 78 |       : false;
 79 |     return config;
 80 |   }, {});
 81 | 
 82 | };
 83 | 
 84 | var buildElementMarkup = function(key, markup, prop)  {
 85 | 
 86 |     if (prop === '_') return markup;
 87 | 
 88 |     var content = prop ? bubb.config[key][prop] : bubb.config[key] || key,
 89 |         selector = key + (prop && prop !== 'text' ? '.' + prop : ''),
 90 |         attribute = ((" data-bubb-value=\"" + selector) + "\"");
 91 | 
 92 |     return markup += (("<div " + attribute) + ("><span>" + content) + "</span></div>");
 93 | 
 94 | };
 95 | 
 96 | var bindElement = function(_trigger)  {
 97 | 
 98 |   var bubbEvents = _trigger._bubb.config.toggle ? [] : ['mouseenter', 'mouseleave'];
 99 | 
100 |   if (_trigger._bubb.bind) bubbEvents.push('mousedown');
101 | 
102 |   bubbEvents.forEach( function(event ) {return _trigger.addEventListener(event, eventHandler, false)} );
103 | 
104 | };
105 | 
106 | var configureElement = function(_trigger ) {
107 | 
108 |     var trigger = _trigger._bubb,
109 |         bubble = bubb._element,
110 |         config = bubble._config = trigger.config;
111 | 
112 |     bubble.style.visibility = 'hidden';
113 | 
114 |     bubble._elementContent.innerHTML = trigger.markup;
115 | 
116 |     bubble._bind = (trigger.bind && (config.interactive !== false)) || config.toggle;
117 | 
118 |     bubble.className = config.class || '';
119 | 
120 |     setWidth(config, _trigger, bubble);
121 | 
122 |     trigger.type === 'menu' && _trigger.classList.add('bubb-menu');
123 | 
124 |     _trigger.appendChild(bubble);
125 |     bubb._trigger = _trigger;
126 |     bubb._visible = false;
127 | 
128 |     appendStyles(bubb._element, '_bubblePreactive');
129 | 
130 | };
131 | 
132 | var bubbShow = function()  {
133 | 
134 |   appendStyles(bubb._element, '_bubbleActive');
135 |   bubb._visible = true;
136 | 
137 | };
138 | 
139 | var bubbHide = function(e)  {
140 | 
141 |   appendStyles(bubb._element, ['_bubbleInactive', '_bubblePreactive']);
142 |   bubb._visible = false;
143 | 
144 | };
145 | 
146 | var autoDirection = function(e, target)  {
147 | 
148 |   if (!e) return;
149 | 
150 |   var h = bubb._element.offsetHeight || 150;
151 |   var w = bubb._element.offsetWidth || 150;
152 |   var d = target._bubb.config.direction;
153 | 
154 |   var rect = target.getBoundingClientRect();
155 | 
156 |   var limits = {
157 |     w: rect.left < w,
158 |     e: rect.right > (window.innerWidth - w),
159 |     n: rect.top < h,
160 |     s: rect.bottom > (window.innerHeight - h)
161 |   }
162 | 
163 |   if (d && (d === 'east' || d === 'west')) {
164 |     bubb._autoDirection = limits.w ? 'east' : limits.e ? 'west' : false;
165 |     bubb._autoAnchor = limits.n ? 'left' : limits.s ? 'right' : false;
166 |   }
167 |   else {
168 |     bubb._autoDirection = limits.s ? 'north' : limits.n ? 'south' : false;
169 |     bubb._autoAnchor = false;
170 |   }
171 | 
172 |   return bubb._autoDirection;
173 | 
174 | };
175 | 
176 | var eventHandler = function(e) {
177 | 
178 |     if (!this._bubb) return;
179 | 
180 |     // ---> configure (if autoDirection in config OR trigger new element)
181 | 
182 |     (
183 |       ((bubb.config._.autoDirection || this._bubb.config.autoDirection)
184 |           && autoDirection(e, this)
185 |       )
186 |       || (bubb._trigger !== this)
187 |     )
188 |     && configureElement(this);
189 | 
190 |     // ---> reveal or hide
191 | 
192 |     window.clearTimeout(bubb._timerOn);
193 |     window.clearTimeout(bubb._timerOff);
194 | 
195 |     e.type === 'mouseenter'
196 |       ? bubb._timerOn = window.setTimeout( bubbShow, (this._bubb.config.delay | 0) || 0)
197 |       : e.type !== 'mousedown' && bubbHide(e);
198 | 
199 |     if (this._bubb.config.autoHide) {
200 |       bubb._timerOff = window.setTimeout( bubbHide, this._bubb.config.autoHide + (this._bubb.config.delay | 0) );
201 |     }
202 | 
203 |     // ---> leave
204 | 
205 |     if (!this._bubb.bind || e.type === 'mouseleave') return;
206 | 
207 |     // ---> callback
208 | 
209 |     var hover = this._bubb.config.hoverCallback,
210 |         bubbvalue = hover ? this.dataset.bubb : e.target.dataset.bubbValue || e.target.parentNode.dataset.bubbValue || e.target.parentNode.parentNode.dataset.bubbValue;
211 | 
212 |     if (!bubbvalue) return;
213 | 
214 |     var thiscallback = (typeof this._bubb.config.callback === 'function' && this._bubb.config.callback) || bubb.callback,
215 |         item = this.querySelector((("[data-bubb-value=\"" + (this.dataset.bubb)) + "\"]")) || e.target;
216 | 
217 |     thiscallback(bubbvalue, item, this, e.type);
218 | 
219 | }
220 | 
221 | var isTrigger = function(node, check)  {
222 | 
223 |   if (!node) return;
224 |   if (node._bubb && (check ? node === bubb._trigger : true)) return node;
225 |   return isTrigger(node.parentNode);
226 | 
227 | };
228 | 
229 | var clickOutside = function(e) {
230 | 
231 |   // _toggler initiated the toggle
232 | 
233 |   !bubb._toggler && (bubb._toggler = e.target);
234 | 
235 |   // avoid toggle initiator to negate the toggle
236 | 
237 |   if (bubb._toggler === e.target) return;
238 | 
239 |   // click inside; the caller is the toggled element
240 | 
241 |   if (isTrigger(e.target, bubb._trigger)) return;
242 | 
243 |   // release _toggler, remove event listener and hide bubb
244 | 
245 |   bubb._toggler = false;
246 |   window.removeEventListener('click', clickOutside, false);
247 |   eventHandler.call(bubb._trigger, {target: bubb._trigger, type: 'mouseleave'});
248 | 
249 | }
250 | 
251 | var toggle = function()  {
252 | 
253 |     var element = arguments[0],
254 |         _trigger = (typeof element === 'object' && element) || bubb.triggers[element];
255 | 
256 |     if (!_trigger || !_trigger._bubb.config.toggle) {
257 |       console.error('bubb: trying to toggle a non-existing or non-toggled element');
258 |       return;
259 |     }
260 | 
261 |     //_trigger !== bubb._trigger && configureElement(_trigger);
262 | 
263 |     window[ (bubb._visible ? 'remove' : 'add') + 'EventListener']('click', clickOutside, false);
264 |     eventHandler.call(_trigger, {target: _trigger, type: bubb._visible ? 'mouseleave' : 'mouseenter'});
265 | 
266 | };
267 | 
268 | var update = function()  {
269 | 
270 |       var key = arguments[0], contentOrConfig = arguments[1];
271 | 
272 |       if (typeof key !== 'string' || !contentOrConfig) return;
273 | 
274 |       var updateOptions = typeof contentOrConfig === 'object',
275 |           menu = key.split('.').reduce( function(obj, val, i)  {
276 |             obj[['key','val'][i]] = val;
277 |             return obj;
278 |           }, {}),
279 |           _trigger = document.querySelector((("[data-bubb=\"" + (menu.key || key)) + "\"]"));
280 | 
281 |       if (!_trigger && !updateOptions) return;
282 | 
283 |       if (!_trigger) {
284 |         console.error('bubb: trying to update a non-existing element');
285 |         return;
286 |       }
287 | 
288 |       // update added DOM element - when bubb.refresh() has not been used
289 | 
290 |       if (!_trigger._bubb) bubb('update', _trigger);
291 | 
292 |       bubb._trigger = false;
293 | 
294 |       // update element
295 | 
296 |       if (!updateOptions) {
297 |         _trigger._bubb.markup = _trigger._bubb.markup.replace(new RegExp((("<div\\s+data-bubb-value=\"" + key) + "\">.*?</div>")), (("<div data-bubb-value=\"" + key) + ("\"><span>" + contentOrConfig) + "</span></div>"));
298 |         return;
299 |       }
300 | 
301 |       // update element config
302 | 
303 |       var bindDefault = typeof contentOrConfig.callback === 'boolean' && !_trigger._bubb.bind,
304 |           bindSelf = typeof contentOrConfig.callback === 'function' && !_trigger._bubb.config.hasOwnProperty('callback'),
305 |           bindHover = contentOrConfig.hoverCallback && !_trigger._bubb.config.hoverCallback;
306 | 
307 |       if (bindDefault || bindSelf || bindHover) _trigger._bubb.bind = true;
308 | 
309 |       if (bindDefault || bindSelf) _trigger.addEventListener( 'mousedown', eventHandler, false);
310 | 
311 |       Object.keys(contentOrConfig).forEach( function(updatedKey ) {
312 |         if (!~availableOptions.indexOf(updatedKey)) return;
313 |         if (_trigger) _trigger._bubb.config[updatedKey] = contentOrConfig[updatedKey];
314 |         else bubb.config['_'][updatedKey] = contentOrConfig[updatedKey];
315 |       });
316 | 
317 |       // update main config
318 | 
319 |       updateMainConfig(key, contentOrConfig, updateOptions, _trigger);
320 | 
321 | };
322 | 
323 | var addOrRemove = function()  {
324 | 
325 |   if (arguments.length === 0) {
326 |     bubb();
327 |     return;
328 |   }
329 | 
330 |   var key = arguments[0], value = arguments[1],
331 |       menu = key.split('.').reduce( function(obj, val, i)  {
332 |         obj[['key','val'][i]] = val;
333 |         return obj;
334 |       }, {});
335 | 
336 |   if (!menu.val || !bubb.config[menu.key]) return;
337 | 
338 |   // add menu item
339 | 
340 |   bubb._trigger = false;
341 | 
342 |   if (value && typeof value === 'string' && !bubb.config[menu.key][menu.val]) {
343 | 
344 |     bubb.config[menu.key][menu.val] = value;
345 | 
346 |     document.querySelector((("[data-bubb=\"" + (menu.key)) + "\"]"))._bubb.markup += (("<div data-bubb-value=\"" + key) + ("\"><span>" + value) + "</span></div>");
347 |     return;
348 | 
349 |   }
350 | 
351 |   // remove menu item
352 | 
353 |   if (!value && bubb.config[menu.key][menu.val]) {
354 | 
355 |     delete bubb.config[menu.key][menu.val];
356 | 
357 |     var _trigger = document.querySelector((("[data-bubb=\"" + (menu.key)) + "\"]"));
358 |     _trigger._bubb.markup = _trigger._bubb.markup.replace(new RegExp((("<div\\s+data-bubb-value=\"" + key) + "\">.*?</div>")), '');
359 | 
360 |   }
361 | 
362 | };
363 | 
364 | var setWidth = function(config, _trigger, _bubble)  {
365 | 
366 |   var input = config.width,
367 |       anchor = config.anchor,
368 |       direction = config.direction,
369 |       sideways = direction === 'east' || direction === 'west';
370 | 
371 |   // '300px', '3em'
372 |   if (typeof input === 'string' && parseInt(input)) {
373 |     _bubble.style.width = input;
374 |     return;
375 |   }
376 | 
377 |   // 33, '33' || 'section > div'
378 |   var width = (input | 0) || document.querySelector(input);
379 | 
380 |   if (!width) {
381 |     _bubble.style.width = '100%';
382 |     return;
383 |   }
384 | 
385 |   var padding = 30,
386 |       fill = typeof width === 'object',
387 |       bodyw = document.body.offsetWidth,
388 |       box = _trigger.getBoundingClientRect(),
389 |       boxm = box.width/2,
390 |       boxl = box.left,
391 |       boxr = box.right,
392 |       inputWidth = fill ? width.offsetWidth : (width === 100 ? bodyw - padding*2 : (width * bodyw) / 100);
393 | 
394 |   if (anchor || sideways) {
395 | 
396 |     var newWidth$0 = !sideways && anchor
397 |                       ? anchor === 'left'
398 |                       ? bodyw - boxl - padding : anchor === 'right'
399 |                       ? bodyw - ( bodyw - boxr ) - padding
400 |                       : false
401 |                    : direction === 'east'
402 |                       ? bodyw - boxr - padding : direction === 'west'
403 |                       ? boxl - padding
404 |                       : false;
405 | 
406 |     if (newWidth$0) {
407 |       _bubble.style.width = Math.min(inputWidth, newWidth$0) + 'px';
408 |       return;
409 |     }
410 | 
411 |   }
412 | 
413 |   var newWidth = Math.min(inputWidth, ((boxl + boxm > bodyw/2 ? bodyw - boxr + boxm: boxl + boxm) - padding) * 2);
414 | 
415 |   _bubble.style.width = newWidth + 'px';
416 |   _bubble.style.left = (boxm - newWidth/2) + 'px';
417 |   _bubble._elementTip.style.left = newWidth/2 + 'px';
418 | 
419 | };
420 | 
421 | var updateMainConfig = function(key, contentOrConfig, updateOptions, _trigger)  {
422 | 
423 |   var typeMenu = _trigger._bubb.type === 'menu',
424 |       typeOptions = _trigger._bubb.type === 'opts',
425 |       keyVal = ~key.indexOf('.') && key.split('.'),
426 |       menu = keyVal ? keyVal.reduce( function(obj, val, i)  {
427 |         obj[['key','val'][i]] = val;
428 |         return obj;
429 |       }, {}) : {};
430 | 
431 |   if (!typeMenu && !typeOptions && !updateOptions) {
432 |       bubb.config[key] = contentOrConfig;
433 |       return;
434 |   }
435 | 
436 |   var prop = menu.key || key;
437 | 
438 |   if (!updateOptions) {
439 |     bubb.config[prop][menu.val || 'text'] = contentOrConfig;
440 |     return;
441 |   }
442 | 
443 |   if (!typeMenu && !typeOptions) {
444 |     bubb.config[prop] = {
445 |       text: bubb.config[prop],
446 |       _: contentOrConfig
447 |     };
448 |     _trigger._bubb.type === 'opts';
449 |     return;
450 |   }
451 | 
452 |   bubb.config[prop]['_'] = bubb.config[prop]['_'] || contentOrConfig;
453 |   Object.assign(bubb.config[prop]['_'], contentOrConfig);
454 | 
455 | };
456 | 
457 | var styleVariables = {
458 |   tipsize: '12px',
459 |   offset: '.15em',
460 |   distance: '20px',
461 |   easing: 'cubic-bezier(0,0,0,1)',
462 |   duration: '.3s',
463 |   background: '#444',
464 |   color: '#fff',
465 |   rounding: '4px',
466 |   fontsize: '17px'
467 | };
468 | 
469 | var styles = {
470 |   _bubble: {
471 |     position: 'absolute',
472 |     zIndex: '99',
473 |     display: 'block',
474 |     padding: '.75em .9em .85em',
475 |     lineHeight: '1.1',
476 |     textAlign: 'center',
477 |     cursor: 'default',
478 |     minWidth: '150px',
479 |     width: '100%',
480 |     boxSizing: 'border-box',
481 |     textRendering: 'optimizeLegibility',
482 |     WebkitFontSmoothing: 'antialiased',
483 |     MozOsxFontSmoothing: 'grayscale',
484 |     wordWrap: 'break-word',
485 |     hyphens: 'auto',
486 |     WebkitTouchCallout: 'none',
487 |     WebkitUserSelect: 'none',
488 |     KhtmlUserSelect: 'none',
489 |     MozUserSelect: 'none',
490 |     MsUserSelect: 'none',
491 |     userSelect: 'none'
492 |   },
493 |   _bubbleInactive: {
494 |     visibility: 'hidden',
495 |     pointerEvents: 'none',
496 |     opacity: '0',
497 |   },
498 |   _bubblePreactive: {
499 |     background: styleVariables['background'],
500 |     borderBottomColor: styleVariables['background'],
501 |     color: styleVariables['color'],
502 |     fontSize: styleVariables['fontsize'],
503 |   },
504 |   _bubbleActive: {
505 |     transitionProperty: 'opacity, transform',
506 |     transitionDuration: styleVariables['duration'],
507 |     transitionTimingFunction: styleVariables['easing'],
508 |     pointerEvents: 'all',
509 |     opacity: '1',
510 |     visibility: 'visible'
511 |   },
512 |   _bubbleInteractive: {
513 |     position: 'absolute',
514 |     zIndex: '-1',
515 |     display: 'none',
516 |     width: (("calc( 100% + ( " + (styleVariables['tipsize'])) + (" + " + (styleVariables['offset'])) + " ) * 2 )"),
517 |     height: (("calc( 100% + ( " + (styleVariables['tipsize'])) + (" + " + (styleVariables['offset'])) + " ) * 2 )"),
518 |     top: (("calc( -1 * ( " + (styleVariables['tipsize'])) + (" + " + (styleVariables['offset'])) + " ) )"),
519 |     left: (("calc( -1 * ( " + (styleVariables['tipsize'])) + (" + " + (styleVariables['offset'])) + " ) )"),
520 |     pointerEvents: 'all',
521 |     background: 'transparent'
522 |   },
523 |   _bubbleTip: {
524 |     position: 'absolute',
525 |     width: '0',
526 |     height: '0',
527 |     borderLeft: (("" + (styleVariables['tipsize'])) + " solid transparent"),
528 |     borderRight: (("" + (styleVariables['tipsize'])) + " solid transparent"),
529 |     borderBottomWidth: styleVariables['tipsize'],
530 |     borderBottomStyle: 'solid',
531 |     borderBottomColor: 'inherit'
532 |   }
533 | };
534 | 
535 | var styleTransforms = {
536 |   positive: {
537 |     active: (("calc( 100% + " + (styleVariables['tipsize'])) + (" + " + (styleVariables['offset'])) + " )"),
538 |     inactive: (("calc( 100% + " + (styleVariables['tipsize'])) + (" + " + (styleVariables['offset'])) + (" + " + (styleVariables['distance'])) + " )")
539 |   },
540 |   negative: {
541 |     active: (("calc( -100% - " + (styleVariables['tipsize'])) + (" - " + (styleVariables['offset'])) + " )"),
542 |     inactive: (("calc( -100% - " + (styleVariables['tipsize'])) + (" - " + (styleVariables['offset'])) + (" - " + (styleVariables['distance'])) + " )")
543 |   }
544 | };
545 | 
546 | var styleDirections = {
547 |     x: {
548 |       east: styleTransforms.positive,
549 |       west: styleTransforms.negative
550 |     },
551 |     y: {
552 |       south: styleTransforms.positive,
553 |       north: styleTransforms.negative,
554 |     }
555 | };
556 | 
557 | var styleRoundings = {
558 |   south: {
559 |     left: [0,1,1,1],
560 |     right: [1,0,1,1]
561 |   },
562 |   north: {
563 |     left: [1,1,1,0],
564 |     right: [1,1,0,1]
565 |   },
566 |   east: {
567 |     left: [0,1,1,1],
568 |     right: [1,1,1,0]
569 |   },
570 |   west: {
571 |     left: [1,0,1,1],
572 |     right: [1,1,0,1]
573 |   }
574 | };
575 | 
576 | var evalAnchor = function(left, anchor)  {return anchor ? ( (anchor === 'left' && left) || (anchor === 'right' && !left) ? 0 : 'auto' ) : left ? '50%' : 'auto'};
577 | 
578 | var stylePositions = {
579 |   south: {
580 |     left: evalAnchor.bind(this, true),
581 |     right: evalAnchor.bind(this, false),
582 |     top: function(anchor, tip)  {return tip ? (("calc( 2px - " + (styleVariables['tipsize'])) + " )") : 'auto'},
583 |     bottom: function(anchor, tip)  {return tip ? 'auto' : 0}
584 |   },
585 |   north: {
586 |     left: function(anchor, tip)  {return evalAnchor(true, tip && anchor ? anchor === 'left' ? 'left' : 'right' : anchor)},
587 |     right: function(anchor, tip)  {return evalAnchor(false, tip && anchor ? anchor === 'left' ? 'left' : 'right' : anchor)},
588 |     top: function(anchor, tip)  {return tip ? 'auto' : 0},
589 |     bottom: function(anchor, tip)  {return tip ? (("calc( 2px - " + (styleVariables['tipsize'])) + " )") : 'auto'}
590 |   },
591 |   east: {
592 |     left: function(anchor, tip)  {return tip ? (("calc( 2px - " + (styleVariables['tipsize'])) + " )") : 'auto'},
593 |     right: function(anchor, tip)  {return tip ? 'auto' : 0},
594 |     top: function(anchor, tip)  {return tip ? evalAnchor(true, anchor) : !anchor || (anchor === 'left') ? '50%' : 'auto'},
595 |     bottom: function(anchor, tip)  {return tip ? evalAnchor(false, anchor) : anchor === 'right' ? '50%' : 'auto'}
596 |   },
597 |   west: {
598 |     left: function(anchor, tip)  {return tip ? 'auto' : 0},
599 |     right: function(anchor, tip)  {return tip ? (("calc( 2px - " + (styleVariables['tipsize'])) + " )") : 'auto'},
600 |     top: function(anchor, tip)  {return tip ? evalAnchor(true, anchor) : !anchor || (anchor === 'left') ? '50%' : 'auto'},
601 |     bottom: function(anchor, tip)  {return tip ? evalAnchor(false, anchor) : anchor === 'right' ? '50%' : 'auto'}
602 |   }
603 | };
604 | 
605 | var tipTransforms = {
606 |   south: {
607 |     center: 'translate(-50%, 0)',
608 |     left: 'translate(-25%, 50%) rotate(90deg)',
609 |     right: 'translate(25%, 50%) rotate(-90deg)'
610 |   },
611 |   north: {
612 |     center: 'translate(-50%, 0) rotate(180deg)',
613 |     left: 'translate(-25%, -50%) rotate(90deg)',
614 |     right: 'translate(25%, -50%) rotate(-90deg)'
615 |   },
616 |   east: {
617 |     center: 'translate(-25%, -50%) rotate(-90deg)',
618 |     left: 'translate(0, 0) rotate(180deg)',
619 |     right: 'translate(0, 0)'
620 |   },
621 |   west: {
622 |     center: 'translate(25%, -50%) rotate(90deg)',
623 |     left: 'translate(0, 0) rotate(180deg)',
624 |     right: 'translate(0, 0)'
625 |   }
626 | };
627 | 
628 | var setDirectionSpecificStyles = function(element, config, activeOrInactive)  {
629 | 
630 |   var direction = bubb._autoDirection || config.direction || 'south',
631 |       anchor = bubb._autoAnchor || config.anchor;
632 | 
633 |   var setBubbleTransform = function(xy ) {return ( typeof styleDirections[xy][direction] === 'object' && styleDirections[xy][direction][activeOrInactive] ) || ( anchor ? '0' : '-50%' )};
634 | 
635 |   element.style.transform = (("translate(" + (setBubbleTransform('x'))) + (", " + (setBubbleTransform('y'))) + ")");
636 | 
637 |   if (activeOrInactive === 'active') return;
638 | 
639 |   element._elementInteractive.style.display = element._bind ? 'block' : 'none';
640 | 
641 |   element._elementTip.style.transform = tipTransforms[direction][anchor || 'center'];
642 | 
643 |   ['left', 'right', 'top', 'bottom'].forEach( function(position ) {
644 |     element.style[position] = stylePositions[direction][position](anchor);
645 |     element._elementTip.style[position] = stylePositions[direction][position](anchor, true);
646 |   });
647 | 
648 |   element.style.borderRadius = (styleRoundings[direction][anchor] || [1]).reduce( function(str, chk)  { return str += (chk ? config.borderRadius || styleVariables['rounding'] : 0) + ' '; }, '');
649 | 
650 | };
651 | 
652 | var appendStyles = function(element, keys, init)  {
653 | 
654 |   var config = element._config || {};
655 | 
656 |   keys = typeof keys === 'string' ? [keys] : keys;
657 | 
658 |   keys.forEach( function(key ) {
659 | 
660 |       var active = key === '_bubbleActive',
661 |           preactive = key === '_bubblePreactive',
662 | 
663 |           still = active && config.transitionOff,
664 |           background = preactive && config.background,
665 |           color = preactive && config.color,
666 |           fontsize = preactive && config.fontSize;
667 | 
668 |       Object.keys(styles[key]).forEach( function(style ) {
669 |         element.style[style] = init ? styles[key][style]
670 |           : style === 'transitionDuration' && still ? '0s'
671 |           : (style === 'background' || style === 'borderBottomColor') && background ? background
672 |           : style === 'color' && color ? color
673 |           : style === 'fontSize' && fontsize ? fontsize
674 |           : styles[key][style];
675 |       });
676 | 
677 |       if (!init && (active || preactive)) setDirectionSpecificStyles(element, config, active ? 'active' : 'inactive');
678 | 
679 |   });
680 | 
681 | };
682 | 
683 | var setMethodProxies = function()  {
684 | 
685 |   bubb.update = function()  {return update.apply(this$0, arguments)};
686 |   bubb.add = bubb.refresh = bubb.remove = function()  {return addOrRemove.apply(this$0, arguments)};
687 |   bubb.toggle = function()  {return toggle.apply(this$0, arguments)};
688 | 
689 | };
690 | 
691 | var createBubbElements = function()  {
692 | 
693 |   bubb._element = document.createElement('bubb-bobb');
694 | 
695 |   var element = bubb._element,
696 |       tagMap = {
697 |         _elementInteractive: 'bubb-interactive',
698 |         _elementTip: 'bubb-tip',
699 |         _elementContent: 'bubb-content'
700 |       };
701 | 
702 |   for (var tag in tagMap) {
703 |     element[tag] = document.createElement(tagMap[tag]);
704 |     element.appendChild(element[tag]);
705 |   }
706 | 
707 |   appendStyles(element, ['_bubble', '_bubbleInactive'], true);
708 |   appendStyles(element._elementTip, '_bubbleTip', true);
709 |   appendStyles(element._elementInteractive, '_bubbleInteractive', true);
710 | 
711 |   bubb._den = document.createElement('bubb-den');
712 |   bubb._den.style.display = 'none';
713 |   bubb._den.appendChild(element);
714 | 
715 |   document.body.appendChild(bubb._den);
716 | 
717 | };
718 | 
719 | var listenToBubbEvents = function()  {
720 | 
721 |   var hideOrKeep = function()  {return bubb._element._bind || appendStyles(bubb._element, '_bubbleInactive', true)};
722 |   bubb._element.addEventListener('mouseenter', hideOrKeep, false);
723 | 
724 | };
725 | 
726 | var initBubb = function()  {
727 | 
728 |   bubb._initialized = true;
729 |   bubb.triggers = {};
730 | 
731 |   setMethodProxies();
732 |   createBubbElements();
733 |   listenToBubbEvents();
734 | 
735 | };
736 | 
737 | var availableOptions = [
738 |   'callback',
739 |   'hoverCallback',
740 |   'background',
741 |   'color',
742 |   'transitionOff',
743 |   'interactive',
744 |   'delay',
745 |   'width',
746 |   'fontSize',
747 |   'class',
748 |   'anchor',
749 |   'direction',
750 |   'borderRadius',
751 |   'autoHide',
752 |   'toggle',
753 |   'autoDirection'
754 | ];
755 | 
756 | // const isMobile = (typeof window.orientation !== "undefined") || ~window.navigator.userAgent.indexOf('IEMobile') ? true : false;
757 | 
758 | typeof module !== 'undefined' && module.exports ? module.exports = bubb : window.bubb = bubb;
759 | 
760 | })(window, document);
761 | 


--------------------------------------------------------------------------------
/dist/bubb.min.js.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frdnrdb/bubb/ea009ac3037d000b9f5a6c4fd0d78d18b5708cec/dist/bubb.min.js.gz


--------------------------------------------------------------------------------
/docs/CNAME:
--------------------------------------------------------------------------------
1 | bubb.surge.sh
2 | 


--------------------------------------------------------------------------------
/docs/assets/bubb.min.css:
--------------------------------------------------------------------------------
  1 | [bubb] {
  2 |   position: relative; }
  3 |   [bubb]:before, [bubb]:after {
  4 |     position: absolute;
  5 |     pointer-events: none;
  6 |     visibility: hidden;
  7 |     z-index: 1;
  8 |     bottom: 0;
  9 |     opacity: 0; }
 10 |   [bubb]:before {
 11 |     content: '';
 12 |     width: 0;
 13 |     height: 0;
 14 |     border-bottom: 10px solid #444;
 15 |     border-right: 10px solid transparent;
 16 |     border-left: 10px solid transparent; }
 17 |   [bubb]:after {
 18 |     content: attr(bubb);
 19 |     padding: .75em .9em .85em;
 20 |     line-height: 1.1;
 21 |     font-size: 17px;
 22 |     text-align: center;
 23 |     border-radius: 5px;
 24 |     background-color: #444;
 25 |     color: #fff;
 26 |     min-width: 9em;
 27 |     text-rendering: optimizeLegibility;
 28 |     -webkit-font-smoothing: antialiased;
 29 |     -moz-osx-font-smoothing: grayscale;
 30 |     -webkit-touch-callout: none;
 31 |     -webkit-user-select: none;
 32 |     -khtml-user-select: none;
 33 |     -moz-user-select: none;
 34 |     -ms-user-select: none;
 35 |     user-select: none; }
 36 |   [bubb]:hover:before, [bubb]:hover:after {
 37 |     transition: transform 0.35s cubic-bezier(0, 0, 0, 1), opacity 0.35s cubic-bezier(0, 0, 0, 1);
 38 |     visibility: visible;
 39 |     opacity: 1; }
 40 |   [bubb][still]:hover:before, [bubb][still]:hover:after {
 41 |     transition-duration: 0s; }
 42 |   [bubb][delay]:hover:before, [bubb][delay]:hover:after {
 43 |     transition-delay: 0.75s; }
 44 |   [bubb][round]:after {
 45 |     border-radius: 30px !important; }
 46 |   [bubb][round][north][left]:after, [bubb][round][east][right]:after {
 47 |     border-radius: 30px 30px 30px 0 !important; }
 48 |   [bubb][round][north][right]:after, [bubb][round][west][right]:after {
 49 |     border-radius: 30px 30px 0 30px !important; }
 50 |   [bubb][round][left]:not([east]):not([west]):not([north]):after, [bubb][round][east][left]:after {
 51 |     border-radius: 0 30px 30px 30px !important; }
 52 |   [bubb][round][right]:not([east]):not([west]):not([north]):after, [bubb][round][west][left]:after {
 53 |     border-radius: 30px 0 30px 30px !important; }
 54 |   [bubb][large]:after {
 55 |     font-size: 20px !important; }
 56 |   [bubb]:not([east]):not([west]):not([north]):before, [bubb]:not([east]):not([west]):not([north]):after {
 57 |     left: 50%; }
 58 |   [bubb]:not([east]):not([west]):not([north]):before {
 59 |     transform: translate(-50%, calc( 10px + .065rem + 4px + 20px)); }
 60 |   [bubb]:not([east]):not([west]):not([north]):after {
 61 |     transform: translate(-50%, calc( 100% + 10px + 4px + 20px)); }
 62 |   [bubb]:not([east]):not([west]):not([north]):hover:before {
 63 |     transform: translate(-50%, calc( 10px + .065rem + 4px)); }
 64 |   [bubb]:not([east]):not([west]):not([north]):hover:after {
 65 |     transform: translate(-50%, calc( 100% + 10px + 4px)); }
 66 |   [bubb]:not([east]):not([west]):not([north])[left]:before, [bubb]:not([east]):not([west]):not([north])[right]:before {
 67 |     transform: translate(0, calc( 10px + .065rem + 4px + 20px)); }
 68 |   [bubb]:not([east]):not([west]):not([north])[left]:after, [bubb]:not([east]):not([west]):not([north])[right]:after {
 69 |     transform: translate(0, calc( 100% + 10px + 4px + 20px)); }
 70 |   [bubb]:not([east]):not([west]):not([north])[left]:hover:before, [bubb]:not([east]):not([west]):not([north])[right]:hover:before {
 71 |     transform: translate(0, calc( 10px + .065rem + 4px)); }
 72 |   [bubb]:not([east]):not([west]):not([north])[left]:hover:after, [bubb]:not([east]):not([west]):not([north])[right]:hover:after {
 73 |     transform: translate(0, calc( 100% + 10px + 4px)); }
 74 |   [bubb]:not([east]):not([west]):not([north])[left]:before, [bubb]:not([east]):not([west]):not([north])[left]:after {
 75 |     left: 0; }
 76 |   [bubb]:not([east]):not([west]):not([north])[left]:before {
 77 |     border-left: none; }
 78 |   [bubb]:not([east]):not([west]):not([north])[left]:after {
 79 |     border-radius: 0 5px 5px 5px; }
 80 |   [bubb]:not([east]):not([west]):not([north])[right]:before, [bubb]:not([east]):not([west]):not([north])[right]:after {
 81 |     left: auto;
 82 |     right: 0; }
 83 |   [bubb]:not([east]):not([west]):not([north])[right]:before {
 84 |     border-right: none; }
 85 |   [bubb]:not([east]):not([west]):not([north])[right]:after {
 86 |     border-radius: 5px 0 5px 5px; }
 87 |   [bubb][north]:before, [bubb][north]:after {
 88 |     left: 50%;
 89 |     top: 0;
 90 |     bottom: auto; }
 91 |   [bubb][north]:before {
 92 |     border-bottom: none;
 93 |     border-top: 10px solid #444;
 94 |     border-left-color: transparent;
 95 |     border-right-color: transparent;
 96 |     transform: translate(-50%, calc( -10px - .065rem - 4px - 20px)); }
 97 |   [bubb][north]:after {
 98 |     transform: translate(-50%, calc( -100% - 10px - 4px - 20px)); }
 99 |   [bubb][north]:hover:before {
100 |     transform: translate(-50%, calc( -10px - .065rem - 4px)); }
101 |   [bubb][north]:hover:after {
102 |     transform: translate(-50%, calc( -100% - 10px - 4px)); }
103 |   [bubb][north][left]:before, [bubb][north][right]:before {
104 |     transform: translate(0, calc( -10px - .065rem - 4px - 20px)); }
105 |   [bubb][north][left]:after, [bubb][north][right]:after {
106 |     transform: translate(0, calc( -100% - 10px - 4px - 20px)); }
107 |   [bubb][north][left]:hover:before, [bubb][north][right]:hover:before {
108 |     transform: translate(0, calc( -10px - .065rem - 4px)); }
109 |   [bubb][north][left]:hover:after, [bubb][north][right]:hover:after {
110 |     transform: translate(0, calc( -100% - 10px - 4px)); }
111 |   [bubb][north][left]:before, [bubb][north][left]:after {
112 |     left: 0;
113 |     top: 0;
114 |     bottom: auto; }
115 |   [bubb][north][left]:before {
116 |     border-left: none; }
117 |   [bubb][north][left]:after {
118 |     border-radius: 5px 5px 5px 0; }
119 |   [bubb][north][right]:before, [bubb][north][right]:after {
120 |     left: auto;
121 |     right: 0;
122 |     top: 0;
123 |     bottom: auto; }
124 |   [bubb][north][right]:before {
125 |     border-right: none; }
126 |   [bubb][north][right]:after {
127 |     border-radius: 5px 5px 0 5px; }
128 |   [bubb][east]:before, [bubb][east]:after {
129 |     left: auto;
130 |     right: 0;
131 |     top: 50%;
132 |     bottom: auto; }
133 |   [bubb][east]:before {
134 |     border-left: none;
135 |     border-right-color: #444; }
136 |   [bubb][east]:before {
137 |     border-top: 10px solid transparent;
138 |     border-bottom-color: transparent;
139 |     transform: translate(calc( 10px + .065rem + 4px + 20px), -50%); }
140 |   [bubb][east]:after {
141 |     transform: translate(calc( 100% + 10px + 4px + 20px), -50%); }
142 |   [bubb][east]:hover:before {
143 |     transform: translate(calc( 10px + .065rem + 4px), -50%); }
144 |   [bubb][east]:hover:after {
145 |     transform: translate(calc( 100% + 10px + 4px), -50%); }
146 |   [bubb][east][left]:before {
147 |     border-top: none;
148 |     border-bottom-color: transparent;
149 |     transform: translate(calc( 10px + .065rem + 4px + 20px), 0); }
150 |   [bubb][east][left]:after {
151 |     border-radius: 0 5px 5px 5px;
152 |     transform: translate(calc( 100% + 10px + 4px + 20px), 0); }
153 |   [bubb][east][left]:hover:before {
154 |     transform: translate(calc( 10px + .065rem + 4px), 0); }
155 |   [bubb][east][left]:hover:after {
156 |     transform: translate(calc( 100% + 10px + 4px), 0); }
157 |   [bubb][east][right]:before {
158 |     border-top: 10px solid transparent;
159 |     border-bottom: none;
160 |     transform: translate(calc( 10px + .065rem + 4px + 20px), -100%); }
161 |   [bubb][east][right]:after {
162 |     border-radius: 5px 5px 5px 0;
163 |     transform: translate(calc( 100% + 10px + 4px + 20px), -100%); }
164 |   [bubb][east][right]:hover:before {
165 |     transform: translate(calc( 10px + .065rem + 4px), -100%); }
166 |   [bubb][east][right]:hover:after {
167 |     transform: translate(calc( 100% + 10px + 4px), -100%); }
168 |   [bubb][west]:before, [bubb][west]:after {
169 |     left: 0;
170 |     right: auto;
171 |     top: 50%;
172 |     bottom: auto; }
173 |   [bubb][west]:before {
174 |     border-right: none;
175 |     border-top: 10px solid transparent;
176 |     border-bottom-color: transparent;
177 |     border-left-color: #444; }
178 |   [bubb][west]:before {
179 |     transform: translate(calc( -10px - .065rem - 4px - 20px), -50%); }
180 |   [bubb][west]:after {
181 |     transform: translate(calc( -100% - 10px - 4px - 20px), -50%); }
182 |   [bubb][west]:hover:before {
183 |     transform: translate(calc( -10px - .065rem - 4px), -50%); }
184 |   [bubb][west]:hover:after {
185 |     transform: translate(calc( -100% - 10px - 4px), -50%); }
186 |   [bubb][west][left]:before {
187 |     border-top: none;
188 |     transform: translate(calc( -10px - .065rem - 4px - 20px), 0); }
189 |   [bubb][west][left]:after {
190 |     border-radius: 5px 0 5px 5px;
191 |     transform: translate(calc( -100% - 10px - 4px - 20px), 0); }
192 |   [bubb][west][left]:hover:before {
193 |     transform: translate(calc( -10px - .065rem - 4px), 0); }
194 |   [bubb][west][left]:hover:after {
195 |     transform: translate(calc( -100% - 10px - 4px), 0); }
196 |   [bubb][west][right]:before {
197 |     border-bottom: none;
198 |     transform: translate(calc( -10px - .065rem - 4px - 20px), -100%); }
199 |   [bubb][west][right]:after {
200 |     border-radius: 5px 5px 0 5px;
201 |     transform: translate(calc( -100% - 10px - 4px - 20px), -100%); }
202 |   [bubb][west][right]:hover:before {
203 |     transform: translate(calc( -10px - .065rem - 4px), -100%); }
204 |   [bubb][west][right]:hover:after {
205 |     transform: translate(calc( -100% - 10px - 4px), -100%); }
206 | 


--------------------------------------------------------------------------------
/docs/assets/demo.min.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | @font-face {
  3 |   font-family: 'Walsheim';
  4 |   font-weight: bold;
  5 |   font-style: bold;
  6 |   src: url("./fonts/gt-walsheim-bold-web.ttf"); }
  7 | 
  8 | @font-face {
  9 |   font-family: 'Walsheim';
 10 |   font-weight: normal;
 11 |   font-style: normal;
 12 |   src: url("./fonts/gt-walsheim-light-web.ttf"); }
 13 | 
 14 | * {
 15 |   text-rendering: optimizeLegibility;
 16 |   -webkit-font-smoothing: antialiased;
 17 |   -moz-osx-font-smoothing: grayscale; }
 18 | 
 19 | html {
 20 |   overflow-y: scroll; }
 21 | 
 22 | body {
 23 |   padding: 0;
 24 |   margin: 0;
 25 |   background: #fff;
 26 |   color: #444;
 27 |   font-family: 'Walsheim', arial, sans-serif;
 28 |   font-weight: normal;
 29 |   font-size: 1.5em;
 30 |   line-height: 1;
 31 |   letter-spacing: .025rem;
 32 |   position: relative;
 33 |   min-height: 100vh;
 34 |   box-sizing: border-box;
 35 |   max-width: 100vw;
 36 |   overflow: hidden; }
 37 | 
 38 | header {
 39 |   font-size: 1em;
 40 |   padding: 2.5em calc( (100vw - 720px) / 2);
 41 |   box-sizing: border-box;
 42 |   width: 100%;
 43 |   position: relative;
 44 |   display: block;
 45 |   background: #444;
 46 |   color: #fff; }
 47 |   header:last-of-type {
 48 |     background: #FFDEDE;
 49 |     color: #444; }
 50 |     header:last-of-type a {
 51 |       color: #444; }
 52 |       header:last-of-type a:hover {
 53 |         color: #4797B1; }
 54 |   header aside {
 55 |     margin-top: .75em; }
 56 |     header aside a {
 57 |       color: #F7F3CE;
 58 |       text-decoration: none;
 59 |       font-size: 50%;
 60 |       text-transform: uppercase;
 61 |       letter-spacing: 2px;
 62 |       margin: .5em .5em 0 0; }
 63 |       header aside a:hover {
 64 |         opacity: .75; }
 65 |       header aside a:before {
 66 |         content: '';
 67 |         max-height: 0;
 68 |         overflow: hidden;
 69 |         display: block; }
 70 |       header aside a.inline:before {
 71 |         content: ' | ';
 72 |         max-height: none;
 73 |         display: inline-block;
 74 |         opacity: .35;
 75 |         margin-right: .75em;
 76 |         font-size: 150%;
 77 |         position: relative;
 78 |         top: 4px; }
 79 |       header aside a.first {
 80 |         display: block;
 81 |         padding-top: 1em;
 82 |         margin-left: 0; }
 83 |   header i {
 84 |     font-style: normal;
 85 |     font-size: 50%;
 86 |     opacity: .65;
 87 |     position: relative;
 88 |     margin-right: -.75em; }
 89 |     header i:first-of-type {
 90 |       top: -.85em; }
 91 |     header i:last-of-type {
 92 |       left: -1.1em; }
 93 |   header b {
 94 |     font-weight: bold; }
 95 |   header span {
 96 |     float: right; }
 97 |   header:after {
 98 |     content: none;
 99 |     position: absolute;
100 |     width: 100vw;
101 |     height: 7.3em;
102 |     display: block;
103 |     background: rgba(0, 0, 0, 0.035);
104 |     top: -3.25em;
105 |     left: -7.5vw; }
106 | 
107 | code {
108 |   font-size: 70%;
109 |   overflow-x: scroll; }
110 |   code::-webkit-scrollbar {
111 |     width: 0px;
112 |     background: transparent; }
113 | 
114 | pre {
115 |   font-size: 16px;
116 |   opacity: .35;
117 |   transition: opacity .25s linear;
118 |   position: relative;
119 |   z-index: 0;
120 |   filter: grayscale(100%); }
121 |   pre:hover {
122 |     opacity: 1;
123 |     filter: grayscale(0%); }
124 | 
125 | .opaque pre {
126 |   opacity: 1;
127 |   filter: grayscale(0%);
128 |   padding: 0;
129 |   border: none;
130 |   font-size: 18px; }
131 | 
132 | section {
133 |   position: relative;
134 |   max-width: 720px;
135 |   margin: 0 auto;
136 |   padding: .5em 0 4em;
137 |   box-sizing: border-box;
138 |   display: block;
139 |   width: 90%; }
140 |   section:first-of-type {
141 |     padding: 0 0 4em; }
142 |     section:first-of-type .header {
143 |       font-weight: bold;
144 |       width: 100%;
145 |       height: 6em;
146 |       line-height: 6em;
147 |       text-decoration: none;
148 |       background: #F7F3CE;
149 |       display: block;
150 |       padding: 0 5%;
151 |       box-sizing: border-box;
152 |       text-transform: uppercase;
153 |       letter-spacing: 2px;
154 |       font-size: 11px;
155 |       color: #444;
156 |       margin-bottom: 4em;
157 |       white-space: nowrap; }
158 |   section > p {
159 |     font-size: 70%;
160 |     line-height: 1.3;
161 |     color: #888; }
162 |   section article {
163 |     position: relative; }
164 |     section article > p {
165 |       font-size: 70%;
166 |       line-height: 1.3;
167 |       color: #888; }
168 |     section article > span > div {
169 |       display: inline-block;
170 |       font-size: 95%;
171 |       margin-top: 1em;
172 |       padding-bottom: 2px;
173 |       border-bottom: 2px dotted #fad;
174 |       cursor: help;
175 |       position: static; }
176 |       section article > span > div:hover {
177 |         border-color: transparent; }
178 |     section article > span > i:after {
179 |       content: '⟵  :hover';
180 |       display: inline-block;
181 |       white-space: nowrap;
182 |       border-bottom: none;
183 |       margin-left: 12px;
184 |       font-size: 75%;
185 |       opacity: .35; }
186 |     section article > span > i.click:after {
187 |       content: '⟵  :click'; }
188 |     section article > div {
189 |       display: inline-block;
190 |       font-size: 95%;
191 |       margin-top: 1em;
192 |       padding-bottom: 2px;
193 |       border-bottom: 2px dotted #fad;
194 |       cursor: help;
195 |       position: static; }
196 |       section article > div:hover {
197 |         border-color: transparent; }
198 |     section article > i:after {
199 |       content: '⟵  :hover';
200 |       display: inline-block;
201 |       white-space: nowrap;
202 |       border-bottom: none;
203 |       margin-left: 12px;
204 |       font-size: 75%;
205 |       opacity: .35; }
206 |     section article > i.click:after {
207 |       content: '⟵  :click'; }
208 | 
209 | footer {
210 |   background: #F7F3CE;
211 |   display: block;
212 |   position: relative;
213 |   height: 4.5em;
214 |   width: 100%;
215 |   line-height: 4.5em; }
216 |   footer a {
217 |     position: absolute;
218 |     top: 0;
219 |     left: calc( (100vw - 720px) / 2);
220 |     text-transform: uppercase;
221 |     letter-spacing: 2px;
222 |     font-size: 11px;
223 |     text-decoration: none;
224 |     font-weight: bold;
225 |     color: #444;
226 |     /*
227 |     &:last-of-type {
228 |       left: auto;
229 |       right: calc( (100vw - 720px) / 2 );
230 |       &:before {
231 |         content: 'Download Bubb on';
232 |       }
233 |     }
234 |     */ }
235 |     footer a:before {
236 |       display: inline-block;
237 |       font-weight: normal;
238 |       margin-right: 6px;
239 |       content: 'By'; }
240 | 
241 | #eventsDisplay {
242 |   background: rgba(15, 241, 206, 0.7);
243 |   padding: 0 7.5vw;
244 |   box-sizing: border-box;
245 |   line-height: 100vh;
246 |   height: 100vh;
247 |   width: 100vw;
248 |   font-size: 65%;
249 |   font-style: normal;
250 |   text-transform: uppercase;
251 |   text-align: center;
252 |   letter-spacing: 2px;
253 |   position: fixed;
254 |   top: 0;
255 |   right: 0;
256 |   pointer-events: none;
257 |   z-index: 9999999; }
258 |   #eventsDisplay[color="0"] {
259 |     background: rgba(255, 222, 222, 0.6); }
260 |   #eventsDisplay[color="1"] {
261 |     background: rgba(247, 243, 206, 0.6); }
262 |   #eventsDisplay[color="2"] {
263 |     background: rgba(197, 236, 190, 0.6); }
264 |   #eventsDisplay[color="3"] {
265 |     background: rgba(71, 151, 177, 0.6); }
266 |   #eventsDisplay[color="4"] {
267 |     background: rgba(84, 101, 107, 0.6); }
268 |   #eventsDisplay:empty {
269 |     visibility: hidden; }
270 | 
271 | .wait {
272 |   opacity: 0;
273 |   transition: opacity .25s linear; }
274 |   .done .wait {
275 |     opacity: 1; }
276 | 
277 | section ul {
278 |   font-size: 70%;
279 |   list-style: none;
280 |   color: #888;
281 |   padding-left: 50px;
282 |   line-height: 1.2;
283 |   padding-top: .75em; }
284 |   section ul li {
285 |     margin-bottom: inherit;
286 |     position: relative; }
287 |     section ul li:before {
288 |       position: absolute;
289 |       top: .6em;
290 |       height: 1px;
291 |       width: 35px;
292 |       left: -50px;
293 |       background: #888;
294 |       display: block;
295 |       content: ''; }
296 |     section ul li u {
297 |       text-decoration: none;
298 |       display: block;
299 |       font-weight: bold;
300 |       padding-bottom: 1px; }
301 |   section ul:last-of-type li u {
302 |     display: inline-block;
303 |     margin-right: .5em; }
304 | 
305 | hr {
306 |   margin: 2.5em 0 1em;
307 |   opacity: .25; }
308 |   section:last-of-type hr {
309 |     margin: 2em 0 1em; }
310 |     section:last-of-type hr:last-of-type {
311 |       margin: 1.5em 0; }
312 | 
313 | .bubble-bobble {
314 |   width: 44px;
315 |   height: 44px;
316 |   background: url(/assets/images/bubble_bobble.png);
317 |   background-repeat: no-repeat;
318 |   background-size: 100%;
319 |   position: fixed;
320 |   bottom: 1em;
321 |   right: 1em; }
322 |   .bubble-bobble:hover {
323 |     background-position: 0 100%; }
324 | 
325 | ul.share-buttons {
326 |   list-style: none;
327 |   padding: 0;
328 |   margin: .75em 0 0; }
329 |   ul.share-buttons.device {
330 |     background: #444;
331 |     padding: 2em 0;
332 |     text-align: center; }
333 | 
334 | ul.share-buttons li {
335 |   display: inline; }
336 |   ul.share-buttons li:before {
337 |     content: none; }
338 |   ul.share-buttons li:hover img {
339 |     opacity: .75; }
340 |   ul.share-buttons li img {
341 |     min-width: 32px;
342 |     min-height: 32px;
343 |     max-width: 32px;
344 |     margin: 0 4px;
345 |     display: inline-block; }
346 | 
347 | ul.share-buttons .sr-only {
348 |   position: absolute;
349 |   clip: rect(1px 1px 1px 1px);
350 |   clip: rect(1px, 1px, 1px, 1px);
351 |   padding: 0;
352 |   border: 0;
353 |   height: 1px;
354 |   width: 1px;
355 |   overflow: hidden; }
356 | 
357 | device {
358 |   display: none; }
359 | 
360 | #toggle {
361 |   float: left;
362 |   width: 50%; }
363 | 
364 | #toggler {
365 |   float: right;
366 |   width: 50%;
367 |   text-align: right;
368 |   -webkit-touch-callout: none;
369 |   -webkit-user-select: none;
370 |   -khtml-user-select: none;
371 |   -moz-user-select: none;
372 |   -ms-user-select: none;
373 |   user-select: none; }
374 |   #toggler pre {
375 |     visibility: hidden; }
376 | 
377 | #added {
378 |   display: block;
379 |   width: 100%;
380 |   clear: both; }
381 | 
382 | #all-directions {
383 |   position: absolute;
384 |   top: 100px;
385 |   right: 0;
386 |   width: 80px;
387 |   height: 78px;
388 |   border: none;
389 |   background: transparent;
390 |   border-radius: 50%;
391 |   background-image: url(images/cirque.svg);
392 |   background-repeat: no-repeat; }
393 |   #all-directions > div {
394 |     display: inline-block;
395 |     z-index: 1;
396 |     position: absolute;
397 |     width: auto;
398 |     height: auto;
399 |     cursor: crosshair; }
400 |     #all-directions > div:after {
401 |       content: '';
402 |       background: rgba(255, 255, 255, 0.8);
403 |       min-width: 24px;
404 |       min-height: 30px;
405 |       position: absolute;
406 |       transition: background .25s ease; }
407 |     #all-directions > div:hover:after {
408 |       background: rgba(255, 255, 255, 0); }
409 |     #all-directions > div.n:nth-child(1) {
410 |       top: 7.5%;
411 |       left: 25%; }
412 |       #all-directions > div.n:nth-child(1):after {
413 |         transform: translate(-50%, -50%) rotate(-30deg); }
414 |     #all-directions > div.n:nth-child(2) {
415 |       z-index: 9;
416 |       top: 0;
417 |       left: 50%; }
418 |       #all-directions > div.n:nth-child(2):after {
419 |         transform: translate(-50%, -50%); }
420 |     #all-directions > div.n:nth-child(3) {
421 |       top: 7.5%;
422 |       left: 75%; }
423 |       #all-directions > div.n:nth-child(3):after {
424 |         transform: translate(-50%, -50%) rotate(30deg); }
425 |     #all-directions > div.e:nth-child(4) {
426 |       right: 7.5%;
427 |       top: 25%; }
428 |       #all-directions > div.e:nth-child(4):after {
429 |         transform: translate(-50%, -50%) rotate(60deg); }
430 |     #all-directions > div.e:nth-child(5) {
431 |       right: 0;
432 |       top: 50%; }
433 |       #all-directions > div.e:nth-child(5):after {
434 |         transform: translate(-50%, -50%) rotate(90deg); }
435 |     #all-directions > div.e:nth-child(6) {
436 |       right: 7.5%;
437 |       top: 75%; }
438 |       #all-directions > div.e:nth-child(6):after {
439 |         transform: translate(-50%, -50%) rotate(120deg); }
440 |     #all-directions > div.s:nth-child(7) {
441 |       bottom: 7.5%;
442 |       left: 25%; }
443 |       #all-directions > div.s:nth-child(7):after {
444 |         transform: translate(-50%, -50%) rotate(30deg); }
445 |     #all-directions > div.s:nth-child(8) {
446 |       z-index: 9;
447 |       bottom: 0;
448 |       left: 50%; }
449 |       #all-directions > div.s:nth-child(8):after {
450 |         transform: translate(-50%, -50%); }
451 |     #all-directions > div.s:nth-child(9) {
452 |       bottom: 7.5%;
453 |       left: 75%; }
454 |       #all-directions > div.s:nth-child(9):after {
455 |         transform: translate(-50%, -50%) rotate(-30deg); }
456 |     #all-directions > div.w:nth-child(10) {
457 |       left: 7.5%;
458 |       top: 25%; }
459 |       #all-directions > div.w:nth-child(10):after {
460 |         transform: translate(-50%, -50%) rotate(120deg); }
461 |     #all-directions > div.w:nth-child(11) {
462 |       left: 0;
463 |       top: 50%; }
464 |       #all-directions > div.w:nth-child(11):after {
465 |         transform: translate(-50%, -50%) rotate(90deg); }
466 |     #all-directions > div.w:nth-child(12) {
467 |       left: 7.5%;
468 |       top: 75%; }
469 |       #all-directions > div.w:nth-child(12):after {
470 |         transform: translate(-50%, -50%) rotate(60deg); }
471 |   #all-directions > span {
472 |     position: absolute;
473 |     width: 0;
474 |     height: 0;
475 |     background: pink;
476 |     left: 50%;
477 |     top: 50%;
478 |     transform: rotate(0deg);
479 |     transition: all .25s ease;
480 |     opacity: 1;
481 |     /*
482 |       > i {
483 |           position: absolute;
484 |           width:0;
485 |           height: 0;
486 |           border-left: 8px solid transparent;
487 |           border-right: 8px solid transparent;
488 |           border-bottom: 20px solid #444;
489 |           border-top: none;
490 |           left: 50%;
491 |           top: 50%;
492 |           transform: translate(-50%, -60%);
493 |       }
494 |       */ }
495 |     #all-directions > span > i img {
496 |       position: absolute;
497 |       width: 35px;
498 |       height: 35px;
499 |       left: 50%;
500 |       top: 50%;
501 |       transform: translate(-50%, -50%); }
502 |   #all-directions:hover > span {
503 |     opacity: 1; }
504 | 
505 | /*
506 | --- bubb modifiers
507 | */
508 | .bubb {
509 |   -webkit-touch-callout: none;
510 |   -webkit-user-select: none;
511 |   -khtml-user-select: none;
512 |   -moz-user-select: none;
513 |   -ms-user-select: none;
514 |   user-select: none; }
515 |   .bubb p {
516 |     padding: 0;
517 |     margin: 0; }
518 |   .bubb b {
519 |     font-weight: bold;
520 |     letter-spacing: 1px;
521 |     font-size: 90%; }
522 | 
523 | .bubb img {
524 |   max-width: 100%;
525 |   display: block;
526 |   margin: 0 auto .5em; }
527 | 
528 | .bubb-menu bubb-bobb {
529 |   padding: 0 !important;
530 |   background: #FFDEDE !important;
531 |   border-bottom-color: #FFDEDE !important;
532 |   color: #444 !important; }
533 |   .bubb-menu bubb-bobb div {
534 |     padding: .75em 0;
535 |     text-transform: uppercase;
536 |     letter-spacing: 2px;
537 |     font-size: 12px;
538 |     font-weight: bold;
539 |     transition: background 0.3s cubic-bezier(0, 0, 0, 0.75);
540 |     cursor: pointer; }
541 |     .bubb-menu bubb-bobb div:first-child {
542 |       padding-top: 1em; }
543 |     .bubb-menu bubb-bobb div:hover {
544 |       text-decoration: line-through; }
545 |   .bubb-menu bubb-bobb div:nth-child(2) {
546 |     background: #F7F3CE;
547 |     color: #444; }
548 |   .bubb-menu bubb-bobb div:nth-child(3) {
549 |     background: #C5ECBE;
550 |     color: #444; }
551 |   .bubb-menu bubb-bobb div:nth-child(4) {
552 |     background: #4797B1;
553 |     color: #fff; }
554 |   .bubb-menu bubb-bobb div:nth-child(5) {
555 |     background: #54656b;
556 |     border-radius: 0 0 4px 4px;
557 |     color: #fff; }
558 | 
559 | .tipcolor {
560 |   border-bottom-color: #FFDEDE !important; }
561 | 
562 | @media all and (max-width: 550px) {
563 |   hide {
564 |     display: none; }
565 |   device {
566 |     display: block; }
567 |   body {
568 |     font-size: 5vw;
569 |     padding-bottom: 0; }
570 |   header, footer {
571 |     padding: 1.5em; }
572 |   section {
573 |     text-align: center;
574 |     padding: 4em 1.5em; }
575 |   section > span {
576 |     display: block; }
577 |   section i {
578 |     display: none; }
579 |   section:first-of-type .header {
580 |     margin-bottom: 3em;
581 |     position: relative;
582 |     left: -5vw;
583 |     width: 100vw;
584 |     text-align: center;
585 |     font-size: 50%; }
586 |     section:first-of-type .header.download {
587 |       background: #C5ECBE;
588 |       margin-bottom: 0; }
589 |     section:first-of-type .header.info {
590 |       background: #FFDEDE;
591 |       margin-bottom: 0; }
592 |     section:first-of-type .header.image {
593 |       height: auto;
594 |       padding: 0;
595 |       margin: 0;
596 |       display: block; }
597 |   section:last-of-type {
598 |     padding: 1.35em 0; }
599 |   section > p, section ul {
600 |     font-size: 70%; }
601 |   section ul {
602 |     padding-left: 0; }
603 |     section ul li:before {
604 |       content: none; }
605 |   footer {
606 |     position: static;
607 |     text-align: center;
608 |     padding: 2em 0 4em;
609 |     line-height: 1.2; }
610 |     footer a {
611 |       position: static; }
612 |   header {
613 |     font-size: 1.25em; }
614 |     header aside a {
615 |       line-height: 1.5;
616 |       font-size: 35%; }
617 |       header aside a.inline:before {
618 |         content: ''; }
619 |       header aside a.first {
620 |         display: inline-block; }
621 |   pre {
622 |     display: none; }
623 |   .opaque pre {
624 |     display: block;
625 |     text-align: left;
626 |     opacity: 1;
627 |     filter: none;
628 |     font-size: 80%;
629 |     padding: 1em 10% 0; }
630 |   .bubble-bobble {
631 |     width: 32px;
632 |     height: 32px;
633 |     background-size: 32px; }
634 |     .bubble-bobble:hover {
635 |       background-position: 0 -32px; }
636 |   #all-directions {
637 |     display: none; } }
638 | 


--------------------------------------------------------------------------------
/docs/assets/images/bubb.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frdnrdb/bubb/ea009ac3037d000b9f5a6c4fd0d78d18b5708cec/docs/assets/images/bubb.gif


--------------------------------------------------------------------------------
/docs/assets/images/bubb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frdnrdb/bubb/ea009ac3037d000b9f5a6c4fd0d78d18b5708cec/docs/assets/images/bubb.png


--------------------------------------------------------------------------------
/docs/assets/images/bubb_720.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frdnrdb/bubb/ea009ac3037d000b9f5a6c4fd0d78d18b5708cec/docs/assets/images/bubb_720.gif


--------------------------------------------------------------------------------
/docs/assets/images/bubble_bobble.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frdnrdb/bubb/ea009ac3037d000b9f5a6c4fd0d78d18b5708cec/docs/assets/images/bubble_bobble.png


--------------------------------------------------------------------------------
/docs/assets/images/circle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frdnrdb/bubb/ea009ac3037d000b9f5a6c4fd0d78d18b5708cec/docs/assets/images/circle.png


--------------------------------------------------------------------------------
/docs/assets/images/circle.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#002A4A;}
 7 | </style>
 8 | <path class="st0" d="M66.8,10.4c-4.2-3.8-9.1-6.7-14.6-8.5l-1.4,5.4c4.6,1.5,8.7,3.9,12.2,7L66.8,10.4z M79,31.5l-5.2,1.4
 9 | 	c0.5,2.3,0.7,4.6,0.7,7.1c0,2.4-0.3,4.8-0.7,7.1l5.2,1.4c0.6-2.7,0.9-5.6,0.9-8.5C79.9,37,79.6,34.2,79,31.5z M72.7,29.2l5.4-1.4
10 | 	c-1.8-5.5-4.7-10.5-8.5-14.6L65.6,17C68.8,20.5,71.2,24.6,72.7,29.2z M50.7,72.6l1.4,5.4c5.5-1.8,10.4-4.7,14.6-8.5l-3.9-3.9
11 | 	C59.4,68.7,55.3,71.1,50.7,72.6z M13.2,69.5c4.2,3.8,9.1,6.7,14.6,8.5l1.4-5.4c-4.6-1.5-8.7-3.9-12.2-7L13.2,69.5z M13.2,10.4
12 | 	l3.9,3.9c3.5-3.1,7.6-5.5,12.2-7l-1.4-5.4C22.3,3.7,17.4,6.6,13.2,10.4z M5.5,39.9c0-2.4,0.3-4.8,0.7-7.1L1,31.5
13 | 	c-0.6,2.7-0.9,5.6-0.9,8.5c0,2.9,0.3,5.7,0.9,8.5L6.2,47C5.7,44.7,5.5,42.4,5.5,39.9z M40,74.5c-2.4,0-4.8-0.3-7.1-0.7L31.5,79
14 | 	c2.7,0.6,5.6,0.9,8.5,0.9c2.9,0,5.7-0.3,8.5-0.9l-1.4-5.2C44.8,74.2,42.4,74.5,40,74.5z M40,5.4c2.4,0,4.8,0.3,7.1,0.7l1.4-5.2
15 | 	C45.7,0.3,42.9,0,40,0c-2.9,0-5.7,0.3-8.5,0.9l1.4,5.2C35.2,5.7,37.6,5.4,40,5.4z M65.6,62.9l3.9,3.9c3.8-4.2,6.7-9.1,8.5-14.6
16 | 	l-5.4-1.4C71.2,55.2,68.8,59.4,65.6,62.9z M7.3,50.7L2,52.1c1.8,5.5,4.7,10.5,8.5,14.6l3.9-3.9C11.2,59.4,8.8,55.2,7.3,50.7z
17 | 	 M14.4,17l-3.9-3.9c-3.8,4.2-6.8,9.2-8.5,14.7l5.4,1.4C8.8,24.7,11.2,20.5,14.4,17z"/>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/docs/assets/images/cirque.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#444444;}
 7 | </style>
 8 | <path class="st0" d="M1.9,27.8l2.4,0.6c1.6-5.1,4.3-9.7,7.8-13.6l-1.7-1.7C6.7,17.3,3.7,22.3,1.9,27.8z M40,2.5
 9 | 	c2.7,0,5.3,0.3,7.8,0.8l0.6-2.4C45.7,0.3,42.9,0,40,0c-2.9,0-5.7,0.3-8.5,0.9l0.6,2.4C34.7,2.8,37.3,2.5,40,2.5z M2.5,39.9
10 | 	c0-2.7,0.3-5.3,0.8-7.8L1,31.5c-0.6,2.7-0.9,5.6-0.9,8.5c0,2.9,0.3,5.7,0.9,8.5l2.4-0.6C2.8,45.2,2.5,42.6,2.5,39.9z M78,27.8
11 | 	c-1.8-5.5-4.7-10.5-8.5-14.6l-1.7,1.7c3.5,3.9,6.2,8.5,7.8,13.5L78,27.8z M51.5,4.3c5.1,1.6,9.7,4.3,13.6,7.8l1.7-1.7
12 | 	c-4.2-3.8-9.1-6.7-14.6-8.5L51.5,4.3z M13.2,10.4l1.7,1.7c3.9-3.5,8.5-6.2,13.6-7.8l-0.6-2.4C22.3,3.7,17.4,6.6,13.2,10.4z
13 | 	 M51.5,75.6l0.6,2.4c5.5-1.8,10.4-4.7,14.6-8.5l-1.7-1.7C61.2,71.2,56.6,73.9,51.5,75.6z M2,52.1c1.8,5.5,4.7,10.5,8.5,14.6l1.7-1.7
14 | 	C8.7,61.2,6,56.6,4.4,51.5L2,52.1z M79,31.5l-2.4,0.6c0.5,2.5,0.8,5.1,0.8,7.8c0,2.7-0.3,5.3-0.8,7.8l2.4,0.6
15 | 	c0.6-2.7,0.9-5.6,0.9-8.5C79.9,37,79.6,34.2,79,31.5z M67.8,65l1.7,1.7c3.8-4.2,6.7-9.1,8.5-14.6l-2.4-0.6
16 | 	C74,56.6,71.3,61.2,67.8,65z M40,77.4c-2.7,0-5.3-0.3-7.8-0.8L31.5,79c2.7,0.6,5.6,0.9,8.5,0.9c2.9,0,5.7-0.3,8.5-0.9l-0.6-2.4
17 | 	C45.3,77.1,42.7,77.4,40,77.4z M13.2,69.5c4.2,3.8,9.1,6.7,14.6,8.5l0.6-2.4c-5.1-1.6-9.7-4.3-13.6-7.8L13.2,69.5z"/>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/docs/assets/images/ghost.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frdnrdb/bubb/ea009ac3037d000b9f5a6c4fd0d78d18b5708cec/docs/assets/images/ghost.png


--------------------------------------------------------------------------------
/docs/assets/images/icons/color/facebook.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 5 | <path style="fill:#4D6FA9;" d="M476.69,512H35.31C15.89,512,0,496.11,0,476.69V35.31C0,15.89,15.89,0,35.31,0H476.69
 6 | 	C496.11,0,512,15.89,512,35.31V476.69C512,496.11,496.11,512,476.69,512"/>
 7 | <path style="fill:#FFFFFF;" d="M432.552,88.276v88.276h-79.448c-9.71,0-17.655,7.945-17.655,17.655v52.966h88.276v88.276h-88.276
 8 | 	V512h-88.276V335.448h-70.621v-88.276h70.621v-52.966c0-55.614,42.372-101.517,97.103-105.931H432.552z"/>
 9 | <g>
10 | </g>
11 | <g>
12 | </g>
13 | <g>
14 | </g>
15 | <g>
16 | </g>
17 | <g>
18 | </g>
19 | <g>
20 | </g>
21 | <g>
22 | </g>
23 | <g>
24 | </g>
25 | <g>
26 | </g>
27 | <g>
28 | </g>
29 | <g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | </svg>
40 | 


--------------------------------------------------------------------------------
/docs/assets/images/icons/color/reddit.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 510.644 510.644" style="enable-background:new 0 0 510.644 510.644;" xml:space="preserve">
 5 | <g transform="translate(0 1)">
 6 | 	<path style="fill:#FF5D00;" d="M254.02,84.424c-40.786,0.868-81.573,16.488-111.078,34.712
 7 | 		c-6.942-6.942-17.356-10.414-27.769-10.414c-22.563,0-41.654,18.224-41.654,41.654c0,14.753,7.81,28.637,19.959,35.58
 8 | 		c-0.868,3.471-0.868,7.81-0.868,12.149c0,29.505,17.356,57.275,48.597,78.102c10.414,6.942,20.827,12.149,32.976,16.488
 9 | 		c-23.431,11.281-39.919,38.183-39.919,69.424c0,35.58,20.827,65.085,48.597,72.895c2.603,6.942,4.339,13.017,6.942,19.092
10 | 		c-0.868,0-2.603,0-3.471,0c-25.166,0-46.861,17.356-46.861,38.183c0,3.471,0.868,8.678,1.736,13.017
11 | 		c2.603,2.603,5.207,4.339,8.678,4.339h210.007c3.471,0,6.075-1.736,6.942-5.207c0.868-3.471,0-9.546,0-12.149
12 | 		c0-20.827-18.224-38.183-43.39-38.183c-0.868,0-1.736,0-2.603,0c2.603-6.075,5.207-13.017,6.942-19.092
13 | 		c27.77-7.81,48.597-37.315,48.597-72.895c0-31.241-16.488-58.142-39.919-69.424c12.149-4.339,22.563-10.414,32.976-16.488
14 | 		c31.241-20.827,48.597-48.597,48.597-78.102c0-4.339,0-7.81-0.868-12.149c12.149-6.942,19.959-20.827,19.959-35.58
15 | 		c0-22.563-18.224-41.654-41.654-41.654c-10.414,0-19.959,4.339-27.77,10.414C340.8,101.78,301.749,86.16,262.698,84.424H254.02
16 | 		L254.02,84.424z"/>
17 | 	<g>
18 | 		<path style="fill:#FFFFFF;" d="M227.987,179.882c0-14.753-11.281-26.034-26.034-26.034s-26.034,11.281-26.034,26.034
19 | 			s11.281,26.034,26.034,26.034C216.705,205.915,227.987,194.634,227.987,179.882"/>
20 | 		<path style="fill:#FFFFFF;" d="M332.122,179.882c0-14.753-11.281-26.034-26.034-26.034c-14.753,0-26.034,11.281-26.034,26.034
21 | 			s11.281,26.034,26.034,26.034C320.841,205.915,332.122,194.634,332.122,179.882"/>
22 | 		<path style="fill:#FFFFFF;" d="M254.02,266.661c-23.431,0-45.993-7.81-58.142-19.959c-3.471-3.471-3.471-8.678,0-12.149
23 | 			c3.471-3.471,8.678-3.471,12.149,0c6.942,6.942,22.563,14.753,45.993,14.753s39.051-7.81,45.993-14.753
24 | 			c3.471-3.471,8.678-3.471,12.149,0c3.471,3.471,3.471,8.678,0,12.149C300.014,258.851,277.451,266.661,254.02,266.661z"/>
25 | 	</g>
26 | 	<g>
27 | 		<path style="fill:#FF5D00;" d="M254.02,93.102c-0.868,0-1.736,0-2.603,0c-4.339-1.736-6.942-6.075-6.075-10.414l21.695-72.895
28 | 			c2.603-7.81,10.414-12.149,18.224-10.414l61.614,17.356c4.339,1.736,6.942,6.075,6.075,10.414
29 | 			c-1.736,4.339-6.075,6.942-10.414,6.075l-59.01-17.356l-20.827,71.159C260.963,90.499,257.492,93.102,254.02,93.102z"/>
30 | 		<path style="fill:#FF5D00;" d="M410.224,41.034c0-19.092-15.62-34.712-34.712-34.712c-19.092,0-34.712,15.62-34.712,34.712
31 | 			s15.62,34.712,34.712,34.712C394.604,75.746,410.224,60.126,410.224,41.034"/>
32 | 	</g>
33 | 	<path style="fill:#FFFFFF;" d="M268.773,466.254h-26.034c-23.431-13.885-40.786-57.275-40.786-110.21
34 | 		c0-12.149,0.868-24.298,2.603-35.58c15.62,4.339,32.976,6.942,51.2,6.942s34.712-2.603,51.2-6.942
35 | 		c1.736,11.281,2.603,23.431,2.603,35.58C309.559,408.98,292.203,452.37,268.773,466.254"/>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | <g>
42 | </g>
43 | <g>
44 | </g>
45 | <g>
46 | </g>
47 | <g>
48 | </g>
49 | <g>
50 | </g>
51 | <g>
52 | </g>
53 | <g>
54 | </g>
55 | <g>
56 | </g>
57 | <g>
58 | </g>
59 | <g>
60 | </g>
61 | <g>
62 | </g>
63 | <g>
64 | </g>
65 | <g>
66 | </g>
67 | </svg>
68 | 


--------------------------------------------------------------------------------
/docs/assets/images/icons/color/twitter.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 511.537 511.537" style="enable-background:new 0 0 511.537 511.537;" xml:space="preserve">
 5 | <path style="fill:#65BBF2;" d="M357.038,49.172c-59.284,0.898-105.993,52.098-105.993,111.382v14.372
 6 | 	C145.052,156.063,92.954,127.319,35.466,67.137c-34.133,66.47,3.593,122.161,44.912,152.702c-27.846,0-51.2-3.593-69.165-19.761
 7 | 	c-1.796-0.898-3.593,0-2.695,1.797c15.27,55.691,67.368,96.112,107.789,107.789c-36.828,0-61.081,5.389-87.13-10.779
 8 | 	c-1.796-0.898-3.593,0-2.695,1.796c19.761,54.793,59.284,71.86,116.772,71.86c-28.744,21.558-67.368,43.116-140.126,44.912
 9 | 	c-2.695,0-4.491,3.593-1.796,5.389c26.947,22.456,93.418,39.523,186.835,39.523c153.6,0,278.456-136.533,278.456-305.404v-8.982
10 | 	c24.253-8.982,37.726-30.54,44.912-52.098c0-0.898-0.898-1.796-1.797-1.796l-51.2,17.965c-0.898,0-1.796-1.796-0.898-2.695
11 | 	C479.2,92.288,495.368,70.73,502.554,50.07c0,0-0.898-0.898-1.797-0.898c-24.253,9.881-47.607,19.761-65.572,25.151
12 | 	c-2.695,0.898-6.288,0.898-8.982-0.898C414.526,67.137,379.494,49.172,357.038,49.172"/>
13 | <g>
14 | </g>
15 | <g>
16 | </g>
17 | <g>
18 | </g>
19 | <g>
20 | </g>
21 | <g>
22 | </g>
23 | <g>
24 | </g>
25 | <g>
26 | </g>
27 | <g>
28 | </g>
29 | <g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | <g>
42 | </g>
43 | </svg>
44 | 


--------------------------------------------------------------------------------
/docs/assets/images/icons/facebook.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
 4 | <g transform="translate(1 1)">
 5 | 	<g>
 6 | 		<path d="M468.333-1H41.667C17.773-1-1,17.773-1,41.667v426.667C-1,492.227,17.773,511,41.667,511h196.267h102.4h128    C492.227,511,511,492.227,511,468.333V41.667C511,17.773,492.227-1,468.333-1z M255,493.933V323.267h-68.267V255H255v-59.733    c0-48.64,37.547-89.6,85.333-93.867h76.8v68.267h-68.267c-14.507,0-25.6,11.093-25.6,25.6V255H408.6v68.267h-85.333v170.667H255z     M493.933,468.333c0,14.507-11.093,25.6-25.6,25.6h-128v-153.6h85.333v-102.4h-85.333v-42.667c0-5.12,3.413-8.533,8.533-8.533    H434.2v-102.4h-94.72c-57.173,5.12-101.547,53.76-101.547,110.933v42.667h-68.267v102.4h68.267v153.6H41.667    c-14.507,0-25.6-11.093-25.6-25.6V41.667c0-14.507,11.093-25.6,25.6-25.6h426.667c14.507,0,25.6,11.093,25.6,25.6V468.333z" fill="#f7f3ce"/>
 7 | 	</g>
 8 | </g>
 9 | <g>
10 | </g>
11 | <g>
12 | </g>
13 | <g>
14 | </g>
15 | <g>
16 | </g>
17 | <g>
18 | </g>
19 | <g>
20 | </g>
21 | <g>
22 | </g>
23 | <g>
24 | </g>
25 | <g>
26 | </g>
27 | <g>
28 | </g>
29 | <g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | </svg>
40 | 


--------------------------------------------------------------------------------
/docs/assets/images/icons/fill/facebook.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 430.113 430.114" style="enable-background:new 0 0 430.113 430.114;" xml:space="preserve">
 5 | <g>
 6 | 	<path id="Facebook" d="M158.081,83.3c0,10.839,0,59.218,0,59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805   c0,0,5.601-34.721,8.316-72.685c-7.784,0-67.784,0-67.784,0s0-42.127,0-49.511c0-7.4,9.717-17.354,19.321-17.354   c9.586,0,29.818,0,48.557,0c0-9.859,0-43.924,0-75.385c-25.016,0-53.476,0-66.021,0C155.878-0.004,158.081,72.48,158.081,83.3z" fill="#f7f3ce"/>
 7 | </g>
 8 | <g>
 9 | </g>
10 | <g>
11 | </g>
12 | <g>
13 | </g>
14 | <g>
15 | </g>
16 | <g>
17 | </g>
18 | <g>
19 | </g>
20 | <g>
21 | </g>
22 | <g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | </svg>
39 | 


--------------------------------------------------------------------------------
/docs/assets/images/icons/fill/reddit.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 430.117 430.117" style="enable-background:new 0 0 430.117 430.117;" xml:space="preserve">
 5 | <g>
 6 | 	<path id="reddit" d="M307.523,231.062c1.11,2.838,1.614,5.769,1.614,8.681c0,5.862-2.025,11.556-5.423,16.204   c-3.36,4.593-8.121,8.158-13.722,9.727h0.01c-0.047,0.019-0.094,0.019-0.117,0.037c-0.023,0-0.061,0.019-0.079,0.019   c-2.623,0.896-5.312,1.316-7.98,1.316c-6.254,0-12.396-2.254-17.306-6.096c-4.872-3.826-8.56-9.324-9.717-15.845h-0.01   c0-0.019,0-0.042-0.009-0.069c0-0.019,0-0.038-0.019-0.065h0.019c-0.364-1.681-0.551-3.36-0.551-5.021   c0-5.647,1.923-11.07,5.097-15.551c3.164-4.453,7.626-7.99,12.848-9.811c0.019,0,0.038-0.01,0.038-0.01   c0.027,0,0.027-0.027,0.051-0.027c2.954-1.092,6.072-1.639,9.157-1.639c5.619,0,11.154,1.704,15.821,4.821   c4.611,3.066,8.354,7.561,10.23,13.143c0.019,0.037,0.019,0.07,0.037,0.103c0,0.037,0.019,0.057,0.037,0.084H307.523z    M290.329,300.349c-2.202-1.428-4.751-2.291-7.448-2.291c-2.175,0-4.434,0.621-6.445,1.955l0,0   c-19.004,11.342-41.355,17.558-63.547,17.558c-16.65,0-33.199-3.514-48.192-10.879l-0.077-0.037l-0.075-0.028   c-2.261-0.924-4.837-2.889-7.647-4.76c-1.428-0.925-2.919-1.844-4.574-2.521c-1.633-0.695-3.447-1.181-5.386-1.181   c-1.605,0-3.292,0.359-4.957,1.115c-0.086,0.033-0.168,0.065-0.252,0.098h0.009c-2.616,0.999-4.66,2.829-5.974,4.994   c-1.372,2.23-2.046,4.826-2.046,7.411c0,2.334,0.551,4.667,1.691,6.786c1.085,2.007,2.754,3.762,4.938,4.938   c21.429,14.454,46.662,21.002,71.992,20.979c22.838,0,45.814-5.287,66.27-14.911l0.107-0.065l0.103-0.056   c2.697-1.597,6.282-3.029,9.661-5.115c1.671-1.064,3.304-2.296,4.704-3.897c1.4-1.591,2.525-3.551,3.16-5.875v-0.01   c0.266-1.026,0.392-2.025,0.392-3.024c0-1.899-0.467-3.701-1.241-5.32C294.361,303.775,292.504,301.778,290.329,300.349z    M139.875,265.589c0.037,0,0.086,0.014,0.128,0.037c2.735,0.999,5.554,1.493,8.345,1.493c6.963,0,13.73-2.852,18.853-7.5   c5.115-4.662,8.618-11.257,8.618-18.775c0-0.196,0-0.392-0.009-0.625c0.019-0.336,0.028-0.705,0.028-1.083   c0-7.458-3.456-14.08-8.522-18.762c-5.085-4.686-11.836-7.551-18.825-7.551c-1.867,0-3.769,0.219-5.628,0.653   c-0.028,0-0.049,0.009-0.077,0.009c0,0-0.019,0-0.028,0c-9.252,1.937-17.373,8.803-20.37,18.248l0,0v0.01   c0,0.019-0.009,0.037-0.009,0.037c-0.861,2.586-1.262,5.255-1.262,7.896c0,5.787,1.913,11.426,5.211,16.064   c3.269,4.56,7.894,8.145,13.448,9.819C139.816,265.561,139.835,265.571,139.875,265.589z M430.033,198.094v0.038   c0.066,0.94,0.084,1.878,0.084,2.81c0,10.447-3.351,20.493-8.941,29.016c-5.218,7.976-12.414,14.649-20.703,19.177   c0.532,4.158,0.84,8.349,0.84,12.526c-0.01,22.495-7.766,44.607-21.272,62.329v0.009h-0.028   c-24.969,33.216-63.313,52.804-102.031,62.684h-0.01l-0.027,0.023c-20.647,5.013-41.938,7.574-63.223,7.574   c-31.729,0-63.433-5.722-93.018-17.585l-0.009-0.028h-0.028c-30.672-12.643-59.897-32.739-77.819-62.184   c-9.642-15.71-14.935-34.141-14.935-52.659c0-4.19,0.283-8.387,0.843-12.536c-8.072-4.545-15.063-10.99-20.255-18.687   c-5.542-8.266-9.056-17.95-9.5-28.187v-0.04v-0.037v-0.082c0.009-14.337,6.237-27.918,15.915-37.932   c9.677-10.011,22.896-16.554,37.075-16.554c0.196,0,0.392,0,0.588,0c1.487-0.101,2.987-0.159,4.488-0.159   c7.122,0,14.26,1.153,21.039,3.752l0.037,0.028l0.038,0.012c5.787,2.437,11.537,5.377,16.662,9.449   c1.661-0.871,3.472-1.851,5.504-2.625c31.064-18.395,67.171-25.491,102.358-27.538c0.306-17.431,2.448-35.68,10.949-51.65   c7.08-13.269,19.369-23.599,34-27.179l0.061-0.03l0.079-0.009c5.573-1.078,11.192-1.575,16.774-1.575   c14.869,0,29.561,3.521,43.31,9.017c6.086-9.185,14.776-16.354,24.97-20.375l0.098-0.056l0.098-0.037   c5.983-1.864,12.303-2.954,18.646-2.954c6.692,0,13.437,1.223,19.756,4.046v-0.023c0.009,0.023,0.019,0.023,0.019,0.023   c0.047,0.016,0.084,0.044,0.116,0.044c9.059,3.489,16.727,9.937,22.164,17.95c5.442,8.048,8.644,17.688,8.644,27.599   c0,1.827-0.103,3.657-0.317,5.489l-0.019,0.037c0,0.028,0,0.068-0.01,0.096c-1.063,12.809-7.551,24.047-16.736,32.063   c-9.24,8.048-21.207,12.909-33.49,12.909c-1.97,0-3.958-0.11-5.937-0.374c-12.182-0.931-23.541-6.826-31.886-15.595   c-8.373-8.755-13.768-20.453-13.768-33.08c0-0.611,0.056-1.237,0.074-1.843c-11.435-5.092-23.578-9.316-35.646-9.306   c-1.746,0-3.491,0.096-5.237,0.273h-0.019c-9.035,0.871-17.436,6.566-21.506,14.757v0.009v0.028   c-6.179,12.034-7.411,26.101-7.598,40.064c34.639,2.259,69.483,10.571,100.043,28.138h0.047l0.438,0.259   c0.579,0.343,1.652,0.931,2.623,1.449c2.101-1.704,4.322-3.456,6.856-4.966c9.264-6.17,20.241-9.238,31.223-9.238   c4.872,0,9.749,0.621,14.481,1.834h0.019l0.196,0.058c0.07,0.01,0.121,0.033,0.178,0.033v0.009   c11.183,2.845,21.3,9.267,28.917,17.927c7.612,8.674,12.731,19.648,13.73,31.561v0.025H430.033z M328.002,84.733   c0,0.469,0.01,0.95,0.057,1.44v0.028v0.056c0.224,6.018,3.065,11.619,7.383,15.756c4.34,4.14,10.1,6.702,15.942,6.725h0.08h0.079   c0.42,0.033,0.85,0.033,1.26,0.033c5.899,0.009,11.752-2.532,16.148-6.655c4.405-4.144,7.309-9.78,7.542-15.849l0.009-0.028v-0.037   c0.038-0.464,0.057-0.903,0.057-1.377c0-6.247-2.922-12.202-7.496-16.612c-4.555-4.406-10.688-7.136-16.735-7.12   c-1.951,0-3.884,0.266-5.778,0.854l-0.065,0.005l-0.056,0.023c-4.984,1.295-9.656,4.368-13.012,8.449   C330.046,74.486,328.002,79.508,328.002,84.733z M72.312,177.578c-4.63-2.156-9.418-3.696-14.15-3.676   c-0.794,0-1.597,0.047-2.39,0.133h-0.11l-0.11,0.014c-6.795,0.187-13.653,3.15-18.801,7.899   c-5.152,4.732-8.559,11.122-8.821,18.167v0.065l-0.012,0.058c-0.046,0.57-0.065,1.137-0.065,1.683   c0,4.345,1.333,8.545,3.593,12.368c1.673,2.847,3.867,5.441,6.348,7.701C45.735,204.602,58.142,189.845,72.312,177.578z    M374.066,262.635c0-15.5-5.592-31.069-14.646-43.604c-18.053-25.119-46.055-41.502-75.187-50.636l-0.205-0.072   c-5.592-1.715-11.238-3.234-16.933-4.534c-17.025-3.876-34.48-5.806-51.917-5.806c-23.414,0-46.827,3.465-69.245,10.379   c-29.125,9.243-57.221,25.51-75.233,50.71v0.019c-9.129,12.587-14.475,28.208-14.475,43.763c0,5.727,0.716,11.453,2.23,17.025   l0.019,0.01c3.278,12.508,9.689,23.671,17.989,33.393c8.295,9.745,18.472,18.058,29.176,24.839c2.371,1.47,4.751,2.87,7.187,4.237   c31.094,17.356,66.898,24.964,102.445,24.964c6.012,0,12.06-0.214,18.033-0.644c35.797-2.959,71.742-13.525,100.8-35.115   l0.01-0.023c9.25-6.837,17.818-15.112,24.595-24.525c6.805-9.418,11.789-19.947,14.002-31.382V275.6l0.009-0.01   C373.627,271.32,374.066,266.985,374.066,262.635z M402.32,200.95c-0.009-3.762-0.868-7.507-2.753-11l-0.047-0.044l-0.019-0.056   c-2.521-5.19-6.479-9.11-11.248-11.782c-4.77-2.69-10.352-4.056-15.952-4.056c-5.063,0-10.1,1.132-14.57,3.379   c14.216,12.344,26.687,27.179,34.746,44.636c2.595-2.259,4.808-5.018,6.464-8.084C401.098,209.92,402.32,205.405,402.32,200.95z" fill="#f7f3ce"/>
 7 | </g>
 8 | <g>
 9 | </g>
10 | <g>
11 | </g>
12 | <g>
13 | </g>
14 | <g>
15 | </g>
16 | <g>
17 | </g>
18 | <g>
19 | </g>
20 | <g>
21 | </g>
22 | <g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | </svg>
39 | 


--------------------------------------------------------------------------------
/docs/assets/images/icons/fill/twitter.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 430.117 430.117" style="enable-background:new 0 0 430.117 430.117;" xml:space="preserve">
 5 | <g>
 6 | 	<path id="Twitter__x28_alt_x29_" d="M381.384,198.639c24.157-1.993,40.543-12.975,46.849-27.876   c-8.714,5.353-35.764,11.189-50.703,5.631c-0.732-3.51-1.55-6.844-2.353-9.854c-11.383-41.798-50.357-75.472-91.194-71.404   c3.304-1.334,6.655-2.576,9.996-3.691c4.495-1.61,30.868-5.901,26.715-15.21c-3.5-8.188-35.722,6.188-41.789,8.067   c8.009-3.012,21.254-8.193,22.673-17.396c-12.27,1.683-24.315,7.484-33.622,15.919c3.36-3.617,5.909-8.025,6.45-12.769   C241.68,90.963,222.563,133.113,207.092,174c-12.148-11.773-22.915-21.044-32.574-26.192   c-27.097-14.531-59.496-29.692-110.355-48.572c-1.561,16.827,8.322,39.201,36.8,54.08c-6.17-0.826-17.453,1.017-26.477,3.178   c3.675,19.277,15.677,35.159,48.169,42.839c-14.849,0.98-22.523,4.359-29.478,11.642c6.763,13.407,23.266,29.186,52.953,25.947   c-33.006,14.226-13.458,40.571,13.399,36.642C113.713,320.887,41.479,317.409,0,277.828   c108.299,147.572,343.716,87.274,378.799-54.866c26.285,0.224,41.737-9.105,51.318-19.39   C414.973,206.142,393.023,203.486,381.384,198.639z" fill="#f7f3ce"/>
 7 | </g>
 8 | <g>
 9 | </g>
10 | <g>
11 | </g>
12 | <g>
13 | </g>
14 | <g>
15 | </g>
16 | <g>
17 | </g>
18 | <g>
19 | </g>
20 | <g>
21 | </g>
22 | <g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | </svg>
39 | 


--------------------------------------------------------------------------------
/docs/assets/images/icons/github.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 55.11 55.11" style="enable-background:new 0 0 55.11 55.11;" xml:space="preserve" width="512px" height="512px">
 4 | <g>
 5 | 	<g>
 6 | 		<path d="M18.549,29.909c-2.757,0-5,2.691-5,6s2.243,6,5,6s5-2.691,5-6S21.306,29.909,18.549,29.909z M18.549,39.909    c-1.654,0-3-1.794-3-4s1.346-4,3-4s3,1.794,3,4S20.204,39.909,18.549,39.909z" fill="#4797b1"/>
 7 | 		<path d="M37.549,29.909c-2.757,0-5,2.691-5,6s2.243,6,5,6s5-2.691,5-6S40.306,29.909,37.549,29.909z M37.549,39.909    c-1.654,0-3-1.794-3-4s1.346-4,3-4s3,1.794,3,4S39.204,39.909,37.549,39.909z" fill="#4797b1"/>
 8 | 		<path d="M39.075,24.909c-0.049,0-0.1,0-0.149,0.001c-0.926,0.016-1.853,0.054-2.78,0.091c-0.844,0.034-1.688,0.068-2.531,0.085    l-1.465,0.031c-2.543,0.053-5.178,0.107-7.751,0.097c-1.174-0.005-2.349-0.049-3.522-0.093c-1.598-0.06-3.248-0.124-4.886-0.083    c-2.273,0.055-4.185,0.781-5.685,2.159h0c-2.491,2.289-3.521,5.325-3.148,9.282c0.542,5.743,2.86,8.68,8.002,10.135    c4.323,1.223,8.665,1.333,12.322,1.281l1.218,0.006c0.411,0.003,0.822,0.007,1.233,0.007c0.507,0,1.014-0.005,1.521-0.021    c3.595-0.115,6.746-0.652,9.632-1.644c3.169-1.088,5.279-3.166,6.269-6.175c0.756-2.3,0.978-4.479,0.679-6.662    C47.547,29.856,44.45,24.909,39.075,24.909z M45.456,39.444c-0.795,2.417-2.437,4.022-5.019,4.908    c-2.695,0.925-5.654,1.428-9.046,1.536c-0.891,0.028-1.782,0.02-2.673,0.014l-1.249-0.007c-3.525,0.05-7.688-0.052-11.763-1.206    c-4.317-1.221-6.094-3.498-6.556-8.397C8.84,33,9.661,30.507,11.659,28.67c1.133-1.04,2.606-1.589,4.38-1.633    c1.576-0.036,3.196,0.023,4.762,0.082c1.196,0.045,2.393,0.09,3.589,0.095c2.608,0.012,5.247-0.044,7.802-0.098l1.463-0.03    c0.857-0.018,1.714-0.053,2.571-0.087c0.911-0.037,1.822-0.074,2.733-0.089c0.036-0.001,0.072-0.001,0.108-0.001    c4.13,0,6.607,4.022,6.984,6.771C46.31,35.554,46.114,37.44,45.456,39.444z" fill="#4797b1"/>
 9 | 		<path d="M51.866,18.56c-0.595-0.819-0.867-1.301-0.782-2.176c0.177-1.843-0.075-3.698-0.319-5.491l-0.016-0.118    c-0.326-2.404-0.954-4.698-1.867-6.819l-0.325-0.754L47.08,3.516c-2.051,0.431-4.173,0.877-6.107,1.994    c-1.284,0.742-2.562,1.533-3.797,2.297c-0.827,0.512-1.654,1.024-2.486,1.523c-0.045,0.027-0.135,0.049-0.16,0.049c0,0,0,0,0,0    C30.057,8.598,25.412,8.59,20.72,9.356c-0.058,0.01-0.247-0.022-0.397-0.111c-0.516-0.309-1.019-0.641-1.521-0.972    c-0.583-0.385-1.167-0.769-1.767-1.12c-2.862-1.68-6.024-3.301-9.753-3.777L6.552,3.282L6.163,4.125    C6.09,4.279,6.028,4.412,5.977,4.55c-1.07,2.884-1.715,5.908-1.924,9.085c-0.073,1.101-0.148,2.24,0.014,3.377    c0.054,0.377,0.009,0.453-0.138,0.637c-1.347,1.679-2.31,3.435-2.945,5.368c-1.067,3.246-1.26,6.845-0.609,11.324    c0.54,3.747,1.459,6.481,2.977,8.863c3.193,5.008,8.122,7.829,14.651,8.385c3.263,0.278,6.574,0.32,9.82,0.32    c0.698,0,1.393-0.002,2.084-0.004c0.911-0.003,1.823-0.005,2.732-0.003c4.18,0.002,7.514-0.542,10.545-1.729    c5.396-2.111,8.984-6.043,10.663-11.688c0.936-3.145,1.355-6.489,1.245-9.941C54.97,24.698,53.884,21.339,51.866,18.56z     M51.931,37.915c-1.516,5.093-4.615,8.494-9.475,10.396c-2.79,1.093-5.87,1.61-9.812,1.591c-0.913-0.002-1.827,0-2.741,0.003    c-3.861,0.011-7.853,0.022-11.729-0.309c-5.958-0.507-10.255-2.95-13.135-7.467c-1.359-2.131-2.187-4.621-2.685-8.075    c-0.614-4.22-0.45-7.431,0.53-10.413c0.559-1.701,1.411-3.252,2.605-4.742c0.523-0.652,0.684-1.281,0.557-2.17    c-0.133-0.931-0.064-1.964,0.008-3.061c0.184-2.807,0.761-5.565,1.714-8.197c3.065,0.542,5.773,1.949,8.253,3.405    c0.57,0.334,1.124,0.7,1.677,1.064c0.527,0.348,1.055,0.695,1.597,1.019c0.54,0.322,1.192,0.46,1.747,0.368    c4.468-0.729,8.89-0.723,13.146,0.021c0.49,0.083,1.075-0.033,1.528-0.304c0.841-0.505,1.675-1.021,2.51-1.538    c1.242-0.769,2.483-1.537,3.746-2.266c1.619-0.935,3.446-1.332,5.381-1.74c0.675,1.74,1.149,3.601,1.413,5.541l0.016,0.118    c0.228,1.681,0.464,3.419,0.309,5.03c-0.154,1.594,0.459,2.586,1.155,3.544c1.803,2.483,2.734,5.386,2.846,8.872    C53.197,31.845,52.806,34.977,51.931,37.915z" fill="#4797b1"/>
10 | 	</g>
11 | </g>
12 | <g>
13 | </g>
14 | <g>
15 | </g>
16 | <g>
17 | </g>
18 | <g>
19 | </g>
20 | <g>
21 | </g>
22 | <g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | </svg>
43 | 


--------------------------------------------------------------------------------
/docs/assets/images/icons/reddit.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
 4 | <g transform="translate(1 1)">
 5 | 	<g>
 6 | 		<g>
 7 | 			<path d="M236.227,178.2c0-18.773-15.36-34.133-34.133-34.133s-34.133,15.36-34.133,34.133s15.36,34.133,34.133,34.133     S236.227,196.973,236.227,178.2z M185.027,178.2c0-9.387,7.68-17.067,17.067-17.067s17.067,7.68,17.067,17.067     s-7.68,17.067-17.067,17.067S185.027,187.587,185.027,178.2z" fill="#f7f3ce"/>
 8 | 			<path d="M304.493,144.067c-18.773,0-34.133,15.36-34.133,34.133s15.36,34.133,34.133,34.133c18.773,0,34.133-15.36,34.133-34.133     S323.267,144.067,304.493,144.067z M304.493,195.267c-9.387,0-17.067-7.68-17.067-17.067s7.68-17.067,17.067-17.067     c9.387,0,17.067,7.68,17.067,17.067S313.88,195.267,304.493,195.267z" fill="#f7f3ce"/>
 9 | 			<path d="M196.12,231.96c-3.413,3.413-3.413,8.533,0,11.947c11.947,11.947,34.133,19.627,57.173,19.627     c23.04,0,45.227-7.68,57.173-19.627c3.413-3.413,3.413-8.533,0-11.947s-8.533-3.413-11.947,0     c-6.827,6.827-22.187,14.507-45.227,14.507c-23.04,0-38.4-7.68-45.227-14.507C204.653,228.547,199.533,228.547,196.12,231.96z" fill="#f7f3ce"/>
10 | 			<path d="M393.24,99.693c-9.387,0-19.627,3.413-27.307,8.533c-30.593-18.19-67.595-29.971-100.915-32.238l17.288-59.069     l49.01,14.415c-0.795,3.3-1.223,6.757-1.223,10.332c0,23.893,18.773,42.667,42.667,42.667s42.667-18.773,42.667-42.667     C415.427,17.773,396.653-1,372.76-1c-14.205,0-26.6,6.637-34.317,17.039l-54.43-15.332c-7.68-1.707-15.36,2.56-17.92,10.24     l-19.385,65.133c-34.109,2.054-71.386,13.662-102.642,31.294C136.387,101.4,127,98.84,116.76,98.84     c-27.307,0-49.493,22.187-49.493,49.493c0,15.36,7.68,29.867,19.627,39.253c0,2.56,0,5.12,0,7.68     c0,32.427,18.773,61.44,52.053,83.627c5.973,4.267,11.947,7.68,18.773,11.093c-18.773,15.36-29.867,39.253-29.867,66.56     c0,36.693,20.48,68.267,50.347,78.507c0.853,1.707,0.853,2.56,1.707,4.267c-26.453,4.267-46.08,23.04-46.08,46.08     c0,3.413,0.853,10.24,2.56,15.36c1.707,5.973,7.68,10.24,14.507,10.24H357.4c6.827,0,12.8-4.267,13.653-11.093     c1.707-3.413,0.853-8.533,0.853-11.947c0-0.853,0-1.707,0-2.56c0-23.04-17.92-40.96-41.813-45.227     c0.853-1.707,0.853-2.56,1.707-4.267c29.867-10.24,50.347-41.813,50.347-78.507c0-26.453-11.947-51.2-29.867-66.56     c6.827-3.413,12.8-6.827,18.773-11.093c33.28-22.187,52.053-51.2,52.053-83.627c0-2.56,0-5.12,0-7.68     c11.947-9.387,19.627-23.893,19.627-39.253C442.733,121.88,420.547,99.693,393.24,99.693z M372.76,16.067     c14.507,0,25.6,11.093,25.6,25.6c0,14.507-11.093,25.6-25.6,25.6c-14.507,0-25.6-11.093-25.6-25.6     C347.16,27.16,358.253,16.067,372.76,16.067z M409.453,178.2c-3.413,1.707-5.12,5.12-4.267,8.533     c0.853,3.413,0.853,6.827,0.853,10.24c0,25.6-16.213,50.347-44.373,69.12c-9.387,5.973-19.627,11.093-30.72,15.36     c-2.56,0.853-5.12,4.267-5.12,7.68c0,3.413,1.707,5.973,5.12,7.68c20.48,9.387,34.133,34.133,34.133,60.587     c0,29.867-17.92,56.32-41.813,63.147c-2.56,0.853-5.12,3.413-5.973,5.973c-1.707,5.973-4.267,11.947-6.827,17.92     c-0.853,2.56-0.853,5.973,0.853,8.533c1.707,2.56,5.12,3.413,7.68,3.413c0.853,0,1.707,0,2.56,0     c19.627,0,34.133,11.947,34.133,29.013c0,1.707,0,2.56,0,4.267c0,0.853,0,2.56,0,4.267H151.747c0-2.56-0.853-6.827-0.853-8.533     c0-16.213,17.067-29.013,34.133-28.16c0.853,0,2.56,0,3.413,0c3.413,0,5.973-0.853,7.68-3.413s1.707-5.973,0.853-8.533     c-2.56-5.973-5.12-12.8-6.827-18.773c-0.853-3.413-3.413-5.12-5.973-5.973c-23.893-5.973-41.813-33.28-41.813-63.147     c0-26.453,13.653-51.2,34.133-60.587c3.413-0.853,5.12-4.267,5.12-7.68c0-3.413-1.707-6.827-5.12-7.68     c-11.093-4.267-21.333-9.387-30.72-15.36c-29.013-18.773-44.373-42.667-44.373-69.12c0-3.413,0-6.827,0.853-10.24     c0-3.413-0.853-6.827-4.267-8.533c-9.387-5.12-15.36-16.213-15.36-27.307c0-17.92,14.507-32.427,32.427-32.427     c7.68,0,15.36,3.413,21.333,8.533c2.56,2.56,6.827,2.56,10.24,0.853c31.573-20.48,70.827-32.427,104.96-33.28h8.533     c33.28,1.707,70.827,13.653,100.693,33.28c3.413,1.707,7.68,1.707,10.24-0.853c5.973-5.973,13.653-8.533,21.333-8.533     c17.92,0,32.427,14.507,32.427,32.427C424.813,161.987,418.84,172.227,409.453,178.2z" fill="#f7f3ce"/>
11 | 			<path d="M309.613,310.467c-1.707-0.853-4.267-1.707-6.827-0.853c-30.72,9.387-65.707,9.387-95.573,0     c-2.56-0.853-5.12-0.853-6.827,0.853c-2.56,1.707-4.267,3.413-4.267,5.973c-1.707,11.093-2.56,23.893-2.56,35.84     c0,53.76,17.92,99.84,44.373,115.2c1.707,0.853,2.56,0.853,4.267,0.853h25.6c1.707,0,3.413,0,4.267-0.853     c26.453-14.507,44.373-61.44,44.373-115.2c0-11.947-0.853-23.893-2.56-35.84C313.027,313.88,311.32,312.173,309.613,310.467z      M266.093,451.267H244.76c-19.627-12.8-33.28-54.613-34.133-99.84c0-7.68,0.853-16.213,1.707-23.893     c27.307,6.827,58.027,6.827,85.333,0c0.853,7.68,1.707,15.36,1.707,23.893C299.373,396.653,285.72,438.467,266.093,451.267z" fill="#f7f3ce"/>
12 | 		</g>
13 | 	</g>
14 | </g>
15 | <g>
16 | </g>
17 | <g>
18 | </g>
19 | <g>
20 | </g>
21 | <g>
22 | </g>
23 | <g>
24 | </g>
25 | <g>
26 | </g>
27 | <g>
28 | </g>
29 | <g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | <g>
42 | </g>
43 | <g>
44 | </g>
45 | </svg>
46 | 


--------------------------------------------------------------------------------
/docs/assets/images/icons/twitter.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#F7F3CE;}
 7 | </style>
 8 | <g>
 9 | 	<g>
10 | 		<path class="st0" d="M509.1,94.4c-2.6-2.6-7-3.5-10.4-2.6l-17.4,6.1c10.4-12.2,17.4-25.2,21.7-37.4c1.7-4.3,0.9-7.8-1.7-10.4
11 | 			c-2.6-2.6-7-3.5-10.4-1.7c-24.3,10.4-45.2,19.1-62.6,24.3c0,0.9-0.9,0-1.7,0c-13.9-7.8-47.8-25.2-72.1-25.2
12 | 			c-61.7,0.9-111.2,53-111.2,116.5v3.5C152.8,150,103.2,123.9,49.3,67.4l-8.7-8.7l-5.2,10.4c-29.5,56.5-8.7,107.8,25.2,142.5
13 | 			c-15.6-2.6-26.1-7.8-35.6-15.6c-3.5-2.6-7.8-3.5-12.2-0.9c-3.5,1.7-5.2,7-4.3,11.3c12.2,40.8,42.6,73.9,75.6,93.9
14 | 			c-15.6,0-28.7-1.7-41.7-10.4c-3.5-1.7-8.7-1.7-12.2,0.9s-5.2,7-3.5,11.3c15.6,44.3,46.1,67.8,94.7,73.9
15 | 			C96.3,390.7,63.3,402.9,12,403.8c-5.2,0-9.6,3.5-11.3,7.8c-1.7,5.2,0,9.6,3.5,13c31.3,25.2,100.8,40,186.8,40
16 | 			c152.9,0,278.1-136.4,278.1-304.2v-2.6c19.1-9.6,34.8-27.8,42.6-53C512.5,101.3,511.7,97,509.1,94.4z M456.9,143.9l-5.2,1.7v14.8
17 | 			c0,158.2-117.3,286.8-260.7,286.8c-79.1,0-132.1-13-160.8-26.9c60-4.3,94.7-23.5,121.7-44.3l21.7-15.6h-26.1
18 | 			c-49.5,0-80-13.9-97.3-46.9c15.6,5.2,32.2,5.2,50.4,4.3c7-0.9,13.9-0.9,20.9-0.9l2.6-17.4c-33-9.6-72.1-39.1-91.2-79.1
19 | 			c17.4,7.8,36.5,9.6,53.9,9.6h26.9l-21.7-15.6c-18.2-13-72.1-59.1-46.1-125.1c55.6,54.7,108.6,80,204.2,97.3l10.4,1.7v-24.3
20 | 			c0-53.9,41.7-98.2,93.9-99.1c20-0.9,53,17.4,62.6,22.6c5.2,2.6,10.4,3.5,15.6,1.7c13-4.3,28.7-10.4,46.1-17.4
21 | 			c-7.8,13-18.2,25.2-32.2,36.5c-3.5,2.6-4.3,7.8-2.6,12.2c1.7,4.3,7,6.1,11.3,4.3l33.9-11.3C483,124.8,473.4,137.8,456.9,143.9z"/>
22 | 	</g>
23 | </g>
24 | </svg>
25 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <title>Bubb - Euphemism for a JS tooltip</title>
  6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7 | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
  8 | <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
  9 | <meta name="twitter:card" content="summary" />
 10 | <meta name="twitter:site" content="@frdnrdb" />
 11 | <meta name="twitter:title" content="Bubb" />
 12 | <meta name="twitter:description" content="Euphemism for a JS tooltip" />
 13 | <meta name="twitter:image" content="/assets/images/bubb.png" />
 14 | <meta name="twitter:url" content="http://bubb.surge.sh" />
 15 | <meta property="og:title" content="Bubb" />
 16 | <meta property="og:description" content="Euphemism for a JS tooltip" />
 17 | <meta property="og:image" content="/assets/images/bubb.png" />
 18 | <meta property="og:url" content="http://bubb.surge.sh" />
 19 | <link rel="preload" href="/assets/fonts/gt-walsheim-light-web.ttf" as="font" type="font/ttf" crossorigin>
 20 | <link rel="preload" href="/assets/fonts/gt-walsheim-bold-web.ttf" as="font" type="font/ttf" crossorigin>
 21 | <link rel="stylesheet" href="/libs/css/tomorrow.min.css">
 22 | <link rel="stylesheet" href="/assets/demo.min.css">
 23 | <link rel="stylesheet" href="/assets/bubb.min.css">
 24 | <script delete src="//localhost:35729/livereload.js"></script>
 25 | </head>
 26 | 
 27 | <body>
 28 | 
 29 |   <header>
 30 |     <b>Bubb</b> Infotip<span>JS</span>
 31 |     <hide><aside>
 32 |       <a href="https://unpkg.com/bubb/dist/bubb.min.js">bubb.min.js <b>{{filesize-js}}</b></a>
 33 |       <a class="inline" href="https://unpkg.com/bubb/dist/bubb.min.gzip.js">bubb.min.js.gz <b>{{filesize-js.gz}}</b></a>
 34 |       <a class="first" href="https://www.npmjs.com/package/bubb">yarn add bubb <b>or</b> npm i --save bubb</a>
 35 |       <a class="first" href="https://github.com/frdnrdb/bubb"><b>github</b> git clone https://github.com/frdnrdb/bubb.git</a>
 36 |     </aside></hide>
 37 |   </header>
 38 | 
 39 |   <section class="wait">
 40 |       <device>
 41 |         <span class="header info">Bubb was built for desktop</span>
 42 |         <img class="header image" src="/assets/images/bubb_720.gif">
 43 |         <a class="header download" href="https://github.com/frdnrdb/bubb">See project on Github</a>
 44 |       </device>
 45 |       <a class="header" href="#css">↓ Pure CSS version available<hide> further down</hide></a>
 46 |       <p>Minimal, <b>non-dependent</b>, non-fancy JS infotip. <b>No CSS needed.</b></p>
 47 |       <p><em>Infotip? Seriously? Isn't that just a euphemism for tooltip?</em> It sure is.</p>
 48 |       <p>Still, Bubb has a couple of pros to consider.
 49 |         <ul>
 50 |             <li><u>Content by config</u>Each instance's content is referenced from a single configuration object. Plain convenience, lucid maintenance.</li>
 51 |             <li><u>Context menus</u>Bubb can act as a lazy man's UI</li>
 52 |         </ul>
 53 |       </p>
 54 |       <hr>
 55 |       
 56 |     <article>
 57 | 
 58 |       <span id="basic">
 59 |         <div data-bubb="reference">Basic</div><i></i>
 60 |       </span>
 61 |       <span id="menu">
 62 |         <div data-bubb="pj">Menu</div><i></i>
 63 |       </span>
 64 |       <span id="opts">
 65 |         <div data-bubb="abbruzzese">Callback on hover</div><i></i>
 66 |       </span>
 67 |       <span id="toggle">
 68 |         <div data-bubb="toggle">Toggle</div><i class="click"></i>
 69 |       </span>
 70 |       <span id="toggler">
 71 |         <div>Toggle remote</div><i class="click"></i>
 72 |       </span>
 73 |       <span id="added"></span>
 74 | 
 75 |       <div data-bubb="Interstellar hootchie kootchie">API and options</div>
 76 |       <span id="methods" class="opaque"></span>
 77 |       <span id="options" class="opaque"></span>
 78 |       <span id="options_setup" class="opaque"></span>
 79 | 
 80 |       <div data-bubb="You may need to exclaim !important to override root bubb properties">Override styling</div>
 81 |       <p>The content is targeted through <b>bubb-content </b>><b> div</b>.
 82 |       <br>The trigger element gets className <b>.bubb</b> <i>(and .bubb-menu)</i>
 83 |       <br>the bubble tagname is <b>bubb-bobb</b></p>
 84 | 
 85 |     </article>
 86 | 
 87 |   </section>
 88 | 
 89 |   <i id="eventsDisplay"></i>
 90 | 
 91 |   <header id="css" class="wait">
 92 |     <b>Bubb</b> Infotip<span>CSS</span>
 93 |     <hide><aside>
 94 |       <a href="https://unpkg.com/bubb/dist/bubb.min.css">bubb.min.css <b>{{filesize-css}}</b></a>
 95 |       <a class="inline" href="https://unpkg.com/bubb/dist/bubb.min.gzip.css">bubb.min.css.gz <b>{{filesize-css.gz}}</b></a>
 96 |     </aside></hide>
 97 |   </header>
 98 | 
 99 |   <section class="wait">
100 |     <article>
101 |       <p>Pure CSS infotip, &lt;div bubb="<b>attribute only</b>" /&gt;.</p>
102 |       <hr>
103 |       <div bubb="Target 'border-bottom-color' on [bubb]:before and 'background-color' on [bubb]:after to change fill color">Default</div><i></i>
104 |       <div east left bubb="North, east or west changes direction. Left or right anchors the tip.">Direction</div><i></i>
105 |       <div delay left bubb="0.75 seconds reveal delay. Edit bubb.scss to change defaults.">Delay</div><i></i>
106 |       <div still north bubb="♥ No fuzz">No transitions</div><i></i>
107 |       <div round large delay north right bubb="Keep adding option-attributes until you're pleased">Delayed, rounded...</div><i></i>
108 |       <hr>
109 |       <p>
110 |         <ul>
111 |           <li><u>bubb</u>Initiate with attribute content. Default direction south</li>
112 |           <li><u>nort, east, west</u>Change direction</li>
113 |           <li><u>left, right</u>Anchor the tip</li>
114 |           <li><u>still</u>Remove the transition</li>
115 |           <li><u>delay</u>Delay the reveal</li>
116 |           <li><u>round</u>Add some border radius</li>
117 |           <li><u>large</u>Subtly enlarge</li>
118 |         </ul>
119 |       </p>
120 |     </article>
121 |   </section>
122 | 
123 | 
124 |   <device>
125 |     <ul class="share-buttons device">
126 |       <li><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fbubb.surge.sh&text=Bubb%20-%20Euphemism%20for%20a%20JS%20tooltip:%20http%3A%2F%2Fbubb.surge.sh&via=frdnrdb" target="_blank" title="Tweet"><img alt="Tweet" src="/assets/images/icons/twitter.svg" /></a></li>
127 |       <li><a href="http://www.reddit.com/submit?url=http%3A%2F%2Fbubb.surge.sh&title=Bubb%20-%20Euphemism%20for%20a%20JS%20tooltip" target="_blank" title="Submit to Reddit"><img alt="Submit to Reddit" src="/assets/images/icons/reddit.svg" /></a></li>
128 |       <li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fbubb.surge.sh&t=bubb" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="/assets/images/icons/facebook.svg" /></a></li>
129 |     </ul>
130 |   </device>
131 |   <footer class="wait">
132 |     <a href="mailto:froden@gmail.com">frd</a>
133 |   </footer>
134 | 
135 |   <script src="/libs/js/highlight.min.js"></script>
136 |   <script src="/assets/bubb.min.js"></script>
137 |   <script src="/assets/demo.min.js"></script>
138 | 
139 |   <script>
140 |     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
141 |     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
142 |     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
143 |     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
144 |     ga('create', 'UA-104759095-1', 'auto');
145 |     ga('send', 'pageview');
146 |   </script>
147 | 
148 | </body>
149 | </html>
150 | 


--------------------------------------------------------------------------------
/docs/libs/css/tomorrow.min.css:
--------------------------------------------------------------------------------
1 | .hljs-comment,.hljs-quote{color:#8e908c}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#c82829}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#f5871f}.hljs-attribute{color:#eab700}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#718c00}.hljs-title,.hljs-section{color:#4271ae}.hljs-keyword,.hljs-selector-tag{color:#8959a8}.hljs{display:block;overflow-x:auto;background:white;color:#4d4d4c;padding:0.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}


--------------------------------------------------------------------------------
/gruntfile.js:
--------------------------------------------------------------------------------
  1 | module.exports = function(grunt) {
  2 | 
  3 |   require('load-grunt-tasks')(grunt);
  4 | 
  5 |   grunt.registerTask('build', ['sass','cssmin','es6transpiler','uglify','copy:build','compress','replace','clean']);
  6 |   grunt.registerTask('serve:build', ['build','connect','open','watch']);
  7 |   grunt.registerTask('serve', ['sass','cssmin','es6transpiler','copy:dev','connect','open','watch']);
  8 |   grunt.registerTask('publish', ['build','shell:git_add','shell:git_commit','shell:npm_version','shell:git_push','shell:npm_publish','shell:surge']);
  9 | 
 10 |   grunt.initConfig ({
 11 |     pkg: grunt.file.readJSON('package.json'),
 12 |     sass: {
 13 |       demo: {
 14 |         files: {
 15 |           'scss/demo.css' : 'scss/demo.scss',
 16 |           'scss/bubb.css' : 'scss/bubb.scss'
 17 |         }
 18 |       }
 19 |     },
 20 |     cssnano: {
 21 |       dist: {
 22 |         files: {
 23 |           'docs/assets/demo.min.css': 'scss/demo.css',
 24 |           'docs/assets/bubb.min.css': 'scss/bubb.css'
 25 |         }
 26 |       }
 27 |     },
 28 |     cssmin: {
 29 |       css: {
 30 |         files: [{
 31 |           expand: true,
 32 |           cwd: 'scss/',
 33 |           src: ['*.css'],
 34 |           dest: 'docs/assets',
 35 |           ext: '.min.css'
 36 |         }]
 37 |       }
 38 |     },
 39 |     es6transpiler: {
 40 |       main: {
 41 |           files: {
 42 |               'js/script_transpiled.js': 'js/script.js',
 43 |               'js/demo_transpiled.js': 'js/demo.js'
 44 |           }
 45 |       }
 46 |     },
 47 |     uglify: {
 48 |       options: {
 49 |         banner: '/* ' +
 50 |           '<%= pkg.name %> v<%= pkg.version %> ' +
 51 |           '(<%= grunt.template.today("yyyy-mm-dd") %>) | ' +
 52 |           '<%= pkg.homepage %> | ' +
 53 |           '(c) <%= grunt.template.today("yyyy") %> <%= pkg.author %> | ' +
 54 |           'licensed <%= pkg.license %> ' +
 55 |           '*/\n'
 56 |       },
 57 |       main: {
 58 |         files: {
 59 |           'docs/assets/demo.min.js': ['js/demo_transpiled.js'],
 60 |           'docs/assets/bubb.min.js': ['js/script_transpiled.js']
 61 |         }
 62 |       }
 63 |     },
 64 |     copy: {
 65 |       build: {
 66 |         files: [
 67 |           {
 68 |             src: 'docs/assets/bubb.min.js',
 69 |             dest: 'dist/bubb.min.js'
 70 |           },
 71 |           {
 72 |             src: 'docs/assets/bubb.min.css',
 73 |             dest: 'dist/bubb.min.css'
 74 |           }
 75 |         ]
 76 |       },
 77 |       dev: {
 78 |         files: [{
 79 |           src: 'js/script_transpiled.js',
 80 |           dest: 'docs/assets/bubb.min.js'
 81 |         },
 82 |         {
 83 |           src: 'js/demo_transpiled.js',
 84 |           dest: 'docs/assets/demo.min.js'
 85 |         },
 86 |         {
 87 |           src: 'scss/demo.css',
 88 |           dest: 'docs/assets/demo.min.css'
 89 |         },
 90 |         {
 91 |           src: 'scss/bubb.css',
 92 |           dest: 'docs/assets/bubb.min.css'
 93 |         },
 94 |         {
 95 |           src: 'html/index.html',
 96 |           dest: 'docs/index.html'
 97 |         }]
 98 |       }
 99 |     },
100 |     replace: {
101 |       html: {
102 |         options: {
103 |           patterns: [
104 |             {
105 |               match: /<.+\sdelete\s.*\/.+>/g,
106 |               replacement: ''
107 |             },
108 |             {
109 |               match: /{{filesize-(.+)}}/g,
110 |               replacement: function (match, key) {
111 |                 var fs = require('fs');
112 |                 function getFilesizeInBytes(filename) {
113 |                     const stats = fs.statSync(filename)
114 |                     const fileSizeInBytes = stats.size
115 |                     return (fileSizeInBytes/1024).toFixed(1)+' kB'
116 |                 }
117 |                 return getFilesizeInBytes('./dist/bubb.min.'+key);
118 |               }
119 |             },
120 |           ]
121 |         },
122 |         files: [
123 |           {expand: true, flatten: true, src: ['html/index.html'], dest: 'docs/'}
124 |         ]
125 |       }
126 |     },
127 |     clean: ['scss/style.css', 'scss/demo.css', 'scss/bubb.css', 'js/script_transpiled.js', 'js/demo_transpiled.js'],
128 |     watch: {
129 |       source: {
130 |         files: ['scss/*.scss','html/index.html','js/script.js','js/demo.js'],
131 |         tasks: ['sass','es6transpiler','copy','clean'],
132 |         options: {
133 |           livereload: true
134 |         }
135 |       }
136 |     },
137 |     connect: {
138 |       server: {
139 |         options: {
140 |           port: 5000,
141 |           hostname: 'localhost',
142 |           base: 'docs'
143 |         }
144 |       }
145 |     },
146 |     open : {
147 |       main: {
148 |         path: 'http://localhost:5000',
149 |         app: grunt.option('safari') ? 'Safari' : 'Google Chrome'
150 |       }
151 |     },
152 |     shell: {
153 |       git_add: {
154 |         command: 'git add .'
155 |       },
156 |       git_commit: {
157 |         command: 'git commit -m \'patch\''
158 |       },
159 |       git_push: {
160 |         command: 'git push origin master'
161 |       },
162 |       npm_version: {
163 |         command: 'npm version patch'
164 |       },
165 |       npm_publish: {
166 |         command: 'npm publish'
167 |       },
168 |       surge: {
169 |         command: 'surge'
170 |       }
171 |     },
172 |     compress: {
173 |       main: {
174 |         options: {
175 |           mode: 'gzip'
176 |         },
177 |         files: [{
178 |           expand: true,
179 |           cwd: 'dist/',
180 |           src: ['bubb.min.css'],
181 |           dest: 'dist/',
182 |           extDot: 'last',
183 |           ext: '.css.gz'
184 |         },
185 |         {
186 |           expand: true,
187 |           cwd: 'dist/',
188 |           src: ['bubb.min.js'],
189 |           dest: 'dist/',
190 |           extDot: 'last',
191 |           ext: '.js.gz'
192 |         }]
193 |       }
194 |     }
195 |   });
196 | 
197 | };
198 | 


--------------------------------------------------------------------------------
/html/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <title>Bubb - Euphemism for a JS tooltip</title>
  6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7 | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
  8 | <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
  9 | <meta name="twitter:card" content="summary" />
 10 | <meta name="twitter:site" content="@frdnrdb" />
 11 | <meta name="twitter:title" content="Bubb" />
 12 | <meta name="twitter:description" content="Euphemism for a JS tooltip" />
 13 | <meta name="twitter:image" content="/assets/images/bubb.png" />
 14 | <meta name="twitter:url" content="http://bubb.surge.sh" />
 15 | <meta property="og:title" content="Bubb" />
 16 | <meta property="og:description" content="Euphemism for a JS tooltip" />
 17 | <meta property="og:image" content="/assets/images/bubb.png" />
 18 | <meta property="og:url" content="http://bubb.surge.sh" />
 19 | <link rel="preload" href="/assets/fonts/gt-walsheim-light-web.ttf" as="font" type="font/ttf" crossorigin>
 20 | <link rel="preload" href="/assets/fonts/gt-walsheim-bold-web.ttf" as="font" type="font/ttf" crossorigin>
 21 | <link rel="stylesheet" href="/libs/css/tomorrow.min.css">
 22 | <link rel="stylesheet" href="/assets/demo.min.css">
 23 | <link rel="stylesheet" href="/assets/bubb.min.css">
 24 | <script delete src="//localhost:35729/livereload.js"></script>
 25 | </head>
 26 | 
 27 | <body>
 28 | 
 29 |   <header>
 30 |     <b>Bubb</b> Infotip<span>JS</span>
 31 |     <hide><aside>
 32 |       <a href="https://unpkg.com/bubb/dist/bubb.min.js">bubb.min.js <b>{{filesize-js}}</b></a>
 33 |       <a class="inline" href="https://unpkg.com/bubb/dist/bubb.min.gzip.js">bubb.min.js.gz <b>{{filesize-js.gz}}</b></a>
 34 |       <a class="first" href="https://www.npmjs.com/package/bubb">yarn add bubb <b>or</b> npm i --save bubb</a>
 35 |       <a class="first" href="https://github.com/frdnrdb/bubb"><b>github</b> git clone https://github.com/frdnrdb/bubb.git</a>
 36 |     </aside></hide>
 37 |   </header>
 38 | 
 39 |   <section class="wait">
 40 |       <device>
 41 |         <span class="header info">Bubb was built for desktop</span>
 42 |         <img class="header image" src="/assets/images/bubb_720.gif">
 43 |         <a class="header download" href="https://github.com/frdnrdb/bubb">See project on Github</a>
 44 |       </device>
 45 |       <a class="header" href="#css">↓ Pure CSS version available<hide> further down</hide></a>
 46 |       <p>Minimal, <b>non-dependent</b>, non-fancy JS infotip. <b>No CSS needed.</b></p>
 47 |       <p><em>Infotip? Seriously? Isn't that just a euphemism for tooltip?</em> It sure is.</p>
 48 |       <p>Still, Bubb has a couple of pros to consider.
 49 |         <ul>
 50 |             <li><u>Content by config</u>Each instance's content is referenced from a single configuration object. Plain convenience, lucid maintenance.</li>
 51 |             <li><u>Context menus</u>Bubb can act as a lazy man's UI</li>
 52 |         </ul>
 53 |       </p>
 54 |       <hr>
 55 |       
 56 |     <article>
 57 | 
 58 |       <span id="basic">
 59 |         <div data-bubb="reference">Basic</div><i></i>
 60 |       </span>
 61 |       <span id="menu">
 62 |         <div data-bubb="pj">Menu</div><i></i>
 63 |       </span>
 64 |       <span id="opts">
 65 |         <div data-bubb="abbruzzese">Callback on hover</div><i></i>
 66 |       </span>
 67 |       <span id="toggle">
 68 |         <div data-bubb="toggle">Toggle</div><i class="click"></i>
 69 |       </span>
 70 |       <span id="toggler">
 71 |         <div>Toggle remote</div><i class="click"></i>
 72 |       </span>
 73 |       <span id="added"></span>
 74 | 
 75 |       <div data-bubb="Interstellar hootchie kootchie">API and options</div>
 76 |       <span id="methods" class="opaque"></span>
 77 |       <span id="options" class="opaque"></span>
 78 |       <span id="options_setup" class="opaque"></span>
 79 | 
 80 |       <div data-bubb="You may need to exclaim !important to override root bubb properties">Override styling</div>
 81 |       <p>The content is targeted through <b>bubb-content </b>><b> div</b>.
 82 |       <br>The trigger element gets className <b>.bubb</b> <i>(and .bubb-menu)</i>
 83 |       <br>the bubble tagname is <b>bubb-bobb</b></p>
 84 | 
 85 |     </article>
 86 | 
 87 |   </section>
 88 | 
 89 |   <i id="eventsDisplay"></i>
 90 | 
 91 |   <header id="css" class="wait">
 92 |     <b>Bubb</b> Infotip<span>CSS</span>
 93 |     <hide><aside>
 94 |       <a href="https://unpkg.com/bubb/dist/bubb.min.css">bubb.min.css <b>{{filesize-css}}</b></a>
 95 |       <a class="inline" href="https://unpkg.com/bubb/dist/bubb.min.gzip.css">bubb.min.css.gz <b>{{filesize-css.gz}}</b></a>
 96 |     </aside></hide>
 97 |   </header>
 98 | 
 99 |   <section class="wait">
100 |     <article>
101 |       <p>Pure CSS infotip, &lt;div bubb="<b>attribute only</b>" /&gt;.</p>
102 |       <hr>
103 |       <div bubb="Target 'border-bottom-color' on [bubb]:before and 'background-color' on [bubb]:after to change fill color">Default</div><i></i>
104 |       <div east left bubb="North, east or west changes direction. Left or right anchors the tip.">Direction</div><i></i>
105 |       <div delay left bubb="0.75 seconds reveal delay. Edit bubb.scss to change defaults.">Delay</div><i></i>
106 |       <div still north bubb="♥ No fuzz">No transitions</div><i></i>
107 |       <div round large delay north right bubb="Keep adding option-attributes until you're pleased">Delayed, rounded...</div><i></i>
108 |       <hr>
109 |       <p>
110 |         <ul>
111 |           <li><u>bubb</u>Initiate with attribute content. Default direction south</li>
112 |           <li><u>nort, east, west</u>Change direction</li>
113 |           <li><u>left, right</u>Anchor the tip</li>
114 |           <li><u>still</u>Remove the transition</li>
115 |           <li><u>delay</u>Delay the reveal</li>
116 |           <li><u>round</u>Add some border radius</li>
117 |           <li><u>large</u>Subtly enlarge</li>
118 |         </ul>
119 |       </p>
120 |     </article>
121 |   </section>
122 | 
123 | 
124 |   <device>
125 |     <ul class="share-buttons device">
126 |       <li><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fbubb.surge.sh&text=Bubb%20-%20Euphemism%20for%20a%20JS%20tooltip:%20http%3A%2F%2Fbubb.surge.sh&via=frdnrdb" target="_blank" title="Tweet"><img alt="Tweet" src="/assets/images/icons/twitter.svg" /></a></li>
127 |       <li><a href="http://www.reddit.com/submit?url=http%3A%2F%2Fbubb.surge.sh&title=Bubb%20-%20Euphemism%20for%20a%20JS%20tooltip" target="_blank" title="Submit to Reddit"><img alt="Submit to Reddit" src="/assets/images/icons/reddit.svg" /></a></li>
128 |       <li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fbubb.surge.sh&t=bubb" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="/assets/images/icons/facebook.svg" /></a></li>
129 |     </ul>
130 |   </device>
131 |   <footer class="wait">
132 |     <a href="mailto:froden@gmail.com">frd</a>
133 |   </footer>
134 | 
135 |   <script src="/libs/js/highlight.min.js"></script>
136 |   <script src="/assets/bubb.min.js"></script>
137 |   <script src="/assets/demo.min.js"></script>
138 | 
139 |   <script>
140 |     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
141 |     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
142 |     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
143 |     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
144 |     ga('create', 'UA-104759095-1', 'auto');
145 |     ga('send', 'pageview');
146 |   </script>
147 | 
148 | </body>
149 | </html>
150 | 


--------------------------------------------------------------------------------
/js/demo.js:
--------------------------------------------------------------------------------
  1 | (function(bubb, hljs){
  2 | 
  3 | "use strict";
  4 | 
  5 | function render_code_blocks() {
  6 | 
  7 |   // render <xmp> code blocks
  8 | 
  9 |   Array.from( document.getElementsByTagName('div') ).forEach( div => {
 10 | 
 11 |     let temp = document.createElement('temp');
 12 |         temp.appendChild(div.cloneNode(true));
 13 |     let pre = document.createElement('pre'),
 14 |         code = document.createElement('code');
 15 |         pre.appendChild(code);
 16 |         code.innerHTML = temp.innerHTML.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\=""/g,'');
 17 | 
 18 |         div.parentNode.insertBefore(pre, div.nextSibling.nextSibling);
 19 | 
 20 |   });
 21 | 
 22 |   document.querySelector('section').insertAdjacentHTML('beforeend', `
 23 |   <div id="all-directions">
 24 |       <div class="n" data-bubb="_nr"></div>
 25 |       <div class="n" data-bubb="_n"></div>
 26 |       <div class="n" data-bubb="_nl"></div>
 27 |       <div class="e" data-bubb="_er"></div>
 28 |       <div class="e" data-bubb="_e"></div>
 29 |       <div class="e" data-bubb="_el"></div>
 30 |       <div class="s" data-bubb="_sr"></div>
 31 |       <div class="s" data-bubb="_s"></div>
 32 |       <div class="s" data-bubb="_sl"></div>
 33 |       <div class="w" data-bubb="_wr"></div>
 34 |       <div class="w" data-bubb="_w"></div>
 35 |       <div class="w" data-bubb="_wl"></div>
 36 |       <span id="mouse-icon"><i><img src="data:image/svg+xml;base64,
 37 | PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDY1IDQ2NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDY1IDQ2NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBjbGFzcz0iIj48Zz48cGF0aCBkPSJNMzQ2LjczNiw0NC42MjNDMzIxLjQ5NCwxNS4wMTQsMjgzLjA2LDAsMjMyLjUsMHMtODguOTk0LDE1LjAxNC0xMTQuMjM2LDQ0LjYyM2MtMjUuMzgsMjkuNzcxLTI5LjE2OSw2NC42NS0yOS4xNjksODIuNzkyICB2MjEwLjE3MWMwLDE4LjE0MiwzLjc4OSw1My4wMjEsMjkuMTY5LDgyLjc5MkMxNDMuNTA2LDQ0OS45ODcsMTgxLjk0LDQ2NSwyMzIuNSw0NjVzODguOTk0LTE1LjAxMywxMTQuMjM2LTQ0LjYyMiAgYzI1LjM4LTI5Ljc3MSwyOS4xNjktNjQuNjUsMjkuMTY5LTgyLjc5MlYxMjcuNDE1QzM3NS45MDUsMTA5LjI3MywzNzIuMTE2LDc0LjM5NCwzNDYuNzM2LDQ0LjYyM3ogTTIzMi41LDE2MiAgYy0xMC40NzcsMC0xOS04LjUyMy0xOS0xOXYtNDAuNzE2YzAtMTAuNDc3LDguNTIzLTE5LDE5LTE5czE5LDguNTIzLDE5LDE5VjE0M0MyNTEuNSwxNTMuNDc3LDI0Mi45NzcsMTYyLDIzMi41LDE2MnogICBNMzYwLjkwNSwzMzcuNTg2YzAsMTguNzcxLTYuMTksMTEyLjQxNC0xMjguNDA1LDExMi40MTRzLTEyOC40MDUtOTMuNjQzLTEyOC40MDUtMTEyLjQxNFYxMjcuNDE1ICBjMC0xOC4zNzksNS45NTMtMTA4LjUxNiwxMjAuOTA1LTExMi4yNzl2NTMuOTkyYy0xNS4xNSwzLjQyNi0yNi41LDE2Ljk4NS0yNi41LDMzLjE1NlYxNDNjMCwxNi4xNzEsMTEuMzUsMjkuNzMsMjYuNSwzMy4xNTZ2NjEuNjI4ICBjMCw0LjE0MywzLjM1Nyw3LjUsNy41LDcuNXM3LjUtMy4zNTcsNy41LTcuNXYtNjEuNjI4YzE1LjE1LTMuNDI2LDI2LjUtMTYuOTg1LDI2LjUtMzMuMTU2di00MC43MTYgIGMwLTE2LjE3MS0xMS4zNS0yOS43My0yNi41LTMzLjE1NlYxNS4xMzZjMTE0Ljk1MywzLjc2NCwxMjAuOTA1LDkzLjksMTIwLjkwNSwxMTIuMjc5VjMzNy41ODZ6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiM0NDQ0NDQiIGRhdGEtb2xkX2NvbG9yPSIjNDc5N0IxIj48L3BhdGg+PC9nPiA8L3N2Zz4=" /></i></span>
 38 |   </div>`); // <span id="compass"><i></i></span>
 39 | 
 40 |   // timeout then hide menu event info
 41 | 
 42 |   let eventsDisplay = document.getElementById('eventsDisplay');
 43 | 
 44 |   document.addEventListener('click', e => {
 45 |     if (e.target.id === 'eventsDisplay') return;
 46 |     clearTimeout(eventsDisplay.hideTimeout);
 47 |     eventsDisplay.hideTimeout = setTimeout(function() {
 48 |       eventsDisplay.innerHTML = '';
 49 |     }, 1500);
 50 |   });
 51 | 
 52 | }
 53 | 
 54 | function addElementsToDOM(markup) {
 55 |   document.querySelector('#added').insertAdjacentHTML('beforeend', markup + '<i></i><br>');
 56 | }
 57 | 
 58 | function demo() {
 59 | 
 60 |   let config = {
 61 |         reference: 'Referenced content maintained in a <b>separate configuration object</b>',
 62 |         pj: {
 63 |           vedder: 'vocals',
 64 |           mccready: 'guitar',
 65 |           gossard: 'guitar',
 66 |           ament: 'bass'
 67 |         },
 68 |         abbruzzese: {
 69 |           text: '',
 70 |           _: {
 71 |             callback: (key, item) => {
 72 |               item.innerHTML = 'Loading...';
 73 |               setTimeout(function(){
 74 |                 item.innerHTML = designQuotes[Math.floor(Math.random() * designQuotes.length)];
 75 |               }, 750);
 76 |             },
 77 |             hoverCallback: true,
 78 |             interactive: false,
 79 |             transitionOff: true
 80 |           }
 81 |         },
 82 |         toggle: {
 83 |           text: '<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjAgNjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYwIDYwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIGNsYXNzPSIiPjxnPjxnPgoJPHBhdGggZD0iTTQyLDEySDE4QzguMDc1LDEyLDAsMjAuMDc1LDAsMzBzOC4wNzUsMTgsMTgsMThoMjRjOS45MjUsMCwxOC04LjA3NSwxOC0xOFM1MS45MjUsMTIsNDIsMTJ6IE00Miw0NkgxOCAgIEM5LjE3OCw0NiwyLDM4LjgyMiwyLDMwczcuMTc4LTE2LDE2LTE2aDI0YzguODIyLDAsMTYsNy4xNzgsMTYsMTZTNTAuODIyLDQ2LDQyLDQ2eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojNEE5N0IwIiBkYXRhLW9sZF9jb2xvcj0iIzRhOTdiMCI+PC9wYXRoPgoJPHBhdGggZD0iTTE4LDE3Yy03LjE2OCwwLTEzLDUuODMyLTEzLDEzczUuODMyLDEzLDEzLDEzczEzLTUuODMyLDEzLTEzUzI1LjE2OCwxNywxOCwxN3ogTTE4LDQxYy02LjA2NSwwLTExLTQuOTM1LTExLTExICAgczQuOTM1LTExLDExLTExczExLDQuOTM1LDExLDExUzI0LjA2NSw0MSwxOCw0MXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6IzRBOTdCMCIgZGF0YS1vbGRfY29sb3I9IiM0YTk3YjAiPjwvcGF0aD4KCTxwYXRoIGQ9Ik00OC4yOTMsMjUuMjkzTDQxLDMyLjU4NmwtMy4yOTMtMy4yOTNjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBzLTAuMzkxLDEuMDIzLDAsMS40MTRsNCw0ICAgQzQwLjQ4OCwzNC45MDIsNDAuNzQ0LDM1LDQxLDM1czAuNTEyLTAuMDk4LDAuNzA3LTAuMjkzbDgtOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzQ4LjY4NCwyNC45MDIsNDguMjkzLDI1LjI5M3oiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6IzRBOTdCMCIgZGF0YS1vbGRfY29sb3I9IiM0YTk3YjAiPjwvcGF0aD4KPC9nPjwvZz4gPC9zdmc+" style="width:80px;" />',
 84 |           _: {
 85 |             background: '#F7F3CE',
 86 |             toggle: true
 87 |           }
 88 |         },
 89 |         "Interstellar hootchie kootchie": {
 90 |           text: '<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTEuOTk5IDUxMS45OTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMS45OTkgNTExLjk5OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zNzYuNzMsMjAzLjgyOFYzOS4zMzVDMzc2LjczLDE3LjY0NiwzNTkuMDg0LDAsMzM3LjM5NiwwYy0yMS42ODksMC0zOS4zMzQsMTcuNjQ2LTM5LjMzNCwzOS4zMzV2OTcuMDA1ICAgIGMtNS43MTUtMy4yNC0xMi4zMS01LjEwMS0xOS4zMzUtNS4xMDFjLTExLjY0OSwwLTIyLjEyNiw1LjA5NC0yOS4zMzUsMTMuMTY2Yy03LjIwOS04LjA3MS0xNy42ODgtMTMuMTY1LTI5LjMzNi0xMy4xNjUgICAgYy03LjAyMywwLTEzLjYxOCwxLjg1OS0xOS4zMzIsNS4wOTlWODQuMDVjMC0yMS42ODktMTcuNjQ1LTM5LjMzNS0zOS4zMzUtMzkuMzM1Yy0yMS42ODgsMC0zOS4zMzQsMTcuNjQ2LTM5LjMzNCwzOS4zMzV2MTIwLjc4OSAgICB2OTguOGMwLDM4LjA4MSwxNi40MTgsNzMuNjUxLDQzLjUyMSw5OC41ODh2OTkuNzcyYzAsNS41MjMsNC40NzcsMTAsMTAsMTBoMTM5LjkwMmM1LjUyMywwLDEwLTQuNDc3LDEwLTEwVjQxOC4wMyAgICBjMzkuOTA4LTI0LjI2MSw2NC40NjYtNjcuNTQ0LDY0LjQ2Ni0xMTQuMzkydi03MC40MzdDMzg5Ljk0NCwyMjEuNTMxLDM4NC44MjksMjExLjAzNywzNzYuNzMsMjAzLjgyOHogTTMxOC4wNjIsMzkuMzM1ICAgIGMwLTEwLjY2MSw4LjY3NC0xOS4zMzUsMTkuMzM0LTE5LjMzNWMxMC42NiwwLDE5LjMzNCw4LjY3NCwxOS4zMzQsMTkuMzM1djE1NS4wMTNjLTEuOTk1LTAuMzEzLTQuMDM4LTAuNDc5LTYuMTE5LTAuNDc5aC0zMi41NDkgICAgVjM5LjMzNXogTTI1OS4zOTIsMTcwLjYxMmMwLTAuMDEzLDAuMDAyLTAuMDI1LDAuMDAyLTAuMDM4YzAtMC4wMDktMC4wMDEtMC4wMTctMC4wMDEtMC4wMjUgICAgYzAuMDE1LTEwLjY0OSw4LjY4MS0xOS4zMDksMTkuMzM0LTE5LjMwOWMxMC42NjEsMCwxOS4zMzUsOC42NzMsMTkuMzM1LDE5LjMzNHYyMy4yOTZoLTE5LjMzN2MtNy4wMjUsMC0xMy42MTksMS44Ni0xOS4zMzMsNS4xICAgIFYxNzAuNjEyeiBNMjAwLjcyNCwyMDkuNjk3di0zOS4xMjNjMC0xMC42Niw4LjY3NC0xOS4zMzIsMTkuMzM0LTE5LjMzMmMxMC42NTIsMCwxOS4zMiw4LjY1OSwxOS4zMzQsMTkuMzA3ICAgIGMwLDAuMDA4LDAsMC4wMTcsMCwwLjAyNXY2Mi42M2MwLDAuMDI2LDAuMDAyLDAuMDUxLDAuMDAyLDAuMDc3djI5Ljg4N2MwLDEwLjY2MS04LjY3NiwxOS4zMzMtMTkuMzM4LDE5LjMzMyAgICBjLTEwLjY2LDAtMTkuMzMyLTguNjczLTE5LjMzMi0xOS4zMzNWMjA5LjY5N3ogTTM2OS45NDQsMzAzLjYzN2MwLDQxLjUyNS0yMi42ODksNzkuNzc1LTU5LjIxNSw5OS44NDIgICAgYy0wLjAyLDAuMDExLTAuMDM4LDAuMDIzLTAuMDU4LDAuMDMzYy0wLjAwMSwwLjAwMS0wLjAwMiwwLjAwMS0wLjAwMiwwLjAwMWMtMC4wMDQsMC4wMDItMC4wMDYsMC4wMDQtMC4wMDksMC4wMDUgICAgYy0wLjI4MywwLjE1Ni0wLjU1OCwwLjMyNi0wLjgyMywwLjUwN2MtMC4xMTksMC4wODEtMC4yMjgsMC4xNzEtMC4zNDQsMC4yNTdjLTAuMTQyLDAuMTA2LTAuMjg2LDAuMjA5LTAuNDIyLDAuMzIzICAgIGMtMC4xNDgsMC4xMjQtMC4yODYsMC4yNTYtMC40MjYsMC4zODdjLTAuMDk0LDAuMDg4LTAuMTkxLDAuMTcyLTAuMjgxLDAuMjY0Yy0wLjE0MywwLjE0NC0wLjI3MywwLjI5NS0wLjQwNiwwLjQ0NiAgICBjLTAuMDgsMC4wOTItMC4xNjQsMC4xODEtMC4yNDEsMC4yNzdjLTAuMTE5LDAuMTQ2LTAuMjI4LDAuMjk5LTAuMzM3LDAuNDUxYy0wLjA4MiwwLjExMy0wLjE2NiwwLjIyNC0wLjI0NCwwLjM0ICAgIGMtMC4wODksMC4xMzYtMC4xNjksMC4yNzUtMC4yNTIsMC40MTVjLTAuMDg1LDAuMTQ0LTAuMTcyLDAuMjg3LTAuMjUsMC40MzVjLTAuMDYzLDAuMTE5LTAuMTE3LDAuMjQtMC4xNzQsMC4zNjEgICAgYy0wLjA4NCwwLjE3NS0wLjE2OCwwLjM0OS0wLjI0LDAuNTI5Yy0wLjA0NSwwLjEwNy0wLjA4LDAuMjE4LTAuMTIsMC4zMjdjLTAuMDcxLDAuMTk1LTAuMTQ0LDAuMzg5LTAuMjAyLDAuNTg4ICAgIGMtMC4wMzUsMC4xMTctMC4wNjEsMC4yMzYtMC4wOTIsMC4zNTRjLTAuMDQ5LDAuMTkyLTAuMTAxLDAuMzgzLTAuMTM5LDAuNTc5Yy0wLjAzMiwwLjE2NS0wLjA1MiwwLjMzMy0wLjA3NiwwLjUgICAgYy0wLjAyMSwwLjE1LTAuMDQ5LDAuMjk4LTAuMDY0LDAuNDUxYy0wLjAzLDAuMjk4LTAuMDQ0LDAuNTk5LTAuMDQ2LDAuOWMwLDAuMDI0LTAuMDA0LDAuMDQ3LTAuMDA0LDAuMDcxdjAuMDExICAgIGMwLDAuMDI0LDAsMC4wNDgsMCwwLjA3M3Y3OS42MzRIMTg1LjU3NXYtMTcuNTczaDQxLjAzNWM1LjUyMywwLDEwLTQuNDc3LDEwLTEwcy00LjQ3Ny0xMC0xMC0xMGgtNDEuMDM1di0zNi45ODkgICAgYzcuNzEzLDQuNzk5LDE1Ljk3MSw4Ljg3MywyNC43MTcsMTIuMDcxYzEuMTMzLDAuNDE1LDIuMjkzLDAuNjExLDMuNDM0LDAuNjExYzQuMDc4LDAsNy45MS0yLjUxNSw5LjM5My02LjU2OCAgICBjMS44OTYtNS4xODctMC43NzEtMTAuOTI5LTUuOTU3LTEyLjgyNmMtNDQuOTI0LTE2LjQyOC03NS4xMDctNTkuNDYzLTc1LjEwNy0xMDcuMDg2di05OC44Vjg0LjA1ICAgIGMwLTEwLjY2Miw4LjY3NC0xOS4zMzUsMTkuMzM2LTE5LjMzNWMxMC42NjEsMCwxOS4zMzMsOC42NzQsMTkuMzMzLDE5LjMzNXY4Ni41MjR2MzkuMTIzdjUzLjQ3MSAgICBjMCwyMS4xNDksMTYuNzgxLDM4LjQ0NiwzNy43MjcsMzkuMjkzYy0xLjYxOCwyLjU2LTMuMTUsNS4xOTQtNC41NjYsNy45MTVjLTIuNTQ5LDQuOS0wLjY0MywxMC45MzgsNC4yNTcsMTMuNDg2ICAgIGMxLjQ3NSwwLjc2NywzLjA1MiwxLjEzLDQuNjA2LDEuMTNjMy42MTEsMCw3LjA5OC0xLjk2Miw4Ljg4LTUuMzg3YzE1LjEwMi0yOS4wMzMsNDQuODEzLTQ3LjA2OCw3Ny41NDItNDcuMDY4aDEyLjEwOSAgICBjNS41MjMsMCwxMC00LjQ3NywxMC0xMHMtNC40NzctMTAtMTAtMTBoLTQyLjU1NGMtMTAuNjQ4LDAtMTkuMzExLTguNjUzLTE5LjMzMS0xOS4yOTd2LTAuMDM3YzAtMC4wMDctMC4wMDItMC4wMTQtMC4wMDItMC4wMjEgICAgYzAuMDExLTEwLjY1MSw4LjY3OS0xOS4zMTMsMTkuMzMzLTE5LjMxM2g3MS44ODZjMy44NSwwLDcuNDMxLDEuMTQ0LDEwLjQ0NywzLjA5YzAuMTQxLDAuMDk3LDAuMjg3LDAuMTg1LDAuNDM0LDAuMjc0ICAgIGM1LjA5OCwzLjQ4NCw4LjQ1Miw5LjM0LDguNDUyLDE1Ljk2N1YzMDMuNjM3eiIgZmlsbD0iIzQ3OTdiMSIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTIxNS4zOTQsMzMyLjA5Yy01LjQyMy0xLjA3My0xMC42OCwyLjQ0NS0xMS43NTUsNy44NjJsLTAuMDQ5LDAuMjU3Yy0xLjAzNCw1LjQyNSwyLjUyNiwxMC42NjEsNy45NTIsMTEuNjk0ICAgIGMwLjYzMywwLjEyMSwxLjI2MiwwLjE3OSwxLjg4MywwLjE3OWM0LjcwNSwwLDguODk4LTMuMzM4LDkuODExLTguMTMxYzAuMDA0LTAuMDE5LDAuMDE3LTAuMDg4LDAuMDItMC4xMDYgICAgQzIyNC4zMzEsMzM4LjQyOCwyMjAuODExLDMzMy4xNjUsMjE1LjM5NCwzMzIuMDl6IiBmaWxsPSIjNDc5N2IxIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMjU1LjU3OCw0NTQuNDI3aC0wLjIzOGMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHM0LjQ3OCwxMCwxMCwxMGgwLjIzOGM1LjUyMiwwLDEwLTQuNDc3LDEwLTEwICAgIFMyNjEuMTAxLDQ1NC40MjcsMjU1LjU3OCw0NTQuNDI3eiIgZmlsbD0iIzQ3OTdiMSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" />interstellar hootchie kootchie',
 91 |           _: {
 92 |             background: '#F7F3CE',
 93 |             color: '#4797B1'
 94 |           }
 95 |         },
 96 |         _nl: { text: 'North, anchor left', _: { interactive: true, direction: 'north', anchor: 'left' } },
 97 |         _n: { text: 'North', _: { interactive: true, direction: 'north' } },
 98 |         _nr: { text: 'North, anchor right', _: { interactive: true, direction: 'north', anchor: 'right' } },
 99 |         _el: { text: 'East, anchor left', _: { interactive: true, direction: 'east', anchor: 'left' } },
100 |         _e: { text: 'East', _: { interactive: true, direction: 'east' } },
101 |         _er: { text: 'East, anchor right', _: { interactive: true, direction: 'east', anchor: 'right' } },
102 |         _sl: { text: 'South, anchor left', _: { interactive: true, direction: 'south', anchor: 'left' } },
103 |         _s: { text: 'South', _: { interactive: true, direction: 'south' } },
104 |         _sr: { text: 'South, anchor right', _: { interactive: true, direction: 'south', anchor: 'right' } },
105 |         _wl: { text: 'West, anchor left', _: { interactive: true, direction: 'west', anchor: 'left' } },
106 |         _w: { text: 'West', _: { interactive: true, direction: 'west' } },
107 |         _wr: { text: 'West, anchor right', _: { interactive: true, direction: 'west', anchor: 'right' } },
108 |       };
109 | 
110 |   bubb(config, (key, item) => {
111 | 
112 |     let eventsDisplay = document.getElementById('eventsDisplay');
113 |     eventsDisplay.innerHTML = 'clicked ' + key;
114 |     eventsDisplay.setAttribute('color', Array.from(item.parentNode.children).indexOf(item));
115 | 
116 |     console.log('clicked ' + key);
117 | 
118 |   });
119 | 
120 |   document.querySelector('#toggle').addEventListener('click', function(){
121 |     bubb.toggle('toggle');
122 |   }, false);
123 |   document.querySelector('#toggler').addEventListener('click', function(){
124 |     bubb.toggle('toggle');
125 |   }, false);
126 | 
127 |   bubb.update('pj.mccready', 'lead guitar');
128 |   bubb.add('pj.irons', 'drums');
129 |   bubb.update('abbruzzese', { background: '#FFDEDE', color: '#444' });
130 | 
131 |   addElementsToDOM( '<div data-bubb="added_one">Insert method 1</div>' );
132 | 
133 |   config.added_one = {
134 |     text: 'config[reference] edited before refreshing bubb',
135 |     _: {
136 |       background: '#4797B1',
137 |       color: '#fff',
138 |       borderRadius: '14px',
139 |       direction: 'north',
140 |       anchor: 'left'
141 |     }
142 |   };
143 | 
144 |   bubb.refresh(); // finds and adds new bubbs
145 | 
146 |   addElementsToDOM( '<div data-bubb="added_two">Insert method 2</div>' );
147 | 
148 |   bubb.update('added_two', 'bubb.update(reference, content) called after adding bubb to DOM');
149 |   bubb.update('added_two', {
150 |     width: 'section',
151 |     anchor: 'left',
152 |     fontSize: '23px',
153 |     color: '#444',
154 |     delay: 500,
155 |     callback: true,
156 |     class: 'tipcolor',
157 |     background: 'repeating-linear-gradient(45deg, #FFDEDE, #FFDEDE 25%, #F7F3CE 25%, #F7F3CE 50%, #C5ECBE 50%, #C5ECBE 75%, #4797B1 75%, #4797B1 100%)'
158 |   });
159 | 
160 |   document.body.insertAdjacentHTML('beforeend', '<span data-bubb="bubble_bobble" class="bubble-bobble wait"></span>');
161 |   //bubb.refresh();
162 | 
163 |   bubb.update('bubble_bobble',`
164 |     <div>Share Bubb</div>
165 |     <ul class="share-buttons">
166 |       <li><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fbubb.surge.sh&text=Bubb%20-%20Euphemism%20for%20a%20JS%20tooltip:%20http%3A%2F%2Fbubb.surge.sh&via=frdnrdb" target="_blank" title="Tweet"><img alt="Tweet" src="/assets/images/icons/twitter.svg" /></a></li>
167 |       <li><a href="http://www.reddit.com/submit?url=http%3A%2F%2Fbubb.surge.sh&title=Bubb%20-%20Euphemism%20for%20a%20JS%20tooltip" target="_blank" title="Submit to Reddit"><img alt="Submit to Reddit" src="/assets/images/icons/reddit.svg" /></a></li>
168 |       <li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fbubb.surge.sh&t=bubb" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="/assets/images/icons/facebook.svg" /></a></li>
169 |     </ul>`);
170 |   bubb.update('bubble_bobble', {
171 |     direction: 'west',
172 |     anchor: 'right',
173 |     width: '200px',
174 |     class: 'share-bubb',
175 |     callback: function(){
176 |       console.log('thanks');
177 |     }
178 |   });
179 | 
180 | }
181 | 
182 | const display_methods = {
183 | 
184 | target: '#methods',
185 | code:`// --> available methods
186 | 
187 | bubb.refresh();
188 |   // initialize new data-bubb elements added to DOM
189 | 
190 | bubb.update(reference, content | options);
191 | 
192 | bubb.update(menu-reference, options);
193 | bubb.update(menu-reference.menu-item, content);
194 | 
195 | bubb.add(menu-reference.menu-item, content);
196 | bubb.remove(menu-reference.menu-item);
197 |   // these methods adds or removes DOM elements
198 | 
199 | `};
200 | 
201 | const display_options_setup = {
202 | 
203 | target: '#options_setup',
204 | code:`// --> options setup
205 | 
206 | let config = {
207 |   one: {
208 |     text: 'content',
209 |     _: {
210 |       // ... one options
211 |     }
212 |   },
213 |   two: {
214 |     menu_item_1: 'content',
215 |     menu_item_2: 'content',
216 |     _: {
217 |       // ... two options
218 |     }
219 |   },
220 |   _: {
221 |     // ... global options
222 |   }
223 | }`};
224 | 
225 | const display_options = {
226 | 
227 | target: '#options',
228 | code:`// --> available options
229 | 
230 | callback: false
231 |   // function(){} overrides initial (or global) callback
232 |   // boolean true adds click listener and reports to default callback
233 | 
234 | transitionOff: false
235 |   // boolean
236 | 
237 | interactive: false
238 |   // boolean, default true for menus and option callback
239 | 
240 | hoverCallback: false
241 |   // boolean, trigger callback on element:hover
242 | 
243 | delay: false
244 |   // int value, microseconds reveal delay
245 | 
246 | autoHide: false
247 |   // int or milliseconds
248 | 
249 | toggle: false
250 |   // boolean, activate tooltip with function call bubb.toggle(key)
251 | 
252 | direction: false
253 |   // string 'north', 'west' or 'east' (default false = 'south')
254 | 
255 | autoDirection: false
256 |   // boolean, screen edge proximity aware direction change
257 | 
258 | anchor: false
259 |   // string 'left' or 'right' (default false = 'centered')
260 | 
261 | width: false
262 |   // int value <= 100 (document width percentage)
263 |   // css string with units (eg. '300px')
264 |   // querySelector string (eg. 'section:first-of-type')
265 | 
266 | borderRadius: '4px'
267 |   // css string with units
268 | 
269 | fontSize: '17px'
270 |   // css string with units
271 | 
272 | background: '#444'
273 |   // css color string
274 | 
275 | color: '#fff'
276 |   // css color string
277 | 
278 | class: false
279 |   // string, className to target current bubb specifically
280 | 
281 | `};
282 | 
283 | const display_basic = {
284 | 
285 | target: '#basic',
286 | code: `let config = {
287 |   reference: 'Referenced content maintained in a <b>separate configuration object</b>'
288 | };
289 | 
290 | bubb(config);`
291 | 
292 | }
293 | 
294 | const display_menu = {
295 | 
296 | target: '#menu',
297 | code: `let config = {
298 |   pj: {
299 |     vedder: 'vocals',
300 |     mccready: 'guitar',
301 |     gossard: 'guitar',
302 |     ament: 'bass'
303 | };
304 | 
305 | bubb(config, (key, item) => {
306 |   console.log('clicked ' + key);
307 | });
308 | 
309 | bubb.update('pj.mccready', 'lead guitar');
310 | bubb.add('pj.irons', 'drums');
311 | // bubb.remove('pj.vedder');`
312 | 
313 | }
314 | 
315 | const display_opts = {
316 | 
317 | target: '#opts',
318 | code: `let config = {
319 |   abbruzzese: {
320 |     text: '',
321 |     _: {
322 |       callback: function(key, item) {
323 |         item.innerHTML = 'Loading...';
324 |         setTimeout(function(){ // simulate async ajax
325 |           item.innerHTML = designQuotes[Math.floor(Math.random() * designQuotes.length)];
326 |         }, 1000);
327 |       },
328 |       hoverCallback: true,
329 |       interactive: false,
330 |       transitionOff: true
331 |     }
332 |   }
333 | };
334 | 
335 | bubb(config);
336 | 
337 | bubb.update('abbruzzese', { background: '#fad', color: '#444' });`
338 | 
339 | }
340 | 
341 | const display_toggle = {
342 | 
343 | target: '#toggle',
344 | code: `bubb({
345 |   toggle: {
346 |     text: '<img src="toggleSwitch.png">',
347 |     _: {
348 |       background: '#F7F3CE',
349 |       toggle: true
350 |     }
351 |   }
352 | });
353 | 
354 | someElement.addEventListener('click',
355 |   () => bubb.toggle('toggle') );
356 | `
357 | 
358 | }
359 | 
360 | const display_added = {
361 | 
362 | target: '#added',
363 | code: `// method 1: update main config then refresh bubb
364 | 
365 | addElementToDOM( '<div data-bubb="added_one">Insert method 1</div>' ); // demo function
366 | 
367 | config.added_one = {
368 |   text: 'config[reference] edited before adding bubb to DOM',
369 |   _: {
370 |     background: '#4797B1',
371 |     color: '#fff',
372 |     borderRadius: '14px',
373 |     direction: 'north',
374 |     anchor: 'left'
375 |   }
376 | };
377 | 
378 | bubb.refresh();
379 | 
380 | 
381 | 
382 | // method 2: use bubb update api
383 | 
384 | addElementToDOM( '<div data-bubb="added_two">Insert method 2</div>' ); // demo function
385 | 
386 | bubb.update('added_two', 'bubb.update(reference, content) called after adding bubb to DOM');
387 | bubb.update('added_two', {
388 |   width: 'section',
389 |   anchor: 'left',
390 |   fontSize: '23px',
391 |   color: '#444',
392 |   delay: 500,
393 |   callback: true,
394 |   class: 'tipcolor',
395 |   background: 'repeating-linear-gradient(45deg, #FFDEDE, #FFDEDE 25%, #F7F3CE 25%, #F7F3CE 50%, #C5ECBE 50%, #C5ECBE 75%, #4797B1 75%, #4797B1 100%)'
396 | });`
397 | }
398 | 
399 | const designQuotes = [
400 |   "<p>There are no bad ideas, just bad decisions.</p>",
401 |   "<p>It&#8217;s not in the vulgar, it&#8217;s not in the shock that one finds art. And it&#8217;s not in the excessively beautiful. It&#8217;s in between; it&#8217;s in nuance.   </p>",
402 |   "<p>Don&#8217;t design for everyone. It&#8217;s impossible. All you end up doing is designing something that makes everyone unhappy.  </p>",
403 |   "<p>Designers deal in ideas. They give shape to ideas that shape our world, enrich everyday experiences, and improve our lives. Where there’s confusion, designers fashion clarity; where there’s chaos, designers construct order; where there’s entropy, designers promote vitality; where there’s indifference, designers swell passion; where there’s mediocrity, designers imbue excellence; and where there’s silence, designers lend voice. </p>",
404 |   "<p>Stop downloading. Start uploading </p>",
405 |   "<p>Good design is partially creativity and innovation, but primarily knowledge and awareness.</p>",
406 |   "<p>Web design is responsive design. Responsive web design is web design, done right.</p>",
407 |   "<p>As long as there are people, there will be user experience, and user interface designers.</p>",
408 |   "<p>Well established hierarchies are not easily uprooted</p>",
409 |   "<p>Everything is possible, that&#8217;s what science is all about. No, that&#8217;s what&#8217;s being a Magical Elf is all about.  </p>",
410 |   "<p>The designer is not always right. The researcher is not always wrong. Profit is not always the motive; market research, whatever its outcome, should never be used as a good excuse for bad design &#8211; in the same sense that good design should never be used to promote a bad product.</p>",
411 |   "<p>You get up early in the morning and you work all day. That’s the only secret.</p>",
412 |   "<p>[Designers&#8217;] primary competence lies not in the technicalities of a craft but in the mastery of a process.</p>",
413 |   "<p>You have to finish things — that’s what you learn from, you learn by finishing things.</p>",
414 |   "<p>A person tends to critique a design in one of several ways. The most common, and usually least valuable, is by gut reaction.  </p>",
415 |   "<p>You do a disservice to your clients when you <strong>don&#8217;t</strong> fire the bad ones because you eventually provide poor service to those you don&#8217;t want to serve.  </p>",
416 |   "<p>Think more, design less.</p>",
417 |   "<p>Design is how you treat your customers. If you treat them well from an environmental, emotional, and aesthetic standpoint, you&#8217;re probably doing good design.  </p>",
418 |   "<p>Take a walk. Dance a jig. Get some sun. Don&#8217;t take yourself to serious. Cook something ethnic. Play the 3 chords you know on guitar. Go get coffee. Tell a bad joke, to yourself, and laugh. Look at the way a leaf is made. Overhear someone else&#8217;s conversation. Write it down. Remember it later. Get some sleep.  </p>",
419 |   "<p>Innovation is seldom hindered by platform.</p>"
420 | ];
421 | 
422 | function render_display_functions() {
423 | 
424 |   // display bubb js demo code
425 | 
426 |   function buildCodeBlock(from) {
427 | 
428 |     let pre = document.createElement('pre'),
429 |         code = document.createElement('code');
430 |         pre.appendChild(code);
431 |         code.innerHTML = from.toString().replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\/\*\*\/[\s\S]*\/\*\*\//igm,'');
432 | 
433 |     return pre;
434 | 
435 |   }
436 | 
437 |   [display_basic, display_menu, display_opts, display_added, display_toggle, display_methods, display_options, display_options_setup].forEach( (obj, i) => {
438 |       let block = buildCodeBlock(obj.code);
439 |       document.querySelector(obj.target).appendChild(block);
440 |   });
441 | 
442 |   // colorful code
443 | 
444 |   hljs.initHighlightingOnLoad();
445 |   document.body.classList.add('done');
446 | 
447 | }
448 | 
449 | /*
450 | 
451 |   // mouse pointer aware directional arrow
452 | 
453 |   function getAngle(cx, cy, ex, ey) {
454 |     var dy = ey - cy;
455 |     var dx = ex - cx;
456 |     var theta = Math.atan2(dy, dx);
457 |     theta *= 180 / Math.PI;
458 |     return theta;
459 |   }
460 | 
461 |   function compass() {
462 | 
463 |     let compass = document.querySelector('#all-directions');
464 |     let needle = document.querySelector('#compass');
465 | 
466 |     let box = needle.getBoundingClientRect();
467 | 
468 |     ['mousemove','mouseenter'].forEach( event => compass.addEventListener(event, function(e) {
469 | 
470 |       if (e.target.nodeName !== 'DIV') return;
471 | 
472 |       let angle = getAngle(box.left, box.top, e.clientX, e.clientY),
473 |           angleStep = Math.ceil((angle+1) / 22.5) * 22.5;
474 | 
475 |       needle.style.transform = 'rotate(' + (angleStep + 67.5) + 'deg)';
476 | 
477 |     }, false));
478 | 
479 |   }
480 | 
481 | */
482 | 
483 | render_code_blocks();
484 | demo();
485 | render_display_functions();
486 | 
487 | //compass();
488 | 
489 | })(window.bubb, window.hljs);
490 | 


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 |   TODO!
  4 | 
  5 |   * IMPROVE add eventEmitter
  6 |       - https://www.sitepoint.com/nodejs-events-and-eventemitter/
  7 |       - https://github.com/chrisdavies/eev
  8 | 
  9 |   * IMPROVE Implement some try/catch error handling and/or input type checks to prevent user input errors
 10 | 
 11 |   * ADD mobile version
 12 |   * ADD Implement dim-rest-of-page-option
 13 | 
 14 |   * TRY alternative tooltip layout (material-ui-dropdown-menu-ish) as option
 15 |   * TRY alternative theme (light (box-shadowed) or thin border) as option
 16 | 
 17 |   * CONSIDER Menu-style as part of package
 18 | 
 19 | */
 20 | 
 21 | (function(window, document) {
 22 | 
 23 | const bubb = (config, callback) => {
 24 | 
 25 |   bubb.config = bubb.config || (typeof config === 'object' ? config : {});
 26 |   bubb.config._ = bubb.config._ || config._ || {};
 27 |   bubb.callback = bubb.callback || (typeof bubb.config._.callback === 'function' && bubb.config._.callback) || (typeof callback === 'function' && callback);
 28 | 
 29 |   // class bubb indicates the element has already been initiated/ configured
 30 |   let bubbs = arguments[0] === 'update' ? [arguments[1]] : Array.from( document.querySelectorAll('[data-bubb]:not(.bubb)') );
 31 | 
 32 |   if (!bubbs.length) return;
 33 | 
 34 |   !bubb._initialized && initBubb();
 35 | 
 36 |   bubbs.forEach(buildElement);
 37 | 
 38 | }
 39 | 
 40 | const buildElement = _trigger => {
 41 | 
 42 |   let key = _trigger.dataset.bubb.trim(),
 43 |       data = bubb.config[key] || key,
 44 | 
 45 |       chck = typeof data === 'object',
 46 |       opts = chck && data._, // config contains options _
 47 |       only = opts && Object.keys(data).length === 1, // options only, use key as content
 48 |       menu = chck && !data.hasOwnProperty('text'); // config indicates a menu
 49 | 
 50 |       only && (data.text = key);
 51 | 
 52 |       let props = !menu ? opts ? ['text'] : [false] : Object.keys(data),
 53 |       bindMenu = typeof bubb.callback === 'function' || typeof bubb.config._.callback === 'function',
 54 |       triggerPosition = window.getComputedStyle(_trigger).position;
 55 | 
 56 |       _trigger._bubb = {
 57 |         key: key,
 58 |         config: setElementConfiguration(opts),
 59 |         type: menu ? 'menu' : opts ? 'opts' : 'string',
 60 |         markup: props.reduce( buildElementMarkup.bind(this, key), '' ),
 61 |         bind: (menu && bindMenu) || (opts && (typeof opts.callback === 'function' || typeof opts.callback === 'boolean'))
 62 |       };
 63 | 
 64 |       triggerPosition && !triggerPosition.match(/absolute|fixed|relative/) && (_trigger.style.position = 'relative');
 65 | 
 66 |       _trigger.classList.add('bubb');
 67 | 
 68 |       bubb.triggers[key] = _trigger;
 69 | 
 70 |       bindElement(_trigger);
 71 | 
 72 | };
 73 | 
 74 | const setElementConfiguration = opts => {
 75 | 
 76 |   return availableOptions.reduce( (config, option) => {
 77 |     opts && opts.hasOwnProperty(option) ? config[option] = opts[option]
 78 |       : bubb.config._.hasOwnProperty(option) ? config[option] = bubb.config._[option]
 79 |       : false;
 80 |     return config;
 81 |   }, {});
 82 | 
 83 | };
 84 | 
 85 | const buildElementMarkup = (key, markup, prop) => {
 86 | 
 87 |     if (prop === '_') return markup;
 88 | 
 89 |     let content = prop ? bubb.config[key][prop] : bubb.config[key] || key,
 90 |         selector = key + (prop && prop !== 'text' ? '.' + prop : ''),
 91 |         attribute = ` data-bubb-value="${selector}"`;
 92 | 
 93 |     return markup += `<div ${attribute}><span>${content}</span></div>`;
 94 | 
 95 | };
 96 | 
 97 | const bindElement = (_trigger) => {
 98 | 
 99 |   let bubbEvents = _trigger._bubb.config.toggle ? [] : ['mouseenter', 'mouseleave'];
100 | 
101 |   if (_trigger._bubb.bind) bubbEvents.push('mousedown');
102 | 
103 |   bubbEvents.forEach( event => _trigger.addEventListener(event, eventHandler, false) );
104 | 
105 | };
106 | 
107 | const configureElement = _trigger => {
108 | 
109 |     let trigger = _trigger._bubb,
110 |         bubble = bubb._element,
111 |         config = bubble._config = trigger.config;
112 | 
113 |     bubble.style.visibility = 'hidden';
114 | 
115 |     bubble._elementContent.innerHTML = trigger.markup;
116 | 
117 |     bubble._bind = (trigger.bind && (config.interactive !== false)) || config.toggle;
118 | 
119 |     bubble.className = config.class || '';
120 | 
121 |     setWidth(config, _trigger, bubble);
122 | 
123 |     trigger.type === 'menu' && _trigger.classList.add('bubb-menu');
124 | 
125 |     _trigger.appendChild(bubble);
126 |     bubb._trigger = _trigger;
127 |     bubb._visible = false;
128 | 
129 |     appendStyles(bubb._element, '_bubblePreactive');
130 | 
131 | };
132 | 
133 | const bubbShow = () => {
134 | 
135 |   appendStyles(bubb._element, '_bubbleActive');
136 |   bubb._visible = true;
137 | 
138 | };
139 | 
140 | const bubbHide = (e) => {
141 | 
142 |   appendStyles(bubb._element, ['_bubbleInactive', '_bubblePreactive']);
143 |   bubb._visible = false;
144 | 
145 | };
146 | 
147 | const autoDirection = (e, target) => {
148 | 
149 |   if (!e) return;
150 | 
151 |   const h = bubb._element.offsetHeight || 150;
152 |   const w = bubb._element.offsetWidth || 150;
153 |   const d = target._bubb.config.direction;
154 | 
155 |   const rect = target.getBoundingClientRect();
156 | 
157 |   const limits = {
158 |     w: rect.left < w,
159 |     e: rect.right > (window.innerWidth - w),
160 |     n: rect.top < h,
161 |     s: rect.bottom > (window.innerHeight - h)
162 |   }
163 | 
164 |   if (d && (d === 'east' || d === 'west')) {
165 |     bubb._autoDirection = limits.w ? 'east' : limits.e ? 'west' : false;
166 |     bubb._autoAnchor = limits.n ? 'left' : limits.s ? 'right' : false;
167 |   }
168 |   else {
169 |     bubb._autoDirection = limits.s ? 'north' : limits.n ? 'south' : false;
170 |     bubb._autoAnchor = false;
171 |   }
172 | 
173 |   return bubb._autoDirection;
174 | 
175 | };
176 | 
177 | const eventHandler = function(e) {
178 | 
179 |     if (!this._bubb) return;
180 | 
181 |     // ---> configure (if autoDirection in config OR trigger new element)
182 | 
183 |     (
184 |       ((bubb.config._.autoDirection || this._bubb.config.autoDirection)
185 |           && autoDirection(e, this)
186 |       )
187 |       || (bubb._trigger !== this)
188 |     )
189 |     && configureElement(this);
190 | 
191 |     // ---> reveal or hide
192 | 
193 |     window.clearTimeout(bubb._timerOn);
194 |     window.clearTimeout(bubb._timerOff);
195 | 
196 |     e.type === 'mouseenter'
197 |       ? bubb._timerOn = window.setTimeout( bubbShow, (this._bubb.config.delay | 0) || 0)
198 |       : e.type !== 'mousedown' && bubbHide(e);
199 | 
200 |     if (this._bubb.config.autoHide) {
201 |       bubb._timerOff = window.setTimeout( bubbHide, this._bubb.config.autoHide + (this._bubb.config.delay | 0) );
202 |     }
203 | 
204 |     // ---> leave
205 | 
206 |     if (!this._bubb.bind || e.type === 'mouseleave') return;
207 | 
208 |     // ---> callback
209 | 
210 |     let hover = this._bubb.config.hoverCallback,
211 |         bubbvalue = hover ? this.dataset.bubb : e.target.dataset.bubbValue || e.target.parentNode.dataset.bubbValue || e.target.parentNode.parentNode.dataset.bubbValue;
212 | 
213 |     if (!bubbvalue) return;
214 | 
215 |     let thiscallback = (typeof this._bubb.config.callback === 'function' && this._bubb.config.callback) || bubb.callback,
216 |         item = this.querySelector(`[data-bubb-value="${this.dataset.bubb}"]`) || e.target;
217 | 
218 |     thiscallback(bubbvalue, item, this, e.type);
219 | 
220 | }
221 | 
222 | const isTrigger = (node, check) => {
223 | 
224 |   if (!node) return;
225 |   if (node._bubb && (check ? node === bubb._trigger : true)) return node;
226 |   return isTrigger(node.parentNode);
227 | 
228 | };
229 | 
230 | const clickOutside = function(e) {
231 | 
232 |   // _toggler initiated the toggle
233 | 
234 |   !bubb._toggler && (bubb._toggler = e.target);
235 | 
236 |   // avoid toggle initiator to negate the toggle
237 | 
238 |   if (bubb._toggler === e.target) return;
239 | 
240 |   // click inside; the caller is the toggled element
241 | 
242 |   if (isTrigger(e.target, bubb._trigger)) return;
243 | 
244 |   // release _toggler, remove event listener and hide bubb
245 | 
246 |   bubb._toggler = false;
247 |   window.removeEventListener('click', clickOutside, false);
248 |   eventHandler.call(bubb._trigger, {target: bubb._trigger, type: 'mouseleave'});
249 | 
250 | }
251 | 
252 | const toggle = () => {
253 | 
254 |     let element = arguments[0],
255 |         _trigger = (typeof element === 'object' && element) || bubb.triggers[element];
256 | 
257 |     if (!_trigger || !_trigger._bubb.config.toggle) {
258 |       console.error('bubb: trying to toggle a non-existing or non-toggled element');
259 |       return;
260 |     }
261 | 
262 |     //_trigger !== bubb._trigger && configureElement(_trigger);
263 | 
264 |     window[ (bubb._visible ? 'remove' : 'add') + 'EventListener']('click', clickOutside, false);
265 |     eventHandler.call(_trigger, {target: _trigger, type: bubb._visible ? 'mouseleave' : 'mouseenter'});
266 | 
267 | };
268 | 
269 | const update = () => {
270 | 
271 |       let key = arguments[0], contentOrConfig = arguments[1];
272 | 
273 |       if (typeof key !== 'string' || !contentOrConfig) return;
274 | 
275 |       let updateOptions = typeof contentOrConfig === 'object',
276 |           menu = key.split('.').reduce( (obj, val, i) => {
277 |             obj[['key','val'][i]] = val;
278 |             return obj;
279 |           }, {}),
280 |           _trigger = document.querySelector(`[data-bubb="${menu.key || key}"]`);
281 | 
282 |       if (!_trigger && !updateOptions) return;
283 | 
284 |       if (!_trigger) {
285 |         console.error('bubb: trying to update a non-existing element');
286 |         return;
287 |       }
288 | 
289 |       // update added DOM element - when bubb.refresh() has not been used
290 | 
291 |       if (!_trigger._bubb) bubb('update', _trigger);
292 | 
293 |       bubb._trigger = false;
294 | 
295 |       // update element
296 | 
297 |       if (!updateOptions) {
298 |         _trigger._bubb.markup = _trigger._bubb.markup.replace(new RegExp(`<div\\s+data-bubb-value="${key}">.*?</div>`), `<div data-bubb-value="${key}"><span>${contentOrConfig}</span></div>`);
299 |         return;
300 |       }
301 | 
302 |       // update element config
303 | 
304 |       let bindDefault = typeof contentOrConfig.callback === 'boolean' && !_trigger._bubb.bind,
305 |           bindSelf = typeof contentOrConfig.callback === 'function' && !_trigger._bubb.config.hasOwnProperty('callback'),
306 |           bindHover = contentOrConfig.hoverCallback && !_trigger._bubb.config.hoverCallback;
307 | 
308 |       if (bindDefault || bindSelf || bindHover) _trigger._bubb.bind = true;
309 | 
310 |       if (bindDefault || bindSelf) _trigger.addEventListener( 'mousedown', eventHandler, false);
311 | 
312 |       Object.keys(contentOrConfig).forEach( updatedKey => {
313 |         if (!~availableOptions.indexOf(updatedKey)) return;
314 |         if (_trigger) _trigger._bubb.config[updatedKey] = contentOrConfig[updatedKey];
315 |         else bubb.config['_'][updatedKey] = contentOrConfig[updatedKey];
316 |       });
317 | 
318 |       // update main config
319 | 
320 |       updateMainConfig(key, contentOrConfig, updateOptions, _trigger);
321 | 
322 | };
323 | 
324 | const addOrRemove = () => {
325 | 
326 |   if (arguments.length === 0) {
327 |     bubb();
328 |     return;
329 |   }
330 | 
331 |   let key = arguments[0], value = arguments[1],
332 |       menu = key.split('.').reduce( (obj, val, i) => {
333 |         obj[['key','val'][i]] = val;
334 |         return obj;
335 |       }, {});
336 | 
337 |   if (!menu.val || !bubb.config[menu.key]) return;
338 | 
339 |   // add menu item
340 | 
341 |   bubb._trigger = false;
342 | 
343 |   if (value && typeof value === 'string' && !bubb.config[menu.key][menu.val]) {
344 | 
345 |     bubb.config[menu.key][menu.val] = value;
346 | 
347 |     document.querySelector(`[data-bubb="${menu.key}"]`)._bubb.markup += `<div data-bubb-value="${key}"><span>${value}</span></div>`;
348 |     return;
349 | 
350 |   }
351 | 
352 |   // remove menu item
353 | 
354 |   if (!value && bubb.config[menu.key][menu.val]) {
355 | 
356 |     delete bubb.config[menu.key][menu.val];
357 | 
358 |     let _trigger = document.querySelector(`[data-bubb="${menu.key}"]`);
359 |     _trigger._bubb.markup = _trigger._bubb.markup.replace(new RegExp(`<div\\s+data-bubb-value="${key}">.*?</div>`), '');
360 | 
361 |   }
362 | 
363 | };
364 | 
365 | const setWidth = (config, _trigger, _bubble) => {
366 | 
367 |   let input = config.width,
368 |       anchor = config.anchor,
369 |       direction = config.direction,
370 |       sideways = direction === 'east' || direction === 'west';
371 | 
372 |   // '300px', '3em'
373 |   if (typeof input === 'string' && parseInt(input)) {
374 |     _bubble.style.width = input;
375 |     return;
376 |   }
377 | 
378 |   // 33, '33' || 'section > div'
379 |   let width = (input | 0) || document.querySelector(input);
380 | 
381 |   if (!width) {
382 |     _bubble.style.width = '100%';
383 |     return;
384 |   }
385 | 
386 |   let padding = 30,
387 |       fill = typeof width === 'object',
388 |       bodyw = document.body.offsetWidth,
389 |       box = _trigger.getBoundingClientRect(),
390 |       boxm = box.width/2,
391 |       boxl = box.left,
392 |       boxr = box.right,
393 |       inputWidth = fill ? width.offsetWidth : (width === 100 ? bodyw - padding*2 : (width * bodyw) / 100);
394 | 
395 |   if (anchor || sideways) {
396 | 
397 |     let newWidth = !sideways && anchor
398 |                       ? anchor === 'left'
399 |                       ? bodyw - boxl - padding : anchor === 'right'
400 |                       ? bodyw - ( bodyw - boxr ) - padding
401 |                       : false
402 |                    : direction === 'east'
403 |                       ? bodyw - boxr - padding : direction === 'west'
404 |                       ? boxl - padding
405 |                       : false;
406 | 
407 |     if (newWidth) {
408 |       _bubble.style.width = Math.min(inputWidth, newWidth) + 'px';
409 |       return;
410 |     }
411 | 
412 |   }
413 | 
414 |   let newWidth = Math.min(inputWidth, ((boxl + boxm > bodyw/2 ? bodyw - boxr + boxm: boxl + boxm) - padding) * 2);
415 | 
416 |   _bubble.style.width = newWidth + 'px';
417 |   _bubble.style.left = (boxm - newWidth/2) + 'px';
418 |   _bubble._elementTip.style.left = newWidth/2 + 'px';
419 | 
420 | };
421 | 
422 | const updateMainConfig = (key, contentOrConfig, updateOptions, _trigger) => {
423 | 
424 |   let typeMenu = _trigger._bubb.type === 'menu',
425 |       typeOptions = _trigger._bubb.type === 'opts',
426 |       keyVal = ~key.indexOf('.') && key.split('.'),
427 |       menu = keyVal ? keyVal.reduce( (obj, val, i) => {
428 |         obj[['key','val'][i]] = val;
429 |         return obj;
430 |       }, {}) : {};
431 | 
432 |   if (!typeMenu && !typeOptions && !updateOptions) {
433 |       bubb.config[key] = contentOrConfig;
434 |       return;
435 |   }
436 | 
437 |   let prop = menu.key || key;
438 | 
439 |   if (!updateOptions) {
440 |     bubb.config[prop][menu.val || 'text'] = contentOrConfig;
441 |     return;
442 |   }
443 | 
444 |   if (!typeMenu && !typeOptions) {
445 |     bubb.config[prop] = {
446 |       text: bubb.config[prop],
447 |       _: contentOrConfig
448 |     };
449 |     _trigger._bubb.type === 'opts';
450 |     return;
451 |   }
452 | 
453 |   bubb.config[prop]['_'] = bubb.config[prop]['_'] || contentOrConfig;
454 |   Object.assign(bubb.config[prop]['_'], contentOrConfig);
455 | 
456 | };
457 | 
458 | const styleVariables = {
459 |   tipsize: '12px',
460 |   offset: '.15em',
461 |   distance: '20px',
462 |   easing: 'cubic-bezier(0,0,0,1)',
463 |   duration: '.3s',
464 |   background: '#444',
465 |   color: '#fff',
466 |   rounding: '4px',
467 |   fontsize: '17px'
468 | };
469 | 
470 | const styles = {
471 |   _bubble: {
472 |     position: 'absolute',
473 |     zIndex: '99',
474 |     display: 'block',
475 |     padding: '.75em .9em .85em',
476 |     lineHeight: '1.1',
477 |     textAlign: 'center',
478 |     cursor: 'default',
479 |     minWidth: '150px',
480 |     width: '100%',
481 |     boxSizing: 'border-box',
482 |     textRendering: 'optimizeLegibility',
483 |     WebkitFontSmoothing: 'antialiased',
484 |     MozOsxFontSmoothing: 'grayscale',
485 |     wordWrap: 'break-word',
486 |     hyphens: 'auto',
487 |     WebkitTouchCallout: 'none',
488 |     WebkitUserSelect: 'none',
489 |     KhtmlUserSelect: 'none',
490 |     MozUserSelect: 'none',
491 |     MsUserSelect: 'none',
492 |     userSelect: 'none'
493 |   },
494 |   _bubbleInactive: {
495 |     visibility: 'hidden',
496 |     pointerEvents: 'none',
497 |     opacity: '0',
498 |   },
499 |   _bubblePreactive: {
500 |     background: styleVariables['background'],
501 |     borderBottomColor: styleVariables['background'],
502 |     color: styleVariables['color'],
503 |     fontSize: styleVariables['fontsize'],
504 |   },
505 |   _bubbleActive: {
506 |     transitionProperty: 'opacity, transform',
507 |     transitionDuration: styleVariables['duration'],
508 |     transitionTimingFunction: styleVariables['easing'],
509 |     pointerEvents: 'all',
510 |     opacity: '1',
511 |     visibility: 'visible'
512 |   },
513 |   _bubbleInteractive: {
514 |     position: 'absolute',
515 |     zIndex: '-1',
516 |     display: 'none',
517 |     width: `calc( 100% + ( ${styleVariables['tipsize']} + ${styleVariables['offset']} ) * 2 )`,
518 |     height: `calc( 100% + ( ${styleVariables['tipsize']} + ${styleVariables['offset']} ) * 2 )`,
519 |     top: `calc( -1 * ( ${styleVariables['tipsize']} + ${styleVariables['offset']} ) )`,
520 |     left: `calc( -1 * ( ${styleVariables['tipsize']} + ${styleVariables['offset']} ) )`,
521 |     pointerEvents: 'all',
522 |     background: 'transparent'
523 |   },
524 |   _bubbleTip: {
525 |     position: 'absolute',
526 |     width: '0',
527 |     height: '0',
528 |     borderLeft: `${styleVariables['tipsize']} solid transparent`,
529 |     borderRight: `${styleVariables['tipsize']} solid transparent`,
530 |     borderBottomWidth: styleVariables['tipsize'],
531 |     borderBottomStyle: 'solid',
532 |     borderBottomColor: 'inherit'
533 |   }
534 | };
535 | 
536 | const styleTransforms = {
537 |   positive: {
538 |     active: `calc( 100% + ${styleVariables['tipsize']} + ${styleVariables['offset']} )`,
539 |     inactive: `calc( 100% + ${styleVariables['tipsize']} + ${styleVariables['offset']} + ${styleVariables['distance']} )`
540 |   },
541 |   negative: {
542 |     active: `calc( -100% - ${styleVariables['tipsize']} - ${styleVariables['offset']} )`,
543 |     inactive: `calc( -100% - ${styleVariables['tipsize']} - ${styleVariables['offset']} - ${styleVariables['distance']} )`
544 |   }
545 | };
546 | 
547 | const styleDirections = {
548 |     x: {
549 |       east: styleTransforms.positive,
550 |       west: styleTransforms.negative
551 |     },
552 |     y: {
553 |       south: styleTransforms.positive,
554 |       north: styleTransforms.negative,
555 |     }
556 | };
557 | 
558 | const styleRoundings = {
559 |   south: {
560 |     left: [0,1,1,1],
561 |     right: [1,0,1,1]
562 |   },
563 |   north: {
564 |     left: [1,1,1,0],
565 |     right: [1,1,0,1]
566 |   },
567 |   east: {
568 |     left: [0,1,1,1],
569 |     right: [1,1,1,0]
570 |   },
571 |   west: {
572 |     left: [1,0,1,1],
573 |     right: [1,1,0,1]
574 |   }
575 | };
576 | 
577 | const evalAnchor = (left, anchor) => anchor ? ( (anchor === 'left' && left) || (anchor === 'right' && !left) ? 0 : 'auto' ) : left ? '50%' : 'auto';
578 | 
579 | const stylePositions = {
580 |   south: {
581 |     left: evalAnchor.bind(this, true),
582 |     right: evalAnchor.bind(this, false),
583 |     top: (anchor, tip) => tip ? `calc( 2px - ${styleVariables['tipsize']} )` : 'auto',
584 |     bottom: (anchor, tip) => tip ? 'auto' : 0
585 |   },
586 |   north: {
587 |     left: (anchor, tip) => evalAnchor(true, tip && anchor ? anchor === 'left' ? 'left' : 'right' : anchor),
588 |     right: (anchor, tip) => evalAnchor(false, tip && anchor ? anchor === 'left' ? 'left' : 'right' : anchor),
589 |     top: (anchor, tip) => tip ? 'auto' : 0,
590 |     bottom: (anchor, tip) => tip ? `calc( 2px - ${styleVariables['tipsize']} )` : 'auto'
591 |   },
592 |   east: {
593 |     left: (anchor, tip) => tip ? `calc( 2px - ${styleVariables['tipsize']} )` : 'auto',
594 |     right: (anchor, tip) => tip ? 'auto' : 0,
595 |     top: (anchor, tip) => tip ? evalAnchor(true, anchor) : !anchor || (anchor === 'left') ? '50%' : 'auto',
596 |     bottom: (anchor, tip) => tip ? evalAnchor(false, anchor) : anchor === 'right' ? '50%' : 'auto'
597 |   },
598 |   west: {
599 |     left: (anchor, tip) => tip ? 'auto' : 0,
600 |     right: (anchor, tip) => tip ? `calc( 2px - ${styleVariables['tipsize']} )` : 'auto',
601 |     top: (anchor, tip) => tip ? evalAnchor(true, anchor) : !anchor || (anchor === 'left') ? '50%' : 'auto',
602 |     bottom: (anchor, tip) => tip ? evalAnchor(false, anchor) : anchor === 'right' ? '50%' : 'auto'
603 |   }
604 | };
605 | 
606 | const tipTransforms = {
607 |   south: {
608 |     center: 'translate(-50%, 0)',
609 |     left: 'translate(-25%, 50%) rotate(90deg)',
610 |     right: 'translate(25%, 50%) rotate(-90deg)'
611 |   },
612 |   north: {
613 |     center: 'translate(-50%, 0) rotate(180deg)',
614 |     left: 'translate(-25%, -50%) rotate(90deg)',
615 |     right: 'translate(25%, -50%) rotate(-90deg)'
616 |   },
617 |   east: {
618 |     center: 'translate(-25%, -50%) rotate(-90deg)',
619 |     left: 'translate(0, 0) rotate(180deg)',
620 |     right: 'translate(0, 0)'
621 |   },
622 |   west: {
623 |     center: 'translate(25%, -50%) rotate(90deg)',
624 |     left: 'translate(0, 0) rotate(180deg)',
625 |     right: 'translate(0, 0)'
626 |   }
627 | };
628 | 
629 | const setDirectionSpecificStyles = (element, config, activeOrInactive) => {
630 | 
631 |   let direction = bubb._autoDirection || config.direction || 'south',
632 |       anchor = bubb._autoAnchor || config.anchor;
633 | 
634 |   const setBubbleTransform = xy => ( typeof styleDirections[xy][direction] === 'object' && styleDirections[xy][direction][activeOrInactive] ) || ( anchor ? '0' : '-50%' );
635 | 
636 |   element.style.transform = `translate(${setBubbleTransform('x')}, ${setBubbleTransform('y')})`;
637 | 
638 |   if (activeOrInactive === 'active') return;
639 | 
640 |   element._elementInteractive.style.display = element._bind ? 'block' : 'none';
641 | 
642 |   element._elementTip.style.transform = tipTransforms[direction][anchor || 'center'];
643 | 
644 |   ['left', 'right', 'top', 'bottom'].forEach( position => {
645 |     element.style[position] = stylePositions[direction][position](anchor);
646 |     element._elementTip.style[position] = stylePositions[direction][position](anchor, true);
647 |   });
648 | 
649 |   element.style.borderRadius = (styleRoundings[direction][anchor] || [1]).reduce( (str, chk) => { return str += (chk ? config.borderRadius || styleVariables['rounding'] : 0) + ' '; }, '');
650 | 
651 | };
652 | 
653 | const appendStyles = (element, keys, init) => {
654 | 
655 |   let config = element._config || {};
656 | 
657 |   keys = typeof keys === 'string' ? [keys] : keys;
658 | 
659 |   keys.forEach( key => {
660 | 
661 |       let active = key === '_bubbleActive',
662 |           preactive = key === '_bubblePreactive',
663 | 
664 |           still = active && config.transitionOff,
665 |           background = preactive && config.background,
666 |           color = preactive && config.color,
667 |           fontsize = preactive && config.fontSize;
668 | 
669 |       Object.keys(styles[key]).forEach( style => {
670 |         element.style[style] = init ? styles[key][style]
671 |           : style === 'transitionDuration' && still ? '0s'
672 |           : (style === 'background' || style === 'borderBottomColor') && background ? background
673 |           : style === 'color' && color ? color
674 |           : style === 'fontSize' && fontsize ? fontsize
675 |           : styles[key][style];
676 |       });
677 | 
678 |       if (!init && (active || preactive)) setDirectionSpecificStyles(element, config, active ? 'active' : 'inactive');
679 | 
680 |   });
681 | 
682 | };
683 | 
684 | const setMethodProxies = () => {
685 | 
686 |   bubb.update = () => update.apply(this, arguments);
687 |   bubb.add = bubb.refresh = bubb.remove = () => addOrRemove.apply(this, arguments);
688 |   bubb.toggle = () => toggle.apply(this, arguments);
689 | 
690 | };
691 | 
692 | const createBubbElements = () => {
693 | 
694 |   bubb._element = document.createElement('bubb-bobb');
695 | 
696 |   let element = bubb._element,
697 |       tagMap = {
698 |         _elementInteractive: 'bubb-interactive',
699 |         _elementTip: 'bubb-tip',
700 |         _elementContent: 'bubb-content'
701 |       };
702 | 
703 |   for (let tag in tagMap) {
704 |     element[tag] = document.createElement(tagMap[tag]);
705 |     element.appendChild(element[tag]);
706 |   }
707 | 
708 |   appendStyles(element, ['_bubble', '_bubbleInactive'], true);
709 |   appendStyles(element._elementTip, '_bubbleTip', true);
710 |   appendStyles(element._elementInteractive, '_bubbleInteractive', true);
711 | 
712 |   bubb._den = document.createElement('bubb-den');
713 |   bubb._den.style.display = 'none';
714 |   bubb._den.appendChild(element);
715 | 
716 |   document.body.appendChild(bubb._den);
717 | 
718 | };
719 | 
720 | const listenToBubbEvents = () => {
721 | 
722 |   const hideOrKeep = () => bubb._element._bind || appendStyles(bubb._element, '_bubbleInactive', true);
723 |   bubb._element.addEventListener('mouseenter', hideOrKeep, false);
724 | 
725 | };
726 | 
727 | const initBubb = () => {
728 | 
729 |   bubb._initialized = true;
730 |   bubb.triggers = {};
731 | 
732 |   setMethodProxies();
733 |   createBubbElements();
734 |   listenToBubbEvents();
735 | 
736 | };
737 | 
738 | const availableOptions = [
739 |   'callback',
740 |   'hoverCallback',
741 |   'background',
742 |   'color',
743 |   'transitionOff',
744 |   'interactive',
745 |   'delay',
746 |   'width',
747 |   'fontSize',
748 |   'class',
749 |   'anchor',
750 |   'direction',
751 |   'borderRadius',
752 |   'autoHide',
753 |   'toggle',
754 |   'autoDirection'
755 | ];
756 | 
757 | // const isMobile = (typeof window.orientation !== "undefined") || ~window.navigator.userAgent.indexOf('IEMobile') ? true : false;
758 | 
759 | typeof module !== 'undefined' && module.exports ? module.exports = bubb : window.bubb = bubb;
760 | 
761 | })(window, document);
762 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bubb",
 3 |   "description": "infotip",
 4 |   "version": "2.0.1",
 5 |   "author": "frdnrdb",
 6 |   "license": "MIT",
 7 |   "main": "./dist/bubb.min.js",
 8 |   "homepage": "http://bubb.surge.sh",
 9 |   "scripts": {
10 |     "start": "grunt serve"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git@github.com:frdnrdb/bubb.git"
15 |   },
16 |   "dependencies": {},
17 |   "devDependencies": {
18 |     "fs": "0.0.2",
19 |     "grunt": "^1.0.1",
20 |     "grunt-contrib-clean": "^1.0.0",
21 |     "grunt-contrib-compress": "^1.4.3",
22 |     "grunt-contrib-connect": "^1.0.2",
23 |     "grunt-contrib-copy": "^1.0.0",
24 |     "grunt-contrib-cssmin": "^1.0.1",
25 |     "grunt-contrib-uglify": "^1.0.1",
26 |     "grunt-contrib-watch": "^1.0.0",
27 |     "grunt-cssnano": "^2.1.0",
28 |     "grunt-es6-transpiler": "^1.0.2",
29 |     "grunt-open": "^0.2.3",
30 |     "grunt-replace": "^1.0.1",
31 |     "grunt-run": "^0.7.0",
32 |     "grunt-sass": "^1.2.0",
33 |     "grunt-shell": "^2.1.0",
34 |     "load-grunt-tasks": "^3.5.2"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/scss/bubb.scss:
--------------------------------------------------------------------------------
  1 | $bubb-tip-size: 10px;
  2 | $bubb-offset: 4px;
  3 | $bubb-transition-distance: 20px;
  4 | $bubb-transition-expression: cubic-bezier(0,0,0,1);
  5 | $bubb-transition-delay: .75s;
  6 | $bubb-border-radius: 5px;
  7 | $bubb-border-radius-round: 30px;
  8 | $bubb-min-width: 9em;
  9 | $bubb-font-size-large: 20px;
 10 | $bubb-font-size: 17px;
 11 | $bubb-background: #444;
 12 | $bubb-color: #fff;
 13 | 
 14 | @mixin bubbStyle() {
 15 |   padding: .75em .9em .85em;
 16 |   line-height: 1.1;
 17 |   font-size: $bubb-font-size;
 18 |   text-align: center;
 19 |   border-radius: $bubb-border-radius;
 20 |   background-color: $bubb-background;
 21 |   color: $bubb-color;
 22 |   min-width: $bubb-min-width;
 23 |   @include textRendering();
 24 |   @include userSelectNone();
 25 | }
 26 | @mixin bubbTip($width) {
 27 |   width: 0;
 28 |   height: 0;
 29 |   border-bottom: $width solid $bubb-background;
 30 |   border-right: $width solid transparent;
 31 |   border-left: $width solid transparent;
 32 | }
 33 | @mixin bubbTransition() {
 34 |   transition: transform .35s $bubb-transition-expression, opacity .35s $bubb-transition-expression;
 35 | }
 36 | @mixin textRendering() {
 37 |   text-rendering: optimizeLegibility;
 38 |   -webkit-font-smoothing: antialiased;
 39 |   -moz-osx-font-smoothing: grayscale;
 40 | }
 41 | @mixin userSelectNone() {
 42 |   -webkit-touch-callout: none;
 43 |     -webkit-user-select: none;
 44 |      -khtml-user-select: none;
 45 |        -moz-user-select: none;
 46 |         -ms-user-select: none;
 47 |             user-select: none;
 48 | }
 49 | 
 50 | 
 51 | // bubb bottom, bubb east
 52 | $y-transform-tip: calc( #{$bubb-tip-size} + .065rem + #{$bubb-offset} + #{$bubb-transition-distance} );
 53 | $y-transform-hover-tip: calc( #{$bubb-tip-size} + .065rem + #{$bubb-offset} );
 54 | $y-transform: calc( 100% + #{$bubb-tip-size} + #{$bubb-offset} + #{$bubb-transition-distance} );
 55 | $y-transform-hover: calc( 100% + #{$bubb-tip-size} + #{$bubb-offset} );
 56 | 
 57 | // bubb top, bubb west
 58 | $y-transform-tip-top: calc( -#{$bubb-tip-size} - .065rem - #{$bubb-offset} - #{$bubb-transition-distance} );
 59 | $y-transform-hover-tip-top: calc( -#{$bubb-tip-size} - .065rem - #{$bubb-offset} );
 60 | $y-transform-top: calc( -100% - #{$bubb-tip-size} - #{$bubb-offset} - #{$bubb-transition-distance} );
 61 | $y-transform-hover-top: calc( -100% - #{$bubb-tip-size} - #{$bubb-offset} );
 62 | 
 63 | @mixin bubb-base() {
 64 |   position: relative;
 65 |   &:before, &:after {
 66 |     position: absolute;
 67 |     pointer-events: none;
 68 |     visibility: hidden;
 69 |     z-index: 1;
 70 |     bottom: 0;
 71 |     opacity: 0;
 72 |   }
 73 |   &:before {
 74 |     content: '';
 75 |     @include bubbTip($bubb-tip-size);
 76 |   }
 77 |   &:after {
 78 |     content: attr(bubb);
 79 |     @include bubbStyle();
 80 |   }
 81 |   &:hover {
 82 |     &:before, &:after {
 83 |       @include bubbTransition();
 84 |       visibility: visible;
 85 |       opacity: 1;
 86 |     }
 87 |   }
 88 | }
 89 | @mixin bubb-center() {
 90 |   &:before, &:after {
 91 |     left: 50%;
 92 |   }
 93 |   &:before {
 94 |     transform: translate(-50%, $y-transform-tip);
 95 |   }
 96 |   &:after {
 97 |     transform: translate(-50%, $y-transform);
 98 |   }
 99 |   &:hover {
100 |     &:before {
101 |       transform: translate(-50%, $y-transform-hover-tip);
102 |     }
103 |     &:after {
104 |       transform: translate(-50%, $y-transform-hover);
105 |     }
106 |   }
107 | }
108 | @mixin bubb-left-and-right() {
109 |     &:before {
110 |       transform: translate(0, $y-transform-tip);
111 |     }
112 |     &:after {
113 |       transform: translate(0, $y-transform);
114 |     }
115 |     &:hover {
116 |       &:before {
117 |         transform: translate(0, $y-transform-hover-tip);
118 |       }
119 |       &:after {
120 |         transform: translate(0, $y-transform-hover);
121 |       }
122 |     }
123 | }
124 | @mixin bubb-left() {
125 |     &:before, &:after {
126 |       left: 0;
127 |     }
128 |     &:before {
129 |       border-left: none;
130 |     }
131 |     &:after {
132 |       border-radius: 0 $bubb-border-radius $bubb-border-radius $bubb-border-radius;
133 |     }
134 | }
135 | @mixin bubb-right() {
136 |     &:before, &:after {
137 |       left: auto;
138 |       right: 0;
139 |     }
140 |     &:before {
141 |       border-right: none;
142 |     }
143 |     &:after {
144 |       border-radius: $bubb-border-radius 0 $bubb-border-radius $bubb-border-radius;
145 |     }
146 | }
147 | @mixin bubb-east-all() {
148 |   &:before, &:after {
149 |     left: auto;
150 |     right: 0;
151 |     top: 50%;
152 |     bottom: auto;
153 |   }
154 |   &:before {
155 |     border-left: none;
156 |     border-right-color: $bubb-background;
157 |   }
158 | }
159 | @mixin bubb-east() {
160 |   &:before {
161 |     border-top: $bubb-tip-size solid transparent;
162 |     border-bottom-color: transparent;
163 |     transform: translate($y-transform-tip, -50%);
164 |   }
165 |   &:after {
166 |     transform: translate($y-transform, -50%);
167 |   }
168 |   &:hover {
169 |     &:before {
170 |       transform: translate($y-transform-hover-tip, -50%);
171 |     }
172 |     &:after {
173 |       transform: translate($y-transform-hover, -50%);
174 |     }
175 |   }
176 | }
177 | @mixin bubb-east-top() {
178 |   &:before {
179 |     border-top: none;
180 |     border-bottom-color: transparent;
181 |     transform: translate($y-transform-tip, 0);
182 |   }
183 |   &:after {
184 |     border-radius: 0 $bubb-border-radius $bubb-border-radius $bubb-border-radius;
185 |     transform: translate($y-transform, 0);
186 |   }
187 |   &:hover {
188 |     &:before {
189 |       transform: translate($y-transform-hover-tip, 0);
190 |     }
191 |     &:after {
192 |       transform: translate($y-transform-hover, 0);
193 |     }
194 |   }
195 | }
196 | @mixin bubb-east-bottom() {
197 |   &:before {
198 |     border-top: $bubb-tip-size solid transparent;
199 |     border-bottom: none;
200 |     transform: translate($y-transform-tip, -100%);
201 |   }
202 |   &:after {
203 |     border-radius: $bubb-border-radius $bubb-border-radius $bubb-border-radius 0;
204 |     transform: translate($y-transform, -100%);
205 |   }
206 |   &:hover {
207 |     &:before {
208 |       transform: translate($y-transform-hover-tip, -100%);
209 |     }
210 |     &:after {
211 |       transform: translate($y-transform-hover, -100%);
212 |     }
213 |   }
214 | }
215 | @mixin bubb-west-all() {
216 |   &:before, &:after {
217 |     left: 0;
218 |     right: auto;
219 |     top: 50%;
220 |     bottom: auto;
221 |   }
222 |   &:before {
223 |     border-right: none;
224 |     border-top: $bubb-tip-size solid transparent;
225 |     border-bottom-color: transparent;
226 |     border-left-color: $bubb-background;
227 |   }
228 | }
229 | @mixin bubb-west() {
230 |   &:before {
231 |     transform: translate($y-transform-tip-top, -50%);
232 |   }
233 |   &:after {
234 |     transform: translate($y-transform-top, -50%);
235 |   }
236 |   &:hover {
237 |     &:before {
238 |       transform: translate($y-transform-hover-tip-top, -50%);
239 |     }
240 |     &:after {
241 |       transform: translate($y-transform-hover-top, -50%);
242 |     }
243 |   }
244 | }
245 | @mixin bubb-west-top() {
246 |   &:before {
247 |     border-top: none;
248 |     transform: translate($y-transform-tip-top, 0);
249 |   }
250 |   &:after {
251 |     border-radius: $bubb-border-radius 0 $bubb-border-radius $bubb-border-radius;
252 |     transform: translate($y-transform-top, 0);
253 |   }
254 |   &:hover {
255 |     &:before {
256 |       transform: translate($y-transform-hover-tip-top, 0);
257 |     }
258 |     &:after {
259 |       transform: translate($y-transform-hover-top, 0);
260 |     }
261 |   }
262 | }
263 | @mixin bubb-west-bottom() {
264 |   &:before {
265 |     border-bottom: none;
266 |     transform: translate($y-transform-tip-top, -100%);
267 |   }
268 |   &:after {
269 |     border-radius: $bubb-border-radius $bubb-border-radius 0 $bubb-border-radius;
270 |     transform: translate($y-transform-top, -100%);
271 |   }
272 |   &:hover {
273 |     &:before {
274 |       transform: translate($y-transform-hover-tip-top, -100%);
275 |     }
276 |     &:after {
277 |       transform: translate($y-transform-hover-top, -100%);
278 |     }
279 |   }
280 | }
281 | @mixin bubb-north() {
282 |   &:before, &:after {
283 |     left: 50%;
284 |     top: 0;
285 |     bottom: auto;
286 |   }
287 |   &:before {
288 |     border-bottom: none;
289 |     border-top: $bubb-tip-size solid $bubb-background;
290 |     border-left-color: transparent;
291 |     border-right-color: transparent;
292 |     transform: translate(-50%, $y-transform-tip-top);
293 |   }
294 |   &:after {
295 |     transform: translate(-50%, $y-transform-top);
296 |   }
297 |   &:hover {
298 |     &:before {
299 |       transform: translate(-50%, $y-transform-hover-tip-top);
300 |     }
301 |     &:after {
302 |       transform: translate(-50%, $y-transform-hover-top);
303 |     }
304 |   }
305 | }
306 | @mixin bubb-north-left-and-right() {
307 |   &:before {
308 |     transform: translate(0, $y-transform-tip-top);
309 |   }
310 |   &:after {
311 |     transform: translate(0, $y-transform-top);
312 |   }
313 |   &:hover {
314 |     &:before {
315 |       transform: translate(0, $y-transform-hover-tip-top);
316 |     }
317 |     &:after {
318 |       transform: translate(0, $y-transform-hover-top);
319 |     }
320 |   }
321 | }
322 | @mixin bubb-north-left() {
323 |   &:before, &:after {
324 |     left: 0;
325 |     top: 0;
326 |     bottom: auto;
327 |   }
328 |   &:before {
329 |     border-left: none;
330 |   }
331 |   &:after {
332 |     border-radius: $bubb-border-radius $bubb-border-radius $bubb-border-radius 0;
333 |   }
334 | }
335 | @mixin bubb-north-right() {
336 |   &:before, &:after {
337 |     left: auto;
338 |     right: 0;
339 |     top: 0;
340 |     bottom: auto;
341 |   }
342 |   &:before {
343 |     border-right: none;
344 |   }
345 |   &:after {
346 |     border-radius: $bubb-border-radius $bubb-border-radius 0 $bubb-border-radius;
347 |   }
348 | }
349 | @mixin bubb-still() {
350 |   &:hover {
351 |     &:before, &:after {
352 |       transition-duration: 0s;
353 |     }
354 |   }
355 | }
356 | @mixin bubb-delay() {
357 |   &:hover {
358 |     &:before, &:after {
359 |       transition-delay: $bubb-transition-delay;
360 |     }
361 |   }
362 | }
363 | @mixin bubb-round() {
364 |   &:after {
365 |     border-radius: $bubb-border-radius-round !important;
366 |   }
367 |   &[north][left], &[east][right] {
368 |     &:after {
369 |       border-radius: $bubb-border-radius-round $bubb-border-radius-round $bubb-border-radius-round 0 !important;
370 |     }
371 |   }
372 |   &[north][right], &[west][right] {
373 |     &:after {
374 |       border-radius: $bubb-border-radius-round $bubb-border-radius-round 0 $bubb-border-radius-round !important;
375 |     }
376 |   }
377 |   &[left]:not([east]):not([west]):not([north]), &[east][left] {
378 |     &:after {
379 |       border-radius: 0 $bubb-border-radius-round $bubb-border-radius-round $bubb-border-radius-round !important;
380 |     }
381 |   }
382 |   &[right]:not([east]):not([west]):not([north]), &[west][left] {
383 |     &:after {
384 |       border-radius: $bubb-border-radius-round 0 $bubb-border-radius-round $bubb-border-radius-round !important;
385 |     }
386 |   }
387 | }
388 | @mixin bubb-large() {
389 |   &:after {
390 |     font-size: $bubb-font-size-large !important;
391 |   }
392 | }
393 | 
394 | [bubb] {
395 |   @include bubb-base();
396 |   &[still] {
397 |     @include bubb-still();
398 |   }
399 |   &[delay] {
400 |     @include bubb-delay();
401 |   }
402 |   &[round] {
403 |     @include bubb-round();
404 |   }
405 |   &[large] {
406 |     @include bubb-large();
407 |   }
408 |   &:not([east]):not([west]):not([north]) {
409 |     @include bubb-center();
410 |     &[left], &[right] {
411 |       @include bubb-left-and-right();
412 |     }
413 |     &[left] {
414 |       @include bubb-left();
415 |     }
416 |     &[right] {
417 |       @include bubb-right();
418 |     }
419 |   }
420 |   &[north] {
421 |     @include bubb-north();
422 |     &[left], &[right] {
423 |       @include bubb-north-left-and-right();
424 |     }
425 |     &[left] {
426 |       @include bubb-north-left();
427 |     }
428 |     &[right] {
429 |       @include bubb-north-right();
430 |     }
431 |   }
432 |   &[east] {
433 |     @include bubb-east-all();
434 |     @include bubb-east();
435 |     &[left] {
436 |       @include bubb-east-top();
437 |     }
438 |     &[right] {
439 |       @include bubb-east-bottom();
440 |     }
441 |   }
442 |   &[west] {
443 |     @include bubb-west-all();
444 |     @include bubb-west();
445 |     &[left] {
446 |       @include bubb-west-top();
447 |     }
448 |     &[right] {
449 |       @include bubb-west-bottom();
450 |     }
451 |   }
452 | }
453 | 


--------------------------------------------------------------------------------
/scss/demo.scss:
--------------------------------------------------------------------------------
  1 | $col: #444;
  2 | $col2: #fad;
  3 | $font-size: 1.5em;
  4 | $max-width: 720px;
  5 | 
  6 | @font-face {
  7 |   font-family: 'Walsheim';
  8 |   font-weight: bold;
  9 |   font-style: bold;
 10 |   src: url('./fonts/gt-walsheim-bold-web.ttf');
 11 | }
 12 | @font-face {
 13 |   font-family: 'Walsheim';
 14 |   font-weight: normal;
 15 |   font-style: normal;
 16 |   src: url('./fonts/gt-walsheim-light-web.ttf');
 17 | }
 18 | * {
 19 |   text-rendering: optimizeLegibility;
 20 |   -webkit-font-smoothing: antialiased;
 21 |   -moz-osx-font-smoothing: grayscale;
 22 | }
 23 | 
 24 | @mixin hovers() {
 25 |   > div {
 26 |     display: inline-block;
 27 |     font-size: 95%;
 28 |     margin-top: 1em;
 29 |     padding-bottom: 2px;
 30 |     border-bottom: 2px dotted $col2;
 31 |     cursor: help;
 32 |     position: static;
 33 |     &:hover {
 34 |       border-color: transparent;
 35 |     }
 36 |   }
 37 |   > i {
 38 |     &:after {
 39 |       content: '⟵  :hover';
 40 |       display: inline-block;
 41 |       white-space: nowrap;
 42 |       border-bottom: none;
 43 |       margin-left: 12px;
 44 |       font-size: 75%;
 45 |       opacity: .35;
 46 |     }
 47 |     &.click:after {
 48 |       content: '⟵  :click';
 49 |     }
 50 |   }
 51 | }
 52 | 
 53 | html {
 54 |   overflow-y: scroll;
 55 | }
 56 | body {
 57 |   padding: 0;
 58 |   margin: 0;
 59 |   background: #fff;
 60 |   color: $col;
 61 |   font-family: 'Walsheim', arial, sans-serif;
 62 |   font-weight: normal;
 63 |   font-size: $font-size;
 64 |   line-height: 1;
 65 |   letter-spacing: .025rem;
 66 |   position: relative;
 67 |   min-height: 100vh;
 68 |   box-sizing: border-box;
 69 |   max-width: 100vw;
 70 |   overflow: hidden;
 71 | }
 72 | header {
 73 |   font-size: 1em;
 74 |   padding: 2.5em calc( (100vw - #{$max-width}) / 2 );
 75 |   box-sizing: border-box;
 76 |   width: 100%;
 77 |   position: relative;
 78 |   display: block;
 79 |   background: $col;
 80 |   color: #fff;
 81 |   &:last-of-type {
 82 |     background: #FFDEDE;
 83 |     color: #444;
 84 |     a {
 85 |       color: #444;
 86 |       &:hover {
 87 |         color: #4797B1;
 88 |       }
 89 |     }
 90 |   }
 91 |   aside {
 92 |     margin-top: .75em;
 93 |     a {
 94 |       color: #F7F3CE;
 95 |       text-decoration: none;
 96 |       font-size: 50%;
 97 |       text-transform: uppercase;
 98 |       letter-spacing: 2px;
 99 |       margin: .5em .5em 0 0;
100 |       &:hover {
101 |         opacity: .75;
102 |       }
103 |       &:before {
104 |         content:'';
105 |         max-height: 0;
106 |         overflow: hidden;
107 |         display: block;
108 |       }
109 |       &.inline:before {
110 |         content: ' | ';
111 |         max-height: none;
112 |         display: inline-block;
113 |         opacity: .35;
114 |         margin-right: .75em;
115 |         font-size: 150%;
116 |         position: relative;
117 |         top: 4px;
118 |       }
119 |       &.first {
120 |         display: block;
121 |         padding-top: 1em;
122 |         margin-left: 0;
123 |       }
124 |     }
125 |   }
126 |   i {
127 |     font-style: normal;
128 |     font-size: 50%;
129 |     opacity: .65;
130 |     position: relative;
131 | 
132 |     &:first-of-type {
133 |       top: -.85em;
134 |     }
135 |     &:last-of-type {
136 |       left: -1.1em;
137 |     }
138 |     margin-right: -.75em;
139 |   }
140 |   b {
141 |     font-weight: bold;
142 |   }
143 |   span {
144 |     float: right;
145 |   }
146 |   &:after {
147 |     content:none;
148 |     position:absolute;
149 |     width:100vw;
150 |     height:7.3em;
151 |     display:block;
152 |     background:rgba(0,0,0,.035);
153 |     top:-3.25em;
154 |     left:-7.5vw;
155 |   }
156 | }
157 | code {
158 |   font-size: 70%;
159 |   //padding: 2em;
160 |   overflow-x: scroll;
161 |   &::-webkit-scrollbar {
162 |     width: 0px;
163 |     background: transparent;
164 |   }
165 | }
166 | pre {
167 |   //padding: .5em;
168 |   font-size: 16px;
169 |   //border: 1px solid #f0f0f0;
170 |   opacity: .35;
171 |   transition: opacity .25s linear;
172 |   position: relative;
173 |   z-index: 0;
174 |   filter: grayscale(100%);
175 |   &:hover {
176 |     opacity: 1;
177 |     filter: grayscale(0%);
178 |   }
179 | }
180 | .opaque pre {
181 |   opacity: 1;
182 |   filter: grayscale(0%);
183 |   padding: 0;
184 |   border: none;
185 |   font-size: 18px;
186 | }
187 | 
188 | section {
189 |   position: relative;
190 |   max-width: $max-width;
191 |   margin: 0 auto;
192 |   padding: .5em 0 4em;
193 |   box-sizing: border-box;
194 |   display: block;
195 |   width: 90%;
196 |   &:first-of-type {
197 |     padding: 0 0 4em;
198 |     .header {
199 |       font-weight: bold;
200 |       width: 100%;
201 |       height: 6em;
202 |       line-height: 6em;
203 |       text-decoration: none;
204 |       background: #F7F3CE;
205 |       display: block;
206 |       padding: 0 5%;
207 |       box-sizing: border-box;
208 |       text-transform: uppercase;
209 |       letter-spacing: 2px;
210 |       font-size: 11px;
211 |       color: #444;
212 |       margin-bottom: 4em;
213 |       white-space: nowrap;
214 |     }
215 |   }
216 |   > p {
217 |     font-size: 70%;
218 |     line-height: 1.3;
219 |     color: #888;
220 |   }
221 |   article {
222 |     position: relative;
223 |     > p {
224 |       font-size: 70%;
225 |       line-height: 1.3;
226 |       color: #888;
227 |     }
228 |     > span {
229 |       @include hovers();
230 |     }
231 |   @include hovers();
232 |   }
233 | }
234 | footer {
235 |   background: #F7F3CE;
236 |   display: block;
237 |   position: relative;
238 |   height: 4.5em;
239 |   width: 100%;
240 |   line-height: 4.5em;
241 |   a {
242 |     position: absolute;
243 |     top: 0;
244 |     left: calc( (100vw - #{$max-width}) / 2 );
245 |     text-transform: uppercase;
246 |     letter-spacing: 2px;
247 |     font-size: 11px;
248 |     text-decoration: none;
249 |     font-weight: bold;
250 |     color: #444;
251 | 
252 |     &:before {
253 |       display: inline-block;
254 |       font-weight: normal;
255 |       margin-right: 6px;
256 |       content: 'By';
257 |     }
258 |     /*
259 |     &:last-of-type {
260 |       left: auto;
261 |       right: calc( (100vw - #{$max-width}) / 2 );
262 |       &:before {
263 |         content: 'Download Bubb on';
264 |       }
265 |     }
266 |     */
267 |   }
268 | }
269 | #eventsDisplay {
270 |   background: rgba(#0ff1ce, .7);
271 |   padding: 0 7.5vw;
272 |   box-sizing: border-box;
273 |   line-height: 100vh;
274 |   height: 100vh;
275 |   width: 100vw;
276 |   font-size: 65%;
277 |   font-style: normal;
278 |   text-transform: uppercase;
279 |   text-align: center;
280 |   letter-spacing: 2px;
281 |   position: fixed;
282 |   top: 0;
283 |   right: 0;
284 |   pointer-events: none;
285 |   z-index: 9999999;
286 |   &[color="0"] {
287 |     background: rgba(#ffdede, 0.6);
288 |   }
289 |   &[color="1"] {
290 |     background: rgba(#F7F3CE, 0.6);
291 |   }
292 |   &[color="2"] {
293 |     background: rgba(#C5ECBE, 0.6);
294 |   }
295 |   &[color="3"] {
296 |     background: rgba(#4797B1, 0.6);
297 |   }
298 |   &[color="4"] {
299 |     background: rgba(#54656b, 0.6);
300 |   }
301 |   &:empty {
302 |     visibility: hidden;
303 |   }
304 | }
305 | 
306 | .wait {
307 |   opacity: 0;
308 |   transition: opacity .25s linear;
309 |   @at-root {
310 |     .done & {
311 |     opacity: 1;
312 |     }
313 |   }
314 | }
315 | 
316 | 
317 | section ul {
318 |   font-size: 70%;
319 |   list-style: none;
320 |   color: #888;
321 |   padding-left: 50px;
322 |   line-height: 1.2;
323 |   padding-top: .75em;
324 |   li {
325 |     margin-bottom: inherit;
326 |     position: relative;
327 |     &:before {
328 |       position: absolute;
329 |       top: .6em;
330 |       height: 1px;
331 |       width: 35px;
332 |       left: -50px;
333 |       background: #888;
334 |       display: block;
335 |       content: '';
336 |     }
337 |     u {
338 |       text-decoration: none;
339 |       display: block;
340 |       font-weight: bold;
341 |       padding-bottom: 1px;
342 |     }
343 |   }
344 |   &:last-of-type li u {
345 |     display: inline-block;
346 |     margin-right: .5em;
347 |   }
348 | }
349 | hr {
350 |   margin: 2.5em 0 1em;
351 |   opacity: .25;
352 |   @at-root {
353 |     section:last-of-type & {
354 |       margin: 2em 0 1em;
355 |       &:last-of-type {
356 |         margin: 1.5em 0;
357 |       }
358 |     }
359 |   }
360 | }
361 | 
362 | .bubble-bobble {
363 |   width: 44px;
364 |   height: 44px;
365 |   background: url(/assets/images/bubble_bobble.png);
366 |   background-repeat: no-repeat;
367 |   background-size: 100%;
368 |   position: fixed;
369 |   bottom: 1em;
370 |   right: 1em;
371 |   &:hover {
372 |     background-position: 0 100%;
373 |   }
374 | }
375 | 
376 | ul.share-buttons {
377 |   list-style: none;
378 |   padding: 0;
379 |   margin: .75em 0 0;
380 |   &.device {
381 |     background: #444;
382 |     padding: 2em 0;
383 |     text-align: center;
384 |   }
385 | }
386 | 
387 | ul.share-buttons li {
388 |   display: inline;
389 |   &:before {
390 |     content: none;
391 |   }
392 |   &:hover img {
393 |     opacity: .75;
394 |   }
395 |   img {
396 |     min-width: 32px;
397 |     min-height: 32px;
398 |     max-width: 32px;
399 |     margin: 0 4px;
400 |     display: inline-block;
401 |   }
402 | }
403 | 
404 | ul.share-buttons .sr-only {
405 |   position: absolute;
406 |   clip: rect(1px 1px 1px 1px);
407 |   clip: rect(1px, 1px, 1px, 1px);
408 |   padding: 0;
409 |   border: 0;
410 |   height: 1px;
411 |   width: 1px;
412 |   overflow: hidden;
413 | }
414 | 
415 | 
416 | 
417 | device {
418 |   display: none;
419 | }
420 | 
421 | 
422 | 
423 | @mixin noSelect() {
424 |   -webkit-touch-callout: none;
425 |   -webkit-user-select: none;
426 |   -khtml-user-select: none;
427 |   -moz-user-select: none;
428 |   -ms-user-select: none;
429 |   user-select: none;
430 | }
431 | 
432 | #toggle {
433 |   float: left;
434 |   width: 50%;
435 | }
436 | #toggler {
437 |   float: right;
438 |   width: 50%;
439 |   text-align: right;
440 |   pre {
441 |     visibility: hidden;
442 |   }
443 |   @include noSelect();
444 | }
445 | #added {
446 |   display: block;
447 |   width: 100%;
448 |   clear: both;
449 | }
450 | #all-directions {
451 |   position: absolute;
452 |   top: 100px;
453 |   right: 0;
454 |   width: 80px;
455 |   height: 78px;
456 |   border: none;
457 |   background: transparent;
458 |   border-radius: 50%;
459 |   background-image: url(images/cirque.svg);
460 |   background-repeat: no-repeat;
461 |   > div {
462 |     display: inline-block;
463 |     z-index: 1;
464 |     position: absolute;
465 |     width: auto;
466 |     height: auto;
467 |     cursor: crosshair;
468 |     &:after {
469 |       content: '';
470 |       background: rgba(255, 255, 255, 0.8);
471 |       min-width: 24px;
472 |       min-height: 30px;
473 |       position: absolute;
474 |       transition: background .25s ease;
475 |     }
476 |     &:hover:after {
477 |       background: rgba(255, 255, 255, 0);
478 |     }
479 |     &.n {
480 |       &:nth-child(1) {
481 |         top: 7.5%;
482 |         left: 25%;
483 |         &:after {
484 |           transform: translate(-50%, -50%) rotate(-30deg);
485 |         }
486 |       }
487 |       &:nth-child(2) {
488 |         z-index: 9;
489 |         top: 0;
490 |         left: 50%;
491 |         &:after {
492 |           transform: translate(-50%, -50%);
493 |         }
494 |       }
495 |       &:nth-child(3) {
496 |         top: 7.5%;
497 |         left: 75%;
498 |         &:after {
499 |           transform: translate(-50%, -50%) rotate(30deg);
500 |         }
501 |       }
502 |     }
503 |     &.e {
504 |       &:nth-child(4) {
505 |         right: 7.5%;
506 |         top: 25%;
507 |         &:after {
508 |           transform: translate(-50%, -50%) rotate(60deg);
509 |         }
510 |       }
511 |       &:nth-child(5) {
512 |         right: 0;
513 |         top: 50%;
514 |         &:after {
515 |           transform: translate(-50%, -50%) rotate(90deg);
516 |         }
517 |       }
518 |       &:nth-child(6) {
519 |         right: 7.5%;
520 |         top: 75%;
521 |         &:after {
522 |           transform: translate(-50%, -50%) rotate(120deg);
523 |         }
524 |       }
525 |     }
526 |     &.s {
527 |       &:nth-child(7) {
528 |         bottom: 7.5%;
529 |         left: 25%;
530 |         &:after {
531 |           transform: translate(-50%, -50%) rotate(30deg);
532 |         }
533 |       }
534 |       &:nth-child(8) {
535 |         z-index: 9;
536 |         bottom: 0;
537 |         left: 50%;
538 |         &:after {
539 |           transform: translate(-50%, -50%);
540 |         }
541 |       }
542 |       &:nth-child(9) {
543 |         bottom: 7.5%;
544 |         left: 75%;
545 |         &:after {
546 |           transform: translate(-50%, -50%) rotate(-30deg);
547 |         }
548 |       }
549 |     }
550 |     &.w {
551 |       &:nth-child(10) {
552 |         left: 7.5%;
553 |         top: 25%;
554 |         &:after {
555 |           transform: translate(-50%, -50%) rotate(120deg);
556 |         }
557 |       }
558 |       &:nth-child(11) {
559 |         left: 0;
560 |         top: 50%;
561 |         &:after {
562 |           transform: translate(-50%, -50%) rotate(90deg);
563 |         }
564 |       }
565 |       &:nth-child(12) {
566 |         left: 7.5%;
567 |         top: 75%;
568 |         &:after {
569 |           transform: translate(-50%, -50%) rotate(60deg);
570 |         }
571 |       }
572 |     }
573 |   }
574 | 
575 |   > span {
576 |       position: absolute;
577 |       width: 0;
578 |       height: 0;
579 |       background: pink;
580 |       left: 50%;
581 |       top: 50%;
582 |       transform: rotate(0deg);
583 |       transition: all .25s ease;
584 |       opacity: 1;
585 |       > i img {
586 |         position: absolute;
587 |         width: 35px;
588 |         height: 35px;
589 |         left: 50%;
590 |         top: 50%;
591 |         transform: translate(-50%, -50%);
592 |       }
593 |       /*
594 |       > i {
595 |           position: absolute;
596 |           width:0;
597 |           height: 0;
598 |           border-left: 8px solid transparent;
599 |           border-right: 8px solid transparent;
600 |           border-bottom: 20px solid #444;
601 |           border-top: none;
602 |           left: 50%;
603 |           top: 50%;
604 |           transform: translate(-50%, -60%);
605 |       }
606 |       */
607 |   }
608 |   &:hover > span {
609 |     opacity: 1;
610 |   }
611 | 
612 | 
613 | }
614 | 
615 | 
616 | 
617 | 
618 | /*
619 | --- bubb modifiers
620 | */
621 | @mixin bubbMenuStyle() {
622 |     padding: 0!important;
623 |     div {
624 |       padding: .75em 0;
625 |       text-transform: uppercase;
626 |       letter-spacing: 2px;
627 |       font-size: 12px;
628 |       font-weight: bold;
629 |       transition: background .3s cubic-bezier(0,0,0,.75);
630 |       cursor: pointer;
631 |       &:first-child {
632 |         padding-top: 1em;
633 |       }
634 |       &:hover {
635 |         text-decoration: line-through;
636 |       }
637 |     }
638 | }
639 | 
640 | .bubb {
641 |   p {
642 |     padding: 0;
643 |     margin: 0;
644 |   }
645 |   b {
646 |     font-weight: bold;
647 |     letter-spacing: 1px;
648 |     font-size: 90%;
649 |   }
650 |   @include noSelect();
651 | }
652 | 
653 | .bubb {
654 |   img {
655 |     max-width: 100%;
656 |     display: block;
657 |     margin: 0 auto .5em;
658 |   }
659 | }
660 | .bubb-menu {
661 |   bubb-bobb {
662 |     @include bubbMenuStyle();
663 |     background: #FFDEDE!important;
664 |     border-bottom-color: #FFDEDE!important;
665 |     color: #444!important;
666 |     div:nth-child(2) {
667 |       background: #F7F3CE;
668 |       color: #444;
669 |     }
670 |     div:nth-child(3) {
671 |       background: #C5ECBE;
672 |       color: #444;
673 |     }
674 |     div:nth-child(4) {
675 |       background: #4797B1;
676 |       color: #fff;
677 |     }
678 |     div:nth-child(5) {
679 |       background: #54656b;
680 |       border-radius: 0 0 4px 4px;
681 |       color: #fff;
682 |     }
683 |   }
684 | }
685 | 
686 | .tipcolor {
687 |   border-bottom-color: #FFDEDE!important;
688 | }
689 | 
690 | 
691 | 
692 | 
693 | 
694 | 
695 | @media all and (max-width: 550px) {
696 |   hide {
697 |     display: none;
698 |   }
699 |   device {
700 |     display: block;
701 |   }
702 |   body {
703 |     font-size: 5vw;
704 |     padding-bottom: 0;
705 |   }
706 |   header, footer {
707 |     padding: 1.5em;
708 |   }
709 |   section {
710 |     text-align: center;
711 |     padding: 4em 1.5em;
712 | 
713 |   }
714 |   section > span {
715 |       display: block;
716 |   }
717 |   section i {
718 |       display: none;
719 |   }
720 |   section:first-of-type .header {
721 |     margin-bottom: 3em;
722 |     position: relative;
723 |     left: -5vw;
724 |     width: 100vw;
725 |     text-align: center;
726 |     font-size: 50%;
727 |     &.download {
728 |       background: #C5ECBE;
729 |       margin-bottom: 0;
730 |     }
731 |     &.info {
732 |       background: #FFDEDE;
733 |       margin-bottom: 0;
734 |     }
735 |     &.image {
736 |       height: auto;
737 |       padding: 0;
738 |       margin: 0;
739 |       display: block;
740 |     }
741 |   }
742 |   section:last-of-type {
743 |     padding: 1.35em 0;
744 |   }
745 |   section > p, section ul {
746 |     font-size: 70%;
747 |   }
748 |   section ul {
749 |     padding-left: 0;
750 |     li:before {
751 |       content: none;
752 |     }
753 |   }
754 |   footer {
755 |     position: static;
756 |     text-align: center;
757 |     padding: 2em 0 4em;
758 |     line-height: 1.2;
759 |     a {
760 |       position: static;
761 |     }
762 |   }
763 |   header {
764 |     font-size: 1.25em;
765 | 
766 |     aside {
767 |       a {
768 |         line-height: 1.5;
769 |         font-size: 35%;
770 |         &.inline:before {
771 |           content: '';
772 |         }
773 |         &.first {
774 |           display: inline-block;
775 |         }
776 |       }
777 |     }
778 |   }
779 |   pre {
780 |     display: none;
781 |   }
782 |   .opaque pre {
783 |     display: block;
784 |     text-align: left;
785 |     opacity: 1;
786 |     filter: none;
787 |     font-size: 80%;
788 |     padding: 1em 10% 0;
789 |   }
790 |   .bubble-bobble {
791 |     width: 32px;
792 |     height: 32px;
793 |     background-size: 32px;
794 |     &:hover {
795 |       background-position: 0 -32px;
796 |     }
797 |   }
798 |   #all-directions {
799 |     display: none;
800 |   }
801 | }
802 | 


--------------------------------------------------------------------------------