From 961766ca2f5a1fc453b85edb6ab6f9a6d04c4e87 Mon Sep 17 00:00:00 2001 From: Ian Weller Date: Thu, 18 Aug 2016 16:56:35 -0400 Subject: [PATCH] I think I may have it right --- css/app.css | 78 ++++++++++++++++++-------------------- css/app.css.map | 2 +- index.php | 30 ++++++++------- lib/menu-walker.php | 10 ++--- lib/navigation.php | 40 ++++++++++--------- scss/_left-off-canvas.scss | 44 +++++++++++++++------ scss/_settings.scss | 4 +- 7 files changed, 116 insertions(+), 92 deletions(-) diff --git a/css/app.css b/css/app.css index ab67fc2..812b58a 100644 --- a/css/app.css +++ b/css/app.css @@ -1829,26 +1829,6 @@ select { :last-child > .accordion-content:last-child { border-bottom: 1px solid #e6e6e6; } -.is-accordion-submenu-parent > a { - position: relative; } - .is-accordion-submenu-parent > a::after { - content: ''; - display: block; - width: 0; - height: 0; - border: inset 6px; - border-color: #2199e8 transparent transparent; - border-top-style: solid; - border-bottom-width: 0; - position: absolute; - top: 50%; - margin-top: -4px; - right: 1rem; } - -.is-accordion-submenu-parent[aria-expanded='true'] > a::after { - transform-origin: 50% 50%; - transform: scaleY(-1); } - .badge { display: inline-block; padding: 0.3em; @@ -4743,23 +4723,21 @@ h5 { div.off-canvas { height: 100%; } -aside.left-off-canvas-menu li { +div.off-canvas li { display: block; overflow: hidden; position: relative; padding: 4px 8px; } -aside.left-off-canvas-menu .off-canvas-list ul li a { +div.off-canvas ul li a { line-height: 20px; - color: white; - border-bottom: 1px solid #b1b3b6; background-repeat: no-repeat; background-position: 3px 50%; } div.off-canvas li.page_item_has_children a.toggle { position: absolute; - right: 10px; - top: 5px; + right: 0; + top: 15px; text-decoration: none; } div.off-canvas li.page_item_has_children a.toggle:before { content: '>'; @@ -4793,16 +4771,21 @@ div.off-canvas ul li > ul li > a { div.off-canvas ul.open { display: block; } + div.off-canvas ul.open.is-dropdown-submenu { + left: 0; + top: 45px; + position: static; } div.off-canvas ul.menu { list-style: none; } div.off-canvas ul.menu li { padding: 15px 0 0; } + div.off-canvas ul.menu li:last-child { + padding-bottom: 10px; } div.off-canvas ul.menu li a { color: #FFFFFF; font-size: 1.25rem; - line-height: 150%; - border-color: white; } + line-height: 150%; } div.off-canvas ul.menu li a:hover { color: #f28728; } div.off-canvas ul.menu li .dropdown { @@ -4810,21 +4793,32 @@ div.off-canvas ul.menu { div.off-canvas ul.menu ul { list-style: none; padding: 10px 0; } - div.off-canvas ul.menu ul li a { - color: #FFFFFF; - background: transparent; } - div.off-canvas ul.menu ul li ul { - list-style: none; } - div.off-canvas ul.menu ul li ul li a { - width: 85%; - display: block; - white-space: pre-wrap; } - -.social-contact { + div.off-canvas ul.menu ul li { + padding: 5px 0 0; } + div.off-canvas ul.menu ul li a { + color: #FFFFFF; + background: transparent; } + div.off-canvas ul.menu ul li ul { + list-style: none; } + div.off-canvas ul.menu ul li ul li a { + width: 85%; + display: block; + white-space: pre-wrap; } + +#social-contact { background: #f3ebd7; } - .social-contact ul.menu li { - padding: 5px 0; - font-size: 0.875rem; } + #social-contact ul { + margin-bottom: auto; } + #social-contact ul.offcavas-social-list { + margin-left: auto; } + #social-contact ul.offcavas-social-list li { + padding: 0; + font-size: 0.875rem; + display: inline-block; + margin: 0 0.625rem; } + #social-contact ul li { + padding: 5px 0; + font-size: 0.875rem; } .offcavas-social-list { margin-left: auto; } diff --git a/css/app.css.map b/css/app.css.map index 323c0a4..8109f5a 100644 --- a/css/app.css.map +++ b/css/app.css.map @@ -1 +1 @@ -{"version":3,"file":"app.css","sources":["app.scss","_settings.scss","../bower_components/foundation-sites/scss/util/_util.scss","../bower_components/foundation-sites/scss/util/_unit.scss","../bower_components/foundation-sites/scss/util/_value.scss","../bower_components/foundation-sites/scss/util/_color.scss","../bower_components/foundation-sites/scss/util/_selector.scss","../bower_components/foundation-sites/scss/util/_flex.scss","../bower_components/foundation-sites/scss/util/_breakpoint.scss","../bower_components/foundation-sites/scss/util/_mixins.scss","../bower_components/foundation-sites/scss/foundation.scss","../bower_components/foundation-sites/scss/util/_util.scss","../bower_components/foundation-sites/scss/_global.scss","../bower_components/foundation-sites/scss/grid/_grid.scss","../bower_components/foundation-sites/scss/grid/_row.scss","../bower_components/foundation-sites/scss/grid/_column.scss","../bower_components/foundation-sites/scss/grid/_size.scss","../bower_components/foundation-sites/scss/grid/_position.scss","../bower_components/foundation-sites/scss/grid/_gutter.scss","../bower_components/foundation-sites/scss/grid/_classes.scss","../bower_components/foundation-sites/scss/grid/_layout.scss","../bower_components/foundation-sites/scss/grid/_flex-grid.scss","../bower_components/foundation-sites/scss/typography/_typography.scss","../bower_components/foundation-sites/scss/typography/_base.scss","../bower_components/foundation-sites/scss/typography/_helpers.scss","../bower_components/foundation-sites/scss/typography/_alignment.scss","../bower_components/foundation-sites/scss/typography/_print.scss","../bower_components/foundation-sites/scss/forms/_forms.scss","../bower_components/foundation-sites/scss/forms/_text.scss","../bower_components/foundation-sites/scss/forms/_checkbox.scss","../bower_components/foundation-sites/scss/forms/_label.scss","../bower_components/foundation-sites/scss/forms/_help-text.scss","../bower_components/foundation-sites/scss/forms/_input-group.scss","../bower_components/foundation-sites/scss/forms/_fieldset.scss","../bower_components/foundation-sites/scss/forms/_select.scss","../bower_components/foundation-sites/scss/forms/_range.scss","../bower_components/foundation-sites/scss/forms/_progress.scss","../bower_components/foundation-sites/scss/forms/_meter.scss","../bower_components/foundation-sites/scss/forms/_error.scss","../bower_components/foundation-sites/scss/components/_visibility.scss","../bower_components/foundation-sites/scss/components/_float.scss","../bower_components/foundation-sites/scss/components/_button.scss","../bower_components/foundation-sites/scss/components/_button-group.scss","../bower_components/foundation-sites/scss/components/_accordion-menu.scss","../bower_components/foundation-sites/scss/components/_accordion.scss","../bower_components/foundation-sites/scss/components/_badge.scss","../bower_components/foundation-sites/scss/components/_breadcrumbs.scss","../bower_components/foundation-sites/scss/components/_callout.scss","../bower_components/foundation-sites/scss/components/_close-button.scss","../bower_components/foundation-sites/scss/components/_drilldown.scss","../bower_components/foundation-sites/scss/components/_dropdown-menu.scss","../bower_components/foundation-sites/scss/components/_dropdown.scss","../bower_components/foundation-sites/scss/components/_flex.scss","../bower_components/foundation-sites/scss/components/_flex-video.scss","../bower_components/foundation-sites/scss/components/_label.scss","../bower_components/foundation-sites/scss/components/_media-object.scss","../bower_components/foundation-sites/scss/components/_menu.scss","../bower_components/foundation-sites/scss/components/_menu-icon.scss","../bower_components/foundation-sites/scss/components/_off-canvas.scss","../bower_components/foundation-sites/scss/components/_orbit.scss","../bower_components/foundation-sites/scss/components/_pagination.scss","../bower_components/foundation-sites/scss/components/_progress-bar.scss","../bower_components/foundation-sites/scss/components/_reveal.scss","../bower_components/foundation-sites/scss/components/_slider.scss","../bower_components/foundation-sites/scss/components/_sticky.scss","../bower_components/foundation-sites/scss/components/_switch.scss","../bower_components/foundation-sites/scss/components/_table.scss","../bower_components/foundation-sites/scss/components/_tabs.scss","../bower_components/foundation-sites/scss/components/_title-bar.scss","../bower_components/foundation-sites/scss/components/_top-bar.scss","../bower_components/foundation-sites/scss/components/_thumbnail.scss","../bower_components/foundation-sites/scss/components/_tooltip.scss","../bower_components/motion-ui/src/motion-ui.scss","../bower_components/motion-ui/src/_settings.scss","../bower_components/motion-ui/src/util/_animation.scss","../bower_components/motion-ui/src/util/_args.scss","../bower_components/motion-ui/src/util/_keyframe.scss","../bower_components/motion-ui/src/util/_selector.scss","../bower_components/motion-ui/src/util/_series.scss","../bower_components/motion-ui/src/util/_transition.scss","../bower_components/motion-ui/src/util/_unit.scss","../bower_components/motion-ui/src/effects/_fade.scss","../bower_components/motion-ui/src/effects/_hinge.scss","../bower_components/motion-ui/src/effects/_spin.scss","../bower_components/motion-ui/src/effects/_zoom.scss","../bower_components/motion-ui/src/effects/_shake.scss","../bower_components/motion-ui/src/effects/_slide.scss","../bower_components/motion-ui/src/effects/_wiggle.scss","../bower_components/motion-ui/src/transitions/_fade.scss","../bower_components/motion-ui/src/transitions/_hinge.scss","../bower_components/motion-ui/src/transitions/_zoom.scss","../bower_components/motion-ui/src/transitions/_slide.scss","../bower_components/motion-ui/src/transitions/_spin.scss","../bower_components/motion-ui/src/_classes.scss","_mixins.scss","mixins/_gradient.scss","mixins/_off-canvas-arrow.scss","_wordpress.scss","_defaults.scss","_body.scss","_page.header.scss","_topbar.scss","_main.scss","_slideshow.scss","_plugins.scss","plugins/_nextgen.scss","plugins/_gravityForms.scss","plugins/_events.scss","_blog.scss","_sidebar.scss","_search.scss","_page.footer.scss","_copyright.scss","_structure.scss","_left-off-canvas.scss"],"sourcesContent":["@charset 'utf-8';\r\n\r\n@import 'settings';\r\n@import 'foundation';\r\n@import 'motion-ui';\r\n@import \"mixins\";\r\n@include foundation-global-styles;\r\n@include foundation-grid;\r\n// @include foundation-flex-grid;\r\n@include foundation-typography;\r\n@include foundation-button;\r\n@include foundation-forms;\r\n// @include foundation-range-input;\r\n@include foundation-accordion;\r\n@include foundation-accordion-menu;\r\n@include foundation-badge;\r\n@include foundation-breadcrumbs;\r\n@include foundation-button-group;\r\n@include foundation-callout;\r\n@include foundation-close-button;\r\n@include foundation-menu;\r\n@include foundation-menu-icon;\r\n@include foundation-drilldown-menu;\r\n@include foundation-dropdown;\r\n@include foundation-dropdown-menu;\r\n@include foundation-flex-video;\r\n@include foundation-label;\r\n@include foundation-media-object;\r\n@include foundation-off-canvas;\r\n@include foundation-orbit;\r\n@include foundation-pagination;\r\n@include foundation-progress-bar;\r\n// @include foundation-progress-element;\r\n// @include foundation-meter-element;\r\n@include foundation-slider;\r\n@include foundation-sticky;\r\n@include foundation-reveal;\r\n@include foundation-switch;\r\n@include foundation-table;\r\n@include foundation-tabs;\r\n@include foundation-thumbnail;\r\n@include foundation-title-bar;\r\n@include foundation-tooltip;\r\n@include foundation-top-bar;\r\n@include foundation-visibility-classes;\r\n@include foundation-float-classes;\r\n// @include foundation-flex-classes;\r\n//\r\n@include motion-ui-transitions;\r\n@include motion-ui-animations;\r\n@import \"wordpress\";\r\n@import \"defaults\";\r\n@import \"body\";\r\n@import \"page.header\";\r\n@import \"topbar\";\r\n@import \"main\";\r\n@import \"slideshow\";\r\n@import \"plugins\";\r\n@import \"blog\";\r\n@import \"sidebar\";\r\n@import \"search\";\r\n@import \"page.footer\";\r\n@import \"copyright\";\r\n@import \"structure\";\r\n@import \"left-off-canvas\";\r\n//@import \"right-off-canvas\";\r\n\r\n\r\n","// Foundation for Sites Settings\r\n// -----------------------------\r\n//\r\n// Table of Contents:\r\n//\r\n// 1. Global\r\n// 2. Breakpoints\r\n// 3. The Grid\r\n// 4. Base Typography\r\n// 5. Typography Helpers\r\n// 6. Abide\r\n// 7. Accordion\r\n// 8. Accordion Menu\r\n// 9. Badge\r\n// 10. Breadcrumbs\r\n// 11. Button\r\n// 12. Button Group\r\n// 13. Callout\r\n// 14. Close Button\r\n// 15. Drilldown\r\n// 16. Dropdown\r\n// 17. Dropdown Menu\r\n// 18. Flex Video\r\n// 19. Forms\r\n// 20. Label\r\n// 21. Media Object\r\n// 22. Menu\r\n// 23. Meter\r\n// 24. Off-canvas\r\n// 25. Orbit\r\n// 26. Pagination\r\n// 27. Progress Bar\r\n// 28. Reveal\r\n// 29. Slider\r\n// 30. Switch\r\n// 31. Table\r\n// 32. Tabs\r\n// 33. Thumbnail\r\n// 34. Title Bar\r\n// 35. Tooltip\r\n// 36. Top Bar\r\n\r\n@import 'util/util';\r\n\r\n// 1. Global\r\n// ---------\r\n\r\n$global-font-size: 100%;\r\n$global-width: rem-calc(1200);\r\n$global-lineheight: 1.5;\r\n$foundation-palette: (\r\n primary: #2199e8,\r\n secondary: #777,\r\n success: #3adb76,\r\n warning: #ffae00,\r\n alert: #ec5840,\r\n);\r\n$light-gray: #e6e6e6;\r\n$medium-gray: #cacaca;\r\n$dark-gray: #8a8a8a;\r\n$white : #FFFFFF;\r\n$ghost : #FAFAFA;\r\n$snow : #F9F9F9;\r\n$vapor : #F6F6F6;\r\n$white-smoke : #F5F5F5;\r\n$silver : #EFEFEF;\r\n$smoke : #EEEEEE;\r\n$gainsboro : #DDDDDD;\r\n$iron : #CCCCCC;\r\n$base : #AAAAAA;\r\n$aluminum : #999999;\r\n$jumbo : #888888;\r\n$monsoon : #777777;\r\n$steel : #666666;\r\n$charcoal : #555555;\r\n$tuatara : #444444;\r\n$oil : #333333;\r\n$jet : #222222;\r\n$black : #000000;\r\n$green : #797c25;\r\n$red : #d2222a;\r\n$d-blue : #131c5f;\r\n$l-blue : #0093d1;\r\n$orange : #f28728;\r\n$cream : #f3ebd7;\r\n$dark-cream : #e8d8af;\r\n$brown : #704c21;\r\n\r\n\r\n$body-background: url(../assets/background.jpg) no-repeat center center fixed;\r\n$body-font-color: $black;\r\n$body-font-family: 'Open Sans', sans-serif;\r\n$body-antialiased: true;\r\n$global-margin: 1rem;\r\n$global-padding: 1rem;\r\n$global-weight-normal: normal;\r\n$global-weight-bold: bold;\r\n$global-radius: 0;\r\n$global-text-direction: ltr;\r\n$global-flexbox: false;\r\n$print-transparent-backgrounds: true;\r\n\r\n\r\n@include add-foundation-colors;\r\n\r\n// 2. Breakpoints\r\n// --------------\r\n\r\n$breakpoints: (\r\n small: 0,\r\n medium: 640px,\r\n large: 1024px,\r\n xlarge: 1200px,\r\n xxlarge: 1440px,\r\n);\r\n$breakpoint-classes: (small medium large);\r\n\r\n// 3. The Grid\r\n// -----------\r\n\r\n$grid-row-width: $global-width;\r\n$grid-column-count: 12;\r\n$grid-column-gutter: (\r\n small: 20px,\r\n medium: 30px,\r\n);\r\n$grid-column-align-edge: true;\r\n$block-grid-max: 8;\r\n\r\n// 4. Base Typography\r\n// ------------------\r\n\r\n$header-font-family: $body-font-family;\r\n$header-font-weight: $global-weight-normal;\r\n$header-font-style: normal;\r\n// We use these to define default font stacks\r\n$font-family-sans-serif: \"Open Sans\", sans-serif;\r\n$font-family-serif: Georgia, Cambria, \"Times New Roman\", Times, serif;\r\n$font-family-monospace: Consolas, \"Liberation Mono\", Courier, monospace;\r\n$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;\r\n$header-sizes: (\r\n small: (\r\n 'h1': 24,\r\n 'h2': 20,\r\n 'h3': 19,\r\n 'h4': 18,\r\n 'h5': 17,\r\n 'h6': 16,\r\n ),\r\n medium: (\r\n 'h1': 36,\r\n 'h2': 24,\r\n 'h3': 24,\r\n 'h4': 18,\r\n 'h5': 16,\r\n 'h6': 16,\r\n ),\r\n);\r\n$header-color: inherit;\r\n$header-lineheight: 1.4;\r\n$header-margin-bottom: 0.5rem;\r\n$header-text-rendering: optimizeLegibility;\r\n$small-font-size: 80%;\r\n$header-small-font-color: $medium-gray;\r\n$paragraph-lineheight: 1.6;\r\n$paragraph-margin-bottom: 1rem;\r\n$paragraph-text-rendering: optimizeLegibility;\r\n$code-color: $black;\r\n$code-font-family: $font-family-monospace;\r\n$code-font-weight: $global-weight-normal;\r\n$code-background: $light-gray;\r\n$code-border: 1px solid $medium-gray;\r\n$code-padding: rem-calc(2 5 1);\r\n$anchor-color: $orange;\r\n$anchor-color-hover: $green;\r\n$anchor-text-decoration: none;\r\n$anchor-text-decoration-hover: none;\r\n$hr-width: $global-width;\r\n$hr-border: 1px solid $medium-gray;\r\n$hr-margin: rem-calc(20) auto;\r\n$list-lineheight: $paragraph-lineheight;\r\n$list-margin-bottom: $paragraph-margin-bottom;\r\n$list-style-type: disc;\r\n$list-style-position: outside;\r\n$list-side-margin: 1.25rem;\r\n$list-nested-side-margin: 1.25rem;\r\n$defnlist-margin-bottom: 1rem;\r\n$defnlist-term-weight: $global-weight-bold;\r\n$defnlist-term-margin-bottom: 0.3rem;\r\n$blockquote-color: $dark-gray;\r\n$blockquote-padding: rem-calc(9 20 0 19);\r\n$blockquote-border: 1px solid $medium-gray;\r\n$cite-font-size: rem-calc(13);\r\n$cite-color: $dark-gray;\r\n$keystroke-font: $font-family-monospace;\r\n$keystroke-color: $black;\r\n$keystroke-background: $light-gray;\r\n$keystroke-padding: rem-calc(2 4 0);\r\n$keystroke-radius: $global-radius;\r\n$abbr-underline: 1px dotted $black;\r\n\r\n// 5. Typography Helpers\r\n// ---------------------\r\n\r\n$lead-font-size: $global-font-size * 1.25;\r\n$lead-lineheight: 1.6;\r\n$subheader-lineheight: 1.4;\r\n$subheader-color: $dark-gray;\r\n$subheader-font-weight: $global-weight-normal;\r\n$subheader-margin-top: 0.2rem;\r\n$subheader-margin-bottom: 0.5rem;\r\n$stat-font-size: 2.5rem;\r\n\r\n// 6. Abide\r\n// --------\r\n\r\n$abide-inputs: true;\r\n$abide-labels: true;\r\n$input-background-invalid: map-get($foundation-palette, alert);\r\n$form-label-color-invalid: map-get($foundation-palette, alert);\r\n$input-error-color: map-get($foundation-palette, alert);\r\n$input-error-font-size: rem-calc(12);\r\n$input-error-font-weight: $global-weight-bold;\r\n\r\n// 7. Accordion\r\n// ------------\r\n\r\n$accordion-background: $white;\r\n$accordion-plusminus: true;\r\n$accordion-item-color: foreground($accordion-background, $primary-color);\r\n$accordion-item-background-hover: $light-gray;\r\n$accordion-item-padding: 1.25rem 1rem;\r\n$accordion-content-background: $white;\r\n$accordion-content-border: 1px solid $light-gray;\r\n$accordion-content-color: foreground($accordion-background, $primary-color);\r\n$accordion-content-padding: 1rem;\r\n\r\n// 8. Accordion Menu\r\n// -----------------\r\n\r\n$accordionmenu-arrows: true;\r\n$accordionmenu-arrow-color: $primary-color;\r\n\r\n// 9. Badge\r\n// --------\r\n\r\n$badge-background: $primary-color;\r\n$badge-color: foreground($badge-background);\r\n$badge-padding: 0.3em;\r\n$badge-minwidth: 2.1em;\r\n$badge-font-size: 0.6rem;\r\n\r\n// 10. Breadcrumbs\r\n// ---------------\r\n\r\n$breadcrumbs-margin: 0 0 $global-margin 0;\r\n$breadcrumbs-item-font-size: rem-calc(14);\r\n$breadcrumbs-item-color: $black;\r\n$breadcrumbs-item-color-current: $green;\r\n$breadcrumbs-item-color-disabled: $medium-gray;\r\n$breadcrumbs-item-margin: 0.75rem;\r\n$breadcrumbs-item-uppercase: false;\r\n$breadcrumbs-item-slash: true;\r\n\r\n// 11. Button\r\n// ----------\r\n\r\n$button-padding: 0.85em 1em;\r\n$button-margin: 0 0 $global-margin 0;\r\n$button-fill: solid;\r\n$button-background: $primary-color;\r\n$button-background-hover: scale-color($button-background, $lightness: -15%);\r\n$button-color: $white;\r\n$button-color-alt: $black;\r\n$button-radius: $global-radius;\r\n$button-sizes: (\r\n tiny: 0.6rem,\r\n small: 0.75rem,\r\n default: 0.9rem,\r\n large: 1.25rem,\r\n);\r\n$button-opacity-disabled: 0.25;\r\n\r\n// 12. Button Group\r\n// ----------------\r\n\r\n$buttongroup-margin: 1rem;\r\n$buttongroup-spacing: 1px;\r\n$buttongroup-child-selector: '.button';\r\n$buttongroup-expand-max: 6;\r\n\r\n// 13. Callout\r\n// -----------\r\n\r\n$callout-background: $white;\r\n$callout-background-fade: 85%;\r\n$callout-border: 1px solid rgba($black, 0.25);\r\n$callout-margin: 0 0 1rem 0;\r\n$callout-padding: 1rem;\r\n$callout-font-color: $body-font-color;\r\n$callout-font-color-alt: $body-background;\r\n$callout-radius: $global-radius;\r\n$callout-link-tint: 30%;\r\n\r\n// 14. Close Button\r\n// ----------------\r\n\r\n$closebutton-position: right top;\r\n$closebutton-offset-horizontal: 1rem;\r\n$closebutton-offset-vertical: 0.5rem;\r\n$closebutton-size: 2em;\r\n$closebutton-lineheight: 1;\r\n$closebutton-color: $dark-gray;\r\n$closebutton-color-hover: $black;\r\n\r\n// 15. Drilldown\r\n// -------------\r\n\r\n$drilldown-transition: transform 0.15s linear;\r\n$drilldown-arrows: true;\r\n$drilldown-arrow-color: $primary-color;\r\n$drilldown-background: $white;\r\n\r\n// 16. Dropdown\r\n// ------------\r\n\r\n$dropdown-padding: 1rem;\r\n$dropdown-border: 1px solid $medium-gray;\r\n$dropdown-font-size: 1rem;\r\n$dropdown-width: 300px;\r\n$dropdown-radius: $global-radius;\r\n$dropdown-sizes: (\r\n tiny: 100px,\r\n small: 200px,\r\n large: 400px,\r\n);\r\n\r\n// 17. Dropdown Menu\r\n// -----------------\r\n\r\n$dropdownmenu-arrows: false;\r\n$dropdownmenu-arrow-color: $anchor-color;\r\n$dropdownmenu-min-width: 200px;\r\n$dropdownmenu-background: $green;\r\n$dropdownmenu-border: 0px solid $orange;\r\n\r\n// 18. Flex Video\r\n// --------------\r\n\r\n$flexvideo-margin-bottom: rem-calc(16);\r\n$flexvideo-ratio: 4 by 3;\r\n$flexvideo-ratio-widescreen: 16 by 9;\r\n\r\n// 19. Forms\r\n// ---------\r\n\r\n$fieldset-border: 1px solid $medium-gray;\r\n$fieldset-padding: rem-calc(20);\r\n$fieldset-margin: rem-calc(18 0);\r\n$legend-padding: rem-calc(0 3);\r\n$form-spacing: rem-calc(16);\r\n$helptext-color: $black;\r\n$helptext-font-size: rem-calc(13);\r\n$helptext-font-style: italic;\r\n$input-prefix-color: $black;\r\n$input-prefix-background: $light-gray;\r\n$input-prefix-border: 1px solid $medium-gray;\r\n$input-prefix-padding: 1rem;\r\n$form-label-color: $black;\r\n$form-label-font-size: rem-calc(14);\r\n$form-label-font-weight: $global-weight-normal;\r\n$form-label-line-height: 1.8;\r\n$select-background: $white;\r\n$select-triangle-color: $dark-gray;\r\n$select-radius: $global-radius;\r\n$input-color: $black;\r\n$input-placeholder-color: $medium-gray;\r\n$input-font-family: inherit;\r\n$input-font-size: rem-calc(16);\r\n$input-background: $white;\r\n$input-background-focus: $white;\r\n$input-background-disabled: $light-gray;\r\n$input-border: 1px solid $medium-gray;\r\n$input-border-focus: 1px solid $dark-gray;\r\n$input-shadow: inset 0 1px 2px rgba($black, 0.1);\r\n$input-shadow-focus: 0 0 5px $medium-gray;\r\n$input-cursor-disabled: default;\r\n$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;\r\n$input-number-spinners: true;\r\n$input-radius: $global-radius;\r\n\r\n// 20. Label\r\n// ---------\r\n\r\n$label-background: $primary-color;\r\n$label-color: foreground($label-background);\r\n$label-font-size: 0.8rem;\r\n$label-padding: 0.33333rem 0.5rem;\r\n$label-radius: $global-radius;\r\n\r\n// 21. Media Object\r\n// ----------------\r\n\r\n$mediaobject-margin-bottom: $global-margin;\r\n$mediaobject-section-padding: $global-padding;\r\n$mediaobject-image-width-stacked: 100%;\r\n\r\n// 22. Menu\r\n// --------\r\n\r\n$menu-margin: 0;\r\n$menu-margin-nested: 1rem;\r\n$menu-item-padding: rem-calc(0) rem-calc(20);\r\n$menu-item-color-active: $orange;\r\n$menu-item-background-active: $green;\r\n$menu-icon-spacing: 0.25rem;\r\n\r\n// 23. Meter\r\n// ---------\r\n\r\n$meter-height: 1rem;\r\n$meter-radius: $global-radius;\r\n$meter-background: $medium-gray;\r\n$meter-fill-good: $success-color;\r\n$meter-fill-medium: $warning-color;\r\n$meter-fill-bad: $alert-color;\r\n\r\n// 24. Off-canvas\r\n// --------------\r\n\r\n$offcanvas-size: 250px;\r\n$offcanvas-background: $green;\r\n$offcanvas-zindex: -1;\r\n$offcanvas-transition-length: 0.5s;\r\n$offcanvas-transition-timing: ease;\r\n$offcanvas-fixed-reveal: true;\r\n$offcanvas-exit-background: rgba($white, 0.25);\r\n$maincontent-class: 'off-canvas-content';\r\n$maincontent-shadow: 0 0 10px rgba($black, 0.5);\r\n\r\n// 25. Orbit\r\n// ---------\r\n\r\n$orbit-bullet-background: $medium-gray;\r\n$orbit-bullet-background-active: $dark-gray;\r\n$orbit-bullet-diameter: 1.2rem;\r\n$orbit-bullet-margin: 0.1rem;\r\n$orbit-bullet-margin-top: 0.8rem;\r\n$orbit-bullet-margin-bottom: 0.8rem;\r\n$orbit-caption-background: rgba($black, 0.5);\r\n$orbit-caption-padding: 1rem;\r\n$orbit-control-background-hover: rgba($black, 0.5);\r\n$orbit-control-padding: 1rem;\r\n$orbit-control-zindex: 10;\r\n\r\n// 26. Pagination\r\n// --------------\r\n\r\n$pagination-font-size: rem-calc(14);\r\n$pagination-margin-bottom: $global-margin;\r\n$pagination-item-color: $black;\r\n$pagination-item-padding: rem-calc(3 10);\r\n$pagination-item-spacing: rem-calc(1);\r\n$pagination-radius: $global-radius;\r\n$pagination-item-background-hover: $light-gray;\r\n$pagination-item-background-current: $primary-color;\r\n$pagination-item-color-current: foreground($pagination-item-background-current);\r\n$pagination-item-color-disabled: $medium-gray;\r\n$pagination-ellipsis-color: $black;\r\n$pagination-mobile-items: false;\r\n$pagination-arrows: true;\r\n\r\n// 27. Progress Bar\r\n// ----------------\r\n\r\n$progress-height: 1rem;\r\n$progress-background: $medium-gray;\r\n$progress-margin-bottom: $global-margin;\r\n$progress-meter-background: $primary-color;\r\n$progress-radius: $global-radius;\r\n\r\n// 28. Reveal\r\n// ----------\r\n\r\n$reveal-background: $white;\r\n$reveal-width: 600px;\r\n$reveal-max-width: $global-width;\r\n$reveal-padding: $global-padding;\r\n$reveal-border: 1px solid $medium-gray;\r\n$reveal-radius: $global-radius;\r\n$reveal-zindex: 1005;\r\n$reveal-overlay-background: rgba($black, 0.45);\r\n\r\n// 29. Slider\r\n// ----------\r\n\r\n$slider-width-vertical: 0.5rem;\r\n$slider-transition: all 0.2s ease-in-out;\r\n$slider-height: 0.5rem;\r\n$slider-background: $light-gray;\r\n$slider-fill-background: $medium-gray;\r\n$slider-handle-height: 1.4rem;\r\n$slider-handle-width: 1.4rem;\r\n$slider-handle-background: $primary-color;\r\n$slider-opacity-disabled: 0.25;\r\n$slider-radius: $global-radius;\r\n\r\n// 30. Switch\r\n// ----------\r\n\r\n$switch-background: $medium-gray;\r\n$switch-background-active: $primary-color;\r\n$switch-height: 2rem;\r\n$switch-height-tiny: 1.5rem;\r\n$switch-height-small: 1.75rem;\r\n$switch-height-large: 2.5rem;\r\n$switch-radius: $global-radius;\r\n$switch-margin: $global-margin;\r\n$switch-paddle-background: $white;\r\n$switch-paddle-offset: 0.25rem;\r\n$switch-paddle-radius: $global-radius;\r\n$switch-paddle-transition: all 0.25s ease-out;\r\n\r\n// 31. Table\r\n// ---------\r\n\r\n$table-background: $white;\r\n$table-color-scale: 5%;\r\n$table-border: 1px solid smart-scale($table-background, $table-color-scale);\r\n$table-padding: rem-calc(8 10 10);\r\n$table-hover-scale: 2%;\r\n$table-row-hover: darken($table-background, $table-hover-scale);\r\n$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);\r\n$table-striped-background: smart-scale($table-background, $table-color-scale);\r\n$table-stripe: even;\r\n$table-head-background: smart-scale($table-background, $table-color-scale / 2);\r\n$table-foot-background: smart-scale($table-background, $table-color-scale);\r\n$table-head-font-color: $body-font-color;\r\n$show-header-for-stacked: false;\r\n\r\n// 32. Tabs\r\n// --------\r\n\r\n$tab-margin: 0;\r\n$tab-background: $white;\r\n$tab-background-active: $light-gray;\r\n$tab-item-font-size: rem-calc(12);\r\n$tab-item-background-hover: $white;\r\n$tab-item-padding: 1.25rem 1.5rem;\r\n$tab-expand-max: 6;\r\n$tab-content-background: $white;\r\n$tab-content-border: $light-gray;\r\n$tab-content-color: foreground($tab-background, $primary-color);\r\n$tab-content-padding: 1rem;\r\n\r\n// 33. Thumbnail\r\n// -------------\r\n\r\n$thumbnail-border: solid 4px $white;\r\n$thumbnail-margin-bottom: $global-margin;\r\n$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);\r\n$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);\r\n$thumbnail-transition: box-shadow 200ms ease-out;\r\n$thumbnail-radius: $global-radius;\r\n\r\n// 34. Title Bar\r\n// -------------\r\n\r\n$titlebar-background: $green;\r\n$titlebar-color: $white;\r\n$titlebar-padding: 0.5rem;\r\n$titlebar-text-font-weight: bold;\r\n$titlebar-icon-color: $white;\r\n$titlebar-icon-color-hover: $orange;\r\n$titlebar-icon-spacing: 0.25rem;\r\n\r\n// 35. Tooltip\r\n// -----------\r\n\r\n$has-tip-font-weight: $global-weight-bold;\r\n$has-tip-border-bottom: dotted 1px $dark-gray;\r\n$tooltip-background-color: $black;\r\n$tooltip-color: $white;\r\n$tooltip-padding: 0.75rem;\r\n$tooltip-font-size: $small-font-size;\r\n$tooltip-pip-width: 0.75rem;\r\n$tooltip-pip-height: $tooltip-pip-width * 0.866;\r\n$tooltip-radius: $global-radius;\r\n\r\n// 36. Top Bar\r\n// -----------\r\n\r\n$topbar-padding: 0;\r\n$topbar-background: $green;\r\n$topbar-submenu-background: $topbar-background;\r\n$topbar-title-spacing: 1rem;\r\n$topbar-input-width: 200px;\r\n$topbar-unstack-breakpoint: medium;\r\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'unit';\n@import 'value';\n@import 'color';\n@import 'selector';\n@import 'flex';\n@import 'breakpoint';\n@import 'mixins';\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n$global-font-size: 100% !default;\n\n// scss-lint:disable ZeroUnit\n\n/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.\n///\n/// @param {Number} $num - Number to strip unit from.\n///\n/// @returns {Number} The same number, sans unit.\n@function strip-unit($num) {\n @return $num / ($num * 0 + 1);\n}\n\n/// Converts one or more pixel values into matching rem values.\n///\n/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.\n/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.\n///\n/// @returns {List} A list of converted values.\n@function rem-calc($values, $base: null) {\n $rem-values: ();\n $count: length($values);\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // If the base font size is a %, then multiply it by 16px\n // This is because 100% font size = 16px in most all browsers\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n @if $count == 1 {\n @return -zf-to-rem($values, $base);\n }\n\n @for $i from 1 through $count {\n $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));\n }\n\n @return $rem-values;\n}\n\n// Converts a unitless, pixel, or rem value to em, for use in breakpoints.\n@function -zf-bp-to-em($value) {\n // Pixel and unitless values are converted to rems\n @if unit($value) == 'px' or unitless($value) {\n $value: rem-calc($value, $base: 16px);\n }\n\n // Then the value is converted to ems\n @return strip-unit($value) * 1em;\n}\n\n/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.\n/// @access private\n///\n/// @param {Number} $value - Pixel value to convert.\n/// @param {Number} $base [null] - Base for pixel conversion.\n///\n/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.\n@function -zf-to-rem($value, $base: null) {\n // Check if the value is a number\n @if type-of($value) != 'number' {\n @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';\n @return $value;\n }\n\n // Calculate rem if units for $value is not rem\n @if unit($value) != 'rem' {\n $value: strip-unit($value) / strip-unit($base) * 1rem;\n }\n\n // Turn 0rem into 0\n @if $value == 0rem {\n $value: 0;\n }\n\n @return $value;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.\n///\n/// @param {Mixed} $val - Value to check.\n///\n/// @returns {Boolean} `true` if `$val` is not falsey.\n@function has-value($val) {\n @if $val == null or $val == none {\n @return false;\n }\n @if type-of($val) == 'number' and strip-unit($val) == 0 {\n @return false;\n }\n @if type-of($val) == 'list' and length($val) == 0 {\n @return false;\n }\n @return true;\n}\n\n/// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.\n///\n/// @param {List|Number} $val - Value to analyze. Should be a shorthand sizing property, e.g. \"1em 2em 1em\"\n/// @param {Keyword} $side - Side to return. Should be `top`, `right`, `bottom`, or `left`.\n///\n/// @returns {Number} A single value based on `$val` and `$side`.\n@function get-side($val, $side) {\n $length: length($val);\n\n @if $length == 1 {\n @return $val;\n }\n @if $length == 2 {\n @return map-get((\n top: nth($val, 1),\n bottom: nth($val, 1),\n left: nth($val, 2),\n right: nth($val, 2),\n ), $side);\n }\n @if $length == 3 {\n @return map-get((\n top: nth($val, 1),\n left: nth($val, 2),\n right: nth($val, 2),\n bottom: nth($val, 3),\n ), $side);\n }\n @if $length == 4 {\n @return map-get((\n top: nth($val, 1),\n right: nth($val, 2),\n bottom: nth($val, 3),\n left: nth($val, 4),\n ), $side);\n }\n}\n\n/// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.\n///\n/// @param {List} $val - Border value to find a value in.\n/// @param {Keyword} $elem - Border component to extract.\n///\n/// @returns {Mixed} If the value exists, returns the value. If the value is not in the border definition, the function will return a 0px width, solid style, or black border.\n@function get-border-value($val, $elem) {\n // Find the width, style, or color and return it\n @each $v in $val {\n $type: type-of($v);\n @if $elem == width and $type == 'number' {\n @return $v;\n }\n @if $elem == style and $type == 'string' {\n @return $v;\n }\n @if $elem == color and $type == 'color' {\n @return $v;\n }\n }\n\n // Defaults\n $defaults: (\n width: 0,\n style: solid,\n color: #000,\n );\n\n @return map-get($defaults, $elem);\n}\n\n/// Finds a value in a nested map.\n/// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Deep Get/Set in Maps\n///\n/// @param {Map} $map - Map to pull a value from.\n/// @param {String} $keys... - Keys to use when looking for a value.\n/// @returns {Mixed} The value found in the map.\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map-get($map, $key);\n }\n @return $map;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n/// Checks the lightness of `$color`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color.\n///\n/// @param {Color} $color - Color to check the lightness of.\n/// @param {Color} $yes [$black] - Color to return if `$color` is light.\n/// @param {Color} $no [$white] - Color to return if `$color` is dark.\n/// @param {Percentage} $threshold [60%] - Threshold of lightness to check against.\n///\n/// @returns {Color} The $yes color or $no color.\n@function foreground($color, $yes: $black, $no: $white, $threshold: 60%) {\n @if $color == transparent {\n $color: $body-background;\n }\n @if (lightness($color) > $threshold) {\n @return $yes;\n }\n @else {\n @return $no;\n }\n}\n\n/// Scales a color to be lighter if it's light, or darker if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Transfers the colors in the `$foundation-palette` variable into the legacy color variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n/// Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors.\n///\n/// @param {List|Keyword} $types [()] - A list of text input types to use. Leave blank to use all of them.\n@function text-inputs($types: ()) {\n $return: ();\n\n $all-types:\n text\n password\n date\n datetime\n datetime-local\n month\n week\n email\n number\n search\n tel\n time\n url\n color;\n\n @if not has-value($types) {\n $types: $all-types;\n }\n\n @each $type in $types {\n $return: append($return, unquote('[type=\\'#{$type}\\']'), comma);\n }\n\n @return $return;\n}\n","$-zf-flex-justify: (\n 'left': flex-start,\n 'right': flex-end,\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n);\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group breakpoints\n////\n\n// scss-lint:disable ZeroUnit\n\n/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.\n/// @type Map\n$breakpoints: (\n small: 0,\n medium: 640px,\n large: 1024px,\n xlarge: 1200px,\n xxlarge: 1440px,\n) !default;\n\n$-zf-zero-breakpoint: small !default;\n\n@if nth(map-values($breakpoints), 1) != 0 {\n @error 'Your smallest breakpoint (defined in $breakpoints) must be set to \"0\".';\n}\n@else {\n $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);\n}\n\n/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.\n/// @type List\n$breakpoint-classes: (small medium large) !default;\n\n/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.\n///\n/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.\n@function breakpoint($val: $-zf-zero-breakpoint) {\n // Size or keyword\n $bp: nth($val, 1);\n // Value for max-width media queries\n $bp-max: 0;\n // Direction of media query (up, down, or only)\n $dir: if(length($val) > 1, nth($val, 2), up);\n // Eventual output\n $str: '';\n // Is it a named media query?\n $named: false;\n\n // Orientation media queries have a unique syntax\n @if $bp == 'landscape' or $bp == 'portrait' {\n @return '(orientation: #{$bp})';\n }\n @else if $bp == 'retina' {\n @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';\n }\n\n // Try to pull a named breakpoint out of the $breakpoints map\n @if type-of($bp) == 'string' {\n @if map-has-key($breakpoints, $bp) {\n @if $dir == 'only' or $dir == 'down' {\n $bp-max: -zf-map-next($breakpoints, $bp);\n }\n\n $bp: map-get($breakpoints, $bp);\n $named: true;\n }\n @else {\n $bp: 0;\n @warn 'breakpoint(): \"#{$val}\" is not defined in your $breakpoints setting.';\n }\n }\n\n // Convert any pixel, rem, or unitless value to em\n $bp: -zf-bp-to-em($bp);\n @if $bp-max {\n $bp-max: -zf-bp-to-em($bp-max) - (1/16);\n }\n\n // Conditions to skip media query creation\n // - It's a named breakpoint that resolved to \"0 down\" or \"0 up\"\n // - It's a numeric breakpoint that resolved to \"0 \" + anything\n @if $bp > 0em or $dir == 'only' or $dir == 'down' {\n // `only` ranges use the format `(min-width: n) and (max-width: n)`\n @if $dir == 'only' {\n // Only named media queries can have an \"only\" range\n @if $named == true {\n // Only use \"min-width\" if the floor is greater than 0\n @if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n\n // Only add \"and\" to the media query if there's a ceiling\n @if $bp-max != null {\n $str: $str + ' and ';\n }\n }\n\n // Only use \"max-width\" if there's a ceiling\n @if $bp-max != null {\n $str: $str + '(max-width: #{$bp-max})';\n }\n }\n @else {\n @warn 'breakpoint(): Only named media queries can have an `only` range.';\n }\n }\n\n // `down` ranges use the format `(max-width: n)`\n @else if $dir == 'down' {\n $max: if($named, $bp-max, $bp);\n\n // Skip media query creation if input value is exactly \"0 down\",\n // unless the function was called as \"small down\", in which case it's just \"small only\"\n @if $named or $bp > 0em {\n @if $max != null {\n $str: $str + '(max-width: #{$max})';\n }\n }\n }\n\n // `up` ranges use the format `(min-width: n)`\n @else if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n }\n }\n\n @return $str;\n}\n\n/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:\n/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.\n/// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.\n/// - If a rem value is passed, the unit will be changed to em.\n/// - If an em value is passed, the value will be used as-is.\n///\n/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.\n///\n/// @output If the breakpoint is \"0px and larger\", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.\n@mixin breakpoint($value) {\n $str: breakpoint($value);\n\n // If $str is still an empty string, no media query is needed\n @if $str == '' {\n @content;\n }\n\n // Otherwise, wrap the content in a media query\n @else {\n @media screen and #{$str} {\n @content;\n }\n }\n}\n\n/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.\n/// @access private\n///\n/// @param {Map} $map - Map to convert.\n///\n/// @returns {String} A string containing the map's contents.\n@function -zf-bp-serialize($map) {\n $str: '';\n @each $key, $value in $map {\n $str: $str + $key + '=' + -zf-bp-to-em($value) + '&';\n }\n $str: str-slice($str, 1, -2);\n\n @return $str;\n}\n\n/// Find the next key in a map.\n/// @access private\n///\n/// @param {Map} $map - Map to traverse.\n/// @param {Mixed} $key - Key to use as a starting point.\n///\n/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.\n@function -zf-map-next($map, $key) {\n // Store the values of the map as a list, so we can access them with nth\n $values: map-values($map);\n\n // Ghetto for loop\n $i: 1;\n $found: false;\n @each $val in map-keys($map) {\n @if $found == false {\n @if ($key == $val) {\n $found: true;\n }\n $i: $i + 1;\n }\n }\n\n // If the key doesn't exist, or it's the last key in the map, return null\n @if $i > length($map) {\n @return null;\n }\n // Otherwise, return the value\n @else {\n @return nth($values, $i);\n }\n}\n\n/// Get a value for a breakpoint from a responsive config map. If the config map has the key `$value`, the exact breakpoint value is returned. If the config map does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.\n/// @access private\n///\n/// @param {Map} $map - Input config map.\n/// @param {Keyword} $value - Breakpoint name to use.\n///\n/// @return {Mixed} The corresponding breakpoint value.\n@function -zf-get-bp-val($map, $value) {\n // Check if the breakpoint name exists globally\n @if not map-has-key($breakpoints, $value) {\n @return null;\n }\n // Check if the breakpoint name exists in the local config map\n @else if map-has-key($map, $value) {\n // If it does, just return the value\n @return map-get($map, $value);\n }\n // Otherwise, find the next lowest breakpoint and return that value\n @else {\n $anchor: null;\n $found: false;\n\n @each $key, $val in $breakpoints {\n @if not $found {\n @if map-has-key($map, $key) {\n $anchor: $key;\n }\n @if $key == $value {\n $found: true;\n }\n }\n }\n\n @return map-get($map, $anchor);\n }\n}\n\n// Legacy breakpoint variables\n// These will be removed in 6.3\n$small-up: null;\n$small-only: null;\n$medium-up: null;\n$medium-only: null;\n$large-up: null;\n$large-only: null;\n$xlarge-up: null;\n$xlarge-only: null;\n$xxlarge-up: null;\n$xxlarge-only: null;\n\n@if map-has-key($breakpoints, small) {\n $small-up: screen;\n $small-only: unquote('screen and #{breakpoint(small only)}');\n}\n\n@if map-has-key($breakpoints, medium) {\n $medium-up: unquote('screen and #{breakpoint(medium)}');\n $medium-only: unquote('screen and #{breakpoint(medium only)}');\n}\n\n@if map-has-key($breakpoints, large) {\n $large-up: unquote('screen and #{breakpoint(large)}');\n $large-only: unquote('screen and #{breakpoint(large only)}');\n}\n\n@if map-has-key($breakpoints, xlarge) {\n $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');\n $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');\n}\n\n@if map-has-key($breakpoints, xxlarge) {\n $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n/// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.\n///\n/// @param {Number} $triangle-size - Width of the triangle.\n/// @param {Color} $triangle-color - Color of the triangle.\n/// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`.\n@mixin css-triangle(\n $triangle-size,\n $triangle-color,\n $triangle-direction\n) {\n content: '';\n display: block;\n width: 0;\n height: 0;\n border: inset $triangle-size;\n\n @if ($triangle-direction == down) {\n border-color: $triangle-color transparent transparent;\n border-top-style: solid;\n border-bottom-width: 0;\n }\n @if ($triangle-direction == up) {\n border-color: transparent transparent $triangle-color;\n border-bottom-style: solid;\n border-top-width: 0;\n }\n @if ($triangle-direction == right) {\n border-color: transparent transparent transparent $triangle-color;\n border-left-style: solid;\n border-right-width: 0;\n }\n @if ($triangle-direction == left) {\n border-color: transparent $triangle-color transparent transparent;\n border-right-style: solid;\n border-left-width: 0;\n }\n}\n\n/// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing.
\n///\n/// @param {Color} $color [$black] - Color to use for the icon.\n/// @param {Color} $color-hover [$dark-gray] - Color to use when the icon is hovered over.\n/// @param {Number} $width [20px] - Width of the icon.\n/// @param {Number} $height [16px] - Height of the icon.\n/// @param {Number} $weight [2px] - Height of individual bars in the icon.\n/// @param {Number} $bars [3] - Number of bars in the icon.\n@mixin hamburger(\n $color: $black,\n $color-hover: $dark-gray,\n $width: 20px,\n $height: 16px,\n $weight: 2px,\n $bars: 3\n) {\n // box-shadow CSS output\n $shadow: ();\n $hover-shadow: ();\n\n // Spacing between bars is calculated based on the total height of the icon and the weight of each bar\n $spacing: floor(($height - ($weight * $bars)) / ($bars - 1));\n\n // Icon container\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n width: $width;\n height: $height;\n\n // Icon bars\n &::after {\n content: '';\n position: absolute;\n display: block;\n width: 100%;\n height: $weight;\n background: $color;\n top: 0;\n left: 0;\n\n @for $i from 2 through $bars {\n $offset: ($weight + $spacing) * ($i - 1);\n $shadow: append($shadow, 0 $offset 0 $color, comma);\n }\n\n box-shadow: $shadow;\n }\n\n // Hover state\n @if $color-hover {\n // Generate CSS\n @for $i from 2 through $bars {\n $offset: ($weight + $spacing) * ($i - 1);\n $hover-shadow: append($hover-shadow, 0 $offset 0 $color-hover, comma);\n }\n\n &:hover::after {\n background: $color-hover;\n box-shadow: $hover-shadow;\n }\n }\n}\n\n/// Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included.\n/// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.\n///\n/// @param {Color} $color [$black] - Color to use for the triangle.\n@mixin background-triangle($color: $black) {\n $rgb: 'rgb%28#{red($color)}, #{green($color)}, #{blue($color)}%29';\n\n background-image: url(\"data:image/svg+xml;utf8,\");\n\n @media screen and (min-width:0\\0) {\n @if lightness($color) < 60% {\n // White triangle\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');\n }\n @else {\n // Black triangle\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');\n }\n }\n}\n\n/// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.\n/// The clearfix is augmented with specific styles to prevent borders in flexbox environments\n/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack\n/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix\n@mixin clearfix {\n &::before,\n &::after {\n content: ' ';\n display: table;\n @if $global-flexbox {\n flex-basis: 0;\n order: 1;\n }\n }\n\n &::after {\n clear: both;\n }\n}\n\n/// Adds CSS for a \"quantity query\" selector that automatically sizes elements based on how many there are inside a container.\n/// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS\n///\n/// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.\n/// @param {Keyword} $elem [li] - Tag to use for sibling selectors.\n@mixin auto-width($max, $elem: li) {\n @for $i from 2 through $max {\n &:nth-last-child(#{$i}):first-child,\n &:nth-last-child(#{$i}):first-child ~ #{$elem} {\n width: percentage(1 / $i);\n }\n }\n}\n\n/// Removes the focus ring around an element when a mouse input is detected.\n@mixin disable-mouse-outline {\n [data-whatinput='mouse'] & {\n outline: 0;\n }\n}\n\n/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.\n/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility\n@mixin element-invisible {\n position: absolute !important;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n}\n\n/// Reverses the CSS output created by the `element-invisible()` mixin.\n@mixin element-invisible-off {\n position: static !important;\n height: auto;\n width: auto;\n overflow: visible;\n clip: auto;\n}\n\n/// Vertically centers the element inside of its first non-static parent,\n/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass\n@mixin vertical-center {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n/// Horizontally centers the element inside of its first non-static parent,\n/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass\n@mixin horizontal-center {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n\n/// Absolutely centers the element inside of its first non-static parent,\n/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass\n@mixin absolute-center {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n/// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.\n///\n/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.\n@mixin -zf-each-breakpoint($small: true) {\n $map: $breakpoint-classes;\n\n @if not $small {\n $map: map-remove($map, $-zf-zero-breakpoint);\n }\n\n @each $size in $map {\n $-zf-size: $size !global;\n\n @include breakpoint($size) {\n @content;\n }\n }\n}\n","/**\n * Foundation for Sites by ZURB\n * Version 6.2.3\n * foundation.zurb.com\n * Licensed under MIT Open Source\n */\n\n// Sass utilities\n@import 'util/util';\n\n// Global variables and styles\n@import 'global';\n\n// Components\n@import 'grid/grid';\n@import 'typography/typography';\n@import 'forms/forms';\n@import 'components/visibility';\n@import 'components/float';\n@import 'components/button';\n@import 'components/button-group';\n@import 'components/accordion-menu';\n@import 'components/accordion';\n@import 'components/badge';\n@import 'components/breadcrumbs';\n@import 'components/callout';\n@import 'components/close-button';\n@import 'components/drilldown';\n@import 'components/dropdown-menu';\n@import 'components/dropdown';\n@import 'components/flex';\n@import 'components/flex-video';\n@import 'components/label';\n@import 'components/media-object';\n@import 'components/menu';\n@import 'components/menu-icon';\n@import 'components/off-canvas';\n@import 'components/orbit';\n@import 'components/pagination';\n@import 'components/progress-bar';\n@import 'components/reveal';\n@import 'components/slider';\n@import 'components/sticky';\n@import 'components/switch';\n@import 'components/table';\n@import 'components/tabs';\n@import 'components/title-bar';\n@import 'components/top-bar';\n@import 'components/thumbnail';\n@import 'components/tooltip';\n\n@mixin foundation-everything($flex: false) {\n @if $flex {\n $global-flexbox: true !global;\n }\n\n @include foundation-global-styles;\n @if not $flex {\n @include foundation-grid;\n }\n @else {\n @include foundation-flex-grid;\n }\n @include foundation-typography;\n @include foundation-forms;\n @include foundation-button;\n @include foundation-accordion;\n @include foundation-accordion-menu;\n @include foundation-badge;\n @include foundation-breadcrumbs;\n @include foundation-button-group;\n @include foundation-callout;\n @include foundation-close-button;\n @include foundation-menu;\n @include foundation-menu-icon;\n @include foundation-drilldown-menu;\n @include foundation-dropdown;\n @include foundation-dropdown-menu;\n @include foundation-flex-video;\n @include foundation-label;\n @include foundation-media-object;\n @include foundation-off-canvas;\n @include foundation-orbit;\n @include foundation-pagination;\n @include foundation-progress-bar;\n @include foundation-slider;\n @include foundation-sticky;\n @include foundation-reveal;\n @include foundation-switch;\n @include foundation-table;\n @include foundation-tabs;\n @include foundation-thumbnail;\n @include foundation-title-bar;\n @include foundation-tooltip;\n @include foundation-top-bar;\n @include foundation-visibility-classes;\n @include foundation-float-classes;\n\n @if $flex {\n @include foundation-flex-classes;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'unit';\n@import 'value';\n@import 'color';\n@import 'selector';\n@import 'flex';\n@import 'breakpoint';\n@import 'mixins';\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n// scss-lint:disable ColorVariable, QualifyingElement, VendorPrefix\n\n////\n/// @group global\n////\n\n/// Font size attribute applied to `` and ``. We use 100% by default so the value is inherited from the user's browser settings.\n/// @type Number\n$global-font-size: 100% !default;\n\n/// Global width of your site. Used by the grid to determine row width.\n/// @type Number\n$global-width: rem-calc(1200) !default;\n\n/// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px\n/// @type Number\n$global-lineheight: 1.5 !default;\n\n/// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.\n/// @type Map\n$foundation-palette: (\n primary: #2199e8,\n secondary: #777,\n success: #3adb76,\n warning: #ffae00,\n alert: #ec5840,\n) !default;\n\n/// Color used for light gray UI items.\n/// @type Color\n$light-gray: #e6e6e6 !default;\n\n/// Color used for medium gray UI items.\n/// @type Color\n$medium-gray: #cacaca !default;\n\n/// Color used for dark gray UI items.\n/// @type Color\n$dark-gray: #8a8a8a !default;\n\n/// Color used for black ui items.\n/// @type Color\n$black: #0a0a0a !default;\n\n/// Color used for white ui items.\n/// @type Color\n$white: #fefefe !default;\n\n/// Background color of the body.\n/// @type Color\n$body-background: $white !default;\n\n/// Text color of the body.\n/// @type Color\n$body-font-color: $black !default;\n\n/// Font stack of the body.\n/// @type List\n$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;\n\n/// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.\n/// @type Boolean\n$body-antialiased: true !default;\n\n/// Global value used for margin on components.\n/// @type Number\n$global-margin: 1rem !default;\n\n/// Global value used for padding on components.\n/// @type Number\n$global-padding: 1rem !default;\n\n/// Global font weight used for normal type.\n/// @type Keyword | Number\n$global-weight-normal: normal !default;\n\n/// Global font weight used for bold type.\n/// @type Keyword | Number\n$global-weight-bold: bold !default;\n\n/// Global value used for all elements that have a border radius.\n/// @type Number\n$global-radius: 0 !default;\n\n/// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.\n/// @type Keyword\n$global-text-direction: ltr !default;\n\n/// Enables flexbox for components that support it.\n/// @type Boolean\n$global-flexbox: false !default;\n\n@if not map-has-key($foundation-palette, primary) {\n @error 'In $foundation-palette, you must have a color named \"primary\".';\n}\n\n// Internal variables used for text direction\n$global-left: if($global-text-direction == rtl, right, left);\n$global-right: if($global-text-direction == rtl, left, right);\n\n// Internal variables used for colors\n$primary-color: map-get($foundation-palette, primary);\n$secondary-color: map-get($foundation-palette, secondary);\n$success-color: map-get($foundation-palette, success);\n$warning-color: map-get($foundation-palette, warning);\n$alert-color: map-get($foundation-palette, alert);\n\n// Remove this in 6.3\n$-zf-menu-icon-imported: false;\n$-zf-flex-classes-imported: false;\n\n@mixin foundation-global-styles {\n @include -zf-normalize;\n\n // These styles are applied to a tag, which is read by the Foundation JavaScript\n .foundation-mq {\n font-family: '#{-zf-bp-serialize($breakpoints)}';\n }\n\n html {\n font-size: $global-font-size;\n box-sizing: border-box;\n }\n\n // Set box-sizing globally to handle padding and border widths\n *,\n *::before,\n *::after {\n box-sizing: inherit;\n }\n\n // Default body styles\n body {\n padding: 0;\n margin: 0;\n font-family: $body-font-family;\n font-weight: $global-weight-normal;\n line-height: $global-lineheight;\n color: $body-font-color;\n background: $body-background;\n\n @if ($body-antialiased) {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n }\n\n img {\n // Grid defaults to get images and embeds to work properly\n max-width: 100%;\n height: auto;\n -ms-interpolation-mode: bicubic;\n\n // Get rid of gap under images by making them display: inline-block; by default\n display: inline-block;\n vertical-align: middle;\n }\n\n // Make sure textarea takes on height automatically\n textarea {\n height: auto;\n min-height: 50px;\n border-radius: $global-radius;\n }\n\n // Make select elements are 100% width by default\n select {\n width: 100%;\n border-radius: $global-radius;\n }\n\n // Styles Google Maps and MapQuest embeds properly\n // scss-lint:disable IdSelector\n #map_canvas,\n .map_canvas,\n .mqa-display {\n img,\n embed,\n object {\n max-width: none !important;\n }\n }\n\n // Reset