sourcey/spectacle
1
1
Fork 0
mirror of https://github.com/sourcey/spectacle.git synced 2024-08-15 16:30:41 +03:00
Code Issues Projects Releases Wiki Activity

Add sample Cheese Store API spec

Browse Source 
Separate Foundation CSS file
Add responsive drawer layout
Fix rendering bugs
This commit is contained in:
Kam 2016-01-18 22:30:34 +10:00
parent e974593503
commit 8764b5332e
131 changed files with 25597 additions and 46665 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
TODO.md Normal file
View File

@ -0,0 +1,3 @@
Enable custom OpenAPI spec extensions for rendering examples
Copy spec to target directory and link
Implement company logo

2
app/helpers/schemaRange.js
View File

@ -1,3 +1,5 @@
var util = require("util");
/**
*
* @param range a json-schema object with minimum, maximum, exclusiveMinimum, exclusiveMaximum

62
app/javascripts/main.js
View File

@ -1,16 +1,52 @@
$(function() {
var $sidebar = $('#sidebar');
var $nav = $sidebar.find('nav');
var traverse = new Traverse($nav, {
threshold: 10,
barOffset: $sidebar.position().top
});
// $(document).foundation();
$nav.on('update.traverse', function(event, element) {
$nav.find('section').removeClass('expand');
var $section = element.parents('section:first');
if ($section.length) {
$section.addClass('expand');
}
});
var $sidebar = $('#sidebar');
if ($sidebar.length) {
var $docs = $('#docs');
var $nav = $sidebar.find('nav');
//
// Setup sidebar navigation
var traverse = new Traverse($nav, {
threshold: 10,
barOffset: $sidebar.position().top
});
$nav.on('update.traverse', function(event, element) {
$nav.find('section').removeClass('expand');
var $section = element.parents('section:first');
if ($section.length) {
$section.addClass('expand');
}
});
//
// Bind the drawer layout
var $drawerLayout = $('.drawer-layout'),
$drawer = $drawerLayout.find('.drawer'),
closeDrawer = function() {
$drawer.removeClass('slide-right slide-left');
$drawer.find('.drawer-overlay').remove();
$drawerLayout.removeClass('drawer-open drawer-slide-left-large drawer-slide-right-large');
return false;
};
// Drawer open buttons
$drawerLayout.find('[data-drawer-slide]').click(function(e) {
var $this = $(this),
direction = $this.data('drawer-slide');
$drawerLayout.addClass('drawer-open');
$drawer.addClass('slide-' + direction);
var $overlay = $('<a href="#" class="drawer-overlay"></a>')
$drawer.append($overlay);
$overlay.click(closeDrawer);
return false;
});
// Drawer close buttons
$drawerLayout.find('[data-drawer-close]').click(closeDrawer);
}
});

2
app/lib/common.js
View File

@ -45,7 +45,7 @@ var common = {
// Add an extra CRLR before the code so the postprocessor can determine
// the correct line indent for the <pre> tag.
var $ = cheerio.load(marked("```json\r\n\r\n" + schemaString + "\n```"));
var $ = cheerio.load(marked("```json\r\n" + schemaString + "\n```"));
var definitions = $('span:not(:has(span)):contains("#/definitions/")');
definitions.each(function(index, item) {
var ref = $(item).html();

66
app/lib/config.js
View File

@ -1,19 +1,34 @@
var path = require('path');
module.exports = function(grunt, options, spec) {
return {
// Compile SCSS source files into the cache directory
compass: {
dist: {
scss: {
options: {
sassDir: options.appDir + '/stylesheets',
specify: options.appDir + '/stylesheets/spectacle.scss',
sassDir: path.resolve(options.appDir + '/stylesheets'),
cssDir: options.cacheDir + '/stylesheets',
environment: 'development',
// outputStyle: 'compressed',
importPath: [
'node_modules/foundation-sites/scss'
options.appDir + '/vendor',
options.appDir + '/vendor/foundation/scss'
]
}
}
},
foundation_scss: {
options: {
specify: path.resolve(options.appDir + '/stylesheets/foundation.scss'),
sassDir: path.resolve(options.appDir + '/stylesheets'),
cssDir: options.cacheDir + '/stylesheets',
environment: 'development',
importPath: [
options.appDir + '/vendor',
options.appDir + '/vendor/foundation/scss'
]
}
},
},
concat: {
@ -26,17 +41,39 @@ module.exports = function(grunt, options, spec) {
// Concentrate compiled CSS files into the traget directory
css: {
src: [options.cacheDir + '/stylesheets/*.css'],
src: [options.cacheDir + '/stylesheets/spectacle.css'],
dest: options.targetDir + '/stylesheets/spectacle.css',
},
// // Concentrate required Foundation JS files into the traget directory
// foundation_js: {
// src: [
// options.appDir + '/vendor/foundation/js/foundation.core.js',
// options.appDir + '/vendor/foundation/js/foundation.util.mediaQuery.js',
// options.appDir + '/vendor/foundation/js/foundation.util.triggers.js',
// options.appDir + '/vendor/foundation/js/foundation.util.motion.js',
// options.appDir + '/vendor/foundation/js/foundation.offcanvas.js'
// ],
// dest: options.targetDir + '/javascripts/foundation.js',
// },
// Concentrate compiled Foundation CSS files into the traget directory
foundation_css: {
src: [options.cacheDir + '/stylesheets/foundation.css'],
dest: options.targetDir + '/stylesheets/foundation.css',
}
},
// Minify compiled JS files in the traget directory
uglify: {
build: {
js: {
src: options.targetDir + '/javascripts/spectacle.js',
dest: options.targetDir + '/javascripts/spectacle.min.js'
}
// foundation_js: {
// src: options.targetDir + '/javascripts/foundation.js',
// dest: options.targetDir + '/javascripts/foundation.min.js'
// }
},
// Minify compiled CSS files in the traget directory
@ -77,7 +114,7 @@ module.exports = function(grunt, options, spec) {
hostname: '*',
port: options.port,
base: options.targetDir,
livereload: true
// livereload: true
}
}
},
@ -85,23 +122,28 @@ module.exports = function(grunt, options, spec) {
// Watch the filesystem and regenerate docs if sources change
watch: {
options: {
livereload: true
// livereload: true,
spawn: false
},
// options: {
// livereload: true
// },
js: {
files: [options.appDir + '/javascripts/**/*.js'],
// tasks: ['javascripts']
tasks: ['javascripts']
},
css: {
files: [options.appDir + '/stylesheets/**/*.scss'],
// tasks: ['stylesheets']
tasks: ['stylesheets']
},
templates: {
files: [
options.specFile,
options.appDir + '/views/**/*.hbs',
options.appDir + '/helpers/**/*.js',
options.appDir + '/lib/**/*.js'
],
// tasks: ['templates']
tasks: ['templates']
}
}
}

2
app/lib/preprocessor.js
View File

@ -54,7 +54,7 @@ module.exports = function(swaggerJson) {
return true
})
// Show body section, if either a body-parameter or a consumes-property is present.
operation._show_requst_body_section = operation._request_body || operation.consumes
operation._show_requst_body_section = !!operation._request_body //|| operation.consumes
})
})
// If there are multiple tags, we show the tag-based summary

80
app/stylesheets/_drawer.scss Normal file
View File

@ -0,0 +1,80 @@
//
//= Drawer layout
//
.drawer-layout {
.drawer {
box-shadow: 0 0 10px rgba($black, 0.5);
transition: transform $default-transition-length ease;
backface-visibility: hidden;
&.slide-left {
transform: translateX(-250px);
}
&.slide-right {
transform: translateX(250px);
}
.drawer-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba($white, 0.25);
}
@include breakpoint(large) {
&.slide-left {
transform: none;
margin-left: -250px;
}
&.slide-right {
transform: none;
margin-left: 250px;
}
.drawer-overlay {
display: none;
}
}
}
@include breakpoint(large) {
&.drawer-slide-left-large {
.drawer {
margin-left: -250px;
}
.floating-menu-icon {
opacity: 0;
}
}
&.drawer-slide-right-large {
.drawer {
margin-left: 250px;
}
.floating-menu-icon {
opacity: 0;
}
}
}
&.drawer-open {
.floating-menu-icon {
opacity: 0;
}
}
.floating-menu-icon {
position: fixed;
top: 0.75rem;
right: 0.75rem;
background-color: rgba($black, 0.75);
padding: 0.65rem;
z-index: 1;
border-radius: 5px;
transition: opacity $default-transition-length linear;
.hamburger {
@include hamburger($color: $white, $color-hover: $medium-gray);
}
}
}

47
app/stylesheets/_foundation-includes.scss
View File

@ -1,47 +0,0 @@
//
//= Include Foundation components
@import 'foundation';
// TODO: Conditionally include `foundation-global-styles`.
// It's better if we don't have ANY global includes.
@include foundation-global-styles;
#spectacle {
@include foundation-grid;
//@include foundation-flex-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;
}

4
app/stylesheets/_foundation-settings.scss
View File

@ -519,9 +519,9 @@ $thumbnail-radius: $global-radius;
// 33. Title Bar
// -------------
$titlebar-background: $black;
$titlebar-background: scale-color($black, $lightness: -10%);
$titlebar-color: $white;
$titlebar-padding: 0.5rem;
$titlebar-padding: 0.75rem 1.25rem; // 0.5rem
$titlebar-text-font-weight: bold;
$titlebar-icon-color: $white;
$titlebar-icon-color-hover: $medium-gray;

9
app/stylesheets/_index.scss
View File

@ -2,15 +2,12 @@
//= Main includes
//
// Scope everything inside #spectacle ...
#spectacle {
// Include highlight.js style
@import 'monokai';
// Include Spectacle layout
@import 'variables';
@import 'utils';
@import 'schema';
@import 'layout';
@import 'drawer';
@import 'monokai';
}

172
app/stylesheets/_layout.scss
View File

@ -13,65 +13,67 @@
margin: 0 !important;
}
button:focus {
outline: none;
}
.default-label {
@include small-label('secondary');
@include small-label($secondary-color);
}
//
// Topbar layout
.top-bar {
padding: 0.5rem;
height: $topbar-height;
color: $white;
// Make it fixed
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1;
}
// .top-bar {
// padding: 0.5rem;
// height: $topbar-height;
// color: $white;
//
// // Make it fixed
// position: fixed;
// left: 0;
// right: 0;
// top: 0;
// z-index: 1;
// }
//
#logo {
span {
opacity: 0.5;
margin-left: 5px;
}
}
//
// Page layout
#page {
margin-top: $topbar-height;
}
// Include the Foundation grid (the only required component)
@include foundation-grid();
//
// Sidebar layout
#sidebar {
padding-top: 1rem;
padding-left: 1rem;
padding-top: 1.5rem;
padding-left: 1.5rem;
padding-right: 1rem;
padding-bottom: 2rem;
border-right: 1px solid #eee;
background-color: #f6f6f6 !important;
background-color: #f6f6f6;
height: 100vh;
//height: 100%;
overflow: scroll;
overflow: auto;
position: fixed;
bottom: 0;
left: 0;
top: 0;
width: $drawer-size;
h5 {
margin: 1.25rem 0 0.5rem;
margin: 1.5rem 0 0.75rem;
text-transform: uppercase;
color: $medium-gray;
color: $accent-color;
font-size: 0.9rem;
}
a {
display: block;
font-size: 0.95rem;
margin: 0 0 0.175rem;
// font-size: 0.95rem;
margin: 0 0 0.25rem;
color: scale-color($black, $lightness: 15%);
white-space: nowrap;
overflow: hidden;
@ -79,9 +81,9 @@
text-overflow: ellipsis;
&.active {
// color: $primary-color;
color: $accent-color;
font-weight: bold;
color: $accent-color; //$primary-color;
color: $primary-color;
// font-weight: bold;
}
}
@ -102,23 +104,19 @@
}
}
}
}
@media screen and (min-width: $medium-width) { // medium and up
#sidebar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: $topbar-height;
.close-button {
opacity: 0.5;
}
}
//
// Documentation layout
.doc-content {
@extend .large-6;
// @include grid-column(6, $column-padding);
padding-left: $column-padding !important;
padding-right: $column-padding !important;
}
@ -131,27 +129,31 @@
}
#docs {
background: $white;
overflow: hidden;
position: relative;
.example-box {
display: none;
}
@media screen and (min-width: $large-width) { // medium and up
@include breakpoint(large) {
.example-box {
// width: 50%;
display: block;
background-color: #2E2F28;
background-color: #23241f;
// background-color: #2E2F28;
background-color: $black;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
}
}
article {
position: relative;
.no-description {
color: $dark-gray;
}
@ -173,15 +175,10 @@ article {
margin-bottom: 0;
}
#introduction {
padding-top: 2rem; // 30px
.tag-description {
// margin-bottom: 0 !important;
}
// > h1:first-child {
// margin-top: 0;
// margin-bottom: 2.5rem;
// }
//
// Titles
@ -193,6 +190,7 @@ article {
padding-right: $column-padding;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e2e2e2;
background-color: #f6f6f6;
// border-top: 1px solid #ddd;
// border-bottom: 1px solid #ccc;
// background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
@ -201,7 +199,24 @@ article {
// background-image: -moz-linear-gradient(top, #fff, #f9f9f9);
// background-image: -webkit-linear-gradient(top, #fff, #f9f9f9);
// background-image: linear-gradient(to bottom, #fff, #f9f9f9);
background-color: #f6f6f6 !important;
}
h1.doc-title {
@extend .doc-content;
margin: 0;
padding-top: 2.15rem;
padding-bottom: 0;
font-weight: bold;
background: transparent;
border: none;
color: scale-color($black, $lightness: 20%);
span {
display: none;
opacity: 0.65;
margin-left: 5px;
font-weight: normal;
}
}
h2 {
@ -226,11 +241,15 @@ article {
@extend .doc-content;
}
h1+.panel > h2, h1+span+.panel > h2, h1+span+span+.panel > h2 {
h1+.panel > h2 {
margin-top: 0;
border-top: none;
}
h1+.tag-description+.panel > h2 {
margin-top: 2rem;
}
h1+.panel h3 {
margin-top: 1rem;
}
@ -271,20 +290,24 @@ article {
.prop-name {
@extend .columns;
@extend .small-4;
@extend .text-right;
@extend .small-5;
// @extend .text-right;
text-align: right;
padding-right: 0.85rem !important;
word-break: break-all;
word-break: break-word;
}
.prop-value {
@extend .columns;
@extend .small-8;
@extend .small-7;
padding-left: 0.85rem !important;
word-wrap: break-word;
}
&.prop-inner {
@extend small;
// @extend small;
padding-top: 0.5em;
padding-bottom: 0.5em;
font-size: $small-font-size;
.prop-name {
color: $dark-gray;
@ -298,7 +321,7 @@ article {
.doc-row {
@extend .row;
@extend .collapse;
margin: 30px 0 20px;
margin: 2rem 0 20px;
}
.doc-copy {
@ -333,13 +356,13 @@ article {
//color: $dark-gray;
}
}
}
@media screen and (max-width: $large-width) { // medium and lower
.doc-examples:not(:empty) {
margin-top: 1.5rem;
padding-top: 1.5rem;
padding-bottom: 0.5rem;
@include breakpoint(medium down) {
&:not(:empty) {
margin-top: 1.5rem;
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
}
}
@ -347,7 +370,8 @@ article {
// Powered by link
.powered-by {
@extend small;
// @extend small;
font-size: $small-font-size;
color: $medium-gray;
span {
@ -365,7 +389,9 @@ article {
text-align: right;
right: 0;
}
@media screen and (min-width: $large-width) { // large and up
@include breakpoint(large) {
// @media screen and (min-width: $large-width) { // large and up
.operation-tags {
right: 50%;
}
@ -378,18 +404,18 @@ article {
//
// Code highlighting
//
.hljs {
padding: 0;
padding: 0 !important;
margin-bottom: 1.5rem;
pre {
line-height: 1.25;
padding: 0.15rem 2rem;
padding: 1.5rem 2rem;
border-radius: 5px;
box-shadow: 0 0 200px rgba(0, 0, 0, 0.33) inset;
margin-bottom: 1.5rem;
margin: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #404040;

12
app/stylesheets/_utils.scss
View File

@ -7,7 +7,7 @@
&:before {
content: $title;
display: block;
@extend h6;
// @extend h6;
margin-bottom: 0.5em;
color: $accent-color;
text-transform: uppercase;
@ -15,17 +15,19 @@
}
}
@mixin small-label($style:'alert') {
@mixin small-label($color: $alert-color) {
@include label();
@extend .label.#{$style};
// @extend .label.#{$style};
background: $color;
color: foreground($color);
font-size: 0.75rem;
border-radius: 4px;
padding: 3px 6px;
}
@mixin named-label($name, $style:'alert') {
@mixin named-label($name, $color: $alert-color) {
&:before {
@include small-label($style);
@include small-label($color);
content: $name;
}
}

20
app/stylesheets/_variables.scss
View File

@ -2,23 +2,29 @@
//= Layout variables
//
// The height of the top bar
$topbar-height: 50px !default;
// Width of the off-canvas menu.
$drawer-size: 250px !default;
// Length of animation.
$default-transition-length: 0.5s !default;
// The width of the column padding
$column-padding: 2.25rem !default;
// The accent color to use for nav highlights and section headings
// The accent color to use for section headings
$accent-color: #f68b1f !default;
// The dark backgorund color behind code examples
$dark-background-color: $black !default;
// Medium device width (from Foundation)
$medium-width: 40em !default;
// The height of the top bar
// $topbar-height: 50px !default;
// Large device width (from Foundation)
$large-width: 64em !default;
// // Medium device width (from Foundation)
// $medium-width: 40em !default;
//
// // Large device width (from Foundation)
// $large-width: 64em !default;
//
// JSON schema labels

45
app/stylesheets/foundation.scss vendored Normal file
View File

@ -0,0 +1,45 @@
//
//= Foundation
//
@import 'foundation-settings';
@import 'foundation/scss/foundation';
// Include required components to build
@include foundation-global-styles;
@include foundation-grid;
//@include foundation-flex-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;

6
app/stylesheets/spectacle-core.scss
View File

@ -1,6 +0,0 @@
//
//= Spectacle core
//
// Include just the Spectacle core without Foundation
@import 'index';

5
app/stylesheets/spectacle.scss
View File

@ -2,10 +2,9 @@
//= Spectacle
//
// Include Foundation
// TODO: Don't include foundation if already included
// Include Foundation components and utilities (but don't build anything)
@import 'foundation-settings';
@import 'foundation-includes';
@import 'foundation/scss/foundation';
// Include Spectacle
@import 'index';

22
app/vendor/foundation/LICENSE vendored Normal file
View File

@ -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.

51
app/vendor/foundation/README.md vendored Normal file
View File

@ -0,0 +1,51 @@
# [Foundation for Sites](http://foundation.zurb.com) (v6.1)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/zurb/foundation-sites?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
Foundation is the most advanced responsive front-end framework in the world. Quickly go from prototype to production, building sites or apps that work on any kind of device with Foundation. Includes layout constructs, like a fully customizable, responsive grid, commonly used JavaScript plugins, and full A11Y support.
## Requirements
Requires NodeJS to be installed on your machine. Works with 0.10, 0.12, and 4.1! **Note that parts of our build process will break with NPM 3, due to the changes in how packages are installed.**
The Sass is compiled using libsass, which requires the GCC to be installed on your machine. Windows users can install it through [MinGW](http://www.mingw.org/), and Mac users can install it through the [Xcode Command-line Tools](http://osxdaily.com/2014/02/12/install-command-line-tools-mac-os-x/).
## Setup
To get going with Foundation you can:
* [Install Yeti Launch](http://foundation.zurb.com/develop/yeti-launch.html): Seriously though, check it out!
* [Install the CLI](https://www.npmjs.com/package/foundation-cli): `npm install -g foundation-cli`
* [Download the latest release](http://foundation.zurb.com/sites/download.html)
* [Install with Bower](http://bower.io): `bower install foundation-sites`
* [Install with npm](http://npmjs.com): `npm install foundation-sites`
* [Install with Atmosphere for Meteor](https://atmospherejs.com): `meteor add zurb:foundation-sites`
* [Install with Composer](https://getcomposer.org/): `php composer.phar require zurb/foundation`
## Documentation
Foundation uses [Gulp](http://gulpjs.com/) and [SuperCollider](https://www.npmjs.com/package/supercollider) to generate its [documentation pages](http://foundation.zurb.com/sites/docs). Documentation can also be run from your local computer:
### View documentation locally
You'll want to clone the Foundation repo first and install all the dependencies. You can do this using the following commands:
```
git clone git@github.com:zurb/foundation-sites.git
cd foundation-sites
npm install
```
Then just run `npm start` and the documentation will be compiled. It will also launch an instance of [BrowserSync](http://www.browsersync.io/) and open a tab in your default browser.
The file structure:
```
foundation/
├── dist/
│ └── ...
├── docs/
│ └── ...
```
Copyright (c) 2015 ZURB, inc.

418
app/vendor/foundation/js/foundation.abide.js vendored Normal file
View File

@ -0,0 +1,418 @@
!function(Foundation, $) {
'use strict';
/**
* Creates a new instance of Abide.
* @class
* @fires Abide#init
* @param {Object} element - jQuery object to add the trigger to.
* @param {Object} options - Overrides to the default plugin settings.
*/
function Abide(element, options) {
this.$element = element;
this.options = $.extend({}, Abide.defaults, this.$element.data(), options);
this._init();
Foundation.registerPlugin(this, 'Abide');
}
/**
* Default settings for plugin
*/
Abide.defaults = {
/**
* The default event to validate inputs. Checkboxes and radios validate immediately.
* Remove or change this value for manual validation.
* @option
* @example 'fieldChange'
*/
validateOn: 'fieldChange',
/**
* Class to be applied to input labels on failed validation.
* @option
* @example 'is-invalid-label'
*/
labelErrorClass: 'is-invalid-label',
/**
* Class to be applied to inputs on failed validation.
* @option
* @example 'is-invalid-input'
*/
inputErrorClass: 'is-invalid-input',
/**
* Class selector to use to target Form Errors for show/hide.
* @option
* @example '.form-error'
*/
formErrorSelector: '.form-error',
/**
* Class added to Form Errors on failed validation.
* @option
* @example 'is-visible'
*/
formErrorClass: 'is-visible',
/**
* Set to true to validate text inputs on any value change.
* @option
* @example false
*/
liveValidate: false,
patterns: {
alpha : /^[a-zA-Z]+$/,
alpha_numeric : /^[a-zA-Z0-9]+$/,
integer : /^[-+]?\d+$/,
number : /^[-+]?\d*(?:[\.\,]\d+)?$/,
// amex, visa, diners
card : /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,
cvv : /^([0-9]){3,4}$/,
// http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
email : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,
url : /^(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,
// abc.de
domain : /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,
datetime : /^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,
// YYYY-MM-DD
date : /(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,
// HH:MM:SS
time : /^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,
dateISO : /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,
// MM/DD/YYYY
month_day_year : /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,
// DD/MM/YYYY
day_month_year : /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,
// #FFF or #FFFFFF
color : /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
},
/**
* Optional validation functions to be used. `equalTo` being the only default included function.
* Functions should return only a boolean if the input is valid or not. Functions are given the following arguments:
* el : The jQuery element to validate.
* required : Boolean value of the required attribute be present or not.
* parent : The direct parent of the input.
* @option
*/
validators: {
equalTo: function (el, required, parent) {
return $('#' + el.attr('data-equalto')).val() === el.val();
}
}
};
/**
* Initializes the Abide plugin and calls functions to get Abide functioning on load.
* @private
*/
Abide.prototype._init = function(){
this.$inputs = this.$element.find('input, textarea, select').not('[data-abide-ignore]');
this._events();
};
/**
* Initializes events for Abide.
* @private
*/
Abide.prototype._events = function() {
var _this = this;
this.$element.off('.abide')
.on('reset.zf.abide', function(e){
_this.resetForm();
})
.on('submit.zf.abide', function(e){
return _this.validateForm();
});
if(this.options.validateOn === 'fieldChange'){
this.$inputs.off('change.zf.abide')
.on('change.zf.abide', function(e){
_this.validateInput($(this));
});
}
if(this.options.liveValidate){
this.$inputs.off('input.zf.abide')
.on('input.zf.abide', function(e){
_this.validateInput($(this));
});
}
},
/**
* Calls necessary functions to update Abide upon DOM change
* @private
*/
Abide.prototype._reflow = function() {
this._init();
};
/**
* Checks whether or not a form element has the required attribute and if it's checked or not
* @param {Object} element - jQuery object to check for required attribute
* @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
*/
Abide.prototype.requiredCheck = function($el) {
if(!$el.attr('required')) return true;
var isGood = true;
switch ($el[0].type) {
case 'checkbox':
case 'radio':
isGood = $el[0].checked;
break;
case 'select':
case 'select-one':
case 'select-multiple':
var opt = $el.find('option:selected');
if(!opt.length || !opt.val()) isGood = false;
break;
default:
if(!$el.val() || !$el.val().length) isGood = false;
}
return isGood;
};
/**
* Based on $el, get the first element with selector in this order:
* 1. The element's direct sibling('s).
* 3. The element's parent's children.
*
* This allows for multiple form errors per input, though if none are found, no form errors will be shown.
*
* @param {Object} $el - jQuery object to use as reference to find the form error selector.
* @returns {Object} jQuery object with the selector.
*/
Abide.prototype.findFormError = function($el){
var $error = $el.siblings(this.options.formErrorSelector)
if(!$error.length){
$error = $el.parent().find(this.options.formErrorSelector);
}
return $error;
};
/**
* Get the first element in this order:
* 2. The <label> with the attribute `[for="someInputId"]`
* 3. The `.closest()` <label>
*
* @param {Object} $el - jQuery object to check for required attribute
* @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
*/
Abide.prototype.findLabel = function($el) {
var $label = this.$element.find('label[for="' + $el[0].id + '"]');
if(!$label.length){
return $el.closest('label');
}
return $label;
};
/**
* Adds the CSS error class as specified by the Abide settings to the label, input, and the form
* @param {Object} $el - jQuery object to add the class to
*/
Abide.prototype.addErrorClasses = function($el){
var $label = this.findLabel($el),
$formError = this.findFormError($el);
if($label.length){
$label.addClass(this.options.labelErrorClass);
}
if($formError.length){
$formError.addClass(this.options.formErrorClass);
}
$el.addClass(this.options.inputErrorClass).attr('data-invalid', '');
};
/**
* Removes CSS error class as specified by the Abide settings from the label, input, and the form
* @param {Object} $el - jQuery object to remove the class from
*/
Abide.prototype.removeErrorClasses = function($el){
var $label = this.findLabel($el),
$formError = this.findFormError($el);
if($label.length){
$label.removeClass(this.options.labelErrorClass);
}
if($formError.length){
$formError.removeClass(this.options.formErrorClass);
}
$el.removeClass(this.options.inputErrorClass).removeAttr('data-invalid');
};
/**
* Goes through a form to find inputs and proceeds to validate them in ways specific to their type
* @fires Abide#invalid
* @fires Abide#valid
* @param {Object} element - jQuery object to validate, should be an HTML input
* @returns {Boolean} goodToGo - If the input is valid or not.
*/
Abide.prototype.validateInput = function($el){
var clearRequire = this.requiredCheck($el),
validated = false,
customValidator = true,
validator = $el.attr('data-validator'),
equalTo = true;
switch ($el[0].type) {
case 'radio':
validated = this.validateRadio($el.attr('name'));
break;
case 'checkbox':
validated = clearRequire;
break;
case 'select':
case 'select-one':
case 'select-multiple':
validated = clearRequire;
break;
default:
validated = this.validateText($el);
}
if(validator){ customValidator = this.matchValidation($el, validator, $el.attr('required')); }
if($el.attr('data-equalto')){ equalTo = this.options.validators.equalTo($el); }
var goodToGo = [clearRequire, validated, customValidator, equalTo].indexOf(false) === -1,
message = (goodToGo ? 'valid' : 'invalid') + '.zf.abide';
this[goodToGo ? 'removeErrorClasses' : 'addErrorClasses']($el);
/**
* Fires when the input is done checking for validation. Event trigger is either `valid.zf.abide` or `invalid.zf.abide`
* Trigger includes the DOM element of the input.
* @event Abide#valid
* @event Abide#invalid
*/
$el.trigger(message, $el[0]);
return goodToGo;
};
/**
* Goes through a form and if there are any invalid inputs, it will display the form error element
* @returns {Boolean} noError - true if no errors were detected...
* @fires Abide#formvalid
* @fires Abide#forminvalid
*/
Abide.prototype.validateForm = function(){
var acc = [],
_this = this;
this.$inputs.each(function(){
acc.push(_this.validateInput($(this)));
});
var noError = acc.indexOf(false) === -1;
this.$element.find('[data-abide-error]').css('display', (noError ? 'none' : 'block'));
/**
* Fires when the form is finished validating. Event trigger is either `formvalid.zf.abide` or `forminvalid.zf.abide`.
* Trigger includes the element of the form.
* @event Abide#formvalid
* @event Abide#forminvalid
*/
this.$element.trigger((noError ? 'formvalid' : 'forminvalid') + '.zf.abide', [this.$element]);
return noError;
};
/**
* Determines whether or a not a text input is valid based on the pattern specified in the attribute. If no matching pattern is found, returns true.
* @param {Object} $el - jQuery object to validate, should be a text input HTML element
* @param {String} pattern - string value of one of the RegEx patterns in Abide.options.patterns
* @returns {Boolean} Boolean value depends on whether or not the input value matches the pattern specified
*/
Abide.prototype.validateText = function($el, pattern){
// pattern = pattern ? pattern : $el.attr('pattern') ? $el.attr('pattern') : $el.attr('type');
pattern = (pattern || $el.attr('pattern') || $el.attr('type'));
var inputText = $el.val();
return inputText.length ?//if text, check if the pattern exists, if so, test it, if no text or no pattern, return true.
this.options.patterns.hasOwnProperty(pattern) ? this.options.patterns[pattern].test(inputText) :
pattern && pattern !== $el.attr('type') ? new RegExp(pattern).test(inputText) : true : true;
}; /**
* Determines whether or a not a radio input is valid based on whether or not it is required and selected
* @param {String} groupName - A string that specifies the name of a radio button group
* @returns {Boolean} Boolean value depends on whether or not at least one radio input has been selected (if it's required)
*/
Abide.prototype.validateRadio = function(groupName){
var $group = this.$element.find(':radio[name="' + groupName + '"]'),
counter = [],
_this = this;
$group.each(function(){
var rdio = $(this),
clear = _this.requiredCheck(rdio);
counter.push(clear);
if(clear) _this.removeErrorClasses(rdio);
});
return counter.indexOf(false) === -1;
};
/**
* Determines if a selected input passes a custom validation function. Multiple validations can be used, if passed to the element with `data-validator="foo bar baz"` in a space separated listed.
* @param {Object} $el - jQuery input element.
* @param {String} validators - a string of function names matching functions in the Abide.options.validators object.
* @param {Boolean} required - self explanatory?
* @returns {Boolean} - true if validations passed.
*/
Abide.prototype.matchValidation = function($el, validators, required){
var _this = this;
required = required ? true : false;
var clear = validators.split(' ').map(function(v){
return _this.options.validators[v]($el, required, $el.parent());
});
return clear.indexOf(false) === -1;
};
/**
* Resets form inputs and styles
* @fires Abide#formreset
*/
Abide.prototype.resetForm = function() {
var $form = this.$element,
opts = this.options;
$('.' + opts.labelErrorClass, $form).not('small').removeClass(opts.labelErrorClass);
$('.' + opts.inputErrorClass, $form).not('small').removeClass(opts.inputErrorClass);
$(opts.formErrorSelector + '.' + opts.formErrorClass).removeClass(opts.formErrorClass);
$form.find('[data-abide-error]').css('display', 'none');
$(':input', $form).not(':button, :submit, :reset, :hidden, [data-abide-ignore]').val('').removeAttr('data-invalid');
/**
* Fires when the form has been reset.
* @event Abide#formreset
*/
$form.trigger('formreset.zf.abide', [$form]);
};
/**
* Destroys an instance of Abide.
* Removes error styles and classes from elements, without resetting their values.
*/
Abide.prototype.destroy = function(){
var _this = this;
this.$element.off('.abide')
.find('[data-abide-error]').css('display', 'none');
this.$inputs.off('.abide')
.each(function(){
_this.removeErrorClasses($(this));
});
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Abide, 'Abide');
// Exports for AMD/Browserify
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
module.exports = Abide;
if (typeof define === 'function')
define(['foundation'], function() {
return Abide;
});
}(Foundation, jQuery);

229
app/vendor/foundation/js/foundation.accordion.js vendored Normal file
View File

@ -0,0 +1,229 @@
/**
* Accordion module.
* @module foundation.accordion
* @requires foundation.util.keyboard
* @requires foundation.util.motion
*/
!function($, Foundation) {
'use strict';
/**
* Creates a new instance of an accordion.
* @class
* @fires Accordion#init
* @param {jQuery} element - jQuery object to make into an accordion.
*/
function Accordion(element, options){
this.$element = element;
this.options = $.extend({}, Accordion.defaults, this.$element.data(), options);
this._init();
Foundation.registerPlugin(this, 'Accordion');
Foundation.Keyboard.register('Accordion', {
'ENTER': 'toggle',
'SPACE': 'toggle',
'ARROW_DOWN': 'next',
'ARROW_UP': 'previous'
});
}
Accordion.defaults = {
/**
* Amount of time to animate the opening of an accordion pane.
* @option
* @example 250
*/
slideSpeed: 250,
/**
* Allow the accordion to have multiple open panes.
* @option
* @example false
*/
multiExpand: false,
/**
* Allow the accordion to close all panes.
* @option
* @example false
*/
allowAllClosed: false
};
/**
* Initializes the accordion by animating the preset active pane(s).
* @private
*/
Accordion.prototype._init = function() {
this.$element.attr('role', 'tablist');
this.$tabs = this.$element.children('li');
if (this.$tabs.length == 0) {
this.$tabs = this.$element.children('[data-accordion-item]');
}
this.$tabs.each(function(idx, el){
var $el = $(el),
$content = $el.find('[data-tab-content]'),
id = $content[0].id || Foundation.GetYoDigits(6, 'accordion'),
linkId = el.id || id + '-label';
$el.find('a:first').attr({
'aria-controls': id,
'role': 'tab',
'id': linkId,
'aria-expanded': false,
'aria-selected': false
});
$content.attr({'role': 'tabpanel', 'aria-labelledby': linkId, 'aria-hidden': true, 'id': id});
});
var $initActive = this.$element.find('.is-active').children('[data-tab-content]');
if($initActive.length){
this.down($initActive, true);
}
this._events();
};
/**
* Adds event handlers for items within the accordion.
* @private
*/
Accordion.prototype._events = function() {
var _this = this;
this.$tabs.each(function(){
var $elem = $(this);
var $tabContent = $elem.children('[data-tab-content]');
if ($tabContent.length) {
$elem.children('a').off('click.zf.accordion keydown.zf.accordion')
.on('click.zf.accordion', function(e){
// $(this).children('a').on('click.zf.accordion', function(e) {
e.preventDefault();
if ($elem.hasClass('is-active')) {
if(_this.options.allowAllClosed || $elem.siblings().hasClass('is-active')){
_this.up($tabContent);
}
}
else {
_this.down($tabContent);
}
}).on('keydown.zf.accordion', function(e){
Foundation.Keyboard.handleKey(e, 'Accordion', {
toggle: function() {
_this.toggle($tabContent);
},
next: function() {
$elem.next().find('a').focus().trigger('click.zf.accordion');
},
previous: function() {
$elem.prev().find('a').focus().trigger('click.zf.accordion');
},
handled: function() {
e.preventDefault();
e.stopPropagation();
}
});
});
}
});
};
/**
* Toggles the selected content pane's open/close state.
* @param {jQuery} $target - jQuery object of the pane to toggle.
* @function
*/
Accordion.prototype.toggle = function($target){
if($target.parent().hasClass('is-active')){
if(this.options.allowAllClosed || $target.parent().siblings().hasClass('is-active')){
this.up($target);
}else{ return; }
}else{
this.down($target);
}
};
/**
* Opens the accordion tab defined by `$target`.
* @param {jQuery} $target - Accordion pane to open.
* @param {Boolean} firstTime - flag to determine if reflow should happen.
* @fires Accordion#down
* @function
*/
Accordion.prototype.down = function($target, firstTime) {
var _this = this;
if(!this.options.multiExpand && !firstTime){
var $currentActive = this.$element.find('.is-active').children('[data-tab-content]');
if($currentActive.length){
this.up($currentActive);
}
}
$target
.attr('aria-hidden', false)
.parent('[data-tab-content]')
.addBack()
.parent().addClass('is-active');
// Foundation.Move(_this.options.slideSpeed, $target, function(){
$target.slideDown(_this.options.slideSpeed);
// });
// if(!firstTime){
// Foundation._reflow(this.$element.attr('data-accordion'));
// }
$('#' + $target.attr('aria-labelledby')).attr({
'aria-expanded': true,
'aria-selected': true
});
/**
* Fires when the tab is done opening.
* @event Accordion#down
*/
this.$element.trigger('down.zf.accordion', [$target]);
};
/**
* Closes the tab defined by `$target`.
* @param {jQuery} $target - Accordion tab to close.
* @fires Accordion#up
* @function
*/
Accordion.prototype.up = function($target) {
var $aunts = $target.parent().siblings(),
_this = this;
var canClose = this.options.multiExpand ? $aunts.hasClass('is-active') : $target.parent().hasClass('is-active');
if(!this.options.allowAllClosed && !canClose){
return;
}
// Foundation.Move(this.options.slideSpeed, $target, function(){
$target.slideUp(_this.options.slideSpeed);
// });
$target.attr('aria-hidden', true)
.parent().removeClass('is-active');
$('#' + $target.attr('aria-labelledby')).attr({
'aria-expanded': false,
'aria-selected': false
});
/**
* Fires when the tab is done collapsing up.
* @event Accordion#up
*/
this.$element.trigger('up.zf.accordion', [$target]);
};
/**
* Destroys an instance of an accordion.
* @fires Accordion#destroyed
* @function
*/
Accordion.prototype.destroy = function() {
this.$element.find('[data-tab-content]').slideUp(0).css('display', '');
this.$element.find('a').off('.zf.accordion');
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Accordion, 'Accordion');
}(jQuery, window.Foundation);

262
app/vendor/foundation/js/foundation.accordionMenu.js vendored Normal file
View File

@ -0,0 +1,262 @@
/**
* AccordionMenu module.
* @module foundation.accordionMenu
* @requires foundation.util.keyboard
* @requires foundation.util.motion
* @requires foundation.util.nest
*/
!function($) {
'use strict';
/**
* Creates a new instance of an accordion menu.
* @class
* @fires AccordionMenu#init
* @param {jQuery} element - jQuery object to make into an accordion menu.
* @param {Object} options - Overrides to the default plugin settings.
*/
function AccordionMenu(element, options) {
this.$element = element;
this.options = $.extend({}, AccordionMenu.defaults, this.$element.data(), options);
Foundation.Nest.Feather(this.$element, 'accordion');
this._init();
Foundation.registerPlugin(this, 'AccordionMenu');
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'
});
}
AccordionMenu.defaults = {
/**
* Amount of time to animate the opening of a submenu in ms.
* @option
* @example 250
*/
slideSpeed: 250,
/**
* Allow the menu to have multiple open panes.
* @option
* @example true
*/
multiOpen: true
};
/**
* Initializes the accordion menu by hiding all nested menus.
* @private
*/
AccordionMenu.prototype._init = function() {
this.$element.find('[data-submenu]').not('.is-active').slideUp(0);//.find('a').css('padding-left', '1rem');
this.$element.attr({
'role': 'tablist',
'aria-multiselectable': this.options.multiOpen
});
this.$menuLinks = this.$element.find('.has-submenu');
this.$menuLinks.each(function(){
var linkId = this.id || Foundation.GetYoDigits(6, 'acc-menu-link'),
$elem = $(this),
$sub = $elem.children('[data-submenu]'),
subId = $sub[0].id || Foundation.GetYoDigits(6, 'acc-menu'),
isActive = $sub.hasClass('is-active');
$elem.attr({
'aria-controls': subId,
'aria-expanded': isActive,
'aria-selected': false,
'role': 'tab',
'id': linkId
});
$sub.attr({
'aria-labelledby': linkId,
'aria-hidden': !isActive,
'role': 'tabpanel',
'id': subId
});
});
var initPanes = this.$element.find('.is-active');
if(initPanes.length){
var _this = this;
initPanes.each(function(){
_this.down($(this));
});
}
this._events();
};
/**
* Adds event handlers for items within the menu.
* @private
*/
AccordionMenu.prototype._events = function() {
var _this = this;
this.$element.find('li').each(function() {
var $submenu = $(this).children('[data-submenu]');
if ($submenu.length) {
$(this).children('a').off('click.zf.accordionmenu').on('click.zf.accordionmenu', function(e) {
e.preventDefault();
_this.toggle($submenu);
});
}
}).on('keydown.zf.accordionmenu', function(e){
var $element = $(this),
$elements = $element.parent('ul').children('li'),
$prevElement,
$nextElement,
$target = $element.children('[data-submenu]');
$elements.each(function(i) {
if ($(this).is($element)) {
$prevElement = $elements.eq(Math.max(0, i-1));
$nextElement = $elements.eq(Math.min(i+1, $elements.length-1));
if ($(this).children('[data-submenu]:visible').length) { // has open sub menu
$nextElement = $element.find('li:first-child');
}
if ($(this).is(':first-child')) { // is first element of sub menu
$prevElement = $element.parents('li').first();
} else if ($prevElement.children('[data-submenu]:visible').length) { // if previous element has open sub menu
$prevElement = $prevElement.find('li:last-child');
}
if ($(this).is(':last-child')) { // is last element of sub menu
$nextElement = $element.parents('li').first().next('li');
}
return;
}
});
Foundation.Keyboard.handleKey(e, 'AccordionMenu', {
open: function() {
if ($target.is(':hidden')) {
_this.down($target);
$target.find('li').first().focus();
}
},
close: function() {
if ($target.length && !$target.is(':hidden')) { // close active sub of this item
_this.up($target);
} else if ($element.parent('[data-submenu]').length) { // close currently open sub
_this.up($element.parent('[data-submenu]'));
$element.parents('li').first().focus();
}
},
up: function() {
$prevElement.focus();
},
down: function() {
$nextElement.focus();
},
toggle: function() {
if ($element.children('[data-submenu]').length) {
_this.toggle($element.children('[data-submenu]'));
}
},
closeAll: function() {
_this.hideAll();
},
handled: function() {
e.preventDefault();
e.stopImmediatePropagation();
}
});
});//.attr('tabindex', 0);
};
/**
* Closes all panes of the menu.
* @function
*/
AccordionMenu.prototype.hideAll = function(){
this.$element.find('[data-submenu]').slideUp(this.options.slideSpeed);
};
/**
* Toggles the open/close state of a submenu.
* @function
* @param {jQuery} $target - the submenu to toggle
*/
AccordionMenu.prototype.toggle = function($target){
if(!$target.is(':animated')) {
if (!$target.is(':hidden')) {
this.up($target);
}
else {
this.down($target);
}
}
};
/**
* Opens the sub-menu defined by `$target`.
* @param {jQuery} $target - Sub-menu to open.
* @fires AccordionMenu#down
*/
AccordionMenu.prototype.down = function($target) {
var _this = this;
if(!this.options.multiOpen){
this.up(this.$element.find('.is-active').not($target.parentsUntil(this.$element).add($target)));
}
$target.addClass('is-active').attr({'aria-hidden': false})
.parent('.has-submenu').attr({'aria-expanded': true, 'aria-selected': true});
Foundation.Move(this.options.slideSpeed, $target, function(){
$target.slideDown(_this.options.slideSpeed);
});
/**
* Fires when the menu is done collapsing up.
* @event AccordionMenu#down
*/
this.$element.trigger('down.zf.accordionMenu', [$target]);
};
/**
* Closes the sub-menu defined by `$target`. All sub-menus inside the target will be closed as well.
* @param {jQuery} $target - Sub-menu to close.
* @fires AccordionMenu#up
*/
AccordionMenu.prototype.up = function($target) {
var _this = this;
Foundation.Move(this.options.slideSpeed, $target, function(){
$target.slideUp(_this.options.slideSpeed);
});
$target.attr('aria-hidden', true)
.find('[data-submenu]').slideUp(0).attr('aria-hidden', true).end()
.parent('.has-submenu')
.attr({'aria-expanded': false, 'aria-selected': false});
// $target.slideUp(this.options.slideSpeed, function() {
// $target.find('[data-submenu]').slideUp(0).attr('aria-hidden', true);
// }).attr('aria-hidden', true).parent('.has-submenu').attr({'aria-expanded': false, 'aria-selected': false});
/**
* Fires when the menu is done collapsing up.
* @event AccordionMenu#up
*/
this.$element.trigger('up.zf.accordionMenu', [$target]);
};
/**
* Destroys an instance of accordion menu.
* @fires AccordionMenu#destroyed
*/
AccordionMenu.prototype.destroy = function(){
this.$element.find('[data-submenu]').slideDown(0).css('display', '');
this.$element.find('a').off('click.zf.accordionMenu');
Foundation.Nest.Burn(this.$element, 'accordion');
Foundation.unregisterPlugin(this);
};
Foundation.plugin(AccordionMenu, 'AccordionMenu');
}(jQuery, window.Foundation);

378
app/vendor/foundation/js/foundation.core.js vendored Normal file
View File

@ -0,0 +1,378 @@
!function($) {
"use strict";
var FOUNDATION_VERSION = '6.1.1';
// Global Foundation object
// This is attached to the window, or used as a module for AMD/Browserify
var Foundation = {
version: FOUNDATION_VERSION,
/**
* Stores initialized plugins.
*/
_plugins: {},
/**
* Stores generated unique ids for plugin instances
*/
_uuids: [],
/**
* Stores currently active plugins.
*/
_activePlugins: {},
/**
* Returns a boolean for RTL support
*/
rtl: function(){
return $('html').attr('dir') === 'rtl';
},
/**
* Defines a Foundation plugin, adding it to the `Foundation` namespace and the list of plugins to initialize when reflowing.
* @param {Object} plugin - The constructor of the plugin.
*/
plugin: function(plugin, name) {
// Object key to use when adding to global Foundation object
// Examples: Foundation.Reveal, Foundation.OffCanvas
var className = (name || functionName(plugin));
// Object key to use when storing the plugin, also used to create the identifying data attribute for the plugin
// Examples: data-reveal, data-off-canvas
var attrName = hyphenate(className);
// Add to the Foundation object and the plugins list (for reflowing)
this._plugins[attrName] = this[className] = plugin;
},
/**
* @function
* Creates a pointer to an instance of a Plugin within the Foundation._activePlugins object.
* Sets the `[data-pluginName="uniqueIdHere"]`, allowing easy access to any plugin's internal methods.
* Also fires the initialization event for each plugin, consolidating repeditive code.
* @param {Object} plugin - an instance of a plugin, usually `this` in context.
* @fires Plugin#init
*/
registerPlugin: function(plugin, name){
var pluginName = name ? hyphenate(name) : functionName(plugin.constructor).toLowerCase();
plugin.uuid = this.GetYoDigits(6, pluginName);
if(!plugin.$element.attr('data-' + pluginName)){ plugin.$element.attr('data-' + pluginName, plugin.uuid); }
if(!plugin.$element.data('zfPlugin')){ plugin.$element.data('zfPlugin', plugin); }
/**
* Fires when the plugin has initialized.
* @event Plugin#init
*/
plugin.$element.trigger('init.zf.' + pluginName);
this._uuids.push(plugin.uuid);
return;
},
/**
* @function
* Removes the pointer for an instance of a Plugin from the Foundation._activePlugins obj.
* Also fires the destroyed event for the plugin, consolidating repeditive code.
* @param {Object} plugin - an instance of a plugin, usually `this` in context.
* @fires Plugin#destroyed
*/
unregisterPlugin: function(plugin){
var pluginName = hyphenate(functionName(plugin.$element.data('zfPlugin').constructor));
this._uuids.splice(this._uuids.indexOf(plugin.uuid), 1);
plugin.$element.removeAttr('data-' + pluginName).removeData('zfPlugin')
/**
* Fires when the plugin has been destroyed.
* @event Plugin#destroyed
*/
.trigger('destroyed.zf.' + pluginName);
for(var prop in plugin){
plugin[prop] = null;//clean up script to prep for garbage collection.
}
return;
},
/**
* @function
* Causes one or more active plugins to re-initialize, resetting event listeners, recalculating positions, etc.
* @param {String} plugins - optional string of an individual plugin key, attained by calling `$(element).data('pluginName')`, or string of a plugin class i.e. `'dropdown'`
* @default If no argument is passed, reflow all currently active plugins.
*/
reInit: function(plugins){
var isJQ = plugins instanceof $;
try{
if(isJQ){
plugins.each(function(){
$(this).data('zfPlugin')._init();
});
}else{
var type = typeof plugins,
_this = this,
fns = {
'object': function(plgs){
plgs.forEach(function(p){
$('[data-'+ p +']').foundation('_init');
});
},
'string': function(){
$('[data-'+ plugins +']').foundation('_init');
},
'undefined': function(){
this['object'](Object.keys(_this._plugins));
}
};
fns[type](plugins);
}
}catch(err){
console.error(err);
}finally{
return plugins;
}
},
/**
* returns a random base-36 uid with namespacing
* @function
* @param {Number} length - number of random base-36 digits desired. Increase for more random strings.
* @param {String} namespace - name of plugin to be incorporated in uid, optional.
* @default {String} '' - if no plugin name is provided, nothing is appended to the uid.
* @returns {String} - unique id
*/
GetYoDigits: function(length, namespace){
length = length || 6;
return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1) + (namespace ? '-' + namespace : '');
},
/**
* Initialize plugins on any elements within `elem` (and `elem` itself) that aren't already initialized.
* @param {Object} elem - jQuery object containing the element to check inside. Also checks the element itself, unless it's the `document` object.
* @param {String|Array} plugins - A list of plugins to initialize. Leave this out to initialize everything.
*/
reflow: function(elem, plugins) {
// If plugins is undefined, just grab everything
if (typeof plugins === 'undefined') {
plugins = Object.keys(this._plugins);
}
// If plugins is a string, convert it to an array with one item
else if (typeof plugins === 'string') {
plugins = [plugins];
}
var _this = this;
// Iterate through each plugin
$.each(plugins, function(i, name) {
// Get the current plugin
var plugin = _this._plugins[name];
// Localize the search to all elements inside elem, as well as elem itself, unless elem === document
var $elem = $(elem).find('[data-'+name+']').addBack('[data-'+name+']');
// For each plugin found, initialize it
$elem.each(function() {
var $el = $(this),
opts = {};
// Don't double-dip on plugins
if ($el.data('zfPlugin')) {
console.warn("Tried to initialize "+name+" on an element that already has a Foundation plugin.");
return;
}
if($el.attr('data-options')){
var thing = $el.attr('data-options').split(';').forEach(function(e, i){
var opt = e.split(':').map(function(el){ return el.trim(); });
if(opt[0]) opts[opt[0]] = parseValue(opt[1]);
});
}
try{
$el.data('zfPlugin', new plugin($(this), opts));
}catch(er){
console.error(er);
}finally{
return;
}
});
});
},
getFnName: functionName,
transitionend: function($elem){
var transitions = {
'transition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'otransitionend'
};
var elem = document.createElement('div'),
end;
for (var t in transitions){
if (typeof elem.style[t] !== 'undefined'){
end = transitions[t];
}
}
if(end){
return end;
}else{
end = setTimeout(function(){
$elem.triggerHandler('transitionend', [$elem]);
}, 1);
return 'transitionend';
}
}
};
Foundation.util = {
/**
* Function for applying a debounce effect to a function call.
* @function
* @param {Function} func - Function to be called at end of timeout.
* @param {Number} delay - Time in ms to delay the call of `func`.
* @returns function
*/
throttle: function (func, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
if (timer === null) {
timer = setTimeout(function () {
func.apply(context, args);
timer = null;
}, delay);
}
};
}
};
// TODO: consider not making this a jQuery function
// TODO: need way to reflow vs. re-initialize
/**
* The Foundation jQuery method.
* @param {String|Array} method - An action to perform on the current jQuery object.
*/
var foundation = function(method) {
var type = typeof method,
$meta = $('meta.foundation-mq'),
$noJS = $('.no-js');
if(!$meta.length){
$('<meta class="foundation-mq">').appendTo(document.head);
}
if($noJS.length){
$noJS.removeClass('no-js');
}
if(type === 'undefined'){//needs to initialize the Foundation object, or an individual plugin.
Foundation.MediaQuery._init();
Foundation.reflow(this);
}else if(type === 'string'){//an individual method to invoke on a plugin or group of plugins
var args = Array.prototype.slice.call(arguments, 1);//collect all the arguments, if necessary
var plugClass = this.data('zfPlugin');//determine the class of plugin
if(plugClass !== undefined && plugClass[method] !== undefined){//make sure both the class and method exist
if(this.length === 1){//if there's only one, call it directly.
plugClass[method].apply(plugClass, args);
}else{
this.each(function(i, el){//otherwise loop through the jQuery collection and invoke the method on each
plugClass[method].apply($(el).data('zfPlugin'), args);
});
}
}else{//error for no class or no method
throw new ReferenceError("We're sorry, '" + method + "' is not an available method for " + (plugClass ? functionName(plugClass) : 'this element') + '.');
}
}else{//error for invalid argument type
throw new TypeError("We're sorry, '" + type + "' is not a valid parameter. You must use a string representing the method you wish to invoke.");
}
return this;
};
window.Foundation = Foundation;
$.fn.foundation = foundation;
// Polyfill for requestAnimationFrame
(function() {
if (!Date.now || !window.Date.now)
window.Date.now = Date.now = function() { return new Date().getTime(); };
var vendors = ['webkit', 'moz'];
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
var vp = vendors[i];
window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
|| window[vp+'CancelRequestAnimationFrame']);
}
if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)
|| !window.requestAnimationFrame || !window.cancelAnimationFrame) {
var lastTime = 0;
window.requestAnimationFrame = function(callback) {
var now = Date.now();
var nextTime = Math.max(lastTime + 16, now);
return setTimeout(function() { callback(lastTime = nextTime); },
nextTime - now);
};
window.cancelAnimationFrame = clearTimeout;
}
/**
* Polyfill for performance.now, required by rAF
*/
if(!window.performance || !window.performance.now){
window.performance = {
start: Date.now(),
now: function(){ return Date.now() - this.start; }
};
}
})();
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== 'function') {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP
? this
: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
if (this.prototype) {
// native functions don't have a prototype
fNOP.prototype = this.prototype;
}
fBound.prototype = new fNOP();
return fBound;
};
}
// Polyfill to get the name of a function in IE9
function functionName(fn) {
if (Function.prototype.name === undefined) {
var funcNameRegex = /function\s([^(]{1,})\(/;
var results = (funcNameRegex).exec((fn).toString());
return (results && results.length > 1) ? results[1].trim() : "";
}
else if (fn.prototype === undefined) {
return fn.constructor.name;
}
else {
return fn.prototype.constructor.name;
}
}
function parseValue(str){
if(/true/.test(str)) return true;
else if(/false/.test(str)) return false;
else if(!isNaN(str * 1)) return parseFloat(str);
return str;
}
// Convert PascalCase to kebab-case
// Thank you: http://stackoverflow.com/a/8955580
function hyphenate(str) {
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
}(jQuery);

321
app/vendor/foundation/js/foundation.drilldown.js vendored Normal file
View File

@ -0,0 +1,321 @@
/**
* Drilldown module.
* @module foundation.drilldown
* @requires foundation.util.keyboard
* @requires foundation.util.motion
* @requires foundation.util.nest
*/
!function($, Foundation){
'use strict';
/**
* Creates a new instance of a drilldown menu.
* @class
* @param {jQuery} element - jQuery object to make into an accordion menu.
* @param {Object} options - Overrides to the default plugin settings.
*/
function Drilldown(element, options){
this.$element = element;
this.options = $.extend({}, Drilldown.defaults, this.$element.data(), options);
Foundation.Nest.Feather(this.$element, 'drilldown');
this._init();
Foundation.registerPlugin(this, 'Drilldown');
Foundation.Keyboard.register('Drilldown', {
'ENTER': 'open',
'SPACE': 'open',
'ARROW_RIGHT': 'next',
'ARROW_UP': 'up',
'ARROW_DOWN': 'down',
'ARROW_LEFT': 'previous',
'ESCAPE': 'close',
'TAB': 'down',
'SHIFT_TAB': 'up'
});
}
Drilldown.defaults = {
/**
* Markup used for JS generated back button. Prepended to submenu lists and deleted on `destroy` method, 'js-drilldown-back' class required. Remove the backslash (`\`) if copy and pasting.
* @option
* @example '<\li><\a>Back<\/a><\/li>'
*/
backButton: '<li class="js-drilldown-back"><a>Back</a></li>',
/**
* Markup used to wrap drilldown menu. Use a class name for independent styling; the JS applied class: `is-drilldown` is required. Remove the backslash (`\`) if copy and pasting.
* @option
* @example '<\div class="is-drilldown"><\/div>'
*/
wrapper: '<div></div>',
/**
* Allow the menu to return to root list on body click.
* @option
* @example false
*/
closeOnClick: false
// holdOpen: false
};
/**
* Initializes the drilldown by creating jQuery collections of elements
* @private
*/
Drilldown.prototype._init = function(){
this.$submenuAnchors = this.$element.find('li.has-submenu');
this.$submenus = this.$submenuAnchors.children('[data-submenu]');
this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'menuitem');
this._prepareMenu();
this._keyboardEvents();
};
/**
* prepares drilldown menu by setting attributes to links and elements
* sets a min height to prevent content jumping
* wraps the element if not already wrapped
* @private
* @function
*/
Drilldown.prototype._prepareMenu = function(){
var _this = this;
// if(!this.options.holdOpen){
// this._menuLinkEvents();
// }
this.$submenuAnchors.each(function(){
var $sub = $(this);
var $link = $sub.find('a:first');
$link.data('savedHref', $link.attr('href')).removeAttr('href');
$sub.children('[data-submenu]')
.attr({
'aria-hidden': true,
'tabindex': 0,
'role': 'menu'
});
_this._events($sub);
});
this.$submenus.each(function(){
var $menu = $(this),
$back = $menu.find('.js-drilldown-back');
if(!$back.length){
$menu.prepend(_this.options.backButton);
}
_this._back($menu);
});
if(!this.$element.parent().hasClass('is-drilldown')){
this.$wrapper = $(this.options.wrapper).addClass('is-drilldown').css(this._getMaxDims());
this.$element.wrap(this.$wrapper);
}
};
/**
* Adds event handlers to elements in the menu.
* @function
* @private
* @param {jQuery} $elem - the current menu item to add handlers to.
*/
Drilldown.prototype._events = function($elem){
var _this = this;
$elem.off('click.zf.drilldown')
.on('click.zf.drilldown', function(e){
if($(e.target).parentsUntil('ul', 'li').hasClass('is-drilldown-submenu-parent')){
e.stopImmediatePropagation();
e.preventDefault();
}
// if(e.target !== e.currentTarget.firstElementChild){
// return false;
// }
_this._show($elem);
if(_this.options.closeOnClick){
var $body = $('body').not(_this.$wrapper);
$body.off('.zf.drilldown').on('click.zf.drilldown', function(e){
e.preventDefault();
_this._hideAll();
$body.off('.zf.drilldown');
});
}
});
};
/**
* Adds keydown event listener to `li`'s in the menu.
* @private
*/
Drilldown.prototype._keyboardEvents = function() {
var _this = this;
this.$menuItems.add(this.$element.find('.js-drilldown-back')).on('keydown.zf.drilldown', function(e){
var $element = $(this),
$elements = $element.parent('ul').children('li'),
$prevElement,
$nextElement;
$elements.each(function(i) {
if ($(this).is($element)) {
$prevElement = $elements.eq(Math.max(0, i-1));
$nextElement = $elements.eq(Math.min(i+1, $elements.length-1));
return;
}
});
Foundation.Keyboard.handleKey(e, 'Drilldown', {
next: function() {
if ($element.is(_this.$submenuAnchors)) {
_this._show($element);
$element.on(Foundation.transitionend($element), function(){
$element.find('ul li').filter(_this.$menuItems).first().focus();
});
}
},
previous: function() {
_this._hide($element.parent('ul'));
$element.parent('ul').on(Foundation.transitionend($element), function(){
setTimeout(function() {
$element.parent('ul').parent('li').focus();
}, 1);
});
},
up: function() {
$prevElement.focus();
},
down: function() {
$nextElement.focus();
},
close: function() {
_this._back();
//_this.$menuItems.first().focus(); // focus to first element
},
open: function() {
if (!$element.is(_this.$menuItems)) { // not menu item means back button
_this._hide($element.parent('ul'));
setTimeout(function(){$element.parent('ul').parent('li').focus();}, 1);
} else if ($element.is(_this.$submenuAnchors)) {
_this._show($element);
setTimeout(function(){$element.find('ul li').filter(_this.$menuItems).first().focus();}, 1);
}
},
handled: function() {
e.preventDefault();
e.stopImmediatePropagation();
}
});
}); // end keyboardAccess
};
/**
* Closes all open elements, and returns to root menu.
* @function
* @fires Drilldown#closed
*/
Drilldown.prototype._hideAll = function(){
var $elem = this.$element.find('.is-drilldown-sub.is-active').addClass('is-closing');
$elem.one(Foundation.transitionend($elem), function(e){
$elem.removeClass('is-active is-closing');
});
/**
* Fires when the menu is fully closed.
* @event Drilldown#closed
*/
this.$element.trigger('closed.zf.drilldown');
};
/**
* Adds event listener for each `back` button, and closes open menus.
* @function
* @fires Drilldown#back
* @param {jQuery} $elem - the current sub-menu to add `back` event.
*/
Drilldown.prototype._back = function($elem){
var _this = this;
$elem.off('click.zf.drilldown');
$elem.children('.js-drilldown-back')
.on('click.zf.drilldown', function(e){
e.stopImmediatePropagation();
// console.log('mouseup on back');
_this._hide($elem);
});
};
/**
* Adds event listener to menu items w/o submenus to close open menus on click.
* @function
* @private
*/
Drilldown.prototype._menuLinkEvents = function(){
var _this = this;
this.$menuItems.not('.has-submenu')
.off('click.zf.drilldown')
.on('click.zf.drilldown', function(e){
// e.stopImmediatePropagation();
setTimeout(function(){
_this._hideAll();
}, 0);
});
};
/**
* Opens a submenu.
* @function
* @fires Drilldown#open
* @param {jQuery} $elem - the current element with a submenu to open.
*/
Drilldown.prototype._show = function($elem){
$elem.children('[data-submenu]').addClass('is-active');
this.$element.trigger('open.zf.drilldown', [$elem]);
};
/**
* Hides a submenu
* @function
* @fires Drilldown#hide
* @param {jQuery} $elem - the current sub-menu to hide.
*/
Drilldown.prototype._hide = function($elem){
var _this = this;
$elem.addClass('is-closing')
.one(Foundation.transitionend($elem), function(){
$elem.removeClass('is-active is-closing');
});
/**
* Fires when the submenu is has closed.
* @event Drilldown#hide
*/
$elem.trigger('hide.zf.drilldown', [$elem]);
};
/**
* Iterates through the nested menus to calculate the min-height, and max-width for the menu.
* Prevents content jumping.
* @function
* @private
*/
Drilldown.prototype._getMaxDims = function(){
var max = 0, result = {};
this.$submenus.add(this.$element).each(function(){
var numOfElems = $(this).children('li').length;
max = numOfElems > max ? numOfElems : max;
});
result.height = max * this.$menuItems[0].getBoundingClientRect().height + 'px';
result.width = this.$element[0].getBoundingClientRect().width + 'px';
return result;
};
/**
* Destroys the Drilldown Menu
* @function
*/
Drilldown.prototype.destroy = function(){
this._hideAll();
Foundation.Nest.Burn(this.$element, 'drilldown');
this.$element.unwrap()
.find('.js-drilldown-back').remove()
.end().find('.is-active, .is-closing, .is-drilldown-sub').removeClass('is-active is-closing is-drilldown-sub')
.end().find('[data-submenu]').removeAttr('aria-hidden tabindex role')
.off('.zf.drilldown').end().off('zf.drilldown');
this.$element.find('a').each(function(){
var $link = $(this);
if($link.data('savedHref')){
$link.attr('href', $link.data('savedHref')).removeData('savedHref');
}else{ return; }
});
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Drilldown, 'Drilldown');
}(jQuery, window.Foundation);

390
app/vendor/foundation/js/foundation.dropdown.js vendored Normal file
View File

@ -0,0 +1,390 @@
/**
* Dropdown module.
* @module foundation.dropdown
* @requires foundation.util.keyboard
* @requires foundation.util.box
*/
!function($, Foundation){
'use strict';
/**
* Creates a new instance of a dropdown.
* @class
* @param {jQuery} element - jQuery object to make into an accordion menu.
* @param {Object} options - Overrides to the default plugin settings.
*/
function Dropdown(element, options){
this.$element = element;
this.options = $.extend({}, Dropdown.defaults, this.$element.data(), options);
this._init();
Foundation.registerPlugin(this, 'Dropdown');
Foundation.Keyboard.register('Dropdown', {
'ENTER': 'open',
'SPACE': 'open',
'ESCAPE': 'close',
'TAB': 'tab_forward',
'SHIFT_TAB': 'tab_backward'
});
}
Dropdown.defaults = {
/**
* Amount of time to delay opening a submenu on hover event.
* @option
* @example 250
*/
hoverDelay: 250,
/**
* Allow submenus to open on hover events
* @option
* @example false
*/
hover: false,
/**
* Don't close dropdown when hovering over dropdown pane
* @option
* @example true
*/
hoverPane: false,
/**
* Number of pixels between the dropdown pane and the triggering element on open.
* @option
* @example 1
*/
vOffset: 1,
/**
* Number of pixels between the dropdown pane and the triggering element on open.
* @option
* @example 1
*/
hOffset: 1,
/**
* Class applied to adjust open position. JS will test and fill this in.
* @option
* @example 'top'
*/
positionClass: '',
/**
* Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands.
* @option
* @example false
*/
trapFocus: false,
/**
* Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.
* @option
* @example true
*/
autoFocus: false,
/**
* Allows a click on the body to close the dropdown.
* @option
* @example true
*/
closeOnClick: false
};
/**
* Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
* @function
* @private
*/
Dropdown.prototype._init = function(){
var $id = this.$element.attr('id');
this.$anchor = $('[data-toggle="' + $id + '"]') || $('[data-open="' + $id + '"]');
this.$anchor.attr({
'aria-controls': $id,
'data-is-focus': false,
'data-yeti-box': $id,
'aria-haspopup': true,
'aria-expanded': false
// 'data-resize': $id
});
this.options.positionClass = this.getPositionClass();
this.counter = 4;
this.usedPositions = [];
this.$element.attr({
'aria-hidden': 'true',
'data-yeti-box': $id,
'data-resize': $id,
'aria-labelledby': this.$anchor[0].id || Foundation.GetYoDigits(6, 'dd-anchor')
});
this._events();
};
/**
* Helper function to determine current orientation of dropdown pane.
* @function
* @returns {String} position - string value of a position class.
*/
Dropdown.prototype.getPositionClass = function(){
var position = this.$element[0].className.match(/(top|left|right)/g);
position = position ? position[0] : '';
return position;
};
/**
* Adjusts the dropdown panes orientation by adding/removing positioning classes.
* @function
* @private
* @param {String} position - position class to remove.
*/
Dropdown.prototype._reposition = function(position){
this.usedPositions.push(position ? position : 'bottom');
//default, try switching to opposite side
if(!position && (this.usedPositions.indexOf('top') < 0)){
this.$element.addClass('top');
}else if(position === 'top' && (this.usedPositions.indexOf('bottom') < 0)){
this.$element.removeClass(position);
}else if(position === 'left' && (this.usedPositions.indexOf('right') < 0)){
this.$element.removeClass(position)
.addClass('right');
}else if(position === 'right' && (this.usedPositions.indexOf('left') < 0)){
this.$element.removeClass(position)
.addClass('left');
}
//if default change didn't work, try bottom or left first
else if(!position && (this.usedPositions.indexOf('top') > -1) && (this.usedPositions.indexOf('left') < 0)){
this.$element.addClass('left');
}else if(position === 'top' && (this.usedPositions.indexOf('bottom') > -1) && (this.usedPositions.indexOf('left') < 0)){
this.$element.removeClass(position)
.addClass('left');
}else if(position === 'left' && (this.usedPositions.indexOf('right') > -1) && (this.usedPositions.indexOf('bottom') < 0)){
this.$element.removeClass(position);
}else if(position === 'right' && (this.usedPositions.indexOf('left') > -1) && (this.usedPositions.indexOf('bottom') < 0)){
this.$element.removeClass(position);
}
//if nothing cleared, set to bottom
else{
this.$element.removeClass(position);
}
this.classChanged = true;
this.counter--;
};
/**
* Sets the position and orientation of the dropdown pane, checks for collisions.
* Recursively calls itself if a collision is detected, with a new position class.
* @function
* @private
*/
Dropdown.prototype._setPosition = function(){
if(this.$anchor.attr('aria-expanded') === 'false'){ return false; }
var position = this.getPositionClass(),
$eleDims = Foundation.Box.GetDimensions(this.$element),
$anchorDims = Foundation.Box.GetDimensions(this.$anchor),
_this = this,
direction = (position === 'left' ? 'left' : ((position === 'right') ? 'left' : 'top')),
param = (direction === 'top') ? 'height' : 'width',
offset = (param === 'height') ? this.options.vOffset : this.options.hOffset;
if(($eleDims.width >= $eleDims.windowDims.width) || (!this.counter && !Foundation.Box.ImNotTouchingYou(this.$element))){
this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({
'width': $eleDims.windowDims.width - (this.options.hOffset * 2),
'height': 'auto'
});
this.classChanged = true;
return false;
}
this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, position, this.options.vOffset, this.options.hOffset));
while(!Foundation.Box.ImNotTouchingYou(this.$element) && this.counter){
this._reposition(position);
this._setPosition();
}
};
/**
* Adds event listeners to the element utilizing the triggers utility library.
* @function
* @private
*/
Dropdown.prototype._events = function(){
var _this = this;
this.$element.on({
'open.zf.trigger': this.open.bind(this),
'close.zf.trigger': this.close.bind(this),
'toggle.zf.trigger': this.toggle.bind(this),
'resizeme.zf.trigger': this._setPosition.bind(this)
});
if(this.options.hover){
this.$anchor.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
.on('mouseenter.zf.dropdown', function(){
clearTimeout(_this.timeout);
_this.timeout = setTimeout(function(){
_this.open();
_this.$anchor.data('hover', true);
}, _this.options.hoverDelay);
}).on('mouseleave.zf.dropdown', function(){
clearTimeout(_this.timeout);
_this.timeout = setTimeout(function(){
_this.close();
_this.$anchor.data('hover', false);
}, _this.options.hoverDelay);
});
if(this.options.hoverPane){
this.$element.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
.on('mouseenter.zf.dropdown', function(){
clearTimeout(_this.timeout);
}).on('mouseleave.zf.dropdown', function(){
clearTimeout(_this.timeout);
_this.timeout = setTimeout(function(){
_this.close();
_this.$anchor.data('hover', false);
}, _this.options.hoverDelay);
});
}
}
this.$anchor.add(this.$element).on('keydown.zf.dropdown', function(e) {
var $target = $(this),
visibleFocusableElements = Foundation.Keyboard.findFocusable(_this.$element);
Foundation.Keyboard.handleKey(e, 'Dropdown', {
tab_forward: function() {
if (_this.$element.find(':focus').is(visibleFocusableElements.eq(-1))) { // left modal downwards, setting focus to first element
if (_this.options.trapFocus) { // if focus shall be trapped
visibleFocusableElements.eq(0).focus();
e.preventDefault();
} else { // if focus is not trapped, close dropdown on focus out
_this.close();
}
}
},
tab_backward: function() {
if (_this.$element.find(':focus').is(visibleFocusableElements.eq(0)) || _this.$element.is(':focus')) { // left modal upwards, setting focus to last element
if (_this.options.trapFocus) { // if focus shall be trapped
visibleFocusableElements.eq(-1).focus();
e.preventDefault();
} else { // if focus is not trapped, close dropdown on focus out
_this.close();
}
}
},
open: function() {
if ($target.is(_this.$anchor)) {
_this.open();
_this.$element.attr('tabindex', -1).focus();
e.preventDefault();
}
},
close: function() {
_this.close();
_this.$anchor.focus();
}
});
});
};
/**
* Adds an event handler to the body to close any dropdowns on a click.
* @function
* @private
*/
Dropdown.prototype._addBodyHandler = function(){
var $body = $(document.body).not(this.$element),
_this = this;
$body.off('click.zf.dropdown')
.on('click.zf.dropdown', function(e){
if(_this.$anchor.is(e.target) || _this.$anchor.find(e.target).length) {
return;
}
if(_this.$element.find(e.target).length) {
return;
}
_this.close();
$body.off('click.zf.dropdown');
});
};
/**
* Opens the dropdown pane, and fires a bubbling event to close other dropdowns.
* @function
* @fires Dropdown#closeme
* @fires Dropdown#show
*/
Dropdown.prototype.open = function(){
// var _this = this;
/**
* Fires to close other open dropdowns
* @event Dropdown#closeme
*/
this.$element.trigger('closeme.zf.dropdown', this.$element.attr('id'));
this.$anchor.addClass('hover')
.attr({'aria-expanded': true});
// this.$element/*.show()*/;
this._setPosition();
this.$element.addClass('is-open')
.attr({'aria-hidden': false});
if(this.options.autoFocus){
var $focusable = Foundation.Keyboard.findFocusable(this.$element);
if($focusable.length){
$focusable.eq(0).focus();
}
}
if(this.options.closeOnClick){ this._addBodyHandler(); }
/**
* Fires once the dropdown is visible.
* @event Dropdown#show
*/
this.$element.trigger('show.zf.dropdown', [this.$element]);
//why does this not work correctly for this plugin?
// Foundation.reflow(this.$element, 'dropdown');
// Foundation._reflow(this.$element.attr('data-dropdown'));
};
/**
* Closes the open dropdown pane.
* @function
* @fires Dropdown#hide
*/
Dropdown.prototype.close = function(){
if(!this.$element.hasClass('is-open')){
return false;
}
this.$element.removeClass('is-open')
.attr({'aria-hidden': true});
this.$anchor.removeClass('hover')
.attr('aria-expanded', false);
if(this.classChanged){
var curPositionClass = this.getPositionClass();
if(curPositionClass){
this.$element.removeClass(curPositionClass);
}
this.$element.addClass(this.options.positionClass)
/*.hide()*/.css({height: '', width: ''});
this.classChanged = false;
this.counter = 4;
this.usedPositions.length = 0;
}
this.$element.trigger('hide.zf.dropdown', [this.$element]);
// Foundation.reflow(this.$element, 'dropdown');
};
/**
* Toggles the dropdown pane's visibility.
* @function
*/
Dropdown.prototype.toggle = function(){
if(this.$element.hasClass('is-open')){
if(this.$anchor.data('hover')) return;
this.close();
}else{
this.open();
}
};
/**
* Destroys the dropdown.
* @function
*/
Dropdown.prototype.destroy = function(){
this.$element.off('.zf.trigger').hide();
this.$anchor.off('.zf.dropdown');
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Dropdown, 'Dropdown');
}(jQuery, window.Foundation);

391
app/vendor/foundation/js/foundation.dropdownMenu.js vendored Normal file
View File

@ -0,0 +1,391 @@
/**
* DropdownMenu module.
* @module foundation.dropdown-menu
* @requires foundation.util.keyboard
* @requires foundation.util.box
* @requires foundation.util.nest
*/
!function($, Foundation){
'use strict';
/**
* Creates a new instance of DropdownMenu.
* @class
* @fires DropdownMenu#init
* @param {jQuery} element - jQuery object to make into a dropdown menu.
* @param {Object} options - Overrides to the default plugin settings.
*/
function DropdownMenu(element, options){
this.$element = element;
this.options = $.extend({}, DropdownMenu.defaults, this.$element.data(), options);
Foundation.Nest.Feather(this.$element, 'dropdown');
this._init();
Foundation.registerPlugin(this, 'DropdownMenu');
Foundation.Keyboard.register('DropdownMenu', {
'ENTER': 'open',
'SPACE': 'open',
'ARROW_RIGHT': 'next',
'ARROW_UP': 'up',
'ARROW_DOWN': 'down',
'ARROW_LEFT': 'previous',
'ESCAPE': 'close'
});
}
/**
* Default settings for plugin
*/
DropdownMenu.defaults = {
/**
* Disallows hover events from opening submenus
* @option
* @example false
*/
disableHover: false,
/**
* Allow a submenu to automatically close on a mouseleave event, if not clicked open.
* @option
* @example true
*/
autoclose: true,
/**
* Amount of time to delay opening a submenu on hover event.
* @option
* @example 50
*/
hoverDelay: 50,
/**
* Allow a submenu to open/remain open on parent click event. Allows cursor to move away from menu.
* @option
* @example true
*/
clickOpen: false,
/**
* Amount of time to delay closing a submenu on a mouseleave event.
* @option
* @example 500
*/
closingTime: 500,
/**
* Position of the menu relative to what direction the submenus should open. Handled by JS.
* @option
* @example 'left'
*/
alignment: 'left',
/**
* Allow clicks on the body to close any open submenus.
* @option
* @example true
*/
closeOnClick: true,
/**
* Class applied to vertical oriented menus, Foundation default is `vertical`. Update this if using your own class.
* @option
* @example 'vertical'
*/
verticalClass: 'vertical',
/**
* Class applied to right-side oriented menus, Foundation default is `align-right`. Update this if using your own class.
* @option
* @example 'align-right'
*/
rightClass: 'align-right',
/**
* Boolean to force overide the clicking of links to perform default action, on second touch event for mobile.
* @option
* @example false
*/
forceFollow: true
};
/**
* Initializes the plugin, and calls _prepareMenu
* @private
* @function
*/
DropdownMenu.prototype._init = function(){
var subs = this.$element.find('li.is-dropdown-submenu-parent');
this.$element.children('.is-dropdown-submenu-parent').children('.is-dropdown-submenu').addClass('first-sub');
this.$menuItems = this.$element.find('[role="menuitem"]');
this.$tabs = this.$element.children('[role="menuitem"]');
this.isVert = this.$element.hasClass(this.options.verticalClass);
this.$tabs.find('ul.is-dropdown-submenu').addClass(this.options.verticalClass);
if(this.$element.hasClass(this.options.rightClass) || this.options.alignment === 'right'){
this.options.alignment = 'right';
subs.addClass('is-left-arrow opens-left');
}else{
subs.addClass('is-right-arrow opens-right');
}
if(!this.isVert){
this.$tabs.filter('.is-dropdown-submenu-parent').removeClass('is-right-arrow is-left-arrow opens-right opens-left')
.addClass('is-down-arrow');
}
this.changed = false;
this._events();
};
/**
* Adds event listeners to elements within the menu
* @private
* @function
*/
DropdownMenu.prototype._events = function(){
var _this = this,
hasTouch = 'ontouchstart' in window || (typeof window.ontouchstart !== 'undefined'),
parClass = 'is-dropdown-submenu-parent',
delay;
if(this.options.clickOpen || hasTouch){
this.$menuItems.on('click.zf.dropdownmenu touchstart.zf.dropdownmenu', function(e){
var $elem = $(e.target).parentsUntil('ul', '.' + parClass),
hasSub = $elem.hasClass(parClass),
hasClicked = $elem.attr('data-is-click') === 'true',
$sub = $elem.children('.is-dropdown-submenu');
if(hasSub){
if(hasClicked){
if(!_this.options.closeOnClick || (!_this.options.clickOpen && !hasTouch) || (_this.options.forceFollow && hasTouch)){ return; }
else{
e.stopImmediatePropagation();
e.preventDefault();
_this._hide($elem);
}
}else{
e.preventDefault();
e.stopImmediatePropagation();
_this._show($elem.children('.is-dropdown-submenu'));
$elem.add($elem.parentsUntil(_this.$element, '.' + parClass)).attr('data-is-click', true);
}
}else{ return; }
});
}
if(!this.options.disableHover){
this.$menuItems.on('mouseenter.zf.dropdownmenu', function(e){
e.stopImmediatePropagation();
var $elem = $(this),
hasSub = $elem.hasClass(parClass);
if(hasSub){
clearTimeout(delay);
delay = setTimeout(function(){
_this._show($elem.children('.is-dropdown-submenu'));
}, _this.options.hoverDelay);
}
}).on('mouseleave.zf.dropdownmenu', function(e){
var $elem = $(this),
hasSub = $elem.hasClass(parClass);
if(hasSub && _this.options.autoclose){
if($elem.attr('data-is-click') === 'true' && _this.options.clickOpen){ return false; }
// clearTimeout(delay);
delay = setTimeout(function(){
_this._hide($elem);
}, _this.options.closingTime);
}
});
}
this.$menuItems.on('keydown.zf.dropdownmenu', function(e){
var $element = $(e.target).parentsUntil('ul', '[role="menuitem"]'),
isTab = _this.$tabs.index($element) > -1,
$elements = isTab ? _this.$tabs : $element.siblings('li').add($element),
$prevElement,
$nextElement;
$elements.each(function(i) {
if ($(this).is($element)) {
$prevElement = $elements.eq(i-1);
$nextElement = $elements.eq(i+1);
return;
}
});
var nextSibling = function() {
if (!$element.is(':last-child')) $nextElement.children('a:first').focus();
}, prevSibling = function() {
$prevElement.children('a:first').focus();
}, openSub = function() {
var $sub = $element.children('ul.is-dropdown-submenu');
if($sub.length){
_this._show($sub);
$element.find('li > a:first').focus();
}else{ return; }
}, closeSub = function() {
//if ($element.is(':first-child')) {
var close = $element.parent('ul').parent('li');
close.children('a:first').focus();
_this._hide(close);
//}
};
var functions = {
open: openSub,
close: function() {
_this._hide(_this.$element);
_this.$menuItems.find('a:first').focus(); // focus to first element
},
handled: function() {
e.preventDefault();
e.stopImmediatePropagation();
}
};
if (isTab) {
if (_this.vertical) { // vertical menu
if (_this.options.alignment === 'left') { // left aligned
$.extend(functions, {
down: nextSibling,
up: prevSibling,
next: openSub,
previous: closeSub
});
} else { // right aligned
$.extend(functions, {
down: nextSibling,
up: prevSibling,
next: closeSub,
previous: openSub
});
}
} else { // horizontal menu
$.extend(functions, {
next: nextSibling,
previous: prevSibling,
down: openSub,
up: closeSub
});
}
} else { // not tabs -> one sub
if (_this.options.alignment === 'left') { // left aligned
$.extend(functions, {
next: openSub,
previous: closeSub,
down: nextSibling,
up: prevSibling
});
} else { // right aligned
$.extend(functions, {
next: closeSub,
previous: openSub,
down: nextSibling,
up: prevSibling
});
}
}
Foundation.Keyboard.handleKey(e, 'DropdownMenu', functions);
});
};
/**
* Adds an event handler to the body to close any dropdowns on a click.
* @function
* @private
*/
DropdownMenu.prototype._addBodyHandler = function(){
var $body = $(document.body),
_this = this;
$body.off('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu')
.on('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu', function(e){
var $link = _this.$element.find(e.target);
if($link.length){ return; }
_this._hide();
$body.off('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu');
});
};
/**
* Opens a dropdown pane, and checks for collisions first.
* @param {jQuery} $sub - ul element that is a submenu to show
* @function
* @private
* @fires DropdownMenu#show
*/
DropdownMenu.prototype._show = function($sub){
var idx = this.$tabs.index(this.$tabs.filter(function(i, el){
return $(el).find($sub).length > 0;
}));
var $sibs = $sub.parent('li.is-dropdown-submenu-parent').siblings('li.is-dropdown-submenu-parent');
this._hide($sibs, idx);
$sub.css('visibility', 'hidden').addClass('js-dropdown-active').attr({'aria-hidden': false})
.parent('li.is-dropdown-submenu-parent').addClass('is-active')
.attr({'aria-selected': true, 'aria-expanded': true});
var clear = Foundation.Box.ImNotTouchingYou($sub, null, true);
if(!clear){
var oldClass = this.options.alignment === 'left' ? '-right' : '-left',
$parentLi = $sub.parent('.is-dropdown-submenu-parent');
$parentLi.removeClass('opens' + oldClass).addClass('opens-' + this.options.alignment);
clear = Foundation.Box.ImNotTouchingYou($sub, null, true);
if(!clear){
$parentLi.removeClass('opens-' + this.options.alignment).addClass('opens-inner');
}
this.changed = true;
}
$sub.css('visibility', '');
if(this.options.closeOnClick){ this._addBodyHandler(); }
/**
* Fires when the new dropdown pane is visible.
* @event DropdownMenu#show
*/
this.$element.trigger('show.zf.dropdownmenu', [$sub]);
};
/**
* Hides a single, currently open dropdown pane, if passed a parameter, otherwise, hides everything.
* @function
* @param {jQuery} $elem - element with a submenu to hide
* @param {Number} idx - index of the $tabs collection to hide
* @private
*/
DropdownMenu.prototype._hide = function($elem, idx){
var $toClose;
if($elem && $elem.length){
$toClose = $elem;
}else if(idx !== undefined){
$toClose = this.$tabs.not(function(i, el){
return i === idx;
});
}
else{
$toClose = this.$element;
}
var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0;
if(somethingToClose){
$toClose.find('li.is-active').add($toClose).attr({
'aria-selected': false,
'aria-expanded': false,
'data-is-click': false
}).removeClass('is-active');
$toClose.find('ul.js-dropdown-active').attr({
'aria-hidden': true
}).removeClass('js-dropdown-active');
if(this.changed || $toClose.find('opens-inner').length){
var oldClass = this.options.alignment === 'left' ? 'right' : 'left';
$toClose.find('li.is-dropdown-submenu-parent').add($toClose)
.removeClass('opens-inner opens-' + this.options.alignment)
.addClass('opens-' + oldClass);
this.changed = false;
}
/**
* Fires when the open menus are closed.
* @event DropdownMenu#hide
*/
this.$element.trigger('hide.zf.dropdownmenu', [$toClose]);
}
};
/**
* Destroys the plugin.
* @function
*/
DropdownMenu.prototype.destroy = function(){
this.$menuItems.off('.zf.dropdownmenu').removeAttr('data-is-click')
.removeClass('is-right-arrow is-left-arrow is-down-arrow opens-right opens-left opens-inner');
Foundation.Nest.Burn(this.$element, 'dropdown');
Foundation.unregisterPlugin(this);
};
Foundation.plugin(DropdownMenu, 'DropdownMenu');
}(jQuery, window.Foundation);

274
app/vendor/foundation/js/foundation.equalizer.js vendored Normal file
View File

@ -0,0 +1,274 @@
!function(Foundation, $) {
'use strict';
/**
* Creates a new instance of Equalizer.
* @class
* @fires Equalizer#init
* @param {Object} element - jQuery object to add the trigger to.
* @param {Object} options - Overrides to the default plugin settings.
*/
function Equalizer(element, options){
this.$element = element;
this.options = $.extend({}, Equalizer.defaults, this.$element.data(), options);
this._init();
Foundation.registerPlugin(this, 'Equalizer');
}
/**
* Default settings for plugin
*/
Equalizer.defaults = {
/**
* Enable height equalization when stacked on smaller screens.
* @option
* @example true
*/
equalizeOnStack: true,
/**
* Enable height equalization row by row.
* @option
* @example false
*/
equalizeByRow: false,
/**
* String representing the minimum breakpoint size the plugin should equalize heights on.
* @option
* @example 'medium'
*/
equalizeOn: ''
};
/**
* Initializes the Equalizer plugin and calls functions to get equalizer functioning on load.
* @private
*/
Equalizer.prototype._init = function(){
var eqId = this.$element.attr('data-equalizer') || '';
var $watched = this.$element.find('[data-equalizer-watch="' + eqId + '"]');
this.$watched = $watched.length ? $watched : this.$element.find('[data-equalizer-watch]');
this.$element.attr('data-resize', (eqId || Foundation.GetYoDigits(6, 'eq')));
this.hasNested = this.$element.find('[data-equalizer]').length > 0;
this.isNested = this.$element.parentsUntil(document.body, '[data-equalizer]').length > 0;
this.isOn = false;
var imgs = this.$element.find('img');
var tooSmall;
if(this.options.equalizeOn){
tooSmall = this._checkMQ();
$(window).on('changed.zf.mediaquery', this._checkMQ.bind(this));
}else{
this._events();
}
if((tooSmall !== undefined && tooSmall === false) || tooSmall === undefined){
if(imgs.length){
Foundation.onImagesLoaded(imgs, this._reflow.bind(this));
}else{
this._reflow();
}
}
};
/**
* Removes event listeners if the breakpoint is too small.
* @private
*/
Equalizer.prototype._pauseEvents = function(){
this.isOn = false;
this.$element.off('.zf.equalizer resizeme.zf.trigger');
};
/**
* Initializes events for Equalizer.
* @private
*/
Equalizer.prototype._events = function(){
var _this = this;
this._pauseEvents();
if(this.hasNested){
this.$element.on('postequalized.zf.equalizer', function(e){
if(e.target !== _this.$element[0]){ _this._reflow(); }
});
}else{
this.$element.on('resizeme.zf.trigger', this._reflow.bind(this));
}
this.isOn = true;
};
/**
* Checks the current breakpoint to the minimum required size.
* @private
*/
Equalizer.prototype._checkMQ = function(){
var tooSmall = !Foundation.MediaQuery.atLeast(this.options.equalizeOn);
if(tooSmall){
if(this.isOn){
this._pauseEvents();
this.$watched.css('height', 'auto');
}
}else{
if(!this.isOn){
this._events();
}
}
return tooSmall;
}
/**
* A noop version for the plugin
* @private
*/
Equalizer.prototype._killswitch = function(){
return;
};
/**
* Calls necessary functions to update Equalizer upon DOM change
* @private
*/
Equalizer.prototype._reflow = function(){
if(!this.options.equalizeOnStack){
if(this._isStacked()){
this.$watched.css('height', 'auto');
return false;
}
}
if (this.options.equalizeByRow) {
this.getHeightsByRow(this.applyHeightByRow.bind(this));
}else{
this.getHeights(this.applyHeight.bind(this));
}
};
/**
* Manually determines if the first 2 elements are *NOT* stacked.
* @private
*/
Equalizer.prototype._isStacked = function(){
return this.$watched[0].offsetTop !== this.$watched[1].offsetTop;
};
/**
* Finds the outer heights of children contained within an Equalizer parent and returns them in an array
* @param {Function} cb - A non-optional callback to return the heights array to.
* @returns {Array} heights - An array of heights of children within Equalizer container
*/
Equalizer.prototype.getHeights = function(cb){
var heights = [];
for(var i = 0, len = this.$watched.length; i < len; i++){
this.$watched[i].style.height = 'auto';
heights.push(this.$watched[i].offsetHeight);
}
cb(heights);
};
/**
* Finds the outer heights of children contained within an Equalizer parent and returns them in an array
* @param {Function} cb - A non-optional callback to return the heights array to.
* @returns {Array} groups - An array of heights of children within Equalizer container grouped by row with element,height and max as last child
*/
Equalizer.prototype.getHeightsByRow = function(cb) {
var lastElTopOffset = this.$watched.first().offset().top,
groups = [],
group = 0;
//group by Row
groups[group] = [];
for(var i = 0, len = this.$watched.length; i < len; i++){
this.$watched[i].style.height = 'auto';
//maybe could use this.$watched[i].offsetTop
var elOffsetTop = $(this.$watched[i]).offset().top;
if (elOffsetTop!=lastElTopOffset) {
group++;
groups[group] = [];
lastElTopOffset=elOffsetTop;
};
groups[group].push([this.$watched[i],this.$watched[i].offsetHeight]);
}
for (var i = 0, len = groups.length; i < len; i++) {
var heights = $(groups[i]).map(function () { return this[1]}).get();
var max = Math.max.apply(null, heights);
groups[i].push(max);
}
cb(groups);
};
/**
* Changes the CSS height property of each child in an Equalizer parent to match the tallest
* @param {array} heights - An array of heights of children within Equalizer container
* @fires Equalizer#preequalized
* @fires Equalizer#postequalized
*/
Equalizer.prototype.applyHeight = function(heights){
var max = Math.max.apply(null, heights);
/**
* Fires before the heights are applied
* @event Equalizer#preequalized
*/
this.$element.trigger('preequalized.zf.equalizer');
this.$watched.css('height', max);
/**
* Fires when the heights have been applied
* @event Equalizer#postequalized
*/
this.$element.trigger('postequalized.zf.equalizer');
};
/**
* Changes the CSS height property of each child in an Equalizer parent to match the tallest by row
* @param {array} groups - An array of heights of children within Equalizer container grouped by row with element,height and max as last child
* @fires Equalizer#preequalized
* @fires Equalizer#preequalizedRow
* @fires Equalizer#postequalizedRow
* @fires Equalizer#postequalized
*/
Equalizer.prototype.applyHeightByRow = function(groups){
/**
* Fires before the heights are applied
*/
this.$element.trigger('preequalized.zf.equalizer');
for (var i = 0, len = groups.length; i < len ; i++) {
var groupsILength = groups[i].length,
max = groups[i][groupsILength - 1];
if (groupsILength<=2) {
$(groups[i][0][0]).css({'height':'auto'});
continue;
};
/**
* Fires before the heights per row are applied
* @event Equalizer#preequalizedRow
*/
this.$element.trigger('preequalizedrow.zf.equalizer');
for (var j = 0, lenJ = (groupsILength-1); j < lenJ ; j++) {
$(groups[i][j][0]).css({'height':max});
}
/**
* Fires when the heights per row have been applied
* @event Equalizer#postequalizedRow
*/
this.$element.trigger('postequalizedrow.zf.equalizer');
}
/**
* Fires when the heights have been applied
*/
this.$element.trigger('postequalized.zf.equalizer');
};
/**
* Destroys an instance of Equalizer.
* @function
*/
Equalizer.prototype.destroy = function(){
this._pauseEvents();
this.$watched.css('height', 'auto');
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Equalizer, 'Equalizer');
// Exports for AMD/Browserify
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
module.exports = Equalizer;
if (typeof define === 'function')
define(['foundation'], function() {
return Equalizer;
});
}(Foundation, jQuery);

184
app/vendor/foundation/js/foundation.interchange.js vendored Normal file
View File

@ -0,0 +1,184 @@
/**
* Interchange module.
* @module foundation.interchange
* @requires foundation.util.mediaQuery
* @requires foundation.util.timerAndImageLoader
*/
!function(Foundation, $) {
'use strict';
/**
* Creates a new instance of Interchange.
* @class
* @fires Interchange#init
* @param {Object} element - jQuery object to add the trigger to.
* @param {Object} options - Overrides to the default plugin settings.
*/
function Interchange(element, options) {
this.$element = element;
this.options = $.extend({}, Interchange.defaults, options);
this.rules = [];
this.currentPath = '';
this._init();
this._events();
Foundation.registerPlugin(this, 'Interchange');
}
/**
* Default settings for plugin
*/
Interchange.defaults = {
/**
* Rules to be applied to Interchange elements. Set with the `data-interchange` array notation.
* @option
*/
rules: null
};
Interchange.SPECIAL_QUERIES = {
'landscape': 'screen and (orientation: landscape)',
'portrait': 'screen and (orientation: portrait)',
'retina': 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'
};
/**
* Initializes the Interchange plugin and calls functions to get interchange functioning on load.
* @function
* @private
*/
Interchange.prototype._init = function() {
this._addBreakpoints();
this._generateRules();
this._reflow();
};
/**
* Initializes events for Interchange.
* @function
* @private
*/
Interchange.prototype._events = function() {
$(window).on('resize.zf.interchange', Foundation.util.throttle(this._reflow.bind(this), 50));
};
/**
* Calls necessary functions to update Interchange upon DOM change
* @function
* @private
*/
Interchange.prototype._reflow = function() {
var match;
// Iterate through each rule, but only save the last match
for (var i in this.rules) {
var rule = this.rules[i];
if (window.matchMedia(rule.query).matches) {
match = rule;
}
}
if (match) {
this.replace(match.path);
}
};
/**
* Gets the Foundation breakpoints and adds them to the Interchange.SPECIAL_QUERIES object.
* @function
* @private
*/
Interchange.prototype._addBreakpoints = function() {
for (var i in Foundation.MediaQuery.queries) {
var query = Foundation.MediaQuery.queries[i];
Interchange.SPECIAL_QUERIES[query.name] = query.value;
}
};
/**
* Checks the Interchange element for the provided media query + content pairings
* @function
* @private
* @param {Object} element - jQuery object that is an Interchange instance
* @returns {Array} scenarios - Array of objects that have 'mq' and 'path' keys with corresponding keys
*/
Interchange.prototype._generateRules = function() {
var rulesList = [];
var rules;
if (this.options.rules) {
rules = this.options.rules;
}
else {
rules = this.$element.data('interchange').match(/\[.*?\]/g);
}
for (var i in rules) {
var rule = rules[i].slice(1, -1).split(', ');
var path = rule.slice(0, -1).join('');
var query = rule[rule.length - 1];
if (Interchange.SPECIAL_QUERIES[query]) {
query = Interchange.SPECIAL_QUERIES[query];
}
rulesList.push({
path: path,
query: query
});
}
this.rules = rulesList;
};
/**
* Update the `src` property of an image, or change the HTML of a container, to the specified path.
* @function
* @param {String} path - Path to the image or HTML partial.
* @fires Interchange#replaced
*/
Interchange.prototype.replace = function(path) {
if (this.currentPath === path) return;
var _this = this;
// Replacing images
if (this.$element[0].nodeName === 'IMG') {
this.$element.attr('src', path).load(function() {
_this.currentPath = path;
});
}
// Replacing background images
else if (path.match(/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i)) {
this.$element.css({ 'background-image': 'url('+path+')' });
}
// Replacing HTML
else {
$.get(path, function(response) {
_this.$element.html(response);
$(response).foundation();
_this.currentPath = path;
});
}
this.$element.trigger('replaced.zf.interchange');
};
/**
* Destroys an instance of interchange.
* @function
*/
Interchange.prototype.destroy = function(){
//TODO this.
};
Foundation.plugin(Interchange, 'Interchange');
// Exports for AMD/Browserify
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
module.exports = Interchange;
if (typeof define === 'function')
define(['foundation'], function() {
return Interchange;
});
}(Foundation, jQuery);

212
app/vendor/foundation/js/foundation.magellan.js vendored Normal file
View File

@ -0,0 +1,212 @@
/**
* Magellan module.
* @module foundation.magellan
*/
!function(Foundation, $) {
'use strict';
/**
* Creates a new instance of Magellan.
* @class
* @fires Magellan#init
* @param {Object} element - jQuery object to add the trigger to.
* @param {Object} options - Overrides to the default plugin settings.
*/
function Magellan(element, options) {
this.$element = element;
this.options = $.extend({}, Magellan.defaults, this.$element.data(), options);
this._init();
Foundation.registerPlugin(this, 'Magellan');
}
/**
* Default settings for plugin
*/
Magellan.defaults = {
/**
* Amount of time, in ms, the animated scrolling should take between locations.
* @option
* @example 500
*/
animationDuration: 500,
/**
* Animation style to use when scrolling between locations.
* @option
* @example 'ease-in-out'
*/
animationEasing: 'linear',
/**
* Number of pixels to use as a marker for location changes.
* @option
* @example 50
*/
threshold: 50,
/**
* Class applied to the active locations link on the magellan container.
* @option
* @example 'active'
*/
activeClass: 'active',
/**
* Allows the script to manipulate the url of the current page, and if supported, alter the history.
* @option
* @example true
*/
deepLinking: false,
/**
* Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
* @option
* @example 25
*/
barOffset: 0
};
/**
* Initializes the Magellan plugin and calls functions to get equalizer functioning on load.
* @private
*/
Magellan.prototype._init = function() {
var id = this.$element[0].id || Foundation.GetYoDigits(6, 'magellan'),
_this = this;
this.$targets = $('[data-magellan-target]');
this.$links = this.$element.find('a');
this.$element.attr({
'data-resize': id,
'data-scroll': id,
'id': id
});
this.$active = $();
this.scrollPos = parseInt(window.pageYOffset, 10);
this._events();
};
/**
* Calculates an array of pixel values that are the demarcation lines between locations on the page.
* Can be invoked if new elements are added or the size of a location changes.
* @function
*/
Magellan.prototype.calcPoints = function(){
var _this = this,
body = document.body,
html = document.documentElement;
this.points = [];
this.winHeight = Math.round(Math.max(window.innerHeight, html.clientHeight));
this.docHeight = Math.round(Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight));
this.$targets.each(function(){
var $tar = $(this),
pt = Math.round($tar.offset().top - _this.options.threshold);
$tar.targetPoint = pt;
_this.points.push(pt);
});
};
/**
* Initializes events for Magellan.
* @private
*/
Magellan.prototype._events = function() {
var _this = this,
$body = $('html, body'),
opts = {
duration: _this.options.animationDuration,
easing: _this.options.animationEasing
};
$(window).one('load', function(){
_this.calcPoints();
_this._updateActive();
});
this.$element.on({
'resizeme.zf.trigger': this.reflow.bind(this),
'scrollme.zf.trigger': this._updateActive.bind(this)
}).on('click.zf.magellan', 'a[href^="#"]', function(e) {
e.preventDefault();
var arrival = this.getAttribute('href'),
scrollPos = $(arrival).offset().top - _this.options.threshold / 2 - _this.options.barOffset;
// requestAnimationFrame is disabled for this plugin currently
// Foundation.Move(_this.options.animationDuration, $body, function(){
$body.stop(true).animate({
scrollTop: scrollPos
}, opts);
});
// });
};
/**
* Calls necessary functions to update Magellan upon DOM change
* @function
*/
Magellan.prototype.reflow = function(){
this.calcPoints();
this._updateActive();
};
/**
* Updates the visibility of an active location link, and updates the url hash for the page, if deepLinking enabled.
* @private
* @function
* @fires Magellan#update
*/
Magellan.prototype._updateActive = function(/*evt, elem, scrollPos*/){
var winPos = /*scrollPos ||*/ parseInt(window.pageYOffset, 10),
curIdx;
if(winPos + this.winHeight === this.docHeight){ curIdx = this.points.length - 1; }
else if(winPos < this.points[0]){ curIdx = 0; }
else{
var isDown = this.scrollPos < winPos,
_this = this,
curVisible = this.points.filter(function(p, i){
return isDown ? p <= winPos : p - _this.options.threshold <= winPos;//&& winPos >= _this.points[i -1] - _this.options.threshold;
});
curIdx = curVisible.length ? curVisible.length - 1 : 0;
}
this.$active.removeClass(this.options.activeClass);
this.$active = this.$links.eq(curIdx).addClass(this.options.activeClass);
if(this.options.deepLinking){
var hash = this.$active[0].getAttribute('href');
if(window.history.pushState){
window.history.pushState(null, null, hash);
}else{
window.location.hash = hash;
}
}
this.scrollPos = winPos;
/**
* Fires when magellan is finished updating to the new active element.
* @event Magellan#update
*/
this.$element.trigger('update.zf.magellan', [this.$active]);
};
/**
* Destroys an instance of Magellan and resets the url of the window.
* @function
*/
Magellan.prototype.destroy = function(){
this.$element.off('.zf.trigger .zf.magellan')
.find('.' + this.options.activeClass).removeClass(this.options.activeClass);
if(this.options.deepLinking){
var hash = this.$active[0].getAttribute('href');
window.location.hash.replace(hash, '');
}
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Magellan, 'Magellan');
// Exports for AMD/Browserify
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
module.exports = Magellan;
if (typeof define === 'function')
define(['foundation'], function() {
return Magellan;
});
}(Foundation, jQuery);

371
app/vendor/foundation/js/foundation.offcanvas.js vendored Normal file
View File

@ -0,0 +1,371 @@
/**
* OffCanvas module.
* @module foundation.offcanvas
* @requires foundation.util.triggers
* @requires foundation.util.motion
*/
!function($, Foundation) {
'use strict';
/**
* Creates a new instance of an off-canvas wrapper.
* @class
* @fires OffCanvas#init
* @param {Object} element - jQuery object to initialize.
* @param {Object} options - Overrides to the default plugin settings.
*/
function OffCanvas(element, options) {
this.$element = element;
this.options = $.extend({}, OffCanvas.defaults, this.$element.data(), options);
this.$lastTrigger = $();
this._init();
this._events();
Foundation.registerPlugin(this, 'OffCanvas');
}
OffCanvas.defaults = {
/**
* Allow the user to click outside of the menu to close it.
* @option
* @example true
*/
closeOnClick: true,
/**
* Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
* @option
* @example 500
*/
transitionTime: 0,
/**
* Direction the offcanvas opens from. Determines class applied to body.
* @option
* @example left
*/
position: 'left',
/**
* Force the page to scroll to top on open.
*/
forceTop: true,
/**
* Allow the offcanvas to be sticky while open. Does nothing if Sass option `$maincontent-prevent-scroll === true`.
* Performance in Safari OSX/iOS is not great.
*/
// isSticky: false,
/**
* Allow the offcanvas to remain open for certain breakpoints. Can be used with `isSticky`.
* @option
* @example false
*/
isRevealed: false,
/**
* Breakpoint at which to reveal. JS will use a RegExp to target standard classes, if changing classnames, pass your class @`revealClass`.
* @option
* @example reveal-for-large
*/
revealOn: null,
/**
* Force focus to the offcanvas on open. If true, will focus the opening trigger on close.
* @option
* @example true
*/
autoFocus: true,
/**
* Class used to force an offcanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.
* @option
* TODO improve the regex testing for this.
* @example reveal-for-large
*/
revealClass: 'reveal-for-',
/**
* Triggers optional focus trapping when opening an offcanvas. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.
* @option
* @example true
*/
trapFocus: false
};
/**
* Initializes the off-canvas wrapper by adding the exit overlay (if needed).
* @function
* @private
*/
OffCanvas.prototype._init = function() {
var id = this.$element.attr('id');
this.$element.attr('aria-hidden', 'true');
// Find triggers that affect this element and add aria-expanded to them
$(document)
.find('[data-open="'+id+'"], [data-close="'+id+'"], [data-toggle="'+id+'"]')
.attr('aria-expanded', 'false')
.attr('aria-controls', id);
// Add a close trigger over the body if necessary
if (this.options.closeOnClick){
if($('.js-off-canvas-exit').length){
this.$exiter = $('.js-off-canvas-exit');
}else{
var exiter = document.createElement('div');
exiter.setAttribute('class', 'js-off-canvas-exit');
$('[data-off-canvas-content]').append(exiter);
this.$exiter = $(exiter);
}
}
this.options.isRevealed = this.options.isRevealed || new RegExp(this.options.revealClass, 'g').test(this.$element[0].className);
if(this.options.isRevealed){
this.options.revealOn = this.options.revealOn || this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split('-')[2];
this._setMQChecker();
}
if(!this.options.transitionTime){
this.options.transitionTime = parseFloat(window.getComputedStyle($('[data-off-canvas-wrapper]')[0]).transitionDuration) * 1000;
}
};
/**
* Adds event handlers to the off-canvas wrapper and the exit overlay.
* @function
* @private
*/
OffCanvas.prototype._events = function() {
this.$element.off('.zf.trigger .zf.offcanvas').on({
'open.zf.trigger': this.open.bind(this),
'close.zf.trigger': this.close.bind(this),
'toggle.zf.trigger': this.toggle.bind(this),
'keydown.zf.offcanvas': this._handleKeyboard.bind(this)
});
if (this.$exiter.length) {
var _this = this;
this.$exiter.on({'click.zf.offcanvas': this.close.bind(this)});
}
};
/**
* Applies event listener for elements that will reveal at certain breakpoints.
* @private
*/
OffCanvas.prototype._setMQChecker = function(){
var _this = this;
$(window).on('changed.zf.mediaquery', function(){
if(Foundation.MediaQuery.atLeast(_this.options.revealOn)){
_this.reveal(true);
}else{
_this.reveal(false);
}
}).one('load.zf.offcanvas', function(){
if(Foundation.MediaQuery.atLeast(_this.options.revealOn)){
_this.reveal(true);
}
});
};
/**
* Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.
* @param {Boolean} isRevealed - true if element should be revealed.
* @function
*/
OffCanvas.prototype.reveal = function(isRevealed){
var $closer = this.$element.find('[data-close]');
if(isRevealed){
this.close();
this.isRevealed = true;
// if(!this.options.forceTop){
// var scrollPos = parseInt(window.pageYOffset);
// this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)';
// }
// if(this.options.isSticky){ this._stick(); }
this.$element.off('open.zf.trigger toggle.zf.trigger');
if($closer.length){ $closer.hide(); }
}else{
this.isRevealed = false;
// if(this.options.isSticky || !this.options.forceTop){
// this.$element[0].style.transform = '';
// $(window).off('scroll.zf.offcanvas');
// }
this.$element.on({
'open.zf.trigger': this.open.bind(this),
'toggle.zf.trigger': this.toggle.bind(this)
});
if($closer.length){
$closer.show();
}
}
};
/**
* Opens the off-canvas menu.
* @function
* @param {Object} event - Event object passed from listener.
* @param {jQuery} trigger - element that triggered the off-canvas to open.
* @fires OffCanvas#opened
*/
OffCanvas.prototype.open = function(event, trigger) {
if (this.$element.hasClass('is-open') || this.isRevealed){ return; }
var _this = this,
$body = $(document.body);
$('body').scrollTop(0);
// window.pageYOffset = 0;
// if(!this.options.forceTop){
// var scrollPos = parseInt(window.pageYOffset);
// this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)';
// if(this.$exiter.length){
// this.$exiter[0].style.transform = 'translate(0,' + scrollPos + 'px)';
// }
// }
/**
* Fires when the off-canvas menu opens.
* @event OffCanvas#opened
*/
Foundation.Move(this.options.transitionTime, this.$element, function(){
$('[data-off-canvas-wrapper]').addClass('is-off-canvas-open is-open-'+ _this.options.position);
_this.$element
.addClass('is-open')
// if(_this.options.isSticky){
// _this._stick();
// }
});
this.$element.attr('aria-hidden', 'false')
.trigger('opened.zf.offcanvas');
if(trigger){
this.$lastTrigger = trigger.attr('aria-expanded', 'true');
}
if(this.options.autoFocus){
this.$element.one('finished.zf.animate', function(){
_this.$element.find('a, button').eq(0).focus();
});
}
if(this.options.trapFocus){
$('[data-off-canvas-content]').attr('tabindex', '-1');
this._trapFocus();
}
};
/**
* Traps focus within the offcanvas on open.
* @private
*/
OffCanvas.prototype._trapFocus = function(){
var focusable = Foundation.Keyboard.findFocusable(this.$element),
first = focusable.eq(0),
last = focusable.eq(-1);
focusable.off('.zf.offcanvas').on('keydown.zf.offcanvas', function(e){
if(e.which === 9 || e.keycode === 9){
if(e.target === last[0] && !e.shiftKey){
e.preventDefault();
first.focus();
}
if(e.target === first[0] && e.shiftKey){
e.preventDefault();
last.focus();
}
}
});
};
/**
* Allows the offcanvas to appear sticky utilizing translate properties.
* @private
*/
// OffCanvas.prototype._stick = function(){
// var elStyle = this.$element[0].style;
//
// if(this.options.closeOnClick){
// var exitStyle = this.$exiter[0].style;
// }
//
// $(window).on('scroll.zf.offcanvas', function(e){
// console.log(e);
// var pageY = window.pageYOffset;
// elStyle.transform = 'translate(0,' + pageY + 'px)';
// if(exitStyle !== undefined){ exitStyle.transform = 'translate(0,' + pageY + 'px)'; }
// });
// // this.$element.trigger('stuck.zf.offcanvas');
// };
/**
* Closes the off-canvas menu.
* @function
* @param {Function} cb - optional cb to fire after closure.
* @fires OffCanvas#closed
*/
OffCanvas.prototype.close = function(cb) {
if(!this.$element.hasClass('is-open') || this.isRevealed){ return; }
var _this = this;
// Foundation.Move(this.options.transitionTime, this.$element, function(){
$('[data-off-canvas-wrapper]').removeClass('is-off-canvas-open is-open-' + _this.options.position);
_this.$element.removeClass('is-open');
// Foundation._reflow();
// });
this.$element.attr('aria-hidden', 'true')
/**
* Fires when the off-canvas menu opens.
* @event OffCanvas#closed
*/
.trigger('closed.zf.offcanvas');
// if(_this.options.isSticky || !_this.options.forceTop){
// setTimeout(function(){
// _this.$element[0].style.transform = '';
// $(window).off('scroll.zf.offcanvas');
// }, this.options.transitionTime);
// }
this.$lastTrigger.attr('aria-expanded', 'false');
if(this.options.trapFocus){
$('[data-off-canvas-content]').removeAttr('tabindex');
}
};
/**
* Toggles the off-canvas menu open or closed.
* @function
* @param {Object} event - Event object passed from listener.
* @param {jQuery} trigger - element that triggered the off-canvas to open.
*/
OffCanvas.prototype.toggle = function(event, trigger) {
if (this.$element.hasClass('is-open')) {
this.close(event, trigger);
}
else {
this.open(event, trigger);
}
};
/**
* Handles keyboard input when detected. When the escape key is pressed, the off-canvas menu closes, and focus is restored to the element that opened the menu.
* @function
* @private
*/
OffCanvas.prototype._handleKeyboard = function(event) {
if (event.which !== 27) return;
event.stopPropagation();
event.preventDefault();
this.close();
this.$lastTrigger.focus();
};
/**
* Destroys the offcanvas plugin.
* @function
*/
OffCanvas.prototype.destroy = function(){
this.close();
this.$element.off('.zf.trigger .zf.offcanvas');
this.$exiter.off('.zf.offcanvas');
Foundation.unregisterPlugin(this);
};
Foundation.plugin(OffCanvas, 'OffCanvas');
}(jQuery, Foundation);

419
app/vendor/foundation/js/foundation.orbit.js vendored Normal file
View File

@ -0,0 +1,419 @@
/**
* Orbit module.
* @module foundation.orbit
* @requires foundation.util.keyboard
* @requires foundation.util.motion
* @requires foundation.util.timerAndImageLoader
* @requires foundation.util.touch
*/
!function($, Foundation){
'use strict';
/**
* Creates a new instance of an orbit carousel.
* @class
* @param {jQuery} element - jQuery object to make into an Orbit Carousel.
* @param {Object} options - Overrides to the default plugin settings.
*/
function Orbit(element, options){
this.$element = element;
this.options = $.extend({}, Orbit.defaults, this.$element.data(), options);
this._init();
Foundation.registerPlugin(this, 'Orbit');
Foundation.Keyboard.register('Orbit', {
'ltr': {
'ARROW_RIGHT': 'next',
'ARROW_LEFT': 'previous'
},
'rtl': {
'ARROW_LEFT': 'next',
'ARROW_RIGHT': 'previous'
}
});
}
Orbit.defaults = {
/**
* Tells the JS to loadBullets.
* @option
* @example true
*/
bullets: true,
/**
* Tells the JS to apply event listeners to nav buttons
* @option
* @example true
*/
navButtons: true,
/**
* motion-ui animation class to apply
* @option
* @example 'slide-in-right'
*/
animInFromRight: 'slide-in-right',
/**
* motion-ui animation class to apply
* @option
* @example 'slide-out-right'
*/
animOutToRight: 'slide-out-right',
/**
* motion-ui animation class to apply
* @option
* @example 'slide-in-left'
*
*/
animInFromLeft: 'slide-in-left',
/**
* motion-ui animation class to apply
* @option
* @example 'slide-out-left'
*/
animOutToLeft: 'slide-out-left',
/**
* Allows Orbit to automatically animate on page load.
* @option
* @example true
*/
autoPlay: true,
/**
* Amount of time, in ms, between slide transitions
* @option
* @example 5000
*/
timerDelay: 5000,
/**
* Allows Orbit to infinitely loop through the slides
* @option
* @example true
*/
infiniteWrap: true,
/**
* Allows the Orbit slides to bind to swipe events for mobile, requires an additional util library
* @option
* @example true
*/
swipe: true,
/**
* Allows the timing function to pause animation on hover.
* @option
* @example true
*/
pauseOnHover: true,
/**
* Allows Orbit to bind keyboard events to the slider, to animate frames with arrow keys
* @option
* @example true
*/
accessible: true,
/**
* Class applied to the container of Orbit
* @option
* @example 'orbit-container'
*/
containerClass: 'orbit-container',
/**
* Class applied to individual slides.
* @option
* @example 'orbit-slide'
*/
slideClass: 'orbit-slide',
/**
* Class applied to the bullet container. You're welcome.
* @option
* @example 'orbit-bullets'
*/
boxOfBullets: 'orbit-bullets',
/**
* Class applied to the `next` navigation button.
* @option
* @example 'orbit-next'
*/
nextClass: 'orbit-next',
/**
* Class applied to the `previous` navigation button.
* @option
* @example 'orbit-previous'
*/
prevClass: 'orbit-previous',
/**
* Boolean to flag the js to use motion ui classes or not. Default to true for backwards compatability.
* @option
* @example true
*/
useMUI: true
};
/**
* Initializes the plugin by creating jQuery collections, setting attributes, and starting the animation.
* @function
* @private
*/
Orbit.prototype._init = function(){
this.$wrapper = this.$element.find('.' + this.options.containerClass);
this.$slides = this.$element.find('.' + this.options.slideClass);
var $images = this.$element.find('img'),
initActive = this.$slides.filter('.is-active');
if(!initActive.length){
this.$slides.eq(0).addClass('is-active');
}
if(!this.options.useMUI){
this.$slides.addClass('no-motionui');
}
if($images.length){
Foundation.onImagesLoaded($images, this._prepareForOrbit.bind(this));
}else{
this._prepareForOrbit();//hehe
}
if(this.options.bullets){
this._loadBullets();
}
this._events();
if(this.options.autoPlay){
this.geoSync();
}
if(this.options.accessible){ // allow wrapper to be focusable to enable arrow navigation
this.$wrapper.attr('tabindex', 0);
}
};
/**
* Creates a jQuery collection of bullets, if they are being used.
* @function
* @private
*/
Orbit.prototype._loadBullets = function(){
this.$bullets = this.$element.find('.' + this.options.boxOfBullets).find('button');
};
/**
* Sets a `timer` object on the orbit, and starts the counter for the next slide.
* @function
*/
Orbit.prototype.geoSync = function(){
var _this = this;
this.timer = new Foundation.Timer(
this.$element,
{duration: this.options.timerDelay,
infinite: false},
function(){
_this.changeSlide(true);
});
this.timer.start();
};
/**
* Sets wrapper and slide heights for the orbit.
* @function
* @private
*/
Orbit.prototype._prepareForOrbit = function(){
var _this = this;
this._setWrapperHeight(function(max){
_this._setSlideHeight(max);
});
};
/**
* Calulates the height of each slide in the collection, and uses the tallest one for the wrapper height.
* @function
* @private
* @param {Function} cb - a callback function to fire when complete.
*/
Orbit.prototype._setWrapperHeight = function(cb){//rewrite this to `for` loop
var max = 0, temp, counter = 0;
this.$slides.each(function(){
temp = this.getBoundingClientRect().height;
$(this).attr('data-slide', counter);
if(counter){//if not the first slide, set css position and display property
$(this).css({'position': 'relative', 'display': 'none'});
}
max = temp > max ? temp : max;
counter++;
});
if(counter === this.$slides.length){
this.$wrapper.css({'height': max});//only change the wrapper height property once.
cb(max);//fire callback with max height dimension.
}
};
/**
* Sets the max-height of each slide.
* @function
* @private
*/
Orbit.prototype._setSlideHeight = function(height){
this.$slides.each(function(){
$(this).css('max-height', height);
});
};
/**
* Adds event listeners to basically everything within the element.
* @function
* @private
*/
Orbit.prototype._events = function(){
var _this = this;
//***************************************
//**Now using custom event - thanks to:**
//** Yohai Ararat of Toronto **
//***************************************
if(this.options.swipe){
this.$slides.off('swipeleft.zf.orbit swiperight.zf.orbit')
.on('swipeleft.zf.orbit', function(e){
e.preventDefault();
_this.changeSlide(true);
}).on('swiperight.zf.orbit', function(e){
e.preventDefault();
_this.changeSlide(false);
});
}
//***************************************
if(this.options.autoPlay){
this.$slides.on('click.zf.orbit', function(){
_this.$element.data('clickedOn', _this.$element.data('clickedOn') ? false : true);
_this.timer[_this.$element.data('clickedOn') ? 'pause' : 'start']();
});
if(this.options.pauseOnHover){
this.$element.on('mouseenter.zf.orbit', function(){
_this.timer.pause();
}).on('mouseleave.zf.orbit', function(){
if(!_this.$element.data('clickedOn')){
_this.timer.start();
}
});
}
}
if(this.options.navButtons){
var $controls = this.$element.find('.' + this.options.nextClass + ', .' + this.options.prevClass);
$controls.attr('tabindex', 0)
//also need to handle enter/return and spacebar key presses
.on('click.zf.orbit touchend.zf.orbit', function(){
_this.changeSlide($(this).hasClass(_this.options.nextClass));
});
}
if(this.options.bullets){
this.$bullets.on('click.zf.orbit touchend.zf.orbit', function(){
if(/is-active/g.test(this.className)){ return false; }//if this is active, kick out of function.
var idx = $(this).data('slide'),
ltr = idx > _this.$slides.filter('.is-active').data('slide'),
$slide = _this.$slides.eq(idx);
_this.changeSlide(ltr, $slide, idx);
});
}
this.$wrapper.add(this.$bullets).on('keydown.zf.orbit', function(e){
// handle keyboard event with keyboard util
Foundation.Keyboard.handleKey(e, 'Orbit', {
next: function() {
_this.changeSlide(true);
},
previous: function() {
_this.changeSlide(false);
},
handled: function() { // if bullet is focused, make sure focus moves
if ($(e.target).is(_this.$bullets)) {
_this.$bullets.filter('.is-active').focus();
}
}
});
});
};
/**
* Changes the current slide to a new one.
* @function
* @param {Boolean} isLTR - flag if the slide should move left to right.
* @param {jQuery} chosenSlide - the jQuery element of the slide to show next, if one is selected.
* @param {Number} idx - the index of the new slide in its collection, if one chosen.
* @fires Orbit#slidechange
*/
Orbit.prototype.changeSlide = function(isLTR, chosenSlide, idx){
var $curSlide = this.$slides.filter('.is-active').eq(0);
if(/mui/g.test($curSlide[0].className)){ return false; }//if the slide is currently animating, kick out of the function
var $firstSlide = this.$slides.first(),
$lastSlide = this.$slides.last(),
dirIn = isLTR ? 'Right' : 'Left',
dirOut = isLTR ? 'Left' : 'Right',
_this = this,
$newSlide;
if(!chosenSlide){//most of the time, this will be auto played or clicked from the navButtons.
$newSlide = isLTR ? //if wrapping enabled, check to see if there is a `next` or `prev` sibling, if not, select the first or last slide to fill in. if wrapping not enabled, attempt to select `next` or `prev`, if there's nothing there, the function will kick out on next step. CRAZY NESTED TERNARIES!!!!!
(this.options.infiniteWrap ? $curSlide.next('.' + this.options.slideClass).length ? $curSlide.next('.' + this.options.slideClass) : $firstSlide : $curSlide.next('.' + this.options.slideClass))//pick next slide if moving left to right
:
(this.options.infiniteWrap ? $curSlide.prev('.' + this.options.slideClass).length ? $curSlide.prev('.' + this.options.slideClass) : $lastSlide : $curSlide.prev('.' + this.options.slideClass));//pick prev slide if moving right to left
}else{
$newSlide = chosenSlide;
}
if($newSlide.length){
if(this.options.bullets){
idx = idx || this.$slides.index($newSlide);//grab index to update bullets
this._updateBullets(idx);
}
if(this.options.useMUI){
Foundation.Motion.animateIn(
$newSlide.addClass('is-active').css({'position': 'absolute', 'top': 0}),
this.options['animInFrom' + dirIn],
function(){
$newSlide.css({'position': 'relative', 'display': 'block'})
.attr('aria-live', 'polite');
});
Foundation.Motion.animateOut(
$curSlide.removeClass('is-active'),
this.options['animOutTo' + dirOut],
function(){
$curSlide.removeAttr('aria-live');
if(_this.options.autoPlay){
_this.timer.restart();
}
//do stuff?
});
}else{
$curSlide.removeClass('is-active is-in').removeAttr('aria-live').hide();
$newSlide.addClass('is-active is-in').attr('aria-live', 'polite').show();
if(this.options.autoPlay){
this.timer.restart();
}
}
/**
* Triggers when the slide has finished animating in.
* @event Orbit#slidechange
*/
this.$element.trigger('slidechange.zf.orbit', [$newSlide]);
}
};
/**
* Updates the active state of the bullets, if displayed.
* @function
* @private
* @param {Number} idx - the index of the current slide.
*/
Orbit.prototype._updateBullets = function(idx){
var $oldBullet = this.$element.find('.' + this.options.boxOfBullets)
.find('.is-active').removeClass('is-active').blur(),
span = $oldBullet.find('span:last').detach(),
$newBullet = this.$bullets.eq(idx).addClass('is-active').append(span);
};
/**
* Destroys the carousel and hides the element.
* @function
*/
Orbit.prototype.destroy = function(){
delete this.timer;
this.$element.off('.zf.orbit').find('*').off('.zf.orbit').end().hide();
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Orbit, 'Orbit');
}(jQuery, window.Foundation);

145
app/vendor/foundation/js/foundation.responsiveMenu.js vendored Normal file
View File

@ -0,0 +1,145 @@
/**
* ResponsiveMenu module.
* @module foundation.responsiveMenu
* @requires foundation.util.triggers
* @requires foundation.util.mediaQuery
* @requires foundation.util.accordionMenu
* @requires foundation.util.drilldown
* @requires foundation.util.dropdown-menu
*/
!function(Foundation, $) {
'use strict';
// The plugin matches the plugin classes with these plugin instances.
var MenuPlugins = {
dropdown: {
cssClass: 'dropdown',
plugin: Foundation._plugins['dropdown-menu'] || null
},
drilldown: {
cssClass: 'drilldown',
plugin: Foundation._plugins['drilldown'] || null
},
accordion: {
cssClass: 'accordion-menu',
plugin: Foundation._plugins['accordion-menu'] || null
}
};
// [PH] Media queries
var phMedia = {
small: '(min-width: 0px)',
medium: '(min-width: 640px)'
};
/**
* Creates a new instance of a responsive menu.
* @class
* @fires ResponsiveMenu#init
* @param {jQuery} element - jQuery object to make into a dropdown menu.
* @param {Object} options - Overrides to the default plugin settings.
*/
function ResponsiveMenu(element) {
this.$element = $(element);
this.rules = this.$element.data('responsive-menu');
this.currentMq = null;
this.currentPlugin = null;
this._init();
this._events();
Foundation.registerPlugin(this, 'ResponsiveMenu');
}
ResponsiveMenu.defaults = {};
/**
* Initializes the Menu by parsing the classes from the 'data-ResponsiveMenu' attribute on the element.
* @function
* @private
*/
ResponsiveMenu.prototype._init = function() {
var rulesTree = {};
// Parse rules from "classes" in data attribute
var rules = this.rules.split(' ');
// Iterate through every rule found
for (var i = 0; i < rules.length; i++) {
var rule = rules[i].split('-');
var ruleSize = rule.length > 1 ? rule[0] : 'small';
var rulePlugin = rule.length > 1 ? rule[1] : rule[0];
if (MenuPlugins[rulePlugin] !== null) {
rulesTree[ruleSize] = MenuPlugins[rulePlugin];
}
}
this.rules = rulesTree;
if (!$.isEmptyObject(rulesTree)) {
this._checkMediaQueries();
}
};
/**
* Initializes events for the Menu.
* @function
* @private
*/
ResponsiveMenu.prototype._events = function() {
var _this = this;
$(window).on('changed.zf.mediaquery', function() {
_this._checkMediaQueries();
});
// $(window).on('resize.zf.ResponsiveMenu', function() {
// _this._checkMediaQueries();
// });
};
/**
* Checks the current screen width against available media queries. If the media query has changed, and the plugin needed has changed, the plugins will swap out.
* @function
* @private
*/
ResponsiveMenu.prototype._checkMediaQueries = function() {
var matchedMq, _this = this;
// Iterate through each rule and find the last matching rule
$.each(this.rules, function(key) {
if (Foundation.MediaQuery.atLeast(key)) {
matchedMq = key;
}
});
// No match? No dice
if (!matchedMq) return;
// Plugin already initialized? We good
if (this.currentPlugin instanceof this.rules[matchedMq].plugin) return;
// Remove existing plugin-specific CSS classes
$.each(MenuPlugins, function(key, value) {
_this.$element.removeClass(value.cssClass);
});
// Add the CSS class for the new plugin
this.$element.addClass(this.rules[matchedMq].cssClass);
// Create an instance of the new plugin
if (this.currentPlugin) this.currentPlugin.destroy();
this.currentPlugin = new this.rules[matchedMq].plugin(this.$element, {});
};
/**
* Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.
* @function
*/
ResponsiveMenu.prototype.destroy = function() {
this.currentPlugin.destroy();
$(window).off('.zf.ResponsiveMenu');
Foundation.unregisterPlugin(this);
};
Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
}(Foundation, jQuery);

106
app/vendor/foundation/js/foundation.responsiveToggle.js vendored Normal file
View File

@ -0,0 +1,106 @@
/**
* ResponsiveToggle module.
* @module foundation.responsiveToggle
* @requires foundation.util.mediaQuery
*/
!function($, Foundation) {
'use strict';
/**
* Creates a new instance of Tab Bar.
* @class
* @fires ResponsiveToggle#init
* @param {jQuery} element - jQuery object to attach tab bar functionality to.
* @param {Object} options - Overrides to the default plugin settings.
*/
function ResponsiveToggle(element, options) {
this.$element = $(element);
this.options = $.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
this._init();
this._events();
Foundation.registerPlugin(this, 'ResponsiveToggle');
}
ResponsiveToggle.defaults = {
/**
* The breakpoint after which the menu is always shown, and the tab bar is hidden.
* @option
* @example 'medium'
*/
hideFor: 'medium'
};
/**
* Initializes the tab bar by finding the target element, toggling element, and running update().
* @function
* @private
*/
ResponsiveToggle.prototype._init = function() {
var targetID = this.$element.data('responsive-toggle');
if (!targetID) {
console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.');
}
this.$targetMenu = $('#'+targetID);
this.$toggler = this.$element.find('[data-toggle]');
this._update();
};
/**
* Adds necessary event handlers for the tab bar to work.
* @function
* @private
*/
ResponsiveToggle.prototype._events = function() {
var _this = this;
$(window).on('changed.zf.mediaquery', this._update.bind(this));
this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
};
/**
* Checks the current media query to determine if the tab bar should be visible or hidden.
* @function
* @private
*/
ResponsiveToggle.prototype._update = function() {
// Mobile
if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
this.$element.show();
this.$targetMenu.hide();
}
// Desktop
else {
this.$element.hide();
this.$targetMenu.show();
}
};
/**
* Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.
* @function
* @fires ResponsiveToggle#toggled
*/
ResponsiveToggle.prototype.toggleMenu = function() {
if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
this.$targetMenu.toggle(0);
/**
* Fires when the element attached to the tab bar toggles.
* @event ResponsiveToggle#toggled
*/
this.$element.trigger('toggled.zf.responsiveToggle');
}
};
ResponsiveToggle.prototype.destroy = function(){
//TODO this...
};
Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
}(jQuery, Foundation);

478
app/vendor/foundation/js/foundation.reveal.js vendored Normal file
View File

@ -0,0 +1,478 @@
/**
* Reveal module.
* @module foundation.reveal
* @requires foundation.util.keyboard
* @requires foundation.util.box
* @requires foundation.util.triggers
* @requires foundation.util.mediaQuery
* @requires foundation.util.motion if using animations
*/
!function(Foundation, $) {
'use strict';
/**
* Creates a new instance of Reveal.
* @class
* @param {jQuery} element - jQuery object to use for the modal.
* @param {Object} options - optional parameters.
*/
function Reveal(element, options) {
this.$element = element;
this.options = $.extend({}, Reveal.defaults, this.$element.data(), options);
this._init();
Foundation.registerPlugin(this, 'Reveal');
Foundation.Keyboard.register('Reveal', {
'ENTER': 'open',
'SPACE': 'open',
'ESCAPE': 'close',
'TAB': 'tab_forward',
'SHIFT_TAB': 'tab_backward'
});
}
Reveal.defaults = {
/**
* Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
* @option
* @example 'slide-in-left'
*/
animationIn: '',
/**
* Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
* @option
* @example 'slide-out-right'
*/
animationOut: '',
/**
* Time, in ms, to delay the opening of a modal after a click if no animation used.
* @option
* @example 10
*/
showDelay: 0,
/**
* Time, in ms, to delay the closing of a modal after a click if no animation used.
* @option
* @example 10
*/
hideDelay: 0,
/**
* Allows a click on the body/overlay to close the modal.
* @option
* @example true
*/
closeOnClick: true,
/**
* Allows the modal to close if the user presses the `ESCAPE` key.
* @option
* @example true
*/
closeOnEsc: true,
/**
* If true, allows multiple modals to be displayed at once.
* @option
* @example false
*/
multipleOpened: false,
/**
* Distance, in pixels, the modal should push down from the top of the screen.
* @option
* @example 100
*/
vOffset: 100,
/**
* Distance, in pixels, the modal should push in from the side of the screen.
* @option
* @example 0
*/
hOffset: 0,
/**
* Allows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this as well.
* @option
* @example false
*/
fullScreen: false,
/**
* Percentage of screen height the modal should push up from the bottom of the view.
* @option
* @example 10
*/
btmOffsetPct: 10,
/**
* Allows the modal to generate an overlay div, which will cover the view when modal opens.
* @option
* @example true
*/
overlay: true,
/**
* Allows the modal to remove and reinject markup on close. Should be true if using video elements w/o using provider's api.
* @option
* @example false
*/
resetOnClose: false
};
/**
* Initializes the modal by adding the overlay and close buttons, (if selected).
* @private
*/
Reveal.prototype._init = function(){
this.id = this.$element.attr('id');
this.isActive = false;
this.$anchor = $('[data-open="' + this.id + '"]').length ? $('[data-open="' + this.id + '"]') : $('[data-toggle="' + this.id + '"]');
if(this.$anchor.length){
var anchorId = this.$anchor[0].id || Foundation.GetYoDigits(6, 'reveal');
this.$anchor.attr({
'aria-controls': this.id,
'id': anchorId,
'aria-haspopup': true,
'tabindex': 0
});
this.$element.attr({'aria-labelledby': anchorId});
}
// this.options.fullScreen = this.$element.hasClass('full');
if(this.options.fullScreen || this.$element.hasClass('full')){
this.options.fullScreen = true;
this.options.overlay = false;
}
if(this.options.overlay && !this.$overlay){
this.$overlay = this._makeOverlay(this.id);
}
this.$element.attr({
'role': 'dialog',
'aria-hidden': true,
'data-yeti-box': this.id,
'data-resize': this.id
});
this._events();
};
/**
* Creates an overlay div to display behind the modal.
* @private
*/
Reveal.prototype._makeOverlay = function(id){
var $overlay = $('<div></div>')
.addClass('reveal-overlay')
.attr({'tabindex': -1, 'aria-hidden': true})
.appendTo('body');
if(this.options.closeOnClick){
$overlay.attr({
'data-close': id
});
}
return $overlay;
};
/**
* Adds event handlers for the modal.
* @private
*/
Reveal.prototype._events = function(){
var _this = this;
this.$element.on({
'open.zf.trigger': this.open.bind(this),
'close.zf.trigger': this.close.bind(this),
'toggle.zf.trigger': this.toggle.bind(this),
'resizeme.zf.trigger': function(){
if(_this.$element.is(':visible')){
_this._setPosition(function(){});
}
}
});
if(this.$anchor.length){
this.$anchor.on('keydown.zf.reveal', function(e){
if(e.which === 13 || e.which === 32){
e.stopPropagation();
e.preventDefault();
_this.open();
}
});
}
if(this.options.closeOnClick && this.options.overlay){
this.$overlay.off('.zf.reveal').on('click.zf.reveal', this.close.bind(this));
}
};
/**
* Sets the position of the modal before opening
* @param {Function} cb - a callback function to execute when positioning is complete.
* @private
*/
Reveal.prototype._setPosition = function(cb){
var eleDims = Foundation.Box.GetDimensions(this.$element);
var elePos = this.options.fullScreen ? 'reveal full' : (eleDims.height >= (0.5 * eleDims.windowDims.height)) ? 'reveal' : 'center';
if(elePos === 'reveal full'){
//set to full height/width
this.$element
.offset(Foundation.Box.GetOffsets(this.$element, null, elePos, this.options.vOffset))
.css({
'height': eleDims.windowDims.height,
'width': eleDims.windowDims.width
});
}else if(!Foundation.MediaQuery.atLeast('medium') || !Foundation.Box.ImNotTouchingYou(this.$element, null, true, false)){
//if smaller than medium, resize to 100% width minus any custom L/R margin
this.$element
.css({
'width': eleDims.windowDims.width - (this.options.hOffset * 2)
})
.offset(Foundation.Box.GetOffsets(this.$element, null, 'center', this.options.vOffset, this.options.hOffset));
//flag a boolean so we can reset the size after the element is closed.
this.changedSize = true;
}else{
this.$element
.css({
'max-height': eleDims.windowDims.height - (this.options.vOffset * (this.options.btmOffsetPct / 100 + 1)),
'width': ''
})
.offset(Foundation.Box.GetOffsets(this.$element, null, elePos, this.options.vOffset));
//the max height based on a percentage of vertical offset plus vertical offset
}
cb();
};
/**
* Opens the modal controlled by `this.$anchor`, and closes all others by default.
* @function
* @fires Reveal#closeme
* @fires Reveal#open
*/
Reveal.prototype.open = function(){
var _this = this;
this.isActive = true;
//make element invisible, but remove display: none so we can get size and positioning
this.$element
.css({'visibility': 'hidden'})
.show()
.scrollTop(0);
this._setPosition(function(){
_this.$element.hide()
.css({'visibility': ''});
if(!_this.options.multipleOpened){
/**
* Fires immediately before the modal opens.
* Closes any other modals that are currently open
* @event Reveal#closeme
*/
_this.$element.trigger('closeme.zf.reveal', _this.id);
}
if(_this.options.animationIn){
if(_this.options.overlay){
Foundation.Motion.animateIn(_this.$overlay, 'fade-in', function(){
Foundation.Motion.animateIn(_this.$element, _this.options.animationIn, function(){
_this.focusableElements = Foundation.Keyboard.findFocusable(_this.$element);
});
});
}else{
Foundation.Motion.animateIn(_this.$element, _this.options.animationIn, function(){
_this.focusableElements = Foundation.Keyboard.findFocusable(_this.$element);
});
}
}else{
if(_this.options.overlay){
_this.$overlay.show(0, function(){
_this.$element.show(_this.options.showDelay, function(){
});
});
}else{
_this.$element.show(_this.options.showDelay, function(){
});
}
}
});
// handle accessibility
this.$element.attr({'aria-hidden': false}).attr('tabindex', -1).focus()
/**
* Fires when the modal has successfully opened.
* @event Reveal#open
*/
.trigger('open.zf.reveal');
$('body').addClass('is-reveal-open')
.attr({'aria-hidden': (this.options.overlay || this.options.fullScreen) ? true : false});
setTimeout(function(){
_this._extraHandlers();
// Foundation.reflow();
}, 0);
};
/**
* Adds extra event handlers for the body and window if necessary.
* @private
*/
Reveal.prototype._extraHandlers = function(){
var _this = this;
this.focusableElements = Foundation.Keyboard.findFocusable(this.$element);
if(!this.options.overlay && this.options.closeOnClick && !this.options.fullScreen){
$('body').on('click.zf.reveal', function(e){
// if()
_this.close();
});
}
if(this.options.closeOnEsc){
$(window).on('keydown.zf.reveal', function(e){
Foundation.Keyboard.handleKey(e, 'Reveal', {
close: function() {
if (_this.options.closeOnEsc) {
_this.close();
_this.$anchor.focus();
}
}
});
if (_this.focusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general
e.preventDefault();
}
});
}
// lock focus within modal while tabbing
this.$element.on('keydown.zf.reveal', function(e) {
var $target = $(this);
// handle keyboard event with keyboard util
Foundation.Keyboard.handleKey(e, 'Reveal', {
tab_forward: function() {
if (_this.$element.find(':focus').is(_this.focusableElements.eq(-1))) { // left modal downwards, setting focus to first element
_this.focusableElements.eq(0).focus();
e.preventDefault();
}
},
tab_backward: function() {
if (_this.$element.find(':focus').is(_this.focusableElements.eq(0)) || _this.$element.is(':focus')) { // left modal upwards, setting focus to last element
_this.focusableElements.eq(-1).focus();
e.preventDefault();
}
},
open: function() {
if (_this.$element.find(':focus').is(_this.$element.find('[data-close]'))) {
setTimeout(function() { // set focus back to anchor if close button has been activated
_this.$anchor.focus();
}, 1);
} else if ($target.is(_this.focusableElements)) { // dont't trigger if acual element has focus (i.e. inputs, links, ...)
_this.open();
}
},
close: function() {
if (_this.options.closeOnEsc) {
_this.close();
_this.$anchor.focus();
}
}
});
});
};
/**
* Closes the modal.
* @function
* @fires Reveal#closed
*/
Reveal.prototype.close = function(){
if(!this.isActive || !this.$element.is(':visible')){
return false;
}
var _this = this;
if(this.options.animationOut){
Foundation.Motion.animateOut(this.$element, this.options.animationOut, function(){
if(_this.options.overlay){
Foundation.Motion.animateOut(_this.$overlay, 'fade-out', function(){
});
}
});
}else{
this.$element.hide(_this.options.hideDelay, function(){
if(_this.options.overlay){
_this.$overlay.hide(0, function(){
});
}
});
}
//conditionals to remove extra event listeners added on open
if(this.options.closeOnEsc){
$(window).off('keydown.zf.reveal');
}
if(!this.options.overlay && this.options.closeOnClick){
$('body').off('click.zf.reveal');
}
this.$element.off('keydown.zf.reveal');
//if the modal changed size, reset it
if(this.changedSize){
this.$element.css({
'height': '',
'width': ''
});
}
$('body').removeClass('is-reveal-open').attr({'aria-hidden': false, 'tabindex': ''});
/**
* Resets the modal content
* This prevents a running video to keep going in the background
*/
if(this.options.resetOnClose) {
this.$element.html(this.$element.html());
}
this.isActive = false;
this.$element.attr({'aria-hidden': true})
/**
* Fires when the modal is done closing.
* @event Reveal#closed
*/
.trigger('closed.zf.reveal');
};
/**
* Toggles the open/closed state of a modal.
* @function
*/
Reveal.prototype.toggle = function(){
if(this.isActive){
this.close();
}else{
this.open();
}
};
/**
* Destroys an instance of a modal.
* @function
*/
Reveal.prototype.destroy = function() {
if(this.options.overlay){
this.$overlay.hide().off().remove();
}
this.$element.hide();
this.$anchor.off();
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Reveal, 'Reveal');
// Exports for AMD/Browserify
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
module.exports = Reveal;
if (typeof define === 'function')
define(['foundation'], function() {
return Reveal;
});
}(Foundation, jQuery);

484
app/vendor/foundation/js/foundation.slider.js vendored Normal file
View File

@ -0,0 +1,484 @@
/**
* Slider module.
* @module foundation.slider
* @requires foundation.util.motion
* @requires foundation.util.triggers
* @requires foundation.util.keyboard
* @requires foundation.util.touch
*/
!function($, Foundation){
'use strict';
/**
* Creates a new instance of a drilldown menu.
* @class
* @param {jQuery} element - jQuery object to make into an accordion menu.
* @param {Object} options - Overrides to the default plugin settings.
*/
function Slider(element, options){
this.$element = element;
this.options = $.extend({}, Slider.defaults, this.$element.data(), options);
this._init();
Foundation.registerPlugin(this, 'Slider');
Foundation.Keyboard.register('Slider', {
'ltr': {
'ARROW_RIGHT': 'increase',
'ARROW_UP': 'increase',
'ARROW_DOWN': 'decrease',
'ARROW_LEFT': 'decrease',
'SHIFT_ARROW_RIGHT': 'increase_fast',
'SHIFT_ARROW_UP': 'increase_fast',
'SHIFT_ARROW_DOWN': 'decrease_fast',
'SHIFT_ARROW_LEFT': 'decrease_fast'
},
'rtl': {
'ARROW_LEFT': 'increase',
'ARROW_RIGHT': 'decrease',
'SHIFT_ARROW_LEFT': 'increase_fast',
'SHIFT_ARROW_RIGHT': 'decrease_fast'
}
});
}
Slider.defaults = {
/**
* Minimum value for the slider scale.
* @option
* @example 0
*/
start: 0,
/**
* Maximum value for the slider scale.
* @option
* @example 100
*/
end: 100,
/**
* Minimum value change per change event. Not Currently Implemented!
*/
step: 1,
/**
* Value at which the handle/input *(left handle/first input)* should be set to on initialization.
* @option
* @example 0
*/
initialStart: 0,
/**
* Value at which the right handle/second input should be set to on initialization.
* @option
* @example 100
*/
initialEnd: 100,
/**
* Allows the input to be located outside the container and visible. Set to by the JS
* @option
* @example false
*/
binding: false,
/**
* Allows the user to click/tap on the slider bar to select a value.
* @option
* @example true
*/
clickSelect: true,
/**
* Set to true and use the `vertical` class to change alignment to vertical.
* @option
* @example false
*/
vertical: false,
/**
* Allows the user to drag the slider handle(s) to select a value.
* @option
* @example true
*/
draggable: true,
/**
* Disables the slider and prevents event listeners from being applied. Double checked by JS with `disabledClass`.
* @option
* @example false
*/
disabled: false,
/**
* Allows the use of two handles. Double checked by the JS. Changes some logic handling.
* @option
* @example false
*/
doubleSided: false,
/**
* Potential future feature.
*/
// steps: 100,
/**
* Number of decimal places the plugin should go to for floating point precision.
* @option
* @example 2
*/
decimal: 2,
/**
* Time delay for dragged elements.
*/
// dragDelay: 0,
/**
* Time, in ms, to animate the movement of a slider handle if user clicks/taps on the bar. Needs to be manually set if updating the transition time in the Sass settings.
* @option
* @example 200
*/
moveTime: 200,//update this if changing the transition time in the sass
/**
* Class applied to disabled sliders.
* @option
* @example 'disabled'
*/
disabledClass: 'disabled'
};
/**
* Initilizes the plugin by reading/setting attributes, creating collections and setting the initial position of the handle(s).
* @function
* @private
*/
Slider.prototype._init = function(){
this.inputs = this.$element.find('input');
this.handles = this.$element.find('[data-slider-handle]');
this.$handle = this.handles.eq(0);
this.$input = this.inputs.length ? this.inputs.eq(0) : $('#' + this.$handle.attr('aria-controls'));
this.$fill = this.$element.find('[data-slider-fill]').css(this.options.vertical ? 'height' : 'width', 0);
var isDbl = false,
_this = this;
if(this.options.disabled || this.$element.hasClass(this.options.disabledClass)){
this.options.disabled = true;
this.$element.addClass(this.options.disabledClass);
}
if(!this.inputs.length){
this.inputs = $().add(this.$input);
this.options.binding = true;
}
this._setInitAttr(0);
this._events(this.$handle);
if(this.handles[1]){
this.options.doubleSided = true;
this.$handle2 = this.handles.eq(1);
this.$input2 = this.inputs.length > 1 ? this.inputs.eq(1) : $('#' + this.$handle2.attr('aria-controls'));
if(!this.inputs[1]){
this.inputs = this.inputs.add(this.$input2);
}
isDbl = true;
this._setHandlePos(this.$handle, this.options.initialStart, true, function(){
_this._setHandlePos(_this.$handle2, _this.options.initialEnd);
});
// this.$handle.triggerHandler('click.zf.slider');
this._setInitAttr(1);
this._events(this.$handle2);
}
if(!isDbl){
this._setHandlePos(this.$handle, this.options.initialStart, true);
}
};
/**
* Sets the position of the selected handle and fill bar.
* @function
* @private
* @param {jQuery} $hndl - the selected handle to move.
* @param {Number} location - floating point between the start and end values of the slider bar.
* @param {Function} cb - callback function to fire on completion.
* @fires Slider#moved
*/
Slider.prototype._setHandlePos = function($hndl, location, noInvert, cb){
//might need to alter that slightly for bars that will have odd number selections.
location = parseFloat(location);//on input change events, convert string to number...grumble.
// prevent slider from running out of bounds
if(location < this.options.start){ location = this.options.start; }
else if(location > this.options.end){ location = this.options.end; }
var isDbl = this.options.doubleSided,
callback = cb || null;
if(isDbl){
if(this.handles.index($hndl) === 0){
var h2Val = parseFloat(this.$handle2.attr('aria-valuenow'));
location = location >= h2Val ? h2Val - this.options.step : location;
}else{
var h1Val = parseFloat(this.$handle.attr('aria-valuenow'));
location = location <= h1Val ? h1Val + this.options.step : location;
}
}
if(this.options.vertical && !noInvert){
location = this.options.end - location;
}
var _this = this,
vert = this.options.vertical,
hOrW = vert ? 'height' : 'width',
lOrT = vert ? 'top' : 'left',
halfOfHandle = $hndl[0].getBoundingClientRect()[hOrW] / 2,
elemDim = this.$element[0].getBoundingClientRect()[hOrW],
pctOfBar = percent(location, this.options.end).toFixed(2),
pxToMove = (elemDim - halfOfHandle) * pctOfBar,
movement = (percent(pxToMove, elemDim) * 100).toFixed(this.options.decimal),
location = location > 0 ? parseFloat(location.toFixed(this.options.decimal)) : 0,
anim, prog, start = null, css = {};
this._setValues($hndl, location);
if(this.options.doubleSided){//update to calculate based on values set to respective inputs??
var isLeftHndl = this.handles.index($hndl) === 0,
dim,
idx = this.handles.index($hndl);
if(isLeftHndl){
css[lOrT] = (pctOfBar > 0 ? pctOfBar * 100 : 0) + '%';//
dim = /*Math.abs*/((percent(this.$handle2.position()[lOrT] + halfOfHandle, elemDim) - parseFloat(pctOfBar)) * 100).toFixed(this.options.decimal) + '%';
css['min-' + hOrW] = dim;
if(cb && typeof cb === 'function'){ cb(); }
}else{
var handleLeft = parseFloat(this.$handle[0].style.left);
location = (location < 100 ? location : 100) - (!isNaN(handleLeft) ? handleLeft : this.options.end - location);
css['min-' + hOrW] = location + '%';
}
}
this.$element.one('finished.zf.animate', function(){
_this.animComplete = true;
/**
* Fires when the handle is done moving.
* @event Slider#moved
*/
_this.$element.trigger('moved.zf.slider', [$hndl]);
});
var moveTime = _this.$element.data('dragging') ? 1000/60 : _this.options.moveTime;
/*var move = new */Foundation.Move(moveTime, $hndl, function(){
$hndl.css(lOrT, movement + '%');
if(!_this.options.doubleSided){
_this.$fill.css(hOrW, pctOfBar * 100 + '%');
}else{
_this.$fill.css(css);
}
});
// move.do();
};
/**
* Sets the initial attribute for the slider element.
* @function
* @private
* @param {Number} idx - index of the current handle/input to use.
*/
Slider.prototype._setInitAttr = function(idx){
var id = this.inputs.eq(idx).attr('id') || Foundation.GetYoDigits(6, 'slider');
this.inputs.eq(idx).attr({
'id': id,
'max': this.options.end,
'min': this.options.start
});
this.handles.eq(idx).attr({
'role': 'slider',
'aria-controls': id,
'aria-valuemax': this.options.end,
'aria-valuemin': this.options.start,
'aria-valuenow': idx === 0 ? this.options.initialStart : this.options.initialEnd,
'aria-orientation': this.options.vertical ? 'vertical' : 'horizontal',
'tabindex': 0
});
};
/**
* Sets the input and `aria-valuenow` values for the slider element.
* @function
* @private
* @param {jQuery} $handle - the currently selected handle.
* @param {Number} val - floating point of the new value.
*/
Slider.prototype._setValues = function($handle, val){
var idx = this.options.doubleSided ? this.handles.index($handle) : 0;
this.inputs.eq(idx).val(val);
$handle.attr('aria-valuenow', val);
};
/**
* Handles events on the slider element.
* Calculates the new location of the current handle.
* If there are two handles and the bar was clicked, it determines which handle to move.
* @function
* @private
* @param {Object} e - the `event` object passed from the listener.
* @param {jQuery} $handle - the current handle to calculate for, if selected.
* @param {Number} val - floating point number for the new value of the slider.
*/
Slider.prototype._handleEvent = function(e, $handle, val){
var value, hasVal;
if(!val){//click or drag events
e.preventDefault();
var _this = this,
vertical = this.options.vertical,
param = vertical ? 'height' : 'width',
direction = vertical ? 'top' : 'left',
pageXY = vertical ? e.pageY : e.pageX,
halfOfHandle = this.$handle[0].getBoundingClientRect()[param] / 2,
barDim = this.$element[0].getBoundingClientRect()[param],
barOffset = (this.$element.offset()[direction] - pageXY),
barXY = barOffset > 0 ? -halfOfHandle : (barOffset - halfOfHandle) < -barDim ? barDim : Math.abs(barOffset),//if the cursor position is less than or greater than the elements bounding coordinates, set coordinates within those bounds
// eleDim = this.$element[0].getBoundingClientRect()[param],
offsetPct = percent(barXY, barDim);
value = (this.options.end - this.options.start) * offsetPct;
hasVal = false;
if(!$handle){//figure out which handle it is, pass it to the next function.
var firstHndlPos = absPosition(this.$handle, direction, barXY, param),
secndHndlPos = absPosition(this.$handle2, direction, barXY, param);
$handle = firstHndlPos <= secndHndlPos ? this.$handle : this.$handle2;
}
}else{//change event on input
value = val;
hasVal = true;
}
this._setHandlePos($handle, value, hasVal);
};
/**
* Adds event listeners to the slider elements.
* @function
* @private
* @param {jQuery} $handle - the current handle to apply listeners to.
*/
Slider.prototype._events = function($handle){
if(this.options.disabled){ return false; }
var _this = this,
curHandle,
timer;
this.inputs.off('change.zf.slider').on('change.zf.slider', function(e){
var idx = _this.inputs.index($(this));
_this._handleEvent(e, _this.handles.eq(idx), $(this).val());
});
if(this.options.clickSelect){
this.$element.off('click.zf.slider').on('click.zf.slider', function(e){
if(_this.$element.data('dragging')){ return false; }
_this.animComplete = false;
if(_this.options.doubleSided){
_this._handleEvent(e);
}else{
_this._handleEvent(e, _this.$handle);
}
});
}
if(this.options.draggable){
this.handles.addTouch();
// var curHandle,
// timer,
var $body = $('body');
$handle
.off('mousedown.zf.slider')
.on('mousedown.zf.slider', function(e){
$handle.addClass('is-dragging');
_this.$fill.addClass('is-dragging');//
_this.$element.data('dragging', true);
_this.animComplete = false;
curHandle = $(e.currentTarget);
$body.on('mousemove.zf.slider', function(e){
e.preventDefault();
// timer = setTimeout(function(){
_this._handleEvent(e, curHandle);
// }, _this.options.dragDelay);
}).on('mouseup.zf.slider', function(e){
// clearTimeout(timer);
_this.animComplete = true;
_this._handleEvent(e, curHandle);
$handle.removeClass('is-dragging');
_this.$fill.removeClass('is-dragging');
_this.$element.data('dragging', false);
// Foundation.reflow(_this.$element, 'slider');
$body.off('mousemove.zf.slider mouseup.zf.slider');
});
});
}
$handle.off('keydown.zf.slider').on('keydown.zf.slider', function(e){
var idx = _this.options.doubleSided ? _this.handles.index($(this)) : 0,
oldValue = parseFloat(_this.inputs.eq(idx).val()),
newValue;
var _$handle = $(this);
// handle keyboard event with keyboard util
Foundation.Keyboard.handleKey(e, 'Slider', {
decrease: function() {
newValue = oldValue - _this.options.step;
},
increase: function() {
newValue = oldValue + _this.options.step;
},
decrease_fast: function() {
newValue = oldValue - _this.options.step * 10;
},
increase_fast: function() {
newValue = oldValue + _this.options.step * 10;
},
handled: function() { // only set handle pos when event was handled specially
e.preventDefault();
_this._setHandlePos(_$handle, newValue, true);
}
});
/*if (newValue) { // if pressed key has special function, update value
e.preventDefault();
_this._setHandlePos(_$handle, newValue);
}*/
});
};
/**
* Destroys the slider plugin.
*/
Slider.prototype.destroy = function(){
this.handles.off('.zf.slider');
this.inputs.off('.zf.slider');
this.$element.off('.zf.slider');
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Slider, 'Slider');
function percent(frac, num){
return (frac / num);
}
function absPosition($handle, dir, clickPos, param){
return Math.abs(($handle.position()[dir] + ($handle[param]() / 2)) - clickPos);
}
}(jQuery, window.Foundation);
//*********this is in case we go to static, absolute positions instead of dynamic positioning********
// this.setSteps(function(){
// _this._events();
// var initStart = _this.options.positions[_this.options.initialStart - 1] || null;
// var initEnd = _this.options.initialEnd ? _this.options.position[_this.options.initialEnd - 1] : null;
// if(initStart || initEnd){
// _this._handleEvent(initStart, initEnd);
// }
// });
//***********the other part of absolute positions*************
// Slider.prototype.setSteps = function(cb){
// var posChange = this.$element.outerWidth() / this.options.steps;
// var counter = 0
// while(counter < this.options.steps){
// if(counter){
// this.options.positions.push(this.options.positions[counter - 1] + posChange);
// }else{
// this.options.positions.push(posChange);
// }
// counter++;
// }
// cb();
// };

436
app/vendor/foundation/js/foundation.sticky.js vendored Normal file
View File

@ -0,0 +1,436 @@
/**
* Sticky module.
* @module foundation.sticky
* @requires foundation.util.triggers
* @requires foundation.util.mediaQuery
*/
!function($, Foundation){
'use strict';
/**
* Creates a new instance of a sticky thing.
* @class
* @param {jQuery} element - jQuery object to make sticky.
* @param {Object} options - options object passed when creating the element programmatically.
*/
function Sticky(element, options){
this.$element = element;
this.options = $.extend({}, Sticky.defaults, this.$element.data(), options);
this._init();
Foundation.registerPlugin(this, 'Sticky');
}
Sticky.defaults = {
/**
* Customizable container template. Add your own classes for styling and sizing.
* @option
* @example '&lt;div data-sticky-container class="small-6 columns"&gt;&lt;/div&gt;'
*/
container: '<div data-sticky-container></div>',
/**
* Location in the view the element sticks to.
* @option
* @example 'top'
*/
stickTo: 'top',
/**
* If anchored to a single element, the id of that element.
* @option
* @example 'exampleId'
*/
anchor: '',
/**
* If using more than one element as anchor points, the id of the top anchor.
* @option
* @example 'exampleId:top'
*/
topAnchor: '',
/**
* If using more than one element as anchor points, the id of the bottom anchor.
* @option
* @example 'exampleId:bottom'
*/
btmAnchor: '',
/**
* Margin, in `em`'s to apply to the top of the element when it becomes sticky.
* @option
* @example 1
*/
marginTop: 1,
/**
* Margin, in `em`'s to apply to the bottom of the element when it becomes sticky.
* @option
* @example 1
*/
marginBottom: 1,
/**
* Breakpoint string that is the minimum screen size an element should become sticky.
* @option
* @example 'medium'
*/
stickyOn: 'medium',
/**
* Class applied to sticky element, and removed on destruction. Foundation defaults to `sticky`.
* @option
* @example 'sticky'
*/
stickyClass: 'sticky',
/**
* Class applied to sticky container. Foundation defaults to `sticky-container`.
* @option
* @example 'sticky-container'
*/
containerClass: 'sticky-container',
/**
* Number of scroll events between the plugin's recalculating sticky points. Setting it to `0` will cause it to recalc every scroll event, setting it to `-1` will prevent recalc on scroll.
* @option
* @example 50
*/
checkEvery: -1
};
/**
* Initializes the sticky element by adding classes, getting/setting dimensions, breakpoints and attributes
* @function
* @private
*/
Sticky.prototype._init = function(){
var $parent = this.$element.parent('[data-sticky-container]'),
id = this.$element[0].id || Foundation.GetYoDigits(6, 'sticky'),
_this = this;
if(!$parent.length){
this.wasWrapped = true;
}
this.$container = $parent.length ? $parent : $(this.options.container).wrapInner(this.$element);
this.$container.addClass(this.options.containerClass);
this.$element.addClass(this.options.stickyClass)
.attr({'data-resize': id});
this.scrollCount = this.options.checkEvery;
this.isStuck = false;
if(this.options.anchor !== ''){
this.$anchor = $('#' + this.options.anchor);
}else{
this._parsePoints();
}
this._setSizes(function(){
_this._calc(false);
});
this._events(id.split('-').reverse().join('-'));
};
/**
* If using multiple elements as anchors, calculates the top and bottom pixel values the sticky thing should stick and unstick on.
* @function
* @private
*/
Sticky.prototype._parsePoints = function(){
var top = this.options.topAnchor,
btm = this.options.btmAnchor,
pts = [top, btm],
breaks = {};
if(top && btm){
for(var i = 0, len = pts.length; i < len && pts[i]; i++){
var pt;
if(typeof pts[i] === 'number'){
pt = pts[i];
}else{
var place = pts[i].split(':'),
anchor = $('#' + place[0]);
pt = anchor.offset().top;
if(place[1] && place[1].toLowerCase() === 'bottom'){
pt += anchor[0].getBoundingClientRect().height;
}
}
breaks[i] = pt;
}
}else{
breaks = {0: 1, 1: document.documentElement.scrollHeight};
}
this.points = breaks;
return;
};
/**
* Adds event handlers for the scrolling element.
* @private
* @param {String} id - psuedo-random id for unique scroll event listener.
*/
Sticky.prototype._events = function(id){
var _this = this,
scrollListener = this.scrollListener = 'scroll.zf.' + id;
if(this.isOn){ return; }
if(this.canStick){
this.isOn = true;
$(window).off(scrollListener)
.on(scrollListener, function(e){
if(_this.scrollCount === 0){
_this.scrollCount = _this.options.checkEvery;
_this._setSizes(function(){
_this._calc(false, window.pageYOffset);
});
}else{
_this.scrollCount--;
_this._calc(false, window.pageYOffset);
}
});
}
this.$element.off('resizeme.zf.trigger')
.on('resizeme.zf.trigger', function(e, el){
_this._setSizes(function(){
_this._calc(false);
if(_this.canStick){
if(!_this.isOn){
_this._events(id);
}
}else if(_this.isOn){
_this._pauseListeners(scrollListener);
}
});
});
};
/**
* Removes event handlers for scroll and change events on anchor.
* @fires Sticky#pause
* @param {String} scrollListener - unique, namespaced scroll listener attached to `window`
*/
Sticky.prototype._pauseListeners = function(scrollListener){
this.isOn = false;
$(window).off(scrollListener);
/**
* Fires when the plugin is paused due to resize event shrinking the view.
* @event Sticky#pause
* @private
*/
this.$element.trigger('pause.zf.sticky');
};
/**
* Called on every `scroll` event and on `_init`
* fires functions based on booleans and cached values
* @param {Boolean} checkSizes - true if plugin should recalculate sizes and breakpoints.
* @param {Number} scroll - current scroll position passed from scroll event cb function. If not passed, defaults to `window.pageYOffset`.
*/
Sticky.prototype._calc = function(checkSizes, scroll){
if(checkSizes){ this._setSizes(); }
if(!this.canStick){
if(this.isStuck){
this._removeSticky(true);
}
return false;
}
if(!scroll){ scroll = window.pageYOffset; }
if(scroll >= this.topPoint){
if(scroll <= this.bottomPoint){
if(!this.isStuck){
this._setSticky();
}
}else{
if(this.isStuck){
this._removeSticky(false);
}
}
}else{
if(this.isStuck){
this._removeSticky(true);
}
}
};
/**
* Causes the $element to become stuck.
* Adds `position: fixed;`, and helper classes.
* @fires Sticky#stuckto
* @function
* @private
*/
Sticky.prototype._setSticky = function(){
var stickTo = this.options.stickTo,
mrgn = stickTo === 'top' ? 'marginTop' : 'marginBottom',
notStuckTo = stickTo === 'top' ? 'bottom' : 'top',
css = {};
css[mrgn] = this.options[mrgn] + 'em';
css[stickTo] = 0;
css[notStuckTo] = 'auto';
css['left'] = this.$container.offset().left + parseInt(window.getComputedStyle(this.$container[0])["padding-left"], 10);
this.isStuck = true;
this.$element.removeClass('is-anchored is-at-' + notStuckTo)
.addClass('is-stuck is-at-' + stickTo)
.css(css)
/**
* Fires when the $element has become `position: fixed;`
* Namespaced to `top` or `bottom`.
* @event Sticky#stuckto
*/
.trigger('sticky.zf.stuckto:' + stickTo);
};
/**
* Causes the $element to become unstuck.
* Removes `position: fixed;`, and helper classes.
* Adds other helper classes.
* @param {Boolean} isTop - tells the function if the $element should anchor to the top or bottom of its $anchor element.
* @fires Sticky#unstuckfrom
* @private
*/
Sticky.prototype._removeSticky = function(isTop){
var stickTo = this.options.stickTo,
stickToTop = stickTo === 'top',
css = {},
anchorPt = (this.points ? this.points[1] - this.points[0] : this.anchorHeight) - this.elemHeight,
mrgn = stickToTop ? 'marginTop' : 'marginBottom',
notStuckTo = stickToTop ? 'bottom' : 'top',
topOrBottom = isTop ? 'top' : 'bottom';
css[mrgn] = 0;
if((isTop && !stickToTop) || (stickToTop && !isTop)){
css[stickTo] = anchorPt;
css[notStuckTo] = 0;
}else{
css[stickTo] = 0;
css[notStuckTo] = anchorPt;
}
css['left'] = '';
this.isStuck = false;
this.$element.removeClass('is-stuck is-at-' + stickTo)
.addClass('is-anchored is-at-' + topOrBottom)
.css(css)
/**
* Fires when the $element has become anchored.
* Namespaced to `top` or `bottom`.
* @event Sticky#unstuckfrom
*/
.trigger('sticky.zf.unstuckfrom:' + topOrBottom);
};
/**
* Sets the $element and $container sizes for plugin.
* Calls `_setBreakPoints`.
* @param {Function} cb - optional callback function to fire on completion of `_setBreakPoints`.
* @private
*/
Sticky.prototype._setSizes = function(cb){
this.canStick = Foundation.MediaQuery.atLeast(this.options.stickyOn);
if(!this.canStick){ cb(); }
var _this = this,
newElemWidth = this.$container[0].getBoundingClientRect().width,
comp = window.getComputedStyle(this.$container[0]),
pdng = parseInt(comp['padding-right'], 10);
if(this.$anchor && this.$anchor.length){
this.anchorHeight = this.$anchor[0].getBoundingClientRect().height;
}else{
this._parsePoints();
}
this.$element.css({
'max-width': newElemWidth - pdng + 'px'
});
var newContainerHeight = this.$element[0].getBoundingClientRect().height || this.containerHeight;
this.containerHeight = newContainerHeight;
this.$container.css({
height: newContainerHeight
});
this.elemHeight = newContainerHeight;
if (this.isStuck) {
this.$element.css({"left":this.$container.offset().left + parseInt(comp['padding-left'], 10)});
}
this._setBreakPoints(newContainerHeight, function(){
if(cb){ cb(); }
});
};
/**
* Sets the upper and lower breakpoints for the element to become sticky/unsticky.
* @param {Number} elemHeight - px value for sticky.$element height, calculated by `_setSizes`.
* @param {Function} cb - optional callback function to be called on completion.
* @private
*/
Sticky.prototype._setBreakPoints = function(elemHeight, cb){
if(!this.canStick){
if(cb){ cb(); }
else{ return false; }
}
var mTop = emCalc(this.options.marginTop),
mBtm = emCalc(this.options.marginBottom),
topPoint = this.points ? this.points[0] : this.$anchor.offset().top,
bottomPoint = this.points ? this.points[1] : topPoint + this.anchorHeight,
// topPoint = this.$anchor.offset().top || this.points[0],
// bottomPoint = topPoint + this.anchorHeight || this.points[1],
winHeight = window.innerHeight;
if(this.options.stickTo === 'top'){
topPoint -= mTop;
bottomPoint -= (elemHeight + mTop);
}else if(this.options.stickTo === 'bottom'){
topPoint -= (winHeight - (elemHeight + mBtm));
bottomPoint -= (winHeight - mBtm);
}else{
//this would be the stickTo: both option... tricky
}
this.topPoint = topPoint;
this.bottomPoint = bottomPoint;
if(cb){ cb(); }
};
/**
* Destroys the current sticky element.
* Resets the element to the top position first.
* Removes event listeners, JS-added css properties and classes, and unwraps the $element if the JS added the $container.
* @function
*/
Sticky.prototype.destroy = function(){
this._removeSticky(true);
this.$element.removeClass(this.options.stickyClass + ' is-anchored is-at-top')
.css({
height: '',
top: '',
bottom: '',
'max-width': ''
})
.off('resizeme.zf.trigger');
this.$anchor.off('change.zf.sticky');
$(window).off(this.scrollListener);
if(this.wasWrapped){
this.$element.unwrap();
}else{
this.$container.removeClass(this.options.containerClass)
.css({
height: ''
});
}
Foundation.unregisterPlugin(this);
};
/**
* Helper function to calculate em values
* @param Number {em} - number of em's to calculate into pixels
*/
function emCalc(em){
return parseInt(window.getComputedStyle(document.body, null).fontSize, 10) * em;
}
Foundation.plugin(Sticky, 'Sticky');
}(jQuery, window.Foundation);

306
app/vendor/foundation/js/foundation.tabs.js vendored Normal file
View File

@ -0,0 +1,306 @@
/**
* Tabs module.
* @module foundation.tabs
* @requires foundation.util.keyboard
* @requires foundation.util.timerAndImageLoader if tabs contain images
*/
!function($, Foundation) {
'use strict';
/**
* Creates a new instance of tabs.
* @class
* @fires Tabs#init
* @param {jQuery} element - jQuery object to make into tabs.
* @param {Object} options - Overrides to the default plugin settings.
*/
function Tabs(element, options){
this.$element = element;
this.options = $.extend({}, Tabs.defaults, this.$element.data(), options);
this._init();
Foundation.registerPlugin(this, 'Tabs');
Foundation.Keyboard.register('Tabs', {
'ENTER': 'open',
'SPACE': 'open',
'ARROW_RIGHT': 'next',
'ARROW_UP': 'previous',
'ARROW_DOWN': 'next',
'ARROW_LEFT': 'previous'
// 'TAB': 'next',
// 'SHIFT_TAB': 'previous'
});
}
Tabs.defaults = {
// /**
// * Allows the JS to alter the url of the window. Not yet implemented.
// */
// deepLinking: false,
// /**
// * If deepLinking is enabled, allows the window to scroll to content if window is loaded with a hash including a tab-pane id
// */
// scrollToContent: false,
/**
* Allows the window to scroll to content of active pane on load if set to true.
* @option
* @example false
*/
autoFocus: false,
/**
* Allows keyboard input to 'wrap' around the tab links.
* @option
* @example true
*/
wrapOnKeys: true,
/**
* Allows the tab content panes to match heights if set to true.
* @option
* @example false
*/
matchHeight: false,
/**
* Class applied to `li`'s in tab link list.
* @option
* @example 'tabs-title'
*/
linkClass: 'tabs-title',
// contentClass: 'tabs-content',
/**
* Class applied to the content containers.
* @option
* @example 'tabs-panel'
*/
panelClass: 'tabs-panel'
};
/**
* Initializes the tabs by showing and focusing (if autoFocus=true) the preset active tab.
* @private
*/
Tabs.prototype._init = function(){
var _this = this;
this.$tabTitles = this.$element.find('.' + this.options.linkClass);
this.$tabContent = $('[data-tabs-content="' + this.$element[0].id + '"]');
this.$tabTitles.each(function(){
var $elem = $(this),
$link = $elem.find('a'),
isActive = $elem.hasClass('is-active'),
hash = $link.attr('href').slice(1),
linkId = hash + '-label',
$tabContent = $(hash);
$elem.attr({'role': 'presentation'});
$link.attr({
'role': 'tab',
'aria-controls': hash,
'aria-selected': isActive,
'id': linkId
});
$tabContent.attr({
'role': 'tabpanel',
'aria-hidden': !isActive,
'aria-labelledby': linkId
});
if(isActive && _this.options.autoFocus){
$link.focus();
}
});
if(this.options.matchHeight){
var $images = this.$tabContent.find('img');
if($images.length){
Foundation.onImagesLoaded($images, this._setHeight.bind(this));
}else{
this._setHeight();
}
}
this._events();
};
/**
* Adds event handlers for items within the tabs.
* @private
*/
Tabs.prototype._events = function(){
this._addKeyHandler();
this._addClickHandler();
if(this.options.matchHeight){
$(window).on('changed.zf.mediaquery', this._setHeight.bind(this));
}
};
/**
* Adds click handlers for items within the tabs.
* @private
*/
Tabs.prototype._addClickHandler = function(){
var _this = this;
this.$element.off('click.zf.tabs')
.on('click.zf.tabs', '.' + this.options.linkClass, function(e){
e.preventDefault();
e.stopPropagation();
if($(this).hasClass('is-active')){
return;
}
_this._handleTabChange($(this));
});
};
/**
* Adds keyboard event handlers for items within the tabs.
* @private
*/
Tabs.prototype._addKeyHandler = function(){
var _this = this;
var $firstTab = _this.$element.find('li:first-of-type');
var $lastTab = _this.$element.find('li:last-of-type');
this.$tabTitles.off('keydown.zf.tabs').on('keydown.zf.tabs', function(e){
if(e.which === 9) return;
e.stopPropagation();
e.preventDefault();
var $element = $(this),
$elements = $element.parent('ul').children('li'),
$prevElement,
$nextElement;
$elements.each(function(i) {
if ($(this).is($element)) {
if (_this.options.wrapOnKeys) {
$prevElement = i === 0 ? $elements.last() : $elements.eq(i-1);
$nextElement = i === $elements.length -1 ? $elements.first() : $elements.eq(i+1);
} else {
$prevElement = $elements.eq(Math.max(0, i-1));
$nextElement = $elements.eq(Math.min(i+1, $elements.length-1));
}
return;
}
});
// handle keyboard event with keyboard util
Foundation.Keyboard.handleKey(e, 'Tabs', {
open: function() {
$element.find('[role="tab"]').focus();
_this._handleTabChange($element);
},
previous: function() {
$prevElement.find('[role="tab"]').focus();
_this._handleTabChange($prevElement);
},
next: function() {
$nextElement.find('[role="tab"]').focus();
_this._handleTabChange($nextElement);
}
});
});
};
/**
* Opens the tab `$targetContent` defined by `$target`.
* @param {jQuery} $target - Tab to open.
* @fires Tabs#change
* @function
*/
Tabs.prototype._handleTabChange = function($target){
var $tabLink = $target.find('[role="tab"]'),
hash = $tabLink.attr('href'),
$targetContent = $(hash),
$oldTab = this.$element.find('.' + this.options.linkClass + '.is-active')
.removeClass('is-active').find('[role="tab"]')
.attr({'aria-selected': 'false'}).attr('href');
$($oldTab).removeClass('is-active').attr({'aria-hidden': 'true'});
$target.addClass('is-active');
$tabLink.attr({'aria-selected': 'true'});
$targetContent
.addClass('is-active')
.attr({'aria-hidden': 'false'});
/**
* Fires when the plugin has successfully changed tabs.
* @event Tabs#change
*/
this.$element.trigger('change.zf.tabs', [$target]);
// Foundation.reflow(this.$element, 'tabs');
};
/**
* Public method for selecting a content pane to display.
* @param {jQuery | String} elem - jQuery object or string of the id of the pane to display.
* @function
*/
Tabs.prototype.selectTab = function(elem){
var idStr;
if(typeof elem === 'object'){
idStr = elem[0].id;
}else{
idStr = elem;
}
if(idStr.indexOf('#') < 0){
idStr = '#' + idStr;
}
var $target = this.$tabTitles.find('[href="' + idStr + '"]').parent('.' + this.options.linkClass);
this._handleTabChange($target);
};
/**
* Sets the height of each panel to the height of the tallest panel.
* If enabled in options, gets called on media query change.
* If loading content via external source, can be called directly or with _reflow.
* @function
* @private
*/
Tabs.prototype._setHeight = function(){
var max = 0;
this.$tabContent.find('.' + this.options.panelClass)
.css('height', '')
.each(function(){
var panel = $(this),
isActive = panel.hasClass('is-active');
if(!isActive){
panel.css({'visibility': 'hidden', 'display': 'block'});
}
var temp = this.getBoundingClientRect().height;
if(!isActive){
panel.css({'visibility': '', 'display': ''});
}
max = temp > max ? temp : max;
})
.css('height', max + 'px');
};
/**
* Destroys an instance of an tabs.
* @fires Tabs#destroyed
*/
Tabs.prototype.destroy = function() {
this.$element.find('.' + this.options.linkClass)
.off('.zf.tabs').hide().end()
.find('.' + this.options.panelClass)
.hide();
if(this.options.matchHeight){
$(window).off('changed.zf.mediaquery');
}
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Tabs, 'Tabs');
function checkClass($elem){
return $elem.hasClass('is-active');
}
}(jQuery, window.Foundation);

147
app/vendor/foundation/js/foundation.toggler.js vendored Normal file
View File

@ -0,0 +1,147 @@
/**
* Toggler module.
* @module foundation.toggler
* @requires foundation.util.motion
*/
!function(Foundation, $) {
'use strict';
/**
* Creates a new instance of Toggler.
* @class
* @fires Toggler#init
* @param {Object} element - jQuery object to add the trigger to.
* @param {Object} options - Overrides to the default plugin settings.
*/
function Toggler(element, options) {
this.$element = element;
this.options = $.extend({}, Toggler.defaults, element.data(), options);
this.className = '';
this._init();
this._events();
Foundation.registerPlugin(this, 'Toggler');
}
Toggler.defaults = {
/**
* Tells the plugin if the element should animated when toggled.
* @option
* @example false
*/
animate: false
};
/**
* Initializes the Toggler plugin by parsing the toggle class from data-toggler, or animation classes from data-animate.
* @function
* @private
*/
Toggler.prototype._init = function() {
var input;
// Parse animation classes if they were set
if (this.options.animate) {
input = this.options.animate.split(' ');
this.animationIn = input[0];
this.animationOut = input[1] || null;
}
// Otherwise, parse toggle class
else {
input = this.$element.data('toggler');
// Allow for a . at the beginning of the string
this.className = input[0] === '.' ? input.slice(1) : input;
}
// Add ARIA attributes to triggers
var id = this.$element[0].id;
$('[data-open="'+id+'"], [data-close="'+id+'"], [data-toggle="'+id+'"]')
.attr('aria-controls', id);
// If the target is hidden, add aria-hidden
this.$element.attr('aria-expanded', this.$element.is(':hidden') ? false : true);
};
/**
* Initializes events for the toggle trigger.
* @function
* @private
*/
Toggler.prototype._events = function() {
this.$element.off('toggle.zf.trigger').on('toggle.zf.trigger', this.toggle.bind(this));
};
/**
* Toggles the target class on the target element. An event is fired from the original trigger depending on if the resultant state was "on" or "off".
* @function
* @fires Toggler#on
* @fires Toggler#off
*/
Toggler.prototype.toggle = function() {
this[ this.options.animate ? '_toggleAnimate' : '_toggleClass']();
};
Toggler.prototype._toggleClass = function() {
this.$element.toggleClass(this.className);
var isOn = this.$element.hasClass(this.className);
if (isOn) {
/**
* Fires if the target element has the class after a toggle.
* @event Toggler#on
*/
this.$element.trigger('on.zf.toggler');
}
else {
/**
* Fires if the target element does not have the class after a toggle.
* @event Toggler#off
*/
this.$element.trigger('off.zf.toggler');
}
this._updateARIA(isOn);
};
Toggler.prototype._toggleAnimate = function() {
var _this = this;
if (this.$element.is(':hidden')) {
Foundation.Motion.animateIn(this.$element, this.animationIn, function() {
this.trigger('on.zf.toggler');
_this._updateARIA(true);
});
}
else {
Foundation.Motion.animateOut(this.$element, this.animationOut, function() {
this.trigger('off.zf.toggler');
_this._updateARIA(false);
});
}
};
Toggler.prototype._updateARIA = function(isOn) {
this.$element.attr('aria-expanded', isOn ? true : false);
};
/**
* Destroys the instance of Toggler on the element.
* @function
*/
Toggler.prototype.destroy= function() {
this.$element.off('.zf.toggler');
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Toggler, 'Toggler');
// Exports for AMD/Browserify
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
module.exports = Toggler;
if (typeof define === 'function')
define(['foundation'], function() {
return Toggler;
});
}(Foundation, jQuery);

429
app/vendor/foundation/js/foundation.tooltip.js vendored Normal file
View File

@ -0,0 +1,429 @@
/**
* Tooltip module.
* @module foundation.tooltip
* @requires foundation.util.box
* @requires foundation.util.triggers
*/
!function($, document, Foundation){
'use strict';
/**
* Creates a new instance of a Tooltip.
* @class
* @fires Tooltip#init
* @param {jQuery} element - jQuery object to attach a tooltip to.
* @param {Object} options - object to extend the default configuration.
*/
function Tooltip(element, options){
this.$element = element;
this.options = $.extend({}, Tooltip.defaults, this.$element.data(), options);
this.isActive = false;
this.isClick = false;
this._init();
Foundation.registerPlugin(this, 'Tooltip');
}
Tooltip.defaults = {
disableForTouch: false,
/**
* Time, in ms, before a tooltip should open on hover.
* @option
* @example 200
*/
hoverDelay: 200,
/**
* Time, in ms, a tooltip should take to fade into view.
* @option
* @example 150
*/
fadeInDuration: 150,
/**
* Time, in ms, a tooltip should take to fade out of view.
* @option
* @example 150
*/
fadeOutDuration: 150,
/**
* Disables hover events from opening the tooltip if set to true
* @option
* @example false
*/
disableHover: false,
/**
* Optional addtional classes to apply to the tooltip template on init.
* @option
* @example 'my-cool-tip-class'
*/
templateClasses: '',
/**
* Non-optional class added to tooltip templates. Foundation default is 'tooltip'.
* @option
* @example 'tooltip'
*/
tooltipClass: 'tooltip',
/**
* Class applied to the tooltip anchor element.
* @option
* @example 'has-tip'
*/
triggerClass: 'has-tip',
/**
* Minimum breakpoint size at which to open the tooltip.
* @option
* @example 'small'
*/
showOn: 'small',
/**
* Custom template to be used to generate markup for tooltip.
* @option
* @example '&lt;div class="tooltip"&gt;&lt;/div&gt;'
*/
template: '',
/**
* Text displayed in the tooltip template on open.
* @option
* @example 'Some cool space fact here.'
*/
tipText: '',
touchCloseText: 'Tap to close.',
/**
* Allows the tooltip to remain open if triggered with a click or touch event.
* @option
* @example true
*/
clickOpen: true,
/**
* Additional positioning classes, set by the JS
* @option
* @example 'top'
*/
positionClass: '',
/**
* Distance, in pixels, the template should push away from the anchor on the Y axis.
* @option
* @example 10
*/
vOffset: 10,
/**
* Distance, in pixels, the template should push away from the anchor on the X axis, if aligned to a side.
* @option
* @example 12
*/
hOffset: 12
};
/**
* Initializes the tooltip by setting the creating the tip element, adding it's text, setting private variables and setting attributes on the anchor.
* @private
*/
Tooltip.prototype._init = function(){
var elemId = this.$element.attr('aria-describedby') || Foundation.GetYoDigits(6, 'tooltip');
this.options.positionClass = this._getPositionClass(this.$element);
this.options.tipText = this.options.tipText || this.$element.attr('title');
this.template = this.options.template ? $(this.options.template) : this._buildTemplate(elemId);
this.template.appendTo(document.body)
.text(this.options.tipText)
.hide();
this.$element.attr({
'title': '',
'aria-describedby': elemId,
'data-yeti-box': elemId,
'data-toggle': elemId,
'data-resize': elemId
}).addClass(this.triggerClass);
//helper variables to track movement on collisions
this.usedPositions = [];
this.counter = 4;
this.classChanged = false;
this._events();
};
/**
* Grabs the current positioning class, if present, and returns the value or an empty string.
* @private
*/
Tooltip.prototype._getPositionClass = function(element){
if(!element){ return ''; }
// var position = element.attr('class').match(/top|left|right/g);
var position = element[0].className.match(/(top|left|right)/g);
position = position ? position[0] : '';
return position;
};
/**
* builds the tooltip element, adds attributes, and returns the template.
* @private
*/
Tooltip.prototype._buildTemplate = function(id){
var templateClasses = (this.options.tooltipClass + ' ' + this.options.positionClass).trim();
var $template = $('<div></div>').addClass(templateClasses).attr({
'role': 'tooltip',
'aria-hidden': true,
'data-is-active': false,
'data-is-focus': false,
'id': id
});
return $template;
};
/**
* Function that gets called if a collision event is detected.
* @param {String} position - positioning class to try
* @private
*/
Tooltip.prototype._reposition = function(position){
this.usedPositions.push(position ? position : 'bottom');
//default, try switching to opposite side
if(!position && (this.usedPositions.indexOf('top') < 0)){
this.template.addClass('top');
}else if(position === 'top' && (this.usedPositions.indexOf('bottom') < 0)){
this.template.removeClass(position);
}else if(position === 'left' && (this.usedPositions.indexOf('right') < 0)){
this.template.removeClass(position)
.addClass('right');
}else if(position === 'right' && (this.usedPositions.indexOf('left') < 0)){
this.template.removeClass(position)
.addClass('left');
}
//if default change didn't work, try bottom or left first
else if(!position && (this.usedPositions.indexOf('top') > -1) && (this.usedPositions.indexOf('left') < 0)){
this.template.addClass('left');
}else if(position === 'top' && (this.usedPositions.indexOf('bottom') > -1) && (this.usedPositions.indexOf('left') < 0)){
this.template.removeClass(position)
.addClass('left');
}else if(position === 'left' && (this.usedPositions.indexOf('right') > -1) && (this.usedPositions.indexOf('bottom') < 0)){
this.template.removeClass(position);
}else if(position === 'right' && (this.usedPositions.indexOf('left') > -1) && (this.usedPositions.indexOf('bottom') < 0)){
this.template.removeClass(position);
}
//if nothing cleared, set to bottom
else{
this.template.removeClass(position);
}
this.classChanged = true;
this.counter--;
};
/**
* sets the position class of an element and recursively calls itself until there are no more possible positions to attempt, or the tooltip element is no longer colliding.
* if the tooltip is larger than the screen width, default to full width - any user selected margin
* @private
*/
Tooltip.prototype._setPosition = function(){
var position = this._getPositionClass(this.template),
$tipDims = Foundation.Box.GetDimensions(this.template),
$anchorDims = Foundation.Box.GetDimensions(this.$element),
direction = (position === 'left' ? 'left' : ((position === 'right') ? 'left' : 'top')),
param = (direction === 'top') ? 'height' : 'width',
offset = (param === 'height') ? this.options.vOffset : this.options.hOffset,
_this = this;
if(($tipDims.width >= $tipDims.windowDims.width) || (!this.counter && !Foundation.Box.ImNotTouchingYou(this.template))){
this.template.offset(Foundation.Box.GetOffsets(this.template, this.$element, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({
// this.$element.offset(Foundation.GetOffsets(this.template, this.$element, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({
'width': $anchorDims.windowDims.width - (this.options.hOffset * 2),
'height': 'auto'
});
return false;
}
this.template.offset(Foundation.Box.GetOffsets(this.template, this.$element,'center ' + (position || 'bottom'), this.options.vOffset, this.options.hOffset));
while(!Foundation.Box.ImNotTouchingYou(this.template) && this.counter){
this._reposition(position);
this._setPosition();
}
};
/**
* reveals the tooltip, and fires an event to close any other open tooltips on the page
* @fires Closeme#tooltip
* @fires Tooltip#show
* @function
*/
Tooltip.prototype.show = function(){
if(this.options.showOn !== 'all' && !Foundation.MediaQuery.atLeast(this.options.showOn)){
// console.error('The screen is too small to display this tooltip');
return false;
}
var _this = this;
this.template.css('visibility', 'hidden').show();
this._setPosition();
/**
* Fires to close all other open tooltips on the page
* @event Closeme#tooltip
*/
this.$element.trigger('closeme.zf.tooltip', this.template.attr('id'));
this.template.attr({
'data-is-active': true,
'aria-hidden': false
});
_this.isActive = true;
// console.log(this.template);
this.template.stop().hide().css('visibility', '').fadeIn(this.options.fadeInDuration, function(){
//maybe do stuff?
});
/**
* Fires when the tooltip is shown
* @event Tooltip#show
*/
this.$element.trigger('show.zf.tooltip');
};
/**
* Hides the current tooltip, and resets the positioning class if it was changed due to collision
* @fires Tooltip#hide
* @function
*/
Tooltip.prototype.hide = function(){
// console.log('hiding', this.$element.data('yeti-box'));
var _this = this;
this.template.stop().attr({
'aria-hidden': true,
'data-is-active': false
}).fadeOut(this.options.fadeOutDuration, function(){
_this.isActive = false;
_this.isClick = false;
if(_this.classChanged){
_this.template
.removeClass(_this._getPositionClass(_this.template))
.addClass(_this.options.positionClass);
_this.usedPositions = [];
_this.counter = 4;
_this.classChanged = false;
}
});
/**
* fires when the tooltip is hidden
* @event Tooltip#hide
*/
this.$element.trigger('hide.zf.tooltip');
};
/**
* adds event listeners for the tooltip and its anchor
* TODO combine some of the listeners like focus and mouseenter, etc.
* @private
*/
Tooltip.prototype._events = function(){
var _this = this;
var $template = this.template;
var isFocus = false;
if(!this.options.disableHover){
this.$element
.on('mouseenter.zf.tooltip', function(e){
if(!_this.isActive){
_this.timeout = setTimeout(function(){
_this.show();
}, _this.options.hoverDelay);
}
})
.on('mouseleave.zf.tooltip', function(e){
clearTimeout(_this.timeout);
if(!isFocus || (!_this.isClick && _this.options.clickOpen)){
_this.hide();
}
});
}
if(this.options.clickOpen){
this.$element.on('mousedown.zf.tooltip', function(e){
e.stopImmediatePropagation();
if(_this.isClick){
_this.hide();
// _this.isClick = false;
}else{
_this.isClick = true;
if((_this.options.disableHover || !_this.$element.attr('tabindex')) && !_this.isActive){
_this.show();
}
}
});
}
if(!this.options.disableForTouch){
this.$element
.on('tap.zf.tooltip touchend.zf.tooltip', function(e){
_this.isActive ? _this.hide() : _this.show();
});
}
this.$element.on({
// 'toggle.zf.trigger': this.toggle.bind(this),
// 'close.zf.trigger': this.hide.bind(this)
'close.zf.trigger': this.hide.bind(this)
});
this.$element
.on('focus.zf.tooltip', function(e){
isFocus = true;
// console.log(_this.isClick);
if(_this.isClick){
return false;
}else{
// $(window)
_this.show();
}
})
.on('focusout.zf.tooltip', function(e){
isFocus = false;
_this.isClick = false;
_this.hide();
})
.on('resizeme.zf.trigger', function(){
if(_this.isActive){
_this._setPosition();
}
});
};
/**
* adds a toggle method, in addition to the static show() & hide() functions
* @function
*/
Tooltip.prototype.toggle = function(){
if(this.isActive){
this.hide();
}else{
this.show();
}
};
/**
* Destroys an instance of tooltip, removes template element from the view.
* @function
*/
Tooltip.prototype.destroy = function(){
this.$element.attr('title', this.template.text())
.off('.zf.trigger .zf.tootip')
// .removeClass('has-tip')
.removeAttr('aria-describedby')
.removeAttr('data-yeti-box')
.removeAttr('data-toggle')
.removeAttr('data-resize');
this.template.remove();
Foundation.unregisterPlugin(this);
};
/**
* TODO utilize resize event trigger
*/
Foundation.plugin(Tooltip, 'Tooltip');
}(jQuery, window.document, window.Foundation);

169
app/vendor/foundation/js/foundation.util.box.js vendored Normal file
View File

@ -0,0 +1,169 @@
!function(Foundation, window){
/**
* Compares the dimensions of an element to a container and determines collision events with container.
* @function
* @param {jQuery} element - jQuery object to test for collisions.
* @param {jQuery} parent - jQuery object to use as bounding container.
* @param {Boolean} lrOnly - set to true to check left and right values only.
* @param {Boolean} tbOnly - set to true to check top and bottom values only.
* @default if no parent object passed, detects collisions with `window`.
* @returns {Boolean} - true if collision free, false if a collision in any direction.
*/
var ImNotTouchingYou = function(element, parent, lrOnly, tbOnly){
var eleDims = GetDimensions(element),
top, bottom, left, right;
if(parent){
var parDims = GetDimensions(parent);
bottom = (eleDims.offset.top + eleDims.height <= parDims.height + parDims.offset.top);
top = (eleDims.offset.top >= parDims.offset.top);
left = (eleDims.offset.left >= parDims.offset.left);
right = (eleDims.offset.left + eleDims.width <= parDims.width);
}else{
bottom = (eleDims.offset.top + eleDims.height <= eleDims.windowDims.height + eleDims.windowDims.offset.top);
top = (eleDims.offset.top >= eleDims.windowDims.offset.top);
left = (eleDims.offset.left >= eleDims.windowDims.offset.left);
right = (eleDims.offset.left + eleDims.width <= eleDims.windowDims.width);
}
var allDirs = [bottom, top, left, right];
if(lrOnly){ return left === right === true; }
if(tbOnly){ return top === bottom === true; }
return allDirs.indexOf(false) === -1;
};
/**
* Uses native methods to return an object of dimension values.
* @function
* @param {jQuery || HTML} element - jQuery object or DOM element for which to get the dimensions. Can be any element other that document or window.
* @returns {Object} - nested object of integer pixel values
* TODO - if element is window, return only those values.
*/
var GetDimensions = function(elem, test){
elem = elem.length ? elem[0] : elem;
if(elem === window || elem === document){ throw new Error("I'm sorry, Dave. I'm afraid I can't do that."); }
var rect = elem.getBoundingClientRect(),
parRect = elem.parentNode.getBoundingClientRect(),
winRect = document.body.getBoundingClientRect(),
winY = window.pageYOffset,
winX = window.pageXOffset;
return {
width: rect.width,
height: rect.height,
offset: {
top: rect.top + winY,
left: rect.left + winX
},
parentDims: {
width: parRect.width,
height: parRect.height,
offset: {
top: parRect.top + winY,
left: parRect.left + winX
}
},
windowDims: {
width: winRect.width,
height: winRect.height,
offset: {
top: winY,
left: winX
}
}
};
};
/**
* Returns an object of top and left integer pixel values for dynamically rendered elements,
* such as: Tooltip, Reveal, and Dropdown
* @function
* @param {jQuery} element - jQuery object for the element being positioned.
* @param {jQuery} anchor - jQuery object for the element's anchor point.
* @param {String} position - a string relating to the desired position of the element, relative to it's anchor
* @param {Number} vOffset - integer pixel value of desired vertical separation between anchor and element.
* @param {Number} hOffset - integer pixel value of desired horizontal separation between anchor and element.
* @param {Boolean} isOverflow - if a collision event is detected, sets to true to default the element to full width - any desired offset.
* TODO alter/rewrite to work with `em` values as well/instead of pixels
*/
var GetOffsets = function(element, anchor, position, vOffset, hOffset, isOverflow){
var $eleDims = GetDimensions(element),
// var $eleDims = GetDimensions(element),
$anchorDims = anchor ? GetDimensions(anchor) : null;
// $anchorDims = anchor ? GetDimensions(anchor) : null;
switch(position){
case 'top':
return {
left: $anchorDims.offset.left,
top: $anchorDims.offset.top - ($eleDims.height + vOffset)
};
break;
case 'left':
return {
left: $anchorDims.offset.left - ($eleDims.width + hOffset),
top: $anchorDims.offset.top
};
break;
case 'right':
return {
left: $anchorDims.offset.left + $anchorDims.width + hOffset,
top: $anchorDims.offset.top
};
break;
case 'center top':
return {
left: ($anchorDims.offset.left + ($anchorDims.width / 2)) - ($eleDims.width / 2),
top: $anchorDims.offset.top - ($eleDims.height + vOffset)
};
break;
case 'center bottom':
return {
left: isOverflow ? hOffset : (($anchorDims.offset.left + ($anchorDims.width / 2)) - ($eleDims.width / 2)),
top: $anchorDims.offset.top + $anchorDims.height + vOffset
};
break;
case 'center left':
return {
left: $anchorDims.offset.left - ($eleDims.width + hOffset),
top: ($anchorDims.offset.top + ($anchorDims.height / 2)) - ($eleDims.height / 2)
};
break;
case 'center right':
return {
left: $anchorDims.offset.left + $anchorDims.width + hOffset + 1,
top: ($anchorDims.offset.top + ($anchorDims.height / 2)) - ($eleDims.height / 2)
};
break;
case 'center':
return {
left: ($eleDims.windowDims.offset.left + ($eleDims.windowDims.width / 2)) - ($eleDims.width / 2),
top: ($eleDims.windowDims.offset.top + ($eleDims.windowDims.height / 2)) - ($eleDims.height / 2)
};
break;
case 'reveal':
return {
left: ($eleDims.windowDims.width - $eleDims.width) / 2,
top: $eleDims.windowDims.offset.top + vOffset
};
case 'reveal full':
return {
left: $eleDims.windowDims.offset.left,
top: $eleDims.windowDims.offset.top
};
break;
default:
return {
left: $anchorDims.offset.left,
top: $anchorDims.offset.top + $anchorDims.height + vOffset
};
}
};
Foundation.Box = {
ImNotTouchingYou: ImNotTouchingYou,
GetDimensions: GetDimensions,
GetOffsets: GetOffsets
};
}(window.Foundation, window);

115
app/vendor/foundation/js/foundation.util.keyboard.js vendored Normal file
View File

@ -0,0 +1,115 @@
/*******************************************
* *
* This util was created by Marius Olbertz *
* Please thank Marius on GitHub /owlbertz *
* or the web http://www.mariusolbertz.de/ *
* *
******************************************/
!function($, Foundation){
'use strict';
Foundation.Keyboard = {};
var keyCodes = {
9: 'TAB',
13: 'ENTER',
27: 'ESCAPE',
32: 'SPACE',
37: 'ARROW_LEFT',
38: 'ARROW_UP',
39: 'ARROW_RIGHT',
40: 'ARROW_DOWN'
};
/*
* Constants for easier comparing.
* Can be used like Foundation.parseKey(event) === Foundation.keys.SPACE
*/
var keys = (function(kcs) {
var k = {};
for (var kc in kcs) k[kcs[kc]] = kcs[kc];
return k;
})(keyCodes);
Foundation.Keyboard.keys = keys;
/**
* Parses the (keyboard) event and returns a String that represents its key
* Can be used like Foundation.parseKey(event) === Foundation.keys.SPACE
* @param {Event} event - the event generated by the event handler
* @return String key - String that represents the key pressed
*/
var parseKey = function(event) {
var key = keyCodes[event.which || event.keyCode] || String.fromCharCode(event.which).toUpperCase();
if (event.shiftKey) key = 'SHIFT_' + key;
if (event.ctrlKey) key = 'CTRL_' + key;
if (event.altKey) key = 'ALT_' + key;
return key;
};
Foundation.Keyboard.parseKey = parseKey;
// plain commands per component go here, ltr and rtl are merged based on orientation
var commands = {};
/**
* Handles the given (keyboard) event
* @param {Event} event - the event generated by the event handler
* @param {String} component - Foundation component's name, e.g. Slider or Reveal
* @param {Objects} functions - collection of functions that are to be executed
*/
var handleKey = function(event, component, functions) {
var commandList = commands[component],
keyCode = parseKey(event),
cmds,
command,
fn;
if (!commandList) return console.warn('Component not defined!');
if (typeof commandList.ltr === 'undefined') { // this component does not differentiate between ltr and rtl
cmds = commandList; // use plain list
} else { // merge ltr and rtl: if document is rtl, rtl overwrites ltr and vice versa
if (Foundation.rtl()) cmds = $.extend({}, commandList.ltr, commandList.rtl);
else cmds = $.extend({}, commandList.rtl, commandList.ltr);
}
command = cmds[keyCode];
fn = functions[command];
if (fn && typeof fn === 'function') { // execute function if exists
fn.apply();
if (functions.handled || typeof functions.handled === 'function') { // execute function when event was handled
functions.handled.apply();
}
} else {
if (functions.unhandled || typeof functions.unhandled === 'function') { // execute function when event was not handled
functions.unhandled.apply();
}
}
};
Foundation.Keyboard.handleKey = handleKey;
/**
* Finds all focusable elements within the given `$element`
* @param {jQuery} $element - jQuery object to search within
* @return {jQuery} $focusable - all focusable elements within `$element`
*/
var findFocusable = function($element) {
return $element.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]').filter(function() {
if (!$(this).is(':visible') || $(this).attr('tabindex') < 0) { return false; } //only have visible elements and those that have a tabindex greater or equal 0
return true;
});
};
Foundation.Keyboard.findFocusable = findFocusable;
/**
* Returns the component name name
* @param {Object} component - Foundation component, e.g. Slider or Reveal
* @return String componentName
*/
var register = function(componentName, cmds) {
commands[componentName] = cmds;
};
Foundation.Keyboard.register = register;
}(jQuery, window.Foundation);

210
app/vendor/foundation/js/foundation.util.mediaQuery.js vendored Normal file
View File

@ -0,0 +1,210 @@
!function($, Foundation) {
// Default set of media queries
var defaultQueries = {
'default' : 'only screen',
landscape : 'only screen and (orientation: landscape)',
portrait : 'only screen and (orientation: portrait)',
retina : 'only screen and (-webkit-min-device-pixel-ratio: 2),' +
'only screen and (min--moz-device-pixel-ratio: 2),' +
'only screen and (-o-min-device-pixel-ratio: 2/1),' +
'only screen and (min-device-pixel-ratio: 2),' +
'only screen and (min-resolution: 192dpi),' +
'only screen and (min-resolution: 2dppx)'
};
var MediaQuery = {
queries: [],
current: '',
/**
* Checks if the screen is at least as wide as a breakpoint.
* @function
* @param {String} size - Name of the breakpoint to check.
* @returns {Boolean} `true` if the breakpoint matches, `false` if it's smaller.
*/
atLeast: function(size) {
var query = this.get(size);
if (query) {
return window.matchMedia(query).matches;
}
return false;
},
/**
* Gets the media query of a breakpoint.
* @function
* @param {String} size - Name of the breakpoint to get.
* @returns {String|null} - The media query of the breakpoint, or `null` if the breakpoint doesn't exist.
*/
get: function(size) {
for (var i in this.queries) {
var query = this.queries[i];
if (size === query.name) return query.value;
}
return null;
},
/**
* Initializes the media query helper, by extracting the breakpoint list from the CSS and activating the breakpoint watcher.
* @function
* @private
*/
_init: function() {
var self = this;
var extractedStyles = $('.foundation-mq').css('font-family');
var namedQueries;
namedQueries = parseStyleToObject(extractedStyles);
for (var key in namedQueries) {
self.queries.push({
name: key,
value: 'only screen and (min-width: ' + namedQueries[key] + ')'
});
}
this.current = this._getCurrentSize();
this._watcher();
// Extend default queries
// namedQueries = $.extend(defaultQueries, namedQueries);
},
/**
* Gets the current breakpoint name by testing every breakpoint and returning the last one to match (the biggest one).
* @function
* @private
* @returns {String} Name of the current breakpoint.
*/
_getCurrentSize: function() {
var matched;
for (var i in this.queries) {
var query = this.queries[i];
if (window.matchMedia(query.value).matches) {
matched = query;
}
}
if(typeof matched === 'object') {
return matched.name;
} else {
return matched;
}
},
/**
* Activates the breakpoint watcher, which fires an event on the window whenever the breakpoint changes.
* @function
* @private
*/
_watcher: function() {
var _this = this;
$(window).on('resize.zf.mediaquery', function() {
var newSize = _this._getCurrentSize();
if (newSize !== _this.current) {
// Broadcast the media query change on the window
$(window).trigger('changed.zf.mediaquery', [newSize, _this.current]);
// Change the current media query
_this.current = newSize;
}
});
}
};
Foundation.MediaQuery = MediaQuery;
// matchMedia() polyfill - Test a CSS media type/query in JS.
// Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license
window.matchMedia || (window.matchMedia = function() {
'use strict';
// For browsers that support matchMedium api such as IE 9 and webkit
var styleMedia = (window.styleMedia || window.media);
// For those that don't support matchMedium
if (!styleMedia) {
var style = document.createElement('style'),
script = document.getElementsByTagName('script')[0],
info = null;
style.type = 'text/css';
style.id = 'matchmediajs-test';
script.parentNode.insertBefore(style, script);
// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
styleMedia = {
matchMedium: function(media) {
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.textContent = text;
}
// Test if media query is true or false
return info.width === '1px';
}
};
}
return function(media) {
return {
matches: styleMedia.matchMedium(media || 'all'),
media: media || 'all'
};
};
}());
// Thank you: https://github.com/sindresorhus/query-string
function parseStyleToObject(str) {
var styleObject = {};
if (typeof str !== 'string') {
return styleObject;
}
str = str.trim().slice(1, -1); // browsers re-quote string style values
if (!str) {
return styleObject;
}
styleObject = str.split('&').reduce(function(ret, param) {
var parts = param.replace(/\+/g, ' ').split('=');
var key = parts[0];
var val = parts[1];
key = decodeURIComponent(key);
// missing `=` should be `null`:
// http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
val = val === undefined ? null : decodeURIComponent(val);
if (!ret.hasOwnProperty(key)) {
ret[key] = val;
} else if (Array.isArray(ret[key])) {
ret[key].push(val);
} else {
ret[key] = [ret[key], val];
}
return ret;
}, {});
return styleObject;
}
}(jQuery, Foundation);

89
app/vendor/foundation/js/foundation.util.motion.js vendored Normal file
View File

@ -0,0 +1,89 @@
/**
* Motion module.
* @module foundation.motion
*/
!function($, Foundation) {
var initClasses = ['mui-enter', 'mui-leave'];
var activeClasses = ['mui-enter-active', 'mui-leave-active'];
function animate(isIn, element, animation, cb) {
element = $(element).eq(0);
if (!element.length) return;
var initClass = isIn ? initClasses[0] : initClasses[1];
var activeClass = isIn ? activeClasses[0] : activeClasses[1];
// Set up the animation
reset();
element.addClass(animation)
.css('transition', 'none');
// .addClass(initClass);
// if(isIn) element.show();
requestAnimationFrame(function() {
element.addClass(initClass);
if (isIn) element.show();
});
// Start the animation
requestAnimationFrame(function() {
element[0].offsetWidth;
element.css('transition', '');
element.addClass(activeClass);
});
// Move(500, element, function(){
// // element[0].offsetWidth;
// element.css('transition', '');
// element.addClass(activeClass);
// });
// Clean up the animation when it finishes
element.one(Foundation.transitionend(element), finish);//.one('finished.zf.animate', finish);
// Hides the element (for out animations), resets the element, and runs a callback
function finish() {
if (!isIn) element.hide();
reset();
if (cb) cb.apply(element);
}
// Resets transitions and removes motion-specific classes
function reset() {
element[0].style.transitionDuration = 0;
element.removeClass(initClass + ' ' + activeClass + ' ' + animation);
}
}
var Motion = {
animateIn: function(element, animation, /*duration,*/ cb) {
animate(true, element, animation, cb);
},
animateOut: function(element, animation, /*duration,*/ cb) {
animate(false, element, animation, cb);
}
};
var Move = function(duration, elem, fn){
var anim, prog, start = null;
// console.log('called');
function move(ts){
if(!start) start = window.performance.now();
// console.log(start, ts);
prog = ts - start;
fn.apply(elem);
if(prog < duration){ anim = window.requestAnimationFrame(move, elem); }
else{
window.cancelAnimationFrame(anim);
elem.trigger('finished.zf.animate', [elem]).triggerHandler('finished.zf.animate', [elem]);
}
}
anim = window.requestAnimationFrame(move);
};
Foundation.Move = Move;
Foundation.Motion = Motion;
}(jQuery, Foundation);

64
app/vendor/foundation/js/foundation.util.nest.js vendored Normal file
View File

@ -0,0 +1,64 @@
!function($, Foundation){
'use strict';
Foundation.Nest = {
Feather: function(menu, type){
menu.attr('role', 'menubar');
type = type || 'zf';
var items = menu.find('li').attr({'role': 'menuitem'}),
subMenuClass = 'is-' + type + '-submenu',
subItemClass = subMenuClass + '-item',
hasSubClass = 'is-' + type + '-submenu-parent';
menu.find('a:first').attr('tabindex', 0);
items.each(function(){
var $item = $(this),
$sub = $item.children('ul');
if($sub.length){
$item.addClass('has-submenu ' + hasSubClass)
.attr({
'aria-haspopup': true,
'aria-selected': false,
'aria-expanded': false,
'aria-label': $item.children('a:first').text()
});
$sub.addClass('submenu ' + subMenuClass)
.attr({
'data-submenu': '',
'aria-hidden': true,
'role': 'menu'
});
}
if($item.parent('[data-submenu]').length){
$item.addClass('is-submenu-item ' + subItemClass);
}
});
return;
},
Burn: function(menu, type){
var items = menu.find('li').removeAttr('tabindex'),
subMenuClass = 'is-' + type + '-submenu',
subItemClass = subMenuClass + '-item',
hasSubClass = 'is-' + type + '-submenu-parent';
// menu.find('.is-active').removeClass('is-active');
menu.find('*')
// menu.find('.' + subMenuClass + ', .' + subItemClass + ', .is-active, .has-submenu, .is-submenu-item, .submenu, [data-submenu]')
.removeClass(subMenuClass + ' ' + subItemClass + ' ' + hasSubClass + ' has-submenu is-submenu-item submenu is-active')
.removeAttr('data-submenu').css('display', '');
// console.log( menu.find('.' + subMenuClass + ', .' + subItemClass + ', .has-submenu, .is-submenu-item, .submenu, [data-submenu]')
// .removeClass(subMenuClass + ' ' + subItemClass + ' has-submenu is-submenu-item submenu')
// .removeAttr('data-submenu'));
// items.each(function(){
// var $item = $(this),
// $sub = $item.children('ul');
// if($item.parent('[data-submenu]').length){
// $item.removeClass('is-submenu-item ' + subItemClass);
// }
// if($sub.length){
// $item.removeClass('has-submenu');
// $sub.removeClass('submenu ' + subMenuClass).removeAttr('data-submenu');
// }
// });
}
};
}(jQuery, window.Foundation);

78
app/vendor/foundation/js/foundation.util.timerAndImageLoader.js vendored Normal file
View File

@ -0,0 +1,78 @@
!function($, Foundation){
'use strict';
var Timer = function(elem, options, cb){
var _this = this,
duration = options.duration,//options is an object for easily adding features later.
nameSpace = Object.keys(elem.data())[0] || 'timer',
remain = -1,
start,
timer;
this.restart = function(){
remain = -1;
clearTimeout(timer);
this.start();
};
this.start = function(){
// if(!elem.data('paused')){ return false; }//maybe implement this sanity check if used for other things.
clearTimeout(timer);
remain = remain <= 0 ? duration : remain;
elem.data('paused', false);
start = Date.now();
timer = setTimeout(function(){
if(options.infinite){
_this.restart();//rerun the timer.
}
cb();
}, remain);
elem.trigger('timerstart.zf.' + nameSpace);
};
this.pause = function(){
//if(elem.data('paused')){ return false; }//maybe implement this sanity check if used for other things.
clearTimeout(timer);
elem.data('paused', true);
var end = Date.now();
remain = remain - (end - start);
elem.trigger('timerpaused.zf.' + nameSpace);
};
};
/**
* Runs a callback function when images are fully loaded.
* @param {Object} images - Image(s) to check if loaded.
* @param {Func} callback - Function to execute when image is fully loaded.
*/
var onImagesLoaded = function(images, callback){
var self = this,
unloaded = images.length;
if (unloaded === 0) {
callback();
}
var singleImageLoaded = function() {
unloaded--;
if (unloaded === 0) {
callback();
}
};
images.each(function() {
if (this.complete) {
singleImageLoaded();
}
else if (typeof this.naturalWidth !== 'undefined' && this.naturalWidth > 0) {
singleImageLoaded();
}
else {
$(this).one('load', function() {
singleImageLoaded();
});
}
});
};
Foundation.Timer = Timer;
Foundation.onImagesLoaded = onImagesLoaded;
}(jQuery, window.Foundation);

339
app/vendor/foundation/js/foundation.util.touch.js vendored Normal file
View File

@ -0,0 +1,339 @@
//**************************************************
//**Work inspired by multiple jquery swipe plugins**
//**Done by Yohai Ararat ***************************
//**************************************************
(function($) {
$.spotSwipe = {
version: '1.0.0',
enabled: 'ontouchstart' in document.documentElement,
preventDefault: false,
moveThreshold: 75,
timeThreshold: 200
};
var startPosX,
startPosY,
startTime,
elapsedTime,
isMoving = false;
function onTouchEnd() {
// alert(this);
this.removeEventListener('touchmove', onTouchMove);
this.removeEventListener('touchend', onTouchEnd);
isMoving = false;
}
function onTouchMove(e) {
if ($.spotSwipe.preventDefault) { e.preventDefault(); }
if(isMoving) {
var x = e.touches[0].pageX;
var y = e.touches[0].pageY;
var dx = startPosX - x;
var dy = startPosY - y;
var dir;
elapsedTime = new Date().getTime() - startTime;
if(Math.abs(dx) >= $.spotSwipe.moveThreshold && elapsedTime <= $.spotSwipe.timeThreshold) {
dir = dx > 0 ? 'left' : 'right';
}
// else if(Math.abs(dy) >= $.spotSwipe.moveThreshold && elapsedTime <= $.spotSwipe.timeThreshold) {
// dir = dy > 0 ? 'down' : 'up';
// }
if(dir) {
e.preventDefault();
onTouchEnd.call(this);
$(this).trigger('swipe', dir).trigger('swipe' + dir);
}
}
}
function onTouchStart(e) {
if (e.touches.length == 1) {
startPosX = e.touches[0].pageX;
startPosY = e.touches[0].pageY;
isMoving = true;
startTime = new Date().getTime();
this.addEventListener('touchmove', onTouchMove, false);
this.addEventListener('touchend', onTouchEnd, false);
}
}
function init() {
this.addEventListener && this.addEventListener('touchstart', onTouchStart, false);
}
function teardown() {
this.removeEventListener('touchstart', onTouchStart);
}
$.event.special.swipe = { setup: init };
$.each(['left', 'up', 'down', 'right'], function () {
$.event.special['swipe' + this] = { setup: function(){
$(this).on('swipe', $.noop);
} };
});
})(jQuery);
/****************************************************
* Method for adding psuedo drag events to elements *
***************************************************/
!function($){
$.fn.addTouch = function(){
this.each(function(i,el){
$(el).bind('touchstart touchmove touchend touchcancel',function(){
//we pass the original event object because the jQuery event
//object is normalized to w3c specs and does not provide the TouchList
handleTouch(event);
});
});
var handleTouch = function(event){
var touches = event.changedTouches,
first = touches[0],
eventTypes = {
touchstart: 'mousedown',
touchmove: 'mousemove',
touchend: 'mouseup'
},
type = eventTypes[event.type];
var simulatedEvent = document.createEvent('MouseEvent');
simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
};
};
}(jQuery);
//**********************************
//**From the jQuery Mobile Library**
//**need to recreate functionality**
//**and try to improve if possible**
//**********************************
/* Removing the jQuery function ****
************************************
(function( $, window, undefined ) {
var $document = $( document ),
// supportTouch = $.mobile.support.touch,
touchStartEvent = 'touchstart'//supportTouch ? "touchstart" : "mousedown",
touchStopEvent = 'touchend'//supportTouch ? "touchend" : "mouseup",
touchMoveEvent = 'touchmove'//supportTouch ? "touchmove" : "mousemove";
// setup new event shortcuts
$.each( ( "touchstart touchmove touchend " +
"swipe swipeleft swiperight" ).split( " " ), function( i, name ) {
$.fn[ name ] = function( fn ) {
return fn ? this.bind( name, fn ) : this.trigger( name );
};
// jQuery < 1.8
if ( $.attrFn ) {
$.attrFn[ name ] = true;
}
});
function triggerCustomEvent( obj, eventType, event, bubble ) {
var originalType = event.type;
event.type = eventType;
if ( bubble ) {
$.event.trigger( event, undefined, obj );
} else {
$.event.dispatch.call( obj, event );
}
event.type = originalType;
}
// also handles taphold
// Also handles swipeleft, swiperight
$.event.special.swipe = {
// More than this horizontal displacement, and we will suppress scrolling.
scrollSupressionThreshold: 30,
// More time than this, and it isn't a swipe.
durationThreshold: 1000,
// Swipe horizontal displacement must be more than this.
horizontalDistanceThreshold: window.devicePixelRatio >= 2 ? 15 : 30,
// Swipe vertical displacement must be less than this.
verticalDistanceThreshold: window.devicePixelRatio >= 2 ? 15 : 30,
getLocation: function ( event ) {
var winPageX = window.pageXOffset,
winPageY = window.pageYOffset,
x = event.clientX,
y = event.clientY;
if ( event.pageY === 0 && Math.floor( y ) > Math.floor( event.pageY ) ||
event.pageX === 0 && Math.floor( x ) > Math.floor( event.pageX ) ) {
// iOS4 clientX/clientY have the value that should have been
// in pageX/pageY. While pageX/page/ have the value 0
x = x - winPageX;
y = y - winPageY;
} else if ( y < ( event.pageY - winPageY) || x < ( event.pageX - winPageX ) ) {
// Some Android browsers have totally bogus values for clientX/Y
// when scrolling/zooming a page. Detectable since clientX/clientY
// should never be smaller than pageX/pageY minus page scroll
x = event.pageX - winPageX;
y = event.pageY - winPageY;
}
return {
x: x,
y: y
};
},
start: function( event ) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] : event,
location = $.event.special.swipe.getLocation( data );
return {
time: ( new Date() ).getTime(),
coords: [ location.x, location.y ],
origin: $( event.target )
};
},
stop: function( event ) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] : event,
location = $.event.special.swipe.getLocation( data );
return {
time: ( new Date() ).getTime(),
coords: [ location.x, location.y ]
};
},
handleSwipe: function( start, stop, thisObject, origTarget ) {
if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
var direction = start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight";
triggerCustomEvent( thisObject, "swipe", $.Event( "swipe", { target: origTarget, swipestart: start, swipestop: stop }), true );
triggerCustomEvent( thisObject, direction,$.Event( direction, { target: origTarget, swipestart: start, swipestop: stop } ), true );
return true;
}
return false;
},
// This serves as a flag to ensure that at most one swipe event event is
// in work at any given time
eventInProgress: false,
setup: function() {
var events,
thisObject = this,
$this = $( thisObject ),
context = {};
// Retrieve the events data for this element and add the swipe context
events = $.data( this, "mobile-events" );
if ( !events ) {
events = { length: 0 };
$.data( this, "mobile-events", events );
}
events.length++;
events.swipe = context;
context.start = function( event ) {
// Bail if we're already working on a swipe event
if ( $.event.special.swipe.eventInProgress ) {
return;
}
$.event.special.swipe.eventInProgress = true;
var stop,
start = $.event.special.swipe.start( event ),
origTarget = event.target,
emitted = false;
context.move = function( event ) {
if ( !start || event.isDefaultPrevented() ) {
return;
}
stop = $.event.special.swipe.stop( event );
if ( !emitted ) {
emitted = $.event.special.swipe.handleSwipe( start, stop, thisObject, origTarget );
if ( emitted ) {
// Reset the context to make way for the next swipe event
$.event.special.swipe.eventInProgress = false;
}
}
// prevent scrolling
if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.scrollSupressionThreshold ) {
event.preventDefault();
}
};
context.stop = function() {
emitted = true;
// Reset the context to make way for the next swipe event
$.event.special.swipe.eventInProgress = false;
$document.off( touchMoveEvent, context.move );
context.move = null;
};
$document.on( touchMoveEvent, context.move )
.one( touchStopEvent, context.stop );
};
$this.on( touchStartEvent, context.start );
},
teardown: function() {
var events, context;
events = $.data( this, "mobile-events" );
if ( events ) {
context = events.swipe;
delete events.swipe;
events.length--;
if ( events.length === 0 ) {
$.removeData( this, "mobile-events" );
}
}
if ( context ) {
if ( context.start ) {
$( this ).off( touchStartEvent, context.start );
}
if ( context.move ) {
$document.off( touchMoveEvent, context.move );
}
if ( context.stop ) {
$document.off( touchStopEvent, context.stop );
}
}
}
};
$.each({
swipeleft: "swipe.left",
swiperight: "swipe.right"
}, function( event, sourceEvent ) {
$.event.special[ event ] = {
setup: function() {
$( this ).bind( sourceEvent, $.noop );
},
teardown: function() {
$( this ).unbind( sourceEvent );
}
};
});
})( jQuery, this );
*/

222
app/vendor/foundation/js/foundation.util.triggers.js vendored Normal file
View File

@ -0,0 +1,222 @@
!function(Foundation, $) {
'use strict';
// Elements with [data-open] will reveal a plugin that supports it when clicked.
$(document).on('click.zf.trigger', '[data-open]', function() {
var id = $(this).data('open');
$('#' + id).triggerHandler('open.zf.trigger', [$(this)]);
});
// Elements with [data-close] will close a plugin that supports it when clicked.
// If used without a value on [data-close], the event will bubble, allowing it to close a parent component.
$(document).on('click.zf.trigger', '[data-close]', function() {
var id = $(this).data('close');
if (id) {
$('#' + id).triggerHandler('close.zf.trigger', [$(this)]);
}
else {
$(this).trigger('close.zf.trigger');
}
});
// Elements with [data-toggle] will toggle a plugin that supports it when clicked.
$(document).on('click.zf.trigger', '[data-toggle]', function() {
var id = $(this).data('toggle');
$('#' + id).triggerHandler('toggle.zf.trigger', [$(this)]);
});
// Elements with [data-closable] will respond to close.zf.trigger events.
$(document).on('close.zf.trigger', '[data-closable]', function() {
var animation = $(this).data('closable') || 'fade-out';
if(Foundation.Motion){
Foundation.Motion.animateOut($(this), animation, function() {
$(this).trigger('closed.zf');
});
}else{
$(this).fadeOut().trigger('closed.zf');
}
});
var MutationObserver = (function () {
var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
for (var i=0; i < prefixes.length; i++) {
if (prefixes[i] + 'MutationObserver' in window) {
return window[prefixes[i] + 'MutationObserver'];
}
}
return false;
}());
var checkListeners = function(){
eventsListener();
resizeListener();
scrollListener();
closemeListener();
};
/**
* Fires once after all other scripts have loaded
* @function
* @private
*/
$(window).load(function(){
checkListeners();
});
//******** only fires this function once on load, if there's something to watch ********
var closemeListener = function(pluginName){
var yetiBoxes = $('[data-yeti-box]'),
plugNames = ['dropdown', 'tooltip', 'reveal'];
if(pluginName){
if(typeof pluginName === 'string'){
plugNames.push(pluginName);
}else if(typeof pluginName === 'object' && typeof pluginName[0] === 'string'){
plugNames.concat(pluginName);
}else{
console.error('Plugin names must be strings');
}
}
if(yetiBoxes.length){
var listeners = plugNames.map(function(name){
return 'closeme.zf.' + name;
}).join(' ');
$(window).off(listeners).on(listeners, function(e, pluginId){
var plugin = e.namespace.split('.')[0];
var plugins = $('[data-' + plugin + ']').not('[data-yeti-box="' + pluginId + '"]');
plugins.each(function(){
var _this = $(this);
_this.triggerHandler('close.zf.trigger', [_this]);
});
});
}
};
var resizeListener = function(debounce){
var timer,
$nodes = $('[data-resize]');
if($nodes.length){
$(window).off('resize.zf.trigger')
.on('resize.zf.trigger', function(e) {
if (timer) { clearTimeout(timer); }
timer = setTimeout(function(){
if(!MutationObserver){//fallback for IE 9
$nodes.each(function(){
$(this).triggerHandler('resizeme.zf.trigger');
});
}
//trigger all listening elements and signal a resize event
$nodes.attr('data-events', "resize");
}, debounce || 10);//default time to emit resize event
});
}
};
var scrollListener = function(debounce){
var timer,
$nodes = $('[data-scroll]');
if($nodes.length){
$(window).off('scroll.zf.trigger')
.on('scroll.zf.trigger', function(e){
if(timer){ clearTimeout(timer); }
timer = setTimeout(function(){
if(!MutationObserver){//fallback for IE 9
$nodes.each(function(){
$(this).triggerHandler('scrollme.zf.trigger');
});
}
//trigger all listening elements and signal a scroll event
$nodes.attr('data-events', "scroll");
}, debounce || 10);//default time to emit scroll event
});
}
};
// function domMutationObserver(debounce) {
// // !!! This is coming soon and needs more work; not active !!! //
// var timer,
// nodes = document.querySelectorAll('[data-mutate]');
// //
// if (nodes.length) {
// // var MutationObserver = (function () {
// // var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
// // for (var i=0; i < prefixes.length; i++) {
// // if (prefixes[i] + 'MutationObserver' in window) {
// // return window[prefixes[i] + 'MutationObserver'];
// // }
// // }
// // return false;
// // }());
//
//
// //for the body, we need to listen for all changes effecting the style and class attributes
// var bodyObserver = new MutationObserver(bodyMutation);
// bodyObserver.observe(document.body, { attributes: true, childList: true, characterData: false, subtree:true, attributeFilter:["style", "class"]});
//
//
// //body callback
// function bodyMutation(mutate) {
// //trigger all listening elements and signal a mutation event
// if (timer) { clearTimeout(timer); }
//
// timer = setTimeout(function() {
// bodyObserver.disconnect();
// $('[data-mutate]').attr('data-events',"mutate");
// }, debounce || 150);
// }
// }
// }
var eventsListener = function() {
if(!MutationObserver){ return false; }
var nodes = document.querySelectorAll('[data-resize], [data-scroll], [data-mutate]');
//element callback
var listeningElementsMutation = function(mutationRecordsList) {
var $target = $(mutationRecordsList[0].target);
//trigger the event handler for the element depending on type
switch ($target.attr("data-events")) {
case "resize" :
$target.triggerHandler('resizeme.zf.trigger', [$target]);
break;
case "scroll" :
$target.triggerHandler('scrollme.zf.trigger', [$target, window.pageYOffset]);
break;
// case "mutate" :
// console.log('mutate', $target);
// $target.triggerHandler('mutate.zf.trigger');
//
// //make sure we don't get stuck in an infinite loop from sloppy codeing
// if ($target.index('[data-mutate]') == $("[data-mutate]").length-1) {
// domMutationObserver();
// }
// break;
default :
return false;
//nothing
}
}
if(nodes.length){
//for each element that needs to listen for resizing, scrolling, (or coming soon mutation) add a single observer
for (var i = 0; i <= nodes.length-1; i++) {
var elementObserver = new MutationObserver(listeningElementsMutation);
elementObserver.observe(nodes[i], { attributes: true, childList: false, characterData: false, subtree:false, attributeFilter:["data-events"]});
}
}
};
// ------------------------------------
// [PH]
// Foundation.CheckWatchers = checkWatchers;
Foundation.IHearYou = checkListeners;
// Foundation.ISeeYou = scrollListener;
// Foundation.IFeelYou = closemeListener;
}(window.Foundation, window.jQuery);

626
app/vendor/foundation/scss/_global.scss vendored Normal file
View File

@ -0,0 +1,626 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// scss-lint:disable ColorVariable, QualifyingElement, VendorPrefix
////
/// @group global
////
/// Font size attribute applied to `<html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings.
/// @type Number
$global-font-size: 100% !default;
/// Global width of your site. Used by the grid to determine row width.
/// @type Number
$global-width: rem-calc(1200) !default;
/// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px
/// @type Number
$global-lineheight: 1.5 !default;
/// Primary color for interactive components like links and buttons.
/// @type Color
$primary-color: #2199e8 !default;
/// Secondary color, used with components that support the `.secondary` class.
/// @type Color
$secondary-color: #777 !default;
/// Color to indicate a positive status or action, used with the `.success` class.
/// @type Color
$success-color: #3adb76 !default;
/// Color to indicate a caution status or action, used with the `.warning` class.
/// @type Color
$warning-color: #ffae00 !default;
/// Color to indicate a negative status or action, used with the `.alert` class.
/// @type Color
$alert-color: #ec5840 !default;
/// Color used for light gray UI items.
/// @type Color
$light-gray: #e6e6e6 !default;
/// Color used for medium gray UI items.
/// @type Color
$medium-gray: #cacaca !default;
/// Color used for dark gray UI items.
/// @type Color
$dark-gray: #8a8a8a !default;
/// Color used for black ui items.
/// @type Color
$black: #0a0a0a !default;
/// Color used for white ui items.
/// @type Color
$white: #fefefe !default;
/// Background color of the body.
/// @type Color
$body-background: $white !default;
/// Text color of the body.
/// @type Color
$body-font-color: $black !default;
/// Font stack of the body.
/// @type List
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;
/// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.
/// @type Boolean
$body-antialiased: true !default;
/// Global value used for margin on components.
/// @type Number
$global-margin: 1rem !default;
/// Global value used for padding on components.
/// @type Number
$global-padding: 1rem !default;
/// Global font weight used for normal type.
/// @type Keyword | Number
$global-weight-normal: normal !default;
/// Global font weight used for bold type.
/// @type Keyword | Number
$global-weight-bold: bold !default;
/// Global value used for all elements that have a border radius.
/// @type Number
$global-radius: 0 !default;
/// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
$global-text-direction: ltr !default;
// Internal variables used for text direction
$global-left: if($global-text-direction == rtl, right, left);
$global-right: if($global-text-direction == rtl, left, right);
// Internal map used to iterate through colors, to generate CSS classes with less code
$foundation-colors: (
primary: $primary-color,
secondary: $secondary-color,
success: $success-color,
alert: $alert-color,
warning: $warning-color,
) !default;
@mixin foundation-global-styles {
@include -zf-normalize;
// These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
.foundation-mq {
font-family: '#{-zf-bp-serialize($breakpoints)}';
}
html {
font-size: $global-font-size;
box-sizing: border-box;
}
// Set box-sizing globally to handle padding and border widths
*,
*:before,
*:after {
box-sizing: inherit;
}
// Default body styles
body {
padding: 0;
margin: 0;
font-family: $body-font-family;
font-weight: $global-weight-normal;
line-height: $global-lineheight;
color: $body-font-color;
background: $body-background;
@if ($body-antialiased) {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
img {
// Grid defaults to get images and embeds to work properly
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
// Get rid of gap under images by making them display: inline-block; by default
display: inline-block;
vertical-align: middle;
}
// Make sure textarea takes on height automatically
textarea {
height: auto;
min-height: 50px;
border-radius: $global-radius;
}
// Make select elements are 100% width by default
select {
width: 100%;
border-radius: $global-radius;
}
// Styles Google Maps and MapQuest embeds properly
// scss-lint:disable IdSelector
#map_canvas,
.map_canvas,
.mqa-display {
img,
embed,
object {
max-width: none !important;
}
}
// Reset <button> styles created by most browsers
button {
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
padding: 0;
border: 0;
border-radius: $global-radius;
line-height: 1;
}
}
/// Loads normalize.css.
/// @access private
@mixin -zf-normalize {
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
box-sizing: content-box; /* 2 */
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
}

32
app/vendor/foundation/scss/components/_accordion-menu.scss vendored Normal file
View File

@ -0,0 +1,32 @@
////
/// @group accordion-menu
////
/// Sets if accordion menus have the default arrow styles.
/// @type Boolean
$accordionmenu-arrows: true !default;
/// Sets accordion menu arrow color if arrow is used.
/// @type Color
$accordionmenu-arrow-color: $primary-color !default;
@mixin foundation-accordion-menu {
@if $accordionmenu-arrows {
.is-accordion-submenu-parent > a {
position: relative;
&::after {
@include css-triangle(6px, $accordionmenu-arrow-color, down);
position: absolute;
top: 50%;
margin-top: -4px;
right: 1rem;
}
}
.is-accordion-submenu-parent[aria-expanded='true'] > a::after {
transform-origin: 50% 50%;
transform: scaleY(-1);
}
}
}

113
app/vendor/foundation/scss/components/_accordion.scss vendored Normal file
View File

@ -0,0 +1,113 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group accordion
////
/// Default background color of an accordion group.
/// @type Color
$accordion-background: $white !default;
/// If `true`, adds plus and minus icons to the side of each accordion title.
/// @type Boolean
$accordion-plusminus: true !default;
/// Default text color for items in a Menu.
/// @type Color
$accordion-item-color: foreground($accordion-background, $primary-color) !default;
/// Default background color on hover for items in a Menu.
/// @type Color
$accordion-item-background-hover: $light-gray !default;
/// Default padding of an accordion item.
/// @type Number | List
$accordion-item-padding: 1.25rem 1rem !default;
/// Default background color of tab content.
/// @type Color
$accordion-content-background: $white !default;
/// Default border color of tab content.
/// @type Color
$accordion-content-border: 1px solid $light-gray !default;
/// Default text color of tab content.
/// @type Color
$accordion-content-color: foreground($accordion-background, $primary-color) !default;
/// Default padding for tab content.
/// @type Number | List
$accordion-content-padding: 1rem !default;
/// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
@mixin accordion-container {
list-style-type: none;
background: $accordion-background;
border: $accordion-content-border;
border-radius: $global-radius;
margin-#{$global-left}: 0;
}
/// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
@mixin accordion-title {
display: block;
padding: $accordion-item-padding;
line-height: 1;
font-size: rem-calc(12);
color: $accordion-item-color;
position: relative;
border-bottom: $accordion-content-border;
&:hover,
&:focus {
background-color: $accordion-item-background-hover;
}
// Remove the border on the last title
:last-child > & {
border-bottom-width: 0;
}
@if $accordion-plusminus {
&::before {
content: '+';
position: absolute;
#{$global-right}: 1rem;
top: 50%;
margin-top: -0.5rem;
}
.is-active > &::before {
content: '–';
}
}
}
/// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
@mixin accordion-content {
padding: $accordion-content-padding;
display: none;
border-bottom: $accordion-content-border;
background-color: $accordion-content-background;
}
@mixin foundation-accordion {
.accordion {
@include accordion-container;
}
.accordion-item {
// This class doesn't need styles!
}
.accordion-title {
@include accordion-title;
}
.accordion-content {
@include accordion-content;
}
}

55
app/vendor/foundation/scss/components/_badge.scss vendored Normal file
View File

@ -0,0 +1,55 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group badge
////
/// Default background color for badges.
/// @type Color
$badge-background: $primary-color !default;
/// Default text color for badges.
/// @type Color
$badge-color: foreground($badge-background) !default;
/// Default padding inside badges.
/// @type Number
$badge-padding: 0.3em !default;
/// Minimum width of a badge.
/// @type Number
$badge-minwidth: 2.1em !default;
/// Default font size for badges.
/// @type Number
$badge-font-size: 0.6rem !default;
/// Generates the base styles for a badge.
@mixin badge {
display: inline-block;
padding: $badge-padding;
min-width: $badge-minwidth;
font-size: $badge-font-size;
text-align: center;
border-radius: 50%;
}
@mixin foundation-badge {
.badge {
@include badge;
background: $badge-background;
color: $badge-color;
@each $name, $color in $foundation-colors {
@if $name != primary {
&.#{$name} {
background: $color;
color: foreground($color);
}
}
}
}
}

94
app/vendor/foundation/scss/components/_breadcrumbs.scss vendored Normal file
View File

@ -0,0 +1,94 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group breadcrumbs
////
/// Margin around a breadcrumbs container.
/// @type Number
$breadcrumbs-margin: 0 0 $global-margin 0 !default;
/// Font size of breadcrumb links.
/// @type Number
$breadcrumbs-item-font-size: rem-calc(11) !default;
/// Color of breadcrumb links.
/// @type Color
$breadcrumbs-item-color: $primary-color !default;
/// Color of the active breadcrumb link.
/// @type Color
$breadcrumbs-item-color-current: $black !default;
/// Opacity of disabled breadcrumb links.
/// @type Number
$breadcrumbs-item-color-disabled: $medium-gray !default;
/// Margin between breadcrumb items.
/// @type Number
$breadcrumbs-item-margin: 0.75rem !default;
/// If `true`, makes breadcrumb links uppercase.
/// @type Boolean
$breadcrumbs-item-uppercase: true !default;
/// If `true`, adds a slash between breadcrumb links.
/// @type Boolean
$breadcrumbs-item-slash: true !default;
/// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
@mixin breadcrumbs-container {
@include clearfix;
list-style: none;
margin: $breadcrumbs-margin;
// Item wrapper
li {
float: #{$global-left};
color: $breadcrumbs-item-color-current;
font-size: $breadcrumbs-item-font-size;
cursor: default;
@if $breadcrumbs-item-uppercase {
text-transform: uppercase;
}
@if $breadcrumbs-item-slash {
// Need to escape the backslash
$slash: if($global-text-direction == 'ltr', '/', '\\');
&:not(:last-child)::after {
color: $medium-gray;
content: $slash;
margin: 0 $breadcrumbs-item-margin;
position: relative;
top: 1px;
opacity: 1;
}
}
@else {
margin-#{$global-right}: $breadcrumbs-item-margin;
}
}
// Page links
a {
color: $breadcrumbs-item-color;
&:hover {
text-decoration: underline;
}
}
}
@mixin foundation-breadcrumbs {
.breadcrumbs {
@include breadcrumbs-container;
.disabled {
color: $breadcrumbs-item-color-disabled;
}
}
}

130
app/vendor/foundation/scss/components/_button-group.scss vendored Normal file
View File

@ -0,0 +1,130 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group button-group
////
/// Margin for button groups.
/// @type Number
$buttongroup-margin: 1rem !default;
/// Margin between buttons in a button group.
/// @type Border
$buttongroup-spacing: 1px !default;
/// Selector for the buttons inside a button group.
/// @type String
$buttongroup-child-selector: '.button' !default;
/// Maximum number of buttons that can be in an even-width button group.
/// @type Number
$buttongroup-expand-max: 6 !default;
/// Add styles for a button group container.
/// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
@mixin button-group(
$child-selector: $buttongroup-child-selector
) {
@include clearfix;
margin-bottom: $buttongroup-margin;
font-size: map-get($button-sizes, default);
#{$child-selector} {
float: #{$global-left};
margin: 0;
font-size: inherit;
&:not(:last-child) {
border-#{$global-right}: $buttongroup-spacing solid $body-background;
}
}
}
/// Creates a full-width button group, making each button equal width.
/// @param {Keyword|Number} $count [auto] - Number of buttons inside the button group. Set to `auto` to generate CSS that will account for a variable number of buttons.
/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
@mixin button-group-expand(
$selector: $buttongroup-child-selector
) {
display: table;
table-layout: fixed;
width: 100%;
&::before,
&::after {
display: none;
}
#{$selector} {
display: table-cell;
float: none;
}
}
/// Stacks the buttons in a button group.
/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
@mixin button-group-stack(
$selector: $buttongroup-child-selector
) {
#{$selector} {
width: 100%;
&:not(:last-child) {
border-#{$global-right}: $buttongroup-spacing solid;
}
}
}
/// Un-stacks the buttons in a button group.
/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
@mixin button-group-unstack(
$selector: $buttongroup-child-selector
) {
#{$selector} {
width: auto;
&:not(:last-child) {
border-#{$global-right}: $buttongroup-spacing solid $body-background;
}
}
}
@mixin foundation-button-group {
.button-group {
@include button-group;
// Sizes
&.tiny { font-size: map-get($button-sizes, tiny); }
&.small { font-size: map-get($button-sizes, small); }
&.large { font-size: map-get($button-sizes, large); }
&.expanded { @include button-group-expand; }
// Colors
@each $name, $color in $foundation-colors {
@if $button-fill != hollow {
&.#{$name} #{$buttongroup-child-selector} {
@include button-style($color, auto, auto);
}
}
@else {
&.#{$name} #{$buttongroup-child-selector} {
@include button-hollow;
@include button-hollow-style($color);
}
}
}
&.stacked,
&.stacked-for-small {
@include button-group-stack;
}
&.stacked-for-small {
@include breakpoint(medium) {
@include button-group-unstack;
}
}
}
}

265
app/vendor/foundation/scss/components/_button.scss vendored Normal file
View File

@ -0,0 +1,265 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group button
////
/// Padding inside buttons.
/// @type List
$button-padding: 0.85em 1em !default;
/// Margin around buttons.
/// @type List
$button-margin: 0 0 $global-margin 0 !default;
/// Default fill for buttons. Can either be `solid` or `hollow`.
/// @type Keyword
$button-fill: solid !default;
/// Default background color for buttons.
/// @type Color
$button-background: $primary-color !default;
/// Background color on hover for buttons.
/// @type Color
$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
/// Font color for buttons.
/// @type List
$button-color: #fff !default;
/// Font color for buttons, if the background is light.
/// @type List
$button-color-alt: #000 !default;
/// Border radius for buttons, defaulted to global-radius.
/// @type Number
$button-radius: $global-radius !default;
/// Sizes for buttons.
/// @type Map
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
) !default;
/// opacity for a disabled button.
/// @type List
$button-opacity-disabled: 0.25 !default;
// Internal: flip from margin-right to margin-left for defaults
@if $global-text-direction == 'rtl' {
$button-margin: 0 0 $global-margin $global-margin !default;
}
// TODO: Document button-base() mixin
@mixin button-base {
@include disable-mouse-outline;
display: inline-block;
text-align: center;
line-height: 1;
cursor: pointer;
-webkit-appearance: none;
transition: background-color 0.25s ease-out, color 0.25s ease-out;
vertical-align: middle;
border: 1px solid transparent;
border-radius: $button-radius;
padding: $button-padding;
margin: $button-margin;
font-size: map-get($button-sizes, default);
}
/// Expands a button to make it full-width.
/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.
@mixin button-expand($expand: true) {
@if $expand {
display: block;
width: 100%;
margin-left: 0;
margin-right: 0;
}
@else {
display: inline-block;
width: auto;
margin: $button-margin;
}
}
/// Sets the visual style of a button.
/// @param {Color} $background [$button-background] - Background color of the button.
/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
@mixin button-style(
$background: $button-background,
$background-hover: $button-background-hover,
$color: $button-color
) {
@if $color == auto {
$color: isitlight($background);
}
@if $background-hover == auto {
$background-hover: scale-color($background, $lightness: -20%);
}
@if lightness($background) >= 70% {
$color: $button-color-alt;
}
@else {
$color: $button-color;
}
background-color: $background;
color: $color;
&:hover, &:focus {
background-color: $background-hover;
color: $color;
}
}
/// Removes background fill on hover and focus for hollow buttons.
@mixin button-hollow {
&,
&:hover, &:focus {
background-color: transparent;
}
}
@mixin button-hollow-style($color: $primary-color) {
$color-hover: scale-color($color, $lightness: -50%);
border: 1px solid $color;
color: $color;
&:hover, &:focus {
border-color: $color-hover;
color: $color-hover;
}
}
/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
@mixin button-disabled {
opacity: $button-opacity-disabled;
cursor: not-allowed;
pointer-events: none;
}
/// Adds a dropdown arrow to a button.
/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.
/// @param {Color} $color [white] - Color of the arrow.
/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.
@mixin button-dropdown(
$size: 0.4em,
$color: $white,
$offset: get-side($button-padding, right)
) {
&::after {
@include css-triangle($size, $color, down);
position: relative;
top: 0.4em; // Aligns the arrow with the text of the button
float: #{$global-right};
margin-#{$global-left}: get-side($button-padding, right);
display: inline-block;
}
}
/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.
/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.
/// @param {Color} $background [$button-background] - Background color of the button.
/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.
@mixin button(
$expand: false,
$background: $button-background,
$background-hover: $button-background-hover,
$color: $button-color,
$style: $button-fill
) {
@include button-base;
@if $style == solid {
@include button-style($background, $background-hover, $color);
}
@else if $style == hollow {
@include button-hollow;
@include button-hollow-style($background);
}
@if $expand {
@include button-expand;
}
}
@mixin foundation-button {
.button {
@include button;
// Sizes
&.tiny { font-size: map-get($button-sizes, tiny); }
&.small { font-size: map-get($button-sizes, small); }
&.large { font-size: map-get($button-sizes, large); }
&.expanded { @include button-expand; }
// Colors
@each $name, $color in $foundation-colors {
@if $button-fill != hollow {
&.#{$name} {
@include button-style($color, auto);
}
}
@else {
&.#{$name} {
@include button-hollow-style($color);
}
&.#{$name}.dropdown::after {
border-top-color: $color;
}
}
}
// Hollow style
@if $button-fill != hollow {
&.hollow {
@include button-hollow;
@include button-hollow-style;
@each $name, $color in $foundation-colors {
&.#{$name} {
@include button-hollow-style($color);
}
}
}
}
// Disabled style
&.disabled,
&[disabled] {
@include button-disabled;
}
// Dropdown arrow
&.dropdown {
@include button-dropdown;
@if $button-fill == hollow {
&::after {
border-top-color: $button-background;
}
}
}
// Button with dropdown arrow only
&.arrow-only::after {
margin-#{$global-left}: 0;
float: none;
top: 0.2em;
}
}
}

105
app/vendor/foundation/scss/components/_callout.scss vendored Normal file
View File

@ -0,0 +1,105 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group callout
////
/// Defualt background color.
/// @type Color
$callout-background: $white !default;
/// Default fade value for callout backgrounds.
/// @type Number
$callout-background-fade: 85% !default;
/// Defualt border style for callouts.
/// @type List
$callout-border: 1px solid rgba($black, 0.25) !default;
/// Default bottom margin for callouts.
/// @type Number
$callout-margin: 0 0 1rem 0 !default;
/// Default inner padding for callouts.
/// @type Number
$callout-padding: 1rem !default;
/// Default font color for callouts.
/// @type Color
$callout-font-color: $body-font-color !default;
/// Default font color for callouts, if the callout has a dark background.
/// @type Color
$callout-font-color-alt: $body-background !default;
/// Default border radius for callouts.
/// @type Color
$callout-radius: $global-radius !default;
/// Amount to tint links used within colored panels. Set to `false` to disable this feature.
/// @type Number | Boolean
$callout-link-tint: 30% !default;
/// Adds basic styles for a callout, including padding and margin.
@mixin callout-base() {
margin: $callout-margin;
padding: $callout-padding;
border: $callout-border;
border-radius: $callout-radius;
position: relative;
color: $callout-font-color;
// Respect the padding, fool.
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
/// Generate quick styles for a callout using a single color as a baseline.
/// @param {Color} $color [$callout-background] - Color to use.
@mixin callout-style($color: $callout-background) {
$background: scale-color($color, $lightness: $callout-background-fade);
background-color: $background;
}
@mixin callout-size($padding) {
padding-top: $padding;
padding-right: $padding;
padding-bottom: $padding;
padding-left: $padding;
}
/// Adds styles for a callout.
/// @param {Color} $color [$callout-background] - Color to use.
@mixin callout($color: $callout-background) {
@include callout-base;
@include callout-style($color);
}
@mixin foundation-callout {
.callout {
@include callout;
@each $name, $color in $foundation-colors {
&.#{$name} {
@include callout-style($color);
}
}
&.small {
@include callout-size(0.5rem);
}
&.large {
@include callout-size(3rem);
}
}
}

61
app/vendor/foundation/scss/components/_close-button.scss vendored Normal file
View File

@ -0,0 +1,61 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group close-button
////
/// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.
/// @type List
$closebutton-position: right top !default;
/// Right (or left) offset for a close button.
/// @type Number
$closebutton-offset-horizontal: 1rem !default;
/// Top (or bottom) offset for a close button.
/// @type Number
$closebutton-offset-vertical: 0.5rem !default;
/// Default font size of the close button.
/// @type Number
$closebutton-size: 2em !default;
/// The line-height of the close button. It affects the spacing of the element.
/// @type Number
$closebutton-lineheight: 1 !default;
/// Default color of the close button.
/// @type Color
$closebutton-color: $dark-gray !default;
/// Default color of the close button when being hovered on.
/// @type Color
$closebutton-color-hover: $black !default;
/// Adds styles for a close button, using the styles in the settings variables.
@mixin close-button {
$x: nth($closebutton-position, 1);
$y: nth($closebutton-position, 2);
@include disable-mouse-outline;
position: absolute;
color: $closebutton-color;
#{$x}: $closebutton-offset-horizontal;
#{$y}: $closebutton-offset-vertical;
font-size: $closebutton-size;
line-height: $closebutton-lineheight;
cursor: pointer;
&:hover,
&:focus {
color: $closebutton-color-hover;
}
}
@mixin foundation-close-button {
.close-button {
@include close-button;
}
}

75
app/vendor/foundation/scss/components/_drilldown.scss vendored Normal file
View File

@ -0,0 +1,75 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group drilldown
////
/// Transition property to use for animating menus.
/// @type Transition
$drilldown-transition: transform 0.15s linear !default;
/// Adds arrows to drilldown items with submenus, as well as the back button.
/// @type Boolean
$drilldown-arrows: true !default;
/// Sets drilldown arrow color if arrow is used.
/// @type Color
$drilldown-arrow-color: $primary-color !default;
/// Background color for drilldown submenus.
/// @type Color
$drilldown-background: $white !default;
@mixin foundation-drilldown-menu {
// Applied to the Menu container
.is-drilldown {
position: relative;
overflow: hidden;
}
// Applied to nested <ul>s
.is-drilldown-submenu {
position: absolute;
top: 0;
#{$global-left}: 100%;
z-index: -1;
height: 100%;
width: 100%;
background: $drilldown-background;
transition: $drilldown-transition;
&.is-active {
z-index: 1;
display: block;
transform: translateX(if($global-text-direction == ltr, -100%, 100%));
}
&.is-closing {
transform: translateX(if($global-text-direction == ltr, 100%, -100%));
}
}
@if $drilldown-arrows {
.is-drilldown-submenu-parent > a {
position: relative;
&::after {
@include css-triangle(6px, $drilldown-arrow-color, $global-right);
position: absolute;
top: 50%;
margin-top: -6px;
#{$global-right}: 1rem;
}
}
.js-drilldown-back::before {
@include css-triangle(6px, $drilldown-arrow-color, $global-left);
float: $global-left;
margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
margin-#{$global-left}: 0.6rem; // Lines the tip of the arrow with the items below
margin-top: 14px; // Aligns the arrow with the text
}
}
}

148
app/vendor/foundation/scss/components/_dropdown-menu.scss vendored Normal file
View File

@ -0,0 +1,148 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group dropdown-menu
////
/// Enables arrows for items with dropdown menus.
/// @type Boolean
$dropdownmenu-arrows: true !default;
/// Sets dropdown menu arrow color if arrow is used.
/// @type Color
$dropdownmenu-arrow-color: $anchor-color !default;
/// Minimum width of dropdown sub-menus.
/// @type Length
$dropdownmenu-min-width: 200px !default;
/// Background color for dropdowns.
/// @type Color
$dropdownmenu-background: $white !default;
/// Border for dropdown sub-menus.
/// @type List
$dropdownmenu-border: 1px solid $medium-gray !default;
// Border width for dropdown sub-menus.
// Used to adjust top margin of a sub-menu if a border is used.
// @type Length
$dropdownmenu-border-width: nth($dropdownmenu-border, 1);
@mixin foundation-dropdown-menu {
.dropdown.menu {
a {
@include disable-mouse-outline;
}
.is-dropdown-submenu-parent {
position: relative;
a::after {
float: $global-right;
margin-top: 3px;
margin-#{$global-left}: 10px;
}
@if $dropdownmenu-arrows {
&.is-down-arrow a {
padding-#{$global-right}: 1.5rem;
position: relative;
}
&.is-down-arrow > a::after {
@include css-triangle(5px, $dropdownmenu-arrow-color, down);
position: absolute;
top: rem-calc(2px) + rem-calc(get-side($menu-item-padding, top));
#{$global-right}: 5px;
}
&.is-left-arrow > a::after {
@include css-triangle(5px, $dropdownmenu-arrow-color, left);
float: left;
margin-left: 0;
margin-right: 10px;
}
&.is-right-arrow > a::after {
@include css-triangle(5px, $dropdownmenu-arrow-color, right);
}
}
&.is-left-arrow.opens-inner .submenu {
right: 0;
left: auto;
}
&.is-right-arrow.opens-inner .submenu {
left: 0;
right: auto;
}
&.opens-inner .submenu {
top: 100%;
}
}
.no-js & ul {
display: none;
}
.submenu {
display: none;
position: absolute;
top: 0;
left: 100%;
min-width: $dropdownmenu-min-width;
z-index: 1;
background: $dropdownmenu-background;
border: $dropdownmenu-border;
@if (type-of($dropdownmenu-border-width) == 'number') {
margin-top: (-$dropdownmenu-border-width);
}
> li {
width: 100%;
}
&.first-sub {
top: 100%;
left: 0;
right: auto;
}
&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &,
&.js-dropdown-active {
display: block;
}
}
.is-dropdown-submenu-parent.opens-left .submenu {
left: auto;
right: 100%;
}
&.align-right {
.submenu.first-sub {
top: 100%;
left: auto;
right: 0;
}
}
}
.is-dropdown-menu.vertical {
width: 100px;
&.align-right {
float: right;
}
> li .submenu {
top: 0;
left: 100%;
}
}
}

64
app/vendor/foundation/scss/components/_dropdown.scss vendored Normal file
View File

@ -0,0 +1,64 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group dropdown
////
/// Padding for dropdown panes.
/// @type List
$dropdown-padding: 1rem !default;
/// Border for dropdown panes.
/// @type List
$dropdown-border: 1px solid $medium-gray !default;
/// Font size for dropdown panes.
/// @type List
$dropdown-font-size: 16rem !default;
/// Width for dropdown panes.
/// @type Number
$dropdown-width: 300px !default;
/// Border radius dropdown panes.
/// @type Number
$dropdown-radius: $global-radius !default;
/// Sizes for dropdown panes. Each size is a CSS class you can apply.
/// @type Map
$dropdown-sizes: (
tiny: 100px,
small: 200px,
large: 400px,
) !default;
/// Applies styles for a basic dropdown.
@mixin dropdown-container {
background-color: $body-background;
border: $dropdown-border;
display: block;
padding: $dropdown-padding;
position: absolute;
visibility: hidden;
width: $dropdown-width;
z-index: 10;
border-radius: $dropdown-radius;
&.is-open {
visibility: visible;
}
}
@mixin foundation-dropdown {
.dropdown-pane {
@include dropdown-container;
}
@each $name, $size in $dropdown-sizes {
.dropdown-pane.#{$name} {
width: $size;
}
}
}

63
app/vendor/foundation/scss/components/_flex-video.scss vendored Normal file
View File

@ -0,0 +1,63 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group flex-video
////
/// Margin below a flex video container.
/// @type Number
$flexvideo-margin-bottom: rem-calc(16) !default;
/// Padding used to create a 4:3 aspect ratio.
/// @type Number
$flexvideo-ratio: 4 by 3 !default;
/// Padding used to create a 16:9 aspect ratio.
/// @type Number
$flexvideo-ratio-widescreen: 16 by 9 !default;
/// Creates a percentage height that can be used as padding in a flex video container.
/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
/// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a flex video container.
@function flex-video($ratio) {
$w: nth($ratio, 1);
$h: nth($ratio, 3);
@return $h / $w * 100%;
}
/// Creates a flex video container.
/// @param {List} $ratio [$flexvideo-ratio] - Ratio to use for the container, formatted as `x by y`.
@mixin flex-video($ratio: $flexvideo-ratio) {
position: relative;
height: 0;
padding-bottom: flex-video($ratio);
margin-bottom: $flexvideo-margin-bottom;
overflow: hidden;
iframe,
object,
embed,
video {
position: absolute;
top: 0;
#{$global-left}: 0;
width: 100%;
height: 100%;
}
}
@mixin foundation-flex-video {
.flex-video {
@include flex-video;
&.widescreen {
padding-bottom: flex-video($flexvideo-ratio-widescreen);
}
&.vimeo {
padding-top: 0;
}
}
}

27
app/vendor/foundation/scss/components/_float.scss vendored Normal file
View File

@ -0,0 +1,27 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group float
////
@mixin foundation-float-classes {
.float-left {
float: left !important;
}
.float-right {
float: right !important;
}
.float-center {
display: block;
margin-left: auto;
margin-right: auto;
}
.clearfix {
@include clearfix;
}
}

56
app/vendor/foundation/scss/components/_label.scss vendored Normal file
View File

@ -0,0 +1,56 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group label
////
/// Default background color for labels.
/// @type Color
$label-background: $primary-color !default;
/// Default text color for labels.
/// @type Color
$label-color: foreground($label-background) !default;
/// Default font size for labels.
/// @type Number
$label-font-size: 0.8rem !default;
/// Default padding inside labels.
/// @type Number
$label-padding: 0.33333rem 0.5rem !default;
/// Default radius of labels.
/// @type Number
$label-radius: $global-radius !default;
/// Generates base styles for a label.
@mixin label {
display: inline-block;
padding: $label-padding;
font-size: $label-font-size;
line-height: 1;
white-space: nowrap;
cursor: default;
border-radius: $label-radius;
}
@mixin foundation-label {
.label {
@include label;
background: $label-background;
color: $label-color;
@each $name, $color in $foundation-colors {
@if $name != primary {
&.#{$name} {
background: $color;
color: foreground($color);
}
}
}
}
}

74
app/vendor/foundation/scss/components/_media-object.scss vendored Normal file
View File

@ -0,0 +1,74 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group media-object
////
/// Bottom margin of a media object.
/// @type Number
$mediaobject-margin-bottom: $global-margin !default;
/// Left and right padding on sections within a media object.
/// @type Number
$mediaobject-section-padding: $global-padding !default;
/// With of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
/// @type Number
$mediaobject-image-width-stacked: 100% !default;
/// Adds styles for a media object container.
@mixin media-object-container {
margin-bottom: $mediaobject-margin-bottom;
display: block;
}
/// Adds styles for sections within a media object.
/// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
@mixin media-object-section($padding: $mediaobject-section-padding) {
display: table-cell;
vertical-align: top;
&:first-child {
padding-#{$global-right}: $padding;
}
&:last-child:not(+ #{&}:first-child) {
padding-#{$global-left}: $padding;
}
}
/// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
@mixin media-object-stack {
display: block;
padding: 0;
padding-bottom: $mediaobject-section-padding;
img {
width: $mediaobject-image-width-stacked;
}
}
@mixin foundation-media-object {
.media-object {
@include media-object-container;
img {
max-width: none;
}
&.stack-for-small .media-object-section {
@include breakpoint(small only) {
@include media-object-stack;
}
}
}
.media-object-section {
@include media-object-section;
&.middle { vertical-align: middle; }
&.bottom { vertical-align: bottom; }
}
}

209
app/vendor/foundation/scss/components/_menu.scss vendored Normal file
View File

@ -0,0 +1,209 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group menu
////
/// Margin of a menu.
/// @type Number
$menu-margin: 0 !default;
/// Left-hand margin of a nested menu.
/// @type Number
$menu-margin-nested: 1rem !default;
/// Padding for items in a menu.
/// @type Number
$menu-item-padding: 0.7rem 1rem !default;
/// Spacing between an icon and text in a menu item.
/// @type Number
$menu-icon-spacing: 0.25rem !default;
/// Maximum number of `expand-n` classes to include in the CSS.
/// @type Number
$menu-expand-max: 6 !default;
/// Creates the base styles for a Menu.
@mixin menu-base {
margin: $menu-margin;
list-style-type: none;
// List items are table cell to allow for vertical alignment
> li {
@include disable-mouse-outline;
display: table-cell;
vertical-align: middle;
}
// Reset line height to make the height of the overall item easier to calculate
> li:not(.menu-text) > a {
display: block;
padding: $menu-item-padding;
line-height: 1;
}
// Reset styles of inner elements
input,
a,
button {
margin-bottom: 0;
}
}
/// Expands the items of a Menu, so each item is the same width.
@mixin menu-expand {
display: table;
table-layout: fixed;
width: 100%;
}
/// Sets the direction of a Menu.
/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
@mixin menu-direction($dir: horizontal) {
@if $dir == horizontal {
> li {
display: table-cell;
}
}
@else if $dir == vertical {
> li {
display: block;
}
}
@else {
@warn 'The direction used for menu-direction() must be horizontal or vertical.';
}
}
/// Creates a simple Menu, which has no padding or hover state.
@mixin menu-simple {
a {
padding: 0;
margin-#{$global-right}: get-side($menu-item-padding, $global-right);
}
}
/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
/// @param {Keyword|Number} $padding [auto] - Length of the margin.
@mixin menu-nested($margin: $menu-margin-nested) {
margin-#{$global-left}: $margin;
}
/// Adds support for icons to Menu items.
/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
@mixin menu-icons($position: side, $base: true) {
@if $base {
> li > a {
> img,
> i {
vertical-align: middle;
}
> span {
vertical-align: middle;
}
}
}
@if $position == side {
> li > a {
> img,
> i {
display: inline-block;
margin-#{$global-right}: $menu-icon-spacing;
}
}
}
@else if $position == top {
> li > a {
text-align: center;
> img,
> i {
display: block;
margin: 0 auto $menu-icon-spacing;
}
}
}
}
@mixin menu-text {
font-weight: bold;
color: inherit;
line-height: 1;
padding-top: 0;
padding-bottom: 0;
padding: $menu-item-padding;
}
@mixin foundation-menu {
.menu {
@include menu-base;
@include menu-icons;
// Orientation
@include menu-direction(horizontal);
&.vertical {
@include menu-direction(vertical);
}
@each $size in $breakpoint-classes {
@if $size != small {
@include breakpoint($size) {
&.#{$size}-horizontal {
@include menu-direction(horizontal);
}
&.#{$size}-vertical {
@include menu-direction(vertical);
}
}
}
}
// Simple
&.simple {
@include menu-simple;
}
// Align right
&.align-#{$global-right} {
> li {
float: $global-right;
}
}
// Even-width
&.expanded {
@include menu-expand;
> li:first-child:last-child {
width: 100%;
}
}
// Vertical icons
&.icon-top {
@include menu-icons(top, $base: false);
}
// Nesting
&.nested {
@include menu-nested;
}
}
.menu-text {
@include menu-text;
}
// Prevent FOUC when using the Responsive Menu plugin
.no-js [data-responsive-menu] ul {
display: none;
}
}

180
app/vendor/foundation/scss/components/_off-canvas.scss vendored Normal file
View File

@ -0,0 +1,180 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group off-canvas
////
/// Width of an off-canvas menu.
/// @type Number
$offcanvas-size: 250px !default;
/// Background color of an off-canvas menu.
/// @type Color
$offcanvas-background: $light-gray !default;
/// Z-index of an off-canvas menu.
/// @type Number
$offcanvas-zindex: -1 !default;
/// Length of the animation on an off-canvas menu.
/// @type Number
$offcanvas-transition-length: 0.5s !default;
/// Timing function of the animation on an off-canvas menu.
/// @type Keyword
$offcanvas-transition-timing: ease !default;
/// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen.
$offcanvas-fixed-reveal: true !default;
/// Background color for the overlay that appears when an off-canvas menu is open.
/// @type Color
$offcanvas-exit-background: rgba($white, 0.25) !default;
/// CSS class used for the main content area. The off-canvas mixins use this to target the page body.
$maincontent-class: 'off-canvas-content' !default;
/// Box shadow to place under the main content area. This shadow overlaps the off-canvas menus.
/// @type Shadow
$maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
/// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
@mixin off-canvas-basics {
// Extra properties needed on <html> and <body> to make off-canvas work
html,
body {
height: 100%;
}
.off-canvas-wrapper {
width: 100%;
overflow-x: hidden;
position: relative;
backface-visibility: hidden;
-webkit-overflow-scrolling: auto;
}
.off-canvas-wrapper-inner {
@include clearfix;
position: relative;
width: 100%;
transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
}
// Container for page content
.off-canvas-content,
.#{$maincontent-class} {
min-height: 100%;
background: $body-background;
transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
backface-visibility: hidden;
z-index: 1;
@if has-value($maincontent-shadow) {
box-shadow: $maincontent-shadow;
}
}
// Click-to-exit overlay (generated by JavaScript)
.js-off-canvas-exit {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $offcanvas-exit-background;
cursor: pointer;
transition: background $offcanvas-transition-length $offcanvas-transition-timing;
.is-off-canvas-open & {
display: block;
}
}
}
/// Adds basic styles for an off-canvas menu.
@mixin off-canvas-base {
@include disable-mouse-outline;
position: absolute;
background: $offcanvas-background;
z-index: $offcanvas-zindex;
max-height: 100%;
overflow-y: auto;
transform: translateX(0);
}
@mixin off-canvas-position(
$position: left,
$size: $offcanvas-size,
$fixed: false
) {
@if $position == left {
left: -$size;
top: 0;
width: $size;
}
@else if $position == right {
right: -$size;
top: 0;
width: $size;
}
// Generates an open state class that matches the width of the menu
@at-root {
.is-open-#{$position} {
@if $position == left {
transform: translateX($size);
}
@else if $position == right {
transform: translateX(-$size);
}
}
}
}
/// Adds styles that reveal an off-canvas menu.
/// @param {Keyword} $position [left] - Position of the off-canvas menu being revealed.
@mixin off-canvas-reveal(
$position: left
) {
#{$position}: 0;
z-index: auto;
@if $offcanvas-fixed-reveal {
position: fixed;
}
& ~ .#{$maincontent-class} {
margin-#{$position}: $offcanvas-size;
}
}
@mixin foundation-off-canvas {
@include off-canvas-basics;
// Off-canvas container
.off-canvas {
@include off-canvas-base;
&.position-left { @include off-canvas-position(left); }
&.position-right { @include off-canvas-position(right); }
}
// Reveal off-canvas menu on larger screens
@each $name, $value in $breakpoint-classes {
@if $name != small {
@include breakpoint($name) {
.position-left.reveal-for-#{$name} {
@include off-canvas-reveal(left);
}
.position-right.reveal-for-#{$name} {
@include off-canvas-reveal(right);
}
}
}
}
}

193
app/vendor/foundation/scss/components/_orbit.scss vendored Normal file
View File

@ -0,0 +1,193 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group orbit
////
/// Default color for Orbit's bullets.
/// @type Color
$orbit-bullet-background: $medium-gray !default;
/// Default active color for Orbit's bullets.
/// @type Color
$orbit-bullet-background-active: $dark-gray !default;
/// Default diameter for Orbit's bullets.
/// @type Number
$orbit-bullet-diameter: 1.2rem !default;
/// Default margin between Orbit's bullets.
/// @type Number
$orbit-bullet-margin: 0.1rem !default;
/// Default distance from slide region for Orbit's bullets.
/// @type Number
$orbit-bullet-margin-top: 0.8rem !default;
/// Default bottom margin from Orbit's bullets to whatever content may lurk below it.
/// @type Number
$orbit-bullet-margin-bottom: 0.8rem !default;
/// Default background color for Orbit's caption.
/// @type Color
$orbit-caption-background: rgba($black, 0.5) !default;
/// Default padding for Orbit's caption.
/// @type Number
$orbit-caption-padding: 1rem !default;
/// Default background color for Orbit's controls when hovered.
/// @type Color
$orbit-control-background-hover: rgba($black, 0.5) !default;
/// Default padding for Orbit's controls.
/// @type Number
$orbit-control-padding: 1rem !default;
/// Default z-index for Orbit's controls.
/// @type Number
$orbit-control-zindex: 10 !default;
/// Adds styles for the outer Orbit wrapper. These styles are used on the `.orbit` class.
@mixin orbit-wrapper {
position: relative;
}
/// Adds styles for the inner Orbit slide container. These styles are used on the `.orbit-container` class.
@mixin orbit-container {
position: relative;
margin: 0;
overflow: hidden;
list-style: none;
}
/// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class.
@mixin orbit-slide {
width: 100%;
max-height: 100%;
&.no-motionui {
&.is-active {
top: 0;
left: 0;
}
}
}
@mixin orbit-figure {
margin: 0;
}
@mixin orbit-image {
margin: 0;
width: 100%;
max-width: 100%;
}
/// Adds styles for an orbit slide caption. These styles are used on the `.orbit-caption` class.
@mixin orbit-caption {
position: absolute;
bottom: 0;
width: 100%;
padding: $orbit-caption-padding;
margin-bottom: 0;
color: foreground($orbit-caption-background);
background-color: $orbit-caption-background;
}
/// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS.
@mixin orbit-control {
@include disable-mouse-outline;
@include vertical-center;
z-index: $orbit-control-zindex;
padding: $orbit-control-padding;
color: $white;
&:hover,
&:active,
&:focus {
background-color: $orbit-control-background-hover;
}
}
/// Adds styles for the Orbit previous button. These styles are used on the `.orbit-previous` class.
@mixin orbit-previous {
#{$global-left}: 0;
}
/// Adds styles for the Orbit next button. These styles are used on the `.orbit-next` class.
@mixin orbit-next {
#{$global-left}: auto;
#{$global-right}: 0;
}
/// Adds styles for a container of Orbit bullets. /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-bullets` class.
@mixin orbit-bullets {
@include disable-mouse-outline;
position: relative;
margin-top: $orbit-bullet-margin-top;
margin-bottom: $orbit-bullet-margin-bottom;
text-align: center;
button {
width: $orbit-bullet-diameter;
height: $orbit-bullet-diameter;
margin: $orbit-bullet-margin;
background-color: $orbit-bullet-background;
border-radius: 50%;
&:hover {
background-color: $orbit-bullet-background-active;
}
&.is-active {
background-color: $orbit-bullet-background-active;
}
}
}
@mixin foundation-orbit {
.orbit {
@include orbit-wrapper;
}
.orbit-container {
@include orbit-container;
}
.orbit-slide {
@include orbit-slide;
}
.orbit-figure {
@include orbit-figure;
}
.orbit-image {
@include orbit-image;
}
.orbit-caption {
@include orbit-caption;
}
%orbit-control {
@include orbit-control;
}
.orbit-previous {
@extend %orbit-control;
@include orbit-previous;
}
.orbit-next {
@extend %orbit-control;
@include orbit-next;
}
.orbit-bullets {
@include orbit-bullets;
}
}

158
app/vendor/foundation/scss/components/_pagination.scss vendored Normal file
View File

@ -0,0 +1,158 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group pagination
////
/// Font size of pagination items.
/// @type Number
$pagination-font-size: rem-calc(14) !default;
/// Default bottom margin of the media object.
/// @type Number
$pagination-margin-bottom: $global-margin !default;
/// Text color of pagination items.
/// @type Color
$pagination-item-color: $black !default;
/// Padding inside of pagination items.
/// @type Number
$pagination-item-padding: rem-calc(3 10) !default;
/// Right margin to separate pagination items.
/// @type Number
$pagination-item-spacing: rem-calc(1) !default;
/// Default radius for pagination items.
/// @type Number
$pagination-radius: $global-radius !default;
/// Background color of pagination items on hover.
/// @type Color
$pagination-item-background-hover: $light-gray !default;
/// Background color of pagination item for the current page.
/// @type Color
$pagination-item-background-current: $primary-color !default;
/// Text color of the pagination item for the current page.
/// @type Color
$pagination-item-color-current: foreground($pagination-item-background-current) !default;
/// Text color of a disabled pagination item.
/// @type Color
$pagination-item-color-disabled: $medium-gray !default;
/// Color of the ellipsis in a pagination menu.
/// @type Color
$pagination-ellipsis-color: $black !default;
/// If `false`, don't display page number links on mobile, only next/previous links.
/// @type Boolean
$pagination-mobile-items: false !default;
/// If `true`, arrows are added to the next and previous links of pagination.
/// @type Boolean
$pagination-arrows: true !default;
/// Adds styles for a pagination container. Apply this to a `<ul>`.
@mixin pagination-container {
@include clearfix;
margin-#{$global-left}: 0;
margin-bottom: $pagination-margin-bottom;
// List item
li {
font-size: $pagination-font-size;
margin-#{$global-right}: $pagination-item-spacing;
display: none;
border-radius: $pagination-radius;
@if not $pagination-mobile-items {
&:last-child,
&:first-child {
display: inline-block;
}
@include breakpoint(medium) {
display: inline-block;
}
}
}
// Page links
a,
button {
color: $pagination-item-color;
display: block;
padding: $pagination-item-padding;
border-radius: $global-radius;
&:hover {
background: $pagination-item-background-hover;
}
}
}
/// Adds styles for the current pagination item. Apply this to an `<a>`.
@mixin pagination-item-current {
padding: $pagination-item-padding;
background: $pagination-item-background-current;
color: $pagination-item-color-current;
cursor: default;
}
/// Adds styles for a disabled pagination item. Apply this to an `<a>`.
@mixin pagination-item-disabled {
padding: $pagination-item-padding;
color: $pagination-item-color-disabled;
cursor: default;
&:hover {
background: transparent;
}
}
/// Adds styles for an ellipsis for use in a pagination list.
@mixin pagination-ellipsis {
content: '…';
padding: $pagination-item-padding;
color: $pagination-ellipsis-color;
}
@mixin foundation-pagination {
.pagination {
@include pagination-container;
.current {
@include pagination-item-current;
}
.disabled {
@include pagination-item-disabled;
}
.ellipsis::after {
@include pagination-ellipsis;
}
}
@if $pagination-arrows {
.pagination-previous a::before,
.pagination-previous.disabled::before {
content: '«';
display: inline-block;
margin-#{$global-right}: 0.5rem;
}
.pagination-next a::after,
.pagination-next.disabled::after {
content: '»';
display: inline-block;
margin-#{$global-left}: 0.5rem;
}
}
}

83
app/vendor/foundation/scss/components/_progress-bar.scss vendored Normal file
View File

@ -0,0 +1,83 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group progress-bar
////
/// Height of a progress bar.
/// @type Number
$progress-height: 1rem !default;
/// Background color of a progress bar.
/// @type Color
$progress-background: $medium-gray !default;
/// Bottom margin of a progress bar.
/// @type Number
$progress-margin-bottom: $global-margin !default;
/// Default color of a progress bar's meter.
/// @type Color
$progress-meter-background: $primary-color !default;
/// Default radius of a progress bar.
/// @type Number
$progress-radius: $global-radius !default;
/// Adds styles for a progress bar container.
@mixin progress-container {
background-color: $progress-background;
height: $progress-height;
margin-bottom: $progress-margin-bottom;
border-radius: $progress-radius;
}
/// Adds styles for the inner meter of a progress bar.
@mixin progress-meter {
position: relative;
display: block;
width: 0%;
height: 100%;
background-color: $progress-meter-background;
border-radius: $global-radius;
}
/// Adds styles for text in the progress meter.
@mixin progress-meter-text {
position: absolute;
top: 50%;
#{$global-left}: 50%;
transform: translate(-50%, -50%);
margin: 0;
font-size: 0.75rem;
font-weight: bold;
color: $white;
white-space: nowrap;
}
@mixin foundation-progress-bar {
// Progress bar
.progress {
@include progress-container;
@each $name, $color in $foundation-colors {
&.#{$name} {
.progress-meter {
background-color: $color;
}
}
}
}
// Progress bar meter
.progress-meter {
@include progress-meter;
// Progress bar meter text
.progress-meter-text {
@include progress-meter-text;
}
}
}

156
app/vendor/foundation/scss/components/_reveal.scss vendored Normal file
View File

@ -0,0 +1,156 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group reveal
////
/// Default background color of a modal.
/// @type Color
$reveal-background: $white !default;
/// Default width of a modal, with no class applied.
/// @type Number
$reveal-width: 600px !default;
/// Default maximum width of a modal.
/// @type Number
$reveal-max-width: $global-width !default;
/// Offset from the top of the window when a modal is added.
/// @type Number
$reveal-offset: rem-calc(100) !default;
/// Default padding inside a modal.
/// @type Number
$reveal-padding: $global-padding !default;
/// Default border around a modal.
/// @type Number
$reveal-border: 1px solid $medium-gray !default;
/// Default radius for modal.
/// @type Number
$reveal-radius: $global-radius !default;
/// z-index for modals. The overlay uses this value, while the modal itself uses this value plus one.
/// @type Number
$reveal-zindex: 1005 !default;
/// Background color of modal overlays.
/// @type Color
$reveal-overlay-background: rgba($black, 0.45) !default;
/// Adds styles for a modal overlay.
/// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay.
@mixin reveal-overlay {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: $reveal-zindex;
background-color: $reveal-overlay-background;
overflow-y: scroll;
}
/// Adds base styles for a modal.
@mixin reveal-modal-base {
@include disable-mouse-outline;
display: none;
z-index: $reveal-zindex + 1;
padding: $reveal-padding;
border: $reveal-border;
margin: 100px auto 0;
background-color: $reveal-background;
border-radius: $reveal-radius;
@include breakpoint(medium) {
min-height: 0;
}
// Make sure rows don't have a min-width on them
.column,
.columns {
min-width: 0;
}
// Strip margins from the last item in the modal
> :last-child {
margin-bottom: 0;
}
}
/// Adjusts the width of a modal.
/// @param {Number} $width - Width of the modal. Generally a percentage.
/// @param {Number} $max-width [$reveal-max-width] - Maximum width of the modal.
@mixin reveal-modal-width(
$width: $reveal-width,
$max-width: $reveal-max-width
) {
@include breakpoint(medium) {
@extend %reveal-centered;
width: $width;
max-width: $reveal-max-width;
}
}
/// Creates a full-screen modal, which stretches the full width and height of the window.
@mixin reveal-modal-fullscreen {
// scss-lint:disable DuplicateProperty
top: 0;
left: 0;
width: 100%;
height: 100%;
height: 100vh;
min-height: 100vh;
max-width: none;
margin-left: 0;
border: 0;
}
@mixin foundation-reveal {
body.is-reveal-open {
overflow: hidden;
}
// Overlay
.reveal-overlay {
@include reveal-overlay;
}
// Modal container
.reveal {
@include reveal-modal-base;
@include reveal-modal-width($reveal-width);
position: absolute;
overflow-y: auto;
// Remove padding
&.collapse {
padding: 0;
}
// Placeholder selector for medium-and-up modals
// Prevents duplicate CSS when defining multiple Reveal sizes
@include breakpoint(medium) {
%reveal-centered {
left: auto;
right: auto;
margin: 0 auto;
}
}
// Sizing classes
&.tiny { @include reveal-modal-width(30%); }
&.small { @include reveal-modal-width(50%); }
&.large { @include reveal-modal-width(90%); }
// Full-screen mode
&.full {
@include reveal-modal-fullscreen;
}
}
}

158
app/vendor/foundation/scss/components/_slider.scss vendored Normal file
View File

@ -0,0 +1,158 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// [TODO] Check how plugin confirms disabled or vertical status
// [TODO] Check if transition: all; is necessary
////
/// @group slider
////
/// Default height of the slider.
/// @type Number
$slider-height: 0.5rem !default;
/// Default slider width of a vertical slider.
/// @type Number
$slider-width-vertical: $slider-height !default;
/// Default background color of the slider's track.
/// @type Color
$slider-background: $light-gray !default;
/// Default color of the active fill color of the slider.
/// @type Color
$slider-fill-background: $medium-gray !default;
/// Default height of the handle of the slider.
/// @type Number
$slider-handle-height: 1.4rem !default;
/// Default width of the handle of the slider.
/// @type Number
$slider-handle-width: 1.4rem !default;
/// Default color of the handle for the slider.
/// @type Color
$slider-handle-background: $primary-color !default;
/// Default fade amount of a disabled slider.
/// @type Number
$slider-opacity-disabled: 0.25 !default;
/// Default radius for slider.
/// @type Number
$slider-radius: $global-radius !default;
/// Transition properties to apply to the slider handle and fill.
/// @type Transition
$slider-transition: all 0.2s ease-in-out !default;
/// Adds the general styles for sliders.
@mixin slider-container {
position: relative;
height: $slider-height;
margin-top: 1.25rem;
margin-bottom: 2.25rem;
background-color: $slider-background;
cursor: pointer;
user-select: none;
touch-action: none;
}
/// Adds the general styles for active fill for sliders.
@mixin slider-fill {
position: absolute;
top: 0;
left: 0;
display: inline-block;
max-width: 100%;
height: $slider-height;
background-color: $slider-fill-background;
transition: $slider-transition;
&.is-dragging {
transition: all 0s linear;
}
}
/// Adds the general styles for the slider handles.
@mixin slider-handle {
@include disable-mouse-outline;
@include vertical-center;
position: absolute;
left: 0;
z-index: 1;
display: inline-block;
width: $slider-handle-width;
height: $slider-handle-height;
background-color: $slider-handle-background;
transition: $slider-transition;
touch-action: manipulation;
border-radius: $slider-radius;
&:hover {
background-color: scale-color($slider-handle-background, $lightness: -15%);
}
&.is-dragging {
transition: all 0s linear;
}
}
@mixin slider-disabled {
opacity: $slider-opacity-disabled;
cursor: not-allowed;
}
@mixin slider-vertical {
display: inline-block;
width: $slider-width-vertical;
height: 12.5rem;
margin: 0 1.25rem;
transform: scale(1, -1);
.slider-fill {
top: 0;
width: $slider-width-vertical;
max-height: 100%;
}
.slider-handle {
position: absolute;
top: 0;
left: 50%;
width: $slider-handle-height;
height: $slider-handle-width;
transform: translateX(-50%);
}
}
@mixin foundation-slider {
// Container
.slider {
@include slider-container;
}
// Fill area
.slider-fill {
@include slider-fill;
}
// Draggable handle
.slider-handle {
@include slider-handle;
}
// Disabled state
.slider.disabled,
.slider[disabled] {
@include slider-disabled;
}
// Vertical slider
.slider.vertical {
@include slider-vertical;
}
}

38
app/vendor/foundation/scss/components/_sticky.scss vendored Normal file
View File

@ -0,0 +1,38 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@mixin foundation-sticky {
.sticky-container {
position: relative;
}
.sticky {
position: absolute;
z-index: 0;
transform: translate3d(0, 0, 0);
}
.sticky.is-stuck {
position: fixed;
z-index: 5;
&.is-at-top {
top: 0;
}
&.is-at-bottom {
bottom: 0;
}
}
.sticky.is-anchored {
position: absolute;
left: auto;
right: auto;
&.is-at-bottom {
bottom: 0;
}
}
}

232
app/vendor/foundation/scss/components/_switch.scss vendored Normal file
View File

@ -0,0 +1,232 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group switch
////
/// Background color of a switch.
/// @type Color
$switch-background: $medium-gray !default;
/// Background active color of a switch.
/// @type Color
$switch-background-active: $primary-color !default;
/// Height of a switch, with no class applied.
/// @type Number
$switch-height: 2rem !default;
/// Height of a switch with .tiny class.
/// @type Number
$switch-height-tiny: 1.5rem !default;
/// Height of a switch with .small class.
/// @type Number
$switch-height-small: 1.75rem !default;
/// Height of a switch with .large class.
/// @type Number
$switch-height-large: 2.5rem !default;
/// Border radius of the switch
/// @type Number
$switch-radius: $global-radius !default;
/// border around a modal.
/// @type Number
$switch-margin: $global-margin !default;
/// Background color for the switch container and paddle.
/// @type Color
$switch-paddle-background: $white !default;
/// Spacing between a switch paddle and the edge of the body.
/// @type Number
$switch-paddle-offset: 0.25rem !default;
/// border radius of the switch paddle
/// @type Number
$switch-paddle-radius: $global-radius !default;
/// switch transition.
/// @type Number
$switch-paddle-transition: all 0.25s ease-out !default;
// make them variables
// ask about accessibility on label
// change class name for text
/// Adds styles for a switch container. Apply this to a container class.
@mixin switch-container {
margin-bottom: $switch-margin;
outline: 0;
position: relative;
user-select: none;
// These properties cascade down to the switch text
color: $white;
font-weight: bold;
font-size: rem-calc(14);
}
/// Adds styles for a switch input. Apply this to an `<input>` within a switch.
@mixin switch-input {
opacity: 0;
position: absolute;
}
/// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
@mixin switch-paddle {
background: $switch-background;
cursor: pointer;
display: block;
position: relative;
width: 4rem;
height: $switch-height;
transition: $switch-paddle-transition;
border-radius: $switch-radius;
// Resetting these <label> presets so type styles cascade down
color: inherit;
font-weight: inherit;
// Needed to override specificity
input + & {
margin: 0;
}
// The paddle itself
&::after {
background: $switch-paddle-background;
content: '';
display: block;
position: absolute;
height: 1.5rem;
#{$global-left}: 0.25rem;
top: 0.25rem;
width: 1.5rem;
transition: $switch-paddle-transition;
transform: translate3d(0, 0, 0);
border-radius: $switch-paddle-radius;
}
// Change the visual style when the switch is active
input:checked ~ & {
background: $switch-background-active;
&::after {
#{$global-left}: 2.25rem;
}
}
input:focus ~ & {
@include disable-mouse-outline;
}
}
/// Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch `<label>`.
@mixin switch-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/// Adds styles for the active state text within a switch.
@mixin switch-text-active {
#{$global-left}: 8%;
display: none;
input:checked + label > & {
display: block;
}
}
/// Adds styles for the inactive state text within a switch.
@mixin switch-text-inactive {
#{$global-right}: 15%;
input:checked + label > & {
display: none;
}
}
/// Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.
/// @param {Number} $font-size [1rem] - Font size of label text within the switch.
/// @param {Number} $width [4rem] - Width of the switch body.
/// @param {Number} $height [2rem] - Height of the switch body.
/// @param {Number} $paddle-width [1.5rem] - Width of the switch paddle.
/// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body.
@mixin switch-size(
$font-size: 1rem,
$width: 4rem,
$height: 2rem,
$paddle-width: 1.5rem,
$paddle-offset: 0.25rem
) {
$paddle-height: $height - ($paddle-offset * 2);
$paddle-left-active: $width - $paddle-width - $paddle-offset;
.switch-paddle {
width: $width;
height: $height;
font-size: $font-size;
}
.switch-paddle::after {
width: $paddle-width;
height: $paddle-height;
}
input:checked ~ .switch-paddle:after {
#{$global-left}: $paddle-left-active;
}
}
@mixin foundation-switch {
// Container class
.switch {
@include switch-container;
}
// <input> element
.switch-input {
@include switch-input;
}
// <label> element
.switch-paddle {
@include switch-paddle;
}
// Base label text styles
%switch-text {
@include switch-text;
}
// Active label text styles
.switch-active {
@extend %switch-text;
@include switch-text-active;
}
// Inactive label text styles
.switch-inactive {
@extend %switch-text;
@include switch-text-inactive;
}
// Switch sizes
.switch.tiny {
@include switch-size(rem-calc(10), 3rem, $switch-height-tiny, 1rem, $switch-paddle-offset);
}
.switch.small {
@include switch-size(rem-calc(12), 3.5rem, $switch-height-small, 1.25rem, $switch-paddle-offset);
}
.switch.large {
@include switch-size(rem-calc(16), 5rem, $switch-height-large, 2rem, $switch-paddle-offset);
}
}

213
app/vendor/foundation/scss/components/_table.scss vendored Normal file
View File

@ -0,0 +1,213 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// scss-lint:disable MergeableSelector, QualifyingElement
////
/// @group table
////
/// Defualt color for table background.
/// @type Color
$table-background: $white !default;
/// Defualt scale for darkening the striped table rows and the table border.
/// @type Number
$table-color-scale: 5% !default;
/// Defualt style for table border.
/// @type List
$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;
/// Defualt padding for table.
/// @type Number
$table-padding: rem-calc(8 10 10) !default;
/// Defualt scale for darkening the table rows on hover.
/// @type Number
$table-hover-scale: 2% !default;
/// Defualt color of standard rows on hover.
/// @type List
$table-row-hover: darken($table-background, $table-hover-scale) !default;
/// Defualt color of striped rows on hover.
/// @type List
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
/// Defualt background color for striped rows.
/// @type Color
$table-striped-background: smart-scale($table-background, $table-color-scale) !default;
/// Defualt value for showing the stripe on rows of the tables, excluding the header and footer If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or anyother value, the table rows will have no striping.
/// @type Keyoword
$table-stripe: even !default;
/// Defualt color for header background.
/// @type Color
$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
/// Defualt color for footer background.
/// @type Color
$table-foot-background: smart-scale($table-background, $table-color-scale) !default;
/// Defualt font color for header.
/// @type Color
$table-head-font-color: $body-font-color !default;
/// Defualt value for showing the header when using stacked tables.
/// @type Boolean
$show-header-for-stacked: false !default;
/// Adds the general styles for tables.
/// @param {Keyword} $stripe [$table-stripe] - Uses kewords even, odd, or none to darken rows of the table. The defualt value is even.
@mixin table($stripe: $table-stripe) {
margin-bottom: $global-margin;
border-radius: $global-radius;
@at-root {
thead,
tbody,
tfoot {
border: $table-border;
background-color: $table-background;
}
// Caption
caption {
font-weight: $global-weight-bold;
padding: $table-padding;
}
// Table head and foot
thead,
tfoot {
background: $table-head-background;
color: $table-head-font-color;
// Rows within head and foot
tr {
background: transparent;
}
// Cells within head and foot
th,
td {
padding: $table-padding;
font-weight: $global-weight-bold;
text-align: #{$global-left};
}
}
// Table rows
tbody {
tr {
// If stripe is set to even, darken the even rows.
@if $stripe == even {
&:nth-child(even) {
background-color: $table-striped-background;
}
}
// If stripe is set to odd, darken the odd rows.
@else if $stripe == odd {
&:nth-child(odd) {
background-color: $table-striped-background;
}
}
}
th,
td {
padding: $table-padding;
}
}
}
}
/// Adds the ability to horizontally scroll the table when the content overflows horizontally.
@mixin table-scroll {
display: block;
width: 100%;
overflow-x: auto;
}
/// Slightly darkens the table rows on hover.
@mixin table-hover {
tr {
//Darkens the non-striped table rows on hover.
&:hover {
background-color: $table-row-hover;
}
//Darkens the even striped table rows.
@if($table-stripe == even) {
&:nth-of-type(even):hover {
background-color: $table-row-stripe-hover;
}
}
//Darkens the odd striped table rows.
@elseif($table-stripe == odd) {
&:nth-of-type(odd):hover {
background-color: $table-row-stripe-hover;
}
}
}
}
/// Adds styles for a stacked table. Useful for small-screen layouts.
/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.
@mixin table-stack($header: $show-header-for-stacked) {
@if $header {
thead {
th:first-child {
display: block;
}
th {
display: none;
}
}
}
@else {
thead {
display: none;
}
}
tfoot {
display: none;
}
tr,
th,
td {
display: block;
}
td {
border-top: 0;
}
}
@mixin foundation-table {
table {
@include table;
}
table.stack {
@include breakpoint(medium down) {
@include table-stack;
}
}
table.scroll {
@include table-scroll;
}
table.hover {
@include table-hover;
}
}

170
app/vendor/foundation/scss/components/_tabs.scss vendored Normal file
View File

@ -0,0 +1,170 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group tabs
////
/// Default margin of the tab bar.
/// @type Number
$tab-margin: 0 !default;
/// Default background color of a tab bar.
/// @type Color
$tab-background: $white !default;
/// active background color of a tab bar.
/// @type Color
$tab-background-active: $light-gray !default;
/// Default border color of tab content.
/// @type Color
$tab-border: $light-gray !default;
/// Default text color for items in a Menu.
/// @type Color
$tab-item-color: foreground($tab-background, $primary-color) !default;
/// Default background color on hover for items in a Menu.
$tab-item-background-hover: $white !default;
/// Default padding of a a tab item.
/// @type Number
$tab-item-padding: 1.25rem 1.5rem !default;
/// Maximum number of `expand-n` classes to include in the CSS.
/// @type Number
$tab-expand-max: 6 !default;
/// Default background color of tab content.
/// @type Color
$tab-content-background: $white !default;
/// Default border color of tab content.
/// @type Color
$tab-content-border: $light-gray !default;
/// Default text color of tab content.
/// @type Color
$tab-content-color: foreground($tab-background, $primary-color) !default;
/// Default padding for tab content.
/// @type Number | List
$tab-content-padding: 1rem !default;
/// Adds styles for a tab container. Apply this to a `<ul>`.
@mixin tabs-container {
@include clearfix;
margin: $tab-margin;
list-style-type: none;
background: $tab-background;
border: 1px solid $tab-content-border;
}
/// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
@mixin tabs-container-vertical {
> li {
width: auto;
float: none;
display: block;
}
}
/// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container.
@mixin tabs-title {
float: #{$global-left};
> a {
display: block;
padding: $tab-item-padding;
line-height: 1;
font-size: 12px;
color: $tab-item-color;
&:hover {
background: $tab-item-background-hover;
}
&:focus,
&[aria-selected='true'] {
background: $tab-background-active;
}
}
}
/// Adds styles for the wrapper that surrounds a tab group's content panes.
@mixin tabs-content {
background: $tab-content-background;
transition: all 0.5s ease;
border: 1px solid $tab-content-border;
border-top: 0;
}
/// Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with `tabs-content()`.
@mixin tabs-content-vertical {
border: 1px solid $tab-content-border;
border-#{$global-left}: 0;
}
/// Adds styles for an individual tab content panel within the tab content container.
@mixin tabs-panel {
display: none;
padding: $tab-content-padding;
&.is-active {
display: block;
}
}
@mixin foundation-tabs {
.tabs {
@include tabs-container;
}
// Vertical
.tabs.vertical {
@include tabs-container-vertical;
}
// Simple
.tabs.simple {
> li > a {
padding: 0;
&:hover {
background: transparent;
}
}
}
// Primary color
.tabs.primary {
background: $primary-color;
> li > a {
color: foreground($primary-color);
&:hover,
&:focus {
background: smart-scale($primary-color);
}
}
}
.tabs-title {
@include tabs-title;
}
.tabs-content {
@include tabs-content;
}
.tabs-content.vertical {
@include tabs-content-vertical;
}
.tabs-panel {
@include tabs-panel;
}
}

54
app/vendor/foundation/scss/components/_thumbnail.scss vendored Normal file
View File

@ -0,0 +1,54 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group thumbnail
////
/// Border around thumbnail images.
/// @type Border
$thumbnail-border: solid 4px $white !default;
/// Bottom margin for thumbnail images.
/// @type Length
$thumbnail-margin-bottom: $global-margin !default;
/// Box shadow under thumbnail images.
/// @type Shadow
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;
/// Box shadow under thumbnail images.
/// @type Shadow
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;
/// Transition proprties for thumbnail images.
/// @type Transition
$thumbnail-transition: box-shadow 200ms ease-out !default;
/// Default radius for thumbnail images.
/// @type Number
$thumbnail-radius: $global-radius !default;
/// Adds thumbnail styles to an element.
@mixin thumbnail {
border: $thumbnail-border;
box-shadow: $thumbnail-shadow;
display: inline-block;
line-height: 0;
max-width: 100%;
transition: $thumbnail-transition;
border-radius: $thumbnail-radius;
margin-bottom: $thumbnail-margin-bottom;
&:hover,
&:focus {
box-shadow: $thumbnail-shadow-hover;
}
}
@mixin foundation-thumbnail {
.thumbnail {
@include thumbnail;
}
}

68
app/vendor/foundation/scss/components/_title-bar.scss vendored Normal file
View File

@ -0,0 +1,68 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group title-bar
////
/// Background color of a title bar.
/// @type Color
$titlebar-background: $black !default;
/// Color of text inside a title bar.
/// @type Color
$titlebar-color: $white !default;
/// Padding inside a title bar.
/// @type Length
$titlebar-padding: 0.5rem !default;
/// Font weight of text inside a title bar.
/// @type Weight
$titlebar-text-font-weight: bold !default;
/// Color of menu icons inside a title bar.
/// @type Color
$titlebar-icon-color: $white !default;
/// Color of menu icons inside a title bar on hover.
/// @type Color
$titlebar-icon-color-hover: $medium-gray !default;
/// Spacing between the menu icon and text inside a title bar.
/// @type Length
$titlebar-icon-spacing: 0.25rem !default;
@mixin foundation-title-bar {
.title-bar {
@include clearfix;
background: $titlebar-background;
color: $titlebar-color;
padding: $titlebar-padding;
.menu-icon {
margin-#{$global-left}: $titlebar-icon-spacing;
margin-#{$global-right}: $titlebar-padding;
}
}
.title-bar-left {
float: left;
}
.title-bar-right {
float: right;
text-align: right;
}
.title-bar-title {
font-weight: $titlebar-text-font-weight;
vertical-align: middle;
display: inline-block;
}
.menu-icon {
@include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
}
}

100
app/vendor/foundation/scss/components/_tooltip.scss vendored Normal file
View File

@ -0,0 +1,100 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group tooltip
////
/// Default color of the tooltip background.
/// @type Color
$tooltip-background-color: $black !default;
/// Default color of the tooltip font.
/// @type Color
$tooltip-color: $white !default;
/// Default padding of the tooltip background.
/// @type Number
$tooltip-padding: 0.75rem !default;
/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.
/// @type Number
$tooltip-font-size: $small-font-size !default;
/// Default pip width for tooltips.
/// @type Number
$tooltip-pip-width: 0.75rem !default;
/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.
/// @type Number
$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
/// Default pip offset for tooltips. This controls how far the pip is indented from the left edge of the tooltip.
/// @type Number
$tooltip-pip-offset: 1.25rem !default;
/// Default radius for tooltips.
/// @type Number
$tooltip-radius: $global-radius !default;
@mixin has-tip {
border-bottom: dotted 1px $dark-gray;
font-weight: bold;
position: relative;
display: inline-block;
cursor: help;
}
@mixin tooltip {
background-color: $tooltip-background-color;
color: $tooltip-color;
font-size: $tooltip-font-size;
padding: $tooltip-padding;
position: absolute;
z-index: 10;
top: calc(100% + #{$tooltip-pip-height});
max-width: 10rem !important;
border-radius: $tooltip-radius;
&::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
bottom: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
&.top::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
top: 100%;
bottom: auto;
}
&.left::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
bottom: auto;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
&.right::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
bottom: auto;
left: auto;
right: 100%;
top: 50%;
transform: translateY(-50%);
}
}
@mixin foundation-tooltip {
.has-tip {
@include has-tip;
}
.tooltip {
@include tooltip;
}
}

89
app/vendor/foundation/scss/components/_top-bar.scss vendored Normal file
View File

@ -0,0 +1,89 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group top-bar
////
/// Padding for the top bar.
/// @type Number
$topbar-padding: 0.5rem !default;
/// Background color for the top bar. This color also cascades to menus within the top bar.
/// @type Color
$topbar-background: $light-gray !default;
/// Color for links inside a top bar menu.
/// @type Color
$topbar-link-color: $primary-color !default;
/// Width of `<input>` elements inside the top bar.
/// @type Number
$topbar-input-width: 200px !default;
/// Adds styles for a top bar container.
@mixin top-bar-container {
@include clearfix;
padding: $topbar-padding;
&,
ul {
background-color: $topbar-background;
}
a {
color: $topbar-link-color;
}
input {
width: $topbar-input-width;
margin-#{$global-right}: 1rem;
}
input.button {
width: auto;
}
}
/// makes sections stacked
@mixin top-bar-stacked {
// Sub-sections
.top-bar-right {
width: 100%;
}
.top-bar-left {
width: 100%;
}
}
@mixin foundation-top-bar {
// Top bar container
.top-bar {
@include top-bar-container;
}
// Generate classes for stacking on each screen size (defined in $breakpoint-classes)
@each $size in $breakpoint-classes {
.stacked-for-#{$size} {
@include breakpoint($size down) {
@include top-bar-stacked;
}
}
}
// Stack on small screens as default
@include breakpoint(small only) {
@include top-bar-stacked;
}
// Sub-sections
.top-bar-left {
float: left;
}
.top-bar-right {
float: right;
}
}

131
app/vendor/foundation/scss/components/_visibility.scss vendored Normal file
View File

@ -0,0 +1,131 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
/// Hide an element by default, only displaying it above a certain screen size.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
@mixin show-for($size) {
$size: map-get($breakpoints, $size);
$size: -zf-bp-to-em($size) - (1/16);
@include breakpoint($size down) {
display: none !important;
}
}
/// Hide an element by default, only displaying it within a certain breakpoint.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
@mixin show-for-only($size) {
$lower-bound-size: map-get($breakpoints, $size);
$upper-bound-size: -zf-map-next($breakpoints, $size);
// more often than not this will be correct, just one time round the loop it won't so set in scope here
$lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16);
// test actual lower-bound-size, if 0 set it to 0em
@if $lower-bound-size == 0 {
$lower-bound: -zf-bp-to-em($lower-bound-size);
}
@if $upper-bound-size == null {
@media screen and (max-width: $lower-bound) {
display: none !important;
}
}
@else {
$upper-bound: -zf-bp-to-em($upper-bound-size);
@media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
display: none !important;
}
}
}
/// Show an element by default, and hide it above a certain screen size.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
@mixin hide-for($size) {
@include breakpoint($size) {
display: none !important;
}
}
/// Show an element by default, and hide it above a certain screen size.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
@mixin hide-for-only($size) {
@include breakpoint($size only) {
display: none !important;
}
}
@mixin foundation-visibility-classes {
// Basic hiding classes
.hide {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Responsive visibility classes
@each $size in $breakpoint-classes {
@if $size != small {
.hide-for-#{$size} {
@include hide-for($size);
}
.show-for-#{$size} {
@include show-for($size);
}
}
.hide-for-#{$size}-only {
@include hide-for-only($size);
}
.show-for-#{$size}-only {
@include show-for-only($size);
}
}
// Screen reader visibility classes
// Need a "hide-for-sr" class? Add aria-hidden='true' to the element
.show-for-sr,
.show-on-focus {
@include element-invisible;
}
// Only display the element when it's focused
.show-on-focus {
&:active,
&:focus {
@include element-invisible-off;
}
}
// Landscape and portrait visibility
.show-for-landscape,
.hide-for-portrait {
display: block !important;
@include breakpoint(landscape) {
display: block !important;
}
@include breakpoint(portrait) {
display: none !important;
}
}
.hide-for-landscape,
.show-for-portrait {
display: none !important;
@include breakpoint(landscape) {
display: none !important;
}
@include breakpoint(portrait) {
display: block !important;
}
}
}

36
app/vendor/foundation/scss/forms/_checkbox.scss vendored Normal file
View File

@ -0,0 +1,36 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
@mixin foundation-form-checkbox {
[type='file'],
[type='checkbox'],
[type='radio'] {
margin: 0 0 $form-spacing;
}
// Styles for input/label siblings
[type='checkbox'] + label,
[type='radio'] + label {
display: inline-block;
margin-#{$global-left}: $form-spacing * 0.5;
margin-#{$global-right}: $form-spacing;
margin-bottom: 0;
vertical-align: baseline;
}
// Styles for inputs inside labels
label > [type='checkbox'],
label > [type='label'] {
margin-#{$global-right}: $form-spacing * 0.5;
}
// Normalize file input width
[type='file'] {
width: 100%;
}
}

82
app/vendor/foundation/scss/forms/_error.scss vendored Normal file
View File

@ -0,0 +1,82 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group abide
////
/// Sets if error styles should be added to inputs.
/// @type Boolean
$abide-inputs: true !default;
/// Sets if error styles should be added to labels.
/// @type Boolean
$abide-labels: true !default;
/// Background color to use for invalid text inputs.
/// @type Color
$input-background-invalid: $alert-color !default;
/// Color to use for labels of invalid inputs.
/// @type Color
$form-label-color-invalid: $alert-color !default;
/// Default font color for form error text.
/// @type Color
$input-error-color: $alert-color !default;
/// Default font size for form error text.
/// @type Number
$input-error-font-size: rem-calc(12) !default;
/// Default font weight for form error text.
/// @type Keyword
$input-error-font-weight: $global-weight-bold !default;
/// Styles the background and border of an input field to have an error state.
///
/// @param {Color} $background [$alert-color] - Color to use for the background and border.
@mixin form-input-error(
$background: $alert-color
) {
&:not(:focus) {
background-color: rgba($background, 0.1);
border-color: $background;
}
}
/// Adds error styles to a form element, using the values in the settings file.
@mixin form-error {
display: none;
margin-top: $form-spacing * -0.5;
margin-bottom: $form-spacing;
font-size: $input-error-font-size;
font-weight: $input-error-font-weight;
color: $input-error-color;
}
@mixin foundation-form-error {
@if $abide-inputs {
// Error class for invalid inputs
.is-invalid-input {
@include form-input-error;
}
}
@if $abide-labels {
// Error class for labels of invalid outputs
.is-invalid-label {
color: $form-label-color-invalid;
}
}
// Form error element
.form-error {
@include form-error;
&.is-visible {
display: block;
}
}
}

53
app/vendor/foundation/scss/forms/_fieldset.scss vendored Normal file
View File

@ -0,0 +1,53 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Default border around custom fieldsets.
/// @type Border
$fieldset-border: 1px solid $medium-gray !default;
/// Default padding inside custom fieldsets.
/// @type Number
$fieldset-padding: rem-calc(20) !default;
/// Default margin around custom fieldsets.
/// @type Number
$fieldset-margin: rem-calc(18 0) !default;
/// Default padding between the legend text and fieldset border.
/// @type Number
$legend-padding: rem-calc(0 3) !default;
@mixin fieldset {
border: $fieldset-border;
padding: $fieldset-padding;
margin: $fieldset-margin;
legend {
// Covers up the fieldset's border to create artificial padding
background: $body-background;
padding: $legend-padding;
margin: 0;
margin-#{$global-left}: rem-calc(-3);
}
}
@mixin foundation-form-fieldset {
fieldset {
border: 0;
padding: 0;
margin: 0;
}
legend {
margin-bottom: $form-spacing * 0.5;
}
.fieldset {
@include fieldset;
}
}

32
app/vendor/foundation/scss/forms/_forms.scss vendored Normal file
View File

@ -0,0 +1,32 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Global spacing for form elements.
/// @type Number
$form-spacing: rem-calc(16) !default;
@import
'text',
'checkbox',
'label',
'help-text',
'input-group',
'fieldset',
'select',
'error';
@mixin foundation-forms {
@include foundation-form-text;
@include foundation-form-checkbox;
@include foundation-form-label;
@include foundation-form-helptext;
@include foundation-form-prepostfix;
@include foundation-form-fieldset;
@include foundation-form-select;
@include foundation-form-error;
}

30
app/vendor/foundation/scss/forms/_help-text.scss vendored Normal file
View File

@ -0,0 +1,30 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Default color for help text.
/// @type Color
$helptext-color: #333 !default;
/// Default font size for help text.
/// @type Number
$helptext-font-size: rem-calc(13) !default;
/// Default font style for help text.
/// @type Keyword
$helptext-font-style: italic !default;
@mixin foundation-form-helptext {
.help-text {
$margin-top: ($form-spacing * 0.5) * -1;
margin-top: $margin-top;
font-size: $helptext-font-size;
font-style: $helptext-font-style;
color: $helptext-color;
}
}

91
app/vendor/foundation/scss/forms/_input-group.scss vendored Normal file
View File

@ -0,0 +1,91 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Color of labels prefixed to an input.
/// @type Color
$input-prefix-color: $black !default;
/// Background color of labels prefixed to an input.
/// @type Color
$input-prefix-background: $light-gray !default;
/// Border around labels prefixed to an input.
/// @type Border
$input-prefix-border: 1px solid $medium-gray !default;
/// Left/right padding of an pre/postfixed input label
$input-prefix-padding: 1rem !default;
@mixin foundation-form-prepostfix {
$height: ($input-font-size + $form-spacing * 1.5);
.input-group {
display: table;
width: 100%;
margin-bottom: $form-spacing;
> :first-child {
border-radius: $global-radius 0 0 $global-radius;
}
> :last-child {
> * {
border-radius: 0 $global-radius $global-radius 0;
}
}
}
%input-group-child {
display: table-cell;
margin: 0;
vertical-align: middle;
}
.input-group-label {
@extend %input-group-child;
text-align: center;
width: 1%;
height: 100%;
padding: 0 $input-prefix-padding;
background: $input-prefix-background;
color: $input-prefix-color;
border: $input-prefix-border;
@if has-value($input-prefix-border) {
&:first-child {
border-#{$global-right}: 0;
}
&:last-child {
border-#{$global-left}: 0;
}
}
}
.input-group-field {
@extend %input-group-child;
border-radius: 0;
height: $height;
}
.input-group-button {
@extend %input-group-child;
height: 100%;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 1%;
a,
input,
button {
margin: 0;
}
}
}

48
app/vendor/foundation/scss/forms/_label.scss vendored Normal file
View File

@ -0,0 +1,48 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Color for form labels.
/// @type Color
$form-label-color: $black !default;
/// Font size for form labels.
/// @type Number
$form-label-font-size: rem-calc(14) !default;
/// Font weight for form labels.
/// @type Keyword
$form-label-font-weight: $global-weight-normal !default;
/// Line height for form labels. The higher the number, the more space between the label and its input field.
/// @type Number
$form-label-line-height: 1.8 !default;
@mixin form-label {
display: block;
margin: 0;
font-size: $form-label-font-size;
font-weight: $form-label-font-weight;
line-height: $form-label-line-height;
color: $form-label-color;
}
@mixin form-label-middle {
$input-border-width: get-border-value($input-border, width);
margin: 0 0 $form-spacing;
padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0;
}
@mixin foundation-form-label {
label {
@include form-label;
&.middle {
@include form-label-middle;
}
}
}

63
app/vendor/foundation/scss/forms/_select.scss vendored Normal file
View File

@ -0,0 +1,63 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Background color for select menus.
/// @type Color
$select-background: $white !default;
/// Color of the dropdown triangle inside select menus. Set to `transparent` to remove it entirely.
/// @type Color
$select-triangle-color: #333 !default;
/// Default radius for select menus.
/// @type Color
$select-radius: $global-radius !default;
@mixin form-select {
$height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
height: $height;
padding: ($form-spacing / 2);
border: $input-border;
margin: 0 0 $form-spacing;
font-size: $input-font-size;
font-family: $input-font-family;
line-height: normal;
color: $input-color;
background-color: $select-background;
border-radius: $select-radius;
-webkit-appearance: none;
-moz-appearance: none;
@if $select-triangle-color != transparent {
@include background-triangle($select-triangle-color);
background-size: 9px 6px;
background-position: $global-right ($form-spacing / 2) center;
background-repeat: no-repeat;
}
// Disabled state
&:disabled {
background-color: $input-background-disabled;
cursor: $input-cursor-disabled;
}
// Hide the dropdown arrow shown in newer IE versions
&::-ms-expand {
display: none;
}
&[multiple] {
height: auto;
}
}
@mixin foundation-form-select {
select {
@include form-select;
}
}

154
app/vendor/foundation/scss/forms/_text.scss vendored Normal file
View File

@ -0,0 +1,154 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group forms
////
/// Font color of text inputs.
/// @type Color
$input-color: $black !default;
/// Font family of text inputs.
/// @type Font
$input-font-family: inherit !default;
/// Font size of text inputs.
/// @type Number
$input-font-size: rem-calc(16) !default;
/// Background color of text inputs.
/// @type Color
$input-background: $white !default;
/// Background color of focused of text inputs.
/// @type Color
$input-background-focus: $white !default;
/// Background color of disabled text inputs.
/// @type Color
$input-background-disabled: $light-gray !default;
/// Border around text inputs.
/// @type Border
$input-border: 1px solid $medium-gray !default;
/// Border around focused text inputs.
/// @type Color
$input-border-focus: 1px solid $dark-gray !default;
/// Box shadow inside text inputs when not focused.
/// @type Shadow
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;
/// Box shadow outside text inputs when focused.
/// @type Shadow
$input-shadow-focus: 0 0 5px $medium-gray !default;
/// Cursor to use when hovering over a disabled text input.
/// @type Cursor
$input-cursor-disabled: default !default;
/// Properties to transition on text inputs.
/// @type Transition
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out !default;
/// Enables the up/down buttons that Chrome and Firefox add to `<input type='number'>` elements.
/// @type Boolean
$input-number-spinners: true !default;
/// Radius for text inputs.
/// @type Border
$input-radius: $global-radius !default;
@mixin form-element {
$height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
display: block;
box-sizing: border-box;
width: 100%;
height: $height;
padding: $form-spacing / 2;
border: $input-border;
margin: 0 0 $form-spacing;
font-family: $input-font-family;
font-size: $input-font-size;
color: $input-color;
background-color: $input-background;
box-shadow: $input-shadow;
border-radius: $input-radius;
@if has-value($input-transition) {
transition: $input-transition;
}
// Focus state
&:focus {
border: $input-border-focus;
background-color: $input-background-focus;
outline: none;
box-shadow: $input-shadow-focus;
@if has-value($input-transition) {
transition: $input-transition;
}
}
}
@mixin foundation-form-text {
// Text inputs
#{text-inputs()},
textarea {
@include form-element;
-webkit-appearance: none;
-moz-appearance: none;
}
// Text areas
textarea {
max-width: 100%;
&[rows] {
height: auto;
}
}
// Disabled/readonly state
input,
textarea {
&:disabled,
&[readonly] {
background-color: $input-background-disabled;
cursor: $input-cursor-disabled;
}
}
// Reset styles on button-like inputs
[type='submit'],
[type='button'] {
border-radius: $global-radius;
-webkit-appearance: none;
-moz-appearance: none;
}
// Reset Normalize setting content-box to search elements
// scss-lint:disable QualifyingElement
input[type='search'] {
box-sizing: border-box;
}
// Number input styles
[type='number'] {
@if not $input-number-spinners {
-moz-appearance: textfield;
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
}
}

91
app/vendor/foundation/scss/foundation.scss vendored Normal file
View File

@ -0,0 +1,91 @@
/**
* Foundation for Sites by ZURB
* Version 6.1.1
* foundation.zurb.com
* Licensed under MIT Open Source
*/
// Sass utilities
@import 'util/util';
// Global variables and styles
@import 'global';
// Components
@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
@import 'components/dropdown-menu';
@import 'components/dropdown';
@import 'components/flex-video';
@import 'components/label';
@import 'components/media-object';
@import 'components/menu';
@import 'components/off-canvas';
@import 'components/orbit';
@import 'components/pagination';
@import 'components/progress-bar';
@import 'components/reveal';
@import 'components/slider';
@import 'components/sticky';
@import 'components/switch';
@import 'components/table';
@import 'components/tabs';
@import 'components/title-bar';
@import 'components/top-bar';
@import 'components/thumbnail';
@import 'components/tooltip';
@mixin foundation-everything($flex: false) {
@include foundation-global-styles;
@if not $flex {
@include foundation-grid;
}
@else {
@include foundation-flex-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;
}

153
app/vendor/foundation/scss/grid/_classes.scss vendored Normal file
View File

@ -0,0 +1,153 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group grid
////
/// Outputs CSS classes for the grid.
/// @access private
@mixin foundation-grid(
$row: 'row',
$column: 'column',
$column-row: 'column-row',
$push: 'push',
$pull: 'pull',
$center: 'centered',
$uncenter: 'uncentered',
$collapse: 'collapse',
$uncollapse: 'uncollapse',
$offset: 'offset',
$end: 'end',
$expanded: 'expanded'
) {
// Row
.#{$row} {
@include grid-row;
// Collapsing
&.#{$collapse} {
> .#{$column} { @include grid-col-collapse; }
}
// Nesting
& & {
@if $grid-column-gutter == null {
@each $breakpoint, $gutter in $grid-column-responsive-gutter {
@include breakpoint($breakpoint) {
@include grid-row-nest($gutter);
}
}
}
@else {
@include grid-row-nest($grid-column-gutter);
}
&.#{$collapse} {
margin-left: 0;
margin-right: 0;
}
}
// Expanded (full-width) row
&.#{$expanded} {
max-width: none;
}
}
// Column
.#{$column} {
@include grid-col;
@if $grid-column-align-edge {
&.#{$end} {
@include grid-col-end;
}
}
}
// Column row
// The double .row class is needed to bump up the specificity
.#{$column}.#{$row}.#{$row} {
float: none;
// To properly nest a column row, padding and margin is removed
.#{$row} & {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
}
@include -zf-each-breakpoint {
@for $i from 1 through $grid-column-count {
// Column width
.#{$-zf-size}-#{$i} {
@include grid-col-size($i);
}
// Source ordering
@if $i < $grid-column-count {
.#{$-zf-size}-#{$push}-#{$i} {
@include grid-col-pos($i);
}
.#{$-zf-size}-#{$pull}-#{$i} {
@include grid-col-pos(-$i);
}
}
// Offsets
$o: $i - 1;
.#{$-zf-size}-#{$offset}-#{$o} {
@include grid-col-off($o);
}
}
// Block grid
@for $i from 1 through $block-grid-max {
.#{$-zf-size}-up-#{$i} {
@include grid-layout($i);
}
}
// Responsive collapsing
.#{$-zf-size}-#{$collapse} {
> .#{$column} { @include grid-col-collapse; }
}
.#{$-zf-size}-#{$uncollapse} {
$gutter: null;
@if $grid-column-gutter {
$gutter: $grid-column-gutter;
}
@else {
$gutter: -zf-get-bp-val($grid-column-responsive-gutter, $-zf-size);
}
> .#{$column} { @include grid-col-uncollapse($gutter); }
}
// Positioning
.#{$-zf-size}-#{$center} {
@include grid-col-pos(center);
}
// Gutter adjustment
.#{$-zf-size}-#{$uncenter},
.#{$-zf-size}-#{$push}-0,
.#{$-zf-size}-#{$pull}-0 {
@include grid-col-unpos;
}
}
@if $column == 'column' {
.columns {
// scss-lint:disable PlaceholderInExtend
@extend .column;
}
}
}

124
app/vendor/foundation/scss/grid/_column.scss vendored Normal file
View File

@ -0,0 +1,124 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group grid
////
/// Calculates the width of a column based on a number of factors.
///
/// @param {Number|List} $columns
/// Width of the column. Accepts multiple values:
/// - A percentage value will make the column that exact size.
/// - A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.
/// - A string of the format "x of y" will make a column that is *x* columns wide, assuming *y* total columns for the parent.
///
/// @returns {Number} A calculated percentage value.
@function grid-column($columns) {
$width: 0%;
// Parsing percents, decimals, and column counts
@if type-of($columns) == 'number' {
@if unit($columns) == '%' {
$width: $columns;
}
@else if $columns < 1 {
$width: percentage($columns);
}
@else {
$width: percentage($columns / $grid-column-count);
}
}
// Parsing "n of n" expressions
@else if type-of($columns) == 'list' {
@if length($columns) != 3 {
@error 'Wrong syntax for grid-column(). Use the format "n of n".';
}
@else {
$width: percentage(nth($columns, 1) / nth($columns, 3));
}
}
// Anything else is incorrect
@else {
@error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or "n of n".';
}
@return $width;
}
/// Creates a grid column.
///
/// @param {Mixed} $columns [$grid-column-count] - Width of the column. Refer to the `grid-column()` function to see possible values.
/// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
@mixin grid-column(
$columns: $grid-column-count,
$gutter: $grid-column-gutter
) {
@if $gutter != null {
$gutter: rem-calc($gutter) / 2;
}
@else {
@each $breakpoint, $gutter in $grid-column-responsive-gutter {
$padding: rem-calc($gutter) / 2;
@include breakpoint($breakpoint) {
padding-left: $padding;
padding-right: $padding;
}
}
}
@include grid-column-size($columns);
float: $global-left;
padding-left: $gutter;
padding-right: $gutter;
@if $grid-column-align-edge {
&:last-child:not(:first-child) {
float: $global-right;
}
}
}
/// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.
///
/// @param {Number} $gutter [$grid-column-gutter] - Width of the gutters on either side of the column row.
@mixin grid-column-row(
$gutter: $grid-column-gutter
) {
@include grid-row;
@include grid-column($gutter: $gutter);
&,
&:last-child {
float: none;
}
}
/// Shorthand for `grid-column()`.
/// @alias grid-column
@function grid-col(
$columns: $grid-column-count
) {
@return grid-column($columns);
}
/// Shorthand for `grid-column()`.
/// @alias grid-column
@mixin grid-col(
$columns: $grid-column-count,
$gutter: $grid-column-gutter
) {
@include grid-column($columns, $gutter);
}
/// Shorthand for `grid-column-row()`.
/// @alias grid-column-row
@mixin grid-col-row(
$gutter: $grid-column-gutter
) {
@include grid-column-row($gutter);
}

281
app/vendor/foundation/scss/grid/_flex-grid.scss vendored Normal file
View File

@ -0,0 +1,281 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group flex-grid
////
$-zf-flex-justify: (
'left': flex-start,
'right': flex-end,
'center': center,
'justify': space-between,
'spaced': space-around,
);
$-zf-flex-align: (
'top': flex-start,
'bottom': flex-end,
'middle': center,
'stretch': stretch,
);
/// Creates a container for a flex grid row.
///
/// @param {Keyword|List} $behavior [null]
/// Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
/// @param {Number} $width [$grid-row-width] - Maximum width of the row.
/// @param {Number} $columns [null] - Number of columns to use for this row. If set to `null` (the default), the global column count will be used.
/// @param {Boolean} $base [true] - Set to `false` to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output.
/// @param {Number} $gutter [$grid-column-gutter] - Gutter to use when inverting margins, in case the row is nested.
@mixin flex-grid-row(
$behavior: null,
$width: $grid-row-width,
$columns: null,
$base: true,
$gutter: $grid-column-gutter
) {
$behavior: -zf-get-options($behavior, nest collapse);
$margin: auto;
@if map-get($behavior, nest) {
@include grid-row-nest($gutter);
@if map-get($behavior, collapse) {
margin-left: 0;
margin-right: 0;
}
}
@else {
max-width: $width;
margin-left: auto;
margin-right: auto;
}
@if $base {
display: flex;
flex-flow: row wrap;
}
@if $columns != null {
@include grid-context($columns, $base) {
@content;
}
}
}
/// Calculates the `flex` property for a flex grid column. It accepts all of the same values as the basic `grid-column()` function, along with two extras:
/// - `null` (the default) will make the column expand to fill space.
/// - `shrink` will make the column contract, so it only takes up the horizontal space it needs.
///
/// @param {Mixed} $columns [null] - Width of the column.
@function flex-grid-column($columns: null) {
$flex: 1 1 0px;
@if $columns == shrink {
$flex: 0 0 auto;
}
@else if $columns != null {
$flex: 0 0 grid-column($columns);
}
@return $flex;
}
/// Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the `unstack` class on the parent flex row.
///
/// @param {Mixed} $columns [null] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
/// @param {Number} $gutter [$grid-column-gutter] - Space between columns, added as a left and right padding.
@mixin flex-grid-column(
$columns: null,
$gutter: $grid-column-gutter
) {
@if $gutter != null {
$gutter: rem-calc($gutter) / 2;
}
@else {
@each $breakpoint, $gutter in $grid-column-responsive-gutter {
$padding: rem-calc($gutter) / 2;
@include breakpoint($breakpoint) {
padding-left: $padding;
padding-right: $padding;
}
}
}
flex: flex-grid-column($columns);
padding-left: $gutter;
padding-right: $gutter;
// max-width fixes IE 10/11 not respecting the flex-basis property
@if $columns != null and $columns != shrink {
max-width: grid-column($columns);
}
}
/// Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.
/// @param {Number} $order [0] - Order number to apply.
@mixin flex-grid-order($order: 0) {
order: $order;
}
/// Horizontally or vertically aligns the columns within a flex row. Apply this mixin to a flex row.
///
/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
@mixin flex-grid-row-align($x: null, $y: null) {
@if $x {
@if map-has-key($-zf-flex-justify, $x) {
$x: map-get($-zf-flex-justify, $x);
}
@else {
@warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'
}
}
@if $y {
@if map-has-key($-zf-flex-align, $y) {
$y: map-get($-zf-flex-align, $y);
}
@else {
@warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'
}
}
justify-content: $x;
align-items: $y;
}
/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
///
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
@mixin flex-grid-column-align($y: null) {
@if $y {
@if map-has-key($-zf-flex-align, $y) {
$y: map-get($-zf-flex-align, $y);
}
@else {
@warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'
}
}
align-self: $y;
}
@mixin foundation-flex-grid {
// Row
.row {
@include flex-grid-row;
// Nesting behavior
& &,
.column-row & {
@include flex-grid-row(nest, $base: false);
}
// Expanded row
&.expanded {
max-width: none;
}
&.collapse {
> .column { @include grid-col-collapse; }
}
}
// Column
.column {
@include flex-grid-column;
}
@include -zf-each-breakpoint {
@for $i from 1 through $grid-column-count {
// Sizing (percentage)
.#{$-zf-size}-#{$i} {
flex: flex-grid-column($i);
max-width: grid-column($i);
}
// Offsets
$o: $i - 1;
.#{$-zf-size}-offset-#{$o} {
@include grid-column-offset($o);
}
}
@for $i from 1 through 6 {
// Source ordering
.#{$-zf-size}-order-#{$i} {
@include flex-grid-order($i);
}
}
@if $-zf-size != small {
// Sizing (expand)
@include breakpoint($-zf-size) {
.#{$-zf-size}-expand {
flex: flex-grid-column();
}
}
// Auto-stacking/unstacking
@at-root (without: media) {
.row.#{$-zf-size}-unstack {
.column {
flex: flex-grid-column(100%);
@include breakpoint($-zf-size) {
flex: flex-grid-column();
}
}
}
}
}
// Responsive collapsing
.#{$-zf-size}-collapse {
> .column { @include grid-col-collapse; }
}
.#{$-zf-size}-uncollapse {
@if $grid-column-gutter {
$gutter: $grid-column-gutter;
}
@else {
$gutter: -zf-get-bp-val($grid-column-responsive-gutter, $-zf-size);
}
> .column { @include grid-col-uncollapse($gutter); }
}
}
// Sizing (shrink)
.shrink {
flex: flex-grid-column(shrink);
}
// Horizontal alignment using justify-content
@each $hdir, $prop in map-remove($-zf-flex-justify, left) {
.row.align-#{$hdir} {
@include flex-grid-row-align($x: $hdir);
}
}
// Vertical alignment using align-items and align-self
@each $vdir, $prop in $-zf-flex-align {
.row.align-#{$vdir} {
@include flex-grid-row-align($y: $vdir);
}
.column.align-#{$vdir} {
@include flex-grid-column-align($vdir);
}
}
.columns {
// scss-lint:disable PlaceholderInExtend
@extend .column;
}
}

48
app/vendor/foundation/scss/grid/_grid.scss vendored Normal file
View File

@ -0,0 +1,48 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group grid
////
/// The maximum width of a row.
/// @type Number
$grid-row-width: $global-width !default;
/// The default column count of a grid. Changing this value affects the logic of the grid mixins, and the number of CSS classes output.
/// @type Number
$grid-column-count: 12 !default;
// The amount of space between columns. Remove this in 6.2.
// @type Number
$grid-column-gutter: null !default;
/// The amount of space between columns at different screen sizes.
/// @type Map
/// @since 6.1.0
$grid-column-responsive-gutter: (
small: 20px,
medium: 30px,
) !default;
/// If `true`, the last column in a row will align to the opposite edge of the row.
/// @type Boolean
$grid-column-align-edge: true !default;
// Internal value to store the end column float direction
$-zf-end-float: if($grid-column-align-edge, $global-right, $global-left);
/// The highest number of `.x-up` classes available when using the block grid CSS.
/// @type Number
$block-grid-max: 8 !default;
@import 'row';
@import 'column';
@import 'size';
@import 'position';
@import 'gutter';
@import 'classes';
@import 'layout';
@import 'flex-grid';

34
app/vendor/foundation/scss/grid/_gutter.scss vendored Normal file
View File

@ -0,0 +1,34 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group grid
////
/// Collapse the gutters on a column by removing the padding.
@mixin grid-column-collapse {
padding-left: 0;
padding-right: 0;
}
/// Un-collapse the gutters on a column by re-adding the padding.
///
/// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
@mixin grid-column-uncollapse($gutter: $grid-column-gutter) {
$gutter: rem-calc($gutter) / 2;
padding-left: $gutter;
padding-right: $gutter;
}
/// Shorthand for `grid-column-collapse()`.
/// @alias grid-column-collapse
@mixin grid-col-collapse {
@include grid-column-collapse;
}
/// Shorthand for `grid-column-uncollapse()`.
/// @alias grid-column-uncollapse
@mixin grid-col-uncollapse($gutter: $grid-column-gutter) {
@include grid-column-uncollapse($gutter);
}

33
app/vendor/foundation/scss/grid/_layout.scss vendored Normal file
View File

@ -0,0 +1,33 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group grid
////
/// Sizes child elements so that `$n` number of items appear on each row.
///
/// @param {Number} $n - Number of elements to display per row.
/// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
@mixin grid-layout(
$n,
$selector: '.column'
) {
& > #{$selector} {
width: percentage(1/$n);
float: $global-left;
&:nth-of-type(1n) {
clear: none;
}
&:nth-of-type(#{$n}n+1) {
clear: both;
}
&:last-child {
float: left;
}
}
}

72
app/vendor/foundation/scss/grid/_position.scss vendored Normal file
View File

@ -0,0 +1,72 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group grid
////
/// Reposition a column.
///
/// @param {Number} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left.
@mixin grid-column-position($position) {
@if type-of($position) == 'number' {
$offset: percentage($position / $grid-column-count);
position: relative;
#{$global-left}: $offset;
}
@else if $position == center {
float: none;
margin-left: auto;
margin-right: auto;
}
@else {
@warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, or center.';
}
}
/// Reset a position definition.
@mixin grid-column-unposition {
position: static;
margin-left: 0;
margin-right: 0;
}
/// Offsets a column to the right by `$n` columns.
/// @param {Number|List} $n - Width to offset by. You can pass in any value accepted by the `grid-column()` mixin, such as `6`, `50%`, or `1 of 2`.
@mixin grid-column-offset($n) {
margin-#{$global-left}: grid-column($n);
}
/// Disable the default behavior of the last column in a row aligning to the opposite edge.
@mixin grid-column-end {
// This extra specificity is required for the property to be applied
&:last-child:last-child {
float: $global-left;
}
}
/// Shorthand for `grid-column-position()`.
/// @alias grid-column-position
@mixin grid-col-pos($position) {
@include grid-column-position($position);
}
/// Shorthand for `grid-column-unposition()`.
/// @alias grid-column-unposition
@mixin grid-col-unpos {
@include grid-column-unposition;
}
/// Shorthand for `grid-column-offset()`.
/// @alias grid-column-offset
@mixin grid-col-off($n) {
@include grid-column-offset($n);
}
/// Shorthand for `grid-column-end()`.
/// @alias grid-column-end
@mixin grid-col-end {
@include grid-column-end;
}

97
app/vendor/foundation/scss/grid/_row.scss vendored Normal file
View File

@ -0,0 +1,97 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group grid
////
/// Change the behavior of columns defined inside this mixin to use a different column count.
/// @content
///
/// @param {Number} $columns - Number of columns to use.
/// @param {Boolean} $root [false]
/// If `false`, selectors inside this mixin will nest inside the parent selector.
/// If `true`, selectors will not nest.
@mixin grid-context(
$columns,
$root: false
) {
// Store the current column count so it can be re-set later
$old-grid-column-count: $grid-column-count;
$grid-column-count: $columns !global;
@if $root {
@at-root { @content; }
}
@else {
@content;
}
// Restore the old column count
$grid-column-count: $old-grid-column-count;
}
/// Creates a grid row.
/// @content
///
/// @param {Number} $columns [null] - Column count for this row. `null` will use the default column count.
/// @param {Keywords} $behavior [null]
/// Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
/// @param {Number} $width [$grid-row-width] - Maximum width of the row.
/// @param {Boolean} $cf [true] - Whether or not to include a clearfix.
/// @param {Number} $gutter [$grid-column-gutter] - Gutter to use when inverting margins, in case the row is nested.
@mixin grid-row(
$columns: null,
$behavior: null,
$width: $grid-row-width,
$cf: true,
$gutter: $grid-column-gutter
) {
$behavior: -zf-get-options($behavior, nest collapse);
$margin: auto;
@if map-get($behavior, nest) {
@include grid-row-nest($gutter);
@if map-get($behavior, collapse) {
margin-left: 0;
margin-right: 0;
}
}
@else {
max-width: $width;
margin-left: auto;
margin-right: auto;
}
@if $cf {
@include clearfix;
}
@if $columns != null {
@include grid-context($columns) {
@content;
}
}
}
/// Inverts the margins of a row to nest it inside of a column.
///
/// @param {Map|null} $gutter [null] - Gutter value to use when inverting the margins. Set to `null` to refer to the responsive gutter settings.
@mixin grid-row-nest($gutter: null) {
@if $gutter != null {
$margin: rem-calc($gutter) / 2 * -1;
margin-left: $margin;
margin-right: $margin;
}
@else {
@each $breakpoint, $value in $grid-column-responsive-gutter {
$margin: rem-calc($value) / 2 * -1;
@include breakpoint($breakpoint) {
margin-left: $margin;
margin-right: $margin;
}
}
}
}

24
app/vendor/foundation/scss/grid/_size.scss vendored Normal file
View File

@ -0,0 +1,24 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group grid
////
/// Set the width of a grid column.
///
/// @param {Number|List} $width [$grid-column-count] - Width to make the column. You can pass in any value accepted by the `grid-column()` function, such as `6`, `50%`, or `1 of 2`.
@mixin grid-column-size(
$columns: $grid-column-count
) {
width: grid-column($columns);
}
/// Shorthand for `grid-column-size()`.
/// @alias grid-column-size
@mixin grid-col-size(
$columns: $grid-column-count
) {
@include grid-column-size($columns);
}

547
app/vendor/foundation/scss/settings/_settings.scss vendored Normal file
View File

@ -0,0 +1,547 @@
// Foundation for Sites Settings
// -----------------------------
//
// Table of Contents:
//
// 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. Title Bar
// 34. Tooltip
// 35. Top Bar
@import 'util/util';
// 1. Global
// ---------
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$primary-color: #2199e8;
$secondary-color: #777;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #ec5840;
$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;
$global-margin: 1rem;
$global-padding: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
$global-text-direction: ltr;
// 2. Breakpoints
// --------------
$breakpoints: (
small: 0,
medium: 640px,
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-responsive-gutter: (
small: 20px,
medium: 30px,
);
$grid-column-align-edge: true;
$block-grid-max: 8;
// 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;
$accordionmenu-arrow-color: $primary-color;
// 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 0 $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-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;
$drilldown-arrows: true;
$drilldown-arrow-color: $primary-color;
$drilldown-background: $white;
// 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-arrow-color: $anchor-color;
$dropdownmenu-min-width: 200px;
$dropdownmenu-background: $white;
$dropdownmenu-border: 1px solid $medium-gray;
// 18. Flex Video
// --------------
$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: $white;
$select-triangle-color: #333;
$select-radius: $global-radius;
$input-color: $black;
$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-fixed-reveal: true;
$offcanvas-exit-background: rgba($white, 0.25);
$maincontent-class: 'off-canvas-content';
$maincontent-shadow: 0 0 10px rgba($black, 0.5);
// 24. Orbit
// ---------
$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
// ----------
$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
// --------
$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. Title Bar
// -------------
$titlebar-background: $black;
$titlebar-color: $white;
$titlebar-padding: 0.5rem;
$titlebar-text-font-weight: bold;
$titlebar-icon-color: $white;
$titlebar-icon-color-hover: $medium-gray;
$titlebar-icon-spacing: 0.25rem;
// 34. 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;
// 35. Top Bar
// -----------
$topbar-padding: 0.5rem;
$topbar-background: $light-gray;
$topbar-link-color: $primary-color;
$topbar-input-width: 200px;

22
app/vendor/foundation/scss/typography/_alignment.scss vendored Normal file
View File

@ -0,0 +1,22 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@mixin foundation-text-alignment {
@each $size in $breakpoint-classes {
@include breakpoint($size) {
@each $align in (left, right, center, justify) {
@if $size != 'small' {
.#{$size}-text-#{$align} {
text-align: $align;
}
}
@else {
.text-#{$align} {
text-align: $align;
}
}
}
}
}
}

439
app/vendor/foundation/scss/typography/_base.scss vendored Normal file
View File

@ -0,0 +1,439 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group typography-base
////
// Base Typography
// - - - - - - - - - - - - - - -
// These are styles applied to basic HTML tags, including:
// - Paragraphs <p>
// - Bold/italics <b> <strong> <i> <em>
// - Small text <small>
// - Headings <h1>—<h6>
// - Anchors <a>
// - Dividers <hr>
// - Lists <ul> <ol> <dl>
// - Blockquotes <blockquote>
// - Code blocks <code>
// - Abbreviations <abbr>
// - Citations <cite>
// - Keystrokes <kbd>
/// Font family for header elements.
/// @type String | List
$header-font-family: $body-font-family !default;
/// Font weight of headers.
/// @type String
$header-font-weight: $global-weight-normal !default;
/// Font style (e.g. italicized) of headers.
/// @type String
$header-font-style: normal !default;
/// Font stack used for elements that use monospaced type, such as code samples
/// @type String | List
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;
/// Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes.
/// @type Map
$header-sizes: (
small: (
'h1': 24,
'h2': 20,
'h3': 19,
'h4': 18,
'h5': 17,
'h6': 16,
),
medium: (
'h1': 48,
'h2': 40,
'h3': 31,
'h4': 25,
'h5': 20,
'h6': 16,
),
) !default;
/// Color of headers.
/// @type Color
$header-color: inherit !default;
/// Line height of headers.
/// @type Number
$header-lineheight: 1.4 !default;
/// Bottom margin of headers.
/// @type Number
$header-margin-bottom: 0.5rem !default;
/// Text rendering method of headers.
/// @type String
$header-text-rendering: optimizeLegibility !default;
/// Font size of `<small>` elements.
/// @type Number
$small-font-size: 80% !default;
/// Color of `<small>` elements when placed inside headers.
/// @type Color
$header-small-font-color: $medium-gray !default;
/// Line height of text inside `<p>` elements.
/// @type Number
$paragraph-lineheight: 1.6 !default;
/// Bottom margin of paragraphs.
/// @type Number
$paragraph-margin-bottom: 1rem !default;
/// Text rendering method for paragraph text.
/// @type String
$paragraph-text-rendering: optimizeLegibility !default;
/// Text color of code samples.
/// @type Color
$code-color: $black !default;
/// Font family of code samples.
/// @type String | List
$code-font-family: $font-family-monospace !default;
/// Font weight of text in code samples.
/// @type String
$code-font-weight: $global-weight-normal !default;
/// Background color of code samples.
/// @type Color
$code-background: $light-gray !default;
/// Border around code samples.
/// @type List
$code-border: 1px solid $medium-gray !default;
/// Padding around text of code samples.
/// @type Number | List
$code-padding: rem-calc(2 5 1) !default;
/// Default color for links.
/// @type Color
$anchor-color: $primary-color !default;
/// Default color for links on hover.
/// @type Color
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;
/// Default text deocration for links.
/// @type String
$anchor-text-decoration: none !default;
/// Default text decoration for links on hover.
/// @type String
$anchor-text-decoration-hover: none !default;
/// Maximum width of a divider.
/// @type Number
$hr-width: $global-width !default;
/// Default border for a divider.
/// @type List
$hr-border: 1px solid $medium-gray !default;
/// Default margin for a divider.
/// @type Number | List
$hr-margin: rem-calc(20) auto !default;
/// Line height for items in a list.
/// @type Number
$list-lineheight: $paragraph-lineheight !default;
/// Bottom margin for items in a list.
/// @type Number
$list-margin-bottom: $paragraph-margin-bottom !default;
/// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`).
/// @type String
$list-style-type: disc !default;
/// Positioning for bullets on unordered list items.
/// @type String
$list-style-position: outside !default;
/// Left (or right) margin for lists.
/// @type Number
$list-side-margin: 1.25rem !default;
/// Left (or right) margin for a list inside a list.
/// @type Number
$list-nested-side-margin: 1.25rem !default;
/// Bottom margin for `<dl>` elements.
/// @type Number
$defnlist-margin-bottom: 1rem !default;
/// Font weight for `<dt>` elements.
/// @type String
$defnlist-term-weight: $global-weight-bold !default;
/// Spacing between `<dt>` and `<dd>` elements.
/// @type Number
$defnlist-term-margin-bottom: 0.3rem !default;
/// Text color of `<blockquote>` elements.
/// @type Color
$blockquote-color: $dark-gray !default;
/// Padding inside a `<blockquote>` element.
/// @type Number | List
$blockquote-padding: rem-calc(9 20 0 19) !default;
/// Side border for `<blockquote>` elements.
/// @type List
$blockquote-border: 1px solid $medium-gray !default;
/// Font size for `<cite>` elements.
/// @type Number
$cite-font-size: rem-calc(13) !default;
/// Text color for `<cite>` elements.
/// @type Color
$cite-color: $dark-gray !default;
/// Font family for `<kbd>` elements.
/// @type String | List
$keystroke-font: $font-family-monospace !default;
/// Text color for `<kbd>` elements.
/// @type Color
$keystroke-color: $black !default;
/// Background color for `<kbd>` elements.
/// @type Color
$keystroke-background: $light-gray !default;
/// Padding for `<kbd>` elements.
/// @type Number | List
$keystroke-padding: rem-calc(2 4 0) !default;
/// Border radius for `<kbd>` elements.
/// @type Number | List
$keystroke-radius: $global-radius !default;
/// Bottom border style for `<abbr>` elements.
/// @type List
$abbr-underline: 1px dotted $black !default;
@mixin foundation-typography-base {
// Typography resets
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
// Paragraphs
p {
font-size: inherit;
line-height: $paragraph-lineheight;
margin-bottom: $paragraph-margin-bottom;
text-rendering: $paragraph-text-rendering;
}
// Emphasized text
em,
i {
font-style: italic;
line-height: inherit;
}
// Strong text
strong,
b {
font-weight: $global-weight-bold;
line-height: inherit;
}
// Small text
small {
font-size: $small-font-size;
line-height: inherit;
}
// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $header-font-family;
font-weight: $header-font-weight;
font-style: $header-font-style;
color: $header-color;
text-rendering: $header-text-rendering;
margin-top: 0;
margin-bottom: $header-margin-bottom;
line-height: $header-lineheight;
small {
color: $header-small-font-color;
line-height: 0;
}
}
// Heading sizes
@each $size, $headers in $header-sizes {
@include breakpoint($size) {
@each $header, $font-size in $headers {
#{$header} {
font-size: rem-calc($font-size);
}
}
}
}
// Links
a {
color: $anchor-color;
text-decoration: $anchor-text-decoration;
line-height: inherit;
cursor: pointer;
&:hover,
&:focus {
color: $anchor-color-hover;
@if $anchor-text-decoration-hover != $anchor-text-decoration {
text-decoration: $anchor-text-decoration-hover;
}
}
img {
border: 0;
}
}
// Horizontal rule
hr {
max-width: $hr-width;
height: 0;
border-right: 0;
border-top: 0;
border-bottom: $hr-border;
border-left: 0;
margin: $hr-margin;
clear: both;
}
// Lists
ul,
ol,
dl {
line-height: $list-lineheight;
margin-bottom: $list-margin-bottom;
list-style-position: $list-style-position;
}
// List items
li {
font-size: inherit;
}
// Unordered lists
ul {
list-style-type: $list-style-type;
margin-#{$global-left}: $list-side-margin;
}
// Ordered lists
ol {
margin-#{$global-left}: $list-side-margin;
}
// Nested unordered/ordered lists
ul, ol {
& & {
margin-#{$global-left}: $list-nested-side-margin;
margin-bottom: 0;
}
}
// Definition lists
dl {
margin-bottom: $defnlist-margin-bottom;
dt {
margin-bottom: $defnlist-term-margin-bottom;
font-weight: $defnlist-term-weight;
}
}
// Blockquotes
blockquote {
margin: 0 0 $paragraph-margin-bottom;
padding: $blockquote-padding;
border-#{$global-left}: $blockquote-border;
&, p {
line-height: $paragraph-lineheight;
color: $blockquote-color;
}
}
// Citations
cite {
display: block;
font-size: $cite-font-size;
color: $cite-color;
&:before {
content: '\2014 \0020';
}
}
// Abbreviations
abbr {
color: $body-font-color;
cursor: help;
border-bottom: $abbr-underline;
}
// Code
code {
font-family: $code-font-family;
font-weight: $code-font-weight;
color: $code-color;
background-color: $code-background;
border: $code-border;
padding: $code-padding;
}
// Keystrokes
kbd {
padding: $keystroke-padding;
margin: 0;
background-color: $keystroke-background;
color: $keystroke-color;
font-family: $keystroke-font;
}
}

Some files were not shown because too many files have changed in this diff Show More