GitBlixt
teagles/wagon

updated to newest version of foundation

Nikolay Bonev committed Mar 19, 2018
commit f21059f8f0f1561868cc2569110da8cbeacc570d
Showing 129 changed files with 24812 additions and 10626 deletions
generators/foundation/public/javascripts/vendor/foundation.js +10839 -6523
@@ @@ -1,811 +1,607 @@
- !function($) {
+ /******/ (function(modules) { // webpackBootstrap
+ /******/ // The module cache
+ /******/ var installedModules = {};
+ /******/
+ /******/ // The require function
+ /******/ function __webpack_require__(moduleId) {
+ /******/
+ /******/ // Check if module is in cache
+ /******/ if(installedModules[moduleId]) {
+ /******/ return installedModules[moduleId].exports;
+ /******/ }
+ /******/ // Create a new module (and put it into the cache)
+ /******/ var module = installedModules[moduleId] = {
+ /******/ i: moduleId,
+ /******/ l: false,
+ /******/ exports: {}
+ /******/ };
+ /******/
+ /******/ // Execute the module function
+ /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+ /******/
+ /******/ // Flag the module as loaded
+ /******/ module.l = true;
+ /******/
+ /******/ // Return the exports of the module
+ /******/ return module.exports;
+ /******/ }
+ /******/
+ /******/
+ /******/ // expose the modules object (__webpack_modules__)
+ /******/ __webpack_require__.m = modules;
+ /******/
+ /******/ // expose the module cache
+ /******/ __webpack_require__.c = installedModules;
+ /******/
+ /******/ // identity function for calling harmony imports with the correct context
+ /******/ __webpack_require__.i = function(value) { return value; };
+ /******/
+ /******/ // define getter function for harmony exports
+ /******/ __webpack_require__.d = function(exports, name, getter) {
+ /******/ if(!__webpack_require__.o(exports, name)) {
+ /******/ Object.defineProperty(exports, name, {
+ /******/ configurable: false,
+ /******/ enumerable: true,
+ /******/ get: getter
+ /******/ });
+ /******/ }
+ /******/ };
+ /******/
+ /******/ // getDefaultExport function for compatibility with non-harmony modules
+ /******/ __webpack_require__.n = function(module) {
+ /******/ var getter = module && module.__esModule ?
+ /******/ function getDefault() { return module['default']; } :
+ /******/ function getModuleExports() { return module; };
+ /******/ __webpack_require__.d(getter, 'a', getter);
+ /******/ return getter;
+ /******/ };
+ /******/
+ /******/ // Object.prototype.hasOwnProperty.call
+ /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+ /******/
+ /******/ // __webpack_public_path__
+ /******/ __webpack_require__.p = "";
+ /******/
+ /******/ // Load entry module and return exports
+ /******/ return __webpack_require__(__webpack_require__.s = 36);
+ /******/ })
+ /************************************************************************/
+ /******/ ([
+ /* 0 */
+ /***/ (function(module, exports) {
+
+ module.exports = jQuery;
+
+ /***/ }),
+ /* 1 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return rtl; });
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return GetYoDigits; });
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return transitionend; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
- var FOUNDATION_VERSION = '6.0.3';
- // Global Foundation object
- // This is attached to the window, or used as a module for AMD/Browserify
- var Foundation = {
- version: FOUNDATION_VERSION,
- /**
- * Stores initialized plugins.
- */
- _plugins: {},
- /**
- * Stores generated unique ids for plugin instances
- */
- _uuids: [],
- /**
- * Stores currently active plugins.
- */
- _activePlugins: {},
+ // Core Foundation Utilities, utilized in a number of places.
- /**
- * Returns a boolean for RTL support
- */
- rtl: function(){
- return $('html').attr('dir') === 'rtl';
- },
- /**
- * Defines a Foundation plugin, adding it to the `Foundation` namespace and the list of plugins to initialize when reflowing.
- * @param {Object} plugin - The constructor of the plugin.
- */
- plugin: function(plugin, name) {
- // Object key to use when adding to global Foundation object
- // Examples: Foundation.Reveal, Foundation.OffCanvas
- var className = (name || functionName(plugin));
- // Object key to use when storing the plugin, also used to create the identifying data attribute for the plugin
- // Examples: data-reveal, data-off-canvas
- var attrName = hyphenate(className);
+ /**
+ * Returns a boolean for RTL support
+ */
+ function rtl() {
+ return __WEBPACK_IMPORTED_MODULE_0_jquery___default()('html').attr('dir') === 'rtl';
+ }
- // Add to the Foundation object and the plugins list (for reflowing)
- this._plugins[attrName] = this[className] = plugin;
- },
- /**
- * @function
- * Creates a pointer to an instance of a Plugin within the Foundation._activePlugins object.
- * Sets the `[data-pluginName="uniqueIdHere"]`, allowing easy access to any plugin's internal methods.
- * Also fires the initialization event for each plugin, consolidating repeditive code.
- * @param {Object} plugin - an instance of a plugin, usually `this` in context.
- * @fires Plugin#init
- */
- registerPlugin: function(plugin){
- var pluginName = functionName(plugin.constructor).toLowerCase();
+ /**
+ * returns a random base-36 uid with namespacing
+ * @function
+ * @param {Number} length - number of random base-36 digits desired. Increase for more random strings.
+ * @param {String} namespace - name of plugin to be incorporated in uid, optional.
+ * @default {String} '' - if no plugin name is provided, nothing is appended to the uid.
+ * @returns {String} - unique id
+ */
+ function GetYoDigits(length, namespace) {
+ length = length || 6;
+ return Math.round(Math.pow(36, length + 1) - Math.random() * Math.pow(36, length)).toString(36).slice(1) + (namespace ? '-' + namespace : '');
+ }
- plugin.uuid = this.GetYoDigits(6, pluginName);
- plugin.$element.attr('data-' + pluginName, plugin.uuid)
- /**
- * Fires when the plugin has initialized.
- * @event Plugin#init
- */
- .trigger('init.zf.' + pluginName);
+ function transitionend($elem) {
+ var transitions = {
+ 'transition': 'transitionend',
+ 'WebkitTransition': 'webkitTransitionEnd',
+ 'MozTransition': 'transitionend',
+ 'OTransition': 'otransitionend'
+ };
+ var elem = document.createElement('div'),
+ end;
- this._activePlugins[plugin.uuid] = plugin;
+ for (var t in transitions) {
+ if (typeof elem.style[t] !== 'undefined') {
+ end = transitions[t];
+ }
+ }
+ if (end) {
+ return end;
+ } else {
+ end = setTimeout(function () {
+ $elem.triggerHandler('transitionend', [$elem]);
+ }, 1);
+ return 'transitionend';
+ }
+ }
- return;
- },
- /**
- * @function
- * Removes the pointer for an instance of a Plugin from the Foundation._activePlugins obj.
- * Also fires the destroyed event for the plugin, consolidating repeditive code.
- * @param {Object} plugin - an instance of a plugin, usually `this` in context.
- * @fires Plugin#destroyed
- */
- unregisterPlugin: function(plugin){
- var pluginName = functionName(plugin.constructor).toLowerCase();
- delete this._activePlugins[plugin.uuid];
- plugin.$element.removeAttr('data-' + pluginName)
- /**
- * Fires when the plugin has been destroyed.
- * @event Plugin#destroyed
- */
- .trigger('destroyed.zf.' + pluginName);
- return;
- },
+ /***/ }),
+ /* 2 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- /**
- * @function
- * Causes one or more active plugins to re-initialize, resetting event listeners, recalculating positions, etc.
- * @param {String} plugins - optional string of an individual plugin key, attained by calling `$(element).data('pluginName')`, or string of a plugin class i.e. `'dropdown'`
- * @default If no argument is passed, reflow all currently active plugins.
- */
- _reflow: function(plugins){
- var actvPlugins = Object.keys(this._activePlugins);
- var _this = this;
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Plugin; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_core__ = __webpack_require__(1);
- if(!plugins){
- actvPlugins.forEach(function(p){
- _this._activePlugins[p]._init();
- });
- }else if(typeof plugins === 'string'){
- var namespace = plugins.split('-')[1];
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
- if(namespace){
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- this._activePlugins[plugins]._init();
- }else{
- namespace = new RegExp(plugins, 'i');
- actvPlugins.filter(function(p){
- return namespace.test(p);
- }).forEach(function(p){
- _this._activePlugins[p]._init();
- });
- }
- }
- },
+ // Abstract class for providing lifecycle hooks. Expect plugins to define AT LEAST
+ // {function} _setup (replaces previous constructor),
+ // {function} _destroy (replaces previous destroy)
- /**
- * returns a random base-36 uid with namespacing
- * @function
- * @param {Number} length - number of random base-36 digits desired. Increase for more random strings.
- * @param {String} namespace - name of plugin to be incorporated in uid, optional.
- * @default {String} '' - if no plugin name is provided, nothing is appended to the uid.
- * @returns {String} - unique id
- */
- GetYoDigits: function(length, namespace){
- length = length || 6;
- return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1) + (namespace ? '-' + namespace : '');
- },
- /**
- * Initialize plugins on any elements within `elem` (and `elem` itself) that aren't already initialized.
- * @param {Object} elem - jQuery object containing the element to check inside. Also checks the element itself, unless it's the `document` object.
- * @param {String|Array} plugins - A list of plugins to initialize. Leave this out to initialize everything.
- */
- reflow: function(elem, plugins) {
- // If plugins is undefined, just grab everything
- if (typeof plugins === 'undefined') {
- plugins = Object.keys(this._plugins);
+ var Plugin = function () {
+ function Plugin(element, options) {
+ _classCallCheck(this, Plugin);
+
+ this._setup(element, options);
+ var pluginName = getPluginName(this);
+ this.uuid = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__foundation_util_core__["b" /* GetYoDigits */])(6, pluginName);
+
+ if (!this.$element.attr('data-' + pluginName)) {
+ this.$element.attr('data-' + pluginName, this.uuid);
}
- // If plugins is a string, convert it to an array with one item
- else if (typeof plugins === 'string') {
- plugins = [plugins];
+ if (!this.$element.data('zfPlugin')) {
+ this.$element.data('zfPlugin', this);
}
+ /**
+ * Fires when the plugin has initialized.
+ * @event Plugin#init
+ */
+ this.$element.trigger('init.zf.' + pluginName);
+ }
- var _this = this;
+ _createClass(Plugin, [{
+ key: 'destroy',
+ value: function destroy() {
+ this._destroy();
+ var pluginName = getPluginName(this);
+ this.$element.removeAttr('data-' + pluginName).removeData('zfPlugin')
+ /**
+ * Fires when the plugin has been destroyed.
+ * @event Plugin#destroyed
+ */
+ .trigger('destroyed.zf.' + pluginName);
+ for (var prop in this) {
+ this[prop] = null; //clean up script to prep for garbage collection.
+ }
+ }
+ }]);
- // Iterate through each plugin
- $.each(plugins, function(i, name) {
- // Get the current plugin
- var plugin = _this._plugins[name];
+ return Plugin;
+ }();
- // Localize the search to all elements inside elem, as well as elem itself, unless elem === document
- var $elem = $(elem).find('[data-'+name+']').addBack('*');
+ // Convert PascalCase to kebab-case
+ // Thank you: http://stackoverflow.com/a/8955580
- // For each plugin found, initialize it
- $elem.each(function() {
- // Don't double-dip on plugins
- if ($(this).attr('zf-plugin')) {
- console.warn("Tried to initialize "+name+" on an element that already has a Foundation plugin.");
- return;
- }
- $(this).data('zf-plugin', new plugin($(this)));
- });
- });
- },
- getFnName: functionName,
- transitionend: function($elem){
- var transitions = {
- 'transition': 'transitionend',
- 'WebkitTransition': 'webkitTransitionEnd',
- 'MozTransition': 'transitionend',
- 'OTransition': 'otransitionend'
- };
- var elem = document.createElement('div'),
- end;
- for (var t in transitions){
- if (typeof elem.style[t] !== 'undefined'){
- end = transitions[t];
- }
- }
- if(end){
- return end;
- }else{
- end = setTimeout(function(){
- $elem.triggerHandler('transitionend', [$elem]);
- }, 1);
- return 'transitionend';
- }
- }
- };
+ function hyphenate(str) {
+ return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+ }
+ function getPluginName(obj) {
+ if (typeof obj.constructor.name !== 'undefined') {
+ return hyphenate(obj.constructor.name);
+ } else {
+ return hyphenate(obj.className);
+ }
+ }
- Foundation.util = {
- /**
- * Function for applying a debounce effect to a function call.
- * @function
- * @param {Function} func - Function to be called at end of timeout.
- * @param {Number} delay - Time in ms to delay the call of `func`.
- * @returns function
- */
- throttle: function (func, delay) {
- var timer = null;
- return function () {
- var context = this, args = arguments;
- if (timer === null) {
- timer = setTimeout(function () {
- func.apply(context, args);
- timer = null;
- }, delay);
- }
- };
- }
- };
+ /***/ }),
+ /* 3 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- // TODO: consider not making this a jQuery function
- // TODO: need way to reflow vs. re-initialize
- /**
- * The Foundation jQuery method.
- * @param {String|Array} method - An action to perform on the current jQuery object.
- */
- var foundation = function(method) {
- var type = typeof method,
- $meta = $('meta.foundation-mq'),
- $noJS = $('.no-js');
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Keyboard; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_core__ = __webpack_require__(1);
+ /*******************************************
+ * *
+ * This util was created by Marius Olbertz *
+ * Please thank Marius on GitHub /owlbertz *
+ * or the web http://www.mariusolbertz.de/ *
+ * *
+ ******************************************/
- if(!$meta.length){
- $('<meta class="foundation-mq">').appendTo(document.head);
- }
- if($noJS.length){
- $noJS.removeClass('no-js');
- }
- if(type === 'undefined'){//needs to initialize the Foundation object, or an individual plugin.
- Foundation.MediaQuery._init();
- Foundation.reflow(this);
- }else if(type === 'string'){//an individual method to invoke on a plugin or group of plugins
- var args = Array.prototype.slice.call(arguments, 1);//collect all the arguments, if necessary
- var plugClass = this.data('zfPlugin');//determine the class of plugin
-
- if(plugClass !== undefined && plugClass[method] !== undefined){//make sure both the class and method exist
- if(this.length === 1){//if there's only one, call it directly.
- plugClass[method].apply(plugClass, args);
- }else{
- this.each(function(i, el){//otherwise loop through the jQuery collection and invoke the method on each
- plugClass[method].apply($(el).data('zfPlugin'), args);
- });
- }
- }else{//error for no class or no method
- throw new ReferenceError("We're sorry, '" + method + "' is not an available method for " + (plugClass ? functionName(plugClass) : 'this element') + '.');
- }
- }else{//error for invalid argument type
- throw new TypeError("We're sorry, '" + type + "' is not a valid parameter. You must use a string representing the method you wish to invoke.");
- }
- return this;
- };
- window.Foundation = Foundation;
- $.fn.foundation = foundation;
- // Polyfill for requestAnimationFrame
- (function() {
- if (!Date.now || !window.Date.now)
- window.Date.now = Date.now = function() { return new Date().getTime(); };
- var vendors = ['webkit', 'moz'];
- for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
- var vp = vendors[i];
- window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
- window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
- || window[vp+'CancelRequestAnimationFrame']);
- }
- if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)
- || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
- var lastTime = 0;
- window.requestAnimationFrame = function(callback) {
- var now = Date.now();
- var nextTime = Math.max(lastTime + 16, now);
- return setTimeout(function() { callback(lastTime = nextTime); },
- nextTime - now);
- };
- window.cancelAnimationFrame = clearTimeout;
- }
- /**
- * Polyfill for performance.now, required by rAF
- */
- if(!window.performance || !window.performance.now){
- window.performance = {
- start: Date.now(),
- now: function(){ return Date.now() - this.start; }
- };
- }
- })();
- if (!Function.prototype.bind) {
- Function.prototype.bind = function(oThis) {
- if (typeof this !== 'function') {
- // closest thing possible to the ECMAScript 5
- // internal IsCallable function
- throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
- }
- var aArgs = Array.prototype.slice.call(arguments, 1),
- fToBind = this,
- fNOP = function() {},
- fBound = function() {
- return fToBind.apply(this instanceof fNOP
- ? this
- : oThis,
- aArgs.concat(Array.prototype.slice.call(arguments)));
- };
+ var keyCodes = {
+ 9: 'TAB',
+ 13: 'ENTER',
+ 27: 'ESCAPE',
+ 32: 'SPACE',
+ 35: 'END',
+ 36: 'HOME',
+ 37: 'ARROW_LEFT',
+ 38: 'ARROW_UP',
+ 39: 'ARROW_RIGHT',
+ 40: 'ARROW_DOWN'
+ };
- if (this.prototype) {
- // native functions don't have a prototype
- fNOP.prototype = this.prototype;
- }
- fBound.prototype = new fNOP();
+ var commands = {};
- return fBound;
- };
- }
- // Polyfill to get the name of a function in IE9
- function functionName(fn) {
- if (Function.prototype.name === undefined) {
- var funcNameRegex = /function\s([^(]{1,})\(/;
- var results = (funcNameRegex).exec((fn).toString());
- return (results && results.length > 1) ? results[1].trim() : "";
- }
- else if (fn.prototype === undefined) {
- return fn.constructor.name;
- }
- else {
- return fn.prototype.constructor.name;
+ // Functions pulled out to be referenceable from internals
+ function findFocusable($element) {
+ if (!$element) {
+ return false;
}
+ return $element.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]').filter(function () {
+ if (!__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).is(':visible') || __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).attr('tabindex') < 0) {
+ return false;
+ } //only have visible elements and those that have a tabindex greater or equal 0
+ return true;
+ });
}
- // Convert PascalCase to kebab-case
- // Thank you: http://stackoverflow.com/a/8955580
- function hyphenate(str) {
- return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+ function parseKey(event) {
+ var key = keyCodes[event.which || event.keyCode] || String.fromCharCode(event.which).toUpperCase();
+
+ // Remove un-printable characters, e.g. for `fromCharCode` calls for CTRL only events
+ key = key.replace(/\W+/, '');
+
+ if (event.shiftKey) key = 'SHIFT_' + key;
+ if (event.ctrlKey) key = 'CTRL_' + key;
+ if (event.altKey) key = 'ALT_' + key;
+
+ // Remove trailing underscore, in case only modifiers were used (e.g. only `CTRL_ALT`)
+ key = key.replace(/_$/, '');
+
+ return key;
}
- }(jQuery);
+ var Keyboard = {
+ keys: getKeyCodes(keyCodes),
- !function(Foundation, window){
/**
- * Compares the dimensions of an element to a container and determines collision events with container.
- * @function
- * @param {jQuery} element - jQuery object to test for collisions.
- * @param {jQuery} parent - jQuery object to use as bounding container.
- * @param {Boolean} lrOnly - set to true to check left and right values only.
- * @param {Boolean} tbOnly - set to true to check top and bottom values only.
- * @default if no parent object passed, detects collisions with `window`.
- * @returns {Boolean} - true if collision free, false if a collision in any direction.
+ * Parses the (keyboard) event and returns a String that represents its key
+ * Can be used like Foundation.parseKey(event) === Foundation.keys.SPACE
+ * @param {Event} event - the event generated by the event handler
+ * @return String key - String that represents the key pressed
+ */
+ parseKey: parseKey,
+
+ /**
+ * Handles the given (keyboard) event
+ * @param {Event} event - the event generated by the event handler
+ * @param {String} component - Foundation component's name, e.g. Slider or Reveal
+ * @param {Objects} functions - collection of functions that are to be executed
*/
- var ImNotTouchingYou = function(element, parent, lrOnly, tbOnly){
- var eleDims = GetDimensions(element),
- top, bottom, left, right;
+ handleKey: function (event, component, functions) {
+ var commandList = commands[component],
+ keyCode = this.parseKey(event),
+ cmds,
+ command,
+ fn;
- if(parent){
- var parDims = GetDimensions(parent);
+ if (!commandList) return console.warn('Component not defined!');
- bottom = (eleDims.offset.top + eleDims.height <= parDims.height + parDims.offset.top);
- top = (eleDims.offset.top >= parDims.offset.top);
- left = (eleDims.offset.left >= parDims.offset.left);
- right = (eleDims.offset.left + eleDims.width <= parDims.width);
- }else{
- bottom = (eleDims.offset.top + eleDims.height <= eleDims.windowDims.height + eleDims.windowDims.offset.top);
- top = (eleDims.offset.top >= eleDims.windowDims.offset.top);
- left = (eleDims.offset.left >= eleDims.windowDims.offset.left);
- right = (eleDims.offset.left + eleDims.width <= eleDims.windowDims.width);
+ if (typeof commandList.ltr === 'undefined') {
+ // this component does not differentiate between ltr and rtl
+ cmds = commandList; // use plain list
+ } else {
+ // merge ltr and rtl: if document is rtl, rtl overwrites ltr and vice versa
+ if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__foundation_util_core__["a" /* rtl */])()) cmds = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, commandList.ltr, commandList.rtl);else cmds = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, commandList.rtl, commandList.ltr);
}
- var allDirs = [bottom, top, left, right];
+ command = cmds[keyCode];
- if(lrOnly){ return left === right === true; }
- if(tbOnly){ return top === bottom === true; }
+ fn = functions[command];
+ if (fn && typeof fn === 'function') {
+ // execute function if exists
+ var returnValue = fn.apply();
+ if (functions.handled || typeof functions.handled === 'function') {
+ // execute function when event was handled
+ functions.handled(returnValue);
+ }
+ } else {
+ if (functions.unhandled || typeof functions.unhandled === 'function') {
+ // execute function when event was not handled
+ functions.unhandled();
+ }
+ }
+ },
- return allDirs.indexOf(false) === -1;
- };
/**
- * Uses native methods to return an object of dimension values.
- * @function
- * @param {jQuery || HTML} element - jQuery object or DOM element for which to get the dimensions. Can be any element other that document or window.
- * @returns {Object} - nested object of integer pixel values
- * TODO - if element is window, return only those values.
+ * Finds all focusable elements within the given `$element`
+ * @param {jQuery} $element - jQuery object to search within
+ * @return {jQuery} $focusable - all focusable elements within `$element`
*/
- var GetDimensions = function(elem, test){
- elem = elem.length ? elem[0] : elem;
-
- if(elem === window || elem === document){ throw new Error("I'm sorry, Dave. I'm afraid I can't do that."); }
- var rect = elem.getBoundingClientRect(),
- parRect = elem.parentNode.getBoundingClientRect(),
- winRect = document.body.getBoundingClientRect(),
- winY = window.pageYOffset,
- winX = window.pageXOffset;
+ findFocusable: findFocusable,
- return {
- width: rect.width,
- height: rect.height,
- offset: {
- top: rect.top + winY,
- left: rect.left + winX
- },
- parentDims: {
- width: parRect.width,
- height: parRect.height,
- offset: {
- top: parRect.top + winY,
- left: parRect.left + winX
- }
- },
- windowDims: {
- width: winRect.width,
- height: winRect.height,
- offset: {
- top: winY,
- left: winX
- }
- }
- };
- };
/**
- * Returns an object of top and left integer pixel values for dynamically rendered elements,
- * such as: Tooltip, Reveal, and Dropdown
- * @function
- * @param {jQuery} element - jQuery object for the element being positioned.
- * @param {jQuery} anchor - jQuery object for the element's anchor point.
- * @param {String} position - a string relating to the desired position of the element, relative to it's anchor
- * @param {Number} vOffset - integer pixel value of desired vertical separation between anchor and element.
- * @param {Number} hOffset - integer pixel value of desired horizontal separation between anchor and element.
- * @param {Boolean} isOverflow - if a collision event is detected, sets to true to default the element to full width - any desired offset.
- * TODO alter/rewrite to work with `em` values as well/instead of pixels
- */
- var GetOffsets = function(element, anchor, position, vOffset, hOffset, isOverflow){
- var $eleDims = GetDimensions(element),
- // var $eleDims = GetDimensions(element),
- $anchorDims = anchor ? GetDimensions(anchor) : null;
- // $anchorDims = anchor ? GetDimensions(anchor) : null;
- switch(position){
- case 'top':
- return {
- left: $anchorDims.offset.left,
- top: $anchorDims.offset.top - ($eleDims.height + vOffset)
- };
- break;
- case 'left':
- return {
- left: $anchorDims.offset.left - ($eleDims.width + hOffset),
- top: $anchorDims.offset.top
- };
- break;
- case 'right':
- return {
- left: $anchorDims.offset.left + $anchorDims.width + hOffset,
- top: $anchorDims.offset.top
- };
- break;
- case 'center top':
- return {
- left: ($anchorDims.offset.left + ($anchorDims.width / 2)) - ($eleDims.width / 2),
- top: $anchorDims.offset.top - ($eleDims.height + vOffset)
- };
- break;
- case 'center bottom':
- return {
- left: isOverflow ? hOffset : (($anchorDims.offset.left + ($anchorDims.width / 2)) - ($eleDims.width / 2)),
- top: $anchorDims.offset.top + $anchorDims.height + vOffset
- };
- break;
- case 'center left':
- return {
- left: $anchorDims.offset.left - ($eleDims.width + hOffset),
- top: ($anchorDims.offset.top + ($anchorDims.height / 2)) - ($eleDims.height / 2)
- };
- break;
- case 'center right':
- return {
- left: $anchorDims.offset.left + $anchorDims.width + hOffset + 1,
- top: ($anchorDims.offset.top + ($anchorDims.height / 2)) - ($eleDims.height / 2)
- };
- break;
- case 'center':
- return {
- left: ($eleDims.windowDims.offset.left + ($eleDims.windowDims.width / 2)) - ($eleDims.width / 2),
- top: ($eleDims.windowDims.offset.top + ($eleDims.windowDims.height / 2)) - ($eleDims.height / 2)
- };
- break;
- case 'reveal':
- return {
- left: ($eleDims.windowDims.width - $eleDims.width) / 2,
- top: $eleDims.windowDims.offset.top + vOffset
- };
- case 'reveal full':
- return {
- left: $eleDims.windowDims.offset.left,
- top: $eleDims.windowDims.offset.top,
- };
- break;
- default:
- return {
- left: $anchorDims.offset.left,
- top: $anchorDims.offset.top + $anchorDims.height + vOffset
- };
- }
- };
- Foundation.Box = {
- ImNotTouchingYou: ImNotTouchingYou,
- GetDimensions: GetDimensions,
- GetOffsets: GetOffsets
- };
- }(window.Foundation, window);
-
- /*******************************************
- * *
- * This util was created by Marius Olbertz *
- * Please thank Marius on GitHub /owlbertz *
- * or the web http://www.mariusolbertz.de/ *
- * *
- ******************************************/
- !function($, Foundation){
- 'use strict';
- Foundation.Keyboard = {};
-
- var keyCodes = {
- 9: 'TAB',
- 13: 'ENTER',
- 27: 'ESCAPE',
- 32: 'SPACE',
- 37: 'ARROW_LEFT',
- 38: 'ARROW_UP',
- 39: 'ARROW_RIGHT',
- 40: 'ARROW_DOWN'
- };
+ * Returns the component name name
+ * @param {Object} component - Foundation component, e.g. Slider or Reveal
+ * @return String componentName
+ */
- // constants for easier comparing Can be used like Foundation.parseKey(event) === Foundation.keys.SPACE
- var keys = (function(kcs) {
- var k = {};
- for (var kc in kcs) k[kcs[kc]] = kcs[kc];
- return k;
- })(keyCodes);
+ register: function (componentName, cmds) {
+ commands[componentName] = cmds;
+ },
- Foundation.Keyboard.keys = keys;
+ // TODO9438: These references to Keyboard need to not require global. Will 'this' work in this context?
+ //
/**
- * Parses the (keyboard) event and returns a String that represents its key
- * Can be used like Foundation.parseKey(event) === Foundation.keys.SPACE
- * @param {Event} event - the event generated by the event handler
- * @return String key - String that represents the key pressed
- */
- var parseKey = function(event) {
- var key = keyCodes[event.which || event.keyCode] || String.fromCharCode(event.which).toUpperCase();
- if (event.shiftKey) key = 'SHIFT_' + key;
- if (event.ctrlKey) key = 'CTRL_' + key;
- if (event.altKey) key = 'ALT_' + key;
- return key;
- };
- Foundation.Keyboard.parseKey = parseKey;
-
-
- // plain commands per component go here, ltr and rtl are merged based on orientation
- var commands = {};
+ * Traps the focus in the given element.
+ * @param {jQuery} $element jQuery object to trap the foucs into.
+ */
+ trapFocus: function ($element) {
+ var $focusable = findFocusable($element),
+ $firstFocusable = $focusable.eq(0),
+ $lastFocusable = $focusable.eq(-1);
+
+ $element.on('keydown.zf.trapfocus', function (event) {
+ if (event.target === $lastFocusable[0] && parseKey(event) === 'TAB') {
+ event.preventDefault();
+ $firstFocusable.focus();
+ } else if (event.target === $firstFocusable[0] && parseKey(event) === 'SHIFT_TAB') {
+ event.preventDefault();
+ $lastFocusable.focus();
+ }
+ });
+ },
/**
- * Handles the given (keyboard) event
- * @param {Event} event - the event generated by the event handler
- * @param {Object} component - Foundation component, e.g. Slider or Reveal
- * @param {Objects} functions - collection of functions that are to be executed
+ * Releases the trapped focus from the given element.
+ * @param {jQuery} $element jQuery object to release the focus for.
*/
- var handleKey = function(event, component, functions) {
- var commandList = commands[Foundation.getFnName(component)],
- keyCode = parseKey(event),
- cmds,
- command,
- fn;
- if (!commandList) return console.warn('Component not defined!');
+ releaseFocus: function ($element) {
+ $element.off('keydown.zf.trapfocus');
+ }
+ };
- if (typeof commandList.ltr === 'undefined') { // this component does not differentiate between ltr and rtl
- cmds = commandList; // use plain list
- } else { // merge ltr and rtl: if document is rtl, rtl overwrites ltr and vice versa
- if (Foundation.rtl()) cmds = $.extend({}, commandList.ltr, commandList.rtl);
+ /*
+ * Constants for easier comparing.
+ * Can be used like Foundation.parseKey(event) === Foundation.keys.SPACE
+ */
+ function getKeyCodes(kcs) {
+ var k = {};
+ for (var kc in kcs) {
+ k[kcs[kc]] = kcs[kc];
+ }return k;
+ }
- else cmds = $.extend({}, commandList.rtl, commandList.ltr);
- }
- command = cmds[keyCode];
- fn = functions[command];
- if (fn && typeof fn === 'function') { // execute function with context of the component if exists
- fn.apply(component);
- if (functions.handled || typeof functions.handled === 'function') { // execute function when event was handled
- functions.handled.apply(component);
- }
- } else {
- if (functions.unhandled || typeof functions.unhandled === 'function') { // execute function when event was not handled
- functions.unhandled.apply(component);
- }
- }
- };
- Foundation.Keyboard.handleKey = handleKey;
+ /***/ }),
+ /* 4 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- /**
- * Finds all focusable elements within the given `$element`
- * @param {jQuery} $element - jQuery object to search within
- * @return {jQuery} $focusable - all focusable elements within `$element`
- */
- var findFocusable = function($element) {
- return $element.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]').filter(function() {
- if (!$(this).is(':visible') || $(this).attr('tabindex') < 0) { return false; } //only have visible elements and those that have a tabindex greater or equal 0
- return true;
- });
- };
- Foundation.Keyboard.findFocusable = findFocusable;
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MediaQuery; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
- /**
- * Returns the component name name
- * @param {Object} component - Foundation component, e.g. Slider or Reveal
- * @return String componentName
- */
- var register = function(componentName, cmds) {
- commands[componentName] = cmds;
- };
- Foundation.Keyboard.register = register;
- }(jQuery, window.Foundation);
- !function($, Foundation) {
// Default set of media queries
var defaultQueries = {
- 'default' : 'only screen',
- landscape : 'only screen and (orientation: landscape)',
- portrait : 'only screen and (orientation: portrait)',
- retina : 'only screen and (-webkit-min-device-pixel-ratio: 2),' +
- 'only screen and (min--moz-device-pixel-ratio: 2),' +
- 'only screen and (-o-min-device-pixel-ratio: 2/1),' +
- 'only screen and (min-device-pixel-ratio: 2),' +
- 'only screen and (min-resolution: 192dpi),' +
- 'only screen and (min-resolution: 2dppx)'
+ 'default': 'only screen',
+ landscape: 'only screen and (orientation: landscape)',
+ portrait: 'only screen and (orientation: portrait)',
+ retina: 'only screen and (-webkit-min-device-pixel-ratio: 2),' + 'only screen and (min--moz-device-pixel-ratio: 2),' + 'only screen and (-o-min-device-pixel-ratio: 2/1),' + 'only screen and (min-device-pixel-ratio: 2),' + 'only screen and (min-resolution: 192dpi),' + 'only screen and (min-resolution: 2dppx)'
};
+ // matchMedia() polyfill - Test a CSS media type/query in JS.
+ // Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license
+ var matchMedia = window.matchMedia || function () {
+ 'use strict';
+
+ // For browsers that support matchMedium api such as IE 9 and webkit
+
+ var styleMedia = window.styleMedia || window.media;
+
+ // For those that don't support matchMedium
+ if (!styleMedia) {
+ var style = document.createElement('style'),
+ script = document.getElementsByTagName('script')[0],
+ info = null;
+
+ style.type = 'text/css';
+ style.id = 'matchmediajs-test';
+
+ script && script.parentNode && script.parentNode.insertBefore(style, script);
+
+ // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
+ info = 'getComputedStyle' in window && window.getComputedStyle(style, null) || style.currentStyle;
+
+ styleMedia = {
+ matchMedium: function (media) {
+ var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
+
+ // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
+ if (style.styleSheet) {
+ style.styleSheet.cssText = text;
+ } else {
+ style.textContent = text;
+ }
+
+ // Test if media query is true or false
+ return info.width === '1px';
+ }
+ };
+ }
+
+ return function (media) {
+ return {
+ matches: styleMedia.matchMedium(media || 'all'),
+ media: media || 'all'
+ };
+ };
+ }();
+
var MediaQuery = {
queries: [],
+
current: '',
+ /**
+ * Initializes the media query helper, by extracting the breakpoint list from the CSS and activating the breakpoint watcher.
+ * @function
+ * @private
+ */
+ _init: function () {
+ var self = this;
+ var $meta = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('meta.foundation-mq');
+ if (!$meta.length) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('<meta class="foundation-mq">').appendTo(document.head);
+ }
+
+ var extractedStyles = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('.foundation-mq').css('font-family');
+ var namedQueries;
+
+ namedQueries = parseStyleToObject(extractedStyles);
+
+ for (var key in namedQueries) {
+ if (namedQueries.hasOwnProperty(key)) {
+ self.queries.push({
+ name: key,
+ value: 'only screen and (min-width: ' + namedQueries[key] + ')'
+ });
+ }
+ }
+
+ this.current = this._getCurrentSize();
+
+ this._watcher();
+ },
+
+
/**
* Checks if the screen is at least as wide as a breakpoint.
* @function
* @param {String} size - Name of the breakpoint to check.
* @returns {Boolean} `true` if the breakpoint matches, `false` if it's smaller.
*/
- atLeast: function(size) {
+ atLeast: function (size) {
var query = this.get(size);
if (query) {
- return window.matchMedia(query).matches;
+ return matchMedia(query).matches;
}
return false;
},
+
/**
- * Gets the media query of a breakpoint.
+ * Checks if the screen matches to a breakpoint.
* @function
- * @param {String} size - Name of the breakpoint to get.
- * @returns {String|null} - The media query of the breakpoint, or `null` if the breakpoint doesn't exist.
+ * @param {String} size - Name of the breakpoint to check, either 'small only' or 'small'. Omitting 'only' falls back to using atLeast() method.
+ * @returns {Boolean} `true` if the breakpoint matches, `false` if it does not.
*/
- get: function(size) {
- for (var i in this.queries) {
- var query = this.queries[i];
- if (size === query.name) return query.value;
+ is: function (size) {
+ size = size.trim().split(' ');
+ if (size.length > 1 && size[1] === 'only') {
+ if (size[0] === this._getCurrentSize()) return true;
+ } else {
+ return this.atLeast(size[0]);
}
-
- return null;
+ return false;
},
+
/**
- * Initializes the media query helper, by extracting the breakpoint list from the CSS and activating the breakpoint watcher.
+ * Gets the media query of a breakpoint.
* @function
- * @private
+ * @param {String} size - Name of the breakpoint to get.
+ * @returns {String|null} - The media query of the breakpoint, or `null` if the breakpoint doesn't exist.
*/
- _init: function() {
- var self = this;
- var extractedStyles = $('.foundation-mq').css('font-family');
- var namedQueries;
-
- namedQueries = parseStyleToObject(extractedStyles);
-
- for (var key in namedQueries) {
- self.queries.push({
- name: key,
- value: 'only screen and (min-width: ' + namedQueries[key] + ')'
- });
+ get: function (size) {
+ for (var i in this.queries) {
+ if (this.queries.hasOwnProperty(i)) {
+ var query = this.queries[i];
+ if (size === query.name) return query.value;
+ }
}
- this.current = this._getCurrentSize();
-
- this._watcher();
-
- // Extend default queries
- // namedQueries = $.extend(defaultQueries, namedQueries);
+ return null;
},
+
/**
* Gets the current breakpoint name by testing every breakpoint and returning the last one to match (the biggest one).
* @function
* @private
* @returns {String} Name of the current breakpoint.
*/
- _getCurrentSize: function() {
+ _getCurrentSize: function () {
var matched;
- for (var i in this.queries) {
+ for (var i = 0; i < this.queries.length; i++) {
var query = this.queries[i];
- if (window.matchMedia(query.value).matches) {
+ if (matchMedia(query.value).matches) {
matched = query;
}
}
- if(typeof matched === 'object') {
+ if (typeof matched === 'object') {
return matched.name;
} else {
return matched;
}
},
+
/**
* Activates the breakpoint watcher, which fires an event on the window whenever the breakpoint changes.
* @function
* @private
*/
- _watcher: function() {
+ _watcher: function () {
var _this = this;
- $(window).on('resize.zf.mediaquery', function() {
- var newSize = _this._getCurrentSize();
-
- if (newSize !== _this.current) {
- // Broadcast the media query change on the window
- $(window).trigger('changed.zf.mediaquery', [newSize, _this.current]);
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off('resize.zf.mediaquery').on('resize.zf.mediaquery', function () {
+ var newSize = _this._getCurrentSize(),
+ currentSize = _this.current;
+ if (newSize !== currentSize) {
// Change the current media query
_this.current = newSize;
+
+ // Broadcast the media query change on the window
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).trigger('changed.zf.mediaquery', [newSize, currentSize]);
}
});
}
};
- Foundation.MediaQuery = MediaQuery;
-
- // matchMedia() polyfill - Test a CSS media type/query in JS.
- // Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license
- window.matchMedia || (window.matchMedia = function() {
- 'use strict';
-
- // For browsers that support matchMedium api such as IE 9 and webkit
- var styleMedia = (window.styleMedia || window.media);
-
- // For those that don't support matchMedium
- if (!styleMedia) {
- var style = document.createElement('style'),
- script = document.getElementsByTagName('script')[0],
- info = null;
-
- style.type = 'text/css';
- style.id = 'matchmediajs-test';
-
- script.parentNode.insertBefore(style, script);
-
- // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
- info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
-
- styleMedia = {
- matchMedium: function(media) {
- var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
-
- // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
- if (style.styleSheet) {
- style.styleSheet.cssText = text;
- } else {
- style.textContent = text;
- }
-
- // Test if media query is true or false
- return info.width === '1px';
- }
- };
- }
-
- return function(media) {
- return {
- matches: styleMedia.matchMedium(media || 'all'),
- media: media || 'all'
- };
- };
- }());
-
// Thank you: https://github.com/sindresorhus/query-string
function parseStyleToObject(str) {
var styleObject = {};
@@ @@ -820,7 +616,7 @@ function parseStyleToObject(str) {
return styleObject;
}
- styleObject = str.split('&').reduce(function(ret, param) {
+ styleObject = str.split('&').reduce(function (ret, param) {
var parts = param.replace(/\+/g, ' ').split('=');
var key = parts[0];
var val = parts[1];
@@ @@ -843,5283 +639,9882 @@ function parseStyleToObject(str) {
return styleObject;
}
- }(jQuery, Foundation)
- /**
- * Motion module.
- * @module foundation.motion
- */
- !function($, Foundation) {
- var initClasses = ['mui-enter', 'mui-leave'];
- var activeClasses = ['mui-enter-active', 'mui-leave-active'];
+ /***/ }),
+ /* 5 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- function animate(isIn, element, animation, cb) {
- element = $(element).eq(0);
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Triggers; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_motion__ = __webpack_require__(6);
- if (!element.length) return;
- var initClass = isIn ? initClasses[0] : initClasses[1];
- var activeClass = isIn ? activeClasses[0] : activeClasses[1];
- // Set up the animation
- reset();
- element.addClass(animation)
- .css('transition', 'none');
- // .addClass(initClass);
- // if(isIn) element.show();
- requestAnimationFrame(function() {
- element.addClass(initClass);
- if (isIn) element.show();
- });
- // Start the animation
- requestAnimationFrame(function() {
- element[0].offsetWidth;
- element.css('transition', '');
- element.addClass(activeClass);
- });
- // Move(500, element, function(){
- // // element[0].offsetWidth;
- // element.css('transition', '');
- // element.addClass(activeClass);
- // });
- // Clean up the animation when it finishes
- element.one(Foundation.transitionend(element), finish);//.one('finished.zf.animate', finish);
- // Hides the element (for out animations), resets the element, and runs a callback
- function finish() {
- if (!isIn) element.hide();
- reset();
- if (cb) cb.apply(element);
+ var MutationObserver = function () {
+ var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
+ for (var i = 0; i < prefixes.length; i++) {
+ if (prefixes[i] + 'MutationObserver' in window) {
+ return window[prefixes[i] + 'MutationObserver'];
+ }
}
+ return false;
+ }();
- // Resets transitions and removes motion-specific classes
- function reset() {
- element[0].style.transitionDuration = 0;
- element.removeClass(initClass + ' ' + activeClass + ' ' + animation);
- }
- }
+ var triggers = function (el, type) {
+ el.data(type).split(' ').forEach(function (id) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + id)[type === 'close' ? 'trigger' : 'triggerHandler'](type + '.zf.trigger', [el]);
+ });
+ };
- var Motion = {
- animateIn: function(element, animation, /*duration,*/ cb) {
- animate(true, element, animation, cb);
+ var Triggers = {
+ Listeners: {
+ Basic: {},
+ Global: {}
},
-
- animateOut: function(element, animation, /*duration,*/ cb) {
- animate(false, element, animation, cb);
- }
+ Initializers: {}
};
- var Move = function(duration, elem, fn){
- var anim, prog, start = null;
- // console.log('called');
-
- function move(ts){
- if(!start) start = window.performance.now();
- // console.log(start, ts);
- prog = ts - start;
- fn.apply(elem);
+ Triggers.Listeners.Basic = {
+ openListener: function () {
+ triggers(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this), 'open');
+ },
+ closeListener: function () {
+ var id = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).data('close');
+ if (id) {
+ triggers(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this), 'close');
+ } else {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).trigger('close.zf.trigger');
+ }
+ },
+ toggleListener: function () {
+ var id = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).data('toggle');
+ if (id) {
+ triggers(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this), 'toggle');
+ } else {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).trigger('toggle.zf.trigger');
+ }
+ },
+ closeableListener: function (e) {
+ e.stopPropagation();
+ var animation = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).data('closable');
- if(prog < duration){ anim = window.requestAnimationFrame(move, elem); }
- else{
- window.cancelAnimationFrame(anim);
- elem.trigger('finished.zf.animate', [elem]).triggerHandler('finished.zf.animate', [elem]);
+ if (animation !== '') {
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_motion__["a" /* Motion */].animateOut(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this), animation, function () {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).trigger('closed.zf');
+ });
+ } else {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).fadeOut().trigger('closed.zf');
}
+ },
+ toggleFocusListener: function () {
+ var id = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).data('toggle-focus');
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + id).triggerHandler('toggle.zf.trigger', [__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this)]);
}
- anim = window.requestAnimationFrame(move);
};
- Foundation.Move = Move;
- Foundation.Motion = Motion;
-
- }(jQuery, Foundation);
+ // Elements with [data-open] will reveal a plugin that supports it when clicked.
+ Triggers.Initializers.addOpenListener = function ($elem) {
+ $elem.off('click.zf.trigger', Triggers.Listeners.Basic.openListener);
+ $elem.on('click.zf.trigger', '[data-open]', Triggers.Listeners.Basic.openListener);
+ };
- !function($, Foundation){
- 'use strict';
- Foundation.Nest = {
- Feather: function(menu, type){
- menu.attr('role', 'menubar');
- type = type || 'zf';
- var items = menu.find('li').attr({'role': 'menuitem'}),
- subMenuClass = 'is-' + type + '-submenu',
- subItemClass = subMenuClass + '-item',
- hasSubClass = 'is-' + type + '-submenu-parent';
-
- items.each(function(){
- var $item = $(this),
- $sub = $item.children('ul');
- if($sub.length){
- $item.addClass('has-submenu ' + hasSubClass);
- $sub.addClass('submenu ' + subMenuClass).attr('data-submenu', '');
- }
- if($item.parent('[data-submenu]').length){
- $item.addClass('is-submenu-item ' + subItemClass);
- }
- });
- return;
- },
- Burn: function(menu, type){
- var items = menu.find('li').removeAttr('tabindex'),
- subMenuClass = 'is-' + type + '-submenu',
- subItemClass = subMenuClass + '-item',
- hasSubClass = 'is-' + type + '-submenu-parent';
-
- // menu.find('.is-active').removeClass('is-active');
- menu.find('*')
- // menu.find('.' + subMenuClass + ', .' + subItemClass + ', .is-active, .has-submenu, .is-submenu-item, .submenu, [data-submenu]')
- .removeClass(subMenuClass + ' ' + subItemClass + ' ' + hasSubClass + ' has-submenu is-submenu-item submenu is-active')
- .removeAttr('data-submenu').css('display', '');
-
- // console.log( menu.find('.' + subMenuClass + ', .' + subItemClass + ', .has-submenu, .is-submenu-item, .submenu, [data-submenu]')
- // .removeClass(subMenuClass + ' ' + subItemClass + ' has-submenu is-submenu-item submenu')
- // .removeAttr('data-submenu'));
- // items.each(function(){
- // var $item = $(this),
- // $sub = $item.children('ul');
- // if($item.parent('[data-submenu]').length){
- // $item.removeClass('is-submenu-item ' + subItemClass);
- // }
- // if($sub.length){
- // $item.removeClass('has-submenu');
- // $sub.removeClass('submenu ' + subMenuClass).removeAttr('data-submenu');
- // }
- // });
- }
- };
- }(jQuery, window.Foundation);
+ // Elements with [data-close] will close a plugin that supports it when clicked.
+ // If used without a value on [data-close], the event will bubble, allowing it to close a parent component.
+ Triggers.Initializers.addCloseListener = function ($elem) {
+ $elem.off('click.zf.trigger', Triggers.Listeners.Basic.closeListener);
+ $elem.on('click.zf.trigger', '[data-close]', Triggers.Listeners.Basic.closeListener);
+ };
- !function($, Foundation){
- 'use strict';
- var Timer = function(elem, options, cb){
- var _this = this,
- duration = options.duration,//options is an object for easily adding features later.
- nameSpace = Object.keys(elem.data())[0] || 'timer',
- remain = -1,
- start,
- timer;
-
- this.restart = function(){
- remain = -1;
- clearTimeout(timer);
- this.start();
- };
+ // Elements with [data-toggle] will toggle a plugin that supports it when clicked.
+ Triggers.Initializers.addToggleListener = function ($elem) {
+ $elem.off('click.zf.trigger', Triggers.Listeners.Basic.toggleListener);
+ $elem.on('click.zf.trigger', '[data-toggle]', Triggers.Listeners.Basic.toggleListener);
+ };
- this.start = function(){
- // if(!elem.data('paused')){ return false; }//maybe implement this sanity check if used for other things.
- clearTimeout(timer);
- remain = remain <= 0 ? duration : remain;
- elem.data('paused', false);
- start = Date.now();
- timer = setTimeout(function(){
- if(options.infinite){
- _this.restart();//rerun the timer.
- }
- cb();
- }, remain);
- elem.trigger('timerstart.zf.' + nameSpace);
- };
+ // Elements with [data-closable] will respond to close.zf.trigger events.
+ Triggers.Initializers.addCloseableListener = function ($elem) {
+ $elem.off('close.zf.trigger', Triggers.Listeners.Basic.closeableListener);
+ $elem.on('close.zf.trigger', '[data-closeable], [data-closable]', Triggers.Listeners.Basic.closeableListener);
+ };
- this.pause = function(){
- //if(elem.data('paused')){ return false; }//maybe implement this sanity check if used for other things.
- clearTimeout(timer);
- elem.data('paused', true);
- var end = Date.now();
- remain = remain - (end - start);
- elem.trigger('timerpaused.zf.' + nameSpace);
- };
- };
- /**
- * Runs a callback function when images are fully loaded.
- * @param {Object} images - Image(s) to check if loaded.
- * @param {Func} callback - Function to execute when image is fully loaded.
- */
- var onImagesLoaded = function(images, callback){
- var self = this,
- unloaded = images.length;
+ // Elements with [data-toggle-focus] will respond to coming in and out of focus
+ Triggers.Initializers.addToggleFocusListener = function ($elem) {
+ $elem.off('focus.zf.trigger blur.zf.trigger', Triggers.Listeners.Basic.toggleFocusListener);
+ $elem.on('focus.zf.trigger blur.zf.trigger', '[data-toggle-focus]', Triggers.Listeners.Basic.toggleFocusListener);
+ };
- if (unloaded === 0) {
- callback();
+ // More Global/complex listeners and triggers
+ Triggers.Listeners.Global = {
+ resizeListener: function ($nodes) {
+ if (!MutationObserver) {
+ //fallback for IE 9
+ $nodes.each(function () {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).triggerHandler('resizeme.zf.trigger');
+ });
}
+ //trigger all listening elements and signal a resize event
+ $nodes.attr('data-events', "resize");
+ },
+ scrollListener: function ($nodes) {
+ if (!MutationObserver) {
+ //fallback for IE 9
+ $nodes.each(function () {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).triggerHandler('scrollme.zf.trigger');
+ });
+ }
+ //trigger all listening elements and signal a scroll event
+ $nodes.attr('data-events', "scroll");
+ },
+ closeMeListener: function (e, pluginId) {
+ var plugin = e.namespace.split('.')[0];
+ var plugins = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-' + plugin + ']').not('[data-yeti-box="' + pluginId + '"]');
- var singleImageLoaded = function() {
- unloaded--;
- if (unloaded === 0) {
- callback();
- }
- };
-
- images.each(function() {
- if (this.complete) {
- singleImageLoaded();
- }
- else if (typeof this.naturalWidth !== 'undefined' && this.naturalWidth > 0) {
- singleImageLoaded();
- }
- else {
- $(this).one('load', function() {
- singleImageLoaded();
- });
- }
+ plugins.each(function () {
+ var _this = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this);
+ _this.triggerHandler('close.zf.trigger', [_this]);
});
- };
-
- Foundation.Timer = Timer;
- Foundation.onImagesLoaded = onImagesLoaded;
- }(jQuery, window.Foundation);
-
- //**************************************************
- //**Work inspired by multiple jquery swipe plugins**
- //**Done by Yohai Ararat ***************************
- //**************************************************
- (function($) {
-
- $.spotSwipe = {
- version: '1.0.0',
- enabled: 'ontouchstart' in document.documentElement,
- preventDefault: true,
- moveThreshold: 75,
- timeThreshold: 200
- };
+ }
- var startPosX,
- startPosY,
- startTime,
- elapsedTime,
- isMoving = false;
+ // Global, parses whole document.
+ };Triggers.Initializers.addClosemeListener = function (pluginName) {
+ var yetiBoxes = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-yeti-box]'),
+ plugNames = ['dropdown', 'tooltip', 'reveal'];
- function onTouchEnd() {
- // alert(this);
- this.removeEventListener('touchmove', onTouchMove);
- this.removeEventListener('touchend', onTouchEnd);
- isMoving = false;
+ if (pluginName) {
+ if (typeof pluginName === 'string') {
+ plugNames.push(pluginName);
+ } else if (typeof pluginName === 'object' && typeof pluginName[0] === 'string') {
+ plugNames.concat(pluginName);
+ } else {
+ console.error('Plugin names must be strings');
+ }
}
+ if (yetiBoxes.length) {
+ var listeners = plugNames.map(function (name) {
+ return 'closeme.zf.' + name;
+ }).join(' ');
- function onTouchMove(e) {
- if ($.spotSwipe.preventDefault) { e.preventDefault(); }
- if(isMoving) {
- var x = e.touches[0].pageX;
- var y = e.touches[0].pageY;
- var dx = startPosX - x;
- var dy = startPosY - y;
- var dir;
- elapsedTime = new Date().getTime() - startTime;
- if(Math.abs(dx) >= $.spotSwipe.moveThreshold && elapsedTime <= $.spotSwipe.timeThreshold) {
- dir = dx > 0 ? 'left' : 'right';
- }
- else if(Math.abs(dy) >= $.spotSwipe.moveThreshold && elapsedTime <= $.spotSwipe.timeThreshold) {
- dir = dy > 0 ? 'down' : 'up';
- }
- if(dir) {
- onTouchEnd.call(this);
- $(this).trigger('swipe', dir).trigger('swipe' + dir);
- }
- }
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off(listeners).on(listeners, Triggers.Listeners.Global.closeMeListener);
}
+ };
- function onTouchStart(e) {
- if (e.touches.length == 1) {
- startPosX = e.touches[0].pageX;
- startPosY = e.touches[0].pageY;
- isMoving = true;
- startTime = new Date().getTime();
- this.addEventListener('touchmove', onTouchMove, false);
- this.addEventListener('touchend', onTouchEnd, false);
+ function debounceGlobalListener(debounce, trigger, listener) {
+ var timer = void 0,
+ args = Array.prototype.slice.call(arguments, 3);
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off(trigger).on(trigger, function (e) {
+ if (timer) {
+ clearTimeout(timer);
}
+ timer = setTimeout(function () {
+ listener.apply(null, args);
+ }, debounce || 10); //default time to emit scroll event
+ });
+ }
+
+ Triggers.Initializers.addResizeListener = function (debounce) {
+ var $nodes = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-resize]');
+ if ($nodes.length) {
+ debounceGlobalListener(debounce, 'resize.zf.trigger', Triggers.Listeners.Global.resizeListener, $nodes);
}
+ };
- function init() {
- this.addEventListener && this.addEventListener('touchstart', onTouchStart, false);
+ Triggers.Initializers.addScrollListener = function (debounce) {
+ var $nodes = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-scroll]');
+ if ($nodes.length) {
+ debounceGlobalListener(debounce, 'scroll.zf.trigger', Triggers.Listeners.Global.scrollListener, $nodes);
}
+ };
- function teardown() {
- this.removeEventListener('touchstart', onTouchStart);
+ Triggers.Initializers.addMutationEventsListener = function ($elem) {
+ if (!MutationObserver) {
+ return false;
}
+ var $nodes = $elem.find('[data-resize], [data-scroll], [data-mutate]');
- $.event.special.swipe = { setup: init };
+ //element callback
+ var listeningElementsMutation = function (mutationRecordsList) {
+ var $target = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(mutationRecordsList[0].target);
- $.each(['left', 'up', 'down', 'right'], function () {
- $.event.special['swipe' + this] = { setup: function(){
- $(this).on('swipe', $.noop);
- } };
- });
- })(jQuery);
- /****************************************************
- * Method for adding psuedo drag events to elements *
- ***************************************************/
- !function($){
- $.fn.addTouch = function(){
- this.each(function(i,el){
- $(el).bind('touchstart touchmove touchend touchcancel',function(){
- //we pass the original event object because the jQuery event
- //object is normalized to w3c specs and does not provide the TouchList
- handleTouch(event);
- });
- });
+ //trigger the event handler for the element depending on type
+ switch (mutationRecordsList[0].type) {
+ case "attributes":
+ if ($target.attr("data-events") === "scroll" && mutationRecordsList[0].attributeName === "data-events") {
+ $target.triggerHandler('scrollme.zf.trigger', [$target, window.pageYOffset]);
+ }
+ if ($target.attr("data-events") === "resize" && mutationRecordsList[0].attributeName === "data-events") {
+ $target.triggerHandler('resizeme.zf.trigger', [$target]);
+ }
+ if (mutationRecordsList[0].attributeName === "style") {
+ $target.closest("[data-mutate]").attr("data-events", "mutate");
+ $target.closest("[data-mutate]").triggerHandler('mutateme.zf.trigger', [$target.closest("[data-mutate]")]);
+ }
+ break;
- var handleTouch = function(event){
- var touches = event.changedTouches,
- first = touches[0],
- eventTypes = {
- touchstart: 'mousedown',
- touchmove: 'mousemove',
- touchend: 'mouseup'
- },
- type = eventTypes[event.type];
+ case "childList":
+ $target.closest("[data-mutate]").attr("data-events", "mutate");
+ $target.closest("[data-mutate]").triggerHandler('mutateme.zf.trigger', [$target.closest("[data-mutate]")]);
+ break;
- var simulatedEvent = document.createEvent('MouseEvent');
- simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null);
- first.target.dispatchEvent(simulatedEvent);
- };
+ default:
+ return false;
+ //nothing
+ }
};
- }(jQuery);
-
-
- //**********************************
- //**From the jQuery Mobile Library**
- //**need to recreate functionality**
- //**and try to improve if possible**
- //**********************************
-
- /* Removing the jQuery function ****
- ************************************
-
- (function( $, window, undefined ) {
-
- var $document = $( document ),
- // supportTouch = $.mobile.support.touch,
- touchStartEvent = 'touchstart'//supportTouch ? "touchstart" : "mousedown",
- touchStopEvent = 'touchend'//supportTouch ? "touchend" : "mouseup",
- touchMoveEvent = 'touchmove'//supportTouch ? "touchmove" : "mousemove";
-
- // setup new event shortcuts
- $.each( ( "touchstart touchmove touchend " +
- "swipe swipeleft swiperight" ).split( " " ), function( i, name ) {
-
- $.fn[ name ] = function( fn ) {
- return fn ? this.bind( name, fn ) : this.trigger( name );
- };
-
- // jQuery < 1.8
- if ( $.attrFn ) {
- $.attrFn[ name ] = true;
- }
- });
-
- function triggerCustomEvent( obj, eventType, event, bubble ) {
- var originalType = event.type;
- event.type = eventType;
- if ( bubble ) {
- $.event.trigger( event, undefined, obj );
- } else {
- $.event.dispatch.call( obj, event );
- }
- event.type = originalType;
- }
-
- // also handles taphold
-
- // Also handles swipeleft, swiperight
- $.event.special.swipe = {
-
- // More than this horizontal displacement, and we will suppress scrolling.
- scrollSupressionThreshold: 30,
-
- // More time than this, and it isn't a swipe.
- durationThreshold: 1000,
-
- // Swipe horizontal displacement must be more than this.
- horizontalDistanceThreshold: window.devicePixelRatio >= 2 ? 15 : 30,
-
- // Swipe vertical displacement must be less than this.
- verticalDistanceThreshold: window.devicePixelRatio >= 2 ? 15 : 30,
-
- getLocation: function ( event ) {
- var winPageX = window.pageXOffset,
- winPageY = window.pageYOffset,
- x = event.clientX,
- y = event.clientY;
-
- if ( event.pageY === 0 && Math.floor( y ) > Math.floor( event.pageY ) ||
- event.pageX === 0 && Math.floor( x ) > Math.floor( event.pageX ) ) {
-
- // iOS4 clientX/clientY have the value that should have been
- // in pageX/pageY. While pageX/page/ have the value 0
- x = x - winPageX;
- y = y - winPageY;
- } else if ( y < ( event.pageY - winPageY) || x < ( event.pageX - winPageX ) ) {
-
- // Some Android browsers have totally bogus values for clientX/Y
- // when scrolling/zooming a page. Detectable since clientX/clientY
- // should never be smaller than pageX/pageY minus page scroll
- x = event.pageX - winPageX;
- y = event.pageY - winPageY;
- }
-
- return {
- x: x,
- y: y
- };
- },
-
- start: function( event ) {
- var data = event.originalEvent.touches ?
- event.originalEvent.touches[ 0 ] : event,
- location = $.event.special.swipe.getLocation( data );
- return {
- time: ( new Date() ).getTime(),
- coords: [ location.x, location.y ],
- origin: $( event.target )
- };
- },
-
- stop: function( event ) {
- var data = event.originalEvent.touches ?
- event.originalEvent.touches[ 0 ] : event,
- location = $.event.special.swipe.getLocation( data );
- return {
- time: ( new Date() ).getTime(),
- coords: [ location.x, location.y ]
- };
- },
-
- handleSwipe: function( start, stop, thisObject, origTarget ) {
- if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
- Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
- Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
- var direction = start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight";
-
- triggerCustomEvent( thisObject, "swipe", $.Event( "swipe", { target: origTarget, swipestart: start, swipestop: stop }), true );
- triggerCustomEvent( thisObject, direction,$.Event( direction, { target: origTarget, swipestart: start, swipestop: stop } ), true );
- return true;
- }
- return false;
-
- },
-
- // This serves as a flag to ensure that at most one swipe event event is
- // in work at any given time
- eventInProgress: false,
-
- setup: function() {
- var events,
- thisObject = this,
- $this = $( thisObject ),
- context = {};
-
- // Retrieve the events data for this element and add the swipe context
- events = $.data( this, "mobile-events" );
- if ( !events ) {
- events = { length: 0 };
- $.data( this, "mobile-events", events );
- }
- events.length++;
- events.swipe = context;
-
- context.start = function( event ) {
-
- // Bail if we're already working on a swipe event
- if ( $.event.special.swipe.eventInProgress ) {
- return;
- }
- $.event.special.swipe.eventInProgress = true;
-
- var stop,
- start = $.event.special.swipe.start( event ),
- origTarget = event.target,
- emitted = false;
-
- context.move = function( event ) {
- if ( !start || event.isDefaultPrevented() ) {
- return;
- }
-
- stop = $.event.special.swipe.stop( event );
- if ( !emitted ) {
- emitted = $.event.special.swipe.handleSwipe( start, stop, thisObject, origTarget );
- if ( emitted ) {
-
- // Reset the context to make way for the next swipe event
- $.event.special.swipe.eventInProgress = false;
- }
- }
- // prevent scrolling
- if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.scrollSupressionThreshold ) {
- event.preventDefault();
- }
- };
-
- context.stop = function() {
- emitted = true;
-
- // Reset the context to make way for the next swipe event
- $.event.special.swipe.eventInProgress = false;
- $document.off( touchMoveEvent, context.move );
- context.move = null;
- };
-
- $document.on( touchMoveEvent, context.move )
- .one( touchStopEvent, context.stop );
- };
- $this.on( touchStartEvent, context.start );
- },
-
- teardown: function() {
- var events, context;
-
- events = $.data( this, "mobile-events" );
- if ( events ) {
- context = events.swipe;
- delete events.swipe;
- events.length--;
- if ( events.length === 0 ) {
- $.removeData( this, "mobile-events" );
- }
- }
-
- if ( context ) {
- if ( context.start ) {
- $( this ).off( touchStartEvent, context.start );
- }
- if ( context.move ) {
- $document.off( touchMoveEvent, context.move );
- }
- if ( context.stop ) {
- $document.off( touchStopEvent, context.stop );
- }
- }
- }
- };
- $.each({
- swipeleft: "swipe.left",
- swiperight: "swipe.right"
- }, function( event, sourceEvent ) {
-
- $.event.special[ event ] = {
- setup: function() {
- $( this ).bind( sourceEvent, $.noop );
- },
- teardown: function() {
- $( this ).unbind( sourceEvent );
- }
- };
- });
- })( jQuery, this );
- */
-
- !function(Foundation, $) {
- 'use strict';
- // Elements with [data-open] will reveal a plugin that supports it when clicked.
- $(document).on('click.zf.trigger', '[data-open]', function() {
- var id = $(this).data('open');
- $('#' + id).triggerHandler('open.zf.trigger', [$(this)]);
- });
- // Elements with [data-close] will close a plugin that supports it when clicked.
- // If used without a value on [data-close], the event will bubble, allowing it to close a parent component.
- $(document).on('click.zf.trigger', '[data-close]', function() {
- var id = $(this).data('close');
- if (id) {
- $('#' + id).triggerHandler('close.zf.trigger', [$(this)]);
+ if ($nodes.length) {
+ //for each element that needs to listen for resizing, scrolling, or mutation add a single observer
+ for (var i = 0; i <= $nodes.length - 1; i++) {
+ var elementObserver = new MutationObserver(listeningElementsMutation);
+ elementObserver.observe($nodes[i], { attributes: true, childList: true, characterData: false, subtree: true, attributeFilter: ["data-events", "style"] });
}
- else {
- $(this).trigger('close.zf.trigger');
- }
- });
+ }
+ };
- // Elements with [data-toggle] will toggle a plugin that supports it when clicked.
- $(document).on('click.zf.trigger', '[data-toggle]', function() {
- var id = $(this).data('toggle');
- $('#' + id).triggerHandler('toggle.zf.trigger', [$(this)]);
- });
+ Triggers.Initializers.addSimpleListeners = function () {
+ var $document = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(document);
+
+ Triggers.Initializers.addOpenListener($document);
+ Triggers.Initializers.addCloseListener($document);
+ Triggers.Initializers.addToggleListener($document);
+ Triggers.Initializers.addCloseableListener($document);
+ Triggers.Initializers.addToggleFocusListener($document);
+ };
+
+ Triggers.Initializers.addGlobalListeners = function () {
+ var $document = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(document);
+ Triggers.Initializers.addMutationEventsListener($document);
+ Triggers.Initializers.addResizeListener();
+ Triggers.Initializers.addScrollListener();
+ Triggers.Initializers.addClosemeListener();
+ };
+
+ Triggers.init = function ($, Foundation) {
+ if (typeof $.triggersInitialized === 'undefined') {
+ var $document = $(document);
- // Elements with [data-closable] will respond to close.zf.trigger events.
- $(document).on('close.zf.trigger', '[data-closable]', function() {
- var animation = $(this).data('closable') || 'fade-out';
- if(Foundation.Motion){
- Foundation.Motion.animateOut($(this), animation, function() {
- $(this).trigger('closed.zf');
+ if (document.readyState === "complete") {
+ Triggers.Initializers.addSimpleListeners();
+ Triggers.Initializers.addGlobalListeners();
+ } else {
+ $(window).on('load', function () {
+ Triggers.Initializers.addSimpleListeners();
+ Triggers.Initializers.addGlobalListeners();
});
- }else{
- $(this).fadeOut().trigger('closed.zf');
}
- });
- var MutationObserver = (function () {
- var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
- for (var i=0; i < prefixes.length; i++) {
- if (prefixes[i] + 'MutationObserver' in window) {
- return window[prefixes[i] + 'MutationObserver'];
- }
- }
- return false;
- }());
+ $.triggersInitialized = true;
+ }
+ if (Foundation) {
+ Foundation.Triggers = Triggers;
+ // Legacy included to be backwards compatible for now.
+ Foundation.IHearYou = Triggers.Initializers.addGlobalListeners;
+ }
+ };
- var checkListeners = function(){
- eventsListener();
- resizeListener();
- scrollListener();
- closemeListener();
- };
- /**
- * Fires once after all other scripts have loaded
- * @function
- * @private
- */
- $(window).load(function(){
- checkListeners();
- });
- //******** only fires this function once on load, if there's something to watch ********
- var closemeListener = function(pluginName){
- var yetiBoxes = $('[data-yeti-box]'),
- plugNames = ['dropdown', 'tooltip', 'reveal'];
- if(pluginName){
- if(typeof pluginName === 'string'){
- plugNames.push(pluginName);
- }else if(typeof pluginName === 'object' && typeof pluginName[0] === 'string'){
- plugNames.concat(pluginName);
- }else{
- console.error('Plugin names must be strings');
- }
- }
- if(yetiBoxes.length){
- var listeners = plugNames.map(function(name){
- return 'closeme.zf.' + name;
- }).join(' ');
+ /***/ }),
+ /* 6 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- $(window).off(listeners).on(listeners, function(e, pluginId){
- var plugin = e.namespace.split('.')[0];
- var plugins = $('[data-' + plugin + ']').not('[data-yeti-box="' + pluginId + '"]');
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return Move; });
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Motion; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_core__ = __webpack_require__(1);
- plugins.each(function(){
- var _this = $(this);
- _this.triggerHandler('close.zf.trigger', [_this]);
- });
- });
- }
- };
- var resizeListener = function(debounce){
- var timer,
- $nodes = $('[data-resize]');
- if($nodes.length){
- $(window).off('resize.zf.trigger')
- .on('resize.zf.trigger', function(e) {
- if (timer) { clearTimeout(timer); }
-
- timer = setTimeout(function(){
-
- if(!MutationObserver){//fallback for IE 9
- $nodes.each(function(){
- $(this).triggerHandler('resizeme.zf.trigger');
- });
- }
- //trigger all listening elements and signal a resize event
- $nodes.attr('data-events', "resize");
- }, debounce || 10);//default time to emit resize event
- });
- }
- };
- var scrollListener = function(debounce){
- var timer,
- $nodes = $('[data-scroll]');
- if($nodes.length){
- $(window).off('scroll.zf.trigger')
- .on('scroll.zf.trigger', function(e){
- if(timer){ clearTimeout(timer); }
-
- timer = setTimeout(function(){
-
- if(!MutationObserver){//fallback for IE 9
- $nodes.each(function(){
- $(this).triggerHandler('scrollme.zf.trigger');
- });
- }
- //trigger all listening elements and signal a scroll event
- $nodes.attr('data-events', "scroll");
- }, debounce || 10);//default time to emit scroll event
- });
- }
- };
- // function domMutationObserver(debounce) {
- // // !!! This is coming soon and needs more work; not active !!! //
- // var timer,
- // nodes = document.querySelectorAll('[data-mutate]');
- // //
- // if (nodes.length) {
- // // var MutationObserver = (function () {
- // // var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
- // // for (var i=0; i < prefixes.length; i++) {
- // // if (prefixes[i] + 'MutationObserver' in window) {
- // // return window[prefixes[i] + 'MutationObserver'];
- // // }
- // // }
- // // return false;
- // // }());
- //
- //
- // //for the body, we need to listen for all changes effecting the style and class attributes
- // var bodyObserver = new MutationObserver(bodyMutation);
- // bodyObserver.observe(document.body, { attributes: true, childList: true, characterData: false, subtree:true, attributeFilter:["style", "class"]});
- //
- //
- // //body callback
- // function bodyMutation(mutate) {
- // //trigger all listening elements and signal a mutation event
- // if (timer) { clearTimeout(timer); }
- //
- // timer = setTimeout(function() {
- // bodyObserver.disconnect();
- // $('[data-mutate]').attr('data-events',"mutate");
- // }, debounce || 150);
- // }
- // }
- // }
- var eventsListener = function() {
- if(!MutationObserver){ return false; }
- var nodes = document.querySelectorAll('[data-resize], [data-scroll], [data-mutate]');
-
- //element callback
- var listeningElementsMutation = function(mutationRecordsList) {
- var $target = $(mutationRecordsList[0].target);
- //trigger the event handler for the element depending on type
- switch ($target.attr("data-events")) {
-
- case "resize" :
- $target.triggerHandler('resizeme.zf.trigger', [$target]);
- break;
- case "scroll" :
- $target.triggerHandler('scrollme.zf.trigger', [$target, window.pageYOffset]);
- break;
- // case "mutate" :
- // console.log('mutate', $target);
- // $target.triggerHandler('mutate.zf.trigger');
- //
- // //make sure we don't get stuck in an infinite loop from sloppy codeing
- // if ($target.index('[data-mutate]') == $("[data-mutate]").length-1) {
- // domMutationObserver();
- // }
- // break;
- default :
- return false;
- //nothing
- }
- }
+ /**
+ * Motion module.
+ * @module foundation.motion
+ */
- if(nodes.length){
- //for each element that needs to listen for resizing, scrolling, (or coming soon mutation) add a single observer
- for (var i = 0; i <= nodes.length-1; i++) {
- var elementObserver = new MutationObserver(listeningElementsMutation);
- elementObserver.observe(nodes[i], { attributes: true, childList: false, characterData: false, subtree:false, attributeFilter:["data-events"]});
- }
+ var initClasses = ['mui-enter', 'mui-leave'];
+ var activeClasses = ['mui-enter-active', 'mui-leave-active'];
+
+ var Motion = {
+ animateIn: function (element, animation, cb) {
+ animate(true, element, animation, cb);
+ },
+
+ animateOut: function (element, animation, cb) {
+ animate(false, element, animation, cb);
+ }
+ };
+
+ function Move(duration, elem, fn) {
+ var anim,
+ prog,
+ start = null;
+ // console.log('called');
+
+ if (duration === 0) {
+ fn.apply(elem);
+ elem.trigger('finished.zf.animate', [elem]).triggerHandler('finished.zf.animate', [elem]);
+ return;
+ }
+
+ function move(ts) {
+ if (!start) start = ts;
+ // console.log(start, ts);
+ prog = ts - start;
+ fn.apply(elem);
+
+ if (prog < duration) {
+ anim = window.requestAnimationFrame(move, elem);
+ } else {
+ window.cancelAnimationFrame(anim);
+ elem.trigger('finished.zf.animate', [elem]).triggerHandler('finished.zf.animate', [elem]);
}
- };
- // ------------------------------------
+ }
+ anim = window.requestAnimationFrame(move);
+ }
+
+ /**
+ * Animates an element in or out using a CSS transition class.
+ * @function
+ * @private
+ * @param {Boolean} isIn - Defines if the animation is in or out.
+ * @param {Object} element - jQuery or HTML object to animate.
+ * @param {String} animation - CSS class to use.
+ * @param {Function} cb - Callback to run when animation is finished.
+ */
+ function animate(isIn, element, animation, cb) {
+ element = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(element).eq(0);
- // [PH]
- // Foundation.CheckWatchers = checkWatchers;
- Foundation.IHearYou = checkListeners;
- // Foundation.ISeeYou = scrollListener;
- // Foundation.IFeelYou = closemeListener;
+ if (!element.length) return;
- }(window.Foundation, window.jQuery);
+ var initClass = isIn ? initClasses[0] : initClasses[1];
+ var activeClass = isIn ? activeClasses[0] : activeClasses[1];
- !function(Foundation, $) {
- 'use strict';
+ // Set up the animation
+ reset();
- /**
- * Creates a new instance of Abide.
- * @class
- * @fires Abide#init
- * @param {Object} element - jQuery object to add the trigger to.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function Abide(element, options) {
- this.$element = element;
- this.options = $.extend({}, Abide.defaults, this.$element.data(), options);
- this.$window = $(window);
- this.name = 'Abide';
- this.attr = 'data-abide';
+ element.addClass(animation).css('transition', 'none');
- this._init();
- this._events();
+ requestAnimationFrame(function () {
+ element.addClass(initClass);
+ if (isIn) element.show();
+ });
- Foundation.registerPlugin(this);
+ // Start the animation
+ requestAnimationFrame(function () {
+ element[0].offsetWidth;
+ element.css('transition', '').addClass(activeClass);
+ });
+
+ // Clean up the animation when it finishes
+ element.one(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__foundation_util_core__["c" /* transitionend */])(element), finish);
+
+ // Hides the element (for out animations), resets the element, and runs a callback
+ function finish() {
+ if (!isIn) element.hide();
+ reset();
+ if (cb) cb.apply(element);
}
- /**
- * Default settings for plugin
- */
- Abide.defaults = {
- validateOn: 'fieldChange', // options: fieldChange, manual, submit
- labelErrorClass: 'is-invalid-label',
- inputErrorClass: 'is-invalid-input',
- formErrorSelector: '.form-error',
- formErrorClass: 'is-visible',
- patterns: {
- alpha : /^[a-zA-Z]+$/,
- alpha_numeric : /^[a-zA-Z0-9]+$/,
- integer : /^[-+]?\d+$/,
- number : /^[-+]?\d*(?:[\.\,]\d+)?$/,
-
- // amex, visa, diners
- card : /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,
- cvv : /^([0-9]){3,4}$/,
-
- // http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
- email : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,
-
- url : /^(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,
- // abc.de
- domain : /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,
-
- datetime : /^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,
- // YYYY-MM-DD
- date : /(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,
- // HH:MM:SS
- time : /^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,
- dateISO : /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,
- // MM/DD/YYYY
- month_day_year : /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,
- // DD/MM/YYYY
- day_month_year : /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,
-
- // #FFF or #FFFFFF
- color : /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
- },
- validators: {
- equalTo: function (el, required, parent) {
- var from = document.getElementById(el.getAttribute(this.add_namespace('data-equalto'))).value,
- to = el.value,
- valid = (from === to);
+ // Resets transitions and removes motion-specific classes
+ function reset() {
+ element[0].style.transitionDuration = 0;
+ element.removeClass(initClass + ' ' + activeClass + ' ' + animation);
+ }
+ }
- return valid;
- }
- }
- };
- /**
- * Initializes the Abide plugin and calls functions to get Abide functioning on load.
- * @private
- */
- Abide.prototype._init = function() {
- };
+ /***/ }),
+ /* 7 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Box; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__foundation_util_core__ = __webpack_require__(1);
+
+
+
+
+ var Box = {
+ ImNotTouchingYou: ImNotTouchingYou,
+ OverlapArea: OverlapArea,
+ GetDimensions: GetDimensions,
+ GetOffsets: GetOffsets,
+ GetExplicitOffsets: GetExplicitOffsets
/**
- * Initializes events for Abide.
- * @private
+ * Compares the dimensions of an element to a container and determines collision events with container.
+ * @function
+ * @param {jQuery} element - jQuery object to test for collisions.
+ * @param {jQuery} parent - jQuery object to use as bounding container.
+ * @param {Boolean} lrOnly - set to true to check left and right values only.
+ * @param {Boolean} tbOnly - set to true to check top and bottom values only.
+ * @default if no parent object passed, detects collisions with `window`.
+ * @returns {Boolean} - true if collision free, false if a collision in any direction.
*/
- Abide.prototype._events = function() {
- var self = this;
- this.$element
- .off('.abide')
- .on('reset.fndtn.abide', function(e) {
- self.resetForm($(this));
- })
- .on('submit.fndtn.abide', function(e) {
- e.preventDefault();
- self.validateForm(self.$element);
- })
- .find('input, textarea, select')
- .off('.abide')
- .on('blur.fndtn.abide change.fndtn.abide', function (e) {
- if (self.options.validateOn === 'fieldChange') {
- self.validateInput($(e.target), self.$element);
- }
- // self.validateForm(self.$element);
- })
- .on('keydown.fndtn.abide', function (e) {
- // if (settings.live_validate === true && e.which != 9) {
- // clearTimeout(self.timer);
- // self.timer = setTimeout(function () {
- // self.validate([this], e);
- // }.bind(this), settings.timeout);
- // }
- // self.validateForm(self.$element);
- });
+ };function ImNotTouchingYou(element, parent, lrOnly, tbOnly, ignoreBottom) {
+ return OverlapArea(element, parent, lrOnly, tbOnly, ignoreBottom) === 0;
+ };
- },
- /**
- * Calls necessary functions to update Abide upon DOM change
- * @private
- */
- Abide.prototype._reflow = function() {
- var self = this;
- };
- /**
- * Checks whether or not a form element has the required attribute and if it's checked or not
- * @param {Object} element - jQuery object to check for required attribute
- * @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
- */
- Abide.prototype.requiredCheck = function($el) {
- switch ($el[0].type) {
- case 'text':
- if ($el.attr('required') && !$el.val()) {
- // requirement check does not pass
- return false;
- } else {
- return true;
- }
- break;
- case 'checkbox':
- if ($el.attr('required') && !$el.is(':checked')) {
- return false;
- } else {
- return true;
- }
- break;
- case 'radio':
- if ($el.attr('required') && !$el.is(':checked')) {
- return false;
- } else {
- return true;
- }
- break;
- default:
- if ($el.attr('required') && (!$el.val() || !$el.val().length || $el.is(':empty'))) {
- return false;
- } else {
- return true;
- }
- }
- };
- /**
- * Checks whether or not a form element has the required attribute and if it's checked or not
- * @param {Object} element - jQuery object to check for required attribute
- * @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
- */
- Abide.prototype.findLabel = function($el) {
- if ($el.next('label').length) {
- return $el.next('label');
- }
- else {
- return $el.closest('label');
- }
- };
- /**
- * Adds the CSS error class as specified by the Abide settings to the label, input, and the form
- * @param {Object} element - jQuery object to add the class to
- */
- Abide.prototype.addErrorClasses = function($el) {
- var self = this,
- $label = self.findLabel($el),
- $formError = $el.next(self.options.formErrorSelector) || $el.find(self.options.formErrorSelector);
+ function OverlapArea(element, parent, lrOnly, tbOnly, ignoreBottom) {
+ var eleDims = GetDimensions(element),
+ topOver,
+ bottomOver,
+ leftOver,
+ rightOver;
+ if (parent) {
+ var parDims = GetDimensions(parent);
+
+ bottomOver = parDims.height + parDims.offset.top - (eleDims.offset.top + eleDims.height);
+ topOver = eleDims.offset.top - parDims.offset.top;
+ leftOver = eleDims.offset.left - parDims.offset.left;
+ rightOver = parDims.width + parDims.offset.left - (eleDims.offset.left + eleDims.width);
+ } else {
+ bottomOver = eleDims.windowDims.height + eleDims.windowDims.offset.top - (eleDims.offset.top + eleDims.height);
+ topOver = eleDims.offset.top - eleDims.windowDims.offset.top;
+ leftOver = eleDims.offset.left - eleDims.windowDims.offset.left;
+ rightOver = eleDims.windowDims.width - (eleDims.offset.left + eleDims.width);
+ }
- // label
- if ($label) {
- $label.addClass(self.options.labelErrorClass);
- }
- // form error
- if ($formError) {
- $formError.addClass(self.options.formErrorClass);
- }
- // input
- $el.addClass(self.options.inputErrorClass);
- };
- /**
- * Removes CSS error class as specified by the Abide settings from the label, input, and the form
- * @param {Object} element - jQuery object to remove the class from
- */
- Abide.prototype.removeErrorClasses = function($el) {
- var self = this,
- $label = self.findLabel($el),
- $formError = $el.next(self.options.formErrorSelector) || $el.find(self.options.formErrorSelector);
- // label
- if ($label && $label.hasClass(self.options.labelErrorClass)) {
- $label.removeClass(self.options.labelErrorClass);
- }
- // form error
- if ($formError && $formError.hasClass(self.options.formErrorClass)) {
- $formError.removeClass(self.options.formErrorClass);
- }
- // input
- if ($el.hasClass(self.options.inputErrorClass)) {
- $el.removeClass(self.options.inputErrorClass);
- }
- };
- /**
- * Goes through a form to find inputs and proceeds to validate them in ways specific to their type
- * @fires Abide#invalid
- * @fires Abide#valid
- * @param {Object} element - jQuery object to validate, should be an HTML input
- * @param {Object} form - jQuery object of the entire form to find the various input elements
- */
- Abide.prototype.validateInput = function($el, $form) {
- var self = this,
- textInput = $form.find('input[type="text"]'),
- checkInput = $form.find('input[type="checkbox"]'),
- label,
- radioGroupName;
+ bottomOver = ignoreBottom ? 0 : Math.min(bottomOver, 0);
+ topOver = Math.min(topOver, 0);
+ leftOver = Math.min(leftOver, 0);
+ rightOver = Math.min(rightOver, 0);
- if ($el[0].type === 'text') {
- if (!self.requiredCheck($el) || !self.validateText($el)) {
- self.addErrorClasses($el);
- $el.trigger('invalid.fndtn.abide', $el[0]);
- }
- else {
- self.removeErrorClasses($el);
- $el.trigger('valid.fndtn.abide', $el[0]);
- }
- }
- else if ($el[0].type === 'radio') {
- radioGroupName = $el.attr('name');
- label = $el.siblings('label');
+ if (lrOnly) {
+ return leftOver + rightOver;
+ }
+ if (tbOnly) {
+ return topOver + bottomOver;
+ }
- if (self.validateRadio(radioGroupName)) {
- $(label).each(function() {
- if ($(this).hasClass(self.options.labelErrorClass)) {
- $(this).removeClass(self.options.labelErrorClass);
- }
- });
- $el.trigger('valid.fndtn.abide', $el[0]);
- }
- else {
- $(label).each(function() {
- $(this).addClass(self.options.labelErrorClass);
- });
- $el.trigger('invalid.fndtn.abide', $el[0]);
- };
- }
- else if ($el[0].type === 'checkbox') {
- if (!self.requiredCheck($el)) {
- self.addErrorClasses($el);
- $el.trigger('invalid.fndtn.abide', $el[0]);
- }
- else {
- self.removeErrorClasses($el);
- $el.trigger('valid.fndtn.abide', $el[0]);
- }
- }
- else {
- if (!self.requiredCheck($el) || !self.validateText($el)) {
- self.addErrorClasses($el);
- $el.trigger('invalid.fndtn.abide', $el[0]);
- }
- else {
- self.removeErrorClasses($el);
- $el.trigger('valid.fndtn.abide', $el[0]);
- }
- }
- };
- /**
- * Goes through a form and if there are any invalid inputs, it will display the form error element
- * @param {Object} element - jQuery object to validate, should be a form HTML element
- */
- Abide.prototype.validateForm = function($form) {
- var self = this,
- inputs = $form.find('input'),
- inputCount = $form.find('input').length,
- counter = 0;
+ // use sum of squares b/c we care about overlap area.
+ return Math.sqrt(topOver * topOver + bottomOver * bottomOver + leftOver * leftOver + rightOver * rightOver);
+ }
- while (counter < inputCount) {
- self.validateInput($(inputs[counter]), $form);
- counter++;
- }
+ /**
+ * Uses native methods to return an object of dimension values.
+ * @function
+ * @param {jQuery || HTML} element - jQuery object or DOM element for which to get the dimensions. Can be any element other that document or window.
+ * @returns {Object} - nested object of integer pixel values
+ * TODO - if element is window, return only those values.
+ */
+ function GetDimensions(elem) {
+ elem = elem.length ? elem[0] : elem;
- // what are all the things that can go wrong with a form?
- if ($form.find('.form-error.is-visible').length || $form.find('.is-invalid-label').length) {
- $form.find('[data-abide-error]').css('display', 'block');
- }
- else {
- $form.find('[data-abide-error]').css('display', 'none');
- }
- };
- /**
- * Determines whether or a not a text input is valid based on the patterns specified in the attribute
- * @param {Object} element - jQuery object to validate, should be a text input HTML element
- * @returns {Boolean} Boolean value depends on whether or not the input value matches the pattern specified
- */
- Abide.prototype.validateText = function($el) {
- var self = this,
- valid = false,
- patternLib = this.options.patterns,
- inputText = $($el).val(),
- // maybe have a different way of parsing this bc people might use type
- pattern = $($el).attr('pattern');
-
- // if there's no value, then return true
- // since required check has already been done
- if (inputText.length === 0) {
- return true;
- }
- else {
- if (inputText.match(patternLib[pattern])) {
- return true;
+ if (elem === window || elem === document) {
+ throw new Error("I'm sorry, Dave. I'm afraid I can't do that.");
+ }
+
+ var rect = elem.getBoundingClientRect(),
+ parRect = elem.parentNode.getBoundingClientRect(),
+ winRect = document.body.getBoundingClientRect(),
+ winY = window.pageYOffset,
+ winX = window.pageXOffset;
+
+ return {
+ width: rect.width,
+ height: rect.height,
+ offset: {
+ top: rect.top + winY,
+ left: rect.left + winX
+ },
+ parentDims: {
+ width: parRect.width,
+ height: parRect.height,
+ offset: {
+ top: parRect.top + winY,
+ left: parRect.left + winX
}
- else {
- return false;
+ },
+ windowDims: {
+ width: winRect.width,
+ height: winRect.height,
+ offset: {
+ top: winY,
+ left: winX
}
}
};
- /**
- * Determines whether or a not a radio input is valid based on whether or not it is required and selected
- * @param {String} group - A string that specifies the name of a radio button group
- * @returns {Boolean} Boolean value depends on whether or not at least one radio input has been selected (if it's required)
- */
- Abide.prototype.validateRadio = function(group) {
- var self = this,
- labels = $(':radio[name="' + group + '"]').siblings('label'),
- counter = 0;
- // go through each radio button
- $(':radio[name="' + group + '"]').each(function() {
- // put them through the required checkpoint
- if (!self.requiredCheck($(this))) {
- // if at least one doesn't pass, add a tally to the counter
- counter++;
+ }
+
+ /**
+ * Returns an object of top and left integer pixel values for dynamically rendered elements,
+ * such as: Tooltip, Reveal, and Dropdown. Maintained for backwards compatibility, and where
+ * you don't know alignment, but generally from
+ * 6.4 forward you should use GetExplicitOffsets, as GetOffsets conflates position and alignment.
+ * @function
+ * @param {jQuery} element - jQuery object for the element being positioned.
+ * @param {jQuery} anchor - jQuery object for the element's anchor point.
+ * @param {String} position - a string relating to the desired position of the element, relative to it's anchor
+ * @param {Number} vOffset - integer pixel value of desired vertical separation between anchor and element.
+ * @param {Number} hOffset - integer pixel value of desired horizontal separation between anchor and element.
+ * @param {Boolean} isOverflow - if a collision event is detected, sets to true to default the element to full width - any desired offset.
+ * TODO alter/rewrite to work with `em` values as well/instead of pixels
+ */
+ function GetOffsets(element, anchor, position, vOffset, hOffset, isOverflow) {
+ console.log("NOTE: GetOffsets is deprecated in favor of GetExplicitOffsets and will be removed in 6.5");
+ switch (position) {
+ case 'top':
+ return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__foundation_util_core__["a" /* rtl */])() ? GetExplicitOffsets(element, anchor, 'top', 'left', vOffset, hOffset, isOverflow) : GetExplicitOffsets(element, anchor, 'top', 'right', vOffset, hOffset, isOverflow);
+ case 'bottom':
+ return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__foundation_util_core__["a" /* rtl */])() ? GetExplicitOffsets(element, anchor, 'bottom', 'left', vOffset, hOffset, isOverflow) : GetExplicitOffsets(element, anchor, 'bottom', 'right', vOffset, hOffset, isOverflow);
+ case 'center top':
+ return GetExplicitOffsets(element, anchor, 'top', 'center', vOffset, hOffset, isOverflow);
+ case 'center bottom':
+ return GetExplicitOffsets(element, anchor, 'bottom', 'center', vOffset, hOffset, isOverflow);
+ case 'center left':
+ return GetExplicitOffsets(element, anchor, 'left', 'center', vOffset, hOffset, isOverflow);
+ case 'center right':
+ return GetExplicitOffsets(element, anchor, 'right', 'center', vOffset, hOffset, isOverflow);
+ case 'left bottom':
+ return GetExplicitOffsets(element, anchor, 'bottom', 'left', vOffset, hOffset, isOverflow);
+ case 'right bottom':
+ return GetExplicitOffsets(element, anchor, 'bottom', 'right', vOffset, hOffset, isOverflow);
+ // Backwards compatibility... this along with the reveal and reveal full
+ // classes are the only ones that didn't reference anchor
+ case 'center':
+ return {
+ left: $eleDims.windowDims.offset.left + $eleDims.windowDims.width / 2 - $eleDims.width / 2 + hOffset,
+ top: $eleDims.windowDims.offset.top + $eleDims.windowDims.height / 2 - ($eleDims.height / 2 + vOffset)
+ };
+ case 'reveal':
+ return {
+ left: ($eleDims.windowDims.width - $eleDims.width) / 2 + hOffset,
+ top: $eleDims.windowDims.offset.top + vOffset
+ };
+ case 'reveal full':
+ return {
+ left: $eleDims.windowDims.offset.left,
+ top: $eleDims.windowDims.offset.top
+ };
+ break;
+ default:
+ return {
+ left: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__foundation_util_core__["a" /* rtl */])() ? $anchorDims.offset.left - $eleDims.width + $anchorDims.width - hOffset : $anchorDims.offset.left + hOffset,
+ top: $anchorDims.offset.top + $anchorDims.height + vOffset
+ };
+
+ }
+ }
+
+ function GetExplicitOffsets(element, anchor, position, alignment, vOffset, hOffset, isOverflow) {
+ var $eleDims = GetDimensions(element),
+ $anchorDims = anchor ? GetDimensions(anchor) : null;
+
+ var topVal, leftVal;
+
+ // set position related attribute
+
+ switch (position) {
+ case 'top':
+ topVal = $anchorDims.offset.top - ($eleDims.height + vOffset);
+ break;
+ case 'bottom':
+ topVal = $anchorDims.offset.top + $anchorDims.height + vOffset;
+ break;
+ case 'left':
+ leftVal = $anchorDims.offset.left - ($eleDims.width + hOffset);
+ break;
+ case 'right':
+ leftVal = $anchorDims.offset.left + $anchorDims.width + hOffset;
+ break;
+ }
+
+ // set alignment related attribute
+ switch (position) {
+ case 'top':
+ case 'bottom':
+ switch (alignment) {
+ case 'left':
+ leftVal = $anchorDims.offset.left + hOffset;
+ break;
+ case 'right':
+ leftVal = $anchorDims.offset.left - $eleDims.width + $anchorDims.width - hOffset;
+ break;
+ case 'center':
+ leftVal = isOverflow ? hOffset : $anchorDims.offset.left + $anchorDims.width / 2 - $eleDims.width / 2 + hOffset;
+ break;
}
- // if at least one is checked
- // reset the counter
- if ($(this).is(':checked')) {
- counter = 0;
+ break;
+ case 'right':
+ case 'left':
+ switch (alignment) {
+ case 'bottom':
+ topVal = $anchorDims.offset.top - vOffset + $anchorDims.height - $eleDims.height;
+ break;
+ case 'top':
+ topVal = $anchorDims.offset.top + vOffset;
+ break;
+ case 'center':
+ topVal = $anchorDims.offset.top + vOffset + $anchorDims.height / 2 - $eleDims.height / 2;
+ break;
}
- });
+ break;
+ }
+ return { top: topVal, left: leftVal };
+ }
- if (counter > 0) {
- return false;
- }
- else {
- return true;
- }
- };
- Abide.prototype.matchValidation = function(val, validation) {
- };
- /**
- * Resets form inputs and styles
- * @param {Object} $form - A jQuery object that should be an HTML form element
- */
- Abide.prototype.resetForm = function($form) {
- var self = this;
- var invalidAttr = 'data-invalid';
- // remove data attributes
- $('[' + self.invalidAttr + ']', $form).removeAttr(invalidAttr);
- // remove styles
- $('.' + self.options.labelErrorClass, $form).not('small').removeClass(self.options.labelErrorClass);
- $('.' + self.options.inputErrorClass, $form).not('small').removeClass(self.options.inputErrorClass);
- $('.form-error.is-visible').removeClass('is-visible');
- $form.find('[data-abide-error]').css('display', 'none');
- $(':input', $form).not(':button, :submit, :reset, :hidden, [data-abide-ignore]').val('').removeAttr(invalidAttr);
- };
- Abide.prototype.destroy = function(){
- //TODO this...
- };
- Foundation.plugin(Abide, 'Abide');
+ /***/ }),
+ /* 8 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return onImagesLoaded; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+
- // Exports for AMD/Browserify
- if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
- module.exports = Abide;
- if (typeof define === 'function')
- define(['foundation'], function() {
- return Abide;
- });
- }(Foundation, jQuery);
/**
- * Accordion module.
- * @module foundation.accordion
- * @requires foundation.util.keyboard
- * @requires foundation.util.motion
+ * Runs a callback function when images are fully loaded.
+ * @param {Object} images - Image(s) to check if loaded.
+ * @param {Func} callback - Function to execute when image is fully loaded.
*/
- !function($, Foundation) {
- 'use strict';
+ function onImagesLoaded(images, callback) {
+ var self = this,
+ unloaded = images.length;
- /**
- * Creates a new instance of an accordion.
- * @class
- * @fires Accordion#init
- * @param {jQuery} element - jQuery object to make into an accordion.
- */
- function Accordion(element, options){
- this.$element = element;
- this.options = $.extend({}, Accordion.defaults, this.$element.data(), options);
+ if (unloaded === 0) {
+ callback();
+ }
- this._init();
+ images.each(function () {
+ // Check if image is loaded
+ if (this.complete && this.naturalWidth !== undefined) {
+ singleImageLoaded();
+ } else {
+ // If the above check failed, simulate loading on detached element.
+ var image = new Image();
+ // Still count image as loaded if it finalizes with an error.
+ var events = "load.zf.images error.zf.images";
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(image).one(events, function me(event) {
+ // Unbind the event listeners. We're using 'one' but only one of the two events will have fired.
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).off(events, me);
+ singleImageLoaded();
+ });
+ image.src = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).attr('src');
+ }
+ });
- Foundation.registerPlugin(this);
- Foundation.Keyboard.register('Accordion', {
- 'ENTER': 'toggle',
- 'SPACE': 'toggle',
- 'ARROW_DOWN': 'next',
- 'ARROW_UP': 'previous'
- });
+ function singleImageLoaded() {
+ unloaded--;
+ if (unloaded === 0) {
+ callback();
+ }
}
+ }
- Accordion.defaults = {
- /**
- * Amount of time to animate the opening of an accordion pane.
- * @option
- * @example 250
- */
- slideSpeed: 250,
- /**
- * Allow the accordion to have multiple open panes.
- * @option
- * @example false
- */
- multiExpand: false,
- /**
- * Allow the accordion to close all panes.
- * @option
- * @example false
- */
- allowAllClosed: false
- };
- /**
- * Initializes the accordion by animating the preset active pane(s).
- * @private
- */
- Accordion.prototype._init = function() {
- this.$element.attr('role', 'tablist');
- this.$tabs = this.$element.children('li');
- this.$tabs.each(function(idx, el){
- var $el = $(el),
- $content = $el.find('[data-tab-content]'),
- id = $content[0].id || Foundation.GetYoDigits(6, 'accordion'),
- linkId = el.id || id + '-label';
+ /***/ }),
+ /* 9 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- $el.find('a:first').attr({
- 'aria-controls': id,
- 'role': 'tab',
- 'id': linkId,
- 'aria-expanded': false,
- 'aria-selected': false
- });
- $content.attr({'role': 'tabpanel', 'aria-labelledby': linkId, 'aria-hidden': true, 'id': id});
- });
- var $initActive = this.$element.find('.is-active').children('[data-tab-content]');
- if($initActive.length){
- this.down($initActive, true);
- }
- this._events();
- };
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Nest; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
- /**
- * Adds event handlers for items within the accordion.
- * @private
- */
- Accordion.prototype._events = function() {
- var _this = this;
- this.$tabs.each(function(){
- var $elem = $(this);
- var $tabContent = $elem.children('[data-tab-content]');
- if ($tabContent.length) {
- $elem.children('a').off('click.zf.accordion keydown.zf.accordion')
- .on('click.zf.accordion', function(e){
- // $(this).children('a').on('click.zf.accordion', function(e) {
- e.preventDefault();
- if ($elem.hasClass('is-active')) {
- if(_this.options.allowAllClosed || $elem.siblings().hasClass('is-active')){
- _this.up($tabContent);
- }
- }
- else {
- _this.down($tabContent);
- }
- }).on('keydown.zf.accordion', function(e){
- Foundation.Keyboard.handleKey(e, _this, {
- toggle: function() {
- _this.toggle($tabContent);
- },
- next: function() {
- $elem.next().find('a').focus().trigger('click.zf.accordion');
- },
- previous: function() {
- $elem.prev().find('a').focus().trigger('click.zf.accordion');
- },
- handled: function() {
- e.preventDefault();
- e.stopPropagation();
- }
+
+
+ var Nest = {
+ Feather: function (menu) {
+ var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'zf';
+
+ menu.attr('role', 'menubar');
+
+ var items = menu.find('li').attr({ 'role': 'menuitem' }),
+ subMenuClass = 'is-' + type + '-submenu',
+ subItemClass = subMenuClass + '-item',
+ hasSubClass = 'is-' + type + '-submenu-parent',
+ applyAria = type !== 'accordion'; // Accordions handle their own ARIA attriutes.
+
+ items.each(function () {
+ var $item = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ $sub = $item.children('ul');
+
+ if ($sub.length) {
+ $item.addClass(hasSubClass);
+ $sub.addClass('submenu ' + subMenuClass).attr({ 'data-submenu': '' });
+ if (applyAria) {
+ $item.attr({
+ 'aria-haspopup': true,
+ 'aria-label': $item.children('a:first').text()
});
+ // Note: Drilldowns behave differently in how they hide, and so need
+ // additional attributes. We should look if this possibly over-generalized
+ // utility (Nest) is appropriate when we rework menus in 6.4
+ if (type === 'drilldown') {
+ $item.attr({ 'aria-expanded': false });
+ }
+ }
+ $sub.addClass('submenu ' + subMenuClass).attr({
+ 'data-submenu': '',
+ 'role': 'menu'
});
+ if (type === 'drilldown') {
+ $sub.attr({ 'aria-hidden': true });
+ }
}
- });
- };
- /**
- * Toggles the selected content pane's open/close state.
- * @param {jQuery} $target - jQuery object of the pane to toggle.
- * @function
- */
- Accordion.prototype.toggle = function($target){
- if($target.parent().hasClass('is-active')){
- if(this.options.allowAllClosed || $target.parent().siblings().hasClass('is-active')){
- this.up($target);
- }else{ return; }
- }else{
- this.down($target);
- }
- };
- /**
- * Opens the accordion tab defined by `$target`.
- * @param {jQuery} $target - Accordion pane to open.
- * @param {Boolean} firstTime - flag to determine if reflow should happen.
- * @fires Accordion#down
- * @function
- */
- Accordion.prototype.down = function($target, firstTime) {
- var _this = this;
- if(!this.options.multiExpand && !firstTime){
- var $currentActive = this.$element.find('.is-active').children('[data-tab-content]');
- if($currentActive.length){
- this.up($currentActive);
- }
- }
- $target
- .attr('aria-hidden', false)
- .parent('[data-tab-content]')
- .addBack()
- .parent().addClass('is-active');
-
- Foundation.Move(_this.options.slideSpeed, $target, function(){
- $target.slideDown(_this.options.slideSpeed);
+ if ($item.parent('[data-submenu]').length) {
+ $item.addClass('is-submenu-item ' + subItemClass);
+ }
});
- if(!firstTime){
- Foundation._reflow(this.$element.attr('data-accordion'));
- }
- $('#' + $target.attr('aria-labelledby')).attr({
- 'aria-expanded': true,
- 'aria-selected': true
- });
- /**
- * Fires when the tab is done opening.
- * @event Accordion#down
- */
- this.$element.trigger('down.zf.accordion', [$target]);
- };
+ return;
+ },
+ Burn: function (menu, type) {
+ var //items = menu.find('li'),
+ subMenuClass = 'is-' + type + '-submenu',
+ subItemClass = subMenuClass + '-item',
+ hasSubClass = 'is-' + type + '-submenu-parent';
- /**
- * Closes the tab defined by `$target`.
- * @param {jQuery} $target - Accordion tab to close.
- * @fires Accordion#up
- * @function
- */
- Accordion.prototype.up = function($target) {
- var $aunts = $target.parent().siblings(),
- _this = this;
- var canClose = this.options.multiExpand ? $aunts.hasClass('is-active') : $target.parent().hasClass('is-active');
+ menu.find('>li, .menu, .menu > li').removeClass(subMenuClass + ' ' + subItemClass + ' ' + hasSubClass + ' is-submenu-item submenu is-active').removeAttr('data-submenu').css('display', '');
+ }
+ };
- if(!this.options.allowAllClosed && !canClose){
- return;
- }
- Foundation.Move(this.options.slideSpeed, $target, function(){
- $target.slideUp(_this.options.slideSpeed);
- });
- $target.attr('aria-hidden', true)
- .parent().removeClass('is-active');
+ /***/ }),
+ /* 10 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- $('#' + $target.attr('aria-labelledby')).attr({
- 'aria-expanded': false,
- 'aria-selected': false
- });
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Touch; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
- /**
- * Fires when the tab is done collapsing up.
- * @event Accordion#up
- */
- this.$element.trigger('up.zf.accordion', [$target]);
- };
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- /**
- * Destroys an instance of an accordion.
- * @fires Accordion#destroyed
- * @function
- */
- Accordion.prototype.destroy = function() {
- this.$element.find('[data-tab-content]').slideUp(0).css('display', '');
- this.$element.find('a').off('.zf.accordion');
+ //**************************************************
+ //**Work inspired by multiple jquery swipe plugins**
+ //**Done by Yohai Ararat ***************************
+ //**************************************************
- Foundation.unregisterPlugin(this);
- };
- Foundation.plugin(Accordion, 'Accordion');
- }(jQuery, window.Foundation);
- /**
- * AccordionMenu module.
- * @module foundation.accordionMenu
- * @requires foundation.util.keyboard
- * @requires foundation.util.motion
- * @requires foundation.util.nest
- */
- !function($) {
- 'use strict';
+ var Touch = {};
- /**
- * Creates a new instance of an accordion menu.
- * @class
- * @fires AccordionMenu#init
- * @param {jQuery} element - jQuery object to make into an accordion menu.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function AccordionMenu(element, options) {
- this.$element = element;
- this.options = $.extend({}, AccordionMenu.defaults, this.$element.data(), options);
+ var startPosX,
+ startPosY,
+ startTime,
+ elapsedTime,
+ isMoving = false;
- Foundation.Nest.Feather(this.$element, 'accordion');
+ function onTouchEnd() {
+ // alert(this);
+ this.removeEventListener('touchmove', onTouchMove);
+ this.removeEventListener('touchend', onTouchEnd);
+ isMoving = false;
+ }
- this._init();
+ function onTouchMove(e) {
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default.a.spotSwipe.preventDefault) {
+ e.preventDefault();
+ }
+ if (isMoving) {
+ var x = e.touches[0].pageX;
+ var y = e.touches[0].pageY;
+ var dx = startPosX - x;
+ var dy = startPosY - y;
+ var dir;
+ elapsedTime = new Date().getTime() - startTime;
+ if (Math.abs(dx) >= __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.spotSwipe.moveThreshold && elapsedTime <= __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.spotSwipe.timeThreshold) {
+ dir = dx > 0 ? 'left' : 'right';
+ }
+ // else if(Math.abs(dy) >= $.spotSwipe.moveThreshold && elapsedTime <= $.spotSwipe.timeThreshold) {
+ // dir = dy > 0 ? 'down' : 'up';
+ // }
+ if (dir) {
+ e.preventDefault();
+ onTouchEnd.call(this);
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).trigger('swipe', dir).trigger('swipe' + dir);
+ }
+ }
+ }
- Foundation.registerPlugin(this);
- Foundation.Keyboard.register('AccordionMenu', {
- 'ENTER': 'toggle',
- 'SPACE': 'toggle',
- 'ARROW_RIGHT': 'open',
- 'ARROW_UP': 'up',
- 'ARROW_DOWN': 'down',
- 'ARROW_LEFT': 'close',
- 'ESCAPE': 'closeAll',
- 'TAB': 'down',
- 'SHIFT_TAB': 'up'
- });
+ function onTouchStart(e) {
+ if (e.touches.length == 1) {
+ startPosX = e.touches[0].pageX;
+ startPosY = e.touches[0].pageY;
+ isMoving = true;
+ startTime = new Date().getTime();
+ this.addEventListener('touchmove', onTouchMove, false);
+ this.addEventListener('touchend', onTouchEnd, false);
}
+ }
- AccordionMenu.defaults = {
- /**
- * Amount of time to animate the opening of a submenu in ms.
- * @option
- * @example 250
- */
- slideSpeed: 250,
- /**
- * Allow the menu to have multiple open panes.
- * @option
- * @example true
- */
- multiOpen: true
- };
+ function init() {
+ this.addEventListener && this.addEventListener('touchstart', onTouchStart, false);
+ }
- /**
- * Initializes the accordion menu by hiding all nested menus.
- * @private
- */
- AccordionMenu.prototype._init = function() {
- this.$element.find('[data-submenu]').not('.is-active').slideUp(0);//.find('a').css('padding-left', '1rem');
- this.$element.attr({
- 'role': 'tablist',
- 'aria-multiselectable': this.options.multiOpen
- });
+ function teardown() {
+ this.removeEventListener('touchstart', onTouchStart);
+ }
- this.$menuLinks = this.$element.find('.has-submenu');
- this.$menuLinks.each(function(){
- var linkId = this.id || Foundation.GetYoDigits(6, 'acc-menu-link'),
- $elem = $(this),
- $sub = $elem.children('[data-submenu]'),
- subId = $sub[0].id || Foundation.GetYoDigits(6, 'acc-menu'),
- isActive = $sub.hasClass('is-active');
- $elem.attr({
- 'aria-controls': subId,
- 'aria-expanded': isActive,
- 'aria-selected': false,
- 'role': 'tab',
- 'id': linkId
- });
- $sub.attr({
- 'aria-labelledby': linkId,
- 'aria-hidden': !isActive,
- 'role': 'tabpanel',
- 'id': subId
- });
- });
- var initPanes = this.$element.find('.is-active');
- if(initPanes.length){
- var _this = this;
- initPanes.each(function(){
- _this.down($(this));
+ var SpotSwipe = function () {
+ function SpotSwipe($) {
+ _classCallCheck(this, SpotSwipe);
+
+ this.version = '1.0.0';
+ this.enabled = 'ontouchstart' in document.documentElement;
+ this.preventDefault = false;
+ this.moveThreshold = 75;
+ this.timeThreshold = 200;
+ this.$ = $;
+ this._init();
+ }
+
+ _createClass(SpotSwipe, [{
+ key: '_init',
+ value: function _init() {
+ var $ = this.$;
+ $.event.special.swipe = { setup: init };
+
+ $.each(['left', 'up', 'down', 'right'], function () {
+ $.event.special['swipe' + this] = { setup: function () {
+ $(this).on('swipe', $.noop);
+ } };
});
}
- this._events();
- };
+ }]);
- /**
- * Adds event handlers for items within the menu.
- * @private
- */
- AccordionMenu.prototype._events = function() {
- var _this = this;
+ return SpotSwipe;
+ }();
- this.$element.find('li').each(function() {
- var $submenu = $(this).children('[data-submenu]');
+ /****************************************************
+ * As far as I can tell, both setupSpotSwipe and *
+ * setupTouchHandler should be idempotent, *
+ * because they directly replace functions & *
+ * values, and do not add event handlers directly. *
+ ****************************************************/
+
+ Touch.setupSpotSwipe = function ($) {
+ $.spotSwipe = new SpotSwipe($);
+ };
- if ($submenu.length) {
- $(this).children('a').off('click.zf.accordionmenu').on('click.zf.accordionmenu', function(e) {
- e.preventDefault();
+ /****************************************************
+ * Method for adding pseudo drag events to elements *
+ ***************************************************/
+ Touch.setupTouchHandler = function ($) {
+ $.fn.addTouch = function () {
+ this.each(function (i, el) {
+ $(el).bind('touchstart touchmove touchend touchcancel', function () {
+ //we pass the original event object because the jQuery event
+ //object is normalized to w3c specs and does not provide the TouchList
+ handleTouch(event);
+ });
+ });
- _this.toggle($submenu);
+ var handleTouch = function (event) {
+ var touches = event.changedTouches,
+ first = touches[0],
+ eventTypes = {
+ touchstart: 'mousedown',
+ touchmove: 'mousemove',
+ touchend: 'mouseup'
+ },
+ type = eventTypes[event.type],
+ simulatedEvent;
+
+ if ('MouseEvent' in window && typeof window.MouseEvent === 'function') {
+ simulatedEvent = new window.MouseEvent(type, {
+ 'bubbles': true,
+ 'cancelable': true,
+ 'screenX': first.screenX,
+ 'screenY': first.screenY,
+ 'clientX': first.clientX,
+ 'clientY': first.clientY
});
+ } else {
+ simulatedEvent = document.createEvent('MouseEvent');
+ simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0 /*left*/, null);
}
- }).on('keydown.zf.accordionmenu', function(e){
- var $element = $(this),
- $elements = $element.parent('ul').children('li'),
- $prevElement,
- $nextElement,
- $target = $element.children('[data-submenu]');
+ first.target.dispatchEvent(simulatedEvent);
+ };
+ };
+ };
- $elements.each(function(i) {
- if ($(this).is($element)) {
- $prevElement = $elements.eq(Math.max(0, i-1));
- $nextElement = $elements.eq(Math.min(i+1, $elements.length-1));
+ Touch.init = function ($) {
+ if (typeof $.spotSwipe === 'undefined') {
+ Touch.setupSpotSwipe($);
+ Touch.setupTouchHandler($);
+ }
+ };
- if ($(this).children('[data-submenu]:visible').length) { // has open sub menu
- $nextElement = $element.find('li:first-child');
- }
- if ($(this).is(':first-child')) { // is first element of sub menu
- $prevElement = $element.parents('li').first();
- } else if ($prevElement.children('[data-submenu]:visible').length) { // if previous element has open sub menu
- $prevElement = $prevElement.find('li:last-child');
- }
- if ($(this).is(':last-child')) { // is last element of sub menu
- $nextElement = $element.parents('li').first().next('li');
- }
- return;
- }
- });
- Foundation.Keyboard.handleKey(e, _this, {
- open: function() {
- if ($target.is(':hidden')) {
- _this.down($target);
- $target.find('li').first().focus();
- }
- },
- close: function() {
- if ($target.length && !$target.is(':hidden')) { // close active sub of this item
- _this.up($target);
- } else if ($element.parent('[data-submenu]').length) { // close currently open sub
- _this.up($element.parent('[data-submenu]'));
- $element.parents('li').first().focus();
- }
- },
- up: function() {
- $prevElement.focus();
- },
- down: function() {
- $nextElement.focus();
- },
- toggle: function() {
- if ($element.children('[data-submenu]').length) {
- _this.toggle($element.children('[data-submenu]'));
- }
- },
- closeAll: function() {
- _this.hideAll();
- },
- handled: function() {
- e.preventDefault();
- e.stopImmediatePropagation();
- }
- });
- });//.attr('tabindex', 0);
- };
- /**
- * Closes all panes of the menu.
- * @function
- */
- AccordionMenu.prototype.hideAll = function(){
- this.$element.find('[data-submenu]').slideUp(this.options.slideSpeed);
- };
- /**
- * Toggles the open/close state of a submenu.
- * @function
- * @param {jQuery} $target - the submenu to toggle
- */
- AccordionMenu.prototype.toggle = function($target){
- if (!$target.is(':hidden')) {
- this.up($target);
- }
- else {
- this.down($target);
- }
- };
- /**
- * Opens the sub-menu defined by `$target`.
- * @param {jQuery} $target - Sub-menu to open.
- * @fires AccordionMenu#down
- */
- AccordionMenu.prototype.down = function($target) {
- var _this = this;
- console.log($target);
- if(!this.options.multiOpen){
- this.up(this.$element.find('.is-active').not($target.parentsUntil(this.$element)));
- }
- $target.addClass('is-active').attr({'aria-hidden': false})
- .parent('.has-submenu').attr({'aria-expanded': true, 'aria-selected': true});
+ /***/ }),
+ /* 11 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- Foundation.Move(this.options.slideSpeed, $target, function(){
- $target.slideDown(_this.options.slideSpeed);
- });
- /**
- * Fires when the menu is done collapsing up.
- * @event AccordionMenu#down
- */
- this.$element.trigger('down.zf.accordionMenu', [$target]);
- };
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Accordion; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__ = __webpack_require__(3);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_plugin__ = __webpack_require__(2);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
- /**
- * Closes the sub-menu defined by `$target`. All sub-menus inside the target will be closed as well.
- * @param {jQuery} $target - Sub-menu to close.
- * @fires AccordionMenu#up
- */
- AccordionMenu.prototype.up = function($target) {
- var _this = this;
- Foundation.Move(this.options.slideSpeed, $target, function(){
- $target.slideUp(_this.options.slideSpeed);
- });
- $target.attr('aria-hidden', true)
- .find('[data-submenu]').slideUp(0).attr('aria-hidden', true).end()
- .parent('.has-submenu')
- .attr({'aria-expanded': false, 'aria-selected': false});
- // $target.slideUp(this.options.slideSpeed, function() {
- // $target.find('[data-submenu]').slideUp(0).attr('aria-hidden', true);
- // }).attr('aria-hidden', true).parent('.has-submenu').attr({'aria-expanded': false, 'aria-selected': false});
- /**
- * Fires when the menu is done collapsing up.
- * @event AccordionMenu#up
- */
- this.$element.trigger('up.zf.accordionMenu', [$target]);
- };
- /**
- * Destroys an instance of accordion menu.
- * @fires AccordionMenu#destroyed
- */
- AccordionMenu.prototype.destroy = function(){
- this.$element.find('[data-submenu]').slideDown(0).css('display', '');
- this.$element.find('a').off('click.zf.accordionMenu');
- Foundation.Nest.Burn(this.$element, 'accordion');
- Foundation.unregisterPlugin(this);
- };
- Foundation.plugin(AccordionMenu, 'AccordionMenu');
- }(jQuery, window.Foundation);
/**
- * Drilldown module.
- * @module foundation.drilldown
+ * Accordion module.
+ * @module foundation.accordion
* @requires foundation.util.keyboard
- * @requires foundation.util.motion
- * @requires foundation.util.nest
*/
- !function($, Foundation){
- 'use strict';
- /**
- * Creates a new instance of a drilldown menu.
- * @class
- * @param {jQuery} element - jQuery object to make into an accordion menu.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function Drilldown(element, options){
- this.$element = element;
- this.options = $.extend({}, Drilldown.defaults, this.$element.data(), options);
+ var Accordion = function (_Plugin) {
+ _inherits(Accordion, _Plugin);
- Foundation.Nest.Feather(this.$element, 'drilldown');
-
- this._init();
+ function Accordion() {
+ _classCallCheck(this, Accordion);
- Foundation.registerPlugin(this);
- Foundation.Keyboard.register('Drilldown', {
- 'ENTER': 'open',
- 'SPACE': 'open',
- 'ARROW_RIGHT': 'next',
- 'ARROW_UP': 'up',
- 'ARROW_DOWN': 'down',
- 'ARROW_LEFT': 'previous',
- 'ESCAPE': 'close',
- 'TAB': 'down',
- 'SHIFT_TAB': 'up'
- });
+ return _possibleConstructorReturn(this, (Accordion.__proto__ || Object.getPrototypeOf(Accordion)).apply(this, arguments));
}
- Drilldown.defaults = {
+
+ _createClass(Accordion, [{
+ key: '_setup',
+
/**
- * Markup used for JS generated back button. Prepended to submenu lists and deleted on `destroy` method.
- * @option
- * @example '<li><a>Back</a></li>'
+ * Creates a new instance of an accordion.
+ * @class
+ * @name Accordion
+ * @fires Accordion#init
+ * @param {jQuery} element - jQuery object to make into an accordion.
+ * @param {Object} options - a plain object with settings to override the default options.
*/
- backButton: '<li class="js-drilldown-back" tabindex="0"><a>Back</a></li>',
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Accordion.defaults, this.$element.data(), options);
+
+ this.className = 'Accordion'; // ie9 back compat
+ this._init();
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].register('Accordion', {
+ 'ENTER': 'toggle',
+ 'SPACE': 'toggle',
+ 'ARROW_DOWN': 'next',
+ 'ARROW_UP': 'previous'
+ });
+ }
+
/**
- * Markup used to wrap drilldown menu. Use a class name for independent styling, or the JS applied class: `is-drilldown`.
- * @option
- * @example '<div></div>'
+ * Initializes the accordion by animating the preset active pane(s).
+ * @private
*/
- wrapper: '<div></div>',
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ var _this3 = this;
+
+ this.$element.attr('role', 'tablist');
+ this.$tabs = this.$element.children('[data-accordion-item]');
+
+ this.$tabs.each(function (idx, el) {
+ var $el = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(el),
+ $content = $el.children('[data-tab-content]'),
+ id = $content[0].id || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__foundation_util_core__["b" /* GetYoDigits */])(6, 'accordion'),
+ linkId = el.id || id + '-label';
+
+ $el.find('a:first').attr({
+ 'aria-controls': id,
+ 'role': 'tab',
+ 'id': linkId,
+ 'aria-expanded': false,
+ 'aria-selected': false
+ });
+
+ $content.attr({ 'role': 'tabpanel', 'aria-labelledby': linkId, 'aria-hidden': true, 'id': id });
+ });
+ var $initActive = this.$element.find('.is-active').children('[data-tab-content]');
+ this.firstTimeInit = true;
+ if ($initActive.length) {
+ this.down($initActive, this.firstTimeInit);
+ this.firstTimeInit = false;
+ }
+
+ this._checkDeepLink = function () {
+ var anchor = window.location.hash;
+ //need a hash and a relevant anchor in this tabset
+ if (anchor.length) {
+ var $link = _this3.$element.find('[href$="' + anchor + '"]'),
+ $anchor = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(anchor);
+
+ if ($link.length && $anchor) {
+ if (!$link.parent('[data-accordion-item]').hasClass('is-active')) {
+ _this3.down($anchor, _this3.firstTimeInit);
+ _this3.firstTimeInit = false;
+ };
+
+ //roll up a little to show the titles
+ if (_this3.options.deepLinkSmudge) {
+ var _this = _this3;
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).load(function () {
+ var offset = _this.$element.offset();
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('html, body').animate({ scrollTop: offset.top }, _this.options.deepLinkSmudgeDelay);
+ });
+ }
+
+ /**
+ * Fires when the zplugin has deeplinked at pageload
+ * @event Accordion#deeplink
+ */
+ _this3.$element.trigger('deeplink.zf.accordion', [$link, $anchor]);
+ }
+ }
+ };
+
+ //use browser to open a tab, if it exists in this tabset
+ if (this.options.deepLink) {
+ this._checkDeepLink();
+ }
+
+ this._events();
+ }
+
/**
- * Allow the menu to return to root list on body click.
- * @option
- * @example false
+ * Adds event handlers for items within the accordion.
+ * @private
*/
- closeOnClick: false,
- // holdOpen: false
- };
- /**
- * Initializes the drilldown by creating jQuery collections of elements
- * @private
- */
- Drilldown.prototype._init = function(){
- this.$submenuAnchors = this.$element.find('li.has-submenu');
- this.$submenus = this.$submenuAnchors.children('[data-submenu]').addClass('is-drilldown-sub')/*.wrap($(this.options.wrapper).addClass('is-drilldown-sub'))*/;
- // this.$rootElems = this.$element.children('[data-submenu]')/*.addClass('first-sub')*/;
- this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'menuitem');
- // this.$submenus;
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this;
- this._prepareMenu();
- // this._getMaxDims();
- this._keyboardEvents();
- };
- /**
- * prepares drilldown menu by setting attributes to links and elements
- * sets a min height to prevent content jumping
- * wraps the element if not already wrapped
- * @private
- * @function
- */
- Drilldown.prototype._prepareMenu = function(){
- var _this = this;
- // if(!this.options.holdOpen){
- // this._menuLinkEvents();
- // }
- this.$submenuAnchors.each(function(){
- var $sub = $(this);
- $sub.find('a')[0].removeAttribute('href');
- $sub.children('[data-submenu]')
- .attr({
- 'aria-hidden': true,
- 'tabindex': 0,
- 'role': 'menu'
+ this.$tabs.each(function () {
+ var $elem = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this);
+ var $tabContent = $elem.children('[data-tab-content]');
+ if ($tabContent.length) {
+ $elem.children('a').off('click.zf.accordion keydown.zf.accordion').on('click.zf.accordion', function (e) {
+ e.preventDefault();
+ _this.toggle($tabContent);
+ }).on('keydown.zf.accordion', function (e) {
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].handleKey(e, 'Accordion', {
+ toggle: function () {
+ _this.toggle($tabContent);
+ },
+ next: function () {
+ var $a = $elem.next().find('a').focus();
+ if (!_this.options.multiExpand) {
+ $a.trigger('click.zf.accordion');
+ }
+ },
+ previous: function () {
+ var $a = $elem.prev().find('a').focus();
+ if (!_this.options.multiExpand) {
+ $a.trigger('click.zf.accordion');
+ }
+ },
+ handled: function () {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ });
});
- _this._events($sub);
- });
- this.$submenus.each(function(){
- var $menu = $(this),
- $back = $menu.find('.js-drilldown-back');
- if(!$back.length){
- $menu.prepend(_this.options.backButton);
- _this._back($menu);
+ }
+ });
+ if (this.options.deepLink) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).on('popstate', this._checkDeepLink);
}
- });
- if(!this.$element.parent().hasClass('is-drilldown')){
- this.$wrapper = $(this.options.wrapper).addClass('is-drilldown').css(this._getMaxDims());
- this.$element.wrap(this.$wrapper);
}
- };
- /**
- * Adds event handlers to elements in the menu.
- * @function
- * @private
- * @param {jQuery} $elem - the current menu item to add handlers to.
- */
- Drilldown.prototype._events = function($elem){
- var _this = this;
+ /**
+ * Toggles the selected content pane's open/close state.
+ * @param {jQuery} $target - jQuery object of the pane to toggle (`.accordion-content`).
+ * @function
+ */
- $elem.off('click.zf.drilldown')
- .on('click.zf.drilldown', function(e){
- e.stopImmediatePropagation();
- e.preventDefault();
+ }, {
+ key: 'toggle',
+ value: function toggle($target) {
+ if ($target.closest('[data-accordion]').is('[disabled]')) {
+ console.info('Cannot toggle an accordion that is disabled.');
+ return;
+ }
+ if ($target.parent().hasClass('is-active')) {
+ this.up($target);
+ } else {
+ this.down($target);
+ }
+ //either replace or update browser history
+ if (this.options.deepLink) {
+ var anchor = $target.prev('a').attr('href');
- if(e.target !== e.currentTarget.firstElementChild){
- return false;
+ if (this.options.updateHistory) {
+ history.pushState({}, '', anchor);
+ } else {
+ history.replaceState({}, '', anchor);
+ }
}
- _this._show($elem);
+ }
- if(_this.options.closeOnClick){
- var $body = $('body').not(_this.$wrapper);
- $body.off('.zf.drilldown').on('click.zf.drilldown', function(e){
- e.preventDefault();
- _this._hideAll();
- $body.off('.zf.drilldown');
- });
+ /**
+ * Opens the accordion tab defined by `$target`.
+ * @param {jQuery} $target - Accordion pane to open (`.accordion-content`).
+ * @param {Boolean} firstTime - flag to determine if reflow should happen.
+ * @fires Accordion#down
+ * @function
+ */
+
+ }, {
+ key: 'down',
+ value: function down($target, firstTime) {
+ var _this4 = this;
+
+ /**
+ * checking firstTime allows for initial render of the accordion
+ * to render preset is-active panes.
+ */
+ if ($target.closest('[data-accordion]').is('[disabled]') && !firstTime) {
+ console.info('Cannot call down on an accordion that is disabled.');
+ return;
}
- });
- };
- /**
- * Adds keydown event listener to `li`'s in the menu.
- * @private
- */
- Drilldown.prototype._keyboardEvents = function() {
- var _this = this;
- this.$menuItems.add(this.$element.find('.js-drilldown-back')).on('keydown.zf.drilldown', function(e){
- var $element = $(this),
- $elements = $element.parent('ul').children('li'),
- $prevElement,
- $nextElement;
-
- $elements.each(function(i) {
- if ($(this).is($element)) {
- $prevElement = $elements.eq(Math.max(0, i-1));
- $nextElement = $elements.eq(Math.min(i+1, $elements.length-1));
- return;
- }
- });
- Foundation.Keyboard.handleKey(e, _this, {
- next: function() {
- if ($element.is(_this.$submenuAnchors)) {
- _this._show($element);
- $element.on(Foundation.transitionend($element), function(){
- $element.find('ul li').filter(_this.$menuItems).first().focus();
- });
- }
- },
- previous: function() {
- _this._hide($element.parent('ul'));
- $element.parent('ul').on(Foundation.transitionend($element), function(){
- setTimeout(function() {
- $element.parent('ul').parent('li').focus();
- }, 1);
- });
- },
- up: function() {
- $prevElement.focus();
- },
- down: function() {
- $nextElement.focus();
- },
- close: function() {
- _this._back();
- //_this.$menuItems.first().focus(); // focus to first element
- },
- open: function() {
- if (!$element.is(_this.$menuItems)) { // not menu item means back button
- _this._hide($element.parent('ul'));
- setTimeout(function(){$element.parent('ul').parent('li').focus();}, 1);
- } else if ($element.is(_this.$submenuAnchors)) {
- _this._show($element);
- setTimeout(function(){$element.find('ul li').filter(_this.$menuItems).first().focus();}, 1);
- }
- },
- handled: function() {
- e.preventDefault();
- e.stopImmediatePropagation();
+ $target.attr('aria-hidden', false).parent('[data-tab-content]').addBack().parent().addClass('is-active');
+
+ if (!this.options.multiExpand && !firstTime) {
+ var $currentActive = this.$element.children('.is-active').children('[data-tab-content]');
+ if ($currentActive.length) {
+ this.up($currentActive.not($target));
}
- });
- }); // end keyboardAccess
- };
+ }
- /**
- * Closes all open elements, and returns to root menu.
- * @function
- * @fires Drilldown#closed
- */
- Drilldown.prototype._hideAll = function(){
- var $elem = this.$element.find('.is-drilldown-sub.is-active').addClass('is-closing');
- $elem.one(Foundation.transitionend($elem), function(e){
- $elem.removeClass('is-active is-closing');
- });
+ $target.slideDown(this.options.slideSpeed, function () {
/**
- * Fires when the menu is fully closed.
- * @event Drilldown#closed
+ * Fires when the tab is done opening.
+ * @event Accordion#down
*/
- this.$element.trigger('closed.zf.drilldown');
- };
- /**
- * Adds event listener for each `back` button, and closes open menus.
- * @function
- * @fires Drilldown#back
- * @param {jQuery} $elem - the current sub-menu to add `back` event.
- */
- Drilldown.prototype._back = function($elem){
- var _this = this;
- $elem.off('click.zf.drilldown');
- $elem.children('.js-drilldown-back')
- .on('click.zf.drilldown', function(e){
- e.stopImmediatePropagation();
- // console.log('mouseup on back');
- _this._hide($elem);
+ _this4.$element.trigger('down.zf.accordion', [$target]);
});
- };
- /**
- * Adds event listener to menu items w/o submenus to close open menus on click.
- * @function
- * @private
- */
- Drilldown.prototype._menuLinkEvents = function(){
- var _this = this;
- this.$menuItems.not('.has-submenu')
- .off('click.zf.drilldown')
- .on('click.zf.drilldown', function(e){
- // e.stopImmediatePropagation();
- setTimeout(function(){
- _this._hideAll();
- }, 0);
+
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + $target.attr('aria-labelledby')).attr({
+ 'aria-expanded': true,
+ 'aria-selected': true
});
- };
- /**
- * Opens a submenu.
- * @function
- * @fires Drilldown#open
- * @param {jQuery} $elem - the current element with a submenu to open.
- */
- Drilldown.prototype._show = function($elem){
- $elem.children('[data-submenu]').addClass('is-active');
+ }
- this.$element.trigger('open.zf.drilldown', [$elem]);
- };
- /**
- * Hides a submenu
- * @function
- * @fires Drilldown#hide
- * @param {jQuery} $elem - the current sub-menu to hide.
- */
- Drilldown.prototype._hide = function($elem){
- var _this = this;
- $elem.addClass('is-closing')
- .one(Foundation.transitionend($elem), function(){
- $elem.removeClass('is-active is-closing');
- });
/**
- * Fires when the submenu is has closed.
- * @event Drilldown#hide
+ * Closes the tab defined by `$target`.
+ * @param {jQuery} $target - Accordion tab to close (`.accordion-content`).
+ * @fires Accordion#up
+ * @function
*/
- $elem.trigger('hide.zf.drilldown', [$elem]);
- };
- /**
- * Iterates through the nested menus to calculate the min-height, and max-width for the menu.
- * Prevents content jumping.
- * @function
- * @private
- */
- Drilldown.prototype._getMaxDims = function(){
- var max = 0, result = {};
- this.$submenus.add(this.$element).each(function(){
- var numOfElems = $(this).children('li').length;
- max = numOfElems > max ? numOfElems : max;
- });
+ }, {
+ key: 'up',
+ value: function up($target) {
+ if ($target.closest('[data-accordion]').is('[disabled]')) {
+ console.info('Cannot call up on an accordion that is disabled.');
+ return;
+ }
- result.height = max * this.$menuItems[0].getBoundingClientRect().height + 'px';
- result.width = this.$element[0].getBoundingClientRect().width + 'px';
+ var $aunts = $target.parent().siblings(),
+ _this = this;
- return result;
- };
- /**
- * Destroys the Drilldown Menu
- * @function
- */
- Drilldown.prototype.destroy = function(){
- this._hideAll();
- Foundation.Nest.Burn(this.$element, 'drilldown');
- this.$element.unwrap()
- .find('.js-drilldown-back').remove()
- .end().find('.is-active, .is-closing, .is-drilldown-sub').removeClass('is-active is-closing is-drilldown-sub')
- .end().find('[data-submenu]').removeAttr('aria-hidden tabindex role')
- .off('.zf.drilldown').end().off('zf.drilldown');
+ if (!this.options.allowAllClosed && !$aunts.hasClass('is-active') || !$target.parent().hasClass('is-active')) {
+ return;
+ }
- Foundation.unregisterPlugin(this);
- };
- Foundation.plugin(Drilldown, 'Drilldown');
- }(jQuery, window.Foundation);
+ $target.slideUp(_this.options.slideSpeed, function () {
+ /**
+ * Fires when the tab is done collapsing up.
+ * @event Accordion#up
+ */
+ _this.$element.trigger('up.zf.accordion', [$target]);
+ });
- /**
- * Dropdown module.
- * @module foundation.dropdown
- * @requires foundation.util.keyboard
- * @requires foundation.util.box
- */
- !function($, Foundation){
- 'use strict';
- /**
- * Creates a new instance of a dropdown.
- * @class
- * @param {jQuery} element - jQuery object to make into an accordion menu.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function Dropdown(element, options){
- this.$element = element;
- this.options = $.extend({}, Dropdown.defaults, this.$element.data(), options);
- this._init();
+ $target.attr('aria-hidden', true).parent().removeClass('is-active');
- Foundation.registerPlugin(this);
- Foundation.Keyboard.register('Dropdown', {
- 'ENTER': 'open',
- 'SPACE': 'open',
- 'ESCAPE': 'close',
- 'TAB': 'tab_forward',
- 'SHIFT_TAB': 'tab_backward'
- });
- }
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + $target.attr('aria-labelledby')).attr({
+ 'aria-expanded': false,
+ 'aria-selected': false
+ });
+ }
- Dropdown.defaults = {
- /**
- * Amount of time to delay opening a submenu on hover event.
- * @option
- * @example 250
- */
- hoverDelay: 250,
/**
- * Allow submenus to open on hover events
- * @option
- * @example false
- */
- hover: false,
- /**
- * Number of pixels between the dropdown pane and the triggering element on open.
- * @option
- * @example 1
- */
- vOffset: 1,
- /**
- * Number of pixels between the dropdown pane and the triggering element on open.
- * @option
- * @example 1
- */
- hOffset: 1,
- /**
- * Class applied to adjust open position. JS will test and fill this in.
- * @option
- * @example 'top'
- */
- positionClass: '',
- /**
- * Allow the plugin to trap focus to the dropdown pane on open.
- * @option
- * @example false
+ * Destroys an instance of an accordion.
+ * @fires Accordion#destroyed
+ * @function
*/
- trapFocus: false
- };
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.$element.find('[data-tab-content]').stop(true).slideUp(0).css('display', '');
+ this.$element.find('a').off('.zf.accordion');
+ if (this.options.deepLink) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off('popstate', this._checkDeepLink);
+ }
+ }
+ }]);
+
+ return Accordion;
+ }(__WEBPACK_IMPORTED_MODULE_3__foundation_plugin__["a" /* Plugin */]);
+
+ Accordion.defaults = {
/**
- * Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
- * @function
- * @private
+ * Amount of time to animate the opening of an accordion pane.
+ * @option
+ * @type {number}
+ * @default 250
*/
- Dropdown.prototype._init = function(){
- var $id = this.$element.attr('id');
-
- this.$anchor = $('[data-toggle="' + $id + '"]') || $('[data-open="' + $id + '"]');
- this.$anchor.attr({
- 'aria-controls': $id,
- 'data-is-focus': false,
- 'data-yeti-box': $id,
- 'aria-haspopup': true,
- 'aria-expanded': false
- // 'data-resize': $id
- });
-
- this.options.positionClass = this.getPositionClass();
- this.counter = 4;
- this.usedPositions = [];
- this.$element.attr({
- 'aria-hidden': 'true',
- 'data-yeti-box': $id,
- 'data-resize': $id,
- 'aria-labelledby': this.$anchor[0].id || Foundation.GetYoDigits(6, 'dd-anchor')
- });
- this._events();
- };
+ slideSpeed: 250,
/**
- * Helper function to determine current orientation of dropdown pane.
- * @function
- * @returns {String} position - string value of a position class.
+ * Allow the accordion to have multiple open panes.
+ * @option
+ * @type {boolean}
+ * @default false
*/
- Dropdown.prototype.getPositionClass = function(){
- var position = this.$element[0].className.match(/(top|left|right)/g);
- position = position ? position[0] : '';
- return position;
- };
+ multiExpand: false,
/**
- * Adjusts the dropdown panes orientation by adding/removing positioning classes.
- * @function
- * @private
- * @param {String} position - position class to remove.
- */
- Dropdown.prototype._reposition = function(position){
- this.usedPositions.push(position ? position : 'bottom');
- //default, try switching to opposite side
- if(!position && (this.usedPositions.indexOf('top') < 0)){
- this.$element.addClass('top');
- }else if(position === 'top' && (this.usedPositions.indexOf('bottom') < 0)){
- this.$element.removeClass(position);
- }else if(position === 'left' && (this.usedPositions.indexOf('right') < 0)){
- this.$element.removeClass(position)
- .addClass('right');
- }else if(position === 'right' && (this.usedPositions.indexOf('left') < 0)){
- this.$element.removeClass(position)
- .addClass('left');
- }
-
- //if default change didn't work, try bottom or left first
- else if(!position && (this.usedPositions.indexOf('top') > -1) && (this.usedPositions.indexOf('left') < 0)){
- this.$element.addClass('left');
- }else if(position === 'top' && (this.usedPositions.indexOf('bottom') > -1) && (this.usedPositions.indexOf('left') < 0)){
- this.$element.removeClass(position)
- .addClass('left');
- }else if(position === 'left' && (this.usedPositions.indexOf('right') > -1) && (this.usedPositions.indexOf('bottom') < 0)){
- this.$element.removeClass(position);
- }else if(position === 'right' && (this.usedPositions.indexOf('left') > -1) && (this.usedPositions.indexOf('bottom') < 0)){
- this.$element.removeClass(position);
- }
- //if nothing cleared, set to bottom
- else{
- this.$element.removeClass(position);
- }
- this.classChanged = true;
- this.counter--;
- };
+ * Allow the accordion to close all panes.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ allowAllClosed: false,
/**
- * Sets the position and orientation of the dropdown pane, checks for collisions.
- * Recursively calls itself if a collision is detected, with a new position class.
- * @function
- * @private
+ * Allows the window to scroll to content of pane specified by hash anchor
+ * @option
+ * @type {boolean}
+ * @default false
*/
- Dropdown.prototype._setPosition = function(){
- if(this.$anchor.attr('aria-expanded') === 'false'){ return false; }
- var position = this.getPositionClass(),
- $eleDims = Foundation.Box.GetDimensions(this.$element),
- $anchorDims = Foundation.Box.GetDimensions(this.$anchor),
- _this = this,
- direction = (position === 'left' ? 'left' : ((position === 'right') ? 'left' : 'top')),
- param = (direction === 'top') ? 'height' : 'width',
- offset = (param === 'height') ? this.options.vOffset : this.options.hOffset;
-
- if(($eleDims.width >= $eleDims.windowDims.width) || (!this.counter && !Foundation.Box.ImNotTouchingYou(this.$element))){
- this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({
- 'width': $eleDims.windowDims.width - (this.options.hOffset * 2),
- 'height': 'auto',
- });
- this.classChanged = true;
- return false;
- }
+ deepLink: false,
- this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, position, this.options.vOffset, this.options.hOffset));
-
- while(!Foundation.Box.ImNotTouchingYou(this.$element) && this.counter){
- this._reposition(position);
- this._setPosition();
- }
- };
/**
- * Adds event listeners to the element utilizing the triggers utility library.
- * @function
- * @private
+ * Adjust the deep link scroll to make sure the top of the accordion panel is visible
+ * @option
+ * @type {boolean}
+ * @default false
*/
- Dropdown.prototype._events = function(){
- var _this = this;
- this.$element.on({
- 'open.zf.trigger': this.open.bind(this),
- 'close.zf.trigger': this.close.bind(this),
- 'toggle.zf.trigger': this.toggle.bind(this),
- 'resizeme.zf.trigger': this._setPosition.bind(this)
- });
-
- if(this.options.hover){
- this.$anchor.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
- .on('mouseenter.zf.dropdown', function(){
- console.log('hover');
- clearTimeout(_this.timeout);
- _this.timeOut = setTimeout(function(){
- _this.open();
- _this.$anchor.data('hover', true);
- }, _this.options.hoverDelay);
- }).on('mouseleave.zf.dropdown', function(){
- clearTimeout(_this.timeout);
- _this.timeOut = setTimeout(function(){
- _this.close();
- _this.$anchor.data('hover', false);
- }, _this.options.hoverDelay);
- });
- }
- this.$anchor.add(this.$element).on('keydown.zf.dropdown', function(e) {
+ deepLinkSmudge: false,
- var visibleFocusableElements = Foundation.Keyboard.findFocusable(_this.$element);
+ /**
+ * Animation time (ms) for the deep link adjustment
+ * @option
+ * @type {number}
+ * @default 300
+ */
+ deepLinkSmudgeDelay: 300,
- Foundation.Keyboard.handleKey(e, _this, {
- tab_forward: function() {
- if (this.$element.find(':focus').is(visibleFocusableElements.eq(-1))) { // left modal downwards, setting focus to first element
- if (this.options.trapFocus) { // if focus shall be trapped
- visibleFocusableElements.eq(0).focus();
- e.preventDefault();
- } else { // if focus is not trapped, close dropdown on focus out
- this.close();
- }
- }
- },
- tab_backward: function() {
- if (this.$element.find(':focus').is(visibleFocusableElements.eq(0)) || this.$element.is(':focus')) { // left modal upwards, setting focus to last element
- if (this.options.trapFocus) { // if focus shall be trapped
- visibleFocusableElements.eq(-1).focus();
- e.preventDefault();
- } else { // if focus is not trapped, close dropdown on focus out
- this.close();
- }
- }
- },
- open: function() {
- _this.open();
- _this.$element.attr('tabindex', -1).focus();
- },
- close: function() {
- _this.close();
- _this.$anchor.focus();
- }
- });
- });
- };
/**
- * Opens the dropdown pane, and fires a bubbling event to close other dropdowns.
- * @function
- * @fires Dropdown#closeme
- * @fires Dropdown#show
+ * Update the browser history with the open accordion
+ * @option
+ * @type {boolean}
+ * @default false
*/
- Dropdown.prototype.open = function(){
- // var _this = this;
- /**
- * Fires to close other open dropdowns
- * @event Dropdown#closeme
- */
- this.$element.trigger('closeme.zf.dropdown', this.$element.attr('id'));
- this.$anchor.addClass('hover')
- .attr({'aria-expanded': true});
- // this.$element/*.show()*/;
- this._setPosition();
- this.$element.addClass('is-open')
- .attr({'aria-hidden': false});
+ updateHistory: false
+ };
- /**
- * Fires once the dropdown is visible.
- * @event Dropdown#show
- */
- this.$element.trigger('show.zf.dropdown', [this.$element]);
- //why does this not work correctly for this plugin?
- // Foundation.reflow(this.$element, 'dropdown');
- // Foundation._reflow(this.$element.attr('data-dropdown'));
- };
+ /***/ }),
+ /* 12 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AccordionMenu; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__ = __webpack_require__(3);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_nest__ = __webpack_require__(9);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_plugin__ = __webpack_require__(2);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
- /**
- * Closes the open dropdown pane.
- * @function
- * @fires Dropdown#hide
- */
- Dropdown.prototype.close = function(){
- if(!this.$element.hasClass('is-open')){
- return false;
- }
- this.$element.removeClass('is-open')
- .attr({'aria-hidden': true});
- this.$anchor.removeClass('hover')
- .attr('aria-expanded', false);
- if(this.classChanged){
- var curPositionClass = this.getPositionClass();
- if(curPositionClass){
- this.$element.removeClass(curPositionClass);
- }
- this.$element.addClass(this.options.positionClass)
- /*.hide()*/.css({height: '', width: ''});
- this.classChanged = false;
- this.counter = 4;
- this.usedPositions.length = 0;
- }
- this.$element.trigger('hide.zf.dropdown', [this.$element]);
- // Foundation.reflow(this.$element, 'dropdown');
- };
- /**
- * Toggles the dropdown pane's visibility.
- * @function
- */
- Dropdown.prototype.toggle = function(){
- if(this.$element.hasClass('is-open')){
- if(this.$anchor.data('hover')) return;
- this.close();
- }else{
- this.open();
- }
- };
- /**
- * Destroys the dropdown.
- * @function
- */
- Dropdown.prototype.destroy = function(){
- this.$element.off('.zf.trigger').hide();
- this.$anchor.off('.zf.dropdown');
- Foundation.unregisterPlugin(this);
- };
- Foundation.plugin(Dropdown, 'Dropdown');
- }(jQuery, window.Foundation);
/**
- * DropdownMenu module.
- * @module foundation.dropdown-menu
+ * AccordionMenu module.
+ * @module foundation.accordionMenu
* @requires foundation.util.keyboard
- * @requires foundation.util.box
* @requires foundation.util.nest
*/
- !function(Foundation, $) {
- 'use strict';
-
- /**
- * Creates a new instance of DropdownMenu.
- * @class
- * @fires DropdownMenu#init
- * @param {jQuery} element - jQuery object to make into a dropdown menu.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function DropdownMenu(element, options) {
- this.$element = element;
- this.options = $.extend({}, DropdownMenu.defaults, this.$element.data(), options);
- Foundation.Nest.Feather(this.$element, 'dropdown');
-
- this._init();
+ var AccordionMenu = function (_Plugin) {
+ _inherits(AccordionMenu, _Plugin);
- Foundation.registerPlugin(this);
- Foundation.Keyboard.register('DropdownMenu', {
- 'ENTER': 'open',
- 'SPACE': 'open',
- 'ARROW_RIGHT': 'next',
- 'ARROW_UP': 'up',
- 'ARROW_DOWN': 'down',
- 'ARROW_LEFT': 'previous',
- 'ESCAPE': 'close'
- });
+ function AccordionMenu() {
+ _classCallCheck(this, AccordionMenu);
- // /**
- // * Fires when the plugin has been successfuly initialized.
- // * @event DropdownMenu#init
- // */
- // this.$element.trigger('init.zf.dropdown');
+ return _possibleConstructorReturn(this, (AccordionMenu.__proto__ || Object.getPrototypeOf(AccordionMenu)).apply(this, arguments));
}
- /**
- * Default settings for plugin
- */
- DropdownMenu.defaults = {
- // toggleOn: 'both',
+ _createClass(AccordionMenu, [{
+ key: '_setup',
+
/**
- * Allow a submenu to open/remain open on parent click event. Allows cursor to move away from menu.
- * @option
- * @example true
+ * Creates a new instance of an accordion menu.
+ * @class
+ * @name AccordionMenu
+ * @fires AccordionMenu#init
+ * @param {jQuery} element - jQuery object to make into an accordion menu.
+ * @param {Object} options - Overrides to the default plugin settings.
*/
- clickOpen: true,
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, AccordionMenu.defaults, this.$element.data(), options);
+ this.className = 'AccordionMenu'; // ie9 back compat
+
+ this._init();
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].register('AccordionMenu', {
+ 'ENTER': 'toggle',
+ 'SPACE': 'toggle',
+ 'ARROW_RIGHT': 'open',
+ 'ARROW_UP': 'up',
+ 'ARROW_DOWN': 'down',
+ 'ARROW_LEFT': 'close',
+ 'ESCAPE': 'closeAll'
+ });
+ }
+
/**
- * Allow clicks on the body to close any open submenus.
- * @option
- * @example false
+ * Initializes the accordion menu by hiding all nested menus.
+ * @private
*/
- closeOnClick: false,
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_nest__["a" /* Nest */].Feather(this.$element, 'accordion');
+
+ var _this = this;
+
+ this.$element.find('[data-submenu]').not('.is-active').slideUp(0); //.find('a').css('padding-left', '1rem');
+ this.$element.attr({
+ 'role': 'tree',
+ 'aria-multiselectable': this.options.multiOpen
+ });
+
+ this.$menuLinks = this.$element.find('.is-accordion-submenu-parent');
+ this.$menuLinks.each(function () {
+ var linkId = this.id || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["b" /* GetYoDigits */])(6, 'acc-menu-link'),
+ $elem = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ $sub = $elem.children('[data-submenu]'),
+ subId = $sub[0].id || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["b" /* GetYoDigits */])(6, 'acc-menu'),
+ isActive = $sub.hasClass('is-active');
+
+ if (_this.options.submenuToggle) {
+ $elem.addClass('has-submenu-toggle');
+ $elem.children('a').after('<button id="' + linkId + '" class="submenu-toggle" aria-controls="' + subId + '" aria-expanded="' + isActive + '" title="' + _this.options.submenuToggleText + '"><span class="submenu-toggle-text">' + _this.options.submenuToggleText + '</span></button>');
+ } else {
+ $elem.attr({
+ 'aria-controls': subId,
+ 'aria-expanded': isActive,
+ 'id': linkId
+ });
+ }
+ $sub.attr({
+ 'aria-labelledby': linkId,
+ 'aria-hidden': !isActive,
+ 'role': 'group',
+ 'id': subId
+ });
+ });
+ this.$element.find('li').attr({
+ 'role': 'treeitem'
+ });
+ var initPanes = this.$element.find('.is-active');
+ if (initPanes.length) {
+ var _this = this;
+ initPanes.each(function () {
+ _this.down(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this));
+ });
+ }
+ this._events();
+ }
+
/**
- * Disallows hover events from opening submenus
- * @option
- * @example false
+ * Adds event handlers for items within the menu.
+ * @private
*/
- disableHover: false,
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this;
+
+ this.$element.find('li').each(function () {
+ var $submenu = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).children('[data-submenu]');
+
+ if ($submenu.length) {
+ if (_this.options.submenuToggle) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).children('.submenu-toggle').off('click.zf.accordionMenu').on('click.zf.accordionMenu', function (e) {
+ _this.toggle($submenu);
+ });
+ } else {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).children('a').off('click.zf.accordionMenu').on('click.zf.accordionMenu', function (e) {
+ e.preventDefault();
+ _this.toggle($submenu);
+ });
+ }
+ }
+ }).on('keydown.zf.accordionmenu', function (e) {
+ var $element = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ $elements = $element.parent('ul').children('li'),
+ $prevElement,
+ $nextElement,
+ $target = $element.children('[data-submenu]');
+
+ $elements.each(function (i) {
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).is($element)) {
+ $prevElement = $elements.eq(Math.max(0, i - 1)).find('a').first();
+ $nextElement = $elements.eq(Math.min(i + 1, $elements.length - 1)).find('a').first();
+
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).children('[data-submenu]:visible').length) {
+ // has open sub menu
+ $nextElement = $element.find('li:first-child').find('a').first();
+ }
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).is(':first-child')) {
+ // is first element of sub menu
+ $prevElement = $element.parents('li').first().find('a').first();
+ } else if ($prevElement.parents('li').first().children('[data-submenu]:visible').length) {
+ // if previous element has open sub menu
+ $prevElement = $prevElement.parents('li').find('li:last-child').find('a').first();
+ }
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).is(':last-child')) {
+ // is last element of sub menu
+ $nextElement = $element.parents('li').first().next('li').find('a').first();
+ }
+
+ return;
+ }
+ });
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].handleKey(e, 'AccordionMenu', {
+ open: function () {
+ if ($target.is(':hidden')) {
+ _this.down($target);
+ $target.find('li').first().find('a').first().focus();
+ }
+ },
+ close: function () {
+ if ($target.length && !$target.is(':hidden')) {
+ // close active sub of this item
+ _this.up($target);
+ } else if ($element.parent('[data-submenu]').length) {
+ // close currently open sub
+ _this.up($element.parent('[data-submenu]'));
+ $element.parents('li').first().find('a').first().focus();
+ }
+ },
+ up: function () {
+ $prevElement.focus();
+ return true;
+ },
+ down: function () {
+ $nextElement.focus();
+ return true;
+ },
+ toggle: function () {
+ if (_this.options.submenuToggle) {
+ return false;
+ }
+ if ($element.children('[data-submenu]').length) {
+ _this.toggle($element.children('[data-submenu]'));
+ return true;
+ }
+ },
+ closeAll: function () {
+ _this.hideAll();
+ },
+ handled: function (preventDefault) {
+ if (preventDefault) {
+ e.preventDefault();
+ }
+ e.stopImmediatePropagation();
+ }
+ });
+ }); //.attr('tabindex', 0);
+ }
+
/**
- * Allow a submenu to automatically close on a mouseleave event.
- * @option
- * @example true
+ * Closes all panes of the menu.
+ * @function
*/
- autoclose: true,
+
+ }, {
+ key: 'hideAll',
+ value: function hideAll() {
+ this.up(this.$element.find('[data-submenu]'));
+ }
+
/**
- * Amount of time to delay opening a submenu on hover event.
- * @option
- * @example 150
+ * Opens all panes of the menu.
+ * @function
*/
- hoverDelay: 150,
+
+ }, {
+ key: 'showAll',
+ value: function showAll() {
+ this.down(this.$element.find('[data-submenu]'));
+ }
+
/**
- * Amount of time to delay closing a submenu on a mouseleave event.
- * @option
- * @example 500
+ * Toggles the open/close state of a submenu.
+ * @function
+ * @param {jQuery} $target - the submenu to toggle
*/
- closingTime: 500,
- // wrapOnKeys: true,
+
+ }, {
+ key: 'toggle',
+ value: function toggle($target) {
+ if (!$target.is(':animated')) {
+ if (!$target.is(':hidden')) {
+ this.up($target);
+ } else {
+ this.down($target);
+ }
+ }
+ }
+
/**
- * Position of the menu relative to what direction the submenus should open. Handled by JS.
- * @option
- * @example 'left'
+ * Opens the sub-menu defined by `$target`.
+ * @param {jQuery} $target - Sub-menu to open.
+ * @fires AccordionMenu#down
*/
- alignment: 'left',
+
+ }, {
+ key: 'down',
+ value: function down($target) {
+ var _this = this;
+
+ if (!this.options.multiOpen) {
+ this.up(this.$element.find('.is-active').not($target.parentsUntil(this.$element).add($target)));
+ }
+
+ $target.addClass('is-active').attr({ 'aria-hidden': false });
+
+ if (this.options.submenuToggle) {
+ $target.prev('.submenu-toggle').attr({ 'aria-expanded': true });
+ } else {
+ $target.parent('.is-accordion-submenu-parent').attr({ 'aria-expanded': true });
+ }
+
+ $target.slideDown(_this.options.slideSpeed, function () {
+ /**
+ * Fires when the menu is done opening.
+ * @event AccordionMenu#down
+ */
+ _this.$element.trigger('down.zf.accordionMenu', [$target]);
+ });
+ }
+
/**
- * Class applied to vertical oriented menus, Foundation default is `vertical`. Update this if using your own class.
- * @option
- * @example 'vertical'
+ * Closes the sub-menu defined by `$target`. All sub-menus inside the target will be closed as well.
+ * @param {jQuery} $target - Sub-menu to close.
+ * @fires AccordionMenu#up
*/
- verticalClass: 'vertical',
+
+ }, {
+ key: 'up',
+ value: function up($target) {
+ var _this = this;
+ $target.slideUp(_this.options.slideSpeed, function () {
+ /**
+ * Fires when the menu is done collapsing up.
+ * @event AccordionMenu#up
+ */
+ _this.$element.trigger('up.zf.accordionMenu', [$target]);
+ });
+
+ var $menus = $target.find('[data-submenu]').slideUp(0).addBack().attr('aria-hidden', true);
+
+ if (this.options.submenuToggle) {
+ $menus.prev('.submenu-toggle').attr('aria-expanded', false);
+ } else {
+ $menus.parent('.is-accordion-submenu-parent').attr('aria-expanded', false);
+ }
+ }
+
/**
- * Class applied to right-side oriented menus, Foundation default is `align-right`. Update this if using your own class.
- * @option
- * @example 'align-right'
+ * Destroys an instance of accordion menu.
+ * @fires AccordionMenu#destroyed
*/
- rightClass: 'align-right'
- };
- /**
- * Initializes the plugin, and calls _prepareMenu
- * @private
- * @function
- */
- DropdownMenu.prototype._init = function(){
- if(this.$element.hasClass(this.options.verticalClass)){
- this.vertical = true;
- }
- // this.vertical = this.$element.hasClass(this.options.verticalClass);
- this._prepareMenu();
- // this._addTopLevelKeyHandler();
- };
- /**
- * Prepares the menu by checking alignment and orientation, setting attributes for elements, and creating jQuery collections of elements.
- * @private
- * @function
- */
- DropdownMenu.prototype._prepareMenu = function(){
- var _this = this;
- this.$tabs = this.$element.children('li.has-submenu');
- this.$tabs.children('[data-submenu]').addClass('first-sub');
- this.$submenus = this.$element.find('li.has-submenu');
- this.$menuItems = this.$element.find('li').attr({'role': 'menuitem', 'tabindex': 0});
- this.$menuItems.children('a').attr('tabindex', -1);
- if(this.$element.hasClass(this.options.rightClass)){
- this.options.alignment = 'right';
- this.$submenus.addClass('is-left-arrow opens-left');
- }else{
- this.$submenus.addClass('is-right-arrow opens-right');
- }
- if(!this.vertical){
- this.$tabs.removeClass('is-right-arrow is-left-arrow opens-left opens-right').addClass('is-down-arrow');
- }
-
- this.$tabs.each(function(){
- var $tab = $(this);
- $tab.attr({
- 'role': 'menuitem',
- 'tabindex': 0,
- 'aria-label': $tab.children('a:first-child').text()/*.match(/\w/ig).join('')*/
- }).children('a').attr('tabindex', -1);//maybe add a more specific regex to match alphanumeric characters and join them appropriately
- if($tab.children('[data-submenu]')){
- $tab.attr('aria-haspopup', true);
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.$element.find('[data-submenu]').slideDown(0).css('display', '');
+ this.$element.find('a').off('click.zf.accordionMenu');
+
+ if (this.options.submenuToggle) {
+ this.$element.find('.has-submenu-toggle').removeClass('has-submenu-toggle');
+ this.$element.find('.submenu-toggle').remove();
}
- });
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_nest__["a" /* Nest */].Burn(this.$element, 'accordion');
+ }
+ }]);
- this.$submenus.each(function(){
- var $sub = $(this);
+ return AccordionMenu;
+ }(__WEBPACK_IMPORTED_MODULE_4__foundation_plugin__["a" /* Plugin */]);
- // if(_this.options.alignment === 'right'){
- // $sub.children('[data-submenu]').addClass('is-right-arrow');
- // }
-
- $sub.children('[data-submenu]')
- .attr({
- 'aria-hidden': true,
- 'tabindex': -1,
- 'role': 'menu'
- }).addClass('vertical');
- _this._events($sub);
- });
- };
-
- /**
- * Adds event listeners to elements within the menu
- * @param {jQuery} $elem - the element to attach listeners too.
- * @private
- * @function
- */
- DropdownMenu.prototype._events = function($elem){
- var _this = this,
- isTouch = window.ontouchstart !== undefined;
-
- if(this.options.clickOpen || isTouch){
- $elem.off('click.zf.dropdownmenu')
- .on('click.zf.dropdownmenu', function(e){
- if(!$(this).hasClass('is-dropdown-submenu-parent')){ return; }
- var hasClicked = $elem.data('isClick');
- if(isTouch && hasClicked) return;
- e.preventDefault();
- e.stopPropagation();
-
- if(hasClicked){
- _this._hide($elem);
- }else{
- _this._hideOthers($elem);
- _this._show($elem);
- $elem.data('isClick', true)
- .parentsUntil('[data-dropdown-menu]', '.is-dropdown-submenu-parent')
- .data('isClick', true);
- if(_this.options.closeOnClick){
- _this._addBodyHandler();
- }
- }
- });
- }
-
- if(!this.options.disableHover){
- //add ability for all menu items to close an open menu on the same level//
- this.$menuItems.on('mouseenter.zf.dropdownmenu', function(e){
- var $el = $(this);
- if(!$el.hasClass('is-active')){
- _this._hideOthers($el);
- }
- });
- //elements with submenus
- $elem.off('mouseenter.zf.dropdownmenu')
- .on('mouseenter.zf.dropdownmenu', function(e){
- clearTimeout($elem.closeTimer);
- if(!$elem.hasClass('is-active')){
- $elem.openTimer = setTimeout(function(){
- // _this._hideOthers($elem);
- _this._show($elem);
- }, _this.options.hoverDelay);
- }
- }).on('mouseleave.zf.dropdownmenu', function(e){
- if(!$elem.data('isClick') && _this.options.autoclose){
- clearTimeout($elem.openTimer);
- $elem.closeTimer = setTimeout(function(){
- _this._hide($elem);
- }, _this.options.closingTime);
- }
- });
- }
-
- this.$menuItems.on('keydown.zf.dropdownmenu', function(e){
- var $element = $(this),
- $tabs = _this.$element.children('li'),
- isTab = $element.is($tabs),
- $elements = isTab ? $tabs : $element.parents('li').first().add($element.parent('ul').children('li')),
- $prevElement,
- $nextElement;
-
- $elements.each(function(i) {
- if ($(this).is($element)) {
- $prevElement = $elements.eq(i-1);
- $nextElement = $elements.eq(i+1);
- return;
- }
- });
- var nextSibling = function() {
- if (!$element.is(':last-child')) $nextElement.focus();
- }, prevSibling = function() {
- $prevElement.focus();
- }, openSub = function() {
- if ($element.has('ul').length) {
- _this._show($element);
- $element.find('li').first().focus();
- }
- }, closeSub = function() {
- //if ($element.is(':first-child')) {
- $element.parents('li').first().focus();
- _this._hide($element.parents('li').first());
- //}
- };
- var functions = {
- open: openSub,
- close: function() {
- _this._hideAll();
- _this.$menuItems.first().focus(); // focus to first element
- },
- handled: function() {
- e.preventDefault();
- e.stopImmediatePropagation();
- }
- };
-
- if (isTab) {
- if (_this.vertical) { // vertical menu
- if (_this.options.alignment === 'left') { // left aligned
- $.extend(functions, {
- down: nextSibling,
- up: prevSibling,
- next: openSub,
- previous: closeSub,
- });
- } else { // right aligned
- $.extend(functions, {
- down: nextSibling,
- up: prevSibling,
- next: closeSub,
- previous: openSub,
- });
- }
- } else { // horizontal menu
- $.extend(functions, {
- next: nextSibling,
- previous: prevSibling,
- down: openSub,
- up: closeSub,
- });
- }
- } else { // not tabs -> one sub
- if (_this.options.alignment === 'left') { // left aligned
- $.extend(functions, {
- next: openSub,
- previous: closeSub,
- down: nextSibling,
- up: prevSibling
- });
- } else { // right aligned
- $.extend(functions, {
- next: closeSub,
- previous: openSub,
- down: nextSibling,
- up: prevSibling
- });
- }
- }
- Foundation.Keyboard.handleKey(e, _this, functions);
- });
- // end keyboardAccess
- };
- /**
- * Toggles the current dropdown pane.
- * @param {jQuery} $elem - the current element with a submenu to toggle.
- * @function
- * @private
- */
- DropdownMenu.prototype._toggle = function($elem){
- if($elem.hasClass('is-active')){
- this._hide($elem);
- }else{
- this._show($elem);
- }
- };
- /**
- * Adds an event handler to the body to close any dropdowns on a click.
- * @function
- * @private
- */
- DropdownMenu.prototype._addBodyHandler = function(){
- var $body = $('body'),
- _this = this;
- $body.not(_this.$element).on('click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu', function(e){
- _this._hideAll();
- $body.off('click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu');
- });
- };
- //show & hide stuff @private
- /**
- * Opens a dropdown pane, and checks for collisions first.
- * @param {jQuery} $elem - current element with a submenu to show
- * @function
- * @private
- * @fires DropdownMenu#show
- */
- DropdownMenu.prototype._show = function($elem){
- this._hideOthers($elem);
- $elem.focus();
- // console.log('showing some stuff', $elem.find('li:first-child'));
- var $sub = $elem.children('[data-submenu]:first-of-type');
- $elem.addClass('is-active');
- $sub.css('visibility', 'hidden').addClass('js-dropdown-active')
- .attr('aria-hidden', false);
-
-
- //break this into own function
- var clear = Foundation.Box.ImNotTouchingYou($sub, null, true);
- if(!clear){
- if(this.options.alignment === 'left'){
- $elem.removeClass('opens-left').addClass('opens-right');
- }else{
- $elem.removeClass('opens-right').addClass('opens-left');
- }
- this.changed = true;
-
- // still not clear, small screen, add inner class
- clear = Foundation.Box.ImNotTouchingYou($sub, null, true);
- if (!clear) {
- $elem.removeClass('opens-left opens-right').addClass('opens-inner');
- this.changed = true;
- }
- }
- $sub.css('visibility', '');
- /**
- * Fires when the new dropdown pane is visible.
- * @event DropdownMenu#show
- */
- this.$element.trigger('show.zf.dropdownmenu', [$elem]);
- };
- /**
- * Hides a single, currently open dropdown pane.
- * @function
- * @param {jQuery} $elem - element with a submenu to hide
- * @private
- */
- DropdownMenu.prototype._hide = function($elem){
- this._hideSome($elem);
- };
+ AccordionMenu.defaults = {
/**
- * Hides currently open dropdown panes from a jQuery collection passed by other functions.
- * Resets the position classes if the element was mutated due to a collision.
- * @function
- * @param {jQuery} $elems - element(s) with a submenu to hide
- * @private
- * @fires DropdownMenu#hide
+ * Amount of time to animate the opening of a submenu in ms.
+ * @option
+ * @type {number}
+ * @default 250
*/
- DropdownMenu.prototype._hideSome = function($elems){
- if($elems.length){
- // if($elems.hasClass('first-sub')){
- // console.log('true');
- // $elems.blur();
- // }
- $elems.removeClass('is-active opens-inner').data('isClick', false)
-
- .find('.is-active').removeClass('is-active').data('isClick', false).end()
-
- .find('.js-dropdown-active').removeClass('js-dropdown-active')
- .attr('aria-hidden', true);
- $elems.parent('.has-submenu').removeClass('is-active');
- if(this.changed){
- //remove position class
- if(this.options.alignment === 'left'){
- $elems.find('.opens-left').removeClass('opens-left').addClass('opens-right');
- }else{
- $elems.find('.opens-right').removeClass('opens-right').addClass('opens-left');
- }
- }
- /**
- * Fires when the open menus are closed.
- * @event DropdownMenu#hide
- */
- this.$element.trigger('hide.zf.dropdownmenu');
- }
- };
+ slideSpeed: 250,
/**
- * Hides a submenu's siblings.
- * @param {jQuery} $elem - the element that should remain open.
- * @function
- * @private
+ * Adds a separate submenu toggle button. This allows the parent item to have a link.
+ * @option
+ * @example true
*/
- DropdownMenu.prototype._hideOthers = function($elem){
- this._hideSome($elem.siblings('.has-submenu.is-active'));
- };
+ submenuToggle: false,
/**
- * Hides everything.
- * @function
+ * The text used for the submenu toggle if enabled. This is used for screen readers only.
+ * @option
+ * @example true
*/
- DropdownMenu.prototype._hideAll = function(){
- this._hideSome(this.$element);
- };
+ submenuToggleText: 'Toggle menu',
/**
- * Destroys the plugin.
- * @function
+ * Allow the menu to have multiple open panes.
+ * @option
+ * @type {boolean}
+ * @default true
*/
- DropdownMenu.prototype.destroy = function() {
- this._hideAll();
- this.$element
- .removeData('zf-plugin')
- .find('li')
- .removeClass('js-dropdown-nohover is-right-arrow is-left-arrow opens-left opens-inner opens-right')
- .add('a').off('.zf.dropdownmenu')
- .end().find('ul').removeClass('first-sub');
- Foundation.Nest.Burn(this.$element, 'dropdown');
- Foundation.unregisterPlugin(this);
- };
-
- Foundation.plugin(DropdownMenu, 'DropdownMenu');
-
- var checkClass = function($elem){
- return $elem.hasClass('is-active');
- };
-
- }(Foundation, jQuery);
-
- !function(Foundation, $) {
- 'use strict';
+ multiOpen: true
+ };
- /**
- * Creates a new instance of Equalizer.
- * @class
- * @fires Equalizer#init
- * @param {Object} element - jQuery object to add the trigger to.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function Equalizer(element, options) {
- this.$element = element;
- this.options = $.extend({}, Equalizer.defaults, this.$element.data(), options);
- this.$window = $(window);
- this.name = 'equalizer';
- this.attr = 'data-equalizer';
- this._init();
- this._events();
- Foundation.registerPlugin(this);
- }
+ /***/ }),
+ /* 13 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- /**
- * Default settings for plugin
- */
- Equalizer.defaults = {
- /**
- * Enable height equalization when stacked on smaller screens.
- * @option
- * @example true
- */
- equalizeOnStack: true,
- /**
- * Amount of time, in ms, to debounce the size checking/equalization. Lower times mean smoother transitions/less performance on mobile.
- * @option
- * @example 50
- */
- throttleInterval: 50
- };
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Drilldown; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__ = __webpack_require__(3);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_nest__ = __webpack_require__(9);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_util_box__ = __webpack_require__(7);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__foundation_plugin__ = __webpack_require__(2);
- /**
- * Initializes the Equalizer plugin and calls functions to get equalizer functioning on load.
- * @private
- */
- Equalizer.prototype._init = function() {
- this._reflow();
- };
- /**
- * Initializes events for Equalizer.
- * @private
- */
- Equalizer.prototype._events = function() {
- var self = this;
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
- this.$window
- .off('.equalizer')
- .on('resize.fndtn.equalizer', Foundation.util.throttle(function () {
- self._reflow();
- }, self.options.throttleInterval));
- };
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- /**
- * A noop version for the plugin
- * @private
- */
- Equalizer.prototype._killswitch = function() {
- return;
- };
- /**
- * Calls necessary functions to update Equalizer upon DOM change
- * @private
- */
- Equalizer.prototype._reflow = function() {
- var self = this;
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
- $('[' + this.attr + ']').each(function() {
- var $eqParent = $(this),
- adjustedHeights = [],
- $images = $eqParent.find('img');
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
- if ($images.length) {
- Foundation.onImagesLoaded($images, function() {
- adjustedHeights = self.getHeights($eqParent);
- self.applyHeight($eqParent, adjustedHeights);
- });
- }
- else {
- adjustedHeights = self.getHeights($eqParent);
- self.applyHeight($eqParent, adjustedHeights);
- }
- });
- };
- /**
- * Finds the outer heights of children contained within an Equalizer parent and returns them in an array
- * @param {Object} $eqParent A jQuery instance of an Equalizer container
- * @returns {Array} heights An array of heights of children within Equalizer container
- */
- Equalizer.prototype.getHeights = function($eqParent) {
- var eqGroupName = $eqParent.data('equalizer'),
- eqGroup = eqGroupName ? $eqParent.find('[' + this.attr + '-watch="' + eqGroupName + '"]:visible') : $eqParent.find('[' + this.attr + '-watch]:visible'),
- heights;
- eqGroup.height('inherit');
- heights = eqGroup.map(function () { return $(this).outerHeight(false);}).get();
- console.log(heights);
- return heights;
- };
- /**
- * Changes the CSS height property of each child in an Equalizer parent to match the tallest
- * @param {Object} $eqParent - A jQuery instance of an Equalizer container
- * @param {array} heights - An array of heights of children within Equalizer container
- * @fires Equalizer#preEqualized
- * @fires Equalizer#postEqualized
- */
- Equalizer.prototype.applyHeight = function($eqParent, heights) {
- var eqGroupName = $eqParent.data('equalizer'),
- eqGroup = eqGroupName ? $eqParent.find('['+this.attr+'-watch="'+eqGroupName+'"]:visible') : $eqParent.find('['+this.attr+'-watch]:visible'),
- max = Math.max.apply(null, heights);
- /**
- * Fires before the heights are applied
- * @event Equalizer#preEqualized
- */
- $eqParent.trigger('preEqualized.zf.Equalizer');
- // for now, apply the max height found in the array
- for (var i = 0; i < eqGroup.length; i++) {
- $(eqGroup[i]).css('height', max);
- }
- // console.log(max);
- /**
- * Fires when the heights have been applied
- * @event Equalizer#postEqualized
- */
- $eqParent.trigger('postEqualized.zf.Equalizer');
- };
- /**
- * Destroys an instance of Equalizer.
- * @function
- */
- Equalizer.prototype.destroy = function(){
- //TODO this.
- };
- Foundation.plugin(Equalizer, 'Equalizer');
- // Exports for AMD/Browserify
- if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
- module.exports = Equalizer;
- if (typeof define === 'function')
- define(['foundation'], function() {
- return Equalizer;
- });
- }(Foundation, jQuery);
/**
- * Interchange module.
- * @module foundation.interchange
- * @requires foundation.util.mediaQuery
- * @requires foundation.util.timerAndImageLoader
+ * Drilldown module.
+ * @module foundation.drilldown
+ * @requires foundation.util.keyboard
+ * @requires foundation.util.nest
+ * @requires foundation.util.box
*/
- !function(Foundation, $) {
- 'use strict';
- /**
- * Creates a new instance of Interchange.
- * @class
- * @fires Interchange#init
- * @param {Object} element - jQuery object to add the trigger to.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function Interchange(element, options) {
- this.$element = element;
- this.options = $.extend({}, Interchange.defaults, options);
- this.rules = [];
- this.currentPath = '';
+ var Drilldown = function (_Plugin) {
+ _inherits(Drilldown, _Plugin);
- this._init();
- this._events();
+ function Drilldown() {
+ _classCallCheck(this, Drilldown);
- Foundation.registerPlugin(this);
+ return _possibleConstructorReturn(this, (Drilldown.__proto__ || Object.getPrototypeOf(Drilldown)).apply(this, arguments));
}
- /**
- * Default settings for plugin
- */
- Interchange.defaults = {
+ _createClass(Drilldown, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of a drilldown menu.
+ * @class
+ * @name Drilldown
+ * @param {jQuery} element - jQuery object to make into an accordion menu.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Drilldown.defaults, this.$element.data(), options);
+ this.className = 'Drilldown'; // ie9 back compat
+
+ this._init();
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].register('Drilldown', {
+ 'ENTER': 'open',
+ 'SPACE': 'open',
+ 'ARROW_RIGHT': 'next',
+ 'ARROW_UP': 'up',
+ 'ARROW_DOWN': 'down',
+ 'ARROW_LEFT': 'previous',
+ 'ESCAPE': 'close',
+ 'TAB': 'down',
+ 'SHIFT_TAB': 'up'
+ });
+ }
+
/**
- * Rules to be applied to Interchange elements. Set with the `data-interchange` array notation.
- * @option
+ * Initializes the drilldown by creating jQuery collections of elements
+ * @private
*/
- rules: null
- };
- Interchange.SPECIAL_QUERIES = {
- 'landscape': 'screen and (orientation: landscape)',
- 'portrait': 'screen and (orientation: portrait)',
- 'retina': 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'
- };
-
- /**
- * Initializes the Interchange plugin and calls functions to get interchange functioning on load.
- * @function
- * @private
- */
- Interchange.prototype._init = function() {
- this._addBreakpoints();
- this._generateRules();
- this._reflow();
- };
+ }, {
+ key: '_init',
+ value: function _init() {
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_nest__["a" /* Nest */].Feather(this.$element, 'drilldown');
- /**
- * Initializes events for Interchange.
- * @function
- * @private
- */
- Interchange.prototype._events = function() {
- $(window).on('resize.fndtn.interchange', Foundation.util.throttle(this._reflow.bind(this), 50));
- };
+ if (this.options.autoApplyClass) {
+ this.$element.addClass('drilldown');
+ }
- /**
- * Calls necessary functions to update Interchange upon DOM change
- * @function
- * @private
- */
- Interchange.prototype._reflow = function() {
- var match;
+ this.$element.attr({
+ 'role': 'tree',
+ 'aria-multiselectable': false
+ });
+ this.$submenuAnchors = this.$element.find('li.is-drilldown-submenu-parent').children('a');
+ this.$submenus = this.$submenuAnchors.parent('li').children('[data-submenu]').attr('role', 'group');
+ this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'treeitem').find('a');
+ this.$element.attr('data-mutate', this.$element.attr('data-drilldown') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["b" /* GetYoDigits */])(6, 'drilldown'));
- // Iterate through each rule, but only save the last match
- for (var i in this.rules) {
- var rule = this.rules[i];
+ this._prepareMenu();
+ this._registerEvents();
- if (window.matchMedia(rule.query).matches) {
- match = rule;
- }
+ this._keyboardEvents();
}
- if (match) {
- this.replace(match.path);
- }
- };
+ /**
+ * prepares drilldown menu by setting attributes to links and elements
+ * sets a min height to prevent content jumping
+ * wraps the element if not already wrapped
+ * @private
+ * @function
+ */
- /**
- * Gets the Foundation breakpoints and adds them to the Interchange.SPECIAL_QUERIES object.
- * @function
- * @private
- */
- Interchange.prototype._addBreakpoints = function() {
- for (var i in Foundation.MediaQuery.queries) {
- var query = Foundation.MediaQuery.queries[i];
- Interchange.SPECIAL_QUERIES[query.name] = query.value;
- }
- };
+ }, {
+ key: '_prepareMenu',
+ value: function _prepareMenu() {
+ var _this = this;
+ // if(!this.options.holdOpen){
+ // this._menuLinkEvents();
+ // }
+ this.$submenuAnchors.each(function () {
+ var $link = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this);
+ var $sub = $link.parent();
+ if (_this.options.parentLink) {
+ $link.clone().prependTo($sub.children('[data-submenu]')).wrap('<li class="is-submenu-parent-item is-submenu-item is-drilldown-submenu-item" role="menuitem"></li>');
+ }
+ $link.data('savedHref', $link.attr('href')).removeAttr('href').attr('tabindex', 0);
+ $link.children('[data-submenu]').attr({
+ 'aria-hidden': true,
+ 'tabindex': 0,
+ 'role': 'group'
+ });
+ _this._events($link);
+ });
+ this.$submenus.each(function () {
+ var $menu = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ $back = $menu.find('.js-drilldown-back');
+ if (!$back.length) {
+ switch (_this.options.backButtonPosition) {
+ case "bottom":
+ $menu.append(_this.options.backButton);
+ break;
+ case "top":
+ $menu.prepend(_this.options.backButton);
+ break;
+ default:
+ console.error("Unsupported backButtonPosition value '" + _this.options.backButtonPosition + "'");
+ }
+ }
+ _this._back($menu);
+ });
- /**
- * Checks the Interchange element for the provided media query + content pairings
- * @function
- * @private
- * @param {Object} element - jQuery object that is an Interchange instance
- * @returns {Array} scenarios - Array of objects that have 'mq' and 'path' keys with corresponding keys
- */
- Interchange.prototype._generateRules = function() {
- var rulesList = [];
- var rules;
+ this.$submenus.addClass('invisible');
+ if (!this.options.autoHeight) {
+ this.$submenus.addClass('drilldown-submenu-cover-previous');
+ }
- if (this.options.rules) {
- rules = this.options.rules;
+ // create a wrapper on element if it doesn't exist.
+ if (!this.$element.parent().hasClass('is-drilldown')) {
+ this.$wrapper = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this.options.wrapper).addClass('is-drilldown');
+ if (this.options.animateHeight) this.$wrapper.addClass('animate-height');
+ this.$element.wrap(this.$wrapper);
+ }
+ // set wrapper
+ this.$wrapper = this.$element.parent();
+ this.$wrapper.css(this._getMaxDims());
}
- else {
- rules = this.$element.data('interchange').match(/\[.*?\]/g);
+ }, {
+ key: '_resize',
+ value: function _resize() {
+ this.$wrapper.css({ 'max-width': 'none', 'min-height': 'none' });
+ // _getMaxDims has side effects (boo) but calling it should update all other necessary heights & widths
+ this.$wrapper.css(this._getMaxDims());
}
- for (var i in rules) {
- var rule = rules[i].slice(1, -1).split(', ');
- var path = rule.slice(0, -1).join('');
- var query = rule[rule.length - 1];
-
- if (Interchange.SPECIAL_QUERIES[query]) {
- query = Interchange.SPECIAL_QUERIES[query];
- }
-
- rulesList.push({
- path: path,
- query: query
- });
- }
+ /**
+ * Adds event handlers to elements in the menu.
+ * @function
+ * @private
+ * @param {jQuery} $elem - the current menu item to add handlers to.
+ */
- this.rules = rulesList;
- };
+ }, {
+ key: '_events',
+ value: function _events($elem) {
+ var _this = this;
- /**
- * Update the `src` property of an image, or change the HTML of a container, to the specified path.
- * @function
- * @param {String} path - Path to the image or HTML partial.
- * @fires Interchange#replaced
- */
- Interchange.prototype.replace = function(path) {
- if (this.currentPath === path) return;
+ $elem.off('click.zf.drilldown').on('click.zf.drilldown', function (e) {
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(e.target).parentsUntil('ul', 'li').hasClass('is-drilldown-submenu-parent')) {
+ e.stopImmediatePropagation();
+ e.preventDefault();
+ }
- var _this = this;
+ // if(e.target !== e.currentTarget.firstElementChild){
+ // return false;
+ // }
+ _this._show($elem.parent('li'));
- // Replacing images
- if (this.$element[0].nodeName === 'IMG') {
- this.$element.attr('src', path).load(function() {
- _this.$element.trigger('replaced.zf.interchange');
- _this.currentPath = path;
+ if (_this.options.closeOnClick) {
+ var $body = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('body');
+ $body.off('.zf.drilldown').on('click.zf.drilldown', function (e) {
+ if (e.target === _this.$element[0] || __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.contains(_this.$element[0], e.target)) {
+ return;
+ }
+ e.preventDefault();
+ _this._hideAll();
+ $body.off('.zf.drilldown');
+ });
+ }
});
}
- // Replacing background images
- else if (path.match(/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i)) {
- this.$element.css({ 'background-image': 'url('+path+')' });
+
+ /**
+ * Adds event handlers to the menu element.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_registerEvents',
+ value: function _registerEvents() {
+ if (this.options.scrollTop) {
+ this._bindHandler = this._scrollTop.bind(this);
+ this.$element.on('open.zf.drilldown hide.zf.drilldown closed.zf.drilldown', this._bindHandler);
+ }
+ this.$element.on('mutateme.zf.trigger', this._resize.bind(this));
}
- // Replacing HTML
- else {
- $.get(path, function(response) {
- _this.$element.html(response);
- _this.$element.trigger('replaced.zf.interchange');
- _this.currentPath = path;
+
+ /**
+ * Scroll to Top of Element or data-scroll-top-element
+ * @function
+ * @fires Drilldown#scrollme
+ */
+
+ }, {
+ key: '_scrollTop',
+ value: function _scrollTop() {
+ var _this = this;
+ var $scrollTopElement = _this.options.scrollTopElement != '' ? __WEBPACK_IMPORTED_MODULE_0_jquery___default()(_this.options.scrollTopElement) : _this.$element,
+ scrollPos = parseInt($scrollTopElement.offset().top + _this.options.scrollTopOffset, 10);
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('html, body').stop(true).animate({ scrollTop: scrollPos }, _this.options.animationDuration, _this.options.animationEasing, function () {
+ /**
+ * Fires after the menu has scrolled
+ * @event Drilldown#scrollme
+ */
+ if (this === __WEBPACK_IMPORTED_MODULE_0_jquery___default()('html')[0]) _this.$element.trigger('scrollme.zf.drilldown');
});
}
- };
- /**
- * Destroys an instance of interchange.
- * @function
- */
- Interchange.prototype.destroy = function(){
- //TODO this.
- };
- Foundation.plugin(Interchange, 'Interchange');
-
- // Exports for AMD/Browserify
- if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
- module.exports = Interchange;
- if (typeof define === 'function')
- define(['foundation'], function() {
- return Interchange;
- });
- }(Foundation, jQuery);
-
- /**
- * Magellan module.
- * @module foundation.magellan
- */
- !function(Foundation, $) {
- 'use strict';
+ /**
+ * Adds keydown event listener to `li`'s in the menu.
+ * @private
+ */
- /**
- * Creates a new instance of Magellan.
- * @class
- * @fires Magellan#init
- * @param {Object} element - jQuery object to add the trigger to.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function Magellan(element, options) {
- this.$element = element;
- this.options = $.extend({}, Magellan.defaults, options);
+ }, {
+ key: '_keyboardEvents',
+ value: function _keyboardEvents() {
+ var _this = this;
- this._init();
+ this.$menuItems.add(this.$element.find('.js-drilldown-back > a, .is-submenu-parent-item > a')).on('keydown.zf.drilldown', function (e) {
+ var $element = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ $elements = $element.parent('li').parent('ul').children('li').children('a'),
+ $prevElement,
+ $nextElement;
+
+ $elements.each(function (i) {
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).is($element)) {
+ $prevElement = $elements.eq(Math.max(0, i - 1));
+ $nextElement = $elements.eq(Math.min(i + 1, $elements.length - 1));
+ return;
+ }
+ });
- Foundation.registerPlugin(this);
- }
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].handleKey(e, 'Drilldown', {
+ next: function () {
+ if ($element.is(_this.$submenuAnchors)) {
+ _this._show($element.parent('li'));
+ $element.parent('li').one(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["c" /* transitionend */])($element), function () {
+ $element.parent('li').find('ul li a').filter(_this.$menuItems).first().focus();
+ });
+ return true;
+ }
+ },
+ previous: function () {
+ _this._hide($element.parent('li').parent('ul'));
+ $element.parent('li').parent('ul').one(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["c" /* transitionend */])($element), function () {
+ setTimeout(function () {
+ $element.parent('li').parent('ul').parent('li').children('a').first().focus();
+ }, 1);
+ });
+ return true;
+ },
+ up: function () {
+ $prevElement.focus();
+ // Don't tap focus on first element in root ul
+ return !$element.is(_this.$element.find('> li:first-child > a'));
+ },
+ down: function () {
+ $nextElement.focus();
+ // Don't tap focus on last element in root ul
+ return !$element.is(_this.$element.find('> li:last-child > a'));
+ },
+ close: function () {
+ // Don't close on element in root ul
+ if (!$element.is(_this.$element.find('> li > a'))) {
+ _this._hide($element.parent().parent());
+ $element.parent().parent().siblings('a').focus();
+ }
+ },
+ open: function () {
+ if (!$element.is(_this.$menuItems)) {
+ // not menu item means back button
+ _this._hide($element.parent('li').parent('ul'));
+ $element.parent('li').parent('ul').one(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["c" /* transitionend */])($element), function () {
+ setTimeout(function () {
+ $element.parent('li').parent('ul').parent('li').children('a').first().focus();
+ }, 1);
+ });
+ return true;
+ } else if ($element.is(_this.$submenuAnchors)) {
+ _this._show($element.parent('li'));
+ $element.parent('li').one(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["c" /* transitionend */])($element), function () {
+ $element.parent('li').find('ul li a').filter(_this.$menuItems).first().focus();
+ });
+ return true;
+ }
+ },
+ handled: function (preventDefault) {
+ if (preventDefault) {
+ e.preventDefault();
+ }
+ e.stopImmediatePropagation();
+ }
+ });
+ }); // end keyboardAccess
+ }
- /**
- * Default settings for plugin
- */
- Magellan.defaults = {
- /**
- * Amount of time, in ms, the animated scrolling should take between locations.
- * @option
- * @example 500
- */
- animationDuration: 500,
- /**
- * Animation style to use when scrolling between locations.
- * @option
- * @example 'ease-in-out'
- */
- animationEasing: 'linear',
- /**
- * Number of pixels to use as a marker for location changes.
- * @option
- * @example 50
- */
- threshold: 50,
/**
- * Class applied to the active locations link on the magellan container.
- * @option
- * @example 'active'
+ * Closes all open elements, and returns to root menu.
+ * @function
+ * @fires Drilldown#closed
*/
- activeClass: 'active',
+
+ }, {
+ key: '_hideAll',
+ value: function _hideAll() {
+ var $elem = this.$element.find('.is-drilldown-submenu.is-active').addClass('is-closing');
+ if (this.options.autoHeight) this.$wrapper.css({ height: $elem.parent().closest('ul').data('calcHeight') });
+ $elem.one(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["c" /* transitionend */])($elem), function (e) {
+ $elem.removeClass('is-active is-closing');
+ });
+ /**
+ * Fires when the menu is fully closed.
+ * @event Drilldown#closed
+ */
+ this.$element.trigger('closed.zf.drilldown');
+ }
+
/**
- * Allows the script to manipulate the url of the current page, and if supported, alter the history.
- * @option
- * @example true
+ * Adds event listener for each `back` button, and closes open menus.
+ * @function
+ * @fires Drilldown#back
+ * @param {jQuery} $elem - the current sub-menu to add `back` event.
*/
- deepLinking: false
- };
-
- /**
- * Initializes the Magellan plugin and calls functions to get equalizer functioning on load.
- * @private
- */
- Magellan.prototype._init = function() {
- var id = this.$element[0].id || Foundation.GetYoDigits(6, 'magellan'),
- _this = this;
- this.$targets = $('[data-magellan-target]');
- this.$links = this.$element.find('a');
- this.$element.attr({
- 'data-resize': id,
- 'data-scroll': id,
- 'id': id
- });
- this.$active = $();
- this.scrollPos = parseInt(window.pageYOffset, 10);
- this._events();
- };
- /**
- * Calculates an array of pixel values that are the demarcation lines between locations on the page.
- * Can be invoked if new elements are added or the size of a location changes.
- * @function
- */
- Magellan.prototype.calcPoints = function(){
- var _this = this,
- body = document.body,
- html = document.documentElement;
+ }, {
+ key: '_back',
+ value: function _back($elem) {
+ var _this = this;
+ $elem.off('click.zf.drilldown');
+ $elem.children('.js-drilldown-back').on('click.zf.drilldown', function (e) {
+ e.stopImmediatePropagation();
+ // console.log('mouseup on back');
+ _this._hide($elem);
- this.points = [];
- this.winHeight = Math.round(Math.max(window.innerHeight, document.body.clientHeight));
- this.docHeight = Math.round(Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight));
+ // If there is a parent submenu, call show
+ var parentSubMenu = $elem.parent('li').parent('ul').parent('li');
+ if (parentSubMenu.length) {
+ _this._show(parentSubMenu);
+ }
+ });
+ }
- this.$targets.each(function(){
- var $tar = $(this),
- pt = Math.round($tar.offset().top - _this.options.threshold);
- $tar.targetPoint = pt;
- _this.points.push(pt);
- });
- };
- /**
- * Initializes events for Magellan.
- * @private
- */
- Magellan.prototype._events = function() {
- var _this = this,
- $body = $('html, body'),
- opts = {
- duration: _this.options.animationDuration,
- easing: _this.options.animationEasing
- };
+ /**
+ * Adds event listener to menu items w/o submenus to close open menus on click.
+ * @function
+ * @private
+ */
- $(window).one('load', function(){
- _this.calcPoints();
- _this._updateActive();
- });
+ }, {
+ key: '_menuLinkEvents',
+ value: function _menuLinkEvents() {
+ var _this = this;
+ this.$menuItems.not('.is-drilldown-submenu-parent').off('click.zf.drilldown').on('click.zf.drilldown', function (e) {
+ // e.stopImmediatePropagation();
+ setTimeout(function () {
+ _this._hideAll();
+ }, 0);
+ });
+ }
- this.$element.on({
- 'resizeme.zf.trigger': this.reflow.bind(this),
- 'scrollme.zf.trigger': this._updateActive.bind(this)
- }).on('click.zf.magellan', 'a[href^="#"]', function(e) {
- e.preventDefault();
- var arrival = this.getAttribute('href'),
- scrollPos = $(arrival).offset().top - _this.options.threshold / 2;
-
- // requestAnimationFrame is disabled for this plugin currently
- // Foundation.Move(_this.options.animationDuration, $body, function(){
- $body.stop(true).animate({
- scrollTop: scrollPos
- }, opts);
- });
- // });
- };
- /**
- * Calls necessary functions to update Magellan upon DOM change
- * @function
- */
- Magellan.prototype.reflow = function(){
- this.calcPoints();
- this._updateActive();
- };
- /**
- * Updates the visibility of an active location link, and updates the url hash for the page, if deepLinking enabled.
- * @private
- * @function
- * @fires Magellan#update
- */
- Magellan.prototype._updateActive = function(/*evt, elem, scrollPos*/){
- var winPos = /*scrollPos ||*/ parseInt(window.pageYOffset, 10),
- curIdx;
+ /**
+ * Opens a submenu.
+ * @function
+ * @fires Drilldown#open
+ * @param {jQuery} $elem - the current element with a submenu to open, i.e. the `li` tag.
+ */
- if(winPos + this.winHeight === this.docHeight){ curIdx = this.points.length - 1; }
- else if(winPos < this.points[0]){ curIdx = 0; }
- else{
- var isDown = this.scrollPos < winPos,
- _this = this,
- curVisible = this.points.filter(function(p, i){
- return isDown ? p <= winPos : p - _this.options.threshold <= winPos;//&& winPos >= _this.points[i -1] - _this.options.threshold;
- });
- curIdx = curVisible.length ? curVisible.length - 1 : 0;
+ }, {
+ key: '_show',
+ value: function _show($elem) {
+ if (this.options.autoHeight) this.$wrapper.css({ height: $elem.children('[data-submenu]').data('calcHeight') });
+ $elem.attr('aria-expanded', true);
+ $elem.children('[data-submenu]').addClass('is-active').removeClass('invisible').attr('aria-hidden', false);
+ /**
+ * Fires when the submenu has opened.
+ * @event Drilldown#open
+ */
+ this.$element.trigger('open.zf.drilldown', [$elem]);
}
+ }, {
+ key: '_hide',
- this.$active.removeClass(this.options.activeClass);
- this.$active = this.$links.eq(curIdx).addClass(this.options.activeClass);
- if(this.options.deepLinking){
- var hash = this.$active[0].getAttribute('href');
- if(window.history.pushState){
- window.history.pushState(null, null, hash);
- }else{
- window.location.hash = hash;
- }
+ /**
+ * Hides a submenu
+ * @function
+ * @fires Drilldown#hide
+ * @param {jQuery} $elem - the current sub-menu to hide, i.e. the `ul` tag.
+ */
+ value: function _hide($elem) {
+ if (this.options.autoHeight) this.$wrapper.css({ height: $elem.parent().closest('ul').data('calcHeight') });
+ var _this = this;
+ $elem.parent('li').attr('aria-expanded', false);
+ $elem.attr('aria-hidden', true).addClass('is-closing');
+ $elem.addClass('is-closing').one(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["c" /* transitionend */])($elem), function () {
+ $elem.removeClass('is-active is-closing');
+ $elem.blur().addClass('invisible');
+ });
+ /**
+ * Fires when the submenu has closed.
+ * @event Drilldown#hide
+ */
+ $elem.trigger('hide.zf.drilldown', [$elem]);
}
- this.scrollPos = winPos;
/**
- * Fires when magellan is finished updating to the new active element.
- * @event Magellan#update
+ * Iterates through the nested menus to calculate the min-height, and max-width for the menu.
+ * Prevents content jumping.
+ * @function
+ * @private
*/
- this.$element.trigger('update.zf.magellan', [this.$active]);
- };
- /**
- * Destroys an instance of Magellan and resets the url of the window.
- * @function
- */
- Magellan.prototype.destroy = function(){
- this.$element.off('.zf.trigger .zf.magellan')
- .find('.' + this.options.activeClass).removeClass(this.options.activeClass);
- var hash = this.$active[0].getAttribute('href');
+ }, {
+ key: '_getMaxDims',
+ value: function _getMaxDims() {
+ var maxHeight = 0,
+ result = {},
+ _this = this;
+ this.$submenus.add(this.$element).each(function () {
+ var numOfElems = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).children('li').length;
+ var height = __WEBPACK_IMPORTED_MODULE_4__foundation_util_box__["a" /* Box */].GetDimensions(this).height;
+ maxHeight = height > maxHeight ? height : maxHeight;
+ if (_this.options.autoHeight) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).data('calcHeight', height);
+ if (!__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).hasClass('is-drilldown-submenu')) result['height'] = height;
+ }
+ });
- window.location.hash.replace(hash, '');
+ if (!this.options.autoHeight) result['min-height'] = maxHeight + 'px';
- Foundation.unregisterPlugin(this);
- };
- Foundation.plugin(Magellan, 'Magellan');
-
- // Exports for AMD/Browserify
- if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
- module.exports = Magellan;
- if (typeof define === 'function')
- define(['foundation'], function() {
- return Magellan;
- });
+ result['max-width'] = this.$element[0].getBoundingClientRect().width + 'px';
- }(Foundation, jQuery);
+ return result;
+ }
- /**
- * OffCanvas module.
- * @module foundation.offcanvas
- * @requires foundation.util.triggers
- * @requires foundation.util.motion
- */
- !function($, Foundation) {
+ /**
+ * Destroys the Drilldown Menu
+ * @function
+ */
- 'use strict';
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ if (this.options.scrollTop) this.$element.off('.zf.drilldown', this._bindHandler);
+ this._hideAll();
+ this.$element.off('mutateme.zf.trigger');
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_nest__["a" /* Nest */].Burn(this.$element, 'drilldown');
+ this.$element.unwrap().find('.js-drilldown-back, .is-submenu-parent-item').remove().end().find('.is-active, .is-closing, .is-drilldown-submenu').removeClass('is-active is-closing is-drilldown-submenu').end().find('[data-submenu]').removeAttr('aria-hidden tabindex role');
+ this.$submenuAnchors.each(function () {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).off('.zf.drilldown');
+ });
- /**
- * Creates a new instance of an off-canvas wrapper.
- * @class
- * @fires OffCanvas#init
- * @param {Object} element - jQuery object to initialize.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function OffCanvas(element, options) {
- this.$element = element;
- this.options = $.extend({}, OffCanvas.defaults, this.$element.data(), options);
- this.$lastTrigger = $();
+ this.$submenus.removeClass('drilldown-submenu-cover-previous invisible');
- this._init();
- this._events();
+ this.$element.find('a').each(function () {
+ var $link = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this);
+ $link.removeAttr('tabindex');
+ if ($link.data('savedHref')) {
+ $link.attr('href', $link.data('savedHref')).removeData('savedHref');
+ } else {
+ return;
+ }
+ });
+ }
+ }]);
- Foundation.registerPlugin(this);
- }
+ return Drilldown;
+ }(__WEBPACK_IMPORTED_MODULE_5__foundation_plugin__["a" /* Plugin */]);
- OffCanvas.defaults = {
+ Drilldown.defaults = {
/**
- * Allow the user to click outside of the menu to close it.
+ * Drilldowns depend on styles in order to function properly; in the default build of Foundation these are
+ * on the `drilldown` class. This option auto-applies this class to the drilldown upon initialization.
* @option
- * @example true
+ * @type {boolian}
+ * @default true
*/
- closeOnClick: true,
+ autoApplyClass: true,
/**
- * Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
+ * Markup used for JS generated back button. Prepended or appended (see backButtonPosition) to submenu lists and deleted on `destroy` method, 'js-drilldown-back' class required. Remove the backslash (`\`) if copy and pasting.
* @option
- * @example 500
+ * @type {string}
+ * @default '<li class="js-drilldown-back"><a tabindex="0">Back</a></li>'
*/
- transitionTime: 0,
+ backButton: '<li class="js-drilldown-back"><a tabindex="0">Back</a></li>',
/**
- * Direction the offcanvas opens from. Determines class applied to body.
+ * Position the back button either at the top or bottom of drilldown submenus. Can be `'left'` or `'bottom'`.
* @option
- * @example left
+ * @type {string}
+ * @default top
*/
- position: 'left',
+ backButtonPosition: 'top',
/**
- * Force the page to scroll to top on open.
+ * Markup used to wrap drilldown menu. Use a class name for independent styling; the JS applied class: `is-drilldown` is required. Remove the backslash (`\`) if copy and pasting.
+ * @option
+ * @type {string}
+ * @default '<div></div>'
*/
- forceTop: true,
+ wrapper: '<div></div>',
/**
- * Allow the offcanvas to be sticky while open. Does nothing if Sass option `$maincontent-prevent-scroll === true`.
- * Performance in Safari OSX/iOS is not great.
+ * Adds the parent link to the submenu.
+ * @option
+ * @type {boolean}
+ * @default false
*/
- // isSticky: false,
+ parentLink: false,
/**
- * Allow the offcanvas to remain open for certain breakpoints. Can be used with `isSticky`.
+ * Allow the menu to return to root list on body click.
* @option
- * @example false
+ * @type {boolean}
+ * @default false
*/
- isRevealed: false,
+ closeOnClick: false,
/**
- * Breakpoint at which to reveal. JS will use a RegExp to target standard classes, if changing classnames, pass your class @`revealClass`.
+ * Allow the menu to auto adjust height.
* @option
- * @example reveal-for-large
+ * @type {boolean}
+ * @default false
*/
- revealOn: null,
+ autoHeight: false,
/**
- * Force focus to the offcanvas on open. If true, will focus the opening trigger on close.
+ * Animate the auto adjust height.
* @option
- * @example true
+ * @type {boolean}
+ * @default false
*/
- autoFocus: true,
+ animateHeight: false,
/**
- * Class used to force an offcanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.
+ * Scroll to the top of the menu after opening a submenu or navigating back using the menu back button
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ scrollTop: false,
+ /**
+ * String jquery selector (for example 'body') of element to take offset().top from, if empty string the drilldown menu offset().top is taken
+ * @option
+ * @type {string}
+ * @default ''
+ */
+ scrollTopElement: '',
+ /**
+ * ScrollTop offset
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ scrollTopOffset: 0,
+ /**
+ * Scroll animation duration
+ * @option
+ * @type {number}
+ * @default 500
+ */
+ animationDuration: 500,
+ /**
+ * Scroll animation easing. Can be `'swing'` or `'linear'`.
* @option
- * TODO improve the regex testing for this.
- * @example reveal-for-large
+ * @type {string}
+ * @see {@link https://api.jquery.com/animate|JQuery animate}
+ * @default 'swing'
*/
- revealClass: 'reveal-for-'
+ animationEasing: 'swing'
+ // holdOpen: false
};
- /**
- * Initializes the off-canvas wrapper by adding the exit overlay (if needed).
- * @function
- * @private
- */
- OffCanvas.prototype._init = function() {
- var id = this.$element.attr('id');
- this.$element.attr('aria-hidden', 'true');
- // Find triggers that affect this element and add aria-expanded to them
- $(document)
- .find('[data-open="'+id+'"], [data-close="'+id+'"], [data-toggle="'+id+'"]')
- .attr('aria-expanded', 'false')
- .attr('aria-controls', id);
+ /***/ }),
+ /* 14 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- // Add a close trigger over the body if necessary
- if (this.options.closeOnClick){
- if($('.js-off-canvas-exit').length){
- this.$exiter = $('.js-off-canvas-exit');
- }else{
- var exiter = document.createElement('div');
- exiter.setAttribute('class', 'js-off-canvas-exit');
- $('[data-off-canvas-content]').append(exiter);
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return DropdownMenu; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__ = __webpack_require__(3);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_nest__ = __webpack_require__(9);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_box__ = __webpack_require__(7);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__foundation_plugin__ = __webpack_require__(2);
- this.$exiter = $(exiter);
- }
- }
- this.options.isRevealed = this.options.isRevealed || new RegExp(this.options.revealClass, 'g').test(this.$element[0].className);
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
- if(this.options.isRevealed){
- this.options.revealOn = this.options.revealOn || this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split('-')[2];
- this._setMQChecker();
- }
- if(!this.options.transitionTime){
- this.options.transitionTime = parseFloat(window.getComputedStyle($('[data-off-canvas-wrapper]')[0]).transitionDuration) * 1000;
- }
- };
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- /**
- * Adds event handlers to the off-canvas wrapper and the exit overlay.
- * @function
- * @private
- */
- OffCanvas.prototype._events = function() {
- this.$element.on({
- 'open.zf.trigger': this.open.bind(this),
- 'close.zf.trigger': this.close.bind(this),
- 'toggle.zf.trigger': this.toggle.bind(this),
- 'keydown.zf.offcanvas': this._handleKeyboard.bind(this)
- });
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
- if (this.$exiter.length) {
- var _this = this;
- this.$exiter.on({'click.zf.offcanvas': this.close.bind(this)});
- }
- };
- /**
- * Applies event listener for elements that will reveal at certain breakpoints.
- * @private
- */
- OffCanvas.prototype._setMQChecker = function(){
- var _this = this;
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
- $(window).on('changed.zf.mediaquery', function(){
- if(Foundation.MediaQuery.atLeast(_this.options.revealOn)){
- _this.reveal(true);
- }else{
- _this.reveal(false);
- }
- }).one('load.zf.offcanvas', function(){
- if(Foundation.MediaQuery.atLeast(_this.options.revealOn)){
- _this.reveal(true);
- }
- });
- };
- /**
- * Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.
- * @param {Boolean} isRevealed - true if element should be revealed.
- * @function
- */
- OffCanvas.prototype.reveal = function(isRevealed){
- var $closer = this.$element.find('[data-close]');
- if(isRevealed){
- // if(!this.options.forceTop){
- // var scrollPos = parseInt(window.pageYOffset);
- // this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)';
- // }
- // if(this.options.isSticky){ this._stick(); }
- if($closer.length){ $closer.hide(); }
- }else{
- // if(this.options.isSticky || !this.options.forceTop){
- // this.$element[0].style.transform = '';
- // $(window).off('scroll.zf.offcanvas');
- // }
- if($closer.length){
- $closer.show();
- }
- }
- };
- /**
- * Opens the off-canvas menu.
- * @function
- * @param {Object} event - Event object passed from listener.
- * @param {jQuery} trigger - element that triggered the off-canvas to open.
- * @fires OffCanvas#opened
- */
- OffCanvas.prototype.open = function(event, trigger) {
- if (this.$element.hasClass('is-open')){ return; }
- var _this = this,
- $body = $(document.body);
- $('body').scrollTop(0);
- // window.pageYOffset = 0;
-
- // if(!this.options.forceTop){
- // var scrollPos = parseInt(window.pageYOffset);
- // this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)';
- // if(this.$exiter.length){
- // this.$exiter[0].style.transform = 'translate(0,' + scrollPos + 'px)';
- // }
- // }
- /**
- * Fires when the off-canvas menu opens.
- * @event OffCanvas#opened
- */
- Foundation.Move(this.options.transitionTime, this.$element, function(){
- $('[data-off-canvas-wrapper]').addClass('is-off-canvas-open is-open-'+ _this.options.position);
-
- _this.$element
- .addClass('is-open')
- .attr('aria-hidden', 'false')
- .trigger('opened.zf.offcanvas');
-
- // if(_this.options.isSticky){
- // _this._stick();
- // }
- });
- if(trigger){
- this.$lastTrigger = trigger.attr('aria-expanded', 'true');
- }
- if(this.options.autoFocus){
- this.$element.one('finished.zf.animate', function(){
- _this.$element.find('a, button').eq(0).focus();
- });
- }
- };
- /**
- * Allows the offcanvas to appear sticky utilizing translate properties.
- * @private
- */
- // OffCanvas.prototype._stick = function(){
- // var elStyle = this.$element[0].style;
- //
- // if(this.options.closeOnClick){
- // var exitStyle = this.$exiter[0].style;
- // }
- //
- // $(window).on('scroll.zf.offcanvas', function(e){
- // console.log(e);
- // var pageY = window.pageYOffset;
- // elStyle.transform = 'translate(0,' + pageY + 'px)';
- // if(exitStyle !== undefined){ exitStyle.transform = 'translate(0,' + pageY + 'px)'; }
- // });
- // // this.$element.trigger('stuck.zf.offcanvas');
- // };
- /**
- * Closes the off-canvas menu.
- * @function
- * @fires OffCanvas#closed
- */
- OffCanvas.prototype.close = function() {
- if(!this.$element.hasClass('is-open')){ return; }
- var _this = this;
- Foundation.Move(this.options.transitionTime, this.$element, function(){
- $('[data-off-canvas-wrapper]').removeClass('is-off-canvas-open is-open-'+_this.options.position);
- _this.$element.removeClass('is-open');
- // Foundation._reflow();
- });
- this.$element.attr('aria-hidden', 'true')
- /**
- * Fires when the off-canvas menu opens.
- * @event OffCanvas#closed
- */
- .trigger('closed.zf.offcanvas');
- // if(_this.options.isSticky || !_this.options.forceTop){
- // setTimeout(function(){
- // _this.$element[0].style.transform = '';
- // $(window).off('scroll.zf.offcanvas');
- // }, this.options.transitionTime);
- // }
-
- this.$lastTrigger.attr('aria-expanded', 'false');
- };
- /**
- * Toggles the off-canvas menu open or closed.
- * @function
- * @param {Object} event - Event object passed from listener.
- * @param {jQuery} trigger - element that triggered the off-canvas to open.
- */
- OffCanvas.prototype.toggle = function(event, trigger) {
- if (this.$element.hasClass('is-open')) {
- this.close(event, trigger);
- }
- else {
- this.open(event, trigger);
- }
- };
- /**
- * Handles keyboard input when detected. When the escape key is pressed, the off-canvas menu closes, and focus is restored to the element that opened the menu.
- * @function
- * @private
- */
- OffCanvas.prototype._handleKeyboard = function(event) {
- if (event.which !== 27) return;
- event.stopPropagation();
- event.preventDefault();
- this.close();
- this.$lastTrigger.focus();
- };
/**
- * Destroys the offcanvas plugin.
- * @function
+ * DropdownMenu module.
+ * @module foundation.dropdown-menu
+ * @requires foundation.util.keyboard
+ * @requires foundation.util.box
+ * @requires foundation.util.nest
*/
- OffCanvas.prototype.destroy = function(){
- //TODO make this...
- };
- Foundation.plugin(OffCanvas, 'OffCanvas');
+ var DropdownMenu = function (_Plugin) {
+ _inherits(DropdownMenu, _Plugin);
+
+ function DropdownMenu() {
+ _classCallCheck(this, DropdownMenu);
+
+ return _possibleConstructorReturn(this, (DropdownMenu.__proto__ || Object.getPrototypeOf(DropdownMenu)).apply(this, arguments));
+ }
+
+ _createClass(DropdownMenu, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of DropdownMenu.
+ * @class
+ * @name DropdownMenu
+ * @fires DropdownMenu#init
+ * @param {jQuery} element - jQuery object to make into a dropdown menu.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, DropdownMenu.defaults, this.$element.data(), options);
+ this.className = 'DropdownMenu'; // ie9 back compat
+
+ this._init();
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].register('DropdownMenu', {
+ 'ENTER': 'open',
+ 'SPACE': 'open',
+ 'ARROW_RIGHT': 'next',
+ 'ARROW_UP': 'up',
+ 'ARROW_DOWN': 'down',
+ 'ARROW_LEFT': 'previous',
+ 'ESCAPE': 'close'
+ });
+ }
+
+ /**
+ * Initializes the plugin, and calls _prepareMenu
+ * @private
+ * @function
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_nest__["a" /* Nest */].Feather(this.$element, 'dropdown');
+
+ var subs = this.$element.find('li.is-dropdown-submenu-parent');
+ this.$element.children('.is-dropdown-submenu-parent').children('.is-dropdown-submenu').addClass('first-sub');
+
+ this.$menuItems = this.$element.find('[role="menuitem"]');
+ this.$tabs = this.$element.children('[role="menuitem"]');
+ this.$tabs.find('ul.is-dropdown-submenu').addClass(this.options.verticalClass);
+
+ if (this.options.alignment === 'auto') {
+ if (this.$element.hasClass(this.options.rightClass) || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__foundation_util_core__["a" /* rtl */])() || this.$element.parents('.top-bar-right').is('*')) {
+ this.options.alignment = 'right';
+ subs.addClass('opens-left');
+ } else {
+ this.options.alignment = 'left';
+ subs.addClass('opens-right');
+ }
+ } else {
+ if (this.options.alignment === 'right') {
+ subs.addClass('opens-left');
+ } else {
+ subs.addClass('opens-right');
+ }
+ }
+ this.changed = false;
+ this._events();
+ }
+ }, {
+ key: '_isVertical',
+ value: function _isVertical() {
+ return this.$tabs.css('display') === 'block' || this.$element.css('flex-direction') === 'column';
+ }
+ }, {
+ key: '_isRtl',
+ value: function _isRtl() {
+ return this.$element.hasClass('align-right') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__foundation_util_core__["a" /* rtl */])() && !this.$element.hasClass('align-left');
+ }
+
+ /**
+ * Adds event listeners to elements within the menu
+ * @private
+ * @function
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this,
+ hasTouch = 'ontouchstart' in window || typeof window.ontouchstart !== 'undefined',
+ parClass = 'is-dropdown-submenu-parent';
+
+ // used for onClick and in the keyboard handlers
+ var handleClickFn = function (e) {
+ var $elem = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(e.target).parentsUntil('ul', '.' + parClass),
+ hasSub = $elem.hasClass(parClass),
+ hasClicked = $elem.attr('data-is-click') === 'true',
+ $sub = $elem.children('.is-dropdown-submenu');
+
+ if (hasSub) {
+ if (hasClicked) {
+ if (!_this.options.closeOnClick || !_this.options.clickOpen && !hasTouch || _this.options.forceFollow && hasTouch) {
+ return;
+ } else {
+ e.stopImmediatePropagation();
+ e.preventDefault();
+ _this._hide($elem);
+ }
+ } else {
+ e.preventDefault();
+ e.stopImmediatePropagation();
+ _this._show($sub);
+ $elem.add($elem.parentsUntil(_this.$element, '.' + parClass)).attr('data-is-click', true);
+ }
+ }
+ };
+
+ if (this.options.clickOpen || hasTouch) {
+ this.$menuItems.on('click.zf.dropdownmenu touchstart.zf.dropdownmenu', handleClickFn);
+ }
+
+ // Handle Leaf element Clicks
+ if (_this.options.closeOnClickInside) {
+ this.$menuItems.on('click.zf.dropdownmenu', function (e) {
+ var $elem = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ hasSub = $elem.hasClass(parClass);
+ if (!hasSub) {
+ _this._hide();
+ }
+ });
+ }
+
+ if (!this.options.disableHover) {
+ this.$menuItems.on('mouseenter.zf.dropdownmenu', function (e) {
+ var $elem = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ hasSub = $elem.hasClass(parClass);
+
+ if (hasSub) {
+ clearTimeout($elem.data('_delay'));
+ $elem.data('_delay', setTimeout(function () {
+ _this._show($elem.children('.is-dropdown-submenu'));
+ }, _this.options.hoverDelay));
+ }
+ }).on('mouseleave.zf.dropdownmenu', function (e) {
+ var $elem = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ hasSub = $elem.hasClass(parClass);
+ if (hasSub && _this.options.autoclose) {
+ if ($elem.attr('data-is-click') === 'true' && _this.options.clickOpen) {
+ return false;
+ }
+
+ clearTimeout($elem.data('_delay'));
+ $elem.data('_delay', setTimeout(function () {
+ _this._hide($elem);
+ }, _this.options.closingTime));
+ }
+ });
+ }
+ this.$menuItems.on('keydown.zf.dropdownmenu', function (e) {
+ var $element = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(e.target).parentsUntil('ul', '[role="menuitem"]'),
+ isTab = _this.$tabs.index($element) > -1,
+ $elements = isTab ? _this.$tabs : $element.siblings('li').add($element),
+ $prevElement,
+ $nextElement;
+
+ $elements.each(function (i) {
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).is($element)) {
+ $prevElement = $elements.eq(i - 1);
+ $nextElement = $elements.eq(i + 1);
+ return;
+ }
+ });
+
+ var nextSibling = function () {
+ $nextElement.children('a:first').focus();
+ e.preventDefault();
+ },
+ prevSibling = function () {
+ $prevElement.children('a:first').focus();
+ e.preventDefault();
+ },
+ openSub = function () {
+ var $sub = $element.children('ul.is-dropdown-submenu');
+ if ($sub.length) {
+ _this._show($sub);
+ $element.find('li > a:first').focus();
+ e.preventDefault();
+ } else {
+ return;
+ }
+ },
+ closeSub = function () {
+ //if ($element.is(':first-child')) {
+ var close = $element.parent('ul').parent('li');
+ close.children('a:first').focus();
+ _this._hide(close);
+ e.preventDefault();
+ //}
+ };
+ var functions = {
+ open: openSub,
+ close: function () {
+ _this._hide(_this.$element);
+ _this.$menuItems.eq(0).children('a').focus(); // focus to first element
+ e.preventDefault();
+ },
+ handled: function () {
+ e.stopImmediatePropagation();
+ }
+ };
+
+ if (isTab) {
+ if (_this._isVertical()) {
+ // vertical menu
+ if (_this._isRtl()) {
+ // right aligned
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend(functions, {
+ down: nextSibling,
+ up: prevSibling,
+ next: closeSub,
+ previous: openSub
+ });
+ } else {
+ // left aligned
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend(functions, {
+ down: nextSibling,
+ up: prevSibling,
+ next: openSub,
+ previous: closeSub
+ });
+ }
+ } else {
+ // horizontal menu
+ if (_this._isRtl()) {
+ // right aligned
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend(functions, {
+ next: prevSibling,
+ previous: nextSibling,
+ down: openSub,
+ up: closeSub
+ });
+ } else {
+ // left aligned
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend(functions, {
+ next: nextSibling,
+ previous: prevSibling,
+ down: openSub,
+ up: closeSub
+ });
+ }
+ }
+ } else {
+ // not tabs -> one sub
+ if (_this._isRtl()) {
+ // right aligned
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend(functions, {
+ next: closeSub,
+ previous: openSub,
+ down: nextSibling,
+ up: prevSibling
+ });
+ } else {
+ // left aligned
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend(functions, {
+ next: openSub,
+ previous: closeSub,
+ down: nextSibling,
+ up: prevSibling
+ });
+ }
+ }
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].handleKey(e, 'DropdownMenu', functions);
+ });
+ }
+
+ /**
+ * Adds an event handler to the body to close any dropdowns on a click.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_addBodyHandler',
+ value: function _addBodyHandler() {
+ var $body = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(document.body),
+ _this = this;
+ $body.off('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu').on('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu', function (e) {
+ var $link = _this.$element.find(e.target);
+ if ($link.length) {
+ return;
+ }
+
+ _this._hide();
+ $body.off('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu');
+ });
+ }
+
+ /**
+ * Opens a dropdown pane, and checks for collisions first.
+ * @param {jQuery} $sub - ul element that is a submenu to show
+ * @function
+ * @private
+ * @fires DropdownMenu#show
+ */
+
+ }, {
+ key: '_show',
+ value: function _show($sub) {
+ var idx = this.$tabs.index(this.$tabs.filter(function (i, el) {
+ return __WEBPACK_IMPORTED_MODULE_0_jquery___default()(el).find($sub).length > 0;
+ }));
+ var $sibs = $sub.parent('li.is-dropdown-submenu-parent').siblings('li.is-dropdown-submenu-parent');
+ this._hide($sibs, idx);
+ $sub.css('visibility', 'hidden').addClass('js-dropdown-active').parent('li.is-dropdown-submenu-parent').addClass('is-active');
+ var clear = __WEBPACK_IMPORTED_MODULE_3__foundation_util_box__["a" /* Box */].ImNotTouchingYou($sub, null, true);
+ if (!clear) {
+ var oldClass = this.options.alignment === 'left' ? '-right' : '-left',
+ $parentLi = $sub.parent('.is-dropdown-submenu-parent');
+ $parentLi.removeClass('opens' + oldClass).addClass('opens-' + this.options.alignment);
+ clear = __WEBPACK_IMPORTED_MODULE_3__foundation_util_box__["a" /* Box */].ImNotTouchingYou($sub, null, true);
+ if (!clear) {
+ $parentLi.removeClass('opens-' + this.options.alignment).addClass('opens-inner');
+ }
+ this.changed = true;
+ }
+ $sub.css('visibility', '');
+ if (this.options.closeOnClick) {
+ this._addBodyHandler();
+ }
+ /**
+ * Fires when the new dropdown pane is visible.
+ * @event DropdownMenu#show
+ */
+ this.$element.trigger('show.zf.dropdownmenu', [$sub]);
+ }
+
+ /**
+ * Hides a single, currently open dropdown pane, if passed a parameter, otherwise, hides everything.
+ * @function
+ * @param {jQuery} $elem - element with a submenu to hide
+ * @param {Number} idx - index of the $tabs collection to hide
+ * @private
+ */
+
+ }, {
+ key: '_hide',
+ value: function _hide($elem, idx) {
+ var $toClose;
+ if ($elem && $elem.length) {
+ $toClose = $elem;
+ } else if (idx !== undefined) {
+ $toClose = this.$tabs.not(function (i, el) {
+ return i === idx;
+ });
+ } else {
+ $toClose = this.$element;
+ }
+ var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0;
+
+ if (somethingToClose) {
+ $toClose.find('li.is-active').add($toClose).attr({
+ 'data-is-click': false
+ }).removeClass('is-active');
+
+ $toClose.find('ul.js-dropdown-active').removeClass('js-dropdown-active');
+
+ if (this.changed || $toClose.find('opens-inner').length) {
+ var oldClass = this.options.alignment === 'left' ? 'right' : 'left';
+ $toClose.find('li.is-dropdown-submenu-parent').add($toClose).removeClass('opens-inner opens-' + this.options.alignment).addClass('opens-' + oldClass);
+ this.changed = false;
+ }
+ /**
+ * Fires when the open menus are closed.
+ * @event DropdownMenu#hide
+ */
+ this.$element.trigger('hide.zf.dropdownmenu', [$toClose]);
+ }
+ }
+
+ /**
+ * Destroys the plugin.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.$menuItems.off('.zf.dropdownmenu').removeAttr('data-is-click').removeClass('is-right-arrow is-left-arrow is-down-arrow opens-right opens-left opens-inner');
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(document.body).off('.zf.dropdownmenu');
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_nest__["a" /* Nest */].Burn(this.$element, 'dropdown');
+ }
+ }]);
+
+ return DropdownMenu;
+ }(__WEBPACK_IMPORTED_MODULE_5__foundation_plugin__["a" /* Plugin */]);
+
+ /**
+ * Default settings for plugin
+ */
+
+
+ DropdownMenu.defaults = {
+ /**
+ * Disallows hover events from opening submenus
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ disableHover: false,
+ /**
+ * Allow a submenu to automatically close on a mouseleave event, if not clicked open.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ autoclose: true,
+ /**
+ * Amount of time to delay opening a submenu on hover event.
+ * @option
+ * @type {number}
+ * @default 50
+ */
+ hoverDelay: 50,
+ /**
+ * Allow a submenu to open/remain open on parent click event. Allows cursor to move away from menu.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ clickOpen: false,
+ /**
+ * Amount of time to delay closing a submenu on a mouseleave event.
+ * @option
+ * @type {number}
+ * @default 500
+ */
+
+ closingTime: 500,
+ /**
+ * Position of the menu relative to what direction the submenus should open. Handled by JS. Can be `'auto'`, `'left'` or `'right'`.
+ * @option
+ * @type {string}
+ * @default 'auto'
+ */
+ alignment: 'auto',
+ /**
+ * Allow clicks on the body to close any open submenus.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ closeOnClick: true,
+ /**
+ * Allow clicks on leaf anchor links to close any open submenus.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ closeOnClickInside: true,
+ /**
+ * Class applied to vertical oriented menus, Foundation default is `vertical`. Update this if using your own class.
+ * @option
+ * @type {string}
+ * @default 'vertical'
+ */
+ verticalClass: 'vertical',
+ /**
+ * Class applied to right-side oriented menus, Foundation default is `align-right`. Update this if using your own class.
+ * @option
+ * @type {string}
+ * @default 'align-right'
+ */
+ rightClass: 'align-right',
+ /**
+ * Boolean to force overide the clicking of links to perform default action, on second touch event for mobile.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ forceFollow: true
+ };
+
+
+
+ /***/ }),
+ /* 15 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Positionable; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__foundation_util_box__ = __webpack_require__(7);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_plugin__ = __webpack_require__(2);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_core__ = __webpack_require__(1);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+ var POSITIONS = ['left', 'right', 'top', 'bottom'];
+ var VERTICAL_ALIGNMENTS = ['top', 'bottom', 'center'];
+ var HORIZONTAL_ALIGNMENTS = ['left', 'right', 'center'];
+
+ var ALIGNMENTS = {
+ 'left': VERTICAL_ALIGNMENTS,
+ 'right': VERTICAL_ALIGNMENTS,
+ 'top': HORIZONTAL_ALIGNMENTS,
+ 'bottom': HORIZONTAL_ALIGNMENTS
+ };
+
+ function nextItem(item, array) {
+ var currentIdx = array.indexOf(item);
+ if (currentIdx === array.length - 1) {
+ return array[0];
+ } else {
+ return array[currentIdx + 1];
+ }
+ }
+
+ var Positionable = function (_Plugin) {
+ _inherits(Positionable, _Plugin);
+
+ function Positionable() {
+ _classCallCheck(this, Positionable);
+
+ return _possibleConstructorReturn(this, (Positionable.__proto__ || Object.getPrototypeOf(Positionable)).apply(this, arguments));
+ }
+
+ _createClass(Positionable, [{
+ key: '_init',
+
+ /**
+ * Abstract class encapsulating the tether-like explicit positioning logic
+ * including repositioning based on overlap.
+ * Expects classes to define defaults for vOffset, hOffset, position,
+ * alignment, allowOverlap, and allowBottomOverlap. They can do this by
+ * extending the defaults, or (for now recommended due to the way docs are
+ * generated) by explicitly declaring them.
+ *
+ **/
+
+ value: function _init() {
+ this.triedPositions = {};
+ this.position = this.options.position === 'auto' ? this._getDefaultPosition() : this.options.position;
+ this.alignment = this.options.alignment === 'auto' ? this._getDefaultAlignment() : this.options.alignment;
+ }
+ }, {
+ key: '_getDefaultPosition',
+ value: function _getDefaultPosition() {
+ return 'bottom';
+ }
+ }, {
+ key: '_getDefaultAlignment',
+ value: function _getDefaultAlignment() {
+ switch (this.position) {
+ case 'bottom':
+ case 'top':
+ return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__foundation_util_core__["a" /* rtl */])() ? 'right' : 'left';
+ case 'left':
+ case 'right':
+ return 'bottom';
+ }
+ }
+
+ /**
+ * Adjusts the positionable possible positions by iterating through alignments
+ * and positions.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_reposition',
+ value: function _reposition() {
+ if (this._alignmentsExhausted(this.position)) {
+ this.position = nextItem(this.position, POSITIONS);
+ this.alignment = ALIGNMENTS[this.position][0];
+ } else {
+ this._realign();
+ }
+ }
+
+ /**
+ * Adjusts the dropdown pane possible positions by iterating through alignments
+ * on the current position.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_realign',
+ value: function _realign() {
+ this._addTriedPosition(this.position, this.alignment);
+ this.alignment = nextItem(this.alignment, ALIGNMENTS[this.position]);
+ }
+ }, {
+ key: '_addTriedPosition',
+ value: function _addTriedPosition(position, alignment) {
+ this.triedPositions[position] = this.triedPositions[position] || [];
+ this.triedPositions[position].push(alignment);
+ }
+ }, {
+ key: '_positionsExhausted',
+ value: function _positionsExhausted() {
+ var isExhausted = true;
+ for (var i = 0; i < POSITIONS.length; i++) {
+ isExhausted = isExhausted && this._alignmentsExhausted(POSITIONS[i]);
+ }
+ return isExhausted;
+ }
+ }, {
+ key: '_alignmentsExhausted',
+ value: function _alignmentsExhausted(position) {
+ return this.triedPositions[position] && this.triedPositions[position].length == ALIGNMENTS[position].length;
+ }
+
+ // When we're trying to center, we don't want to apply offset that's going to
+ // take us just off center, so wrap around to return 0 for the appropriate
+ // offset in those alignments. TODO: Figure out if we want to make this
+ // configurable behavior... it feels more intuitive, especially for tooltips, but
+ // it's possible someone might actually want to start from center and then nudge
+ // slightly off.
+
+ }, {
+ key: '_getVOffset',
+ value: function _getVOffset() {
+ return this.options.vOffset;
+ }
+ }, {
+ key: '_getHOffset',
+ value: function _getHOffset() {
+ return this.options.hOffset;
+ }
+ }, {
+ key: '_setPosition',
+ value: function _setPosition($anchor, $element, $parent) {
+ if ($anchor.attr('aria-expanded') === 'false') {
+ return false;
+ }
+ var $eleDims = __WEBPACK_IMPORTED_MODULE_0__foundation_util_box__["a" /* Box */].GetDimensions($element),
+ $anchorDims = __WEBPACK_IMPORTED_MODULE_0__foundation_util_box__["a" /* Box */].GetDimensions($anchor);
+
+ $element.offset(__WEBPACK_IMPORTED_MODULE_0__foundation_util_box__["a" /* Box */].GetExplicitOffsets($element, $anchor, this.position, this.alignment, this._getVOffset(), this._getHOffset()));
+
+ if (!this.options.allowOverlap) {
+ var overlaps = {};
+ var minOverlap = 100000000;
+ // default coordinates to how we start, in case we can't figure out better
+ var minCoordinates = { position: this.position, alignment: this.alignment };
+ while (!this._positionsExhausted()) {
+ var overlap = __WEBPACK_IMPORTED_MODULE_0__foundation_util_box__["a" /* Box */].OverlapArea($element, $parent, false, false, this.options.allowBottomOverlap);
+ if (overlap === 0) {
+ return;
+ }
+
+ if (overlap < minOverlap) {
+ minOverlap = overlap;
+ minCoordinates = { position: this.position, alignment: this.alignment };
+ }
+
+ this._reposition();
+
+ $element.offset(__WEBPACK_IMPORTED_MODULE_0__foundation_util_box__["a" /* Box */].GetExplicitOffsets($element, $anchor, this.position, this.alignment, this._getVOffset(), this._getHOffset()));
+ }
+ // If we get through the entire loop, there was no non-overlapping
+ // position available. Pick the version with least overlap.
+ this.position = minCoordinates.position;
+ this.alignment = minCoordinates.alignment;
+ $element.offset(__WEBPACK_IMPORTED_MODULE_0__foundation_util_box__["a" /* Box */].GetExplicitOffsets($element, $anchor, this.position, this.alignment, this._getVOffset(), this._getHOffset()));
+ }
+ }
+ }]);
+
+ return Positionable;
+ }(__WEBPACK_IMPORTED_MODULE_1__foundation_plugin__["a" /* Plugin */]);
+
+ Positionable.defaults = {
+ /**
+ * Position of positionable relative to anchor. Can be left, right, bottom, top, or auto.
+ * @option
+ * @type {string}
+ * @default 'auto'
+ */
+ position: 'auto',
+ /**
+ * Alignment of positionable relative to anchor. Can be left, right, bottom, top, center, or auto.
+ * @option
+ * @type {string}
+ * @default 'auto'
+ */
+ alignment: 'auto',
+ /**
+ * Allow overlap of container/window. If false, dropdown positionable first
+ * try to position as defined by data-position and data-alignment, but
+ * reposition if it would cause an overflow.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ allowOverlap: false,
+ /**
+ * Allow overlap of only the bottom of the container. This is the most common
+ * behavior for dropdowns, allowing the dropdown to extend the bottom of the
+ * screen but not otherwise influence or break out of the container.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ allowBottomOverlap: true,
+ /**
+ * Number of pixels the positionable should be separated vertically from anchor
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ vOffset: 0,
+ /**
+ * Number of pixels the positionable should be separated horizontally from anchor
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ hOffset: 0
+ };
+
+
+
+ /***/ }),
+ /* 16 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SmoothScroll; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_plugin__ = __webpack_require__(2);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+ /**
+ * SmoothScroll module.
+ * @module foundation.smooth-scroll
+ */
+
+ var SmoothScroll = function (_Plugin) {
+ _inherits(SmoothScroll, _Plugin);
+
+ function SmoothScroll() {
+ _classCallCheck(this, SmoothScroll);
+
+ return _possibleConstructorReturn(this, (SmoothScroll.__proto__ || Object.getPrototypeOf(SmoothScroll)).apply(this, arguments));
+ }
+
+ _createClass(SmoothScroll, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of SmoothScroll.
+ * @class
+ * @name SmoothScroll
+ * @fires SmoothScroll#init
+ * @param {Object} element - jQuery object to add the trigger to.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, SmoothScroll.defaults, this.$element.data(), options);
+ this.className = 'SmoothScroll'; // ie9 back compat
+
+ this._init();
+ }
+
+ /**
+ * Initialize the SmoothScroll plugin
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ var id = this.$element[0].id || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__foundation_util_core__["b" /* GetYoDigits */])(6, 'smooth-scroll');
+ var _this = this;
+ this.$element.attr({
+ 'id': id
+ });
+
+ this._events();
+ }
+
+ /**
+ * Initializes events for SmoothScroll.
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this;
+
+ // click handler function.
+ var handleLinkClick = function (e) {
+ // exit function if the event source isn't coming from an anchor with href attribute starts with '#'
+ if (!__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).is('a[href^="#"]')) {
+ return false;
+ }
+
+ var arrival = this.getAttribute('href');
+
+ _this._inTransition = true;
+
+ SmoothScroll.scrollToLoc(arrival, _this.options, function () {
+ _this._inTransition = false;
+ });
+
+ e.preventDefault();
+ };
+
+ this.$element.on('click.zf.smoothScroll', handleLinkClick);
+ this.$element.on('click.zf.smoothScroll', 'a[href^="#"]', handleLinkClick);
+ }
+
+ /**
+ * Function to scroll to a given location on the page.
+ * @param {String} loc - A properly formatted jQuery id selector. Example: '#foo'
+ * @param {Object} options - The options to use.
+ * @param {Function} callback - The callback function.
+ * @static
+ * @function
+ */
+
+ }], [{
+ key: 'scrollToLoc',
+ value: function scrollToLoc(loc) {
+ var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SmoothScroll.defaults;
+ var callback = arguments[2];
+
+ // Do nothing if target does not exist to prevent errors
+ if (!__WEBPACK_IMPORTED_MODULE_0_jquery___default()(loc).length) {
+ return false;
+ }
+
+ var scrollPos = Math.round(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(loc).offset().top - options.threshold / 2 - options.offset);
+
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('html, body').stop(true).animate({ scrollTop: scrollPos }, options.animationDuration, options.animationEasing, function () {
+ if (callback && typeof callback == "function") {
+ callback();
+ }
+ });
+ }
+ }]);
+
+ return SmoothScroll;
+ }(__WEBPACK_IMPORTED_MODULE_2__foundation_plugin__["a" /* Plugin */]);
+
+ /**
+ * Default settings for plugin.
+ */
+
+
+ SmoothScroll.defaults = {
+ /**
+ * Amount of time, in ms, the animated scrolling should take between locations.
+ * @option
+ * @type {number}
+ * @default 500
+ */
+ animationDuration: 500,
+ /**
+ * Animation style to use when scrolling between locations. Can be `'swing'` or `'linear'`.
+ * @option
+ * @type {string}
+ * @default 'linear'
+ * @see {@link https://api.jquery.com/animate|Jquery animate}
+ */
+ animationEasing: 'linear',
+ /**
+ * Number of pixels to use as a marker for location changes.
+ * @option
+ * @type {number}
+ * @default 50
+ */
+ threshold: 50,
+ /**
+ * Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ offset: 0
+ };
+
+
+
+ /***/ }),
+ /* 17 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Tabs; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__ = __webpack_require__(3);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_imageLoader__ = __webpack_require__(8);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_plugin__ = __webpack_require__(2);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+ /**
+ * Tabs module.
+ * @module foundation.tabs
+ * @requires foundation.util.keyboard
+ * @requires foundation.util.imageLoader if tabs contain images
+ */
+
+ var Tabs = function (_Plugin) {
+ _inherits(Tabs, _Plugin);
+
+ function Tabs() {
+ _classCallCheck(this, Tabs);
+
+ return _possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).apply(this, arguments));
+ }
+
+ _createClass(Tabs, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of tabs.
+ * @class
+ * @name Tabs
+ * @fires Tabs#init
+ * @param {jQuery} element - jQuery object to make into tabs.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Tabs.defaults, this.$element.data(), options);
+ this.className = 'Tabs'; // ie9 back compat
+
+ this._init();
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].register('Tabs', {
+ 'ENTER': 'open',
+ 'SPACE': 'open',
+ 'ARROW_RIGHT': 'next',
+ 'ARROW_UP': 'previous',
+ 'ARROW_DOWN': 'next',
+ 'ARROW_LEFT': 'previous'
+ // 'TAB': 'next',
+ // 'SHIFT_TAB': 'previous'
+ });
+ }
+
+ /**
+ * Initializes the tabs by showing and focusing (if autoFocus=true) the preset active tab.
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ var _this3 = this;
+
+ var _this = this;
+
+ this.$element.attr({ 'role': 'tablist' });
+ this.$tabTitles = this.$element.find('.' + this.options.linkClass);
+ this.$tabContent = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-tabs-content="' + this.$element[0].id + '"]');
+
+ this.$tabTitles.each(function () {
+ var $elem = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ $link = $elem.find('a'),
+ isActive = $elem.hasClass('' + _this.options.linkActiveClass),
+ hash = $link.attr('data-tabs-target') || $link[0].hash.slice(1),
+ linkId = $link[0].id ? $link[0].id : hash + '-label',
+ $tabContent = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + hash);
+
+ $elem.attr({ 'role': 'presentation' });
+
+ $link.attr({
+ 'role': 'tab',
+ 'aria-controls': hash,
+ 'aria-selected': isActive,
+ 'id': linkId,
+ 'tabindex': isActive ? '0' : '-1'
+ });
+
+ $tabContent.attr({
+ 'role': 'tabpanel',
+ 'aria-labelledby': linkId
+ });
+
+ if (!isActive) {
+ $tabContent.attr('aria-hidden', 'true');
+ }
+
+ if (isActive && _this.options.autoFocus) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).load(function () {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('html, body').animate({ scrollTop: $elem.offset().top }, _this.options.deepLinkSmudgeDelay, function () {
+ $link.focus();
+ });
+ });
+ }
+ });
+ if (this.options.matchHeight) {
+ var $images = this.$tabContent.find('img');
+
+ if ($images.length) {
+ __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__foundation_util_imageLoader__["a" /* onImagesLoaded */])($images, this._setHeight.bind(this));
+ } else {
+ this._setHeight();
+ }
+ }
+
+ //current context-bound function to open tabs on page load or history popstate
+ this._checkDeepLink = function () {
+ var anchor = window.location.hash;
+ //need a hash and a relevant anchor in this tabset
+ if (anchor.length) {
+ var $link = _this3.$element.find('[href$="' + anchor + '"]');
+ if ($link.length) {
+ _this3.selectTab(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(anchor), true);
+
+ //roll up a little to show the titles
+ if (_this3.options.deepLinkSmudge) {
+ var offset = _this3.$element.offset();
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('html, body').animate({ scrollTop: offset.top }, _this3.options.deepLinkSmudgeDelay);
+ }
+
+ /**
+ * Fires when the zplugin has deeplinked at pageload
+ * @event Tabs#deeplink
+ */
+ _this3.$element.trigger('deeplink.zf.tabs', [$link, __WEBPACK_IMPORTED_MODULE_0_jquery___default()(anchor)]);
+ }
+ }
+ };
+
+ //use browser to open a tab, if it exists in this tabset
+ if (this.options.deepLink) {
+ this._checkDeepLink();
+ }
+
+ this._events();
+ }
+
+ /**
+ * Adds event handlers for items within the tabs.
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ this._addKeyHandler();
+ this._addClickHandler();
+ this._setHeightMqHandler = null;
+
+ if (this.options.matchHeight) {
+ this._setHeightMqHandler = this._setHeight.bind(this);
+
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).on('changed.zf.mediaquery', this._setHeightMqHandler);
+ }
+
+ if (this.options.deepLink) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).on('popstate', this._checkDeepLink);
+ }
+ }
+
+ /**
+ * Adds click handlers for items within the tabs.
+ * @private
+ */
+
+ }, {
+ key: '_addClickHandler',
+ value: function _addClickHandler() {
+ var _this = this;
+
+ this.$element.off('click.zf.tabs').on('click.zf.tabs', '.' + this.options.linkClass, function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ _this._handleTabChange(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this));
+ });
+ }
+
+ /**
+ * Adds keyboard event handlers for items within the tabs.
+ * @private
+ */
+
+ }, {
+ key: '_addKeyHandler',
+ value: function _addKeyHandler() {
+ var _this = this;
+
+ this.$tabTitles.off('keydown.zf.tabs').on('keydown.zf.tabs', function (e) {
+ if (e.which === 9) return;
+
+ var $element = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ $elements = $element.parent('ul').children('li'),
+ $prevElement,
+ $nextElement;
+
+ $elements.each(function (i) {
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).is($element)) {
+ if (_this.options.wrapOnKeys) {
+ $prevElement = i === 0 ? $elements.last() : $elements.eq(i - 1);
+ $nextElement = i === $elements.length - 1 ? $elements.first() : $elements.eq(i + 1);
+ } else {
+ $prevElement = $elements.eq(Math.max(0, i - 1));
+ $nextElement = $elements.eq(Math.min(i + 1, $elements.length - 1));
+ }
+ return;
+ }
+ });
+
+ // handle keyboard event with keyboard util
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].handleKey(e, 'Tabs', {
+ open: function () {
+ $element.find('[role="tab"]').focus();
+ _this._handleTabChange($element);
+ },
+ previous: function () {
+ $prevElement.find('[role="tab"]').focus();
+ _this._handleTabChange($prevElement);
+ },
+ next: function () {
+ $nextElement.find('[role="tab"]').focus();
+ _this._handleTabChange($nextElement);
+ },
+ handled: function () {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ });
+ });
+ }
+
+ /**
+ * Opens the tab `$targetContent` defined by `$target`. Collapses active tab.
+ * @param {jQuery} $target - Tab to open.
+ * @param {boolean} historyHandled - browser has already handled a history update
+ * @fires Tabs#change
+ * @function
+ */
+
+ }, {
+ key: '_handleTabChange',
+ value: function _handleTabChange($target, historyHandled) {
+
+ /**
+ * Check for active class on target. Collapse if exists.
+ */
+ if ($target.hasClass('' + this.options.linkActiveClass)) {
+ if (this.options.activeCollapse) {
+ this._collapseTab($target);
+
+ /**
+ * Fires when the zplugin has successfully collapsed tabs.
+ * @event Tabs#collapse
+ */
+ this.$element.trigger('collapse.zf.tabs', [$target]);
+ }
+ return;
+ }
+
+ var $oldTab = this.$element.find('.' + this.options.linkClass + '.' + this.options.linkActiveClass),
+ $tabLink = $target.find('[role="tab"]'),
+ hash = $tabLink.attr('data-tabs-target') || $tabLink[0].hash.slice(1),
+ $targetContent = this.$tabContent.find('#' + hash);
+
+ //close old tab
+ this._collapseTab($oldTab);
+
+ //open new tab
+ this._openTab($target);
+
+ //either replace or update browser history
+ if (this.options.deepLink && !historyHandled) {
+ var anchor = $target.find('a').attr('href');
+
+ if (this.options.updateHistory) {
+ history.pushState({}, '', anchor);
+ } else {
+ history.replaceState({}, '', anchor);
+ }
+ }
+
+ /**
+ * Fires when the plugin has successfully changed tabs.
+ * @event Tabs#change
+ */
+ this.$element.trigger('change.zf.tabs', [$target, $targetContent]);
+
+ //fire to children a mutation event
+ $targetContent.find("[data-mutate]").trigger("mutateme.zf.trigger");
+ }
+
+ /**
+ * Opens the tab `$targetContent` defined by `$target`.
+ * @param {jQuery} $target - Tab to Open.
+ * @function
+ */
+
+ }, {
+ key: '_openTab',
+ value: function _openTab($target) {
+ var $tabLink = $target.find('[role="tab"]'),
+ hash = $tabLink.attr('data-tabs-target') || $tabLink[0].hash.slice(1),
+ $targetContent = this.$tabContent.find('#' + hash);
+
+ $target.addClass('' + this.options.linkActiveClass);
+
+ $tabLink.attr({
+ 'aria-selected': 'true',
+ 'tabindex': '0'
+ });
+
+ $targetContent.addClass('' + this.options.panelActiveClass).removeAttr('aria-hidden');
+ }
+
+ /**
+ * Collapses `$targetContent` defined by `$target`.
+ * @param {jQuery} $target - Tab to Open.
+ * @function
+ */
+
+ }, {
+ key: '_collapseTab',
+ value: function _collapseTab($target) {
+ var $target_anchor = $target.removeClass('' + this.options.linkActiveClass).find('[role="tab"]').attr({
+ 'aria-selected': 'false',
+ 'tabindex': -1
+ });
+
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + $target_anchor.attr('aria-controls')).removeClass('' + this.options.panelActiveClass).attr({ 'aria-hidden': 'true' });
+ }
+
+ /**
+ * Public method for selecting a content pane to display.
+ * @param {jQuery | String} elem - jQuery object or string of the id of the pane to display.
+ * @param {boolean} historyHandled - browser has already handled a history update
+ * @function
+ */
+
+ }, {
+ key: 'selectTab',
+ value: function selectTab(elem, historyHandled) {
+ var idStr;
+
+ if (typeof elem === 'object') {
+ idStr = elem[0].id;
+ } else {
+ idStr = elem;
+ }
+
+ if (idStr.indexOf('#') < 0) {
+ idStr = '#' + idStr;
+ }
+
+ var $target = this.$tabTitles.find('[href$="' + idStr + '"]').parent('.' + this.options.linkClass);
+
+ this._handleTabChange($target, historyHandled);
+ }
+ }, {
+ key: '_setHeight',
+
+ /**
+ * Sets the height of each panel to the height of the tallest panel.
+ * If enabled in options, gets called on media query change.
+ * If loading content via external source, can be called directly or with _reflow.
+ * If enabled with `data-match-height="true"`, tabs sets to equal height
+ * @function
+ * @private
+ */
+ value: function _setHeight() {
+ var max = 0,
+ _this = this; // Lock down the `this` value for the root tabs object
+
+ this.$tabContent.find('.' + this.options.panelClass).css('height', '').each(function () {
+
+ var panel = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ isActive = panel.hasClass('' + _this.options.panelActiveClass); // get the options from the parent instead of trying to get them from the child
+
+ if (!isActive) {
+ panel.css({ 'visibility': 'hidden', 'display': 'block' });
+ }
+
+ var temp = this.getBoundingClientRect().height;
+
+ if (!isActive) {
+ panel.css({
+ 'visibility': '',
+ 'display': ''
+ });
+ }
+
+ max = temp > max ? temp : max;
+ }).css('height', max + 'px');
+ }
+
+ /**
+ * Destroys an instance of an tabs.
+ * @fires Tabs#destroyed
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.$element.find('.' + this.options.linkClass).off('.zf.tabs').hide().end().find('.' + this.options.panelClass).hide();
+
+ if (this.options.matchHeight) {
+ if (this._setHeightMqHandler != null) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off('changed.zf.mediaquery', this._setHeightMqHandler);
+ }
+ }
+
+ if (this.options.deepLink) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off('popstate', this._checkDeepLink);
+ }
+ }
+ }]);
+
+ return Tabs;
+ }(__WEBPACK_IMPORTED_MODULE_3__foundation_plugin__["a" /* Plugin */]);
+
+ Tabs.defaults = {
+ /**
+ * Allows the window to scroll to content of pane specified by hash anchor
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ deepLink: false,
+
+ /**
+ * Adjust the deep link scroll to make sure the top of the tab panel is visible
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ deepLinkSmudge: false,
+
+ /**
+ * Animation time (ms) for the deep link adjustment
+ * @option
+ * @type {number}
+ * @default 300
+ */
+ deepLinkSmudgeDelay: 300,
+
+ /**
+ * Update the browser history with the open tab
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ updateHistory: false,
+
+ /**
+ * Allows the window to scroll to content of active pane on load if set to true.
+ * Not recommended if more than one tab panel per page.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ autoFocus: false,
+
+ /**
+ * Allows keyboard input to 'wrap' around the tab links.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ wrapOnKeys: true,
+
+ /**
+ * Allows the tab content panes to match heights if set to true.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ matchHeight: false,
+
+ /**
+ * Allows active tabs to collapse when clicked.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ activeCollapse: false,
+
+ /**
+ * Class applied to `li`'s in tab link list.
+ * @option
+ * @type {string}
+ * @default 'tabs-title'
+ */
+ linkClass: 'tabs-title',
+
+ /**
+ * Class applied to the active `li` in tab link list.
+ * @option
+ * @type {string}
+ * @default 'is-active'
+ */
+ linkActiveClass: 'is-active',
+
+ /**
+ * Class applied to the content containers.
+ * @option
+ * @type {string}
+ * @default 'tabs-panel'
+ */
+ panelClass: 'tabs-panel',
+
+ /**
+ * Class applied to the active content container.
+ * @option
+ * @type {string}
+ * @default 'is-active'
+ */
+ panelActiveClass: 'is-active'
+ };
+
+
+
+ /***/ }),
+ /* 18 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Timer; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+
+
+
+
+ function Timer(elem, options, cb) {
+ var _this = this,
+ duration = options.duration,
+ //options is an object for easily adding features later.
+ nameSpace = Object.keys(elem.data())[0] || 'timer',
+ remain = -1,
+ start,
+ timer;
+
+ this.isPaused = false;
+
+ this.restart = function () {
+ remain = -1;
+ clearTimeout(timer);
+ this.start();
+ };
+
+ this.start = function () {
+ this.isPaused = false;
+ // if(!elem.data('paused')){ return false; }//maybe implement this sanity check if used for other things.
+ clearTimeout(timer);
+ remain = remain <= 0 ? duration : remain;
+ elem.data('paused', false);
+ start = Date.now();
+ timer = setTimeout(function () {
+ if (options.infinite) {
+ _this.restart(); //rerun the timer.
+ }
+ if (cb && typeof cb === 'function') {
+ cb();
+ }
+ }, remain);
+ elem.trigger('timerstart.zf.' + nameSpace);
+ };
+
+ this.pause = function () {
+ this.isPaused = true;
+ //if(elem.data('paused')){ return false; }//maybe implement this sanity check if used for other things.
+ clearTimeout(timer);
+ elem.data('paused', true);
+ var end = Date.now();
+ remain = remain - (end - start);
+ elem.trigger('timerpaused.zf.' + nameSpace);
+ };
+ }
+
+
+
+ /***/ }),
+ /* 19 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_core__ = __webpack_require__(21);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_box__ = __webpack_require__(7);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_util_imageLoader__ = __webpack_require__(8);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__foundation_util_keyboard__ = __webpack_require__(3);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__foundation_util_mediaQuery__ = __webpack_require__(4);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__foundation_util_motion__ = __webpack_require__(6);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__foundation_util_nest__ = __webpack_require__(9);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__foundation_util_timer__ = __webpack_require__(18);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__foundation_util_touch__ = __webpack_require__(10);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__foundation_util_triggers__ = __webpack_require__(5);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__foundation_abide__ = __webpack_require__(20);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__foundation_accordion__ = __webpack_require__(11);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__foundation_accordionMenu__ = __webpack_require__(12);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__foundation_drilldown__ = __webpack_require__(13);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__foundation_dropdown__ = __webpack_require__(22);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__foundation_dropdownMenu__ = __webpack_require__(14);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__foundation_equalizer__ = __webpack_require__(23);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_19__foundation_interchange__ = __webpack_require__(24);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_20__foundation_magellan__ = __webpack_require__(25);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_21__foundation_offcanvas__ = __webpack_require__(26);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_22__foundation_orbit__ = __webpack_require__(27);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_23__foundation_responsiveMenu__ = __webpack_require__(29);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_24__foundation_responsiveToggle__ = __webpack_require__(30);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_25__foundation_reveal__ = __webpack_require__(31);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_26__foundation_slider__ = __webpack_require__(32);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_27__foundation_smoothScroll__ = __webpack_require__(16);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_28__foundation_sticky__ = __webpack_require__(33);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_29__foundation_tabs__ = __webpack_require__(17);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_30__foundation_toggler__ = __webpack_require__(34);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_31__foundation_tooltip__ = __webpack_require__(35);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_32__foundation_responsiveAccordionTabs__ = __webpack_require__(28);
+
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].addToJquery(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a);
+
+ // Add Foundation Utils to Foundation global namespace for backwards
+ // compatibility.
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].rtl = __WEBPACK_IMPORTED_MODULE_2__foundation_util_core__["a" /* rtl */];
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].GetYoDigits = __WEBPACK_IMPORTED_MODULE_2__foundation_util_core__["b" /* GetYoDigits */];
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].transitionend = __WEBPACK_IMPORTED_MODULE_2__foundation_util_core__["c" /* transitionend */];
+
+
+
+
+
+
+
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].Box = __WEBPACK_IMPORTED_MODULE_3__foundation_util_box__["a" /* Box */];
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].onImagesLoaded = __WEBPACK_IMPORTED_MODULE_4__foundation_util_imageLoader__["a" /* onImagesLoaded */];
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].Keyboard = __WEBPACK_IMPORTED_MODULE_5__foundation_util_keyboard__["a" /* Keyboard */];
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].MediaQuery = __WEBPACK_IMPORTED_MODULE_6__foundation_util_mediaQuery__["a" /* MediaQuery */];
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].Motion = __WEBPACK_IMPORTED_MODULE_7__foundation_util_motion__["a" /* Motion */];
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].Move = __WEBPACK_IMPORTED_MODULE_7__foundation_util_motion__["b" /* Move */];
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].Nest = __WEBPACK_IMPORTED_MODULE_8__foundation_util_nest__["a" /* Nest */];
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].Timer = __WEBPACK_IMPORTED_MODULE_9__foundation_util_timer__["a" /* Timer */];
+
+ // Touch and Triggers previously were almost purely sede effect driven,
+ // so no // need to add it to Foundation, just init them.
+
+
+ __WEBPACK_IMPORTED_MODULE_10__foundation_util_touch__["a" /* Touch */].init(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a);
+
+
+ __WEBPACK_IMPORTED_MODULE_11__foundation_util_triggers__["a" /* Triggers */].init(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a, __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */]);
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_12__foundation_abide__["a" /* Abide */], 'Abide');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_13__foundation_accordion__["a" /* Accordion */], 'Accordion');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_14__foundation_accordionMenu__["a" /* AccordionMenu */], 'AccordionMenu');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_15__foundation_drilldown__["a" /* Drilldown */], 'Drilldown');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_16__foundation_dropdown__["a" /* Dropdown */], 'Dropdown');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_17__foundation_dropdownMenu__["a" /* DropdownMenu */], 'DropdownMenu');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_18__foundation_equalizer__["a" /* Equalizer */], 'Equalizer');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_19__foundation_interchange__["a" /* Interchange */], 'Interchange');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_20__foundation_magellan__["a" /* Magellan */], 'Magellan');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_21__foundation_offcanvas__["a" /* OffCanvas */], 'OffCanvas');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_22__foundation_orbit__["a" /* Orbit */], 'Orbit');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_23__foundation_responsiveMenu__["a" /* ResponsiveMenu */], 'ResponsiveMenu');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_24__foundation_responsiveToggle__["a" /* ResponsiveToggle */], 'ResponsiveToggle');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_25__foundation_reveal__["a" /* Reveal */], 'Reveal');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_26__foundation_slider__["a" /* Slider */], 'Slider');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_27__foundation_smoothScroll__["a" /* SmoothScroll */], 'SmoothScroll');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_28__foundation_sticky__["a" /* Sticky */], 'Sticky');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_29__foundation_tabs__["a" /* Tabs */], 'Tabs');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_30__foundation_toggler__["a" /* Toggler */], 'Toggler');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_31__foundation_tooltip__["a" /* Tooltip */], 'Tooltip');
+
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_core__["a" /* Foundation */].plugin(__WEBPACK_IMPORTED_MODULE_32__foundation_responsiveAccordionTabs__["a" /* ResponsiveAccordionTabs */], 'ResponsiveAccordionTabs');
+
+ /***/ }),
+ /* 20 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Abide; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_plugin__ = __webpack_require__(2);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+ /**
+ * Abide module.
+ * @module foundation.abide
+ */
+
+ var Abide = function (_Plugin) {
+ _inherits(Abide, _Plugin);
+
+ function Abide() {
+ _classCallCheck(this, Abide);
+
+ return _possibleConstructorReturn(this, (Abide.__proto__ || Object.getPrototypeOf(Abide)).apply(this, arguments));
+ }
+
+ _createClass(Abide, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of Abide.
+ * @class
+ * @name Abide
+ * @fires Abide#init
+ * @param {Object} element - jQuery object to add the trigger to.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element) {
+ var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend(true, {}, Abide.defaults, this.$element.data(), options);
+
+ this.className = 'Abide'; // ie9 back compat
+ this._init();
+ }
+
+ /**
+ * Initializes the Abide plugin and calls functions to get Abide functioning on load.
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ this.$inputs = this.$element.find('input, textarea, select');
+
+ this._events();
+ }
+
+ /**
+ * Initializes events for Abide.
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this3 = this;
+
+ this.$element.off('.abide').on('reset.zf.abide', function () {
+ _this3.resetForm();
+ }).on('submit.zf.abide', function () {
+ return _this3.validateForm();
+ });
+
+ if (this.options.validateOn === 'fieldChange') {
+ this.$inputs.off('change.zf.abide').on('change.zf.abide', function (e) {
+ _this3.validateInput(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(e.target));
+ });
+ }
+
+ if (this.options.liveValidate) {
+ this.$inputs.off('input.zf.abide').on('input.zf.abide', function (e) {
+ _this3.validateInput(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(e.target));
+ });
+ }
+
+ if (this.options.validateOnBlur) {
+ this.$inputs.off('blur.zf.abide').on('blur.zf.abide', function (e) {
+ _this3.validateInput(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(e.target));
+ });
+ }
+ }
+
+ /**
+ * Calls necessary functions to update Abide upon DOM change
+ * @private
+ */
+
+ }, {
+ key: '_reflow',
+ value: function _reflow() {
+ this._init();
+ }
+
+ /**
+ * Checks whether or not a form element has the required attribute and if it's checked or not
+ * @param {Object} element - jQuery object to check for required attribute
+ * @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
+ */
+
+ }, {
+ key: 'requiredCheck',
+ value: function requiredCheck($el) {
+ if (!$el.attr('required')) return true;
+
+ var isGood = true;
+
+ switch ($el[0].type) {
+ case 'checkbox':
+ isGood = $el[0].checked;
+ break;
+
+ case 'select':
+ case 'select-one':
+ case 'select-multiple':
+ var opt = $el.find('option:selected');
+ if (!opt.length || !opt.val()) isGood = false;
+ break;
+
+ default:
+ if (!$el.val() || !$el.val().length) isGood = false;
+ }
+
+ return isGood;
+ }
+
+ /**
+ * Get:
+ * - Based on $el, the first element(s) corresponding to `formErrorSelector` in this order:
+ * 1. The element's direct sibling('s).
+ * 2. The element's parent's children.
+ * - Element(s) with the attribute `[data-form-error-for]` set with the element's id.
+ *
+ * This allows for multiple form errors per input, though if none are found, no form errors will be shown.
+ *
+ * @param {Object} $el - jQuery object to use as reference to find the form error selector.
+ * @returns {Object} jQuery object with the selector.
+ */
+
+ }, {
+ key: 'findFormError',
+ value: function findFormError($el) {
+ var id = $el[0].id;
+ var $error = $el.siblings(this.options.formErrorSelector);
+
+ if (!$error.length) {
+ $error = $el.parent().find(this.options.formErrorSelector);
+ }
+
+ $error = $error.add(this.$element.find('[data-form-error-for="' + id + '"]'));
+
+ return $error;
+ }
+
+ /**
+ * Get the first element in this order:
+ * 2. The <label> with the attribute `[for="someInputId"]`
+ * 3. The `.closest()` <label>
+ *
+ * @param {Object} $el - jQuery object to check for required attribute
+ * @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
+ */
+
+ }, {
+ key: 'findLabel',
+ value: function findLabel($el) {
+ var id = $el[0].id;
+ var $label = this.$element.find('label[for="' + id + '"]');
+
+ if (!$label.length) {
+ return $el.closest('label');
+ }
+
+ return $label;
+ }
+
+ /**
+ * Get the set of labels associated with a set of radio els in this order
+ * 2. The <label> with the attribute `[for="someInputId"]`
+ * 3. The `.closest()` <label>
+ *
+ * @param {Object} $el - jQuery object to check for required attribute
+ * @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
+ */
+
+ }, {
+ key: 'findRadioLabels',
+ value: function findRadioLabels($els) {
+ var _this4 = this;
+
+ var labels = $els.map(function (i, el) {
+ var id = el.id;
+ var $label = _this4.$element.find('label[for="' + id + '"]');
+
+ if (!$label.length) {
+ $label = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(el).closest('label');
+ }
+ return $label[0];
+ });
+
+ return __WEBPACK_IMPORTED_MODULE_0_jquery___default()(labels);
+ }
+
+ /**
+ * Adds the CSS error class as specified by the Abide settings to the label, input, and the form
+ * @param {Object} $el - jQuery object to add the class to
+ */
+
+ }, {
+ key: 'addErrorClasses',
+ value: function addErrorClasses($el) {
+ var $label = this.findLabel($el);
+ var $formError = this.findFormError($el);
+
+ if ($label.length) {
+ $label.addClass(this.options.labelErrorClass);
+ }
+
+ if ($formError.length) {
+ $formError.addClass(this.options.formErrorClass);
+ }
+
+ $el.addClass(this.options.inputErrorClass).attr('data-invalid', '');
+ }
+
+ /**
+ * Remove CSS error classes etc from an entire radio button group
+ * @param {String} groupName - A string that specifies the name of a radio button group
+ *
+ */
+
+ }, {
+ key: 'removeRadioErrorClasses',
+ value: function removeRadioErrorClasses(groupName) {
+ var $els = this.$element.find(':radio[name="' + groupName + '"]');
+ var $labels = this.findRadioLabels($els);
+ var $formErrors = this.findFormError($els);
+
+ if ($labels.length) {
+ $labels.removeClass(this.options.labelErrorClass);
+ }
+
+ if ($formErrors.length) {
+ $formErrors.removeClass(this.options.formErrorClass);
+ }
+
+ $els.removeClass(this.options.inputErrorClass).removeAttr('data-invalid');
+ }
+
+ /**
+ * Removes CSS error class as specified by the Abide settings from the label, input, and the form
+ * @param {Object} $el - jQuery object to remove the class from
+ */
+
+ }, {
+ key: 'removeErrorClasses',
+ value: function removeErrorClasses($el) {
+ // radios need to clear all of the els
+ if ($el[0].type == 'radio') {
+ return this.removeRadioErrorClasses($el.attr('name'));
+ }
+
+ var $label = this.findLabel($el);
+ var $formError = this.findFormError($el);
+
+ if ($label.length) {
+ $label.removeClass(this.options.labelErrorClass);
+ }
+
+ if ($formError.length) {
+ $formError.removeClass(this.options.formErrorClass);
+ }
+
+ $el.removeClass(this.options.inputErrorClass).removeAttr('data-invalid');
+ }
+
+ /**
+ * Goes through a form to find inputs and proceeds to validate them in ways specific to their type.
+ * Ignores inputs with data-abide-ignore, type="hidden" or disabled attributes set
+ * @fires Abide#invalid
+ * @fires Abide#valid
+ * @param {Object} element - jQuery object to validate, should be an HTML input
+ * @returns {Boolean} goodToGo - If the input is valid or not.
+ */
+
+ }, {
+ key: 'validateInput',
+ value: function validateInput($el) {
+ var clearRequire = this.requiredCheck($el),
+ validated = false,
+ customValidator = true,
+ validator = $el.attr('data-validator'),
+ equalTo = true;
+
+ // don't validate ignored inputs or hidden inputs or disabled inputs
+ if ($el.is('[data-abide-ignore]') || $el.is('[type="hidden"]') || $el.is('[disabled]')) {
+ return true;
+ }
+
+ switch ($el[0].type) {
+ case 'radio':
+ validated = this.validateRadio($el.attr('name'));
+ break;
+
+ case 'checkbox':
+ validated = clearRequire;
+ break;
+
+ case 'select':
+ case 'select-one':
+ case 'select-multiple':
+ validated = clearRequire;
+ break;
+
+ default:
+ validated = this.validateText($el);
+ }
+
+ if (validator) {
+ customValidator = this.matchValidation($el, validator, $el.attr('required'));
+ }
+
+ if ($el.attr('data-equalto')) {
+ equalTo = this.options.validators.equalTo($el);
+ }
+
+ var goodToGo = [clearRequire, validated, customValidator, equalTo].indexOf(false) === -1;
+ var message = (goodToGo ? 'valid' : 'invalid') + '.zf.abide';
+
+ if (goodToGo) {
+ // Re-validate inputs that depend on this one with equalto
+ var dependentElements = this.$element.find('[data-equalto="' + $el.attr('id') + '"]');
+ if (dependentElements.length) {
+ var _this = this;
+ dependentElements.each(function () {
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).val()) {
+ _this.validateInput(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this));
+ }
+ });
+ }
+ }
+
+ this[goodToGo ? 'removeErrorClasses' : 'addErrorClasses']($el);
+
+ /**
+ * Fires when the input is done checking for validation. Event trigger is either `valid.zf.abide` or `invalid.zf.abide`
+ * Trigger includes the DOM element of the input.
+ * @event Abide#valid
+ * @event Abide#invalid
+ */
+ $el.trigger(message, [$el]);
+
+ return goodToGo;
+ }
+
+ /**
+ * Goes through a form and if there are any invalid inputs, it will display the form error element
+ * @returns {Boolean} noError - true if no errors were detected...
+ * @fires Abide#formvalid
+ * @fires Abide#forminvalid
+ */
+
+ }, {
+ key: 'validateForm',
+ value: function validateForm() {
+ var acc = [];
+ var _this = this;
+
+ this.$inputs.each(function () {
+ acc.push(_this.validateInput(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this)));
+ });
+
+ var noError = acc.indexOf(false) === -1;
+
+ this.$element.find('[data-abide-error]').css('display', noError ? 'none' : 'block');
+
+ /**
+ * Fires when the form is finished validating. Event trigger is either `formvalid.zf.abide` or `forminvalid.zf.abide`.
+ * Trigger includes the element of the form.
+ * @event Abide#formvalid
+ * @event Abide#forminvalid
+ */
+ this.$element.trigger((noError ? 'formvalid' : 'forminvalid') + '.zf.abide', [this.$element]);
+
+ return noError;
+ }
+
+ /**
+ * Determines whether or a not a text input is valid based on the pattern specified in the attribute. If no matching pattern is found, returns true.
+ * @param {Object} $el - jQuery object to validate, should be a text input HTML element
+ * @param {String} pattern - string value of one of the RegEx patterns in Abide.options.patterns
+ * @returns {Boolean} Boolean value depends on whether or not the input value matches the pattern specified
+ */
+
+ }, {
+ key: 'validateText',
+ value: function validateText($el, pattern) {
+ // A pattern can be passed to this function, or it will be infered from the input's "pattern" attribute, or it's "type" attribute
+ pattern = pattern || $el.attr('pattern') || $el.attr('type');
+ var inputText = $el.val();
+ var valid = false;
+
+ if (inputText.length) {
+ // If the pattern attribute on the element is in Abide's list of patterns, then test that regexp
+ if (this.options.patterns.hasOwnProperty(pattern)) {
+ valid = this.options.patterns[pattern].test(inputText);
+ }
+ // If the pattern name isn't also the type attribute of the field, then test it as a regexp
+ else if (pattern !== $el.attr('type')) {
+ valid = new RegExp(pattern).test(inputText);
+ } else {
+ valid = true;
+ }
+ }
+ // An empty field is valid if it's not required
+ else if (!$el.prop('required')) {
+ valid = true;
+ }
+
+ return valid;
+ }
+
+ /**
+ * Determines whether or a not a radio input is valid based on whether or not it is required and selected. Although the function targets a single `<input>`, it validates by checking the `required` and `checked` properties of all radio buttons in its group.
+ * @param {String} groupName - A string that specifies the name of a radio button group
+ * @returns {Boolean} Boolean value depends on whether or not at least one radio input has been selected (if it's required)
+ */
+
+ }, {
+ key: 'validateRadio',
+ value: function validateRadio(groupName) {
+ // If at least one radio in the group has the `required` attribute, the group is considered required
+ // Per W3C spec, all radio buttons in a group should have `required`, but we're being nice
+ var $group = this.$element.find(':radio[name="' + groupName + '"]');
+ var valid = false,
+ required = false;
+
+ // For the group to be required, at least one radio needs to be required
+ $group.each(function (i, e) {
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(e).attr('required')) {
+ required = true;
+ }
+ });
+ if (!required) valid = true;
+
+ if (!valid) {
+ // For the group to be valid, at least one radio needs to be checked
+ $group.each(function (i, e) {
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(e).prop('checked')) {
+ valid = true;
+ }
+ });
+ };
+
+ return valid;
+ }
+
+ /**
+ * Determines if a selected input passes a custom validation function. Multiple validations can be used, if passed to the element with `data-validator="foo bar baz"` in a space separated listed.
+ * @param {Object} $el - jQuery input element.
+ * @param {String} validators - a string of function names matching functions in the Abide.options.validators object.
+ * @param {Boolean} required - self explanatory?
+ * @returns {Boolean} - true if validations passed.
+ */
+
+ }, {
+ key: 'matchValidation',
+ value: function matchValidation($el, validators, required) {
+ var _this5 = this;
+
+ required = required ? true : false;
+
+ var clear = validators.split(' ').map(function (v) {
+ return _this5.options.validators[v]($el, required, $el.parent());
+ });
+ return clear.indexOf(false) === -1;
+ }
+
+ /**
+ * Resets form inputs and styles
+ * @fires Abide#formreset
+ */
+
+ }, {
+ key: 'resetForm',
+ value: function resetForm() {
+ var $form = this.$element,
+ opts = this.options;
+
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('.' + opts.labelErrorClass, $form).not('small').removeClass(opts.labelErrorClass);
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('.' + opts.inputErrorClass, $form).not('small').removeClass(opts.inputErrorClass);
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(opts.formErrorSelector + '.' + opts.formErrorClass).removeClass(opts.formErrorClass);
+ $form.find('[data-abide-error]').css('display', 'none');
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(':input', $form).not(':button, :submit, :reset, :hidden, :radio, :checkbox, [data-abide-ignore]').val('').removeAttr('data-invalid');
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(':input:radio', $form).not('[data-abide-ignore]').prop('checked', false).removeAttr('data-invalid');
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(':input:checkbox', $form).not('[data-abide-ignore]').prop('checked', false).removeAttr('data-invalid');
+ /**
+ * Fires when the form has been reset.
+ * @event Abide#formreset
+ */
+ $form.trigger('formreset.zf.abide', [$form]);
+ }
+
+ /**
+ * Destroys an instance of Abide.
+ * Removes error styles and classes from elements, without resetting their values.
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ var _this = this;
+ this.$element.off('.abide').find('[data-abide-error]').css('display', 'none');
+
+ this.$inputs.off('.abide').each(function () {
+ _this.removeErrorClasses(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this));
+ });
+ }
+ }]);
+
+ return Abide;
+ }(__WEBPACK_IMPORTED_MODULE_1__foundation_plugin__["a" /* Plugin */]);
+
+ /**
+ * Default settings for plugin
+ */
+
+
+ Abide.defaults = {
+ /**
+ * The default event to validate inputs. Checkboxes and radios validate immediately.
+ * Remove or change this value for manual validation.
+ * @option
+ * @type {?string}
+ * @default 'fieldChange'
+ */
+ validateOn: 'fieldChange',
+
+ /**
+ * Class to be applied to input labels on failed validation.
+ * @option
+ * @type {string}
+ * @default 'is-invalid-label'
+ */
+ labelErrorClass: 'is-invalid-label',
+
+ /**
+ * Class to be applied to inputs on failed validation.
+ * @option
+ * @type {string}
+ * @default 'is-invalid-input'
+ */
+ inputErrorClass: 'is-invalid-input',
+
+ /**
+ * Class selector to use to target Form Errors for show/hide.
+ * @option
+ * @type {string}
+ * @default '.form-error'
+ */
+ formErrorSelector: '.form-error',
+
+ /**
+ * Class added to Form Errors on failed validation.
+ * @option
+ * @type {string}
+ * @default 'is-visible'
+ */
+ formErrorClass: 'is-visible',
+
+ /**
+ * Set to true to validate text inputs on any value change.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ liveValidate: false,
+
+ /**
+ * Set to true to validate inputs on blur.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ validateOnBlur: false,
+
+ patterns: {
+ alpha: /^[a-zA-Z]+$/,
+ alpha_numeric: /^[a-zA-Z0-9]+$/,
+ integer: /^[-+]?\d+$/,
+ number: /^[-+]?\d*(?:[\.\,]\d+)?$/,
+
+ // amex, visa, diners
+ card: /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|(?:222[1-9]|2[3-6][0-9]{2}|27[0-1][0-9]|2720)[0-9]{12}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,
+ cvv: /^([0-9]){3,4}$/,
+
+ // http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
+ email: /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,
+
+ url: /^(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,
+ // abc.de
+ domain: /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,
+
+ datetime: /^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,
+ // YYYY-MM-DD
+ date: /(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,
+ // HH:MM:SS
+ time: /^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,
+ dateISO: /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,
+ // MM/DD/YYYY
+ month_day_year: /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,
+ // DD/MM/YYYY
+ day_month_year: /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,
+
+ // #FFF or #FFFFFF
+ color: /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,
+
+ // Domain || URL
+ website: {
+ test: function (text) {
+ return Abide.defaults.patterns['domain'].test(text) || Abide.defaults.patterns['url'].test(text);
+ }
+ }
+ },
+
+ /**
+ * Optional validation functions to be used. `equalTo` being the only default included function.
+ * Functions should return only a boolean if the input is valid or not. Functions are given the following arguments:
+ * el : The jQuery element to validate.
+ * required : Boolean value of the required attribute be present or not.
+ * parent : The direct parent of the input.
+ * @option
+ */
+ validators: {
+ equalTo: function (el, required, parent) {
+ return __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + el.attr('data-equalto')).val() === el.val();
+ }
+ }
+ };
+
+
+
+ /***/ }),
+ /* 21 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Foundation; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__ = __webpack_require__(4);
+
+
+
+
+
+
+ var FOUNDATION_VERSION = '6.4.3';
+
+ // Global Foundation object
+ // This is attached to the window, or used as a module for AMD/Browserify
+ var Foundation = {
+ version: FOUNDATION_VERSION,
+
+ /**
+ * Stores initialized plugins.
+ */
+ _plugins: {},
+
+ /**
+ * Stores generated unique ids for plugin instances
+ */
+ _uuids: [],
+
+ /**
+ * Defines a Foundation plugin, adding it to the `Foundation` namespace and the list of plugins to initialize when reflowing.
+ * @param {Object} plugin - The constructor of the plugin.
+ */
+ plugin: function (plugin, name) {
+ // Object key to use when adding to global Foundation object
+ // Examples: Foundation.Reveal, Foundation.OffCanvas
+ var className = name || functionName(plugin);
+ // Object key to use when storing the plugin, also used to create the identifying data attribute for the plugin
+ // Examples: data-reveal, data-off-canvas
+ var attrName = hyphenate(className);
+
+ // Add to the Foundation object and the plugins list (for reflowing)
+ this._plugins[attrName] = this[className] = plugin;
+ },
+ /**
+ * @function
+ * Populates the _uuids array with pointers to each individual plugin instance.
+ * Adds the `zfPlugin` data-attribute to programmatically created plugins to allow use of $(selector).foundation(method) calls.
+ * Also fires the initialization event for each plugin, consolidating repetitive code.
+ * @param {Object} plugin - an instance of a plugin, usually `this` in context.
+ * @param {String} name - the name of the plugin, passed as a camelCased string.
+ * @fires Plugin#init
+ */
+ registerPlugin: function (plugin, name) {
+ var pluginName = name ? hyphenate(name) : functionName(plugin.constructor).toLowerCase();
+ plugin.uuid = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__foundation_util_core__["b" /* GetYoDigits */])(6, pluginName);
+
+ if (!plugin.$element.attr('data-' + pluginName)) {
+ plugin.$element.attr('data-' + pluginName, plugin.uuid);
+ }
+ if (!plugin.$element.data('zfPlugin')) {
+ plugin.$element.data('zfPlugin', plugin);
+ }
+ /**
+ * Fires when the plugin has initialized.
+ * @event Plugin#init
+ */
+ plugin.$element.trigger('init.zf.' + pluginName);
+
+ this._uuids.push(plugin.uuid);
+
+ return;
+ },
+ /**
+ * @function
+ * Removes the plugins uuid from the _uuids array.
+ * Removes the zfPlugin data attribute, as well as the data-plugin-name attribute.
+ * Also fires the destroyed event for the plugin, consolidating repetitive code.
+ * @param {Object} plugin - an instance of a plugin, usually `this` in context.
+ * @fires Plugin#destroyed
+ */
+ unregisterPlugin: function (plugin) {
+ var pluginName = hyphenate(functionName(plugin.$element.data('zfPlugin').constructor));
+
+ this._uuids.splice(this._uuids.indexOf(plugin.uuid), 1);
+ plugin.$element.removeAttr('data-' + pluginName).removeData('zfPlugin')
+ /**
+ * Fires when the plugin has been destroyed.
+ * @event Plugin#destroyed
+ */
+ .trigger('destroyed.zf.' + pluginName);
+ for (var prop in plugin) {
+ plugin[prop] = null; //clean up script to prep for garbage collection.
+ }
+ return;
+ },
+
+ /**
+ * @function
+ * Causes one or more active plugins to re-initialize, resetting event listeners, recalculating positions, etc.
+ * @param {String} plugins - optional string of an individual plugin key, attained by calling `$(element).data('pluginName')`, or string of a plugin class i.e. `'dropdown'`
+ * @default If no argument is passed, reflow all currently active plugins.
+ */
+ reInit: function (plugins) {
+ var isJQ = plugins instanceof __WEBPACK_IMPORTED_MODULE_0_jquery___default.a;
+ try {
+ if (isJQ) {
+ plugins.each(function () {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).data('zfPlugin')._init();
+ });
+ } else {
+ var type = typeof plugins,
+ _this = this,
+ fns = {
+ 'object': function (plgs) {
+ plgs.forEach(function (p) {
+ p = hyphenate(p);
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-' + p + ']').foundation('_init');
+ });
+ },
+ 'string': function () {
+ plugins = hyphenate(plugins);
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-' + plugins + ']').foundation('_init');
+ },
+ 'undefined': function () {
+ this['object'](Object.keys(_this._plugins));
+ }
+ };
+ fns[type](plugins);
+ }
+ } catch (err) {
+ console.error(err);
+ } finally {
+ return plugins;
+ }
+ },
+
+ /**
+ * Initialize plugins on any elements within `elem` (and `elem` itself) that aren't already initialized.
+ * @param {Object} elem - jQuery object containing the element to check inside. Also checks the element itself, unless it's the `document` object.
+ * @param {String|Array} plugins - A list of plugins to initialize. Leave this out to initialize everything.
+ */
+ reflow: function (elem, plugins) {
+
+ // If plugins is undefined, just grab everything
+ if (typeof plugins === 'undefined') {
+ plugins = Object.keys(this._plugins);
+ }
+ // If plugins is a string, convert it to an array with one item
+ else if (typeof plugins === 'string') {
+ plugins = [plugins];
+ }
+
+ var _this = this;
+
+ // Iterate through each plugin
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.each(plugins, function (i, name) {
+ // Get the current plugin
+ var plugin = _this._plugins[name];
+
+ // Localize the search to all elements inside elem, as well as elem itself, unless elem === document
+ var $elem = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(elem).find('[data-' + name + ']').addBack('[data-' + name + ']');
+
+ // For each plugin found, initialize it
+ $elem.each(function () {
+ var $el = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ opts = {};
+ // Don't double-dip on plugins
+ if ($el.data('zfPlugin')) {
+ console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
+ return;
+ }
+
+ if ($el.attr('data-options')) {
+ var thing = $el.attr('data-options').split(';').forEach(function (e, i) {
+ var opt = e.split(':').map(function (el) {
+ return el.trim();
+ });
+ if (opt[0]) opts[opt[0]] = parseValue(opt[1]);
+ });
+ }
+ try {
+ $el.data('zfPlugin', new plugin(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this), opts));
+ } catch (er) {
+ console.error(er);
+ } finally {
+ return;
+ }
+ });
+ });
+ },
+ getFnName: functionName,
+
+ addToJquery: function ($) {
+ // TODO: consider not making this a jQuery function
+ // TODO: need way to reflow vs. re-initialize
+ /**
+ * The Foundation jQuery method.
+ * @param {String|Array} method - An action to perform on the current jQuery object.
+ */
+ var foundation = function (method) {
+ var type = typeof method,
+ $noJS = $('.no-js');
+
+ if ($noJS.length) {
+ $noJS.removeClass('no-js');
+ }
+
+ if (type === 'undefined') {
+ //needs to initialize the Foundation object, or an individual plugin.
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__["a" /* MediaQuery */]._init();
+ Foundation.reflow(this);
+ } else if (type === 'string') {
+ //an individual method to invoke on a plugin or group of plugins
+ var args = Array.prototype.slice.call(arguments, 1); //collect all the arguments, if necessary
+ var plugClass = this.data('zfPlugin'); //determine the class of plugin
+
+ if (plugClass !== undefined && plugClass[method] !== undefined) {
+ //make sure both the class and method exist
+ if (this.length === 1) {
+ //if there's only one, call it directly.
+ plugClass[method].apply(plugClass, args);
+ } else {
+ this.each(function (i, el) {
+ //otherwise loop through the jQuery collection and invoke the method on each
+ plugClass[method].apply($(el).data('zfPlugin'), args);
+ });
+ }
+ } else {
+ //error for no class or no method
+ throw new ReferenceError("We're sorry, '" + method + "' is not an available method for " + (plugClass ? functionName(plugClass) : 'this element') + '.');
+ }
+ } else {
+ //error for invalid argument type
+ throw new TypeError('We\'re sorry, ' + type + ' is not a valid parameter. You must use a string representing the method you wish to invoke.');
+ }
+ return this;
+ };
+ $.fn.foundation = foundation;
+ return $;
+ }
+ };
+
+ Foundation.util = {
+ /**
+ * Function for applying a debounce effect to a function call.
+ * @function
+ * @param {Function} func - Function to be called at end of timeout.
+ * @param {Number} delay - Time in ms to delay the call of `func`.
+ * @returns function
+ */
+ throttle: function (func, delay) {
+ var timer = null;
+
+ return function () {
+ var context = this,
+ args = arguments;
+
+ if (timer === null) {
+ timer = setTimeout(function () {
+ func.apply(context, args);
+ timer = null;
+ }, delay);
+ }
+ };
+ }
+ };
+
+ window.Foundation = Foundation;
+
+ // Polyfill for requestAnimationFrame
+ (function () {
+ if (!Date.now || !window.Date.now) window.Date.now = Date.now = function () {
+ return new Date().getTime();
+ };
+
+ var vendors = ['webkit', 'moz'];
+ for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
+ var vp = vendors[i];
+ window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
+ window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame'];
+ }
+ if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+ var lastTime = 0;
+ window.requestAnimationFrame = function (callback) {
+ var now = Date.now();
+ var nextTime = Math.max(lastTime + 16, now);
+ return setTimeout(function () {
+ callback(lastTime = nextTime);
+ }, nextTime - now);
+ };
+ window.cancelAnimationFrame = clearTimeout;
+ }
+ /**
+ * Polyfill for performance.now, required by rAF
+ */
+ if (!window.performance || !window.performance.now) {
+ window.performance = {
+ start: Date.now(),
+ now: function () {
+ return Date.now() - this.start;
+ }
+ };
+ }
+ })();
+ if (!Function.prototype.bind) {
+ Function.prototype.bind = function (oThis) {
+ if (typeof this !== 'function') {
+ // closest thing possible to the ECMAScript 5
+ // internal IsCallable function
+ throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+ }
+
+ var aArgs = Array.prototype.slice.call(arguments, 1),
+ fToBind = this,
+ fNOP = function () {},
+ fBound = function () {
+ return fToBind.apply(this instanceof fNOP ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
+ };
+
+ if (this.prototype) {
+ // native functions don't have a prototype
+ fNOP.prototype = this.prototype;
+ }
+ fBound.prototype = new fNOP();
+
+ return fBound;
+ };
+ }
+ // Polyfill to get the name of a function in IE9
+ function functionName(fn) {
+ if (Function.prototype.name === undefined) {
+ var funcNameRegex = /function\s([^(]{1,})\(/;
+ var results = funcNameRegex.exec(fn.toString());
+ return results && results.length > 1 ? results[1].trim() : "";
+ } else if (fn.prototype === undefined) {
+ return fn.constructor.name;
+ } else {
+ return fn.prototype.constructor.name;
+ }
+ }
+ function parseValue(str) {
+ if ('true' === str) return true;else if ('false' === str) return false;else if (!isNaN(str * 1)) return parseFloat(str);
+ return str;
+ }
+ // Convert PascalCase to kebab-case
+ // Thank you: http://stackoverflow.com/a/8955580
+ function hyphenate(str) {
+ return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+ }
+
+
+
+ /***/ }),
+ /* 22 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Dropdown; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__ = __webpack_require__(3);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_positionable__ = __webpack_require__(15);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_util_triggers__ = __webpack_require__(5);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+
+
+
+ /**
+ * Dropdown module.
+ * @module foundation.dropdown
+ * @requires foundation.util.keyboard
+ * @requires foundation.util.box
+ * @requires foundation.util.triggers
+ */
+
+ var Dropdown = function (_Positionable) {
+ _inherits(Dropdown, _Positionable);
+
+ function Dropdown() {
+ _classCallCheck(this, Dropdown);
+
+ return _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).apply(this, arguments));
+ }
+
+ _createClass(Dropdown, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of a dropdown.
+ * @class
+ * @name Dropdown
+ * @param {jQuery} element - jQuery object to make into a dropdown.
+ * Object should be of the dropdown panel, rather than its anchor.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Dropdown.defaults, this.$element.data(), options);
+ this.className = 'Dropdown'; // ie9 back compat
+
+ // Triggers init is idempotent, just need to make sure it is initialized
+ __WEBPACK_IMPORTED_MODULE_4__foundation_util_triggers__["a" /* Triggers */].init(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a);
+
+ this._init();
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].register('Dropdown', {
+ 'ENTER': 'open',
+ 'SPACE': 'open',
+ 'ESCAPE': 'close'
+ });
+ }
+
+ /**
+ * Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ var $id = this.$element.attr('id');
+
+ this.$anchors = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-toggle="' + $id + '"]').length ? __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-toggle="' + $id + '"]') : __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-open="' + $id + '"]');
+ this.$anchors.attr({
+ 'aria-controls': $id,
+ 'data-is-focus': false,
+ 'data-yeti-box': $id,
+ 'aria-haspopup': true,
+ 'aria-expanded': false
+ });
+
+ this._setCurrentAnchor(this.$anchors.first());
+
+ if (this.options.parentClass) {
+ this.$parent = this.$element.parents('.' + this.options.parentClass);
+ } else {
+ this.$parent = null;
+ }
+
+ this.$element.attr({
+ 'aria-hidden': 'true',
+ 'data-yeti-box': $id,
+ 'data-resize': $id,
+ 'aria-labelledby': this.$currentAnchor.id || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__foundation_util_core__["b" /* GetYoDigits */])(6, 'dd-anchor')
+ });
+ _get(Dropdown.prototype.__proto__ || Object.getPrototypeOf(Dropdown.prototype), '_init', this).call(this);
+ this._events();
+ }
+ }, {
+ key: '_getDefaultPosition',
+ value: function _getDefaultPosition() {
+ // handle legacy classnames
+ var position = this.$element[0].className.match(/(top|left|right|bottom)/g);
+ if (position) {
+ return position[0];
+ } else {
+ return 'bottom';
+ }
+ }
+ }, {
+ key: '_getDefaultAlignment',
+ value: function _getDefaultAlignment() {
+ // handle legacy float approach
+ var horizontalPosition = /float-(\S+)/.exec(this.$currentAnchor.className);
+ if (horizontalPosition) {
+ return horizontalPosition[1];
+ }
+
+ return _get(Dropdown.prototype.__proto__ || Object.getPrototypeOf(Dropdown.prototype), '_getDefaultAlignment', this).call(this);
+ }
+
+ /**
+ * Sets the position and orientation of the dropdown pane, checks for collisions if allow-overlap is not true.
+ * Recursively calls itself if a collision is detected, with a new position class.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_setPosition',
+ value: function _setPosition() {
+ _get(Dropdown.prototype.__proto__ || Object.getPrototypeOf(Dropdown.prototype), '_setPosition', this).call(this, this.$currentAnchor, this.$element, this.$parent);
+ }
+
+ /**
+ * Make it a current anchor.
+ * Current anchor as the reference for the position of Dropdown panes.
+ * @param {HTML} el - DOM element of the anchor.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_setCurrentAnchor',
+ value: function _setCurrentAnchor(el) {
+ this.$currentAnchor = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(el);
+ }
+
+ /**
+ * Adds event listeners to the element utilizing the triggers utility library.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this;
+ this.$element.on({
+ 'open.zf.trigger': this.open.bind(this),
+ 'close.zf.trigger': this.close.bind(this),
+ 'toggle.zf.trigger': this.toggle.bind(this),
+ 'resizeme.zf.trigger': this._setPosition.bind(this)
+ });
+
+ this.$anchors.off('click.zf.trigger').on('click.zf.trigger', function () {
+ _this._setCurrentAnchor(this);
+ });
+
+ if (this.options.hover) {
+ this.$anchors.off('mouseenter.zf.dropdown mouseleave.zf.dropdown').on('mouseenter.zf.dropdown', function () {
+ _this._setCurrentAnchor(this);
+
+ var bodyData = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('body').data();
+ if (typeof bodyData.whatinput === 'undefined' || bodyData.whatinput === 'mouse') {
+ clearTimeout(_this.timeout);
+ _this.timeout = setTimeout(function () {
+ _this.open();
+ _this.$anchors.data('hover', true);
+ }, _this.options.hoverDelay);
+ }
+ }).on('mouseleave.zf.dropdown', function () {
+ clearTimeout(_this.timeout);
+ _this.timeout = setTimeout(function () {
+ _this.close();
+ _this.$anchors.data('hover', false);
+ }, _this.options.hoverDelay);
+ });
+ if (this.options.hoverPane) {
+ this.$element.off('mouseenter.zf.dropdown mouseleave.zf.dropdown').on('mouseenter.zf.dropdown', function () {
+ clearTimeout(_this.timeout);
+ }).on('mouseleave.zf.dropdown', function () {
+ clearTimeout(_this.timeout);
+ _this.timeout = setTimeout(function () {
+ _this.close();
+ _this.$anchors.data('hover', false);
+ }, _this.options.hoverDelay);
+ });
+ }
+ }
+ this.$anchors.add(this.$element).on('keydown.zf.dropdown', function (e) {
+
+ var $target = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ visibleFocusableElements = __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].findFocusable(_this.$element);
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].handleKey(e, 'Dropdown', {
+ open: function () {
+ if ($target.is(_this.$anchors)) {
+ _this.open();
+ _this.$element.attr('tabindex', -1).focus();
+ e.preventDefault();
+ }
+ },
+ close: function () {
+ _this.close();
+ _this.$anchors.focus();
+ }
+ });
+ });
+ }
+
+ /**
+ * Adds an event handler to the body to close any dropdowns on a click.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_addBodyHandler',
+ value: function _addBodyHandler() {
+ var $body = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(document.body).not(this.$element),
+ _this = this;
+ $body.off('click.zf.dropdown').on('click.zf.dropdown', function (e) {
+ if (_this.$anchors.is(e.target) || _this.$anchors.find(e.target).length) {
+ return;
+ }
+ if (_this.$element.find(e.target).length) {
+ return;
+ }
+ _this.close();
+ $body.off('click.zf.dropdown');
+ });
+ }
+
+ /**
+ * Opens the dropdown pane, and fires a bubbling event to close other dropdowns.
+ * @function
+ * @fires Dropdown#closeme
+ * @fires Dropdown#show
+ */
+
+ }, {
+ key: 'open',
+ value: function open() {
+ // var _this = this;
+ /**
+ * Fires to close other open dropdowns, typically when dropdown is opening
+ * @event Dropdown#closeme
+ */
+ this.$element.trigger('closeme.zf.dropdown', this.$element.attr('id'));
+ this.$anchors.addClass('hover').attr({ 'aria-expanded': true });
+ // this.$element/*.show()*/;
+
+ this.$element.addClass('is-opening');
+ this._setPosition();
+ this.$element.removeClass('is-opening').addClass('is-open').attr({ 'aria-hidden': false });
+
+ if (this.options.autoFocus) {
+ var $focusable = __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].findFocusable(this.$element);
+ if ($focusable.length) {
+ $focusable.eq(0).focus();
+ }
+ }
+
+ if (this.options.closeOnClick) {
+ this._addBodyHandler();
+ }
+
+ if (this.options.trapFocus) {
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].trapFocus(this.$element);
+ }
+
+ /**
+ * Fires once the dropdown is visible.
+ * @event Dropdown#show
+ */
+ this.$element.trigger('show.zf.dropdown', [this.$element]);
+ }
+
+ /**
+ * Closes the open dropdown pane.
+ * @function
+ * @fires Dropdown#hide
+ */
+
+ }, {
+ key: 'close',
+ value: function close() {
+ if (!this.$element.hasClass('is-open')) {
+ return false;
+ }
+ this.$element.removeClass('is-open').attr({ 'aria-hidden': true });
+
+ this.$anchors.removeClass('hover').attr('aria-expanded', false);
+
+ /**
+ * Fires once the dropdown is no longer visible.
+ * @event Dropdown#hide
+ */
+ this.$element.trigger('hide.zf.dropdown', [this.$element]);
+
+ if (this.options.trapFocus) {
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].releaseFocus(this.$element);
+ }
+ }
+
+ /**
+ * Toggles the dropdown pane's visibility.
+ * @function
+ */
+
+ }, {
+ key: 'toggle',
+ value: function toggle() {
+ if (this.$element.hasClass('is-open')) {
+ if (this.$anchors.data('hover')) return;
+ this.close();
+ } else {
+ this.open();
+ }
+ }
+
+ /**
+ * Destroys the dropdown.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.$element.off('.zf.trigger').hide();
+ this.$anchors.off('.zf.dropdown');
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(document.body).off('click.zf.dropdown');
+ }
+ }]);
+
+ return Dropdown;
+ }(__WEBPACK_IMPORTED_MODULE_3__foundation_positionable__["a" /* Positionable */]);
+
+ Dropdown.defaults = {
+ /**
+ * Class that designates bounding container of Dropdown (default: window)
+ * @option
+ * @type {?string}
+ * @default null
+ */
+ parentClass: null,
+ /**
+ * Amount of time to delay opening a submenu on hover event.
+ * @option
+ * @type {number}
+ * @default 250
+ */
+ hoverDelay: 250,
+ /**
+ * Allow submenus to open on hover events
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ hover: false,
+ /**
+ * Don't close dropdown when hovering over dropdown pane
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ hoverPane: false,
+ /**
+ * Number of pixels between the dropdown pane and the triggering element on open.
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ vOffset: 0,
+ /**
+ * Number of pixels between the dropdown pane and the triggering element on open.
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ hOffset: 0,
+ /**
+ * DEPRECATED: Class applied to adjust open position.
+ * @option
+ * @type {string}
+ * @default ''
+ */
+ positionClass: '',
+
+ /**
+ * Position of dropdown. Can be left, right, bottom, top, or auto.
+ * @option
+ * @type {string}
+ * @default 'auto'
+ */
+ position: 'auto',
+ /**
+ * Alignment of dropdown relative to anchor. Can be left, right, bottom, top, center, or auto.
+ * @option
+ * @type {string}
+ * @default 'auto'
+ */
+ alignment: 'auto',
+ /**
+ * Allow overlap of container/window. If false, dropdown will first try to position as defined by data-position and data-alignment, but reposition if it would cause an overflow.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ allowOverlap: false,
+ /**
+ * Allow overlap of only the bottom of the container. This is the most common
+ * behavior for dropdowns, allowing the dropdown to extend the bottom of the
+ * screen but not otherwise influence or break out of the container.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ allowBottomOverlap: true,
+ /**
+ * Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ trapFocus: false,
+ /**
+ * Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ autoFocus: false,
+ /**
+ * Allows a click on the body to close the dropdown.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ closeOnClick: false
+ };
+
+
+
+ /***/ }),
+ /* 23 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Equalizer; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__ = __webpack_require__(4);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_imageLoader__ = __webpack_require__(8);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_plugin__ = __webpack_require__(2);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+
+
+ /**
+ * Equalizer module.
+ * @module foundation.equalizer
+ * @requires foundation.util.mediaQuery
+ * @requires foundation.util.imageLoader if equalizer contains images
+ */
+
+ var Equalizer = function (_Plugin) {
+ _inherits(Equalizer, _Plugin);
+
+ function Equalizer() {
+ _classCallCheck(this, Equalizer);
+
+ return _possibleConstructorReturn(this, (Equalizer.__proto__ || Object.getPrototypeOf(Equalizer)).apply(this, arguments));
+ }
+
+ _createClass(Equalizer, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of Equalizer.
+ * @class
+ * @name Equalizer
+ * @fires Equalizer#init
+ * @param {Object} element - jQuery object to add the trigger to.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Equalizer.defaults, this.$element.data(), options);
+ this.className = 'Equalizer'; // ie9 back compat
+
+ this._init();
+ }
+
+ /**
+ * Initializes the Equalizer plugin and calls functions to get equalizer functioning on load.
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ var eqId = this.$element.attr('data-equalizer') || '';
+ var $watched = this.$element.find('[data-equalizer-watch="' + eqId + '"]');
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */]._init();
+
+ this.$watched = $watched.length ? $watched : this.$element.find('[data-equalizer-watch]');
+ this.$element.attr('data-resize', eqId || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["b" /* GetYoDigits */])(6, 'eq'));
+ this.$element.attr('data-mutate', eqId || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["b" /* GetYoDigits */])(6, 'eq'));
+
+ this.hasNested = this.$element.find('[data-equalizer]').length > 0;
+ this.isNested = this.$element.parentsUntil(document.body, '[data-equalizer]').length > 0;
+ this.isOn = false;
+ this._bindHandler = {
+ onResizeMeBound: this._onResizeMe.bind(this),
+ onPostEqualizedBound: this._onPostEqualized.bind(this)
+ };
+
+ var imgs = this.$element.find('img');
+ var tooSmall;
+ if (this.options.equalizeOn) {
+ tooSmall = this._checkMQ();
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).on('changed.zf.mediaquery', this._checkMQ.bind(this));
+ } else {
+ this._events();
+ }
+ if (tooSmall !== undefined && tooSmall === false || tooSmall === undefined) {
+ if (imgs.length) {
+ __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__foundation_util_imageLoader__["a" /* onImagesLoaded */])(imgs, this._reflow.bind(this));
+ } else {
+ this._reflow();
+ }
+ }
+ }
+
+ /**
+ * Removes event listeners if the breakpoint is too small.
+ * @private
+ */
+
+ }, {
+ key: '_pauseEvents',
+ value: function _pauseEvents() {
+ this.isOn = false;
+ this.$element.off({
+ '.zf.equalizer': this._bindHandler.onPostEqualizedBound,
+ 'resizeme.zf.trigger': this._bindHandler.onResizeMeBound,
+ 'mutateme.zf.trigger': this._bindHandler.onResizeMeBound
+ });
+ }
+
+ /**
+ * function to handle $elements resizeme.zf.trigger, with bound this on _bindHandler.onResizeMeBound
+ * @private
+ */
+
+ }, {
+ key: '_onResizeMe',
+ value: function _onResizeMe(e) {
+ this._reflow();
+ }
+
+ /**
+ * function to handle $elements postequalized.zf.equalizer, with bound this on _bindHandler.onPostEqualizedBound
+ * @private
+ */
+
+ }, {
+ key: '_onPostEqualized',
+ value: function _onPostEqualized(e) {
+ if (e.target !== this.$element[0]) {
+ this._reflow();
+ }
+ }
+
+ /**
+ * Initializes events for Equalizer.
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this;
+ this._pauseEvents();
+ if (this.hasNested) {
+ this.$element.on('postequalized.zf.equalizer', this._bindHandler.onPostEqualizedBound);
+ } else {
+ this.$element.on('resizeme.zf.trigger', this._bindHandler.onResizeMeBound);
+ this.$element.on('mutateme.zf.trigger', this._bindHandler.onResizeMeBound);
+ }
+ this.isOn = true;
+ }
+
+ /**
+ * Checks the current breakpoint to the minimum required size.
+ * @private
+ */
+
+ }, {
+ key: '_checkMQ',
+ value: function _checkMQ() {
+ var tooSmall = !__WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */].is(this.options.equalizeOn);
+ if (tooSmall) {
+ if (this.isOn) {
+ this._pauseEvents();
+ this.$watched.css('height', 'auto');
+ }
+ } else {
+ if (!this.isOn) {
+ this._events();
+ }
+ }
+ return tooSmall;
+ }
+
+ /**
+ * A noop version for the plugin
+ * @private
+ */
+
+ }, {
+ key: '_killswitch',
+ value: function _killswitch() {
+ return;
+ }
+
+ /**
+ * Calls necessary functions to update Equalizer upon DOM change
+ * @private
+ */
+
+ }, {
+ key: '_reflow',
+ value: function _reflow() {
+ if (!this.options.equalizeOnStack) {
+ if (this._isStacked()) {
+ this.$watched.css('height', 'auto');
+ return false;
+ }
+ }
+ if (this.options.equalizeByRow) {
+ this.getHeightsByRow(this.applyHeightByRow.bind(this));
+ } else {
+ this.getHeights(this.applyHeight.bind(this));
+ }
+ }
+
+ /**
+ * Manually determines if the first 2 elements are *NOT* stacked.
+ * @private
+ */
+
+ }, {
+ key: '_isStacked',
+ value: function _isStacked() {
+ if (!this.$watched[0] || !this.$watched[1]) {
+ return true;
+ }
+ return this.$watched[0].getBoundingClientRect().top !== this.$watched[1].getBoundingClientRect().top;
+ }
+
+ /**
+ * Finds the outer heights of children contained within an Equalizer parent and returns them in an array
+ * @param {Function} cb - A non-optional callback to return the heights array to.
+ * @returns {Array} heights - An array of heights of children within Equalizer container
+ */
+
+ }, {
+ key: 'getHeights',
+ value: function getHeights(cb) {
+ var heights = [];
+ for (var i = 0, len = this.$watched.length; i < len; i++) {
+ this.$watched[i].style.height = 'auto';
+ heights.push(this.$watched[i].offsetHeight);
+ }
+ cb(heights);
+ }
+
+ /**
+ * Finds the outer heights of children contained within an Equalizer parent and returns them in an array
+ * @param {Function} cb - A non-optional callback to return the heights array to.
+ * @returns {Array} groups - An array of heights of children within Equalizer container grouped by row with element,height and max as last child
+ */
+
+ }, {
+ key: 'getHeightsByRow',
+ value: function getHeightsByRow(cb) {
+ var lastElTopOffset = this.$watched.length ? this.$watched.first().offset().top : 0,
+ groups = [],
+ group = 0;
+ //group by Row
+ groups[group] = [];
+ for (var i = 0, len = this.$watched.length; i < len; i++) {
+ this.$watched[i].style.height = 'auto';
+ //maybe could use this.$watched[i].offsetTop
+ var elOffsetTop = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this.$watched[i]).offset().top;
+ if (elOffsetTop != lastElTopOffset) {
+ group++;
+ groups[group] = [];
+ lastElTopOffset = elOffsetTop;
+ }
+ groups[group].push([this.$watched[i], this.$watched[i].offsetHeight]);
+ }
+
+ for (var j = 0, ln = groups.length; j < ln; j++) {
+ var heights = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(groups[j]).map(function () {
+ return this[1];
+ }).get();
+ var max = Math.max.apply(null, heights);
+ groups[j].push(max);
+ }
+ cb(groups);
+ }
+
+ /**
+ * Changes the CSS height property of each child in an Equalizer parent to match the tallest
+ * @param {array} heights - An array of heights of children within Equalizer container
+ * @fires Equalizer#preequalized
+ * @fires Equalizer#postequalized
+ */
+
+ }, {
+ key: 'applyHeight',
+ value: function applyHeight(heights) {
+ var max = Math.max.apply(null, heights);
+ /**
+ * Fires before the heights are applied
+ * @event Equalizer#preequalized
+ */
+ this.$element.trigger('preequalized.zf.equalizer');
+
+ this.$watched.css('height', max);
+
+ /**
+ * Fires when the heights have been applied
+ * @event Equalizer#postequalized
+ */
+ this.$element.trigger('postequalized.zf.equalizer');
+ }
+
+ /**
+ * Changes the CSS height property of each child in an Equalizer parent to match the tallest by row
+ * @param {array} groups - An array of heights of children within Equalizer container grouped by row with element,height and max as last child
+ * @fires Equalizer#preequalized
+ * @fires Equalizer#preequalizedrow
+ * @fires Equalizer#postequalizedrow
+ * @fires Equalizer#postequalized
+ */
+
+ }, {
+ key: 'applyHeightByRow',
+ value: function applyHeightByRow(groups) {
+ /**
+ * Fires before the heights are applied
+ */
+ this.$element.trigger('preequalized.zf.equalizer');
+ for (var i = 0, len = groups.length; i < len; i++) {
+ var groupsILength = groups[i].length,
+ max = groups[i][groupsILength - 1];
+ if (groupsILength <= 2) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(groups[i][0][0]).css({ 'height': 'auto' });
+ continue;
+ }
+ /**
+ * Fires before the heights per row are applied
+ * @event Equalizer#preequalizedrow
+ */
+ this.$element.trigger('preequalizedrow.zf.equalizer');
+ for (var j = 0, lenJ = groupsILength - 1; j < lenJ; j++) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(groups[i][j][0]).css({ 'height': max });
+ }
+ /**
+ * Fires when the heights per row have been applied
+ * @event Equalizer#postequalizedrow
+ */
+ this.$element.trigger('postequalizedrow.zf.equalizer');
+ }
+ /**
+ * Fires when the heights have been applied
+ */
+ this.$element.trigger('postequalized.zf.equalizer');
+ }
+
+ /**
+ * Destroys an instance of Equalizer.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this._pauseEvents();
+ this.$watched.css('height', 'auto');
+ }
+ }]);
+
+ return Equalizer;
+ }(__WEBPACK_IMPORTED_MODULE_4__foundation_plugin__["a" /* Plugin */]);
+
+ /**
+ * Default settings for plugin
+ */
+
+
+ Equalizer.defaults = {
+ /**
+ * Enable height equalization when stacked on smaller screens.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ equalizeOnStack: false,
+ /**
+ * Enable height equalization row by row.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ equalizeByRow: false,
+ /**
+ * String representing the minimum breakpoint size the plugin should equalize heights on.
+ * @option
+ * @type {string}
+ * @default ''
+ */
+ equalizeOn: ''
+ };
+
+
+
+ /***/ }),
+ /* 24 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Interchange; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__ = __webpack_require__(4);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_plugin__ = __webpack_require__(2);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_core__ = __webpack_require__(1);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+
+ /**
+ * Interchange module.
+ * @module foundation.interchange
+ * @requires foundation.util.mediaQuery
+ */
+
+ var Interchange = function (_Plugin) {
+ _inherits(Interchange, _Plugin);
+
+ function Interchange() {
+ _classCallCheck(this, Interchange);
+
+ return _possibleConstructorReturn(this, (Interchange.__proto__ || Object.getPrototypeOf(Interchange)).apply(this, arguments));
+ }
+
+ _createClass(Interchange, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of Interchange.
+ * @class
+ * @name Interchange
+ * @fires Interchange#init
+ * @param {Object} element - jQuery object to add the trigger to.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Interchange.defaults, options);
+ this.rules = [];
+ this.currentPath = '';
+ this.className = 'Interchange'; // ie9 back compat
+
+ this._init();
+ this._events();
+ }
+
+ /**
+ * Initializes the Interchange plugin and calls functions to get interchange functioning on load.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */]._init();
+
+ var id = this.$element[0].id || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["b" /* GetYoDigits */])(6, 'interchange');
+ this.$element.attr({
+ 'data-resize': id,
+ 'id': id
+ });
+
+ this._addBreakpoints();
+ this._generateRules();
+ this._reflow();
+ }
+
+ /**
+ * Initializes events for Interchange.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this3 = this;
+
+ this.$element.off('resizeme.zf.trigger').on('resizeme.zf.trigger', function () {
+ return _this3._reflow();
+ });
+ }
+
+ /**
+ * Calls necessary functions to update Interchange upon DOM change
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_reflow',
+ value: function _reflow() {
+ var match;
+
+ // Iterate through each rule, but only save the last match
+ for (var i in this.rules) {
+ if (this.rules.hasOwnProperty(i)) {
+ var rule = this.rules[i];
+ if (window.matchMedia(rule.query).matches) {
+ match = rule;
+ }
+ }
+ }
+
+ if (match) {
+ this.replace(match.path);
+ }
+ }
+
+ /**
+ * Gets the Foundation breakpoints and adds them to the Interchange.SPECIAL_QUERIES object.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_addBreakpoints',
+ value: function _addBreakpoints() {
+ for (var i in __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */].queries) {
+ if (__WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */].queries.hasOwnProperty(i)) {
+ var query = __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */].queries[i];
+ Interchange.SPECIAL_QUERIES[query.name] = query.value;
+ }
+ }
+ }
+
+ /**
+ * Checks the Interchange element for the provided media query + content pairings
+ * @function
+ * @private
+ * @param {Object} element - jQuery object that is an Interchange instance
+ * @returns {Array} scenarios - Array of objects that have 'mq' and 'path' keys with corresponding keys
+ */
+
+ }, {
+ key: '_generateRules',
+ value: function _generateRules(element) {
+ var rulesList = [];
+ var rules;
+
+ if (this.options.rules) {
+ rules = this.options.rules;
+ } else {
+ rules = this.$element.data('interchange');
+ }
+
+ rules = typeof rules === 'string' ? rules.match(/\[.*?\]/g) : rules;
+
+ for (var i in rules) {
+ if (rules.hasOwnProperty(i)) {
+ var rule = rules[i].slice(1, -1).split(', ');
+ var path = rule.slice(0, -1).join('');
+ var query = rule[rule.length - 1];
+
+ if (Interchange.SPECIAL_QUERIES[query]) {
+ query = Interchange.SPECIAL_QUERIES[query];
+ }
+
+ rulesList.push({
+ path: path,
+ query: query
+ });
+ }
+ }
+
+ this.rules = rulesList;
+ }
+
+ /**
+ * Update the `src` property of an image, or change the HTML of a container, to the specified path.
+ * @function
+ * @param {String} path - Path to the image or HTML partial.
+ * @fires Interchange#replaced
+ */
+
+ }, {
+ key: 'replace',
+ value: function replace(path) {
+ if (this.currentPath === path) return;
+
+ var _this = this,
+ trigger = 'replaced.zf.interchange';
+
+ // Replacing images
+ if (this.$element[0].nodeName === 'IMG') {
+ this.$element.attr('src', path).on('load', function () {
+ _this.currentPath = path;
+ }).trigger(trigger);
+ }
+ // Replacing background images
+ else if (path.match(/\.(gif|jpg|jpeg|png|svg|tiff)([?#].*)?/i)) {
+ path = path.replace(/\(/g, '%28').replace(/\)/g, '%29');
+ this.$element.css({ 'background-image': 'url(' + path + ')' }).trigger(trigger);
+ }
+ // Replacing HTML
+ else {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.get(path, function (response) {
+ _this.$element.html(response).trigger(trigger);
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(response).foundation();
+ _this.currentPath = path;
+ });
+ }
+
+ /**
+ * Fires when content in an Interchange element is done being loaded.
+ * @event Interchange#replaced
+ */
+ // this.$element.trigger('replaced.zf.interchange');
+ }
+
+ /**
+ * Destroys an instance of interchange.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.$element.off('resizeme.zf.trigger');
+ }
+ }]);
+
+ return Interchange;
+ }(__WEBPACK_IMPORTED_MODULE_2__foundation_plugin__["a" /* Plugin */]);
+
+ /**
+ * Default settings for plugin
+ */
+
+
+ Interchange.defaults = {
+ /**
+ * Rules to be applied to Interchange elements. Set with the `data-interchange` array notation.
+ * @option
+ * @type {?array}
+ * @default null
+ */
+ rules: null
+ };
+
+ Interchange.SPECIAL_QUERIES = {
+ 'landscape': 'screen and (orientation: landscape)',
+ 'portrait': 'screen and (orientation: portrait)',
+ 'retina': 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'
+ };
+
+
+
+ /***/ }),
+ /* 25 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Magellan; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_plugin__ = __webpack_require__(2);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_smoothScroll__ = __webpack_require__(16);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+
+ /**
+ * Magellan module.
+ * @module foundation.magellan
+ * @requires foundation.smoothScroll
+ */
+
+ var Magellan = function (_Plugin) {
+ _inherits(Magellan, _Plugin);
+
+ function Magellan() {
+ _classCallCheck(this, Magellan);
+
+ return _possibleConstructorReturn(this, (Magellan.__proto__ || Object.getPrototypeOf(Magellan)).apply(this, arguments));
+ }
+
+ _createClass(Magellan, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of Magellan.
+ * @class
+ * @name Magellan
+ * @fires Magellan#init
+ * @param {Object} element - jQuery object to add the trigger to.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Magellan.defaults, this.$element.data(), options);
+ this.className = 'Magellan'; // ie9 back compat
+
+ this._init();
+ this.calcPoints();
+ }
+
+ /**
+ * Initializes the Magellan plugin and calls functions to get equalizer functioning on load.
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ var id = this.$element[0].id || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__foundation_util_core__["b" /* GetYoDigits */])(6, 'magellan');
+ var _this = this;
+ this.$targets = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-magellan-target]');
+ this.$links = this.$element.find('a');
+ this.$element.attr({
+ 'data-resize': id,
+ 'data-scroll': id,
+ 'id': id
+ });
+ this.$active = __WEBPACK_IMPORTED_MODULE_0_jquery___default()();
+ this.scrollPos = parseInt(window.pageYOffset, 10);
+
+ this._events();
+ }
+
+ /**
+ * Calculates an array of pixel values that are the demarcation lines between locations on the page.
+ * Can be invoked if new elements are added or the size of a location changes.
+ * @function
+ */
+
+ }, {
+ key: 'calcPoints',
+ value: function calcPoints() {
+ var _this = this,
+ body = document.body,
+ html = document.documentElement;
+
+ this.points = [];
+ this.winHeight = Math.round(Math.max(window.innerHeight, html.clientHeight));
+ this.docHeight = Math.round(Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight));
+
+ this.$targets.each(function () {
+ var $tar = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ pt = Math.round($tar.offset().top - _this.options.threshold);
+ $tar.targetPoint = pt;
+ _this.points.push(pt);
+ });
+ }
+
+ /**
+ * Initializes events for Magellan.
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this,
+ $body = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('html, body'),
+ opts = {
+ duration: _this.options.animationDuration,
+ easing: _this.options.animationEasing
+ };
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).one('load', function () {
+ if (_this.options.deepLinking) {
+ if (location.hash) {
+ _this.scrollToLoc(location.hash);
+ }
+ }
+ _this.calcPoints();
+ _this._updateActive();
+ });
+
+ this.$element.on({
+ 'resizeme.zf.trigger': this.reflow.bind(this),
+ 'scrollme.zf.trigger': this._updateActive.bind(this)
+ }).on('click.zf.magellan', 'a[href^="#"]', function (e) {
+ e.preventDefault();
+ var arrival = this.getAttribute('href');
+ _this.scrollToLoc(arrival);
+ });
+
+ this._deepLinkScroll = function (e) {
+ if (_this.options.deepLinking) {
+ _this.scrollToLoc(window.location.hash);
+ }
+ };
+
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).on('popstate', this._deepLinkScroll);
+ }
+
+ /**
+ * Function to scroll to a given location on the page.
+ * @param {String} loc - a properly formatted jQuery id selector. Example: '#foo'
+ * @function
+ */
+
+ }, {
+ key: 'scrollToLoc',
+ value: function scrollToLoc(loc) {
+ this._inTransition = true;
+ var _this = this;
+
+ var options = {
+ animationEasing: this.options.animationEasing,
+ animationDuration: this.options.animationDuration,
+ threshold: this.options.threshold,
+ offset: this.options.offset
+ };
+
+ __WEBPACK_IMPORTED_MODULE_3__foundation_smoothScroll__["a" /* SmoothScroll */].scrollToLoc(loc, options, function () {
+ _this._inTransition = false;
+ _this._updateActive();
+ });
+ }
+
+ /**
+ * Calls necessary functions to update Magellan upon DOM change
+ * @function
+ */
+
+ }, {
+ key: 'reflow',
+ value: function reflow() {
+ this.calcPoints();
+ this._updateActive();
+ }
+
+ /**
+ * Updates the visibility of an active location link, and updates the url hash for the page, if deepLinking enabled.
+ * @private
+ * @function
+ * @fires Magellan#update
+ */
+
+ }, {
+ key: '_updateActive',
+ value: function _updateActive() /*evt, elem, scrollPos*/{
+ if (this._inTransition) {
+ return;
+ }
+ var winPos = /*scrollPos ||*/parseInt(window.pageYOffset, 10),
+ curIdx;
+
+ if (winPos + this.winHeight === this.docHeight) {
+ curIdx = this.points.length - 1;
+ } else if (winPos < this.points[0]) {
+ curIdx = undefined;
+ } else {
+ var isDown = this.scrollPos < winPos,
+ _this = this,
+ curVisible = this.points.filter(function (p, i) {
+ return isDown ? p - _this.options.offset <= winPos : p - _this.options.offset - _this.options.threshold <= winPos;
+ });
+ curIdx = curVisible.length ? curVisible.length - 1 : 0;
+ }
+
+ this.$active.removeClass(this.options.activeClass);
+ this.$active = this.$links.filter('[href="#' + this.$targets.eq(curIdx).data('magellan-target') + '"]').addClass(this.options.activeClass);
+
+ if (this.options.deepLinking) {
+ var hash = "";
+ if (curIdx != undefined) {
+ hash = this.$active[0].getAttribute('href');
+ }
+ if (hash !== window.location.hash) {
+ if (window.history.pushState) {
+ window.history.pushState(null, null, hash);
+ } else {
+ window.location.hash = hash;
+ }
+ }
+ }
+
+ this.scrollPos = winPos;
+ /**
+ * Fires when magellan is finished updating to the new active element.
+ * @event Magellan#update
+ */
+ this.$element.trigger('update.zf.magellan', [this.$active]);
+ }
+
+ /**
+ * Destroys an instance of Magellan and resets the url of the window.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.$element.off('.zf.trigger .zf.magellan').find('.' + this.options.activeClass).removeClass(this.options.activeClass);
+
+ if (this.options.deepLinking) {
+ var hash = this.$active[0].getAttribute('href');
+ window.location.hash.replace(hash, '');
+ }
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off('popstate', this._deepLinkScroll);
+ }
+ }]);
+
+ return Magellan;
+ }(__WEBPACK_IMPORTED_MODULE_2__foundation_plugin__["a" /* Plugin */]);
+
+ /**
+ * Default settings for plugin
+ */
+
+
+ Magellan.defaults = {
+ /**
+ * Amount of time, in ms, the animated scrolling should take between locations.
+ * @option
+ * @type {number}
+ * @default 500
+ */
+ animationDuration: 500,
+ /**
+ * Animation style to use when scrolling between locations. Can be `'swing'` or `'linear'`.
+ * @option
+ * @type {string}
+ * @default 'linear'
+ * @see {@link https://api.jquery.com/animate|Jquery animate}
+ */
+ animationEasing: 'linear',
+ /**
+ * Number of pixels to use as a marker for location changes.
+ * @option
+ * @type {number}
+ * @default 50
+ */
+ threshold: 50,
+ /**
+ * Class applied to the active locations link on the magellan container.
+ * @option
+ * @type {string}
+ * @default 'is-active'
+ */
+ activeClass: 'is-active',
+ /**
+ * Allows the script to manipulate the url of the current page, and if supported, alter the history.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ deepLinking: false,
+ /**
+ * Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ offset: 0
+ };
+
+
+
+ /***/ }),
+ /* 26 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return OffCanvas; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__ = __webpack_require__(3);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__ = __webpack_require__(4);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_plugin__ = __webpack_require__(2);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__foundation_util_triggers__ = __webpack_require__(5);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+
+
+
+
+ /**
+ * OffCanvas module.
+ * @module foundation.offcanvas
+ * @requires foundation.util.keyboard
+ * @requires foundation.util.mediaQuery
+ * @requires foundation.util.triggers
+ */
+
+ var OffCanvas = function (_Plugin) {
+ _inherits(OffCanvas, _Plugin);
+
+ function OffCanvas() {
+ _classCallCheck(this, OffCanvas);
+
+ return _possibleConstructorReturn(this, (OffCanvas.__proto__ || Object.getPrototypeOf(OffCanvas)).apply(this, arguments));
+ }
+
+ _createClass(OffCanvas, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of an off-canvas wrapper.
+ * @class
+ * @name OffCanvas
+ * @fires OffCanvas#init
+ * @param {Object} element - jQuery object to initialize.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ var _this3 = this;
+
+ this.className = 'OffCanvas'; // ie9 back compat
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, OffCanvas.defaults, this.$element.data(), options);
+ this.contentClasses = { base: [], reveal: [] };
+ this.$lastTrigger = __WEBPACK_IMPORTED_MODULE_0_jquery___default()();
+ this.$triggers = __WEBPACK_IMPORTED_MODULE_0_jquery___default()();
+ this.position = 'left';
+ this.$content = __WEBPACK_IMPORTED_MODULE_0_jquery___default()();
+ this.nested = !!this.options.nested;
+
+ // Defines the CSS transition/position classes of the off-canvas content container.
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(['push', 'overlap']).each(function (index, val) {
+ _this3.contentClasses.base.push('has-transition-' + val);
+ });
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(['left', 'right', 'top', 'bottom']).each(function (index, val) {
+ _this3.contentClasses.base.push('has-position-' + val);
+ _this3.contentClasses.reveal.push('has-reveal-' + val);
+ });
+
+ // Triggers init is idempotent, just need to make sure it is initialized
+ __WEBPACK_IMPORTED_MODULE_5__foundation_util_triggers__["a" /* Triggers */].init(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a);
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__["a" /* MediaQuery */]._init();
+
+ this._init();
+ this._events();
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].register('OffCanvas', {
+ 'ESCAPE': 'close'
+ });
+ }
+
+ /**
+ * Initializes the off-canvas wrapper by adding the exit overlay (if needed).
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ var id = this.$element.attr('id');
+
+ this.$element.attr('aria-hidden', 'true');
+
+ // Find off-canvas content, either by ID (if specified), by siblings or by closest selector (fallback)
+ if (this.options.contentId) {
+ this.$content = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + this.options.contentId);
+ } else if (this.$element.siblings('[data-off-canvas-content]').length) {
+ this.$content = this.$element.siblings('[data-off-canvas-content]').first();
+ } else {
+ this.$content = this.$element.closest('[data-off-canvas-content]').first();
+ }
+
+ if (!this.options.contentId) {
+ // Assume that the off-canvas element is nested if it isn't a sibling of the content
+ this.nested = this.$element.siblings('[data-off-canvas-content]').length === 0;
+ } else if (this.options.contentId && this.options.nested === null) {
+ // Warning if using content ID without setting the nested option
+ // Once the element is nested it is required to work properly in this case
+ console.warn('Remember to use the nested option if using the content ID option!');
+ }
+
+ if (this.nested === true) {
+ // Force transition overlap if nested
+ this.options.transition = 'overlap';
+ // Remove appropriate classes if already assigned in markup
+ this.$element.removeClass('is-transition-push');
+ }
+
+ this.$element.addClass('is-transition-' + this.options.transition + ' is-closed');
+
+ // Find triggers that affect this element and add aria-expanded to them
+ this.$triggers = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(document).find('[data-open="' + id + '"], [data-close="' + id + '"], [data-toggle="' + id + '"]').attr('aria-expanded', 'false').attr('aria-controls', id);
+
+ // Get position by checking for related CSS class
+ this.position = this.$element.is('.position-left, .position-top, .position-right, .position-bottom') ? this.$element.attr('class').match(/position\-(left|top|right|bottom)/)[1] : this.position;
+
+ // Add an overlay over the content if necessary
+ if (this.options.contentOverlay === true) {
+ var overlay = document.createElement('div');
+ var overlayPosition = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this.$element).css("position") === 'fixed' ? 'is-overlay-fixed' : 'is-overlay-absolute';
+ overlay.setAttribute('class', 'js-off-canvas-overlay ' + overlayPosition);
+ this.$overlay = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(overlay);
+ if (overlayPosition === 'is-overlay-fixed') {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this.$overlay).insertAfter(this.$element);
+ } else {
+ this.$content.append(this.$overlay);
+ }
+ }
+
+ this.options.isRevealed = this.options.isRevealed || new RegExp(this.options.revealClass, 'g').test(this.$element[0].className);
+
+ if (this.options.isRevealed === true) {
+ this.options.revealOn = this.options.revealOn || this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split('-')[2];
+ this._setMQChecker();
+ }
+
+ if (this.options.transitionTime) {
+ this.$element.css('transition-duration', this.options.transitionTime);
+ }
+
+ // Initally remove all transition/position CSS classes from off-canvas content container.
+ this._removeContentClasses();
+ }
+
+ /**
+ * Adds event handlers to the off-canvas wrapper and the exit overlay.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ this.$element.off('.zf.trigger .zf.offcanvas').on({
+ 'open.zf.trigger': this.open.bind(this),
+ 'close.zf.trigger': this.close.bind(this),
+ 'toggle.zf.trigger': this.toggle.bind(this),
+ 'keydown.zf.offcanvas': this._handleKeyboard.bind(this)
+ });
+
+ if (this.options.closeOnClick === true) {
+ var $target = this.options.contentOverlay ? this.$overlay : this.$content;
+ $target.on({ 'click.zf.offcanvas': this.close.bind(this) });
+ }
+ }
+
+ /**
+ * Applies event listener for elements that will reveal at certain breakpoints.
+ * @private
+ */
+
+ }, {
+ key: '_setMQChecker',
+ value: function _setMQChecker() {
+ var _this = this;
+
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).on('changed.zf.mediaquery', function () {
+ if (__WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__["a" /* MediaQuery */].atLeast(_this.options.revealOn)) {
+ _this.reveal(true);
+ } else {
+ _this.reveal(false);
+ }
+ }).one('load.zf.offcanvas', function () {
+ if (__WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__["a" /* MediaQuery */].atLeast(_this.options.revealOn)) {
+ _this.reveal(true);
+ }
+ });
+ }
+
+ /**
+ * Removes the CSS transition/position classes of the off-canvas content container.
+ * Removing the classes is important when another off-canvas gets opened that uses the same content container.
+ * @param {Boolean} hasReveal - true if related off-canvas element is revealed.
+ * @private
+ */
+
+ }, {
+ key: '_removeContentClasses',
+ value: function _removeContentClasses(hasReveal) {
+ if (typeof hasReveal !== 'boolean') {
+ this.$content.removeClass(this.contentClasses.base.join(' '));
+ } else if (hasReveal === false) {
+ this.$content.removeClass('has-reveal-' + this.position);
+ }
+ }
+
+ /**
+ * Adds the CSS transition/position classes of the off-canvas content container, based on the opening off-canvas element.
+ * Beforehand any transition/position class gets removed.
+ * @param {Boolean} hasReveal - true if related off-canvas element is revealed.
+ * @private
+ */
+
+ }, {
+ key: '_addContentClasses',
+ value: function _addContentClasses(hasReveal) {
+ this._removeContentClasses(hasReveal);
+ if (typeof hasReveal !== 'boolean') {
+ this.$content.addClass('has-transition-' + this.options.transition + ' has-position-' + this.position);
+ } else if (hasReveal === true) {
+ this.$content.addClass('has-reveal-' + this.position);
+ }
+ }
+
+ /**
+ * Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.
+ * @param {Boolean} isRevealed - true if element should be revealed.
+ * @function
+ */
+
+ }, {
+ key: 'reveal',
+ value: function reveal(isRevealed) {
+ if (isRevealed) {
+ this.close();
+ this.isRevealed = true;
+ this.$element.attr('aria-hidden', 'false');
+ this.$element.off('open.zf.trigger toggle.zf.trigger');
+ this.$element.removeClass('is-closed');
+ } else {
+ this.isRevealed = false;
+ this.$element.attr('aria-hidden', 'true');
+ this.$element.off('open.zf.trigger toggle.zf.trigger').on({
+ 'open.zf.trigger': this.open.bind(this),
+ 'toggle.zf.trigger': this.toggle.bind(this)
+ });
+ this.$element.addClass('is-closed');
+ }
+ this._addContentClasses(isRevealed);
+ }
+
+ /**
+ * Stops scrolling of the body when offcanvas is open on mobile Safari and other troublesome browsers.
+ * @private
+ */
+
+ }, {
+ key: '_stopScrolling',
+ value: function _stopScrolling(event) {
+ return false;
+ }
+
+ // Taken and adapted from http://stackoverflow.com/questions/16889447/prevent-full-page-scrolling-ios
+ // Only really works for y, not sure how to extend to x or if we need to.
+
+ }, {
+ key: '_recordScrollable',
+ value: function _recordScrollable(event) {
+ var elem = this; // called from event handler context with this as elem
+
+ // If the element is scrollable (content overflows), then...
+ if (elem.scrollHeight !== elem.clientHeight) {
+ // If we're at the top, scroll down one pixel to allow scrolling up
+ if (elem.scrollTop === 0) {
+ elem.scrollTop = 1;
+ }
+ // If we're at the bottom, scroll up one pixel to allow scrolling down
+ if (elem.scrollTop === elem.scrollHeight - elem.clientHeight) {
+ elem.scrollTop = elem.scrollHeight - elem.clientHeight - 1;
+ }
+ }
+ elem.allowUp = elem.scrollTop > 0;
+ elem.allowDown = elem.scrollTop < elem.scrollHeight - elem.clientHeight;
+ elem.lastY = event.originalEvent.pageY;
+ }
+ }, {
+ key: '_stopScrollPropagation',
+ value: function _stopScrollPropagation(event) {
+ var elem = this; // called from event handler context with this as elem
+ var up = event.pageY < elem.lastY;
+ var down = !up;
+ elem.lastY = event.pageY;
+
+ if (up && elem.allowUp || down && elem.allowDown) {
+ event.stopPropagation();
+ } else {
+ event.preventDefault();
+ }
+ }
+
+ /**
+ * Opens the off-canvas menu.
+ * @function
+ * @param {Object} event - Event object passed from listener.
+ * @param {jQuery} trigger - element that triggered the off-canvas to open.
+ * @fires OffCanvas#opened
+ */
+
+ }, {
+ key: 'open',
+ value: function open(event, trigger) {
+ if (this.$element.hasClass('is-open') || this.isRevealed) {
+ return;
+ }
+ var _this = this;
+
+ if (trigger) {
+ this.$lastTrigger = trigger;
+ }
+
+ if (this.options.forceTo === 'top') {
+ window.scrollTo(0, 0);
+ } else if (this.options.forceTo === 'bottom') {
+ window.scrollTo(0, document.body.scrollHeight);
+ }
+
+ if (this.options.transitionTime && this.options.transition !== 'overlap') {
+ this.$element.siblings('[data-off-canvas-content]').css('transition-duration', this.options.transitionTime);
+ } else {
+ this.$element.siblings('[data-off-canvas-content]').css('transition-duration', '');
+ }
+
+ /**
+ * Fires when the off-canvas menu opens.
+ * @event OffCanvas#opened
+ */
+ this.$element.addClass('is-open').removeClass('is-closed');
+
+ this.$triggers.attr('aria-expanded', 'true');
+ this.$element.attr('aria-hidden', 'false').trigger('opened.zf.offcanvas');
+
+ this.$content.addClass('is-open-' + this.position);
+
+ // If `contentScroll` is set to false, add class and disable scrolling on touch devices.
+ if (this.options.contentScroll === false) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('body').addClass('is-off-canvas-open').on('touchmove', this._stopScrolling);
+ this.$element.on('touchstart', this._recordScrollable);
+ this.$element.on('touchmove', this._stopScrollPropagation);
+ }
+
+ if (this.options.contentOverlay === true) {
+ this.$overlay.addClass('is-visible');
+ }
+
+ if (this.options.closeOnClick === true && this.options.contentOverlay === true) {
+ this.$overlay.addClass('is-closable');
+ }
+
+ if (this.options.autoFocus === true) {
+ this.$element.one(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["c" /* transitionend */])(this.$element), function () {
+ if (!_this.$element.hasClass('is-open')) {
+ return; // exit if prematurely closed
+ }
+ var canvasFocus = _this.$element.find('[data-autofocus]');
+ if (canvasFocus.length) {
+ canvasFocus.eq(0).focus();
+ } else {
+ _this.$element.find('a, button').eq(0).focus();
+ }
+ });
+ }
+
+ if (this.options.trapFocus === true) {
+ this.$content.attr('tabindex', '-1');
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].trapFocus(this.$element);
+ }
+
+ this._addContentClasses();
+ }
+
+ /**
+ * Closes the off-canvas menu.
+ * @function
+ * @param {Function} cb - optional cb to fire after closure.
+ * @fires OffCanvas#closed
+ */
+
+ }, {
+ key: 'close',
+ value: function close(cb) {
+ if (!this.$element.hasClass('is-open') || this.isRevealed) {
+ return;
+ }
+
+ var _this = this;
+
+ this.$element.removeClass('is-open');
+
+ this.$element.attr('aria-hidden', 'true')
+ /**
+ * Fires when the off-canvas menu opens.
+ * @event OffCanvas#closed
+ */
+ .trigger('closed.zf.offcanvas');
+
+ this.$content.removeClass('is-open-left is-open-top is-open-right is-open-bottom');
+
+ // If `contentScroll` is set to false, remove class and re-enable scrolling on touch devices.
+ if (this.options.contentScroll === false) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('body').removeClass('is-off-canvas-open').off('touchmove', this._stopScrolling);
+ this.$element.off('touchstart', this._recordScrollable);
+ this.$element.off('touchmove', this._stopScrollPropagation);
+ }
+
+ if (this.options.contentOverlay === true) {
+ this.$overlay.removeClass('is-visible');
+ }
+
+ if (this.options.closeOnClick === true && this.options.contentOverlay === true) {
+ this.$overlay.removeClass('is-closable');
+ }
+
+ this.$triggers.attr('aria-expanded', 'false');
+
+ if (this.options.trapFocus === true) {
+ this.$content.removeAttr('tabindex');
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].releaseFocus(this.$element);
+ }
+
+ // Listen to transitionEnd and add class when done.
+ this.$element.one(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["c" /* transitionend */])(this.$element), function (e) {
+ _this.$element.addClass('is-closed');
+ _this._removeContentClasses();
+ });
+ }
+
+ /**
+ * Toggles the off-canvas menu open or closed.
+ * @function
+ * @param {Object} event - Event object passed from listener.
+ * @param {jQuery} trigger - element that triggered the off-canvas to open.
+ */
+
+ }, {
+ key: 'toggle',
+ value: function toggle(event, trigger) {
+ if (this.$element.hasClass('is-open')) {
+ this.close(event, trigger);
+ } else {
+ this.open(event, trigger);
+ }
+ }
+
+ /**
+ * Handles keyboard input when detected. When the escape key is pressed, the off-canvas menu closes, and focus is restored to the element that opened the menu.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_handleKeyboard',
+ value: function _handleKeyboard(e) {
+ var _this4 = this;
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].handleKey(e, 'OffCanvas', {
+ close: function () {
+ _this4.close();
+ _this4.$lastTrigger.focus();
+ return true;
+ },
+ handled: function () {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ });
+ }
+
+ /**
+ * Destroys the offcanvas plugin.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.close();
+ this.$element.off('.zf.trigger .zf.offcanvas');
+ this.$overlay.off('.zf.offcanvas');
+ }
+ }]);
+
+ return OffCanvas;
+ }(__WEBPACK_IMPORTED_MODULE_4__foundation_plugin__["a" /* Plugin */]);
+
+ OffCanvas.defaults = {
+ /**
+ * Allow the user to click outside of the menu to close it.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ closeOnClick: true,
+
+ /**
+ * Adds an overlay on top of `[data-off-canvas-content]`.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ contentOverlay: true,
+
+ /**
+ * Target an off-canvas content container by ID that may be placed anywhere. If null the closest content container will be taken.
+ * @option
+ * @type {?string}
+ * @default null
+ */
+ contentId: null,
+
+ /**
+ * Define the off-canvas element is nested in an off-canvas content. This is required when using the contentId option for a nested element.
+ * @option
+ * @type {boolean}
+ * @default null
+ */
+ nested: null,
+
+ /**
+ * Enable/disable scrolling of the main content when an off canvas panel is open.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ contentScroll: true,
+
+ /**
+ * Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
+ * @option
+ * @type {number}
+ * @default null
+ */
+ transitionTime: null,
+
+ /**
+ * Type of transition for the offcanvas menu. Options are 'push', 'detached' or 'slide'.
+ * @option
+ * @type {string}
+ * @default push
+ */
+ transition: 'push',
+
+ /**
+ * Force the page to scroll to top or bottom on open.
+ * @option
+ * @type {?string}
+ * @default null
+ */
+ forceTo: null,
+
+ /**
+ * Allow the offcanvas to remain open for certain breakpoints.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ isRevealed: false,
+
+ /**
+ * Breakpoint at which to reveal. JS will use a RegExp to target standard classes, if changing classnames, pass your class with the `revealClass` option.
+ * @option
+ * @type {?string}
+ * @default null
+ */
+ revealOn: null,
+
+ /**
+ * Force focus to the offcanvas on open. If true, will focus the opening trigger on close.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ autoFocus: true,
+
+ /**
+ * Class used to force an offcanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.
+ * @option
+ * @type {string}
+ * @default reveal-for-
+ * @todo improve the regex testing for this.
+ */
+ revealClass: 'reveal-for-',
+
+ /**
+ * Triggers optional focus trapping when opening an offcanvas. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ trapFocus: false
+ };
+
+
+
+ /***/ }),
+ /* 27 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Orbit; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__ = __webpack_require__(3);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_motion__ = __webpack_require__(6);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_timer__ = __webpack_require__(18);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_util_imageLoader__ = __webpack_require__(8);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__foundation_plugin__ = __webpack_require__(2);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__foundation_util_touch__ = __webpack_require__(10);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+
+
+
+
+
+ /**
+ * Orbit module.
+ * @module foundation.orbit
+ * @requires foundation.util.keyboard
+ * @requires foundation.util.motion
+ * @requires foundation.util.timer
+ * @requires foundation.util.imageLoader
+ * @requires foundation.util.touch
+ */
+
+ var Orbit = function (_Plugin) {
+ _inherits(Orbit, _Plugin);
+
+ function Orbit() {
+ _classCallCheck(this, Orbit);
+
+ return _possibleConstructorReturn(this, (Orbit.__proto__ || Object.getPrototypeOf(Orbit)).apply(this, arguments));
+ }
+
+ _createClass(Orbit, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of an orbit carousel.
+ * @class
+ * @name Orbit
+ * @param {jQuery} element - jQuery object to make into an Orbit Carousel.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Orbit.defaults, this.$element.data(), options);
+ this.className = 'Orbit'; // ie9 back compat
+
+ __WEBPACK_IMPORTED_MODULE_7__foundation_util_touch__["a" /* Touch */].init(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a); // Touch init is idempotent, we just need to make sure it's initialied.
+
+ this._init();
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].register('Orbit', {
+ 'ltr': {
+ 'ARROW_RIGHT': 'next',
+ 'ARROW_LEFT': 'previous'
+ },
+ 'rtl': {
+ 'ARROW_LEFT': 'next',
+ 'ARROW_RIGHT': 'previous'
+ }
+ });
+ }
+
+ /**
+ * Initializes the plugin by creating jQuery collections, setting attributes, and starting the animation.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ // @TODO: consider discussion on PR #9278 about DOM pollution by changeSlide
+ this._reset();
+
+ this.$wrapper = this.$element.find('.' + this.options.containerClass);
+ this.$slides = this.$element.find('.' + this.options.slideClass);
+
+ var $images = this.$element.find('img'),
+ initActive = this.$slides.filter('.is-active'),
+ id = this.$element[0].id || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__foundation_util_core__["b" /* GetYoDigits */])(6, 'orbit');
+
+ this.$element.attr({
+ 'data-resize': id,
+ 'id': id
+ });
+
+ if (!initActive.length) {
+ this.$slides.eq(0).addClass('is-active');
+ }
+
+ if (!this.options.useMUI) {
+ this.$slides.addClass('no-motionui');
+ }
+
+ if ($images.length) {
+ __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__foundation_util_imageLoader__["a" /* onImagesLoaded */])($images, this._prepareForOrbit.bind(this));
+ } else {
+ this._prepareForOrbit(); //hehe
+ }
+
+ if (this.options.bullets) {
+ this._loadBullets();
+ }
+
+ this._events();
+
+ if (this.options.autoPlay && this.$slides.length > 1) {
+ this.geoSync();
+ }
+
+ if (this.options.accessible) {
+ // allow wrapper to be focusable to enable arrow navigation
+ this.$wrapper.attr('tabindex', 0);
+ }
+ }
+
+ /**
+ * Creates a jQuery collection of bullets, if they are being used.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_loadBullets',
+ value: function _loadBullets() {
+ this.$bullets = this.$element.find('.' + this.options.boxOfBullets).find('button');
+ }
+
+ /**
+ * Sets a `timer` object on the orbit, and starts the counter for the next slide.
+ * @function
+ */
+
+ }, {
+ key: 'geoSync',
+ value: function geoSync() {
+ var _this = this;
+ this.timer = new __WEBPACK_IMPORTED_MODULE_3__foundation_util_timer__["a" /* Timer */](this.$element, {
+ duration: this.options.timerDelay,
+ infinite: false
+ }, function () {
+ _this.changeSlide(true);
+ });
+ this.timer.start();
+ }
+
+ /**
+ * Sets wrapper and slide heights for the orbit.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_prepareForOrbit',
+ value: function _prepareForOrbit() {
+ var _this = this;
+ this._setWrapperHeight();
+ }
+
+ /**
+ * Calulates the height of each slide in the collection, and uses the tallest one for the wrapper height.
+ * @function
+ * @private
+ * @param {Function} cb - a callback function to fire when complete.
+ */
+
+ }, {
+ key: '_setWrapperHeight',
+ value: function _setWrapperHeight(cb) {
+ //rewrite this to `for` loop
+ var max = 0,
+ temp,
+ counter = 0,
+ _this = this;
+
+ this.$slides.each(function () {
+ temp = this.getBoundingClientRect().height;
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).attr('data-slide', counter);
+
+ if (!/mui/g.test(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this)[0].className) && _this.$slides.filter('.is-active')[0] !== _this.$slides.eq(counter)[0]) {
+ //if not the active slide, set css position and display property
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).css({ 'position': 'relative', 'display': 'none' });
+ }
+ max = temp > max ? temp : max;
+ counter++;
+ });
+
+ if (counter === this.$slides.length) {
+ this.$wrapper.css({ 'height': max }); //only change the wrapper height property once.
+ if (cb) {
+ cb(max);
+ } //fire callback with max height dimension.
+ }
+ }
+
+ /**
+ * Sets the max-height of each slide.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_setSlideHeight',
+ value: function _setSlideHeight(height) {
+ this.$slides.each(function () {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).css('max-height', height);
+ });
+ }
+
+ /**
+ * Adds event listeners to basically everything within the element.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this;
+
+ //***************************************
+ //**Now using custom event - thanks to:**
+ //** Yohai Ararat of Toronto **
+ //***************************************
+ //
+ this.$element.off('.resizeme.zf.trigger').on({
+ 'resizeme.zf.trigger': this._prepareForOrbit.bind(this)
+ });
+ if (this.$slides.length > 1) {
+
+ if (this.options.swipe) {
+ this.$slides.off('swipeleft.zf.orbit swiperight.zf.orbit').on('swipeleft.zf.orbit', function (e) {
+ e.preventDefault();
+ _this.changeSlide(true);
+ }).on('swiperight.zf.orbit', function (e) {
+ e.preventDefault();
+ _this.changeSlide(false);
+ });
+ }
+ //***************************************
+
+ if (this.options.autoPlay) {
+ this.$slides.on('click.zf.orbit', function () {
+ _this.$element.data('clickedOn', _this.$element.data('clickedOn') ? false : true);
+ _this.timer[_this.$element.data('clickedOn') ? 'pause' : 'start']();
+ });
+
+ if (this.options.pauseOnHover) {
+ this.$element.on('mouseenter.zf.orbit', function () {
+ _this.timer.pause();
+ }).on('mouseleave.zf.orbit', function () {
+ if (!_this.$element.data('clickedOn')) {
+ _this.timer.start();
+ }
+ });
+ }
+ }
+
+ if (this.options.navButtons) {
+ var $controls = this.$element.find('.' + this.options.nextClass + ', .' + this.options.prevClass);
+ $controls.attr('tabindex', 0)
+ //also need to handle enter/return and spacebar key presses
+ .on('click.zf.orbit touchend.zf.orbit', function (e) {
+ e.preventDefault();
+ _this.changeSlide(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).hasClass(_this.options.nextClass));
+ });
+ }
+
+ if (this.options.bullets) {
+ this.$bullets.on('click.zf.orbit touchend.zf.orbit', function () {
+ if (/is-active/g.test(this.className)) {
+ return false;
+ } //if this is active, kick out of function.
+ var idx = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).data('slide'),
+ ltr = idx > _this.$slides.filter('.is-active').data('slide'),
+ $slide = _this.$slides.eq(idx);
+
+ _this.changeSlide(ltr, $slide, idx);
+ });
+ }
+
+ if (this.options.accessible) {
+ this.$wrapper.add(this.$bullets).on('keydown.zf.orbit', function (e) {
+ // handle keyboard event with keyboard util
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].handleKey(e, 'Orbit', {
+ next: function () {
+ _this.changeSlide(true);
+ },
+ previous: function () {
+ _this.changeSlide(false);
+ },
+ handled: function () {
+ // if bullet is focused, make sure focus moves
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()(e.target).is(_this.$bullets)) {
+ _this.$bullets.filter('.is-active').focus();
+ }
+ }
+ });
+ });
+ }
+ }
+ }
+
+ /**
+ * Resets Orbit so it can be reinitialized
+ */
+
+ }, {
+ key: '_reset',
+ value: function _reset() {
+ // Don't do anything if there are no slides (first run)
+ if (typeof this.$slides == 'undefined') {
+ return;
+ }
+
+ if (this.$slides.length > 1) {
+ // Remove old events
+ this.$element.off('.zf.orbit').find('*').off('.zf.orbit');
+
+ // Restart timer if autoPlay is enabled
+ if (this.options.autoPlay) {
+ this.timer.restart();
+ }
+
+ // Reset all sliddes
+ this.$slides.each(function (el) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(el).removeClass('is-active is-active is-in').removeAttr('aria-live').hide();
+ });
+
+ // Show the first slide
+ this.$slides.first().addClass('is-active').show();
+
+ // Triggers when the slide has finished animating
+ this.$element.trigger('slidechange.zf.orbit', [this.$slides.first()]);
+
+ // Select first bullet if bullets are present
+ if (this.options.bullets) {
+ this._updateBullets(0);
+ }
+ }
+ }
+
+ /**
+ * Changes the current slide to a new one.
+ * @function
+ * @param {Boolean} isLTR - flag if the slide should move left to right.
+ * @param {jQuery} chosenSlide - the jQuery element of the slide to show next, if one is selected.
+ * @param {Number} idx - the index of the new slide in its collection, if one chosen.
+ * @fires Orbit#slidechange
+ */
+
+ }, {
+ key: 'changeSlide',
+ value: function changeSlide(isLTR, chosenSlide, idx) {
+ if (!this.$slides) {
+ return;
+ } // Don't freak out if we're in the middle of cleanup
+ var $curSlide = this.$slides.filter('.is-active').eq(0);
+
+ if (/mui/g.test($curSlide[0].className)) {
+ return false;
+ } //if the slide is currently animating, kick out of the function
+
+ var $firstSlide = this.$slides.first(),
+ $lastSlide = this.$slides.last(),
+ dirIn = isLTR ? 'Right' : 'Left',
+ dirOut = isLTR ? 'Left' : 'Right',
+ _this = this,
+ $newSlide;
+
+ if (!chosenSlide) {
+ //most of the time, this will be auto played or clicked from the navButtons.
+ $newSlide = isLTR ? //if wrapping enabled, check to see if there is a `next` or `prev` sibling, if not, select the first or last slide to fill in. if wrapping not enabled, attempt to select `next` or `prev`, if there's nothing there, the function will kick out on next step. CRAZY NESTED TERNARIES!!!!!
+ this.options.infiniteWrap ? $curSlide.next('.' + this.options.slideClass).length ? $curSlide.next('.' + this.options.slideClass) : $firstSlide : $curSlide.next('.' + this.options.slideClass) : //pick next slide if moving left to right
+ this.options.infiniteWrap ? $curSlide.prev('.' + this.options.slideClass).length ? $curSlide.prev('.' + this.options.slideClass) : $lastSlide : $curSlide.prev('.' + this.options.slideClass); //pick prev slide if moving right to left
+ } else {
+ $newSlide = chosenSlide;
+ }
+
+ if ($newSlide.length) {
+ /**
+ * Triggers before the next slide starts animating in and only if a next slide has been found.
+ * @event Orbit#beforeslidechange
+ */
+ this.$element.trigger('beforeslidechange.zf.orbit', [$curSlide, $newSlide]);
+
+ if (this.options.bullets) {
+ idx = idx || this.$slides.index($newSlide); //grab index to update bullets
+ this._updateBullets(idx);
+ }
+
+ if (this.options.useMUI && !this.$element.is(':hidden')) {
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_motion__["a" /* Motion */].animateIn($newSlide.addClass('is-active').css({ 'position': 'absolute', 'top': 0 }), this.options['animInFrom' + dirIn], function () {
+ $newSlide.css({ 'position': 'relative', 'display': 'block' }).attr('aria-live', 'polite');
+ });
+
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_motion__["a" /* Motion */].animateOut($curSlide.removeClass('is-active'), this.options['animOutTo' + dirOut], function () {
+ $curSlide.removeAttr('aria-live');
+ if (_this.options.autoPlay && !_this.timer.isPaused) {
+ _this.timer.restart();
+ }
+ //do stuff?
+ });
+ } else {
+ $curSlide.removeClass('is-active is-in').removeAttr('aria-live').hide();
+ $newSlide.addClass('is-active is-in').attr('aria-live', 'polite').show();
+ if (this.options.autoPlay && !this.timer.isPaused) {
+ this.timer.restart();
+ }
+ }
+ /**
+ * Triggers when the slide has finished animating in.
+ * @event Orbit#slidechange
+ */
+ this.$element.trigger('slidechange.zf.orbit', [$newSlide]);
+ }
+ }
+
+ /**
+ * Updates the active state of the bullets, if displayed.
+ * @function
+ * @private
+ * @param {Number} idx - the index of the current slide.
+ */
+
+ }, {
+ key: '_updateBullets',
+ value: function _updateBullets(idx) {
+ var $oldBullet = this.$element.find('.' + this.options.boxOfBullets).find('.is-active').removeClass('is-active').blur(),
+ span = $oldBullet.find('span:last').detach(),
+ $newBullet = this.$bullets.eq(idx).addClass('is-active').append(span);
+ }
+
+ /**
+ * Destroys the carousel and hides the element.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.$element.off('.zf.orbit').find('*').off('.zf.orbit').end().hide();
+ }
+ }]);
+
+ return Orbit;
+ }(__WEBPACK_IMPORTED_MODULE_6__foundation_plugin__["a" /* Plugin */]);
+
+ Orbit.defaults = {
+ /**
+ * Tells the JS to look for and loadBullets.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ bullets: true,
+ /**
+ * Tells the JS to apply event listeners to nav buttons
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ navButtons: true,
+ /**
+ * motion-ui animation class to apply
+ * @option
+ * @type {string}
+ * @default 'slide-in-right'
+ */
+ animInFromRight: 'slide-in-right',
+ /**
+ * motion-ui animation class to apply
+ * @option
+ * @type {string}
+ * @default 'slide-out-right'
+ */
+ animOutToRight: 'slide-out-right',
+ /**
+ * motion-ui animation class to apply
+ * @option
+ * @type {string}
+ * @default 'slide-in-left'
+ *
+ */
+ animInFromLeft: 'slide-in-left',
+ /**
+ * motion-ui animation class to apply
+ * @option
+ * @type {string}
+ * @default 'slide-out-left'
+ */
+ animOutToLeft: 'slide-out-left',
+ /**
+ * Allows Orbit to automatically animate on page load.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ autoPlay: true,
+ /**
+ * Amount of time, in ms, between slide transitions
+ * @option
+ * @type {number}
+ * @default 5000
+ */
+ timerDelay: 5000,
+ /**
+ * Allows Orbit to infinitely loop through the slides
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ infiniteWrap: true,
+ /**
+ * Allows the Orbit slides to bind to swipe events for mobile, requires an additional util library
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ swipe: true,
+ /**
+ * Allows the timing function to pause animation on hover.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ pauseOnHover: true,
+ /**
+ * Allows Orbit to bind keyboard events to the slider, to animate frames with arrow keys
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ accessible: true,
+ /**
+ * Class applied to the container of Orbit
+ * @option
+ * @type {string}
+ * @default 'orbit-container'
+ */
+ containerClass: 'orbit-container',
+ /**
+ * Class applied to individual slides.
+ * @option
+ * @type {string}
+ * @default 'orbit-slide'
+ */
+ slideClass: 'orbit-slide',
+ /**
+ * Class applied to the bullet container. You're welcome.
+ * @option
+ * @type {string}
+ * @default 'orbit-bullets'
+ */
+ boxOfBullets: 'orbit-bullets',
+ /**
+ * Class applied to the `next` navigation button.
+ * @option
+ * @type {string}
+ * @default 'orbit-next'
+ */
+ nextClass: 'orbit-next',
+ /**
+ * Class applied to the `previous` navigation button.
+ * @option
+ * @type {string}
+ * @default 'orbit-previous'
+ */
+ prevClass: 'orbit-previous',
+ /**
+ * Boolean to flag the js to use motion ui classes or not. Default to true for backwards compatability.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ useMUI: true
+ };
+
+
+
+ /***/ }),
+ /* 28 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ResponsiveAccordionTabs; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__ = __webpack_require__(4);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_plugin__ = __webpack_require__(2);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_accordion__ = __webpack_require__(11);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__foundation_tabs__ = __webpack_require__(17);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+
+
+
+
+ // The plugin matches the plugin classes with these plugin instances.
+ var MenuPlugins = {
+ tabs: {
+ cssClass: 'tabs',
+ plugin: __WEBPACK_IMPORTED_MODULE_5__foundation_tabs__["a" /* Tabs */]
+ },
+ accordion: {
+ cssClass: 'accordion',
+ plugin: __WEBPACK_IMPORTED_MODULE_4__foundation_accordion__["a" /* Accordion */]
+ }
+ };
+
+ /**
+ * ResponsiveAccordionTabs module.
+ * @module foundation.responsiveAccordionTabs
+ * @requires foundation.util.motion
+ * @requires foundation.accordion
+ * @requires foundation.tabs
+ */
+
+ var ResponsiveAccordionTabs = function (_Plugin) {
+ _inherits(ResponsiveAccordionTabs, _Plugin);
+
+ function ResponsiveAccordionTabs() {
+ _classCallCheck(this, ResponsiveAccordionTabs);
+
+ return _possibleConstructorReturn(this, (ResponsiveAccordionTabs.__proto__ || Object.getPrototypeOf(ResponsiveAccordionTabs)).apply(this, arguments));
+ }
+
+ _createClass(ResponsiveAccordionTabs, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of a responsive accordion tabs.
+ * @class
+ * @name ResponsiveAccordionTabs
+ * @fires ResponsiveAccordionTabs#init
+ * @param {jQuery} element - jQuery object to make into Responsive Accordion Tabs.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(element);
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, this.$element.data(), options);
+ this.rules = this.$element.data('responsive-accordion-tabs');
+ this.currentMq = null;
+ this.currentPlugin = null;
+ this.className = 'ResponsiveAccordionTabs'; // ie9 back compat
+ if (!this.$element.attr('id')) {
+ this.$element.attr('id', __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__foundation_util_core__["b" /* GetYoDigits */])(6, 'responsiveaccordiontabs'));
+ };
+
+ this._init();
+ this._events();
+ }
+
+ /**
+ * Initializes the Menu by parsing the classes from the 'data-responsive-accordion-tabs' attribute on the element.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */]._init();
+
+ // The first time an Interchange plugin is initialized, this.rules is converted from a string of "classes" to an object of rules
+ if (typeof this.rules === 'string') {
+ var rulesTree = {};
+
+ // Parse rules from "classes" pulled from data attribute
+ var rules = this.rules.split(' ');
+
+ // Iterate through every rule found
+ for (var i = 0; i < rules.length; i++) {
+ var rule = rules[i].split('-');
+ var ruleSize = rule.length > 1 ? rule[0] : 'small';
+ var rulePlugin = rule.length > 1 ? rule[1] : rule[0];
+
+ if (MenuPlugins[rulePlugin] !== null) {
+ rulesTree[ruleSize] = MenuPlugins[rulePlugin];
+ }
+ }
+
+ this.rules = rulesTree;
+ }
+
+ this._getAllOptions();
+
+ if (!__WEBPACK_IMPORTED_MODULE_0_jquery___default.a.isEmptyObject(this.rules)) {
+ this._checkMediaQueries();
+ }
+ }
+ }, {
+ key: '_getAllOptions',
+ value: function _getAllOptions() {
+ //get all defaults and options
+ var _this = this;
+ _this.allOptions = {};
+ for (var key in MenuPlugins) {
+ if (MenuPlugins.hasOwnProperty(key)) {
+ var obj = MenuPlugins[key];
+ try {
+ var dummyPlugin = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('<ul></ul>');
+ var tmpPlugin = new obj.plugin(dummyPlugin, _this.options);
+ for (var keyKey in tmpPlugin.options) {
+ if (tmpPlugin.options.hasOwnProperty(keyKey) && keyKey !== 'zfPlugin') {
+ var objObj = tmpPlugin.options[keyKey];
+ _this.allOptions[keyKey] = objObj;
+ }
+ }
+ tmpPlugin.destroy();
+ } catch (e) {}
+ }
+ }
+ }
+
+ /**
+ * Initializes events for the Menu.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this;
+
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).on('changed.zf.mediaquery', function () {
+ _this._checkMediaQueries();
+ });
+ }
+
+ /**
+ * Checks the current screen width against available media queries. If the media query has changed, and the plugin needed has changed, the plugins will swap out.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_checkMediaQueries',
+ value: function _checkMediaQueries() {
+ var matchedMq,
+ _this = this;
+ // Iterate through each rule and find the last matching rule
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.each(this.rules, function (key) {
+ if (__WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */].atLeast(key)) {
+ matchedMq = key;
+ }
+ });
+
+ // No match? No dice
+ if (!matchedMq) return;
+
+ // Plugin already initialized? We good
+ if (this.currentPlugin instanceof this.rules[matchedMq].plugin) return;
+
+ // Remove existing plugin-specific CSS classes
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.each(MenuPlugins, function (key, value) {
+ _this.$element.removeClass(value.cssClass);
+ });
+
+ // Add the CSS class for the new plugin
+ this.$element.addClass(this.rules[matchedMq].cssClass);
+
+ // Create an instance of the new plugin
+ if (this.currentPlugin) {
+ //don't know why but on nested elements data zfPlugin get's lost
+ if (!this.currentPlugin.$element.data('zfPlugin') && this.storezfData) this.currentPlugin.$element.data('zfPlugin', this.storezfData);
+ this.currentPlugin.destroy();
+ }
+ this._handleMarkup(this.rules[matchedMq].cssClass);
+ this.currentPlugin = new this.rules[matchedMq].plugin(this.$element, {});
+ this.storezfData = this.currentPlugin.$element.data('zfPlugin');
+ }
+ }, {
+ key: '_handleMarkup',
+ value: function _handleMarkup(toSet) {
+ var _this = this,
+ fromString = 'accordion';
+ var $panels = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-tabs-content=' + this.$element.attr('id') + ']');
+ if ($panels.length) fromString = 'tabs';
+ if (fromString === toSet) {
+ return;
+ };
+
+ var tabsTitle = _this.allOptions.linkClass ? _this.allOptions.linkClass : 'tabs-title';
+ var tabsPanel = _this.allOptions.panelClass ? _this.allOptions.panelClass : 'tabs-panel';
+
+ this.$element.removeAttr('role');
+ var $liHeads = this.$element.children('.' + tabsTitle + ',[data-accordion-item]').removeClass(tabsTitle).removeClass('accordion-item').removeAttr('data-accordion-item');
+ var $liHeadsA = $liHeads.children('a').removeClass('accordion-title');
+
+ if (fromString === 'tabs') {
+ $panels = $panels.children('.' + tabsPanel).removeClass(tabsPanel).removeAttr('role').removeAttr('aria-hidden').removeAttr('aria-labelledby');
+ $panels.children('a').removeAttr('role').removeAttr('aria-controls').removeAttr('aria-selected');
+ } else {
+ $panels = $liHeads.children('[data-tab-content]').removeClass('accordion-content');
+ };
+
+ $panels.css({ display: '', visibility: '' });
+ $liHeads.css({ display: '', visibility: '' });
+ if (toSet === 'accordion') {
+ $panels.each(function (key, value) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(value).appendTo($liHeads.get(key)).addClass('accordion-content').attr('data-tab-content', '').removeClass('is-active').css({ height: '' });
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-tabs-content=' + _this.$element.attr('id') + ']').after('<div id="tabs-placeholder-' + _this.$element.attr('id') + '"></div>').detach();
+ $liHeads.addClass('accordion-item').attr('data-accordion-item', '');
+ $liHeadsA.addClass('accordion-title');
+ });
+ } else if (toSet === 'tabs') {
+ var $tabsContent = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-tabs-content=' + _this.$element.attr('id') + ']');
+ var $placeholder = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#tabs-placeholder-' + _this.$element.attr('id'));
+ if ($placeholder.length) {
+ $tabsContent = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('<div class="tabs-content"></div>').insertAfter($placeholder).attr('data-tabs-content', _this.$element.attr('id'));
+ $placeholder.remove();
+ } else {
+ $tabsContent = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('<div class="tabs-content"></div>').insertAfter(_this.$element).attr('data-tabs-content', _this.$element.attr('id'));
+ };
+ $panels.each(function (key, value) {
+ var tempValue = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(value).appendTo($tabsContent).addClass(tabsPanel);
+ var hash = $liHeadsA.get(key).hash.slice(1);
+ var id = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(value).attr('id') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__foundation_util_core__["b" /* GetYoDigits */])(6, 'accordion');
+ if (hash !== id) {
+ if (hash !== '') {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(value).attr('id', hash);
+ } else {
+ hash = id;
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(value).attr('id', hash);
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()($liHeadsA.get(key)).attr('href', __WEBPACK_IMPORTED_MODULE_0_jquery___default()($liHeadsA.get(key)).attr('href').replace('#', '') + '#' + hash);
+ };
+ };
+ var isActive = __WEBPACK_IMPORTED_MODULE_0_jquery___default()($liHeads.get(key)).hasClass('is-active');
+ if (isActive) {
+ tempValue.addClass('is-active');
+ };
+ });
+ $liHeads.addClass(tabsTitle);
+ };
+ }
+
+ /**
+ * Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ if (this.currentPlugin) this.currentPlugin.destroy();
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off('.zf.ResponsiveAccordionTabs');
+ }
+ }]);
+
+ return ResponsiveAccordionTabs;
+ }(__WEBPACK_IMPORTED_MODULE_3__foundation_plugin__["a" /* Plugin */]);
+
+ ResponsiveAccordionTabs.defaults = {};
+
+
+
+ /***/ }),
+ /* 29 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ResponsiveMenu; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__ = __webpack_require__(4);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_plugin__ = __webpack_require__(2);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_dropdownMenu__ = __webpack_require__(14);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__foundation_drilldown__ = __webpack_require__(13);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__foundation_accordionMenu__ = __webpack_require__(12);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+
+
+
+
+
+
+ var MenuPlugins = {
+ dropdown: {
+ cssClass: 'dropdown',
+ plugin: __WEBPACK_IMPORTED_MODULE_4__foundation_dropdownMenu__["a" /* DropdownMenu */]
+ },
+ drilldown: {
+ cssClass: 'drilldown',
+ plugin: __WEBPACK_IMPORTED_MODULE_5__foundation_drilldown__["a" /* Drilldown */]
+ },
+ accordion: {
+ cssClass: 'accordion-menu',
+ plugin: __WEBPACK_IMPORTED_MODULE_6__foundation_accordionMenu__["a" /* AccordionMenu */]
+ }
+ };
+
+ // import "foundation.util.triggers.js";
+
+
+ /**
+ * ResponsiveMenu module.
+ * @module foundation.responsiveMenu
+ * @requires foundation.util.triggers
+ * @requires foundation.util.mediaQuery
+ */
+
+ var ResponsiveMenu = function (_Plugin) {
+ _inherits(ResponsiveMenu, _Plugin);
+
+ function ResponsiveMenu() {
+ _classCallCheck(this, ResponsiveMenu);
+
+ return _possibleConstructorReturn(this, (ResponsiveMenu.__proto__ || Object.getPrototypeOf(ResponsiveMenu)).apply(this, arguments));
+ }
+
+ _createClass(ResponsiveMenu, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of a responsive menu.
+ * @class
+ * @name ResponsiveMenu
+ * @fires ResponsiveMenu#init
+ * @param {jQuery} element - jQuery object to make into a dropdown menu.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(element);
+ this.rules = this.$element.data('responsive-menu');
+ this.currentMq = null;
+ this.currentPlugin = null;
+ this.className = 'ResponsiveMenu'; // ie9 back compat
+
+ this._init();
+ this._events();
+ }
+
+ /**
+ * Initializes the Menu by parsing the classes from the 'data-ResponsiveMenu' attribute on the element.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */]._init();
+ // The first time an Interchange plugin is initialized, this.rules is converted from a string of "classes" to an object of rules
+ if (typeof this.rules === 'string') {
+ var rulesTree = {};
+
+ // Parse rules from "classes" pulled from data attribute
+ var rules = this.rules.split(' ');
+
+ // Iterate through every rule found
+ for (var i = 0; i < rules.length; i++) {
+ var rule = rules[i].split('-');
+ var ruleSize = rule.length > 1 ? rule[0] : 'small';
+ var rulePlugin = rule.length > 1 ? rule[1] : rule[0];
+
+ if (MenuPlugins[rulePlugin] !== null) {
+ rulesTree[ruleSize] = MenuPlugins[rulePlugin];
+ }
+ }
+
+ this.rules = rulesTree;
+ }
+
+ if (!__WEBPACK_IMPORTED_MODULE_0_jquery___default.a.isEmptyObject(this.rules)) {
+ this._checkMediaQueries();
+ }
+ // Add data-mutate since children may need it.
+ this.$element.attr('data-mutate', this.$element.attr('data-mutate') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__foundation_util_core__["b" /* GetYoDigits */])(6, 'responsive-menu'));
+ }
+
+ /**
+ * Initializes events for the Menu.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this;
+
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).on('changed.zf.mediaquery', function () {
+ _this._checkMediaQueries();
+ });
+ // $(window).on('resize.zf.ResponsiveMenu', function() {
+ // _this._checkMediaQueries();
+ // });
+ }
+
+ /**
+ * Checks the current screen width against available media queries. If the media query has changed, and the plugin needed has changed, the plugins will swap out.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_checkMediaQueries',
+ value: function _checkMediaQueries() {
+ var matchedMq,
+ _this = this;
+ // Iterate through each rule and find the last matching rule
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.each(this.rules, function (key) {
+ if (__WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */].atLeast(key)) {
+ matchedMq = key;
+ }
+ });
+
+ // No match? No dice
+ if (!matchedMq) return;
+
+ // Plugin already initialized? We good
+ if (this.currentPlugin instanceof this.rules[matchedMq].plugin) return;
+
+ // Remove existing plugin-specific CSS classes
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.each(MenuPlugins, function (key, value) {
+ _this.$element.removeClass(value.cssClass);
+ });
+
+ // Add the CSS class for the new plugin
+ this.$element.addClass(this.rules[matchedMq].cssClass);
+
+ // Create an instance of the new plugin
+ if (this.currentPlugin) this.currentPlugin.destroy();
+ this.currentPlugin = new this.rules[matchedMq].plugin(this.$element, {});
+ }
+
+ /**
+ * Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.currentPlugin.destroy();
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off('.zf.ResponsiveMenu');
+ }
+ }]);
+
+ return ResponsiveMenu;
+ }(__WEBPACK_IMPORTED_MODULE_3__foundation_plugin__["a" /* Plugin */]);
+
+ ResponsiveMenu.defaults = {};
+
+
+
+ /***/ }),
+ /* 30 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ResponsiveToggle; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__ = __webpack_require__(4);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_motion__ = __webpack_require__(6);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_plugin__ = __webpack_require__(2);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+
+
+ /**
+ * ResponsiveToggle module.
+ * @module foundation.responsiveToggle
+ * @requires foundation.util.mediaQuery
+ * @requires foundation.util.motion
+ */
+
+ var ResponsiveToggle = function (_Plugin) {
+ _inherits(ResponsiveToggle, _Plugin);
+
+ function ResponsiveToggle() {
+ _classCallCheck(this, ResponsiveToggle);
+
+ return _possibleConstructorReturn(this, (ResponsiveToggle.__proto__ || Object.getPrototypeOf(ResponsiveToggle)).apply(this, arguments));
+ }
+
+ _createClass(ResponsiveToggle, [{
+ key: '_setup',
+
+ /**
+ * Creates a new instance of Tab Bar.
+ * @class
+ * @name ResponsiveToggle
+ * @fires ResponsiveToggle#init
+ * @param {jQuery} element - jQuery object to attach tab bar functionality to.
+ * @param {Object} options - Overrides to the default plugin settings.
+ */
+ value: function _setup(element, options) {
+ this.$element = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(element);
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
+ this.className = 'ResponsiveToggle'; // ie9 back compat
+
+ this._init();
+ this._events();
+ }
+
+ /**
+ * Initializes the tab bar by finding the target element, toggling element, and running update().
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */]._init();
+ var targetID = this.$element.data('responsive-toggle');
+ if (!targetID) {
+ console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.');
+ }
+
+ this.$targetMenu = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + targetID);
+ this.$toggler = this.$element.find('[data-toggle]').filter(function () {
+ var target = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).data('toggle');
+ return target === targetID || target === "";
+ });
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, this.options, this.$targetMenu.data());
+
+ // If they were set, parse the animation classes
+ if (this.options.animate) {
+ var input = this.options.animate.split(' ');
+
+ this.animationIn = input[0];
+ this.animationOut = input[1] || null;
+ }
+
+ this._update();
+ }
+
+ /**
+ * Adds necessary event handlers for the tab bar to work.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this;
+
+ this._updateMqHandler = this._update.bind(this);
+
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).on('changed.zf.mediaquery', this._updateMqHandler);
+
+ this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
+ }
+
+ /**
+ * Checks the current media query to determine if the tab bar should be visible or hidden.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_update',
+ value: function _update() {
+ // Mobile
+ if (!__WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */].atLeast(this.options.hideFor)) {
+ this.$element.show();
+ this.$targetMenu.hide();
+ }
+
+ // Desktop
+ else {
+ this.$element.hide();
+ this.$targetMenu.show();
+ }
+ }
+
+ /**
+ * Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.
+ * @function
+ * @fires ResponsiveToggle#toggled
+ */
+
+ }, {
+ key: 'toggleMenu',
+ value: function toggleMenu() {
+ var _this3 = this;
+
+ if (!__WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["a" /* MediaQuery */].atLeast(this.options.hideFor)) {
+ /**
+ * Fires when the element attached to the tab bar toggles.
+ * @event ResponsiveToggle#toggled
+ */
+ if (this.options.animate) {
+ if (this.$targetMenu.is(':hidden')) {
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_motion__["a" /* Motion */].animateIn(this.$targetMenu, this.animationIn, function () {
+ _this3.$element.trigger('toggled.zf.responsiveToggle');
+ _this3.$targetMenu.find('[data-mutate]').triggerHandler('mutateme.zf.trigger');
+ });
+ } else {
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_motion__["a" /* Motion */].animateOut(this.$targetMenu, this.animationOut, function () {
+ _this3.$element.trigger('toggled.zf.responsiveToggle');
+ });
+ }
+ } else {
+ this.$targetMenu.toggle(0);
+ this.$targetMenu.find('[data-mutate]').trigger('mutateme.zf.trigger');
+ this.$element.trigger('toggled.zf.responsiveToggle');
+ }
+ }
+ }
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.$element.off('.zf.responsiveToggle');
+ this.$toggler.off('.zf.responsiveToggle');
+
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off('changed.zf.mediaquery', this._updateMqHandler);
+ }
+ }]);
+
+ return ResponsiveToggle;
+ }(__WEBPACK_IMPORTED_MODULE_3__foundation_plugin__["a" /* Plugin */]);
+
+ ResponsiveToggle.defaults = {
+ /**
+ * The breakpoint after which the menu is always shown, and the tab bar is hidden.
+ * @option
+ * @type {string}
+ * @default 'medium'
+ */
+ hideFor: 'medium',
+
+ /**
+ * To decide if the toggle should be animated or not.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ animate: false
+ };
+
+
+
+ /***/ }),
+ /* 31 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Reveal; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__ = __webpack_require__(3);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__ = __webpack_require__(4);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_motion__ = __webpack_require__(6);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_plugin__ = __webpack_require__(2);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__foundation_util_triggers__ = __webpack_require__(5);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
+
+
- }(jQuery, Foundation);
/**
- * Orbit module.
- * @module foundation.orbit
+ * Reveal module.
+ * @module foundation.reveal
* @requires foundation.util.keyboard
- * @requires foundation.util.motion
- * @requires foundation.util.timerAndImageLoader
- * @requires foundation.util.touch
+ * @requires foundation.util.triggers
+ * @requires foundation.util.mediaQuery
+ * @requires foundation.util.motion if using animations
*/
- !function($, Foundation){
- 'use strict';
- /**
- * Creates a new instance of an orbit carousel.
- * @class
- * @param {jQuery} element - jQuery object to make into an accordion menu.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function Orbit(element, options){
- this.$element = element;
- this.options = $.extend({}, Orbit.defaults, this.$element.data(), options);
- this._init();
+ var Reveal = function (_Plugin) {
+ _inherits(Reveal, _Plugin);
- Foundation.registerPlugin(this);
- Foundation.Keyboard.register('Orbit', {
- 'ltr': {
- 'ARROW_RIGHT': 'next',
- 'ARROW_LEFT': 'previous'
- },
- 'rtl': {
- 'ARROW_LEFT': 'next',
- 'ARROW_RIGHT': 'previous'
- }
- });
+ function Reveal() {
+ _classCallCheck(this, Reveal);
+
+ return _possibleConstructorReturn(this, (Reveal.__proto__ || Object.getPrototypeOf(Reveal)).apply(this, arguments));
}
- Orbit.defaults = {
- /**
- * Tells the JS to loadBullets.
- * @option
- * @example true
- */
- bullets: true,
- /**
- * Tells the JS to apply event listeners to nav buttons
- * @option
- * @example true
- */
- navButtons: true,
- /**
- * motion-ui animation class to apply
- * @option
- * @example 'slide-in-right'
- */
- animInFromRight: 'slide-in-right',
- /**
- * motion-ui animation class to apply
- * @option
- * @example 'slide-out-right'
- */
- animOutToRight: 'slide-out-right',
- /**
- * motion-ui animation class to apply
- * @option
- * @example 'slide-in-left'
- *
- */
- animInFromLeft: 'slide-in-left',
- /**
- * motion-ui animation class to apply
- * @option
- * @example 'slide-out-left'
- */
- animOutToLeft: 'slide-out-left',
- /**
- * Allows Orbit to automatically animate on page load.
- * @option
- * @example true
- */
- autoPlay: true,
- /**
- * Amount of time, in ms, between slide transitions
- * @option
- * @example 5000
- */
- timerDelay: 5000,
- /**
- * Allows Orbit to infinitely loop through the slides
- * @option
- * @example true
- */
- infiniteWrap: true,
- /**
- * Allows the Orbit slides to bind to swipe events for mobile, requires an additional util library
- * @option
- * @example true
- */
- swipe: true,
+
+ _createClass(Reveal, [{
+ key: '_setup',
+
/**
- * Allows the timing function to pause animation on hover.
- * @option
- * @example true
+ * Creates a new instance of Reveal.
+ * @class
+ * @name Reveal
+ * @param {jQuery} element - jQuery object to use for the modal.
+ * @param {Object} options - optional parameters.
*/
- pauseOnHover: true,
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Reveal.defaults, this.$element.data(), options);
+ this.className = 'Reveal'; // ie9 back compat
+ this._init();
+
+ // Triggers init is idempotent, just need to make sure it is initialized
+ __WEBPACK_IMPORTED_MODULE_5__foundation_util_triggers__["a" /* Triggers */].init(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a);
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].register('Reveal', {
+ 'ESCAPE': 'close'
+ });
+ }
+
/**
- * Allows Orbit to bind keyboard events to the slider, to animate frames with arrow keys
- * @option
- * @example true
+ * Initializes the modal by adding the overlay and close buttons, (if selected).
+ * @private
*/
- accessible: true,
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__["a" /* MediaQuery */]._init();
+ this.id = this.$element.attr('id');
+ this.isActive = false;
+ this.cached = { mq: __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__["a" /* MediaQuery */].current };
+ this.isMobile = mobileSniff();
+
+ this.$anchor = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-open="' + this.id + '"]').length ? __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-open="' + this.id + '"]') : __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-toggle="' + this.id + '"]');
+ this.$anchor.attr({
+ 'aria-controls': this.id,
+ 'aria-haspopup': true,
+ 'tabindex': 0
+ });
+
+ if (this.options.fullScreen || this.$element.hasClass('full')) {
+ this.options.fullScreen = true;
+ this.options.overlay = false;
+ }
+ if (this.options.overlay && !this.$overlay) {
+ this.$overlay = this._makeOverlay(this.id);
+ }
+
+ this.$element.attr({
+ 'role': 'dialog',
+ 'aria-hidden': true,
+ 'data-yeti-box': this.id,
+ 'data-resize': this.id
+ });
+
+ if (this.$overlay) {
+ this.$element.detach().appendTo(this.$overlay);
+ } else {
+ this.$element.detach().appendTo(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this.options.appendTo));
+ this.$element.addClass('without-overlay');
+ }
+ this._events();
+ if (this.options.deepLink && window.location.hash === '#' + this.id) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).one('load.zf.reveal', this.open.bind(this));
+ }
+ }
+
/**
- * Class applied to the container of Orbit
- * @option
- * @example 'orbit-container'
+ * Creates an overlay div to display behind the modal.
+ * @private
*/
- containerClass: 'orbit-container',
+
+ }, {
+ key: '_makeOverlay',
+ value: function _makeOverlay() {
+ var additionalOverlayClasses = '';
+
+ if (this.options.additionalOverlayClasses) {
+ additionalOverlayClasses = ' ' + this.options.additionalOverlayClasses;
+ }
+
+ return __WEBPACK_IMPORTED_MODULE_0_jquery___default()('<div></div>').addClass('reveal-overlay' + additionalOverlayClasses).appendTo(this.options.appendTo);
+ }
+
/**
- * Class applied to individual slides.
- * @option
- * @example 'orbit-slide'
+ * Updates position of modal
+ * TODO: Figure out if we actually need to cache these values or if it doesn't matter
+ * @private
*/
- slideClass: 'orbit-slide',
+
+ }, {
+ key: '_updatePosition',
+ value: function _updatePosition() {
+ var width = this.$element.outerWidth();
+ var outerWidth = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).width();
+ var height = this.$element.outerHeight();
+ var outerHeight = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).height();
+ var left, top;
+ if (this.options.hOffset === 'auto') {
+ left = parseInt((outerWidth - width) / 2, 10);
+ } else {
+ left = parseInt(this.options.hOffset, 10);
+ }
+ if (this.options.vOffset === 'auto') {
+ if (height > outerHeight) {
+ top = parseInt(Math.min(100, outerHeight / 10), 10);
+ } else {
+ top = parseInt((outerHeight - height) / 4, 10);
+ }
+ } else {
+ top = parseInt(this.options.vOffset, 10);
+ }
+ this.$element.css({ top: top + 'px' });
+ // only worry about left if we don't have an overlay or we havea horizontal offset,
+ // otherwise we're perfectly in the middle
+ if (!this.$overlay || this.options.hOffset !== 'auto') {
+ this.$element.css({ left: left + 'px' });
+ this.$element.css({ margin: '0px' });
+ }
+ }
+
/**
- * Class applied to the bullet container. You're welcome.
- * @option
- * @example 'orbit-bullets'
+ * Adds event handlers for the modal.
+ * @private
*/
- boxOfBullets: 'orbit-bullets',
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this3 = this;
+
+ var _this = this;
+
+ this.$element.on({
+ 'open.zf.trigger': this.open.bind(this),
+ 'close.zf.trigger': function (event, $element) {
+ if (event.target === _this.$element[0] || __WEBPACK_IMPORTED_MODULE_0_jquery___default()(event.target).parents('[data-closable]')[0] === $element) {
+ // only close reveal when it's explicitly called
+ return _this3.close.apply(_this3);
+ }
+ },
+ 'toggle.zf.trigger': this.toggle.bind(this),
+ 'resizeme.zf.trigger': function () {
+ _this._updatePosition();
+ }
+ });
+
+ if (this.options.closeOnClick && this.options.overlay) {
+ this.$overlay.off('.zf.reveal').on('click.zf.reveal', function (e) {
+ if (e.target === _this.$element[0] || __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.contains(_this.$element[0], e.target) || !__WEBPACK_IMPORTED_MODULE_0_jquery___default.a.contains(document, e.target)) {
+ return;
+ }
+ _this.close();
+ });
+ }
+ if (this.options.deepLink) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).on('popstate.zf.reveal:' + this.id, this._handleState.bind(this));
+ }
+ }
+
/**
- * Class applied to the `next` navigation button.
- * @option
- * @example 'orbit-next'
+ * Handles modal methods on back/forward button clicks or any other event that triggers popstate.
+ * @private
*/
- nextClass: 'orbit-next',
+
+ }, {
+ key: '_handleState',
+ value: function _handleState(e) {
+ if (window.location.hash === '#' + this.id && !this.isActive) {
+ this.open();
+ } else {
+ this.close();
+ }
+ }
+
/**
- * Class applied to the `previous` navigation button.
- * @option
- * @example 'orbit-previous'
+ * Opens the modal controlled by `this.$anchor`, and closes all others by default.
+ * @function
+ * @fires Reveal#closeme
+ * @fires Reveal#open
*/
- prevClass: 'orbit-previous'
- };
- /**
- * Initializes the plugin by creating jQuery collections, setting attributes, and starting the animation.
- * @function
- * @private
- */
- Orbit.prototype._init = function(){
- this.$wrapper = this.$element.find('.' + this.options.containerClass);
- this.$slides = this.$element.find('.' + this.options.slideClass);
- var $images = this.$element.find('img'),
- initActive = this.$slides.filter('.is-active');
- if(!initActive.length){
- this.$slides.eq(0).addClass('is-active');
- }
+ }, {
+ key: 'open',
+ value: function open() {
+ var _this4 = this;
- if($images.length){
- Foundation.onImagesLoaded($images, this._prepareForOrbit.bind(this));
- }else{
- this._prepareForOrbit();//hehe
- }
+ // either update or replace browser history
+ if (this.options.deepLink) {
+ var hash = '#' + this.id;
- if(this.options.bullets){
- this._loadBullets();
- }
+ if (window.history.pushState) {
+ if (this.options.updateHistory) {
+ window.history.pushState({}, '', hash);
+ } else {
+ window.history.replaceState({}, '', hash);
+ }
+ } else {
+ window.location.hash = hash;
+ }
+ }
- this._events();
+ this.isActive = true;
- if(this.options.autoPlay){
- this.geoSync();
- }
- if(this.options.accessible){ // allow wrapper to be focusable to enable arrow navigation
- this.$wrapper.attr('tabindex', 0);
- }
- };
- /**
- * Creates a jQuery collection of bullets, if they are being used.
- * @function
- * @private
- */
- Orbit.prototype._loadBullets = function(){
- this.$bullets = this.$element.find('.' + this.options.boxOfBullets).find('button');
- };
- /**
- * Sets a `timer` object on the orbit, and starts the counter for the next slide.
- * @function
- */
- Orbit.prototype.geoSync = function(){
- var _this = this;
- this.timer = new Foundation.Timer(
- this.$element,
- {duration: this.options.timerDelay,
- infinite: false},
- function(){
- _this.changeSlide(true);
- });
- this.timer.start();
- };
- /**
- * Sets wrapper and slide heights for the orbit.
- * @function
- * @private
- */
- Orbit.prototype._prepareForOrbit = function(){
- var _this = this;
- this._setWrapperHeight(function(max){
- _this._setSlideHeight(max);
- });
- };
- /**
- * Calulates the height of each slide in the collection, and uses the tallest one for the wrapper height.
- * @function
- * @private
- * @param {Function} cb - a callback function to fire when complete.
- */
- Orbit.prototype._setWrapperHeight = function(cb){//rewrite this to `for` loop
- var max = 0, temp, counter = 0;
+ // Make elements invisible, but remove display: none so we can get size and positioning
+ this.$element.css({ 'visibility': 'hidden' }).show().scrollTop(0);
+ if (this.options.overlay) {
+ this.$overlay.css({ 'visibility': 'hidden' }).show();
+ }
- this.$slides.each(function(){
- temp = this.getBoundingClientRect().height;
- $(this).attr('data-slide', counter);
+ this._updatePosition();
- if(counter){//if not the first slide, set css position and display property
- $(this).css({'position': 'relative', 'display': 'none'});
+ this.$element.hide().css({ 'visibility': '' });
+
+ if (this.$overlay) {
+ this.$overlay.css({ 'visibility': '' }).hide();
+ if (this.$element.hasClass('fast')) {
+ this.$overlay.addClass('fast');
+ } else if (this.$element.hasClass('slow')) {
+ this.$overlay.addClass('slow');
+ }
}
- max = temp > max ? temp : max;
- counter++;
- });
- if(counter === this.$slides.length){
- this.$wrapper.css({'height': max});//only change the wrapper height property once.
- cb(max);//fire callback with max height dimension.
- }
- };
- /**
- * Sets the max-height of each slide.
- * @function
- * @private
- */
- Orbit.prototype._setSlideHeight = function(height){
- this.$slides.each(function(){
- $(this).css('max-height', height);
- });
- };
- /**
- * Adds event listeners to basically everything within the element.
- * @function
- * @private
- */
- Orbit.prototype._events = function(){
- var _this = this;
+ if (!this.options.multipleOpened) {
+ /**
+ * Fires immediately before the modal opens.
+ * Closes any other modals that are currently open
+ * @event Reveal#closeme
+ */
+ this.$element.trigger('closeme.zf.reveal', this.id);
+ }
- //***************************************
- //**Now using custom event - thanks to:**
- //** Yohai Ararat of Toronto **
- //***************************************
- if(this.options.swipe){
- this.$slides.off('swipeleft.zf.orbit swiperight.zf.orbit')
- .on('swipeleft.zf.orbit', function(e){
- e.preventDefault();
- _this.changeSlide(true);
- }).on('swiperight.zf.orbit', function(e){
- e.preventDefault();
- _this.changeSlide(false);
- });
- }
- //***************************************
+ var _this = this;
- if(this.options.autoPlay){
- this.$slides.on('click.zf.orbit', function(){
- _this.$element.data('clickedOn', _this.$element.data('clickedOn') ? false : true);
- _this.timer[_this.$element.data('clickedOn') ? 'pause' : 'start']();
- });
- if(this.options.pauseOnHover){
- this.$element.on('mouseenter.zf.orbit', function(){
- _this.timer.pause();
- }).on('mouseleave.zf.orbit', function(){
- if(!_this.$element.data('clickedOn')){
- _this.timer.start();
+ function addRevealOpenClasses() {
+ if (_this.isMobile) {
+ if (!_this.originalScrollPos) {
+ _this.originalScrollPos = window.pageYOffset;
+ }
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('html, body').addClass('is-reveal-open');
+ } else {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('body').addClass('is-reveal-open');
+ }
+ }
+ // Motion UI method of reveal
+ if (this.options.animationIn) {
+ var afterAnimation = function () {
+ _this.$element.attr({
+ 'aria-hidden': false,
+ 'tabindex': -1
+ }).focus();
+ addRevealOpenClasses();
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].trapFocus(_this.$element);
+ };
+
+ if (this.options.overlay) {
+ __WEBPACK_IMPORTED_MODULE_3__foundation_util_motion__["a" /* Motion */].animateIn(this.$overlay, 'fade-in');
+ }
+ __WEBPACK_IMPORTED_MODULE_3__foundation_util_motion__["a" /* Motion */].animateIn(this.$element, this.options.animationIn, function () {
+ if (_this4.$element) {
+ // protect against object having been removed
+ _this4.focusableElements = __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].findFocusable(_this4.$element);
+ afterAnimation();
}
});
}
- }
+ // jQuery method of reveal
+ else {
+ if (this.options.overlay) {
+ this.$overlay.show(0);
+ }
+ this.$element.show(this.options.showDelay);
+ }
- if(this.options.navButtons){
- var $controls = this.$element.find('.' + this.options.nextClass + ', .' + this.options.prevClass);
- $controls.attr('tabindex', 0)
- //also need to handle enter/return and spacebar key presses
- .on('click.zf.orbit touchend.zf.orbit', function(){
- _this.changeSlide($(this).hasClass(_this.options.nextClass));
- });
- }
+ // handle accessibility
+ this.$element.attr({
+ 'aria-hidden': false,
+ 'tabindex': -1
+ }).focus();
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].trapFocus(this.$element);
- if(this.options.bullets){
- this.$bullets.on('click.zf.orbit touchend.zf.orbit', function(){
- if(/is-active/g.test(this.className)){ return false; }//if this is active, kick out of function.
- var idx = $(this).data('slide'),
- ltr = idx > _this.$slides.filter('.is-active').data('slide'),
- $slide = _this.$slides.eq(idx);
+ addRevealOpenClasses();
- _this.changeSlide(ltr, $slide, idx);
- });
+ this._extraHandlers();
+
+ /**
+ * Fires when the modal has successfully opened.
+ * @event Reveal#open
+ */
+ this.$element.trigger('open.zf.reveal');
}
- this.$wrapper.add(this.$bullets).on('keydown.zf.orbit', function(e){
- // handle keyboard event with keyboard util
- Foundation.Keyboard.handleKey(e, _this, {
- next: function() {
- _this.changeSlide(true);
- },
- previous: function() {
- _this.changeSlide(false);
- },
- handled: function() { // if bullet is focused, make sure focus moves
- if ($(e.target).is(_this.$bullets)) {
- _this.$bullets.filter('.is-active').focus();
+ /**
+ * Adds extra event handlers for the body and window if necessary.
+ * @private
+ */
+
+ }, {
+ key: '_extraHandlers',
+ value: function _extraHandlers() {
+ var _this = this;
+ if (!this.$element) {
+ return;
+ } // If we're in the middle of cleanup, don't freak out
+ this.focusableElements = __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].findFocusable(this.$element);
+
+ if (!this.options.overlay && this.options.closeOnClick && !this.options.fullScreen) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('body').on('click.zf.reveal', function (e) {
+ if (e.target === _this.$element[0] || __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.contains(_this.$element[0], e.target) || !__WEBPACK_IMPORTED_MODULE_0_jquery___default.a.contains(document, e.target)) {
+ return;
}
- }
- });
- });
- };
- /**
- * Changes the current slide to a new one.
- * @function
- * @param {Boolean} isLTR - flag if the slide should move left to right.
- * @param {jQuery} chosenSlide - the jQuery element of the slide to show next, if one is selected.
- * @param {Number} idx - the index of the new slide in its collection, if one chosen.
- * @fires Orbit#slidechange
- */
- Orbit.prototype.changeSlide = function(isLTR, chosenSlide, idx){
- var $curSlide = this.$slides.filter('.is-active').eq(0);
-
-
- if(/mui/g.test($curSlide[0].className)){ return false; }//if the slide is currently animating, kick out of the function
-
- var $firstSlide = this.$slides.first(),
- $lastSlide = this.$slides.last(),
- dirIn = isLTR ? 'Right' : 'Left',
- dirOut = isLTR ? 'Left' : 'Right',
- _this = this,
- $newSlide;
-
- if(!chosenSlide){//most of the time, this will be auto played or clicked from the navButtons.
- $newSlide = isLTR ? //if wrapping enabled, check to see if there is a `next` or `prev` sibling, if not, select the first or last slide to fill in. if wrapping not enabled, attempt to select `next` or `prev`, if there's nothing there, the function will kick out on next step. CRAZY NESTED TERNARIES!!!!!
- (this.options.infiniteWrap ? $curSlide.next('.' + this.options.slideClass).length ? $curSlide.next('.' + this.options.slideClass) : $firstSlide : $curSlide.next('.' + this.options.slideClass))//pick next slide if moving left to right
- :
- (this.options.infiniteWrap ? $curSlide.prev('.' + this.options.slideClass).length ? $curSlide.prev('.' + this.options.slideClass) : $lastSlide : $curSlide.prev('.' + this.options.slideClass));//pick prev slide if moving right to left
- }else{
- $newSlide = chosenSlide;
- }
- if($newSlide.length){
- if(this.options.bullets){
- idx = idx || this.$slides.index($newSlide);//grab index to update bullets
- this._updateBullets(idx);
- }
- Foundation.Motion.animateIn(
- $newSlide.addClass('is-active').css({'position': 'absolute', 'top': 0}),
- this.options['animInFrom' + dirIn],
- function(){
- $newSlide.css({'position': 'relative', 'display': 'block'})
- .attr('aria-live', 'polite');
+ _this.close();
});
+ }
- Foundation.Motion.animateOut(
- $curSlide.removeClass('is-active'),
- this.options['animOutTo' + dirOut],
- function(){
- $curSlide.removeAttr('aria-live');
- if(_this.options.autoPlay){
- _this.timer.restart();
- }
- //do stuff?
- /**
- * Triggers when the slide has finished animating in.
- * @event Orbit#slidechange
- */
- _this.$element.trigger('slidechange.zf.orbit', [$newSlide]);
+ if (this.options.closeOnEsc) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).on('keydown.zf.reveal', function (e) {
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].handleKey(e, 'Reveal', {
+ close: function () {
+ if (_this.options.closeOnEsc) {
+ _this.close();
+ }
+ }
+ });
});
+ }
}
- };
- /**
- * Updates the active state of the bullets, if displayed.
- * @function
- * @private
- * @param {Number} idx - the index of the current slide.
- */
- Orbit.prototype._updateBullets = function(idx){
- var $oldBullet = this.$element.find('.' + this.options.boxOfBullets)
- .find('.is-active').removeClass('is-active').blur(),
- span = $oldBullet.find('span:last').detach(),
- $newBullet = this.$bullets.eq(idx).addClass('is-active').append(span);
- };
- /**
- * Destroys the carousel and hides the element.
- * @function
- */
- Orbit.prototype.destroy = function(){
- delete this.timer;
- this.$element.off('.zf.orbit').find('*').off('.zf.orbit').end().hide();
- Foundation.unregisterPlugin(this);
- };
- Foundation.plugin(Orbit, 'Orbit');
+ /**
+ * Closes the modal.
+ * @function
+ * @fires Reveal#closed
+ */
+
+ }, {
+ key: 'close',
+ value: function close() {
+ if (!this.isActive || !this.$element.is(':visible')) {
+ return false;
+ }
+ var _this = this;
- }(jQuery, window.Foundation);
+ // Motion UI method of hiding
+ if (this.options.animationOut) {
+ if (this.options.overlay) {
+ __WEBPACK_IMPORTED_MODULE_3__foundation_util_motion__["a" /* Motion */].animateOut(this.$overlay, 'fade-out');
+ }
- /**
- * ResponsiveMenu module.
- * @module foundation.responsiveMenu
- * @requires foundation.util.triggers
- * @requires foundation.util.mediaQuery
- * @requires foundation.util.accordionMenu
- * @requires foundation.util.drilldown
- * @requires foundation.util.dropdown-menu
- */
- !function(Foundation, $) {
- 'use strict';
+ __WEBPACK_IMPORTED_MODULE_3__foundation_util_motion__["a" /* Motion */].animateOut(this.$element, this.options.animationOut, finishUp);
+ }
+ // jQuery method of hiding
+ else {
+ this.$element.hide(this.options.hideDelay);
- // The plugin matches the plugin classes with these plugin instances.
- var MenuPlugins = {
- dropdown: {
- cssClass: 'dropdown',
- plugin: Foundation._plugins['dropdown-menu'] || null
- },
- drilldown: {
- cssClass: 'drilldown',
- plugin: Foundation._plugins['drilldown'] || null
- },
- accordion: {
- cssClass: 'accordion-menu',
- plugin: Foundation._plugins['accordion-menu'] || null
- }
- };
+ if (this.options.overlay) {
+ this.$overlay.hide(0, finishUp);
+ } else {
+ finishUp();
+ }
+ }
- // [PH] Media queries
- var phMedia = {
- small: '(min-width: 0px)',
- medium: '(min-width: 640px)'
- };
+ // Conditionals to remove extra event listeners added on open
+ if (this.options.closeOnEsc) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off('keydown.zf.reveal');
+ }
- /**
- * Creates a new instance of a responsive menu.
- * @class
- * @fires ResponsiveMenu#init
- * @param {jQuery} element - jQuery object to make into a dropdown menu.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function ResponsiveMenu(element) {
- this.$element = $(element);
- this.rules = this.$element.data('responsive-menu');
- this.currentMq = null;
- this.currentPlugin = null;
+ if (!this.options.overlay && this.options.closeOnClick) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('body').off('click.zf.reveal');
+ }
- this._init();
- this._events();
+ this.$element.off('keydown.zf.reveal');
- Foundation.registerPlugin(this);
- }
+ function finishUp() {
+ if (_this.isMobile) {
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()('.reveal:visible').length === 0) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('html, body').removeClass('is-reveal-open');
+ }
+ if (_this.originalScrollPos) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('body').scrollTop(_this.originalScrollPos);
+ _this.originalScrollPos = null;
+ }
+ } else {
+ if (__WEBPACK_IMPORTED_MODULE_0_jquery___default()('.reveal:visible').length === 0) {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('body').removeClass('is-reveal-open');
+ }
+ }
- ResponsiveMenu.defaults = {};
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].releaseFocus(_this.$element);
- /**
- * Initializes the Menu by parsing the classes from the 'data-ResponsiveMenu' attribute on the element.
- * @function
- * @private
- */
- ResponsiveMenu.prototype._init = function() {
- var rulesTree = {};
+ _this.$element.attr('aria-hidden', true);
- // Parse rules from "classes" in data attribute
- var rules = this.rules.split(' ');
+ /**
+ * Fires when the modal is done closing.
+ * @event Reveal#closed
+ */
+ _this.$element.trigger('closed.zf.reveal');
+ }
- // Iterate through every rule found
- for (var i = 0; i < rules.length; i++) {
- var rule = rules[i].split('-');
- var ruleSize = rule.length > 1 ? rule[0] : 'small';
- var rulePlugin = rule.length > 1 ? rule[1] : rule[0];
+ /**
+ * Resets the modal content
+ * This prevents a running video to keep going in the background
+ */
+ if (this.options.resetOnClose) {
+ this.$element.html(this.$element.html());
+ }
- if (MenuPlugins[rulePlugin] !== null) {
- rulesTree[ruleSize] = MenuPlugins[rulePlugin];
+ this.isActive = false;
+ if (_this.options.deepLink) {
+ if (window.history.replaceState) {
+ window.history.replaceState('', document.title, window.location.href.replace('#' + this.id, ''));
+ } else {
+ window.location.hash = '';
+ }
}
+
+ this.$anchor.focus();
}
- this.rules = rulesTree;
+ /**
+ * Toggles the open/closed state of a modal.
+ * @function
+ */
- if (!$.isEmptyObject(rulesTree)) {
- this._checkMediaQueries();
+ }, {
+ key: 'toggle',
+ value: function toggle() {
+ if (this.isActive) {
+ this.close();
+ } else {
+ this.open();
+ }
}
- };
+ }, {
+ key: '_destroy',
- /**
- * Initializes events for the Menu.
- * @function
- * @private
- */
- ResponsiveMenu.prototype._events = function() {
- var _this = this;
-
- $(window).on('changed.zf.mediaquery', function() {
- _this._checkMediaQueries();
- });
- // $(window).on('resize.zf.ResponsiveMenu', function() {
- // _this._checkMediaQueries();
- // });
- };
- /**
- * Checks the current screen width against available media queries. If the media query has changed, and the plugin needed has changed, the plugins will swap out.
- * @function
- * @private
- */
- ResponsiveMenu.prototype._checkMediaQueries = function() {
- var matchedMq, _this = this;
- // Iterate through each rule and find the last matching rule
- $.each(this.rules, function(key) {
- if (Foundation.MediaQuery.atLeast(key)) {
- matchedMq = key;
+ /**
+ * Destroys an instance of a modal.
+ * @function
+ */
+ value: function _destroy() {
+ if (this.options.overlay) {
+ this.$element.appendTo(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this.options.appendTo)); // move $element outside of $overlay to prevent error unregisterPlugin()
+ this.$overlay.hide().off().remove();
}
- });
+ this.$element.hide().off();
+ this.$anchor.off('.zf');
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off('.zf.reveal:' + this.id);
+ }
+ }]);
- // No match? No dice
- if (!matchedMq) return;
+ return Reveal;
+ }(__WEBPACK_IMPORTED_MODULE_4__foundation_plugin__["a" /* Plugin */]);
- // Plugin already initialized? We good
- if (this.currentPlugin instanceof this.rules[matchedMq].plugin) return;
+ Reveal.defaults = {
+ /**
+ * Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
+ * @option
+ * @type {string}
+ * @default ''
+ */
+ animationIn: '',
+ /**
+ * Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
+ * @option
+ * @type {string}
+ * @default ''
+ */
+ animationOut: '',
+ /**
+ * Time, in ms, to delay the opening of a modal after a click if no animation used.
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ showDelay: 0,
+ /**
+ * Time, in ms, to delay the closing of a modal after a click if no animation used.
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ hideDelay: 0,
+ /**
+ * Allows a click on the body/overlay to close the modal.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ closeOnClick: true,
+ /**
+ * Allows the modal to close if the user presses the `ESCAPE` key.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ closeOnEsc: true,
+ /**
+ * If true, allows multiple modals to be displayed at once.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ multipleOpened: false,
+ /**
+ * Distance, in pixels, the modal should push down from the top of the screen.
+ * @option
+ * @type {number|string}
+ * @default auto
+ */
+ vOffset: 'auto',
+ /**
+ * Distance, in pixels, the modal should push in from the side of the screen.
+ * @option
+ * @type {number|string}
+ * @default auto
+ */
+ hOffset: 'auto',
+ /**
+ * Allows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this as well.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ fullScreen: false,
+ /**
+ * Percentage of screen height the modal should push up from the bottom of the view.
+ * @option
+ * @type {number}
+ * @default 10
+ */
+ btmOffsetPct: 10,
+ /**
+ * Allows the modal to generate an overlay div, which will cover the view when modal opens.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ overlay: true,
+ /**
+ * Allows the modal to remove and reinject markup on close. Should be true if using video elements w/o using provider's api, otherwise, videos will continue to play in the background.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ resetOnClose: false,
+ /**
+ * Allows the modal to alter the url on open/close, and allows the use of the `back` button to close modals. ALSO, allows a modal to auto-maniacally open on page load IF the hash === the modal's user-set id.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ deepLink: false,
+ /**
+ * Update the browser history with the open modal
+ * @option
+ * @default false
+ */
+ updateHistory: false,
+ /**
+ * Allows the modal to append to custom div.
+ * @option
+ * @type {string}
+ * @default "body"
+ */
+ appendTo: "body",
+ /**
+ * Allows adding additional class names to the reveal overlay.
+ * @option
+ * @type {string}
+ * @default ''
+ */
+ additionalOverlayClasses: ''
+ };
- // Remove existing plugin-specific CSS classes
- $.each(MenuPlugins, function(key, value) {
- _this.$element.removeClass(value.cssClass);
- });
+ function iPhoneSniff() {
+ return (/iP(ad|hone|od).*OS/.test(window.navigator.userAgent)
+ );
+ }
- // Add the CSS class for the new plugin
- this.$element.addClass(this.rules[matchedMq].cssClass);
+ function androidSniff() {
+ return (/Android/.test(window.navigator.userAgent)
+ );
+ }
- // Create an instance of the new plugin
- if (this.currentPlugin) this.currentPlugin.destroy();
- this.currentPlugin = new this.rules[matchedMq].plugin(this.$element, {});
- };
+ function mobileSniff() {
+ return iPhoneSniff() || androidSniff();
+ }
- /**
- * Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.
- * @function
- */
- ResponsiveMenu.prototype.destroy = function() {
- this.currentPlugin.destroy();
- $(window).off('.zf.ResponsiveMenu');
- Foundation.unregisterPlugin(this);
- };
- Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
- }(Foundation, jQuery);
- /**
- * ResponsiveToggle module.
- * @module foundation.responsiveToggle
- * @requires foundation.util.mediaQuery
- */
- !function($, Foundation) {
+ /***/ }),
+ /* 32 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- 'use strict';
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Slider; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__ = __webpack_require__(3);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_motion__ = __webpack_require__(6);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_plugin__ = __webpack_require__(2);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__foundation_util_touch__ = __webpack_require__(10);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__foundation_util_triggers__ = __webpack_require__(5);
- /**
- * Creates a new instance of Tab Bar.
- * @class
- * @fires ResponsiveToggle#init
- * @param {jQuery} element - jQuery object to attach tab bar functionality to.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function ResponsiveToggle(element, options) {
- this.$element = $(element);
- this.options = $.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
- this._init();
- this._events();
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
- Foundation.registerPlugin(this);
- }
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- ResponsiveToggle.defaults = {
- /**
- * The breakpoint after which the menu is always shown, and the tab bar is hidden.
- * @option
- * @example 'medium'
- */
- hideFor: 'medium'
- };
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
- /**
- * Initializes the tab bar by finding the target element, toggling element, and running update().
- * @function
- * @private
- */
- ResponsiveToggle.prototype._init = function() {
- var targetID = this.$element.data('responsive-toggle');
- if (!targetID) {
- console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.');
- }
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
- this.$targetMenu = $('#'+targetID);
- this.$toggler = this.$element.find('[data-toggle]');
- this._update();
- };
- /**
- * Adds necessary event handlers for the tab bar to work.
- * @function
- * @private
- */
- ResponsiveToggle.prototype._events = function() {
- var _this = this;
- $(window).on('changed.zf.mediaquery', this._update.bind(this));
- this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
- };
- /**
- * Checks the current media query to determine if the tab bar should be visible or hidden.
- * @function
- * @private
- */
- ResponsiveToggle.prototype._update = function() {
- // Mobile
- if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
- this.$element.show();
- this.$targetMenu.hide();
- }
- // Desktop
- else {
- this.$element.hide();
- this.$targetMenu.show();
- }
- };
- /**
- * Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.
- * @function
- * @fires ResponsiveToggle#toggled
- */
- ResponsiveToggle.prototype.toggleMenu = function() {
- if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
- this.$targetMenu.toggle(0);
- /**
- * Fires when the element attached to the tab bar toggles.
- * @event ResponsiveToggle#toggled
- */
- this.$element.trigger('toggled.zf.responsiveToggle');
- }
- };
- ResponsiveToggle.prototype.destroy = function(){
- //TODO this...
- };
- Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
- }(jQuery, Foundation);
/**
- * Reveal module.
- * @module foundation.reveal
- * @requires foundation.util.keyboard
- * @requires foundation.util.box
+ * Slider module.
+ * @module foundation.slider
+ * @requires foundation.util.motion
* @requires foundation.util.triggers
- * @requires foundation.util.mediaQuery
- * @requires foundation.util.motion if using animations
+ * @requires foundation.util.keyboard
+ * @requires foundation.util.touch
*/
- !function(Foundation, $) {
- 'use strict';
- /**
- * Creates a new instance of Reveal.
- * @class
- * @param {jQuery} element - jQuery object to use for the modal.
- * @param {Object} options - optional parameters.
- */
+ var Slider = function (_Plugin) {
+ _inherits(Slider, _Plugin);
- function Reveal(element, options) {
- this.$element = element;
- this.options = $.extend({}, Reveal.defaults, this.$element.data(), options);
- this._init();
+ function Slider() {
+ _classCallCheck(this, Slider);
- Foundation.registerPlugin(this);
- Foundation.Keyboard.register('Reveal', {
- 'ENTER': 'open',
- 'SPACE': 'open',
- 'ESCAPE': 'close',
- 'TAB': 'tab_forward',
- 'SHIFT_TAB': 'tab_backward'
- });
+ return _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).apply(this, arguments));
}
- Reveal.defaults = {
- /**
- * Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
- * @option
- * @example 'slide-in-left'
- */
- animationIn: '',
- /**
- * Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
- * @option
- * @example 'slide-out-right'
- */
- animationOut: '',
- /**
- * Time, in ms, to delay the opening of a modal after a click if no animation used.
- * @option
- * @example 10
- */
- showDelay: 0,
- /**
- * Time, in ms, to delay the closing of a modal after a click if no animation used.
- * @option
- * @example 10
- */
- hideDelay: 0,
- /**
- * Allows a click on the body/overlay to close the modal.
- * @option
- * @example true
- */
- closeOnClick: true,
- /**
- * Allows the modal to close if the user presses the `ESCAPE` key.
- * @option
- * @example true
- */
- closeOnEsc: true,
- /**
- * If true, allows multiple modals to be displayed at once.
- * @option
- * @example false
- */
- multipleOpened: false,
- /**
- * Distance, in pixels, the modal should push down from the top of the screen.
- * @option
- * @example 100
- */
- vOffset: 100,
- /**
- * Distance, in pixels, the modal should push in from the side of the screen.
- * @option
- * @example 0
- */
- hOffset: 0,
- /**
- * Allows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this as well.
- * @option
- * @example false
- */
- fullScreen: false,
- /**
- * Percentage of screen height the modal should push up from the bottom of the view.
- * @option
- * @example 10
- */
- btmOffsetPct: 10,
+ _createClass(Slider, [{
+ key: '_setup',
+
/**
- * Allows the modal to generate an overlay div, which will cover the view when modal opens.
- * @option
- * @example true
+ * Creates a new instance of a slider control.
+ * @class
+ * @name Slider
+ * @param {jQuery} element - jQuery object to make into a slider control.
+ * @param {Object} options - Overrides to the default plugin settings.
*/
- overlay: true,
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Slider.defaults, this.$element.data(), options);
+ this.className = 'Slider'; // ie9 back compat
+
+ // Touch and Triggers inits are idempotent, we just need to make sure it's initialied.
+ __WEBPACK_IMPORTED_MODULE_5__foundation_util_touch__["a" /* Touch */].init(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a);
+ __WEBPACK_IMPORTED_MODULE_6__foundation_util_triggers__["a" /* Triggers */].init(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a);
+
+ this._init();
+
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].register('Slider', {
+ 'ltr': {
+ 'ARROW_RIGHT': 'increase',
+ 'ARROW_UP': 'increase',
+ 'ARROW_DOWN': 'decrease',
+ 'ARROW_LEFT': 'decrease',
+ 'SHIFT_ARROW_RIGHT': 'increase_fast',
+ 'SHIFT_ARROW_UP': 'increase_fast',
+ 'SHIFT_ARROW_DOWN': 'decrease_fast',
+ 'SHIFT_ARROW_LEFT': 'decrease_fast',
+ 'HOME': 'min',
+ 'END': 'max'
+ },
+ 'rtl': {
+ 'ARROW_LEFT': 'increase',
+ 'ARROW_RIGHT': 'decrease',
+ 'SHIFT_ARROW_LEFT': 'increase_fast',
+ 'SHIFT_ARROW_RIGHT': 'decrease_fast'
+ }
+ });
+ }
+
/**
- * Allows the modal to remove and reinject markup on close. Should be true if using video elements w/o using provider's api.
- * @option
- * @example false
+ * Initilizes the plugin by reading/setting attributes, creating collections and setting the initial position of the handle(s).
+ * @function
+ * @private
*/
- resetOnClose: false
- };
- /**
- * Initializes the modal by adding the overlay and close buttons, (if selected).
- * @private
- */
- Reveal.prototype._init = function(){
- this.id = this.$element.attr('id');
- this.isActive = false;
+ }, {
+ key: '_init',
+ value: function _init() {
+ this.inputs = this.$element.find('input');
+ this.handles = this.$element.find('[data-slider-handle]');
- this.$anchor = $('[data-open="' + this.id + '"]').length ? $('[data-open="' + this.id + '"]') : $('[data-toggle="' + this.id + '"]');
+ this.$handle = this.handles.eq(0);
+ this.$input = this.inputs.length ? this.inputs.eq(0) : __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + this.$handle.attr('aria-controls'));
+ this.$fill = this.$element.find('[data-slider-fill]').css(this.options.vertical ? 'height' : 'width', 0);
- if(this.$anchor.length){
- var anchorId = this.$anchor[0].id || Foundation.GetYoDigits(6, 'reveal');
+ var isDbl = false,
+ _this = this;
+ if (this.options.disabled || this.$element.hasClass(this.options.disabledClass)) {
+ this.options.disabled = true;
+ this.$element.addClass(this.options.disabledClass);
+ }
+ if (!this.inputs.length) {
+ this.inputs = __WEBPACK_IMPORTED_MODULE_0_jquery___default()().add(this.$input);
+ this.options.binding = true;
+ }
- this.$anchor.attr({
- 'aria-controls': this.id,
- 'id': anchorId,
- 'aria-haspopup': true,
- 'tabindex': 0
- });
- this.$element.attr({'aria-labelledby': anchorId});
- }
+ this._setInitAttr(0);
- // this.options.fullScreen = this.$element.hasClass('full');
- if(this.options.fullScreen || this.$element.hasClass('full')){
- this.options.fullScreen = true;
- this.options.overlay = false;
- }
- if(this.options.overlay){
- this.$overlay = this._makeOverlay(this.id);
+ if (this.handles[1]) {
+ this.options.doubleSided = true;
+ this.$handle2 = this.handles.eq(1);
+ this.$input2 = this.inputs.length > 1 ? this.inputs.eq(1) : __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + this.$handle2.attr('aria-controls'));
+
+ if (!this.inputs[1]) {
+ this.inputs = this.inputs.add(this.$input2);
+ }
+ isDbl = true;
+
+ // this.$handle.triggerHandler('click.zf.slider');
+ this._setInitAttr(1);
+ }
+
+ // Set handle positions
+ this.setHandles();
+
+ this._events();
}
+ }, {
+ key: 'setHandles',
+ value: function setHandles() {
+ var _this3 = this;
- this.$element.attr({
- 'role': 'dialog',
- 'aria-hidden': true,
- 'data-yeti-box': this.id,
- 'data-resize': this.id
- });
+ if (this.handles[1]) {
+ this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true, function () {
+ _this3._setHandlePos(_this3.$handle2, _this3.inputs.eq(1).val(), true);
+ });
+ } else {
+ this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true);
+ }
+ }
+ }, {
+ key: '_reflow',
+ value: function _reflow() {
+ this.setHandles();
+ }
+ /**
+ * @function
+ * @private
+ * @param {Number} value - floating point (the value) to be transformed using to a relative position on the slider (the inverse of _value)
+ */
- this._events();
- };
+ }, {
+ key: '_pctOfBar',
+ value: function _pctOfBar(value) {
+ var pctOfBar = percent(value - this.options.start, this.options.end - this.options.start);
+
+ switch (this.options.positionValueFunction) {
+ case "pow":
+ pctOfBar = this._logTransform(pctOfBar);
+ break;
+ case "log":
+ pctOfBar = this._powTransform(pctOfBar);
+ break;
+ }
- /**
- * Creates an overlay div to display behind the modal.
- * @private
- */
- Reveal.prototype._makeOverlay = function(id){
- var $overlay = $('<div></div>')
- .addClass('reveal-overlay')
- .attr({'tabindex': -1, 'aria-hidden': true})
- .appendTo('body');
- if(this.options.closeOnClick){
- $overlay.attr({
- 'data-close': id
- });
+ return pctOfBar.toFixed(2);
}
- return $overlay;
- };
- /**
- * Adds event handlers for the modal.
- * @private
- */
- Reveal.prototype._events = function(){
- var _this = this;
+ /**
+ * @function
+ * @private
+ * @param {Number} pctOfBar - floating point, the relative position of the slider (typically between 0-1) to be transformed to a value
+ */
- this.$element.on({
- 'open.zf.trigger': this.open.bind(this),
- 'close.zf.trigger': this.close.bind(this),
- 'toggle.zf.trigger': this.toggle.bind(this),
- 'resizeme.zf.trigger': function(){
- if(_this.$element.is(':visible')){
- _this._setPosition(function(){});
- }
+ }, {
+ key: '_value',
+ value: function _value(pctOfBar) {
+ switch (this.options.positionValueFunction) {
+ case "pow":
+ pctOfBar = this._powTransform(pctOfBar);
+ break;
+ case "log":
+ pctOfBar = this._logTransform(pctOfBar);
+ break;
}
- });
+ var value = (this.options.end - this.options.start) * pctOfBar + this.options.start;
- if(this.$anchor.length){
- this.$anchor.on('keydown.zf.reveal', function(e){
- if(e.which === 13 || e.which === 32){
- e.stopPropagation();
- e.preventDefault();
- _this.open();
- }
- });
+ return value;
}
+ /**
+ * @function
+ * @private
+ * @param {Number} value - floating point (typically between 0-1) to be transformed using the log function
+ */
- if(this.options.closeOnClick && this.options.overlay){
- this.$overlay.off('.zf.reveal').on('click.zf.reveal', this.close.bind(this));
+ }, {
+ key: '_logTransform',
+ value: function _logTransform(value) {
+ return baseLog(this.options.nonLinearBase, value * (this.options.nonLinearBase - 1) + 1);
}
- };
- /**
- * Sets the position of the modal before opening
- * @param {Function} cb - a callback function to execute when positioning is complete.
- * @private
- */
- Reveal.prototype._setPosition = function(cb){
- var eleDims = Foundation.Box.GetDimensions(this.$element);
- var elePos = this.options.fullScreen ? 'reveal full' : (eleDims.height >= (0.5 * eleDims.windowDims.height)) ? 'reveal' : 'center';
-
- if(elePos === 'reveal full'){
- console.log('full');
- //set to full height/width
- this.$element
- .offset(Foundation.Box.GetOffsets(this.$element, null, elePos, this.options.vOffset))
- .css({
- 'height': eleDims.windowDims.height,
- 'width': eleDims.windowDims.width
- });
- }else if(!Foundation.MediaQuery.atLeast('medium') || !Foundation.Box.ImNotTouchingYou(this.$element, null, true, false)){
- //if smaller than medium, resize to 100% width minus any custom L/R margin
- this.$element
- .css({
- 'width': eleDims.windowDims.width - (this.options.hOffset * 2)
- })
- .offset(Foundation.Box.GetOffsets(this.$element, null, 'center', this.options.vOffset, this.options.hOffset));
- //flag a boolean so we can reset the size after the element is closed.
- this.changedSize = true;
- }else{
- this.$element
- .css({
- 'max-height': eleDims.windowDims.height - (this.options.vOffset * (this.options.btmOffsetPct / 100 + 1)),
- 'width': ''
- })
- .offset(Foundation.Box.GetOffsets(this.$element, null, elePos, this.options.vOffset));
- //the max height based on a percentage of vertical offset plus vertical offset
- }
-
- cb();
- };
- /**
- * Opens the modal controlled by `this.$anchor`, and closes all others by default.
- * @function
- * @fires Reveal#closeAll
- * @fires Reveal#open
- */
- Reveal.prototype.open = function(){
- var _this = this;
- this.isActive = true;
- //make element invisible, but remove display: none so we can get size and positioning
- this.$element
- .css({'visibility': 'hidden'})
- .show()
- .scrollTop(0);
-
- this._setPosition(function(){
- _this.$element.hide()
- .css({'visibility': ''});
- if(!_this.options.multipleOpened){
- /**
- * Fires immediately before the modal opens.
- * Closes any other modals that are currently open
- * @event Reveal#closeAll
- */
- _this.$element.trigger('closeme.zf.reveal', _this.id);
- }
- if(_this.options.animationIn){
- if(_this.options.overlay){
- Foundation.Motion.animateIn(_this.$overlay, 'fade-in', function(){
- Foundation.Motion.animateIn(_this.$element, _this.options.animationIn, function(){
- });
- });
- }else{
- Foundation.Motion.animateIn(_this.$element, _this.options.animationIn, function(){
- });
- }
- }else{
- if(_this.options.overlay){
- _this.$overlay.show(0, function(){
- _this.$element.show(_this.options.showDelay, function(){
- });
- });
- }else{
- _this.$element.show(_this.options.showDelay, function(){
- });
- }
- }
- });
+ /**
+ * @function
+ * @private
+ * @param {Number} value - floating point (typically between 0-1) to be transformed using the power function
+ */
+ }, {
+ key: '_powTransform',
+ value: function _powTransform(value) {
+ return (Math.pow(this.options.nonLinearBase, value) - 1) / (this.options.nonLinearBase - 1);
+ }
- // handle accessibility
- this.$element.attr({'aria-hidden': false}).attr('tabindex', -1).focus()
/**
- * Fires when the modal has successfully opened.
- * @event Reveal#open
- */
- .trigger('open.zf.reveal');
+ * Sets the position of the selected handle and fill bar.
+ * @function
+ * @private
+ * @param {jQuery} $hndl - the selected handle to move.
+ * @param {Number} location - floating point between the start and end values of the slider bar.
+ * @param {Function} cb - callback function to fire on completion.
+ * @fires Slider#moved
+ * @fires Slider#changed
+ */
+
+ }, {
+ key: '_setHandlePos',
+ value: function _setHandlePos($hndl, location, noInvert, cb) {
+ // don't move if the slider has been disabled since its initialization
+ if (this.$element.hasClass(this.options.disabledClass)) {
+ return;
+ }
+ //might need to alter that slightly for bars that will have odd number selections.
+ location = parseFloat(location); //on input change events, convert string to number...grumble.
+
+ // prevent slider from running out of bounds, if value exceeds the limits set through options, override the value to min/max
+ if (location < this.options.start) {
+ location = this.options.start;
+ } else if (location > this.options.end) {
+ location = this.options.end;
+ }
- $('body').addClass('is-reveal-open')
- .attr({'aria-hidden': (this.options.overlay || this.options.fullScreen) ? true : false});
- setTimeout(function(){
- _this._extraHandlers();
- // Foundation.reflow();
- }, 0);
- };
+ var isDbl = this.options.doubleSided;
- /**
- * Adds extra event handlers for the body and window if necessary.
- * @private
- */
- Reveal.prototype._extraHandlers = function(){
- var _this = this;
- var visibleFocusableElements = this.$element.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]').filter(function() {
- if (!$(this).is(':visible') || $(this).attr('tabindex') < 0){ return false; }//only have visible elements and those that have a tabindex greater or equal 0
- return true;
- });
+ //this is for single-handled vertical sliders, it adjusts the value to account for the slider being "upside-down"
+ //for click and drag events, it's weird due to the scale(-1, 1) css property
+ if (this.options.vertical && !noInvert) {
+ location = this.options.end - location;
+ }
- if(!this.options.overlay && this.options.closeOnClick && !this.options.fullScreen){
- $('body').on('click.zf.reveal', function(e){
- // if()
- _this.close();
- });
- }
- if(this.options.closeOnEsc){
- $(window).on('keydown.zf.reveal', function(e){
- if (visibleFocusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general
- e.preventDefault();
+ if (isDbl) {
+ //this block is to prevent 2 handles from crossing eachother. Could/should be improved.
+ if (this.handles.index($hndl) === 0) {
+ var h2Val = parseFloat(this.$handle2.attr('aria-valuenow'));
+ location = location >= h2Val ? h2Val - this.options.step : location;
+ } else {
+ var h1Val = parseFloat(this.$handle.attr('aria-valuenow'));
+ location = location <= h1Val ? h1Val + this.options.step : location;
}
- Foundation.Keyboard.handleKey(e, _this, {
- close: function() {
- if (this.options.closeOnEsc) {
- this.close();
- }
- }
- });
- });
- }
+ }
- // lock focus within modal while tabbing
- this.$element.on('keydown.zf.reveal', function(e) {
- var $target = $(this);
- // handle keyboard event with keyboard util
- Foundation.Keyboard.handleKey(e, _this, {
- tab_forward: function() {
- if (this.$element.find(':focus').is(visibleFocusableElements.eq(-1))) { // left modal downwards, setting focus to first element
- visibleFocusableElements.eq(0).focus();
- e.preventDefault();
- }
- },
- tab_backward: function() {
- if (this.$element.find(':focus').is(visibleFocusableElements.eq(0)) || this.$element.is(':focus')) { // left modal upwards, setting focus to last element
- visibleFocusableElements.eq(-1).focus();
- e.preventDefault();
- }
- },
- open: function() {
- if ($target.is(visibleFocusableElements)) { // dont't trigger if acual element has focus (i.e. inputs, links, ...)
- this.open();
- }
- },
- close: function() {
- if (this.options.closeOnEsc) {
- this.close();
- }
+ var _this = this,
+ vert = this.options.vertical,
+ hOrW = vert ? 'height' : 'width',
+ lOrT = vert ? 'top' : 'left',
+ handleDim = $hndl[0].getBoundingClientRect()[hOrW],
+ elemDim = this.$element[0].getBoundingClientRect()[hOrW],
+
+ //percentage of bar min/max value based on click or drag point
+ pctOfBar = this._pctOfBar(location),
+
+ //number of actual pixels to shift the handle, based on the percentage obtained above
+ pxToMove = (elemDim - handleDim) * pctOfBar,
+
+ //percentage of bar to shift the handle
+ movement = (percent(pxToMove, elemDim) * 100).toFixed(this.options.decimal);
+ //fixing the decimal value for the location number, is passed to other methods as a fixed floating-point value
+ location = parseFloat(location.toFixed(this.options.decimal));
+ // declare empty object for css adjustments, only used with 2 handled-sliders
+ var css = {};
+
+ this._setValues($hndl, location);
+
+ // TODO update to calculate based on values set to respective inputs??
+ if (isDbl) {
+ var isLeftHndl = this.handles.index($hndl) === 0,
+
+ //empty variable, will be used for min-height/width for fill bar
+ dim,
+
+ //percentage w/h of the handle compared to the slider bar
+ handlePct = ~~(percent(handleDim, elemDim) * 100);
+ //if left handle, the math is slightly different than if it's the right handle, and the left/top property needs to be changed for the fill bar
+ if (isLeftHndl) {
+ //left or top percentage value to apply to the fill bar.
+ css[lOrT] = movement + '%';
+ //calculate the new min-height/width for the fill bar.
+ dim = parseFloat(this.$handle2[0].style[lOrT]) - movement + handlePct;
+ //this callback is necessary to prevent errors and allow the proper placement and initialization of a 2-handled slider
+ //plus, it means we don't care if 'dim' isNaN on init, it won't be in the future.
+ if (cb && typeof cb === 'function') {
+ cb();
+ } //this is only needed for the initialization of 2 handled sliders
+ } else {
+ //just caching the value of the left/bottom handle's left/top property
+ var handlePos = parseFloat(this.$handle[0].style[lOrT]);
+ //calculate the new min-height/width for the fill bar. Use isNaN to prevent false positives for numbers <= 0
+ //based on the percentage of movement of the handle being manipulated, less the opposing handle's left/top position, plus the percentage w/h of the handle itself
+ dim = movement - (isNaN(handlePos) ? (this.options.initialStart - this.options.start) / ((this.options.end - this.options.start) / 100) : handlePos) + handlePct;
}
- });
- if (visibleFocusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general
- e.preventDefault();
+ // assign the min-height/width to our css object
+ css['min-' + hOrW] = dim + '%';
}
- });
- };
+ this.$element.one('finished.zf.animate', function () {
+ /**
+ * Fires when the handle is done moving.
+ * @event Slider#moved
+ */
+ _this.$element.trigger('moved.zf.slider', [$hndl]);
+ });
- /**
- * Closes the modal.
- * @function
- * @fires Reveal#closed
- */
- Reveal.prototype.close = function(){
- if(!this.isActive || !this.$element.is(':visible')){
- return false;
- }
- var _this = this;
+ //because we don't know exactly how the handle will be moved, check the amount of time it should take to move.
+ var moveTime = this.$element.data('dragging') ? 1000 / 60 : this.options.moveTime;
- if(this.options.animationOut){
- Foundation.Motion.animateOut(this.$element, this.options.animationOut, function(){
- if(_this.options.overlay){
- Foundation.Motion.animateOut(_this.$overlay, 'fade-out', function(){
- });
+ __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__foundation_util_motion__["b" /* Move */])(moveTime, $hndl, function () {
+ // adjusting the left/top property of the handle, based on the percentage calculated above
+ // if movement isNaN, that is because the slider is hidden and we cannot determine handle width,
+ // fall back to next best guess.
+ if (isNaN(movement)) {
+ $hndl.css(lOrT, pctOfBar * 100 + '%');
+ } else {
+ $hndl.css(lOrT, movement + '%');
}
- });
- }else{
- this.$element.hide(_this.options.hideDelay, function(){
- if(_this.options.overlay){
- _this.$overlay.hide(0, function(){
- });
+
+ if (!_this.options.doubleSided) {
+ //if single-handled, a simple method to expand the fill bar
+ _this.$fill.css(hOrW, pctOfBar * 100 + '%');
+ } else {
+ //otherwise, use the css object we created above
+ _this.$fill.css(css);
}
});
- }
- //conditionals to remove extra event listeners added on open
- if(this.options.closeOnEsc){
- $(window).off('keydown.zf.reveal');
- }
- if(!this.options.overlay && this.options.closeOnClick){
- $('body').off('click.zf.reveal');
- }
- this.$element.off('keydown.zf.reveal');
- //if the modal changed size, reset it
- if(this.changedSize){
- this.$element.css({
- 'height': '',
- 'width': ''
- });
+ /**
+ * Fires when the value has not been change for a given time.
+ * @event Slider#changed
+ */
+ clearTimeout(_this.timeout);
+ _this.timeout = setTimeout(function () {
+ _this.$element.trigger('changed.zf.slider', [$hndl]);
+ }, _this.options.changedDelay);
}
- $('body').removeClass('is-reveal-open').attr({'aria-hidden': false, 'tabindex': ''});
-
/**
- * Resets the modal content
- * This prevents a running video to keep going in the background
- */
- if(this.options.resetOnClose) {
- this.$element.html(this.$element.html());
+ * Sets the initial attribute for the slider element.
+ * @function
+ * @private
+ * @param {Number} idx - index of the current handle/input to use.
+ */
+
+ }, {
+ key: '_setInitAttr',
+ value: function _setInitAttr(idx) {
+ var initVal = idx === 0 ? this.options.initialStart : this.options.initialEnd;
+ var id = this.inputs.eq(idx).attr('id') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["b" /* GetYoDigits */])(6, 'slider');
+ this.inputs.eq(idx).attr({
+ 'id': id,
+ 'max': this.options.end,
+ 'min': this.options.start,
+ 'step': this.options.step
+ });
+ this.inputs.eq(idx).val(initVal);
+ this.handles.eq(idx).attr({
+ 'role': 'slider',
+ 'aria-controls': id,
+ 'aria-valuemax': this.options.end,
+ 'aria-valuemin': this.options.start,
+ 'aria-valuenow': initVal,
+ 'aria-orientation': this.options.vertical ? 'vertical' : 'horizontal',
+ 'tabindex': 0
+ });
}
- this.isActive = false;
- this.$element.attr({'aria-hidden': true})
/**
- * Fires when the modal is done closing.
- * @event Reveal#closed
+ * Sets the input and `aria-valuenow` values for the slider element.
+ * @function
+ * @private
+ * @param {jQuery} $handle - the currently selected handle.
+ * @param {Number} val - floating point of the new value.
*/
- .trigger('closed.zf.reveal');
- };
- /**
- * Toggles the open/closed state of a modal.
- * @function
- */
- Reveal.prototype.toggle = function(){
- if(this.isActive){
- this.close();
- }else{
- this.open();
- }
- };
- /**
- * Destroys an instance of a modal.
- * @function
- */
- Reveal.prototype.destroy = function() {
- if(this.options.overlay){
- this.$overlay.hide().off().remove();
+ }, {
+ key: '_setValues',
+ value: function _setValues($handle, val) {
+ var idx = this.options.doubleSided ? this.handles.index($handle) : 0;
+ this.inputs.eq(idx).val(val);
+ $handle.attr('aria-valuenow', val);
}
- this.$element.hide();
- this.$anchor.off();
-
- Foundation.unregisterPlugin(this);
- };
- Foundation.plugin(Reveal, 'Reveal');
+ /**
+ * Handles events on the slider element.
+ * Calculates the new location of the current handle.
+ * If there are two handles and the bar was clicked, it determines which handle to move.
+ * @function
+ * @private
+ * @param {Object} e - the `event` object passed from the listener.
+ * @param {jQuery} $handle - the current handle to calculate for, if selected.
+ * @param {Number} val - floating point number for the new value of the slider.
+ * TODO clean this up, there's a lot of repeated code between this and the _setHandlePos fn.
+ */
+
+ }, {
+ key: '_handleEvent',
+ value: function _handleEvent(e, $handle, val) {
+ var value, hasVal;
+ if (!val) {
+ //click or drag events
+ e.preventDefault();
+ var _this = this,
+ vertical = this.options.vertical,
+ param = vertical ? 'height' : 'width',
+ direction = vertical ? 'top' : 'left',
+ eventOffset = vertical ? e.pageY : e.pageX,
+ halfOfHandle = this.$handle[0].getBoundingClientRect()[param] / 2,
+ barDim = this.$element[0].getBoundingClientRect()[param],
+ windowScroll = vertical ? __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).scrollTop() : __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).scrollLeft();
+
+ var elemOffset = this.$element.offset()[direction];
+
+ // touch events emulated by the touch util give position relative to screen, add window.scroll to event coordinates...
+ // best way to guess this is simulated is if clientY == pageY
+ if (e.clientY === e.pageY) {
+ eventOffset = eventOffset + windowScroll;
+ }
+ var eventFromBar = eventOffset - elemOffset;
+ var barXY;
+ if (eventFromBar < 0) {
+ barXY = 0;
+ } else if (eventFromBar > barDim) {
+ barXY = barDim;
+ } else {
+ barXY = eventFromBar;
+ }
+ var offsetPct = percent(barXY, barDim);
- // Exports for AMD/Browserify
- if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
- module.exports = Reveal;
- if (typeof define === 'function')
- define(['foundation'], function() {
- return Reveal;
- });
+ value = this._value(offsetPct);
- }(Foundation, jQuery);
+ // turn everything around for RTL, yay math!
+ if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__foundation_util_core__["a" /* rtl */])() && !this.options.vertical) {
+ value = this.options.end - value;
+ }
- /**
- * Slider module.
- * @module foundation.slider
- * @requires foundation.util.motion
- * @requires foundation.util.triggers
- * @requires foundation.util.keyboard
- * @requires foundation.util.touch
- */
- !function($, Foundation){
- 'use strict';
+ value = _this._adjustValue(null, value);
+ //boolean flag for the setHandlePos fn, specifically for vertical sliders
+ hasVal = false;
- /**
- * Creates a new instance of a drilldown menu.
- * @class
- * @param {jQuery} element - jQuery object to make into an accordion menu.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function Slider(element, options){
- this.$element = element;
- this.options = $.extend({}, Slider.defaults, this.$element.data(), options);
+ if (!$handle) {
+ //figure out which handle it is, pass it to the next function.
+ var firstHndlPos = absPosition(this.$handle, direction, barXY, param),
+ secndHndlPos = absPosition(this.$handle2, direction, barXY, param);
+ $handle = firstHndlPos <= secndHndlPos ? this.$handle : this.$handle2;
+ }
+ } else {
+ //change event on input
+ value = this._adjustValue(null, val);
+ hasVal = true;
+ }
- this._init();
+ this._setHandlePos($handle, value, hasVal);
+ }
- Foundation.registerPlugin(this);
- Foundation.Keyboard.register('Slider', {
- 'ltr': {
- 'ARROW_RIGHT': 'increase',
- 'ARROW_UP': 'increase',
- 'ARROW_DOWN': 'decrease',
- 'ARROW_LEFT': 'decrease',
- 'SHIFT_ARROW_RIGHT': 'increase_fast',
- 'SHIFT_ARROW_UP': 'increase_fast',
- 'SHIFT_ARROW_DOWN': 'decrease_fast',
- 'SHIFT_ARROW_LEFT': 'decrease_fast'
- },
- 'rtl': {
- 'ARROW_LEFT': 'increase',
- 'ARROW_RIGHT': 'decrease',
- 'SHIFT_ARROW_LEFT': 'increase_fast',
- 'SHIFT_ARROW_RIGHT': 'decrease_fast'
+ /**
+ * Adjustes value for handle in regard to step value. returns adjusted value
+ * @function
+ * @private
+ * @param {jQuery} $handle - the selected handle.
+ * @param {Number} value - value to adjust. used if $handle is falsy
+ */
+
+ }, {
+ key: '_adjustValue',
+ value: function _adjustValue($handle, value) {
+ var val,
+ step = this.options.step,
+ div = parseFloat(step / 2),
+ left,
+ prev_val,
+ next_val;
+ if (!!$handle) {
+ val = parseFloat($handle.attr('aria-valuenow'));
+ } else {
+ val = value;
}
- });
- }
+ left = val % step;
+ prev_val = val - left;
+ next_val = prev_val + step;
+ if (left === 0) {
+ return val;
+ }
+ val = val >= prev_val + div ? next_val : prev_val;
+ return val;
+ }
- Slider.defaults = {
- /**
- * Minimum value for the slider scale.
- * @option
- * @example 0
- */
- start: 0,
/**
- * Maximum value for the slider scale.
- * @option
- * @example 100
+ * Adds event listeners to the slider elements.
+ * @function
+ * @private
*/
- end: 100,
- /**
- * Minimum value change per change event. Not Currently Implemented!
- */
- step: 1,
- /**
- * Value at which the handle/input *(left handle/first input)* should be set to on initialization.
- * @option
- * @example 0
- */
- initialStart: 0,
- /**
- * Value at which the right handle/second input should be set to on initialization.
- * @option
- * @example 100
- */
- initialEnd: 100,
- /**
- * Allows the input to be located outside the container and visible. Set to by the JS
- * @option
- * @example false
- */
- binding: false,
- /**
- * Allows the user to click/tap on the slider bar to select a value.
- * @option
- * @example true
- */
- clickSelect: true,
- /**
- * Set to true and use the `vertical` class to change alignment to vertical.
- * @option
- * @example false
- */
- vertical: false,
- /**
- * Allows the user to drag the slider handle(s) to select a value.
- * @option
- * @example true
- */
- draggable: true,
- /**
- * Disables the slider and prevents event listeners from being applied. Double checked by JS with `disabledClass`.
- * @option
- * @example false
- */
- disabled: false,
- /**
- * Allows the use of two handles. Double checked by the JS. Changes some logic handling.
- * @option
- * @example false
- */
- doubleSided: false,
- /**
- * Potential future feature.
- */
- // steps: 100,
- /**
- * Number of decimal places the plugin should go to for floating point precision.
- * @option
- * @example 2
- */
- decimal: 2,
- /**
- * Time delay for dragged elements.
- */
- // dragDelay: 0,
- /**
- * Time, in ms, to animate the movement of a slider handle if user clicks/taps on the bar. Needs to be manually set if updating the transition time in the Sass settings.
- * @option
- * @example 200
- */
- moveTime: 200,//update this if changing the transition time in the sass
+ }, {
+ key: '_events',
+ value: function _events() {
+ this._eventsForHandle(this.$handle);
+ if (this.handles[1]) {
+ this._eventsForHandle(this.$handle2);
+ }
+ }
+
/**
- * Class applied to disabled sliders.
- * @option
- * @example 'disabled'
+ * Adds event listeners a particular handle
+ * @function
+ * @private
+ * @param {jQuery} $handle - the current handle to apply listeners to.
*/
- disabledClass: 'disabled'
- };
- /**
- * Initilizes the plugin by reading/setting attributes, creating collections and setting the initial position of the handle(s).
- * @function
- * @private
- */
- Slider.prototype._init = function(){
- this.inputs = this.$element.find('input');
- this.handles = this.$element.find('[data-slider-handle]');
- this.$handle = this.handles.eq(0);
- this.$input = this.inputs.length ? this.inputs.eq(0) : $('#' + this.$handle.attr('aria-controls'));
- this.$fill = this.$element.find('[data-slider-fill]').css(this.options.vertical ? 'height' : 'width', 0);
+ }, {
+ key: '_eventsForHandle',
+ value: function _eventsForHandle($handle) {
+ var _this = this,
+ curHandle,
+ timer;
- var isDbl = false,
- _this = this;
- if(this.options.disabled || this.$element.hasClass(this.options.disabledClass)){
- this.options.disabled = true;
- this.$element.addClass(this.options.disabledClass);
- }
- if(!this.inputs.length){
- this.inputs = $().add(this.$input);
- this.options.binding = true;
- }
- this._setInitAttr(0);
- this._events(this.$handle);
+ this.inputs.off('change.zf.slider').on('change.zf.slider', function (e) {
+ var idx = _this.inputs.index(__WEBPACK_IMPORTED_MODULE_0_jquery___default()(this));
+ _this._handleEvent(e, _this.handles.eq(idx), __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this).val());
+ });
+
+ if (this.options.clickSelect) {
+ this.$element.off('click.zf.slider').on('click.zf.slider', function (e) {
+ if (_this.$element.data('dragging')) {
+ return false;
+ }
+
+ if (!__WEBPACK_IMPORTED_MODULE_0_jquery___default()(e.target).is('[data-slider-handle]')) {
+ if (_this.options.doubleSided) {
+ _this._handleEvent(e);
+ } else {
+ _this._handleEvent(e, _this.$handle);
+ }
+ }
+ });
+ }
+
+ if (this.options.draggable) {
+ this.handles.addTouch();
- if(this.handles[1]){
- this.options.doubleSided = true;
- this.$handle2 = this.handles.eq(1);
- this.$input2 = this.inputs.length ? this.inputs.eq(1) : $('#' + this.$handle2.attr('aria-controls'));
+ var $body = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('body');
+ $handle.off('mousedown.zf.slider').on('mousedown.zf.slider', function (e) {
+ $handle.addClass('is-dragging');
+ _this.$fill.addClass('is-dragging'); //
+ _this.$element.data('dragging', true);
+
+ curHandle = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(e.currentTarget);
+
+ $body.on('mousemove.zf.slider', function (e) {
+ e.preventDefault();
+ _this._handleEvent(e, curHandle);
+ }).on('mouseup.zf.slider', function (e) {
+ _this._handleEvent(e, curHandle);
+
+ $handle.removeClass('is-dragging');
+ _this.$fill.removeClass('is-dragging');
+ _this.$element.data('dragging', false);
- if(!this.inputs[1]){
- this.inputs = this.inputs.add(this.$input2);
+ $body.off('mousemove.zf.slider mouseup.zf.slider');
+ });
+ })
+ // prevent events triggered by touch
+ .on('selectstart.zf.slider touchmove.zf.slider', function (e) {
+ e.preventDefault();
+ });
}
- isDbl = true;
- this._setHandlePos(this.$handle, this.options.initialStart, true, function(){
+ $handle.off('keydown.zf.slider').on('keydown.zf.slider', function (e) {
+ var _$handle = __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this),
+ idx = _this.options.doubleSided ? _this.handles.index(_$handle) : 0,
+ oldValue = parseFloat(_this.inputs.eq(idx).val()),
+ newValue;
+
+ // handle keyboard event with keyboard util
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_keyboard__["a" /* Keyboard */].handleKey(e, 'Slider', {
+ decrease: function () {
+ newValue = oldValue - _this.options.step;
+ },
+ increase: function () {
+ newValue = oldValue + _this.options.step;
+ },
+ decrease_fast: function () {
+ newValue = oldValue - _this.options.step * 10;
+ },
+ increase_fast: function () {
+ newValue = oldValue + _this.options.step * 10;
+ },
+ min: function () {
+ newValue = _this.options.start;
+ },
+ max: function () {
+ newValue = _this.options.end;
+ },
+ handled: function () {
+ // only set handle pos when event was handled specially
+ e.preventDefault();
+ _this._setHandlePos(_$handle, newValue, true);
+ }
+ });
+ /*if (newValue) { // if pressed key has special function, update value
+ e.preventDefault();
+ _this._setHandlePos(_$handle, newValue);
+ }*/
+ });
+ }
+
+ /**
+ * Destroys the slider plugin.
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.handles.off('.zf.slider');
+ this.inputs.off('.zf.slider');
+ this.$element.off('.zf.slider');
- _this._setHandlePos(_this.$handle2, _this.options.initialEnd);
- });
- // this.$handle.triggerHandler('click.zf.slider');
- this._setInitAttr(1);
- this._events(this.$handle2);
+ clearTimeout(this.timeout);
}
+ }]);
- if(!isDbl){
- this._setHandlePos(this.$handle, this.options.initialStart, true);
- }
- };
+ return Slider;
+ }(__WEBPACK_IMPORTED_MODULE_4__foundation_plugin__["a" /* Plugin */]);
+
+ Slider.defaults = {
/**
- * Sets the position of the selected handle and fill bar.
- * @function
- * @private
- * @param {jQuery} $hndl - the selected handle to move.
- * @param {Number} location - floating point between the start and end values of the slider bar.
- * @param {Function} cb - callback function to fire on completion.
- * @fires Slider#moved
- */
- Slider.prototype._setHandlePos = function($hndl, location, noInvert, cb){
- //might need to alter that slightly for bars that will have odd number selections.
- location = parseFloat(location);//on input change events, convert string to number...grumble.
- // prevent slider from running out of bounds
- if(location < this.options.start){ location = this.options.start; }
- else if(location > this.options.end){ location = this.options.end; }
-
- var isDbl = this.options.doubleSided,
- callback = cb || null;
-
- if(isDbl){
- if(this.handles.index($hndl) === 0){
- var h2Val = parseFloat(this.$handle2.attr('aria-valuenow'));
- location = location >= h2Val ? h2Val - this.options.step : location;
- }else{
- var h1Val = parseFloat(this.$handle.attr('aria-valuenow'));
- location = location <= h1Val ? h1Val + this.options.step : location;
- }
- }
-
- if(this.options.vertical && !noInvert){
- location = this.options.end - location;
- }
- var _this = this,
- vert = this.options.vertical,
- hOrW = vert ? 'height' : 'width',
- lOrT = vert ? 'top' : 'left',
- halfOfHandle = $hndl[0].getBoundingClientRect()[hOrW] / 2,
- elemDim = this.$element[0].getBoundingClientRect()[hOrW],
- pctOfBar = percent(location, this.options.end).toFixed(this.options.decimal),
- pxToMove = (elemDim - halfOfHandle) * pctOfBar,
- movement = (percent(pxToMove, elemDim) * 100).toFixed(this.options.decimal),
- location = location > 0 ? parseFloat(location.toFixed(this.options.decimal)) : 0,
- anim, prog, start = null, css = {};
-
- this._setValues($hndl, location);
-
- if(this.options.doubleSided){//update to calculate based on values set to respective inputs??
- var isLeftHndl = this.handles.index($hndl) === 0,
- dim,
- idx = this.handles.index($hndl);
-
- if(isLeftHndl){
- css[lOrT] = (pctOfBar > 0 ? pctOfBar * 100 : 0) + '%';//
- dim = /*Math.abs*/((percent(this.$handle2.position()[lOrT] + halfOfHandle, elemDim) - parseFloat(pctOfBar)) * 100).toFixed(this.options.decimal) + '%';
- css['min-' + hOrW] = dim;
- if(cb && typeof cb === 'function'){ cb(); }
- }else{
- location = (location < 100 ? location : 100) - (parseFloat(this.$handle[0].style.left) || this.options.end - location);
- css['min-' + hOrW] = location + '%';
- }
- }
-
- this.$element.one('finished.zf.animate', function(){
- _this.animComplete = true;
- /**
- * Fires when the handle is done moving.
- * @event Slider#moved
- */
- _this.$element.trigger('moved.zf.slider', [$hndl]);
- });
- var moveTime = _this.$element.data('dragging') ? 1000/60 : _this.options.moveTime;
- /*var move = new */Foundation.Move(moveTime, $hndl, function(){
- $hndl.css(lOrT, movement + '%');
- if(!_this.options.doubleSided){
- _this.$fill.css(hOrW, pctOfBar * 100 + '%');
- }else{
- _this.$fill.css(css);
- }
- });
- // move.do();
- };
+ * Minimum value for the slider scale.
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ start: 0,
/**
- * Sets the initial attribute for the slider element.
- * @function
- * @private
- * @param {Number} idx - index of the current handle/input to use.
+ * Maximum value for the slider scale.
+ * @option
+ * @type {number}
+ * @default 100
*/
- Slider.prototype._setInitAttr = function(idx){
- var id = this.inputs.eq(idx).attr('id') || Foundation.GetYoDigits(6, 'slider');
- this.inputs.eq(idx).attr({
- 'id': id,
- 'max': this.options.end,
- 'min': this.options.start
-
- });
- this.handles.eq(idx).attr({
- 'role': 'slider',
- 'aria-controls': id,
- 'aria-valuemax': this.options.end,
- 'aria-valuemin': this.options.start,
- 'aria-valuenow': idx === 0 ? this.options.initialStart : this.options.initialEnd,
- 'aria-orientation': this.options.vertical ? 'vertical' : 'horizontal',
- 'tabindex': 0
- });
- };
+ end: 100,
/**
- * Sets the input and `aria-valuenow` values for the slider element.
- * @function
- * @private
- * @param {jQuery} $handle - the currently selected handle.
- * @param {Number} val - floating point of the new value.
+ * Minimum value change per change event.
+ * @option
+ * @type {number}
+ * @default 1
*/
- Slider.prototype._setValues = function($handle, val){
- var idx = this.options.doubleSided ? this.handles.index($handle) : 0;
- this.inputs.eq(idx).val(val);
- $handle.attr('aria-valuenow', val);
- };
+ step: 1,
/**
- * Handles events on the slider element.
- * Calculates the new location of the current handle.
- * If there are two handles and the bar was clicked, it determines which handle to move.
- * @function
- * @private
- * @param {Object} e - the `event` object passed from the listener.
- * @param {jQuery} $handle - the current handle to calculate for, if selected.
- * @param {Number} val - floating point number for the new value of the slider.
+ * Value at which the handle/input *(left handle/first input)* should be set to on initialization.
+ * @option
+ * @type {number}
+ * @default 0
*/
- Slider.prototype._handleEvent = function(e, $handle, val){
- var value, hasVal;
- if(!val){//click or drag events
- e.preventDefault();
- var _this = this,
- vertical = this.options.vertical,
- param = vertical ? 'height' : 'width',
- direction = vertical ? 'top' : 'left',
- pageXY = vertical ? e.pageY : e.pageX,
- halfOfHandle = this.$handle[0].getBoundingClientRect()[param] / 2,
- barDim = this.$element[0].getBoundingClientRect()[param],
- barOffset = (this.$element.offset()[direction] - pageXY),
- barXY = barOffset > 0 ? -halfOfHandle : (barOffset - halfOfHandle) < -barDim ? barDim : Math.abs(barOffset),//if the cursor position is less than or greater than the elements bounding coordinates, set coordinates within those bounds
- // eleDim = this.$element[0].getBoundingClientRect()[param],
- offsetPct = percent(barXY, barDim);
- value = (this.options.end - this.options.start) * offsetPct;
- hasVal = false;
-
- if(!$handle){//figure out which handle it is, pass it to the next function.
- var firstHndlPos = absPosition(this.$handle, direction, barXY, param),
- secndHndlPos = absPosition(this.$handle2, direction, barXY, param);
- $handle = firstHndlPos <= secndHndlPos ? this.$handle : this.$handle2;
- }
-
- }else{//change event on input
- value = val;
- hasVal = true;
- }
-
- this._setHandlePos($handle, value, hasVal);
- };
+ initialStart: 0,
/**
- * Adds event listeners to the slider elements.
- * @function
- * @private
- * @param {jQuery} $handle - the current handle to apply listeners to.
+ * Value at which the right handle/second input should be set to on initialization.
+ * @option
+ * @type {number}
+ * @default 100
+ */
+ initialEnd: 100,
+ /**
+ * Allows the input to be located outside the container and visible. Set to by the JS
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ binding: false,
+ /**
+ * Allows the user to click/tap on the slider bar to select a value.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ clickSelect: true,
+ /**
+ * Set to true and use the `vertical` class to change alignment to vertical.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ vertical: false,
+ /**
+ * Allows the user to drag the slider handle(s) to select a value.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ draggable: true,
+ /**
+ * Disables the slider and prevents event listeners from being applied. Double checked by JS with `disabledClass`.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ disabled: false,
+ /**
+ * Allows the use of two handles. Double checked by the JS. Changes some logic handling.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ doubleSided: false,
+ /**
+ * Potential future feature.
+ */
+ // steps: 100,
+ /**
+ * Number of decimal places the plugin should go to for floating point precision.
+ * @option
+ * @type {number}
+ * @default 2
+ */
+ decimal: 2,
+ /**
+ * Time delay for dragged elements.
+ */
+ // dragDelay: 0,
+ /**
+ * Time, in ms, to animate the movement of a slider handle if user clicks/taps on the bar. Needs to be manually set if updating the transition time in the Sass settings.
+ * @option
+ * @type {number}
+ * @default 200
+ */
+ moveTime: 200, //update this if changing the transition time in the sass
+ /**
+ * Class applied to disabled sliders.
+ * @option
+ * @type {string}
+ * @default 'disabled'
*/
- Slider.prototype._events = function($handle){
- if(this.options.disabled){ return false; }
+ disabledClass: 'disabled',
+ /**
+ * Will invert the default layout for a vertical<span data-tooltip title="who would do this???"> </span>slider.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ invertVertical: false,
+ /**
+ * Milliseconds before the `changed.zf-slider` event is triggered after value change.
+ * @option
+ * @type {number}
+ * @default 500
+ */
+ changedDelay: 500,
+ /**
+ * Basevalue for non-linear sliders
+ * @option
+ * @type {number}
+ * @default 5
+ */
+ nonLinearBase: 5,
+ /**
+ * Basevalue for non-linear sliders, possible values are: `'linear'`, `'pow'` & `'log'`. Pow and Log use the nonLinearBase setting.
+ * @option
+ * @type {string}
+ * @default 'linear'
+ */
+ positionValueFunction: 'linear'
+ };
- var _this = this,
- curHandle,
- timer;
+ function percent(frac, num) {
+ return frac / num;
+ }
+ function absPosition($handle, dir, clickPos, param) {
+ return Math.abs($handle.position()[dir] + $handle[param]() / 2 - clickPos);
+ }
+ function baseLog(base, value) {
+ return Math.log(value) / Math.log(base);
+ }
- this.inputs.off('change.zf.slider').on('change.zf.slider', function(e){
- var idx = _this.inputs.index($(this));
- _this._handleEvent(e, _this.handles.eq(idx), $(this).val());
- });
- if(this.options.clickSelect){
- this.$element.off('click.zf.slider').on('click.zf.slider', function(e){
- if(_this.$element.data('dragging')){ return false; }
- _this.animComplete = false;
- if(_this.options.doubleSided){
- _this._handleEvent(e);
- }else{
- _this._handleEvent(e, _this.$handle);
- }
- });
- }
- if(this.options.draggable){
- this.handles.addTouch();
- // var curHandle,
- // timer,
- var $body = $('body');
- $handle
- .off('mousedown.zf.slider')
- .on('mousedown.zf.slider', function(e){
- $handle.addClass('is-dragging');
- _this.$fill.addClass('is-dragging');//
- _this.$element.data('dragging', true);
- _this.animComplete = false;
- curHandle = $(e.currentTarget);
+ /***/ }),
+ /* 33 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- $body.on('mousemove.zf.slider', function(e){
- e.preventDefault();
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Sticky; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__ = __webpack_require__(4);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_plugin__ = __webpack_require__(2);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_util_triggers__ = __webpack_require__(5);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
- // timer = setTimeout(function(){
- _this._handleEvent(e, curHandle);
- // }, _this.options.dragDelay);
- }).on('mouseup.zf.slider', function(e){
- // clearTimeout(timer);
- _this.animComplete = true;
- _this._handleEvent(e, curHandle);
- $handle.removeClass('is-dragging');
- _this.$fill.removeClass('is-dragging');
- _this.$element.data('dragging', false);
- // Foundation.reflow(_this.$element, 'slider');
- $body.off('mousemove.zf.slider mouseup.zf.slider');
- });
- });
- }
- $handle.off('keydown.zf.slider').on('keydown.zf.slider', function(e){
- var idx = _this.options.doubleSided ? _this.handles.index($(this)) : 0,
- oldValue = parseFloat(_this.inputs.eq(idx).val()),
- newValue;
- var _$handle = $(this);
- // handle keyboard event with keyboard util
- Foundation.Keyboard.handleKey(e, _this, {
- decrease: function() {
- newValue = oldValue - _this.options.step;
- },
- increase: function() {
- newValue = oldValue + _this.options.step;
- },
- decrease_fast: function() {
- newValue = oldValue - _this.options.step * 10;
- },
- increase_fast: function() {
- newValue = oldValue + _this.options.step * 10;
- },
- handled: function() { // only set handle pos when event was handled specially
- e.preventDefault();
- _this._setHandlePos(_$handle, newValue, true);
- }
- });
- /*if (newValue) { // if pressed key has special function, update value
- e.preventDefault();
- _this._setHandlePos(_$handle, newValue);
- }*/
- });
- };
- /**
- * Destroys the slider plugin.
- */
- Slider.prototype.destroy = function(){
- this.handles.off('.zf.slider');
- this.inputs.off('.zf.slider');
- this.$element.off('.zf.slider');
- Foundation.unregisterPlugin(this);
- };
- Foundation.plugin(Slider, 'Slider');
- function percent(frac, num){
- return (frac / num);
- }
- function absPosition($handle, dir, clickPos, param){
- return Math.abs(($handle.position()[dir] + ($handle[param]() / 2)) - clickPos);
- }
- }(jQuery, window.Foundation);
-
- //*********this is in case we go to static, absolute positions instead of dynamic positioning********
- // this.setSteps(function(){
- // _this._events();
- // var initStart = _this.options.positions[_this.options.initialStart - 1] || null;
- // var initEnd = _this.options.initialEnd ? _this.options.position[_this.options.initialEnd - 1] : null;
- // if(initStart || initEnd){
- // _this._handleEvent(initStart, initEnd);
- // }
- // });
-
- //***********the other part of absolute positions*************
- // Slider.prototype.setSteps = function(cb){
- // var posChange = this.$element.outerWidth() / this.options.steps;
- // var counter = 0
- // while(counter < this.options.steps){
- // if(counter){
- // this.options.positions.push(this.options.positions[counter - 1] + posChange);
- // }else{
- // this.options.positions.push(posChange);
- // }
- // counter++;
- // }
- // cb();
- // };
/**
* Sticky module.
@@ @@ -6127,1346 +10522,1267 @@ Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
* @requires foundation.util.triggers
* @requires foundation.util.mediaQuery
*/
- !function($, Foundation){
- 'use strict';
- /**
- * Creates a new instance of a sticky thing.
- * @class
- * @param {jQuery} element - jQuery object to make sticky.
- * @param {Object} options - options object passed when creating the element programmatically.
- */
- function Sticky(element, options){
- this.$element = element;
- this.options = $.extend({}, Sticky.defaults, this.$element.data(), options);
+ var Sticky = function (_Plugin) {
+ _inherits(Sticky, _Plugin);
- this._init();
+ function Sticky() {
+ _classCallCheck(this, Sticky);
- Foundation.registerPlugin(this);
+ return _possibleConstructorReturn(this, (Sticky.__proto__ || Object.getPrototypeOf(Sticky)).apply(this, arguments));
}
- Sticky.defaults = {
- /**
- * Customizable container template. Add your own classes for styling and sizing.
- * @option
- * @example '<div data-sticky-container class="small-6 columns"></div>'
- */
- container: '<div data-sticky-container></div>',
- /**
- * Location in the view the element sticks to.
- * @option
- * @example 'top'
- */
- stickTo: 'top',
+
+ _createClass(Sticky, [{
+ key: '_setup',
+
/**
- * If anchored to a single element, the id of that element.
- * @option
- * @example 'exampleId'
+ * Creates a new instance of a sticky thing.
+ * @class
+ * @name Sticky
+ * @param {jQuery} element - jQuery object to make sticky.
+ * @param {Object} options - options object passed when creating the element programmatically.
*/
- anchor: '',
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Sticky.defaults, this.$element.data(), options);
+ this.className = 'Sticky'; // ie9 back compat
+
+ // Triggers init is idempotent, just need to make sure it is initialized
+ __WEBPACK_IMPORTED_MODULE_4__foundation_util_triggers__["a" /* Triggers */].init(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a);
+
+ this._init();
+ }
+
/**
- * If using more than one element as anchor points, the id of the top anchor.
- * @option
- * @example 'exampleId:top'
+ * Initializes the sticky element by adding classes, getting/setting dimensions, breakpoints and attributes
+ * @function
+ * @private
*/
- topAnchor: '',
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__["a" /* MediaQuery */]._init();
+
+ var $parent = this.$element.parent('[data-sticky-container]'),
+ id = this.$element[0].id || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__foundation_util_core__["b" /* GetYoDigits */])(6, 'sticky'),
+ _this = this;
+
+ if ($parent.length) {
+ this.$container = $parent;
+ } else {
+ this.wasWrapped = true;
+ this.$element.wrap(this.options.container);
+ this.$container = this.$element.parent();
+ }
+ this.$container.addClass(this.options.containerClass);
+
+ this.$element.addClass(this.options.stickyClass).attr({ 'data-resize': id, 'data-mutate': id });
+ if (this.options.anchor !== '') {
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + _this.options.anchor).attr({ 'data-mutate': id });
+ }
+
+ this.scrollCount = this.options.checkEvery;
+ this.isStuck = false;
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).one('load.zf.sticky', function () {
+ //We calculate the container height to have correct values for anchor points offset calculation.
+ _this.containerHeight = _this.$element.css("display") == "none" ? 0 : _this.$element[0].getBoundingClientRect().height;
+ _this.$container.css('height', _this.containerHeight);
+ _this.elemHeight = _this.containerHeight;
+ if (_this.options.anchor !== '') {
+ _this.$anchor = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + _this.options.anchor);
+ } else {
+ _this._parsePoints();
+ }
+
+ _this._setSizes(function () {
+ var scroll = window.pageYOffset;
+ _this._calc(false, scroll);
+ //Unstick the element will ensure that proper classes are set.
+ if (!_this.isStuck) {
+ _this._removeSticky(scroll >= _this.topPoint ? false : true);
+ }
+ });
+ _this._events(id.split('-').reverse().join('-'));
+ });
+ }
+
/**
- * If using more than one element as anchor points, the id of the bottom anchor.
- * @option
- * @example 'exampleId:bottom'
+ * If using multiple elements as anchors, calculates the top and bottom pixel values the sticky thing should stick and unstick on.
+ * @function
+ * @private
*/
- btmAnchor: '',
+
+ }, {
+ key: '_parsePoints',
+ value: function _parsePoints() {
+ var top = this.options.topAnchor == "" ? 1 : this.options.topAnchor,
+ btm = this.options.btmAnchor == "" ? document.documentElement.scrollHeight : this.options.btmAnchor,
+ pts = [top, btm],
+ breaks = {};
+ for (var i = 0, len = pts.length; i < len && pts[i]; i++) {
+ var pt;
+ if (typeof pts[i] === 'number') {
+ pt = pts[i];
+ } else {
+ var place = pts[i].split(':'),
+ anchor = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('#' + place[0]);
+
+ pt = anchor.offset().top;
+ if (place[1] && place[1].toLowerCase() === 'bottom') {
+ pt += anchor[0].getBoundingClientRect().height;
+ }
+ }
+ breaks[i] = pt;
+ }
+
+ this.points = breaks;
+ return;
+ }
+
/**
- * Margin, in `em`'s to apply to the top of the element when it becomes sticky.
- * @option
- * @example 1
+ * Adds event handlers for the scrolling element.
+ * @private
+ * @param {String} id - pseudo-random id for unique scroll event listener.
*/
- marginTop: 1,
+
+ }, {
+ key: '_events',
+ value: function _events(id) {
+ var _this = this,
+ scrollListener = this.scrollListener = 'scroll.zf.' + id;
+ if (this.isOn) {
+ return;
+ }
+ if (this.canStick) {
+ this.isOn = true;
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off(scrollListener).on(scrollListener, function (e) {
+ if (_this.scrollCount === 0) {
+ _this.scrollCount = _this.options.checkEvery;
+ _this._setSizes(function () {
+ _this._calc(false, window.pageYOffset);
+ });
+ } else {
+ _this.scrollCount--;
+ _this._calc(false, window.pageYOffset);
+ }
+ });
+ }
+
+ this.$element.off('resizeme.zf.trigger').on('resizeme.zf.trigger', function (e, el) {
+ _this._eventsHandler(id);
+ });
+
+ this.$element.on('mutateme.zf.trigger', function (e, el) {
+ _this._eventsHandler(id);
+ });
+
+ if (this.$anchor) {
+ this.$anchor.on('mutateme.zf.trigger', function (e, el) {
+ _this._eventsHandler(id);
+ });
+ }
+ }
+
/**
- * Margin, in `em`'s to apply to the bottom of the element when it becomes sticky.
- * @option
- * @example 1
+ * Handler for events.
+ * @private
+ * @param {String} id - pseudo-random id for unique scroll event listener.
*/
- marginBottom: 1,
+
+ }, {
+ key: '_eventsHandler',
+ value: function _eventsHandler(id) {
+ var _this = this,
+ scrollListener = this.scrollListener = 'scroll.zf.' + id;
+
+ _this._setSizes(function () {
+ _this._calc(false);
+ if (_this.canStick) {
+ if (!_this.isOn) {
+ _this._events(id);
+ }
+ } else if (_this.isOn) {
+ _this._pauseListeners(scrollListener);
+ }
+ });
+ }
+
/**
- * Breakpoint string that is the minimum screen size an element should become sticky.
- * @option
- * @example 'medium'
+ * Removes event handlers for scroll and change events on anchor.
+ * @fires Sticky#pause
+ * @param {String} scrollListener - unique, namespaced scroll listener attached to `window`
*/
- stickyOn: 'medium',
+
+ }, {
+ key: '_pauseListeners',
+ value: function _pauseListeners(scrollListener) {
+ this.isOn = false;
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off(scrollListener);
+
+ /**
+ * Fires when the plugin is paused due to resize event shrinking the view.
+ * @event Sticky#pause
+ * @private
+ */
+ this.$element.trigger('pause.zf.sticky');
+ }
+
/**
- * Class applied to sticky element, and removed on destruction. Foundation defaults to `sticky`.
- * @option
- * @example 'sticky'
+ * Called on every `scroll` event and on `_init`
+ * fires functions based on booleans and cached values
+ * @param {Boolean} checkSizes - true if plugin should recalculate sizes and breakpoints.
+ * @param {Number} scroll - current scroll position passed from scroll event cb function. If not passed, defaults to `window.pageYOffset`.
*/
- stickyClass: 'sticky',
+
+ }, {
+ key: '_calc',
+ value: function _calc(checkSizes, scroll) {
+ if (checkSizes) {
+ this._setSizes();
+ }
+
+ if (!this.canStick) {
+ if (this.isStuck) {
+ this._removeSticky(true);
+ }
+ return false;
+ }
+
+ if (!scroll) {
+ scroll = window.pageYOffset;
+ }
+
+ if (scroll >= this.topPoint) {
+ if (scroll <= this.bottomPoint) {
+ if (!this.isStuck) {
+ this._setSticky();
+ }
+ } else {
+ if (this.isStuck) {
+ this._removeSticky(false);
+ }
+ }
+ } else {
+ if (this.isStuck) {
+ this._removeSticky(true);
+ }
+ }
+ }
+
/**
- * Class applied to sticky container. Foundation defaults to `sticky-container`.
- * @option
- * @example 'sticky-container'
+ * Causes the $element to become stuck.
+ * Adds `position: fixed;`, and helper classes.
+ * @fires Sticky#stuckto
+ * @function
+ * @private
*/
- containerClass: 'sticky-container',
+
+ }, {
+ key: '_setSticky',
+ value: function _setSticky() {
+ var _this = this,
+ stickTo = this.options.stickTo,
+ mrgn = stickTo === 'top' ? 'marginTop' : 'marginBottom',
+ notStuckTo = stickTo === 'top' ? 'bottom' : 'top',
+ css = {};
+
+ css[mrgn] = this.options[mrgn] + 'em';
+ css[stickTo] = 0;
+ css[notStuckTo] = 'auto';
+ this.isStuck = true;
+ this.$element.removeClass('is-anchored is-at-' + notStuckTo).addClass('is-stuck is-at-' + stickTo).css(css)
+ /**
+ * Fires when the $element has become `position: fixed;`
+ * Namespaced to `top` or `bottom`, e.g. `sticky.zf.stuckto:top`
+ * @event Sticky#stuckto
+ */
+ .trigger('sticky.zf.stuckto:' + stickTo);
+ this.$element.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
+ _this._setSizes();
+ });
+ }
+
/**
- * Number of scroll events between the plugin's recalculating sticky points. Setting it to `0` will cause it to recalc every scroll event, setting it to `-1` will prevent recalc on scroll.
- * @option
- * @example 50
+ * Causes the $element to become unstuck.
+ * Removes `position: fixed;`, and helper classes.
+ * Adds other helper classes.
+ * @param {Boolean} isTop - tells the function if the $element should anchor to the top or bottom of its $anchor element.
+ * @fires Sticky#unstuckfrom
+ * @private
*/
- checkEvery: -1
- };
- /**
- * Initializes the sticky element by adding classes, getting/setting dimensions, breakpoints and attributes
- * Also triggered by Foundation._reflow
- * @function
- * @private
- */
- Sticky.prototype._init = function(){
- var $parent = this.$element.parent('[data-sticky-container]'),
- id = this.$element[0].id || Foundation.GetYoDigits(6, 'sticky'),
- _this = this;
+ }, {
+ key: '_removeSticky',
+ value: function _removeSticky(isTop) {
+ var stickTo = this.options.stickTo,
+ stickToTop = stickTo === 'top',
+ css = {},
+ anchorPt = (this.points ? this.points[1] - this.points[0] : this.anchorHeight) - this.elemHeight,
+ mrgn = stickToTop ? 'marginTop' : 'marginBottom',
+ notStuckTo = stickToTop ? 'bottom' : 'top',
+ topOrBottom = isTop ? 'top' : 'bottom';
- if(!$parent.length){
- this.wasWrapped = true;
+ css[mrgn] = 0;
+
+ css['bottom'] = 'auto';
+ if (isTop) {
+ css['top'] = 0;
+ } else {
+ css['top'] = anchorPt;
+ }
+
+ this.isStuck = false;
+ this.$element.removeClass('is-stuck is-at-' + stickTo).addClass('is-anchored is-at-' + topOrBottom).css(css)
+ /**
+ * Fires when the $element has become anchored.
+ * Namespaced to `top` or `bottom`, e.g. `sticky.zf.unstuckfrom:bottom`
+ * @event Sticky#unstuckfrom
+ */
+ .trigger('sticky.zf.unstuckfrom:' + topOrBottom);
}
- this.$container = $parent.length ? $parent : $(this.options.container).wrapInner(this.$element);
- this.$container.addClass(this.options.containerClass);
+ /**
+ * Sets the $element and $container sizes for plugin.
+ * Calls `_setBreakPoints`.
+ * @param {Function} cb - optional callback function to fire on completion of `_setBreakPoints`.
+ * @private
+ */
- this.$element.addClass(this.options.stickyClass)
- .attr({'data-resize': id});
+ }, {
+ key: '_setSizes',
+ value: function _setSizes(cb) {
+ this.canStick = __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__["a" /* MediaQuery */].is(this.options.stickyOn);
+ if (!this.canStick) {
+ if (cb && typeof cb === 'function') {
+ cb();
+ }
+ }
+ var _this = this,
+ newElemWidth = this.$container[0].getBoundingClientRect().width,
+ comp = window.getComputedStyle(this.$container[0]),
+ pdngl = parseInt(comp['padding-left'], 10),
+ pdngr = parseInt(comp['padding-right'], 10);
+
+ if (this.$anchor && this.$anchor.length) {
+ this.anchorHeight = this.$anchor[0].getBoundingClientRect().height;
+ } else {
+ this._parsePoints();
+ }
- this.scrollCount = this.options.checkEvery;
- this.isStuck = false;
- // console.log(this.options.anchor, this.options.topAnchor);
- if(this.options.topAnchor !== ''){
- this._parsePoints();
- // console.log(this.points[0]);
- }else{
- this.$anchor = this.options.anchor ? $('#' + this.options.anchor) : $(document.body);
- }
+ this.$element.css({
+ 'max-width': newElemWidth - pdngl - pdngr + 'px'
+ });
+ var newContainerHeight = this.$element[0].getBoundingClientRect().height || this.containerHeight;
+ if (this.$element.css("display") == "none") {
+ newContainerHeight = 0;
+ }
+ this.containerHeight = newContainerHeight;
+ this.$container.css({
+ height: newContainerHeight
+ });
+ this.elemHeight = newContainerHeight;
- this._setSizes(function(){
- _this._calc(false);
- });
- this._events(id.split('-').reverse().join('-'));
- };
- /**
- * If using multiple elements as anchors, calculates the top and bottom pixel values the sticky thing should stick and unstick on.
- * @function
- * @private
- */
- Sticky.prototype._parsePoints = function(){
- var top = this.options.topAnchor,
- btm = this.options.btmAnchor,
- pts = [top, btm],
- breaks = {};
- for(var i = 0, len = pts.length; i < len && pts[i]; i++){
- var pt;
- if(typeof pts[i] === 'number'){
- pt = pts[i];
- }else{
- var place = pts[i].split(':'),
- anchor = $('#' + place[0]);
-
- pt = anchor.offset().top;
- if(place[1] && place[1].toLowerCase() === 'bottom'){
- pt += anchor[0].getBoundingClientRect().height;
+ if (!this.isStuck) {
+ if (this.$element.hasClass('is-at-bottom')) {
+ var anchorPt = (this.points ? this.points[1] - this.$container.offset().top : this.anchorHeight) - this.elemHeight;
+ this.$element.css('top', anchorPt);
}
}
- breaks[i] = pt;
- }
- // console.log(breaks);
- this.points = breaks;
- // console.log(this.points);
- return;
- };
- /**
- * Adds event handlers for the scrolling element.
- * @private
- * @param {String} id - psuedo-random id for unique scroll event listener.
- */
- Sticky.prototype._events = function(id){
- // console.log('called');
- var _this = this,
- scrollListener = 'scroll.zf.' + id;
- if(this.isOn){ return; }
- if(this.canStick){
- this.isOn = true;
- // this.$anchor.off('change.zf.sticky')
- // .on('change.zf.sticky', function(){
- // _this._setSizes(function(){
- // _this._calc(false);
- // });
- // });
-
- $(window).off(scrollListener)
- .on(scrollListener, function(e){
- if(_this.scrollCount === 0){
- _this.scrollCount = _this.options.checkEvery;
- _this._setSizes(function(){
- _this._calc(false, window.pageYOffset);
- });
- }else{
- _this.scrollCount--;
- _this._calc(false, window.pageYOffset);
- }
- });
+ this._setBreakPoints(newContainerHeight, function () {
+ if (cb && typeof cb === 'function') {
+ cb();
+ }
+ });
}
- this.$element.off('resizeme.zf.trigger')
- .on('resizeme.zf.trigger', function(e, el){
- _this._setSizes(function(){
- _this._calc(false);
- if(_this.canStick){
- if(!_this.isOn){
- _this._events(id);
- }
- }else if(_this.isOn){
- _this._pauseListeners(scrollListener);
- }
- });
- });
- };
-
- /**
- * Removes event handlers for scroll and change events on anchor.
- * @fires Sticky#pause
- * @param {String} scrollListener - unique, namespaced scroll listener attached to `window`
- */
- Sticky.prototype._pauseListeners = function(scrollListener){
- this.isOn = false;
- // this.$anchor.off('change.zf.sticky');
- $(window).off(scrollListener);
-
/**
- * Fires when the plugin is paused due to resize event shrinking the view.
- * @event Sticky#pause
+ * Sets the upper and lower breakpoints for the element to become sticky/unsticky.
+ * @param {Number} elemHeight - px value for sticky.$element height, calculated by `_setSizes`.
+ * @param {Function} cb - optional callback function to be called on completion.
* @private
*/
- this.$element.trigger('pause.zf.sticky');
- };
- /**
- * Called on every `scroll` event and on `_init`
- * fires functions based on booleans and cached values
- * @param {Boolean} checkSizes - true if plugin should recalculate sizes and breakpoints.
- * @param {Number} scroll - current scroll position passed from scroll event cb function. If not passed, defaults to `window.pageYOffset`.
- */
- Sticky.prototype._calc = function(checkSizes, scroll){
- if(checkSizes){ this._setSizes(); }
+ }, {
+ key: '_setBreakPoints',
+ value: function _setBreakPoints(elemHeight, cb) {
+ if (!this.canStick) {
+ if (cb && typeof cb === 'function') {
+ cb();
+ } else {
+ return false;
+ }
+ }
+ var mTop = emCalc(this.options.marginTop),
+ mBtm = emCalc(this.options.marginBottom),
+ topPoint = this.points ? this.points[0] : this.$anchor.offset().top,
+ bottomPoint = this.points ? this.points[1] : topPoint + this.anchorHeight,
+
+ // topPoint = this.$anchor.offset().top || this.points[0],
+ // bottomPoint = topPoint + this.anchorHeight || this.points[1],
+ winHeight = window.innerHeight;
+
+ if (this.options.stickTo === 'top') {
+ topPoint -= mTop;
+ bottomPoint -= elemHeight + mTop;
+ } else if (this.options.stickTo === 'bottom') {
+ topPoint -= winHeight - (elemHeight + mBtm);
+ bottomPoint -= winHeight - mBtm;
+ } else {
+ //this would be the stickTo: both option... tricky
+ }
+
+ this.topPoint = topPoint;
+ this.bottomPoint = bottomPoint;
- if(!this.canStick){
- if(this.isStuck){
- this._removeSticky(true);
+ if (cb && typeof cb === 'function') {
+ cb();
}
- return false;
}
- if(!scroll){ scroll = window.pageYOffset; }
+ /**
+ * Destroys the current sticky element.
+ * Resets the element to the top position first.
+ * Removes event listeners, JS-added css properties and classes, and unwraps the $element if the JS added the $container.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this._removeSticky(true);
- if(scroll >= this.topPoint){
- if(scroll <= this.bottomPoint){
- if(!this.isStuck){
- this._setSticky();
- }
- }else{
- if(this.isStuck){
- this._removeSticky(false);
- }
+ this.$element.removeClass(this.options.stickyClass + ' is-anchored is-at-top').css({
+ height: '',
+ top: '',
+ bottom: '',
+ 'max-width': ''
+ }).off('resizeme.zf.trigger').off('mutateme.zf.trigger');
+ if (this.$anchor && this.$anchor.length) {
+ this.$anchor.off('change.zf.sticky');
}
- }else{
- if(this.isStuck){
- this._removeSticky(true);
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(window).off(this.scrollListener);
+
+ if (this.wasWrapped) {
+ this.$element.unwrap();
+ } else {
+ this.$container.removeClass(this.options.containerClass).css({
+ height: ''
+ });
}
}
- };
+ }]);
+
+ return Sticky;
+ }(__WEBPACK_IMPORTED_MODULE_3__foundation_plugin__["a" /* Plugin */]);
+
+ Sticky.defaults = {
/**
- * Causes the $element to become stuck.
- * Adds `position: fixed;`, and helper classes.
- * @fires Sticky#stuckto
- * @function
- * @private
+ * Customizable container template. Add your own classes for styling and sizing.
+ * @option
+ * @type {string}
+ * @default '&lt;div data-sticky-container&gt;&lt;/div&gt;'
*/
- Sticky.prototype._setSticky = function(){
- var stickTo = this.options.stickTo,
- mrgn = stickTo === 'top' ? 'marginTop' : 'marginBottom',
- notStuckTo = stickTo === 'top' ? 'bottom' : 'top',
- css = {};
-
- css[mrgn] = this.options[mrgn] + 'em';
- css[stickTo] = 0;
- css[notStuckTo] = 'auto';
- css['left'] = this.$container.offset().left + parseInt(window.getComputedStyle(this.$container[0])["padding-left"], 10);
- this.isStuck = true;
- this.$element.removeClass('is-anchored is-at-' + notStuckTo)
- .addClass('is-stuck is-at-' + stickTo)
- .css(css)
- /**
- * Fires when the $element has become `position: fixed;`
- * Namespaced to `top` or `bottom`.
- * @event Sticky#stuckto
- */
- .trigger('sticky.zf.stuckto:' + stickTo);
- };
-
+ container: '<div data-sticky-container></div>',
/**
- * Causes the $element to become unstuck.
- * Removes `position: fixed;`, and helper classes.
- * Adds other helper classes.
- * @param {Boolean} isTop - tells the function if the $element should anchor to the top or bottom of its $anchor element.
- * @fires Sticky#unstuckfrom
- * @private
+ * Location in the view the element sticks to. Can be `'top'` or `'bottom'`.
+ * @option
+ * @type {string}
+ * @default 'top'
*/
- Sticky.prototype._removeSticky = function(isTop){
- var stickTo = this.options.stickTo,
- stickToTop = stickTo === 'top',
- css = {}, mrgn, notStuckTo,
- anchorPt = (this.points ? this.points[1] - this.points[0] : this.anchorHeight) - this.elemHeight;
- mrgn = stickToTop ? 'marginTop' : 'marginBottom';
- notStuckTo = stickToTop ? 'bottom' : 'top';
- css[mrgn] = 0;
- if((isTop && !stickToTop) || (stickToTop && !isTop)){
- css[stickTo] = anchorPt;
- css[notStuckTo] = 0;
- }else{
- css[stickTo] = 0;
- css[notStuckTo] = anchorPt;
- }
- css['left'] = '';
- this.isStuck = false;
- this.$element.removeClass('is-stuck is-at-' + stickTo)
- .addClass('is-anchored is-at-' + (isTop ? 'top' : 'bottom'))
- .css(css)
- /**
- * Fires when the $element has become anchored.
- * Namespaced to `top` or `bottom`.
- * @event Sticky#unstuckfrom
- */
- .trigger('sticky.zf.unstuckfrom:' + isTop ? 'top' : 'bottom');
- };
-
+ stickTo: 'top',
/**
- * Sets the $element and $container sizes for plugin.
- * Calls `_setBreakPoints`.
- * @param {Function} cb - optional callback function to fire on completion of `_setBreakPoints`.
- * @private
+ * If anchored to a single element, the id of that element.
+ * @option
+ * @type {string}
+ * @default ''
*/
- Sticky.prototype._setSizes = function(cb){
- this.canStick = Foundation.MediaQuery.atLeast(this.options.stickyOn);
- if(!this.canStick){ cb(); }
- var _this = this,
- newElemWidth = this.$container[0].getBoundingClientRect().width,
- comp = window.getComputedStyle(this.$container[0]),
- pdng = parseInt(comp['padding-right'], 10);
-
- // console.log(this.$anchor);
- if(this.$anchor && this.$anchor.length){
- this.anchorHeight = this.$anchor[0].getBoundingClientRect().height;
- }else{
- this._parsePoints();
- }
-
- this.$element.css({
- 'max-width': newElemWidth - pdng + 'px'
- });
-
- var newContainerHeight = this.$element[0].getBoundingClientRect().height || this.containerHeight;
- this.containerHeight = newContainerHeight;
- this.$container.css({
- height: newContainerHeight
- });
- this.elemHeight = newContainerHeight;
-
- if (this.isStuck) {
- this.$element.css({"left":this.$container.offset().left + parseInt(comp['padding-left'], 10)});
- }
-
- this._setBreakPoints(newContainerHeight, function(){
- if(cb){ cb(); }
- });
-
- };
+ anchor: '',
/**
- * Sets the upper and lower breakpoints for the element to become sticky/unsticky.
- * @param {Number} elemHeight - px value for sticky.$element height, calculated by `_setSizes`.
- * @param {Function} cb - optional callback function to be called on completion.
- * @private
+ * If using more than one element as anchor points, the id of the top anchor.
+ * @option
+ * @type {string}
+ * @default ''
*/
- Sticky.prototype._setBreakPoints = function(elemHeight, cb){
- if(!this.canStick){
- if(cb){ cb(); }
- else{ return false; }
- }
- var mTop = emCalc(this.options.marginTop),
- mBtm = emCalc(this.options.marginBottom),
- topPoint = this.points ? this.points[0] : this.$anchor.offset().top,
- bottomPoint = this.points ? this.points[1] : topPoint + this.anchorHeight,
- // topPoint = this.$anchor.offset().top || this.points[0],
- // bottomPoint = topPoint + this.anchorHeight || this.points[1],
- winHeight = window.innerHeight;
-
- if(this.options.stickTo === 'top'){
- topPoint -= mTop;
- bottomPoint -= (elemHeight + mTop);
- }else if(this.options.stickTo === 'bottom'){
- topPoint -= (winHeight - (elemHeight + mBtm));
- bottomPoint -= (winHeight - mBtm);
- }else{
- //this would be the stickTo: both option... tricky
- }
-
- this.topPoint = topPoint;
- this.bottomPoint = bottomPoint;
-
- if(cb){ cb(); }
- };
-
+ topAnchor: '',
/**
- * Destroys the current sticky element.
- * Resets the element to the top position first.
- * Removes event listeners, JS-added css properties and classes, and unwraps the $element if the JS added the $container.
- * @function
+ * If using more than one element as anchor points, the id of the bottom anchor.
+ * @option
+ * @type {string}
+ * @default ''
*/
- Sticky.prototype.destroy = function(){
- this._removeSticky(true);
-
- this.$element.removeClass(this.options.stickyClass + ' is-anchored is-at-top')
- .css({
- height: '',
- top: '',
- bottom: '',
- 'max-width': ''
- })
- .off('resizeme.zf.trigger');
-
- this.$anchor.off('change.zf.sticky');
- $(window).off('scroll.zf.sticky');
-
- if(this.wasWrapped){
- this.$element.unwrap();
- }else{
- this.$container.removeClass(this.options.containerClass)
- .css({
- height: ''
- });
- }
- Foundation.unregisterPlugin(this);
- };
+ btmAnchor: '',
/**
- * Helper function to calculate em values
- * @param Number {em} - number of em's to calculate into pixels
+ * Margin, in `em`'s to apply to the top of the element when it becomes sticky.
+ * @option
+ * @type {number}
+ * @default 1
*/
- function emCalc(em){
- return parseInt(window.getComputedStyle(document.body, null).fontSize, 10) * em;
- }
- Foundation.plugin(Sticky, 'Sticky');
- }(jQuery, window.Foundation);
-
- /**
- * Tabs module.
- * @module foundation.tabs
- * @requires foundation.util.keyboard
- * @requires foundation.util.timerAndImageLoader if tabs contain images
- */
- !function($, Foundation) {
- 'use strict';
-
+ marginTop: 1,
/**
- * Creates a new instance of tabs.
- * @class
- * @fires Tabs#init
- * @param {jQuery} element - jQuery object to make into tabs.
- * @param {Object} options - Overrides to the default plugin settings.
+ * Margin, in `em`'s to apply to the bottom of the element when it becomes sticky.
+ * @option
+ * @type {number}
+ * @default 1
*/
- function Tabs(element, options){
- this.$element = element;
- this.options = $.extend({}, Tabs.defaults, this.$element.data(), options);
-
- this._init();
- Foundation.registerPlugin(this);
- Foundation.Keyboard.register('Tabs', {
- 'ENTER': 'open',
- 'SPACE': 'open',
- 'ARROW_RIGHT': 'next',
- 'ARROW_UP': 'previous',
- 'ARROW_DOWN': 'next',
- 'ARROW_LEFT': 'previous',
- // 'TAB': 'next',
- // 'SHIFT_TAB': 'previous'
- });
- }
-
- Tabs.defaults = {
- // /**
- // * Allows the JS to alter the url of the window. Not yet implemented.
- // */
- // deepLinking: false,
- // /**
- // * If deepLinking is enabled, allows the window to scroll to content if window is loaded with a hash including a tab-pane id
- // */
- // scrollToContent: false,
- /**
- * Allows the window to scroll to content of active pane on load if set to true.
- * @option
- * @example false
- */
- autoFocus: false,
- /**
- * Allows keyboard input to 'wrap' around the tab links.
- * @option
- * @example true
- */
- wrapOnKeys: true,
- /**
- * Allows the tab content panes to match heights if set to true.
- * @option
- * @example false
- */
- matchHeight: false,
- /**
- * Class applied to `li`'s in tab link list.
- * @option
- * @example 'tabs-title'
- */
- linkClass: 'tabs-title',
- // contentClass: 'tabs-content',
- /**
- * Class applied to the content containers.
- * @option
- * @example 'tabs-panel'
- */
- panelClass: 'tabs-panel'
- };
-
+ marginBottom: 1,
/**
- * Initializes the tabs by showing and focusing (if autoFocus=true) the preset active tab.
- * @private
+ * Breakpoint string that is the minimum screen size an element should become sticky.
+ * @option
+ * @type {string}
+ * @default 'medium'
*/
- Tabs.prototype._init = function(){
- var _this = this;
-
- this.$tabTitles = this.$element.find('.' + this.options.linkClass);
- this.$tabContent = $('[data-tabs-content="' + this.$element[0].id + '"]');
-
- this.$tabTitles.each(function(){
- var $elem = $(this),
- $link = $elem.find('a'),
- isActive = $elem.hasClass('is-active'),
- hash = $link.attr('href').slice(1),
- linkId = hash + '-label',
- $tabContent = $(hash);
-
- $elem.attr({'role': 'presentation'});
-
- $link.attr({
- 'role': 'tab',
- 'aria-controls': hash,
- 'aria-selected': isActive,
- 'id': linkId
- });
-
- $tabContent.attr({
- 'role': 'tabpanel',
- 'aria-hidden': !isActive,
- 'aria-labelledby': linkId
- });
-
- if(isActive && _this.options.autoFocus){
- $link.focus();
- }
- });
- if(this.options.matchHeight){
- var $images = this.$tabContent.find('img');
- if($images.length){
- Foundation.onImagesLoaded($images, this._setHeight.bind(this));
- }else{
- this._setHeight();
- }
- }
- this._events();
- };
+ stickyOn: 'medium',
/**
- * Adds event handlers for items within the tabs.
- * @private
+ * Class applied to sticky element, and removed on destruction. Foundation defaults to `sticky`.
+ * @option
+ * @type {string}
+ * @default 'sticky'
*/
- Tabs.prototype._events = function(){
- this._addKeyHandler();
- this._addClickHandler();
- if(this.options.matchHeight){
- $(window).on('changed.zf.mediaquery', this._setHeight.bind(this));
- }
- };
-
+ stickyClass: 'sticky',
/**
- * Adds click handlers for items within the tabs.
- * @private
+ * Class applied to sticky container. Foundation defaults to `sticky-container`.
+ * @option
+ * @type {string}
+ * @default 'sticky-container'
*/
- Tabs.prototype._addClickHandler = function(){
- var _this = this;
- this.$tabTitles.off('click.zf.tabs')
- .on('click.zf.tabs', function(e){
- e.preventDefault();
- e.stopPropagation();
- if($(this).hasClass('is-active')){
- return;
- }
- _this._handleTabChange($(this));
- });
- };
-
+ containerClass: 'sticky-container',
/**
- * Adds keyboard event handlers for items within the tabs.
- * @private
+ * Number of scroll events between the plugin's recalculating sticky points. Setting it to `0` will cause it to recalc every scroll event, setting it to `-1` will prevent recalc on scroll.
+ * @option
+ * @type {number}
+ * @default -1
*/
- Tabs.prototype._addKeyHandler = function(){
- var _this = this;
- var $firstTab = _this.$element.find('li:first-of-type');
- var $lastTab = _this.$element.find('li:last-of-type');
-
- this.$tabTitles.off('keydown.zf.tabs').on('keydown.zf.tabs', function(e){
- e.stopPropagation();
- e.preventDefault();
-
- var $element = $(this),
- $elements = $element.parent('ul').children('li'),
- $prevElement,
- $nextElement;
-
- $elements.each(function(i) {
- if ($(this).is($element)) {
- if (_this.options.wrapOnKeys) {
- $prevElement = i === 0 ? $elements.last() : $elements.eq(i-1);
- $nextElement = i === $elements.length -1 ? $elements.first() : $elements.eq(i+1);
- } else {
- $prevElement = $elements.eq(Math.max(0, i-1));
- $nextElement = $elements.eq(Math.min(i+1, $elements.length-1));
- }
- return;
- }
- });
+ checkEvery: -1
+ };
- // handle keyboard event with keyboard util
- Foundation.Keyboard.handleKey(e, _this, {
- open: function() {
- $element.find('[role="tab"]').focus();
- _this._handleTabChange($element);
- },
- previous: function() {
- $prevElement.find('[role="tab"]').focus();
- _this._handleTabChange($prevElement);
- },
- next: function() {
- $nextElement.find('[role="tab"]').focus();
- _this._handleTabChange($nextElement);
- }
- });
- });
- };
+ /**
+ * Helper function to calculate em values
+ * @param Number {em} - number of em's to calculate into pixels
+ */
+ function emCalc(em) {
+ return parseInt(window.getComputedStyle(document.body, null).fontSize, 10) * em;
+ }
- /**
- * Opens the tab `$targetContent` defined by `$target`.
- * @param {jQuery} $target - Tab to open.
- * @fires Tabs#change
- * @function
- */
- Tabs.prototype._handleTabChange = function($target){
- var $tabLink = $target.find('[role="tab"]'),
- hash = $tabLink.attr('href'),
- $targetContent = $(hash),
- $oldTab = this.$element.find('.' + this.options.linkClass + '.is-active')
- .removeClass('is-active').find('[role="tab"]')
- .attr({'aria-selected': 'false'}).attr('href');
+ /***/ }),
+ /* 34 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
- $($oldTab).removeClass('is-active').attr({'aria-hidden': 'true'});
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Toggler; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_motion__ = __webpack_require__(6);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_plugin__ = __webpack_require__(2);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_triggers__ = __webpack_require__(5);
- $target.addClass('is-active');
- $tabLink.attr({'aria-selected': 'true'});
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
- $targetContent
- .addClass('is-active')
- .attr({'aria-hidden': 'false'});
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- /**
- * Fires when the plugin has successfully changed tabs.
- * @event Tabs#change
- */
- this.$element.trigger('change.zf.tabs', [$target]);
- // Foundation.reflow(this.$element, 'tabs');
- };
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
- /**
- * Public method for selecting a content pane to display.
- * @param {jQuery | String} elem - jQuery object or string of the id of the pane to display.
- * @function
- */
- Tabs.prototype.selectTab = function(elem){
- var idStr;
- if(typeof elem === 'object'){
- idStr = elem[0].id;
- }else{
- idStr = elem;
- }
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
- if(idStr.indexOf('#') < 0){
- idStr = '#' + idStr;
- }
- var $target = this.$tabTitles.find('[href="' + idStr + '"]').parent('.' + this.options.linkClass);
- this._handleTabChange($target);
- };
- /**
- * Sets the height of each panel to the height of the tallest panel.
- * If enabled in options, gets called on media query change.
- * If loading content via external source, can be called directly or with _reflow.
- * @function
- * @private
- */
- Tabs.prototype._setHeight = function(){
- var max = 0;
- this.$tabContent.find('.' + this.options.panelClass)
- .css('height', '')
- .each(function(){
- var panel = $(this),
- isActive = panel.hasClass('is-active');
-
- if(!isActive){
- panel.css({'visibility': 'hidden', 'display': 'block'});
- }
- var temp = this.getBoundingClientRect().height;
-
- if(!isActive){
- panel.css({'visibility': '', 'display': ''});
- }
-
- max = temp > max ? temp : max;
- })
- .css('height', max + 'px');
- };
- /**
- * Destroys an instance of an tabs.
- * @fires Tabs#destroyed
- */
- Tabs.prototype.destroy = function() {
- this.$element.find('.' + this.options.linkClass)
- .off('.zf.tabs').hide().end()
- .find('.' + this.options.panelClass)
- .hide();
- if(this.options.matchHeight){
- $(window).off('changed.zf.mediaquery');
- }
- Foundation.unregisterPlugin(this);
- };
- Foundation.plugin(Tabs, 'Tabs');
- function checkClass($elem){
- return $elem.hasClass('is-active');
- }
- }(jQuery, window.Foundation);
/**
* Toggler module.
* @module foundation.toggler
* @requires foundation.util.motion
+ * @requires foundation.util.triggers
*/
- !function(Foundation, $) {
- 'use strict';
-
- /**
- * Creates a new instance of Toggler.
- * @class
- * @fires Toggler#init
- * @param {Object} element - jQuery object to add the trigger to.
- * @param {Object} options - Overrides to the default plugin settings.
- */
- function Toggler(element, options) {
- this.$element = element;
- this.options = $.extend({}, Toggler.defaults, element.data(), options);
- this.className = '';
+ var Toggler = function (_Plugin) {
+ _inherits(Toggler, _Plugin);
- this._init();
- this._events();
+ function Toggler() {
+ _classCallCheck(this, Toggler);
- Foundation.registerPlugin(this);
+ return _possibleConstructorReturn(this, (Toggler.__proto__ || Object.getPrototypeOf(Toggler)).apply(this, arguments));
}
- Toggler.defaults = {
+ _createClass(Toggler, [{
+ key: '_setup',
+
/**
- * Tells the plugin if the element should animated when toggled.
- * @option
- * @example false
+ * Creates a new instance of Toggler.
+ * @class
+ * @name Toggler
+ * @fires Toggler#init
+ * @param {Object} element - jQuery object to add the trigger to.
+ * @param {Object} options - Overrides to the default plugin settings.
*/
- animate: false
- };
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Toggler.defaults, element.data(), options);
+ this.className = '';
+ this.className = 'Toggler'; // ie9 back compat
- /**
- * Initializes the Toggler plugin by parsing the toggle class from data-toggler, or animation classes from data-animate.
- * @function
- * @private
- */
- Toggler.prototype._init = function() {
- var input;
- // Parse animation classes if they were set
- if (this.options.animate) {
- input = this.options.animate.split(' ');
+ // Triggers init is idempotent, just need to make sure it is initialized
+ __WEBPACK_IMPORTED_MODULE_3__foundation_util_triggers__["a" /* Triggers */].init(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a);
- this.animationIn = input[0];
- this.animationOut = input[1] || null;
+ this._init();
+ this._events();
}
- // Otherwise, parse toggle class
- else {
- input = this.$element.data('toggler');
- // Allow for a . at the beginning of the string
- if (input[0] === '.') {
- this.className = input.slice(1);
+ /**
+ * Initializes the Toggler plugin by parsing the toggle class from data-toggler, or animation classes from data-animate.
+ * @function
+ * @private
+ */
+
+ }, {
+ key: '_init',
+ value: function _init() {
+ var input;
+ // Parse animation classes if they were set
+ if (this.options.animate) {
+ input = this.options.animate.split(' ');
+
+ this.animationIn = input[0];
+ this.animationOut = input[1] || null;
}
+ // Otherwise, parse toggle class
else {
- this.className = input;
- }
- }
-
- // Add ARIA attributes to triggers
- var id = this.$element[0].id;
- $('[data-open="'+id+'"], [data-close="'+id+'"], [data-toggle="'+id+'"]')
- .attr('aria-controls', id);
+ input = this.$element.data('toggler');
+ // Allow for a . at the beginning of the string
+ this.className = input[0] === '.' ? input.slice(1) : input;
+ }
- // If the target is hidden, add aria-hidden
- if (this.$element.is(':hidden')) {
- this.$element.attr('aria-expanded', 'false');
+ // Add ARIA attributes to triggers
+ var id = this.$element[0].id;
+ __WEBPACK_IMPORTED_MODULE_0_jquery___default()('[data-open="' + id + '"], [data-close="' + id + '"], [data-toggle="' + id + '"]').attr('aria-controls', id);
+ // If the target is hidden, add aria-hidden
+ this.$element.attr('aria-expanded', this.$element.is(':hidden') ? false : true);
}
- };
-
- /**
- * Initializes events for the toggle trigger.
- * @function
- * @private
- */
- Toggler.prototype._events = function() {
- var _this = this;
- this.$element.on('toggle.zf.trigger', function() {
- _this.toggle();
- return false;
- });
- };
+ /**
+ * Initializes events for the toggle trigger.
+ * @function
+ * @private
+ */
- /**
- * Toggles the target class on the target element. An event is fired from the original trigger depending on if the resultant state was "on" or "off".
- * @function
- * @fires Toggler#on
- * @fires Toggler#off
- */
- Toggler.prototype.toggle = function() {
- if (!this.options.animate) {
- this._toggleClass();
+ }, {
+ key: '_events',
+ value: function _events() {
+ this.$element.off('toggle.zf.trigger').on('toggle.zf.trigger', this.toggle.bind(this));
}
- else {
- this._toggleAnimate();
- }
- };
- Toggler.prototype._toggleClass = function() {
- var _this = this;
- this.$element.toggleClass(this.className);
+ /**
+ * Toggles the target class on the target element. An event is fired from the original trigger depending on if the resultant state was "on" or "off".
+ * @function
+ * @fires Toggler#on
+ * @fires Toggler#off
+ */
- if (this.$element.hasClass(this.className)) {
- /**
- * Fires if the target element has the class after a toggle.
- * @event Toggler#on
- */
- this.$element.trigger('on.zf.toggler');
- }
- else {
- /**
- * Fires if the target element does not have the class after a toggle.
- * @event Toggler#off
- */
- this.$element.trigger('off.zf.toggler');
+ }, {
+ key: 'toggle',
+ value: function toggle() {
+ this[this.options.animate ? '_toggleAnimate' : '_toggleClass']();
}
+ }, {
+ key: '_toggleClass',
+ value: function _toggleClass() {
+ this.$element.toggleClass(this.className);
- _this._updateARIA();
- };
+ var isOn = this.$element.hasClass(this.className);
+ if (isOn) {
+ /**
+ * Fires if the target element has the class after a toggle.
+ * @event Toggler#on
+ */
+ this.$element.trigger('on.zf.toggler');
+ } else {
+ /**
+ * Fires if the target element does not have the class after a toggle.
+ * @event Toggler#off
+ */
+ this.$element.trigger('off.zf.toggler');
+ }
- Toggler.prototype._toggleAnimate = function() {
- var _this = this;
+ this._updateARIA(isOn);
+ this.$element.find('[data-mutate]').trigger('mutateme.zf.trigger');
+ }
+ }, {
+ key: '_toggleAnimate',
+ value: function _toggleAnimate() {
+ var _this = this;
- if (this.$element.is(':hidden')) {
- Foundation.Motion.animateIn(this.$element, this.animationIn, function() {
- this.trigger('on.zf.toggler');
- _this._updateARIA();
- });
+ if (this.$element.is(':hidden')) {
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_motion__["a" /* Motion */].animateIn(this.$element, this.animationIn, function () {
+ _this._updateARIA(true);
+ this.trigger('on.zf.toggler');
+ this.find('[data-mutate]').trigger('mutateme.zf.trigger');
+ });
+ } else {
+ __WEBPACK_IMPORTED_MODULE_1__foundation_util_motion__["a" /* Motion */].animateOut(this.$element, this.animationOut, function () {
+ _this._updateARIA(false);
+ this.trigger('off.zf.toggler');
+ this.find('[data-mutate]').trigger('mutateme.zf.trigger');
+ });
+ }
}
- else {
- Foundation.Motion.animateOut(this.$element, this.animationOut, function() {
- this.trigger('off.zf.toggler');
- _this._updateARIA();
- });
+ }, {
+ key: '_updateARIA',
+ value: function _updateARIA(isOn) {
+ this.$element.attr('aria-expanded', isOn ? true : false);
}
- };
- Toggler.prototype._updateARIA = function() {
- if (this.$element.is(':hidden')) {
- this.$element.attr('aria-expanded', 'false');
- }
- else {
- this.$element.attr('aria-expanded', 'true');
+ /**
+ * Destroys the instance of Toggler on the element.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.$element.off('.zf.toggler');
}
- };
+ }]);
+ return Toggler;
+ }(__WEBPACK_IMPORTED_MODULE_2__foundation_plugin__["a" /* Plugin */]);
+
+ Toggler.defaults = {
/**
- * Destroys the instance of Toggler on the element.
- * @function
+ * Tells the plugin if the element should animated when toggled.
+ * @option
+ * @type {boolean}
+ * @default false
*/
- Toggler.prototype.destroy= function() {
- this.$element.off('.zf.toggler');
- Foundation.unregisterPlugin(this);
- };
+ animate: false
+ };
+
+
+
+ /***/ }),
+ /* 35 */
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+ "use strict";
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Tooltip; });
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation_util_core__ = __webpack_require__(1);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__ = __webpack_require__(4);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__foundation_util_triggers__ = __webpack_require__(5);
+ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__foundation_positionable__ = __webpack_require__(15);
+
+
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+ var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+
- Foundation.plugin(Toggler, 'Toggler');
- // Exports for AMD/Browserify
- if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
- module.exports = Toggler;
- if (typeof define === 'function')
- define(['foundation'], function() {
- return Toggler;
- });
- }(Foundation, jQuery);
/**
* Tooltip module.
* @module foundation.tooltip
* @requires foundation.util.box
+ * @requires foundation.util.mediaQuery
* @requires foundation.util.triggers
*/
- !function($, document, Foundation){
- 'use strict';
- /**
- * Creates a new instance of a Tooltip.
- * @class
- * @fires Tooltip#init
- * @param {jQuery} element - jQuery object to attach a tooltip to.
- * @param {Object} options - object to extend the default configuration.
- */
- function Tooltip(element, options){
- this.$element = element;
- this.options = $.extend({}, Tooltip.defaults, this.$element.data(), options);
+ var Tooltip = function (_Positionable) {
+ _inherits(Tooltip, _Positionable);
- this.isActive = false;
- this.isClick = false;
- this._init();
+ function Tooltip() {
+ _classCallCheck(this, Tooltip);
- Foundation.registerPlugin(this);
+ return _possibleConstructorReturn(this, (Tooltip.__proto__ || Object.getPrototypeOf(Tooltip)).apply(this, arguments));
}
- Tooltip.defaults = {
- disableForTouch: false,
- /**
- * Time, in ms, before a tooltip should open on hover.
- * @option
- * @example 200
- */
- hoverDelay: 200,
- /**
- * Time, in ms, a tooltip should take to fade into view.
- * @option
- * @example 150
- */
- fadeInDuration: 150,
- /**
- * Time, in ms, a tooltip should take to fade out of view.
- * @option
- * @example 150
- */
- fadeOutDuration: 150,
- /**
- * Disables hover events from opening the tooltip if set to true
- * @option
- * @example false
- */
- disableHover: false,
- /**
- * Optional addtional classes to apply to the tooltip template on init.
- * @option
- * @example 'my-cool-tip-class'
- */
- templateClasses: '',
- /**
- * Non-optional class added to tooltip templates. Foundation default is 'tooltip'.
- * @option
- * @example 'tooltip'
- */
- tooltipClass: 'tooltip',
- /**
- * Class applied to the tooltip anchor element.
- * @option
- * @example 'has-tip'
- */
- triggerClass: 'has-tip',
- /**
- * Minimum breakpoint size at which to open the tooltip.
- * @option
- * @example 'small'
- */
- showOn: 'small',
- /**
- * Custom template to be used to generate markup for tooltip.
- * @option
- * @example '<div class="tooltip"></div>'
- */
- template: '',
- /**
- * Text displayed in the tooltip template on open.
- * @option
- * @example 'Some cool space fact here.'
- */
- tipText: '',
- touchCloseText: 'Tap to close.',
- /**
- * Allows the tooltip to remain open if triggered with a click or touch event.
- * @option
- * @example true
- */
- clickOpen: true,
- /**
- * Additional positioning classes, set by the JS
- * @option
- * @example 'top'
- */
- positionClass: '',
- /**
- * Distance, in pixels, the template should push away from the anchor on the Y axis.
- * @option
- * @example 10
- */
- vOffset: 10,
+ _createClass(Tooltip, [{
+ key: '_setup',
+
/**
- * Distance, in pixels, the template should push away from the anchor on the X axis, if aligned to a side.
- * @option
- * @example 12
+ * Creates a new instance of a Tooltip.
+ * @class
+ * @name Tooltip
+ * @fires Tooltip#init
+ * @param {jQuery} element - jQuery object to attach a tooltip to.
+ * @param {Object} options - object to extend the default configuration.
*/
- hOffset: 12
- };
-
- /**
- * Initializes the tooltip by setting the creating the tip element, adding it's text, setting private variables and setting attributes on the anchor.
- * @private
- */
- Tooltip.prototype._init = function(){
- var elemId = this.$element.attr('aria-describedby') || Foundation.GetYoDigits(6, 'tooltip');
+ value: function _setup(element, options) {
+ this.$element = element;
+ this.options = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.extend({}, Tooltip.defaults, this.$element.data(), options);
+ this.className = 'Tooltip'; // ie9 back compat
- this.options.positionClass = this._getPositionClass(this.$element);
- this.options.tipText = this.options.tipText || this.$element.attr('title');
- this.template = this.options.template ? $(this.options.template) : this._buildTemplate(elemId);
+ this.isActive = false;
+ this.isClick = false;
- this.template.appendTo(document.body)
- .text(this.options.tipText)
- .hide();
+ // Triggers init is idempotent, just need to make sure it is initialized
+ __WEBPACK_IMPORTED_MODULE_3__foundation_util_triggers__["a" /* Triggers */].init(__WEBPACK_IMPORTED_MODULE_0_jquery___default.a);
- this.$element.attr({
- 'title': '',
- 'aria-describedby': elemId,
- 'data-yeti-box': elemId,
- 'data-toggle': elemId,
- 'data-resize': elemId
- }).addClass(this.triggerClass);
-
- //helper variables to track movement on collisions
- this.usedPositions = [];
- this.counter = 4;
- this.classChanged = false;
+ this._init();
+ }
- this._events();
- };
+ /**
+ * Initializes the tooltip by setting the creating the tip element, adding it's text, setting private variables and setting attributes on the anchor.
+ * @private
+ */
- /**
- * Grabs the current positioning class, if present, and returns the value or an empty string.
- * @private
- */
- Tooltip.prototype._getPositionClass = function(element){
- if(!element){ return ''; }
- // var position = element.attr('class').match(/top|left|right/g);
- var position = element[0].className.match(/(top|left|right)/g);
- position = position ? position[0] : '';
- return position;
- };
- /**
- * builds the tooltip element, adds attributes, and returns the template.
- * @private
- */
- Tooltip.prototype._buildTemplate = function(id){
- var templateClasses = (this.options.tooltipClass + ' ' + this.options.positionClass).trim();
- var $template = $('<div></div>').addClass(templateClasses).attr({
- 'role': 'tooltip',
- 'aria-hidden': true,
- 'data-is-active': false,
- 'data-is-focus': false,
- 'id': id
- });
- return $template;
- };
+ }, {
+ key: '_init',
+ value: function _init() {
+ __WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__["a" /* MediaQuery */]._init();
+ var elemId = this.$element.attr('aria-describedby') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__foundation_util_core__["b" /* GetYoDigits */])(6, 'tooltip');
- /**
- * Function that gets called if a collision event is detected.
- * @param {String} position - positioning class to try
- * @private
- */
- Tooltip.prototype._reposition = function(position){
- this.usedPositions.push(position ? position : 'bottom');
-
- //default, try switching to opposite side
- if(!position && (this.usedPositions.indexOf('top') < 0)){
- this.template.addClass('top');
- }else if(position === 'top' && (this.usedPositions.indexOf('bottom') < 0)){
- this.template.removeClass(position);
- }else if(position === 'left' && (this.usedPositions.indexOf('right') < 0)){
- this.template.removeClass(position)
- .addClass('right');
- }else if(position === 'right' && (this.usedPositions.indexOf('left') < 0)){
- this.template.removeClass(position)
- .addClass('left');
- }
-
- //if default change didn't work, try bottom or left first
- else if(!position && (this.usedPositions.indexOf('top') > -1) && (this.usedPositions.indexOf('left') < 0)){
- this.template.addClass('left');
- }else if(position === 'top' && (this.usedPositions.indexOf('bottom') > -1) && (this.usedPositions.indexOf('left') < 0)){
- this.template.removeClass(position)
- .addClass('left');
- }else if(position === 'left' && (this.usedPositions.indexOf('right') > -1) && (this.usedPositions.indexOf('bottom') < 0)){
- this.template.removeClass(position);
- }else if(position === 'right' && (this.usedPositions.indexOf('left') > -1) && (this.usedPositions.indexOf('bottom') < 0)){
- this.template.removeClass(position);
- }
- //if nothing cleared, set to bottom
- else{
- this.template.removeClass(position);
- }
- this.classChanged = true;
- this.counter--;
+ this.options.tipText = this.options.tipText || this.$element.attr('title');
+ this.template = this.options.template ? __WEBPACK_IMPORTED_MODULE_0_jquery___default()(this.options.template) : this._buildTemplate(elemId);
- };
+ if (this.options.allowHtml) {
+ this.template.appendTo(document.body).html(this.options.tipText).hide();
+ } else {
+ this.template.appendTo(document.body).text(this.options.tipText).hide();
+ }
- /**
- * sets the position class of an element and recursively calls itself until there are no more possible positions to attempt, or the tooltip element is no longer colliding.
- * if the tooltip is larger than the screen width, default to full width - any user selected margin
- * @private
- */
- Tooltip.prototype._setPosition = function(){
- var position = this._getPositionClass(this.template),
- $tipDims = Foundation.Box.GetDimensions(this.template),
- $anchorDims = Foundation.Box.GetDimensions(this.$element),
- direction = (position === 'left' ? 'left' : ((position === 'right') ? 'left' : 'top')),
- param = (direction === 'top') ? 'height' : 'width',
- offset = (param === 'height') ? this.options.vOffset : this.options.hOffset,
- _this = this;
-
- if(($tipDims.width >= $tipDims.windowDims.width) || (!this.counter && !Foundation.Box.ImNotTouchingYou(this.template))){
- this.template.offset(Foundation.Box.GetOffsets(this.template, this.$element, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({
- // this.$element.offset(Foundation.GetOffsets(this.template, this.$element, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({
- 'width': $anchorDims.windowDims.width - (this.options.hOffset * 2),
- 'height': 'auto'
- });
- return false;
+ this.$element.attr({
+ 'title': '',
+ 'aria-describedby': elemId,
+ 'data-yeti-box': elemId,
+ 'data-toggle': elemId,
+ 'data-resize': elemId
+ }).addClass(this.options.triggerClass);
+
+ _get(Tooltip.prototype.__proto__ || Object.getPrototypeOf(Tooltip.prototype), '_init', this).call(this);
+ this._events();
+ }
+ }, {
+ key: '_getDefaultPosition',
+ value: function _getDefaultPosition() {
+ // handle legacy classnames
+ var position = this.$element[0].className.match(/\b(top|left|right|bottom)\b/g);
+ return position ? position[0] : 'top';
+ }
+ }, {
+ key: '_getDefaultAlignment',
+ value: function _getDefaultAlignment() {
+ return 'center';
+ }
+ }, {
+ key: '_getHOffset',
+ value: function _getHOffset() {
+ if (this.position === 'left' || this.position === 'right') {
+ return this.options.hOffset + this.options.tooltipWidth;
+ } else {
+ return this.options.hOffset;
+ }
}
-
- this.template.offset(Foundation.Box.GetOffsets(this.template, this.$element,'center ' + (position || 'bottom'), this.options.vOffset, this.options.hOffset));
-
- while(!Foundation.Box.ImNotTouchingYou(this.template) && this.counter){
- this._reposition(position);
- this._setPosition();
+ }, {
+ key: '_getVOffset',
+ value: function _getVOffset() {
+ if (this.position === 'top' || this.position === 'bottom') {
+ return this.options.vOffset + this.options.tooltipHeight;
+ } else {
+ return this.options.vOffset;
+ }
}
- };
- /**
- * reveals the tooltip, and fires an event to close any other open tooltips on the page
- * @fires Closeme#tooltip
- * @fires Tooltip#show
- * @function
- */
- Tooltip.prototype.show = function(){
- if(this.options.showOn !== 'all' && !Foundation.MediaQuery.atLeast(this.options.showOn)){
- // console.error('The screen is too small to display this tooltip');
- return false;
- }
+ /**
+ * builds the tooltip element, adds attributes, and returns the template.
+ * @private
+ */
- var _this = this;
- this.template.css('visibility', 'hidden').show();
- this._setPosition();
+ }, {
+ key: '_buildTemplate',
+ value: function _buildTemplate(id) {
+ var templateClasses = (this.options.tooltipClass + ' ' + this.options.positionClass + ' ' + this.options.templateClasses).trim();
+ var $template = __WEBPACK_IMPORTED_MODULE_0_jquery___default()('<div></div>').addClass(templateClasses).attr({
+ 'role': 'tooltip',
+ 'aria-hidden': true,
+ 'data-is-active': false,
+ 'data-is-focus': false,
+ 'id': id
+ });
+ return $template;
+ }
/**
- * Fires to close all other open tooltips on the page
- * @event Closeme#tooltip
+ * sets the position class of an element and recursively calls itself until there are no more possible positions to attempt, or the tooltip element is no longer colliding.
+ * if the tooltip is larger than the screen width, default to full width - any user selected margin
+ * @private
*/
- this.$element.trigger('closeme.zf.tooltip', this.template.attr('id'));
+ }, {
+ key: '_setPosition',
+ value: function _setPosition() {
+ _get(Tooltip.prototype.__proto__ || Object.getPrototypeOf(Tooltip.prototype), '_setPosition', this).call(this, this.$element, this.template);
+ }
- this.template.attr({
- 'data-is-active': true,
- 'aria-hidden': false
- });
- _this.isActive = true;
- // console.log(this.template);
- this.template.stop().hide().css('visibility', '').fadeIn(this.options.fadeInDuration, function(){
- //maybe do stuff?
- });
/**
- * Fires when the tooltip is shown
- * @event Tooltip#show
+ * reveals the tooltip, and fires an event to close any other open tooltips on the page
+ * @fires Tooltip#closeme
+ * @fires Tooltip#show
+ * @function
*/
- this.$element.trigger('show.zf.tooltip');
- };
- /**
- * Hides the current tooltip, and resets the positioning class if it was changed due to collision
- * @fires Tooltip#hide
- * @function
- */
- Tooltip.prototype.hide = function(){
- // console.log('hiding', this.$element.data('yeti-box'));
- var _this = this;
- this.template.stop().attr({
- 'aria-hidden': true,
- 'data-is-active': false
- }).fadeOut(this.options.fadeOutDuration, function(){
- _this.isActive = false;
- _this.isClick = false;
- if(_this.classChanged){
- _this.template
- .removeClass(_this._getPositionClass(_this.template))
- .addClass(_this.options.positionClass);
-
- _this.usedPositions = [];
- _this.counter = 4;
- _this.classChanged = false;
+ }, {
+ key: 'show',
+ value: function show() {
+ if (this.options.showOn !== 'all' && !__WEBPACK_IMPORTED_MODULE_2__foundation_util_mediaQuery__["a" /* MediaQuery */].is(this.options.showOn)) {
+ // console.error('The screen is too small to display this tooltip');
+ return false;
}
- });
- /**
- * fires when the tooltip is hidden
- * @event Tooltip#hide
- */
- this.$element.trigger('hide.zf.tooltip');
- };
- /**
- * adds event listeners for the tooltip and its anchor
- * TODO combine some of the listeners like focus and mouseenter, etc.
- * @private
- */
- Tooltip.prototype._events = function(){
- var _this = this;
- var $template = this.template;
- var isFocus = false;
+ var _this = this;
+ this.template.css('visibility', 'hidden').show();
+ this._setPosition();
+ this.template.removeClass('top bottom left right').addClass(this.position);
+ this.template.removeClass('align-top align-bottom align-left align-right align-center').addClass('align-' + this.alignment);
- if(!this.options.disableHover){
+ /**
+ * Fires to close all other open tooltips on the page
+ * @event Closeme#tooltip
+ */
+ this.$element.trigger('closeme.zf.tooltip', this.template.attr('id'));
- this.$element
- .on('mouseenter.zf.tooltip', function(e){
- if(!_this.isActive){
- _this.timeout = setTimeout(function(){
- _this.show();
- }, _this.options.hoverDelay);
- }
- })
- .on('mouseleave.zf.tooltip', function(e){
- clearTimeout(_this.timeout);
- if(!isFocus || (!_this.isClick && _this.options.clickOpen)){
- _this.hide();
- }
+ this.template.attr({
+ 'data-is-active': true,
+ 'aria-hidden': false
});
- }
- if(this.options.clickOpen){
- this.$element.on('mousedown.zf.tooltip', function(e){
- e.stopImmediatePropagation();
- if(_this.isClick){
- _this.hide();
- // _this.isClick = false;
- }else{
- _this.isClick = true;
- if((_this.options.disableHover || !_this.$element.attr('tabindex')) && !_this.isActive){
- _this.show();
- }
- }
+ _this.isActive = true;
+ // console.log(this.template);
+ this.template.stop().hide().css('visibility', '').fadeIn(this.options.fadeInDuration, function () {
+ //maybe do stuff?
});
+ /**
+ * Fires when the tooltip is shown
+ * @event Tooltip#show
+ */
+ this.$element.trigger('show.zf.tooltip');
}
- if(!this.options.disableForTouch){
- this.$element
- .on('tap.zf.tooltip touchend.zf.tooltip', function(e){
- _this.isActive ? _this.hide() : _this.show();
+ /**
+ * Hides the current tooltip, and resets the positioning class if it was changed due to collision
+ * @fires Tooltip#hide
+ * @function
+ */
+
+ }, {
+ key: 'hide',
+ value: function hide() {
+ // console.log('hiding', this.$element.data('yeti-box'));
+ var _this = this;
+ this.template.stop().attr({
+ 'aria-hidden': true,
+ 'data-is-active': false
+ }).fadeOut(this.options.fadeOutDuration, function () {
+ _this.isActive = false;
+ _this.isClick = false;
});
+ /**
+ * fires when the tooltip is hidden
+ * @event Tooltip#hide
+ */
+ this.$element.trigger('hide.zf.tooltip');
}
- this.$element.on({
- // 'toggle.zf.trigger': this.toggle.bind(this),
- // 'close.zf.trigger': this.hide.bind(this)
- 'close.zf.trigger': this.hide.bind(this)
- });
+ /**
+ * adds event listeners for the tooltip and its anchor
+ * TODO combine some of the listeners like focus and mouseenter, etc.
+ * @private
+ */
+
+ }, {
+ key: '_events',
+ value: function _events() {
+ var _this = this;
+ var $template = this.template;
+ var isFocus = false;
+
+ if (!this.options.disableHover) {
+
+ this.$element.on('mouseenter.zf.tooltip', function (e) {
+ if (!_this.isActive) {
+ _this.timeout = setTimeout(function () {
+ _this.show();
+ }, _this.options.hoverDelay);
+ }
+ }).on('mouseleave.zf.tooltip', function (e) {
+ clearTimeout(_this.timeout);
+ if (!isFocus || _this.isClick && !_this.options.clickOpen) {
+ _this.hide();
+ }
+ });
+ }
+
+ if (this.options.clickOpen) {
+ this.$element.on('mousedown.zf.tooltip', function (e) {
+ e.stopImmediatePropagation();
+ if (_this.isClick) {
+ //_this.hide();
+ // _this.isClick = false;
+ } else {
+ _this.isClick = true;
+ if ((_this.options.disableHover || !_this.$element.attr('tabindex')) && !_this.isActive) {
+ _this.show();
+ }
+ }
+ });
+ } else {
+ this.$element.on('mousedown.zf.tooltip', function (e) {
+ e.stopImmediatePropagation();
+ _this.isClick = true;
+ });
+ }
- this.$element
- .on('focus.zf.tooltip', function(e){
+ if (!this.options.disableForTouch) {
+ this.$element.on('tap.zf.tooltip touchend.zf.tooltip', function (e) {
+ _this.isActive ? _this.hide() : _this.show();
+ });
+ }
+
+ this.$element.on({
+ // 'toggle.zf.trigger': this.toggle.bind(this),
+ // 'close.zf.trigger': this.hide.bind(this)
+ 'close.zf.trigger': this.hide.bind(this)
+ });
+
+ this.$element.on('focus.zf.tooltip', function (e) {
isFocus = true;
- console.log(_this.isClick);
- if(_this.isClick){
+ if (_this.isClick) {
+ // If we're not showing open on clicks, we need to pretend a click-launched focus isn't
+ // a real focus, otherwise on hover and come back we get bad behavior
+ if (!_this.options.clickOpen) {
+ isFocus = false;
+ }
return false;
- }else{
- // $(window)
+ } else {
_this.show();
}
- })
-
- .on('focusout.zf.tooltip', function(e){
+ }).on('focusout.zf.tooltip', function (e) {
isFocus = false;
_this.isClick = false;
_this.hide();
- })
-
- .on('resizeme.zf.trigger', function(){
- if(_this.isActive){
+ }).on('resizeme.zf.trigger', function () {
+ if (_this.isActive) {
_this._setPosition();
}
});
- };
+ }
+
+ /**
+ * adds a toggle method, in addition to the static show() & hide() functions
+ * @function
+ */
+
+ }, {
+ key: 'toggle',
+ value: function toggle() {
+ if (this.isActive) {
+ this.hide();
+ } else {
+ this.show();
+ }
+ }
+
+ /**
+ * Destroys an instance of tooltip, removes template element from the view.
+ * @function
+ */
+
+ }, {
+ key: '_destroy',
+ value: function _destroy() {
+ this.$element.attr('title', this.template.text()).off('.zf.trigger .zf.tooltip').removeClass('has-tip top right left').removeAttr('aria-describedby aria-haspopup data-disable-hover data-resize data-toggle data-tooltip data-yeti-box');
+
+ this.template.remove();
+ }
+ }]);
+
+ return Tooltip;
+ }(__WEBPACK_IMPORTED_MODULE_4__foundation_positionable__["a" /* Positionable */]);
+
+ Tooltip.defaults = {
+ disableForTouch: false,
/**
- * adds a toggle method, in addition to the static show() & hide() functions
- * @function
+ * Time, in ms, before a tooltip should open on hover.
+ * @option
+ * @type {number}
+ * @default 200
*/
- Tooltip.prototype.toggle = function(){
- if(this.isActive){
- this.hide();
- }else{
- this.show();
- }
- };
+ hoverDelay: 200,
/**
- * Destroys an instance of tooltip, removes template element from the view.
- * @function
+ * Time, in ms, a tooltip should take to fade into view.
+ * @option
+ * @type {number}
+ * @default 150
*/
- Tooltip.prototype.destroy = function(){
- this.$element.attr('title', this.template.text())
- .off('.zf.trigger .zf.tootip')
- // .removeClass('has-tip')
- .removeAttr('aria-describedby')
- .removeAttr('data-yeti-box')
- .removeAttr('data-toggle')
- .removeAttr('data-resize');
-
- this.template.remove();
-
- Foundation.unregisterPlugin(this);
- };
+ fadeInDuration: 150,
+ /**
+ * Time, in ms, a tooltip should take to fade out of view.
+ * @option
+ * @type {number}
+ * @default 150
+ */
+ fadeOutDuration: 150,
+ /**
+ * Disables hover events from opening the tooltip if set to true
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ disableHover: false,
+ /**
+ * Optional addtional classes to apply to the tooltip template on init.
+ * @option
+ * @type {string}
+ * @default ''
+ */
+ templateClasses: '',
+ /**
+ * Non-optional class added to tooltip templates. Foundation default is 'tooltip'.
+ * @option
+ * @type {string}
+ * @default 'tooltip'
+ */
+ tooltipClass: 'tooltip',
+ /**
+ * Class applied to the tooltip anchor element.
+ * @option
+ * @type {string}
+ * @default 'has-tip'
+ */
+ triggerClass: 'has-tip',
+ /**
+ * Minimum breakpoint size at which to open the tooltip.
+ * @option
+ * @type {string}
+ * @default 'small'
+ */
+ showOn: 'small',
+ /**
+ * Custom template to be used to generate markup for tooltip.
+ * @option
+ * @type {string}
+ * @default ''
+ */
+ template: '',
+ /**
+ * Text displayed in the tooltip template on open.
+ * @option
+ * @type {string}
+ * @default ''
+ */
+ tipText: '',
+ touchCloseText: 'Tap to close.',
+ /**
+ * Allows the tooltip to remain open if triggered with a click or touch event.
+ * @option
+ * @type {boolean}
+ * @default true
+ */
+ clickOpen: true,
+ /**
+ * DEPRECATED Additional positioning classes, set by the JS
+ * @option
+ * @type {string}
+ * @default ''
+ */
+ positionClass: '',
/**
- * TODO utilize resize event trigger
+ * Position of tooltip. Can be left, right, bottom, top, or auto.
+ * @option
+ * @type {string}
+ * @default 'auto'
+ */
+ position: 'auto',
+ /**
+ * Alignment of tooltip relative to anchor. Can be left, right, bottom, top, center, or auto.
+ * @option
+ * @type {string}
+ * @default 'auto'
+ */
+ alignment: 'auto',
+ /**
+ * Allow overlap of container/window. If false, tooltip will first try to
+ * position as defined by data-position and data-alignment, but reposition if
+ * it would cause an overflow. @option
+ * @type {boolean}
+ * @default false
+ */
+ allowOverlap: false,
+ /**
+ * Allow overlap of only the bottom of the container. This is the most common
+ * behavior for dropdowns, allowing the dropdown to extend the bottom of the
+ * screen but not otherwise influence or break out of the container.
+ * Less common for tooltips.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ allowBottomOverlap: false,
+ /**
+ * Distance, in pixels, the template should push away from the anchor on the Y axis.
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ vOffset: 0,
+ /**
+ * Distance, in pixels, the template should push away from the anchor on the X axis
+ * @option
+ * @type {number}
+ * @default 0
+ */
+ hOffset: 0,
+ /**
+ * Distance, in pixels, the template spacing auto-adjust for a vertical tooltip
+ * @option
+ * @type {number}
+ * @default 14
+ */
+ tooltipHeight: 14,
+ /**
+ * Distance, in pixels, the template spacing auto-adjust for a horizontal tooltip
+ * @option
+ * @type {number}
+ * @default 12
*/
+ tooltipWidth: 12,
+ /**
+ * Allow HTML in tooltip. Warning: If you are loading user-generated content into tooltips,
+ * allowing HTML may open yourself up to XSS attacks.
+ * @option
+ * @type {boolean}
+ * @default false
+ */
+ allowHtml: false
+ };
+
+ /**
+ * TODO utilize resize event trigger
+ */
+
+
+
+ /***/ }),
+ /* 36 */
+ /***/ (function(module, exports, __webpack_require__) {
+
+ module.exports = __webpack_require__(19);
+
- Foundation.plugin(Tooltip, 'Tooltip');
- }(jQuery, window.document, window.Foundation);
+ /***/ })
+ /******/ ]);
\ No newline at end of file
generators/foundation/public/javascripts/vendor/foundation.min.js +5 -3
@@ @@ -1,3 +1,5 @@
- !function(t){"use strict";function e(t){if(void 0===Function.prototype.name){var e=/function\s([^(]{1,})\(/,i=e.exec(t.toString());return i&&i.length>1?i[1].trim():""}return void 0===t.prototype?t.constructor.name:t.prototype.constructor.name}function i(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}var n="6.0.3",s={version:n,_plugins:{},_uuids:[],_activePlugins:{},rtl:function(){return"rtl"===t("html").attr("dir")},plugin:function(t,n){var s=n||e(t),o=i(s);this._plugins[o]=this[s]=t},registerPlugin:function(t){var i=e(t.constructor).toLowerCase();t.uuid=this.GetYoDigits(6,i),t.$element.attr("data-"+i,t.uuid).trigger("init.zf."+i),this._activePlugins[t.uuid]=t},unregisterPlugin:function(t){var i=e(t.constructor).toLowerCase();delete this._activePlugins[t.uuid],t.$element.removeAttr("data-"+i).trigger("destroyed.zf."+i)},_reflow:function(t){var e=Object.keys(this._activePlugins),i=this;if(t){if("string"==typeof t){var n=t.split("-")[1];n?this._activePlugins[t]._init():(n=new RegExp(t,"i"),e.filter(function(t){return n.test(t)}).forEach(function(t){i._activePlugins[t]._init()}))}}else e.forEach(function(t){i._activePlugins[t]._init()})},GetYoDigits:function(t,e){return t=t||6,Math.round(Math.pow(36,t+1)-Math.random()*Math.pow(36,t)).toString(36).slice(1)+(e?"-"+e:"")},reflow:function(e,i){"undefined"==typeof i?i=Object.keys(this._plugins):"string"==typeof i&&(i=[i]);var n=this;t.each(i,function(i,s){var o=n._plugins[s],a=t(e).find("[data-"+s+"]").addBack("*");a.each(function(){return t(this).attr("zf-plugin")?void console.warn("Tried to initialize "+s+" on an element that already has a Foundation plugin."):void t(this).data("zf-plugin",new o(t(this)))})})},getFnName:e,transitionend:function(t){var e,i={transition:"transitionend",WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend"},n=document.createElement("div");for(var s in i)"undefined"!=typeof n.style[s]&&(e=i[s]);return e?e:(e=setTimeout(function(){t.triggerHandler("transitionend",[t])},1),"transitionend")}};s.util={throttle:function(t,e){var i=null;return function(){var n=this,s=arguments;null===i&&(i=setTimeout(function(){t.apply(n,s),i=null},e))}}};var o=function(i){var n=typeof i,o=t("meta.foundation-mq"),a=t(".no-js");if(o.length||t('<meta class="foundation-mq">').appendTo(document.head),a.length&&a.removeClass("no-js"),"undefined"===n)s.MediaQuery._init(),s.reflow(this);else{if("string"!==n)throw new TypeError("We're sorry, '"+n+"' is not a valid parameter. You must use a string representing the method you wish to invoke.");var r=Array.prototype.slice.call(arguments,1),l=this.data("zfPlugin");if(void 0===l||void 0===l[i])throw new ReferenceError("We're sorry, '"+i+"' is not an available method for "+(l?e(l):"this element")+".");1===this.length?l[i].apply(l,r):this.each(function(e,n){l[i].apply(t(n).data("zfPlugin"),r)})}return this};window.Foundation=s,t.fn.foundation=o,function(){Date.now&&window.Date.now||(window.Date.now=Date.now=function(){return(new Date).getTime()});for(var t=["webkit","moz"],e=0;e<t.length&&!window.requestAnimationFrame;++e){var i=t[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var n=0;window.requestAnimationFrame=function(t){var e=Date.now(),i=Math.max(n+16,e);return setTimeout(function(){t(n=i)},i-e)},window.cancelAnimationFrame=clearTimeout}window.performance&&window.performance.now||(window.performance={start:Date.now(),now:function(){return Date.now()-this.start}})}(),Function.prototype.bind||(Function.prototype.bind=function(t){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var e=Array.prototype.slice.call(arguments,1),i=this,n=function(){},s=function(){return i.apply(this instanceof n?this:t,e.concat(Array.prototype.slice.call(arguments)))};return this.prototype&&(n.prototype=this.prototype),s.prototype=new n,s})}(jQuery),!function(t,e){var i=function(t,e,i,s){var o,a,r,l,d=n(t);if(e){var h=n(e);a=d.offset.top+d.height<=h.height+h.offset.top,o=d.offset.top>=h.offset.top,r=d.offset.left>=h.offset.left,l=d.offset.left+d.width<=h.width}else a=d.offset.top+d.height<=d.windowDims.height+d.windowDims.offset.top,o=d.offset.top>=d.windowDims.offset.top,r=d.offset.left>=d.windowDims.offset.left,l=d.offset.left+d.width<=d.windowDims.width;var u=[a,o,r,l];return i?r===l==!0:s?o===a==!0:-1===u.indexOf(!1)},n=function(t,i){if(t=t.length?t[0]:t,t===e||t===document)throw new Error("I'm sorry, Dave. I'm afraid I can't do that.");var n=t.getBoundingClientRect(),s=t.parentNode.getBoundingClientRect(),o=document.body.getBoundingClientRect(),a=e.pageYOffset,r=e.pageXOffset;return{width:n.width,height:n.height,offset:{top:n.top+a,left:n.left+r},parentDims:{width:s.width,height:s.height,offset:{top:s.top+a,left:s.left+r}},windowDims:{width:o.width,height:o.height,offset:{top:a,left:r}}}},s=function(t,e,i,s,o,a){var r=n(t),l=e?n(e):null;switch(i){case"top":return{left:l.offset.left,top:l.offset.top-(r.height+s)};case"left":return{left:l.offset.left-(r.width+o),top:l.offset.top};case"right":return{left:l.offset.left+l.width+o,top:l.offset.top};case"center top":return{left:l.offset.left+l.width/2-r.width/2,top:l.offset.top-(r.height+s)};case"center bottom":return{left:a?o:l.offset.left+l.width/2-r.width/2,top:l.offset.top+l.height+s};case"center left":return{left:l.offset.left-(r.width+o),top:l.offset.top+l.height/2-r.height/2};case"center right":return{left:l.offset.left+l.width+o+1,top:l.offset.top+l.height/2-r.height/2};case"center":return{left:r.windowDims.offset.left+r.windowDims.width/2-r.width/2,top:r.windowDims.offset.top+r.windowDims.height/2-r.height/2};case"reveal":return{left:(r.windowDims.width-r.width)/2,top:r.windowDims.offset.top+s};case"reveal full":return{left:r.windowDims.offset.left,top:r.windowDims.offset.top};default:return{left:l.offset.left,top:l.offset.top+l.height+s}}};t.Box={ImNotTouchingYou:i,GetDimensions:n,GetOffsets:s}}(window.Foundation,window),!function(t,e){"use strict";e.Keyboard={};var i={9:"TAB",13:"ENTER",27:"ESCAPE",32:"SPACE",37:"ARROW_LEFT",38:"ARROW_UP",39:"ARROW_RIGHT",40:"ARROW_DOWN"},n=function(t){var e={};for(var i in t)e[t[i]]=t[i];return e}(i);e.Keyboard.keys=n;var s=function(t){var e=i[t.which||t.keyCode]||String.fromCharCode(t.which).toUpperCase();return t.shiftKey&&(e="SHIFT_"+e),t.ctrlKey&&(e="CTRL_"+e),t.altKey&&(e="ALT_"+e),e};e.Keyboard.parseKey=s;var o={},a=function(i,n,a){var r,l,d,h=o[e.getFnName(n)],u=s(i);return h?(r="undefined"==typeof h.ltr?h:e.rtl()?t.extend({},h.ltr,h.rtl):t.extend({},h.rtl,h.ltr),l=r[u],d=a[l],void(d&&"function"==typeof d?(d.apply(n),(a.handled||"function"==typeof a.handled)&&a.handled.apply(n)):(a.unhandled||"function"==typeof a.unhandled)&&a.unhandled.apply(n))):console.warn("Component not defined!")};e.Keyboard.handleKey=a;var r=function(e){return e.find("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]").filter(function(){return!t(this).is(":visible")||t(this).attr("tabindex")<0?!1:!0})};e.Keyboard.findFocusable=r;var l=function(t,e){o[t]=e};e.Keyboard.register=l}(jQuery,window.Foundation),!function(t,e){function i(t){var e={};return"string"!=typeof t?e:(t=t.trim().slice(1,-1))?e=t.split("&").reduce(function(t,e){var i=e.replace(/\+/g," ").split("="),n=i[0],s=i[1];return n=decodeURIComponent(n),s=void 0===s?null:decodeURIComponent(s),t.hasOwnProperty(n)?Array.isArray(t[n])?t[n].push(s):t[n]=[t[n],s]:t[n]=s,t},{}):e}var n={queries:[],current:"",atLeast:function(t){var e=this.get(t);return e?window.matchMedia(e).matches:!1},get:function(t){for(var e in this.queries){var i=this.queries[e];if(t===i.name)return i.value}return null},_init:function(){var e,n=this,s=t(".foundation-mq").css("font-family");e=i(s);for(var o in e)n.queries.push({name:o,value:"only screen and (min-width: "+e[o]+")"});this.current=this._getCurrentSize(),this._watcher()},_getCurrentSize:function(){var t;for(var e in this.queries){var i=this.queries[e];window.matchMedia(i.value).matches&&(t=i)}return"object"==typeof t?t.name:t},_watcher:function(){var e=this;t(window).on("resize.zf.mediaquery",function(){var i=e._getCurrentSize();i!==e.current&&(t(window).trigger("changed.zf.mediaquery",[i,e.current]),e.current=i)})}};e.MediaQuery=n,window.matchMedia||(window.matchMedia=function(){"use strict";var t=window.styleMedia||window.media;if(!t){var e=document.createElement("style"),i=document.getElementsByTagName("script")[0],n=null;e.type="text/css",e.id="matchmediajs-test",i.parentNode.insertBefore(e,i),n="getComputedStyle"in window&&window.getComputedStyle(e,null)||e.currentStyle,t={matchMedium:function(t){var i="@media "+t+"{ #matchmediajs-test { width: 1px; } }";return e.styleSheet?e.styleSheet.cssText=i:e.textContent=i,"1px"===n.width}}}return function(e){return{matches:t.matchMedium(e||"all"),media:e||"all"}}}())}(jQuery,Foundation),!function(t,e){function i(i,o,a,r){function l(){i||o.hide(),d(),r&&r.apply(o)}function d(){o[0].style.transitionDuration=0,o.removeClass(h+" "+u+" "+a)}if(o=t(o).eq(0),o.length){var h=i?n[0]:n[1],u=i?s[0]:s[1];d(),o.addClass(a).css("transition","none"),requestAnimationFrame(function(){o.addClass(h),i&&o.show()}),requestAnimationFrame(function(){o[0].offsetWidth,o.css("transition",""),o.addClass(u)}),o.one(e.transitionend(o),l)}}var n=["mui-enter","mui-leave"],s=["mui-enter-active","mui-leave-active"],o={animateIn:function(t,e,n){i(!0,t,e,n)},animateOut:function(t,e,n){i(!1,t,e,n)}},a=function(t,e,i){function n(r){a||(a=window.performance.now()),o=r-a,i.apply(e),t>o?s=window.requestAnimationFrame(n,e):(window.cancelAnimationFrame(s),e.trigger("finished.zf.animate",[e]).triggerHandler("finished.zf.animate",[e]))}var s,o,a=null;s=window.requestAnimationFrame(n)};e.Move=a,e.Motion=o}(jQuery,Foundation),!function(t,e){"use strict";e.Nest={Feather:function(e,i){e.attr("role","menubar"),i=i||"zf";var n=e.find("li").attr({role:"menuitem"}),s="is-"+i+"-submenu",o=s+"-item",a="is-"+i+"-submenu-parent";n.each(function(){var e=t(this),i=e.children("ul");i.length&&(e.addClass("has-submenu "+a),i.addClass("submenu "+s).attr("data-submenu","")),e.parent("[data-submenu]").length&&e.addClass("is-submenu-item "+o)})},Burn:function(t,e){var i=(t.find("li").removeAttr("tabindex"),"is-"+e+"-submenu"),n=i+"-item",s="is-"+e+"-submenu-parent";t.find("*").removeClass(i+" "+n+" "+s+" has-submenu is-submenu-item submenu is-active").removeAttr("data-submenu").css("display","")}}}(jQuery,window.Foundation),!function(t,e){"use strict";var i=function(t,e,i){var n,s,o=this,a=e.duration,r=Object.keys(t.data())[0]||"timer",l=-1;this.restart=function(){l=-1,clearTimeout(s),this.start()},this.start=function(){clearTimeout(s),l=0>=l?a:l,t.data("paused",!1),n=Date.now(),s=setTimeout(function(){e.infinite&&o.restart(),i()},l),t.trigger("timerstart.zf."+r)},this.pause=function(){clearTimeout(s),t.data("paused",!0);var e=Date.now();l-=e-n,t.trigger("timerpaused.zf."+r)}},n=function(e,i){var n=e.length;0===n&&i();var s=function(){n--,0===n&&i()};e.each(function(){this.complete?s():"undefined"!=typeof this.naturalWidth&&this.naturalWidth>0?s():t(this).one("load",function(){s()})})};e.Timer=i,e.onImagesLoaded=n}(jQuery,window.Foundation),function(t){function e(){this.removeEventListener("touchmove",i),this.removeEventListener("touchend",e),d=!1}function i(i){if(t.spotSwipe.preventDefault&&i.preventDefault(),d){var n,s=i.touches[0].pageX,h=i.touches[0].pageY,u=o-s,c=a-h;l=(new Date).getTime()-r,Math.abs(u)>=t.spotSwipe.moveThreshold&&l<=t.spotSwipe.timeThreshold?n=u>0?"left":"right":Math.abs(c)>=t.spotSwipe.moveThreshold&&l<=t.spotSwipe.timeThreshold&&(n=c>0?"down":"up"),n&&(e.call(this),t(this).trigger("swipe",n).trigger("swipe"+n))}}function n(t){1==t.touches.length&&(o=t.touches[0].pageX,a=t.touches[0].pageY,d=!0,r=(new Date).getTime(),this.addEventListener("touchmove",i,!1),this.addEventListener("touchend",e,!1))}function s(){this.addEventListener&&this.addEventListener("touchstart",n,!1)}t.spotSwipe={version:"1.0.0",enabled:"ontouchstart"in document.documentElement,preventDefault:!0,moveThreshold:75,timeThreshold:200};var o,a,r,l,d=!1;t.event.special.swipe={setup:s},t.each(["left","up","down","right"],function(){t.event.special["swipe"+this]={setup:function(){t(this).on("swipe",t.noop)}}})}(jQuery),!function(t){t.fn.addTouch=function(){this.each(function(i,n){t(n).bind("touchstart touchmove touchend touchcancel",function(){e(event)})});var e=function(t){var e=t.changedTouches,i=e[0],n={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"},s=n[t.type],o=document.createEvent("MouseEvent");o.initMouseEvent(s,!0,!0,window,1,i.screenX,i.screenY,i.clientX,i.clientY,!1,!1,!1,!1,0,null),i.target.dispatchEvent(o)}}}(jQuery),!function(t,e){"use strict";e(document).on("click.zf.trigger","[data-open]",function(){var t=e(this).data("open");e("#"+t).triggerHandler("open.zf.trigger",[e(this)])}),e(document).on("click.zf.trigger","[data-close]",function(){var t=e(this).data("close");t?e("#"+t).triggerHandler("close.zf.trigger",[e(this)]):e(this).trigger("close.zf.trigger")}),e(document).on("click.zf.trigger","[data-toggle]",function(){var t=e(this).data("toggle");e("#"+t).triggerHandler("toggle.zf.trigger",[e(this)])}),e(document).on("close.zf.trigger","[data-closable]",function(){var i=e(this).data("closable")||"fade-out";t.Motion?t.Motion.animateOut(e(this),i,function(){e(this).trigger("closed.zf")}):e(this).fadeOut().trigger("closed.zf")});var i=function(){for(var t=["WebKit","Moz","O","Ms",""],e=0;e<t.length;e++)if(t[e]+"MutationObserver"in window)return window[t[e]+"MutationObserver"];return!1}(),n=function(){r(),o(),a(),s()};e(window).load(function(){n()});var s=function(t){var i=e("[data-yeti-box]"),n=["dropdown","tooltip","reveal"];if(t&&("string"==typeof t?n.push(t):"object"==typeof t&&"string"==typeof t[0]?n.concat(t):console.error("Plugin names must be strings")),i.length){var s=n.map(function(t){return"closeme.zf."+t}).join(" ");e(window).off(s).on(s,function(t,i){var n=t.namespace.split(".")[0],s=e("[data-"+n+"]").not('[data-yeti-box="'+i+'"]');s.each(function(){var t=e(this);t.triggerHandler("close.zf.trigger",[t])})})}},o=function(t){var n,s=e("[data-resize]");s.length&&e(window).off("resize.zf.trigger").on("resize.zf.trigger",function(o){n&&clearTimeout(n),n=setTimeout(function(){i||s.each(function(){e(this).triggerHandler("resizeme.zf.trigger")}),s.attr("data-events","resize")},t||10)})},a=function(t){var n,s=e("[data-scroll]");s.length&&e(window).off("scroll.zf.trigger").on("scroll.zf.trigger",function(o){n&&clearTimeout(n),n=setTimeout(function(){i||s.each(function(){e(this).triggerHandler("scrollme.zf.trigger")}),s.attr("data-events","scroll")},t||10)})},r=function(){if(!i)return!1;var t=document.querySelectorAll("[data-resize], [data-scroll], [data-mutate]"),n=function(t){var i=e(t[0].target);switch(i.attr("data-events")){case"resize":i.triggerHandler("resizeme.zf.trigger",[i]);break;case"scroll":i.triggerHandler("scrollme.zf.trigger",[i,window.pageYOffset]);break;default:return!1}};if(t.length)for(var s=0;s<=t.length-1;s++){var o=new i(n);o.observe(t[s],{attributes:!0,childList:!1,characterData:!1,subtree:!1,attributeFilter:["data-events"]})}};t.IHearYou=n}(window.Foundation,window.jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,this.$element.data(),s),this.$window=e(window),this.name="Abide",this.attr="data-abide",this._init(),this._events(),t.registerPlugin(this)}i.defaults={validateOn:"fieldChange",labelErrorClass:"is-invalid-label",inputErrorClass:"is-invalid-input",formErrorSelector:".form-error",formErrorClass:"is-visible",patterns:{alpha:/^[a-zA-Z]+$/,alpha_numeric:/^[a-zA-Z0-9]+$/,integer:/^[-+]?\d+$/,number:/^[-+]?\d*(?:[\.\,]\d+)?$/,card:/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,cvv:/^([0-9]){3,4}$/,email:/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,url:/^(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,domain:/^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,datetime:/^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,date:/(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,time:/^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,dateISO:/^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,month_day_year:/^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,day_month_year:/^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,color:/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/},validators:{equalTo:function(t,e,i){var n=document.getElementById(t.getAttribute(this.add_namespace("data-equalto"))).value,s=t.value,o=n===s;return o}}},i.prototype._init=function(){},i.prototype._events=function(){var t=this;this.$element.off(".abide").on("reset.fndtn.abide",function(i){t.resetForm(e(this))}).on("submit.fndtn.abide",function(e){e.preventDefault(),t.validateForm(t.$element)}).find("input, textarea, select").off(".abide").on("blur.fndtn.abide change.fndtn.abide",function(i){"fieldChange"===t.options.validateOn&&t.validateInput(e(i.target),t.$element)}).on("keydown.fndtn.abide",function(t){})},i.prototype._reflow=function(){},i.prototype.requiredCheck=function(t){switch(t[0].type){case"text":return t.attr("required")&&!t.val()?!1:!0;case"checkbox":return t.attr("required")&&!t.is(":checked")?!1:!0;case"radio":return t.attr("required")&&!t.is(":checked")?!1:!0;default:return!t.attr("required")||t.val()&&t.val().length&&!t.is(":empty")?!0:!1}},i.prototype.findLabel=function(t){return t.next("label").length?t.next("label"):t.closest("label")},i.prototype.addErrorClasses=function(t){var e=this,i=e.findLabel(t),n=t.next(e.options.formErrorSelector)||t.find(e.options.formErrorSelector);i&&i.addClass(e.options.labelErrorClass),n&&n.addClass(e.options.formErrorClass),t.addClass(e.options.inputErrorClass)},i.prototype.removeErrorClasses=function(t){var e=this,i=e.findLabel(t),n=t.next(e.options.formErrorSelector)||t.find(e.options.formErrorSelector);i&&i.hasClass(e.options.labelErrorClass)&&i.removeClass(e.options.labelErrorClass),n&&n.hasClass(e.options.formErrorClass)&&n.removeClass(e.options.formErrorClass),t.hasClass(e.options.inputErrorClass)&&t.removeClass(e.options.inputErrorClass)},i.prototype.validateInput=function(t,i){var n,s,o=this;i.find('input[type="text"]'),i.find('input[type="checkbox"]');"text"===t[0].type?o.requiredCheck(t)&&o.validateText(t)?(o.removeErrorClasses(t),t.trigger("valid.fndtn.abide",t[0])):(o.addErrorClasses(t),t.trigger("invalid.fndtn.abide",t[0])):"radio"===t[0].type?(s=t.attr("name"),n=t.siblings("label"),o.validateRadio(s)?(e(n).each(function(){e(this).hasClass(o.options.labelErrorClass)&&e(this).removeClass(o.options.labelErrorClass)}),t.trigger("valid.fndtn.abide",t[0])):(e(n).each(function(){e(this).addClass(o.options.labelErrorClass)}),t.trigger("invalid.fndtn.abide",t[0]))):"checkbox"===t[0].type?o.requiredCheck(t)?(o.removeErrorClasses(t),t.trigger("valid.fndtn.abide",t[0])):(o.addErrorClasses(t),t.trigger("invalid.fndtn.abide",t[0])):o.requiredCheck(t)&&o.validateText(t)?(o.removeErrorClasses(t),t.trigger("valid.fndtn.abide",t[0])):(o.addErrorClasses(t),t.trigger("invalid.fndtn.abide",t[0]))},i.prototype.validateForm=function(t){for(var i=this,n=t.find("input"),s=t.find("input").length,o=0;s>o;)i.validateInput(e(n[o]),t),o++;t.find(".form-error.is-visible").length||t.find(".is-invalid-label").length?t.find("[data-abide-error]").css("display","block"):t.find("[data-abide-error]").css("display","none")},i.prototype.validateText=function(t){var i=this.options.patterns,n=e(t).val(),s=e(t).attr("pattern");return 0===n.length?!0:n.match(i[s])?!0:!1},i.prototype.validateRadio=function(t){var i=this,n=(e(':radio[name="'+t+'"]').siblings("label"),0);return e(':radio[name="'+t+'"]').each(function(){i.requiredCheck(e(this))||n++,e(this).is(":checked")&&(n=0)}),n>0?!1:!0},i.prototype.matchValidation=function(t,e){},i.prototype.resetForm=function(t){var i=this,n="data-invalid";e("["+i.invalidAttr+"]",t).removeAttr(n),e("."+i.options.labelErrorClass,t).not("small").removeClass(i.options.labelErrorClass),e("."+i.options.inputErrorClass,t).not("small").removeClass(i.options.inputErrorClass),e(".form-error.is-visible").removeClass("is-visible"),t.find("[data-abide-error]").css("display","none"),e(":input",t).not(":button, :submit, :reset, :hidden, [data-abide-ignore]").val("").removeAttr(n)},i.prototype.destroy=function(){},t.plugin(i,"Abide"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this),e.Keyboard.register("Accordion",{ENTER:"toggle",SPACE:"toggle",ARROW_DOWN:"next",ARROW_UP:"previous"})}i.defaults={slideSpeed:250,multiExpand:!1,allowAllClosed:!1},i.prototype._init=function(){this.$element.attr("role","tablist"),this.$tabs=this.$element.children("li"),this.$tabs.each(function(i,n){var s=t(n),o=s.find("[data-tab-content]"),a=o[0].id||e.GetYoDigits(6,"accordion"),r=n.id||a+"-label";s.find("a:first").attr({"aria-controls":a,role:"tab",id:r,"aria-expanded":!1,"aria-selected":!1}),o.attr({role:"tabpanel","aria-labelledby":r,"aria-hidden":!0,id:a})});var i=this.$element.find(".is-active").children("[data-tab-content]");i.length&&this.down(i,!0),this._events()},i.prototype._events=function(){var i=this;this.$tabs.each(function(){var n=t(this),s=n.children("[data-tab-content]");s.length&&n.children("a").off("click.zf.accordion keydown.zf.accordion").on("click.zf.accordion",function(t){t.preventDefault(),n.hasClass("is-active")?(i.options.allowAllClosed||n.siblings().hasClass("is-active"))&&i.up(s):i.down(s)}).on("keydown.zf.accordion",function(t){e.Keyboard.handleKey(t,i,{toggle:function(){i.toggle(s)},next:function(){n.next().find("a").focus().trigger("click.zf.accordion")},previous:function(){n.prev().find("a").focus().trigger("click.zf.accordion")},handled:function(){t.preventDefault(),t.stopPropagation()}})})})},i.prototype.toggle=function(t){if(t.parent().hasClass("is-active")){if(!this.options.allowAllClosed&&!t.parent().siblings().hasClass("is-active"))return;this.up(t)}else this.down(t)},i.prototype.down=function(i,n){var s=this;if(!this.options.multiExpand&&!n){var o=this.$element.find(".is-active").children("[data-tab-content]");o.length&&this.up(o)}i.attr("aria-hidden",!1).parent("[data-tab-content]").addBack().parent().addClass("is-active"),e.Move(s.options.slideSpeed,i,function(){i.slideDown(s.options.slideSpeed)}),n||e._reflow(this.$element.attr("data-accordion")),t("#"+i.attr("aria-labelledby")).attr({"aria-expanded":!0,"aria-selected":!0}),this.$element.trigger("down.zf.accordion",[i])},i.prototype.up=function(i){var n=i.parent().siblings(),s=this,o=this.options.multiExpand?n.hasClass("is-active"):i.parent().hasClass("is-active");(this.options.allowAllClosed||o)&&(e.Move(this.options.slideSpeed,i,function(){i.slideUp(s.options.slideSpeed)}),i.attr("aria-hidden",!0).parent().removeClass("is-active"),t("#"+i.attr("aria-labelledby")).attr({"aria-expanded":!1,"aria-selected":!1}),this.$element.trigger("up.zf.accordion",[i]))},i.prototype.destroy=function(){this.$element.find("[data-tab-content]").slideUp(0).css("display",""),this.$element.find("a").off(".zf.accordion"),e.unregisterPlugin(this)},e.plugin(i,"Accordion")}(jQuery,window.Foundation),!function(t){"use strict";function e(i,n){this.$element=i,this.options=t.extend({},e.defaults,this.$element.data(),n),Foundation.Nest.Feather(this.$element,"accordion"),this._init(),Foundation.registerPlugin(this),Foundation.Keyboard.register("AccordionMenu",{ENTER:"toggle",SPACE:"toggle",ARROW_RIGHT:"open",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"close",ESCAPE:"closeAll",TAB:"down",SHIFT_TAB:"up"})}e.defaults={slideSpeed:250,multiOpen:!0},e.prototype._init=function(){this.$element.find("[data-submenu]").not(".is-active").slideUp(0),this.$element.attr({role:"tablist","aria-multiselectable":this.options.multiOpen}),this.$menuLinks=this.$element.find(".has-submenu"),this.$menuLinks.each(function(){var e=this.id||Foundation.GetYoDigits(6,"acc-menu-link"),i=t(this),n=i.children("[data-submenu]"),s=n[0].id||Foundation.GetYoDigits(6,"acc-menu"),o=n.hasClass("is-active");i.attr({"aria-controls":s,"aria-expanded":o,"aria-selected":!1,role:"tab",id:e}),n.attr({"aria-labelledby":e,"aria-hidden":!o,role:"tabpanel",id:s})});var e=this.$element.find(".is-active");if(e.length){var i=this;e.each(function(){i.down(t(this))})}this._events()},e.prototype._events=function(){var e=this;this.$element.find("li").each(function(){var i=t(this).children("[data-submenu]");i.length&&t(this).children("a").off("click.zf.accordionmenu").on("click.zf.accordionmenu",function(t){t.preventDefault(),e.toggle(i)})}).on("keydown.zf.accordionmenu",function(i){var n,s,o=t(this),a=o.parent("ul").children("li"),r=o.children("[data-submenu]");a.each(function(e){return t(this).is(o)?(n=a.eq(Math.max(0,e-1)),s=a.eq(Math.min(e+1,a.length-1)),t(this).children("[data-submenu]:visible").length&&(s=o.find("li:first-child")),t(this).is(":first-child")?n=o.parents("li").first():n.children("[data-submenu]:visible").length&&(n=n.find("li:last-child")),void(t(this).is(":last-child")&&(s=o.parents("li").first().next("li")))):void 0}),Foundation.Keyboard.handleKey(i,e,{open:function(){r.is(":hidden")&&(e.down(r),r.find("li").first().focus())},close:function(){r.length&&!r.is(":hidden")?e.up(r):o.parent("[data-submenu]").length&&(e.up(o.parent("[data-submenu]")),o.parents("li").first().focus())},up:function(){n.focus()},down:function(){s.focus()},toggle:function(){o.children("[data-submenu]").length&&e.toggle(o.children("[data-submenu]"))},closeAll:function(){e.hideAll()},handled:function(){i.preventDefault(),i.stopImmediatePropagation()}})})},e.prototype.hideAll=function(){this.$element.find("[data-submenu]").slideUp(this.options.slideSpeed)},e.prototype.toggle=function(t){t.is(":hidden")?this.down(t):this.up(t)},e.prototype.down=function(t){var e=this;console.log(t),this.options.multiOpen||this.up(this.$element.find(".is-active").not(t.parentsUntil(this.$element))),t.addClass("is-active").attr({"aria-hidden":!1}).parent(".has-submenu").attr({"aria-expanded":!0,"aria-selected":!0}),Foundation.Move(this.options.slideSpeed,t,function(){t.slideDown(e.options.slideSpeed)}),this.$element.trigger("down.zf.accordionMenu",[t])},e.prototype.up=function(t){var e=this;Foundation.Move(this.options.slideSpeed,t,function(){t.slideUp(e.options.slideSpeed)}),t.attr("aria-hidden",!0).find("[data-submenu]").slideUp(0).attr("aria-hidden",!0).end().parent(".has-submenu").attr({"aria-expanded":!1,"aria-selected":!1}),this.$element.trigger("up.zf.accordionMenu",[t])},e.prototype.destroy=function(){this.$element.find("[data-submenu]").slideDown(0).css("display",""),this.$element.find("a").off("click.zf.accordionMenu"),Foundation.Nest.Burn(this.$element,"accordion"),Foundation.unregisterPlugin(this)},Foundation.plugin(e,"AccordionMenu")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),e.Nest.Feather(this.$element,"drilldown"),this._init(),e.registerPlugin(this),e.Keyboard.register("Drilldown",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"previous",ESCAPE:"close",TAB:"down",SHIFT_TAB:"up"})}i.defaults={backButton:'<li class="js-drilldown-back" tabindex="0"><a>Back</a></li>',wrapper:"<div></div>",closeOnClick:!1},i.prototype._init=function(){this.$submenuAnchors=this.$element.find("li.has-submenu"),this.$submenus=this.$submenuAnchors.children("[data-submenu]").addClass("is-drilldown-sub"),this.$menuItems=this.$element.find("li").not(".js-drilldown-back").attr("role","menuitem"),this._prepareMenu(),this._keyboardEvents()},i.prototype._prepareMenu=function(){var e=this;this.$submenuAnchors.each(function(){var i=t(this);i.find("a")[0].removeAttribute("href"),i.children("[data-submenu]").attr({"aria-hidden":!0,tabindex:0,role:"menu"}),e._events(i)}),this.$submenus.each(function(){var i=t(this),n=i.find(".js-drilldown-back");n.length||(i.prepend(e.options.backButton),e._back(i))}),this.$element.parent().hasClass("is-drilldown")||(this.$wrapper=t(this.options.wrapper).addClass("is-drilldown").css(this._getMaxDims()),this.$element.wrap(this.$wrapper))},i.prototype._events=function(e){var i=this;e.off("click.zf.drilldown").on("click.zf.drilldown",function(n){if(n.stopImmediatePropagation(),n.preventDefault(),n.target!==n.currentTarget.firstElementChild)return!1;if(i._show(e),i.options.closeOnClick){var s=t("body").not(i.$wrapper);s.off(".zf.drilldown").on("click.zf.drilldown",function(t){t.preventDefault(),i._hideAll(),s.off(".zf.drilldown")})}})},i.prototype._keyboardEvents=function(){var i=this;this.$menuItems.add(this.$element.find(".js-drilldown-back")).on("keydown.zf.drilldown",function(n){var s,o,a=t(this),r=a.parent("ul").children("li");r.each(function(e){return t(this).is(a)?(s=r.eq(Math.max(0,e-1)),void(o=r.eq(Math.min(e+1,r.length-1)))):void 0}),e.Keyboard.handleKey(n,i,{next:function(){a.is(i.$submenuAnchors)&&(i._show(a),a.on(e.transitionend(a),function(){a.find("ul li").filter(i.$menuItems).first().focus()}))},previous:function(){i._hide(a.parent("ul")),a.parent("ul").on(e.transitionend(a),function(){setTimeout(function(){a.parent("ul").parent("li").focus()},1)})},up:function(){s.focus()},down:function(){o.focus()},close:function(){i._back()},open:function(){a.is(i.$menuItems)?a.is(i.$submenuAnchors)&&(i._show(a),setTimeout(function(){a.find("ul li").filter(i.$menuItems).first().focus()},1)):(i._hide(a.parent("ul")),setTimeout(function(){a.parent("ul").parent("li").focus()},1))},handled:function(){n.preventDefault(),n.stopImmediatePropagation()}})})},i.prototype._hideAll=function(){var t=this.$element.find(".is-drilldown-sub.is-active").addClass("is-closing");t.one(e.transitionend(t),function(e){t.removeClass("is-active is-closing")}),this.$element.trigger("closed.zf.drilldown")},i.prototype._back=function(t){
- var e=this;t.off("click.zf.drilldown"),t.children(".js-drilldown-back").on("click.zf.drilldown",function(i){i.stopImmediatePropagation(),e._hide(t)})},i.prototype._menuLinkEvents=function(){var t=this;this.$menuItems.not(".has-submenu").off("click.zf.drilldown").on("click.zf.drilldown",function(e){setTimeout(function(){t._hideAll()},0)})},i.prototype._show=function(t){t.children("[data-submenu]").addClass("is-active"),this.$element.trigger("open.zf.drilldown",[t])},i.prototype._hide=function(t){t.addClass("is-closing").one(e.transitionend(t),function(){t.removeClass("is-active is-closing")}),t.trigger("hide.zf.drilldown",[t])},i.prototype._getMaxDims=function(){var e=0,i={};return this.$submenus.add(this.$element).each(function(){var i=t(this).children("li").length;e=i>e?i:e}),i.height=e*this.$menuItems[0].getBoundingClientRect().height+"px",i.width=this.$element[0].getBoundingClientRect().width+"px",i},i.prototype.destroy=function(){this._hideAll(),e.Nest.Burn(this.$element,"drilldown"),this.$element.unwrap().find(".js-drilldown-back").remove().end().find(".is-active, .is-closing, .is-drilldown-sub").removeClass("is-active is-closing is-drilldown-sub").end().find("[data-submenu]").removeAttr("aria-hidden tabindex role").off(".zf.drilldown").end().off("zf.drilldown"),e.unregisterPlugin(this)},e.plugin(i,"Drilldown")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this),e.Keyboard.register("Dropdown",{ENTER:"open",SPACE:"open",ESCAPE:"close",TAB:"tab_forward",SHIFT_TAB:"tab_backward"})}i.defaults={hoverDelay:250,hover:!1,vOffset:1,hOffset:1,positionClass:"",trapFocus:!1},i.prototype._init=function(){var i=this.$element.attr("id");this.$anchor=t('[data-toggle="'+i+'"]')||t('[data-open="'+i+'"]'),this.$anchor.attr({"aria-controls":i,"data-is-focus":!1,"data-yeti-box":i,"aria-haspopup":!0,"aria-expanded":!1}),this.options.positionClass=this.getPositionClass(),this.counter=4,this.usedPositions=[],this.$element.attr({"aria-hidden":"true","data-yeti-box":i,"data-resize":i,"aria-labelledby":this.$anchor[0].id||e.GetYoDigits(6,"dd-anchor")}),this._events()},i.prototype.getPositionClass=function(){var t=this.$element[0].className.match(/(top|left|right)/g);return t=t?t[0]:""},i.prototype._reposition=function(t){this.usedPositions.push(t?t:"bottom"),!t&&this.usedPositions.indexOf("top")<0?this.$element.addClass("top"):"top"===t&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(t):"left"===t&&this.usedPositions.indexOf("right")<0?this.$element.removeClass(t).addClass("right"):"right"===t&&this.usedPositions.indexOf("left")<0?this.$element.removeClass(t).addClass("left"):!t&&this.usedPositions.indexOf("top")>-1&&this.usedPositions.indexOf("left")<0?this.$element.addClass("left"):"top"===t&&this.usedPositions.indexOf("bottom")>-1&&this.usedPositions.indexOf("left")<0?this.$element.removeClass(t).addClass("left"):"left"===t&&this.usedPositions.indexOf("right")>-1&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(t):"right"===t&&this.usedPositions.indexOf("left")>-1&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(t):this.$element.removeClass(t),this.classChanged=!0,this.counter--},i.prototype._setPosition=function(){if("false"===this.$anchor.attr("aria-expanded"))return!1;var t=this.getPositionClass(),i=e.Box.GetDimensions(this.$element),n=(e.Box.GetDimensions(this.$anchor),"left"===t?"left":"right"===t?"left":"top"),s="top"===n?"height":"width";"height"===s?this.options.vOffset:this.options.hOffset;if(i.width>=i.windowDims.width||!this.counter&&!e.Box.ImNotTouchingYou(this.$element))return this.$element.offset(e.Box.GetOffsets(this.$element,this.$anchor,"center bottom",this.options.vOffset,this.options.hOffset,!0)).css({width:i.windowDims.width-2*this.options.hOffset,height:"auto"}),this.classChanged=!0,!1;for(this.$element.offset(e.Box.GetOffsets(this.$element,this.$anchor,t,this.options.vOffset,this.options.hOffset));!e.Box.ImNotTouchingYou(this.$element)&&this.counter;)this._reposition(t),this._setPosition()},i.prototype._events=function(){var t=this;this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"resizeme.zf.trigger":this._setPosition.bind(this)}),this.options.hover&&this.$anchor.off("mouseenter.zf.dropdown mouseleave.zf.dropdown").on("mouseenter.zf.dropdown",function(){console.log("hover"),clearTimeout(t.timeout),t.timeOut=setTimeout(function(){t.open(),t.$anchor.data("hover",!0)},t.options.hoverDelay)}).on("mouseleave.zf.dropdown",function(){clearTimeout(t.timeout),t.timeOut=setTimeout(function(){t.close(),t.$anchor.data("hover",!1)},t.options.hoverDelay)}),this.$anchor.add(this.$element).on("keydown.zf.dropdown",function(i){var n=e.Keyboard.findFocusable(t.$element);e.Keyboard.handleKey(i,t,{tab_forward:function(){this.$element.find(":focus").is(n.eq(-1))&&(this.options.trapFocus?(n.eq(0).focus(),i.preventDefault()):this.close())},tab_backward:function(){(this.$element.find(":focus").is(n.eq(0))||this.$element.is(":focus"))&&(this.options.trapFocus?(n.eq(-1).focus(),i.preventDefault()):this.close())},open:function(){t.open(),t.$element.attr("tabindex",-1).focus()},close:function(){t.close(),t.$anchor.focus()}})})},i.prototype.open=function(){this.$element.trigger("closeme.zf.dropdown",this.$element.attr("id")),this.$anchor.addClass("hover").attr({"aria-expanded":!0}),this._setPosition(),this.$element.addClass("is-open").attr({"aria-hidden":!1}),this.$element.trigger("show.zf.dropdown",[this.$element])},i.prototype.close=function(){if(!this.$element.hasClass("is-open"))return!1;if(this.$element.removeClass("is-open").attr({"aria-hidden":!0}),this.$anchor.removeClass("hover").attr("aria-expanded",!1),this.classChanged){var t=this.getPositionClass();t&&this.$element.removeClass(t),this.$element.addClass(this.options.positionClass).css({height:"",width:""}),this.classChanged=!1,this.counter=4,this.usedPositions.length=0}this.$element.trigger("hide.zf.dropdown",[this.$element])},i.prototype.toggle=function(){if(this.$element.hasClass("is-open")){if(this.$anchor.data("hover"))return;this.close()}else this.open()},i.prototype.destroy=function(){this.$element.off(".zf.trigger").hide(),this.$anchor.off(".zf.dropdown"),e.unregisterPlugin(this)},e.plugin(i,"Dropdown")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,this.$element.data(),s),t.Nest.Feather(this.$element,"dropdown"),this._init(),t.registerPlugin(this),t.Keyboard.register("DropdownMenu",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"previous",ESCAPE:"close"})}i.defaults={clickOpen:!0,closeOnClick:!1,disableHover:!1,autoclose:!0,hoverDelay:150,closingTime:500,alignment:"left",verticalClass:"vertical",rightClass:"align-right"},i.prototype._init=function(){this.$element.hasClass(this.options.verticalClass)&&(this.vertical=!0),this._prepareMenu()},i.prototype._prepareMenu=function(){var t=this;this.$tabs=this.$element.children("li.has-submenu"),this.$tabs.children("[data-submenu]").addClass("first-sub"),this.$submenus=this.$element.find("li.has-submenu"),this.$menuItems=this.$element.find("li").attr({role:"menuitem",tabindex:0}),this.$menuItems.children("a").attr("tabindex",-1),this.$element.hasClass(this.options.rightClass)?(this.options.alignment="right",this.$submenus.addClass("is-left-arrow opens-left")):this.$submenus.addClass("is-right-arrow opens-right"),this.vertical||this.$tabs.removeClass("is-right-arrow is-left-arrow opens-left opens-right").addClass("is-down-arrow"),this.$tabs.each(function(){var t=e(this);t.attr({role:"menuitem",tabindex:0,"aria-label":t.children("a:first-child").text()}).children("a").attr("tabindex",-1),t.children("[data-submenu]")&&t.attr("aria-haspopup",!0)}),this.$submenus.each(function(){var i=e(this);i.children("[data-submenu]").attr({"aria-hidden":!0,tabindex:-1,role:"menu"}).addClass("vertical"),t._events(i)})},i.prototype._events=function(i){var n=this,s=void 0!==window.ontouchstart;(this.options.clickOpen||s)&&i.off("click.zf.dropdownmenu").on("click.zf.dropdownmenu",function(t){if(e(this).hasClass("is-dropdown-submenu-parent")){var o=i.data("isClick");s&&o||(t.preventDefault(),t.stopPropagation(),o?n._hide(i):(n._hideOthers(i),n._show(i),i.data("isClick",!0).parentsUntil("[data-dropdown-menu]",".is-dropdown-submenu-parent").data("isClick",!0),n.options.closeOnClick&&n._addBodyHandler()))}}),this.options.disableHover||(this.$menuItems.on("mouseenter.zf.dropdownmenu",function(t){var i=e(this);i.hasClass("is-active")||n._hideOthers(i)}),i.off("mouseenter.zf.dropdownmenu").on("mouseenter.zf.dropdownmenu",function(t){clearTimeout(i.closeTimer),i.hasClass("is-active")||(i.openTimer=setTimeout(function(){n._show(i)},n.options.hoverDelay))}).on("mouseleave.zf.dropdownmenu",function(t){!i.data("isClick")&&n.options.autoclose&&(clearTimeout(i.openTimer),i.closeTimer=setTimeout(function(){n._hide(i)},n.options.closingTime))})),this.$menuItems.on("keydown.zf.dropdownmenu",function(i){var s,o,a=e(this),r=n.$element.children("li"),l=a.is(r),d=l?r:a.parents("li").first().add(a.parent("ul").children("li"));d.each(function(t){return e(this).is(a)?(s=d.eq(t-1),void(o=d.eq(t+1))):void 0});var h=function(){a.is(":last-child")||o.focus()},u=function(){s.focus()},c=function(){a.has("ul").length&&(n._show(a),a.find("li").first().focus())},f=function(){a.parents("li").first().focus(),n._hide(a.parents("li").first())},p={open:c,close:function(){n._hideAll(),n.$menuItems.first().focus()},handled:function(){i.preventDefault(),i.stopImmediatePropagation()}};l?n.vertical?"left"===n.options.alignment?e.extend(p,{down:h,up:u,next:c,previous:f}):e.extend(p,{down:h,up:u,next:f,previous:c}):e.extend(p,{next:h,previous:u,down:c,up:f}):"left"===n.options.alignment?e.extend(p,{next:c,previous:f,down:h,up:u}):e.extend(p,{next:f,previous:c,down:h,up:u}),t.Keyboard.handleKey(i,n,p)})},i.prototype._toggle=function(t){t.hasClass("is-active")?this._hide(t):this._show(t)},i.prototype._addBodyHandler=function(){var t=e("body"),i=this;t.not(i.$element).on("click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu",function(e){i._hideAll(),t.off("click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu")})},i.prototype._show=function(e){this._hideOthers(e),e.focus();var i=e.children("[data-submenu]:first-of-type");e.addClass("is-active"),i.css("visibility","hidden").addClass("js-dropdown-active").attr("aria-hidden",!1);var n=t.Box.ImNotTouchingYou(i,null,!0);n||("left"===this.options.alignment?e.removeClass("opens-left").addClass("opens-right"):e.removeClass("opens-right").addClass("opens-left"),this.changed=!0,n=t.Box.ImNotTouchingYou(i,null,!0),n||(e.removeClass("opens-left opens-right").addClass("opens-inner"),this.changed=!0)),i.css("visibility",""),this.$element.trigger("show.zf.dropdownmenu",[e])},i.prototype._hide=function(t){this._hideSome(t)},i.prototype._hideSome=function(t){t.length&&(t.removeClass("is-active opens-inner").data("isClick",!1).find(".is-active").removeClass("is-active").data("isClick",!1).end().find(".js-dropdown-active").removeClass("js-dropdown-active").attr("aria-hidden",!0),t.parent(".has-submenu").removeClass("is-active"),this.changed&&("left"===this.options.alignment?t.find(".opens-left").removeClass("opens-left").addClass("opens-right"):t.find(".opens-right").removeClass("opens-right").addClass("opens-left")),this.$element.trigger("hide.zf.dropdownmenu"))},i.prototype._hideOthers=function(t){this._hideSome(t.siblings(".has-submenu.is-active"))},i.prototype._hideAll=function(){this._hideSome(this.$element)},i.prototype.destroy=function(){this._hideAll(),this.$element.removeData("zf-plugin").find("li").removeClass("js-dropdown-nohover is-right-arrow is-left-arrow opens-left opens-inner opens-right").add("a").off(".zf.dropdownmenu").end().find("ul").removeClass("first-sub"),t.Nest.Burn(this.$element,"dropdown"),t.unregisterPlugin(this)},t.plugin(i,"DropdownMenu")}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,this.$element.data(),s),this.$window=e(window),this.name="equalizer",this.attr="data-equalizer",this._init(),this._events(),t.registerPlugin(this)}i.defaults={equalizeOnStack:!0,throttleInterval:50},i.prototype._init=function(){this._reflow()},i.prototype._events=function(){var e=this;this.$window.off(".equalizer").on("resize.fndtn.equalizer",t.util.throttle(function(){e._reflow()},e.options.throttleInterval))},i.prototype._killswitch=function(){},i.prototype._reflow=function(){var i=this;e("["+this.attr+"]").each(function(){var n=e(this),s=[],o=n.find("img");o.length?t.onImagesLoaded(o,function(){s=i.getHeights(n),i.applyHeight(n,s)}):(s=i.getHeights(n),i.applyHeight(n,s))})},i.prototype.getHeights=function(t){var i,n=t.data("equalizer"),s=n?t.find("["+this.attr+'-watch="'+n+'"]:visible'):t.find("["+this.attr+"-watch]:visible");return s.height("inherit"),i=s.map(function(){return e(this).outerHeight(!1)}).get(),console.log(i),i},i.prototype.applyHeight=function(t,i){var n=t.data("equalizer"),s=n?t.find("["+this.attr+'-watch="'+n+'"]:visible'):t.find("["+this.attr+"-watch]:visible"),o=Math.max.apply(null,i);t.trigger("preEqualized.zf.Equalizer");for(var a=0;a<s.length;a++)e(s[a]).css("height",o);t.trigger("postEqualized.zf.Equalizer")},i.prototype.destroy=function(){},t.plugin(i,"Equalizer"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,s),this.rules=[],this.currentPath="",this._init(),this._events(),t.registerPlugin(this)}i.defaults={rules:null},i.SPECIAL_QUERIES={landscape:"screen and (orientation: landscape)",portrait:"screen and (orientation: portrait)",retina:"only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)"},i.prototype._init=function(){this._addBreakpoints(),this._generateRules(),this._reflow()},i.prototype._events=function(){e(window).on("resize.fndtn.interchange",t.util.throttle(this._reflow.bind(this),50))},i.prototype._reflow=function(){var t;for(var e in this.rules){var i=this.rules[e];window.matchMedia(i.query).matches&&(t=i)}t&&this.replace(t.path)},i.prototype._addBreakpoints=function(){for(var e in t.MediaQuery.queries){var n=t.MediaQuery.queries[e];i.SPECIAL_QUERIES[n.name]=n.value}},i.prototype._generateRules=function(){var t,e=[];t=this.options.rules?this.options.rules:this.$element.data("interchange").match(/\[.*?\]/g);for(var n in t){var s=t[n].slice(1,-1).split(", "),o=s.slice(0,-1).join(""),a=s[s.length-1];i.SPECIAL_QUERIES[a]&&(a=i.SPECIAL_QUERIES[a]),e.push({path:o,query:a})}this.rules=e},i.prototype.replace=function(t){if(this.currentPath!==t){var i=this;"IMG"===this.$element[0].nodeName?this.$element.attr("src",t).load(function(){i.$element.trigger("replaced.zf.interchange"),i.currentPath=t}):t.match(/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i)?this.$element.css({"background-image":"url("+t+")"}):e.get(t,function(e){i.$element.html(e),i.$element.trigger("replaced.zf.interchange"),i.currentPath=t})}},i.prototype.destroy=function(){},t.plugin(i,"Interchange"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,s),this._init(),t.registerPlugin(this)}i.defaults={animationDuration:500,animationEasing:"linear",threshold:50,activeClass:"active",deepLinking:!1},i.prototype._init=function(){var i=this.$element[0].id||t.GetYoDigits(6,"magellan");this.$targets=e("[data-magellan-target]"),this.$links=this.$element.find("a"),this.$element.attr({"data-resize":i,"data-scroll":i,id:i}),this.$active=e(),this.scrollPos=parseInt(window.pageYOffset,10),this._events()},i.prototype.calcPoints=function(){var t=this,i=document.body,n=document.documentElement;this.points=[],this.winHeight=Math.round(Math.max(window.innerHeight,document.body.clientHeight)),this.docHeight=Math.round(Math.max(i.scrollHeight,i.offsetHeight,n.clientHeight,n.scrollHeight,n.offsetHeight)),this.$targets.each(function(){var i=e(this),n=Math.round(i.offset().top-t.options.threshold);i.targetPoint=n,t.points.push(n)})},i.prototype._events=function(){var t=this,i=e("html, body"),n={duration:t.options.animationDuration,easing:t.options.animationEasing};e(window).one("load",function(){t.calcPoints(),t._updateActive()}),this.$element.on({"resizeme.zf.trigger":this.reflow.bind(this),"scrollme.zf.trigger":this._updateActive.bind(this)}).on("click.zf.magellan",'a[href^="#"]',function(s){s.preventDefault();var o=this.getAttribute("href"),a=e(o).offset().top-t.options.threshold/2;i.stop(!0).animate({scrollTop:a},n)})},i.prototype.reflow=function(){this.calcPoints(),this._updateActive()},i.prototype._updateActive=function(){var t,e=parseInt(window.pageYOffset,10);if(e+this.winHeight===this.docHeight)t=this.points.length-1;else if(e<this.points[0])t=0;else{var i=this.scrollPos<e,n=this,s=this.points.filter(function(t,s){return i?e>=t:t-n.options.threshold<=e});t=s.length?s.length-1:0}if(this.$active.removeClass(this.options.activeClass),this.$active=this.$links.eq(t).addClass(this.options.activeClass),this.options.deepLinking){var o=this.$active[0].getAttribute("href");window.history.pushState?window.history.pushState(null,null,o):window.location.hash=o}this.scrollPos=e,this.$element.trigger("update.zf.magellan",[this.$active])},i.prototype.destroy=function(){this.$element.off(".zf.trigger .zf.magellan").find("."+this.options.activeClass).removeClass(this.options.activeClass);var e=this.$active[0].getAttribute("href");window.location.hash.replace(e,""),t.unregisterPlugin(this)},t.plugin(i,"Magellan"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this.$lastTrigger=t(),this._init(),this._events(),e.registerPlugin(this)}i.defaults={closeOnClick:!0,transitionTime:0,position:"left",forceTop:!0,isRevealed:!1,revealOn:null,autoFocus:!0,revealClass:"reveal-for-"},i.prototype._init=function(){var e=this.$element.attr("id");if(this.$element.attr("aria-hidden","true"),t(document).find('[data-open="'+e+'"], [data-close="'+e+'"], [data-toggle="'+e+'"]').attr("aria-expanded","false").attr("aria-controls",e),this.options.closeOnClick)if(t(".js-off-canvas-exit").length)this.$exiter=t(".js-off-canvas-exit");else{var i=document.createElement("div");i.setAttribute("class","js-off-canvas-exit"),t("[data-off-canvas-content]").append(i),this.$exiter=t(i)}this.options.isRevealed=this.options.isRevealed||new RegExp(this.options.revealClass,"g").test(this.$element[0].className),this.options.isRevealed&&(this.options.revealOn=this.options.revealOn||this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split("-")[2],this._setMQChecker()),this.options.transitionTime||(this.options.transitionTime=1e3*parseFloat(window.getComputedStyle(t("[data-off-canvas-wrapper]")[0]).transitionDuration))},i.prototype._events=function(){if(this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"keydown.zf.offcanvas":this._handleKeyboard.bind(this)}),this.$exiter.length){this.$exiter.on({"click.zf.offcanvas":this.close.bind(this)})}},i.prototype._setMQChecker=function(){var i=this;t(window).on("changed.zf.mediaquery",function(){e.MediaQuery.atLeast(i.options.revealOn)?i.reveal(!0):i.reveal(!1)}).one("load.zf.offcanvas",function(){e.MediaQuery.atLeast(i.options.revealOn)&&i.reveal(!0)})},i.prototype.reveal=function(t){var e=this.$element.find("[data-close]");t?e.length&&e.hide():e.length&&e.show()},i.prototype.open=function(i,n){if(!this.$element.hasClass("is-open")){var s=this;t(document.body);t("body").scrollTop(0),e.Move(this.options.transitionTime,this.$element,function(){t("[data-off-canvas-wrapper]").addClass("is-off-canvas-open is-open-"+s.options.position),s.$element.addClass("is-open").attr("aria-hidden","false").trigger("opened.zf.offcanvas")}),n&&(this.$lastTrigger=n.attr("aria-expanded","true")),this.options.autoFocus&&this.$element.one("finished.zf.animate",function(){s.$element.find("a, button").eq(0).focus()})}},i.prototype.close=function(){if(this.$element.hasClass("is-open")){var i=this;e.Move(this.options.transitionTime,this.$element,function(){t("[data-off-canvas-wrapper]").removeClass("is-off-canvas-open is-open-"+i.options.position),i.$element.removeClass("is-open")}),this.$element.attr("aria-hidden","true").trigger("closed.zf.offcanvas"),this.$lastTrigger.attr("aria-expanded","false")}},i.prototype.toggle=function(t,e){this.$element.hasClass("is-open")?this.close(t,e):this.open(t,e)},i.prototype._handleKeyboard=function(t){27===t.which&&(t.stopPropagation(),t.preventDefault(),this.close(),this.$lastTrigger.focus())},i.prototype.destroy=function(){},e.plugin(i,"OffCanvas")}(jQuery,Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this),e.Keyboard.register("Orbit",{ltr:{ARROW_RIGHT:"next",ARROW_LEFT:"previous"},rtl:{ARROW_LEFT:"next",ARROW_RIGHT:"previous"}})}i.defaults={bullets:!0,navButtons:!0,animInFromRight:"slide-in-right",animOutToRight:"slide-out-right",animInFromLeft:"slide-in-left",animOutToLeft:"slide-out-left",autoPlay:!0,timerDelay:5e3,infiniteWrap:!0,swipe:!0,pauseOnHover:!0,accessible:!0,containerClass:"orbit-container",slideClass:"orbit-slide",boxOfBullets:"orbit-bullets",nextClass:"orbit-next",prevClass:"orbit-previous"},i.prototype._init=function(){this.$wrapper=this.$element.find("."+this.options.containerClass),this.$slides=this.$element.find("."+this.options.slideClass);var t=this.$element.find("img"),i=this.$slides.filter(".is-active");i.length||this.$slides.eq(0).addClass("is-active"),t.length?e.onImagesLoaded(t,this._prepareForOrbit.bind(this)):this._prepareForOrbit(),this.options.bullets&&this._loadBullets(),this._events(),this.options.autoPlay&&this.geoSync(),this.options.accessible&&this.$wrapper.attr("tabindex",0)},i.prototype._loadBullets=function(){this.$bullets=this.$element.find("."+this.options.boxOfBullets).find("button")},i.prototype.geoSync=function(){var t=this;this.timer=new e.Timer(this.$element,{duration:this.options.timerDelay,infinite:!1},function(){t.changeSlide(!0)}),this.timer.start()},i.prototype._prepareForOrbit=function(){var t=this;this._setWrapperHeight(function(e){t._setSlideHeight(e)})},i.prototype._setWrapperHeight=function(e){var i,n=0,s=0;this.$slides.each(function(){i=this.getBoundingClientRect().height,t(this).attr("data-slide",s),s&&t(this).css({position:"relative",display:"none"}),n=i>n?i:n,s++}),s===this.$slides.length&&(this.$wrapper.css({height:n}),e(n))},i.prototype._setSlideHeight=function(e){this.$slides.each(function(){t(this).css("max-height",e)})},i.prototype._events=function(){var i=this;if(this.options.swipe&&this.$slides.off("swipeleft.zf.orbit swiperight.zf.orbit").on("swipeleft.zf.orbit",function(t){t.preventDefault(),i.changeSlide(!0)}).on("swiperight.zf.orbit",function(t){t.preventDefault(),i.changeSlide(!1)}),this.options.autoPlay&&(this.$slides.on("click.zf.orbit",function(){i.$element.data("clickedOn",i.$element.data("clickedOn")?!1:!0),i.timer[i.$element.data("clickedOn")?"pause":"start"]()}),this.options.pauseOnHover&&this.$element.on("mouseenter.zf.orbit",function(){i.timer.pause()}).on("mouseleave.zf.orbit",function(){i.$element.data("clickedOn")||i.timer.start()})),this.options.navButtons){var n=this.$element.find("."+this.options.nextClass+", ."+this.options.prevClass);n.attr("tabindex",0).on("click.zf.orbit touchend.zf.orbit",function(){i.changeSlide(t(this).hasClass(i.options.nextClass))})}this.options.bullets&&this.$bullets.on("click.zf.orbit touchend.zf.orbit",function(){if(/is-active/g.test(this.className))return!1;var e=t(this).data("slide"),n=e>i.$slides.filter(".is-active").data("slide"),s=i.$slides.eq(e);i.changeSlide(n,s,e)}),this.$wrapper.add(this.$bullets).on("keydown.zf.orbit",function(n){e.Keyboard.handleKey(n,i,{next:function(){i.changeSlide(!0)},previous:function(){i.changeSlide(!1)},handled:function(){t(n.target).is(i.$bullets)&&i.$bullets.filter(".is-active").focus()}})})},i.prototype.changeSlide=function(t,i,n){var s=this.$slides.filter(".is-active").eq(0);if(/mui/g.test(s[0].className))return!1;var o,a=this.$slides.first(),r=this.$slides.last(),l=t?"Right":"Left",d=t?"Left":"Right",h=this;o=i?i:t?this.options.infiniteWrap?s.next("."+this.options.slideClass).length?s.next("."+this.options.slideClass):a:s.next("."+this.options.slideClass):this.options.infiniteWrap?s.prev("."+this.options.slideClass).length?s.prev("."+this.options.slideClass):r:s.prev("."+this.options.slideClass),o.length&&(this.options.bullets&&(n=n||this.$slides.index(o),this._updateBullets(n)),e.Motion.animateIn(o.addClass("is-active").css({position:"absolute",top:0}),this.options["animInFrom"+l],function(){o.css({position:"relative",display:"block"}).attr("aria-live","polite")}),e.Motion.animateOut(s.removeClass("is-active"),this.options["animOutTo"+d],function(){s.removeAttr("aria-live"),h.options.autoPlay&&h.timer.restart(),h.$element.trigger("slidechange.zf.orbit",[o])}))},i.prototype._updateBullets=function(t){var e=this.$element.find("."+this.options.boxOfBullets).find(".is-active").removeClass("is-active").blur(),i=e.find("span:last").detach();this.$bullets.eq(t).addClass("is-active").append(i)},i.prototype.destroy=function(){delete this.timer,this.$element.off(".zf.orbit").find("*").off(".zf.orbit").end().hide(),e.unregisterPlugin(this)},e.plugin(i,"Orbit")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(i){this.$element=e(i),this.rules=this.$element.data("responsive-menu"),this.currentMq=null,this.currentPlugin=null,this._init(),this._events(),t.registerPlugin(this)}var n={dropdown:{cssClass:"dropdown",plugin:t._plugins["dropdown-menu"]||null},drilldown:{cssClass:"drilldown",plugin:t._plugins.drilldown||null},accordion:{cssClass:"accordion-menu",plugin:t._plugins["accordion-menu"]||null}};i.defaults={},i.prototype._init=function(){for(var t={},i=this.rules.split(" "),s=0;s<i.length;s++){var o=i[s].split("-"),a=o.length>1?o[0]:"small",r=o.length>1?o[1]:o[0];null!==n[r]&&(t[a]=n[r])}this.rules=t,e.isEmptyObject(t)||this._checkMediaQueries()},i.prototype._events=function(){var t=this;e(window).on("changed.zf.mediaquery",function(){t._checkMediaQueries()})},i.prototype._checkMediaQueries=function(){var i,s=this;e.each(this.rules,function(e){t.MediaQuery.atLeast(e)&&(i=e)}),i&&(this.currentPlugin instanceof this.rules[i].plugin||(e.each(n,function(t,e){s.$element.removeClass(e.cssClass)}),this.$element.addClass(this.rules[i].cssClass),this.currentPlugin&&this.currentPlugin.destroy(),this.currentPlugin=new this.rules[i].plugin(this.$element,{})))},i.prototype.destroy=function(){this.currentPlugin.destroy(),e(window).off(".zf.ResponsiveMenu"),t.unregisterPlugin(this)},t.plugin(i,"ResponsiveMenu")}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=t(n),this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),this._events(),e.registerPlugin(this)}i.defaults={hideFor:"medium"},i.prototype._init=function(){var e=this.$element.data("responsive-toggle");e||console.error("Your tab bar needs an ID of a Menu as the value of data-tab-bar."),this.$targetMenu=t("#"+e),this.$toggler=this.$element.find("[data-toggle]"),this._update()},i.prototype._events=function(){t(window).on("changed.zf.mediaquery",this._update.bind(this)),this.$toggler.on("click.zf.responsiveToggle",this.toggleMenu.bind(this))},i.prototype._update=function(){e.MediaQuery.atLeast(this.options.hideFor)?(this.$element.hide(),this.$targetMenu.show()):(this.$element.show(),this.$targetMenu.hide())},i.prototype.toggleMenu=function(){e.MediaQuery.atLeast(this.options.hideFor)||(this.$targetMenu.toggle(0),this.$element.trigger("toggled.zf.responsiveToggle"))},i.prototype.destroy=function(){},e.plugin(i,"ResponsiveToggle")}(jQuery,Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,this.$element.data(),s),this._init(),t.registerPlugin(this),t.Keyboard.register("Reveal",{ENTER:"open",SPACE:"open",ESCAPE:"close",TAB:"tab_forward",SHIFT_TAB:"tab_backward"})}i.defaults={animationIn:"",animationOut:"",showDelay:0,hideDelay:0,closeOnClick:!0,closeOnEsc:!0,multipleOpened:!1,vOffset:100,hOffset:0,fullScreen:!1,btmOffsetPct:10,overlay:!0,resetOnClose:!1},i.prototype._init=function(){if(this.id=this.$element.attr("id"),this.isActive=!1,this.$anchor=e(e('[data-open="'+this.id+'"]').length?'[data-open="'+this.id+'"]':'[data-toggle="'+this.id+'"]'),this.$anchor.length){var i=this.$anchor[0].id||t.GetYoDigits(6,"reveal");this.$anchor.attr({"aria-controls":this.id,id:i,"aria-haspopup":!0,tabindex:0}),this.$element.attr({"aria-labelledby":i})}(this.options.fullScreen||this.$element.hasClass("full"))&&(this.options.fullScreen=!0,this.options.overlay=!1),this.options.overlay&&(this.$overlay=this._makeOverlay(this.id)),this.$element.attr({role:"dialog","aria-hidden":!0,"data-yeti-box":this.id,"data-resize":this.id}),this._events()},i.prototype._makeOverlay=function(t){var i=e("<div></div>").addClass("reveal-overlay").attr({tabindex:-1,"aria-hidden":!0}).appendTo("body");return this.options.closeOnClick&&i.attr({"data-close":t}),i},i.prototype._events=function(){var t=this;this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"resizeme.zf.trigger":function(){t.$element.is(":visible")&&t._setPosition(function(){})}}),this.$anchor.length&&this.$anchor.on("keydown.zf.reveal",function(e){(13===e.which||32===e.which)&&(e.stopPropagation(),e.preventDefault(),t.open())}),this.options.closeOnClick&&this.options.overlay&&this.$overlay.off(".zf.reveal").on("click.zf.reveal",this.close.bind(this))},i.prototype._setPosition=function(e){var i=t.Box.GetDimensions(this.$element),n=this.options.fullScreen?"reveal full":i.height>=.5*i.windowDims.height?"reveal":"center";"reveal full"===n?(console.log("full"),this.$element.offset(t.Box.GetOffsets(this.$element,null,n,this.options.vOffset)).css({height:i.windowDims.height,width:i.windowDims.width})):t.MediaQuery.atLeast("medium")&&t.Box.ImNotTouchingYou(this.$element,null,!0,!1)?this.$element.css({"max-height":i.windowDims.height-this.options.vOffset*(this.options.btmOffsetPct/100+1),width:""}).offset(t.Box.GetOffsets(this.$element,null,n,this.options.vOffset)):(this.$element.css({width:i.windowDims.width-2*this.options.hOffset}).offset(t.Box.GetOffsets(this.$element,null,"center",this.options.vOffset,this.options.hOffset)),this.changedSize=!0),e()},i.prototype.open=function(){var i=this;this.isActive=!0,this.$element.css({visibility:"hidden"}).show().scrollTop(0),this._setPosition(function(){i.$element.hide().css({visibility:""}),i.options.multipleOpened||i.$element.trigger("closeme.zf.reveal",i.id),i.options.animationIn?i.options.overlay?t.Motion.animateIn(i.$overlay,"fade-in",function(){t.Motion.animateIn(i.$element,i.options.animationIn,function(){})}):t.Motion.animateIn(i.$element,i.options.animationIn,function(){}):i.options.overlay?i.$overlay.show(0,function(){
- i.$element.show(i.options.showDelay,function(){})}):i.$element.show(i.options.showDelay,function(){})}),this.$element.attr({"aria-hidden":!1}).attr("tabindex",-1).focus().trigger("open.zf.reveal"),e("body").addClass("is-reveal-open").attr({"aria-hidden":this.options.overlay||this.options.fullScreen?!0:!1}),setTimeout(function(){i._extraHandlers()},0)},i.prototype._extraHandlers=function(){var i=this,n=this.$element.find("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]").filter(function(){return!e(this).is(":visible")||e(this).attr("tabindex")<0?!1:!0});this.options.overlay||!this.options.closeOnClick||this.options.fullScreen||e("body").on("click.zf.reveal",function(t){i.close()}),this.options.closeOnEsc&&e(window).on("keydown.zf.reveal",function(e){0===n.length&&e.preventDefault(),t.Keyboard.handleKey(e,i,{close:function(){this.options.closeOnEsc&&this.close()}})}),this.$element.on("keydown.zf.reveal",function(s){var o=e(this);t.Keyboard.handleKey(s,i,{tab_forward:function(){this.$element.find(":focus").is(n.eq(-1))&&(n.eq(0).focus(),s.preventDefault())},tab_backward:function(){(this.$element.find(":focus").is(n.eq(0))||this.$element.is(":focus"))&&(n.eq(-1).focus(),s.preventDefault())},open:function(){o.is(n)&&this.open()},close:function(){this.options.closeOnEsc&&this.close()}}),0===n.length&&s.preventDefault()})},i.prototype.close=function(){if(!this.isActive||!this.$element.is(":visible"))return!1;var i=this;this.options.animationOut?t.Motion.animateOut(this.$element,this.options.animationOut,function(){i.options.overlay&&t.Motion.animateOut(i.$overlay,"fade-out",function(){})}):this.$element.hide(i.options.hideDelay,function(){i.options.overlay&&i.$overlay.hide(0,function(){})}),this.options.closeOnEsc&&e(window).off("keydown.zf.reveal"),!this.options.overlay&&this.options.closeOnClick&&e("body").off("click.zf.reveal"),this.$element.off("keydown.zf.reveal"),this.changedSize&&this.$element.css({height:"",width:""}),e("body").removeClass("is-reveal-open").attr({"aria-hidden":!1,tabindex:""}),this.options.resetOnClose&&this.$element.html(this.$element.html()),this.isActive=!1,this.$element.attr({"aria-hidden":!0}).trigger("closed.zf.reveal")},i.prototype.toggle=function(){this.isActive?this.close():this.open()},i.prototype.destroy=function(){this.options.overlay&&this.$overlay.hide().off().remove(),this.$element.hide(),this.$anchor.off(),t.unregisterPlugin(this)},t.plugin(i,"Reveal"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this),e.Keyboard.register("Slider",{ltr:{ARROW_RIGHT:"increase",ARROW_UP:"increase",ARROW_DOWN:"decrease",ARROW_LEFT:"decrease",SHIFT_ARROW_RIGHT:"increase_fast",SHIFT_ARROW_UP:"increase_fast",SHIFT_ARROW_DOWN:"decrease_fast",SHIFT_ARROW_LEFT:"decrease_fast"},rtl:{ARROW_LEFT:"increase",ARROW_RIGHT:"decrease",SHIFT_ARROW_LEFT:"increase_fast",SHIFT_ARROW_RIGHT:"decrease_fast"}})}function n(t,e){return t/e}function s(t,e,i,n){return Math.abs(t.position()[e]+t[n]()/2-i)}i.defaults={start:0,end:100,step:1,initialStart:0,initialEnd:100,binding:!1,clickSelect:!0,vertical:!1,draggable:!0,disabled:!1,doubleSided:!1,decimal:2,moveTime:200,disabledClass:"disabled"},i.prototype._init=function(){this.inputs=this.$element.find("input"),this.handles=this.$element.find("[data-slider-handle]"),this.$handle=this.handles.eq(0),this.$input=this.inputs.length?this.inputs.eq(0):t("#"+this.$handle.attr("aria-controls")),this.$fill=this.$element.find("[data-slider-fill]").css(this.options.vertical?"height":"width",0);var e=!1,i=this;(this.options.disabled||this.$element.hasClass(this.options.disabledClass))&&(this.options.disabled=!0,this.$element.addClass(this.options.disabledClass)),this.inputs.length||(this.inputs=t().add(this.$input),this.options.binding=!0),this._setInitAttr(0),this._events(this.$handle),this.handles[1]&&(this.options.doubleSided=!0,this.$handle2=this.handles.eq(1),this.$input2=this.inputs.length?this.inputs.eq(1):t("#"+this.$handle2.attr("aria-controls")),this.inputs[1]||(this.inputs=this.inputs.add(this.$input2)),e=!0,this._setHandlePos(this.$handle,this.options.initialStart,!0,function(){i._setHandlePos(i.$handle2,i.options.initialEnd)}),this._setInitAttr(1),this._events(this.$handle2)),e||this._setHandlePos(this.$handle,this.options.initialStart,!0)},i.prototype._setHandlePos=function(t,i,s,o){i=parseFloat(i),i<this.options.start?i=this.options.start:i>this.options.end&&(i=this.options.end);var a=this.options.doubleSided;if(a)if(0===this.handles.index(t)){var r=parseFloat(this.$handle2.attr("aria-valuenow"));i=i>=r?r-this.options.step:i}else{var l=parseFloat(this.$handle.attr("aria-valuenow"));i=l>=i?l+this.options.step:i}this.options.vertical&&!s&&(i=this.options.end-i);var d=this,h=this.options.vertical,u=h?"height":"width",c=h?"top":"left",f=t[0].getBoundingClientRect()[u]/2,p=this.$element[0].getBoundingClientRect()[u],m=n(i,this.options.end).toFixed(this.options.decimal),g=(p-f)*m,v=(100*n(g,p)).toFixed(this.options.decimal),i=i>0?parseFloat(i.toFixed(this.options.decimal)):0,w={};if(this._setValues(t,i),this.options.doubleSided){var y,b=0===this.handles.index(t);this.handles.index(t);b?(w[c]=(m>0?100*m:0)+"%",y=(100*(n(this.$handle2.position()[c]+f,p)-parseFloat(m))).toFixed(this.options.decimal)+"%",w["min-"+u]=y,o&&"function"==typeof o&&o()):(i=(100>i?i:100)-(parseFloat(this.$handle[0].style.left)||this.options.end-i),w["min-"+u]=i+"%")}this.$element.one("finished.zf.animate",function(){d.animComplete=!0,d.$element.trigger("moved.zf.slider",[t])});var $=d.$element.data("dragging")?1e3/60:d.options.moveTime;e.Move($,t,function(){t.css(c,v+"%"),d.options.doubleSided?d.$fill.css(w):d.$fill.css(u,100*m+"%")})},i.prototype._setInitAttr=function(t){var i=this.inputs.eq(t).attr("id")||e.GetYoDigits(6,"slider");this.inputs.eq(t).attr({id:i,max:this.options.end,min:this.options.start}),this.handles.eq(t).attr({role:"slider","aria-controls":i,"aria-valuemax":this.options.end,"aria-valuemin":this.options.start,"aria-valuenow":0===t?this.options.initialStart:this.options.initialEnd,"aria-orientation":this.options.vertical?"vertical":"horizontal",tabindex:0})},i.prototype._setValues=function(t,e){var i=this.options.doubleSided?this.handles.index(t):0;this.inputs.eq(i).val(e),t.attr("aria-valuenow",e)},i.prototype._handleEvent=function(t,e,i){var o,a;if(i)o=i,a=!0;else{t.preventDefault();var r=this.options.vertical,l=r?"height":"width",d=r?"top":"left",h=r?t.pageY:t.pageX,u=this.$handle[0].getBoundingClientRect()[l]/2,c=this.$element[0].getBoundingClientRect()[l],f=this.$element.offset()[d]-h,p=f>0?-u:-c>f-u?c:Math.abs(f),m=n(p,c);if(o=(this.options.end-this.options.start)*m,a=!1,!e){var g=s(this.$handle,d,p,l),v=s(this.$handle2,d,p,l);e=v>=g?this.$handle:this.$handle2}}this._setHandlePos(e,o,a)},i.prototype._events=function(i){if(this.options.disabled)return!1;var n,s=this;if(this.inputs.off("change.zf.slider").on("change.zf.slider",function(e){var i=s.inputs.index(t(this));s._handleEvent(e,s.handles.eq(i),t(this).val())}),this.options.clickSelect&&this.$element.off("click.zf.slider").on("click.zf.slider",function(t){return s.$element.data("dragging")?!1:(s.animComplete=!1,void(s.options.doubleSided?s._handleEvent(t):s._handleEvent(t,s.$handle)))}),this.options.draggable){this.handles.addTouch();var o=t("body");i.off("mousedown.zf.slider").on("mousedown.zf.slider",function(e){i.addClass("is-dragging"),s.$fill.addClass("is-dragging"),s.$element.data("dragging",!0),s.animComplete=!1,n=t(e.currentTarget),o.on("mousemove.zf.slider",function(t){t.preventDefault(),s._handleEvent(t,n)}).on("mouseup.zf.slider",function(t){s.animComplete=!0,s._handleEvent(t,n),i.removeClass("is-dragging"),s.$fill.removeClass("is-dragging"),s.$element.data("dragging",!1),o.off("mousemove.zf.slider mouseup.zf.slider")})})}i.off("keydown.zf.slider").on("keydown.zf.slider",function(i){var n,o=s.options.doubleSided?s.handles.index(t(this)):0,a=parseFloat(s.inputs.eq(o).val()),r=t(this);e.Keyboard.handleKey(i,s,{decrease:function(){n=a-s.options.step},increase:function(){n=a+s.options.step},decrease_fast:function(){n=a-10*s.options.step},increase_fast:function(){n=a+10*s.options.step},handled:function(){i.preventDefault(),s._setHandlePos(r,n,!0)}})})},i.prototype.destroy=function(){this.handles.off(".zf.slider"),this.inputs.off(".zf.slider"),this.$element.off(".zf.slider"),e.unregisterPlugin(this)},e.plugin(i,"Slider")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this)}function n(t){return parseInt(window.getComputedStyle(document.body,null).fontSize,10)*t}i.defaults={container:"<div data-sticky-container></div>",stickTo:"top",anchor:"",topAnchor:"",btmAnchor:"",marginTop:1,marginBottom:1,stickyOn:"medium",stickyClass:"sticky",containerClass:"sticky-container",checkEvery:-1},i.prototype._init=function(){var i=this.$element.parent("[data-sticky-container]"),n=this.$element[0].id||e.GetYoDigits(6,"sticky"),s=this;i.length||(this.wasWrapped=!0),this.$container=i.length?i:t(this.options.container).wrapInner(this.$element),this.$container.addClass(this.options.containerClass),this.$element.addClass(this.options.stickyClass).attr({"data-resize":n}),this.scrollCount=this.options.checkEvery,this.isStuck=!1,""!==this.options.topAnchor?this._parsePoints():this.$anchor=t(this.options.anchor?"#"+this.options.anchor:document.body),this._setSizes(function(){s._calc(!1)}),this._events(n.split("-").reverse().join("-"))},i.prototype._parsePoints=function(){for(var e=this.options.topAnchor,i=this.options.btmAnchor,n=[e,i],s={},o=0,a=n.length;a>o&&n[o];o++){var r;if("number"==typeof n[o])r=n[o];else{var l=n[o].split(":"),d=t("#"+l[0]);r=d.offset().top,l[1]&&"bottom"===l[1].toLowerCase()&&(r+=d[0].getBoundingClientRect().height)}s[o]=r}this.points=s},i.prototype._events=function(e){var i=this,n="scroll.zf."+e;this.isOn||(this.canStick&&(this.isOn=!0,t(window).off(n).on(n,function(t){0===i.scrollCount?(i.scrollCount=i.options.checkEvery,i._setSizes(function(){i._calc(!1,window.pageYOffset)})):(i.scrollCount--,i._calc(!1,window.pageYOffset))})),this.$element.off("resizeme.zf.trigger").on("resizeme.zf.trigger",function(t,s){i._setSizes(function(){i._calc(!1),i.canStick?i.isOn||i._events(e):i.isOn&&i._pauseListeners(n)})}))},i.prototype._pauseListeners=function(e){this.isOn=!1,t(window).off(e),this.$element.trigger("pause.zf.sticky")},i.prototype._calc=function(t,e){return t&&this._setSizes(),this.canStick?(e||(e=window.pageYOffset),void(e>=this.topPoint?e<=this.bottomPoint?this.isStuck||this._setSticky():this.isStuck&&this._removeSticky(!1):this.isStuck&&this._removeSticky(!0))):(this.isStuck&&this._removeSticky(!0),!1)},i.prototype._setSticky=function(){var t=this.options.stickTo,e="top"===t?"marginTop":"marginBottom",i="top"===t?"bottom":"top",n={};n[e]=this.options[e]+"em",n[t]=0,n[i]="auto",n.left=this.$container.offset().left+parseInt(window.getComputedStyle(this.$container[0])["padding-left"],10),this.isStuck=!0,this.$element.removeClass("is-anchored is-at-"+i).addClass("is-stuck is-at-"+t).css(n).trigger("sticky.zf.stuckto:"+t)},i.prototype._removeSticky=function(t){var e,i,n=this.options.stickTo,s="top"===n,o={},a=(this.points?this.points[1]-this.points[0]:this.anchorHeight)-this.elemHeight;e=s?"marginTop":"marginBottom",i=s?"bottom":"top",o[e]=0,t&&!s||s&&!t?(o[n]=a,o[i]=0):(o[n]=0,o[i]=a),o.left="",this.isStuck=!1,this.$element.removeClass("is-stuck is-at-"+n).addClass("is-anchored is-at-"+(t?"top":"bottom")).css(o).trigger("top")},i.prototype._setSizes=function(t){this.canStick=e.MediaQuery.atLeast(this.options.stickyOn),this.canStick||t();var i=this.$container[0].getBoundingClientRect().width,n=window.getComputedStyle(this.$container[0]),s=parseInt(n["padding-right"],10);this.$anchor&&this.$anchor.length?this.anchorHeight=this.$anchor[0].getBoundingClientRect().height:this._parsePoints(),this.$element.css({"max-width":i-s+"px"});var o=this.$element[0].getBoundingClientRect().height||this.containerHeight;this.containerHeight=o,this.$container.css({height:o}),this.elemHeight=o,this.isStuck&&this.$element.css({left:this.$container.offset().left+parseInt(n["padding-left"],10)}),this._setBreakPoints(o,function(){t&&t()})},i.prototype._setBreakPoints=function(t,e){if(!this.canStick){if(!e)return!1;e()}var i=n(this.options.marginTop),s=n(this.options.marginBottom),o=this.points?this.points[0]:this.$anchor.offset().top,a=this.points?this.points[1]:o+this.anchorHeight,r=window.innerHeight;"top"===this.options.stickTo?(o-=i,a-=t+i):"bottom"===this.options.stickTo&&(o-=r-(t+s),a-=r-s),this.topPoint=o,this.bottomPoint=a,e&&e()},i.prototype.destroy=function(){this._removeSticky(!0),this.$element.removeClass(this.options.stickyClass+" is-anchored is-at-top").css({height:"",top:"",bottom:"","max-width":""}).off("resizeme.zf.trigger"),this.$anchor.off("change.zf.sticky"),t(window).off("scroll.zf.sticky"),this.wasWrapped?this.$element.unwrap():this.$container.removeClass(this.options.containerClass).css({height:""}),e.unregisterPlugin(this)},e.plugin(i,"Sticky")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this),e.Keyboard.register("Tabs",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"previous",ARROW_DOWN:"next",ARROW_LEFT:"previous"})}i.defaults={autoFocus:!1,wrapOnKeys:!0,matchHeight:!1,linkClass:"tabs-title",panelClass:"tabs-panel"},i.prototype._init=function(){var i=this;if(this.$tabTitles=this.$element.find("."+this.options.linkClass),this.$tabContent=t('[data-tabs-content="'+this.$element[0].id+'"]'),this.$tabTitles.each(function(){var e=t(this),n=e.find("a"),s=e.hasClass("is-active"),o=n.attr("href").slice(1),a=o+"-label",r=t(o);e.attr({role:"presentation"}),n.attr({role:"tab","aria-controls":o,"aria-selected":s,id:a}),r.attr({role:"tabpanel","aria-hidden":!s,"aria-labelledby":a}),s&&i.options.autoFocus&&n.focus()}),this.options.matchHeight){var n=this.$tabContent.find("img");n.length?e.onImagesLoaded(n,this._setHeight.bind(this)):this._setHeight()}this._events()},i.prototype._events=function(){this._addKeyHandler(),this._addClickHandler(),this.options.matchHeight&&t(window).on("changed.zf.mediaquery",this._setHeight.bind(this))},i.prototype._addClickHandler=function(){var e=this;this.$tabTitles.off("click.zf.tabs").on("click.zf.tabs",function(i){i.preventDefault(),i.stopPropagation(),t(this).hasClass("is-active")||e._handleTabChange(t(this))})},i.prototype._addKeyHandler=function(){var i=this;i.$element.find("li:first-of-type"),i.$element.find("li:last-of-type");this.$tabTitles.off("keydown.zf.tabs").on("keydown.zf.tabs",function(n){n.stopPropagation(),n.preventDefault();var s,o,a=t(this),r=a.parent("ul").children("li");r.each(function(e){return t(this).is(a)?void(i.options.wrapOnKeys?(s=0===e?r.last():r.eq(e-1),o=e===r.length-1?r.first():r.eq(e+1)):(s=r.eq(Math.max(0,e-1)),o=r.eq(Math.min(e+1,r.length-1)))):void 0}),e.Keyboard.handleKey(n,i,{open:function(){a.find('[role="tab"]').focus(),i._handleTabChange(a)},previous:function(){s.find('[role="tab"]').focus(),i._handleTabChange(s)},next:function(){o.find('[role="tab"]').focus(),i._handleTabChange(o)}})})},i.prototype._handleTabChange=function(e){var i=e.find('[role="tab"]'),n=i.attr("href"),s=t(n),o=this.$element.find("."+this.options.linkClass+".is-active").removeClass("is-active").find('[role="tab"]').attr({"aria-selected":"false"}).attr("href");t(o).removeClass("is-active").attr({"aria-hidden":"true"}),e.addClass("is-active"),i.attr({"aria-selected":"true"}),s.addClass("is-active").attr({"aria-hidden":"false"}),this.$element.trigger("change.zf.tabs",[e])},i.prototype.selectTab=function(t){var e;e="object"==typeof t?t[0].id:t,e.indexOf("#")<0&&(e="#"+e);var i=this.$tabTitles.find('[href="'+e+'"]').parent("."+this.options.linkClass);this._handleTabChange(i)},i.prototype._setHeight=function(){var e=0;this.$tabContent.find("."+this.options.panelClass).css("height","").each(function(){var i=t(this),n=i.hasClass("is-active");n||i.css({visibility:"hidden",display:"block"});var s=this.getBoundingClientRect().height;n||i.css({visibility:"",display:""}),e=s>e?s:e}).css("height",e+"px")},i.prototype.destroy=function(){this.$element.find("."+this.options.linkClass).off(".zf.tabs").hide().end().find("."+this.options.panelClass).hide(),this.options.matchHeight&&t(window).off("changed.zf.mediaquery"),e.unregisterPlugin(this)},e.plugin(i,"Tabs")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,n.data(),s),this.className="",this._init(),this._events(),t.registerPlugin(this)}i.defaults={animate:!1},i.prototype._init=function(){var t;this.options.animate?(t=this.options.animate.split(" "),this.animationIn=t[0],this.animationOut=t[1]||null):(t=this.$element.data("toggler"),"."===t[0]?this.className=t.slice(1):this.className=t);var i=this.$element[0].id;e('[data-open="'+i+'"], [data-close="'+i+'"], [data-toggle="'+i+'"]').attr("aria-controls",i),this.$element.is(":hidden")&&this.$element.attr("aria-expanded","false")},i.prototype._events=function(){var t=this;this.$element.on("toggle.zf.trigger",function(){return t.toggle(),!1})},i.prototype.toggle=function(){this.options.animate?this._toggleAnimate():this._toggleClass()},i.prototype._toggleClass=function(){var t=this;this.$element.toggleClass(this.className),this.$element.hasClass(this.className)?this.$element.trigger("on.zf.toggler"):this.$element.trigger("off.zf.toggler"),t._updateARIA()},i.prototype._toggleAnimate=function(){var e=this;this.$element.is(":hidden")?t.Motion.animateIn(this.$element,this.animationIn,function(){this.trigger("on.zf.toggler"),e._updateARIA()}):t.Motion.animateOut(this.$element,this.animationOut,function(){this.trigger("off.zf.toggler"),e._updateARIA()})},i.prototype._updateARIA=function(){this.$element.is(":hidden")?this.$element.attr("aria-expanded","false"):this.$element.attr("aria-expanded","true")},i.prototype.destroy=function(){this.$element.off(".zf.toggler"),t.unregisterPlugin(this)},t.plugin(i,"Toggler"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e,i){"use strict";function n(e,s){this.$element=e,this.options=t.extend({},n.defaults,this.$element.data(),s),this.isActive=!1,this.isClick=!1,this._init(),i.registerPlugin(this)}n.defaults={disableForTouch:!1,hoverDelay:200,fadeInDuration:150,fadeOutDuration:150,disableHover:!1,templateClasses:"",tooltipClass:"tooltip",triggerClass:"has-tip",showOn:"small",template:"",tipText:"",touchCloseText:"Tap to close.",clickOpen:!0,positionClass:"",vOffset:10,hOffset:12},n.prototype._init=function(){var n=this.$element.attr("aria-describedby")||i.GetYoDigits(6,"tooltip");this.options.positionClass=this._getPositionClass(this.$element),this.options.tipText=this.options.tipText||this.$element.attr("title"),this.template=this.options.template?t(this.options.template):this._buildTemplate(n),this.template.appendTo(e.body).text(this.options.tipText).hide(),this.$element.attr({title:"","aria-describedby":n,"data-yeti-box":n,"data-toggle":n,"data-resize":n}).addClass(this.triggerClass),this.usedPositions=[],this.counter=4,this.classChanged=!1,this._events()},n.prototype._getPositionClass=function(t){if(!t)return"";var e=t[0].className.match(/(top|left|right)/g);return e=e?e[0]:""},n.prototype._buildTemplate=function(e){var i=(this.options.tooltipClass+" "+this.options.positionClass).trim(),n=t("<div></div>").addClass(i).attr({role:"tooltip","aria-hidden":!0,"data-is-active":!1,"data-is-focus":!1,id:e});return n},n.prototype._reposition=function(t){this.usedPositions.push(t?t:"bottom"),!t&&this.usedPositions.indexOf("top")<0?this.template.addClass("top"):"top"===t&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(t):"left"===t&&this.usedPositions.indexOf("right")<0?this.template.removeClass(t).addClass("right"):"right"===t&&this.usedPositions.indexOf("left")<0?this.template.removeClass(t).addClass("left"):!t&&this.usedPositions.indexOf("top")>-1&&this.usedPositions.indexOf("left")<0?this.template.addClass("left"):"top"===t&&this.usedPositions.indexOf("bottom")>-1&&this.usedPositions.indexOf("left")<0?this.template.removeClass(t).addClass("left"):"left"===t&&this.usedPositions.indexOf("right")>-1&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(t):"right"===t&&this.usedPositions.indexOf("left")>-1&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(t):this.template.removeClass(t),this.classChanged=!0,this.counter--},n.prototype._setPosition=function(){var t=this._getPositionClass(this.template),e=i.Box.GetDimensions(this.template),n=i.Box.GetDimensions(this.$element),s="left"===t?"left":"right"===t?"left":"top",o="top"===s?"height":"width";"height"===o?this.options.vOffset:this.options.hOffset;if(e.width>=e.windowDims.width||!this.counter&&!i.Box.ImNotTouchingYou(this.template))return this.template.offset(i.Box.GetOffsets(this.template,this.$element,"center bottom",this.options.vOffset,this.options.hOffset,!0)).css({width:n.windowDims.width-2*this.options.hOffset,height:"auto"}),!1;for(this.template.offset(i.Box.GetOffsets(this.template,this.$element,"center "+(t||"bottom"),this.options.vOffset,this.options.hOffset));!i.Box.ImNotTouchingYou(this.template)&&this.counter;)this._reposition(t),this._setPosition()},n.prototype.show=function(){if("all"!==this.options.showOn&&!i.MediaQuery.atLeast(this.options.showOn))return!1;var t=this;this.template.css("visibility","hidden").show(),this._setPosition(),this.$element.trigger("closeme.zf.tooltip",this.template.attr("id")),this.template.attr({"data-is-active":!0,"aria-hidden":!1}),t.isActive=!0,this.template.stop().hide().css("visibility","").fadeIn(this.options.fadeInDuration,function(){}),this.$element.trigger("show.zf.tooltip")},n.prototype.hide=function(){var t=this;this.template.stop().attr({"aria-hidden":!0,"data-is-active":!1}).fadeOut(this.options.fadeOutDuration,function(){t.isActive=!1,t.isClick=!1,t.classChanged&&(t.template.removeClass(t._getPositionClass(t.template)).addClass(t.options.positionClass),t.usedPositions=[],t.counter=4,t.classChanged=!1)}),this.$element.trigger("hide.zf.tooltip")},n.prototype._events=function(){var t=this,e=(this.template,!1);this.options.disableHover||this.$element.on("mouseenter.zf.tooltip",function(e){t.isActive||(t.timeout=setTimeout(function(){t.show()},t.options.hoverDelay))}).on("mouseleave.zf.tooltip",function(i){clearTimeout(t.timeout),(!e||!t.isClick&&t.options.clickOpen)&&t.hide()}),this.options.clickOpen&&this.$element.on("mousedown.zf.tooltip",function(e){e.stopImmediatePropagation(),t.isClick?t.hide():(t.isClick=!0,!t.options.disableHover&&t.$element.attr("tabindex")||t.isActive||t.show())}),this.options.disableForTouch||this.$element.on("tap.zf.tooltip touchend.zf.tooltip",function(e){t.isActive?t.hide():t.show()}),this.$element.on({"close.zf.trigger":this.hide.bind(this)}),this.$element.on("focus.zf.tooltip",function(i){return e=!0,console.log(t.isClick),t.isClick?!1:void t.show()}).on("focusout.zf.tooltip",function(i){e=!1,t.isClick=!1,t.hide()}).on("resizeme.zf.trigger",function(){t.isActive&&t._setPosition()})},n.prototype.toggle=function(){this.isActive?this.hide():this.show()},n.prototype.destroy=function(){this.$element.attr("title",this.template.text()).off(".zf.trigger .zf.tootip").removeAttr("aria-describedby").removeAttr("data-yeti-box").removeAttr("data-toggle").removeAttr("data-resize"),this.template.remove(),i.unregisterPlugin(this)},i.plugin(n,"Tooltip")}(jQuery,window.document,window.Foundation);
\ No newline at end of file
+ !function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var i={};e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=36)}([function(t,e){t.exports=jQuery},function(t,e,i){"use strict";function n(){return"rtl"===r()("html").attr("dir")}function s(t,e){return t=t||6,Math.round(Math.pow(36,t+1)-Math.random()*Math.pow(36,t)).toString(36).slice(1)+(e?"-"+e:"")}function o(t){var e,i={transition:"transitionend",WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend"},n=document.createElement("div");for(var s in i)void 0!==n.style[s]&&(e=i[s]);return e||(e=setTimeout(function(){t.triggerHandler("transitionend",[t])},1),"transitionend")}i.d(e,"a",function(){return n}),i.d(e,"b",function(){return s}),i.d(e,"c",function(){return o});var a=i(0),r=i.n(a)},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function o(t){return s(void 0!==t.constructor.name?t.constructor.name:t.className)}i.d(e,"a",function(){return u});var a=i(0),r=(i.n(a),i(1)),l=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),u=function(){function t(e,s){n(this,t),this._setup(e,s);var a=o(this);this.uuid=i.i(r.b)(6,a),this.$element.attr("data-"+a)||this.$element.attr("data-"+a,this.uuid),this.$element.data("zfPlugin")||this.$element.data("zfPlugin",this),this.$element.trigger("init.zf."+a)}return l(t,[{key:"destroy",value:function(){this._destroy();var t=o(this);this.$element.removeAttr("data-"+t).removeData("zfPlugin").trigger("destroyed.zf."+t);for(var e in this)this[e]=null}}]),t}()},function(t,e,i){"use strict";function n(t){return!!t&&t.find("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]").filter(function(){return!(!a()(this).is(":visible")||a()(this).attr("tabindex")<0)})}function s(t){var e=l[t.which||t.keyCode]||String.fromCharCode(t.which).toUpperCase();return e=e.replace(/\W+/,""),t.shiftKey&&(e="SHIFT_"+e),t.ctrlKey&&(e="CTRL_"+e),t.altKey&&(e="ALT_"+e),e=e.replace(/_$/,"")}i.d(e,"a",function(){return c});var o=i(0),a=i.n(o),r=i(1),l={9:"TAB",13:"ENTER",27:"ESCAPE",32:"SPACE",35:"END",36:"HOME",37:"ARROW_LEFT",38:"ARROW_UP",39:"ARROW_RIGHT",40:"ARROW_DOWN"},u={},c={keys:function(t){var e={};for(var i in t)e[t[i]]=t[i];return e}(l),parseKey:s,handleKey:function(t,e,n){var s,o,l,c=u[e],h=this.parseKey(t);if(!c)return console.warn("Component not defined!");if(s=void 0===c.ltr?c:i.i(r.a)()?a.a.extend({},c.ltr,c.rtl):a.a.extend({},c.rtl,c.ltr),o=s[h],(l=n[o])&&"function"==typeof l){var d=l.apply();(n.handled||"function"==typeof n.handled)&&n.handled(d)}else(n.unhandled||"function"==typeof n.unhandled)&&n.unhandled()},findFocusable:n,register:function(t,e){u[t]=e},trapFocus:function(t){var e=n(t),i=e.eq(0),o=e.eq(-1);t.on("keydown.zf.trapfocus",function(t){t.target===o[0]&&"TAB"===s(t)?(t.preventDefault(),i.focus()):t.target===i[0]&&"SHIFT_TAB"===s(t)&&(t.preventDefault(),o.focus())})},releaseFocus:function(t){t.off("keydown.zf.trapfocus")}}},function(t,e,i){"use strict";function n(t){var e={};return"string"!=typeof t?e:(t=t.trim().slice(1,-1))?e=t.split("&").reduce(function(t,e){var i=e.replace(/\+/g," ").split("="),n=i[0],s=i[1];return n=decodeURIComponent(n),s=void 0===s?null:decodeURIComponent(s),t.hasOwnProperty(n)?Array.isArray(t[n])?t[n].push(s):t[n]=[t[n],s]:t[n]=s,t},{}):e}i.d(e,"a",function(){return r});var s=i(0),o=i.n(s),a=window.matchMedia||function(){var t=window.styleMedia||window.media;if(!t){var e=document.createElement("style"),i=document.getElementsByTagName("script")[0],n=null;e.type="text/css",e.id="matchmediajs-test",i&&i.parentNode&&i.parentNode.insertBefore(e,i),n="getComputedStyle"in window&&window.getComputedStyle(e,null)||e.currentStyle,t={matchMedium:function(t){var i="@media "+t+"{ #matchmediajs-test { width: 1px; } }";return e.styleSheet?e.styleSheet.cssText=i:e.textContent=i,"1px"===n.width}}}return function(e){return{matches:t.matchMedium(e||"all"),media:e||"all"}}}(),r={queries:[],current:"",_init:function(){var t=this;o()("meta.foundation-mq").length||o()('<meta class="foundation-mq">').appendTo(document.head);var e,i=o()(".foundation-mq").css("font-family");e=n(i);for(var s in e)e.hasOwnProperty(s)&&t.queries.push({name:s,value:"only screen and (min-width: "+e[s]+")"});this.current=this._getCurrentSize(),this._watcher()},atLeast:function(t){var e=this.get(t);return!!e&&a(e).matches},is:function(t){return t=t.trim().split(" "),t.length>1&&"only"===t[1]?t[0]===this._getCurrentSize():this.atLeast(t[0])},get:function(t){for(var e in this.queries)if(this.queries.hasOwnProperty(e)){var i=this.queries[e];if(t===i.name)return i.value}return null},_getCurrentSize:function(){for(var t,e=0;e<this.queries.length;e++){var i=this.queries[e];a(i.value).matches&&(t=i)}return"object"==typeof t?t.name:t},_watcher:function(){var t=this;o()(window).off("resize.zf.mediaquery").on("resize.zf.mediaquery",function(){var e=t._getCurrentSize(),i=t.current;e!==i&&(t.current=e,o()(window).trigger("changed.zf.mediaquery",[e,i]))})}}},function(t,e,i){"use strict";function n(t,e,i){var n=void 0,s=Array.prototype.slice.call(arguments,3);o()(window).off(e).on(e,function(e){n&&clearTimeout(n),n=setTimeout(function(){i.apply(null,s)},t||10)})}i.d(e,"a",function(){return u});var s=i(0),o=i.n(s),a=i(6),r=function(){for(var t=["WebKit","Moz","O","Ms",""],e=0;e<t.length;e++)if(t[e]+"MutationObserver"in window)return window[t[e]+"MutationObserver"];return!1}(),l=function(t,e){t.data(e).split(" ").forEach(function(i){o()("#"+i)["close"===e?"trigger":"triggerHandler"](e+".zf.trigger",[t])})},u={Listeners:{Basic:{},Global:{}},Initializers:{}};u.Listeners.Basic={openListener:function(){l(o()(this),"open")},closeListener:function(){o()(this).data("close")?l(o()(this),"close"):o()(this).trigger("close.zf.trigger")},toggleListener:function(){o()(this).data("toggle")?l(o()(this),"toggle"):o()(this).trigger("toggle.zf.trigger")},closeableListener:function(t){t.stopPropagation();var e=o()(this).data("closable");""!==e?a.a.animateOut(o()(this),e,function(){o()(this).trigger("closed.zf")}):o()(this).fadeOut().trigger("closed.zf")},toggleFocusListener:function(){var t=o()(this).data("toggle-focus");o()("#"+t).triggerHandler("toggle.zf.trigger",[o()(this)])}},u.Initializers.addOpenListener=function(t){t.off("click.zf.trigger",u.Listeners.Basic.openListener),t.on("click.zf.trigger","[data-open]",u.Listeners.Basic.openListener)},u.Initializers.addCloseListener=function(t){t.off("click.zf.trigger",u.Listeners.Basic.closeListener),t.on("click.zf.trigger","[data-close]",u.Listeners.Basic.closeListener)},u.Initializers.addToggleListener=function(t){t.off("click.zf.trigger",u.Listeners.Basic.toggleListener),t.on("click.zf.trigger","[data-toggle]",u.Listeners.Basic.toggleListener)},u.Initializers.addCloseableListener=function(t){t.off("close.zf.trigger",u.Listeners.Basic.closeableListener),t.on("close.zf.trigger","[data-closeable], [data-closable]",u.Listeners.Basic.closeableListener)},u.Initializers.addToggleFocusListener=function(t){t.off("focus.zf.trigger blur.zf.trigger",u.Listeners.Basic.toggleFocusListener),t.on("focus.zf.trigger blur.zf.trigger","[data-toggle-focus]",u.Listeners.Basic.toggleFocusListener)},u.Listeners.Global={resizeListener:function(t){r||t.each(function(){o()(this).triggerHandler("resizeme.zf.trigger")}),t.attr("data-events","resize")},scrollListener:function(t){r||t.each(function(){o()(this).triggerHandler("scrollme.zf.trigger")}),t.attr("data-events","scroll")},closeMeListener:function(t,e){var i=t.namespace.split(".")[0];o()("[data-"+i+"]").not('[data-yeti-box="'+e+'"]').each(function(){var t=o()(this);t.triggerHandler("close.zf.trigger",[t])})}},u.Initializers.addClosemeListener=function(t){var e=o()("[data-yeti-box]"),i=["dropdown","tooltip","reveal"];if(t&&("string"==typeof t?i.push(t):"object"==typeof t&&"string"==typeof t[0]?i.concat(t):console.error("Plugin names must be strings")),e.length){var n=i.map(function(t){return"closeme.zf."+t}).join(" ");o()(window).off(n).on(n,u.Listeners.Global.closeMeListener)}},u.Initializers.addResizeListener=function(t){var e=o()("[data-resize]");e.length&&n(t,"resize.zf.trigger",u.Listeners.Global.resizeListener,e)},u.Initializers.addScrollListener=function(t){var e=o()("[data-scroll]");e.length&&n(t,"scroll.zf.trigger",u.Listeners.Global.scrollListener,e)},u.Initializers.addMutationEventsListener=function(t){if(!r)return!1;var e=t.find("[data-resize], [data-scroll], [data-mutate]"),i=function(t){var e=o()(t[0].target);switch(t[0].type){case"attributes":"scroll"===e.attr("data-events")&&"data-events"===t[0].attributeName&&e.triggerHandler("scrollme.zf.trigger",[e,window.pageYOffset]),"resize"===e.attr("data-events")&&"data-events"===t[0].attributeName&&e.triggerHandler("resizeme.zf.trigger",[e]),"style"===t[0].attributeName&&(e.closest("[data-mutate]").attr("data-events","mutate"),e.closest("[data-mutate]").triggerHandler("mutateme.zf.trigger",[e.closest("[data-mutate]")]));break;case"childList":e.closest("[data-mutate]").attr("data-events","mutate"),e.closest("[data-mutate]").triggerHandler("mutateme.zf.trigger",[e.closest("[data-mutate]")]);break;default:return!1}};if(e.length)for(var n=0;n<=e.length-1;n++){var s=new r(i);s.observe(e[n],{attributes:!0,childList:!0,characterData:!1,subtree:!0,attributeFilter:["data-events","style"]})}},u.Initializers.addSimpleListeners=function(){var t=o()(document);u.Initializers.addOpenListener(t),u.Initializers.addCloseListener(t),u.Initializers.addToggleListener(t),u.Initializers.addCloseableListener(t),u.Initializers.addToggleFocusListener(t)},u.Initializers.addGlobalListeners=function(){var t=o()(document);u.Initializers.addMutationEventsListener(t),u.Initializers.addResizeListener(),u.Initializers.addScrollListener(),u.Initializers.addClosemeListener()},u.init=function(t,e){if(void 0===t.triggersInitialized){t(document);"complete"===document.readyState?(u.Initializers.addSimpleListeners(),u.Initializers.addGlobalListeners()):t(window).on("load",function(){u.Initializers.addSimpleListeners(),u.Initializers.addGlobalListeners()}),t.triggersInitialized=!0}e&&(e.Triggers=u,e.IHearYou=u.Initializers.addGlobalListeners)}},function(t,e,i){"use strict";function n(t,e,i){function n(r){a||(a=r),o=r-a,i.apply(e),o<t?s=window.requestAnimationFrame(n,e):(window.cancelAnimationFrame(s),e.trigger("finished.zf.animate",[e]).triggerHandler("finished.zf.animate",[e]))}var s,o,a=null;if(0===t)return i.apply(e),void e.trigger("finished.zf.animate",[e]).triggerHandler("finished.zf.animate",[e]);s=window.requestAnimationFrame(n)}function s(t,e,n,s){function o(){t||e.hide(),c(),s&&s.apply(e)}function c(){e[0].style.transitionDuration=0,e.removeClass(h+" "+d+" "+n)}if(e=a()(e).eq(0),e.length){var h=t?l[0]:l[1],d=t?u[0]:u[1];c(),e.addClass(n).css("transition","none"),requestAnimationFrame(function(){e.addClass(h),t&&e.show()}),requestAnimationFrame(function(){e[0].offsetWidth,e.css("transition","").addClass(d)}),e.one(i.i(r.c)(e),o)}}i.d(e,"b",function(){return n}),i.d(e,"a",function(){return c});var o=i(0),a=i.n(o),r=i(1),l=["mui-enter","mui-leave"],u=["mui-enter-active","mui-leave-active"],c={animateIn:function(t,e,i){s(!0,t,e,i)},animateOut:function(t,e,i){s(!1,t,e,i)}}},function(t,e,i){"use strict";function n(t,e,i,n,o){return 0===s(t,e,i,n,o)}function s(t,e,i,n,s){var a,r,l,u,c=o(t);if(e){var h=o(e);r=h.height+h.offset.top-(c.offset.top+c.height),a=c.offset.top-h.offset.top,l=c.offset.left-h.offset.left,u=h.width+h.offset.left-(c.offset.left+c.width)}else r=c.windowDims.height+c.windowDims.offset.top-(c.offset.top+c.height),a=c.offset.top-c.windowDims.offset.top,l=c.offset.left-c.windowDims.offset.left,u=c.windowDims.width-(c.offset.left+c.width);return r=s?0:Math.min(r,0),a=Math.min(a,0),l=Math.min(l,0),u=Math.min(u,0),i?l+u:n?a+r:Math.sqrt(a*a+r*r+l*l+u*u)}function o(t){if((t=t.length?t[0]:t)===window||t===document)throw new Error("I'm sorry, Dave. I'm afraid I can't do that.");var e=t.getBoundingClientRect(),i=t.parentNode.getBoundingClientRect(),n=document.body.getBoundingClientRect(),s=window.pageYOffset,o=window.pageXOffset;return{width:e.width,height:e.height,offset:{top:e.top+s,left:e.left+o},parentDims:{width:i.width,height:i.height,offset:{top:i.top+s,left:i.left+o}},windowDims:{width:n.width,height:n.height,offset:{top:s,left:o}}}}function a(t,e,n,s,o,a){switch(console.log("NOTE: GetOffsets is deprecated in favor of GetExplicitOffsets and will be removed in 6.5"),n){case"top":return i.i(l.a)()?r(t,e,"top","left",s,o,a):r(t,e,"top","right",s,o,a);case"bottom":return i.i(l.a)()?r(t,e,"bottom","left",s,o,a):r(t,e,"bottom","right",s,o,a);case"center top":return r(t,e,"top","center",s,o,a);case"center bottom":return r(t,e,"bottom","center",s,o,a);case"center left":return r(t,e,"left","center",s,o,a);case"center right":return r(t,e,"right","center",s,o,a);case"left bottom":return r(t,e,"bottom","left",s,o,a);case"right bottom":return r(t,e,"bottom","right",s,o,a);case"center":return{left:$eleDims.windowDims.offset.left+$eleDims.windowDims.width/2-$eleDims.width/2+o,top:$eleDims.windowDims.offset.top+$eleDims.windowDims.height/2-($eleDims.height/2+s)};case"reveal":return{left:($eleDims.windowDims.width-$eleDims.width)/2+o,top:$eleDims.windowDims.offset.top+s};case"reveal full":return{left:$eleDims.windowDims.offset.left,top:$eleDims.windowDims.offset.top};default:return{left:i.i(l.a)()?$anchorDims.offset.left-$eleDims.width+$anchorDims.width-o:$anchorDims.offset.left+o,top:$anchorDims.offset.top+$anchorDims.height+s}}}function r(t,e,i,n,s,a,r){var l,u,c=o(t),h=e?o(e):null;switch(i){case"top":l=h.offset.top-(c.height+s);break;case"bottom":l=h.offset.top+h.height+s;break;case"left":u=h.offset.left-(c.width+a);break;case"right":u=h.offset.left+h.width+a}switch(i){case"top":case"bottom":switch(n){case"left":u=h.offset.left+a;break;case"right":u=h.offset.left-c.width+h.width-a;break;case"center":u=r?a:h.offset.left+h.width/2-c.width/2+a}break;case"right":case"left":switch(n){case"bottom":l=h.offset.top-s+h.height-c.height;break;case"top":l=h.offset.top+s;break;case"center":l=h.offset.top+s+h.height/2-c.height/2}}return{top:l,left:u}}i.d(e,"a",function(){return u});var l=i(1),u={ImNotTouchingYou:n,OverlapArea:s,GetDimensions:o,GetOffsets:a,GetExplicitOffsets:r}},function(t,e,i){"use strict";function n(t,e){function i(){0===--n&&e()}var n=t.length;0===n&&e(),t.each(function(){if(this.complete&&void 0!==this.naturalWidth)i();else{var t=new Image,e="load.zf.images error.zf.images";o()(t).one(e,function t(n){o()(this).off(e,t),i()}),t.src=o()(this).attr("src")}})}i.d(e,"a",function(){return n});var s=i(0),o=i.n(s)},function(t,e,i){"use strict";i.d(e,"a",function(){return o});var n=i(0),s=i.n(n),o={Feather:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"zf";t.attr("role","menubar");var i=t.find("li").attr({role:"menuitem"}),n="is-"+e+"-submenu",o=n+"-item",a="is-"+e+"-submenu-parent",r="accordion"!==e;i.each(function(){var t=s()(this),i=t.children("ul");i.length&&(t.addClass(a),i.addClass("submenu "+n).attr({"data-submenu":""}),r&&(t.attr({"aria-haspopup":!0,"aria-label":t.children("a:first").text()}),"drilldown"===e&&t.attr({"aria-expanded":!1})),i.addClass("submenu "+n).attr({"data-submenu":"",role:"menu"}),"drilldown"===e&&i.attr({"aria-hidden":!0})),t.parent("[data-submenu]").length&&t.addClass("is-submenu-item "+o)})},Burn:function(t,e){var i="is-"+e+"-submenu",n=i+"-item",s="is-"+e+"-submenu-parent";t.find(">li, .menu, .menu > li").removeClass(i+" "+n+" "+s+" is-submenu-item submenu is-active").removeAttr("data-submenu").css("display","")}}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(){this.removeEventListener("touchmove",o),this.removeEventListener("touchend",s),g=!1}function o(t){if(f.a.spotSwipe.preventDefault&&t.preventDefault(),g){var e,i=t.touches[0].pageX,n=(t.touches[0].pageY,l-i);h=(new Date).getTime()-c,Math.abs(n)>=f.a.spotSwipe.moveThreshold&&h<=f.a.spotSwipe.timeThreshold&&(e=n>0?"left":"right"),e&&(t.preventDefault(),s.call(this),f()(this).trigger("swipe",e).trigger("swipe"+e))}}function a(t){1==t.touches.length&&(l=t.touches[0].pageX,u=t.touches[0].pageY,g=!0,c=(new Date).getTime(),this.addEventListener("touchmove",o,!1),this.addEventListener("touchend",s,!1))}function r(){this.addEventListener&&this.addEventListener("touchstart",a,!1)}i.d(e,"a",function(){return m});var l,u,c,h,d=i(0),f=i.n(d),p=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),m={},g=!1,v=function(){function t(e){n(this,t),this.version="1.0.0",this.enabled="ontouchstart"in document.documentElement,this.preventDefault=!1,this.moveThreshold=75,this.timeThreshold=200,this.$=e,this._init()}return p(t,[{key:"_init",value:function(){var t=this.$;t.event.special.swipe={setup:r},t.each(["left","up","down","right"],function(){t.event.special["swipe"+this]={setup:function(){t(this).on("swipe",t.noop)}}})}}]),t}();m.setupSpotSwipe=function(t){t.spotSwipe=new v(t)},m.setupTouchHandler=function(t){t.fn.addTouch=function(){this.each(function(i,n){t(n).bind("touchstart touchmove touchend touchcancel",function(){e(event)})});var e=function(t){var e,i=t.changedTouches,n=i[0],s={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"},o=s[t.type];"MouseEvent"in window&&"function"==typeof window.MouseEvent?e=new window.MouseEvent(o,{bubbles:!0,cancelable:!0,screenX:n.screenX,screenY:n.screenY,clientX:n.clientX,clientY:n.clientY}):(e=document.createEvent("MouseEvent"),e.initMouseEvent(o,!0,!0,window,1,n.screenX,n.screenY,n.clientX,n.clientY,!1,!1,!1,!1,0,null)),n.target.dispatchEvent(e)}}},m.init=function(t){void 0===t.spotSwipe&&(m.setupSpotSwipe(t),m.setupTouchHandler(t))}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(3),u=i(1),c=i(2),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Accordion",this._init(),l.a.register("Accordion",{ENTER:"toggle",SPACE:"toggle",ARROW_DOWN:"next",ARROW_UP:"previous"})}},{key:"_init",value:function(){var t=this;this.$element.attr("role","tablist"),this.$tabs=this.$element.children("[data-accordion-item]"),this.$tabs.each(function(t,e){var n=r()(e),s=n.children("[data-tab-content]"),o=s[0].id||i.i(u.b)(6,"accordion"),a=e.id||o+"-label";n.find("a:first").attr({"aria-controls":o,role:"tab",id:a,"aria-expanded":!1,"aria-selected":!1}),s.attr({role:"tabpanel","aria-labelledby":a,"aria-hidden":!0,id:o})});var e=this.$element.find(".is-active").children("[data-tab-content]");this.firstTimeInit=!0,e.length&&(this.down(e,this.firstTimeInit),this.firstTimeInit=!1),this._checkDeepLink=function(){var e=window.location.hash;if(e.length){var i=t.$element.find('[href$="'+e+'"]'),n=r()(e);if(i.length&&n){if(i.parent("[data-accordion-item]").hasClass("is-active")||(t.down(n,t.firstTimeInit),t.firstTimeInit=!1),t.options.deepLinkSmudge){var s=t;r()(window).load(function(){var t=s.$element.offset();r()("html, body").animate({scrollTop:t.top},s.options.deepLinkSmudgeDelay)})}t.$element.trigger("deeplink.zf.accordion",[i,n])}}},this.options.deepLink&&this._checkDeepLink(),this._events()}},{key:"_events",value:function(){var t=this;this.$tabs.each(function(){var e=r()(this),i=e.children("[data-tab-content]");i.length&&e.children("a").off("click.zf.accordion keydown.zf.accordion").on("click.zf.accordion",function(e){e.preventDefault(),t.toggle(i)}).on("keydown.zf.accordion",function(n){l.a.handleKey(n,"Accordion",{toggle:function(){t.toggle(i)},next:function(){var i=e.next().find("a").focus();t.options.multiExpand||i.trigger("click.zf.accordion")},previous:function(){var i=e.prev().find("a").focus();t.options.multiExpand||i.trigger("click.zf.accordion")},handled:function(){n.preventDefault(),n.stopPropagation()}})})}),this.options.deepLink&&r()(window).on("popstate",this._checkDeepLink)}},{key:"toggle",value:function(t){if(t.closest("[data-accordion]").is("[disabled]"))return void console.info("Cannot toggle an accordion that is disabled.");if(t.parent().hasClass("is-active")?this.up(t):this.down(t),this.options.deepLink){var e=t.prev("a").attr("href");this.options.updateHistory?history.pushState({},"",e):history.replaceState({},"",e)}}},{key:"down",value:function(t,e){var i=this;if(t.closest("[data-accordion]").is("[disabled]")&&!e)return void console.info("Cannot call down on an accordion that is disabled.");if(t.attr("aria-hidden",!1).parent("[data-tab-content]").addBack().parent().addClass("is-active"),!this.options.multiExpand&&!e){var n=this.$element.children(".is-active").children("[data-tab-content]");n.length&&this.up(n.not(t))}t.slideDown(this.options.slideSpeed,function(){i.$element.trigger("down.zf.accordion",[t])}),r()("#"+t.attr("aria-labelledby")).attr({"aria-expanded":!0,"aria-selected":!0})}},{key:"up",value:function(t){if(t.closest("[data-accordion]").is("[disabled]"))return void console.info("Cannot call up on an accordion that is disabled.");var e=t.parent().siblings(),i=this;(this.options.allowAllClosed||e.hasClass("is-active"))&&t.parent().hasClass("is-active")&&(t.slideUp(i.options.slideSpeed,function(){i.$element.trigger("up.zf.accordion",[t])}),t.attr("aria-hidden",!0).parent().removeClass("is-active"),r()("#"+t.attr("aria-labelledby")).attr({"aria-expanded":!1,"aria-selected":!1}))}},{key:"_destroy",value:function(){this.$element.find("[data-tab-content]").stop(!0).slideUp(0).css("display",""),this.$element.find("a").off(".zf.accordion"),this.options.deepLink&&r()(window).off("popstate",this._checkDeepLink)}}]),e}(c.a);d.defaults={slideSpeed:250,multiExpand:!1,allowAllClosed:!1,deepLink:!1,deepLinkSmudge:!1,deepLinkSmudgeDelay:300,updateHistory:!1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return f});var a=i(0),r=i.n(a),l=i(3),u=i(9),c=i(1),h=i(2),d=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),f=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),d(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="AccordionMenu",this._init(),l.a.register("AccordionMenu",{ENTER:"toggle",SPACE:"toggle",ARROW_RIGHT:"open",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"close",ESCAPE:"closeAll"})}},{key:"_init",value:function(){u.a.Feather(this.$element,"accordion");var t=this;this.$element.find("[data-submenu]").not(".is-active").slideUp(0),this.$element.attr({role:"tree","aria-multiselectable":this.options.multiOpen}),this.$menuLinks=this.$element.find(".is-accordion-submenu-parent"),this.$menuLinks.each(function(){var e=this.id||i.i(c.b)(6,"acc-menu-link"),n=r()(this),s=n.children("[data-submenu]"),o=s[0].id||i.i(c.b)(6,"acc-menu"),a=s.hasClass("is-active");t.options.submenuToggle?(n.addClass("has-submenu-toggle"),n.children("a").after('<button id="'+e+'" class="submenu-toggle" aria-controls="'+o+'" aria-expanded="'+a+'" title="'+t.options.submenuToggleText+'"><span class="submenu-toggle-text">'+t.options.submenuToggleText+"</span></button>")):n.attr({"aria-controls":o,"aria-expanded":a,id:e}),s.attr({"aria-labelledby":e,"aria-hidden":!a,role:"group",id:o})}),this.$element.find("li").attr({role:"treeitem"});var e=this.$element.find(".is-active");if(e.length){var t=this;e.each(function(){t.down(r()(this))})}this._events()}},{key:"_events",value:function(){var t=this;this.$element.find("li").each(function(){var e=r()(this).children("[data-submenu]");e.length&&(t.options.submenuToggle?r()(this).children(".submenu-toggle").off("click.zf.accordionMenu").on("click.zf.accordionMenu",function(i){t.toggle(e)}):r()(this).children("a").off("click.zf.accordionMenu").on("click.zf.accordionMenu",function(i){i.preventDefault(),t.toggle(e)}))}).on("keydown.zf.accordionmenu",function(e){var i,n,s=r()(this),o=s.parent("ul").children("li"),a=s.children("[data-submenu]");o.each(function(t){if(r()(this).is(s))return i=o.eq(Math.max(0,t-1)).find("a").first(),n=o.eq(Math.min(t+1,o.length-1)).find("a").first(),r()(this).children("[data-submenu]:visible").length&&(n=s.find("li:first-child").find("a").first()),r()(this).is(":first-child")?i=s.parents("li").first().find("a").first():i.parents("li").first().children("[data-submenu]:visible").length&&(i=i.parents("li").find("li:last-child").find("a").first()),void(r()(this).is(":last-child")&&(n=s.parents("li").first().next("li").find("a").first()))}),l.a.handleKey(e,"AccordionMenu",{open:function(){a.is(":hidden")&&(t.down(a),a.find("li").first().find("a").first().focus())},close:function(){a.length&&!a.is(":hidden")?t.up(a):s.parent("[data-submenu]").length&&(t.up(s.parent("[data-submenu]")),s.parents("li").first().find("a").first().focus())},up:function(){return i.focus(),!0},down:function(){return n.focus(),!0},toggle:function(){return!t.options.submenuToggle&&(s.children("[data-submenu]").length?(t.toggle(s.children("[data-submenu]")),!0):void 0)},closeAll:function(){t.hideAll()},handled:function(t){t&&e.preventDefault(),e.stopImmediatePropagation()}})})}},{key:"hideAll",value:function(){this.up(this.$element.find("[data-submenu]"))}},{key:"showAll",value:function(){this.down(this.$element.find("[data-submenu]"))}},{key:"toggle",value:function(t){t.is(":animated")||(t.is(":hidden")?this.down(t):this.up(t))}},{key:"down",value:function(t){var e=this;this.options.multiOpen||this.up(this.$element.find(".is-active").not(t.parentsUntil(this.$element).add(t))),t.addClass("is-active").attr({"aria-hidden":!1}),this.options.submenuToggle?t.prev(".submenu-toggle").attr({"aria-expanded":!0}):t.parent(".is-accordion-submenu-parent").attr({"aria-expanded":!0}),t.slideDown(e.options.slideSpeed,function(){e.$element.trigger("down.zf.accordionMenu",[t])})}},{key:"up",value:function(t){var e=this;t.slideUp(e.options.slideSpeed,function(){e.$element.trigger("up.zf.accordionMenu",[t])});var i=t.find("[data-submenu]").slideUp(0).addBack().attr("aria-hidden",!0);this.options.submenuToggle?i.prev(".submenu-toggle").attr("aria-expanded",!1):i.parent(".is-accordion-submenu-parent").attr("aria-expanded",!1)}},{key:"_destroy",value:function(){this.$element.find("[data-submenu]").slideDown(0).css("display",""),this.$element.find("a").off("click.zf.accordionMenu"),this.options.submenuToggle&&(this.$element.find(".has-submenu-toggle").removeClass("has-submenu-toggle"),this.$element.find(".submenu-toggle").remove()),u.a.Burn(this.$element,"accordion")}}]),e}(h.a);f.defaults={slideSpeed:250,submenuToggle:!1,submenuToggleText:"Toggle menu",multiOpen:!0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return p});var a=i(0),r=i.n(a),l=i(3),u=i(9),c=i(1),h=i(7),d=i(2),f=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),f(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Drilldown",this._init(),l.a.register("Drilldown",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"previous",ESCAPE:"close",TAB:"down",SHIFT_TAB:"up"})}},{key:"_init",value:function(){u.a.Feather(this.$element,"drilldown"),this.options.autoApplyClass&&this.$element.addClass("drilldown"),this.$element.attr({role:"tree","aria-multiselectable":!1}),this.$submenuAnchors=this.$element.find("li.is-drilldown-submenu-parent").children("a"),this.$submenus=this.$submenuAnchors.parent("li").children("[data-submenu]").attr("role","group"),this.$menuItems=this.$element.find("li").not(".js-drilldown-back").attr("role","treeitem").find("a"),this.$element.attr("data-mutate",this.$element.attr("data-drilldown")||i.i(c.b)(6,"drilldown")),this._prepareMenu(),this._registerEvents(),this._keyboardEvents()}},{key:"_prepareMenu",value:function(){var t=this;this.$submenuAnchors.each(function(){var e=r()(this),i=e.parent();t.options.parentLink&&e.clone().prependTo(i.children("[data-submenu]")).wrap('<li class="is-submenu-parent-item is-submenu-item is-drilldown-submenu-item" role="menuitem"></li>'),e.data("savedHref",e.attr("href")).removeAttr("href").attr("tabindex",0),e.children("[data-submenu]").attr({"aria-hidden":!0,tabindex:0,role:"group"}),t._events(e)}),this.$submenus.each(function(){var e=r()(this);if(!e.find(".js-drilldown-back").length)switch(t.options.backButtonPosition){case"bottom":e.append(t.options.backButton);break;case"top":e.prepend(t.options.backButton);break;default:
+ console.error("Unsupported backButtonPosition value '"+t.options.backButtonPosition+"'")}t._back(e)}),this.$submenus.addClass("invisible"),this.options.autoHeight||this.$submenus.addClass("drilldown-submenu-cover-previous"),this.$element.parent().hasClass("is-drilldown")||(this.$wrapper=r()(this.options.wrapper).addClass("is-drilldown"),this.options.animateHeight&&this.$wrapper.addClass("animate-height"),this.$element.wrap(this.$wrapper)),this.$wrapper=this.$element.parent(),this.$wrapper.css(this._getMaxDims())}},{key:"_resize",value:function(){this.$wrapper.css({"max-width":"none","min-height":"none"}),this.$wrapper.css(this._getMaxDims())}},{key:"_events",value:function(t){var e=this;t.off("click.zf.drilldown").on("click.zf.drilldown",function(i){if(r()(i.target).parentsUntil("ul","li").hasClass("is-drilldown-submenu-parent")&&(i.stopImmediatePropagation(),i.preventDefault()),e._show(t.parent("li")),e.options.closeOnClick){var n=r()("body");n.off(".zf.drilldown").on("click.zf.drilldown",function(t){t.target===e.$element[0]||r.a.contains(e.$element[0],t.target)||(t.preventDefault(),e._hideAll(),n.off(".zf.drilldown"))})}})}},{key:"_registerEvents",value:function(){this.options.scrollTop&&(this._bindHandler=this._scrollTop.bind(this),this.$element.on("open.zf.drilldown hide.zf.drilldown closed.zf.drilldown",this._bindHandler)),this.$element.on("mutateme.zf.trigger",this._resize.bind(this))}},{key:"_scrollTop",value:function(){var t=this,e=""!=t.options.scrollTopElement?r()(t.options.scrollTopElement):t.$element,i=parseInt(e.offset().top+t.options.scrollTopOffset,10);r()("html, body").stop(!0).animate({scrollTop:i},t.options.animationDuration,t.options.animationEasing,function(){this===r()("html")[0]&&t.$element.trigger("scrollme.zf.drilldown")})}},{key:"_keyboardEvents",value:function(){var t=this;this.$menuItems.add(this.$element.find(".js-drilldown-back > a, .is-submenu-parent-item > a")).on("keydown.zf.drilldown",function(e){var n,s,o=r()(this),a=o.parent("li").parent("ul").children("li").children("a");a.each(function(t){if(r()(this).is(o))return n=a.eq(Math.max(0,t-1)),void(s=a.eq(Math.min(t+1,a.length-1)))}),l.a.handleKey(e,"Drilldown",{next:function(){if(o.is(t.$submenuAnchors))return t._show(o.parent("li")),o.parent("li").one(i.i(c.c)(o),function(){o.parent("li").find("ul li a").filter(t.$menuItems).first().focus()}),!0},previous:function(){return t._hide(o.parent("li").parent("ul")),o.parent("li").parent("ul").one(i.i(c.c)(o),function(){setTimeout(function(){o.parent("li").parent("ul").parent("li").children("a").first().focus()},1)}),!0},up:function(){return n.focus(),!o.is(t.$element.find("> li:first-child > a"))},down:function(){return s.focus(),!o.is(t.$element.find("> li:last-child > a"))},close:function(){o.is(t.$element.find("> li > a"))||(t._hide(o.parent().parent()),o.parent().parent().siblings("a").focus())},open:function(){return o.is(t.$menuItems)?o.is(t.$submenuAnchors)?(t._show(o.parent("li")),o.parent("li").one(i.i(c.c)(o),function(){o.parent("li").find("ul li a").filter(t.$menuItems).first().focus()}),!0):void 0:(t._hide(o.parent("li").parent("ul")),o.parent("li").parent("ul").one(i.i(c.c)(o),function(){setTimeout(function(){o.parent("li").parent("ul").parent("li").children("a").first().focus()},1)}),!0)},handled:function(t){t&&e.preventDefault(),e.stopImmediatePropagation()}})})}},{key:"_hideAll",value:function(){var t=this.$element.find(".is-drilldown-submenu.is-active").addClass("is-closing");this.options.autoHeight&&this.$wrapper.css({height:t.parent().closest("ul").data("calcHeight")}),t.one(i.i(c.c)(t),function(e){t.removeClass("is-active is-closing")}),this.$element.trigger("closed.zf.drilldown")}},{key:"_back",value:function(t){var e=this;t.off("click.zf.drilldown"),t.children(".js-drilldown-back").on("click.zf.drilldown",function(i){i.stopImmediatePropagation(),e._hide(t);var n=t.parent("li").parent("ul").parent("li");n.length&&e._show(n)})}},{key:"_menuLinkEvents",value:function(){var t=this;this.$menuItems.not(".is-drilldown-submenu-parent").off("click.zf.drilldown").on("click.zf.drilldown",function(e){setTimeout(function(){t._hideAll()},0)})}},{key:"_show",value:function(t){this.options.autoHeight&&this.$wrapper.css({height:t.children("[data-submenu]").data("calcHeight")}),t.attr("aria-expanded",!0),t.children("[data-submenu]").addClass("is-active").removeClass("invisible").attr("aria-hidden",!1),this.$element.trigger("open.zf.drilldown",[t])}},{key:"_hide",value:function(t){this.options.autoHeight&&this.$wrapper.css({height:t.parent().closest("ul").data("calcHeight")});t.parent("li").attr("aria-expanded",!1),t.attr("aria-hidden",!0).addClass("is-closing"),t.addClass("is-closing").one(i.i(c.c)(t),function(){t.removeClass("is-active is-closing"),t.blur().addClass("invisible")}),t.trigger("hide.zf.drilldown",[t])}},{key:"_getMaxDims",value:function(){var t=0,e={},i=this;return this.$submenus.add(this.$element).each(function(){var n=(r()(this).children("li").length,h.a.GetDimensions(this).height);t=n>t?n:t,i.options.autoHeight&&(r()(this).data("calcHeight",n),r()(this).hasClass("is-drilldown-submenu")||(e.height=n))}),this.options.autoHeight||(e["min-height"]=t+"px"),e["max-width"]=this.$element[0].getBoundingClientRect().width+"px",e}},{key:"_destroy",value:function(){this.options.scrollTop&&this.$element.off(".zf.drilldown",this._bindHandler),this._hideAll(),this.$element.off("mutateme.zf.trigger"),u.a.Burn(this.$element,"drilldown"),this.$element.unwrap().find(".js-drilldown-back, .is-submenu-parent-item").remove().end().find(".is-active, .is-closing, .is-drilldown-submenu").removeClass("is-active is-closing is-drilldown-submenu").end().find("[data-submenu]").removeAttr("aria-hidden tabindex role"),this.$submenuAnchors.each(function(){r()(this).off(".zf.drilldown")}),this.$submenus.removeClass("drilldown-submenu-cover-previous invisible"),this.$element.find("a").each(function(){var t=r()(this);t.removeAttr("tabindex"),t.data("savedHref")&&t.attr("href",t.data("savedHref")).removeData("savedHref")})}}]),e}(d.a);p.defaults={autoApplyClass:!0,backButton:'<li class="js-drilldown-back"><a tabindex="0">Back</a></li>',backButtonPosition:"top",wrapper:"<div></div>",parentLink:!1,closeOnClick:!1,autoHeight:!1,animateHeight:!1,scrollTop:!1,scrollTopElement:"",scrollTopOffset:0,animationDuration:500,animationEasing:"swing"}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return p});var a=i(0),r=i.n(a),l=i(3),u=i(9),c=i(7),h=i(1),d=i(2),f=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),f(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="DropdownMenu",this._init(),l.a.register("DropdownMenu",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"previous",ESCAPE:"close"})}},{key:"_init",value:function(){u.a.Feather(this.$element,"dropdown");var t=this.$element.find("li.is-dropdown-submenu-parent");this.$element.children(".is-dropdown-submenu-parent").children(".is-dropdown-submenu").addClass("first-sub"),this.$menuItems=this.$element.find('[role="menuitem"]'),this.$tabs=this.$element.children('[role="menuitem"]'),this.$tabs.find("ul.is-dropdown-submenu").addClass(this.options.verticalClass),"auto"===this.options.alignment?this.$element.hasClass(this.options.rightClass)||i.i(h.a)()||this.$element.parents(".top-bar-right").is("*")?(this.options.alignment="right",t.addClass("opens-left")):(this.options.alignment="left",t.addClass("opens-right")):"right"===this.options.alignment?t.addClass("opens-left"):t.addClass("opens-right"),this.changed=!1,this._events()}},{key:"_isVertical",value:function(){return"block"===this.$tabs.css("display")||"column"===this.$element.css("flex-direction")}},{key:"_isRtl",value:function(){return this.$element.hasClass("align-right")||i.i(h.a)()&&!this.$element.hasClass("align-left")}},{key:"_events",value:function(){var t=this,e="ontouchstart"in window||void 0!==window.ontouchstart,i="is-dropdown-submenu-parent",n=function(n){var s=r()(n.target).parentsUntil("ul","."+i),o=s.hasClass(i),a="true"===s.attr("data-is-click"),l=s.children(".is-dropdown-submenu");if(o)if(a){if(!t.options.closeOnClick||!t.options.clickOpen&&!e||t.options.forceFollow&&e)return;n.stopImmediatePropagation(),n.preventDefault(),t._hide(s)}else n.preventDefault(),n.stopImmediatePropagation(),t._show(l),s.add(s.parentsUntil(t.$element,"."+i)).attr("data-is-click",!0)};(this.options.clickOpen||e)&&this.$menuItems.on("click.zf.dropdownmenu touchstart.zf.dropdownmenu",n),t.options.closeOnClickInside&&this.$menuItems.on("click.zf.dropdownmenu",function(e){r()(this).hasClass(i)||t._hide()}),this.options.disableHover||this.$menuItems.on("mouseenter.zf.dropdownmenu",function(e){var n=r()(this);n.hasClass(i)&&(clearTimeout(n.data("_delay")),n.data("_delay",setTimeout(function(){t._show(n.children(".is-dropdown-submenu"))},t.options.hoverDelay)))}).on("mouseleave.zf.dropdownmenu",function(e){var n=r()(this);if(n.hasClass(i)&&t.options.autoclose){if("true"===n.attr("data-is-click")&&t.options.clickOpen)return!1;clearTimeout(n.data("_delay")),n.data("_delay",setTimeout(function(){t._hide(n)},t.options.closingTime))}}),this.$menuItems.on("keydown.zf.dropdownmenu",function(e){var i,n,s=r()(e.target).parentsUntil("ul",'[role="menuitem"]'),o=t.$tabs.index(s)>-1,a=o?t.$tabs:s.siblings("li").add(s);a.each(function(t){if(r()(this).is(s))return i=a.eq(t-1),void(n=a.eq(t+1))});var u=function(){n.children("a:first").focus(),e.preventDefault()},c=function(){i.children("a:first").focus(),e.preventDefault()},h=function(){var i=s.children("ul.is-dropdown-submenu");i.length&&(t._show(i),s.find("li > a:first").focus(),e.preventDefault())},d=function(){var i=s.parent("ul").parent("li");i.children("a:first").focus(),t._hide(i),e.preventDefault()},f={open:h,close:function(){t._hide(t.$element),t.$menuItems.eq(0).children("a").focus(),e.preventDefault()},handled:function(){e.stopImmediatePropagation()}};o?t._isVertical()?t._isRtl()?r.a.extend(f,{down:u,up:c,next:d,previous:h}):r.a.extend(f,{down:u,up:c,next:h,previous:d}):t._isRtl()?r.a.extend(f,{next:c,previous:u,down:h,up:d}):r.a.extend(f,{next:u,previous:c,down:h,up:d}):t._isRtl()?r.a.extend(f,{next:d,previous:h,down:u,up:c}):r.a.extend(f,{next:h,previous:d,down:u,up:c}),l.a.handleKey(e,"DropdownMenu",f)})}},{key:"_addBodyHandler",value:function(){var t=r()(document.body),e=this;t.off("mouseup.zf.dropdownmenu touchend.zf.dropdownmenu").on("mouseup.zf.dropdownmenu touchend.zf.dropdownmenu",function(i){e.$element.find(i.target).length||(e._hide(),t.off("mouseup.zf.dropdownmenu touchend.zf.dropdownmenu"))})}},{key:"_show",value:function(t){var e=this.$tabs.index(this.$tabs.filter(function(e,i){return r()(i).find(t).length>0})),i=t.parent("li.is-dropdown-submenu-parent").siblings("li.is-dropdown-submenu-parent");this._hide(i,e),t.css("visibility","hidden").addClass("js-dropdown-active").parent("li.is-dropdown-submenu-parent").addClass("is-active");var n=c.a.ImNotTouchingYou(t,null,!0);if(!n){var s="left"===this.options.alignment?"-right":"-left",o=t.parent(".is-dropdown-submenu-parent");o.removeClass("opens"+s).addClass("opens-"+this.options.alignment),n=c.a.ImNotTouchingYou(t,null,!0),n||o.removeClass("opens-"+this.options.alignment).addClass("opens-inner"),this.changed=!0}t.css("visibility",""),this.options.closeOnClick&&this._addBodyHandler(),this.$element.trigger("show.zf.dropdownmenu",[t])}},{key:"_hide",value:function(t,e){var i;if(i=t&&t.length?t:void 0!==e?this.$tabs.not(function(t,i){return t===e}):this.$element,i.hasClass("is-active")||i.find(".is-active").length>0){if(i.find("li.is-active").add(i).attr({"data-is-click":!1}).removeClass("is-active"),i.find("ul.js-dropdown-active").removeClass("js-dropdown-active"),this.changed||i.find("opens-inner").length){var n="left"===this.options.alignment?"right":"left";i.find("li.is-dropdown-submenu-parent").add(i).removeClass("opens-inner opens-"+this.options.alignment).addClass("opens-"+n),this.changed=!1}this.$element.trigger("hide.zf.dropdownmenu",[i])}}},{key:"_destroy",value:function(){this.$menuItems.off(".zf.dropdownmenu").removeAttr("data-is-click").removeClass("is-right-arrow is-left-arrow is-down-arrow opens-right opens-left opens-inner"),r()(document.body).off(".zf.dropdownmenu"),u.a.Burn(this.$element,"dropdown")}}]),e}(d.a);p.defaults={disableHover:!1,autoclose:!0,hoverDelay:50,clickOpen:!1,closingTime:500,alignment:"auto",closeOnClick:!0,closeOnClickInside:!0,verticalClass:"vertical",rightClass:"align-right",forceFollow:!0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t,e){var i=e.indexOf(t);return i===e.length-1?e[0]:e[i+1]}i.d(e,"a",function(){return m});var r=i(7),l=i(2),u=i(1),c=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),h=["left","right","top","bottom"],d=["top","bottom","center"],f=["left","right","center"],p={left:d,right:d,top:f,bottom:f},m=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),c(e,[{key:"_init",value:function(){this.triedPositions={},this.position="auto"===this.options.position?this._getDefaultPosition():this.options.position,this.alignment="auto"===this.options.alignment?this._getDefaultAlignment():this.options.alignment}},{key:"_getDefaultPosition",value:function(){return"bottom"}},{key:"_getDefaultAlignment",value:function(){switch(this.position){case"bottom":case"top":return i.i(u.a)()?"right":"left";case"left":case"right":return"bottom"}}},{key:"_reposition",value:function(){this._alignmentsExhausted(this.position)?(this.position=a(this.position,h),this.alignment=p[this.position][0]):this._realign()}},{key:"_realign",value:function(){this._addTriedPosition(this.position,this.alignment),this.alignment=a(this.alignment,p[this.position])}},{key:"_addTriedPosition",value:function(t,e){this.triedPositions[t]=this.triedPositions[t]||[],this.triedPositions[t].push(e)}},{key:"_positionsExhausted",value:function(){for(var t=!0,e=0;e<h.length;e++)t=t&&this._alignmentsExhausted(h[e]);return t}},{key:"_alignmentsExhausted",value:function(t){return this.triedPositions[t]&&this.triedPositions[t].length==p[t].length}},{key:"_getVOffset",value:function(){return this.options.vOffset}},{key:"_getHOffset",value:function(){return this.options.hOffset}},{key:"_setPosition",value:function(t,e,i){if("false"===t.attr("aria-expanded"))return!1;r.a.GetDimensions(e),r.a.GetDimensions(t);if(e.offset(r.a.GetExplicitOffsets(e,t,this.position,this.alignment,this._getVOffset(),this._getHOffset())),!this.options.allowOverlap){for(var n=1e8,s={position:this.position,alignment:this.alignment};!this._positionsExhausted();){var o=r.a.OverlapArea(e,i,!1,!1,this.options.allowBottomOverlap);if(0===o)return;o<n&&(n=o,s={position:this.position,alignment:this.alignment}),this._reposition(),e.offset(r.a.GetExplicitOffsets(e,t,this.position,this.alignment,this._getVOffset(),this._getHOffset()))}this.position=s.position,this.alignment=s.alignment,e.offset(r.a.GetExplicitOffsets(e,t,this.position,this.alignment,this._getVOffset(),this._getHOffset()))}}}]),e}(l.a);m.defaults={position:"auto",alignment:"auto",allowOverlap:!1,allowBottomOverlap:!0,vOffset:0,hOffset:0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return h});var a=i(0),r=i.n(a),l=i(1),u=i(2),c=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),h=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),c(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="SmoothScroll",this._init()}},{key:"_init",value:function(){var t=this.$element[0].id||i.i(l.b)(6,"smooth-scroll");this.$element.attr({id:t}),this._events()}},{key:"_events",value:function(){var t=this,i=function(i){if(!r()(this).is('a[href^="#"]'))return!1;var n=this.getAttribute("href");t._inTransition=!0,e.scrollToLoc(n,t.options,function(){t._inTransition=!1}),i.preventDefault()};this.$element.on("click.zf.smoothScroll",i),this.$element.on("click.zf.smoothScroll",'a[href^="#"]',i)}}],[{key:"scrollToLoc",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e.defaults,n=arguments[2];if(!r()(t).length)return!1;var s=Math.round(r()(t).offset().top-i.threshold/2-i.offset);r()("html, body").stop(!0).animate({scrollTop:s},i.animationDuration,i.animationEasing,function(){n&&"function"==typeof n&&n()})}}]),e}(u.a);h.defaults={animationDuration:500,animationEasing:"linear",threshold:50,offset:0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(3),u=i(8),c=i(2),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Tabs",this._init(),l.a.register("Tabs",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"previous",ARROW_DOWN:"next",ARROW_LEFT:"previous"})}},{key:"_init",value:function(){var t=this,e=this;if(this.$element.attr({role:"tablist"}),this.$tabTitles=this.$element.find("."+this.options.linkClass),this.$tabContent=r()('[data-tabs-content="'+this.$element[0].id+'"]'),this.$tabTitles.each(function(){var t=r()(this),i=t.find("a"),n=t.hasClass(""+e.options.linkActiveClass),s=i.attr("data-tabs-target")||i[0].hash.slice(1),o=i[0].id?i[0].id:s+"-label",a=r()("#"+s);t.attr({role:"presentation"}),i.attr({role:"tab","aria-controls":s,"aria-selected":n,id:o,tabindex:n?"0":"-1"}),a.attr({role:"tabpanel","aria-labelledby":o}),n||a.attr("aria-hidden","true"),n&&e.options.autoFocus&&r()(window).load(function(){r()("html, body").animate({scrollTop:t.offset().top},e.options.deepLinkSmudgeDelay,function(){i.focus()})})}),this.options.matchHeight){var n=this.$tabContent.find("img");n.length?i.i(u.a)(n,this._setHeight.bind(this)):this._setHeight()}this._checkDeepLink=function(){var e=window.location.hash;if(e.length){var i=t.$element.find('[href$="'+e+'"]');if(i.length){if(t.selectTab(r()(e),!0),t.options.deepLinkSmudge){var n=t.$element.offset();r()("html, body").animate({scrollTop:n.top},t.options.deepLinkSmudgeDelay)}t.$element.trigger("deeplink.zf.tabs",[i,r()(e)])}}},this.options.deepLink&&this._checkDeepLink(),this._events()}},{key:"_events",value:function(){this._addKeyHandler(),this._addClickHandler(),this._setHeightMqHandler=null,this.options.matchHeight&&(this._setHeightMqHandler=this._setHeight.bind(this),r()(window).on("changed.zf.mediaquery",this._setHeightMqHandler)),this.options.deepLink&&r()(window).on("popstate",this._checkDeepLink)}},{key:"_addClickHandler",value:function(){var t=this;this.$element.off("click.zf.tabs").on("click.zf.tabs","."+this.options.linkClass,function(e){e.preventDefault(),e.stopPropagation(),t._handleTabChange(r()(this))})}},{key:"_addKeyHandler",value:function(){var t=this;this.$tabTitles.off("keydown.zf.tabs").on("keydown.zf.tabs",function(e){if(9!==e.which){var i,n,s=r()(this),o=s.parent("ul").children("li");o.each(function(e){if(r()(this).is(s))return void(t.options.wrapOnKeys?(i=0===e?o.last():o.eq(e-1),n=e===o.length-1?o.first():o.eq(e+1)):(i=o.eq(Math.max(0,e-1)),n=o.eq(Math.min(e+1,o.length-1))))}),l.a.handleKey(e,"Tabs",{open:function(){s.find('[role="tab"]').focus(),t._handleTabChange(s)},previous:function(){i.find('[role="tab"]').focus(),t._handleTabChange(i)},next:function(){n.find('[role="tab"]').focus(),t._handleTabChange(n)},handled:function(){e.stopPropagation(),e.preventDefault()}})}})}},{key:"_handleTabChange",value:function(t,e){if(t.hasClass(""+this.options.linkActiveClass))return void(this.options.activeCollapse&&(this._collapseTab(t),this.$element.trigger("collapse.zf.tabs",[t])));var i=this.$element.find("."+this.options.linkClass+"."+this.options.linkActiveClass),n=t.find('[role="tab"]'),s=n.attr("data-tabs-target")||n[0].hash.slice(1),o=this.$tabContent.find("#"+s);if(this._collapseTab(i),this._openTab(t),this.options.deepLink&&!e){var a=t.find("a").attr("href");this.options.updateHistory?history.pushState({},"",a):history.replaceState({},"",a)}this.$element.trigger("change.zf.tabs",[t,o]),o.find("[data-mutate]").trigger("mutateme.zf.trigger")}},{key:"_openTab",value:function(t){var e=t.find('[role="tab"]'),i=e.attr("data-tabs-target")||e[0].hash.slice(1),n=this.$tabContent.find("#"+i);t.addClass(""+this.options.linkActiveClass),e.attr({"aria-selected":"true",tabindex:"0"}),n.addClass(""+this.options.panelActiveClass).removeAttr("aria-hidden")}},{key:"_collapseTab",value:function(t){var e=t.removeClass(""+this.options.linkActiveClass).find('[role="tab"]').attr({"aria-selected":"false",tabindex:-1});r()("#"+e.attr("aria-controls")).removeClass(""+this.options.panelActiveClass).attr({"aria-hidden":"true"})}},{key:"selectTab",value:function(t,e){var i;i="object"==typeof t?t[0].id:t,i.indexOf("#")<0&&(i="#"+i);var n=this.$tabTitles.find('[href$="'+i+'"]').parent("."+this.options.linkClass);this._handleTabChange(n,e)}},{key:"_setHeight",value:function(){var t=0,e=this;this.$tabContent.find("."+this.options.panelClass).css("height","").each(function(){var i=r()(this),n=i.hasClass(""+e.options.panelActiveClass);n||i.css({visibility:"hidden",display:"block"});var s=this.getBoundingClientRect().height;n||i.css({visibility:"",display:""}),t=s>t?s:t}).css("height",t+"px")}},{key:"_destroy",value:function(){this.$element.find("."+this.options.linkClass).off(".zf.tabs").hide().end().find("."+this.options.panelClass).hide(),this.options.matchHeight&&null!=this._setHeightMqHandler&&r()(window).off("changed.zf.mediaquery",this._setHeightMqHandler),this.options.deepLink&&r()(window).off("popstate",this._checkDeepLink)}}]),e}(c.a);d.defaults={deepLink:!1,deepLinkSmudge:!1,deepLinkSmudgeDelay:300,updateHistory:!1,autoFocus:!1,wrapOnKeys:!0,matchHeight:!1,activeCollapse:!1,linkClass:"tabs-title",linkActiveClass:"is-active",panelClass:"tabs-panel",panelActiveClass:"is-active"}},function(t,e,i){"use strict";function n(t,e,i){var n,s,o=this,a=e.duration,r=Object.keys(t.data())[0]||"timer",l=-1;this.isPaused=!1,this.restart=function(){l=-1,clearTimeout(s),this.start()},this.start=function(){this.isPaused=!1,clearTimeout(s),l=l<=0?a:l,t.data("paused",!1),n=Date.now(),s=setTimeout(function(){e.infinite&&o.restart(),i&&"function"==typeof i&&i()},l),t.trigger("timerstart.zf."+r)},this.pause=function(){this.isPaused=!0,clearTimeout(s),t.data("paused",!0);var e=Date.now();l-=e-n,t.trigger("timerpaused.zf."+r)}}i.d(e,"a",function(){return n});var s=i(0);i.n(s)},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(0),s=i.n(n),o=i(21),a=i(1),r=i(7),l=i(8),u=i(3),c=i(4),h=i(6),d=i(9),f=i(18),p=i(10),m=i(5),g=i(20),v=i(11),b=i(12),y=i(13),w=i(22),_=i(14),$=i(23),k=i(24),C=i(25),z=i(26),O=i(27),T=i(29),E=i(30),P=i(31),A=i(32),F=i(16),x=i(33),D=i(17),S=i(34),R=i(35),H=i(28);o.a.addToJquery(s.a),o.a.rtl=a.a,o.a.GetYoDigits=a.b,o.a.transitionend=a.c,o.a.Box=r.a,o.a.onImagesLoaded=l.a,o.a.Keyboard=u.a,o.a.MediaQuery=c.a,o.a.Motion=h.a,o.a.Move=h.b,o.a.Nest=d.a,o.a.Timer=f.a,p.a.init(s.a),m.a.init(s.a,o.a),o.a.plugin(g.a,"Abide"),o.a.plugin(v.a,"Accordion"),o.a.plugin(b.a,"AccordionMenu"),o.a.plugin(y.a,"Drilldown"),o.a.plugin(w.a,"Dropdown"),o.a.plugin(_.a,"DropdownMenu"),o.a.plugin($.a,"Equalizer"),o.a.plugin(k.a,"Interchange"),o.a.plugin(C.a,"Magellan"),o.a.plugin(z.a,"OffCanvas"),o.a.plugin(O.a,"Orbit"),o.a.plugin(T.a,"ResponsiveMenu"),o.a.plugin(E.a,"ResponsiveToggle"),o.a.plugin(P.a,"Reveal"),o.a.plugin(A.a,"Slider"),o.a.plugin(F.a,"SmoothScroll"),o.a.plugin(x.a,"Sticky"),o.a.plugin(D.a,"Tabs"),o.a.plugin(S.a,"Toggler"),o.a.plugin(R.a,"Tooltip"),o.a.plugin(H.a,"ResponsiveAccordionTabs")},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return c});var a=i(0),r=i.n(a),l=i(2),u=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),c=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),u(e,[{key:"_setup",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.$element=t,this.options=r.a.extend(!0,{},e.defaults,this.$element.data(),i),this.className="Abide",this._init()}},{key:"_init",value:function(){this.$inputs=this.$element.find("input, textarea, select"),this._events()}},{key:"_events",value:function(){var t=this;this.$element.off(".abide").on("reset.zf.abide",function(){t.resetForm()}).on("submit.zf.abide",function(){return t.validateForm()}),"fieldChange"===this.options.validateOn&&this.$inputs.off("change.zf.abide").on("change.zf.abide",function(e){t.validateInput(r()(e.target))}),this.options.liveValidate&&this.$inputs.off("input.zf.abide").on("input.zf.abide",function(e){t.validateInput(r()(e.target))}),this.options.validateOnBlur&&this.$inputs.off("blur.zf.abide").on("blur.zf.abide",function(e){t.validateInput(r()(e.target))})}},{key:"_reflow",value:function(){this._init()}},{key:"requiredCheck",value:function(t){if(!t.attr("required"))return!0;var e=!0;switch(t[0].type){case"checkbox":e=t[0].checked;break;case"select":case"select-one":case"select-multiple":var i=t.find("option:selected");i.length&&i.val()||(e=!1);break;default:t.val()&&t.val().length||(e=!1)}return e}},{key:"findFormError",value:function(t){var e=t[0].id,i=t.siblings(this.options.formErrorSelector);return i.length||(i=t.parent().find(this.options.formErrorSelector)),i=i.add(this.$element.find('[data-form-error-for="'+e+'"]'))}},{key:"findLabel",value:function(t){var e=t[0].id,i=this.$element.find('label[for="'+e+'"]');return i.length?i:t.closest("label")}},{key:"findRadioLabels",value:function(t){var e=this,i=t.map(function(t,i){var n=i.id,s=e.$element.find('label[for="'+n+'"]');return s.length||(s=r()(i).closest("label")),s[0]});return r()(i)}},{key:"addErrorClasses",value:function(t){var e=this.findLabel(t),i=this.findFormError(t);e.length&&e.addClass(this.options.labelErrorClass),i.length&&i.addClass(this.options.formErrorClass),t.addClass(this.options.inputErrorClass).attr("data-invalid","")}},{key:"removeRadioErrorClasses",value:function(t){var e=this.$element.find(':radio[name="'+t+'"]'),i=this.findRadioLabels(e),n=this.findFormError(e);i.length&&i.removeClass(this.options.labelErrorClass),n.length&&n.removeClass(this.options.formErrorClass),e.removeClass(this.options.inputErrorClass).removeAttr("data-invalid")}},{key:"removeErrorClasses",value:function(t){if("radio"==t[0].type)return this.removeRadioErrorClasses(t.attr("name"));var e=this.findLabel(t),i=this.findFormError(t);e.length&&e.removeClass(this.options.labelErrorClass),i.length&&i.removeClass(this.options.formErrorClass),t.removeClass(this.options.inputErrorClass).removeAttr("data-invalid")}},{key:"validateInput",value:function(t){var e=this.requiredCheck(t),i=!1,n=!0,s=t.attr("data-validator"),o=!0;if(t.is("[data-abide-ignore]")||t.is('[type="hidden"]')||t.is("[disabled]"))return!0;switch(t[0].type){case"radio":i=this.validateRadio(t.attr("name"));break;case"checkbox":i=e;break;case"select":case"select-one":case"select-multiple":i=e;break;default:i=this.validateText(t)}s&&(n=this.matchValidation(t,s,t.attr("required"))),t.attr("data-equalto")&&(o=this.options.validators.equalTo(t));var a=-1===[e,i,n,o].indexOf(!1),l=(a?"valid":"invalid")+".zf.abide";if(a){var u=this.$element.find('[data-equalto="'+t.attr("id")+'"]');if(u.length){var c=this;u.each(function(){r()(this).val()&&c.validateInput(r()(this))})}}return this[a?"removeErrorClasses":"addErrorClasses"](t),t.trigger(l,[t]),a}},{key:"validateForm",value:function(){var t=[],e=this;this.$inputs.each(function(){t.push(e.validateInput(r()(this)))});var i=-1===t.indexOf(!1);return this.$element.find("[data-abide-error]").css("display",i?"none":"block"),this.$element.trigger((i?"formvalid":"forminvalid")+".zf.abide",[this.$element]),i}},{key:"validateText",value:function(t,e){e=e||t.attr("pattern")||t.attr("type")
+ ;var i=t.val(),n=!1;return i.length?n=this.options.patterns.hasOwnProperty(e)?this.options.patterns[e].test(i):e===t.attr("type")||new RegExp(e).test(i):t.prop("required")||(n=!0),n}},{key:"validateRadio",value:function(t){var e=this.$element.find(':radio[name="'+t+'"]'),i=!1,n=!1;return e.each(function(t,e){r()(e).attr("required")&&(n=!0)}),n||(i=!0),i||e.each(function(t,e){r()(e).prop("checked")&&(i=!0)}),i}},{key:"matchValidation",value:function(t,e,i){var n=this;return i=!!i,-1===e.split(" ").map(function(e){return n.options.validators[e](t,i,t.parent())}).indexOf(!1)}},{key:"resetForm",value:function(){var t=this.$element,e=this.options;r()("."+e.labelErrorClass,t).not("small").removeClass(e.labelErrorClass),r()("."+e.inputErrorClass,t).not("small").removeClass(e.inputErrorClass),r()(e.formErrorSelector+"."+e.formErrorClass).removeClass(e.formErrorClass),t.find("[data-abide-error]").css("display","none"),r()(":input",t).not(":button, :submit, :reset, :hidden, :radio, :checkbox, [data-abide-ignore]").val("").removeAttr("data-invalid"),r()(":input:radio",t).not("[data-abide-ignore]").prop("checked",!1).removeAttr("data-invalid"),r()(":input:checkbox",t).not("[data-abide-ignore]").prop("checked",!1).removeAttr("data-invalid"),t.trigger("formreset.zf.abide",[t])}},{key:"_destroy",value:function(){var t=this;this.$element.off(".abide").find("[data-abide-error]").css("display","none"),this.$inputs.off(".abide").each(function(){t.removeErrorClasses(r()(this))})}}]),e}(l.a);c.defaults={validateOn:"fieldChange",labelErrorClass:"is-invalid-label",inputErrorClass:"is-invalid-input",formErrorSelector:".form-error",formErrorClass:"is-visible",liveValidate:!1,validateOnBlur:!1,patterns:{alpha:/^[a-zA-Z]+$/,alpha_numeric:/^[a-zA-Z0-9]+$/,integer:/^[-+]?\d+$/,number:/^[-+]?\d*(?:[\.\,]\d+)?$/,card:/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|(?:222[1-9]|2[3-6][0-9]{2}|27[0-1][0-9]|2720)[0-9]{12}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,cvv:/^([0-9]){3,4}$/,email:/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,url:/^(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,domain:/^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,datetime:/^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,date:/(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,time:/^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,dateISO:/^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,month_day_year:/^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,day_month_year:/^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,color:/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,website:{test:function(t){return c.defaults.patterns.domain.test(t)||c.defaults.patterns.url.test(t)}}},validators:{equalTo:function(t,e,i){return r()("#"+t.attr("data-equalto")).val()===t.val()}}}},function(t,e,i){"use strict";function n(t){if(void 0===Function.prototype.name){var e=/function\s([^(]{1,})\(/,i=e.exec(t.toString());return i&&i.length>1?i[1].trim():""}return void 0===t.prototype?t.constructor.name:t.prototype.constructor.name}function s(t){return"true"===t||"false"!==t&&(isNaN(1*t)?t:parseFloat(t))}function o(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}i.d(e,"a",function(){return c});var a=i(0),r=i.n(a),l=i(1),u=i(4),c={version:"6.4.3",_plugins:{},_uuids:[],plugin:function(t,e){var i=e||n(t),s=o(i);this._plugins[s]=this[i]=t},registerPlugin:function(t,e){var s=e?o(e):n(t.constructor).toLowerCase();t.uuid=i.i(l.b)(6,s),t.$element.attr("data-"+s)||t.$element.attr("data-"+s,t.uuid),t.$element.data("zfPlugin")||t.$element.data("zfPlugin",t),t.$element.trigger("init.zf."+s),this._uuids.push(t.uuid)},unregisterPlugin:function(t){var e=o(n(t.$element.data("zfPlugin").constructor));this._uuids.splice(this._uuids.indexOf(t.uuid),1),t.$element.removeAttr("data-"+e).removeData("zfPlugin").trigger("destroyed.zf."+e);for(var i in t)t[i]=null},reInit:function(t){var e=t instanceof r.a;try{if(e)t.each(function(){r()(this).data("zfPlugin")._init()});else{var i=typeof t,n=this;({object:function(t){t.forEach(function(t){t=o(t),r()("[data-"+t+"]").foundation("_init")})},string:function(){t=o(t),r()("[data-"+t+"]").foundation("_init")},undefined:function(){this.object(Object.keys(n._plugins))}})[i](t)}}catch(t){console.error(t)}finally{return t}},reflow:function(t,e){void 0===e?e=Object.keys(this._plugins):"string"==typeof e&&(e=[e]);var i=this;r.a.each(e,function(e,n){var o=i._plugins[n];r()(t).find("[data-"+n+"]").addBack("[data-"+n+"]").each(function(){var t=r()(this),e={};if(t.data("zfPlugin"))return void console.warn("Tried to initialize "+n+" on an element that already has a Foundation plugin.");t.attr("data-options")&&t.attr("data-options").split(";").forEach(function(t,i){var n=t.split(":").map(function(t){return t.trim()});n[0]&&(e[n[0]]=s(n[1]))});try{t.data("zfPlugin",new o(r()(this),e))}catch(t){console.error(t)}finally{return}})})},getFnName:n,addToJquery:function(t){var e=function(e){var i=typeof e,s=t(".no-js");if(s.length&&s.removeClass("no-js"),"undefined"===i)u.a._init(),c.reflow(this);else{if("string"!==i)throw new TypeError("We're sorry, "+i+" is not a valid parameter. You must use a string representing the method you wish to invoke.");var o=Array.prototype.slice.call(arguments,1),a=this.data("zfPlugin");if(void 0===a||void 0===a[e])throw new ReferenceError("We're sorry, '"+e+"' is not an available method for "+(a?n(a):"this element")+".");1===this.length?a[e].apply(a,o):this.each(function(i,n){a[e].apply(t(n).data("zfPlugin"),o)})}return this};return t.fn.foundation=e,t}};c.util={throttle:function(t,e){var i=null;return function(){var n=this,s=arguments;null===i&&(i=setTimeout(function(){t.apply(n,s),i=null},e))}}},window.Foundation=c,function(){Date.now&&window.Date.now||(window.Date.now=Date.now=function(){return(new Date).getTime()});for(var t=["webkit","moz"],e=0;e<t.length&&!window.requestAnimationFrame;++e){var i=t[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var n=0;window.requestAnimationFrame=function(t){var e=Date.now(),i=Math.max(n+16,e);return setTimeout(function(){t(n=i)},i-e)},window.cancelAnimationFrame=clearTimeout}window.performance&&window.performance.now||(window.performance={start:Date.now(),now:function(){return Date.now()-this.start}})}(),Function.prototype.bind||(Function.prototype.bind=function(t){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var e=Array.prototype.slice.call(arguments,1),i=this,n=function(){},s=function(){return i.apply(this instanceof n?this:t,e.concat(Array.prototype.slice.call(arguments)))};return this.prototype&&(n.prototype=this.prototype),s.prototype=new n,s})},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return p});var a=i(0),r=i.n(a),l=i(3),u=i(1),c=i(15),h=i(5),d=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),f=function t(e,i,n){null===e&&(e=Function.prototype);var s=Object.getOwnPropertyDescriptor(e,i);if(void 0===s){var o=Object.getPrototypeOf(e);return null===o?void 0:t(o,i,n)}if("value"in s)return s.value;var a=s.get;if(void 0!==a)return a.call(n)},p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),d(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Dropdown",h.a.init(r.a),this._init(),l.a.register("Dropdown",{ENTER:"open",SPACE:"open",ESCAPE:"close"})}},{key:"_init",value:function(){var t=this.$element.attr("id");this.$anchors=r()('[data-toggle="'+t+'"]').length?r()('[data-toggle="'+t+'"]'):r()('[data-open="'+t+'"]'),this.$anchors.attr({"aria-controls":t,"data-is-focus":!1,"data-yeti-box":t,"aria-haspopup":!0,"aria-expanded":!1}),this._setCurrentAnchor(this.$anchors.first()),this.options.parentClass?this.$parent=this.$element.parents("."+this.options.parentClass):this.$parent=null,this.$element.attr({"aria-hidden":"true","data-yeti-box":t,"data-resize":t,"aria-labelledby":this.$currentAnchor.id||i.i(u.b)(6,"dd-anchor")}),f(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"_init",this).call(this),this._events()}},{key:"_getDefaultPosition",value:function(){var t=this.$element[0].className.match(/(top|left|right|bottom)/g);return t?t[0]:"bottom"}},{key:"_getDefaultAlignment",value:function(){var t=/float-(\S+)/.exec(this.$currentAnchor.className);return t?t[1]:f(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"_getDefaultAlignment",this).call(this)}},{key:"_setPosition",value:function(){f(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"_setPosition",this).call(this,this.$currentAnchor,this.$element,this.$parent)}},{key:"_setCurrentAnchor",value:function(t){this.$currentAnchor=r()(t)}},{key:"_events",value:function(){var t=this;this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"resizeme.zf.trigger":this._setPosition.bind(this)}),this.$anchors.off("click.zf.trigger").on("click.zf.trigger",function(){t._setCurrentAnchor(this)}),this.options.hover&&(this.$anchors.off("mouseenter.zf.dropdown mouseleave.zf.dropdown").on("mouseenter.zf.dropdown",function(){t._setCurrentAnchor(this);var e=r()("body").data();void 0!==e.whatinput&&"mouse"!==e.whatinput||(clearTimeout(t.timeout),t.timeout=setTimeout(function(){t.open(),t.$anchors.data("hover",!0)},t.options.hoverDelay))}).on("mouseleave.zf.dropdown",function(){clearTimeout(t.timeout),t.timeout=setTimeout(function(){t.close(),t.$anchors.data("hover",!1)},t.options.hoverDelay)}),this.options.hoverPane&&this.$element.off("mouseenter.zf.dropdown mouseleave.zf.dropdown").on("mouseenter.zf.dropdown",function(){clearTimeout(t.timeout)}).on("mouseleave.zf.dropdown",function(){clearTimeout(t.timeout),t.timeout=setTimeout(function(){t.close(),t.$anchors.data("hover",!1)},t.options.hoverDelay)})),this.$anchors.add(this.$element).on("keydown.zf.dropdown",function(e){var i=r()(this);l.a.findFocusable(t.$element);l.a.handleKey(e,"Dropdown",{open:function(){i.is(t.$anchors)&&(t.open(),t.$element.attr("tabindex",-1).focus(),e.preventDefault())},close:function(){t.close(),t.$anchors.focus()}})})}},{key:"_addBodyHandler",value:function(){var t=r()(document.body).not(this.$element),e=this;t.off("click.zf.dropdown").on("click.zf.dropdown",function(i){e.$anchors.is(i.target)||e.$anchors.find(i.target).length||e.$element.find(i.target).length||(e.close(),t.off("click.zf.dropdown"))})}},{key:"open",value:function(){if(this.$element.trigger("closeme.zf.dropdown",this.$element.attr("id")),this.$anchors.addClass("hover").attr({"aria-expanded":!0}),this.$element.addClass("is-opening"),this._setPosition(),this.$element.removeClass("is-opening").addClass("is-open").attr({"aria-hidden":!1}),this.options.autoFocus){var t=l.a.findFocusable(this.$element);t.length&&t.eq(0).focus()}this.options.closeOnClick&&this._addBodyHandler(),this.options.trapFocus&&l.a.trapFocus(this.$element),this.$element.trigger("show.zf.dropdown",[this.$element])}},{key:"close",value:function(){if(!this.$element.hasClass("is-open"))return!1;this.$element.removeClass("is-open").attr({"aria-hidden":!0}),this.$anchors.removeClass("hover").attr("aria-expanded",!1),this.$element.trigger("hide.zf.dropdown",[this.$element]),this.options.trapFocus&&l.a.releaseFocus(this.$element)}},{key:"toggle",value:function(){if(this.$element.hasClass("is-open")){if(this.$anchors.data("hover"))return;this.close()}else this.open()}},{key:"_destroy",value:function(){this.$element.off(".zf.trigger").hide(),this.$anchors.off(".zf.dropdown"),r()(document.body).off("click.zf.dropdown")}}]),e}(c.a);p.defaults={parentClass:null,hoverDelay:250,hover:!1,hoverPane:!1,vOffset:0,hOffset:0,positionClass:"",position:"auto",alignment:"auto",allowOverlap:!1,allowBottomOverlap:!0,trapFocus:!1,autoFocus:!1,closeOnClick:!1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return f});var a=i(0),r=i.n(a),l=i(4),u=i(8),c=i(1),h=i(2),d=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),f=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),d(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Equalizer",this._init()}},{key:"_init",value:function(){var t=this.$element.attr("data-equalizer")||"",e=this.$element.find('[data-equalizer-watch="'+t+'"]');l.a._init(),this.$watched=e.length?e:this.$element.find("[data-equalizer-watch]"),this.$element.attr("data-resize",t||i.i(c.b)(6,"eq")),this.$element.attr("data-mutate",t||i.i(c.b)(6,"eq")),this.hasNested=this.$element.find("[data-equalizer]").length>0,this.isNested=this.$element.parentsUntil(document.body,"[data-equalizer]").length>0,this.isOn=!1,this._bindHandler={onResizeMeBound:this._onResizeMe.bind(this),onPostEqualizedBound:this._onPostEqualized.bind(this)};var n,s=this.$element.find("img");this.options.equalizeOn?(n=this._checkMQ(),r()(window).on("changed.zf.mediaquery",this._checkMQ.bind(this))):this._events(),(void 0!==n&&!1===n||void 0===n)&&(s.length?i.i(u.a)(s,this._reflow.bind(this)):this._reflow())}},{key:"_pauseEvents",value:function(){this.isOn=!1,this.$element.off({".zf.equalizer":this._bindHandler.onPostEqualizedBound,"resizeme.zf.trigger":this._bindHandler.onResizeMeBound,"mutateme.zf.trigger":this._bindHandler.onResizeMeBound})}},{key:"_onResizeMe",value:function(t){this._reflow()}},{key:"_onPostEqualized",value:function(t){t.target!==this.$element[0]&&this._reflow()}},{key:"_events",value:function(){this._pauseEvents(),this.hasNested?this.$element.on("postequalized.zf.equalizer",this._bindHandler.onPostEqualizedBound):(this.$element.on("resizeme.zf.trigger",this._bindHandler.onResizeMeBound),this.$element.on("mutateme.zf.trigger",this._bindHandler.onResizeMeBound)),this.isOn=!0}},{key:"_checkMQ",value:function(){var t=!l.a.is(this.options.equalizeOn);return t?this.isOn&&(this._pauseEvents(),this.$watched.css("height","auto")):this.isOn||this._events(),t}},{key:"_killswitch",value:function(){}},{key:"_reflow",value:function(){if(!this.options.equalizeOnStack&&this._isStacked())return this.$watched.css("height","auto"),!1;this.options.equalizeByRow?this.getHeightsByRow(this.applyHeightByRow.bind(this)):this.getHeights(this.applyHeight.bind(this))}},{key:"_isStacked",value:function(){return!this.$watched[0]||!this.$watched[1]||this.$watched[0].getBoundingClientRect().top!==this.$watched[1].getBoundingClientRect().top}},{key:"getHeights",value:function(t){for(var e=[],i=0,n=this.$watched.length;i<n;i++)this.$watched[i].style.height="auto",e.push(this.$watched[i].offsetHeight);t(e)}},{key:"getHeightsByRow",value:function(t){var e=this.$watched.length?this.$watched.first().offset().top:0,i=[],n=0;i[n]=[];for(var s=0,o=this.$watched.length;s<o;s++){this.$watched[s].style.height="auto";var a=r()(this.$watched[s]).offset().top;a!=e&&(n++,i[n]=[],e=a),i[n].push([this.$watched[s],this.$watched[s].offsetHeight])}for(var l=0,u=i.length;l<u;l++){var c=r()(i[l]).map(function(){return this[1]}).get(),h=Math.max.apply(null,c);i[l].push(h)}t(i)}},{key:"applyHeight",value:function(t){var e=Math.max.apply(null,t);this.$element.trigger("preequalized.zf.equalizer"),this.$watched.css("height",e),this.$element.trigger("postequalized.zf.equalizer")}},{key:"applyHeightByRow",value:function(t){this.$element.trigger("preequalized.zf.equalizer");for(var e=0,i=t.length;e<i;e++){var n=t[e].length,s=t[e][n-1];if(n<=2)r()(t[e][0][0]).css({height:"auto"});else{this.$element.trigger("preequalizedrow.zf.equalizer");for(var o=0,a=n-1;o<a;o++)r()(t[e][o][0]).css({height:s});this.$element.trigger("postequalizedrow.zf.equalizer")}}this.$element.trigger("postequalized.zf.equalizer")}},{key:"_destroy",value:function(){this._pauseEvents(),this.$watched.css("height","auto")}}]),e}(h.a);f.defaults={equalizeOnStack:!1,equalizeByRow:!1,equalizeOn:""}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(4),u=i(2),c=i(1),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,i),this.rules=[],this.currentPath="",this.className="Interchange",this._init(),this._events()}},{key:"_init",value:function(){l.a._init();var t=this.$element[0].id||i.i(c.b)(6,"interchange");this.$element.attr({"data-resize":t,id:t}),this._addBreakpoints(),this._generateRules(),this._reflow()}},{key:"_events",value:function(){var t=this;this.$element.off("resizeme.zf.trigger").on("resizeme.zf.trigger",function(){return t._reflow()})}},{key:"_reflow",value:function(){var t;for(var e in this.rules)if(this.rules.hasOwnProperty(e)){var i=this.rules[e];window.matchMedia(i.query).matches&&(t=i)}t&&this.replace(t.path)}},{key:"_addBreakpoints",value:function(){for(var t in l.a.queries)if(l.a.queries.hasOwnProperty(t)){var i=l.a.queries[t];e.SPECIAL_QUERIES[i.name]=i.value}}},{key:"_generateRules",value:function(t){var i,n=[];i=this.options.rules?this.options.rules:this.$element.data("interchange"),i="string"==typeof i?i.match(/\[.*?\]/g):i;for(var s in i)if(i.hasOwnProperty(s)){var o=i[s].slice(1,-1).split(", "),a=o.slice(0,-1).join(""),r=o[o.length-1];e.SPECIAL_QUERIES[r]&&(r=e.SPECIAL_QUERIES[r]),n.push({path:a,query:r})}this.rules=n}},{key:"replace",value:function(t){if(this.currentPath!==t){var e=this,i="replaced.zf.interchange";"IMG"===this.$element[0].nodeName?this.$element.attr("src",t).on("load",function(){e.currentPath=t}).trigger(i):t.match(/\.(gif|jpg|jpeg|png|svg|tiff)([?#].*)?/i)?(t=t.replace(/\(/g,"%28").replace(/\)/g,"%29"),this.$element.css({"background-image":"url("+t+")"}).trigger(i)):r.a.get(t,function(n){e.$element.html(n).trigger(i),r()(n).foundation(),e.currentPath=t})}}},{key:"_destroy",value:function(){this.$element.off("resizeme.zf.trigger")}}]),e}(u.a);d.defaults={rules:null},d.SPECIAL_QUERIES={landscape:"screen and (orientation: landscape)",portrait:"screen and (orientation: portrait)",retina:"only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)"}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(1),u=i(2),c=i(16),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Magellan",this._init(),this.calcPoints()}},{key:"_init",value:function(){var t=this.$element[0].id||i.i(l.b)(6,"magellan");this.$targets=r()("[data-magellan-target]"),this.$links=this.$element.find("a"),this.$element.attr({"data-resize":t,"data-scroll":t,id:t}),this.$active=r()(),this.scrollPos=parseInt(window.pageYOffset,10),this._events()}},{key:"calcPoints",value:function(){var t=this,e=document.body,i=document.documentElement;this.points=[],this.winHeight=Math.round(Math.max(window.innerHeight,i.clientHeight)),this.docHeight=Math.round(Math.max(e.scrollHeight,e.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight)),this.$targets.each(function(){var e=r()(this),i=Math.round(e.offset().top-t.options.threshold);e.targetPoint=i,t.points.push(i)})}},{key:"_events",value:function(){var t=this;r()("html, body"),t.options.animationDuration,t.options.animationEasing;r()(window).one("load",function(){t.options.deepLinking&&location.hash&&t.scrollToLoc(location.hash),t.calcPoints(),t._updateActive()}),this.$element.on({"resizeme.zf.trigger":this.reflow.bind(this),"scrollme.zf.trigger":this._updateActive.bind(this)}).on("click.zf.magellan",'a[href^="#"]',function(e){e.preventDefault();var i=this.getAttribute("href");t.scrollToLoc(i)}),this._deepLinkScroll=function(e){t.options.deepLinking&&t.scrollToLoc(window.location.hash)},r()(window).on("popstate",this._deepLinkScroll)}},{key:"scrollToLoc",value:function(t){this._inTransition=!0;var e=this,i={animationEasing:this.options.animationEasing,animationDuration:this.options.animationDuration,threshold:this.options.threshold,offset:this.options.offset};c.a.scrollToLoc(t,i,function(){e._inTransition=!1,e._updateActive()})}},{key:"reflow",value:function(){this.calcPoints(),this._updateActive()}},{key:"_updateActive",value:function(){if(!this._inTransition){var t,e=parseInt(window.pageYOffset,10);if(e+this.winHeight===this.docHeight)t=this.points.length-1;else if(e<this.points[0])t=void 0;else{var i=this.scrollPos<e,n=this,s=this.points.filter(function(t,s){return i?t-n.options.offset<=e:t-n.options.offset-n.options.threshold<=e});t=s.length?s.length-1:0}if(this.$active.removeClass(this.options.activeClass),this.$active=this.$links.filter('[href="#'+this.$targets.eq(t).data("magellan-target")+'"]').addClass(this.options.activeClass),this.options.deepLinking){var o="";void 0!=t&&(o=this.$active[0].getAttribute("href")),o!==window.location.hash&&(window.history.pushState?window.history.pushState(null,null,o):window.location.hash=o)}this.scrollPos=e,this.$element.trigger("update.zf.magellan",[this.$active])}}},{key:"_destroy",value:function(){if(this.$element.off(".zf.trigger .zf.magellan").find("."+this.options.activeClass).removeClass(this.options.activeClass),this.options.deepLinking){var t=this.$active[0].getAttribute("href");window.location.hash.replace(t,"")}r()(window).off("popstate",this._deepLinkScroll)}}]),e}(u.a);d.defaults={animationDuration:500,animationEasing:"linear",threshold:50,activeClass:"is-active",deepLinking:!1,offset:0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return p});var a=i(0),r=i.n(a),l=i(3),u=i(4),c=i(1),h=i(2),d=i(5),f=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),f(e,[{key:"_setup",value:function(t,i){var n=this;this.className="OffCanvas",this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.contentClasses={base:[],reveal:[]},this.$lastTrigger=r()(),this.$triggers=r()(),this.position="left",this.$content=r()(),this.nested=!!this.options.nested,r()(["push","overlap"]).each(function(t,e){n.contentClasses.base.push("has-transition-"+e)}),r()(["left","right","top","bottom"]).each(function(t,e){n.contentClasses.base.push("has-position-"+e),n.contentClasses.reveal.push("has-reveal-"+e)}),d.a.init(r.a),u.a._init(),this._init(),this._events(),l.a.register("OffCanvas",{ESCAPE:"close"})}},{key:"_init",value:function(){var t=this.$element.attr("id");if(this.$element.attr("aria-hidden","true"),this.options.contentId?this.$content=r()("#"+this.options.contentId):this.$element.siblings("[data-off-canvas-content]").length?this.$content=this.$element.siblings("[data-off-canvas-content]").first():this.$content=this.$element.closest("[data-off-canvas-content]").first(),this.options.contentId?this.options.contentId&&null===this.options.nested&&console.warn("Remember to use the nested option if using the content ID option!"):this.nested=0===this.$element.siblings("[data-off-canvas-content]").length,!0===this.nested&&(this.options.transition="overlap",this.$element.removeClass("is-transition-push")),this.$element.addClass("is-transition-"+this.options.transition+" is-closed"),this.$triggers=r()(document).find('[data-open="'+t+'"], [data-close="'+t+'"], [data-toggle="'+t+'"]').attr("aria-expanded","false").attr("aria-controls",t),this.position=this.$element.is(".position-left, .position-top, .position-right, .position-bottom")?this.$element.attr("class").match(/position\-(left|top|right|bottom)/)[1]:this.position,!0===this.options.contentOverlay){var e=document.createElement("div"),i="fixed"===r()(this.$element).css("position")?"is-overlay-fixed":"is-overlay-absolute";e.setAttribute("class","js-off-canvas-overlay "+i),this.$overlay=r()(e),"is-overlay-fixed"===i?r()(this.$overlay).insertAfter(this.$element):this.$content.append(this.$overlay)}this.options.isRevealed=this.options.isRevealed||new RegExp(this.options.revealClass,"g").test(this.$element[0].className),!0===this.options.isRevealed&&(this.options.revealOn=this.options.revealOn||this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split("-")[2],this._setMQChecker()),this.options.transitionTime&&this.$element.css("transition-duration",this.options.transitionTime),this._removeContentClasses()}},{key:"_events",value:function(){if(this.$element.off(".zf.trigger .zf.offcanvas").on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"keydown.zf.offcanvas":this._handleKeyboard.bind(this)}),!0===this.options.closeOnClick){(this.options.contentOverlay?this.$overlay:this.$content).on({"click.zf.offcanvas":this.close.bind(this)})}}},{key:"_setMQChecker",value:function(){var t=this;r()(window).on("changed.zf.mediaquery",function(){u.a.atLeast(t.options.revealOn)?t.reveal(!0):t.reveal(!1)}).one("load.zf.offcanvas",function(){u.a.atLeast(t.options.revealOn)&&t.reveal(!0)})}},{key:"_removeContentClasses",value:function(t){"boolean"!=typeof t?this.$content.removeClass(this.contentClasses.base.join(" ")):!1===t&&this.$content.removeClass("has-reveal-"+this.position)}},{key:"_addContentClasses",value:function(t){this._removeContentClasses(t),"boolean"!=typeof t?this.$content.addClass("has-transition-"+this.options.transition+" has-position-"+this.position):!0===t&&this.$content.addClass("has-reveal-"+this.position)}},{key:"reveal",value:function(t){t?(this.close(),this.isRevealed=!0,this.$element.attr("aria-hidden","false"),this.$element.off("open.zf.trigger toggle.zf.trigger"),this.$element.removeClass("is-closed")):(this.isRevealed=!1,this.$element.attr("aria-hidden","true"),this.$element.off("open.zf.trigger toggle.zf.trigger").on({"open.zf.trigger":this.open.bind(this),"toggle.zf.trigger":this.toggle.bind(this)}),this.$element.addClass("is-closed")),this._addContentClasses(t)}},{key:"_stopScrolling",value:function(t){return!1}},{key:"_recordScrollable",value:function(t){var e=this
+ ;e.scrollHeight!==e.clientHeight&&(0===e.scrollTop&&(e.scrollTop=1),e.scrollTop===e.scrollHeight-e.clientHeight&&(e.scrollTop=e.scrollHeight-e.clientHeight-1)),e.allowUp=e.scrollTop>0,e.allowDown=e.scrollTop<e.scrollHeight-e.clientHeight,e.lastY=t.originalEvent.pageY}},{key:"_stopScrollPropagation",value:function(t){var e=this,i=t.pageY<e.lastY,n=!i;e.lastY=t.pageY,i&&e.allowUp||n&&e.allowDown?t.stopPropagation():t.preventDefault()}},{key:"open",value:function(t,e){if(!this.$element.hasClass("is-open")&&!this.isRevealed){var n=this;e&&(this.$lastTrigger=e),"top"===this.options.forceTo?window.scrollTo(0,0):"bottom"===this.options.forceTo&&window.scrollTo(0,document.body.scrollHeight),this.options.transitionTime&&"overlap"!==this.options.transition?this.$element.siblings("[data-off-canvas-content]").css("transition-duration",this.options.transitionTime):this.$element.siblings("[data-off-canvas-content]").css("transition-duration",""),this.$element.addClass("is-open").removeClass("is-closed"),this.$triggers.attr("aria-expanded","true"),this.$element.attr("aria-hidden","false").trigger("opened.zf.offcanvas"),this.$content.addClass("is-open-"+this.position),!1===this.options.contentScroll&&(r()("body").addClass("is-off-canvas-open").on("touchmove",this._stopScrolling),this.$element.on("touchstart",this._recordScrollable),this.$element.on("touchmove",this._stopScrollPropagation)),!0===this.options.contentOverlay&&this.$overlay.addClass("is-visible"),!0===this.options.closeOnClick&&!0===this.options.contentOverlay&&this.$overlay.addClass("is-closable"),!0===this.options.autoFocus&&this.$element.one(i.i(c.c)(this.$element),function(){if(n.$element.hasClass("is-open")){var t=n.$element.find("[data-autofocus]");t.length?t.eq(0).focus():n.$element.find("a, button").eq(0).focus()}}),!0===this.options.trapFocus&&(this.$content.attr("tabindex","-1"),l.a.trapFocus(this.$element)),this._addContentClasses()}}},{key:"close",value:function(t){if(this.$element.hasClass("is-open")&&!this.isRevealed){var e=this;this.$element.removeClass("is-open"),this.$element.attr("aria-hidden","true").trigger("closed.zf.offcanvas"),this.$content.removeClass("is-open-left is-open-top is-open-right is-open-bottom"),!1===this.options.contentScroll&&(r()("body").removeClass("is-off-canvas-open").off("touchmove",this._stopScrolling),this.$element.off("touchstart",this._recordScrollable),this.$element.off("touchmove",this._stopScrollPropagation)),!0===this.options.contentOverlay&&this.$overlay.removeClass("is-visible"),!0===this.options.closeOnClick&&!0===this.options.contentOverlay&&this.$overlay.removeClass("is-closable"),this.$triggers.attr("aria-expanded","false"),!0===this.options.trapFocus&&(this.$content.removeAttr("tabindex"),l.a.releaseFocus(this.$element)),this.$element.one(i.i(c.c)(this.$element),function(t){e.$element.addClass("is-closed"),e._removeContentClasses()})}}},{key:"toggle",value:function(t,e){this.$element.hasClass("is-open")?this.close(t,e):this.open(t,e)}},{key:"_handleKeyboard",value:function(t){var e=this;l.a.handleKey(t,"OffCanvas",{close:function(){return e.close(),e.$lastTrigger.focus(),!0},handled:function(){t.stopPropagation(),t.preventDefault()}})}},{key:"_destroy",value:function(){this.close(),this.$element.off(".zf.trigger .zf.offcanvas"),this.$overlay.off(".zf.offcanvas")}}]),e}(h.a);p.defaults={closeOnClick:!0,contentOverlay:!0,contentId:null,nested:null,contentScroll:!0,transitionTime:null,transition:"push",forceTo:null,isRevealed:!1,revealOn:null,autoFocus:!0,revealClass:"reveal-for-",trapFocus:!1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return g});var a=i(0),r=i.n(a),l=i(3),u=i(6),c=i(18),h=i(8),d=i(1),f=i(2),p=i(10),m=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),g=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),m(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Orbit",p.a.init(r.a),this._init(),l.a.register("Orbit",{ltr:{ARROW_RIGHT:"next",ARROW_LEFT:"previous"},rtl:{ARROW_LEFT:"next",ARROW_RIGHT:"previous"}})}},{key:"_init",value:function(){this._reset(),this.$wrapper=this.$element.find("."+this.options.containerClass),this.$slides=this.$element.find("."+this.options.slideClass);var t=this.$element.find("img"),e=this.$slides.filter(".is-active"),n=this.$element[0].id||i.i(d.b)(6,"orbit");this.$element.attr({"data-resize":n,id:n}),e.length||this.$slides.eq(0).addClass("is-active"),this.options.useMUI||this.$slides.addClass("no-motionui"),t.length?i.i(h.a)(t,this._prepareForOrbit.bind(this)):this._prepareForOrbit(),this.options.bullets&&this._loadBullets(),this._events(),this.options.autoPlay&&this.$slides.length>1&&this.geoSync(),this.options.accessible&&this.$wrapper.attr("tabindex",0)}},{key:"_loadBullets",value:function(){this.$bullets=this.$element.find("."+this.options.boxOfBullets).find("button")}},{key:"geoSync",value:function(){var t=this;this.timer=new c.a(this.$element,{duration:this.options.timerDelay,infinite:!1},function(){t.changeSlide(!0)}),this.timer.start()}},{key:"_prepareForOrbit",value:function(){this._setWrapperHeight()}},{key:"_setWrapperHeight",value:function(t){var e,i=0,n=0,s=this;this.$slides.each(function(){e=this.getBoundingClientRect().height,r()(this).attr("data-slide",n),/mui/g.test(r()(this)[0].className)||s.$slides.filter(".is-active")[0]===s.$slides.eq(n)[0]||r()(this).css({position:"relative",display:"none"}),i=e>i?e:i,n++}),n===this.$slides.length&&(this.$wrapper.css({height:i}),t&&t(i))}},{key:"_setSlideHeight",value:function(t){this.$slides.each(function(){r()(this).css("max-height",t)})}},{key:"_events",value:function(){var t=this;if(this.$element.off(".resizeme.zf.trigger").on({"resizeme.zf.trigger":this._prepareForOrbit.bind(this)}),this.$slides.length>1){if(this.options.swipe&&this.$slides.off("swipeleft.zf.orbit swiperight.zf.orbit").on("swipeleft.zf.orbit",function(e){e.preventDefault(),t.changeSlide(!0)}).on("swiperight.zf.orbit",function(e){e.preventDefault(),t.changeSlide(!1)}),this.options.autoPlay&&(this.$slides.on("click.zf.orbit",function(){t.$element.data("clickedOn",!t.$element.data("clickedOn")),t.timer[t.$element.data("clickedOn")?"pause":"start"]()}),this.options.pauseOnHover&&this.$element.on("mouseenter.zf.orbit",function(){t.timer.pause()}).on("mouseleave.zf.orbit",function(){t.$element.data("clickedOn")||t.timer.start()})),this.options.navButtons){this.$element.find("."+this.options.nextClass+", ."+this.options.prevClass).attr("tabindex",0).on("click.zf.orbit touchend.zf.orbit",function(e){e.preventDefault(),t.changeSlide(r()(this).hasClass(t.options.nextClass))})}this.options.bullets&&this.$bullets.on("click.zf.orbit touchend.zf.orbit",function(){if(/is-active/g.test(this.className))return!1;var e=r()(this).data("slide"),i=e>t.$slides.filter(".is-active").data("slide"),n=t.$slides.eq(e);t.changeSlide(i,n,e)}),this.options.accessible&&this.$wrapper.add(this.$bullets).on("keydown.zf.orbit",function(e){l.a.handleKey(e,"Orbit",{next:function(){t.changeSlide(!0)},previous:function(){t.changeSlide(!1)},handled:function(){r()(e.target).is(t.$bullets)&&t.$bullets.filter(".is-active").focus()}})})}}},{key:"_reset",value:function(){void 0!==this.$slides&&this.$slides.length>1&&(this.$element.off(".zf.orbit").find("*").off(".zf.orbit"),this.options.autoPlay&&this.timer.restart(),this.$slides.each(function(t){r()(t).removeClass("is-active is-active is-in").removeAttr("aria-live").hide()}),this.$slides.first().addClass("is-active").show(),this.$element.trigger("slidechange.zf.orbit",[this.$slides.first()]),this.options.bullets&&this._updateBullets(0))}},{key:"changeSlide",value:function(t,e,i){if(this.$slides){var n=this.$slides.filter(".is-active").eq(0);if(/mui/g.test(n[0].className))return!1;var s,o=this.$slides.first(),a=this.$slides.last(),r=t?"Right":"Left",l=t?"Left":"Right",c=this;s=e||(t?this.options.infiniteWrap?n.next("."+this.options.slideClass).length?n.next("."+this.options.slideClass):o:n.next("."+this.options.slideClass):this.options.infiniteWrap?n.prev("."+this.options.slideClass).length?n.prev("."+this.options.slideClass):a:n.prev("."+this.options.slideClass)),s.length&&(this.$element.trigger("beforeslidechange.zf.orbit",[n,s]),this.options.bullets&&(i=i||this.$slides.index(s),this._updateBullets(i)),this.options.useMUI&&!this.$element.is(":hidden")?(u.a.animateIn(s.addClass("is-active").css({position:"absolute",top:0}),this.options["animInFrom"+r],function(){s.css({position:"relative",display:"block"}).attr("aria-live","polite")}),u.a.animateOut(n.removeClass("is-active"),this.options["animOutTo"+l],function(){n.removeAttr("aria-live"),c.options.autoPlay&&!c.timer.isPaused&&c.timer.restart()})):(n.removeClass("is-active is-in").removeAttr("aria-live").hide(),s.addClass("is-active is-in").attr("aria-live","polite").show(),this.options.autoPlay&&!this.timer.isPaused&&this.timer.restart()),this.$element.trigger("slidechange.zf.orbit",[s]))}}},{key:"_updateBullets",value:function(t){var e=this.$element.find("."+this.options.boxOfBullets).find(".is-active").removeClass("is-active").blur(),i=e.find("span:last").detach();this.$bullets.eq(t).addClass("is-active").append(i)}},{key:"_destroy",value:function(){this.$element.off(".zf.orbit").find("*").off(".zf.orbit").end().hide()}}]),e}(f.a);g.defaults={bullets:!0,navButtons:!0,animInFromRight:"slide-in-right",animOutToRight:"slide-out-right",animInFromLeft:"slide-in-left",animOutToLeft:"slide-out-left",autoPlay:!0,timerDelay:5e3,infiniteWrap:!0,swipe:!0,pauseOnHover:!0,accessible:!0,containerClass:"orbit-container",slideClass:"orbit-slide",boxOfBullets:"orbit-bullets",nextClass:"orbit-next",prevClass:"orbit-previous",useMUI:!0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return m});var a=i(0),r=i.n(a),l=i(4),u=i(1),c=i(2),h=i(11),d=i(17),f=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),p={tabs:{cssClass:"tabs",plugin:d.a},accordion:{cssClass:"accordion",plugin:h.a}},m=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),f(e,[{key:"_setup",value:function(t,e){this.$element=r()(t),this.options=r.a.extend({},this.$element.data(),e),this.rules=this.$element.data("responsive-accordion-tabs"),this.currentMq=null,this.currentPlugin=null,this.className="ResponsiveAccordionTabs",this.$element.attr("id")||this.$element.attr("id",i.i(u.b)(6,"responsiveaccordiontabs")),this._init(),this._events()}},{key:"_init",value:function(){if(l.a._init(),"string"==typeof this.rules){for(var t={},e=this.rules.split(" "),i=0;i<e.length;i++){var n=e[i].split("-"),s=n.length>1?n[0]:"small",o=n.length>1?n[1]:n[0];null!==p[o]&&(t[s]=p[o])}this.rules=t}this._getAllOptions(),r.a.isEmptyObject(this.rules)||this._checkMediaQueries()}},{key:"_getAllOptions",value:function(){var t=this;t.allOptions={};for(var e in p)if(p.hasOwnProperty(e)){var i=p[e];try{var n=r()("<ul></ul>"),s=new i.plugin(n,t.options);for(var o in s.options)if(s.options.hasOwnProperty(o)&&"zfPlugin"!==o){var a=s.options[o];t.allOptions[o]=a}s.destroy()}catch(t){}}}},{key:"_events",value:function(){var t=this;r()(window).on("changed.zf.mediaquery",function(){t._checkMediaQueries()})}},{key:"_checkMediaQueries",value:function(){var t,e=this;r.a.each(this.rules,function(e){l.a.atLeast(e)&&(t=e)}),t&&(this.currentPlugin instanceof this.rules[t].plugin||(r.a.each(p,function(t,i){e.$element.removeClass(i.cssClass)}),this.$element.addClass(this.rules[t].cssClass),this.currentPlugin&&(!this.currentPlugin.$element.data("zfPlugin")&&this.storezfData&&this.currentPlugin.$element.data("zfPlugin",this.storezfData),this.currentPlugin.destroy()),this._handleMarkup(this.rules[t].cssClass),this.currentPlugin=new this.rules[t].plugin(this.$element,{}),this.storezfData=this.currentPlugin.$element.data("zfPlugin")))}},{key:"_handleMarkup",value:function(t){var e=this,n="accordion",s=r()("[data-tabs-content="+this.$element.attr("id")+"]");if(s.length&&(n="tabs"),n!==t){var o=e.allOptions.linkClass?e.allOptions.linkClass:"tabs-title",a=e.allOptions.panelClass?e.allOptions.panelClass:"tabs-panel";this.$element.removeAttr("role");var l=this.$element.children("."+o+",[data-accordion-item]").removeClass(o).removeClass("accordion-item").removeAttr("data-accordion-item"),c=l.children("a").removeClass("accordion-title");if("tabs"===n?(s=s.children("."+a).removeClass(a).removeAttr("role").removeAttr("aria-hidden").removeAttr("aria-labelledby"),s.children("a").removeAttr("role").removeAttr("aria-controls").removeAttr("aria-selected")):s=l.children("[data-tab-content]").removeClass("accordion-content"),s.css({display:"",visibility:""}),l.css({display:"",visibility:""}),"accordion"===t)s.each(function(t,i){r()(i).appendTo(l.get(t)).addClass("accordion-content").attr("data-tab-content","").removeClass("is-active").css({height:""}),r()("[data-tabs-content="+e.$element.attr("id")+"]").after('<div id="tabs-placeholder-'+e.$element.attr("id")+'"></div>').detach(),l.addClass("accordion-item").attr("data-accordion-item",""),c.addClass("accordion-title")});else if("tabs"===t){var h=r()("[data-tabs-content="+e.$element.attr("id")+"]"),d=r()("#tabs-placeholder-"+e.$element.attr("id"));d.length?(h=r()('<div class="tabs-content"></div>').insertAfter(d).attr("data-tabs-content",e.$element.attr("id")),d.remove()):h=r()('<div class="tabs-content"></div>').insertAfter(e.$element).attr("data-tabs-content",e.$element.attr("id")),s.each(function(t,e){var n=r()(e).appendTo(h).addClass(a),s=c.get(t).hash.slice(1),o=r()(e).attr("id")||i.i(u.b)(6,"accordion");s!==o&&(""!==s?r()(e).attr("id",s):(s=o,r()(e).attr("id",s),r()(c.get(t)).attr("href",r()(c.get(t)).attr("href").replace("#","")+"#"+s))),r()(l.get(t)).hasClass("is-active")&&n.addClass("is-active")}),l.addClass(o)}}}},{key:"_destroy",value:function(){this.currentPlugin&&this.currentPlugin.destroy(),r()(window).off(".zf.ResponsiveAccordionTabs")}}]),e}(c.a);m.defaults={}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return g});var a=i(0),r=i.n(a),l=i(4),u=i(1),c=i(2),h=i(14),d=i(13),f=i(12),p=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),m={dropdown:{cssClass:"dropdown",plugin:h.a},drilldown:{cssClass:"drilldown",plugin:d.a},accordion:{cssClass:"accordion-menu",plugin:f.a}},g=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),p(e,[{key:"_setup",value:function(t,e){this.$element=r()(t),this.rules=this.$element.data("responsive-menu"),this.currentMq=null,this.currentPlugin=null,this.className="ResponsiveMenu",this._init(),this._events()}},{key:"_init",value:function(){if(l.a._init(),"string"==typeof this.rules){for(var t={},e=this.rules.split(" "),n=0;n<e.length;n++){var s=e[n].split("-"),o=s.length>1?s[0]:"small",a=s.length>1?s[1]:s[0];null!==m[a]&&(t[o]=m[a])}this.rules=t}r.a.isEmptyObject(this.rules)||this._checkMediaQueries(),this.$element.attr("data-mutate",this.$element.attr("data-mutate")||i.i(u.b)(6,"responsive-menu"))}},{key:"_events",value:function(){var t=this;r()(window).on("changed.zf.mediaquery",function(){t._checkMediaQueries()})}},{key:"_checkMediaQueries",value:function(){var t,e=this;r.a.each(this.rules,function(e){l.a.atLeast(e)&&(t=e)}),t&&(this.currentPlugin instanceof this.rules[t].plugin||(r.a.each(m,function(t,i){e.$element.removeClass(i.cssClass)}),this.$element.addClass(this.rules[t].cssClass),this.currentPlugin&&this.currentPlugin.destroy(),this.currentPlugin=new this.rules[t].plugin(this.$element,{})))}},{key:"_destroy",value:function(){this.currentPlugin.destroy(),r()(window).off(".zf.ResponsiveMenu")}}]),e}(c.a);g.defaults={}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(4),u=i(6),c=i(2),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=r()(t),this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="ResponsiveToggle",this._init(),this._events()}},{key:"_init",value:function(){l.a._init();var t=this.$element.data("responsive-toggle");if(t||console.error("Your tab bar needs an ID of a Menu as the value of data-tab-bar."),this.$targetMenu=r()("#"+t),this.$toggler=this.$element.find("[data-toggle]").filter(function(){var e=r()(this).data("toggle");return e===t||""===e}),this.options=r.a.extend({},this.options,this.$targetMenu.data()),this.options.animate){var e=this.options.animate.split(" ");this.animationIn=e[0],this.animationOut=e[1]||null}this._update()}},{key:"_events",value:function(){this._updateMqHandler=this._update.bind(this),r()(window).on("changed.zf.mediaquery",this._updateMqHandler),this.$toggler.on("click.zf.responsiveToggle",this.toggleMenu.bind(this))}},{key:"_update",value:function(){l.a.atLeast(this.options.hideFor)?(this.$element.hide(),this.$targetMenu.show()):(this.$element.show(),this.$targetMenu.hide())}},{key:"toggleMenu",value:function(){var t=this;l.a.atLeast(this.options.hideFor)||(this.options.animate?this.$targetMenu.is(":hidden")?u.a.animateIn(this.$targetMenu,this.animationIn,function(){t.$element.trigger("toggled.zf.responsiveToggle"),t.$targetMenu.find("[data-mutate]").triggerHandler("mutateme.zf.trigger")}):u.a.animateOut(this.$targetMenu,this.animationOut,function(){t.$element.trigger("toggled.zf.responsiveToggle")}):(this.$targetMenu.toggle(0),this.$targetMenu.find("[data-mutate]").trigger("mutateme.zf.trigger"),this.$element.trigger("toggled.zf.responsiveToggle")))}},{key:"_destroy",value:function(){this.$element.off(".zf.responsiveToggle"),this.$toggler.off(".zf.responsiveToggle"),r()(window).off("changed.zf.mediaquery",this._updateMqHandler)}}]),e}(c.a);d.defaults={hideFor:"medium",animate:!1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(){return/iP(ad|hone|od).*OS/.test(window.navigator.userAgent)}function r(){return/Android/.test(window.navigator.userAgent)}function l(){return a()||r()}i.d(e,"a",function(){return v});var u=i(0),c=i.n(u),h=i(3),d=i(4),f=i(6),p=i(2),m=i(5),g=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),v=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),g(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=c.a.extend({},e.defaults,this.$element.data(),i),this.className="Reveal",this._init(),m.a.init(c.a),h.a.register("Reveal",{ESCAPE:"close"})}},{key:"_init",value:function(){d.a._init(),this.id=this.$element.attr("id"),this.isActive=!1,this.cached={mq:d.a.current},this.isMobile=l(),this.$anchor=c()('[data-open="'+this.id+'"]').length?c()('[data-open="'+this.id+'"]'):c()('[data-toggle="'+this.id+'"]'),this.$anchor.attr({"aria-controls":this.id,"aria-haspopup":!0,tabindex:0}),(this.options.fullScreen||this.$element.hasClass("full"))&&(this.options.fullScreen=!0,this.options.overlay=!1),this.options.overlay&&!this.$overlay&&(this.$overlay=this._makeOverlay(this.id)),this.$element.attr({role:"dialog","aria-hidden":!0,"data-yeti-box":this.id,"data-resize":this.id}),this.$overlay?this.$element.detach().appendTo(this.$overlay):(this.$element.detach().appendTo(c()(this.options.appendTo)),this.$element.addClass("without-overlay")),this._events(),this.options.deepLink&&window.location.hash==="#"+this.id&&c()(window).one("load.zf.reveal",this.open.bind(this))}},{key:"_makeOverlay",value:function(){var t="";return this.options.additionalOverlayClasses&&(t=" "+this.options.additionalOverlayClasses),c()("<div></div>").addClass("reveal-overlay"+t).appendTo(this.options.appendTo)}},{key:"_updatePosition",value:function(){var t,e,i=this.$element.outerWidth(),n=c()(window).width(),s=this.$element.outerHeight(),o=c()(window).height();t="auto"===this.options.hOffset?parseInt((n-i)/2,10):parseInt(this.options.hOffset,10),e="auto"===this.options.vOffset?s>o?parseInt(Math.min(100,o/10),10):parseInt((o-s)/4,10):parseInt(this.options.vOffset,10),this.$element.css({top:e+"px"}),this.$overlay&&"auto"===this.options.hOffset||(this.$element.css({left:t+"px"}),this.$element.css({margin:"0px"}))}},{key:"_events",value:function(){var t=this,e=this;this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":function(i,n){if(i.target===e.$element[0]||c()(i.target).parents("[data-closable]")[0]===n)return t.close.apply(t)},"toggle.zf.trigger":this.toggle.bind(this),"resizeme.zf.trigger":function(){e._updatePosition()}}),this.options.closeOnClick&&this.options.overlay&&this.$overlay.off(".zf.reveal").on("click.zf.reveal",function(t){t.target!==e.$element[0]&&!c.a.contains(e.$element[0],t.target)&&c.a.contains(document,t.target)&&e.close()}),this.options.deepLink&&c()(window).on("popstate.zf.reveal:"+this.id,this._handleState.bind(this))}},{key:"_handleState",value:function(t){window.location.hash!=="#"+this.id||this.isActive?this.close():this.open()}},{key:"open",value:function(){function t(){n.isMobile?(n.originalScrollPos||(n.originalScrollPos=window.pageYOffset),c()("html, body").addClass("is-reveal-open")):c()("body").addClass("is-reveal-open")}var e=this;if(this.options.deepLink){var i="#"+this.id;window.history.pushState?this.options.updateHistory?window.history.pushState({},"",i):window.history.replaceState({},"",i):window.location.hash=i}this.isActive=!0,this.$element.css({visibility:"hidden"}).show().scrollTop(0),this.options.overlay&&this.$overlay.css({visibility:"hidden"}).show(),this._updatePosition(),this.$element.hide().css({visibility:""}),this.$overlay&&(this.$overlay.css({visibility:""}).hide(),this.$element.hasClass("fast")?this.$overlay.addClass("fast"):this.$element.hasClass("slow")&&this.$overlay.addClass("slow")),this.options.multipleOpened||this.$element.trigger("closeme.zf.reveal",this.id);var n=this;if(this.options.animationIn){var s=function(){n.$element.attr({"aria-hidden":!1,tabindex:-1}).focus(),t(),h.a.trapFocus(n.$element)};this.options.overlay&&f.a.animateIn(this.$overlay,"fade-in"),f.a.animateIn(this.$element,this.options.animationIn,function(){e.$element&&(e.focusableElements=h.a.findFocusable(e.$element),s())})}else this.options.overlay&&this.$overlay.show(0),this.$element.show(this.options.showDelay);this.$element.attr({"aria-hidden":!1,tabindex:-1}).focus(),h.a.trapFocus(this.$element),t(),this._extraHandlers(),this.$element.trigger("open.zf.reveal")}},{key:"_extraHandlers",value:function(){var t=this;this.$element&&(this.focusableElements=h.a.findFocusable(this.$element),this.options.overlay||!this.options.closeOnClick||this.options.fullScreen||c()("body").on("click.zf.reveal",function(e){e.target!==t.$element[0]&&!c.a.contains(t.$element[0],e.target)&&c.a.contains(document,e.target)&&t.close()}),this.options.closeOnEsc&&c()(window).on("keydown.zf.reveal",function(e){h.a.handleKey(e,"Reveal",{close:function(){t.options.closeOnEsc&&t.close()}})}))}},{key:"close",value:function(){function t(){e.isMobile?(0===c()(".reveal:visible").length&&c()("html, body").removeClass("is-reveal-open"),e.originalScrollPos&&(c()("body").scrollTop(e.originalScrollPos),e.originalScrollPos=null)):0===c()(".reveal:visible").length&&c()("body").removeClass("is-reveal-open"),h.a.releaseFocus(e.$element),e.$element.attr("aria-hidden",!0),e.$element.trigger("closed.zf.reveal")}if(!this.isActive||!this.$element.is(":visible"))return!1;var e=this;this.options.animationOut?(this.options.overlay&&f.a.animateOut(this.$overlay,"fade-out"),f.a.animateOut(this.$element,this.options.animationOut,t)):(this.$element.hide(this.options.hideDelay),this.options.overlay?this.$overlay.hide(0,t):t()),this.options.closeOnEsc&&c()(window).off("keydown.zf.reveal"),!this.options.overlay&&this.options.closeOnClick&&c()("body").off("click.zf.reveal"),this.$element.off("keydown.zf.reveal"),this.options.resetOnClose&&this.$element.html(this.$element.html()),this.isActive=!1,e.options.deepLink&&(window.history.replaceState?window.history.replaceState("",document.title,window.location.href.replace("#"+this.id,"")):window.location.hash=""),this.$anchor.focus()}},{key:"toggle",value:function(){this.isActive?this.close():this.open()}},{key:"_destroy",value:function(){this.options.overlay&&(this.$element.appendTo(c()(this.options.appendTo)),this.$overlay.hide().off().remove()),this.$element.hide().off(),this.$anchor.off(".zf"),c()(window).off(".zf.reveal:"+this.id)}}]),e}(p.a);v.defaults={animationIn:"",animationOut:"",showDelay:0,hideDelay:0,closeOnClick:!0,closeOnEsc:!0,multipleOpened:!1,vOffset:"auto",hOffset:"auto",fullScreen:!1,btmOffsetPct:10,overlay:!0,resetOnClose:!1,deepLink:!1,updateHistory:!1,appendTo:"body",additionalOverlayClasses:""}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t,e){return t/e}function r(t,e,i,n){return Math.abs(t.position()[e]+t[n]()/2-i)}function l(t,e){return Math.log(e)/Math.log(t)}i.d(e,"a",function(){return b});var u=i(0),c=i.n(u),h=i(3),d=i(6),f=i(1),p=i(2),m=i(10),g=i(5),v=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),b=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),v(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=c.a.extend({},e.defaults,this.$element.data(),i),this.className="Slider",m.a.init(c.a),g.a.init(c.a),this._init(),h.a.register("Slider",{ltr:{ARROW_RIGHT:"increase",ARROW_UP:"increase",ARROW_DOWN:"decrease",ARROW_LEFT:"decrease",SHIFT_ARROW_RIGHT:"increase_fast",SHIFT_ARROW_UP:"increase_fast",SHIFT_ARROW_DOWN:"decrease_fast",SHIFT_ARROW_LEFT:"decrease_fast",HOME:"min",END:"max"},rtl:{ARROW_LEFT:"increase",ARROW_RIGHT:"decrease",SHIFT_ARROW_LEFT:"increase_fast",SHIFT_ARROW_RIGHT:"decrease_fast"}})}},{key:"_init",value:function(){this.inputs=this.$element.find("input"),this.handles=this.$element.find("[data-slider-handle]"),this.$handle=this.handles.eq(0),this.$input=this.inputs.length?this.inputs.eq(0):c()("#"+this.$handle.attr("aria-controls")),this.$fill=this.$element.find("[data-slider-fill]").css(this.options.vertical?"height":"width",0);(this.options.disabled||this.$element.hasClass(this.options.disabledClass))&&(this.options.disabled=!0,this.$element.addClass(this.options.disabledClass)),this.inputs.length||(this.inputs=c()().add(this.$input),this.options.binding=!0),this._setInitAttr(0),this.handles[1]&&(this.options.doubleSided=!0,this.$handle2=this.handles.eq(1),this.$input2=this.inputs.length>1?this.inputs.eq(1):c()("#"+this.$handle2.attr("aria-controls")),this.inputs[1]||(this.inputs=this.inputs.add(this.$input2)),!0,this._setInitAttr(1)),this.setHandles(),this._events()}},{key:"setHandles",value:function(){var t=this;this.handles[1]?this._setHandlePos(this.$handle,this.inputs.eq(0).val(),!0,function(){t._setHandlePos(t.$handle2,t.inputs.eq(1).val(),!0)}):this._setHandlePos(this.$handle,this.inputs.eq(0).val(),!0)}},{key:"_reflow",value:function(){this.setHandles()}},{key:"_pctOfBar",value:function(t){var e=a(t-this.options.start,this.options.end-this.options.start);switch(this.options.positionValueFunction){case"pow":e=this._logTransform(e);break;case"log":e=this._powTransform(e)}return e.toFixed(2)}},{key:"_value",value:function(t){switch(this.options.positionValueFunction){case"pow":t=this._powTransform(t);break;case"log":t=this._logTransform(t)}
+ return(this.options.end-this.options.start)*t+this.options.start}},{key:"_logTransform",value:function(t){return l(this.options.nonLinearBase,t*(this.options.nonLinearBase-1)+1)}},{key:"_powTransform",value:function(t){return(Math.pow(this.options.nonLinearBase,t)-1)/(this.options.nonLinearBase-1)}},{key:"_setHandlePos",value:function(t,e,n,s){if(!this.$element.hasClass(this.options.disabledClass)){e=parseFloat(e),e<this.options.start?e=this.options.start:e>this.options.end&&(e=this.options.end);var o=this.options.doubleSided;if(this.options.vertical&&!n&&(e=this.options.end-e),o)if(0===this.handles.index(t)){var r=parseFloat(this.$handle2.attr("aria-valuenow"));e=e>=r?r-this.options.step:e}else{var l=parseFloat(this.$handle.attr("aria-valuenow"));e=e<=l?l+this.options.step:e}var u=this,c=this.options.vertical,h=c?"height":"width",f=c?"top":"left",p=t[0].getBoundingClientRect()[h],m=this.$element[0].getBoundingClientRect()[h],g=this._pctOfBar(e),v=(m-p)*g,b=(100*a(v,m)).toFixed(this.options.decimal);e=parseFloat(e.toFixed(this.options.decimal));var y={};if(this._setValues(t,e),o){var w,_=0===this.handles.index(t),$=~~(100*a(p,m));if(_)y[f]=b+"%",w=parseFloat(this.$handle2[0].style[f])-b+$,s&&"function"==typeof s&&s();else{var k=parseFloat(this.$handle[0].style[f]);w=b-(isNaN(k)?(this.options.initialStart-this.options.start)/((this.options.end-this.options.start)/100):k)+$}y["min-"+h]=w+"%"}this.$element.one("finished.zf.animate",function(){u.$element.trigger("moved.zf.slider",[t])});var C=this.$element.data("dragging")?1e3/60:this.options.moveTime;i.i(d.b)(C,t,function(){isNaN(b)?t.css(f,100*g+"%"):t.css(f,b+"%"),u.options.doubleSided?u.$fill.css(y):u.$fill.css(h,100*g+"%")}),clearTimeout(u.timeout),u.timeout=setTimeout(function(){u.$element.trigger("changed.zf.slider",[t])},u.options.changedDelay)}}},{key:"_setInitAttr",value:function(t){var e=0===t?this.options.initialStart:this.options.initialEnd,n=this.inputs.eq(t).attr("id")||i.i(f.b)(6,"slider");this.inputs.eq(t).attr({id:n,max:this.options.end,min:this.options.start,step:this.options.step}),this.inputs.eq(t).val(e),this.handles.eq(t).attr({role:"slider","aria-controls":n,"aria-valuemax":this.options.end,"aria-valuemin":this.options.start,"aria-valuenow":e,"aria-orientation":this.options.vertical?"vertical":"horizontal",tabindex:0})}},{key:"_setValues",value:function(t,e){var i=this.options.doubleSided?this.handles.index(t):0;this.inputs.eq(i).val(e),t.attr("aria-valuenow",e)}},{key:"_handleEvent",value:function(t,e,n){var s,o;if(n)s=this._adjustValue(null,n),o=!0;else{t.preventDefault();var l=this,u=this.options.vertical,h=u?"height":"width",d=u?"top":"left",p=u?t.pageY:t.pageX,m=(this.$handle[0].getBoundingClientRect()[h],this.$element[0].getBoundingClientRect()[h]),g=u?c()(window).scrollTop():c()(window).scrollLeft(),v=this.$element.offset()[d];t.clientY===t.pageY&&(p+=g);var b,y=p-v;b=y<0?0:y>m?m:y;var w=a(b,m);if(s=this._value(w),i.i(f.a)()&&!this.options.vertical&&(s=this.options.end-s),s=l._adjustValue(null,s),o=!1,!e){e=r(this.$handle,d,b,h)<=r(this.$handle2,d,b,h)?this.$handle:this.$handle2}}this._setHandlePos(e,s,o)}},{key:"_adjustValue",value:function(t,e){var i,n,s,o,a=this.options.step,r=parseFloat(a/2);return i=t?parseFloat(t.attr("aria-valuenow")):e,n=i%a,s=i-n,o=s+a,0===n?i:i=i>=s+r?o:s}},{key:"_events",value:function(){this._eventsForHandle(this.$handle),this.handles[1]&&this._eventsForHandle(this.$handle2)}},{key:"_eventsForHandle",value:function(t){var e,i=this;if(this.inputs.off("change.zf.slider").on("change.zf.slider",function(t){var e=i.inputs.index(c()(this));i._handleEvent(t,i.handles.eq(e),c()(this).val())}),this.options.clickSelect&&this.$element.off("click.zf.slider").on("click.zf.slider",function(t){if(i.$element.data("dragging"))return!1;c()(t.target).is("[data-slider-handle]")||(i.options.doubleSided?i._handleEvent(t):i._handleEvent(t,i.$handle))}),this.options.draggable){this.handles.addTouch();var n=c()("body");t.off("mousedown.zf.slider").on("mousedown.zf.slider",function(s){t.addClass("is-dragging"),i.$fill.addClass("is-dragging"),i.$element.data("dragging",!0),e=c()(s.currentTarget),n.on("mousemove.zf.slider",function(t){t.preventDefault(),i._handleEvent(t,e)}).on("mouseup.zf.slider",function(s){i._handleEvent(s,e),t.removeClass("is-dragging"),i.$fill.removeClass("is-dragging"),i.$element.data("dragging",!1),n.off("mousemove.zf.slider mouseup.zf.slider")})}).on("selectstart.zf.slider touchmove.zf.slider",function(t){t.preventDefault()})}t.off("keydown.zf.slider").on("keydown.zf.slider",function(t){var e,n=c()(this),s=i.options.doubleSided?i.handles.index(n):0,o=parseFloat(i.inputs.eq(s).val());h.a.handleKey(t,"Slider",{decrease:function(){e=o-i.options.step},increase:function(){e=o+i.options.step},decrease_fast:function(){e=o-10*i.options.step},increase_fast:function(){e=o+10*i.options.step},min:function(){e=i.options.start},max:function(){e=i.options.end},handled:function(){t.preventDefault(),i._setHandlePos(n,e,!0)}})})}},{key:"_destroy",value:function(){this.handles.off(".zf.slider"),this.inputs.off(".zf.slider"),this.$element.off(".zf.slider"),clearTimeout(this.timeout)}}]),e}(p.a);b.defaults={start:0,end:100,step:1,initialStart:0,initialEnd:100,binding:!1,clickSelect:!0,vertical:!1,draggable:!0,disabled:!1,doubleSided:!1,decimal:2,moveTime:200,disabledClass:"disabled",invertVertical:!1,changedDelay:500,nonLinearBase:5,positionValueFunction:"linear"}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t){return parseInt(window.getComputedStyle(document.body,null).fontSize,10)*t}i.d(e,"a",function(){return p});var r=i(0),l=i.n(r),u=i(1),c=i(4),h=i(2),d=i(5),f=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),f(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=l.a.extend({},e.defaults,this.$element.data(),i),this.className="Sticky",d.a.init(l.a),this._init()}},{key:"_init",value:function(){c.a._init();var t=this.$element.parent("[data-sticky-container]"),e=this.$element[0].id||i.i(u.b)(6,"sticky"),n=this;t.length?this.$container=t:(this.wasWrapped=!0,this.$element.wrap(this.options.container),this.$container=this.$element.parent()),this.$container.addClass(this.options.containerClass),this.$element.addClass(this.options.stickyClass).attr({"data-resize":e,"data-mutate":e}),""!==this.options.anchor&&l()("#"+n.options.anchor).attr({"data-mutate":e}),this.scrollCount=this.options.checkEvery,this.isStuck=!1,l()(window).one("load.zf.sticky",function(){n.containerHeight="none"==n.$element.css("display")?0:n.$element[0].getBoundingClientRect().height,n.$container.css("height",n.containerHeight),n.elemHeight=n.containerHeight,""!==n.options.anchor?n.$anchor=l()("#"+n.options.anchor):n._parsePoints(),n._setSizes(function(){var t=window.pageYOffset;n._calc(!1,t),n.isStuck||n._removeSticky(!(t>=n.topPoint))}),n._events(e.split("-").reverse().join("-"))})}},{key:"_parsePoints",value:function(){for(var t=""==this.options.topAnchor?1:this.options.topAnchor,e=""==this.options.btmAnchor?document.documentElement.scrollHeight:this.options.btmAnchor,i=[t,e],n={},s=0,o=i.length;s<o&&i[s];s++){var a;if("number"==typeof i[s])a=i[s];else{var r=i[s].split(":"),u=l()("#"+r[0]);a=u.offset().top,r[1]&&"bottom"===r[1].toLowerCase()&&(a+=u[0].getBoundingClientRect().height)}n[s]=a}this.points=n}},{key:"_events",value:function(t){var e=this,i=this.scrollListener="scroll.zf."+t;this.isOn||(this.canStick&&(this.isOn=!0,l()(window).off(i).on(i,function(t){0===e.scrollCount?(e.scrollCount=e.options.checkEvery,e._setSizes(function(){e._calc(!1,window.pageYOffset)})):(e.scrollCount--,e._calc(!1,window.pageYOffset))})),this.$element.off("resizeme.zf.trigger").on("resizeme.zf.trigger",function(i,n){e._eventsHandler(t)}),this.$element.on("mutateme.zf.trigger",function(i,n){e._eventsHandler(t)}),this.$anchor&&this.$anchor.on("mutateme.zf.trigger",function(i,n){e._eventsHandler(t)}))}},{key:"_eventsHandler",value:function(t){var e=this,i=this.scrollListener="scroll.zf."+t;e._setSizes(function(){e._calc(!1),e.canStick?e.isOn||e._events(t):e.isOn&&e._pauseListeners(i)})}},{key:"_pauseListeners",value:function(t){this.isOn=!1,l()(window).off(t),this.$element.trigger("pause.zf.sticky")}},{key:"_calc",value:function(t,e){if(t&&this._setSizes(),!this.canStick)return this.isStuck&&this._removeSticky(!0),!1;e||(e=window.pageYOffset),e>=this.topPoint?e<=this.bottomPoint?this.isStuck||this._setSticky():this.isStuck&&this._removeSticky(!1):this.isStuck&&this._removeSticky(!0)}},{key:"_setSticky",value:function(){var t=this,e=this.options.stickTo,i="top"===e?"marginTop":"marginBottom",n="top"===e?"bottom":"top",s={};s[i]=this.options[i]+"em",s[e]=0,s[n]="auto",this.isStuck=!0,this.$element.removeClass("is-anchored is-at-"+n).addClass("is-stuck is-at-"+e).css(s).trigger("sticky.zf.stuckto:"+e),this.$element.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){t._setSizes()})}},{key:"_removeSticky",value:function(t){var e=this.options.stickTo,i="top"===e,n={},s=(this.points?this.points[1]-this.points[0]:this.anchorHeight)-this.elemHeight,o=i?"marginTop":"marginBottom",a=t?"top":"bottom";n[o]=0,n.bottom="auto",n.top=t?0:s,this.isStuck=!1,this.$element.removeClass("is-stuck is-at-"+e).addClass("is-anchored is-at-"+a).css(n).trigger("sticky.zf.unstuckfrom:"+a)}},{key:"_setSizes",value:function(t){this.canStick=c.a.is(this.options.stickyOn),this.canStick||t&&"function"==typeof t&&t();var e=this.$container[0].getBoundingClientRect().width,i=window.getComputedStyle(this.$container[0]),n=parseInt(i["padding-left"],10),s=parseInt(i["padding-right"],10);this.$anchor&&this.$anchor.length?this.anchorHeight=this.$anchor[0].getBoundingClientRect().height:this._parsePoints(),this.$element.css({"max-width":e-n-s+"px"});var o=this.$element[0].getBoundingClientRect().height||this.containerHeight;if("none"==this.$element.css("display")&&(o=0),this.containerHeight=o,this.$container.css({height:o}),this.elemHeight=o,!this.isStuck&&this.$element.hasClass("is-at-bottom")){var a=(this.points?this.points[1]-this.$container.offset().top:this.anchorHeight)-this.elemHeight;this.$element.css("top",a)}this._setBreakPoints(o,function(){t&&"function"==typeof t&&t()})}},{key:"_setBreakPoints",value:function(t,e){if(!this.canStick){if(!e||"function"!=typeof e)return!1;e()}var i=a(this.options.marginTop),n=a(this.options.marginBottom),s=this.points?this.points[0]:this.$anchor.offset().top,o=this.points?this.points[1]:s+this.anchorHeight,r=window.innerHeight;"top"===this.options.stickTo?(s-=i,o-=t+i):"bottom"===this.options.stickTo&&(s-=r-(t+n),o-=r-n),this.topPoint=s,this.bottomPoint=o,e&&"function"==typeof e&&e()}},{key:"_destroy",value:function(){this._removeSticky(!0),this.$element.removeClass(this.options.stickyClass+" is-anchored is-at-top").css({height:"",top:"",bottom:"","max-width":""}).off("resizeme.zf.trigger").off("mutateme.zf.trigger"),this.$anchor&&this.$anchor.length&&this.$anchor.off("change.zf.sticky"),l()(window).off(this.scrollListener),this.wasWrapped?this.$element.unwrap():this.$container.removeClass(this.options.containerClass).css({height:""})}}]),e}(h.a);p.defaults={container:"<div data-sticky-container></div>",stickTo:"top",anchor:"",topAnchor:"",btmAnchor:"",marginTop:1,marginBottom:1,stickyOn:"medium",stickyClass:"sticky",containerClass:"sticky-container",checkEvery:-1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(6),u=i(2),c=i(5),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,t.data(),i),this.className="",this.className="Toggler",c.a.init(r.a),this._init(),this._events()}},{key:"_init",value:function(){var t;this.options.animate?(t=this.options.animate.split(" "),this.animationIn=t[0],this.animationOut=t[1]||null):(t=this.$element.data("toggler"),this.className="."===t[0]?t.slice(1):t);var e=this.$element[0].id;r()('[data-open="'+e+'"], [data-close="'+e+'"], [data-toggle="'+e+'"]').attr("aria-controls",e),this.$element.attr("aria-expanded",!this.$element.is(":hidden"))}},{key:"_events",value:function(){this.$element.off("toggle.zf.trigger").on("toggle.zf.trigger",this.toggle.bind(this))}},{key:"toggle",value:function(){this[this.options.animate?"_toggleAnimate":"_toggleClass"]()}},{key:"_toggleClass",value:function(){this.$element.toggleClass(this.className);var t=this.$element.hasClass(this.className);t?this.$element.trigger("on.zf.toggler"):this.$element.trigger("off.zf.toggler"),this._updateARIA(t),this.$element.find("[data-mutate]").trigger("mutateme.zf.trigger")}},{key:"_toggleAnimate",value:function(){var t=this;this.$element.is(":hidden")?l.a.animateIn(this.$element,this.animationIn,function(){t._updateARIA(!0),this.trigger("on.zf.toggler"),this.find("[data-mutate]").trigger("mutateme.zf.trigger")}):l.a.animateOut(this.$element,this.animationOut,function(){t._updateARIA(!1),this.trigger("off.zf.toggler"),this.find("[data-mutate]").trigger("mutateme.zf.trigger")})}},{key:"_updateARIA",value:function(t){this.$element.attr("aria-expanded",!!t)}},{key:"_destroy",value:function(){this.$element.off(".zf.toggler")}}]),e}(u.a);d.defaults={animate:!1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return p});var a=i(0),r=i.n(a),l=i(1),u=i(4),c=i(5),h=i(15),d=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),f=function t(e,i,n){null===e&&(e=Function.prototype);var s=Object.getOwnPropertyDescriptor(e,i);if(void 0===s){var o=Object.getPrototypeOf(e);return null===o?void 0:t(o,i,n)}if("value"in s)return s.value;var a=s.get;if(void 0!==a)return a.call(n)},p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),d(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Tooltip",this.isActive=!1,this.isClick=!1,c.a.init(r.a),this._init()}},{key:"_init",value:function(){u.a._init();var t=this.$element.attr("aria-describedby")||i.i(l.b)(6,"tooltip");this.options.tipText=this.options.tipText||this.$element.attr("title"),this.template=this.options.template?r()(this.options.template):this._buildTemplate(t),this.options.allowHtml?this.template.appendTo(document.body).html(this.options.tipText).hide():this.template.appendTo(document.body).text(this.options.tipText).hide(),this.$element.attr({title:"","aria-describedby":t,"data-yeti-box":t,"data-toggle":t,"data-resize":t}).addClass(this.options.triggerClass),f(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"_init",this).call(this),this._events()}},{key:"_getDefaultPosition",value:function(){var t=this.$element[0].className.match(/\b(top|left|right|bottom)\b/g);return t?t[0]:"top"}},{key:"_getDefaultAlignment",value:function(){return"center"}},{key:"_getHOffset",value:function(){return"left"===this.position||"right"===this.position?this.options.hOffset+this.options.tooltipWidth:this.options.hOffset}},{key:"_getVOffset",value:function(){return"top"===this.position||"bottom"===this.position?this.options.vOffset+this.options.tooltipHeight:this.options.vOffset}},{key:"_buildTemplate",value:function(t){var e=(this.options.tooltipClass+" "+this.options.positionClass+" "+this.options.templateClasses).trim();return r()("<div></div>").addClass(e).attr({role:"tooltip","aria-hidden":!0,"data-is-active":!1,"data-is-focus":!1,id:t})}},{key:"_setPosition",value:function(){f(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"_setPosition",this).call(this,this.$element,this.template)}},{key:"show",value:function(){if("all"!==this.options.showOn&&!u.a.is(this.options.showOn))return!1;var t=this;this.template.css("visibility","hidden").show(),this._setPosition(),this.template.removeClass("top bottom left right").addClass(this.position),this.template.removeClass("align-top align-bottom align-left align-right align-center").addClass("align-"+this.alignment),this.$element.trigger("closeme.zf.tooltip",this.template.attr("id")),this.template.attr({"data-is-active":!0,"aria-hidden":!1}),t.isActive=!0,this.template.stop().hide().css("visibility","").fadeIn(this.options.fadeInDuration,function(){}),this.$element.trigger("show.zf.tooltip")}},{key:"hide",value:function(){var t=this;this.template.stop().attr({"aria-hidden":!0,"data-is-active":!1}).fadeOut(this.options.fadeOutDuration,function(){t.isActive=!1,t.isClick=!1}),this.$element.trigger("hide.zf.tooltip")}},{key:"_events",value:function(){var t=this,e=(this.template,!1);this.options.disableHover||this.$element.on("mouseenter.zf.tooltip",function(e){t.isActive||(t.timeout=setTimeout(function(){t.show()},t.options.hoverDelay))}).on("mouseleave.zf.tooltip",function(i){clearTimeout(t.timeout),(!e||t.isClick&&!t.options.clickOpen)&&t.hide()}),this.options.clickOpen?this.$element.on("mousedown.zf.tooltip",function(e){e.stopImmediatePropagation(),t.isClick||(t.isClick=!0,!t.options.disableHover&&t.$element.attr("tabindex")||t.isActive||t.show())}):this.$element.on("mousedown.zf.tooltip",function(e){e.stopImmediatePropagation(),t.isClick=!0}),this.options.disableForTouch||this.$element.on("tap.zf.tooltip touchend.zf.tooltip",function(e){t.isActive?t.hide():t.show()}),this.$element.on({"close.zf.trigger":this.hide.bind(this)}),this.$element.on("focus.zf.tooltip",function(i){if(e=!0,t.isClick)return t.options.clickOpen||(e=!1),!1;t.show()}).on("focusout.zf.tooltip",function(i){e=!1,t.isClick=!1,t.hide()}).on("resizeme.zf.trigger",function(){t.isActive&&t._setPosition()})}},{key:"toggle",value:function(){this.isActive?this.hide():this.show()}},{key:"_destroy",value:function(){this.$element.attr("title",this.template.text()).off(".zf.trigger .zf.tooltip").removeClass("has-tip top right left").removeAttr("aria-describedby aria-haspopup data-disable-hover data-resize data-toggle data-tooltip data-yeti-box"),this.template.remove()}}]),e}(h.a);p.defaults={disableForTouch:!1,hoverDelay:200,fadeInDuration:150,fadeOutDuration:150,disableHover:!1,templateClasses:"",tooltipClass:"tooltip",triggerClass:"has-tip",showOn:"small",template:"",tipText:"",touchCloseText:"Tap to close.",clickOpen:!0,positionClass:"",position:"auto",alignment:"auto",allowOverlap:!1,allowBottomOverlap:!1,vOffset:0,hOffset:0,tooltipHeight:14,tooltipWidth:12,allowHtml:!1}},function(t,e,i){t.exports=i(19)}]);
\ No newline at end of file
generators/foundation/public/stylesheets/_settings.scss +455 -115
@@ @@ -16,41 +16,65 @@
// 11. Button
// 12. Button Group
// 13. Callout
- // 14. Close Button
- // 15. Drilldown
- // 16. Dropdown
- // 17. Dropdown Menu
- // 18. Flex Video
- // 19. Forms
- // 20. Label
- // 21. Media Object
- // 22. Menu
- // 23. Off-canvas
- // 24. Orbit
- // 25. Pagination
- // 26. Progress Bar
- // 27. Reveal
- // 28. Slider
- // 29. Switch
- // 30. Table
- // 31. Tabs
- // 32. Thumbnail
- // 33. Tooltip
- // 34. Top Bar
+ // 14. Card
+ // 15. Close Button
+ // 16. Drilldown
+ // 17. Dropdown
+ // 18. Dropdown Menu
+ // 19. Flexbox Utilities
+ // 20. Forms
+ // 21. Label
+ // 22. Media Object
+ // 23. Menu
+ // 24. Meter
+ // 25. Off-canvas
+ // 26. Orbit
+ // 27. Pagination
+ // 28. Progress Bar
+ // 29. Prototype Arrow
+ // 30. Prototype Border-Box
+ // 31. Prototype Border-None
+ // 32. Prototype Bordered
+ // 33. Prototype Display
+ // 34. Prototype Font-Styling
+ // 35. Prototype List-Style-Type
+ // 36. Prototype Overflow
+ // 37. Prototype Position
+ // 38. Prototype Rounded
+ // 39. Prototype Separator
+ // 40. Prototype Shadow
+ // 41. Prototype Sizing
+ // 42. Prototype Spacing
+ // 43. Prototype Text-Decoration
+ // 44. Prototype Text-Transformation
+ // 45. Prototype Text-Utilities
+ // 46. Responsive Embed
+ // 47. Reveal
+ // 48. Slider
+ // 49. Switch
+ // 50. Table
+ // 51. Tabs
+ // 52. Thumbnail
+ // 53. Title Bar
+ // 54. Tooltip
+ // 55. Top Bar
+ // 56. Xy Grid
@import 'foundation6/util/util';
// 1. Global
// ---------
- $global-width: rem-calc(1200);
$global-font-size: 100%;
+ $global-width: rem-calc(1200);
$global-lineheight: 1.5;
- $primary-color: #2199e8;
- $secondary-color: #777;
- $success-color: #3adb76;
- $warning-color: #ffae00;
- $alert-color: #ec5840;
+ $foundation-palette: (
+ primary: #1779ba,
+ secondary: #767676,
+ success: #3adb76,
+ warning: #ffae00,
+ alert: #cc4b37,
+ );
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
@@ @@ -58,17 +82,24 @@ $black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
- $body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
- $text-direction: ltr;
$global-margin: 1rem;
$global-padding: 1rem;
- $global-margin: 1rem;
+ $global-position: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
+ $global-menu-padding: 0.7rem 1rem;
+ $global-menu-nested-margin: 1rem;
$global-text-direction: ltr;
- $rem-base: 16px;
+ $global-flexbox: true;
+ $global-prototype-breakpoints: false;
+ $global-button-cursor: auto;
+ $global-color-pick-contrast-tolerance: 0;
+ $print-transparent-backgrounds: true;
+
+ @include add-foundation-colors;
// 2. Breakpoints
// --------------
@@ @@ -80,6 +111,7 @@ $breakpoints: (
xlarge: 1200px,
xxlarge: 1440px,
);
+ $print-breakpoint: large;
$breakpoint-classes: (small medium large);
// 3. The Grid
@@ @@ -87,8 +119,13 @@ $breakpoint-classes: (small medium large);
$grid-row-width: $global-width;
$grid-column-count: 12;
- $grid-column-gutter: 30px;
- $block-grid-max: 6;
+ $grid-column-gutter: (
+ small: 20px,
+ medium: 30px,
+ );
+ $grid-column-align-edge: true;
+ $grid-column-alias: 'columns';
+ $block-grid-max: 8;
// 4. Base Typography
// ------------------
@@ @@ -96,28 +133,28 @@ $block-grid-max: 6;
$header-font-family: $body-font-family;
$header-font-weight: $global-weight-normal;
$header-font-style: normal;
- $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
- $header-sizes: (
+ $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+ $header-color: inherit;
+ $header-lineheight: 1.4;
+ $header-margin-bottom: 0.5rem;
+ $header-styles: (
small: (
- 'h1': 24,
- 'h2': 20,
- 'h3': 19,
- 'h4': 18,
- 'h5': 17,
- 'h6': 16,
+ 'h1': ('font-size': 24),
+ 'h2': ('font-size': 20),
+ 'h3': ('font-size': 19),
+ 'h4': ('font-size': 18),
+ 'h5': ('font-size': 17),
+ 'h6': ('font-size': 16),
),
medium: (
- 'h1': 48,
- 'h2': 40,
- 'h3': 31,
- 'h4': 25,
- 'h5': 20,
- 'h6': 16,
+ 'h1': ('font-size': 48),
+ 'h2': ('font-size': 40),
+ 'h3': ('font-size': 31),
+ 'h4': ('font-size': 25),
+ 'h5': ('font-size': 20),
+ 'h6': ('font-size': 16),
),
);
- $header-color: inherit;
- $header-lineheight: 1.4;
- $header-margin-bottom: 0.5rem;
$header-text-rendering: optimizeLegibility;
$small-font-size: 80%;
$header-small-font-color: $medium-gray;
@@ @@ -151,6 +188,7 @@ $blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid $medium-gray;
$cite-font-size: rem-calc(13);
$cite-color: $dark-gray;
+ $cite-pseudo-content: '\2014 \0020';
$keystroke-font: $font-family-monospace;
$keystroke-color: $black;
$keystroke-background: $light-gray;
@@ @@ -175,9 +213,9 @@ $stat-font-size: 2.5rem;
$abide-inputs: true;
$abide-labels: true;
- $input-background-invalid: $alert-color;
- $form-label-color-invalid: $alert-color;
- $input-error-color: $alert-color;
+ $input-background-invalid: get-color(alert);
+ $form-label-color-invalid: get-color(alert);
+ $input-error-color: get-color(alert);
$input-error-font-size: rem-calc(12);
$input-error-font-weight: $global-weight-bold;
@@ @@ -186,24 +224,38 @@ $input-error-font-weight: $global-weight-bold;
$accordion-background: $white;
$accordion-plusminus: true;
- $accordion-item-color: foreground($accordion-background, $primary-color);
+ $accordion-title-font-size: rem-calc(12);
+ $accordion-item-color: $primary-color;
$accordion-item-background-hover: $light-gray;
$accordion-item-padding: 1.25rem 1rem;
$accordion-content-background: $white;
$accordion-content-border: 1px solid $light-gray;
- $accordion-content-color: foreground($accordion-background, $primary-color);
+ $accordion-content-color: $body-font-color;
$accordion-content-padding: 1rem;
// 8. Accordion Menu
// -----------------
+ $accordionmenu-padding: $global-menu-padding;
+ $accordionmenu-nested-margin: $global-menu-nested-margin;
+ $accordionmenu-submenu-padding: $accordionmenu-padding;
$accordionmenu-arrows: true;
+ $accordionmenu-arrow-color: $primary-color;
+ $accordionmenu-item-background: null;
+ $accordionmenu-border: null;
+ $accordionmenu-submenu-toggle-background: null;
+ $accordion-submenu-toggle-border: $accordionmenu-border;
+ $accordionmenu-submenu-toggle-width: 40px;
+ $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
+ $accordionmenu-arrow-size: 6px;
// 9. Badge
// --------
$badge-background: $primary-color;
- $badge-color: foreground($badge-background);
+ $badge-color: $white;
+ $badge-color-alt: $black;
+ $badge-palette: $foundation-palette;
$badge-padding: 0.3em;
$badge-minwidth: 2.1em;
$badge-font-size: 0.6rem;
@@ @@ -218,26 +270,36 @@ $breadcrumbs-item-color-current: $black;
$breadcrumbs-item-color-disabled: $medium-gray;
$breadcrumbs-item-margin: 0.75rem;
$breadcrumbs-item-uppercase: true;
- $breadcrumbs-item-slash: true;
+ $breadcrumbs-item-separator: true;
+ $breadcrumbs-item-separator-item: '/';
+ $breadcrumbs-item-separator-item-rtl: '\\';
+ $breadcrumbs-item-separator-color: $medium-gray;
// 11. Button
// ----------
+ $button-font-family: inherit;
$button-padding: 0.85em 1em;
- $button-margin: 0 $global-margin $global-margin 0;
+ $button-margin: 0 0 $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
- $button-color: #fff;
- $button-color-alt: #000;
+ $button-color: $white;
+ $button-color-alt: $black;
$button-radius: $global-radius;
+ $button-hollow-border-width: 1px;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
);
+ $button-palette: $foundation-palette;
$button-opacity-disabled: 0.25;
+ $button-background-hover-lightness: -20%;
+ $button-hollow-hover-lightness: -50%;
+ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+ $button-responsive-expanded: false;
// 12. Button Group
// ----------------
@@ @@ -246,6 +308,7 @@ $buttongroup-margin: 1rem;
$buttongroup-spacing: 1px;
$buttongroup-child-selector: '.button';
$buttongroup-expand-max: 6;
+ $buttongroup-radius-on-each: true;
// 13. Callout
// -----------
@@ @@ -260,29 +323,58 @@ $callout-font-color-alt: $body-background;
$callout-radius: $global-radius;
$callout-link-tint: 30%;
- // 14. Close Button
+ // 14. Card
+ // --------
+
+ $card-background: $white;
+ $card-font-color: $body-font-color;
+ $card-divider-background: $light-gray;
+ $card-border: 1px solid $light-gray;
+ $card-shadow: none;
+ $card-border-radius: $global-radius;
+ $card-padding: $global-padding;
+ $card-margin-bottom: $global-margin;
+
+ // 15. Close Button
// ----------------
$closebutton-position: right top;
- $closebutton-offset-horizontal: 1rem;
- $closebutton-offset-vertical: 0.5rem;
- $closebutton-size: 2em;
+ $closebutton-offset-horizontal: (
+ small: 0.66rem,
+ medium: 1rem,
+ );
+ $closebutton-offset-vertical: (
+ small: 0.33em,
+ medium: 0.5rem,
+ );
+ $closebutton-size: (
+ small: 1.5em,
+ medium: 2em,
+ );
$closebutton-lineheight: 1;
$closebutton-color: $dark-gray;
$closebutton-color-hover: $black;
- // 15. Drilldown
+ // 16. Drilldown
// -------------
$drilldown-transition: transform 0.15s linear;
$drilldown-arrows: true;
-
- // 16. Dropdown
+ $drilldown-padding: $global-menu-padding;
+ $drilldown-nested-margin: 0;
+ $drilldown-background: $white;
+ $drilldown-submenu-padding: $drilldown-padding;
+ $drilldown-submenu-background: $white;
+ $drilldown-arrow-color: $primary-color;
+ $drilldown-arrow-size: 6px;
+
+ // 17. Dropdown
// ------------
$dropdown-padding: 1rem;
+ $dropdown-background: $body-background;
$dropdown-border: 1px solid $medium-gray;
- $dropdown-font-size: 16rem;
+ $dropdown-font-size: 1rem;
$dropdown-width: 300px;
$dropdown-radius: $global-radius;
$dropdown-sizes: (
@@ @@ -291,23 +383,30 @@ $dropdown-sizes: (
large: 400px,
);
- // 17. Dropdown Menu
+ // 18. Dropdown Menu
// -----------------
$dropdownmenu-arrows: true;
+ $dropdownmenu-arrow-color: $anchor-color;
+ $dropdownmenu-arrow-size: 6px;
+ $dropdownmenu-arrow-padding: 1.5rem;
$dropdownmenu-min-width: 200px;
$dropdownmenu-background: $white;
- $dropdown-border: 1px solid $medium-gray;
-
- // 18. Flex Video
- // --------------
+ $dropdownmenu-submenu-background: $dropdownmenu-background;
+ $dropdownmenu-padding: $global-menu-padding;
+ $dropdownmenu-nested-margin: 0;
+ $dropdownmenu-submenu-padding: $dropdownmenu-padding;
+ $dropdownmenu-border: 1px solid $medium-gray;
+ $dropdown-menu-item-color-active: get-color(primary);
+ $dropdown-menu-item-background-active: transparent;
+
+ // 19. Flexbox Utilities
+ // ---------------------
- $flexvideo-padding-top: rem-calc(25);
- $flexvideo-margin-bottom: rem-calc(16);
- $flexvideo-ratio: 4 by 3;
- $flexvideo-ratio-widescreen: 16 by 9;
+ $flex-source-ordering-count: 6;
+ $flexbox-responsive-breakpoints: true;
- // 19. Forms
+ // 20. Forms
// ---------
$fieldset-border: 1px solid $medium-gray;
@@ @@ -315,7 +414,7 @@ $fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);
$legend-padding: rem-calc(0 3);
$form-spacing: rem-calc(16);
- $helptext-color: #333;
+ $helptext-color: $black;
$helptext-font-size: rem-calc(13);
$helptext-font-style: italic;
$input-prefix-color: $black;
@@ @@ -326,62 +425,96 @@ $form-label-color: $black;
$form-label-font-size: rem-calc(14);
$form-label-font-weight: $global-weight-normal;
$form-label-line-height: 1.8;
- $select-background: #fafafa;
- $select-triangle-color: #333;
+ $select-background: $white;
+ $select-triangle-color: $dark-gray;
$select-radius: $global-radius;
- $input-color: $dark-gray;
+ $input-color: $black;
+ $input-placeholder-color: $medium-gray;
$input-font-family: inherit;
$input-font-size: rem-calc(16);
+ $input-font-weight: $global-weight-normal;
+ $input-line-height: $global-lineheight;
$input-background: $white;
$input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
+ $input-padding: $form-spacing / 2;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
- $input-cursor-disabled: default;
+ $input-cursor-disabled: not-allowed;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-number-spinners: true;
$input-radius: $global-radius;
+ $form-button-radius: $global-radius;
- // 20. Label
+ // 21. Label
// ---------
$label-background: $primary-color;
- $label-color: foreground($label-background);
+ $label-color: $white;
+ $label-color-alt: $black;
+ $label-palette: $foundation-palette;
$label-font-size: 0.8rem;
$label-padding: 0.33333rem 0.5rem;
$label-radius: $global-radius;
- // 21. Media Object
+ // 22. Media Object
// ----------------
$mediaobject-margin-bottom: $global-margin;
$mediaobject-section-padding: $global-padding;
$mediaobject-image-width-stacked: 100%;
- // 22. Menu
+ // 23. Menu
// --------
$menu-margin: 0;
- $menu-margin-nested: 1rem;
- $menu-item-padding: 0.7rem 1rem;
+ $menu-nested-margin: $global-menu-nested-margin;
+ $menu-items-padding: $global-menu-padding;
+ $menu-simple-margin: 1rem;
+ $menu-item-color-active: $white;
+ $menu-item-background-active: get-color(primary);
$menu-icon-spacing: 0.25rem;
- $menu-expand-max: 6;
+ $menu-item-background-hover: $light-gray;
+ $menu-state-back-compat: true;
+ $menu-centered-back-compat: true;
+ $menu-icons-back-compat: true;
+
+ // 24. Meter
+ // ---------
- // 23. Off-canvas
+ $meter-height: 1rem;
+ $meter-radius: $global-radius;
+ $meter-background: $medium-gray;
+ $meter-fill-good: $success-color;
+ $meter-fill-medium: $warning-color;
+ $meter-fill-bad: $alert-color;
+
+ // 25. Off-canvas
// --------------
- $offcanvas-size: 250px;
+ $offcanvas-sizes: (
+ small: 250px,
+ );
+ $offcanvas-vertical-sizes: (
+ small: 250px,
+ );
$offcanvas-background: $light-gray;
- $offcanvas-zindex: -1;
+ $offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+ $offcanvas-inner-shadow-size: 20px;
+ $offcanvas-inner-shadow-color: rgba($black, 0.25);
+ $offcanvas-overlay-zindex: 11;
+ $offcanvas-push-zindex: 12;
+ $offcanvas-overlap-zindex: 13;
+ $offcanvas-reveal-zindex: 12;
$offcanvas-transition-length: 0.5s;
$offcanvas-transition-timing: ease;
+ $offcanvas-fixed-reveal: true;
$offcanvas-exit-background: rgba($white, 0.25);
$maincontent-class: 'off-canvas-content';
- $maincontent-shadow: 0 0 10px rgba($black, 0.5);
- // 24. Orbit
+ // 26. Orbit
// ---------
$orbit-bullet-background: $medium-gray;
@@ @@ -396,7 +529,7 @@ $orbit-control-background-hover: rgba($black, 0.5);
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;
- // 25. Pagination
+ // 27. Pagination
// --------------
$pagination-font-size: rem-calc(14);
@@ @@ -407,13 +540,14 @@ $pagination-item-spacing: rem-calc(1);
$pagination-radius: $global-radius;
$pagination-item-background-hover: $light-gray;
$pagination-item-background-current: $primary-color;
- $pagination-item-color-current: foreground($pagination-item-background-current);
+ $pagination-item-color-current: $white;
$pagination-item-color-disabled: $medium-gray;
$pagination-ellipsis-color: $black;
$pagination-mobile-items: false;
+ $pagination-mobile-current-item: false;
$pagination-arrows: true;
- // 26. Progress Bar
+ // 28. Progress Bar
// ----------------
$progress-height: 1rem;
@@ @@ -422,24 +556,194 @@ $progress-margin-bottom: $global-margin;
$progress-meter-background: $primary-color;
$progress-radius: $global-radius;
- // 27. Reveal
+ // 29. Prototype Arrow
+ // -------------------
+
+ $prototype-arrow-directions: (
+ down,
+ up,
+ right,
+ left
+ );
+ $prototype-arrow-size: 0.4375rem;
+ $prototype-arrow-color: $black;
+
+ // 30. Prototype Border-Box
+ // ------------------------
+
+ $prototype-border-box-breakpoints: $global-prototype-breakpoints;
+
+ // 31. Prototype Border-None
+ // -------------------------
+
+ $prototype-border-none-breakpoints: $global-prototype-breakpoints;
+
+ // 32. Prototype Bordered
+ // ----------------------
+
+ $prototype-bordered-breakpoints: $global-prototype-breakpoints;
+ $prototype-border-width: rem-calc(1);
+ $prototype-border-type: solid;
+ $prototype-border-color: $medium-gray;
+
+ // 33. Prototype Display
+ // ---------------------
+
+ $prototype-display-breakpoints: $global-prototype-breakpoints;
+ $prototype-display: (
+ inline,
+ inline-block,
+ block,
+ table,
+ table-cell
+ );
+
+ // 34. Prototype Font-Styling
+ // --------------------------
+
+ $prototype-font-breakpoints: $global-prototype-breakpoints;
+ $prototype-wide-letter-spacing: rem-calc(4);
+ $prototype-font-normal: $global-weight-normal;
+ $prototype-font-bold: $global-weight-bold;
+
+ // 35. Prototype List-Style-Type
+ // -----------------------------
+
+ $prototype-list-breakpoints: $global-prototype-breakpoints;
+ $prototype-style-type-unordered: (
+ disc,
+ circle,
+ square
+ );
+ $prototype-style-type-ordered: (
+ decimal,
+ lower-alpha,
+ lower-latin,
+ lower-roman,
+ upper-alpha,
+ upper-latin,
+ upper-roman
+ );
+
+ // 36. Prototype Overflow
+ // ----------------------
+
+ $prototype-overflow-breakpoints: $global-prototype-breakpoints;
+ $prototype-overflow: (
+ visible,
+ hidden,
+ scroll
+ );
+
+ // 37. Prototype Position
+ // ----------------------
+
+ $prototype-position-breakpoints: $global-prototype-breakpoints;
+ $prototype-position: (
+ static,
+ relative,
+ absolute,
+ fixed
+ );
+ $prototype-position-z-index: 975;
+
+ // 38. Prototype Rounded
+ // ---------------------
+
+ $prototype-rounded-breakpoints: $global-prototype-breakpoints;
+ $prototype-border-radius: rem-calc(3);
+
+ // 39. Prototype Separator
+ // -----------------------
+
+ $prototype-separator-breakpoints: $global-prototype-breakpoints;
+ $prototype-separator-align: center;
+ $prototype-separator-height: rem-calc(2);
+ $prototype-separator-width: 3rem;
+ $prototype-separator-background: $primary-color;
+ $prototype-separator-margin-top: $global-margin;
+
+ // 40. Prototype Shadow
+ // --------------------
+
+ $prototype-shadow-breakpoints: $global-prototype-breakpoints;
+ $prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
+ 0 2px 10px 0 rgba(0,0,0,.12);
+
+ // 41. Prototype Sizing
+ // --------------------
+
+ $prototype-sizing-breakpoints: $global-prototype-breakpoints;
+ $prototype-sizing: (
+ width,
+ height
+ );
+ $prototype-sizes: (
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%
+ );
+
+ // 42. Prototype Spacing
+ // ---------------------
+
+ $prototype-spacing-breakpoints: $global-prototype-breakpoints;
+ $prototype-spacers-count: 3;
+
+ // 43. Prototype Text-Decoration
+ // -----------------------------
+
+ $prototype-decoration-breakpoints: $global-prototype-breakpoints;
+ $prototype-text-decoration: (
+ overline,
+ underline,
+ line-through,
+ );
+
+ // 44. Prototype Text-Transformation
+ // ---------------------------------
+
+ $prototype-transformation-breakpoints: $global-prototype-breakpoints;
+ $prototype-text-transformation: (
+ lowercase,
+ uppercase,
+ capitalize
+ );
+
+ // 45. Prototype Text-Utilities
+ // ----------------------------
+
+ $prototype-utilities-breakpoints: $global-prototype-breakpoints;
+ $prototype-text-overflow: ellipsis;
+
+ // 46. Responsive Embed
+ // --------------------
+
+ $responsive-embed-margin-bottom: rem-calc(16);
+ $responsive-embed-ratios: (
+ default: 4 by 3,
+ widescreen: 16 by 9,
+ );
+
+ // 47. Reveal
// ----------
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
- $reveal-offset: rem-calc(100);
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
- // 28. Slider
+ // 48. Slider
// ----------
+ $slider-width-vertical: 0.5rem;
+ $slider-transition: all 0.2s ease-in-out;
$slider-height: 0.5rem;
- $slider-width-vertical: $slider-height;
$slider-background: $light-gray;
$slider-fill-background: $medium-gray;
$slider-handle-height: 1.4rem;
@@ @@ -447,9 +751,8 @@ $slider-handle-width: 1.4rem;
$slider-handle-background: $primary-color;
$slider-opacity-disabled: 0.25;
$slider-radius: $global-radius;
- $slider-transition: all 0.2s ease-in-out;
- // 29. Switch
+ // 49. Switch
// ----------
$switch-background: $medium-gray;
@@ @@ -465,7 +768,7 @@ $switch-paddle-offset: 0.25rem;
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
- // 30. Table
+ // 50. Table
// ---------
$table-background: $white;
@@ @@ -475,30 +778,36 @@ $table-padding: rem-calc(8 10 10);
$table-hover-scale: 2%;
$table-row-hover: darken($table-background, $table-hover-scale);
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+ $table-is-striped: true;
$table-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even;
$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+ $table-head-row-hover: darken($table-head-background, $table-hover-scale);
$table-foot-background: smart-scale($table-background, $table-color-scale);
+ $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
$table-head-font-color: $body-font-color;
+ $table-foot-font-color: $body-font-color;
$show-header-for-stacked: false;
+ $table-stack-breakpoint: medium;
- // 31. Tabs
+ // 51. Tabs
// --------
$tab-margin: 0;
$tab-background: $white;
+ $tab-color: $primary-color;
$tab-background-active: $light-gray;
- $tab-border: $light-gray;
- $tab-item-color: foreground($tab-background, $primary-color);
+ $tab-active-color: $primary-color;
+ $tab-item-font-size: rem-calc(12);
$tab-item-background-hover: $white;
$tab-item-padding: 1.25rem 1.5rem;
$tab-expand-max: 6;
$tab-content-background: $white;
$tab-content-border: $light-gray;
- $tab-content-color: foreground($tab-background, $primary-color);
+ $tab-content-color: $body-font-color;
$tab-content-padding: 1rem;
- // 32. Thumbnail
+ // 52. Thumbnail
// -------------
$thumbnail-border: solid 4px $white;
@@ @@ -508,22 +817,53 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;
- // 33. Tooltip
+ // 53. Title Bar
+ // -------------
+
+ $titlebar-background: $black;
+ $titlebar-color: $white;
+ $titlebar-padding: 0.5rem;
+ $titlebar-text-font-weight: bold;
+ $titlebar-icon-color: $white;
+ $titlebar-icon-color-hover: $medium-gray;
+ $titlebar-icon-spacing: 0.25rem;
+
+ // 54. Tooltip
// -----------
+ $has-tip-cursor: help;
+ $has-tip-font-weight: $global-weight-bold;
+ $has-tip-border-bottom: dotted 1px $dark-gray;
$tooltip-background-color: $black;
$tooltip-color: $white;
$tooltip-padding: 0.75rem;
+ $tooltip-max-width: 10rem;
$tooltip-font-size: $small-font-size;
$tooltip-pip-width: 0.75rem;
$tooltip-pip-height: $tooltip-pip-width * 0.866;
- $tooltip-pip-offset: 1.25rem;
$tooltip-radius: $global-radius;
- // 34. Top Bar
+ // 55. Top Bar
// -----------
$topbar-padding: 0.5rem;
- $topbar-background: #eee;
- $topbar-link-color: #fff;
+ $topbar-background: $light-gray;
+ $topbar-submenu-background: $topbar-background;
+ $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px;
+ $topbar-unstack-breakpoint: medium;
+
+ // 56. Xy Grid
+ // -----------
+
+ $xy-grid: true;
+ $grid-container: $global-width;
+ $grid-columns: 12;
+ $grid-margin-gutters: (
+ small: 20px,
+ medium: 30px
+ );
+ $grid-padding-gutters: $grid-margin-gutters;
+ $grid-container-padding: $grid-padding-gutters;
+ $grid-container-max: $global-width;
+ $xy-block-grid-max: 8;
generators/foundation/public/stylesheets/app.css +0 -3
@@ @@ -1,3 +0,0 @@
- /*Import Foundation Styles*/
-
- @import url("foundation.css");
generators/foundation/public/stylesheets/app.scss +15 -6
@@ @@ -2,28 +2,32 @@
@import 'settings';
@import 'foundation6/foundation';
- @import 'foundation6/motion-ui';
+ @import 'foundation6/motion-ui/motion-ui';
@include foundation-global-styles;
- @include foundation-grid;
+ // @include foundation-grid;
+ // @include foundation-flex-grid;
+ @include foundation-xy-grid-classes;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
- @include foundation-visibility-classes;
- @include foundation-float-classes;
+ // @include foundation-range-input;
@include foundation-accordion;
+ @include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
+ @include foundation-card;
@include foundation-close-button;
+ @include foundation-menu;
+ @include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
- @include foundation-flex-video;
+ @include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
- @include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@@ @@ -38,6 +42,11 @@
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
+ @include foundation-visibility-classes;
+ // @include foundation-float-classes;
+ @include foundation-flex-classes;
+
+ // @include foundation-prototype-classes;
@include motion-ui-transitions;
@include motion-ui-animations;
generators/foundation/public/stylesheets/foundation.css +4191 -1885
@@ @@ -1,143 +1,188 @@
@charset "UTF-8";
/**
* Foundation for Sites by ZURB
- * Version 6.2.1
+ * Version 6.4.2
* foundation.zurb.com
* Licensed under MIT Open Source
*/
- /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+ @media print, screen and (min-width: 40em) {
+ .reveal, .reveal.tiny, .reveal.small, .reveal.large {
+ right: auto;
+ left: auto;
+ margin: 0 auto; } }
+
+ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
+ /* Document
+ ========================================================================== */
/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS and IE text size adjust after device orientation change,
- * without disabling user zoom.
- */
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ * IE on Windows Phone and in iOS.
+ */
html {
font-family: sans-serif;
/* 1 */
- -ms-text-size-adjust: 100%;
+ line-height: 1.15;
/* 2 */
+ -ms-text-size-adjust: 100%;
+ /* 3 */
-webkit-text-size-adjust: 100%;
- /* 2 */ }
+ /* 3 */ }
+ /* Sections
+ ========================================================================== */
/**
- * Remove default margin.
- */
+ * Remove the margin in all browsers (opinionated).
+ */
body {
margin: 0; }
- /* HTML5 display definitions
- ========================================================================== */
/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
+ * Add the correct display in IE 9-.
+ */
article,
aside,
- details,
- figcaption,
- figure,
footer,
header,
- hgroup,
- main,
- menu,
nav,
- section,
- summary {
+ section {
display: block; }
/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
- audio,
- canvas,
- progress,
- video {
- display: inline-block;
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+ h1 {
+ font-size: 2em;
+ margin: 0.67em 0; }
+
+ /* Grouping content
+ ========================================================================== */
+ /**
+ * Add the correct display in IE 9-.
+ */
+ figcaption,
+ figure {
+ display: block; }
+
+ /**
+ * Add the correct margin in IE 8.
+ */
+ figure {
+ margin: 1em 40px; }
+
+ /**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+ hr {
+ box-sizing: content-box;
/* 1 */
- vertical-align: baseline;
+ height: 0;
+ /* 1 */
+ overflow: visible;
/* 2 */ }
/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
- audio:not([controls]) {
- display: none;
- height: 0; }
+ * Add the correct display in IE.
+ */
+ main {
+ display: block; }
/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
- */
- [hidden],
- template {
- display: none; }
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+ pre {
+ font-family: monospace, monospace;
+ /* 1 */
+ font-size: 1em;
+ /* 2 */ }
/* Links
- ========================================================================== */
+ ========================================================================== */
/**
- * Remove the gray background color from active links in IE 10.
- */
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
a {
- background-color: transparent; }
+ background-color: transparent;
+ /* 1 */
+ -webkit-text-decoration-skip: objects;
+ /* 2 */ }
/**
- * Improve readability of focused elements when they are also in an
- * active/hover state.
- */
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
a:active,
a:hover {
- outline: 0; }
+ outline-width: 0; }
/* Text-level semantics
- ========================================================================== */
+ ========================================================================== */
/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
abbr[title] {
- border-bottom: 1px dotted; }
+ border-bottom: none;
+ /* 1 */
+ text-decoration: underline;
+ /* 2 */
+ text-decoration: underline dotted;
+ /* 2 */ }
/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
b,
strong {
- font-weight: bold; }
+ font-weight: inherit; }
/**
- * Address styling not present in Safari and Chrome.
- */
- dfn {
- font-style: italic; }
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+ b,
+ strong {
+ font-weight: bolder; }
/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
- h1 {
- font-size: 2em;
- margin: 0.67em 0; }
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+ code,
+ kbd,
+ samp {
+ font-family: monospace, monospace;
+ /* 1 */
+ font-size: 1em;
+ /* 2 */ }
+
+ /**
+ * Add the correct font style in Android 4.3-.
+ */
+ dfn {
+ font-style: italic; }
/**
- * Address styling not present in IE 8/9.
- */
+ * Add the correct background and color in IE 9-.
+ */
mark {
- background: #ff0;
+ background-color: #ff0;
color: #000; }
/**
- * Address inconsistent and variable font size in all browsers.
- */
+ * Add the correct font size in all browsers.
+ */
small {
font-size: 80%; }
/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
sub,
sup {
font-size: 75%;
@@ @@ -145,228 +190,250 @@ sup {
position: relative;
vertical-align: baseline; }
- sup {
- top: -0.5em; }
-
sub {
bottom: -0.25em; }
- /* Embedded content
- ========================================================================== */
- /**
- * Remove border when inside `a` element in IE 8/9/10.
- */
- img {
- border: 0; }
-
- /**
- * Correct overflow not hidden in IE 9/10/11.
- */
- svg:not(:root) {
- overflow: hidden; }
+ sup {
+ top: -0.5em; }
- /* Grouping content
- ========================================================================== */
+ /* Embedded content
+ ========================================================================== */
/**
- * Address margin not present in IE 8/9 and Safari.
- */
- figure {
- margin: 1em 40px; }
+ * Add the correct display in IE 9-.
+ */
+ audio,
+ video {
+ display: inline-block; }
/**
- * Address differences between Firefox and other browsers.
- */
- hr {
- box-sizing: content-box;
+ * Add the correct display in iOS 4-7.
+ */
+ audio:not([controls]) {
+ display: none;
height: 0; }
/**
- * Contain overflow in all browsers.
- */
- pre {
- overflow: auto; }
+ * Remove the border on images inside links in IE 10-.
+ */
+ img {
+ border-style: none; }
/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
- code,
- kbd,
- pre,
- samp {
- font-family: monospace, monospace;
- font-size: 1em; }
+ * Hide the overflow in IE.
+ */
+ svg:not(:root) {
+ overflow: hidden; }
/* Forms
- ========================================================================== */
- /**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
+ ========================================================================== */
/**
- * 1. Correct color not being inherited.
- * Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
button,
input,
optgroup,
select,
textarea {
- color: inherit;
+ font-family: sans-serif;
+ /* 1 */
+ font-size: 100%;
+ /* 1 */
+ line-height: 1.15;
/* 1 */
- font: inherit;
- /* 2 */
margin: 0;
- /* 3 */ }
+ /* 2 */ }
/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
+ * Show the overflow in IE.
+ */
button {
overflow: visible; }
/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
button,
select {
+ /* 1 */
text-transform: none; }
/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- * and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- * `input` and others.
- */
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ * controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
button,
- html input[type="button"],
- input[type="reset"],
- input[type="submit"] {
+ html [type="button"],
+ [type="reset"],
+ [type="submit"] {
-webkit-appearance: button;
- /* 2 */
- cursor: pointer;
- /* 3 */ }
-
- /**
- * Re-set default cursor for disabled elements.
- */
- button[disabled],
- html input[disabled] {
- cursor: not-allowed; }
+ /* 2 */ }
- /**
- * Remove inner padding and border in Firefox 4+.
- */
- button::-moz-focus-inner,
- input::-moz-focus-inner {
- border: 0;
- padding: 0; }
+ button,
+ [type="button"],
+ [type="reset"],
+ [type="submit"] {
+ /**
+ * Remove the inner border and padding in Firefox.
+ */
+ /**
+ * Restore the focus styles unset by the previous rule.
+ */ }
+ button::-moz-focus-inner,
+ [type="button"]::-moz-focus-inner,
+ [type="reset"]::-moz-focus-inner,
+ [type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0; }
+ button:-moz-focusring,
+ [type="button"]:-moz-focusring,
+ [type="reset"]:-moz-focusring,
+ [type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText; }
/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
+ * Show the overflow in Edge.
+ */
input {
- line-height: normal; }
+ overflow: visible; }
/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
- input[type="checkbox"],
- input[type="radio"] {
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+ [type="checkbox"],
+ [type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
- input[type="number"]::-webkit-inner-spin-button,
- input[type="number"]::-webkit-outer-spin-button {
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+ [type="number"]::-webkit-inner-spin-button,
+ [type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
- */
- input[type="search"] {
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+ [type="search"] {
-webkit-appearance: textfield;
/* 1 */
- box-sizing: content-box;
- /* 2 */ }
+ outline-offset: -2px;
+ /* 2 */
+ /**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */ }
+ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none; }
/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
- input[type="search"]::-webkit-search-cancel-button,
- input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none; }
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+ ::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ /* 1 */
+ font: inherit;
+ /* 2 */ }
/**
- * Define consistent border, margin, and padding.
- * [NOTE] We don't enable this ruleset in Foundation, because we want the <fieldset> element to have plain styling.
- */
- /* fieldset {
- border: 1px solid #c0c0c0;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em;
- } */
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+ fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em; }
+
/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
legend {
- border: 0;
+ box-sizing: border-box;
+ /* 1 */
+ display: table;
+ /* 1 */
+ max-width: 100%;
/* 1 */
padding: 0;
+ /* 3 */
+ color: inherit;
+ /* 2 */
+ white-space: normal;
+ /* 1 */ }
+
+ /**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+ progress {
+ display: inline-block;
+ /* 1 */
+ vertical-align: baseline;
/* 2 */ }
/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
+ * Remove the default vertical scrollbar in IE.
+ */
textarea {
overflow: auto; }
+ /* Interactive
+ ========================================================================== */
+ /*
+ * Add the correct display in Edge, IE, and Firefox.
+ */
+ details {
+ display: block; }
+
+ /*
+ * Add the correct display in all browsers.
+ */
+ summary {
+ display: list-item; }
+
+ /*
+ * Add the correct display in IE 9-.
+ */
+ menu {
+ display: block; }
+
+ /* Scripting
+ ========================================================================== */
/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
- optgroup {
- font-weight: bold; }
+ * Add the correct display in IE 9-.
+ */
+ canvas {
+ display: inline-block; }
- /* Tables
- ========================================================================== */
/**
- * Remove most spacing between table cells.
- */
- table {
- border-collapse: collapse;
- border-spacing: 0; }
+ * Add the correct display in IE.
+ */
+ template {
+ display: none; }
- td,
- th {
- padding: 0; }
+ /* Hidden
+ ========================================================================== */
+ /**
+ * Add the correct display in IE 10-.
+ */
+ [hidden] {
+ display: none; }
.foundation-mq {
font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; }
html {
- font-size: 100%;
- box-sizing: border-box; }
+ box-sizing: border-box;
+ font-size: 100%; }
*,
*::before,
@@ @@ -374,22 +441,22 @@ html {
box-sizing: inherit; }
body {
- padding: 0;
margin: 0;
+ padding: 0;
+ background: #fefefe;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-weight: normal;
line-height: 1.5;
color: #0a0a0a;
- background: #fefefe;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
img {
+ display: inline-block;
+ vertical-align: middle;
max-width: 100%;
height: auto;
- -ms-interpolation-mode: bicubic;
- display: inline-block;
- vertical-align: middle; }
+ -ms-interpolation-mode: bicubic; }
textarea {
height: auto;
@@ @@ -397,12 +464,10 @@ textarea {
border-radius: 0; }
select {
+ box-sizing: border-box;
width: 100%;
border-radius: 0; }
- #map_canvas img,
- #map_canvas embed,
- #map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object,
@@ @@ -412,754 +477,1705 @@ select {
max-width: none !important; }
button {
- -webkit-appearance: none;
- -moz-appearance: none;
- background: transparent;
padding: 0;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
border: 0;
border-radius: 0;
- line-height: 1; }
+ background: transparent;
+ line-height: 1;
+ cursor: auto; }
[data-whatinput='mouse'] button {
outline: 0; }
+ pre {
+ overflow: auto; }
+
+ button,
+ input,
+ optgroup,
+ select,
+ textarea {
+ font-family: inherit; }
+
.is-visible {
display: block !important; }
.is-hidden {
display: none !important; }
- .row {
- max-width: 75rem;
- margin-left: auto;
- margin-right: auto; }
- .row::before, .row::after {
- content: ' ';
- display: table; }
- .row::after {
- clear: both; }
- .row.collapse > .column, .row.collapse > .columns {
- padding-left: 0;
- padding-right: 0; }
- .row .row {
- max-width: none;
- margin-left: -0.625rem;
- margin-right: -0.625rem;
- max-width: none; }
- @media screen and (min-width: 40em) {
- .row .row {
- margin-left: -0.9375rem;
- margin-right: -0.9375rem; } }
- .row .row.collapse {
- margin-left: 0;
- margin-right: 0; }
- .row.expanded {
- max-width: none; }
- .row.expanded .row {
- margin-left: auto;
- margin-right: auto; }
-
- .column, .columns {
- width: 100%;
- float: left;
+ .grid-container {
+ padding-right: 0.625rem;
padding-left: 0.625rem;
- padding-right: 0.625rem; }
- @media screen and (min-width: 40em) {
- .column, .columns {
- padding-left: 0.9375rem;
- padding-right: 0.9375rem; } }
- .column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
- float: right; }
- .column.end:last-child:last-child, .end.columns:last-child:last-child {
- float: left; }
-
- .column.row.row, .row.row.columns {
- float: none; }
- .row .column.row.row, .row .row.row.columns {
- padding-left: 0;
+ max-width: 75rem;
+ margin: 0 auto; }
+ @media print, screen and (min-width: 40em) {
+ .grid-container {
+ padding-right: 0.9375rem;
+ padding-left: 0.9375rem; } }
+ .grid-container.fluid {
+ padding-right: 0.625rem;
+ padding-left: 0.625rem;
+ max-width: 100%;
+ margin: 0 auto; }
+ @media print, screen and (min-width: 40em) {
+ .grid-container.fluid {
+ padding-right: 0.9375rem;
+ padding-left: 0.9375rem; } }
+ .grid-container.full {
padding-right: 0;
- margin-left: 0;
- margin-right: 0; }
-
- .small-1 {
+ padding-left: 0;
+ max-width: 100%;
+ margin: 0 auto; }
+
+ .grid-x {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap; }
+
+ .cell {
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ min-height: 0px;
+ min-width: 0px;
+ width: 100%; }
+ .cell.auto {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px; }
+ .cell.shrink {
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto; }
+
+ .grid-x > .auto {
+ width: auto; }
+
+ .grid-x > .shrink {
+ width: auto; }
+
+ .grid-x > .small-shrink, .grid-x > .small-full, .grid-x > .small-1, .grid-x > .small-2, .grid-x > .small-3, .grid-x > .small-4, .grid-x > .small-5, .grid-x > .small-6, .grid-x > .small-7, .grid-x > .small-8, .grid-x > .small-9, .grid-x > .small-10, .grid-x > .small-11, .grid-x > .small-12 {
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto; }
+
+ @media print, screen and (min-width: 40em) {
+ .grid-x > .medium-shrink, .grid-x > .medium-full, .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12 {
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto; } }
+
+ @media print, screen and (min-width: 64em) {
+ .grid-x > .large-shrink, .grid-x > .large-full, .grid-x > .large-1, .grid-x > .large-2, .grid-x > .large-3, .grid-x > .large-4, .grid-x > .large-5, .grid-x > .large-6, .grid-x > .large-7, .grid-x > .large-8, .grid-x > .large-9, .grid-x > .large-10, .grid-x > .large-11, .grid-x > .large-12 {
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto; } }
+
+ .grid-x > .small-1 {
width: 8.33333%; }
- .small-push-1 {
- position: relative;
- left: 8.33333%; }
-
- .small-pull-1 {
- position: relative;
- left: -8.33333%; }
-
- .small-offset-0 {
- margin-left: 0%; }
-
- .small-2 {
+ .grid-x > .small-2 {
width: 16.66667%; }
- .small-push-2 {
- position: relative;
- left: 16.66667%; }
-
- .small-pull-2 {
- position: relative;
- left: -16.66667%; }
-
- .small-offset-1 {
- margin-left: 8.33333%; }
-
- .small-3 {
+ .grid-x > .small-3 {
width: 25%; }
- .small-push-3 {
- position: relative;
- left: 25%; }
-
- .small-pull-3 {
- position: relative;
- left: -25%; }
-
- .small-offset-2 {
- margin-left: 16.66667%; }
-
- .small-4 {
+ .grid-x > .small-4 {
width: 33.33333%; }
- .small-push-4 {
- position: relative;
- left: 33.33333%; }
-
- .small-pull-4 {
- position: relative;
- left: -33.33333%; }
-
- .small-offset-3 {
- margin-left: 25%; }
-
- .small-5 {
+ .grid-x > .small-5 {
width: 41.66667%; }
- .small-push-5 {
- position: relative;
- left: 41.66667%; }
-
- .small-pull-5 {
- position: relative;
- left: -41.66667%; }
-
- .small-offset-4 {
- margin-left: 33.33333%; }
-
- .small-6 {
+ .grid-x > .small-6 {
width: 50%; }
- .small-push-6 {
- position: relative;
- left: 50%; }
+ .grid-x > .small-7 {
+ width: 58.33333%; }
- .small-pull-6 {
- position: relative;
- left: -50%; }
+ .grid-x > .small-8 {
+ width: 66.66667%; }
- .small-offset-5 {
- margin-left: 41.66667%; }
+ .grid-x > .small-9 {
+ width: 75%; }
- .small-7 {
- width: 58.33333%; }
+ .grid-x > .small-10 {
+ width: 83.33333%; }
- .small-push-7 {
- position: relative;
- left: 58.33333%; }
+ .grid-x > .small-11 {
+ width: 91.66667%; }
- .small-pull-7 {
- position: relative;
- left: -58.33333%; }
+ .grid-x > .small-12 {
+ width: 100%; }
- .small-offset-6 {
- margin-left: 50%; }
+ @media print, screen and (min-width: 40em) {
+ .grid-x > .medium-auto {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px;
+ width: auto; }
+ .grid-x > .medium-shrink {
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto; }
+ .grid-x > .medium-1 {
+ width: 8.33333%; }
+ .grid-x > .medium-2 {
+ width: 16.66667%; }
+ .grid-x > .medium-3 {
+ width: 25%; }
+ .grid-x > .medium-4 {
+ width: 33.33333%; }
+ .grid-x > .medium-5 {
+ width: 41.66667%; }
+ .grid-x > .medium-6 {
+ width: 50%; }
+ .grid-x > .medium-7 {
+ width: 58.33333%; }
+ .grid-x > .medium-8 {
+ width: 66.66667%; }
+ .grid-x > .medium-9 {
+ width: 75%; }
+ .grid-x > .medium-10 {
+ width: 83.33333%; }
+ .grid-x > .medium-11 {
+ width: 91.66667%; }
+ .grid-x > .medium-12 {
+ width: 100%; } }
- .small-8 {
- width: 66.66667%; }
+ @media print, screen and (min-width: 64em) {
+ .grid-x > .large-auto {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px;
+ width: auto; }
+ .grid-x > .large-shrink {
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto; }
+ .grid-x > .large-1 {
+ width: 8.33333%; }
+ .grid-x > .large-2 {
+ width: 16.66667%; }
+ .grid-x > .large-3 {
+ width: 25%; }
+ .grid-x > .large-4 {
+ width: 33.33333%; }
+ .grid-x > .large-5 {
+ width: 41.66667%; }
+ .grid-x > .large-6 {
+ width: 50%; }
+ .grid-x > .large-7 {
+ width: 58.33333%; }
+ .grid-x > .large-8 {
+ width: 66.66667%; }
+ .grid-x > .large-9 {
+ width: 75%; }
+ .grid-x > .large-10 {
+ width: 83.33333%; }
+ .grid-x > .large-11 {
+ width: 91.66667%; }
+ .grid-x > .large-12 {
+ width: 100%; } }
- .small-push-8 {
- position: relative;
- left: 66.66667%; }
+ .grid-margin-x:not(.grid-x) > .cell {
+ width: auto; }
- .small-pull-8 {
- position: relative;
- left: -66.66667%; }
+ .grid-margin-y:not(.grid-y) > .cell {
+ height: auto; }
- .small-offset-7 {
- margin-left: 58.33333%; }
+ .grid-margin-x {
+ margin-left: -0.625rem;
+ margin-right: -0.625rem; }
+ @media print, screen and (min-width: 40em) {
+ .grid-margin-x {
+ margin-left: -0.9375rem;
+ margin-right: -0.9375rem; } }
+ .grid-margin-x > .cell {
+ width: calc(100% - 1.25rem);
+ margin-left: 0.625rem;
+ margin-right: 0.625rem; }
+ @media print, screen and (min-width: 40em) {
+ .grid-margin-x > .cell {
+ width: calc(100% - 1.875rem);
+ margin-left: 0.9375rem;
+ margin-right: 0.9375rem; } }
+ .grid-margin-x > .auto {
+ width: auto; }
+ .grid-margin-x > .shrink {
+ width: auto; }
+ .grid-margin-x > .small-1 {
+ width: calc(8.33333% - 1.25rem); }
+ .grid-margin-x > .small-2 {
+ width: calc(16.66667% - 1.25rem); }
+ .grid-margin-x > .small-3 {
+ width: calc(25% - 1.25rem); }
+ .grid-margin-x > .small-4 {
+ width: calc(33.33333% - 1.25rem); }
+ .grid-margin-x > .small-5 {
+ width: calc(41.66667% - 1.25rem); }
+ .grid-margin-x > .small-6 {
+ width: calc(50% - 1.25rem); }
+ .grid-margin-x > .small-7 {
+ width: calc(58.33333% - 1.25rem); }
+ .grid-margin-x > .small-8 {
+ width: calc(66.66667% - 1.25rem); }
+ .grid-margin-x > .small-9 {
+ width: calc(75% - 1.25rem); }
+ .grid-margin-x > .small-10 {
+ width: calc(83.33333% - 1.25rem); }
+ .grid-margin-x > .small-11 {
+ width: calc(91.66667% - 1.25rem); }
+ .grid-margin-x > .small-12 {
+ width: calc(100% - 1.25rem); }
+ @media print, screen and (min-width: 40em) {
+ .grid-margin-x > .auto {
+ width: auto; }
+ .grid-margin-x > .shrink {
+ width: auto; }
+ .grid-margin-x > .small-1 {
+ width: calc(8.33333% - 1.875rem); }
+ .grid-margin-x > .small-2 {
+ width: calc(16.66667% - 1.875rem); }
+ .grid-margin-x > .small-3 {
+ width: calc(25% - 1.875rem); }
+ .grid-margin-x > .small-4 {
+ width: calc(33.33333% - 1.875rem); }
+ .grid-margin-x > .small-5 {
+ width: calc(41.66667% - 1.875rem); }
+ .grid-margin-x > .small-6 {
+ width: calc(50% - 1.875rem); }
+ .grid-margin-x > .small-7 {
+ width: calc(58.33333% - 1.875rem); }
+ .grid-margin-x > .small-8 {
+ width: calc(66.66667% - 1.875rem); }
+ .grid-margin-x > .small-9 {
+ width: calc(75% - 1.875rem); }
+ .grid-margin-x > .small-10 {
+ width: calc(83.33333% - 1.875rem); }
+ .grid-margin-x > .small-11 {
+ width: calc(91.66667% - 1.875rem); }
+ .grid-margin-x > .small-12 {
+ width: calc(100% - 1.875rem); }
+ .grid-margin-x > .medium-auto {
+ width: auto; }
+ .grid-margin-x > .medium-shrink {
+ width: auto; }
+ .grid-margin-x > .medium-1 {
+ width: calc(8.33333% - 1.875rem); }
+ .grid-margin-x > .medium-2 {
+ width: calc(16.66667% - 1.875rem); }
+ .grid-margin-x > .medium-3 {
+ width: calc(25% - 1.875rem); }
+ .grid-margin-x > .medium-4 {
+ width: calc(33.33333% - 1.875rem); }
+ .grid-margin-x > .medium-5 {
+ width: calc(41.66667% - 1.875rem); }
+ .grid-margin-x > .medium-6 {
+ width: calc(50% - 1.875rem); }
+ .grid-margin-x > .medium-7 {
+ width: calc(58.33333% - 1.875rem); }
+ .grid-margin-x > .medium-8 {
+ width: calc(66.66667% - 1.875rem); }
+ .grid-margin-x > .medium-9 {
+ width: calc(75% - 1.875rem); }
+ .grid-margin-x > .medium-10 {
+ width: calc(83.33333% - 1.875rem); }
+ .grid-margin-x > .medium-11 {
+ width: calc(91.66667% - 1.875rem); }
+ .grid-margin-x > .medium-12 {
+ width: calc(100% - 1.875rem); } }
+ @media print, screen and (min-width: 64em) {
+ .grid-margin-x > .large-auto {
+ width: auto; }
+ .grid-margin-x > .large-shrink {
+ width: auto; }
+ .grid-margin-x > .large-1 {
+ width: calc(8.33333% - 1.875rem); }
+ .grid-margin-x > .large-2 {
+ width: calc(16.66667% - 1.875rem); }
+ .grid-margin-x > .large-3 {
+ width: calc(25% - 1.875rem); }
+ .grid-margin-x > .large-4 {
+ width: calc(33.33333% - 1.875rem); }
+ .grid-margin-x > .large-5 {
+ width: calc(41.66667% - 1.875rem); }
+ .grid-margin-x > .large-6 {
+ width: calc(50% - 1.875rem); }
+ .grid-margin-x > .large-7 {
+ width: calc(58.33333% - 1.875rem); }
+ .grid-margin-x > .large-8 {
+ width: calc(66.66667% - 1.875rem); }
+ .grid-margin-x > .large-9 {
+ width: calc(75% - 1.875rem); }
+ .grid-margin-x > .large-10 {
+ width: calc(83.33333% - 1.875rem); }
+ .grid-margin-x > .large-11 {
+ width: calc(91.66667% - 1.875rem); }
+ .grid-margin-x > .large-12 {
+ width: calc(100% - 1.875rem); } }
+
+ .grid-padding-x .grid-padding-x {
+ margin-right: -0.625rem;
+ margin-left: -0.625rem; }
+ @media print, screen and (min-width: 40em) {
+ .grid-padding-x .grid-padding-x {
+ margin-right: -0.9375rem;
+ margin-left: -0.9375rem; } }
+
+ .grid-container:not(.full) > .grid-padding-x {
+ margin-right: -0.625rem;
+ margin-left: -0.625rem; }
+ @media print, screen and (min-width: 40em) {
+ .grid-container:not(.full) > .grid-padding-x {
+ margin-right: -0.9375rem;
+ margin-left: -0.9375rem; } }
+
+ .grid-padding-x > .cell {
+ padding-right: 0.625rem;
+ padding-left: 0.625rem; }
+ @media print, screen and (min-width: 40em) {
+ .grid-padding-x > .cell {
+ padding-right: 0.9375rem;
+ padding-left: 0.9375rem; } }
+
+ .small-up-1 > .cell {
+ width: 100%; }
- .small-9 {
- width: 75%; }
+ .small-up-2 > .cell {
+ width: 50%; }
- .small-push-9 {
- position: relative;
- left: 75%; }
+ .small-up-3 > .cell {
+ width: 33.33333%; }
- .small-pull-9 {
- position: relative;
- left: -75%; }
+ .small-up-4 > .cell {
+ width: 25%; }
- .small-offset-8 {
- margin-left: 66.66667%; }
+ .small-up-5 > .cell {
+ width: 20%; }
- .small-10 {
- width: 83.33333%; }
+ .small-up-6 > .cell {
+ width: 16.66667%; }
- .small-push-10 {
- position: relative;
- left: 83.33333%; }
+ .small-up-7 > .cell {
+ width: 14.28571%; }
- .small-pull-10 {
- position: relative;
- left: -83.33333%; }
+ .small-up-8 > .cell {
+ width: 12.5%; }
- .small-offset-9 {
- margin-left: 75%; }
+ @media print, screen and (min-width: 40em) {
+ .medium-up-1 > .cell {
+ width: 100%; }
+ .medium-up-2 > .cell {
+ width: 50%; }
+ .medium-up-3 > .cell {
+ width: 33.33333%; }
+ .medium-up-4 > .cell {
+ width: 25%; }
+ .medium-up-5 > .cell {
+ width: 20%; }
+ .medium-up-6 > .cell {
+ width: 16.66667%; }
+ .medium-up-7 > .cell {
+ width: 14.28571%; }
+ .medium-up-8 > .cell {
+ width: 12.5%; } }
- .small-11 {
- width: 91.66667%; }
+ @media print, screen and (min-width: 64em) {
+ .large-up-1 > .cell {
+ width: 100%; }
+ .large-up-2 > .cell {
+ width: 50%; }
+ .large-up-3 > .cell {
+ width: 33.33333%; }
+ .large-up-4 > .cell {
+ width: 25%; }
+ .large-up-5 > .cell {
+ width: 20%; }
+ .large-up-6 > .cell {
+ width: 16.66667%; }
+ .large-up-7 > .cell {
+ width: 14.28571%; }
+ .large-up-8 > .cell {
+ width: 12.5%; } }
+
+ .grid-margin-x.small-up-1 > .cell {
+ width: calc(100% - 1.25rem); }
+
+ .grid-margin-x.small-up-2 > .cell {
+ width: calc(50% - 1.25rem); }
+
+ .grid-margin-x.small-up-3 > .cell {
+ width: calc(33.33333% - 1.25rem); }
+
+ .grid-margin-x.small-up-4 > .cell {
+ width: calc(25% - 1.25rem); }
+
+ .grid-margin-x.small-up-5 > .cell {
+ width: calc(20% - 1.25rem); }
+
+ .grid-margin-x.small-up-6 > .cell {
+ width: calc(16.66667% - 1.25rem); }
+
+ .grid-margin-x.small-up-7 > .cell {
+ width: calc(14.28571% - 1.25rem); }
+
+ .grid-margin-x.small-up-8 > .cell {
+ width: calc(12.5% - 1.25rem); }
+
+ @media print, screen and (min-width: 40em) {
+ .grid-margin-x.small-up-1 > .cell {
+ width: calc(100% - 1.25rem); }
+ .grid-margin-x.small-up-2 > .cell {
+ width: calc(50% - 1.25rem); }
+ .grid-margin-x.small-up-3 > .cell {
+ width: calc(33.33333% - 1.25rem); }
+ .grid-margin-x.small-up-4 > .cell {
+ width: calc(25% - 1.25rem); }
+ .grid-margin-x.small-up-5 > .cell {
+ width: calc(20% - 1.25rem); }
+ .grid-margin-x.small-up-6 > .cell {
+ width: calc(16.66667% - 1.25rem); }
+ .grid-margin-x.small-up-7 > .cell {
+ width: calc(14.28571% - 1.25rem); }
+ .grid-margin-x.small-up-8 > .cell {
+ width: calc(12.5% - 1.25rem); }
+ .grid-margin-x.medium-up-1 > .cell {
+ width: calc(100% - 1.875rem); }
+ .grid-margin-x.medium-up-2 > .cell {
+ width: calc(50% - 1.875rem); }
+ .grid-margin-x.medium-up-3 > .cell {
+ width: calc(33.33333% - 1.875rem); }
+ .grid-margin-x.medium-up-4 > .cell {
+ width: calc(25% - 1.875rem); }
+ .grid-margin-x.medium-up-5 > .cell {
+ width: calc(20% - 1.875rem); }
+ .grid-margin-x.medium-up-6 > .cell {
+ width: calc(16.66667% - 1.875rem); }
+ .grid-margin-x.medium-up-7 > .cell {
+ width: calc(14.28571% - 1.875rem); }
+ .grid-margin-x.medium-up-8 > .cell {
+ width: calc(12.5% - 1.875rem); } }
+
+ @media print, screen and (min-width: 64em) {
+ .grid-margin-x.large-up-1 > .cell {
+ width: calc(100% - 1.875rem); }
+ .grid-margin-x.large-up-2 > .cell {
+ width: calc(50% - 1.875rem); }
+ .grid-margin-x.large-up-3 > .cell {
+ width: calc(33.33333% - 1.875rem); }
+ .grid-margin-x.large-up-4 > .cell {
+ width: calc(25% - 1.875rem); }
+ .grid-margin-x.large-up-5 > .cell {
+ width: calc(20% - 1.875rem); }
+ .grid-margin-x.large-up-6 > .cell {
+ width: calc(16.66667% - 1.875rem); }
+ .grid-margin-x.large-up-7 > .cell {
+ width: calc(14.28571% - 1.875rem); }
+ .grid-margin-x.large-up-8 > .cell {
+ width: calc(12.5% - 1.875rem); } }
+
+ .small-margin-collapse {
+ margin-right: 0;
+ margin-left: 0; }
+ .small-margin-collapse > .cell {
+ margin-right: 0;
+ margin-left: 0; }
+ .small-margin-collapse > .small-1 {
+ width: 8.33333%; }
+ .small-margin-collapse > .small-2 {
+ width: 16.66667%; }
+ .small-margin-collapse > .small-3 {
+ width: 25%; }
+ .small-margin-collapse > .small-4 {
+ width: 33.33333%; }
+ .small-margin-collapse > .small-5 {
+ width: 41.66667%; }
+ .small-margin-collapse > .small-6 {
+ width: 50%; }
+ .small-margin-collapse > .small-7 {
+ width: 58.33333%; }
+ .small-margin-collapse > .small-8 {
+ width: 66.66667%; }
+ .small-margin-collapse > .small-9 {
+ width: 75%; }
+ .small-margin-collapse > .small-10 {
+ width: 83.33333%; }
+ .small-margin-collapse > .small-11 {
+ width: 91.66667%; }
+ .small-margin-collapse > .small-12 {
+ width: 100%; }
+ @media print, screen and (min-width: 40em) {
+ .small-margin-collapse > .medium-1 {
+ width: 8.33333%; }
+ .small-margin-collapse > .medium-2 {
+ width: 16.66667%; }
+ .small-margin-collapse > .medium-3 {
+ width: 25%; }
+ .small-margin-collapse > .medium-4 {
+ width: 33.33333%; }
+ .small-margin-collapse > .medium-5 {
+ width: 41.66667%; }
+ .small-margin-collapse > .medium-6 {
+ width: 50%; }
+ .small-margin-collapse > .medium-7 {
+ width: 58.33333%; }
+ .small-margin-collapse > .medium-8 {
+ width: 66.66667%; }
+ .small-margin-collapse > .medium-9 {
+ width: 75%; }
+ .small-margin-collapse > .medium-10 {
+ width: 83.33333%; }
+ .small-margin-collapse > .medium-11 {
+ width: 91.66667%; }
+ .small-margin-collapse > .medium-12 {
+ width: 100%; } }
+ @media print, screen and (min-width: 64em) {
+ .small-margin-collapse > .large-1 {
+ width: 8.33333%; }
+ .small-margin-collapse > .large-2 {
+ width: 16.66667%; }
+ .small-margin-collapse > .large-3 {
+ width: 25%; }
+ .small-margin-collapse > .large-4 {
+ width: 33.33333%; }
+ .small-margin-collapse > .large-5 {
+ width: 41.66667%; }
+ .small-margin-collapse > .large-6 {
+ width: 50%; }
+ .small-margin-collapse > .large-7 {
+ width: 58.33333%; }
+ .small-margin-collapse > .large-8 {
+ width: 66.66667%; }
+ .small-margin-collapse > .large-9 {
+ width: 75%; }
+ .small-margin-collapse > .large-10 {
+ width: 83.33333%; }
+ .small-margin-collapse > .large-11 {
+ width: 91.66667%; }
+ .small-margin-collapse > .large-12 {
+ width: 100%; } }
- .small-push-11 {
- position: relative;
- left: 91.66667%; }
+ .small-padding-collapse {
+ margin-right: 0;
+ margin-left: 0; }
+ .small-padding-collapse > .cell {
+ padding-right: 0;
+ padding-left: 0; }
- .small-pull-11 {
- position: relative;
- left: -91.66667%; }
+ @media print, screen and (min-width: 40em) {
+ .medium-margin-collapse {
+ margin-right: 0;
+ margin-left: 0; }
+ .medium-margin-collapse > .cell {
+ margin-right: 0;
+ margin-left: 0; } }
- .small-offset-10 {
- margin-left: 83.33333%; }
+ @media print, screen and (min-width: 40em) {
+ .medium-margin-collapse > .small-1 {
+ width: 8.33333%; }
+ .medium-margin-collapse > .small-2 {
+ width: 16.66667%; }
+ .medium-margin-collapse > .small-3 {
+ width: 25%; }
+ .medium-margin-collapse > .small-4 {
+ width: 33.33333%; }
+ .medium-margin-collapse > .small-5 {
+ width: 41.66667%; }
+ .medium-margin-collapse > .small-6 {
+ width: 50%; }
+ .medium-margin-collapse > .small-7 {
+ width: 58.33333%; }
+ .medium-margin-collapse > .small-8 {
+ width: 66.66667%; }
+ .medium-margin-collapse > .small-9 {
+ width: 75%; }
+ .medium-margin-collapse > .small-10 {
+ width: 83.33333%; }
+ .medium-margin-collapse > .small-11 {
+ width: 91.66667%; }
+ .medium-margin-collapse > .small-12 {
+ width: 100%; } }
- .small-12 {
- width: 100%; }
+ @media print, screen and (min-width: 40em) {
+ .medium-margin-collapse > .medium-1 {
+ width: 8.33333%; }
+ .medium-margin-collapse > .medium-2 {
+ width: 16.66667%; }
+ .medium-margin-collapse > .medium-3 {
+ width: 25%; }
+ .medium-margin-collapse > .medium-4 {
+ width: 33.33333%; }
+ .medium-margin-collapse > .medium-5 {
+ width: 41.66667%; }
+ .medium-margin-collapse > .medium-6 {
+ width: 50%; }
+ .medium-margin-collapse > .medium-7 {
+ width: 58.33333%; }
+ .medium-margin-collapse > .medium-8 {
+ width: 66.66667%; }
+ .medium-margin-collapse > .medium-9 {
+ width: 75%; }
+ .medium-margin-collapse > .medium-10 {
+ width: 83.33333%; }
+ .medium-margin-collapse > .medium-11 {
+ width: 91.66667%; }
+ .medium-margin-collapse > .medium-12 {
+ width: 100%; } }
- .small-offset-11 {
- margin-left: 91.66667%; }
+ @media print, screen and (min-width: 64em) {
+ .medium-margin-collapse > .large-1 {
+ width: 8.33333%; }
+ .medium-margin-collapse > .large-2 {
+ width: 16.66667%; }
+ .medium-margin-collapse > .large-3 {
+ width: 25%; }
+ .medium-margin-collapse > .large-4 {
+ width: 33.33333%; }
+ .medium-margin-collapse > .large-5 {
+ width: 41.66667%; }
+ .medium-margin-collapse > .large-6 {
+ width: 50%; }
+ .medium-margin-collapse > .large-7 {
+ width: 58.33333%; }
+ .medium-margin-collapse > .large-8 {
+ width: 66.66667%; }
+ .medium-margin-collapse > .large-9 {
+ width: 75%; }
+ .medium-margin-collapse > .large-10 {
+ width: 83.33333%; }
+ .medium-margin-collapse > .large-11 {
+ width: 91.66667%; }
+ .medium-margin-collapse > .large-12 {
+ width: 100%; } }
- .small-up-1 > .column, .small-up-1 > .columns {
- width: 100%;
- float: left; }
- .small-up-1 > .column:nth-of-type(1n), .small-up-1 > .columns:nth-of-type(1n) {
- clear: none; }
- .small-up-1 > .column:nth-of-type(1n+1), .small-up-1 > .columns:nth-of-type(1n+1) {
- clear: both; }
- .small-up-1 > .column:last-child, .small-up-1 > .columns:last-child {
- float: left; }
+ @media print, screen and (min-width: 40em) {
+ .medium-padding-collapse {
+ margin-right: 0;
+ margin-left: 0; }
+ .medium-padding-collapse > .cell {
+ padding-right: 0;
+ padding-left: 0; } }
- .small-up-2 > .column, .small-up-2 > .columns {
- width: 50%;
- float: left; }
- .small-up-2 > .column:nth-of-type(1n), .small-up-2 > .columns:nth-of-type(1n) {
- clear: none; }
- .small-up-2 > .column:nth-of-type(2n+1), .small-up-2 > .columns:nth-of-type(2n+1) {
- clear: both; }
- .small-up-2 > .column:last-child, .small-up-2 > .columns:last-child {
- float: left; }
+ @media print, screen and (min-width: 64em) {
+ .large-margin-collapse {
+ margin-right: 0;
+ margin-left: 0; }
+ .large-margin-collapse > .cell {
+ margin-right: 0;
+ margin-left: 0; } }
- .small-up-3 > .column, .small-up-3 > .columns {
- width: 33.33333%;
- float: left; }
- .small-up-3 > .column:nth-of-type(1n), .small-up-3 > .columns:nth-of-type(1n) {
- clear: none; }
- .small-up-3 > .column:nth-of-type(3n+1), .small-up-3 > .columns:nth-of-type(3n+1) {
- clear: both; }
- .small-up-3 > .column:last-child, .small-up-3 > .columns:last-child {
- float: left; }
+ @media print, screen and (min-width: 64em) {
+ .large-margin-collapse > .small-1 {
+ width: 8.33333%; }
+ .large-margin-collapse > .small-2 {
+ width: 16.66667%; }
+ .large-margin-collapse > .small-3 {
+ width: 25%; }
+ .large-margin-collapse > .small-4 {
+ width: 33.33333%; }
+ .large-margin-collapse > .small-5 {
+ width: 41.66667%; }
+ .large-margin-collapse > .small-6 {
+ width: 50%; }
+ .large-margin-collapse > .small-7 {
+ width: 58.33333%; }
+ .large-margin-collapse > .small-8 {
+ width: 66.66667%; }
+ .large-margin-collapse > .small-9 {
+ width: 75%; }
+ .large-margin-collapse > .small-10 {
+ width: 83.33333%; }
+ .large-margin-collapse > .small-11 {
+ width: 91.66667%; }
+ .large-margin-collapse > .small-12 {
+ width: 100%; } }
- .small-up-4 > .column, .small-up-4 > .columns {
- width: 25%;
- float: left; }
- .small-up-4 > .column:nth-of-type(1n), .small-up-4 > .columns:nth-of-type(1n) {
- clear: none; }
- .small-up-4 > .column:nth-of-type(4n+1), .small-up-4 > .columns:nth-of-type(4n+1) {
- clear: both; }
- .small-up-4 > .column:last-child, .small-up-4 > .columns:last-child {
- float: left; }
+ @media print, screen and (min-width: 64em) {
+ .large-margin-collapse > .medium-1 {
+ width: 8.33333%; }
+ .large-margin-collapse > .medium-2 {
+ width: 16.66667%; }
+ .large-margin-collapse > .medium-3 {
+ width: 25%; }
+ .large-margin-collapse > .medium-4 {
+ width: 33.33333%; }
+ .large-margin-collapse > .medium-5 {
+ width: 41.66667%; }
+ .large-margin-collapse > .medium-6 {
+ width: 50%; }
+ .large-margin-collapse > .medium-7 {
+ width: 58.33333%; }
+ .large-margin-collapse > .medium-8 {
+ width: 66.66667%; }
+ .large-margin-collapse > .medium-9 {
+ width: 75%; }
+ .large-margin-collapse > .medium-10 {
+ width: 83.33333%; }
+ .large-margin-collapse > .medium-11 {
+ width: 91.66667%; }
+ .large-margin-collapse > .medium-12 {
+ width: 100%; } }
- .small-up-5 > .column, .small-up-5 > .columns {
- width: 20%;
- float: left; }
- .small-up-5 > .column:nth-of-type(1n), .small-up-5 > .columns:nth-of-type(1n) {
- clear: none; }
- .small-up-5 > .column:nth-of-type(5n+1), .small-up-5 > .columns:nth-of-type(5n+1) {
- clear: both; }
- .small-up-5 > .column:last-child, .small-up-5 > .columns:last-child {
- float: left; }
+ @media print, screen and (min-width: 64em) {
+ .large-margin-collapse > .large-1 {
+ width: 8.33333%; }
+ .large-margin-collapse > .large-2 {
+ width: 16.66667%; }
+ .large-margin-collapse > .large-3 {
+ width: 25%; }
+ .large-margin-collapse > .large-4 {
+ width: 33.33333%; }
+ .large-margin-collapse > .large-5 {
+ width: 41.66667%; }
+ .large-margin-collapse > .large-6 {
+ width: 50%; }
+ .large-margin-collapse > .large-7 {
+ width: 58.33333%; }
+ .large-margin-collapse > .large-8 {
+ width: 66.66667%; }
+ .large-margin-collapse > .large-9 {
+ width: 75%; }
+ .large-margin-collapse > .large-10 {
+ width: 83.33333%; }
+ .large-margin-collapse > .large-11 {
+ width: 91.66667%; }
+ .large-margin-collapse > .large-12 {
+ width: 100%; } }
- .small-up-6 > .column, .small-up-6 > .columns {
- width: 16.66667%;
- float: left; }
- .small-up-6 > .column:nth-of-type(1n), .small-up-6 > .columns:nth-of-type(1n) {
- clear: none; }
- .small-up-6 > .column:nth-of-type(6n+1), .small-up-6 > .columns:nth-of-type(6n+1) {
- clear: both; }
- .small-up-6 > .column:last-child, .small-up-6 > .columns:last-child {
- float: left; }
+ @media print, screen and (min-width: 64em) {
+ .large-padding-collapse {
+ margin-right: 0;
+ margin-left: 0; }
+ .large-padding-collapse > .cell {
+ padding-right: 0;
+ padding-left: 0; } }
- .small-up-7 > .column, .small-up-7 > .columns {
- width: 14.28571%;
- float: left; }
- .small-up-7 > .column:nth-of-type(1n), .small-up-7 > .columns:nth-of-type(1n) {
- clear: none; }
- .small-up-7 > .column:nth-of-type(7n+1), .small-up-7 > .columns:nth-of-type(7n+1) {
- clear: both; }
- .small-up-7 > .column:last-child, .small-up-7 > .columns:last-child {
- float: left; }
+ .small-offset-0 {
+ margin-left: 0%; }
- .small-up-8 > .column, .small-up-8 > .columns {
- width: 12.5%;
- float: left; }
- .small-up-8 > .column:nth-of-type(1n), .small-up-8 > .columns:nth-of-type(1n) {
- clear: none; }
- .small-up-8 > .column:nth-of-type(8n+1), .small-up-8 > .columns:nth-of-type(8n+1) {
- clear: both; }
- .small-up-8 > .column:last-child, .small-up-8 > .columns:last-child {
- float: left; }
+ .grid-margin-x > .small-offset-0 {
+ margin-left: calc(0% + 0.625rem); }
- .small-collapse > .column, .small-collapse > .columns {
- padding-left: 0;
- padding-right: 0; }
+ .small-offset-1 {
+ margin-left: 8.33333%; }
- .small-collapse .row {
- margin-left: 0;
- margin-right: 0; }
+ .grid-margin-x > .small-offset-1 {
+ margin-left: calc(8.33333% + 0.625rem); }
- .small-uncollapse > .column, .small-uncollapse > .columns {
- padding-left: 0.625rem;
- padding-right: 0.625rem; }
+ .small-offset-2 {
+ margin-left: 16.66667%; }
- .small-centered {
- float: none;
- margin-left: auto;
- margin-right: auto; }
+ .grid-margin-x > .small-offset-2 {
+ margin-left: calc(16.66667% + 0.625rem); }
- .small-uncentered,
- .small-push-0,
- .small-pull-0 {
- position: static;
- margin-left: 0;
- margin-right: 0;
- float: left; }
+ .small-offset-3 {
+ margin-left: 25%; }
- @media screen and (min-width: 40em) {
- .medium-1 {
- width: 8.33333%; }
- .medium-push-1 {
- position: relative;
- left: 8.33333%; }
- .medium-pull-1 {
- position: relative;
- left: -8.33333%; }
+ .grid-margin-x > .small-offset-3 {
+ margin-left: calc(25% + 0.625rem); }
+
+ .small-offset-4 {
+ margin-left: 33.33333%; }
+
+ .grid-margin-x > .small-offset-4 {
+ margin-left: calc(33.33333% + 0.625rem); }
+
+ .small-offset-5 {
+ margin-left: 41.66667%; }
+
+ .grid-margin-x > .small-offset-5 {
+ margin-left: calc(41.66667% + 0.625rem); }
+
+ .small-offset-6 {
+ margin-left: 50%; }
+
+ .grid-margin-x > .small-offset-6 {
+ margin-left: calc(50% + 0.625rem); }
+
+ .small-offset-7 {
+ margin-left: 58.33333%; }
+
+ .grid-margin-x > .small-offset-7 {
+ margin-left: calc(58.33333% + 0.625rem); }
+
+ .small-offset-8 {
+ margin-left: 66.66667%; }
+
+ .grid-margin-x > .small-offset-8 {
+ margin-left: calc(66.66667% + 0.625rem); }
+
+ .small-offset-9 {
+ margin-left: 75%; }
+
+ .grid-margin-x > .small-offset-9 {
+ margin-left: calc(75% + 0.625rem); }
+
+ .small-offset-10 {
+ margin-left: 83.33333%; }
+
+ .grid-margin-x > .small-offset-10 {
+ margin-left: calc(83.33333% + 0.625rem); }
+
+ .small-offset-11 {
+ margin-left: 91.66667%; }
+
+ .grid-margin-x > .small-offset-11 {
+ margin-left: calc(91.66667% + 0.625rem); }
+
+ @media print, screen and (min-width: 40em) {
.medium-offset-0 {
margin-left: 0%; }
- .medium-2 {
- width: 16.66667%; }
- .medium-push-2 {
- position: relative;
- left: 16.66667%; }
- .medium-pull-2 {
- position: relative;
- left: -16.66667%; }
+ .grid-margin-x > .medium-offset-0 {
+ margin-left: calc(0% + 0.9375rem); }
.medium-offset-1 {
margin-left: 8.33333%; }
- .medium-3 {
- width: 25%; }
- .medium-push-3 {
- position: relative;
- left: 25%; }
- .medium-pull-3 {
- position: relative;
- left: -25%; }
+ .grid-margin-x > .medium-offset-1 {
+ margin-left: calc(8.33333% + 0.9375rem); }
.medium-offset-2 {
margin-left: 16.66667%; }
- .medium-4 {
- width: 33.33333%; }
- .medium-push-4 {
- position: relative;
- left: 33.33333%; }
- .medium-pull-4 {
- position: relative;
- left: -33.33333%; }
+ .grid-margin-x > .medium-offset-2 {
+ margin-left: calc(16.66667% + 0.9375rem); }
.medium-offset-3 {
margin-left: 25%; }
- .medium-5 {
- width: 41.66667%; }
- .medium-push-5 {
- position: relative;
- left: 41.66667%; }
- .medium-pull-5 {
- position: relative;
- left: -41.66667%; }
+ .grid-margin-x > .medium-offset-3 {
+ margin-left: calc(25% + 0.9375rem); }
.medium-offset-4 {
margin-left: 33.33333%; }
- .medium-6 {
- width: 50%; }
- .medium-push-6 {
- position: relative;
- left: 50%; }
- .medium-pull-6 {
- position: relative;
- left: -50%; }
+ .grid-margin-x > .medium-offset-4 {
+ margin-left: calc(33.33333% + 0.9375rem); }
.medium-offset-5 {
margin-left: 41.66667%; }
- .medium-7 {
- width: 58.33333%; }
- .medium-push-7 {
- position: relative;
- left: 58.33333%; }
- .medium-pull-7 {
- position: relative;
- left: -58.33333%; }
+ .grid-margin-x > .medium-offset-5 {
+ margin-left: calc(41.66667% + 0.9375rem); }
.medium-offset-6 {
margin-left: 50%; }
- .medium-8 {
- width: 66.66667%; }
- .medium-push-8 {
- position: relative;
- left: 66.66667%; }
- .medium-pull-8 {
- position: relative;
- left: -66.66667%; }
+ .grid-margin-x > .medium-offset-6 {
+ margin-left: calc(50% + 0.9375rem); }
.medium-offset-7 {
margin-left: 58.33333%; }
- .medium-9 {
- width: 75%; }
- .medium-push-9 {
- position: relative;
- left: 75%; }
- .medium-pull-9 {
- position: relative;
- left: -75%; }
+ .grid-margin-x > .medium-offset-7 {
+ margin-left: calc(58.33333% + 0.9375rem); }
.medium-offset-8 {
margin-left: 66.66667%; }
- .medium-10 {
- width: 83.33333%; }
- .medium-push-10 {
- position: relative;
- left: 83.33333%; }
- .medium-pull-10 {
- position: relative;
- left: -83.33333%; }
+ .grid-margin-x > .medium-offset-8 {
+ margin-left: calc(66.66667% + 0.9375rem); }
.medium-offset-9 {
margin-left: 75%; }
- .medium-11 {
- width: 91.66667%; }
- .medium-push-11 {
- position: relative;
- left: 91.66667%; }
- .medium-pull-11 {
- position: relative;
- left: -91.66667%; }
+ .grid-margin-x > .medium-offset-9 {
+ margin-left: calc(75% + 0.9375rem); }
.medium-offset-10 {
margin-left: 83.33333%; }
- .medium-12 {
- width: 100%; }
+ .grid-margin-x > .medium-offset-10 {
+ margin-left: calc(83.33333% + 0.9375rem); }
.medium-offset-11 {
margin-left: 91.66667%; }
- .medium-up-1 > .column, .medium-up-1 > .columns {
- width: 100%;
- float: left; }
- .medium-up-1 > .column:nth-of-type(1n), .medium-up-1 > .columns:nth-of-type(1n) {
- clear: none; }
- .medium-up-1 > .column:nth-of-type(1n+1), .medium-up-1 > .columns:nth-of-type(1n+1) {
- clear: both; }
- .medium-up-1 > .column:last-child, .medium-up-1 > .columns:last-child {
- float: left; }
- .medium-up-2 > .column, .medium-up-2 > .columns {
- width: 50%;
- float: left; }
- .medium-up-2 > .column:nth-of-type(1n), .medium-up-2 > .columns:nth-of-type(1n) {
- clear: none; }
- .medium-up-2 > .column:nth-of-type(2n+1), .medium-up-2 > .columns:nth-of-type(2n+1) {
- clear: both; }
- .medium-up-2 > .column:last-child, .medium-up-2 > .columns:last-child {
- float: left; }
- .medium-up-3 > .column, .medium-up-3 > .columns {
- width: 33.33333%;
- float: left; }
- .medium-up-3 > .column:nth-of-type(1n), .medium-up-3 > .columns:nth-of-type(1n) {
- clear: none; }
- .medium-up-3 > .column:nth-of-type(3n+1), .medium-up-3 > .columns:nth-of-type(3n+1) {
- clear: both; }
- .medium-up-3 > .column:last-child, .medium-up-3 > .columns:last-child {
- float: left; }
- .medium-up-4 > .column, .medium-up-4 > .columns {
- width: 25%;
- float: left; }
- .medium-up-4 > .column:nth-of-type(1n), .medium-up-4 > .columns:nth-of-type(1n) {
- clear: none; }
- .medium-up-4 > .column:nth-of-type(4n+1), .medium-up-4 > .columns:nth-of-type(4n+1) {
- clear: both; }
- .medium-up-4 > .column:last-child, .medium-up-4 > .columns:last-child {
- float: left; }
- .medium-up-5 > .column, .medium-up-5 > .columns {
- width: 20%;
- float: left; }
- .medium-up-5 > .column:nth-of-type(1n), .medium-up-5 > .columns:nth-of-type(1n) {
- clear: none; }
- .medium-up-5 > .column:nth-of-type(5n+1), .medium-up-5 > .columns:nth-of-type(5n+1) {
- clear: both; }
- .medium-up-5 > .column:last-child, .medium-up-5 > .columns:last-child {
- float: left; }
- .medium-up-6 > .column, .medium-up-6 > .columns {
- width: 16.66667%;
- float: left; }
- .medium-up-6 > .column:nth-of-type(1n), .medium-up-6 > .columns:nth-of-type(1n) {
- clear: none; }
- .medium-up-6 > .column:nth-of-type(6n+1), .medium-up-6 > .columns:nth-of-type(6n+1) {
- clear: both; }
- .medium-up-6 > .column:last-child, .medium-up-6 > .columns:last-child {
- float: left; }
- .medium-up-7 > .column, .medium-up-7 > .columns {
- width: 14.28571%;
- float: left; }
- .medium-up-7 > .column:nth-of-type(1n), .medium-up-7 > .columns:nth-of-type(1n) {
- clear: none; }
- .medium-up-7 > .column:nth-of-type(7n+1), .medium-up-7 > .columns:nth-of-type(7n+1) {
- clear: both; }
- .medium-up-7 > .column:last-child, .medium-up-7 > .columns:last-child {
- float: left; }
- .medium-up-8 > .column, .medium-up-8 > .columns {
- width: 12.5%;
- float: left; }
- .medium-up-8 > .column:nth-of-type(1n), .medium-up-8 > .columns:nth-of-type(1n) {
- clear: none; }
- .medium-up-8 > .column:nth-of-type(8n+1), .medium-up-8 > .columns:nth-of-type(8n+1) {
- clear: both; }
- .medium-up-8 > .column:last-child, .medium-up-8 > .columns:last-child {
- float: left; }
- .medium-collapse > .column, .medium-collapse > .columns {
- padding-left: 0;
- padding-right: 0; }
- .medium-collapse .row {
- margin-left: 0;
- margin-right: 0; }
- .medium-uncollapse > .column, .medium-uncollapse > .columns {
- padding-left: 0.9375rem;
- padding-right: 0.9375rem; }
- .medium-centered {
- float: none;
- margin-left: auto;
- margin-right: auto; }
- .medium-uncentered,
- .medium-push-0,
- .medium-pull-0 {
- position: static;
- margin-left: 0;
- margin-right: 0;
- float: left; } }
+ .grid-margin-x > .medium-offset-11 {
+ margin-left: calc(91.66667% + 0.9375rem); } }
- @media screen and (min-width: 64em) {
- .large-1 {
- width: 8.33333%; }
- .large-push-1 {
- position: relative;
- left: 8.33333%; }
- .large-pull-1 {
- position: relative;
- left: -8.33333%; }
+ @media print, screen and (min-width: 64em) {
.large-offset-0 {
margin-left: 0%; }
- .large-2 {
- width: 16.66667%; }
- .large-push-2 {
- position: relative;
- left: 16.66667%; }
- .large-pull-2 {
- position: relative;
- left: -16.66667%; }
+ .grid-margin-x > .large-offset-0 {
+ margin-left: calc(0% + 0.9375rem); }
.large-offset-1 {
margin-left: 8.33333%; }
- .large-3 {
- width: 25%; }
- .large-push-3 {
- position: relative;
- left: 25%; }
- .large-pull-3 {
- position: relative;
- left: -25%; }
+ .grid-margin-x > .large-offset-1 {
+ margin-left: calc(8.33333% + 0.9375rem); }
.large-offset-2 {
margin-left: 16.66667%; }
- .large-4 {
- width: 33.33333%; }
- .large-push-4 {
- position: relative;
- left: 33.33333%; }
- .large-pull-4 {
- position: relative;
- left: -33.33333%; }
+ .grid-margin-x > .large-offset-2 {
+ margin-left: calc(16.66667% + 0.9375rem); }
.large-offset-3 {
margin-left: 25%; }
- .large-5 {
- width: 41.66667%; }
- .large-push-5 {
- position: relative;
- left: 41.66667%; }
- .large-pull-5 {
- position: relative;
- left: -41.66667%; }
- .large-offset-4 {
- margin-left: 33.33333%; }
- .large-6 {
- width: 50%; }
- .large-push-6 {
- position: relative;
- left: 50%; }
- .large-pull-6 {
- position: relative;
- left: -50%; }
+ .grid-margin-x > .large-offset-3 {
+ margin-left: calc(25% + 0.9375rem); }
+ .large-offset-4 {
+ margin-left: 33.33333%; }
+ .grid-margin-x > .large-offset-4 {
+ margin-left: calc(33.33333% + 0.9375rem); }
.large-offset-5 {
margin-left: 41.66667%; }
- .large-7 {
- width: 58.33333%; }
- .large-push-7 {
- position: relative;
- left: 58.33333%; }
- .large-pull-7 {
- position: relative;
- left: -58.33333%; }
+ .grid-margin-x > .large-offset-5 {
+ margin-left: calc(41.66667% + 0.9375rem); }
.large-offset-6 {
margin-left: 50%; }
- .large-8 {
- width: 66.66667%; }
- .large-push-8 {
- position: relative;
- left: 66.66667%; }
- .large-pull-8 {
- position: relative;
- left: -66.66667%; }
+ .grid-margin-x > .large-offset-6 {
+ margin-left: calc(50% + 0.9375rem); }
.large-offset-7 {
margin-left: 58.33333%; }
- .large-9 {
- width: 75%; }
- .large-push-9 {
- position: relative;
- left: 75%; }
- .large-pull-9 {
- position: relative;
- left: -75%; }
+ .grid-margin-x > .large-offset-7 {
+ margin-left: calc(58.33333% + 0.9375rem); }
.large-offset-8 {
margin-left: 66.66667%; }
- .large-10 {
- width: 83.33333%; }
- .large-push-10 {
- position: relative;
- left: 83.33333%; }
- .large-pull-10 {
- position: relative;
- left: -83.33333%; }
+ .grid-margin-x > .large-offset-8 {
+ margin-left: calc(66.66667% + 0.9375rem); }
.large-offset-9 {
margin-left: 75%; }
- .large-11 {
- width: 91.66667%; }
- .large-push-11 {
- position: relative;
- left: 91.66667%; }
- .large-pull-11 {
- position: relative;
- left: -91.66667%; }
+ .grid-margin-x > .large-offset-9 {
+ margin-left: calc(75% + 0.9375rem); }
.large-offset-10 {
margin-left: 83.33333%; }
- .large-12 {
- width: 100%; }
+ .grid-margin-x > .large-offset-10 {
+ margin-left: calc(83.33333% + 0.9375rem); }
.large-offset-11 {
margin-left: 91.66667%; }
- .large-up-1 > .column, .large-up-1 > .columns {
- width: 100%;
- float: left; }
- .large-up-1 > .column:nth-of-type(1n), .large-up-1 > .columns:nth-of-type(1n) {
- clear: none; }
- .large-up-1 > .column:nth-of-type(1n+1), .large-up-1 > .columns:nth-of-type(1n+1) {
- clear: both; }
- .large-up-1 > .column:last-child, .large-up-1 > .columns:last-child {
- float: left; }
- .large-up-2 > .column, .large-up-2 > .columns {
- width: 50%;
- float: left; }
- .large-up-2 > .column:nth-of-type(1n), .large-up-2 > .columns:nth-of-type(1n) {
- clear: none; }
- .large-up-2 > .column:nth-of-type(2n+1), .large-up-2 > .columns:nth-of-type(2n+1) {
- clear: both; }
- .large-up-2 > .column:last-child, .large-up-2 > .columns:last-child {
- float: left; }
- .large-up-3 > .column, .large-up-3 > .columns {
- width: 33.33333%;
- float: left; }
- .large-up-3 > .column:nth-of-type(1n), .large-up-3 > .columns:nth-of-type(1n) {
- clear: none; }
- .large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) {
- clear: both; }
- .large-up-3 > .column:last-child, .large-up-3 > .columns:last-child {
- float: left; }
- .large-up-4 > .column, .large-up-4 > .columns {
- width: 25%;
- float: left; }
- .large-up-4 > .column:nth-of-type(1n), .large-up-4 > .columns:nth-of-type(1n) {
- clear: none; }
- .large-up-4 > .column:nth-of-type(4n+1), .large-up-4 > .columns:nth-of-type(4n+1) {
- clear: both; }
- .large-up-4 > .column:last-child, .large-up-4 > .columns:last-child {
- float: left; }
- .large-up-5 > .column, .large-up-5 > .columns {
- width: 20%;
- float: left; }
- .large-up-5 > .column:nth-of-type(1n), .large-up-5 > .columns:nth-of-type(1n) {
- clear: none; }
- .large-up-5 > .column:nth-of-type(5n+1), .large-up-5 > .columns:nth-of-type(5n+1) {
- clear: both; }
- .large-up-5 > .column:last-child, .large-up-5 > .columns:last-child {
- float: left; }
- .large-up-6 > .column, .large-up-6 > .columns {
- width: 16.66667%;
- float: left; }
- .large-up-6 > .column:nth-of-type(1n), .large-up-6 > .columns:nth-of-type(1n) {
- clear: none; }
- .large-up-6 > .column:nth-of-type(6n+1), .large-up-6 > .columns:nth-of-type(6n+1) {
- clear: both; }
- .large-up-6 > .column:last-child, .large-up-6 > .columns:last-child {
- float: left; }
- .large-up-7 > .column, .large-up-7 > .columns {
- width: 14.28571%;
- float: left; }
- .large-up-7 > .column:nth-of-type(1n), .large-up-7 > .columns:nth-of-type(1n) {
- clear: none; }
- .large-up-7 > .column:nth-of-type(7n+1), .large-up-7 > .columns:nth-of-type(7n+1) {
- clear: both; }
- .large-up-7 > .column:last-child, .large-up-7 > .columns:last-child {
- float: left; }
- .large-up-8 > .column, .large-up-8 > .columns {
- width: 12.5%;
- float: left; }
- .large-up-8 > .column:nth-of-type(1n), .large-up-8 > .columns:nth-of-type(1n) {
- clear: none; }
- .large-up-8 > .column:nth-of-type(8n+1), .large-up-8 > .columns:nth-of-type(8n+1) {
- clear: both; }
- .large-up-8 > .column:last-child, .large-up-8 > .columns:last-child {
- float: left; }
- .large-collapse > .column, .large-collapse > .columns {
- padding-left: 0;
- padding-right: 0; }
- .large-collapse .row {
- margin-left: 0;
- margin-right: 0; }
- .large-uncollapse > .column, .large-uncollapse > .columns {
- padding-left: 0.9375rem;
- padding-right: 0.9375rem; }
- .large-centered {
- float: none;
- margin-left: auto;
- margin-right: auto; }
- .large-uncentered,
- .large-push-0,
- .large-pull-0 {
- position: static;
- margin-left: 0;
- margin-right: 0;
- float: left; } }
+ .grid-margin-x > .large-offset-11 {
+ margin-left: calc(91.66667% + 0.9375rem); } }
+
+ .grid-y {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-flow: column nowrap;
+ flex-flow: column nowrap; }
+ .grid-y > .cell {
+ width: auto; }
+ .grid-y > .auto {
+ height: auto; }
+ .grid-y > .shrink {
+ height: auto; }
+ .grid-y > .small-shrink, .grid-y > .small-full, .grid-y > .small-1, .grid-y > .small-2, .grid-y > .small-3, .grid-y > .small-4, .grid-y > .small-5, .grid-y > .small-6, .grid-y > .small-7, .grid-y > .small-8, .grid-y > .small-9, .grid-y > .small-10, .grid-y > .small-11, .grid-y > .small-12 {
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto; }
+ @media print, screen and (min-width: 40em) {
+ .grid-y > .medium-shrink, .grid-y > .medium-full, .grid-y > .medium-1, .grid-y > .medium-2, .grid-y > .medium-3, .grid-y > .medium-4, .grid-y > .medium-5, .grid-y > .medium-6, .grid-y > .medium-7, .grid-y > .medium-8, .grid-y > .medium-9, .grid-y > .medium-10, .grid-y > .medium-11, .grid-y > .medium-12 {
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto; } }
+ @media print, screen and (min-width: 64em) {
+ .grid-y > .large-shrink, .grid-y > .large-full, .grid-y > .large-1, .grid-y > .large-2, .grid-y > .large-3, .grid-y > .large-4, .grid-y > .large-5, .grid-y > .large-6, .grid-y > .large-7, .grid-y > .large-8, .grid-y > .large-9, .grid-y > .large-10, .grid-y > .large-11, .grid-y > .large-12 {
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto; } }
+ .grid-y > .small-1 {
+ height: 8.33333%; }
+ .grid-y > .small-2 {
+ height: 16.66667%; }
+ .grid-y > .small-3 {
+ height: 25%; }
+ .grid-y > .small-4 {
+ height: 33.33333%; }
+ .grid-y > .small-5 {
+ height: 41.66667%; }
+ .grid-y > .small-6 {
+ height: 50%; }
+ .grid-y > .small-7 {
+ height: 58.33333%; }
+ .grid-y > .small-8 {
+ height: 66.66667%; }
+ .grid-y > .small-9 {
+ height: 75%; }
+ .grid-y > .small-10 {
+ height: 83.33333%; }
+ .grid-y > .small-11 {
+ height: 91.66667%; }
+ .grid-y > .small-12 {
+ height: 100%; }
+ @media print, screen and (min-width: 40em) {
+ .grid-y > .medium-auto {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px;
+ height: auto; }
+ .grid-y > .medium-shrink {
+ height: auto; }
+ .grid-y > .medium-1 {
+ height: 8.33333%; }
+ .grid-y > .medium-2 {
+ height: 16.66667%; }
+ .grid-y > .medium-3 {
+ height: 25%; }
+ .grid-y > .medium-4 {
+ height: 33.33333%; }
+ .grid-y > .medium-5 {
+ height: 41.66667%; }
+ .grid-y > .medium-6 {
+ height: 50%; }
+ .grid-y > .medium-7 {
+ height: 58.33333%; }
+ .grid-y > .medium-8 {
+ height: 66.66667%; }
+ .grid-y > .medium-9 {
+ height: 75%; }
+ .grid-y > .medium-10 {
+ height: 83.33333%; }
+ .grid-y > .medium-11 {
+ height: 91.66667%; }
+ .grid-y > .medium-12 {
+ height: 100%; } }
+ @media print, screen and (min-width: 64em) {
+ .grid-y > .large-auto {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px;
+ height: auto; }
+ .grid-y > .large-shrink {
+ height: auto; }
+ .grid-y > .large-1 {
+ height: 8.33333%; }
+ .grid-y > .large-2 {
+ height: 16.66667%; }
+ .grid-y > .large-3 {
+ height: 25%; }
+ .grid-y > .large-4 {
+ height: 33.33333%; }
+ .grid-y > .large-5 {
+ height: 41.66667%; }
+ .grid-y > .large-6 {
+ height: 50%; }
+ .grid-y > .large-7 {
+ height: 58.33333%; }
+ .grid-y > .large-8 {
+ height: 66.66667%; }
+ .grid-y > .large-9 {
+ height: 75%; }
+ .grid-y > .large-10 {
+ height: 83.33333%; }
+ .grid-y > .large-11 {
+ height: 91.66667%; }
+ .grid-y > .large-12 {
+ height: 100%; } }
+
+ .grid-padding-y .grid-padding-y {
+ margin-top: -0.625rem;
+ margin-bottom: -0.625rem; }
+ @media print, screen and (min-width: 40em) {
+ .grid-padding-y .grid-padding-y {
+ margin-top: -0.9375rem;
+ margin-bottom: -0.9375rem; } }
+
+ .grid-padding-y > .cell {
+ padding-top: 0.625rem;
+ padding-bottom: 0.625rem; }
+ @media print, screen and (min-width: 40em) {
+ .grid-padding-y > .cell {
+ padding-top: 0.9375rem;
+ padding-bottom: 0.9375rem; } }
+
+ .grid-margin-y {
+ margin-top: -0.625rem;
+ margin-bottom: -0.625rem; }
+ @media print, screen and (min-width: 40em) {
+ .grid-margin-y {
+ margin-top: -0.9375rem;
+ margin-bottom: -0.9375rem; } }
+ .grid-margin-y > .cell {
+ height: calc(100% - 1.25rem);
+ margin-top: 0.625rem;
+ margin-bottom: 0.625rem; }
+ @media print, screen and (min-width: 40em) {
+ .grid-margin-y > .cell {
+ height: calc(100% - 1.875rem);
+ margin-top: 0.9375rem;
+ margin-bottom: 0.9375rem; } }
+ .grid-margin-y > .auto {
+ height: auto; }
+ .grid-margin-y > .shrink {
+ height: auto; }
+ .grid-margin-y > .small-1 {
+ height: calc(8.33333% - 1.25rem); }
+ .grid-margin-y > .small-2 {
+ height: calc(16.66667% - 1.25rem); }
+ .grid-margin-y > .small-3 {
+ height: calc(25% - 1.25rem); }
+ .grid-margin-y > .small-4 {
+ height: calc(33.33333% - 1.25rem); }
+ .grid-margin-y > .small-5 {
+ height: calc(41.66667% - 1.25rem); }
+ .grid-margin-y > .small-6 {
+ height: calc(50% - 1.25rem); }
+ .grid-margin-y > .small-7 {
+ height: calc(58.33333% - 1.25rem); }
+ .grid-margin-y > .small-8 {
+ height: calc(66.66667% - 1.25rem); }
+ .grid-margin-y > .small-9 {
+ height: calc(75% - 1.25rem); }
+ .grid-margin-y > .small-10 {
+ height: calc(83.33333% - 1.25rem); }
+ .grid-margin-y > .small-11 {
+ height: calc(91.66667% - 1.25rem); }
+ .grid-margin-y > .small-12 {
+ height: calc(100% - 1.25rem); }
+ @media print, screen and (min-width: 40em) {
+ .grid-margin-y > .auto {
+ height: auto; }
+ .grid-margin-y > .shrink {
+ height: auto; }
+ .grid-margin-y > .small-1 {
+ height: calc(8.33333% - 1.875rem); }
+ .grid-margin-y > .small-2 {
+ height: calc(16.66667% - 1.875rem); }
+ .grid-margin-y > .small-3 {
+ height: calc(25% - 1.875rem); }
+ .grid-margin-y > .small-4 {
+ height: calc(33.33333% - 1.875rem); }
+ .grid-margin-y > .small-5 {
+ height: calc(41.66667% - 1.875rem); }
+ .grid-margin-y > .small-6 {
+ height: calc(50% - 1.875rem); }
+ .grid-margin-y > .small-7 {
+ height: calc(58.33333% - 1.875rem); }
+ .grid-margin-y > .small-8 {
+ height: calc(66.66667% - 1.875rem); }
+ .grid-margin-y > .small-9 {
+ height: calc(75% - 1.875rem); }
+ .grid-margin-y > .small-10 {
+ height: calc(83.33333% - 1.875rem); }
+ .grid-margin-y > .small-11 {
+ height: calc(91.66667% - 1.875rem); }
+ .grid-margin-y > .small-12 {
+ height: calc(100% - 1.875rem); }
+ .grid-margin-y > .medium-auto {
+ height: auto; }
+ .grid-margin-y > .medium-shrink {
+ height: auto; }
+ .grid-margin-y > .medium-1 {
+ height: calc(8.33333% - 1.875rem); }
+ .grid-margin-y > .medium-2 {
+ height: calc(16.66667% - 1.875rem); }
+ .grid-margin-y > .medium-3 {
+ height: calc(25% - 1.875rem); }
+ .grid-margin-y > .medium-4 {
+ height: calc(33.33333% - 1.875rem); }
+ .grid-margin-y > .medium-5 {
+ height: calc(41.66667% - 1.875rem); }
+ .grid-margin-y > .medium-6 {
+ height: calc(50% - 1.875rem); }
+ .grid-margin-y > .medium-7 {
+ height: calc(58.33333% - 1.875rem); }
+ .grid-margin-y > .medium-8 {
+ height: calc(66.66667% - 1.875rem); }
+ .grid-margin-y > .medium-9 {
+ height: calc(75% - 1.875rem); }
+ .grid-margin-y > .medium-10 {
+ height: calc(83.33333% - 1.875rem); }
+ .grid-margin-y > .medium-11 {
+ height: calc(91.66667% - 1.875rem); }
+ .grid-margin-y > .medium-12 {
+ height: calc(100% - 1.875rem); } }
+ @media print, screen and (min-width: 64em) {
+ .grid-margin-y > .large-auto {
+ height: auto; }
+ .grid-margin-y > .large-shrink {
+ height: auto; }
+ .grid-margin-y > .large-1 {
+ height: calc(8.33333% - 1.875rem); }
+ .grid-margin-y > .large-2 {
+ height: calc(16.66667% - 1.875rem); }
+ .grid-margin-y > .large-3 {
+ height: calc(25% - 1.875rem); }
+ .grid-margin-y > .large-4 {
+ height: calc(33.33333% - 1.875rem); }
+ .grid-margin-y > .large-5 {
+ height: calc(41.66667% - 1.875rem); }
+ .grid-margin-y > .large-6 {
+ height: calc(50% - 1.875rem); }
+ .grid-margin-y > .large-7 {
+ height: calc(58.33333% - 1.875rem); }
+ .grid-margin-y > .large-8 {
+ height: calc(66.66667% - 1.875rem); }
+ .grid-margin-y > .large-9 {
+ height: calc(75% - 1.875rem); }
+ .grid-margin-y > .large-10 {
+ height: calc(83.33333% - 1.875rem); }
+ .grid-margin-y > .large-11 {
+ height: calc(91.66667% - 1.875rem); }
+ .grid-margin-y > .large-12 {
+ height: calc(100% - 1.875rem); } }
+
+ .grid-frame {
+ overflow: hidden;
+ position: relative;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ width: 100vw; }
+
+ .cell .grid-frame {
+ width: 100%; }
+
+ .cell-block {
+ overflow-x: auto;
+ max-width: 100%;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-stype: -ms-autohiding-scrollbar; }
+
+ .cell-block-y {
+ overflow-y: auto;
+ max-height: 100%;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-stype: -ms-autohiding-scrollbar; }
+
+ .cell-block-container {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-height: 100%; }
+ .cell-block-container > .grid-x {
+ max-height: 100%;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap; }
+
+ @media print, screen and (min-width: 40em) {
+ .medium-grid-frame {
+ overflow: hidden;
+ position: relative;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ width: 100vw; }
+ .cell .medium-grid-frame {
+ width: 100%; }
+ .medium-cell-block {
+ overflow-x: auto;
+ max-width: 100%;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-stype: -ms-autohiding-scrollbar; }
+ .medium-cell-block-container {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-height: 100%; }
+ .medium-cell-block-container > .grid-x {
+ max-height: 100%;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap; }
+ .medium-cell-block-y {
+ overflow-y: auto;
+ max-height: 100%;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-stype: -ms-autohiding-scrollbar; } }
+
+ @media print, screen and (min-width: 64em) {
+ .large-grid-frame {
+ overflow: hidden;
+ position: relative;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ width: 100vw; }
+ .cell .large-grid-frame {
+ width: 100%; }
+ .large-cell-block {
+ overflow-x: auto;
+ max-width: 100%;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-stype: -ms-autohiding-scrollbar; }
+ .large-cell-block-container {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-height: 100%; }
+ .large-cell-block-container > .grid-x {
+ max-height: 100%;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap; }
+ .large-cell-block-y {
+ overflow-y: auto;
+ max-height: 100%;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-stype: -ms-autohiding-scrollbar; } }
+
+ .grid-y.grid-frame {
+ width: auto;
+ overflow: hidden;
+ position: relative;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ height: 100vh; }
+
+ @media print, screen and (min-width: 40em) {
+ .grid-y.medium-grid-frame {
+ width: auto;
+ overflow: hidden;
+ position: relative;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ height: 100vh; } }
+
+ @media print, screen and (min-width: 64em) {
+ .grid-y.large-grid-frame {
+ width: auto;
+ overflow: hidden;
+ position: relative;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ height: 100vh; } }
+
+ .cell .grid-y.grid-frame {
+ height: 100%; }
+
+ @media print, screen and (min-width: 40em) {
+ .cell .grid-y.medium-grid-frame {
+ height: 100%; } }
+
+ @media print, screen and (min-width: 64em) {
+ .cell .grid-y.large-grid-frame {
+ height: 100%; } }
+
+ .grid-margin-y {
+ margin-top: -0.625rem;
+ margin-bottom: -0.625rem; }
+ @media print, screen and (min-width: 40em) {
+ .grid-margin-y {
+ margin-top: -0.9375rem;
+ margin-bottom: -0.9375rem; } }
+ .grid-margin-y > .cell {
+ height: calc(100% - 1.25rem);
+ margin-top: 0.625rem;
+ margin-bottom: 0.625rem; }
+ @media print, screen and (min-width: 40em) {
+ .grid-margin-y > .cell {
+ height: calc(100% - 1.875rem);
+ margin-top: 0.9375rem;
+ margin-bottom: 0.9375rem; } }
+ .grid-margin-y > .auto {
+ height: auto; }
+ .grid-margin-y > .shrink {
+ height: auto; }
+ .grid-margin-y > .small-1 {
+ height: calc(8.33333% - 1.25rem); }
+ .grid-margin-y > .small-2 {
+ height: calc(16.66667% - 1.25rem); }
+ .grid-margin-y > .small-3 {
+ height: calc(25% - 1.25rem); }
+ .grid-margin-y > .small-4 {
+ height: calc(33.33333% - 1.25rem); }
+ .grid-margin-y > .small-5 {
+ height: calc(41.66667% - 1.25rem); }
+ .grid-margin-y > .small-6 {
+ height: calc(50% - 1.25rem); }
+ .grid-margin-y > .small-7 {
+ height: calc(58.33333% - 1.25rem); }
+ .grid-margin-y > .small-8 {
+ height: calc(66.66667% - 1.25rem); }
+ .grid-margin-y > .small-9 {
+ height: calc(75% - 1.25rem); }
+ .grid-margin-y > .small-10 {
+ height: calc(83.33333% - 1.25rem); }
+ .grid-margin-y > .small-11 {
+ height: calc(91.66667% - 1.25rem); }
+ .grid-margin-y > .small-12 {
+ height: calc(100% - 1.25rem); }
+ @media print, screen and (min-width: 40em) {
+ .grid-margin-y > .auto {
+ height: auto; }
+ .grid-margin-y > .shrink {
+ height: auto; }
+ .grid-margin-y > .small-1 {
+ height: calc(8.33333% - 1.875rem); }
+ .grid-margin-y > .small-2 {
+ height: calc(16.66667% - 1.875rem); }
+ .grid-margin-y > .small-3 {
+ height: calc(25% - 1.875rem); }
+ .grid-margin-y > .small-4 {
+ height: calc(33.33333% - 1.875rem); }
+ .grid-margin-y > .small-5 {
+ height: calc(41.66667% - 1.875rem); }
+ .grid-margin-y > .small-6 {
+ height: calc(50% - 1.875rem); }
+ .grid-margin-y > .small-7 {
+ height: calc(58.33333% - 1.875rem); }
+ .grid-margin-y > .small-8 {
+ height: calc(66.66667% - 1.875rem); }
+ .grid-margin-y > .small-9 {
+ height: calc(75% - 1.875rem); }
+ .grid-margin-y > .small-10 {
+ height: calc(83.33333% - 1.875rem); }
+ .grid-margin-y > .small-11 {
+ height: calc(91.66667% - 1.875rem); }
+ .grid-margin-y > .small-12 {
+ height: calc(100% - 1.875rem); }
+ .grid-margin-y > .medium-auto {
+ height: auto; }
+ .grid-margin-y > .medium-shrink {
+ height: auto; }
+ .grid-margin-y > .medium-1 {
+ height: calc(8.33333% - 1.875rem); }
+ .grid-margin-y > .medium-2 {
+ height: calc(16.66667% - 1.875rem); }
+ .grid-margin-y > .medium-3 {
+ height: calc(25% - 1.875rem); }
+ .grid-margin-y > .medium-4 {
+ height: calc(33.33333% - 1.875rem); }
+ .grid-margin-y > .medium-5 {
+ height: calc(41.66667% - 1.875rem); }
+ .grid-margin-y > .medium-6 {
+ height: calc(50% - 1.875rem); }
+ .grid-margin-y > .medium-7 {
+ height: calc(58.33333% - 1.875rem); }
+ .grid-margin-y > .medium-8 {
+ height: calc(66.66667% - 1.875rem); }
+ .grid-margin-y > .medium-9 {
+ height: calc(75% - 1.875rem); }
+ .grid-margin-y > .medium-10 {
+ height: calc(83.33333% - 1.875rem); }
+ .grid-margin-y > .medium-11 {
+ height: calc(91.66667% - 1.875rem); }
+ .grid-margin-y > .medium-12 {
+ height: calc(100% - 1.875rem); } }
+ @media print, screen and (min-width: 64em) {
+ .grid-margin-y > .large-auto {
+ height: auto; }
+ .grid-margin-y > .large-shrink {
+ height: auto; }
+ .grid-margin-y > .large-1 {
+ height: calc(8.33333% - 1.875rem); }
+ .grid-margin-y > .large-2 {
+ height: calc(16.66667% - 1.875rem); }
+ .grid-margin-y > .large-3 {
+ height: calc(25% - 1.875rem); }
+ .grid-margin-y > .large-4 {
+ height: calc(33.33333% - 1.875rem); }
+ .grid-margin-y > .large-5 {
+ height: calc(41.66667% - 1.875rem); }
+ .grid-margin-y > .large-6 {
+ height: calc(50% - 1.875rem); }
+ .grid-margin-y > .large-7 {
+ height: calc(58.33333% - 1.875rem); }
+ .grid-margin-y > .large-8 {
+ height: calc(66.66667% - 1.875rem); }
+ .grid-margin-y > .large-9 {
+ height: calc(75% - 1.875rem); }
+ .grid-margin-y > .large-10 {
+ height: calc(83.33333% - 1.875rem); }
+ .grid-margin-y > .large-11 {
+ height: calc(91.66667% - 1.875rem); }
+ .grid-margin-y > .large-12 {
+ height: calc(100% - 1.875rem); } }
+
+ .grid-frame.grid-margin-y {
+ height: calc(100vh + 1.25rem); }
+ @media print, screen and (min-width: 40em) {
+ .grid-frame.grid-margin-y {
+ height: calc(100vh + 1.875rem); } }
+ @media print, screen and (min-width: 64em) {
+ .grid-frame.grid-margin-y {
+ height: calc(100vh + 1.875rem); } }
+
+ @media print, screen and (min-width: 40em) {
+ .grid-margin-y.medium-grid-frame {
+ height: calc(100vh + 1.875rem); } }
+
+ @media print, screen and (min-width: 64em) {
+ .grid-margin-y.large-grid-frame {
+ height: calc(100vh + 1.875rem); } }
+
+ .align-right {
+ -ms-flex-pack: end;
+ justify-content: flex-end; }
+
+ .align-center {
+ -ms-flex-pack: center;
+ justify-content: center; }
+
+ .align-justify {
+ -ms-flex-pack: justify;
+ justify-content: space-between; }
+
+ .align-spaced {
+ -ms-flex-pack: distribute;
+ justify-content: space-around; }
+
+ .align-right.vertical.menu > li > a {
+ -ms-flex-pack: end;
+ justify-content: flex-end; }
+
+ .align-center.vertical.menu > li > a {
+ -ms-flex-pack: center;
+ justify-content: center; }
+
+ .align-top {
+ -ms-flex-align: start;
+ align-items: flex-start; }
+
+ .align-self-top {
+ -ms-flex-item-align: start;
+ align-self: flex-start; }
+
+ .align-bottom {
+ -ms-flex-align: end;
+ align-items: flex-end; }
+
+ .align-self-bottom {
+ -ms-flex-item-align: end;
+ align-self: flex-end; }
+
+ .align-middle {
+ -ms-flex-align: center;
+ align-items: center; }
+
+ .align-self-middle {
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center; }
+
+ .align-stretch {
+ -ms-flex-align: stretch;
+ align-items: stretch; }
+
+ .align-self-stretch {
+ -ms-flex-item-align: stretch;
+ -ms-grid-row-align: stretch;
+ align-self: stretch; }
+
+ .align-center-middle {
+ -ms-flex-pack: center;
+ justify-content: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-line-pack: center;
+ align-content: center; }
+
+ .small-order-1 {
+ -ms-flex-order: 1;
+ order: 1; }
+
+ .small-order-2 {
+ -ms-flex-order: 2;
+ order: 2; }
+
+ .small-order-3 {
+ -ms-flex-order: 3;
+ order: 3; }
+
+ .small-order-4 {
+ -ms-flex-order: 4;
+ order: 4; }
+
+ .small-order-5 {
+ -ms-flex-order: 5;
+ order: 5; }
+
+ .small-order-6 {
+ -ms-flex-order: 6;
+ order: 6; }
+
+ @media print, screen and (min-width: 40em) {
+ .medium-order-1 {
+ -ms-flex-order: 1;
+ order: 1; }
+ .medium-order-2 {
+ -ms-flex-order: 2;
+ order: 2; }
+ .medium-order-3 {
+ -ms-flex-order: 3;
+ order: 3; }
+ .medium-order-4 {
+ -ms-flex-order: 4;
+ order: 4; }
+ .medium-order-5 {
+ -ms-flex-order: 5;
+ order: 5; }
+ .medium-order-6 {
+ -ms-flex-order: 6;
+ order: 6; } }
+
+ @media print, screen and (min-width: 64em) {
+ .large-order-1 {
+ -ms-flex-order: 1;
+ order: 1; }
+ .large-order-2 {
+ -ms-flex-order: 2;
+ order: 2; }
+ .large-order-3 {
+ -ms-flex-order: 3;
+ order: 3; }
+ .large-order-4 {
+ -ms-flex-order: 4;
+ order: 4; }
+ .large-order-5 {
+ -ms-flex-order: 5;
+ order: 5; }
+ .large-order-6 {
+ -ms-flex-order: 6;
+ order: 6; } }
+
+ .flex-container {
+ display: -ms-flexbox;
+ display: flex; }
+
+ .flex-child-auto {
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto; }
+
+ .flex-child-grow {
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto; }
+
+ .flex-child-shrink {
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto; }
+
+ .flex-dir-row {
+ -ms-flex-direction: row;
+ flex-direction: row; }
+
+ .flex-dir-row-reverse {
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse; }
+
+ .flex-dir-column {
+ -ms-flex-direction: column;
+ flex-direction: column; }
+
+ .flex-dir-column-reverse {
+ -ms-flex-direction: column-reverse;
+ flex-direction: column-reverse; }
+
+ @media print, screen and (min-width: 40em) {
+ .medium-flex-container {
+ display: -ms-flexbox;
+ display: flex; }
+ .medium-flex-child-auto {
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto; }
+ .medium-flex-child-grow {
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto; }
+ .medium-flex-child-shrink {
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto; }
+ .medium-flex-dir-row {
+ -ms-flex-direction: row;
+ flex-direction: row; }
+ .medium-flex-dir-row-reverse {
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse; }
+ .medium-flex-dir-column {
+ -ms-flex-direction: column;
+ flex-direction: column; }
+ .medium-flex-dir-column-reverse {
+ -ms-flex-direction: column-reverse;
+ flex-direction: column-reverse; } }
+
+ @media print, screen and (min-width: 64em) {
+ .large-flex-container {
+ display: -ms-flexbox;
+ display: flex; }
+ .large-flex-child-auto {
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto; }
+ .large-flex-child-grow {
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto; }
+ .large-flex-child-shrink {
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto; }
+ .large-flex-dir-row {
+ -ms-flex-direction: row;
+ flex-direction: row; }
+ .large-flex-dir-row-reverse {
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse; }
+ .large-flex-dir-column {
+ -ms-flex-direction: column;
+ flex-direction: column; }
+ .large-flex-dir-column-reverse {
+ -ms-flex-direction: column-reverse;
+ flex-direction: column-reverse; } }
div,
dl,
@@ @@ -1184,9 +2200,9 @@ td {
padding: 0; }
p {
+ margin-bottom: 1rem;
font-size: inherit;
line-height: 1.6;
- margin-bottom: 1rem;
text-rendering: optimizeLegibility; }
em,
@@ @@ -1203,94 +2219,109 @@ small {
font-size: 80%;
line-height: inherit; }
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
+ h1, .h1,
+ h2, .h2,
+ h3, .h3,
+ h4, .h4,
+ h5, .h5,
+ h6, .h6 {
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
- font-weight: normal;
font-style: normal;
+ font-weight: normal;
color: inherit;
- text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility; }
+ h1 small, .h1 small,
+ h2 small, .h2 small,
+ h3 small, .h3 small,
+ h4 small, .h4 small,
+ h5 small, .h5 small,
+ h6 small, .h6 small {
+ line-height: 0;
+ color: #cacaca; }
+
+ h1, .h1 {
+ font-size: 1.5rem;
+ line-height: 1.4;
margin-top: 0;
- margin-bottom: 0.5rem;
- line-height: 1.4; }
- h1 small,
- h2 small,
- h3 small,
- h4 small,
- h5 small,
- h6 small {
- color: #cacaca;
- line-height: 0; }
-
- h1 {
- font-size: 1.5rem; }
+ margin-bottom: 0.5rem; }
- h2 {
- font-size: 1.25rem; }
+ h2, .h2 {
+ font-size: 1.25rem;
+ line-height: 1.4;
+ margin-top: 0;
+ margin-bottom: 0.5rem; }
- h3 {
- font-size: 1.1875rem; }
+ h3, .h3 {
+ font-size: 1.1875rem;
+ line-height: 1.4;
+ margin-top: 0;
+ margin-bottom: 0.5rem; }
- h4 {
- font-size: 1.125rem; }
+ h4, .h4 {
+ font-size: 1.125rem;
+ line-height: 1.4;
+ margin-top: 0;
+ margin-bottom: 0.5rem; }
- h5 {
- font-size: 1.0625rem; }
+ h5, .h5 {
+ font-size: 1.0625rem;
+ line-height: 1.4;
+ margin-top: 0;
+ margin-bottom: 0.5rem; }
- h6 {
- font-size: 1rem; }
+ h6, .h6 {
+ font-size: 1rem;
+ line-height: 1.4;
+ margin-top: 0;
+ margin-bottom: 0.5rem; }
- @media screen and (min-width: 40em) {
- h1 {
+ @media print, screen and (min-width: 40em) {
+ h1, .h1 {
font-size: 3rem; }
- h2 {
+ h2, .h2 {
font-size: 2.5rem; }
- h3 {
+ h3, .h3 {
font-size: 1.9375rem; }
- h4 {
+ h4, .h4 {
font-size: 1.5625rem; }
- h5 {
+ h5, .h5 {
font-size: 1.25rem; }
- h6 {
+ h6, .h6 {
font-size: 1rem; } }
a {
- color: #2199e8;
- text-decoration: none;
line-height: inherit;
+ color: #1779ba;
+ text-decoration: none;
cursor: pointer; }
a:hover, a:focus {
- color: #1585cf; }
+ color: #1468a0; }
a img {
border: 0; }
hr {
+ clear: both;
max-width: 75rem;
height: 0;
- border-right: 0;
+ margin: 1.25rem auto;
border-top: 0;
+ border-right: 0;
border-bottom: 1px solid #cacaca;
- border-left: 0;
- margin: 1.25rem auto;
- clear: both; }
+ border-left: 0; }
ul,
ol,
dl {
- line-height: 1.6;
margin-bottom: 1rem;
- list-style-position: outside; }
+ list-style-position: outside;
+ line-height: 1.6; }
li {
font-size: inherit; }
ul {
- list-style-type: disc;
- margin-left: 1.25rem; }
+ margin-left: 1.25rem;
+ list-style-type: disc; }
ol {
margin-left: 1.25rem; }
@@ @@ -1318,27 +2349,30 @@ cite {
font-size: 0.8125rem;
color: #8a8a8a; }
cite:before {
- content: '\2014 \0020'; }
+ content: "— "; }
- abbr {
- color: #0a0a0a;
+ abbr, abbr[title] {
+ border-bottom: 1px dotted #0a0a0a;
cursor: help;
- border-bottom: 1px dotted #0a0a0a; }
+ text-decoration: none; }
+
+ figure {
+ margin: 0; }
code {
+ padding: 0.125rem 0.3125rem 0.0625rem;
+ border: 1px solid #cacaca;
+ background-color: #e6e6e6;
font-family: Consolas, "Liberation Mono", Courier, monospace;
font-weight: normal;
- color: #0a0a0a;
- background-color: #e6e6e6;
- border: 1px solid #cacaca;
- padding: 0.125rem 0.3125rem 0.0625rem; }
+ color: #0a0a0a; }
kbd {
- padding: 0.125rem 0.25rem 0;
margin: 0;
+ padding: 0.125rem 0.25rem 0;
background-color: #e6e6e6;
- color: #0a0a0a;
- font-family: Consolas, "Liberation Mono", Courier, monospace; }
+ font-family: Consolas, "Liberation Mono", Courier, monospace;
+ color: #0a0a0a; }
.subheader {
margin-top: 0.2rem;
@@ @@ -1357,7 +2391,7 @@ kbd {
p + .stat {
margin-top: -1rem; }
- .no-bullet {
+ ul.no-bullet, ol.no-bullet {
margin-left: 0;
list-style: none; }
@@ @@ -1373,7 +2407,7 @@ kbd {
.text-justify {
text-align: justify; }
- @media screen and (min-width: 40em) {
+ @media print, screen and (min-width: 40em) {
.medium-text-left {
text-align: left; }
.medium-text-right {
@@ @@ -1383,7 +2417,7 @@ kbd {
.medium-text-justify {
text-align: justify; } }
- @media screen and (min-width: 64em) {
+ @media print, screen and (min-width: 64em) {
.large-text-left {
text-align: left; }
.large-text-right {
@@ @@ -1399,8 +2433,8 @@ kbd {
@media print {
* {
background: transparent !important;
- color: black !important;
box-shadow: none !important;
+ color: black !important;
text-shadow: none !important; }
.show-for-print {
display: block !important; }
@@ @@ -1449,7 +2483,269 @@ kbd {
widows: 3; }
h2,
h3 {
- page-break-after: avoid; } }
+ page-break-after: avoid; }
+ .print-break-inside {
+ page-break-inside: auto; } }
+
+ .button {
+ display: inline-block;
+ vertical-align: middle;
+ margin: 0 0 1rem 0;
+ font-family: inherit;
+ padding: 0.85em 1em;
+ -webkit-appearance: none;
+ border: 1px solid transparent;
+ border-radius: 0;
+ transition: background-color 0.25s ease-out, color 0.25s ease-out;
+ font-size: 0.9rem;
+ line-height: 1;
+ text-align: center;
+ cursor: pointer;
+ background-color: #1779ba;
+ color: #fefefe; }
+ [data-whatinput='mouse'] .button {
+ outline: 0; }
+ .button:hover, .button:focus {
+ background-color: #14679e;
+ color: #fefefe; }
+ .button.tiny {
+ font-size: 0.6rem; }
+ .button.small {
+ font-size: 0.75rem; }
+ .button.large {
+ font-size: 1.25rem; }
+ .button.expanded {
+ display: block;
+ width: 100%;
+ margin-right: 0;
+ margin-left: 0; }
+ .button.primary {
+ background-color: #1779ba;
+ color: #fefefe; }
+ .button.primary:hover, .button.primary:focus {
+ background-color: #126195;
+ color: #fefefe; }
+ .button.secondary {
+ background-color: #767676;
+ color: #fefefe; }
+ .button.secondary:hover, .button.secondary:focus {
+ background-color: #5e5e5e;
+ color: #fefefe; }
+ .button.success {
+ background-color: #3adb76;
+ color: #0a0a0a; }
+ .button.success:hover, .button.success:focus {
+ background-color: #22bb5b;
+ color: #0a0a0a; }
+ .button.warning {
+ background-color: #ffae00;
+ color: #0a0a0a; }
+ .button.warning:hover, .button.warning:focus {
+ background-color: #cc8b00;
+ color: #0a0a0a; }
+ .button.alert {
+ background-color: #cc4b37;
+ color: #fefefe; }
+ .button.alert:hover, .button.alert:focus {
+ background-color: #a53b2a;
+ color: #fefefe; }
+ .button.disabled, .button[disabled] {
+ opacity: 0.25;
+ cursor: not-allowed; }
+ .button.disabled, .button.disabled:hover, .button.disabled:focus, .button[disabled], .button[disabled]:hover, .button[disabled]:focus {
+ background-color: #1779ba;
+ color: #fefefe; }
+ .button.disabled.primary, .button[disabled].primary {
+ opacity: 0.25;
+ cursor: not-allowed; }
+ .button.disabled.primary, .button.disabled.primary:hover, .button.disabled.primary:focus, .button[disabled].primary, .button[disabled].primary:hover, .button[disabled].primary:focus {
+ background-color: #1779ba;
+ color: #fefefe; }
+ .button.disabled.secondary, .button[disabled].secondary {
+ opacity: 0.25;
+ cursor: not-allowed; }
+ .button.disabled.secondary, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
+ background-color: #767676;
+ color: #fefefe; }
+ .button.disabled.success, .button[disabled].success {
+ opacity: 0.25;
+ cursor: not-allowed; }
+ .button.disabled.success, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success, .button[disabled].success:hover, .button[disabled].success:focus {
+ background-color: #3adb76;
+ color: #0a0a0a; }
+ .button.disabled.warning, .button[disabled].warning {
+ opacity: 0.25;
+ cursor: not-allowed; }
+ .button.disabled.warning, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning, .button[disabled].warning:hover, .button[disabled].warning:focus {
+ background-color: #ffae00;
+ color: #0a0a0a; }
+ .button.disabled.alert, .button[disabled].alert {
+ opacity: 0.25;
+ cursor: not-allowed; }
+ .button.disabled.alert, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert, .button[disabled].alert:hover, .button[disabled].alert:focus {
+ background-color: #cc4b37;
+ color: #fefefe; }
+ .button.hollow {
+ border: 1px solid #1779ba;
+ color: #1779ba; }
+ .button.hollow, .button.hollow:hover, .button.hollow:focus {
+ background-color: transparent; }
+ .button.hollow.disabled, .button.hollow.disabled:hover, .button.hollow.disabled:focus, .button.hollow[disabled], .button.hollow[disabled]:hover, .button.hollow[disabled]:focus {
+ background-color: transparent; }
+ .button.hollow:hover, .button.hollow:focus {
+ border-color: #0c3d5d;
+ color: #0c3d5d; }
+ .button.hollow:hover.disabled, .button.hollow:hover[disabled], .button.hollow:focus.disabled, .button.hollow:focus[disabled] {
+ border: 1px solid #1779ba;
+ color: #1779ba; }
+ .button.hollow.primary {
+ border: 1px solid #1779ba;
+ color: #1779ba; }
+ .button.hollow.primary:hover, .button.hollow.primary:focus {
+ border-color: #0c3d5d;
+ color: #0c3d5d; }
+ .button.hollow.primary:hover.disabled, .button.hollow.primary:hover[disabled], .button.hollow.primary:focus.disabled, .button.hollow.primary:focus[disabled] {
+ border: 1px solid #1779ba;
+ color: #1779ba; }
+ .button.hollow.secondary {
+ border: 1px solid #767676;
+ color: #767676; }
+ .button.hollow.secondary:hover, .button.hollow.secondary:focus {
+ border-color: #3b3b3b;
+ color: #3b3b3b; }
+ .button.hollow.secondary:hover.disabled, .button.hollow.secondary:hover[disabled], .button.hollow.secondary:focus.disabled, .button.hollow.secondary:focus[disabled] {
+ border: 1px solid #767676;
+ color: #767676; }
+ .button.hollow.success {
+ border: 1px solid #3adb76;
+ color: #3adb76; }
+ .button.hollow.success:hover, .button.hollow.success:focus {
+ border-color: #157539;
+ color: #157539; }
+ .button.hollow.success:hover.disabled, .button.hollow.success:hover[disabled], .button.hollow.success:focus.disabled, .button.hollow.success:focus[disabled] {
+ border: 1px solid #3adb76;
+ color: #3adb76; }
+ .button.hollow.warning {
+ border: 1px solid #ffae00;
+ color: #ffae00; }
+ .button.hollow.warning:hover, .button.hollow.warning:focus {
+ border-color: #805700;
+ color: #805700; }
+ .button.hollow.warning:hover.disabled, .button.hollow.warning:hover[disabled], .button.hollow.warning:focus.disabled, .button.hollow.warning:focus[disabled] {
+ border: 1px solid #ffae00;
+ color: #ffae00; }
+ .button.hollow.alert {
+ border: 1px solid #cc4b37;
+ color: #cc4b37; }
+ .button.hollow.alert:hover, .button.hollow.alert:focus {
+ border-color: #67251a;
+ color: #67251a; }
+ .button.hollow.alert:hover.disabled, .button.hollow.alert:hover[disabled], .button.hollow.alert:focus.disabled, .button.hollow.alert:focus[disabled] {
+ border: 1px solid #cc4b37;
+ color: #cc4b37; }
+ .button.clear {
+ border: 1px solid #1779ba;
+ color: #1779ba; }
+ .button.clear, .button.clear:hover, .button.clear:focus {
+ background-color: transparent; }
+ .button.clear.disabled, .button.clear.disabled:hover, .button.clear.disabled:focus, .button.clear[disabled], .button.clear[disabled]:hover, .button.clear[disabled]:focus {
+ background-color: transparent; }
+ .button.clear:hover, .button.clear:focus {
+ border-color: #0c3d5d;
+ color: #0c3d5d; }
+ .button.clear:hover.disabled, .button.clear:hover[disabled], .button.clear:focus.disabled, .button.clear:focus[disabled] {
+ border: 1px solid #1779ba;
+ color: #1779ba; }
+ .button.clear, .button.clear.disabled, .button.clear[disabled], .button.clear:hover, .button.clear:hover.disabled, .button.clear:hover[disabled], .button.clear:focus, .button.clear:focus.disabled, .button.clear:focus[disabled] {
+ border-color: transparent; }
+ .button.clear.primary {
+ border: 1px solid #1779ba;
+ color: #1779ba; }
+ .button.clear.primary:hover, .button.clear.primary:focus {
+ border-color: #0c3d5d;
+ color: #0c3d5d; }
+ .button.clear.primary:hover.disabled, .button.clear.primary:hover[disabled], .button.clear.primary:focus.disabled, .button.clear.primary:focus[disabled] {
+ border: 1px solid #1779ba;
+ color: #1779ba; }
+ .button.clear.primary, .button.clear.primary.disabled, .button.clear.primary[disabled], .button.clear.primary:hover, .button.clear.primary:hover.disabled, .button.clear.primary:hover[disabled], .button.clear.primary:focus, .button.clear.primary:focus.disabled, .button.clear.primary:focus[disabled] {
+ border-color: transparent; }
+ .button.clear.secondary {
+ border: 1px solid #767676;
+ color: #767676; }
+ .button.clear.secondary:hover, .button.clear.secondary:focus {
+ border-color: #3b3b3b;
+ color: #3b3b3b; }
+ .button.clear.secondary:hover.disabled, .button.clear.secondary:hover[disabled], .button.clear.secondary:focus.disabled, .button.clear.secondary:focus[disabled] {
+ border: 1px solid #767676;
+ color: #767676; }
+ .button.clear.secondary, .button.clear.secondary.disabled, .button.clear.secondary[disabled], .button.clear.secondary:hover, .button.clear.secondary:hover.disabled, .button.clear.secondary:hover[disabled], .button.clear.secondary:focus, .button.clear.secondary:focus.disabled, .button.clear.secondary:focus[disabled] {
+ border-color: transparent; }
+ .button.clear.success {
+ border: 1px solid #3adb76;
+ color: #3adb76; }
+ .button.clear.success:hover, .button.clear.success:focus {
+ border-color: #157539;
+ color: #157539; }
+ .button.clear.success:hover.disabled, .button.clear.success:hover[disabled], .button.clear.success:focus.disabled, .button.clear.success:focus[disabled] {
+ border: 1px solid #3adb76;
+ color: #3adb76; }
+ .button.clear.success, .button.clear.success.disabled, .button.clear.success[disabled], .button.clear.success:hover, .button.clear.success:hover.disabled, .button.clear.success:hover[disabled], .button.clear.success:focus, .button.clear.success:focus.disabled, .button.clear.success:focus[disabled] {
+ border-color: transparent; }
+ .button.clear.warning {
+ border: 1px solid #ffae00;
+ color: #ffae00; }
+ .button.clear.warning:hover, .button.clear.warning:focus {
+ border-color: #805700;
+ color: #805700; }
+ .button.clear.warning:hover.disabled, .button.clear.warning:hover[disabled], .button.clear.warning:focus.disabled, .button.clear.warning:focus[disabled] {
+ border: 1px solid #ffae00;
+ color: #ffae00; }
+ .button.clear.warning, .button.clear.warning.disabled, .button.clear.warning[disabled], .button.clear.warning:hover, .button.clear.warning:hover.disabled, .button.clear.warning:hover[disabled], .button.clear.warning:focus, .button.clear.warning:focus.disabled, .button.clear.warning:focus[disabled] {
+ border-color: transparent; }
+ .button.clear.alert {
+ border: 1px solid #cc4b37;
+ color: #cc4b37; }
+ .button.clear.alert:hover, .button.clear.alert:focus {
+ border-color: #67251a;
+ color: #67251a; }
+ .button.clear.alert:hover.disabled, .button.clear.alert:hover[disabled], .button.clear.alert:focus.disabled, .button.clear.alert:focus[disabled] {
+ border: 1px solid #cc4b37;
+ color: #cc4b37; }
+ .button.clear.alert, .button.clear.alert.disabled, .button.clear.alert[disabled], .button.clear.alert:hover, .button.clear.alert:hover.disabled, .button.clear.alert:hover[disabled], .button.clear.alert:focus, .button.clear.alert:focus.disabled, .button.clear.alert:focus[disabled] {
+ border-color: transparent; }
+ .button.dropdown::after {
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 0.4em;
+ content: '';
+ border-bottom-width: 0;
+ border-top-style: solid;
+ border-color: #fefefe transparent transparent;
+ position: relative;
+ top: 0.4em;
+ display: inline-block;
+ float: right;
+ margin-left: 1em; }
+ .button.dropdown.hollow::after {
+ border-top-color: #1779ba; }
+ .button.dropdown.hollow.primary::after {
+ border-top-color: #1779ba; }
+ .button.dropdown.hollow.secondary::after {
+ border-top-color: #767676; }
+ .button.dropdown.hollow.success::after {
+ border-top-color: #3adb76; }
+ .button.dropdown.hollow.warning::after {
+ border-top-color: #ffae00; }
+ .button.dropdown.hollow.alert::after {
+ border-top-color: #cc4b37; }
+ .button.arrow-only::after {
+ top: -0.1em;
+ float: none;
+ margin-left: 0; }
+
+ a.button:hover, a.button:focus {
+ text-decoration: none; }
[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'],
textarea {
@@ @@ -1457,23 +2753,26 @@ textarea {
box-sizing: border-box;
width: 100%;
height: 2.4375rem;
+ margin: 0 0 1rem;
padding: 0.5rem;
border: 1px solid #cacaca;
- margin: 0 0 1rem;
+ border-radius: 0;
+ background-color: #fefefe;
+ box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
font-family: inherit;
font-size: 1rem;
+ font-weight: normal;
+ line-height: 1.5;
color: #0a0a0a;
- background-color: #fefefe;
- box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
- border-radius: 0;
transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
-webkit-appearance: none;
- -moz-appearance: none; }
+ -moz-appearance: none;
+ appearance: none; }
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus,
textarea:focus {
+ outline: none;
border: 1px solid #8a8a8a;
background-color: #fefefe;
- outline: none;
box-shadow: 0 0 5px #cacaca;
transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }
@@ @@ -1502,13 +2801,14 @@ input:disabled, input[readonly],
textarea:disabled,
textarea[readonly] {
background-color: #e6e6e6;
- cursor: default; }
+ cursor: not-allowed; }
[type='submit'],
[type='button'] {
- border-radius: 0;
-webkit-appearance: none;
- -moz-appearance: none; }
+ -moz-appearance: none;
+ appearance: none;
+ border-radius: 0; }
input[type='search'] {
box-sizing: border-box; }
@@ @@ -1521,10 +2821,10 @@ input[type='search'] {
[type='checkbox'] + label,
[type='radio'] + label {
display: inline-block;
+ vertical-align: baseline;
margin-left: 0.5rem;
margin-right: 1rem;
- margin-bottom: 0;
- vertical-align: baseline; }
+ margin-bottom: 0; }
[type='checkbox'] + label[for],
[type='radio'] + label[for] {
cursor: pointer; }
@@ @@ -1554,28 +2854,37 @@ label {
color: #0a0a0a; }
.input-group {
- display: table;
+ display: -ms-flexbox;
+ display: flex;
width: 100%;
- margin-bottom: 1rem; }
+ margin-bottom: 1rem;
+ -ms-flex-align: stretch;
+ align-items: stretch; }
.input-group > :first-child {
border-radius: 0 0 0 0; }
.input-group > :last-child > * {
border-radius: 0 0 0 0; }
- .input-group-label, .input-group-field, .input-group-button {
+ .input-group-label, .input-group-field, .input-group-button, .input-group-button a,
+ .input-group-button input,
+ .input-group-button button,
+ .input-group-button label {
margin: 0;
- display: table-cell;
- vertical-align: middle; }
+ white-space: nowrap; }
.input-group-label {
- text-align: center;
padding: 0 1rem;
+ border: 1px solid #cacaca;
background: #e6e6e6;
color: #0a0a0a;
- border: 1px solid #cacaca;
+ text-align: center;
white-space: nowrap;
- width: 1%;
- height: 100%; }
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -ms-flex-align: center;
+ align-items: center; }
.input-group-label:first-child {
border-right: 0; }
.input-group-label:last-child {
@@ @@ -1583,65 +2892,83 @@ label {
.input-group-field {
border-radius: 0;
- height: 2.5rem; }
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px;
+ height: auto;
+ min-width: 0; }
.input-group-button {
padding-top: 0;
padding-bottom: 0;
text-align: center;
- height: 100%;
- width: 1%; }
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto; }
.input-group-button a,
.input-group-button input,
- .input-group-button button {
- margin: 0; }
-
- .input-group .input-group-button {
- display: table-cell; }
+ .input-group-button button,
+ .input-group-button label {
+ height: auto;
+ -ms-flex-item-align: stretch;
+ -ms-grid-row-align: stretch;
+ align-self: stretch;
+ padding-top: 0;
+ padding-bottom: 0;
+ font-size: 1rem; }
fieldset {
- border: 0;
+ margin: 0;
padding: 0;
- margin: 0; }
+ border: 0; }
legend {
- margin-bottom: 0.5rem;
- max-width: 100%; }
+ max-width: 100%;
+ margin-bottom: 0.5rem; }
.fieldset {
- border: 1px solid #cacaca;
+ margin: 1.125rem 0;
padding: 1.25rem;
- margin: 1.125rem 0; }
+ border: 1px solid #cacaca; }
.fieldset legend {
- background: #fefefe;
- padding: 0 0.1875rem;
margin: 0;
- margin-left: -0.1875rem; }
+ margin-left: -0.1875rem;
+ padding: 0 0.1875rem; }
select {
height: 2.4375rem;
+ margin: 0 0 1rem;
padding: 0.5rem;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
border: 1px solid #cacaca;
- margin: 0 0 1rem;
- font-size: 1rem;
+ border-radius: 0;
+ background-color: #fefefe;
font-family: inherit;
- line-height: normal;
+ font-size: 1rem;
+ font-weight: normal;
+ line-height: 1.5;
color: #0a0a0a;
- background-color: #fefefe;
- border-radius: 0;
- -webkit-appearance: none;
- -moz-appearance: none;
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon></svg>');
- background-size: 9px 6px;
- background-position: right center;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
background-origin: content-box;
- background-repeat: no-repeat; }
+ background-position: right -1rem center;
+ background-repeat: no-repeat;
+ background-size: 9px 6px;
+ padding-right: 1.5rem;
+ transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }
@media screen and (min-width: 0\0) {
select {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } }
+ select:focus {
+ outline: none;
+ border: 1px solid #8a8a8a;
+ background-color: #fefefe;
+ box-shadow: 0 0 5px #cacaca;
+ transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }
select:disabled {
background-color: #e6e6e6;
- cursor: default; }
+ cursor: not-allowed; }
select::-ms-expand {
display: none; }
select[multiple] {
@@ @@ -1649,11 +2976,19 @@ select {
background-image: none; }
.is-invalid-input:not(:focus) {
- background-color: rgba(236, 88, 64, 0.1);
- border-color: #ec5840; }
+ border-color: #cc4b37;
+ background-color: #f9ecea; }
+ .is-invalid-input:not(:focus)::-webkit-input-placeholder {
+ color: #cc4b37; }
+ .is-invalid-input:not(:focus)::-moz-placeholder {
+ color: #cc4b37; }
+ .is-invalid-input:not(:focus):-ms-input-placeholder {
+ color: #cc4b37; }
+ .is-invalid-input:not(:focus)::placeholder {
+ color: #cc4b37; }
.is-invalid-label {
- color: #ec5840; }
+ color: #cc4b37; }
.form-error {
display: none;
@@ @@ -1661,233 +2996,198 @@ select {
margin-bottom: 1rem;
font-size: 0.75rem;
font-weight: bold;
- color: #ec5840; }
+ color: #cc4b37; }
.form-error.is-visible {
display: block; }
- .button {
- display: inline-block;
- text-align: center;
- line-height: 1;
- cursor: pointer;
- -webkit-appearance: none;
- transition: background-color 0.25s ease-out, color 0.25s ease-out;
- vertical-align: middle;
- border: 1px solid transparent;
- border-radius: 0;
- padding: 0.85em 1em;
- margin: 0 0 1rem 0;
- font-size: 0.9rem;
- background-color: #2199e8;
- color: #fefefe; }
- [data-whatinput='mouse'] .button {
- outline: 0; }
- .button:hover, .button:focus {
- background-color: #1583cc;
- color: #fefefe; }
- .button.tiny {
- font-size: 0.6rem; }
- .button.small {
- font-size: 0.75rem; }
- .button.large {
- font-size: 1.25rem; }
- .button.expanded {
- display: block;
- width: 100%;
- margin-left: 0;
- margin-right: 0; }
- .button.primary {
- background-color: #2199e8;
- color: #fefefe; }
- .button.primary:hover, .button.primary:focus {
- background-color: #147cc0;
- color: #fefefe; }
- .button.secondary {
- background-color: #777;
- color: #fefefe; }
- .button.secondary:hover, .button.secondary:focus {
- background-color: #5f5f5f;
- color: #fefefe; }
- .button.success {
- background-color: #3adb76;
- color: #fefefe; }
- .button.success:hover, .button.success:focus {
- background-color: #22bb5b;
- color: #fefefe; }
- .button.warning {
- background-color: #ffae00;
- color: #fefefe; }
- .button.warning:hover, .button.warning:focus {
- background-color: #cc8b00;
- color: #fefefe; }
- .button.alert {
- background-color: #ec5840;
- color: #fefefe; }
- .button.alert:hover, .button.alert:focus {
- background-color: #da3116;
- color: #fefefe; }
- .button.hollow {
- border: 1px solid #2199e8;
- color: #2199e8; }
- .button.hollow, .button.hollow:hover, .button.hollow:focus {
- background-color: transparent; }
- .button.hollow:hover, .button.hollow:focus {
- border-color: #0c4d78;
- color: #0c4d78; }
- .button.hollow.primary {
- border: 1px solid #2199e8;
- color: #2199e8; }
- .button.hollow.primary:hover, .button.hollow.primary:focus {
- border-color: #0c4d78;
- color: #0c4d78; }
- .button.hollow.secondary {
- border: 1px solid #777;
- color: #777; }
- .button.hollow.secondary:hover, .button.hollow.secondary:focus {
- border-color: #3c3c3c;
- color: #3c3c3c; }
- .button.hollow.success {
- border: 1px solid #3adb76;
- color: #3adb76; }
- .button.hollow.success:hover, .button.hollow.success:focus {
- border-color: #157539;
- color: #157539; }
- .button.hollow.warning {
- border: 1px solid #ffae00;
- color: #ffae00; }
- .button.hollow.warning:hover, .button.hollow.warning:focus {
- border-color: #805700;
- color: #805700; }
- .button.hollow.alert {
- border: 1px solid #ec5840;
- color: #ec5840; }
- .button.hollow.alert:hover, .button.hollow.alert:focus {
- border-color: #881f0e;
- color: #881f0e; }
- .button.disabled, .button[disabled] {
- opacity: 0.25;
- cursor: not-allowed; }
- .button.dropdown::after {
- content: '';
- display: block;
- width: 0;
- height: 0;
- border: inset 0.4em;
- border-color: #fefefe transparent transparent;
- border-top-style: solid;
- border-bottom-width: 0;
- position: relative;
- top: 0.4em;
- float: right;
- margin-left: 1em;
- display: inline-block; }
- .button.arrow-only::after {
- margin-left: 0;
- float: none;
- top: -0.1em; }
-
.accordion {
- list-style-type: none;
+ margin-left: 0;
background: #fefefe;
- border: 1px solid #e6e6e6;
- border-bottom: 0;
- border-radius: 0;
- margin-left: 0; }
+ list-style-type: none; }
+ .accordion[disabled] .accordion-title {
+ cursor: not-allowed; }
+
+ .accordion-item:first-child > :first-child {
+ border-radius: 0 0 0 0; }
+
+ .accordion-item:last-child > :last-child {
+ border-radius: 0 0 0 0; }
.accordion-title {
+ position: relative;
display: block;
padding: 1.25rem 1rem;
- line-height: 1;
+ border: 1px solid #e6e6e6;
+ border-bottom: 0;
font-size: 0.75rem;
- color: #2199e8;
- position: relative;
- border-bottom: 1px solid #e6e6e6; }
+ line-height: 1;
+ color: #1779ba; }
+ :last-child:not(.is-active) > .accordion-title {
+ border-bottom: 1px solid #e6e6e6;
+ border-radius: 0 0 0 0; }
.accordion-title:hover, .accordion-title:focus {
background-color: #e6e6e6; }
.accordion-title::before {
- content: '+';
position: absolute;
- right: 1rem;
top: 50%;
- margin-top: -0.5rem; }
+ right: 1rem;
+ margin-top: -0.5rem;
+ content: '+'; }
.is-active > .accordion-title::before {
- content: '–'; }
+ content: '\2013'; }
.accordion-content {
- padding: 1rem;
display: none;
- border-bottom: 1px solid #e6e6e6;
- background-color: #fefefe; }
+ padding: 1rem;
+ border: 1px solid #e6e6e6;
+ border-bottom: 0;
+ background-color: #fefefe;
+ color: #0a0a0a; }
+ :last-child > .accordion-content:last-child {
+ border-bottom: 1px solid #e6e6e6; }
+
+ .accordion-menu li {
+ width: 100%; }
+
+ .accordion-menu a {
+ padding: 0.7rem 1rem; }
+
+ .accordion-menu .is-accordion-submenu a {
+ padding: 0.7rem 1rem; }
+
+ .accordion-menu .nested.is-accordion-submenu {
+ margin-right: 0;
+ margin-left: 1rem; }
+
+ .accordion-menu.align-right .nested.is-accordion-submenu {
+ margin-right: 1rem;
+ margin-left: 0; }
- .is-accordion-submenu-parent > a {
+ .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
position: relative; }
- .is-accordion-submenu-parent > a::after {
- content: '';
+ .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
display: block;
width: 0;
height: 0;
border: inset 6px;
- border-color: #2199e8 transparent transparent;
- border-top-style: solid;
+ content: '';
border-bottom-width: 0;
+ border-top-style: solid;
+ border-color: #1779ba transparent transparent;
position: absolute;
top: 50%;
- margin-top: -4px;
+ margin-top: -3px;
right: 1rem; }
- .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- -webkit-transform: scaleY(-1);
- -ms-transform: scaleY(-1);
- transform: scaleY(-1); }
+ .accordion-menu.align-left .is-accordion-submenu-parent > a::after {
+ left: auto;
+ right: 1rem; }
+
+ .accordion-menu.align-right .is-accordion-submenu-parent > a::after {
+ right: auto;
+ left: 1rem; }
+
+ .accordion-menu .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+ -ms-transform-origin: 50% 50%;
+ transform-origin: 50% 50%; }
+
+ .is-accordion-submenu-parent {
+ position: relative; }
+
+ .has-submenu-toggle > a {
+ margin-right: 40px; }
+
+ .submenu-toggle {
+ position: absolute;
+ top: 0;
+ right: 0;
+ cursor: pointer;
+ width: 40px;
+ height: 40px; }
+ .submenu-toggle::after {
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 6px;
+ content: '';
+ border-bottom-width: 0;
+ border-top-style: solid;
+ border-color: #1779ba transparent transparent;
+ top: 0;
+ bottom: 0;
+ margin: auto; }
+
+ .submenu-toggle[aria-expanded='true']::after {
+ -ms-transform: scaleY(-1);
+ transform: scaleY(-1);
+ -ms-transform-origin: 50% 50%;
+ transform-origin: 50% 50%; }
+
+ .submenu-toggle-text {
+ position: absolute !important;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ -webkit-clip-path: inset(50%);
+ clip-path: inset(50%);
+ border: 0; }
.badge {
display: inline-block;
- padding: 0.3em;
min-width: 2.1em;
+ padding: 0.3em;
+ border-radius: 50%;
font-size: 0.6rem;
text-align: center;
- border-radius: 50%;
- background: #2199e8;
+ background: #1779ba;
color: #fefefe; }
+ .badge.primary {
+ background: #1779ba;
+ color: #fefefe; }
.badge.secondary {
- background: #777;
+ background: #767676;
color: #fefefe; }
.badge.success {
background: #3adb76;
- color: #fefefe; }
+ color: #0a0a0a; }
.badge.warning {
background: #ffae00;
- color: #fefefe; }
+ color: #0a0a0a; }
.badge.alert {
- background: #ec5840;
+ background: #cc4b37;
color: #fefefe; }
.breadcrumbs {
- list-style: none;
- margin: 0 0 1rem 0; }
+ margin: 0 0 1rem 0;
+ list-style: none; }
.breadcrumbs::before, .breadcrumbs::after {
+ display: table;
content: ' ';
- display: table; }
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -ms-flex-order: 1;
+ order: 1; }
.breadcrumbs::after {
clear: both; }
.breadcrumbs li {
float: left;
- color: #0a0a0a;
font-size: 0.6875rem;
+ color: #0a0a0a;
cursor: default;
text-transform: uppercase; }
.breadcrumbs li:not(:last-child)::after {
- color: #cacaca;
- content: "/";
- margin: 0 0.75rem;
position: relative;
- top: 1px;
- opacity: 1; }
+ margin: 0 0.75rem;
+ opacity: 1;
+ content: "/";
+ color: #cacaca; }
.breadcrumbs a {
- color: #2199e8; }
+ color: #1779ba; }
.breadcrumbs a:hover {
text-decoration: underline; }
.breadcrumbs .disabled {
@@ @@ -1896,92 +3196,87 @@ select {
.button-group {
margin-bottom: 1rem;
- font-size: 0; }
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -ms-flex-align: stretch;
+ align-items: stretch; }
.button-group::before, .button-group::after {
+ display: table;
content: ' ';
- display: table; }
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -ms-flex-order: 1;
+ order: 1; }
.button-group::after {
clear: both; }
.button-group .button {
margin: 0;
- font-size: 0.9rem; }
- .button-group .button:not(:last-child) {
- margin-right: 1px; }
+ margin-right: 1px;
+ margin-bottom: 1px;
+ font-size: 0.9rem;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto; }
+ .button-group .button:last-child {
+ margin-right: 0; }
.button-group.tiny .button {
font-size: 0.6rem; }
.button-group.small .button {
font-size: 0.75rem; }
.button-group.large .button {
font-size: 1.25rem; }
- .button-group.expanded {
- margin-right: -1px; }
- .button-group.expanded::before, .button-group.expanded::after {
- display: none; }
- .button-group.expanded .button:first-child:nth-last-child(2), .button-group.expanded .button:first-child:nth-last-child(2):first-child:nth-last-child(2) ~ .button {
- display: inline-block;
- width: calc(50% - 1px);
- margin-right: 1px; }
- .button-group.expanded .button:first-child:nth-last-child(3), .button-group.expanded .button:first-child:nth-last-child(3):first-child:nth-last-child(3) ~ .button {
- display: inline-block;
- width: calc(33.33333% - 1px);
- margin-right: 1px; }
- .button-group.expanded .button:first-child:nth-last-child(4), .button-group.expanded .button:first-child:nth-last-child(4):first-child:nth-last-child(4) ~ .button {
- display: inline-block;
- width: calc(25% - 1px);
- margin-right: 1px; }
- .button-group.expanded .button:first-child:nth-last-child(5), .button-group.expanded .button:first-child:nth-last-child(5):first-child:nth-last-child(5) ~ .button {
- display: inline-block;
- width: calc(20% - 1px);
- margin-right: 1px; }
- .button-group.expanded .button:first-child:nth-last-child(6), .button-group.expanded .button:first-child:nth-last-child(6):first-child:nth-last-child(6) ~ .button {
- display: inline-block;
- width: calc(16.66667% - 1px);
- margin-right: 1px; }
+ .button-group.expanded .button {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px; }
.button-group.primary .button {
- background-color: #2199e8;
+ background-color: #1779ba;
color: #fefefe; }
.button-group.primary .button:hover, .button-group.primary .button:focus {
- background-color: #147cc0;
+ background-color: #126195;
color: #fefefe; }
.button-group.secondary .button {
- background-color: #777;
+ background-color: #767676;
color: #fefefe; }
.button-group.secondary .button:hover, .button-group.secondary .button:focus {
- background-color: #5f5f5f;
+ background-color: #5e5e5e;
color: #fefefe; }
.button-group.success .button {
background-color: #3adb76;
- color: #fefefe; }
+ color: #0a0a0a; }
.button-group.success .button:hover, .button-group.success .button:focus {
background-color: #22bb5b;
- color: #fefefe; }
+ color: #0a0a0a; }
.button-group.warning .button {
background-color: #ffae00;
- color: #fefefe; }
+ color: #0a0a0a; }
.button-group.warning .button:hover, .button-group.warning .button:focus {
background-color: #cc8b00;
- color: #fefefe; }
+ color: #0a0a0a; }
.button-group.alert .button {
- background-color: #ec5840;
+ background-color: #cc4b37;
color: #fefefe; }
.button-group.alert .button:hover, .button-group.alert .button:focus {
- background-color: #da3116;
+ background-color: #a53b2a;
color: #fefefe; }
- .button-group.stacked .button, .button-group.stacked-for-small .button, .button-group.stacked-for-medium .button {
- width: 100%;
- border-right: 1px solid transparent; }
- .button-group.stacked .button:not(:last-child), .button-group.stacked-for-small .button:not(:last-child), .button-group.stacked-for-medium .button:not(:last-child) {
- border-bottom: 1px solid #fefefe; }
- @media screen and (min-width: 40em) {
+ .button-group.stacked, .button-group.stacked-for-small, .button-group.stacked-for-medium {
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap; }
+ .button-group.stacked .button, .button-group.stacked-for-small .button, .button-group.stacked-for-medium .button {
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%; }
+ .button-group.stacked .button:last-child, .button-group.stacked-for-small .button:last-child, .button-group.stacked-for-medium .button:last-child {
+ margin-bottom: 0; }
+ @media print, screen and (min-width: 40em) {
.button-group.stacked-for-small .button {
- width: auto; }
- .button-group.stacked-for-small .button:not(:last-child) {
- margin-right: 1px; } }
- @media screen and (min-width: 64em) {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px;
+ margin-bottom: 0; } }
+ @media print, screen and (min-width: 64em) {
.button-group.stacked-for-medium .button {
- width: auto; }
- .button-group.stacked-for-medium .button:not(:last-child) {
- margin-right: 1px; } }
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px;
+ margin-bottom: 0; } }
@media screen and (max-width: 39.9375em) {
.button-group.stacked-for-small.expanded {
display: block; }
@@ @@ -1989,28 +3284,70 @@ select {
display: block;
margin-right: 0; } }
+ .card {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ margin-bottom: 1rem;
+ border: 1px solid #e6e6e6;
+ border-radius: 0;
+ background: #fefefe;
+ box-shadow: none;
+ overflow: hidden;
+ color: #0a0a0a; }
+ .card > :last-child {
+ margin-bottom: 0; }
+
+ .card-divider {
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 1rem;
+ background: #e6e6e6; }
+ .card-divider > :last-child {
+ margin-bottom: 0; }
+
+ .card-section {
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ padding: 1rem; }
+ .card-section > :last-child {
+ margin-bottom: 0; }
+
+ .card-image {
+ min-height: 1px; }
+
.callout {
+ position: relative;
margin: 0 0 1rem 0;
padding: 1rem;
border: 1px solid rgba(10, 10, 10, 0.25);
border-radius: 0;
- position: relative;
- color: #0a0a0a;
- background-color: white; }
+ background-color: white;
+ color: #0a0a0a; }
.callout > :first-child {
margin-top: 0; }
.callout > :last-child {
margin-bottom: 0; }
.callout.primary {
- background-color: #def0fc; }
+ background-color: #d7ecfa;
+ color: #0a0a0a; }
.callout.secondary {
- background-color: #ebebeb; }
+ background-color: #eaeaea;
+ color: #0a0a0a; }
.callout.success {
- background-color: #e1faea; }
+ background-color: #e1faea;
+ color: #0a0a0a; }
.callout.warning {
- background-color: #fff3d9; }
+ background-color: #fff3d9;
+ color: #0a0a0a; }
.callout.alert {
- background-color: #fce6e2; }
+ background-color: #f7e4e1;
+ color: #0a0a0a; }
.callout.small {
padding-top: 0.5rem;
padding-right: 0.5rem;
@@ @@ -2025,99 +3362,195 @@ select {
.close-button {
position: absolute;
color: #8a8a8a;
- right: 1rem;
- top: 0.5rem;
- font-size: 2em;
- line-height: 1;
cursor: pointer; }
[data-whatinput='mouse'] .close-button {
outline: 0; }
.close-button:hover, .close-button:focus {
color: #0a0a0a; }
+ .close-button.small {
+ right: 0.66rem;
+ top: 0.33em;
+ font-size: 1.5em;
+ line-height: 1; }
+ .close-button, .close-button.medium {
+ right: 1rem;
+ top: 0.5rem;
+ font-size: 2em;
+ line-height: 1; }
.menu {
+ padding: 0;
margin: 0;
- list-style-type: none; }
- .menu > li {
- display: table-cell;
- vertical-align: middle; }
- [data-whatinput='mouse'] .menu > li {
- outline: 0; }
- .menu > li > a {
+ list-style: none;
+ position: relative;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap; }
+ [data-whatinput='mouse'] .menu li {
+ outline: 0; }
+ .menu a,
+ .menu .button {
+ line-height: 1;
+ text-decoration: none;
display: block;
- padding: 0.7rem 1rem;
- line-height: 1; }
+ padding: 0.7rem 1rem; }
.menu input,
+ .menu select,
.menu a,
.menu button {
margin-bottom: 0; }
- .menu > li > a img,
- .menu > li > a i {
- vertical-align: middle; }
- .menu > li > a i + span,
- .menu > li > a img + span {
- vertical-align: middle; }
- .menu > li > a img,
- .menu > li > a i {
- margin-right: 0.25rem;
+ .menu input {
display: inline-block; }
- .menu > li {
- display: table-cell; }
- .menu.vertical > li {
- display: block; }
- @media screen and (min-width: 40em) {
- .menu.medium-horizontal > li {
- display: table-cell; }
- .menu.medium-vertical > li {
- display: block; } }
- @media screen and (min-width: 64em) {
- .menu.large-horizontal > li {
- display: table-cell; }
- .menu.large-vertical > li {
- display: block; } }
- .menu.simple li {
- line-height: 1;
- display: inline-block;
- margin-right: 1rem; }
- .menu.simple a {
- padding: 0; }
- .menu.align-right::before, .menu.align-right::after {
- content: ' ';
- display: table; }
- .menu.align-right::after {
- clear: both; }
- .menu.align-right > li {
- float: right; }
- .menu.expanded {
- width: 100%;
- display: table;
- table-layout: fixed; }
- .menu.expanded > li:first-child:last-child {
- width: 100%; }
- .menu.icon-top > li > a {
- text-align: center; }
- .menu.icon-top > li > a img,
- .menu.icon-top > li > a i {
- display: block;
- margin: 0 auto 0.25rem; }
+ .menu, .menu.horizontal {
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-direction: row;
+ flex-direction: row; }
+ .menu.vertical {
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -ms-flex-direction: column;
+ flex-direction: column; }
+ .menu.expanded li {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px; }
+ .menu.simple {
+ -ms-flex-align: center;
+ align-items: center; }
+ .menu.simple li + li {
+ margin-left: 1rem; }
+ .menu.simple a {
+ padding: 0; }
+ @media print, screen and (min-width: 40em) {
+ .menu.medium-horizontal {
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-direction: row;
+ flex-direction: row; }
+ .menu.medium-vertical {
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -ms-flex-direction: column;
+ flex-direction: column; }
+ .menu.medium-expanded li {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px; }
+ .menu.medium-simple li {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px; } }
+ @media print, screen and (min-width: 64em) {
+ .menu.large-horizontal {
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-direction: row;
+ flex-direction: row; }
+ .menu.large-vertical {
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -ms-flex-direction: column;
+ flex-direction: column; }
+ .menu.large-expanded li {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px; }
+ .menu.large-simple li {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px; } }
.menu.nested {
+ margin-right: 0;
margin-left: 1rem; }
+ .menu.icons a {
+ display: -ms-flexbox;
+ display: flex; }
+ .menu.icon-top a, .menu.icon-right a, .menu.icon-bottom a, .menu.icon-left a {
+ display: -ms-flexbox;
+ display: flex; }
+ .menu.icon-left li a {
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap; }
+ .menu.icon-left li a img,
+ .menu.icon-left li a i,
+ .menu.icon-left li a svg {
+ margin-right: 0.25rem; }
+ .menu.icon-right li a {
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap; }
+ .menu.icon-right li a img,
+ .menu.icon-right li a i,
+ .menu.icon-right li a svg {
+ margin-left: 0.25rem; }
+ .menu.icon-top li a {
+ -ms-flex-flow: column nowrap;
+ flex-flow: column nowrap; }
+ .menu.icon-top li a img,
+ .menu.icon-top li a i,
+ .menu.icon-top li a svg {
+ -ms-flex-item-align: stretch;
+ -ms-grid-row-align: stretch;
+ align-self: stretch;
+ margin-bottom: 0.25rem;
+ text-align: center; }
+ .menu.icon-bottom li a {
+ -ms-flex-flow: column nowrap;
+ flex-flow: column nowrap; }
+ .menu.icon-bottom li a img,
+ .menu.icon-bottom li a i,
+ .menu.icon-bottom li a svg {
+ -ms-flex-item-align: stretch;
+ -ms-grid-row-align: stretch;
+ align-self: stretch;
+ margin-bottom: 0.25rem;
+ text-align: center; }
+ .menu .is-active > a {
+ background: #1779ba;
+ color: #fefefe; }
.menu .active > a {
- color: #fefefe;
- background: #2199e8; }
-
- .menu-text {
- font-weight: bold;
- color: inherit;
- line-height: 1;
- padding-top: 0;
- padding-bottom: 0;
- padding: 0.7rem 1rem; }
-
- .menu-centered {
- text-align: center; }
- .menu-centered > .menu {
- display: inline-block; }
+ background: #1779ba;
+ color: #fefefe; }
+ .menu.align-left {
+ -ms-flex-pack: start;
+ justify-content: flex-start; }
+ .menu.align-right li {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-pack: end;
+ justify-content: flex-end; }
+ .menu.align-right li .submenu li {
+ -ms-flex-pack: start;
+ justify-content: flex-start; }
+ .menu.align-right.vertical li {
+ display: block;
+ text-align: right; }
+ .menu.align-right.vertical li .submenu li {
+ text-align: right; }
+ .menu.align-right .nested {
+ margin-right: 1rem;
+ margin-left: 0; }
+ .menu.align-center li {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-pack: center;
+ justify-content: center; }
+ .menu.align-center li .submenu li {
+ -ms-flex-pack: start;
+ justify-content: flex-start; }
+ .menu .menu-text {
+ padding: 0.7rem 1rem;
+ font-weight: bold;
+ line-height: 1;
+ color: inherit; }
+
+ .menu-centered > .menu {
+ -ms-flex-pack: center;
+ justify-content: center; }
+ .menu-centered > .menu li {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-pack: center;
+ justify-content: center; }
+ .menu-centered > .menu li .submenu li {
+ -ms-flex-pack: start;
+ justify-content: flex-start; }
.no-js [data-responsive-menu] ul {
display: none; }
@@ @@ -2126,19 +3559,19 @@ select {
position: relative;
display: inline-block;
vertical-align: middle;
- cursor: pointer;
width: 20px;
- height: 16px; }
+ height: 16px;
+ cursor: pointer; }
.menu-icon::after {
- content: '';
position: absolute;
+ top: 0;
+ left: 0;
display: block;
width: 100%;
height: 2px;
background: #fefefe;
- top: 0;
- left: 0;
- box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe; }
+ box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;
+ content: ''; }
.menu-icon:hover::after {
background: #cacaca;
box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; }
@@ @@ -2147,19 +3580,19 @@ select {
position: relative;
display: inline-block;
vertical-align: middle;
- cursor: pointer;
width: 20px;
- height: 16px; }
+ height: 16px;
+ cursor: pointer; }
.menu-icon.dark::after {
- content: '';
position: absolute;
+ top: 0;
+ left: 0;
display: block;
width: 100%;
height: 2px;
background: #0a0a0a;
- top: 0;
- left: 0;
- box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a; }
+ box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
+ content: ''; }
.menu-icon.dark:hover::after {
background: #8a8a8a;
box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; }
@@ @@ -2168,72 +3601,111 @@ select {
position: relative;
overflow: hidden; }
.is-drilldown li {
- display: block !important; }
+ display: block; }
+ .is-drilldown.animate-height {
+ transition: height 0.5s; }
+
+ .drilldown a {
+ padding: 0.7rem 1rem;
+ background: #fefefe; }
- .is-drilldown-submenu {
+ .drilldown .is-drilldown-submenu {
position: absolute;
top: 0;
left: 100%;
z-index: -1;
- height: 100%;
width: 100%;
background: #fefefe;
- transition: -webkit-transform 0.15s linear;
transition: transform 0.15s linear; }
- .is-drilldown-submenu.is-active {
+ .drilldown .is-drilldown-submenu.is-active {
z-index: 1;
display: block;
- -webkit-transform: translateX(-100%);
- -ms-transform: translateX(-100%);
- transform: translateX(-100%); }
- .is-drilldown-submenu.is-closing {
- -webkit-transform: translateX(100%);
- -ms-transform: translateX(100%);
- transform: translateX(100%); }
-
- .is-drilldown-submenu-parent > a {
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%); }
+ .drilldown .is-drilldown-submenu.is-closing {
+ -ms-transform: translateX(100%);
+ transform: translateX(100%); }
+ .drilldown .is-drilldown-submenu a {
+ padding: 0.7rem 1rem; }
+
+ .drilldown .nested.is-drilldown-submenu {
+ margin-right: 0;
+ margin-left: 0; }
+
+ .drilldown .drilldown-submenu-cover-previous {
+ min-height: 100%; }
+
+ .drilldown .is-drilldown-submenu-parent > a {
position: relative; }
- .is-drilldown-submenu-parent > a::after {
- content: '';
+ .drilldown .is-drilldown-submenu-parent > a::after {
+ position: absolute;
+ top: 50%;
+ margin-top: -6px;
+ right: 1rem;
display: block;
width: 0;
height: 0;
border: inset 6px;
- border-color: transparent transparent transparent #2199e8;
- border-left-style: solid;
+ content: '';
border-right-width: 0;
- position: absolute;
- top: 50%;
- margin-top: -6px;
- right: 1rem; }
+ border-left-style: solid;
+ border-color: transparent transparent transparent #1779ba; }
- .js-drilldown-back > a::before {
+ .drilldown.align-left .is-drilldown-submenu-parent > a::after {
+ left: auto;
+ right: 1rem;
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 6px;
content: '';
+ border-right-width: 0;
+ border-left-style: solid;
+ border-color: transparent transparent transparent #1779ba; }
+
+ .drilldown.align-right .is-drilldown-submenu-parent > a::after {
+ right: auto;
+ left: 1rem;
display: block;
width: 0;
height: 0;
border: inset 6px;
- border-color: transparent #2199e8 transparent transparent;
+ content: '';
+ border-left-width: 0;
border-right-style: solid;
+ border-color: transparent #1779ba transparent transparent; }
+
+ .drilldown .js-drilldown-back > a::before {
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 6px;
+ content: '';
border-left-width: 0;
+ border-right-style: solid;
+ border-color: transparent #1779ba transparent transparent;
border-left-width: 0;
display: inline-block;
vertical-align: middle;
- margin-right: 0.75rem; }
+ margin-right: 0.75rem;
+ border-left-width: 0; }
.dropdown-pane {
- background-color: #fefefe;
- border: 1px solid #cacaca;
- border-radius: 0;
- display: block;
- font-size: 1rem;
- padding: 1rem;
position: absolute;
- visibility: hidden;
+ z-index: 10;
width: 300px;
- z-index: 10; }
+ padding: 1rem;
+ visibility: hidden;
+ display: none;
+ border: 1px solid #cacaca;
+ border-radius: 0;
+ background-color: #fefefe;
+ font-size: 1rem; }
+ .dropdown-pane.is-opening {
+ display: block; }
.dropdown-pane.is-open {
- visibility: visible; }
+ visibility: visible;
+ display: block; }
.dropdown-pane.tiny {
width: 100px; }
@@ @@ -2245,182 +3717,201 @@ select {
width: 400px; }
.dropdown.menu > li.opens-left > .is-dropdown-submenu {
- left: auto;
+ top: 100%;
right: 0;
- top: 100%; }
+ left: auto; }
.dropdown.menu > li.opens-right > .is-dropdown-submenu {
+ top: 100%;
right: auto;
- left: 0;
- top: 100%; }
+ left: 0; }
.dropdown.menu > li.is-dropdown-submenu-parent > a {
- padding-right: 1.5rem;
- position: relative; }
+ position: relative;
+ padding-right: 1.5rem; }
.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
- content: '';
display: block;
width: 0;
height: 0;
- border: inset 5px;
- border-color: #2199e8 transparent transparent;
- border-top-style: solid;
+ border: inset 6px;
+ content: '';
border-bottom-width: 0;
+ border-top-style: solid;
+ border-color: #1779ba transparent transparent;
right: 5px;
- margin-top: -2px; }
+ left: auto;
+ margin-top: -3px; }
+
+ .dropdown.menu a {
+ padding: 0.7rem 1rem; }
+ [data-whatinput='mouse'] .dropdown.menu a {
+ outline: 0; }
- [data-whatinput='mouse'] .dropdown.menu a {
- outline: 0; }
+ .dropdown.menu .is-active > a {
+ background: transparent;
+ color: #1779ba; }
.no-js .dropdown.menu ul {
display: none; }
+ .dropdown.menu .nested.is-dropdown-submenu {
+ margin-right: 0;
+ margin-left: 0; }
+
.dropdown.menu.vertical > li .is-dropdown-submenu {
top: 0; }
- .dropdown.menu.vertical > li.opens-left .is-dropdown-submenu {
+ .dropdown.menu.vertical > li.opens-left > .is-dropdown-submenu {
+ right: 100%;
left: auto;
- right: 100%; }
+ top: 0; }
- .dropdown.menu.vertical > li.opens-right .is-dropdown-submenu {
+ .dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu {
right: auto;
left: 100%; }
.dropdown.menu.vertical > li > a::after {
- right: 14px;
- margin-top: -3px; }
+ right: 14px; }
.dropdown.menu.vertical > li.opens-left > a::after {
- content: '';
+ right: auto;
+ left: 5px;
display: block;
width: 0;
height: 0;
- border: inset 5px;
- border-color: transparent #2199e8 transparent transparent;
+ border: inset 6px;
+ content: '';
+ border-left-width: 0;
border-right-style: solid;
- border-left-width: 0; }
+ border-color: transparent #1779ba transparent transparent; }
.dropdown.menu.vertical > li.opens-right > a::after {
- content: '';
display: block;
width: 0;
height: 0;
- border: inset 5px;
- border-color: transparent transparent transparent #2199e8;
+ border: inset 6px;
+ content: '';
+ border-right-width: 0;
border-left-style: solid;
- border-right-width: 0; }
+ border-color: transparent transparent transparent #1779ba; }
- @media screen and (min-width: 40em) {
+ @media print, screen and (min-width: 40em) {
.dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu {
- left: auto;
+ top: 100%;
right: 0;
- top: 100%; }
+ left: auto; }
.dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu {
+ top: 100%;
right: auto;
- left: 0;
- top: 100%; }
+ left: 0; }
.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a {
- padding-right: 1.5rem;
- position: relative; }
+ position: relative;
+ padding-right: 1.5rem; }
.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
- content: '';
display: block;
width: 0;
height: 0;
- border: inset 5px;
- border-color: #2199e8 transparent transparent;
- border-top-style: solid;
+ border: inset 6px;
+ content: '';
border-bottom-width: 0;
+ border-top-style: solid;
+ border-color: #1779ba transparent transparent;
right: 5px;
- margin-top: -2px; }
+ left: auto;
+ margin-top: -3px; }
.dropdown.menu.medium-vertical > li .is-dropdown-submenu {
top: 0; }
- .dropdown.menu.medium-vertical > li.opens-left .is-dropdown-submenu {
+ .dropdown.menu.medium-vertical > li.opens-left > .is-dropdown-submenu {
+ right: 100%;
left: auto;
- right: 100%; }
- .dropdown.menu.medium-vertical > li.opens-right .is-dropdown-submenu {
+ top: 0; }
+ .dropdown.menu.medium-vertical > li.opens-right > .is-dropdown-submenu {
right: auto;
left: 100%; }
.dropdown.menu.medium-vertical > li > a::after {
- right: 14px;
- margin-top: -3px; }
+ right: 14px; }
.dropdown.menu.medium-vertical > li.opens-left > a::after {
- content: '';
+ right: auto;
+ left: 5px;
display: block;
width: 0;
height: 0;
- border: inset 5px;
- border-color: transparent #2199e8 transparent transparent;
+ border: inset 6px;
+ content: '';
+ border-left-width: 0;
border-right-style: solid;
- border-left-width: 0; }
+ border-color: transparent #1779ba transparent transparent; }
.dropdown.menu.medium-vertical > li.opens-right > a::after {
- content: '';
display: block;
width: 0;
height: 0;
- border: inset 5px;
- border-color: transparent transparent transparent #2199e8;
+ border: inset 6px;
+ content: '';
+ border-right-width: 0;
border-left-style: solid;
- border-right-width: 0; } }
+ border-color: transparent transparent transparent #1779ba; } }
- @media screen and (min-width: 64em) {
+ @media print, screen and (min-width: 64em) {
.dropdown.menu.large-horizontal > li.opens-left > .is-dropdown-submenu {
- left: auto;
+ top: 100%;
right: 0;
- top: 100%; }
+ left: auto; }
.dropdown.menu.large-horizontal > li.opens-right > .is-dropdown-submenu {
+ top: 100%;
right: auto;
- left: 0;
- top: 100%; }
+ left: 0; }
.dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a {
- padding-right: 1.5rem;
- position: relative; }
+ position: relative;
+ padding-right: 1.5rem; }
.dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after {
- content: '';
display: block;
width: 0;
height: 0;
- border: inset 5px;
- border-color: #2199e8 transparent transparent;
- border-top-style: solid;
+ border: inset 6px;
+ content: '';
border-bottom-width: 0;
+ border-top-style: solid;
+ border-color: #1779ba transparent transparent;
right: 5px;
- margin-top: -2px; }
+ left: auto;
+ margin-top: -3px; }
.dropdown.menu.large-vertical > li .is-dropdown-submenu {
top: 0; }
- .dropdown.menu.large-vertical > li.opens-left .is-dropdown-submenu {
+ .dropdown.menu.large-vertical > li.opens-left > .is-dropdown-submenu {
+ right: 100%;
left: auto;
- right: 100%; }
- .dropdown.menu.large-vertical > li.opens-right .is-dropdown-submenu {
+ top: 0; }
+ .dropdown.menu.large-vertical > li.opens-right > .is-dropdown-submenu {
right: auto;
left: 100%; }
.dropdown.menu.large-vertical > li > a::after {
- right: 14px;
- margin-top: -3px; }
+ right: 14px; }
.dropdown.menu.large-vertical > li.opens-left > a::after {
- content: '';
+ right: auto;
+ left: 5px;
display: block;
width: 0;
height: 0;
- border: inset 5px;
- border-color: transparent #2199e8 transparent transparent;
+ border: inset 6px;
+ content: '';
+ border-left-width: 0;
border-right-style: solid;
- border-left-width: 0; }
+ border-color: transparent #1779ba transparent transparent; }
.dropdown.menu.large-vertical > li.opens-right > a::after {
- content: '';
display: block;
width: 0;
height: 0;
- border: inset 5px;
- border-color: transparent transparent transparent #2199e8;
+ border: inset 6px;
+ content: '';
+ border-right-width: 0;
border-left-style: solid;
- border-right-width: 0; } }
+ border-color: transparent transparent transparent #1779ba; } }
.dropdown.menu.align-right .is-dropdown-submenu.first-sub {
top: 100%;
- left: auto;
- right: 0; }
+ right: 0;
+ left: auto; }
.is-dropdown-menu.vertical {
width: 100px; }
@@ @@ -2433,56 +3924,69 @@ select {
position: absolute;
top: 50%;
right: 5px;
- margin-top: -2px; }
- .is-dropdown-submenu-parent.opens-inner .is-dropdown-submenu {
- top: 100%; }
- .is-dropdown-submenu-parent.opens-left .is-dropdown-submenu {
left: auto;
- right: 100%; }
+ margin-top: -6px; }
+ .is-dropdown-submenu-parent.opens-inner > .is-dropdown-submenu {
+ top: 100%;
+ left: auto; }
+ .is-dropdown-submenu-parent.opens-left > .is-dropdown-submenu {
+ right: 100%;
+ left: auto; }
+ .is-dropdown-submenu-parent.opens-right > .is-dropdown-submenu {
+ right: auto;
+ left: 100%; }
.is-dropdown-submenu {
- display: none;
position: absolute;
top: 0;
left: 100%;
- min-width: 200px;
z-index: 1;
- background: #fefefe;
- border: 1px solid #cacaca; }
+ display: none;
+ min-width: 200px;
+ border: 1px solid #cacaca;
+ background: #fefefe; }
+ .dropdown .is-dropdown-submenu a {
+ padding: 0.7rem 1rem; }
.is-dropdown-submenu .is-dropdown-submenu-parent > a::after {
- right: 14px;
- margin-top: -3px; }
+ right: 14px; }
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after {
- content: '';
+ right: auto;
+ left: 5px;
display: block;
width: 0;
height: 0;
- border: inset 5px;
- border-color: transparent #2199e8 transparent transparent;
+ border: inset 6px;
+ content: '';
+ border-left-width: 0;
border-right-style: solid;
- border-left-width: 0; }
+ border-color: transparent #1779ba transparent transparent; }
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after {
- content: '';
display: block;
width: 0;
height: 0;
- border: inset 5px;
- border-color: transparent transparent transparent #2199e8;
+ border: inset 6px;
+ content: '';
+ border-right-width: 0;
border-left-style: solid;
- border-right-width: 0; }
+ border-color: transparent transparent transparent #1779ba; }
.is-dropdown-submenu .is-dropdown-submenu {
margin-top: -1px; }
.is-dropdown-submenu > li {
width: 100%; }
- .is-dropdown-submenu:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > .is-dropdown-submenu, .is-dropdown-submenu.js-dropdown-active {
+ .is-dropdown-submenu.js-dropdown-active {
display: block; }
+ .responsive-embed,
.flex-video {
position: relative;
height: 0;
- padding-bottom: 75%;
margin-bottom: 1rem;
+ padding-bottom: 75%;
overflow: hidden; }
+ .responsive-embed iframe,
+ .responsive-embed object,
+ .responsive-embed embed,
+ .responsive-embed video,
.flex-video iframe,
.flex-video object,
.flex-video embed,
@@ @@ -2492,173 +3996,403 @@ select {
left: 0;
width: 100%;
height: 100%; }
+ .responsive-embed.widescreen,
.flex-video.widescreen {
padding-bottom: 56.25%; }
- .flex-video.vimeo {
- padding-top: 0; }
.label {
display: inline-block;
padding: 0.33333rem 0.5rem;
+ border-radius: 0;
font-size: 0.8rem;
line-height: 1;
white-space: nowrap;
cursor: default;
- border-radius: 0;
- background: #2199e8;
+ background: #1779ba;
color: #fefefe; }
+ .label.primary {
+ background: #1779ba;
+ color: #fefefe; }
.label.secondary {
- background: #777;
+ background: #767676;
color: #fefefe; }
.label.success {
background: #3adb76;
- color: #fefefe; }
+ color: #0a0a0a; }
.label.warning {
background: #ffae00;
- color: #fefefe; }
+ color: #0a0a0a; }
.label.alert {
- background: #ec5840;
+ background: #cc4b37;
color: #fefefe; }
.media-object {
+ display: -ms-flexbox;
+ display: flex;
margin-bottom: 1rem;
- display: block; }
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap; }
.media-object img {
max-width: none; }
+ @media screen and (max-width: 39.9375em) {
+ .media-object.stack-for-small {
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap; } }
@media screen and (max-width: 39.9375em) {
.media-object.stack-for-small .media-object-section {
padding: 0;
padding-bottom: 1rem;
- display: block; }
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+ max-width: 100%; }
.media-object.stack-for-small .media-object-section img {
width: 100%; } }
.media-object-section {
- display: table-cell;
- vertical-align: top; }
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto; }
.media-object-section:first-child {
padding-right: 1rem; }
.media-object-section:last-child:not(:nth-child(2)) {
padding-left: 1rem; }
- .media-object-section.middle {
- vertical-align: middle; }
- .media-object-section.bottom {
- vertical-align: bottom; }
+ .media-object-section > :last-child {
+ margin-bottom: 0; }
+ .media-object-section.main-section {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px; }
- html,
- body {
- height: 100%; }
+ .is-off-canvas-open {
+ overflow: hidden; }
- .off-canvas-wrapper {
+ .js-off-canvas-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 11;
width: 100%;
- overflow-x: hidden;
- position: relative;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- -webkit-overflow-scrolling: auto; }
+ height: 100%;
+ transition: opacity 0.5s ease, visibility 0.5s ease;
+ background: rgba(254, 254, 254, 0.25);
+ opacity: 0;
+ visibility: hidden;
+ overflow: hidden; }
+ .js-off-canvas-overlay.is-visible {
+ opacity: 1;
+ visibility: visible; }
+ .js-off-canvas-overlay.is-closable {
+ cursor: pointer; }
+ .js-off-canvas-overlay.is-overlay-absolute {
+ position: absolute; }
+ .js-off-canvas-overlay.is-overlay-fixed {
+ position: fixed; }
- .off-canvas-wrapper-inner {
+ .off-canvas-wrapper {
position: relative;
- width: 100%;
- transition: -webkit-transform 0.5s ease;
- transition: transform 0.5s ease; }
- .off-canvas-wrapper-inner::before, .off-canvas-wrapper-inner::after {
- content: ' ';
- display: table; }
- .off-canvas-wrapper-inner::after {
- clear: both; }
+ overflow: hidden; }
- .off-canvas-content,
- .off-canvas-content {
- min-height: 100%;
- background: #fefefe;
- transition: -webkit-transform 0.5s ease;
+ .off-canvas {
+ position: fixed;
+ z-index: 12;
transition: transform 0.5s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
- z-index: 1;
- padding-bottom: 0.1px;
- box-shadow: 0 0 10px rgba(10, 10, 10, 0.5); }
-
- .js-off-canvas-exit {
- display: none;
+ background: #e6e6e6; }
+ [data-whatinput='mouse'] .off-canvas {
+ outline: 0; }
+ .off-canvas.is-transition-push {
+ z-index: 12; }
+ .off-canvas.is-closed {
+ visibility: hidden; }
+ .off-canvas.is-transition-overlap {
+ z-index: 13; }
+ .off-canvas.is-transition-overlap.is-open {
+ box-shadow: 0 0 10px rgba(10, 10, 10, 0.7); }
+ .off-canvas.is-open {
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
+
+ .off-canvas-absolute {
position: absolute;
+ z-index: 12;
+ transition: transform 0.5s ease;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ background: #e6e6e6; }
+ [data-whatinput='mouse'] .off-canvas-absolute {
+ outline: 0; }
+ .off-canvas-absolute.is-transition-push {
+ z-index: 12; }
+ .off-canvas-absolute.is-closed {
+ visibility: hidden; }
+ .off-canvas-absolute.is-transition-overlap {
+ z-index: 13; }
+ .off-canvas-absolute.is-transition-overlap.is-open {
+ box-shadow: 0 0 10px rgba(10, 10, 10, 0.7); }
+ .off-canvas-absolute.is-open {
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
+
+ .position-left {
top: 0;
left: 0;
- width: 100%;
height: 100%;
- background: rgba(254, 254, 254, 0.25);
- cursor: pointer;
- transition: background 0.5s ease; }
-
- .off-canvas {
- position: absolute;
- background: #e6e6e6;
- z-index: -1;
- max-height: 100%;
overflow-y: auto;
- -webkit-transform: translateX(0);
- -ms-transform: translateX(0);
- transform: translateX(0); }
- [data-whatinput='mouse'] .off-canvas {
- outline: 0; }
- .off-canvas.position-left {
- left: -250px;
- top: 0;
- width: 250px; }
- .is-open-left {
- -webkit-transform: translateX(250px);
- -ms-transform: translateX(250px);
- transform: translateX(250px); }
- .off-canvas.position-right {
- right: -250px;
- top: 0;
- width: 250px; }
- .is-open-right {
- -webkit-transform: translateX(-250px);
- -ms-transform: translateX(-250px);
- transform: translateX(-250px); }
+ width: 250px;
+ -ms-transform: translateX(-250px);
+ transform: translateX(-250px); }
+ .off-canvas-content .off-canvas.position-left {
+ -ms-transform: translateX(-250px);
+ transform: translateX(-250px); }
+ .off-canvas-content .off-canvas.position-left.is-transition-overlap.is-open {
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
+ .off-canvas-content.is-open-left.has-transition-push {
+ -ms-transform: translateX(250px);
+ transform: translateX(250px); }
+ .position-left.is-transition-push {
+ box-shadow: inset -13px 0 20px -13px rgba(10, 10, 10, 0.25); }
+
+ .position-right {
+ top: 0;
+ right: 0;
+ height: 100%;
+ overflow-y: auto;
+ width: 250px;
+ -ms-transform: translateX(250px);
+ transform: translateX(250px); }
+ .off-canvas-content .off-canvas.position-right {
+ -ms-transform: translateX(250px);
+ transform: translateX(250px); }
+ .off-canvas-content .off-canvas.position-right.is-transition-overlap.is-open {
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
+ .off-canvas-content.is-open-right.has-transition-push {
+ -ms-transform: translateX(-250px);
+ transform: translateX(-250px); }
+ .position-right.is-transition-push {
+ box-shadow: inset 13px 0 20px -13px rgba(10, 10, 10, 0.25); }
+
+ .position-top {
+ top: 0;
+ left: 0;
+ width: 100%;
+ overflow-x: auto;
+ height: 250px;
+ -ms-transform: translateY(-250px);
+ transform: translateY(-250px); }
+ .off-canvas-content .off-canvas.position-top {
+ -ms-transform: translateY(-250px);
+ transform: translateY(-250px); }
+ .off-canvas-content .off-canvas.position-top.is-transition-overlap.is-open {
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
+ .off-canvas-content.is-open-top.has-transition-push {
+ -ms-transform: translateY(250px);
+ transform: translateY(250px); }
+ .position-top.is-transition-push {
+ box-shadow: inset 0 -13px 20px -13px rgba(10, 10, 10, 0.25); }
+
+ .position-bottom {
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ overflow-x: auto;
+ height: 250px;
+ -ms-transform: translateY(250px);
+ transform: translateY(250px); }
+ .off-canvas-content .off-canvas.position-bottom {
+ -ms-transform: translateY(250px);
+ transform: translateY(250px); }
+ .off-canvas-content .off-canvas.position-bottom.is-transition-overlap.is-open {
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
+ .off-canvas-content.is-open-bottom.has-transition-push {
+ -ms-transform: translateY(-250px);
+ transform: translateY(-250px); }
+ .position-bottom.is-transition-push {
+ box-shadow: inset 0 13px 20px -13px rgba(10, 10, 10, 0.25); }
- @media screen and (min-width: 40em) {
+ .off-canvas-content {
+ -ms-transform: none;
+ transform: none;
+ transition: transform 0.5s ease;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
+ .off-canvas-content.has-transition-push {
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
+ .off-canvas-content .off-canvas.is-open {
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
+
+ @media print, screen and (min-width: 40em) {
.position-left.reveal-for-medium {
- left: 0;
- z-index: auto;
- position: fixed; }
+ -ms-transform: none;
+ transform: none;
+ z-index: 12;
+ transition: none;
+ visibility: visible; }
+ .position-left.reveal-for-medium .close-button {
+ display: none; }
+ .off-canvas-content .position-left.reveal-for-medium {
+ -ms-transform: none;
+ transform: none; }
+ .off-canvas-content.has-reveal-left {
+ margin-left: 250px; }
.position-left.reveal-for-medium ~ .off-canvas-content {
margin-left: 250px; }
.position-right.reveal-for-medium {
- right: 0;
- z-index: auto;
- position: fixed; }
+ -ms-transform: none;
+ transform: none;
+ z-index: 12;
+ transition: none;
+ visibility: visible; }
+ .position-right.reveal-for-medium .close-button {
+ display: none; }
+ .off-canvas-content .position-right.reveal-for-medium {
+ -ms-transform: none;
+ transform: none; }
+ .off-canvas-content.has-reveal-right {
+ margin-right: 250px; }
.position-right.reveal-for-medium ~ .off-canvas-content {
- margin-right: 250px; } }
-
- @media screen and (min-width: 64em) {
+ margin-right: 250px; }
+ .position-top.reveal-for-medium {
+ -ms-transform: none;
+ transform: none;
+ z-index: 12;
+ transition: none;
+ visibility: visible; }
+ .position-top.reveal-for-medium .close-button {
+ display: none; }
+ .off-canvas-content .position-top.reveal-for-medium {
+ -ms-transform: none;
+ transform: none; }
+ .off-canvas-content.has-reveal-top {
+ margin-top: 250px; }
+ .position-top.reveal-for-medium ~ .off-canvas-content {
+ margin-top: 250px; }
+ .position-bottom.reveal-for-medium {
+ -ms-transform: none;
+ transform: none;
+ z-index: 12;
+ transition: none;
+ visibility: visible; }
+ .position-bottom.reveal-for-medium .close-button {
+ display: none; }
+ .off-canvas-content .position-bottom.reveal-for-medium {
+ -ms-transform: none;
+ transform: none; }
+ .off-canvas-content.has-reveal-bottom {
+ margin-bottom: 250px; }
+ .position-bottom.reveal-for-medium ~ .off-canvas-content {
+ margin-bottom: 250px; } }
+
+ @media print, screen and (min-width: 64em) {
.position-left.reveal-for-large {
- left: 0;
- z-index: auto;
- position: fixed; }
+ -ms-transform: none;
+ transform: none;
+ z-index: 12;
+ transition: none;
+ visibility: visible; }
+ .position-left.reveal-for-large .close-button {
+ display: none; }
+ .off-canvas-content .position-left.reveal-for-large {
+ -ms-transform: none;
+ transform: none; }
+ .off-canvas-content.has-reveal-left {
+ margin-left: 250px; }
.position-left.reveal-for-large ~ .off-canvas-content {
margin-left: 250px; }
.position-right.reveal-for-large {
- right: 0;
- z-index: auto;
- position: fixed; }
+ -ms-transform: none;
+ transform: none;
+ z-index: 12;
+ transition: none;
+ visibility: visible; }
+ .position-right.reveal-for-large .close-button {
+ display: none; }
+ .off-canvas-content .position-right.reveal-for-large {
+ -ms-transform: none;
+ transform: none; }
+ .off-canvas-content.has-reveal-right {
+ margin-right: 250px; }
.position-right.reveal-for-large ~ .off-canvas-content {
- margin-right: 250px; } }
+ margin-right: 250px; }
+ .position-top.reveal-for-large {
+ -ms-transform: none;
+ transform: none;
+ z-index: 12;
+ transition: none;
+ visibility: visible; }
+ .position-top.reveal-for-large .close-button {
+ display: none; }
+ .off-canvas-content .position-top.reveal-for-large {
+ -ms-transform: none;
+ transform: none; }
+ .off-canvas-content.has-reveal-top {
+ margin-top: 250px; }
+ .position-top.reveal-for-large ~ .off-canvas-content {
+ margin-top: 250px; }
+ .position-bottom.reveal-for-large {
+ -ms-transform: none;
+ transform: none;
+ z-index: 12;
+ transition: none;
+ visibility: visible; }
+ .position-bottom.reveal-for-large .close-button {
+ display: none; }
+ .off-canvas-content .position-bottom.reveal-for-large {
+ -ms-transform: none;
+ transform: none; }
+ .off-canvas-content.has-reveal-bottom {
+ margin-bottom: 250px; }
+ .position-bottom.reveal-for-large ~ .off-canvas-content {
+ margin-bottom: 250px; } }
+
+ @media print, screen and (min-width: 40em) {
+ .off-canvas.in-canvas-for-medium {
+ visibility: visible;
+ height: auto;
+ position: static;
+ background: inherit;
+ width: inherit;
+ overflow: inherit;
+ transition: inherit; }
+ .off-canvas.in-canvas-for-medium.position-left, .off-canvas.in-canvas-for-medium.position-right, .off-canvas.in-canvas-for-medium.position-top, .off-canvas.in-canvas-for-medium.position-bottom {
+ box-shadow: none;
+ -ms-transform: none;
+ transform: none; }
+ .off-canvas.in-canvas-for-medium .close-button {
+ display: none; } }
+
+ @media print, screen and (min-width: 64em) {
+ .off-canvas.in-canvas-for-large {
+ visibility: visible;
+ height: auto;
+ position: static;
+ background: inherit;
+ width: inherit;
+ overflow: inherit;
+ transition: inherit; }
+ .off-canvas.in-canvas-for-large.position-left, .off-canvas.in-canvas-for-large.position-right, .off-canvas.in-canvas-for-large.position-top, .off-canvas.in-canvas-for-large.position-bottom {
+ box-shadow: none;
+ -ms-transform: none;
+ transform: none; }
+ .off-canvas.in-canvas-for-large .close-button {
+ display: none; } }
.orbit {
position: relative; }
.orbit-container {
position: relative;
+ height: 0;
margin: 0;
- overflow: hidden;
- list-style: none; }
+ list-style: none;
+ overflow: hidden; }
.orbit-slide {
- width: 100%;
- max-height: 100%; }
+ width: 100%; }
.orbit-slide.no-motionui.is-active {
top: 0;
left: 0; }
@@ @@ -2667,25 +4401,24 @@ body {
margin: 0; }
.orbit-image {
- margin: 0;
width: 100%;
- max-width: 100%; }
+ max-width: 100%;
+ margin: 0; }
.orbit-caption {
position: absolute;
bottom: 0;
width: 100%;
- padding: 1rem;
margin-bottom: 0;
- color: #fefefe;
- background-color: rgba(10, 10, 10, 0.5); }
+ padding: 1rem;
+ background-color: rgba(10, 10, 10, 0.5);
+ color: #fefefe; }
.orbit-previous, .orbit-next {
position: absolute;
top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
z-index: 10;
padding: 1rem;
color: #fefefe; }
@@ @@ -2712,8 +4445,8 @@ body {
width: 1.2rem;
height: 1.2rem;
margin: 0.1rem;
- background-color: #cacaca;
- border-radius: 50%; }
+ border-radius: 50%;
+ background-color: #cacaca; }
.orbit-bullets button:hover {
background-color: #8a8a8a; }
.orbit-bullets button.is-active {
@@ @@ -2723,32 +4456,36 @@ body {
margin-left: 0;
margin-bottom: 1rem; }
.pagination::before, .pagination::after {
+ display: table;
content: ' ';
- display: table; }
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -ms-flex-order: 1;
+ order: 1; }
.pagination::after {
clear: both; }
.pagination li {
- font-size: 0.875rem;
margin-right: 0.0625rem;
border-radius: 0;
+ font-size: 0.875rem;
display: none; }
.pagination li:last-child, .pagination li:first-child {
display: inline-block; }
- @media screen and (min-width: 40em) {
+ @media print, screen and (min-width: 40em) {
.pagination li {
display: inline-block; } }
.pagination a,
.pagination button {
- color: #0a0a0a;
display: block;
padding: 0.1875rem 0.625rem;
- border-radius: 0; }
+ border-radius: 0;
+ color: #0a0a0a; }
.pagination a:hover,
.pagination button:hover {
background: #e6e6e6; }
.pagination .current {
padding: 0.1875rem 0.625rem;
- background: #2199e8;
+ background: #1779ba;
color: #fefefe;
cursor: default; }
.pagination .disabled {
@@ @@ -2758,52 +4495,51 @@ body {
.pagination .disabled:hover {
background: transparent; }
.pagination .ellipsis::after {
- content: '\2026';
padding: 0.1875rem 0.625rem;
+ content: '\2026';
color: #0a0a0a; }
.pagination-previous a::before,
.pagination-previous.disabled::before {
- content: '\00ab';
display: inline-block;
- margin-right: 0.5rem; }
+ margin-right: 0.5rem;
+ content: '\00ab'; }
.pagination-next a::after,
.pagination-next.disabled::after {
- content: '\00bb';
display: inline-block;
- margin-left: 0.5rem; }
+ margin-left: 0.5rem;
+ content: '\00bb'; }
.progress {
- background-color: #cacaca;
height: 1rem;
margin-bottom: 1rem;
- border-radius: 0; }
+ border-radius: 0;
+ background-color: #cacaca; }
.progress.primary .progress-meter {
- background-color: #2199e8; }
+ background-color: #1779ba; }
.progress.secondary .progress-meter {
- background-color: #777; }
+ background-color: #767676; }
.progress.success .progress-meter {
background-color: #3adb76; }
.progress.warning .progress-meter {
background-color: #ffae00; }
.progress.alert .progress-meter {
- background-color: #ec5840; }
+ background-color: #cc4b37; }
.progress-meter {
position: relative;
display: block;
width: 0%;
height: 100%;
- background-color: #2199e8; }
+ background-color: #1779ba; }
.progress-meter-text {
position: absolute;
top: 50%;
left: 50%;
- -webkit-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
position: absolute;
margin: 0;
font-size: 0.75rem;
@@ @@ -2811,6 +4547,97 @@ body {
color: #fefefe;
white-space: nowrap; }
+ body.is-reveal-open {
+ overflow: hidden; }
+
+ html.is-reveal-open,
+ html.is-reveal-open body {
+ min-height: 100%;
+ overflow: hidden;
+ position: fixed;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+
+ .reveal-overlay {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1005;
+ display: none;
+ background-color: rgba(10, 10, 10, 0.45);
+ overflow-y: scroll; }
+
+ .reveal {
+ z-index: 1006;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ display: none;
+ padding: 1rem;
+ border: 1px solid #cacaca;
+ border-radius: 0;
+ background-color: #fefefe;
+ position: relative;
+ top: 100px;
+ margin-right: auto;
+ margin-left: auto;
+ overflow-y: auto; }
+ [data-whatinput='mouse'] .reveal {
+ outline: 0; }
+ @media print, screen and (min-width: 40em) {
+ .reveal {
+ min-height: 0; } }
+ .reveal .column {
+ min-width: 0; }
+ .reveal > :last-child {
+ margin-bottom: 0; }
+ @media print, screen and (min-width: 40em) {
+ .reveal {
+ width: 600px;
+ max-width: 75rem; } }
+ .reveal.collapse {
+ padding: 0; }
+ @media print, screen and (min-width: 40em) {
+ .reveal.tiny {
+ width: 30%;
+ max-width: 75rem; } }
+ @media print, screen and (min-width: 40em) {
+ .reveal.small {
+ width: 50%;
+ max-width: 75rem; } }
+ @media print, screen and (min-width: 40em) {
+ .reveal.large {
+ width: 90%;
+ max-width: 75rem; } }
+ .reveal.full {
+ top: 0;
+ left: 0;
+ width: 100%;
+ max-width: none;
+ height: 100%;
+ height: 100vh;
+ min-height: 100vh;
+ margin-left: 0;
+ border: 0;
+ border-radius: 0; }
+ @media screen and (max-width: 39.9375em) {
+ .reveal {
+ top: 0;
+ left: 0;
+ width: 100%;
+ max-width: none;
+ height: 100%;
+ height: 100vh;
+ min-height: 100vh;
+ margin-left: 0;
+ border: 0;
+ border-radius: 0; } }
+ .reveal.without-overlay {
+ position: fixed; }
+
.slider {
position: relative;
height: 0.5rem;
@@ @@ -2840,24 +4667,22 @@ body {
.slider-handle {
position: absolute;
top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- position: absolute;
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
left: 0;
z-index: 1;
display: inline-block;
width: 1.4rem;
height: 1.4rem;
- background-color: #2199e8;
+ border-radius: 0;
+ background-color: #1779ba;
transition: all 0.2s ease-in-out;
-ms-touch-action: manipulation;
- touch-action: manipulation;
- border-radius: 0; }
+ touch-action: manipulation; }
[data-whatinput='mouse'] .slider-handle {
outline: 0; }
.slider-handle:hover {
- background-color: #1583cc; }
+ background-color: #14679e; }
.slider-handle.is-dragging {
transition: all 0s linear; }
@@ @@ -2871,9 +4696,8 @@ body {
width: 0.5rem;
height: 12.5rem;
margin: 0 1.25rem;
- -webkit-transform: scale(1, -1);
- -ms-transform: scale(1, -1);
- transform: scale(1, -1); }
+ -ms-transform: scale(1, -1);
+ transform: scale(1, -1); }
.slider.vertical .slider-fill {
top: 0;
width: 0.5rem;
@@ @@ -2881,166 +4705,81 @@ body {
.slider.vertical .slider-handle {
position: absolute;
top: 0;
- left: 50%;
- width: 1.4rem;
- height: 1.4rem;
- -webkit-transform: translateX(-50%);
- -ms-transform: translateX(-50%);
- transform: translateX(-50%); }
-
- .sticky-container {
- position: relative; }
-
- .sticky {
- position: absolute;
- z-index: 0;
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0); }
-
- .sticky.is-stuck {
- position: fixed;
- z-index: 5; }
- .sticky.is-stuck.is-at-top {
- top: 0; }
- .sticky.is-stuck.is-at-bottom {
- bottom: 0; }
-
- .sticky.is-anchored {
- position: absolute;
- left: auto;
- right: auto; }
- .sticky.is-anchored.is-at-bottom {
- bottom: 0; }
-
- body.is-reveal-open {
- overflow: hidden; }
-
- .reveal-overlay {
- display: none;
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 1005;
- background-color: rgba(10, 10, 10, 0.45);
- overflow-y: scroll; }
-
- .reveal {
- display: none;
- z-index: 1006;
- padding: 1rem;
- border: 1px solid #cacaca;
- background-color: #fefefe;
- border-radius: 0;
- position: relative;
- top: 100px;
- margin-left: auto;
- margin-right: auto;
- overflow-y: auto; }
- [data-whatinput='mouse'] .reveal {
- outline: 0; }
- @media screen and (min-width: 40em) {
- .reveal {
- min-height: 0; } }
- .reveal .column, .reveal .columns,
- .reveal .columns {
- min-width: 0; }
- .reveal > :last-child {
- margin-bottom: 0; }
- @media screen and (min-width: 40em) {
- .reveal {
- width: 600px;
- max-width: 75rem; } }
- @media screen and (min-width: 40em) {
- .reveal .reveal {
- left: auto;
- right: auto;
- margin: 0 auto; } }
- .reveal.collapse {
- padding: 0; }
- @media screen and (min-width: 40em) {
- .reveal.tiny {
- width: 30%;
- max-width: 75rem; } }
- @media screen and (min-width: 40em) {
- .reveal.small {
- width: 50%;
- max-width: 75rem; } }
- @media screen and (min-width: 40em) {
- .reveal.large {
- width: 90%;
- max-width: 75rem; } }
- .reveal.full {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- height: 100vh;
- min-height: 100vh;
- max-width: none;
- margin-left: 0;
- border: 0;
- border-radius: 0; }
- @media screen and (max-width: 39.9375em) {
- .reveal {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- height: 100vh;
- min-height: 100vh;
- max-width: none;
- margin-left: 0;
- border: 0;
- border-radius: 0; } }
- .reveal.without-overlay {
- position: fixed; }
+ left: 50%;
+ width: 1.4rem;
+ height: 1.4rem;
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%); }
+
+ .sticky-container {
+ position: relative; }
+
+ .sticky {
+ position: relative;
+ z-index: 0;
+ transform: translate3d(0, 0, 0); }
+
+ .sticky.is-stuck {
+ position: fixed;
+ z-index: 5;
+ width: 100%; }
+ .sticky.is-stuck.is-at-top {
+ top: 0; }
+ .sticky.is-stuck.is-at-bottom {
+ bottom: 0; }
+
+ .sticky.is-anchored {
+ position: relative;
+ right: auto;
+ left: auto; }
+ .sticky.is-anchored.is-at-bottom {
+ bottom: 0; }
.switch {
+ height: 2rem;
+ position: relative;
margin-bottom: 1rem;
outline: 0;
- position: relative;
+ font-size: 0.875rem;
+ font-weight: bold;
+ color: #fefefe;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
- user-select: none;
- color: #fefefe;
- font-weight: bold;
- font-size: 0.875rem; }
+ user-select: none; }
.switch-input {
- opacity: 0;
- position: absolute; }
+ position: absolute;
+ margin-bottom: 0;
+ opacity: 0; }
.switch-paddle {
- background: #cacaca;
- cursor: pointer;
- display: block;
position: relative;
+ display: block;
width: 4rem;
height: 2rem;
- transition: all 0.25s ease-out;
border-radius: 0;
+ background: #cacaca;
+ transition: all 0.25s ease-out;
+ font-weight: inherit;
color: inherit;
- font-weight: inherit; }
+ cursor: pointer; }
input + .switch-paddle {
margin: 0; }
.switch-paddle::after {
- background: #fefefe;
- content: '';
- display: block;
position: absolute;
- height: 1.5rem;
- left: 0.25rem;
top: 0.25rem;
+ left: 0.25rem;
+ display: block;
width: 1.5rem;
+ height: 1.5rem;
+ transform: translate3d(0, 0, 0);
+ border-radius: 0;
+ background: #fefefe;
transition: all 0.25s ease-out;
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- border-radius: 0; }
+ content: ''; }
input:checked ~ .switch-paddle {
- background: #2199e8; }
+ background: #1779ba; }
input:checked ~ .switch-paddle::after {
left: 2.25rem; }
[data-whatinput='mouse'] input:focus ~ .switch-paddle {
@@ @@ -3049,9 +4788,8 @@ body.is-reveal-open {
.switch-active, .switch-inactive {
position: absolute;
top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%); }
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%); }
.switch-active {
left: 8%;
@@ @@ -3064,43 +4802,50 @@ body.is-reveal-open {
input:checked + label > .switch-inactive {
display: none; }
- .switch.tiny .switch-paddle {
- width: 3rem;
- height: 1.5rem;
- font-size: 0.625rem; }
-
- .switch.tiny .switch-paddle::after {
- width: 1rem;
- height: 1rem; }
-
- .switch.tiny input:checked ~ .switch-paddle::after {
- left: 1.75rem; }
-
- .switch.small .switch-paddle {
- width: 3.5rem;
- height: 1.75rem;
- font-size: 0.75rem; }
-
- .switch.small .switch-paddle::after {
- width: 1.25rem;
- height: 1.25rem; }
-
- .switch.small input:checked ~ .switch-paddle::after {
- left: 2rem; }
-
- .switch.large .switch-paddle {
- width: 5rem;
- height: 2.5rem;
- font-size: 1rem; }
-
- .switch.large .switch-paddle::after {
- width: 2rem;
- height: 2rem; }
+ .switch.tiny {
+ height: 1.5rem; }
+ .switch.tiny .switch-paddle {
+ width: 3rem;
+ height: 1.5rem;
+ font-size: 0.625rem; }
+ .switch.tiny .switch-paddle::after {
+ top: 0.25rem;
+ left: 0.25rem;
+ width: 1rem;
+ height: 1rem; }
+ .switch.tiny input:checked ~ .switch-paddle::after {
+ left: 1.75rem; }
+
+ .switch.small {
+ height: 1.75rem; }
+ .switch.small .switch-paddle {
+ width: 3.5rem;
+ height: 1.75rem;
+ font-size: 0.75rem; }
+ .switch.small .switch-paddle::after {
+ top: 0.25rem;
+ left: 0.25rem;
+ width: 1.25rem;
+ height: 1.25rem; }
+ .switch.small input:checked ~ .switch-paddle::after {
+ left: 2rem; }
- .switch.large input:checked ~ .switch-paddle::after {
- left: 2.75rem; }
+ .switch.large {
+ height: 2.5rem; }
+ .switch.large .switch-paddle {
+ width: 5rem;
+ height: 2.5rem;
+ font-size: 1rem; }
+ .switch.large .switch-paddle::after {
+ top: 0.25rem;
+ left: 0.25rem;
+ width: 2rem;
+ height: 2rem; }
+ .switch.large input:checked ~ .switch-paddle::after {
+ left: 2.75rem; }
table {
+ border-collapse: collapse;
width: 100%;
margin-bottom: 1rem;
border-radius: 0; }
@@ @@ -3110,27 +4855,36 @@ table {
border: 1px solid #f1f1f1;
background-color: #fefefe; }
table caption {
- font-weight: bold;
- padding: 0.5rem 0.625rem 0.625rem; }
- table thead,
- table tfoot {
+ padding: 0.5rem 0.625rem 0.625rem;
+ font-weight: bold; }
+ table thead {
background: #f8f8f8;
color: #0a0a0a; }
- table thead tr,
- table tfoot tr {
- background: transparent; }
- table thead th,
- table thead td,
- table tfoot th,
- table tfoot td {
- padding: 0.5rem 0.625rem 0.625rem;
- font-weight: bold;
- text-align: left; }
- table tbody tr:nth-child(even) {
- background-color: #f1f1f1; }
+ table tfoot {
+ background: #f1f1f1;
+ color: #0a0a0a; }
+ table thead tr,
+ table tfoot tr {
+ background: transparent; }
+ table thead th,
+ table thead td,
+ table tfoot th,
+ table tfoot td {
+ padding: 0.5rem 0.625rem 0.625rem;
+ font-weight: bold;
+ text-align: left; }
table tbody th,
table tbody td {
padding: 0.5rem 0.625rem 0.625rem; }
+ table tbody tr:nth-child(even) {
+ border-bottom: 0;
+ background-color: #f1f1f1; }
+ table.unstriped tbody {
+ background-color: #fefefe; }
+ table.unstriped tbody tr {
+ border-bottom: 0;
+ border-bottom: 1px solid #f1f1f1;
+ background-color: #fefefe; }
@media screen and (max-width: 63.9375em) {
table.stack thead {
@@ @@ -3149,10 +4903,16 @@ table.scroll {
width: 100%;
overflow-x: auto; }
- table.hover tr:hover {
+ table.hover thead tr:hover {
+ background-color: #f3f3f3; }
+
+ table.hover tfoot tr:hover {
+ background-color: #ececec; }
+
+ table.hover tbody tr:hover {
background-color: #f9f9f9; }
- table.hover tr:nth-of-type(even):hover {
+ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
background-color: #ececec; }
.table-scroll {
@@ @@ -3162,19 +4922,23 @@ table.hover tr:nth-of-type(even):hover {
.tabs {
margin: 0;
- list-style-type: none;
+ border: 1px solid #e6e6e6;
background: #fefefe;
- border: 1px solid #e6e6e6; }
+ list-style-type: none; }
.tabs::before, .tabs::after {
+ display: table;
content: ' ';
- display: table; }
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -ms-flex-order: 1;
+ order: 1; }
.tabs::after {
clear: both; }
.tabs.vertical > li {
- width: auto;
+ display: block;
float: none;
- display: block; }
+ width: auto; }
.tabs.simple > li > a {
padding: 0; }
@@ @@ -3182,29 +4946,33 @@ table.hover tr:nth-of-type(even):hover {
background: transparent; }
.tabs.primary {
- background: #2199e8; }
+ background: #1779ba; }
.tabs.primary > li > a {
color: #fefefe; }
.tabs.primary > li > a:hover, .tabs.primary > li > a:focus {
- background: #1893e4; }
+ background: #1673b1; }
.tabs-title {
float: left; }
.tabs-title > a {
display: block;
padding: 1.25rem 1.5rem;
+ font-size: 0.75rem;
line-height: 1;
- font-size: 0.75rem; }
+ color: #1779ba; }
.tabs-title > a:hover {
- background: #fefefe; }
+ background: #fefefe;
+ color: #1468a0; }
.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
- background: #e6e6e6; }
+ background: #e6e6e6;
+ color: #1779ba; }
.tabs-content {
- background: #fefefe;
- transition: all 0.5s ease;
border: 1px solid #e6e6e6;
- border-top: 0; }
+ border-top: 0;
+ background: #fefefe;
+ color: #0a0a0a;
+ transition: all 0.5s ease; }
.tabs-content.vertical {
border: 1px solid #e6e6e6;
@@ @@ -3217,145 +4985,152 @@ table.hover tr:nth-of-type(even):hover {
display: block; }
.thumbnail {
- border: solid 4px #fefefe;
- box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
display: inline-block;
- line-height: 0;
max-width: 100%;
- transition: box-shadow 200ms ease-out;
+ margin-bottom: 1rem;
+ border: solid 4px #fefefe;
border-radius: 0;
- margin-bottom: 1rem; }
- .thumbnail:hover, .thumbnail:focus {
- box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5); }
+ box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
+ line-height: 0; }
+
+ a.thumbnail {
+ transition: box-shadow 200ms ease-out; }
+ a.thumbnail:hover, a.thumbnail:focus {
+ box-shadow: 0 0 6px 1px rgba(23, 121, 186, 0.5); }
+ a.thumbnail image {
+ box-shadow: none; }
.title-bar {
+ padding: 0.5rem;
background: #0a0a0a;
color: #fefefe;
- padding: 0.5rem; }
- .title-bar::before, .title-bar::after {
- content: ' ';
- display: table; }
- .title-bar::after {
- clear: both; }
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -ms-flex-align: center;
+ align-items: center; }
.title-bar .menu-icon {
margin-left: 0.25rem;
- margin-right: 0.5rem; }
+ margin-right: 0.25rem; }
- .title-bar-left {
- float: left; }
+ .title-bar-left,
+ .title-bar-right {
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px; }
.title-bar-right {
- float: right;
text-align: right; }
.title-bar-title {
- font-weight: bold;
- vertical-align: middle;
- display: inline-block; }
-
- .menu-icon.dark {
- position: relative;
display: inline-block;
vertical-align: middle;
- cursor: pointer;
- width: 20px;
- height: 16px; }
- .menu-icon.dark::after {
- content: '';
- position: absolute;
- display: block;
- width: 100%;
- height: 2px;
- background: #0a0a0a;
- top: 0;
- left: 0;
- box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a; }
- .menu-icon.dark:hover::after {
- background: #8a8a8a;
- box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; }
+ font-weight: bold; }
.has-tip {
- border-bottom: dotted 1px #8a8a8a;
- font-weight: bold;
position: relative;
display: inline-block;
+ border-bottom: dotted 1px #8a8a8a;
+ font-weight: bold;
cursor: help; }
.tooltip {
- background-color: #0a0a0a;
- color: #fefefe;
- font-size: 80%;
- padding: 0.75rem;
position: absolute;
- z-index: 10;
top: calc(100% + 0.6495rem);
- max-width: 10rem !important;
- border-radius: 0; }
+ z-index: 1200;
+ max-width: 10rem;
+ padding: 0.75rem;
+ border-radius: 0;
+ background-color: #0a0a0a;
+ font-size: 80%;
+ color: #fefefe; }
.tooltip::before {
- content: '';
+ position: absolute; }
+ .tooltip.bottom::before {
display: block;
width: 0;
height: 0;
border: inset 0.75rem;
- border-color: transparent transparent #0a0a0a;
- border-bottom-style: solid;
+ content: '';
border-top-width: 0;
- bottom: 100%;
- position: absolute;
+ border-bottom-style: solid;
+ border-color: transparent transparent #0a0a0a;
+ bottom: 100%; }
+ .tooltip.bottom.align-center::before {
left: 50%;
- -webkit-transform: translateX(-50%);
- -ms-transform: translateX(-50%);
- transform: translateX(-50%); }
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%); }
.tooltip.top::before {
- content: '';
display: block;
width: 0;
height: 0;
border: inset 0.75rem;
- border-color: #0a0a0a transparent transparent;
- border-top-style: solid;
+ content: '';
border-bottom-width: 0;
+ border-top-style: solid;
+ border-color: #0a0a0a transparent transparent;
top: 100%;
bottom: auto; }
+ .tooltip.top.align-center::before {
+ left: 50%;
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%); }
.tooltip.left::before {
- content: '';
display: block;
width: 0;
height: 0;
border: inset 0.75rem;
- border-color: transparent transparent transparent #0a0a0a;
- border-left-style: solid;
+ content: '';
border-right-width: 0;
+ border-left-style: solid;
+ border-color: transparent transparent transparent #0a0a0a;
+ left: 100%; }
+ .tooltip.left.align-center::before {
bottom: auto;
- left: 100%;
top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%); }
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%); }
.tooltip.right::before {
- content: '';
display: block;
width: 0;
height: 0;
border: inset 0.75rem;
- border-color: transparent #0a0a0a transparent transparent;
- border-right-style: solid;
+ content: '';
border-left-width: 0;
- bottom: auto;
- left: auto;
+ border-right-style: solid;
+ border-color: transparent #0a0a0a transparent transparent;
right: 100%;
+ left: auto; }
+ .tooltip.right.align-center::before {
+ bottom: auto;
top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%); }
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%); }
+ .tooltip.align-top::before {
+ bottom: auto;
+ top: 10%; }
+ .tooltip.align-bottom::before {
+ bottom: 10%;
+ top: auto; }
+ .tooltip.align-left::before {
+ left: 10%;
+ right: auto; }
+ .tooltip.align-right::before {
+ left: auto;
+ right: 10%; }
.top-bar {
- padding: 0.5rem; }
- .top-bar::before, .top-bar::after {
- content: ' ';
- display: table; }
- .top-bar::after {
- clear: both; }
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0.5rem;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap; }
.top-bar,
.top-bar ul {
background-color: #e6e6e6; }
@@ @@ -3369,29 +5144,49 @@ table.hover tr:nth-of-type(even):hover {
width: auto; }
.top-bar .top-bar-left,
.top-bar .top-bar-right {
- width: 100%; }
- @media screen and (min-width: 40em) {
- .top-bar .top-bar-left,
- .top-bar .top-bar-right {
- width: auto; } }
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%; }
+ @media print, screen and (min-width: 40em) {
+ .top-bar {
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap; }
+ .top-bar .top-bar-left {
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ margin-right: auto; }
+ .top-bar .top-bar-right {
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ margin-left: auto; } }
@media screen and (max-width: 63.9375em) {
- .top-bar.stacked-for-medium .top-bar-left,
- .top-bar.stacked-for-medium .top-bar-right {
- width: 100%; } }
+ .top-bar.stacked-for-medium {
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap; }
+ .top-bar.stacked-for-medium .top-bar-left,
+ .top-bar.stacked-for-medium .top-bar-right {
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%; } }
@media screen and (max-width: 74.9375em) {
- .top-bar.stacked-for-large .top-bar-left,
- .top-bar.stacked-for-large .top-bar-right {
- width: 100%; } }
+ .top-bar.stacked-for-large {
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap; }
+ .top-bar.stacked-for-large .top-bar-left,
+ .top-bar.stacked-for-large .top-bar-right {
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%; } }
.top-bar-title {
- float: left;
- margin-right: 1rem; }
-
- .top-bar-left {
- float: left; }
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin: 0.5rem 1rem 0.5rem 0; }
+ .top-bar-left,
.top-bar-right {
- float: right; }
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto; }
.hide {
display: none !important; }
@@ @@ -3407,7 +5202,7 @@ table.hover tr:nth-of-type(even):hover {
.show-for-small-only {
display: none !important; } }
- @media screen and (min-width: 40em) {
+ @media print, screen and (min-width: 40em) {
.hide-for-medium {
display: none !important; } }
@@ @@ -3423,7 +5218,7 @@ table.hover tr:nth-of-type(even):hover {
.show-for-medium-only {
display: none !important; } }
- @media screen and (min-width: 64em) {
+ @media print, screen and (min-width: 64em) {
.hide-for-large {
display: none !important; } }
@@ @@ -3444,15 +5239,23 @@ table.hover tr:nth-of-type(even):hover {
position: absolute !important;
width: 1px;
height: 1px;
+ padding: 0;
overflow: hidden;
- clip: rect(0, 0, 0, 0); }
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ -webkit-clip-path: inset(50%);
+ clip-path: inset(50%);
+ border: 0; }
.show-on-focus:active, .show-on-focus:focus {
position: static !important;
- height: auto;
width: auto;
+ height: auto;
overflow: visible;
- clip: auto; }
+ clip: auto;
+ white-space: normal;
+ -webkit-clip-path: none;
+ clip-path: none; }
.show-for-landscape,
.hide-for-portrait {
@@ @@ -3486,14 +5289,517 @@ table.hover tr:nth-of-type(even):hover {
.float-center {
display: block;
- margin-left: auto;
- margin-right: auto; }
+ margin-right: auto;
+ margin-left: auto; }
.clearfix::before, .clearfix::after {
+ display: table;
content: ' ';
- display: table; }
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -ms-flex-order: 1;
+ order: 1; }
.clearfix::after {
clear: both; }
- /*# sourceMappingURL=foundation.css.map */
+ .slide-in-down.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: translateY(-100%);
+ transform: translateY(-100%);
+ transition-property: transform, opacity;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
+
+ .slide-in-down.mui-enter.mui-enter-active {
+ -ms-transform: translateY(0);
+ transform: translateY(0); }
+
+ .slide-in-left.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%);
+ transition-property: transform, opacity;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
+
+ .slide-in-left.mui-enter.mui-enter-active {
+ -ms-transform: translateX(0);
+ transform: translateX(0); }
+
+ .slide-in-up.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: translateY(100%);
+ transform: translateY(100%);
+ transition-property: transform, opacity;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
+
+ .slide-in-up.mui-enter.mui-enter-active {
+ -ms-transform: translateY(0);
+ transform: translateY(0); }
+
+ .slide-in-right.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+ transition-property: transform, opacity;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
+
+ .slide-in-right.mui-enter.mui-enter-active {
+ -ms-transform: translateX(0);
+ transform: translateX(0); }
+
+ .slide-out-down.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ transition-property: transform, opacity;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
+
+ .slide-out-down.mui-leave.mui-leave-active {
+ -ms-transform: translateY(100%);
+ transform: translateY(100%); }
+
+ .slide-out-right.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ transition-property: transform, opacity;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
+
+ .slide-out-right.mui-leave.mui-leave-active {
+ -ms-transform: translateX(100%);
+ transform: translateX(100%); }
+
+ .slide-out-up.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ transition-property: transform, opacity;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
+
+ .slide-out-up.mui-leave.mui-leave-active {
+ -ms-transform: translateY(-100%);
+ transform: translateY(-100%); }
+
+ .slide-out-left.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ transition-property: transform, opacity;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
+
+ .slide-out-left.mui-leave.mui-leave-active {
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%); }
+
+ .fade-in.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ opacity: 0;
+ transition-property: opacity; }
+
+ .fade-in.mui-enter.mui-enter-active {
+ opacity: 1; }
+
+ .fade-out.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ opacity: 1;
+ transition-property: opacity; }
+
+ .fade-out.mui-leave.mui-leave-active {
+ opacity: 0; }
+
+ .hinge-in-from-top.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotateX(-90deg);
+ -ms-transform-origin: top;
+ transform-origin: top;
+ transition-property: transform, opacity;
+ opacity: 0; }
+
+ .hinge-in-from-top.mui-enter.mui-enter-active {
+ transform: perspective(2000px) rotate(0deg);
+ opacity: 1; }
+
+ .hinge-in-from-right.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotateY(-90deg);
+ -ms-transform-origin: right;
+ transform-origin: right;
+ transition-property: transform, opacity;
+ opacity: 0; }
+
+ .hinge-in-from-right.mui-enter.mui-enter-active {
+ transform: perspective(2000px) rotate(0deg);
+ opacity: 1; }
+
+ .hinge-in-from-bottom.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotateX(90deg);
+ -ms-transform-origin: bottom;
+ transform-origin: bottom;
+ transition-property: transform, opacity;
+ opacity: 0; }
+
+ .hinge-in-from-bottom.mui-enter.mui-enter-active {
+ transform: perspective(2000px) rotate(0deg);
+ opacity: 1; }
+
+ .hinge-in-from-left.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotateY(90deg);
+ -ms-transform-origin: left;
+ transform-origin: left;
+ transition-property: transform, opacity;
+ opacity: 0; }
+
+ .hinge-in-from-left.mui-enter.mui-enter-active {
+ transform: perspective(2000px) rotate(0deg);
+ opacity: 1; }
+
+ .hinge-in-from-middle-x.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotateX(-90deg);
+ -ms-transform-origin: center;
+ transform-origin: center;
+ transition-property: transform, opacity;
+ opacity: 0; }
+
+ .hinge-in-from-middle-x.mui-enter.mui-enter-active {
+ transform: perspective(2000px) rotate(0deg);
+ opacity: 1; }
+
+ .hinge-in-from-middle-y.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotateY(-90deg);
+ -ms-transform-origin: center;
+ transform-origin: center;
+ transition-property: transform, opacity;
+ opacity: 0; }
+
+ .hinge-in-from-middle-y.mui-enter.mui-enter-active {
+ transform: perspective(2000px) rotate(0deg);
+ opacity: 1; }
+
+ .hinge-out-from-top.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotate(0deg);
+ -ms-transform-origin: top;
+ transform-origin: top;
+ transition-property: transform, opacity;
+ opacity: 1; }
+
+ .hinge-out-from-top.mui-leave.mui-leave-active {
+ transform: perspective(2000px) rotateX(-90deg);
+ opacity: 0; }
+
+ .hinge-out-from-right.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotate(0deg);
+ -ms-transform-origin: right;
+ transform-origin: right;
+ transition-property: transform, opacity;
+ opacity: 1; }
+
+ .hinge-out-from-right.mui-leave.mui-leave-active {
+ transform: perspective(2000px) rotateY(-90deg);
+ opacity: 0; }
+
+ .hinge-out-from-bottom.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotate(0deg);
+ -ms-transform-origin: bottom;
+ transform-origin: bottom;
+ transition-property: transform, opacity;
+ opacity: 1; }
+
+ .hinge-out-from-bottom.mui-leave.mui-leave-active {
+ transform: perspective(2000px) rotateX(90deg);
+ opacity: 0; }
+
+ .hinge-out-from-left.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotate(0deg);
+ -ms-transform-origin: left;
+ transform-origin: left;
+ transition-property: transform, opacity;
+ opacity: 1; }
+
+ .hinge-out-from-left.mui-leave.mui-leave-active {
+ transform: perspective(2000px) rotateY(90deg);
+ opacity: 0; }
+
+ .hinge-out-from-middle-x.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotate(0deg);
+ -ms-transform-origin: center;
+ transform-origin: center;
+ transition-property: transform, opacity;
+ opacity: 1; }
+
+ .hinge-out-from-middle-x.mui-leave.mui-leave-active {
+ transform: perspective(2000px) rotateX(-90deg);
+ opacity: 0; }
+
+ .hinge-out-from-middle-y.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ transform: perspective(2000px) rotate(0deg);
+ -ms-transform-origin: center;
+ transform-origin: center;
+ transition-property: transform, opacity;
+ opacity: 1; }
+
+ .hinge-out-from-middle-y.mui-leave.mui-leave-active {
+ transform: perspective(2000px) rotateY(-90deg);
+ opacity: 0; }
+
+ .scale-in-up.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: scale(0.5);
+ transform: scale(0.5);
+ transition-property: transform, opacity;
+ opacity: 0; }
+
+ .scale-in-up.mui-enter.mui-enter-active {
+ -ms-transform: scale(1);
+ transform: scale(1);
+ opacity: 1; }
+
+ .scale-in-down.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: scale(1.5);
+ transform: scale(1.5);
+ transition-property: transform, opacity;
+ opacity: 0; }
+
+ .scale-in-down.mui-enter.mui-enter-active {
+ -ms-transform: scale(1);
+ transform: scale(1);
+ opacity: 1; }
+
+ .scale-out-up.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: scale(1);
+ transform: scale(1);
+ transition-property: transform, opacity;
+ opacity: 1; }
+
+ .scale-out-up.mui-leave.mui-leave-active {
+ -ms-transform: scale(1.5);
+ transform: scale(1.5);
+ opacity: 0; }
+
+ .scale-out-down.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: scale(1);
+ transform: scale(1);
+ transition-property: transform, opacity;
+ opacity: 1; }
+
+ .scale-out-down.mui-leave.mui-leave-active {
+ -ms-transform: scale(0.5);
+ transform: scale(0.5);
+ opacity: 0; }
+
+ .spin-in.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: rotate(-0.75turn);
+ transform: rotate(-0.75turn);
+ transition-property: transform, opacity;
+ opacity: 0; }
+
+ .spin-in.mui-enter.mui-enter-active {
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1; }
+
+ .spin-out.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ transition-property: transform, opacity;
+ opacity: 1; }
+
+ .spin-out.mui-leave.mui-leave-active {
+ -ms-transform: rotate(0.75turn);
+ transform: rotate(0.75turn);
+ opacity: 0; }
+
+ .spin-in-ccw.mui-enter {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: rotate(0.75turn);
+ transform: rotate(0.75turn);
+ transition-property: transform, opacity;
+ opacity: 0; }
+
+ .spin-in-ccw.mui-enter.mui-enter-active {
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1; }
+
+ .spin-out-ccw.mui-leave {
+ transition-duration: 500ms;
+ transition-timing-function: linear;
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ transition-property: transform, opacity;
+ opacity: 1; }
+
+ .spin-out-ccw.mui-leave.mui-leave-active {
+ -ms-transform: rotate(-0.75turn);
+ transform: rotate(-0.75turn);
+ opacity: 0; }
+
+ .slow {
+ transition-duration: 750ms !important; }
+
+ .fast {
+ transition-duration: 250ms !important; }
+
+ .linear {
+ transition-timing-function: linear !important; }
+
+ .ease {
+ transition-timing-function: ease !important; }
+
+ .ease-in {
+ transition-timing-function: ease-in !important; }
+
+ .ease-out {
+ transition-timing-function: ease-out !important; }
+
+ .ease-in-out {
+ transition-timing-function: ease-in-out !important; }
+
+ .bounce-in {
+ transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }
+
+ .bounce-out {
+ transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }
+
+ .bounce-in-out {
+ transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }
+
+ .short-delay {
+ transition-delay: 300ms !important; }
+
+ .long-delay {
+ transition-delay: 700ms !important; }
+
+ .shake {
+ animation-name: shake-7; }
+
+ @keyframes shake-7 {
+ 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
+ transform: translateX(7%); }
+ 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
+ transform: translateX(-7%); } }
+
+ .spin-cw {
+ animation-name: spin-cw-1turn; }
+
+ @keyframes spin-cw-1turn {
+ 0% {
+ transform: rotate(-1turn); }
+ 100% {
+ transform: rotate(0); } }
+
+ .spin-ccw {
+ animation-name: spin-cw-1turn; }
+
+ @keyframes spin-cw-1turn {
+ 0% {
+ transform: rotate(0); }
+ 100% {
+ transform: rotate(1turn); } }
+
+ .wiggle {
+ animation-name: wiggle-7deg; }
+
+ @keyframes wiggle-7deg {
+ 40%, 50%, 60% {
+ transform: rotate(7deg); }
+ 35%, 45%, 55%, 65% {
+ transform: rotate(-7deg); }
+ 0%, 30%, 70%, 100% {
+ transform: rotate(0); } }
+
+ .shake,
+ .spin-cw,
+ .spin-ccw,
+ .wiggle {
+ animation-duration: 500ms; }
+
+ .infinite {
+ animation-iteration-count: infinite; }
+
+ .slow {
+ animation-duration: 750ms !important; }
+
+ .fast {
+ animation-duration: 250ms !important; }
+
+ .linear {
+ animation-timing-function: linear !important; }
+
+ .ease {
+ animation-timing-function: ease !important; }
+
+ .ease-in {
+ animation-timing-function: ease-in !important; }
+
+ .ease-out {
+ animation-timing-function: ease-out !important; }
+
+ .ease-in-out {
+ animation-timing-function: ease-in-out !important; }
+
+ .bounce-in {
+ animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }
+
+ .bounce-out {
+ animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }
+
+ .bounce-in-out {
+ animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }
+
+ .short-delay {
+ animation-delay: 300ms !important; }
+
+ .long-delay {
+ animation-delay: 700ms !important; }
generators/foundation/public/stylesheets/foundation6/_global.scss +106 -54
@@ @@ -2,41 +2,33 @@
// foundation.zurb.com
// Licensed under MIT Open Source
+ // sass-lint:disable force-attribute-nesting, force-pseudo-nesting, no-color-literals, no-qualifying-elements
+
////
/// @group global
////
- /// Global width of your site. Used by the grid to determine row width.
- /// @type Number
- $global-width: rem-calc(1200) !default;
-
/// Font size attribute applied to `<html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings.
/// @type Number
$global-font-size: 100% !default;
+ /// Global width of your site. Used by the grid to determine row width.
+ /// @type Number
+ $global-width: rem-calc(1200) !default;
+
/// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px
/// @type Number
$global-lineheight: 1.5 !default;
- /// Primary color for interactive components like links and buttons.
- /// @type Color
- $primary-color: #2199e8 !default;
-
- /// Secondary color, used with components that support the `.secondary` class.
- /// @type Color
- $secondary-color: #777 !default;
-
- /// Color to indicate a positive status or action, used with the `.success` class.
- /// @type Color
- $success-color: #3adb76 !default;
-
- /// Color to indicate a caution status or action, used with the `.warning` class.
- /// @type Color
- $warning-color: #ffae00 !default;
-
- /// Color to indicate a negative status or action, used with the `.alert` class.
- /// @type Color
- $alert-color: #ec5840 !default;
+ /// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
+ /// @type Map
+ $foundation-palette: (
+ primary: #1779ba,
+ secondary: #767676,
+ success: #3adb76,
+ warning: #ffae00,
+ alert: #cc4b37,
+ ) !default;
/// Color used for light gray UI items.
/// @type Color
@@ @@ -68,16 +60,12 @@ $body-font-color: $black !default;
/// Font stack of the body.
/// @type List
- $body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
+ $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;
/// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.
/// @type Boolean
$body-antialiased: true !default;
- /// Text direction for the document. Set to `rtl` to reverse the orientation and direction of all components.
- /// @type Keyword
- $text-direction: ltr !default;
-
/// Global value used for margin on components.
/// @type Number
$global-margin: 1rem !default;
@@ @@ -86,9 +74,9 @@ $global-margin: 1rem !default;
/// @type Number
$global-padding: 1rem !default;
- /// Global value used for margin between components.
+ /// Global value used for positioning on components.
/// @type Number
- $global-margin: 1rem !default;
+ $global-position: 1rem !default;
/// Global font weight used for normal type.
/// @type Keyword | Number
@@ @@ -102,45 +90,79 @@ $global-weight-bold: bold !default;
/// @type Number
$global-radius: 0 !default;
+ /// Global value used for all menu styles. Can be overwritten at individual menu component level.
+ /// @type Number
+ $global-menu-padding: 0.7rem 1rem !default;
+
+ /// Global value used for all menu styles. Nested margin for submenu.
+ $global-menu-nested-margin: 1rem !default;
+
/// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
+ /// @type Keyword
$global-text-direction: ltr !default;
+ /// Enables flexbox for components that support it.
+ /// @type Boolean
+ $global-flexbox: true !default;
+
+ /// Enabled responsive breakpoints for prototypes if applicable
+ /// @type Boolean
+ $global-prototype-breakpoints: false !default;
+
+ /// Button cursor's value, `auto` by default
+ /// @type Keyword
+ $global-button-cursor: auto !default;
+
+ @if not map-has-key($foundation-palette, primary) {
+ @error 'In $foundation-palette, you must have a color named "primary".';
+ }
+
// Internal variables used for text direction
$global-left: if($global-text-direction == rtl, right, left);
$global-right: if($global-text-direction == rtl, left, right);
- // Internal map used to iterate through colors, to generate CSS classes with less code
- $foundation-colors: (
- primary: $primary-color,
- secondary: $secondary-color,
- success: $success-color,
- alert: $alert-color,
- warning: $warning-color,
- );
+ /// Global tolerance for color pick contrast.
+ /// @type Number
+ $global-color-pick-contrast-tolerance: 0 !default;
+
+ // Internal variables used for colors
+ $primary-color: get-color(primary);
+ $secondary-color: get-color(secondary);
+ $success-color: get-color(success);
+ $warning-color: get-color(warning);
+ $alert-color: get-color(alert);
@mixin foundation-global-styles {
- html,
- body {
- font-size: $global-font-size;
+ @include -zf-normalize;
+
+ // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
+ .foundation-mq {
+ font-family: '#{-zf-bp-serialize($breakpoints)}';
+ }
+
+ html {
box-sizing: border-box;
+ font-size: $global-font-size;
}
// Set box-sizing globally to handle padding and border widths
*,
- *:before,
- *:after {
+ *::before,
+ *::after {
box-sizing: inherit;
}
// Default body styles
body {
- padding: 0;
margin: 0;
+ padding: 0;
+
+ background: $body-background;
+
font-family: $body-font-family;
font-weight: $global-weight-normal;
line-height: $global-lineheight;
color: $body-font-color;
- background: $body-background;
@if ($body-antialiased) {
-webkit-font-smoothing: antialiased;
@@ @@ -149,14 +171,14 @@ $foundation-colors: (
}
img {
+ // Get rid of gap under images by making them display: inline-block; by default
+ display: inline-block;
+ vertical-align: middle;
+
// Grid defaults to get images and embeds to work properly
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
-
- // Get rid of gap under images by making them display: inline-block; by default
- display: inline-block;
- vertical-align: middle;
}
// Make sure textarea takes on height automatically
@@ @@ -168,13 +190,13 @@ $foundation-colors: (
// Make select elements are 100% width by default
select {
+ box-sizing: border-box;
width: 100%;
border-radius: $global-radius;
}
// Styles Google Maps and MapQuest embeds properly
- // scss-lint:disable IdSelector
- #map_canvas,
+ // sass-lint:disable-line no-ids
.map_canvas,
.mqa-display {
img,
@@ @@ -186,12 +208,42 @@ $foundation-colors: (
// Reset <button> styles created by most browsers
button {
- -webkit-appearance: none;
- -moz-appearance: none;
- background: transparent;
+ @include disable-mouse-outline;
padding: 0;
+ appearance: none;
border: 0;
border-radius: $global-radius;
+ background: transparent;
line-height: 1;
+ cursor: $global-button-cursor;
+ }
+
+ // Prevent text overflow on pre
+ pre {
+ overflow: auto;
}
+
+ // Make reset inherit font-family instead of settings sans-serif
+ button,
+ input,
+ optgroup,
+ select,
+ textarea {
+ font-family: inherit;
+ }
+
+ // Internal classes to show/hide elements in JavaScript
+ .is-visible {
+ display: block !important;
+ }
+
+ .is-hidden {
+ display: none !important;
+ }
+ }
+
+ /// Loads normalize.css.
+ /// @access private
+ @mixin -zf-normalize {
+ @include normalize();
}
generators/foundation/public/stylesheets/foundation6/components/_accordion-menu.scss +157 -14
@@ @@ -2,27 +2,170 @@
/// @group accordion-menu
////
+ /// Sets accordion menu padding.
+ /// @type Number
+ $accordionmenu-padding: $global-menu-padding !default;
+
+ /// Sets accordion menu nested margin
+ /// @type Number
+ $accordionmenu-nested-margin: $global-menu-nested-margin !default;
+
+ /// Sets accordion menu submenu padding.
+ /// @type Number
+ $accordionmenu-submenu-padding: $accordionmenu-padding !default;
+
/// Sets if accordion menus have the default arrow styles.
/// @type Boolean
- $accordionmenu-arrows: true;
+ $accordionmenu-arrows: true !default;
+
+ /// Sets accordion menu arrow color if arrow is used.
+ /// @type Color
+ $accordionmenu-arrow-color: $primary-color !default;
+
+ /// Sets accordion menu item padding.
+ /// @type Color
+ $accordionmenu-item-background: null !default;
+
+ /// Sets accordion menu item border.
+ /// @type Color
+ $accordionmenu-border: null !default;
+
+ /// Sets accordion menu item padding.
+ /// @type Color
+ $accordionmenu-submenu-toggle-background: null !default;
+ /// Sets accordion menu item padding.
+ /// @type List
+ $accordion-submenu-toggle-border: $accordionmenu-border !default;
+
+ /// Sets accordion menu submenu toggle background width.
+ /// @type Number
+ $accordionmenu-submenu-toggle-width: 40px !default;
+
+ /// Sets accordion menu submenu toggle background height.
+ /// @type Number
+ $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width !default;
+
+ /// Sets accordion menu arrow size if arrow is used.
+ /// @type Length
+ $accordionmenu-arrow-size: 6px !default;
+
+ @mixin zf-accordion-menu-left-right-arrows {
+ .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
+ position: relative;
+
+ &::after {
+ @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
+ position: absolute;
+ top: 50%;
+ margin-top: -1 * ($accordionmenu-arrow-size / 2);
+ #{$global-right}: 1rem;
+ }
+ }
+ &.align-left .is-accordion-submenu-parent > a::after {
+ left: auto;
+ right: 1rem;
+ }
+ &.align-right .is-accordion-submenu-parent > a::after {
+ right: auto;
+ left: 1rem;
+ }
+ }
@mixin foundation-accordion-menu {
- @if $accordionmenu-arrows {
- .is-accordion-submenu-parent > a {
- position: relative;
-
- &::after {
- @include css-triangle(6px, $primary-color, down);
- position: absolute;
- top: 50%;
- margin-top: -4px;
- right: 1rem;
+
+ .accordion-menu {
+ @if $accordionmenu-border {
+ border-bottom: $accordionmenu-border;
+ }
+
+ li {
+ @if $accordionmenu-border {
+ border-top: $accordionmenu-border;
+ border-right: $accordionmenu-border;
+ border-left: $accordionmenu-border;
}
+ width: 100%;
}
- .is-accordion-submenu-parent[aria-expanded="true"] > a::after {
- transform-origin: 50% 50%;
- transform: scaleY(-1);
+ a {
+ @if $accordionmenu-item-background {
+ background: $accordionmenu-item-background;
+ }
+ padding: $accordionmenu-padding;
+ }
+
+ .is-accordion-submenu a {
+ padding: $accordionmenu-submenu-padding;
+ }
+
+ .nested.is-accordion-submenu {
+ @include menu-nested($accordionmenu-nested-margin);
}
+
+ &.align-#{$global-right} {
+ .nested.is-accordion-submenu {
+ @include menu-nested($accordionmenu-nested-margin, right);
+ }
+ }
+
+ @if $accordionmenu-arrows {
+ @include zf-accordion-menu-left-right-arrows;
+
+ .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+ transform: rotate(180deg);
+ transform-origin: 50% 50%;
+ }
+ }
+ }
+
+ .is-accordion-submenu li {
+ @if $accordionmenu-border {
+ border-right: 0;
+ border-left: 0;
+ }
+ }
+
+ .is-accordion-submenu-parent {
+ position: relative;
+ }
+
+ .has-submenu-toggle > a {
+ margin-#{$global-right}: $accordionmenu-submenu-toggle-width;
+ }
+
+ // Submenu toggle
+ .submenu-toggle {
+ position: absolute;
+ top: 0;
+ #{$global-right}: 0;
+ cursor: pointer;
+
+ width: $accordionmenu-submenu-toggle-width;
+ height: $accordionmenu-submenu-toggle-height;
+
+ border-#{$global-left}: $accordion-submenu-toggle-border;
+
+ @if $accordionmenu-submenu-toggle-background {
+ background: $accordionmenu-submenu-toggle-background;
+ }
+
+ // Add the arrow to the toggle
+ &::after {
+ @include css-triangle(6px, $accordionmenu-arrow-color, down);
+
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ }
+ }
+
+ // Rotate the arrow when menu is open
+ .submenu-toggle[aria-expanded='true']::after {
+ transform: scaleY(-1);
+ transform-origin: 50% 50%;
+ }
+
+ .submenu-toggle-text {
+ @include element-invisible;
}
}
generators/foundation/public/stylesheets/foundation6/components/_accordion.scss +71 -28
@@ @@ -8,15 +8,19 @@
/// Default background color of an accordion group.
/// @type Color
- $accordion-background: $white;
+ $accordion-background: $white !default;
/// If `true`, adds plus and minus icons to the side of each accordion title.
/// @type Boolean
- $accordion-plusminus: true;
+ $accordion-plusminus: true !default;
+
+ /// Font size of accordion titles.
+ /// @type Number
+ $accordion-title-font-size: rem-calc(12) !default;
/// Default text color for items in a Menu.
/// @type Color
- $accordion-item-color: foreground($accordion-background, $primary-color);
+ $accordion-item-color: $primary-color !default;
/// Default background color on hover for items in a Menu.
/// @type Color
@@ @@ -36,61 +40,100 @@ $accordion-content-border: 1px solid $light-gray !default;
/// Default text color of tab content.
/// @type Color
- $accordion-content-color: foreground($accordion-background, $primary-color);
+ $accordion-content-color: $body-font-color !default;
/// Default padding for tab content.
/// @type Number | List
$accordion-content-padding: 1rem !default;
/// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
- @mixin accordion-container {
- list-style-type: none;
- background: $accordion-background;
- border: $accordion-content-border;
- border-radius: $global-radius;
+ @mixin accordion-container (
+ $background: $accordion-background
+ ) {
margin-#{$global-left}: 0;
+ background: $background;
+ list-style-type: none;
+ &[disabled] {
+ .accordion-title {
+ cursor: not-allowed;
+ }
+ }
+ }
+
+ /// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
+ @mixin accordion-item {
+ &:first-child > :first-child {
+ border-radius: $global-radius $global-radius 0 0;
+ }
+
+ &:last-child > :last-child {
+ border-radius: 0 0 $global-radius $global-radius;
+ }
}
/// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
- @mixin accordion-title {
+ @mixin accordion-title (
+ $padding: $accordion-item-padding,
+ $font-size: $accordion-title-font-size,
+ $color: $accordion-item-color,
+ $border: $accordion-content-border,
+ $background-hover: $accordion-item-background-hover
+ ) {
+ position: relative;
display: block;
- padding: $accordion-item-padding;
+ padding: $padding;
+
+ border: $border;
+ border-bottom: 0;
+
+ font-size: $font-size;
line-height: 1;
- font-size: rem-calc(12);
- color: $accordion-item-color;
- position: relative;
- border-bottom: $accordion-content-border;
+ color: $color;
- &:hover,
- &:focus {
- background-color: $accordion-item-background-hover;
+ :last-child:not(.is-active) > & {
+ border-bottom: $border;
+ border-radius: 0 0 $global-radius $global-radius;
}
- // Remove the border on the last title
- :last-child > & {
- border-bottom-width: 0;
+ &:hover,
+ &:focus {
+ background-color: $background-hover;
}
@if $accordion-plusminus {
&::before {
- content: '+';
position: absolute;
- #{$global-right}: 1rem;
top: 50%;
+ #{$global-right}: 1rem;
margin-top: -0.5rem;
+ content: '+';
}
.is-active > &::before {
- content: '–';
+ content: '\2013';
}
}
}
/// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
- @mixin accordion-content {
- padding: $accordion-item-padding;
+ @mixin accordion-content (
+ $padding: $accordion-content-padding,
+ $border: $accordion-content-border,
+ $background: $accordion-content-background,
+ $color: $accordion-content-color
+ ) {
display: none;
- border-bottom: $accordion-content-border;
+ padding: $padding;
+
+ border: $border;
+ border-bottom: 0;
+ background-color: $background;
+
+ color: $color;
+
+ :last-child > &:last-child {
+ border-bottom: $border;
+ }
}
@mixin foundation-accordion {
@@ @@ -99,7 +142,7 @@ $accordion-content-padding: 1rem !default;
}
.accordion-item {
- // This class doesn't need styles!
+ @include accordion-item;
}
.accordion-title {
generators/foundation/public/stylesheets/foundation6/components/_badge.scss +17 -9
@@ @@ -12,7 +12,15 @@ $badge-background: $primary-color !default;
/// Default text color for badges.
/// @type Color
- $badge-color: foreground($badge-background) !default;
+ $badge-color: $white !default;
+
+ /// Alternate text color for badges.
+ /// @type Color
+ $badge-color-alt: $black !default;
+
+ /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+ /// @type Map
+ $badge-palette: $foundation-palette !default;
/// Default padding inside badges.
/// @type Number
@@ @@ -29,11 +37,13 @@ $badge-font-size: 0.6rem !default;
/// Generates the base styles for a badge.
@mixin badge {
display: inline-block;
- padding: $badge-padding;
min-width: $badge-minwidth;
+ padding: $badge-padding;
+
+ border-radius: 50%;
+
font-size: $badge-font-size;
text-align: center;
- border-radius: 50%;
}
@mixin foundation-badge {
@@ @@ -43,12 +53,10 @@ $badge-font-size: 0.6rem !default;
background: $badge-background;
color: $badge-color;
- @each $name, $color in $foundation-colors {
- @if $name != primary {
- &.#{$name} {
- background: $color;
- color: foreground($color);
- }
+ @each $name, $color in $badge-palette {
+ &.#{$name} {
+ background: $color;
+ color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
}
}
}
generators/foundation/public/stylesheets/foundation6/components/_breadcrumbs.scss +33 -10
@@ @@ -34,38 +34,60 @@ $breadcrumbs-item-margin: 0.75rem !default;
/// @type Boolean
$breadcrumbs-item-uppercase: true !default;
- /// If `true`, adds a slash between breadcrumb links.
+ /// If `true`, adds a seperator between breadcrumb links.
/// @type Boolean
- $breadcrumbs-item-slash: true !default;
+ $breadcrumbs-item-separator: true !default;
+
+ // If it exists $breadcrumbs-item-slash is used to build $breadcrumbs-item-separator. See the documentation.
+ @if variable-exists(breadcrumbs-item-slash) {
+ $breadcrumbs-item-separator: $breadcrumbs-item-slash;
+ }
+
+ /// Used character for the breadcrumb separator.
+ /// @type Content
+ $breadcrumbs-item-separator-item: '/' !default;
+
+ /// Used character for the breadcrumb separator in rtl mode.
+ /// @type Content
+ $breadcrumbs-item-separator-item-rtl: '\\' !default;
+
+ /// Color of breadcrumb item.
+ /// @type Color
+ $breadcrumbs-item-separator-color: $medium-gray !default;
+
+ // If it exists $breadcrumbs-item-slash-color is used to build $breadcrumbs-item-separator-color. See the documentation.
+ @if variable-exists(breadcrumbs-item-slash-color) {
+ $breadcrumbs-item-separator-color: $breadcrumbs-item-slash-color;
+ }
/// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
@mixin breadcrumbs-container {
@include clearfix;
- list-style: none;
margin: $breadcrumbs-margin;
+ list-style: none;
// Item wrapper
li {
float: #{$global-left};
- color: $breadcrumbs-item-color-current;
+
font-size: $breadcrumbs-item-font-size;
+ color: $breadcrumbs-item-color-current;
cursor: default;
@if $breadcrumbs-item-uppercase {
text-transform: uppercase;
}
- @if $breadcrumbs-item-slash {
+ @if $breadcrumbs-item-separator {
// Need to escape the backslash
- $slash: if($global-text-direction == 'ltr', '/', '\\');
+ $separator: if($global-text-direction == 'ltr', $breadcrumbs-item-separator-item, $breadcrumbs-item-separator-item-rtl);
&:not(:last-child)::after {
- color: $medium-gray;
- content: $slash;
- margin: 0 $breadcrumbs-item-margin;
position: relative;
- top: 1px;
+ margin: 0 $breadcrumbs-item-margin;
opacity: 1;
+ content: $separator;
+ color: $breadcrumbs-item-separator-color;
}
}
@else {
@@ @@ -89,6 +111,7 @@ $breadcrumbs-item-slash: true !default;
.disabled {
color: $breadcrumbs-item-color-disabled;
+ cursor: not-allowed;
}
}
}
generators/foundation/public/stylesheets/foundation6/components/_button-group.scss +168 -30
@@ @@ -8,53 +8,115 @@
/// Margin for button groups.
/// @type Number
- $buttongroup-margin: 1rem;
+ $buttongroup-margin: 1rem !default;
/// Margin between buttons in a button group.
- /// @type Border
- $buttongroup-spacing: 1px;
+ /// @type Number
+ $buttongroup-spacing: 1px !default;
/// Selector for the buttons inside a button group.
/// @type String
- $buttongroup-child-selector: '.button';
+ $buttongroup-child-selector: '.button' !default;
/// Maximum number of buttons that can be in an even-width button group.
/// @type Number
- $buttongroup-expand-max: 6;
+ $buttongroup-expand-max: 6 !default;
+
+ /// Determines if $button-radius is applied to each button or the button group as a whole. Use $global-radius in _settings.scss to change radius.
+ /// @type Boolean
+ $buttongroup-radius-on-each: true !default;
/// Add styles for a button group container.
/// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+ /// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
@mixin button-group(
- $child-selector: $buttongroup-child-selector
+ $child-selector: $buttongroup-child-selector,
+ $spacing: $buttongroup-spacing
) {
@include clearfix;
margin-bottom: $buttongroup-margin;
- font-size: map-get($button-sizes, default);
+
+ @if $global-flexbox {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: stretch;
+ }
+ @else {
+ font-size: 0;
+ }
#{$child-selector} {
- float: #{$global-left};
margin: 0;
- font-size: inherit;
+ margin-#{$global-right}: $spacing;
+ margin-bottom: $spacing;
+ font-size: map-get($button-sizes, default);
+
+ @if $global-flexbox {
+ flex: 0 0 auto;
+ }
- &:not(:last-child) {
- border-#{$global-right}: $buttongroup-spacing solid $body-background;
+ &:last-child {
+ margin-#{$global-right}: 0;
}
+
+ @if not $buttongroup-radius-on-each {
+ border-radius: 0;
+
+ &:first-child {
+ border-top-#{$global-left}-radius: $button-radius;
+ border-bottom-#{$global-left}-radius: $button-radius;
+ }
+
+ &:last-child {
+ border-top-#{$global-right}-radius: $button-radius;
+ border-bottom-#{$global-right}-radius: $button-radius;
+ }
+ }
+
}
}
/// Creates a full-width button group, making each button equal width.
- /// @param {Keyword|Number} $count [auto] - Number of buttons inside the button group. Set to `auto` to generate CSS that will account for a variable number of buttons.
/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+ /// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
@mixin button-group-expand(
- $count: auto,
- $selector: $buttongroup-child-selector
+ $selector: $buttongroup-child-selector,
+ $spacing: $buttongroup-spacing,
+ $count: null
) {
+ @if not $global-flexbox {
+ margin-#{$global-right}: -$spacing;
+
+ &::before,
+ &::after {
+ display: none;
+ }
+ }
+
#{$selector} {
- @if $count == auto {
- @include auto-width($buttongroup-expand-max, $selector);
+ @if $global-flexbox {
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
}
- @else if type-of($count) == 'number' {
- width: percentage(1 / $count);
+ @else {
+ // One child
+ &:first-child:last-child {
+ width: 100%;
+ }
+
+ // Two or more childreen
+ @for $i from 2 through $buttongroup-expand-max {
+ &:first-child:nth-last-child(#{$i}) {
+ &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
+ display: inline-block;
+ width: calc(#{percentage(1 / $i)} - #{$spacing});
+ margin-#{$global-right}: $spacing;
+
+ &:last-child {
+ margin-#{$global-right}: $spacing * -$buttongroup-expand-max;
+ }
+ }
+ }
+ }
}
}
}
@@ @@ -64,9 +126,38 @@ $buttongroup-expand-max: 6;
@mixin button-group-stack(
$selector: $buttongroup-child-selector
) {
+ @if $global-flexbox {
+ flex-wrap: wrap;
+ }
+
#{$selector} {
- width: 100%;
- border-#{$global-right}: 0;
+ @if $global-flexbox {
+ flex: 0 0 100%;
+ }
+ @else {
+ width: 100%;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+
+ @if not $buttongroup-radius-on-each {
+ border-radius: 0;
+
+ &:first-child{
+ border-top-#{$global-left}-radius: $global-radius;
+ border-top-#{$global-right}-radius: $global-radius;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ border-bottom-#{$global-left}-radius: $global-radius;
+ border-bottom-#{$global-right}-radius: $global-radius;
+ }
+ }
+
}
}
@@ @@ -76,11 +167,28 @@ $buttongroup-expand-max: 6;
$selector: $buttongroup-child-selector
) {
#{$selector} {
- width: auto;
+ @if $global-flexbox {
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
+ }
+ @else {
+ width: auto;
+ }
+ margin-bottom: 0;
- &:not(:last-child) {
- border-#{$global-right}: $buttongroup-spacing solid $body-background;
+ @if not $buttongroup-radius-on-each {
+ &:first-child {
+ border-top-#{$global-left}-radius: $global-radius;
+ border-top-#{$global-right}-radius: 0;
+ border-bottom-#{$global-left}-radius: $global-radius;
+ }
+
+ &:last-child {
+ border-top-#{$global-right}-radius: $global-radius;
+ border-bottom-#{$global-right}-radius: $global-radius;
+ border-bottom-#{$global-left}-radius: 0;
+ }
}
+
}
}
@@ @@ -89,20 +197,33 @@ $buttongroup-expand-max: 6;
@include button-group;
// Sizes
- &.tiny { font-size: map-get($button-sizes, tiny); }
- &.small { font-size: map-get($button-sizes, small); }
- &.large { font-size: map-get($button-sizes, large); }
+ @each $size, $value in map-remove($button-sizes, default) {
+ &.#{$size} #{$buttongroup-child-selector} {
+ font-size: $value;
+ }
+ }
+
+ // Even-width Group
&.expanded { @include button-group-expand; }
// Colors
- @each $name, $color in $foundation-colors {
- &.#{$name} #{$buttongroup-child-selector} {
- @include button-style($color, auto, auto);
+ @each $name, $color in $foundation-palette {
+ @if $button-fill != hollow {
+ &.#{$name} #{$buttongroup-child-selector} {
+ @include button-style($color, auto, auto);
+ }
+ }
+ @else {
+ &.#{$name} #{$buttongroup-child-selector} {
+ @include button-hollow;
+ @include button-hollow-style($color);
+ }
}
}
&.stacked,
- &.stacked-for-small {
+ &.stacked-for-small,
+ &.stacked-for-medium {
@include button-group-stack;
}
@@ @@ -111,5 +232,22 @@ $buttongroup-expand-max: 6;
@include button-group-unstack;
}
}
+
+ &.stacked-for-medium {
+ @include breakpoint(large) {
+ @include button-group-unstack;
+ }
+ }
+
+ &.stacked-for-small.expanded { // sass-lint:disable-line force-element-nesting
+ @include breakpoint(small only) {
+ display: block;
+
+ #{$buttongroup-child-selector} {
+ display: block;
+ margin-#{$global-right}: 0;
+ }
+ }
+ }
}
}
generators/foundation/public/stylesheets/foundation6/components/_button.scss +165 -44
@@ @@ -6,13 +6,17 @@
/// @group button
////
+ /// Font family for button elements.
+ /// @type Font
+ $button-font-family: inherit !default;
+
/// Padding inside buttons.
/// @type List
$button-padding: 0.85em 1em !default;
/// Margin around buttons.
/// @type List
- $button-margin: 0 $global-margin $global-margin 0 !default;
+ $button-margin: 0 0 $global-margin 0 !default;
/// Default fill for buttons. Can either be `solid` or `hollow`.
/// @type Keyword
@@ @@ -28,16 +32,20 @@ $button-background-hover: scale-color($button-background, $lightness: -15%) !def
/// Font color for buttons.
/// @type List
- $button-color: #fff !default;
+ $button-color: $white !default;
- /// Font color for buttons, if the background is light.
+ /// Alternative font color for buttons.
/// @type List
- $button-color-alt: #000 !default;
+ $button-color-alt: $black !default;
/// Border radius for buttons, defaulted to global-radius.
/// @type Number
$button-radius: $global-radius !default;
+ /// Border width for hollow outline buttons
+ /// @type Number
+ $button-hollow-border-width: 1px !default;
+
/// Sizes for buttons.
/// @type Map
$button-sizes: (
@@ @@ -47,30 +55,59 @@ $button-sizes: (
large: 1.25rem,
) !default;
+ /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+ /// @type Map
+ $button-palette: $foundation-palette !default;
+
/// opacity for a disabled button.
/// @type List
$button-opacity-disabled: 0.25 !default;
+ /// Background color lightness on hover for buttons.
+ /// @type Number
+ $button-background-hover-lightness: -20% !default;
+
+ /// Color lightness on hover for hollow buttons.
+ /// @type Number
+ $button-hollow-hover-lightness: -50% !default;
+
// Internal: flip from margin-right to margin-left for defaults
@if $global-text-direction == 'rtl' {
- $button-margin: 0 0 $global-margin $global-margin;
+ $button-margin: 0 0 $global-margin $global-margin !default;
}
+ /// transitions for buttons.
+ /// @type List
+ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;
+
// TODO: Document button-base() mixin
@mixin button-base {
@include disable-mouse-outline;
display: inline-block;
- text-align: center;
- line-height: 1;
- cursor: pointer;
- -webkit-appearance: none;
- transition: all 0.25s ease-out;
vertical-align: middle;
+ margin: $button-margin;
+ font-family: $button-font-family;
+
+ @if (type-of($button-padding) == 'map') {
+ @each $size, $padding in $button-padding {
+ @include breakpoint($size) {
+ padding: $padding;
+ }
+ }
+ }
+ @else {
+ padding: $button-padding;
+ }
+
+ -webkit-appearance: none;
border: 1px solid transparent;
border-radius: $button-radius;
- padding: $button-padding;
- margin: $button-margin;
+ transition: $button-transition;
+
font-size: map-get($button-sizes, default);
+ line-height: 1;
+ text-align: center;
+ cursor: pointer;
}
/// Expands a button to make it full-width.
@@ @@ -79,8 +116,8 @@ $button-opacity-disabled: 0.25 !default;
@if $expand {
display: block;
width: 100%;
- margin-left: 0;
margin-right: 0;
+ margin-left: 0;
}
@else {
display: inline-block;
@@ @@ -96,28 +133,22 @@ $button-opacity-disabled: 0.25 !default;
@mixin button-style(
$background: $button-background,
$background-hover: $button-background-hover,
- $color: $button-color
+ $color: $button-color,
+ $background-hover-lightness: $button-background-hover-lightness
) {
@if $color == auto {
- $color: isitlight($background);
+ $color: color-pick-contrast($background, ($button-color, $button-color-alt));
}
@if $background-hover == auto {
- $background-hover: scale-color($background, $lightness: -20%);
+ $background-hover: scale-color($background, $lightness: $background-hover-lightness);
}
- @if lightness($background) >= 70% {
- $color: $button-color-alt;
- }
- @else {
- $color: $button-color;
- }
-
- background: $background;
+ background-color: $background;
color: $color;
&:hover, &:focus {
- background: $background-hover;
+ background-color: $background-hover;
color: $color;
}
}
@@ @@ -126,27 +157,57 @@ $button-opacity-disabled: 0.25 !default;
@mixin button-hollow {
&,
&:hover, &:focus {
- background: transparent;
+ background-color: transparent;
+ }
+
+ &.disabled,
+ &[disabled] {
+ &,
+ &:hover, &:focus {
+ background-color: transparent;
+ }
}
}
- @mixin button-hollow-style($color: $primary-color) {
- $color-hover: scale-color($color, $lightness: -50%);
+ @mixin button-hollow-style(
+ $color: $button-background,
+ $hover-lightness: $button-hollow-hover-lightness,
+ $border-width: $button-hollow-border-width
+ ) {
+ $color-hover: scale-color($color, $lightness: $hover-lightness);
- border: 1px solid $color;
+ border: $border-width solid $color;
color: $color;
&:hover, &:focus {
border-color: $color-hover;
color: $color-hover;
+ &.disabled,
+ &[disabled] {
+ border: $border-width solid $color;
+ color: $color;
+ }
}
}
/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
- @mixin button-disabled {
+ /// @param [Color] $background [$button-background] - Background color of the disabled button.
+ /// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
+ @mixin button-disabled(
+ $background: $button-background,
+ $color: $button-color
+ ) {
+ @if $color == auto {
+ $color: color-pick-contrast($background, ($button-color, $button-color-alt));
+ }
+
opacity: $button-opacity-disabled;
cursor: not-allowed;
- pointer-events: none;
+
+ &, &:hover, &:focus {
+ background-color: $background;
+ color: $color;
+ }
}
/// Adds a dropdown arrow to a button.
@@ @@ -162,9 +223,10 @@ $button-opacity-disabled: 0.25 !default;
@include css-triangle($size, $color, down);
position: relative;
top: 0.4em; // Aligns the arrow with the text of the button
- float: #{$global-right};
- margin-#{$global-left}: get-side($button-padding, right);
+
display: inline-block;
+ float: #{$global-right};
+ margin-#{$global-left}: $offset;
}
}
@@ @@ -201,16 +263,19 @@ $button-opacity-disabled: 0.25 !default;
@include button;
// Sizes
- &.tiny { font-size: map-get($button-sizes, tiny); }
- &.small { font-size: map-get($button-sizes, small); }
- &.large { font-size: map-get($button-sizes, large); }
+ @each $size, $value in map-remove($button-sizes, default) {
+ &.#{$size} {
+ font-size: $value;
+ }
+ }
+
&.expanded { @include button-expand; }
// Colors
- @each $name, $color in $foundation-colors {
+ @each $name, $color in $button-palette {
@if $button-fill != hollow {
&.#{$name} {
- @include button-style($color, auto);
+ @include button-style($color, auto, auto);
}
}
@else {
@@ @@ -224,13 +289,25 @@ $button-opacity-disabled: 0.25 !default;
}
}
+ // Disabled style
+ &.disabled,
+ &[disabled] {
+ @include button-disabled;
+
+ @each $name, $color in $button-palette {
+ &.#{$name} {
+ @include button-disabled($color, auto);
+ }
+ }
+ }
+
// Hollow style
@if $button-fill != hollow {
&.hollow {
@include button-hollow;
@include button-hollow-style;
- @each $name, $color in $foundation-colors {
+ @each $name, $color in $button-palette {
&.#{$name} {
@include button-hollow-style($color);
}
@@ @@ -238,9 +315,33 @@ $button-opacity-disabled: 0.25 !default;
}
}
- // Disabled style
- &.disabled {
- @include button-disabled;
+ // Clear style
+ @if $button-fill != clear {
+ &.clear {
+ @include button-hollow;
+ @include button-hollow-style;
+
+ &, &:hover, &:focus {
+ &, &.disabled, &[disabled] {
+ border-color: transparent;
+ }
+ }
+
+ @each $name, $color in $button-palette {
+ &.#{$name} {
+ @include button-hollow-style($color);
+
+ &, &:hover,
+ &:focus {
+ &,
+ &.disabled,
+ &[disabled] {
+ border-color: transparent;
+ }
+ }
+ }
+ }
+ }
}
// Dropdown arrow
@@ @@ -252,13 +353,33 @@ $button-opacity-disabled: 0.25 !default;
border-top-color: $button-background;
}
}
+
+ &.hollow {
+ &::after {
+ border-top-color: $button-background;
+ }
+
+ @each $name, $color in $button-palette {
+ &.#{$name} {
+ &::after {
+ border-top-color: $color;
+ }
+ }
+ }
+ }
}
// Button with dropdown arrow only
&.arrow-only::after {
- margin-#{$global-left}: 0;
+ top: -0.1em;
float: none;
- top: 0.2em;
+ margin-#{$global-left}: 0;
+ }
+ }
+ a.button {
+ &:hover,
+ &:focus {
+ text-decoration: none;
}
}
}
generators/foundation/public/stylesheets/foundation6/components/_callout.scss +9 -18
@@ @@ -6,7 +6,7 @@
/// @group callout
////
- /// Defualt background color.
+ /// Default background color.
/// @type Color
$callout-background: $white !default;
@@ @@ -14,7 +14,7 @@ $callout-background: $white !default;
/// @type Number
$callout-background-fade: 85% !default;
- /// Defualt border style for callouts.
+ /// Default border style for callouts.
/// @type List
$callout-border: 1px solid rgba($black, 0.25) !default;
@@ @@ -40,15 +40,16 @@ $callout-radius: $global-radius !default;
/// Amount to tint links used within colored panels. Set to `false` to disable this feature.
/// @type Number | Boolean
- $callout-link-tint: 30%;
+ $callout-link-tint: 30% !default;
/// Adds basic styles for a callout, including padding and margin.
@mixin callout-base() {
+ position: relative;
margin: $callout-margin;
padding: $callout-padding;
+
border: $callout-border;
border-radius: $callout-radius;
- position: relative;
// Respect the padding, fool.
> :first-child {
@@ @@ -60,23 +61,13 @@ $callout-link-tint: 30%;
}
}
- /// Generate quick styles for a callout using a single color as a baseline. If `$callout-link-tint` is enabled, links within colored panels will be a darker version of the background.
+ /// Generate quick styles for a callout using a single color as a baseline.
/// @param {Color} $color [$callout-background] - Color to use.
@mixin callout-style($color: $callout-background) {
$background: scale-color($color, $lightness: $callout-background-fade);
- $link-color: scale-color($color, $lightness: -$callout-link-tint);
background-color: $background;
-
- @if $callout-link-tint and hue($background) > 0deg {
- a {
- color: $link-color;
-
- &:hover {
- color: darken($link-color, 15%);
- }
- }
- }
+ color: color-pick-contrast($background, ($callout-font-color, $callout-font-color-alt));
}
@mixin callout-size($padding) {
@@ @@ -98,14 +89,14 @@ $callout-link-tint: 30%;
.callout {
@include callout;
- @each $name, $color in $foundation-colors {
+ @each $name, $color in $foundation-palette {
&.#{$name} {
@include callout-style($color);
}
}
&.small {
- @include callout-size(.5rem);
+ @include callout-size(0.5rem);
}
&.large {
generators/foundation/public/stylesheets/foundation6/components/_card.scss +129 -0
@@ @@ -0,0 +1,129 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group card
+ ////
+
+ /// Defualt background color.
+ /// @type Color
+ $card-background: $white !default;
+
+ /// Default font color for cards.
+ /// @type Color
+ $card-font-color: $body-font-color !default;
+
+ /// Default background.
+ /// @type Color
+ $card-divider-background: $light-gray !default;
+
+ /// Default border style.
+ /// @type List
+ $card-border: 1px solid $light-gray !default;
+
+ /// Default card shadow.
+ /// @type List
+ $card-shadow: none !default;
+
+ /// Default border radius.
+ /// @type List
+ $card-border-radius: $global-radius !default;
+
+ /// Default padding.
+ /// @type Number
+ $card-padding: $global-padding !default;
+
+ /// Default bottom margin.
+ /// @type number
+ $card-margin-bottom: $global-margin !default;
+
+ /// Adds styles for a card container.
+ /// @param {Color} $background - Background color of the card.
+ /// @param {Color} $color - font color of the card.
+ /// @param {Number} $margin - Bottom margin of the card.
+ /// @param {List} $border - Border around the card.
+ /// @param {List} $radius - border radius of the card.
+ /// @param {List} $shadow - box shadow of the card.
+ @mixin card-container(
+ $background: $card-background,
+ $color: $card-font-color,
+ $margin: $card-margin-bottom,
+ $border: $card-border,
+ $radius: $card-border-radius,
+ $shadow: $card-shadow
+ ) {
+ @if $global-flexbox {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ }
+
+ margin-bottom: $margin;
+
+ border: $border;
+ border-radius: $radius;
+
+ background: $background;
+ box-shadow: $shadow;
+
+ overflow: hidden;
+ color: $color;
+
+ & > :last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ /// Adds styles for a card divider.
+ @mixin card-divider(
+ $background: $card-divider-background,
+ $padding: $card-padding
+ ) {
+ @if $global-flexbox {
+ flex: 0 1 auto;
+ display: flex;
+ }
+
+ padding: $padding;
+ background: $background;
+
+ & > :last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ /// Adds styles for a card section.
+ @mixin card-section(
+ $padding: $card-padding
+ ) {
+ @if $global-flexbox {
+ flex: 1 0 auto;
+ }
+
+ padding: $padding;
+
+ & > :last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ @mixin foundation-card {
+ .card {
+ @include card-container;
+ }
+
+ .card-divider {
+ @include card-divider;
+ }
+
+ .card-section {
+ @include card-section;
+ }
+
+ // For IE 11 - Flexbug
+ // https://github.com/philipwalton/flexbugs/issues/75
+ .card-image {
+ min-height: 1px;
+ }
+ }
generators/foundation/public/stylesheets/foundation6/components/_close-button.scss +54 -13
@@ @@ -10,17 +10,26 @@
/// @type List
$closebutton-position: right top !default;
- /// Right (or left) offset for a close button.
- /// @type Number
- $closebutton-offset-horizontal: 1rem !default;
+ /// Right (or left) offset(s) for a close button.
+ /// @type Number|Map
+ $closebutton-offset-horizontal: (
+ small: 0.66rem,
+ medium: 1rem,
+ ) !default;
- /// Top (or bottom) offset for a close button.
- /// @type Number
- $closebutton-offset-vertical: 0.5rem !default;
+ /// Top (or bottom) offset(s) for a close button.
+ /// @type Number|Map
+ $closebutton-offset-vertical: (
+ small: 0.33em,
+ medium: 0.5rem,
+ ) !default;
- /// Default font size of the close button.
- /// @type Number
- $closebutton-size: 2em !default;
+ /// Default font size(s) of the close button.
+ /// @type Number|Map
+ $closebutton-size: (
+ small: 1.5em,
+ medium: 2em,
+ ) !default;
/// The line-height of the close button. It affects the spacing of the element.
/// @type Number
@@ @@ -34,6 +43,39 @@ $closebutton-color: $dark-gray !default;
/// @type Color
$closebutton-color-hover: $black !default;
+
+ /// Get the size and position for a close button. If the input value is a number, the number is returned. If the input value is a config map and the map has the key `$size`, the value is returned.
+ ///
+ /// @param {Number|Map} $value - A number or map that represents the size or position value(s) of the close button.
+ /// @param {Keyword} $size - The size of the close button to use.
+ ///
+ /// @return {Number} The given number or the value found in the map.
+ @function -zf-get-size-val($value, $size) {
+ // Check if the value is a number
+ @if type-of($value) == 'number' {
+ // If it is, just return the number
+ @return $value;
+ }
+
+ // Check if the size name exists in the value map
+ @else if map-has-key($value, $size) {
+ // If it does, return the value
+ @return map-get($value, $size);
+ }
+ }
+
+ /// Sets the size and position of a close button.
+ /// @param {Keyword} $size [medium] - The size to use. Set to `small` to create a small close button. The 'medium' values defined in `$closebutton-*` variables will be used as the default size and position of the close button.
+ @mixin close-button-size($size) {
+ $x: nth($closebutton-position, 1);
+ $y: nth($closebutton-position, 2);
+
+ #{$x}: -zf-get-size-val($closebutton-offset-horizontal, $size);
+ #{$y}: -zf-get-size-val($closebutton-offset-vertical, $size);
+ font-size: -zf-get-size-val($closebutton-size, $size);
+ line-height: -zf-get-size-val($closebutton-lineheight, $size);
+ }
+
/// Adds styles for a close button, using the styles in the settings variables.
@mixin close-button {
$x: nth($closebutton-position, 1);
@@ @@ -42,10 +84,6 @@ $closebutton-color-hover: $black !default;
@include disable-mouse-outline;
position: absolute;
color: $closebutton-color;
- #{$x}: $closebutton-offset-horizontal;
- #{$y}: $closebutton-offset-vertical;
- font-size: $closebutton-size;
- line-height: $closebutton-lineheight;
cursor: pointer;
&:hover,
@@ @@ -57,5 +95,8 @@ $closebutton-color-hover: $black !default;
@mixin foundation-close-button {
.close-button {
@include close-button;
+
+ &.small { @include close-button-size(small) }
+ &, &.medium { @include close-button-size(medium) }
}
}
generators/foundation/public/stylesheets/foundation6/components/_drilldown.scss +108 -33
@@ @@ -12,56 +12,131 @@ $drilldown-transition: transform 0.15s linear !default;
/// Adds arrows to drilldown items with submenus, as well as the back button.
/// @type Boolean
- $drilldown-arrows: true;
+ $drilldown-arrows: true !default;
+
+ /// Sets drilldown menu item padding.
+ /// @type Number
+ $drilldown-padding: $global-menu-padding !default;
+
+ /// Sets drilldown menu nested margin
+ /// @type Number
+ $drilldown-nested-margin: 0 !default;
+
+ /// Background color for drilldown top level items.
+ /// @type Color
+ $drilldown-background: $white !default;
+
+ /// Sets drilldown menu item padding in the submenu.
+ /// @type Number
+ $drilldown-submenu-padding: $drilldown-padding !default;
+
+ /// Background color for drilldown submenus.
+ /// @type Color
+ $drilldown-submenu-background: $white !default;
+
+ /// Sets drilldown arrow color if arrow is used.
+ /// @type Color
+ $drilldown-arrow-color: $primary-color !default;
+
+ /// Sets drilldown arrow size if arrow is used.
+ /// @type Length
+ $drilldown-arrow-size: 6px !default;
+
+ @mixin zf-drilldown-left-right-arrows {
+ .is-drilldown-submenu-parent > a {
+ position: relative;
+ &::after {
+ position: absolute;
+ top: 50%;
+ margin-top: -1 * $drilldown-arrow-size;
+ #{$global-right}: 1rem;
+ @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
+ }
+ }
+
+ &.align-left .is-drilldown-submenu-parent > a::after {
+ left: auto;
+ right: 1rem;
+ @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
+ }
+
+ &.align-right .is-drilldown-submenu-parent > a::after {
+ right: auto;
+ left: 1rem;
+ @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
+ }
+
+ }
@mixin foundation-drilldown-menu {
// Applied to the Menu container
.is-drilldown {
position: relative;
overflow: hidden;
- }
- // Applied to nested <ul>s
- .is-drilldown-sub {
- position: absolute;
- top: 0;
- left: 100%;
- z-index: -1;
- height: 100%;
- width: 100%;
- background: $white;
- transition: $drilldown-transition;
-
- &.is-active {
- z-index: 1;
+ li {
display: block;
- transform: translateX(-100%);
}
- &.is-closing {
- transform: translateX(100%);
+ &.animate-height {
+ transition: height 0.5s;
}
}
- @if $drilldown-arrows {
- .is-drilldown-submenu-parent > a {
- position: relative;
+ // The top level <ul>
+ .drilldown {
+ a {
+ padding: $drilldown-padding;
+ background: $drilldown-background;
+ }
+
+ // Applied to submenu <ul>s
+ .is-drilldown-submenu {
+ position: absolute;
+ top: 0;
+ #{$global-left}: 100%;
+ z-index: -1;
+
+ width: 100%;
+ background: $drilldown-submenu-background;
+ transition: $drilldown-transition;
+
+ &.is-active {
+ z-index: 1;
+ display: block;
+ transform: translateX(if($global-text-direction == ltr, -100%, 100%));
+ }
+
+ &.is-closing {
+ transform: translateX(if($global-text-direction == ltr, 100%, -100%));
+ }
- &::after {
- @include css-triangle(6px, $primary-color, right);
- position: absolute;
- top: 50%;
- margin-top: -6px;
- right: 1rem;
+ // Submenu item padding
+ a {
+ padding: $drilldown-submenu-padding;
}
}
- .js-drilldown-back::before {
- @include css-triangle(6px, $primary-color, left);
- float: left;
- margin-right: 0.75rem; // Creates space between the arrow and the text
- margin-left: 0.6rem; // Lines the tip of the arrow with the items below
- margin-top: 14px; // Aligns the arrow with the text
+ .nested.is-drilldown-submenu {
+ @include menu-nested($drilldown-nested-margin);
+ }
+
+ .drilldown-submenu-cover-previous {
+ min-height: 100%;
+ }
+
+ @if $drilldown-arrows {
+ @include zf-drilldown-left-right-arrows;
+
+ .js-drilldown-back > a::before {
+ @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
+ border-#{$global-left}-width: 0;
+ display: inline-block;
+ vertical-align: middle;
+ margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
+
+ border-#{$global-left}-width: 0;
+ }
}
}
}
generators/foundation/public/stylesheets/foundation6/components/_dropdown-menu.scss +215 -64
@@ @@ -10,100 +10,184 @@
/// @type Boolean
$dropdownmenu-arrows: true !default;
+ /// Sets dropdown menu arrow color if arrow is used.
+ /// @type Color
+ $dropdownmenu-arrow-color: $anchor-color !default;
+
+ /// Sets dropdown menu arrow size if arrow is used.
+ /// @type Length
+ $dropdownmenu-arrow-size: 6px !default;
+
+ /// Sets dropdown menu arrow padding for aligning the arrow correctly.
+ /// @type Length
+ $dropdownmenu-arrow-padding: 1.5rem !default;
+
/// Minimum width of dropdown sub-menus.
/// @type Length
$dropdownmenu-min-width: 200px !default;
- /// Background color for dropdowns.
+ /// Background color for top level items.
/// @type Color
$dropdownmenu-background: $white !default;
- /// Border for dropdown panes.
+ /// Background color for dropdowns.
+ /// @type Color
+ $dropdownmenu-submenu-background: $dropdownmenu-background !default;
+
+ /// Padding for top level items.
+ /// @type Number
+ $dropdownmenu-padding: $global-menu-padding !default;
+
+ /// Sets dropdown menu nested margin
+ /// @type Number
+ $dropdownmenu-nested-margin: 0 !default;
+
+ /// Padding for sub-menu items.
+ /// @type Number
+ $dropdownmenu-submenu-padding: $dropdownmenu-padding !default;
+
+ /// Border for dropdown sub-menus.
/// @type List
- $dropdown-border: 1px solid $medium-gray !default;
+ $dropdownmenu-border: 1px solid $medium-gray !default;
- @mixin foundation-dropdown-menu {
- .dropdown.menu {
- .has-submenu {
- position: relative;
+ // Border width for dropdown sub-menus.
+ // Used to adjust top margin of a sub-menu if a border is used.
+ // @type Length
+ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
- a::after {
- float: right;
- margin-top: 3px;
- margin-left: 10px;
- }
+ /// Text color of an active dropdown menu item. Explicit override for menu defaults
+ /// @type Color
+ $dropdown-menu-item-color-active: get-color(primary) !default;
- @if $dropdownmenu-arrows {
- &.is-down-arrow a {
- padding-right: 1.5rem;
- position: relative;
- }
- &.is-down-arrow > a::after {
- @include css-triangle(5px, $anchor-color, down);
- position: absolute;
- top: 12px;
- right: 5px;
- }
- &.is-left-arrow > a::after {
- @include css-triangle(5px, $anchor-color, left);
- float: left;
- margin-left: 0;
- margin-right: 10px;
- }
- &.is-right-arrow > a::after {
- @include css-triangle(5px, $anchor-color, right);
- }
- }
+ /// Background color of an active dropdown menu item. Explicit override for menu defaults
+ /// @type Color
+ $dropdown-menu-item-background-active: transparent !default;
+
+ @mixin zf-dropdown-left-right-arrows {
+ > a::after {
+ #{$global-right}: 14px;
+ }
+
+ &.opens-left > a::after {
+ right: auto;
+ left: 5px;
+ @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
+ }
- &.is-left-arrow.opens-inner .submenu{
+ &.opens-right > a::after {
+ @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
+ }
+ }
+
+ @mixin dropdown-menu-direction($dir: horizontal) {
+ @if $dir == horizontal {
+ > li.opens-left {
+ > .is-dropdown-submenu {
+ top: 100%;
right: 0;
left: auto;
}
- &.is-right-arrow.opens-inner .submenu{
- left: 0;
- right: auto;
- }
- &.opens-inner .submenu {
+ }
+
+ > li.opens-right {
+ > .is-dropdown-submenu {
top: 100%;
+ right: auto;
+ left: 0;
}
}
- .submenu {
- display: none;
- position: absolute;
- top: 0;
- left: 100%;
- min-width: $dropdownmenu-min-width;
- z-index: 1;
- background: $dropdownmenu-background;
- border: $dropdown-border;
+ @if $dropdownmenu-arrows {
+ > li.is-dropdown-submenu-parent > a {
+ position: relative;
+ padding-#{$global-right}: $dropdownmenu-arrow-padding;
+ }
- > li {
- width: 100%;
+ > li.is-dropdown-submenu-parent > a::after {
+ @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
+ #{$global-right}: 5px;
+ #{$global-left}: auto;
+ margin-top: -1 * ($dropdownmenu-arrow-size / 2);
+ }
+ }
+ }
+ @else if $dir == vertical {
+ > li {
+ .is-dropdown-submenu {
+ top: 0;
}
- &.first-sub {
- top: 100%;
- left: 0;
- right: auto;
+ &.opens-left {
+ > .is-dropdown-submenu {
+ right: 100%;
+ left: auto;
+ top: 0;
+ }
}
- &:not(.js-dropdown-nohover) > .has-submenu:hover > &,
- &.js-dropdown-active {
- display: block;
+ &.opens-right {
+ > .is-dropdown-submenu {
+ right: auto;
+ left: 100%;
+ }
+ }
+
+ @if $dropdownmenu-arrows {
+ @include zf-dropdown-left-right-arrows;
}
}
+ }
+ @else {
+ @warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.';
+ }
+ }
- .has-submenu.opens-left .submenu {
- left: auto;
- right: 100%;
+ @mixin foundation-dropdown-menu {
+ .dropdown.menu {
+ @include dropdown-menu-direction(horizontal);
+
+ a {
+ @include disable-mouse-outline;
+ padding: $dropdownmenu-padding;
+ }
+
+ // Active state
+ .is-active > a {
+ background: $dropdown-menu-item-background-active;
+ color: $dropdown-menu-item-color-active;
+ }
+
+ .no-js & ul {
+ display: none;
+ }
+
+ .nested.is-dropdown-submenu {
+ @include menu-nested($dropdownmenu-nested-margin);
+ }
+
+ &.vertical {
+ @include dropdown-menu-direction(vertical);
+ }
+
+ @each $size in $breakpoint-classes {
+ @if $size != $-zf-zero-breakpoint {
+ @include breakpoint($size) {
+ &.#{$size}-horizontal {
+ @include dropdown-menu-direction(horizontal);
+ }
+
+ &.#{$size}-vertical {
+ @include dropdown-menu-direction(vertical);
+ }
+ }
+ }
}
&.align-right {
- .submenu.first-sub {
+ .is-dropdown-submenu.first-sub {
top: 100%;
- left: auto;
right: 0;
+ left: auto;
}
}
}
@@ @@ -114,10 +198,77 @@ $dropdown-border: 1px solid $medium-gray !default;
&.align-right {
float: right;
}
+ }
+
+ .is-dropdown-submenu-parent {
+ position: relative;
+
+ a::after {
+ position: absolute;
+ top: 50%;
+ #{$global-right}: 5px;
+ #{$global-left}: auto;
+ margin-top: -1 * $dropdownmenu-arrow-size;
+ }
+
+ &.opens-inner > .is-dropdown-submenu {
- > li .submenu {
- top: 0;
+ top: 100%;
+ @if $global-text-direction == 'rtl' {
+ right: auto;
+ }
+ @else {
+ left: auto;
+ }
+ }
+
+ &.opens-left > .is-dropdown-submenu {
+ right: 100%;
+ left: auto;
+ }
+
+ &.opens-right > .is-dropdown-submenu {
+ right: auto;
left: 100%;
}
}
+
+ .is-dropdown-submenu {
+ position: absolute;
+ top: 0;
+ #{$global-left}: 100%;
+ z-index: 1;
+
+ display: none;
+ min-width: $dropdownmenu-min-width;
+
+ border: $dropdownmenu-border;
+ background: $dropdownmenu-submenu-background;
+
+ .dropdown & a {
+ padding: $dropdownmenu-submenu-padding;
+ }
+
+ .is-dropdown-submenu-parent {
+ @if $dropdownmenu-arrows {
+ @include zf-dropdown-left-right-arrows;
+ }
+ }
+
+ @if (type-of($dropdownmenu-border-width) == 'number') {
+ .is-dropdown-submenu {
+ margin-top: (-$dropdownmenu-border-width);
+ }
+ }
+
+ > li {
+ width: 100%;
+ }
+
+ // [TODO] Cut back specificity
+ //&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically...
+ &.js-dropdown-active {
+ display: block;
+ }
+ }
}
generators/foundation/public/stylesheets/foundation6/components/_dropdown.scss +22 -7
@@ @@ -10,13 +10,17 @@
/// @type List
$dropdown-padding: 1rem !default;
+ /// Background for dropdown panes.
+ /// @type Color
+ $dropdown-background: $body-background !default;
+
/// Border for dropdown panes.
/// @type List
$dropdown-border: 1px solid $medium-gray !default;
/// Font size for dropdown panes.
/// @type List
- $dropdown-font-size: 16rem !default;
+ $dropdown-font-size: 1rem !default;
/// Width for dropdown panes.
/// @type Number
@@ @@ -36,18 +40,29 @@ $dropdown-sizes: (
/// Applies styles for a basic dropdown.
@mixin dropdown-container {
- background-color: $body-background;
- border: $dropdown-border;
- display: block;
- padding: $dropdown-padding;
position: absolute;
- visibility: hidden;
- width: 300px;
z-index: 10;
+
+ width: $dropdown-width;
+ padding: $dropdown-padding;
+
+ visibility: hidden;
+ display: none;
+ border: $dropdown-border;
border-radius: $dropdown-radius;
+ background-color: $dropdown-background;
+
+ font-size: $dropdown-font-size;
+
+
+ // Allow an intermittent state to do positioning before making visible.
+ &.is-opening {
+ display: block;
+ }
&.is-open {
visibility: visible;
+ display: block;
}
}
generators/foundation/public/stylesheets/foundation6/components/_flex-video.scss +1 -68
@@ @@ -1,68 +1 @@
- // Foundation for Sites by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
-
- ////
- /// @group flex-video
- ////
-
- /// Padding above a flex video container.
- /// @type Number
- $flexvideo-padding-top: rem-calc(25) !default;
-
- /// Margin below a flex video container.
- /// @type Number
- $flexvideo-margin-bottom: rem-calc(16) !default;
-
- /// Padding used to create a 4:3 aspect ratio.
- /// @type Number
- $flexvideo-ratio: 4 by 3 !default;
-
- /// Padding used to create a 16:9 aspect ratio.
- /// @type Number
- $flexvideo-ratio-widescreen: 16 by 9 !default;
-
- /// Creates a percentage height that can be used as padding in a flex video container.
- /// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
- /// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a flex video container.
- @function flex-video($ratio) {
- $w: nth($ratio, 1);
- $h: nth($ratio, 3);
- @return $h / $w * 100%;
- }
-
- /// Creates a flex video container.
- /// @param {List} $ratio [$flexvideo-ratio] - Ratio to use for the container, formatted as `x by y`.
- @mixin flex-video($ratio: $flexvideo-ratio) {
- position: relative;
- height: 0;
- padding-top: $flexvideo-padding-top;
- padding-bottom: flex-video($ratio);
- margin-bottom: $flexvideo-margin-bottom;
- overflow: hidden;
-
- iframe,
- object,
- embed,
- video {
- position: absolute;
- top: 0;
- #{$global-left}: 0;
- width: 100%;
- height: 100%;
- }
- }
-
- @mixin foundation-flex-video {
- .flex-video {
- @include flex-video;
-
- &.widescreen {
- padding-bottom: flex-video($flexvideo-ratio-widescreen);
- }
-
- &.vimeo {
- padding-top: 0;
- }
- }
- }
+ @import 'responsive-embed';
generators/foundation/public/stylesheets/foundation6/components/_flex.scss +117 -0
@@ @@ -0,0 +1,117 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group Flexbox Utilities
+ ////
+ //
+ /// Default value for the count of source ordering`
+ /// @type Number
+ $flex-source-ordering-count: 6 !default;
+
+ /// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.
+ /// @type Boolean
+ $flexbox-responsive-breakpoints: true !default;
+
+ @mixin flex-helpers {
+ .flex-container {
+ @include flex;
+ }
+
+ .flex-child-auto {
+ flex: 1 1 auto;
+ }
+
+ .flex-child-grow {
+ flex: 1 0 auto;
+ }
+
+ .flex-child-shrink {
+ flex: 0 1 auto;
+ }
+
+ @each $dir, $prop in $-zf-flex-direction {
+ .flex-dir-#{$dir} {
+ @include flex-direction($prop);
+ }
+ }
+
+ @if ($flexbox-responsive-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-flex-container {
+ @include flex;
+ }
+
+ .#{$size}-flex-child-auto {
+ flex: 1 1 auto;
+ }
+
+ .#{$size}-flex-child-grow {
+ flex: 1 0 auto;
+ }
+
+ .#{$size}-flex-child-shrink {
+ flex: 0 1 auto;
+ }
+
+ @each $dir, $prop in $-zf-flex-direction {
+ .#{$size}-flex-dir-#{$dir} {
+ @include flex-direction($prop);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ @mixin foundation-flex-classes {
+ // Horizontal alignment using justify-content
+ @each $hdir, $prop in map-remove($-zf-flex-justify, 'left') {
+ .align-#{$hdir} {
+ @include flex-align($x: $hdir);
+ }
+ }
+
+ // Horizontal alignment Specifically for Vertical Menu
+ @each $hdir, $prop in map-remove($-zf-flex-justify, 'left', 'justify', 'spaced') {
+ .align-#{$hdir} {
+ &.vertical.menu > li > a {
+ @include flex-align($x: $hdir);
+ }
+ }
+ }
+
+ // Vertical alignment using align-items and align-self
+ @each $vdir, $prop in $-zf-flex-align {
+ .align-#{$vdir} {
+ @include flex-align($y: $vdir);
+ }
+
+ .align-self-#{$vdir} {
+ @include flex-align-self($y: $vdir);
+ }
+ }
+
+ // Central alignment of content
+ .align-center-middle {
+ @include flex-align($x: center, $y: middle);
+ align-content: center;
+ }
+
+ // Source ordering
+ @include -zf-each-breakpoint {
+ @for $i from 1 through $flex-source-ordering-count {
+ .#{$-zf-size}-order-#{$i} {
+ @include flex-order($i);
+ }
+ }
+ }
+
+ // Vanilla Flexbox Helpers
+ @include flex-helpers;
+ }
generators/foundation/public/stylesheets/foundation6/components/_float.scss +1 -1
@@ @@ -17,8 +17,8 @@
.float-center {
display: block;
- margin-left: auto;
margin-right: auto;
+ margin-left: auto;
}
.clearfix {
generators/foundation/public/stylesheets/foundation6/components/_label.scss +16 -8
@@ @@ -12,7 +12,15 @@ $label-background: $primary-color !default;
/// Default text color for labels.
/// @type Color
- $label-color: foreground($label-background) !default;
+ $label-color: $white !default;
+
+ /// Alternate text color for labels.
+ /// @type Color
+ $label-color-alt: $black !default;
+
+ /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+ /// @type Map
+ $label-palette: $foundation-palette !default;
/// Default font size for labels.
/// @type Number
@@ @@ -30,11 +38,13 @@ $label-radius: $global-radius !default;
@mixin label {
display: inline-block;
padding: $label-padding;
+
+ border-radius: $label-radius;
+
font-size: $label-font-size;
line-height: 1;
white-space: nowrap;
cursor: default;
- border-radius: $label-radius;
}
@mixin foundation-label {
@@ @@ -44,12 +54,10 @@ $label-radius: $global-radius !default;
background: $label-background;
color: $label-color;
- @each $name, $color in $foundation-colors {
- @if $name != primary {
- &.#{$name} {
- background: $color;
- color: foreground($color);
- }
+ @each $name, $color in $label-palette {
+ &.#{$name} {
+ background: $color;
+ color: color-pick-contrast($color, ($label-color, $label-color-alt));
}
}
}
generators/foundation/public/stylesheets/foundation6/components/_media-object.scss +50 -10
@@ @@ -14,37 +14,57 @@ $mediaobject-margin-bottom: $global-margin !default;
/// @type Number
$mediaobject-section-padding: $global-padding !default;
- /// With of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
+ /// Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
/// @type Number
$mediaobject-image-width-stacked: 100% !default;
/// Adds styles for a media object container.
@mixin media-object-container {
+ display: if($global-flexbox, flex, block);
margin-bottom: $mediaobject-margin-bottom;
- display: block;
+
+ @if $global-flexbox {
+ flex-wrap: nowrap;
+ }
}
/// Adds styles for sections within a media object.
/// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
@mixin media-object-section($padding: $mediaobject-section-padding) {
- display: table-cell;
- vertical-align: top;
+ @if $global-flexbox {
+ flex: 0 1 auto;
+ }
+ @else {
+ display: table-cell;
+ vertical-align: top;
+ }
&:first-child {
padding-#{$global-right}: $padding;
}
- &:last-child:not(+ &:first-child) {
+ &:last-child:not(:nth-child(2)) {
padding-#{$global-left}: $padding;
}
+
+ > :last-child {
+ margin-bottom: 0;
+ }
}
/// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
@mixin media-object-stack {
- display: block;
padding: 0;
padding-bottom: $mediaobject-section-padding;
+ @if $global-flexbox {
+ flex-basis: 100%;
+ max-width: 100%;
+ }
+ @else {
+ display: block;
+ }
+
img {
width: $mediaobject-image-width-stacked;
}
@@ @@ -58,8 +78,16 @@ $mediaobject-image-width-stacked: 100% !default;
max-width: none;
}
- &.stack-for-small .media-object-section {
- @include breakpoint(small only) {
+ @if $global-flexbox {
+ &.stack-for-#{$-zf-zero-breakpoint} {
+ @include breakpoint($-zf-zero-breakpoint only) {
+ flex-wrap: wrap;
+ }
+ }
+ }
+
+ &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
+ @include breakpoint($-zf-zero-breakpoint only) {
@include media-object-stack;
}
}
@@ @@ -68,7 +96,19 @@ $mediaobject-image-width-stacked: 100% !default;
.media-object-section {
@include media-object-section;
- &.middle { vertical-align: middle; }
- &.bottom { vertical-align: bottom; }
+ @if $global-flexbox {
+ &.main-section {
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
+ }
+ }
+ @else {
+ &.middle {
+ vertical-align: middle;
+ }
+
+ &.bottom {
+ vertical-align: bottom;
+ }
+ }
}
}
generators/foundation/public/stylesheets/foundation6/components/_menu-icon.scss +9 -0
@@ @@ -0,0 +1,9 @@
+ @mixin foundation-menu-icon {
+ .menu-icon {
+ @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
+ }
+
+ .menu-icon.dark {
+ @include hamburger;
+ }
+ }
generators/foundation/public/stylesheets/foundation6/components/_menu.scss +373 -91
@@ @@ -12,59 +12,163 @@ $menu-margin: 0 !default;
/// Left-hand margin of a nested menu.
/// @type Number
- $menu-margin-nested: 1rem !default;
+ $menu-nested-margin: $global-menu-nested-margin !default;
- /// Padding for items in a menu.
+ /// Padding for items in a pill menu.
/// @type Number
- $menu-item-padding: 0.7rem 1rem !default;
+ $menu-items-padding: $global-menu-padding !default;
+
+ /// margin for items in a simple menu.
+ /// @type Number
+ $menu-simple-margin: 1rem !default;
+
+ /// Text color of an active menu item.
+ /// @type Color
+ $menu-item-color-active: $white !default;
+
+ /// Background color of an active menu item.
+ /// @type Color
+ $menu-item-background-active: get-color(primary) !default;
/// Spacing between an icon and text in a menu item.
/// @type Number
$menu-icon-spacing: 0.25rem !default;
- /// Maximum number of `expand-n` classes to include in the CSS.
- /// @type Number
- $menu-expand-max: 6 !default;
+ /// Background color for an hovered menu item.
+ /// @type Color
+ $menu-item-background-hover: $light-gray !default;
+
+ /// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`.
+ /// But please note that `active` will be removed in upcoming versions.
+ /// @type Boolean
+ $menu-state-back-compat: true !default;
+
+ /// Backward compatibility for menu centered. If true, this duplicate `.menu-centered > .menu` with `.menu.align-center`.
+ /// But please note that `menu-centered` will be removed in upcoming versions.
+ /// @type Boolean
+ $menu-centered-back-compat: true !default;
+
+ /// Backward compatibility for using `icon-*` classes without `.icons` classes
+ /// But please note that this backward compatibility will be removed in upcoming versions.
+ /// @type Boolean
+ $menu-icons-back-compat: true !default;
/// Creates the base styles for a Menu.
@mixin menu-base {
- margin: $menu-margin;
- list-style-type: none;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ position: relative;
+
+ @if $global-flexbox {
+ display: flex;
+ flex-wrap: wrap;
+ }
- // List items are table cell to allow for vertical alignment
- > li {
+ li {
@include disable-mouse-outline;
- display: table-cell;
- vertical-align: middle;
}
- // Reset line height to make the height of the overall item easier to calculate
- > li > a {
- display: block;
- padding: $menu-item-padding;
+ a,
+ .button {
line-height: 1;
+ text-decoration: none;
+ display: block;
+ padding: $menu-items-padding;
}
// Reset styles of inner elements
input,
+ select,
a,
button {
margin-bottom: 0;
}
+
+ input {
+ display: inline-block;
+ }
}
/// Expands the items of a Menu, so each item is the same width.
- /// @param {Keyword|Number} $count [auto] - Number of items in the Menu. You can hardcode a number, or use `auto` to generate CSS that will adapt to the number of items inside the menu.
- @mixin menu-expand($count: auto) {
- display: table;
- width: 100%;
+ @mixin menu-expand {
+ @if $global-flexbox {
+ li {
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
+ }
+ }
+ @else {
+ display: table;
+ width: 100%;
+
+ > li {
+ display: table-cell;
+ vertical-align: middle;
+ }
+ }
+ }
+
+ /// Align menu items.
+ @mixin menu-align($alignment) {
+ @if $alignment == left {
+ @if $global-flexbox {
+ justify-content: flex-start;
+ }
+ @else {
+ text-align: $global-left;
+ }
+ }
+ @else if $alignment == right {
+ @if $global-flexbox {
+ li {
+ display: flex;
+ justify-content: flex-end;
+
+ .submenu li {
+ justify-content: flex-start;
+ }
+ }
+
+ &.vertical li {
+ display: block;
+ text-align: $global-right;
+
+ .submenu li {
+ text-align: $global-right;
+ }
+ }
+ }
+ @else {
+ text-align: $global-right;
+
+ .submenu li {
+ text-align: $global-left;
+ }
- > li {
- @if $count == auto {
- @include auto-width($menu-expand-max);
+ &.vertical {
+ .submenu li {
+ text-align: $global-right;
+ }
+ }
+ }
+ }
+ @else if $alignment == center {
+ @if $global-flexbox {
+ li {
+ display: flex;
+ justify-content: center;
+
+ .submenu li {
+ justify-content: flex-start;
+ }
+ }
}
- @else if type-of($count) == 'number' {
- width: percentage(1 / $count);
+ @else {
+ text-align: center;
+
+ .submenu li {
+ text-align: $global-left;
+ }
}
}
}
@@ @@ -73,13 +177,25 @@ $menu-expand-max: 6 !default;
/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
@mixin menu-direction($dir: horizontal) {
@if $dir == horizontal {
- > li {
- display: table-cell;
+ @if $global-flexbox {
+ flex-wrap: wrap;
+ flex-direction: row;
+ }
+ @else {
+ li {
+ display: inline-block;
+ }
}
}
@else if $dir == vertical {
- > li {
- display: block;
+ @if $global-flexbox {
+ flex-wrap: nowrap;
+ flex-direction: column;
+ }
+ @else {
+ li {
+ display: block;
+ }
}
}
@else {
@@ @@ -88,91 +204,176 @@ $menu-expand-max: 6 !default;
}
/// Creates a simple Menu, which has no padding or hover state.
- @mixin menu-simple {
+ /// @param {Keyword} $dir [$global-left] - Direction of the menu. This effects the side of the `<li>` that receives the margin.
+ /// @param {Number} $margin [$menu-simple-margin] - The margin to apply to each `<li>`.
+ @mixin menu-simple($dir: $global-left, $margin: $menu-simple-margin) {
+ @if $global-flexbox {
+ align-items: center;
+ }
+
+ li + li {
+ margin-#{$dir}: $margin;
+ }
+
a {
padding: 0;
- margin-#{$global-right}: get-side($menu-item-padding, $global-right);
}
}
/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
- /// @param {Keyword|Number} $padding [auto] - Length of the margin.
- @mixin menu-nested($margin: $menu-margin-nested) {
- margin-#{$global-left}: $margin;
+ /// @param {Keyword|Number} $margin [$menu-nested-margin] - Length of the margin.
+ /// @param {Keyword} $nested-alignment [left] - Alignment of the nested class
+ @mixin menu-nested(
+ $margin: $menu-nested-margin,
+ $nested-alignment: left
+ ) {
+ @if $nested-alignment == right {
+ margin-#{$global-right}: $margin;
+ margin-#{$global-left}: 0;
+ }
+ @else {
+ margin-#{$global-right}: 0;
+ margin-#{$global-left}: $margin;
+ }
+
}
- /// Adds support for icons to Menu items.
- /// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
- /// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
- @mixin menu-icons($position: side, $base: true) {
- @if $base {
- > li > a {
- > img,
- > i {
+ /// Adds basic styles for icons in menus.
+ @mixin menu-icons() {
+ @if $global-flexbox {
+ a {
+ display: flex;
+ }
+ }
+ @else {
+ img,
+ i,
+ svg {
+ vertical-align: middle;
+
+ + span {
vertical-align: middle;
}
+ }
+ }
+ }
- > span {
- vertical-align: middle;
+ /// Adds position classes for icons within a menu.
+ @mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) {
+ @if $position == left {
+ li a {
+ @if $global-flexbox {
+ flex-flow: row nowrap;
+ }
+
+ img,
+ i,
+ svg {
+ margin-#{$global-right}: $spacing;
+
+ @if not $global-flexbox {
+ display: inline-block;
+ }
}
}
}
+ @else if $position == right {
+ li a {
+ @if $global-flexbox {
+ flex-flow: row nowrap;
+ }
- @if $position == side {
- > li > a {
- > img,
- > i {
- display: inline-block;
- margin-#{$global-right}: $menu-icon-spacing;
+ img,
+ i,
+ svg {
+ margin-#{$global-left}: $spacing;
+
+ @if not $global-flexbox {
+ display: inline-block;
+ }
}
}
}
@else if $position == top {
- > li > a {
- text-align: center;
+ li a {
+ @if $global-flexbox {
+ flex-flow: column nowrap;
+ }
+ @else {
+ text-align: center;
+ }
- > img,
- > i {
- display: block;
- margin: 0 auto $menu-icon-spacing;
+ img,
+ i,
+ svg {
+ @if not $global-flexbox {
+ display: block;
+ margin: 0 auto $spacing;
+ }
+ @else {
+ align-self: stretch;
+ margin-bottom: $spacing;
+ text-align: center;
+ }
+ }
+ }
+ }
+ @else if $position == bottom {
+ li a {
+ @if $global-flexbox {
+ flex-flow: column nowrap;
+ }
+ @else {
+ text-align: center;
+ }
+
+ img,
+ i,
+ svg {
+ @if not $global-flexbox {
+ display: block;
+ margin: $spacing auto 0;
+ }
+ @else {
+ align-self: stretch;
+ margin-bottom: $spacing;
+ text-align: center;
+ }
}
}
}
}
@mixin menu-text {
+ padding: $global-menu-padding;
+
font-weight: bold;
- color: inherit;
line-height: 1;
- padding-top: 0;
- padding-bottom: 0;
- padding: $menu-item-padding;
+ color: inherit;
+ }
+
+ @mixin menu-state-active {
+ background: $menu-item-background-active;
+ color: $menu-item-color-active;
}
@mixin foundation-menu {
.menu {
@include menu-base;
- @include menu-icons;
- // Orientation
- @include menu-direction(horizontal);
+ // Default orientation: horizontal
+ &, &.horizontal {
+ @include menu-direction(horizontal);
+ }
+ // Vertical orientation modifier
&.vertical {
@include menu-direction(vertical);
}
- @each $size in $breakpoint-classes {
- @if $size != small {
- @include breakpoint($size) {
- &.#{$size}-horizontal {
- @include menu-direction(horizontal);
- }
-
- &.#{$size}-vertical {
- @include menu-direction(vertical);
- }
- }
- }
+ // Even-width modifier for horizontal orientation
+ &.expanded {
+ @include menu-expand;
}
// Simple
@@ @@ -180,34 +381,115 @@ $menu-expand-max: 6 !default;
@include menu-simple;
}
- // Align right
- &.align-#{$global-right} {
- > li {
- float: $global-right;
+ // Breakpoint specific versions
+ @include -zf-each-breakpoint($small: false) {
+ &.#{$-zf-size}-horizontal {
+ @include menu-direction(horizontal);
}
- }
- // Even-width
- &.expanded {
- @include menu-expand;
+ &.#{$-zf-size}-vertical {
+ @include menu-direction(vertical);
+ }
- > li:first-child:last-child {
- width: 100%;
+ &.#{$-zf-size}-expanded {
+ @include menu-expand;
}
- }
- // Vertical icons
- &.icon-top {
- @include menu-icons(top, $base: false);
+ &.#{$-zf-size}-simple {
+ @include menu-expand;
+ }
}
// Nesting
&.nested {
@include menu-nested;
}
+
+ // Icon Base Styles
+ &.icons {
+ @include menu-icons;
+ }
+
+ // Backward Compatibility for active state
+ @if $menu-icons-back-compat {
+ &.icon-top,
+ &.icon-right,
+ &.icon-bottom,
+ &.icon-left {
+ @include menu-icons;
+ }
+ }
+
+ // Icon Left
+ &.icon-left {
+ @include menu-icon-position(left);
+ }
+
+ // Icon Right
+ &.icon-right {
+ @include menu-icon-position(right);
+ }
+
+ // Icon Top
+ &.icon-top {
+ @include menu-icon-position(top);
+ }
+
+ // Icon Bottom
+ &.icon-bottom {
+ @include menu-icon-position(bottom);
+ }
+
+ // Active state
+ .is-active > a {
+ @include menu-state-active;
+ }
+
+ // Backward Compatibility for active state
+ @if $menu-state-back-compat {
+ .active > a {
+ @include menu-state-active;
+ }
+ }
+
+ // Align left
+ &.align-#{$global-left} {
+ @include menu-align(left);
+ }
+
+ // Align right
+ &.align-#{$global-right} {
+ @include menu-align(right);
+
+ .nested {
+ @include menu-nested($nested-alignment: right);
+ }
+ }
+
+ // Align center
+ &.align-center {
+ @include menu-align(center);
+ }
+
+ .menu-text {
+ @include menu-text;
+ }
+ }
+
+ @if $menu-centered-back-compat {
+ .menu-centered {
+ > .menu {
+ @if $global-flexbox {
+ justify-content: center;
+ }
+
+ @include menu-align(center);
+ }
+ }
}
- .menu-text {
- @include menu-text;
+ // Prevent FOUC when using the Responsive Menu plugin
+ .no-js [data-responsive-menu] ul {
+ display: none;
}
}
generators/foundation/public/stylesheets/foundation6/components/_off-canvas.scss +418 -83
@@ @@ -6,163 +6,498 @@
/// @group off-canvas
////
- /// Width of an off-canvas menu.
+ /// Width map of a left/right off-canvas panel.
+ /// @type Map
+ $offcanvas-sizes: (
+ small: 250px,
+ ) !default;
+
+ /// Height map of a top/bottom off-canvas panel.
+ /// @type Map
+ $offcanvas-vertical-sizes: (
+ small: 250px,
+ ) !default;
+
+ /// Background color of an off-canvas panel.
+ /// @type Color
+ $offcanvas-background: $light-gray !default;
+
+ /// Box shadow for the off-canvas overlap panel.
+ /// @type Shadow
+ $offcanvas-shadow: 0 0 10px rgba($black, 0.7) !default;
+
+ /// Inner box shadow size for the off-canvas push panel.
/// @type Number
- $offcanvas-size: 250px;
+ $offcanvas-inner-shadow-size: 20px !default;
- /// Background color of an off-canvas menu.
+ /// Inner box shadow color for the off-canvas push panel.
/// @type Color
- $offcanvas-background: $light-gray;
+ $offcanvas-inner-shadow-color: rgba($black, 0.25) !default;
+
+ /// Z-index of an off-canvas content overlay.
+ /// @type Number
+ $offcanvas-overlay-zindex: 11 !default;
+
+ /// Z-index of an off-canvas panel with the `push` transition.
+ /// @type Number
+ $offcanvas-push-zindex: 12 !default;
+
+ /// Z-index of an off-canvas panel with the `overlap` transition.
+ /// @type Number
+ $offcanvas-overlap-zindex: 13 !default;
- /// Z-index of an off-canvas menu.
+ /// Z-index of an off-canvas panel using the `reveal-for-*` classes or mixin.
/// @type Number
- $offcanvas-zindex: -1;
+ $offcanvas-reveal-zindex: 12 !default;
- /// Length of the animation on an off-canvas menu.
+ /// Length of the animation on an off-canvas panel.
/// @type Number
- $offcanvas-transition-length: 0.5s;
+ $offcanvas-transition-length: 0.5s !default;
- /// Timing function of the animation on an off-canvas menu.
+ /// Timing function of the animation on an off-canvas panel.
/// @type Keyword
- $offcanvas-transition-timing: ease;
+ $offcanvas-transition-timing: ease !default;
- /// Background color for the overlay that appears when an off-canvas menu is open.
- /// @type Color
- $offcanvas-exit-background: rgba($white, 0.25);
+ /// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen.
+ /// @type Bool
+ $offcanvas-fixed-reveal: true !default;
- /// CSS class used for the main content area. The off-canvas mixins use this to target the page body.
- $maincontent-class: 'off-canvas-content';
+ /// Background color for the overlay that appears when an off-canvas panel is open.
+ /// @type Color
+ $offcanvas-exit-background: rgba($white, 0.25) !default;
- /// Box shadow to place under the main content area. This shadow overlaps the off-canvas menus.
- /// @type Shadow
- $maincontent-shadow: 0 0 10px rgba($black, 0.5);
+ /// CSS class used for the main content area. The off-canvas mixins use this to target the page content.
+ $maincontent-class: 'off-canvas-content' !default;
/// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
@mixin off-canvas-basics {
- // Extra properties needed on <html> and <body> to make off-canvas work
- html,
- body {
- height: 100%;
- }
- .off-canvas-wrapper {
- width: 100%;
- overflow-x: hidden;
- position: relative;
- backface-visibility: hidden;
- -webkit-overflow-scrolling: touch;
+ /// Transform deprecated size settings into map & show warning
+ @if variable-exists(offcanvas-size) {
+ $offcanvas-sizes: (small: $offcanvas-size, medium: $offcanvas-size) !global;
+ @warn '$offcanvas-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-sizes instead';
}
-
- .off-canvas-wrapper-inner {
- @include clearfix;
- position: relative;
- width: 100%;
- transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
+ @if variable-exists(offcanvas-vertical-size) {
+ $offcanvas-vertical-sizes: (small: $offcanvas-vertical-size, medium: $offcanvas-vertical-size) !global;
+ @warn '$offcanvas-vertical-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-vertical-sizes instead';
}
- // Container for page content
- .off-canvas-content {
- min-height: 100%;
- background: $body-background;
- transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
- backface-visibility: hidden;
- z-index: 1;
+ // Checks the z-indexes and increase them due to backwards compatibility.
+ // This is necessary because the overlay's z-index is new since v6.4 and may be identical to the user custom settings of the push z-index.
+ @if $offcanvas-push-zindex <= $offcanvas-overlay-zindex { $offcanvas-push-zindex: $offcanvas-overlay-zindex + 1 !global; }
+ @if $offcanvas-overlap-zindex <= $offcanvas-push-zindex { $offcanvas-overlap-zindex: $offcanvas-push-zindex + 1 !global; }
+ @if $offcanvas-reveal-zindex <= $offcanvas-overlay-zindex { $offcanvas-reveal-zindex: $offcanvas-overlay-zindex + 1 !global; }
- @if hasvalue($maincontent-shadow) {
- box-shadow: $maincontent-shadow;
- }
+ // Hides overflow on body when an off-canvas panel is open.
+ .is-off-canvas-open {
+ overflow: hidden;
}
- // Click-to-exit overlay (generated by JavaScript)
- .js-off-canvas-exit {
- display: none;
+ // Off-canvas overlay (generated by JavaScript)
+ .js-off-canvas-overlay {
position: absolute;
top: 0;
left: 0;
+ z-index: $offcanvas-overlay-zindex;
+
width: 100%;
height: 100%;
+
+ transition: opacity $offcanvas-transition-length $offcanvas-transition-timing, visibility $offcanvas-transition-length $offcanvas-transition-timing;
+
background: $offcanvas-exit-background;
- cursor: pointer;
- transition: background $offcanvas-transition-length $offcanvas-transition-timing;
- .is-off-canvas-open & {
- display: block;
+ opacity: 0;
+ visibility: hidden;
+
+ overflow: hidden;
+
+ &.is-visible {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ &.is-closable {
+ cursor: pointer;
+ }
+
+ &.is-overlay-absolute {
+ position: absolute;
+ }
+
+ &.is-overlay-fixed {
+ position: fixed;
}
}
}
- /// Adds basic styles for an off-canvas menu.
- @mixin off-canvas-base {
+ // Adds basic styles for an off-canvas wrapper.
+ @mixin off-canvas-wrapper() {
+ position: relative;
+ overflow: hidden;
+ }
+
+ /// Adds basic styles for an off-canvas panel.
+ @mixin off-canvas-base(
+ $background: $offcanvas-background,
+ $transition: $offcanvas-transition-length $offcanvas-transition-timing,
+ $fixed: true
+ ) {
@include disable-mouse-outline;
- position: absolute;
- background: $offcanvas-background;
- z-index: $offcanvas-zindex;
- max-height: 100%;
- overflow-y: auto;
- transform: translateX(0px);
+
+ @if $fixed == true {
+ position: fixed;
+ }
+ @else {
+ position: absolute;
+ }
+
+ // Set the off-canvas z-index.
+ z-index: $offcanvas-push-zindex;
+
+ // Increase CSS specificity
+ &.is-transition-push {
+ z-index: $offcanvas-push-zindex;
+ }
+
+ transition: transform $transition;
+ backface-visibility: hidden;
+
+ background: $background;
+
+ // Hide inactive off-canvas within the content that have the same position
+ &.is-closed {
+ visibility: hidden;
+ }
+
+ // Overlap only styles.
+ &.is-transition-overlap {
+ z-index: $offcanvas-overlap-zindex;
+
+ &.is-open {
+ box-shadow: $offcanvas-shadow;
+ }
+ }
+
+ // Sets transform to 0 to show an off-canvas panel.
+ &.is-open {
+ transform: translate(0, 0);
+ }
}
+ /// Adds styles to position an off-canvas panel to the left/right/top/bottom.
@mixin off-canvas-position(
$position: left,
- $size: $offcanvas-size,
- $fixed: false
+ $orientation: horizontal,
+ $sizes: if($orientation == horizontal, $offcanvas-sizes, $offcanvas-vertical-sizes)
) {
@if $position == left {
- left: -$size;
top: 0;
- width: $size;
+ left: 0;
+ height: 100%;
+ overflow-y: auto;
+
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ width: $size;
+ transform: translateX(-$size);
+ }
+ }
+
+ // Sets the position for nested off-canvas element
+ @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ transform: translateX(-$size);
+ }
+ }
+ &.is-transition-overlap.is-open {
+ transform: translate(0, 0);
+ }
+ }
+
+ // Sets the open position for the content
+ @at-root .#{$maincontent-class}.is-open-#{$position} {
+ &.has-transition-push {
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ transform: translateX($size);
+ }
+ }
+ }
+ }
}
@else if $position == right {
- right: -$size;
top: 0;
- width: $size;
+ right: 0;
+ height: 100%;
+ overflow-y: auto;
+
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ width: $size;
+ transform: translateX($size);
+ }
+ }
+
+ // Sets the position for nested off-canvas element
+ @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ transform: translateX($size);
+ }
+ }
+ &.is-transition-overlap.is-open {
+ transform: translate(0, 0);
+ }
+ }
+
+ // Sets the open position for the content
+ @at-root .#{$maincontent-class}.is-open-#{$position} {
+ &.has-transition-push {
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ transform: translateX(-$size);
+ }
+ }
+ }
+ }
+ }
+ @else if $position == top {
+ top: 0;
+ left: 0;
+ width: 100%;
+ overflow-x: auto;
+
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ height: $size;
+ transform: translateY(-$size);
+ }
+ }
+
+ // Sets the position for nested off-canvas element
+ @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ transform: translateY(-$size);
+ }
+ }
+ &.is-transition-overlap.is-open {
+ transform: translate(0, 0);
+ }
+ }
+
+ // Sets the open position for the content
+ @at-root .#{$maincontent-class}.is-open-#{$position} {
+ &.has-transition-push {
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ transform: translateY($size);
+ }
+ }
+ }
+ }
}
+ @else if $position == bottom {
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ overflow-x: auto;
- // Generates an open state class that matches the width of the menu
- @at-root {
- .is-open-#{$position} {
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ height: $size;
+ transform: translateY($size);
+ }
+ }
+
+ // Sets the position for nested off-canvas element
+ @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ transform: translateY($size);
+ }
+ }
+ &.is-transition-overlap.is-open {
+ transform: translate(0, 0);
+ }
+ }
+
+ // Sets the open position for the content
+ @at-root .#{$maincontent-class}.is-open-#{$position} {
+ &.has-transition-push {
+ @each $name, $size in $sizes {
+ @include breakpoint($name) {
+ transform: translateY(-$size);
+ }
+ }
+ }
+ }
+ }
+
+ // If $offcanvas-inner-shadow-size is set, add inner box-shadow.
+ // This mimics the off-canvas panel having a lower z-index, without having to have one.
+ @if $offcanvas-inner-shadow-size {
+ &.is-transition-push {
@if $position == left {
- transform: translateX($size);
+ @include inner-side-shadow(right, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
}
@else if $position == right {
- transform: translateX(-$size);
+ @include inner-side-shadow(left, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
+ }
+ @else if $position == top {
+ @include inner-side-shadow(bottom, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
+ }
+ @else if $position == bottom {
+ @include inner-side-shadow(top, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
}
}
}
+
}
- /// Adds styles that reveal an off-canvas menu.
- /// @param {Keyword} $position [left] - Position of the off-canvas menu being revealed.
+ /// Sets the styles for the content container.
+ @mixin off-canvas-content() {
+ transform: none;
+ transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
+ backface-visibility: hidden;
+
+ // Transform scope until the element is closed (makes sure transitionend gets triggered)
+ &.has-transition-push {
+ transform: translate(0, 0);
+ }
+
+ // Consider element & content, nested in another content
+ .off-canvas.is-open {
+ transform: translate(0, 0);
+ }
+ }
+
+ /// Adds styles that reveal an off-canvas panel.
@mixin off-canvas-reveal(
- $position: left
+ $position: left,
+ $zindex: $offcanvas-reveal-zindex,
+ $content: $maincontent-class,
+ $breakpoint: small
) {
- #{$position}: 0;
+ transform: none;
+ z-index: $zindex;
+ transition: none;
+ visibility: visible;
+
+ @if not $offcanvas-fixed-reveal {
+ position: absolute;
+ }
+
+ .close-button {
+ display: none;
+ }
+
+ // Consider revealed element is nested in content
+ .#{$maincontent-class} & {
+ transform: none;
+ }
- & ~ .#{$maincontent-class} {
- margin-#{$position}: $offcanvas-size;
+ @at-root .#{$content}.has-reveal-#{$position} {
+ margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint);
+ }
+
+ // backwards compatibility (prior to v6.4)
+ & ~ .#{$content} {
+ margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint);
+ }
+ }
+
+ /// Overrides the off-canvas styles
+ @mixin in-canvas() {
+ visibility: visible;
+ height: auto;
+ position: static;
+ background: inherit;
+ width: inherit;
+ overflow: inherit;
+ transition: inherit;
+
+ // Increase CSS specificity
+ &.position-left,
+ &.position-right,
+ &.position-top,
+ &.position-bottom {
+ box-shadow: none;
+ transform: none;
+ }
+
+ .close-button {
+ display: none;
}
}
@mixin foundation-off-canvas {
@include off-canvas-basics;
+ // Off-canvas wrapper
+ .off-canvas-wrapper {
+ @include off-canvas-wrapper;
+ }
+
// Off-canvas container
.off-canvas {
@include off-canvas-base;
- &.position-left { @include off-canvas-position(left); }
- &.position-right { @include off-canvas-position(right); }
+ // Force position absolute for nested off-canvas because fixed doesn't work for push transition within the transform scope.
+ @at-root .#{$maincontent-class} & {
+ // NOTE: since overlap transition is currently forced if nested, there's no need to force position absolute until nested push transition is supported.
+ // position: absolute;
+ }
+ }
+
+ // Off-canvas container with absolute position
+ .off-canvas-absolute {
+ @include off-canvas-base($fixed: false);
}
- // Reveal off-canvas menu on larger screens
+ // Off-canvas position classes
+ .position-left { @include off-canvas-position(left, horizontal); }
+ .position-right { @include off-canvas-position(right, horizontal); }
+ .position-top { @include off-canvas-position(top, vertical); }
+ .position-bottom { @include off-canvas-position(bottom, vertical); }
+
+ .off-canvas-content {
+ @include off-canvas-content;
+ }
+
+ // Reveal off-canvas panel on larger screens
@each $name, $value in $breakpoint-classes {
- @if $name != small {
+ @if $name != $-zf-zero-breakpoint {
@include breakpoint($name) {
.position-left.reveal-for-#{$name} {
- @include off-canvas-reveal(left);
+ @include off-canvas-reveal(left, $offcanvas-reveal-zindex, $maincontent-class, $name);
}
+
.position-right.reveal-for-#{$name} {
- @include off-canvas-reveal(right);
+ @include off-canvas-reveal(right, $offcanvas-reveal-zindex, $maincontent-class, $name);
+ }
+
+ .position-top.reveal-for-#{$name} {
+ @include off-canvas-reveal(top, $offcanvas-reveal-zindex, $maincontent-class, $name);
+ }
+
+ .position-bottom.reveal-for-#{$name} {
+ @include off-canvas-reveal(bottom, $offcanvas-reveal-zindex, $maincontent-class, $name);
+ }
+ }
+ }
+ }
+
+ // Move in-canvas for larger screens
+ @each $name, $value in $breakpoint-classes {
+ @if $name != $-zf-zero-breakpoint {
+ @include breakpoint($name) {
+ .off-canvas.in-canvas-for-#{$name} {
+ @include in-canvas;
}
}
}
generators/foundation/public/stylesheets/foundation6/components/_orbit.scss +17 -7
@@ @@ -58,25 +58,33 @@ $orbit-control-zindex: 10 !default;
/// Adds styles for the inner Orbit slide container. These styles are used on the `.orbit-container` class.
@mixin orbit-container {
position: relative;
+ height: 0; // Prevent FOUC by not showing until JS sets height
margin: 0;
- overflow: hidden;
list-style: none;
+ overflow: hidden;
}
/// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class.
@mixin orbit-slide {
width: 100%;
- max-height: 100%;
+
+ &.no-motionui {
+ &.is-active {
+ top: 0;
+ left: 0;
+ }
+ }
}
@mixin orbit-figure {
margin: 0;
}
+ /// Adds styles for a slide containing an image. These styles are used on the `.orbit-image` class.
@mixin orbit-image {
- margin: 0;
width: 100%;
max-width: 100%;
+ margin: 0;
}
/// Adds styles for an orbit slide caption. These styles are used on the `.orbit-caption` class.
@@ @@ -84,16 +92,17 @@ $orbit-control-zindex: 10 !default;
position: absolute;
bottom: 0;
width: 100%;
- padding: $orbit-caption-padding;
margin-bottom: 0;
- color: foreground($orbit-caption-background);
+ padding: $orbit-caption-padding;
+
background-color: $orbit-caption-background;
+ color: color-pick-contrast($orbit-caption-background);
}
/// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS.
@mixin orbit-control {
@include disable-mouse-outline;
- @include v-align-middle;
+ @include vertical-center;
z-index: $orbit-control-zindex;
padding: $orbit-control-padding;
color: $white;
@@ @@ -128,8 +137,9 @@ $orbit-control-zindex: 10 !default;
width: $orbit-bullet-diameter;
height: $orbit-bullet-diameter;
margin: $orbit-bullet-margin;
- background-color: $orbit-bullet-background;
+
border-radius: 50%;
+ background-color: $orbit-bullet-background;
&:hover {
background-color: $orbit-bullet-background-active;
generators/foundation/public/stylesheets/foundation6/components/_pagination.scss +77 -45
@@ @@ -10,7 +10,7 @@
/// @type Number
$pagination-font-size: rem-calc(14) !default;
- /// Default bottom margin of the media object.
+ /// Default bottom margin of the pagination object.
/// @type Number
$pagination-margin-bottom: $global-margin !default;
@@ @@ -40,7 +40,7 @@ $pagination-item-background-current: $primary-color !default;
/// Text color of the pagination item for the current page.
/// @type Color
- $pagination-item-color-current: foreground($pagination-item-background-current) !default;
+ $pagination-item-color-current: $white !default;
/// Text color of a disabled pagination item.
/// @type Color
@@ @@ -50,33 +50,58 @@ $pagination-item-color-disabled: $medium-gray !default;
/// @type Color
$pagination-ellipsis-color: $black !default;
- /// If `false`, don't display page number links on mobile, only next/previous links.
+ /// If `false`, don't display page number links on mobile, only next/previous links
+ /// and optionally current page number.
/// @type Boolean
$pagination-mobile-items: false !default;
+ /// If `true`, display the current page number on mobile even if `$pagination-mobile-items` is set to `false`.
+ /// This parameter will only override the visibility setting of the current item for `$pagination-mobile-items: false;`,
+ /// it will not affect the current page number visibility when `$pagination-mobile-items` is set to `true`.
+ /// @type Boolean
+ $pagination-mobile-current-item: false !default;
+
/// If `true`, arrows are added to the next and previous links of pagination.
/// @type Boolean
$pagination-arrows: true !default;
/// Adds styles for a pagination container. Apply this to a `<ul>`.
- @mixin pagination-container {
+ @mixin pagination-container (
+ $margin-bottom: $pagination-margin-bottom,
+ $font-size: $pagination-font-size,
+ $spacing: $pagination-item-spacing,
+ $radius: $pagination-radius,
+ $color: $pagination-item-color,
+ $padding: $pagination-item-padding,
+ $background-hover: $pagination-item-background-hover
+ ) {
@include clearfix;
margin-#{$global-left}: 0;
- margin-bottom: $pagination-margin-bottom;
+ margin-bottom: $margin-bottom;
// List item
li {
- font-size: $pagination-font-size;
- margin-#{$global-right}: $pagination-item-spacing;
- display: none;
- border-radius: $pagination-radius;
+ margin-#{$global-right}: $spacing;
+ border-radius: $radius;
+ font-size: $font-size;
+
+ @if $pagination-mobile-items {
+ display: inline-block;
+ }
+ @else {
+ display: none;
- @if not $pagination-mobile-items {
&:last-child,
&:first-child {
display: inline-block;
}
+ @if $pagination-mobile-current-item {
+ &.current {
+ display: inline-block;
+ }
+ }
+
@include breakpoint(medium) {
display: inline-block;
}
@@ @@ -86,49 +111,37 @@ $pagination-arrows: true !default;
// Page links
a,
button {
- color: $pagination-item-color;
display: block;
- padding: $pagination-item-padding;
- border-radius: $global-radius;
+ padding: $padding;
+ border-radius: $radius;
+ color: $color;
&:hover {
- background: $pagination-item-background-hover;
- }
- }
-
- // Symbols
- @if $pagination-arrows {
- [aria-label="previous"] {
- &::before {
- content: '«';
- display: inline-block;
- margin-#{$global-right}: 0.75rem;
- }
- }
-
- [aria-label="next"] {
- &::after {
- content: '»';
- display: inline-block;
- margin-#{$global-left}: 0.75rem;
- }
+ background: $background-hover;
}
}
}
/// Adds styles for the current pagination item. Apply this to an `<a>`.
- @mixin pagination-item-current {
- padding: $pagination-item-padding;
- background: $pagination-item-background-current;
- color: $pagination-item-color-current;
+ @mixin pagination-item-current (
+ $padding: $pagination-item-padding,
+ $background-current: $pagination-item-background-current,
+ $color-current: $pagination-item-color-current
+ ) {
+ padding: $padding;
+ background: $background-current;
+ color: $color-current;
cursor: default;
}
/// Adds styles for a disabled pagination item. Apply this to an `<a>`.
- @mixin pagination-item-disabled {
- padding: $pagination-item-padding;
- color: $pagination-item-color-disabled;
- cursor: default;
+ @mixin pagination-item-disabled (
+ $padding: $pagination-item-padding,
+ $color: $pagination-item-color-disabled
+ ) {
+ padding: $padding;
+ color: $color;
+ cursor: not-allowed;
&:hover {
background: transparent;
@@ @@ -136,10 +149,13 @@ $pagination-arrows: true !default;
}
/// Adds styles for an ellipsis for use in a pagination list.
- @mixin pagination-ellipsis {
- content: '…';
- padding: $pagination-item-padding;
- color: $pagination-ellipsis-color;
+ @mixin pagination-ellipsis (
+ $padding: $pagination-item-padding,
+ $color: $pagination-ellipsis-color
+ ) {
+ padding: $padding;
+ content: '\2026';
+ color: $color;
}
@mixin foundation-pagination {
@@ @@ -158,4 +174,20 @@ $pagination-arrows: true !default;
@include pagination-ellipsis;
}
}
+
+ @if $pagination-arrows {
+ .pagination-previous a::before,
+ .pagination-previous.disabled::before {
+ display: inline-block;
+ margin-#{$global-right}: 0.5rem;
+ content: '\00ab';
+ }
+
+ .pagination-next a::after,
+ .pagination-next.disabled::after {
+ display: inline-block;
+ margin-#{$global-left}: 0.5rem;
+ content: '\00bb';
+ }
+ }
}
generators/foundation/public/stylesheets/foundation6/components/_progress-bar.scss +16 -35
@@ @@ -2,36 +2,12 @@
// foundation.zurb.com
// Licensed under MIT Open Source
- ////
- /// @group progress-bar
- ////
-
- /// Height of a progress bar.
- /// @type Number
- $progress-height: 1rem !default;
-
- /// Background color of a progress bar.
- /// @type Color
- $progress-background: $medium-gray !default;
-
- /// Bottom margin of a progress bar.
- /// @type Number
- $progress-margin-bottom: $global-margin !default;
-
- /// Default color of a progress bar's meter.
- /// @type Color
- $progress-meter-background: $primary-color !default;
-
- /// Default radius of a progress bar.
- /// @type Number
- $progress-radius: $global-radius !default;
-
/// Adds styles for a progress bar container.
@mixin progress-container {
- background-color: $progress-background;
height: $progress-height;
margin-bottom: $progress-margin-bottom;
border-radius: $progress-radius;
+ background-color: $progress-background;
}
/// Adds styles for the inner meter of a progress bar.
@@ @@ -41,20 +17,25 @@ $progress-radius: $global-radius !default;
width: 0%;
height: 100%;
background-color: $progress-meter-background;
- border-radius: $global-radius;
+
+ @if has-value($progress-radius) {
+ border-radius: $global-radius;
+ }
}
/// Adds styles for text in the progress meter.
@mixin progress-meter-text {
+ @include absolute-center;
position: absolute;
- top: 50%;
- #{$global-left}: 50%;
- transform: translate(-50%, -50%);
margin: 0;
font-size: 0.75rem;
font-weight: bold;
color: $white;
white-space: nowrap;
+
+ @if has-value($progress-radius) {
+ border-radius: $progress-radius;
+ }
}
@mixin foundation-progress-bar {
@@ @@ -62,7 +43,7 @@ $progress-radius: $global-radius !default;
.progress {
@include progress-container;
- @each $name, $color in $foundation-colors {
+ @each $name, $color in $foundation-palette {
&.#{$name} {
.progress-meter {
background-color: $color;
@@ @@ -71,13 +52,13 @@ $progress-radius: $global-radius !default;
}
}
- // Progress bar meter
+ // Inner meter
.progress-meter {
@include progress-meter;
+ }
- // Progress bar meter text
- .progress-meter-text {
- @include progress-meter-text;
- }
+ // Inner meter text
+ .progress-meter-text {
+ @include progress-meter-text;
}
}
generators/foundation/public/stylesheets/foundation6/components/_responsive-embed.scss +70 -0
@@ @@ -0,0 +1,70 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group responsive-embed
+ ////
+
+ /// Margin below a responsive embed container.
+ /// @type Number
+ $responsive-embed-margin-bottom: rem-calc(16) !default;
+
+ /// Aspect ratios used to determine padding-bottom of responsive embed containers.
+ /// @type Map
+ $responsive-embed-ratios: (
+ default: 4 by 3,
+ widescreen: 16 by 9,
+ ) !default;
+
+ // WARNING: Will be removed in version 6.4
+ $responsive-embed-ratio: default;
+
+ /// Creates a responsive embed container.
+ /// @param {String|List} $ratio [default] - Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`.
+ @mixin responsive-embed($ratio: default) {
+ @if type-of($ratio) == 'string' {
+ $ratio: map-get($responsive-embed-ratios, $ratio);
+ }
+ position: relative;
+ height: 0;
+ margin-bottom: $responsive-embed-margin-bottom;
+ padding-bottom: ratio-to-percentage($ratio);
+ overflow: hidden;
+
+ iframe,
+ object,
+ embed,
+ video {
+ position: absolute;
+ top: 0;
+ #{$global-left}: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ @mixin foundation-responsive-embed {
+ .responsive-embed,
+ .flex-video {
+ @include responsive-embed($ratio: default);
+
+ $ratios: map-remove($responsive-embed-ratios,default);
+
+ @each $name, $ratio in $ratios {
+ &.#{$name} {
+ padding-bottom: ratio-to-percentage($ratio);
+ }
+ }
+ }
+ }
+
+ @mixin foundation-flex-video {
+ @warn 'This mixin is being replaced by foundation-responsive-embed(). foundation-flex-video() will be removed in Foundation 6.4.';
+ @include foundation-responsive-embed;
+ }
+
+ @mixin flex-video($ratio: $responsive-embed-ratio) {
+ @warn 'This mixin is being replaced by responsive-embed(). flex-video() will be removed in Foundation 6.4.';
+ @include responsive-embed($ratio);
+ }
generators/foundation/public/stylesheets/foundation6/components/_reveal.scss +59 -34
@@ @@ -18,10 +18,6 @@ $reveal-width: 600px !default;
/// @type Number
$reveal-max-width: $global-width !default;
- /// Offset from the top of the window when a modal is added.
- /// @type Number
- $reveal-offset: rem-calc(100) !default;
-
/// Default padding inside a modal.
/// @type Number
$reveal-padding: $global-padding !default;
@@ @@ -36,45 +32,59 @@ $reveal-radius: $global-radius !default;
/// z-index for modals. The overlay uses this value, while the modal itself uses this value plus one.
/// @type Number
- $reveal-zindex: 1005;
+ $reveal-zindex: 1005 !default;
/// Background color of modal overlays.
/// @type Color
$reveal-overlay-background: rgba($black, 0.45) !default;
+
+ // Placeholder selector for medium-and-up modals
+ // Prevents duplicate CSS when defining multiple Reveal sizes
+ @include breakpoint(medium) {
+ %reveal-centered {
+ right: auto;
+ left: auto;
+ margin: 0 auto;
+ }
+ }
+
+
/// Adds styles for a modal overlay.
/// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay.
- @mixin reveal-overlay {
- display: none;
+ @mixin reveal-overlay($background: $reveal-overlay-background) {
position: fixed;
top: 0;
+ right: 0;
bottom: 0;
left: 0;
- right: 0;
z-index: $reveal-zindex;
- background-color: $reveal-overlay-background;
+
+ display: none;
+ background-color: $background;
overflow-y: scroll;
}
/// Adds base styles for a modal.
@mixin reveal-modal-base {
@include disable-mouse-outline;
- display: none;
z-index: $reveal-zindex + 1;
+ // Workaround android browser z-index bug
+ backface-visibility: hidden;
+
+ display: none;
padding: $reveal-padding;
+
border: $reveal-border;
- // margin: 100px auto 0 100px;
- margin: 100px auto 0 auto;
- background-color: $reveal-background;
border-radius: $reveal-radius;
+ background-color: $reveal-background;
@include breakpoint(medium) {
min-height: 0;
}
// Make sure rows don't have a min-width on them
- .column,
- .columns {
+ .column {
min-width: 0;
}
@@ @@ -94,24 +104,41 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
@include breakpoint(medium) {
@extend %reveal-centered;
width: $width;
- max-width: $reveal-max-width;
+ max-width: $max-width;
}
}
/// Creates a full-screen modal, which stretches the full width and height of the window.
@mixin reveal-modal-fullscreen {
- // scss-lint:disable DuplicateProperty
top: 0;
left: 0;
+
width: 100%;
+ max-width: none;
height: 100%;
- height: 100vh;
+ height: 100vh; // sass-lint:disable-line no-duplicate-properties
min-height: 100vh;
- max-width: none;
margin-left: 0;
+
+ border: 0;
+ border-radius: 0;
}
@mixin foundation-reveal {
+ // [TODO] Is this necessary?
+ body.is-reveal-open { // sass-lint:disable-line no-qualifying-elements
+ overflow: hidden;
+ }
+
+ // html gets this class only in iOS
+ html.is-reveal-open,
+ html.is-reveal-open body {
+ min-height: 100%;
+ overflow: hidden;
+ position: fixed;
+ user-select: none;
+ }
+
// Overlay
.reveal-overlay {
@include reveal-overlay;
@@ @@ -121,23 +148,17 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
.reveal {
@include reveal-modal-base;
@include reveal-modal-width($reveal-width);
- position: absolute;
+ position: relative;
+ top: 100px;
+ margin-right: auto;
+ margin-left: auto;
overflow-y: auto;
+
// Remove padding
&.collapse {
padding: 0;
}
- // Placeholder selector for medium-and-up modals
- // Prevents duplicate CSS when defining multiple Reveal sizes
- @include breakpoint(medium) {
- %reveal-centered {
- left: auto;
- right: auto;
- margin: 0 auto;
- }
- }
-
// Sizing classes
&.tiny { @include reveal-modal-width(30%); }
&.small { @include reveal-modal-width(50%); }
@@ @@ -147,9 +168,13 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
&.full {
@include reveal-modal-fullscreen;
}
- }
- }
- body.is-reveal-open {
- overflow: hidden;
+ @include breakpoint($-zf-zero-breakpoint only) {
+ @include reveal-modal-fullscreen;
+ }
+
+ &.without-overlay {
+ position: fixed;
+ }
+ }
}
generators/foundation/public/stylesheets/foundation6/components/_slider.scss +17 -38
@@ @@ -9,43 +9,11 @@
/// @group slider
////
- /// Default height of the slider.
+ /// Default slider width of a vertical slider. (Doesn't apply to the native slider.)
/// @type Number
- $slider-height: 0.5rem !default;
+ $slider-width-vertical: 0.5rem !default;
- /// Default slider width of a vertical slider.
- /// @type Number
- $slider-width-vertical: $slider-height !default;
-
- /// Default background color of the slider's track.
- /// @type Color
- $slider-background: $light-gray !default;
-
- /// Default color of the active fill color of the slider.
- /// @type Color
- $slider-fill-background: $medium-gray !default;
-
- /// Default height of the handle of the slider.
- /// @type Number
- $slider-handle-height: 1.4rem !default;
-
- /// Default width of the handle of the slider.
- /// @type Number
- $slider-handle-width: 1.4rem !default;
-
- /// Default color of the handle for the slider.
- /// @type Color
- $slider-handle-background: $primary-color !default;
-
- /// Default fade amount of a disabled slider.
- /// @type Number
- $slider-opacity-disabled: 0.25 !default;
-
- /// Default radius for slider.
- /// @type Number
- $slider-radius: $global-radius !default;
-
- /// Transition properties to apply to the slider handle and fill.
+ /// Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)
/// @type Transition
$slider-transition: all 0.2s ease-in-out !default;
@@ @@ -55,6 +23,7 @@ $slider-transition: all 0.2s ease-in-out !default;
height: $slider-height;
margin-top: 1.25rem;
margin-bottom: 2.25rem;
+
background-color: $slider-background;
cursor: pointer;
user-select: none;
@@ @@ -66,9 +35,11 @@ $slider-transition: all 0.2s ease-in-out !default;
position: absolute;
top: 0;
left: 0;
+
display: inline-block;
max-width: 100%;
height: $slider-height;
+
background-color: $slider-fill-background;
transition: $slider-transition;
@@ @@ -80,17 +51,18 @@ $slider-transition: all 0.2s ease-in-out !default;
/// Adds the general styles for the slider handles.
@mixin slider-handle {
@include disable-mouse-outline;
- @include v-align-middle;
- position: absolute;
+ @include vertical-center;
left: 0;
z-index: 1;
+
display: inline-block;
width: $slider-handle-width;
height: $slider-handle-height;
+
+ border-radius: $slider-radius;
background-color: $slider-handle-background;
transition: $slider-transition;
touch-action: manipulation;
- border-radius: $slider-radius;
&:hover {
background-color: scale-color($slider-handle-background, $lightness: -15%);
@@ @@ -155,4 +127,11 @@ $slider-transition: all 0.2s ease-in-out !default;
.slider.vertical {
@include slider-vertical;
}
+
+ // RTL support
+ @if $global-text-direction == rtl {
+ .slider:not(.vertical) {
+ transform: scale(-1, 1);
+ }
+ }
}
generators/foundation/public/stylesheets/foundation6/components/_sticky.scss +5 -4
@@ @@ -8,14 +8,15 @@
}
.sticky {
- position: absolute;
+ position: relative;
z-index: 0;
- transform: translate3d(0,0,0);
+ transform: translate3d(0, 0, 0);
}
.sticky.is-stuck {
position: fixed;
z-index: 5;
+ width: 100%;
&.is-at-top {
top: 0;
@@ @@ -27,9 +28,9 @@
}
.sticky.is-anchored {
- position: absolute;
- left: auto;
+ position: relative;
right: auto;
+ left: auto;
&.is-at-bottom {
bottom: 0;
generators/foundation/public/stylesheets/foundation6/components/_switch.scss +52 -36
@@ @@ -32,7 +32,7 @@ $switch-height-large: 2.5rem !default;
/// Border radius of the switch
/// @type Number
- $switch-radius: $global-radius;
+ $switch-radius: $global-radius !default;
/// border around a modal.
/// @type Number
@@ @@ -60,37 +60,46 @@ $switch-paddle-transition: all 0.25s ease-out !default;
/// Adds styles for a switch container. Apply this to a container class.
@mixin switch-container {
+ position: relative;
margin-bottom: $switch-margin;
outline: 0;
- position: relative;
- user-select: none;
// These properties cascade down to the switch text
- color: $white;
- font-weight: bold;
font-size: rem-calc(14);
+ font-weight: bold;
+ color: $white;
+
+ user-select: none;
}
/// Adds styles for a switch input. Apply this to an `<input>` within a switch.
@mixin switch-input {
- opacity: 0;
position: absolute;
+ margin-bottom: 0;
+ opacity: 0;
}
/// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
@mixin switch-paddle {
- background: $switch-background;
- cursor: pointer;
- display: block;
+ $switch-width: $switch-height * 2;
+ $paddle-height: $switch-height - ($switch-paddle-offset * 2);
+ $paddle-width: $switch-height - ($switch-paddle-offset * 2);
+ $paddle-active-offest: $switch-width - $paddle-width - $switch-paddle-offset;
+
position: relative;
- width: 4rem;
+ display: block;
+ width: $switch-width;
height: $switch-height;
- transition: $switch-paddle-transition;
+
border-radius: $switch-radius;
+ background: $switch-background;
+ transition: $switch-paddle-transition;
// Resetting these <label> presets so type styles cascade down
- color: inherit;
font-weight: inherit;
+ color: inherit;
+
+ cursor: pointer;
// Needed to override specificity
input + & {
@@ @@ -99,16 +108,19 @@ $switch-paddle-transition: all 0.25s ease-out !default;
// The paddle itself
&::after {
- background: $switch-paddle-background;
- content: '';
- display: block;
position: absolute;
- height: 1.5rem;
- #{$global-left}: 0.25rem;
- top: 0.25rem;
- width: 1.5rem;
- transition: $switch-paddle-transition;
+ top: $switch-paddle-offset;
+ #{$global-left}: $switch-paddle-offset;
+
+ display: block;
+ width: $paddle-width;
+ height: $paddle-height;
+
transform: translate3d(0, 0, 0);
+ border-radius: $switch-paddle-radius;
+ background: $switch-paddle-background;
+ transition: $switch-paddle-transition;
+ content: '';
}
// Change the visual style when the switch is active
@@ @@ -116,7 +128,7 @@ $switch-paddle-transition: all 0.25s ease-out !default;
background: $switch-background-active;
&::after {
- #{$global-left}: 2.25rem;
+ #{$global-left}: $paddle-active-offest;
}
}
@@ @@ -153,39 +165,43 @@ $switch-paddle-transition: all 0.25s ease-out !default;
/// Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.
/// @param {Number} $font-size [1rem] - Font size of label text within the switch.
- /// @param {Number} $width [4rem] - Width of the switch body.
- /// @param {Number} $height [2rem] - Height of the switch body.
- /// @param {Number} $paddle-width [1.5rem] - Width of the switch paddle.
+ /// @param {Number} $switch-height [2rem] - Height of the switch body.
/// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body.
@mixin switch-size(
$font-size: 1rem,
- $width: 4rem,
- $height: 2rem,
- $paddle-width: 1.5rem,
+ $switch-height: 2rem,
$paddle-offset: 0.25rem
) {
- $paddle-height: $height - ($paddle-offset * 2);
- $paddle-left-active: $width - $paddle-width - $paddle-offset;
+
+ $switch-width: $switch-height * 2;
+ $paddle-width: $switch-height - ($paddle-offset * 2);
+ $paddle-height: $switch-height - ($paddle-offset * 2);
+ $paddle-active-offest: $switch-width - $paddle-width - $paddle-offset;
+
+ height: $switch-height;
.switch-paddle {
- width: $width;
- height: $height;
+ width: $switch-width;
+ height: $switch-height;
font-size: $font-size;
}
.switch-paddle::after {
+ top: $paddle-offset;
+ #{$global-left}: $paddle-offset;
width: $paddle-width;
height: $paddle-height;
}
- input:checked ~ .switch-paddle:after {
- #{$global-left}: $paddle-left-active;
+ input:checked ~ .switch-paddle::after {
+ #{$global-left}: $paddle-active-offest;
}
}
@mixin foundation-switch {
// Container class
.switch {
+ height: $switch-height;
@include switch-container;
}
@@ @@ -218,14 +234,14 @@ $switch-paddle-transition: all 0.25s ease-out !default;
// Switch sizes
.switch.tiny {
- @include switch-size(rem-calc(10), 3rem, $switch-height-tiny, 1rem, $switch-paddle-offset);
+ @include switch-size(rem-calc(10), $switch-height-tiny, $switch-paddle-offset);
}
.switch.small {
- @include switch-size(rem-calc(12), 3.5rem, $switch-height-small, 1.25rem, $switch-paddle-offset);
+ @include switch-size(rem-calc(12), $switch-height-small, $switch-paddle-offset);
}
.switch.large {
- @include switch-size(rem-calc(16), 5rem, $switch-height-large, 2rem, $switch-paddle-offset);
+ @include switch-size(rem-calc(16), $switch-height-large, $switch-paddle-offset);
}
}
generators/foundation/public/stylesheets/foundation6/components/_table.scss +197 -79
@@ @@ -2,155 +2,268 @@
// foundation.zurb.com
// Licensed under MIT Open Source
- // scss-lint:disable MergeableSelector, QualifyingElement
+ // sass-lint:disable force-element-nesting, no-qualifying-elements
////
/// @group table
////
- /// Defualt color for table background.
+ /// Default color for table background.
/// @type Color
$table-background: $white !default;
- /// Defualt scale for darkening the striped table rows and the table border.
+ /// Default scale for darkening the striped table rows and the table border.
/// @type Number
$table-color-scale: 5% !default;
- /// Defualt style for table border.
+ /// Default style for table border.
/// @type List
$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;
- /// Defualt padding for table.
+ /// Default padding for table.
/// @type Number
$table-padding: rem-calc(8 10 10) !default;
- /// Defualt scale for darkening the table rows on hover.
+ /// Default scale for darkening the table rows on hover.
/// @type Number
$table-hover-scale: 2% !default;
- /// Defualt color of standard rows on hover.
+ /// Default color of standard rows on hover.
/// @type List
$table-row-hover: darken($table-background, $table-hover-scale) !default;
- /// Defualt color of striped rows on hover.
+ /// Default color of striped rows on hover.
/// @type List
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
- /// Defualt background color for striped rows.
+ /// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.
+ /// @type Boolean
+ $table-is-striped: true !default;
+
+ /// Default background color for striped rows.
/// @type Color
$table-striped-background: smart-scale($table-background, $table-color-scale) !default;
- /// Defualt value for showing the stripe on rows of the tables, excluding the header and footer If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or anyother value, the table rows will have no striping.
- /// @type Keyoword
+ /// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.
+ /// @type Keyword
$table-stripe: even !default;
- /// Defualt color for header background.
+ /// Default color for header background.
/// @type Color
$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
- /// Defualt color for footer background.
+ /// Default color of header rows on hover.
+ /// @type List
+ $table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;
+
+ /// Default color for footer background.
/// @type Color
$table-foot-background: smart-scale($table-background, $table-color-scale) !default;
- /// Defualt font color for header.
+ /// Default color of footer rows on hover.
+ /// @type List
+ $table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;
+
+ /// Default font color for header.
/// @type Color
$table-head-font-color: $body-font-color !default;
- /// Defualt value for showing the header when using stacked tables.
+ /// Default font color for footer.
+ /// @type Color
+ $table-foot-font-color: $body-font-color !default;
+
+ /// Default value for showing the header when using stacked tables.
/// @type Boolean
- $show-header-for-stacked: false;
+ $show-header-for-stacked: false !default;
- /// Adds the general styles for tables.
- /// @param {Keyword} $stripe [$table-stripe] - Uses kewords even, odd, or none to darken rows of the table. The defualt value is even.
- @mixin table($stripe: $table-stripe) {
- margin-bottom: $global-margin;
- border-radius: $global-radius;
+ /// Breakpoint at which stacked table switches from mobile to desktop view.
+ /// @type Breakpoint
+ $table-stack-breakpoint: medium !default;
- @at-root {
- thead,
- tbody,
- tfoot {
- border: $table-border;
- background-color: $table-background;
+ @mixin -zf-table-stripe($stripe: $table-stripe) {
+ tr {
+ // If stripe is set to even, darken the even rows.
+ @if $stripe == even {
+ &:nth-child(even) {
+ border-bottom: 0;
+ background-color: $table-striped-background;
+ }
}
- // Caption
- caption {
- font-weight: $global-weight-bold;
+ // If stripe is set to odd, darken the odd rows.
+ @else if $stripe == odd {
+ &:nth-child(odd) {
+ background-color: $table-striped-background;
+ }
+ }
+ }
+ }
+
+ @mixin -zf-table-unstripe() {
+ tr {
+ border-bottom: 0;
+ border-bottom: $table-border;
+ background-color: $table-background;
+ }
+ }
+
+ @mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {
+ thead,
+ tbody,
+ tfoot {
+ border: $table-border;
+ background-color: $table-background;
+ }
+
+ // Caption
+ caption {
+ padding: $table-padding;
+ font-weight: $global-weight-bold;
+ }
+
+ // Table head
+ thead {
+ background: $table-head-background;
+ color: $table-head-font-color;
+ }
+
+ // Table foot
+ tfoot {
+ background: $table-foot-background;
+ color: $table-foot-font-color;
+ }
+
+ // Table head and foot
+ thead,
+ tfoot {
+ // Rows within head and foot
+ tr {
+ background: transparent;
+ }
+
+ // Cells within head and foot
+ th,
+ td {
padding: $table-padding;
+ font-weight: $global-weight-bold;
+ text-align: #{$global-left};
}
+ }
- // Table head and foot
- thead,
- tfoot {
- background: $table-head-background;
- color: $table-head-font-color;
+ // Table rows
+ tbody {
+ th,
+ td {
+ padding: $table-padding;
+ }
+ }
- // Rows within head and foot
- tr {
- background: transparent;
- }
+ // If tables are striped
+ @if $is-striped == true {
+ tbody {
+ @include -zf-table-stripe($stripe);
+ }
- // Cells within head and foot
- th,
- td {
- padding: $table-padding;
- font-weight: $global-weight-bold;
- text-align: #{$global-left};
+ &.unstriped {
+ tbody {
+ @include -zf-table-unstripe();
+ background-color: $table-background;
}
}
+ }
- // Table rows
+ // If tables are not striped
+ @else if $is-striped == false {
tbody {
- tr {
- // If stripe is set to even, darken the even rows.
- @if $stripe == even {
- &:nth-child(even) {
- background-color: $table-striped-background;
- }
- }
-
- // If stripe is set to odd, darken the odd rows.
- @else if $stripe == odd {
- &:nth-child(odd) {
- background-color: $table-striped-background;
- }
- }
- }
+ @include -zf-table-unstripe();
+ }
- th,
- td {
- padding: $table-padding;
+ &.striped {
+ tbody {
+ @include -zf-table-stripe($stripe);
}
}
}
}
+ /// Adds the general styles for tables.
+ /// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.
+ @mixin table(
+ $stripe: $table-stripe,
+ $nest: false
+ ) {
+ border-collapse: collapse;
+ width: 100%;
+ margin-bottom: $global-margin;
+ border-radius: $global-radius;
+
+ @if $nest {
+ @include -zf-table-children-styles($stripe);
+ }
+ @else {
+ @at-root {
+ @include -zf-table-children-styles($stripe);
+ }
+ }
+ }
+
/// Adds the ability to horizontally scroll the table when the content overflows horizontally.
@mixin table-scroll {
display: block;
width: 100%;
- overflow-y: scroll;
+ overflow-x: auto;
}
/// Slightly darkens the table rows on hover.
@mixin table-hover {
- tr {
+ thead tr {
+ //Darkens the table header rows on hover.
+ &:hover {
+ background-color: $table-head-row-hover;
+ }
+ }
+
+ tfoot tr {
+ //Darkens the table footer rows on hover.
+ &:hover {
+ background-color: $table-foot-row-hover;
+ }
+ }
+
+ tbody tr {
//Darkens the non-striped table rows on hover.
&:hover {
background-color: $table-row-hover;
}
+ }
- //Darkens the even striped table rows.
+ @if $table-is-striped == true {
+ // Darkens the even striped table rows.
@if($table-stripe == even) {
- &:nth-of-type(even):hover {
+ &:not(.unstriped) tr:nth-of-type(even):hover {
background-color: $table-row-stripe-hover;
}
}
- //Darkens the odd striped table rows.
+ // Darkens the odd striped table rows.
@elseif($table-stripe == odd) {
- &:nth-of-type(odd):hover {
+ &:not(.unstriped) tr:nth-of-type(odd):hover {
+ background-color: $table-row-stripe-hover;
+ }
+ }
+ }
+
+ @else if $table-is-striped == false {
+ // Darkens the even striped table rows.
+ @if($table-stripe == even) {
+ &.striped tr:nth-of-type(even):hover {
+ background-color: $table-row-stripe-hover;
+ }
+ }
+
+ // Darkens the odd striped table rows.
+ @elseif($table-stripe == odd) {
+ &.striped tr:nth-of-type(odd):hover {
background-color: $table-row-stripe-hover;
}
}
@@ @@ -162,15 +275,12 @@ $show-header-for-stacked: false;
@mixin table-stack($header: $show-header-for-stacked) {
@if $header {
thead {
- th:first-child {
- display: block;
- }
-
th {
- display: none;
+ display: block;
}
}
- } @else {
+ }
+ @else {
thead {
display: none;
}
@@ @@ -191,13 +301,13 @@ $show-header-for-stacked: false;
}
}
- @mixin foundation-table {
+ @mixin foundation-table($nest: false) {
table {
- @include table;
+ @include table($nest: $nest);
}
table.stack {
- @include breakpoint(medium down) {
+ @include breakpoint($table-stack-breakpoint down) {
@include table-stack;
}
}
@@ @@ -209,4 +319,12 @@ $show-header-for-stacked: false;
table.hover {
@include table-hover;
}
+
+ .table-scroll {
+ overflow-x: auto;
+
+ table {
+ width: auto;
+ }
+ }
}
generators/foundation/public/stylesheets/foundation6/components/_tabs.scss +126 -67
@@ @@ -14,22 +14,26 @@ $tab-margin: 0 !default;
/// @type Color
$tab-background: $white !default;
- /// active background color of a tab bar.
+ /// Font color of tab item.
/// @type Color
- $tab-background-active: $light-gray !default;
+ $tab-color: $primary-color !default;
- /// Default border color of tab content.
+ /// Active background color of a tab bar.
/// @type Color
- $tab-border: $light-gray !default;
+ $tab-background-active: $light-gray !default;
- /// Default text color for items in a Menu.
+ /// Active font color of tab item.
/// @type Color
- $tab-item-color: foreground($tab-background, $primary-color) !default;
+ $tab-active-color: $primary-color !default;
+
+ /// Font size of tab items.
+ /// @type Number
+ $tab-item-font-size: rem-calc(12) !default;
/// Default background color on hover for items in a Menu.
$tab-item-background-hover: $white !default;
- /// Default padding of a a tab item.
+ /// Default padding of a tab item.
/// @type Number
$tab-item-padding: 1.25rem 1.5rem !default;
@@ @@ -47,91 +51,146 @@ $tab-content-border: $light-gray !default;
/// Default text color of tab content.
/// @type Color
- $tab-content-color: foreground($tab-background, $primary-color) !default;
+ $tab-content-color: $body-font-color !default;
/// Default padding for tab content.
/// @type Number | List
$tab-content-padding: 1rem !default;
- @mixin foundation-tabs {
- .tabs {
- @include clearfix;
- margin: $tab-margin;
- list-style-type: none;
- background: $tab-background;
- border: 1px solid $tab-content-border;
-
- // Simple
- &.simple {
- > li > a {
- padding: 0;
-
- &:hover {
- background: transparent;
- }
- }
+ /// Adds styles for a tab container. Apply this to a `<ul>`.
+ @mixin tabs-container (
+ $margin: $tab-margin,
+ $background: $tab-background,
+ $border-color: $tab-content-border
+ ) {
+ @include clearfix;
+ margin: $margin;
+ border: 1px solid $border-color;
+ background: $background;
+ list-style-type: none;
+ }
+
+ /// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
+ @mixin tabs-container-vertical {
+ > li {
+ display: block;
+ float: none;
+ width: auto;
+ }
+ }
+
+ /// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container.
+ @mixin tabs-title (
+ $padding: $tab-item-padding,
+ $font-size: $tab-item-font-size,
+ $color: $tab-color,
+ $color-active: $tab-active-color,
+ $background-hover: $tab-item-background-hover,
+ $background-active: $tab-background-active
+ ) {
+ float: #{$global-left};
+
+ > a {
+ display: block;
+ padding: $padding;
+ font-size: $font-size;
+ line-height: 1;
+ color: $color;
+
+ &:hover {
+ background: $background-hover;
+ color: scale-color($color, $lightness: -14%);
}
- // Vertical
- &.vertical {
- > li {
- width: auto;
- float: none;
- display: block;
- }
+ &:focus,
+ &[aria-selected='true'] {
+ background: $background-active;
+ color: $color-active;
}
+ }
+ }
+
+ /// Adds styles for the wrapper that surrounds a tab group's content panes.
+ @mixin tabs-content (
+ $background: $tab-content-background,
+ $color: $tab-content-color,
+ $border-color: $tab-content-border
+ ) {
+ border: 1px solid $border-color;
+ border-top: 0;
+ background: $background;
+ color: $color;
+ transition: all 0.5s ease;
+ }
+
+ /// Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with `tabs-content()`.
+ @mixin tabs-content-vertical (
+ $border-color: $tab-content-border
+ ) {
+ border: 1px solid $border-color;
+ border-#{$global-left}: 0;
+ }
+
+ /// Adds styles for an individual tab content panel within the tab content container.
+ @mixin tabs-panel (
+ $padding: $tab-content-padding
+ ) {
+ display: none;
+ padding: $padding;
+
+ &.is-active {
+ display: block;
+ }
+ }
- // Primary color
- &.primary {
- background: $primary-color;
+ @mixin foundation-tabs {
+ .tabs {
+ @include tabs-container;
+ }
+
+ // Vertical
+ .tabs.vertical {
+ @include tabs-container-vertical;
+ }
- > li > a {
- color: foreground($primary-color);
+ // Simple
+ .tabs.simple {
+ > li > a {
+ padding: 0;
- &:hover,
- &:focus {
- background: smart-scale($primary-color);
- }
+ &:hover {
+ background: transparent;
}
}
}
- .tabs-title {
- float: #{$global-left};
+ // Primary color
+ .tabs.primary {
+ background: $primary-color;
- > a {
- display: block;
- padding: $tab-item-padding;
- line-height: 1;
- font-size: 12px;
- color: $tab-item-color;
+ > li > a {
+ color: color-pick-contrast($primary-color);
&:hover,
- &:focus,
- &[aria-selected="true"] {
- background: $tab-background-active;
+ &:focus {
+ background: smart-scale($primary-color);
}
}
}
+ .tabs-title {
+ @include tabs-title;
+ }
+
.tabs-content {
- background: $tab-content-background;
- transition: all 0.5s ease;
- border: 1px solid $tab-content-border;
- border-top: 0;
-
- &.vertical {
- border: 1px solid $tab-content-border;
- border-#{$global-left}: 0;
- }
+ @include tabs-content;
}
- .tabs-panel {
- display: none;
- padding: $tab-content-padding;
+ .tabs-content.vertical {
+ @include tabs-content-vertical;
+ }
- &.is-active {
- display: block;
- }
+ .tabs-panel {
+ @include tabs-panel;
}
}
generators/foundation/public/stylesheets/foundation6/components/_thumbnail.scss +17 -4
@@ @@ -32,23 +32,36 @@ $thumbnail-radius: $global-radius !default;
/// Adds thumbnail styles to an element.
@mixin thumbnail {
+ display: inline-block;
+ max-width: 100%;
+ margin-bottom: $thumbnail-margin-bottom;
+
border: $thumbnail-border;
+ border-radius: $thumbnail-radius;
box-shadow: $thumbnail-shadow;
- display: inline-block;
+
line-height: 0;
- max-width: 100%;
+ }
+
+ @mixin thumbnail-link {
transition: $thumbnail-transition;
- border-radius: $thumbnail-radius;
- margin-bottom: $thumbnail-margin-bottom;
&:hover,
&:focus {
box-shadow: $thumbnail-shadow-hover;
}
+
+ image {
+ box-shadow: none;
+ }
}
@mixin foundation-thumbnail {
.thumbnail {
@include thumbnail;
}
+
+ a.thumbnail {
+ @include thumbnail-link;
+ }
}
generators/foundation/public/stylesheets/foundation6/components/_title-bar.scss +61 -21
@@ @@ -6,39 +6,79 @@
/// @group title-bar
////
+ /// Background color of a title bar.
+ /// @type Color
+ $titlebar-background: $black !default;
+
+ /// Color of text inside a title bar.
+ /// @type Color
+ $titlebar-color: $white !default;
+
+ /// Padding inside a title bar.
+ /// @type Length
+ $titlebar-padding: 0.5rem !default;
+
+ /// Font weight of text inside a title bar.
+ /// @type Weight
+ $titlebar-text-font-weight: bold !default;
+
+ /// Color of menu icons inside a title bar.
+ /// @type Color
+ $titlebar-icon-color: $white !default;
+
+ /// Color of menu icons inside a title bar on hover.
+ /// @type Color
+ $titlebar-icon-color-hover: $medium-gray !default;
+
+ /// Spacing between the menu icon and text inside a title bar.
+ /// @type Length
+ $titlebar-icon-spacing: 0.25rem !default;
+
@mixin foundation-title-bar {
.title-bar {
- @include clearfix;
- background: $black;
- color: $white;
- padding: 0.5rem;
+ padding: $titlebar-padding;
+ background: $titlebar-background;
+ color: $titlebar-color;
+
+ @if $global-flexbox {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ }
+ @else {
+ @include clearfix;
+ }
.menu-icon {
- margin-#{$global-left}: 0.25rem;
- margin-#{$global-right}: 0.5rem;
+ margin-#{$global-left}: $titlebar-icon-spacing;
+ margin-#{$global-right}: $titlebar-icon-spacing;
}
}
- .title-bar-left {
- float: left;
+ @if $global-flexbox {
+ .title-bar-left,
+ .title-bar-right {
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
+ }
+
+ .title-bar-right {
+ text-align: right;
+ }
}
+ @else {
+ .title-bar-left {
+ float: left;
+ }
- .title-bar-right {
- float: right;
- text-align: right;
+ .title-bar-right {
+ float: right;
+ text-align: right;
+ }
}
.title-bar-title {
- font-weight: bold;
- vertical-align: middle;
display: inline-block;
- }
-
- .menu-icon {
- @include hamburger($color: white, $color-hover: $medium-gray);
- }
-
- .menu-icon.dark {
- @include hamburger;
+ vertical-align: middle;
+ font-weight: $titlebar-text-font-weight;
}
}
generators/foundation/public/stylesheets/foundation6/components/_tooltip.scss +74 -24
@@ @@ -6,18 +6,34 @@
/// @group tooltip
////
+ /// Default cursor of the defined term.
+ /// @type Keyword
+ $has-tip-cursor: help !default;
+
+ /// Default font weight of the defined term.
+ /// @type Keyword | Number
+ $has-tip-font-weight: $global-weight-bold !default;
+
+ /// Default border bottom of the defined term.
+ /// @type List
+ $has-tip-border-bottom: dotted 1px $dark-gray !default;
+
/// Default color of the tooltip background.
/// @type Color
$tooltip-background-color: $black !default;
/// Default color of the tooltip font.
/// @type Color
- $tooltip-color: $white;
+ $tooltip-color: $white !default;
/// Default padding of the tooltip background.
/// @type Number
$tooltip-padding: 0.75rem !default;
+ /// Default max width for tooltips.
+ /// @type Number
+ $tooltip-max-width: 10rem !default;
+
/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.
/// @type Number
$tooltip-font-size: $small-font-size !default;
@@ @@ -30,43 +46,46 @@ $tooltip-pip-width: 0.75rem !default;
/// @type Number
$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
- /// Default pip offset for tooltips. This controls how far the pip is indented from the left edge of the tooltip.
- /// @type Number
- $tooltip-pip-offset: 1.25rem !default;
-
/// Default radius for tooltips.
/// @type Number
$tooltip-radius: $global-radius !default;
@mixin has-tip {
- border-bottom: dotted 1px $dark-gray;
- font-weight: bold;
position: relative;
display: inline-block;
- &:hover {
- cursor: help;
- }
+ border-bottom: $has-tip-border-bottom;
+ font-weight: $has-tip-font-weight;
+ cursor: $has-tip-cursor;
}
@mixin tooltip {
- background-color: $tooltip-background-color;
- color: $tooltip-color;
- font-size: $tooltip-font-size;
- padding: $tooltip-padding;
position: absolute;
- z-index: 10;
top: calc(100% + #{$tooltip-pip-height});
- max-width: 10rem !important;
+ z-index: 1200;
+
+ max-width: $tooltip-max-width;
+ padding: $tooltip-padding;
+
border-radius: $tooltip-radius;
- // visibility: hidden;
+ background-color: $tooltip-background-color;
+ font-size: $tooltip-font-size;
+ color: $tooltip-color;
&::before {
- @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
- bottom: 100%;
position: absolute;
- left: 50%;
- transform: translateX(-50%);
+ }
+
+ &.bottom {
+ &::before {
+ @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
+ bottom: 100%;
+ }
+
+ &.align-center::before {
+ left: 50%;
+ transform: translateX(-50%);
+ }
}
&.top {
@@ @@ -75,13 +94,21 @@ $tooltip-radius: $global-radius !default;
top: 100%;
bottom: auto;
}
+
+ &.align-center::before {
+ left: 50%;
+ transform: translateX(-50%);
+ }
}
&.left {
&::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
- bottom: auto;
left: 100%;
+ }
+
+ &.align-center::before {
+ bottom: auto;
top: 50%;
transform: translateY(-50%);
}
@@ @@ -90,13 +117,36 @@ $tooltip-radius: $global-radius !default;
&.right {
&::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
- bottom: auto;
- left: auto;
right: 100%;
+ left: auto;
+ }
+
+ &.align-center::before {
+ bottom: auto;
top: 50%;
transform: translateY(-50%);
}
}
+
+ &.align-top::before {
+ bottom: auto;
+ top: 10%;
+ }
+
+ &.align-bottom::before {
+ bottom: 10%;
+ top: auto;
+ }
+
+ &.align-left::before {
+ left: 10%;
+ right: auto;
+ }
+
+ &.align-right::before {
+ left: auto;
+ right: 10%;
+ }
}
@mixin foundation-tooltip {
generators/foundation/public/stylesheets/foundation6/components/_top-bar.scss +128 -10
@@ @@ -12,46 +12,164 @@ $topbar-padding: 0.5rem !default;
/// Background color for the top bar. This color also cascades to menus within the top bar.
/// @type Color
- $topbar-background: #eee !default;
+ $topbar-background: $light-gray !default;
- /// Color for links inside a top bar menu.
+ /// Background color submenus within the top bar. Usefull if $topbar-background is transparent.
/// @type Color
- $topbar-link-color: #fff !default;
+ $topbar-submenu-background: $topbar-background !default;
- /// Width of `<input>` elements inside the top bar.
+ /// Spacing for the top bar title.
+ /// @type Number
+ $topbar-title-spacing: 0.5rem 1rem 0.5rem 0 !default;
+
+ /// Maximum width of `<input>` elements inside the top bar.
/// @type Number
$topbar-input-width: 200px !default;
+ /// Breakpoint at which top bar switches from mobile to desktop view.
+ /// @type Breakpoint
+ $topbar-unstack-breakpoint: medium !default;
+
/// Adds styles for a top bar container.
@mixin top-bar-container {
- @include clearfix;
+ @if $global-flexbox {
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ }
+ @else {
+ @include clearfix;
+ }
+
padding: $topbar-padding;
- &, ul {
+ &,
+ ul {
background-color: $topbar-background;
}
+ // Check if $topbar-background is differnt from $topbar-background-submenu
+ @if ($topbar-background != $topbar-submenu-background) {
+ ul ul {
+ background-color: $topbar-submenu-background;
+ }
+ }
+
+ // Restrain width of inputs by default to make them easier to arrange
input {
- width: $topbar-input-width;
+ max-width: $topbar-input-width;
margin-#{$global-right}: 1rem;
}
+
+ // The above styles shouldn't apply to input group fields
+ .input-group-field {
+ width: 100%;
+ margin-#{$global-right}: 0;
+ }
+
+ input.button { // sass-lint:disable-line no-qualifying-elements
+ width: auto;
+ }
+ }
+
+ /// Makes sections of a top bar stack on top of each other.
+ @mixin top-bar-stacked {
+ @if $global-flexbox {
+ flex-wrap: wrap;
+
+ // Sub-sections
+ .top-bar-left,
+ .top-bar-right {
+ flex: 0 0 100%;
+ max-width: 100%;
+ }
+ }
+ @else {
+ // Sub-sections
+ .top-bar-left,
+ .top-bar-right {
+ width: 100%;
+ }
+ }
+ }
+
+ /// Undoes the CSS applied by the `top-bar-stacked()` mixin.
+ @mixin top-bar-unstack {
+ @if $global-flexbox {
+ flex-wrap: nowrap;
+
+ .top-bar-left {
+ flex: 1 1 auto;
+ margin-right: auto;
+ }
+
+ .top-bar-right {
+ flex: 0 1 auto;
+ margin-left: auto;
+ }
+ }
+ @else {
+ .top-bar-left,
+ .top-bar-right {
+ width: auto;
+ }
+ }
}
@mixin foundation-top-bar {
// Top bar container
.top-bar {
@include top-bar-container;
+
+ // Stack on small screens by default
+ @include top-bar-stacked;
+
+ @include breakpoint($topbar-unstack-breakpoint) {
+ @include top-bar-unstack;
+ }
+
+ // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
+ @each $size in $breakpoint-classes {
+ @if $size != $-zf-zero-breakpoint {
+ &.stacked-for-#{$size} {
+ @include breakpoint($size down) {
+ @include top-bar-stacked;
+ }
+ }
+ }
+ }
}
// Sub-sections
- // Stack on small screens
- @include breakpoint(medium) {
+ @if $global-flexbox {
+ .top-bar-title {
+ flex: 0 0 auto;
+ margin: $topbar-title-spacing;
+ }
+
+ .top-bar-left,
+ .top-bar-right {
+ flex: 0 0 auto;
+ }
+ }
+ @else {
+ .top-bar-title {
+ display: inline-block;
+ float: left;
+ padding: $topbar-title-spacing;
+
+ .menu-icon {
+ bottom: 2px;
+ }
+ }
+
.top-bar-left {
float: left;
}
.top-bar-right {
- float: right
+ float: right;
}
}
}
generators/foundation/public/stylesheets/foundation6/components/_visibility.scss +6 -5
@@ @@ -6,7 +6,7 @@
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
@mixin show-for($size) {
$size: map-get($breakpoints, $size);
- $size: -zf-bp-to-em($size) - (1/16);
+ $size: -zf-bp-to-em($size) - (1 / 16);
@include breakpoint($size down) {
display: none !important;
@@ @@ -20,9 +20,9 @@
$upper-bound-size: -zf-map-next($breakpoints, $size);
// more often than not this will be correct, just one time round the loop it won't so set in scope here
- $lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16);
+ $lower-bound: -zf-bp-to-em($lower-bound-size) - (1 / 16);
// test actual lower-bound-size, if 0 set it to 0em
- @if $lower-bound-size == 0 {
+ @if strip-unit($lower-bound-size) == 0 {
$lower-bound: -zf-bp-to-em($lower-bound-size);
}
@@ @@ -33,6 +33,7 @@
}
@else {
$upper-bound: -zf-bp-to-em($upper-bound-size);
+
@media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
display: none !important;
}
@@ @@ -68,7 +69,7 @@
// Responsive visibility classes
@each $size in $breakpoint-classes {
- @if $size != small {
+ @if $size != $-zf-zero-breakpoint {
.hide-for-#{$size} {
@include hide-for($size);
}
@@ @@ -88,7 +89,7 @@
}
// Screen reader visibility classes
- // Need a "hide-for-sr" class? Add aria-hidden="true" to the element
+ // Need a "hide-for-sr" class? Add aria-hidden='true' to the element
.show-for-sr,
.show-on-focus {
@include element-invisible;
generators/foundation/public/stylesheets/foundation6/forms/_checkbox.scss +14 -9
@@ @@ -7,30 +7,35 @@
////
@mixin foundation-form-checkbox {
- [type="file"],
- [type="checkbox"],
- [type="radio"] {
+ [type='file'],
+ [type='checkbox'],
+ [type='radio'] {
margin: 0 0 $form-spacing;
}
// Styles for input/label siblings
- [type="checkbox"] + label,
- [type="radio"] + label {
+ [type='checkbox'] + label,
+ [type='radio'] + label {
display: inline-block;
+ vertical-align: baseline;
+
margin-#{$global-left}: $form-spacing * 0.5;
margin-#{$global-right}: $form-spacing;
margin-bottom: 0;
- vertical-align: baseline;
+
+ &[for] {
+ cursor: pointer;
+ }
}
// Styles for inputs inside labels
- label > [type="checkbox"],
- label > [type="label"] {
+ label > [type='checkbox'],
+ label > [type='radio'] {
margin-#{$global-right}: $form-spacing * 0.5;
}
// Normalize file input width
- [type="file"] {
+ [type='file'] {
width: 100%;
}
}
generators/foundation/public/stylesheets/foundation6/forms/_error.scss +12 -5
@@ @@ -16,15 +16,15 @@ $abide-labels: true !default;
/// Background color to use for invalid text inputs.
/// @type Color
- $input-background-invalid: $alert-color !default;
+ $input-background-invalid: get-color(alert) !default;
/// Color to use for labels of invalid inputs.
/// @type Color
- $form-label-color-invalid: $alert-color !default;
+ $form-label-color-invalid: get-color(alert) !default;
/// Default font color for form error text.
/// @type Color
- $input-error-color: $alert-color !default;
+ $input-error-color: get-color(alert) !default;
/// Default font size for form error text.
/// @type Number
@@ @@ -35,13 +35,19 @@ $input-error-font-size: rem-calc(12) !default;
$input-error-font-weight: $global-weight-bold !default;
/// Styles the background and border of an input field to have an error state.
+ ///
/// @param {Color} $background [$alert-color] - Color to use for the background and border.
+ /// @param {Number} $background-lighten [10%] - Lightness level of the background color.
@mixin form-input-error(
- $background: $alert-color
+ $background: $input-background-invalid,
+ $background-lighten: 10%
) {
&:not(:focus) {
- background-color: rgba($background, 0.1);
border-color: $background;
+ background-color: mix($background, $white, $background-lighten);
+ &::placeholder {
+ color: $background;
+ }
}
}
@@ @@ -50,6 +56,7 @@ $input-error-font-weight: $global-weight-bold !default;
display: none;
margin-top: $form-spacing * -0.5;
margin-bottom: $form-spacing;
+
font-size: $input-error-font-size;
font-weight: $input-error-font-weight;
color: $input-error-color;
generators/foundation/public/stylesheets/foundation6/forms/_fieldset.scss +6 -6
@@ @@ -23,27 +23,27 @@ $fieldset-margin: rem-calc(18 0) !default;
$legend-padding: rem-calc(0 3) !default;
@mixin fieldset {
- border: $fieldset-border;
- padding: $fieldset-padding;
margin: $fieldset-margin;
+ padding: $fieldset-padding;
+ border: $fieldset-border;
legend {
// Covers up the fieldset's border to create artificial padding
- background: $body-background;
- padding: $legend-padding;
margin: 0;
margin-#{$global-left}: rem-calc(-3);
+ padding: $legend-padding;
}
}
@mixin foundation-form-fieldset {
fieldset {
- border: 0;
- padding: 0;
margin: 0;
+ padding: 0;
+ border: 0;
}
legend {
+ max-width: 100%;
margin-bottom: $form-spacing * 0.5;
}
generators/foundation/public/stylesheets/foundation6/forms/_forms.scss +11 -9
@@ @@ -10,15 +10,17 @@
/// @type Number
$form-spacing: rem-calc(16) !default;
- @import
- 'text',
- 'checkbox',
- 'label',
- 'help-text',
- 'input-group',
- 'fieldset',
- 'select',
- 'error';
+ @import 'text';
+ @import 'checkbox';
+ @import 'label';
+ @import 'help-text';
+ @import 'input-group';
+ @import 'fieldset';
+ @import 'select';
+ @import 'range';
+ @import 'progress';
+ @import 'meter';
+ @import 'error';
@mixin foundation-forms {
@include foundation-form-text;
generators/foundation/public/stylesheets/foundation6/forms/_help-text.scss +1 -1
@@ @@ -8,7 +8,7 @@
/// Default color for help text.
/// @type Color
- $helptext-color: #333 !default;
+ $helptext-color: $black !default;
/// Default font size for help text.
/// @type Number
generators/foundation/public/stylesheets/foundation6/forms/_input-group.scss +82 -10
@@ @@ -22,29 +22,59 @@ $input-prefix-border: 1px solid $medium-gray !default;
$input-prefix-padding: 1rem !default;
@mixin foundation-form-prepostfix {
+ $height: ($input-font-size + $form-spacing * 1.5);
+
.input-group {
- display: table;
+ display: if($global-flexbox, flex, table);
width: 100%;
margin-bottom: $form-spacing;
+
+ @if $global-flexbox {
+ align-items: stretch;
+ }
+
+ > :first-child {
+ border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
+ }
+
+ > :last-child {
+ > * {
+ border-radius: if($global-text-direction == rtl, $input-radius 0 0 $input-radius, 0 $input-radius $input-radius 0);
+ }
+ }
}
%input-group-child {
- display: table-cell;
margin: 0;
- vertical-align: middle;
+ white-space: nowrap;
+
+ @if not $global-flexbox {
+ display: table-cell;
+ vertical-align: middle;
+ }
}
.input-group-label {
@extend %input-group-child;
- text-align: center;
- width: 1%;
- height: 100%;
padding: 0 $input-prefix-padding;
+ border: $input-prefix-border;
background: $input-prefix-background;
+
color: $input-prefix-color;
- border: $input-prefix-border;
+ text-align: center;
+ white-space: nowrap;
+
+ @if $global-flexbox {
+ display: flex;
+ flex: 0 0 auto;
+ align-items: center;
+ }
+ @else {
+ width: 1%;
+ height: 100%;
+ }
- @if hasvalue($input-prefix-border) {
+ @if has-value($input-prefix-border) {
&:first-child {
border-#{$global-right}: 0;
}
@@ @@ -57,14 +87,56 @@ $input-prefix-padding: 1rem !default;
.input-group-field {
@extend %input-group-child;
+ border-radius: 0;
+
+ @if $global-flexbox {
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
+ height: auto;
+ min-width: 0;
+ }
+ @else {
+ height: $height;
+ }
}
.input-group-button {
@extend %input-group-child;
- height: 100%;
padding-top: 0;
padding-bottom: 0;
text-align: center;
- width: 1%;
+
+ @if $global-flexbox {
+ display: flex;
+ flex: 0 0 auto;
+ }
+ @else {
+ width: 1%;
+ height: 100%;
+ }
+
+ a,
+ input,
+ button,
+ label {
+ @extend %input-group-child;
+
+ @if $global-flexbox {
+ height: auto;
+ align-self: stretch;
+ }
+ @else {
+ height: $height;
+ }
+ padding-top: 0;
+ padding-bottom: 0;
+ font-size: $input-font-size;
+ }
+ }
+
+ // Specificity bump needed to prevent override by buttons
+ @if not $global-flexbox {
+ .input-group .input-group-button {
+ display: table-cell;
+ }
}
}
generators/foundation/public/stylesheets/foundation6/forms/_label.scss +2 -0
@@ @@ -25,6 +25,7 @@ $form-label-line-height: 1.8 !default;
@mixin form-label {
display: block;
margin: 0;
+
font-size: $form-label-font-size;
font-weight: $form-label-font-weight;
line-height: $form-label-line-height;
@@ @@ -33,6 +34,7 @@ $form-label-line-height: 1.8 !default;
@mixin form-label-middle {
$input-border-width: get-border-value($input-border, width);
+
margin: 0 0 $form-spacing;
padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0;
}
generators/foundation/public/stylesheets/foundation6/forms/_meter.scss +116 -0
@@ @@ -0,0 +1,116 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group meter
+ ////
+
+ /// Height of a `<meter>` element.
+ /// @type Length
+ $meter-height: 1rem !default;
+
+ /// Border radius of a `<meter>` element.
+ /// @type Length
+ $meter-radius: $global-radius !default;
+
+ /// Background color of a `<meter>` element.
+ /// @type Color
+ $meter-background: $medium-gray !default;
+
+ /// Meter fill for an optimal value in a `<meter>` element.
+ /// @type Color
+ $meter-fill-good: $success-color !default;
+
+ /// Meter fill for an average value in a `<meter>` element.
+ /// @type Color
+ $meter-fill-medium: $warning-color !default;
+
+ /// Meter fill for a suboptimal value in a `<meter>` element.
+ /// @type Color
+ $meter-fill-bad: $alert-color !default;
+
+ @mixin foundation-meter-element {
+ meter {
+ display: block;
+ width: 100%;
+ height: $meter-height;
+ margin-bottom: 1rem;
+
+ // Disable `-webkit-appearance: none` from getting prefixed,
+ // We have disabled autoprefixer first and are just only using
+ // `-moz-appearance: none` as a prefix and neglecting the webkit.
+
+ /*! autoprefixer: off */
+ -moz-appearance: none;
+ appearance: none;
+
+ @if has-value($meter-radius) {
+ border-radius: $meter-radius;
+ }
+
+ // For Firefox
+ border: 0;
+ background: $meter-background;
+
+ // Chrome/Safari/Edge
+ &::-webkit-meter-bar {
+ border: 0;
+ @if has-value($meter-radius) {
+ border-radius: $meter-radius;
+ }
+
+ background: $meter-background;
+ }
+
+ &::-webkit-meter-inner-element {
+ @if has-value($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+
+ &::-webkit-meter-optimum-value {
+ background: $meter-fill-good;
+
+ @if has-value($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+
+ &::-webkit-meter-suboptimum-value {
+ background: $meter-fill-medium;
+
+ @if has-value($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+
+ &::-webkit-meter-even-less-good-value {
+ background: $meter-fill-bad;
+
+ @if has-value($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+
+ &::-moz-meter-bar {
+ background: $primary-color;
+
+ @if has-value($meter-radius) {
+ border-radius: $meter-radius;
+ }
+ }
+
+ &:-moz-meter-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+ background: $meter-fill-good;
+ }
+
+ &:-moz-meter-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+ background: $meter-fill-medium;
+ }
+
+ &:-moz-meter-sub-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+ background: $meter-fill-bad;
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/forms/_progress.scss +94 -0
@@ @@ -0,0 +1,94 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group progress-bar
+ ////
+
+ /// Height of a progress bar.
+ /// @type Number
+ $progress-height: 1rem !default;
+
+ /// Background color of a progress bar.
+ /// @type Color
+ $progress-background: $medium-gray !default;
+
+ /// Bottom margin of a progress bar.
+ /// @type Number
+ $progress-margin-bottom: $global-margin !default;
+
+ /// Default color of a progress bar's meter.
+ /// @type Color
+ $progress-meter-background: $primary-color !default;
+
+ /// Default radius of a progress bar.
+ /// @type Number
+ $progress-radius: $global-radius !default;
+
+ @mixin foundation-progress-element {
+ progress {
+ display: block;
+ width: 100%;
+ height: $progress-height;
+ margin-bottom: $progress-margin-bottom;
+
+ appearance: none;
+
+ @if hasvalue($progress-radius) {
+ border-radius: $progress-radius;
+ }
+
+ // For Firefox
+ border: 0;
+ background: $progress-background;
+
+ &::-webkit-progress-bar {
+ background: $progress-background;
+
+ @if hasvalue($progress-radius) {
+ border-radius: $progress-radius;
+ }
+ }
+
+ &::-webkit-progress-value {
+ background: $progress-meter-background;
+
+ @if hasvalue($progress-radius) {
+ border-radius: $progress-radius;
+ }
+ }
+
+ &::-moz-progress-bar {
+ background: $progress-meter-background;
+
+ @if hasvalue($progress-radius) {
+ border-radius: $progress-radius;
+ }
+ }
+
+ @each $name, $color in $foundation-palette {
+ &.#{$name} {
+ // Internet Explorer sets the fill with color
+ color: $color;
+
+ &::-webkit-progress-value {
+ background: $color;
+ }
+
+ &::-moz-progress-bar {
+ background: $color;
+ }
+ }
+ }
+
+ // For IE and Edge
+ &::-ms-fill {
+ @if hasvalue($progress-radius) {
+ border-radius: $progress-radius;
+ }
+
+ border: 0;
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/forms/_range.scss +149 -0
@@ @@ -0,0 +1,149 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group slider
+ ////
+
+ /// Default height of the slider.
+ /// @type Number
+ $slider-height: 0.5rem !default;
+
+ /// Default background color of the slider's track.
+ /// @type Color
+ $slider-background: $light-gray !default;
+
+ /// Default color of the active fill color of the slider.
+ /// @type Color
+ $slider-fill-background: $medium-gray !default;
+
+ /// Default height of the handle of the slider.
+ /// @type Number
+ $slider-handle-height: 1.4rem !default;
+
+ /// Default width of the handle of the slider.
+ /// @type Number
+ $slider-handle-width: 1.4rem !default;
+
+ /// Default color of the handle for the slider.
+ /// @type Color
+ $slider-handle-background: $primary-color !default;
+
+ /// Default fade amount of a disabled slider.
+ /// @type Number
+ $slider-opacity-disabled: 0.25 !default;
+
+ /// Default radius for slider.
+ /// @type Number
+ $slider-radius: $global-radius !default;
+
+ @mixin foundation-range-input {
+ input[type="range"] { // sass-lint:disable-line no-qualifying-elements
+ $margin: ($slider-handle-height - $slider-height) / 2;
+
+ display: block;
+ width: 100%;
+ height: auto;
+ margin-top: $margin;
+ margin-bottom: $margin;
+
+ appearance: none;
+ border: 0;
+ line-height: 1;
+ cursor: pointer;
+
+ @if has-value($slider-radius) {
+ border-radius: $slider-radius;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ &[disabled] {
+ opacity: $slider-opacity-disabled;
+ }
+
+ // sass-lint:disable no-vendor-prefix
+
+ // Chrome/Safari
+ &::-webkit-slider-runnable-track {
+ height: $slider-height;
+ background: $slider-background;
+ }
+
+ &::-webkit-slider-handle {
+ width: $slider-handle-width;
+ height: $slider-handle-height;
+ margin-top: -$margin;
+
+ -webkit-appearance: none;
+ background: $slider-handle-background;
+
+ @if has-value($slider-radius) {
+ border-radius: $slider-radius;
+ }
+ }
+
+ // Firefox
+ &::-moz-range-track {
+ height: $slider-height;
+ -moz-appearance: none;
+ background: $slider-background;
+ }
+
+ &::-moz-range-thumb {
+ width: $slider-handle-width;
+ height: $slider-handle-height;
+ margin-top: -$margin;
+
+ -moz-appearance: none;
+ background: $slider-handle-background;
+
+ @if has-value($slider-radius) {
+ border-radius: $slider-radius;
+ }
+ }
+
+ // Internet Explorer
+ &::-ms-track {
+ height: $slider-height;
+
+ border: 0;
+ border-top: $margin solid $body-background;
+ border-bottom: $margin solid $body-background;
+ background: $slider-background;
+
+ overflow: visible;
+ color: transparent;
+ }
+
+ &::-ms-thumb {
+ width: $slider-handle-width;
+ height: $slider-handle-height;
+ border: 0;
+ background: $slider-handle-background;
+
+ @if has-value($slider-radius) {
+ border-radius: $slider-radius;
+ }
+ }
+
+ &::-ms-fill-lower {
+ background: $slider-fill-background;
+ }
+
+ &::-ms-fill-upper {
+ background: $slider-background;
+ }
+
+ @at-root {
+ output {
+ vertical-align: middle;
+ margin-left: 0.5em;
+ line-height: $slider-handle-height;
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/forms/_select.scss +36 -14
@@ @@ -8,39 +8,60 @@
/// Background color for select menus.
/// @type Color
- $select-background: #fafafa !default;
+ $select-background: $white !default;
/// Color of the dropdown triangle inside select menus. Set to `transparent` to remove it entirely.
/// @type Color
- $select-triangle-color: #333 !default;
+ $select-triangle-color: $dark-gray !default;
/// Default radius for select menus.
/// @type Color
$select-radius: $global-radius !default;
@mixin form-select {
- $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+ $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
height: $height;
- padding: ($form-spacing / 2);
- border: $input-border;
- border-radius: $global-radius;
margin: 0 0 $form-spacing;
- font-size: $input-font-size;
+ padding: $input-padding;
+
+ appearance: none;
+ border: $input-border;
+ border-radius: $select-radius;
+ background-color: $select-background;
+
font-family: $input-font-family;
- line-height: normal;
+ font-size: $input-font-size;
+ font-weight: $input-font-weight;
+ line-height: $input-line-height;
color: $input-color;
- background-color: $select-background;
- border-radius: $select-radius;
- -webkit-appearance: none;
- -moz-appearance: none;
@if $select-triangle-color != transparent {
@include background-triangle($select-triangle-color);
- background-size: 9px 6px;
- background-position: $global-right ($form-spacing / 2) center;
+ background-origin: content-box;
+ background-position: $global-right (-$form-spacing) center;
background-repeat: no-repeat;
+ background-size: 9px 6px;
+
+ padding-#{$global-right}: ($form-spacing * 1.5);
+ }
+
+ @if has-value($input-transition) {
+ transition: $input-transition;
}
+
+ // Focus state
+ &:focus {
+ outline: none;
+ border: $input-border-focus;
+ background-color: $input-background-focus;
+ box-shadow: $input-shadow-focus;
+
+ @if has-value($input-transition) {
+ transition: $input-transition;
+ }
+ }
+
// Disabled state
&:disabled {
background-color: $input-background-disabled;
@@ @@ -54,6 +75,7 @@ $select-radius: $global-radius !default;
&[multiple] {
height: auto;
+ background-image: none;
}
}
generators/foundation/public/stylesheets/foundation6/forms/_text.scss +53 -27
@@ @@ -8,7 +8,11 @@
/// Font color of text inputs.
/// @type Color
- $input-color: $dark-gray !default;
+ $input-color: $black !default;
+
+ /// Font color of placeholder text within text inputs.
+ /// @type Color
+ $input-placeholder-color: $medium-gray !default;
/// Font family of text inputs.
/// @type Font
@@ @@ -18,6 +22,14 @@ $input-font-family: inherit !default;
/// @type Number
$input-font-size: rem-calc(16) !default;
+ /// Font weight of text inputs.
+ /// @type Keyword
+ $input-font-weight: $global-weight-normal !default;
+
+ /// Line height of text inputs.
+ /// @type Keyword
+ $input-line-height: $global-lineheight !default;
+
/// Background color of text inputs.
/// @type Color
$input-background: $white !default;
@@ @@ -38,6 +50,10 @@ $input-border: 1px solid $medium-gray !default;
/// @type Color
$input-border-focus: 1px solid $dark-gray !default;
+ /// Padding of text inputs.
+ /// @type Color
+ $input-padding: $form-spacing / 2 !default;
+
/// Box shadow inside text inputs when not focused.
/// @type Shadow
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;
@@ @@ -48,13 +64,13 @@ $input-shadow-focus: 0 0 5px $medium-gray !default;
/// Cursor to use when hovering over a disabled text input.
/// @type Cursor
- $input-cursor-disabled: default !default;
+ $input-cursor-disabled: not-allowed !default;
/// Properties to transition on text inputs.
/// @type Transition
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out !default;
- /// Enables the up/down buttons that Chrome and Firefox add to `<input type="number">` elements.
+ /// Enables the up/down buttons that Chrome and Firefox add to `<input type='number'>` elements.
/// @type Boolean
$input-number-spinners: true !default;
@@ @@ -62,36 +78,43 @@ $input-number-spinners: true !default;
/// @type Border
$input-radius: $global-radius !default;
+ /// Border radius for form buttons, defaulted to global-radius.
+ /// @type Number
+ $form-button-radius: $global-radius !default;
+
@mixin form-element {
- $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+ $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
display: block;
box-sizing: border-box;
width: 100%;
height: $height;
- padding: $form-spacing / 2;
- border: $input-border;
margin: 0 0 $form-spacing;
+ padding: $input-padding;
+
+ border: $input-border;
+ border-radius: $input-radius;
+ background-color: $input-background;
+ box-shadow: $input-shadow;
font-family: $input-font-family;
font-size: $input-font-size;
+ font-weight: $input-font-weight;
+ line-height: $input-line-height;
color: $input-color;
- background-color: $input-background;
- box-shadow: $input-shadow;
- border-radius: $input-radius;
- @if hasvalue($input-transition) {
+ @if has-value($input-transition) {
transition: $input-transition;
}
// Focus state
&:focus {
- border: $input-border-focus;
- background: $input-background-focus;
outline: none;
+ border: $input-border-focus;
+ background-color: $input-background-focus;
box-shadow: $input-shadow-focus;
- @if hasvalue($input-transition) {
+ @if has-value($input-transition) {
transition: $input-transition;
}
}
@@ @@ -102,8 +125,7 @@ $input-radius: $global-radius !default;
#{text-inputs()},
textarea {
@include form-element;
- -webkit-appearance: none;
- -moz-appearance: none;
+ appearance: none;
}
// Text areas
@@ @@ -115,9 +137,14 @@ $input-radius: $global-radius !default;
}
}
- // Disabled/readonly state
input,
textarea {
+ // Placeholder text
+ &::placeholder {
+ color: $input-placeholder-color;
+ }
+
+ // Disabled/readonly state
&:disabled,
&[readonly] {
background-color: $input-background-disabled;
@@ @@ -126,26 +153,25 @@ $input-radius: $global-radius !default;
}
// Reset styles on button-like inputs
- [type="submit"],
- [type="button"] {
- border-radius: $global-radius;
- -webkit-appearance: none;
- -moz-appearance: none;
+ [type='submit'],
+ [type='button'] {
+ appearance: none;
+ border-radius: $form-button-radius;
}
// Reset Normalize setting content-box to search elements
- input[type="search"] {
+ input[type='search'] { // sass-lint:disable-line no-qualifying-elements
box-sizing: border-box;
}
// Number input styles
[type='number'] {
- @if not($input-number-spinners) {
- -moz-appearance: textfield;
+ @if not $input-number-spinners {
+ -moz-appearance: textfield; // sass-lint:disable-line no-vendor-prefix
- [type='number']::-webkit-inner-spin-button,
- [type='number']::-webkit-outer-spin-button {
- -webkit-appearance: none;
+ &::-webkit-inner-spin-button,
+ &::-webkit-outer-spin-button {
+ -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefix
margin: 0;
}
}
generators/foundation/public/stylesheets/foundation6/foundation.scss +59 -17
@@ @@ -1,9 +1,24 @@
- // Foundation for Sites by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
+ /**
+ * Foundation for Sites by ZURB
+ * Version 6.4.3
+ * foundation.zurb.com
+ * Licensed under MIT Open Source
+ */
- // Third-party libraries
- @import 'vendor/normalize';
+ // Dependencies
+ @import 'vendor/normalize-scss/sass/normalize';
+ @import 'vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
+ @import 'vendor/sassy-lists/stylesheets/helpers/true';
+ @import 'vendor/sassy-lists/stylesheets/functions/contain';
+ @import 'vendor/sassy-lists/stylesheets/functions/purge';
+ @import 'vendor/sassy-lists/stylesheets/functions/remove';
+ @import 'vendor/sassy-lists/stylesheets/functions/replace';
+ @import 'vendor/sassy-lists/stylesheets/functions/to-list';
+
+ // Settings
+ // import your own `settings` here or
+ // import and modify the default settings through
+ // @import 'settings/settings';
// Sass utilities
@import 'util/util';
@@ @@ -13,6 +28,7 @@
// Components
@import 'grid/grid';
+ @import 'xy-grid/xy-grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@@ @@ -24,14 +40,17 @@
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
+ @import 'components/card';
@import 'components/close-button';
@import 'components/drilldown';
@import 'components/dropdown-menu';
@import 'components/dropdown';
- @import 'components/flex-video';
+ @import 'components/flex';
+ @import 'components/responsive-embed';
@import 'components/label';
@import 'components/media-object';
@import 'components/menu';
+ @import 'components/menu-icon';
@import 'components/off-canvas';
@import 'components/orbit';
@import 'components/pagination';
@@ @@ -46,34 +65,47 @@
@import 'components/top-bar';
@import 'components/thumbnail';
@import 'components/tooltip';
+ @import 'prototype/prototype';
- // These styles are applied to <meta> tags, which are read by the Foundation JavaScript
- .foundation-mq {
- font-family: "#{-zf-bp-serialize($breakpoints)}";
- }
+ @mixin foundation-everything(
+ $flex: true,
+ $prototype: false
+ ) {
+ @if $flex {
+ $global-flexbox: true !global;
+ }
- @mixin foundation-everything {
@include foundation-global-styles;
- @include foundation-grid;
+ @if not $flex {
+ @include foundation-grid;
+ }
+ @else {
+ @if $xy-grid {
+ @include foundation-xy-grid-classes;
+ }
+ @else {
+ @include foundation-flex-grid;
+ }
+ }
@include foundation-typography;
- @include foundation-button;
@include foundation-forms;
- @include foundation-visibility-classes;
- @include foundation-float-classes;
+ @include foundation-button;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
+ @include foundation-card;
@include foundation-close-button;
+ @include foundation-menu;
+ @include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
- @include foundation-flex-video;
+ @include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
- @include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@@ @@ -88,4 +120,14 @@
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
+ @include foundation-visibility-classes;
+ @include foundation-float-classes;
+
+ @if $flex {
+ @include foundation-flex-classes;
+ }
+
+ @if $prototype {
+ @include foundation-prototype-classes;
+ }
}
generators/foundation/public/stylesheets/foundation6/grid/_classes.scss +100 -56
@@ @@ -12,16 +12,17 @@
$row: 'row',
$column: 'column',
$column-row: 'column-row',
+ $gutter: 'gutter',
$push: 'push',
$pull: 'pull',
$center: 'centered',
- $uncenter: 'uncenter',
+ $uncenter: 'uncentered',
$collapse: 'collapse',
$uncollapse: 'uncollapse',
$offset: 'offset',
$end: 'end',
$expanded: 'expanded',
- $breakpoints: $breakpoint-classes
+ $block: 'block'
) {
// Row
.#{$row} {
@@ @@ -29,34 +30,45 @@
// Collapsing
&.#{$collapse} {
- > .#{$column} { @include grid-col-collapse; }
+ > .#{$column} {
+ @include grid-col-collapse;
+ }
}
// Nesting
- & & {
- @include grid-row($behavior: nest, $cf: false);
+ & .#{$row} {
+ @include grid-row-nest($grid-column-gutter);
&.#{$collapse} {
- @include grid-row($behavior: nest collapse, $cf: false);
+ margin-right: 0;
+ margin-left: 0;
}
}
- // Responsive collapsing
- @each $size in $breakpoint-classes {
- @include breakpoint($size) {
- &.#{$size}-#{$collapse} {
- > .#{$column} { @include grid-col-collapse; }
- }
+ // Expanded (full-width) row
+ &.#{$expanded} {
+ @include grid-row-size(expand);
- &.#{$size}-#{$uncollapse} {
- > .#{$column} { @include grid-col-uncollapse; }
- }
+ .#{$row} {
+ margin-right: auto;
+ margin-left: auto;
}
}
- // Expanded (full-width) row
- &.#{$expanded} {
- max-width: none;
+ &:not(.#{$expanded}) .#{$row} {
+ @include grid-row-size(expand);
+ }
+
+ @if type-of($grid-column-gutter) == 'map' {
+ // Static (unresponsive) row gutters
+ //
+ @each $breakpoint, $value in $grid-column-gutter {
+ &.#{$gutter}-#{$breakpoint} {
+ > .#{$column} {
+ @include grid-col-gutter($value);
+ }
+ }
+ }
}
}
@@ @@ -64,8 +76,10 @@
.#{$column} {
@include grid-col;
- &.#{$end} {
- @include grid-col-end;
+ @if $grid-column-align-edge {
+ &.#{$end} {
+ @include grid-col-end;
+ }
}
}
@@ @@ -75,57 +89,87 @@
float: none;
}
- @each $size in $breakpoints {
- @include breakpoint($size) {
- @for $i from 1 through $grid-column-count {
- // Column width
- .#{$size}-#{$i} {
- @include grid-col-size($i);
- }
+ // To properly nest a column row, padding and margin is removed
+ .#{$row} .#{$column}.#{$row}.#{$row} {
+ margin-right: 0;
+ margin-left: 0;
+ padding-right: 0;
+ padding-left: 0;
+ }
- // Source ordering
- @if $i < $grid-column-count {
- .#{$size}-#{$push}-#{$i} {
- @include grid-col-pos($i);
- }
+ @include -zf-each-breakpoint {
+ @for $i from 1 through $grid-column-count {
+ // Column width
+ .#{$-zf-size}-#{$i} {
+ @include grid-col-size($i);
+ }
- .#{$size}-#{$pull}-#{$i} {
- @include grid-col-pos(-$i);
- }
+ // Source ordering
+ @if $i < $grid-column-count {
+ .#{$-zf-size}-#{$push}-#{$i} {
+ @include grid-col-pos($i);
}
- // Offsets
- $o: $i - 1;
-
- .#{$size}-#{$offset}-#{$o} {
- @include grid-col-off($o);
+ .#{$-zf-size}-#{$pull}-#{$i} {
+ @include grid-col-pos(-$i);
}
}
- // Block grid
- @for $i from 1 through $block-grid-max {
- .#{$size}-up-#{$i} {
- @include grid-layout($i);
- }
+ // Offsets
+ $o: $i - 1;
+
+ .#{$-zf-size}-#{$offset}-#{$o} {
+ @include grid-col-off($o);
}
+ }
- // Positioning
- .#{$column}.#{$size}-#{$center} {
- @include grid-col-pos(center);
+ // Block grid
+ @for $i from 1 through $block-grid-max {
+ .#{$-zf-size}-up-#{$i} {
+ @include grid-layout($i, '.#{$column}');
}
+ }
- // Gutter adjustment
- .#{$size}-#{$uncenter},
- .#{$size}-#{$push}-0,
- .#{$size}-#{$pull}-0 {
- @include grid-col-unpos;
+ // Responsive collapsing
+ .#{$-zf-size}-#{$collapse} {
+ > .#{$column} { @include grid-col-collapse; }
+
+ .#{$row} {
+ margin-right: 0;
+ margin-left: 0;
}
}
+
+ .#{$expanded}.#{$row} .#{$-zf-size}-#{$collapse}.#{$row} {
+ margin-right: 0;
+ margin-left: 0;
+ }
+
+ .#{$-zf-size}-#{$uncollapse} {
+ > .#{$column} { @include grid-col-gutter($-zf-size); }
+ }
+
+ // Positioning
+ .#{$-zf-size}-#{$center} {
+ @include grid-col-pos(center);
+ }
+
+ // Gutter adjustment
+ .#{$-zf-size}-#{$uncenter},
+ .#{$-zf-size}-#{$push}-0,
+ .#{$-zf-size}-#{$pull}-0 {
+ @include grid-col-unpos;
+ }
+ }
+
+ // Block grid columns
+ .#{$column}-#{$block} {
+ @include grid-column-margin;
}
- @if $column == 'column' {
- .columns {
- // scss-lint:disable PlaceholderInExtend
+ @if $column == 'column' and has-value($grid-column-alias) {
+ .#{$grid-column-alias} {
+ // sass-lint:disable-block placeholder-in-extend
@extend .column;
}
}
generators/foundation/public/stylesheets/foundation6/grid/_column.scss +22 -22
@@ @@ -12,9 +12,9 @@
/// Width of the column. Accepts multiple values:
/// - A percentage value will make the column that exact size.
/// - A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.
- /// - A string of the format "x of y" will make a column that is *x* columns wide, assuming *y* total columns for the parent.
+ /// - A list of the format "x of y" (without quotes) will make a column that is *x* columns wide, assuming *y* total columns for the parent.
///
- /// @return {Number} A calculated percentage value.
+ /// @returns {Number} A calculated percentage value.
@function grid-column($columns) {
$width: 0%;
@@ @@ -52,34 +52,34 @@
/// Creates a grid column.
///
/// @param {Mixed} $columns [$grid-column-count] - Width of the column. Refer to the `grid-column()` function to see possible values.
- /// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
+ /// @param {Mixed} $gutters [$grid-column-gutter] - Spacing between columns. Refer to the `grid-column-gutter()` function to see possible values.
@mixin grid-column(
$columns: $grid-column-count,
- $gutter: $grid-column-gutter
+ $gutters: $grid-column-gutter
) {
- @if ($columns <= $grid-column-count) {
- @include grid-column-size($columns);
- }
-
- $gutter: rem-calc($gutter) / 2;
-
+ @include grid-column-size($columns);
float: $global-left;
- padding-left: $gutter;
- padding-right: $gutter;
- &:last-child:not(:first-child) {
- float: $global-right;
+ // Gutters
+ @include grid-column-gutter($gutters: $gutters);
+
+ // Last column alignment
+ @if $grid-column-align-edge {
+ &:last-child:not(:first-child) {
+ float: $global-right;
+ }
}
}
/// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.
- /// @param {Number} $gutter [$grid-column-gutter] - Width of the gutters on either side of the column row.
+ ///
+ /// @param {Mixed} $gutters [$grid-column-gutter] - Width of the gutters on either side of the column row. Refer to the `grid-column-gutter()` function to see possible values.
@mixin grid-column-row(
- $gutter: $grid-column-gutter
+ $gutters: $grid-column-gutter
) {
@include grid-row;
- @include grid-column($gutter: $gutter);
-
+ @include grid-column($gutters: $gutters);
+
&,
&:last-child {
float: none;
@@ @@ -98,15 +98,15 @@
/// @alias grid-column
@mixin grid-col(
$columns: $grid-column-count,
- $gutter: $grid-column-gutter
+ $gutters: $grid-column-gutter
) {
- @include grid-column($columns, $gutter);
+ @include grid-column($columns, $gutters);
}
/// Shorthand for `grid-column-row()`.
/// @alias grid-column-row
@mixin grid-col-row(
- $gutter: $grid-column-gutter
+ $gutters: $grid-column-gutter
) {
- @include grid-column-row($gutter);
+ @include grid-column-row($gutters);
}
generators/foundation/public/stylesheets/foundation6/grid/_flex-grid.scss +164 -96
@@ @@ -7,35 +7,43 @@
////
/// Creates a container for a flex grid row.
+ ///
/// @param {Keyword|List} $behavior [null]
/// Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
- /// @param {Number} $width [$grid-row-width] - Maximum width of the row.
+ /// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
/// @param {Number} $columns [null] - Number of columns to use for this row. If set to `null` (the default), the global column count will be used.
/// @param {Boolean} $base [true] - Set to `false` to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output.
+ /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins, in case the row is nested. Responsive gutter settings by default.
@mixin flex-grid-row(
$behavior: null,
- $width: $grid-row-width,
+ $size: $grid-row-width,
$columns: null,
- $base: true
+ $base: true,
+ $wrap: true,
+ $gutters: $grid-column-gutter
) {
- $behavior: -zf-get-options($behavior, nest collapse);
$margin: auto;
+ $wrap: if($wrap, wrap, nowrap);
- @if map-get($behavior, nest) {
- $margin: rem-calc($grid-column-gutter) / 2 * -1;
+ @if index($behavior, nest) != null {
+ @include grid-row-nest($gutters);
+
+ @if index($behavior, collapse) != null {
+ margin-right: 0;
+ margin-left: 0;
+ }
}
@else {
- max-width: $width;
+ @include grid-row-size($size);
+ margin-right: auto;
+ margin-left: auto;
}
@if $base {
display: flex;
- flex-flow: row wrap;
+ flex-flow: row $wrap;
}
- margin-left: $margin;
- margin-right: $margin;
-
@if $columns != null {
@include grid-context($columns, $base) {
@content;
@@ @@ -44,16 +52,17 @@
}
/// Calculates the `flex` property for a flex grid column. It accepts all of the same values as the basic `grid-column()` function, along with two extras:
- /// - `null` (the default) will make the column expand to fill space.
+ /// - `expand` (the default) will make the column expand to fill space.
/// - `shrink` will make the column contract, so it only takes up the horizontal space it needs.
- /// @param {Mixed} $columns [null] - Width of the column.
- @function flex-grid-column($columns: null) {
- $flex: 1 1 0px;
+ ///
+ /// @param {Mixed} $columns [expand] - Width of the column.
+ @function flex-grid-column($columns: expand) {
+ $flex: 1 1 0px; // sass-lint:disable-line zero-unit
@if $columns == shrink {
$flex: 0 0 auto;
}
- @else if $columns != null {
+ @else if $columns != expand {
$flex: 0 0 grid-column($columns);
}
@@ @@ -61,29 +70,57 @@
}
/// Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the `unstack` class on the parent flex row.
- /// @param {Mixed} $columns [null] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
- /// @param {Number} $gutter [$grid-column-gutter] - Space between columns, added as a left and right padding.
+ ///
+ /// @param {Mixed} $columns [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
+ /// @param {Number|Map} $gutters [$grid-column-gutter] - Map or single value for gutters width. See the `grid-column-gutter` mixin.
@mixin flex-grid-column(
- $columns: null,
- $gutter: $grid-column-gutter
+ $columns: expand,
+ $gutters: $grid-column-gutter
+ ) {
+ // Base properties
+ @include flex-grid-size($columns);
+
+ // Gutters
+ @include grid-column-gutter($gutters: $gutters);
+
+ // fixes recent Chrome version not limiting child width
+ // https://stackoverflow.com/questions/34934586/white-space-nowrap-and-flexbox-did-not-work-in-chrome
+ @if $columns == expand {
+ min-width: 0;
+ }
+ }
+
+ /// Creates a block grid for a flex grid row.
+ ///
+ /// @param {Number} $n - Number of columns to display on each row.
+ /// @param {String} $selector - Selector to use to target columns within the row.
+ @mixin flex-grid-layout(
+ $n,
+ $selector: '.column'
) {
- $gutter: rem-calc($gutter) / 2;
+ flex-wrap: wrap;
+
+ > #{$selector} {
+ $pct: percentage(1/$n);
+
+ flex: 0 0 $pct;
+ max-width: $pct;
+ }
+ }
+
+ /// Changes the width flex grid column.
+ /// @param {Mixed} $columns [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
+ @mixin flex-grid-size($columns: null) {
+ $columns: $columns or expand;
flex: flex-grid-column($columns);
- padding-left: $gutter;
- padding-right: $gutter;
// max-width fixes IE 10/11 not respecting the flex-basis property
- @if $columns != null and $columns != shrink {
+ @if $columns != expand and $columns != shrink {
max-width: grid-column($columns);
}
}
- /// Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.
- /// @param {Number} $order [0] - Order number to apply.
- @mixin flex-grid-order($order: 0) {
- order: $order;
- }
@mixin foundation-flex-grid {
// Row
@@ @@ -91,101 +128,132 @@
@include flex-grid-row;
// Nesting behavior
- & &,
- .column-row & {
+ & .row {
@include flex-grid-row(nest, $base: false);
+
+ &.collapse {
+ margin-right: 0;
+ margin-left: 0;
+ }
+ }
+
+ // Expanded row
+ &.expanded {
+ @include grid-row-size(expand);
+
+ .row {
+ margin-right: auto;
+ margin-left: auto;
+ }
+ }
+
+ &:not(.expanded) .row {
+ @include grid-row-size(expand);
+ }
+
+ &.collapse {
+ > .column {
+ @include grid-col-collapse;
+ }
+ }
+
+ // Undo negative margins
+ // From collapsed child
+ &.is-collapse-child,
+ &.collapse > .column > .row {
+ margin-right: 0;
+ margin-left: 0;
}
}
// Column
- %flex-column {
+ .column {
@include flex-grid-column;
}
- .column,
- .columns {
- @extend %flex-column;
+ // Column row
+ // The double .row class is needed to bump up the specificity
+ .column.row.row {
+ float: none;
+ display: block;
}
- // Sizing (percentage)
- @each $size in $breakpoint-classes {
- @include breakpoint($size) {
- @for $i from 1 through $grid-column-count {
- .#{$size}-#{$i} {
- flex: flex-grid-column($i);
- max-width: grid-column($i);
- }
+ // To properly nest a column row, padding and margin is removed
+ .row .column.row.row {
+ margin-right: 0;
+ margin-left: 0;
+ padding-right: 0;
+ padding-left: 0;
+ }
+
+ @include -zf-each-breakpoint {
+ @for $i from 1 through $grid-column-count {
+ // Sizing (percentage)
+ .#{$-zf-size}-#{$i} {
+ flex: flex-grid-column($i);
+ max-width: grid-column($i);
+ }
+
+ // Offsets
+ $o: $i - 1;
+
+ .#{$-zf-size}-offset-#{$o} {
+ @include grid-column-offset($o);
}
}
- }
- // Sizing (expand)
- @each $size in $breakpoint-classes {
- @if $size != small {
- @include breakpoint($size) {
- .#{$size}-expand {
- flex: flex-grid-column();
- }
+ // Block grid
+ @for $i from 1 through $block-grid-max {
+ .#{$-zf-size}-up-#{$i} {
+ @include flex-grid-layout($i);
}
}
- }
- // Sizing (shrink)
- .shrink {
- flex: flex-grid-column(shrink);
- }
+ @if $-zf-size != $-zf-zero-breakpoint {
+ // Sizing (expand)
+ @include breakpoint($-zf-size) {
+ .#{$-zf-size}-expand {
+ flex: flex-grid-column();
+ }
+ }
- // Auto-stacking/unstacking
- @each $size in $breakpoint-classes {
- @if $size != small {
- .row.#{$size}-unstack {
- .column {
- flex: flex-grid-column(100%);
+ // Auto-stacking/unstacking
+ @at-root (without: media) {
+ .row.#{$-zf-size}-unstack {
+ > .column {
+ flex: flex-grid-column(100%);
- @include breakpoint($size) {
- flex: flex-grid-column();
+ @include breakpoint($-zf-size) {
+ flex: flex-grid-column();
+ }
}
}
}
}
- }
- // Source ordering
- @each $size in $breakpoint-classes {
- @include breakpoint($size) {
- @for $i from 1 through 6 {
- .#{$size}-order-#{$i} {
- @include flex-grid-order($i);
- }
- }
+ // Responsive collapsing
+ .#{$-zf-size}-collapse {
+ > .column { @include grid-col-collapse; }
}
- }
- // Horizontal alignment using justify-content
- @each $hdir, $prop in (
- 'right': flex-end,
- 'center': center,
- 'justify': space-between,
- 'spaced': space-around,
- ) {
- .row.align-#{$hdir} {
- justify-content: $prop;
+ .#{$-zf-size}-uncollapse {
+ > .column { @include grid-col-gutter($-zf-size); }
}
}
- // Horizontal alignment using align-items and align-self
- @each $vdir, $prop in (
- 'top': flex-start,
- 'bottom': flex-end,
- 'middle': center,
- 'stretch': stretch,
- ) {
- .row.align-#{$vdir} {
- align-items: $prop;
- }
+ // Sizing (shrink)
+ .shrink {
+ flex: flex-grid-column(shrink);
+ max-width: 100%;
+ }
+
+ // Block grid columns
+ .column-block {
+ @include grid-column-margin;
+ }
+
+ .columns {
+ @extend .column; // sass-lint:disable-line placeholder-in-extend
- .column.align-#{$vdir} {
- align-self: $prop;
- }
}
}
generators/foundation/public/stylesheets/foundation6/grid/_grid.scss +19 -4
@@ @@ -14,13 +14,28 @@ $grid-row-width: $global-width !default;
/// @type Number
$grid-column-count: 12 !default;
- /// The amount of space between columns.
- /// @type Number
- $grid-column-gutter: 30px !default;
+ /// The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.
+ /// @type Map | Length
+ /// @since 6.1.0
+ $grid-column-gutter: (
+ small: 20px,
+ medium: 30px,
+ ) !default;
+
+ /// If `true`, the last column in a row will align to the opposite edge of the row.
+ /// @type Boolean
+ $grid-column-align-edge: true !default;
+
+ /// Selector used for an alias of column (with @extend). If `false`, no alias is created.
+ /// @type String
+ $grid-column-alias: 'columns' !default;
/// The highest number of `.x-up` classes available when using the block grid CSS.
/// @type Number
- $block-grid-max: 6 !default;
+ $block-grid-max: 8 !default;
+
+ // Internal value to store the end column float direction
+ $-zf-end-float: if($grid-column-align-edge, $global-right, $global-left);
@import 'row';
@import 'column';
generators/foundation/public/stylesheets/foundation6/grid/_gutter.scss +61 -10
@@ @@ -6,26 +6,77 @@
/// @group grid
////
- /// Collapse the gutters on a column by removing the padding.
- @mixin grid-column-collapse() {
- padding-left: 0;
- padding-right: 0;
+ /// Set the gutters on a column
+ /// @param {Number|Keyword} $gutter [auto]
+ /// Spacing between columns, accepts multiple values:
+ /// - A single value will make the gutter that exact size.
+ /// - A breakpoint name will make the gutter the corresponding size in the $gutters map.
+ /// - "auto" will make the gutter responsive, using the $gutters map values.
+ /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use. Responsive gutter settings by default.
+ @mixin grid-column-gutter(
+ $gutter: auto,
+ $gutters: $grid-column-gutter
+ ) {
+ @include -zf-breakpoint-value($gutter, $gutters) {
+ $padding: rem-calc($-zf-bp-value) / 2;
+
+ padding-right: $padding;
+ padding-left: $padding;
+ }
+ }
+
+ /// Collapse the gutters on a column by removing the padding. **Note:** only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the `$gutter` parameter of the `grid-column()` mixin instead.
+ @mixin grid-column-collapse {
+ @include grid-column-gutter(0);
}
/// Un-collapse the gutters on a column by re-adding the padding.
- @mixin grid-column-uncollapse() {
- padding-left: $grid-column-gutter;
- padding-right: $grid-column-gutter;
+ ///
+ /// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
+ @mixin grid-column-uncollapse($gutter: $grid-column-gutter) {
+ @warn 'This mixin is being replaced by grid-column-gutter(). grid-column-uncollapse() will be removed in Foundation 6.4.';
+ @include grid-column-gutter($gutters: $gutter);
+ }
+
+ /// Shorthand for `grid-column-gutter()`.
+ /// @alias grid-column-gutter
+ @mixin grid-col-gutter(
+ $gutter: auto,
+ $gutters: $grid-column-gutter
+ ) {
+ @include grid-column-gutter($gutter, $gutters);
}
/// Shorthand for `grid-column-collapse()`.
/// @alias grid-column-collapse
- @mixin grid-col-collapse() {
+ @mixin grid-col-collapse {
@include grid-column-collapse;
}
/// Shorthand for `grid-column-uncollapse()`.
/// @alias grid-column-uncollapse
- @mixin grid-col-uncollapse() {
- @include grid-column-uncollapse;
+ @mixin grid-col-uncollapse($gutter: $grid-column-gutter) {
+ @warn 'This mixin is being replaced by grid-col-gutter(). grid-col-uncollapse() will be removed in Foundation 6.4.';
+ @include grid-column-uncollapse($gutter);
+ }
+
+ /// Sets bottom margin on grid columns to match gutters
+ /// @param {Number|Keyword} $margin [auto]
+ /// The bottom margin on grid columns, accepts multiple values:
+ /// - A single value will make the margin that exact size.
+ /// - A breakpoint name will make the margin the corresponding size in the $margins map.
+ /// - "auto" will make the margin responsive, using the $margins map values.
+ /// @param {Number|Map} $margins [$grid-column-gutter] - Map or single value to use. Responsive gutter settings by default.
+ @mixin grid-column-margin (
+ $margin: auto,
+ $margins: $grid-column-gutter
+ ) {
+ @include -zf-breakpoint-value($margin, $margins) {
+ $margin-bottom: rem-calc($-zf-bp-value);
+ margin-bottom: $margin-bottom;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+ }
}
generators/foundation/public/stylesheets/foundation6/grid/_layout.scss +49 -5
@@ @@ -7,15 +7,41 @@
////
/// Sizes child elements so that `$n` number of items appear on each row.
+ ///
/// @param {Number} $n - Number of elements to display per row.
- /// @param {String} $selector ['.column, .columns'] - Selector(s) to use for child elements.
+ /// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
+ /// @param {Number|List} $gutter
+ /// The gutter to apply to child elements. Accepts multiple values:
+ /// - $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes.
+ /// - A fixed numeric value will apply this gutter to all breakpoints.
@mixin grid-layout(
$n,
- $selector: '.column'
+ $selector: '.column',
+ $gutter: null
) {
- #{$selector} {
- width: percentage(1/$n);
+ & > #{$selector} {
float: $global-left;
+ width: percentage(1/$n);
+
+ // If a $gutter value is passed
+ @if($gutter) {
+ // Gutters
+ @if type-of($gutter) == 'map' {
+ @each $breakpoint, $value in $gutter {
+ $padding: rem-calc($value) / 2;
+
+ @include breakpoint($breakpoint) {
+ padding-right: $padding;
+ padding-left: $padding;
+ }
+ }
+ }
+ @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
+ $padding: rem-calc($gutter) / 2;
+ padding-right: $padding;
+ padding-left: $padding;
+ }
+ }
&:nth-of-type(1n) {
clear: none;
@@ @@ -26,7 +52,25 @@
}
&:last-child {
- float: left;
+ float: $global-left;
+ }
+ }
+ }
+
+ /// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.
+ ///
+ /// @param {Number} $n - Number of items that appear in each row.
+ @mixin grid-layout-center-last($n) {
+ @for $i from 1 to $n {
+ @if $i == 1 {
+ &:nth-child(#{$n}n+1):last-child {
+ margin-left: (100 - 100/$n * $i) / 2 * 1%;
+ }
+ }
+ @else {
+ &:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
+ margin-left: (100 - 100/$n * $i) / 2 * 1%;
+ }
}
}
}
generators/foundation/public/stylesheets/foundation6/grid/_position.scss +14 -9
@@ @@ -7,7 +7,8 @@
////
/// Reposition a column.
- /// @param {Number} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left.
+ ///
+ /// @param {Number|Keyword} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left. Set to center to center the column.
@mixin grid-column-position($position) {
@if type-of($position) == 'number' {
$offset: percentage($position / $grid-column-count);
@@ @@ -16,9 +17,12 @@
#{$global-left}: $offset;
}
@else if $position == center {
- float: none;
- margin-left: auto;
+ &, &:last-child:not(:first-child) {
+ float: none;
+ clear: both;
+ }
margin-right: auto;
+ margin-left: auto;
}
@else {
@warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, or center.';
@@ @@ -26,10 +30,11 @@
}
/// Reset a position definition.
- @mixin grid-column-unposition() {
+ @mixin grid-column-unposition {
position: static;
- margin-left: 0;
+ float: $global-left;
margin-right: 0;
+ margin-left: 0;
}
/// Offsets a column to the right by `$n` columns.
@@ @@ -39,9 +44,9 @@
}
/// Disable the default behavior of the last column in a row aligning to the opposite edge.
- @mixin grid-column-end() {
+ @mixin grid-column-end {
// This extra specificity is required for the property to be applied
- &:last-child {
+ &:last-child:last-child {
float: $global-left;
}
}
@@ @@ -54,7 +59,7 @@
/// Shorthand for `grid-column-unposition()`.
/// @alias grid-column-unposition
- @mixin grid-col-unpos() {
+ @mixin grid-col-unpos {
@include grid-column-unposition;
}
@@ @@ -66,6 +71,6 @@
/// Shorthand for `grid-column-end()`.
/// @alias grid-column-end
- @mixin grid-col-end() {
+ @mixin grid-col-end {
@include grid-column-end;
}
generators/foundation/public/stylesheets/foundation6/grid/_row.scss +42 -15
@@ @@ -8,16 +8,17 @@
/// Change the behavior of columns defined inside this mixin to use a different column count.
/// @content
+ ///
/// @param {Number} $columns - Number of columns to use.
- /// @param {Booleam} $root [false]
+ /// @param {Boolean} $root [false]
/// If `false`, selectors inside this mixin will nest inside the parent selector.
- /// If `tru`, selectors will not nest.
+ /// If `true`, selectors will not nest.
@mixin grid-context(
$columns,
$root: false
) {
// Store the current column count so it can be re-set later
- $old-grid-column-count: $columns;
+ $old-grid-column-count: $grid-column-count;
$grid-column-count: $columns !global;
@if $root {
@@ @@ -33,40 +34,66 @@
/// Creates a grid row.
/// @content
+ ///
/// @param {Number} $columns [null] - Column count for this row. `null` will use the default column count.
/// @param {Keywords} $behavior [null]
/// Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
- /// @param {Number} $width [$grid-row-width] - Maximum width of the row.
+ /// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
+ /// @param {Boolean} $cf [true] - Whether or not to include a clearfix.
+ /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.
@mixin grid-row(
$columns: null,
$behavior: null,
- $width: $grid-row-width,
- $cf: true
+ $size: $grid-row-width,
+ $cf: true,
+ $gutters: $grid-column-gutter
) {
- $behavior: -zf-get-options($behavior, nest collapse);
$margin: auto;
- @if map-get($behavior, nest) {
- $margin: rem-calc($grid-column-gutter) / 2 * -1;
+ @if index($behavior, nest) != null {
+ @include grid-row-nest($gutters);
- @if map-get($behavior, collapse) {
- $margin: 0;
+ @if index($behavior, collapse) != null {
+ margin-right: 0;
+ margin-left: 0;
}
}
@else {
- max-width: $width;
+ @include grid-row-size($size);
+ margin-right: auto;
+ margin-left: auto;
}
@if $cf {
@include clearfix;
}
- margin-left: $margin;
- margin-right: $margin;
-
@if $columns != null {
@include grid-context($columns) {
@content;
}
}
}
+
+ /// Inverts the margins of a row to nest it inside of a column.
+ ///
+ /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.
+ @mixin grid-row-nest($gutters: $grid-column-gutter) {
+ @include -zf-each-breakpoint {
+ $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) / 2 * -1;
+
+ margin-right: $margin;
+ margin-left: $margin;
+ }
+ }
+
+ /// Set a grid row size
+ ///
+ /// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
+ @mixin grid-row-size($size: $grid-row-width) {
+ @if $size == expand {
+ $size: none;
+ }
+
+ max-width: $size;
+ }
generators/foundation/public/stylesheets/foundation6/motion-ui.scss +0 -4
@@ @@ -1,4 +0,0 @@
- @import "motion-ui/motion-ui";
-
- @include motion-ui-transitions;
- @include motion-ui-animations;
generators/foundation/public/stylesheets/foundation6/motion-ui/_classes.scss +11 -4
@@ @@ -1,6 +1,6 @@
// scss-lint:disable ImportantRule, SpaceAfterComma, SingleLinePerProperty
- %mui-defaults {
+ @mixin -motion-ui-defaults {
transition-duration: map-get($motion-ui-speeds, default);
transition-timing-function: map-get($motion-ui-easings, default);
}
@@ @@ -11,11 +11,11 @@
// Slide
.slide-in-down { @include mui-slide(in, down); }
.slide-in-left { @include mui-slide(in, right); }
- .slide-in-up { @include mui-slide(in, bottom); }
+ .slide-in-up { @include mui-slide(in, up); }
.slide-in-right { @include mui-slide(in, left); }
- .slide-out-down { @include mui-slide(out, bottom); }
+ .slide-out-down { @include mui-slide(out, down); }
.slide-out-right { @include mui-slide(out, right); }
- .slide-out-up { @include mui-slide(out, top); }
+ .slide-out-up { @include mui-slide(out, up); }
.slide-out-left { @include mui-slide(out, left); }
// Fade
@@ @@ -78,6 +78,13 @@
.spin-ccw { @include mui-animation(spin(ccw)); }
.wiggle { @include mui-animation(wiggle); }
+ .shake,
+ .spin-cw,
+ .spin-ccw,
+ .wiggle {
+ animation-duration: map-get($motion-ui-speeds, default);
+ }
+
// Animation Modifiers
// - - - - - - - - - - - - - - -
.infinite { animation-iteration-count: infinite; }
generators/foundation/public/stylesheets/foundation6/motion-ui/effects/_fade.scss +4 -1
@@ @@ -19,8 +19,11 @@
}
}
+ $fromName: $from * 100;
+ $toName: $to * 100;
+
$keyframes: (
- name: 'fade-#{$from}-to-#{$to}',
+ name: 'fade-#{$fromName}-to-#{$toName}',
0: (opacity: $from),
100: (opacity: $to),
);
generators/foundation/public/stylesheets/foundation6/motion-ui/effects/_zoom.scss +1 -1
@@ @@ -1,6 +1,6 @@
/// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
/// @param {Number} $from [1.5] - Size to start at.
- /// @param {Number} $from [1] - Size to end at.
+ /// @param {Number} $to [1] - Size to end at.
@function zoom(
$from: 0,
$to: 1
generators/foundation/public/stylesheets/foundation6/motion-ui/transitions/_slide.scss +1 -1
@@ @@ -1,6 +1,6 @@
/// Creates a sliding transition by translating the element horizontally or vertically.
/// @param {Keyword} $state [in] - State to transition to.
- /// @param {Keyword} $direction [left] - Side of the element to slide from. Can be `top`, `right`, `bottom`, or `left`.
+ /// @param {Keyword} $direction [left] - Direction to slide to. Can be `up`, `right`, `down`, or `left`.
/// @param {Length} $amount [100%] - Length of the slide as a percentage value.
/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
/// @param {Duration} $duration [null] - Length (speed) of the transition.
generators/foundation/public/stylesheets/foundation6/motion-ui/util/_transition.scss +1 -1
@@ @@ -7,7 +7,7 @@
$timing: null,
$delay: null
) {
- @extend %mui-defaults;
+ @include -motion-ui-defaults;
transition-duration: $duration;
transition-timing-function: $timing;
transition-delay: $delay;
generators/foundation/public/stylesheets/foundation6/prototype/_arrow.scss +36 -0
@@ @@ -0,0 +1,36 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-arrow
+ ////
+
+ /// Map containing all the `arrow` direction
+ /// @type Map
+ $prototype-arrow-directions: (
+ down,
+ up,
+ right,
+ left
+ ) !default;
+
+ /// Width of the Arrow, `0.4375rem` by default.
+ /// @type Number
+ $prototype-arrow-size: 0.4375rem;
+
+ /// Color of the Arrow, `$black` by default.
+ /// @type Color
+ $prototype-arrow-color: $black;
+
+ @mixin foundation-prototype-arrow {
+ @each $prototype-arrow-direction in $prototype-arrow-directions {
+ .arrow-#{$prototype-arrow-direction} {
+ @include css-triangle(
+ $prototype-arrow-size,
+ $prototype-arrow-color,
+ $prototype-arrow-direction
+ );
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_border-box.scss +35 -0
@@ @@ -0,0 +1,35 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-border-box
+ ////
+
+ /// Responsive breakpoints for border box.
+ /// @type Boolean
+ $prototype-border-box-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Border box utility
+ @mixin border-box {
+ box-sizing: border-box !important;
+ }
+
+ @mixin foundation-prototype-border-box {
+ .border-box {
+ @include border-box;
+ }
+
+ @if ($prototype-border-box-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-border-box {
+ @include border-box;
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_border-none.scss +35 -0
@@ @@ -0,0 +1,35 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-border-none
+ ////
+
+ /// Responsive breakpoints for border none.
+ /// @type Boolean
+ $prototype-border-none-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Border none utility
+ @mixin border-none {
+ border: none !important;
+ }
+
+ @mixin foundation-prototype-border-none {
+ .border-none {
+ @include border-none;
+ }
+
+ @if ($prototype-border-none-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-border-none {
+ @include border-none;
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_bordered.scss +54 -0
@@ @@ -0,0 +1,54 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-bordered
+ ////
+
+ /// Responsive breakpoints for bordered utility.
+ /// @type Boolean
+ $prototype-bordered-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Default value for `prototype-border-width`
+ /// @type Number
+ $prototype-border-width: rem-calc(1) !default;
+
+ /// Default value for `prototype-border-type`
+ /// @type String
+ $prototype-border-type: solid !default;
+
+ /// Default value for `prototype-border-color` defaulted to `medium-gray`
+ /// @type Color
+ $prototype-border-color: $medium-gray !default;
+
+ /// Bordered Utility: Adds a light border to an element by default.
+ /// @param {Number} $width [$prototype-border-width] Width of the border
+ /// @param {String} $type [$prototype-border-type] Type of the border
+ /// @param {Color} $color [$prototype-border-color] Color of the border
+ @mixin bordered(
+ $width: $prototype-border-width,
+ $type: $prototype-border-type,
+ $color: $prototype-border-color
+ ) {
+ border: $width $type $color;
+ }
+
+ @mixin foundation-prototype-bordered {
+ .bordered {
+ @include bordered;
+ }
+
+ @if ($prototype-bordered-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-bordered {
+ @include bordered;
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_box.scss +23 -0
@@ @@ -0,0 +1,23 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-box
+ ////
+
+ /// Box Mixin: Easily create a square, rectangle or a circle
+ /// @param {Number} $width[] Width of the box
+ /// @param {Number} $height[$width] Height of the box, defaults to `$width` to easily make a square
+ /// @param {Boolean} $circle[false] Makes the box a circle, by default `false`.
+ @mixin box(
+ $width,
+ $height: $width,
+ $circle: false
+ ) {
+ width: $width;
+ height: $height;
+ @if $circle {
+ border-radius: 50% !important;
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_display.scss +50 -0
@@ @@ -0,0 +1,50 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-display
+ ////
+
+ /// Responsive breakpoints for display classes
+ /// @type Boolean
+ $prototype-display-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Map containing all the `display` classes
+ /// @type Map
+ $prototype-display: (
+ inline,
+ inline-block,
+ block,
+ table,
+ table-cell
+ ) !default;
+
+ /// Display classes, by default coming through a map `$prototype-display`
+ /// @param {String} $display [] Display classes
+ @mixin display($display) {
+ display: $display !important;
+ }
+
+ @mixin foundation-prototype-display {
+ @each $display in $prototype-display {
+ .display-#{$display} {
+ @include display($display);
+ }
+ }
+
+ @if ($prototype-display-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @each $display in $prototype-display {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-display-#{$display} {
+ @include display($display);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_font-styling.scss +95 -0
@@ @@ -0,0 +1,95 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-font-styling
+ ////
+
+ /// Responsive breakpoints for font styling types
+ /// @type Boolean
+ $prototype-font-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Letter spacing for `.font-wide`
+ /// @type Number
+ $prototype-wide-letter-spacing: rem-calc(4) !default;
+
+ /// Default weight for `.font-normal`, defaulted to `global-weight-normal`
+ /// @type Number
+ $prototype-font-normal: $global-weight-normal !default;
+
+ /// Default weight for `.font-bold`, defaulted to `global-weight-bold`
+ /// @type Number
+ $prototype-font-bold: $global-weight-bold !default;
+
+ /// Font wide letter spacing!
+ /// @param {Number} $letter-spacing [$prototype-wide-letter-spacing] Wide letter spacing for the font
+ @mixin font-wide(
+ $letter-spacing: $prototype-wide-letter-spacing
+ ) {
+ letter-spacing: $letter-spacing;
+ }
+
+ /// Font Weight Normal, default value coming through `global-weight-normal`
+ /// @param {Number} $weight [$prototype-font-normal] Weight of the font (normal)
+ @mixin font-normal(
+ $weight: $prototype-font-normal
+ ) {
+ font-weight: $weight;
+ }
+
+ /// Font Weight Bold, default value coming through `global-weight-bold`
+ /// @param {Number} $weight [$prototype-font-bold] Weight of the font (bold)
+ @mixin font-bold(
+ $weight: $prototype-font-bold
+ ) {
+ font-weight: $weight;
+ }
+
+ /// Font Style Italic
+ @mixin font-italic {
+ font-style: italic !important;
+ }
+
+ @mixin foundation-prototype-font-styling {
+ .font-wide{
+ @include font-wide;
+ }
+
+ .font-normal {
+ @include font-normal;
+ }
+
+ .font-bold {
+ @include font-bold;
+ }
+
+ .font-italic {
+ @include font-italic;
+ }
+
+ @if ($prototype-font-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-font-wide{
+ @include font-wide;
+ }
+
+ .#{$size}-font-normal {
+ @include font-normal;
+ }
+
+ .#{$size}-font-bold {
+ @include font-bold;
+ }
+
+ .#{$size}-font-italic {
+ @include font-italic;
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_list-style-type.scss +95 -0
@@ @@ -0,0 +1,95 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-list-style-type
+ ////
+
+ /// Responsive breakpoints for list styling types
+ /// @type Boolean
+ $prototype-list-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Map containing all the `style-type-unordered` classes
+ /// @type Map
+ $prototype-style-type-unordered: (
+ disc,
+ circle,
+ square
+ ) !default;
+
+ /// Map containing all the `style-type-ordered` classes
+ /// @type Map
+ $prototype-style-type-ordered: (
+ decimal,
+ lower-alpha,
+ lower-latin,
+ lower-roman,
+ upper-alpha,
+ upper-latin,
+ upper-roman
+ ) !default;
+
+
+ /// Style type for unordered Lists, by default coming through a map `$prototype-style-type-unordered`
+ /// @param {String} $style-type-unordered [] Style type for unordered Lists
+ @mixin style-type-unordered($style-type-unordered) {
+ list-style-type: $style-type-unordered !important;
+ }
+
+ /// Style type for ordered Lists, by default coming through a map `$prototype-style-type-ordered`
+ /// @param {String} $style-type-ordered [] Style type for ordered Lists
+ @mixin style-type-ordered($style-type-ordered) {
+ list-style-type: $style-type-ordered !important;
+ }
+
+ @mixin list-unordered {
+ @each $style-type-unordered in $prototype-style-type-unordered {
+ ul.list-#{$style-type-unordered} {
+ @include style-type-unordered($style-type-unordered);
+ }
+ }
+
+ @if ($prototype-list-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @each $style-type-unordered in $prototype-style-type-unordered {
+ @if $size != $-zf-zero-breakpoint {
+ ul.#{$size}-list-#{$style-type-unordered} {
+ @include style-type-unordered($style-type-unordered);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ @mixin list-ordered {
+ @each $style-type-ordered in $prototype-style-type-ordered {
+ ol.list-#{$style-type-ordered} {
+ @include style-type-ordered($style-type-ordered);
+ }
+ }
+
+ @if ($prototype-list-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @each $style-type-ordered in $prototype-style-type-ordered {
+ @if $size != $-zf-zero-breakpoint {
+ ol.#{$size}-list-#{$style-type-ordered} {
+ @include style-type-ordered($style-type-ordered);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ @mixin foundation-prototype-list-style-type {
+ @include list-unordered;
+ @include list-ordered;
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_overflow.scss +72 -0
@@ @@ -0,0 +1,72 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-overflow
+ ////
+
+ /// Responsive breakpoints for overflow helper classes
+ /// @type Boolean
+ $prototype-overflow-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Map containing all the `overflow` classes
+ /// @type Map
+ $prototype-overflow: (
+ visible,
+ hidden,
+ scroll
+ ) !default;
+
+ /// Overflow classes, by default coming through a map `$prototype-overflow`
+ /// @param {String} $overflow [] Overflow classes
+ @mixin overflow($overflow) {
+ overflow: $overflow !important;
+ }
+
+ /// Overflow classes on horizontal axis, by default coming through a map `$prototype-overflow`
+ /// @param {String} $overflow [] Overflow classes (horizontal axis)
+ @mixin overflow-x($overflow) {
+ overflow-x: $overflow !important;
+ }
+
+ /// Overflow classes on vertical axis, by default coming through a map `$prototype-overflow`
+ /// @param {String} $overflow [] Overflow classes (vertical axis)
+ @mixin overflow-y($overflow) {
+ overflow-y: $overflow !important;
+ }
+
+ @mixin foundation-prototype-overflow {
+ @each $overflow in $prototype-overflow {
+ .overflow-#{$overflow} {
+ @include overflow($overflow);
+ }
+ .overflow-x-#{$overflow} {
+ @include overflow-x($overflow);
+ }
+ .overflow-y-#{$overflow} {
+ @include overflow-y($overflow);
+ }
+ }
+
+ @if ($prototype-overflow-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @each $overflow in $prototype-overflow {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-overflow-#{$overflow} {
+ @include overflow($overflow);
+ }
+ .#{$size}-overflow-x-#{$overflow} {
+ @include overflow-x($overflow);
+ }
+ .#{$size}-overflow-y-#{$overflow} {
+ @include overflow-y($overflow);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_position.scss +114 -0
@@ @@ -0,0 +1,114 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-position
+ ////
+
+ /// Responsive breakpoints for position helpers
+ /// @type Boolean
+ $prototype-position-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Map containing all the `position` classes
+ /// @type Map
+ $prototype-position: (
+ static,
+ relative,
+ absolute,
+ fixed
+ ) !default;
+
+ /// z-index for fixed positioning
+ /// @type Number
+ $prototype-position-z-index: 975 !default;
+
+ /// Position classes, by default coming through a map `$prototype-position`, whereas all the offset values are multiplied by `$global-position` which by default is equal to `1rem`.
+ /// @param {String} $position [] Position classes, Either `static`, `relative`, `absolute` or `fixed`
+ /// @param {Number} $top [null] - Top offset
+ /// @param {Number} $right [null] - Right offset
+ /// @param {Number} $bottom [null] - Bottom offset
+ /// @param {Number} $left [null] - Left offset
+ @mixin position(
+ $position,
+ $top: null,
+ $right: null,
+ $bottom: null,
+ $left: null
+ ) {
+ position: $position !important;
+ @if $top != null {
+ top: $top * $global-position !important;
+ }
+ @if $right != null {
+ right: $right * $global-position !important;
+ }
+ @if $bottom != null {
+ bottom: $bottom * $global-position !important;
+ }
+ @if $left != null {
+ left: $left * $global-position !important;
+ }
+ }
+
+ /// Position Fixed on top corners
+ /// @param {Number} $z-index [$prototype-position-z-index] z-index for `position-fixed-top`
+ @mixin position-fixed-top(
+ $z-index: $prototype-position-z-index
+ ) {
+ @include position(fixed, 0, 0, null, 0);
+ z-index: $z-index;
+ }
+
+ /// Position Fixed on bottom corners
+ /// @param {Number} $z-index [$prototype-position-z-index] z-index for `position-fixed-bottom`
+ @mixin position-fixed-bottom(
+ $z-index: $prototype-position-z-index
+ ) {
+ @include position(fixed, null, 0, 0, 0);
+ z-index: $z-index;
+ }
+
+ @mixin foundation-prototype-position {
+ // Position: Static, Relative, Fixed, Absolute
+ @each $position in $prototype-position {
+ .position-#{$position} {
+ @include position($position);
+ }
+ }
+
+ // Position: Fixed Top, Fixed Bottom
+ .position-fixed-top {
+ @include position-fixed-top;
+ }
+ .position-fixed-bottom {
+ @include position-fixed-bottom;
+ }
+
+ @if ($prototype-position-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ // Position: Static, Relative, Fixed, Absolute
+ @each $position in $prototype-position {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-position-#{$position} {
+ @include position($position);
+ }
+ }
+ }
+
+ // Position: Fixed Top, Fixed Bottom
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-position-fixed-top {
+ @include position-fixed-top;
+ }
+
+ .#{$size}-position-fixed-bottom {
+ @include position-fixed-bottom;
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_prototype.scss +87 -0
@@ @@ -0,0 +1,87 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype
+ ////
+
+ // Relational Mixins
+ @import 'relation';
+
+ // Box Mixin
+ @import 'box';
+
+ // Rotate Mixin
+ @import 'rotate';
+
+ // Text utilities
+ @import 'text-utilities';
+
+ // Text transformation classes
+ @import 'text-transformation';
+
+ // Text Decoration classes
+ @import 'text-decoration';
+
+ // Font Styling
+ @import 'font-styling';
+
+ // List Style type
+ @import 'list-style-type';
+
+ // Rounded Utility
+ @import 'rounded';
+
+ // Bordered Utility
+ @import 'bordered';
+
+ // Shadow Utility
+ @import 'shadow';
+
+ // Arrow Utility
+ @import 'arrow';
+
+ // Separator Utility
+ @import 'separator';
+
+ // Overflow helper classes
+ @import 'overflow';
+
+ // Display classes
+ @import 'display';
+
+ // Position Helpers
+ @import 'position';
+
+ // Border box
+ @import 'border-box';
+
+ // Border none Utilty
+ @import 'border-none';
+
+ // Sizing Utilities
+ @import 'sizing';
+
+ // Spacing Utilities
+ @import 'spacing';
+
+ @mixin foundation-prototype-classes {
+ @include foundation-prototype-text-utilities;
+ @include foundation-prototype-text-transformation;
+ @include foundation-prototype-text-decoration;
+ @include foundation-prototype-font-styling;
+ @include foundation-prototype-list-style-type;
+ @include foundation-prototype-rounded;
+ @include foundation-prototype-bordered;
+ @include foundation-prototype-shadow;
+ @include foundation-prototype-arrow;
+ @include foundation-prototype-separator;
+ @include foundation-prototype-overflow;
+ @include foundation-prototype-display;
+ @include foundation-prototype-position;
+ @include foundation-prototype-border-box;
+ @include foundation-prototype-border-none;
+ @include foundation-prototype-sizing;
+ @include foundation-prototype-spacing;
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_relation.scss +157 -0
@@ @@ -0,0 +1,157 @@
+ /// Select all children from the first to `$num`.
+ /// @param {Number} $num[] First `n` numbers of total children
+ @mixin first($num) {
+ @if $num == 1 {
+ &:first-child {
+ @content;
+ }
+ } @else {
+ &:nth-child(-n + #{$num}) {
+ @content;
+ }
+ }
+ }
+
+ /// Select the first exact child
+ @mixin first-child {
+ &:first-of-type {
+ @content;
+ }
+ }
+
+ /// Select all children from the last to `$num`.
+ /// @param {Number} $num[] Last `n` numbers of total children
+ @mixin last($num) {
+ &:nth-last-child(-n + #{$num}) {
+ @content;
+ }
+ }
+
+ /// Select the last exact child
+ @mixin last-child {
+ &:last-of-type {
+ @content;
+ }
+ }
+
+ /// Select children every `$num`.
+ /// @param {Number} $num[] Every `n` number of all children
+ @mixin every($num) {
+ &:nth-child(#{$num}n) {
+ @content;
+ }
+ }
+
+ /// Select only the first and last child.
+ @mixin first-last {
+ &:first-child,
+ &:last-child {
+ @content;
+ }
+ }
+
+ /// Select all children after the first to `$num`.
+ /// @param {Number} $num[] After First `n` numbers of total children
+ @mixin after-first($num) {
+ &:nth-child(n + #{$num + 1}) {
+ @content;
+ }
+ }
+
+ /// Select all children before `$num` from the last.
+ /// @param {Number} $num[] From Last `n` numbers of total children
+ @mixin from-last($num) {
+ &:nth-last-child(#{$num}) {
+ @content;
+ }
+ }
+
+ /// Select the `$num` child from the first and the `$num` child from the last.
+ /// @param {Number} $num[] `n` number called from first and last
+ @mixin from-first-last($num) {
+ &:nth-child(#{$num}),
+ &:nth-last-child(#{$num}) {
+ @content;
+ }
+ }
+
+ /// Select all children but `$num`.
+ /// @param {Number} $num[] `n` number that should be excluded from all other children
+ @mixin all-but($num) {
+ &:not(:nth-child(#{$num})) {
+ @content;
+ }
+ }
+
+ /// Select all children between the `$num` first and the `$num` last.
+ /// @param {Number} $num[] `n` number excluded from first and last from all other children
+ @mixin all-but-first-last($num) {
+ &:nth-child(n + #{$num}):nth-last-child(n + #{$num}) {
+ @content;
+ }
+ }
+
+ /// Will only select the child if it’s unique. That means that if there are at least 2 children, the style will not be applied.
+ @mixin unique {
+ &:only-child {
+ @content;
+ }
+ }
+
+ /// Will only select children if they are not unique. That means that if there are at least 2 children, the style will be applied.
+ @mixin not-unique() {
+ &:not(:only-child) {
+ @content;
+ }
+ }
+
+ /// Select all children between `$first` and `$last`.
+ /// @param {Number} $first[] First `nth` number
+ /// @param {Number} $last[] Last `nth` number
+ @mixin between($first, $last) {
+ &:nth-child(n + #{$first}):nth-child(-n + #{$last}) {
+ @content;
+ }
+ }
+
+ /// Select all even children.
+ @mixin even {
+ &:nth-child(even) {
+ @content;
+ }
+ }
+
+ /// Select all even children between `$first` and `$last`.
+ /// @param {Number} $first[] First `nth` number
+ /// @param {Number} $last[] Last `nth` number
+ @mixin even-between($first, $last) {
+ &:nth-child(even):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
+ @content;
+ }
+ }
+
+ /// Select all odd children.
+ @mixin odd {
+ &:nth-child(odd) {
+ @content;
+ }
+ }
+
+ /// Select all odd children between `$first` and `$last`.
+ /// @param {Number} $first[] First `nth` number
+ /// @param {Number} $last[] Last `nth` number
+ @mixin odd-between($first, $last) {
+ &:nth-child(odd):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
+ @content;
+ }
+ }
+
+ /// Select all `$num` children between `$first` and `$last`.
+ /// @param {Number} $num[] Every `n` number between `$first` and `$last`.
+ /// @param {Number} $first[] First `n` number
+ /// @param {Number} $last[] Last `n` number
+ @mixin number-between($num, $first, $last) {
+ &:nth-child(#{$num}n):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
+ @content;
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_rotate.scss +31 -0
@@ @@ -0,0 +1,31 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-rotate
+ ////
+
+ /// Rotate Mixin: Rotate an element to a certain deg
+ /// @param {Number} $deg[] Degree of rotation
+ @mixin rotate($deg) {
+ transform:rotate($deg + deg);
+ }
+
+ /// RotateX Mixin: Rotate an element to a certain deg on X-Axis
+ /// @param {Number} $deg[] Degree of rotation
+ @mixin rotateX($deg) {
+ transform:rotateX($deg + deg);
+ }
+
+ /// RotateY Mixin: Rotate an element to a certain deg on Y-Axis
+ /// @param {Number} $deg[] Degree of rotation
+ @mixin rotateY($deg) {
+ transform:rotateY($deg + deg);
+ }
+
+ /// RotateZ Mixin: Rotate an element to a certain deg on Z-Axis
+ /// @param {Number} $deg[] Degree of rotation
+ @mixin rotateZ($deg) {
+ transform:rotateZ($deg + deg);
+ }
\ No newline at end of file
generators/foundation/public/stylesheets/foundation6/prototype/_rounded.scss +54 -0
@@ @@ -0,0 +1,54 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-rounded
+ ////
+
+ /// Responsive breakpoints for rounded utility.
+ /// @type Boolean
+ $prototype-rounded-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Default value for `prototype-border-radius`
+ /// @type Number
+ $prototype-border-radius: rem-calc(3) !default;
+
+ /// Rounded utility (all corners): Adds radius corners (all corners) to an element by default.
+ /// @param {Number} $radius [$prototype-border-radius] Border radius (all corners)
+ @mixin border-radius(
+ $radius: $prototype-border-radius
+ ) {
+ border-radius: $radius;
+ }
+
+ /// Rounded square utility or rectangle utility (all corners): Rounds all corners to an element by default to make a pill shape.
+ @mixin border-rounded {
+ border-radius: 5000px !important;
+ }
+
+ @mixin foundation-prototype-rounded {
+ .rounded {
+ @include border-rounded;
+ }
+
+ .radius {
+ @include border-radius;
+ }
+
+ @if ($prototype-rounded-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-rounded {
+ @include border-rounded;
+ }
+ .#{$size}-radius {
+ @include border-radius;
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_separator.scss +96 -0
@@ @@ -0,0 +1,96 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-separator
+ ////
+
+ /// Responsive breakpoints for separator.
+ /// @type Boolean
+ $prototype-separator-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Default alignment of a separator.
+ /// @type String
+ $prototype-separator-align: center !default;
+
+ /// Height of a separator.
+ /// @type Number
+ $prototype-separator-height: rem-calc(2) !default;
+
+ /// Width of a separator.
+ /// @type Number
+ $prototype-separator-width: 3rem !default;
+
+ /// Default color of a separator.
+ /// @type Color
+ $prototype-separator-background: $primary-color !default;
+
+ /// Top Margin of a separator.
+ /// @type Number
+ $prototype-separator-margin-top: $global-margin !default;
+
+ /// Title separator Utility, mostly used to style the main heading of a section
+ /// @param {String} $align [$prototype-separator-align] - separator Alignment
+ /// @param {Number} $height [$prototype-separator-height] - Width
+ /// @param {Number} $width [$prototype-separator-width] - Height
+ /// @param {Color} $background [$prototype-separator-background] - Background
+ /// @param {Number} $top [$prototype-separator-margin-top] - Margin Top
+ @mixin separator (
+ $align: $prototype-separator-align,
+ $height: $prototype-separator-height,
+ $width: $prototype-separator-width,
+ $background: $prototype-separator-background,
+ $top: $prototype-separator-margin-top
+ ) {
+ text-align: $align !important;
+ @include clearfix;
+
+ &::after {
+ @include position(relative);
+ width: $width;
+ border-bottom: $height solid $background;
+ margin: $top auto 0;
+
+ @if $align == left {
+ margin-left: 0 !important;
+ }
+
+ @if $align == right {
+ margin-right: 0 !important;
+ }
+ }
+ }
+
+ @mixin foundation-prototype-separator {
+ .separator-center {
+ @include separator(center);
+ }
+
+ .separator-left {
+ @include separator(left);
+ }
+
+ .separator-right {
+ @include separator(right);
+ }
+
+ @if ($prototype-separator-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-separator-center {
+ @include separator(center);
+ }
+ .#{$size}-separator-left {
+ @include separator(left);
+ }
+ .#{$size}-separator-right {
+ @include separator(right);
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_shadow.scss +43 -0
@@ @@ -0,0 +1,43 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-shadow
+ ////
+
+ /// Responsive breakpoints for shadow utility.
+ /// @type Boolean
+ $prototype-shadow-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Default value for `prototype-box-shadow`
+ /// @type Number
+ $prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
+ 0 2px 10px 0 rgba(0,0,0,.12) !default;
+
+ /// Shadow Utility: Adds a light box shadow to an element by default.
+ /// @param {Number} $shadow [$prototype-box-shadow] Box Shadow of a component
+ @mixin shadow(
+ $shadow: $prototype-box-shadow
+ ) {
+ box-shadow: $shadow;
+ }
+
+ @mixin foundation-prototype-shadow {
+ .shadow {
+ @include shadow;
+ }
+
+ @if ($prototype-shadow-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-shadow {
+ @include shadow;
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_sizing.scss +73 -0
@@ @@ -0,0 +1,73 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-sizing
+ ////
+
+ /// Responsive breakpoints for spacing classes (margin and padding)
+ /// @type Boolean
+ $prototype-sizing-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Map containing all the `sizing` classes
+ /// @type Map
+ $prototype-sizing: (
+ width,
+ height
+ ) !default;
+
+ /// Map containing all the sizes.
+ /// @type Map
+ $prototype-sizes: (
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%
+ ) !default;
+
+ /// Max Width 100 utility.
+ @mixin max-width-100 {
+ max-width: 100% !important;
+ }
+
+ /// Max Height 100 utility.
+ @mixin max-height-100 {
+ max-height: 100% !important;
+ }
+
+ @mixin foundation-prototype-sizing {
+ // Element Sizing
+ @each $sizing in $prototype-sizing {
+ @each $length, $percentage in $prototype-sizes {
+ .#{$sizing}-#{$length} {
+ #{$sizing}: $percentage !important;
+ }
+ }
+ }
+
+ // Max width & height
+ .max-width-100 {
+ @include max-width-100;
+ }
+ .max-height-100 {
+ @include max-height-100;
+ }
+
+ @if ($prototype-sizing-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @if $size != $-zf-zero-breakpoint {
+ @each $sizing in $prototype-sizing {
+ @each $length, $percentage in $prototype-sizes {
+ .#{$size}-#{$sizing}-#{$length} {
+ #{$sizing}: $percentage !important;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_spacing.scss +204 -0
@@ @@ -0,0 +1,204 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-spacing
+ ////
+
+ /// Responsive breakpoints for spacing classes (margin and padding)
+ /// @type Boolean
+ $prototype-spacing-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Default number of spacers count (margin and padding)
+ /// @type Number
+ $prototype-spacers-count: 3 !default;
+
+ /// Margin helper mixin, all the values are multiplied by `$global-margin` which by default is equal to `1rem`
+ /// @param {Number} $top [null] - Margin Top
+ /// @param {Number} $right [null] - Margin Right
+ /// @param {Number} $bottom [null] - Margin Bottom
+ /// @param {Number} $left [null] - Margin Left
+ @mixin margin(
+ $top: null,
+ $right: null,
+ $bottom: null,
+ $left: null
+ ) {
+ @if $top != null {
+ margin-top: $top * $global-margin !important;
+ }
+ @if $right != null {
+ margin-right: $right * $global-margin !important;
+ }
+ @if $bottom != null {
+ margin-bottom: $bottom * $global-margin !important;
+ }
+ @if $left != null {
+ margin-left: $left * $global-margin !important;
+ }
+ }
+
+ /// Padding helper mixin, all the values are multiplied by `$global-padding` which by default is equal to `1rem`
+ /// @param {Number} $top [null] - Padding Top
+ /// @param {Number} $right [null] - Padding Right
+ /// @param {Number} $bottom [null] - Padding Bottom
+ /// @param {Number} $left [null] - Padding Left
+ @mixin padding(
+ $top: null,
+ $right: null,
+ $bottom: null,
+ $left: null
+ ) {
+ @if $top != null {
+ padding-top: $top * $global-padding !important;
+ }
+ @if $right != null {
+ padding-right: $right * $global-padding !important;
+ }
+ @if $bottom != null {
+ padding-bottom: $bottom * $global-padding !important;
+ }
+ @if $left != null {
+ padding-left: $left * $global-padding !important;
+ }
+ }
+
+ @mixin foundation-prototype-spacing {
+ @for $spacer from 0 through $prototype-spacers-count {
+ // All Sides
+ .margin-#{$spacer} {
+ @include margin($spacer, $spacer, $spacer, $spacer);
+ }
+
+ .padding-#{$spacer} {
+ @include padding($spacer, $spacer, $spacer, $spacer);
+ }
+
+ // Top Side
+ .margin-top-#{$spacer} {
+ @include margin($spacer, null, null, null);
+ }
+
+ .padding-top-#{$spacer} {
+ @include padding($spacer, null, null, null);
+ }
+
+ // Right Side
+ .margin-right-#{$spacer} {
+ @include margin(null, $spacer, null, null);
+ }
+
+ .padding-right-#{$spacer} {
+ @include padding(null, $spacer, null, null);
+ }
+
+ // Bottom Side
+ .margin-bottom-#{$spacer} {
+ @include margin(null, null, $spacer, null);
+ }
+
+ .padding-bottom-#{$spacer} {
+ @include padding(null, null, $spacer, null);
+ }
+
+ // Left Side
+ .margin-left-#{$spacer} {
+ @include margin(null, null, null, $spacer);
+ }
+
+ .padding-left-#{$spacer} {
+ @include padding(null, null, null, $spacer);
+ }
+
+ // Horizontal Axes
+ .margin-horizontal-#{$spacer} {
+ @include margin(null, $spacer, null, $spacer);
+ }
+
+ .padding-horizontal-#{$spacer} {
+ @include padding(null, $spacer, null, $spacer);
+ }
+
+ // Vertical Axes
+ .margin-vertical-#{$spacer} {
+ @include margin($spacer, null, $spacer, null)
+ }
+
+ .padding-vertical-#{$spacer} {
+ @include padding($spacer, null, $spacer, null)
+ }
+
+ @if ($prototype-spacing-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @if $size != $-zf-zero-breakpoint {
+ // All Sides
+ .#{$size}-margin-#{$spacer} {
+ @include margin($spacer, $spacer, $spacer, $spacer);
+ }
+
+ .#{$size}-padding-#{$spacer} {
+ @include padding($spacer, $spacer, $spacer, $spacer);
+ }
+
+ // Top Side
+ .#{$size}-margin-top-#{$spacer} {
+ @include margin($spacer, null, null, null);
+ }
+
+ .#{$size}-padding-top-#{$spacer} {
+ @include padding($spacer, null, null, null);
+ }
+
+ // Right Side
+ .#{$size}-margin-right-#{$spacer} {
+ @include margin(null, $spacer, null, null);
+ }
+
+ .#{$size}-padding-right-#{$spacer} {
+ @include padding(null, $spacer, null, null);
+ }
+
+ // Bottom Side
+ .#{$size}-margin-bottom-#{$spacer} {
+ @include margin(null, null, $spacer, null);
+ }
+
+ .#{$size}-padding-bottom-#{$spacer} {
+ @include padding(null, null, $spacer, null);
+ }
+
+ // Left Side
+ .#{$size}-margin-left-#{$spacer} {
+ @include margin(null, null, null, $spacer);
+ }
+
+ .#{$size}-padding-left-#{$spacer} {
+ @include padding(null, null, null, $spacer);
+ }
+
+ // Horizontal Axes
+ .#{$size}-margin-horizontal-#{$spacer} {
+ @include margin(null, $spacer, null, $spacer);
+ }
+
+ .#{$size}-padding-horizontal-#{$spacer} {
+ @include padding(null, $spacer, null, $spacer);
+ }
+
+ // Vertical Axes
+ .#{$size}-margin-vertical-#{$spacer} {
+ @include margin($spacer, null, $spacer, null)
+ }
+
+ .#{$size}-padding-vertical-#{$spacer} {
+ @include padding($spacer, null, $spacer, null)
+ }
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_text-decoration.scss +48 -0
@@ @@ -0,0 +1,48 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-text-decoration
+ ////
+
+ /// Responsive breakpoints for text decoration classes
+ /// @type Boolean
+ $prototype-decoration-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Map containing all the `text-decoration` classes
+ /// @type Map
+ $prototype-text-decoration: (
+ overline,
+ underline,
+ line-through,
+ ) !default;
+
+ /// Text Decoration, by default coming through a map `$prototype-text-decoration`
+ /// @param {String} $decoration [] Text Decoration
+ @mixin text-decoration($decoration) {
+ text-decoration: $decoration !important;
+ }
+
+ @mixin foundation-prototype-text-decoration {
+ @each $decoration in $prototype-text-decoration {
+ .text-#{$decoration} {
+ @include text-decoration($decoration);
+ }
+ }
+
+ @if ($prototype-decoration-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @each $decoration in $prototype-text-decoration {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-text-#{$decoration} {
+ @include text-decoration($decoration);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_text-transformation.scss +48 -0
@@ @@ -0,0 +1,48 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-text-transformation
+ ////
+
+ /// Responsive breakpoints for text transformation classes
+ /// @type Boolean
+ $prototype-transformation-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Map containing all the `text-transformation` classes
+ /// @type Map
+ $prototype-text-transformation: (
+ lowercase,
+ uppercase,
+ capitalize
+ ) !default;
+
+ /// Text Transformation, by default coming through a map `$prototype-text-transformation`
+ /// @param {String} $transformation [] Text Transformation
+ @mixin text-transform($transformation) {
+ text-transform: $transformation !important;
+ }
+
+ @mixin foundation-prototype-text-transformation {
+ @each $transformation in $prototype-text-transformation {
+ .text-#{$transformation} {
+ @include text-transform($transformation);
+ }
+ }
+
+ @if ($prototype-transformation-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @each $transformation in $prototype-text-transformation {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-text-#{$transformation} {
+ @include text-transform($transformation);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/prototype/_text-utilities.scss +88 -0
@@ @@ -0,0 +1,88 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group prototype-text-utilities
+ ////
+
+ /// Responsive breakpoints for text utilities
+ /// @type Boolean
+ $prototype-utilities-breakpoints: $global-prototype-breakpoints !default;
+
+ /// Default Value for `text-overflow` variable
+ /// @type String
+ $prototype-text-overflow: ellipsis !default;
+
+ /// Image Replacement utility. `text-hide`
+ @mixin text-hide {
+ font: 0/0 a !important;
+ color: transparent !important;
+ text-shadow: none !important;
+ background-color: transparent !important;
+ border: 0 !important;
+ }
+
+ /// Truncating the text, elipsis by default.
+ /// @param {String} $overflow [$prototype-text-overflow] Text Truncate
+ @mixin text-truncate(
+ $overflow: $prototype-text-overflow
+ ) {
+ max-width: 100% !important;
+ overflow: hidden !important;
+ text-overflow: $overflow;
+ white-space: nowrap !important;
+ }
+
+ /// No wrapping of the text. `text-nowrap`
+ @mixin text-nowrap {
+ white-space: nowrap !important;
+ }
+
+ /// Wrapping of the text. `text-wrap`
+ @mixin text-wrap {
+ word-wrap: break-word !important;
+ }
+
+ @mixin foundation-prototype-text-utilities {
+ .text-hide {
+ @include text-hide;
+ }
+
+ .text-truncate {
+ @include text-truncate;
+ }
+
+ .text-nowrap {
+ @include text-nowrap;
+ }
+
+ .text-wrap {
+ @include text-wrap;
+ }
+
+ @if ($prototype-utilities-breakpoints) {
+ // Loop through Responsive Breakpoints
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @if $size != $-zf-zero-breakpoint {
+ .#{$size}-text-hide {
+ @include text-hide;
+ }
+
+ .#{$size}-text-truncate {
+ @include text-truncate;
+ }
+
+ .#{$size}-text-nowrap {
+ @include text-nowrap;
+ }
+
+ .#{$size}-text-wrap {
+ @include text-wrap;
+ }
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/settings/_settings.scss +454 -116
@@ @@ -16,41 +16,65 @@
// 11. Button
// 12. Button Group
// 13. Callout
- // 14. Close Button
- // 15. Drilldown
- // 16. Dropdown
- // 17. Dropdown Menu
- // 18. Flex Video
- // 19. Forms
- // 20. Label
- // 21. Media Object
- // 22. Menu
- // 23. Off-canvas
- // 24. Orbit
- // 25. Pagination
- // 26. Progress Bar
- // 27. Reveal
- // 28. Slider
- // 29. Switch
- // 30. Table
- // 31. Tabs
- // 32. Thumbnail
- // 33. Tooltip
- // 34. Top Bar
+ // 14. Card
+ // 15. Close Button
+ // 16. Drilldown
+ // 17. Dropdown
+ // 18. Dropdown Menu
+ // 19. Flexbox Utilities
+ // 20. Forms
+ // 21. Label
+ // 22. Media Object
+ // 23. Menu
+ // 24. Meter
+ // 25. Off-canvas
+ // 26. Orbit
+ // 27. Pagination
+ // 28. Progress Bar
+ // 29. Prototype Arrow
+ // 30. Prototype Border-Box
+ // 31. Prototype Border-None
+ // 32. Prototype Bordered
+ // 33. Prototype Display
+ // 34. Prototype Font-Styling
+ // 35. Prototype List-Style-Type
+ // 36. Prototype Overflow
+ // 37. Prototype Position
+ // 38. Prototype Rounded
+ // 39. Prototype Separator
+ // 40. Prototype Shadow
+ // 41. Prototype Sizing
+ // 42. Prototype Spacing
+ // 43. Prototype Text-Decoration
+ // 44. Prototype Text-Transformation
+ // 45. Prototype Text-Utilities
+ // 46. Responsive Embed
+ // 47. Reveal
+ // 48. Slider
+ // 49. Switch
+ // 50. Table
+ // 51. Tabs
+ // 52. Thumbnail
+ // 53. Title Bar
+ // 54. Tooltip
+ // 55. Top Bar
+ // 56. Xy Grid
@import 'util/util';
// 1. Global
// ---------
- $global-width: rem-calc(1200);
$global-font-size: 100%;
+ $global-width: rem-calc(1200);
$global-lineheight: 1.5;
- $primary-color: #2199e8;
- $secondary-color: #777;
- $success-color: #3adb76;
- $warning-color: #ffae00;
- $alert-color: #ec5840;
+ $foundation-palette: (
+ primary: #1779ba,
+ secondary: #767676,
+ success: #3adb76,
+ warning: #ffae00,
+ alert: #cc4b37,
+ );
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
@@ @@ -58,18 +82,24 @@ $black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
- $body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
- $text-direction: ltr;
$global-margin: 1rem;
$global-padding: 1rem;
- $global-margin: 1rem;
+ $global-position: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
- $global-namespace: false;
+ $global-menu-padding: 0.7rem 1rem;
+ $global-menu-nested-margin: 1rem;
$global-text-direction: ltr;
- $rem-base: 16px;
+ $global-flexbox: true;
+ $global-prototype-breakpoints: false;
+ $global-button-cursor: auto;
+ $global-color-pick-contrast-tolerance: 0;
+ $print-transparent-backgrounds: true;
+
+ @include add-foundation-colors;
// 2. Breakpoints
// --------------
@@ @@ -81,6 +111,7 @@ $breakpoints: (
xlarge: 1200px,
xxlarge: 1440px,
);
+ $print-breakpoint: large;
$breakpoint-classes: (small medium large);
// 3. The Grid
@@ @@ -88,8 +119,13 @@ $breakpoint-classes: (small medium large);
$grid-row-width: $global-width;
$grid-column-count: 12;
- $grid-column-gutter: 30px;
- $block-grid-max: 6;
+ $grid-column-gutter: (
+ small: 20px,
+ medium: 30px,
+ );
+ $grid-column-align-edge: true;
+ $grid-column-alias: 'columns';
+ $block-grid-max: 8;
// 4. Base Typography
// ------------------
@@ @@ -97,28 +133,28 @@ $block-grid-max: 6;
$header-font-family: $body-font-family;
$header-font-weight: $global-weight-normal;
$header-font-style: normal;
- $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
- $header-sizes: (
+ $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+ $header-color: inherit;
+ $header-lineheight: 1.4;
+ $header-margin-bottom: 0.5rem;
+ $header-styles: (
small: (
- 'h1': 24,
- 'h2': 20,
- 'h3': 19,
- 'h4': 18,
- 'h5': 17,
- 'h6': 16,
+ 'h1': ('font-size': 24),
+ 'h2': ('font-size': 20),
+ 'h3': ('font-size': 19),
+ 'h4': ('font-size': 18),
+ 'h5': ('font-size': 17),
+ 'h6': ('font-size': 16),
),
medium: (
- 'h1': 48,
- 'h2': 40,
- 'h3': 31,
- 'h4': 25,
- 'h5': 20,
- 'h6': 16,
+ 'h1': ('font-size': 48),
+ 'h2': ('font-size': 40),
+ 'h3': ('font-size': 31),
+ 'h4': ('font-size': 25),
+ 'h5': ('font-size': 20),
+ 'h6': ('font-size': 16),
),
);
- $header-color: inherit;
- $header-lineheight: 1.4;
- $header-margin-bottom: 0.5rem;
$header-text-rendering: optimizeLegibility;
$small-font-size: 80%;
$header-small-font-color: $medium-gray;
@@ @@ -152,6 +188,7 @@ $blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid $medium-gray;
$cite-font-size: rem-calc(13);
$cite-color: $dark-gray;
+ $cite-pseudo-content: '\2014 \0020';
$keystroke-font: $font-family-monospace;
$keystroke-color: $black;
$keystroke-background: $light-gray;
@@ @@ -176,9 +213,9 @@ $stat-font-size: 2.5rem;
$abide-inputs: true;
$abide-labels: true;
- $input-background-invalid: $alert-color;
- $form-label-color-invalid: $alert-color;
- $input-error-color: $alert-color;
+ $input-background-invalid: get-color(alert);
+ $form-label-color-invalid: get-color(alert);
+ $input-error-color: get-color(alert);
$input-error-font-size: rem-calc(12);
$input-error-font-weight: $global-weight-bold;
@@ @@ -187,24 +224,38 @@ $input-error-font-weight: $global-weight-bold;
$accordion-background: $white;
$accordion-plusminus: true;
- $accordion-item-color: foreground($accordion-background, $primary-color);
+ $accordion-title-font-size: rem-calc(12);
+ $accordion-item-color: $primary-color;
$accordion-item-background-hover: $light-gray;
$accordion-item-padding: 1.25rem 1rem;
$accordion-content-background: $white;
$accordion-content-border: 1px solid $light-gray;
- $accordion-content-color: foreground($accordion-background, $primary-color);
+ $accordion-content-color: $body-font-color;
$accordion-content-padding: 1rem;
// 8. Accordion Menu
// -----------------
+ $accordionmenu-padding: $global-menu-padding;
+ $accordionmenu-nested-margin: $global-menu-nested-margin;
+ $accordionmenu-submenu-padding: $accordionmenu-padding;
$accordionmenu-arrows: true;
+ $accordionmenu-arrow-color: $primary-color;
+ $accordionmenu-item-background: null;
+ $accordionmenu-border: null;
+ $accordionmenu-submenu-toggle-background: null;
+ $accordion-submenu-toggle-border: $accordionmenu-border;
+ $accordionmenu-submenu-toggle-width: 40px;
+ $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
+ $accordionmenu-arrow-size: 6px;
// 9. Badge
// --------
$badge-background: $primary-color;
- $badge-color: foreground($badge-background);
+ $badge-color: $white;
+ $badge-color-alt: $black;
+ $badge-palette: $foundation-palette;
$badge-padding: 0.3em;
$badge-minwidth: 2.1em;
$badge-font-size: 0.6rem;
@@ @@ -219,26 +270,35 @@ $breadcrumbs-item-color-current: $black;
$breadcrumbs-item-color-disabled: $medium-gray;
$breadcrumbs-item-margin: 0.75rem;
$breadcrumbs-item-uppercase: true;
- $breadcrumbs-item-slash: true;
+ $breadcrumbs-item-separator: true;
+ $breadcrumbs-item-separator-item: '/';
+ $breadcrumbs-item-separator-item-rtl: '\\';
+ $breadcrumbs-item-separator-color: $medium-gray;
// 11. Button
// ----------
+ $button-font-family: inherit;
$button-padding: 0.85em 1em;
- $button-margin: 0 $global-margin $global-margin 0;
+ $button-margin: 0 0 $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
- $button-color: #fff;
- $button-color-alt: #000;
+ $button-color: $white;
+ $button-color-alt: $black;
$button-radius: $global-radius;
+ $button-hollow-border-width: 1px;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
);
+ $button-palette: $foundation-palette;
$button-opacity-disabled: 0.25;
+ $button-background-hover-lightness: -20%;
+ $button-hollow-hover-lightness: -50%;
+ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
// 12. Button Group
// ----------------
@@ @@ -247,6 +307,7 @@ $buttongroup-margin: 1rem;
$buttongroup-spacing: 1px;
$buttongroup-child-selector: '.button';
$buttongroup-expand-max: 6;
+ $buttongroup-radius-on-each: true;
// 13. Callout
// -----------
@@ @@ -261,29 +322,58 @@ $callout-font-color-alt: $body-background;
$callout-radius: $global-radius;
$callout-link-tint: 30%;
- // 14. Close Button
+ // 14. Card
+ // --------
+
+ $card-background: $white;
+ $card-font-color: $body-font-color;
+ $card-divider-background: $light-gray;
+ $card-border: 1px solid $light-gray;
+ $card-shadow: none;
+ $card-border-radius: $global-radius;
+ $card-padding: $global-padding;
+ $card-margin-bottom: $global-margin;
+
+ // 15. Close Button
// ----------------
$closebutton-position: right top;
- $closebutton-offset-horizontal: 1rem;
- $closebutton-offset-vertical: 0.5rem;
- $closebutton-size: 2em;
+ $closebutton-offset-horizontal: (
+ small: 0.66rem,
+ medium: 1rem,
+ );
+ $closebutton-offset-vertical: (
+ small: 0.33em,
+ medium: 0.5rem,
+ );
+ $closebutton-size: (
+ small: 1.5em,
+ medium: 2em,
+ );
$closebutton-lineheight: 1;
$closebutton-color: $dark-gray;
$closebutton-color-hover: $black;
- // 15. Drilldown
+ // 16. Drilldown
// -------------
$drilldown-transition: transform 0.15s linear;
$drilldown-arrows: true;
-
- // 16. Dropdown
+ $drilldown-padding: $global-menu-padding;
+ $drilldown-nested-margin: 0;
+ $drilldown-background: $white;
+ $drilldown-submenu-padding: $drilldown-padding;
+ $drilldown-submenu-background: $white;
+ $drilldown-arrow-color: $primary-color;
+ $drilldown-arrow-size: 6px;
+
+ // 17. Dropdown
// ------------
$dropdown-padding: 1rem;
+ $dropdown-background: $body-background;
$dropdown-border: 1px solid $medium-gray;
- $dropdown-font-size: 16rem;
+ $dropdown-font-size: 1rem;
$dropdown-width: 300px;
$dropdown-radius: $global-radius;
$dropdown-sizes: (
@@ @@ -292,23 +382,30 @@ $dropdown-sizes: (
large: 400px,
);
- // 17. Dropdown Menu
+ // 18. Dropdown Menu
// -----------------
$dropdownmenu-arrows: true;
+ $dropdownmenu-arrow-color: $anchor-color;
+ $dropdownmenu-arrow-size: 6px;
+ $dropdownmenu-arrow-padding: 1.5rem;
$dropdownmenu-min-width: 200px;
$dropdownmenu-background: $white;
- $dropdown-border: 1px solid $medium-gray;
-
- // 18. Flex Video
- // --------------
+ $dropdownmenu-submenu-background: $dropdownmenu-background;
+ $dropdownmenu-padding: $global-menu-padding;
+ $dropdownmenu-nested-margin: 0;
+ $dropdownmenu-submenu-padding: $dropdownmenu-padding;
+ $dropdownmenu-border: 1px solid $medium-gray;
+ $dropdown-menu-item-color-active: get-color(primary);
+ $dropdown-menu-item-background-active: transparent;
+
+ // 19. Flexbox Utilities
+ // ---------------------
- $flexvideo-padding-top: rem-calc(25);
- $flexvideo-margin-bottom: rem-calc(16);
- $flexvideo-ratio: 4 by 3;
- $flexvideo-ratio-widescreen: 16 by 9;
+ $flex-source-ordering-count: 6;
+ $flexbox-responsive-breakpoints: true;
- // 19. Forms
+ // 20. Forms
// ---------
$fieldset-border: 1px solid $medium-gray;
@@ @@ -316,7 +413,7 @@ $fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);
$legend-padding: rem-calc(0 3);
$form-spacing: rem-calc(16);
- $helptext-color: #333;
+ $helptext-color: $black;
$helptext-font-size: rem-calc(13);
$helptext-font-style: italic;
$input-prefix-color: $black;
@@ @@ -327,62 +424,96 @@ $form-label-color: $black;
$form-label-font-size: rem-calc(14);
$form-label-font-weight: $global-weight-normal;
$form-label-line-height: 1.8;
- $select-background: #fafafa;
- $select-triangle-color: #333;
+ $select-background: $white;
+ $select-triangle-color: $dark-gray;
$select-radius: $global-radius;
- $input-color: $dark-gray;
+ $input-color: $black;
+ $input-placeholder-color: $medium-gray;
$input-font-family: inherit;
$input-font-size: rem-calc(16);
+ $input-font-weight: $global-weight-normal;
+ $input-line-height: $global-lineheight;
$input-background: $white;
$input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
+ $input-padding: $form-spacing / 2;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
- $input-cursor-disabled: default;
+ $input-cursor-disabled: not-allowed;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-number-spinners: true;
$input-radius: $global-radius;
+ $form-button-radius: $global-radius;
- // 20. Label
+ // 21. Label
// ---------
$label-background: $primary-color;
- $label-color: foreground($label-background);
+ $label-color: $white;
+ $label-color-alt: $black;
+ $label-palette: $foundation-palette;
$label-font-size: 0.8rem;
$label-padding: 0.33333rem 0.5rem;
$label-radius: $global-radius;
- // 21. Media Object
+ // 22. Media Object
// ----------------
$mediaobject-margin-bottom: $global-margin;
$mediaobject-section-padding: $global-padding;
$mediaobject-image-width-stacked: 100%;
- // 22. Menu
+ // 23. Menu
// --------
$menu-margin: 0;
- $menu-margin-nested: 1rem;
- $menu-item-padding: 0.7rem 1rem;
+ $menu-nested-margin: $global-menu-nested-margin;
+ $menu-items-padding: $global-menu-padding;
+ $menu-simple-margin: 1rem;
+ $menu-item-color-active: $white;
+ $menu-item-background-active: get-color(primary);
$menu-icon-spacing: 0.25rem;
- $menu-expand-max: 6;
+ $menu-item-background-hover: $light-gray;
+ $menu-state-back-compat: true;
+ $menu-centered-back-compat: true;
+ $menu-icons-back-compat: true;
+
+ // 24. Meter
+ // ---------
- // 23. Off-canvas
+ $meter-height: 1rem;
+ $meter-radius: $global-radius;
+ $meter-background: $medium-gray;
+ $meter-fill-good: $success-color;
+ $meter-fill-medium: $warning-color;
+ $meter-fill-bad: $alert-color;
+
+ // 25. Off-canvas
// --------------
- $offcanvas-size: 250px;
+ $offcanvas-sizes: (
+ small: 250px,
+ );
+ $offcanvas-vertical-sizes: (
+ small: 250px,
+ );
$offcanvas-background: $light-gray;
- $offcanvas-zindex: -1;
+ $offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+ $offcanvas-inner-shadow-size: 20px;
+ $offcanvas-inner-shadow-color: rgba($black, 0.25);
+ $offcanvas-overlay-zindex: 11;
+ $offcanvas-push-zindex: 12;
+ $offcanvas-overlap-zindex: 13;
+ $offcanvas-reveal-zindex: 12;
$offcanvas-transition-length: 0.5s;
$offcanvas-transition-timing: ease;
+ $offcanvas-fixed-reveal: true;
$offcanvas-exit-background: rgba($white, 0.25);
$maincontent-class: 'off-canvas-content';
- $maincontent-shadow: 0 0 10px rgba($black, 0.5);
- // 24. Orbit
+ // 26. Orbit
// ---------
$orbit-bullet-background: $medium-gray;
@@ @@ -397,7 +528,7 @@ $orbit-control-background-hover: rgba($black, 0.5);
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;
- // 25. Pagination
+ // 27. Pagination
// --------------
$pagination-font-size: rem-calc(14);
@@ @@ -408,13 +539,14 @@ $pagination-item-spacing: rem-calc(1);
$pagination-radius: $global-radius;
$pagination-item-background-hover: $light-gray;
$pagination-item-background-current: $primary-color;
- $pagination-item-color-current: foreground($pagination-item-background-current);
+ $pagination-item-color-current: $white;
$pagination-item-color-disabled: $medium-gray;
$pagination-ellipsis-color: $black;
$pagination-mobile-items: false;
+ $pagination-mobile-current-item: false;
$pagination-arrows: true;
- // 26. Progress Bar
+ // 28. Progress Bar
// ----------------
$progress-height: 1rem;
@@ @@ -423,24 +555,194 @@ $progress-margin-bottom: $global-margin;
$progress-meter-background: $primary-color;
$progress-radius: $global-radius;
- // 27. Reveal
+ // 29. Prototype Arrow
+ // -------------------
+
+ $prototype-arrow-directions: (
+ down,
+ up,
+ right,
+ left
+ );
+ $prototype-arrow-size: 0.4375rem;
+ $prototype-arrow-color: $black;
+
+ // 30. Prototype Border-Box
+ // ------------------------
+
+ $prototype-border-box-breakpoints: $global-prototype-breakpoints;
+
+ // 31. Prototype Border-None
+ // -------------------------
+
+ $prototype-border-none-breakpoints: $global-prototype-breakpoints;
+
+ // 32. Prototype Bordered
+ // ----------------------
+
+ $prototype-bordered-breakpoints: $global-prototype-breakpoints;
+ $prototype-border-width: rem-calc(1);
+ $prototype-border-type: solid;
+ $prototype-border-color: $medium-gray;
+
+ // 33. Prototype Display
+ // ---------------------
+
+ $prototype-display-breakpoints: $global-prototype-breakpoints;
+ $prototype-display: (
+ inline,
+ inline-block,
+ block,
+ table,
+ table-cell
+ );
+
+ // 34. Prototype Font-Styling
+ // --------------------------
+
+ $prototype-font-breakpoints: $global-prototype-breakpoints;
+ $prototype-wide-letter-spacing: rem-calc(4);
+ $prototype-font-normal: $global-weight-normal;
+ $prototype-font-bold: $global-weight-bold;
+
+ // 35. Prototype List-Style-Type
+ // -----------------------------
+
+ $prototype-list-breakpoints: $global-prototype-breakpoints;
+ $prototype-style-type-unordered: (
+ disc,
+ circle,
+ square
+ );
+ $prototype-style-type-ordered: (
+ decimal,
+ lower-alpha,
+ lower-latin,
+ lower-roman,
+ upper-alpha,
+ upper-latin,
+ upper-roman
+ );
+
+ // 36. Prototype Overflow
+ // ----------------------
+
+ $prototype-overflow-breakpoints: $global-prototype-breakpoints;
+ $prototype-overflow: (
+ visible,
+ hidden,
+ scroll
+ );
+
+ // 37. Prototype Position
+ // ----------------------
+
+ $prototype-position-breakpoints: $global-prototype-breakpoints;
+ $prototype-position: (
+ static,
+ relative,
+ absolute,
+ fixed
+ );
+ $prototype-position-z-index: 975;
+
+ // 38. Prototype Rounded
+ // ---------------------
+
+ $prototype-rounded-breakpoints: $global-prototype-breakpoints;
+ $prototype-border-radius: rem-calc(3);
+
+ // 39. Prototype Separator
+ // -----------------------
+
+ $prototype-separator-breakpoints: $global-prototype-breakpoints;
+ $prototype-separator-align: center;
+ $prototype-separator-height: rem-calc(2);
+ $prototype-separator-width: 3rem;
+ $prototype-separator-background: $primary-color;
+ $prototype-separator-margin-top: $global-margin;
+
+ // 40. Prototype Shadow
+ // --------------------
+
+ $prototype-shadow-breakpoints: $global-prototype-breakpoints;
+ $prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
+ 0 2px 10px 0 rgba(0,0,0,.12);
+
+ // 41. Prototype Sizing
+ // --------------------
+
+ $prototype-sizing-breakpoints: $global-prototype-breakpoints;
+ $prototype-sizing: (
+ width,
+ height
+ );
+ $prototype-sizes: (
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%
+ );
+
+ // 42. Prototype Spacing
+ // ---------------------
+
+ $prototype-spacing-breakpoints: $global-prototype-breakpoints;
+ $prototype-spacers-count: 3;
+
+ // 43. Prototype Text-Decoration
+ // -----------------------------
+
+ $prototype-decoration-breakpoints: $global-prototype-breakpoints;
+ $prototype-text-decoration: (
+ overline,
+ underline,
+ line-through,
+ );
+
+ // 44. Prototype Text-Transformation
+ // ---------------------------------
+
+ $prototype-transformation-breakpoints: $global-prototype-breakpoints;
+ $prototype-text-transformation: (
+ lowercase,
+ uppercase,
+ capitalize
+ );
+
+ // 45. Prototype Text-Utilities
+ // ----------------------------
+
+ $prototype-utilities-breakpoints: $global-prototype-breakpoints;
+ $prototype-text-overflow: ellipsis;
+
+ // 46. Responsive Embed
+ // --------------------
+
+ $responsive-embed-margin-bottom: rem-calc(16);
+ $responsive-embed-ratios: (
+ default: 4 by 3,
+ widescreen: 16 by 9,
+ );
+
+ // 47. Reveal
// ----------
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
- $reveal-offset: rem-calc(100);
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
- // 28. Slider
+ // 48. Slider
// ----------
+ $slider-width-vertical: 0.5rem;
+ $slider-transition: all 0.2s ease-in-out;
$slider-height: 0.5rem;
- $slider-width-vertical: $slider-height;
$slider-background: $light-gray;
$slider-fill-background: $medium-gray;
$slider-handle-height: 1.4rem;
@@ @@ -448,9 +750,8 @@ $slider-handle-width: 1.4rem;
$slider-handle-background: $primary-color;
$slider-opacity-disabled: 0.25;
$slider-radius: $global-radius;
- $slider-transition: all 0.2s ease-in-out;
- // 29. Switch
+ // 49. Switch
// ----------
$switch-background: $medium-gray;
@@ @@ -466,7 +767,7 @@ $switch-paddle-offset: 0.25rem;
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
- // 30. Table
+ // 50. Table
// ---------
$table-background: $white;
@@ @@ -476,30 +777,36 @@ $table-padding: rem-calc(8 10 10);
$table-hover-scale: 2%;
$table-row-hover: darken($table-background, $table-hover-scale);
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+ $table-is-striped: true;
$table-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even;
$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+ $table-head-row-hover: darken($table-head-background, $table-hover-scale);
$table-foot-background: smart-scale($table-background, $table-color-scale);
+ $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
$table-head-font-color: $body-font-color;
+ $table-foot-font-color: $body-font-color;
$show-header-for-stacked: false;
+ $table-stack-breakpoint: medium;
- // 31. Tabs
+ // 51. Tabs
// --------
$tab-margin: 0;
$tab-background: $white;
+ $tab-color: $primary-color;
$tab-background-active: $light-gray;
- $tab-border: $light-gray;
- $tab-item-color: foreground($tab-background, $primary-color);
+ $tab-active-color: $primary-color;
+ $tab-item-font-size: rem-calc(12);
$tab-item-background-hover: $white;
$tab-item-padding: 1.25rem 1.5rem;
$tab-expand-max: 6;
$tab-content-background: $white;
$tab-content-border: $light-gray;
- $tab-content-color: foreground($tab-background, $primary-color);
+ $tab-content-color: $body-font-color;
$tab-content-padding: 1rem;
- // 32. Thumbnail
+ // 52. Thumbnail
// -------------
$thumbnail-border: solid 4px $white;
@@ @@ -509,23 +816,54 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;
- // 33. Tooltip
+ // 53. Title Bar
+ // -------------
+
+ $titlebar-background: $black;
+ $titlebar-color: $white;
+ $titlebar-padding: 0.5rem;
+ $titlebar-text-font-weight: bold;
+ $titlebar-icon-color: $white;
+ $titlebar-icon-color-hover: $medium-gray;
+ $titlebar-icon-spacing: 0.25rem;
+
+ // 54. Tooltip
// -----------
+ $has-tip-cursor: help;
+ $has-tip-font-weight: $global-weight-bold;
+ $has-tip-border-bottom: dotted 1px $dark-gray;
$tooltip-background-color: $black;
$tooltip-color: $white;
$tooltip-padding: 0.75rem;
+ $tooltip-max-width: 10rem;
$tooltip-font-size: $small-font-size;
$tooltip-pip-width: 0.75rem;
$tooltip-pip-height: $tooltip-pip-width * 0.866;
- $tooltip-pip-offset: 1.25rem;
$tooltip-radius: $global-radius;
- // 34. Top Bar
+ // 55. Top Bar
// -----------
$topbar-padding: 0.5rem;
- $topbar-background: #eee;
- $topbar-link-color: #fff;
+ $topbar-background: $light-gray;
+ $topbar-submenu-background: $topbar-background;
+ $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px;
+ $topbar-unstack-breakpoint: medium;
+
+ // 56. Xy Grid
+ // -----------
+
+ $xy-grid: true;
+ $grid-container: $global-width;
+ $grid-columns: 12;
+ $grid-margin-gutters: (
+ small: 20px,
+ medium: 30px
+ );
+ $grid-padding-gutters: $grid-margin-gutters;
+ $grid-container-padding: $grid-padding-gutters;
+ $grid-container-max: $global-width;
+ $xy-block-grid-max: 8;
generators/foundation/public/stylesheets/foundation6/typography/_alignment.scss +9 -8
@@ @@ -3,18 +3,19 @@
// Licensed under MIT Open Source
@mixin foundation-text-alignment {
- @each $align in (left, right, center, justify) {
- .text-#{$align} {
- text-align: $align;
- }
-
- @each $size in $breakpoint-classes {
- @include breakpoint($size) {
- @if $size != 'small' {
+ @each $size in $breakpoint-classes {
+ @include breakpoint($size) {
+ @each $align in (left, right, center, justify) {
+ @if $size != $-zf-zero-breakpoint {
.#{$size}-text-#{$align} {
text-align: $align;
}
}
+ @else {
+ .text-#{$align} {
+ text-align: $align;
+ }
+ }
}
}
}
generators/foundation/public/stylesheets/foundation6/typography/_base.scss +128 -55
@@ @@ -12,7 +12,7 @@
// - Paragraphs <p>
// - Bold/italics <b> <strong> <i> <em>
// - Small text <small>
- // - Headings <h1>—<h6>
+ // - Headings <h1>-<h6>
// - Anchors <a>
// - Dividers <hr>
// - Lists <ul> <ol> <dl>
@@ @@ -36,28 +36,7 @@ $header-font-style: normal !default;
/// Font stack used for elements that use monospaced type, such as code samples
/// @type String | List
- $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace !default;
-
- /// Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes.
- /// @type Map
- $header-sizes: (
- small: (
- 'h1': 24,
- 'h2': 20,
- 'h3': 19,
- 'h4': 18,
- 'h5': 17,
- 'h6': 16,
- ),
- medium: (
- 'h1': 48,
- 'h2': 40,
- 'h3': 31,
- 'h4': 25,
- 'h5': 20,
- 'h6': 16,
- ),
- ) !default;
+ $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;
/// Color of headers.
/// @type Color
@@ @@ -71,6 +50,47 @@ $header-lineheight: 1.4 !default;
/// @type Number
$header-margin-bottom: 0.5rem !default;
+ /// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.
+ /// @type Map
+ $header-styles: (
+ small: (
+ 'h1': ('font-size': 24),
+ 'h2': ('font-size': 20),
+ 'h3': ('font-size': 19),
+ 'h4': ('font-size': 18),
+ 'h5': ('font-size': 17),
+ 'h6': ('font-size': 16),
+ ),
+ medium: (
+ 'h1': ('font-size': 48),
+ 'h2': ('font-size': 40),
+ 'h3': ('font-size': 31),
+ 'h4': ('font-size': 25),
+ 'h5': ('font-size': 20),
+ 'h6': ('font-size': 16),
+ ),
+ ) !default;
+
+ // $header-styles map is built from $header-sizes in order to ensure downward compatibility
+ // when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss
+ @function build_from_header-sizes($header-sizes) {
+ @warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';
+ $header-styles: ();
+ @each $size, $headers in $header-sizes {
+ $header-map: ();
+ @each $header, $font-size in $headers {
+ $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));
+ }
+ $header-styles: map-merge($header-styles, ($size: $header-map));
+ }
+ @return $header-styles;
+ }
+
+ // If it exists $headers-sizes is used to build $header-styles. See the documentation.
+ @if variable-exists(header-sizes) {
+ $header-styles: build_from_header-sizes($header-sizes);
+ }
+
/// Text rendering method of headers.
/// @type String
$header-text-rendering: optimizeLegibility !default;
@@ @@ -127,7 +147,7 @@ $anchor-color: $primary-color !default;
/// @type Color
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;
- /// Default text deocration for links.
+ /// Default text decoration for links.
/// @type String
$anchor-text-decoration: none !default;
@@ @@ -203,6 +223,10 @@ $cite-font-size: rem-calc(13) !default;
/// @type Color
$cite-color: $dark-gray !default;
+ /// Pseudo content for `<cite>` elements.
+ /// @type String
+ $cite-pseudo-content: '\2014 \0020' !default;
+
/// Font family for `<kbd>` elements.
/// @type String | List
$keystroke-font: $font-family-monospace !default;
@@ @@ -254,9 +278,10 @@ $abbr-underline: 1px dotted $black !default;
// Paragraphs
p {
+ margin-bottom: $paragraph-margin-bottom;
+
font-size: inherit;
line-height: $paragraph-lineheight;
- margin-bottom: $paragraph-margin-bottom;
text-rendering: $paragraph-text-rendering;
}
@@ @@ -281,41 +306,73 @@ $abbr-underline: 1px dotted $black !default;
}
// Headings
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
+ h1, .h1,
+ h2, .h2,
+ h3, .h3,
+ h4, .h4,
+ h5, .h5,
+ h6, .h6 {
font-family: $header-font-family;
- font-weight: $header-font-weight;
font-style: $header-font-style;
+ font-weight: $header-font-weight;
color: $header-color;
text-rendering: $header-text-rendering;
- margin-top: 0;
- margin-bottom: $header-margin-bottom;
- line-height: $header-lineheight;
small {
- color: $header-small-font-color;
line-height: 0;
+ color: $header-small-font-color;
}
}
- // Heading sizes
- @each $size, $headers in $header-sizes {
+ // Heading styles
+ @each $size, $headers in $header-styles {
@include breakpoint($size) {
- @each $header, $font-size in $headers {
- #{$header} { font-size: rem-calc($font-size); }
+ @each $header, $header-defs in $headers {
+ $font-size-temp: 1rem;
+ #{$header}, .#{$header} {
+
+ @if map-has-key($header-defs, font-size) {
+ $font-size-temp: rem-calc(map-get($header-defs, font-size));
+ font-size: $font-size-temp;
+ } @else if map-has-key($header-defs, fs) {
+ $font-size-temp: rem-calc(map-get($header-defs, fs));
+ font-size: $font-size-temp;
+ } @else if $size == $-zf-zero-breakpoint {
+ font-size: $font-size-temp;
+ }
+ @if map-has-key($header-defs, line-height) {
+ line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);
+ } @else if map-has-key($header-defs, lh) {
+ line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);
+ } @else if $size == $-zf-zero-breakpoint {
+ line-height: unitless-calc($header-lineheight, $font-size-temp);
+ }
+
+ @if map-has-key($header-defs, margin-top) {
+ margin-top: rem-calc(map-get($header-defs, margin-top));
+ } @else if map-has-key($header-defs, mt) {
+ margin-top: rem-calc(map-get($header-defs, mt));
+ } @else if $size == $-zf-zero-breakpoint {
+ margin-top: 0;
+ }
+ @if map-has-key($header-defs, margin-bottom) {
+ margin-bottom: rem-calc(map-get($header-defs, margin-bottom));
+ } @else if map-has-key($header-defs, mb) {
+ margin-bottom: rem-calc(map-get($header-defs, mb));
+ } @else if $size == $-zf-zero-breakpoint {
+ margin-bottom: rem-calc($header-margin-bottom);
+ }
+ }
}
}
}
// Links
a {
+ line-height: inherit;
color: $anchor-color;
text-decoration: $anchor-text-decoration;
- line-height: inherit;
+
cursor: pointer;
&:hover,
@@ @@ -333,21 +390,25 @@ $abbr-underline: 1px dotted $black !default;
// Horizontal rule
hr {
+ clear: both;
+
max-width: $hr-width;
height: 0;
+ margin: $hr-margin;
+
border-top: 0;
+ border-right: 0;
border-bottom: $hr-border;
- margin: $hr-margin;
- clear: both;
+ border-left: 0;
}
// Lists
ul,
ol,
dl {
- line-height: $list-lineheight;
margin-bottom: $list-margin-bottom;
list-style-position: $list-style-position;
+ line-height: $list-lineheight;
}
// List items
@@ @@ -357,8 +418,8 @@ $abbr-underline: 1px dotted $black !default;
// Unordered lists
ul {
- list-style-type: $list-style-type;
margin-#{$global-left}: $list-side-margin;
+ list-style-type: $list-style-type;
}
// Ordered lists
@@ @@ -371,7 +432,6 @@ $abbr-underline: 1px dotted $black !default;
& & {
margin-#{$global-left}: $list-nested-side-margin;
margin-bottom: 0;
- list-style-type: inherit;
}
}
@@ @@ -404,33 +464,46 @@ $abbr-underline: 1px dotted $black !default;
color: $cite-color;
&:before {
- content: '\2014 \0020';
+ content: $cite-pseudo-content;
}
}
// Abbreviations
- abbr {
- color: $body-font-color;
- cursor: help;
+ abbr, abbr[title] {
border-bottom: $abbr-underline;
+ cursor: help;
+ text-decoration: none;
}
+ // Figures
+ figure {
+ margin: 0;
+ }
+
// Code
code {
+ padding: $code-padding;
+
+ border: $code-border;
+ background-color: $code-background;
+
font-family: $code-font-family;
font-weight: $code-font-weight;
color: $code-color;
- background-color: $code-background;
- border: $code-border;
- padding: $code-padding;
}
// Keystrokes
kbd {
- padding: $keystroke-padding;
margin: 0;
+ padding: $keystroke-padding;
+
background-color: $keystroke-background;
- color: $keystroke-color;
+
font-family: $keystroke-font;
+ color: $keystroke-color;
+
+ @if has-value($keystroke-radius) {
+ border-radius: $keystroke-radius;
+ }
}
}
generators/foundation/public/stylesheets/foundation6/typography/_helpers.scss +7 -4
@@ @@ -48,6 +48,7 @@ $stat-font-size: 2.5rem !default;
.subheader {
margin-top: $subheader-margin-top;
margin-bottom: $subheader-margin-bottom;
+
font-weight: $subheader-font-weight;
line-height: $subheader-lineheight;
color: $subheader-color;
@@ @@ -69,9 +70,11 @@ $stat-font-size: 2.5rem !default;
}
}
- // Use to remove the bullets from an unordered list
- .no-bullet {
- margin-#{$global-left}: 0;
- list-style: none;
+ ul, ol {
+ // Use to remove numbers from ordered list & bullets from unordered list
+ &.no-bullet {
+ margin-#{$global-left}: 0;
+ list-style: none;
+ }
}
}
generators/foundation/public/stylesheets/foundation6/typography/_print.scss +22 -9
@@ @@ -2,20 +2,26 @@
// foundation.zurb.com
// Licensed under MIT Open Source
- ////
- /// @group typography
- ////
+ /// If `true`, all elements will have transparent backgrounds when printed, to save on ink.
+ /// @type Boolean
+ /// @group global
+ $print-transparent-backgrounds: true !default;
+ $print-hrefs: true !default;
- // scss-lint:disable all
+ // sass-lint:disable-all
@mixin foundation-print-styles {
.show-for-print { display: none !important; }
@media print {
* {
- background: transparent !important;
- color: black !important; // Black prints faster: h5bp.com/s
+ @if $print-transparent-backgrounds {
+ background: transparent !important;
+ }
+
box-shadow: none !important;
+
+ color: black !important; // Black prints faster: h5bp.com/s
text-shadow: none !important;
}
@@ @@ -32,7 +38,9 @@
// Display the URL of a link after the text
a,
a:visited { text-decoration: underline;}
- a[href]:after { content: " (" attr(href) ")"; }
+ @if $print-hrefs {
+ a[href]:after { content: ' (' attr(href) ')'; }
+ }
// Don't display the URL for images or JavaScript/internal links
.ir a:after,
@@ @@ -40,12 +48,12 @@
a[href^='#']:after { content: ''; }
// Display what an abbreviation stands for after the text
- abbr[title]:after { content: " (" attr(title) ")"; }
+ abbr[title]:after { content: ' (' attr(title) ')'; }
// Prevent page breaks in the middle of a blockquote or preformatted text block
pre,
blockquote {
- border: 1px solid #999;
+ border: 1px solid $dark-gray;
page-break-inside: avoid;
}
@@ @@ -69,5 +77,10 @@
// Avoid page breaks after a heading
h2,
h3 { page-break-after: avoid; }
+
+ // Helper to re-allow page breaks in the middle of certain elements (e.g. pre, blockquote, tr)
+ .print-break-inside {
+ page-break-inside: auto;
+ }
}
}
generators/foundation/public/stylesheets/foundation6/typography/_typography.scss +0 -2
@@ @@ -6,8 +6,6 @@
/// @group typography
////
- // scss-lint:disable DeclarationOrder
-
// Base typography styles (tags only)
@import 'base';
generators/foundation/public/stylesheets/foundation6/util/_breakpoint.scss +213 -47
@@ @@ -6,8 +6,6 @@
/// @group breakpoints
////
- // scss-lint:disable ZeroUnit
-
/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
/// @type Map
$breakpoints: (
@@ @@ -18,13 +16,29 @@ $breakpoints: (
xxlarge: 1440px,
) !default;
+ /// The largest named breakpoint in which to include print as a media type
+ /// @type Keyword
+ $print-breakpoint: large !default;
+
+ $-zf-zero-breakpoint: small !default;
+
+ $-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
+
+ @if nth(map-values($breakpoints), 1) != 0 {
+ @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
+ }
+ @else {
+ $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);
+ }
+
/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
/// @type List
$breakpoint-classes: (small medium large) !default;
/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
- /// @param {Keyword|Number} $val - Breakpoint name, or px, rem, or em value to process.
- @function breakpoint($val: small) {
+ ///
+ /// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
+ @function breakpoint($val: $-zf-zero-breakpoint) {
// Size or keyword
$bp: nth($val, 1);
// Value for max-width media queries
@@ @@ -48,14 +62,7 @@ $breakpoint-classes: (small medium large) !default;
@if type-of($bp) == 'string' {
@if map-has-key($breakpoints, $bp) {
@if $dir == 'only' or $dir == 'down' {
- $next-bp: -zf-map-next($breakpoints, $bp);
-
- @if $next-bp == null {
- $bp-max: null;
- }
- @else {
- $bp-max: $next-bp;
- }
+ $bp-max: -zf-map-next($breakpoints, $bp);
}
$bp: map-get($breakpoints, $bp);
@@ @@ -63,6 +70,7 @@ $breakpoint-classes: (small medium large) !default;
}
@else {
$bp: 0;
+ @warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.';
}
}
@@ @@ -72,39 +80,49 @@ $breakpoint-classes: (small medium large) !default;
$bp-max: -zf-bp-to-em($bp-max) - (1/16);
}
- // Skip media query creation if the input is "0 up" or "0 down"
- @if $bp > 0 or $dir == 'only' {
- // "Only" ranges use the format "(min-width: n) and (max-width: n)"
+ // Conditions to skip media query creation
+ // - It's a named breakpoint that resolved to "0 down" or "0 up"
+ // - It's a numeric breakpoint that resolved to "0 " + anything
+ @if $bp > 0em or $dir == 'only' or $dir == 'down' {
+ // `only` ranges use the format `(min-width: n) and (max-width: n)`
@if $dir == 'only' {
+ // Only named media queries can have an "only" range
@if $named == true {
- $str: $str + '(min-width: #{$bp})';
+ // Only use "min-width" if the floor is greater than 0
+ @if $bp > 0em {
+ $str: $str + '(min-width: #{$bp})';
+ // Only add "and" to the media query if there's a ceiling
+ @if $bp-max != null {
+ $str: $str + ' and ';
+ }
+ }
+
+ // Only use "max-width" if there's a ceiling
@if $bp-max != null {
- $str: $str + ' and (max-width: #{$bp-max})';
+ $str: $str + '(max-width: #{$bp-max})';
}
}
@else {
- @warn 'Only named media queries can have an "only" range.';
+ @warn 'breakpoint(): Only named media queries can have an `only` range.';
}
}
- // "Down" ranges use the format "(max-width: n)"
+ // `down` ranges use the format `(max-width: n)`
@else if $dir == 'down' {
- $max: 0;
+ $max: if($named, $bp-max, $bp);
- // For named breakpoints, subtract the breakpoint value by one "pixel", or 1/16em.
- @if $named {
- $max: $bp-max;
- }
- @else {
- $max: $bp;
+ // Skip media query creation if input value is exactly "0 down",
+ // unless the function was called as "small down", in which case it's just "small only"
+ @if $named or $bp > 0em {
+ @if $max != null {
+ $str: $str + '(max-width: #{$max})';
+ }
}
-
- $str: $str + '(max-width: #{$max})';
}
- // "Up" ranges use the format "(min-width: n)"
- @else if strip-unit($bp) > 0 {
+ // `up` ranges use the format `(min-width: n)`
+ @else if $bp > 0em {
$str: $str + '(min-width: #{$bp})';
}
}
@@ @@ -114,14 +132,25 @@ $breakpoint-classes: (small medium large) !default;
/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:
/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.
- /// - If a pixel value is passed, it will be converted to an em value using `$rem-base`.
+ /// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.
/// - If a rem value is passed, the unit will be changed to em.
/// - If an em value is passed, the value will be used as-is.
- /// @content
+ ///
/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.
+ ///
/// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
@mixin breakpoint($value) {
$str: breakpoint($value);
+ $bp: index($-zf-breakpoints-keys, $value);
+ $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
+
+ $old-zf-size: null;
+
+ // Make breakpoint size available as a variable
+ @if global-variable-exists(-zf-size) {
+ $old-zf-size: $-zf-size;
+ }
+ $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
// If $str is still an empty string, no media query is needed
@if $str == '' {
@@ @@ -130,15 +159,32 @@ $breakpoint-classes: (small medium large) !default;
// Otherwise, wrap the content in a media query
@else {
- @media screen and #{$str} {
- @content;
+ // For named breakpoints less than or equal to $print-breakpoint, add print to the media types
+ @if $bp != null and $bp <= $pbp {
+ @media print, screen and #{$str} {
+ @content;
+ }
}
+ @else {
+ @media screen and #{$str} {
+ @content;
+ }
+ }
+ }
+
+ @if $old-zf-size != null {
+ // Restore the old breakpoint size
+ $-zf-size: $old-zf-size !global;
+ } @else {
+ $-zf-size: null !global;
}
}
/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.
/// @access private
+ ///
/// @param {Map} $map - Map to convert.
+ ///
/// @returns {String} A string containing the map's contents.
@function -zf-bp-serialize($map) {
$str: '';
@@ @@ -152,31 +198,151 @@ $breakpoint-classes: (small medium large) !default;
/// Find the next key in a map.
/// @access private
+ ///
/// @param {Map} $map - Map to traverse.
/// @param {Mixed} $key - Key to use as a starting point.
+ ///
/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.
@function -zf-map-next($map, $key) {
- // Store the values of the map as a list, so we can access them with nth
- $values: map-values($map);
- // Ghetto for loop
- $i: 1;
+ // Store the keys of the map as a list
+ $values: map-keys($map);
+
+ $i: 0;
+
+ // If the Key Exists, Get the index of the key within the map and add 1 to it for the next breakpoint in the map
+ @if (map-has-key($map, $key)) {
+ $i: index($values, $key) + 1;
+ }
+
+ // If the key doesn't exist, or it's the last key in the map, return null
+ @if ($i > length($map) or $i == 0) {
+ @return null;
+ }
+ // Otherwise, return the value
+ @else {
+ @return map-get($map, nth($values, $i));
+ }
+
+ }
+
+ /// Return a list of our named breakpoints less than $key. Useful for dealing with
+ /// responsive gutters for the grid.
+ /// @access private
+ ///
+ /// @param {String} $key - Key to use as last breakpoint.
+ ///
+ /// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
+ @function -zf-breakpoints-less-than($key) {
+ $list: ();
+ $found_key: false;
+
+ @each $name in $-zf-breakpoints-keys {
+ @if ($name == $key) {
+ $found_key: true;
+ }
+ @if not $found_key {
+ $list: append($list, $name);
+ }
+ }
+ @return $list;
+ }
+
+ /// Return a list of our named breakpoints less than $key. Useful for dealing with
+ /// responsive gutters for the grid.
+ /// @access private
+ ///
+ /// @param {String} $breakpoing - a named or non-named breakpoing.
+ ///
+ /// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
+ @function -zf-closest-named-breakpoint($breakpoint) {
+ $last: $-zf-zero-breakpoint;
$found: false;
- @each $val in map-keys($map) {
- @if $found == false {
- @if ($key == $val) {
+
+ $value: unitless-calc($breakpoint, 1px);
+ @each $key, $val in $breakpoints {
+ @if not $found {
+ @if unitless-calc($val) > $value {
$found: true;
+ } @else {
+ $last: $key;
}
- $i: $i + 1;
}
}
- // If the key doesn't exist, or it's the last key in the map, return null
- @if $i > length($map) {
- @return null;
+ @return $last;
+ }
+
+ /// Get a value for a breakpoint from a responsive config map or single value.
+ /// - If the config is a single value, return it regardless of `$value`.
+ /// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.
+ /// - If the config is a map and does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.
+ /// @access private
+ ///
+ /// @param {Number|Map} $map - Responsive config map or single value.
+ /// @param {Keyword} $value - Breakpoint name to use.
+ ///
+ /// @return {Mixed} The corresponding breakpoint value.
+ @function -zf-get-bp-val($map, $value) {
+ // If the given map is a single value, return it
+ @if type-of($map) == 'number' {
+ @return $map;
}
- // Otherwise, return the value
+
+
+ // Check if the breakpoint name exists globally
+ @if not map-has-key($breakpoints, $value) {
+ @if type-of($value) == 'number' {
+ $value: -zf-closest-named-breakpoint($value);
+ } @else {
+ @return null;
+ }
+ }
+ // Check if the breakpoint name exists in the local config map
+ @else if map-has-key($map, $value) {
+ // If it does, just return the value
+ @return map-get($map, $value);
+ }
+ // Otherwise, find the next lowest breakpoint and return that value
@else {
- @return nth($values, $i);
+ $anchor: null;
+ $found: false;
+
+ @each $key, $val in $breakpoints {
+ @if not $found {
+ @if map-has-key($map, $key) {
+ $anchor: $key;
+ }
+ @if $key == $value {
+ $found: true;
+ }
+ }
+ }
+
+ @return map-get($map, $anchor);
}
}
+
+ @if map-has-key($breakpoints, small) {
+ $small-up: screen;
+ $small-only: unquote('screen and #{breakpoint(small only)}');
+ }
+
+ @if map-has-key($breakpoints, medium) {
+ $medium-up: unquote('screen and #{breakpoint(medium)}');
+ $medium-only: unquote('screen and #{breakpoint(medium only)}');
+ }
+
+ @if map-has-key($breakpoints, large) {
+ $large-up: unquote('screen and #{breakpoint(large)}');
+ $large-only: unquote('screen and #{breakpoint(large only)}');
+ }
+
+ @if map-has-key($breakpoints, xlarge) {
+ $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');
+ $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');
+ }
+
+ @if map-has-key($breakpoints, xxlarge) {
+ $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');
+ }
generators/foundation/public/stylesheets/foundation6/util/_color.scss +105 -17
@@ @@ -2,35 +2,90 @@
// foundation.zurb.com
// Licensed under MIT Open Source
+ @import 'math';
+
+ $contrast-warnings: true !default;
+
////
/// @group functions
////
- /// Checks the lightness of `$color`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color.
+ /// Checks the luminance of `$color`.
///
- /// @param {color} $color - Color to check the lightness of.
- /// @param {color} $yes [$black] - Color to return if `$color` is light.
- /// @param {color} $no [$white] - Color to return if `$color` is dark.
- /// @param {percentage} $threshold [60%] - Threshold of lightness to check against.
+ /// @param {Color} $color - Color to check the luminance of.
///
- /// @returns {Color} The $yes color or $no color.
- @function foreground($color, $yes: $black, $no: $white, $threshold: 60%) {
- @if $color == transparent {
- $color: $body-background;
+ /// @returns {Number} The luminance of `$color`.
+ @function color-luminance($color) {
+ // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
+ // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+ $rgba: red($color), green($color), blue($color);
+ $rgba2: ();
+
+ @for $i from 1 through 3 {
+ $rgb: nth($rgba, $i);
+ $rgb: $rgb / 255;
+
+ $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));
+
+ $rgba2: append($rgba2, $rgb);
}
- @if (lightness($color) > $threshold) {
- @return $yes;
+
+ @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
+ }
+
+ /// Checks the contrast ratio of two colors.
+ ///
+ /// @param {Color} $color1 - First color to compare.
+ /// @param {Color} $color2 - Second color to compare.
+ ///
+ /// @returns {Number} The contrast ratio of the compared colors.
+ @function color-contrast($color1, $color2) {
+ // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
+ // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+ $luminance1: color-luminance($color1) + 0.05;
+ $luminance2: color-luminance($color2) + 0.05;
+ $ratio: $luminance1 / $luminance2;
+
+ @if $luminance2 > $luminance1 {
+ $ratio: 1 / $ratio;
}
- @else {
- @return $no;
+
+ $ratio: round($ratio * 10) / 10;
+
+ @return $ratio;
+ }
+
+ /// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.
+ ///
+ /// @param {Color} $base - Color to check luminance.
+ /// @param {List} $colors [($white, $black)] - Colors to compare.
+ /// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.
+ ///
+ /// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.
+ @function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {
+ $contrast: color-contrast($base, nth($colors, 1));
+ $best: nth($colors, 1);
+
+ @for $i from 2 through length($colors) {
+ $current-contrast: color-contrast($base, nth($colors, $i));
+ @if ($current-contrast - $contrast > $tolerance) {
+ $contrast: color-contrast($base, nth($colors, $i));
+ $best: nth($colors, $i);
+ }
+ }
+
+ @if ($contrast-warnings and $contrast < 3) {
+ @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
}
+
+ @return $best;
}
- /// Scales a color to be lighter if it's light, or darker if it's dark. Use this function to tint a color appropriate to its lightness.
+ /// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.
///
- /// @param {color} $color - Color to scale.
- /// @param {percentage} $scale [5%] - Amount to scale up or down.
- /// @param {percentage} $threshold [40%] - Threshold of lightness to check against.
+ /// @param {Color} $color - Color to scale.
+ /// @param {Percentage} $scale [5%] - Amount to scale up or down.
+ /// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.
///
/// @returns {Color} A scaled color.
@function smart-scale($color, $scale: 5%, $threshold: 40%) {
@@ @@ -39,3 +94,36 @@
}
@return scale-color($color, $lightness: $scale);
}
+
+ /// Get color from foundation-palette
+ ///
+ /// @param {key} color key from foundation-palette
+ ///
+ /// @returns {Color} color from foundation-palette
+ @function get-color($key) {
+ @if map-has-key($foundation-palette, $key) {
+ @return map-get($foundation-palette, $key);
+ }
+ @else {
+ @error 'given $key is not available in $foundation-palette';
+ }
+ }
+
+ /// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
+ @mixin add-foundation-colors() {
+ @if map-has-key($foundation-palette, primary) {
+ $primary-color: map-get($foundation-palette, primary) !global;
+ }
+ @if map-has-key($foundation-palette, secondary) {
+ $secondary-color: map-get($foundation-palette, secondary) !global;
+ }
+ @if map-has-key($foundation-palette, success) {
+ $success-color: map-get($foundation-palette, success) !global;
+ }
+ @if map-has-key($foundation-palette, warning) {
+ $warning-color: map-get($foundation-palette, warning) !global;
+ }
+ @if map-has-key($foundation-palette, alert) {
+ $alert-color: map-get($foundation-palette, alert) !global;
+ }
+ }
generators/foundation/public/stylesheets/foundation6/util/_direction.scss +31 -0
@@ @@ -0,0 +1,31 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group functions
+ ////
+
+ /// Returns the opposite direction of $dir
+ ///
+ /// @param {Keyword} $dir - Used direction between "top", "right", "bottom" and "left".
+ /// @return {Keyword} Opposite direction of $dir
+ @function direction-opposite(
+ $dir
+ ) {
+ $dirs: (top, right, bottom, left);
+ $place: index($dirs, $dir);
+
+ @if $place == null {
+ @error 'direction-opposite: Invalid $dir parameter, expected a value from "#{$dirs}", found "#{$dir}".';
+ @return null;
+ }
+
+ // Calcul the opposite place in a circle, with a starting index of 1
+ $length: length($dirs);
+ $demi: $length / 2;
+ $opposite-place: (($place + $demi - 1) % $length) + 1;
+
+ @return nth($dirs, $opposite-place);
+ }
+
generators/foundation/public/stylesheets/foundation6/util/_flex.scss +85 -0
@@ @@ -0,0 +1,85 @@
+ $-zf-flex-justify: (
+ 'left': flex-start,
+ 'right': flex-end,
+ 'center': center,
+ 'justify': space-between,
+ 'spaced': space-around,
+ );
+
+ $-zf-flex-align: (
+ 'top': flex-start,
+ 'bottom': flex-end,
+ 'middle': center,
+ 'stretch': stretch,
+ );
+
+ $-zf-flex-direction: (
+ 'row': row,
+ 'row-reverse': row-reverse,
+ 'column': column,
+ 'column-reverse': column-reverse,
+ );
+
+ /// Enables flexbox by adding `display: flex` to the element.
+ @mixin flex {
+ display: flex;
+ }
+
+ /// Horizontally or vertically aligns the items within a flex container.
+ ///
+ /// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
+ /// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
+ @mixin flex-align($x: null, $y: null) {
+ @if $x {
+ @if map-has-key($-zf-flex-justify, $x) {
+ $x: map-get($-zf-flex-justify, $x);
+ }
+ @else {
+ @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';
+ }
+ }
+
+ @if $y {
+ @if map-has-key($-zf-flex-align, $y) {
+ $y: map-get($-zf-flex-align, $y);
+ }
+ @else {
+ @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';
+ }
+ }
+
+ justify-content: $x;
+ align-items: $y;
+ }
+
+ /// Vertically align a single column within a flex row. Apply this mixin to a flex column.
+ ///
+ /// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
+ @mixin flex-align-self($y: null) {
+ @if $y {
+ @if map-has-key($-zf-flex-align, $y) {
+ $y: map-get($-zf-flex-align, $y);
+ }
+ @else {
+ @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';
+ }
+ }
+
+ align-self: $y;
+ }
+
+ /// Changes the source order of a flex child. Children with lower numbers appear first in the layout.
+ /// @param {Number} $order [0] - Order number to apply.
+ @mixin flex-order($order: 0) {
+ order: $order;
+ }
+
+ /// Change flex-direction
+ /// @param {Keyword} $direction [row] - Flex direction to use. Can be
+ /// - row (default): same as text direction
+ /// - row-reverse: opposite to text direction
+ /// - column: same as row but top to bottom
+ /// - column-reverse: same as row-reverse top to bottom
+ @mixin flex-direction($direction: row) {
+ flex-direction: $direction;
+ }
generators/foundation/public/stylesheets/foundation6/util/_math.scss +72 -0
@@ @@ -0,0 +1,72 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group functions
+ ////
+
+ /// Finds the greatest common divisor of two integers.
+ ///
+ /// @param {Number} $a - First number to compare.
+ /// @param {Number} $b - Second number to compare.
+ ///
+ /// @returns {Number} The greatest common divisor.
+ @function gcd($a, $b) {
+ // From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
+ @if ($b != 0) {
+ @return gcd($b, $a % $b);
+ }
+ @else {
+ @return abs($a);
+ }
+ }
+
+ /// Handles decimal exponents by trying to convert them into a fraction and then use a nth-root-algorithm for parts of the calculation
+ ///
+ /// @param {Number} $base - The base number.
+ /// @param {Number} $exponent - The exponent.
+ ///
+ /// @returns {Number} The product of the exponentiation.
+ @function pow($base, $exponent, $prec: 16) {
+ @if (floor($exponent) != $exponent) {
+ $prec2 : pow(10, $prec);
+ $exponent: round($exponent * $prec2);
+ $denominator: gcd($exponent, $prec2);
+ @return nth-root(pow($base, $exponent / $denominator), $prec2 / $denominator, $prec);
+ }
+
+ $value: $base;
+ @if $exponent > 1 {
+ @for $i from 2 through $exponent {
+ $value: $value * $base;
+ }
+ }
+ @else if $exponent < 1 {
+ @for $i from 0 through -$exponent {
+ $value: $value / $base;
+ }
+ }
+
+ @return $value;
+ }
+
+ @function nth-root($num, $n: 2, $prec: 12) {
+ // From: http://rosettacode.org/wiki/Nth_root#JavaScript
+ $x: 1;
+
+ @for $i from 0 through $prec {
+ $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1)));
+ }
+
+ @return $x;
+ }
+
+ /// Calculates the height as a percentage of the width for a given ratio.
+ /// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
+ /// @return {Number} A percentage value for the height relative to the width of a responsive container.
+ @function ratio-to-percentage($ratio) {
+ $w: nth($ratio, 1);
+ $h: nth($ratio, 3);
+ @return $h / $w * 100%;
+ }
generators/foundation/public/stylesheets/foundation6/util/_mixins.scss +161 -38
@@ @@ -6,49 +6,81 @@
/// @group functions
////
+ /// Creates an inner box-shadow for only one side
+ ///
+ /// @param {Keyword} $side - Side the shadow is supposed to appear. Can be `top`, `left`, `right` or `bottom`.
+ /// @param {Number} $size - Width for the target side.
+ /// @param {Color} $color - Color of the shadow.
+ @mixin inner-side-shadow(
+ $side: bottom,
+ $size: 20px,
+ $color: rgba($black, 0.25)
+ ) {
+
+ $helper: round($size * 0.65);
+
+ @if ($side == top) {
+ box-shadow: inset 0 $helper $size (-1)*$helper $color;
+ } @else if ($side == left) {
+ box-shadow: inset $helper 0 $size (-1)*$helper $color;
+ } @else if ($side == right) {
+ box-shadow: inset (-1)*$helper 0 $size (-1)*$helper $color;
+ } @else if ($side == bottom) {
+ box-shadow: inset 0 (-1)*$helper $size (-1)*$helper $color;
+ }
+ }
+
/// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.
+ ///
/// @param {Number} $triangle-size - Width of the triangle.
/// @param {Color} $triangle-color - Color of the triangle.
- /// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `top`, `right`, `bottom`, or `left`.
+ /// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`.
@mixin css-triangle(
$triangle-size,
$triangle-color,
$triangle-direction
) {
- content: '';
display: block;
width: 0;
height: 0;
+
border: inset $triangle-size;
+ content: '';
+
@if ($triangle-direction == down) {
- border-color: $triangle-color transparent transparent;
+ border-bottom-width: 0;
border-top-style: solid;
+ border-color: $triangle-color transparent transparent;
}
@if ($triangle-direction == up) {
- border-color: transparent transparent $triangle-color;
+ border-top-width: 0;
border-bottom-style: solid;
+ border-color: transparent transparent $triangle-color;
}
@if ($triangle-direction == right) {
- border-color: transparent transparent transparent $triangle-color;
+ border-right-width: 0;
border-left-style: solid;
+ border-color: transparent transparent transparent $triangle-color;
}
@if ($triangle-direction == left) {
- border-color: transparent $triangle-color transparent transparent;
+ border-left-width: 0;
border-right-style: solid;
+ border-color: transparent $triangle-color transparent transparent;
}
}
/// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div>
- /// @param {Color} $color - Color to use for the icon.
- /// @param {Color} $color-hover - Color to use when the icon is hovered over.
- /// @param {Number} $width - Width of the icon.
- /// @param {Number} $height - Height of the icon.
- /// @param {Number} $weight - Height of individual bars in the icon.
- /// @param {Number} $bars - Number of bars in the icon.
+ ///
+ /// @param {Color} $color [$black] - Color to use for the icon.
+ /// @param {Color} $color-hover [$dark-gray] - Color to use when the icon is hovered over.
+ /// @param {Number} $width [20px] - Width of the icon.
+ /// @param {Number} $height [16px] - Height of the icon.
+ /// @param {Number} $weight [2px] - Height of individual bars in the icon.
+ /// @param {Number} $bars [3] - Number of bars in the icon.
@mixin hamburger(
- $color: black,
- $color-hover: #666,
+ $color: $black,
+ $color-hover: $dark-gray,
$width: 20px,
$height: 16px,
$weight: 2px,
@@ @@ -59,33 +91,39 @@
$hover-shadow: ();
// Spacing between bars is calculated based on the total height of the icon and the weight of each bar
- $spacing: floor(($height - ($weight * $bars)) / ($bars - 1));
+ $spacing: ($height - ($weight * $bars)) / ($bars - 1);
+
+ @if unit($spacing) == 'px' {
+ $spacing: floor($spacing);
+ }
+
+ @for $i from 2 through $bars {
+ $offset: ($weight + $spacing) * ($i - 1);
+ $shadow: append($shadow, 0 $offset 0 $color, comma);
+ }
// Icon container
position: relative;
display: inline-block;
vertical-align: middle;
- cursor: pointer;
width: $width;
height: $height;
+ cursor: pointer;
// Icon bars
&::after {
- content: '';
position: absolute;
- display: block;
- width: 100%;
- height: $weight;
- background: $color;
top: 0;
left: 0;
- @for $i from 2 through $bars {
- $offset: ($weight + $spacing) * ($i - 1);
- $shadow: append($shadow, 0 $offset 0 $color, comma);
- }
+ display: block;
+ width: 100%;
+ height: $weight;
+ background: $color;
box-shadow: $shadow;
+
+ content: '';
}
// Hover state
@@ @@ -105,29 +143,39 @@
/// Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included.
/// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.
+ ///
/// @param {Color} $color [$black] - Color to use for the triangle.
@mixin background-triangle($color: $black) {
- $rgb: 'rgb(#{red($color)}, #{green($color)}, #{blue($color)})';
+ $rgb: 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: #{$rgb}"></polygon></svg>');
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #{$rgb}'></polygon></svg>");
@media screen and (min-width:0\0) {
- @if lightness($color) < 50% {
+ @if lightness($color) < 60% {
+ // White triangle
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
}
@else {
+ // Black triangle
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');
}
}
}
/// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
+ /// The clearfix is augmented with specific styles to prevent borders in flexbox environments
/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
+ /// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix
@mixin clearfix {
&::before,
&::after {
- content: ' ';
display: table;
+ content: ' ';
+
+ @if $global-flexbox {
+ flex-basis: 0;
+ order: 1;
+ }
}
&::after {
@@ @@ -136,9 +184,10 @@
}
/// Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.
+ /// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS
+ ///
/// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.
/// @param {Keyword} $elem [li] - Tag to use for sibling selectors.
- /// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS
@mixin auto-width($max, $elem: li) {
@for $i from 2 through $max {
&:nth-last-child(#{$i}):first-child,
@@ @@ -150,41 +199,115 @@
/// Removes the focus ring around an element when a mouse input is detected.
@mixin disable-mouse-outline {
- [data-whatinput="mouse"] & {
+ [data-whatinput='mouse'] & {
outline: 0;
}
}
/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
+ /// @link http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
@mixin element-invisible {
position: absolute !important;
width: 1px;
height: 1px;
+ padding: 0;
overflow: hidden;
- clip: rect(0, 0, 0, 0);
+ clip: rect(0,0,0,0);
+ white-space: nowrap;
+ clip-path: inset(50%);
+ border: 0;
}
/// Reverses the CSS output created by the `element-invisible()` mixin.
@mixin element-invisible-off {
position: static !important;
- height: auto;
width: auto;
+ height: auto;
overflow: visible;
clip: auto;
+ white-space: normal;
+ clip-path: none;
}
- /// Vertically and horizontally centers an element using `transform`.
+ /// Vertically centers the element inside of its first non-static parent,
+ /// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin vertical-center {
position: absolute;
top: 50%;
+ transform: translateY(-50%);
+ }
+
+ /// Horizontally centers the element inside of its first non-static parent,
+ /// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
+ @mixin horizontal-center {
+ position: absolute;
left: 50%;
- transform: translate(-50%, -50%);
+ transform: translateX(-50%);
}
- /// Vertically centers an element using `transform`.
- @mixin v-align-middle {
+ /// Absolutely centers the element inside of its first non-static parent,
+ /// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
+ @mixin absolute-center {
position: absolute;
top: 50%;
- transform: translateY(-50%);
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ /// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.
+ ///
+ /// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
+ /// @param {Boolean} $auto-insert-breakpoints [true] - If `false`, the mixin will iterate over breakpoints without doing the media query itself. Useful for more complex media query generation as in the margin grid.
+ @mixin -zf-each-breakpoint($small: true, $auto-insert-breakpoints: true) {
+ $list: $breakpoint-classes;
+
+ @if not $small {
+ $list: sl-remove($list, $-zf-zero-breakpoint);
+ }
+
+ @each $name in $list {
+ $-zf-size: $name !global;
+
+ @if $auto-insert-breakpoints {
+ @include breakpoint($name) {
+ @content;
+ }
+ }
+ @else {
+ @content;
+ }
+ }
+ }
+
+ /// Generate the `@content` passed to the mixin with a value `$-zf-bp-value` related to a breakpoint, depending on the `$name` parameter:
+ /// - For a single value, `$-zf-bp-value` is this value.
+ /// - For a breakpoint name, `$-zf-bp-value` is the corresponding breakpoint value in `$map`.
+ /// - For "auto", `$-zf-bp-value` is the corresponding breakpoint value in `$map` and is passed to `@content`, which is made responsive for each breakpoint of `$map`.
+ /// @param {Number|Array|Keyword} $name [auto] - Single value, breakpoint name, or list of breakpoint names to use. "auto" by default.
+ /// @param {Number|Map} $map - Map of breakpoints and values or single value to use.
+ @mixin -zf-breakpoint-value(
+ $name: auto,
+ $map: null
+ ) {
+ @if $name == auto and type-of($map) == 'map' {
+ // "auto"
+ @each $k, $v in $map {
+ @include breakpoint($k) {
+ @include -zf-breakpoint-value($v, $map) {
+ @content;
+ }
+ }
+ }
+ }
+ @else {
+ // breakpoint name
+ @if type-of($name) == 'string' {
+ $name: -zf-get-bp-val($map, $name);
+ }
+
+ // breakpoint value
+ $-zf-bp-value: $name !global;
+ @content;
+ }
}
generators/foundation/public/stylesheets/foundation6/util/_selector.scss +5 -3
@@ @@ -7,8 +7,10 @@
////
/// Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors.
+ ///
/// @param {List|Keyword} $types [()] - A list of text input types to use. Leave blank to use all of them.
- @function text-inputs($types: ()) {
+ /// @param {Keyword} $modifier [''] - A modifier to be applied to each text input type (e.g. a class or a pseudo-class). Leave blank to ignore.
+ @function text-inputs($types: (), $modifier: '') {
$return: ();
$all-types:
@@ @@ -27,12 +29,12 @@
url
color;
- @if not(hasvalue($types)) {
+ @if not has-value($types) {
$types: $all-types;
}
@each $type in $types {
- $return: append($return, unquote('[type="#{$type}"]'), comma);
+ $return: append($return, unquote('[type=\'#{$type}\']#{$modifier}'), comma);
}
@return $return;
generators/foundation/public/stylesheets/foundation6/util/_typography.scss +26 -0
@@ @@ -0,0 +1,26 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group functions
+ ////
+
+ $-zf-font-stack: (
+ 'georgia': (Georgia, "URW Bookman L", serif),
+ 'helvetica': (Helvetica, Arial, "Nimbus Sans L", sans-serif),
+ 'lucida-grande': ("Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans", sans-serif),
+ 'monospace': ("Courier New", Courier, "Nimbus Sans L", monospace),
+ 'system': (-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif),
+ 'verdana': (Verdana, Geneva, "DejaVu Sans", sans-serif),
+ );
+
+ /// Return a font stack list from a map. Equivalent to `map-safe-get($name, $-zf-font-stack)`.
+ ///
+ /// @param {String} $stack - Name of the font stack.
+ /// @param {Map} $map [$-zf-font-stack] - Map of font stacks to retrieve a list from.
+ ///
+ /// @returns {List} Found font stack.
+ @function font-stack($stack, $map: $-zf-font-stack) {
+ @return map-safe-get($map, $stack);
+ }
generators/foundation/public/stylesheets/foundation6/util/_unit.scss +100 -17
@@ @@ -6,30 +6,41 @@
/// @group functions
////
- // scss-lint:disable ZeroUnit
-
- /// Defines the base font size of the page, which is the value `1rem` is equal to.
- /// @type Number
- /// @group global
- $rem-base: 16px !default;
+ $global-font-size: 100% !default;
/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
+ ///
/// @param {Number} $num - Number to strip unit from.
+ ///
/// @returns {Number} The same number, sans unit.
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
/// Converts one or more pixel values into matching rem values.
+ ///
/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
- /// @param {Number} $base [$rem-base] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px.
+ /// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
+ ///
/// @returns {List} A list of converted values.
- @function rem-calc($values, $base: $rem-base) {
+ @function rem-calc($values, $base: null) {
$rem-values: ();
$count: length($values);
+ // If no base is defined, defer to the global font size
@if $base == null {
- $base: $rem-base;
+ $base: $global-font-size;
+ }
+
+ // If the base font size is a %, then multiply it by 16px
+ // This is because 100% font size = 16px in most all browsers
+ @if unit($base) == '%' {
+ $base: ($base / 100%) * 16px;
+ }
+
+ // Using rem as base allows correct scaling
+ @if unit($base) == 'rem' {
+ $base: strip-unit($base) * 16px;
}
@if $count == 1 {
@@ @@ -46,24 +57,96 @@ $rem-base: 16px !default;
// Converts a unitless, pixel, or rem value to em, for use in breakpoints.
@function -zf-bp-to-em($value) {
// Pixel and unitless values are converted to rems
- @if unit($value) == 'px' or unit($value) == '' {
- $value: rem-calc($value);
+ @if unit($value) == 'px' or unitless($value) {
+ $value: rem-calc($value, $base: 16px);
}
// Then the value is converted to ems
@return strip-unit($value) * 1em;
}
- /// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$rem-base` variable.
+ /// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
+ /// @access private
+ ///
/// @param {Number} $value - Pixel value to convert.
+ /// @param {Number} $base [null] - Base for pixel conversion.
+ ///
/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
- /// @access private
- @function -zf-to-rem($value, $base: $rem-base) {
- // Calculate rem if units for $value is not rem
- @if (unit($value) != 'rem') {
+ @function -zf-to-rem($value, $base: null) {
+ // Check if the value is a number
+ @if type-of($value) != 'number' {
+ @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
+ @return $value;
+ }
+
+ // Transform em into rem if someone hands over 'em's
+ @if unit($value) == 'em' {
+ $value: strip-unit($value) * 1rem;
+ }
+
+ // Calculate rem if units for $value is not rem or em
+ @if unit($value) != 'rem' {
$value: strip-unit($value) / strip-unit($base) * 1rem;
}
+
// Turn 0rem into 0
- @if ($value == 0rem) { $value: 0; }
+ @if $value == 0rem {
+ $value: 0;
+ }
+
+ @return $value;
+ }
+
+ /// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.
+ ///
+ /// @param {Number} $value - Value to convert to a unitless line height
+ /// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size
+ ///
+ /// @return {Number} - Unitless number
+ @function unitless-calc($value, $base: null) {
+
+ // If no base is defined, defer to the global font size
+ @if $base == null {
+ $base: $global-font-size;
+ }
+
+ // First, lets convert our $base to pixels
+
+ // If the base font size is a %, then multiply it by 16px
+ @if unit($base) == '%' {
+ $base: ($base / 100%) * 16px;
+ }
+
+ @if unit($base) == 'rem' {
+ $base: strip-unit($base) * 16px;
+ }
+
+ @if unit($base) == 'em' {
+ $base: strip-unit($base) * 16px;
+ }
+
+ // Now lets convert our value to pixels too
+ @if unit($value) == '%' {
+ $value: ($value / 100%) * $base;
+ }
+
+ @if unit($value) == 'rem' {
+ $value: strip-unit($value) * $base;
+ }
+
+ @if unit($value) == 'em' {
+ $value: strip-unit($value) * $base;
+ }
+
+ // 'px'
+ @if unit($value) == 'px' {
+ @return strip-unit($value) / strip-unit($base);
+ }
+
+ // assume that line-heights greatern then 10 are meant to be absolute in 'px'
+ @if unitless($value) and ($value > 10) {
+ @return $value / strip-unit($base);
+ }
+
@return $value;
}
generators/foundation/public/stylesheets/foundation6/util/_util.scss +4 -5
@@ @@ -2,14 +2,13 @@
// foundation.zurb.com
// Licensed under MIT Open Source
- // Utilities
+ @import 'math';
@import 'unit';
@import 'value';
+ @import 'direction';
@import 'color';
@import 'selector';
-
- // Libraries
+ @import 'flex';
@import 'breakpoint';
-
- // Mixins
@import 'mixins';
+ @import 'typography';
generators/foundation/public/stylesheets/foundation6/util/_value.scss +68 -25
@@ @@ -7,9 +7,11 @@
////
/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.
- /// @param $val - Value to check.
+ ///
+ /// @param {Mixed} $val - Value to check.
+ ///
/// @returns {Boolean} `true` if `$val` is not falsey.
- @function hasvalue($val) {
+ @function has-value($val) {
@if $val == null or $val == none {
@return false;
}
@@ @@ -23,8 +25,10 @@
}
/// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.
+ ///
/// @param {List|Number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"
/// @param {Keyword} $side - Side to return. Should be `top`, `right`, `bottom`, or `left`.
+ ///
/// @returns {Number} A single value based on `$val` and `$side`.
@function get-side($val, $side) {
$length: length($val);
@@ @@ -59,8 +63,10 @@
}
/// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.
+ ///
/// @param {List} $val - Border value to find a value in.
/// @param {Keyword} $elem - Border component to extract.
+ ///
/// @returns {Mixed} If the value exists, returns the value. If the value is not in the border definition, the function will return a 0px width, solid style, or black border.
@function get-border-value($val, $elem) {
// Find the width, style, or color and return it
@@ @@ -83,35 +89,72 @@
style: solid,
color: #000,
);
+
@return map-get($defaults, $elem);
}
- /// Calculates x^y, where x is `$base` and y is `$power`.
- /// @access private
- /// @param {Number} $base - Base number (x).
- /// @param {Number} $power - Exponent (y).
- @function pow($base, $power) {
- @if $power == 0 { @return 1; }
- @return $base * pow($base, $power - 1);
+ /// Finds a value in a nested map.
+ /// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Deep Get/Set in Maps
+ ///
+ /// @param {Map} $map - Map to pull a value from.
+ /// @param {String} $keys... - Keys to use when looking for a value.
+ /// @returns {Mixed} The value found in the map.
+ @function map-deep-get($map, $keys...) {
+ @each $key in $keys {
+ $map: map-get($map, $key);
+ }
+ @return $map;
}
- // TODO: Remove this (it's used by the grid but is overkill)
- /// Given a user-defined list of keywords and a list of possible keywords, find the ones that were passed in.
- /// @param {List} $opts - List of values to find keywords in.
- /// @param {List} $seeking - List of all possible keywords.
- /// @access private
- /// @returns {Map} A map of all keywords in $seeking. If a keyword was found in $opts, its value is true, otherwise false.
- @function -zf-get-options($opts, $seeking) {
- @if type-of($opts) != 'list' {
- $opts: ($opts);
- }
+ /// Casts a map into a list.
+ /// @link http://hugogiraudel.com/2014/04/28/casting-map-into-list/
+ ///
+ /// @param {Map} $map - Map to pull a value from.
+ ///
+ /// @returns {List} Depending on the flag, returns either $keys or $values or both.
+ @function map-to-list($map, $keep: 'both') {
+ $keep: if(index('keys' 'values', $keep), $keep, 'both');
+
+ @if type-of($map) == 'map' {
+ $keys: ();
+ $values: ();
- $map: ();
- @each $keyword in $seeking {
- $val: if(index($opts, $keyword) != null, true, false);
- $item: ($keyword: $val);
- $map: map-merge($map, $item);
+ @each $key, $val in $map {
+ $keys: append($keys, $key);
+ $values: append($values, $val);
+ }
+
+ @if $keep == 'keys' {
+ @return $keys;
+ }
+ @else if $keep == 'values' {
+ @return $values;
+ }
+ @else {
+ @return zip($keys, $values);
+ }
}
- @return $map;
+ @return if(type-of($map) != 'list', ($value,), $map);
+
+ }
+
+ /// Safely return a value from a map.
+ ///
+ /// @param {Map} $map - Map to retrieve a value from.
+ /// @param {String} $key - Name of the map key.
+ ///
+ /// @returns {List} Found value.
+ @function map-safe-get($map, $key) {
+ @if (type-of($map) == 'map' or (type-of($map) == 'list' and length($map) == 0)) {
+ @if (map-has-key($map, $key)) {
+ @return map-get($map, $key);
+ }
+ @else {
+ @error 'Key: `#{$key}` is not available in `#{$map}`';
+ }
+ }
+ @else {
+ @error '`#{$map}` is not a valid map';
+ }
}
generators/foundation/public/stylesheets/foundation6/vendor/normalize-scss/sass/_normalize.scss +3 -0
@@ @@ -0,0 +1,3 @@
+ @import 'normalize/variables';
+ @import 'normalize/vertical-rhythm';
+ @import 'normalize/normalize-mixin';
generators/foundation/public/stylesheets/foundation6/vendor/normalize-scss/sass/normalize/_import-now.scss +11 -0
@@ @@ -0,0 +1,11 @@
+ // Import Now
+ //
+ // If you import this module directly, it will immediately output all the CSS
+ // needed to normalize default HTML elements across all browsers.
+ //
+ // ```
+ // @import "normalize/import-now";
+ // ```
+
+ @import '../normalize';
+ @include normalize();
generators/foundation/public/stylesheets/foundation6/vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +676 -0
@@ @@ -0,0 +1,676 @@
+ // Helper function for the normalize() mixin.
+ @function _normalize-include($section, $exclude: null) {
+ // Initialize the global variables needed by this function.
+ @if not global_variable_exists(_normalize-include) {
+ $_normalize-include: () !global;
+ $_normalize-exclude: () !global;
+ }
+ // Since we are given 2 parameters, set the global variables.
+ @if $exclude != null {
+ $include: $section;
+ // Sass doesn't have static variables, so the work-around is to stuff these
+ // values into global variables so we can access them in future calls.
+ $_normalize-include: if(type-of($include) == 'list', $include, ($include)) !global;
+ $_normalize-exclude: if(type-of($exclude) == 'list', $exclude, ($exclude)) !global;
+ @return true;
+ }
+
+ // Check if $section is in the $include list.
+ @if index($_normalize-include, $section) {
+ @return true;
+ }
+ // If $include is set to (all), make sure $section is not in $exclude.
+ @else if not index($_normalize-exclude, $section) and index($_normalize-include, all) {
+ @return true;
+ }
+ @return false;
+ }
+
+ @mixin normalize($include: (all), $exclude: ()) {
+ // Initialize the helper function by passing it this mixin's parameters.
+ $init: _normalize-include($include, $exclude);
+
+ // If we've customized any font variables, we'll need extra properties.
+ @if $base-font-size != 16px
+ or $base-line-height != 24px
+ or $base-unit != 'em'
+ or $h1-font-size != 2 * $base-font-size
+ or $h2-font-size != 1.5 * $base-font-size
+ or $h3-font-size != 1.17 * $base-font-size
+ or $h4-font-size != 1 * $base-font-size
+ or $h5-font-size != 0.83 * $base-font-size
+ or $h6-font-size != 0.67 * $base-font-size {
+ $normalize-vertical-rhythm: true !global;
+ }
+
+ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
+
+ @if _normalize-include(document) {
+ /* Document
+ ========================================================================== */
+
+ /**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ * IE on Windows Phone and in iOS.
+ */
+
+ html {
+ font-family: $base-font-family; /* 1 */
+ @if $normalize-vertical-rhythm {
+ // Correct old browser bug that prevented accessible resizing of text
+ // when root font-size is set with px or em.
+ font-size: ($base-font-size / 16px) * 100%;
+ line-height: ($base-line-height / $base-font-size) * 1em; /* 2 */
+ }
+ @else {
+ line-height: 1.15; /* 2 */
+ }
+ -ms-text-size-adjust: 100%; /* 3 */
+ -webkit-text-size-adjust: 100%; /* 3 */
+ }
+ }
+
+ @if _normalize-include(sections) {
+ /* Sections
+ ========================================================================== */
+
+ /**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+ body {
+ margin: 0;
+ }
+
+ /**
+ * Add the correct display in IE 9-.
+ */
+
+ article,
+ aside,
+ footer,
+ header,
+ nav,
+ section {
+ display: block;
+ }
+
+ /**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+ h1 {
+ @include normalize-font-size($h1-font-size);
+ @if $normalize-vertical-rhythm {
+ @include normalize-line-height($h1-font-size);
+ }
+
+ @if $normalize-vertical-rhythm {
+ /* Set 1 unit of vertical rhythm on the top and bottom margins. */
+ @include normalize-margin(1 0, $h1-font-size);
+ }
+ @else {
+ margin: 0.67em 0;
+ }
+ }
+
+ @if $normalize-vertical-rhythm {
+ h2 {
+ @include normalize-font-size($h2-font-size);
+ @include normalize-line-height($h2-font-size);
+ @include normalize-margin(1 0, $h2-font-size);
+ }
+
+ h3 {
+ @include normalize-font-size($h3-font-size);
+ @include normalize-line-height($h3-font-size);
+ @include normalize-margin(1 0, $h3-font-size);
+ }
+
+ h4 {
+ @include normalize-font-size($h4-font-size);
+ @include normalize-line-height($h4-font-size);
+ @include normalize-margin(1 0, $h4-font-size);
+ }
+
+ h5 {
+ @include normalize-font-size($h5-font-size);
+ @include normalize-line-height($h5-font-size);
+ @include normalize-margin(1 0, $h5-font-size);
+ }
+
+ h6 {
+ @include normalize-font-size($h6-font-size);
+ @include normalize-line-height($h6-font-size);
+ @include normalize-margin(1 0, $h6-font-size);
+ }
+ }
+ }
+
+ @if _normalize-include(grouping) {
+ /* Grouping content
+ ========================================================================== */
+
+ @if $normalize-vertical-rhythm {
+ /**
+ * Set 1 unit of vertical rhythm on the top and bottom margin.
+ */
+
+ blockquote {
+ @include normalize-margin(1 $indent-amount);
+ }
+
+ dl,
+ ol,
+ ul {
+ @include normalize-margin(1 0);
+ }
+
+ /**
+ * Turn off margins on nested lists.
+ */
+
+ ol,
+ ul {
+ ol,
+ ul {
+ margin: 0;
+ }
+ }
+
+ dd {
+ margin: 0 0 0 $indent-amount;
+ }
+
+ ol,
+ ul {
+ padding: 0 0 0 $indent-amount;
+ }
+ }
+
+ /**
+ * Add the correct display in IE 9-.
+ */
+
+ figcaption,
+ figure {
+ display: block;
+ }
+
+ /**
+ * Add the correct margin in IE 8.
+ */
+
+ figure {
+ @if $normalize-vertical-rhythm {
+ @include normalize-margin(1 $indent-amount);
+ }
+ @else {
+ margin: 1em $indent-amount;
+ }
+ }
+
+ /**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+ hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+ }
+
+ /**
+ * Add the correct display in IE.
+ */
+
+ main {
+ display: block;
+ }
+
+ @if $normalize-vertical-rhythm {
+ /**
+ * Set 1 unit of vertical rhythm on the top and bottom margin.
+ */
+
+ p,
+ pre {
+ @include normalize-margin(1 0);
+ }
+ }
+
+ /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+ pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+ }
+ }
+
+ @if _normalize-include(links) {
+ /* Links
+ ========================================================================== */
+
+ /**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+ a {
+ background-color: transparent; /* 1 */
+ -webkit-text-decoration-skip: objects; /* 2 */
+ }
+
+ /**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+ a:active,
+ a:hover {
+ outline-width: 0;
+ }
+ }
+
+ @if _normalize-include(text) {
+ /* Text-level semantics
+ ========================================================================== */
+
+ /**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+ abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+ }
+
+ /**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+ b,
+ strong {
+ font-weight: inherit;
+ }
+
+ /**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+ b,
+ strong {
+ font-weight: bolder;
+ }
+
+ /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+ code,
+ kbd,
+ samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+ }
+
+ /**
+ * Add the correct font style in Android 4.3-.
+ */
+
+ dfn {
+ font-style: italic;
+ }
+
+ /**
+ * Add the correct background and color in IE 9-.
+ */
+
+ mark {
+ background-color: #ff0;
+ color: #000;
+ }
+
+ /**
+ * Add the correct font size in all browsers.
+ */
+
+ small {
+ font-size: 80%;
+ }
+
+ /**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+ sub,
+ sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+ }
+
+ sub {
+ bottom: -0.25em;
+ }
+
+ sup {
+ top: -0.5em;
+ }
+ }
+
+ @if _normalize-include(embedded) {
+ /* Embedded content
+ ========================================================================== */
+
+ /**
+ * Add the correct display in IE 9-.
+ */
+
+ audio,
+ video {
+ display: inline-block;
+ }
+
+ /**
+ * Add the correct display in iOS 4-7.
+ */
+
+ audio:not([controls]) {
+ display: none;
+ height: 0;
+ }
+
+ /**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+ img {
+ border-style: none;
+ }
+
+ /**
+ * Hide the overflow in IE.
+ */
+
+ svg:not(:root) {
+ overflow: hidden;
+ }
+ }
+
+ @if _normalize-include(forms) {
+ /* Forms
+ ========================================================================== */
+
+ /**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+ button,
+ input,
+ optgroup,
+ select,
+ textarea {
+ font-family: $base-font-family; /* 1 */
+ font-size: 100%; /* 1 */
+ @if $normalize-vertical-rhythm {
+ line-height: ($base-line-height / $base-font-size) * 1em; /* 1 */
+ }
+ @else {
+ line-height: 1.15; /* 1 */
+ }
+ margin: 0; /* 2 */
+ }
+
+ /**
+ * Show the overflow in IE.
+ */
+
+ button {
+ overflow: visible;
+ }
+
+ /**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+ button,
+ select { /* 1 */
+ text-transform: none;
+ }
+
+ /**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ * controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+ button,
+ html [type="button"], /* 1 */
+ [type="reset"],
+ [type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ }
+
+ button,
+ [type="button"],
+ [type="reset"],
+ [type="submit"] {
+
+ /**
+ * Remove the inner border and padding in Firefox.
+ */
+
+ &::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+ }
+
+ /**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+ &:-moz-focusring {
+ outline: 1px dotted ButtonText;
+ }
+ }
+
+ /**
+ * Show the overflow in Edge.
+ */
+
+ input {
+ overflow: visible;
+ }
+
+ /**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+ [type="checkbox"],
+ [type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+ }
+
+ /**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+ [type="number"]::-webkit-inner-spin-button,
+ [type="number"]::-webkit-outer-spin-button {
+ height: auto;
+ }
+
+ /**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+ [type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+
+ /**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-decoration {
+ -webkit-appearance: none;
+ }
+ }
+
+ /**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+ ::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+ }
+
+ /**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+ fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+ }
+
+ /**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+ legend {
+ box-sizing: border-box; /* 1 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ color: inherit; /* 2 */
+ white-space: normal; /* 1 */
+ }
+
+ /**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+ progress {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+ }
+
+ /**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+ textarea {
+ overflow: auto;
+ }
+ }
+
+ @if _normalize-include(interactive) {
+ /* Interactive
+ ========================================================================== */
+
+ /*
+ * Add the correct display in Edge, IE, and Firefox.
+ */
+
+ details {
+ display: block;
+ }
+
+ /*
+ * Add the correct display in all browsers.
+ */
+
+ summary {
+ display: list-item;
+ }
+
+ /*
+ * Add the correct display in IE 9-.
+ */
+
+ menu {
+ display: block;
+
+ @if $normalize-vertical-rhythm {
+ /*
+ * 1. Set 1 unit of vertical rhythm on the top and bottom margin.
+ * 2. Set consistent space for the list style image.
+ */
+
+ @include normalize-margin(1 0); /* 1 */
+ padding: 0 0 0 $indent-amount; /* 2 */
+
+ /**
+ * Turn off margins on nested lists.
+ */
+
+ menu &,
+ ol &,
+ ul & {
+ margin: 0;
+ }
+ }
+ }
+ }
+
+ @if _normalize-include(scripting) {
+ /* Scripting
+ ========================================================================== */
+
+ /**
+ * Add the correct display in IE 9-.
+ */
+
+ canvas {
+ display: inline-block;
+ }
+
+ /**
+ * Add the correct display in IE.
+ */
+
+ template {
+ display: none;
+ }
+ }
+
+ @if _normalize-include(hidden) {
+ /* Hidden
+ ========================================================================== */
+
+ /**
+ * Add the correct display in IE 10-.
+ */
+
+ [hidden] {
+ display: none;
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/vendor/normalize-scss/sass/normalize/_variables.scss +36 -0
@@ @@ -0,0 +1,36 @@
+ //
+ // Variables
+ //
+ // You can override the default values by setting the variables in your Sass
+ // before importing the normalize-scss library.
+
+ // The font size set on the root html element.
+ $base-font-size: 16px !default;
+
+ // The base line height determines the basic unit of vertical rhythm.
+ $base-line-height: 24px !default;
+
+ // The length unit in which to output vertical rhythm values.
+ // Supported values: px, em, rem.
+ $base-unit: 'em' !default;
+
+ // The default font family.
+ $base-font-family: sans-serif !default;
+
+ // The font sizes for h1-h6.
+ $h1-font-size: 2 * $base-font-size !default;
+ $h2-font-size: 1.5 * $base-font-size !default;
+ $h3-font-size: 1.17 * $base-font-size !default;
+ $h4-font-size: 1 * $base-font-size !default;
+ $h5-font-size: 0.83 * $base-font-size !default;
+ $h6-font-size: 0.67 * $base-font-size !default;
+
+ // The amount lists and blockquotes are indented.
+ $indent-amount: 40px !default;
+
+ // The following variable controls whether normalize-scss will output
+ // font-sizes, line-heights and block-level top/bottom margins that form a basic
+ // vertical rhythm on the page, which differs from the original Normalize.css.
+ // However, changing any of the variables above will cause
+ // $normalize-vertical-rhythm to be automatically set to true.
+ $normalize-vertical-rhythm: false !default;
generators/foundation/public/stylesheets/foundation6/vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +61 -0
@@ @@ -0,0 +1,61 @@
+ //
+ // Vertical Rhythm
+ //
+ // This is the minimal amount of code needed to create vertical rhythm in our
+ // CSS. If you are looking for a robust solution, look at the excellent Typey
+ // library. @see https://github.com/jptaranto/typey
+
+ @function normalize-rhythm($value, $relative-to: $base-font-size, $unit: $base-unit) {
+ @if unit($value) != px {
+ @error "The normalize vertical-rhythm module only supports px inputs. The typey library is better.";
+ }
+ @if $unit == rem {
+ @return ($value / $base-font-size) * 1rem;
+ }
+ @else if $unit == em {
+ @return ($value / $relative-to) * 1em;
+ }
+ @else { // $unit == px
+ @return $value;
+ }
+ }
+
+ @mixin normalize-font-size($value, $relative-to: $base-font-size) {
+ @if unit($value) != 'px' {
+ @error "normalize-font-size() only supports px inputs. The typey library is better.";
+ }
+ font-size: normalize-rhythm($value, $relative-to);
+ }
+
+ @mixin normalize-rhythm($property, $values, $relative-to: $base-font-size) {
+ $value-list: $values;
+ $sep: space;
+ @if type-of($values) == 'list' {
+ $sep: list-separator($values);
+ }
+ @else {
+ $value-list: append((), $values);
+ }
+
+ $normalized-values: ();
+ @each $value in $value-list {
+ @if unitless($value) and $value != 0 {
+ $value: $value * normalize-rhythm($base-line-height, $relative-to);
+ }
+ $normalized-values: append($normalized-values, $value, $sep);
+ }
+ #{$property}: $normalized-values;
+ }
+
+ @mixin normalize-margin($values, $relative-to: $base-font-size) {
+ @include normalize-rhythm(margin, $values, $relative-to);
+ }
+
+ @mixin normalize-line-height($font-size, $min-line-padding: 2px) {
+ $lines: ceil($font-size / $base-line-height);
+ // If lines are cramped include some extra leading.
+ @if ($lines * $base-line-height - $font-size) < ($min-line-padding * 2) {
+ $lines: $lines + 1;
+ }
+ @include normalize-rhythm(line-height, $lines, $font-size);
+ }
generators/foundation/public/stylesheets/foundation6/vendor/normalize.scss +0 -424
@@ @@ -1,424 +0,0 @@
- /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-
- /**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS and IE text size adjust after device orientation change,
- * without disabling user zoom.
- */
-
- html {
- font-family: sans-serif; /* 1 */
- -ms-text-size-adjust: 100%; /* 2 */
- -webkit-text-size-adjust: 100%; /* 2 */
- }
-
- /**
- * Remove default margin.
- */
-
- body {
- margin: 0;
- }
-
- /* HTML5 display definitions
- ========================================================================== */
-
- /**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-
- article,
- aside,
- details,
- figcaption,
- figure,
- footer,
- header,
- hgroup,
- main,
- menu,
- nav,
- section,
- summary {
- display: block;
- }
-
- /**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-
- audio,
- canvas,
- progress,
- video {
- display: inline-block; /* 1 */
- vertical-align: baseline; /* 2 */
- }
-
- /**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
- audio:not([controls]) {
- display: none;
- height: 0;
- }
-
- /**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
- */
-
- [hidden],
- template {
- display: none;
- }
-
- /* Links
- ========================================================================== */
-
- /**
- * Remove the gray background color from active links in IE 10.
- */
-
- a {
- background-color: transparent;
- }
-
- /**
- * Improve readability of focused elements when they are also in an
- * active/hover state.
- */
-
- a:active,
- a:hover {
- outline: 0;
- }
-
- /* Text-level semantics
- ========================================================================== */
-
- /**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-
- abbr[title] {
- border-bottom: 1px dotted;
- }
-
- /**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-
- b,
- strong {
- font-weight: bold;
- }
-
- /**
- * Address styling not present in Safari and Chrome.
- */
-
- dfn {
- font-style: italic;
- }
-
- /**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-
- h1 {
- font-size: 2em;
- margin: 0.67em 0;
- }
-
- /**
- * Address styling not present in IE 8/9.
- */
-
- mark {
- background: #ff0;
- color: #000;
- }
-
- /**
- * Address inconsistent and variable font size in all browsers.
- */
-
- small {
- font-size: 80%;
- }
-
- /**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-
- sub,
- sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
- }
-
- sup {
- top: -0.5em;
- }
-
- sub {
- bottom: -0.25em;
- }
-
- /* Embedded content
- ========================================================================== */
-
- /**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-
- img {
- border: 0;
- }
-
- /**
- * Correct overflow not hidden in IE 9/10/11.
- */
-
- svg:not(:root) {
- overflow: hidden;
- }
-
- /* Grouping content
- ========================================================================== */
-
- /**
- * Address margin not present in IE 8/9 and Safari.
- */
-
- figure {
- margin: 1em 40px;
- }
-
- /**
- * Address differences between Firefox and other browsers.
- */
-
- hr {
- box-sizing: content-box;
- height: 0;
- }
-
- /**
- * Contain overflow in all browsers.
- */
-
- pre {
- overflow: auto;
- }
-
- /**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-
- code,
- kbd,
- pre,
- samp {
- font-family: monospace, monospace;
- font-size: 1em;
- }
-
- /* Forms
- ========================================================================== */
-
- /**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-
- /**
- * 1. Correct color not being inherited.
- * Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-
- button,
- input,
- optgroup,
- select,
- textarea {
- color: inherit; /* 1 */
- font: inherit; /* 2 */
- margin: 0; /* 3 */
- }
-
- /**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-
- button {
- overflow: visible;
- }
-
- /**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-
- button,
- select {
- text-transform: none;
- }
-
- /**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- * and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- * `input` and others.
- */
-
- button,
- html input[type="button"], /* 1 */
- input[type="reset"],
- input[type="submit"] {
- -webkit-appearance: button; /* 2 */
- cursor: pointer; /* 3 */
- }
-
- /**
- * Re-set default cursor for disabled elements.
- */
-
- button[disabled],
- html input[disabled] {
- cursor: default;
- }
-
- /**
- * Remove inner padding and border in Firefox 4+.
- */
-
- button::-moz-focus-inner,
- input::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
-
- /**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-
- input {
- line-height: normal;
- }
-
- /**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-
- input[type="checkbox"],
- input[type="radio"] {
- box-sizing: border-box; /* 1 */
- padding: 0; /* 2 */
- }
-
- /**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-
- input[type="number"]::-webkit-inner-spin-button,
- input[type="number"]::-webkit-outer-spin-button {
- height: auto;
- }
-
- /**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
- */
-
- input[type="search"] {
- -webkit-appearance: textfield; /* 1 */
- box-sizing: content-box; /* 2 */
- }
-
- /**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-
- input[type="search"]::-webkit-search-cancel-button,
- input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
- }
-
- /**
- * Define consistent border, margin, and padding.
- */
-
- fieldset {
- border: 1px solid #c0c0c0;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em;
- }
-
- /**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-
- legend {
- border: 0; /* 1 */
- padding: 0; /* 2 */
- }
-
- /**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-
- textarea {
- overflow: auto;
- }
-
- /**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-
- optgroup {
- font-weight: bold;
- }
-
- /* Tables
- ========================================================================== */
-
- /**
- * Remove most spacing between table cells.
- */
-
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
-
- td,
- th {
- padding: 0;
- }
generators/foundation/public/stylesheets/foundation6/vendor/sassy-lists/stylesheets/functions/_contain.scss +31 -0
@@ @@ -0,0 +1,31 @@
+ ///
+ /// Returns whether `$list` contains `$value`.
+ ///
+ /// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-contain
+ ///
+ /// @param {List} $list - list to check
+ /// @param {*} $value - value to look for
+ ///
+ /// @example
+ /// sl-contain(a b c, a)
+ /// // true
+ ///
+ /// @example
+ /// sl-contain(a b c, z)
+ /// // false
+ ///
+ /// @return {Bool}
+ ///
+
+ @function sl-contain($list, $value) {
+ @return not not index($list, $value);
+ }
+
+ ///
+ /// @requires sl-contain
+ /// @alias sl-contain
+ ///
+
+ @function sl-include($list, $value) {
+ @return sl-contain($list, $value);
+ }
generators/foundation/public/stylesheets/foundation6/vendor/sassy-lists/stylesheets/functions/_purge.scss +38 -0
@@ @@ -0,0 +1,38 @@
+ /// Removes all false and null values from `$list`.
+ ///
+ /// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-purge
+ ///
+ /// @requires sl-is-true
+ /// @requires sl-to-list
+ ///
+ /// @param {List} $list - list to purge
+ ///
+ /// @example
+ /// sl-purge(null a false b)
+ /// // a b
+ ///
+ /// @return {List}
+ ///
+
+ @function sl-purge($list) {
+ $_: sl-missing-dependencies('sl-is-true', 'sl-to-list');
+
+ $result: ();
+
+ @each $item in $list {
+ @if sl-is-true($item) {
+ $result: append($result, $item, list-separator($list));
+ }
+ }
+
+ @return sl-to-list($result);
+ }
+
+ ///
+ /// @requires sl-purge
+ /// @alias sl-purge
+ ///
+
+ @function sl-clean($list) {
+ @return sl-purge($list);
+ }
generators/foundation/public/stylesheets/foundation6/vendor/sassy-lists/stylesheets/functions/_remove.scss +31 -0
@@ @@ -0,0 +1,31 @@
+ ///
+ /// Removes value(s) `$value` from `$list`.
+ ///
+ /// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-remove
+ ///
+ /// @requires sl-replace
+ ///
+ /// @param {List} $list - list to update
+ /// @param {*} $value - value to remove
+ ///
+ /// @example
+ /// sl-remove(a b c, a)
+ /// // b c
+ ///
+ /// @return {List}
+ ///
+
+ @function sl-remove($list, $value) {
+ $_: sl-missing-dependencies('sl-replace');
+
+ @return sl-replace($list, $value, null);
+ }
+
+ ///
+ /// @requires sl-remove
+ /// @alias sl-remove
+ ///
+
+ @function sl-without($list, $value) {
+ @return sl-remove($list, $value);
+ }
generators/foundation/public/stylesheets/foundation6/vendor/sassy-lists/stylesheets/functions/_replace.scss +46 -0
@@ @@ -0,0 +1,46 @@
+ ///
+ /// Replaces `$old` by `$new` in `$list`.
+ ///
+ /// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-replace
+ ///
+ /// @requires sl-is-true
+ /// @requires sl-purge
+ /// @requires sl-to-list
+ ///
+ /// @param {List} $list - list to update
+ /// @param {*} $old - value to replace
+ /// @param {*} $value - new value for $old
+ ///
+ /// @example
+ /// sl-replace(a b c, b, z)
+ /// // a z c
+ ///
+ /// @example
+ /// sl-replace(a b c, y, z)
+ /// // a b c
+ ///
+ /// @return {List}
+ ///
+
+ @function sl-replace($list, $old, $value) {
+ $_: sl-missing-dependencies('sl-is-true', 'sl-purge', 'sl-to-list');
+
+ $running: true;
+
+ @while $running {
+ $index: index($list, $old);
+
+ @if not $index {
+ $running: false;
+ }
+
+ @else {
+ $list: set-nth($list, $index, $value);
+ }
+
+ }
+
+ $list: if(sl-is-true($value), $list, sl-purge($list));
+
+ @return sl-to-list($list);
+ }
generators/foundation/public/stylesheets/foundation6/vendor/sassy-lists/stylesheets/functions/_to-list.scss +27 -0
@@ @@ -0,0 +1,27 @@
+ ///
+ /// Casts `$value` into a list.
+ ///
+ /// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-to-list
+ ///
+ /// @param {*} $value - value to cast to list
+ /// @param {String} $separator [space] - separator to use
+ ///
+ /// @example
+ /// sl-to-list(a b c, comma)
+ /// // a, b, c
+ ///
+ /// @return {List}
+ ///
+
+ @function sl-to-list($value, $separator: list-separator($value)) {
+ @return join((), $value, $separator);
+ }
+
+ ///
+ /// @requires sl-to-list
+ /// @alias sl-to-list
+ ///
+
+ @function sl-listify($value) {
+ @return sl-to-list($value);
+ }
generators/foundation/public/stylesheets/foundation6/vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss +25 -0
@@ @@ -0,0 +1,25 @@
+ ///
+ /// Checks whether `$functions` exist in global scope.
+ ///
+ /// @access private
+ ///
+ /// @param {ArgList} $functions - list of functions to check for
+ ///
+ /// @return {Bool} Whether or not there are missing dependencies
+ ///
+
+ @function sl-missing-dependencies($functions...) {
+ $missing-dependencies: ();
+
+ @each $function in $functions {
+ @if not function-exists($function) {
+ $missing-dependencies: append($missing-dependencies, $function, comma);
+ }
+ }
+
+ @if length($missing-dependencies) > 0 {
+ @error 'Unmet dependencies! The following functions are required: #{$missing-dependencies}.';
+ }
+
+ @return length($missing-dependencies) > 0;
+ }
generators/foundation/public/stylesheets/foundation6/vendor/sassy-lists/stylesheets/helpers/_true.scss +13 -0
@@ @@ -0,0 +1,13 @@
+ ///
+ /// Returns truthiness of `$value`.
+ ///
+ /// @access private
+ ///
+ /// @param {*} $value - value to check
+ ///
+ /// @return {Bool}
+ ///
+
+ @function sl-is-true($value) {
+ @return if($value == null, false, $value and $value != null and $value != '' and $value != ());
+ }
generators/foundation/public/stylesheets/foundation6/xy-grid/_cell.scss +169 -0
@@ @@ -0,0 +1,169 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group xy-grid
+ ////
+
+ /// Calculate the percentage size of a cell.
+ ///
+ /// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.
+ @function xy-cell-size(
+ $size: $grid-columns
+ ) {
+ // Parsing percents, decimals, n of n and number counts
+ @if type-of($size) == 'number' {
+ @if unit($size) == '%' {
+ $size: $size;
+ }
+ @else if $size < 1 {
+ $size: percentage($size);
+ }
+ @else {
+ $size: percentage($size / $grid-columns);
+ }
+ }
+
+ // Parsing "n of n" or "n/n" expressions
+ @elseif type-of($size) == 'list' {
+ @if length($size) != 3 {
+ @error 'Wrong syntax for xy-cell-size(). Use the format "n of n" or "n/n".';
+ }
+ @else {
+ $size: percentage(nth($size, 1) / nth($size, 3));
+ }
+ }
+ // Anything else is incorrect
+ @else {
+ @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
+ }
+
+ @return $size;
+ }
+
+ /// Sets base flex properties for cells.
+ ///
+ /// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto` or `shrink`.
+ @mixin xy-cell-base($size: full) {
+ @if($size == 'full') {
+ // This is the base style, all others inherit from it
+ flex: 0 0 auto;
+ min-height: 0px;
+ min-width: 0px;
+ }
+ @elseif ($size == 'auto') {
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
+ }
+ @elseif ($size == 'shrink') {
+ flex: 0 0 auto;
+ }
+ }
+
+ /// Resets a cells width (or height if vertical is true) as well as strips its gutters.
+ ///
+ /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+ @mixin xy-cell-reset($vertical: true) {
+ $direction: if($vertical == true, width, height);
+ #{$direction}: auto;
+ }
+
+ // Sets our cell widths or heights depending on gutter type.
+ @mixin -xy-cell-properties($size, $margin-gutter, $vertical) {
+ $direction: if($vertical == true, height, width);
+ @if($size == 'full') {
+ $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
+ #{$direction}: $val;
+ }
+ @elseif ($size == 'auto') {
+ #{$direction}: auto;
+ $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
+ }
+ @elseif ($size == 'shrink') {
+ #{$direction}: auto;
+ }
+ @else {
+ $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
+ #{$direction}: $val;
+ }
+ }
+
+ /// Creates a cell for your grid.
+ ///
+ /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
+ /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+ /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+ /// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
+ /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
+ /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+ /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+ @mixin xy-cell(
+ $size: full,
+ $gutter-output: true,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $gutter-position: right left,
+ $breakpoint: null,
+ $vertical: false
+ ) {
+ @if($breakpoint == null) {
+ // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
+ @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
+ $breakpoint: $-zf-size;
+ }
+ @else {
+ $breakpoint: $-zf-zero-breakpoint;
+ }
+ }
+
+ // Get our gutters from map if available, if not map just return the value.
+ $gutter: -zf-get-bp-val($gutters, $breakpoint);
+
+ // Base flex properties
+ @include xy-cell-base($size);
+
+ @if($gutter-type == 'margin') {
+ @include -xy-cell-properties($size, $gutter, $vertical);
+ }
+ @else {
+ @include -xy-cell-properties($size, 0, $vertical);
+ }
+
+ @if $gutter-output {
+ @include xy-gutters($gutter, $gutter-type, $gutter-position);
+ }
+ }
+
+ /// Creates a single breakpoint sized grid. Used to generate our grid classes.
+ ///
+ /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
+ /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+ /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+ /// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
+ /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+ /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+ @mixin xy-cell-static(
+ $size: full,
+ $gutter-output: true,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $breakpoint: $-zf-zero-breakpoint,
+ $vertical: false
+ ) {
+
+ $gutter: -zf-get-bp-val($gutters, $breakpoint);
+ $gutter-position: if($vertical == true, top bottom, left right);
+
+ @if($gutter-type == 'margin') {
+ @include -xy-cell-properties($size, $gutter, $vertical);
+ }
+ @else {
+ @include -xy-cell-properties($size, 0, $vertical);
+ }
+
+ // If we want to output the gutters
+ @if($gutter-output) {
+ // TODO: Figure out if we need to pass breakpoint in here too.
+ @include xy-gutters($gutter, $gutter-type, $gutter-position);
+ }
+ }
generators/foundation/public/stylesheets/foundation6/xy-grid/_classes.scss +476 -0
@@ @@ -0,0 +1,476 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group xy-grid
+ ////
+
+ // Margin Grid classes
+ @mixin xy-base-grid-classes {
+
+ // Grid Container
+ .grid-container {
+ @include xy-grid-container;
+
+ &.fluid {
+ @include xy-grid-container(100%);
+ }
+
+ &.full {
+ @include xy-grid-container(100%, 0);
+ }
+ }
+
+ // Base grid styles
+ .grid-x {
+ @include xy-grid;
+ }
+
+ .cell {
+ @include xy-cell-base();
+ @include xy-cell-static($grid-columns, false, $gutter-type: padding);
+
+ &.auto {
+ @include xy-cell-base(auto);
+ }
+
+ &.shrink {
+ @include xy-cell-base(shrink);
+ }
+
+ }
+ .grid-x {
+ > .auto {
+ @include xy-cell-static(auto, false);
+ }
+
+ > .shrink {
+ @include xy-cell-static(shrink, false);
+ }
+ }
+
+ // Auto width
+ @include -zf-each-breakpoint() {
+ // This is a bit of a hack/workaround, see these issues & PRs for the backstory:
+ // https://github.com/zurb/foundation-sites/issues/10244
+ // https://github.com/zurb/foundation-sites/pull/10222 and
+ // https://github.com/zurb/foundation-sites/pull/10164
+ .grid-x {
+ $str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
+ @for $i from 1 through $grid-columns {
+ $str: $str + ", > .#{$-zf-size}-#{$i}"
+ }
+ #{$str} {
+ flex-basis: auto;
+ }
+ }
+ }
+
+ @include -zf-each-breakpoint() {
+ @if not($-zf-size == small) {
+ .grid-x > .#{$-zf-size}-auto {
+ @include xy-cell-base(auto);
+ @include xy-cell-static(auto, false);
+ }
+
+ .grid-x > .#{$-zf-size}-shrink {
+ @include xy-cell-base(shrink);
+ @include xy-cell-static(shrink, false);
+ }
+ }
+
+ @for $i from 1 through $grid-columns {
+ // Sizing (percentage)
+ .grid-x > .#{$-zf-size}-#{$i} {
+ @include xy-cell-static($i, false, $gutter-type: padding);
+ }
+ }
+ }
+
+ // Reset width when using `.grid-margin-x` not on `.grid-x`
+ .grid-margin-x:not(.grid-x) > .cell {
+ width: auto;
+ }
+
+ // Reset height when using `.grid-margin-y` not on `.grid-y`
+ .grid-margin-y:not(.grid-y) > .cell {
+ height: auto;
+ }
+ }
+
+ @mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {
+ $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');
+ > .#{$prefix}auto {
+ @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+ }
+
+ > .#{$prefix}shrink {
+ @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+ }
+
+ @for $i from 1 through $grid-columns {
+ // Sizing (percentage)
+ $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');
+
+ > #{$classname} {
+ @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+ }
+ }
+ }
+
+ // Margin Grid classes
+ @mixin xy-margin-grid-classes(
+ $gutter-position: left right,
+ $vertical: false,
+ $wrapping-selector: '.grid-margin-x'
+ ){
+ #{$wrapping-selector} {
+ @include xy-gutters($negative: true, $gutter-position: $gutter-position);
+
+ // Base cell styles
+ > .cell {
+ @include xy-cell-static($vertical: $vertical);
+ }
+
+ // base styles need to all be before the auto and shrink styles
+ @include -zf-each-breakpoint() {
+ @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {
+ > .cell {
+ @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);
+ }
+ }
+ }
+
+ @include -zf-each-breakpoint() {
+
+ // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
+ // for prior breakpoints based on the responsive gutter.
+ @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
+ @each $bp in -zf-breakpoints-less-than($-zf-size) {
+ @if(map-has-key($grid-margin-gutters, $bp)) {
+ @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
+ }
+ }
+ }
+
+ @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);
+ }
+ }
+ }
+
+ // Padding Grid classes
+ @mixin xy-padding-grid-classes {
+ .grid-padding-x {
+
+ // Negative margin for nested grids
+ .grid-padding-x {
+ @include xy-gutters($negative: true);
+ }
+
+ // Negative margin for grids within `grid-container/grid-container.fluid`
+ // This allows margin and padding grids to line up with eachother
+ .grid-container:not(.full) > & {
+ @include xy-gutters($negative: true);
+ }
+
+ // Base cell styles
+ > .cell {
+ @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);
+ }
+ }
+ }
+
+ // Block Grid classes
+ @mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {
+ @if $padding-grid {
+ @include -zf-each-breakpoint {
+ @for $i from 1 through $xy-block-grid-max {
+ .#{$-zf-size}-up-#{$i} {
+ @include xy-grid-layout($i, '.cell', false, $gutter-type: padding);
+ }
+ }
+ }
+ }
+
+ @if $margin-grid {
+ @include -zf-each-breakpoint {
+ @for $i from 1 through $xy-block-grid-max {
+ // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
+ // for prior breakpoints based on the responsive gutter.
+ @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
+ @each $bp in -zf-breakpoints-less-than($-zf-size) {
+ @if(map-has-key($grid-margin-gutters, $bp)) {
+ .grid-margin-x.#{$bp}-up-#{$i} {
+ @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp);
+ }
+ }
+ }
+ }
+ }
+ @for $i from 1 through $xy-block-grid-max {
+ .grid-margin-x.#{$-zf-size}-up-#{$i} {
+ @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
+ }
+ }
+ }
+ }
+ }
+
+ // Collapse classes
+ @mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {
+ @each $bp in $breakpoint-classes {
+ @if $margin-grid {
+ .#{$bp}-margin-collapse {
+ @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);
+ }
+ }
+
+ @if $padding-grid {
+ .#{$bp}-padding-collapse {
+ @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);
+ }
+ }
+ }
+ }
+
+ // Offset classes
+ @mixin xy-offset-cell-classes {
+ @include -zf-each-breakpoint {
+ @for $i from 1 through $grid-columns {
+ // Offsets
+ $o: $i - 1;
+
+ .#{$-zf-size}-offset-#{$o} {
+ @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);
+ }
+
+ .grid-margin-x > .#{$-zf-size}-offset-#{$o} {
+ @include xy-cell-offset($o, $breakpoint: $-zf-size);
+ }
+ }
+ }
+ }
+
+ // Vertical Grid classes
+ @mixin xy-vertical-grid-classes(
+ $margin-grid: true,
+ $padding-grid: true
+ ) {
+
+ @include -zf-each-breakpoint() {
+ @if not($-zf-size == small) {
+ }
+ }
+
+ .grid-y {
+ @include xy-grid(vertical, false);
+
+
+ > .cell {
+ @include xy-cell-reset();
+ }
+
+ > .auto {
+ @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+ }
+
+ > .shrink {
+ @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+ }
+
+
+ @include -zf-each-breakpoint() {
+ // This is a bit of a hack/workaround, see these issues and PRs for the backstory:
+ // https://github.com/zurb/foundation-sites/issues/10244
+ // https://github.com/zurb/foundation-sites/pull/10222 and
+ // https://github.com/zurb/foundation-sites/pull/10164
+ $str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
+ @for $i from 1 through $grid-columns {
+ $str: $str + ", > .#{$-zf-size}-#{$i}"
+ }
+ #{$str} {
+ flex-basis: auto;
+ }
+ }
+
+ @include -zf-each-breakpoint() {
+ @if not($-zf-size == small) {
+ > .#{$-zf-size}-auto {
+ @include xy-cell-base(auto);
+ @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+ }
+
+ > .#{$-zf-size}-shrink {
+ @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+ }
+
+ }
+
+ @for $i from 1 through $grid-columns {
+ // Sizing (percentage)
+ > .#{$-zf-size}-#{$i} {
+ @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);
+ }
+ }
+
+ }
+ }
+
+ @if $padding-grid {
+ .grid-padding-y {
+ // Negative margin for nested grids
+ .grid-padding-y {
+ @include xy-gutters($negative: true, $gutter-position: top bottom);
+ }
+
+ // Base cell styles
+ > .cell {
+ @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);
+ }
+ }
+ }
+
+ @if $margin-grid {
+ @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');
+ }
+
+ }
+
+ @mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {
+ // Framed grid styles
+ .grid-frame {
+ @include xy-grid-frame;
+ }
+
+ .cell .grid-frame {
+ width: 100%; // Same as include with $nested, but with less css
+ }
+
+ .cell-block {
+ @include xy-cell-block();
+ }
+
+ .cell-block-y {
+ @include xy-cell-block(true);
+ }
+
+
+ .cell-block-container {
+ @include xy-cell-block-container();
+ }
+
+
+ @include -zf-each-breakpoint(false) {
+
+ .#{$-zf-size}-grid-frame {
+ @include xy-grid-frame;
+ }
+
+ .cell .#{$-zf-size}-grid-frame {
+ width: 100%; // Same as include with $nested, but with less css
+ }
+
+ .#{$-zf-size}-cell-block {
+ @include xy-cell-block();
+ }
+
+ .#{$-zf-size}-cell-block-container {
+ @include xy-cell-block-container();
+ }
+
+ .#{$-zf-size}-cell-block-y {
+ @include xy-cell-block(true);
+ }
+ }
+
+ @if $vertical-grid {
+ .grid-y {
+ &.grid-frame {
+ width: auto;
+ @include xy-grid-frame(true);
+ }
+
+ @include -zf-each-breakpoint(false) {
+ &.#{$-zf-size}-grid-frame {
+ width: auto;
+ @include xy-grid-frame(true);
+ }
+
+ }
+ }
+ .cell {
+ .grid-y.grid-frame {
+ height: 100%; // Same as include with $nested, but with less css
+ }
+ @include -zf-each-breakpoint(false) {
+ .grid-y.#{$-zf-size}-grid-frame {
+ height: 100%; // Same as include with $nested, but with less css
+ }
+ }
+ }
+ }
+ @if $margin-grid {
+ @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');
+ .grid-frame.grid-margin-y {
+ @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false);
+ }
+ @include -zf-each-breakpoint(false) {
+ .grid-margin-y.#{$-zf-size}-grid-frame {
+ @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false);
+ }
+ }
+ }
+ }
+
+ // Final classes
+ @mixin foundation-xy-grid-classes(
+ $base-grid: true,
+ $margin-grid: true,
+ $padding-grid: true,
+ $block-grid: true,
+ $collapse: true,
+ $offset: true,
+ $vertical-grid: true,
+ $frame-grid: true
+ ) {
+
+ // Base grid styles
+ @if($base-grid) {
+ @include xy-base-grid-classes();
+ }
+
+ // Margin grid
+ @if($margin-grid) {
+ @include xy-margin-grid-classes();
+ }
+
+ // Padding grid
+ @if($padding-grid) {
+ @include xy-padding-grid-classes();
+ }
+
+ // Block grid
+ @if($block-grid) {
+ @include xy-block-grid-classes($margin-grid, $padding-grid);
+ }
+
+ // Collapse gutters
+ @if($collapse) {
+ @include xy-collapse-grid-classes($margin-grid, $padding-grid);
+ }
+
+ // Offset gutters
+ @if($offset) {
+ @include xy-offset-cell-classes();
+ }
+
+ // Vertical grid
+ @if($vertical-grid) {
+ @include xy-vertical-grid-classes($margin-grid, $padding-grid);
+ }
+
+ @if ($frame-grid) {
+ @include xy-frame-grid-classes($vertical-grid, $margin-grid)
+ }
+ }
generators/foundation/public/stylesheets/foundation6/xy-grid/_collapse.scss +74 -0
@@ @@ -0,0 +1,74 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group xy-grid
+ ////
+
+ /// Collapses the grid a cells within it.
+ ///
+ /// @param {String} $selector [.cell] - The child element to remove the gutter from.
+ /// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.
+ /// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.
+ @mixin xy-grid-collapse(
+ $selector: '.cell',
+ $gutter-type: margin,
+ $gutter-position: right left,
+ $min-breakpoint: $-zf-zero-breakpoint
+ ) {
+ // First, lets negate any margins on the top level
+ @if ($gutter-type == 'margin') {
+
+ @include breakpoint($min-breakpoint) {
+ @each $value in $gutter-position {
+ margin-#{$value}: 0;
+ }
+
+ > #{$selector} {
+ @each $value in $gutter-position {
+ margin-#{$value}: 0;
+ }
+ }
+ }
+
+ $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);
+
+ // Output new widths to not include gutters
+ @each $bp in $breakpoint-classes {
+ @if(sl-contain($excluded-bps, $bp)) {
+ @include breakpoint($min-breakpoint) {
+ @for $i from 1 through $grid-columns {
+ // Sizing (percentage)
+ > .#{$bp}-#{$i} {
+ @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+ }
+ }
+ }
+ } @else {
+ @include breakpoint($bp) {
+ @for $i from 1 through $grid-columns {
+ // Sizing (percentage)
+ > .#{$bp}-#{$i} {
+ @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+ }
+ }
+ }
+ }
+ }
+ }
+ @else {
+
+ @include breakpoint($min-breakpoint) {
+ @each $value in $gutter-position {
+ margin-#{$value}: 0;
+ }
+
+ > #{$selector} {
+ @each $value in $gutter-position {
+ padding-#{$value}: 0;
+ }
+ }
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/xy-grid/_frame.scss +85 -0
@@ @@ -0,0 +1,85 @@
+ /// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
+ ///
+ /// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
+ /// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.
+ /// @param {Number|Map} $gutters [null] - Map or single value for gutters.
+ /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.
+ /// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.
+ @mixin xy-grid-frame(
+ $vertical: false,
+ $nested: false,
+ $gutters: null,
+ $breakpoint: null,
+ $include-base: true
+ ) {
+
+ @if $include-base {
+ overflow: hidden;
+ position: relative;
+ flex-wrap: nowrap;
+ align-items: stretch;
+ }
+
+ @if $breakpoint == null and type-of($gutters) == 'map' {
+ @include -zf-each-breakpoint() {
+ @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);
+ }
+ } @else {
+ // Get our gutters if applicable
+ $gutter: -zf-get-bp-val($gutters, $breakpoint);
+
+ // If we have a gutter, add it to the width/height
+ @if $gutter {
+ @if $vertical == true {
+ $unit: if($nested == true, 100%, 100vh);
+ $gutter: rem-calc($gutter);
+ height: calc(#{$unit} + #{$gutter});
+ } @else {
+ $unit: if($nested == true, 100%, 100vw);
+ $gutter: rem-calc($gutter);
+ width: calc(#{$unit} + #{$gutter});
+ }
+ }
+ @else {
+ @if $vertical == true {
+ height: if($nested == true, 100%, 100vh);
+ } @else {
+ width: if($nested == true, 100%, 100vw);
+ }
+ }
+ }
+ }
+
+ /// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)
+ ///
+ /// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
+ @mixin xy-cell-block(
+ $vertical: false
+ ) {
+ $property: if($vertical == true, 'overflow-y', 'overflow-x');
+
+ @if $vertical == true {
+ overflow-y: auto;
+ max-height: 100%;
+ } @else {
+ overflow-x: auto;
+ max-width: 100%;
+ }
+
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-stype: -ms-autohiding-scrollbar;
+ }
+
+ /// Container for inside a grid frame containing multiple blocks. Typically used
+ /// as a modifier for a `.cell` to allow the cell to pass along flex sizing
+ /// constraints / from parents to children.
+ @mixin xy-cell-block-container() {
+ display: flex;
+ flex-direction: column;
+ max-height: 100%;
+
+ > .grid-x {
+ max-height: 100%;
+ flex-wrap: nowrap;
+ }
+ }
generators/foundation/public/stylesheets/foundation6/xy-grid/_grid.scss +35 -0
@@ @@ -0,0 +1,35 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group xy-grid
+ ////
+
+ /// Creates a max width container, designed to house your grid content.
+ ///
+ /// @param {Number} $width [$grid-container] - a width to limit the container to.
+ @mixin xy-grid-container(
+ $width: $grid-container,
+ $padding: $grid-container-padding
+ ) {
+ @include xy-gutters($gutters: $padding, $gutter-type: padding);
+
+ max-width: $width;
+ margin: 0 auto;
+ }
+
+ /// Creates a container for your flex cells.
+ ///
+ /// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.
+ /// @param {Boolean} $wrap [true] - If the cells within should wrap or not.
+ @mixin xy-grid(
+ $direction: horizontal,
+ $wrap: true
+ ) {
+ $direction: if($direction == 'horizontal', row, column);
+ $wrap: if($wrap, wrap, nowrap);
+
+ display: flex;
+ flex-flow: $direction $wrap;
+ }
generators/foundation/public/stylesheets/foundation6/xy-grid/_gutters.scss +45 -0
@@ @@ -0,0 +1,45 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group xy-grid
+ ////
+
+ /// Create gutters for a cell/container.
+ ///
+ /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+ /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.
+ /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
+ /// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.
+ @mixin xy-gutters(
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $gutter-position: right left,
+ $negative: false
+ ) {
+ $operator: if($negative, '-', '');
+
+ // If we have declared negative gutters, force type to `margin.
+ $gutter-type: if($negative, 'margin', $gutter-type);
+
+ // Output our margin gutters.
+ @if (type-of($gutters) == 'map') {
+ @include -zf-breakpoint-value(auto, $gutters) {
+ $gutter: rem-calc($-zf-bp-value) / 2;
+
+ // Loop through each gutter position
+ @each $value in $gutter-position {
+ #{$gutter-type}-#{$value}: #{$operator}$gutter;
+ }
+ }
+ }
+ @elseif (type-of($gutters) == 'number') {
+ $gutter: rem-calc($gutters) / 2;
+
+ // Loop through each gutter position
+ @each $value in $gutter-position {
+ #{$gutter-type}-#{$value}: #{$operator}$gutter;
+ }
+ }
+ }
generators/foundation/public/stylesheets/foundation6/xy-grid/_layout.scss +33 -0
@@ @@ -0,0 +1,33 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group xy-grid
+ ////
+
+ /// Sizes child elements so that `$n` number of items appear on each row.
+ ///
+ /// @param {Number} $n - Number of elements to display per row.
+ /// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.
+ /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+ /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+ /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.
+ /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
+ /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+ @mixin xy-grid-layout(
+ $n,
+ $selector: '.cell',
+ $gutter-output: true,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $gutter-position: right left,
+ $breakpoint: $-zf-zero-breakpoint,
+ $vertical: false
+ ) {
+ $size: percentage(1/$n);
+
+ & > #{$selector} {
+ @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
+ }
+ }
generators/foundation/public/stylesheets/foundation6/xy-grid/_position.scss +28 -0
@@ @@ -0,0 +1,28 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group xy-grid
+ ////
+
+ /// Offsets a column to the right/bottom by `$n` columns.
+ ///
+ /// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
+ /// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.
+ @mixin xy-cell-offset(
+ $n,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $breakpoint: $-zf-zero-breakpoint,
+ $vertical: false
+ ) {
+ $direction: if($vertical, 'top', $global-left);
+
+ @include -zf-breakpoint-value($breakpoint, $gutters) {
+ $gutter: rem-calc($-zf-bp-value) / 2;
+ $size: if($gutter-type == 'margin', calc(#{xy-cell-size($n)} + #{$gutter}), #{xy-cell-size($n)});
+
+ margin-#{$direction}: #{$size};
+ }
+ }
generators/foundation/public/stylesheets/foundation6/xy-grid/_xy-grid.scss +51 -0
@@ @@ -0,0 +1,51 @@
+ // Foundation for Sites by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ ////
+ /// @group xy-grid
+ ////
+
+ /// Enables the XY grid.
+ /// @type Boolean
+ $xy-grid: true !default;
+
+ /// The maximum width of a grid container.
+ /// @type Number
+ $grid-container: $global-width !default;
+
+ /// The number of columns used in the grid.
+ /// @type Number
+ $grid-columns: 12 !default;
+
+ /// The amount of margin between cells at different screen sizes when using the margin grid. To use just one size, set the variable to a number instead of a map.
+ /// @type Map | Length
+ $grid-margin-gutters: (
+ small: 20px,
+ medium: 30px
+ ) !default;
+
+ /// The amount of padding in cells at different screen sizes when using the padding grid. To use just one size, set the variable to a number instead of a map.
+ /// @type Map | Length
+ $grid-padding-gutters: $grid-margin-gutters !default;
+
+ /// The amount of padding to use when padding the grid-container.
+ /// @type Map | Length
+ $grid-container-padding: $grid-padding-gutters !default;
+
+ /// The maximum width to apply to a grid container
+ /// @type Number
+ $grid-container-max: $global-width !default;
+
+ /// The maximum number of cells in an XY block grid.
+ /// @type Number
+ $xy-block-grid-max: 8 !default;
+
+ @import 'gutters';
+ @import 'grid';
+ @import 'cell';
+ @import 'frame';
+ @import 'position';
+ @import 'layout';
+ @import 'collapse';
+ @import 'classes';