'+e+"
",viewing:g.templates.viewing},i=''+h.viewing+h.grid+"
',tip:'
',wrapper:'',button:'',prev_button:'',modal:'',expose:'',expose_cover:''},expose_add_class:""},init:function(b,c,d){Foundation.inherit(this,"throttle random_str"),this.settings=this.settings||a.extend({},this.defaults,d||c),this.bindings(c,d)},go_next:function(){this.settings.$li.next().length<1?this.end():this.settings.timer>0?(clearTimeout(this.settings.automate),this.hide(),this.show(),this.startTimer()):(this.hide(),this.show())},go_prev:function(){this.settings.$li.prev().length<1||(this.settings.timer>0?(clearTimeout(this.settings.automate),this.hide(),this.show(null,!0),this.startTimer()):(this.hide(),this.show(null,!0)))},events:function(){var c=this;a(this.scope).off(".joyride").on("click.fndtn.joyride",".joyride-next-tip, .joyride-modal-bg",function(a){a.preventDefault(),this.go_next()}.bind(this)).on("click.fndtn.joyride",".joyride-prev-tip",function(a){a.preventDefault(),this.go_prev()}.bind(this)).on("click.fndtn.joyride",".joyride-close-tip",function(a){a.preventDefault(),this.end(this.settings.abort_on_close)}.bind(this)).on("keyup.fndtn.joyride",function(a){if(this.settings.keyboard&&this.settings.riding)switch(a.which){case 39:a.preventDefault(),this.go_next();break;case 37:a.preventDefault(),this.go_prev();break;case 27:a.preventDefault(),this.end(this.settings.abort_on_close)}}.bind(this)),a(b).off(".joyride").on("resize.fndtn.joyride",c.throttle(function(){if(a("["+c.attr_name()+"]").length>0&&c.settings.$next_tip&&c.settings.riding){if(c.settings.exposed.length>0){var b=a(c.settings.exposed);b.each(function(){var b=a(this);c.un_expose(b),c.expose(b)})}c.is_phone()?c.pos_phone():c.pos_default(!1)}},100))},start:function(){var b=this,c=a("["+this.attr_name()+"]",this.scope),d=["timer","scrollSpeed","startOffset","tipAnimationFadeSpeed","cookieExpires"],e=d.length;!c.length>0||(this.settings.init||this.events(),this.settings=c.data(this.attr_name(!0)+"-init"),this.settings.$content_el=c,this.settings.$body=a(this.settings.tip_container),this.settings.body_offset=a(this.settings.tip_container).position(),this.settings.$tip_content=this.settings.$content_el.find("> li"),this.settings.paused=!1,this.settings.attempts=0,this.settings.riding=!0,"function"!=typeof a.cookie&&(this.settings.cookie_monster=!1),(!this.settings.cookie_monster||this.settings.cookie_monster&&!a.cookie(this.settings.cookie_name))&&(this.settings.$tip_content.each(function(c){var f=a(this);this.settings=a.extend({},b.defaults,b.data_options(f));for(var g=e;g--;)b.settings[d[g]]=parseInt(b.settings[d[g]],10);b.create({$li:f,index:c})}),!this.settings.start_timer_on_click&&this.settings.timer>0?(this.show("init"),this.startTimer()):this.show("init")))},resume:function(){this.set_li(),this.show()},tip_template:function(b){var c,d;return b.tip_class=b.tip_class||"",c=a(this.settings.template.tip).addClass(b.tip_class),d=a.trim(a(b.li).html())+this.prev_button_text(b.prev_button_text,b.index)+this.button_text(b.button_text)+this.settings.template.link+this.timer_instance(b.index),c.append(a(this.settings.template.wrapper)),c.first().attr(this.add_namespace("data-index"),b.index),a(".joyride-content-wrapper",c).append(d),c[0]},timer_instance:function(b){var c;return c=0===b&&this.settings.start_timer_on_click&&this.settings.timer>0||0===this.settings.timer?"":a(this.settings.template.timer)[0].outerHTML},button_text:function(b){return this.settings.tip_settings.next_button?(b=a.trim(b)||"Next",b=a(this.settings.template.button).append(b)[0].outerHTML):b="",b},prev_button_text:function(b,c){return this.settings.tip_settings.prev_button?(b=a.trim(b)||"Previous",b=0==c?a(this.settings.template.prev_button).append(b).addClass("disabled")[0].outerHTML:a(this.settings.template.prev_button).append(b)[0].outerHTML):b="",b},create:function(b){this.settings.tip_settings=a.extend({},this.settings,this.data_options(b.$li));var c=b.$li.attr(this.add_namespace("data-button"))||b.$li.attr(this.add_namespace("data-text")),d=b.$li.attr(this.add_namespace("data-button-prev"))||b.$li.attr(this.add_namespace("data-prev-text")),e=b.$li.attr("class"),f=a(this.tip_template({tip_class:e,index:b.index,button_text:c,prev_button_text:d,li:b.$li}));a(this.settings.tip_container).append(f)},show:function(b,c){var e=null;if(this.settings.$li===d||-1===a.inArray(this.settings.$li.index(),this.settings.pause_after))if(this.settings.paused?this.settings.paused=!1:this.set_li(b,c),this.settings.attempts=0,this.settings.$li.length&&this.settings.$target.length>0){if(b&&(this.settings.pre_ride_callback(this.settings.$li.index(),this.settings.$next_tip),this.settings.modal&&this.show_modal()),this.settings.pre_step_callback(this.settings.$li.index(),this.settings.$next_tip),this.settings.modal&&this.settings.expose&&this.expose(),this.settings.tip_settings=a.extend({},this.settings,this.data_options(this.settings.$li)),this.settings.timer=parseInt(this.settings.timer,10),this.settings.tip_settings.tip_location_pattern=this.settings.tip_location_patterns[this.settings.tip_settings.tip_location],!/body/i.test(this.settings.$target.selector)){var f=a(".joyride-modal-bg");/pop/i.test(this.settings.tipAnimation)?f.hide():f.fadeOut(this.settings.tipAnimationFadeSpeed),this.scroll_to()}this.is_phone()?this.pos_phone(!0):this.pos_default(!0),e=this.settings.$next_tip.find(".joyride-timer-indicator"),/pop/i.test(this.settings.tip_animation)?(e.width(0),this.settings.timer>0?(this.settings.$next_tip.show(),setTimeout(function(){e.animate({width:e.parent().width()},this.settings.timer,"linear")}.bind(this),this.settings.tip_animation_fade_speed)):this.settings.$next_tip.show()):/fade/i.test(this.settings.tip_animation)&&(e.width(0),this.settings.timer>0?(this.settings.$next_tip.fadeIn(this.settings.tip_animation_fade_speed).show(),setTimeout(function(){e.animate({width:e.parent().width()},this.settings.timer,"linear")}.bind(this),this.settings.tip_animation_fade_speed)):this.settings.$next_tip.fadeIn(this.settings.tip_animation_fade_speed)),this.settings.$current_tip=this.settings.$next_tip}else this.settings.$li&&this.settings.$target.length<1?this.show(b,c):this.end();else this.settings.paused=!0},is_phone:function(){return matchMedia(Foundation.media_queries.small).matches&&!matchMedia(Foundation.media_queries.medium).matches},hide:function(){this.settings.modal&&this.settings.expose&&this.un_expose(),this.settings.modal||a(".joyride-modal-bg").hide(),this.settings.$current_tip.css("visibility","hidden"),setTimeout(a.proxy(function(){this.hide(),this.css("visibility","visible")},this.settings.$current_tip),0),this.settings.post_step_callback(this.settings.$li.index(),this.settings.$current_tip)},set_li:function(a,b){a?(this.settings.$li=this.settings.$tip_content.eq(this.settings.start_offset),this.set_next_tip(),this.settings.$current_tip=this.settings.$next_tip):(this.settings.$li=b?this.settings.$li.prev():this.settings.$li.next(),this.set_next_tip()),this.set_target()},set_next_tip:function(){this.settings.$next_tip=a(".joyride-tip-guide").eq(this.settings.$li.index()),this.settings.$next_tip.data("closed","")},set_target:function(){var b=this.settings.$li.attr(this.add_namespace("data-class")),d=this.settings.$li.attr(this.add_namespace("data-id")),e=function(){return d?a(c.getElementById(d)):b?a("."+b).first():a("body")};this.settings.$target=e()},scroll_to:function(){var c,d;c=a(b).height()/2,d=Math.ceil(this.settings.$target.offset().top-c+this.settings.$next_tip.outerHeight()),0!=d&&a("html, body").stop().animate({scrollTop:d},this.settings.scroll_speed,"swing")},paused:function(){return-1===a.inArray(this.settings.$li.index()+1,this.settings.pause_after)},restart:function(){this.hide(),this.settings.$li=d,this.show("init")},pos_default:function(a){var b=this.settings.$next_tip.find(".joyride-nub"),c=Math.ceil(b.outerWidth()/2),d=Math.ceil(b.outerHeight()/2),e=a||!1;if(e&&(this.settings.$next_tip.css("visibility","hidden"),this.settings.$next_tip.show()),/body/i.test(this.settings.$target.selector))this.settings.$li.length&&this.pos_modal(b);else{var f=this.settings.tip_settings.tipAdjustmentY?parseInt(this.settings.tip_settings.tipAdjustmentY):0,g=this.settings.tip_settings.tipAdjustmentX?parseInt(this.settings.tip_settings.tipAdjustmentX):0;this.bottom()?(this.settings.$next_tip.css(this.rtl?{top:this.settings.$target.offset().top+d+this.settings.$target.outerHeight()+f,left:this.settings.$target.offset().left+this.settings.$target.outerWidth()-this.settings.$next_tip.outerWidth()+g}:{top:this.settings.$target.offset().top+d+this.settings.$target.outerHeight()+f,left:this.settings.$target.offset().left+g}),this.nub_position(b,this.settings.tip_settings.nub_position,"top")):this.top()?(this.settings.$next_tip.css(this.rtl?{top:this.settings.$target.offset().top-this.settings.$next_tip.outerHeight()-d+f,left:this.settings.$target.offset().left+this.settings.$target.outerWidth()-this.settings.$next_tip.outerWidth()}:{top:this.settings.$target.offset().top-this.settings.$next_tip.outerHeight()-d+f,left:this.settings.$target.offset().left+g}),this.nub_position(b,this.settings.tip_settings.nub_position,"bottom")):this.right()?(this.settings.$next_tip.css({top:this.settings.$target.offset().top+f,left:this.settings.$target.outerWidth()+this.settings.$target.offset().left+c+g}),this.nub_position(b,this.settings.tip_settings.nub_position,"left")):this.left()&&(this.settings.$next_tip.css({top:this.settings.$target.offset().top+f,left:this.settings.$target.offset().left-this.settings.$next_tip.outerWidth()-c+g}),this.nub_position(b,this.settings.tip_settings.nub_position,"right")),!this.visible(this.corners(this.settings.$next_tip))&&this.settings.attempts
").addClass(f.timer_container_class),m.append(""),m.append(a("
").addClass(f.timer_progress_class)),m.addClass(f.timer_paused_class),j.append(m)),f.slide_number&&(k=a("",j=this.settings.touch_label;Modernizr.touch&&(i=a(i).find(".clearing-touch-label").html(j).end()),f.after(i).remove()}}},open:function(b,d,e){function f(){setTimeout(function(){this.image_loaded(m,function(){1!==m.outerWidth()||o?g.call(this,m):f.call(this)}.bind(this))}.bind(this),100)}function g(b){var c=a(b);c.css("visibility","visible"),c.trigger("imageVisible"),i.css("overflow","hidden"),j.addClass("clearing-blackout"),k.addClass("clearing-container"),l.show(),this.fix_height(e).caption(h.S(".clearing-caption",l),h.S("img",e)).center_and_label(b,n).shift(d,e,function(){e.closest("li").siblings().removeClass("visible"),e.closest("li").addClass("visible")}),l.trigger("opened.fndtn.clearing")}var h=this,i=a(c.body),j=e.closest(".clearing-assembled"),k=h.S("div",j).first(),l=h.S(".visible-img",k),m=h.S("img",l).not(b),n=h.S(".clearing-touch-label",k),o=!1,p={};a("body").on("touchmove",function(a){a.preventDefault()}),m.error(function(){o=!0}),this.locked()||(l.trigger("open.fndtn.clearing"),p=this.load(b),p.interchange?m.attr("data-interchange",p.interchange).foundation("interchange","reflow"):m.attr("src",p.src).attr("data-interchange",""),m.css("visibility","hidden"),f.call(this))},close:function(b,d){b.preventDefault();var e,f,g=function(a){return/blackout/.test(a.selector)?a:a.closest(".clearing-blackout")}(a(d)),h=a(c.body);return d===b.target&&g&&(h.css("overflow",""),e=a("div",g).first(),f=a(".visible-img",e),f.trigger("close.fndtn.clearing"),this.settings.prev_index=0,a("ul["+this.attr_name()+"]",g).attr("style","").closest(".clearing-blackout").removeClass("clearing-blackout"),e.removeClass("clearing-container"),f.hide(),f.trigger("closed.fndtn.clearing")),a("body").off("touchmove"),!1},is_open:function(a){return a.parent().prop("style").length>0},keydown:function(b){var c=a(".clearing-blackout ul["+this.attr_name()+"]"),d=this.rtl?37:39,e=this.rtl?39:37,f=27;b.which===d&&this.go(c,"next"),b.which===e&&this.go(c,"prev"),b.which===f&&this.S("a.clearing-close").trigger("click.fndtn.clearing")},nav:function(b,c){var d=a("ul["+this.attr_name()+"]",".clearing-blackout");b.preventDefault(),this.go(d,c)},resize:function(){var b=a("img",".clearing-blackout .visible-img"),c=a(".clearing-touch-label",".clearing-blackout");b.length&&(this.center_and_label(b,c),b.trigger("resized.fndtn.clearing"))},fix_height:function(a){var b=a.parent().children(),c=this;return b.each(function(){var a=c.S(this),b=a.find("img");a.height()>b.outerHeight()&&a.addClass("fix-height")}).closest("ul").width(100*b.length+"%"),this},update_paddles:function(a){a=a.closest("li");var b=a.closest(".carousel").siblings(".visible-img");a.next().length>0?this.S(".clearing-main-next",b).removeClass("disabled"):this.S(".clearing-main-next",b).addClass("disabled"),a.prev().length>0?this.S(".clearing-main-prev",b).removeClass("disabled"):this.S(".clearing-main-prev",b).addClass("disabled")},center_and_label:function(a,b){return b.css(!this.rtl&&b.length>0?{marginLeft:-(b.outerWidth()/2),marginTop:-(a.outerHeight()/2)-b.outerHeight()-10}:{marginRight:-(b.outerWidth()/2),marginTop:-(a.outerHeight()/2)-b.outerHeight()-10,left:"auto",right:"50%"}),this},load:function(a){var b,c,d;return"A"===a[0].nodeName?(b=a.attr("href"),c=a.data("clearing-interchange")):(d=a.closest("a"),b=d.attr("href"),c=d.data("clearing-interchange")),this.preload(a),{src:b?b:a.attr("src"),interchange:b?c:a.data("clearing-interchange")}},preload:function(a){this.img(a.closest("li").next(),"next").img(a.closest("li").prev(),"prev")},img:function(b,c){if(b.length){var d,e,f,g=a(".clearing-preload-"+c),h=this.S("a",b);h.length?(d=h.attr("href"),e=h.data("clearing-interchange")):(f=this.S("img",b),d=f.attr("src"),e=f.data("clearing-interchange")),e?g.attr("data-interchange",e):(g.attr("src",d),g.attr("data-interchange",""))}return this},caption:function(a,b){var c=b.attr("data-caption");return c?a.html(c).show():a.text("").hide(),this},go:function(a,b){var c=this.S(".visible",a),d=c[b]();this.settings.skip_selector&&0!=d.find(this.settings.skip_selector).length&&(d=d[b]()),d.length&&this.S("img",d).trigger("click.fndtn.clearing",[c,d]).trigger("change.fndtn.clearing")},shift:function(a,b,c){var d,e=b.parent(),f=this.settings.prev_index||b.index(),g=this.direction(e,a,b),h=this.rtl?"right":"left",i=parseInt(e.css("left"),10),j=b.outerWidth(),k={};b.index()===f||/skip/.test(g)?/skip/.test(g)&&(d=b.index()-this.settings.up_count,this.lock(),d>0?(k[h]=-(d*j),e.animate(k,300,this.unlock())):(k[h]=0,e.animate(k,300,this.unlock()))):/left/.test(g)?(this.lock(),k[h]=i+j,e.animate(k,300,this.unlock())):/right/.test(g)&&(this.lock(),k[h]=i-j,e.animate(k,300,this.unlock())),c()},direction:function(a,b,c){var d,e=this.S("li",a),f=e.outerWidth()+e.outerWidth()/4,g=Math.floor(this.S(".clearing-container").outerWidth()/f)-1,h=e.index(c);return this.settings.up_count=g,d=this.adjacent(this.settings.prev_index,h)?h>g&&h>this.settings.prev_index?"right":h>g-1&&h<=this.settings.prev_index?"left":!1:"skip",this.settings.prev_index=h,d},adjacent:function(a,b){for(var c=b+1;c>=b-1;c--)if(c===a)return!0;return!1},lock:function(){this.settings.locked=!0},unlock:function(){this.settings.locked=!1},locked:function(){return this.settings.locked},off:function(){this.S(this.scope).off(".fndtn.clearing"),this.S(b).off(".fndtn.clearing")},reflow:function(){this.init()}}}(jQuery,window,window.document),function(a,b,c,d){"use strict";Foundation.libs.dropdown={name:"dropdown",version:"5.5.2",settings:{active_class:"open",disabled_class:"disabled",mega_class:"mega",align:"bottom",is_hover:!1,hover_timeout:150,opened:function(){},closed:function(){}},init:function(b,c,d){Foundation.inherit(this,"throttle"),a.extend(!0,this.settings,c,d),this.bindings(c,d)},events:function(d){var e=this,f=e.S;f(this.scope).off(".dropdown").on("click.fndtn.dropdown","["+this.attr_name()+"]",function(b){var c=f(this).data(e.attr_name(!0)+"-init")||e.settings;(!c.is_hover||Modernizr.touch)&&(b.preventDefault(),f(this).parent("[data-reveal-id]").length&&b.stopPropagation(),e.toggle(a(this)))}).on("mouseenter.fndtn.dropdown","["+this.attr_name()+"], ["+this.attr_name()+"-content]",function(a){var b,c,d=f(this);clearTimeout(e.timeout),d.data(e.data_attr())?(b=f("#"+d.data(e.data_attr())),c=d):(b=d,c=f("["+e.attr_name()+'="'+b.attr("id")+'"]'));var g=c.data(e.attr_name(!0)+"-init")||e.settings;f(a.currentTarget).data(e.data_attr())&&g.is_hover&&e.closeall.call(e),g.is_hover&&e.open.apply(e,[b,c])}).on("mouseleave.fndtn.dropdown","["+this.attr_name()+"], ["+this.attr_name()+"-content]",function(a){var b,c=f(this);if(c.data(e.data_attr()))b=c.data(e.data_attr(!0)+"-init")||e.settings;else var d=f("["+e.attr_name()+'="'+f(this).attr("id")+'"]'),b=d.data(e.attr_name(!0)+"-init")||e.settings;e.timeout=setTimeout(function(){c.data(e.data_attr())?b.is_hover&&e.close.call(e,f("#"+c.data(e.data_attr()))):b.is_hover&&e.close.call(e,c)}.bind(this),b.hover_timeout)}).on("click.fndtn.dropdown",function(b){var d=f(b.target).closest("["+e.attr_name()+"-content]"),g=d.find("a");return g.length>0&&"false"!==d.attr("aria-autoclose")&&e.close.call(e,f("["+e.attr_name()+"-content]")),b.target!==c&&!a.contains(c.documentElement,b.target)||f(b.target).closest("["+e.attr_name()+"]").length>0?void 0:!f(b.target).data("revealId")&&d.length>0&&(f(b.target).is("["+e.attr_name()+"-content]")||a.contains(d.first()[0],b.target))?void b.stopPropagation():void e.close.call(e,f("["+e.attr_name()+"-content]"))}).on("opened.fndtn.dropdown","["+e.attr_name()+"-content]",function(){e.settings.opened.call(this)}).on("closed.fndtn.dropdown","["+e.attr_name()+"-content]",function(){e.settings.closed.call(this)}),f(b).off(".dropdown").on("resize.fndtn.dropdown",e.throttle(function(){e.resize.call(e)},50)),this.resize()},close:function(b){var c=this;b.each(function(d){var e=a("["+c.attr_name()+"="+b[d].id+"]")||a("aria-controls="+b[d].id+"]");e.attr("aria-expanded","false"),c.S(this).hasClass(c.settings.active_class)&&(c.S(this).css(Foundation.rtl?"right":"left","-99999px").attr("aria-hidden","true").removeClass(c.settings.active_class).prev("["+c.attr_name()+"]").removeClass(c.settings.active_class).removeData("target"),c.S(this).trigger("closed.fndtn.dropdown",[b]))}),b.removeClass("f-open-"+this.attr_name(!0))},closeall:function(){var b=this;a.each(b.S(".f-open-"+this.attr_name(!0)),function(){b.close.call(b,b.S(this))})},open:function(a,b){this.css(a.addClass(this.settings.active_class),b),a.prev("["+this.attr_name()+"]").addClass(this.settings.active_class),a.data("target",b.get(0)).trigger("opened.fndtn.dropdown",[a,b]),a.attr("aria-hidden","false"),b.attr("aria-expanded","true"),a.focus(),a.addClass("f-open-"+this.attr_name(!0))},data_attr:function(){return this.namespace.length>0?this.namespace+"-"+this.name:this.name},toggle:function(a){if(!a.hasClass(this.settings.disabled_class)){var b=this.S("#"+a.data(this.data_attr()));0!==b.length&&(this.close.call(this,this.S("["+this.attr_name()+"-content]").not(b)),b.hasClass(this.settings.active_class)?(this.close.call(this,b),b.data("target")!==a.get(0)&&this.open.call(this,b,a)):this.open.call(this,b,a))}},resize:function(){var b=this.S("["+this.attr_name()+"-content].open"),c=a(b.data("target"));b.length&&c.length&&this.css(b,c)},css:function(a,b){var c=Math.max((b.width()-a.width())/2,8),d=b.data(this.attr_name(!0)+"-init")||this.settings,e=a.parent().css("overflow-y")||a.parent().css("overflow");if(this.clear_idx(),this.small()){var f=this.dirs.bottom.call(a,b,d);a.attr("style","").removeClass("drop-left drop-right drop-top").css({position:"absolute",width:"95%","max-width":"none",top:f.top}),a.css(Foundation.rtl?"right":"left",c)}else if("visible"!==e){var g=b[0].offsetTop+b[0].offsetHeight;a.attr("style","").css({position:"absolute",top:g}),a.css(Foundation.rtl?"right":"left",c)}else this.style(a,b,d);return a},style:function(b,c,d){var e=a.extend({position:"absolute"},this.dirs[d.align].call(b,c,d));b.attr("style","").css(e)},dirs:{_base:function(a){var d=this.offsetParent(),e=d.offset(),f=a.offset();f.top-=e.top,f.left-=e.left,f.missRight=!1,f.missTop=!1,f.missLeft=!1,f.leftRightFlag=!1;var g;g=c.getElementsByClassName("row")[0]?c.getElementsByClassName("row")[0].clientWidth:b.innerWidth;var h=(b.innerWidth-g)/2,i=g;return this.hasClass("mega")||(a.offset().top<=this.outerHeight()&&(f.missTop=!0,i=b.innerWidth-h,f.leftRightFlag=!0),a.offset().left+this.outerWidth()>a.offset().left+h&&a.offset().left-h>this.outerWidth()&&(f.missRight=!0,f.missLeft=!1),a.offset().left-this.outerWidth()<=0&&(f.missLeft=!0,f.missRight=!1)),f},top:function(a,b){var c=Foundation.libs.dropdown,d=c.dirs._base.call(this,a);return this.addClass("drop-top"),1==d.missTop&&(d.top=d.top+a.outerHeight()+this.outerHeight(),this.removeClass("drop-top")),1==d.missRight&&(d.left=d.left-this.outerWidth()+a.outerWidth()),(a.outerWidth()0)for(var d=this.S("["+this.add_namespace("data-uuid")+'="'+a+'"]');c--;){var e,f=b[c][2];if(e=matchMedia(this.settings.named_queries.hasOwnProperty(f)?this.settings.named_queries[f]:f),e.matches)return{el:d,scenario:b[c]}}return!1},load:function(a,b){return("undefined"==typeof this["cached_"+a]||b)&&this["update_"+a](),this["cached_"+a]},update_images:function(){var a=this.S("img["+this.data_attr+"]"),b=a.length,c=b,d=0,e=this.data_attr;for(this.cache={},this.cached_images=[],this.images_loaded=0===b;c--;){if(d++,a[c]){var f=a[c].getAttribute(e)||"";f.length>0&&this.cached_images.push(a[c])}d===b&&(this.images_loaded=!0,this.enhance("images"))}return this},update_nodes:function(){var a=this.S("["+this.data_attr+"]").not("img"),b=a.length,c=b,d=0,e=this.data_attr;for(this.cached_nodes=[],this.nodes_loaded=0===b;c--;){d++;var f=a[c].getAttribute(e)||"";f.length>0&&this.cached_nodes.push(a[c]),d===b&&(this.nodes_loaded=!0,this.enhance("nodes"))}return this},enhance:function(c){for(var d=this["cached_"+c].length;d--;)this.object(a(this["cached_"+c][d]));return a(b).trigger("resize.fndtn.interchange")},convert_directive:function(a){var b=this.trim(a);return b.length>0?b:"replace"},parse_scenario:function(a){var b=a[0].match(/(.+),\s*(\w+)\s*$/),c=a[1].match(/(.*)\)/);if(b)var d=b[1],e=b[2];else var f=a[0].split(/,\s*$/),d=f[0],e="";return[this.trim(d),this.convert_directive(e),this.trim(c[1])]},object:function(a){var b=this.parse_data_attr(a),c=[],d=b.length;if(d>0)for(;d--;){var e=b[d].split(/,\s?\(/);if(e.length>1){var f=this.parse_scenario(e);c.push(f)}}return this.store(a,c)},store:function(a,b){var c=this.random_str(),d=a.data(this.add_namespace("uuid",!0));return this.cache[d]?this.cache[d]:(a.attr(this.add_namespace("data-uuid"),c),this.cache[c]=b)},trim:function(b){return"string"==typeof b?a.trim(b):b},set_data_attr:function(a){return a?this.namespace.length>0?this.namespace+"-"+this.settings.load_attr:this.settings.load_attr:this.namespace.length>0?"data-"+this.namespace+"-"+this.settings.load_attr:"data-"+this.settings.load_attr},parse_data_attr:function(a){for(var b=a.attr(this.attr_name()).split(/\[(.*?)\]/),c=b.length,d=[];c--;)b[c].replace(/[\W\d]+/,"").length>4&&d.push(b[c]);return d},reflow:function(){this.load("images",!0),this.load("nodes",!0)}}}(jQuery,window,window.document),function(a,b,c,d){"use strict";Foundation.libs.joyride={name:"joyride",version:"5.5.2",defaults:{expose:!1,modal:!0,keyboard:!0,tip_location:"bottom",nub_position:"auto",scroll_speed:1500,scroll_animation:"linear",timer:0,start_timer_on_click:!0,start_offset:0,next_button:!0,prev_button:!0,tip_animation:"fade",pause_after:[],exposed:[],tip_animation_fade_speed:300,cookie_monster:!1,cookie_name:"joyride",cookie_domain:!1,cookie_expires:365,tip_container:"body",abort_on_close:!0,tip_location_patterns:{top:["bottom"],bottom:[],left:["right","top","bottom"],right:["left","top","bottom"]},post_ride_callback:function(){},post_step_callback:function(){},pre_step_callback:function(){},pre_ride_callback:function(){},post_expose_callback:function(){},template:{link:'×',timer:'0&&arguments[0]instanceof a)e=arguments[0];else{if(!this.settings.$target||/body/i.test(this.settings.$target.selector))return!1;e=this.settings.$target}return e.length<1?(b.console&&console.error("element not valid",e),!1):(c=a(this.settings.template.expose),this.settings.$body.append(c),c.css({top:e.offset().top,left:e.offset().left,width:e.outerWidth(!0),height:e.outerHeight(!0)}),d=a(this.settings.template.expose_cover),f={zIndex:e.css("z-index"),position:e.css("position")},g=null==e.attr("class")?"":e.attr("class"),e.css("z-index",parseInt(c.css("z-index"))+1),"static"==f.position&&e.css("position","relative"),e.data("expose-css",f),e.data("orig-class",g),e.attr("class",g+" "+this.settings.expose_add_class),d.css({top:e.offset().top,left:e.offset().left,width:e.outerWidth(!0),height:e.outerHeight(!0)}),this.settings.modal&&this.show_modal(),this.settings.$body.append(d),c.addClass(h),d.addClass(h),e.data("expose",h),this.settings.post_expose_callback(this.settings.$li.index(),this.settings.$next_tip,e),void this.add_exposed(e))},un_expose:function(){var c,d,e,f,g,h=!1;if(arguments.length>0&&arguments[0]instanceof a)d=arguments[0];else{if(!this.settings.$target||/body/i.test(this.settings.$target.selector))return!1;d=this.settings.$target}return d.length<1?(b.console&&console.error("element not valid",d),!1):(c=d.data("expose"),e=a("."+c),arguments.length>1&&(h=arguments[1]),h===!0?a(".joyride-expose-wrapper,.joyride-expose-cover").remove():e.remove(),f=d.data("expose-css"),"auto"==f.zIndex?d.css("z-index",""):d.css("z-index",f.zIndex),f.position!=d.css("position")&&("static"==f.position?d.css("position",""):d.css("position",f.position)),g=d.data("orig-class"),d.attr("class",g),d.removeData("orig-classes"),d.removeData("expose"),d.removeData("expose-z-index"),void this.remove_exposed(d))},add_exposed:function(b){this.settings.exposed=this.settings.exposed||[],b instanceof a||"object"==typeof b?this.settings.exposed.push(b[0]):"string"==typeof b&&this.settings.exposed.push(b)},remove_exposed:function(b){var c,d;for(b instanceof a?c=b[0]:"string"==typeof b&&(c=b),this.settings.exposed=this.settings.exposed||[],d=this.settings.exposed.length;d--;)if(this.settings.exposed[d]==c)return void this.settings.exposed.splice(d,1)},center:function(){var c=a(b);return this.settings.$next_tip.css({top:(c.height()-this.settings.$next_tip.outerHeight())/2+c.scrollTop(),left:(c.width()-this.settings.$next_tip.outerWidth())/2+c.scrollLeft()}),!0},bottom:function(){return/bottom/i.test(this.settings.tip_settings.tip_location)},top:function(){return/top/i.test(this.settings.tip_settings.tip_location)},right:function(){return/right/i.test(this.settings.tip_settings.tip_location)},left:function(){return/left/i.test(this.settings.tip_settings.tip_location)},corners:function(c){var d=a(b),e=d.height()/2,f=Math.ceil(this.settings.$target.offset().top-e+this.settings.$next_tip.outerHeight()),g=d.width()+d.scrollLeft(),h=d.height()+f,i=d.height()+d.scrollTop(),j=d.scrollTop();return j>f&&(j=0>f?0:f),h>i&&(i=h),[c.offset().topc.offset().left]},visible:function(a){for(var b=a.length;b--;)if(a[b])return!1;return!0},nub_position:function(a,b,c){a.addClass("auto"===b?c:b)},startTimer:function(){this.settings.$li.length?this.settings.automate=setTimeout(function(){this.hide(),this.show(),this.startTimer()}.bind(this),this.settings.timer):clearTimeout(this.settings.automate)},end:function(b){this.settings.cookie_monster&&a.cookie(this.settings.cookie_name,"ridden",{expires:this.settings.cookie_expires,domain:this.settings.cookie_domain}),this.settings.timer>0&&clearTimeout(this.settings.automate),this.settings.modal&&this.settings.expose&&this.un_expose(),a(this.scope).off("keyup.joyride"),this.settings.$next_tip.data("closed",!0),this.settings.riding=!1,a(".joyride-modal-bg").hide(),this.settings.$current_tip.hide(),("undefined"==typeof b||b===!1)&&(this.settings.post_step_callback(this.settings.$li.index(),this.settings.$current_tip),this.settings.post_ride_callback(this.settings.$li.index(),this.settings.$current_tip)),a(".joyride-tip-guide").remove()},off:function(){a(this.scope).off(".joyride"),a(b).off(".joyride"),a(".joyride-close-tip, .joyride-next-tip, .joyride-modal-bg").off(".joyride"),a(".joyride-tip-guide, .joyride-modal-bg").remove(),clearTimeout(this.settings.automate),this.settings={}},reflow:function(){}}}(jQuery,window,window.document),function(a,b,c,d){"use strict";Foundation.libs["magellan-expedition"]={name:"magellan-expedition",version:"5.5.2",settings:{active_class:"active",threshold:0,destination_threshold:20,throttle_delay:30,fixed_top:0,offset_by_height:!0,duration:700,easing:"swing"},init:function(a,b,c){Foundation.inherit(this,"throttle"),this.bindings(b,c)},events:function(){var b=this,c=b.S,d=b.settings;b.set_expedition_position(),c(b.scope).off(".magellan").on("click.fndtn.magellan","["+b.add_namespace("data-magellan-arrival")+"] a[href*=#]",function(c){var d=this.hostname===location.hostname||!this.hostname,e=b.filterPathname(location.pathname)===b.filterPathname(this.pathname),f=this.hash.replace(/(:|\.|\/)/g,"\\$1"),g=this;if(d&&e&&f){c.preventDefault();var h=a(this).closest("["+b.attr_name()+"]"),i=h.data("magellan-expedition-init"),j=this.hash.split("#").join(""),k=a('a[name="'+j+'"]');0===k.length&&(k=a("#"+j));var l=k.offset().top-i.destination_threshold+1;i.offset_by_height&&(l-=h.outerHeight()),a("html, body").stop().animate({scrollTop:l},i.duration,i.easing,function(){history.pushState?history.pushState(null,null,g.pathname+"#"+j):location.hash=g.pathname+"#"+j})}}).on("scroll.fndtn.magellan",b.throttle(this.check_for_arrivals.bind(this),d.throttle_delay))},check_for_arrivals:function(){var a=this;a.update_arrivals(),a.update_expedition_positions()},set_expedition_position:function(){var b=this;a("["+this.attr_name()+"=fixed]",b.scope).each(function(c,d){var e,f,g=a(this),h=g.data("magellan-expedition-init"),i=g.attr("styles");g.attr("style",""),e=g.offset().top+h.threshold,f=parseInt(g.data("magellan-fixed-top")),isNaN(f)||(b.settings.fixed_top=f),g.data(b.data_attr("magellan-top-offset"),e),g.attr("style",i)})},update_expedition_positions:function(){var c=this,d=a(b).scrollTop();a("["+this.attr_name()+"=fixed]",c.scope).each(function(){var b=a(this),e=b.data("magellan-expedition-init"),f=b.attr("style"),g=b.data("magellan-top-offset");if(d+c.settings.fixed_top>=g){var h=b.prev("["+c.add_namespace("data-magellan-expedition-clone")+"]");0===h.length&&(h=b.clone(),h.removeAttr(c.attr_name()),h.attr(c.add_namespace("data-magellan-expedition-clone"),""),b.before(h)),b.css({position:"fixed",top:e.fixed_top}).addClass("fixed")}else b.prev("["+c.add_namespace("data-magellan-expedition-clone")+"]").remove(),b.attr("style",f).css("position","").css("top","").removeClass("fixed")})},update_arrivals:function(){var c=this,d=a(b).scrollTop();a("["+this.attr_name()+"]",c.scope).each(function(){var b=a(this),e=b.data(c.attr_name(!0)+"-init"),f=c.offsets(b,d),g=b.find("["+c.add_namespace("data-magellan-arrival")+"]"),h=!1;f.each(function(a,d){if(d.viewport_offset>=d.top_offset){var f=b.find("["+c.add_namespace("data-magellan-arrival")+"]");return f.not(d.arrival).removeClass(e.active_class),d.arrival.addClass(e.active_class),h=!0,!0}}),h||g.removeClass(e.active_class)})},offsets:function(b,c){var d=this,e=b.data(d.attr_name(!0)+"-init"),f=c;return b.find("["+d.add_namespace("data-magellan-arrival")+"]").map(function(c,g){var h=a(this).data(d.data_attr("magellan-arrival")),i=a("["+d.add_namespace("data-magellan-destination")+"="+h+"]");if(i.length>0){var j=i.offset().top-e.destination_threshold;return e.offset_by_height&&(j-=b.outerHeight()),j=Math.floor(j),{destination:i,arrival:a(this),top_offset:j,viewport_offset:f}}}).sort(function(a,b){return a.top_offsetb.top_offset?1:0})},data_attr:function(a){return this.namespace.length>0?this.namespace+"-"+a:a},off:function(){this.S(this.scope).off(".magellan"),this.S(b).off(".magellan")},filterPathname:function(a){return a=a||"",a.replace(/^\//,"").replace(/(?:index|default).[a-zA-Z]{3,4}$/,"").replace(/\/$/,"")},reflow:function(){var b=this;a("["+b.add_namespace("data-magellan-expedition-clone")+"]",b.scope).remove()}}}(jQuery,window,window.document),function(a,b,c,d){"use strict";Foundation.libs.offcanvas={name:"offcanvas",version:"5.5.2",settings:{open_method:"move",close_on_click:!1},init:function(a,b,c){this.bindings(b,c)},events:function(){var b=this,c=b.S,d="",e="",f="";"move"===this.settings.open_method?(d="move-",e="right",f="left"):"overlap_single"===this.settings.open_method?(d="offcanvas-overlap-",e="right",f="left"):"overlap"===this.settings.open_method&&(d="offcanvas-overlap"),c(this.scope).off(".offcanvas").on("click.fndtn.offcanvas",".left-off-canvas-toggle",function(f){b.click_toggle_class(f,d+e),"overlap"!==b.settings.open_method&&c(".left-submenu").removeClass(d+e),a(".left-off-canvas-toggle").attr("aria-expanded","true")}).on("click.fndtn.offcanvas",".left-off-canvas-menu a",function(f){var g=b.get_settings(f),h=c(this).parent();!g.close_on_click||h.hasClass("has-submenu")||h.hasClass("back")?c(this).parent().hasClass("has-submenu")?(f.preventDefault(),c(this).siblings(".left-submenu").toggleClass(d+e)):h.hasClass("back")&&(f.preventDefault(),h.parent().removeClass(d+e)):(b.hide.call(b,d+e,b.get_wrapper(f)),h.parent().removeClass(d+e)),a(".left-off-canvas-toggle").attr("aria-expanded","true")}).on("click.fndtn.offcanvas",".right-off-canvas-toggle",function(e){b.click_toggle_class(e,d+f),"overlap"!==b.settings.open_method&&c(".right-submenu").removeClass(d+f),a(".right-off-canvas-toggle").attr("aria-expanded","true")}).on("click.fndtn.offcanvas",".right-off-canvas-menu a",function(e){var g=b.get_settings(e),h=c(this).parent();!g.close_on_click||h.hasClass("has-submenu")||h.hasClass("back")?c(this).parent().hasClass("has-submenu")?(e.preventDefault(),c(this).siblings(".right-submenu").toggleClass(d+f)):h.hasClass("back")&&(e.preventDefault(),h.parent().removeClass(d+f)):(b.hide.call(b,d+f,b.get_wrapper(e)),h.parent().removeClass(d+f)),a(".right-off-canvas-toggle").attr("aria-expanded","true")}).on("click.fndtn.offcanvas",".exit-off-canvas",function(g){b.click_remove_class(g,d+f),c(".right-submenu").removeClass(d+f),e&&(b.click_remove_class(g,d+e),c(".left-submenu").removeClass(d+f)),a(".right-off-canvas-toggle").attr("aria-expanded","true")}).on("click.fndtn.offcanvas",".exit-off-canvas",function(c){b.click_remove_class(c,d+f),a(".left-off-canvas-toggle").attr("aria-expanded","false"),e&&(b.click_remove_class(c,d+e),a(".right-off-canvas-toggle").attr("aria-expanded","false"))})},toggle:function(a,b){b=b||this.get_wrapper(),b.is("."+a)?this.hide(a,b):this.show(a,b)},show:function(a,b){b=b||this.get_wrapper(),b.trigger("open.fndtn.offcanvas"),b.addClass(a)},hide:function(a,b){b=b||this.get_wrapper(),b.trigger("close.fndtn.offcanvas"),b.removeClass(a)},click_toggle_class:function(a,b){
+a.preventDefault();var c=this.get_wrapper(a);this.toggle(b,c)},click_remove_class:function(a,b){a.preventDefault();var c=this.get_wrapper(a);this.hide(b,c)},get_settings:function(a){var b=this.S(a.target).closest("["+this.attr_name()+"]");return b.data(this.attr_name(!0)+"-init")||this.settings},get_wrapper:function(a){var b=this.S(a?a.target:this.scope).closest(".off-canvas-wrap");return 0===b.length&&(b=this.S(".off-canvas-wrap")),b},reflow:function(){}}}(jQuery,window,window.document),function(a,b,c,d){"use strict";var e=function(){},f=function(e,f){if(e.hasClass(f.slides_container_class))return this;var j,k,l,m,n,o,p=this,q=e,r=0,s=!1;p.slides=function(){return q.children(f.slide_selector)},p.slides().first().addClass(f.active_slide_class),p.update_slide_number=function(b){f.slide_number&&(k.find("span:first").text(parseInt(b)+1),k.find("span:last").text(p.slides().length)),f.bullets&&(l.children().removeClass(f.bullets_active_class),a(l.children().get(b)).addClass(f.bullets_active_class))},p.update_active_link=function(b){var c=a('[data-orbit-link="'+p.slides().eq(b).attr("data-orbit-slide")+'"]');c.siblings().removeClass(f.bullets_active_class),c.addClass(f.bullets_active_class)},p.build_markup=function(){q.wrap(''),j=q.parent(),q.addClass(f.slides_container_class),f.stack_on_small&&j.addClass(f.stack_on_small_class),f.navigation_arrows&&(j.append(a('').addClass(f.prev_class)),j.append(a('').addClass(f.next_class))),f.timer&&(m=a("
").addClass(f.slide_number_class),k.append(" "+f.slide_number_text+" "),j.append(k)),f.bullets&&(l=a("
');var d=c.detach(),e="";if(null!=d[0]){e=d[0].outerHTML;var f=this.S("#foundationClearingHolder"),g=c.data(this.attr_name(!0)+"-init"),h={grid:'- ").addClass(f.bullets_container_class),j.append(l),l.wrap(''),p.slides().each(function(b){var c=a("
- ").attr("data-orbit-slide",b).on("click",p.link_bullet);l.append(c)}))},p._goto=function(b,c){if(b===r)return!1;"object"==typeof o&&o.restart();var d=p.slides(),e="next";if(s=!0,r>b&&(e="prev"),b>=d.length){if(!f.circular)return!1;b=0}else if(0>b){if(!f.circular)return!1;b=d.length-1}var g=a(d.get(r)),h=a(d.get(b));g.css("zIndex",2),g.removeClass(f.active_slide_class),h.css("zIndex",4).addClass(f.active_slide_class),q.trigger("before-slide-change.fndtn.orbit"),f.before_slide_change(),p.update_active_link(b);var i=function(){var a=function(){r=b,s=!1,c===!0&&(o=p.create_timer(),o.start()),p.update_slide_number(r),q.trigger("after-slide-change.fndtn.orbit",[{slide_number:r,total_slides:d.length}]),f.after_slide_change(r,d.length)};q.outerHeight()!=h.outerHeight()&&f.variable_height?q.animate({height:h.outerHeight()},250,"linear",a):a()};if(1===d.length)return i(),!1;var j=function(){"next"===e&&n.next(g,h,i),"prev"===e&&n.prev(g,h,i)};h.outerHeight()>q.outerHeight()&&f.variable_height?q.animate({height:h.outerHeight()},250,"linear",j):j()},p.next=function(a){a.stopImmediatePropagation(),a.preventDefault(),p._goto(r+1)},p.prev=function(a){a.stopImmediatePropagation(),a.preventDefault(),p._goto(r-1)},p.link_custom=function(b){b.preventDefault();var c=a(this).attr("data-orbit-link");if("string"==typeof c&&""!=(c=a.trim(c))){var d=j.find("[data-orbit-slide="+c+"]");-1!=d.index()&&p._goto(d.index())}},p.link_bullet=function(){var b=a(this).attr("data-orbit-slide");if("string"==typeof b&&""!=(b=a.trim(b)))if(isNaN(parseInt(b))){var c=j.find("[data-orbit-slide="+b+"]");-1!=c.index()&&p._goto(c.index()+1)}else p._goto(parseInt(b))},p.timer_callback=function(){p._goto(r+1,!0)},p.compute_dimensions=function(){var b=a(p.slides().get(r)),c=b.outerHeight();f.variable_height||p.slides().each(function(){a(this).outerHeight()>c&&(c=a(this).outerHeight())}),q.height(c)},p.create_timer=function(){var a=new g(j.find("."+f.timer_container_class),f,p.timer_callback);return a},p.stop_timer=function(){"object"==typeof o&&o.stop()},p.toggle_timer=function(){var a=j.find("."+f.timer_container_class);a.hasClass(f.timer_paused_class)?("undefined"==typeof o&&(o=p.create_timer()),o.start()):"object"==typeof o&&o.stop()},p.init=function(){p.build_markup(),f.timer&&(o=p.create_timer(),Foundation.utils.image_loaded(this.slides().children("img"),o.start)),n=new i(f,q),"slide"===f.animation&&(n=new h(f,q)),j.on("click","."+f.next_class,p.next),j.on("click","."+f.prev_class,p.prev),f.next_on_click&&j.on("click","."+f.slides_container_class+" [data-orbit-slide]",p.link_bullet),j.on("click",p.toggle_timer),f.swipe&&j.on("touchstart.fndtn.orbit",function(a){a.touches||(a=a.originalEvent);var b={start_page_x:a.touches[0].pageX,start_page_y:a.touches[0].pageY,start_time:(new Date).getTime(),delta_x:0,is_scrolling:d};j.data("swipe-transition",b),a.stopPropagation()}).on("touchmove.fndtn.orbit",function(a){if(a.touches||(a=a.originalEvent),!(a.touches.length>1||a.scale&&1!==a.scale)){var b=j.data("swipe-transition");if("undefined"==typeof b&&(b={}),b.delta_x=a.touches[0].pageX-b.start_page_x,"undefined"==typeof b.is_scrolling&&(b.is_scrolling=!!(b.is_scrolling||Math.abs(b.delta_x)
'),a("h5>a",b).html(1==d.custom_back_text?d.back_text:"« "+e.html()),f.prepend(b))}),e.appendTo(b),this.sticky(),this.assembled(b)},assembled:function(b){b.data(this.attr_name(!0),a.extend({},b.data(this.attr_name(!0)),{assembled:!0}))},height:function(b){var c=0,d=this;return a("> li",b).each(function(){c+=d.S(this).outerHeight(!0)}),c},sticky:function(){var a=this;this.S(b).on("scroll",function(){a.update_sticky_positioning()})},update_sticky_positioning:function(){var a="."+this.settings.sticky_class,c=this.S(b),d=this;if(d.settings.sticky_topbar&&d.is_sticky(this.settings.sticky_topbar,this.settings.sticky_topbar.parent(),this.settings)){var e=this.settings.sticky_topbar.data("stickyoffset");d.S(a).hasClass("expanded")||(c.scrollTop()>e?d.S(a).hasClass("fixed")||(d.S(a).addClass("fixed"),d.S("body").addClass("f-topbar-fixed")):c.scrollTop()<=e&&d.S(a).hasClass("fixed")&&(d.S(a).removeClass("fixed"),d.S("body").removeClass("f-topbar-fixed")))}},off:function(){this.S(this.scope).off(".fndtn.topbar"),this.S(b).off(".fndtn.topbar")},reflow:function(){}}}(jQuery,window,window.document); \ No newline at end of file +!function(a,b,c,d){"use strict";function e(a){return("string"==typeof a||a instanceof String)&&(a=a.replace(/^['\\/"]+|(;\s?})+|['\\/"]+$/g,"")),a}var f=function(b){for(var c=b.length,d=a("head");c--;)0===d.has("."+b[c]).length&&d.append('')};f(["foundation-mq-small","foundation-mq-small-only","foundation-mq-medium","foundation-mq-medium-only","foundation-mq-large","foundation-mq-large-only","foundation-mq-xlarge","foundation-mq-xlarge-only","foundation-mq-xxlarge","foundation-data-attribute-namespace"]),a(function(){"undefined"!=typeof FastClick&&"undefined"!=typeof c.body&&FastClick.attach(c.body)});var g=function(b,d){if("string"==typeof b){if(d){var e;if(d.jquery){if(e=d[0],!e)return d}else e=d;return a(e.querySelectorAll(b))}return a(c.querySelectorAll(b))}return a(b,d)},h=function(a){var b=[];return a||b.push("data"),this.namespace.length>0&&b.push(this.namespace),b.push(this.name),b.join("-")},i=function(a){for(var b=a.split("-"),c=b.length,d=[];c--;)0!==c?d.push(b[c]):this.namespace.length>0?d.push(this.namespace,b[c]):d.push(b[c]);return d.reverse().join("-")},j=function(b,c){var d=this,e=function(){var e=g(this),f=!e.data(d.attr_name(!0)+"-init");e.data(d.attr_name(!0)+"-init",a.extend({},d.settings,c||b,d.data_options(e))),f&&d.events(this)};return g(this.scope).is("["+this.attr_name()+"]")?e.call(this.scope):g("["+this.attr_name()+"]",this.scope).each(e),"string"==typeof b?this[b].call(this,c):void 0},k=function(a,b){function c(){b(a[0])}function d(){if(this.one("load",c),/MSIE (\d+\.\d+);/.test(navigator.userAgent)){var a=this.attr("src"),b=a.match(/\?/)?"&":"?";b+="random="+(new Date).getTime(),this.attr("src",a+b)}}return a.attr("src")?void(a[0].complete||4===a[0].readyState?c():d.call(a)):void c()};/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */ +b.matchMedia||(b.matchMedia=function(){var a=b.styleMedia||b.media;if(!a){var d=c.createElement("style"),e=c.getElementsByTagName("script")[0],f=null;d.type="text/css",d.id="matchmediajs-test",e.parentNode.insertBefore(d,e),f="getComputedStyle"in b&&b.getComputedStyle(d,null)||d.currentStyle,a={matchMedium:function(a){var b="@media "+a+"{ #matchmediajs-test { width: 1px; } }";return d.styleSheet?d.styleSheet.cssText=b:d.textContent=b,"1px"===f.width}}}return function(b){return{matches:a.matchMedium(b||"all"),media:b||"all"}}}()),function(a){function c(){d&&(g(c),i&&a.fx.tick())}for(var d,e=0,f=["webkit","moz"],g=b.requestAnimationFrame,h=b.cancelAnimationFrame,i="undefined"!=typeof a.fx;e
'+e+"
",viewing:g.templates.viewing},i=''+h.viewing+h.grid+"
',tip:'
',wrapper:'',button:'',prev_button:'',modal:'',expose:'',expose_cover:''},expose_add_class:""},init:function(b,c,d){Foundation.inherit(this,"throttle random_str"),this.settings=this.settings||a.extend({},this.defaults,d||c),this.bindings(c,d)},go_next:function(){this.settings.$li.next().length<1?this.end():this.settings.timer>0?(clearTimeout(this.settings.automate),this.hide(),this.show(),this.startTimer()):(this.hide(),this.show())},go_prev:function(){this.settings.$li.prev().length<1||(this.settings.timer>0?(clearTimeout(this.settings.automate),this.hide(),this.show(null,!0),this.startTimer()):(this.hide(),this.show(null,!0)))},events:function(){var c=this;a(this.scope).off(".joyride").on("click.fndtn.joyride",".joyride-next-tip, .joyride-modal-bg",function(a){a.preventDefault(),this.go_next()}.bind(this)).on("click.fndtn.joyride",".joyride-prev-tip",function(a){a.preventDefault(),this.go_prev()}.bind(this)).on("click.fndtn.joyride",".joyride-close-tip",function(a){a.preventDefault(),this.end(this.settings.abort_on_close)}.bind(this)).on("keyup.fndtn.joyride",function(a){if(this.settings.keyboard&&this.settings.riding)switch(a.which){case 39:a.preventDefault(),this.go_next();break;case 37:a.preventDefault(),this.go_prev();break;case 27:a.preventDefault(),this.end(this.settings.abort_on_close)}}.bind(this)),a(b).off(".joyride").on("resize.fndtn.joyride",c.throttle(function(){if(a("["+c.attr_name()+"]").length>0&&c.settings.$next_tip&&c.settings.riding){if(c.settings.exposed.length>0){var b=a(c.settings.exposed);b.each(function(){var b=a(this);c.un_expose(b),c.expose(b)})}c.is_phone()?c.pos_phone():c.pos_default(!1)}},100))},start:function(){var b=this,c=a("["+this.attr_name()+"]",this.scope),d=["timer","scrollSpeed","startOffset","tipAnimationFadeSpeed","cookieExpires"],e=d.length;!c.length>0||(this.settings.init||this.events(),this.settings=c.data(this.attr_name(!0)+"-init"),this.settings.$content_el=c,this.settings.$body=a(this.settings.tip_container),this.settings.body_offset=a(this.settings.tip_container).position(),this.settings.$tip_content=this.settings.$content_el.find("> li"),this.settings.paused=!1,this.settings.attempts=0,this.settings.riding=!0,"function"!=typeof a.cookie&&(this.settings.cookie_monster=!1),(!this.settings.cookie_monster||this.settings.cookie_monster&&!a.cookie(this.settings.cookie_name))&&(this.settings.$tip_content.each(function(c){var f=a(this);this.settings=a.extend({},b.defaults,b.data_options(f));for(var g=e;g--;)b.settings[d[g]]=parseInt(b.settings[d[g]],10);b.create({$li:f,index:c})}),!this.settings.start_timer_on_click&&this.settings.timer>0?(this.show("init"),this.startTimer()):this.show("init")))},resume:function(){this.set_li(),this.show()},tip_template:function(b){var c,d;return b.tip_class=b.tip_class||"",c=a(this.settings.template.tip).addClass(b.tip_class),d=a.trim(a(b.li).html())+this.prev_button_text(b.prev_button_text,b.index)+this.button_text(b.button_text)+this.settings.template.link+this.timer_instance(b.index),c.append(a(this.settings.template.wrapper)),c.first().attr(this.add_namespace("data-index"),b.index),a(".joyride-content-wrapper",c).append(d),c[0]},timer_instance:function(b){var c;return c=0===b&&this.settings.start_timer_on_click&&this.settings.timer>0||0===this.settings.timer?"":a(this.settings.template.timer)[0].outerHTML},button_text:function(b){return this.settings.tip_settings.next_button?(b=a.trim(b)||"Next",b=a(this.settings.template.button).append(b)[0].outerHTML):b="",b},prev_button_text:function(b,c){return this.settings.tip_settings.prev_button?(b=a.trim(b)||"Previous",b=0==c?a(this.settings.template.prev_button).append(b).addClass("disabled")[0].outerHTML:a(this.settings.template.prev_button).append(b)[0].outerHTML):b="",b},create:function(b){this.settings.tip_settings=a.extend({},this.settings,this.data_options(b.$li));var c=b.$li.attr(this.add_namespace("data-button"))||b.$li.attr(this.add_namespace("data-text")),d=b.$li.attr(this.add_namespace("data-button-prev"))||b.$li.attr(this.add_namespace("data-prev-text")),e=b.$li.attr("class"),f=a(this.tip_template({tip_class:e,index:b.index,button_text:c,prev_button_text:d,li:b.$li}));a(this.settings.tip_container).append(f)},show:function(b,c){var e=null;if(this.settings.$li===d||-1===a.inArray(this.settings.$li.index(),this.settings.pause_after))if(this.settings.paused?this.settings.paused=!1:this.set_li(b,c),this.settings.attempts=0,this.settings.$li.length&&this.settings.$target.length>0){if(b&&(this.settings.pre_ride_callback(this.settings.$li.index(),this.settings.$next_tip),this.settings.modal&&this.show_modal()),this.settings.pre_step_callback(this.settings.$li.index(),this.settings.$next_tip),this.settings.modal&&this.settings.expose&&this.expose(),this.settings.tip_settings=a.extend({},this.settings,this.data_options(this.settings.$li)),this.settings.timer=parseInt(this.settings.timer,10),this.settings.tip_settings.tip_location_pattern=this.settings.tip_location_patterns[this.settings.tip_settings.tip_location],!/body/i.test(this.settings.$target.selector)){var f=a(".joyride-modal-bg");/pop/i.test(this.settings.tipAnimation)?f.hide():f.fadeOut(this.settings.tipAnimationFadeSpeed),this.scroll_to()}this.is_phone()?this.pos_phone(!0):this.pos_default(!0),e=this.settings.$next_tip.find(".joyride-timer-indicator"),/pop/i.test(this.settings.tip_animation)?(e.width(0),this.settings.timer>0?(this.settings.$next_tip.show(),setTimeout(function(){e.animate({width:e.parent().width()},this.settings.timer,"linear")}.bind(this),this.settings.tip_animation_fade_speed)):this.settings.$next_tip.show()):/fade/i.test(this.settings.tip_animation)&&(e.width(0),this.settings.timer>0?(this.settings.$next_tip.fadeIn(this.settings.tip_animation_fade_speed).show(),setTimeout(function(){e.animate({width:e.parent().width()},this.settings.timer,"linear")}.bind(this),this.settings.tip_animation_fade_speed)):this.settings.$next_tip.fadeIn(this.settings.tip_animation_fade_speed)),this.settings.$current_tip=this.settings.$next_tip}else this.settings.$li&&this.settings.$target.length<1?this.show(b,c):this.end();else this.settings.paused=!0},is_phone:function(){return matchMedia(Foundation.media_queries.small).matches&&!matchMedia(Foundation.media_queries.medium).matches},hide:function(){this.settings.modal&&this.settings.expose&&this.un_expose(),this.settings.modal||a(".joyride-modal-bg").hide(),this.settings.$current_tip.css("visibility","hidden"),setTimeout(a.proxy(function(){this.hide(),this.css("visibility","visible")},this.settings.$current_tip),0),this.settings.post_step_callback(this.settings.$li.index(),this.settings.$current_tip)},set_li:function(a,b){a?(this.settings.$li=this.settings.$tip_content.eq(this.settings.start_offset),this.set_next_tip(),this.settings.$current_tip=this.settings.$next_tip):(b?this.settings.$li=this.settings.$li.prev():this.settings.$li=this.settings.$li.next(),this.set_next_tip()),this.set_target()},set_next_tip:function(){this.settings.$next_tip=a(".joyride-tip-guide").eq(this.settings.$li.index()),this.settings.$next_tip.data("closed","")},set_target:function(){var b=this.settings.$li.attr(this.add_namespace("data-class")),d=this.settings.$li.attr(this.add_namespace("data-id")),e=function(){return d?a(c.getElementById(d)):b?a("."+b).first():a("body")};this.settings.$target=e()},scroll_to:function(){var c,d;c=a(b).height()/2,d=Math.ceil(this.settings.$target.offset().top-c+this.settings.$next_tip.outerHeight()),0!=d&&a("html, body").stop().animate({scrollTop:d},this.settings.scroll_speed,"swing")},paused:function(){return-1===a.inArray(this.settings.$li.index()+1,this.settings.pause_after)},restart:function(){this.hide(),this.settings.$li=d,this.show("init")},pos_default:function(a){var b=this.settings.$next_tip.find(".joyride-nub"),c=Math.ceil(b.outerWidth()/2),d=Math.ceil(b.outerHeight()/2),e=a||!1;if(e&&(this.settings.$next_tip.css("visibility","hidden"),this.settings.$next_tip.show()),/body/i.test(this.settings.$target.selector))this.settings.$li.length&&this.pos_modal(b);else{var f=this.settings.tip_settings.tipAdjustmentY?parseInt(this.settings.tip_settings.tipAdjustmentY):0,g=this.settings.tip_settings.tipAdjustmentX?parseInt(this.settings.tip_settings.tipAdjustmentX):0;this.bottom()?(this.settings.$next_tip.css(this.rtl?{top:this.settings.$target.offset().top+d+this.settings.$target.outerHeight()+f,left:this.settings.$target.offset().left+this.settings.$target.outerWidth()-this.settings.$next_tip.outerWidth()+g}:{top:this.settings.$target.offset().top+d+this.settings.$target.outerHeight()+f,left:this.settings.$target.offset().left+g}),this.nub_position(b,this.settings.tip_settings.nub_position,"top")):this.top()?(this.settings.$next_tip.css(this.rtl?{top:this.settings.$target.offset().top-this.settings.$next_tip.outerHeight()-d+f,left:this.settings.$target.offset().left+this.settings.$target.outerWidth()-this.settings.$next_tip.outerWidth()}:{top:this.settings.$target.offset().top-this.settings.$next_tip.outerHeight()-d+f,left:this.settings.$target.offset().left+g}),this.nub_position(b,this.settings.tip_settings.nub_position,"bottom")):this.right()?(this.settings.$next_tip.css({top:this.settings.$target.offset().top+f,left:this.settings.$target.outerWidth()+this.settings.$target.offset().left+c+g}),this.nub_position(b,this.settings.tip_settings.nub_position,"left")):this.left()&&(this.settings.$next_tip.css({top:this.settings.$target.offset().top+f,left:this.settings.$target.offset().left-this.settings.$next_tip.outerWidth()-c+g}),this.nub_position(b,this.settings.tip_settings.nub_position,"right")),!this.visible(this.corners(this.settings.$next_tip))&&this.settings.attempts
").addClass(f.timer_container_class),m.append(""),m.append(a("
").addClass(f.timer_progress_class)),m.addClass(f.timer_paused_class),j.append(m)),f.slide_number&&(k=a("
").addClass(f.slide_number_class),k.append(" "+f.slide_number_text+" "),j.append(k)),f.bullets&&(l=a("
- ").addClass(f.bullets_container_class),j.append(l),l.wrap(''),p.slides().each(function(b,c){var d=a("
- ").attr("data-orbit-slide",b).on("click",p.link_bullet);l.append(d)}))},p._goto=function(b,c){if(b===r)return!1;"object"==typeof o&&o.restart();var d=p.slides(),e="next";if(s=!0,r>b&&(e="prev"),b>=d.length){if(!f.circular)return!1;b=0}else if(0>b){if(!f.circular)return!1;b=d.length-1}var g=a(d.get(r)),h=a(d.get(b));g.css("zIndex",2),g.removeClass(f.active_slide_class),h.css("zIndex",4).addClass(f.active_slide_class),q.trigger("before-slide-change.fndtn.orbit"),f.before_slide_change(),p.update_active_link(b);var i=function(){var a=function(){r=b,s=!1,c===!0&&(o=p.create_timer(),o.start()),p.update_slide_number(r),q.trigger("after-slide-change.fndtn.orbit",[{slide_number:r,total_slides:d.length}]),f.after_slide_change(r,d.length)};q.outerHeight()!=h.outerHeight()&&f.variable_height?q.animate({height:h.outerHeight()},250,"linear",a):a()};if(1===d.length)return i(),!1;var j=function(){"next"===e&&n.next(g,h,i),"prev"===e&&n.prev(g,h,i)};h.outerHeight()>q.outerHeight()&&f.variable_height?q.animate({height:h.outerHeight()},250,"linear",j):j()},p.next=function(a){a.stopImmediatePropagation(),a.preventDefault(),p._goto(r+1)},p.prev=function(a){a.stopImmediatePropagation(),a.preventDefault(),p._goto(r-1)},p.link_custom=function(b){b.preventDefault();var c=a(this).attr("data-orbit-link");if("string"==typeof c&&""!=(c=a.trim(c))){var d=j.find("[data-orbit-slide="+c+"]");-1!=d.index()&&p._goto(d.index())}},p.link_bullet=function(b){var c=a(this).attr("data-orbit-slide");if("string"==typeof c&&""!=(c=a.trim(c)))if(isNaN(parseInt(c))){var d=j.find("[data-orbit-slide="+c+"]");-1!=d.index()&&p._goto(d.index()+1)}else p._goto(parseInt(c))},p.timer_callback=function(){p._goto(r+1,!0)},p.compute_dimensions=function(){var b=a(p.slides().get(r)),c=b.outerHeight();f.variable_height||p.slides().each(function(){a(this).outerHeight()>c&&(c=a(this).outerHeight())}),q.height(c)},p.create_timer=function(){var a=new g(j.find("."+f.timer_container_class),f,p.timer_callback);return a},p.stop_timer=function(){"object"==typeof o&&o.stop()},p.toggle_timer=function(){var a=j.find("."+f.timer_container_class);a.hasClass(f.timer_paused_class)?("undefined"==typeof o&&(o=p.create_timer()),o.start()):"object"==typeof o&&o.stop()},p.init=function(){p.build_markup(),f.timer&&(o=p.create_timer(),Foundation.utils.image_loaded(this.slides().children("img"),o.start)),n=new i(f,q),"slide"===f.animation&&(n=new h(f,q)),j.on("click","."+f.next_class,p.next),j.on("click","."+f.prev_class,p.prev),f.next_on_click&&j.on("click","."+f.slides_container_class+" [data-orbit-slide]",p.link_bullet),j.on("click",p.toggle_timer),f.swipe&&j.on("touchstart.fndtn.orbit",function(a){a.touches||(a=a.originalEvent);var b={start_page_x:a.touches[0].pageX,start_page_y:a.touches[0].pageY,start_time:(new Date).getTime(),delta_x:0,is_scrolling:d};j.data("swipe-transition",b),a.stopPropagation()}).on("touchmove.fndtn.orbit",function(a){if(a.touches||(a=a.originalEvent),!(a.touches.length>1||a.scale&&1!==a.scale)){var b=j.data("swipe-transition");if("undefined"==typeof b&&(b={}),b.delta_x=a.touches[0].pageX-b.start_page_x,"undefined"==typeof b.is_scrolling&&(b.is_scrolling=!!(b.is_scrolling||Math.abs(b.delta_x)
'),a("h5>a",b).html(1==d.custom_back_text?d.back_text:"« "+e.html()),f.prepend(b))}),e.appendTo(b),this.sticky(),this.assembled(b)},assembled:function(b){b.data(this.attr_name(!0),a.extend({},b.data(this.attr_name(!0)),{assembled:!0}))},height:function(b){var c=0,d=this;return a("> li",b).each(function(){c+=d.S(this).outerHeight(!0)}),c},sticky:function(){var a=this;this.S(b).on("scroll",function(){a.update_sticky_positioning()})},update_sticky_positioning:function(){var a="."+this.settings.sticky_class,c=this.S(b),d=this;if(d.settings.sticky_topbar&&d.is_sticky(this.settings.sticky_topbar,this.settings.sticky_topbar.parent(),this.settings)){var e=this.settings.sticky_topbar.data("stickyoffset")+this.settings.start_offset;d.S(a).hasClass("expanded")||(c.scrollTop()>e?d.S(a).hasClass("fixed")||(d.S(a).addClass("fixed"),d.S("body").addClass("f-topbar-fixed")):c.scrollTop()<=e&&d.S(a).hasClass("fixed")&&(d.S(a).removeClass("fixed"),d.S("body").removeClass("f-topbar-fixed")))}},off:function(){this.S(this.scope).off(".fndtn.topbar"),this.S(b).off(".fndtn.topbar")},reflow:function(){}}}(jQuery,window,window.document); \ No newline at end of file diff --git a/assets/js/vendor/modernizr.js b/assets/js/vendor/modernizr.js index 78c502a..04508b5 100644 --- a/assets/js/vendor/modernizr.js +++ b/assets/js/vendor/modernizr.js @@ -5,4 +5,4 @@ * Copyright (c) Faruk Ates, Paul Irish, Alex Sexton * Available under the BSD and MIT licenses: www.modernizr.com/license/ */ -window.Modernizr=function(a,b,c){function d(a){t.cssText=a}function e(a,b){return d(x.join(a+";")+(b||""))}function f(a,b){return typeof a===b}function g(a,b){return!!~(""+a).indexOf(b)}function h(a,b){for(var d in a){var e=a[d];if(!g(e,"-")&&t[e]!==c)return"pfx"==b?e:!0}return!1}function i(a,b,d){for(var e in a){var g=b[a[e]];if(g!==c)return d===!1?a[e]:f(g,"function")?g.bind(d||b):g}return!1}function j(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+z.join(d+" ")+d).split(" ");return f(b,"string")||f(b,"undefined")?h(e,b):(e=(a+" "+A.join(d+" ")+d).split(" "),i(e,b,c))}function k(){o.input=function(c){for(var d=0,e=c.length;e>d;d++)E[c[d]]=!!(c[d]in u);return E.list&&(E.list=!(!b.createElement("datalist")||!a.HTMLDataListElement)),E}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),o.inputtypes=function(a){for(var d,e,f,g=0,h=a.length;h>g;g++)u.setAttribute("type",e=a[g]),d="text"!==u.type,d&&(u.value=v,u.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(e)&&u.style.WebkitAppearance!==c?(q.appendChild(u),f=b.defaultView,d=f.getComputedStyle&&"textfield"!==f.getComputedStyle(u,null).WebkitAppearance&&0!==u.offsetHeight,q.removeChild(u)):/^(search|tel)$/.test(e)||(d=/^(url|email)$/.test(e)?u.checkValidity&&u.checkValidity()===!1:u.value!=v)),D[a[g]]=!!d;return D}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var l,m,n="2.8.3",o={},p=!0,q=b.documentElement,r="modernizr",s=b.createElement(r),t=s.style,u=b.createElement("input"),v=":)",w={}.toString,x=" -webkit- -moz- -o- -ms- ".split(" "),y="Webkit Moz O ms",z=y.split(" "),A=y.toLowerCase().split(" "),B={svg:"http://www.w3.org/2000/svg"},C={},D={},E={},F=[],G=F.slice,H=function(a,c,d,e){var f,g,h,i,j=b.createElement("div"),k=b.body,l=k||b.createElement("body");if(parseInt(d,10))for(;d--;)h=b.createElement("div"),h.id=e?e[d]:r+(d+1),j.appendChild(h);return f=["",'"].join(""),j.id=r,(k?j:l).innerHTML+=f,l.appendChild(j),k||(l.style.background="",l.style.overflow="hidden",i=q.style.overflow,q.style.overflow="hidden",q.appendChild(l)),g=c(j,a),k?j.parentNode.removeChild(j):(l.parentNode.removeChild(l),q.style.overflow=i),!!g},I=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b)&&c(b).matches||!1;var d;return H("@media "+b+" { #"+r+" { position: absolute; } }",function(b){d="absolute"==(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).position}),d},J=function(){function a(a,e){e=e||b.createElement(d[a]||"div"),a="on"+a;var g=a in e;return g||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(a,""),g=f(e[a],"function"),f(e[a],"undefined")||(e[a]=c),e.removeAttribute(a))),e=null,g}var d={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return a}(),K={}.hasOwnProperty;m=f(K,"undefined")||f(K.call,"undefined")?function(a,b){return b in a&&f(a.constructor.prototype[b],"undefined")}:function(a,b){return K.call(a,b)},Function.prototype.bind||(Function.prototype.bind=function(a){var b=this;if("function"!=typeof b)throw new TypeError;var c=G.call(arguments,1),d=function(){if(this instanceof d){var e=function(){};e.prototype=b.prototype;var f=new e,g=b.apply(f,c.concat(G.call(arguments)));return Object(g)===g?g:f}return b.apply(a,c.concat(G.call(arguments)))};return d}),C.flexbox=function(){return j("flexWrap")},C.flexboxlegacy=function(){return j("boxDirection")},C.canvas=function(){var a=b.createElement("canvas");return!(!a.getContext||!a.getContext("2d"))},C.canvastext=function(){return!(!o.canvas||!f(b.createElement("canvas").getContext("2d").fillText,"function"))},C.webgl=function(){return!!a.WebGLRenderingContext},C.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:H(["@media (",x.join("touch-enabled),("),r,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=9===a.offsetTop}),c},C.geolocation=function(){return"geolocation"in navigator},C.postmessage=function(){return!!a.postMessage},C.websqldatabase=function(){return!!a.openDatabase},C.indexedDB=function(){return!!j("indexedDB",a)},C.hashchange=function(){return J("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},C.history=function(){return!(!a.history||!history.pushState)},C.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},C.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},C.rgba=function(){return d("background-color:rgba(150,255,150,.5)"),g(t.backgroundColor,"rgba")},C.hsla=function(){return d("background-color:hsla(120,40%,100%,.5)"),g(t.backgroundColor,"rgba")||g(t.backgroundColor,"hsla")},C.multiplebgs=function(){return d("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(t.background)},C.backgroundsize=function(){return j("backgroundSize")},C.borderimage=function(){return j("borderImage")},C.borderradius=function(){return j("borderRadius")},C.boxshadow=function(){return j("boxShadow")},C.textshadow=function(){return""===b.createElement("div").style.textShadow},C.opacity=function(){return e("opacity:.55"),/^0.55$/.test(t.opacity)},C.cssanimations=function(){return j("animationName")},C.csscolumns=function(){return j("columnCount")},C.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return d((a+"-webkit- ".split(" ").join(b+a)+x.join(c+a)).slice(0,-a.length)),g(t.backgroundImage,"gradient")},C.cssreflections=function(){return j("boxReflect")},C.csstransforms=function(){return!!j("transform")},C.csstransforms3d=function(){var a=!!j("perspective");return a&&"webkitPerspective"in q.style&&H("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b){a=9===b.offsetLeft&&3===b.offsetHeight}),a},C.csstransitions=function(){return j("transition")},C.fontface=function(){var a;return H('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&0===g.indexOf(d.split(" ")[0])}),a},C.generatedcontent=function(){var a;return H(["#",r,"{font:0/0 a}#",r,':after{content:"',v,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},C.video=function(){var a=b.createElement("video"),c=!1;try{(c=!!a.canPlayType)&&(c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,""))}catch(d){}return c},C.audio=function(){var a=b.createElement("audio"),c=!1;try{(c=!!a.canPlayType)&&(c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,""))}catch(d){}return c},C.localstorage=function(){try{return localStorage.setItem(r,r),localStorage.removeItem(r),!0}catch(a){return!1}},C.sessionstorage=function(){try{return sessionStorage.setItem(r,r),sessionStorage.removeItem(r),!0}catch(a){return!1}},C.webworkers=function(){return!!a.Worker},C.applicationcache=function(){return!!a.applicationCache},C.svg=function(){return!!b.createElementNS&&!!b.createElementNS(B.svg,"svg").createSVGRect},C.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==B.svg},C.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(w.call(b.createElementNS(B.svg,"animate")))},C.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(w.call(b.createElementNS(B.svg,"clipPath")))};for(var L in C)m(C,L)&&(l=L.toLowerCase(),o[l]=C[L](),F.push((o[l]?"":"no-")+l));return o.input||k(),o.addTest=function(a,b){if("object"==typeof a)for(var d in a)m(a,d)&&o.addTest(d,a[d]);else{if(a=a.toLowerCase(),o[a]!==c)return o;b="function"==typeof b?b():b,"undefined"!=typeof p&&p&&(q.className+=" "+(b?"":"no-")+a),o[a]=b}return o},d(""),s=u=null,function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=s.elements;return"string"==typeof a?a.split(" "):a}function e(a){var b=r[a[p]];return b||(b={},q++,a[p]=q,r[q]=b),b}function f(a,c,d){if(c||(c=b),k)return c.createElement(a);d||(d=e(c));var f;return f=d.cache[a]?d.cache[a].cloneNode():o.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!f.canHaveChildren||n.test(a)||f.tagUrn?f:d.frag.appendChild(f)}function g(a,c){if(a||(a=b),k)return a.createDocumentFragment();c=c||e(a);for(var f=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)f.createElement(h[g]);return f}function h(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return s.shivMethods?f(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(s,b.frag)}function i(a){a||(a=b);var d=e(a);return!s.shivCSS||j||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),k||h(a,d),a}var j,k,l="3.7.0",m=a.html5||{},n=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,o=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,p="_html5shiv",q=0,r={};!function(){try{var a=b.createElement("a");a.innerHTML="
",j="hidden"in a,k=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){j=!0,k=!0}}();var s={elements:m.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:l,shivCSS:m.shivCSS!==!1,supportsUnknownElements:k,shivMethods:m.shivMethods!==!1,type:"default",shivDocument:i,createElement:f,createDocumentFragment:g};a.html5=s,i(b)}(this,b),o._version=n,o._prefixes=x,o._domPrefixes=A,o._cssomPrefixes=z,o.mq=I,o.hasEvent=J,o.testProp=function(a){return h([a])},o.testAllProps=j,o.testStyles=H,o.prefixed=function(a,b,c){return b?j(a,b,c):j(a,"pfx")},q.className=q.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(p?" js "+F.join(" "):""),o}(this,this.document); \ No newline at end of file +window.Modernizr=function(a,b,c){function d(a){t.cssText=a}function e(a,b){return d(x.join(a+";")+(b||""))}function f(a,b){return typeof a===b}function g(a,b){return!!~(""+a).indexOf(b)}function h(a,b){for(var d in a){var e=a[d];if(!g(e,"-")&&t[e]!==c)return"pfx"==b?e:!0}return!1}function i(a,b,d){for(var e in a){var g=b[a[e]];if(g!==c)return d===!1?a[e]:f(g,"function")?g.bind(d||b):g}return!1}function j(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+z.join(d+" ")+d).split(" ");return f(b,"string")||f(b,"undefined")?h(e,b):(e=(a+" "+A.join(d+" ")+d).split(" "),i(e,b,c))}function k(){o.input=function(c){for(var d=0,e=c.length;e>d;d++)E[c[d]]=!!(c[d]in u);return E.list&&(E.list=!(!b.createElement("datalist")||!a.HTMLDataListElement)),E}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),o.inputtypes=function(a){for(var d,e,f,g=0,h=a.length;h>g;g++)u.setAttribute("type",e=a[g]),d="text"!==u.type,d&&(u.value=v,u.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(e)&&u.style.WebkitAppearance!==c?(q.appendChild(u),f=b.defaultView,d=f.getComputedStyle&&"textfield"!==f.getComputedStyle(u,null).WebkitAppearance&&0!==u.offsetHeight,q.removeChild(u)):/^(search|tel)$/.test(e)||(d=/^(url|email)$/.test(e)?u.checkValidity&&u.checkValidity()===!1:u.value!=v)),D[a[g]]=!!d;return D}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var l,m,n="2.8.3",o={},p=!0,q=b.documentElement,r="modernizr",s=b.createElement(r),t=s.style,u=b.createElement("input"),v=":)",w={}.toString,x=" -webkit- -moz- -o- -ms- ".split(" "),y="Webkit Moz O ms",z=y.split(" "),A=y.toLowerCase().split(" "),B={svg:"http://www.w3.org/2000/svg"},C={},D={},E={},F=[],G=F.slice,H=function(a,c,d,e){var f,g,h,i,j=b.createElement("div"),k=b.body,l=k||b.createElement("body");if(parseInt(d,10))for(;d--;)h=b.createElement("div"),h.id=e?e[d]:r+(d+1),j.appendChild(h);return f=["",'"].join(""),j.id=r,(k?j:l).innerHTML+=f,l.appendChild(j),k||(l.style.background="",l.style.overflow="hidden",i=q.style.overflow,q.style.overflow="hidden",q.appendChild(l)),g=c(j,a),k?j.parentNode.removeChild(j):(l.parentNode.removeChild(l),q.style.overflow=i),!!g},I=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b)&&c(b).matches||!1;var d;return H("@media "+b+" { #"+r+" { position: absolute; } }",function(b){d="absolute"==(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).position}),d},J=function(){function a(a,e){e=e||b.createElement(d[a]||"div"),a="on"+a;var g=a in e;return g||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(a,""),g=f(e[a],"function"),f(e[a],"undefined")||(e[a]=c),e.removeAttribute(a))),e=null,g}var d={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return a}(),K={}.hasOwnProperty;m=f(K,"undefined")||f(K.call,"undefined")?function(a,b){return b in a&&f(a.constructor.prototype[b],"undefined")}:function(a,b){return K.call(a,b)},Function.prototype.bind||(Function.prototype.bind=function(a){var b=this;if("function"!=typeof b)throw new TypeError;var c=G.call(arguments,1),d=function(){if(this instanceof d){var e=function(){};e.prototype=b.prototype;var f=new e,g=b.apply(f,c.concat(G.call(arguments)));return Object(g)===g?g:f}return b.apply(a,c.concat(G.call(arguments)))};return d}),C.flexbox=function(){return j("flexWrap")},C.flexboxlegacy=function(){return j("boxDirection")},C.canvas=function(){var a=b.createElement("canvas");return!(!a.getContext||!a.getContext("2d"))},C.canvastext=function(){return!(!o.canvas||!f(b.createElement("canvas").getContext("2d").fillText,"function"))},C.webgl=function(){return!!a.WebGLRenderingContext},C.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:H(["@media (",x.join("touch-enabled),("),r,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=9===a.offsetTop}),c},C.geolocation=function(){return"geolocation"in navigator},C.postmessage=function(){return!!a.postMessage},C.websqldatabase=function(){return!!a.openDatabase},C.indexedDB=function(){return!!j("indexedDB",a)},C.hashchange=function(){return J("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},C.history=function(){return!(!a.history||!history.pushState)},C.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},C.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},C.rgba=function(){return d("background-color:rgba(150,255,150,.5)"),g(t.backgroundColor,"rgba")},C.hsla=function(){return d("background-color:hsla(120,40%,100%,.5)"),g(t.backgroundColor,"rgba")||g(t.backgroundColor,"hsla")},C.multiplebgs=function(){return d("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(t.background)},C.backgroundsize=function(){return j("backgroundSize")},C.borderimage=function(){return j("borderImage")},C.borderradius=function(){return j("borderRadius")},C.boxshadow=function(){return j("boxShadow")},C.textshadow=function(){return""===b.createElement("div").style.textShadow},C.opacity=function(){return e("opacity:.55"),/^0.55$/.test(t.opacity)},C.cssanimations=function(){return j("animationName")},C.csscolumns=function(){return j("columnCount")},C.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return d((a+"-webkit- ".split(" ").join(b+a)+x.join(c+a)).slice(0,-a.length)),g(t.backgroundImage,"gradient")},C.cssreflections=function(){return j("boxReflect")},C.csstransforms=function(){return!!j("transform")},C.csstransforms3d=function(){var a=!!j("perspective");return a&&"webkitPerspective"in q.style&&H("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=9===b.offsetLeft&&3===b.offsetHeight}),a},C.csstransitions=function(){return j("transition")},C.fontface=function(){var a;return H('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&0===g.indexOf(d.split(" ")[0])}),a},C.generatedcontent=function(){var a;return H(["#",r,"{font:0/0 a}#",r,':after{content:"',v,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},C.video=function(){var a=b.createElement("video"),c=!1;try{(c=!!a.canPlayType)&&(c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,""))}catch(d){}return c},C.audio=function(){var a=b.createElement("audio"),c=!1;try{(c=!!a.canPlayType)&&(c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,""))}catch(d){}return c},C.localstorage=function(){try{return localStorage.setItem(r,r),localStorage.removeItem(r),!0}catch(a){return!1}},C.sessionstorage=function(){try{return sessionStorage.setItem(r,r),sessionStorage.removeItem(r),!0}catch(a){return!1}},C.webworkers=function(){return!!a.Worker},C.applicationcache=function(){return!!a.applicationCache},C.svg=function(){return!!b.createElementNS&&!!b.createElementNS(B.svg,"svg").createSVGRect},C.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==B.svg},C.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(w.call(b.createElementNS(B.svg,"animate")))},C.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(w.call(b.createElementNS(B.svg,"clipPath")))};for(var L in C)m(C,L)&&(l=L.toLowerCase(),o[l]=C[L](),F.push((o[l]?"":"no-")+l));return o.input||k(),o.addTest=function(a,b){if("object"==typeof a)for(var d in a)m(a,d)&&o.addTest(d,a[d]);else{if(a=a.toLowerCase(),o[a]!==c)return o;b="function"==typeof b?b():b,"undefined"!=typeof p&&p&&(q.className+=" "+(b?"":"no-")+a),o[a]=b}return o},d(""),s=u=null,function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=s.elements;return"string"==typeof a?a.split(" "):a}function e(a){var b=r[a[p]];return b||(b={},q++,a[p]=q,r[q]=b),b}function f(a,c,d){if(c||(c=b),k)return c.createElement(a);d||(d=e(c));var f;return f=d.cache[a]?d.cache[a].cloneNode():o.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!f.canHaveChildren||n.test(a)||f.tagUrn?f:d.frag.appendChild(f)}function g(a,c){if(a||(a=b),k)return a.createDocumentFragment();c=c||e(a);for(var f=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)f.createElement(h[g]);return f}function h(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return s.shivMethods?f(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(s,b.frag)}function i(a){a||(a=b);var d=e(a);return!s.shivCSS||j||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),k||h(a,d),a}var j,k,l="3.7.0",m=a.html5||{},n=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,o=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,p="_html5shiv",q=0,r={};!function(){try{var a=b.createElement("a");a.innerHTML=" ",j="hidden"in a,k=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){j=!0,k=!0}}();var s={elements:m.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:l,shivCSS:m.shivCSS!==!1,supportsUnknownElements:k,shivMethods:m.shivMethods!==!1,type:"default",shivDocument:i,createElement:f,createDocumentFragment:g};a.html5=s,i(b)}(this,b),o._version=n,o._prefixes=x,o._domPrefixes=A,o._cssomPrefixes=z,o.mq=I,o.hasEvent=J,o.testProp=function(a){return h([a])},o.testAllProps=j,o.testStyles=H,o.prefixed=function(a,b,c){return b?j(a,b,c):j(a,"pfx")},q.className=q.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(p?" js "+F.join(" "):""),o}(this,this.document); \ No newline at end of file diff --git a/assets/scss/_foundation-settings.scss b/assets/scss/_foundation-settings.scss index acda4f6..7ea86a1 100644 --- a/assets/scss/_foundation-settings.scss +++ b/assets/scss/_foundation-settings.scss @@ -55,7 +55,7 @@ // $rem-base: 16px; // Allows the use of rem-calc() or lower-bound() in your settings -@import "foundation/functions"; +@import 'foundation/functions'; // The default font-size is set to 100% of the browser style sheet (usually 16px) // for compatibility with browser-based text zoom or user-set defaults. @@ -83,8 +83,6 @@ $include-html-global-classes: $include-html-classes; // $total-columns: 12; // $column-gutter: rem-calc(30); -// $last-child-float: $opposite-direction; - // c. Global // - - - - - - - - - - - - - - - - - - - - - - - - - @@ -153,11 +151,16 @@ $include-html-global-classes: $include-html-classes; // d. Media Query Ranges // - - - - - - - - - - - - - - - - - - - - - - - - - -// $small-range: (0em, 40em); -// $medium-range: (40.063em, 64em); -// $large-range: (64.063em, 90em); -// $xlarge-range: (90.063em, 120em); -// $xxlarge-range: (120.063em, 99999999em); +// $small-breakpoint: em-calc(640); +// $medium-breakpoint: em-calc(1024); +// $large-breakpoint: em-calc(1440); +// $xlarge-breakpoint: em-calc(1920); + +// $small-range: (0, $small-breakpoint); +// $medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint); +// $large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint); +// $xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint); +// $xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)); // $screen: "only screen"; @@ -179,6 +182,15 @@ $include-html-global-classes: $include-html-classes; // $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; // $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"; +// $retina: ( +// "#{$screen} and (-webkit-min-device-pixel-ratio: 2)", +// "#{$screen} and (min--moz-device-pixel-ratio: 2)", +// "#{$screen} and (-o-min-device-pixel-ratio: 2/1)", +// "#{$screen} and (min-device-pixel-ratio: 2)", +// "#{$screen} and (min-resolution: 192dpi)", +// "#{$screen} and (min-resolution: 2dppx)" +// ); + // Legacy // $small: $medium-up; // $medium: $medium-up; @@ -362,8 +374,8 @@ $include-html-global-classes: $include-html-classes; // $alert-close-top: 50%; // $alert-close-position: rem-calc(4); // $alert-close-font-size: rem-calc(22); -// $alert-close-opacity: 0.3; -// $alert-close-opacity-hover: 0.5; +// $alert-close-opacity: .3; +// $alert-close-opacity-hover: .5; // $alert-close-padding: 9px 6px 4px; // $alert-close-background: inherit; @@ -471,7 +483,7 @@ $include-html-global-classes: $include-html-classes; // $button-round: $global-rounded; // We use this to set default opacity and cursor for disabled buttons. -// $button-disabled-opacity: 0.7; +// $button-disabled-opacity: .7; // $button-disabled-cursor: $cursor-default-value; // 06. Button Groups @@ -504,7 +516,7 @@ $include-html-global-classes: $include-html-classes; // We use these to style captions // $clearing-caption-font-color: $iron; -// $clearing-caption-font-size: 0.875em; +// $clearing-caption-font-size: .875em; // $clearing-caption-padding: 10px 30px 20px; // We use these to make the image and carousel height and style @@ -645,7 +657,7 @@ $include-html-global-classes: $include-html-classes; // $input-disabled-bg: $gainsboro; // $input-disabled-cursor: $cursor-default-value; // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -// $input-include-glowing-effect: true; +// $input-include-glowing-effect: false; // We use these to style the fieldset border and spacing. // $fieldset-border-style: solid; @@ -682,9 +694,13 @@ $include-html-global-classes: $include-html-classes; // $input-error-message-font-color-alt: $oil; // We use this to style the glowing effect of inputs when focused -// $glowing-effect-fade-time: 0.45s; +// $glowing-effect-fade-time: .45s; // $glowing-effect-color: $input-focus-border-color; +// We use this to style the transition when inputs are focused and when the glowing effect is disabled. +// $input-transition-fade-time: 0.15s; +// $input-transition-fade-timing-function: linear; + // Select variables // $select-bg-color: $ghost; // $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%); @@ -708,7 +724,7 @@ $include-html-global-classes: $include-html-classes; // $icon-bar-item-padding: 1.25rem; // We use this to set default opacity and cursor for disabled icons. -// $icon-bar-disabled-opacity: 0.7; +// $icon-bar-disabled-opacity: .7; // 13. Inline Lists // - - - - - - - - - - - - - - - - - - - - - - - - - @@ -840,9 +856,11 @@ $include-html-global-classes: $include-html-classes; // Off Canvas Menu Variables // $off-canvas-width: rem-calc(250); // $off-canvas-bg: $oil; +// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%); +// $off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%); // Off Canvas Menu List Variables -// $off-canvas-label-padding: 0.3rem rem-calc(15); +// $off-canvas-label-padding: .3rem rem-calc(15); // $off-canvas-label-color: $aluminum; // $off-canvas-label-text-transform: uppercase; // $off-canvas-label-font-size: rem-calc(12); @@ -852,7 +870,7 @@ $include-html-global-classes: $include-html-classes; // $off-canvas-label-border-bottom: none; // $off-canvas-label-margin:0; // $off-canvas-link-padding: rem-calc(10, 15); -// $off-canvas-link-color: rgba($white, 0.7); +// $off-canvas-link-color: rgba($white, .7); // $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%); // $off-canvas-back-bg: #444; // $off-canvas-back-border-top: $off-canvas-label-border-top; @@ -879,9 +897,9 @@ $include-html-global-classes: $include-html-classes; // Off Canvas Back-Link Overlay // $off-canvas-overlay-transition: background 300ms ease; // $off-canvas-overlay-cursor: pointer; -// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5); -// $off-canvas-overlay-background: rgba($white, 0.2); -// $off-canvas-overlay-background-hover: rgba($white, 0.05); +// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, .5), 4px 0 4px rgba($black, .5); +// $off-canvas-overlay-background: rgba($white, .2); +// $off-canvas-overlay-background-hover: rgba($white, .05); // Transition Variables // $menu-slide: "transform 500ms ease"; @@ -893,7 +911,7 @@ $include-html-global-classes: $include-html-classes; // We use these to control the caption styles // $orbit-container-bg: none; -// $orbit-caption-bg: rgba(51,51,51, 0.8); +// $orbit-caption-bg: rgba(51,51,51, .8); // $orbit-caption-font-color: $white; // $orbit-caption-font-size: rem-calc(14); // $orbit-caption-position: "bottom"; // Supported values: "bottom", "under" @@ -971,10 +989,10 @@ $include-html-global-classes: $include-html-classes; // $panel-bg: scale-color($white, $lightness: -5%); // $panel-border-style: solid; // $panel-border-size: 1px; +// $callout-panel-bg: scale-color($primary-color, $lightness: 94%); // We use this % to control how much we darken things on hover -// $panel-function-factor: -11%; -// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor); +// $panel-border-color: scale-color($panel-bg, $lightness: -11%); // We use these to set default inner padding and bottom margin // $panel-margin-bottom: rem-calc(20); @@ -1070,7 +1088,7 @@ $include-html-global-classes: $include-html-classes; // $include-html-range-slider-classes: $include-html-classes; -// These variabels define the slider bar styles +// These variables define the slider bar styles // $range-slider-bar-width: 100%; // $range-slider-bar-height: rem-calc(16); @@ -1099,7 +1117,7 @@ $include-html-global-classes: $include-html-classes; // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%); // $range-slider-handle-cursor: pointer; -// $range-slider-disabled-opacity: 0.7; +// $range-slider-disabled-opacity: .7; // $range-slider-disabled-cursor: $cursor-disabled-value; // 25. Reveal @@ -1155,7 +1173,7 @@ $include-html-global-classes: $include-html-classes; // $side-nav-link-color: $primary-color; // $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%); // $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%); -// $side-nav-link-bg-hover: hsla(0, 0, 0, 0.025); +// $side-nav-link-bg-hover: hsla(0, 0, 0, .025); // $side-nav-link-margin: 0; // $side-nav-link-padding: rem-calc(7 14); // $side-nav-font-size: rem-calc(14); @@ -1183,6 +1201,7 @@ $include-html-global-classes: $include-html-classes; // We use these to control different shared styles for Split Buttons // $split-button-function-factor: 10%; // $split-button-pip-color: $white; +// $split-button-span-border-color: rgba(255,255,255,0.5); // $split-button-pip-color-alt: $oil; // $split-button-active-bg-tint: rgba(0,0,0,0.1); @@ -1401,7 +1420,7 @@ $include-html-global-classes: $include-html-classes; // $topbar-link-font-size: rem-calc(13); // $topbar-link-hover-lightness: -10%; // Darken by 10% // $topbar-link-bg: $topbar-bg; -// $topbar-link-bg-hover: $oil; +// $topbar-link-bg-hover: $jet; // $topbar-link-bg-color-hover: $charcoal; // $topbar-link-bg-active: $primary-color; // $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%); @@ -1410,7 +1429,7 @@ $include-html-global-classes: $include-html-classes; // $topbar-link-padding: ($topbar-height / 3); // $topbar-back-link-size: rem-calc(18); // $topbar-link-dropdown-padding: rem-calc(20); -// $topbar-button-font-size: 0.75rem; +// $topbar-button-font-size: .75rem; // $topbar-button-top: 7px; // Style the top bar dropdown elements @@ -1418,11 +1437,11 @@ $include-html-global-classes: $include-html-classes; // $topbar-dropdown-link-color: $white; // $topbar-dropdown-link-color-hover: $topbar-link-color-hover; // $topbar-dropdown-link-bg: $oil; -// $topbar-dropdown-link-bg-hover: $oil; +// $topbar-dropdown-link-bg-hover: $jet; // $topbar-dropdown-link-weight: $font-weight-normal; // $topbar-dropdown-toggle-size: 5px; // $topbar-dropdown-toggle-color: $white; -// $topbar-dropdown-toggle-alpha: 0.4; +// $topbar-dropdown-toggle-alpha: .4; // $topbar-dropdown-label-color: $monsoon; // $topbar-dropdown-label-text-transform: uppercase; @@ -1444,7 +1463,7 @@ $include-html-global-classes: $include-html-classes; // $topbar-transition-speed: 300ms; // Using rem-calc for the below breakpoint causes issues with top bar // $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout -// $topbar-media-query: $medium-up; +// $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})"; // Top-bar input styles // $topbar-input-height: rem-calc(28); diff --git a/assets/scss/_normalize.scss b/assets/scss/_normalize.scss index 458eea1..5e5e3c8 100644 --- a/assets/scss/_normalize.scss +++ b/assets/scss/_normalize.scss @@ -1,9 +1,9 @@ -/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. */ html { @@ -71,7 +71,7 @@ audio:not([controls]) { /** * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], @@ -91,7 +91,8 @@ a { } /** - * Improve readability when focused and also mouse hovered in all browsers. + * Improve readability of focused elements when they are also in an + * active/hover state. */ a:active, @@ -209,7 +210,6 @@ figure { */ hr { - -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } @@ -350,15 +350,12 @@ input[type="number"]::-webkit-outer-spin-button { /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome - * (include `-moz` to future-proof). + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; + box-sizing: content-box; /* 2 */ } /** diff --git a/assets/scss/foundation/_functions.scss b/assets/scss/foundation/_functions.scss index 9572a77..a63b920 100644 --- a/assets/scss/foundation/_functions.scss +++ b/assets/scss/foundation/_functions.scss @@ -8,6 +8,7 @@ $rem-base: 16px !default; // IMPORT ONCE // We use this to prevent styles from being loaded multiple times for components that rely on other components. $modules: () !default; + @mixin exports($name) { // Import from global scope $modules: $modules !global; @@ -26,11 +27,11 @@ $modules: () !default; // RANGES // We use these functions to define ranges for various things, like media queries. -@function lower-bound($range){ +@function lower-bound($range) { @if length($range) <= 0 { @return 0; } - @return nth($range,1); + @return nth($range, 1); } @function upper-bound($range) { @@ -50,45 +51,45 @@ $modules: () !default; @function text-inputs( $types: all, $selector: input ) { - $return: (); - - $all-text-input-types: - text - password - date - datetime - datetime-local - month - week - email - number - search - tel - time - url - color - textarea; - - @if $types == all { $types: $all-text-input-types; } - - @each $type in $types { - @if $type == textarea { - @if $selector == input { - $return: append($return, unquote('#{$type}'), comma) - } @else { - $return: append($return, unquote('#{$type}#{$selector}'), comma) - } - } @else { - $return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma) - } + $return: (); + + $all-text-input-types: + text + password + date + datetime + datetime-local + month + week + email + number + search + tel + time + url + color + textarea; + + @if $types == all { $types: $all-text-input-types; } + + @each $type in $types { + @if $type == textarea { + @if $selector == input { + $return: append($return, unquote('#{$type}'), comma) + } @else { + $return: append($return, unquote('#{$type}#{$selector}'), comma) + } + } @else { + $return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma) } + } @return $return; } // CONVERT TO REM -@function convert-to-rem($value, $base-value: $rem-base) { +@function convert-to-rem($value, $base-value: $rem-base) { $value: strip-unit($value) / strip-unit($base-value) * 1rem; @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0 @return $value; @@ -133,14 +134,23 @@ $modules: () !default; @return $remValues; } -// OLD EM CALC -// Deprecated: We'll drop support for this in 5.1.0, use rem-calc() -@function emCalc($values){ - @return rem-calc($values); + +@function em-calc($values) { + $remValues: rem-calc($values); + + $max: length($remValues); + + @if $max == 1 { @return strip-unit(nth($remValues, 1)) * 1em; } + + $emValues: (); + @for $i from 1 through $max { + $emValues: append($emValues, strip-unit(nth($remValues, $i)) * 1em); + } + @return $emValues; } -// OLD EM CALC -// Deprecated: We'll drop support for this in 5.1.0, use rem-calc() -@function em-calc($values){ - @return rem-calc($values); + +// Deprecated: OLD EM CALC +@function emCalc($values) { + @return em-calc($values); } diff --git a/assets/scss/foundation/components/_accordion.scss b/assets/scss/foundation/components/_accordion.scss index fb57509..de4a5ea 100644 --- a/assets/scss/foundation/components/_accordion.scss +++ b/assets/scss/foundation/components/_accordion.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -32,7 +32,7 @@ $accordion-content-active-bg-color: $white !default; margin-bottom: 0; } -// Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class, $font-color, $font-size, $font-family){ +// Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class, $font-color, $font-size, $font-family) { // @params $bg-color: [ color or string ]: Specify the background color for the navigation element // @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered // @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released. @@ -41,7 +41,7 @@ $accordion-content-active-bg-color: $white !default; // @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element // @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion -@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){ +@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ) { display: block; margin-bottom: 0 !important; @if type-of($active_class) != "string" { @@ -98,7 +98,7 @@ $accordion-content-active-bg-color: $white !default; // @params $bg [ color ]: Background color for the content when it's visible // @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible. -@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){ +@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active') { display: none; @if type-of($padding) != "number" { @warn "#{$padding} was read as a #{type-of($padding)}"; @@ -118,8 +118,8 @@ $accordion-content-active-bg-color: $white !default; } @else { &.#{$active_class} { - display: block; background: $bg; + display: block; } } } @@ -136,10 +136,10 @@ $accordion-content-active-bg-color: $white !default; > a { background: $accordion-navigation-bg-color; color: $accordion-navigation-font-color; - padding: $accordion-navigation-padding; display: block; font-family: $accordion-navigation-font-family; font-size: $accordion-navigation-font-size; + padding: $accordion-navigation-padding; &:hover { background: $accordion-navigation-hover-bg-color; } } @@ -147,8 +147,8 @@ $accordion-content-active-bg-color: $white !default; display: none; padding: $accordion-content-padding; &.active { - display: block; background: $accordion-content-active-bg-color; + display: block; } } } diff --git a/assets/scss/foundation/components/_alert-boxes.scss b/assets/scss/foundation/components/_alert-boxes.scss index 6d19279..c1d56d8 100644 --- a/assets/scss/foundation/components/_alert-boxes.scss +++ b/assets/scss/foundation/components/_alert-boxes.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // Alert Box Variables @@ -35,8 +35,8 @@ $alert-close-color: $oil !default; $alert-close-top: 50% !default; $alert-close-position: rem-calc(4) !default; $alert-close-font-size: rem-calc(22) !default; -$alert-close-opacity: 0.3 !default; -$alert-close-opacity-hover: 0.5 !default; +$alert-close-opacity: .3 !default; +$alert-close-opacity-hover: .5 !default; $alert-close-padding: 0 6px 4px !default; $alert-close-background: inherit !default; @@ -55,11 +55,11 @@ $alert-transition-ease: ease-out !default; border-style: $alert-border-style; border-width: $alert-border-width; display: block; + font-size: $alert-font-size; font-weight: $alert-font-weight; margin-bottom: $alert-bottom-margin; - position: relative; padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float; - font-size: $alert-font-size; + position: relative; @include single-transition(opacity, $alert-transition-speed, $alert-transition-ease) } @@ -83,16 +83,16 @@ $alert-transition-ease: ease-out !default; // We use this to create the close button. @mixin alert-close { + #{$opposite-direction}: $alert-close-position; + background: $alert-close-background; + color: $alert-close-color; font-size: $alert-close-font-size; - padding: $alert-close-padding; line-height: .9; - position: absolute; - top: $alert-close-top; margin-top: -($alert-close-font-size / 2); - #{$opposite-direction}: $alert-close-position; - color: $alert-close-color; opacity: $alert-close-opacity; - background: $alert-close-background; + padding: $alert-close-padding; + position: absolute; + top: $alert-close-top; &:hover, &:focus { opacity: $alert-close-opacity-hover; } } diff --git a/assets/scss/foundation/components/_block-grid.scss b/assets/scss/foundation/components/_block-grid.scss index 9b8d873..a923e76 100644 --- a/assets/scss/foundation/components/_block-grid.scss +++ b/assets/scss/foundation/components/_block-grid.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // Block Grid Variables @@ -48,10 +48,10 @@ $block-grid-media-queries: true !default; } @include clearfix; - &>li { + > li { display: block; - height: auto; float: $default-float; + height: auto; @if $include-spacing { padding: 0 ($spacing/2) $spacing; } @@ -59,12 +59,12 @@ $block-grid-media-queries: true !default; } @if $per-row { - &>li { - width: 100%/$per-row; + > li { + list-style: none; @if $include-spacing { padding: 0 ($spacing/2) $spacing; } - list-style: none; + width: 100%/$per-row; &:nth-of-type(1n) { clear: none; } &:nth-of-type(#{$per-row}n+1) { clear: both; } @@ -93,10 +93,10 @@ $block-grid-media-queries: true !default; // Generate presentational markup for block grid. // // $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc. -@mixin block-grid-html-classes($size,$include-spacing) { +@mixin block-grid-html-classes($size, $include-spacing) { @for $i from 1 through $block-grid-elements { .#{$size}-block-grid-#{($i)} { - @include block-grid($i,$block-grid-default-spacing,$include-spacing,false); + @include block-grid($i, $block-grid-default-spacing, $include-spacing, false); } } } @@ -108,24 +108,24 @@ $block-grid-media-queries: true !default; @if $block-grid-media-queries { @media #{$small-up} { - @include block-grid-html-classes($size:small,$include-spacing:false); + @include block-grid-html-classes($size:small, $include-spacing:false); } @media #{$medium-up} { - @include block-grid-html-classes($size:medium,$include-spacing:false); + @include block-grid-html-classes($size:medium, $include-spacing:false); } @media #{$large-up} { - @include block-grid-html-classes($size:large,$include-spacing:false); + @include block-grid-html-classes($size:large, $include-spacing:false); } @if $include-xl-html-block-grid-classes { @media #{$xlarge-up} { - @include block-grid-html-classes($size:xlarge,$include-spacing:false); + @include block-grid-html-classes($size:xlarge, $include-spacing:false); } @media #{$xxlarge-up} { - @include block-grid-html-classes($size:xxlarge,$include-spacing:false); + @include block-grid-html-classes($size:xxlarge, $include-spacing:false); } } } diff --git a/assets/scss/foundation/components/_breadcrumbs.scss b/assets/scss/foundation/components/_breadcrumbs.scss index 4aa1121..5f55a4e 100644 --- a/assets/scss/foundation/components/_breadcrumbs.scss +++ b/assets/scss/foundation/components/_breadcrumbs.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // Breadcrumb Variables @@ -41,13 +41,13 @@ $crumb-slash: "/" !default; // We use this mixin to create a container around our breadcrumbs @mixin crumb-container { - display: block; - padding: $crumb-padding; - overflow: hidden; - margin-#{$default-float}: 0; - list-style: none; border-style: $crumb-border-style; border-width: $crumb-border-size; + display: block; + list-style: none; + margin-#{$default-float}: 0; + overflow: hidden; + padding: $crumb-padding; // We control which background color and border come through. background-color: $crumb-bg; @@ -58,12 +58,12 @@ $crumb-slash: "/" !default; @mixin crumbs { // A normal state will make the links look and act like clickable breadcrumbs. - margin: 0; + color: $crumb-font-color; float: $default-float; font-size: $crumb-font-size; line-height: $crumb-font-size; + margin: 0; text-transform: $crumb-font-transform; - color: $crumb-font-color; &:hover a, &:focus a { text-decoration: $crumb-link-decor; } @@ -73,11 +73,11 @@ $crumb-slash: "/" !default; // Current is for the link of the current page &.current { - cursor: $cursor-default-value; color: $crumb-font-color-current; + cursor: $cursor-default-value; a { - cursor: $cursor-default-value; color: $crumb-font-color-current; + cursor: $cursor-default-value; } &:hover, &:hover a, @@ -93,15 +93,15 @@ $crumb-slash: "/" !default; &:hover a, &:focus, a:focus { - text-decoration: none; color: $crumb-font-color-unavailable; cursor: $cursor-disabled-value; + text-decoration: none; } } &:before { - content: "#{$crumb-slash}"; color: $crumb-slash-color; + content: "#{$crumb-slash}"; margin: 0 $crumb-side-padding; position: relative; top: 1px; @@ -119,14 +119,13 @@ $crumb-slash: "/" !default; @include crumb-container; @include radius($crumb-radius); - &>* { + > * { @include crumbs; } } + /* Accessibility - hides the forward slash */ + [aria-label="breadcrumbs"] [aria-hidden="true"]:after { + content: "/"; + } } } - -/* Accessibility - hides the forward slash */ -[aria-label="breadcrumbs"] [aria-hidden="true"]:after { - content: "/"; - } diff --git a/assets/scss/foundation/components/_button-groups.scss b/assets/scss/foundation/components/_button-groups.scss index d4ae95e..fd39fda 100644 --- a/assets/scss/foundation/components/_button-groups.scss +++ b/assets/scss/foundation/components/_button-groups.scss @@ -2,8 +2,8 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; -@import "buttons"; +@import 'global'; +@import 'buttons'; // // Button Group Variables @@ -38,7 +38,7 @@ $button-group-border-width: 1px !default; > button, .button { border-#{$default-float}: $button-group-border-width solid; - border-color: rgba(255, 255, 255, 0.5); + border-color: rgba(255, 255, 255, .5); } &:first-child { @@ -47,28 +47,31 @@ $button-group-border-width: 1px !default; } } + $button-group-display: list-item; + $button-group-margin: 0; + // We use this to control the flow, or remove those styles completely. @if $float { - margin: 0; + $button-group-display: list-item; + $button-group-margin: 0; float: $float; - display: list-item; // Make sure the first child doesn't get the negative margin. &:first-child { margin-#{$default-float}: 0; } } @else { - margin: 0 -2px; - display: inline-block; + $button-group-display: inline-block; + $button-group-margin: 0 -2px; } @if $orientation == vertical { - display:block; - margin:0; + $button-group-display: block; + $button-group-margin: 0; > button, .button { - border-top: $button-group-border-width solid; - border-color: rgba(255, 255, 255, 0.5); + border-color: rgba(255, 255, 255, .5); border-left-width: 0; - margin:0; + border-top: $button-group-border-width solid; display: block; + margin:0; } > button { width: 100%; @@ -81,12 +84,16 @@ $button-group-border-width: 1px !default; } } + display: $button-group-display; + margin: $button-group-margin; + + // We use these to control left and right radius on first/last buttons in the group. @if $radius == true { &, - & > a, - & > button, - & > .button { @include radius(0); } + > a, + > button, + > .button { @include radius(0); } &:first-child, &:first-child > a, &:first-child > button, @@ -112,9 +119,9 @@ $button-group-border-width: 1px !default; } @else if $radius { &, - & > a, - & > button, - & > .button { @include radius(0); } + > a, + > button, + > .button { @include radius(0); } &:first-child, &:first-child > a, &:first-child > button, @@ -153,15 +160,15 @@ $button-group-border-width: 1px !default; @for $i from 2 through 8 { &.even-#{$i} li { @include button-group-style($even:$i, $float:null); } } - - & > li { @include button-group-style(); } + + > li { @include button-group-style(); } &.stack { - & > li { @include button-group-style($orientation:vertical); float: none; } + > li { @include button-group-style($orientation:vertical); float: none; } } &.stack-for-small { - & > li { + > li { @include button-group-style($orientation:horizontal); @media #{$small-only} { @include button-group-style($orientation:vertical); diff --git a/assets/scss/foundation/components/_buttons.scss b/assets/scss/foundation/components/_buttons.scss index b81df0c..4069b23 100644 --- a/assets/scss/foundation/components/_buttons.scss +++ b/assets/scss/foundation/components/_buttons.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -55,7 +55,7 @@ $button-radius: $global-radius !default; $button-round: $global-rounded !default; // We use this to set default opacity and cursor for disabled buttons. -$button-disabled-opacity: 0.7 !default; +$button-disabled-opacity: .7 !default; $button-disabled-cursor: $cursor-default-value !default; @@ -69,6 +69,9 @@ $button-disabled-cursor: $cursor-default-value !default; @mixin button-base($style:true, $display:$button-display) { @if $style { + -webkit-appearance: none; + -moz-appearance: none; + border-radius:0; border-style: $button-border-style; border-width: $button-border-width; cursor: $cursor-pointer-value; @@ -77,11 +80,8 @@ $button-disabled-cursor: $cursor-default-value !default; line-height: normal; margin: 0 0 $button-margin-bottom; position: relative; - text-decoration: none; text-align: $button-font-align; - -webkit-appearance: none; - -moz-appearance: none; - border-radius:0; + text-decoration: none; } @if $display { display: $display; } } @@ -98,11 +98,7 @@ $button-disabled-cursor: $cursor-default-value !default; // We control which padding styles come through, // these can be turned off by setting $padding:false @if $padding { - padding-top: $padding; - padding-#{$opposite-direction}: $padding * 2; - padding-bottom: $padding + rem-calc(1); - padding-#{$default-float}: $padding * 2; - + padding: $padding ($padding * 2) ($padding + rem-calc(1)) ($padding * 2); // We control the font-size based on mixin input. @if $padding == $button-med { font-size: $button-font-med; } @else if $padding == $button-tny { font-size: $button-font-tny; } @@ -114,14 +110,14 @@ $button-disabled-cursor: $cursor-default-value !default; @if $full-width { // We still need to check if $padding is set. @if $padding { - padding-top: $padding; - padding-bottom: $padding + rem-calc(1); + padding-bottom: $padding + rem-calc(1); + padding-top: $padding; } @else if $padding == false { - padding-top:0; padding-bottom:0; + padding-top:0; } - padding-right: 0; padding-left: 0; + padding-right: 0; width: 100%; } } @@ -173,9 +169,9 @@ $button-disabled-cursor: $cursor-default-value !default; // We can set $disabled:true to create a disabled transparent button. @if $disabled { + box-shadow: none; cursor: $button-disabled-cursor; opacity: $button-disabled-opacity; - box-shadow: none; &:hover, &:focus { background-color: $bg; } } @@ -230,7 +226,7 @@ $button-disabled-cursor: $cursor-default-value !default; &.large { @include button-size($padding:$button-lrg); } &.small { @include button-size($padding:$button-sml); } &.tiny { @include button-size($padding:$button-tny); } - &.expand { @include button-size($padding:null,$full-width:true); } + &.expand { @include button-size($padding:null, $full-width:true); } &.left-align { text-align: left; text-indent: rem-calc(12); } &.right-align { text-align: right; padding-right: rem-calc(12); } diff --git a/assets/scss/foundation/components/_clearing.scss b/assets/scss/foundation/components/_clearing.scss index a6a5f80..e58966a 100644 --- a/assets/scss/foundation/components/_clearing.scss +++ b/assets/scss/foundation/components/_clearing.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -25,7 +25,7 @@ $clearing-arrow-color: $clearing-close-color !default; // We use these to style captions $clearing-caption-font-color: $iron !default; -$clearing-caption-font-size: 0.875em !default; +$clearing-caption-font-size: .875em !default; $clearing-caption-padding: 10px 30px 20px !default; // We use these to make the image and carousel height and style @@ -43,9 +43,9 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; /* Clearing Styles */ .clearing-thumbs, #{data('clearing')} { @include clearfix; - margin-bottom: 0; - margin-#{$default-float}: 0; list-style: none; + margin-#{$default-float}: 0; + margin-bottom: 0; li { float: $default-float; @@ -59,30 +59,30 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; .clearing-blackout { background: $clearing-bg; - position: fixed; - width: 100%; height: 100%; + position: fixed; top: 0; - #{$default-float}: 0; + width: 100%; z-index: 998; + #{$default-float}: 0; .clearing-close { display: block; } } .clearing-container { - position: relative; - z-index: 998; height: 100%; - overflow: hidden; margin: 0; + overflow: hidden; + position: relative; + z-index: 998; } .clearing-touch-label { + color: $base; + font-size: .6em; + left: 50%; position: absolute; top: 50%; - left: 50%; - color: $base; - font-size: 0.6em; } .visible-img { @@ -94,14 +94,18 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; #{$default-float}: 50%; top: 50%; @if $default-float == left { - transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); + -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); + -o-transform: translateY(-50%) translateX(-50%); + transform: translateY(-50%) translateX(-50%); } @else { - transform: translateY(-50%) translateX(50%); -webkit-transform: translateY(-50%) translateX(50%); + -moz-transform: translateY(-50%) translateX(50%); -ms-transform: translateY(-50%) translateX(50%); + -o-transform: translateY(-50%) translateX(50%); + transform: translateY(-50%) translateX(50%); }; max-height: 100%; max-width: 100%; @@ -109,27 +113,27 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; } .clearing-caption { + background: $clearing-caption-bg; + bottom: 0; color: $clearing-caption-font-color; font-size: $clearing-caption-font-size; line-height: 1.3; margin-bottom: 0; - text-align: center; - bottom: 0; - background: $clearing-caption-bg; - width: 100%; padding: $clearing-caption-padding; position: absolute; + text-align: center; + width: 100%; #{$default-float}: 0; } .clearing-close { - z-index: 999; - padding-#{$default-float}: 20px; - padding-top: 10px; - font-size: $clearing-close-size; - line-height: 1; color: $clearing-close-color; display: none; + font-size: $clearing-close-size; + line-height: 1; + padding-#{$default-float}: 20px; + padding-top: 10px; + z-index: 999; &:hover, &:focus { color: $iron; } @@ -151,23 +155,23 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; @media #{$medium-up} { .clearing-main-prev, .clearing-main-next { - position: absolute; height: 100%; - width: 40px; + position: absolute; top: 0; - & > span { + width: 40px; + > span { + border: solid $clearing-arrow-size; + display: block; + height: 0; position: absolute; top: 50%; - display: block; width: 0; - height: 0; - border: solid $clearing-arrow-size; - &:hover { opacity: 0.8; } + &:hover { opacity: .8; } } } .clearing-main-prev { #{$default-float}: 0; - & > span { + > span { #{$default-float}: 5px; border-color: transparent; border-#{$opposite-direction}-color: $clearing-arrow-color; @@ -175,14 +179,14 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; } .clearing-main-next { #{$opposite-direction}: 0; - & > span { + > span { border-color: transparent; border-#{$default-float}-color: $clearing-arrow-color; } } .clearing-main-prev.disabled, - .clearing-main-next.disabled { opacity: 0.3; } + .clearing-main-next.disabled { opacity: .3; } .clearing-assembled .clearing-container { @@ -192,7 +196,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; margin-top: 10px; text-align: center; - & > ul { + > ul { display: inline-block; z-index: 999; height: 100%; @@ -200,17 +204,17 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; float: none; li { + clear: none; + cursor: $cursor-pointer-value; display: block; - width: $clearing-carousel-thumb-width; - min-height: inherit; float: $default-float; - overflow: hidden; margin-#{$opposite-direction}: 0; + min-height: inherit; + opacity: .4; + overflow: hidden; padding: 0; position: relative; - cursor: $cursor-pointer-value; - opacity: 0.4; - clear: none; + width: $clearing-carousel-thumb-width; &.fix-height { img { @@ -226,29 +230,29 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default; } img { - cursor: $cursor-pointer-value !important; - width: 100% !important; + cursor: $cursor-pointer-value !important; + width: 100% !important; } &.visible { opacity: 1; } - &:hover { opacity: 0.8; } + &:hover { opacity: .8; } } } } .visible-img { background: $clearing-img-bg; - overflow: hidden; height: $clearing-active-img-height; + overflow: hidden; } } .clearing-close { + padding-#{$default-float}: 0; + padding-top: 0; position: absolute; top: 10px; #{$opposite-direction}: 20px; - padding-#{$default-float}: 0; - padding-top: 0; } } diff --git a/assets/scss/foundation/components/_dropdown-buttons.scss b/assets/scss/foundation/components/_dropdown-buttons.scss index d56cf60..1dc92d1 100644 --- a/assets/scss/foundation/components/_dropdown-buttons.scss +++ b/assets/scss/foundation/components/_dropdown-buttons.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -53,23 +53,22 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default; // $pip-color - Color of the little triangle that points to the dropdown. Default: $white. // $base-style - Add in base-styles. This can be set to false. Default:true -@mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) { +@mixin dropdown-button($padding:medium, $pip-color:$dropdown-button-pip-color, $base-style:true) { // We add in base styles, but they can be negated by setting to 'false'. @if $base-style { position: relative; - outline: none; // This creates the base styles for the triangle pip &::after { - position: absolute; + border-color: $dropdown-button-pip-color transparent transparent transparent; + border-style: solid; content: ""; - width: 0; - height: 0; display: block; - border-style: solid; - border-color: $dropdown-button-pip-color transparent transparent transparent; + height: 0; + position: absolute; top: 50%; + width: 0; } } @@ -122,9 +121,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default; @include exports("dropdown-button") { @if $include-html-button-classes { .dropdown.button, button.dropdown { @include dropdown-button; - &.tiny { @include dropdown-button(tiny,$base-style:false); } - &.small { @include dropdown-button(small,$base-style:false); } - &.large { @include dropdown-button(large,$base-style:false); } + &.tiny { @include dropdown-button(tiny, $base-style:false); } + &.small { @include dropdown-button(small, $base-style:false); } + &.large { @include dropdown-button(large, $base-style:false); } &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; } } } diff --git a/assets/scss/foundation/components/_dropdown.scss b/assets/scss/foundation/components/_dropdown.scss index 215a76c..ff1a6ec 100644 --- a/assets/scss/foundation/components/_dropdown.scss +++ b/assets/scss/foundation/components/_dropdown.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -64,60 +64,67 @@ $f-dropdown-radius: $global-radius !default; // $triangle - Sets if dropdown has triangle. Default:true. // $max-width - Default: $f-dropdown-max-width || 200px. @mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) { - position: absolute; + display: none; left: -9999px; list-style: $f-dropdown-list-style; margin-#{$default-float}: 0; - outline: none; + position: absolute; + + &.open { + display: block; + } > *:first-child { margin-top: 0; } > *:last-child { margin-bottom: 0; } @if $content == list { - width: 100%; - max-height: $f-dropdown-max-height; - height: $f-dropdown-height; background: $f-dropdown-bg; border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color; font-size: $f-dropdown-font-size; + height: $f-dropdown-height; + max-height: $f-dropdown-max-height; + width: 100%; z-index: 89; } @else if $content == content { - padding: $f-dropdown-content-padding; - width: 100%; - height: $f-dropdown-height; - max-height: $f-dropdown-max-height; background: $f-dropdown-bg; border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color; font-size: $f-dropdown-font-size; + height: $f-dropdown-height; + max-height: $f-dropdown-max-height; + padding: $f-dropdown-content-padding; + width: 100%; z-index: 89; } @if $triangle == bottom { margin-top: $f-dropdown-margin-top; - &:before { - @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom); - position: absolute; - top: -($f-dropdown-triangle-size * 2); - #{$default-float}: $f-dropdown-triangle-side-offset; - z-index: 89; - } - &:after { - @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom); - position: absolute; - top: -(($f-dropdown-triangle-size + 1) * 2); - #{$default-float}: $f-dropdown-triangle-side-offset - 1; - z-index: 88; - } + @if $f-dropdown-triangle-size != 0px { - &.right:before { - #{$default-float}: auto; - #{$opposite-direction}: $f-dropdown-triangle-side-offset; - } - &.right:after { - #{$default-float}: auto; - #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1; + &:before { + @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom); + position: absolute; + top: -($f-dropdown-triangle-size * 2); + #{$default-float}: $f-dropdown-triangle-side-offset; + z-index: 89; + } + &:after { + @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom); + position: absolute; + top: -(($f-dropdown-triangle-size + 1) * 2); + #{$default-float}: $f-dropdown-triangle-side-offset - 1; + z-index: 88; + } + + &.right:before { + #{$default-float}: auto; + #{$opposite-direction}: $f-dropdown-triangle-side-offset; + } + &.right:after { + #{$default-float}: auto; + #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1; + } } } @@ -166,23 +173,23 @@ $f-dropdown-radius: $global-radius !default; } @if $triangle == top { - margin-top: -$f-dropdown-margin-bottom; margin-left: 0; + margin-top: -$f-dropdown-margin-bottom; &:before { @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, top); + bottom: -($f-dropdown-triangle-size * 2); position: absolute; top: auto; - bottom: -($f-dropdown-triangle-size * 2); #{$default-float}: $f-dropdown-triangle-side-offset; #{$opposite-direction}: auto; z-index: 89; } &:after { @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top); + bottom: -($f-dropdown-triangle-size * 2) - 2; position: absolute; top: auto; - bottom: -($f-dropdown-triangle-size * 2) - 2; #{$default-float}: $f-dropdown-triangle-side-offset - 1; #{$opposite-direction}: auto; z-index: 88; @@ -200,9 +207,8 @@ $f-dropdown-radius: $global-radius !default; // We use this to style the list elements or content inside the dropdown. @mixin dropdown-style { - font-size: $f-dropdown-font-size; cursor: $cursor-pointer-value; - + font-size: $f-dropdown-font-size; line-height: $f-dropdown-line-height; margin: 0; diff --git a/assets/scss/foundation/components/_flex-video.scss b/assets/scss/foundation/components/_flex-video.scss index 631ca9b..4df77e5 100644 --- a/assets/scss/foundation/components/_flex-video.scss +++ b/assets/scss/foundation/components/_flex-video.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -22,12 +22,12 @@ $flex-video-widescreen-padding-bottom: 56.34% !default; // @mixin flex-video-container { - position: relative; - padding-top: $flex-video-padding-top; - padding-bottom: $flex-video-padding-bottom; height: 0; margin-bottom: $flex-video-margin-bottom; overflow: hidden; + padding-bottom: $flex-video-padding-bottom; + padding-top: $flex-video-padding-top; + position: relative; &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; } &.vimeo { padding-top: 0; } @@ -36,11 +36,11 @@ $flex-video-widescreen-padding-bottom: 56.34% !default; object, embed, video { + height: 100%; position: absolute; top: 0; - #{$default-float}: 0; width: 100%; - height: 100%; + #{$default-float}: 0; } } @@ -48,4 +48,4 @@ $flex-video-widescreen-padding-bottom: 56.34% !default; @if $include-html-media-classes { .flex-video { @include flex-video-container; } } -} \ No newline at end of file +} diff --git a/assets/scss/foundation/components/_forms.scss b/assets/scss/foundation/components/_forms.scss index 87ce038..d8b2a18 100644 --- a/assets/scss/foundation/components/_forms.scss +++ b/assets/scss/foundation/components/_forms.scss @@ -2,8 +2,8 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; -@import "buttons"; +@import 'global'; +@import 'buttons'; // // @variables @@ -23,6 +23,7 @@ $form-label-small-transform: capitalize !default; $form-label-bottom-margin: 0 !default; $input-font-family: inherit !default; $input-font-color: rgba(0,0,0,0.75) !default; +$input-placeholder-font-color: #cccccc !default; $input-font-size: rem-calc(14) !default; $input-bg-color: $white !default; $input-focus-bg-color: scale-color($white, $lightness: -2%) !default; @@ -71,9 +72,13 @@ $input-error-message-bg-color: $alert-color !default; $input-error-message-font-color-alt: $oil !default; // We use this to style the glowing effect of inputs when focused -$glowing-effect-fade-time: 0.45s !default; +$glowing-effect-fade-time: .45s !default; $glowing-effect-color: $input-focus-border-color !default; +// We use this to style the transition when inputs are focused and when the glowing effect is disabled. +$input-transition-fade-time: 0.15s !default; +$input-transition-fade-timing-function: linear !default; + // Select variables $select-bg-color: $ghost !default; $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; @@ -111,7 +116,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // We use this mixin to give all basic form elements their style @mixin form-element { background-color: $input-bg-color; - font-family: $input-font-family; border: { style: $input-border-style; width: $input-border-width; @@ -120,10 +124,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; box-shadow: $input-box-shadow; color: $input-font-color; display: block; + font-family: $input-font-family; font-size: $input-font-size; + height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); margin: 0 0 $form-spacing 0; padding: $form-spacing / 2; - height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); width: 100%; @include box-sizing(border-box); @if $input-include-glowing-effect { @@ -135,7 +140,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; border-color: $input-focus-border-color; outline: none; } - // Disbaled Styles + // Disabled Styles &:disabled { background-color: $input-disabled-bg; cursor: $input-disabled-cursor; @@ -160,10 +165,10 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // Control whether or not the base styles come through. @if $base-style { - font-size: $form-label-font-size; color: $form-label-font-color; cursor: $form-label-pointer; display: block; + font-size: $form-label-font-size; font-weight: $form-label-font-weight; line-height: $form-label-line-height; margin-bottom: $form-label-bottom-margin; @@ -182,19 +187,19 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // We use this mixin to create postfix/prefix form Labels @mixin prefix-postfix-base { - display: block; - position: relative; - z-index: 2; - text-align: center; - width: 100%; - padding-top: 0; - padding-bottom: 0; border-style: $input-prefix-border-type; border-width: $input-prefix-border-size; - overflow: $input-prefix-overflow; + display: block; font-size: $form-label-font-size; height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); + overflow: $input-prefix-overflow; + padding-bottom: 0; + padding-top: 0; + position: relative; + text-align: center; + width: 100%; + z-index: 2; } // @MIXIN @@ -220,12 +225,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; } @if $is-button { + border: none; padding-#{$default-float}: 0; padding-#{$opposite-direction}: 0; - padding-top: 0; padding-bottom: 0; + padding-top: 0; text-align: center; - border: none; } } @@ -235,12 +240,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // We use this mixin to create postfix label styles // $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default; // $is-button - Toggle position settings if prefix is a button. Default: false -@mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) { +@mixin postfix($bg:$input-prefix-bg, $border-left-hidden:false, $border:$input-prefix-border-color, $is-button:false) { @if $bg { $bg-lightness: lightness($bg); background: $bg; - border-#{$default-float}: none; + @if $border-left-hidden { + border-#{$default-float}: none; + } // Control the font color based on background brightness @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; } @@ -252,12 +259,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; } @if $is-button { + border: none; padding-#{$default-float}: 0; padding-#{$opposite-direction}: 0; - padding-top: 0; padding-bottom: 0; + padding-top: 0; text-align: center; - border: none; } } @@ -265,16 +272,16 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // We use this mixin to style fieldsets @mixin fieldset { border: $fieldset-border-width $fieldset-border-style $fieldset-border-color; - padding: $fieldset-padding; margin: $fieldset-margin; + padding: $fieldset-padding; // and legend styles legend { - font-weight: $legend-font-weight; background: $legend-bg; - padding: $legend-padding; - margin: 0; + font-weight: $legend-font-weight; margin-#{$default-float}: rem-calc(-3); + margin: 0; + padding: $legend-padding; } } @@ -283,8 +290,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // We use this mixin to control border and background color of error inputs // $color - Default: $alert-color (found in settings file) @mixin form-error-color($color:$alert-color) { + background-color: rgba($color, .1); border-color: $color; - background-color: rgba($color, 0.1); // Go back to normal on focus &:focus { @@ -305,12 +312,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // $bg - Default: $alert-color (Found in settings file) @mixin form-error-message($bg:$input-error-message-bg-color) { display: block; - padding: $input-error-message-padding; - margin-top: $input-error-message-top; - margin-bottom: $form-spacing; font-size: $input-error-message-font-size; - font-weight: $input-error-message-font-weight; font-style: $input-error-message-font-style; + font-weight: $input-error-message-font-weight; + margin-bottom: $form-spacing; + margin-top: $input-error-message-top; + padding: $input-error-message-padding; // We can control the text color based on the brightness of the background. $bg-lightness: lightness($bg); @@ -322,8 +329,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // We use this mixin to style select elements @mixin form-select { -webkit-appearance: none !important; - border-radius: 0; + -moz-appearance: none !important; background-color: $select-bg-color; + border-radius: 0; // Hide the dropdown arrow shown in newer IE versions &::-ms-expand { @@ -343,11 +351,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; width: $input-border-width; color: $input-border-color; } - padding: ($form-spacing / 2); - font-size: $input-font-size; - font-family: $body-font-family; color: $input-font-color; + font-family: $input-font-family; + font-size: $input-font-size; line-height: normal; + padding: ($form-spacing / 2); @include radius(0); &.radius { @include radius($global-radius); } &:hover { @@ -383,8 +391,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; /* Label Styles */ label { @include form-label; - &.right { @include form-label(right,false); } - &.inline { @include form-label(inline,false); } + &.right { @include form-label(right, false); } + &.inline { @include form-label(inline, false); } /* Styles for required inputs */ small { text-transform: $form-label-small-transform; @@ -397,8 +405,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; .postfix { @include prefix-postfix-base; } /* Adjust padding, alignment and radius if pre/post element is a button */ - .postfix.button { @include button-size(false,false); @include postfix(false, false, true); } - .prefix.button { @include button-size(false,false); @include prefix(false, false, true); } + .postfix.button { @include button-size(false, false); @include postfix(false, false, true); } + .prefix.button { @include button-size(false, false); @include prefix(false, false, true); } .prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); } .postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); } @@ -406,16 +414,21 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; .postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); } /* Separate prefix and postfix styles when on span or label so buttons keep their own */ - span.prefix,label.prefix { @include prefix(); } - span.postfix,label.postfix { @include postfix(); } + span.prefix, label.prefix { @include prefix(); } + span.postfix, label.postfix { @include postfix(); } /* We use this to get basic styling on all basic form elements */ #{text-inputs(all, 'input')} { -webkit-appearance: none; + -moz-appearance: none; border-radius: 0; @include form-element; @if $input-include-glowing-effect == false { - @include single-transition(all, 0.15s, linear); + -webkit-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function; + -moz-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function; + -ms-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function; + -o-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function; + transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function; } &.radius { @include radius($input-border-radius); @@ -457,6 +470,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; input[type="submit"] { -webkit-appearance: none; + -moz-appearance: none; border-radius: 0; } @@ -465,10 +479,28 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; height: auto; } - /* Not allow resize out of parent */ - textarea { - max-width: 100%; - } + /* Not allow resize out of parent */ + textarea { + max-width: 100%; + } + + // style placeholder text cross browser + ::-webkit-input-placeholder { + color: $input-placeholder-font-color; + } + + :-moz-placeholder { /* Firefox 18- */ + color: $input-placeholder-font-color; + } + + ::-moz-placeholder { /* Firefox 19+ */ + color: $input-placeholder-font-color; + } + + :-ms-input-placeholder { + color: $input-placeholder-font-color; + } + /* Add height value for select elements to match text input height */ select { @@ -551,14 +583,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; > label { > small { - color: scale-color($form-label-font-color, $lightness: 15%); background: transparent; - padding: 0; - text-transform: $form-label-small-transform; - font-style: normal; + color: scale-color($form-label-font-color, $lightness: 15%); + display: inline; font-size: 60%; + font-style: normal; margin: 0; - display: inline; + padding: 0; + text-transform: $form-label-small-transform; } } diff --git a/assets/scss/foundation/components/_global.scss b/assets/scss/foundation/components/_global.scss index 8da8293..1d67971 100644 --- a/assets/scss/foundation/components/_global.scss +++ b/assets/scss/foundation/components/_global.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "../functions"; +@import '../functions'; // // Foundation Variables // @@ -80,7 +80,7 @@ $base-line-height: 1.5 !default; // We use this to add box-sizing across browser prefixes @mixin box-sizing($type:border-box) { -webkit-box-sizing: $type; // Android < 2.3, iOS < 4 - -moz-box-sizing: $type; // Firefox < 29 + -moz-box-sizing: $type; box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1 } @@ -91,11 +91,11 @@ $base-line-height: 1.5 !default; // $triangle-color - Used to set border-color which makes up triangle. No default // $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right @mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) { + border: inset $triangle-size; content: ""; display: block; - width: 0; height: 0; - border: inset $triangle-size; + width: 0; @if ($triangle-direction == top) { border-color: $triangle-color transparent transparent transparent; border-top-style: solid; @@ -128,9 +128,9 @@ $base-line-height: 1.5 !default; @mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) { span::after { content: ""; - position: absolute; display: block; height: 0; + position: absolute; @if $offcanvas { @if $top { @@ -148,8 +148,8 @@ $base-line-height: 1.5 !default; } } @else { - top: 50%; margin-top: -($width/2); + top: 50%; #{$opposite-direction}: $topbar-link-padding; } @@ -183,8 +183,8 @@ $base-line-height: 1.5 !default; transition: box-shadow $fade-time, border-color $fade-time ease-in-out; &:#{$selector} { - box-shadow: 0 0 5px $glowing-effect-color; border-color: $glowing-effect-color; + box-shadow: 0 0 5px $glowing-effect-color; } } @@ -194,7 +194,7 @@ $base-line-height: 1.5 !default; // $horizontal: Default: 0 // $vertical: Default: 0 @mixin translate2d($horizontal:0, $vertical:0) { - transform: translate($horizontal,$vertical) + transform: translate($horizontal, $vertical) } // @mixins @@ -202,11 +202,11 @@ $base-line-height: 1.5 !default; // Makes an element visually hidden, but accessible. // @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility @mixin element-invisible { - position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); height: 1px; - width: 1px; overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); + position: absolute !important; + width: 1px; } // @mixins @@ -291,17 +291,22 @@ $shiny-edge-active-color: rgba(#000, .2) !default; // We use this to control whether or not CSS classes come through in the gem files. $include-html-classes: true !default; $include-print-styles: true !default; +$include-js-meta-styles: true !default; // Warning! Meta styles are a dependancy of the Javascript. $include-html-global-classes: $include-html-classes !default; $column-gutter: rem-calc(30) !default; // Media Query Ranges -$small-range: (0, 40em) !default; -$medium-range: (40.063em, 64em) !default; -$large-range: (64.063em, 90em) !default; -$xlarge-range: (90.063em, 120em) !default; -$xxlarge-range: (120.063em, 99999999em) !default; +$small-breakpoint: em-calc(640) !default; +$medium-breakpoint: em-calc(1024) !default; +$large-breakpoint: em-calc(1440) !default; +$xlarge-breakpoint: em-calc(1920) !default; +$small-range: (0, $small-breakpoint) !default; +$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint) !default; +$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint) !default; +$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint) !default; +$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default; $screen: "only screen" !default; @@ -323,6 +328,15 @@ $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default; $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default; +$retina: ( + "#{$screen} and (-webkit-min-device-pixel-ratio: 2)", + "#{$screen} and (min--moz-device-pixel-ratio: 2)", + "#{$screen} and (-o-min-device-pixel-ratio: 2/1)", + "#{$screen} and (min-device-pixel-ratio: 2)", + "#{$screen} and (min-resolution: 192dpi)", + "#{$screen} and (min-resolution: 2dppx)" +); + // Legacy $small: $medium-up; $medium: $medium-up; @@ -341,61 +355,65 @@ $cursor-text-value: text !default; @include exports("global") { - // Meta styles are included in all builds, as they are a dependancy of the Javascript. + // Meta styles are a dependancy of the Javascript. // Used to provide media query values for javascript components. // Forward slash placed around everything to convince PhantomJS to read the value. - meta.foundation-version { - font-family: "/5.5.1/"; - } + @if $include-js-meta-styles { - meta.foundation-mq-small { - font-family: "/" + unquote($small-up) + "/"; - width: lower-bound($small-range); - } + meta.foundation-version { + font-family: "/5.5.2/"; + } - meta.foundation-mq-small-only { - font-family: "/" + unquote($small-only) + "/"; - width: lower-bound($small-range); - } + meta.foundation-mq-small { + font-family: "/" + unquote($small-up) + "/"; + width: lower-bound($small-range); + } - meta.foundation-mq-medium { - font-family: "/" + unquote($medium-up) + "/"; - width: lower-bound($medium-range); - } + meta.foundation-mq-small-only { + font-family: "/" + unquote($small-only) + "/"; + width: lower-bound($small-range); + } - meta.foundation-mq-medium-only { - font-family: "/" + unquote($medium-only) + "/"; - width: lower-bound($medium-range); - } + meta.foundation-mq-medium { + font-family: "/" + unquote($medium-up) + "/"; + width: lower-bound($medium-range); + } - meta.foundation-mq-large { - font-family: "/" + unquote($large-up) + "/"; - width: lower-bound($large-range); - } + meta.foundation-mq-medium-only { + font-family: "/" + unquote($medium-only) + "/"; + width: lower-bound($medium-range); + } - meta.foundation-mq-large-only { - font-family: "/" + unquote($large-only) + "/"; - width: lower-bound($large-range); - } + meta.foundation-mq-large { + font-family: "/" + unquote($large-up) + "/"; + width: lower-bound($large-range); + } - meta.foundation-mq-xlarge { - font-family: "/" + unquote($xlarge-up) + "/"; - width: lower-bound($xlarge-range); - } + meta.foundation-mq-large-only { + font-family: "/" + unquote($large-only) + "/"; + width: lower-bound($large-range); + } - meta.foundation-mq-xlarge-only { - font-family: "/" + unquote($xlarge-only) + "/"; - width: lower-bound($xlarge-range); - } + meta.foundation-mq-xlarge { + font-family: "/" + unquote($xlarge-up) + "/"; + width: lower-bound($xlarge-range); + } - meta.foundation-mq-xxlarge { - font-family: "/" + unquote($xxlarge-up) + "/"; - width: lower-bound($xxlarge-range); - } + meta.foundation-mq-xlarge-only { + font-family: "/" + unquote($xlarge-only) + "/"; + width: lower-bound($xlarge-range); + } + + meta.foundation-mq-xxlarge { + font-family: "/" + unquote($xxlarge-up) + "/"; + width: lower-bound($xxlarge-range); + } + + meta.foundation-data-attribute-namespace { + font-family: #{$namespace}; + } - meta.foundation-data-attribute-namespace { - font-family: #{$namespace}; } @if $include-html-global-classes { @@ -404,10 +422,13 @@ $cursor-text-value: text !default; html, body { height: 100%; } // Set box-sizing globally to handle padding and border widths + html { + box-sizing: border-box; + } *, *:before, *:after { - @include box-sizing(border-box); + @include box-sizing(inherit); } html, @@ -417,14 +438,14 @@ $cursor-text-value: text !default; body { background: $body-bg; color: $body-font-color; - padding: 0; - margin: 0; + cursor: $cursor-auto-value; font-family: $body-font-family; - font-weight: $body-font-weight; font-style: $body-font-style; + font-weight: $body-font-weight; line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150% + margin: 0; + padding: 0; position: relative; - cursor: $cursor-auto-value; } a:hover { cursor: $cursor-pointer-value; } @@ -435,7 +456,8 @@ $cursor-text-value: text !default; img { -ms-interpolation-mode: bicubic; } #map_canvas, - .map_canvas { + .map_canvas, + .mqa-display { img, embed, object { max-width: none !important; diff --git a/assets/scss/foundation/components/_grid.scss b/assets/scss/foundation/components/_grid.scss index aa4e77c..aa5e84b 100644 --- a/assets/scss/foundation/components/_grid.scss +++ b/assets/scss/foundation/components/_grid.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -29,7 +29,9 @@ $last-child-float: $opposite-direction !default; // $colNumber - Found in settings file // $totalColumns - Found in settings file @function grid-calc($colNumber, $totalColumns) { - @return percentage(($colNumber / $totalColumns)); + $result: percentage(($colNumber / $totalColumns)); + @if $result == 0% { $result: 0; } + @return $result; } // @@ -44,36 +46,30 @@ $last-child-float: $opposite-direction !default; // use @include grid-row(nest); to include a nested row @if $behavior == nest { - width: auto; - margin-#{$default-float}: -($column-gutter/2); - margin-#{$opposite-direction}: -($column-gutter/2); - margin-top: 0; - margin-bottom: 0; + margin: 0 (-($column-gutter/2)); max-width: none; + width: auto; } // use @include grid-row(collapse); to collapsed a container row margins @else if $behavior == collapse { - width: 100%; margin: 0; max-width: $row-width; + width: 100%; } // use @include grid-row(nest-collapse); to collapse outer margins on a nested row @else if $behavior == nest-collapse { - width: auto; margin: 0; max-width: none; + width: auto; } // use @include grid-row; to use a container row @else { - width: 100%; - margin-#{$default-float}: auto; - margin-#{$opposite-direction}: auto; - margin-top: 0; - margin-bottom: 0; + margin: 0 auto; max-width: $row-width; + width: 100%; } // Clearfix for all rows @@ -169,19 +165,19 @@ $last-child-float: $opposite-direction !default; @for $i from 1 through $total-columns { - .#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); } + .#{$size}-#{$i} { @include grid-column($columns:$i, $collapse:null, $float:false); } } @for $i from 0 through $total-columns - 1 { - .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); } + .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null, $float:false); } } .#{$size}-reset-order { + float: $default-float; + left: auto; margin-#{$default-float}: 0; margin-#{$opposite-direction}: 0; - left: auto; right: auto; - float: $default-float; } .column.#{$size}-centered, @@ -189,9 +185,9 @@ $last-child-float: $opposite-direction !default; .column.#{$size}-uncentered, .columns.#{$size}-uncentered { + float: $default-float; margin-#{$default-float}: 0; margin-#{$opposite-direction}: 0; - float: $default-float; } // Fighting [class*="column"] + [class*="column"]:last-child @@ -247,8 +243,15 @@ $last-child-float: $opposite-direction !default; .column, .columns { @include grid-column($columns:$total-columns); } - [class*="column"] + [class*="column"]:last-child { float: $last-child-float; } - [class*="column"] + [class*="column"].end { float: $default-float; } + .column, + .columns { + & + &:last-child { + float: $last-child-float; + } + & + &.end { + float: $default-float; + } + } @media #{$small-up} { @include grid-html-classes($size:small); diff --git a/assets/scss/foundation/components/_icon-bar.scss b/assets/scss/foundation/components/_icon-bar.scss index 6e3608a..6ca01da 100644 --- a/assets/scss/foundation/components/_icon-bar.scss +++ b/assets/scss/foundation/components/_icon-bar.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // @name @@ -27,7 +27,7 @@ $icon-bar-active-color: $primary-color !default; $icon-bar-item-padding: 1.25rem !default; // We use this to set default opacity and cursor for disabled icons. -$icon-bar-disabled-opacity: 0.7 !default; +$icon-bar-disabled-opacity: .7 !default; $icon-bar-disabled-cursor: $cursor-disabled-value !default; @@ -38,123 +38,123 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default; // We use this mixin to create the base styles for our Icon bar element. // @mixin icon-bar-base() { + display: inline-block; + font-size: 0; + width: 100%; + + > * { + display: block; + float: left; + font-size: $icon-bar-font-size; + margin: 0 auto; + padding: $icon-bar-item-padding; + text-align: center; + width: 25%; + + i, img { + display: block; + margin: 0 auto; + + & + label { + margin-top: .0625rem; + } + } + + i { + font-size: $icon-bar-icon-size; + vertical-align: middle; + } + + img { + height: $icon-bar-image-height; + width: $icon-bar-image-width; + } + } - width: 100%; - font-size: 0; - display: inline-block; - - & > * { - text-align: center; - font-size: $icon-bar-font-size; - width: 25%; - margin: 0 auto; - display: block; - padding: $icon-bar-item-padding; - float: left; - - i, img { - display: block; - margin: 0 auto; - - & + label { - margin-top: .0625rem; - } - } - - i { - font-size: $icon-bar-icon-size; - vertical-align: middle; - } - - img { - width: $icon-bar-image-width; - height: $icon-bar-image-height; - } - } - - &.label-right > * { - - i, img { - margin: 0 .0625rem 0 0; - display: inline-block; - - & + label { - margin-top: 0; - } - } - - label { display: inline-block; } - } - - &.vertical.label-right > * { - text-align: left; - } - - &.vertical, &.small-vertical{ - height: 100%; - width: auto; - - .item { - width: auto; - margin: auto; - float: none; - } - } - - &.medium-vertical { - @media #{$medium-up} { - height: 100%; - width: auto; - - .item { - width: auto; - margin: auto; - float: none; - } - } - } - &.large-vertical { - @media #{$large-up} { - height: 100%; - width: auto; - - .item { - width: auto; - margin: auto; - float: none; - } - } - } + &.label-right > * { + + i, img { + display: inline-block; + margin: 0 .0625rem 0 0; + + & + label { + margin-top: 0; + } + } + + label { display: inline-block; } + } + + &.vertical.label-right > * { + text-align: left; + } + + &.vertical, &.small-vertical{ + height: 100%; + width: auto; + + .item { + float: none; + margin: auto; + width: auto; + } + } + + &.medium-vertical { + @media #{$medium-up} { + height: 100%; + width: auto; + + .item { + float: none; + margin: auto; + width: auto; + } + } + } + &.large-vertical { + @media #{$large-up} { + height: 100%; + width: auto; + + .item { + float: none; + margin: auto; + width: auto; + } + } + } } // We use this mixin to create the size styles for icon bars. @mixin icon-bar-size( - $padding: $icon-bar-item-padding, - $font-size: $icon-bar-font-size, - $icon-size: $icon-bar-icon-size, - $image-width: $icon-bar-image-width, - $image-height: $icon-bar-image-height) { + $padding: $icon-bar-item-padding, + $font-size: $icon-bar-font-size, + $icon-size: $icon-bar-icon-size, + $image-width: $icon-bar-image-width, + $image-height: $icon-bar-image-height) { - & > * { - font-size: $font-size; - padding: $padding; + > * { + font-size: $font-size; + padding: $padding; - i, img { + i, img { - & + label { - margin-top: .0625rem; - } - } + & + label { + margin-top: .0625rem; + font-size: $font-size; + } + } - i { - font-size: $icon-size; - } + i { + font-size: $icon-size; + } - img { - width: $image-width; - height: $image-height; - } - } + img { + height: $image-height; + width: $image-width; + } + } } @@ -169,38 +169,38 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default; $base-style:true, $disabled:false) { - @if $base-style { + @if $base-style { - background: $bar-bg; + background: $bar-bg; - & > * { - label { color: $bar-font-color; } + > * { + label { color: $bar-font-color; } - i { color: $bar-icon-color; } - } + i { color: $bar-icon-color; } + } - & > a:hover { + > a:hover { - background: $bar-hover-color; + background: $bar-hover-color; - label { color: $bar-font-color-hover; } + label { color: $bar-font-color-hover; } - i { color: $bar-icon-color-hover; } - } + i { color: $bar-icon-color-hover; } + } - & > a.active { + > a.active { - background: $bar-active-color; + background: $bar-active-color; - label { color: $bar-font-color-hover; } + label { color: $bar-font-color-hover; } - i { color: $bar-icon-color-hover; } - } - } + i { color: $bar-icon-color-hover; } + } + } @if $disabled { .item.disabled { - opacity: $icon-bar-disabled-opacity; cursor: $icon-bar-disabled-cursor; + opacity: $icon-bar-disabled-opacity; pointer-events: none; >* { opacity: $icon-bar-disabled-opacity; @@ -230,15 +230,116 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default; $bar-icon-color-hover:$icon-bar-icon-color-hover, $bar-active-color:$icon-bar-active-color, $padding: $icon-bar-item-padding, - $font-size: $icon-bar-font-size, - $icon-size: $icon-bar-icon-size, - $image-width: $icon-bar-image-width, - $image-height: $icon-bar-image-height, + $font-size: $icon-bar-font-size, + $icon-size: $icon-bar-icon-size, + $image-width: $icon-bar-image-width, + $image-height: $icon-bar-image-height, $base-style:true, $disabled:true) { @include icon-bar-base(); @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height); @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled); + + // Counts + + &.two-up { + .item { width: 50%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + &.three-up { + .item { width: 33.3333%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + &.four-up { + .item { width: 25%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + &.five-up { + .item { width: 20%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + &.six-up { + .item { width: 16.66667%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + &.seven-up { + .item { width: 14.28571%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + &.eight-up { + .item { width: 12.5%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } } @include exports("icon-bar") { @@ -251,109 +352,109 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default; @if $include-html-icon-bar-classes { - // toolbar styles - - .icon-bar { - - // Counts - - &.two-up { - .item { width: 50%; } - &.vertical .item, &.small-vertical .item { width: auto; } - &.medium-vertical .item { - @media #{$medium-up} { - width: auto; - } - } - &.large-vertical .item { - @media #{$large-up} { - width: auto; - } - } - } - &.three-up { - .item { width: 33.3333%; } - &.vertical .item, &.small-vertical .item { width: auto; } - &.medium-vertical .item { - @media #{$medium-up} { - width: auto; - } - } - &.large-vertical .item { - @media #{$large-up} { - width: auto; - } - } - } - &.four-up { - .item { width: 25%; } - &.vertical .item, &.small-vertical .item { width: auto; } - &.medium-vertical .item { - @media #{$medium-up} { - width: auto; - } - } - &.large-vertical .item { - @media #{$large-up} { - width: auto; - } - } - } - &.five-up { - .item { width: 20%; } - &.vertical .item, &.small-vertical .item { width: auto; } - &.medium-vertical .item { - @media #{$medium-up} { - width: auto; - } - } - &.large-vertical .item { - @media #{$large-up} { - width: auto; - } - } - } - &.six-up { - .item { width: 16.66667%; } - &.vertical .item, &.small-vertical .item { width: auto; } - &.medium-vertical .item { - @media #{$medium-up} { - width: auto; - } - } - &.large-vertical .item { - @media #{$large-up} { - width: auto; - } - } - } - &.seven-up { - .item { width: 14.28571%; } - &.vertical .item, &.small-vertical .item { width: auto; } - &.medium-vertical .item { - @media #{$medium-up} { - width: auto; - } - } - &.large-vertical .item { - @media #{$large-up} { - width: auto; - } - } + // toolbar styles + + .icon-bar { + + // Counts + + &.two-up { + .item { width: 50%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + &.three-up { + .item { width: 33.3333%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + &.four-up { + .item { width: 25%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + &.five-up { + .item { width: 20%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + &.six-up { + .item { width: 16.66667%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + &.seven-up { + .item { width: 14.28571%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } } &.eight-up { - .item { width: 12.5%; } - &.vertical .item, &.small-vertical .item { width: auto; } - &.medium-vertical .item { - @media #{$medium-up} { - width: auto; - } - } - &.large-vertical .item { - @media #{$large-up} { - width: auto; - } - } - } - } + .item { width: 12.5%; } + &.vertical .item, &.small-vertical .item { width: auto; } + &.medium-vertical .item { + @media #{$medium-up} { + width: auto; + } + } + &.large-vertical .item { + @media #{$large-up} { + width: auto; + } + } + } + } } diff --git a/assets/scss/foundation/components/_inline-lists.scss b/assets/scss/foundation/components/_inline-lists.scss index 9ee162d..a75c5d8 100644 --- a/assets/scss/foundation/components/_inline-lists.scss +++ b/assets/scss/foundation/components/_inline-lists.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -32,19 +32,19 @@ $inline-list-children-display: block !default; // // We use this mixin to create inline lists @mixin inline-list { - margin: $inline-list-top-margin auto $inline-list-bottom-margin auto; + list-style: none; margin-#{$default-float}: $inline-list-default-float-margin; margin-#{$opposite-direction}: $inline-list-opposite-margin; - padding: $inline-list-padding; - list-style: none; + margin: $inline-list-top-margin auto $inline-list-bottom-margin auto; overflow: $inline-list-overflow; + padding: $inline-list-padding; - & > li { - list-style: none; + > li { + display: $inline-list-display; float: $default-float; + list-style: none; margin-#{$default-float}: $inline-list-default-float-list-margin; - display: $inline-list-display; - &>* { display: $inline-list-children-display; } + > * { display: $inline-list-children-display; } } } diff --git a/assets/scss/foundation/components/_joyride.scss b/assets/scss/foundation/components/_joyride.scss index 37ac233..cea07d3 100644 --- a/assets/scss/foundation/components/_joyride.scss +++ b/assets/scss/foundation/components/_joyride.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -49,28 +49,27 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default; /* Default styles for the container */ .joyride-tip-guide { - display: none; - position: absolute; background: $joyride-tip-bg; color: $joyride-tip-font-color; - z-index: 101; - top: 0; - #{$default-float}: 2.5%; + display: none; font-family: inherit; font-weight: $font-weight-normal; + position: absolute; + top: 0; width: 95%; + z-index: 101; + #{$default-float}: 2.5%; } .lt-ie9 .joyride-tip-guide { - max-width:800px; + margin-#{$default-float}: -400px; + max-width: 800px; #{$default-float}: 50%; - margin-#{$default-float}:-400px; } .joyride-content-wrapper { - width: 100%; - padding: $joyride-tip-padding; + width: 100%; .button { margin-bottom: 0 !important; } @@ -80,25 +79,25 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default; /* Add a little css triangle pip, older browser just miss out on the fanciness of it */ .joyride-tip-guide { .joyride-nub { + border: $joyride-tip-nub-size solid $joyride-tip-bg; display: block; + height: 0; position: absolute; - #{$default-float}: $joyride-tip-position-offset; width: 0; - height: 0; - border: $joyride-tip-nub-size solid $joyride-tip-bg; + #{$default-float}: $joyride-tip-position-offset; &.top { - border-top-style: solid; border-color: $joyride-tip-bg; border-top-color: transparent !important; + border-top-style: solid; border-#{$default-float}-color: transparent !important; border-#{$opposite-direction}-color: transparent !important; top: -($joyride-tip-nub-size*2); } &.bottom { - border-bottom-style: solid; border-color: $joyride-tip-bg !important; border-bottom-color: transparent !important; + border-bottom-style: solid; border-#{$default-float}-color: transparent !important; border-#{$opposite-direction}-color: transparent !important; bottom: -($joyride-tip-nub-size*2); @@ -116,74 +115,73 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default; .joyride-tip-guide h4, .joyride-tip-guide h5, .joyride-tip-guide h6 { + color: $joyride-tip-font-color; + font-weight: $joyride-tip-header-weight; line-height: 1.25; margin: 0; - font-weight: $joyride-tip-header-weight; - color: $joyride-tip-font-color; } .joyride-tip-guide p { - margin: rem-calc(0 0 18 0); font-size: $joyride-tip-font-size; line-height: 1.3; + margin: rem-calc(0 0 18 0); } .joyride-timer-indicator-wrap { - width: $joyride-tip-timer-width; - height: $joyride-tip-timer-height; border: $joyride-tip-border; + bottom: rem-calc(16); + height: $joyride-tip-timer-height; position: absolute; + width: $joyride-tip-timer-width; #{$opposite-direction}: rem-calc(17); - bottom: rem-calc(16); } .joyride-timer-indicator { + background: $joyride-tip-timer-color; display: block; - width: 0; height: inherit; - background: $joyride-tip-timer-color; + width: 0; } .joyride-close-tip { - position: absolute; - #{$opposite-direction}: 12px; - top: 10px; color: $joyride-tip-close-color !important; - text-decoration: none; font-size: $joyride-tip-close-size; font-weight: $joyride-tip-close-weight; line-height: .5 !important; + position: absolute; + text-decoration: none; + top: 10px; + #{$opposite-direction}: 12px; &:hover, &:focus { color: $smoke !important; } } .joyride-modal-bg { - position: fixed; - height: 100%; - width: 100%; - background: transparent; background: $joyride-screenfill; - z-index: 100; + cursor: $cursor-pointer-value; display: none; + height: 100%; + position: fixed; top: 0; + width: 100%; + z-index: 100; #{$default-float}: 0; - cursor: $cursor-pointer-value; } .joyride-expose-wrapper { background-color: $white; - position: absolute; border-radius: 3px; - z-index: 102; box-shadow: 0 0 15px $white; + position: absolute; + z-index: 102; } .joyride-expose-cover { background: transparent; border-radius: 3px; + left: 0; position: absolute; - z-index: 9999; top: 0; - left: 0; + z-index: 9999; } @@ -200,20 +198,20 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default; } &.right { border-color: $joyride-tip-bg !important; - border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; - top: $joyride-tip-position-offset; + border-top-color: transparent !important; left: auto; right: -($joyride-tip-nub-size*2); + top: $joyride-tip-position-offset; } &.left { border-color: $joyride-tip-bg !important; - border-top-color: transparent !important; - border-left-color: transparent !important; border-bottom-color: transparent !important; - top: $joyride-tip-position-offset; + border-left-color: transparent !important; + border-top-color: transparent !important; left: -($joyride-tip-nub-size*2); right: auto; + top: $joyride-tip-position-offset; } } } diff --git a/assets/scss/foundation/components/_keystrokes.scss b/assets/scss/foundation/components/_keystrokes.scss index adebd6b..28076df 100644 --- a/assets/scss/foundation/components/_keystrokes.scss +++ b/assets/scss/foundation/components/_keystrokes.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -34,7 +34,6 @@ $keystroke-radius: $global-radius !default; @mixin keystroke($bg:$keystroke-bg) { // This find the lightness percentage of the background color. $bg-lightness: lightness($bg); - background-color: $bg; border-color: scale-color($bg, $lightness: $keystroke-function-factor); @@ -44,9 +43,9 @@ $keystroke-radius: $global-radius !default; border-style: $keystroke-border-style; border-width: $keystroke-border-width; - margin: 0; font-family: $keystroke-font; font-size: $keystroke-font-size; + margin: 0; padding: $keystroke-padding; } diff --git a/assets/scss/foundation/components/_labels.scss b/assets/scss/foundation/components/_labels.scss index 8d302d8..770d82f 100644 --- a/assets/scss/foundation/components/_labels.scss +++ b/assets/scss/foundation/components/_labels.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -25,15 +25,15 @@ $label-font-family: $body-font-family !default; // // We use this mixin to create a default label base. @mixin label-base { - font-weight: $label-font-weight; + display: inline-block; font-family: $label-font-family; + font-weight: $label-font-weight; + line-height: 1; + margin-bottom: auto; + position: relative; text-align: center; text-decoration: none; - line-height: 1; white-space: nowrap; - display: inline-block; - position: relative; - margin-bottom: auto; } // @mixins diff --git a/assets/scss/foundation/components/_magellan.scss b/assets/scss/foundation/components/_magellan.scss index fb10c7d..b06a18b 100644 --- a/assets/scss/foundation/components/_magellan.scss +++ b/assets/scss/foundation/components/_magellan.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -17,9 +17,9 @@ $magellan-padding: 10px !default; #{data('magellan-expedition')}, #{data('magellan-expedition-clone')} { background: $magellan-bg; - z-index: 50; min-width: 100%; padding: $magellan-padding; + z-index: 50; .sub-nav { margin-bottom: 0; diff --git a/assets/scss/foundation/components/_offcanvas.scss b/assets/scss/foundation/components/_offcanvas.scss index 8c86532..f23da55 100644 --- a/assets/scss/foundation/components/_offcanvas.scss +++ b/assets/scss/foundation/components/_offcanvas.scss @@ -2,8 +2,8 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; -@import "type"; +@import 'global'; +@import 'type'; // Off Canvas Tab Bar Variables $include-html-off-canvas-classes: $include-html-classes !default; @@ -30,9 +30,10 @@ $tabbar-header-margin: 0 !default; $off-canvas-width: rem-calc(250) !default; $off-canvas-bg: $oil !default; $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%) !default; +$off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%) !default; // Off Canvas Menu List Variables -$off-canvas-label-padding: 0.3rem rem-calc(15) !default; +$off-canvas-label-padding: .3rem rem-calc(15) !default; $off-canvas-label-color: $aluminum !default; $off-canvas-label-text-transform: uppercase !default; $off-canvas-label-font-size: rem-calc(12) !default; @@ -42,7 +43,7 @@ $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $light $off-canvas-label-border-bottom: none !default; $off-canvas-label-margin:0 !default; $off-canvas-link-padding: rem-calc(10, 15) !default; -$off-canvas-link-color: rgba($white, 0.7) !default; +$off-canvas-link-color: rgba($white, .7) !default; $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default; $off-canvas-back-bg: #444 !default; $off-canvas-back-border-top: $off-canvas-label-border-top !default; @@ -69,9 +70,9 @@ $tabbar-hamburger-icon-gap: 6px !default; // Off Canvas Back-Link Overlay $off-canvas-overlay-transition: background 300ms ease !default; $off-canvas-overlay-cursor: pointer !default; -$off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5) !default; -$off-canvas-overlay-background: rgba($white, 0.2) !default; -$off-canvas-overlay-background-hover: rgba($white, 0.05) !default; +$off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, .5), 4px 0 4px rgba($black, .5) !default; +$off-canvas-overlay-background: rgba($white, .2) !default; +$off-canvas-overlay-background-hover: rgba($white, .05) !default; // Transition Variables $menu-slide: "transform 500ms ease" !default; @@ -90,31 +91,31 @@ $menu-slide: "transform 500ms ease" !default; width: 100%; } -@mixin translate3d($tx,$ty,$tz) { - -ms-transform: translate($tx,$ty); - -webkit-transform: translate3d($tx,$ty,$tz); - -moz-transform: translate3d($tx,$ty,$tz); - -ms-transform: translate3d($tx,$ty,$tz); - -o-transform: translate3d($tx,$ty,$tz); - transform: translate3d($tx,$ty,$tz) +@mixin translate3d($tx, $ty, $tz) { + -webkit-transform: translate3d($tx, $ty, $tz); + -moz-transform: translate3d($tx, $ty, $tz); + -ms-transform: translate($tx, $ty); + -ms-transform: translate3d($tx, $ty, $tz); + -o-transform: translate3d($tx, $ty, $tz); + transform: translate3d($tx, $ty, $tz) } // basic styles for off-canvas menu container @mixin off-canvas-menu($position) { @include kill-flicker; * { @include kill-flicker; } - width: $off-canvas-width; - top: 0; - bottom: 0; - position: absolute; - overflow-x: hidden; - overflow-y: auto; background: $off-canvas-bg; - z-index: 1001; + bottom: 0; box-sizing: content-box; - transition: transform 500ms ease 0s; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; + overflow-x: hidden; + overflow-y: auto; + position: absolute; + top: 0; + transition: transform 500ms ease 0s; + width: $off-canvas-width; + z-index: 1001; @if $position == left { @include translate3d(-100%,0,0); @@ -166,22 +167,22 @@ $menu-slide: "transform 500ms ease" !default; // z-index: 999; // Typography - h1,h2,h3,h4,h5,h6 { + h1, h2, h3, h4, h5, h6 { color: $tabbar-header-color; font-weight: $tabbar-header-weight; line-height: $tabbar-header-line-height; margin: $tabbar-header-margin; } - h1,h2,h3,h4 { font-size: $h5-font-size; } + h1, h2, h3, h4 { font-size: $h5-font-size; } } // SMALL SECTIONS // These are small sections on the left and right that contain the off-canvas toggle buttons; @mixin tabbar-small-section($position) { - width: $tabbar-icon-width; height: $tabbar-height; position: absolute; top: 0; + width: $tabbar-icon-width; @if $position == left { border-right: $tabbar-left-section-border; // box-shadow: 1px 0 0 scale-color($tabbar-bg, $lightness: 13%); @@ -195,15 +196,14 @@ $menu-slide: "transform 500ms ease" !default; } @mixin tab-bar-section { + height: $tabbar-height; padding: $tabbar-middle-padding; position: absolute; text-align: center; - height: $tabbar-height; top: 0; - @media #{$medium-up} { &.left { text-align: left; } &.right { text-align: right; } - } + // still need to make these non-presentational &.left { @@ -224,31 +224,34 @@ $menu-slide: "transform 500ms ease" !default; // This is the list of links in the off-canvas menu @mixin off-canvas-list { list-style-type: none; - padding:0; margin:0; + padding:0; li { label { - display: block; - padding: $off-canvas-label-padding; + background: $off-canvas-label-bg; + border-bottom: $off-canvas-label-border-bottom; + border-top: $off-canvas-label-border-top; color: $off-canvas-label-color; - text-transform: $off-canvas-label-text-transform; + display: block; font-size: $off-canvas-label-font-size; font-weight: $off-canvas-label-font-weight; - background: $off-canvas-label-bg; - border-top: $off-canvas-label-border-top; - border-bottom: $off-canvas-label-border-bottom; margin: $off-canvas-label-margin; + padding: $off-canvas-label-padding; + text-transform: $off-canvas-label-text-transform; } a { + border-bottom: $off-canvas-link-border-bottom; + color: $off-canvas-link-color; display: block; padding: $off-canvas-link-padding; - color: $off-canvas-link-color; - border-bottom: $off-canvas-link-border-bottom; transition: background 300ms ease; &:hover { background: $off-canvas-bg-hover; } + &:active { + background: $off-canvas-bg-active; + } } } @@ -257,28 +260,121 @@ $menu-slide: "transform 500ms ease" !default; // BACK LINK // This is an overlay that, when clicked, will toggle off the off canvas menu @mixin back-link { - @include kill-flicker; - - transition: $off-canvas-overlay-transition; - cursor: $off-canvas-overlay-cursor; - box-shadow: $off-canvas-overlay-box-shadow; - - // fill the screen - display: block; - position: absolute; - background: $off-canvas-overlay-background; - top: 0; - bottom: 0; - left:0; - right:0; - z-index: 1002; - -webkit-tap-highlight-color: rgba(0,0,0,0); + @include kill-flicker; - @media #{$medium-up} { - &:hover { - background: $off-canvas-overlay-background-hover; + box-shadow: $off-canvas-overlay-box-shadow; + cursor: $off-canvas-overlay-cursor; + transition: $off-canvas-overlay-transition; + + // fill the screen + -webkit-tap-highlight-color: rgba(0,0,0,0); + background: $off-canvas-overlay-background; + bottom: 0; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 1002; + + @media #{$medium-up} { + &:hover { + background: $off-canvas-overlay-background-hover; + } + } +} + +// +// Off-Canvas Submenu Classes +// +@mixin off-canvas-submenu($position) { + @include kill-flicker; + * { @include kill-flicker; } + -webkit-overflow-scrolling: touch; + background: $off-canvas-bg; + bottom: 0; + box-sizing: content-box; + margin: 0; + overflow-x: hidden; + overflow-y: auto; + position: absolute; + top: 0; + width: $off-canvas-width; + z-index: 1002; + @if $position == left { + @include translate3d(-100%,0,0); + left: 0; + } + @if $position == right { + @include translate3d(100%,0,0); + right: 0; + } + -webkit-transition: -webkit-#{$menu-slide}; + -moz-transition: -moz-#{$menu-slide}; + -ms-transition: -ms-#{$menu-slide}; + -o-transition: -o-#{$menu-slide}; + transition: #{$menu-slide}; + + //back button style like label + .back > a { + background: $off-canvas-back-bg; + border-bottom: $off-canvas-back-border-bottom; + border-top: $off-canvas-back-border-top; + color: $off-canvas-label-color; + font-weight: $off-canvas-label-font-weight; + padding: $off-canvas-label-padding; + text-transform: $off-canvas-label-text-transform; + + &:hover { + background: $off-canvas-back-hover-bg; + border-bottom: $off-canvas-back-hover-border-bottom; + border-top: $off-canvas-back-hover-border-top; + } + + margin: $off-canvas-label-margin; + @if $position == right { + @if $text-direction == rtl { + &:before { + @include icon-double-arrows($position: left); + } + } @else { + &:after { + @include icon-double-arrows($position: right); + } + } + } + @if $position == left { + @if $text-direction == rtl { + &:after { + @include icon-double-arrows($position: right); + } + } @else { + &:before { + @include icon-double-arrows($position: left); + } } } + } +} +//Left double angle quote or Right double angle quote chars +@mixin icon-double-arrows ($position) { + @if $position == left { + content: "\AB"; + @if $text-direction == rtl { + margin-left: .5rem; + } @else { + margin-right: .5rem; + } + } + @if $position == right { + content: "\BB"; + @if $text-direction == rtl { + margin-right: .5rem; + } @else { + margin-left: .5rem; + } + } + display: inline; } // @@ -300,14 +396,14 @@ $menu-slide: "transform 500ms ease" !default; // MENU BUTTON // This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future. .tab-bar .menu-icon { - text-indent: $tabbar-menu-icon-text-indent; - width: $tabbar-menu-icon-width; - height: $tabbar-menu-icon-height; + color: $tabbar-menu-icon-color; display: block; + height: $tabbar-menu-icon-height; padding: $tabbar-menu-icon-padding; - color: $tabbar-menu-icon-color; position: relative; + text-indent: $tabbar-menu-icon-text-indent; transform: translate3d(0,0,0); + width: $tabbar-menu-icon-width; // @include for the hamburger menu-icon // @@ -388,128 +484,35 @@ $menu-slide: "transform 500ms ease" !default; .move-right > .inner-wrap { left: $off-canvas-width; } } - } -} - -// -// Off-Canvas Submenu Classes -// -@mixin off-canvas-submenu($position) { - @include kill-flicker; - * { @include kill-flicker; } - width: $off-canvas-width; - top: 0; - bottom: 0; - position: absolute; - margin: 0; - overflow-x: hidden; - overflow-y: auto; - background: $off-canvas-bg; - z-index: 1002; - box-sizing: content-box; - -webkit-overflow-scrolling: touch; - @if $position == left { - @include translate3d(-100%,0,0); - left: 0; - } - @if $position == right { - @include translate3d(100%,0,0); - right: 0; - } - -webkit-transition: -webkit-#{$menu-slide}; - -moz-transition: -moz-#{$menu-slide}; - -ms-transition: -ms-#{$menu-slide}; - -o-transition: -o-#{$menu-slide}; - transition: #{$menu-slide}; - - //back button style like label - .back > a { - padding: $off-canvas-label-padding; - color: $off-canvas-label-color; - text-transform: $off-canvas-label-text-transform; - font-weight: $off-canvas-label-font-weight; - background: $off-canvas-back-bg; - border-top: $off-canvas-back-border-top; - border-bottom: $off-canvas-back-border-bottom; - &:hover { - background: $off-canvas-back-hover-bg; - border-top: $off-canvas-back-hover-border-top; - border-bottom: $off-canvas-back-hover-border-bottom; - } - margin: $off-canvas-label-margin; - @if $position == right { - @if $text-direction == rtl { - &:before { - @include icon-double-arrows($position: left); - } - } @else { - &:after { - @include icon-double-arrows($position: right); - } + .left-submenu { + @include off-canvas-submenu($position: left); + &.move-right, &.offcanvas-overlap-right, &.offcanvas-overlap { + @include translate3d(0%,0,0); } } - @if $position == left { - @if $text-direction == rtl { - &:after { - @include icon-double-arrows($position: right); - } - } @else { - &:before { - @include icon-double-arrows($position: left); - } + + .right-submenu { + @include off-canvas-submenu($position: right); + &.move-left, &.offcanvas-overlap-left, &.offcanvas-overlap { + @include translate3d(0%,0,0); } } - } -} -//Left double angle quote or Right double angle quote chars -@mixin icon-double-arrows ($position){ - @if $position == left { - content: "\AB"; - @if $text-direction == rtl { - margin-left: 0.5rem; - } @else { - margin-right: 0.5rem; - } - } - @if $position == right { - content: "\BB"; + @if $text-direction == rtl { - margin-right: 0.5rem; + .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { + @include icon-double-arrows($position: left); + } + .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { + @include icon-double-arrows($position: right); + } } @else { - margin-left: 0.5rem; - } - } - display: inline; -} - -@if $include-html-off-canvas-classes { - .left-submenu { - @include off-canvas-submenu($position: left); - &.move-right, &.offcanvas-overlap-right, &.offcanvas-overlap { - @include translate3d(0%,0,0); - } - } - - .right-submenu { - @include off-canvas-submenu($position: right); - &.move-left, &.offcanvas-overlap-left, &.offcanvas-overlap { - @include translate3d(0%,0,0); + .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { + @include icon-double-arrows($position: right); + } + .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { + @include icon-double-arrows($position: left); + } } - } - @if $text-direction == rtl { - .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { - @include icon-double-arrows($position: left); - } - .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { - @include icon-double-arrows($position: right); - } - } @else { - .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { - @include icon-double-arrows($position: right); - } - .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { - @include icon-double-arrows($position: left); - } } } diff --git a/assets/scss/foundation/components/_orbit.scss b/assets/scss/foundation/components/_orbit.scss index 3228d8a..dfd02d0 100644 --- a/assets/scss/foundation/components/_orbit.scss +++ b/assets/scss/foundation/components/_orbit.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // @variables // @@ -10,7 +10,7 @@ $include-html-orbit-classes: $include-html-classes !default; // We use these to control the caption styles $orbit-container-bg: none !default; -$orbit-caption-bg: rgba(51,51,51, 0.8) !default; +$orbit-caption-bg: rgba(51,51,51, .8) !default; $orbit-caption-font-color: $white !default; $orbit-caption-font-size: rem-calc(14) !default; $orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under" @@ -51,20 +51,30 @@ $orbit-timer-hide-for-small: true !default; @if $include-html-orbit-classes { @-webkit-keyframes rotate { - from { -webkit-transform: rotate(0deg); } - to { -webkit-transform: rotate(360deg); } - } - @-moz-keyframes rotate { - from { -moz-transform: rotate(0deg); } - to { -moz-transform: rotate(360deg); } - } - @-o-keyframes rotate { - from { -o-transform: rotate(0deg); } - to { -o-transform: rotate(360deg); } + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } + + @keyframes rotate { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } + from { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } } /* Orbit Graceful Loading */ @@ -98,30 +108,30 @@ $orbit-timer-hide-for-small: true !default; // Orbit preloader .#{$preloader-class} { - display: block; - width: 40px; - height: 40px; - position: absolute; - top: 50%; - left: 50%; - margin-top: -20px; - margin-left: -20px; - border: solid 3px; - border-color: $charcoal $white; @include radius(1000px); - animation-name: rotate; animation-duration: 1.5s; animation-iteration-count: infinite; + animation-name: rotate; animation-timing-function: linear; + border-color: $charcoal $white; + border: solid 3px; + display: block; + height: 40px; + left: 50%; + margin-left: -20px; + margin-top: -20px; + position: absolute; + top: 50%; + width: 40px; } } .orbit-container { + background: $orbit-container-bg; overflow: hidden; - width: 100%; position: relative; - background: $orbit-container-bg; + width: 100%; .orbit-slides-container { list-style: none; @@ -131,10 +141,14 @@ $orbit-timer-hide-for-small: true !default; // Prevents images (and captions) from disappearing after first rotation on Chrome for Android -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); img { display: block; max-width: 100%; } - &>* { + > * { position: absolute; top: 0; width: 100%; @@ -147,48 +161,51 @@ $orbit-timer-hide-for-small: true !default; &:first-child { @if $text-direction == rtl { - margin-right: 0; + margin-right: 0; } @else { - margin-left: 0; + margin-left: 0; } } .orbit-caption { @if $orbit-caption-position == "bottom" { - position: absolute; bottom: 0; + position: absolute; } @else if $orbit-caption-position == "under" { position: relative; } background-color: $orbit-caption-bg; color: $orbit-caption-font-color; - width: 100%; - padding: $orbit-caption-padding; font-size: $orbit-caption-font-size; + padding: $orbit-caption-padding; + width: 100%; } } } .orbit-slide-number { - position: absolute; - top: 10px; #{$default-float}: 10px; + background: $orbit-slide-number-bg; + color: $orbit-slide-number-font-color; font-size: 12px; + position: absolute; span { font-weight: 700; padding: $orbit-slide-number-padding;} - color: $orbit-slide-number-font-color; - background: $orbit-slide-number-bg; + top: 10px; z-index: 10; } .orbit-timer { + position: absolute; top: 12px; #{$opposite-direction}: 10px; height: 6px; width: 100px; z-index: 10; + + .orbit-progress { @if $orbit-timer-show-progress-bar { height: 3px; @@ -198,26 +215,26 @@ $orbit-timer-hide-for-small: true !default; position: relative; right: 20px; top: 5px; + } } // Play button & > span { + border: solid 4px $white; + border-bottom: none; + border-top: none; display: none; + height: 14px; position: absolute; top: 0; - #{$opposite-direction}: 0; width: 11px; - height: 14px; - border: solid 4px $white; - border-top: none; - border-bottom: none; + #{$opposite-direction}: 0; } // Pause button &.paused { & > span { - #{$opposite-direction}: -4px; top: 0; width: 11px; height: 14px; @@ -225,6 +242,8 @@ $orbit-timer-hide-for-small: true !default; border-left-style: solid; border-color: transparent; border-left-color: $white; + #{$opposite-direction}: -4px; + &.dark { border-left-color: $oil; } @@ -239,15 +258,15 @@ $orbit-timer-hide-for-small: true !default; // Let's get those controls to be right in the center on each side .orbit-prev, .orbit-next { - position: absolute; - top: 45%; - margin-top: -25px; - width: 36px; + background-color: $orbit-nav-bg; + color: white; height: 60px; line-height: 50px; - color: white; - background-color: $orbit-nav-bg; + margin-top: -25px; + position: absolute; text-indent: -9999px !important; + top: 45%; + width: 36px; z-index: 10; &:hover { @@ -255,13 +274,13 @@ $orbit-timer-hide-for-small: true !default; } & > span { + border: inset 10px; + display: block; + height: 0; + margin-top: -10px; position: absolute; top: 50%; - margin-top: -10px; - display: block; width: 0; - height: 0; - border: inset 10px; } } .orbit-prev { #{$default-float}: 0; @@ -290,23 +309,24 @@ $orbit-timer-hide-for-small: true !default; .orbit-bullets-container { text-align: center; } .orbit-bullets { + display: block; + float: none; margin: 0 auto 30px auto; overflow: hidden; position: relative; - top: 10px; - float: none; text-align: center; - display: block; + top: 10px; li { - cursor:pointer; - display: inline-block; - width: $orbit-bullet-radius; - height: $orbit-bullet-radius; background: $orbit-bullet-nav-color; + cursor: pointer; + display: inline-block; // float: $default-float; float: none; + height: $orbit-bullet-radius; margin-#{$opposite-direction}: 6px; + width: $orbit-bullet-radius; + @include radius(1000px); &.active { @@ -344,9 +364,9 @@ $orbit-timer-hide-for-small: true !default; .orbit-stack-on-small { .orbit-slides-container {height: auto !important;} .orbit-slides-container > * { + margin:0 !important; + opacity: 1 !important; position: relative; - margin:0 !important; - opacity:1 !important; } .orbit-slide-number { diff --git a/assets/scss/foundation/components/_pagination.scss b/assets/scss/foundation/components/_pagination.scss index da6aada..6e75da1 100644 --- a/assets/scss/foundation/components/_pagination.scss +++ b/assets/scss/foundation/components/_pagination.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -68,19 +68,19 @@ $pagination-link-current-active-bg: $primary-color !default; a, button { background: $pagination-link-current-background; color: $pagination-link-current-font-color; - font-weight: $pagination-link-current-font-weight; cursor: $pagination-link-current-cursor; + font-weight: $pagination-link-current-font-weight; &:hover, &:focus { background: $pagination-link-current-active-bg; } } } @else { - height: auto; - padding: $pagination-link-pad; background: $pagination-link-current-background; color: $pagination-link-current-font-color; - font-weight: $pagination-link-current-font-weight; cursor: $pagination-link-current-cursor; + font-weight: $pagination-link-current-font-weight; + height: auto; + padding: $pagination-link-pad; @include radius; &:hover, @@ -98,25 +98,25 @@ $pagination-link-current-active-bg: $primary-color !default; @if $base-style { display: block; - min-height: $pagination-height; margin-#{$default-float}: $pagination-margin; + min-height: $pagination-height; li { - height: $pagination-li-height; color: $pagination-li-font-color; font-size: $pagination-li-font-size; + height: $pagination-li-height; margin-#{$default-float}: $pagination-li-margin; a, button { - display: block; - padding: $pagination-link-pad; - color: $pagination-link-font-color; - background: none; @include radius; - font-weight: normal; + @include single-transition(background-color); + background: none; + color: $pagination-link-font-color; + display: block; font-size: 1em; + font-weight: normal; line-height: inherit; - @include single-transition(background-color); + padding: $pagination-link-pad; } &:hover a, @@ -135,11 +135,11 @@ $pagination-link-current-active-bg: $primary-color !default; // Left or center align the li elements li { @if $center { - float: none; display: inline-block; + float: none; } @else { - float: $pagination-li-float; display: block; + float: $pagination-li-float; } } } diff --git a/assets/scss/foundation/components/_panels.scss b/assets/scss/foundation/components/_panels.scss index b3018e3..123ad9c 100644 --- a/assets/scss/foundation/components/_panels.scss +++ b/assets/scss/foundation/components/_panels.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -13,10 +13,10 @@ $include-html-panel-classes: $include-html-classes !default; $panel-bg: scale-color($white, $lightness: -5%) !default; $panel-border-style: solid !default; $panel-border-size: 1px !default; +$callout-panel-bg: scale-color($primary-color, $lightness: 94%) !default; // We use this % to control how much we darken things on hover -$panel-function-factor: -11% !default; -$panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor) !default; +$panel-border-color: scale-color($panel-bg, $lightness: -11%) !default; // We use these to set default inner padding and bottom margin $panel-margin-bottom: rem-calc(20) !default; @@ -36,14 +36,20 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne // $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default // $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20) // $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true -@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) { +@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust, $border:true) { @if $bg { $bg-lightness: lightness($bg); - border-style: $panel-border-style; - border-width: $panel-border-size; - border-color: scale-color($bg, $lightness: $panel-function-factor); + @if $border { + border-style: $panel-border-style; + border-width: $panel-border-size; + border-color: $panel-border-color; + } @else { + border-style: none; + border-width: 0; + } + margin-bottom: $panel-margin-bottom; padding: $padding; @@ -52,20 +58,20 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne @else { color: $panel-font-color-alt; } // Respect the padding, fool. - &>:first-child { margin-top: 0; } - &>:last-child { margin-bottom: 0; } + > :first-child { margin-top: 0; } + > :last-child { margin-bottom: 0; } @if $adjust { // We set the font color based on the darkness of the bg. - @if $bg-lightness >= 50% { - h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; } + @if $bg-lightness >= 50% { + h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color; } } - @else { - h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; } + @else { + h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color-alt; } } // reset header line-heights for panels - h1,h2,h3,h4,h5,h6 { + h1, h2, h3, h4, h5, h6 { line-height: 1; margin-bottom: rem-calc(20) / 2; &.subheader { line-height: 1.4; } } @@ -80,7 +86,7 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne .panel { @include panel; &.callout { - @include panel(scale-color($primary-color, $lightness: 94%)); + @include panel($callout-panel-bg); a:not(.button) { color: $callout-panel-link-color; diff --git a/assets/scss/foundation/components/_pricing-tables.scss b/assets/scss/foundation/components/_pricing-tables.scss index 97b14c4..71b7b9c 100644 --- a/assets/scss/foundation/components/_pricing-tables.scss +++ b/assets/scss/foundation/components/_pricing-tables.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -75,12 +75,12 @@ $price-cta-padding: rem-calc(20 20 0) !default; // We use this mixin to create the pricing table title styles @mixin pricing-table-title { background-color: $price-title-bg; - padding: $price-title-padding; - text-align: $price-title-align; color: $price-title-color; - font-weight: $price-title-weight; - font-size: $price-title-size; font-family: $price-title-font-family; + font-size: $price-title-size; + font-weight: $price-title-weight; + padding: $price-title-padding; + text-align: $price-title-align; } // @mixins @@ -88,12 +88,12 @@ $price-cta-padding: rem-calc(20 20 0) !default; // We use this mixin to control the pricing table price styles @mixin pricing-table-price { background-color: $price-money-bg; - padding: $price-money-padding; - text-align: $price-money-align; color: $price-money-color; - font-weight: $price-money-weight; - font-size: $price-money-size; font-family: $price-money-font-family; + font-size: $price-money-size; + font-weight: $price-money-weight; + padding: $price-money-padding; + text-align: $price-money-align; } // @mixins @@ -101,13 +101,13 @@ $price-cta-padding: rem-calc(20 20 0) !default; // We use this mixin to create the description styles for the pricing table @mixin pricing-table-description { background-color: $price-bg; - padding: $price-desc-padding; - text-align: $price-desc-align; + border-bottom: $price-desc-bottom-border; color: $price-desc-color; font-size: $price-desc-font-size; font-weight: $price-desc-weight; line-height: $price-desc-line-height; - border-bottom: $price-desc-bottom-border; + padding: $price-desc-padding; + text-align: $price-desc-align; } // @mixins @@ -115,12 +115,12 @@ $price-cta-padding: rem-calc(20 20 0) !default; // We use this mixin to style the bullet items in the pricing table @mixin pricing-table-bullet { background-color: $price-bg; - padding: $price-item-padding; - text-align: $price-item-align; + border-bottom: $price-item-bottom-border; color: $price-item-color; font-size: $price-item-font-size; font-weight: $price-item-weight; - border-bottom: $price-item-bottom-border; + padding: $price-item-padding; + text-align: $price-item-align; } // @mixins @@ -128,8 +128,8 @@ $price-cta-padding: rem-calc(20 20 0) !default; // We use this mixin to style the CTA area of the pricing tables @mixin pricing-table-cta { background-color: $price-cta-bg; - text-align: $price-cta-align; padding: $price-cta-padding; + text-align: $price-cta-align; } @include exports("pricing-table") { diff --git a/assets/scss/foundation/components/_progress-bars.scss b/assets/scss/foundation/components/_progress-bars.scss index 974a710..87f88ed 100644 --- a/assets/scss/foundation/components/_progress-bars.scss +++ b/assets/scss/foundation/components/_progress-bars.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -34,10 +34,10 @@ $progress-meter-alert-color: $alert-color !default; // We use this to set up the progress bar container @mixin progress-container { background-color: $progress-bar-color; - height: $progress-bar-height; border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color; - padding: $progress-bar-pad; + height: $progress-bar-height; margin-bottom: $progress-bar-margin-bottom; + padding: $progress-bar-pad; } // @mixins @@ -45,8 +45,8 @@ $progress-meter-alert-color: $alert-color !default; // $bg - Default: $progress-meter-color || $primary-color @mixin progress-meter($bg:$progress-meter-color) { background: $bg; - height: 100%; display: block; + height: 100%; } diff --git a/assets/scss/foundation/components/_range-slider.scss b/assets/scss/foundation/components/_range-slider.scss index 1acc3ae..45f9c7b 100644 --- a/assets/scss/foundation/components/_range-slider.scss +++ b/assets/scss/foundation/components/_range-slider.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @name _range-slider.scss @@ -44,7 +44,7 @@ $range-slider-handle-round: $global-rounded !default; $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default; $range-slider-handle-cursor: pointer !default; -$range-slider-disabled-opacity: 0.7 !default; +$range-slider-disabled-opacity: .7 !default; $range-slider-disabled-cursor: $cursor-disabled-value !default; // @@ -52,19 +52,19 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default; // @mixin range-slider-bar-base($vertical: false) { - position: relative; border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color; margin: rem-calc(20 0); + position: relative; -ms-touch-action: none; touch-action: none; @if $vertical == true { display: inline-block; - width: $range-slider-vertical-bar-width; height: $range-slider-vertical-bar-height; + width: $range-slider-vertical-bar-width; } @else { display: block; - width: $range-slider-bar-width; height: $range-slider-bar-height; + width: $range-slider-bar-width; } } @mixin range-slider-bar-style( @@ -89,19 +89,20 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default; } @mixin range-slider-handle-base() { + border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color; + cursor: $range-slider-handle-cursor; display: inline-block; + height: $range-slider-handle-height; position: absolute; - z-index: 1; top: $range-slider-handle-position-top; width: $range-slider-handle-width; - height: $range-slider-handle-height; - border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color; - cursor: $range-slider-handle-cursor; + z-index: 1; // This removes the 300ms touch delay on Windows 8 -ms-touch-action: manipulation; - touch-action: manipulation; + touch-action: manipulation; } + @mixin range-slider-handle-style( $bg: true, $radius: false, @@ -118,6 +119,7 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default; background: $range-slider-handle-bg-hover-color; } } + @mixin range-slider-handle() { @include range-slider-handle-base; @include range-slider-handle-style; @@ -132,15 +134,18 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default; &.vertical-range { @include range-slider-bar-base($vertical: true); .range-slider-handle { - margin-top: 0; + bottom: -($range-slider-vertical-bar-height - $range-slider-handle-width); margin-#{$default-float}: -($range-slider-handle-width / 4); + margin-top: 0; position: absolute; - bottom: -($range-slider-vertical-bar-height - $range-slider-handle-width); } .range-slider-active-segment { - width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2)); - height: auto; + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + border-top-left-radius: initial; bottom: 0; + height: auto; + width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2)); } } &.radius { @@ -157,10 +162,12 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default; } } .range-slider-active-segment { + background: $range-slider-active-segment-bg-color; + border-bottom-left-radius: inherit; + border-top-left-radius: inherit; display: inline-block; - position: absolute; height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2)); - background: $range-slider-active-segment-bg-color; + position: absolute; } .range-slider-handle { @include range-slider-handle-base; diff --git a/assets/scss/foundation/components/_reveal.scss b/assets/scss/foundation/components/_reveal.scss index a5bc982..19c493d 100644 --- a/assets/scss/foundation/components/_reveal.scss +++ b/assets/scss/foundation/components/_reveal.scss @@ -2,8 +2,8 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; -@import "grid"; +@import 'global'; +@import 'grid'; // // @name _reveal.scss @@ -21,7 +21,7 @@ $reveal-modal-bg: $white !default; $reveal-position-top: rem-calc(100) !default; $reveal-default-width: 80% !default; $reveal-max-width: $row-width !default; -$reveal-modal-padding: rem-calc(20) !default; +$reveal-modal-padding: rem-calc(30) !default; $reveal-box-shadow: 0 0 10px rgba($black,.4) !default; // We use these to style the reveal close button @@ -52,16 +52,16 @@ $z-index-base: 1005; // We use this to create the reveal background overlay styles @mixin reveal-bg( $include-z-index-value: true ) { - position: fixed; // position: absolute; // allows modal background to extend beyond window position - top: 0; + background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future. + background: $reveal-overlay-bg; bottom: 0; + display: none; left: 0; + position: fixed; right: 0; - background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future. - background: $reveal-overlay-bg; + top: 0; z-index: if( $include-z-index-value, $z-index-base - 1, auto ); - display: none; #{$default-float}: 0; } @@ -72,13 +72,13 @@ $z-index-base: 1005; // @mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) { @if $base-style { - visibility: hidden; + border-radius: $border-radius; display: none; position: absolute; - z-index: $z-index-base; - width: 100%; top:0; - border-radius: $border-radius; + visibility: hidden; + width: 100%; + z-index: $z-index-base; #{$default-float}: 0; @media #{$small-only} { @@ -89,18 +89,18 @@ $z-index-base: 1005; .column, .columns { min-width: 0; } // Get rid of margin from first and last element inside modal - & > :first-child { margin-top: 0; } + > :first-child { margin-top: 0; } - & > :last-child { margin-bottom: 0; } + > :last-child { margin-bottom: 0; } } @if $width { @media #{$medium-up} { - width: $width; - max-width: $max-width; left: 0; - right: 0; margin: 0 auto; + max-width: $max-width; + right: 0; + width: $width; } } } @@ -152,14 +152,14 @@ $z-index-base: 1005; // // $color - Default: $reveal-close-color || $base @mixin reveal-close($color:$reveal-close-color) { + color: $color; + cursor: $cursor-pointer-value; font-size: $reveal-close-font-size; + font-weight: $reveal-close-weight; line-height: 1; position: absolute; top: $reveal-close-top; #{$opposite-direction}: $reveal-close-side; - color: $color; - font-weight: $reveal-close-weight; - cursor: $cursor-pointer-value; } @include exports("reveal") { @@ -172,7 +172,7 @@ $z-index-base: 1005; @include reveal-modal-base; @include reveal-modal-style( $bg:$reveal-modal-bg, - $padding:$reveal-modal-padding * 1.5, + $padding:$reveal-modal-padding, $border:true, $box-shadow:true, $radius:false, @@ -189,15 +189,15 @@ $z-index-base: 1005; &.xlarge { @include reveal-modal-base(false, 95%); } &.full { @include reveal-modal-base(false, 100%); - top:0; - left:0; - height:100%; height: 100vh; - min-height:100vh; - max-width: none !important; + height:100%; + left:0; margin-left: 0 !important; + max-width: none !important; + min-height:100vh; + top:0; } - + // Modals pushed to back &.toback { z-index: $z-index-base - 2; diff --git a/assets/scss/foundation/components/_side-nav.scss b/assets/scss/foundation/components/_side-nav.scss index d16be15..ba74a53 100644 --- a/assets/scss/foundation/components/_side-nav.scss +++ b/assets/scss/foundation/components/_side-nav.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @variables @@ -22,7 +22,7 @@ $side-nav-list-margin: rem-calc(0 0 7 0) !default; $side-nav-link-color: $primary-color !default; $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default; $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default; -$side-nav-link-bg-hover: hsla(0, 0, 0, 0.025) !default; +$side-nav-link-bg-hover: hsla(0, 0, 0, .025) !default; $side-nav-link-margin: 0 !default; $side-nav-link-padding: rem-calc(7 14) !default; $side-nav-font-size: rem-calc(14) !default; @@ -40,7 +40,7 @@ $side-nav-heading-text-transform: uppercase !default; // We use these to control border styles $side-nav-divider-size: 1px !default; $side-nav-divider-style: solid !default; -$side-nav-divider-color: scale-color($white, $lightness: 10%) !default; +$side-nav-divider-color: scale-color($white, $lightness: -10%) !default; // @@ -58,23 +58,24 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default; $divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color, + $link-color-active:$side-nav-link-color-active, $link-color-hover:$side-nav-link-color-hover, $link-bg-hover:$side-nav-link-bg-hover) { display: block; + font-family: $side-nav-font-family; + list-style-position: $side-nav-list-position; + list-style-type: $side-nav-list-type; margin: 0; padding: $side-nav-padding; - list-style-type: $side-nav-list-type; - list-style-position: $side-nav-list-position; - font-family: $side-nav-font-family; li { - margin: $side-nav-list-margin; font-size: $font-size; font-weight: $side-nav-font-weight; + margin: $side-nav-list-margin; a:not(.button) { - display: block; color: $link-color; + display: block; margin: $side-nav-link-margin; padding: $side-nav-link-padding; &:hover, @@ -82,19 +83,22 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default; background: $link-bg-hover; color: $link-color-hover; } + &:active { + color: $link-color-active; + } } &.active > a:first-child:not(.button) { color: $side-nav-link-color-active; - font-weight: $side-nav-font-weight-active; font-family: $side-nav-font-family-active; + font-weight: $side-nav-font-weight-active; } &.divider { border-top: $side-nav-divider-size $side-nav-divider-style; height: 0; - padding: 0; list-style: none; + padding: 0; border-top-color: $divider-color; } @@ -111,6 +115,6 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default; @include exports("side-nav") { @if $include-html-nav-classes { - .side-nav { @include side-nav; } + .side-nav {@include side-nav;} } } diff --git a/assets/scss/foundation/components/_split-buttons.scss b/assets/scss/foundation/components/_split-buttons.scss index 49f0b65..7e8a4e3 100644 --- a/assets/scss/foundation/components/_split-buttons.scss +++ b/assets/scss/foundation/components/_split-buttons.scss @@ -2,9 +2,9 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; -@import "buttons"; -@import "dropdown-buttons"; +@import 'global'; +@import 'buttons'; +@import 'dropdown-buttons'; // // @name _split-buttons.scss @@ -22,6 +22,7 @@ $split-button-function-factor: 10% !default; $split-button-pip-color: $white !default; $split-button-pip-color-alt: $oil !default; $split-button-active-bg-tint: rgba(0,0,0,0.1) !default; +$split-button-span-border-color: rgba(255,255,255,0.5) !default; // We use these to control tiny split buttons $split-button-padding-tny: $button-pip-tny * 10 !default; @@ -60,12 +61,12 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default; // // $padding - Type of padding to apply. Default: medium. Options: tiny, small, medium, large. // $pip-color - Color of the triangle. Default: $split-button-pip-color. -// $span-border - Border color of button divider. Default: $primary-color. +// $span-border - Border color of button divider. Default: $split-button-span-border-color. // $base-style - Apply base style to split button. Default: true. @mixin split-button( $padding:medium, $pip-color:$split-button-pip-color, - $span-border:$primary-color, + $span-border:$split-button-span-border-color, $base-style:true) { // With this, we can control whether or not the base styles come through. @@ -90,7 +91,6 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default; display: block; border-style: inset; top: 50%; - #{$default-float}: 50%; } @@ -101,7 +101,7 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default; // Control the border color for the span area of the split button @if $span-border { span { - border-#{$default-float}-color: rgba(255,255,255,0.5); + border-#{$default-float}-color: $span-border; } } @@ -113,8 +113,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default; &:after { border-top-style: solid; border-width: $split-button-pip-size-tny; - top: 48%; margin-#{$default-float}: $split-button-pip-default-float-tny; + top: 48%; } } } @@ -127,8 +127,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default; &:after { border-top-style: solid; border-width: $split-button-pip-size-sml; - top: 48%; margin-#{$default-float}: $split-button-pip-default-float-sml; + top: 48%; } } } @@ -141,8 +141,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default; &:after { border-top-style: solid; border-width: $split-button-pip-size-med; - top: 48%; margin-#{$default-float}: $split-button-pip-default-float-med; + top: 48%; } } } @@ -155,8 +155,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default; &:after { border-top-style: solid; border-width: $split-button-pip-size-lrg; - top: 48%; margin-#{$default-float}: $split-button-pip-default-float-lrg; + top: 48%; } } } @@ -172,9 +172,9 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default; .split.button { @include split-button; - &.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); } - &.alert { @include split-button(false, false, $alert-color, false); } - &.success { @include split-button(false, false, $success-color, false); } + &.secondary { @include split-button(false, $split-button-pip-color, $split-button-span-border-color, false); } + &.alert { @include split-button(false, false, $split-button-span-border-color, false); } + &.success { @include split-button(false, false, $split-button-span-border-color, false); } &.tiny { @include split-button(tiny, false, false, false); } &.small { @include split-button(small, false, false, false); } @@ -189,12 +189,12 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default; span:before{ border-style:none; } span:after{ border-style:none; } span>i{ - top: 50%; display: block; - position: absolute; left: 50%; margin-left: -0.28889em; margin-top: -0.48889em; + position: absolute; + top: 50%; } } } diff --git a/assets/scss/foundation/components/_sub-nav.scss b/assets/scss/foundation/components/_sub-nav.scss index e258c3a..279b635 100644 --- a/assets/scss/foundation/components/_sub-nav.scss +++ b/assets/scss/foundation/components/_sub-nav.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @name _sub-nav.scss @@ -59,10 +59,10 @@ $sub-nav-item-divider-margin: rem-calc(12) !default; $active-bg: $sub-nav-active-bg, $active-bg-hover: $sub-nav-active-bg-hover) { display: block; - width: auto; + margin: $sub-nav-list-margin; overflow: hidden; - margin-bottom: $sub-nav-list-margin; padding-top: $sub-nav-list-padding-top; + width: auto; dt { text-transform: uppercase; @@ -71,18 +71,19 @@ $sub-nav-item-divider-margin: rem-calc(12) !default; dt, dd, li { + color: $font-color; float: $default-float; - margin-#{$default-float}: rem-calc(16); - margin-bottom: 0; font-family: $sub-nav-font-family; - font-weight: $sub-nav-font-weight; font-size: $font-size; - color: $font-color; + font-weight: $sub-nav-font-weight; + margin-#{$default-float}: rem-calc(16); + margin-bottom: 0; a { - text-decoration: $sub-nav-text-decoration; color: $sub-nav-font-color; padding: $sub-nav-padding; + text-decoration: $sub-nav-text-decoration; + &:hover { color: $sub-nav-font-color-hover; } @@ -90,15 +91,17 @@ $sub-nav-item-divider-margin: rem-calc(12) !default; &.active a { @include radius($sub-nav-border-radius); - font-weight: $sub-nav-active-font-weight; background: $active-bg; - padding: $sub-nav-active-padding; - cursor: $sub-nav-active-cursor; color: $sub-nav-active-color; + cursor: $sub-nav-active-cursor; + font-weight: $sub-nav-active-font-weight; + padding: $sub-nav-active-padding; + &:hover { background: $active-bg-hover; } } + @if $sub-nav-item-divider != "" { margin-#{$default-float}: 0; diff --git a/assets/scss/foundation/components/_switches.scss b/assets/scss/foundation/components/_switches.scss index 33f4284..883d9ad 100644 --- a/assets/scss/foundation/components/_switches.scss +++ b/assets/scss/foundation/components/_switches.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @name @@ -44,24 +44,26 @@ $switch-active-color: $primary-color !default; $transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease) { - padding: 0; border: none; - position: relative; + margin-bottom: $switch-bottom-margin; outline: 0; + padding: 0; + position: relative; -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; // Default label styles for type and transition label { + background: $switch-bg; + color: transparent; + cursor: pointer; display: block; margin-bottom: ($switch-height-med / 2); position: relative; - color: transparent; - background: $switch-bg; text-indent: 100%; width: $switch-height-med * 2; height: $switch-height-med; - cursor: pointer; // Transition for the switch label to follow paddle @include single-transition(left, $transition-speed, $transition-ease); @@ -70,11 +72,11 @@ $switch-active-color: $primary-color !default; // So that we don't need to recreate the form with any JS, we use the // existing checkbox or radio button, but we cleverly position and hide it. input { + left: 10px; opacity: 0; + padding:0; position: absolute; top: 9px; - left: 10px; - padding:0; & + label { margin-left: 0; margin-right: 0; } } @@ -84,14 +86,14 @@ $switch-active-color: $primary-color !default; // the state of the input. label:after { + background: $switch-paddle-bg; content: ""; display: block; - background: $switch-paddle-bg; + height: $switch-height-med - .5rem; + left: .25rem; position: absolute; top: .25rem; - left: .25rem; - width: $switch-height-med - 0.5rem; - height: $switch-height-med - 0.5rem; + width: $switch-height-med - .5rem; -webkit-transition: left $transition-speed $transition-ease; -moz-transition: left $transition-speed $transition-ease; @@ -100,6 +102,7 @@ $switch-active-color: $primary-color !default; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); + -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } @@ -109,7 +112,7 @@ $switch-active-color: $primary-color !default; } input:checked + label:after { - left: $switch-height-med + 0.25rem; + left: $switch-height-med + .25rem; } } @@ -121,17 +124,17 @@ $switch-active-color: $primary-color !default; @mixin switch-size($height: $switch-height-med) { label { - width: $height * 2; height: $height; + width: $height * 2; } label:after { - width: $height - 0.5rem; - height: $height - 0.5rem; + height: $height - .5rem; + width: $height - .5rem; } input:checked + label:after { - left: $height + 0.25rem; + left: $height + .25rem; } } diff --git a/assets/scss/foundation/components/_tables.scss b/assets/scss/foundation/components/_tables.scss index ba3e42e..53e2c7a 100644 --- a/assets/scss/foundation/components/_tables.scss +++ b/assets/scss/foundation/components/_tables.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @name _tables.scss @@ -62,8 +62,8 @@ $table-margin-bottom: rem-calc(20) !default; @mixin table { background: $table-bg; - margin-bottom: $table-margin-bottom; border: $table-border-style $table-border-size $table-border-color; + margin-bottom: $table-margin-bottom; table-layout: $table-layout; caption { @@ -81,10 +81,10 @@ $table-margin-bottom: rem-calc(20) !default; tr { th, td { - padding: $table-head-padding; + color: $table-head-font-color; font-size: $table-head-font-size; font-weight: $table-head-font-weight; - color: $table-head-font-color; + padding: $table-head-padding; } } } @@ -95,10 +95,10 @@ $table-margin-bottom: rem-calc(20) !default; tr { th, td { - padding: $table-foot-padding; + color: $table-foot-font-color; font-size: $table-foot-font-size; font-weight: $table-foot-font-weight; - color: $table-foot-font-color; + padding: $table-foot-padding; } } } @@ -106,9 +106,9 @@ $table-margin-bottom: rem-calc(20) !default; tr { th, td { - padding: $table-row-padding; - font-size: $table-row-font-size; color: $table-row-font-color; + font-size: $table-row-font-size; + padding: $table-row-padding; text-align: $default-float; } diff --git a/assets/scss/foundation/components/_tabs.scss b/assets/scss/foundation/components/_tabs.scss index 0b1e2a6..03fcc0f 100644 --- a/assets/scss/foundation/components/_tabs.scss +++ b/assets/scss/foundation/components/_tabs.scss @@ -2,8 +2,8 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; -@import "grid"; +@import 'global'; +@import 'grid'; // // @variables @@ -31,46 +31,48 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default; @include clearfix; margin-bottom: 0 !important; margin-left: 0; - dd, .tab-title { - position: relative; - margin-bottom: 0 !important; - list-style: none; + + dd, + .tab-title { float: $default-float; + list-style: none; + margin-bottom: 0 !important; + position: relative; + > a { display: block; - background: { - color: $tabs-navigation-bg-color; - } + background-color: $tabs-navigation-bg-color; color: $tabs-navigation-font-color; - padding: $tabs-navigation-padding $tabs-navigation-padding * 2; font-family: $tabs-navigation-font-family; font-size: $tabs-navigation-font-size; + padding: $tabs-navigation-padding $tabs-navigation-padding * 2; + &:hover { - background: { - color: $tabs-navigation-hover-bg-color; - } - } - &:focus{ - outline: none; + background-color: $tabs-navigation-hover-bg-color; } } + &.active a { - background: { - color: $tabs-navigation-active-bg-color; - } - color:$tabs-navigation-active-font-color; - } + background-color: $tabs-navigation-active-bg-color; + color: $tabs-navigation-active-font-color; + } } + &.radius { - dd:first-child, .tab:first-child { + dd:first-child, + .tab:first-child { a { @include side-radius($default-float, $global-radius); } } - dd:last-child, .tab:last-child { + + dd:last-child, + .tab:last-child { a { @include side-radius($opposite-direction, $global-radius); } } } + &.vertical { - dd, .tab-title { + dd, + .tab-title { position: inherit; float: none; display: block; @@ -83,38 +85,53 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default; @include clearfix; margin-bottom: $tabs-content-margin-bottom; width: 100%; + > .content { display: none; float: $default-float; padding: $tabs-content-padding 0; width: 100%; - &.active { display: block; float: none; } - &.contained { padding: $tabs-content-padding; } + + &.active { + display: block; + float: none; + } + &.contained { + padding: $tabs-content-padding; + } } + &.vertical { display: block; - > .content { padding: 0 $tabs-content-padding; } + + > .content { + padding: 0 $tabs-content-padding; + } } } + @media #{$medium-up} { .tabs { &.vertical { - width: 20%; - max-width: 20%; float: $default-float; - margin: 0 0 $tabs-vertical-navigation-margin-bottom; + margin: 0; + margin-bottom: $tabs-vertical-navigation-margin-bottom !important; + max-width: 20%; + width: 20%; } } + .tabs-content { &.vertical { - width: 80%; - max-width: 80%; float: $default-float; margin-#{$default-float}: -1px; + max-width: 80%; padding-#{$default-float}: 1rem; + width: 80%; } } } + .no-js { .tabs-content > .content { display: block; diff --git a/assets/scss/foundation/components/_thumbs.scss b/assets/scss/foundation/components/_thumbs.scss index 4a0596e..e40a501 100644 --- a/assets/scss/foundation/components/_thumbs.scss +++ b/assets/scss/foundation/components/_thumbs.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // @name _thumbs.scss @@ -36,14 +36,14 @@ $thumb-transition-speed: 200ms !default; // $box-shadow - Box shadow to apply to thumbnail. Default: $thumb-box-shadow. // $box-shadow-hover - Box shadow to apply on hover. Default: $thumb-box-shadow-hover. @mixin thumb( - $border-width:$thumb-border-width, - $box-shadow:$thumb-box-shadow, + $border-width:$thumb-border-width, + $box-shadow:$thumb-box-shadow, $box-shadow-hover:$thumb-box-shadow-hover) { - line-height: 0; - display: inline-block; border: $thumb-border-style $border-width $thumb-border-color; - max-width: 100%; box-shadow: $box-shadow; + display: inline-block; + line-height: 0; + max-width: 100%; &:hover, &:focus { @@ -58,9 +58,9 @@ $thumb-transition-speed: 200ms !default; /* Image Thumbnails */ .th { @include thumb; - @include single-transition(all,$thumb-transition-speed,ease-out); + @include single-transition(all, $thumb-transition-speed, ease-out); &.radius { @include radius($thumb-radius); } } } -} \ No newline at end of file +} diff --git a/assets/scss/foundation/components/_tooltips.scss b/assets/scss/foundation/components/_tooltips.scss index f94ff34..c328dd1 100644 --- a/assets/scss/foundation/components/_tooltips.scss +++ b/assets/scss/foundation/components/_tooltips.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // Tooltip Variables @@ -37,9 +37,9 @@ $tooltip-max-width: 300px !default; /* Tooltips */ .has-tip { border-bottom: $has-tip-border-bottom; + color: $has-tip-font-color; cursor: $has-tip-cursor-type; font-weight: $has-tip-font-weight; - color: $has-tip-font-color; &:hover, &:focus { @@ -52,29 +52,29 @@ $tooltip-max-width: 300px !default; } .tooltip { + background: $tooltip-bg; + color: $tooltip-font-color; display: none; - position: absolute; - z-index: 1006; - font-weight: $tooltip-font-weight; font-size: $tooltip-font-size; + font-weight: $tooltip-font-weight; line-height: $tooltip-line-height; - padding: $tooltip-padding; max-width: $tooltip-max-width; - #{$default-float}: 50%; + padding: $tooltip-padding; + position: absolute; width: 100%; - color: $tooltip-font-color; - background: $tooltip-bg; + z-index: 1006; + #{$default-float}: 50%; - &>.nub { + > .nub { + border-color: transparent transparent $tooltip-bg transparent; + border: solid $tooltip-pip-size; display: block; - #{$default-float}: $tooltip-pip-size; - position: absolute; - width: 0; height: 0; - border: solid $tooltip-pip-size; - border-color: transparent transparent $tooltip-bg transparent; - top: -($tooltip-pip-size * 2); pointer-events: none; + position: absolute; + top: -($tooltip-pip-size * 2); + width: 0; + #{$default-float}: $tooltip-pip-size; &.rtl { left: auto; @@ -87,34 +87,34 @@ $tooltip-max-width: 300px !default; } &.round { @include radius($tooltip-rounded); - &>.nub { + > .nub { left: 2rem; } } &.opened { - color: $has-tip-font-color-hover !important; border-bottom: $has-tip-border-bottom-hover !important; + color: $has-tip-font-color-hover !important; } } .tap-to-close { + color: $tooltip-close-font-color; display: block; font-size: $tooltip-close-font-size; - color: $tooltip-close-font-color; font-weight: $tooltip-close-font-weight; } @media #{$small} { .tooltip { - &>.nub { + > .nub { border-color: transparent transparent $tooltip-bg transparent; top: -($tooltip-pip-size * 2); } &.tip-top>.nub { border-color: $tooltip-bg transparent transparent transparent; - top: auto; bottom: -($tooltip-pip-size * 2); + top: auto; } &.tip-left, @@ -122,17 +122,17 @@ $tooltip-max-width: 300px !default; &.tip-left>.nub { border-color: transparent transparent transparent $tooltip-bg; - right: -($tooltip-pip-size * 2); left: auto; - top: 50%; margin-top: -$tooltip-pip-size; + right: -($tooltip-pip-size * 2); + top: 50%; } &.tip-right>.nub { border-color: transparent $tooltip-bg transparent transparent; - right: auto; left: -($tooltip-pip-size * 2); - top: 50%; margin-top: -$tooltip-pip-size; + right: auto; + top: 50%; } } diff --git a/assets/scss/foundation/components/_top-bar.scss b/assets/scss/foundation/components/_top-bar.scss index 2ed3068..a399492 100644 --- a/assets/scss/foundation/components/_top-bar.scss +++ b/assets/scss/foundation/components/_top-bar.scss @@ -2,10 +2,10 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; -@import "grid"; -@import "buttons"; -@import "forms"; +@import 'global'; +@import 'grid'; +@import 'buttons'; +@import 'forms'; // // Top Bar Variables @@ -33,7 +33,7 @@ $topbar-link-weight: $font-weight-normal !default; $topbar-link-font-size: rem-calc(13) !default; $topbar-link-hover-lightness: -10% !default; // Darken by 10% $topbar-link-bg: $topbar-bg !default; -$topbar-link-bg-hover: $oil !default; +$topbar-link-bg-hover: $jet !default; $topbar-link-bg-color-hover: $charcoal !default; $topbar-link-bg-active: $primary-color !default; $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default; @@ -42,7 +42,7 @@ $topbar-link-text-transform: none !default; $topbar-link-padding: ($topbar-height / 3) !default; $topbar-back-link-size: rem-calc(18) !default; $topbar-link-dropdown-padding: rem-calc(20) !default; -$topbar-button-font-size: 0.75rem !default; +$topbar-button-font-size: .75rem !default; $topbar-button-top: 7px !default; // Style the top bar dropdown elements @@ -50,11 +50,11 @@ $topbar-dropdown-bg: $oil !default; $topbar-dropdown-link-color: $white !default; $topbar-dropdown-link-color-hover: $topbar-link-color-hover !default; $topbar-dropdown-link-bg: $oil !default; -$topbar-dropdown-link-bg-hover: $oil !default; +$topbar-dropdown-link-bg-hover: $jet !default; $topbar-dropdown-link-weight: $font-weight-normal !default; $topbar-dropdown-toggle-size: 5px !default; $topbar-dropdown-toggle-color: $white !default; -$topbar-dropdown-toggle-alpha: 0.4 !default; +$topbar-dropdown-toggle-alpha: .4 !default; $topbar-dropdown-label-color: $monsoon !default; $topbar-dropdown-label-text-transform: uppercase !default; @@ -76,7 +76,7 @@ $topbar-menu-icon-position: $opposite-direction !default; // Change to $default- $topbar-transition-speed: 300ms !default; // Using rem-calc for the below breakpoint causes issues with top bar $topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout -$topbar-media-query: $medium-up !default; +$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})"; // Top-bar input styles $topbar-input-height: rem-calc(28) !default; @@ -93,13 +93,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text // Accessibility mixins for hiding and showing the menu dropdown items @mixin topbar-hide-dropdown { // Makes an element visually hidden by default, but visible when focused. - display: block; @include element-invisible(); + display: block; } @mixin topbar-show-dropdown { - display: block; @include element-invisible-off(); + display: block; position: absolute !important; // Reset the position from static to absolute } @@ -120,67 +120,76 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text width: 100%; background: $topbar-bg; - .top-bar { margin-bottom: $topbar-margin-bottom; } + .top-bar { + margin-bottom: $topbar-margin-bottom; + } } // Wrapped around .top-bar to make it stick to the top .fixed { - width: 100%; - #{$default-float}: 0; position: fixed; top: 0; + width: 100%; z-index: 99; + #{$default-float}: 0; &.expanded:not(.top-bar) { - overflow-y: auto; height: auto; - width: 100%; max-height: 100%; + overflow-y: auto; + width: 100%; .title-area { position: fixed; width: 100%; z-index: 99; } + // Ensure you can scroll the menu on small screens .top-bar-section { - z-index: 98; margin-top: $topbar-height; + z-index: 98; } } } .top-bar { - overflow: hidden; + background: $topbar-bg; height: $topbar-height; line-height: $topbar-height; - position: relative; - background: $topbar-bg; margin-bottom: $topbar-margin-bottom; + overflow: hidden; + position: relative; // Topbar Global list Styles ul { - margin-bottom: 0; list-style: none; + margin-bottom: 0; } - .row { max-width: none; } + .row { + max-width: none; + } form, - input { margin-bottom: 0; } + input, + select { + margin-bottom: 0; + } - input { - height: $topbar-input-height; - padding-top: .35rem; - padding-bottom: .35rem; - font-size: $topbar-button-font-size; + input, + select { + font-size: $topbar-button-font-size; + height: $topbar-input-height; + padding-bottom: .35rem; + padding-top: .35rem; } .button, button { - padding-top: .35rem + rem-calc(1); - padding-bottom: .35rem + rem-calc(1); - margin-bottom: 0; font-size: $topbar-button-font-size; + margin-bottom: 0; + padding-bottom: .35rem + rem-calc(1); + padding-top: .35rem + rem-calc(1); // position: relative; // top: -1px; @@ -193,26 +202,26 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text // Title Area .title-area { - position: relative; margin: 0; + position: relative; } .name { + font-size: $rem-base; height: $topbar-height; margin: 0; - font-size: $rem-base; - // @if $topbar-menu-icon-position == $default-float {float: $opposite-direction;} h1, h2, h3, h4, p, span { - line-height: $topbar-height; font-size: $topbar-title-font-size; + line-height: $topbar-height; margin: 0; + a { - font-weight: $topbar-title-weight; color: $topbar-link-color; - width: 75%; display: block; + font-weight: $topbar-title-weight; padding: 0 $topbar-link-padding; + width: 75%; } } } @@ -225,59 +234,50 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text a { color: $topbar-link-color; - text-transform: $topbar-menu-link-transform; + display: block; font-size: $topbar-menu-link-font-size; font-weight: $topbar-menu-link-weight; - position: relative; - display: block; - padding: 0 $topbar-link-padding; height: $topbar-height; line-height: $topbar-height; + padding: 0 $topbar-link-padding; + position: relative; + text-transform: $topbar-menu-link-transform; } // Adding the class "menu-icon" will add the 3-line icon people love and adore. &.menu-icon { - top: 50%; margin-top: -16px; + top: 50%; a { + @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false); + @if $text-direction == rtl { text-indent: -58px; } + color: $topbar-menu-link-color; height: 34px; line-height: 33px; padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding; - color: $topbar-menu-link-color; position: relative; - - & { - // @include hamburger icon - // - // We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon - // $width - Width of hamburger icon - // $left - If false, icon will be centered horizontally || explicitly set value in rem - // $top - If false, icon will be centered vertically || explicitly set value in rem - // $thickness - thickness of lines in hamburger icon, set value in px - // $gap - spacing between the lines in hamburger icon, set value in px - // $color - icon color - // $hover-color - icon color during hover, here it isn't set b/c it would override $topbar-menu-icon-color-toggled - // $offcanvas - Set to false of @include in topbar - @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false); - } } } } // Change things up when the top-bar is expanded &.expanded { - height: auto; background: transparent; + height: auto; - .title-area { background: $topbar-bg; } + .title-area { + background: $topbar-bg; + } .toggle-topbar { - a { color: $topbar-menu-link-color-toggled; - span::after { + a { + color: $topbar-menu-link-color-toggled; + + span::after { // Shh, don't tell, but box-shadows create the menu icon :) // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled, @@ -286,6 +286,21 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } } } + + // Fixes an issue with Desktop and Mobile Safari where deeply-nested menus don't appear + @media screen and (-webkit-min-device-pixel-ratio:0) { + .top-bar-section { + .has-dropdown.moved > .dropdown, + .dropdown { + clip: initial; + } + + // This was needed as parent ul's had padding, and the clip: was allowing content to peak through + .has-dropdown:not(.moved) > ul { + padding: 0; + } + } + } } } @@ -297,12 +312,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text @include single-transition($default-float, $topbar-transition-speed); ul { - padding: 0; - width: 100%; - height: auto; display: block; font-size: $rem-base; + height: auto; margin: 0; + padding: 0; + width: 100%; } .divider, @@ -315,54 +330,60 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text ul li { background: $topbar-dropdown-bg; - & > a { - display: block; - width: 100%; + + > a { color: $topbar-link-color; - padding: 12px 0 12px 0; - padding-#{$default-float}: $topbar-link-padding; + display: block; font-family: $topbar-link-font-family; font-size: $topbar-link-font-size; font-weight: $topbar-link-weight; + padding-#{$default-float}: $topbar-link-padding; + padding: 12px 0 12px $topbar-link-padding; text-transform: $topbar-link-text-transform; + width: 100%; &.button { font-size: $topbar-link-font-size; - padding-#{$opposite-direction}: $topbar-link-padding; padding-#{$default-float}: $topbar-link-padding; + padding-#{$opposite-direction}: $topbar-link-padding; @include button-style($bg:$primary-color); } + &.button.secondary { @include button-style($bg:$secondary-color); } &.button.success { @include button-style($bg:$success-color); } &.button.alert { @include button-style($bg:$alert-color); } &.button.warning { @include button-style($bg:$warning-color); } + &.button.info { @include button-style($bg:$info-color); } } > button { font-size: $topbar-link-font-size; - padding-#{$opposite-direction}: $topbar-link-padding; padding-#{$default-float}: $topbar-link-padding; + padding-#{$opposite-direction}: $topbar-link-padding; @include button-style($bg:$primary-color); &.secondary { @include button-style($bg:$secondary-color); } &.success { @include button-style($bg:$success-color); } &.alert { @include button-style($bg:$alert-color); } &.warning { @include button-style($bg:$warning-color); } + &.info { @include button-style($bg:$info-color); } } // Apply the hover link color when it has that class &:hover:not(.has-form) > a { background-color: $topbar-link-bg-color-hover; + color: $topbar-link-color-hover; + @if ($topbar-link-bg-hover) { background: $topbar-link-bg-hover; } - color: $topbar-link-color-hover; } // Apply the active link color when it has that class &.active > a { background: $topbar-link-bg-active; color: $topbar-link-color-active; + &:hover { background: $topbar-link-bg-active-hover; color: $topbar-link-color-active-hover; @@ -371,17 +392,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } // Add some extra padding for list items contains buttons - .has-form { padding: $topbar-link-padding; } + .has-form { + padding: $topbar-link-padding; + } // Styling for list items that have a dropdown within them. .has-dropdown { position: relative; - & > a { + > a { &:after { - @if ($topbar-arrows){ + @if ($topbar-arrows) { @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float); } + margin-#{$opposite-direction}: $topbar-link-padding; margin-top: -($topbar-dropdown-toggle-size / 2) - 2; position: absolute; @@ -390,12 +414,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } } - &.moved { position: static; - & > .dropdown { + &.moved { + position: static; + + > .dropdown { @include topbar-show-dropdown(); width: 100%; } - & > a:after { + + > a:after { display: none; } } @@ -403,16 +430,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text // Styling elements inside of dropdowns .dropdown { + @include topbar-hide-dropdown(); padding: 0; position: absolute; - #{$default-float}: 100%; top: 0; z-index: 99; - @include topbar-hide-dropdown(); + #{$default-float}: 100%; li { - width: 100%; height: auto; + width: 100%; a { font-weight: $topbar-dropdown-link-weight; @@ -422,7 +449,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } } - &.title h5, &.parent-link { + &.title h5, + &.parent-link { // Back Button margin-bottom: 0; margin-top: 0; @@ -434,17 +462,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text &:hover { background:none; } } } - &.has-form { padding: 8px $topbar-link-padding; } - .button, button { top: auto; } + + &.has-form { + padding: 8px $topbar-link-padding; + } + + .button, + button { + top: auto; + } } label { - padding: 8px $topbar-link-padding 2px; - margin-bottom: 0; - text-transform: $topbar-dropdown-label-text-transform; color: $topbar-dropdown-label-color; - font-weight: $topbar-dropdown-label-font-weight; font-size: $topbar-dropdown-label-font-size; + font-weight: $topbar-dropdown-label-font-weight; + margin-bottom: 0; + padding: 8px $topbar-link-padding 2px; + text-transform: $topbar-dropdown-label-text-transform; } } } @@ -455,8 +490,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text // Top Bar styles intended for screen sizes above the breakpoint. @media #{$topbar-media-query} { .top-bar { - background: $topbar-bg; @include clearfix; + background: $topbar-bg; overflow: visible; .toggle-topbar { display: none; } @@ -470,21 +505,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text .name h6 a { width: auto; } input, + select, .button, button { font-size: rem-calc(14); - position: relative; height: $topbar-input-height; + position: relative; top: (($topbar-height - $topbar-input-height) / 2); } - &.expanded { background: $topbar-bg; } + &.expanded { + background: $topbar-bg; + } } .contain-to-grid .top-bar { - max-width: $row-width; - margin: 0 auto; margin-bottom: $topbar-margin-bottom; + margin: 0 auto; + max-width: $row-width; } .top-bar-section { @@ -492,9 +530,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text #{$default-float}: 0 !important; ul { - width: auto; - height: auto !important; display: inline; + height: auto !important; + width: auto; li { float: $default-float; @@ -512,11 +550,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text color: $topbar-link-color-hover; } } + &:not(.has-form) { a:not(.button) { - padding: 0 $topbar-link-padding; - line-height: $topbar-height; background: $topbar-link-bg; + line-height: $topbar-height; + padding: 0 $topbar-link-padding; &:hover { background-color: $topbar-link-bg-color-hover; @if ($topbar-link-bg-hover) { @@ -525,12 +564,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } } } + &.active:not(.has-form) { a:not(.button) { - padding: 0 $topbar-link-padding; - line-height: $topbar-height; - color: $topbar-link-color-active; background: $topbar-link-bg-active; + color: $topbar-link-color-active; + line-height: $topbar-height; + padding: 0 $topbar-link-padding; &:hover { background: $topbar-link-bg-active-hover; color: $topbar-link-color-active-hover; @@ -540,8 +580,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } .has-dropdown { - @if($topbar-arrows){ - & > a { + @if $topbar-arrows { + > a { padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important; &:after { @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top); @@ -552,30 +592,30 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } &.moved { position: relative; - & > .dropdown { + > .dropdown { @include topbar-hide-dropdown(); } } &.hover, &.not-click:hover { - & > .dropdown { + > .dropdown { @include topbar-show-dropdown(); } } + > a:focus + .dropdown { @include topbar-show-dropdown(); } .dropdown li.has-dropdown { - & > a { - @if ($topbar-dropdown-arrows){ + > a { + @if ($topbar-dropdown-arrows) { &:after { border: none; content: "\00bb"; - top: 1rem; - margin-top: -1px; + top: rem-calc(3); + #{$opposite-direction}: 5px; - line-height: 1.2; } } } @@ -584,28 +624,28 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text .dropdown { #{$default-float}: 0; - top: auto; background: transparent; min-width: 100%; + top: auto; li { a { + background: $topbar-dropdown-link-bg; color: $topbar-dropdown-link-color; line-height: $topbar-height; - white-space: nowrap; padding: 12px $topbar-link-padding; - background: $topbar-dropdown-link-bg; + white-space: nowrap; } &:not(.has-form):not(.active) { - & > a:not(.button) { - color: $topbar-dropdown-link-color; + > a:not(.button) { background: $topbar-dropdown-link-bg; + color: $topbar-dropdown-link-color; } &:hover > a:not(.button) { - color: $topbar-dropdown-link-color-hover; background-color: $topbar-link-bg-color-hover; + color: $topbar-dropdown-link-color-hover; @if ($topbar-dropdown-link-bg-hover) { background: $topbar-dropdown-link-bg-hover; } @@ -613,8 +653,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } label { - white-space: nowrap; background: $topbar-dropdown-label-bg; + white-space: nowrap; } // Second Level Dropdowns @@ -625,11 +665,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } } - & > ul > .divider, - & > ul > [role="separator"] { + > ul > .divider, + > ul > [role="separator"] { + border-#{$opposite-direction}: $topbar-divider-border-bottom; border-bottom: none; border-top: none; - border-#{$opposite-direction}: $topbar-divider-border-bottom; clear: none; height: $topbar-height; width: 0; @@ -637,8 +677,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text .has-form { background: $topbar-link-bg; - padding: 0 $topbar-link-padding; height: $topbar-height; + padding: 0 $topbar-link-padding; } // Position overrides for ul.right and ul.left @@ -682,10 +722,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text .has-dropdown { &:hover { - & > .dropdown { + > .dropdown { @include topbar-show-dropdown(); } } + > a:focus + .dropdown { @include topbar-show-dropdown(); } diff --git a/assets/scss/foundation/components/_type.scss b/assets/scss/foundation/components/_type.scss index 15e4aed..57ad455 100644 --- a/assets/scss/foundation/components/_type.scss +++ b/assets/scss/foundation/components/_type.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; $include-html-type-classes: $include-html-classes !default; @@ -216,8 +216,8 @@ $align-class-breakpoints: /* Default Link Styles */ a { color: $anchor-font-color; - text-decoration: $anchor-text-decoration; line-height: inherit; + text-decoration: $anchor-text-decoration; &:hover, &:focus { @@ -233,8 +233,8 @@ $align-class-breakpoints: /* Default paragraph styles */ p { font-family: $paragraph-font-family; - font-weight: $paragraph-font-weight; font-size: $paragraph-font-size; + font-weight: $paragraph-font-weight; line-height: $paragraph-line-height; margin-bottom: $paragraph-margin-bottom; text-rendering: $paragraph-text-rendering; @@ -243,25 +243,25 @@ $align-class-breakpoints: & aside { font-size: $paragraph-aside-font-size; - line-height: $paragraph-aside-line-height; font-style: $paragraph-aside-font-style; + line-height: $paragraph-aside-line-height; } } /* Default header styles */ h1, h2, h3, h4, h5, h6 { + color: $header-font-color; font-family: $header-font-family; - font-weight: $header-font-weight; font-style: $header-font-style; - color: $header-font-color; - text-rendering: $header-text-rendering; - margin-top: $header-top-margin; - margin-bottom: $header-bottom-margin; + font-weight: $header-font-weight; line-height: $header-line-height; + margin-bottom: $header-bottom-margin; + margin-top: $header-top-margin; + text-rendering: $header-text-rendering; small { - font-size: $small-font-size; color: $small-font-color; + font-size: $small-font-size; line-height: 0; } } @@ -279,8 +279,8 @@ $align-class-breakpoints: border: $hr-border-style $hr-border-color; border-width: $hr-border-width 0 0; clear: both; - margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width)); height: 0; + margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width)); } /* Helpful Typography Defaults */ @@ -302,13 +302,13 @@ $align-class-breakpoints: } code { - font-family: $code-font-family; - font-weight: $code-font-weight; - color: $code-color; background-color: $code-background-color; - border-width: $code-border-size; - border-style: $code-border-style; border-color: $code-border-color; + border-style: $code-border-style; + border-width: $code-border-size; + color: $code-color; + font-family: $code-font-family; + font-weight: $code-font-weight; padding: $code-padding; } @@ -316,11 +316,11 @@ $align-class-breakpoints: ul, ol, dl { + font-family: $list-font-family; font-size: $list-font-size; line-height: $list-line-height; - margin-bottom: $list-margin-bottom; list-style-position: $list-style-position; - font-family: $list-font-family; + margin-bottom: $list-margin-bottom; } ul { @@ -452,7 +452,7 @@ $align-class-breakpoints: @media #{$medium-up} { - h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; } + h1, h2, h3, h4, h5, h6 { line-height: $header-line-height; } h1 { font-size: $h1-font-size; } h2 { font-size: $h2-font-size; } h3 { font-size: $h3-font-size; } diff --git a/assets/scss/foundation/components/_visibility.scss b/assets/scss/foundation/components/_visibility.scss index 2dd7811..f4bfebc 100644 --- a/assets/scss/foundation/components/_visibility.scss +++ b/assets/scss/foundation/components/_visibility.scss @@ -2,7 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source -@import "global"; +@import 'global'; // // Foundation Visibility Classes @@ -276,8 +276,8 @@ $visibility-breakpoint-queries: } } - -@if $include-html-visibility-classes != false { +@include exports("visibility"){ + @if $include-html-visibility-classes != false { @include visibility-loop; @@ -390,6 +390,19 @@ $visibility-breakpoint-queries: th.hide-for-touch { display: table-cell !important; } .touch th.show-for-touch { display: table-cell !important; } + /* Screen reader-specific classes */ + .show-for-sr { + @include element-invisible; + } + .show-on-focus { + @include element-invisible; + + &:focus, + &:active { + @include element-invisible-off; + } + } + // Only include these styles if you want them. @if $include-print-styles { /* @@ -402,8 +415,8 @@ $visibility-breakpoint-queries: @media print { * { background: transparent !important; - color: $black !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; + color: $black !important; /* Black prints faster: h5bp.com/s */ text-shadow: none !important; } .show-for-print { display: block; } @@ -440,7 +453,7 @@ $visibility-breakpoint-queries: img { max-width: 100% !important; } - @page { margin: 0.5cm; } + @page { margin: .5cm; } p, h2, @@ -470,5 +483,10 @@ $visibility-breakpoint-queries: tr.show-for-print { display: table-row !important; } td.show-for-print { display: table-cell !important; } th.show-for-print { display: table-cell !important; } + } + + @media not print{ + .show-for-print { display: none !important; } + } } } diff --git a/assets/scss/style.scss b/assets/scss/style.scss index f50a3d1..5bbbdd9 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -256,6 +256,7 @@ body { } .post-view-content { margin-top: rem-calc(60); + overflow-x: hidden; } .post-meta { font-family: $headers-font; diff --git a/default.hbs b/default.hbs index d5573a9..451e8ed 100644 --- a/default.hbs +++ b/default.hbs @@ -15,7 +15,7 @@ {{! Styles - Foundation 5 included}} - + {{!-- styles for syntax highlighter you will find more here: https://github.com/isagalaev/highlight.js/tree/master/src/styles just change .min.css file name below --}} diff --git a/package.json b/package.json index e0aec98..dba0158 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "Abc", - "version": "1.5.0", + "version": "1.5.1", "devDependencies": { - "load-grunt-tasks": "~3.1.0", - "node-sass": "~2.1.1", - "grunt-sass": "~0.18.1", + "load-grunt-tasks": "~3.2.0", + "node-sass": "~3.2.0", + "grunt-sass": "~1.0.0", "grunt": "~0.4.5", "grunt-contrib-watch": "~0.6.1" }