From 3bb36cf07a44fdc86da789ba7ce3650ad9dd7649 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Fri, 20 Nov 2015 22:29:07 +0100 Subject: [PATCH 01/65] Add Foundation 6.0.1 and Motion-UI to list of dependencies --- bower.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bower.json b/bower.json index a25403cd3..098656e39 100755 --- a/bower.json +++ b/bower.json @@ -6,7 +6,8 @@ ], "ignore": [], "dependencies": { - "foundation": "zurb/bower-foundation", + "foundation-sites": "~6.0.1", + "motion-ui" : "~1.1.0", "fontawesome": "~4.4.0" } } From 70d8f4800b0179e73c7a3e6f748125a4d0ed1830 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Fri, 20 Nov 2015 22:42:19 +0100 Subject: [PATCH 02/65] Update the build script and get ready for Foundation 6 --- Gruntfile.js | 62 +++++++++++++++++++++++++++++++++++----------------- 1 file changed, 42 insertions(+), 20 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index e79113b61..bacf00d84 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -52,12 +52,20 @@ module.exports = function (grunt) { copy: { - scripts: { + motion-ui: { expand: true, - cwd: 'assets/components/foundation/js/vendor/', + cwd: 'assets/components/foundation-sites/js/motion-ui/', src: '**', flatten: 'true', - dest: 'assets/javascript/vendor/' + dest: 'assets/javascript/motion-ui/' + }, + + what-input: { + expand: true, + cwd: 'assets/components/foundation-sites/js/what-input/', + src: '**', + flatten: 'true', + dest: 'assets/javascript/what-input/' }, iconfonts: { @@ -100,25 +108,39 @@ module.exports = function (grunt) { src: [ // Foundation core - 'assets/components/foundation/js/foundation/foundation.js', + 'assets/components/foundation-sites/js/foundation-core.js', // Pick the components you need in your project - 'assets/components/foundation/js/foundation/foundation.abide.js', - 'assets/components/foundation/js/foundation/foundation.accordion.js', - 'assets/components/foundation/js/foundation/foundation.alert.js', - 'assets/components/foundation/js/foundation/foundation.clearing.js', - 'assets/components/foundation/js/foundation/foundation.dropdown.js', - 'assets/components/foundation/js/foundation/foundation.equalizer.js', - 'assets/components/foundation/js/foundation/foundation.interchange.js', - 'assets/components/foundation/js/foundation/foundation.joyride.js', - 'assets/components/foundation/js/foundation/foundation.magellan.js', - 'assets/components/foundation/js/foundation/foundation.offcanvas.js', - 'assets/components/foundation/js/foundation/foundation.orbit.js', - 'assets/components/foundation/js/foundation/foundation.reveal.js', - 'assets/components/foundation/js/foundation/foundation.slider.js', - 'assets/components/foundation/js/foundation/foundation.tab.js', - 'assets/components/foundation/js/foundation/foundation.tooltip.js', - 'assets/components/foundation/js/foundation/foundation.topbar.js', + 'assets/components/foundation-sites/js/foundation.abide.js', + 'assets/components/foundation-sites/js/foundation.accordion.js', + 'assets/components/foundation-sites/js/foundation.accordionMenu.js', + 'assets/components/foundation-sites/js/foundation.drilldown.js', + 'assets/components/foundation-sites/js/foundation.dropdown.js', + 'assets/components/foundation-sites/js/foundation.dropdownMenu.js', + 'assets/components/foundation-sites/js/foundation.equalizer.js', + 'assets/components/foundation-sites/js/foundation.interchange.js', + 'assets/components/foundation-sites/js/foundation.magellan.js', + 'assets/components/foundation-sites/js/foundation.offcanvas.js', + 'assets/components/foundation-sites/js/foundation.orbit.js', + 'assets/components/foundation-sites/js/foundation.responsiveMenu.js', + 'assets/components/foundation-sites/js/foundation.responsiveToggle.js', + 'assets/components/foundation-sites/js/foundation.reveal.js', + 'assets/components/foundation-sites/js/foundation.slider.js', + 'assets/components/foundation-sites/js/foundation.sticky.js', + 'assets/components/foundation-sites/js/foundation.tabs.js', + 'assets/components/foundation-sites/js/foundation.toggler.js', + 'assets/components/foundation-sites/js/foundation.tooltip.js', + 'assets/components/foundation-sites/js/foundation.util.box.js', + 'assets/components/foundation-sites/js/foundation.util.keyboard.js', + 'assets/components/foundation-sites/js/foundation.util.mediaQuery.js', + 'assets/components/foundation-sites/js/foundation.util.motion.js', + 'assets/components/foundation-sites/js/foundation.util.nest.js', + 'assets/components/foundation-sites/js/foundation.util.timerAndImageLoader.js', + 'assets/components/foundation-sites/js/foundation.util.touch.js', + 'assets/components/foundation-sites/js/foundation.util.triggers.js', + + // Motion UI + 'assets/components/foundation-sites/js/motion-ui.js', // Include your own custom scripts (located in the custom folder) 'assets/javascript/custom/*.js' From f55d5b6a479d18ba740eeb8ece49db2fc8c05bb9 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Fri, 20 Nov 2015 23:00:48 +0100 Subject: [PATCH 03/65] Import new foundation styles --- assets/scss/config/_custom-settings.scss | 71 - assets/scss/config/_settings.scss | 1999 ++++++---------------- assets/scss/foundation.scss | 215 ++- 3 files changed, 685 insertions(+), 1600 deletions(-) delete mode 100755 assets/scss/config/_custom-settings.scss diff --git a/assets/scss/config/_custom-settings.scss b/assets/scss/config/_custom-settings.scss deleted file mode 100755 index 25753691d..000000000 --- a/assets/scss/config/_custom-settings.scss +++ /dev/null @@ -1,71 +0,0 @@ -/* - My custom settings. These variables are copied from _settings.css - This file will only contain uncommented settings that are actually used in the theme. -*/ - -// We use these to define default font stacks -$font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; -$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif; -$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; - -// We use these to define default font weights -$font-weight-normal: normal !default; -$font-weight-bold: bold !default; - -// Foundation color naming conventions -$white : #FFFFFF; -$ghost : #FAFAFA; -$snow : #F9F9F9; -$vapor : #F6F6F6; -$white-smoke : #F5F5F5; -$silver : #EFEFEF; -$smoke : #EEEEEE; -$gainsboro : #DDDDDD; -$iron : #CCCCCC; -$base : #AAAAAA; -$aluminum : #999999; -$jumbo : #888888; -$monsoon : #777777; -$steel : #666666; -$charcoal : #555555; -$tuatara : #444444; -$oil : #333333; -$jet : #222222; -$black : #000000; - -// We use these as default colors throughout -$primary-color: #008CBA; -$secondary-color: #e7e7e7; -$alert-color: #f04124; -$success-color: #43AC6A; -$warning-color: #f08a24; -$info-color: #a0d3e8; - -// We use these to control various global styles -$body-bg: $white; -$body-font-color: $jet; -$body-font-family: $font-family-sans-serif; -$body-font-weight: $font-weight-normal; -$body-font-style: normal; -$header-font-weight: 300; -$header-text-rendering: optimizeLegibility; - -// Set the link colors and styles for top-level nav -$topbar-link-weight: bold; -$topbar-link-color: $white; -$topbar-link-color-hover: $white; -$topbar-link-color-active: $white; -$topbar-link-color-active-hover: $white; - -//$topbar-link-bg: $topbar-bg; -$topbar-link-bg-hover: $jet; -$topbar-link-bg-color-hover: $jet; -$topbar-link-bg-active: $jet; -$topbar-link-bg-active-hover: scale-color($jet, $lightness: -14%); - -// Media query breakpoints -$small-breakpoint: em-calc(640); -$medium-breakpoint: em-calc(1024); -$topbar-breakpoint: em-calc(820); -$large-breakpoint: em-calc(1440); -$xlarge-breakpoint: em-calc(1920); diff --git a/assets/scss/config/_settings.scss b/assets/scss/config/_settings.scss index a502f988b..af876c166 100755 --- a/assets/scss/config/_settings.scss +++ b/assets/scss/config/_settings.scss @@ -1,1486 +1,529 @@ -// Foundation by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - +// Foundation for Sites Settings +// ----------------------------- // - -// Table of Contents -// Foundation Settings +// Table of Contents: // -// a. Base -// b. Grid -// c. Global -// d. Media Query Ranges -// e. Typography -// 01. Accordion -// 02. Alert Boxes -// 03. Block Grid -// 04. Breadcrumbs -// 05. Buttons -// 06. Button Groups -// 07. Clearing -// 08. Dropdown -// 09. Dropdown Buttons -// 10. Flex Video -// 11. Forms -// 12. Icon Bar -// 13. Inline Lists -// 14. Joyride -// 15. Keystrokes -// 16. Labels -// 17. Magellan -// 18. Off-canvas -// 19. Orbit -// 20. Pagination -// 21. Panels -// 22. Pricing Tables -// 23. Progress Bar -// 24. Range Slider -// 25. Reveal -// 26. Side Nav -// 27. Split Buttons -// 28. Sub Nav -// 29. Switch -// 30. Tables -// 31. Tabs -// 32. Thumbnails -// 33. Tooltips -// 34. Top Bar -// 36. Visibility Classes - -// a. Base -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// This is the default html and body font-size for the base rem value. -// $rem-base: 16px; - -// Allows the use of rem-calc() or lower-bound() in your settings -@import "../../components/foundation/scss/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. - -// Since the typical default browser font-size is 16px, that makes the calculation for grid size. -// If you want your base font-size to be different and not have it affect the grid breakpoints, -// set $rem-base to $base-font-size and make sure $base-font-size is a px value. -// $base-font-size: 100%; - -// The $base-font-size is 100% while $base-line-height is 150% -// $base-line-height: 150%; - -// We use this to control whether or not CSS classes come through in the gem files. -$include-html-classes: true; -// $include-print-styles: true; -$include-html-global-classes: $include-html-classes; - -// b. Grid -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-grid-classes: $include-html-classes; -// $include-xl-html-grid-classes: false; - -// $row-width: rem-calc(1000); -// $total-columns: 12; -// $column-gutter: rem-calc(30); - -// c. Global -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// We use these to define default font stacks -// $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; -// $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif; -// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; - -// We use these to define default font weights -// $font-weight-normal: normal; -// $font-weight-bold: bold; - -// $white : #FFFFFF; -// $ghost : #FAFAFA; -// $snow : #F9F9F9; -// $vapor : #F6F6F6; -// $white-smoke : #F5F5F5; -// $silver : #EFEFEF; -// $smoke : #EEEEEE; -// $gainsboro : #DDDDDD; -// $iron : #CCCCCC; -// $base : #AAAAAA; -// $aluminum : #999999; -// $jumbo : #888888; -// $monsoon : #777777; -// $steel : #666666; -// $charcoal : #555555; -// $tuatara : #444444; -// $oil : #333333; -// $jet : #222222; -// $black : #000000; - -// We use these as default colors throughout -// $primary-color: #008CBA; -// $secondary-color: #e7e7e7; -// $alert-color: #f04124; -// $success-color: #43AC6A; -// $warning-color: #f08a24; -// $info-color: #a0d3e8; - -// We use these to control various global styles -// $body-bg: $white; -// $body-font-color: $jet; -// $body-font-family: $font-family-sans-serif; -// $body-font-weight: $font-weight-normal; -// $body-font-style: normal; - -// We use this to control font-smoothing -// $font-smoothing: antialiased; - -// We use these to control text direction settings -// $text-direction: ltr; -// $opposite-direction: right; -// $default-float: left; -// $last-child-float: $opposite-direction; - -// We use these to make sure border radius matches unless we want it different. -// $global-radius: 3px; -// $global-rounded: 1000px; - -// We use these to control inset shadow shiny edges and depressions. -// $shiny-edge-size: 0 1px 0; -// $shiny-edge-color: rgba($white, .5); -// $shiny-edge-active-color: rgba($black, .2); - -// d. Media Query Ranges -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $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"; - -// $landscape: "#{$screen} and (orientation: landscape)"; -// $portrait: "#{$screen} and (orientation: portrait)"; - -// $small-up: $screen; -// $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; - -// $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"; -// $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"; - -// $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"; -// $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"; - -// $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"; -// $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"; - -// $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; -// $large: $large-up; - -// We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet -// $cursor-crosshair-value: crosshair; -// $cursor-default-value: default; -// $cursor-disabled-value: not-allowed; -// $cursor-pointer-value: pointer; -// $cursor-help-value: help; -// $cursor-text-value: text; - -// e. Typography -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-type-classes: $include-html-classes; - -// We use these to control header font styles -// $header-font-family: $body-font-family; -// $header-font-weight: $font-weight-normal; -// $header-font-style: normal; -// $header-font-color: $jet; -// $header-line-height: 1.4; -// $header-top-margin: .2rem; -// $header-bottom-margin: .5rem; -// $header-text-rendering: optimizeLegibility; - -// We use these to control header font sizes -// $h1-font-size: rem-calc(44); -// $h2-font-size: rem-calc(37); -// $h3-font-size: rem-calc(27); -// $h4-font-size: rem-calc(23); -// $h5-font-size: rem-calc(18); -// $h6-font-size: 1rem; - -// We use these to control header size reduction on small screens -// $h1-font-reduction: rem-calc(10); -// $h2-font-reduction: rem-calc(10); -// $h3-font-reduction: rem-calc(5); -// $h4-font-reduction: rem-calc(5); -// $h5-font-reduction: 0; -// $h6-font-reduction: 0; - -// These control how subheaders are styled. -// $subheader-line-height: 1.4; -// $subheader-font-color: scale-color($header-font-color, $lightness: 35%); -// $subheader-font-weight: $font-weight-normal; -// $subheader-top-margin: .2rem; -// $subheader-bottom-margin: .5rem; - -// A general styling -// $small-font-size: 60%; -// $small-font-color: scale-color($header-font-color, $lightness: 35%); - -// We use these to style paragraphs -// $paragraph-font-family: inherit; -// $paragraph-font-weight: $font-weight-normal; -// $paragraph-font-size: 1rem; -// $paragraph-line-height: 1.6; -// $paragraph-margin-bottom: rem-calc(20); -// $paragraph-aside-font-size: rem-calc(14); -// $paragraph-aside-line-height: 1.35; -// $paragraph-aside-font-style: italic; -// $paragraph-text-rendering: optimizeLegibility; - -// We use these to style tags -// $code-color: $oil; -// $code-font-family: $font-family-monospace; -// $code-font-weight: $font-weight-normal; -// $code-background-color: scale-color($secondary-color, $lightness: 70%); -// $code-border-size: 1px; -// $code-border-style: solid; -// $code-border-color: scale-color($code-background-color, $lightness: -10%); -// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1); - -// We use these to style anchors -// $anchor-text-decoration: none; -// $anchor-text-decoration-hover: none; -// $anchor-font-color: $primary-color; -// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%); - -// We use these to style the
element -// $hr-border-width: 1px; -// $hr-border-style: solid; -// $hr-border-color: $gainsboro; -// $hr-margin: rem-calc(20); - -// We use these to style lists -// $list-font-family: $paragraph-font-family; -// $list-font-size: $paragraph-font-size; -// $list-line-height: $paragraph-line-height; -// $list-margin-bottom: $paragraph-margin-bottom; -// $list-style-position: outside; -// $list-side-margin: 1.1rem; -// $list-ordered-side-margin: 1.4rem; -// $list-side-margin-no-bullet: 0; -// $list-nested-margin: rem-calc(20); -// $definition-list-header-weight: $font-weight-bold; -// $definition-list-header-margin-bottom: .3rem; -// $definition-list-margin-bottom: rem-calc(12); - -// We use these to style blockquotes -// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%); -// $blockquote-padding: rem-calc(9 20 0 19); -// $blockquote-border: 1px solid $gainsboro; -// $blockquote-cite-font-size: rem-calc(13); -// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%); -// $blockquote-cite-link-color: $blockquote-cite-font-color; - -// Acronym styles -// $acronym-underline: 1px dotted $gainsboro; - -// We use these to control padding and margin -// $microformat-padding: rem-calc(10 12); -// $microformat-margin: rem-calc(0 0 20 0); - -// We use these to control the border styles -// $microformat-border-width: 1px; -// $microformat-border-style: solid; -// $microformat-border-color: $gainsboro; - -// We use these to control full name font styles -// $microformat-fullname-font-weight: $font-weight-bold; -// $microformat-fullname-font-size: rem-calc(15); - -// We use this to control the summary font styles -// $microformat-summary-font-weight: $font-weight-bold; - -// We use this to control abbr padding -// $microformat-abbr-padding: rem-calc(0 1); - -// We use this to control abbr font styles -// $microformat-abbr-font-weight: $font-weight-bold; -// $microformat-abbr-font-decoration: none; - -// 01. Accordion -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-accordion-classes: $include-html-classes; - -// $accordion-navigation-padding: rem-calc(16); -// $accordion-navigation-bg-color: $silver; -// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%); -// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%); -// $accordion-navigation-font-color: $jet; -// $accordion-navigation-font-size: rem-calc(16); -// $accordion-navigation-font-family: $body-font-family; - -// $accordion-content-padding: ($column-gutter/2); -// $accordion-content-active-bg-color: $white; - -// 02. Alert Boxes -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-alert-classes: $include-html-classes; - -// We use this to control alert padding. -// $alert-padding-top: rem-calc(14); -// $alert-padding-default-float: $alert-padding-top; -// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10); -// $alert-padding-bottom: $alert-padding-top; - -// We use these to control text style. -// $alert-font-weight: $font-weight-normal; -// $alert-font-size: rem-calc(13); -// $alert-font-color: $white; -// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%); - -// We use this for close hover effect. -// $alert-function-factor: -14%; - -// We use these to control border styles. -// $alert-border-style: solid; -// $alert-border-width: 1px; -// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor); -// $alert-bottom-margin: rem-calc(20); - -// We use these to style the close buttons -// $alert-close-color: $oil; -// $alert-close-top: 50%; -// $alert-close-position: rem-calc(4); -// $alert-close-font-size: rem-calc(22); -// $alert-close-opacity: .3; -// $alert-close-opacity-hover: .5; -// $alert-close-padding: 9px 6px 4px; -// $alert-close-background: inherit; - -// We use this to control border radius -// $alert-radius: $global-radius; - -// $alert-transition-speed: 300ms; -// $alert-transition-ease: ease-out; - -// 03. Block Grid -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-block-grid-classes: $include-html-classes; -// $include-xl-html-block-grid-classes: false; - -// We use this to control the maximum number of block grid elements per row -// $block-grid-elements: 12; -// $block-grid-default-spacing: rem-calc(20); - -// $align-block-grid-to-grid: false; -// @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;} - -// Enables media queries for block-grid classes. Set to false if writing semantic HTML. -// $block-grid-media-queries: true; - -// 04. Breadcrumbs -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-nav-classes: $include-html-classes; - -// We use this to set the background color for the breadcrumb container. -// $crumb-bg: scale-color($secondary-color, $lightness: 55%); - -// We use these to set the padding around the breadcrumbs. -// $crumb-padding: rem-calc(9 14 9); -// $crumb-side-padding: rem-calc(12); - -// We use these to control border styles. -// $crumb-function-factor: -10%; -// $crumb-border-size: 1px; -// $crumb-border-style: solid; -// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor); -// $crumb-radius: $global-radius; - -// We use these to set various text styles for breadcrumbs. -// $crumb-font-size: rem-calc(11); -// $crumb-font-color: $primary-color; -// $crumb-font-color-current: $oil; -// $crumb-font-color-unavailable: $aluminum; -// $crumb-font-transform: uppercase; -// $crumb-link-decor: underline; - -// We use these to control the slash between breadcrumbs -// $crumb-slash-color: $base; -// $crumb-slash: "/"; - -// 05. Buttons -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-button-classes: $include-html-classes; - -// We use these to build padding for buttons. -// $button-tny: rem-calc(10); -// $button-sml: rem-calc(14); -// $button-med: rem-calc(16); -// $button-lrg: rem-calc(18); - -// We use this to control the display property. -// $button-display: inline-block; -// $button-margin-bottom: rem-calc(20); - -// We use these to control button text styles. -// $button-font-family: $body-font-family; -// $button-font-color: $white; -// $button-font-color-alt: $oil; -// $button-font-tny: rem-calc(11); -// $button-font-sml: rem-calc(13); -// $button-font-med: rem-calc(16); -// $button-font-lrg: rem-calc(20); -// $button-font-weight: $font-weight-normal; -// $button-font-align: center; - -// We use these to control various hover effects. -// $button-function-factor: -20%; - -// We use these to control button border styles. -// $button-border-width: 0; -// $button-border-style: solid; -// $button-bg-color: $primary-color; -// $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor); -// $button-border-color: $button-bg-hover; -// $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor); -// $secondary-button-border-color: $secondary-button-bg-hover; -// $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor); -// $success-button-border-color: $success-button-bg-hover; -// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor); -// $alert-button-border-color: $alert-button-bg-hover; -// $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor); -// $warning-button-border-color: $warning-button-bg-hover; -// $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor); -// $info-button-border-color: $info-button-bg-hover; - -// We use this to set the default radius used throughout the core. -// $button-radius: $global-radius; -// $button-round: $global-rounded; - -// We use this to set default opacity and cursor for disabled buttons. -// $button-disabled-opacity: .7; -// $button-disabled-cursor: $cursor-default-value; - -// 06. Button Groups -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-button-classes: $include-html-classes; - -// Sets the margin for the right side by default, and the left margin if right-to-left direction is used -// $button-bar-margin-opposite: rem-calc(10); -// $button-group-border-width: 1px; - -// 07. Clearing -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-clearing-classes: $include-html-classes; - -// We use these to set the background colors for parts of Clearing. -// $clearing-bg: $oil; -// $clearing-caption-bg: $clearing-bg; -// $clearing-carousel-bg: rgba(51,51,51,0.8); -// $clearing-img-bg: $clearing-bg; - -// We use these to style the close button -// $clearing-close-color: $iron; -// $clearing-close-size: 30px; - -// We use these to style the arrows -// $clearing-arrow-size: 12px; -// $clearing-arrow-color: $clearing-close-color; - -// We use these to style captions -// $clearing-caption-font-color: $iron; -// $clearing-caption-font-size: .875em; -// $clearing-caption-padding: 10px 30px 20px; - -// We use these to make the image and carousel height and style -// $clearing-active-img-height: 85%; -// $clearing-carousel-height: 120px; -// $clearing-carousel-thumb-width: 120px; -// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255); - -// 08. Dropdown -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-dropdown-classes: $include-html-classes; - -// We use these to controls height and width styles. -// $f-dropdown-max-width: 200px; -// $f-dropdown-height: auto; -// $f-dropdown-max-height: none; - -// Used for bottom position -// $f-dropdown-margin-top: 2px; - -// Used for right position -// $f-dropdown-margin-left: $f-dropdown-margin-top; - -// Used for left position -// $f-dropdown-margin-right: $f-dropdown-margin-top; - -// Used for top position -// $f-dropdown-margin-bottom: $f-dropdown-margin-top; - -// We use this to control the background color -// $f-dropdown-bg: $white; - -// We use this to set the border styles for dropdowns. -// $f-dropdown-border-style: solid; -// $f-dropdown-border-width: 1px; -// $f-dropdown-border-color: scale-color($white, $lightness: -20%); - -// We use these to style the triangle pip. -// $f-dropdown-triangle-size: 6px; -// $f-dropdown-triangle-color: $white; -// $f-dropdown-triangle-side-offset: 10px; - -// We use these to control styles for the list elements. -// $f-dropdown-list-style: none; -// $f-dropdown-font-color: $charcoal; -// $f-dropdown-font-size: rem-calc(14); -// $f-dropdown-list-padding: rem-calc(5, 10); -// $f-dropdown-line-height: rem-calc(18); -// $f-dropdown-list-hover-bg: $smoke; -// $dropdown-mobile-default-float: 0; - -// We use this to control the styles for when the dropdown has custom content. -// $f-dropdown-content-padding: rem-calc(20); - -// Default radius for dropdown. -// $f-dropdown-radius: $global-radius; - - -// 09. Dropdown Buttons -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-button-classes: $include-html-classes; - -// We use these to set the color of the pip in dropdown buttons -// $dropdown-button-pip-color: $white; -// $dropdown-button-pip-color-alt: $oil; - -// We use these to set the size of the pip in dropdown buttons -// $button-pip-tny: rem-calc(6); -// $button-pip-sml: rem-calc(7); -// $button-pip-med: rem-calc(9); -// $button-pip-lrg: rem-calc(11); - -// We use these to style tiny dropdown buttons -// $dropdown-button-padding-tny: $button-pip-tny * 7; -// $dropdown-button-pip-size-tny: $button-pip-tny; -// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3; -// $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1); - -// We use these to style small dropdown buttons -// $dropdown-button-padding-sml: $button-pip-sml * 7; -// $dropdown-button-pip-size-sml: $button-pip-sml; -// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3; -// $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1); - -// We use these to style medium dropdown buttons -// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3); -// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3); -// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5; -// $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2); - -// We use these to style large dropdown buttons -// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3); -// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); -// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5; -// $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3); - -// 10. Flex Video -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-media-classes: $include-html-classes; - -// We use these to control video container padding and margins -// $flex-video-padding-top: rem-calc(25); -// $flex-video-padding-bottom: 67.5%; -// $flex-video-margin-bottom: rem-calc(16); - -// We use this to control widescreen bottom padding -// $flex-video-widescreen-padding-bottom: 56.34%; - -// 11. Forms -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-form-classes: $include-html-classes; - -// We use this to set the base for lots of form spacing and positioning styles -// $form-spacing: rem-calc(16); - -// We use these to style the labels in different ways -// $form-label-pointer: pointer; -// $form-label-font-size: rem-calc(14); -// $form-label-font-weight: $font-weight-normal; -// $form-label-line-height: 1.5; -// $form-label-font-color: scale-color($black, $lightness: 30%); -// $form-label-small-transform: capitalize; -// $form-label-bottom-margin: 0; -// $input-font-family: inherit; -// $input-font-color: rgba(0,0,0,0.75); -// $input-font-size: rem-calc(14); -// $input-bg-color: $white; -// $input-focus-bg-color: scale-color($white, $lightness: -2%); -// $input-border-color: scale-color($white, $lightness: -20%); -// $input-focus-border-color: scale-color($white, $lightness: -40%); -// $input-border-style: solid; -// $input-border-width: 1px; -// $input-border-radius: $global-radius; -// $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: false; - -// We use these to style the fieldset border and spacing. -// $fieldset-border-style: solid; -// $fieldset-border-width: 1px; -// $fieldset-border-color: $gainsboro; -// $fieldset-padding: rem-calc(20); -// $fieldset-margin: rem-calc(18 0); - -// We use these to style the legends when you use them -// $legend-bg: $white; -// $legend-font-weight: $font-weight-bold; -// $legend-padding: rem-calc(0 3); - -// We use these to style the prefix and postfix input elements -// $input-prefix-bg: scale-color($white, $lightness: -5%); -// $input-prefix-border-color: scale-color($white, $lightness: -20%); -// $input-prefix-border-size: 1px; -// $input-prefix-border-type: solid; -// $input-prefix-overflow: hidden; -// $input-prefix-font-color: $oil; -// $input-prefix-font-color-alt: $white; - -// We use this setting to turn on/off HTML5 number spinners (the up/down arrows) -// $input-number-spinners: true; - -// We use these to style the error states for inputs and labels -// $input-error-message-padding: rem-calc(6 9 9); -// $input-error-message-top: -1px; -// $input-error-message-font-size: rem-calc(12); -// $input-error-message-font-weight: $font-weight-normal; -// $input-error-message-font-style: italic; -// $input-error-message-font-color: $white; -// $input-error-message-bg-color: $alert-color; -// $input-error-message-font-color-alt: $oil; - -// We use this to style the glowing effect of inputs when focused -// $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%); - - -// 12. Icon Bar -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// We use these to style the icon-bar and items -// $icon-bar-bg: $oil; -// $icon-bar-font-color: $white; -// $icon-bar-font-color-hover: $icon-bar-font-color; -// $icon-bar-font-size: 1rem; -// $icon-bar-hover-color: $primary-color; -// $icon-bar-icon-color: $white; -// $icon-bar-icon-color-hover: $icon-bar-icon-color; -// $icon-bar-icon-size: 1.875rem; -// $icon-bar-image-width: 1.875rem; -// $icon-bar-image-height: 1.875rem; -// $icon-bar-active-color: $primary-color; -// $icon-bar-item-padding: 1.25rem; - -// We use this to set default opacity and cursor for disabled icons. -// $icon-bar-disabled-opacity: .7; - -// 13. Inline Lists -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-inline-list-classes: $include-html-classes; - -// We use this to control the margins and padding of the inline list. -// $inline-list-top-margin: 0; -// $inline-list-opposite-margin: 0; -// $inline-list-bottom-margin: rem-calc(17); -// $inline-list-default-float-margin: rem-calc(-22); -// $inline-list-default-float-list-margin: rem-calc(22); - -// $inline-list-padding: 0; - -// We use this to control the overflow of the inline list. -// $inline-list-overflow: hidden; - -// We use this to control the list items -// $inline-list-display: block; - -// We use this to control any elements within list items -// $inline-list-children-display: block; - -// 14. Joyride -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-joyride-classes: $include-html-classes; - -// Controlling default Joyride styles -// $joyride-tip-bg: $oil; -// $joyride-tip-default-width: 300px; -// $joyride-tip-padding: rem-calc(18 20 24); -// $joyride-tip-border: solid 1px $charcoal; -// $joyride-tip-radius: 4px; -// $joyride-tip-position-offset: 22px; - -// Here, we're setting the tip font styles -// $joyride-tip-font-color: $white; -// $joyride-tip-font-size: rem-calc(14); -// $joyride-tip-header-weight: $font-weight-bold; - -// This changes the nub size -// $joyride-tip-nub-size: 10px; - -// This adjusts the styles for the timer when its enabled -// $joyride-tip-timer-width: 50px; -// $joyride-tip-timer-height: 3px; -// $joyride-tip-timer-color: $steel; - -// This changes up the styles for the close button -// $joyride-tip-close-color: $monsoon; -// $joyride-tip-close-size: 24px; -// $joyride-tip-close-weight: $font-weight-normal; - -// When Joyride is filling the screen, we use this style for the bg -// $joyride-screenfill: rgba(0,0,0,0.5); - -// 15. Keystrokes -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-keystroke-classes: $include-html-classes; - -// We use these to control text styles. -// $keystroke-font: "Consolas", "Menlo", "Courier", monospace; -// $keystroke-font-size: inherit; -// $keystroke-font-color: $jet; -// $keystroke-font-color-alt: $white; -// $keystroke-function-factor: -7%; - -// We use this to control keystroke padding. -// $keystroke-padding: rem-calc(2 4 0); - -// We use these to control background and border styles. -// $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor); -// $keystroke-border-style: solid; -// $keystroke-border-width: 1px; -// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor); -// $keystroke-radius: $global-radius; - -// 16. Labels -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-label-classes: $include-html-classes; - -// We use these to style the labels -// $label-padding: rem-calc(4 8 4); -// $label-radius: $global-radius; - -// We use these to style the label text -// $label-font-sizing: rem-calc(11); -// $label-font-weight: $font-weight-normal; -// $label-font-color: $oil; -// $label-font-color-alt: $white; -// $label-font-family: $body-font-family; - -// 17. Magellan -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-magellan-classes: $include-html-classes; - -// $magellan-bg: $white; -// $magellan-padding: 10px; - -// 18. Off-canvas -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// Off Canvas Tab Bar Variables -// $include-html-off-canvas-classes: $include-html-classes; - -// $tabbar-bg: $oil; -// $tabbar-height: rem-calc(45); -// $tabbar-icon-width: $tabbar-height; -// $tabbar-line-height: $tabbar-height; -// $tabbar-color: $white; -// $tabbar-middle-padding: 0 rem-calc(10); - -// Off Canvas Divider Styles -// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%); -// $tabbar-right-section-border: $tabbar-left-section-border; - - -// Off Canvas Tab Bar Headers -// $tabbar-header-color: $white; -// $tabbar-header-weight: $font-weight-bold; -// $tabbar-header-line-height: $tabbar-height; -// $tabbar-header-margin: 0; - -// 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: .3rem rem-calc(15); -// $off-canvas-label-color: $aluminum; -// $off-canvas-label-text-transform: uppercase; -// $off-canvas-label-font-size: rem-calc(12); -// $off-canvas-label-font-weight: $font-weight-bold; -// $off-canvas-label-bg: $tuatara; -// $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%); -// $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, .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; -// $off-canvas-back-border-bottom: $off-canvas-label-border-bottom; -// $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%); -// $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%); -// $off-canvas-back-hover-border-bottom: none; - -// Off Canvas Menu Icon Variables -// $tabbar-menu-icon-color: $white; -// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%); - -// $tabbar-menu-icon-text-indent: rem-calc(35); -// $tabbar-menu-icon-width: $tabbar-icon-width; -// $tabbar-menu-icon-height: $tabbar-height; -// $tabbar-menu-icon-padding: 0; - -// $tabbar-hamburger-icon-width: rem-calc(16); -// $tabbar-hamburger-icon-left: false; -// $tabbar-hamburger-icon-top: false; -// $tabbar-hamburger-icon-thickness: 1px; -// $tabbar-hamburger-icon-gap: 6px; - -// 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, .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"; - -// 19. Orbit -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-orbit-classes: $include-html-classes; - -// We use these to control the caption styles -// $orbit-container-bg: none; -// $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" -// $orbit-caption-padding: rem-calc(10 14); -// $orbit-caption-height: auto; - -// We use these to control the left/right nav styles -// $orbit-nav-bg: transparent; -// $orbit-nav-bg-hover: rgba(0,0,0,0.3); -// $orbit-nav-arrow-color: $white; -// $orbit-nav-arrow-color-hover: $white; - -// We use these to control the timer styles -// $orbit-timer-bg: rgba(255,255,255,0.3); -// $orbit-timer-show-progress-bar: true; - -// We use these to control the bullet nav styles -// $orbit-bullet-nav-color: $iron; -// $orbit-bullet-nav-color-active: $aluminum; -// $orbit-bullet-radius: rem-calc(9); - -// We use these to controls the style of slide numbers -// $orbit-slide-number-bg: rgba(0,0,0,0); -// $orbit-slide-number-font-color: $white; -// $orbit-slide-number-padding: rem-calc(5); - -// Graceful Loading Wrapper and preloader -// $wrapper-class: "slideshow-wrapper"; -// $preloader-class: "preloader"; - -// Hide controls on small -// $orbit-nav-hide-for-small: true; -// $orbit-bullet-hide-for-small: true; -// $orbit-timer-hide-for-small: true; - -// 20. Pagination -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-pagination-classes: $include-html-classes; - -// We use these to control the pagination container -// $pagination-height: rem-calc(24); -// $pagination-margin: rem-calc(-5); - -// We use these to set the list-item properties -// $pagination-li-float: $default-float; -// $pagination-li-height: rem-calc(24); -// $pagination-li-font-color: $jet; -// $pagination-li-font-size: rem-calc(14); -// $pagination-li-margin: rem-calc(5); - -// We use these for the pagination anchor links -// $pagination-link-pad: rem-calc(1 10 1); -// $pagination-link-font-color: $aluminum; -// $pagination-link-active-bg: scale-color($white, $lightness: -10%); - -// We use these for disabled anchor links -// $pagination-link-unavailable-cursor: default; -// $pagination-link-unavailable-font-color: $aluminum; -// $pagination-link-unavailable-bg-active: transparent; - -// We use these for currently selected anchor links -// $pagination-link-current-background: $primary-color; -// $pagination-link-current-font-color: $white; -// $pagination-link-current-font-weight: $font-weight-bold; -// $pagination-link-current-cursor: default; -// $pagination-link-current-active-bg: $primary-color; - -// 21. Panels -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-panel-classes: $include-html-classes; - -// We use these to control the background and border styles -// $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-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); -// $panel-padding: rem-calc(20); - -// We use these to set default font colors -// $panel-font-color: $oil; -// $panel-font-color-alt: $white; - -// $panel-header-adjust: true; -// $callout-panel-link-color: $primary-color; -// $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%); - -// 22. Pricing Tables -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-pricing-classes: $include-html-classes; - -// We use this to control the border color -// $price-table-border: solid 1px $gainsboro; - -// We use this to control the bottom margin of the pricing table -// $price-table-margin-bottom: rem-calc(20); - -// We use these to control the title styles -// $price-title-bg: $oil; -// $price-title-padding: rem-calc(15 20); -// $price-title-align: center; -// $price-title-color: $smoke; -// $price-title-weight: $font-weight-normal; -// $price-title-size: rem-calc(16); -// $price-title-font-family: $body-font-family; - -// We use these to control the price styles -// $price-money-bg: $vapor; -// $price-money-padding: rem-calc(15 20); -// $price-money-align: center; -// $price-money-color: $oil; -// $price-money-weight: $font-weight-normal; -// $price-money-size: rem-calc(32); -// $price-money-font-family: $body-font-family; - - -// We use these to control the description styles -// $price-bg: $white; -// $price-desc-color: $monsoon; -// $price-desc-padding: rem-calc(15); -// $price-desc-align: center; -// $price-desc-font-size: rem-calc(12); -// $price-desc-weight: $font-weight-normal; -// $price-desc-line-height: 1.4; -// $price-desc-bottom-border: dotted 1px $gainsboro; - -// We use these to control the list item styles -// $price-item-color: $oil; -// $price-item-padding: rem-calc(15); -// $price-item-align: center; -// $price-item-font-size: rem-calc(14); -// $price-item-weight: $font-weight-normal; -// $price-item-bottom-border: dotted 1px $gainsboro; - -// We use these to control the CTA area styles -// $price-cta-bg: $white; -// $price-cta-align: center; -// $price-cta-padding: rem-calc(20 20 0); - -// 23. Progress Bar -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-media-classes: $include-html-classes; - -// We use this to set the progress bar height -// $progress-bar-height: rem-calc(25); -// $progress-bar-color: $vapor; - -// We use these to control the border styles -// $progress-bar-border-color: scale-color($white, $lightness: 20%); -// $progress-bar-border-size: 1px; -// $progress-bar-border-style: solid; -// $progress-bar-border-radius: $global-radius; - -// We use these to control the margin & padding -// $progress-bar-margin-bottom: rem-calc(10); - -// We use these to set the meter colors -// $progress-meter-color: $primary-color; -// $progress-meter-secondary-color: $secondary-color; -// $progress-meter-success-color: $success-color; -// $progress-meter-alert-color: $alert-color; - -// 24. Range Slider -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-range-slider-classes: $include-html-classes; - -// These variables define the slider bar styles -// $range-slider-bar-width: 100%; -// $range-slider-bar-height: rem-calc(16); - -// $range-slider-bar-border-width: 1px; -// $range-slider-bar-border-style: solid; -// $range-slider-bar-border-color: $gainsboro; -// $range-slider-radius: $global-radius; -// $range-slider-round: $global-rounded; -// $range-slider-bar-bg-color: $ghost; -// $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%); - -// Vertical bar styles -// $range-slider-vertical-bar-width: rem-calc(16); -// $range-slider-vertical-bar-height: rem-calc(200); - -// These variabels define the slider handle styles -// $range-slider-handle-width: rem-calc(32); -// $range-slider-handle-height: rem-calc(22); -// $range-slider-handle-position-top: rem-calc(-5); -// $range-slider-handle-bg-color: $primary-color; -// $range-slider-handle-border-width: 1px; -// $range-slider-handle-border-style: solid; -// $range-slider-handle-border-color: none; -// $range-slider-handle-radius: $global-radius; -// $range-slider-handle-round: $global-rounded; -// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%); -// $range-slider-handle-cursor: pointer; - -// $range-slider-disabled-opacity: .7; -// $range-slider-disabled-cursor: $cursor-disabled-value; - -// 25. Reveal -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-reveal-classes: $include-html-classes; - -// We use these to control the style of the reveal overlay. -// $reveal-overlay-bg: rgba($black, .45); -// $reveal-overlay-bg-old: $black; - -// We use these to control the style of the modal itself. -// $reveal-modal-bg: $white; -// $reveal-position-top: rem-calc(100); -// $reveal-default-width: 80%; -// $reveal-max-width: $row-width; -// $reveal-modal-padding: rem-calc(20); -// $reveal-box-shadow: 0 0 10px rgba($black,.4); - -// We use these to style the reveal close button -// $reveal-close-font-size: rem-calc(40); -// $reveal-close-top: rem-calc(10); -// $reveal-close-side: rem-calc(22); -// $reveal-close-color: $base; -// $reveal-close-weight: $font-weight-bold; - -// We use this to set the default radius used throughout the core. -// $reveal-radius: $global-radius; -// $reveal-round: $global-rounded; - -// We use these to control the modal border -// $reveal-border-style: solid; -// $reveal-border-width: 1px; -// $reveal-border-color: $steel; - -// $reveal-modal-class: "reveal-modal"; -// $close-reveal-modal-class: "close-reveal-modal"; - -// 26. Side Nav -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-nav-classes: $include-html-classes; - -// We use this to control padding. -// $side-nav-padding: rem-calc(14 0); - -// We use these to control list styles. -// $side-nav-list-type: none; -// $side-nav-list-position: outside; -// $side-nav-list-margin: rem-calc(0 0 7 0); - -// We use these to control link styles. -// $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, .025); -// $side-nav-link-margin: 0; -// $side-nav-link-padding: rem-calc(7 14); -// $side-nav-font-size: rem-calc(14); -// $side-nav-font-weight: $font-weight-normal; -// $side-nav-font-weight-active: $side-nav-font-weight; -// $side-nav-font-family: $body-font-family; -// $side-nav-font-family-active: $side-nav-font-family; - -// We use these to control heading styles. -// $side-nav-heading-color: $side-nav-link-color; -// $side-nav-heading-font-size: $side-nav-font-size; -// $side-nav-heading-font-weight: bold; -// $side-nav-heading-text-transform: uppercase; - -// We use these to control border styles -// $side-nav-divider-size: 1px; -// $side-nav-divider-style: solid; -// $side-nav-divider-color: scale-color($white, $lightness: 10%); - -// 27. Split Buttons -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-button-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); - -// We use these to control tiny split buttons -// $split-button-padding-tny: $button-pip-tny * 10; -// $split-button-span-width-tny: $button-pip-tny * 6; -// $split-button-pip-size-tny: $button-pip-tny; -// $split-button-pip-top-tny: $button-pip-tny * 2; -// $split-button-pip-default-float-tny: rem-calc(-6); - -// We use these to control small split buttons -// $split-button-padding-sml: $button-pip-sml * 10; -// $split-button-span-width-sml: $button-pip-sml * 6; -// $split-button-pip-size-sml: $button-pip-sml; -// $split-button-pip-top-sml: $button-pip-sml * 1.5; -// $split-button-pip-default-float-sml: rem-calc(-6); - -// We use these to control medium split buttons -// $split-button-padding-med: $button-pip-med * 9; -// $split-button-span-width-med: $button-pip-med * 5.5; -// $split-button-pip-size-med: $button-pip-med - rem-calc(3); -// $split-button-pip-top-med: $button-pip-med * 1.5; -// $split-button-pip-default-float-med: rem-calc(-6); - -// We use these to control large split buttons -// $split-button-padding-lrg: $button-pip-lrg * 8; -// $split-button-span-width-lrg: $button-pip-lrg * 5; -// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); -// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5); -// $split-button-pip-default-float-lrg: rem-calc(-6); - -// 28. Sub Nav -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-nav-classes: $include-html-classes; - -// We use these to control margin and padding -// $sub-nav-list-margin: rem-calc(-4 0 18); -// $sub-nav-list-padding-top: rem-calc(4); - -// We use this to control the definition -// $sub-nav-font-family: $body-font-family; -// $sub-nav-font-size: rem-calc(14); -// $sub-nav-font-color: $aluminum; -// $sub-nav-font-weight: $font-weight-normal; -// $sub-nav-text-decoration: none; -// $sub-nav-padding: rem-calc(3 16); -// $sub-nav-border-radius: 3px; -// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%); - - -// We use these to control the active item styles - -// $sub-nav-active-font-weight: $font-weight-normal; -// $sub-nav-active-bg: $primary-color; -// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%); -// $sub-nav-active-color: $white; -// $sub-nav-active-padding: $sub-nav-padding; -// $sub-nav-active-cursor: default; - -// $sub-nav-item-divider: ""; -// $sub-nav-item-divider-margin: rem-calc(12); +// 1. Global +// 2. Breakpoints +// 3. The Grid +// 4. Base Typography +// 5. Typography Helpers +// 6. Abide +// 7. Accordion +// 8. Accordion Menu +// 9. Badge +// 10. Breadcrumbs +// 11. Button +// 12. Button Group +// 13. Callout +// 14. Close Button +// 15. Drilldown +// 16. Dropdown +// 17. Dropdown Menu +// 18. Flex Video +// 19. Forms +// 20. Label +// 21. Media Object +// 22. Menu +// 23. Off-canvas +// 24. Orbit +// 25. Pagination +// 26. Progress Bar +// 27. Reveal +// 28. Slider +// 29. Switch +// 30. Table +// 31. Tabs +// 32. Thumbnail +// 33. Tooltip +// 34. Top Bar + +@import '../components/foundation-sites/scss/util/util'; + +// 1. Global +// --------- + +$global-width: rem-calc(1200); +$global-font-size: 100%; +$global-lineheight: 1.5; +$primary-color: #2199e8; +$secondary-color: #777; +$success-color: #3adb76; +$warning-color: #ffae00; +$alert-color: #ec5840; +$light-gray: #e6e6e6; +$medium-gray: #cacaca; +$dark-gray: #8a8a8a; +$black: #0a0a0a; +$white: #fefefe; +$body-background: $white; +$body-font-color: $black; +$body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; +$body-antialiased: true; +$text-direction: ltr; +$global-margin: 1rem; +$global-padding: 1rem; +$global-margin: 1rem; +$global-weight-normal: normal; +$global-weight-bold: bold; +$global-radius: 0; +$global-namespace: false; +$global-text-direction: ltr; +$rem-base: 16px; + +// 2. Breakpoints +// -------------- + +$breakpoints: ( + small: 0, + medium: 512px, + large: 1024px, + xlarge: 1200px, + xxlarge: 1440px, +); +$breakpoint-classes: (small medium large); + +// 3. The Grid +// ----------- + +$grid-row-width: $global-width; +$grid-column-count: 12; +$grid-column-gutter: 30px; + +// 4. Base Typography +// ------------------ + +$header-font-family: $body-font-family; +$header-font-weight: $global-weight-normal; +$header-font-style: normal; +$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; +$header-sizes: ( + small: ( + 'h1': 24, + 'h2': 20, + 'h3': 19, + 'h4': 18, + 'h5': 17, + 'h6': 16, + ), + medium: ( + 'h1': 48, + 'h2': 40, + 'h3': 31, + 'h4': 25, + 'h5': 20, + 'h6': 16, + ), +); +$header-color: inherit; +$header-lineheight: 1.4; +$header-margin-bottom: 0.5rem; +$header-text-rendering: optimizeLegibility; +$small-font-size: 80%; +$header-small-font-color: $medium-gray; +$paragraph-lineheight: 1.6; +$paragraph-margin-bottom: 1rem; +$paragraph-text-rendering: optimizeLegibility; +$code-color: $black; +$code-font-family: $font-family-monospace; +$code-font-weight: $global-weight-normal; +$code-background: $light-gray; +$code-border: 1px solid $medium-gray; +$code-padding: rem-calc(2 5 1); +$anchor-color: $primary-color; +$anchor-color-hover: scale-color($anchor-color, $lightness: -14%); +$anchor-text-decoration: none; +$anchor-text-decoration-hover: none; +$hr-width: $global-width; +$hr-border: 1px solid $medium-gray; +$hr-margin: rem-calc(20) auto; +$list-lineheight: $paragraph-lineheight; +$list-margin-bottom: $paragraph-margin-bottom; +$list-style-type: disc; +$list-style-position: outside; +$list-side-margin: 1.25rem; +$list-nested-side-margin: 1.25rem; +$defnlist-margin-bottom: 1rem; +$defnlist-term-weight: $global-weight-bold; +$defnlist-term-margin-bottom: 0.3rem; +$blockquote-color: $dark-gray; +$blockquote-padding: rem-calc(9 20 0 19); +$blockquote-border: 1px solid $medium-gray; +$cite-font-size: rem-calc(13); +$cite-color: $dark-gray; +$keystroke-font: $font-family-monospace; +$keystroke-color: $black; +$keystroke-background: $light-gray; +$keystroke-padding: rem-calc(2 4 0); +$keystroke-radius: $global-radius; +$abbr-underline: 1px dotted $black; + +// 5. Typography Helpers +// --------------------- + +$lead-font-size: $global-font-size * 1.25; +$lead-lineheight: 1.6; +$subheader-lineheight: 1.4; +$subheader-color: $dark-gray; +$subheader-font-weight: $global-weight-normal; +$subheader-margin-top: 0.2rem; +$subheader-margin-bottom: 0.5rem; +$stat-font-size: 2.5rem; + +// 6. Abide +// -------- + +$abide-inputs: true; +$abide-labels: true; +$input-background-invalid: $alert-color; +$form-label-color-invalid: $alert-color; +$input-error-color: $alert-color; +$input-error-font-size: rem-calc(12); +$input-error-font-weight: $global-weight-bold; + +// 7. Accordion +// ------------ + +$accordion-background: $white; +$accordion-plusminus: true; +$accordion-item-color: foreground($accordion-background, $primary-color); +$accordion-item-background-hover: $light-gray; +$accordion-item-padding: 1.25rem 1rem; +$accordion-content-background: $white; +$accordion-content-border: 1px solid $light-gray; +$accordion-content-color: foreground($accordion-background, $primary-color); +$accordion-content-padding: 1rem; + +// 8. Accordion Menu +// ----------------- + +$accordionmenu-arrows: true; + +// 9. Badge +// -------- + +$badge-background: $primary-color; +$badge-color: foreground($badge-background); +$badge-padding: 0.3em; +$badge-minwidth: 2.1em; +$badge-font-size: 0.6rem; + +// 10. Breadcrumbs +// --------------- + +$breadcrumbs-margin: 0 0 $global-margin 0; +$breadcrumbs-item-font-size: rem-calc(11); +$breadcrumbs-item-color: $primary-color; +$breadcrumbs-item-color-current: $black; +$breadcrumbs-item-color-disabled: $medium-gray; +$breadcrumbs-item-margin: 0.75rem; +$breadcrumbs-item-uppercase: true; +$breadcrumbs-item-slash: true; + +// 11. Button +// ---------- + +$button-padding: 0.85em 1em; +$button-margin: 0 $global-margin $global-margin 0; +$button-fill: solid; +$button-background: $primary-color; +$button-background-hover: scale-color($button-background, $lightness: -15%); +$button-color: #fff; +$button-color-alt: #000; +$button-radius: $global-radius; +$button-sizes: ( + tiny: 0.6rem, + small: 0.75rem, + default: 0.9rem, + large: 1.25rem, +); +$button-opacity-disabled: 0.25; + +// 12. Button Group +// ---------------- + +$buttongroup-margin: 1rem; +$buttongroup-spacing: 1px; +$buttongroup-child-selector: '.button'; +$buttongroup-expand-max: 6; + +// 13. Callout +// ----------- + +$callout-background: $white; +$callout-background-fade: 85%; +$callout-border: 1px solid rgba($black, 0.25); +$callout-margin: 0 0 1rem 0; +$callout-padding: 1rem; +$callout-font-color: $body-font-color; +$callout-font-color-alt: $body-background; +$callout-radius: $global-radius; +$callout-link-tint: 30%; + +// 14. Close Button +// ---------------- + +$closebutton-position: right top; +$closebutton-offset-horizontal: 1rem; +$closebutton-offset-vertical: 0.5rem; +$closebutton-size: 2em; +$closebutton-lineheight: 1; +$closebutton-color: $dark-gray; +$closebutton-color-hover: $black; + +// 15. Drilldown +// ------------- + +$drilldown-transition: transform 0.15s linear; + +// 16. Dropdown +// ------------ + +$dropdown-padding: 1rem; +$dropdown-border: 1px solid $medium-gray; +$dropdown-font-size: 16rem; +$dropdown-width: 300px; +$dropdown-radius: $global-radius; +$dropdown-sizes: ( + tiny: 100px, + small: 200px, + large: 400px, +); + +// 17. Dropdown Menu +// ----------------- + +$dropdownmenu-arrows: true; +$dropdownmenu-min-width: 200px; +$dropdownmenu-background: $white; +$dropdown-border: 1px solid $medium-gray; + +// 18. Flex Video +// -------------- + +$flexvideo-padding-top: rem-calc(25); +$flexvideo-margin-bottom: rem-calc(16); +$flexvideo-ratio: 4 by 3; +$flexvideo-ratio-widescreen: 16 by 9; + +// 19. Forms +// --------- + +$fieldset-border: 1px solid $medium-gray; +$fieldset-padding: rem-calc(20); +$fieldset-margin: rem-calc(18 0); +$legend-padding: rem-calc(0 3); +$form-spacing: rem-calc(16); +$helptext-color: #333; +$helptext-font-size: rem-calc(13); +$helptext-font-style: italic; +$input-prefix-color: $black; +$input-prefix-background: $light-gray; +$input-prefix-border: 1px solid $medium-gray; +$input-prefix-padding: 1rem; +$form-label-color: $black; +$form-label-font-size: rem-calc(14); +$form-label-font-weight: $global-weight-normal; +$form-label-line-height: 1.8; +$select-background: #fafafa; +$select-triangle-color: #333; +$select-radius: $global-radius; +$input-color: $dark-gray; +$input-font-family: inherit; +$input-font-size: rem-calc(16); +$input-background: $white; +$input-background-focus: $white; +$input-background-disabled: $light-gray; +$input-border: 1px solid $medium-gray; +$input-border-focus: 1px solid $dark-gray; +$input-shadow: inset 0 1px 2px rgba($black, 0.1); +$input-shadow-focus: 0 0 5px $medium-gray; +$input-cursor-disabled: default; +$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; +$input-number-spinners: true; +$input-radius: $global-radius; + +// 20. Label +// --------- + +$label-background: $primary-color; +$label-color: foreground($label-background); +$label-font-size: 0.8rem; +$label-padding: 0.33333rem 0.5rem; +$label-radius: $global-radius; + +// 21. Media Object +// ---------------- + +$mediaobject-margin-bottom: $global-margin; +$mediaobject-section-padding: $global-padding; +$mediaobject-image-width-stacked: 100%; + +// 22. Menu +// -------- + +$menu-margin: 0; +$menu-margin-nested: 1rem; +$menu-item-padding: 0.7rem 1rem; +$menu-icon-spacing: 0.25rem; +$menu-expand-max: 6; + +// 23. Off-canvas +// -------------- + +$offcanvas-size: 250px; +$offcanvas-background: $light-gray; +$offcanvas-zindex: -1; +$offcanvas-transition-length: 0.5s; +$offcanvas-transition-timing: ease; +$offcanvas-exit-background: rgba($white, 0.25); +$maincontent-class: 'main-content'; +$maincontent-shadow: 0 0 10px rgba($black, 0.5); +$maincontent-prevent-scroll: true; + +// 24. Orbit +// --------- + +$orbit-bullet-background: $medium-gray; +$orbit-bullet-background-active: $dark-gray; +$orbit-bullet-diameter: 1.2rem; +$orbit-bullet-margin: 0.1rem; +$orbit-bullet-margin-top: 0.8rem; +$orbit-bullet-margin-bottom: 0.8rem; +$orbit-caption-background: rgba($black, 0.5); +$orbit-caption-padding: 1rem; +$orbit-control-background-hover: rgba($black, 0.5); +$orbit-control-padding: 1rem; +$orbit-control-zindex: 10; + +// 25. Pagination +// -------------- + +$pagination-font-size: rem-calc(14); +$pagination-margin-bottom: $global-margin; +$pagination-item-color: $black; +$pagination-item-padding: rem-calc(3 10); +$pagination-item-spacing: rem-calc(1); +$pagination-radius: $global-radius; +$pagination-item-background-hover: $light-gray; +$pagination-item-background-current: $primary-color; +$pagination-item-color-current: foreground($pagination-item-background-current); +$pagination-item-color-disabled: $medium-gray; +$pagination-ellipsis-color: $black; +$pagination-mobile-items: false; +$pagination-arrows: true; + +// 26. Progress Bar +// ---------------- + +$progress-height: 1rem; +$progress-background: $medium-gray; +$progress-margin-bottom: $global-margin; +$progress-meter-background: $primary-color; +$progress-radius: $global-radius; + +// 27. Reveal +// ---------- + +$reveal-background: $white; +$reveal-width: 600px; +$reveal-max-width: $global-width; +$reveal-offset: rem-calc(100); +$reveal-padding: $global-padding; +$reveal-border: 1px solid $medium-gray; +$reveal-radius: $global-radius; +$reveal-zindex: 1005; +$reveal-overlay-background: rgba($black, 0.45); + +// 28. Slider +// ---------- + +$slider-height: 0.5rem; +$slider-width-vertical: $slider-height; +$slider-background: $light-gray; +$slider-fill-background: $medium-gray; +$slider-handle-height: 1.4rem; +$slider-handle-width: 1.4rem; +$slider-handle-background: $primary-color; +$slider-opacity-disabled: 0.25; +$slider-radius: $global-radius; +$slider-transition: all 0.2s ease-in-out; // 29. Switch -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-form-classes: $include-html-classes; - -// Controlling background color for the switch container -// $switch-bg: $gainsboro; - -// We use these to control the switch heights for our default classes -// $switch-height-tny: 1.5rem; -// $switch-height-sml: 1.75rem; -// $switch-height-med: 2rem; -// $switch-height-lrg: 2.5rem; -// $switch-bottom-margin: 1.5rem; - -// We use these to style the switch-paddle -// $switch-paddle-bg: $white; -// $switch-paddle-transition-speed: .15s; -// $switch-paddle-transition-ease: ease-out; -// $switch-active-color: $primary-color; - -// 30. Tables -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-table-classes: $include-html-classes; - -// These control the background color for the table and even rows -// $table-bg: $white; -// $table-even-row-bg: $snow; - -// These control the table cell border style -// $table-border-style: solid; -// $table-border-size: 1px; -// $table-border-color: $gainsboro; - -// These control the table head styles -// $table-head-bg: $white-smoke; -// $table-head-font-size: rem-calc(14); -// $table-head-font-color: $jet; -// $table-head-font-weight: $font-weight-bold; -// $table-head-padding: rem-calc(8 10 10); - -// These control the table foot styles -// $table-foot-bg: $table-head-bg; -// $table-foot-font-size: $table-head-font-size; -// $table-foot-font-color: $table-head-font-color; -// $table-foot-font-weight: $table-head-font-weight; -// $table-foot-padding: $table-head-padding; - -// These control the caption -// table-caption-bg: transparent; -// $table-caption-font-color: $table-head-font-color; -// $table-caption-font-size: rem-calc(16); -// $table-caption-font-weight: bold; - -// These control the row padding and font styles -// $table-row-padding: rem-calc(9 10); -// $table-row-font-size: rem-calc(14); -// $table-row-font-color: $jet; -// $table-line-height: rem-calc(18); - -// These are for controlling the layout, display and margin of tables -// $table-layout: auto; -// $table-display: table-cell; -// $table-margin-bottom: rem-calc(20); - +// ---------- + +$switch-background: $medium-gray; +$switch-background-active: $primary-color; +$switch-height: 2rem; +$switch-height-tiny: 1.5rem; +$switch-height-small: 1.75rem; +$switch-height-large: 2.5rem; +$switch-radius: $global-radius; +$switch-margin: $global-margin; +$switch-paddle-background: $white; +$switch-paddle-offset: 0.25rem; +$switch-paddle-radius: $global-radius; +$switch-paddle-transition: all 0.25s ease-out; + +// 30. Table +// --------- + +$table-background: $white; +$table-color-scale: 5%; +$table-border: 1px solid smart-scale($table-background, $table-color-scale); +$table-padding: rem-calc(8 10 10); +$table-hover-scale: 2%; +$table-row-hover: darken($table-background, $table-hover-scale); +$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); +$table-striped-background: smart-scale($table-background, $table-color-scale); +$table-stripe: even; +$table-head-background: smart-scale($table-background, $table-color-scale / 2); +$table-foot-background: smart-scale($table-background, $table-color-scale); +$table-head-font-color: $body-font-color; +$show-header-for-stacked: false; // 31. Tabs -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-tabs-classes: $include-html-classes; - -// $tabs-navigation-padding: rem-calc(16); -// $tabs-navigation-bg-color: $silver; -// $tabs-navigation-active-bg-color: $white; -// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%); -// $tabs-navigation-font-color: $jet; -// $tabs-navigation-active-font-color: $tabs-navigation-font-color; -// $tabs-navigation-font-size: rem-calc(16); -// $tabs-navigation-font-family: $body-font-family; - -// $tabs-content-margin-bottom: rem-calc(24); -// $tabs-content-padding: ($column-gutter/2); - -// $tabs-vertical-navigation-margin-bottom: 1.25rem; - -// 32. Thumbnails -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-media-classes: $include-html-classes; - -// We use these to control border styles -// $thumb-border-style: solid; -// $thumb-border-width: 4px; -// $thumb-border-color: $white; -// $thumb-box-shadow: 0 0 0 1px rgba($black,.2); -// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5); - -// Radius and transition speed for thumbs -// $thumb-radius: $global-radius; -// $thumb-transition-speed: 200ms; - -// 33. Tooltips -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-tooltip-classes: $include-html-classes; - -// $has-tip-border-bottom: dotted 1px $iron; -// $has-tip-font-weight: $font-weight-bold; -// $has-tip-font-color: $oil; -// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%); -// $has-tip-font-color-hover: $primary-color; -// $has-tip-cursor-type: help; - -// $tooltip-padding: rem-calc(12); -// $tooltip-bg: $oil; -// $tooltip-font-size: rem-calc(14); -// $tooltip-font-weight: $font-weight-normal; -// $tooltip-font-color: $white; -// $tooltip-line-height: 1.3; -// $tooltip-close-font-size: rem-calc(10); -// $tooltip-close-font-weight: $font-weight-normal; -// $tooltip-close-font-color: $monsoon; -// $tooltip-font-size-sml: rem-calc(14); -// $tooltip-radius: $global-radius; -// $tooltip-rounded: $global-rounded; -// $tooltip-pip-size: 5px; -// $tooltip-max-width: 300px; +// -------- + +$tab-margin: 0; +$tab-background: $white; +$tab-background-active: $light-gray; +$tab-border: $light-gray; +$tab-item-color: foreground($tab-background, $primary-color); +$tab-item-background-hover: $white; +$tab-item-padding: 1.25rem 1.5rem; +$tab-expand-max: 6; +$tab-content-background: $white; +$tab-content-border: $light-gray; +$tab-content-color: foreground($tab-background, $primary-color); +$tab-content-padding: 1rem; + +// 32. Thumbnail +// ------------- + +$thumbnail-border: solid 4px $white; +$thumbnail-margin-bottom: $global-margin; +$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); +$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); +$thumbnail-transition: box-shadow 200ms ease-out; +$thumbnail-radius: $global-radius; + +// 33. Tooltip +// ----------- + +$tooltip-background-color: $black; +$tooltip-color: $white; +$tooltip-padding: 0.75rem; +$tooltip-font-size: $small-font-size; +$tooltip-pip-width: 0.75rem; +$tooltip-pip-height: $tooltip-pip-width * 0.866; +$tooltip-pip-offset: 1.25rem; +$tooltip-radius: $global-radius; // 34. Top Bar -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-top-bar-classes: $include-html-classes; - -// Background color for the top bar -// $topbar-bg-color: $oil; -// $topbar-bg: $topbar-bg-color; - -// Height and margin -// $topbar-height: rem-calc(45); -// $topbar-margin-bottom: 0; - -// Controlling the styles for the title in the top bar -// $topbar-title-weight: $font-weight-normal; -// $topbar-title-font-size: rem-calc(17); - -// Set the link colors and styles for top-level nav -// $topbar-link-color: $white; -// $topbar-link-color-hover: $white; -// $topbar-link-color-active: $white; -// $topbar-link-color-active-hover: $white; -// $topbar-link-weight: $font-weight-normal; -// $topbar-link-font-size: rem-calc(13); -// $topbar-link-hover-lightness: -10%; // Darken by 10% -// $topbar-link-bg: $topbar-bg; -// $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%); -// $topbar-link-font-family: $body-font-family; -// $topbar-link-text-transform: none; -// $topbar-link-padding: ($topbar-height / 3); -// $topbar-back-link-size: rem-calc(18); -// $topbar-link-dropdown-padding: rem-calc(20); -// $topbar-button-font-size: .75rem; -// $topbar-button-top: 7px; - -// Style the top bar dropdown elements -// $topbar-dropdown-bg: $oil; -// $topbar-dropdown-link-color: $white; -// $topbar-dropdown-link-color-hover: $topbar-link-color-hover; -// $topbar-dropdown-link-bg: $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: .4; - -// $topbar-dropdown-label-color: $monsoon; -// $topbar-dropdown-label-text-transform: uppercase; -// $topbar-dropdown-label-font-weight: $font-weight-bold; -// $topbar-dropdown-label-font-size: rem-calc(10); -// $topbar-dropdown-label-bg: $oil; - -// Top menu icon styles -// $topbar-menu-link-transform: uppercase; -// $topbar-menu-link-font-size: rem-calc(13); -// $topbar-menu-link-weight: $font-weight-bold; -// $topbar-menu-link-color: $white; -// $topbar-menu-icon-color: $white; -// $topbar-menu-link-color-toggled: $jumbo; -// $topbar-menu-icon-color-toggled: $jumbo; -// $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon - -// Transitions and breakpoint styles -// $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: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})"; - -// Top-bar input styles -// $topbar-input-height: rem-calc(28); - -// Divider Styles -// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%); -// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%); - -// Sticky Class -// $topbar-sticky-class: ".sticky"; -// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item -// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li// - -// 36. Visibility Classes -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// $include-html-visibility-classes: $include-html-classes; -// $include-accessibility-classes: true; -// $include-table-visibility-classes: true; -// $include-legacy-visibility-classes: true; +// ----------- + +$topbar-padding: 0.5rem; +$topbar-background: #eee; +$topbar-link-color: #fff; +$topbar-input-width: 200px; diff --git a/assets/scss/foundation.scss b/assets/scss/foundation.scss index de54ff2c9..018b684b5 100755 --- a/assets/scss/foundation.scss +++ b/assets/scss/foundation.scss @@ -1,63 +1,176 @@ -@charset "UTF-8"; - -// Normalize.css -@import "../components/foundation/scss/normalize"; - /* - ZURB Foundation components: + Foundation for Sites components: Import the building blocks you need for your project. Reducing the number of imported components will optimize page speed. + --------------------------------------------------------------------- + The Foundation framework is built by Zurb + Licensed under MIT Open Source */ -@import "config/settings"; // Default settings file. Uncomment each setting you need to change -@import "config/custom-settings"; // Or copy the stuff you need to change to this file and uncomment -@import "config/wp-overrides"; // Override the default WordPress styling for some elements +// Third-party libraries +@import '../components/foundation-sites/scss/vendor/normalize'; +@import '../components/fontawesome/scss/font-awesome.scss'; -@import "../components/foundation/scss/foundation/components/grid"; -@import "../components/foundation/scss/foundation/components/accordion"; -@import "../components/foundation/scss/foundation/components/alert-boxes"; -@import "../components/foundation/scss/foundation/components/block-grid"; -@import "../components/foundation/scss/foundation/components/breadcrumbs"; -@import "../components/foundation/scss/foundation/components/button-groups"; -@import "../components/foundation/scss/foundation/components/buttons"; -@import "../components/foundation/scss/foundation/components/clearing"; -@import "../components/foundation/scss/foundation/components/dropdown"; -@import "../components/foundation/scss/foundation/components/dropdown-buttons"; -@import "../components/foundation/scss/foundation/components/flex-video"; -@import "../components/foundation/scss/foundation/components/forms"; -@import "../components/foundation/scss/foundation/components/icon-bar"; -@import "../components/foundation/scss/foundation/components/inline-lists"; -@import "../components/foundation/scss/foundation/components/joyride"; -@import "../components/foundation/scss/foundation/components/keystrokes"; -@import "../components/foundation/scss/foundation/components/labels"; -@import "../components/foundation/scss/foundation/components/magellan"; -@import "../components/foundation/scss/foundation/components/orbit"; -@import "../components/foundation/scss/foundation/components/pagination"; -@import "../components/foundation/scss/foundation/components/panels"; -@import "../components/foundation/scss/foundation/components/pricing-tables"; -@import "../components/foundation/scss/foundation/components/progress-bars"; -@import "../components/foundation/scss/foundation/components/range-slider"; -@import "../components/foundation/scss/foundation/components/reveal"; -@import "../components/foundation/scss/foundation/components/side-nav"; -@import "../components/foundation/scss/foundation/components/split-buttons"; -@import "../components/foundation/scss/foundation/components/sub-nav"; -@import "../components/foundation/scss/foundation/components/switches"; -@import "../components/foundation/scss/foundation/components/tables"; -@import "../components/foundation/scss/foundation/components/tabs"; -@import "../components/foundation/scss/foundation/components/thumbs"; -@import "../components/foundation/scss/foundation/components/tooltips"; -@import "../components/foundation/scss/foundation/components/top-bar"; -@import "../components/foundation/scss/foundation/components/type"; -@import "../components/foundation/scss/foundation/components/offcanvas"; -@import "../components/foundation/scss/foundation/components/visibility"; +// Sass utilities +@import '../components/foundation-sites/scss/util/util'; -/* - Font Awesome - (http://fontawesome.io/) : - Feel free to remove the import statement below if you don't plan to use icon-fonts in your project -*/ +// Global variables and styles +@import '../components/foundation-sites/scss/global'; + +// Components +@import '../components/foundation-sites/scss/grid/grid'; +@import '../components/foundation-sites/scss/typography/typography'; +@import '../components/foundation-sites/scss/forms/forms'; +@import '../components/foundation-sites/scss/components/visibility'; +@import '../components/foundation-sites/scss/components/float'; +@import '../components/foundation-sites/scss/components/button'; +@import '../components/foundation-sites/scss/components/button-group'; +@import '../components/foundation-sites/scss/components/accordion-menu'; +@import '../components/foundation-sites/scss/components/accordion'; +@import '../components/foundation-sites/scss/components/badge'; +@import '../components/foundation-sites/scss/components/breadcrumbs'; +@import '../components/foundation-sites/scss/components/callout'; +@import '../components/foundation-sites/scss/components/close-button'; +@import '../components/foundation-sites/scss/components/drilldown'; +@import '../components/foundation-sites/scss/components/dropdown-menu'; +@import '../components/foundation-sites/scss/components/dropdown'; +@import '../components/foundation-sites/scss/components/flex-video'; +@import '../components/foundation-sites/scss/components/label'; +@import '../components/foundation-sites/scss/components/media-object'; +@import '../components/foundation-sites/scss/components/menu'; +@import '../components/foundation-sites/scss/components/off-canvas'; +@import '../components/foundation-sites/scss/components/orbit'; +@import '../components/foundation-sites/scss/components/pagination'; +@import '../components/foundation-sites/scss/components/progress-bar'; +@import '../components/foundation-sites/scss/components/reveal'; +@import '../components/foundation-sites/scss/components/slider'; +@import '../components/foundation-sites/scss/components/sticky'; +@import '../components/foundation-sites/scss/components/switch'; +@import '../components/foundation-sites/scss/components/table'; +@import '../components/foundation-sites/scss/components/tabs'; +@import '../components/foundation-sites/scss/components/title-bar'; +@import '../components/foundation-sites/scss/components/top-bar'; +@import '../components/foundation-sites/scss/components/thumbnail'; +@import '../components/foundation-sites/scss/components/tooltip'; + +// These styles are applied to tags, which are read by the Foundation JavaScript +.foundation-mq { + font-family: "#{-zf-bp-serialize($breakpoints)}"; +} -@import "../components/fontawesome/scss/font-awesome.scss"; +@mixin foundation-everything { + @include foundation-global-styles; + @include foundation-grid; + @include foundation-typography; + @include foundation-button; + @include foundation-forms; + @include foundation-visibility-classes; + @include foundation-float-classes; + @include foundation-accordion; + @include foundation-accordion-menu; + @include foundation-badge; + @include foundation-breadcrumbs; + @include foundation-button-group; + @include foundation-callout; + @include foundation-close-button; + @include foundation-drilldown-menu; + @include foundation-dropdown; + @include foundation-dropdown-menu; + @include foundation-flex-video; + @include foundation-label; + @include foundation-media-object; + @include foundation-menu; + @include foundation-off-canvas; + @include foundation-orbit; + @include foundation-pagination; + @include foundation-progress-bar; + @include foundation-slider; + @include foundation-sticky; + @include foundation-reveal; + @include foundation-switch; + @include foundation-table; + @include foundation-tabs; + @include foundation-thumbnail; + @include foundation-title-bar; + @include foundation-tooltip; + @include foundation-top-bar; +} +// Foundation 6 components +@import "../components/foundation-sites/scss/foundation/components/accordion-menu"; +@import "../components/foundation-sites/scss/foundation/components/accordion"; +@import "../components/foundation-sites/scss/foundation/components/badge"; +@import "../components/foundation-sites/scss/foundation/components/breadcrumbs"; +@import "../components/foundation-sites/scss/foundation/components/button-group"; +@import "../components/foundation-sites/scss/foundation/components/button"; +@import "../components/foundation-sites/scss/foundation/components/callout"; +@import "../components/foundation-sites/scss/foundation/components/close-button"; +@import "../components/foundation-sites/scss/foundation/components/drilldown"; +@import "../components/foundation-sites/scss/foundation/components/dropdown-menu"; +@import "../components/foundation-sites/scss/foundation/components/dropdown"; +@import "../components/foundation-sites/scss/foundation/components/flex-video"; +@import "../components/foundation-sites/scss/foundation/components/float"; +@import "../components/foundation-sites/scss/foundation/components/label"; +@import "../components/foundation-sites/scss/foundation/components/media-object"; +@import "../components/foundation-sites/scss/foundation/components/menu"; +@import "../components/foundation-sites/scss/foundation/components/off-canvas"; +@import "../components/foundation-sites/scss/foundation/components/orbit"; +@import "../components/foundation-sites/scss/foundation/components/pagination"; +@import "../components/foundation-sites/scss/foundation/components/progress-bar"; +@import "../components/foundation-sites/scss/foundation/components/reveal"; +@import "../components/foundation-sites/scss/foundation/components/slider"; +@import "../components/foundation-sites/scss/foundation/components/sticky"; +@import "../components/foundation-sites/scss/foundation/components/switch"; +@import "../components/foundation-sites/scss/foundation/components/table"; +@import "../components/foundation-sites/scss/foundation/components/tabs"; +@import "../components/foundation-sites/scss/foundation/components/thumbnail"; +@import "../components/foundation-sites/scss/foundation/components/title-bar"; +@import "../components/foundation-sites/scss/foundation/components/tooltip"; +@import "../components/foundation-sites/scss/foundation/components/top-bar"; +@import "../components/foundation-sites/scss/foundation/components/visibility"; + +// Foundation 6 forms +@import "../components/foundation-sites/scss/foundation/forms/checkbox"; +@import "../components/foundation-sites/scss/foundation/forms/error"; +@import "../components/foundation-sites/scss/foundation/forms/fieldset"; +@import "../components/foundation-sites/scss/foundation/forms/forms"; +@import "../components/foundation-sites/scss/foundation/forms/help-text"; +@import "../components/foundation-sites/scss/foundation/forms/input-group"; +@import "../components/foundation-sites/scss/foundation/forms/label"; +@import "../components/foundation-sites/scss/foundation/forms/select"; +@import "../components/foundation-sites/scss/foundation/forms/text"; + +// Foundation 6 grid +@import "../components/foundation-sites/scss/foundation/grid/classes"; +@import "../components/foundation-sites/scss/foundation/grid/column"; +@import "../components/foundation-sites/scss/foundation/grid/flex-grid"; +@import "../components/foundation-sites/scss/foundation/grid/grid"; +@import "../components/foundation-sites/scss/foundation/grid/gutter"; +@import "../components/foundation-sites/scss/foundation/grid/layout"; +@import "../components/foundation-sites/scss/foundation/grid/position"; +@import "../components/foundation-sites/scss/foundation/grid/row"; +@import "../components/foundation-sites/scss/foundation/grid/size"; + +// Foundation 6 typography +@import "../components/foundation-sites/scss/foundation/typography/alignment"; +@import "../components/foundation-sites/scss/foundation/typography/base"; +@import "../components/foundation-sites/scss/foundation/typography/helpers"; +@import "../components/foundation-sites/scss/foundation/typography/print"; +@import "../components/foundation-sites/scss/foundation/typography/typography"; + +// Foundation 6 util +@import "../components/foundation-sites/scss/foundation/util/breakpoint"; +@import "../components/foundation-sites/scss/foundation/util/color"; +@import "../components/foundation-sites/scss/foundation/util/mixins"; +@import "../components/foundation-sites/scss/foundation/util/selector"; +@import "../components/foundation-sites/scss/foundation/util/unit"; +@import "../components/foundation-sites/scss/foundation/util/util"; +@import "../components/foundation-sites/scss/foundation/util/value"; + + +// Settings and wp-override styles: +@import "config/settings"; // Default settings file. Uncomment each setting you need to change +@import "config/wp-overrides"; // Override the default WordPress styling for some elements /* My custom styles: From 56f37b8b46213615a231f90e04b59318c3637838 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Fri, 20 Nov 2015 23:05:53 +0100 Subject: [PATCH 04/65] Update version numbers to FP 2.0.0-BETA --- Gruntfile.js | 430 +++++++++++++++++++++++++-------------------------- package.json | 4 +- style.css | 4 +- 3 files changed, 219 insertions(+), 219 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index bacf00d84..72ee3d8ec 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,213 +1,213 @@ module.exports = function (grunt) { - // time - require('time-grunt')(grunt); - - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - - // Compress and zip only the files required for deployment to the server. Exclude all dev dependencies. - compress: { - main: { - options: { - archive: 'packaged/<%= pkg.name %>' + grunt.template.today('_yyyy-mm-dd_HH-MM') + '.zip', - mode: 'zip' - }, - expand: true, - cwd: '.', - src: [ - '**/*', - '!**/node_modules/**', - '!**/components/**', - '!**/scss/**', - '!**/bower.json', - '!**/Gruntfile.js', - '!**/package.json', - '!**/composer.json', - '!**/composer.lock', - '!**/codesniffer.ruleset.xml', - '!**/packaged/*' - ], - dest: '<%= pkg.name %>' - }, - }, - sass: { - - options: { - // If you can't get source maps to work, run the following command in your terminal: - // $ sass scss/foundation.scss:css/foundation.css --sourcemap - // (see this link for details: http://thesassway.com/intermediate/using-source-maps-with-sass ) - sourceMap: true - }, - - dist: { - options: { - outputStyle: 'compressed' - }, - files: { - 'assets/stylesheets/foundation.css': 'assets/scss/foundation.scss' - } - } - - }, - - copy: { - - motion-ui: { - expand: true, - cwd: 'assets/components/foundation-sites/js/motion-ui/', - src: '**', - flatten: 'true', - dest: 'assets/javascript/motion-ui/' - }, - - what-input: { - expand: true, - cwd: 'assets/components/foundation-sites/js/what-input/', - src: '**', - flatten: 'true', - dest: 'assets/javascript/what-input/' - }, - - iconfonts: { - expand: true, - cwd: 'assets/components/fontawesome/fonts', - src: ['**'], - dest: 'assets/fonts/' - } - - }, - - 'string-replace': { - - fontawesome: { - files: { - 'assets/fontawesome/scss/_variables.scss': 'assets/fontawesome/scss/_variables.scss' - }, - - options: { - replacements: [ - { - pattern: '../fonts', - replacement: '../assets/fonts' - } - ] - } - - } - - }, - - concat: { - - options: { - separator: ';' - }, - - dist: { - - src: [ - - // Foundation core - 'assets/components/foundation-sites/js/foundation-core.js', - - // Pick the components you need in your project - 'assets/components/foundation-sites/js/foundation.abide.js', - 'assets/components/foundation-sites/js/foundation.accordion.js', - 'assets/components/foundation-sites/js/foundation.accordionMenu.js', - 'assets/components/foundation-sites/js/foundation.drilldown.js', - 'assets/components/foundation-sites/js/foundation.dropdown.js', - 'assets/components/foundation-sites/js/foundation.dropdownMenu.js', - 'assets/components/foundation-sites/js/foundation.equalizer.js', - 'assets/components/foundation-sites/js/foundation.interchange.js', - 'assets/components/foundation-sites/js/foundation.magellan.js', - 'assets/components/foundation-sites/js/foundation.offcanvas.js', - 'assets/components/foundation-sites/js/foundation.orbit.js', - 'assets/components/foundation-sites/js/foundation.responsiveMenu.js', - 'assets/components/foundation-sites/js/foundation.responsiveToggle.js', - 'assets/components/foundation-sites/js/foundation.reveal.js', - 'assets/components/foundation-sites/js/foundation.slider.js', - 'assets/components/foundation-sites/js/foundation.sticky.js', - 'assets/components/foundation-sites/js/foundation.tabs.js', - 'assets/components/foundation-sites/js/foundation.toggler.js', - 'assets/components/foundation-sites/js/foundation.tooltip.js', - 'assets/components/foundation-sites/js/foundation.util.box.js', - 'assets/components/foundation-sites/js/foundation.util.keyboard.js', - 'assets/components/foundation-sites/js/foundation.util.mediaQuery.js', - 'assets/components/foundation-sites/js/foundation.util.motion.js', - 'assets/components/foundation-sites/js/foundation.util.nest.js', - 'assets/components/foundation-sites/js/foundation.util.timerAndImageLoader.js', - 'assets/components/foundation-sites/js/foundation.util.touch.js', - 'assets/components/foundation-sites/js/foundation.util.triggers.js', - - // Motion UI - 'assets/components/foundation-sites/js/motion-ui.js', - - // Include your own custom scripts (located in the custom folder) - 'assets/javascript/custom/*.js' - - ], - - // Finally, concatenate all the files above into one single file - dest: 'assets/javascript/foundation.js' - - } - - }, - - uglify: { - - dist: { - files: { - // Shrink the file size by removing spaces - 'assets/javascript/foundation.js': ['assets/javascript/foundation.js'] - } - } - - }, - - watch: { - grunt: {files: ['Gruntfile.js']}, - - sass: { - files: 'assets/scss/**/*.scss', - tasks: ['sass'], - options: { - livereload: true - } - }, - - js: { - files: 'assets/javascript/custom/**/*.js', - tasks: ['concat', 'uglify'], - options: { - livereload: true - } - }, - - all: { - files: '**/*.php', - options: { - livereload: true - } - } - - }, - - postcss: { + // time + require('time-grunt')(grunt); + + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + + // Compress and zip only the files required for deployment to the server. Exclude all dev dependencies. + compress: { + main: { + options: { + archive: 'packaged/<%= pkg.name %>' + grunt.template.today('_yyyy-mm-dd_HH-MM') + '.zip', + mode: 'zip' + }, + expand: true, + cwd: '.', + src: [ + '**/*', + '!**/node_modules/**', + '!**/components/**', + '!**/scss/**', + '!**/bower.json', + '!**/Gruntfile.js', + '!**/package.json', + '!**/composer.json', + '!**/composer.lock', + '!**/codesniffer.ruleset.xml', + '!**/packaged/*' + ], + dest: '<%= pkg.name %>' + }, + }, + sass: { + + options: { + // If you can't get source maps to work, run the following command in your terminal: + // $ sass scss/foundation.scss:css/foundation.css --sourcemap + // (see this link for details: http://thesassway.com/intermediate/using-source-maps-with-sass ) + sourceMap: true + }, + + dist: { + options: { + outputStyle: 'compressed' + }, + files: { + 'assets/stylesheets/foundation.css': 'assets/scss/foundation.scss' + } + } + + }, + + copy: { + + motion-ui: { + expand: true, + cwd: 'assets/components/foundation-sites/js/motion-ui/', + src: '**', + flatten: 'true', + dest: 'assets/javascript/motion-ui/' + }, + + what-input: { + expand: true, + cwd: 'assets/components/foundation-sites/js/what-input/', + src: '**', + flatten: 'true', + dest: 'assets/javascript/what-input/' + }, + + iconfonts: { + expand: true, + cwd: 'assets/components/fontawesome/fonts', + src: ['**'], + dest: 'assets/fonts/' + } + + }, + + 'string-replace': { + + fontawesome: { + files: { + 'assets/fontawesome/scss/_variables.scss': 'assets/fontawesome/scss/_variables.scss' + }, + + options: { + replacements: [ + { + pattern: '../fonts', + replacement: '../assets/fonts' + } + ] + } + + } + + }, + + concat: { + + options: { + separator: ';' + }, + + dist: { + + src: [ + + // Foundation core + 'assets/components/foundation-sites/js/foundation-core.js', + + // Pick the components you need in your project + 'assets/components/foundation-sites/js/foundation.abide.js', + 'assets/components/foundation-sites/js/foundation.accordion.js', + 'assets/components/foundation-sites/js/foundation.accordionMenu.js', + 'assets/components/foundation-sites/js/foundation.drilldown.js', + 'assets/components/foundation-sites/js/foundation.dropdown.js', + 'assets/components/foundation-sites/js/foundation.dropdownMenu.js', + 'assets/components/foundation-sites/js/foundation.equalizer.js', + 'assets/components/foundation-sites/js/foundation.interchange.js', + 'assets/components/foundation-sites/js/foundation.magellan.js', + 'assets/components/foundation-sites/js/foundation.offcanvas.js', + 'assets/components/foundation-sites/js/foundation.orbit.js', + 'assets/components/foundation-sites/js/foundation.responsiveMenu.js', + 'assets/components/foundation-sites/js/foundation.responsiveToggle.js', + 'assets/components/foundation-sites/js/foundation.reveal.js', + 'assets/components/foundation-sites/js/foundation.slider.js', + 'assets/components/foundation-sites/js/foundation.sticky.js', + 'assets/components/foundation-sites/js/foundation.tabs.js', + 'assets/components/foundation-sites/js/foundation.toggler.js', + 'assets/components/foundation-sites/js/foundation.tooltip.js', + 'assets/components/foundation-sites/js/foundation.util.box.js', + 'assets/components/foundation-sites/js/foundation.util.keyboard.js', + 'assets/components/foundation-sites/js/foundation.util.mediaQuery.js', + 'assets/components/foundation-sites/js/foundation.util.motion.js', + 'assets/components/foundation-sites/js/foundation.util.nest.js', + 'assets/components/foundation-sites/js/foundation.util.timerAndImageLoader.js', + 'assets/components/foundation-sites/js/foundation.util.touch.js', + 'assets/components/foundation-sites/js/foundation.util.triggers.js', + + // Motion UI + 'assets/components/foundation-sites/js/motion-ui.js', + + // Include your own custom scripts (located in the custom folder) + 'assets/javascript/custom/*.js' + + ], + + // Finally, concatenate all the files above into one single file + dest: 'assets/javascript/foundation.js' + + } + + }, + + uglify: { + + dist: { + files: { + // Shrink the file size by removing spaces + 'assets/javascript/foundation.js': ['assets/javascript/foundation.js'] + } + } + + }, + + watch: { + grunt: {files: ['Gruntfile.js']}, + + sass: { + files: 'assets/scss/**/*.scss', + tasks: ['sass'], + options: { + livereload: true + } + }, + + js: { + files: 'assets/javascript/custom/**/*.js', + tasks: ['concat', 'uglify'], + options: { + livereload: true + } + }, + + all: { + files: '**/*.php', + options: { + livereload: true + } + } + + }, + + postcss: { options: { map: true, processors: [ - require('pixrem')(), // add fallbacks for rem units + require('pixrem')(), // add fallbacks for rem units require('autoprefixer')({browsers: 'last 2 versions'}), // add vendor prefixes - require('cssnano')() // minify the result + require('cssnano')() // minify the result ] }, dist: { src: 'assets/stylesheets/foundation.css' } - }, + }, - browserSync: { + browserSync: { dev: { bsFiles: { src : [ @@ -223,20 +223,20 @@ module.exports = function (grunt) { } } } - }); - - grunt.loadNpmTasks('grunt-sass'); - grunt.loadNpmTasks('grunt-postcss'); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-concat'); - grunt.loadNpmTasks('grunt-contrib-copy'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-string-replace'); - grunt.loadNpmTasks('grunt-contrib-compress'); - grunt.loadNpmTasks('grunt-browser-sync'); - - grunt.registerTask('package', ['compress:main']); - grunt.registerTask('build', ['copy', 'string-replace:fontawesome', 'sass', 'postcss', 'concat', 'uglify']); - grunt.registerTask('browser-sync', ['browserSync', 'watch']); - grunt.registerTask('default', ['watch']); + }); + + grunt.loadNpmTasks('grunt-sass'); + grunt.loadNpmTasks('grunt-postcss'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-string-replace'); + grunt.loadNpmTasks('grunt-contrib-compress'); + grunt.loadNpmTasks('grunt-browser-sync'); + + grunt.registerTask('package', ['compress:main']); + grunt.registerTask('build', ['copy', 'string-replace:fontawesome', 'sass', 'postcss', 'concat', 'uglify']); + grunt.registerTask('browser-sync', ['browserSync', 'watch']); + grunt.registerTask('default', ['watch']); }; diff --git a/package.json b/package.json index aade377b6..8a059a5ad 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "foundationpress", "title": "FoundationPress", - "version": "1.7.0", - "description": "FoundationPress is a WordPress starter theme based on Foundation 5 by Zurb", + "version": "2.0.0-BETA", + "description": "FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb", "keywords": [ "FoundationPress", "WordPress", diff --git a/style.css b/style.css index c3b9b39e0..bb6b29f76 100755 --- a/style.css +++ b/style.css @@ -2,8 +2,8 @@ Theme Name: FoundationPress Theme URI: http://foundationpress.olefredrik.com Github Theme URI: https://github.com/olefredrik/FoundationPress -Description: FoundationPress is a WordPress starter theme based on Foundation 5 by Zurb -Version: 1.7.0 +Description: FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb +Version: 2.0.0-BETA Author: Ole Fredrik Lie Author URI: http://olefredrik.com/ From 26d601e99904c850aa5d17833b858000caaeabbe Mon Sep 17 00:00:00 2001 From: olefredrik Date: Fri, 20 Nov 2015 23:06:44 +0100 Subject: [PATCH 05/65] Fix paths in gruntfile for motion-ui and what-input --- Gruntfile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 72ee3d8ec..127a042a2 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -54,7 +54,7 @@ module.exports = function (grunt) { motion-ui: { expand: true, - cwd: 'assets/components/foundation-sites/js/motion-ui/', + cwd: 'assets/components/foundation-sites/motion-ui/', src: '**', flatten: 'true', dest: 'assets/javascript/motion-ui/' @@ -62,7 +62,7 @@ module.exports = function (grunt) { what-input: { expand: true, - cwd: 'assets/components/foundation-sites/js/what-input/', + cwd: 'assets/components/foundation-sites/what-input/', src: '**', flatten: 'true', dest: 'assets/javascript/what-input/' From d6f6015da07fdbd94a42c0213bf25054ba53edb9 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Fri, 20 Nov 2015 23:25:00 +0100 Subject: [PATCH 06/65] Fix syntax error in Gruntfile --- Gruntfile.js | 8 +- assets/javascript/motion-ui/LICENSE | 22 + assets/javascript/motion-ui/README.md | 28 + assets/javascript/motion-ui/_animation.scss | 7 + assets/javascript/motion-ui/_args.scss | 15 + assets/javascript/motion-ui/_classes.scss | 102 ++++ assets/javascript/motion-ui/_fade.scss | 28 + assets/javascript/motion-ui/_hinge.scss | 43 ++ assets/javascript/motion-ui/_keyframe.scss | 136 +++++ assets/javascript/motion-ui/_selector.scss | 23 + assets/javascript/motion-ui/_series.scss | 54 ++ assets/javascript/motion-ui/_settings.scss | 61 ++ assets/javascript/motion-ui/_shake.scss | 15 + assets/javascript/motion-ui/_slide.scss | 42 ++ assets/javascript/motion-ui/_spin.scss | 39 ++ assets/javascript/motion-ui/_transition.scss | 45 ++ assets/javascript/motion-ui/_unit.scss | 7 + assets/javascript/motion-ui/_wiggle.scss | 13 + assets/javascript/motion-ui/_zoom.scss | 39 ++ assets/javascript/motion-ui/animations.md | 226 ++++++++ assets/javascript/motion-ui/bower.json | 28 + assets/javascript/motion-ui/classes.md | 81 +++ assets/javascript/motion-ui/configuration.md | 63 ++ assets/javascript/motion-ui/gulpfile.js | 90 +++ assets/javascript/motion-ui/handlebars.js | 8 + assets/javascript/motion-ui/installation.md | 50 ++ assets/javascript/motion-ui/javascript.md | 36 ++ assets/javascript/motion-ui/motion-ui.css | 543 ++++++++++++++++++ assets/javascript/motion-ui/motion-ui.js | 105 ++++ assets/javascript/motion-ui/motion-ui.min.css | 1 + assets/javascript/motion-ui/motion-ui.min.js | 1 + assets/javascript/motion-ui/motion-ui.scss | 29 + assets/javascript/motion-ui/package.json | 44 ++ assets/javascript/motion-ui/transitions.md | 112 ++++ assets/javascript/what-input/LICENSE | 22 + assets/javascript/what-input/README.md | 149 +++++ .../javascript/what-input/addEventListener.js | 29 + assets/javascript/what-input/bower.json | 31 + assets/javascript/what-input/clean.js | 13 + assets/javascript/what-input/demo.html | 159 +++++ assets/javascript/what-input/index.js | 4 + assets/javascript/what-input/indexOf.js | 65 +++ assets/javascript/what-input/lte-IE8.js | 1 + assets/javascript/what-input/package.json | 34 ++ assets/javascript/what-input/scripts.js | 31 + assets/javascript/what-input/serve.js | 14 + assets/javascript/what-input/what-input.js | 212 +++++++ .../javascript/what-input/what-input.min.js | 1 + 48 files changed, 2905 insertions(+), 4 deletions(-) create mode 100644 assets/javascript/motion-ui/LICENSE create mode 100644 assets/javascript/motion-ui/README.md create mode 100644 assets/javascript/motion-ui/_animation.scss create mode 100644 assets/javascript/motion-ui/_args.scss create mode 100644 assets/javascript/motion-ui/_classes.scss create mode 100644 assets/javascript/motion-ui/_fade.scss create mode 100644 assets/javascript/motion-ui/_hinge.scss create mode 100644 assets/javascript/motion-ui/_keyframe.scss create mode 100644 assets/javascript/motion-ui/_selector.scss create mode 100644 assets/javascript/motion-ui/_series.scss create mode 100644 assets/javascript/motion-ui/_settings.scss create mode 100644 assets/javascript/motion-ui/_shake.scss create mode 100644 assets/javascript/motion-ui/_slide.scss create mode 100644 assets/javascript/motion-ui/_spin.scss create mode 100644 assets/javascript/motion-ui/_transition.scss create mode 100644 assets/javascript/motion-ui/_unit.scss create mode 100644 assets/javascript/motion-ui/_wiggle.scss create mode 100644 assets/javascript/motion-ui/_zoom.scss create mode 100644 assets/javascript/motion-ui/animations.md create mode 100644 assets/javascript/motion-ui/bower.json create mode 100644 assets/javascript/motion-ui/classes.md create mode 100644 assets/javascript/motion-ui/configuration.md create mode 100644 assets/javascript/motion-ui/gulpfile.js create mode 100644 assets/javascript/motion-ui/handlebars.js create mode 100644 assets/javascript/motion-ui/installation.md create mode 100644 assets/javascript/motion-ui/javascript.md create mode 100644 assets/javascript/motion-ui/motion-ui.css create mode 100644 assets/javascript/motion-ui/motion-ui.js create mode 100644 assets/javascript/motion-ui/motion-ui.min.css create mode 100644 assets/javascript/motion-ui/motion-ui.min.js create mode 100644 assets/javascript/motion-ui/motion-ui.scss create mode 100644 assets/javascript/motion-ui/package.json create mode 100644 assets/javascript/motion-ui/transitions.md create mode 100644 assets/javascript/what-input/LICENSE create mode 100644 assets/javascript/what-input/README.md create mode 100644 assets/javascript/what-input/addEventListener.js create mode 100644 assets/javascript/what-input/bower.json create mode 100644 assets/javascript/what-input/clean.js create mode 100644 assets/javascript/what-input/demo.html create mode 100644 assets/javascript/what-input/index.js create mode 100644 assets/javascript/what-input/indexOf.js create mode 100644 assets/javascript/what-input/lte-IE8.js create mode 100644 assets/javascript/what-input/package.json create mode 100644 assets/javascript/what-input/scripts.js create mode 100644 assets/javascript/what-input/serve.js create mode 100644 assets/javascript/what-input/what-input.js create mode 100644 assets/javascript/what-input/what-input.min.js diff --git a/Gruntfile.js b/Gruntfile.js index 127a042a2..5bc111877 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -52,17 +52,17 @@ module.exports = function (grunt) { copy: { - motion-ui: { + motionUi: { expand: true, - cwd: 'assets/components/foundation-sites/motion-ui/', + cwd: 'assets/components/motion-ui/', src: '**', flatten: 'true', dest: 'assets/javascript/motion-ui/' }, - what-input: { + whatInput: { expand: true, - cwd: 'assets/components/foundation-sites/what-input/', + cwd: 'assets/components/what-input/', src: '**', flatten: 'true', dest: 'assets/javascript/what-input/' diff --git a/assets/javascript/motion-ui/LICENSE b/assets/javascript/motion-ui/LICENSE new file mode 100644 index 000000000..73d6b9626 --- /dev/null +++ b/assets/javascript/motion-ui/LICENSE @@ -0,0 +1,22 @@ +Copyright (c) 2013-2015 ZURB, inc. + +MIT License + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/assets/javascript/motion-ui/README.md b/assets/javascript/motion-ui/README.md new file mode 100644 index 000000000..ec542e59e --- /dev/null +++ b/assets/javascript/motion-ui/README.md @@ -0,0 +1,28 @@ +# Motion UI Documentation + +### [Installation](installation.md) + +Installing Motion UI. + +### [Transitions](transitions.md) + +Using CSS transitions to show and hide components. + +### [Animations](animations.md) + +Using CSS animations to add effects. + +### [CSS Classes](classes.md) + +Using the library's pre-made CSS classes. + +### [JavaScript](javascript.md) + +Using the JavaScript plugin to transition elements in and out. + +### [Configuration](configuration.md) + +Customizing Motion UI. + + + diff --git a/assets/javascript/motion-ui/_animation.scss b/assets/javascript/motion-ui/_animation.scss new file mode 100644 index 000000000..fa3b73b76 --- /dev/null +++ b/assets/javascript/motion-ui/_animation.scss @@ -0,0 +1,7 @@ +/// Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property. +/// @param {Function} $effects... - One or more effect functions to build the keyframe with. +@mixin mui-animation($args...) { + $name: map-get(-mui-process-args($args...), name); + @include mui-keyframes($name, $args...); + animation-name: unquote($name); +} diff --git a/assets/javascript/motion-ui/_args.scss b/assets/javascript/motion-ui/_args.scss new file mode 100644 index 000000000..9f4b5a410 --- /dev/null +++ b/assets/javascript/motion-ui/_args.scss @@ -0,0 +1,15 @@ +/// Processes a series of keyframe function arguments. +/// @access private +@function -mui-process-args($args...) { + @if length($args) == 1 { + $arg: nth($args, 1); + + @if type-of($arg) == 'string' { + @return call($arg); + } @else if type-of($arg) == 'map' { + @return $arg; + } + } + + @return -mui-keyframe-combine($args...); +} diff --git a/assets/javascript/motion-ui/_classes.scss b/assets/javascript/motion-ui/_classes.scss new file mode 100644 index 000000000..8bfb91390 --- /dev/null +++ b/assets/javascript/motion-ui/_classes.scss @@ -0,0 +1,102 @@ +// scss-lint:disable ImportantRule, SpaceAfterComma, SingleLinePerProperty + +%mui-defaults { + transition-duration: map-get($motion-ui-speeds, default); + transition-timing-function: map-get($motion-ui-easings, default); +} + +// Transitions +// - - - - - - - - - - - - - - - +@mixin motion-ui-transitions { + // Slide + .slide-in-down { @include mui-slide(in, down); } + .slide-in-left { @include mui-slide(in, right); } + .slide-in-up { @include mui-slide(in, bottom); } + .slide-in-right { @include mui-slide(in, left); } + .slide-out-down { @include mui-slide(out, bottom); } + .slide-out-right { @include mui-slide(out, right); } + .slide-out-up { @include mui-slide(out, top); } + .slide-out-left { @include mui-slide(out, left); } + + // Fade + .fade-in { @include mui-fade(in, 0, 1); } + .fade-out { @include mui-fade(out, 1, 0); } + + // Hinge + .hinge-in-from-top { @include mui-hinge(in, top); } + .hinge-in-from-right { @include mui-hinge(in, right); } + .hinge-in-from-bottom { @include mui-hinge(in, bottom); } + .hinge-in-from-left { @include mui-hinge(in, left); } + .hinge-in-from-middle-x { @include mui-hinge(in, top, center); } + .hinge-in-from-middle-y { @include mui-hinge(in, right, center); } + .hinge-out-from-top { @include mui-hinge(out, top); } + .hinge-out-from-right { @include mui-hinge(out, right); } + .hinge-out-from-bottom { @include mui-hinge(out, bottom); } + .hinge-out-from-left { @include mui-hinge(out, left); } + .hinge-out-from-middle-x { @include mui-hinge(out, top, center); } + .hinge-out-from-middle-y { @include mui-hinge(out, right, center); } + + // Scale + .scale-in-up { @include mui-zoom(in, 0.5, 1); } + .scale-in-down { @include mui-zoom(in, 1.5, 1); } + .scale-out-up { @include mui-zoom(out, 1, 1.5); } + .scale-out-down { @include mui-zoom(out, 1, 0.5); } + + // Spin + .spin-in { @include mui-spin(in, cw); } + .spin-out { @include mui-spin(out, cw); } + .spin-in-ccw { @include mui-spin(in, ccw); } + .spin-out-ccw { @include mui-spin(out, ccw); } + + // Transition Modifiers + // - - - - - - - - - - - - - - - + + @each $name, $value in $motion-ui-speeds { + @if $name != default { + .#{$name} { transition-duration: $value !important; } + } + } + + @each $name, $value in $motion-ui-easings { + @if $name != default { + .#{$name} { transition-timing-function: $value !important; } + } + } + + @each $name, $value in $motion-ui-delays { + @if $name != default { + .#{$name}-delay { transition-delay: $value !important; } + } + } +} + +// Animations +// - - - - - - - - - - - - - - - +@mixin motion-ui-animations { + .shake { @include mui-animation(shake); } + .spin-cw { @include mui-animation(spin); } + .spin-ccw { @include mui-animation(spin(ccw)); } + .wiggle { @include mui-animation(wiggle); } + + // Animation Modifiers + // - - - - - - - - - - - - - - - + .infinite { animation-iteration-count: infinite; } + + @each $name, $value in $motion-ui-speeds { + @if $name != default { + .#{$name} { animation-duration: $value !important; } + } + } + + @each $name, $value in $motion-ui-easings { + @if $name != default { + .#{$name} { animation-timing-function: $value !important; } + } + } + + @each $name, $value in $motion-ui-delays { + @if $name != default { + .#{$name}-delay { animation-delay: $value !important; } + } + } +} diff --git a/assets/javascript/motion-ui/_fade.scss b/assets/javascript/motion-ui/_fade.scss new file mode 100644 index 000000000..c3e5f0547 --- /dev/null +++ b/assets/javascript/motion-ui/_fade.scss @@ -0,0 +1,28 @@ +/// Creates a fade transition by adjusting the opacity of the element. +/// @param {Keyword} $state [in] - State to transition to. +/// @param {Number} $from [0] - Opacity to start at. Must be a number between 0 and 1. +/// @param {Number} $to [1] - Opacity to end on. +/// @param {Keyword} $duration [null] - Length (speed) of the transition. +/// @param {Keyword|Function} $timing [null] - Easing of the transition. +/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. +@mixin mui-fade( + $state: in, + $from: 0, + $to: 1, + $duration: null, + $timing: null, + $delay: null +) { + $fade: fade($from, $to); + + @include transition-start($state) { + @include transition-basics($duration, $timing, $delay); + @include -mui-keyframe-get($fade, 0); + + transition-property: opacity; + } + + @include transition-end($state) { + @include -mui-keyframe-get($fade, 100); + } +} diff --git a/assets/javascript/motion-ui/_hinge.scss b/assets/javascript/motion-ui/_hinge.scss new file mode 100644 index 000000000..534bcb286 --- /dev/null +++ b/assets/javascript/motion-ui/_hinge.scss @@ -0,0 +1,43 @@ +/// Creates a hinge transition by rotating the element. +/// @param {Keyword} $state [in] - State to transition to. +/// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. +/// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`. +/// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. +/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. +/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously. +/// @param {Duration} $duration [null] - Length (speed) of the transition. +/// @param {Keyword|Function} $timing [null] - Easing of the transition. +/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. +@mixin mui-hinge ( + $state: in, + $from: left, + $axis: edge, + $perspective: 2000px, + $turn-origin: from-back, + $fade: map-get($motion-ui-settings, hinge-and-fade), + $duration: null, + $timing: null, + $delay: null +) { + $hinge: hinge($state, $from, $axis, $perspective, $turn-origin); + + @include transition-start($state) { + @include transition-basics($duration, $timing, $delay); + @include -mui-keyframe-get($hinge, 0); + + @if $fade { + transition-property: transform, opacity; + opacity: if($state == in, 0, 1); + } @else { + transition-property: transform, opacity; + } + } + + @include transition-end($state) { + @include -mui-keyframe-get($hinge, 100); + + @if $fade { + opacity: if($state == in, 1, 0); + } + } +} diff --git a/assets/javascript/motion-ui/_keyframe.scss b/assets/javascript/motion-ui/_keyframe.scss new file mode 100644 index 000000000..e683368ca --- /dev/null +++ b/assets/javascript/motion-ui/_keyframe.scss @@ -0,0 +1,136 @@ +// Internal counter for creating unique keyframe names +$-mui-custom: 0; + +/// Creates a keyframe from one or more effect functions. Use this function instead of `mui-animation` if you want to create a keyframe animation *without* automatically assigning it to the element. +/// @param {String} $name - Name of the keyframe. +/// @param {Function} $effects... - One or more effect functions to build the keyframe with. +@mixin mui-keyframes($name, $effects...) { + $obj: -mui-process-args($effects...); + $obj: map-remove($obj, name); + + @keyframes #{$name} { + // Now iterate through each keyframe percentage + @each $pct, $props in $obj { + #{-mui-keyframe-pct($pct)} { + // Lastly, iterate through each CSS property within a percentage and print it out + @each $prop, $value in $props { + #{$prop}: #{$value}; + } + } + } + } +} + +/// Creates a string for a CSS keyframe, by converting a list of numbers to a comma-separated list of percentage values. +/// @param {Number|List} $input - List of numbers to use. +/// @return {String} A set of comma-separated percentage values. +/// @access private +@function -mui-keyframe-pct($input) { + $output: (); + + @if type-of($input) == 'number' { + $output: ($input * 1%); + } @else if type-of($input) == 'list' { + @each $i in $input { + $output: append($output, ($i * 1%), comma); + } + } + + @return $output; +} + +/// Prints the CSS properties from a specific key in a keyframes map. Used to borrow CSS from keyframe functions for use in transitions. +/// @param {Map} $kf - Keyframe map to extract from. +/// @param {Number} $key - Key in the map to print the CSS of. +/// @access private +@mixin -mui-keyframe-get($kf, $key) { + $map: map-get($kf, $key); + + @each $prop, $value in $map or () { + // Some keyframe maps store transforms as quoted strings + @if type-of($value) == 'string' { + $value: unquote($value); + } + #{$prop}: $value; + } +} + +/// Reformats a map containing keys with a list of values, so that each key is a single value. +/// @param {Map} $map - Map to split up. +/// @return {Map} A reformatted map. +/// @access private +@function -mui-keyframe-split($map) { + $new-map: (); + + // Split keys with multiple values into individual keys + @each $key, $item in $map { + $key-type: type-of($key); + + @if $key-type == 'number' { + $new-map: map-merge($new-map, ($key: $item)); + } @else if $key-type == 'list' { + @each $k in $key { + $new-map: map-merge($new-map, ($k: $item)); + } + } + } + + @return $new-map; +} + +/// Combines a series of keyframe objects into one. +/// @param {Map} $maps... - A series of maps to merge, as individual parameters. +/// @return {Map} A combined keyframe object. +/// @access private +@function -mui-keyframe-combine($maps...) { + $new-map: (); + + // Iterate through each map passed in + @each $map in $maps { + @if type-of($map) == 'string' { + $map: call($map); + } + + $map: -mui-keyframe-split($map); + + // Iterate through each keyframe in the map + // $key is the keyframe percentage + // $value is a map of CSS properties + @each $key, $value in $map { + $new-value: (); + + @if map-has-key($new-map, $key) { + // If the map already has the keyframe %, append the new property + $new-value: -mui-merge-properties(map-get($new-map, $key), $value); + } @else { + // Otherwise, create a new map with the new property + $new-value: $value; + } + + // Finally, merge the modified keyframe value into the output map + $new-map: map-merge($new-map, ($key: $new-value)); + } + } + + // Make a name for the keyframes + $-mui-custom: $-mui-custom + 1 !global; + $map-name: (name: 'custom-#{$-mui-custom}'); + $new-map: map-merge($new-map, $map-name); + + @return $new-map; +} + +/// Combines two maps of CSS properties into one map. If both maps have a transform property, the values from each will be combined into one property. +/// @param {Map} $one - First map to merge. +/// @param {Map} $two - Second map to merge. +/// @return {Map} A combined map. +/// @access private +@function -mui-merge-properties($one, $two) { + @if map-has-key($one, transform) and map-has-key($two, transform) { + $transform: join(map-get($one, transform), map-get($two, transform)); + $one: map-merge($one, (transform: $transform)); + $two: map-remove($two, transform); + } + + @return map-merge($one, $two); +} diff --git a/assets/javascript/motion-ui/_selector.scss b/assets/javascript/motion-ui/_selector.scss new file mode 100644 index 000000000..d66c463db --- /dev/null +++ b/assets/javascript/motion-ui/_selector.scss @@ -0,0 +1,23 @@ +/// Builds a selector for a motion class, using the settings defined in the `$motion-ui-classes` and `$motion-ui-states` maps. +/// @param {String|List} $states - One or more strings that correlate to a state. +/// @param {Boolean} $active - Defines if the selector is for the setup or active class. +/// @return {String} A selector that can be interpolated into your Sass code. +/// @access private +@function -mui-build-selector($states, $active: false) { + $return: ''; + $chain: map-get($motion-ui-classes, chain); + $prefix: map-get($motion-ui-classes, prefix); + $suffix: map-get($motion-ui-classes, active); + + @each $sel in $states { + $return: $return + if($chain, '&.', '#{&}-') + $prefix + $sel; + + @if $active { + $return: $return + if($chain, '.', '#{&}-') + $prefix + $sel + $suffix; + } + + $return: $return + ', '; + } + + @return str-slice($return, 1, -3); +} diff --git a/assets/javascript/motion-ui/_series.scss b/assets/javascript/motion-ui/_series.scss new file mode 100644 index 000000000..8baeee3a7 --- /dev/null +++ b/assets/javascript/motion-ui/_series.scss @@ -0,0 +1,54 @@ +$-mui-queue: (); + +/// Pauses the animation on an element by default, and then plays it when an active class is added to a parent. Also sets the fill mode of the animation to `both`. This pauses the element at the first frame of the animation, and holds it in place at the end. +/// @access private +%animated-element { + animation-play-state: paused; + animation-fill-mode: both; + + .#{map-get($motion-ui-settings, activate-queue-class)} & { + animation-play-state: running; + } +} + +/// Creates a new animation queue. +/// @param {Duration} $delay [0s] - Delay in seconds or milliseconds to place at the front of the animation queue. +@mixin mui-series($delay: 0s) { + $-mui-queue: () !global; + + @if $delay > 0 { + $item: ($delay, 0s); + $-mui-queue: append($-mui-queue, $item) !global; + } + + @content; +} + +/// Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`. +/// @param {Duration} $duration [1s] - Length of the animation. +/// @param {Duration} $gap [0s] - Amount of time to pause before playing the animation after this one. Use a negative value to make the next effect overlap with the current one. +/// @param {Function} $keyframes... - One or more effect functions to build the keyframe with. +@mixin mui-queue( + $duration: 1s, + $gap: 0s, + $keyframes... +) { + // Build the animation + $kf: -mui-process-args($keyframes...); + + // Calculate the delay for this animation based on how long the previous ones take + $actual-delay: 0s; + @each $anim in $-mui-queue { + $actual-delay: $actual-delay + nth($anim, 1) + nth($anim, 2); + } + + // Append this animation's length and gap to the end of the queue + $item: ($duration, $gap); + $-mui-queue: append($-mui-queue, $item) !global; + + // CSS output + @extend %animated-element; + @include mui-animation($kf); + animation-duration: $duration; + animation-delay: $actual-delay; +} diff --git a/assets/javascript/motion-ui/_settings.scss b/assets/javascript/motion-ui/_settings.scss new file mode 100644 index 000000000..a5cc9bf4c --- /dev/null +++ b/assets/javascript/motion-ui/_settings.scss @@ -0,0 +1,61 @@ +/// Format for CSS classes created with Motion UI. +/// @type Map +/// @prop {Boolean} append [true] - Defines if selectors are chained to the selector (`.class.enter`), or appended as a new class (`.class-enter`). +/// @prop {String} prefix ['mui-'] - Prefix to add before the state of a class. Enter an empty string to use no prefix. +/// @prop {String} prefix ['-active'] - Suffix to add to the active state class. +$motion-ui-classes: ( + chain: true, + prefix: 'mui-', + active: '-active', +) !default; + +/// State names to reference when writing motion classes. To use multiple class names for one state, enter a list of strings instead of one string. +/// @type Map +$motion-ui-states: ( + in: 'enter', + out: 'leave', +) !default; + +/// Default speed that transitions and animations play at, along with values for modifier classes to change the speed. +/// @type Map +$motion-ui-speeds: ( + default: 500ms, + slow: 750ms, + fast: 250ms, +) !default; + +/// Default delay to add before motion, along with values for modifier classes to change the delay. +/// @type Map +$motion-ui-delays: ( + default: 0, + short: 300ms, + long: 700ms, +) !default; + +/// Default easing for transitions and animations, along with values for modifier classes to change the easing. +/// @type Map +$motion-ui-easings: ( + default: linear, + linear: linear, + ease: ease, + ease-in: ease-in, + ease-out: ease-out, + ease-in-out: ease-in-out, + bounce-in: cubic-bezier(0.485, 0.155, 0.24, 1.245), + bounce-out: cubic-bezier(0.485, 0.155, 0.515, 0.845), + bounce-in-out: cubic-bezier(0.76, -0.245, 0.24, 1.245), +) !default; + +/// Miscellaneous settings related to Motion UI. +/// @type Map +/// @prop {Boolean} slide-and-fade [false] - Defines if slide motions should also fade in/out. +/// @prop {Boolean} slide-and-fade [true] - Defines if hinge motions should also fade in/out. +/// @prop {Boolean} slide-and-fade [true] - Defines if scale motions should also fade in/out. +/// @prop {Boolean} slide-and-fade [true] - Defines if spin motions should also fade in/out. +$motion-ui-settings: ( + slide-and-fade: false, + hinge-and-fade: true, + scale-and-fade: true, + spin-and-fade: true, + activate-queue-class: 'is-animating', +) !default; diff --git a/assets/javascript/motion-ui/_shake.scss b/assets/javascript/motion-ui/_shake.scss new file mode 100644 index 000000000..66a291c62 --- /dev/null +++ b/assets/javascript/motion-ui/_shake.scss @@ -0,0 +1,15 @@ +/// Creates a shaking animation. +/// @param {Percentage} $intensity [7%] - Intensity of the shake, as a percentage value. +/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. +@function shake($intensity: 7%) { + $right: (0, 10, 20, 30, 40, 50, 60, 70, 80, 90); + $left: (5, 15, 25, 35, 45, 55, 65, 75, 85, 95); + + $keyframes: ( + name: 'shake-#{($intensity / 1%)}', + $right: (transform: translateX($intensity)), + $left: (transform: translateX(-$intensity)), + ); + + @return $keyframes; +} diff --git a/assets/javascript/motion-ui/_slide.scss b/assets/javascript/motion-ui/_slide.scss new file mode 100644 index 000000000..898a549f4 --- /dev/null +++ b/assets/javascript/motion-ui/_slide.scss @@ -0,0 +1,42 @@ +/// Creates a sliding transition by translating the element horizontally or vertically. +/// @param {Keyword} $state [in] - State to transition to. +/// @param {Keyword} $direction [left] - Side of the element to slide from. Can be `top`, `right`, `bottom`, or `left`. +/// @param {Length} $amount [100%] - Length of the slide as a percentage value. +/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously. +/// @param {Duration} $duration [null] - Length (speed) of the transition. +/// @param {Keyword|Function} $timing [null] - Easing of the transition. +/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. +@mixin mui-slide ( + $state: in, + $direction: left, + $amount: 100%, + $fade: map-get($motion-ui-settings, slide-and-fade), + $duration: null, + $timing: null, + $delay: null +) { + $slide: slide($state, $direction, $amount); + + // CSS Output + @include transition-start($state) { + @include transition-basics($duration, $timing, $delay); + @include -mui-keyframe-get($slide, 0); + + @if $fade { + transition-property: transform, opacity; + opacity: if($state == in, 0, 1); + } @else { + transition-property: transform, opacity; + } + + backface-visibility: hidden; + } + + @include transition-end($state) { + @include -mui-keyframe-get($slide, 100); + + @if $fade { + opacity: if($state == in, 1, 0); + } + } +} diff --git a/assets/javascript/motion-ui/_spin.scss b/assets/javascript/motion-ui/_spin.scss new file mode 100644 index 000000000..82812e0f0 --- /dev/null +++ b/assets/javascript/motion-ui/_spin.scss @@ -0,0 +1,39 @@ +/// Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin. +/// @param {Keyword} $state [in] - State to transition to. +/// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). +/// @param {Number} $amount [0.75turn] - Amount to element the element. +/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously. +/// @param {Duration} $duration [null] - Length (speed) of the transition. +/// @param {Keyword|Function} $timing [null] - Easing of the transition. +/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. +@mixin mui-spin( + $state: in, + $direction: cw, + $amount: 0.75turn, + $fade: map-get($motion-ui-settings, spin-and-fade), + $duration: null, + $timing: null, + $delay: null +) { + $spin: spin($state, $direction, $amount); + + @include transition-start($state) { + @include transition-basics($duration, $timing, $delay); + @include -mui-keyframe-get($spin, 0); + + @if $fade { + transition-property: transform, opacity; + opacity: if($state == in, 0, 1); + } @else { + transition-property: transform, opacity; + } + } + + @include transition-end($state) { + @include -mui-keyframe-get($spin, 100); + + @if $fade { + opacity: if($state == in, 1, 0); + } + } +} diff --git a/assets/javascript/motion-ui/_transition.scss b/assets/javascript/motion-ui/_transition.scss new file mode 100644 index 000000000..eb37d53a0 --- /dev/null +++ b/assets/javascript/motion-ui/_transition.scss @@ -0,0 +1,45 @@ +/// Applies basic transition settings to an element. +/// @param {Duration} $duration [null] - Length (speed) of the transition. +/// @param {Keyword|Function} $timing [null] - Easing of the transition. +/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. +@mixin transition-basics( + $duration: null, + $timing: null, + $delay: null +) { + @extend %mui-defaults; + transition-duration: $duration; + transition-timing-function: $timing; + transition-delay: $delay; +} + +/// Wraps the content in the setup class for a transition. +/// @param {Keyword} $dir - State to setup for transition. +@mixin transition-start($dir) { + $selector: -mui-build-selector(map-get($motion-ui-states, $dir)); + + @at-root { + #{$selector} { + @content; + } + } +} + +/// Wraps the content in the active class for a transition. +/// @param {Keyword} $dir - State to activate a transition on. +@mixin transition-end($dir) { + $selector: -mui-build-selector(map-get($motion-ui-states, $dir), true); + + @at-root { + #{$selector} { + @content; + } + } +} + +/// Adds styles for a stagger animation, which can be used with Angular's `ng-repeat`. +/// @param {Duration} $delay-amount - Amount of time in seconds or milliseconds to add between each item's animation. +@mixin stagger($delay-amount) { + transition-delay: $delay-amount; + transition-duration: 0; // Prevent accidental CSS inheritance +} diff --git a/assets/javascript/motion-ui/_unit.scss b/assets/javascript/motion-ui/_unit.scss new file mode 100644 index 000000000..fd391663e --- /dev/null +++ b/assets/javascript/motion-ui/_unit.scss @@ -0,0 +1,7 @@ +/// Removes the unit (e.g. px, em, rem) from a value, returning the number only. +/// @param {Number} $num - Number to strip unit from. +/// @return {Number} The same number, sans unit. +/// @access private +@function strip-unit($num) { + @return $num / ($num * 0 + 1); +} diff --git a/assets/javascript/motion-ui/_wiggle.scss b/assets/javascript/motion-ui/_wiggle.scss new file mode 100644 index 000000000..2866c300a --- /dev/null +++ b/assets/javascript/motion-ui/_wiggle.scss @@ -0,0 +1,13 @@ +/// Creates a wiggling animation. +/// @param {Number} $intensity [7deg] - Intensity of the wiggle. Can be any CSS angle unit. +/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. +@function wiggle($intensity: 7deg) { + $keyframes: ( + name: 'wiggle-#{$intensity}', + (40, 50, 60): (transform: rotate($intensity)), + (35, 45, 55, 65): (transform: rotate(-$intensity)), + (0, 30, 70, 100): (transform: rotate(0)), + ); + + @return $keyframes; +} diff --git a/assets/javascript/motion-ui/_zoom.scss b/assets/javascript/motion-ui/_zoom.scss new file mode 100644 index 000000000..db4876494 --- /dev/null +++ b/assets/javascript/motion-ui/_zoom.scss @@ -0,0 +1,39 @@ +/// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller. +/// @param {Keyword} $state [in] - State to transition to. +/// @param {Number} $from [1.5] - Size to start at. +/// @param {Number} $from [1] - Size to end at. +/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously. +/// @param {Duration} $duration [null] - Length (speed) of the transition. +/// @param {Keyword|Function} $timing [null] - Easing of the transition. +/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. +@mixin mui-zoom( + $state: in, + $from: 1.5, + $to: 1, + $fade: map-get($motion-ui-settings, scale-and-fade), + $duration: null, + $timing: null, + $delay: null +) { + $scale: zoom($from, $to); + + @include transition-start($state) { + @include transition-basics($duration, $timing, $delay); + @include -mui-keyframe-get($scale, 0); + + @if $fade { + transition-property: transform, opacity; + opacity: if($state == in, 0, 1); + } @else { + transition-property: transform, opacity; + } + } + + @include transition-end($state) { + @include -mui-keyframe-get($scale, 100); + + @if $fade { + opacity: if($state == in, 1, 0); + } + } +} diff --git a/assets/javascript/motion-ui/animations.md b/assets/javascript/motion-ui/animations.md new file mode 100644 index 000000000..20c58a0f7 --- /dev/null +++ b/assets/javascript/motion-ui/animations.md @@ -0,0 +1,226 @@ +# Animations + +## Basics + +Use the `mui-animation` mixin to create CSS keyframe animations. The mixin accepts a keyframe function, like this: + +```scss +.spin-cw { + @include mui-animation(spin(in, 360deg)); +} +``` + +The CSS output looks like this: + +```css +@keyframes spin-cw-360deg { + 0% { + transform: rotate(0deg); } + 100% { + transform: rotate(360deg); } +} + +.spin-cw { + animation-name: spin-cw-360deg; +} +``` + +**Note that in order to play properly, the element must have at least the property `animation-duration` applied to it as well.** + +There are seven keyframe functions: + +- `fade($from, $to)` +- `hinge($state, $from, $axis, $perspective, $turn-origin)` +- `shake($intensity)` +- `slide($state, $direction, $amount)` +- `spin($state, $direction, $amount)` +- `wiggle($intensity)` +- `zoom($from, $to)` + +All keyframe functions have parameters that customize the effect. For example, with `shake()` and `wiggle()` you can set the intensity of the effect, and with `spin()` you can set how many degrees the spin goes. + +If you're using a keyframe effect as-is, it can be inserted as a plain string instead of a function call, like so: + +.zoom-in { + @include mui-animation(zoom); +} + +## Combination Effects + +Multiple keyframe effects can be combined into one. For example, you can combine a fade, slide, and spin into one animation, for something truly monstrous. + +To create a combined effect, just add more keyframe functions to the `mui-animation` mixin, as additional parameters. + +```scss +.slide-and-fade-and-spin { + @include mui-animation(slide, fade, spin(120deg)); +} +``` + +**Note that this doesn't work with the `shake()` or `wiggle()` animations. Only animations with single start and end keyframes can be combined.** + +## Series Animations + +Multiple elements can be animated in series. + +To set it up, make sure each animating element shares a common parent. + +```html +
+
+
+
+
+``` + +Begin your series with the `mui-series()` mixin. Inside this mixin, attach animations to classes with the `mui-queue()` mixin. The first parameter is the length of the animation, the second parameter is an optional pause to create before the next animation, and the remaining parameters are a set of keyframe functions. + +```scss +@include mui-series { + // 2 second shake + .shake { @include mui-queue(2s, 0s, shake); } + // 1 second spin with a 2 second pause + .spin { @include mui-queue(1s, 2s, spin); } + // 1 second zoom and fade + .fade-zoom { @include mui-queue(1s, 0s, fade, zoom); } +} +``` + +To add a delay to the start of the queue, add the length in seconds to the `mui-series` mixin. + +```scss +// 2 second delay before the first shake +@include mui-series(2s) { + .shake { @include mui-queue(2s, 0s, shake()); } + .spin { @include mui-queue(1s, 2s, spin()); } + .wiggle { @include mui-queue(wiggle); } +} +``` + +To trigger the queue, add the class `.is-animating` to the parent container. This can be done easily in JavaScript: + +```js +// Plain JavaScript (IE10+) +document.querySelector('.animation-wrapper').classList.add('is-animating'); + +// jQuery +$('.animation-wrapper').addClass('is-animating'); +``` + + +## Mixins + + +### mui-animation() + +Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property. + +**Parameters:** + +- `effects...` (Function) - One or more effect functions to build the keyframe with. + + +### mui-keyframes() + +Creates a keyframe from one or more effect functions. Use this function instead of `mui-animation` if you want to create a keyframe animation *without* automatically assigning it to the element. + +**Parameters:** + +- `name` (String) - Name of the keyframe. +- `effects...` (Function) - One or more effect functions to build the keyframe with. + + +### mui-series() + +Creates a new animation queue. + +**Parameters:** + +- `delay` (Duration) - Delay in seconds or milliseconds to place at the front of the animation queue. (**Default:** 0s) + + +### mui-queue() + +Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`. + +**Parameters:** + +- `duration` (Duration) - Length of the animation. (**Default:** 1s) +- `gap` (Duration) - Amount of time to pause before playing the animation after this one. Use a negative value to make the next effect overlap with the current one. (**Default:** 0s) +- `keyframes...` (Function) - One or more effect functions to build the keyframe with. + + +## Functions + + +### fade() + +Creates a fading animation. + +**Parameters:** + +- `from` (Number) - Opacity to start at. (**Default:** 0) +- `to` (Number) - Opacity to end at. (**Default:** 1) + + +### hinge() + +Creates a hinge effect by rotating the element. + +**Parameters:** + +- `state` (Keyword) - State to transition to. (**Default:** in) +- `from` (Keyword) - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. (**Default:** left) +- `axis` (Keyword) - Axis of the element to rotate on. Can be `edge` or `center`. (**Default:** edge) +- `perspective` (Number) - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. (**Default:** 2000px) +- `turn-origin` (Keyword) - Side of the element to start the rotation from. Can be `from-back` or `from-front`. (**Default:** from-back) + + +### shake() + +Creates a shaking animation. + +**Parameters:** + +- `intensity` (Percentage) - Intensity of the shake, as a percentage value. (**Default:** 7%) + + +### slide() + +Creates a sliding animation. + +**Parameters:** + +- `state` (Keyword) - Whether to move to (`in`) or from (`out`) the element's default position. (**Default:** in) +- `direction` (Keyword) - Direction to move. Can be `up`, `down`, `left`, or `right`. (**Default:** up) +- `amount` (Number) - Distance to move. Can be any CSS length unit. (**Default:** 100%) + + +### spin() + +Creates a spinning animation. + +**Parameters:** + +- `direction` (Keyword) - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). (**Default:** cw) +- `amount` (Number) - Amount to spin. Can be any CSS angle unit. (**Default:** 360deg) + + +### wiggle() + +Creates a wiggling animation. + +**Parameters:** + +- `intensity` (Number) - Intensity of the wiggle. Can be any CSS angle unit. (**Default:** 7deg) + + +### zoom() + +Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller. + +**Parameters:** + +- `from` (Number) - Size to start at. (**Default:** 1.5) +- `from` (Number) - Size to end at. (**Default:** 1) + diff --git a/assets/javascript/motion-ui/bower.json b/assets/javascript/motion-ui/bower.json new file mode 100644 index 000000000..6c61607ec --- /dev/null +++ b/assets/javascript/motion-ui/bower.json @@ -0,0 +1,28 @@ +{ + "name": "motion-ui", + "version": "1.1.0", + "authors": [ + "ZURB " + ], + "description": "Sass library for creating transitions and animations.", + "main": [ + "dist/motion-ui.css", + "dist/motion-ui.js" + ], + "keywords": [ + "Sass", + "motion" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "_build", + "node_modules", + "bower_components", + "docs/src", + "test" + ], + "dependencies": { + "jquery": "~2.1.4" + } +} diff --git a/assets/javascript/motion-ui/classes.md b/assets/javascript/motion-ui/classes.md new file mode 100644 index 000000000..64ee674a7 --- /dev/null +++ b/assets/javascript/motion-ui/classes.md @@ -0,0 +1,81 @@ +# CSS Classes + +The Sass mixins are the heart of Motion UI, but the library also includes many pre-made CSS classes to get you up and running faster. + +## Defaults + +The pre-made classes all use these transition/animation defaults: + +- **Speed:** 500ms +- **Timing:** Linear +- **Delay:** 0s + +These defaults can be changed by modifying the [Motion UI settings](configuration.md); + +## Transition Classes + +- **Slide:** + - `.slide-in-down` + - `.slide-in-left` + - `.slide-in-up` + - `.slide-in-right` + - `.slide-out-down` + - `.slide-out-left` + - `.slide-out-up` + - `.slide-out-right` +- **Fade:** + - `.fade-in` + - `.fade-out` +- **Hinge:** + - `.hinge-in-from-top` + - `.hinge-in-from-right` + - `.hinge-in-from-bottom` + - `.hinge-in-from-left` + - `.hinge-in-from-middle-x` + - `.hinge-in-from-middle-y` + - `.hinge-out-from-top` + - `.hinge-out-from-right` + - `.hinge-out-from-bottom` + - `.hinge-out-from-left` + - `.hinge-out-from-middle-x` + - `.hinge-out-from-middle-y` +- **Scale:** + - `.scale-in-up` + - `.scale-in-down` + - `.scale-out-up` + - `.scale-out-down` +- **Spin:** + - `.spin-in` + - `.spin-out` + - `.spin-in-ccw` + - `.spin-out-ccw` + +## Animation Classes + +- `.shake`: shakes the element horizontally. +- `.wiggle`: rotates the element back and forth. +- `.spin-cw`: rotates the element once. +- `.spin-ccw`: rotates the element once, counterclockwise. + +## Modifier Classes + +Modifiers work with both transitions and animations. + +- **Speed:** + - `.slow` (750ms) + - `.fast` (250ms) +- **Timing:** + - `.linear` + - `.ease` + - `.ease-in` + - `.ease-out` + - `.ease-in-out` + - `.bounce-in` + - `.bounce-out` + - `.bounce-in-out` +- **Delay:** + - `.short-delay` (300ms) + - `.long-delay` (700ms) + + + diff --git a/assets/javascript/motion-ui/configuration.md b/assets/javascript/motion-ui/configuration.md new file mode 100644 index 000000000..a04409e88 --- /dev/null +++ b/assets/javascript/motion-ui/configuration.md @@ -0,0 +1,63 @@ +# Configuration + +Motion UI has six variables which store all of the library's settings. Each is a map of keys and values. + +## States + +```scss +$motion-ui-states: ( + in: 'enter', + out: 'leave', +); +``` + +Motion UI defines two motion states: `in` and `out`, which create classes with the words `enter` and `leave` respectively. + +## Classes + +```scss +$motion-ui-classes: ( + chain: true, + prefix: 'mui-', + active: '-active', +); +``` + +Different animation libraries have different ways of writing classes, but most libraries require a setup class, as well as an active class to trigger a transition or animation. + +The default configuration outputs classes like this: + +```css +.fade-in.mui-enter {} +.fade-in.mui-enter.mui-enter-active {} +``` + +Set the `chain` property of `$motion-ui-classes` to `false` to create classes like this: + +```css +.fade-in-mui-enter {} +.fade-in-mui-enter.fade-in-mui-enter-active {} +``` + +The class output can also be fine-tuned with the `prefix` and `active` properties. + +## Animation Defaults + +The maps `$motion-ui-speeds`, `$motion-ui-delays`, and `$motion-ui-easings` define terms for animation speeds, delays, and timing functions. For example, the `default` speed of animations is 500ms, while `slow` is 750ms, and `fast` is 250ms. + +## Other Settings + +Miscellaneous settings are in the `$motion-ui-settings` map. These settings define if animations include a fade, and what class to use for triggering an animation queue. + +```scss +$motion-ui-settings: ( + slide-and-fade: false, + hinge-and-fade: true, + scale-and-fade: true, + spin-and-fade: true, + activate-queue-class: 'is-animating' +); +``` + + + diff --git a/assets/javascript/motion-ui/gulpfile.js b/assets/javascript/motion-ui/gulpfile.js new file mode 100644 index 000000000..f290bf27b --- /dev/null +++ b/assets/javascript/motion-ui/gulpfile.js @@ -0,0 +1,90 @@ +var $ = require('gulp-load-plugins')(); +var gulp = require('gulp'); +var rimraf = require('rimraf').sync; +var sequence = require('run-sequence'); +var supercollider = require('supercollider'); + +var COMPATIBILITY = [ + 'last 2 versions', + 'ie >= 10', + 'and_chr >= 2.3' +]; + +supercollider + .config({ + template: './docs/src/_template.hbs', + extension: 'md', + marked: false, + handlebars: require('./lib/handlebars') + }) + .adapter('sass'); + +gulp.task('clean', function(done) { + rimraf('./_build'); + rimraf('./docs/*.md'); + done(); +}); + +gulp.task('docs', function() { + return gulp.src('./docs/src/*.md') + .pipe(supercollider.init()) + .pipe(gulp.dest('./docs')); +}); + +gulp.task('sass', function() { + return gulp.src('./motion-ui.scss') + .pipe($.sass().on('error', $.sass.logError)) + .pipe($.autoprefixer({ + browsers: COMPATIBILITY + })) + .pipe(gulp.dest('./_build')); +}); + +gulp.task('javascript', function() { + return gulp.src('./motion-ui.js') + .pipe($.umd({ + dependencies: function(file) { + return [{ name: 'jquery', amd: 'jquery', cjs: 'jquery', global: 'jQuery', param: '$' }]; + }, + exports: function(file) { + return 'MotionUI'; + }, + namespace: function(file) { + return 'MotionUI'; + } + })) + .pipe(gulp.dest('./_build')); +}); + +gulp.task('dist', ['dist:sass', 'dist:javascript']); + +gulp.task('dist:sass', ['sass'], function() { + return gulp.src('./_build/motion-ui.css') + .pipe(gulp.dest('./dist')) + .pipe($.minifyCss()) + .pipe($.rename('motion-ui.min.css')) + .pipe(gulp.dest('./dist')); +}); + +gulp.task('dist:javascript', ['javascript'], function() { + return gulp.src('./_build/motion-ui.js') + .pipe(gulp.dest('./dist')) + .pipe($.uglify()) + .pipe($.rename('motion-ui.min.js')) + .pipe(gulp.dest('./dist')); +}); + +gulp.task('build', function(done) { + sequence('clean', ['docs', 'sass', 'javascript'], done); +}); + +gulp.task('lint', function() { + return gulp.src('./src/**/*.scss') + .pipe($.scssLint()); +}) + +gulp.task('default', ['build'], function() { + gulp.watch(['./docs/src/*.md', './docs/src/_template.hbs'], ['docs']); + gulp.watch(['./src/**/*.scss', './motion-ui.scss'], ['sass']); + gulp.watch('./motion-ui.js', ['javascript']); +}); diff --git a/assets/javascript/motion-ui/handlebars.js b/assets/javascript/motion-ui/handlebars.js new file mode 100644 index 000000000..acd3a7920 --- /dev/null +++ b/assets/javascript/motion-ui/handlebars.js @@ -0,0 +1,8 @@ +var handlebars = require('handlebars'); + +handlebars.registerHelper('private', function(item, content) { + if (item.access === 'public') return content.fn(this); + else return content.inverse(this); +}); + +module.exports = handlebars; diff --git a/assets/javascript/motion-ui/installation.md b/assets/javascript/motion-ui/installation.md new file mode 100644 index 000000000..1c7e870aa --- /dev/null +++ b/assets/javascript/motion-ui/installation.md @@ -0,0 +1,50 @@ +# Getting Started + +## Installation + +Install Motion UI with npm or Bower. + +```bash +npm install motion-ui --save +bower install motion-ui --save +``` + +## Sass Usage + +To import the Sass files into a project, add the load path `[modules_folder]/motion-ui/src` to your Sass configuration, then `@import` the library: + +```scss +@import 'motion-ui'; +``` + +**[Autoprefixer](https://github.com/postcss/autoprefixer) is required to use this library.** The library uses unprefixed `transition` and `animation` properties, which are then prefixed by Autoprefixer. + +The library includes two mixins which export all of the [default CSS](classes.md) for the framework. This includes: + +- Transitions for slide, fade, hinge, scale, and spin +- Animation classes for spinning, shaking, and wiggling +- Modifier classes for transition/animation speed, timing, and delay + +```scss +@include motion-ui-transitions; +@include motion-ui-animations; +``` + +## CSS Usage + +The package files also include these pre-made classes as a standalone CSS file, in minified and unminified flavors. + +- **Uncompressed:** `[modules_folder]/motion-ui/dist/motion-ui.css` +- **Compressed:** `[modules_folder]/motion-ui/dist/motion-ui.min.css` + +## JavaScript Usage + +The package includes a small JavaScript library to help you transition elements in and out using Motion UI classes. It can be referenced as a browser global or a CommonJS/AMD package. Like the CSS, there's uncompressed and compressed versions included. + +- **Uncompressed:** `[modules_folder]/motion-ui/dist/motion-ui.js` +- **Compressed:** `[modules_folder]/motion-ui/dist/motion-ui.min.js` + +Refer to the full [JavaScript documentation](javascript.md) to learn more about how the JS library works. + + + diff --git a/assets/javascript/motion-ui/javascript.md b/assets/javascript/motion-ui/javascript.md new file mode 100644 index 000000000..ac428745c --- /dev/null +++ b/assets/javascript/motion-ui/javascript.md @@ -0,0 +1,36 @@ +# JavaScript + +Motion UI includes a small JavaScript library that can play transitions, although this specific library is not required to take advantage of Motion UI's CSS. Animating in reveals a hidden element, while animating out hides a visible element. + +The library is available on `window.MotionUI`, or can imported with a module system. + +## Usage + +The `MotionUI` object has two methods: `animateIn()` and `animateOut()`. Both functions take three parameters: + +- `element`: a DOM element to animate. +- `animation`: a transition class to use. +- `cb` (optional): a callback to run when the transition finishes. Within the callback, the value of `this` is the DOM element that was transitioned. + +Here's an example: + +```js +var $elem = $('[data-animate]'); + +MotionUI.animateIn($elem, 'slide-in', function() { + console.log('Transition finished!'); +}); +``` + +What about animations? Those can be triggered just by adding the animation class to an element. Here are examples with plain JavaScript and with jQuery: + +```js +// Plain JavaScript (IE10+) +document.querySelector('.animating-thing').classList.add('wiggle'); + +// jQuery +$('.animating-thing').addClass('wiggle'); +``` + + + diff --git a/assets/javascript/motion-ui/motion-ui.css b/assets/javascript/motion-ui/motion-ui.css new file mode 100644 index 000000000..1cc2ebeb1 --- /dev/null +++ b/assets/javascript/motion-ui/motion-ui.css @@ -0,0 +1,543 @@ +.slide-in-down.mui-enter, .slide-in-left.mui-enter, .slide-in-up.mui-enter, .slide-in-right.mui-enter, .slide-out-down.mui-leave, .slide-out-right.mui-leave, .slide-out-up.mui-leave, .slide-out-left.mui-leave, .fade-in.mui-enter, .fade-out.mui-leave, .hinge-in-from-top.mui-enter, .hinge-in-from-right.mui-enter, .hinge-in-from-bottom.mui-enter, .hinge-in-from-left.mui-enter, .hinge-in-from-middle-x.mui-enter, .hinge-in-from-middle-y.mui-enter, .hinge-out-from-top.mui-leave, .hinge-out-from-right.mui-leave, .hinge-out-from-bottom.mui-leave, .hinge-out-from-left.mui-leave, .hinge-out-from-middle-x.mui-leave, .hinge-out-from-middle-y.mui-leave, .scale-in-up.mui-enter, .scale-in-down.mui-enter, .scale-out-up.mui-leave, .scale-out-down.mui-leave, .spin-in.mui-enter, .spin-out.mui-leave, .spin-in-ccw.mui-enter, .spin-out-ccw.mui-leave { + transition-duration: 500ms; + transition-timing-function: linear; } + +.slide-in-down.mui-enter { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-in-down.mui-enter.mui-enter-active { + -webkit-transform: translateY(0); + transform: translateY(0); } + +.slide-in-left.mui-enter { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-in-left.mui-enter.mui-enter-active { + -webkit-transform: translateX(0); + transform: translateX(0); } + +.slide-in-up.mui-enter { + -webkit-transform: translateY(100%); + transform: translateY(100%); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-in-up.mui-enter.mui-enter-active { + -webkit-transform: translateY(0); + transform: translateY(0); } + +.slide-in-right.mui-enter { + -webkit-transform: translateX(100%); + transform: translateX(100%); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-in-right.mui-enter.mui-enter-active { + -webkit-transform: translateX(0); + transform: translateX(0); } + +.slide-out-down.mui-leave { + -webkit-transform: translateY(0); + transform: translateY(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-out-down.mui-leave.mui-leave-active { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); } + +.slide-out-right.mui-leave { + -webkit-transform: translateX(0); + transform: translateX(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-out-right.mui-leave.mui-leave-active { + -webkit-transform: translateX(100%); + transform: translateX(100%); } + +.slide-out-up.mui-leave { + -webkit-transform: translateY(0); + transform: translateY(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-out-up.mui-leave.mui-leave-active { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); } + +.slide-out-left.mui-leave { + -webkit-transform: translateX(0); + transform: translateX(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.slide-out-left.mui-leave.mui-leave-active { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } + +.fade-in.mui-enter { + opacity: 0; + transition-property: opacity; } + +.fade-in.mui-enter.mui-enter-active { + opacity: 1; } + +.fade-out.mui-leave { + opacity: 1; + transition-property: opacity; } + +.fade-out.mui-leave.mui-leave-active { + opacity: 0; } + +.hinge-in-from-top.mui-enter { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + -webkit-transform-origin: top; + transform-origin: top; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-top.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-in-from-right.mui-enter { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + -webkit-transform-origin: right; + transform-origin: right; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-right.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-in-from-bottom.mui-enter { + -webkit-transform: perspective(2000px) rotateX(90deg); + transform: perspective(2000px) rotateX(90deg); + -webkit-transform-origin: bottom; + transform-origin: bottom; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-bottom.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-in-from-left.mui-enter { + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + -webkit-transform-origin: left; + transform-origin: left; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-left.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-in-from-middle-x.mui-enter { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + -webkit-transform-origin: center; + transform-origin: center; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-middle-x.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-in-from-middle-y.mui-enter { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + -webkit-transform-origin: center; + transform-origin: center; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.hinge-in-from-middle-y.mui-enter.mui-enter-active { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + opacity: 1; } + +.hinge-out-from-top.mui-leave { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: top; + transform-origin: top; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-top.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; } + +.hinge-out-from-right.mui-leave { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: right; + transform-origin: right; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-right.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; } + +.hinge-out-from-bottom.mui-leave { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: bottom; + transform-origin: bottom; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-bottom.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateX(90deg); + transform: perspective(2000px) rotateX(90deg); + opacity: 0; } + +.hinge-out-from-left.mui-leave { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: left; + transform-origin: left; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-left.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + opacity: 0; } + +.hinge-out-from-middle-x.mui-leave { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: center; + transform-origin: center; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-middle-x.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; } + +.hinge-out-from-middle-y.mui-leave { + -webkit-transform: perspective(2000px) rotate(0deg); + transform: perspective(2000px) rotate(0deg); + -webkit-transform-origin: center; + transform-origin: center; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.hinge-out-from-middle-y.mui-leave.mui-leave-active { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; } + +.scale-in-up.mui-enter { + -webkit-transform: scale(0.5); + transform: scale(0.5); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.scale-in-up.mui-enter.mui-enter-active { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; } + +.scale-in-down.mui-enter { + -webkit-transform: scale(1.5); + transform: scale(1.5); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.scale-in-down.mui-enter.mui-enter-active { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; } + +.scale-out-up.mui-leave { + -webkit-transform: scale(1); + transform: scale(1); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.scale-out-up.mui-leave.mui-leave-active { + -webkit-transform: scale(1.5); + transform: scale(1.5); + opacity: 0; } + +.scale-out-down.mui-leave { + -webkit-transform: scale(1); + transform: scale(1); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.scale-out-down.mui-leave.mui-leave-active { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: 0; } + +.spin-in.mui-enter { + -webkit-transform: rotate(-0.75turn); + transform: rotate(-0.75turn); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.spin-in.mui-enter.mui-enter-active { + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; } + +.spin-out.mui-leave { + -webkit-transform: rotate(0); + transform: rotate(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.spin-out.mui-leave.mui-leave-active { + -webkit-transform: rotate(0.75turn); + transform: rotate(0.75turn); + opacity: 0; } + +.spin-in-ccw.mui-enter { + -webkit-transform: rotate(0.75turn); + transform: rotate(0.75turn); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 0; } + +.spin-in-ccw.mui-enter.mui-enter-active { + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; } + +.spin-out-ccw.mui-leave { + -webkit-transform: rotate(0); + transform: rotate(0); + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + opacity: 1; } + +.spin-out-ccw.mui-leave.mui-leave-active { + -webkit-transform: rotate(-0.75turn); + transform: rotate(-0.75turn); + opacity: 0; } + +.slow { + transition-duration: 750ms !important; } + +.fast { + transition-duration: 250ms !important; } + +.linear { + transition-timing-function: linear !important; } + +.ease { + transition-timing-function: ease !important; } + +.ease-in { + transition-timing-function: ease-in !important; } + +.ease-out { + transition-timing-function: ease-out !important; } + +.ease-in-out { + transition-timing-function: ease-in-out !important; } + +.bounce-in { + transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } + +.bounce-out { + transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } + +.bounce-in-out { + transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } + +.short-delay { + transition-delay: 300ms !important; } + +.long-delay { + transition-delay: 700ms !important; } + +.shake { + -webkit-animation-name: shake-7; + animation-name: shake-7; } + +@-webkit-keyframes shake-7 { + 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { + -webkit-transform: translateX(7%); + transform: translateX(7%); } + 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { + -webkit-transform: translateX(-7%); + transform: translateX(-7%); } } + +@keyframes shake-7 { + 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { + -webkit-transform: translateX(7%); + transform: translateX(7%); } + 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { + -webkit-transform: translateX(-7%); + transform: translateX(-7%); } } + +.spin-cw { + -webkit-animation-name: spin-cw-1turn; + animation-name: spin-cw-1turn; } + +@-webkit-keyframes spin-cw-1turn { + 0% { + -webkit-transform: rotate(-1turn); + transform: rotate(-1turn); } + 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +@keyframes spin-cw-1turn { + 0% { + -webkit-transform: rotate(-1turn); + transform: rotate(-1turn); } + 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +.spin-ccw { + -webkit-animation-name: spin-cw-1turn; + animation-name: spin-cw-1turn; } + +@keyframes spin-cw-1turn { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); } + 100% { + -webkit-transform: rotate(1turn); + transform: rotate(1turn); } } + +.wiggle { + -webkit-animation-name: wiggle-7deg; + animation-name: wiggle-7deg; } + +@-webkit-keyframes wiggle-7deg { + 40%, 50%, 60% { + -webkit-transform: rotate(7deg); + transform: rotate(7deg); } + 35%, 45%, 55%, 65% { + -webkit-transform: rotate(-7deg); + transform: rotate(-7deg); } + 0%, 30%, 70%, 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +@keyframes wiggle-7deg { + 40%, 50%, 60% { + -webkit-transform: rotate(7deg); + transform: rotate(7deg); } + 35%, 45%, 55%, 65% { + -webkit-transform: rotate(-7deg); + transform: rotate(-7deg); } + 0%, 30%, 70%, 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; } + +.slow { + -webkit-animation-duration: 750ms !important; + animation-duration: 750ms !important; } + +.fast { + -webkit-animation-duration: 250ms !important; + animation-duration: 250ms !important; } + +.linear { + -webkit-animation-timing-function: linear !important; + animation-timing-function: linear !important; } + +.ease { + -webkit-animation-timing-function: ease !important; + animation-timing-function: ease !important; } + +.ease-in { + -webkit-animation-timing-function: ease-in !important; + animation-timing-function: ease-in !important; } + +.ease-out { + -webkit-animation-timing-function: ease-out !important; + animation-timing-function: ease-out !important; } + +.ease-in-out { + -webkit-animation-timing-function: ease-in-out !important; + animation-timing-function: ease-in-out !important; } + +.bounce-in { + -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; + animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } + +.bounce-out { + -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; + animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } + +.bounce-in-out { + -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; + animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } + +.short-delay { + -webkit-animation-delay: 300ms !important; + animation-delay: 300ms !important; } + +.long-delay { + -webkit-animation-delay: 700ms !important; + animation-delay: 700ms !important; } diff --git a/assets/javascript/motion-ui/motion-ui.js b/assets/javascript/motion-ui/motion-ui.js new file mode 100644 index 000000000..f51ef5e14 --- /dev/null +++ b/assets/javascript/motion-ui/motion-ui.js @@ -0,0 +1,105 @@ +'use strict'; + +// Polyfill for requestAnimationFrame +(function() { + if (!Date.now) + Date.now = function() { return new Date().getTime(); }; + + var vendors = ['webkit', 'moz']; + for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { + var vp = vendors[i]; + window.requestAnimationFrame = window[vp+'RequestAnimationFrame']; + window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame'] + || window[vp+'CancelRequestAnimationFrame']); + } + if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) + || !window.requestAnimationFrame || !window.cancelAnimationFrame) { + var lastTime = 0; + window.requestAnimationFrame = function(callback) { + var now = Date.now(); + var nextTime = Math.max(lastTime + 16, now); + return setTimeout(function() { callback(lastTime = nextTime); }, + nextTime - now); + }; + window.cancelAnimationFrame = clearTimeout; + } +})(); + +var initClasses = ['mui-enter', 'mui-leave']; +var activeClasses = ['mui-enter-active', 'mui-leave-active']; + +// Find the right "transitionend" event for this browser +var endEvent = (function() { + var transitions = { + 'transition': 'transitionend', + 'WebkitTransition': 'webkitTransitionEnd', + 'MozTransition': 'transitionend', + 'OTransition': 'otransitionend' + } + var elem = window.document.createElement('div'); + + for (var t in transitions) { + if (typeof elem.style[t] !== 'undefined') { + return transitions[t]; + } + } + + return null; +})(); + +function animate(isIn, element, animation, cb) { + element = $(element).eq(0); + + if (!element.length) return; + + if (endEvent === null) { + isIn ? element.show() : element.hide(); + cb(); + return; + } + + var initClass = isIn ? initClasses[0] : initClasses[1]; + var activeClass = isIn ? activeClasses[0] : activeClasses[1]; + + // Set up the animation + reset(); + element.addClass(animation); + element.css('transition', 'none'); + requestAnimationFrame(function() { + element.addClass(initClass); + if (isIn) element.show(); + }); + + // Start the animation + requestAnimationFrame(function() { + element[0].offsetWidth; + element.css('transition', ''); + element.addClass(activeClass); + }); + + // Clean up the animation when it finishes + element.one('transitionend', finish); + + // Hides the element (for out animations), resets the element, and runs a callback + function finish() { + if (!isIn) element.hide(); + reset(); + if (cb) cb.apply(element); + } + + // Resets transitions and removes motion-specific classes + function reset() { + element[0].style.transitionDuration = 0; + element.removeClass(initClass + ' ' + activeClass + ' ' + animation); + } +} + +var MotionUI = { + animateIn: function(element, animation, cb) { + animate(true, element, animation, cb); + }, + + animateOut: function(element, animation, cb) { + animate(false, element, animation, cb); + } +} diff --git a/assets/javascript/motion-ui/motion-ui.min.css b/assets/javascript/motion-ui/motion-ui.min.css new file mode 100644 index 000000000..5b07906f2 --- /dev/null +++ b/assets/javascript/motion-ui/motion-ui.min.css @@ -0,0 +1 @@ +.fade-in.mui-enter,.fade-out.mui-leave,.hinge-in-from-bottom.mui-enter,.hinge-in-from-left.mui-enter,.hinge-in-from-middle-x.mui-enter,.hinge-in-from-middle-y.mui-enter,.hinge-in-from-right.mui-enter,.hinge-in-from-top.mui-enter,.hinge-out-from-bottom.mui-leave,.hinge-out-from-left.mui-leave,.hinge-out-from-middle-x.mui-leave,.hinge-out-from-middle-y.mui-leave,.hinge-out-from-right.mui-leave,.hinge-out-from-top.mui-leave,.scale-in-down.mui-enter,.scale-in-up.mui-enter,.scale-out-down.mui-leave,.scale-out-up.mui-leave,.slide-in-down.mui-enter,.slide-in-left.mui-enter,.slide-in-right.mui-enter,.slide-in-up.mui-enter,.slide-out-down.mui-leave,.slide-out-left.mui-leave,.slide-out-right.mui-leave,.slide-out-up.mui-leave,.spin-in-ccw.mui-enter,.spin-in.mui-enter,.spin-out-ccw.mui-leave,.spin-out.mui-leave{transition-duration:.5s;transition-timing-function:linear}.slide-in-down.mui-enter{-webkit-transform:translateY(-100%);transform:translateY(-100%);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-in-left.mui-enter,.slide-in-up.mui-enter{transition-property:-webkit-transform,opacity;-webkit-backface-visibility:hidden}.slide-in-down.mui-enter.mui-enter-active{-webkit-transform:translateY(0);transform:translateY(0)}.slide-in-left.mui-enter{-webkit-transform:translateX(-100%);transform:translateX(-100%);transition-property:transform,opacity;backface-visibility:hidden}.slide-in-left.mui-enter.mui-enter-active{-webkit-transform:translateX(0);transform:translateX(0)}.slide-in-up.mui-enter{-webkit-transform:translateY(100%);transform:translateY(100%);transition-property:transform,opacity;backface-visibility:hidden}.slide-in-right.mui-enter,.slide-out-down.mui-leave{transition-property:-webkit-transform,opacity;-webkit-backface-visibility:hidden}.slide-in-up.mui-enter.mui-enter-active{-webkit-transform:translateY(0);transform:translateY(0)}.slide-in-right.mui-enter{-webkit-transform:translateX(100%);transform:translateX(100%);transition-property:transform,opacity;backface-visibility:hidden}.slide-in-right.mui-enter.mui-enter-active{-webkit-transform:translateX(0);transform:translateX(0)}.slide-out-down.mui-leave{-webkit-transform:translateY(0);transform:translateY(0);transition-property:transform,opacity;backface-visibility:hidden}.slide-out-right.mui-leave,.slide-out-up.mui-leave{transition-property:-webkit-transform,opacity;-webkit-backface-visibility:hidden}.slide-out-down.mui-leave.mui-leave-active{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.slide-out-right.mui-leave{-webkit-transform:translateX(0);transform:translateX(0);transition-property:transform,opacity;backface-visibility:hidden}.slide-out-right.mui-leave.mui-leave-active{-webkit-transform:translateX(100%);transform:translateX(100%)}.slide-out-up.mui-leave{-webkit-transform:translateY(0);transform:translateY(0);transition-property:transform,opacity;backface-visibility:hidden}.slide-out-up.mui-leave.mui-leave-active{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.slide-out-left.mui-leave{-webkit-transform:translateX(0);transform:translateX(0);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-out-left.mui-leave.mui-leave-active{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.fade-in.mui-enter{opacity:0;transition-property:opacity}.fade-in.mui-enter.mui-enter-active{opacity:1}.fade-out.mui-leave{opacity:1;transition-property:opacity}.fade-out.mui-leave.mui-leave-active{opacity:0}.hinge-in-from-top.mui-enter{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);-webkit-transform-origin:top;transform-origin:top;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-top.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-right.mui-enter{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);-webkit-transform-origin:right;transform-origin:right;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-right.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-bottom.mui-enter{-webkit-transform:perspective(2000px) rotateX(90deg);transform:perspective(2000px) rotateX(90deg);-webkit-transform-origin:bottom;transform-origin:bottom;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-bottom.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-left.mui-enter{-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);-webkit-transform-origin:left;transform-origin:left;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-left.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-middle-x.mui-enter{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-middle-x.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-middle-y.mui-enter{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-middle-y.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-out-from-top.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:top;transform-origin:top;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-top.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}.hinge-out-from-right.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:right;transform-origin:right;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-right.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}.hinge-out-from-bottom.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:bottom;transform-origin:bottom;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-bottom.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(90deg);transform:perspective(2000px) rotateX(90deg);opacity:0}.hinge-out-from-left.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:left;transform-origin:left;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-left.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);opacity:0}.hinge-out-from-middle-x.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-middle-x.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}.hinge-out-from-middle-y.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-middle-y.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}.scale-in-up.mui-enter{-webkit-transform:scale(.5);transform:scale(.5);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.scale-in-up.mui-enter.mui-enter-active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.scale-in-down.mui-enter{-webkit-transform:scale(1.5);transform:scale(1.5);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.scale-in-down.mui-enter.mui-enter-active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.scale-out-up.mui-leave{-webkit-transform:scale(1);transform:scale(1);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.scale-out-down.mui-leave,.spin-in.mui-enter{transition-property:-webkit-transform,opacity}.scale-out-up.mui-leave.mui-leave-active{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}.scale-out-down.mui-leave{-webkit-transform:scale(1);transform:scale(1);transition-property:transform,opacity;opacity:1}.scale-out-down.mui-leave.mui-leave-active{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}.spin-in.mui-enter{-webkit-transform:rotate(-.75turn);transform:rotate(-.75turn);transition-property:transform,opacity;opacity:0}.spin-in-ccw.mui-enter,.spin-out.mui-leave{transition-property:-webkit-transform,opacity}.spin-in.mui-enter.mui-enter-active{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}.spin-out.mui-leave{-webkit-transform:rotate(0);transform:rotate(0);transition-property:transform,opacity;opacity:1}.spin-out.mui-leave.mui-leave-active{-webkit-transform:rotate(.75turn);transform:rotate(.75turn);opacity:0}.spin-in-ccw.mui-enter{-webkit-transform:rotate(.75turn);transform:rotate(.75turn);transition-property:transform,opacity;opacity:0}.spin-in-ccw.mui-enter.mui-enter-active{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}.spin-out-ccw.mui-leave{-webkit-transform:rotate(0);transform:rotate(0);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.spin-out-ccw.mui-leave.mui-leave-active{-webkit-transform:rotate(-.75turn);transform:rotate(-.75turn);opacity:0}.slow{transition-duration:750ms!important;-webkit-animation-duration:750ms!important;animation-duration:750ms!important}.fast{transition-duration:250ms!important;-webkit-animation-duration:250ms!important;animation-duration:250ms!important}.linear{transition-timing-function:linear!important;-webkit-animation-timing-function:linear!important;animation-timing-function:linear!important}.ease{transition-timing-function:ease!important;-webkit-animation-timing-function:ease!important;animation-timing-function:ease!important}.ease-in{transition-timing-function:ease-in!important;-webkit-animation-timing-function:ease-in!important;animation-timing-function:ease-in!important}.ease-out{transition-timing-function:ease-out!important;-webkit-animation-timing-function:ease-out!important;animation-timing-function:ease-out!important}.ease-in-out{transition-timing-function:ease-in-out!important;-webkit-animation-timing-function:ease-in-out!important;animation-timing-function:ease-in-out!important}.bounce-in{transition-timing-function:cubic-bezier(.485,.155,.24,1.245)!important;-webkit-animation-timing-function:cubic-bezier(.485,.155,.24,1.245)!important;animation-timing-function:cubic-bezier(.485,.155,.24,1.245)!important}.bounce-out{transition-timing-function:cubic-bezier(.485,.155,.515,.845)!important;-webkit-animation-timing-function:cubic-bezier(.485,.155,.515,.845)!important;animation-timing-function:cubic-bezier(.485,.155,.515,.845)!important}.bounce-in-out{transition-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important;-webkit-animation-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important;animation-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important}.short-delay{transition-delay:.3s!important;-webkit-animation-delay:.3s!important;animation-delay:.3s!important}.long-delay{transition-delay:.7s!important;-webkit-animation-delay:.7s!important;animation-delay:.7s!important}.shake{-webkit-animation-name:shake-7;animation-name:shake-7}@-webkit-keyframes shake-7{0%,10%,20%,30%,40%,50%,60%,70%,80%,90%{-webkit-transform:translateX(7%);transform:translateX(7%)}15%,25%,35%,45%,5%,55%,65%,75%,85%,95%{-webkit-transform:translateX(-7%);transform:translateX(-7%)}}@keyframes shake-7{0%,10%,20%,30%,40%,50%,60%,70%,80%,90%{-webkit-transform:translateX(7%);transform:translateX(7%)}15%,25%,35%,45%,5%,55%,65%,75%,85%,95%{-webkit-transform:translateX(-7%);transform:translateX(-7%)}}.spin-cw{-webkit-animation-name:spin-cw-1turn;animation-name:spin-cw-1turn}@-webkit-keyframes spin-cw-1turn{0%{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}.spin-ccw{-webkit-animation-name:spin-cw-1turn;animation-name:spin-cw-1turn}@keyframes spin-cw-1turn{0%,100%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.wiggle{-webkit-animation-name:wiggle-7deg;animation-name:wiggle-7deg}@-webkit-keyframes wiggle-7deg{40%,50%,60%{-webkit-transform:rotate(7deg);transform:rotate(7deg)}35%,45%,55%,65%{-webkit-transform:rotate(-7deg);transform:rotate(-7deg)}0%,100%,30%,70%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes wiggle-7deg{40%,50%,60%{-webkit-transform:rotate(7deg);transform:rotate(7deg)}35%,45%,55%,65%{-webkit-transform:rotate(-7deg);transform:rotate(-7deg)}0%,100%,30%,70%{-webkit-transform:rotate(0);transform:rotate(0)}}.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} \ No newline at end of file diff --git a/assets/javascript/motion-ui/motion-ui.min.js b/assets/javascript/motion-ui/motion-ui.min.js new file mode 100644 index 000000000..684755695 --- /dev/null +++ b/assets/javascript/motion-ui/motion-ui.min.js @@ -0,0 +1 @@ +!function(n,e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):n.MotionUI=e(n.jQuery)}(this,function(n){"use strict";function e(e,a,r,u){function s(){e||a.hide(),m(),u&&u.apply(a)}function m(){a[0].style.transitionDuration=0,a.removeClass(d+" "+c+" "+r)}if(a=n(a).eq(0),a.length){if(null===o)return e?a.show():a.hide(),void u();var d=e?i[0]:i[1],c=e?t[0]:t[1];m(),a.addClass(r),a.css("transition","none"),requestAnimationFrame(function(){a.addClass(d),e&&a.show()}),requestAnimationFrame(function(){a[0].offsetWidth,a.css("transition",""),a.addClass(c)}),a.one("transitionend",s)}}!function(){Date.now||(Date.now=function(){return(new Date).getTime()});for(var n=["webkit","moz"],e=0;e", + "license": "MIT", + "bugs": { + "url": "https://github.com/zurb/motion-ui/issues" + }, + "homepage": "http://zurb.com/playground/motion-ui", + "devDependencies": { + "gulp": "^3.9.0", + "gulp-autoprefixer": "^3.0.2", + "gulp-load-plugins": "^1.0.0-rc.1", + "gulp-minify-css": "^1.2.1", + "gulp-rename": "^1.2.2", + "gulp-sass": "2.1.0-beta", + "gulp-scss-lint": "^0.3.6", + "gulp-uglify": "^1.4.1", + "gulp-umd": "^0.2.0", + "handlebars": "^4.0.3", + "mocha": "^2.3.3", + "rimraf": "^2.4.3", + "run-sequence": "^1.1.4", + "sass-true": "^2.0.2", + "supercollider": "^1.0.0" + }, + "dependencies": { + "jquery": "^2.1.4" + } +} diff --git a/assets/javascript/motion-ui/transitions.md b/assets/javascript/motion-ui/transitions.md new file mode 100644 index 000000000..ab2309d24 --- /dev/null +++ b/assets/javascript/motion-ui/transitions.md @@ -0,0 +1,112 @@ +# Transitions + +Each transition has its own mixin, with multiple parameters that can customize the details of the effect. To create a transition class, just `@include` the mixin inside a class. Motion UI will create the necessary boilerplate for you. + +Here's a basic fade in class. The first parameter of every transition mixin is a *state*, which is either `in` or `out`. In transitions reveal elements, while out transitions hide them. + +```scss +.fade-in { + @include mui-fade(in); +} +``` + +Here's what the CSS looks like. + +```css +.fade-in.mui-enter { + opacity: 0; + transition-property: opacity; } + +.fade-in.mui-enter.mui-enter-active { + opacity: 1; } +``` + +The last three parameters of every transition mixin are the same: `$duration`, which sets the speed of the effect; `$timing`, which adjusts the easing; and `$delay`, which adds a delay before the effect starts. + +```scss +.fade-in { + // A long, long fade + @include mui-fade(in, $duration: 10s); +} +``` + + +## Mixins + + +### mui-fade() + +Creates a fade transition by adjusting the opacity of the element. + +**Parameters:** + +- `state` (Keyword) - State to transition to. (**Default:** in) +- `from` (Number) - Opacity to start at. Must be a number between 0 and 1. (**Default:** 0) +- `to` (Number) - Opacity to end on. (**Default:** 1) +- `duration` (Keyword) - Length (speed) of the transition. (**Default:** null) +- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null) +- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null) + + +### mui-hinge() + +Creates a hinge transition by rotating the element. + +**Parameters:** + +- `state` (Keyword) - State to transition to. (**Default:** in) +- `from` (Keyword) - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. (**Default:** left) +- `axis` (Keyword) - Axis of the element to rotate on. Can be `edge` or `center`. (**Default:** edge) +- `perspective` (Length) - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. (**Default:** 2000px) +- `turn-origin` (Keyword) - Side of the element to start the rotation from. Can be `from-back` or `from-front`. (**Default:** from-back) +- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** true) +- `duration` (Duration) - Length (speed) of the transition. (**Default:** null) +- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null) +- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null) + + +### mui-slide() + +Creates a sliding transition by translating the element horizontally or vertically. + +**Parameters:** + +- `state` (Keyword) - State to transition to. (**Default:** in) +- `direction` (Keyword) - Side of the element to slide from. Can be `top`, `right`, `bottom`, or `left`. (**Default:** left) +- `amount` (Length) - Length of the slide as a percentage value. (**Default:** 100%) +- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** false) +- `duration` (Duration) - Length (speed) of the transition. (**Default:** null) +- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null) +- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null) + + +### mui-spin() + +Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin. + +**Parameters:** + +- `state` (Keyword) - State to transition to. (**Default:** in) +- `direction` (Boolean) - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). (**Default:** cw) +- `amount` (Number) - Amount to element the element. (**Default:** 0.75turn) +- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** false) +- `duration` (Duration) - Length (speed) of the transition. (**Default:** null) +- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null) +- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null) + + +### mui-zoom() + +Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller. + +**Parameters:** + +- `state` (Keyword) - State to transition to. (**Default:** in) +- `from` (Number) - Size to start at. (**Default:** 1.5) +- `from` (Number) - Size to end at. (**Default:** 1) +- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** true) +- `duration` (Duration) - Length (speed) of the transition. (**Default:** null) +- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null) +- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null) + + diff --git a/assets/javascript/what-input/LICENSE b/assets/javascript/what-input/LICENSE new file mode 100644 index 000000000..0687432e2 --- /dev/null +++ b/assets/javascript/what-input/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2015 Jeremy Fields + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/assets/javascript/what-input/README.md b/assets/javascript/what-input/README.md new file mode 100644 index 000000000..4fd75ddf9 --- /dev/null +++ b/assets/javascript/what-input/README.md @@ -0,0 +1,149 @@ +# What Input? + +__A global utility for tracking the current input method (mouse, keyboard or touch).__ + +What Input improves on [track-focus](https://github.com/ten1seven/track-focus) by adding a data attribute on the `` instead of littering the DOM with classes on elements that have been interacted with. It also exposes a simple API that can be used for scripting interactions. + +## How it works + +What Input uses event bubbling on the `` to watch for mouse, keyboard and touch events (via `mousedown`, `keydown` and `touchstart`). It then sets or updates a `data-whatinput` on the ``. + +Since the form fields `input` and `textarea` rely on the keyboard as their only means of input, What Input _does not_ switch the input type to keyboard when typing to preserve the last detected input type. To override this behavior and allow the keyboard to be recorded, add: + +```html + +``` + +What Input also exposes a tiny API that allows the developer to ask for or set the current input. + +_What Input does not make assumptions about the input environment before the user makes their first interaction._ + +## Installing + +Download the file directly or install via Bower. + +```shell +bower install what-input +``` + +## Usage + +Include the script directly in your project. + +```html + +``` + +Or require with a script loader (What Input is AMD compatible). + +```javascript +require('what-input'); +``` + +What Input will start doing its thing while you do yours. + +### Example Styling + +```css +/** + * set a default :focus style + */ +a:focus { + outline: 3px dotted #06c; +} + +/* + * remove :focus style via What Input using progressive enhancement + * so :focus isn't left broken if JavaScript fails + */ +[data-whatinput="mouse"] a:focus, +[data-whatinput="touch"] a:focus { + outline: none; +} +``` + +### Scripting + +#### Current Input + +Ask What Input what the current input method is. This works best if asked after the events What Input is bound to (`mousedown`, `keydown` and `touchstart`). Because `click` always executes last in the event tree, What Input will be able to answer with the event that _just_ happened. + +```javascript +whatInput.ask(); // returns `mouse`, `keyboard` or `touch` + +myButton.addEventListener('click', function() { + + if (whatInput.ask() === 'mouse') { + // do mousy things + } else if (whatInput.ask() === 'keyboard') { + // do keyboard things + } + +}); +``` + +Ask What Input to return an array of all the input types that have been used _so far_. + +```javascript +whatInput.types(); // ex. returns ['mouse', 'keyboard'] +``` + +Tell What Input what's being used. This can be useful if you'd like to set an input method before the user has actually interacted with the page. What Input is not so assumptive on its own. + +```javascript +whatInput.set('hampster'); + +whatInput.ask(); // 'hampster' +``` + +#### Key Logging + +Along with tracking the use of the keyboard, What Input keeps track of the currently pressed keys and stores them in an array. Instead of returning cryptic key codes, What Input uses plain language. + +This can be used if, for example, you want to track how an element is being interacted with. + +```javascript +whatInput.keys(); // ex. returns ['shift', 'tab'] + +myMenuTab.addEventListener('keyup', function() { + + // query for the down arrow + if (whatInput.keys().indexOf('down') !== -1) { + // open the dropdown menu + } + +}); +``` + +What Input only responds to the following "action" keys: 'tab', 'enter', 'shift', 'esc', 'space', 'left', 'up', 'right' and 'down'. + +## Compatibility + +What Input works in all modern browsers. For compatibility with IE8, polyfills are required for: + +* addEventListener +* IndexOf + +Add your own, or grab the bundle included here. + +```html + +``` + +## Demo + +Check out the demo to see What Input in action. + +http://ten1seven.github.io/what-input + +## Acknowledgments + +Special thanks to [Viget](http://viget.com/) for their encouragement and commitment to open source projects. + +What Input is written and maintained by [@ten1seven](https://github.com/ten1seven). + +## License + +What Input is freely available under the [MIT License](http://opensource.org/licenses/MIT). diff --git a/assets/javascript/what-input/addEventListener.js b/assets/javascript/what-input/addEventListener.js new file mode 100644 index 000000000..f9fcbe450 --- /dev/null +++ b/assets/javascript/what-input/addEventListener.js @@ -0,0 +1,29 @@ +//addEventListener polyfill 1.0 / Eirik Backer / MIT Licence +(function(win, doc){ + if(win.addEventListener)return; //No need to polyfill + + function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}} + function addEvent(on, fn, self){ + return (self = this).attachEvent('on' + on, function(e){ + var e = e || win.event; + e.preventDefault = e.preventDefault || function(){e.returnValue = false} + e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true} + fn.call(self, e); + }); + } + function addListen(obj, i){ + if(i = obj.length)while(i--)obj[i].addEventListener = addEvent; + else obj.addEventListener = addEvent; + return obj; + } + + addListen([doc, win]); + if('Element' in win)win.Element.prototype.addEventListener = addEvent; //IE8 + else{ //IE < 8 + doc.attachEvent('onreadystatechange', function(){addListen(doc.all)}); //Make sure we also init at domReady + docHijack('getElementsByTagName'); + docHijack('getElementById'); + docHijack('createElement'); + addListen(doc.all); + } +})(window, document); diff --git a/assets/javascript/what-input/bower.json b/assets/javascript/what-input/bower.json new file mode 100644 index 000000000..62d6c5e7a --- /dev/null +++ b/assets/javascript/what-input/bower.json @@ -0,0 +1,31 @@ +{ + "name": "what-input", + "version": "1.1.2", + "homepage": "https://github.com/ten1seven/what-input", + "authors": [ + "Jeremy Fields " + ], + "description": "A global utility for tracking the current input method (mouse, keyboard or touch).", + "main": "what-input.js", + "moduleType": [ + "amd" + ], + "keywords": [ + "accessibility", + "a11y", + "input", + "javascript" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "repository": { + "type": "git", + "url": "git://github.com/ten1seven/what-input.git" + } +} diff --git a/assets/javascript/what-input/clean.js b/assets/javascript/what-input/clean.js new file mode 100644 index 000000000..b7b78892a --- /dev/null +++ b/assets/javascript/what-input/clean.js @@ -0,0 +1,13 @@ +var gulp = require('gulp'); +var del = require('del'); + + +gulp.task('clean', function () { + return del([ + './.DS_Store', + './src/.DS_Store', + './src/**/.DS_Store', + './gulpfile.js/.DS_Store', + './gulpfile.js/**/.DS_Store' + ]); +}); diff --git a/assets/javascript/what-input/demo.html b/assets/javascript/what-input/demo.html new file mode 100644 index 000000000..d0d9f70be --- /dev/null +++ b/assets/javascript/what-input/demo.html @@ -0,0 +1,159 @@ + + + + + + + + What Input? + + + + + + + + + + +
+
+

What Input?

+
+ +

A global utility for tracking the current input method (mouse, keyboard or touch).

+ +

Tab, click or tap the links and form controls to see how What Input allows them to be styled differently.

+ +
+
+ +
+
+ Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros +
+
+ +
+
+
+ + +
+
+ + +
+
+ +
+ +
+
+ +
+
+ +
+

Made with ♥ at Viget.

+
+ +
+ + + + + + diff --git a/assets/javascript/what-input/index.js b/assets/javascript/what-input/index.js new file mode 100644 index 000000000..3eaffe2c8 --- /dev/null +++ b/assets/javascript/what-input/index.js @@ -0,0 +1,4 @@ +var requireDir = require('require-dir'); + +// Require all tasks in gulpfile.js/tasks, including subfolders +requireDir('./tasks', { recurse: true }); diff --git a/assets/javascript/what-input/indexOf.js b/assets/javascript/what-input/indexOf.js new file mode 100644 index 000000000..5a516640a --- /dev/null +++ b/assets/javascript/what-input/indexOf.js @@ -0,0 +1,65 @@ +// Production steps of ECMA-262, Edition 5, 15.4.4.14 +// Reference: http://es5.github.io/#x15.4.4.14 +if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(searchElement, fromIndex) { + + var k; + + // 1. Let O be the result of calling ToObject passing + // the this value as the argument. + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get + // internal method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If len is 0, return -1. + if (len === 0) { + return -1; + } + + // 5. If argument fromIndex was passed let n be + // ToInteger(fromIndex); else let n be 0. + var n = +fromIndex || 0; + + if (Math.abs(n) === Infinity) { + n = 0; + } + + // 6. If n >= len, return -1. + if (n >= len) { + return -1; + } + + // 7. If n >= 0, then Let k be n. + // 8. Else, n<0, Let k be len - abs(n). + // If k is less than 0, then let k be 0. + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 9. Repeat, while k < len + while (k < len) { + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the + // HasProperty internal method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + // i. Let elementK be the result of calling the Get + // internal method of O with the argument ToString(k). + // ii. Let same be the result of applying the + // Strict Equality Comparison Algorithm to + // searchElement and elementK. + // iii. If same is true, return k. + if (k in O && O[k] === searchElement) { + return k; + } + k++; + } + return -1; + }; +} diff --git a/assets/javascript/what-input/lte-IE8.js b/assets/javascript/what-input/lte-IE8.js new file mode 100644 index 000000000..89d0eabdc --- /dev/null +++ b/assets/javascript/what-input/lte-IE8.js @@ -0,0 +1 @@ +!function(t,e){function n(t){var n=e[t];e[t]=function(t){return a(n(t))}}function r(e,n,r){return(r=this).attachEvent("on"+e,function(e){var e=e||t.event;e.preventDefault=e.preventDefault||function(){e.returnValue=!1},e.stopPropagation=e.stopPropagation||function(){e.cancelBubble=!0},n.call(r,e)})}function a(t,e){if(e=t.length)for(;e--;)t[e].addEventListener=r;else t.addEventListener=r;return t}t.addEventListener||(a([e,t]),"Element"in t?t.Element.prototype.addEventListener=r:(e.attachEvent("onreadystatechange",function(){a(e.all)}),n("getElementsByTagName"),n("getElementById"),n("createElement"),a(e.all)))}(window,document),Array.prototype.indexOf||(Array.prototype.indexOf=function(t,e){var n;if(null==this)throw new TypeError('"this" is null or not defined');var r=Object(this),a=r.length>>>0;if(0===a)return-1;var i=+e||0;if(Math.abs(i)===1/0&&(i=0),i>=a)return-1;for(n=Math.max(i>=0?i:a-Math.abs(i),0);a>n;){if(n in r&&r[n]===t)return n;n++}return-1}); \ No newline at end of file diff --git a/assets/javascript/what-input/package.json b/assets/javascript/what-input/package.json new file mode 100644 index 000000000..602d02986 --- /dev/null +++ b/assets/javascript/what-input/package.json @@ -0,0 +1,34 @@ +{ + "name": "what-input", + "version": "1.1.2", + "description": "A global utility for tracking the current input method (mouse, keyboard or touch).", + "main": "what-input.js", + "repository": { + "type": "git", + "url": "https://github.com/ten1seven/what-input.git" + }, + "keywords": [ + "accessibility", + "a11y", + "input", + "javascript" + ], + "author": "Jeremy Fields ", + "license": "MIT", + "bugs": { + "url": "https://github.com/ten1seven/what-input/issues" + }, + "homepage": "https://github.com/ten1seven/what-input", + "devDependencies": { + "del": "^2.0.2", + "gulp": "^3.9.0", + "gulp-concat": "^2.6.0", + "gulp-jshint": "^1.11.2", + "gulp-notify": "^2.2.0", + "gulp-plumber": "^1.0.1", + "gulp-rename": "^1.2.2", + "gulp-server-livereload": "^1.5.3", + "gulp-uglify": "^1.4.1", + "require-dir": "^0.3.0" + } +} diff --git a/assets/javascript/what-input/scripts.js b/assets/javascript/what-input/scripts.js new file mode 100644 index 000000000..f56a788e7 --- /dev/null +++ b/assets/javascript/what-input/scripts.js @@ -0,0 +1,31 @@ +var gulp = require('gulp'); +var plumber = require('gulp-plumber'); +var jshint = require('gulp-jshint'); +var notify = require('gulp-notify'); +var uglify = require('gulp-uglify'); +var rename = require('gulp-rename'); +var concat = require('gulp-concat'); + + +gulp.task('scripts-uglify', function() { + return gulp.src(['./what-input.js']) + .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) + .pipe(jshint()) + .pipe(uglify()) + .pipe(rename('what-input.min.js')) + .pipe(gulp.dest('./')) + .pipe(notify('Scripts uglify task complete')); +}); + + +gulp.task('scripts-ie8', function() { + return gulp.src(['./src/polyfills/ie8/*.js']) + .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) + .pipe(concat('lte-IE8.js')) + .pipe(uglify()) + .pipe(gulp.dest('./')) + .pipe(notify('IE8 scripts task complete')); +}); + + +gulp.task('scripts', ['scripts-uglify', 'scripts-ie8']); diff --git a/assets/javascript/what-input/serve.js b/assets/javascript/what-input/serve.js new file mode 100644 index 000000000..7488e0180 --- /dev/null +++ b/assets/javascript/what-input/serve.js @@ -0,0 +1,14 @@ +var gulp = require('gulp'); +var server = require('gulp-server-livereload'); + + +gulp.task('serve', ['clean', 'scripts'], function() { + gulp.src('./') + .pipe(server({ + defaultFile: 'demo.html', + livereload: true, + open: true + })); + + gulp.watch(['./what-input.js', './polyfills/*.js'], ['scripts']); +}); diff --git a/assets/javascript/what-input/what-input.js b/assets/javascript/what-input/what-input.js new file mode 100644 index 000000000..b1282c2a1 --- /dev/null +++ b/assets/javascript/what-input/what-input.js @@ -0,0 +1,212 @@ +;(function(root, factory) { + if (typeof define === 'function' && define.amd) { + define([], function() { + return (factory()); + }); + } else if (typeof exports === 'object') { + module.exports = factory(); + } else { + root.whatInput = factory(); + } +} (this, function() { + 'use strict'; + + + /* + --------------- + variables + --------------- + */ + + // array of actively pressed keys + var activeKeys = []; + + // cache document.body + var body = document.body; + + // boolean: true if touch buffer timer is running + var buffer = false; + + // the last used input type + var currentInput = null; + + // array of form elements that take keyboard input + var formInputs = [ + 'input', + 'select', + 'textarea' + ]; + + // user-set flag to allow typing in form fields to be recorded + var formTyping = body.hasAttribute('data-whatinput-formtyping'); + + // mapping of events to input types + var inputMap = { + 'keydown': 'keyboard', + 'mousedown': 'mouse', + 'mouseenter': 'mouse', + 'touchstart': 'touch', + 'pointerdown': 'pointer', + 'MSPointerDown': 'pointer' + }; + + // array of all used input types + var inputTypes = []; + + // mapping of key codes to common name + var keyMap = { + 9: 'tab', + 13: 'enter', + 16: 'shift', + 27: 'esc', + 32: 'space', + 37: 'left', + 38: 'up', + 39: 'right', + 40: 'down' + }; + + // map of IE 10 pointer events + var pointerMap = { + 2: 'touch', + 3: 'touch', // treat pen like touch + 4: 'mouse' + }; + + // touch buffer timer + var timer; + + + /* + --------------- + functions + --------------- + */ + + function bufferInput(event) { + clearTimeout(timer); + + setInput(event); + + buffer = true; + timer = setTimeout(function() { + buffer = false; + }, 1000); + } + + function immediateInput(event) { + if (!buffer) setInput(event); + } + + function setInput(event) { + var eventKey = key(event); + var eventTarget = target(event); + var value = inputMap[event.type]; + if (value === 'pointer') value = pointerType(event); + + if (currentInput !== value) { + if ( + // only if the user flag isn't set + !formTyping && + + // only if currentInput has a value + currentInput && + + // only if the input is `keyboard` + value === 'keyboard' && + + // not if the key is `TAB` + keyMap[eventKey] !== 'tab' && + + // only if the target is one of the elements in `formInputs` + formInputs.indexOf(eventTarget.nodeName.toLowerCase()) >= 0 + ) { + // ignore keyboard typing on form elements + } else { + currentInput = value; + body.setAttribute('data-whatinput', currentInput); + + if (inputTypes.indexOf(currentInput) === -1) inputTypes.push(currentInput); + } + } + + if (value === 'keyboard') logKeys(eventKey); + } + + function key(event) { + return (event.keyCode) ? event.keyCode : event.which; + } + + function target(event) { + return event.target || event.srcElement; + } + + function pointerType(event) { + return (typeof event.pointerType === 'number') ? pointerMap[event.pointerType] : event.pointerType; + } + + // keyboard logging + function logKeys(eventKey) { + if (activeKeys.indexOf(keyMap[eventKey]) === -1 && keyMap[eventKey]) activeKeys.push(keyMap[eventKey]); + } + + function unLogKeys(event) { + var eventKey = key(event); + var arrayPos = activeKeys.indexOf(keyMap[eventKey]); + + if (arrayPos !== -1) activeKeys.splice(arrayPos, 1); + } + + + /* + --------------- + init + --------------- + */ + + (function bindEvents() { + + // pointer/mouse + var mouseEvent = 'mousedown'; + + if (window.PointerEvent) { + mouseEvent = 'pointerdown'; + } else if (window.MSPointerEvent) { + mouseEvent = 'MSPointerDown'; + } + + body.addEventListener(mouseEvent, immediateInput); + body.addEventListener('mouseenter', immediateInput); + + // touch + if ('ontouchstart' in document.documentElement) body.addEventListener('touchstart', bufferInput); + + // keyboard + body.addEventListener('keydown', immediateInput); + body.addEventListener('keyup', unLogKeys); + + })(); + + + /* + --------------- + api + --------------- + */ + + return { + + // returns string: the current input type + ask: function() { return currentInput; }, + + // returns array: currently pressed keys + keys: function() { return activeKeys; }, + + // returns array: all the detected input types + types: function() { return inputTypes; }, + + // accepts string: manually set the input type + set: setInput + }; + +})); diff --git a/assets/javascript/what-input/what-input.min.js b/assets/javascript/what-input/what-input.min.js new file mode 100644 index 000000000..c03b8167f --- /dev/null +++ b/assets/javascript/what-input/what-input.min.js @@ -0,0 +1 @@ +!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t()}):"object"==typeof exports?module.exports=t():e.whatInput=t()}(this,function(){"use strict";function e(e){clearTimeout(s),n(e),f=!0,s=setTimeout(function(){f=!1},1e3)}function t(e){f||n(e)}function n(e){var t=o(e),n=r(e),d=w[e.type];"pointer"===d&&(d=i(e)),p!==d&&(!y&&p&&"keyboard"===d&&"tab"!==v[t]&&m.indexOf(n.nodeName.toLowerCase())>=0||(p=d,a.setAttribute("data-whatinput",p),-1===h.indexOf(p)&&h.push(p))),"keyboard"===d&&u(t)}function o(e){return e.keyCode?e.keyCode:e.which}function r(e){return e.target||e.srcElement}function i(e){return"number"==typeof e.pointerType?b[e.pointerType]:e.pointerType}function u(e){-1===c.indexOf(v[e])&&v[e]&&c.push(v[e])}function d(e){var t=o(e),n=c.indexOf(v[t]);-1!==n&&c.splice(n,1)}var s,c=[],a=document.body,f=!1,p=null,m=["input","select","textarea"],y=a.hasAttribute("data-whatinput-formtyping"),w={keydown:"keyboard",mousedown:"mouse",mouseenter:"mouse",touchstart:"touch",pointerdown:"pointer",MSPointerDown:"pointer"},h=[],v={9:"tab",13:"enter",16:"shift",27:"esc",32:"space",37:"left",38:"up",39:"right",40:"down"},b={2:"touch",3:"touch",4:"mouse"};return function(){var n="mousedown";window.PointerEvent?n="pointerdown":window.MSPointerEvent&&(n="MSPointerDown"),a.addEventListener(n,t),a.addEventListener("mouseenter",t),"ontouchstart"in document.documentElement&&a.addEventListener("touchstart",e),a.addEventListener("keydown",t),a.addEventListener("keyup",d)}(),{ask:function(){return p},keys:function(){return c},types:function(){return h},set:n}}); \ No newline at end of file From 39de802e5a0b018dfab2b088f66b4cfa3e866519 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Fri, 20 Nov 2015 23:31:09 +0100 Subject: [PATCH 07/65] Remove misc errors --- assets/scss/config/_settings.scss | 2 +- assets/scss/config/_wp-overrides.scss | 2 +- assets/scss/foundation.scss | 72 --------------------------- 3 files changed, 2 insertions(+), 74 deletions(-) diff --git a/assets/scss/config/_settings.scss b/assets/scss/config/_settings.scss index af876c166..1c0de65d2 100755 --- a/assets/scss/config/_settings.scss +++ b/assets/scss/config/_settings.scss @@ -38,7 +38,7 @@ // 33. Tooltip // 34. Top Bar -@import '../components/foundation-sites/scss/util/util'; +@import '../../components/foundation-sites/scss/util/util'; // 1. Global // --------- diff --git a/assets/scss/config/_wp-overrides.scss b/assets/scss/config/_wp-overrides.scss index 16cd81c3a..c2ba87fc1 100755 --- a/assets/scss/config/_wp-overrides.scss +++ b/assets/scss/config/_wp-overrides.scss @@ -8,6 +8,6 @@ p.wp-caption-text{ font-size:90%; - color: $charcoal; + color: #666; padding:rem-calc(10) 0; } diff --git a/assets/scss/foundation.scss b/assets/scss/foundation.scss index 018b684b5..adeb6cf7c 100755 --- a/assets/scss/foundation.scss +++ b/assets/scss/foundation.scss @@ -96,78 +96,6 @@ @include foundation-top-bar; } -// Foundation 6 components -@import "../components/foundation-sites/scss/foundation/components/accordion-menu"; -@import "../components/foundation-sites/scss/foundation/components/accordion"; -@import "../components/foundation-sites/scss/foundation/components/badge"; -@import "../components/foundation-sites/scss/foundation/components/breadcrumbs"; -@import "../components/foundation-sites/scss/foundation/components/button-group"; -@import "../components/foundation-sites/scss/foundation/components/button"; -@import "../components/foundation-sites/scss/foundation/components/callout"; -@import "../components/foundation-sites/scss/foundation/components/close-button"; -@import "../components/foundation-sites/scss/foundation/components/drilldown"; -@import "../components/foundation-sites/scss/foundation/components/dropdown-menu"; -@import "../components/foundation-sites/scss/foundation/components/dropdown"; -@import "../components/foundation-sites/scss/foundation/components/flex-video"; -@import "../components/foundation-sites/scss/foundation/components/float"; -@import "../components/foundation-sites/scss/foundation/components/label"; -@import "../components/foundation-sites/scss/foundation/components/media-object"; -@import "../components/foundation-sites/scss/foundation/components/menu"; -@import "../components/foundation-sites/scss/foundation/components/off-canvas"; -@import "../components/foundation-sites/scss/foundation/components/orbit"; -@import "../components/foundation-sites/scss/foundation/components/pagination"; -@import "../components/foundation-sites/scss/foundation/components/progress-bar"; -@import "../components/foundation-sites/scss/foundation/components/reveal"; -@import "../components/foundation-sites/scss/foundation/components/slider"; -@import "../components/foundation-sites/scss/foundation/components/sticky"; -@import "../components/foundation-sites/scss/foundation/components/switch"; -@import "../components/foundation-sites/scss/foundation/components/table"; -@import "../components/foundation-sites/scss/foundation/components/tabs"; -@import "../components/foundation-sites/scss/foundation/components/thumbnail"; -@import "../components/foundation-sites/scss/foundation/components/title-bar"; -@import "../components/foundation-sites/scss/foundation/components/tooltip"; -@import "../components/foundation-sites/scss/foundation/components/top-bar"; -@import "../components/foundation-sites/scss/foundation/components/visibility"; - -// Foundation 6 forms -@import "../components/foundation-sites/scss/foundation/forms/checkbox"; -@import "../components/foundation-sites/scss/foundation/forms/error"; -@import "../components/foundation-sites/scss/foundation/forms/fieldset"; -@import "../components/foundation-sites/scss/foundation/forms/forms"; -@import "../components/foundation-sites/scss/foundation/forms/help-text"; -@import "../components/foundation-sites/scss/foundation/forms/input-group"; -@import "../components/foundation-sites/scss/foundation/forms/label"; -@import "../components/foundation-sites/scss/foundation/forms/select"; -@import "../components/foundation-sites/scss/foundation/forms/text"; - -// Foundation 6 grid -@import "../components/foundation-sites/scss/foundation/grid/classes"; -@import "../components/foundation-sites/scss/foundation/grid/column"; -@import "../components/foundation-sites/scss/foundation/grid/flex-grid"; -@import "../components/foundation-sites/scss/foundation/grid/grid"; -@import "../components/foundation-sites/scss/foundation/grid/gutter"; -@import "../components/foundation-sites/scss/foundation/grid/layout"; -@import "../components/foundation-sites/scss/foundation/grid/position"; -@import "../components/foundation-sites/scss/foundation/grid/row"; -@import "../components/foundation-sites/scss/foundation/grid/size"; - -// Foundation 6 typography -@import "../components/foundation-sites/scss/foundation/typography/alignment"; -@import "../components/foundation-sites/scss/foundation/typography/base"; -@import "../components/foundation-sites/scss/foundation/typography/helpers"; -@import "../components/foundation-sites/scss/foundation/typography/print"; -@import "../components/foundation-sites/scss/foundation/typography/typography"; - -// Foundation 6 util -@import "../components/foundation-sites/scss/foundation/util/breakpoint"; -@import "../components/foundation-sites/scss/foundation/util/color"; -@import "../components/foundation-sites/scss/foundation/util/mixins"; -@import "../components/foundation-sites/scss/foundation/util/selector"; -@import "../components/foundation-sites/scss/foundation/util/unit"; -@import "../components/foundation-sites/scss/foundation/util/util"; -@import "../components/foundation-sites/scss/foundation/util/value"; - - // Settings and wp-override styles: @import "config/settings"; // Default settings file. Uncomment each setting you need to change @import "config/wp-overrides"; // Override the default WordPress styling for some elements From 257118b6ea0d4771c17bcd3b7e9425125d769efe Mon Sep 17 00:00:00 2001 From: olefredrik Date: Fri, 20 Nov 2015 23:36:23 +0100 Subject: [PATCH 08/65] Eureka. It is compiling with no errors --- assets/scss/site/_featured.scss | 4 ++-- assets/scss/site/_front.scss | 4 ++-- assets/scss/site/_topbar.scss | 2 ++ 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/assets/scss/site/_featured.scss b/assets/scss/site/_featured.scss index f7cb787de..d51b27650 100755 --- a/assets/scss/site/_featured.scss +++ b/assets/scss/site/_featured.scss @@ -1,4 +1,4 @@ -@media #{$small-up} { +@include breakpoint(small) { #featured-hero { background-size: cover; background-position: center; @@ -13,7 +13,7 @@ } } -@media #{$medium-up} { +@include breakpoint(medium) { #featured-hero { height: rem-calc(400); } diff --git a/assets/scss/site/_front.scss b/assets/scss/site/_front.scss index 09a2c5ea0..611ca517c 100755 --- a/assets/scss/site/_front.scss +++ b/assets/scss/site/_front.scss @@ -4,7 +4,7 @@ @include grid-row(); } - @media #{$small-up} { + @include breakpoint(small) { background: url("../images/demo/marquee-stars.svg") repeat scroll 0 0 #074E68; padding: rem-calc(65%) 0; margin: - rem-calc(32) 0 rem-calc(32); @@ -12,7 +12,7 @@ text-align: left; } - @media #{$medium-up} { + @include breakpoint(medium) { height: rem-calc(400); margin: - rem-calc(32) 0 rem-calc(72); } diff --git a/assets/scss/site/_topbar.scss b/assets/scss/site/_topbar.scss index 862ac6232..016a71cf2 100755 --- a/assets/scss/site/_topbar.scss +++ b/assets/scss/site/_topbar.scss @@ -1,3 +1,5 @@ +$topbar-breakpoint: em-calc(820); + // Add some whitespace between top bar and content .top-bar-container, .tab-bar { margin-bottom: rem-calc(32); From 0d7753609090feb5f0c978283f4f3cb1503c7a49 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Fri, 20 Nov 2015 23:58:02 +0100 Subject: [PATCH 09/65] Correct paths in scss. Add motion-ui to devDependencies --- assets/scss/foundation.scss | 3 +++ package.json | 1 + 2 files changed, 4 insertions(+) diff --git a/assets/scss/foundation.scss b/assets/scss/foundation.scss index adeb6cf7c..f42361e5e 100755 --- a/assets/scss/foundation.scss +++ b/assets/scss/foundation.scss @@ -96,6 +96,9 @@ @include foundation-top-bar; } +// Include all foundation components +@include foundation-everything; + // Settings and wp-override styles: @import "config/settings"; // Default settings file. Uncomment each setting you need to change @import "config/wp-overrides"; // Override the default WordPress styling for some elements diff --git a/package.json b/package.json index 8a059a5ad..c7257d9a0 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "autoprefixer": "^6.1.0", "bower": "~1.6.4", "cssnano": "^3.3.2", + "motion-ui": "^1.1.0", "grunt": "~0.4.5", "grunt-browser-sync": "^2.1.3", "grunt-cli": "^0.1.13", From 01a8e2af20fafc63c716f078a1acd62f974db250 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 21 Nov 2015 00:35:22 +0100 Subject: [PATCH 10/65] Update scripts --- Gruntfile.js | 36 +- assets/javascript/custom/init-foundation.js | 2 +- assets/javascript/foundation.bak.js | 3 + assets/javascript/motion-ui/LICENSE | 22 - assets/javascript/motion-ui/README.md | 28 - assets/javascript/motion-ui/_animation.scss | 7 - assets/javascript/motion-ui/_args.scss | 15 - assets/javascript/motion-ui/_classes.scss | 102 ---- assets/javascript/motion-ui/_fade.scss | 28 - assets/javascript/motion-ui/_hinge.scss | 43 -- assets/javascript/motion-ui/_keyframe.scss | 136 ----- assets/javascript/motion-ui/_selector.scss | 23 - assets/javascript/motion-ui/_series.scss | 54 -- assets/javascript/motion-ui/_settings.scss | 61 -- assets/javascript/motion-ui/_shake.scss | 15 - assets/javascript/motion-ui/_slide.scss | 42 -- assets/javascript/motion-ui/_spin.scss | 39 -- assets/javascript/motion-ui/_transition.scss | 45 -- assets/javascript/motion-ui/_unit.scss | 7 - assets/javascript/motion-ui/_wiggle.scss | 13 - assets/javascript/motion-ui/_zoom.scss | 39 -- assets/javascript/motion-ui/animations.md | 226 -------- assets/javascript/motion-ui/bower.json | 28 - assets/javascript/motion-ui/classes.md | 81 --- assets/javascript/motion-ui/configuration.md | 63 -- assets/javascript/motion-ui/gulpfile.js | 90 --- assets/javascript/motion-ui/handlebars.js | 8 - assets/javascript/motion-ui/installation.md | 50 -- assets/javascript/motion-ui/javascript.md | 36 -- assets/javascript/motion-ui/motion-ui.css | 543 ------------------ assets/javascript/motion-ui/motion-ui.js | 105 ---- assets/javascript/motion-ui/motion-ui.min.css | 1 - assets/javascript/motion-ui/motion-ui.min.js | 1 - assets/javascript/motion-ui/motion-ui.scss | 29 - assets/javascript/motion-ui/package.json | 44 -- assets/javascript/motion-ui/transitions.md | 112 ---- assets/javascript/what-input/LICENSE | 22 - assets/javascript/what-input/README.md | 149 ----- .../javascript/what-input/addEventListener.js | 29 - assets/javascript/what-input/bower.json | 31 - assets/javascript/what-input/clean.js | 13 - assets/javascript/what-input/demo.html | 159 ----- assets/javascript/what-input/index.js | 4 - assets/javascript/what-input/indexOf.js | 65 --- assets/javascript/what-input/lte-IE8.js | 1 - assets/javascript/what-input/package.json | 34 -- assets/javascript/what-input/scripts.js | 31 - assets/javascript/what-input/serve.js | 14 - assets/javascript/what-input/what-input.js | 212 ------- .../javascript/what-input/what-input.min.js | 1 - library/enqueue-scripts.php | 5 +- 51 files changed, 30 insertions(+), 2917 deletions(-) create mode 100644 assets/javascript/foundation.bak.js delete mode 100644 assets/javascript/motion-ui/LICENSE delete mode 100644 assets/javascript/motion-ui/README.md delete mode 100644 assets/javascript/motion-ui/_animation.scss delete mode 100644 assets/javascript/motion-ui/_args.scss delete mode 100644 assets/javascript/motion-ui/_classes.scss delete mode 100644 assets/javascript/motion-ui/_fade.scss delete mode 100644 assets/javascript/motion-ui/_hinge.scss delete mode 100644 assets/javascript/motion-ui/_keyframe.scss delete mode 100644 assets/javascript/motion-ui/_selector.scss delete mode 100644 assets/javascript/motion-ui/_series.scss delete mode 100644 assets/javascript/motion-ui/_settings.scss delete mode 100644 assets/javascript/motion-ui/_shake.scss delete mode 100644 assets/javascript/motion-ui/_slide.scss delete mode 100644 assets/javascript/motion-ui/_spin.scss delete mode 100644 assets/javascript/motion-ui/_transition.scss delete mode 100644 assets/javascript/motion-ui/_unit.scss delete mode 100644 assets/javascript/motion-ui/_wiggle.scss delete mode 100644 assets/javascript/motion-ui/_zoom.scss delete mode 100644 assets/javascript/motion-ui/animations.md delete mode 100644 assets/javascript/motion-ui/bower.json delete mode 100644 assets/javascript/motion-ui/classes.md delete mode 100644 assets/javascript/motion-ui/configuration.md delete mode 100644 assets/javascript/motion-ui/gulpfile.js delete mode 100644 assets/javascript/motion-ui/handlebars.js delete mode 100644 assets/javascript/motion-ui/installation.md delete mode 100644 assets/javascript/motion-ui/javascript.md delete mode 100644 assets/javascript/motion-ui/motion-ui.css delete mode 100644 assets/javascript/motion-ui/motion-ui.js delete mode 100644 assets/javascript/motion-ui/motion-ui.min.css delete mode 100644 assets/javascript/motion-ui/motion-ui.min.js delete mode 100644 assets/javascript/motion-ui/motion-ui.scss delete mode 100644 assets/javascript/motion-ui/package.json delete mode 100644 assets/javascript/motion-ui/transitions.md delete mode 100644 assets/javascript/what-input/LICENSE delete mode 100644 assets/javascript/what-input/README.md delete mode 100644 assets/javascript/what-input/addEventListener.js delete mode 100644 assets/javascript/what-input/bower.json delete mode 100644 assets/javascript/what-input/clean.js delete mode 100644 assets/javascript/what-input/demo.html delete mode 100644 assets/javascript/what-input/index.js delete mode 100644 assets/javascript/what-input/indexOf.js delete mode 100644 assets/javascript/what-input/lte-IE8.js delete mode 100644 assets/javascript/what-input/package.json delete mode 100644 assets/javascript/what-input/scripts.js delete mode 100644 assets/javascript/what-input/serve.js delete mode 100644 assets/javascript/what-input/what-input.js delete mode 100644 assets/javascript/what-input/what-input.min.js diff --git a/Gruntfile.js b/Gruntfile.js index 5bc111877..5972749de 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -52,12 +52,20 @@ module.exports = function (grunt) { copy: { + modernizr: { + expand: true, + cwd: 'assets/components/modernizr/', + src: '**', + flatten: 'true', + dest: 'assets/javascript/vendor/modernizr/' + }, + motionUi: { expand: true, cwd: 'assets/components/motion-ui/', src: '**', flatten: 'true', - dest: 'assets/javascript/motion-ui/' + dest: 'assets/javascript/vendor/motion-ui/' }, whatInput: { @@ -65,7 +73,7 @@ module.exports = function (grunt) { cwd: 'assets/components/what-input/', src: '**', flatten: 'true', - dest: 'assets/javascript/what-input/' + dest: 'assets/javascript/vendor/what-input/' }, iconfonts: { @@ -107,10 +115,21 @@ module.exports = function (grunt) { src: [ + /* // Foundation core 'assets/components/foundation-sites/js/foundation-core.js', - // Pick the components you need in your project + // Foundation utils + 'assets/components/foundation-sites/js/foundation.util.box.js', + 'assets/components/foundation-sites/js/foundation.util.keyboard.js', + 'assets/components/foundation-sites/js/foundation.util.mediaQuery.js', + 'assets/components/foundation-sites/js/foundation.util.motion.js', + 'assets/components/foundation-sites/js/foundation.util.nest.js', + 'assets/components/foundation-sites/js/foundation.util.timerAndImageLoader.js', + 'assets/components/foundation-sites/js/foundation.util.touch.js', + 'assets/components/foundation-sites/js/foundation.util.triggers.js', + + // Foundation components -> Comment out the components you don't need in your project 'assets/components/foundation-sites/js/foundation.abide.js', 'assets/components/foundation-sites/js/foundation.accordion.js', 'assets/components/foundation-sites/js/foundation.accordionMenu.js', @@ -130,17 +149,12 @@ module.exports = function (grunt) { 'assets/components/foundation-sites/js/foundation.tabs.js', 'assets/components/foundation-sites/js/foundation.toggler.js', 'assets/components/foundation-sites/js/foundation.tooltip.js', - 'assets/components/foundation-sites/js/foundation.util.box.js', - 'assets/components/foundation-sites/js/foundation.util.keyboard.js', - 'assets/components/foundation-sites/js/foundation.util.mediaQuery.js', - 'assets/components/foundation-sites/js/foundation.util.motion.js', - 'assets/components/foundation-sites/js/foundation.util.nest.js', - 'assets/components/foundation-sites/js/foundation.util.timerAndImageLoader.js', - 'assets/components/foundation-sites/js/foundation.util.touch.js', - 'assets/components/foundation-sites/js/foundation.util.triggers.js', // Motion UI 'assets/components/foundation-sites/js/motion-ui.js', + */ + + 'assets/components/foundation-sites/dist/foundation.js', // Include your own custom scripts (located in the custom folder) 'assets/javascript/custom/*.js' diff --git a/assets/javascript/custom/init-foundation.js b/assets/javascript/custom/init-foundation.js index cb75a44ff..de0f51d52 100755 --- a/assets/javascript/custom/init-foundation.js +++ b/assets/javascript/custom/init-foundation.js @@ -1 +1 @@ -jQuery(document).foundation(); \ No newline at end of file +jQuery(document).foundation(); diff --git a/assets/javascript/foundation.bak.js b/assets/javascript/foundation.bak.js new file mode 100644 index 000000000..5d75a478b --- /dev/null +++ b/assets/javascript/foundation.bak.js @@ -0,0 +1,3 @@ +!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=b.extend({},c.defaults,this.$element.data(),e),this.$window=b(window),this.name="Abide",this.attr="data-abide",this._init(),this._events(),a.registerPlugin(this)}c.defaults={validateOn:"fieldChange",labelErrorClass:"is-invalid-label",inputErrorClass:"is-invalid-input",formErrorSelector:".form-error",formErrorClass:"is-visible",patterns:{alpha:/^[a-zA-Z]+$/,alpha_numeric:/^[a-zA-Z0-9]+$/,integer:/^[-+]?\d+$/,number:/^[-+]?\d*(?:[\.\,]\d+)?$/,card:/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,cvv:/^([0-9]){3,4}$/,email:/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,url:/^(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,domain:/^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,datetime:/^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,date:/(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,time:/^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,dateISO:/^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,month_day_year:/^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,day_month_year:/^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,color:/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/},validators:{equalTo:function(a,b,c){var d=document.getElementById(a.getAttribute(this.add_namespace("data-equalto"))).value,e=a.value,f=d===e;return f}}},c.prototype._init=function(){},c.prototype._events=function(){var a=this;this.$element.off(".abide").on("reset.fndtn.abide",function(c){a.resetForm(b(this))}).on("submit.fndtn.abide",function(b){b.preventDefault(),a.validateForm(a.$element)}).find("input, textarea, select").off(".abide").on("blur.fndtn.abide change.fndtn.abide",function(c){"fieldChange"===a.options.validateOn&&a.validateInput(b(c.target),a.$element)}).on("keydown.fndtn.abide",function(a){})},c.prototype._reflow=function(){},c.prototype.requiredCheck=function(a){switch(a[0].type){case"text":return a.attr("required")&&!a.val()?!1:!0;case"checkbox":return a.attr("required")&&!a.is(":checked")?!1:!0;case"radio":return a.attr("required")&&!a.is(":checked")?!1:!0;default:return!a.attr("required")||a.val()&&a.val().length&&!a.is(":empty")?!0:!1}},c.prototype.findLabel=function(a){return a.next("label").length?a.next("label"):a.closest("label")},c.prototype.addErrorClasses=function(a){var b=this,c=b.findLabel(a),d=a.next(b.options.formErrorSelector)||a.find(b.options.formErrorSelector);c&&c.addClass(b.options.labelErrorClass),d&&d.addClass(b.options.formErrorClass),a.addClass(b.options.inputErrorClass)},c.prototype.removeErrorClasses=function(a){var b=this,c=b.findLabel(a),d=a.next(b.options.formErrorSelector)||a.find(b.options.formErrorSelector);c&&c.hasClass(b.options.labelErrorClass)&&c.removeClass(b.options.labelErrorClass),d&&d.hasClass(b.options.formErrorClass)&&d.removeClass(b.options.formErrorClass),a.hasClass(b.options.inputErrorClass)&&a.removeClass(b.options.inputErrorClass)},c.prototype.validateInput=function(a,c){var d,e,f=this;c.find('input[type="text"]'),c.find('input[type="checkbox"]');"text"===a[0].type?f.requiredCheck(a)&&f.validateText(a)?(f.removeErrorClasses(a),a.trigger("valid.fndtn.abide",a[0])):(f.addErrorClasses(a),a.trigger("invalid.fndtn.abide",a[0])):"radio"===a[0].type?(e=a.attr("name"),d=a.siblings("label"),f.validateRadio(e)?(b(d).each(function(){b(this).hasClass(f.options.labelErrorClass)&&b(this).removeClass(f.options.labelErrorClass)}),a.trigger("valid.fndtn.abide",a[0])):(b(d).each(function(){b(this).addClass(f.options.labelErrorClass)}),a.trigger("invalid.fndtn.abide",a[0]))):"checkbox"===a[0].type?f.requiredCheck(a)?(f.removeErrorClasses(a),a.trigger("valid.fndtn.abide",a[0])):(f.addErrorClasses(a),a.trigger("invalid.fndtn.abide",a[0])):f.requiredCheck(a)&&f.validateText(a)?(f.removeErrorClasses(a),a.trigger("valid.fndtn.abide",a[0])):(f.addErrorClasses(a),a.trigger("invalid.fndtn.abide",a[0]))},c.prototype.validateForm=function(a){for(var c=this,d=a.find("input"),e=a.find("input").length,f=0;e>f;)c.validateInput(b(d[f]),a),f++;a.find(".form-error.is-visible").length||a.find(".is-invalid-label").length?a.find("[data-abide-error]").css("display","block"):a.find("[data-abide-error]").css("display","none")},c.prototype.validateText=function(a){var c=this.options.patterns,d=b(a).val(),e=b(a).attr("pattern");return 0===d.length?!0:d.match(c[e])?!0:!1},c.prototype.validateRadio=function(a){var c=this,d=(b(':radio[name="'+a+'"]').siblings("label"),0);return b(':radio[name="'+a+'"]').each(function(){c.requiredCheck(b(this))||d++,b(this).is(":checked")&&(d=0)}),d>0?!1:!0},c.prototype.matchValidation=function(a,b){},c.prototype.resetForm=function(a){var c=this,d="data-invalid";b("["+c.invalidAttr+"]",a).removeAttr(d),b("."+c.options.labelErrorClass,a).not("small").removeClass(c.options.labelErrorClass),b("."+c.options.inputErrorClass,a).not("small").removeClass(c.options.inputErrorClass),b(".form-error.is-visible").removeClass("is-visible"),a.find("[data-abide-error]").css("display","none"),b(":input",a).not(":button, :submit, :reset, :hidden, [data-abide-ignore]").val("").removeAttr(d)},c.prototype.destroy=function(){},a.plugin(c,"Abide"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=c),"function"==typeof define&&define(["foundation"],function(){return c})}(Foundation,jQuery),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this),b.Keyboard.register("Accordion",{ENTER:"toggle",SPACE:"toggle",ARROW_DOWN:"next",ARROW_UP:"previous"})}c.defaults={slideSpeed:250,multiExpand:!1,allowAllClosed:!1},c.prototype._init=function(){this.$element.attr("role","tablist"),this.$tabs=this.$element.children("li"),this.$tabs.each(function(c,d){var e=a(d),f=e.find("[data-tab-content]"),g=f[0].id||b.GetYoDigits(6,"accordion"),h=d.id||g+"-label";e.find("a:first").attr({"aria-controls":g,role:"tab",id:h,"aria-expanded":!1,"aria-selected":!1}),f.attr({role:"tabpanel","aria-labelledby":h,"aria-hidden":!0,id:g})});var c=this.$element.find(".is-active").children("[data-tab-content]");c.length&&this.down(c,!0),this._events()},c.prototype._events=function(){var c=this;this.$tabs.each(function(){var d=a(this),e=d.children("[data-tab-content]");e.length&&d.children("a").off("click.zf.accordion keydown.zf.accordion").on("click.zf.accordion",function(a){a.preventDefault(),d.hasClass("is-active")?(c.options.allowAllClosed||d.siblings().hasClass("is-active"))&&c.up(e):c.down(e)}).on("keydown.zf.accordion",function(a){b.Keyboard.handleKey(a,c,{toggle:function(){c.toggle(e)},next:function(){d.next().find("a").focus().trigger("click.zf.accordion")},previous:function(){d.prev().find("a").focus().trigger("click.zf.accordion")},handled:function(){a.preventDefault(),a.stopPropagation()}})})})},c.prototype.toggle=function(a){if(a.parent().hasClass("is-active")){if(!this.options.allowAllClosed&&!a.parent().siblings().hasClass("is-active"))return;this.up(a)}else this.down(a)},c.prototype.down=function(c,d){var e=this;if(!this.options.multiExpand&&!d){var f=this.$element.find(".is-active").children("[data-tab-content]");f.length&&this.up(f)}c.attr("aria-hidden",!1).parent("[data-tab-content]").addBack().parent().addClass("is-active"),b.Move(e.options.slideSpeed,c,function(){c.slideDown(e.options.slideSpeed)}),d||b._reflow(this.$element.attr("data-accordion")),a("#"+c.attr("aria-labelledby")).attr({"aria-expanded":!0,"aria-selected":!0}),this.$element.trigger("down.zf.accordion",[c])},c.prototype.up=function(c){var d=c.parent().siblings(),e=this,f=this.options.multiExpand?d.hasClass("is-active"):c.parent().hasClass("is-active");(this.options.allowAllClosed||f)&&(b.Move(this.options.slideSpeed,c,function(){c.slideUp(e.options.slideSpeed)}),c.attr("aria-hidden",!0).parent().removeClass("is-active"),a("#"+c.attr("aria-labelledby")).attr({"aria-expanded":!1,"aria-selected":!1}),this.$element.trigger("up.zf.accordion",[c]))},c.prototype.destroy=function(){this.$element.find("[data-tab-content]").slideUp(0).css("display",""),this.$element.find("a").off(".zf.accordion"),b.unregisterPlugin(this)},b.plugin(c,"Accordion")}(jQuery,window.Foundation),!function(a){"use strict";function b(c,d){this.$element=c,this.options=a.extend({},b.defaults,this.$element.data(),d),Foundation.Nest.Feather(this.$element,"accordion"),this._init(),Foundation.registerPlugin(this),Foundation.Keyboard.register("AccordionMenu",{ENTER:"toggle",SPACE:"toggle",ARROW_RIGHT:"open",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"close",ESCAPE:"closeAll",TAB:"down",SHIFT_TAB:"up"})}b.defaults={slideSpeed:250,multiOpen:!0},b.prototype._init=function(){this.$element.find("[data-submenu]").not(".is-active").slideUp(0),this.$element.attr({role:"tablist","aria-multiselectable":this.options.multiOpen}),this.$menuLinks=this.$element.find(".has-submenu"),this.$menuLinks.each(function(){var b=this.id||Foundation.GetYoDigits(6,"acc-menu-link"),c=a(this),d=c.children("[data-submenu]"),e=d[0].id||Foundation.GetYoDigits(6,"acc-menu"),f=d.hasClass("is-active");c.attr({"aria-controls":e,"aria-expanded":f,"aria-selected":!1,role:"tab",id:b}),d.attr({"aria-labelledby":b,"aria-hidden":!f,role:"tabpanel",id:e})});var b=this.$element.find(".is-active");if(b.length){var c=this;b.each(function(){c.down(a(this))})}this._events()},b.prototype._events=function(){var b=this;this.$element.find("li").each(function(){var c=a(this).children("[data-submenu]");c.length&&a(this).children("a").off("click.zf.accordionmenu").on("click.zf.accordionmenu",function(a){a.preventDefault(),b.toggle(c)})}).on("keydown.zf.accordionmenu",function(c){var d,e,f=a(this),g=f.parent("ul").children("li"),h=f.children("[data-submenu]");g.each(function(b){return a(this).is(f)?(d=g.eq(Math.max(0,b-1)),e=g.eq(Math.min(b+1,g.length-1)),a(this).children("[data-submenu]:visible").length&&(e=f.find("li:first-child")),a(this).is(":first-child")?d=f.parents("li").first():d.children("[data-submenu]:visible").length&&(d=d.find("li:last-child")),void(a(this).is(":last-child")&&(e=f.parents("li").first().next("li")))):void 0}),Foundation.Keyboard.handleKey(c,b,{open:function(){h.is(":hidden")&&(b.down(h),h.find("li").first().focus())},close:function(){h.length&&!h.is(":hidden")?b.up(h):f.parent("[data-submenu]").length&&(b.up(f.parent("[data-submenu]")),f.parents("li").first().focus())},up:function(){d.focus()},down:function(){e.focus()},toggle:function(){f.children("[data-submenu]").length&&b.toggle(f.children("[data-submenu]"))},closeAll:function(){b.hideAll()},handled:function(){c.preventDefault(),c.stopImmediatePropagation()}})})},b.prototype.hideAll=function(){this.$element.find("[data-submenu]").slideUp(this.options.slideSpeed)},b.prototype.toggle=function(a){a.is(":hidden")?this.down(a):this.up(a)},b.prototype.down=function(a){var b=this;console.log(a),this.options.multiOpen||this.up(this.$element.find(".is-active").not(a.parentsUntil(this.$element))),a.addClass("is-active").attr({"aria-hidden":!1}).parent(".has-submenu").attr({"aria-expanded":!0,"aria-selected":!0}),Foundation.Move(this.options.slideSpeed,a,function(){a.slideDown(b.options.slideSpeed)}),this.$element.trigger("down.zf.accordionMenu",[a])},b.prototype.up=function(a){var b=this;Foundation.Move(this.options.slideSpeed,a,function(){a.slideUp(b.options.slideSpeed)}),a.attr("aria-hidden",!0).find("[data-submenu]").slideUp(0).attr("aria-hidden",!0).end().parent(".has-submenu").attr({"aria-expanded":!1,"aria-selected":!1}),this.$element.trigger("up.zf.accordionMenu",[a])},b.prototype.destroy=function(){this.$element.find("[data-submenu]").slideDown(0).css("display",""),this.$element.find("a").off("click.zf.accordionMenu"),Foundation.Nest.Burn(this.$element,"accordion"),Foundation.unregisterPlugin(this)},Foundation.plugin(b,"AccordionMenu")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),b.Nest.Feather(this.$element,"drilldown"),this._init(),b.registerPlugin(this),b.Keyboard.register("Drilldown",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"previous",ESCAPE:"close",TAB:"down",SHIFT_TAB:"up"})}c.defaults={backButton:'
  • Back
    • ',wrapper:"
    ",closeOnClick:!1},c.prototype._init=function(){this.$submenuAnchors=this.$element.find("li.has-submenu"),this.$submenus=this.$submenuAnchors.children("[data-submenu]").addClass("is-drilldown-sub"),this.$menuItems=this.$element.find("li").not(".js-drilldown-back").attr("role","menuitem"),this._prepareMenu(),this._keyboardEvents()},c.prototype._prepareMenu=function(){var b=this;this.$submenuAnchors.each(function(){var c=a(this);c.find("a")[0].removeAttribute("href"),c.children("[data-submenu]").attr({"aria-hidden":!0,tabindex:0,role:"menu"}),b._events(c)}),this.$submenus.each(function(){var c=a(this),d=c.find(".js-drilldown-back");d.length||(c.prepend(b.options.backButton),b._back(c))}),this.$element.parent().hasClass("is-drilldown")||(this.$wrapper=a(this.options.wrapper).addClass("is-drilldown").css(this._getMaxDims()),this.$element.wrap(this.$wrapper))},c.prototype._events=function(b){var c=this;b.off("click.zf.drilldown").on("click.zf.drilldown",function(d){if(d.stopImmediatePropagation(),d.preventDefault(),d.target!==d.currentTarget.firstElementChild)return!1;if(c._show(b),c.options.closeOnClick){var e=a("body").not(c.$wrapper);e.off(".zf.drilldown").on("click.zf.drilldown",function(a){a.preventDefault(),c._hideAll(),e.off(".zf.drilldown")})}})},c.prototype._keyboardEvents=function(){var c=this;this.$menuItems.add(this.$element.find(".js-drilldown-back")).on("keydown.zf.drilldown",function(d){var e,f,g=a(this),h=g.parent("ul").children("li");h.each(function(b){return a(this).is(g)?(e=h.eq(Math.max(0,b-1)),void(f=h.eq(Math.min(b+1,h.length-1)))):void 0}),b.Keyboard.handleKey(d,c,{next:function(){g.is(c.$submenuAnchors)&&(c._show(g),g.on(b.transitionend(g),function(){g.find("ul li").filter(c.$menuItems).first().focus()}))},previous:function(){c._hide(g.parent("ul")),g.parent("ul").on(b.transitionend(g),function(){setTimeout(function(){g.parent("ul").parent("li").focus()},1)})},up:function(){e.focus()},down:function(){f.focus()},close:function(){c._back()},open:function(){g.is(c.$menuItems)?g.is(c.$submenuAnchors)&&(c._show(g),setTimeout(function(){g.find("ul li").filter(c.$menuItems).first().focus()},1)):(c._hide(g.parent("ul")),setTimeout(function(){g.parent("ul").parent("li").focus()},1))},handled:function(){d.preventDefault(),d.stopImmediatePropagation()}})})},c.prototype._hideAll=function(){var a=this.$element.find(".is-drilldown-sub.is-active").addClass("is-closing");a.one(b.transitionend(a),function(b){a.removeClass("is-active is-closing")}),this.$element.trigger("closed.zf.drilldown")},c.prototype._back=function(a){var b=this;a.off("click.zf.drilldown"),a.children(".js-drilldown-back").on("click.zf.drilldown",function(c){c.stopImmediatePropagation(),b._hide(a)})},c.prototype._menuLinkEvents=function(){var a=this;this.$menuItems.not(".has-submenu").off("click.zf.drilldown").on("click.zf.drilldown",function(b){setTimeout(function(){a._hideAll()},0)})},c.prototype._show=function(a){a.children("[data-submenu]").addClass("is-active"),this.$element.trigger("open.zf.drilldown",[a])},c.prototype._hide=function(a){a.addClass("is-closing").one(b.transitionend(a),function(){a.removeClass("is-active is-closing")}),a.trigger("hide.zf.drilldown",[a])},c.prototype._getMaxDims=function(){var b=0,c={};return this.$submenus.add(this.$element).each(function(){var c=a(this).children("li").length;b=c>b?c:b}),c.height=b*this.$menuItems[0].getBoundingClientRect().height+"px",c.width=this.$element[0].getBoundingClientRect().width+"px",c},c.prototype.destroy=function(){this._hideAll(),b.Nest.Burn(this.$element,"drilldown"),this.$element.unwrap().find(".js-drilldown-back").remove().end().find(".is-active, .is-closing, .is-drilldown-sub").removeClass("is-active is-closing is-drilldown-sub").end().find("[data-submenu]").removeAttr("aria-hidden tabindex role").off(".zf.drilldown").end().off("zf.drilldown"),b.unregisterPlugin(this)},b.plugin(c,"Drilldown")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this),b.Keyboard.register("Dropdown",{ENTER:"open",SPACE:"open",ESCAPE:"close",TAB:"tab_forward",SHIFT_TAB:"tab_backward"})}c.defaults={hoverDelay:250,hover:!1,vOffset:1,hOffset:1,positionClass:"",trapFocus:!1},c.prototype._init=function(){var c=this.$element.attr("id");this.$anchor=a('[data-toggle="'+c+'"]')||a('[data-open="'+c+'"]'),this.$anchor.attr({"aria-controls":c,"data-is-focus":!1,"data-yeti-box":c,"aria-haspopup":!0,"aria-expanded":!1}),this.options.positionClass=this.getPositionClass(),this.counter=4,this.usedPositions=[],this.$element.attr({"aria-hidden":"true","data-yeti-box":c,"data-resize":c,"aria-labelledby":this.$anchor[0].id||b.GetYoDigits(6,"dd-anchor")}),this._events()},c.prototype.getPositionClass=function(){var a=this.$element[0].className.match(/(top|left|right)/g);return a=a?a[0]:""},c.prototype._reposition=function(a){this.usedPositions.push(a?a:"bottom"),!a&&this.usedPositions.indexOf("top")<0?this.$element.addClass("top"):"top"===a&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(a):"left"===a&&this.usedPositions.indexOf("right")<0?this.$element.removeClass(a).addClass("right"):"right"===a&&this.usedPositions.indexOf("left")<0?this.$element.removeClass(a).addClass("left"):!a&&this.usedPositions.indexOf("top")>-1&&this.usedPositions.indexOf("left")<0?this.$element.addClass("left"):"top"===a&&this.usedPositions.indexOf("bottom")>-1&&this.usedPositions.indexOf("left")<0?this.$element.removeClass(a).addClass("left"):"left"===a&&this.usedPositions.indexOf("right")>-1&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(a):"right"===a&&this.usedPositions.indexOf("left")>-1&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(a):this.$element.removeClass(a),this.classChanged=!0,this.counter--},c.prototype._setPosition=function(){if("false"===this.$anchor.attr("aria-expanded"))return!1;var a=this.getPositionClass(),c=b.Box.GetDimensions(this.$element),d=(b.Box.GetDimensions(this.$anchor),"left"===a?"left":"right"===a?"left":"top"),e="top"===d?"height":"width";"height"===e?this.options.vOffset:this.options.hOffset;if(c.width>=c.windowDims.width||!this.counter&&!b.Box.ImNotTouchingYou(this.$element))return this.$element.offset(b.Box.GetOffsets(this.$element,this.$anchor,"center bottom",this.options.vOffset,this.options.hOffset,!0)).css({width:c.windowDims.width-2*this.options.hOffset,height:"auto"}),this.classChanged=!0,!1;for(this.$element.offset(b.Box.GetOffsets(this.$element,this.$anchor,a,this.options.vOffset,this.options.hOffset));!b.Box.ImNotTouchingYou(this.$element)&&this.counter;)this._reposition(a),this._setPosition()},c.prototype._events=function(){var a=this;this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"resizeme.zf.trigger":this._setPosition.bind(this)}),this.options.hover&&(clearTimeout(a.timeout),this.$anchor.on("mouseenter.zf.dropdown mouseleave.zf.dropdown",function(){a.timeOut=setTimeout(function(){a.toggle()},a.options.hoverDelay)})),this.$anchor.add(this.$element).on("keydown.zf.dropdown",function(c){var d=b.Keyboard.findFocusable(a.$element);b.Keyboard.handleKey(c,a,{tab_forward:function(){this.$element.find(":focus").is(d.eq(-1))&&(this.options.trapFocus?(d.eq(0).focus(),c.preventDefault()):this.close())},tab_backward:function(){(this.$element.find(":focus").is(d.eq(0))||this.$element.is(":focus"))&&(this.options.trapFocus?(d.eq(-1).focus(),c.preventDefault()):this.close())},open:function(){a.open(),a.$element.attr("tabindex",-1).focus()},close:function(){a.close(),a.$anchor.focus()}})})},c.prototype.open=function(){this.$element.trigger("closeme.zf.dropdown",this.$element.attr("id")),this.$anchor.addClass("hover").attr({"aria-expanded":!0}),this._setPosition(),this.$element.addClass("is-open").attr({"aria-hidden":!1}),this.$element.trigger("show.zf.dropdown",[this.$element])},c.prototype.close=function(){if(!this.$element.hasClass("is-open"))return!1;if(this.$element.removeClass("is-open").attr({"aria-hidden":!0}),this.$anchor.removeClass("hover").attr("aria-expanded",!1),this.classChanged){var a=this.getPositionClass();a&&this.$element.removeClass(a),this.$element.addClass(this.options.positionClass).css({height:"",width:""}),this.classChanged=!1,this.counter=4,this.usedPositions.length=0}this.$element.trigger("hide.zf.dropdown",[this.$element])},c.prototype.toggle=function(){this.$element.hasClass("is-open")?this.close():this.open()},c.prototype.destroy=function(){this.$element.off(".zf.trigger").hide(),this.$anchor.off(".zf.dropdown"),b.unregisterPlugin(this)},b.plugin(c,"Dropdown")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=b.extend({},c.defaults,this.$element.data(),e),a.Nest.Feather(this.$element,"dropdown"),this._init(),a.registerPlugin(this),a.Keyboard.register("DropdownMenu",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"previous",ESCAPE:"close"})}c.defaults={clickOpen:!0,closeOnClick:!1,disableHover:!1,autoclose:!0,hoverDelay:150,closingTime:500,alignment:"left",verticalClass:"vertical",rightClass:"align-right"},c.prototype._init=function(){this.$element.hasClass(this.options.verticalClass)&&(this.vertical=!0),this._prepareMenu()},c.prototype._prepareMenu=function(){var a=this;this.$tabs=this.$element.children("li.has-submenu"),this.$tabs.children("[data-submenu]").addClass("first-sub"),this.$submenus=this.$element.find("li.has-submenu"),this.$menuItems=this.$element.find("li").attr({role:"menuitem",tabindex:0}),this.$menuItems.children("a").attr("tabindex",-1),this.$element.hasClass(this.options.rightClass)?(this.options.alignment="right",this.$submenus.addClass("is-left-arrow opens-left")):this.$submenus.addClass("is-right-arrow opens-right"),this.vertical||this.$tabs.removeClass("is-right-arrow is-left-arrow opens-left opens-right").addClass("is-down-arrow"),this.$tabs.each(function(){var a=b(this);a.attr({role:"menuitem",tabindex:0,title:a.children("a:first-child").text()}).children("a").attr("tabindex",-1),a.children("[data-submenu]")&&a.attr("aria-haspopup",!0)}),this.$submenus.each(function(){var c=b(this);c.children("[data-submenu]").attr({"aria-hidden":!0,tabindex:-1,role:"menu"}).addClass("vertical"),a._events(c)})},c.prototype._events=function(c){var d=this;this.options.clickOpen&&c.off("click.zf.dropdownmenu").on("click.zf.dropdownmenu",function(a){b(this).hasClass("is-dropdown-submenu-parent")&&(a.preventDefault(),a.stopPropagation(),c.data("isClick")?d._hide(c):(d._hideOthers(c),d._show(c),c.data("isClick",!0).parentsUntil("[data-dropdown-menu]",".is-dropdown-submenu-parent").data("isClick",!0),d.options.closeOnClick&&d._addBodyHandler()))}),this.options.disableHover||(this.$menuItems.on("mouseenter.zf.dropdownmenu",function(a){var c=b(this);c.hasClass("is-active")||d._hideOthers(c)}),c.on("mouseenter.zf.dropdownmenu",function(a){clearTimeout(c.closeTimer),c.hasClass("is-active")||(c.openTimer=setTimeout(function(){d._show(c)},d.options.hoverDelay))}).on("mouseleave.zf.dropdownmenu",function(a){!c.data("isClick")&&d.options.autoclose&&(clearTimeout(c.openTimer),c.closeTimer=setTimeout(function(){d._hide(c)},d.options.closingTime))})),this.$menuItems.on("keydown.zf.dropdownmenu",function(c){var e,f,g=b(this),h=d.$element.children("li"),i=g.is(h),j=i?h:g.parents("li").first().add(g.parent("ul").children("li"));j.each(function(a){return b(this).is(g)?(e=j.eq(a-1),void(f=j.eq(a+1))):void 0});var k=function(){g.is(":last-child")||f.focus()},l=function(){e.focus()},m=function(){g.has("ul").length&&(d._show(g),g.find("li").first().focus())},n=function(){g.parents("li").first().focus(),d._hide(g.parents("li").first())},o={open:m,close:function(){d._hideAll(),d.$menuItems.first().focus()},handled:function(){c.preventDefault(),c.stopImmediatePropagation()}};i?d.vertical?"left"===d.options.alignment?b.extend(o,{down:k,up:l,next:m,previous:n}):b.extend(o,{down:k,up:l,next:n,previous:m}):b.extend(o,{next:k,previous:l,down:m,up:n}):"left"===d.options.alignment?b.extend(o,{next:m,previous:n,down:k,up:l}):b.extend(o,{next:n,previous:m,down:k,up:l}),a.Keyboard.handleKey(c,d,o)})},c.prototype._toggle=function(a){a.hasClass("is-active")?this._hide(a):this._show(a)},c.prototype._addBodyHandler=function(){var a=b("body"),c=this;a.not(c.$element).on("click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu",function(b){c._hideAll(),a.off("click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu")})},c.prototype._show=function(b){this._hideOthers(b),b.focus();var c=b.children("[data-submenu]:first-of-type");b.addClass("is-active"),c.css("visibility","hidden").addClass("js-dropdown-active").attr("aria-hidden",!1);var d=a.Box.ImNotTouchingYou(c,null,!0);d||("left"===this.options.alignment?b.removeClass("opens-left").addClass("opens-right"):b.removeClass("opens-right").addClass("opens-left"),this.changed=!0,d=a.Box.ImNotTouchingYou(c,null,!0),d||(b.removeClass("opens-left opens-right").addClass("opens-inner"),this.changed=!0)),c.css("visibility",""),this.$element.trigger("show.zf.dropdownmenu",[b])},c.prototype._hide=function(a){this._hideSome(a)},c.prototype._hideSome=function(a){a.length&&(a.removeClass("is-active opens-inner").data("isClick",!1).find(".is-active").removeClass("is-active").data("isClick",!1).end().find(".js-dropdown-active").removeClass("js-dropdown-active").attr("aria-hidden",!0),a.parent(".has-submenu").removeClass("is-active"),this.changed&&("left"===this.options.alignment?a.find(".opens-left").removeClass("opens-left").addClass("opens-right"):a.find(".opens-right").removeClass("opens-right").addClass("opens-left")),this.$element.trigger("hide.zf.dropdownmenu"))},c.prototype._hideOthers=function(a){this._hideSome(a.siblings(".has-submenu.is-active"))},c.prototype._hideAll=function(){this._hideSome(this.$element)},c.prototype.destroy=function(){this._hideAll(),this.$element.removeData("zf-plugin").find("li").removeClass("js-dropdown-nohover is-right-arrow is-left-arrow opens-left opens-inner opens-right").add("a").off(".zf.dropdownmenu").end().find("ul").removeClass("first-sub"),a.Nest.Burn(this.$element,"dropdown"),a.unregisterPlugin(this)},a.plugin(c,"DropdownMenu")}(Foundation,jQuery),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=b.extend({},c.defaults,this.$element.data(),e),this.$window=b(window),this.name="equalizer",this.attr="data-equalizer",this._init(),this._events(),a.registerPlugin(this)}c.defaults={equalizeOnStack:!0,throttleInterval:50},c.prototype._init=function(){this._reflow()},c.prototype._events=function(){var b=this;this.$window.off(".equalizer").on("resize.fndtn.equalizer",a.util.throttle(function(){b._reflow()},b.options.throttleInterval))},c.prototype._killswitch=function(){},c.prototype._reflow=function(){var c=this;b("["+this.attr+"]").each(function(){var d=b(this),e=[],f=d.find("img");f.length?a.onImagesLoaded(f,function(){e=c.getHeights(d),c.applyHeight(d,e)}):(e=c.getHeights(d),c.applyHeight(d,e))})},c.prototype.getHeights=function(a){var c,d=a.data("equalizer"),e=d?a.find("["+this.attr+'-watch="'+d+'"]:visible'):a.find("["+this.attr+"-watch]:visible");return e.height("inherit"),c=e.map(function(){return b(this).outerHeight(!1)}).get(),console.log(c),c},c.prototype.applyHeight=function(a,c){var d=a.data("equalizer"),e=d?a.find("["+this.attr+'-watch="'+d+'"]:visible'):a.find("["+this.attr+"-watch]:visible"),f=Math.max.apply(null,c);a.trigger("preEqualized.zf.Equalizer");for(var g=0;g=a:a-d.options.threshold<=b});a=e.length?e.length-1:0}if(this.$active.removeClass(this.options.activeClass),this.$active=this.$links.eq(a).addClass(this.options.activeClass),this.options.deepLinking){var f=this.$active[0].getAttribute("href");window.history.pushState?window.history.pushState(null,null,f):window.location.hash=f}this.scrollPos=b,this.$element.trigger("update.zf.magellan",[this.$active])},c.prototype.destroy=function(){this.$element.off(".zf.trigger .zf.magellan").find("."+this.options.activeClass).removeClass(this.options.activeClass);var b=this.$active[0].getAttribute("href");window.location.hash.replace(b,""),a.unregisterPlugin(this)},a.plugin(c,"Magellan"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=c),"function"==typeof define&&define(["foundation"],function(){return c})}(Foundation,jQuery),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this.$lastTrigger=a(),this._init(),this._events(),b.registerPlugin(this)}c.defaults={closeOnClick:!0,transitionTime:0,position:"left",forceTop:!0,isRevealed:!1,revealOn:null,autoFocus:!0,revealClass:"reveal-for-"},c.prototype._init=function(){var b=this.$element.attr("id");if(this.$element.attr("aria-hidden","true"),a(document).find('[data-open="'+b+'"], [data-close="'+b+'"], [data-toggle="'+b+'"]').attr("aria-expanded","false").attr("aria-controls",b),this.options.closeOnClick)if(a(".js-off-canvas-exit").length)this.$exiter=a(".js-off-canvas-exit");else{var c=document.createElement("div");c.setAttribute("class","js-off-canvas-exit"),a("[data-off-canvas-content]").append(c),this.$exiter=a(c)}this.options.isRevealed=this.options.isRevealed||new RegExp(this.options.revealClass,"g").test(this.$element[0].className),this.options.isRevealed&&(this.options.revealOn=this.options.revealOn||this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split("-")[2],this._setMQChecker()),this.options.transitionTime||(this.options.transitionTime=1e3*parseFloat(window.getComputedStyle(a("[data-off-canvas-wrapper]")[0]).transitionDuration))},c.prototype._events=function(){if(this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"keydown.zf.offcanvas":this._handleKeyboard.bind(this)}),this.$exiter.length){this.$exiter.on({"click.zf.offcanvas":this.close.bind(this)})}},c.prototype._setMQChecker=function(){var c=this;a(window).on("changed.zf.mediaquery",function(){b.MediaQuery.atLeast(c.options.revealOn)?c.reveal(!0):c.reveal(!1)}).one("load.zf.offcanvas",function(){b.MediaQuery.atLeast(c.options.revealOn)&&c.reveal(!0)})},c.prototype.reveal=function(a){var b=this.$element.find("[data-close]");a?b.length&&b.hide():b.length&&b.show()},c.prototype.open=function(c,d){if(!this.$element.hasClass("is-open")){var e=this;a(document.body);a("body").scrollTop(0),b.Move(this.options.transitionTime,this.$element,function(){a("[data-off-canvas-wrapper]").addClass("is-off-canvas-open is-open-"+e.options.position),e.$element.addClass("is-open").attr("aria-hidden","false").trigger("opened.zf.offcanvas")}),d&&(this.$lastTrigger=d.attr("aria-expanded","true")),this.options.autoFocus&&this.$element.one("finished.zf.animate",function(){e.$element.find("a, button").eq(0).focus()})}},c.prototype.close=function(){if(this.$element.hasClass("is-open")){var c=this;b.Move(this.options.transitionTime,this.$element,function(){a("[data-off-canvas-wrapper]").removeClass("is-off-canvas-open is-open-"+c.options.position),c.$element.removeClass("is-open")}),this.$element.attr("aria-hidden","true").trigger("closed.zf.offcanvas"),this.$lastTrigger.attr("aria-expanded","false")}},c.prototype.toggle=function(a,b){this.$element.hasClass("is-open")?this.close(a,b):this.open(a,b)},c.prototype._handleKeyboard=function(a){27===a.which&&(a.stopPropagation(),a.preventDefault(),this.close(),this.$lastTrigger.focus())},c.prototype.destroy=function(){},b.plugin(c,"OffCanvas")}(jQuery,Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this),b.Keyboard.register("Orbit",{ltr:{ARROW_RIGHT:"next",ARROW_LEFT:"previous"},rtl:{ARROW_LEFT:"next",ARROW_RIGHT:"previous"}})}c.defaults={bullets:!0,navButtons:!0,animInFromRight:"slide-in-right",animOutToRight:"slide-out-right",animInFromLeft:"slide-in-left",animOutToLeft:"slide-out-left",autoPlay:!0,timerDelay:5e3,infiniteWrap:!0,swipe:!0,pauseOnHover:!0,accessible:!0,containerClass:"orbit-container",slideClass:"orbit-slide",boxOfBullets:"orbit-bullets",nextClass:"orbit-next",prevClass:"orbit-previous"},c.prototype._init=function(){this.$wrapper=this.$element.find("."+this.options.containerClass),this.$slides=this.$element.find("."+this.options.slideClass);var a=this.$element.find("img");a.length?b.onImagesLoaded(a,this._prepareForOrbit.bind(this)):this._prepareForOrbit(),this.options.bullets&&this._loadBullets(),this._events(),this.options.autoPlay&&this.geoSync(),this.options.accessible&&this.$wrapper.attr("tabindex",0)},c.prototype._loadBullets=function(){this.$bullets=this.$element.find("."+this.options.boxOfBullets).find("button")},c.prototype.geoSync=function(){var a=this;this.timer=new b.Timer(this.$element,{duration:this.options.timerDelay,infinite:!1},function(){a.changeSlide(!0)}),this.timer.start()},c.prototype._prepareForOrbit=function(){var a=this;this._setWrapperHeight(function(b){a._setSlideHeight(b)})},c.prototype._setWrapperHeight=function(b){var c,d=0,e=0;this.$slides.each(function(){c=this.getBoundingClientRect().height,a(this).attr("data-slide",e),e&&a(this).css({position:"relative",display:"none"}),d=c>d?c:d,e++}),e===this.$slides.length&&(this.$wrapper.css({height:d}),b(d))},c.prototype._setSlideHeight=function(b){this.$slides.each(function(){a(this).css("max-height",b)})},c.prototype._events=function(){var c=this;if(this.options.swipe&&this.$slides.off("swipeleft.zf.orbit swiperight.zf.orbit").on("swipeleft.zf.orbit",function(a){a.preventDefault(),c.changeSlide(!0)}).on("swiperight.zf.orbit",function(a){a.preventDefault(),c.changeSlide(!1)}),this.options.autoPlay&&(this.$slides.on("click.zf.orbit",function(){c.$element.data("clickedOn",c.$element.data("clickedOn")?!1:!0),c.timer[c.$element.data("clickedOn")?"pause":"start"]()}),this.options.pauseOnHover&&this.$element.on("mouseenter.zf.orbit",function(){c.timer.pause()}).on("mouseleave.zf.orbit",function(){c.$element.data("clickedOn")||c.timer.start()})),this.options.navButtons){var d=this.$element.find("."+this.options.nextClass+", ."+this.options.prevClass);d.attr("tabindex",0).on("click.zf.orbit touchend.zf.orbit",function(){c.changeSlide(a(this).hasClass(c.options.nextClass))})}this.options.bullets&&this.$bullets.on("click.zf.orbit touchend.zf.orbit",function(){if(/is-active/g.test(this.className))return!1;var b=a(this).data("slide"),d=b>c.$slides.filter(".is-active").data("slide"),e=c.$slides.eq(b);c.changeSlide(d,e,b)}),this.$wrapper.add(this.$bullets).on("keydown.zf.orbit",function(d){b.Keyboard.handleKey(d,c,{next:function(){c.changeSlide(!0)},previous:function(){c.changeSlide(!1)},handled:function(){a(d.target).is(c.$bullets)&&c.$bullets.filter(".is-active").focus()}})})},c.prototype.changeSlide=function(a,c,d){var e=this.$slides.filter(".is-active").eq(0);if(/mui/g.test(e[0].className))return!1;var f,g=this.$slides.first(),h=this.$slides.last(),i=a?"Right":"Left",j=a?"Left":"Right",k=this;f=c?c:a?this.options.infiniteWrap?e.next("."+this.options.slideClass).length?e.next("."+this.options.slideClass):g:e.next("."+this.options.slideClass):this.options.infiniteWrap?e.prev("."+this.options.slideClass).length?e.prev("."+this.options.slideClass):h:e.prev("."+this.options.slideClass),f.length&&(this.options.bullets&&(d=d||this.$slides.index(f),this._updateBullets(d)),b.Motion.animateIn(f.addClass("is-active").css({position:"absolute",top:0}),this.options["animInFrom"+i],function(){f.css({position:"relative",display:"block"}).attr("aria-live","polite")}),b.Motion.animateOut(e.removeClass("is-active"),this.options["animOutTo"+j],function(){e.removeAttr("aria-live"),k.options.autoPlay&&k.timer.restart(),k.$element.trigger("slidechange.zf.orbit",[f])}))},c.prototype._updateBullets=function(a){var b=this.$element.find("."+this.options.boxOfBullets).find(".is-active").removeClass("is-active").blur(),c=b.find("span:last").detach();this.$bullets.eq(a).addClass("is-active").append(c)},c.prototype.destroy=function(){delete this.timer,this.$element.off(".zf.orbit").find("*").off(".zf.orbit").end().hide(),b.unregisterPlugin(this)},b.plugin(c,"Orbit")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(c){this.$element=b(c),this.rules=this.$element.data("responsive-menu"),this.currentMq=null,this.currentPlugin=null,this._init(),this._events(),a.registerPlugin(this)}var d={dropdown:{cssClass:"dropdown",plugin:a._plugins["dropdown-menu"]||null},drilldown:{cssClass:"drilldown",plugin:a._plugins.drilldown||null},accordion:{cssClass:"accordion-menu",plugin:a._plugins["accordion-menu"]||null}};c.defaults={},c.prototype._init=function(){for(var a={},c=this.rules.split(" "),e=0;e1?f[0]:"small",h=f.length>1?f[1]:f[0];null!==d[h]&&(a[g]=d[h])}this.rules=a,b.isEmptyObject(a)||this._checkMediaQueries()},c.prototype._events=function(){var a=this;b(window).on("changed.zf.mediaquery",function(){a._checkMediaQueries()})},c.prototype._checkMediaQueries=function(){var c,e=this;b.each(this.rules,function(b){a.MediaQuery.atLeast(b)&&(c=b)}),c&&(this.currentPlugin instanceof this.rules[c].plugin||(b.each(d,function(a,b){e.$element.removeClass(b.cssClass)}),this.$element.addClass(this.rules[c].cssClass),this.currentPlugin&&this.currentPlugin.destroy(),this.currentPlugin=new this.rules[c].plugin(this.$element,{})))},c.prototype.destroy=function(){this.currentPlugin.destroy(),b(window).off(".zf.ResponsiveMenu"),a.unregisterPlugin(this)},a.plugin(c,"ResponsiveMenu")}(Foundation,jQuery),!function(a,b){"use strict";function c(d,e){this.$element=a(d),this.options=a.extend({},c.defaults,e),this._init(),this._events(),b.registerPlugin(this)}c.defaults={hideFor:"medium"},c.prototype._init=function(){var b=this.$element.data("responsive-toggle");b||console.error("Your tab bar needs an ID of a Menu as the value of data-tab-bar."),this.$targetMenu=a("#"+b),this.$toggler=this.$element.find("[data-toggle]"),this._update()},c.prototype._events=function(){a(window).on("changed.zf.mediaquery",this._update.bind(this)),this.$toggler.on("click.zf.responsiveToggle",this.toggleMenu.bind(this))},c.prototype._update=function(){b.MediaQuery.atLeast(this.options.hideFor)?(this.$element.hide(),this.$targetMenu.show()):(this.$element.show(),this.$targetMenu.hide())},c.prototype.toggleMenu=function(){b.MediaQuery.atLeast(this.options.hideFor)||(this.$targetMenu.toggle(0),this.$element.trigger("toggled.zf.responsiveToggle"))},c.prototype.destroy=function(){},b.plugin(c,"ResponsiveToggle")}(jQuery,Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=b.extend({},c.defaults,this.$element.data(),e),this._init(),a.registerPlugin(this),a.Keyboard.register("Reveal",{ENTER:"open",SPACE:"open",ESCAPE:"close",TAB:"tab_forward",SHIFT_TAB:"tab_backward"})}c.defaults={animationIn:"",animationOut:"",showDelay:0,hideDelay:0,closeOnClick:!0,closeOnEsc:!0,multipleOpened:!1,vOffset:100,hOffset:0,fullScreen:!1,btmOffsetPct:10,overlay:!0,resetOnClose:!1},c.prototype._init=function(){if(this.id=this.$element.attr("id"),this.isActive=!1,this.$anchor=b(b('[data-open="'+this.id+'"]').length?'[data-open="'+this.id+'"]':'[data-toggle="'+this.id+'"]'),this.$anchor.length){var c=this.$anchor[0].id||a.GetYoDigits(6,"reveal");this.$anchor.attr({"aria-controls":this.id,id:c,"aria-haspopup":!0,tabindex:0}),this.$element.attr({"aria-labelledby":c})}(this.options.fullScreen||this.$element.hasClass("full"))&&(this.options.fullScreen=!0,this.options.overlay=!1),this.options.overlay&&(this.$overlay=this._makeOverlay(this.id)),this.$element.attr({role:"dialog","aria-hidden":!0,"data-yeti-box":this.id,"data-resize":this.id}),this._events()},c.prototype._makeOverlay=function(a){var c=b("
    ").addClass("reveal-overlay").attr({tabindex:-1,"aria-hidden":!0}).appendTo("body");return this.options.closeOnClick&&c.attr({"data-close":a}),c},c.prototype._events=function(){var a=this;this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"resizeme.zf.trigger":function(){a.$element.is(":visible")&&a._setPosition(function(){})}}),this.$anchor.length&&this.$anchor.on("keydown.zf.reveal",function(b){(13===b.which||32===b.which)&&(b.stopPropagation(),b.preventDefault(),a.open())}),this.options.closeOnClick&&this.options.overlay&&this.$overlay.off(".zf.reveal").on("click.zf.reveal",this.close.bind(this))},c.prototype._setPosition=function(b){var c=a.Box.GetDimensions(this.$element),d=this.options.fullScreen?"reveal full":c.height>=.5*c.windowDims.height?"reveal":"center";"reveal full"===d?(console.log("full"),this.$element.offset(a.Box.GetOffsets(this.$element,null,d,this.options.vOffset)).css({height:c.windowDims.height,width:c.windowDims.width})):a.MediaQuery.atLeast("medium")&&a.Box.ImNotTouchingYou(this.$element,null,!0,!1)?this.$element.css({"max-height":c.windowDims.height-this.options.vOffset*(this.options.btmOffsetPct/100+1),width:""}).offset(a.Box.GetOffsets(this.$element,null,d,this.options.vOffset)):(this.$element.css({width:c.windowDims.width-2*this.options.hOffset}).offset(a.Box.GetOffsets(this.$element,null,"center",this.options.vOffset,this.options.hOffset)),this.changedSize=!0),b()},c.prototype.open=function(){var c=this;this.isActive=!0,this.$element.css({visibility:"hidden"}).show().scrollTop(0),this._setPosition(function(){c.$element.hide().css({visibility:""}),c.options.multipleOpened||c.$element.trigger("closeme.zf.reveal",c.id),c.options.animationIn?c.options.overlay?a.Motion.animateIn(c.$overlay,"fade-in",function(){a.Motion.animateIn(c.$element,c.options.animationIn,function(){})}):a.Motion.animateIn(c.$element,c.options.animationIn,function(){}):c.options.overlay?c.$overlay.show(0,function(){c.$element.show(c.options.showDelay,function(){})}):c.$element.show(c.options.showDelay,function(){})}),this.$element.attr({"aria-hidden":!1}).attr("tabindex",-1).focus().trigger("open.zf.reveal"),b("body").addClass("is-reveal-open").attr({"aria-hidden":this.options.overlay||this.options.fullScreen?!0:!1}),setTimeout(function(){c._extraHandlers()},0)},c.prototype._extraHandlers=function(){var c=this,d=this.$element.find("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]").filter(function(){return!b(this).is(":visible")||b(this).attr("tabindex")<0?!1:!0});this.options.overlay||!this.options.closeOnClick||this.options.fullScreen||b("body").on("click.zf.reveal",function(a){c.close()}),this.options.closeOnEsc&&b(window).on("keydown.zf.reveal",function(b){0===d.length&&b.preventDefault(),a.Keyboard.handleKey(b,c,{close:function(){this.options.closeOnEsc&&this.close()}})}),this.$element.on("keydown.zf.reveal",function(e){var f=b(this);a.Keyboard.handleKey(e,c,{tab_forward:function(){this.$element.find(":focus").is(d.eq(-1))&&(d.eq(0).focus(),e.preventDefault())},tab_backward:function(){(this.$element.find(":focus").is(d.eq(0))||this.$element.is(":focus"))&&(d.eq(-1).focus(),e.preventDefault())},open:function(){f.is(d)&&this.open()},close:function(){this.options.closeOnEsc&&this.close()}}),0===d.length&&e.preventDefault()})},c.prototype.close=function(){if(!this.isActive||!this.$element.is(":visible"))return!1;var c=this;this.options.animationOut?a.Motion.animateOut(this.$element,this.options.animationOut,function(){c.options.overlay&&a.Motion.animateOut(c.$overlay,"fade-out",function(){})}):this.$element.hide(c.options.hideDelay,function(){c.options.overlay&&c.$overlay.hide(0,function(){})}),this.options.closeOnEsc&&b(window).off("keydown.zf.reveal"),!this.options.overlay&&this.options.closeOnClick&&b("body").off("click.zf.reveal"),this.$element.off("keydown.zf.reveal"),this.changedSize&&this.$element.css({height:"",width:""}),b("body").removeClass("is-reveal-open").attr({"aria-hidden":!1,tabindex:""}),this.options.resetOnClose&&this.$element.html(this.$element.html()),this.isActive=!1,this.$element.attr({"aria-hidden":!0}).trigger("closed.zf.reveal")},c.prototype.toggle=function(){this.isActive?this.close():this.open()},c.prototype.destroy=function(){this.options.overlay&&this.$overlay.hide().off().remove(),this.$element.hide(),this.$anchor.off(),a.unregisterPlugin(this)},a.plugin(c,"Reveal"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=c),"function"==typeof define&&define(["foundation"],function(){return c})}(Foundation,jQuery),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this),b.Keyboard.register("Slider",{ltr:{ARROW_RIGHT:"increase",ARROW_UP:"increase",ARROW_DOWN:"decrease",ARROW_LEFT:"decrease",SHIFT_ARROW_RIGHT:"increase_fast",SHIFT_ARROW_UP:"increase_fast",SHIFT_ARROW_DOWN:"decrease_fast",SHIFT_ARROW_LEFT:"decrease_fast"},rtl:{ARROW_LEFT:"increase",ARROW_RIGHT:"decrease",SHIFT_ARROW_LEFT:"increase_fast",SHIFT_ARROW_RIGHT:"decrease_fast"}})}function d(a,b){return a/b}function e(a,b,c,d){return Math.abs(a.position()[b]+a[d]()/2-c)}c.defaults={start:0,end:100,step:1,initialStart:0,initialEnd:100,binding:!1,clickSelect:!0,vertical:!1,draggable:!0,disabled:!1,doubleSided:!1,decimal:2,moveTime:200,disabledClass:"disabled"},c.prototype._init=function(){this.inputs=this.$element.find("input"),this.handles=this.$element.find("[data-slider-handle]"),this.$handle=this.handles.eq(0),this.$input=this.inputs.length?this.inputs.eq(0):a("#"+this.$handle.attr("aria-controls")),this.$fill=this.$element.find("[data-slider-fill]").css(this.options.vertical?"height":"width",0);var b=!1,c=this;(this.options.disabled||this.$element.hasClass(this.options.disabledClass))&&(this.options.disabled=!0,this.$element.addClass(this.options.disabledClass)),this.inputs.length||(this.inputs=a().add(this.$input),this.options.binding=!0),this._setInitAttr(0),this._events(this.$handle),this.handles[1]&&(this.options.doubleSided=!0,this.$handle2=this.handles.eq(1),this.$input2=this.inputs.length?this.inputs.eq(1):a("#"+this.$handle2.attr("aria-controls")),this.inputs[1]||(this.inputs=this.inputs.add(this.$input2)),b=!0,this._setHandlePos(this.$handle,this.options.initialStart,!0,function(){c._setHandlePos(c.$handle2,c.options.initialEnd)}),this._setInitAttr(1),this._events(this.$handle2)),b||this._setHandlePos(this.$handle,this.options.initialStart,!0)},c.prototype._setHandlePos=function(a,c,e,f){c=parseFloat(c),cthis.options.end&&(c=this.options.end);var g=this.options.doubleSided;if(g)if(0===this.handles.index(a)){var h=parseFloat(this.$handle2.attr("aria-valuenow"));c=c>=h?h-this.options.step:c}else{var i=parseFloat(this.$handle.attr("aria-valuenow"));c=i>=c?i+this.options.step:c}this.options.vertical&&!e&&(c=this.options.end-c);var j=this,k=this.options.vertical,l=k?"height":"width",m=k?"top":"left",n=a[0].getBoundingClientRect()[l]/2,o=this.$element[0].getBoundingClientRect()[l],p=d(c,this.options.end).toFixed(this.options.decimal),q=(o-n)*p,r=(100*d(q,o)).toFixed(this.options.decimal),c=c>0?parseFloat(c.toFixed(this.options.decimal)):0,s={};if(this._setValues(a,c),this.options.doubleSided){var t,u=0===this.handles.index(a);this.handles.index(a);u?(s[m]=(p>0?100*p:0)+"%",t=(100*(d(this.$handle2.position()[m]+n,o)-parseFloat(p))).toFixed(this.options.decimal)+"%",s["min-"+l]=t,f&&"function"==typeof f&&f()):(c=(100>c?c:100)-(parseFloat(this.$handle[0].style.left)||this.options.end-c),s["min-"+l]=c+"%")}this.$element.one("finished.zf.animate",function(){j.animComplete=!0,j.$element.trigger("moved.zf.slider",[a])});var v=j.$element.data("dragging")?1e3/60:j.options.moveTime;b.Move(v,a,function(){a.css(m,r+"%"),j.options.doubleSided?j.$fill.css(s):j.$fill.css(l,100*p+"%")})},c.prototype._setInitAttr=function(a){var c=this.inputs.eq(a).attr("id")||b.GetYoDigits(6,"slider");this.inputs.eq(a).attr({id:c,max:this.options.end,min:this.options.start}),this.handles.eq(a).attr({role:"slider","aria-controls":c,"aria-valuemax":this.options.end,"aria-valuemin":this.options.start,"aria-valuenow":0===a?this.options.initialStart:this.options.initialEnd,"aria-orientation":this.options.vertical?"vertical":"horizontal",tabindex:0})},c.prototype._setValues=function(a,b){var c=this.options.doubleSided?this.handles.index(a):0;this.inputs.eq(c).val(b),a.attr("aria-valuenow",b)},c.prototype._handleEvent=function(a,b,c){var f,g;if(c)f=c,g=!0;else{a.preventDefault();var h=this.options.vertical,i=h?"height":"width",j=h?"top":"left",k=h?a.pageY:a.pageX,l=this.$handle[0].getBoundingClientRect()[i]/2,m=this.$element[0].getBoundingClientRect()[i],n=this.$element.offset()[j]-k,o=n>0?-l:-m>n-l?m:Math.abs(n),p=d(o,m);if(f=(this.options.end-this.options.start)*p,g=!1,!b){var q=e(this.$handle,j,o,i),r=e(this.$handle2,j,o,i);b=r>=q?this.$handle:this.$handle2}}this._setHandlePos(b,f,g)},c.prototype._events=function(c){if(this.options.disabled)return!1;var d,e=this;if(this.inputs.off("change.zf.slider").on("change.zf.slider",function(b){var c=e.inputs.index(a(this));e._handleEvent(b,e.handles.eq(c),a(this).val())}),this.options.clickSelect&&this.$element.off("click.zf.slider").on("click.zf.slider",function(a){return e.$element.data("dragging")?!1:(e.animComplete=!1,void(e.options.doubleSided?e._handleEvent(a):e._handleEvent(a,e.$handle)))}),this.options.draggable){this.handles.addTouch();var f=a("body");c.off("mousedown.zf.slider").on("mousedown.zf.slider",function(b){c.addClass("is-dragging"),e.$fill.addClass("is-dragging"),e.$element.data("dragging",!0),e.animComplete=!1,d=a(b.currentTarget),f.on("mousemove.zf.slider",function(a){a.preventDefault(),e._handleEvent(a,d)}).on("mouseup.zf.slider",function(a){e.animComplete=!0,e._handleEvent(a,d),c.removeClass("is-dragging"),e.$fill.removeClass("is-dragging"),e.$element.data("dragging",!1),f.off("mousemove.zf.slider mouseup.zf.slider")})})}c.off("keydown.zf.slider").on("keydown.zf.slider",function(c){var d,f=e.options.doubleSided?e.handles.index(a(this)):0,g=parseFloat(e.inputs.eq(f).val()),h=a(this);b.Keyboard.handleKey(c,e,{decrease:function(){d=g-e.options.step},increase:function(){d=g+e.options.step},decrease_fast:function(){d=g-10*e.options.step},increase_fast:function(){d=g+10*e.options.step},handled:function(){c.preventDefault(),e._setHandlePos(h,d,!0)}})})},c.prototype.destroy=function(){this.handles.off(".zf.slider"),this.inputs.off(".zf.slider"),this.$element.off(".zf.slider"),b.unregisterPlugin(this)},b.plugin(c,"Slider")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this)}function d(a){return parseInt(window.getComputedStyle(document.body,null).fontSize,10)*a}c.defaults={container:"
    ",stickTo:"top",anchor:"",topAnchor:"",btmAnchor:"",marginTop:1,marginBottom:1,stickyOn:"medium",stickyClass:"sticky",containerClass:"sticky-container",checkEvery:-1},c.prototype._init=function(){var c=this.$element.parent("[data-sticky-container]"),d=this.$element[0].id||b.GetYoDigits(6,"sticky"),e=this;c.length||(this.wasWrapped=!0),this.$container=c.length?c:a(this.options.container).wrapInner(this.$element),this.$container.addClass(this.options.containerClass),this.$element.addClass(this.options.stickyClass).attr({"data-resize":d}),this.scrollCount=this.options.checkEvery,this.isStuck=!1,""!==this.options.topAnchor?this._parsePoints():this.$anchor=a(this.options.anchor?"#"+this.options.anchor:document.body),this._setSizes(function(){e._calc(!1)}),this._events(d.split("-").reverse().join("-"))},c.prototype._parsePoints=function(){for(var b=this.options.topAnchor,c=this.options.btmAnchor,d=[b,c],e={},f=0,g=d.length;g>f&&d[f];f++){var h;if("number"==typeof d[f])h=d[f];else{var i=d[f].split(":"),j=a("#"+i[0]);h=j.offset().top,i[1]&&"bottom"===i[1].toLowerCase()&&(h+=j[0].getBoundingClientRect().height)}e[f]=h}this.points=e},c.prototype._events=function(b){var c=this,d="scroll.zf."+b;this.isOn||(this.canStick&&(this.isOn=!0,a(window).off(d).on(d,function(a){0===c.scrollCount?(c.scrollCount=c.options.checkEvery,c._setSizes(function(){c._calc(!1,window.pageYOffset)})):(c.scrollCount--,c._calc(!1,window.pageYOffset))})),this.$element.off("resizeme.zf.trigger").on("resizeme.zf.trigger",function(a,e){c._setSizes(function(){c._calc(!1),c.canStick?c.isOn||c._events(b):c.isOn&&c._pauseListeners(d)})}))},c.prototype._pauseListeners=function(b){this.isOn=!1,a(window).off(b),this.$element.trigger("pause.zf.sticky")},c.prototype._calc=function(a,b){return a&&this._setSizes(),this.canStick?(b||(b=window.pageYOffset),void(b>=this.topPoint?b<=this.bottomPoint?this.isStuck||this._setSticky():this.isStuck&&this._removeSticky(!1):this.isStuck&&this._removeSticky(!0))):(this.isStuck&&this._removeSticky(!0),!1)},c.prototype._setSticky=function(){var a=this.options.stickTo,b="top"===a?"marginTop":"marginBottom",c="top"===a?"bottom":"top",d={};d[b]=this.options[b]+"em",d[a]=0,d[c]="auto",d.left=this.$container.offset().left+parseInt(window.getComputedStyle(this.$container[0])["padding-left"],10),this.isStuck=!0,this.$element.removeClass("is-anchored is-at-"+c).addClass("is-stuck is-at-"+a).css(d).trigger("sticky.zf.stuckto:"+a)},c.prototype._removeSticky=function(a){var b,c,d=this.options.stickTo,e="top"===d,f={},g=(this.points?this.points[1]-this.points[0]:this.anchorHeight)-this.elemHeight;b=e?"marginTop":"marginBottom",c=e?"bottom":"top",f[b]=0,a&&!e||e&&!a?(f[d]=g,f[c]=0):(f[d]=0,f[c]=g),f.left="",this.isStuck=!1,this.$element.removeClass("is-stuck is-at-"+d).addClass("is-anchored is-at-"+(a?"top":"bottom")).css(f).trigger("top")},c.prototype._setSizes=function(a){this.canStick=b.MediaQuery.atLeast(this.options.stickyOn),this.canStick||a();var c=this.$container[0].getBoundingClientRect().width,d=window.getComputedStyle(this.$container[0]),e=parseInt(d["padding-right"],10);this.$anchor&&this.$anchor.length?this.anchorHeight=this.$anchor[0].getBoundingClientRect().height:this._parsePoints(),this.$element.css({"max-width":c-e+"px"});var f=this.$element[0].getBoundingClientRect().height||this.containerHeight;this.containerHeight=f,this.$container.css({height:f}),this.elemHeight=f,this.isStuck&&this.$element.css({left:this.$container.offset().left+parseInt(d["padding-left"],10)}),this._setBreakPoints(f,function(){a&&a()})},c.prototype._setBreakPoints=function(a,b){if(!this.canStick){if(!b)return!1;b()}var c=d(this.options.marginTop),e=d(this.options.marginBottom),f=this.points?this.points[0]:this.$anchor.offset().top,g=this.points?this.points[1]:f+this.anchorHeight,h=window.innerHeight;"top"===this.options.stickTo?(f-=c,g-=a+c):"bottom"===this.options.stickTo&&(f-=h-(a+e),g-=h-e),this.topPoint=f,this.bottomPoint=g,b&&b()},c.prototype.destroy=function(){this._removeSticky(!0),this.$element.removeClass(this.options.stickyClass+" is-anchored is-at-top").css({height:"",top:"",bottom:"","max-width":""}).off("resizeme.zf.trigger"),this.$anchor.off("change.zf.sticky"),a(window).off("scroll.zf.sticky"),this.wasWrapped?this.$element.unwrap():this.$container.removeClass(this.options.containerClass).css({height:""}),b.unregisterPlugin(this)},b.plugin(c,"Sticky")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this),b.Keyboard.register("Tabs",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"previous",ARROW_DOWN:"next",ARROW_LEFT:"previous"})}c.defaults={autoFocus:!1,wrapOnKeys:!0,matchHeight:!1,linkClass:"tabs-title",panelClass:"tabs-panel"},c.prototype._init=function(){var c=this;if(this.$tabTitles=this.$element.find("."+this.options.linkClass),this.$tabContent=a('[data-tabs-content="'+this.$element[0].id+'"]'),this.$tabTitles.each(function(){var b=a(this),d=b.find("a"),e=b.hasClass("is-active"),f=d.attr("href").slice(1),g=f+"-label",h=a(f);b.attr({role:"presentation"}),d.attr({role:"tab","aria-controls":f,"aria-selected":e,id:g}),h.attr({role:"tabpanel","aria-hidden":!e,"aria-labelledby":g}),e&&c.options.autoFocus&&d.focus()}),this.options.matchHeight){var d=this.$tabContent.find("img");d.length?b.onImagesLoaded(d,this._setHeight.bind(this)):this._setHeight()}this._events()},c.prototype._events=function(){this._addKeyHandler(),this._addClickHandler(),this.options.matchHeight&&a(window).on("changed.zf.mediaquery",this._setHeight.bind(this))},c.prototype._addClickHandler=function(){var b=this;this.$tabTitles.off("click.zf.tabs").on("click.zf.tabs",function(c){c.preventDefault(),c.stopPropagation(),a(this).hasClass("is-active")||b._handleTabChange(a(this))})},c.prototype._addKeyHandler=function(){var c=this;c.$element.find("li:first-of-type"),c.$element.find("li:last-of-type");this.$tabTitles.off("keydown.zf.tabs").on("keydown.zf.tabs",function(d){d.stopPropagation(),d.preventDefault();var e,f,g=a(this),h=g.parent("ul").children("li");h.each(function(b){return a(this).is(g)?void(c.options.wrapOnKeys?(e=0===b?h.last():h.eq(b-1),f=b===h.length-1?h.first():h.eq(b+1)):(e=h.eq(Math.max(0,b-1)),f=h.eq(Math.min(b+1,h.length-1)))):void 0}),b.Keyboard.handleKey(d,c,{open:function(){g.find('[role="tab"]').focus(),c._handleTabChange(g)},previous:function(){e.find('[role="tab"]').focus(),c._handleTabChange(e)},next:function(){f.find('[role="tab"]').focus(),c._handleTabChange(f)}})})},c.prototype._handleTabChange=function(b){var c=b.find('[role="tab"]'),d=c.attr("href"),e=a(d),f=this.$element.find("."+this.options.linkClass+".is-active").removeClass("is-active").find('[role="tab"]').attr({"aria-selected":"false"}).attr("href");a(f).removeClass("is-active").attr({ +"aria-hidden":"true"}),b.addClass("is-active"),c.attr({"aria-selected":"true"}),e.addClass("is-active").attr({"aria-hidden":"false"}),this.$element.trigger("change.zf.tabs",[b])},c.prototype.selectTab=function(a){var b;b="object"==typeof a?a[0].id:a,b.indexOf("#")<0&&(b="#"+b);var c=this.$tabTitles.find('[href="'+b+'"]').parent("."+this.options.linkClass);this._handleTabChange(c)},c.prototype._setHeight=function(){var b=0;this.$tabContent.find("."+this.options.panelClass).css("height","").each(function(){var c=a(this),d=c.hasClass("is-active");d||c.css({visibility:"hidden",display:"block"});var e=this.getBoundingClientRect().height;d||c.css({visibility:"",display:""}),b=e>b?e:b}).css("height",b+"px")},c.prototype.destroy=function(){this.$element.find("."+this.options.linkClass).off(".zf.tabs").hide().end().find("."+this.options.panelClass).hide(),this.options.matchHeight&&a(window).off("changed.zf.mediaquery"),b.unregisterPlugin(this)},b.plugin(c,"Tabs")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=b.extend({},c.defaults,d.data(),e),this.className="",this._init(),this._events(),a.registerPlugin(this)}c.defaults={animate:!1},c.prototype._init=function(){var a;this.options.animate?(a=this.options.animate.split(" "),this.animationIn=a[0],this.animationOut=a[1]||null):(a=this.$element.data("toggler"),"."===a[0]?this.className=a.slice(1):this.className=a);var c=this.$element[0].id;b('[data-open="'+c+'"], [data-close="'+c+'"], [data-toggle="'+c+'"]').attr("aria-controls",c),this.$element.is(":hidden")&&this.$element.attr("aria-expanded","false")},c.prototype._events=function(){var a=this;this.$element.on("toggle.zf.trigger",function(){return a.toggle(),!1})},c.prototype.toggle=function(){this.options.animate?this._toggleAnimate():this._toggleClass()},c.prototype._toggleClass=function(){var a=this;this.$element.toggleClass(this.className),this.$element.hasClass(this.className)?this.$element.trigger("on.zf.toggler"):this.$element.trigger("off.zf.toggler"),a._updateARIA()},c.prototype._toggleAnimate=function(){var b=this;this.$element.is(":hidden")?a.Motion.animateIn(this.$element,this.animationIn,function(){this.trigger("on.zf.toggler"),b._updateARIA()}):a.Motion.animateOut(this.$element,this.animationOut,function(){this.trigger("off.zf.toggler"),b._updateARIA()})},c.prototype._updateARIA=function(){this.$element.is(":hidden")?this.$element.attr("aria-expanded","false"):this.$element.attr("aria-expanded","true")},c.prototype.destroy=function(){this.$element.off(".zf.toggler"),a.unregisterPlugin(this)},a.plugin(c,"Toggler"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=c),"function"==typeof define&&define(["foundation"],function(){return c})}(Foundation,jQuery),!function(a,b,c){"use strict";function d(b,e){this.$element=b,this.options=a.extend({},d.defaults,this.$element.data(),e),this.isActive=!1,this.isClick=!1,this._init(),c.registerPlugin(this)}d.defaults={disableForTouch:!1,hoverDelay:200,fadeInDuration:150,fadeOutDuration:150,disableHover:!1,templateClasses:"",tooltipClass:"tooltip",triggerClass:"has-tip",showOn:"small",template:"",tipText:"",touchCloseText:"Tap to close.",clickOpen:!0,positionClass:"",vOffset:10,hOffset:12},d.prototype._init=function(){var d=this.$element.attr("aria-describedby")||c.GetYoDigits(6,"tooltip");this.options.positionClass=this._getPositionClass(this.$element),this.options.tipText=this.options.tipText||this.$element.attr("title"),this.template=this.options.template?a(this.options.template):this._buildTemplate(d),this.template.appendTo(b.body).text(this.options.tipText).hide(),this.$element.attr({title:"","aria-describedby":d,"data-yeti-box":d,"data-toggle":d,"data-resize":d}).addClass(this.triggerClass),this.usedPositions=[],this.counter=4,this.classChanged=!1,this._events()},d.prototype._getPositionClass=function(a){if(!a)return"";var b=a[0].className.match(/(top|left|right)/g);return b=b?b[0]:""},d.prototype._buildTemplate=function(b){var c=(this.options.tooltipClass+" "+this.options.positionClass).trim(),d=a("
    ").addClass(c).attr({role:"tooltip","aria-hidden":!0,"data-is-active":!1,"data-is-focus":!1,id:b});return d},d.prototype._reposition=function(a){this.usedPositions.push(a?a:"bottom"),!a&&this.usedPositions.indexOf("top")<0?this.template.addClass("top"):"top"===a&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(a):"left"===a&&this.usedPositions.indexOf("right")<0?this.template.removeClass(a).addClass("right"):"right"===a&&this.usedPositions.indexOf("left")<0?this.template.removeClass(a).addClass("left"):!a&&this.usedPositions.indexOf("top")>-1&&this.usedPositions.indexOf("left")<0?this.template.addClass("left"):"top"===a&&this.usedPositions.indexOf("bottom")>-1&&this.usedPositions.indexOf("left")<0?this.template.removeClass(a).addClass("left"):"left"===a&&this.usedPositions.indexOf("right")>-1&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(a):"right"===a&&this.usedPositions.indexOf("left")>-1&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(a):this.template.removeClass(a),this.classChanged=!0,this.counter--},d.prototype._setPosition=function(){var a=this._getPositionClass(this.template),b=c.Box.GetDimensions(this.template),d=c.Box.GetDimensions(this.$element),e="left"===a?"left":"right"===a?"left":"top",f="top"===e?"height":"width";"height"===f?this.options.vOffset:this.options.hOffset;if(b.width>=b.windowDims.width||!this.counter&&!c.Box.ImNotTouchingYou(this.template))return this.template.offset(c.Box.GetOffsets(this.template,this.$element,"center bottom",this.options.vOffset,this.options.hOffset,!0)).css({width:d.windowDims.width-2*this.options.hOffset,height:"auto"}),!1;for(this.template.offset(c.Box.GetOffsets(this.template,this.$element,"center "+(a||"bottom"),this.options.vOffset,this.options.hOffset));!c.Box.ImNotTouchingYou(this.template)&&this.counter;)this._reposition(a),this._setPosition()},d.prototype.show=function(){if("all"!==this.options.showOn&&!c.MediaQuery.atLeast(this.options.showOn))return!1;var a=this;this.template.css("visibility","hidden").show(),this._setPosition(),this.$element.trigger("closeme.zf.tooltip",this.template.attr("id")),this.template.attr({"data-is-active":!0,"aria-hidden":!1}),a.isActive=!0,this.template.stop().hide().css("visibility","").fadeIn(this.options.fadeInDuration,function(){}),this.$element.trigger("show.zf.tooltip")},d.prototype.hide=function(){var a=this;this.template.stop().attr({"aria-hidden":!0,"data-is-active":!1}).fadeOut(this.options.fadeOutDuration,function(){a.isActive=!1,a.isClick=!1,a.classChanged&&(a.template.removeClass(a._getPositionClass(a.template)).addClass(a.options.positionClass),a.usedPositions=[],a.counter=4,a.classChanged=!1)}),this.$element.trigger("hide.zf.tooltip")},d.prototype._events=function(){var a=this,b=(this.template,!1);this.options.disableHover||this.$element.on("mouseenter.zf.tooltip",function(b){a.isActive||(a.timeout=setTimeout(function(){a.show()},a.options.hoverDelay))}).on("mouseleave.zf.tooltip",function(c){clearTimeout(a.timeout),(!b||!a.isClick&&a.options.clickOpen)&&a.hide()}),this.options.clickOpen&&this.$element.on("mousedown.zf.tooltip",function(b){b.stopImmediatePropagation(),a.isClick?a.hide():(a.isClick=!0,!a.options.disableHover&&a.$element.attr("tabindex")||a.isActive||a.show())}),this.options.disableForTouch||this.$element.on("tap.zf.tooltip touchend.zf.tooltip",function(b){a.isActive?a.hide():a.show()}),this.$element.on({"close.zf.trigger":this.hide.bind(this)}),this.$element.on("focus.zf.tooltip",function(c){return b=!0,console.log(a.isClick),a.isClick?!1:void a.show()}).on("focusout.zf.tooltip",function(c){b=!1,a.isClick=!1,a.hide()}).on("resizeme.zf.trigger",function(){a.isActive&&a._setPosition()})},d.prototype.toggle=function(){this.isActive?this.hide():this.show()},d.prototype.destroy=function(){this.$element.attr("title",this.template.text()).off(".zf.trigger .zf.tootip").removeAttr("aria-describedby").removeAttr("data-yeti-box").removeAttr("data-toggle").removeAttr("data-resize"),this.template.remove(),c.unregisterPlugin(this)},c.plugin(d,"Tooltip")}(jQuery,window.document,window.Foundation),!function(a,b){var c=function(a,b,c,e){var f,g,h,i,j=d(a);if(b){var k=d(b);g=j.offset.top+j.height<=k.height+k.offset.top,f=j.offset.top>=k.offset.top,h=j.offset.left>=k.offset.left,i=j.offset.left+j.width<=k.width}else g=j.offset.top+j.height<=j.windowDims.height+j.windowDims.offset.top,f=j.offset.top>=j.windowDims.offset.top,h=j.offset.left>=j.windowDims.offset.left,i=j.offset.left+j.width<=j.windowDims.width;var l=[g,f,h,i];return c?h===i==!0:e?f===g==!0:-1===l.indexOf(!1)},d=function(a,c){if(a=a.length?a[0]:a,a===b||a===document)throw new Error("I'm sorry, Dave. I'm afraid I can't do that.");var d=a.getBoundingClientRect(),e=a.parentNode.getBoundingClientRect(),f=document.body.getBoundingClientRect(),g=b.pageYOffset,h=b.pageXOffset;return{width:d.width,height:d.height,offset:{top:d.top+g,left:d.left+h},parentDims:{width:e.width,height:e.height,offset:{top:e.top+g,left:e.left+h}},windowDims:{width:f.width,height:f.height,offset:{top:g,left:h}}}},e=function(a,b,c,e,f,g){var h=d(a),i=b?d(b):null;switch(c){case"top":return{left:i.offset.left,top:i.offset.top-(h.height+e)};case"left":return{left:i.offset.left-(h.width+f),top:i.offset.top};case"right":return{left:i.offset.left+i.width+f,top:i.offset.top};case"center top":return{left:i.offset.left+i.width/2-h.width/2,top:i.offset.top-(h.height+e)};case"center bottom":return{left:g?f:i.offset.left+i.width/2-h.width/2,top:i.offset.top+i.height+e};case"center left":return{left:i.offset.left-(h.width+f),top:i.offset.top+i.height/2-h.height/2};case"center right":return{left:i.offset.left+i.width+f+1,top:i.offset.top+i.height/2-h.height/2};case"center":return{left:h.windowDims.offset.left+h.windowDims.width/2-h.width/2,top:h.windowDims.offset.top+h.windowDims.height/2-h.height/2};case"reveal":return{left:(h.windowDims.width-h.width)/2,top:h.windowDims.offset.top+e};case"reveal full":return{left:h.windowDims.offset.left,top:h.windowDims.offset.top};default:return{left:i.offset.left,top:i.offset.top+i.height+e}}};a.Box={ImNotTouchingYou:c,GetDimensions:d,GetOffsets:e}}(window.Foundation,window),!function(a,b){"use strict";b.Keyboard={};var c={9:"TAB",13:"ENTER",27:"ESCAPE",32:"SPACE",37:"ARROW_LEFT",38:"ARROW_UP",39:"ARROW_RIGHT",40:"ARROW_DOWN"},d=function(a){var b={};for(var c in a)b[a[c]]=a[c];return b}(c);b.Keyboard.keys=d;var e=function(a){var b=c[a.which||a.keyCode]||String.fromCharCode(a.which).toUpperCase();return a.shiftKey&&(b="SHIFT_"+b),a.ctrlKey&&(b="CTRL_"+b),a.altKey&&(b="ALT_"+b),b};b.Keyboard.parseKey=e;var f={},g=function(c,d,g){var h,i,j,k=f[b.getFnName(d)],l=e(c);return k?(h="undefined"==typeof k.ltr?k:b.rtl()?a.extend({},k.ltr,k.rtl):a.extend({},k.rtl,k.ltr),i=h[l],j=g[i],void(j&&"function"==typeof j?(j.apply(d),(g.handled||"function"==typeof g.handled)&&g.handled.apply(d)):(g.unhandled||"function"==typeof g.unhandled)&&g.unhandled.apply(d))):console.warn("Component not defined!")};b.Keyboard.handleKey=g;var h=function(b){return b.find("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]").filter(function(){return!a(this).is(":visible")||a(this).attr("tabindex")<0?!1:!0})};b.Keyboard.findFocusable=h;var i=function(a,b){f[a]=b};b.Keyboard.register=i}(jQuery,window.Foundation),!function(a,b){function c(a){var b={};return"string"!=typeof a?b:(a=a.trim().slice(1,-1))?b=a.split("&").reduce(function(a,b){var c=b.replace(/\+/g," ").split("="),d=c[0],e=c[1];return d=decodeURIComponent(d),e=void 0===e?null:decodeURIComponent(e),a.hasOwnProperty(d)?Array.isArray(a[d])?a[d].push(e):a[d]=[a[d],e]:a[d]=e,a},{}):b}var d={queries:[],current:"",atLeast:function(a){var b=this.get(a);return b?window.matchMedia(b).matches:!1},get:function(a){for(var b in this.queries){var c=this.queries[b];if(a===c.name)return c.value}return null},_init:function(){var b,d=this,e=a(".foundation-mq").css("font-family");b=c(e);for(var f in b)d.queries.push({name:f,value:"only screen and (min-width: "+b[f]+")"});this.current=this._getCurrentSize(),this._watcher()},_getCurrentSize:function(){var a;for(var b in this.queries){var c=this.queries[b];window.matchMedia(c.value).matches&&(a=c)}return"object"==typeof a?a.name:a},_watcher:function(){var b=this;a(window).on("resize.zf.mediaquery",function(){var c=b._getCurrentSize();c!==b.current&&(a(window).trigger("changed.zf.mediaquery",[c,b.current]),b.current=c)})}};b.MediaQuery=d,window.matchMedia||(window.matchMedia=function(){"use strict";var a=window.styleMedia||window.media;if(!a){var b=document.createElement("style"),c=document.getElementsByTagName("script")[0],d=null;b.type="text/css",b.id="matchmediajs-test",c.parentNode.insertBefore(b,c),d="getComputedStyle"in window&&window.getComputedStyle(b,null)||b.currentStyle,a={matchMedium:function(a){var c="@media "+a+"{ #matchmediajs-test { width: 1px; } }";return b.styleSheet?b.styleSheet.cssText=c:b.textContent=c,"1px"===d.width}}}return function(b){return{matches:a.matchMedium(b||"all"),media:b||"all"}}}())}(jQuery,Foundation),!function(a,b){function c(c,f,g,h){function i(){c||f.hide(),j(),h&&h.apply(f)}function j(){f[0].style.transitionDuration=0,f.removeClass(k+" "+l+" "+g)}if(f=a(f).eq(0),f.length){var k=c?d[0]:d[1],l=c?e[0]:e[1];j(),f.addClass(g).css("transition","none"),requestAnimationFrame(function(){f.addClass(k),c&&f.show()}),requestAnimationFrame(function(){f[0].offsetWidth,f.css("transition",""),f.addClass(l)}),f.one(b.transitionend(f),i)}}var d=["mui-enter","mui-leave"],e=["mui-enter-active","mui-leave-active"],f={animateIn:function(a,b,d){c(!0,a,b,d)},animateOut:function(a,b,d){c(!1,a,b,d)}},g=function(a,b,c){function d(h){g||(g=window.performance.now()),f=h-g,c.apply(b),a>f?e=window.requestAnimationFrame(d,b):(window.cancelAnimationFrame(e),b.trigger("finished.zf.animate",[b]).triggerHandler("finished.zf.animate",[b]))}var e,f,g=null;e=window.requestAnimationFrame(d)};b.Move=g,b.Motion=f}(jQuery,Foundation),!function(a,b){"use strict";b.Nest={Feather:function(b,c){b.attr("role","menubar"),c=c||"zf";var d=b.find("li").attr({role:"menuitem"}),e="is-"+c+"-submenu",f=e+"-item",g="is-"+c+"-submenu-parent";d.each(function(){var b=a(this),c=b.children("ul");c.length&&(b.addClass("has-submenu "+g),c.addClass("submenu "+e).attr("data-submenu","")),b.parent("[data-submenu]").length&&b.addClass("is-submenu-item "+f)})},Burn:function(a,b){var c=(a.find("li").removeAttr("tabindex"),"is-"+b+"-submenu"),d=c+"-item",e="is-"+b+"-submenu-parent";a.find("*").removeClass(c+" "+d+" "+e+" has-submenu is-submenu-item submenu is-active").removeAttr("data-submenu").css("display","")}}}(jQuery,window.Foundation),!function(a,b){"use strict";var c=function(a,b,c){var d,e,f=this,g=b.duration,h=Object.keys(a.data())[0]||"timer",i=-1;this.restart=function(){i=-1,clearTimeout(e),this.start()},this.start=function(){clearTimeout(e),i=0>=i?g:i,a.data("paused",!1),d=Date.now(),e=setTimeout(function(){b.infinite&&f.restart(),c()},i),a.trigger("timerstart.zf."+h)},this.pause=function(){clearTimeout(e),a.data("paused",!0);var b=Date.now();i-=b-d,a.trigger("timerpaused.zf."+h)}},d=function(b,c){var d=b.length;0===d&&c();var e=function(){d--,0===d&&c()};b.each(function(){this.complete?e():"undefined"!=typeof this.naturalWidth&&this.naturalWidth>0?e():a(this).one("load",function(){e()})})};b.Timer=c,b.onImagesLoaded=d}(jQuery,window.Foundation),function(a){function b(){this.removeEventListener("touchmove",c),this.removeEventListener("touchend",b),j=!1}function c(c){if(a.spotSwipe.preventDefault&&c.preventDefault(),j){var d,e=c.touches[0].pageX,k=c.touches[0].pageY,l=f-e,m=g-k;i=(new Date).getTime()-h,Math.abs(l)>=a.spotSwipe.moveThreshold&&i<=a.spotSwipe.timeThreshold?d=l>0?"left":"right":Math.abs(m)>=a.spotSwipe.moveThreshold&&i<=a.spotSwipe.timeThreshold&&(d=m>0?"down":"up"),d&&(b.call(this),a(this).trigger("swipe",d).trigger("swipe"+d))}}function d(a){1==a.touches.length&&(f=a.touches[0].pageX,g=a.touches[0].pageY,j=!0,h=(new Date).getTime(),this.addEventListener("touchmove",c,!1),this.addEventListener("touchend",b,!1))}function e(){this.addEventListener&&this.addEventListener("touchstart",d,!1)}a.spotSwipe={version:"1.0.0",enabled:"ontouchstart"in document.documentElement,preventDefault:!0,moveThreshold:75,timeThreshold:200};var f,g,h,i,j=!1;a.event.special.swipe={setup:e},a.each(["left","up","down","right"],function(){a.event.special["swipe"+this]={setup:function(){a(this).on("swipe",a.noop)}}})}(jQuery),!function(a){a.fn.addTouch=function(){this.each(function(c,d){a(d).bind("touchstart touchmove touchend touchcancel",function(){b(event)})});var b=function(a){var b=a.changedTouches,c=b[0],d={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"},e=d[a.type],f=document.createEvent("MouseEvent");f.initMouseEvent(e,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),c.target.dispatchEvent(f)}}}(jQuery),!function(a,b){"use strict";b(document).on("click.zf.trigger","[data-open]",function(){var a=b(this).data("open");b("#"+a).triggerHandler("open.zf.trigger",[b(this)])}),b(document).on("click.zf.trigger","[data-close]",function(){var a=b(this).data("close");a?b("#"+a).triggerHandler("close.zf.trigger",[b(this)]):b(this).trigger("close.zf.trigger")}),b(document).on("click.zf.trigger","[data-toggle]",function(){var a=b(this).data("toggle");b("#"+a).triggerHandler("toggle.zf.trigger",[b(this)])}),b(document).on("close.zf.trigger","[data-closable]",function(){var c=b(this).data("closable")||"fade-out";a.Motion?a.Motion.animateOut(b(this),c,function(){b(this).trigger("closed.zf")}):b(this).fadeOut().trigger("closed.zf")});var c=function(){for(var a=["WebKit","Moz","O","Ms",""],b=0;b0&&a()}); \ No newline at end of file diff --git a/assets/javascript/motion-ui/LICENSE b/assets/javascript/motion-ui/LICENSE deleted file mode 100644 index 73d6b9626..000000000 --- a/assets/javascript/motion-ui/LICENSE +++ /dev/null @@ -1,22 +0,0 @@ -Copyright (c) 2013-2015 ZURB, inc. - -MIT License - -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -"Software"), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE -LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION -OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION -WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/assets/javascript/motion-ui/README.md b/assets/javascript/motion-ui/README.md deleted file mode 100644 index ec542e59e..000000000 --- a/assets/javascript/motion-ui/README.md +++ /dev/null @@ -1,28 +0,0 @@ -# Motion UI Documentation - -### [Installation](installation.md) - -Installing Motion UI. - -### [Transitions](transitions.md) - -Using CSS transitions to show and hide components. - -### [Animations](animations.md) - -Using CSS animations to add effects. - -### [CSS Classes](classes.md) - -Using the library's pre-made CSS classes. - -### [JavaScript](javascript.md) - -Using the JavaScript plugin to transition elements in and out. - -### [Configuration](configuration.md) - -Customizing Motion UI. - - - diff --git a/assets/javascript/motion-ui/_animation.scss b/assets/javascript/motion-ui/_animation.scss deleted file mode 100644 index fa3b73b76..000000000 --- a/assets/javascript/motion-ui/_animation.scss +++ /dev/null @@ -1,7 +0,0 @@ -/// Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property. -/// @param {Function} $effects... - One or more effect functions to build the keyframe with. -@mixin mui-animation($args...) { - $name: map-get(-mui-process-args($args...), name); - @include mui-keyframes($name, $args...); - animation-name: unquote($name); -} diff --git a/assets/javascript/motion-ui/_args.scss b/assets/javascript/motion-ui/_args.scss deleted file mode 100644 index 9f4b5a410..000000000 --- a/assets/javascript/motion-ui/_args.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// Processes a series of keyframe function arguments. -/// @access private -@function -mui-process-args($args...) { - @if length($args) == 1 { - $arg: nth($args, 1); - - @if type-of($arg) == 'string' { - @return call($arg); - } @else if type-of($arg) == 'map' { - @return $arg; - } - } - - @return -mui-keyframe-combine($args...); -} diff --git a/assets/javascript/motion-ui/_classes.scss b/assets/javascript/motion-ui/_classes.scss deleted file mode 100644 index 8bfb91390..000000000 --- a/assets/javascript/motion-ui/_classes.scss +++ /dev/null @@ -1,102 +0,0 @@ -// scss-lint:disable ImportantRule, SpaceAfterComma, SingleLinePerProperty - -%mui-defaults { - transition-duration: map-get($motion-ui-speeds, default); - transition-timing-function: map-get($motion-ui-easings, default); -} - -// Transitions -// - - - - - - - - - - - - - - - -@mixin motion-ui-transitions { - // Slide - .slide-in-down { @include mui-slide(in, down); } - .slide-in-left { @include mui-slide(in, right); } - .slide-in-up { @include mui-slide(in, bottom); } - .slide-in-right { @include mui-slide(in, left); } - .slide-out-down { @include mui-slide(out, bottom); } - .slide-out-right { @include mui-slide(out, right); } - .slide-out-up { @include mui-slide(out, top); } - .slide-out-left { @include mui-slide(out, left); } - - // Fade - .fade-in { @include mui-fade(in, 0, 1); } - .fade-out { @include mui-fade(out, 1, 0); } - - // Hinge - .hinge-in-from-top { @include mui-hinge(in, top); } - .hinge-in-from-right { @include mui-hinge(in, right); } - .hinge-in-from-bottom { @include mui-hinge(in, bottom); } - .hinge-in-from-left { @include mui-hinge(in, left); } - .hinge-in-from-middle-x { @include mui-hinge(in, top, center); } - .hinge-in-from-middle-y { @include mui-hinge(in, right, center); } - .hinge-out-from-top { @include mui-hinge(out, top); } - .hinge-out-from-right { @include mui-hinge(out, right); } - .hinge-out-from-bottom { @include mui-hinge(out, bottom); } - .hinge-out-from-left { @include mui-hinge(out, left); } - .hinge-out-from-middle-x { @include mui-hinge(out, top, center); } - .hinge-out-from-middle-y { @include mui-hinge(out, right, center); } - - // Scale - .scale-in-up { @include mui-zoom(in, 0.5, 1); } - .scale-in-down { @include mui-zoom(in, 1.5, 1); } - .scale-out-up { @include mui-zoom(out, 1, 1.5); } - .scale-out-down { @include mui-zoom(out, 1, 0.5); } - - // Spin - .spin-in { @include mui-spin(in, cw); } - .spin-out { @include mui-spin(out, cw); } - .spin-in-ccw { @include mui-spin(in, ccw); } - .spin-out-ccw { @include mui-spin(out, ccw); } - - // Transition Modifiers - // - - - - - - - - - - - - - - - - - @each $name, $value in $motion-ui-speeds { - @if $name != default { - .#{$name} { transition-duration: $value !important; } - } - } - - @each $name, $value in $motion-ui-easings { - @if $name != default { - .#{$name} { transition-timing-function: $value !important; } - } - } - - @each $name, $value in $motion-ui-delays { - @if $name != default { - .#{$name}-delay { transition-delay: $value !important; } - } - } -} - -// Animations -// - - - - - - - - - - - - - - - -@mixin motion-ui-animations { - .shake { @include mui-animation(shake); } - .spin-cw { @include mui-animation(spin); } - .spin-ccw { @include mui-animation(spin(ccw)); } - .wiggle { @include mui-animation(wiggle); } - - // Animation Modifiers - // - - - - - - - - - - - - - - - - .infinite { animation-iteration-count: infinite; } - - @each $name, $value in $motion-ui-speeds { - @if $name != default { - .#{$name} { animation-duration: $value !important; } - } - } - - @each $name, $value in $motion-ui-easings { - @if $name != default { - .#{$name} { animation-timing-function: $value !important; } - } - } - - @each $name, $value in $motion-ui-delays { - @if $name != default { - .#{$name}-delay { animation-delay: $value !important; } - } - } -} diff --git a/assets/javascript/motion-ui/_fade.scss b/assets/javascript/motion-ui/_fade.scss deleted file mode 100644 index c3e5f0547..000000000 --- a/assets/javascript/motion-ui/_fade.scss +++ /dev/null @@ -1,28 +0,0 @@ -/// Creates a fade transition by adjusting the opacity of the element. -/// @param {Keyword} $state [in] - State to transition to. -/// @param {Number} $from [0] - Opacity to start at. Must be a number between 0 and 1. -/// @param {Number} $to [1] - Opacity to end on. -/// @param {Keyword} $duration [null] - Length (speed) of the transition. -/// @param {Keyword|Function} $timing [null] - Easing of the transition. -/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. -@mixin mui-fade( - $state: in, - $from: 0, - $to: 1, - $duration: null, - $timing: null, - $delay: null -) { - $fade: fade($from, $to); - - @include transition-start($state) { - @include transition-basics($duration, $timing, $delay); - @include -mui-keyframe-get($fade, 0); - - transition-property: opacity; - } - - @include transition-end($state) { - @include -mui-keyframe-get($fade, 100); - } -} diff --git a/assets/javascript/motion-ui/_hinge.scss b/assets/javascript/motion-ui/_hinge.scss deleted file mode 100644 index 534bcb286..000000000 --- a/assets/javascript/motion-ui/_hinge.scss +++ /dev/null @@ -1,43 +0,0 @@ -/// Creates a hinge transition by rotating the element. -/// @param {Keyword} $state [in] - State to transition to. -/// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. -/// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`. -/// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. -/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. -/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously. -/// @param {Duration} $duration [null] - Length (speed) of the transition. -/// @param {Keyword|Function} $timing [null] - Easing of the transition. -/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. -@mixin mui-hinge ( - $state: in, - $from: left, - $axis: edge, - $perspective: 2000px, - $turn-origin: from-back, - $fade: map-get($motion-ui-settings, hinge-and-fade), - $duration: null, - $timing: null, - $delay: null -) { - $hinge: hinge($state, $from, $axis, $perspective, $turn-origin); - - @include transition-start($state) { - @include transition-basics($duration, $timing, $delay); - @include -mui-keyframe-get($hinge, 0); - - @if $fade { - transition-property: transform, opacity; - opacity: if($state == in, 0, 1); - } @else { - transition-property: transform, opacity; - } - } - - @include transition-end($state) { - @include -mui-keyframe-get($hinge, 100); - - @if $fade { - opacity: if($state == in, 1, 0); - } - } -} diff --git a/assets/javascript/motion-ui/_keyframe.scss b/assets/javascript/motion-ui/_keyframe.scss deleted file mode 100644 index e683368ca..000000000 --- a/assets/javascript/motion-ui/_keyframe.scss +++ /dev/null @@ -1,136 +0,0 @@ -// Internal counter for creating unique keyframe names -$-mui-custom: 0; - -/// Creates a keyframe from one or more effect functions. Use this function instead of `mui-animation` if you want to create a keyframe animation *without* automatically assigning it to the element. -/// @param {String} $name - Name of the keyframe. -/// @param {Function} $effects... - One or more effect functions to build the keyframe with. -@mixin mui-keyframes($name, $effects...) { - $obj: -mui-process-args($effects...); - $obj: map-remove($obj, name); - - @keyframes #{$name} { - // Now iterate through each keyframe percentage - @each $pct, $props in $obj { - #{-mui-keyframe-pct($pct)} { - // Lastly, iterate through each CSS property within a percentage and print it out - @each $prop, $value in $props { - #{$prop}: #{$value}; - } - } - } - } -} - -/// Creates a string for a CSS keyframe, by converting a list of numbers to a comma-separated list of percentage values. -/// @param {Number|List} $input - List of numbers to use. -/// @return {String} A set of comma-separated percentage values. -/// @access private -@function -mui-keyframe-pct($input) { - $output: (); - - @if type-of($input) == 'number' { - $output: ($input * 1%); - } @else if type-of($input) == 'list' { - @each $i in $input { - $output: append($output, ($i * 1%), comma); - } - } - - @return $output; -} - -/// Prints the CSS properties from a specific key in a keyframes map. Used to borrow CSS from keyframe functions for use in transitions. -/// @param {Map} $kf - Keyframe map to extract from. -/// @param {Number} $key - Key in the map to print the CSS of. -/// @access private -@mixin -mui-keyframe-get($kf, $key) { - $map: map-get($kf, $key); - - @each $prop, $value in $map or () { - // Some keyframe maps store transforms as quoted strings - @if type-of($value) == 'string' { - $value: unquote($value); - } - #{$prop}: $value; - } -} - -/// Reformats a map containing keys with a list of values, so that each key is a single value. -/// @param {Map} $map - Map to split up. -/// @return {Map} A reformatted map. -/// @access private -@function -mui-keyframe-split($map) { - $new-map: (); - - // Split keys with multiple values into individual keys - @each $key, $item in $map { - $key-type: type-of($key); - - @if $key-type == 'number' { - $new-map: map-merge($new-map, ($key: $item)); - } @else if $key-type == 'list' { - @each $k in $key { - $new-map: map-merge($new-map, ($k: $item)); - } - } - } - - @return $new-map; -} - -/// Combines a series of keyframe objects into one. -/// @param {Map} $maps... - A series of maps to merge, as individual parameters. -/// @return {Map} A combined keyframe object. -/// @access private -@function -mui-keyframe-combine($maps...) { - $new-map: (); - - // Iterate through each map passed in - @each $map in $maps { - @if type-of($map) == 'string' { - $map: call($map); - } - - $map: -mui-keyframe-split($map); - - // Iterate through each keyframe in the map - // $key is the keyframe percentage - // $value is a map of CSS properties - @each $key, $value in $map { - $new-value: (); - - @if map-has-key($new-map, $key) { - // If the map already has the keyframe %, append the new property - $new-value: -mui-merge-properties(map-get($new-map, $key), $value); - } @else { - // Otherwise, create a new map with the new property - $new-value: $value; - } - - // Finally, merge the modified keyframe value into the output map - $new-map: map-merge($new-map, ($key: $new-value)); - } - } - - // Make a name for the keyframes - $-mui-custom: $-mui-custom + 1 !global; - $map-name: (name: 'custom-#{$-mui-custom}'); - $new-map: map-merge($new-map, $map-name); - - @return $new-map; -} - -/// Combines two maps of CSS properties into one map. If both maps have a transform property, the values from each will be combined into one property. -/// @param {Map} $one - First map to merge. -/// @param {Map} $two - Second map to merge. -/// @return {Map} A combined map. -/// @access private -@function -mui-merge-properties($one, $two) { - @if map-has-key($one, transform) and map-has-key($two, transform) { - $transform: join(map-get($one, transform), map-get($two, transform)); - $one: map-merge($one, (transform: $transform)); - $two: map-remove($two, transform); - } - - @return map-merge($one, $two); -} diff --git a/assets/javascript/motion-ui/_selector.scss b/assets/javascript/motion-ui/_selector.scss deleted file mode 100644 index d66c463db..000000000 --- a/assets/javascript/motion-ui/_selector.scss +++ /dev/null @@ -1,23 +0,0 @@ -/// Builds a selector for a motion class, using the settings defined in the `$motion-ui-classes` and `$motion-ui-states` maps. -/// @param {String|List} $states - One or more strings that correlate to a state. -/// @param {Boolean} $active - Defines if the selector is for the setup or active class. -/// @return {String} A selector that can be interpolated into your Sass code. -/// @access private -@function -mui-build-selector($states, $active: false) { - $return: ''; - $chain: map-get($motion-ui-classes, chain); - $prefix: map-get($motion-ui-classes, prefix); - $suffix: map-get($motion-ui-classes, active); - - @each $sel in $states { - $return: $return + if($chain, '&.', '#{&}-') + $prefix + $sel; - - @if $active { - $return: $return + if($chain, '.', '#{&}-') + $prefix + $sel + $suffix; - } - - $return: $return + ', '; - } - - @return str-slice($return, 1, -3); -} diff --git a/assets/javascript/motion-ui/_series.scss b/assets/javascript/motion-ui/_series.scss deleted file mode 100644 index 8baeee3a7..000000000 --- a/assets/javascript/motion-ui/_series.scss +++ /dev/null @@ -1,54 +0,0 @@ -$-mui-queue: (); - -/// Pauses the animation on an element by default, and then plays it when an active class is added to a parent. Also sets the fill mode of the animation to `both`. This pauses the element at the first frame of the animation, and holds it in place at the end. -/// @access private -%animated-element { - animation-play-state: paused; - animation-fill-mode: both; - - .#{map-get($motion-ui-settings, activate-queue-class)} & { - animation-play-state: running; - } -} - -/// Creates a new animation queue. -/// @param {Duration} $delay [0s] - Delay in seconds or milliseconds to place at the front of the animation queue. -@mixin mui-series($delay: 0s) { - $-mui-queue: () !global; - - @if $delay > 0 { - $item: ($delay, 0s); - $-mui-queue: append($-mui-queue, $item) !global; - } - - @content; -} - -/// Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`. -/// @param {Duration} $duration [1s] - Length of the animation. -/// @param {Duration} $gap [0s] - Amount of time to pause before playing the animation after this one. Use a negative value to make the next effect overlap with the current one. -/// @param {Function} $keyframes... - One or more effect functions to build the keyframe with. -@mixin mui-queue( - $duration: 1s, - $gap: 0s, - $keyframes... -) { - // Build the animation - $kf: -mui-process-args($keyframes...); - - // Calculate the delay for this animation based on how long the previous ones take - $actual-delay: 0s; - @each $anim in $-mui-queue { - $actual-delay: $actual-delay + nth($anim, 1) + nth($anim, 2); - } - - // Append this animation's length and gap to the end of the queue - $item: ($duration, $gap); - $-mui-queue: append($-mui-queue, $item) !global; - - // CSS output - @extend %animated-element; - @include mui-animation($kf); - animation-duration: $duration; - animation-delay: $actual-delay; -} diff --git a/assets/javascript/motion-ui/_settings.scss b/assets/javascript/motion-ui/_settings.scss deleted file mode 100644 index a5cc9bf4c..000000000 --- a/assets/javascript/motion-ui/_settings.scss +++ /dev/null @@ -1,61 +0,0 @@ -/// Format for CSS classes created with Motion UI. -/// @type Map -/// @prop {Boolean} append [true] - Defines if selectors are chained to the selector (`.class.enter`), or appended as a new class (`.class-enter`). -/// @prop {String} prefix ['mui-'] - Prefix to add before the state of a class. Enter an empty string to use no prefix. -/// @prop {String} prefix ['-active'] - Suffix to add to the active state class. -$motion-ui-classes: ( - chain: true, - prefix: 'mui-', - active: '-active', -) !default; - -/// State names to reference when writing motion classes. To use multiple class names for one state, enter a list of strings instead of one string. -/// @type Map -$motion-ui-states: ( - in: 'enter', - out: 'leave', -) !default; - -/// Default speed that transitions and animations play at, along with values for modifier classes to change the speed. -/// @type Map -$motion-ui-speeds: ( - default: 500ms, - slow: 750ms, - fast: 250ms, -) !default; - -/// Default delay to add before motion, along with values for modifier classes to change the delay. -/// @type Map -$motion-ui-delays: ( - default: 0, - short: 300ms, - long: 700ms, -) !default; - -/// Default easing for transitions and animations, along with values for modifier classes to change the easing. -/// @type Map -$motion-ui-easings: ( - default: linear, - linear: linear, - ease: ease, - ease-in: ease-in, - ease-out: ease-out, - ease-in-out: ease-in-out, - bounce-in: cubic-bezier(0.485, 0.155, 0.24, 1.245), - bounce-out: cubic-bezier(0.485, 0.155, 0.515, 0.845), - bounce-in-out: cubic-bezier(0.76, -0.245, 0.24, 1.245), -) !default; - -/// Miscellaneous settings related to Motion UI. -/// @type Map -/// @prop {Boolean} slide-and-fade [false] - Defines if slide motions should also fade in/out. -/// @prop {Boolean} slide-and-fade [true] - Defines if hinge motions should also fade in/out. -/// @prop {Boolean} slide-and-fade [true] - Defines if scale motions should also fade in/out. -/// @prop {Boolean} slide-and-fade [true] - Defines if spin motions should also fade in/out. -$motion-ui-settings: ( - slide-and-fade: false, - hinge-and-fade: true, - scale-and-fade: true, - spin-and-fade: true, - activate-queue-class: 'is-animating', -) !default; diff --git a/assets/javascript/motion-ui/_shake.scss b/assets/javascript/motion-ui/_shake.scss deleted file mode 100644 index 66a291c62..000000000 --- a/assets/javascript/motion-ui/_shake.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// Creates a shaking animation. -/// @param {Percentage} $intensity [7%] - Intensity of the shake, as a percentage value. -/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. -@function shake($intensity: 7%) { - $right: (0, 10, 20, 30, 40, 50, 60, 70, 80, 90); - $left: (5, 15, 25, 35, 45, 55, 65, 75, 85, 95); - - $keyframes: ( - name: 'shake-#{($intensity / 1%)}', - $right: (transform: translateX($intensity)), - $left: (transform: translateX(-$intensity)), - ); - - @return $keyframes; -} diff --git a/assets/javascript/motion-ui/_slide.scss b/assets/javascript/motion-ui/_slide.scss deleted file mode 100644 index 898a549f4..000000000 --- a/assets/javascript/motion-ui/_slide.scss +++ /dev/null @@ -1,42 +0,0 @@ -/// Creates a sliding transition by translating the element horizontally or vertically. -/// @param {Keyword} $state [in] - State to transition to. -/// @param {Keyword} $direction [left] - Side of the element to slide from. Can be `top`, `right`, `bottom`, or `left`. -/// @param {Length} $amount [100%] - Length of the slide as a percentage value. -/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously. -/// @param {Duration} $duration [null] - Length (speed) of the transition. -/// @param {Keyword|Function} $timing [null] - Easing of the transition. -/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. -@mixin mui-slide ( - $state: in, - $direction: left, - $amount: 100%, - $fade: map-get($motion-ui-settings, slide-and-fade), - $duration: null, - $timing: null, - $delay: null -) { - $slide: slide($state, $direction, $amount); - - // CSS Output - @include transition-start($state) { - @include transition-basics($duration, $timing, $delay); - @include -mui-keyframe-get($slide, 0); - - @if $fade { - transition-property: transform, opacity; - opacity: if($state == in, 0, 1); - } @else { - transition-property: transform, opacity; - } - - backface-visibility: hidden; - } - - @include transition-end($state) { - @include -mui-keyframe-get($slide, 100); - - @if $fade { - opacity: if($state == in, 1, 0); - } - } -} diff --git a/assets/javascript/motion-ui/_spin.scss b/assets/javascript/motion-ui/_spin.scss deleted file mode 100644 index 82812e0f0..000000000 --- a/assets/javascript/motion-ui/_spin.scss +++ /dev/null @@ -1,39 +0,0 @@ -/// Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin. -/// @param {Keyword} $state [in] - State to transition to. -/// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). -/// @param {Number} $amount [0.75turn] - Amount to element the element. -/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously. -/// @param {Duration} $duration [null] - Length (speed) of the transition. -/// @param {Keyword|Function} $timing [null] - Easing of the transition. -/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. -@mixin mui-spin( - $state: in, - $direction: cw, - $amount: 0.75turn, - $fade: map-get($motion-ui-settings, spin-and-fade), - $duration: null, - $timing: null, - $delay: null -) { - $spin: spin($state, $direction, $amount); - - @include transition-start($state) { - @include transition-basics($duration, $timing, $delay); - @include -mui-keyframe-get($spin, 0); - - @if $fade { - transition-property: transform, opacity; - opacity: if($state == in, 0, 1); - } @else { - transition-property: transform, opacity; - } - } - - @include transition-end($state) { - @include -mui-keyframe-get($spin, 100); - - @if $fade { - opacity: if($state == in, 1, 0); - } - } -} diff --git a/assets/javascript/motion-ui/_transition.scss b/assets/javascript/motion-ui/_transition.scss deleted file mode 100644 index eb37d53a0..000000000 --- a/assets/javascript/motion-ui/_transition.scss +++ /dev/null @@ -1,45 +0,0 @@ -/// Applies basic transition settings to an element. -/// @param {Duration} $duration [null] - Length (speed) of the transition. -/// @param {Keyword|Function} $timing [null] - Easing of the transition. -/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. -@mixin transition-basics( - $duration: null, - $timing: null, - $delay: null -) { - @extend %mui-defaults; - transition-duration: $duration; - transition-timing-function: $timing; - transition-delay: $delay; -} - -/// Wraps the content in the setup class for a transition. -/// @param {Keyword} $dir - State to setup for transition. -@mixin transition-start($dir) { - $selector: -mui-build-selector(map-get($motion-ui-states, $dir)); - - @at-root { - #{$selector} { - @content; - } - } -} - -/// Wraps the content in the active class for a transition. -/// @param {Keyword} $dir - State to activate a transition on. -@mixin transition-end($dir) { - $selector: -mui-build-selector(map-get($motion-ui-states, $dir), true); - - @at-root { - #{$selector} { - @content; - } - } -} - -/// Adds styles for a stagger animation, which can be used with Angular's `ng-repeat`. -/// @param {Duration} $delay-amount - Amount of time in seconds or milliseconds to add between each item's animation. -@mixin stagger($delay-amount) { - transition-delay: $delay-amount; - transition-duration: 0; // Prevent accidental CSS inheritance -} diff --git a/assets/javascript/motion-ui/_unit.scss b/assets/javascript/motion-ui/_unit.scss deleted file mode 100644 index fd391663e..000000000 --- a/assets/javascript/motion-ui/_unit.scss +++ /dev/null @@ -1,7 +0,0 @@ -/// Removes the unit (e.g. px, em, rem) from a value, returning the number only. -/// @param {Number} $num - Number to strip unit from. -/// @return {Number} The same number, sans unit. -/// @access private -@function strip-unit($num) { - @return $num / ($num * 0 + 1); -} diff --git a/assets/javascript/motion-ui/_wiggle.scss b/assets/javascript/motion-ui/_wiggle.scss deleted file mode 100644 index 2866c300a..000000000 --- a/assets/javascript/motion-ui/_wiggle.scss +++ /dev/null @@ -1,13 +0,0 @@ -/// Creates a wiggling animation. -/// @param {Number} $intensity [7deg] - Intensity of the wiggle. Can be any CSS angle unit. -/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. -@function wiggle($intensity: 7deg) { - $keyframes: ( - name: 'wiggle-#{$intensity}', - (40, 50, 60): (transform: rotate($intensity)), - (35, 45, 55, 65): (transform: rotate(-$intensity)), - (0, 30, 70, 100): (transform: rotate(0)), - ); - - @return $keyframes; -} diff --git a/assets/javascript/motion-ui/_zoom.scss b/assets/javascript/motion-ui/_zoom.scss deleted file mode 100644 index db4876494..000000000 --- a/assets/javascript/motion-ui/_zoom.scss +++ /dev/null @@ -1,39 +0,0 @@ -/// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller. -/// @param {Keyword} $state [in] - State to transition to. -/// @param {Number} $from [1.5] - Size to start at. -/// @param {Number} $from [1] - Size to end at. -/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously. -/// @param {Duration} $duration [null] - Length (speed) of the transition. -/// @param {Keyword|Function} $timing [null] - Easing of the transition. -/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. -@mixin mui-zoom( - $state: in, - $from: 1.5, - $to: 1, - $fade: map-get($motion-ui-settings, scale-and-fade), - $duration: null, - $timing: null, - $delay: null -) { - $scale: zoom($from, $to); - - @include transition-start($state) { - @include transition-basics($duration, $timing, $delay); - @include -mui-keyframe-get($scale, 0); - - @if $fade { - transition-property: transform, opacity; - opacity: if($state == in, 0, 1); - } @else { - transition-property: transform, opacity; - } - } - - @include transition-end($state) { - @include -mui-keyframe-get($scale, 100); - - @if $fade { - opacity: if($state == in, 1, 0); - } - } -} diff --git a/assets/javascript/motion-ui/animations.md b/assets/javascript/motion-ui/animations.md deleted file mode 100644 index 20c58a0f7..000000000 --- a/assets/javascript/motion-ui/animations.md +++ /dev/null @@ -1,226 +0,0 @@ -# Animations - -## Basics - -Use the `mui-animation` mixin to create CSS keyframe animations. The mixin accepts a keyframe function, like this: - -```scss -.spin-cw { - @include mui-animation(spin(in, 360deg)); -} -``` - -The CSS output looks like this: - -```css -@keyframes spin-cw-360deg { - 0% { - transform: rotate(0deg); } - 100% { - transform: rotate(360deg); } -} - -.spin-cw { - animation-name: spin-cw-360deg; -} -``` - -**Note that in order to play properly, the element must have at least the property `animation-duration` applied to it as well.** - -There are seven keyframe functions: - -- `fade($from, $to)` -- `hinge($state, $from, $axis, $perspective, $turn-origin)` -- `shake($intensity)` -- `slide($state, $direction, $amount)` -- `spin($state, $direction, $amount)` -- `wiggle($intensity)` -- `zoom($from, $to)` - -All keyframe functions have parameters that customize the effect. For example, with `shake()` and `wiggle()` you can set the intensity of the effect, and with `spin()` you can set how many degrees the spin goes. - -If you're using a keyframe effect as-is, it can be inserted as a plain string instead of a function call, like so: - -.zoom-in { - @include mui-animation(zoom); -} - -## Combination Effects - -Multiple keyframe effects can be combined into one. For example, you can combine a fade, slide, and spin into one animation, for something truly monstrous. - -To create a combined effect, just add more keyframe functions to the `mui-animation` mixin, as additional parameters. - -```scss -.slide-and-fade-and-spin { - @include mui-animation(slide, fade, spin(120deg)); -} -``` - -**Note that this doesn't work with the `shake()` or `wiggle()` animations. Only animations with single start and end keyframes can be combined.** - -## Series Animations - -Multiple elements can be animated in series. - -To set it up, make sure each animating element shares a common parent. - -```html -
    -
    -
    -
    -
    -``` - -Begin your series with the `mui-series()` mixin. Inside this mixin, attach animations to classes with the `mui-queue()` mixin. The first parameter is the length of the animation, the second parameter is an optional pause to create before the next animation, and the remaining parameters are a set of keyframe functions. - -```scss -@include mui-series { - // 2 second shake - .shake { @include mui-queue(2s, 0s, shake); } - // 1 second spin with a 2 second pause - .spin { @include mui-queue(1s, 2s, spin); } - // 1 second zoom and fade - .fade-zoom { @include mui-queue(1s, 0s, fade, zoom); } -} -``` - -To add a delay to the start of the queue, add the length in seconds to the `mui-series` mixin. - -```scss -// 2 second delay before the first shake -@include mui-series(2s) { - .shake { @include mui-queue(2s, 0s, shake()); } - .spin { @include mui-queue(1s, 2s, spin()); } - .wiggle { @include mui-queue(wiggle); } -} -``` - -To trigger the queue, add the class `.is-animating` to the parent container. This can be done easily in JavaScript: - -```js -// Plain JavaScript (IE10+) -document.querySelector('.animation-wrapper').classList.add('is-animating'); - -// jQuery -$('.animation-wrapper').addClass('is-animating'); -``` - - -## Mixins - - -### mui-animation() - -Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property. - -**Parameters:** - -- `effects...` (Function) - One or more effect functions to build the keyframe with. - - -### mui-keyframes() - -Creates a keyframe from one or more effect functions. Use this function instead of `mui-animation` if you want to create a keyframe animation *without* automatically assigning it to the element. - -**Parameters:** - -- `name` (String) - Name of the keyframe. -- `effects...` (Function) - One or more effect functions to build the keyframe with. - - -### mui-series() - -Creates a new animation queue. - -**Parameters:** - -- `delay` (Duration) - Delay in seconds or milliseconds to place at the front of the animation queue. (**Default:** 0s) - - -### mui-queue() - -Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`. - -**Parameters:** - -- `duration` (Duration) - Length of the animation. (**Default:** 1s) -- `gap` (Duration) - Amount of time to pause before playing the animation after this one. Use a negative value to make the next effect overlap with the current one. (**Default:** 0s) -- `keyframes...` (Function) - One or more effect functions to build the keyframe with. - - -## Functions - - -### fade() - -Creates a fading animation. - -**Parameters:** - -- `from` (Number) - Opacity to start at. (**Default:** 0) -- `to` (Number) - Opacity to end at. (**Default:** 1) - - -### hinge() - -Creates a hinge effect by rotating the element. - -**Parameters:** - -- `state` (Keyword) - State to transition to. (**Default:** in) -- `from` (Keyword) - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. (**Default:** left) -- `axis` (Keyword) - Axis of the element to rotate on. Can be `edge` or `center`. (**Default:** edge) -- `perspective` (Number) - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. (**Default:** 2000px) -- `turn-origin` (Keyword) - Side of the element to start the rotation from. Can be `from-back` or `from-front`. (**Default:** from-back) - - -### shake() - -Creates a shaking animation. - -**Parameters:** - -- `intensity` (Percentage) - Intensity of the shake, as a percentage value. (**Default:** 7%) - - -### slide() - -Creates a sliding animation. - -**Parameters:** - -- `state` (Keyword) - Whether to move to (`in`) or from (`out`) the element's default position. (**Default:** in) -- `direction` (Keyword) - Direction to move. Can be `up`, `down`, `left`, or `right`. (**Default:** up) -- `amount` (Number) - Distance to move. Can be any CSS length unit. (**Default:** 100%) - - -### spin() - -Creates a spinning animation. - -**Parameters:** - -- `direction` (Keyword) - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). (**Default:** cw) -- `amount` (Number) - Amount to spin. Can be any CSS angle unit. (**Default:** 360deg) - - -### wiggle() - -Creates a wiggling animation. - -**Parameters:** - -- `intensity` (Number) - Intensity of the wiggle. Can be any CSS angle unit. (**Default:** 7deg) - - -### zoom() - -Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller. - -**Parameters:** - -- `from` (Number) - Size to start at. (**Default:** 1.5) -- `from` (Number) - Size to end at. (**Default:** 1) - diff --git a/assets/javascript/motion-ui/bower.json b/assets/javascript/motion-ui/bower.json deleted file mode 100644 index 6c61607ec..000000000 --- a/assets/javascript/motion-ui/bower.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "motion-ui", - "version": "1.1.0", - "authors": [ - "ZURB " - ], - "description": "Sass library for creating transitions and animations.", - "main": [ - "dist/motion-ui.css", - "dist/motion-ui.js" - ], - "keywords": [ - "Sass", - "motion" - ], - "license": "MIT", - "ignore": [ - "**/.*", - "_build", - "node_modules", - "bower_components", - "docs/src", - "test" - ], - "dependencies": { - "jquery": "~2.1.4" - } -} diff --git a/assets/javascript/motion-ui/classes.md b/assets/javascript/motion-ui/classes.md deleted file mode 100644 index 64ee674a7..000000000 --- a/assets/javascript/motion-ui/classes.md +++ /dev/null @@ -1,81 +0,0 @@ -# CSS Classes - -The Sass mixins are the heart of Motion UI, but the library also includes many pre-made CSS classes to get you up and running faster. - -## Defaults - -The pre-made classes all use these transition/animation defaults: - -- **Speed:** 500ms -- **Timing:** Linear -- **Delay:** 0s - -These defaults can be changed by modifying the [Motion UI settings](configuration.md); - -## Transition Classes - -- **Slide:** - - `.slide-in-down` - - `.slide-in-left` - - `.slide-in-up` - - `.slide-in-right` - - `.slide-out-down` - - `.slide-out-left` - - `.slide-out-up` - - `.slide-out-right` -- **Fade:** - - `.fade-in` - - `.fade-out` -- **Hinge:** - - `.hinge-in-from-top` - - `.hinge-in-from-right` - - `.hinge-in-from-bottom` - - `.hinge-in-from-left` - - `.hinge-in-from-middle-x` - - `.hinge-in-from-middle-y` - - `.hinge-out-from-top` - - `.hinge-out-from-right` - - `.hinge-out-from-bottom` - - `.hinge-out-from-left` - - `.hinge-out-from-middle-x` - - `.hinge-out-from-middle-y` -- **Scale:** - - `.scale-in-up` - - `.scale-in-down` - - `.scale-out-up` - - `.scale-out-down` -- **Spin:** - - `.spin-in` - - `.spin-out` - - `.spin-in-ccw` - - `.spin-out-ccw` - -## Animation Classes - -- `.shake`: shakes the element horizontally. -- `.wiggle`: rotates the element back and forth. -- `.spin-cw`: rotates the element once. -- `.spin-ccw`: rotates the element once, counterclockwise. - -## Modifier Classes - -Modifiers work with both transitions and animations. - -- **Speed:** - - `.slow` (750ms) - - `.fast` (250ms) -- **Timing:** - - `.linear` - - `.ease` - - `.ease-in` - - `.ease-out` - - `.ease-in-out` - - `.bounce-in` - - `.bounce-out` - - `.bounce-in-out` -- **Delay:** - - `.short-delay` (300ms) - - `.long-delay` (700ms) - - - diff --git a/assets/javascript/motion-ui/configuration.md b/assets/javascript/motion-ui/configuration.md deleted file mode 100644 index a04409e88..000000000 --- a/assets/javascript/motion-ui/configuration.md +++ /dev/null @@ -1,63 +0,0 @@ -# Configuration - -Motion UI has six variables which store all of the library's settings. Each is a map of keys and values. - -## States - -```scss -$motion-ui-states: ( - in: 'enter', - out: 'leave', -); -``` - -Motion UI defines two motion states: `in` and `out`, which create classes with the words `enter` and `leave` respectively. - -## Classes - -```scss -$motion-ui-classes: ( - chain: true, - prefix: 'mui-', - active: '-active', -); -``` - -Different animation libraries have different ways of writing classes, but most libraries require a setup class, as well as an active class to trigger a transition or animation. - -The default configuration outputs classes like this: - -```css -.fade-in.mui-enter {} -.fade-in.mui-enter.mui-enter-active {} -``` - -Set the `chain` property of `$motion-ui-classes` to `false` to create classes like this: - -```css -.fade-in-mui-enter {} -.fade-in-mui-enter.fade-in-mui-enter-active {} -``` - -The class output can also be fine-tuned with the `prefix` and `active` properties. - -## Animation Defaults - -The maps `$motion-ui-speeds`, `$motion-ui-delays`, and `$motion-ui-easings` define terms for animation speeds, delays, and timing functions. For example, the `default` speed of animations is 500ms, while `slow` is 750ms, and `fast` is 250ms. - -## Other Settings - -Miscellaneous settings are in the `$motion-ui-settings` map. These settings define if animations include a fade, and what class to use for triggering an animation queue. - -```scss -$motion-ui-settings: ( - slide-and-fade: false, - hinge-and-fade: true, - scale-and-fade: true, - spin-and-fade: true, - activate-queue-class: 'is-animating' -); -``` - - - diff --git a/assets/javascript/motion-ui/gulpfile.js b/assets/javascript/motion-ui/gulpfile.js deleted file mode 100644 index f290bf27b..000000000 --- a/assets/javascript/motion-ui/gulpfile.js +++ /dev/null @@ -1,90 +0,0 @@ -var $ = require('gulp-load-plugins')(); -var gulp = require('gulp'); -var rimraf = require('rimraf').sync; -var sequence = require('run-sequence'); -var supercollider = require('supercollider'); - -var COMPATIBILITY = [ - 'last 2 versions', - 'ie >= 10', - 'and_chr >= 2.3' -]; - -supercollider - .config({ - template: './docs/src/_template.hbs', - extension: 'md', - marked: false, - handlebars: require('./lib/handlebars') - }) - .adapter('sass'); - -gulp.task('clean', function(done) { - rimraf('./_build'); - rimraf('./docs/*.md'); - done(); -}); - -gulp.task('docs', function() { - return gulp.src('./docs/src/*.md') - .pipe(supercollider.init()) - .pipe(gulp.dest('./docs')); -}); - -gulp.task('sass', function() { - return gulp.src('./motion-ui.scss') - .pipe($.sass().on('error', $.sass.logError)) - .pipe($.autoprefixer({ - browsers: COMPATIBILITY - })) - .pipe(gulp.dest('./_build')); -}); - -gulp.task('javascript', function() { - return gulp.src('./motion-ui.js') - .pipe($.umd({ - dependencies: function(file) { - return [{ name: 'jquery', amd: 'jquery', cjs: 'jquery', global: 'jQuery', param: '$' }]; - }, - exports: function(file) { - return 'MotionUI'; - }, - namespace: function(file) { - return 'MotionUI'; - } - })) - .pipe(gulp.dest('./_build')); -}); - -gulp.task('dist', ['dist:sass', 'dist:javascript']); - -gulp.task('dist:sass', ['sass'], function() { - return gulp.src('./_build/motion-ui.css') - .pipe(gulp.dest('./dist')) - .pipe($.minifyCss()) - .pipe($.rename('motion-ui.min.css')) - .pipe(gulp.dest('./dist')); -}); - -gulp.task('dist:javascript', ['javascript'], function() { - return gulp.src('./_build/motion-ui.js') - .pipe(gulp.dest('./dist')) - .pipe($.uglify()) - .pipe($.rename('motion-ui.min.js')) - .pipe(gulp.dest('./dist')); -}); - -gulp.task('build', function(done) { - sequence('clean', ['docs', 'sass', 'javascript'], done); -}); - -gulp.task('lint', function() { - return gulp.src('./src/**/*.scss') - .pipe($.scssLint()); -}) - -gulp.task('default', ['build'], function() { - gulp.watch(['./docs/src/*.md', './docs/src/_template.hbs'], ['docs']); - gulp.watch(['./src/**/*.scss', './motion-ui.scss'], ['sass']); - gulp.watch('./motion-ui.js', ['javascript']); -}); diff --git a/assets/javascript/motion-ui/handlebars.js b/assets/javascript/motion-ui/handlebars.js deleted file mode 100644 index acd3a7920..000000000 --- a/assets/javascript/motion-ui/handlebars.js +++ /dev/null @@ -1,8 +0,0 @@ -var handlebars = require('handlebars'); - -handlebars.registerHelper('private', function(item, content) { - if (item.access === 'public') return content.fn(this); - else return content.inverse(this); -}); - -module.exports = handlebars; diff --git a/assets/javascript/motion-ui/installation.md b/assets/javascript/motion-ui/installation.md deleted file mode 100644 index 1c7e870aa..000000000 --- a/assets/javascript/motion-ui/installation.md +++ /dev/null @@ -1,50 +0,0 @@ -# Getting Started - -## Installation - -Install Motion UI with npm or Bower. - -```bash -npm install motion-ui --save -bower install motion-ui --save -``` - -## Sass Usage - -To import the Sass files into a project, add the load path `[modules_folder]/motion-ui/src` to your Sass configuration, then `@import` the library: - -```scss -@import 'motion-ui'; -``` - -**[Autoprefixer](https://github.com/postcss/autoprefixer) is required to use this library.** The library uses unprefixed `transition` and `animation` properties, which are then prefixed by Autoprefixer. - -The library includes two mixins which export all of the [default CSS](classes.md) for the framework. This includes: - -- Transitions for slide, fade, hinge, scale, and spin -- Animation classes for spinning, shaking, and wiggling -- Modifier classes for transition/animation speed, timing, and delay - -```scss -@include motion-ui-transitions; -@include motion-ui-animations; -``` - -## CSS Usage - -The package files also include these pre-made classes as a standalone CSS file, in minified and unminified flavors. - -- **Uncompressed:** `[modules_folder]/motion-ui/dist/motion-ui.css` -- **Compressed:** `[modules_folder]/motion-ui/dist/motion-ui.min.css` - -## JavaScript Usage - -The package includes a small JavaScript library to help you transition elements in and out using Motion UI classes. It can be referenced as a browser global or a CommonJS/AMD package. Like the CSS, there's uncompressed and compressed versions included. - -- **Uncompressed:** `[modules_folder]/motion-ui/dist/motion-ui.js` -- **Compressed:** `[modules_folder]/motion-ui/dist/motion-ui.min.js` - -Refer to the full [JavaScript documentation](javascript.md) to learn more about how the JS library works. - - - diff --git a/assets/javascript/motion-ui/javascript.md b/assets/javascript/motion-ui/javascript.md deleted file mode 100644 index ac428745c..000000000 --- a/assets/javascript/motion-ui/javascript.md +++ /dev/null @@ -1,36 +0,0 @@ -# JavaScript - -Motion UI includes a small JavaScript library that can play transitions, although this specific library is not required to take advantage of Motion UI's CSS. Animating in reveals a hidden element, while animating out hides a visible element. - -The library is available on `window.MotionUI`, or can imported with a module system. - -## Usage - -The `MotionUI` object has two methods: `animateIn()` and `animateOut()`. Both functions take three parameters: - -- `element`: a DOM element to animate. -- `animation`: a transition class to use. -- `cb` (optional): a callback to run when the transition finishes. Within the callback, the value of `this` is the DOM element that was transitioned. - -Here's an example: - -```js -var $elem = $('[data-animate]'); - -MotionUI.animateIn($elem, 'slide-in', function() { - console.log('Transition finished!'); -}); -``` - -What about animations? Those can be triggered just by adding the animation class to an element. Here are examples with plain JavaScript and with jQuery: - -```js -// Plain JavaScript (IE10+) -document.querySelector('.animating-thing').classList.add('wiggle'); - -// jQuery -$('.animating-thing').addClass('wiggle'); -``` - - - diff --git a/assets/javascript/motion-ui/motion-ui.css b/assets/javascript/motion-ui/motion-ui.css deleted file mode 100644 index 1cc2ebeb1..000000000 --- a/assets/javascript/motion-ui/motion-ui.css +++ /dev/null @@ -1,543 +0,0 @@ -.slide-in-down.mui-enter, .slide-in-left.mui-enter, .slide-in-up.mui-enter, .slide-in-right.mui-enter, .slide-out-down.mui-leave, .slide-out-right.mui-leave, .slide-out-up.mui-leave, .slide-out-left.mui-leave, .fade-in.mui-enter, .fade-out.mui-leave, .hinge-in-from-top.mui-enter, .hinge-in-from-right.mui-enter, .hinge-in-from-bottom.mui-enter, .hinge-in-from-left.mui-enter, .hinge-in-from-middle-x.mui-enter, .hinge-in-from-middle-y.mui-enter, .hinge-out-from-top.mui-leave, .hinge-out-from-right.mui-leave, .hinge-out-from-bottom.mui-leave, .hinge-out-from-left.mui-leave, .hinge-out-from-middle-x.mui-leave, .hinge-out-from-middle-y.mui-leave, .scale-in-up.mui-enter, .scale-in-down.mui-enter, .scale-out-up.mui-leave, .scale-out-down.mui-leave, .spin-in.mui-enter, .spin-out.mui-leave, .spin-in-ccw.mui-enter, .spin-out-ccw.mui-leave { - transition-duration: 500ms; - transition-timing-function: linear; } - -.slide-in-down.mui-enter { - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; } - -.slide-in-down.mui-enter.mui-enter-active { - -webkit-transform: translateY(0); - transform: translateY(0); } - -.slide-in-left.mui-enter { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; } - -.slide-in-left.mui-enter.mui-enter-active { - -webkit-transform: translateX(0); - transform: translateX(0); } - -.slide-in-up.mui-enter { - -webkit-transform: translateY(100%); - transform: translateY(100%); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; } - -.slide-in-up.mui-enter.mui-enter-active { - -webkit-transform: translateY(0); - transform: translateY(0); } - -.slide-in-right.mui-enter { - -webkit-transform: translateX(100%); - transform: translateX(100%); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; } - -.slide-in-right.mui-enter.mui-enter-active { - -webkit-transform: translateX(0); - transform: translateX(0); } - -.slide-out-down.mui-leave { - -webkit-transform: translateY(0); - transform: translateY(0); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; } - -.slide-out-down.mui-leave.mui-leave-active { - -webkit-transform: translateY(-100%); - transform: translateY(-100%); } - -.slide-out-right.mui-leave { - -webkit-transform: translateX(0); - transform: translateX(0); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; } - -.slide-out-right.mui-leave.mui-leave-active { - -webkit-transform: translateX(100%); - transform: translateX(100%); } - -.slide-out-up.mui-leave { - -webkit-transform: translateY(0); - transform: translateY(0); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; } - -.slide-out-up.mui-leave.mui-leave-active { - -webkit-transform: translateY(-100%); - transform: translateY(-100%); } - -.slide-out-left.mui-leave { - -webkit-transform: translateX(0); - transform: translateX(0); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; } - -.slide-out-left.mui-leave.mui-leave-active { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); } - -.fade-in.mui-enter { - opacity: 0; - transition-property: opacity; } - -.fade-in.mui-enter.mui-enter-active { - opacity: 1; } - -.fade-out.mui-leave { - opacity: 1; - transition-property: opacity; } - -.fade-out.mui-leave.mui-leave-active { - opacity: 0; } - -.hinge-in-from-top.mui-enter { - -webkit-transform: perspective(2000px) rotateX(-90deg); - transform: perspective(2000px) rotateX(-90deg); - -webkit-transform-origin: top; - transform-origin: top; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 0; } - -.hinge-in-from-top.mui-enter.mui-enter-active { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - opacity: 1; } - -.hinge-in-from-right.mui-enter { - -webkit-transform: perspective(2000px) rotateY(-90deg); - transform: perspective(2000px) rotateY(-90deg); - -webkit-transform-origin: right; - transform-origin: right; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 0; } - -.hinge-in-from-right.mui-enter.mui-enter-active { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - opacity: 1; } - -.hinge-in-from-bottom.mui-enter { - -webkit-transform: perspective(2000px) rotateX(90deg); - transform: perspective(2000px) rotateX(90deg); - -webkit-transform-origin: bottom; - transform-origin: bottom; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 0; } - -.hinge-in-from-bottom.mui-enter.mui-enter-active { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - opacity: 1; } - -.hinge-in-from-left.mui-enter { - -webkit-transform: perspective(2000px) rotateY(90deg); - transform: perspective(2000px) rotateY(90deg); - -webkit-transform-origin: left; - transform-origin: left; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 0; } - -.hinge-in-from-left.mui-enter.mui-enter-active { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - opacity: 1; } - -.hinge-in-from-middle-x.mui-enter { - -webkit-transform: perspective(2000px) rotateX(-90deg); - transform: perspective(2000px) rotateX(-90deg); - -webkit-transform-origin: center; - transform-origin: center; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 0; } - -.hinge-in-from-middle-x.mui-enter.mui-enter-active { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - opacity: 1; } - -.hinge-in-from-middle-y.mui-enter { - -webkit-transform: perspective(2000px) rotateY(-90deg); - transform: perspective(2000px) rotateY(-90deg); - -webkit-transform-origin: center; - transform-origin: center; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 0; } - -.hinge-in-from-middle-y.mui-enter.mui-enter-active { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - opacity: 1; } - -.hinge-out-from-top.mui-leave { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - -webkit-transform-origin: top; - transform-origin: top; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 1; } - -.hinge-out-from-top.mui-leave.mui-leave-active { - -webkit-transform: perspective(2000px) rotateX(-90deg); - transform: perspective(2000px) rotateX(-90deg); - opacity: 0; } - -.hinge-out-from-right.mui-leave { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - -webkit-transform-origin: right; - transform-origin: right; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 1; } - -.hinge-out-from-right.mui-leave.mui-leave-active { - -webkit-transform: perspective(2000px) rotateY(-90deg); - transform: perspective(2000px) rotateY(-90deg); - opacity: 0; } - -.hinge-out-from-bottom.mui-leave { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - -webkit-transform-origin: bottom; - transform-origin: bottom; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 1; } - -.hinge-out-from-bottom.mui-leave.mui-leave-active { - -webkit-transform: perspective(2000px) rotateX(90deg); - transform: perspective(2000px) rotateX(90deg); - opacity: 0; } - -.hinge-out-from-left.mui-leave { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - -webkit-transform-origin: left; - transform-origin: left; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 1; } - -.hinge-out-from-left.mui-leave.mui-leave-active { - -webkit-transform: perspective(2000px) rotateY(90deg); - transform: perspective(2000px) rotateY(90deg); - opacity: 0; } - -.hinge-out-from-middle-x.mui-leave { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - -webkit-transform-origin: center; - transform-origin: center; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 1; } - -.hinge-out-from-middle-x.mui-leave.mui-leave-active { - -webkit-transform: perspective(2000px) rotateX(-90deg); - transform: perspective(2000px) rotateX(-90deg); - opacity: 0; } - -.hinge-out-from-middle-y.mui-leave { - -webkit-transform: perspective(2000px) rotate(0deg); - transform: perspective(2000px) rotate(0deg); - -webkit-transform-origin: center; - transform-origin: center; - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 1; } - -.hinge-out-from-middle-y.mui-leave.mui-leave-active { - -webkit-transform: perspective(2000px) rotateY(-90deg); - transform: perspective(2000px) rotateY(-90deg); - opacity: 0; } - -.scale-in-up.mui-enter { - -webkit-transform: scale(0.5); - transform: scale(0.5); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 0; } - -.scale-in-up.mui-enter.mui-enter-active { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 1; } - -.scale-in-down.mui-enter { - -webkit-transform: scale(1.5); - transform: scale(1.5); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 0; } - -.scale-in-down.mui-enter.mui-enter-active { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 1; } - -.scale-out-up.mui-leave { - -webkit-transform: scale(1); - transform: scale(1); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 1; } - -.scale-out-up.mui-leave.mui-leave-active { - -webkit-transform: scale(1.5); - transform: scale(1.5); - opacity: 0; } - -.scale-out-down.mui-leave { - -webkit-transform: scale(1); - transform: scale(1); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 1; } - -.scale-out-down.mui-leave.mui-leave-active { - -webkit-transform: scale(0.5); - transform: scale(0.5); - opacity: 0; } - -.spin-in.mui-enter { - -webkit-transform: rotate(-0.75turn); - transform: rotate(-0.75turn); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 0; } - -.spin-in.mui-enter.mui-enter-active { - -webkit-transform: rotate(0); - transform: rotate(0); - opacity: 1; } - -.spin-out.mui-leave { - -webkit-transform: rotate(0); - transform: rotate(0); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 1; } - -.spin-out.mui-leave.mui-leave-active { - -webkit-transform: rotate(0.75turn); - transform: rotate(0.75turn); - opacity: 0; } - -.spin-in-ccw.mui-enter { - -webkit-transform: rotate(0.75turn); - transform: rotate(0.75turn); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 0; } - -.spin-in-ccw.mui-enter.mui-enter-active { - -webkit-transform: rotate(0); - transform: rotate(0); - opacity: 1; } - -.spin-out-ccw.mui-leave { - -webkit-transform: rotate(0); - transform: rotate(0); - transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; - opacity: 1; } - -.spin-out-ccw.mui-leave.mui-leave-active { - -webkit-transform: rotate(-0.75turn); - transform: rotate(-0.75turn); - opacity: 0; } - -.slow { - transition-duration: 750ms !important; } - -.fast { - transition-duration: 250ms !important; } - -.linear { - transition-timing-function: linear !important; } - -.ease { - transition-timing-function: ease !important; } - -.ease-in { - transition-timing-function: ease-in !important; } - -.ease-out { - transition-timing-function: ease-out !important; } - -.ease-in-out { - transition-timing-function: ease-in-out !important; } - -.bounce-in { - transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } - -.bounce-out { - transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } - -.bounce-in-out { - transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } - -.short-delay { - transition-delay: 300ms !important; } - -.long-delay { - transition-delay: 700ms !important; } - -.shake { - -webkit-animation-name: shake-7; - animation-name: shake-7; } - -@-webkit-keyframes shake-7 { - 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { - -webkit-transform: translateX(7%); - transform: translateX(7%); } - 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { - -webkit-transform: translateX(-7%); - transform: translateX(-7%); } } - -@keyframes shake-7 { - 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { - -webkit-transform: translateX(7%); - transform: translateX(7%); } - 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { - -webkit-transform: translateX(-7%); - transform: translateX(-7%); } } - -.spin-cw { - -webkit-animation-name: spin-cw-1turn; - animation-name: spin-cw-1turn; } - -@-webkit-keyframes spin-cw-1turn { - 0% { - -webkit-transform: rotate(-1turn); - transform: rotate(-1turn); } - 100% { - -webkit-transform: rotate(0); - transform: rotate(0); } } - -@keyframes spin-cw-1turn { - 0% { - -webkit-transform: rotate(-1turn); - transform: rotate(-1turn); } - 100% { - -webkit-transform: rotate(0); - transform: rotate(0); } } - -.spin-ccw { - -webkit-animation-name: spin-cw-1turn; - animation-name: spin-cw-1turn; } - -@keyframes spin-cw-1turn { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); } - 100% { - -webkit-transform: rotate(1turn); - transform: rotate(1turn); } } - -.wiggle { - -webkit-animation-name: wiggle-7deg; - animation-name: wiggle-7deg; } - -@-webkit-keyframes wiggle-7deg { - 40%, 50%, 60% { - -webkit-transform: rotate(7deg); - transform: rotate(7deg); } - 35%, 45%, 55%, 65% { - -webkit-transform: rotate(-7deg); - transform: rotate(-7deg); } - 0%, 30%, 70%, 100% { - -webkit-transform: rotate(0); - transform: rotate(0); } } - -@keyframes wiggle-7deg { - 40%, 50%, 60% { - -webkit-transform: rotate(7deg); - transform: rotate(7deg); } - 35%, 45%, 55%, 65% { - -webkit-transform: rotate(-7deg); - transform: rotate(-7deg); } - 0%, 30%, 70%, 100% { - -webkit-transform: rotate(0); - transform: rotate(0); } } - -.infinite { - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; } - -.slow { - -webkit-animation-duration: 750ms !important; - animation-duration: 750ms !important; } - -.fast { - -webkit-animation-duration: 250ms !important; - animation-duration: 250ms !important; } - -.linear { - -webkit-animation-timing-function: linear !important; - animation-timing-function: linear !important; } - -.ease { - -webkit-animation-timing-function: ease !important; - animation-timing-function: ease !important; } - -.ease-in { - -webkit-animation-timing-function: ease-in !important; - animation-timing-function: ease-in !important; } - -.ease-out { - -webkit-animation-timing-function: ease-out !important; - animation-timing-function: ease-out !important; } - -.ease-in-out { - -webkit-animation-timing-function: ease-in-out !important; - animation-timing-function: ease-in-out !important; } - -.bounce-in { - -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; - animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } - -.bounce-out { - -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; - animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } - -.bounce-in-out { - -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; - animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } - -.short-delay { - -webkit-animation-delay: 300ms !important; - animation-delay: 300ms !important; } - -.long-delay { - -webkit-animation-delay: 700ms !important; - animation-delay: 700ms !important; } diff --git a/assets/javascript/motion-ui/motion-ui.js b/assets/javascript/motion-ui/motion-ui.js deleted file mode 100644 index f51ef5e14..000000000 --- a/assets/javascript/motion-ui/motion-ui.js +++ /dev/null @@ -1,105 +0,0 @@ -'use strict'; - -// Polyfill for requestAnimationFrame -(function() { - if (!Date.now) - Date.now = function() { return new Date().getTime(); }; - - var vendors = ['webkit', 'moz']; - for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { - var vp = vendors[i]; - window.requestAnimationFrame = window[vp+'RequestAnimationFrame']; - window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame'] - || window[vp+'CancelRequestAnimationFrame']); - } - if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) - || !window.requestAnimationFrame || !window.cancelAnimationFrame) { - var lastTime = 0; - window.requestAnimationFrame = function(callback) { - var now = Date.now(); - var nextTime = Math.max(lastTime + 16, now); - return setTimeout(function() { callback(lastTime = nextTime); }, - nextTime - now); - }; - window.cancelAnimationFrame = clearTimeout; - } -})(); - -var initClasses = ['mui-enter', 'mui-leave']; -var activeClasses = ['mui-enter-active', 'mui-leave-active']; - -// Find the right "transitionend" event for this browser -var endEvent = (function() { - var transitions = { - 'transition': 'transitionend', - 'WebkitTransition': 'webkitTransitionEnd', - 'MozTransition': 'transitionend', - 'OTransition': 'otransitionend' - } - var elem = window.document.createElement('div'); - - for (var t in transitions) { - if (typeof elem.style[t] !== 'undefined') { - return transitions[t]; - } - } - - return null; -})(); - -function animate(isIn, element, animation, cb) { - element = $(element).eq(0); - - if (!element.length) return; - - if (endEvent === null) { - isIn ? element.show() : element.hide(); - cb(); - return; - } - - var initClass = isIn ? initClasses[0] : initClasses[1]; - var activeClass = isIn ? activeClasses[0] : activeClasses[1]; - - // Set up the animation - reset(); - element.addClass(animation); - element.css('transition', 'none'); - requestAnimationFrame(function() { - element.addClass(initClass); - if (isIn) element.show(); - }); - - // Start the animation - requestAnimationFrame(function() { - element[0].offsetWidth; - element.css('transition', ''); - element.addClass(activeClass); - }); - - // Clean up the animation when it finishes - element.one('transitionend', finish); - - // Hides the element (for out animations), resets the element, and runs a callback - function finish() { - if (!isIn) element.hide(); - reset(); - if (cb) cb.apply(element); - } - - // Resets transitions and removes motion-specific classes - function reset() { - element[0].style.transitionDuration = 0; - element.removeClass(initClass + ' ' + activeClass + ' ' + animation); - } -} - -var MotionUI = { - animateIn: function(element, animation, cb) { - animate(true, element, animation, cb); - }, - - animateOut: function(element, animation, cb) { - animate(false, element, animation, cb); - } -} diff --git a/assets/javascript/motion-ui/motion-ui.min.css b/assets/javascript/motion-ui/motion-ui.min.css deleted file mode 100644 index 5b07906f2..000000000 --- a/assets/javascript/motion-ui/motion-ui.min.css +++ /dev/null @@ -1 +0,0 @@ -.fade-in.mui-enter,.fade-out.mui-leave,.hinge-in-from-bottom.mui-enter,.hinge-in-from-left.mui-enter,.hinge-in-from-middle-x.mui-enter,.hinge-in-from-middle-y.mui-enter,.hinge-in-from-right.mui-enter,.hinge-in-from-top.mui-enter,.hinge-out-from-bottom.mui-leave,.hinge-out-from-left.mui-leave,.hinge-out-from-middle-x.mui-leave,.hinge-out-from-middle-y.mui-leave,.hinge-out-from-right.mui-leave,.hinge-out-from-top.mui-leave,.scale-in-down.mui-enter,.scale-in-up.mui-enter,.scale-out-down.mui-leave,.scale-out-up.mui-leave,.slide-in-down.mui-enter,.slide-in-left.mui-enter,.slide-in-right.mui-enter,.slide-in-up.mui-enter,.slide-out-down.mui-leave,.slide-out-left.mui-leave,.slide-out-right.mui-leave,.slide-out-up.mui-leave,.spin-in-ccw.mui-enter,.spin-in.mui-enter,.spin-out-ccw.mui-leave,.spin-out.mui-leave{transition-duration:.5s;transition-timing-function:linear}.slide-in-down.mui-enter{-webkit-transform:translateY(-100%);transform:translateY(-100%);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-in-left.mui-enter,.slide-in-up.mui-enter{transition-property:-webkit-transform,opacity;-webkit-backface-visibility:hidden}.slide-in-down.mui-enter.mui-enter-active{-webkit-transform:translateY(0);transform:translateY(0)}.slide-in-left.mui-enter{-webkit-transform:translateX(-100%);transform:translateX(-100%);transition-property:transform,opacity;backface-visibility:hidden}.slide-in-left.mui-enter.mui-enter-active{-webkit-transform:translateX(0);transform:translateX(0)}.slide-in-up.mui-enter{-webkit-transform:translateY(100%);transform:translateY(100%);transition-property:transform,opacity;backface-visibility:hidden}.slide-in-right.mui-enter,.slide-out-down.mui-leave{transition-property:-webkit-transform,opacity;-webkit-backface-visibility:hidden}.slide-in-up.mui-enter.mui-enter-active{-webkit-transform:translateY(0);transform:translateY(0)}.slide-in-right.mui-enter{-webkit-transform:translateX(100%);transform:translateX(100%);transition-property:transform,opacity;backface-visibility:hidden}.slide-in-right.mui-enter.mui-enter-active{-webkit-transform:translateX(0);transform:translateX(0)}.slide-out-down.mui-leave{-webkit-transform:translateY(0);transform:translateY(0);transition-property:transform,opacity;backface-visibility:hidden}.slide-out-right.mui-leave,.slide-out-up.mui-leave{transition-property:-webkit-transform,opacity;-webkit-backface-visibility:hidden}.slide-out-down.mui-leave.mui-leave-active{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.slide-out-right.mui-leave{-webkit-transform:translateX(0);transform:translateX(0);transition-property:transform,opacity;backface-visibility:hidden}.slide-out-right.mui-leave.mui-leave-active{-webkit-transform:translateX(100%);transform:translateX(100%)}.slide-out-up.mui-leave{-webkit-transform:translateY(0);transform:translateY(0);transition-property:transform,opacity;backface-visibility:hidden}.slide-out-up.mui-leave.mui-leave-active{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.slide-out-left.mui-leave{-webkit-transform:translateX(0);transform:translateX(0);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-out-left.mui-leave.mui-leave-active{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.fade-in.mui-enter{opacity:0;transition-property:opacity}.fade-in.mui-enter.mui-enter-active{opacity:1}.fade-out.mui-leave{opacity:1;transition-property:opacity}.fade-out.mui-leave.mui-leave-active{opacity:0}.hinge-in-from-top.mui-enter{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);-webkit-transform-origin:top;transform-origin:top;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-top.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-right.mui-enter{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);-webkit-transform-origin:right;transform-origin:right;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-right.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-bottom.mui-enter{-webkit-transform:perspective(2000px) rotateX(90deg);transform:perspective(2000px) rotateX(90deg);-webkit-transform-origin:bottom;transform-origin:bottom;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-bottom.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-left.mui-enter{-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);-webkit-transform-origin:left;transform-origin:left;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-left.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-middle-x.mui-enter{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-middle-x.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-in-from-middle-y.mui-enter{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.hinge-in-from-middle-y.mui-enter.mui-enter-active{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);opacity:1}.hinge-out-from-top.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:top;transform-origin:top;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-top.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}.hinge-out-from-right.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:right;transform-origin:right;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-right.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}.hinge-out-from-bottom.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:bottom;transform-origin:bottom;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-bottom.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(90deg);transform:perspective(2000px) rotateX(90deg);opacity:0}.hinge-out-from-left.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:left;transform-origin:left;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-left.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);opacity:0}.hinge-out-from-middle-x.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-middle-x.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}.hinge-out-from-middle-y.mui-leave{-webkit-transform:perspective(2000px) rotate(0);transform:perspective(2000px) rotate(0);-webkit-transform-origin:center;transform-origin:center;transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.hinge-out-from-middle-y.mui-leave.mui-leave-active{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}.scale-in-up.mui-enter{-webkit-transform:scale(.5);transform:scale(.5);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.scale-in-up.mui-enter.mui-enter-active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.scale-in-down.mui-enter{-webkit-transform:scale(1.5);transform:scale(1.5);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:0}.scale-in-down.mui-enter.mui-enter-active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.scale-out-up.mui-leave{-webkit-transform:scale(1);transform:scale(1);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.scale-out-down.mui-leave,.spin-in.mui-enter{transition-property:-webkit-transform,opacity}.scale-out-up.mui-leave.mui-leave-active{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}.scale-out-down.mui-leave{-webkit-transform:scale(1);transform:scale(1);transition-property:transform,opacity;opacity:1}.scale-out-down.mui-leave.mui-leave-active{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}.spin-in.mui-enter{-webkit-transform:rotate(-.75turn);transform:rotate(-.75turn);transition-property:transform,opacity;opacity:0}.spin-in-ccw.mui-enter,.spin-out.mui-leave{transition-property:-webkit-transform,opacity}.spin-in.mui-enter.mui-enter-active{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}.spin-out.mui-leave{-webkit-transform:rotate(0);transform:rotate(0);transition-property:transform,opacity;opacity:1}.spin-out.mui-leave.mui-leave-active{-webkit-transform:rotate(.75turn);transform:rotate(.75turn);opacity:0}.spin-in-ccw.mui-enter{-webkit-transform:rotate(.75turn);transform:rotate(.75turn);transition-property:transform,opacity;opacity:0}.spin-in-ccw.mui-enter.mui-enter-active{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}.spin-out-ccw.mui-leave{-webkit-transform:rotate(0);transform:rotate(0);transition-property:-webkit-transform,opacity;transition-property:transform,opacity;opacity:1}.spin-out-ccw.mui-leave.mui-leave-active{-webkit-transform:rotate(-.75turn);transform:rotate(-.75turn);opacity:0}.slow{transition-duration:750ms!important;-webkit-animation-duration:750ms!important;animation-duration:750ms!important}.fast{transition-duration:250ms!important;-webkit-animation-duration:250ms!important;animation-duration:250ms!important}.linear{transition-timing-function:linear!important;-webkit-animation-timing-function:linear!important;animation-timing-function:linear!important}.ease{transition-timing-function:ease!important;-webkit-animation-timing-function:ease!important;animation-timing-function:ease!important}.ease-in{transition-timing-function:ease-in!important;-webkit-animation-timing-function:ease-in!important;animation-timing-function:ease-in!important}.ease-out{transition-timing-function:ease-out!important;-webkit-animation-timing-function:ease-out!important;animation-timing-function:ease-out!important}.ease-in-out{transition-timing-function:ease-in-out!important;-webkit-animation-timing-function:ease-in-out!important;animation-timing-function:ease-in-out!important}.bounce-in{transition-timing-function:cubic-bezier(.485,.155,.24,1.245)!important;-webkit-animation-timing-function:cubic-bezier(.485,.155,.24,1.245)!important;animation-timing-function:cubic-bezier(.485,.155,.24,1.245)!important}.bounce-out{transition-timing-function:cubic-bezier(.485,.155,.515,.845)!important;-webkit-animation-timing-function:cubic-bezier(.485,.155,.515,.845)!important;animation-timing-function:cubic-bezier(.485,.155,.515,.845)!important}.bounce-in-out{transition-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important;-webkit-animation-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important;animation-timing-function:cubic-bezier(.76,-.245,.24,1.245)!important}.short-delay{transition-delay:.3s!important;-webkit-animation-delay:.3s!important;animation-delay:.3s!important}.long-delay{transition-delay:.7s!important;-webkit-animation-delay:.7s!important;animation-delay:.7s!important}.shake{-webkit-animation-name:shake-7;animation-name:shake-7}@-webkit-keyframes shake-7{0%,10%,20%,30%,40%,50%,60%,70%,80%,90%{-webkit-transform:translateX(7%);transform:translateX(7%)}15%,25%,35%,45%,5%,55%,65%,75%,85%,95%{-webkit-transform:translateX(-7%);transform:translateX(-7%)}}@keyframes shake-7{0%,10%,20%,30%,40%,50%,60%,70%,80%,90%{-webkit-transform:translateX(7%);transform:translateX(7%)}15%,25%,35%,45%,5%,55%,65%,75%,85%,95%{-webkit-transform:translateX(-7%);transform:translateX(-7%)}}.spin-cw{-webkit-animation-name:spin-cw-1turn;animation-name:spin-cw-1turn}@-webkit-keyframes spin-cw-1turn{0%{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}.spin-ccw{-webkit-animation-name:spin-cw-1turn;animation-name:spin-cw-1turn}@keyframes spin-cw-1turn{0%,100%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.wiggle{-webkit-animation-name:wiggle-7deg;animation-name:wiggle-7deg}@-webkit-keyframes wiggle-7deg{40%,50%,60%{-webkit-transform:rotate(7deg);transform:rotate(7deg)}35%,45%,55%,65%{-webkit-transform:rotate(-7deg);transform:rotate(-7deg)}0%,100%,30%,70%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes wiggle-7deg{40%,50%,60%{-webkit-transform:rotate(7deg);transform:rotate(7deg)}35%,45%,55%,65%{-webkit-transform:rotate(-7deg);transform:rotate(-7deg)}0%,100%,30%,70%{-webkit-transform:rotate(0);transform:rotate(0)}}.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} \ No newline at end of file diff --git a/assets/javascript/motion-ui/motion-ui.min.js b/assets/javascript/motion-ui/motion-ui.min.js deleted file mode 100644 index 684755695..000000000 --- a/assets/javascript/motion-ui/motion-ui.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(n,e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):n.MotionUI=e(n.jQuery)}(this,function(n){"use strict";function e(e,a,r,u){function s(){e||a.hide(),m(),u&&u.apply(a)}function m(){a[0].style.transitionDuration=0,a.removeClass(d+" "+c+" "+r)}if(a=n(a).eq(0),a.length){if(null===o)return e?a.show():a.hide(),void u();var d=e?i[0]:i[1],c=e?t[0]:t[1];m(),a.addClass(r),a.css("transition","none"),requestAnimationFrame(function(){a.addClass(d),e&&a.show()}),requestAnimationFrame(function(){a[0].offsetWidth,a.css("transition",""),a.addClass(c)}),a.one("transitionend",s)}}!function(){Date.now||(Date.now=function(){return(new Date).getTime()});for(var n=["webkit","moz"],e=0;e", - "license": "MIT", - "bugs": { - "url": "https://github.com/zurb/motion-ui/issues" - }, - "homepage": "http://zurb.com/playground/motion-ui", - "devDependencies": { - "gulp": "^3.9.0", - "gulp-autoprefixer": "^3.0.2", - "gulp-load-plugins": "^1.0.0-rc.1", - "gulp-minify-css": "^1.2.1", - "gulp-rename": "^1.2.2", - "gulp-sass": "2.1.0-beta", - "gulp-scss-lint": "^0.3.6", - "gulp-uglify": "^1.4.1", - "gulp-umd": "^0.2.0", - "handlebars": "^4.0.3", - "mocha": "^2.3.3", - "rimraf": "^2.4.3", - "run-sequence": "^1.1.4", - "sass-true": "^2.0.2", - "supercollider": "^1.0.0" - }, - "dependencies": { - "jquery": "^2.1.4" - } -} diff --git a/assets/javascript/motion-ui/transitions.md b/assets/javascript/motion-ui/transitions.md deleted file mode 100644 index ab2309d24..000000000 --- a/assets/javascript/motion-ui/transitions.md +++ /dev/null @@ -1,112 +0,0 @@ -# Transitions - -Each transition has its own mixin, with multiple parameters that can customize the details of the effect. To create a transition class, just `@include` the mixin inside a class. Motion UI will create the necessary boilerplate for you. - -Here's a basic fade in class. The first parameter of every transition mixin is a *state*, which is either `in` or `out`. In transitions reveal elements, while out transitions hide them. - -```scss -.fade-in { - @include mui-fade(in); -} -``` - -Here's what the CSS looks like. - -```css -.fade-in.mui-enter { - opacity: 0; - transition-property: opacity; } - -.fade-in.mui-enter.mui-enter-active { - opacity: 1; } -``` - -The last three parameters of every transition mixin are the same: `$duration`, which sets the speed of the effect; `$timing`, which adjusts the easing; and `$delay`, which adds a delay before the effect starts. - -```scss -.fade-in { - // A long, long fade - @include mui-fade(in, $duration: 10s); -} -``` - - -## Mixins - - -### mui-fade() - -Creates a fade transition by adjusting the opacity of the element. - -**Parameters:** - -- `state` (Keyword) - State to transition to. (**Default:** in) -- `from` (Number) - Opacity to start at. Must be a number between 0 and 1. (**Default:** 0) -- `to` (Number) - Opacity to end on. (**Default:** 1) -- `duration` (Keyword) - Length (speed) of the transition. (**Default:** null) -- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null) -- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null) - - -### mui-hinge() - -Creates a hinge transition by rotating the element. - -**Parameters:** - -- `state` (Keyword) - State to transition to. (**Default:** in) -- `from` (Keyword) - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. (**Default:** left) -- `axis` (Keyword) - Axis of the element to rotate on. Can be `edge` or `center`. (**Default:** edge) -- `perspective` (Length) - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. (**Default:** 2000px) -- `turn-origin` (Keyword) - Side of the element to start the rotation from. Can be `from-back` or `from-front`. (**Default:** from-back) -- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** true) -- `duration` (Duration) - Length (speed) of the transition. (**Default:** null) -- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null) -- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null) - - -### mui-slide() - -Creates a sliding transition by translating the element horizontally or vertically. - -**Parameters:** - -- `state` (Keyword) - State to transition to. (**Default:** in) -- `direction` (Keyword) - Side of the element to slide from. Can be `top`, `right`, `bottom`, or `left`. (**Default:** left) -- `amount` (Length) - Length of the slide as a percentage value. (**Default:** 100%) -- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** false) -- `duration` (Duration) - Length (speed) of the transition. (**Default:** null) -- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null) -- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null) - - -### mui-spin() - -Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin. - -**Parameters:** - -- `state` (Keyword) - State to transition to. (**Default:** in) -- `direction` (Boolean) - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). (**Default:** cw) -- `amount` (Number) - Amount to element the element. (**Default:** 0.75turn) -- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** false) -- `duration` (Duration) - Length (speed) of the transition. (**Default:** null) -- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null) -- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null) - - -### mui-zoom() - -Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller. - -**Parameters:** - -- `state` (Keyword) - State to transition to. (**Default:** in) -- `from` (Number) - Size to start at. (**Default:** 1.5) -- `from` (Number) - Size to end at. (**Default:** 1) -- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** true) -- `duration` (Duration) - Length (speed) of the transition. (**Default:** null) -- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null) -- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null) - - diff --git a/assets/javascript/what-input/LICENSE b/assets/javascript/what-input/LICENSE deleted file mode 100644 index 0687432e2..000000000 --- a/assets/javascript/what-input/LICENSE +++ /dev/null @@ -1,22 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2015 Jeremy Fields - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. - diff --git a/assets/javascript/what-input/README.md b/assets/javascript/what-input/README.md deleted file mode 100644 index 4fd75ddf9..000000000 --- a/assets/javascript/what-input/README.md +++ /dev/null @@ -1,149 +0,0 @@ -# What Input? - -__A global utility for tracking the current input method (mouse, keyboard or touch).__ - -What Input improves on [track-focus](https://github.com/ten1seven/track-focus) by adding a data attribute on the `` instead of littering the DOM with classes on elements that have been interacted with. It also exposes a simple API that can be used for scripting interactions. - -## How it works - -What Input uses event bubbling on the `` to watch for mouse, keyboard and touch events (via `mousedown`, `keydown` and `touchstart`). It then sets or updates a `data-whatinput` on the ``. - -Since the form fields `input` and `textarea` rely on the keyboard as their only means of input, What Input _does not_ switch the input type to keyboard when typing to preserve the last detected input type. To override this behavior and allow the keyboard to be recorded, add: - -```html - -``` - -What Input also exposes a tiny API that allows the developer to ask for or set the current input. - -_What Input does not make assumptions about the input environment before the user makes their first interaction._ - -## Installing - -Download the file directly or install via Bower. - -```shell -bower install what-input -``` - -## Usage - -Include the script directly in your project. - -```html - -``` - -Or require with a script loader (What Input is AMD compatible). - -```javascript -require('what-input'); -``` - -What Input will start doing its thing while you do yours. - -### Example Styling - -```css -/** - * set a default :focus style - */ -a:focus { - outline: 3px dotted #06c; -} - -/* - * remove :focus style via What Input using progressive enhancement - * so :focus isn't left broken if JavaScript fails - */ -[data-whatinput="mouse"] a:focus, -[data-whatinput="touch"] a:focus { - outline: none; -} -``` - -### Scripting - -#### Current Input - -Ask What Input what the current input method is. This works best if asked after the events What Input is bound to (`mousedown`, `keydown` and `touchstart`). Because `click` always executes last in the event tree, What Input will be able to answer with the event that _just_ happened. - -```javascript -whatInput.ask(); // returns `mouse`, `keyboard` or `touch` - -myButton.addEventListener('click', function() { - - if (whatInput.ask() === 'mouse') { - // do mousy things - } else if (whatInput.ask() === 'keyboard') { - // do keyboard things - } - -}); -``` - -Ask What Input to return an array of all the input types that have been used _so far_. - -```javascript -whatInput.types(); // ex. returns ['mouse', 'keyboard'] -``` - -Tell What Input what's being used. This can be useful if you'd like to set an input method before the user has actually interacted with the page. What Input is not so assumptive on its own. - -```javascript -whatInput.set('hampster'); - -whatInput.ask(); // 'hampster' -``` - -#### Key Logging - -Along with tracking the use of the keyboard, What Input keeps track of the currently pressed keys and stores them in an array. Instead of returning cryptic key codes, What Input uses plain language. - -This can be used if, for example, you want to track how an element is being interacted with. - -```javascript -whatInput.keys(); // ex. returns ['shift', 'tab'] - -myMenuTab.addEventListener('keyup', function() { - - // query for the down arrow - if (whatInput.keys().indexOf('down') !== -1) { - // open the dropdown menu - } - -}); -``` - -What Input only responds to the following "action" keys: 'tab', 'enter', 'shift', 'esc', 'space', 'left', 'up', 'right' and 'down'. - -## Compatibility - -What Input works in all modern browsers. For compatibility with IE8, polyfills are required for: - -* addEventListener -* IndexOf - -Add your own, or grab the bundle included here. - -```html - -``` - -## Demo - -Check out the demo to see What Input in action. - -http://ten1seven.github.io/what-input - -## Acknowledgments - -Special thanks to [Viget](http://viget.com/) for their encouragement and commitment to open source projects. - -What Input is written and maintained by [@ten1seven](https://github.com/ten1seven). - -## License - -What Input is freely available under the [MIT License](http://opensource.org/licenses/MIT). diff --git a/assets/javascript/what-input/addEventListener.js b/assets/javascript/what-input/addEventListener.js deleted file mode 100644 index f9fcbe450..000000000 --- a/assets/javascript/what-input/addEventListener.js +++ /dev/null @@ -1,29 +0,0 @@ -//addEventListener polyfill 1.0 / Eirik Backer / MIT Licence -(function(win, doc){ - if(win.addEventListener)return; //No need to polyfill - - function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}} - function addEvent(on, fn, self){ - return (self = this).attachEvent('on' + on, function(e){ - var e = e || win.event; - e.preventDefault = e.preventDefault || function(){e.returnValue = false} - e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true} - fn.call(self, e); - }); - } - function addListen(obj, i){ - if(i = obj.length)while(i--)obj[i].addEventListener = addEvent; - else obj.addEventListener = addEvent; - return obj; - } - - addListen([doc, win]); - if('Element' in win)win.Element.prototype.addEventListener = addEvent; //IE8 - else{ //IE < 8 - doc.attachEvent('onreadystatechange', function(){addListen(doc.all)}); //Make sure we also init at domReady - docHijack('getElementsByTagName'); - docHijack('getElementById'); - docHijack('createElement'); - addListen(doc.all); - } -})(window, document); diff --git a/assets/javascript/what-input/bower.json b/assets/javascript/what-input/bower.json deleted file mode 100644 index 62d6c5e7a..000000000 --- a/assets/javascript/what-input/bower.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "name": "what-input", - "version": "1.1.2", - "homepage": "https://github.com/ten1seven/what-input", - "authors": [ - "Jeremy Fields " - ], - "description": "A global utility for tracking the current input method (mouse, keyboard or touch).", - "main": "what-input.js", - "moduleType": [ - "amd" - ], - "keywords": [ - "accessibility", - "a11y", - "input", - "javascript" - ], - "license": "MIT", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ], - "repository": { - "type": "git", - "url": "git://github.com/ten1seven/what-input.git" - } -} diff --git a/assets/javascript/what-input/clean.js b/assets/javascript/what-input/clean.js deleted file mode 100644 index b7b78892a..000000000 --- a/assets/javascript/what-input/clean.js +++ /dev/null @@ -1,13 +0,0 @@ -var gulp = require('gulp'); -var del = require('del'); - - -gulp.task('clean', function () { - return del([ - './.DS_Store', - './src/.DS_Store', - './src/**/.DS_Store', - './gulpfile.js/.DS_Store', - './gulpfile.js/**/.DS_Store' - ]); -}); diff --git a/assets/javascript/what-input/demo.html b/assets/javascript/what-input/demo.html deleted file mode 100644 index d0d9f70be..000000000 --- a/assets/javascript/what-input/demo.html +++ /dev/null @@ -1,159 +0,0 @@ - - - - - - - - What Input? - - - - - - - - - - -
    -
    -

    What Input?

    -
    - -

    A global utility for tracking the current input method (mouse, keyboard or touch).

    - -

    Tab, click or tap the links and form controls to see how What Input allows them to be styled differently.

    - -
    -
    - -
    -
    - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros -
    -
    - -
    -
    -
    - - -
    -
    - - -
    -
    - -
    - -
    -
    - -
    -
    - -
    -

    Made with ♥ at Viget.

    -
    - -
    - - - - - - diff --git a/assets/javascript/what-input/index.js b/assets/javascript/what-input/index.js deleted file mode 100644 index 3eaffe2c8..000000000 --- a/assets/javascript/what-input/index.js +++ /dev/null @@ -1,4 +0,0 @@ -var requireDir = require('require-dir'); - -// Require all tasks in gulpfile.js/tasks, including subfolders -requireDir('./tasks', { recurse: true }); diff --git a/assets/javascript/what-input/indexOf.js b/assets/javascript/what-input/indexOf.js deleted file mode 100644 index 5a516640a..000000000 --- a/assets/javascript/what-input/indexOf.js +++ /dev/null @@ -1,65 +0,0 @@ -// Production steps of ECMA-262, Edition 5, 15.4.4.14 -// Reference: http://es5.github.io/#x15.4.4.14 -if (!Array.prototype.indexOf) { - Array.prototype.indexOf = function(searchElement, fromIndex) { - - var k; - - // 1. Let O be the result of calling ToObject passing - // the this value as the argument. - if (this == null) { - throw new TypeError('"this" is null or not defined'); - } - - var O = Object(this); - - // 2. Let lenValue be the result of calling the Get - // internal method of O with the argument "length". - // 3. Let len be ToUint32(lenValue). - var len = O.length >>> 0; - - // 4. If len is 0, return -1. - if (len === 0) { - return -1; - } - - // 5. If argument fromIndex was passed let n be - // ToInteger(fromIndex); else let n be 0. - var n = +fromIndex || 0; - - if (Math.abs(n) === Infinity) { - n = 0; - } - - // 6. If n >= len, return -1. - if (n >= len) { - return -1; - } - - // 7. If n >= 0, then Let k be n. - // 8. Else, n<0, Let k be len - abs(n). - // If k is less than 0, then let k be 0. - k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); - - // 9. Repeat, while k < len - while (k < len) { - // a. Let Pk be ToString(k). - // This is implicit for LHS operands of the in operator - // b. Let kPresent be the result of calling the - // HasProperty internal method of O with argument Pk. - // This step can be combined with c - // c. If kPresent is true, then - // i. Let elementK be the result of calling the Get - // internal method of O with the argument ToString(k). - // ii. Let same be the result of applying the - // Strict Equality Comparison Algorithm to - // searchElement and elementK. - // iii. If same is true, return k. - if (k in O && O[k] === searchElement) { - return k; - } - k++; - } - return -1; - }; -} diff --git a/assets/javascript/what-input/lte-IE8.js b/assets/javascript/what-input/lte-IE8.js deleted file mode 100644 index 89d0eabdc..000000000 --- a/assets/javascript/what-input/lte-IE8.js +++ /dev/null @@ -1 +0,0 @@ -!function(t,e){function n(t){var n=e[t];e[t]=function(t){return a(n(t))}}function r(e,n,r){return(r=this).attachEvent("on"+e,function(e){var e=e||t.event;e.preventDefault=e.preventDefault||function(){e.returnValue=!1},e.stopPropagation=e.stopPropagation||function(){e.cancelBubble=!0},n.call(r,e)})}function a(t,e){if(e=t.length)for(;e--;)t[e].addEventListener=r;else t.addEventListener=r;return t}t.addEventListener||(a([e,t]),"Element"in t?t.Element.prototype.addEventListener=r:(e.attachEvent("onreadystatechange",function(){a(e.all)}),n("getElementsByTagName"),n("getElementById"),n("createElement"),a(e.all)))}(window,document),Array.prototype.indexOf||(Array.prototype.indexOf=function(t,e){var n;if(null==this)throw new TypeError('"this" is null or not defined');var r=Object(this),a=r.length>>>0;if(0===a)return-1;var i=+e||0;if(Math.abs(i)===1/0&&(i=0),i>=a)return-1;for(n=Math.max(i>=0?i:a-Math.abs(i),0);a>n;){if(n in r&&r[n]===t)return n;n++}return-1}); \ No newline at end of file diff --git a/assets/javascript/what-input/package.json b/assets/javascript/what-input/package.json deleted file mode 100644 index 602d02986..000000000 --- a/assets/javascript/what-input/package.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "name": "what-input", - "version": "1.1.2", - "description": "A global utility for tracking the current input method (mouse, keyboard or touch).", - "main": "what-input.js", - "repository": { - "type": "git", - "url": "https://github.com/ten1seven/what-input.git" - }, - "keywords": [ - "accessibility", - "a11y", - "input", - "javascript" - ], - "author": "Jeremy Fields ", - "license": "MIT", - "bugs": { - "url": "https://github.com/ten1seven/what-input/issues" - }, - "homepage": "https://github.com/ten1seven/what-input", - "devDependencies": { - "del": "^2.0.2", - "gulp": "^3.9.0", - "gulp-concat": "^2.6.0", - "gulp-jshint": "^1.11.2", - "gulp-notify": "^2.2.0", - "gulp-plumber": "^1.0.1", - "gulp-rename": "^1.2.2", - "gulp-server-livereload": "^1.5.3", - "gulp-uglify": "^1.4.1", - "require-dir": "^0.3.0" - } -} diff --git a/assets/javascript/what-input/scripts.js b/assets/javascript/what-input/scripts.js deleted file mode 100644 index f56a788e7..000000000 --- a/assets/javascript/what-input/scripts.js +++ /dev/null @@ -1,31 +0,0 @@ -var gulp = require('gulp'); -var plumber = require('gulp-plumber'); -var jshint = require('gulp-jshint'); -var notify = require('gulp-notify'); -var uglify = require('gulp-uglify'); -var rename = require('gulp-rename'); -var concat = require('gulp-concat'); - - -gulp.task('scripts-uglify', function() { - return gulp.src(['./what-input.js']) - .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) - .pipe(jshint()) - .pipe(uglify()) - .pipe(rename('what-input.min.js')) - .pipe(gulp.dest('./')) - .pipe(notify('Scripts uglify task complete')); -}); - - -gulp.task('scripts-ie8', function() { - return gulp.src(['./src/polyfills/ie8/*.js']) - .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) - .pipe(concat('lte-IE8.js')) - .pipe(uglify()) - .pipe(gulp.dest('./')) - .pipe(notify('IE8 scripts task complete')); -}); - - -gulp.task('scripts', ['scripts-uglify', 'scripts-ie8']); diff --git a/assets/javascript/what-input/serve.js b/assets/javascript/what-input/serve.js deleted file mode 100644 index 7488e0180..000000000 --- a/assets/javascript/what-input/serve.js +++ /dev/null @@ -1,14 +0,0 @@ -var gulp = require('gulp'); -var server = require('gulp-server-livereload'); - - -gulp.task('serve', ['clean', 'scripts'], function() { - gulp.src('./') - .pipe(server({ - defaultFile: 'demo.html', - livereload: true, - open: true - })); - - gulp.watch(['./what-input.js', './polyfills/*.js'], ['scripts']); -}); diff --git a/assets/javascript/what-input/what-input.js b/assets/javascript/what-input/what-input.js deleted file mode 100644 index b1282c2a1..000000000 --- a/assets/javascript/what-input/what-input.js +++ /dev/null @@ -1,212 +0,0 @@ -;(function(root, factory) { - if (typeof define === 'function' && define.amd) { - define([], function() { - return (factory()); - }); - } else if (typeof exports === 'object') { - module.exports = factory(); - } else { - root.whatInput = factory(); - } -} (this, function() { - 'use strict'; - - - /* - --------------- - variables - --------------- - */ - - // array of actively pressed keys - var activeKeys = []; - - // cache document.body - var body = document.body; - - // boolean: true if touch buffer timer is running - var buffer = false; - - // the last used input type - var currentInput = null; - - // array of form elements that take keyboard input - var formInputs = [ - 'input', - 'select', - 'textarea' - ]; - - // user-set flag to allow typing in form fields to be recorded - var formTyping = body.hasAttribute('data-whatinput-formtyping'); - - // mapping of events to input types - var inputMap = { - 'keydown': 'keyboard', - 'mousedown': 'mouse', - 'mouseenter': 'mouse', - 'touchstart': 'touch', - 'pointerdown': 'pointer', - 'MSPointerDown': 'pointer' - }; - - // array of all used input types - var inputTypes = []; - - // mapping of key codes to common name - var keyMap = { - 9: 'tab', - 13: 'enter', - 16: 'shift', - 27: 'esc', - 32: 'space', - 37: 'left', - 38: 'up', - 39: 'right', - 40: 'down' - }; - - // map of IE 10 pointer events - var pointerMap = { - 2: 'touch', - 3: 'touch', // treat pen like touch - 4: 'mouse' - }; - - // touch buffer timer - var timer; - - - /* - --------------- - functions - --------------- - */ - - function bufferInput(event) { - clearTimeout(timer); - - setInput(event); - - buffer = true; - timer = setTimeout(function() { - buffer = false; - }, 1000); - } - - function immediateInput(event) { - if (!buffer) setInput(event); - } - - function setInput(event) { - var eventKey = key(event); - var eventTarget = target(event); - var value = inputMap[event.type]; - if (value === 'pointer') value = pointerType(event); - - if (currentInput !== value) { - if ( - // only if the user flag isn't set - !formTyping && - - // only if currentInput has a value - currentInput && - - // only if the input is `keyboard` - value === 'keyboard' && - - // not if the key is `TAB` - keyMap[eventKey] !== 'tab' && - - // only if the target is one of the elements in `formInputs` - formInputs.indexOf(eventTarget.nodeName.toLowerCase()) >= 0 - ) { - // ignore keyboard typing on form elements - } else { - currentInput = value; - body.setAttribute('data-whatinput', currentInput); - - if (inputTypes.indexOf(currentInput) === -1) inputTypes.push(currentInput); - } - } - - if (value === 'keyboard') logKeys(eventKey); - } - - function key(event) { - return (event.keyCode) ? event.keyCode : event.which; - } - - function target(event) { - return event.target || event.srcElement; - } - - function pointerType(event) { - return (typeof event.pointerType === 'number') ? pointerMap[event.pointerType] : event.pointerType; - } - - // keyboard logging - function logKeys(eventKey) { - if (activeKeys.indexOf(keyMap[eventKey]) === -1 && keyMap[eventKey]) activeKeys.push(keyMap[eventKey]); - } - - function unLogKeys(event) { - var eventKey = key(event); - var arrayPos = activeKeys.indexOf(keyMap[eventKey]); - - if (arrayPos !== -1) activeKeys.splice(arrayPos, 1); - } - - - /* - --------------- - init - --------------- - */ - - (function bindEvents() { - - // pointer/mouse - var mouseEvent = 'mousedown'; - - if (window.PointerEvent) { - mouseEvent = 'pointerdown'; - } else if (window.MSPointerEvent) { - mouseEvent = 'MSPointerDown'; - } - - body.addEventListener(mouseEvent, immediateInput); - body.addEventListener('mouseenter', immediateInput); - - // touch - if ('ontouchstart' in document.documentElement) body.addEventListener('touchstart', bufferInput); - - // keyboard - body.addEventListener('keydown', immediateInput); - body.addEventListener('keyup', unLogKeys); - - })(); - - - /* - --------------- - api - --------------- - */ - - return { - - // returns string: the current input type - ask: function() { return currentInput; }, - - // returns array: currently pressed keys - keys: function() { return activeKeys; }, - - // returns array: all the detected input types - types: function() { return inputTypes; }, - - // accepts string: manually set the input type - set: setInput - }; - -})); diff --git a/assets/javascript/what-input/what-input.min.js b/assets/javascript/what-input/what-input.min.js deleted file mode 100644 index c03b8167f..000000000 --- a/assets/javascript/what-input/what-input.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t()}):"object"==typeof exports?module.exports=t():e.whatInput=t()}(this,function(){"use strict";function e(e){clearTimeout(s),n(e),f=!0,s=setTimeout(function(){f=!1},1e3)}function t(e){f||n(e)}function n(e){var t=o(e),n=r(e),d=w[e.type];"pointer"===d&&(d=i(e)),p!==d&&(!y&&p&&"keyboard"===d&&"tab"!==v[t]&&m.indexOf(n.nodeName.toLowerCase())>=0||(p=d,a.setAttribute("data-whatinput",p),-1===h.indexOf(p)&&h.push(p))),"keyboard"===d&&u(t)}function o(e){return e.keyCode?e.keyCode:e.which}function r(e){return e.target||e.srcElement}function i(e){return"number"==typeof e.pointerType?b[e.pointerType]:e.pointerType}function u(e){-1===c.indexOf(v[e])&&v[e]&&c.push(v[e])}function d(e){var t=o(e),n=c.indexOf(v[t]);-1!==n&&c.splice(n,1)}var s,c=[],a=document.body,f=!1,p=null,m=["input","select","textarea"],y=a.hasAttribute("data-whatinput-formtyping"),w={keydown:"keyboard",mousedown:"mouse",mouseenter:"mouse",touchstart:"touch",pointerdown:"pointer",MSPointerDown:"pointer"},h=[],v={9:"tab",13:"enter",16:"shift",27:"esc",32:"space",37:"left",38:"up",39:"right",40:"down"},b={2:"touch",3:"touch",4:"mouse"};return function(){var n="mousedown";window.PointerEvent?n="pointerdown":window.MSPointerEvent&&(n="MSPointerDown"),a.addEventListener(n,t),a.addEventListener("mouseenter",t),"ontouchstart"in document.documentElement&&a.addEventListener("touchstart",e),a.addEventListener("keydown",t),a.addEventListener("keyup",d)}(),{ask:function(){return p},keys:function(){return c},types:function(){return h},set:n}}); \ No newline at end of file diff --git a/library/enqueue-scripts.php b/library/enqueue-scripts.php index fc6bf8cff..6acb4729f 100755 --- a/library/enqueue-scripts.php +++ b/library/enqueue-scripts.php @@ -20,10 +20,7 @@ function foundationpress_scripts() { wp_deregister_script( 'jquery' ); // Modernizr is used for polyfills and feature detection. Must be placed in header. (Not required). - wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/assets/javascript/vendor/modernizr.js', array(), '2.8.3', false ); - - // Fastclick removes the 300ms delay on click events in mobile environments. Must be placed in header. (Not required). - wp_enqueue_script( 'fastclick', get_template_directory_uri() . '/assets/javascript/vendor/fastclick.js', array(), '1.0.0', false ); + wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/assets/javascript/vendor/modernizr/modernizr.js', array(), '2.8.3', false ); // CDN hosted jQuery placed in the header, as some plugins require that jQuery is loaded in the header. wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js', array(), '2.1.0', false ); From 2d140a4d782f4aa906b5b024a51b5e8b261bf5f9 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 21 Nov 2015 01:56:39 +0100 Subject: [PATCH 11/65] Navigation - work in progress --- assets/scss/site/_front.scss | 4 ++-- header.php | 4 ++-- library/navigation.php | 4 ++-- parts/off-canvas-menu.php | 8 ++++++-- parts/top-bar.php | 18 ++++++++++++++++++ 5 files changed, 30 insertions(+), 8 deletions(-) diff --git a/assets/scss/site/_front.scss b/assets/scss/site/_front.scss index 611ca517c..2c00bf02f 100755 --- a/assets/scss/site/_front.scss +++ b/assets/scss/site/_front.scss @@ -7,14 +7,14 @@ @include breakpoint(small) { background: url("../images/demo/marquee-stars.svg") repeat scroll 0 0 #074E68; padding: rem-calc(65%) 0; - margin: - rem-calc(32) 0 rem-calc(32); + margin: 0 0 rem-calc(32); position: relative; text-align: left; } @include breakpoint(medium) { height: rem-calc(400); - margin: - rem-calc(32) 0 rem-calc(72); + margin: 0 0 rem-calc(72); } #watch { diff --git a/header.php b/header.php index 8c8326b41..c1811944c 100755 --- a/header.php +++ b/header.php @@ -29,8 +29,8 @@ -
    -
    +
    +
    diff --git a/library/navigation.php b/library/navigation.php index cdff049b6..706e568fd 100755 --- a/library/navigation.php +++ b/library/navigation.php @@ -45,9 +45,9 @@ function foundationpress_top_bar_l() { function foundationpress_top_bar_r() { wp_nav_menu(array( 'container' => false, // Remove nav container - 'container_class' => '', // Class of container 'menu' => '', // Menu name - 'menu_class' => 'top-bar-menu right', // Adding custom nav class + 'menu_class' => 'dropdown menu', // Adding custom nav class + 'items_wrap' => '
      %3$s
    ', 'theme_location' => 'top-bar-r', // Where it's located in the theme 'before' => '', // Before each link 'after' => '', // After each link diff --git a/parts/off-canvas-menu.php b/parts/off-canvas-menu.php index 6131020b0..692fb4d79 100755 --- a/parts/off-canvas-menu.php +++ b/parts/off-canvas-menu.php @@ -8,7 +8,7 @@ */ ?> - + +
    + +
    diff --git a/parts/top-bar.php b/parts/top-bar.php index 8878040a8..a9777f726 100755 --- a/parts/top-bar.php +++ b/parts/top-bar.php @@ -8,6 +8,23 @@ */ ?> + +
    +
    +
      +
      • +
      • +
    +
    + +
    + +
    +
    + + + + From 1ec0f4bcc2e4e8c90b0e47aa5b03a476878f9757 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 21 Nov 2015 10:50:26 +0100 Subject: [PATCH 12/65] Make hamburger menu available only on small screens --- assets/javascript/custom/offCanvas.js | 0 header.php | 13 +++--------- parts/off-canvas-menu.php | 2 +- parts/top-bar.php | 30 ++++++++++++++++++++++----- templates/front.php | 4 +++- 5 files changed, 32 insertions(+), 17 deletions(-) create mode 100644 assets/javascript/custom/offCanvas.js diff --git a/assets/javascript/custom/offCanvas.js b/assets/javascript/custom/offCanvas.js new file mode 100644 index 000000000..e69de29bb diff --git a/header.php b/header.php index c1811944c..75f1893ba 100755 --- a/header.php +++ b/header.php @@ -30,18 +30,11 @@
    -
    +
    + + - - - -
    diff --git a/parts/off-canvas-menu.php b/parts/off-canvas-menu.php index 692fb4d79..b01b5cda3 100755 --- a/parts/off-canvas-menu.php +++ b/parts/off-canvas-menu.php @@ -26,6 +26,6 @@ --> -
    +
    diff --git a/parts/top-bar.php b/parts/top-bar.php index a9777f726..e6723ce55 100755 --- a/parts/top-bar.php +++ b/parts/top-bar.php @@ -9,17 +9,37 @@ ?> -
    -
    -
      + + + +
      + + +
      +
        • +
        • +
      +
      + + +
      +
      -
      - +
      + +
      +
      diff --git a/templates/front.php b/templates/front.php index 6351b39eb..692e83949 100755 --- a/templates/front.php +++ b/templates/front.php @@ -23,7 +23,9 @@
      - FoundationPress - the ultimate WordPress starter theme + + FoundationPress - the ultimate WordPress starter theme +
      From 91f3dc07b2353bdf4656a5bd732e35eb0dbc8daf Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 21 Nov 2015 11:08:10 +0100 Subject: [PATCH 13/65] Add accordion menu to offCanvas --- library/navigation.php | 2 +- library/offcanvas-walker.php | 38 ++++-------------------------------- parts/off-canvas-menu.php | 4 ++-- 3 files changed, 7 insertions(+), 37 deletions(-) diff --git a/library/navigation.php b/library/navigation.php index 706e568fd..041a3735d 100755 --- a/library/navigation.php +++ b/library/navigation.php @@ -69,7 +69,7 @@ function foundationpress_mobile_off_canvas( $direction = 'left' ) { 'container' => false, // Remove nav container 'container_class' => '', // Class of container 'menu' => '', // Menu name - 'menu_class' => 'off-canvas-list', // Adding custom nav class + 'menu_class' => 'menu vertical nested', // Adding custom nav class 'theme_location' => 'mobile-off-canvas', // Where it's located in the theme 'before' => '', // Before each link 'after' => '', // After each link diff --git a/library/offcanvas-walker.php b/library/offcanvas-walker.php index 3927de5be..fc43c5964 100755 --- a/library/offcanvas-walker.php +++ b/library/offcanvas-walker.php @@ -8,42 +8,12 @@ */ if ( ! class_exists( 'Foundationpress_Offcanvas_Walker' ) ) : -class Foundationpress_Offcanvas_Walker extends Walker_Nav_Menu { - - /** - * Set the side on which the child elements will slide in from ('left' or 'right') - * @var string - */ - private $direction = 'left'; - - public function __construct( $direction ) { - $this->direction = $direction; - } - - function display_element( $element, &$children_elements, $max_depth, $depth = 0, $args, &$output ) { - $element->has_children = ! empty( $children_elements[ $element->ID ] ); - $element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : ''; - $element->classes[] = ( $element->has_children && 1 !== $max_depth ) ? 'has-submenu' : ''; - - parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output ); - } - function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) { - $item_html = ''; - parent::start_el( $item_html, $object, $depth, $args ); - - $classes = empty( $object->classes ) ? array() : (array) $object->classes; - - if ( in_array( 'label', $classes ) ) { - $item_html = preg_replace( '/]*>(.*)<\/a>/iU', '', $item_html ); - } - - $output .= $item_html; - } - - function start_lvl( &$output, $depth = 0, $args = array() ) { - $output .= "\n
        direction}-submenu\">\n
      • ". __( 'Back', 'foundationpress' ) ."
        • \n"; +class Foundationpress_Offcanvas_Walker extends Walker_Nav_Menu { + function start_lvl(&$output, $depth = 0, $args = Array() ) { + $indent = str_repeat("\t", $depth); + $output .= "\n$indent
          \n"; } } endif; diff --git a/parts/off-canvas-menu.php b/parts/off-canvas-menu.php index b01b5cda3..2f4cfb900 100755 --- a/parts/off-canvas-menu.php +++ b/parts/off-canvas-menu.php @@ -26,6 +26,6 @@ --> -
          +
          +
        From 925510aa3b589823e687f27d2dc7ec02446b071f Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 21 Nov 2015 11:09:15 +0100 Subject: [PATCH 14/65] Add credit for offcanvas walker --- library/offcanvas-walker.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/library/offcanvas-walker.php b/library/offcanvas-walker.php index fc43c5964..c0d956582 100755 --- a/library/offcanvas-walker.php +++ b/library/offcanvas-walker.php @@ -7,9 +7,9 @@ * @since FoundationPress 1.0.0 */ -if ( ! class_exists( 'Foundationpress_Offcanvas_Walker' ) ) : - +// Big thanks to Brett Mason (https://github.com/brettsmason) for the awesome walker +if ( ! class_exists( 'Foundationpress_Offcanvas_Walker' ) ) : class Foundationpress_Offcanvas_Walker extends Walker_Nav_Menu { function start_lvl(&$output, $depth = 0, $args = Array() ) { $indent = str_repeat("\t", $depth); From 291c544dfa355bdf46f3e27b472e9ca408381185 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 21 Nov 2015 11:21:35 +0100 Subject: [PATCH 15/65] Add new Foundation 6 hero graphics --- assets/images/demo/hero-bg-foundation-6.svg | 1321 +++++++++++++++++++ assets/scss/site/_front.scss | 9 +- templates/front.php | 9 +- 3 files changed, 1329 insertions(+), 10 deletions(-) create mode 100644 assets/images/demo/hero-bg-foundation-6.svg diff --git a/assets/images/demo/hero-bg-foundation-6.svg b/assets/images/demo/hero-bg-foundation-6.svg new file mode 100644 index 000000000..56dae96ef --- /dev/null +++ b/assets/images/demo/hero-bg-foundation-6.svg @@ -0,0 +1,1321 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/scss/site/_front.scss b/assets/scss/site/_front.scss index 2c00bf02f..59fd55c52 100755 --- a/assets/scss/site/_front.scss +++ b/assets/scss/site/_front.scss @@ -1,19 +1,24 @@ #front-hero { + .marketing { @include grid-row(); } @include breakpoint(small) { - background: url("../images/demo/marquee-stars.svg") repeat scroll 0 0 #074E68; + background: url('../images/demo/hero-bg-foundation-6.svg') bottom center; + background-size: cover; + background-position: center; + //background: url("../images/demo/marquee-stars.svg") repeat scroll 0 0 #074E68; padding: rem-calc(65%) 0; margin: 0 0 rem-calc(32); + height: auto; position: relative; text-align: left; } @include breakpoint(medium) { - height: rem-calc(400); + height: rem-calc(650); margin: 0 0 rem-calc(72); } diff --git a/templates/front.php b/templates/front.php index 692e83949..5ad68bfec 100755 --- a/templates/front.php +++ b/templates/front.php @@ -9,7 +9,7 @@

        - Download FoundationPress + Download FoundationPress
        @@ -20,13 +20,6 @@ @olefredrik
    - - -
    - - FoundationPress - the ultimate WordPress starter theme - -
    From 00d77212b3a3c50dd65206cf45360d8f71ab93c1 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sun, 22 Nov 2015 13:18:45 +0100 Subject: [PATCH 16/65] Concat what-input and motion-ui --- Gruntfile.js | 9 +++++++-- assets/javascript/foundation.bak.js | 3 --- 2 files changed, 7 insertions(+), 5 deletions(-) delete mode 100644 assets/javascript/foundation.bak.js diff --git a/Gruntfile.js b/Gruntfile.js index 5972749de..52e92b9bc 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -150,10 +150,15 @@ module.exports = function (grunt) { 'assets/components/foundation-sites/js/foundation.toggler.js', 'assets/components/foundation-sites/js/foundation.tooltip.js', - // Motion UI - 'assets/components/foundation-sites/js/motion-ui.js', */ + // Motion UI + 'assets/components/motion-ui/motion-ui.js', + + // What-input + 'assets/components/what-input/what-input.js', + + // Foundation everything 'assets/components/foundation-sites/dist/foundation.js', // Include your own custom scripts (located in the custom folder) diff --git a/assets/javascript/foundation.bak.js b/assets/javascript/foundation.bak.js deleted file mode 100644 index 5d75a478b..000000000 --- a/assets/javascript/foundation.bak.js +++ /dev/null @@ -1,3 +0,0 @@ -!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=b.extend({},c.defaults,this.$element.data(),e),this.$window=b(window),this.name="Abide",this.attr="data-abide",this._init(),this._events(),a.registerPlugin(this)}c.defaults={validateOn:"fieldChange",labelErrorClass:"is-invalid-label",inputErrorClass:"is-invalid-input",formErrorSelector:".form-error",formErrorClass:"is-visible",patterns:{alpha:/^[a-zA-Z]+$/,alpha_numeric:/^[a-zA-Z0-9]+$/,integer:/^[-+]?\d+$/,number:/^[-+]?\d*(?:[\.\,]\d+)?$/,card:/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,cvv:/^([0-9]){3,4}$/,email:/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,url:/^(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,domain:/^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,datetime:/^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,date:/(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,time:/^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,dateISO:/^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,month_day_year:/^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,day_month_year:/^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,color:/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/},validators:{equalTo:function(a,b,c){var d=document.getElementById(a.getAttribute(this.add_namespace("data-equalto"))).value,e=a.value,f=d===e;return f}}},c.prototype._init=function(){},c.prototype._events=function(){var a=this;this.$element.off(".abide").on("reset.fndtn.abide",function(c){a.resetForm(b(this))}).on("submit.fndtn.abide",function(b){b.preventDefault(),a.validateForm(a.$element)}).find("input, textarea, select").off(".abide").on("blur.fndtn.abide change.fndtn.abide",function(c){"fieldChange"===a.options.validateOn&&a.validateInput(b(c.target),a.$element)}).on("keydown.fndtn.abide",function(a){})},c.prototype._reflow=function(){},c.prototype.requiredCheck=function(a){switch(a[0].type){case"text":return a.attr("required")&&!a.val()?!1:!0;case"checkbox":return a.attr("required")&&!a.is(":checked")?!1:!0;case"radio":return a.attr("required")&&!a.is(":checked")?!1:!0;default:return!a.attr("required")||a.val()&&a.val().length&&!a.is(":empty")?!0:!1}},c.prototype.findLabel=function(a){return a.next("label").length?a.next("label"):a.closest("label")},c.prototype.addErrorClasses=function(a){var b=this,c=b.findLabel(a),d=a.next(b.options.formErrorSelector)||a.find(b.options.formErrorSelector);c&&c.addClass(b.options.labelErrorClass),d&&d.addClass(b.options.formErrorClass),a.addClass(b.options.inputErrorClass)},c.prototype.removeErrorClasses=function(a){var b=this,c=b.findLabel(a),d=a.next(b.options.formErrorSelector)||a.find(b.options.formErrorSelector);c&&c.hasClass(b.options.labelErrorClass)&&c.removeClass(b.options.labelErrorClass),d&&d.hasClass(b.options.formErrorClass)&&d.removeClass(b.options.formErrorClass),a.hasClass(b.options.inputErrorClass)&&a.removeClass(b.options.inputErrorClass)},c.prototype.validateInput=function(a,c){var d,e,f=this;c.find('input[type="text"]'),c.find('input[type="checkbox"]');"text"===a[0].type?f.requiredCheck(a)&&f.validateText(a)?(f.removeErrorClasses(a),a.trigger("valid.fndtn.abide",a[0])):(f.addErrorClasses(a),a.trigger("invalid.fndtn.abide",a[0])):"radio"===a[0].type?(e=a.attr("name"),d=a.siblings("label"),f.validateRadio(e)?(b(d).each(function(){b(this).hasClass(f.options.labelErrorClass)&&b(this).removeClass(f.options.labelErrorClass)}),a.trigger("valid.fndtn.abide",a[0])):(b(d).each(function(){b(this).addClass(f.options.labelErrorClass)}),a.trigger("invalid.fndtn.abide",a[0]))):"checkbox"===a[0].type?f.requiredCheck(a)?(f.removeErrorClasses(a),a.trigger("valid.fndtn.abide",a[0])):(f.addErrorClasses(a),a.trigger("invalid.fndtn.abide",a[0])):f.requiredCheck(a)&&f.validateText(a)?(f.removeErrorClasses(a),a.trigger("valid.fndtn.abide",a[0])):(f.addErrorClasses(a),a.trigger("invalid.fndtn.abide",a[0]))},c.prototype.validateForm=function(a){for(var c=this,d=a.find("input"),e=a.find("input").length,f=0;e>f;)c.validateInput(b(d[f]),a),f++;a.find(".form-error.is-visible").length||a.find(".is-invalid-label").length?a.find("[data-abide-error]").css("display","block"):a.find("[data-abide-error]").css("display","none")},c.prototype.validateText=function(a){var c=this.options.patterns,d=b(a).val(),e=b(a).attr("pattern");return 0===d.length?!0:d.match(c[e])?!0:!1},c.prototype.validateRadio=function(a){var c=this,d=(b(':radio[name="'+a+'"]').siblings("label"),0);return b(':radio[name="'+a+'"]').each(function(){c.requiredCheck(b(this))||d++,b(this).is(":checked")&&(d=0)}),d>0?!1:!0},c.prototype.matchValidation=function(a,b){},c.prototype.resetForm=function(a){var c=this,d="data-invalid";b("["+c.invalidAttr+"]",a).removeAttr(d),b("."+c.options.labelErrorClass,a).not("small").removeClass(c.options.labelErrorClass),b("."+c.options.inputErrorClass,a).not("small").removeClass(c.options.inputErrorClass),b(".form-error.is-visible").removeClass("is-visible"),a.find("[data-abide-error]").css("display","none"),b(":input",a).not(":button, :submit, :reset, :hidden, [data-abide-ignore]").val("").removeAttr(d)},c.prototype.destroy=function(){},a.plugin(c,"Abide"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=c),"function"==typeof define&&define(["foundation"],function(){return c})}(Foundation,jQuery),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this),b.Keyboard.register("Accordion",{ENTER:"toggle",SPACE:"toggle",ARROW_DOWN:"next",ARROW_UP:"previous"})}c.defaults={slideSpeed:250,multiExpand:!1,allowAllClosed:!1},c.prototype._init=function(){this.$element.attr("role","tablist"),this.$tabs=this.$element.children("li"),this.$tabs.each(function(c,d){var e=a(d),f=e.find("[data-tab-content]"),g=f[0].id||b.GetYoDigits(6,"accordion"),h=d.id||g+"-label";e.find("a:first").attr({"aria-controls":g,role:"tab",id:h,"aria-expanded":!1,"aria-selected":!1}),f.attr({role:"tabpanel","aria-labelledby":h,"aria-hidden":!0,id:g})});var c=this.$element.find(".is-active").children("[data-tab-content]");c.length&&this.down(c,!0),this._events()},c.prototype._events=function(){var c=this;this.$tabs.each(function(){var d=a(this),e=d.children("[data-tab-content]");e.length&&d.children("a").off("click.zf.accordion keydown.zf.accordion").on("click.zf.accordion",function(a){a.preventDefault(),d.hasClass("is-active")?(c.options.allowAllClosed||d.siblings().hasClass("is-active"))&&c.up(e):c.down(e)}).on("keydown.zf.accordion",function(a){b.Keyboard.handleKey(a,c,{toggle:function(){c.toggle(e)},next:function(){d.next().find("a").focus().trigger("click.zf.accordion")},previous:function(){d.prev().find("a").focus().trigger("click.zf.accordion")},handled:function(){a.preventDefault(),a.stopPropagation()}})})})},c.prototype.toggle=function(a){if(a.parent().hasClass("is-active")){if(!this.options.allowAllClosed&&!a.parent().siblings().hasClass("is-active"))return;this.up(a)}else this.down(a)},c.prototype.down=function(c,d){var e=this;if(!this.options.multiExpand&&!d){var f=this.$element.find(".is-active").children("[data-tab-content]");f.length&&this.up(f)}c.attr("aria-hidden",!1).parent("[data-tab-content]").addBack().parent().addClass("is-active"),b.Move(e.options.slideSpeed,c,function(){c.slideDown(e.options.slideSpeed)}),d||b._reflow(this.$element.attr("data-accordion")),a("#"+c.attr("aria-labelledby")).attr({"aria-expanded":!0,"aria-selected":!0}),this.$element.trigger("down.zf.accordion",[c])},c.prototype.up=function(c){var d=c.parent().siblings(),e=this,f=this.options.multiExpand?d.hasClass("is-active"):c.parent().hasClass("is-active");(this.options.allowAllClosed||f)&&(b.Move(this.options.slideSpeed,c,function(){c.slideUp(e.options.slideSpeed)}),c.attr("aria-hidden",!0).parent().removeClass("is-active"),a("#"+c.attr("aria-labelledby")).attr({"aria-expanded":!1,"aria-selected":!1}),this.$element.trigger("up.zf.accordion",[c]))},c.prototype.destroy=function(){this.$element.find("[data-tab-content]").slideUp(0).css("display",""),this.$element.find("a").off(".zf.accordion"),b.unregisterPlugin(this)},b.plugin(c,"Accordion")}(jQuery,window.Foundation),!function(a){"use strict";function b(c,d){this.$element=c,this.options=a.extend({},b.defaults,this.$element.data(),d),Foundation.Nest.Feather(this.$element,"accordion"),this._init(),Foundation.registerPlugin(this),Foundation.Keyboard.register("AccordionMenu",{ENTER:"toggle",SPACE:"toggle",ARROW_RIGHT:"open",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"close",ESCAPE:"closeAll",TAB:"down",SHIFT_TAB:"up"})}b.defaults={slideSpeed:250,multiOpen:!0},b.prototype._init=function(){this.$element.find("[data-submenu]").not(".is-active").slideUp(0),this.$element.attr({role:"tablist","aria-multiselectable":this.options.multiOpen}),this.$menuLinks=this.$element.find(".has-submenu"),this.$menuLinks.each(function(){var b=this.id||Foundation.GetYoDigits(6,"acc-menu-link"),c=a(this),d=c.children("[data-submenu]"),e=d[0].id||Foundation.GetYoDigits(6,"acc-menu"),f=d.hasClass("is-active");c.attr({"aria-controls":e,"aria-expanded":f,"aria-selected":!1,role:"tab",id:b}),d.attr({"aria-labelledby":b,"aria-hidden":!f,role:"tabpanel",id:e})});var b=this.$element.find(".is-active");if(b.length){var c=this;b.each(function(){c.down(a(this))})}this._events()},b.prototype._events=function(){var b=this;this.$element.find("li").each(function(){var c=a(this).children("[data-submenu]");c.length&&a(this).children("a").off("click.zf.accordionmenu").on("click.zf.accordionmenu",function(a){a.preventDefault(),b.toggle(c)})}).on("keydown.zf.accordionmenu",function(c){var d,e,f=a(this),g=f.parent("ul").children("li"),h=f.children("[data-submenu]");g.each(function(b){return a(this).is(f)?(d=g.eq(Math.max(0,b-1)),e=g.eq(Math.min(b+1,g.length-1)),a(this).children("[data-submenu]:visible").length&&(e=f.find("li:first-child")),a(this).is(":first-child")?d=f.parents("li").first():d.children("[data-submenu]:visible").length&&(d=d.find("li:last-child")),void(a(this).is(":last-child")&&(e=f.parents("li").first().next("li")))):void 0}),Foundation.Keyboard.handleKey(c,b,{open:function(){h.is(":hidden")&&(b.down(h),h.find("li").first().focus())},close:function(){h.length&&!h.is(":hidden")?b.up(h):f.parent("[data-submenu]").length&&(b.up(f.parent("[data-submenu]")),f.parents("li").first().focus())},up:function(){d.focus()},down:function(){e.focus()},toggle:function(){f.children("[data-submenu]").length&&b.toggle(f.children("[data-submenu]"))},closeAll:function(){b.hideAll()},handled:function(){c.preventDefault(),c.stopImmediatePropagation()}})})},b.prototype.hideAll=function(){this.$element.find("[data-submenu]").slideUp(this.options.slideSpeed)},b.prototype.toggle=function(a){a.is(":hidden")?this.down(a):this.up(a)},b.prototype.down=function(a){var b=this;console.log(a),this.options.multiOpen||this.up(this.$element.find(".is-active").not(a.parentsUntil(this.$element))),a.addClass("is-active").attr({"aria-hidden":!1}).parent(".has-submenu").attr({"aria-expanded":!0,"aria-selected":!0}),Foundation.Move(this.options.slideSpeed,a,function(){a.slideDown(b.options.slideSpeed)}),this.$element.trigger("down.zf.accordionMenu",[a])},b.prototype.up=function(a){var b=this;Foundation.Move(this.options.slideSpeed,a,function(){a.slideUp(b.options.slideSpeed)}),a.attr("aria-hidden",!0).find("[data-submenu]").slideUp(0).attr("aria-hidden",!0).end().parent(".has-submenu").attr({"aria-expanded":!1,"aria-selected":!1}),this.$element.trigger("up.zf.accordionMenu",[a])},b.prototype.destroy=function(){this.$element.find("[data-submenu]").slideDown(0).css("display",""),this.$element.find("a").off("click.zf.accordionMenu"),Foundation.Nest.Burn(this.$element,"accordion"),Foundation.unregisterPlugin(this)},Foundation.plugin(b,"AccordionMenu")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),b.Nest.Feather(this.$element,"drilldown"),this._init(),b.registerPlugin(this),b.Keyboard.register("Drilldown",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"previous",ESCAPE:"close",TAB:"down",SHIFT_TAB:"up"})}c.defaults={backButton:'
  • Back
    • ',wrapper:"
    ",closeOnClick:!1},c.prototype._init=function(){this.$submenuAnchors=this.$element.find("li.has-submenu"),this.$submenus=this.$submenuAnchors.children("[data-submenu]").addClass("is-drilldown-sub"),this.$menuItems=this.$element.find("li").not(".js-drilldown-back").attr("role","menuitem"),this._prepareMenu(),this._keyboardEvents()},c.prototype._prepareMenu=function(){var b=this;this.$submenuAnchors.each(function(){var c=a(this);c.find("a")[0].removeAttribute("href"),c.children("[data-submenu]").attr({"aria-hidden":!0,tabindex:0,role:"menu"}),b._events(c)}),this.$submenus.each(function(){var c=a(this),d=c.find(".js-drilldown-back");d.length||(c.prepend(b.options.backButton),b._back(c))}),this.$element.parent().hasClass("is-drilldown")||(this.$wrapper=a(this.options.wrapper).addClass("is-drilldown").css(this._getMaxDims()),this.$element.wrap(this.$wrapper))},c.prototype._events=function(b){var c=this;b.off("click.zf.drilldown").on("click.zf.drilldown",function(d){if(d.stopImmediatePropagation(),d.preventDefault(),d.target!==d.currentTarget.firstElementChild)return!1;if(c._show(b),c.options.closeOnClick){var e=a("body").not(c.$wrapper);e.off(".zf.drilldown").on("click.zf.drilldown",function(a){a.preventDefault(),c._hideAll(),e.off(".zf.drilldown")})}})},c.prototype._keyboardEvents=function(){var c=this;this.$menuItems.add(this.$element.find(".js-drilldown-back")).on("keydown.zf.drilldown",function(d){var e,f,g=a(this),h=g.parent("ul").children("li");h.each(function(b){return a(this).is(g)?(e=h.eq(Math.max(0,b-1)),void(f=h.eq(Math.min(b+1,h.length-1)))):void 0}),b.Keyboard.handleKey(d,c,{next:function(){g.is(c.$submenuAnchors)&&(c._show(g),g.on(b.transitionend(g),function(){g.find("ul li").filter(c.$menuItems).first().focus()}))},previous:function(){c._hide(g.parent("ul")),g.parent("ul").on(b.transitionend(g),function(){setTimeout(function(){g.parent("ul").parent("li").focus()},1)})},up:function(){e.focus()},down:function(){f.focus()},close:function(){c._back()},open:function(){g.is(c.$menuItems)?g.is(c.$submenuAnchors)&&(c._show(g),setTimeout(function(){g.find("ul li").filter(c.$menuItems).first().focus()},1)):(c._hide(g.parent("ul")),setTimeout(function(){g.parent("ul").parent("li").focus()},1))},handled:function(){d.preventDefault(),d.stopImmediatePropagation()}})})},c.prototype._hideAll=function(){var a=this.$element.find(".is-drilldown-sub.is-active").addClass("is-closing");a.one(b.transitionend(a),function(b){a.removeClass("is-active is-closing")}),this.$element.trigger("closed.zf.drilldown")},c.prototype._back=function(a){var b=this;a.off("click.zf.drilldown"),a.children(".js-drilldown-back").on("click.zf.drilldown",function(c){c.stopImmediatePropagation(),b._hide(a)})},c.prototype._menuLinkEvents=function(){var a=this;this.$menuItems.not(".has-submenu").off("click.zf.drilldown").on("click.zf.drilldown",function(b){setTimeout(function(){a._hideAll()},0)})},c.prototype._show=function(a){a.children("[data-submenu]").addClass("is-active"),this.$element.trigger("open.zf.drilldown",[a])},c.prototype._hide=function(a){a.addClass("is-closing").one(b.transitionend(a),function(){a.removeClass("is-active is-closing")}),a.trigger("hide.zf.drilldown",[a])},c.prototype._getMaxDims=function(){var b=0,c={};return this.$submenus.add(this.$element).each(function(){var c=a(this).children("li").length;b=c>b?c:b}),c.height=b*this.$menuItems[0].getBoundingClientRect().height+"px",c.width=this.$element[0].getBoundingClientRect().width+"px",c},c.prototype.destroy=function(){this._hideAll(),b.Nest.Burn(this.$element,"drilldown"),this.$element.unwrap().find(".js-drilldown-back").remove().end().find(".is-active, .is-closing, .is-drilldown-sub").removeClass("is-active is-closing is-drilldown-sub").end().find("[data-submenu]").removeAttr("aria-hidden tabindex role").off(".zf.drilldown").end().off("zf.drilldown"),b.unregisterPlugin(this)},b.plugin(c,"Drilldown")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this),b.Keyboard.register("Dropdown",{ENTER:"open",SPACE:"open",ESCAPE:"close",TAB:"tab_forward",SHIFT_TAB:"tab_backward"})}c.defaults={hoverDelay:250,hover:!1,vOffset:1,hOffset:1,positionClass:"",trapFocus:!1},c.prototype._init=function(){var c=this.$element.attr("id");this.$anchor=a('[data-toggle="'+c+'"]')||a('[data-open="'+c+'"]'),this.$anchor.attr({"aria-controls":c,"data-is-focus":!1,"data-yeti-box":c,"aria-haspopup":!0,"aria-expanded":!1}),this.options.positionClass=this.getPositionClass(),this.counter=4,this.usedPositions=[],this.$element.attr({"aria-hidden":"true","data-yeti-box":c,"data-resize":c,"aria-labelledby":this.$anchor[0].id||b.GetYoDigits(6,"dd-anchor")}),this._events()},c.prototype.getPositionClass=function(){var a=this.$element[0].className.match(/(top|left|right)/g);return a=a?a[0]:""},c.prototype._reposition=function(a){this.usedPositions.push(a?a:"bottom"),!a&&this.usedPositions.indexOf("top")<0?this.$element.addClass("top"):"top"===a&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(a):"left"===a&&this.usedPositions.indexOf("right")<0?this.$element.removeClass(a).addClass("right"):"right"===a&&this.usedPositions.indexOf("left")<0?this.$element.removeClass(a).addClass("left"):!a&&this.usedPositions.indexOf("top")>-1&&this.usedPositions.indexOf("left")<0?this.$element.addClass("left"):"top"===a&&this.usedPositions.indexOf("bottom")>-1&&this.usedPositions.indexOf("left")<0?this.$element.removeClass(a).addClass("left"):"left"===a&&this.usedPositions.indexOf("right")>-1&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(a):"right"===a&&this.usedPositions.indexOf("left")>-1&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(a):this.$element.removeClass(a),this.classChanged=!0,this.counter--},c.prototype._setPosition=function(){if("false"===this.$anchor.attr("aria-expanded"))return!1;var a=this.getPositionClass(),c=b.Box.GetDimensions(this.$element),d=(b.Box.GetDimensions(this.$anchor),"left"===a?"left":"right"===a?"left":"top"),e="top"===d?"height":"width";"height"===e?this.options.vOffset:this.options.hOffset;if(c.width>=c.windowDims.width||!this.counter&&!b.Box.ImNotTouchingYou(this.$element))return this.$element.offset(b.Box.GetOffsets(this.$element,this.$anchor,"center bottom",this.options.vOffset,this.options.hOffset,!0)).css({width:c.windowDims.width-2*this.options.hOffset,height:"auto"}),this.classChanged=!0,!1;for(this.$element.offset(b.Box.GetOffsets(this.$element,this.$anchor,a,this.options.vOffset,this.options.hOffset));!b.Box.ImNotTouchingYou(this.$element)&&this.counter;)this._reposition(a),this._setPosition()},c.prototype._events=function(){var a=this;this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"resizeme.zf.trigger":this._setPosition.bind(this)}),this.options.hover&&(clearTimeout(a.timeout),this.$anchor.on("mouseenter.zf.dropdown mouseleave.zf.dropdown",function(){a.timeOut=setTimeout(function(){a.toggle()},a.options.hoverDelay)})),this.$anchor.add(this.$element).on("keydown.zf.dropdown",function(c){var d=b.Keyboard.findFocusable(a.$element);b.Keyboard.handleKey(c,a,{tab_forward:function(){this.$element.find(":focus").is(d.eq(-1))&&(this.options.trapFocus?(d.eq(0).focus(),c.preventDefault()):this.close())},tab_backward:function(){(this.$element.find(":focus").is(d.eq(0))||this.$element.is(":focus"))&&(this.options.trapFocus?(d.eq(-1).focus(),c.preventDefault()):this.close())},open:function(){a.open(),a.$element.attr("tabindex",-1).focus()},close:function(){a.close(),a.$anchor.focus()}})})},c.prototype.open=function(){this.$element.trigger("closeme.zf.dropdown",this.$element.attr("id")),this.$anchor.addClass("hover").attr({"aria-expanded":!0}),this._setPosition(),this.$element.addClass("is-open").attr({"aria-hidden":!1}),this.$element.trigger("show.zf.dropdown",[this.$element])},c.prototype.close=function(){if(!this.$element.hasClass("is-open"))return!1;if(this.$element.removeClass("is-open").attr({"aria-hidden":!0}),this.$anchor.removeClass("hover").attr("aria-expanded",!1),this.classChanged){var a=this.getPositionClass();a&&this.$element.removeClass(a),this.$element.addClass(this.options.positionClass).css({height:"",width:""}),this.classChanged=!1,this.counter=4,this.usedPositions.length=0}this.$element.trigger("hide.zf.dropdown",[this.$element])},c.prototype.toggle=function(){this.$element.hasClass("is-open")?this.close():this.open()},c.prototype.destroy=function(){this.$element.off(".zf.trigger").hide(),this.$anchor.off(".zf.dropdown"),b.unregisterPlugin(this)},b.plugin(c,"Dropdown")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=b.extend({},c.defaults,this.$element.data(),e),a.Nest.Feather(this.$element,"dropdown"),this._init(),a.registerPlugin(this),a.Keyboard.register("DropdownMenu",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"previous",ESCAPE:"close"})}c.defaults={clickOpen:!0,closeOnClick:!1,disableHover:!1,autoclose:!0,hoverDelay:150,closingTime:500,alignment:"left",verticalClass:"vertical",rightClass:"align-right"},c.prototype._init=function(){this.$element.hasClass(this.options.verticalClass)&&(this.vertical=!0),this._prepareMenu()},c.prototype._prepareMenu=function(){var a=this;this.$tabs=this.$element.children("li.has-submenu"),this.$tabs.children("[data-submenu]").addClass("first-sub"),this.$submenus=this.$element.find("li.has-submenu"),this.$menuItems=this.$element.find("li").attr({role:"menuitem",tabindex:0}),this.$menuItems.children("a").attr("tabindex",-1),this.$element.hasClass(this.options.rightClass)?(this.options.alignment="right",this.$submenus.addClass("is-left-arrow opens-left")):this.$submenus.addClass("is-right-arrow opens-right"),this.vertical||this.$tabs.removeClass("is-right-arrow is-left-arrow opens-left opens-right").addClass("is-down-arrow"),this.$tabs.each(function(){var a=b(this);a.attr({role:"menuitem",tabindex:0,title:a.children("a:first-child").text()}).children("a").attr("tabindex",-1),a.children("[data-submenu]")&&a.attr("aria-haspopup",!0)}),this.$submenus.each(function(){var c=b(this);c.children("[data-submenu]").attr({"aria-hidden":!0,tabindex:-1,role:"menu"}).addClass("vertical"),a._events(c)})},c.prototype._events=function(c){var d=this;this.options.clickOpen&&c.off("click.zf.dropdownmenu").on("click.zf.dropdownmenu",function(a){b(this).hasClass("is-dropdown-submenu-parent")&&(a.preventDefault(),a.stopPropagation(),c.data("isClick")?d._hide(c):(d._hideOthers(c),d._show(c),c.data("isClick",!0).parentsUntil("[data-dropdown-menu]",".is-dropdown-submenu-parent").data("isClick",!0),d.options.closeOnClick&&d._addBodyHandler()))}),this.options.disableHover||(this.$menuItems.on("mouseenter.zf.dropdownmenu",function(a){var c=b(this);c.hasClass("is-active")||d._hideOthers(c)}),c.on("mouseenter.zf.dropdownmenu",function(a){clearTimeout(c.closeTimer),c.hasClass("is-active")||(c.openTimer=setTimeout(function(){d._show(c)},d.options.hoverDelay))}).on("mouseleave.zf.dropdownmenu",function(a){!c.data("isClick")&&d.options.autoclose&&(clearTimeout(c.openTimer),c.closeTimer=setTimeout(function(){d._hide(c)},d.options.closingTime))})),this.$menuItems.on("keydown.zf.dropdownmenu",function(c){var e,f,g=b(this),h=d.$element.children("li"),i=g.is(h),j=i?h:g.parents("li").first().add(g.parent("ul").children("li"));j.each(function(a){return b(this).is(g)?(e=j.eq(a-1),void(f=j.eq(a+1))):void 0});var k=function(){g.is(":last-child")||f.focus()},l=function(){e.focus()},m=function(){g.has("ul").length&&(d._show(g),g.find("li").first().focus())},n=function(){g.parents("li").first().focus(),d._hide(g.parents("li").first())},o={open:m,close:function(){d._hideAll(),d.$menuItems.first().focus()},handled:function(){c.preventDefault(),c.stopImmediatePropagation()}};i?d.vertical?"left"===d.options.alignment?b.extend(o,{down:k,up:l,next:m,previous:n}):b.extend(o,{down:k,up:l,next:n,previous:m}):b.extend(o,{next:k,previous:l,down:m,up:n}):"left"===d.options.alignment?b.extend(o,{next:m,previous:n,down:k,up:l}):b.extend(o,{next:n,previous:m,down:k,up:l}),a.Keyboard.handleKey(c,d,o)})},c.prototype._toggle=function(a){a.hasClass("is-active")?this._hide(a):this._show(a)},c.prototype._addBodyHandler=function(){var a=b("body"),c=this;a.not(c.$element).on("click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu",function(b){c._hideAll(),a.off("click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu")})},c.prototype._show=function(b){this._hideOthers(b),b.focus();var c=b.children("[data-submenu]:first-of-type");b.addClass("is-active"),c.css("visibility","hidden").addClass("js-dropdown-active").attr("aria-hidden",!1);var d=a.Box.ImNotTouchingYou(c,null,!0);d||("left"===this.options.alignment?b.removeClass("opens-left").addClass("opens-right"):b.removeClass("opens-right").addClass("opens-left"),this.changed=!0,d=a.Box.ImNotTouchingYou(c,null,!0),d||(b.removeClass("opens-left opens-right").addClass("opens-inner"),this.changed=!0)),c.css("visibility",""),this.$element.trigger("show.zf.dropdownmenu",[b])},c.prototype._hide=function(a){this._hideSome(a)},c.prototype._hideSome=function(a){a.length&&(a.removeClass("is-active opens-inner").data("isClick",!1).find(".is-active").removeClass("is-active").data("isClick",!1).end().find(".js-dropdown-active").removeClass("js-dropdown-active").attr("aria-hidden",!0),a.parent(".has-submenu").removeClass("is-active"),this.changed&&("left"===this.options.alignment?a.find(".opens-left").removeClass("opens-left").addClass("opens-right"):a.find(".opens-right").removeClass("opens-right").addClass("opens-left")),this.$element.trigger("hide.zf.dropdownmenu"))},c.prototype._hideOthers=function(a){this._hideSome(a.siblings(".has-submenu.is-active"))},c.prototype._hideAll=function(){this._hideSome(this.$element)},c.prototype.destroy=function(){this._hideAll(),this.$element.removeData("zf-plugin").find("li").removeClass("js-dropdown-nohover is-right-arrow is-left-arrow opens-left opens-inner opens-right").add("a").off(".zf.dropdownmenu").end().find("ul").removeClass("first-sub"),a.Nest.Burn(this.$element,"dropdown"),a.unregisterPlugin(this)},a.plugin(c,"DropdownMenu")}(Foundation,jQuery),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=b.extend({},c.defaults,this.$element.data(),e),this.$window=b(window),this.name="equalizer",this.attr="data-equalizer",this._init(),this._events(),a.registerPlugin(this)}c.defaults={equalizeOnStack:!0,throttleInterval:50},c.prototype._init=function(){this._reflow()},c.prototype._events=function(){var b=this;this.$window.off(".equalizer").on("resize.fndtn.equalizer",a.util.throttle(function(){b._reflow()},b.options.throttleInterval))},c.prototype._killswitch=function(){},c.prototype._reflow=function(){var c=this;b("["+this.attr+"]").each(function(){var d=b(this),e=[],f=d.find("img");f.length?a.onImagesLoaded(f,function(){e=c.getHeights(d),c.applyHeight(d,e)}):(e=c.getHeights(d),c.applyHeight(d,e))})},c.prototype.getHeights=function(a){var c,d=a.data("equalizer"),e=d?a.find("["+this.attr+'-watch="'+d+'"]:visible'):a.find("["+this.attr+"-watch]:visible");return e.height("inherit"),c=e.map(function(){return b(this).outerHeight(!1)}).get(),console.log(c),c},c.prototype.applyHeight=function(a,c){var d=a.data("equalizer"),e=d?a.find("["+this.attr+'-watch="'+d+'"]:visible'):a.find("["+this.attr+"-watch]:visible"),f=Math.max.apply(null,c);a.trigger("preEqualized.zf.Equalizer");for(var g=0;g=a:a-d.options.threshold<=b});a=e.length?e.length-1:0}if(this.$active.removeClass(this.options.activeClass),this.$active=this.$links.eq(a).addClass(this.options.activeClass),this.options.deepLinking){var f=this.$active[0].getAttribute("href");window.history.pushState?window.history.pushState(null,null,f):window.location.hash=f}this.scrollPos=b,this.$element.trigger("update.zf.magellan",[this.$active])},c.prototype.destroy=function(){this.$element.off(".zf.trigger .zf.magellan").find("."+this.options.activeClass).removeClass(this.options.activeClass);var b=this.$active[0].getAttribute("href");window.location.hash.replace(b,""),a.unregisterPlugin(this)},a.plugin(c,"Magellan"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=c),"function"==typeof define&&define(["foundation"],function(){return c})}(Foundation,jQuery),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this.$lastTrigger=a(),this._init(),this._events(),b.registerPlugin(this)}c.defaults={closeOnClick:!0,transitionTime:0,position:"left",forceTop:!0,isRevealed:!1,revealOn:null,autoFocus:!0,revealClass:"reveal-for-"},c.prototype._init=function(){var b=this.$element.attr("id");if(this.$element.attr("aria-hidden","true"),a(document).find('[data-open="'+b+'"], [data-close="'+b+'"], [data-toggle="'+b+'"]').attr("aria-expanded","false").attr("aria-controls",b),this.options.closeOnClick)if(a(".js-off-canvas-exit").length)this.$exiter=a(".js-off-canvas-exit");else{var c=document.createElement("div");c.setAttribute("class","js-off-canvas-exit"),a("[data-off-canvas-content]").append(c),this.$exiter=a(c)}this.options.isRevealed=this.options.isRevealed||new RegExp(this.options.revealClass,"g").test(this.$element[0].className),this.options.isRevealed&&(this.options.revealOn=this.options.revealOn||this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split("-")[2],this._setMQChecker()),this.options.transitionTime||(this.options.transitionTime=1e3*parseFloat(window.getComputedStyle(a("[data-off-canvas-wrapper]")[0]).transitionDuration))},c.prototype._events=function(){if(this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"keydown.zf.offcanvas":this._handleKeyboard.bind(this)}),this.$exiter.length){this.$exiter.on({"click.zf.offcanvas":this.close.bind(this)})}},c.prototype._setMQChecker=function(){var c=this;a(window).on("changed.zf.mediaquery",function(){b.MediaQuery.atLeast(c.options.revealOn)?c.reveal(!0):c.reveal(!1)}).one("load.zf.offcanvas",function(){b.MediaQuery.atLeast(c.options.revealOn)&&c.reveal(!0)})},c.prototype.reveal=function(a){var b=this.$element.find("[data-close]");a?b.length&&b.hide():b.length&&b.show()},c.prototype.open=function(c,d){if(!this.$element.hasClass("is-open")){var e=this;a(document.body);a("body").scrollTop(0),b.Move(this.options.transitionTime,this.$element,function(){a("[data-off-canvas-wrapper]").addClass("is-off-canvas-open is-open-"+e.options.position),e.$element.addClass("is-open").attr("aria-hidden","false").trigger("opened.zf.offcanvas")}),d&&(this.$lastTrigger=d.attr("aria-expanded","true")),this.options.autoFocus&&this.$element.one("finished.zf.animate",function(){e.$element.find("a, button").eq(0).focus()})}},c.prototype.close=function(){if(this.$element.hasClass("is-open")){var c=this;b.Move(this.options.transitionTime,this.$element,function(){a("[data-off-canvas-wrapper]").removeClass("is-off-canvas-open is-open-"+c.options.position),c.$element.removeClass("is-open")}),this.$element.attr("aria-hidden","true").trigger("closed.zf.offcanvas"),this.$lastTrigger.attr("aria-expanded","false")}},c.prototype.toggle=function(a,b){this.$element.hasClass("is-open")?this.close(a,b):this.open(a,b)},c.prototype._handleKeyboard=function(a){27===a.which&&(a.stopPropagation(),a.preventDefault(),this.close(),this.$lastTrigger.focus())},c.prototype.destroy=function(){},b.plugin(c,"OffCanvas")}(jQuery,Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this),b.Keyboard.register("Orbit",{ltr:{ARROW_RIGHT:"next",ARROW_LEFT:"previous"},rtl:{ARROW_LEFT:"next",ARROW_RIGHT:"previous"}})}c.defaults={bullets:!0,navButtons:!0,animInFromRight:"slide-in-right",animOutToRight:"slide-out-right",animInFromLeft:"slide-in-left",animOutToLeft:"slide-out-left",autoPlay:!0,timerDelay:5e3,infiniteWrap:!0,swipe:!0,pauseOnHover:!0,accessible:!0,containerClass:"orbit-container",slideClass:"orbit-slide",boxOfBullets:"orbit-bullets",nextClass:"orbit-next",prevClass:"orbit-previous"},c.prototype._init=function(){this.$wrapper=this.$element.find("."+this.options.containerClass),this.$slides=this.$element.find("."+this.options.slideClass);var a=this.$element.find("img");a.length?b.onImagesLoaded(a,this._prepareForOrbit.bind(this)):this._prepareForOrbit(),this.options.bullets&&this._loadBullets(),this._events(),this.options.autoPlay&&this.geoSync(),this.options.accessible&&this.$wrapper.attr("tabindex",0)},c.prototype._loadBullets=function(){this.$bullets=this.$element.find("."+this.options.boxOfBullets).find("button")},c.prototype.geoSync=function(){var a=this;this.timer=new b.Timer(this.$element,{duration:this.options.timerDelay,infinite:!1},function(){a.changeSlide(!0)}),this.timer.start()},c.prototype._prepareForOrbit=function(){var a=this;this._setWrapperHeight(function(b){a._setSlideHeight(b)})},c.prototype._setWrapperHeight=function(b){var c,d=0,e=0;this.$slides.each(function(){c=this.getBoundingClientRect().height,a(this).attr("data-slide",e),e&&a(this).css({position:"relative",display:"none"}),d=c>d?c:d,e++}),e===this.$slides.length&&(this.$wrapper.css({height:d}),b(d))},c.prototype._setSlideHeight=function(b){this.$slides.each(function(){a(this).css("max-height",b)})},c.prototype._events=function(){var c=this;if(this.options.swipe&&this.$slides.off("swipeleft.zf.orbit swiperight.zf.orbit").on("swipeleft.zf.orbit",function(a){a.preventDefault(),c.changeSlide(!0)}).on("swiperight.zf.orbit",function(a){a.preventDefault(),c.changeSlide(!1)}),this.options.autoPlay&&(this.$slides.on("click.zf.orbit",function(){c.$element.data("clickedOn",c.$element.data("clickedOn")?!1:!0),c.timer[c.$element.data("clickedOn")?"pause":"start"]()}),this.options.pauseOnHover&&this.$element.on("mouseenter.zf.orbit",function(){c.timer.pause()}).on("mouseleave.zf.orbit",function(){c.$element.data("clickedOn")||c.timer.start()})),this.options.navButtons){var d=this.$element.find("."+this.options.nextClass+", ."+this.options.prevClass);d.attr("tabindex",0).on("click.zf.orbit touchend.zf.orbit",function(){c.changeSlide(a(this).hasClass(c.options.nextClass))})}this.options.bullets&&this.$bullets.on("click.zf.orbit touchend.zf.orbit",function(){if(/is-active/g.test(this.className))return!1;var b=a(this).data("slide"),d=b>c.$slides.filter(".is-active").data("slide"),e=c.$slides.eq(b);c.changeSlide(d,e,b)}),this.$wrapper.add(this.$bullets).on("keydown.zf.orbit",function(d){b.Keyboard.handleKey(d,c,{next:function(){c.changeSlide(!0)},previous:function(){c.changeSlide(!1)},handled:function(){a(d.target).is(c.$bullets)&&c.$bullets.filter(".is-active").focus()}})})},c.prototype.changeSlide=function(a,c,d){var e=this.$slides.filter(".is-active").eq(0);if(/mui/g.test(e[0].className))return!1;var f,g=this.$slides.first(),h=this.$slides.last(),i=a?"Right":"Left",j=a?"Left":"Right",k=this;f=c?c:a?this.options.infiniteWrap?e.next("."+this.options.slideClass).length?e.next("."+this.options.slideClass):g:e.next("."+this.options.slideClass):this.options.infiniteWrap?e.prev("."+this.options.slideClass).length?e.prev("."+this.options.slideClass):h:e.prev("."+this.options.slideClass),f.length&&(this.options.bullets&&(d=d||this.$slides.index(f),this._updateBullets(d)),b.Motion.animateIn(f.addClass("is-active").css({position:"absolute",top:0}),this.options["animInFrom"+i],function(){f.css({position:"relative",display:"block"}).attr("aria-live","polite")}),b.Motion.animateOut(e.removeClass("is-active"),this.options["animOutTo"+j],function(){e.removeAttr("aria-live"),k.options.autoPlay&&k.timer.restart(),k.$element.trigger("slidechange.zf.orbit",[f])}))},c.prototype._updateBullets=function(a){var b=this.$element.find("."+this.options.boxOfBullets).find(".is-active").removeClass("is-active").blur(),c=b.find("span:last").detach();this.$bullets.eq(a).addClass("is-active").append(c)},c.prototype.destroy=function(){delete this.timer,this.$element.off(".zf.orbit").find("*").off(".zf.orbit").end().hide(),b.unregisterPlugin(this)},b.plugin(c,"Orbit")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(c){this.$element=b(c),this.rules=this.$element.data("responsive-menu"),this.currentMq=null,this.currentPlugin=null,this._init(),this._events(),a.registerPlugin(this)}var d={dropdown:{cssClass:"dropdown",plugin:a._plugins["dropdown-menu"]||null},drilldown:{cssClass:"drilldown",plugin:a._plugins.drilldown||null},accordion:{cssClass:"accordion-menu",plugin:a._plugins["accordion-menu"]||null}};c.defaults={},c.prototype._init=function(){for(var a={},c=this.rules.split(" "),e=0;e1?f[0]:"small",h=f.length>1?f[1]:f[0];null!==d[h]&&(a[g]=d[h])}this.rules=a,b.isEmptyObject(a)||this._checkMediaQueries()},c.prototype._events=function(){var a=this;b(window).on("changed.zf.mediaquery",function(){a._checkMediaQueries()})},c.prototype._checkMediaQueries=function(){var c,e=this;b.each(this.rules,function(b){a.MediaQuery.atLeast(b)&&(c=b)}),c&&(this.currentPlugin instanceof this.rules[c].plugin||(b.each(d,function(a,b){e.$element.removeClass(b.cssClass)}),this.$element.addClass(this.rules[c].cssClass),this.currentPlugin&&this.currentPlugin.destroy(),this.currentPlugin=new this.rules[c].plugin(this.$element,{})))},c.prototype.destroy=function(){this.currentPlugin.destroy(),b(window).off(".zf.ResponsiveMenu"),a.unregisterPlugin(this)},a.plugin(c,"ResponsiveMenu")}(Foundation,jQuery),!function(a,b){"use strict";function c(d,e){this.$element=a(d),this.options=a.extend({},c.defaults,e),this._init(),this._events(),b.registerPlugin(this)}c.defaults={hideFor:"medium"},c.prototype._init=function(){var b=this.$element.data("responsive-toggle");b||console.error("Your tab bar needs an ID of a Menu as the value of data-tab-bar."),this.$targetMenu=a("#"+b),this.$toggler=this.$element.find("[data-toggle]"),this._update()},c.prototype._events=function(){a(window).on("changed.zf.mediaquery",this._update.bind(this)),this.$toggler.on("click.zf.responsiveToggle",this.toggleMenu.bind(this))},c.prototype._update=function(){b.MediaQuery.atLeast(this.options.hideFor)?(this.$element.hide(),this.$targetMenu.show()):(this.$element.show(),this.$targetMenu.hide())},c.prototype.toggleMenu=function(){b.MediaQuery.atLeast(this.options.hideFor)||(this.$targetMenu.toggle(0),this.$element.trigger("toggled.zf.responsiveToggle"))},c.prototype.destroy=function(){},b.plugin(c,"ResponsiveToggle")}(jQuery,Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=b.extend({},c.defaults,this.$element.data(),e),this._init(),a.registerPlugin(this),a.Keyboard.register("Reveal",{ENTER:"open",SPACE:"open",ESCAPE:"close",TAB:"tab_forward",SHIFT_TAB:"tab_backward"})}c.defaults={animationIn:"",animationOut:"",showDelay:0,hideDelay:0,closeOnClick:!0,closeOnEsc:!0,multipleOpened:!1,vOffset:100,hOffset:0,fullScreen:!1,btmOffsetPct:10,overlay:!0,resetOnClose:!1},c.prototype._init=function(){if(this.id=this.$element.attr("id"),this.isActive=!1,this.$anchor=b(b('[data-open="'+this.id+'"]').length?'[data-open="'+this.id+'"]':'[data-toggle="'+this.id+'"]'),this.$anchor.length){var c=this.$anchor[0].id||a.GetYoDigits(6,"reveal");this.$anchor.attr({"aria-controls":this.id,id:c,"aria-haspopup":!0,tabindex:0}),this.$element.attr({"aria-labelledby":c})}(this.options.fullScreen||this.$element.hasClass("full"))&&(this.options.fullScreen=!0,this.options.overlay=!1),this.options.overlay&&(this.$overlay=this._makeOverlay(this.id)),this.$element.attr({role:"dialog","aria-hidden":!0,"data-yeti-box":this.id,"data-resize":this.id}),this._events()},c.prototype._makeOverlay=function(a){var c=b("
    ").addClass("reveal-overlay").attr({tabindex:-1,"aria-hidden":!0}).appendTo("body");return this.options.closeOnClick&&c.attr({"data-close":a}),c},c.prototype._events=function(){var a=this;this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"resizeme.zf.trigger":function(){a.$element.is(":visible")&&a._setPosition(function(){})}}),this.$anchor.length&&this.$anchor.on("keydown.zf.reveal",function(b){(13===b.which||32===b.which)&&(b.stopPropagation(),b.preventDefault(),a.open())}),this.options.closeOnClick&&this.options.overlay&&this.$overlay.off(".zf.reveal").on("click.zf.reveal",this.close.bind(this))},c.prototype._setPosition=function(b){var c=a.Box.GetDimensions(this.$element),d=this.options.fullScreen?"reveal full":c.height>=.5*c.windowDims.height?"reveal":"center";"reveal full"===d?(console.log("full"),this.$element.offset(a.Box.GetOffsets(this.$element,null,d,this.options.vOffset)).css({height:c.windowDims.height,width:c.windowDims.width})):a.MediaQuery.atLeast("medium")&&a.Box.ImNotTouchingYou(this.$element,null,!0,!1)?this.$element.css({"max-height":c.windowDims.height-this.options.vOffset*(this.options.btmOffsetPct/100+1),width:""}).offset(a.Box.GetOffsets(this.$element,null,d,this.options.vOffset)):(this.$element.css({width:c.windowDims.width-2*this.options.hOffset}).offset(a.Box.GetOffsets(this.$element,null,"center",this.options.vOffset,this.options.hOffset)),this.changedSize=!0),b()},c.prototype.open=function(){var c=this;this.isActive=!0,this.$element.css({visibility:"hidden"}).show().scrollTop(0),this._setPosition(function(){c.$element.hide().css({visibility:""}),c.options.multipleOpened||c.$element.trigger("closeme.zf.reveal",c.id),c.options.animationIn?c.options.overlay?a.Motion.animateIn(c.$overlay,"fade-in",function(){a.Motion.animateIn(c.$element,c.options.animationIn,function(){})}):a.Motion.animateIn(c.$element,c.options.animationIn,function(){}):c.options.overlay?c.$overlay.show(0,function(){c.$element.show(c.options.showDelay,function(){})}):c.$element.show(c.options.showDelay,function(){})}),this.$element.attr({"aria-hidden":!1}).attr("tabindex",-1).focus().trigger("open.zf.reveal"),b("body").addClass("is-reveal-open").attr({"aria-hidden":this.options.overlay||this.options.fullScreen?!0:!1}),setTimeout(function(){c._extraHandlers()},0)},c.prototype._extraHandlers=function(){var c=this,d=this.$element.find("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]").filter(function(){return!b(this).is(":visible")||b(this).attr("tabindex")<0?!1:!0});this.options.overlay||!this.options.closeOnClick||this.options.fullScreen||b("body").on("click.zf.reveal",function(a){c.close()}),this.options.closeOnEsc&&b(window).on("keydown.zf.reveal",function(b){0===d.length&&b.preventDefault(),a.Keyboard.handleKey(b,c,{close:function(){this.options.closeOnEsc&&this.close()}})}),this.$element.on("keydown.zf.reveal",function(e){var f=b(this);a.Keyboard.handleKey(e,c,{tab_forward:function(){this.$element.find(":focus").is(d.eq(-1))&&(d.eq(0).focus(),e.preventDefault())},tab_backward:function(){(this.$element.find(":focus").is(d.eq(0))||this.$element.is(":focus"))&&(d.eq(-1).focus(),e.preventDefault())},open:function(){f.is(d)&&this.open()},close:function(){this.options.closeOnEsc&&this.close()}}),0===d.length&&e.preventDefault()})},c.prototype.close=function(){if(!this.isActive||!this.$element.is(":visible"))return!1;var c=this;this.options.animationOut?a.Motion.animateOut(this.$element,this.options.animationOut,function(){c.options.overlay&&a.Motion.animateOut(c.$overlay,"fade-out",function(){})}):this.$element.hide(c.options.hideDelay,function(){c.options.overlay&&c.$overlay.hide(0,function(){})}),this.options.closeOnEsc&&b(window).off("keydown.zf.reveal"),!this.options.overlay&&this.options.closeOnClick&&b("body").off("click.zf.reveal"),this.$element.off("keydown.zf.reveal"),this.changedSize&&this.$element.css({height:"",width:""}),b("body").removeClass("is-reveal-open").attr({"aria-hidden":!1,tabindex:""}),this.options.resetOnClose&&this.$element.html(this.$element.html()),this.isActive=!1,this.$element.attr({"aria-hidden":!0}).trigger("closed.zf.reveal")},c.prototype.toggle=function(){this.isActive?this.close():this.open()},c.prototype.destroy=function(){this.options.overlay&&this.$overlay.hide().off().remove(),this.$element.hide(),this.$anchor.off(),a.unregisterPlugin(this)},a.plugin(c,"Reveal"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=c),"function"==typeof define&&define(["foundation"],function(){return c})}(Foundation,jQuery),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this),b.Keyboard.register("Slider",{ltr:{ARROW_RIGHT:"increase",ARROW_UP:"increase",ARROW_DOWN:"decrease",ARROW_LEFT:"decrease",SHIFT_ARROW_RIGHT:"increase_fast",SHIFT_ARROW_UP:"increase_fast",SHIFT_ARROW_DOWN:"decrease_fast",SHIFT_ARROW_LEFT:"decrease_fast"},rtl:{ARROW_LEFT:"increase",ARROW_RIGHT:"decrease",SHIFT_ARROW_LEFT:"increase_fast",SHIFT_ARROW_RIGHT:"decrease_fast"}})}function d(a,b){return a/b}function e(a,b,c,d){return Math.abs(a.position()[b]+a[d]()/2-c)}c.defaults={start:0,end:100,step:1,initialStart:0,initialEnd:100,binding:!1,clickSelect:!0,vertical:!1,draggable:!0,disabled:!1,doubleSided:!1,decimal:2,moveTime:200,disabledClass:"disabled"},c.prototype._init=function(){this.inputs=this.$element.find("input"),this.handles=this.$element.find("[data-slider-handle]"),this.$handle=this.handles.eq(0),this.$input=this.inputs.length?this.inputs.eq(0):a("#"+this.$handle.attr("aria-controls")),this.$fill=this.$element.find("[data-slider-fill]").css(this.options.vertical?"height":"width",0);var b=!1,c=this;(this.options.disabled||this.$element.hasClass(this.options.disabledClass))&&(this.options.disabled=!0,this.$element.addClass(this.options.disabledClass)),this.inputs.length||(this.inputs=a().add(this.$input),this.options.binding=!0),this._setInitAttr(0),this._events(this.$handle),this.handles[1]&&(this.options.doubleSided=!0,this.$handle2=this.handles.eq(1),this.$input2=this.inputs.length?this.inputs.eq(1):a("#"+this.$handle2.attr("aria-controls")),this.inputs[1]||(this.inputs=this.inputs.add(this.$input2)),b=!0,this._setHandlePos(this.$handle,this.options.initialStart,!0,function(){c._setHandlePos(c.$handle2,c.options.initialEnd)}),this._setInitAttr(1),this._events(this.$handle2)),b||this._setHandlePos(this.$handle,this.options.initialStart,!0)},c.prototype._setHandlePos=function(a,c,e,f){c=parseFloat(c),cthis.options.end&&(c=this.options.end);var g=this.options.doubleSided;if(g)if(0===this.handles.index(a)){var h=parseFloat(this.$handle2.attr("aria-valuenow"));c=c>=h?h-this.options.step:c}else{var i=parseFloat(this.$handle.attr("aria-valuenow"));c=i>=c?i+this.options.step:c}this.options.vertical&&!e&&(c=this.options.end-c);var j=this,k=this.options.vertical,l=k?"height":"width",m=k?"top":"left",n=a[0].getBoundingClientRect()[l]/2,o=this.$element[0].getBoundingClientRect()[l],p=d(c,this.options.end).toFixed(this.options.decimal),q=(o-n)*p,r=(100*d(q,o)).toFixed(this.options.decimal),c=c>0?parseFloat(c.toFixed(this.options.decimal)):0,s={};if(this._setValues(a,c),this.options.doubleSided){var t,u=0===this.handles.index(a);this.handles.index(a);u?(s[m]=(p>0?100*p:0)+"%",t=(100*(d(this.$handle2.position()[m]+n,o)-parseFloat(p))).toFixed(this.options.decimal)+"%",s["min-"+l]=t,f&&"function"==typeof f&&f()):(c=(100>c?c:100)-(parseFloat(this.$handle[0].style.left)||this.options.end-c),s["min-"+l]=c+"%")}this.$element.one("finished.zf.animate",function(){j.animComplete=!0,j.$element.trigger("moved.zf.slider",[a])});var v=j.$element.data("dragging")?1e3/60:j.options.moveTime;b.Move(v,a,function(){a.css(m,r+"%"),j.options.doubleSided?j.$fill.css(s):j.$fill.css(l,100*p+"%")})},c.prototype._setInitAttr=function(a){var c=this.inputs.eq(a).attr("id")||b.GetYoDigits(6,"slider");this.inputs.eq(a).attr({id:c,max:this.options.end,min:this.options.start}),this.handles.eq(a).attr({role:"slider","aria-controls":c,"aria-valuemax":this.options.end,"aria-valuemin":this.options.start,"aria-valuenow":0===a?this.options.initialStart:this.options.initialEnd,"aria-orientation":this.options.vertical?"vertical":"horizontal",tabindex:0})},c.prototype._setValues=function(a,b){var c=this.options.doubleSided?this.handles.index(a):0;this.inputs.eq(c).val(b),a.attr("aria-valuenow",b)},c.prototype._handleEvent=function(a,b,c){var f,g;if(c)f=c,g=!0;else{a.preventDefault();var h=this.options.vertical,i=h?"height":"width",j=h?"top":"left",k=h?a.pageY:a.pageX,l=this.$handle[0].getBoundingClientRect()[i]/2,m=this.$element[0].getBoundingClientRect()[i],n=this.$element.offset()[j]-k,o=n>0?-l:-m>n-l?m:Math.abs(n),p=d(o,m);if(f=(this.options.end-this.options.start)*p,g=!1,!b){var q=e(this.$handle,j,o,i),r=e(this.$handle2,j,o,i);b=r>=q?this.$handle:this.$handle2}}this._setHandlePos(b,f,g)},c.prototype._events=function(c){if(this.options.disabled)return!1;var d,e=this;if(this.inputs.off("change.zf.slider").on("change.zf.slider",function(b){var c=e.inputs.index(a(this));e._handleEvent(b,e.handles.eq(c),a(this).val())}),this.options.clickSelect&&this.$element.off("click.zf.slider").on("click.zf.slider",function(a){return e.$element.data("dragging")?!1:(e.animComplete=!1,void(e.options.doubleSided?e._handleEvent(a):e._handleEvent(a,e.$handle)))}),this.options.draggable){this.handles.addTouch();var f=a("body");c.off("mousedown.zf.slider").on("mousedown.zf.slider",function(b){c.addClass("is-dragging"),e.$fill.addClass("is-dragging"),e.$element.data("dragging",!0),e.animComplete=!1,d=a(b.currentTarget),f.on("mousemove.zf.slider",function(a){a.preventDefault(),e._handleEvent(a,d)}).on("mouseup.zf.slider",function(a){e.animComplete=!0,e._handleEvent(a,d),c.removeClass("is-dragging"),e.$fill.removeClass("is-dragging"),e.$element.data("dragging",!1),f.off("mousemove.zf.slider mouseup.zf.slider")})})}c.off("keydown.zf.slider").on("keydown.zf.slider",function(c){var d,f=e.options.doubleSided?e.handles.index(a(this)):0,g=parseFloat(e.inputs.eq(f).val()),h=a(this);b.Keyboard.handleKey(c,e,{decrease:function(){d=g-e.options.step},increase:function(){d=g+e.options.step},decrease_fast:function(){d=g-10*e.options.step},increase_fast:function(){d=g+10*e.options.step},handled:function(){c.preventDefault(),e._setHandlePos(h,d,!0)}})})},c.prototype.destroy=function(){this.handles.off(".zf.slider"),this.inputs.off(".zf.slider"),this.$element.off(".zf.slider"),b.unregisterPlugin(this)},b.plugin(c,"Slider")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this)}function d(a){return parseInt(window.getComputedStyle(document.body,null).fontSize,10)*a}c.defaults={container:"
    ",stickTo:"top",anchor:"",topAnchor:"",btmAnchor:"",marginTop:1,marginBottom:1,stickyOn:"medium",stickyClass:"sticky",containerClass:"sticky-container",checkEvery:-1},c.prototype._init=function(){var c=this.$element.parent("[data-sticky-container]"),d=this.$element[0].id||b.GetYoDigits(6,"sticky"),e=this;c.length||(this.wasWrapped=!0),this.$container=c.length?c:a(this.options.container).wrapInner(this.$element),this.$container.addClass(this.options.containerClass),this.$element.addClass(this.options.stickyClass).attr({"data-resize":d}),this.scrollCount=this.options.checkEvery,this.isStuck=!1,""!==this.options.topAnchor?this._parsePoints():this.$anchor=a(this.options.anchor?"#"+this.options.anchor:document.body),this._setSizes(function(){e._calc(!1)}),this._events(d.split("-").reverse().join("-"))},c.prototype._parsePoints=function(){for(var b=this.options.topAnchor,c=this.options.btmAnchor,d=[b,c],e={},f=0,g=d.length;g>f&&d[f];f++){var h;if("number"==typeof d[f])h=d[f];else{var i=d[f].split(":"),j=a("#"+i[0]);h=j.offset().top,i[1]&&"bottom"===i[1].toLowerCase()&&(h+=j[0].getBoundingClientRect().height)}e[f]=h}this.points=e},c.prototype._events=function(b){var c=this,d="scroll.zf."+b;this.isOn||(this.canStick&&(this.isOn=!0,a(window).off(d).on(d,function(a){0===c.scrollCount?(c.scrollCount=c.options.checkEvery,c._setSizes(function(){c._calc(!1,window.pageYOffset)})):(c.scrollCount--,c._calc(!1,window.pageYOffset))})),this.$element.off("resizeme.zf.trigger").on("resizeme.zf.trigger",function(a,e){c._setSizes(function(){c._calc(!1),c.canStick?c.isOn||c._events(b):c.isOn&&c._pauseListeners(d)})}))},c.prototype._pauseListeners=function(b){this.isOn=!1,a(window).off(b),this.$element.trigger("pause.zf.sticky")},c.prototype._calc=function(a,b){return a&&this._setSizes(),this.canStick?(b||(b=window.pageYOffset),void(b>=this.topPoint?b<=this.bottomPoint?this.isStuck||this._setSticky():this.isStuck&&this._removeSticky(!1):this.isStuck&&this._removeSticky(!0))):(this.isStuck&&this._removeSticky(!0),!1)},c.prototype._setSticky=function(){var a=this.options.stickTo,b="top"===a?"marginTop":"marginBottom",c="top"===a?"bottom":"top",d={};d[b]=this.options[b]+"em",d[a]=0,d[c]="auto",d.left=this.$container.offset().left+parseInt(window.getComputedStyle(this.$container[0])["padding-left"],10),this.isStuck=!0,this.$element.removeClass("is-anchored is-at-"+c).addClass("is-stuck is-at-"+a).css(d).trigger("sticky.zf.stuckto:"+a)},c.prototype._removeSticky=function(a){var b,c,d=this.options.stickTo,e="top"===d,f={},g=(this.points?this.points[1]-this.points[0]:this.anchorHeight)-this.elemHeight;b=e?"marginTop":"marginBottom",c=e?"bottom":"top",f[b]=0,a&&!e||e&&!a?(f[d]=g,f[c]=0):(f[d]=0,f[c]=g),f.left="",this.isStuck=!1,this.$element.removeClass("is-stuck is-at-"+d).addClass("is-anchored is-at-"+(a?"top":"bottom")).css(f).trigger("top")},c.prototype._setSizes=function(a){this.canStick=b.MediaQuery.atLeast(this.options.stickyOn),this.canStick||a();var c=this.$container[0].getBoundingClientRect().width,d=window.getComputedStyle(this.$container[0]),e=parseInt(d["padding-right"],10);this.$anchor&&this.$anchor.length?this.anchorHeight=this.$anchor[0].getBoundingClientRect().height:this._parsePoints(),this.$element.css({"max-width":c-e+"px"});var f=this.$element[0].getBoundingClientRect().height||this.containerHeight;this.containerHeight=f,this.$container.css({height:f}),this.elemHeight=f,this.isStuck&&this.$element.css({left:this.$container.offset().left+parseInt(d["padding-left"],10)}),this._setBreakPoints(f,function(){a&&a()})},c.prototype._setBreakPoints=function(a,b){if(!this.canStick){if(!b)return!1;b()}var c=d(this.options.marginTop),e=d(this.options.marginBottom),f=this.points?this.points[0]:this.$anchor.offset().top,g=this.points?this.points[1]:f+this.anchorHeight,h=window.innerHeight;"top"===this.options.stickTo?(f-=c,g-=a+c):"bottom"===this.options.stickTo&&(f-=h-(a+e),g-=h-e),this.topPoint=f,this.bottomPoint=g,b&&b()},c.prototype.destroy=function(){this._removeSticky(!0),this.$element.removeClass(this.options.stickyClass+" is-anchored is-at-top").css({height:"",top:"",bottom:"","max-width":""}).off("resizeme.zf.trigger"),this.$anchor.off("change.zf.sticky"),a(window).off("scroll.zf.sticky"),this.wasWrapped?this.$element.unwrap():this.$container.removeClass(this.options.containerClass).css({height:""}),b.unregisterPlugin(this)},b.plugin(c,"Sticky")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=a.extend({},c.defaults,this.$element.data(),e),this._init(),b.registerPlugin(this),b.Keyboard.register("Tabs",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"previous",ARROW_DOWN:"next",ARROW_LEFT:"previous"})}c.defaults={autoFocus:!1,wrapOnKeys:!0,matchHeight:!1,linkClass:"tabs-title",panelClass:"tabs-panel"},c.prototype._init=function(){var c=this;if(this.$tabTitles=this.$element.find("."+this.options.linkClass),this.$tabContent=a('[data-tabs-content="'+this.$element[0].id+'"]'),this.$tabTitles.each(function(){var b=a(this),d=b.find("a"),e=b.hasClass("is-active"),f=d.attr("href").slice(1),g=f+"-label",h=a(f);b.attr({role:"presentation"}),d.attr({role:"tab","aria-controls":f,"aria-selected":e,id:g}),h.attr({role:"tabpanel","aria-hidden":!e,"aria-labelledby":g}),e&&c.options.autoFocus&&d.focus()}),this.options.matchHeight){var d=this.$tabContent.find("img");d.length?b.onImagesLoaded(d,this._setHeight.bind(this)):this._setHeight()}this._events()},c.prototype._events=function(){this._addKeyHandler(),this._addClickHandler(),this.options.matchHeight&&a(window).on("changed.zf.mediaquery",this._setHeight.bind(this))},c.prototype._addClickHandler=function(){var b=this;this.$tabTitles.off("click.zf.tabs").on("click.zf.tabs",function(c){c.preventDefault(),c.stopPropagation(),a(this).hasClass("is-active")||b._handleTabChange(a(this))})},c.prototype._addKeyHandler=function(){var c=this;c.$element.find("li:first-of-type"),c.$element.find("li:last-of-type");this.$tabTitles.off("keydown.zf.tabs").on("keydown.zf.tabs",function(d){d.stopPropagation(),d.preventDefault();var e,f,g=a(this),h=g.parent("ul").children("li");h.each(function(b){return a(this).is(g)?void(c.options.wrapOnKeys?(e=0===b?h.last():h.eq(b-1),f=b===h.length-1?h.first():h.eq(b+1)):(e=h.eq(Math.max(0,b-1)),f=h.eq(Math.min(b+1,h.length-1)))):void 0}),b.Keyboard.handleKey(d,c,{open:function(){g.find('[role="tab"]').focus(),c._handleTabChange(g)},previous:function(){e.find('[role="tab"]').focus(),c._handleTabChange(e)},next:function(){f.find('[role="tab"]').focus(),c._handleTabChange(f)}})})},c.prototype._handleTabChange=function(b){var c=b.find('[role="tab"]'),d=c.attr("href"),e=a(d),f=this.$element.find("."+this.options.linkClass+".is-active").removeClass("is-active").find('[role="tab"]').attr({"aria-selected":"false"}).attr("href");a(f).removeClass("is-active").attr({ -"aria-hidden":"true"}),b.addClass("is-active"),c.attr({"aria-selected":"true"}),e.addClass("is-active").attr({"aria-hidden":"false"}),this.$element.trigger("change.zf.tabs",[b])},c.prototype.selectTab=function(a){var b;b="object"==typeof a?a[0].id:a,b.indexOf("#")<0&&(b="#"+b);var c=this.$tabTitles.find('[href="'+b+'"]').parent("."+this.options.linkClass);this._handleTabChange(c)},c.prototype._setHeight=function(){var b=0;this.$tabContent.find("."+this.options.panelClass).css("height","").each(function(){var c=a(this),d=c.hasClass("is-active");d||c.css({visibility:"hidden",display:"block"});var e=this.getBoundingClientRect().height;d||c.css({visibility:"",display:""}),b=e>b?e:b}).css("height",b+"px")},c.prototype.destroy=function(){this.$element.find("."+this.options.linkClass).off(".zf.tabs").hide().end().find("."+this.options.panelClass).hide(),this.options.matchHeight&&a(window).off("changed.zf.mediaquery"),b.unregisterPlugin(this)},b.plugin(c,"Tabs")}(jQuery,window.Foundation),!function(a,b){"use strict";function c(d,e){this.$element=d,this.options=b.extend({},c.defaults,d.data(),e),this.className="",this._init(),this._events(),a.registerPlugin(this)}c.defaults={animate:!1},c.prototype._init=function(){var a;this.options.animate?(a=this.options.animate.split(" "),this.animationIn=a[0],this.animationOut=a[1]||null):(a=this.$element.data("toggler"),"."===a[0]?this.className=a.slice(1):this.className=a);var c=this.$element[0].id;b('[data-open="'+c+'"], [data-close="'+c+'"], [data-toggle="'+c+'"]').attr("aria-controls",c),this.$element.is(":hidden")&&this.$element.attr("aria-expanded","false")},c.prototype._events=function(){var a=this;this.$element.on("toggle.zf.trigger",function(){return a.toggle(),!1})},c.prototype.toggle=function(){this.options.animate?this._toggleAnimate():this._toggleClass()},c.prototype._toggleClass=function(){var a=this;this.$element.toggleClass(this.className),this.$element.hasClass(this.className)?this.$element.trigger("on.zf.toggler"):this.$element.trigger("off.zf.toggler"),a._updateARIA()},c.prototype._toggleAnimate=function(){var b=this;this.$element.is(":hidden")?a.Motion.animateIn(this.$element,this.animationIn,function(){this.trigger("on.zf.toggler"),b._updateARIA()}):a.Motion.animateOut(this.$element,this.animationOut,function(){this.trigger("off.zf.toggler"),b._updateARIA()})},c.prototype._updateARIA=function(){this.$element.is(":hidden")?this.$element.attr("aria-expanded","false"):this.$element.attr("aria-expanded","true")},c.prototype.destroy=function(){this.$element.off(".zf.toggler"),a.unregisterPlugin(this)},a.plugin(c,"Toggler"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=c),"function"==typeof define&&define(["foundation"],function(){return c})}(Foundation,jQuery),!function(a,b,c){"use strict";function d(b,e){this.$element=b,this.options=a.extend({},d.defaults,this.$element.data(),e),this.isActive=!1,this.isClick=!1,this._init(),c.registerPlugin(this)}d.defaults={disableForTouch:!1,hoverDelay:200,fadeInDuration:150,fadeOutDuration:150,disableHover:!1,templateClasses:"",tooltipClass:"tooltip",triggerClass:"has-tip",showOn:"small",template:"",tipText:"",touchCloseText:"Tap to close.",clickOpen:!0,positionClass:"",vOffset:10,hOffset:12},d.prototype._init=function(){var d=this.$element.attr("aria-describedby")||c.GetYoDigits(6,"tooltip");this.options.positionClass=this._getPositionClass(this.$element),this.options.tipText=this.options.tipText||this.$element.attr("title"),this.template=this.options.template?a(this.options.template):this._buildTemplate(d),this.template.appendTo(b.body).text(this.options.tipText).hide(),this.$element.attr({title:"","aria-describedby":d,"data-yeti-box":d,"data-toggle":d,"data-resize":d}).addClass(this.triggerClass),this.usedPositions=[],this.counter=4,this.classChanged=!1,this._events()},d.prototype._getPositionClass=function(a){if(!a)return"";var b=a[0].className.match(/(top|left|right)/g);return b=b?b[0]:""},d.prototype._buildTemplate=function(b){var c=(this.options.tooltipClass+" "+this.options.positionClass).trim(),d=a("
    ").addClass(c).attr({role:"tooltip","aria-hidden":!0,"data-is-active":!1,"data-is-focus":!1,id:b});return d},d.prototype._reposition=function(a){this.usedPositions.push(a?a:"bottom"),!a&&this.usedPositions.indexOf("top")<0?this.template.addClass("top"):"top"===a&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(a):"left"===a&&this.usedPositions.indexOf("right")<0?this.template.removeClass(a).addClass("right"):"right"===a&&this.usedPositions.indexOf("left")<0?this.template.removeClass(a).addClass("left"):!a&&this.usedPositions.indexOf("top")>-1&&this.usedPositions.indexOf("left")<0?this.template.addClass("left"):"top"===a&&this.usedPositions.indexOf("bottom")>-1&&this.usedPositions.indexOf("left")<0?this.template.removeClass(a).addClass("left"):"left"===a&&this.usedPositions.indexOf("right")>-1&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(a):"right"===a&&this.usedPositions.indexOf("left")>-1&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(a):this.template.removeClass(a),this.classChanged=!0,this.counter--},d.prototype._setPosition=function(){var a=this._getPositionClass(this.template),b=c.Box.GetDimensions(this.template),d=c.Box.GetDimensions(this.$element),e="left"===a?"left":"right"===a?"left":"top",f="top"===e?"height":"width";"height"===f?this.options.vOffset:this.options.hOffset;if(b.width>=b.windowDims.width||!this.counter&&!c.Box.ImNotTouchingYou(this.template))return this.template.offset(c.Box.GetOffsets(this.template,this.$element,"center bottom",this.options.vOffset,this.options.hOffset,!0)).css({width:d.windowDims.width-2*this.options.hOffset,height:"auto"}),!1;for(this.template.offset(c.Box.GetOffsets(this.template,this.$element,"center "+(a||"bottom"),this.options.vOffset,this.options.hOffset));!c.Box.ImNotTouchingYou(this.template)&&this.counter;)this._reposition(a),this._setPosition()},d.prototype.show=function(){if("all"!==this.options.showOn&&!c.MediaQuery.atLeast(this.options.showOn))return!1;var a=this;this.template.css("visibility","hidden").show(),this._setPosition(),this.$element.trigger("closeme.zf.tooltip",this.template.attr("id")),this.template.attr({"data-is-active":!0,"aria-hidden":!1}),a.isActive=!0,this.template.stop().hide().css("visibility","").fadeIn(this.options.fadeInDuration,function(){}),this.$element.trigger("show.zf.tooltip")},d.prototype.hide=function(){var a=this;this.template.stop().attr({"aria-hidden":!0,"data-is-active":!1}).fadeOut(this.options.fadeOutDuration,function(){a.isActive=!1,a.isClick=!1,a.classChanged&&(a.template.removeClass(a._getPositionClass(a.template)).addClass(a.options.positionClass),a.usedPositions=[],a.counter=4,a.classChanged=!1)}),this.$element.trigger("hide.zf.tooltip")},d.prototype._events=function(){var a=this,b=(this.template,!1);this.options.disableHover||this.$element.on("mouseenter.zf.tooltip",function(b){a.isActive||(a.timeout=setTimeout(function(){a.show()},a.options.hoverDelay))}).on("mouseleave.zf.tooltip",function(c){clearTimeout(a.timeout),(!b||!a.isClick&&a.options.clickOpen)&&a.hide()}),this.options.clickOpen&&this.$element.on("mousedown.zf.tooltip",function(b){b.stopImmediatePropagation(),a.isClick?a.hide():(a.isClick=!0,!a.options.disableHover&&a.$element.attr("tabindex")||a.isActive||a.show())}),this.options.disableForTouch||this.$element.on("tap.zf.tooltip touchend.zf.tooltip",function(b){a.isActive?a.hide():a.show()}),this.$element.on({"close.zf.trigger":this.hide.bind(this)}),this.$element.on("focus.zf.tooltip",function(c){return b=!0,console.log(a.isClick),a.isClick?!1:void a.show()}).on("focusout.zf.tooltip",function(c){b=!1,a.isClick=!1,a.hide()}).on("resizeme.zf.trigger",function(){a.isActive&&a._setPosition()})},d.prototype.toggle=function(){this.isActive?this.hide():this.show()},d.prototype.destroy=function(){this.$element.attr("title",this.template.text()).off(".zf.trigger .zf.tootip").removeAttr("aria-describedby").removeAttr("data-yeti-box").removeAttr("data-toggle").removeAttr("data-resize"),this.template.remove(),c.unregisterPlugin(this)},c.plugin(d,"Tooltip")}(jQuery,window.document,window.Foundation),!function(a,b){var c=function(a,b,c,e){var f,g,h,i,j=d(a);if(b){var k=d(b);g=j.offset.top+j.height<=k.height+k.offset.top,f=j.offset.top>=k.offset.top,h=j.offset.left>=k.offset.left,i=j.offset.left+j.width<=k.width}else g=j.offset.top+j.height<=j.windowDims.height+j.windowDims.offset.top,f=j.offset.top>=j.windowDims.offset.top,h=j.offset.left>=j.windowDims.offset.left,i=j.offset.left+j.width<=j.windowDims.width;var l=[g,f,h,i];return c?h===i==!0:e?f===g==!0:-1===l.indexOf(!1)},d=function(a,c){if(a=a.length?a[0]:a,a===b||a===document)throw new Error("I'm sorry, Dave. I'm afraid I can't do that.");var d=a.getBoundingClientRect(),e=a.parentNode.getBoundingClientRect(),f=document.body.getBoundingClientRect(),g=b.pageYOffset,h=b.pageXOffset;return{width:d.width,height:d.height,offset:{top:d.top+g,left:d.left+h},parentDims:{width:e.width,height:e.height,offset:{top:e.top+g,left:e.left+h}},windowDims:{width:f.width,height:f.height,offset:{top:g,left:h}}}},e=function(a,b,c,e,f,g){var h=d(a),i=b?d(b):null;switch(c){case"top":return{left:i.offset.left,top:i.offset.top-(h.height+e)};case"left":return{left:i.offset.left-(h.width+f),top:i.offset.top};case"right":return{left:i.offset.left+i.width+f,top:i.offset.top};case"center top":return{left:i.offset.left+i.width/2-h.width/2,top:i.offset.top-(h.height+e)};case"center bottom":return{left:g?f:i.offset.left+i.width/2-h.width/2,top:i.offset.top+i.height+e};case"center left":return{left:i.offset.left-(h.width+f),top:i.offset.top+i.height/2-h.height/2};case"center right":return{left:i.offset.left+i.width+f+1,top:i.offset.top+i.height/2-h.height/2};case"center":return{left:h.windowDims.offset.left+h.windowDims.width/2-h.width/2,top:h.windowDims.offset.top+h.windowDims.height/2-h.height/2};case"reveal":return{left:(h.windowDims.width-h.width)/2,top:h.windowDims.offset.top+e};case"reveal full":return{left:h.windowDims.offset.left,top:h.windowDims.offset.top};default:return{left:i.offset.left,top:i.offset.top+i.height+e}}};a.Box={ImNotTouchingYou:c,GetDimensions:d,GetOffsets:e}}(window.Foundation,window),!function(a,b){"use strict";b.Keyboard={};var c={9:"TAB",13:"ENTER",27:"ESCAPE",32:"SPACE",37:"ARROW_LEFT",38:"ARROW_UP",39:"ARROW_RIGHT",40:"ARROW_DOWN"},d=function(a){var b={};for(var c in a)b[a[c]]=a[c];return b}(c);b.Keyboard.keys=d;var e=function(a){var b=c[a.which||a.keyCode]||String.fromCharCode(a.which).toUpperCase();return a.shiftKey&&(b="SHIFT_"+b),a.ctrlKey&&(b="CTRL_"+b),a.altKey&&(b="ALT_"+b),b};b.Keyboard.parseKey=e;var f={},g=function(c,d,g){var h,i,j,k=f[b.getFnName(d)],l=e(c);return k?(h="undefined"==typeof k.ltr?k:b.rtl()?a.extend({},k.ltr,k.rtl):a.extend({},k.rtl,k.ltr),i=h[l],j=g[i],void(j&&"function"==typeof j?(j.apply(d),(g.handled||"function"==typeof g.handled)&&g.handled.apply(d)):(g.unhandled||"function"==typeof g.unhandled)&&g.unhandled.apply(d))):console.warn("Component not defined!")};b.Keyboard.handleKey=g;var h=function(b){return b.find("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]").filter(function(){return!a(this).is(":visible")||a(this).attr("tabindex")<0?!1:!0})};b.Keyboard.findFocusable=h;var i=function(a,b){f[a]=b};b.Keyboard.register=i}(jQuery,window.Foundation),!function(a,b){function c(a){var b={};return"string"!=typeof a?b:(a=a.trim().slice(1,-1))?b=a.split("&").reduce(function(a,b){var c=b.replace(/\+/g," ").split("="),d=c[0],e=c[1];return d=decodeURIComponent(d),e=void 0===e?null:decodeURIComponent(e),a.hasOwnProperty(d)?Array.isArray(a[d])?a[d].push(e):a[d]=[a[d],e]:a[d]=e,a},{}):b}var d={queries:[],current:"",atLeast:function(a){var b=this.get(a);return b?window.matchMedia(b).matches:!1},get:function(a){for(var b in this.queries){var c=this.queries[b];if(a===c.name)return c.value}return null},_init:function(){var b,d=this,e=a(".foundation-mq").css("font-family");b=c(e);for(var f in b)d.queries.push({name:f,value:"only screen and (min-width: "+b[f]+")"});this.current=this._getCurrentSize(),this._watcher()},_getCurrentSize:function(){var a;for(var b in this.queries){var c=this.queries[b];window.matchMedia(c.value).matches&&(a=c)}return"object"==typeof a?a.name:a},_watcher:function(){var b=this;a(window).on("resize.zf.mediaquery",function(){var c=b._getCurrentSize();c!==b.current&&(a(window).trigger("changed.zf.mediaquery",[c,b.current]),b.current=c)})}};b.MediaQuery=d,window.matchMedia||(window.matchMedia=function(){"use strict";var a=window.styleMedia||window.media;if(!a){var b=document.createElement("style"),c=document.getElementsByTagName("script")[0],d=null;b.type="text/css",b.id="matchmediajs-test",c.parentNode.insertBefore(b,c),d="getComputedStyle"in window&&window.getComputedStyle(b,null)||b.currentStyle,a={matchMedium:function(a){var c="@media "+a+"{ #matchmediajs-test { width: 1px; } }";return b.styleSheet?b.styleSheet.cssText=c:b.textContent=c,"1px"===d.width}}}return function(b){return{matches:a.matchMedium(b||"all"),media:b||"all"}}}())}(jQuery,Foundation),!function(a,b){function c(c,f,g,h){function i(){c||f.hide(),j(),h&&h.apply(f)}function j(){f[0].style.transitionDuration=0,f.removeClass(k+" "+l+" "+g)}if(f=a(f).eq(0),f.length){var k=c?d[0]:d[1],l=c?e[0]:e[1];j(),f.addClass(g).css("transition","none"),requestAnimationFrame(function(){f.addClass(k),c&&f.show()}),requestAnimationFrame(function(){f[0].offsetWidth,f.css("transition",""),f.addClass(l)}),f.one(b.transitionend(f),i)}}var d=["mui-enter","mui-leave"],e=["mui-enter-active","mui-leave-active"],f={animateIn:function(a,b,d){c(!0,a,b,d)},animateOut:function(a,b,d){c(!1,a,b,d)}},g=function(a,b,c){function d(h){g||(g=window.performance.now()),f=h-g,c.apply(b),a>f?e=window.requestAnimationFrame(d,b):(window.cancelAnimationFrame(e),b.trigger("finished.zf.animate",[b]).triggerHandler("finished.zf.animate",[b]))}var e,f,g=null;e=window.requestAnimationFrame(d)};b.Move=g,b.Motion=f}(jQuery,Foundation),!function(a,b){"use strict";b.Nest={Feather:function(b,c){b.attr("role","menubar"),c=c||"zf";var d=b.find("li").attr({role:"menuitem"}),e="is-"+c+"-submenu",f=e+"-item",g="is-"+c+"-submenu-parent";d.each(function(){var b=a(this),c=b.children("ul");c.length&&(b.addClass("has-submenu "+g),c.addClass("submenu "+e).attr("data-submenu","")),b.parent("[data-submenu]").length&&b.addClass("is-submenu-item "+f)})},Burn:function(a,b){var c=(a.find("li").removeAttr("tabindex"),"is-"+b+"-submenu"),d=c+"-item",e="is-"+b+"-submenu-parent";a.find("*").removeClass(c+" "+d+" "+e+" has-submenu is-submenu-item submenu is-active").removeAttr("data-submenu").css("display","")}}}(jQuery,window.Foundation),!function(a,b){"use strict";var c=function(a,b,c){var d,e,f=this,g=b.duration,h=Object.keys(a.data())[0]||"timer",i=-1;this.restart=function(){i=-1,clearTimeout(e),this.start()},this.start=function(){clearTimeout(e),i=0>=i?g:i,a.data("paused",!1),d=Date.now(),e=setTimeout(function(){b.infinite&&f.restart(),c()},i),a.trigger("timerstart.zf."+h)},this.pause=function(){clearTimeout(e),a.data("paused",!0);var b=Date.now();i-=b-d,a.trigger("timerpaused.zf."+h)}},d=function(b,c){var d=b.length;0===d&&c();var e=function(){d--,0===d&&c()};b.each(function(){this.complete?e():"undefined"!=typeof this.naturalWidth&&this.naturalWidth>0?e():a(this).one("load",function(){e()})})};b.Timer=c,b.onImagesLoaded=d}(jQuery,window.Foundation),function(a){function b(){this.removeEventListener("touchmove",c),this.removeEventListener("touchend",b),j=!1}function c(c){if(a.spotSwipe.preventDefault&&c.preventDefault(),j){var d,e=c.touches[0].pageX,k=c.touches[0].pageY,l=f-e,m=g-k;i=(new Date).getTime()-h,Math.abs(l)>=a.spotSwipe.moveThreshold&&i<=a.spotSwipe.timeThreshold?d=l>0?"left":"right":Math.abs(m)>=a.spotSwipe.moveThreshold&&i<=a.spotSwipe.timeThreshold&&(d=m>0?"down":"up"),d&&(b.call(this),a(this).trigger("swipe",d).trigger("swipe"+d))}}function d(a){1==a.touches.length&&(f=a.touches[0].pageX,g=a.touches[0].pageY,j=!0,h=(new Date).getTime(),this.addEventListener("touchmove",c,!1),this.addEventListener("touchend",b,!1))}function e(){this.addEventListener&&this.addEventListener("touchstart",d,!1)}a.spotSwipe={version:"1.0.0",enabled:"ontouchstart"in document.documentElement,preventDefault:!0,moveThreshold:75,timeThreshold:200};var f,g,h,i,j=!1;a.event.special.swipe={setup:e},a.each(["left","up","down","right"],function(){a.event.special["swipe"+this]={setup:function(){a(this).on("swipe",a.noop)}}})}(jQuery),!function(a){a.fn.addTouch=function(){this.each(function(c,d){a(d).bind("touchstart touchmove touchend touchcancel",function(){b(event)})});var b=function(a){var b=a.changedTouches,c=b[0],d={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"},e=d[a.type],f=document.createEvent("MouseEvent");f.initMouseEvent(e,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),c.target.dispatchEvent(f)}}}(jQuery),!function(a,b){"use strict";b(document).on("click.zf.trigger","[data-open]",function(){var a=b(this).data("open");b("#"+a).triggerHandler("open.zf.trigger",[b(this)])}),b(document).on("click.zf.trigger","[data-close]",function(){var a=b(this).data("close");a?b("#"+a).triggerHandler("close.zf.trigger",[b(this)]):b(this).trigger("close.zf.trigger")}),b(document).on("click.zf.trigger","[data-toggle]",function(){var a=b(this).data("toggle");b("#"+a).triggerHandler("toggle.zf.trigger",[b(this)])}),b(document).on("close.zf.trigger","[data-closable]",function(){var c=b(this).data("closable")||"fade-out";a.Motion?a.Motion.animateOut(b(this),c,function(){b(this).trigger("closed.zf")}):b(this).fadeOut().trigger("closed.zf")});var c=function(){for(var a=["WebKit","Moz","O","Ms",""],b=0;b0&&a()}); \ No newline at end of file From b5a79c765216e308a4d9cf7f1b96f29ed8510bfc Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sun, 22 Nov 2015 13:26:24 +0100 Subject: [PATCH 17/65] Remove modernizr --- Gruntfile.js | 8 -------- library/enqueue-scripts.php | 3 --- 2 files changed, 11 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 52e92b9bc..a9fe70aa8 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -52,14 +52,6 @@ module.exports = function (grunt) { copy: { - modernizr: { - expand: true, - cwd: 'assets/components/modernizr/', - src: '**', - flatten: 'true', - dest: 'assets/javascript/vendor/modernizr/' - }, - motionUi: { expand: true, cwd: 'assets/components/motion-ui/', diff --git a/library/enqueue-scripts.php b/library/enqueue-scripts.php index 6acb4729f..9427911ab 100755 --- a/library/enqueue-scripts.php +++ b/library/enqueue-scripts.php @@ -19,9 +19,6 @@ function foundationpress_scripts() { // Deregister the jquery version bundled with WordPress. wp_deregister_script( 'jquery' ); - // Modernizr is used for polyfills and feature detection. Must be placed in header. (Not required). - wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/assets/javascript/vendor/modernizr/modernizr.js', array(), '2.8.3', false ); - // CDN hosted jQuery placed in the header, as some plugins require that jQuery is loaded in the header. wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js', array(), '2.1.0', false ); From ebeb756e481a81af955205c57f32ca67fd25d9be Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sun, 22 Nov 2015 13:41:24 +0100 Subject: [PATCH 18/65] Fix margins in featured image template --- assets/scss/site/_featured.scss | 2 +- library/menu-walker.php | 20 -------------------- 2 files changed, 1 insertion(+), 21 deletions(-) diff --git a/assets/scss/site/_featured.scss b/assets/scss/site/_featured.scss index d51b27650..14425b33a 100755 --- a/assets/scss/site/_featured.scss +++ b/assets/scss/site/_featured.scss @@ -3,7 +3,7 @@ background-size: cover; background-position: center; background-repeat: no-repeat; - margin: - rem-calc(32) 0 rem-calc(32); + margin: 0 0 rem-calc(32); position: relative; height: rem-calc(200); } diff --git a/library/menu-walker.php b/library/menu-walker.php index 576192030..6604f64f7 100755 --- a/library/menu-walker.php +++ b/library/menu-walker.php @@ -18,26 +18,6 @@ function display_element( $element, &$children_elements, $max_depth, $depth = 0, parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output ); } - function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) { - $item_html = ''; - parent::start_el( $item_html, $object, $depth, $args ); - - $output .= ( 0 == $depth ) ? '
  • ' : ''; - - $classes = empty( $object->classes ) ? array() : (array) $object->classes; - - if ( in_array( 'label', $classes ) ) { - $output .= '
  • '; - $item_html = preg_replace( '/]*>(.*)<\/a>/iU', '', $item_html ); - } - - if ( in_array( 'divider', $classes ) ) { - $item_html = preg_replace( '/]*>( .* )<\/a>/iU', '', $item_html ); - } - - $output .= $item_html; - } - function start_lvl( &$output, $depth = 0, $args = array() ) { $output .= "\n
    + +

    Motion UI

    +
    +

    This panel fades.

    +
    + +
    +

    This panel slides.

    +
    + + + +
    +

    Orbit

    @@ -620,6 +634,7 @@
  • Label
  • Media Object
  • Menu
    • +
  • Motion UI
  • Orbit
  • Pagination
  • Slider
    • From 60b202668dbd64688235ad5710992f68ebdd99f6 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 5 Dec 2015 01:20:09 +0100 Subject: [PATCH 59/65] Update README --- README.md | 42 ++++++++++++++++++++---------------------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 101906a44..e296c231e 100755 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # FoundationPress [![Build Status](https://travis-ci.org/olefredrik/FoundationPress.svg?branch=master)](https://travis-ci.org/olefredrik/FoundationPress) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/olefredrik/foundationpress?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) -This is a WordPress starter theme based on Foundation 5 by Zurb. The purpose of FoundationPress, is to act as a small and handy toolbox that contains the essentials needed to build any design. FoundationPress is meant to be a starting point, not the final product. If you're looking for an all-in-one theme with built-in shortcodes, plugins, fancypancy portfolio templates or whatnot, I'm afraid you have to look elsewhere. +This is a starter-theme for WordPress based on Foundation 6, the most advanced responsive (mobile-first) framework in the world. The purpose of FoundationPress, is to act as a small and handy toolbox that contains the essentials needed to build any design. FoundationPress is meant to be a starting point, not the final product. Please fork, copy, modify, delete, share or do whatever you like with this. @@ -27,9 +27,6 @@ $ cd FoundationPress $ npm install ``` -(Many projects force their users to install [Bower](http://bower.io) and [Grunt](http://gruntjs.com/) globally. We don't like that and decided to use them via `npm scripts` which means, that Grunt and Bower are installed in your `node_modules` folder and we'll call them there. Bower install and grunt build will be called via npm scripts when you run npm install.) - - ### 2. While you're working on your project, run: ```bash @@ -57,31 +54,32 @@ $ npm run package ``` -### How to structure your styles +### Styles - * `style.css`: Do not worry about this file. (For some reason) it's required by WordPress. All styling are handled in the Sass files described below + * `style.css`: Do not worry about this file. (For some reason) it's required by WordPress. All styling are handled in the Sass files described below - * `assets/scss/foundation.scss`: Imports for Foundation components and your custom styles. - * `assets/scss/config/_settings.scss`: Original Foundation 5 base settings - * `assets/scss/config/_custom-settings.scss`: Copy the settings you will modify to this file. Make it your own - * `assets/scss/site/*.scss`: Unleash your creativity. Create the files you need (and remember to make import statements for all your files in assets/scss/foundation.scss) + * `assets/scss/foundation.scss`: Make imports for all your styles here + * `assets/scss/global/*.scss`: Global settings + * `assets/scss/components/*.scss`: Buttons etc. + * `assets/scss/modules/*.scss`: Topbar, footer etc. + * `assets/scss/templates/*.scss`: Page template spesific styling -Please note that you **must** run `$npm run build` in your terminal for the styles to be copied and concatinated. See [Gruntfile.js](https://github.com/olefredrik/FoundationPress/blob/master/Gruntfile.js) for details +Please note that you **must** run `npm run build` or `npm run watch` in your terminal for the styles to be copied and concatinated. See the [Gruntfile.js](https://github.com/olefredrik/FoundationPress/blob/master/Gruntfile.js) for details -### How to structure your scripts +### Scripts * `assets/javascript/custom`: This is the folder where you put all your custom scripts. Every .js file you put in this directory will be minified and concatinated one single .js file. (This is good for site speed and performance) -Please note that you must run `npm run build` in your terminal for the scripts to be copied and concatinated. See [Gruntfile.js](https://github.com/olefredrik/FoundationPress/blob/master/Gruntfile.js) for details +Please note that you must run `npm run build` or `npm run watch` in your terminal for the scripts to be copied and concatinated. See [Gruntfile.js](https://github.com/olefredrik/FoundationPress/blob/master/Gruntfile.js) for details -### The styles and scripts generated by the build +### The main styles and scripts generated by the build Version control on these files are turned off because they are automatically generated as part of the build process. * `assets/stylesheets/foundation.css`: All Sass files are minified and compiled to this file * `assets/stylesheets/foundation.css.map`: CSS source maps -* `assets/javascript/vendor`: Vendor scripts are copied from `assets/javascript/components/` to this directory. We use this path for enqueing the vendor scripts in WordPress. +* `assets/javascript/vendor`: Vendor scripts are copied from `assets/components/` to this directory. We use this path for enqueing the vendor scripts in WordPress. ## Demo @@ -106,6 +104,11 @@ FoundationPress is completely ready to be deployed to and tested by Travis-CI fo * [Learn to use the _settings file to change almost every aspect of a Foundation site](http://zurb.com/university/lessons/66) * [Other lessons from Zurb University](http://zurb.com/university/past-lessons) +## Documentation + +* [Zurb Foundation Docs](http://foundation.zurb.com/docs/) +* [WordPress Codex](http://codex.wordpress.org/) + ## Showcase * [Harvard Center for Green Buildings and Cities](http://www.harvardcgbc.org/) @@ -142,18 +145,13 @@ FoundationPress is completely ready to be deployed to and tested by Travis-CI fo 2. Answer questions that come through [GitHub issues](https://github.com/olefredrik/FoundationPress/issues) 3. Report a bug that you find 4. Share a theme you've built on top of FoundationPress -5. [Tweet](https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Ffoundationpress.olefredrik.com%2F&text=Check%20out%20FoundationPress%2C%20the%20ultimate%20%23WordPress%20starter-theme%20built%20on%20%23Foundation%205&tw_p=tweetbutton&url=http%3A%2F%2Ffoundationpress.olefredrik.com&via=olefredrik) and [blog](http://www.justinfriebel.com/my-first-experience-with-foundationpress-a-wordpress-starter-theme-106/) your experience of FoundationPress. +5. [Tweet](https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Ffoundationpress.olefredrik.com%2F&text=Check%20out%20FoundationPress%2C%20the%20ultimate%20%23WordPress%20starter-theme%20built%20on%20%23Foundation%206&tw_p=tweetbutton&url=http%3A%2F%2Ffoundationpress.olefredrik.com&via=olefredrik) and [blog](http://www.justinfriebel.com/my-first-experience-with-foundationpress-a-wordpress-starter-theme-106/) your experience of FoundationPress. #### Pull Requests -Pull requests are highly appreciated. More than three dozen amazing people have contributed to FoundationPress (so far). Here are some guidelines to help: +Pull requests are highly appreciated. Please follow these guidelines: 1. Solve a problem. Features are great, but even better is cleaning-up and fixing issues in the code that you discover 2. Make sure that your code is bug-free and does not introduce new bugs 3. Create a [pull request](https://help.github.com/articles/creating-a-pull-request) 4. Verify that all the Travis-CI build checks have passed - -## Documentation - -* [Zurb Foundation Docs](http://foundation.zurb.com/docs/) -* [WordPress Codex](http://codex.wordpress.org/) From 241a70b5cfb9f42622c4b91bfc5e2fd9ad0ef648 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 5 Dec 2015 01:20:40 +0100 Subject: [PATCH 60/65] Update version numbers --- package.json | 2 +- style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c7257d9a0..cf8f12262 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "foundationpress", "title": "FoundationPress", - "version": "2.0.0-BETA", + "version": "2.0.0", "description": "FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb", "keywords": [ "FoundationPress", diff --git a/style.css b/style.css index bb6b29f76..71f912cd6 100755 --- a/style.css +++ b/style.css @@ -3,7 +3,7 @@ Theme Name: FoundationPress Theme URI: http://foundationpress.olefredrik.com Github Theme URI: https://github.com/olefredrik/FoundationPress Description: FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb -Version: 2.0.0-BETA +Version: 2.0.0 Author: Ole Fredrik Lie Author URI: http://olefredrik.com/ From 057e547ce63293c1083e0a348607d9145de20250 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 5 Dec 2015 01:27:03 +0100 Subject: [PATCH 61/65] Scope list styling to off-canvas menu --- assets/scss/components/_off-canvas.scss | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/assets/scss/components/_off-canvas.scss b/assets/scss/components/_off-canvas.scss index 3b1a8f94a..8626b3ad2 100644 --- a/assets/scss/components/_off-canvas.scss +++ b/assets/scss/components/_off-canvas.scss @@ -1,11 +1,14 @@ -ul#menu-main-menu { - height: 100vh; - padding: 1rem; -} +.off-canvas { + ul#menu-main-menu { + height: 100vh; + padding: 1rem; + } -.title-bar-title { - a { - font-size: 1rem; - color: #B9B9B9; + .title-bar-title { + a { + font-size: 1rem; + color: #B9B9B9; + } } + } From 1ebb31378b0c7ae32df6081311dcbfdfa4c27186 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 5 Dec 2015 01:38:13 +0100 Subject: [PATCH 62/65] Add some padding to the mobile topbar menu --- assets/scss/components/_off-canvas.scss | 11 +++++------ assets/scss/modules/_topbar.scss | 6 ++++++ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/assets/scss/components/_off-canvas.scss b/assets/scss/components/_off-canvas.scss index 8626b3ad2..72361828e 100644 --- a/assets/scss/components/_off-canvas.scss +++ b/assets/scss/components/_off-canvas.scss @@ -3,12 +3,11 @@ height: 100vh; padding: 1rem; } +} - .title-bar-title { - a { - font-size: 1rem; - color: #B9B9B9; - } +.title-bar-title { + a { + font-size: 1rem; + color: #B9B9B9; } - } diff --git a/assets/scss/modules/_topbar.scss b/assets/scss/modules/_topbar.scss index 8a26589cd..30e74490b 100755 --- a/assets/scss/modules/_topbar.scss +++ b/assets/scss/modules/_topbar.scss @@ -24,7 +24,9 @@ } .menu li:not(:last-child) { + @include breakpoint(medium) { border-right: 1px solid #4e4e4e; + } } .dropdown.menu .submenu { @@ -44,6 +46,10 @@ } +.vertical &.menu { + padding: 1rem; +} + .title-bar { @include breakpoint(medium) { display: none; From bb0f2173e194e629a6ddfc3d995d995b8674bfef Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 5 Dec 2015 01:40:18 +0100 Subject: [PATCH 63/65] Add grid column on mobile for fp-intro on front-page --- assets/scss/templates/_front.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/assets/scss/templates/_front.scss b/assets/scss/templates/_front.scss index 51f6280f1..630253fa5 100755 --- a/assets/scss/templates/_front.scss +++ b/assets/scss/templates/_front.scss @@ -109,9 +109,13 @@ .fp-intro { + @include breakpoint(small) { + @include grid-column(12); + } + @include breakpoint(medium) { - @include grid-column(10); - @include grid-column-offset(1); + @include grid-column(10); + @include grid-column-offset(1); h2 { font-weight: 300; From f6383ea054eb71b738108b53bcc67efc12f670d4 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Sat, 5 Dec 2015 01:42:38 +0100 Subject: [PATCH 64/65] Remove link on h1 - front page template --- assets/scss/templates/_front.scss | 4 ++-- templates/front.php | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/scss/templates/_front.scss b/assets/scss/templates/_front.scss index 630253fa5..9eeabd4a1 100755 --- a/assets/scss/templates/_front.scss +++ b/assets/scss/templates/_front.scss @@ -79,7 +79,7 @@ } } - h1 a { + h1 { color: #fff; font-weight: 500; } @@ -112,7 +112,7 @@ @include breakpoint(small) { @include grid-column(12); } - + @include breakpoint(medium) { @include grid-column(10); @include grid-column-offset(1); diff --git a/templates/front.php b/templates/front.php index e0d805d86..ccd87067b 100755 --- a/templates/front.php +++ b/templates/front.php @@ -7,7 +7,7 @@