GitBlixt
teagles/ChoiceCastings.com

Upgrades Foundation

Torey Heinz committed Oct 30, 2017
commit 4ff259c0c82ac43b3805fa9e26a169ca0154e651
Showing 145 changed files with 9763 additions and 3086 deletions
log/server.log +3 -0
@@ @@ -26,3 +26,6 @@ I, [2017-10-30T16:34:24.499738 #37728] INFO -- : Listening on 0.0.0.0:3000, CTR
I, [2017-10-30T16:35:09.463979 #37845] INFO -- : Thin web server (v1.6.4 codename Gob Bluth)
I, [2017-10-30T16:35:09.464059 #37845] INFO -- : Maximum connections set to 1024
I, [2017-10-30T16:35:09.464077 #37845] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop
+ I, [2017-10-30T17:42:25.583427 #48451] INFO -- : Thin web server (v1.6.4 codename Gob Bluth)
+ I, [2017-10-30T17:42:25.583514 #48451] INFO -- : Maximum connections set to 1024
+ I, [2017-10-30T17:42:25.583532 #48451] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop
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);
+ !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
public/stylesheets/_settings.scss +456 -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 'foundation6/util/util';
// 1. Global
// ---------
- $global-width: rem-calc(860);
$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: false;
+ $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,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
// ----------------
@@ @@ -246,6 +307,7 @@ $buttongroup-margin: 1rem;
$buttongroup-spacing: 1px;
$buttongroup-child-selector: '.button';
$buttongroup-expand-max: 6;
+ $buttongroup-radius-on-each: true;
// 13. Callout
// -----------
@@ @@ -260,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: (
@@ @@ -291,23 +382,30 @@ $dropdown-sizes: (
large: 400px,
);
- // 17. Dropdown Menu
+ // 18. Dropdown Menu
// -----------------
$dropdownmenu-arrows: true;
- $dropdownmenu-min-width: 200px;
+ $dropdownmenu-arrow-color: $anchor-color;
+ $dropdownmenu-arrow-size: 6px;
+ $dropdownmenu-arrow-padding: 1.5rem;
+ $dropdownmenu-min-width: 300px;
$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 +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;
@@ @@ -326,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;
- // 23. Off-canvas
+ // 24. Meter
+ // ---------
+
+ $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 +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);
@@ @@ -407,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;
@@ @@ -422,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;
@@ @@ -447,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;
@@ @@ -465,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;
@@ @@ -475,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;
@@ @@ -508,22 +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;
+
public/stylesheets/app.scss +9 -8
@@ @@ -2,28 +2,29 @@
@import 'settings';
@import 'foundation6/foundation';
- @import 'foundation6/motion-ui';
@include foundation-global-styles;
@include foundation-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;
@@ @@ -38,9 +39,9 @@
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
+ @include foundation-visibility-classes;
+ @include foundation-float-classes;
- @include motion-ui-transitions;
- @include motion-ui-animations;
body, html {
height: 100%;
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: false !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();
}
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';
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();
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;
+ }
+ }
+ }
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;
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);
+ }
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);
+ }
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);
+ }
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);
+ }
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);
+ }
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);
+ }
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;
+ }
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 != ());
+ }
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;
}
}
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 {
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));
}
}
}
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;
}
}
}
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;
+ }
+ }
+ }
}
}
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;
}
}
}
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 {
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;
+ }
+ }
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) }
}
}
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;
+ }
}
}
}
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;
+ }
+ }
}
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;
}
}
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';
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;
+ }
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 {
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));
}
}
}
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;
+ }
+ }
}
}
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;
+ }
+ }
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;
}
}
public/stylesheets/foundation6/components/_off-canvas.scss +419 -83
@@ @@ -6,165 +6,501 @@
/// @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);
}
}
}
+
+ }
+
+ /// 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 menu.
- /// @param {Keyword} $position [left] - Position of the off-canvas menu being revealed.
+ /// 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;
}
}
}
}
}
+
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;
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';
+ }
+ }
}
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;
}
}
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);
+ }
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;
+ }
+ }
}
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);
+ }
+ }
}
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;
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);
}
}
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;
+ }
+ }
}
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;
}
}
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;
+ }
}
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;
}
}
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 {
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;
}
}
}
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;
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%;
}
}
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;
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;
}
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;
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
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;
+ }
}
}
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;
}
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;
+ }
+ }
+ }
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;
+ }
+ }
+ }
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;
+ }
+ }
+ }
+ }
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;
}
}
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;
}
}
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;
+ }
}
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;
}
}
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);
}
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;
- }
}
}
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';
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;
+ }
+ }
}
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%;
+ }
}
}
}
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;
}
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;
+ }
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;
public/stylesheets/foundation6/motion-ui/_classes.scss +0 -102
@@ @@ -1,102 +0,0 @@
- // scss-lint:disable ImportantRule, SpaceAfterComma, SingleLinePerProperty
-
- %mui-defaults {
- transition-duration: map-get($motion-ui-speeds, default);
- transition-timing-function: map-get($motion-ui-easings, default);
- }
-
- // Transitions
- // - - - - - - - - - - - - - - -
- @mixin motion-ui-transitions {
- // 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-right { @include mui-slide(in, left); }
- .slide-out-down { @include mui-slide(out, bottom); }
- .slide-out-right { @include mui-slide(out, right); }
- .slide-out-up { @include mui-slide(out, top); }
- .slide-out-left { @include mui-slide(out, left); }
-
- // Fade
- .fade-in { @include mui-fade(in, 0, 1); }
- .fade-out { @include mui-fade(out, 1, 0); }
-
- // Hinge
- .hinge-in-from-top { @include mui-hinge(in, top); }
- .hinge-in-from-right { @include mui-hinge(in, right); }
- .hinge-in-from-bottom { @include mui-hinge(in, bottom); }
- .hinge-in-from-left { @include mui-hinge(in, left); }
- .hinge-in-from-middle-x { @include mui-hinge(in, top, center); }
- .hinge-in-from-middle-y { @include mui-hinge(in, right, center); }
- .hinge-out-from-top { @include mui-hinge(out, top); }
- .hinge-out-from-right { @include mui-hinge(out, right); }
- .hinge-out-from-bottom { @include mui-hinge(out, bottom); }
- .hinge-out-from-left { @include mui-hinge(out, left); }
- .hinge-out-from-middle-x { @include mui-hinge(out, top, center); }
- .hinge-out-from-middle-y { @include mui-hinge(out, right, center); }
-
- // Scale
- .scale-in-up { @include mui-zoom(in, 0.5, 1); }
- .scale-in-down { @include mui-zoom(in, 1.5, 1); }
- .scale-out-up { @include mui-zoom(out, 1, 1.5); }
- .scale-out-down { @include mui-zoom(out, 1, 0.5); }
-
- // Spin
- .spin-in { @include mui-spin(in, cw); }
- .spin-out { @include mui-spin(out, cw); }
- .spin-in-ccw { @include mui-spin(in, ccw); }
- .spin-out-ccw { @include mui-spin(out, ccw); }
-
- // Transition Modifiers
- // - - - - - - - - - - - - - - -
-
- @each $name, $value in $motion-ui-speeds {
- @if $name != default {
- .#{$name} { transition-duration: $value !important; }
- }
- }
-
- @each $name, $value in $motion-ui-easings {
- @if $name != default {
- .#{$name} { transition-timing-function: $value !important; }
- }
- }
-
- @each $name, $value in $motion-ui-delays {
- @if $name != default {
- .#{$name}-delay { transition-delay: $value !important; }
- }
- }
- }
-
- // Animations
- // - - - - - - - - - - - - - - -
- @mixin motion-ui-animations {
- .shake { @include mui-animation(shake); }
- .spin-cw { @include mui-animation(spin); }
- .spin-ccw { @include mui-animation(spin(ccw)); }
- .wiggle { @include mui-animation(wiggle); }
-
- // Animation Modifiers
- // - - - - - - - - - - - - - - -
- .infinite { animation-iteration-count: infinite; }
-
- @each $name, $value in $motion-ui-speeds {
- @if $name != default {
- .#{$name} { animation-duration: $value !important; }
- }
- }
-
- @each $name, $value in $motion-ui-easings {
- @if $name != default {
- .#{$name} { animation-timing-function: $value !important; }
- }
- }
-
- @each $name, $value in $motion-ui-delays {
- @if $name != default {
- .#{$name}-delay { animation-delay: $value !important; }
- }
- }
- }
public/stylesheets/foundation6/motion-ui/_settings.scss +0 -61
@@ @@ -1,61 +0,0 @@
- /// Format for CSS classes created with Motion UI.
- /// @type Map
- /// @prop {Boolean} append [true] - Defines if selectors are chained to the selector (`.class.enter`), or appended as a new class (`.class-enter`).
- /// @prop {String} prefix ['mui-'] - Prefix to add before the state of a class. Enter an empty string to use no prefix.
- /// @prop {String} prefix ['-active'] - Suffix to add to the active state class.
- $motion-ui-classes: (
- chain: true,
- prefix: 'mui-',
- active: '-active',
- ) !default;
-
- /// State names to reference when writing motion classes. To use multiple class names for one state, enter a list of strings instead of one string.
- /// @type Map
- $motion-ui-states: (
- in: 'enter',
- out: 'leave',
- ) !default;
-
- /// Default speed that transitions and animations play at, along with values for modifier classes to change the speed.
- /// @type Map
- $motion-ui-speeds: (
- default: 500ms,
- slow: 750ms,
- fast: 250ms,
- ) !default;
-
- /// Default delay to add before motion, along with values for modifier classes to change the delay.
- /// @type Map
- $motion-ui-delays: (
- default: 0,
- short: 300ms,
- long: 700ms,
- ) !default;
-
- /// Default easing for transitions and animations, along with values for modifier classes to change the easing.
- /// @type Map
- $motion-ui-easings: (
- default: linear,
- linear: linear,
- ease: ease,
- ease-in: ease-in,
- ease-out: ease-out,
- ease-in-out: ease-in-out,
- bounce-in: cubic-bezier(0.485, 0.155, 0.24, 1.245),
- bounce-out: cubic-bezier(0.485, 0.155, 0.515, 0.845),
- bounce-in-out: cubic-bezier(0.76, -0.245, 0.24, 1.245),
- ) !default;
-
- /// Miscellaneous settings related to Motion UI.
- /// @type Map
- /// @prop {Boolean} slide-and-fade [false] - Defines if slide motions should also fade in/out.
- /// @prop {Boolean} slide-and-fade [true] - Defines if hinge motions should also fade in/out.
- /// @prop {Boolean} slide-and-fade [true] - Defines if scale motions should also fade in/out.
- /// @prop {Boolean} slide-and-fade [true] - Defines if spin motions should also fade in/out.
- $motion-ui-settings: (
- slide-and-fade: false,
- hinge-and-fade: true,
- scale-and-fade: true,
- spin-and-fade: true,
- activate-queue-class: 'is-animating',
- ) !default;
public/stylesheets/foundation6/motion-ui/effects/_fade.scss +0 -29
@@ @@ -1,29 +0,0 @@
- /// Creates a fading animation.
- /// @param {Number} $from [0] - Opacity to start at.
- /// @param {Number} $to [1] - Opacity to end at.
- /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
- @function fade(
- $from: 0,
- $to: 1
- ) {
- $type: type-of($from);
- $keyframes: ();
-
- @if $type == 'string' {
- @if $from == in {
- $from: 0;
- $to: 1;
- } @else if $from == out {
- $from: 1;
- $to: 0;
- }
- }
-
- $keyframes: (
- name: 'fade-#{$from}-to-#{$to}',
- 0: (opacity: $from),
- 100: (opacity: $to),
- );
-
- @return $keyframes;
- }
public/stylesheets/foundation6/motion-ui/effects/_hinge.scss +0 -65
@@ @@ -1,65 +0,0 @@
- /// Creates a hinge effect by rotating the element.
- /// @param {Keyword} $state [in] - State to transition to.
- /// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
- /// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
- /// @param {Number} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
- /// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
- @function hinge (
- $state: in,
- $from: left,
- $axis: edge,
- $perspective: 2000px,
- $turn-origin: from-back
- ) {
- // Rotation directions when hinging from back vs. front
- $rotation-amount: 90deg;
- $rotations-back: (
- top: rotateX($rotation-amount * -1),
- right: rotateY($rotation-amount * -1),
- bottom: rotateX($rotation-amount),
- left: rotateY($rotation-amount),
- );
- $rotations-from: (
- top: rotateX($rotation-amount),
- right: rotateY($rotation-amount),
- bottom: rotateX($rotation-amount * -1),
- left: rotateY($rotation-amount * -1),
- );
-
- // Rotation origin
- $rotation: '';
- @if $turn-origin == from-front {
- $rotation: map-get($rotations-from, $from);
- } @else if $turn-origin == from-back {
- $rotation: map-get($rotations-back, $from);
- } @else {
- @warn '$turn-origin must be either "from-back" or "from-front"';
- }
-
- // Start and end state
- $start: '';
- $end: '';
- @if $state == in {
- $start: perspective($perspective) $rotation;
- $end: perspective($perspective) rotate(0deg);
- } @else {
- $start: perspective($perspective) rotate(0deg);
- $end: perspective($perspective) $rotation;
- }
-
- // Turn axis
- $origin: '';
- @if $axis == edge {
- $origin: $from;
- } @else {
- $origin: center;
- }
-
- $keyframes: (
- name: 'hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}',
- 0: (transform: $start, transform-origin: $origin),
- 100: (transform: $end),
- );
-
- @return $keyframes;
- }
public/stylesheets/foundation6/motion-ui/effects/_shake.scss +0 -15
@@ @@ -1,15 +0,0 @@
- /// Creates a shaking animation.
- /// @param {Percentage} $intensity [7%] - Intensity of the shake, as a percentage value.
- /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
- @function shake($intensity: 7%) {
- $right: (0, 10, 20, 30, 40, 50, 60, 70, 80, 90);
- $left: (5, 15, 25, 35, 45, 55, 65, 75, 85, 95);
-
- $keyframes: (
- name: 'shake-#{($intensity / 1%)}',
- $right: (transform: translateX($intensity)),
- $left: (transform: translateX(-$intensity)),
- );
-
- @return $keyframes;
- }
public/stylesheets/foundation6/motion-ui/effects/_slide.scss +0 -41
@@ @@ -1,41 +0,0 @@
- /// Creates a sliding animation.
- /// @param {Keyword} $state [in] - Whether to move to (`in`) or from (`out`) the element's default position.
- /// @param {Keyword} $direction [up] - Direction to move. Can be `up`, `down`, `left`, or `right`.
- /// @param {Number} $amount [100%] - Distance to move. Can be any CSS length unit.
- /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
- @function slide(
- $state: in,
- $direction: up,
- $amount: 100%
- ) {
- $from: $amount;
- $to: 0;
- $func: 'translateY';
-
- @if $direction == left or $direction == right {
- $func: 'translateX';
- }
-
- @if $state == out {
- $from: 0;
- $to: $amount;
- }
-
- @if $direction == down or $direction == right {
- @if $state == in {
- $from: -$from;
- }
- } @else {
- @if $state == out {
- $to: -$to;
- }
- }
-
- $keyframes: (
- name: 'slide-#{$state}-#{$direction}-#{strip-unit($amount)}',
- 0: (transform: '#{$func}(#{$from})'),
- 100: (transform: '#{$func}(#{$to})'),
- );
-
- @return $keyframes;
- }
public/stylesheets/foundation6/motion-ui/effects/_spin.scss +0 -28
@@ @@ -1,28 +0,0 @@
- /// Creates a spinning animation.
- /// @param {Keyword} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
- /// @param {Number} $amount [360deg] - Amount to spin. Can be any CSS angle unit.
- /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
- @function spin(
- $state: in,
- $direction: cw,
- $amount: 1turn
- ) {
- $start: 0;
- $end: 0;
-
- @if $state == in {
- $start: if($direction == ccw, $amount, $amount * -1);
- $end: 0;
- } @else {
- $start: 0;
- $end: if($direction == ccw, $amount * -1, $amount);
- }
-
- $keyframes: (
- name: 'spin-#{$direction}-#{$amount}',
- 0: (transform: rotate($start)),
- 100: (transform: rotate($end)),
- );
-
- @return $keyframes;
- }
public/stylesheets/foundation6/motion-ui/effects/_wiggle.scss +0 -13
@@ @@ -1,13 +0,0 @@
- /// Creates a wiggling animation.
- /// @param {Number} $intensity [7deg] - Intensity of the wiggle. Can be any CSS angle unit.
- /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
- @function wiggle($intensity: 7deg) {
- $keyframes: (
- name: 'wiggle-#{$intensity}',
- (40, 50, 60): (transform: rotate($intensity)),
- (35, 45, 55, 65): (transform: rotate(-$intensity)),
- (0, 30, 70, 100): (transform: rotate(0)),
- );
-
- @return $keyframes;
- }
public/stylesheets/foundation6/motion-ui/effects/_zoom.scss +0 -15
@@ @@ -1,15 +0,0 @@
- /// 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.
- @function zoom(
- $from: 0,
- $to: 1
- ) {
- $keyframes: (
- name: 'scale-#{$to}-to-#{$from}',
- 0: (transform: scale($from)),
- 100: (transform: scale($to)),
- );
-
- @return $keyframes;
- }
public/stylesheets/foundation6/motion-ui/motion-ui.css +0 -0
public/stylesheets/foundation6/motion-ui/motion-ui.scss +0 -29
@@ @@ -1,29 +0,0 @@
- // Motion UI by ZURB
- // foundation.zurb.com/motion-ui
- // Licensed under MIT Open Source
-
- @import 'settings';
-
- @import 'util/animation';
- @import 'util/args';
- @import 'util/keyframe';
- @import 'util/selector';
- @import 'util/series';
- @import 'util/transition';
- @import 'util/unit';
-
- @import 'effects/fade';
- @import 'effects/hinge';
- @import 'effects/spin';
- @import 'effects/zoom';
- @import 'effects/shake';
- @import 'effects/slide';
- @import 'effects/wiggle';
-
- @import 'transitions/fade';
- @import 'transitions/hinge';
- @import 'transitions/zoom';
- @import 'transitions/slide';
- @import 'transitions/spin';
-
- @import 'classes';
public/stylesheets/foundation6/motion-ui/transitions/_fade.scss +0 -28
@@ @@ -1,28 +0,0 @@
- /// Creates a fade transition by adjusting the opacity of the element.
- /// @param {Keyword} $state [in] - State to transition to.
- /// @param {Number} $from [0] - Opacity to start at. Must be a number between 0 and 1.
- /// @param {Number} $to [1] - Opacity to end on.
- /// @param {Keyword} $duration [null] - Length (speed) of the transition.
- /// @param {Keyword|Function} $timing [null] - Easing of the transition.
- /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
- @mixin mui-fade(
- $state: in,
- $from: 0,
- $to: 1,
- $duration: null,
- $timing: null,
- $delay: null
- ) {
- $fade: fade($from, $to);
-
- @include transition-start($state) {
- @include transition-basics($duration, $timing, $delay);
- @include -mui-keyframe-get($fade, 0);
-
- transition-property: opacity;
- }
-
- @include transition-end($state) {
- @include -mui-keyframe-get($fade, 100);
- }
- }
public/stylesheets/foundation6/motion-ui/transitions/_hinge.scss +0 -43
@@ @@ -1,43 +0,0 @@
- /// Creates a hinge transition by rotating the element.
- /// @param {Keyword} $state [in] - State to transition to.
- /// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
- /// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
- /// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
- /// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
- /// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
- /// @param {Duration} $duration [null] - Length (speed) of the transition.
- /// @param {Keyword|Function} $timing [null] - Easing of the transition.
- /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
- @mixin mui-hinge (
- $state: in,
- $from: left,
- $axis: edge,
- $perspective: 2000px,
- $turn-origin: from-back,
- $fade: map-get($motion-ui-settings, hinge-and-fade),
- $duration: null,
- $timing: null,
- $delay: null
- ) {
- $hinge: hinge($state, $from, $axis, $perspective, $turn-origin);
-
- @include transition-start($state) {
- @include transition-basics($duration, $timing, $delay);
- @include -mui-keyframe-get($hinge, 0);
-
- @if $fade {
- transition-property: transform, opacity;
- opacity: if($state == in, 0, 1);
- } @else {
- transition-property: transform, opacity;
- }
- }
-
- @include transition-end($state) {
- @include -mui-keyframe-get($hinge, 100);
-
- @if $fade {
- opacity: if($state == in, 1, 0);
- }
- }
- }
public/stylesheets/foundation6/motion-ui/transitions/_slide.scss +0 -42
@@ @@ -1,42 +0,0 @@
- /// 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 {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.
- /// @param {Keyword|Function} $timing [null] - Easing of the transition.
- /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
- @mixin mui-slide (
- $state: in,
- $direction: left,
- $amount: 100%,
- $fade: map-get($motion-ui-settings, slide-and-fade),
- $duration: null,
- $timing: null,
- $delay: null
- ) {
- $slide: slide($state, $direction, $amount);
-
- // CSS Output
- @include transition-start($state) {
- @include transition-basics($duration, $timing, $delay);
- @include -mui-keyframe-get($slide, 0);
-
- @if $fade {
- transition-property: transform, opacity;
- opacity: if($state == in, 0, 1);
- } @else {
- transition-property: transform, opacity;
- }
-
- backface-visibility: hidden;
- }
-
- @include transition-end($state) {
- @include -mui-keyframe-get($slide, 100);
-
- @if $fade {
- opacity: if($state == in, 1, 0);
- }
- }
- }
public/stylesheets/foundation6/motion-ui/transitions/_spin.scss +0 -39
@@ @@ -1,39 +0,0 @@
- /// Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin.
- /// @param {Keyword} $state [in] - State to transition to.
- /// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
- /// @param {Number} $amount [0.75turn] - Amount to element the element.
- /// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
- /// @param {Duration} $duration [null] - Length (speed) of the transition.
- /// @param {Keyword|Function} $timing [null] - Easing of the transition.
- /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
- @mixin mui-spin(
- $state: in,
- $direction: cw,
- $amount: 0.75turn,
- $fade: map-get($motion-ui-settings, spin-and-fade),
- $duration: null,
- $timing: null,
- $delay: null
- ) {
- $spin: spin($state, $direction, $amount);
-
- @include transition-start($state) {
- @include transition-basics($duration, $timing, $delay);
- @include -mui-keyframe-get($spin, 0);
-
- @if $fade {
- transition-property: transform, opacity;
- opacity: if($state == in, 0, 1);
- } @else {
- transition-property: transform, opacity;
- }
- }
-
- @include transition-end($state) {
- @include -mui-keyframe-get($spin, 100);
-
- @if $fade {
- opacity: if($state == in, 1, 0);
- }
- }
- }
public/stylesheets/foundation6/motion-ui/transitions/_zoom.scss +0 -39
@@ @@ -1,39 +0,0 @@
- /// 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 {Keyword} $state [in] - State to transition to.
- /// @param {Number} $from [1.5] - Size to start at.
- /// @param {Number} $from [1] - Size to end at.
- /// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
- /// @param {Duration} $duration [null] - Length (speed) of the transition.
- /// @param {Keyword|Function} $timing [null] - Easing of the transition.
- /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
- @mixin mui-zoom(
- $state: in,
- $from: 1.5,
- $to: 1,
- $fade: map-get($motion-ui-settings, scale-and-fade),
- $duration: null,
- $timing: null,
- $delay: null
- ) {
- $scale: zoom($from, $to);
-
- @include transition-start($state) {
- @include transition-basics($duration, $timing, $delay);
- @include -mui-keyframe-get($scale, 0);
-
- @if $fade {
- transition-property: transform, opacity;
- opacity: if($state == in, 0, 1);
- } @else {
- transition-property: transform, opacity;
- }
- }
-
- @include transition-end($state) {
- @include -mui-keyframe-get($scale, 100);
-
- @if $fade {
- opacity: if($state == in, 1, 0);
- }
- }
- }
public/stylesheets/foundation6/motion-ui/util/_animation.scss +0 -7
@@ @@ -1,7 +0,0 @@
- /// Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property.
- /// @param {Function} $effects... - One or more effect functions to build the keyframe with.
- @mixin mui-animation($args...) {
- $name: map-get(-mui-process-args($args...), name);
- @include mui-keyframes($name, $args...);
- animation-name: unquote($name);
- }
public/stylesheets/foundation6/motion-ui/util/_args.scss +0 -15
@@ @@ -1,15 +0,0 @@
- /// Processes a series of keyframe function arguments.
- /// @access private
- @function -mui-process-args($args...) {
- @if length($args) == 1 {
- $arg: nth($args, 1);
-
- @if type-of($arg) == 'string' {
- @return call($arg);
- } @else if type-of($arg) == 'map' {
- @return $arg;
- }
- }
-
- @return -mui-keyframe-combine($args...);
- }
public/stylesheets/foundation6/motion-ui/util/_keyframe.scss +0 -136
@@ @@ -1,136 +0,0 @@
- // Internal counter for creating unique keyframe names
- $-mui-custom: 0;
-
- /// Creates a keyframe from one or more effect functions. Use this function instead of `mui-animation` if you want to create a keyframe animation *without* automatically assigning it to the element.
- /// @param {String} $name - Name of the keyframe.
- /// @param {Function} $effects... - One or more effect functions to build the keyframe with.
- @mixin mui-keyframes($name, $effects...) {
- $obj: -mui-process-args($effects...);
- $obj: map-remove($obj, name);
-
- @keyframes #{$name} {
- // Now iterate through each keyframe percentage
- @each $pct, $props in $obj {
- #{-mui-keyframe-pct($pct)} {
- // Lastly, iterate through each CSS property within a percentage and print it out
- @each $prop, $value in $props {
- #{$prop}: #{$value};
- }
- }
- }
- }
- }
-
- /// Creates a string for a CSS keyframe, by converting a list of numbers to a comma-separated list of percentage values.
- /// @param {Number|List} $input - List of numbers to use.
- /// @return {String} A set of comma-separated percentage values.
- /// @access private
- @function -mui-keyframe-pct($input) {
- $output: ();
-
- @if type-of($input) == 'number' {
- $output: ($input * 1%);
- } @else if type-of($input) == 'list' {
- @each $i in $input {
- $output: append($output, ($i * 1%), comma);
- }
- }
-
- @return $output;
- }
-
- /// Prints the CSS properties from a specific key in a keyframes map. Used to borrow CSS from keyframe functions for use in transitions.
- /// @param {Map} $kf - Keyframe map to extract from.
- /// @param {Number} $key - Key in the map to print the CSS of.
- /// @access private
- @mixin -mui-keyframe-get($kf, $key) {
- $map: map-get($kf, $key);
-
- @each $prop, $value in $map or () {
- // Some keyframe maps store transforms as quoted strings
- @if type-of($value) == 'string' {
- $value: unquote($value);
- }
- #{$prop}: $value;
- }
- }
-
- /// Reformats a map containing keys with a list of values, so that each key is a single value.
- /// @param {Map} $map - Map to split up.
- /// @return {Map} A reformatted map.
- /// @access private
- @function -mui-keyframe-split($map) {
- $new-map: ();
-
- // Split keys with multiple values into individual keys
- @each $key, $item in $map {
- $key-type: type-of($key);
-
- @if $key-type == 'number' {
- $new-map: map-merge($new-map, ($key: $item));
- } @else if $key-type == 'list' {
- @each $k in $key {
- $new-map: map-merge($new-map, ($k: $item));
- }
- }
- }
-
- @return $new-map;
- }
-
- /// Combines a series of keyframe objects into one.
- /// @param {Map} $maps... - A series of maps to merge, as individual parameters.
- /// @return {Map} A combined keyframe object.
- /// @access private
- @function -mui-keyframe-combine($maps...) {
- $new-map: ();
-
- // Iterate through each map passed in
- @each $map in $maps {
- @if type-of($map) == 'string' {
- $map: call($map);
- }
-
- $map: -mui-keyframe-split($map);
-
- // Iterate through each keyframe in the map
- // $key is the keyframe percentage
- // $value is a map of CSS properties
- @each $key, $value in $map {
- $new-value: ();
-
- @if map-has-key($new-map, $key) {
- // If the map already has the keyframe %, append the new property
- $new-value: -mui-merge-properties(map-get($new-map, $key), $value);
- } @else {
- // Otherwise, create a new map with the new property
- $new-value: $value;
- }
-
- // Finally, merge the modified keyframe value into the output map
- $new-map: map-merge($new-map, ($key: $new-value));
- }
- }
-
- // Make a name for the keyframes
- $-mui-custom: $-mui-custom + 1 !global;
- $map-name: (name: 'custom-#{$-mui-custom}');
- $new-map: map-merge($new-map, $map-name);
-
- @return $new-map;
- }
-
- /// Combines two maps of CSS properties into one map. If both maps have a transform property, the values from each will be combined into one property.
- /// @param {Map} $one - First map to merge.
- /// @param {Map} $two - Second map to merge.
- /// @return {Map} A combined map.
- /// @access private
- @function -mui-merge-properties($one, $two) {
- @if map-has-key($one, transform) and map-has-key($two, transform) {
- $transform: join(map-get($one, transform), map-get($two, transform));
- $one: map-merge($one, (transform: $transform));
- $two: map-remove($two, transform);
- }
-
- @return map-merge($one, $two);
- }
public/stylesheets/foundation6/motion-ui/util/_selector.scss +0 -23
@@ @@ -1,23 +0,0 @@
- /// Builds a selector for a motion class, using the settings defined in the `$motion-ui-classes` and `$motion-ui-states` maps.
- /// @param {String|List} $states - One or more strings that correlate to a state.
- /// @param {Boolean} $active - Defines if the selector is for the setup or active class.
- /// @return {String} A selector that can be interpolated into your Sass code.
- /// @access private
- @function -mui-build-selector($states, $active: false) {
- $return: '';
- $chain: map-get($motion-ui-classes, chain);
- $prefix: map-get($motion-ui-classes, prefix);
- $suffix: map-get($motion-ui-classes, active);
-
- @each $sel in $states {
- $return: $return + if($chain, '&.', '#{&}-') + $prefix + $sel;
-
- @if $active {
- $return: $return + if($chain, '.', '#{&}-') + $prefix + $sel + $suffix;
- }
-
- $return: $return + ', ';
- }
-
- @return str-slice($return, 1, -3);
- }
public/stylesheets/foundation6/motion-ui/util/_series.scss +0 -54
@@ @@ -1,54 +0,0 @@
- $-mui-queue: ();
-
- /// Pauses the animation on an element by default, and then plays it when an active class is added to a parent. Also sets the fill mode of the animation to `both`. This pauses the element at the first frame of the animation, and holds it in place at the end.
- /// @access private
- %animated-element {
- animation-play-state: paused;
- animation-fill-mode: both;
-
- .#{map-get($motion-ui-settings, activate-queue-class)} & {
- animation-play-state: running;
- }
- }
-
- /// Creates a new animation queue.
- /// @param {Duration} $delay [0s] - Delay in seconds or milliseconds to place at the front of the animation queue.
- @mixin mui-series($delay: 0s) {
- $-mui-queue: () !global;
-
- @if $delay > 0 {
- $item: ($delay, 0s);
- $-mui-queue: append($-mui-queue, $item) !global;
- }
-
- @content;
- }
-
- /// Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`.
- /// @param {Duration} $duration [1s] - Length of the animation.
- /// @param {Duration} $gap [0s] - Amount of time to pause before playing the animation after this one. Use a negative value to make the next effect overlap with the current one.
- /// @param {Function} $keyframes... - One or more effect functions to build the keyframe with.
- @mixin mui-queue(
- $duration: 1s,
- $gap: 0s,
- $keyframes...
- ) {
- // Build the animation
- $kf: -mui-process-args($keyframes...);
-
- // Calculate the delay for this animation based on how long the previous ones take
- $actual-delay: 0s;
- @each $anim in $-mui-queue {
- $actual-delay: $actual-delay + nth($anim, 1) + nth($anim, 2);
- }
-
- // Append this animation's length and gap to the end of the queue
- $item: ($duration, $gap);
- $-mui-queue: append($-mui-queue, $item) !global;
-
- // CSS output
- @extend %animated-element;
- @include mui-animation($kf);
- animation-duration: $duration;
- animation-delay: $actual-delay;
- }
public/stylesheets/foundation6/motion-ui/util/_transition.scss +0 -45
@@ @@ -1,45 +0,0 @@
- /// Applies basic transition settings to an element.
- /// @param {Duration} $duration [null] - Length (speed) of the transition.
- /// @param {Keyword|Function} $timing [null] - Easing of the transition.
- /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
- @mixin transition-basics(
- $duration: null,
- $timing: null,
- $delay: null
- ) {
- @extend %mui-defaults;
- transition-duration: $duration;
- transition-timing-function: $timing;
- transition-delay: $delay;
- }
-
- /// Wraps the content in the setup class for a transition.
- /// @param {Keyword} $dir - State to setup for transition.
- @mixin transition-start($dir) {
- $selector: -mui-build-selector(map-get($motion-ui-states, $dir));
-
- @at-root {
- #{$selector} {
- @content;
- }
- }
- }
-
- /// Wraps the content in the active class for a transition.
- /// @param {Keyword} $dir - State to activate a transition on.
- @mixin transition-end($dir) {
- $selector: -mui-build-selector(map-get($motion-ui-states, $dir), true);
-
- @at-root {
- #{$selector} {
- @content;
- }
- }
- }
-
- /// Adds styles for a stagger animation, which can be used with Angular's `ng-repeat`.
- /// @param {Duration} $delay-amount - Amount of time in seconds or milliseconds to add between each item's animation.
- @mixin stagger($delay-amount) {
- transition-delay: $delay-amount;
- transition-duration: 0; // Prevent accidental CSS inheritance
- }
public/stylesheets/foundation6/motion-ui/util/_unit.scss +0 -7
@@ @@ -1,7 +0,0 @@
- /// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
- /// @param {Number} $num - Number to strip unit from.
- /// @return {Number} The same number, sans unit.
- /// @access private
- @function strip-unit($num) {
- @return $num / ($num * 0 + 1);
- }
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
+ );
+ }
+ }
+ }
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;
+ }
+ }
+ }
+ }
+ }
+ }
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;
+ }
+ }
+ }
+ }
+ }
+ }
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;
+ }
+ }
+ }
+ }
+ }
+ }
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;
+ }
+ }
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);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
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;
+ }
+ }
+ }
+ }
+ }
+ }
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;
+ }
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);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
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;
+ }
+ }
+ }
+ }
+ }
+ }
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;
+ }
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;
+ }
+ }
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
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;
+ }
+ }
+ }
+ }
+ }
+ }
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);
+ }
+ }
+ }
+ }
+ }
+ }
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;
+ }
+ }
+ }
+ }
+ }
+ }
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;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
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)
+ }
+ }
+ }
+ }
+ }
+ }
+ }
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);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
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);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
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;
+ }
+ }
+ }
+ }
+ }
+ }
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;
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;
+ }
+ }
}
}
}
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;
+ }
}
}
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;
+ }
}
}
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;
+ }
}
}
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';
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)}');
+ }
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;
+ }
+ }
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);
+ }
+
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;
+ }
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%;
+ }
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;
+ }
}
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;
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);
+ }
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;
}
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';
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';
+ }
}
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;
- }
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);
+ }
+ }
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)
+ }
+ }
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;
+ }
+ }
+ }
+ }
+ }
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;
+ }
+ }
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;
+ }
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;
+ }
+ }
+ }
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);
+ }
+ }
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};
+ }
+ }
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';