CanvasInnovations.us
Torey Heinz
committed Feb 09, 2018
commit 2b5b18c9ed8ca8078a829b2b23a8ed9cbee7d09a
Showing 143
changed files with
23954 additions
and 0 deletions
.gitignore
+1
-0
| @@ | @@ -0,0 +1 @@ |
| + | config/deploy.yml |
| \ No newline at end of file | |
Gemfile
+16
-0
| @@ | @@ -0,0 +1,16 @@ |
| + | source 'https://rubygems.org' |
| + | |
| + | gem 'locomotivecms_wagon', '~> 2.2.0' |
| + | |
| + | gem 'guard-livereload', '~> 2.5.1' |
| + | |
| + | group :development do |
| + | # Mac OS X |
| + | gem 'rb-fsevent', '~> 0.9.1', require: 'rb-fsevent' if RUBY_PLATFORM.include?('darwin') |
| + | end |
| + | |
| + | group :misc do |
| + | # Add your extra gems here |
| + | # gem 'susy', require: 'susy' |
| + | # gem 'bourbon', require: 'bourbon' |
| + | end |
Gemfile.lock
+204
-0
| @@ | @@ -0,0 +1,204 @@ |
| + | GEM |
| + | remote: https://rubygems.org/ |
| + | specs: |
| + | RedCloth (4.3.2) |
| + | activesupport (4.2.9) |
| + | i18n (~> 0.7) |
| + | minitest (~> 5.1) |
| + | thread_safe (~> 0.3, >= 0.3.4) |
| + | tzinfo (~> 1.1) |
| + | addressable (2.5.2) |
| + | public_suffix (>= 2.0.2, < 4.0) |
| + | attr_extras (4.4.0) |
| + | autoprefixer-rails (6.3.3.1) |
| + | execjs |
| + | chronic (0.10.2) |
| + | chunky_png (1.3.8) |
| + | coderay (1.1.2) |
| + | coffee-script (2.4.1) |
| + | coffee-script-source |
| + | execjs |
| + | coffee-script-source (1.12.2) |
| + | colorize (0.8.1) |
| + | compass (1.0.3) |
| + | chunky_png (~> 1.2) |
| + | compass-core (~> 1.0.2) |
| + | compass-import-once (~> 1.0.5) |
| + | rb-fsevent (>= 0.9.3) |
| + | rb-inotify (>= 0.9) |
| + | sass (>= 3.3.13, < 3.5) |
| + | compass-core (1.0.3) |
| + | multi_json (~> 1.0) |
| + | sass (>= 3.3.0, < 3.5) |
| + | compass-import-once (1.0.5) |
| + | sass (>= 3.2, < 3.5) |
| + | concurrent-ruby (1.0.5) |
| + | crass (1.0.2) |
| + | daemons (1.2.4) |
| + | dragonfly (1.0.12) |
| + | addressable (~> 2.3) |
| + | multi_json (~> 1.0) |
| + | rack (>= 1.3.0) |
| + | duktape (1.3.0.6) |
| + | em-websocket (0.5.1) |
| + | eventmachine (>= 0.12.9) |
| + | http_parser.rb (~> 0.6.0) |
| + | eventmachine (1.2.5) |
| + | execjs (2.7.0) |
| + | faker (1.8.4) |
| + | i18n (~> 0.5) |
| + | faraday (0.9.2) |
| + | multipart-post (>= 1.2, < 3) |
| + | faraday_middleware (0.10.1) |
| + | faraday (>= 0.7.4, < 1.0) |
| + | ffi (1.9.18) |
| + | formatador (0.2.5) |
| + | guard (2.14.1) |
| + | formatador (>= 0.2.4) |
| + | listen (>= 2.7, < 4.0) |
| + | lumberjack (~> 1.0) |
| + | nenv (~> 0.1) |
| + | notiffany (~> 0.0) |
| + | pry (>= 0.9.12) |
| + | shellany (~> 0.0) |
| + | thor (>= 0.18.1) |
| + | guard-compat (1.2.1) |
| + | guard-livereload (2.5.2) |
| + | em-websocket (~> 0.5) |
| + | guard (~> 2.8) |
| + | guard-compat (~> 1.0) |
| + | multi_json (~> 1.8) |
| + | haml (4.0.7) |
| + | tilt |
| + | http_parser.rb (0.6.0) |
| + | httparty (0.13.7) |
| + | json (~> 1.8) |
| + | multi_xml (>= 0.5.2) |
| + | httpclient (2.7.2) |
| + | i18n (0.8.6) |
| + | json (1.8.6) |
| + | kramdown (1.10.0) |
| + | listen (3.0.8) |
| + | rb-fsevent (~> 0.9, >= 0.9.4) |
| + | rb-inotify (~> 0.9, >= 0.9.7) |
| + | locomotivecms-liquid (4.0.0) |
| + | locomotivecms-solid (4.0.1) |
| + | locomotivecms-liquid (~> 4.0.0) |
| + | locomotivecms_coal (1.3.0) |
| + | activesupport (~> 4.2.6) |
| + | faraday (~> 0.9.1) |
| + | faraday_middleware (~> 0.10.0) |
| + | httpclient (~> 2.7.1) |
| + | locomotivecms_common (0.2.0) |
| + | activesupport (~> 4.2.6) |
| + | attr_extras (~> 4.4.0) |
| + | colorize |
| + | stringex (~> 2.6.0) |
| + | locomotivecms_steam (1.2.1) |
| + | RedCloth (~> 4.3.2) |
| + | autoprefixer-rails (~> 6.3.3.1) |
| + | chronic (~> 0.10.2) |
| + | coffee-script (~> 2.4.1) |
| + | compass (~> 1.0.3) |
| + | dragonfly (~> 1.0.12) |
| + | duktape (~> 1.3.0.6) |
| + | httparty (~> 0.13.6) |
| + | kramdown (~> 1.10.0) |
| + | locomotivecms-solid (~> 4.0.1) |
| + | locomotivecms_common (~> 0.2.0) |
| + | mime-types (~> 2.6.1) |
| + | mimetype-fu (~> 0.1.2) |
| + | moneta (~> 0.8.0) |
| + | morphine (~> 0.1.1) |
| + | nokogiri (~> 1.6.8) |
| + | pony (~> 1.11) |
| + | rack-cache (~> 1.6.1) |
| + | rack-rewrite (~> 1.5.1) |
| + | rack_csrf (~> 2.5.0) |
| + | sanitize (~> 4.0.1) |
| + | sass (~> 3.4.21) |
| + | sprockets (~> 3.5.2) |
| + | locomotivecms_wagon (2.2.0) |
| + | faker (~> 1.6) |
| + | haml (~> 4.0.7) |
| + | listen (~> 3.0.4) |
| + | locomotivecms_coal (~> 1.3.0) |
| + | locomotivecms_common (~> 0.2.0) |
| + | locomotivecms_steam (~> 1.2.0) |
| + | netrc (~> 0.10.3) |
| + | rack-livereload (~> 0.3.16) |
| + | rubyzip (~> 1.1.7) |
| + | thin (~> 1.6.3) |
| + | thor (~> 0.19.1) |
| + | yui-compressor (~> 0.12.0) |
| + | lumberjack (1.0.12) |
| + | mail (2.6.6) |
| + | mime-types (>= 1.16, < 4) |
| + | method_source (0.9.0) |
| + | mime-types (2.6.2) |
| + | mimetype-fu (0.1.2) |
| + | mini_portile2 (2.1.0) |
| + | minitest (5.10.3) |
| + | moneta (0.8.1) |
| + | morphine (0.1.1) |
| + | multi_json (1.12.2) |
| + | multi_xml (0.6.0) |
| + | multipart-post (2.0.0) |
| + | nenv (0.3.0) |
| + | netrc (0.10.3) |
| + | nokogiri (1.6.8.1) |
| + | mini_portile2 (~> 2.1.0) |
| + | nokogumbo (1.4.13) |
| + | nokogiri |
| + | notiffany (0.1.1) |
| + | nenv (~> 0.1) |
| + | shellany (~> 0.0) |
| + | pony (1.11) |
| + | mail (>= 2.0) |
| + | pry (0.11.2) |
| + | coderay (~> 1.1.0) |
| + | method_source (~> 0.9.0) |
| + | public_suffix (3.0.0) |
| + | rack (1.6.8) |
| + | rack-cache (1.6.1) |
| + | rack (>= 0.4) |
| + | rack-livereload (0.3.16) |
| + | rack |
| + | rack-rewrite (1.5.1) |
| + | rack_csrf (2.5.0) |
| + | rack (>= 1.1.0) |
| + | rb-fsevent (0.9.8) |
| + | rb-inotify (0.9.10) |
| + | ffi (>= 0.5.0, < 2) |
| + | rubyzip (1.1.7) |
| + | sanitize (4.0.1) |
| + | crass (~> 1.0.2) |
| + | nokogiri (>= 1.4.4) |
| + | nokogumbo (~> 1.4.1) |
| + | sass (3.4.25) |
| + | shellany (0.0.1) |
| + | sprockets (3.5.2) |
| + | concurrent-ruby (~> 1.0) |
| + | rack (> 1, < 3) |
| + | stringex (2.6.1) |
| + | thin (1.6.4) |
| + | daemons (~> 1.0, >= 1.0.9) |
| + | eventmachine (~> 1.0, >= 1.0.4) |
| + | rack (~> 1.0) |
| + | thor (0.19.4) |
| + | thread_safe (0.3.6) |
| + | tilt (2.0.8) |
| + | tzinfo (1.2.3) |
| + | thread_safe (~> 0.1) |
| + | yui-compressor (0.12.0) |
| + | |
| + | PLATFORMS |
| + | ruby |
| + | |
| + | DEPENDENCIES |
| + | guard-livereload (~> 2.5.1) |
| + | locomotivecms_wagon (~> 2.2.0) |
| + | rb-fsevent (~> 0.9.1) |
| + | |
| + | BUNDLED WITH |
| + | 1.16.0 |
Guardfile
+22
-0
| @@ | @@ -0,0 +1,22 @@ |
| + | # LiveReload installation |
| + | # |
| + | # 1. Add the guard-livereload gem to your Gemfile OR uncomment the line: |
| + | # |
| + | # gem 'guard-livereload' |
| + | # |
| + | # 2. Install the gem on your machine |
| + | # |
| + | # bundle install |
| + | # |
| + | # 3. Launch Guard |
| + | # |
| + | # bundle exec guard |
| + | # |
| + | |
| + | guard 'livereload', host: '0.0.0.0', port: ENV['WAGON_LIVERELOAD_PORT'] || 35729, grace_period: 0.5 do |
| + | watch(%r{app/content_types/.+\.yml$}) |
| + | watch(%r{app/views/.+\.liquid}) |
| + | watch(%r{config/.+\.yml$}) |
| + | watch(%r{data/.+\.yml$}) |
| + | watch(%r{public/((stylesheets|javascripts)/(.+\.(css|js))).*}) { |m| "/#{m[1]}" } |
| + | end |
README.md
+3
-0
| @@ | @@ -0,0 +1,3 @@ |
| + | # CanvasInnovations.us |
| + | |
| + | This site is developed by [Teagles Consulting](http://www.teaglesconsulting.com/) using https://github.com/locomotivecms/wagon |
app/content_types/.keep
+0
-0
app/views/pages/404.liquid
+15
-0
| @@ | @@ -0,0 +1,15 @@ |
| + | --- |
| + | title: Page not found |
| + | slug: '404' |
| + | position: 1 |
| + | listed: true |
| + | published: true |
| + | is_layout: false |
| + | --- |
| + | {% extends 'layouts/application' %} |
| + | {% block 'main' %} |
| + | <div class="text-center"> |
| + | <h1>Page Not Found</h1> |
| + | <p>We're sorry but we can't find the page you are looking for</p> |
| + | </div> |
| + | {% endblock %} |
app/views/pages/index.liquid
+51
-0
| @@ | @@ -0,0 +1,51 @@ |
| + | --- |
| + | title: Home page |
| + | slug: index |
| + | position: 0 |
| + | listed: true |
| + | published: true |
| + | is_layout: false |
| + | --- |
| + | {% extends 'layouts/application' %} |
| + | {% block 'main' %} |
| + | <div class="callout small"> |
| + | <div class="row"> |
| + | <div class="columns large-4"> |
| + | <div class="card"> |
| + | <div class="card-divider"> |
| + | This is a header |
| + | </div> |
| + | <img src="assets/img/generic/rectangle-1.jpg"> |
| + | <div class="card-section"> |
| + | <h4>This is a card.</h4> |
| + | <p>It has an easy to override visual style, and is appropriately subdued.</p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="columns large-4"> |
| + | <div class="card"> |
| + | <div class="card-divider"> |
| + | This is a header |
| + | </div> |
| + | <img src="assets/img/generic/rectangle-1.jpg"> |
| + | <div class="card-section"> |
| + | <h4>This is a card.</h4> |
| + | <p>It has an easy to override visual style, and is appropriately subdued.</p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="columns large-4"> |
| + | <div class="card"> |
| + | <div class="card-divider"> |
| + | This is a header |
| + | </div> |
| + | <img src="assets/img/generic/rectangle-1.jpg"> |
| + | <div class="card-section"> |
| + | <h4>This is a card.</h4> |
| + | <p>It has an easy to override visual style, and is appropriately subdued.</p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | {% endblock %} |
app/views/pages/layouts/application.liquid
+56
-0
| @@ | @@ -0,0 +1,56 @@ |
| + | --- |
| + | title: Application |
| + | slug: application |
| + | position: 99 |
| + | listed: false |
| + | published: false |
| + | is_layout: true |
| + | --- |
| + | <!doctype html> |
| + | <html class="no-js" lang="en"> |
| + | <head> |
| + | {% include 'metatags' %} |
| + | {{ 'app.css' | stylesheet_tag }} |
| + | <!-- Global Site Tag (gtag.js) - Google Analytics --> |
| + | <script async src="https://www.googletagmanager.com/gtag/js?id=UA-107293990-1"></script> |
| + | <script> |
| + | window.dataLayer = window.dataLayer || []; |
| + | function gtag(){dataLayer.push(arguments)}; |
| + | gtag('js', new Date()); |
| + | gtag('config', 'UA-107293990-1'); |
| + | </script> |
| + | |
| + | </head> |
| + | <body class="{{ page.slug }}"> |
| + | <!-- Start Top Bar --> |
| + | <div class="top-bar"> |
| + | <div class="row"> |
| + | <div class="top-bar-left"> |
| + | {% include 'dropdown-menu' %} |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <!-- End Top Bar --> |
| + | <div class="wrapper row column"> |
| + | <div class="callout large"> |
| + | <div class="row column text-center"> |
| + | <h1> |
| + | Canvas Innovations |
| + | </h1> |
| + | <p class="lead">West Michigan's premier shop for all your canvas and upholstery needs.</p> |
| + | </div> |
| + | </div> |
| + | <div class=""> |
| + | {% block main %} |
| + | <h1>{% editable_text "heading", line_break: false, format: 'raw', rows: 1 %}{% endeditable_text %}</h1> |
| + | {% editable_text content %}Lorem ipsum{% endeditable_text %} |
| + | {% endblock %} |
| + | </div> |
| + | </div> |
| + | <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> |
| + | {{ 'vendor/jquery.sticky.js' | javascript_tag }} |
| + | {{ 'vendor/what-input.min.js' | javascript_tag }} |
| + | {{ 'vendor/foundation.min.js' | javascript_tag }} |
| + | {{ 'app.js' | javascript_tag }} |
| + | </body> |
| + | </html> |
app/views/pages/layouts/simple.liquid
+8
-0
| @@ | @@ -0,0 +1,8 @@ |
| + | --- |
| + | title: Simple |
| + | slug: simple |
| + | position: 99 |
| + | listed: false |
| + | published: true |
| + | is_layout: true |
| + | --- |
| \ No newline at end of file | |
app/views/snippets/dropdown-menu.liquid
+18
-0
| @@ | @@ -0,0 +1,18 @@ |
| + | <ul class="dropdown menu" data-dropdown-menu data-alignment="left"> |
| + | <li class="menu-text">Canvas Innovations</li> |
| + | <li><a href="/">Home</a></li> |
| + | {% for page in site.pages %} |
| + | {% if page.depth == 1 and page.listed? %} |
| + | <li> |
| + | {% link_to page %} |
| + | {% unless page.children.size == 0 %} |
| + | <ul class="menu"> |
| + | {% for subpage in page.children %} |
| + | <li>{% link_to subpage %}</li> |
| + | {% endfor %} |
| + | </ul> |
| + | {% endunless %} |
| + | </li> |
| + | {% endif %} |
| + | {% endfor %} |
| + | </ul> |
app/views/snippets/metatags.liquid
+17
-0
| @@ | @@ -0,0 +1,17 @@ |
| + | {% if page.seo_title %} |
| + | {% capture page_title %}{{ page.seo_title | escape }} | {{ site.name }}{% endcapture %} |
| + | {% else %} |
| + | {% capture page_title %}{{ page.title | escape }} | {{ site.name }}{% endcapture %} |
| + | {% endif %} |
| + | |
| + | <meta charset="utf-8"> |
| + | <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| + | |
| + | <title>{{ page_title }}</title> |
| + | {% seo %} |
| + | <meta property="og:title" content="{{ page.title | escape }} | VS America" /> |
| + | <meta property="og:image" content="{{ 'logo.png' | theme_image_url }}" /> |
| + | <meta property="og:site_name" content="{{ site.name }}" /> |
| + | <link rel="shortcut icon" href="{{ 'favicon.ico' | theme_image_url }}"> |
| + | |
config/metafields_schema.yml
+1
-0
| @@ | @@ -0,0 +1 @@ |
| + | --- {} |
config/site.yml
+10
-0
| @@ | @@ -0,0 +1,10 @@ |
| + | name: CanvasInnovations.us |
| + | locales: [en] |
| + | domains: [] |
| + | timezone: UTC |
| + | seo_title: '' |
| + | meta_keywords: '' |
| + | meta_description: '' |
| + | robots_txt: '' |
| + | metafields: |
| + | metafields_ui: {} |
log/server.log
+54
-0
| @@ | @@ -0,0 +1,54 @@ |
| + | # Logfile created on 2017-09-27 13:05:59 -0400 by logger.rb/56815 |
| + | I, [2017-09-27T13:05:59.864365 #25227] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-09-27T13:05:59.864436 #25227] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-09-27T13:05:59.864456 #25227] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-09-27T16:21:25.264398 #36341] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-09-27T16:21:25.264759 #36341] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-09-27T16:21:25.264805 #36341] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-09-29T14:06:43.403942 #8995] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-09-29T14:06:43.404226 #8995] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-09-29T14:06:43.404254 #8995] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-09-29T17:49:24.445215 #17299] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-09-29T17:49:24.445299 #17299] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-09-29T17:49:24.445318 #17299] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-10-01T14:31:09.190120 #34496] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-10-01T14:31:09.190224 #34496] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-10-01T14:31:09.190247 #34496] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-10-03T10:13:20.848582 #58027] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-10-03T10:13:20.848669 #58027] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-10-03T10:13:20.848689 #58027] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-10-03T10:20:05.953608 #58891] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-10-03T10:20:05.953685 #58891] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-10-03T10:20:05.953731 #58891] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-10-30T16:34:24.498838 #37728] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-10-30T16:34:24.499702 #37728] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-10-30T16:34:24.499738 #37728] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-10-30T16:35:09.463979 #37845] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-10-30T16:35:09.464059 #37845] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-10-30T16:35:09.464077 #37845] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-10-30T17:42:25.583427 #48451] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-10-30T17:42:25.583514 #48451] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-10-30T17:42:25.583532 #48451] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-10-31T21:13:37.667234 #37692] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-10-31T21:13:37.667305 #37692] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-10-31T21:13:37.667324 #37692] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-10-31T21:27:50.530637 #56349] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-10-31T21:27:50.530728 #56349] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-10-31T21:27:50.530746 #56349] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2017-10-31T21:28:13.166114 #56349] INFO -- : Waiting for 5 connection(s) to finish, can take up to 30 sec, CTRL+C to stop now |
| + | I, [2017-10-31T21:28:52.888921 #56546] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2017-10-31T21:28:52.889031 #56546] INFO -- : Maximum connections set to 1024 |
| + | I, [2017-10-31T21:28:52.889066 #56546] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2018-02-08T17:08:13.477719 #47329] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2018-02-08T17:08:13.477881 #47329] INFO -- : Maximum connections set to 1024 |
| + | I, [2018-02-08T17:08:13.478002 #47329] INFO -- : Listening on 0.0.0.0:3333, CTRL+C to stop |
| + | I, [2018-02-08T17:08:22.466611 #47343] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2018-02-08T17:08:22.466743 #47343] INFO -- : Maximum connections set to 1024 |
| + | I, [2018-02-08T17:08:22.466798 #47343] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2018-02-08T17:11:04.691592 #47343] INFO -- : Waiting for 1 connection(s) to finish, can take up to 30 sec, CTRL+C to stop now |
| + | I, [2018-02-09T09:04:24.792597 #49894] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2018-02-09T09:04:24.792909 #49894] INFO -- : Maximum connections set to 1024 |
| + | I, [2018-02-09T09:04:24.792950 #49894] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
| + | I, [2018-02-09T09:56:27.872254 #50708] INFO -- : Thin web server (v1.6.4 codename Gob Bluth) |
| + | I, [2018-02-09T09:56:27.872376 #50708] INFO -- : Maximum connections set to 1024 |
| + | I, [2018-02-09T09:56:27.872406 #50708] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop |
notes.txt
+48
-0
| @@ | @@ -0,0 +1,48 @@ |
| + | wagon generate content_type offering_types title:string description:text event_date:date |
| + | |
| + | |
| + | OfferingTypes: |
| + | title:string |
| + | featured_image:file |
| + | has_many:offerings |
| + | |
| + | |
| + | Offerings: |
| + | title:string |
| + | featured_image:file |
| + | belongs_to:offering-type |
| + | has_many:projects |
| + | |
| + | Features: |
| + | - Bonded Windows |
| + | - Custom Frame Bending |
| + | - Track |
| + | |
| + | Projects: |
| + | title:string |
| + | featured_image:file |
| + | description:text |
| + | has_many:project_images |
| + | belongs_to:offering |
| + | |
| + | ProjectImages: |
| + | title:string |
| + | file:file |
| + | belongs_to:project |
| + | |
| + | |
| + | DATA: |
| + | OfferingTypes: |
| + | - Boat Flooring |
| + | - InteriorCarpet |
| + | - Sea Deck |
| + | - Infinity |
| + | - Boat Enclosures |
| + | |
| + | - Commercial Sewing |
| + | - Boat Tops |
| + | - Boat Covers |
| + | - Boat Dodgers |
| + | - Upholstery |
| + | - Headliners |
| + | - Repairs and Restitching |
public/images/.gitkeep
+0
-0
public/javascripts/app.js
+5
-0
| @@ | @@ -0,0 +1,5 @@ |
| + | $(document).foundation(); |
| + | // $(".top-bar").sticky({zIndex:10}); |
| + | |
| + | $('nav#top-nav > ul').addClass('dropdown menu') |
| + | $('nav#top-nav > ul ul').addClass('menu') |
public/javascripts/vendor/foundation.js
+7472
-0
| @@ | @@ -0,0 +1,7472 @@ |
| + | !function($) { |
| + | |
| + | "use strict"; |
| + | |
| + | var FOUNDATION_VERSION = '6.0.3'; |
| + | |
| + | // 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){ |
| + | var pluginName = functionName(plugin.constructor).toLowerCase(); |
| + | |
| + | plugin.uuid = this.GetYoDigits(6, pluginName); |
| + | plugin.$element.attr('data-' + pluginName, plugin.uuid) |
| + | /** |
| + | * Fires when the plugin has initialized. |
| + | * @event Plugin#init |
| + | */ |
| + | .trigger('init.zf.' + pluginName); |
| + | |
| + | this._activePlugins[plugin.uuid] = plugin; |
| + | |
| + | 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 = functionName(plugin.constructor).toLowerCase(); |
| + | |
| + | delete this._activePlugins[plugin.uuid]; |
| + | plugin.$element.removeAttr('data-' + pluginName) |
| + | /** |
| + | * Fires when the plugin has been destroyed. |
| + | * @event Plugin#destroyed |
| + | */ |
| + | .trigger('destroyed.zf.' + pluginName); |
| + | |
| + | 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. |
| + | */ |
| + | _reflow: function(plugins){ |
| + | var actvPlugins = Object.keys(this._activePlugins); |
| + | var _this = this; |
| + | |
| + | if(!plugins){ |
| + | actvPlugins.forEach(function(p){ |
| + | _this._activePlugins[p]._init(); |
| + | }); |
| + | |
| + | }else if(typeof plugins === 'string'){ |
| + | var namespace = plugins.split('-')[1]; |
| + | |
| + | if(namespace){ |
| + | |
| + | this._activePlugins[plugins]._init(); |
| + | |
| + | }else{ |
| + | namespace = new RegExp(plugins, 'i'); |
| + | |
| + | actvPlugins.filter(function(p){ |
| + | return namespace.test(p); |
| + | }).forEach(function(p){ |
| + | _this._activePlugins[p]._init(); |
| + | }); |
| + | } |
| + | } |
| + | |
| + | }, |
| + | |
| + | /** |
| + | * 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('*'); |
| + | |
| + | // For each plugin found, initialize it |
| + | $elem.each(function() { |
| + | // Don't double-dip on plugins |
| + | if ($(this).attr('zf-plugin')) { |
| + | console.warn("Tried to initialize "+name+" on an element that already has a Foundation plugin."); |
| + | return; |
| + | } |
| + | $(this).data('zf-plugin', new plugin($(this))); |
| + | }); |
| + | }); |
| + | }, |
| + | 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; |
| + | } |
| + | } |
| + | |
| + | // 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); |
| + | |
| + | !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); |
| + | |
| + | /******************************************* |
| + | * * |
| + | * 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 {Object} component - Foundation component, 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[Foundation.getFnName(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 with context of the component if exists |
| + | fn.apply(component); |
| + | if (functions.handled || typeof functions.handled === 'function') { // execute function when event was handled |
| + | functions.handled.apply(component); |
| + | } |
| + | } else { |
| + | if (functions.unhandled || typeof functions.unhandled === 'function') { // execute function when event was not handled |
| + | functions.unhandled.apply(component); |
| + | } |
| + | } |
| + | }; |
| + | 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); |
| + | |
| + | !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) |
| + | |
| + | /** |
| + | * 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); |
| + | |
| + | !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'; |
| + | |
| + | items.each(function(){ |
| + | var $item = $(this), |
| + | $sub = $item.children('ul'); |
| + | if($sub.length){ |
| + | $item.addClass('has-submenu ' + hasSubClass); |
| + | $sub.addClass('submenu ' + subMenuClass).attr('data-submenu', ''); |
| + | } |
| + | 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); |
| + | |
| + | !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); |
| + | |
| + | //************************************************** |
| + | //**Work inspired by multiple jquery swipe plugins** |
| + | //**Done by Yohai Ararat *************************** |
| + | //************************************************** |
| + | (function($) { |
| + | |
| + | $.spotSwipe = { |
| + | version: '1.0.0', |
| + | enabled: 'ontouchstart' in document.documentElement, |
| + | preventDefault: true, |
| + | 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) { |
| + | 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 ); |
| + | */ |
| + | |
| + | !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); |
| + | |
| + | !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.$window = $(window); |
| + | this.name = 'Abide'; |
| + | this.attr = 'data-abide'; |
| + | |
| + | this._init(); |
| + | this._events(); |
| + | |
| + | Foundation.registerPlugin(this); |
| + | } |
| + | |
| + | /** |
| + | * Default settings for plugin |
| + | */ |
| + | Abide.defaults = { |
| + | validateOn: 'fieldChange', // options: fieldChange, manual, submit |
| + | labelErrorClass: 'is-invalid-label', |
| + | inputErrorClass: 'is-invalid-input', |
| + | formErrorSelector: '.form-error', |
| + | formErrorClass: 'is-visible', |
| + | patterns: { |
| + | alpha : /^[a-zA-Z]+$/, |
| + | alpha_numeric : /^[a-zA-Z0-9]+$/, |
| + | integer : /^[-+]?\d+$/, |
| + | number : /^[-+]?\d*(?:[\.\,]\d+)?$/, |
| + | |
| + | // 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})$/ |
| + | }, |
| + | validators: { |
| + | equalTo: function (el, required, parent) { |
| + | var from = document.getElementById(el.getAttribute(this.add_namespace('data-equalto'))).value, |
| + | to = el.value, |
| + | valid = (from === to); |
| + | |
| + | return valid; |
| + | } |
| + | } |
| + | }; |
| + | |
| + | |
| + | /** |
| + | * Initializes the Abide plugin and calls functions to get Abide functioning on load. |
| + | * @private |
| + | */ |
| + | Abide.prototype._init = function() { |
| + | }; |
| + | |
| + | /** |
| + | * Initializes events for Abide. |
| + | * @private |
| + | */ |
| + | Abide.prototype._events = function() { |
| + | var self = this; |
| + | this.$element |
| + | .off('.abide') |
| + | .on('reset.fndtn.abide', function(e) { |
| + | self.resetForm($(this)); |
| + | }) |
| + | .on('submit.fndtn.abide', function(e) { |
| + | e.preventDefault(); |
| + | self.validateForm(self.$element); |
| + | }) |
| + | .find('input, textarea, select') |
| + | .off('.abide') |
| + | .on('blur.fndtn.abide change.fndtn.abide', function (e) { |
| + | if (self.options.validateOn === 'fieldChange') { |
| + | self.validateInput($(e.target), self.$element); |
| + | } |
| + | // self.validateForm(self.$element); |
| + | }) |
| + | .on('keydown.fndtn.abide', function (e) { |
| + | // if (settings.live_validate === true && e.which != 9) { |
| + | // clearTimeout(self.timer); |
| + | // self.timer = setTimeout(function () { |
| + | // self.validate([this], e); |
| + | // }.bind(this), settings.timeout); |
| + | // } |
| + | // self.validateForm(self.$element); |
| + | }); |
| + | |
| + | }, |
| + | /** |
| + | * Calls necessary functions to update Abide upon DOM change |
| + | * @private |
| + | */ |
| + | Abide.prototype._reflow = function() { |
| + | var self = this; |
| + | }; |
| + | /** |
| + | * 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) { |
| + | switch ($el[0].type) { |
| + | case 'text': |
| + | if ($el.attr('required') && !$el.val()) { |
| + | // requirement check does not pass |
| + | return false; |
| + | } else { |
| + | return true; |
| + | } |
| + | break; |
| + | case 'checkbox': |
| + | if ($el.attr('required') && !$el.is(':checked')) { |
| + | return false; |
| + | } else { |
| + | return true; |
| + | } |
| + | break; |
| + | case 'radio': |
| + | if ($el.attr('required') && !$el.is(':checked')) { |
| + | return false; |
| + | } else { |
| + | return true; |
| + | } |
| + | break; |
| + | default: |
| + | if ($el.attr('required') && (!$el.val() || !$el.val().length || $el.is(':empty'))) { |
| + | return false; |
| + | } else { |
| + | return true; |
| + | } |
| + | } |
| + | }; |
| + | /** |
| + | * 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.findLabel = function($el) { |
| + | if ($el.next('label').length) { |
| + | return $el.next('label'); |
| + | } |
| + | else { |
| + | return $el.closest('label'); |
| + | } |
| + | }; |
| + | /** |
| + | * Adds the CSS error class as specified by the Abide settings to the label, input, and the form |
| + | * @param {Object} element - jQuery object to add the class to |
| + | */ |
| + | Abide.prototype.addErrorClasses = function($el) { |
| + | var self = this, |
| + | $label = self.findLabel($el), |
| + | $formError = $el.next(self.options.formErrorSelector) || $el.find(self.options.formErrorSelector); |
| + | |
| + | // label |
| + | if ($label) { |
| + | $label.addClass(self.options.labelErrorClass); |
| + | } |
| + | // form error |
| + | if ($formError) { |
| + | $formError.addClass(self.options.formErrorClass); |
| + | } |
| + | // input |
| + | $el.addClass(self.options.inputErrorClass); |
| + | }; |
| + | /** |
| + | * Removes CSS error class as specified by the Abide settings from the label, input, and the form |
| + | * @param {Object} element - jQuery object to remove the class from |
| + | */ |
| + | Abide.prototype.removeErrorClasses = function($el) { |
| + | var self = this, |
| + | $label = self.findLabel($el), |
| + | $formError = $el.next(self.options.formErrorSelector) || $el.find(self.options.formErrorSelector); |
| + | // label |
| + | if ($label && $label.hasClass(self.options.labelErrorClass)) { |
| + | $label.removeClass(self.options.labelErrorClass); |
| + | } |
| + | // form error |
| + | if ($formError && $formError.hasClass(self.options.formErrorClass)) { |
| + | $formError.removeClass(self.options.formErrorClass); |
| + | } |
| + | // input |
| + | if ($el.hasClass(self.options.inputErrorClass)) { |
| + | $el.removeClass(self.options.inputErrorClass); |
| + | } |
| + | }; |
| + | /** |
| + | * 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 |
| + | * @param {Object} form - jQuery object of the entire form to find the various input elements |
| + | */ |
| + | Abide.prototype.validateInput = function($el, $form) { |
| + | var self = this, |
| + | textInput = $form.find('input[type="text"]'), |
| + | checkInput = $form.find('input[type="checkbox"]'), |
| + | label, |
| + | radioGroupName; |
| + | |
| + | if ($el[0].type === 'text') { |
| + | if (!self.requiredCheck($el) || !self.validateText($el)) { |
| + | self.addErrorClasses($el); |
| + | $el.trigger('invalid.fndtn.abide', $el[0]); |
| + | } |
| + | else { |
| + | self.removeErrorClasses($el); |
| + | $el.trigger('valid.fndtn.abide', $el[0]); |
| + | } |
| + | } |
| + | else if ($el[0].type === 'radio') { |
| + | radioGroupName = $el.attr('name'); |
| + | label = $el.siblings('label'); |
| + | |
| + | if (self.validateRadio(radioGroupName)) { |
| + | $(label).each(function() { |
| + | if ($(this).hasClass(self.options.labelErrorClass)) { |
| + | $(this).removeClass(self.options.labelErrorClass); |
| + | } |
| + | }); |
| + | $el.trigger('valid.fndtn.abide', $el[0]); |
| + | } |
| + | else { |
| + | $(label).each(function() { |
| + | $(this).addClass(self.options.labelErrorClass); |
| + | }); |
| + | $el.trigger('invalid.fndtn.abide', $el[0]); |
| + | }; |
| + | } |
| + | else if ($el[0].type === 'checkbox') { |
| + | if (!self.requiredCheck($el)) { |
| + | self.addErrorClasses($el); |
| + | $el.trigger('invalid.fndtn.abide', $el[0]); |
| + | } |
| + | else { |
| + | self.removeErrorClasses($el); |
| + | $el.trigger('valid.fndtn.abide', $el[0]); |
| + | } |
| + | } |
| + | else { |
| + | if (!self.requiredCheck($el) || !self.validateText($el)) { |
| + | self.addErrorClasses($el); |
| + | $el.trigger('invalid.fndtn.abide', $el[0]); |
| + | } |
| + | else { |
| + | self.removeErrorClasses($el); |
| + | $el.trigger('valid.fndtn.abide', $el[0]); |
| + | } |
| + | } |
| + | }; |
| + | /** |
| + | * Goes through a form and if there are any invalid inputs, it will display the form error element |
| + | * @param {Object} element - jQuery object to validate, should be a form HTML element |
| + | */ |
| + | Abide.prototype.validateForm = function($form) { |
| + | var self = this, |
| + | inputs = $form.find('input'), |
| + | inputCount = $form.find('input').length, |
| + | counter = 0; |
| + | |
| + | while (counter < inputCount) { |
| + | self.validateInput($(inputs[counter]), $form); |
| + | counter++; |
| + | } |
| + | |
| + | // what are all the things that can go wrong with a form? |
| + | if ($form.find('.form-error.is-visible').length || $form.find('.is-invalid-label').length) { |
| + | $form.find('[data-abide-error]').css('display', 'block'); |
| + | } |
| + | else { |
| + | $form.find('[data-abide-error]').css('display', 'none'); |
| + | } |
| + | }; |
| + | /** |
| + | * Determines whether or a not a text input is valid based on the patterns specified in the attribute |
| + | * @param {Object} element - jQuery object to validate, should be a text input HTML element |
| + | * @returns {Boolean} Boolean value depends on whether or not the input value matches the pattern specified |
| + | */ |
| + | Abide.prototype.validateText = function($el) { |
| + | var self = this, |
| + | valid = false, |
| + | patternLib = this.options.patterns, |
| + | inputText = $($el).val(), |
| + | // maybe have a different way of parsing this bc people might use type |
| + | pattern = $($el).attr('pattern'); |
| + | |
| + | // if there's no value, then return true |
| + | // since required check has already been done |
| + | if (inputText.length === 0) { |
| + | return true; |
| + | } |
| + | else { |
| + | if (inputText.match(patternLib[pattern])) { |
| + | return true; |
| + | } |
| + | else { |
| + | return false; |
| + | } |
| + | } |
| + | }; |
| + | /** |
| + | * Determines whether or a not a radio input is valid based on whether or not it is required and selected |
| + | * @param {String} group - 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(group) { |
| + | var self = this, |
| + | labels = $(':radio[name="' + group + '"]').siblings('label'), |
| + | counter = 0; |
| + | // go through each radio button |
| + | $(':radio[name="' + group + '"]').each(function() { |
| + | // put them through the required checkpoint |
| + | if (!self.requiredCheck($(this))) { |
| + | // if at least one doesn't pass, add a tally to the counter |
| + | counter++; |
| + | } |
| + | // if at least one is checked |
| + | // reset the counter |
| + | if ($(this).is(':checked')) { |
| + | counter = 0; |
| + | } |
| + | }); |
| + | |
| + | if (counter > 0) { |
| + | return false; |
| + | } |
| + | else { |
| + | return true; |
| + | } |
| + | }; |
| + | Abide.prototype.matchValidation = function(val, validation) { |
| + | |
| + | }; |
| + | /** |
| + | * Resets form inputs and styles |
| + | * @param {Object} $form - A jQuery object that should be an HTML form element |
| + | */ |
| + | Abide.prototype.resetForm = function($form) { |
| + | var self = this; |
| + | var invalidAttr = 'data-invalid'; |
| + | // remove data attributes |
| + | $('[' + self.invalidAttr + ']', $form).removeAttr(invalidAttr); |
| + | // remove styles |
| + | $('.' + self.options.labelErrorClass, $form).not('small').removeClass(self.options.labelErrorClass); |
| + | $('.' + self.options.inputErrorClass, $form).not('small').removeClass(self.options.inputErrorClass); |
| + | $('.form-error.is-visible').removeClass('is-visible'); |
| + | $form.find('[data-abide-error]').css('display', 'none'); |
| + | $(':input', $form).not(':button, :submit, :reset, :hidden, [data-abide-ignore]').val('').removeAttr(invalidAttr); |
| + | }; |
| + | Abide.prototype.destroy = function(){ |
| + | //TODO 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); |
| + | |
| + | /** |
| + | * 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); |
| + | 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'); |
| + | 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, _this, { |
| + | 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); |
| + | |
| + | /** |
| + | * 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); |
| + | 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, _this, { |
| + | 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(':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; |
| + | console.log($target); |
| + | if(!this.options.multiOpen){ |
| + | this.up(this.$element.find('.is-active').not($target.parentsUntil(this.$element))); |
| + | } |
| + | |
| + | $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); |
| + | |
| + | /** |
| + | * 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); |
| + | 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. |
| + | * @option |
| + | * @example '<li><a>Back</a></li>' |
| + | */ |
| + | backButton: '<li class="js-drilldown-back" tabindex="0"><a>Back</a></li>', |
| + | /** |
| + | * Markup used to wrap drilldown menu. Use a class name for independent styling, or the JS applied class: `is-drilldown`. |
| + | * @option |
| + | * @example '<div></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]').addClass('is-drilldown-sub')/*.wrap($(this.options.wrapper).addClass('is-drilldown-sub'))*/; |
| + | // this.$rootElems = this.$element.children('[data-submenu]')/*.addClass('first-sub')*/; |
| + | this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'menuitem'); |
| + | // this.$submenus; |
| + | |
| + | |
| + | this._prepareMenu(); |
| + | // this._getMaxDims(); |
| + | 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); |
| + | $sub.find('a')[0].removeAttribute('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){ |
| + | 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, _this, { |
| + | 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'); |
| + | |
| + | Foundation.unregisterPlugin(this); |
| + | }; |
| + | Foundation.plugin(Drilldown, 'Drilldown'); |
| + | }(jQuery, window.Foundation); |
| + | |
| + | /** |
| + | * 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); |
| + | 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, |
| + | /** |
| + | * 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 on open. |
| + | * @option |
| + | * @example false |
| + | */ |
| + | trapFocus: 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(){ |
| + | console.log('hover'); |
| + | 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); |
| + | }); |
| + | } |
| + | this.$anchor.add(this.$element).on('keydown.zf.dropdown', function(e) { |
| + | |
| + | var visibleFocusableElements = Foundation.Keyboard.findFocusable(_this.$element); |
| + | |
| + | Foundation.Keyboard.handleKey(e, _this, { |
| + | 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() { |
| + | _this.open(); |
| + | _this.$element.attr('tabindex', -1).focus(); |
| + | }, |
| + | close: function() { |
| + | _this.close(); |
| + | _this.$anchor.focus(); |
| + | } |
| + | }); |
| + | }); |
| + | }; |
| + | /** |
| + | * 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}); |
| + | |
| + | |
| + | |
| + | /** |
| + | * 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); |
| + | |
| + | /** |
| + | * 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); |
| + | Foundation.Keyboard.register('DropdownMenu', { |
| + | 'ENTER': 'open', |
| + | 'SPACE': 'open', |
| + | 'ARROW_RIGHT': 'next', |
| + | 'ARROW_UP': 'up', |
| + | 'ARROW_DOWN': 'down', |
| + | 'ARROW_LEFT': 'previous', |
| + | 'ESCAPE': 'close' |
| + | }); |
| + | |
| + | // /** |
| + | // * Fires when the plugin has been successfuly initialized. |
| + | // * @event DropdownMenu#init |
| + | // */ |
| + | // this.$element.trigger('init.zf.dropdown'); |
| + | } |
| + | |
| + | /** |
| + | * Default settings for plugin |
| + | */ |
| + | DropdownMenu.defaults = { |
| + | // toggleOn: 'both', |
| + | /** |
| + | * Allow a submenu to open/remain open on parent click event. Allows cursor to move away from menu. |
| + | * @option |
| + | * @example true |
| + | */ |
| + | clickOpen: true, |
| + | /** |
| + | * Allow clicks on the body to close any open submenus. |
| + | * @option |
| + | * @example false |
| + | */ |
| + | closeOnClick: false, |
| + | /** |
| + | * Disallows hover events from opening submenus |
| + | * @option |
| + | * @example false |
| + | */ |
| + | disableHover: false, |
| + | /** |
| + | * Allow a submenu to automatically close on a mouseleave event. |
| + | * @option |
| + | * @example true |
| + | */ |
| + | autoclose: true, |
| + | /** |
| + | * Amount of time to delay opening a submenu on hover event. |
| + | * @option |
| + | * @example 150 |
| + | */ |
| + | hoverDelay: 150, |
| + | /** |
| + | * Amount of time to delay closing a submenu on a mouseleave event. |
| + | * @option |
| + | * @example 500 |
| + | */ |
| + | closingTime: 500, |
| + | // wrapOnKeys: true, |
| + | /** |
| + | * Position of the menu relative to what direction the submenus should open. Handled by JS. |
| + | * @option |
| + | * @example 'left' |
| + | */ |
| + | alignment: 'left', |
| + | /** |
| + | * 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' |
| + | }; |
| + | /** |
| + | * Initializes the plugin, and calls _prepareMenu |
| + | * @private |
| + | * @function |
| + | */ |
| + | DropdownMenu.prototype._init = function(){ |
| + | if(this.$element.hasClass(this.options.verticalClass)){ |
| + | this.vertical = true; |
| + | } |
| + | // this.vertical = this.$element.hasClass(this.options.verticalClass); |
| + | this._prepareMenu(); |
| + | // this._addTopLevelKeyHandler(); |
| + | }; |
| + | /** |
| + | * Prepares the menu by checking alignment and orientation, setting attributes for elements, and creating jQuery collections of elements. |
| + | * @private |
| + | * @function |
| + | */ |
| + | DropdownMenu.prototype._prepareMenu = function(){ |
| + | var _this = this; |
| + | this.$tabs = this.$element.children('li.has-submenu'); |
| + | this.$tabs.children('[data-submenu]').addClass('first-sub'); |
| + | this.$submenus = this.$element.find('li.has-submenu'); |
| + | this.$menuItems = this.$element.find('li').attr({'role': 'menuitem', 'tabindex': 0}); |
| + | this.$menuItems.children('a').attr('tabindex', -1); |
| + | if(this.$element.hasClass(this.options.rightClass)){ |
| + | this.options.alignment = 'right'; |
| + | this.$submenus.addClass('is-left-arrow opens-left'); |
| + | }else{ |
| + | this.$submenus.addClass('is-right-arrow opens-right'); |
| + | } |
| + | if(!this.vertical){ |
| + | this.$tabs.removeClass('is-right-arrow is-left-arrow opens-left opens-right').addClass('is-down-arrow'); |
| + | } |
| + | |
| + | this.$tabs.each(function(){ |
| + | var $tab = $(this); |
| + | $tab.attr({ |
| + | 'role': 'menuitem', |
| + | 'tabindex': 0, |
| + | 'aria-label': $tab.children('a:first-child').text()/*.match(/\w/ig).join('')*/ |
| + | }).children('a').attr('tabindex', -1);//maybe add a more specific regex to match alphanumeric characters and join them appropriately |
| + | if($tab.children('[data-submenu]')){ |
| + | $tab.attr('aria-haspopup', true); |
| + | } |
| + | }); |
| + | |
| + | |
| + | this.$submenus.each(function(){ |
| + | var $sub = $(this); |
| + | |
| + | // if(_this.options.alignment === 'right'){ |
| + | // $sub.children('[data-submenu]').addClass('is-right-arrow'); |
| + | // } |
| + | |
| + | $sub.children('[data-submenu]') |
| + | .attr({ |
| + | 'aria-hidden': true, |
| + | 'tabindex': -1, |
| + | 'role': 'menu' |
| + | }).addClass('vertical'); |
| + | _this._events($sub); |
| + | }); |
| + | }; |
| + | |
| + | /** |
| + | * Adds event listeners to elements within the menu |
| + | * @param {jQuery} $elem - the element to attach listeners too. |
| + | * @private |
| + | * @function |
| + | */ |
| + | DropdownMenu.prototype._events = function($elem){ |
| + | var _this = this, |
| + | isTouch = window.ontouchstart !== undefined; |
| + | |
| + | if(this.options.clickOpen || isTouch){ |
| + | $elem.off('click.zf.dropdownmenu') |
| + | .on('click.zf.dropdownmenu', function(e){ |
| + | if(!$(this).hasClass('is-dropdown-submenu-parent')){ return; } |
| + | var hasClicked = $elem.data('isClick'); |
| + | if(isTouch && hasClicked) return; |
| + | e.preventDefault(); |
| + | e.stopPropagation(); |
| + | |
| + | if(hasClicked){ |
| + | _this._hide($elem); |
| + | }else{ |
| + | _this._hideOthers($elem); |
| + | _this._show($elem); |
| + | $elem.data('isClick', true) |
| + | .parentsUntil('[data-dropdown-menu]', '.is-dropdown-submenu-parent') |
| + | .data('isClick', true); |
| + | if(_this.options.closeOnClick){ |
| + | _this._addBodyHandler(); |
| + | } |
| + | } |
| + | }); |
| + | } |
| + | |
| + | if(!this.options.disableHover){ |
| + | //add ability for all menu items to close an open menu on the same level// |
| + | this.$menuItems.on('mouseenter.zf.dropdownmenu', function(e){ |
| + | var $el = $(this); |
| + | if(!$el.hasClass('is-active')){ |
| + | _this._hideOthers($el); |
| + | } |
| + | }); |
| + | //elements with submenus |
| + | $elem.off('mouseenter.zf.dropdownmenu') |
| + | .on('mouseenter.zf.dropdownmenu', function(e){ |
| + | clearTimeout($elem.closeTimer); |
| + | if(!$elem.hasClass('is-active')){ |
| + | $elem.openTimer = setTimeout(function(){ |
| + | // _this._hideOthers($elem); |
| + | _this._show($elem); |
| + | }, _this.options.hoverDelay); |
| + | } |
| + | }).on('mouseleave.zf.dropdownmenu', function(e){ |
| + | if(!$elem.data('isClick') && _this.options.autoclose){ |
| + | clearTimeout($elem.openTimer); |
| + | $elem.closeTimer = setTimeout(function(){ |
| + | _this._hide($elem); |
| + | }, _this.options.closingTime); |
| + | } |
| + | }); |
| + | } |
| + | |
| + | this.$menuItems.on('keydown.zf.dropdownmenu', function(e){ |
| + | var $element = $(this), |
| + | $tabs = _this.$element.children('li'), |
| + | isTab = $element.is($tabs), |
| + | $elements = isTab ? $tabs : $element.parents('li').first().add($element.parent('ul').children('li')), |
| + | $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.focus(); |
| + | }, prevSibling = function() { |
| + | $prevElement.focus(); |
| + | }, openSub = function() { |
| + | if ($element.has('ul').length) { |
| + | _this._show($element); |
| + | $element.find('li').first().focus(); |
| + | } |
| + | }, closeSub = function() { |
| + | //if ($element.is(':first-child')) { |
| + | $element.parents('li').first().focus(); |
| + | _this._hide($element.parents('li').first()); |
| + | //} |
| + | }; |
| + | var functions = { |
| + | open: openSub, |
| + | close: function() { |
| + | _this._hideAll(); |
| + | _this.$menuItems.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, _this, functions); |
| + | }); |
| + | // end keyboardAccess |
| + | }; |
| + | /** |
| + | * Toggles the current dropdown pane. |
| + | * @param {jQuery} $elem - the current element with a submenu to toggle. |
| + | * @function |
| + | * @private |
| + | */ |
| + | DropdownMenu.prototype._toggle = function($elem){ |
| + | if($elem.hasClass('is-active')){ |
| + | this._hide($elem); |
| + | }else{ |
| + | this._show($elem); |
| + | } |
| + | }; |
| + | /** |
| + | * Adds an event handler to the body to close any dropdowns on a click. |
| + | * @function |
| + | * @private |
| + | */ |
| + | DropdownMenu.prototype._addBodyHandler = function(){ |
| + | var $body = $('body'), |
| + | _this = this; |
| + | $body.not(_this.$element).on('click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu', function(e){ |
| + | _this._hideAll(); |
| + | $body.off('click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu'); |
| + | }); |
| + | }; |
| + | //show & hide stuff @private |
| + | /** |
| + | * Opens a dropdown pane, and checks for collisions first. |
| + | * @param {jQuery} $elem - current element with a submenu to show |
| + | * @function |
| + | * @private |
| + | * @fires DropdownMenu#show |
| + | */ |
| + | DropdownMenu.prototype._show = function($elem){ |
| + | this._hideOthers($elem); |
| + | $elem.focus(); |
| + | // console.log('showing some stuff', $elem.find('li:first-child')); |
| + | var $sub = $elem.children('[data-submenu]:first-of-type'); |
| + | $elem.addClass('is-active'); |
| + | $sub.css('visibility', 'hidden').addClass('js-dropdown-active') |
| + | .attr('aria-hidden', false); |
| + | |
| + | |
| + | //break this into own function |
| + | var clear = Foundation.Box.ImNotTouchingYou($sub, null, true); |
| + | if(!clear){ |
| + | if(this.options.alignment === 'left'){ |
| + | $elem.removeClass('opens-left').addClass('opens-right'); |
| + | }else{ |
| + | $elem.removeClass('opens-right').addClass('opens-left'); |
| + | } |
| + | this.changed = true; |
| + | |
| + | // still not clear, small screen, add inner class |
| + | clear = Foundation.Box.ImNotTouchingYou($sub, null, true); |
| + | if (!clear) { |
| + | $elem.removeClass('opens-left opens-right').addClass('opens-inner'); |
| + | this.changed = true; |
| + | } |
| + | } |
| + | $sub.css('visibility', ''); |
| + | /** |
| + | * Fires when the new dropdown pane is visible. |
| + | * @event DropdownMenu#show |
| + | */ |
| + | this.$element.trigger('show.zf.dropdownmenu', [$elem]); |
| + | }; |
| + | /** |
| + | * Hides a single, currently open dropdown pane. |
| + | * @function |
| + | * @param {jQuery} $elem - element with a submenu to hide |
| + | * @private |
| + | */ |
| + | DropdownMenu.prototype._hide = function($elem){ |
| + | this._hideSome($elem); |
| + | }; |
| + | /** |
| + | * Hides currently open dropdown panes from a jQuery collection passed by other functions. |
| + | * Resets the position classes if the element was mutated due to a collision. |
| + | * @function |
| + | * @param {jQuery} $elems - element(s) with a submenu to hide |
| + | * @private |
| + | * @fires DropdownMenu#hide |
| + | */ |
| + | DropdownMenu.prototype._hideSome = function($elems){ |
| + | if($elems.length){ |
| + | // if($elems.hasClass('first-sub')){ |
| + | // console.log('true'); |
| + | // $elems.blur(); |
| + | // } |
| + | $elems.removeClass('is-active opens-inner').data('isClick', false) |
| + | |
| + | .find('.is-active').removeClass('is-active').data('isClick', false).end() |
| + | |
| + | .find('.js-dropdown-active').removeClass('js-dropdown-active') |
| + | .attr('aria-hidden', true); |
| + | $elems.parent('.has-submenu').removeClass('is-active'); |
| + | if(this.changed){ |
| + | //remove position class |
| + | if(this.options.alignment === 'left'){ |
| + | $elems.find('.opens-left').removeClass('opens-left').addClass('opens-right'); |
| + | }else{ |
| + | $elems.find('.opens-right').removeClass('opens-right').addClass('opens-left'); |
| + | } |
| + | } |
| + | /** |
| + | * Fires when the open menus are closed. |
| + | * @event DropdownMenu#hide |
| + | */ |
| + | this.$element.trigger('hide.zf.dropdownmenu'); |
| + | } |
| + | }; |
| + | /** |
| + | * Hides a submenu's siblings. |
| + | * @param {jQuery} $elem - the element that should remain open. |
| + | * @function |
| + | * @private |
| + | */ |
| + | DropdownMenu.prototype._hideOthers = function($elem){ |
| + | this._hideSome($elem.siblings('.has-submenu.is-active')); |
| + | }; |
| + | /** |
| + | * Hides everything. |
| + | * @function |
| + | */ |
| + | DropdownMenu.prototype._hideAll = function(){ |
| + | this._hideSome(this.$element); |
| + | }; |
| + | /** |
| + | * Destroys the plugin. |
| + | * @function |
| + | */ |
| + | DropdownMenu.prototype.destroy = function() { |
| + | this._hideAll(); |
| + | this.$element |
| + | .removeData('zf-plugin') |
| + | .find('li') |
| + | .removeClass('js-dropdown-nohover is-right-arrow is-left-arrow opens-left opens-inner opens-right') |
| + | .add('a').off('.zf.dropdownmenu') |
| + | .end().find('ul').removeClass('first-sub'); |
| + | Foundation.Nest.Burn(this.$element, 'dropdown'); |
| + | Foundation.unregisterPlugin(this); |
| + | }; |
| + | |
| + | Foundation.plugin(DropdownMenu, 'DropdownMenu'); |
| + | |
| + | var checkClass = function($elem){ |
| + | return $elem.hasClass('is-active'); |
| + | }; |
| + | |
| + | }(Foundation, jQuery); |
| + | |
| + | !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.$window = $(window); |
| + | this.name = 'equalizer'; |
| + | this.attr = 'data-equalizer'; |
| + | |
| + | this._init(); |
| + | this._events(); |
| + | |
| + | Foundation.registerPlugin(this); |
| + | } |
| + | |
| + | /** |
| + | * Default settings for plugin |
| + | */ |
| + | Equalizer.defaults = { |
| + | /** |
| + | * Enable height equalization when stacked on smaller screens. |
| + | * @option |
| + | * @example true |
| + | */ |
| + | equalizeOnStack: true, |
| + | /** |
| + | * Amount of time, in ms, to debounce the size checking/equalization. Lower times mean smoother transitions/less performance on mobile. |
| + | * @option |
| + | * @example 50 |
| + | */ |
| + | throttleInterval: 50 |
| + | }; |
| + | |
| + | /** |
| + | * Initializes the Equalizer plugin and calls functions to get equalizer functioning on load. |
| + | * @private |
| + | */ |
| + | Equalizer.prototype._init = function() { |
| + | this._reflow(); |
| + | }; |
| + | |
| + | /** |
| + | * Initializes events for Equalizer. |
| + | * @private |
| + | */ |
| + | Equalizer.prototype._events = function() { |
| + | var self = this; |
| + | |
| + | this.$window |
| + | .off('.equalizer') |
| + | .on('resize.fndtn.equalizer', Foundation.util.throttle(function () { |
| + | self._reflow(); |
| + | }, self.options.throttleInterval)); |
| + | }; |
| + | |
| + | /** |
| + | * 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() { |
| + | var self = this; |
| + | |
| + | $('[' + this.attr + ']').each(function() { |
| + | var $eqParent = $(this), |
| + | adjustedHeights = [], |
| + | $images = $eqParent.find('img'); |
| + | |
| + | if ($images.length) { |
| + | Foundation.onImagesLoaded($images, function() { |
| + | adjustedHeights = self.getHeights($eqParent); |
| + | self.applyHeight($eqParent, adjustedHeights); |
| + | }); |
| + | } |
| + | else { |
| + | adjustedHeights = self.getHeights($eqParent); |
| + | self.applyHeight($eqParent, adjustedHeights); |
| + | } |
| + | }); |
| + | }; |
| + | /** |
| + | * Finds the outer heights of children contained within an Equalizer parent and returns them in an array |
| + | * @param {Object} $eqParent A jQuery instance of an Equalizer container |
| + | * @returns {Array} heights An array of heights of children within Equalizer container |
| + | */ |
| + | Equalizer.prototype.getHeights = function($eqParent) { |
| + | var eqGroupName = $eqParent.data('equalizer'), |
| + | eqGroup = eqGroupName ? $eqParent.find('[' + this.attr + '-watch="' + eqGroupName + '"]:visible') : $eqParent.find('[' + this.attr + '-watch]:visible'), |
| + | heights; |
| + | |
| + | eqGroup.height('inherit'); |
| + | heights = eqGroup.map(function () { return $(this).outerHeight(false);}).get(); |
| + | console.log(heights); |
| + | return heights; |
| + | }; |
| + | /** |
| + | * Changes the CSS height property of each child in an Equalizer parent to match the tallest |
| + | * @param {Object} $eqParent - A jQuery instance of an Equalizer container |
| + | * @param {array} heights - An array of heights of children within Equalizer container |
| + | * @fires Equalizer#preEqualized |
| + | * @fires Equalizer#postEqualized |
| + | */ |
| + | Equalizer.prototype.applyHeight = function($eqParent, heights) { |
| + | var eqGroupName = $eqParent.data('equalizer'), |
| + | eqGroup = eqGroupName ? $eqParent.find('['+this.attr+'-watch="'+eqGroupName+'"]:visible') : $eqParent.find('['+this.attr+'-watch]:visible'), |
| + | max = Math.max.apply(null, heights); |
| + | |
| + | /** |
| + | * Fires before the heights are applied |
| + | * @event Equalizer#preEqualized |
| + | */ |
| + | $eqParent.trigger('preEqualized.zf.Equalizer'); |
| + | |
| + | // for now, apply the max height found in the array |
| + | for (var i = 0; i < eqGroup.length; i++) { |
| + | $(eqGroup[i]).css('height', max); |
| + | } |
| + | // console.log(max); |
| + | /** |
| + | * Fires when the heights have been applied |
| + | * @event Equalizer#postEqualized |
| + | */ |
| + | $eqParent.trigger('postEqualized.zf.Equalizer'); |
| + | }; |
| + | /** |
| + | * Destroys an instance of Equalizer. |
| + | * @function |
| + | */ |
| + | Equalizer.prototype.destroy = function(){ |
| + | //TODO 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); |
| + | |
| + | /** |
| + | * 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); |
| + | } |
| + | |
| + | /** |
| + | * 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.fndtn.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.$element.trigger('replaced.zf.interchange'); |
| + | _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); |
| + | _this.$element.trigger('replaced.zf.interchange'); |
| + | _this.currentPath = path; |
| + | }); |
| + | } |
| + | }; |
| + | /** |
| + | * 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); |
| + | |
| + | /** |
| + | * 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, options); |
| + | |
| + | this._init(); |
| + | |
| + | Foundation.registerPlugin(this); |
| + | } |
| + | |
| + | /** |
| + | * 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 |
| + | }; |
| + | |
| + | /** |
| + | * 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, document.body.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; |
| + | |
| + | // 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); |
| + | |
| + | 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); |
| + | |
| + | /** |
| + | * 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.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-' |
| + | }; |
| + | |
| + | /** |
| + | * 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.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){ |
| + | // if(!this.options.forceTop){ |
| + | // var scrollPos = parseInt(window.pageYOffset); |
| + | // this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)'; |
| + | // } |
| + | // if(this.options.isSticky){ this._stick(); } |
| + | if($closer.length){ $closer.hide(); } |
| + | }else{ |
| + | // if(this.options.isSticky || !this.options.forceTop){ |
| + | // this.$element[0].style.transform = ''; |
| + | // $(window).off('scroll.zf.offcanvas'); |
| + | // } |
| + | 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')){ 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') |
| + | .attr('aria-hidden', 'false') |
| + | .trigger('opened.zf.offcanvas'); |
| + | |
| + | // if(_this.options.isSticky){ |
| + | // _this._stick(); |
| + | // } |
| + | }); |
| + | 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(); |
| + | }); |
| + | } |
| + | }; |
| + | /** |
| + | * 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 |
| + | * @fires OffCanvas#closed |
| + | */ |
| + | OffCanvas.prototype.close = function() { |
| + | if(!this.$element.hasClass('is-open')){ 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'); |
| + | }; |
| + | |
| + | /** |
| + | * 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(){ |
| + | //TODO make this... |
| + | }; |
| + | |
| + | Foundation.plugin(OffCanvas, 'OffCanvas'); |
| + | |
| + | }(jQuery, Foundation); |
| + | |
| + | /** |
| + | * 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 accordion menu. |
| + | * @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); |
| + | 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' |
| + | }; |
| + | /** |
| + | * 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($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, _this, { |
| + | 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); |
| + | } |
| + | 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? |
| + | /** |
| + | * 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); |
| + | |
| + | /** |
| + | * 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.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); |
| + | |
| + | /** |
| + | * 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.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); |
| + | |
| + | /** |
| + | * 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); |
| + | 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._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'){ |
| + | console.log('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#closeAll |
| + | * @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#closeAll |
| + | */ |
| + | _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(){ |
| + | }); |
| + | }); |
| + | }else{ |
| + | Foundation.Motion.animateIn(_this.$element, _this.options.animationIn, function(){ |
| + | }); |
| + | } |
| + | }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; |
| + | var visibleFocusableElements = this.$element.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]').filter(function() { |
| + | 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; |
| + | }); |
| + | |
| + | 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){ |
| + | if (visibleFocusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general |
| + | e.preventDefault(); |
| + | } |
| + | Foundation.Keyboard.handleKey(e, _this, { |
| + | close: function() { |
| + | if (this.options.closeOnEsc) { |
| + | this.close(); |
| + | } |
| + | } |
| + | }); |
| + | }); |
| + | } |
| + | |
| + | // 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, _this, { |
| + | tab_forward: function() { |
| + | if (this.$element.find(':focus').is(visibleFocusableElements.eq(-1))) { // left modal downwards, setting focus to first element |
| + | visibleFocusableElements.eq(0).focus(); |
| + | e.preventDefault(); |
| + | } |
| + | }, |
| + | tab_backward: function() { |
| + | if (this.$element.find(':focus').is(visibleFocusableElements.eq(0)) || this.$element.is(':focus')) { // left modal upwards, setting focus to last element |
| + | visibleFocusableElements.eq(-1).focus(); |
| + | e.preventDefault(); |
| + | } |
| + | }, |
| + | open: function() { |
| + | if ($target.is(visibleFocusableElements)) { // dont't trigger if acual element has focus (i.e. inputs, links, ...) |
| + | this.open(); |
| + | } |
| + | }, |
| + | close: function() { |
| + | if (this.options.closeOnEsc) { |
| + | this.close(); |
| + | } |
| + | } |
| + | }); |
| + | if (visibleFocusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general |
| + | e.preventDefault(); |
| + | } |
| + | }); |
| + | |
| + | }; |
| + | |
| + | /** |
| + | * 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); |
| + | |
| + | /** |
| + | * 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); |
| + | 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 ? 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(this.options.decimal), |
| + | 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{ |
| + | location = (location < 100 ? location : 100) - (parseFloat(this.$handle[0].style.left) || 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, _this, { |
| + | 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(); |
| + | // }; |
| + | |
| + | /** |
| + | * 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.defaults = { |
| + | /** |
| + | * Customizable container template. Add your own classes for styling and sizing. |
| + | * @option |
| + | * @example '<div data-sticky-container class="small-6 columns"></div>' |
| + | */ |
| + | 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 |
| + | * Also triggered by Foundation._reflow |
| + | * @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; |
| + | // console.log(this.options.anchor, this.options.topAnchor); |
| + | if(this.options.topAnchor !== ''){ |
| + | this._parsePoints(); |
| + | // console.log(this.points[0]); |
| + | }else{ |
| + | this.$anchor = this.options.anchor ? $('#' + this.options.anchor) : $(document.body); |
| + | } |
| + | |
| + | |
| + | 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 = {}; |
| + | 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; |
| + | } |
| + | // console.log(breaks); |
| + | this.points = breaks; |
| + | // console.log(this.points); |
| + | 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){ |
| + | // console.log('called'); |
| + | var _this = this, |
| + | scrollListener = 'scroll.zf.' + id; |
| + | if(this.isOn){ return; } |
| + | if(this.canStick){ |
| + | this.isOn = true; |
| + | // this.$anchor.off('change.zf.sticky') |
| + | // .on('change.zf.sticky', function(){ |
| + | // _this._setSizes(function(){ |
| + | // _this._calc(false); |
| + | // }); |
| + | // }); |
| + | |
| + | $(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; |
| + | // this.$anchor.off('change.zf.sticky'); |
| + | $(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 = {}, mrgn, notStuckTo, |
| + | anchorPt = (this.points ? this.points[1] - this.points[0] : this.anchorHeight) - this.elemHeight; |
| + | mrgn = stickToTop ? 'marginTop' : 'marginBottom'; |
| + | notStuckTo = stickToTop ? 'bottom' : 'top'; |
| + | 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-' + (isTop ? 'top' : 'bottom')) |
| + | .css(css) |
| + | /** |
| + | * Fires when the $element has become anchored. |
| + | * Namespaced to `top` or `bottom`. |
| + | * @event Sticky#unstuckfrom |
| + | */ |
| + | .trigger('sticky.zf.unstuckfrom:' + isTop ? 'top' : 'bottom'); |
| + | }; |
| + | |
| + | /** |
| + | * 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); |
| + | |
| + | // console.log(this.$anchor); |
| + | 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('scroll.zf.sticky'); |
| + | |
| + | 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); |
| + | |
| + | /** |
| + | * 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); |
| + | 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.$tabTitles.off('click.zf.tabs') |
| + | .on('click.zf.tabs', 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){ |
| + | 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, _this, { |
| + | 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); |
| + | |
| + | /** |
| + | * 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.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 |
| + | if (input[0] === '.') { |
| + | this.className = input.slice(1); |
| + | } |
| + | else { |
| + | this.className = 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 |
| + | if (this.$element.is(':hidden')) { |
| + | this.$element.attr('aria-expanded', 'false'); |
| + | } |
| + | }; |
| + | |
| + | /** |
| + | * Initializes events for the toggle trigger. |
| + | * @function |
| + | * @private |
| + | */ |
| + | Toggler.prototype._events = function() { |
| + | var _this = this; |
| + | |
| + | this.$element.on('toggle.zf.trigger', function() { |
| + | _this.toggle(); |
| + | return false; |
| + | }); |
| + | }; |
| + | |
| + | /** |
| + | * 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() { |
| + | if (!this.options.animate) { |
| + | this._toggleClass(); |
| + | } |
| + | else { |
| + | this._toggleAnimate(); |
| + | } |
| + | }; |
| + | |
| + | Toggler.prototype._toggleClass = function() { |
| + | var _this = this; |
| + | this.$element.toggleClass(this.className); |
| + | |
| + | if (this.$element.hasClass(this.className)) { |
| + | /** |
| + | * 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(); |
| + | }; |
| + | |
| + | 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(); |
| + | }); |
| + | } |
| + | else { |
| + | Foundation.Motion.animateOut(this.$element, this.animationOut, function() { |
| + | this.trigger('off.zf.toggler'); |
| + | _this._updateARIA(); |
| + | }); |
| + | } |
| + | }; |
| + | |
| + | Toggler.prototype._updateARIA = function() { |
| + | if (this.$element.is(':hidden')) { |
| + | this.$element.attr('aria-expanded', 'false'); |
| + | } |
| + | else { |
| + | this.$element.attr('aria-expanded', 'true'); |
| + | } |
| + | }; |
| + | |
| + | /** |
| + | * 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); |
| + | |
| + | /** |
| + | * 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.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 '<div class="tooltip"></div>' |
| + | */ |
| + | 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); |
public/javascripts/vendor/foundation.min.js
+5
-0
| @@ | @@ -0,0 +1,5 @@ |
| + | !function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var i={};e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=36)}([function(t,e){t.exports=jQuery},function(t,e,i){"use strict";function n(){return"rtl"===r()("html").attr("dir")}function s(t,e){return t=t||6,Math.round(Math.pow(36,t+1)-Math.random()*Math.pow(36,t)).toString(36).slice(1)+(e?"-"+e:"")}function o(t){var e,i={transition:"transitionend",WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend"},n=document.createElement("div");for(var s in i)void 0!==n.style[s]&&(e=i[s]);return e||(e=setTimeout(function(){t.triggerHandler("transitionend",[t])},1),"transitionend")}i.d(e,"a",function(){return n}),i.d(e,"b",function(){return s}),i.d(e,"c",function(){return o});var a=i(0),r=i.n(a)},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function o(t){return s(void 0!==t.constructor.name?t.constructor.name:t.className)}i.d(e,"a",function(){return u});var a=i(0),r=(i.n(a),i(1)),l=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),u=function(){function t(e,s){n(this,t),this._setup(e,s);var a=o(this);this.uuid=i.i(r.b)(6,a),this.$element.attr("data-"+a)||this.$element.attr("data-"+a,this.uuid),this.$element.data("zfPlugin")||this.$element.data("zfPlugin",this),this.$element.trigger("init.zf."+a)}return l(t,[{key:"destroy",value:function(){this._destroy();var t=o(this);this.$element.removeAttr("data-"+t).removeData("zfPlugin").trigger("destroyed.zf."+t);for(var e in this)this[e]=null}}]),t}()},function(t,e,i){"use strict";function n(t){return!!t&&t.find("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]").filter(function(){return!(!a()(this).is(":visible")||a()(this).attr("tabindex")<0)})}function s(t){var e=l[t.which||t.keyCode]||String.fromCharCode(t.which).toUpperCase();return e=e.replace(/\W+/,""),t.shiftKey&&(e="SHIFT_"+e),t.ctrlKey&&(e="CTRL_"+e),t.altKey&&(e="ALT_"+e),e=e.replace(/_$/,"")}i.d(e,"a",function(){return c});var o=i(0),a=i.n(o),r=i(1),l={9:"TAB",13:"ENTER",27:"ESCAPE",32:"SPACE",35:"END",36:"HOME",37:"ARROW_LEFT",38:"ARROW_UP",39:"ARROW_RIGHT",40:"ARROW_DOWN"},u={},c={keys:function(t){var e={};for(var i in t)e[t[i]]=t[i];return e}(l),parseKey:s,handleKey:function(t,e,n){var s,o,l,c=u[e],h=this.parseKey(t);if(!c)return console.warn("Component not defined!");if(s=void 0===c.ltr?c:i.i(r.a)()?a.a.extend({},c.ltr,c.rtl):a.a.extend({},c.rtl,c.ltr),o=s[h],(l=n[o])&&"function"==typeof l){var d=l.apply();(n.handled||"function"==typeof n.handled)&&n.handled(d)}else(n.unhandled||"function"==typeof n.unhandled)&&n.unhandled()},findFocusable:n,register:function(t,e){u[t]=e},trapFocus:function(t){var e=n(t),i=e.eq(0),o=e.eq(-1);t.on("keydown.zf.trapfocus",function(t){t.target===o[0]&&"TAB"===s(t)?(t.preventDefault(),i.focus()):t.target===i[0]&&"SHIFT_TAB"===s(t)&&(t.preventDefault(),o.focus())})},releaseFocus:function(t){t.off("keydown.zf.trapfocus")}}},function(t,e,i){"use strict";function n(t){var e={};return"string"!=typeof t?e:(t=t.trim().slice(1,-1))?e=t.split("&").reduce(function(t,e){var i=e.replace(/\+/g," ").split("="),n=i[0],s=i[1];return n=decodeURIComponent(n),s=void 0===s?null:decodeURIComponent(s),t.hasOwnProperty(n)?Array.isArray(t[n])?t[n].push(s):t[n]=[t[n],s]:t[n]=s,t},{}):e}i.d(e,"a",function(){return r});var s=i(0),o=i.n(s),a=window.matchMedia||function(){var t=window.styleMedia||window.media;if(!t){var e=document.createElement("style"),i=document.getElementsByTagName("script")[0],n=null;e.type="text/css",e.id="matchmediajs-test",i&&i.parentNode&&i.parentNode.insertBefore(e,i),n="getComputedStyle"in window&&window.getComputedStyle(e,null)||e.currentStyle,t={matchMedium:function(t){var i="@media "+t+"{ #matchmediajs-test { width: 1px; } }";return e.styleSheet?e.styleSheet.cssText=i:e.textContent=i,"1px"===n.width}}}return function(e){return{matches:t.matchMedium(e||"all"),media:e||"all"}}}(),r={queries:[],current:"",_init:function(){var t=this;o()("meta.foundation-mq").length||o()('<meta class="foundation-mq">').appendTo(document.head);var e,i=o()(".foundation-mq").css("font-family");e=n(i);for(var s in e)e.hasOwnProperty(s)&&t.queries.push({name:s,value:"only screen and (min-width: "+e[s]+")"});this.current=this._getCurrentSize(),this._watcher()},atLeast:function(t){var e=this.get(t);return!!e&&a(e).matches},is:function(t){return t=t.trim().split(" "),t.length>1&&"only"===t[1]?t[0]===this._getCurrentSize():this.atLeast(t[0])},get:function(t){for(var e in this.queries)if(this.queries.hasOwnProperty(e)){var i=this.queries[e];if(t===i.name)return i.value}return null},_getCurrentSize:function(){for(var t,e=0;e<this.queries.length;e++){var i=this.queries[e];a(i.value).matches&&(t=i)}return"object"==typeof t?t.name:t},_watcher:function(){var t=this;o()(window).off("resize.zf.mediaquery").on("resize.zf.mediaquery",function(){var e=t._getCurrentSize(),i=t.current;e!==i&&(t.current=e,o()(window).trigger("changed.zf.mediaquery",[e,i]))})}}},function(t,e,i){"use strict";function n(t,e,i){var n=void 0,s=Array.prototype.slice.call(arguments,3);o()(window).off(e).on(e,function(e){n&&clearTimeout(n),n=setTimeout(function(){i.apply(null,s)},t||10)})}i.d(e,"a",function(){return u});var s=i(0),o=i.n(s),a=i(6),r=function(){for(var t=["WebKit","Moz","O","Ms",""],e=0;e<t.length;e++)if(t[e]+"MutationObserver"in window)return window[t[e]+"MutationObserver"];return!1}(),l=function(t,e){t.data(e).split(" ").forEach(function(i){o()("#"+i)["close"===e?"trigger":"triggerHandler"](e+".zf.trigger",[t])})},u={Listeners:{Basic:{},Global:{}},Initializers:{}};u.Listeners.Basic={openListener:function(){l(o()(this),"open")},closeListener:function(){o()(this).data("close")?l(o()(this),"close"):o()(this).trigger("close.zf.trigger")},toggleListener:function(){o()(this).data("toggle")?l(o()(this),"toggle"):o()(this).trigger("toggle.zf.trigger")},closeableListener:function(t){t.stopPropagation();var e=o()(this).data("closable");""!==e?a.a.animateOut(o()(this),e,function(){o()(this).trigger("closed.zf")}):o()(this).fadeOut().trigger("closed.zf")},toggleFocusListener:function(){var t=o()(this).data("toggle-focus");o()("#"+t).triggerHandler("toggle.zf.trigger",[o()(this)])}},u.Initializers.addOpenListener=function(t){t.off("click.zf.trigger",u.Listeners.Basic.openListener),t.on("click.zf.trigger","[data-open]",u.Listeners.Basic.openListener)},u.Initializers.addCloseListener=function(t){t.off("click.zf.trigger",u.Listeners.Basic.closeListener),t.on("click.zf.trigger","[data-close]",u.Listeners.Basic.closeListener)},u.Initializers.addToggleListener=function(t){t.off("click.zf.trigger",u.Listeners.Basic.toggleListener),t.on("click.zf.trigger","[data-toggle]",u.Listeners.Basic.toggleListener)},u.Initializers.addCloseableListener=function(t){t.off("close.zf.trigger",u.Listeners.Basic.closeableListener),t.on("close.zf.trigger","[data-closeable], [data-closable]",u.Listeners.Basic.closeableListener)},u.Initializers.addToggleFocusListener=function(t){t.off("focus.zf.trigger blur.zf.trigger",u.Listeners.Basic.toggleFocusListener),t.on("focus.zf.trigger blur.zf.trigger","[data-toggle-focus]",u.Listeners.Basic.toggleFocusListener)},u.Listeners.Global={resizeListener:function(t){r||t.each(function(){o()(this).triggerHandler("resizeme.zf.trigger")}),t.attr("data-events","resize")},scrollListener:function(t){r||t.each(function(){o()(this).triggerHandler("scrollme.zf.trigger")}),t.attr("data-events","scroll")},closeMeListener:function(t,e){var i=t.namespace.split(".")[0];o()("[data-"+i+"]").not('[data-yeti-box="'+e+'"]').each(function(){var t=o()(this);t.triggerHandler("close.zf.trigger",[t])})}},u.Initializers.addClosemeListener=function(t){var e=o()("[data-yeti-box]"),i=["dropdown","tooltip","reveal"];if(t&&("string"==typeof t?i.push(t):"object"==typeof t&&"string"==typeof t[0]?i.concat(t):console.error("Plugin names must be strings")),e.length){var n=i.map(function(t){return"closeme.zf."+t}).join(" ");o()(window).off(n).on(n,u.Listeners.Global.closeMeListener)}},u.Initializers.addResizeListener=function(t){var e=o()("[data-resize]");e.length&&n(t,"resize.zf.trigger",u.Listeners.Global.resizeListener,e)},u.Initializers.addScrollListener=function(t){var e=o()("[data-scroll]");e.length&&n(t,"scroll.zf.trigger",u.Listeners.Global.scrollListener,e)},u.Initializers.addMutationEventsListener=function(t){if(!r)return!1;var e=t.find("[data-resize], [data-scroll], [data-mutate]"),i=function(t){var e=o()(t[0].target);switch(t[0].type){case"attributes":"scroll"===e.attr("data-events")&&"data-events"===t[0].attributeName&&e.triggerHandler("scrollme.zf.trigger",[e,window.pageYOffset]),"resize"===e.attr("data-events")&&"data-events"===t[0].attributeName&&e.triggerHandler("resizeme.zf.trigger",[e]),"style"===t[0].attributeName&&(e.closest("[data-mutate]").attr("data-events","mutate"),e.closest("[data-mutate]").triggerHandler("mutateme.zf.trigger",[e.closest("[data-mutate]")]));break;case"childList":e.closest("[data-mutate]").attr("data-events","mutate"),e.closest("[data-mutate]").triggerHandler("mutateme.zf.trigger",[e.closest("[data-mutate]")]);break;default:return!1}};if(e.length)for(var n=0;n<=e.length-1;n++){var s=new r(i);s.observe(e[n],{attributes:!0,childList:!0,characterData:!1,subtree:!0,attributeFilter:["data-events","style"]})}},u.Initializers.addSimpleListeners=function(){var t=o()(document);u.Initializers.addOpenListener(t),u.Initializers.addCloseListener(t),u.Initializers.addToggleListener(t),u.Initializers.addCloseableListener(t),u.Initializers.addToggleFocusListener(t)},u.Initializers.addGlobalListeners=function(){var t=o()(document);u.Initializers.addMutationEventsListener(t),u.Initializers.addResizeListener(),u.Initializers.addScrollListener(),u.Initializers.addClosemeListener()},u.init=function(t,e){if(void 0===t.triggersInitialized){t(document);"complete"===document.readyState?(u.Initializers.addSimpleListeners(),u.Initializers.addGlobalListeners()):t(window).on("load",function(){u.Initializers.addSimpleListeners(),u.Initializers.addGlobalListeners()}),t.triggersInitialized=!0}e&&(e.Triggers=u,e.IHearYou=u.Initializers.addGlobalListeners)}},function(t,e,i){"use strict";function n(t,e,i){function n(r){a||(a=r),o=r-a,i.apply(e),o<t?s=window.requestAnimationFrame(n,e):(window.cancelAnimationFrame(s),e.trigger("finished.zf.animate",[e]).triggerHandler("finished.zf.animate",[e]))}var s,o,a=null;if(0===t)return i.apply(e),void e.trigger("finished.zf.animate",[e]).triggerHandler("finished.zf.animate",[e]);s=window.requestAnimationFrame(n)}function s(t,e,n,s){function o(){t||e.hide(),c(),s&&s.apply(e)}function c(){e[0].style.transitionDuration=0,e.removeClass(h+" "+d+" "+n)}if(e=a()(e).eq(0),e.length){var h=t?l[0]:l[1],d=t?u[0]:u[1];c(),e.addClass(n).css("transition","none"),requestAnimationFrame(function(){e.addClass(h),t&&e.show()}),requestAnimationFrame(function(){e[0].offsetWidth,e.css("transition","").addClass(d)}),e.one(i.i(r.c)(e),o)}}i.d(e,"b",function(){return n}),i.d(e,"a",function(){return c});var o=i(0),a=i.n(o),r=i(1),l=["mui-enter","mui-leave"],u=["mui-enter-active","mui-leave-active"],c={animateIn:function(t,e,i){s(!0,t,e,i)},animateOut:function(t,e,i){s(!1,t,e,i)}}},function(t,e,i){"use strict";function n(t,e,i,n,o){return 0===s(t,e,i,n,o)}function s(t,e,i,n,s){var a,r,l,u,c=o(t);if(e){var h=o(e);r=h.height+h.offset.top-(c.offset.top+c.height),a=c.offset.top-h.offset.top,l=c.offset.left-h.offset.left,u=h.width+h.offset.left-(c.offset.left+c.width)}else r=c.windowDims.height+c.windowDims.offset.top-(c.offset.top+c.height),a=c.offset.top-c.windowDims.offset.top,l=c.offset.left-c.windowDims.offset.left,u=c.windowDims.width-(c.offset.left+c.width);return r=s?0:Math.min(r,0),a=Math.min(a,0),l=Math.min(l,0),u=Math.min(u,0),i?l+u:n?a+r:Math.sqrt(a*a+r*r+l*l+u*u)}function o(t){if((t=t.length?t[0]:t)===window||t===document)throw new Error("I'm sorry, Dave. I'm afraid I can't do that.");var e=t.getBoundingClientRect(),i=t.parentNode.getBoundingClientRect(),n=document.body.getBoundingClientRect(),s=window.pageYOffset,o=window.pageXOffset;return{width:e.width,height:e.height,offset:{top:e.top+s,left:e.left+o},parentDims:{width:i.width,height:i.height,offset:{top:i.top+s,left:i.left+o}},windowDims:{width:n.width,height:n.height,offset:{top:s,left:o}}}}function a(t,e,n,s,o,a){switch(console.log("NOTE: GetOffsets is deprecated in favor of GetExplicitOffsets and will be removed in 6.5"),n){case"top":return i.i(l.a)()?r(t,e,"top","left",s,o,a):r(t,e,"top","right",s,o,a);case"bottom":return i.i(l.a)()?r(t,e,"bottom","left",s,o,a):r(t,e,"bottom","right",s,o,a);case"center top":return r(t,e,"top","center",s,o,a);case"center bottom":return r(t,e,"bottom","center",s,o,a);case"center left":return r(t,e,"left","center",s,o,a);case"center right":return r(t,e,"right","center",s,o,a);case"left bottom":return r(t,e,"bottom","left",s,o,a);case"right bottom":return r(t,e,"bottom","right",s,o,a);case"center":return{left:$eleDims.windowDims.offset.left+$eleDims.windowDims.width/2-$eleDims.width/2+o,top:$eleDims.windowDims.offset.top+$eleDims.windowDims.height/2-($eleDims.height/2+s)};case"reveal":return{left:($eleDims.windowDims.width-$eleDims.width)/2+o,top:$eleDims.windowDims.offset.top+s};case"reveal full":return{left:$eleDims.windowDims.offset.left,top:$eleDims.windowDims.offset.top};default:return{left:i.i(l.a)()?$anchorDims.offset.left-$eleDims.width+$anchorDims.width-o:$anchorDims.offset.left+o,top:$anchorDims.offset.top+$anchorDims.height+s}}}function r(t,e,i,n,s,a,r){var l,u,c=o(t),h=e?o(e):null;switch(i){case"top":l=h.offset.top-(c.height+s);break;case"bottom":l=h.offset.top+h.height+s;break;case"left":u=h.offset.left-(c.width+a);break;case"right":u=h.offset.left+h.width+a}switch(i){case"top":case"bottom":switch(n){case"left":u=h.offset.left+a;break;case"right":u=h.offset.left-c.width+h.width-a;break;case"center":u=r?a:h.offset.left+h.width/2-c.width/2+a}break;case"right":case"left":switch(n){case"bottom":l=h.offset.top-s+h.height-c.height;break;case"top":l=h.offset.top+s;break;case"center":l=h.offset.top+s+h.height/2-c.height/2}}return{top:l,left:u}}i.d(e,"a",function(){return u});var l=i(1),u={ImNotTouchingYou:n,OverlapArea:s,GetDimensions:o,GetOffsets:a,GetExplicitOffsets:r}},function(t,e,i){"use strict";function n(t,e){function i(){0===--n&&e()}var n=t.length;0===n&&e(),t.each(function(){if(this.complete&&void 0!==this.naturalWidth)i();else{var t=new Image,e="load.zf.images error.zf.images";o()(t).one(e,function t(n){o()(this).off(e,t),i()}),t.src=o()(this).attr("src")}})}i.d(e,"a",function(){return n});var s=i(0),o=i.n(s)},function(t,e,i){"use strict";i.d(e,"a",function(){return o});var n=i(0),s=i.n(n),o={Feather:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"zf";t.attr("role","menubar");var i=t.find("li").attr({role:"menuitem"}),n="is-"+e+"-submenu",o=n+"-item",a="is-"+e+"-submenu-parent",r="accordion"!==e;i.each(function(){var t=s()(this),i=t.children("ul");i.length&&(t.addClass(a),i.addClass("submenu "+n).attr({"data-submenu":""}),r&&(t.attr({"aria-haspopup":!0,"aria-label":t.children("a:first").text()}),"drilldown"===e&&t.attr({"aria-expanded":!1})),i.addClass("submenu "+n).attr({"data-submenu":"",role:"menu"}),"drilldown"===e&&i.attr({"aria-hidden":!0})),t.parent("[data-submenu]").length&&t.addClass("is-submenu-item "+o)})},Burn:function(t,e){var i="is-"+e+"-submenu",n=i+"-item",s="is-"+e+"-submenu-parent";t.find(">li, .menu, .menu > li").removeClass(i+" "+n+" "+s+" is-submenu-item submenu is-active").removeAttr("data-submenu").css("display","")}}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(){this.removeEventListener("touchmove",o),this.removeEventListener("touchend",s),g=!1}function o(t){if(f.a.spotSwipe.preventDefault&&t.preventDefault(),g){var e,i=t.touches[0].pageX,n=(t.touches[0].pageY,l-i);h=(new Date).getTime()-c,Math.abs(n)>=f.a.spotSwipe.moveThreshold&&h<=f.a.spotSwipe.timeThreshold&&(e=n>0?"left":"right"),e&&(t.preventDefault(),s.call(this),f()(this).trigger("swipe",e).trigger("swipe"+e))}}function a(t){1==t.touches.length&&(l=t.touches[0].pageX,u=t.touches[0].pageY,g=!0,c=(new Date).getTime(),this.addEventListener("touchmove",o,!1),this.addEventListener("touchend",s,!1))}function r(){this.addEventListener&&this.addEventListener("touchstart",a,!1)}i.d(e,"a",function(){return m});var l,u,c,h,d=i(0),f=i.n(d),p=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),m={},g=!1,v=function(){function t(e){n(this,t),this.version="1.0.0",this.enabled="ontouchstart"in document.documentElement,this.preventDefault=!1,this.moveThreshold=75,this.timeThreshold=200,this.$=e,this._init()}return p(t,[{key:"_init",value:function(){var t=this.$;t.event.special.swipe={setup:r},t.each(["left","up","down","right"],function(){t.event.special["swipe"+this]={setup:function(){t(this).on("swipe",t.noop)}}})}}]),t}();m.setupSpotSwipe=function(t){t.spotSwipe=new v(t)},m.setupTouchHandler=function(t){t.fn.addTouch=function(){this.each(function(i,n){t(n).bind("touchstart touchmove touchend touchcancel",function(){e(event)})});var e=function(t){var e,i=t.changedTouches,n=i[0],s={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"},o=s[t.type];"MouseEvent"in window&&"function"==typeof window.MouseEvent?e=new window.MouseEvent(o,{bubbles:!0,cancelable:!0,screenX:n.screenX,screenY:n.screenY,clientX:n.clientX,clientY:n.clientY}):(e=document.createEvent("MouseEvent"),e.initMouseEvent(o,!0,!0,window,1,n.screenX,n.screenY,n.clientX,n.clientY,!1,!1,!1,!1,0,null)),n.target.dispatchEvent(e)}}},m.init=function(t){void 0===t.spotSwipe&&(m.setupSpotSwipe(t),m.setupTouchHandler(t))}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(3),u=i(1),c=i(2),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Accordion",this._init(),l.a.register("Accordion",{ENTER:"toggle",SPACE:"toggle",ARROW_DOWN:"next",ARROW_UP:"previous"})}},{key:"_init",value:function(){var t=this;this.$element.attr("role","tablist"),this.$tabs=this.$element.children("[data-accordion-item]"),this.$tabs.each(function(t,e){var n=r()(e),s=n.children("[data-tab-content]"),o=s[0].id||i.i(u.b)(6,"accordion"),a=e.id||o+"-label";n.find("a:first").attr({"aria-controls":o,role:"tab",id:a,"aria-expanded":!1,"aria-selected":!1}),s.attr({role:"tabpanel","aria-labelledby":a,"aria-hidden":!0,id:o})});var e=this.$element.find(".is-active").children("[data-tab-content]");this.firstTimeInit=!0,e.length&&(this.down(e,this.firstTimeInit),this.firstTimeInit=!1),this._checkDeepLink=function(){var e=window.location.hash;if(e.length){var i=t.$element.find('[href$="'+e+'"]'),n=r()(e);if(i.length&&n){if(i.parent("[data-accordion-item]").hasClass("is-active")||(t.down(n,t.firstTimeInit),t.firstTimeInit=!1),t.options.deepLinkSmudge){var s=t;r()(window).load(function(){var t=s.$element.offset();r()("html, body").animate({scrollTop:t.top},s.options.deepLinkSmudgeDelay)})}t.$element.trigger("deeplink.zf.accordion",[i,n])}}},this.options.deepLink&&this._checkDeepLink(),this._events()}},{key:"_events",value:function(){var t=this;this.$tabs.each(function(){var e=r()(this),i=e.children("[data-tab-content]");i.length&&e.children("a").off("click.zf.accordion keydown.zf.accordion").on("click.zf.accordion",function(e){e.preventDefault(),t.toggle(i)}).on("keydown.zf.accordion",function(n){l.a.handleKey(n,"Accordion",{toggle:function(){t.toggle(i)},next:function(){var i=e.next().find("a").focus();t.options.multiExpand||i.trigger("click.zf.accordion")},previous:function(){var i=e.prev().find("a").focus();t.options.multiExpand||i.trigger("click.zf.accordion")},handled:function(){n.preventDefault(),n.stopPropagation()}})})}),this.options.deepLink&&r()(window).on("popstate",this._checkDeepLink)}},{key:"toggle",value:function(t){if(t.closest("[data-accordion]").is("[disabled]"))return void console.info("Cannot toggle an accordion that is disabled.");if(t.parent().hasClass("is-active")?this.up(t):this.down(t),this.options.deepLink){var e=t.prev("a").attr("href");this.options.updateHistory?history.pushState({},"",e):history.replaceState({},"",e)}}},{key:"down",value:function(t,e){var i=this;if(t.closest("[data-accordion]").is("[disabled]")&&!e)return void console.info("Cannot call down on an accordion that is disabled.");if(t.attr("aria-hidden",!1).parent("[data-tab-content]").addBack().parent().addClass("is-active"),!this.options.multiExpand&&!e){var n=this.$element.children(".is-active").children("[data-tab-content]");n.length&&this.up(n.not(t))}t.slideDown(this.options.slideSpeed,function(){i.$element.trigger("down.zf.accordion",[t])}),r()("#"+t.attr("aria-labelledby")).attr({"aria-expanded":!0,"aria-selected":!0})}},{key:"up",value:function(t){if(t.closest("[data-accordion]").is("[disabled]"))return void console.info("Cannot call up on an accordion that is disabled.");var e=t.parent().siblings(),i=this;(this.options.allowAllClosed||e.hasClass("is-active"))&&t.parent().hasClass("is-active")&&(t.slideUp(i.options.slideSpeed,function(){i.$element.trigger("up.zf.accordion",[t])}),t.attr("aria-hidden",!0).parent().removeClass("is-active"),r()("#"+t.attr("aria-labelledby")).attr({"aria-expanded":!1,"aria-selected":!1}))}},{key:"_destroy",value:function(){this.$element.find("[data-tab-content]").stop(!0).slideUp(0).css("display",""),this.$element.find("a").off(".zf.accordion"),this.options.deepLink&&r()(window).off("popstate",this._checkDeepLink)}}]),e}(c.a);d.defaults={slideSpeed:250,multiExpand:!1,allowAllClosed:!1,deepLink:!1,deepLinkSmudge:!1,deepLinkSmudgeDelay:300,updateHistory:!1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return f});var a=i(0),r=i.n(a),l=i(3),u=i(9),c=i(1),h=i(2),d=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),f=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),d(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="AccordionMenu",this._init(),l.a.register("AccordionMenu",{ENTER:"toggle",SPACE:"toggle",ARROW_RIGHT:"open",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"close",ESCAPE:"closeAll"})}},{key:"_init",value:function(){u.a.Feather(this.$element,"accordion");var t=this;this.$element.find("[data-submenu]").not(".is-active").slideUp(0),this.$element.attr({role:"tree","aria-multiselectable":this.options.multiOpen}),this.$menuLinks=this.$element.find(".is-accordion-submenu-parent"),this.$menuLinks.each(function(){var e=this.id||i.i(c.b)(6,"acc-menu-link"),n=r()(this),s=n.children("[data-submenu]"),o=s[0].id||i.i(c.b)(6,"acc-menu"),a=s.hasClass("is-active");t.options.submenuToggle?(n.addClass("has-submenu-toggle"),n.children("a").after('<button id="'+e+'" class="submenu-toggle" aria-controls="'+o+'" aria-expanded="'+a+'" title="'+t.options.submenuToggleText+'"><span class="submenu-toggle-text">'+t.options.submenuToggleText+"</span></button>")):n.attr({"aria-controls":o,"aria-expanded":a,id:e}),s.attr({"aria-labelledby":e,"aria-hidden":!a,role:"group",id:o})}),this.$element.find("li").attr({role:"treeitem"});var e=this.$element.find(".is-active");if(e.length){var t=this;e.each(function(){t.down(r()(this))})}this._events()}},{key:"_events",value:function(){var t=this;this.$element.find("li").each(function(){var e=r()(this).children("[data-submenu]");e.length&&(t.options.submenuToggle?r()(this).children(".submenu-toggle").off("click.zf.accordionMenu").on("click.zf.accordionMenu",function(i){t.toggle(e)}):r()(this).children("a").off("click.zf.accordionMenu").on("click.zf.accordionMenu",function(i){i.preventDefault(),t.toggle(e)}))}).on("keydown.zf.accordionmenu",function(e){var i,n,s=r()(this),o=s.parent("ul").children("li"),a=s.children("[data-submenu]");o.each(function(t){if(r()(this).is(s))return i=o.eq(Math.max(0,t-1)).find("a").first(),n=o.eq(Math.min(t+1,o.length-1)).find("a").first(),r()(this).children("[data-submenu]:visible").length&&(n=s.find("li:first-child").find("a").first()),r()(this).is(":first-child")?i=s.parents("li").first().find("a").first():i.parents("li").first().children("[data-submenu]:visible").length&&(i=i.parents("li").find("li:last-child").find("a").first()),void(r()(this).is(":last-child")&&(n=s.parents("li").first().next("li").find("a").first()))}),l.a.handleKey(e,"AccordionMenu",{open:function(){a.is(":hidden")&&(t.down(a),a.find("li").first().find("a").first().focus())},close:function(){a.length&&!a.is(":hidden")?t.up(a):s.parent("[data-submenu]").length&&(t.up(s.parent("[data-submenu]")),s.parents("li").first().find("a").first().focus())},up:function(){return i.focus(),!0},down:function(){return n.focus(),!0},toggle:function(){return!t.options.submenuToggle&&(s.children("[data-submenu]").length?(t.toggle(s.children("[data-submenu]")),!0):void 0)},closeAll:function(){t.hideAll()},handled:function(t){t&&e.preventDefault(),e.stopImmediatePropagation()}})})}},{key:"hideAll",value:function(){this.up(this.$element.find("[data-submenu]"))}},{key:"showAll",value:function(){this.down(this.$element.find("[data-submenu]"))}},{key:"toggle",value:function(t){t.is(":animated")||(t.is(":hidden")?this.down(t):this.up(t))}},{key:"down",value:function(t){var e=this;this.options.multiOpen||this.up(this.$element.find(".is-active").not(t.parentsUntil(this.$element).add(t))),t.addClass("is-active").attr({"aria-hidden":!1}),this.options.submenuToggle?t.prev(".submenu-toggle").attr({"aria-expanded":!0}):t.parent(".is-accordion-submenu-parent").attr({"aria-expanded":!0}),t.slideDown(e.options.slideSpeed,function(){e.$element.trigger("down.zf.accordionMenu",[t])})}},{key:"up",value:function(t){var e=this;t.slideUp(e.options.slideSpeed,function(){e.$element.trigger("up.zf.accordionMenu",[t])});var i=t.find("[data-submenu]").slideUp(0).addBack().attr("aria-hidden",!0);this.options.submenuToggle?i.prev(".submenu-toggle").attr("aria-expanded",!1):i.parent(".is-accordion-submenu-parent").attr("aria-expanded",!1)}},{key:"_destroy",value:function(){this.$element.find("[data-submenu]").slideDown(0).css("display",""),this.$element.find("a").off("click.zf.accordionMenu"),this.options.submenuToggle&&(this.$element.find(".has-submenu-toggle").removeClass("has-submenu-toggle"),this.$element.find(".submenu-toggle").remove()),u.a.Burn(this.$element,"accordion")}}]),e}(h.a);f.defaults={slideSpeed:250,submenuToggle:!1,submenuToggleText:"Toggle menu",multiOpen:!0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return p});var a=i(0),r=i.n(a),l=i(3),u=i(9),c=i(1),h=i(7),d=i(2),f=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),f(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Drilldown",this._init(),l.a.register("Drilldown",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"previous",ESCAPE:"close",TAB:"down",SHIFT_TAB:"up"})}},{key:"_init",value:function(){u.a.Feather(this.$element,"drilldown"),this.options.autoApplyClass&&this.$element.addClass("drilldown"),this.$element.attr({role:"tree","aria-multiselectable":!1}),this.$submenuAnchors=this.$element.find("li.is-drilldown-submenu-parent").children("a"),this.$submenus=this.$submenuAnchors.parent("li").children("[data-submenu]").attr("role","group"),this.$menuItems=this.$element.find("li").not(".js-drilldown-back").attr("role","treeitem").find("a"),this.$element.attr("data-mutate",this.$element.attr("data-drilldown")||i.i(c.b)(6,"drilldown")),this._prepareMenu(),this._registerEvents(),this._keyboardEvents()}},{key:"_prepareMenu",value:function(){var t=this;this.$submenuAnchors.each(function(){var e=r()(this),i=e.parent();t.options.parentLink&&e.clone().prependTo(i.children("[data-submenu]")).wrap('<li class="is-submenu-parent-item is-submenu-item is-drilldown-submenu-item" role="menuitem"></li>'),e.data("savedHref",e.attr("href")).removeAttr("href").attr("tabindex",0),e.children("[data-submenu]").attr({"aria-hidden":!0,tabindex:0,role:"group"}),t._events(e)}),this.$submenus.each(function(){var e=r()(this);if(!e.find(".js-drilldown-back").length)switch(t.options.backButtonPosition){case"bottom":e.append(t.options.backButton);break;case"top":e.prepend(t.options.backButton);break;default: |
| + | console.error("Unsupported backButtonPosition value '"+t.options.backButtonPosition+"'")}t._back(e)}),this.$submenus.addClass("invisible"),this.options.autoHeight||this.$submenus.addClass("drilldown-submenu-cover-previous"),this.$element.parent().hasClass("is-drilldown")||(this.$wrapper=r()(this.options.wrapper).addClass("is-drilldown"),this.options.animateHeight&&this.$wrapper.addClass("animate-height"),this.$element.wrap(this.$wrapper)),this.$wrapper=this.$element.parent(),this.$wrapper.css(this._getMaxDims())}},{key:"_resize",value:function(){this.$wrapper.css({"max-width":"none","min-height":"none"}),this.$wrapper.css(this._getMaxDims())}},{key:"_events",value:function(t){var e=this;t.off("click.zf.drilldown").on("click.zf.drilldown",function(i){if(r()(i.target).parentsUntil("ul","li").hasClass("is-drilldown-submenu-parent")&&(i.stopImmediatePropagation(),i.preventDefault()),e._show(t.parent("li")),e.options.closeOnClick){var n=r()("body");n.off(".zf.drilldown").on("click.zf.drilldown",function(t){t.target===e.$element[0]||r.a.contains(e.$element[0],t.target)||(t.preventDefault(),e._hideAll(),n.off(".zf.drilldown"))})}})}},{key:"_registerEvents",value:function(){this.options.scrollTop&&(this._bindHandler=this._scrollTop.bind(this),this.$element.on("open.zf.drilldown hide.zf.drilldown closed.zf.drilldown",this._bindHandler)),this.$element.on("mutateme.zf.trigger",this._resize.bind(this))}},{key:"_scrollTop",value:function(){var t=this,e=""!=t.options.scrollTopElement?r()(t.options.scrollTopElement):t.$element,i=parseInt(e.offset().top+t.options.scrollTopOffset,10);r()("html, body").stop(!0).animate({scrollTop:i},t.options.animationDuration,t.options.animationEasing,function(){this===r()("html")[0]&&t.$element.trigger("scrollme.zf.drilldown")})}},{key:"_keyboardEvents",value:function(){var t=this;this.$menuItems.add(this.$element.find(".js-drilldown-back > a, .is-submenu-parent-item > a")).on("keydown.zf.drilldown",function(e){var n,s,o=r()(this),a=o.parent("li").parent("ul").children("li").children("a");a.each(function(t){if(r()(this).is(o))return n=a.eq(Math.max(0,t-1)),void(s=a.eq(Math.min(t+1,a.length-1)))}),l.a.handleKey(e,"Drilldown",{next:function(){if(o.is(t.$submenuAnchors))return t._show(o.parent("li")),o.parent("li").one(i.i(c.c)(o),function(){o.parent("li").find("ul li a").filter(t.$menuItems).first().focus()}),!0},previous:function(){return t._hide(o.parent("li").parent("ul")),o.parent("li").parent("ul").one(i.i(c.c)(o),function(){setTimeout(function(){o.parent("li").parent("ul").parent("li").children("a").first().focus()},1)}),!0},up:function(){return n.focus(),!o.is(t.$element.find("> li:first-child > a"))},down:function(){return s.focus(),!o.is(t.$element.find("> li:last-child > a"))},close:function(){o.is(t.$element.find("> li > a"))||(t._hide(o.parent().parent()),o.parent().parent().siblings("a").focus())},open:function(){return o.is(t.$menuItems)?o.is(t.$submenuAnchors)?(t._show(o.parent("li")),o.parent("li").one(i.i(c.c)(o),function(){o.parent("li").find("ul li a").filter(t.$menuItems).first().focus()}),!0):void 0:(t._hide(o.parent("li").parent("ul")),o.parent("li").parent("ul").one(i.i(c.c)(o),function(){setTimeout(function(){o.parent("li").parent("ul").parent("li").children("a").first().focus()},1)}),!0)},handled:function(t){t&&e.preventDefault(),e.stopImmediatePropagation()}})})}},{key:"_hideAll",value:function(){var t=this.$element.find(".is-drilldown-submenu.is-active").addClass("is-closing");this.options.autoHeight&&this.$wrapper.css({height:t.parent().closest("ul").data("calcHeight")}),t.one(i.i(c.c)(t),function(e){t.removeClass("is-active is-closing")}),this.$element.trigger("closed.zf.drilldown")}},{key:"_back",value:function(t){var e=this;t.off("click.zf.drilldown"),t.children(".js-drilldown-back").on("click.zf.drilldown",function(i){i.stopImmediatePropagation(),e._hide(t);var n=t.parent("li").parent("ul").parent("li");n.length&&e._show(n)})}},{key:"_menuLinkEvents",value:function(){var t=this;this.$menuItems.not(".is-drilldown-submenu-parent").off("click.zf.drilldown").on("click.zf.drilldown",function(e){setTimeout(function(){t._hideAll()},0)})}},{key:"_show",value:function(t){this.options.autoHeight&&this.$wrapper.css({height:t.children("[data-submenu]").data("calcHeight")}),t.attr("aria-expanded",!0),t.children("[data-submenu]").addClass("is-active").removeClass("invisible").attr("aria-hidden",!1),this.$element.trigger("open.zf.drilldown",[t])}},{key:"_hide",value:function(t){this.options.autoHeight&&this.$wrapper.css({height:t.parent().closest("ul").data("calcHeight")});t.parent("li").attr("aria-expanded",!1),t.attr("aria-hidden",!0).addClass("is-closing"),t.addClass("is-closing").one(i.i(c.c)(t),function(){t.removeClass("is-active is-closing"),t.blur().addClass("invisible")}),t.trigger("hide.zf.drilldown",[t])}},{key:"_getMaxDims",value:function(){var t=0,e={},i=this;return this.$submenus.add(this.$element).each(function(){var n=(r()(this).children("li").length,h.a.GetDimensions(this).height);t=n>t?n:t,i.options.autoHeight&&(r()(this).data("calcHeight",n),r()(this).hasClass("is-drilldown-submenu")||(e.height=n))}),this.options.autoHeight||(e["min-height"]=t+"px"),e["max-width"]=this.$element[0].getBoundingClientRect().width+"px",e}},{key:"_destroy",value:function(){this.options.scrollTop&&this.$element.off(".zf.drilldown",this._bindHandler),this._hideAll(),this.$element.off("mutateme.zf.trigger"),u.a.Burn(this.$element,"drilldown"),this.$element.unwrap().find(".js-drilldown-back, .is-submenu-parent-item").remove().end().find(".is-active, .is-closing, .is-drilldown-submenu").removeClass("is-active is-closing is-drilldown-submenu").end().find("[data-submenu]").removeAttr("aria-hidden tabindex role"),this.$submenuAnchors.each(function(){r()(this).off(".zf.drilldown")}),this.$submenus.removeClass("drilldown-submenu-cover-previous invisible"),this.$element.find("a").each(function(){var t=r()(this);t.removeAttr("tabindex"),t.data("savedHref")&&t.attr("href",t.data("savedHref")).removeData("savedHref")})}}]),e}(d.a);p.defaults={autoApplyClass:!0,backButton:'<li class="js-drilldown-back"><a tabindex="0">Back</a></li>',backButtonPosition:"top",wrapper:"<div></div>",parentLink:!1,closeOnClick:!1,autoHeight:!1,animateHeight:!1,scrollTop:!1,scrollTopElement:"",scrollTopOffset:0,animationDuration:500,animationEasing:"swing"}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return p});var a=i(0),r=i.n(a),l=i(3),u=i(9),c=i(7),h=i(1),d=i(2),f=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),f(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="DropdownMenu",this._init(),l.a.register("DropdownMenu",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"previous",ESCAPE:"close"})}},{key:"_init",value:function(){u.a.Feather(this.$element,"dropdown");var t=this.$element.find("li.is-dropdown-submenu-parent");this.$element.children(".is-dropdown-submenu-parent").children(".is-dropdown-submenu").addClass("first-sub"),this.$menuItems=this.$element.find('[role="menuitem"]'),this.$tabs=this.$element.children('[role="menuitem"]'),this.$tabs.find("ul.is-dropdown-submenu").addClass(this.options.verticalClass),"auto"===this.options.alignment?this.$element.hasClass(this.options.rightClass)||i.i(h.a)()||this.$element.parents(".top-bar-right").is("*")?(this.options.alignment="right",t.addClass("opens-left")):(this.options.alignment="left",t.addClass("opens-right")):"right"===this.options.alignment?t.addClass("opens-left"):t.addClass("opens-right"),this.changed=!1,this._events()}},{key:"_isVertical",value:function(){return"block"===this.$tabs.css("display")||"column"===this.$element.css("flex-direction")}},{key:"_isRtl",value:function(){return this.$element.hasClass("align-right")||i.i(h.a)()&&!this.$element.hasClass("align-left")}},{key:"_events",value:function(){var t=this,e="ontouchstart"in window||void 0!==window.ontouchstart,i="is-dropdown-submenu-parent",n=function(n){var s=r()(n.target).parentsUntil("ul","."+i),o=s.hasClass(i),a="true"===s.attr("data-is-click"),l=s.children(".is-dropdown-submenu");if(o)if(a){if(!t.options.closeOnClick||!t.options.clickOpen&&!e||t.options.forceFollow&&e)return;n.stopImmediatePropagation(),n.preventDefault(),t._hide(s)}else n.preventDefault(),n.stopImmediatePropagation(),t._show(l),s.add(s.parentsUntil(t.$element,"."+i)).attr("data-is-click",!0)};(this.options.clickOpen||e)&&this.$menuItems.on("click.zf.dropdownmenu touchstart.zf.dropdownmenu",n),t.options.closeOnClickInside&&this.$menuItems.on("click.zf.dropdownmenu",function(e){r()(this).hasClass(i)||t._hide()}),this.options.disableHover||this.$menuItems.on("mouseenter.zf.dropdownmenu",function(e){var n=r()(this);n.hasClass(i)&&(clearTimeout(n.data("_delay")),n.data("_delay",setTimeout(function(){t._show(n.children(".is-dropdown-submenu"))},t.options.hoverDelay)))}).on("mouseleave.zf.dropdownmenu",function(e){var n=r()(this);if(n.hasClass(i)&&t.options.autoclose){if("true"===n.attr("data-is-click")&&t.options.clickOpen)return!1;clearTimeout(n.data("_delay")),n.data("_delay",setTimeout(function(){t._hide(n)},t.options.closingTime))}}),this.$menuItems.on("keydown.zf.dropdownmenu",function(e){var i,n,s=r()(e.target).parentsUntil("ul",'[role="menuitem"]'),o=t.$tabs.index(s)>-1,a=o?t.$tabs:s.siblings("li").add(s);a.each(function(t){if(r()(this).is(s))return i=a.eq(t-1),void(n=a.eq(t+1))});var u=function(){n.children("a:first").focus(),e.preventDefault()},c=function(){i.children("a:first").focus(),e.preventDefault()},h=function(){var i=s.children("ul.is-dropdown-submenu");i.length&&(t._show(i),s.find("li > a:first").focus(),e.preventDefault())},d=function(){var i=s.parent("ul").parent("li");i.children("a:first").focus(),t._hide(i),e.preventDefault()},f={open:h,close:function(){t._hide(t.$element),t.$menuItems.eq(0).children("a").focus(),e.preventDefault()},handled:function(){e.stopImmediatePropagation()}};o?t._isVertical()?t._isRtl()?r.a.extend(f,{down:u,up:c,next:d,previous:h}):r.a.extend(f,{down:u,up:c,next:h,previous:d}):t._isRtl()?r.a.extend(f,{next:c,previous:u,down:h,up:d}):r.a.extend(f,{next:u,previous:c,down:h,up:d}):t._isRtl()?r.a.extend(f,{next:d,previous:h,down:u,up:c}):r.a.extend(f,{next:h,previous:d,down:u,up:c}),l.a.handleKey(e,"DropdownMenu",f)})}},{key:"_addBodyHandler",value:function(){var t=r()(document.body),e=this;t.off("mouseup.zf.dropdownmenu touchend.zf.dropdownmenu").on("mouseup.zf.dropdownmenu touchend.zf.dropdownmenu",function(i){e.$element.find(i.target).length||(e._hide(),t.off("mouseup.zf.dropdownmenu touchend.zf.dropdownmenu"))})}},{key:"_show",value:function(t){var e=this.$tabs.index(this.$tabs.filter(function(e,i){return r()(i).find(t).length>0})),i=t.parent("li.is-dropdown-submenu-parent").siblings("li.is-dropdown-submenu-parent");this._hide(i,e),t.css("visibility","hidden").addClass("js-dropdown-active").parent("li.is-dropdown-submenu-parent").addClass("is-active");var n=c.a.ImNotTouchingYou(t,null,!0);if(!n){var s="left"===this.options.alignment?"-right":"-left",o=t.parent(".is-dropdown-submenu-parent");o.removeClass("opens"+s).addClass("opens-"+this.options.alignment),n=c.a.ImNotTouchingYou(t,null,!0),n||o.removeClass("opens-"+this.options.alignment).addClass("opens-inner"),this.changed=!0}t.css("visibility",""),this.options.closeOnClick&&this._addBodyHandler(),this.$element.trigger("show.zf.dropdownmenu",[t])}},{key:"_hide",value:function(t,e){var i;if(i=t&&t.length?t:void 0!==e?this.$tabs.not(function(t,i){return t===e}):this.$element,i.hasClass("is-active")||i.find(".is-active").length>0){if(i.find("li.is-active").add(i).attr({"data-is-click":!1}).removeClass("is-active"),i.find("ul.js-dropdown-active").removeClass("js-dropdown-active"),this.changed||i.find("opens-inner").length){var n="left"===this.options.alignment?"right":"left";i.find("li.is-dropdown-submenu-parent").add(i).removeClass("opens-inner opens-"+this.options.alignment).addClass("opens-"+n),this.changed=!1}this.$element.trigger("hide.zf.dropdownmenu",[i])}}},{key:"_destroy",value:function(){this.$menuItems.off(".zf.dropdownmenu").removeAttr("data-is-click").removeClass("is-right-arrow is-left-arrow is-down-arrow opens-right opens-left opens-inner"),r()(document.body).off(".zf.dropdownmenu"),u.a.Burn(this.$element,"dropdown")}}]),e}(d.a);p.defaults={disableHover:!1,autoclose:!0,hoverDelay:50,clickOpen:!1,closingTime:500,alignment:"auto",closeOnClick:!0,closeOnClickInside:!0,verticalClass:"vertical",rightClass:"align-right",forceFollow:!0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t,e){var i=e.indexOf(t);return i===e.length-1?e[0]:e[i+1]}i.d(e,"a",function(){return m});var r=i(7),l=i(2),u=i(1),c=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),h=["left","right","top","bottom"],d=["top","bottom","center"],f=["left","right","center"],p={left:d,right:d,top:f,bottom:f},m=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),c(e,[{key:"_init",value:function(){this.triedPositions={},this.position="auto"===this.options.position?this._getDefaultPosition():this.options.position,this.alignment="auto"===this.options.alignment?this._getDefaultAlignment():this.options.alignment}},{key:"_getDefaultPosition",value:function(){return"bottom"}},{key:"_getDefaultAlignment",value:function(){switch(this.position){case"bottom":case"top":return i.i(u.a)()?"right":"left";case"left":case"right":return"bottom"}}},{key:"_reposition",value:function(){this._alignmentsExhausted(this.position)?(this.position=a(this.position,h),this.alignment=p[this.position][0]):this._realign()}},{key:"_realign",value:function(){this._addTriedPosition(this.position,this.alignment),this.alignment=a(this.alignment,p[this.position])}},{key:"_addTriedPosition",value:function(t,e){this.triedPositions[t]=this.triedPositions[t]||[],this.triedPositions[t].push(e)}},{key:"_positionsExhausted",value:function(){for(var t=!0,e=0;e<h.length;e++)t=t&&this._alignmentsExhausted(h[e]);return t}},{key:"_alignmentsExhausted",value:function(t){return this.triedPositions[t]&&this.triedPositions[t].length==p[t].length}},{key:"_getVOffset",value:function(){return this.options.vOffset}},{key:"_getHOffset",value:function(){return this.options.hOffset}},{key:"_setPosition",value:function(t,e,i){if("false"===t.attr("aria-expanded"))return!1;r.a.GetDimensions(e),r.a.GetDimensions(t);if(e.offset(r.a.GetExplicitOffsets(e,t,this.position,this.alignment,this._getVOffset(),this._getHOffset())),!this.options.allowOverlap){for(var n=1e8,s={position:this.position,alignment:this.alignment};!this._positionsExhausted();){var o=r.a.OverlapArea(e,i,!1,!1,this.options.allowBottomOverlap);if(0===o)return;o<n&&(n=o,s={position:this.position,alignment:this.alignment}),this._reposition(),e.offset(r.a.GetExplicitOffsets(e,t,this.position,this.alignment,this._getVOffset(),this._getHOffset()))}this.position=s.position,this.alignment=s.alignment,e.offset(r.a.GetExplicitOffsets(e,t,this.position,this.alignment,this._getVOffset(),this._getHOffset()))}}}]),e}(l.a);m.defaults={position:"auto",alignment:"auto",allowOverlap:!1,allowBottomOverlap:!0,vOffset:0,hOffset:0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return h});var a=i(0),r=i.n(a),l=i(1),u=i(2),c=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),h=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),c(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="SmoothScroll",this._init()}},{key:"_init",value:function(){var t=this.$element[0].id||i.i(l.b)(6,"smooth-scroll");this.$element.attr({id:t}),this._events()}},{key:"_events",value:function(){var t=this,i=function(i){if(!r()(this).is('a[href^="#"]'))return!1;var n=this.getAttribute("href");t._inTransition=!0,e.scrollToLoc(n,t.options,function(){t._inTransition=!1}),i.preventDefault()};this.$element.on("click.zf.smoothScroll",i),this.$element.on("click.zf.smoothScroll",'a[href^="#"]',i)}}],[{key:"scrollToLoc",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e.defaults,n=arguments[2];if(!r()(t).length)return!1;var s=Math.round(r()(t).offset().top-i.threshold/2-i.offset);r()("html, body").stop(!0).animate({scrollTop:s},i.animationDuration,i.animationEasing,function(){n&&"function"==typeof n&&n()})}}]),e}(u.a);h.defaults={animationDuration:500,animationEasing:"linear",threshold:50,offset:0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(3),u=i(8),c=i(2),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Tabs",this._init(),l.a.register("Tabs",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"previous",ARROW_DOWN:"next",ARROW_LEFT:"previous"})}},{key:"_init",value:function(){var t=this,e=this;if(this.$element.attr({role:"tablist"}),this.$tabTitles=this.$element.find("."+this.options.linkClass),this.$tabContent=r()('[data-tabs-content="'+this.$element[0].id+'"]'),this.$tabTitles.each(function(){var t=r()(this),i=t.find("a"),n=t.hasClass(""+e.options.linkActiveClass),s=i.attr("data-tabs-target")||i[0].hash.slice(1),o=i[0].id?i[0].id:s+"-label",a=r()("#"+s);t.attr({role:"presentation"}),i.attr({role:"tab","aria-controls":s,"aria-selected":n,id:o,tabindex:n?"0":"-1"}),a.attr({role:"tabpanel","aria-labelledby":o}),n||a.attr("aria-hidden","true"),n&&e.options.autoFocus&&r()(window).load(function(){r()("html, body").animate({scrollTop:t.offset().top},e.options.deepLinkSmudgeDelay,function(){i.focus()})})}),this.options.matchHeight){var n=this.$tabContent.find("img");n.length?i.i(u.a)(n,this._setHeight.bind(this)):this._setHeight()}this._checkDeepLink=function(){var e=window.location.hash;if(e.length){var i=t.$element.find('[href$="'+e+'"]');if(i.length){if(t.selectTab(r()(e),!0),t.options.deepLinkSmudge){var n=t.$element.offset();r()("html, body").animate({scrollTop:n.top},t.options.deepLinkSmudgeDelay)}t.$element.trigger("deeplink.zf.tabs",[i,r()(e)])}}},this.options.deepLink&&this._checkDeepLink(),this._events()}},{key:"_events",value:function(){this._addKeyHandler(),this._addClickHandler(),this._setHeightMqHandler=null,this.options.matchHeight&&(this._setHeightMqHandler=this._setHeight.bind(this),r()(window).on("changed.zf.mediaquery",this._setHeightMqHandler)),this.options.deepLink&&r()(window).on("popstate",this._checkDeepLink)}},{key:"_addClickHandler",value:function(){var t=this;this.$element.off("click.zf.tabs").on("click.zf.tabs","."+this.options.linkClass,function(e){e.preventDefault(),e.stopPropagation(),t._handleTabChange(r()(this))})}},{key:"_addKeyHandler",value:function(){var t=this;this.$tabTitles.off("keydown.zf.tabs").on("keydown.zf.tabs",function(e){if(9!==e.which){var i,n,s=r()(this),o=s.parent("ul").children("li");o.each(function(e){if(r()(this).is(s))return void(t.options.wrapOnKeys?(i=0===e?o.last():o.eq(e-1),n=e===o.length-1?o.first():o.eq(e+1)):(i=o.eq(Math.max(0,e-1)),n=o.eq(Math.min(e+1,o.length-1))))}),l.a.handleKey(e,"Tabs",{open:function(){s.find('[role="tab"]').focus(),t._handleTabChange(s)},previous:function(){i.find('[role="tab"]').focus(),t._handleTabChange(i)},next:function(){n.find('[role="tab"]').focus(),t._handleTabChange(n)},handled:function(){e.stopPropagation(),e.preventDefault()}})}})}},{key:"_handleTabChange",value:function(t,e){if(t.hasClass(""+this.options.linkActiveClass))return void(this.options.activeCollapse&&(this._collapseTab(t),this.$element.trigger("collapse.zf.tabs",[t])));var i=this.$element.find("."+this.options.linkClass+"."+this.options.linkActiveClass),n=t.find('[role="tab"]'),s=n.attr("data-tabs-target")||n[0].hash.slice(1),o=this.$tabContent.find("#"+s);if(this._collapseTab(i),this._openTab(t),this.options.deepLink&&!e){var a=t.find("a").attr("href");this.options.updateHistory?history.pushState({},"",a):history.replaceState({},"",a)}this.$element.trigger("change.zf.tabs",[t,o]),o.find("[data-mutate]").trigger("mutateme.zf.trigger")}},{key:"_openTab",value:function(t){var e=t.find('[role="tab"]'),i=e.attr("data-tabs-target")||e[0].hash.slice(1),n=this.$tabContent.find("#"+i);t.addClass(""+this.options.linkActiveClass),e.attr({"aria-selected":"true",tabindex:"0"}),n.addClass(""+this.options.panelActiveClass).removeAttr("aria-hidden")}},{key:"_collapseTab",value:function(t){var e=t.removeClass(""+this.options.linkActiveClass).find('[role="tab"]').attr({"aria-selected":"false",tabindex:-1});r()("#"+e.attr("aria-controls")).removeClass(""+this.options.panelActiveClass).attr({"aria-hidden":"true"})}},{key:"selectTab",value:function(t,e){var i;i="object"==typeof t?t[0].id:t,i.indexOf("#")<0&&(i="#"+i);var n=this.$tabTitles.find('[href$="'+i+'"]').parent("."+this.options.linkClass);this._handleTabChange(n,e)}},{key:"_setHeight",value:function(){var t=0,e=this;this.$tabContent.find("."+this.options.panelClass).css("height","").each(function(){var i=r()(this),n=i.hasClass(""+e.options.panelActiveClass);n||i.css({visibility:"hidden",display:"block"});var s=this.getBoundingClientRect().height;n||i.css({visibility:"",display:""}),t=s>t?s:t}).css("height",t+"px")}},{key:"_destroy",value:function(){this.$element.find("."+this.options.linkClass).off(".zf.tabs").hide().end().find("."+this.options.panelClass).hide(),this.options.matchHeight&&null!=this._setHeightMqHandler&&r()(window).off("changed.zf.mediaquery",this._setHeightMqHandler),this.options.deepLink&&r()(window).off("popstate",this._checkDeepLink)}}]),e}(c.a);d.defaults={deepLink:!1,deepLinkSmudge:!1,deepLinkSmudgeDelay:300,updateHistory:!1,autoFocus:!1,wrapOnKeys:!0,matchHeight:!1,activeCollapse:!1,linkClass:"tabs-title",linkActiveClass:"is-active",panelClass:"tabs-panel",panelActiveClass:"is-active"}},function(t,e,i){"use strict";function n(t,e,i){var n,s,o=this,a=e.duration,r=Object.keys(t.data())[0]||"timer",l=-1;this.isPaused=!1,this.restart=function(){l=-1,clearTimeout(s),this.start()},this.start=function(){this.isPaused=!1,clearTimeout(s),l=l<=0?a:l,t.data("paused",!1),n=Date.now(),s=setTimeout(function(){e.infinite&&o.restart(),i&&"function"==typeof i&&i()},l),t.trigger("timerstart.zf."+r)},this.pause=function(){this.isPaused=!0,clearTimeout(s),t.data("paused",!0);var e=Date.now();l-=e-n,t.trigger("timerpaused.zf."+r)}}i.d(e,"a",function(){return n});var s=i(0);i.n(s)},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(0),s=i.n(n),o=i(21),a=i(1),r=i(7),l=i(8),u=i(3),c=i(4),h=i(6),d=i(9),f=i(18),p=i(10),m=i(5),g=i(20),v=i(11),b=i(12),y=i(13),w=i(22),_=i(14),$=i(23),k=i(24),C=i(25),z=i(26),O=i(27),T=i(29),E=i(30),P=i(31),A=i(32),F=i(16),x=i(33),D=i(17),S=i(34),R=i(35),H=i(28);o.a.addToJquery(s.a),o.a.rtl=a.a,o.a.GetYoDigits=a.b,o.a.transitionend=a.c,o.a.Box=r.a,o.a.onImagesLoaded=l.a,o.a.Keyboard=u.a,o.a.MediaQuery=c.a,o.a.Motion=h.a,o.a.Move=h.b,o.a.Nest=d.a,o.a.Timer=f.a,p.a.init(s.a),m.a.init(s.a,o.a),o.a.plugin(g.a,"Abide"),o.a.plugin(v.a,"Accordion"),o.a.plugin(b.a,"AccordionMenu"),o.a.plugin(y.a,"Drilldown"),o.a.plugin(w.a,"Dropdown"),o.a.plugin(_.a,"DropdownMenu"),o.a.plugin($.a,"Equalizer"),o.a.plugin(k.a,"Interchange"),o.a.plugin(C.a,"Magellan"),o.a.plugin(z.a,"OffCanvas"),o.a.plugin(O.a,"Orbit"),o.a.plugin(T.a,"ResponsiveMenu"),o.a.plugin(E.a,"ResponsiveToggle"),o.a.plugin(P.a,"Reveal"),o.a.plugin(A.a,"Slider"),o.a.plugin(F.a,"SmoothScroll"),o.a.plugin(x.a,"Sticky"),o.a.plugin(D.a,"Tabs"),o.a.plugin(S.a,"Toggler"),o.a.plugin(R.a,"Tooltip"),o.a.plugin(H.a,"ResponsiveAccordionTabs")},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return c});var a=i(0),r=i.n(a),l=i(2),u=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),c=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),u(e,[{key:"_setup",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.$element=t,this.options=r.a.extend(!0,{},e.defaults,this.$element.data(),i),this.className="Abide",this._init()}},{key:"_init",value:function(){this.$inputs=this.$element.find("input, textarea, select"),this._events()}},{key:"_events",value:function(){var t=this;this.$element.off(".abide").on("reset.zf.abide",function(){t.resetForm()}).on("submit.zf.abide",function(){return t.validateForm()}),"fieldChange"===this.options.validateOn&&this.$inputs.off("change.zf.abide").on("change.zf.abide",function(e){t.validateInput(r()(e.target))}),this.options.liveValidate&&this.$inputs.off("input.zf.abide").on("input.zf.abide",function(e){t.validateInput(r()(e.target))}),this.options.validateOnBlur&&this.$inputs.off("blur.zf.abide").on("blur.zf.abide",function(e){t.validateInput(r()(e.target))})}},{key:"_reflow",value:function(){this._init()}},{key:"requiredCheck",value:function(t){if(!t.attr("required"))return!0;var e=!0;switch(t[0].type){case"checkbox":e=t[0].checked;break;case"select":case"select-one":case"select-multiple":var i=t.find("option:selected");i.length&&i.val()||(e=!1);break;default:t.val()&&t.val().length||(e=!1)}return e}},{key:"findFormError",value:function(t){var e=t[0].id,i=t.siblings(this.options.formErrorSelector);return i.length||(i=t.parent().find(this.options.formErrorSelector)),i=i.add(this.$element.find('[data-form-error-for="'+e+'"]'))}},{key:"findLabel",value:function(t){var e=t[0].id,i=this.$element.find('label[for="'+e+'"]');return i.length?i:t.closest("label")}},{key:"findRadioLabels",value:function(t){var e=this,i=t.map(function(t,i){var n=i.id,s=e.$element.find('label[for="'+n+'"]');return s.length||(s=r()(i).closest("label")),s[0]});return r()(i)}},{key:"addErrorClasses",value:function(t){var e=this.findLabel(t),i=this.findFormError(t);e.length&&e.addClass(this.options.labelErrorClass),i.length&&i.addClass(this.options.formErrorClass),t.addClass(this.options.inputErrorClass).attr("data-invalid","")}},{key:"removeRadioErrorClasses",value:function(t){var e=this.$element.find(':radio[name="'+t+'"]'),i=this.findRadioLabels(e),n=this.findFormError(e);i.length&&i.removeClass(this.options.labelErrorClass),n.length&&n.removeClass(this.options.formErrorClass),e.removeClass(this.options.inputErrorClass).removeAttr("data-invalid")}},{key:"removeErrorClasses",value:function(t){if("radio"==t[0].type)return this.removeRadioErrorClasses(t.attr("name"));var e=this.findLabel(t),i=this.findFormError(t);e.length&&e.removeClass(this.options.labelErrorClass),i.length&&i.removeClass(this.options.formErrorClass),t.removeClass(this.options.inputErrorClass).removeAttr("data-invalid")}},{key:"validateInput",value:function(t){var e=this.requiredCheck(t),i=!1,n=!0,s=t.attr("data-validator"),o=!0;if(t.is("[data-abide-ignore]")||t.is('[type="hidden"]')||t.is("[disabled]"))return!0;switch(t[0].type){case"radio":i=this.validateRadio(t.attr("name"));break;case"checkbox":i=e;break;case"select":case"select-one":case"select-multiple":i=e;break;default:i=this.validateText(t)}s&&(n=this.matchValidation(t,s,t.attr("required"))),t.attr("data-equalto")&&(o=this.options.validators.equalTo(t));var a=-1===[e,i,n,o].indexOf(!1),l=(a?"valid":"invalid")+".zf.abide";if(a){var u=this.$element.find('[data-equalto="'+t.attr("id")+'"]');if(u.length){var c=this;u.each(function(){r()(this).val()&&c.validateInput(r()(this))})}}return this[a?"removeErrorClasses":"addErrorClasses"](t),t.trigger(l,[t]),a}},{key:"validateForm",value:function(){var t=[],e=this;this.$inputs.each(function(){t.push(e.validateInput(r()(this)))});var i=-1===t.indexOf(!1);return this.$element.find("[data-abide-error]").css("display",i?"none":"block"),this.$element.trigger((i?"formvalid":"forminvalid")+".zf.abide",[this.$element]),i}},{key:"validateText",value:function(t,e){e=e||t.attr("pattern")||t.attr("type") |
| + | ;var i=t.val(),n=!1;return i.length?n=this.options.patterns.hasOwnProperty(e)?this.options.patterns[e].test(i):e===t.attr("type")||new RegExp(e).test(i):t.prop("required")||(n=!0),n}},{key:"validateRadio",value:function(t){var e=this.$element.find(':radio[name="'+t+'"]'),i=!1,n=!1;return e.each(function(t,e){r()(e).attr("required")&&(n=!0)}),n||(i=!0),i||e.each(function(t,e){r()(e).prop("checked")&&(i=!0)}),i}},{key:"matchValidation",value:function(t,e,i){var n=this;return i=!!i,-1===e.split(" ").map(function(e){return n.options.validators[e](t,i,t.parent())}).indexOf(!1)}},{key:"resetForm",value:function(){var t=this.$element,e=this.options;r()("."+e.labelErrorClass,t).not("small").removeClass(e.labelErrorClass),r()("."+e.inputErrorClass,t).not("small").removeClass(e.inputErrorClass),r()(e.formErrorSelector+"."+e.formErrorClass).removeClass(e.formErrorClass),t.find("[data-abide-error]").css("display","none"),r()(":input",t).not(":button, :submit, :reset, :hidden, :radio, :checkbox, [data-abide-ignore]").val("").removeAttr("data-invalid"),r()(":input:radio",t).not("[data-abide-ignore]").prop("checked",!1).removeAttr("data-invalid"),r()(":input:checkbox",t).not("[data-abide-ignore]").prop("checked",!1).removeAttr("data-invalid"),t.trigger("formreset.zf.abide",[t])}},{key:"_destroy",value:function(){var t=this;this.$element.off(".abide").find("[data-abide-error]").css("display","none"),this.$inputs.off(".abide").each(function(){t.removeErrorClasses(r()(this))})}}]),e}(l.a);c.defaults={validateOn:"fieldChange",labelErrorClass:"is-invalid-label",inputErrorClass:"is-invalid-input",formErrorSelector:".form-error",formErrorClass:"is-visible",liveValidate:!1,validateOnBlur:!1,patterns:{alpha:/^[a-zA-Z]+$/,alpha_numeric:/^[a-zA-Z0-9]+$/,integer:/^[-+]?\d+$/,number:/^[-+]?\d*(?:[\.\,]\d+)?$/,card:/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|(?:222[1-9]|2[3-6][0-9]{2}|27[0-1][0-9]|2720)[0-9]{12}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,cvv:/^([0-9]){3,4}$/,email:/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,url:/^(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,domain:/^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,datetime:/^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,date:/(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,time:/^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,dateISO:/^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,month_day_year:/^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,day_month_year:/^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,color:/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,website:{test:function(t){return c.defaults.patterns.domain.test(t)||c.defaults.patterns.url.test(t)}}},validators:{equalTo:function(t,e,i){return r()("#"+t.attr("data-equalto")).val()===t.val()}}}},function(t,e,i){"use strict";function n(t){if(void 0===Function.prototype.name){var e=/function\s([^(]{1,})\(/,i=e.exec(t.toString());return i&&i.length>1?i[1].trim():""}return void 0===t.prototype?t.constructor.name:t.prototype.constructor.name}function s(t){return"true"===t||"false"!==t&&(isNaN(1*t)?t:parseFloat(t))}function o(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}i.d(e,"a",function(){return c});var a=i(0),r=i.n(a),l=i(1),u=i(4),c={version:"6.4.3",_plugins:{},_uuids:[],plugin:function(t,e){var i=e||n(t),s=o(i);this._plugins[s]=this[i]=t},registerPlugin:function(t,e){var s=e?o(e):n(t.constructor).toLowerCase();t.uuid=i.i(l.b)(6,s),t.$element.attr("data-"+s)||t.$element.attr("data-"+s,t.uuid),t.$element.data("zfPlugin")||t.$element.data("zfPlugin",t),t.$element.trigger("init.zf."+s),this._uuids.push(t.uuid)},unregisterPlugin:function(t){var e=o(n(t.$element.data("zfPlugin").constructor));this._uuids.splice(this._uuids.indexOf(t.uuid),1),t.$element.removeAttr("data-"+e).removeData("zfPlugin").trigger("destroyed.zf."+e);for(var i in t)t[i]=null},reInit:function(t){var e=t instanceof r.a;try{if(e)t.each(function(){r()(this).data("zfPlugin")._init()});else{var i=typeof t,n=this;({object:function(t){t.forEach(function(t){t=o(t),r()("[data-"+t+"]").foundation("_init")})},string:function(){t=o(t),r()("[data-"+t+"]").foundation("_init")},undefined:function(){this.object(Object.keys(n._plugins))}})[i](t)}}catch(t){console.error(t)}finally{return t}},reflow:function(t,e){void 0===e?e=Object.keys(this._plugins):"string"==typeof e&&(e=[e]);var i=this;r.a.each(e,function(e,n){var o=i._plugins[n];r()(t).find("[data-"+n+"]").addBack("[data-"+n+"]").each(function(){var t=r()(this),e={};if(t.data("zfPlugin"))return void console.warn("Tried to initialize "+n+" on an element that already has a Foundation plugin.");t.attr("data-options")&&t.attr("data-options").split(";").forEach(function(t,i){var n=t.split(":").map(function(t){return t.trim()});n[0]&&(e[n[0]]=s(n[1]))});try{t.data("zfPlugin",new o(r()(this),e))}catch(t){console.error(t)}finally{return}})})},getFnName:n,addToJquery:function(t){var e=function(e){var i=typeof e,s=t(".no-js");if(s.length&&s.removeClass("no-js"),"undefined"===i)u.a._init(),c.reflow(this);else{if("string"!==i)throw new TypeError("We're sorry, "+i+" is not a valid parameter. You must use a string representing the method you wish to invoke.");var o=Array.prototype.slice.call(arguments,1),a=this.data("zfPlugin");if(void 0===a||void 0===a[e])throw new ReferenceError("We're sorry, '"+e+"' is not an available method for "+(a?n(a):"this element")+".");1===this.length?a[e].apply(a,o):this.each(function(i,n){a[e].apply(t(n).data("zfPlugin"),o)})}return this};return t.fn.foundation=e,t}};c.util={throttle:function(t,e){var i=null;return function(){var n=this,s=arguments;null===i&&(i=setTimeout(function(){t.apply(n,s),i=null},e))}}},window.Foundation=c,function(){Date.now&&window.Date.now||(window.Date.now=Date.now=function(){return(new Date).getTime()});for(var t=["webkit","moz"],e=0;e<t.length&&!window.requestAnimationFrame;++e){var i=t[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var n=0;window.requestAnimationFrame=function(t){var e=Date.now(),i=Math.max(n+16,e);return setTimeout(function(){t(n=i)},i-e)},window.cancelAnimationFrame=clearTimeout}window.performance&&window.performance.now||(window.performance={start:Date.now(),now:function(){return Date.now()-this.start}})}(),Function.prototype.bind||(Function.prototype.bind=function(t){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var e=Array.prototype.slice.call(arguments,1),i=this,n=function(){},s=function(){return i.apply(this instanceof n?this:t,e.concat(Array.prototype.slice.call(arguments)))};return this.prototype&&(n.prototype=this.prototype),s.prototype=new n,s})},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return p});var a=i(0),r=i.n(a),l=i(3),u=i(1),c=i(15),h=i(5),d=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),f=function t(e,i,n){null===e&&(e=Function.prototype);var s=Object.getOwnPropertyDescriptor(e,i);if(void 0===s){var o=Object.getPrototypeOf(e);return null===o?void 0:t(o,i,n)}if("value"in s)return s.value;var a=s.get;if(void 0!==a)return a.call(n)},p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),d(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Dropdown",h.a.init(r.a),this._init(),l.a.register("Dropdown",{ENTER:"open",SPACE:"open",ESCAPE:"close"})}},{key:"_init",value:function(){var t=this.$element.attr("id");this.$anchors=r()('[data-toggle="'+t+'"]').length?r()('[data-toggle="'+t+'"]'):r()('[data-open="'+t+'"]'),this.$anchors.attr({"aria-controls":t,"data-is-focus":!1,"data-yeti-box":t,"aria-haspopup":!0,"aria-expanded":!1}),this._setCurrentAnchor(this.$anchors.first()),this.options.parentClass?this.$parent=this.$element.parents("."+this.options.parentClass):this.$parent=null,this.$element.attr({"aria-hidden":"true","data-yeti-box":t,"data-resize":t,"aria-labelledby":this.$currentAnchor.id||i.i(u.b)(6,"dd-anchor")}),f(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"_init",this).call(this),this._events()}},{key:"_getDefaultPosition",value:function(){var t=this.$element[0].className.match(/(top|left|right|bottom)/g);return t?t[0]:"bottom"}},{key:"_getDefaultAlignment",value:function(){var t=/float-(\S+)/.exec(this.$currentAnchor.className);return t?t[1]:f(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"_getDefaultAlignment",this).call(this)}},{key:"_setPosition",value:function(){f(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"_setPosition",this).call(this,this.$currentAnchor,this.$element,this.$parent)}},{key:"_setCurrentAnchor",value:function(t){this.$currentAnchor=r()(t)}},{key:"_events",value:function(){var t=this;this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"resizeme.zf.trigger":this._setPosition.bind(this)}),this.$anchors.off("click.zf.trigger").on("click.zf.trigger",function(){t._setCurrentAnchor(this)}),this.options.hover&&(this.$anchors.off("mouseenter.zf.dropdown mouseleave.zf.dropdown").on("mouseenter.zf.dropdown",function(){t._setCurrentAnchor(this);var e=r()("body").data();void 0!==e.whatinput&&"mouse"!==e.whatinput||(clearTimeout(t.timeout),t.timeout=setTimeout(function(){t.open(),t.$anchors.data("hover",!0)},t.options.hoverDelay))}).on("mouseleave.zf.dropdown",function(){clearTimeout(t.timeout),t.timeout=setTimeout(function(){t.close(),t.$anchors.data("hover",!1)},t.options.hoverDelay)}),this.options.hoverPane&&this.$element.off("mouseenter.zf.dropdown mouseleave.zf.dropdown").on("mouseenter.zf.dropdown",function(){clearTimeout(t.timeout)}).on("mouseleave.zf.dropdown",function(){clearTimeout(t.timeout),t.timeout=setTimeout(function(){t.close(),t.$anchors.data("hover",!1)},t.options.hoverDelay)})),this.$anchors.add(this.$element).on("keydown.zf.dropdown",function(e){var i=r()(this);l.a.findFocusable(t.$element);l.a.handleKey(e,"Dropdown",{open:function(){i.is(t.$anchors)&&(t.open(),t.$element.attr("tabindex",-1).focus(),e.preventDefault())},close:function(){t.close(),t.$anchors.focus()}})})}},{key:"_addBodyHandler",value:function(){var t=r()(document.body).not(this.$element),e=this;t.off("click.zf.dropdown").on("click.zf.dropdown",function(i){e.$anchors.is(i.target)||e.$anchors.find(i.target).length||e.$element.find(i.target).length||(e.close(),t.off("click.zf.dropdown"))})}},{key:"open",value:function(){if(this.$element.trigger("closeme.zf.dropdown",this.$element.attr("id")),this.$anchors.addClass("hover").attr({"aria-expanded":!0}),this.$element.addClass("is-opening"),this._setPosition(),this.$element.removeClass("is-opening").addClass("is-open").attr({"aria-hidden":!1}),this.options.autoFocus){var t=l.a.findFocusable(this.$element);t.length&&t.eq(0).focus()}this.options.closeOnClick&&this._addBodyHandler(),this.options.trapFocus&&l.a.trapFocus(this.$element),this.$element.trigger("show.zf.dropdown",[this.$element])}},{key:"close",value:function(){if(!this.$element.hasClass("is-open"))return!1;this.$element.removeClass("is-open").attr({"aria-hidden":!0}),this.$anchors.removeClass("hover").attr("aria-expanded",!1),this.$element.trigger("hide.zf.dropdown",[this.$element]),this.options.trapFocus&&l.a.releaseFocus(this.$element)}},{key:"toggle",value:function(){if(this.$element.hasClass("is-open")){if(this.$anchors.data("hover"))return;this.close()}else this.open()}},{key:"_destroy",value:function(){this.$element.off(".zf.trigger").hide(),this.$anchors.off(".zf.dropdown"),r()(document.body).off("click.zf.dropdown")}}]),e}(c.a);p.defaults={parentClass:null,hoverDelay:250,hover:!1,hoverPane:!1,vOffset:0,hOffset:0,positionClass:"",position:"auto",alignment:"auto",allowOverlap:!1,allowBottomOverlap:!0,trapFocus:!1,autoFocus:!1,closeOnClick:!1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return f});var a=i(0),r=i.n(a),l=i(4),u=i(8),c=i(1),h=i(2),d=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),f=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),d(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Equalizer",this._init()}},{key:"_init",value:function(){var t=this.$element.attr("data-equalizer")||"",e=this.$element.find('[data-equalizer-watch="'+t+'"]');l.a._init(),this.$watched=e.length?e:this.$element.find("[data-equalizer-watch]"),this.$element.attr("data-resize",t||i.i(c.b)(6,"eq")),this.$element.attr("data-mutate",t||i.i(c.b)(6,"eq")),this.hasNested=this.$element.find("[data-equalizer]").length>0,this.isNested=this.$element.parentsUntil(document.body,"[data-equalizer]").length>0,this.isOn=!1,this._bindHandler={onResizeMeBound:this._onResizeMe.bind(this),onPostEqualizedBound:this._onPostEqualized.bind(this)};var n,s=this.$element.find("img");this.options.equalizeOn?(n=this._checkMQ(),r()(window).on("changed.zf.mediaquery",this._checkMQ.bind(this))):this._events(),(void 0!==n&&!1===n||void 0===n)&&(s.length?i.i(u.a)(s,this._reflow.bind(this)):this._reflow())}},{key:"_pauseEvents",value:function(){this.isOn=!1,this.$element.off({".zf.equalizer":this._bindHandler.onPostEqualizedBound,"resizeme.zf.trigger":this._bindHandler.onResizeMeBound,"mutateme.zf.trigger":this._bindHandler.onResizeMeBound})}},{key:"_onResizeMe",value:function(t){this._reflow()}},{key:"_onPostEqualized",value:function(t){t.target!==this.$element[0]&&this._reflow()}},{key:"_events",value:function(){this._pauseEvents(),this.hasNested?this.$element.on("postequalized.zf.equalizer",this._bindHandler.onPostEqualizedBound):(this.$element.on("resizeme.zf.trigger",this._bindHandler.onResizeMeBound),this.$element.on("mutateme.zf.trigger",this._bindHandler.onResizeMeBound)),this.isOn=!0}},{key:"_checkMQ",value:function(){var t=!l.a.is(this.options.equalizeOn);return t?this.isOn&&(this._pauseEvents(),this.$watched.css("height","auto")):this.isOn||this._events(),t}},{key:"_killswitch",value:function(){}},{key:"_reflow",value:function(){if(!this.options.equalizeOnStack&&this._isStacked())return this.$watched.css("height","auto"),!1;this.options.equalizeByRow?this.getHeightsByRow(this.applyHeightByRow.bind(this)):this.getHeights(this.applyHeight.bind(this))}},{key:"_isStacked",value:function(){return!this.$watched[0]||!this.$watched[1]||this.$watched[0].getBoundingClientRect().top!==this.$watched[1].getBoundingClientRect().top}},{key:"getHeights",value:function(t){for(var e=[],i=0,n=this.$watched.length;i<n;i++)this.$watched[i].style.height="auto",e.push(this.$watched[i].offsetHeight);t(e)}},{key:"getHeightsByRow",value:function(t){var e=this.$watched.length?this.$watched.first().offset().top:0,i=[],n=0;i[n]=[];for(var s=0,o=this.$watched.length;s<o;s++){this.$watched[s].style.height="auto";var a=r()(this.$watched[s]).offset().top;a!=e&&(n++,i[n]=[],e=a),i[n].push([this.$watched[s],this.$watched[s].offsetHeight])}for(var l=0,u=i.length;l<u;l++){var c=r()(i[l]).map(function(){return this[1]}).get(),h=Math.max.apply(null,c);i[l].push(h)}t(i)}},{key:"applyHeight",value:function(t){var e=Math.max.apply(null,t);this.$element.trigger("preequalized.zf.equalizer"),this.$watched.css("height",e),this.$element.trigger("postequalized.zf.equalizer")}},{key:"applyHeightByRow",value:function(t){this.$element.trigger("preequalized.zf.equalizer");for(var e=0,i=t.length;e<i;e++){var n=t[e].length,s=t[e][n-1];if(n<=2)r()(t[e][0][0]).css({height:"auto"});else{this.$element.trigger("preequalizedrow.zf.equalizer");for(var o=0,a=n-1;o<a;o++)r()(t[e][o][0]).css({height:s});this.$element.trigger("postequalizedrow.zf.equalizer")}}this.$element.trigger("postequalized.zf.equalizer")}},{key:"_destroy",value:function(){this._pauseEvents(),this.$watched.css("height","auto")}}]),e}(h.a);f.defaults={equalizeOnStack:!1,equalizeByRow:!1,equalizeOn:""}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(4),u=i(2),c=i(1),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,i),this.rules=[],this.currentPath="",this.className="Interchange",this._init(),this._events()}},{key:"_init",value:function(){l.a._init();var t=this.$element[0].id||i.i(c.b)(6,"interchange");this.$element.attr({"data-resize":t,id:t}),this._addBreakpoints(),this._generateRules(),this._reflow()}},{key:"_events",value:function(){var t=this;this.$element.off("resizeme.zf.trigger").on("resizeme.zf.trigger",function(){return t._reflow()})}},{key:"_reflow",value:function(){var t;for(var e in this.rules)if(this.rules.hasOwnProperty(e)){var i=this.rules[e];window.matchMedia(i.query).matches&&(t=i)}t&&this.replace(t.path)}},{key:"_addBreakpoints",value:function(){for(var t in l.a.queries)if(l.a.queries.hasOwnProperty(t)){var i=l.a.queries[t];e.SPECIAL_QUERIES[i.name]=i.value}}},{key:"_generateRules",value:function(t){var i,n=[];i=this.options.rules?this.options.rules:this.$element.data("interchange"),i="string"==typeof i?i.match(/\[.*?\]/g):i;for(var s in i)if(i.hasOwnProperty(s)){var o=i[s].slice(1,-1).split(", "),a=o.slice(0,-1).join(""),r=o[o.length-1];e.SPECIAL_QUERIES[r]&&(r=e.SPECIAL_QUERIES[r]),n.push({path:a,query:r})}this.rules=n}},{key:"replace",value:function(t){if(this.currentPath!==t){var e=this,i="replaced.zf.interchange";"IMG"===this.$element[0].nodeName?this.$element.attr("src",t).on("load",function(){e.currentPath=t}).trigger(i):t.match(/\.(gif|jpg|jpeg|png|svg|tiff)([?#].*)?/i)?(t=t.replace(/\(/g,"%28").replace(/\)/g,"%29"),this.$element.css({"background-image":"url("+t+")"}).trigger(i)):r.a.get(t,function(n){e.$element.html(n).trigger(i),r()(n).foundation(),e.currentPath=t})}}},{key:"_destroy",value:function(){this.$element.off("resizeme.zf.trigger")}}]),e}(u.a);d.defaults={rules:null},d.SPECIAL_QUERIES={landscape:"screen and (orientation: landscape)",portrait:"screen and (orientation: portrait)",retina:"only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)"}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(1),u=i(2),c=i(16),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Magellan",this._init(),this.calcPoints()}},{key:"_init",value:function(){var t=this.$element[0].id||i.i(l.b)(6,"magellan");this.$targets=r()("[data-magellan-target]"),this.$links=this.$element.find("a"),this.$element.attr({"data-resize":t,"data-scroll":t,id:t}),this.$active=r()(),this.scrollPos=parseInt(window.pageYOffset,10),this._events()}},{key:"calcPoints",value:function(){var t=this,e=document.body,i=document.documentElement;this.points=[],this.winHeight=Math.round(Math.max(window.innerHeight,i.clientHeight)),this.docHeight=Math.round(Math.max(e.scrollHeight,e.offsetHeight,i.clientHeight,i.scrollHeight,i.offsetHeight)),this.$targets.each(function(){var e=r()(this),i=Math.round(e.offset().top-t.options.threshold);e.targetPoint=i,t.points.push(i)})}},{key:"_events",value:function(){var t=this;r()("html, body"),t.options.animationDuration,t.options.animationEasing;r()(window).one("load",function(){t.options.deepLinking&&location.hash&&t.scrollToLoc(location.hash),t.calcPoints(),t._updateActive()}),this.$element.on({"resizeme.zf.trigger":this.reflow.bind(this),"scrollme.zf.trigger":this._updateActive.bind(this)}).on("click.zf.magellan",'a[href^="#"]',function(e){e.preventDefault();var i=this.getAttribute("href");t.scrollToLoc(i)}),this._deepLinkScroll=function(e){t.options.deepLinking&&t.scrollToLoc(window.location.hash)},r()(window).on("popstate",this._deepLinkScroll)}},{key:"scrollToLoc",value:function(t){this._inTransition=!0;var e=this,i={animationEasing:this.options.animationEasing,animationDuration:this.options.animationDuration,threshold:this.options.threshold,offset:this.options.offset};c.a.scrollToLoc(t,i,function(){e._inTransition=!1,e._updateActive()})}},{key:"reflow",value:function(){this.calcPoints(),this._updateActive()}},{key:"_updateActive",value:function(){if(!this._inTransition){var t,e=parseInt(window.pageYOffset,10);if(e+this.winHeight===this.docHeight)t=this.points.length-1;else if(e<this.points[0])t=void 0;else{var i=this.scrollPos<e,n=this,s=this.points.filter(function(t,s){return i?t-n.options.offset<=e:t-n.options.offset-n.options.threshold<=e});t=s.length?s.length-1:0}if(this.$active.removeClass(this.options.activeClass),this.$active=this.$links.filter('[href="#'+this.$targets.eq(t).data("magellan-target")+'"]').addClass(this.options.activeClass),this.options.deepLinking){var o="";void 0!=t&&(o=this.$active[0].getAttribute("href")),o!==window.location.hash&&(window.history.pushState?window.history.pushState(null,null,o):window.location.hash=o)}this.scrollPos=e,this.$element.trigger("update.zf.magellan",[this.$active])}}},{key:"_destroy",value:function(){if(this.$element.off(".zf.trigger .zf.magellan").find("."+this.options.activeClass).removeClass(this.options.activeClass),this.options.deepLinking){var t=this.$active[0].getAttribute("href");window.location.hash.replace(t,"")}r()(window).off("popstate",this._deepLinkScroll)}}]),e}(u.a);d.defaults={animationDuration:500,animationEasing:"linear",threshold:50,activeClass:"is-active",deepLinking:!1,offset:0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return p});var a=i(0),r=i.n(a),l=i(3),u=i(4),c=i(1),h=i(2),d=i(5),f=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),f(e,[{key:"_setup",value:function(t,i){var n=this;this.className="OffCanvas",this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.contentClasses={base:[],reveal:[]},this.$lastTrigger=r()(),this.$triggers=r()(),this.position="left",this.$content=r()(),this.nested=!!this.options.nested,r()(["push","overlap"]).each(function(t,e){n.contentClasses.base.push("has-transition-"+e)}),r()(["left","right","top","bottom"]).each(function(t,e){n.contentClasses.base.push("has-position-"+e),n.contentClasses.reveal.push("has-reveal-"+e)}),d.a.init(r.a),u.a._init(),this._init(),this._events(),l.a.register("OffCanvas",{ESCAPE:"close"})}},{key:"_init",value:function(){var t=this.$element.attr("id");if(this.$element.attr("aria-hidden","true"),this.options.contentId?this.$content=r()("#"+this.options.contentId):this.$element.siblings("[data-off-canvas-content]").length?this.$content=this.$element.siblings("[data-off-canvas-content]").first():this.$content=this.$element.closest("[data-off-canvas-content]").first(),this.options.contentId?this.options.contentId&&null===this.options.nested&&console.warn("Remember to use the nested option if using the content ID option!"):this.nested=0===this.$element.siblings("[data-off-canvas-content]").length,!0===this.nested&&(this.options.transition="overlap",this.$element.removeClass("is-transition-push")),this.$element.addClass("is-transition-"+this.options.transition+" is-closed"),this.$triggers=r()(document).find('[data-open="'+t+'"], [data-close="'+t+'"], [data-toggle="'+t+'"]').attr("aria-expanded","false").attr("aria-controls",t),this.position=this.$element.is(".position-left, .position-top, .position-right, .position-bottom")?this.$element.attr("class").match(/position\-(left|top|right|bottom)/)[1]:this.position,!0===this.options.contentOverlay){var e=document.createElement("div"),i="fixed"===r()(this.$element).css("position")?"is-overlay-fixed":"is-overlay-absolute";e.setAttribute("class","js-off-canvas-overlay "+i),this.$overlay=r()(e),"is-overlay-fixed"===i?r()(this.$overlay).insertAfter(this.$element):this.$content.append(this.$overlay)}this.options.isRevealed=this.options.isRevealed||new RegExp(this.options.revealClass,"g").test(this.$element[0].className),!0===this.options.isRevealed&&(this.options.revealOn=this.options.revealOn||this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split("-")[2],this._setMQChecker()),this.options.transitionTime&&this.$element.css("transition-duration",this.options.transitionTime),this._removeContentClasses()}},{key:"_events",value:function(){if(this.$element.off(".zf.trigger .zf.offcanvas").on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"keydown.zf.offcanvas":this._handleKeyboard.bind(this)}),!0===this.options.closeOnClick){(this.options.contentOverlay?this.$overlay:this.$content).on({"click.zf.offcanvas":this.close.bind(this)})}}},{key:"_setMQChecker",value:function(){var t=this;r()(window).on("changed.zf.mediaquery",function(){u.a.atLeast(t.options.revealOn)?t.reveal(!0):t.reveal(!1)}).one("load.zf.offcanvas",function(){u.a.atLeast(t.options.revealOn)&&t.reveal(!0)})}},{key:"_removeContentClasses",value:function(t){"boolean"!=typeof t?this.$content.removeClass(this.contentClasses.base.join(" ")):!1===t&&this.$content.removeClass("has-reveal-"+this.position)}},{key:"_addContentClasses",value:function(t){this._removeContentClasses(t),"boolean"!=typeof t?this.$content.addClass("has-transition-"+this.options.transition+" has-position-"+this.position):!0===t&&this.$content.addClass("has-reveal-"+this.position)}},{key:"reveal",value:function(t){t?(this.close(),this.isRevealed=!0,this.$element.attr("aria-hidden","false"),this.$element.off("open.zf.trigger toggle.zf.trigger"),this.$element.removeClass("is-closed")):(this.isRevealed=!1,this.$element.attr("aria-hidden","true"),this.$element.off("open.zf.trigger toggle.zf.trigger").on({"open.zf.trigger":this.open.bind(this),"toggle.zf.trigger":this.toggle.bind(this)}),this.$element.addClass("is-closed")),this._addContentClasses(t)}},{key:"_stopScrolling",value:function(t){return!1}},{key:"_recordScrollable",value:function(t){var e=this |
| + | ;e.scrollHeight!==e.clientHeight&&(0===e.scrollTop&&(e.scrollTop=1),e.scrollTop===e.scrollHeight-e.clientHeight&&(e.scrollTop=e.scrollHeight-e.clientHeight-1)),e.allowUp=e.scrollTop>0,e.allowDown=e.scrollTop<e.scrollHeight-e.clientHeight,e.lastY=t.originalEvent.pageY}},{key:"_stopScrollPropagation",value:function(t){var e=this,i=t.pageY<e.lastY,n=!i;e.lastY=t.pageY,i&&e.allowUp||n&&e.allowDown?t.stopPropagation():t.preventDefault()}},{key:"open",value:function(t,e){if(!this.$element.hasClass("is-open")&&!this.isRevealed){var n=this;e&&(this.$lastTrigger=e),"top"===this.options.forceTo?window.scrollTo(0,0):"bottom"===this.options.forceTo&&window.scrollTo(0,document.body.scrollHeight),this.options.transitionTime&&"overlap"!==this.options.transition?this.$element.siblings("[data-off-canvas-content]").css("transition-duration",this.options.transitionTime):this.$element.siblings("[data-off-canvas-content]").css("transition-duration",""),this.$element.addClass("is-open").removeClass("is-closed"),this.$triggers.attr("aria-expanded","true"),this.$element.attr("aria-hidden","false").trigger("opened.zf.offcanvas"),this.$content.addClass("is-open-"+this.position),!1===this.options.contentScroll&&(r()("body").addClass("is-off-canvas-open").on("touchmove",this._stopScrolling),this.$element.on("touchstart",this._recordScrollable),this.$element.on("touchmove",this._stopScrollPropagation)),!0===this.options.contentOverlay&&this.$overlay.addClass("is-visible"),!0===this.options.closeOnClick&&!0===this.options.contentOverlay&&this.$overlay.addClass("is-closable"),!0===this.options.autoFocus&&this.$element.one(i.i(c.c)(this.$element),function(){if(n.$element.hasClass("is-open")){var t=n.$element.find("[data-autofocus]");t.length?t.eq(0).focus():n.$element.find("a, button").eq(0).focus()}}),!0===this.options.trapFocus&&(this.$content.attr("tabindex","-1"),l.a.trapFocus(this.$element)),this._addContentClasses()}}},{key:"close",value:function(t){if(this.$element.hasClass("is-open")&&!this.isRevealed){var e=this;this.$element.removeClass("is-open"),this.$element.attr("aria-hidden","true").trigger("closed.zf.offcanvas"),this.$content.removeClass("is-open-left is-open-top is-open-right is-open-bottom"),!1===this.options.contentScroll&&(r()("body").removeClass("is-off-canvas-open").off("touchmove",this._stopScrolling),this.$element.off("touchstart",this._recordScrollable),this.$element.off("touchmove",this._stopScrollPropagation)),!0===this.options.contentOverlay&&this.$overlay.removeClass("is-visible"),!0===this.options.closeOnClick&&!0===this.options.contentOverlay&&this.$overlay.removeClass("is-closable"),this.$triggers.attr("aria-expanded","false"),!0===this.options.trapFocus&&(this.$content.removeAttr("tabindex"),l.a.releaseFocus(this.$element)),this.$element.one(i.i(c.c)(this.$element),function(t){e.$element.addClass("is-closed"),e._removeContentClasses()})}}},{key:"toggle",value:function(t,e){this.$element.hasClass("is-open")?this.close(t,e):this.open(t,e)}},{key:"_handleKeyboard",value:function(t){var e=this;l.a.handleKey(t,"OffCanvas",{close:function(){return e.close(),e.$lastTrigger.focus(),!0},handled:function(){t.stopPropagation(),t.preventDefault()}})}},{key:"_destroy",value:function(){this.close(),this.$element.off(".zf.trigger .zf.offcanvas"),this.$overlay.off(".zf.offcanvas")}}]),e}(h.a);p.defaults={closeOnClick:!0,contentOverlay:!0,contentId:null,nested:null,contentScroll:!0,transitionTime:null,transition:"push",forceTo:null,isRevealed:!1,revealOn:null,autoFocus:!0,revealClass:"reveal-for-",trapFocus:!1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return g});var a=i(0),r=i.n(a),l=i(3),u=i(6),c=i(18),h=i(8),d=i(1),f=i(2),p=i(10),m=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),g=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),m(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Orbit",p.a.init(r.a),this._init(),l.a.register("Orbit",{ltr:{ARROW_RIGHT:"next",ARROW_LEFT:"previous"},rtl:{ARROW_LEFT:"next",ARROW_RIGHT:"previous"}})}},{key:"_init",value:function(){this._reset(),this.$wrapper=this.$element.find("."+this.options.containerClass),this.$slides=this.$element.find("."+this.options.slideClass);var t=this.$element.find("img"),e=this.$slides.filter(".is-active"),n=this.$element[0].id||i.i(d.b)(6,"orbit");this.$element.attr({"data-resize":n,id:n}),e.length||this.$slides.eq(0).addClass("is-active"),this.options.useMUI||this.$slides.addClass("no-motionui"),t.length?i.i(h.a)(t,this._prepareForOrbit.bind(this)):this._prepareForOrbit(),this.options.bullets&&this._loadBullets(),this._events(),this.options.autoPlay&&this.$slides.length>1&&this.geoSync(),this.options.accessible&&this.$wrapper.attr("tabindex",0)}},{key:"_loadBullets",value:function(){this.$bullets=this.$element.find("."+this.options.boxOfBullets).find("button")}},{key:"geoSync",value:function(){var t=this;this.timer=new c.a(this.$element,{duration:this.options.timerDelay,infinite:!1},function(){t.changeSlide(!0)}),this.timer.start()}},{key:"_prepareForOrbit",value:function(){this._setWrapperHeight()}},{key:"_setWrapperHeight",value:function(t){var e,i=0,n=0,s=this;this.$slides.each(function(){e=this.getBoundingClientRect().height,r()(this).attr("data-slide",n),/mui/g.test(r()(this)[0].className)||s.$slides.filter(".is-active")[0]===s.$slides.eq(n)[0]||r()(this).css({position:"relative",display:"none"}),i=e>i?e:i,n++}),n===this.$slides.length&&(this.$wrapper.css({height:i}),t&&t(i))}},{key:"_setSlideHeight",value:function(t){this.$slides.each(function(){r()(this).css("max-height",t)})}},{key:"_events",value:function(){var t=this;if(this.$element.off(".resizeme.zf.trigger").on({"resizeme.zf.trigger":this._prepareForOrbit.bind(this)}),this.$slides.length>1){if(this.options.swipe&&this.$slides.off("swipeleft.zf.orbit swiperight.zf.orbit").on("swipeleft.zf.orbit",function(e){e.preventDefault(),t.changeSlide(!0)}).on("swiperight.zf.orbit",function(e){e.preventDefault(),t.changeSlide(!1)}),this.options.autoPlay&&(this.$slides.on("click.zf.orbit",function(){t.$element.data("clickedOn",!t.$element.data("clickedOn")),t.timer[t.$element.data("clickedOn")?"pause":"start"]()}),this.options.pauseOnHover&&this.$element.on("mouseenter.zf.orbit",function(){t.timer.pause()}).on("mouseleave.zf.orbit",function(){t.$element.data("clickedOn")||t.timer.start()})),this.options.navButtons){this.$element.find("."+this.options.nextClass+", ."+this.options.prevClass).attr("tabindex",0).on("click.zf.orbit touchend.zf.orbit",function(e){e.preventDefault(),t.changeSlide(r()(this).hasClass(t.options.nextClass))})}this.options.bullets&&this.$bullets.on("click.zf.orbit touchend.zf.orbit",function(){if(/is-active/g.test(this.className))return!1;var e=r()(this).data("slide"),i=e>t.$slides.filter(".is-active").data("slide"),n=t.$slides.eq(e);t.changeSlide(i,n,e)}),this.options.accessible&&this.$wrapper.add(this.$bullets).on("keydown.zf.orbit",function(e){l.a.handleKey(e,"Orbit",{next:function(){t.changeSlide(!0)},previous:function(){t.changeSlide(!1)},handled:function(){r()(e.target).is(t.$bullets)&&t.$bullets.filter(".is-active").focus()}})})}}},{key:"_reset",value:function(){void 0!==this.$slides&&this.$slides.length>1&&(this.$element.off(".zf.orbit").find("*").off(".zf.orbit"),this.options.autoPlay&&this.timer.restart(),this.$slides.each(function(t){r()(t).removeClass("is-active is-active is-in").removeAttr("aria-live").hide()}),this.$slides.first().addClass("is-active").show(),this.$element.trigger("slidechange.zf.orbit",[this.$slides.first()]),this.options.bullets&&this._updateBullets(0))}},{key:"changeSlide",value:function(t,e,i){if(this.$slides){var n=this.$slides.filter(".is-active").eq(0);if(/mui/g.test(n[0].className))return!1;var s,o=this.$slides.first(),a=this.$slides.last(),r=t?"Right":"Left",l=t?"Left":"Right",c=this;s=e||(t?this.options.infiniteWrap?n.next("."+this.options.slideClass).length?n.next("."+this.options.slideClass):o:n.next("."+this.options.slideClass):this.options.infiniteWrap?n.prev("."+this.options.slideClass).length?n.prev("."+this.options.slideClass):a:n.prev("."+this.options.slideClass)),s.length&&(this.$element.trigger("beforeslidechange.zf.orbit",[n,s]),this.options.bullets&&(i=i||this.$slides.index(s),this._updateBullets(i)),this.options.useMUI&&!this.$element.is(":hidden")?(u.a.animateIn(s.addClass("is-active").css({position:"absolute",top:0}),this.options["animInFrom"+r],function(){s.css({position:"relative",display:"block"}).attr("aria-live","polite")}),u.a.animateOut(n.removeClass("is-active"),this.options["animOutTo"+l],function(){n.removeAttr("aria-live"),c.options.autoPlay&&!c.timer.isPaused&&c.timer.restart()})):(n.removeClass("is-active is-in").removeAttr("aria-live").hide(),s.addClass("is-active is-in").attr("aria-live","polite").show(),this.options.autoPlay&&!this.timer.isPaused&&this.timer.restart()),this.$element.trigger("slidechange.zf.orbit",[s]))}}},{key:"_updateBullets",value:function(t){var e=this.$element.find("."+this.options.boxOfBullets).find(".is-active").removeClass("is-active").blur(),i=e.find("span:last").detach();this.$bullets.eq(t).addClass("is-active").append(i)}},{key:"_destroy",value:function(){this.$element.off(".zf.orbit").find("*").off(".zf.orbit").end().hide()}}]),e}(f.a);g.defaults={bullets:!0,navButtons:!0,animInFromRight:"slide-in-right",animOutToRight:"slide-out-right",animInFromLeft:"slide-in-left",animOutToLeft:"slide-out-left",autoPlay:!0,timerDelay:5e3,infiniteWrap:!0,swipe:!0,pauseOnHover:!0,accessible:!0,containerClass:"orbit-container",slideClass:"orbit-slide",boxOfBullets:"orbit-bullets",nextClass:"orbit-next",prevClass:"orbit-previous",useMUI:!0}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return m});var a=i(0),r=i.n(a),l=i(4),u=i(1),c=i(2),h=i(11),d=i(17),f=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),p={tabs:{cssClass:"tabs",plugin:d.a},accordion:{cssClass:"accordion",plugin:h.a}},m=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),f(e,[{key:"_setup",value:function(t,e){this.$element=r()(t),this.options=r.a.extend({},this.$element.data(),e),this.rules=this.$element.data("responsive-accordion-tabs"),this.currentMq=null,this.currentPlugin=null,this.className="ResponsiveAccordionTabs",this.$element.attr("id")||this.$element.attr("id",i.i(u.b)(6,"responsiveaccordiontabs")),this._init(),this._events()}},{key:"_init",value:function(){if(l.a._init(),"string"==typeof this.rules){for(var t={},e=this.rules.split(" "),i=0;i<e.length;i++){var n=e[i].split("-"),s=n.length>1?n[0]:"small",o=n.length>1?n[1]:n[0];null!==p[o]&&(t[s]=p[o])}this.rules=t}this._getAllOptions(),r.a.isEmptyObject(this.rules)||this._checkMediaQueries()}},{key:"_getAllOptions",value:function(){var t=this;t.allOptions={};for(var e in p)if(p.hasOwnProperty(e)){var i=p[e];try{var n=r()("<ul></ul>"),s=new i.plugin(n,t.options);for(var o in s.options)if(s.options.hasOwnProperty(o)&&"zfPlugin"!==o){var a=s.options[o];t.allOptions[o]=a}s.destroy()}catch(t){}}}},{key:"_events",value:function(){var t=this;r()(window).on("changed.zf.mediaquery",function(){t._checkMediaQueries()})}},{key:"_checkMediaQueries",value:function(){var t,e=this;r.a.each(this.rules,function(e){l.a.atLeast(e)&&(t=e)}),t&&(this.currentPlugin instanceof this.rules[t].plugin||(r.a.each(p,function(t,i){e.$element.removeClass(i.cssClass)}),this.$element.addClass(this.rules[t].cssClass),this.currentPlugin&&(!this.currentPlugin.$element.data("zfPlugin")&&this.storezfData&&this.currentPlugin.$element.data("zfPlugin",this.storezfData),this.currentPlugin.destroy()),this._handleMarkup(this.rules[t].cssClass),this.currentPlugin=new this.rules[t].plugin(this.$element,{}),this.storezfData=this.currentPlugin.$element.data("zfPlugin")))}},{key:"_handleMarkup",value:function(t){var e=this,n="accordion",s=r()("[data-tabs-content="+this.$element.attr("id")+"]");if(s.length&&(n="tabs"),n!==t){var o=e.allOptions.linkClass?e.allOptions.linkClass:"tabs-title",a=e.allOptions.panelClass?e.allOptions.panelClass:"tabs-panel";this.$element.removeAttr("role");var l=this.$element.children("."+o+",[data-accordion-item]").removeClass(o).removeClass("accordion-item").removeAttr("data-accordion-item"),c=l.children("a").removeClass("accordion-title");if("tabs"===n?(s=s.children("."+a).removeClass(a).removeAttr("role").removeAttr("aria-hidden").removeAttr("aria-labelledby"),s.children("a").removeAttr("role").removeAttr("aria-controls").removeAttr("aria-selected")):s=l.children("[data-tab-content]").removeClass("accordion-content"),s.css({display:"",visibility:""}),l.css({display:"",visibility:""}),"accordion"===t)s.each(function(t,i){r()(i).appendTo(l.get(t)).addClass("accordion-content").attr("data-tab-content","").removeClass("is-active").css({height:""}),r()("[data-tabs-content="+e.$element.attr("id")+"]").after('<div id="tabs-placeholder-'+e.$element.attr("id")+'"></div>').detach(),l.addClass("accordion-item").attr("data-accordion-item",""),c.addClass("accordion-title")});else if("tabs"===t){var h=r()("[data-tabs-content="+e.$element.attr("id")+"]"),d=r()("#tabs-placeholder-"+e.$element.attr("id"));d.length?(h=r()('<div class="tabs-content"></div>').insertAfter(d).attr("data-tabs-content",e.$element.attr("id")),d.remove()):h=r()('<div class="tabs-content"></div>').insertAfter(e.$element).attr("data-tabs-content",e.$element.attr("id")),s.each(function(t,e){var n=r()(e).appendTo(h).addClass(a),s=c.get(t).hash.slice(1),o=r()(e).attr("id")||i.i(u.b)(6,"accordion");s!==o&&(""!==s?r()(e).attr("id",s):(s=o,r()(e).attr("id",s),r()(c.get(t)).attr("href",r()(c.get(t)).attr("href").replace("#","")+"#"+s))),r()(l.get(t)).hasClass("is-active")&&n.addClass("is-active")}),l.addClass(o)}}}},{key:"_destroy",value:function(){this.currentPlugin&&this.currentPlugin.destroy(),r()(window).off(".zf.ResponsiveAccordionTabs")}}]),e}(c.a);m.defaults={}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return g});var a=i(0),r=i.n(a),l=i(4),u=i(1),c=i(2),h=i(14),d=i(13),f=i(12),p=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),m={dropdown:{cssClass:"dropdown",plugin:h.a},drilldown:{cssClass:"drilldown",plugin:d.a},accordion:{cssClass:"accordion-menu",plugin:f.a}},g=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),p(e,[{key:"_setup",value:function(t,e){this.$element=r()(t),this.rules=this.$element.data("responsive-menu"),this.currentMq=null,this.currentPlugin=null,this.className="ResponsiveMenu",this._init(),this._events()}},{key:"_init",value:function(){if(l.a._init(),"string"==typeof this.rules){for(var t={},e=this.rules.split(" "),n=0;n<e.length;n++){var s=e[n].split("-"),o=s.length>1?s[0]:"small",a=s.length>1?s[1]:s[0];null!==m[a]&&(t[o]=m[a])}this.rules=t}r.a.isEmptyObject(this.rules)||this._checkMediaQueries(),this.$element.attr("data-mutate",this.$element.attr("data-mutate")||i.i(u.b)(6,"responsive-menu"))}},{key:"_events",value:function(){var t=this;r()(window).on("changed.zf.mediaquery",function(){t._checkMediaQueries()})}},{key:"_checkMediaQueries",value:function(){var t,e=this;r.a.each(this.rules,function(e){l.a.atLeast(e)&&(t=e)}),t&&(this.currentPlugin instanceof this.rules[t].plugin||(r.a.each(m,function(t,i){e.$element.removeClass(i.cssClass)}),this.$element.addClass(this.rules[t].cssClass),this.currentPlugin&&this.currentPlugin.destroy(),this.currentPlugin=new this.rules[t].plugin(this.$element,{})))}},{key:"_destroy",value:function(){this.currentPlugin.destroy(),r()(window).off(".zf.ResponsiveMenu")}}]),e}(c.a);g.defaults={}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(4),u=i(6),c=i(2),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=r()(t),this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="ResponsiveToggle",this._init(),this._events()}},{key:"_init",value:function(){l.a._init();var t=this.$element.data("responsive-toggle");if(t||console.error("Your tab bar needs an ID of a Menu as the value of data-tab-bar."),this.$targetMenu=r()("#"+t),this.$toggler=this.$element.find("[data-toggle]").filter(function(){var e=r()(this).data("toggle");return e===t||""===e}),this.options=r.a.extend({},this.options,this.$targetMenu.data()),this.options.animate){var e=this.options.animate.split(" ");this.animationIn=e[0],this.animationOut=e[1]||null}this._update()}},{key:"_events",value:function(){this._updateMqHandler=this._update.bind(this),r()(window).on("changed.zf.mediaquery",this._updateMqHandler),this.$toggler.on("click.zf.responsiveToggle",this.toggleMenu.bind(this))}},{key:"_update",value:function(){l.a.atLeast(this.options.hideFor)?(this.$element.hide(),this.$targetMenu.show()):(this.$element.show(),this.$targetMenu.hide())}},{key:"toggleMenu",value:function(){var t=this;l.a.atLeast(this.options.hideFor)||(this.options.animate?this.$targetMenu.is(":hidden")?u.a.animateIn(this.$targetMenu,this.animationIn,function(){t.$element.trigger("toggled.zf.responsiveToggle"),t.$targetMenu.find("[data-mutate]").triggerHandler("mutateme.zf.trigger")}):u.a.animateOut(this.$targetMenu,this.animationOut,function(){t.$element.trigger("toggled.zf.responsiveToggle")}):(this.$targetMenu.toggle(0),this.$targetMenu.find("[data-mutate]").trigger("mutateme.zf.trigger"),this.$element.trigger("toggled.zf.responsiveToggle")))}},{key:"_destroy",value:function(){this.$element.off(".zf.responsiveToggle"),this.$toggler.off(".zf.responsiveToggle"),r()(window).off("changed.zf.mediaquery",this._updateMqHandler)}}]),e}(c.a);d.defaults={hideFor:"medium",animate:!1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(){return/iP(ad|hone|od).*OS/.test(window.navigator.userAgent)}function r(){return/Android/.test(window.navigator.userAgent)}function l(){return a()||r()}i.d(e,"a",function(){return v});var u=i(0),c=i.n(u),h=i(3),d=i(4),f=i(6),p=i(2),m=i(5),g=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),v=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),g(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=c.a.extend({},e.defaults,this.$element.data(),i),this.className="Reveal",this._init(),m.a.init(c.a),h.a.register("Reveal",{ESCAPE:"close"})}},{key:"_init",value:function(){d.a._init(),this.id=this.$element.attr("id"),this.isActive=!1,this.cached={mq:d.a.current},this.isMobile=l(),this.$anchor=c()('[data-open="'+this.id+'"]').length?c()('[data-open="'+this.id+'"]'):c()('[data-toggle="'+this.id+'"]'),this.$anchor.attr({"aria-controls":this.id,"aria-haspopup":!0,tabindex:0}),(this.options.fullScreen||this.$element.hasClass("full"))&&(this.options.fullScreen=!0,this.options.overlay=!1),this.options.overlay&&!this.$overlay&&(this.$overlay=this._makeOverlay(this.id)),this.$element.attr({role:"dialog","aria-hidden":!0,"data-yeti-box":this.id,"data-resize":this.id}),this.$overlay?this.$element.detach().appendTo(this.$overlay):(this.$element.detach().appendTo(c()(this.options.appendTo)),this.$element.addClass("without-overlay")),this._events(),this.options.deepLink&&window.location.hash==="#"+this.id&&c()(window).one("load.zf.reveal",this.open.bind(this))}},{key:"_makeOverlay",value:function(){var t="";return this.options.additionalOverlayClasses&&(t=" "+this.options.additionalOverlayClasses),c()("<div></div>").addClass("reveal-overlay"+t).appendTo(this.options.appendTo)}},{key:"_updatePosition",value:function(){var t,e,i=this.$element.outerWidth(),n=c()(window).width(),s=this.$element.outerHeight(),o=c()(window).height();t="auto"===this.options.hOffset?parseInt((n-i)/2,10):parseInt(this.options.hOffset,10),e="auto"===this.options.vOffset?s>o?parseInt(Math.min(100,o/10),10):parseInt((o-s)/4,10):parseInt(this.options.vOffset,10),this.$element.css({top:e+"px"}),this.$overlay&&"auto"===this.options.hOffset||(this.$element.css({left:t+"px"}),this.$element.css({margin:"0px"}))}},{key:"_events",value:function(){var t=this,e=this;this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":function(i,n){if(i.target===e.$element[0]||c()(i.target).parents("[data-closable]")[0]===n)return t.close.apply(t)},"toggle.zf.trigger":this.toggle.bind(this),"resizeme.zf.trigger":function(){e._updatePosition()}}),this.options.closeOnClick&&this.options.overlay&&this.$overlay.off(".zf.reveal").on("click.zf.reveal",function(t){t.target!==e.$element[0]&&!c.a.contains(e.$element[0],t.target)&&c.a.contains(document,t.target)&&e.close()}),this.options.deepLink&&c()(window).on("popstate.zf.reveal:"+this.id,this._handleState.bind(this))}},{key:"_handleState",value:function(t){window.location.hash!=="#"+this.id||this.isActive?this.close():this.open()}},{key:"open",value:function(){function t(){n.isMobile?(n.originalScrollPos||(n.originalScrollPos=window.pageYOffset),c()("html, body").addClass("is-reveal-open")):c()("body").addClass("is-reveal-open")}var e=this;if(this.options.deepLink){var i="#"+this.id;window.history.pushState?this.options.updateHistory?window.history.pushState({},"",i):window.history.replaceState({},"",i):window.location.hash=i}this.isActive=!0,this.$element.css({visibility:"hidden"}).show().scrollTop(0),this.options.overlay&&this.$overlay.css({visibility:"hidden"}).show(),this._updatePosition(),this.$element.hide().css({visibility:""}),this.$overlay&&(this.$overlay.css({visibility:""}).hide(),this.$element.hasClass("fast")?this.$overlay.addClass("fast"):this.$element.hasClass("slow")&&this.$overlay.addClass("slow")),this.options.multipleOpened||this.$element.trigger("closeme.zf.reveal",this.id);var n=this;if(this.options.animationIn){var s=function(){n.$element.attr({"aria-hidden":!1,tabindex:-1}).focus(),t(),h.a.trapFocus(n.$element)};this.options.overlay&&f.a.animateIn(this.$overlay,"fade-in"),f.a.animateIn(this.$element,this.options.animationIn,function(){e.$element&&(e.focusableElements=h.a.findFocusable(e.$element),s())})}else this.options.overlay&&this.$overlay.show(0),this.$element.show(this.options.showDelay);this.$element.attr({"aria-hidden":!1,tabindex:-1}).focus(),h.a.trapFocus(this.$element),t(),this._extraHandlers(),this.$element.trigger("open.zf.reveal")}},{key:"_extraHandlers",value:function(){var t=this;this.$element&&(this.focusableElements=h.a.findFocusable(this.$element),this.options.overlay||!this.options.closeOnClick||this.options.fullScreen||c()("body").on("click.zf.reveal",function(e){e.target!==t.$element[0]&&!c.a.contains(t.$element[0],e.target)&&c.a.contains(document,e.target)&&t.close()}),this.options.closeOnEsc&&c()(window).on("keydown.zf.reveal",function(e){h.a.handleKey(e,"Reveal",{close:function(){t.options.closeOnEsc&&t.close()}})}))}},{key:"close",value:function(){function t(){e.isMobile?(0===c()(".reveal:visible").length&&c()("html, body").removeClass("is-reveal-open"),e.originalScrollPos&&(c()("body").scrollTop(e.originalScrollPos),e.originalScrollPos=null)):0===c()(".reveal:visible").length&&c()("body").removeClass("is-reveal-open"),h.a.releaseFocus(e.$element),e.$element.attr("aria-hidden",!0),e.$element.trigger("closed.zf.reveal")}if(!this.isActive||!this.$element.is(":visible"))return!1;var e=this;this.options.animationOut?(this.options.overlay&&f.a.animateOut(this.$overlay,"fade-out"),f.a.animateOut(this.$element,this.options.animationOut,t)):(this.$element.hide(this.options.hideDelay),this.options.overlay?this.$overlay.hide(0,t):t()),this.options.closeOnEsc&&c()(window).off("keydown.zf.reveal"),!this.options.overlay&&this.options.closeOnClick&&c()("body").off("click.zf.reveal"),this.$element.off("keydown.zf.reveal"),this.options.resetOnClose&&this.$element.html(this.$element.html()),this.isActive=!1,e.options.deepLink&&(window.history.replaceState?window.history.replaceState("",document.title,window.location.href.replace("#"+this.id,"")):window.location.hash=""),this.$anchor.focus()}},{key:"toggle",value:function(){this.isActive?this.close():this.open()}},{key:"_destroy",value:function(){this.options.overlay&&(this.$element.appendTo(c()(this.options.appendTo)),this.$overlay.hide().off().remove()),this.$element.hide().off(),this.$anchor.off(".zf"),c()(window).off(".zf.reveal:"+this.id)}}]),e}(p.a);v.defaults={animationIn:"",animationOut:"",showDelay:0,hideDelay:0,closeOnClick:!0,closeOnEsc:!0,multipleOpened:!1,vOffset:"auto",hOffset:"auto",fullScreen:!1,btmOffsetPct:10,overlay:!0,resetOnClose:!1,deepLink:!1,updateHistory:!1,appendTo:"body",additionalOverlayClasses:""}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t,e){return t/e}function r(t,e,i,n){return Math.abs(t.position()[e]+t[n]()/2-i)}function l(t,e){return Math.log(e)/Math.log(t)}i.d(e,"a",function(){return b});var u=i(0),c=i.n(u),h=i(3),d=i(6),f=i(1),p=i(2),m=i(10),g=i(5),v=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),b=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),v(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=c.a.extend({},e.defaults,this.$element.data(),i),this.className="Slider",m.a.init(c.a),g.a.init(c.a),this._init(),h.a.register("Slider",{ltr:{ARROW_RIGHT:"increase",ARROW_UP:"increase",ARROW_DOWN:"decrease",ARROW_LEFT:"decrease",SHIFT_ARROW_RIGHT:"increase_fast",SHIFT_ARROW_UP:"increase_fast",SHIFT_ARROW_DOWN:"decrease_fast",SHIFT_ARROW_LEFT:"decrease_fast",HOME:"min",END:"max"},rtl:{ARROW_LEFT:"increase",ARROW_RIGHT:"decrease",SHIFT_ARROW_LEFT:"increase_fast",SHIFT_ARROW_RIGHT:"decrease_fast"}})}},{key:"_init",value:function(){this.inputs=this.$element.find("input"),this.handles=this.$element.find("[data-slider-handle]"),this.$handle=this.handles.eq(0),this.$input=this.inputs.length?this.inputs.eq(0):c()("#"+this.$handle.attr("aria-controls")),this.$fill=this.$element.find("[data-slider-fill]").css(this.options.vertical?"height":"width",0);(this.options.disabled||this.$element.hasClass(this.options.disabledClass))&&(this.options.disabled=!0,this.$element.addClass(this.options.disabledClass)),this.inputs.length||(this.inputs=c()().add(this.$input),this.options.binding=!0),this._setInitAttr(0),this.handles[1]&&(this.options.doubleSided=!0,this.$handle2=this.handles.eq(1),this.$input2=this.inputs.length>1?this.inputs.eq(1):c()("#"+this.$handle2.attr("aria-controls")),this.inputs[1]||(this.inputs=this.inputs.add(this.$input2)),!0,this._setInitAttr(1)),this.setHandles(),this._events()}},{key:"setHandles",value:function(){var t=this;this.handles[1]?this._setHandlePos(this.$handle,this.inputs.eq(0).val(),!0,function(){t._setHandlePos(t.$handle2,t.inputs.eq(1).val(),!0)}):this._setHandlePos(this.$handle,this.inputs.eq(0).val(),!0)}},{key:"_reflow",value:function(){this.setHandles()}},{key:"_pctOfBar",value:function(t){var e=a(t-this.options.start,this.options.end-this.options.start);switch(this.options.positionValueFunction){case"pow":e=this._logTransform(e);break;case"log":e=this._powTransform(e)}return e.toFixed(2)}},{key:"_value",value:function(t){switch(this.options.positionValueFunction){case"pow":t=this._powTransform(t);break;case"log":t=this._logTransform(t)} |
| + | return(this.options.end-this.options.start)*t+this.options.start}},{key:"_logTransform",value:function(t){return l(this.options.nonLinearBase,t*(this.options.nonLinearBase-1)+1)}},{key:"_powTransform",value:function(t){return(Math.pow(this.options.nonLinearBase,t)-1)/(this.options.nonLinearBase-1)}},{key:"_setHandlePos",value:function(t,e,n,s){if(!this.$element.hasClass(this.options.disabledClass)){e=parseFloat(e),e<this.options.start?e=this.options.start:e>this.options.end&&(e=this.options.end);var o=this.options.doubleSided;if(this.options.vertical&&!n&&(e=this.options.end-e),o)if(0===this.handles.index(t)){var r=parseFloat(this.$handle2.attr("aria-valuenow"));e=e>=r?r-this.options.step:e}else{var l=parseFloat(this.$handle.attr("aria-valuenow"));e=e<=l?l+this.options.step:e}var u=this,c=this.options.vertical,h=c?"height":"width",f=c?"top":"left",p=t[0].getBoundingClientRect()[h],m=this.$element[0].getBoundingClientRect()[h],g=this._pctOfBar(e),v=(m-p)*g,b=(100*a(v,m)).toFixed(this.options.decimal);e=parseFloat(e.toFixed(this.options.decimal));var y={};if(this._setValues(t,e),o){var w,_=0===this.handles.index(t),$=~~(100*a(p,m));if(_)y[f]=b+"%",w=parseFloat(this.$handle2[0].style[f])-b+$,s&&"function"==typeof s&&s();else{var k=parseFloat(this.$handle[0].style[f]);w=b-(isNaN(k)?(this.options.initialStart-this.options.start)/((this.options.end-this.options.start)/100):k)+$}y["min-"+h]=w+"%"}this.$element.one("finished.zf.animate",function(){u.$element.trigger("moved.zf.slider",[t])});var C=this.$element.data("dragging")?1e3/60:this.options.moveTime;i.i(d.b)(C,t,function(){isNaN(b)?t.css(f,100*g+"%"):t.css(f,b+"%"),u.options.doubleSided?u.$fill.css(y):u.$fill.css(h,100*g+"%")}),clearTimeout(u.timeout),u.timeout=setTimeout(function(){u.$element.trigger("changed.zf.slider",[t])},u.options.changedDelay)}}},{key:"_setInitAttr",value:function(t){var e=0===t?this.options.initialStart:this.options.initialEnd,n=this.inputs.eq(t).attr("id")||i.i(f.b)(6,"slider");this.inputs.eq(t).attr({id:n,max:this.options.end,min:this.options.start,step:this.options.step}),this.inputs.eq(t).val(e),this.handles.eq(t).attr({role:"slider","aria-controls":n,"aria-valuemax":this.options.end,"aria-valuemin":this.options.start,"aria-valuenow":e,"aria-orientation":this.options.vertical?"vertical":"horizontal",tabindex:0})}},{key:"_setValues",value:function(t,e){var i=this.options.doubleSided?this.handles.index(t):0;this.inputs.eq(i).val(e),t.attr("aria-valuenow",e)}},{key:"_handleEvent",value:function(t,e,n){var s,o;if(n)s=this._adjustValue(null,n),o=!0;else{t.preventDefault();var l=this,u=this.options.vertical,h=u?"height":"width",d=u?"top":"left",p=u?t.pageY:t.pageX,m=(this.$handle[0].getBoundingClientRect()[h],this.$element[0].getBoundingClientRect()[h]),g=u?c()(window).scrollTop():c()(window).scrollLeft(),v=this.$element.offset()[d];t.clientY===t.pageY&&(p+=g);var b,y=p-v;b=y<0?0:y>m?m:y;var w=a(b,m);if(s=this._value(w),i.i(f.a)()&&!this.options.vertical&&(s=this.options.end-s),s=l._adjustValue(null,s),o=!1,!e){e=r(this.$handle,d,b,h)<=r(this.$handle2,d,b,h)?this.$handle:this.$handle2}}this._setHandlePos(e,s,o)}},{key:"_adjustValue",value:function(t,e){var i,n,s,o,a=this.options.step,r=parseFloat(a/2);return i=t?parseFloat(t.attr("aria-valuenow")):e,n=i%a,s=i-n,o=s+a,0===n?i:i=i>=s+r?o:s}},{key:"_events",value:function(){this._eventsForHandle(this.$handle),this.handles[1]&&this._eventsForHandle(this.$handle2)}},{key:"_eventsForHandle",value:function(t){var e,i=this;if(this.inputs.off("change.zf.slider").on("change.zf.slider",function(t){var e=i.inputs.index(c()(this));i._handleEvent(t,i.handles.eq(e),c()(this).val())}),this.options.clickSelect&&this.$element.off("click.zf.slider").on("click.zf.slider",function(t){if(i.$element.data("dragging"))return!1;c()(t.target).is("[data-slider-handle]")||(i.options.doubleSided?i._handleEvent(t):i._handleEvent(t,i.$handle))}),this.options.draggable){this.handles.addTouch();var n=c()("body");t.off("mousedown.zf.slider").on("mousedown.zf.slider",function(s){t.addClass("is-dragging"),i.$fill.addClass("is-dragging"),i.$element.data("dragging",!0),e=c()(s.currentTarget),n.on("mousemove.zf.slider",function(t){t.preventDefault(),i._handleEvent(t,e)}).on("mouseup.zf.slider",function(s){i._handleEvent(s,e),t.removeClass("is-dragging"),i.$fill.removeClass("is-dragging"),i.$element.data("dragging",!1),n.off("mousemove.zf.slider mouseup.zf.slider")})}).on("selectstart.zf.slider touchmove.zf.slider",function(t){t.preventDefault()})}t.off("keydown.zf.slider").on("keydown.zf.slider",function(t){var e,n=c()(this),s=i.options.doubleSided?i.handles.index(n):0,o=parseFloat(i.inputs.eq(s).val());h.a.handleKey(t,"Slider",{decrease:function(){e=o-i.options.step},increase:function(){e=o+i.options.step},decrease_fast:function(){e=o-10*i.options.step},increase_fast:function(){e=o+10*i.options.step},min:function(){e=i.options.start},max:function(){e=i.options.end},handled:function(){t.preventDefault(),i._setHandlePos(n,e,!0)}})})}},{key:"_destroy",value:function(){this.handles.off(".zf.slider"),this.inputs.off(".zf.slider"),this.$element.off(".zf.slider"),clearTimeout(this.timeout)}}]),e}(p.a);b.defaults={start:0,end:100,step:1,initialStart:0,initialEnd:100,binding:!1,clickSelect:!0,vertical:!1,draggable:!0,disabled:!1,doubleSided:!1,decimal:2,moveTime:200,disabledClass:"disabled",invertVertical:!1,changedDelay:500,nonLinearBase:5,positionValueFunction:"linear"}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t){return parseInt(window.getComputedStyle(document.body,null).fontSize,10)*t}i.d(e,"a",function(){return p});var r=i(0),l=i.n(r),u=i(1),c=i(4),h=i(2),d=i(5),f=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),f(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=l.a.extend({},e.defaults,this.$element.data(),i),this.className="Sticky",d.a.init(l.a),this._init()}},{key:"_init",value:function(){c.a._init();var t=this.$element.parent("[data-sticky-container]"),e=this.$element[0].id||i.i(u.b)(6,"sticky"),n=this;t.length?this.$container=t:(this.wasWrapped=!0,this.$element.wrap(this.options.container),this.$container=this.$element.parent()),this.$container.addClass(this.options.containerClass),this.$element.addClass(this.options.stickyClass).attr({"data-resize":e,"data-mutate":e}),""!==this.options.anchor&&l()("#"+n.options.anchor).attr({"data-mutate":e}),this.scrollCount=this.options.checkEvery,this.isStuck=!1,l()(window).one("load.zf.sticky",function(){n.containerHeight="none"==n.$element.css("display")?0:n.$element[0].getBoundingClientRect().height,n.$container.css("height",n.containerHeight),n.elemHeight=n.containerHeight,""!==n.options.anchor?n.$anchor=l()("#"+n.options.anchor):n._parsePoints(),n._setSizes(function(){var t=window.pageYOffset;n._calc(!1,t),n.isStuck||n._removeSticky(!(t>=n.topPoint))}),n._events(e.split("-").reverse().join("-"))})}},{key:"_parsePoints",value:function(){for(var t=""==this.options.topAnchor?1:this.options.topAnchor,e=""==this.options.btmAnchor?document.documentElement.scrollHeight:this.options.btmAnchor,i=[t,e],n={},s=0,o=i.length;s<o&&i[s];s++){var a;if("number"==typeof i[s])a=i[s];else{var r=i[s].split(":"),u=l()("#"+r[0]);a=u.offset().top,r[1]&&"bottom"===r[1].toLowerCase()&&(a+=u[0].getBoundingClientRect().height)}n[s]=a}this.points=n}},{key:"_events",value:function(t){var e=this,i=this.scrollListener="scroll.zf."+t;this.isOn||(this.canStick&&(this.isOn=!0,l()(window).off(i).on(i,function(t){0===e.scrollCount?(e.scrollCount=e.options.checkEvery,e._setSizes(function(){e._calc(!1,window.pageYOffset)})):(e.scrollCount--,e._calc(!1,window.pageYOffset))})),this.$element.off("resizeme.zf.trigger").on("resizeme.zf.trigger",function(i,n){e._eventsHandler(t)}),this.$element.on("mutateme.zf.trigger",function(i,n){e._eventsHandler(t)}),this.$anchor&&this.$anchor.on("mutateme.zf.trigger",function(i,n){e._eventsHandler(t)}))}},{key:"_eventsHandler",value:function(t){var e=this,i=this.scrollListener="scroll.zf."+t;e._setSizes(function(){e._calc(!1),e.canStick?e.isOn||e._events(t):e.isOn&&e._pauseListeners(i)})}},{key:"_pauseListeners",value:function(t){this.isOn=!1,l()(window).off(t),this.$element.trigger("pause.zf.sticky")}},{key:"_calc",value:function(t,e){if(t&&this._setSizes(),!this.canStick)return this.isStuck&&this._removeSticky(!0),!1;e||(e=window.pageYOffset),e>=this.topPoint?e<=this.bottomPoint?this.isStuck||this._setSticky():this.isStuck&&this._removeSticky(!1):this.isStuck&&this._removeSticky(!0)}},{key:"_setSticky",value:function(){var t=this,e=this.options.stickTo,i="top"===e?"marginTop":"marginBottom",n="top"===e?"bottom":"top",s={};s[i]=this.options[i]+"em",s[e]=0,s[n]="auto",this.isStuck=!0,this.$element.removeClass("is-anchored is-at-"+n).addClass("is-stuck is-at-"+e).css(s).trigger("sticky.zf.stuckto:"+e),this.$element.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){t._setSizes()})}},{key:"_removeSticky",value:function(t){var e=this.options.stickTo,i="top"===e,n={},s=(this.points?this.points[1]-this.points[0]:this.anchorHeight)-this.elemHeight,o=i?"marginTop":"marginBottom",a=t?"top":"bottom";n[o]=0,n.bottom="auto",n.top=t?0:s,this.isStuck=!1,this.$element.removeClass("is-stuck is-at-"+e).addClass("is-anchored is-at-"+a).css(n).trigger("sticky.zf.unstuckfrom:"+a)}},{key:"_setSizes",value:function(t){this.canStick=c.a.is(this.options.stickyOn),this.canStick||t&&"function"==typeof t&&t();var e=this.$container[0].getBoundingClientRect().width,i=window.getComputedStyle(this.$container[0]),n=parseInt(i["padding-left"],10),s=parseInt(i["padding-right"],10);this.$anchor&&this.$anchor.length?this.anchorHeight=this.$anchor[0].getBoundingClientRect().height:this._parsePoints(),this.$element.css({"max-width":e-n-s+"px"});var o=this.$element[0].getBoundingClientRect().height||this.containerHeight;if("none"==this.$element.css("display")&&(o=0),this.containerHeight=o,this.$container.css({height:o}),this.elemHeight=o,!this.isStuck&&this.$element.hasClass("is-at-bottom")){var a=(this.points?this.points[1]-this.$container.offset().top:this.anchorHeight)-this.elemHeight;this.$element.css("top",a)}this._setBreakPoints(o,function(){t&&"function"==typeof t&&t()})}},{key:"_setBreakPoints",value:function(t,e){if(!this.canStick){if(!e||"function"!=typeof e)return!1;e()}var i=a(this.options.marginTop),n=a(this.options.marginBottom),s=this.points?this.points[0]:this.$anchor.offset().top,o=this.points?this.points[1]:s+this.anchorHeight,r=window.innerHeight;"top"===this.options.stickTo?(s-=i,o-=t+i):"bottom"===this.options.stickTo&&(s-=r-(t+n),o-=r-n),this.topPoint=s,this.bottomPoint=o,e&&"function"==typeof e&&e()}},{key:"_destroy",value:function(){this._removeSticky(!0),this.$element.removeClass(this.options.stickyClass+" is-anchored is-at-top").css({height:"",top:"",bottom:"","max-width":""}).off("resizeme.zf.trigger").off("mutateme.zf.trigger"),this.$anchor&&this.$anchor.length&&this.$anchor.off("change.zf.sticky"),l()(window).off(this.scrollListener),this.wasWrapped?this.$element.unwrap():this.$container.removeClass(this.options.containerClass).css({height:""})}}]),e}(h.a);p.defaults={container:"<div data-sticky-container></div>",stickTo:"top",anchor:"",topAnchor:"",btmAnchor:"",marginTop:1,marginBottom:1,stickyOn:"medium",stickyClass:"sticky",containerClass:"sticky-container",checkEvery:-1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return d});var a=i(0),r=i.n(a),l=i(6),u=i(2),c=i(5),h=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),d=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),h(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,t.data(),i),this.className="",this.className="Toggler",c.a.init(r.a),this._init(),this._events()}},{key:"_init",value:function(){var t;this.options.animate?(t=this.options.animate.split(" "),this.animationIn=t[0],this.animationOut=t[1]||null):(t=this.$element.data("toggler"),this.className="."===t[0]?t.slice(1):t);var e=this.$element[0].id;r()('[data-open="'+e+'"], [data-close="'+e+'"], [data-toggle="'+e+'"]').attr("aria-controls",e),this.$element.attr("aria-expanded",!this.$element.is(":hidden"))}},{key:"_events",value:function(){this.$element.off("toggle.zf.trigger").on("toggle.zf.trigger",this.toggle.bind(this))}},{key:"toggle",value:function(){this[this.options.animate?"_toggleAnimate":"_toggleClass"]()}},{key:"_toggleClass",value:function(){this.$element.toggleClass(this.className);var t=this.$element.hasClass(this.className);t?this.$element.trigger("on.zf.toggler"):this.$element.trigger("off.zf.toggler"),this._updateARIA(t),this.$element.find("[data-mutate]").trigger("mutateme.zf.trigger")}},{key:"_toggleAnimate",value:function(){var t=this;this.$element.is(":hidden")?l.a.animateIn(this.$element,this.animationIn,function(){t._updateARIA(!0),this.trigger("on.zf.toggler"),this.find("[data-mutate]").trigger("mutateme.zf.trigger")}):l.a.animateOut(this.$element,this.animationOut,function(){t._updateARIA(!1),this.trigger("off.zf.toggler"),this.find("[data-mutate]").trigger("mutateme.zf.trigger")})}},{key:"_updateARIA",value:function(t){this.$element.attr("aria-expanded",!!t)}},{key:"_destroy",value:function(){this.$element.off(".zf.toggler")}}]),e}(u.a);d.defaults={animate:!1}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}i.d(e,"a",function(){return p});var a=i(0),r=i.n(a),l=i(1),u=i(4),c=i(5),h=i(15),d=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),f=function t(e,i,n){null===e&&(e=Function.prototype);var s=Object.getOwnPropertyDescriptor(e,i);if(void 0===s){var o=Object.getPrototypeOf(e);return null===o?void 0:t(o,i,n)}if("value"in s)return s.value;var a=s.get;if(void 0!==a)return a.call(n)},p=function(t){function e(){return n(this,e),s(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),d(e,[{key:"_setup",value:function(t,i){this.$element=t,this.options=r.a.extend({},e.defaults,this.$element.data(),i),this.className="Tooltip",this.isActive=!1,this.isClick=!1,c.a.init(r.a),this._init()}},{key:"_init",value:function(){u.a._init();var t=this.$element.attr("aria-describedby")||i.i(l.b)(6,"tooltip");this.options.tipText=this.options.tipText||this.$element.attr("title"),this.template=this.options.template?r()(this.options.template):this._buildTemplate(t),this.options.allowHtml?this.template.appendTo(document.body).html(this.options.tipText).hide():this.template.appendTo(document.body).text(this.options.tipText).hide(),this.$element.attr({title:"","aria-describedby":t,"data-yeti-box":t,"data-toggle":t,"data-resize":t}).addClass(this.options.triggerClass),f(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"_init",this).call(this),this._events()}},{key:"_getDefaultPosition",value:function(){var t=this.$element[0].className.match(/\b(top|left|right|bottom)\b/g);return t?t[0]:"top"}},{key:"_getDefaultAlignment",value:function(){return"center"}},{key:"_getHOffset",value:function(){return"left"===this.position||"right"===this.position?this.options.hOffset+this.options.tooltipWidth:this.options.hOffset}},{key:"_getVOffset",value:function(){return"top"===this.position||"bottom"===this.position?this.options.vOffset+this.options.tooltipHeight:this.options.vOffset}},{key:"_buildTemplate",value:function(t){var e=(this.options.tooltipClass+" "+this.options.positionClass+" "+this.options.templateClasses).trim();return r()("<div></div>").addClass(e).attr({role:"tooltip","aria-hidden":!0,"data-is-active":!1,"data-is-focus":!1,id:t})}},{key:"_setPosition",value:function(){f(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"_setPosition",this).call(this,this.$element,this.template)}},{key:"show",value:function(){if("all"!==this.options.showOn&&!u.a.is(this.options.showOn))return!1;var t=this;this.template.css("visibility","hidden").show(),this._setPosition(),this.template.removeClass("top bottom left right").addClass(this.position),this.template.removeClass("align-top align-bottom align-left align-right align-center").addClass("align-"+this.alignment),this.$element.trigger("closeme.zf.tooltip",this.template.attr("id")),this.template.attr({"data-is-active":!0,"aria-hidden":!1}),t.isActive=!0,this.template.stop().hide().css("visibility","").fadeIn(this.options.fadeInDuration,function(){}),this.$element.trigger("show.zf.tooltip")}},{key:"hide",value:function(){var t=this;this.template.stop().attr({"aria-hidden":!0,"data-is-active":!1}).fadeOut(this.options.fadeOutDuration,function(){t.isActive=!1,t.isClick=!1}),this.$element.trigger("hide.zf.tooltip")}},{key:"_events",value:function(){var t=this,e=(this.template,!1);this.options.disableHover||this.$element.on("mouseenter.zf.tooltip",function(e){t.isActive||(t.timeout=setTimeout(function(){t.show()},t.options.hoverDelay))}).on("mouseleave.zf.tooltip",function(i){clearTimeout(t.timeout),(!e||t.isClick&&!t.options.clickOpen)&&t.hide()}),this.options.clickOpen?this.$element.on("mousedown.zf.tooltip",function(e){e.stopImmediatePropagation(),t.isClick||(t.isClick=!0,!t.options.disableHover&&t.$element.attr("tabindex")||t.isActive||t.show())}):this.$element.on("mousedown.zf.tooltip",function(e){e.stopImmediatePropagation(),t.isClick=!0}),this.options.disableForTouch||this.$element.on("tap.zf.tooltip touchend.zf.tooltip",function(e){t.isActive?t.hide():t.show()}),this.$element.on({"close.zf.trigger":this.hide.bind(this)}),this.$element.on("focus.zf.tooltip",function(i){if(e=!0,t.isClick)return t.options.clickOpen||(e=!1),!1;t.show()}).on("focusout.zf.tooltip",function(i){e=!1,t.isClick=!1,t.hide()}).on("resizeme.zf.trigger",function(){t.isActive&&t._setPosition()})}},{key:"toggle",value:function(){this.isActive?this.hide():this.show()}},{key:"_destroy",value:function(){this.$element.attr("title",this.template.text()).off(".zf.trigger .zf.tooltip").removeClass("has-tip top right left").removeAttr("aria-describedby aria-haspopup data-disable-hover data-resize data-toggle data-tooltip data-yeti-box"),this.template.remove()}}]),e}(h.a);p.defaults={disableForTouch:!1,hoverDelay:200,fadeInDuration:150,fadeOutDuration:150,disableHover:!1,templateClasses:"",tooltipClass:"tooltip",triggerClass:"has-tip",showOn:"small",template:"",tipText:"",touchCloseText:"Tap to close.",clickOpen:!0,positionClass:"",position:"auto",alignment:"auto",allowOverlap:!1,allowBottomOverlap:!1,vOffset:0,hOffset:0,tooltipHeight:14,tooltipWidth:12,allowHtml:!1}},function(t,e,i){t.exports=i(19)}]); |
| \ No newline at end of file | |
public/javascripts/vendor/jquery.sticky.js
+288
-0
| @@ | @@ -0,0 +1,288 @@ |
| + | // Sticky Plugin v1.0.4 for jQuery |
| + | // ============= |
| + | // Author: Anthony Garand |
| + | // Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk) |
| + | // Improvements by Leonardo C. Daronco (daronco) |
| + | // Created: 02/14/2011 |
| + | // Date: 07/20/2015 |
| + | // Website: http://stickyjs.com/ |
| + | // Description: Makes an element on the page stick on the screen as you scroll |
| + | // It will only set the 'top' and 'position' of your element, you |
| + | // might need to adjust the width in some cases. |
| + | |
| + | (function (factory) { |
| + | if (typeof define === 'function' && define.amd) { |
| + | // AMD. Register as an anonymous module. |
| + | define(['jquery'], factory); |
| + | } else if (typeof module === 'object' && module.exports) { |
| + | // Node/CommonJS |
| + | module.exports = factory(require('jquery')); |
| + | } else { |
| + | // Browser globals |
| + | factory(jQuery); |
| + | } |
| + | }(function ($) { |
| + | var slice = Array.prototype.slice; // save ref to original slice() |
| + | var splice = Array.prototype.splice; // save ref to original slice() |
| + | |
| + | var defaults = { |
| + | topSpacing: 0, |
| + | bottomSpacing: 0, |
| + | className: 'is-sticky', |
| + | wrapperClassName: 'sticky-wrapper', |
| + | center: false, |
| + | getWidthFrom: '', |
| + | widthFromWrapper: true, // works only when .getWidthFrom is empty |
| + | responsiveWidth: false, |
| + | zIndex: 'inherit' |
| + | }, |
| + | $window = $(window), |
| + | $document = $(document), |
| + | sticked = [], |
| + | windowHeight = $window.height(), |
| + | scroller = function() { |
| + | var scrollTop = $window.scrollTop(), |
| + | documentHeight = $document.height(), |
| + | dwh = documentHeight - windowHeight, |
| + | extra = (scrollTop > dwh) ? dwh - scrollTop : 0; |
| + | |
| + | for (var i = 0, l = sticked.length; i < l; i++) { |
| + | var s = sticked[i], |
| + | elementTop = s.stickyWrapper.offset().top, |
| + | etse = elementTop - s.topSpacing - extra; |
| + | |
| + | //update height in case of dynamic content |
| + | s.stickyWrapper.css('height', s.stickyElement.outerHeight()); |
| + | |
| + | if (scrollTop <= etse) { |
| + | if (s.currentTop !== null) { |
| + | s.stickyElement |
| + | .css({ |
| + | 'width': '', |
| + | 'position': '', |
| + | 'top': '', |
| + | 'z-index': '' |
| + | }); |
| + | s.stickyElement.parent().removeClass(s.className); |
| + | s.stickyElement.trigger('sticky-end', [s]); |
| + | s.currentTop = null; |
| + | } |
| + | } |
| + | else { |
| + | var newTop = documentHeight - s.stickyElement.outerHeight() |
| + | - s.topSpacing - s.bottomSpacing - scrollTop - extra; |
| + | if (newTop < 0) { |
| + | newTop = newTop + s.topSpacing; |
| + | } else { |
| + | newTop = s.topSpacing; |
| + | } |
| + | if (s.currentTop !== newTop) { |
| + | var newWidth; |
| + | if (s.getWidthFrom) { |
| + | padding = s.stickyElement.innerWidth() - s.stickyElement.width(); |
| + | newWidth = $(s.getWidthFrom).width() - padding || null; |
| + | } else if (s.widthFromWrapper) { |
| + | newWidth = s.stickyWrapper.width(); |
| + | } |
| + | if (newWidth == null) { |
| + | newWidth = s.stickyElement.width(); |
| + | } |
| + | s.stickyElement |
| + | .css('width', newWidth) |
| + | .css('position', 'fixed') |
| + | .css('top', newTop) |
| + | .css('z-index', s.zIndex); |
| + | |
| + | s.stickyElement.parent().addClass(s.className); |
| + | |
| + | if (s.currentTop === null) { |
| + | s.stickyElement.trigger('sticky-start', [s]); |
| + | } else { |
| + | // sticky is started but it have to be repositioned |
| + | s.stickyElement.trigger('sticky-update', [s]); |
| + | } |
| + | |
| + | if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) { |
| + | // just reached bottom || just started to stick but bottom is already reached |
| + | s.stickyElement.trigger('sticky-bottom-reached', [s]); |
| + | } else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) { |
| + | // sticky is started && sticked at topSpacing && overflowing from top just finished |
| + | s.stickyElement.trigger('sticky-bottom-unreached', [s]); |
| + | } |
| + | |
| + | s.currentTop = newTop; |
| + | } |
| + | |
| + | // Check if sticky has reached end of container and stop sticking |
| + | var stickyWrapperContainer = s.stickyWrapper.parent(); |
| + | var unstick = (s.stickyElement.offset().top + s.stickyElement.outerHeight() >= stickyWrapperContainer.offset().top + stickyWrapperContainer.outerHeight()) && (s.stickyElement.offset().top <= s.topSpacing); |
| + | |
| + | if( unstick ) { |
| + | s.stickyElement |
| + | .css('position', 'absolute') |
| + | .css('top', '') |
| + | .css('bottom', 0) |
| + | .css('z-index', ''); |
| + | } else { |
| + | s.stickyElement |
| + | .css('position', 'fixed') |
| + | .css('top', newTop) |
| + | .css('bottom', '') |
| + | .css('z-index', s.zIndex); |
| + | } |
| + | } |
| + | } |
| + | }, |
| + | resizer = function() { |
| + | windowHeight = $window.height(); |
| + | |
| + | for (var i = 0, l = sticked.length; i < l; i++) { |
| + | var s = sticked[i]; |
| + | var newWidth = null; |
| + | if (s.getWidthFrom) { |
| + | if (s.responsiveWidth) { |
| + | newWidth = $(s.getWidthFrom).width(); |
| + | } |
| + | } else if(s.widthFromWrapper) { |
| + | newWidth = s.stickyWrapper.width(); |
| + | } |
| + | if (newWidth != null) { |
| + | s.stickyElement.css('width', newWidth); |
| + | } |
| + | } |
| + | }, |
| + | methods = { |
| + | init: function(options) { |
| + | return this.each(function() { |
| + | var o = $.extend({}, defaults, options); |
| + | var stickyElement = $(this); |
| + | |
| + | var stickyId = stickyElement.attr('id'); |
| + | var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName; |
| + | var wrapper = $('<div></div>') |
| + | .attr('id', wrapperId) |
| + | .addClass(o.wrapperClassName); |
| + | |
| + | stickyElement.wrapAll(function() { |
| + | if ($(this).parent("#" + wrapperId).length == 0) { |
| + | return wrapper; |
| + | } |
| + | }); |
| + | |
| + | var stickyWrapper = stickyElement.parent(); |
| + | |
| + | if (o.center) { |
| + | stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"}); |
| + | } |
| + | |
| + | if (stickyElement.css("float") === "right") { |
| + | stickyElement.css({"float":"none"}).parent().css({"float":"right"}); |
| + | } |
| + | |
| + | o.stickyElement = stickyElement; |
| + | o.stickyWrapper = stickyWrapper; |
| + | o.currentTop = null; |
| + | |
| + | sticked.push(o); |
| + | |
| + | methods.setWrapperHeight(this); |
| + | methods.setupChangeListeners(this); |
| + | }); |
| + | }, |
| + | |
| + | setWrapperHeight: function(stickyElement) { |
| + | var element = $(stickyElement); |
| + | var stickyWrapper = element.parent(); |
| + | if (stickyWrapper) { |
| + | stickyWrapper.css('height', element.outerHeight()); |
| + | } |
| + | }, |
| + | |
| + | setupChangeListeners: function(stickyElement) { |
| + | if (window.MutationObserver) { |
| + | var mutationObserver = new window.MutationObserver(function(mutations) { |
| + | if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) { |
| + | methods.setWrapperHeight(stickyElement); |
| + | } |
| + | }); |
| + | mutationObserver.observe(stickyElement, {subtree: true, childList: true}); |
| + | } else { |
| + | if (window.addEventListener) { |
| + | stickyElement.addEventListener('DOMNodeInserted', function() { |
| + | methods.setWrapperHeight(stickyElement); |
| + | }, false); |
| + | stickyElement.addEventListener('DOMNodeRemoved', function() { |
| + | methods.setWrapperHeight(stickyElement); |
| + | }, false); |
| + | } else if (window.attachEvent) { |
| + | stickyElement.attachEvent('onDOMNodeInserted', function() { |
| + | methods.setWrapperHeight(stickyElement); |
| + | }); |
| + | stickyElement.attachEvent('onDOMNodeRemoved', function() { |
| + | methods.setWrapperHeight(stickyElement); |
| + | }); |
| + | } |
| + | } |
| + | }, |
| + | update: scroller, |
| + | unstick: function(options) { |
| + | return this.each(function() { |
| + | var that = this; |
| + | var unstickyElement = $(that); |
| + | |
| + | var removeIdx = -1; |
| + | var i = sticked.length; |
| + | while (i-- > 0) { |
| + | if (sticked[i].stickyElement.get(0) === that) { |
| + | splice.call(sticked,i,1); |
| + | removeIdx = i; |
| + | } |
| + | } |
| + | if(removeIdx !== -1) { |
| + | unstickyElement.unwrap(); |
| + | unstickyElement |
| + | .css({ |
| + | 'width': '', |
| + | 'position': '', |
| + | 'top': '', |
| + | 'float': '', |
| + | 'z-index': '' |
| + | }) |
| + | ; |
| + | } |
| + | }); |
| + | } |
| + | }; |
| + | |
| + | // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): |
| + | if (window.addEventListener) { |
| + | window.addEventListener('scroll', scroller, false); |
| + | window.addEventListener('resize', resizer, false); |
| + | } else if (window.attachEvent) { |
| + | window.attachEvent('onscroll', scroller); |
| + | window.attachEvent('onresize', resizer); |
| + | } |
| + | |
| + | $.fn.sticky = function(method) { |
| + | if (methods[method]) { |
| + | return methods[method].apply(this, slice.call(arguments, 1)); |
| + | } else if (typeof method === 'object' || !method ) { |
| + | return methods.init.apply( this, arguments ); |
| + | } else { |
| + | $.error('Method ' + method + ' does not exist on jQuery.sticky'); |
| + | } |
| + | }; |
| + | |
| + | $.fn.unstick = function(method) { |
| + | if (methods[method]) { |
| + | return methods[method].apply(this, slice.call(arguments, 1)); |
| + | } else if (typeof method === 'object' || !method ) { |
| + | return methods.unstick.apply( this, arguments ); |
| + | } else { |
| + | $.error('Method ' + method + ' does not exist on jQuery.sticky'); |
| + | } |
| + | }; |
| + | $(function() { |
| + | setTimeout(scroller, 0); |
| + | }); |
| + | })); |
public/javascripts/vendor/what-input.js
+212
-0
| @@ | @@ -0,0 +1,212 @@ |
| + | ;(function(root, factory) { |
| + | if (typeof define === 'function' && define.amd) { |
| + | define([], function() { |
| + | return (factory()); |
| + | }); |
| + | } else if (typeof exports === 'object') { |
| + | module.exports = factory(); |
| + | } else { |
| + | root.whatInput = factory(); |
| + | } |
| + | } (this, function() { |
| + | 'use strict'; |
| + | |
| + | |
| + | /* |
| + | --------------- |
| + | variables |
| + | --------------- |
| + | */ |
| + | |
| + | // array of actively pressed keys |
| + | var activeKeys = []; |
| + | |
| + | // cache document.body |
| + | var body = document.body; |
| + | |
| + | // boolean: true if touch buffer timer is running |
| + | var buffer = false; |
| + | |
| + | // the last used input type |
| + | var currentInput = null; |
| + | |
| + | // array of form elements that take keyboard input |
| + | var formInputs = [ |
| + | 'input', |
| + | 'select', |
| + | 'textarea' |
| + | ]; |
| + | |
| + | // user-set flag to allow typing in form fields to be recorded |
| + | var formTyping = body.hasAttribute('data-whatinput-formtyping'); |
| + | |
| + | // mapping of events to input types |
| + | var inputMap = { |
| + | 'keydown': 'keyboard', |
| + | 'mousedown': 'mouse', |
| + | 'mouseenter': 'mouse', |
| + | 'touchstart': 'touch', |
| + | 'pointerdown': 'pointer', |
| + | 'MSPointerDown': 'pointer' |
| + | }; |
| + | |
| + | // array of all used input types |
| + | var inputTypes = []; |
| + | |
| + | // mapping of key codes to common name |
| + | var keyMap = { |
| + | 9: 'tab', |
| + | 13: 'enter', |
| + | 16: 'shift', |
| + | 27: 'esc', |
| + | 32: 'space', |
| + | 37: 'left', |
| + | 38: 'up', |
| + | 39: 'right', |
| + | 40: 'down' |
| + | }; |
| + | |
| + | // map of IE 10 pointer events |
| + | var pointerMap = { |
| + | 2: 'touch', |
| + | 3: 'touch', // treat pen like touch |
| + | 4: 'mouse' |
| + | }; |
| + | |
| + | // touch buffer timer |
| + | var timer; |
| + | |
| + | |
| + | /* |
| + | --------------- |
| + | functions |
| + | --------------- |
| + | */ |
| + | |
| + | function bufferInput(event) { |
| + | clearTimeout(timer); |
| + | |
| + | setInput(event); |
| + | |
| + | buffer = true; |
| + | timer = setTimeout(function() { |
| + | buffer = false; |
| + | }, 1000); |
| + | } |
| + | |
| + | function immediateInput(event) { |
| + | if (!buffer) setInput(event); |
| + | } |
| + | |
| + | function setInput(event) { |
| + | var eventKey = key(event); |
| + | var eventTarget = target(event); |
| + | var value = inputMap[event.type]; |
| + | if (value === 'pointer') value = pointerType(event); |
| + | |
| + | if (currentInput !== value) { |
| + | if ( |
| + | // only if the user flag isn't set |
| + | !formTyping && |
| + | |
| + | // only if currentInput has a value |
| + | currentInput && |
| + | |
| + | // only if the input is `keyboard` |
| + | value === 'keyboard' && |
| + | |
| + | // not if the key is `TAB` |
| + | keyMap[eventKey] !== 'tab' && |
| + | |
| + | // only if the target is one of the elements in `formInputs` |
| + | formInputs.indexOf(eventTarget.nodeName.toLowerCase()) >= 0 |
| + | ) { |
| + | // ignore keyboard typing on form elements |
| + | } else { |
| + | currentInput = value; |
| + | body.setAttribute('data-whatinput', currentInput); |
| + | |
| + | if (inputTypes.indexOf(currentInput) === -1) inputTypes.push(currentInput); |
| + | } |
| + | } |
| + | |
| + | if (value === 'keyboard') logKeys(eventKey); |
| + | } |
| + | |
| + | function key(event) { |
| + | return (event.keyCode) ? event.keyCode : event.which; |
| + | } |
| + | |
| + | function target(event) { |
| + | return event.target || event.srcElement; |
| + | } |
| + | |
| + | function pointerType(event) { |
| + | return (typeof event.pointerType === 'number') ? pointerMap[event.pointerType] : event.pointerType; |
| + | } |
| + | |
| + | // keyboard logging |
| + | function logKeys(eventKey) { |
| + | if (activeKeys.indexOf(keyMap[eventKey]) === -1 && keyMap[eventKey]) activeKeys.push(keyMap[eventKey]); |
| + | } |
| + | |
| + | function unLogKeys(event) { |
| + | var eventKey = key(event); |
| + | var arrayPos = activeKeys.indexOf(keyMap[eventKey]); |
| + | |
| + | if (arrayPos !== -1) activeKeys.splice(arrayPos, 1); |
| + | } |
| + | |
| + | |
| + | /* |
| + | --------------- |
| + | init |
| + | --------------- |
| + | */ |
| + | |
| + | (function bindEvents() { |
| + | |
| + | // pointer/mouse |
| + | var mouseEvent = 'mousedown'; |
| + | |
| + | if (window.PointerEvent) { |
| + | mouseEvent = 'pointerdown'; |
| + | } else if (window.MSPointerEvent) { |
| + | mouseEvent = 'MSPointerDown'; |
| + | } |
| + | |
| + | body.addEventListener(mouseEvent, immediateInput); |
| + | body.addEventListener('mouseenter', immediateInput); |
| + | |
| + | // touch |
| + | if ('ontouchstart' in document.documentElement) body.addEventListener('touchstart', bufferInput); |
| + | |
| + | // keyboard |
| + | body.addEventListener('keydown', immediateInput); |
| + | body.addEventListener('keyup', unLogKeys); |
| + | |
| + | })(); |
| + | |
| + | |
| + | /* |
| + | --------------- |
| + | api |
| + | --------------- |
| + | */ |
| + | |
| + | return { |
| + | |
| + | // returns string: the current input type |
| + | ask: function() { return currentInput; }, |
| + | |
| + | // returns array: currently pressed keys |
| + | keys: function() { return activeKeys; }, |
| + | |
| + | // returns array: all the detected input types |
| + | types: function() { return inputTypes; }, |
| + | |
| + | // accepts string: manually set the input type |
| + | set: setInput |
| + | }; |
| + | |
| + | })); |
public/javascripts/vendor/what-input.min.js
+1
-0
| @@ | @@ -0,0 +1 @@ |
| + | !function(e,t){"function"==typeof define&&define.amd?define([],function(){return t()}):"object"==typeof exports?module.exports=t():e.whatInput=t()}(this,function(){"use strict";function e(e){clearTimeout(s),n(e),f=!0,s=setTimeout(function(){f=!1},1e3)}function t(e){f||n(e)}function n(e){var t=o(e),n=r(e),d=w[e.type];"pointer"===d&&(d=i(e)),p!==d&&(!y&&p&&"keyboard"===d&&"tab"!==v[t]&&m.indexOf(n.nodeName.toLowerCase())>=0||(p=d,a.setAttribute("data-whatinput",p),-1===h.indexOf(p)&&h.push(p))),"keyboard"===d&&u(t)}function o(e){return e.keyCode?e.keyCode:e.which}function r(e){return e.target||e.srcElement}function i(e){return"number"==typeof e.pointerType?b[e.pointerType]:e.pointerType}function u(e){-1===c.indexOf(v[e])&&v[e]&&c.push(v[e])}function d(e){var t=o(e),n=c.indexOf(v[t]);-1!==n&&c.splice(n,1)}var s,c=[],a=document.body,f=!1,p=null,m=["input","select","textarea"],y=a.hasAttribute("data-whatinput-formtyping"),w={keydown:"keyboard",mousedown:"mouse",mouseenter:"mouse",touchstart:"touch",pointerdown:"pointer",MSPointerDown:"pointer"},h=[],v={9:"tab",13:"enter",16:"shift",27:"esc",32:"space",37:"left",38:"up",39:"right",40:"down"},b={2:"touch",3:"touch",4:"mouse"};return function(){var n="mousedown";window.PointerEvent?n="pointerdown":window.MSPointerEvent&&(n="MSPointerDown"),a.addEventListener(n,t),a.addEventListener("mouseenter",t),"ontouchstart"in document.documentElement&&a.addEventListener("touchstart",e),a.addEventListener("keydown",t),a.addEventListener("keyup",d)}(),{ask:function(){return p},keys:function(){return c},types:function(){return h},set:n}}); |
public/stylesheets/_settings.scss
+869
-0
| @@ | @@ -0,0 +1,869 @@ |
| + | // 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. Card |
| + | // 15. Close Button |
| + | // 16. Drilldown |
| + | // 17. Dropdown |
| + | // 18. Dropdown Menu |
| + | // 19. Flexbox Utilities |
| + | // 20. Forms |
| + | // 21. Label |
| + | // 22. Media Object |
| + | // 23. Menu |
| + | // 24. Meter |
| + | // 25. Off-canvas |
| + | // 26. Orbit |
| + | // 27. Pagination |
| + | // 28. Progress Bar |
| + | // 29. Prototype Arrow |
| + | // 30. Prototype Border-Box |
| + | // 31. Prototype Border-None |
| + | // 32. Prototype Bordered |
| + | // 33. Prototype Display |
| + | // 34. Prototype Font-Styling |
| + | // 35. Prototype List-Style-Type |
| + | // 36. Prototype Overflow |
| + | // 37. Prototype Position |
| + | // 38. Prototype Rounded |
| + | // 39. Prototype Separator |
| + | // 40. Prototype Shadow |
| + | // 41. Prototype Sizing |
| + | // 42. Prototype Spacing |
| + | // 43. Prototype Text-Decoration |
| + | // 44. Prototype Text-Transformation |
| + | // 45. Prototype Text-Utilities |
| + | // 46. Responsive Embed |
| + | // 47. Reveal |
| + | // 48. Slider |
| + | // 49. Switch |
| + | // 50. Table |
| + | // 51. Tabs |
| + | // 52. Thumbnail |
| + | // 53. Title Bar |
| + | // 54. Tooltip |
| + | // 55. Top Bar |
| + | // 56. Xy Grid |
| + | |
| + | @import 'foundation6/util/util'; |
| + | |
| + | // 1. Global |
| + | // --------- |
| + | |
| + | $global-font-size: 100%; |
| + | $global-width: rem-calc(1200); |
| + | $global-lineheight: 1.5; |
| + | $foundation-palette: ( |
| + | primary: #1779ba, |
| + | secondary: #767676, |
| + | success: #3adb76, |
| + | warning: #ffae00, |
| + | alert: #cc4b37, |
| + | ); |
| + | $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-position: 1rem; |
| + | $global-weight-normal: normal; |
| + | $global-weight-bold: bold; |
| + | $global-radius: 0; |
| + | $global-menu-padding: 0.7rem 1rem; |
| + | $global-menu-nested-margin: 1rem; |
| + | $global-text-direction: ltr; |
| + | $global-flexbox: false; |
| + | $global-prototype-breakpoints: false; |
| + | $global-button-cursor: auto; |
| + | $global-color-pick-contrast-tolerance: 0; |
| + | $print-transparent-backgrounds: true; |
| + | |
| + | @include add-foundation-colors; |
| + | |
| + | // 2. Breakpoints |
| + | // -------------- |
| + | |
| + | $breakpoints: ( |
| + | small: 0, |
| + | medium: 640px, |
| + | large: 1024px, |
| + | xlarge: 1200px, |
| + | xxlarge: 1440px, |
| + | ); |
| + | $print-breakpoint: large; |
| + | $breakpoint-classes: (small medium large); |
| + | |
| + | // 3. The Grid |
| + | // ----------- |
| + | |
| + | $grid-row-width: $global-width; |
| + | $grid-column-count: 12; |
| + | $grid-column-gutter: ( |
| + | small: 20px, |
| + | medium: 30px, |
| + | ); |
| + | $grid-column-align-edge: true; |
| + | $grid-column-alias: 'columns'; |
| + | $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-color: inherit; |
| + | $header-lineheight: 1.4; |
| + | $header-margin-bottom: 0.5rem; |
| + | $header-styles: ( |
| + | small: ( |
| + | 'h1': ('font-size': 24), |
| + | 'h2': ('font-size': 20), |
| + | 'h3': ('font-size': 19), |
| + | 'h4': ('font-size': 18), |
| + | 'h5': ('font-size': 17), |
| + | 'h6': ('font-size': 16), |
| + | ), |
| + | medium: ( |
| + | 'h1': ('font-size': 48), |
| + | 'h2': ('font-size': 40), |
| + | 'h3': ('font-size': 31), |
| + | 'h4': ('font-size': 25), |
| + | 'h5': ('font-size': 20), |
| + | 'h6': ('font-size': 16), |
| + | ), |
| + | ); |
| + | $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; |
| + | $cite-pseudo-content: '\2014 \0020'; |
| + | $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: get-color(alert); |
| + | $form-label-color-invalid: get-color(alert); |
| + | $input-error-color: get-color(alert); |
| + | $input-error-font-size: rem-calc(12); |
| + | $input-error-font-weight: $global-weight-bold; |
| + | |
| + | // 7. Accordion |
| + | // ------------ |
| + | |
| + | $accordion-background: $white; |
| + | $accordion-plusminus: true; |
| + | $accordion-title-font-size: rem-calc(12); |
| + | $accordion-item-color: $primary-color; |
| + | $accordion-item-background-hover: $light-gray; |
| + | $accordion-item-padding: 1.25rem 1rem; |
| + | $accordion-content-background: $white; |
| + | $accordion-content-border: 1px solid $light-gray; |
| + | $accordion-content-color: $body-font-color; |
| + | $accordion-content-padding: 1rem; |
| + | |
| + | // 8. Accordion Menu |
| + | // ----------------- |
| + | |
| + | $accordionmenu-padding: $global-menu-padding; |
| + | $accordionmenu-nested-margin: $global-menu-nested-margin; |
| + | $accordionmenu-submenu-padding: $accordionmenu-padding; |
| + | $accordionmenu-arrows: true; |
| + | $accordionmenu-arrow-color: $primary-color; |
| + | $accordionmenu-item-background: null; |
| + | $accordionmenu-border: null; |
| + | $accordionmenu-submenu-toggle-background: null; |
| + | $accordion-submenu-toggle-border: $accordionmenu-border; |
| + | $accordionmenu-submenu-toggle-width: 40px; |
| + | $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width; |
| + | $accordionmenu-arrow-size: 6px; |
| + | |
| + | // 9. Badge |
| + | // -------- |
| + | |
| + | $badge-background: $primary-color; |
| + | $badge-color: $white; |
| + | $badge-color-alt: $black; |
| + | $badge-palette: $foundation-palette; |
| + | $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-separator: true; |
| + | $breadcrumbs-item-separator-item: '/'; |
| + | $breadcrumbs-item-separator-item-rtl: '\\'; |
| + | $breadcrumbs-item-separator-color: $medium-gray; |
| + | |
| + | // 11. Button |
| + | // ---------- |
| + | |
| + | $button-font-family: inherit; |
| + | $button-padding: 0.85em 1em; |
| + | $button-margin: 0 0 $global-margin 0; |
| + | $button-fill: solid; |
| + | $button-background: $primary-color; |
| + | $button-background-hover: scale-color($button-background, $lightness: -15%); |
| + | $button-color: $white; |
| + | $button-color-alt: $black; |
| + | $button-radius: $global-radius; |
| + | $button-hollow-border-width: 1px; |
| + | $button-sizes: ( |
| + | tiny: 0.6rem, |
| + | small: 0.75rem, |
| + | default: 0.9rem, |
| + | large: 1.25rem, |
| + | ); |
| + | $button-palette: $foundation-palette; |
| + | $button-opacity-disabled: 0.25; |
| + | $button-background-hover-lightness: -20%; |
| + | $button-hollow-hover-lightness: -50%; |
| + | $button-transition: background-color 0.25s ease-out, color 0.25s ease-out; |
| + | |
| + | // 12. Button Group |
| + | // ---------------- |
| + | |
| + | $buttongroup-margin: 1rem; |
| + | $buttongroup-spacing: 1px; |
| + | $buttongroup-child-selector: '.button'; |
| + | $buttongroup-expand-max: 6; |
| + | $buttongroup-radius-on-each: true; |
| + | |
| + | // 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. Card |
| + | // -------- |
| + | |
| + | $card-background: $white; |
| + | $card-font-color: $body-font-color; |
| + | $card-divider-background: $light-gray; |
| + | $card-border: 1px solid $light-gray; |
| + | $card-shadow: none; |
| + | $card-border-radius: $global-radius; |
| + | $card-padding: $global-padding; |
| + | $card-margin-bottom: $global-margin; |
| + | |
| + | // 15. Close Button |
| + | // ---------------- |
| + | |
| + | $closebutton-position: right top; |
| + | $closebutton-offset-horizontal: ( |
| + | small: 0.66rem, |
| + | medium: 1rem, |
| + | ); |
| + | $closebutton-offset-vertical: ( |
| + | small: 0.33em, |
| + | medium: 0.5rem, |
| + | ); |
| + | $closebutton-size: ( |
| + | small: 1.5em, |
| + | medium: 2em, |
| + | ); |
| + | $closebutton-lineheight: 1; |
| + | $closebutton-color: $dark-gray; |
| + | $closebutton-color-hover: $black; |
| + | |
| + | // 16. Drilldown |
| + | // ------------- |
| + | |
| + | $drilldown-transition: transform 0.15s linear; |
| + | $drilldown-arrows: true; |
| + | $drilldown-padding: $global-menu-padding; |
| + | $drilldown-nested-margin: 0; |
| + | $drilldown-background: $white; |
| + | $drilldown-submenu-padding: $drilldown-padding; |
| + | $drilldown-submenu-background: $white; |
| + | $drilldown-arrow-color: $primary-color; |
| + | $drilldown-arrow-size: 6px; |
| + | |
| + | // 17. Dropdown |
| + | // ------------ |
| + | |
| + | $dropdown-padding: 1rem; |
| + | $dropdown-background: $body-background; |
| + | $dropdown-border: 1px solid $medium-gray; |
| + | $dropdown-font-size: 1rem; |
| + | $dropdown-width: 300px; |
| + | $dropdown-radius: $global-radius; |
| + | $dropdown-sizes: ( |
| + | tiny: 100px, |
| + | small: 200px, |
| + | large: 400px, |
| + | ); |
| + | |
| + | // 18. Dropdown Menu |
| + | // ----------------- |
| + | |
| + | $dropdownmenu-arrows: true; |
| + | $dropdownmenu-arrow-color: $anchor-color; |
| + | $dropdownmenu-arrow-size: 6px; |
| + | $dropdownmenu-arrow-padding: 1.5rem; |
| + | $dropdownmenu-min-width: 300px; |
| + | $dropdownmenu-background: $white; |
| + | $dropdownmenu-submenu-background: $dropdownmenu-background; |
| + | $dropdownmenu-padding: $global-menu-padding; |
| + | $dropdownmenu-nested-margin: 0; |
| + | $dropdownmenu-submenu-padding: $dropdownmenu-padding; |
| + | $dropdownmenu-border: 1px solid $medium-gray; |
| + | $dropdown-menu-item-color-active: get-color(primary); |
| + | $dropdown-menu-item-background-active: transparent; |
| + | |
| + | // 19. Flexbox Utilities |
| + | // --------------------- |
| + | |
| + | $flex-source-ordering-count: 6; |
| + | $flexbox-responsive-breakpoints: true; |
| + | |
| + | // 20. 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: $black; |
| + | $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: $dark-gray; |
| + | $select-radius: $global-radius; |
| + | $input-color: $black; |
| + | $input-placeholder-color: $medium-gray; |
| + | $input-font-family: inherit; |
| + | $input-font-size: rem-calc(16); |
| + | $input-font-weight: $global-weight-normal; |
| + | $input-line-height: $global-lineheight; |
| + | $input-background: $white; |
| + | $input-background-focus: $white; |
| + | $input-background-disabled: $light-gray; |
| + | $input-border: 1px solid $medium-gray; |
| + | $input-border-focus: 1px solid $dark-gray; |
| + | $input-padding: $form-spacing / 2; |
| + | $input-shadow: inset 0 1px 2px rgba($black, 0.1); |
| + | $input-shadow-focus: 0 0 5px $medium-gray; |
| + | $input-cursor-disabled: not-allowed; |
| + | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; |
| + | $input-number-spinners: true; |
| + | $input-radius: $global-radius; |
| + | $form-button-radius: $global-radius; |
| + | |
| + | // 21. Label |
| + | // --------- |
| + | |
| + | $label-background: $primary-color; |
| + | $label-color: $white; |
| + | $label-color-alt: $black; |
| + | $label-palette: $foundation-palette; |
| + | $label-font-size: 0.8rem; |
| + | $label-padding: 0.33333rem 0.5rem; |
| + | $label-radius: $global-radius; |
| + | |
| + | // 22. Media Object |
| + | // ---------------- |
| + | |
| + | $mediaobject-margin-bottom: $global-margin; |
| + | $mediaobject-section-padding: $global-padding; |
| + | $mediaobject-image-width-stacked: 100%; |
| + | |
| + | // 23. Menu |
| + | // -------- |
| + | |
| + | $menu-margin: 0; |
| + | $menu-nested-margin: $global-menu-nested-margin; |
| + | $menu-items-padding: $global-menu-padding; |
| + | $menu-simple-margin: 1rem; |
| + | $menu-item-color-active: $white; |
| + | $menu-item-background-active: get-color(primary); |
| + | $menu-icon-spacing: 0.25rem; |
| + | $menu-item-background-hover: $light-gray; |
| + | $menu-state-back-compat: true; |
| + | $menu-centered-back-compat: true; |
| + | $menu-icons-back-compat: true; |
| + | |
| + | // 24. Meter |
| + | // --------- |
| + | |
| + | $meter-height: 1rem; |
| + | $meter-radius: $global-radius; |
| + | $meter-background: $medium-gray; |
| + | $meter-fill-good: $success-color; |
| + | $meter-fill-medium: $warning-color; |
| + | $meter-fill-bad: $alert-color; |
| + | |
| + | // 25. Off-canvas |
| + | // -------------- |
| + | |
| + | $offcanvas-sizes: ( |
| + | small: 250px, |
| + | ); |
| + | $offcanvas-vertical-sizes: ( |
| + | small: 250px, |
| + | ); |
| + | $offcanvas-background: $light-gray; |
| + | $offcanvas-shadow: 0 0 10px rgba($black, 0.7); |
| + | $offcanvas-inner-shadow-size: 20px; |
| + | $offcanvas-inner-shadow-color: rgba($black, 0.25); |
| + | $offcanvas-overlay-zindex: 11; |
| + | $offcanvas-push-zindex: 12; |
| + | $offcanvas-overlap-zindex: 13; |
| + | $offcanvas-reveal-zindex: 12; |
| + | $offcanvas-transition-length: 0.5s; |
| + | $offcanvas-transition-timing: ease; |
| + | $offcanvas-fixed-reveal: true; |
| + | $offcanvas-exit-background: rgba($white, 0.25); |
| + | $maincontent-class: 'off-canvas-content'; |
| + | |
| + | // 26. 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; |
| + | |
| + | // 27. 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: $white; |
| + | $pagination-item-color-disabled: $medium-gray; |
| + | $pagination-ellipsis-color: $black; |
| + | $pagination-mobile-items: false; |
| + | $pagination-mobile-current-item: false; |
| + | $pagination-arrows: true; |
| + | |
| + | // 28. Progress Bar |
| + | // ---------------- |
| + | |
| + | $progress-height: 1rem; |
| + | $progress-background: $medium-gray; |
| + | $progress-margin-bottom: $global-margin; |
| + | $progress-meter-background: $primary-color; |
| + | $progress-radius: $global-radius; |
| + | |
| + | // 29. Prototype Arrow |
| + | // ------------------- |
| + | |
| + | $prototype-arrow-directions: ( |
| + | down, |
| + | up, |
| + | right, |
| + | left |
| + | ); |
| + | $prototype-arrow-size: 0.4375rem; |
| + | $prototype-arrow-color: $black; |
| + | |
| + | // 30. Prototype Border-Box |
| + | // ------------------------ |
| + | |
| + | $prototype-border-box-breakpoints: $global-prototype-breakpoints; |
| + | |
| + | // 31. Prototype Border-None |
| + | // ------------------------- |
| + | |
| + | $prototype-border-none-breakpoints: $global-prototype-breakpoints; |
| + | |
| + | // 32. Prototype Bordered |
| + | // ---------------------- |
| + | |
| + | $prototype-bordered-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-border-width: rem-calc(1); |
| + | $prototype-border-type: solid; |
| + | $prototype-border-color: $medium-gray; |
| + | |
| + | // 33. Prototype Display |
| + | // --------------------- |
| + | |
| + | $prototype-display-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-display: ( |
| + | inline, |
| + | inline-block, |
| + | block, |
| + | table, |
| + | table-cell |
| + | ); |
| + | |
| + | // 34. Prototype Font-Styling |
| + | // -------------------------- |
| + | |
| + | $prototype-font-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-wide-letter-spacing: rem-calc(4); |
| + | $prototype-font-normal: $global-weight-normal; |
| + | $prototype-font-bold: $global-weight-bold; |
| + | |
| + | // 35. Prototype List-Style-Type |
| + | // ----------------------------- |
| + | |
| + | $prototype-list-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-style-type-unordered: ( |
| + | disc, |
| + | circle, |
| + | square |
| + | ); |
| + | $prototype-style-type-ordered: ( |
| + | decimal, |
| + | lower-alpha, |
| + | lower-latin, |
| + | lower-roman, |
| + | upper-alpha, |
| + | upper-latin, |
| + | upper-roman |
| + | ); |
| + | |
| + | // 36. Prototype Overflow |
| + | // ---------------------- |
| + | |
| + | $prototype-overflow-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-overflow: ( |
| + | visible, |
| + | hidden, |
| + | scroll |
| + | ); |
| + | |
| + | // 37. Prototype Position |
| + | // ---------------------- |
| + | |
| + | $prototype-position-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-position: ( |
| + | static, |
| + | relative, |
| + | absolute, |
| + | fixed |
| + | ); |
| + | $prototype-position-z-index: 975; |
| + | |
| + | // 38. Prototype Rounded |
| + | // --------------------- |
| + | |
| + | $prototype-rounded-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-border-radius: rem-calc(3); |
| + | |
| + | // 39. Prototype Separator |
| + | // ----------------------- |
| + | |
| + | $prototype-separator-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-separator-align: center; |
| + | $prototype-separator-height: rem-calc(2); |
| + | $prototype-separator-width: 3rem; |
| + | $prototype-separator-background: $primary-color; |
| + | $prototype-separator-margin-top: $global-margin; |
| + | |
| + | // 40. Prototype Shadow |
| + | // -------------------- |
| + | |
| + | $prototype-shadow-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), |
| + | 0 2px 10px 0 rgba(0,0,0,.12); |
| + | |
| + | // 41. Prototype Sizing |
| + | // -------------------- |
| + | |
| + | $prototype-sizing-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-sizing: ( |
| + | width, |
| + | height |
| + | ); |
| + | $prototype-sizes: ( |
| + | 25: 25%, |
| + | 50: 50%, |
| + | 75: 75%, |
| + | 100: 100% |
| + | ); |
| + | |
| + | // 42. Prototype Spacing |
| + | // --------------------- |
| + | |
| + | $prototype-spacing-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-spacers-count: 3; |
| + | |
| + | // 43. Prototype Text-Decoration |
| + | // ----------------------------- |
| + | |
| + | $prototype-decoration-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-text-decoration: ( |
| + | overline, |
| + | underline, |
| + | line-through, |
| + | ); |
| + | |
| + | // 44. Prototype Text-Transformation |
| + | // --------------------------------- |
| + | |
| + | $prototype-transformation-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-text-transformation: ( |
| + | lowercase, |
| + | uppercase, |
| + | capitalize |
| + | ); |
| + | |
| + | // 45. Prototype Text-Utilities |
| + | // ---------------------------- |
| + | |
| + | $prototype-utilities-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-text-overflow: ellipsis; |
| + | |
| + | // 46. Responsive Embed |
| + | // -------------------- |
| + | |
| + | $responsive-embed-margin-bottom: rem-calc(16); |
| + | $responsive-embed-ratios: ( |
| + | default: 4 by 3, |
| + | widescreen: 16 by 9, |
| + | ); |
| + | |
| + | // 47. Reveal |
| + | // ---------- |
| + | |
| + | $reveal-background: $white; |
| + | $reveal-width: 600px; |
| + | $reveal-max-width: $global-width; |
| + | $reveal-padding: $global-padding; |
| + | $reveal-border: 1px solid $medium-gray; |
| + | $reveal-radius: $global-radius; |
| + | $reveal-zindex: 1005; |
| + | $reveal-overlay-background: rgba($black, 0.45); |
| + | |
| + | // 48. Slider |
| + | // ---------- |
| + | |
| + | $slider-width-vertical: 0.5rem; |
| + | $slider-transition: all 0.2s ease-in-out; |
| + | $slider-height: 0.5rem; |
| + | $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; |
| + | |
| + | // 49. 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; |
| + | |
| + | // 50. 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-is-striped: true; |
| + | $table-striped-background: smart-scale($table-background, $table-color-scale); |
| + | $table-stripe: even; |
| + | $table-head-background: smart-scale($table-background, $table-color-scale / 2); |
| + | $table-head-row-hover: darken($table-head-background, $table-hover-scale); |
| + | $table-foot-background: smart-scale($table-background, $table-color-scale); |
| + | $table-foot-row-hover: darken($table-foot-background, $table-hover-scale); |
| + | $table-head-font-color: $body-font-color; |
| + | $table-foot-font-color: $body-font-color; |
| + | $show-header-for-stacked: false; |
| + | $table-stack-breakpoint: medium; |
| + | |
| + | // 51. Tabs |
| + | // -------- |
| + | |
| + | $tab-margin: 0; |
| + | $tab-background: $white; |
| + | $tab-color: $primary-color; |
| + | $tab-background-active: $light-gray; |
| + | $tab-active-color: $primary-color; |
| + | $tab-item-font-size: rem-calc(12); |
| + | $tab-item-background-hover: $white; |
| + | $tab-item-padding: 1.25rem 1.5rem; |
| + | $tab-expand-max: 6; |
| + | $tab-content-background: $white; |
| + | $tab-content-border: $light-gray; |
| + | $tab-content-color: $body-font-color; |
| + | $tab-content-padding: 1rem; |
| + | |
| + | // 52. 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; |
| + | |
| + | // 53. Title Bar |
| + | // ------------- |
| + | |
| + | $titlebar-background: $black; |
| + | $titlebar-color: $white; |
| + | $titlebar-padding: 0.5rem; |
| + | $titlebar-text-font-weight: bold; |
| + | $titlebar-icon-color: $white; |
| + | $titlebar-icon-color-hover: $medium-gray; |
| + | $titlebar-icon-spacing: 0.25rem; |
| + | |
| + | // 54. Tooltip |
| + | // ----------- |
| + | |
| + | $has-tip-cursor: help; |
| + | $has-tip-font-weight: $global-weight-bold; |
| + | $has-tip-border-bottom: dotted 1px $dark-gray; |
| + | $tooltip-background-color: $black; |
| + | $tooltip-color: $white; |
| + | $tooltip-padding: 0.75rem; |
| + | $tooltip-max-width: 10rem; |
| + | $tooltip-font-size: $small-font-size; |
| + | $tooltip-pip-width: 0.75rem; |
| + | $tooltip-pip-height: $tooltip-pip-width * 0.866; |
| + | $tooltip-radius: $global-radius; |
| + | |
| + | // 55. Top Bar |
| + | // ----------- |
| + | |
| + | $topbar-padding: 0.5rem; |
| + | $topbar-background: $light-gray; |
| + | $topbar-submenu-background: $topbar-background; |
| + | $topbar-title-spacing: 0.5rem 1rem 0.5rem 0; |
| + | $topbar-input-width: 200px; |
| + | $topbar-unstack-breakpoint: medium; |
| + | |
| + | // 56. Xy Grid |
| + | // ----------- |
| + | |
| + | $xy-grid: false; |
| + | $grid-container: $global-width; |
| + | $grid-columns: 12; |
| + | $grid-margin-gutters: ( |
| + | small: 20px, |
| + | medium: 30px |
| + | ); |
| + | $grid-padding-gutters: $grid-margin-gutters; |
| + | $grid-container-padding: $grid-padding-gutters; |
| + | $grid-container-max: $global-width; |
| + | $xy-block-grid-max: 8; |
| + | |
public/stylesheets/app.scss
+68
-0
| @@ | @@ -0,0 +1,68 @@ |
| + | @charset 'utf-8'; |
| + | |
| + | @import 'settings'; |
| + | @import 'foundation6/foundation'; |
| + | |
| + | @include foundation-global-styles; |
| + | @include foundation-grid; |
| + | |
| + | @include foundation-typography; |
| + | @include foundation-forms; |
| + | @include foundation-button; |
| + | @include foundation-accordion; |
| + | @include foundation-accordion-menu; |
| + | @include foundation-badge; |
| + | @include foundation-breadcrumbs; |
| + | @include foundation-button-group; |
| + | @include foundation-callout; |
| + | @include foundation-card; |
| + | @include foundation-close-button; |
| + | @include foundation-menu; |
| + | @include foundation-menu-icon; |
| + | @include foundation-drilldown-menu; |
| + | @include foundation-dropdown; |
| + | @include foundation-dropdown-menu; |
| + | @include foundation-responsive-embed; |
| + | @include foundation-label; |
| + | @include foundation-media-object; |
| + | @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; |
| + | @include foundation-visibility-classes; |
| + | @include foundation-float-classes; |
| + | |
| + | |
| + | body, html { |
| + | height: 100%; |
| + | background: none; |
| + | } |
| + | |
| + | html { |
| + | background: image-url('/images/body-bg.jpg') no-repeat center center fixed; |
| + | -webkit-background-size: cover; |
| + | -moz-background-size: cover; |
| + | -o-background-size: cover; |
| + | background-size: cover; |
| + | } |
| + | |
| + | div.wrapper { |
| + | background: #fff; |
| + | padding-top: rem-calc(10); |
| + | } |
| + | |
| + | body.index { |
| + | .row { |
| + | // max-width: rem-calc(1200); |
| + | } |
| + | } |
public/stylesheets/foundation6/_global.scss
+249
-0
| @@ | @@ -0,0 +1,249 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | // sass-lint:disable force-attribute-nesting, force-pseudo-nesting, no-color-literals, no-qualifying-elements |
| + | |
| + | //// |
| + | /// @group global |
| + | //// |
| + | |
| + | /// 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; |
| + | |
| + | /// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`. |
| + | /// @type Map |
| + | $foundation-palette: ( |
| + | primary: #1779ba, |
| + | secondary: #767676, |
| + | success: #3adb76, |
| + | warning: #ffae00, |
| + | alert: #cc4b37, |
| + | ) !default; |
| + | |
| + | /// Color used for light gray UI items. |
| + | /// @type Color |
| + | $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 value used for positioning on components. |
| + | /// @type Number |
| + | $global-position: 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; |
| + | |
| + | /// Global value used for all menu styles. Can be overwritten at individual menu component level. |
| + | /// @type Number |
| + | $global-menu-padding: 0.7rem 1rem !default; |
| + | |
| + | /// Global value used for all menu styles. Nested margin for submenu. |
| + | $global-menu-nested-margin: 1rem !default; |
| + | |
| + | /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`. |
| + | /// @type Keyword |
| + | $global-text-direction: ltr !default; |
| + | |
| + | /// Enables flexbox for components that support it. |
| + | /// @type Boolean |
| + | $global-flexbox: false !default; |
| + | |
| + | /// Enabled responsive breakpoints for prototypes if applicable |
| + | /// @type Boolean |
| + | $global-prototype-breakpoints: false !default; |
| + | |
| + | /// Button cursor's value, `auto` by default |
| + | /// @type Keyword |
| + | $global-button-cursor: auto !default; |
| + | |
| + | @if not map-has-key($foundation-palette, primary) { |
| + | @error 'In $foundation-palette, you must have a color named "primary".'; |
| + | } |
| + | |
| + | // Internal variables used for text direction |
| + | $global-left: if($global-text-direction == rtl, right, left); |
| + | $global-right: if($global-text-direction == rtl, left, right); |
| + | |
| + | /// Global tolerance for color pick contrast. |
| + | /// @type Number |
| + | $global-color-pick-contrast-tolerance: 0 !default; |
| + | |
| + | // Internal variables used for colors |
| + | $primary-color: get-color(primary); |
| + | $secondary-color: get-color(secondary); |
| + | $success-color: get-color(success); |
| + | $warning-color: get-color(warning); |
| + | $alert-color: get-color(alert); |
| + | |
| + | @mixin foundation-global-styles { |
| + | @include -zf-normalize; |
| + | |
| + | // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript |
| + | .foundation-mq { |
| + | font-family: '#{-zf-bp-serialize($breakpoints)}'; |
| + | } |
| + | |
| + | html { |
| + | box-sizing: border-box; |
| + | font-size: $global-font-size; |
| + | } |
| + | |
| + | // Set box-sizing globally to handle padding and border widths |
| + | *, |
| + | *::before, |
| + | *::after { |
| + | box-sizing: inherit; |
| + | } |
| + | |
| + | // Default body styles |
| + | body { |
| + | margin: 0; |
| + | padding: 0; |
| + | |
| + | background: $body-background; |
| + | |
| + | font-family: $body-font-family; |
| + | font-weight: $global-weight-normal; |
| + | line-height: $global-lineheight; |
| + | color: $body-font-color; |
| + | |
| + | @if ($body-antialiased) { |
| + | -webkit-font-smoothing: antialiased; |
| + | -moz-osx-font-smoothing: grayscale; |
| + | } |
| + | } |
| + | |
| + | img { |
| + | // Get rid of gap under images by making them display: inline-block; by default |
| + | display: inline-block; |
| + | vertical-align: middle; |
| + | |
| + | // Grid defaults to get images and embeds to work properly |
| + | max-width: 100%; |
| + | height: auto; |
| + | -ms-interpolation-mode: bicubic; |
| + | } |
| + | |
| + | // 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 { |
| + | box-sizing: border-box; |
| + | width: 100%; |
| + | border-radius: $global-radius; |
| + | } |
| + | |
| + | // Styles Google Maps and MapQuest embeds properly |
| + | // sass-lint:disable-line no-ids |
| + | .map_canvas, |
| + | .mqa-display { |
| + | img, |
| + | embed, |
| + | object { |
| + | max-width: none !important; |
| + | } |
| + | } |
| + | |
| + | // Reset <button> styles created by most browsers |
| + | button { |
| + | @include disable-mouse-outline; |
| + | padding: 0; |
| + | appearance: none; |
| + | border: 0; |
| + | border-radius: $global-radius; |
| + | background: transparent; |
| + | line-height: 1; |
| + | cursor: $global-button-cursor; |
| + | } |
| + | |
| + | // Prevent text overflow on pre |
| + | pre { |
| + | overflow: auto; |
| + | } |
| + | |
| + | // Make reset inherit font-family instead of settings sans-serif |
| + | button, |
| + | input, |
| + | optgroup, |
| + | select, |
| + | textarea { |
| + | font-family: inherit; |
| + | } |
| + | |
| + | // Internal classes to show/hide elements in JavaScript |
| + | .is-visible { |
| + | display: block !important; |
| + | } |
| + | |
| + | .is-hidden { |
| + | display: none !important; |
| + | } |
| + | } |
| + | |
| + | /// Loads normalize.css. |
| + | /// @access private |
| + | @mixin -zf-normalize { |
| + | @include normalize(); |
| + | } |
public/stylesheets/foundation6/_vendor/normalize-scss/sass/_normalize.scss
+3
-0
| @@ | @@ -0,0 +1,3 @@ |
| + | @import 'normalize/variables'; |
| + | @import 'normalize/vertical-rhythm'; |
| + | @import 'normalize/normalize-mixin'; |
public/stylesheets/foundation6/_vendor/normalize-scss/sass/normalize/_import-now.scss
+11
-0
| @@ | @@ -0,0 +1,11 @@ |
| + | // Import Now |
| + | // |
| + | // If you import this module directly, it will immediately output all the CSS |
| + | // needed to normalize default HTML elements across all browsers. |
| + | // |
| + | // ``` |
| + | // @import "normalize/import-now"; |
| + | // ``` |
| + | |
| + | @import '../normalize'; |
| + | @include normalize(); |
public/stylesheets/foundation6/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss
+676
-0
| @@ | @@ -0,0 +1,676 @@ |
| + | // Helper function for the normalize() mixin. |
| + | @function _normalize-include($section, $exclude: null) { |
| + | // Initialize the global variables needed by this function. |
| + | @if not global_variable_exists(_normalize-include) { |
| + | $_normalize-include: () !global; |
| + | $_normalize-exclude: () !global; |
| + | } |
| + | // Since we are given 2 parameters, set the global variables. |
| + | @if $exclude != null { |
| + | $include: $section; |
| + | // Sass doesn't have static variables, so the work-around is to stuff these |
| + | // values into global variables so we can access them in future calls. |
| + | $_normalize-include: if(type-of($include) == 'list', $include, ($include)) !global; |
| + | $_normalize-exclude: if(type-of($exclude) == 'list', $exclude, ($exclude)) !global; |
| + | @return true; |
| + | } |
| + | |
| + | // Check if $section is in the $include list. |
| + | @if index($_normalize-include, $section) { |
| + | @return true; |
| + | } |
| + | // If $include is set to (all), make sure $section is not in $exclude. |
| + | @else if not index($_normalize-exclude, $section) and index($_normalize-include, all) { |
| + | @return true; |
| + | } |
| + | @return false; |
| + | } |
| + | |
| + | @mixin normalize($include: (all), $exclude: ()) { |
| + | // Initialize the helper function by passing it this mixin's parameters. |
| + | $init: _normalize-include($include, $exclude); |
| + | |
| + | // If we've customized any font variables, we'll need extra properties. |
| + | @if $base-font-size != 16px |
| + | or $base-line-height != 24px |
| + | or $base-unit != 'em' |
| + | or $h1-font-size != 2 * $base-font-size |
| + | or $h2-font-size != 1.5 * $base-font-size |
| + | or $h3-font-size != 1.17 * $base-font-size |
| + | or $h4-font-size != 1 * $base-font-size |
| + | or $h5-font-size != 0.83 * $base-font-size |
| + | or $h6-font-size != 0.67 * $base-font-size { |
| + | $normalize-vertical-rhythm: true !global; |
| + | } |
| + | |
| + | /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ |
| + | |
| + | @if _normalize-include(document) { |
| + | /* Document |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * 1. Change the default font family in all browsers (opinionated). |
| + | * 2. Correct the line height in all browsers. |
| + | * 3. Prevent adjustments of font size after orientation changes in |
| + | * IE on Windows Phone and in iOS. |
| + | */ |
| + | |
| + | html { |
| + | font-family: $base-font-family; /* 1 */ |
| + | @if $normalize-vertical-rhythm { |
| + | // Correct old browser bug that prevented accessible resizing of text |
| + | // when root font-size is set with px or em. |
| + | font-size: ($base-font-size / 16px) * 100%; |
| + | line-height: ($base-line-height / $base-font-size) * 1em; /* 2 */ |
| + | } |
| + | @else { |
| + | line-height: 1.15; /* 2 */ |
| + | } |
| + | -ms-text-size-adjust: 100%; /* 3 */ |
| + | -webkit-text-size-adjust: 100%; /* 3 */ |
| + | } |
| + | } |
| + | |
| + | @if _normalize-include(sections) { |
| + | /* Sections |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * Remove the margin in all browsers (opinionated). |
| + | */ |
| + | |
| + | body { |
| + | margin: 0; |
| + | } |
| + | |
| + | /** |
| + | * Add the correct display in IE 9-. |
| + | */ |
| + | |
| + | article, |
| + | aside, |
| + | footer, |
| + | header, |
| + | nav, |
| + | section { |
| + | display: block; |
| + | } |
| + | |
| + | /** |
| + | * Correct the font size and margin on `h1` elements within `section` and |
| + | * `article` contexts in Chrome, Firefox, and Safari. |
| + | */ |
| + | |
| + | h1 { |
| + | @include normalize-font-size($h1-font-size); |
| + | @if $normalize-vertical-rhythm { |
| + | @include normalize-line-height($h1-font-size); |
| + | } |
| + | |
| + | @if $normalize-vertical-rhythm { |
| + | /* Set 1 unit of vertical rhythm on the top and bottom margins. */ |
| + | @include normalize-margin(1 0, $h1-font-size); |
| + | } |
| + | @else { |
| + | margin: 0.67em 0; |
| + | } |
| + | } |
| + | |
| + | @if $normalize-vertical-rhythm { |
| + | h2 { |
| + | @include normalize-font-size($h2-font-size); |
| + | @include normalize-line-height($h2-font-size); |
| + | @include normalize-margin(1 0, $h2-font-size); |
| + | } |
| + | |
| + | h3 { |
| + | @include normalize-font-size($h3-font-size); |
| + | @include normalize-line-height($h3-font-size); |
| + | @include normalize-margin(1 0, $h3-font-size); |
| + | } |
| + | |
| + | h4 { |
| + | @include normalize-font-size($h4-font-size); |
| + | @include normalize-line-height($h4-font-size); |
| + | @include normalize-margin(1 0, $h4-font-size); |
| + | } |
| + | |
| + | h5 { |
| + | @include normalize-font-size($h5-font-size); |
| + | @include normalize-line-height($h5-font-size); |
| + | @include normalize-margin(1 0, $h5-font-size); |
| + | } |
| + | |
| + | h6 { |
| + | @include normalize-font-size($h6-font-size); |
| + | @include normalize-line-height($h6-font-size); |
| + | @include normalize-margin(1 0, $h6-font-size); |
| + | } |
| + | } |
| + | } |
| + | |
| + | @if _normalize-include(grouping) { |
| + | /* Grouping content |
| + | ========================================================================== */ |
| + | |
| + | @if $normalize-vertical-rhythm { |
| + | /** |
| + | * Set 1 unit of vertical rhythm on the top and bottom margin. |
| + | */ |
| + | |
| + | blockquote { |
| + | @include normalize-margin(1 $indent-amount); |
| + | } |
| + | |
| + | dl, |
| + | ol, |
| + | ul { |
| + | @include normalize-margin(1 0); |
| + | } |
| + | |
| + | /** |
| + | * Turn off margins on nested lists. |
| + | */ |
| + | |
| + | ol, |
| + | ul { |
| + | ol, |
| + | ul { |
| + | margin: 0; |
| + | } |
| + | } |
| + | |
| + | dd { |
| + | margin: 0 0 0 $indent-amount; |
| + | } |
| + | |
| + | ol, |
| + | ul { |
| + | padding: 0 0 0 $indent-amount; |
| + | } |
| + | } |
| + | |
| + | /** |
| + | * Add the correct display in IE 9-. |
| + | */ |
| + | |
| + | figcaption, |
| + | figure { |
| + | display: block; |
| + | } |
| + | |
| + | /** |
| + | * Add the correct margin in IE 8. |
| + | */ |
| + | |
| + | figure { |
| + | @if $normalize-vertical-rhythm { |
| + | @include normalize-margin(1 $indent-amount); |
| + | } |
| + | @else { |
| + | margin: 1em $indent-amount; |
| + | } |
| + | } |
| + | |
| + | /** |
| + | * 1. Add the correct box sizing in Firefox. |
| + | * 2. Show the overflow in Edge and IE. |
| + | */ |
| + | |
| + | hr { |
| + | box-sizing: content-box; /* 1 */ |
| + | height: 0; /* 1 */ |
| + | overflow: visible; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Add the correct display in IE. |
| + | */ |
| + | |
| + | main { |
| + | display: block; |
| + | } |
| + | |
| + | @if $normalize-vertical-rhythm { |
| + | /** |
| + | * Set 1 unit of vertical rhythm on the top and bottom margin. |
| + | */ |
| + | |
| + | p, |
| + | pre { |
| + | @include normalize-margin(1 0); |
| + | } |
| + | } |
| + | |
| + | /** |
| + | * 1. Correct the inheritance and scaling of font size in all browsers. |
| + | * 2. Correct the odd `em` font sizing in all browsers. |
| + | */ |
| + | |
| + | pre { |
| + | font-family: monospace, monospace; /* 1 */ |
| + | font-size: 1em; /* 2 */ |
| + | } |
| + | } |
| + | |
| + | @if _normalize-include(links) { |
| + | /* Links |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * 1. Remove the gray background on active links in IE 10. |
| + | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. |
| + | */ |
| + | |
| + | a { |
| + | background-color: transparent; /* 1 */ |
| + | -webkit-text-decoration-skip: objects; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Remove the outline on focused links when they are also active or hovered |
| + | * in all browsers (opinionated). |
| + | */ |
| + | |
| + | a:active, |
| + | a:hover { |
| + | outline-width: 0; |
| + | } |
| + | } |
| + | |
| + | @if _normalize-include(text) { |
| + | /* Text-level semantics |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * 1. Remove the bottom border in Firefox 39-. |
| + | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
| + | */ |
| + | |
| + | abbr[title] { |
| + | border-bottom: none; /* 1 */ |
| + | text-decoration: underline; /* 2 */ |
| + | text-decoration: underline dotted; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. |
| + | */ |
| + | |
| + | b, |
| + | strong { |
| + | font-weight: inherit; |
| + | } |
| + | |
| + | /** |
| + | * Add the correct font weight in Chrome, Edge, and Safari. |
| + | */ |
| + | |
| + | b, |
| + | strong { |
| + | font-weight: bolder; |
| + | } |
| + | |
| + | /** |
| + | * 1. Correct the inheritance and scaling of font size in all browsers. |
| + | * 2. Correct the odd `em` font sizing in all browsers. |
| + | */ |
| + | |
| + | code, |
| + | kbd, |
| + | samp { |
| + | font-family: monospace, monospace; /* 1 */ |
| + | font-size: 1em; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Add the correct font style in Android 4.3-. |
| + | */ |
| + | |
| + | dfn { |
| + | font-style: italic; |
| + | } |
| + | |
| + | /** |
| + | * Add the correct background and color in IE 9-. |
| + | */ |
| + | |
| + | mark { |
| + | background-color: #ff0; |
| + | color: #000; |
| + | } |
| + | |
| + | /** |
| + | * Add the correct font size in all browsers. |
| + | */ |
| + | |
| + | small { |
| + | font-size: 80%; |
| + | } |
| + | |
| + | /** |
| + | * Prevent `sub` and `sup` elements from affecting the line height in |
| + | * all browsers. |
| + | */ |
| + | |
| + | sub, |
| + | sup { |
| + | font-size: 75%; |
| + | line-height: 0; |
| + | position: relative; |
| + | vertical-align: baseline; |
| + | } |
| + | |
| + | sub { |
| + | bottom: -0.25em; |
| + | } |
| + | |
| + | sup { |
| + | top: -0.5em; |
| + | } |
| + | } |
| + | |
| + | @if _normalize-include(embedded) { |
| + | /* Embedded content |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * Add the correct display in IE 9-. |
| + | */ |
| + | |
| + | audio, |
| + | video { |
| + | display: inline-block; |
| + | } |
| + | |
| + | /** |
| + | * Add the correct display in iOS 4-7. |
| + | */ |
| + | |
| + | audio:not([controls]) { |
| + | display: none; |
| + | height: 0; |
| + | } |
| + | |
| + | /** |
| + | * Remove the border on images inside links in IE 10-. |
| + | */ |
| + | |
| + | img { |
| + | border-style: none; |
| + | } |
| + | |
| + | /** |
| + | * Hide the overflow in IE. |
| + | */ |
| + | |
| + | svg:not(:root) { |
| + | overflow: hidden; |
| + | } |
| + | } |
| + | |
| + | @if _normalize-include(forms) { |
| + | /* Forms |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * 1. Change the font styles in all browsers (opinionated). |
| + | * 2. Remove the margin in Firefox and Safari. |
| + | */ |
| + | |
| + | button, |
| + | input, |
| + | optgroup, |
| + | select, |
| + | textarea { |
| + | font-family: $base-font-family; /* 1 */ |
| + | font-size: 100%; /* 1 */ |
| + | @if $normalize-vertical-rhythm { |
| + | line-height: ($base-line-height / $base-font-size) * 1em; /* 1 */ |
| + | } |
| + | @else { |
| + | line-height: 1.15; /* 1 */ |
| + | } |
| + | margin: 0; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Show the overflow in IE. |
| + | */ |
| + | |
| + | button { |
| + | overflow: visible; |
| + | } |
| + | |
| + | /** |
| + | * Remove the inheritance of text transform in Edge, Firefox, and IE. |
| + | * 1. Remove the inheritance of text transform in Firefox. |
| + | */ |
| + | |
| + | button, |
| + | select { /* 1 */ |
| + | text-transform: none; |
| + | } |
| + | |
| + | /** |
| + | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` |
| + | * controls in Android 4. |
| + | * 2. Correct the inability to style clickable types in iOS and Safari. |
| + | */ |
| + | |
| + | button, |
| + | html [type="button"], /* 1 */ |
| + | [type="reset"], |
| + | [type="submit"] { |
| + | -webkit-appearance: button; /* 2 */ |
| + | } |
| + | |
| + | button, |
| + | [type="button"], |
| + | [type="reset"], |
| + | [type="submit"] { |
| + | |
| + | /** |
| + | * Remove the inner border and padding in Firefox. |
| + | */ |
| + | |
| + | &::-moz-focus-inner { |
| + | border-style: none; |
| + | padding: 0; |
| + | } |
| + | |
| + | /** |
| + | * Restore the focus styles unset by the previous rule. |
| + | */ |
| + | |
| + | &:-moz-focusring { |
| + | outline: 1px dotted ButtonText; |
| + | } |
| + | } |
| + | |
| + | /** |
| + | * Show the overflow in Edge. |
| + | */ |
| + | |
| + | input { |
| + | overflow: visible; |
| + | } |
| + | |
| + | /** |
| + | * 1. Add the correct box sizing in IE 10-. |
| + | * 2. Remove the padding in IE 10-. |
| + | */ |
| + | |
| + | [type="checkbox"], |
| + | [type="radio"] { |
| + | box-sizing: border-box; /* 1 */ |
| + | padding: 0; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Correct the cursor style of increment and decrement buttons in Chrome. |
| + | */ |
| + | |
| + | [type="number"]::-webkit-inner-spin-button, |
| + | [type="number"]::-webkit-outer-spin-button { |
| + | height: auto; |
| + | } |
| + | |
| + | /** |
| + | * 1. Correct the odd appearance in Chrome and Safari. |
| + | * 2. Correct the outline style in Safari. |
| + | */ |
| + | |
| + | [type="search"] { |
| + | -webkit-appearance: textfield; /* 1 */ |
| + | outline-offset: -2px; /* 2 */ |
| + | |
| + | /** |
| + | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. |
| + | */ |
| + | |
| + | &::-webkit-search-cancel-button, |
| + | &::-webkit-search-decoration { |
| + | -webkit-appearance: none; |
| + | } |
| + | } |
| + | |
| + | /** |
| + | * 1. Correct the inability to style clickable types in iOS and Safari. |
| + | * 2. Change font properties to `inherit` in Safari. |
| + | */ |
| + | |
| + | ::-webkit-file-upload-button { |
| + | -webkit-appearance: button; /* 1 */ |
| + | font: inherit; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Change the border, margin, and padding in all browsers (opinionated). |
| + | */ |
| + | |
| + | fieldset { |
| + | border: 1px solid #c0c0c0; |
| + | margin: 0 2px; |
| + | padding: 0.35em 0.625em 0.75em; |
| + | } |
| + | |
| + | /** |
| + | * 1. Correct the text wrapping in Edge and IE. |
| + | * 2. Correct the color inheritance from `fieldset` elements in IE. |
| + | * 3. Remove the padding so developers are not caught out when they zero out |
| + | * `fieldset` elements in all browsers. |
| + | */ |
| + | |
| + | legend { |
| + | box-sizing: border-box; /* 1 */ |
| + | display: table; /* 1 */ |
| + | max-width: 100%; /* 1 */ |
| + | padding: 0; /* 3 */ |
| + | color: inherit; /* 2 */ |
| + | white-space: normal; /* 1 */ |
| + | } |
| + | |
| + | /** |
| + | * 1. Add the correct display in IE 9-. |
| + | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. |
| + | */ |
| + | |
| + | progress { |
| + | display: inline-block; /* 1 */ |
| + | vertical-align: baseline; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Remove the default vertical scrollbar in IE. |
| + | */ |
| + | |
| + | textarea { |
| + | overflow: auto; |
| + | } |
| + | } |
| + | |
| + | @if _normalize-include(interactive) { |
| + | /* Interactive |
| + | ========================================================================== */ |
| + | |
| + | /* |
| + | * Add the correct display in Edge, IE, and Firefox. |
| + | */ |
| + | |
| + | details { |
| + | display: block; |
| + | } |
| + | |
| + | /* |
| + | * Add the correct display in all browsers. |
| + | */ |
| + | |
| + | summary { |
| + | display: list-item; |
| + | } |
| + | |
| + | /* |
| + | * Add the correct display in IE 9-. |
| + | */ |
| + | |
| + | menu { |
| + | display: block; |
| + | |
| + | @if $normalize-vertical-rhythm { |
| + | /* |
| + | * 1. Set 1 unit of vertical rhythm on the top and bottom margin. |
| + | * 2. Set consistent space for the list style image. |
| + | */ |
| + | |
| + | @include normalize-margin(1 0); /* 1 */ |
| + | padding: 0 0 0 $indent-amount; /* 2 */ |
| + | |
| + | /** |
| + | * Turn off margins on nested lists. |
| + | */ |
| + | |
| + | menu &, |
| + | ol &, |
| + | ul & { |
| + | margin: 0; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | @if _normalize-include(scripting) { |
| + | /* Scripting |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * Add the correct display in IE 9-. |
| + | */ |
| + | |
| + | canvas { |
| + | display: inline-block; |
| + | } |
| + | |
| + | /** |
| + | * Add the correct display in IE. |
| + | */ |
| + | |
| + | template { |
| + | display: none; |
| + | } |
| + | } |
| + | |
| + | @if _normalize-include(hidden) { |
| + | /* Hidden |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * Add the correct display in IE 10-. |
| + | */ |
| + | |
| + | [hidden] { |
| + | display: none; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/_vendor/normalize-scss/sass/normalize/_variables.scss
+36
-0
| @@ | @@ -0,0 +1,36 @@ |
| + | // |
| + | // Variables |
| + | // |
| + | // You can override the default values by setting the variables in your Sass |
| + | // before importing the normalize-scss library. |
| + | |
| + | // The font size set on the root html element. |
| + | $base-font-size: 16px !default; |
| + | |
| + | // The base line height determines the basic unit of vertical rhythm. |
| + | $base-line-height: 24px !default; |
| + | |
| + | // The length unit in which to output vertical rhythm values. |
| + | // Supported values: px, em, rem. |
| + | $base-unit: 'em' !default; |
| + | |
| + | // The default font family. |
| + | $base-font-family: sans-serif !default; |
| + | |
| + | // The font sizes for h1-h6. |
| + | $h1-font-size: 2 * $base-font-size !default; |
| + | $h2-font-size: 1.5 * $base-font-size !default; |
| + | $h3-font-size: 1.17 * $base-font-size !default; |
| + | $h4-font-size: 1 * $base-font-size !default; |
| + | $h5-font-size: 0.83 * $base-font-size !default; |
| + | $h6-font-size: 0.67 * $base-font-size !default; |
| + | |
| + | // The amount lists and blockquotes are indented. |
| + | $indent-amount: 40px !default; |
| + | |
| + | // The following variable controls whether normalize-scss will output |
| + | // font-sizes, line-heights and block-level top/bottom margins that form a basic |
| + | // vertical rhythm on the page, which differs from the original Normalize.css. |
| + | // However, changing any of the variables above will cause |
| + | // $normalize-vertical-rhythm to be automatically set to true. |
| + | $normalize-vertical-rhythm: false !default; |
public/stylesheets/foundation6/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss
+61
-0
| @@ | @@ -0,0 +1,61 @@ |
| + | // |
| + | // Vertical Rhythm |
| + | // |
| + | // This is the minimal amount of code needed to create vertical rhythm in our |
| + | // CSS. If you are looking for a robust solution, look at the excellent Typey |
| + | // library. @see https://github.com/jptaranto/typey |
| + | |
| + | @function normalize-rhythm($value, $relative-to: $base-font-size, $unit: $base-unit) { |
| + | @if unit($value) != px { |
| + | @error "The normalize vertical-rhythm module only supports px inputs. The typey library is better."; |
| + | } |
| + | @if $unit == rem { |
| + | @return ($value / $base-font-size) * 1rem; |
| + | } |
| + | @else if $unit == em { |
| + | @return ($value / $relative-to) * 1em; |
| + | } |
| + | @else { // $unit == px |
| + | @return $value; |
| + | } |
| + | } |
| + | |
| + | @mixin normalize-font-size($value, $relative-to: $base-font-size) { |
| + | @if unit($value) != 'px' { |
| + | @error "normalize-font-size() only supports px inputs. The typey library is better."; |
| + | } |
| + | font-size: normalize-rhythm($value, $relative-to); |
| + | } |
| + | |
| + | @mixin normalize-rhythm($property, $values, $relative-to: $base-font-size) { |
| + | $value-list: $values; |
| + | $sep: space; |
| + | @if type-of($values) == 'list' { |
| + | $sep: list-separator($values); |
| + | } |
| + | @else { |
| + | $value-list: append((), $values); |
| + | } |
| + | |
| + | $normalized-values: (); |
| + | @each $value in $value-list { |
| + | @if unitless($value) and $value != 0 { |
| + | $value: $value * normalize-rhythm($base-line-height, $relative-to); |
| + | } |
| + | $normalized-values: append($normalized-values, $value, $sep); |
| + | } |
| + | #{$property}: $normalized-values; |
| + | } |
| + | |
| + | @mixin normalize-margin($values, $relative-to: $base-font-size) { |
| + | @include normalize-rhythm(margin, $values, $relative-to); |
| + | } |
| + | |
| + | @mixin normalize-line-height($font-size, $min-line-padding: 2px) { |
| + | $lines: ceil($font-size / $base-line-height); |
| + | // If lines are cramped include some extra leading. |
| + | @if ($lines * $base-line-height - $font-size) < ($min-line-padding * 2) { |
| + | $lines: $lines + 1; |
| + | } |
| + | @include normalize-rhythm(line-height, $lines, $font-size); |
| + | } |
public/stylesheets/foundation6/_vendor/sassy-lists/stylesheets/functions/_contain.scss
+31
-0
| @@ | @@ -0,0 +1,31 @@ |
| + | /// |
| + | /// Returns whether `$list` contains `$value`. |
| + | /// |
| + | /// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-contain |
| + | /// |
| + | /// @param {List} $list - list to check |
| + | /// @param {*} $value - value to look for |
| + | /// |
| + | /// @example |
| + | /// sl-contain(a b c, a) |
| + | /// // true |
| + | /// |
| + | /// @example |
| + | /// sl-contain(a b c, z) |
| + | /// // false |
| + | /// |
| + | /// @return {Bool} |
| + | /// |
| + | |
| + | @function sl-contain($list, $value) { |
| + | @return not not index($list, $value); |
| + | } |
| + | |
| + | /// |
| + | /// @requires sl-contain |
| + | /// @alias sl-contain |
| + | /// |
| + | |
| + | @function sl-include($list, $value) { |
| + | @return sl-contain($list, $value); |
| + | } |
public/stylesheets/foundation6/_vendor/sassy-lists/stylesheets/functions/_purge.scss
+38
-0
| @@ | @@ -0,0 +1,38 @@ |
| + | /// Removes all false and null values from `$list`. |
| + | /// |
| + | /// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-purge |
| + | /// |
| + | /// @requires sl-is-true |
| + | /// @requires sl-to-list |
| + | /// |
| + | /// @param {List} $list - list to purge |
| + | /// |
| + | /// @example |
| + | /// sl-purge(null a false b) |
| + | /// // a b |
| + | /// |
| + | /// @return {List} |
| + | /// |
| + | |
| + | @function sl-purge($list) { |
| + | $_: sl-missing-dependencies('sl-is-true', 'sl-to-list'); |
| + | |
| + | $result: (); |
| + | |
| + | @each $item in $list { |
| + | @if sl-is-true($item) { |
| + | $result: append($result, $item, list-separator($list)); |
| + | } |
| + | } |
| + | |
| + | @return sl-to-list($result); |
| + | } |
| + | |
| + | /// |
| + | /// @requires sl-purge |
| + | /// @alias sl-purge |
| + | /// |
| + | |
| + | @function sl-clean($list) { |
| + | @return sl-purge($list); |
| + | } |
public/stylesheets/foundation6/_vendor/sassy-lists/stylesheets/functions/_remove.scss
+31
-0
| @@ | @@ -0,0 +1,31 @@ |
| + | /// |
| + | /// Removes value(s) `$value` from `$list`. |
| + | /// |
| + | /// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-remove |
| + | /// |
| + | /// @requires sl-replace |
| + | /// |
| + | /// @param {List} $list - list to update |
| + | /// @param {*} $value - value to remove |
| + | /// |
| + | /// @example |
| + | /// sl-remove(a b c, a) |
| + | /// // b c |
| + | /// |
| + | /// @return {List} |
| + | /// |
| + | |
| + | @function sl-remove($list, $value) { |
| + | $_: sl-missing-dependencies('sl-replace'); |
| + | |
| + | @return sl-replace($list, $value, null); |
| + | } |
| + | |
| + | /// |
| + | /// @requires sl-remove |
| + | /// @alias sl-remove |
| + | /// |
| + | |
| + | @function sl-without($list, $value) { |
| + | @return sl-remove($list, $value); |
| + | } |
public/stylesheets/foundation6/_vendor/sassy-lists/stylesheets/functions/_replace.scss
+46
-0
| @@ | @@ -0,0 +1,46 @@ |
| + | /// |
| + | /// Replaces `$old` by `$new` in `$list`. |
| + | /// |
| + | /// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-replace |
| + | /// |
| + | /// @requires sl-is-true |
| + | /// @requires sl-purge |
| + | /// @requires sl-to-list |
| + | /// |
| + | /// @param {List} $list - list to update |
| + | /// @param {*} $old - value to replace |
| + | /// @param {*} $value - new value for $old |
| + | /// |
| + | /// @example |
| + | /// sl-replace(a b c, b, z) |
| + | /// // a z c |
| + | /// |
| + | /// @example |
| + | /// sl-replace(a b c, y, z) |
| + | /// // a b c |
| + | /// |
| + | /// @return {List} |
| + | /// |
| + | |
| + | @function sl-replace($list, $old, $value) { |
| + | $_: sl-missing-dependencies('sl-is-true', 'sl-purge', 'sl-to-list'); |
| + | |
| + | $running: true; |
| + | |
| + | @while $running { |
| + | $index: index($list, $old); |
| + | |
| + | @if not $index { |
| + | $running: false; |
| + | } |
| + | |
| + | @else { |
| + | $list: set-nth($list, $index, $value); |
| + | } |
| + | |
| + | } |
| + | |
| + | $list: if(sl-is-true($value), $list, sl-purge($list)); |
| + | |
| + | @return sl-to-list($list); |
| + | } |
public/stylesheets/foundation6/_vendor/sassy-lists/stylesheets/functions/_to-list.scss
+27
-0
| @@ | @@ -0,0 +1,27 @@ |
| + | /// |
| + | /// Casts `$value` into a list. |
| + | /// |
| + | /// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-to-list |
| + | /// |
| + | /// @param {*} $value - value to cast to list |
| + | /// @param {String} $separator [space] - separator to use |
| + | /// |
| + | /// @example |
| + | /// sl-to-list(a b c, comma) |
| + | /// // a, b, c |
| + | /// |
| + | /// @return {List} |
| + | /// |
| + | |
| + | @function sl-to-list($value, $separator: list-separator($value)) { |
| + | @return join((), $value, $separator); |
| + | } |
| + | |
| + | /// |
| + | /// @requires sl-to-list |
| + | /// @alias sl-to-list |
| + | /// |
| + | |
| + | @function sl-listify($value) { |
| + | @return sl-to-list($value); |
| + | } |
public/stylesheets/foundation6/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss
+25
-0
| @@ | @@ -0,0 +1,25 @@ |
| + | /// |
| + | /// Checks whether `$functions` exist in global scope. |
| + | /// |
| + | /// @access private |
| + | /// |
| + | /// @param {ArgList} $functions - list of functions to check for |
| + | /// |
| + | /// @return {Bool} Whether or not there are missing dependencies |
| + | /// |
| + | |
| + | @function sl-missing-dependencies($functions...) { |
| + | $missing-dependencies: (); |
| + | |
| + | @each $function in $functions { |
| + | @if not function-exists($function) { |
| + | $missing-dependencies: append($missing-dependencies, $function, comma); |
| + | } |
| + | } |
| + | |
| + | @if length($missing-dependencies) > 0 { |
| + | @error 'Unmet dependencies! The following functions are required: #{$missing-dependencies}.'; |
| + | } |
| + | |
| + | @return length($missing-dependencies) > 0; |
| + | } |
public/stylesheets/foundation6/_vendor/sassy-lists/stylesheets/helpers/_true.scss
+13
-0
| @@ | @@ -0,0 +1,13 @@ |
| + | /// |
| + | /// Returns truthiness of `$value`. |
| + | /// |
| + | /// @access private |
| + | /// |
| + | /// @param {*} $value - value to check |
| + | /// |
| + | /// @return {Bool} |
| + | /// |
| + | |
| + | @function sl-is-true($value) { |
| + | @return if($value == null, false, $value and $value != null and $value != '' and $value != ()); |
| + | } |
public/stylesheets/foundation6/components/_accordion-menu.scss
+171
-0
| @@ | @@ -0,0 +1,171 @@ |
| + | //// |
| + | /// @group accordion-menu |
| + | //// |
| + | |
| + | /// Sets accordion menu padding. |
| + | /// @type Number |
| + | $accordionmenu-padding: $global-menu-padding !default; |
| + | |
| + | /// Sets accordion menu nested margin |
| + | /// @type Number |
| + | $accordionmenu-nested-margin: $global-menu-nested-margin !default; |
| + | |
| + | /// Sets accordion menu submenu padding. |
| + | /// @type Number |
| + | $accordionmenu-submenu-padding: $accordionmenu-padding !default; |
| + | |
| + | /// Sets if accordion menus have the default arrow styles. |
| + | /// @type Boolean |
| + | $accordionmenu-arrows: true !default; |
| + | |
| + | /// Sets accordion menu arrow color if arrow is used. |
| + | /// @type Color |
| + | $accordionmenu-arrow-color: $primary-color !default; |
| + | |
| + | /// Sets accordion menu item padding. |
| + | /// @type Color |
| + | $accordionmenu-item-background: null !default; |
| + | |
| + | /// Sets accordion menu item border. |
| + | /// @type Color |
| + | $accordionmenu-border: null !default; |
| + | |
| + | /// Sets accordion menu item padding. |
| + | /// @type Color |
| + | $accordionmenu-submenu-toggle-background: null !default; |
| + | |
| + | /// Sets accordion menu item padding. |
| + | /// @type List |
| + | $accordion-submenu-toggle-border: $accordionmenu-border !default; |
| + | |
| + | /// Sets accordion menu submenu toggle background width. |
| + | /// @type Number |
| + | $accordionmenu-submenu-toggle-width: 40px !default; |
| + | |
| + | /// Sets accordion menu submenu toggle background height. |
| + | /// @type Number |
| + | $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width !default; |
| + | |
| + | /// Sets accordion menu arrow size if arrow is used. |
| + | /// @type Length |
| + | $accordionmenu-arrow-size: 6px !default; |
| + | |
| + | @mixin zf-accordion-menu-left-right-arrows { |
| + | .is-accordion-submenu-parent:not(.has-submenu-toggle) > a { |
| + | position: relative; |
| + | |
| + | &::after { |
| + | @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down); |
| + | position: absolute; |
| + | top: 50%; |
| + | margin-top: -1 * ($accordionmenu-arrow-size / 2); |
| + | #{$global-right}: 1rem; |
| + | } |
| + | } |
| + | &.align-left .is-accordion-submenu-parent > a::after { |
| + | left: auto; |
| + | right: 1rem; |
| + | } |
| + | &.align-right .is-accordion-submenu-parent > a::after { |
| + | right: auto; |
| + | left: 1rem; |
| + | } |
| + | } |
| + | @mixin foundation-accordion-menu { |
| + | |
| + | .accordion-menu { |
| + | @if $accordionmenu-border { |
| + | border-bottom: $accordionmenu-border; |
| + | } |
| + | |
| + | li { |
| + | @if $accordionmenu-border { |
| + | border-top: $accordionmenu-border; |
| + | border-right: $accordionmenu-border; |
| + | border-left: $accordionmenu-border; |
| + | } |
| + | width: 100%; |
| + | } |
| + | |
| + | a { |
| + | @if $accordionmenu-item-background { |
| + | background: $accordionmenu-item-background; |
| + | } |
| + | padding: $accordionmenu-padding; |
| + | } |
| + | |
| + | .is-accordion-submenu a { |
| + | padding: $accordionmenu-submenu-padding; |
| + | } |
| + | |
| + | .nested.is-accordion-submenu { |
| + | @include menu-nested($accordionmenu-nested-margin); |
| + | } |
| + | |
| + | &.align-#{$global-right} { |
| + | .nested.is-accordion-submenu { |
| + | @include menu-nested($accordionmenu-nested-margin, right); |
| + | } |
| + | } |
| + | |
| + | @if $accordionmenu-arrows { |
| + | @include zf-accordion-menu-left-right-arrows; |
| + | |
| + | .is-accordion-submenu-parent[aria-expanded='true'] > a::after { |
| + | transform: rotate(180deg); |
| + | transform-origin: 50% 50%; |
| + | } |
| + | } |
| + | } |
| + | |
| + | .is-accordion-submenu li { |
| + | @if $accordionmenu-border { |
| + | border-right: 0; |
| + | border-left: 0; |
| + | } |
| + | } |
| + | |
| + | .is-accordion-submenu-parent { |
| + | position: relative; |
| + | } |
| + | |
| + | .has-submenu-toggle > a { |
| + | margin-#{$global-right}: $accordionmenu-submenu-toggle-width; |
| + | } |
| + | |
| + | // Submenu toggle |
| + | .submenu-toggle { |
| + | position: absolute; |
| + | top: 0; |
| + | #{$global-right}: 0; |
| + | cursor: pointer; |
| + | |
| + | width: $accordionmenu-submenu-toggle-width; |
| + | height: $accordionmenu-submenu-toggle-height; |
| + | |
| + | border-#{$global-left}: $accordion-submenu-toggle-border; |
| + | |
| + | @if $accordionmenu-submenu-toggle-background { |
| + | background: $accordionmenu-submenu-toggle-background; |
| + | } |
| + | |
| + | // Add the arrow to the toggle |
| + | &::after { |
| + | @include css-triangle(6px, $accordionmenu-arrow-color, down); |
| + | |
| + | top: 0; |
| + | bottom: 0; |
| + | margin: auto; |
| + | } |
| + | } |
| + | |
| + | // Rotate the arrow when menu is open |
| + | .submenu-toggle[aria-expanded='true']::after { |
| + | transform: scaleY(-1); |
| + | transform-origin: 50% 50%; |
| + | } |
| + | |
| + | .submenu-toggle-text { |
| + | @include element-invisible; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_accordion.scss
+155
-0
| @@ | @@ -0,0 +1,155 @@ |
| + | // 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; |
| + | |
| + | /// Font size of accordion titles. |
| + | /// @type Number |
| + | $accordion-title-font-size: rem-calc(12) !default; |
| + | |
| + | /// Default text color for items in a Menu. |
| + | /// @type Color |
| + | $accordion-item-color: $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: $body-font-color !default; |
| + | |
| + | /// Default padding for tab content. |
| + | /// @type Number | List |
| + | $accordion-content-padding: 1rem !default; |
| + | |
| + | /// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`. |
| + | @mixin accordion-container ( |
| + | $background: $accordion-background |
| + | ) { |
| + | margin-#{$global-left}: 0; |
| + | background: $background; |
| + | list-style-type: none; |
| + | &[disabled] { |
| + | .accordion-title { |
| + | cursor: not-allowed; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for the accordion item. Apply this to the list item within an accordion ul. |
| + | @mixin accordion-item { |
| + | &:first-child > :first-child { |
| + | border-radius: $global-radius $global-radius 0 0; |
| + | } |
| + | |
| + | &:last-child > :last-child { |
| + | border-radius: 0 0 $global-radius $global-radius; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item. |
| + | @mixin accordion-title ( |
| + | $padding: $accordion-item-padding, |
| + | $font-size: $accordion-title-font-size, |
| + | $color: $accordion-item-color, |
| + | $border: $accordion-content-border, |
| + | $background-hover: $accordion-item-background-hover |
| + | ) { |
| + | position: relative; |
| + | display: block; |
| + | padding: $padding; |
| + | |
| + | border: $border; |
| + | border-bottom: 0; |
| + | |
| + | font-size: $font-size; |
| + | line-height: 1; |
| + | color: $color; |
| + | |
| + | :last-child:not(.is-active) > & { |
| + | border-bottom: $border; |
| + | border-radius: 0 0 $global-radius $global-radius; |
| + | } |
| + | |
| + | &:hover, |
| + | &:focus { |
| + | background-color: $background-hover; |
| + | } |
| + | |
| + | @if $accordion-plusminus { |
| + | &::before { |
| + | position: absolute; |
| + | top: 50%; |
| + | #{$global-right}: 1rem; |
| + | margin-top: -0.5rem; |
| + | content: '+'; |
| + | } |
| + | |
| + | .is-active > &::before { |
| + | content: '\2013'; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for accordion content. Apply this to the content pane below an accordion item's title. |
| + | @mixin accordion-content ( |
| + | $padding: $accordion-content-padding, |
| + | $border: $accordion-content-border, |
| + | $background: $accordion-content-background, |
| + | $color: $accordion-content-color |
| + | ) { |
| + | display: none; |
| + | padding: $padding; |
| + | |
| + | border: $border; |
| + | border-bottom: 0; |
| + | background-color: $background; |
| + | |
| + | color: $color; |
| + | |
| + | :last-child > &:last-child { |
| + | border-bottom: $border; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-accordion { |
| + | .accordion { |
| + | @include accordion-container; |
| + | } |
| + | |
| + | .accordion-item { |
| + | @include accordion-item; |
| + | } |
| + | |
| + | .accordion-title { |
| + | @include accordion-title; |
| + | } |
| + | |
| + | .accordion-content { |
| + | @include accordion-content; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_badge.scss
+63
-0
| @@ | @@ -0,0 +1,63 @@ |
| + | // 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: $white !default; |
| + | |
| + | /// Alternate text color for badges. |
| + | /// @type Color |
| + | $badge-color-alt: $black !default; |
| + | |
| + | /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on. |
| + | /// @type Map |
| + | $badge-palette: $foundation-palette !default; |
| + | |
| + | /// Default padding inside badges. |
| + | /// @type Number |
| + | $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; |
| + | min-width: $badge-minwidth; |
| + | padding: $badge-padding; |
| + | |
| + | border-radius: 50%; |
| + | |
| + | font-size: $badge-font-size; |
| + | text-align: center; |
| + | } |
| + | |
| + | @mixin foundation-badge { |
| + | .badge { |
| + | @include badge; |
| + | |
| + | background: $badge-background; |
| + | color: $badge-color; |
| + | |
| + | @each $name, $color in $badge-palette { |
| + | &.#{$name} { |
| + | background: $color; |
| + | color: color-pick-contrast($color, ($badge-color, $badge-color-alt)); |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_breadcrumbs.scss
+117
-0
| @@ | @@ -0,0 +1,117 @@ |
| + | // 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 seperator between breadcrumb links. |
| + | /// @type Boolean |
| + | $breadcrumbs-item-separator: true !default; |
| + | |
| + | // If it exists $breadcrumbs-item-slash is used to build $breadcrumbs-item-separator. See the documentation. |
| + | @if variable-exists(breadcrumbs-item-slash) { |
| + | $breadcrumbs-item-separator: $breadcrumbs-item-slash; |
| + | } |
| + | |
| + | /// Used character for the breadcrumb separator. |
| + | /// @type Content |
| + | $breadcrumbs-item-separator-item: '/' !default; |
| + | |
| + | /// Used character for the breadcrumb separator in rtl mode. |
| + | /// @type Content |
| + | $breadcrumbs-item-separator-item-rtl: '\\' !default; |
| + | |
| + | /// Color of breadcrumb item. |
| + | /// @type Color |
| + | $breadcrumbs-item-separator-color: $medium-gray !default; |
| + | |
| + | // If it exists $breadcrumbs-item-slash-color is used to build $breadcrumbs-item-separator-color. See the documentation. |
| + | @if variable-exists(breadcrumbs-item-slash-color) { |
| + | $breadcrumbs-item-separator-color: $breadcrumbs-item-slash-color; |
| + | } |
| + | |
| + | /// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it. |
| + | @mixin breadcrumbs-container { |
| + | @include clearfix; |
| + | margin: $breadcrumbs-margin; |
| + | list-style: none; |
| + | |
| + | // Item wrapper |
| + | li { |
| + | float: #{$global-left}; |
| + | |
| + | font-size: $breadcrumbs-item-font-size; |
| + | color: $breadcrumbs-item-color-current; |
| + | cursor: default; |
| + | |
| + | @if $breadcrumbs-item-uppercase { |
| + | text-transform: uppercase; |
| + | } |
| + | |
| + | @if $breadcrumbs-item-separator { |
| + | // Need to escape the backslash |
| + | $separator: if($global-text-direction == 'ltr', $breadcrumbs-item-separator-item, $breadcrumbs-item-separator-item-rtl); |
| + | |
| + | &:not(:last-child)::after { |
| + | position: relative; |
| + | margin: 0 $breadcrumbs-item-margin; |
| + | opacity: 1; |
| + | content: $separator; |
| + | color: $breadcrumbs-item-separator-color; |
| + | } |
| + | } |
| + | @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; |
| + | cursor: not-allowed; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_button-group.scss
+253
-0
| @@ | @@ -0,0 +1,253 @@ |
| + | // 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 Number |
| + | $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; |
| + | |
| + | /// Determines if $button-radius is applied to each button or the button group as a whole. Use $global-radius in _settings.scss to change radius. |
| + | /// @type Boolean |
| + | $buttongroup-radius-on-each: true !default; |
| + | |
| + | /// Add styles for a button group container. |
| + | /// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group. |
| + | /// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group. |
| + | @mixin button-group( |
| + | $child-selector: $buttongroup-child-selector, |
| + | $spacing: $buttongroup-spacing |
| + | ) { |
| + | @include clearfix; |
| + | margin-bottom: $buttongroup-margin; |
| + | |
| + | @if $global-flexbox { |
| + | display: flex; |
| + | flex-wrap: nowrap; |
| + | align-items: stretch; |
| + | } |
| + | @else { |
| + | font-size: 0; |
| + | } |
| + | |
| + | #{$child-selector} { |
| + | margin: 0; |
| + | margin-#{$global-right}: $spacing; |
| + | margin-bottom: $spacing; |
| + | font-size: map-get($button-sizes, default); |
| + | |
| + | @if $global-flexbox { |
| + | flex: 0 0 auto; |
| + | } |
| + | |
| + | &:last-child { |
| + | margin-#{$global-right}: 0; |
| + | } |
| + | |
| + | @if not $buttongroup-radius-on-each { |
| + | border-radius: 0; |
| + | |
| + | &:first-child { |
| + | border-top-#{$global-left}-radius: $button-radius; |
| + | border-bottom-#{$global-left}-radius: $button-radius; |
| + | } |
| + | |
| + | &:last-child { |
| + | border-top-#{$global-right}-radius: $button-radius; |
| + | border-bottom-#{$global-right}-radius: $button-radius; |
| + | } |
| + | } |
| + | |
| + | } |
| + | } |
| + | |
| + | /// Creates a full-width button group, making each button equal width. |
| + | /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group. |
| + | /// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group. |
| + | @mixin button-group-expand( |
| + | $selector: $buttongroup-child-selector, |
| + | $spacing: $buttongroup-spacing, |
| + | $count: null |
| + | ) { |
| + | @if not $global-flexbox { |
| + | margin-#{$global-right}: -$spacing; |
| + | |
| + | &::before, |
| + | &::after { |
| + | display: none; |
| + | } |
| + | } |
| + | |
| + | #{$selector} { |
| + | @if $global-flexbox { |
| + | flex: 1 1 0px; // sass-lint:disable-line zero-unit |
| + | } |
| + | @else { |
| + | // One child |
| + | &:first-child:last-child { |
| + | width: 100%; |
| + | } |
| + | |
| + | // Two or more childreen |
| + | @for $i from 2 through $buttongroup-expand-max { |
| + | &:first-child:nth-last-child(#{$i}) { |
| + | &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} { |
| + | display: inline-block; |
| + | width: calc(#{percentage(1 / $i)} - #{$spacing}); |
| + | margin-#{$global-right}: $spacing; |
| + | |
| + | &:last-child { |
| + | margin-#{$global-right}: $spacing * -$buttongroup-expand-max; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// 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 |
| + | ) { |
| + | @if $global-flexbox { |
| + | flex-wrap: wrap; |
| + | } |
| + | |
| + | #{$selector} { |
| + | @if $global-flexbox { |
| + | flex: 0 0 100%; |
| + | } |
| + | @else { |
| + | width: 100%; |
| + | } |
| + | |
| + | &:last-child { |
| + | margin-bottom: 0; |
| + | } |
| + | |
| + | |
| + | @if not $buttongroup-radius-on-each { |
| + | border-radius: 0; |
| + | |
| + | &:first-child{ |
| + | border-top-#{$global-left}-radius: $global-radius; |
| + | border-top-#{$global-right}-radius: $global-radius; |
| + | } |
| + | |
| + | &:last-child { |
| + | margin-bottom: 0; |
| + | border-bottom-#{$global-left}-radius: $global-radius; |
| + | border-bottom-#{$global-right}-radius: $global-radius; |
| + | } |
| + | } |
| + | |
| + | } |
| + | } |
| + | |
| + | /// 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} { |
| + | @if $global-flexbox { |
| + | flex: 1 1 0px; // sass-lint:disable-line zero-unit |
| + | } |
| + | @else { |
| + | width: auto; |
| + | } |
| + | margin-bottom: 0; |
| + | |
| + | @if not $buttongroup-radius-on-each { |
| + | &:first-child { |
| + | border-top-#{$global-left}-radius: $global-radius; |
| + | border-top-#{$global-right}-radius: 0; |
| + | border-bottom-#{$global-left}-radius: $global-radius; |
| + | } |
| + | |
| + | &:last-child { |
| + | border-top-#{$global-right}-radius: $global-radius; |
| + | border-bottom-#{$global-right}-radius: $global-radius; |
| + | border-bottom-#{$global-left}-radius: 0; |
| + | } |
| + | } |
| + | |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-button-group { |
| + | .button-group { |
| + | @include button-group; |
| + | |
| + | // Sizes |
| + | @each $size, $value in map-remove($button-sizes, default) { |
| + | &.#{$size} #{$buttongroup-child-selector} { |
| + | font-size: $value; |
| + | } |
| + | } |
| + | |
| + | // Even-width Group |
| + | &.expanded { @include button-group-expand; } |
| + | |
| + | // Colors |
| + | @each $name, $color in $foundation-palette { |
| + | @if $button-fill != hollow { |
| + | &.#{$name} #{$buttongroup-child-selector} { |
| + | @include button-style($color, auto, auto); |
| + | } |
| + | } |
| + | @else { |
| + | &.#{$name} #{$buttongroup-child-selector} { |
| + | @include button-hollow; |
| + | @include button-hollow-style($color); |
| + | } |
| + | } |
| + | } |
| + | |
| + | &.stacked, |
| + | &.stacked-for-small, |
| + | &.stacked-for-medium { |
| + | @include button-group-stack; |
| + | } |
| + | |
| + | &.stacked-for-small { |
| + | @include breakpoint(medium) { |
| + | @include button-group-unstack; |
| + | } |
| + | } |
| + | |
| + | &.stacked-for-medium { |
| + | @include breakpoint(large) { |
| + | @include button-group-unstack; |
| + | } |
| + | } |
| + | |
| + | &.stacked-for-small.expanded { // sass-lint:disable-line force-element-nesting |
| + | @include breakpoint(small only) { |
| + | display: block; |
| + | |
| + | #{$buttongroup-child-selector} { |
| + | display: block; |
| + | margin-#{$global-right}: 0; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_button.scss
+385
-0
| @@ | @@ -0,0 +1,385 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group button |
| + | //// |
| + | |
| + | /// Font family for button elements. |
| + | /// @type Font |
| + | $button-font-family: inherit !default; |
| + | |
| + | /// Padding inside buttons. |
| + | /// @type List |
| + | $button-padding: 0.85em 1em !default; |
| + | |
| + | /// Margin around buttons. |
| + | /// @type List |
| + | $button-margin: 0 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: $white !default; |
| + | |
| + | /// Alternative font color for buttons. |
| + | /// @type List |
| + | $button-color-alt: $black !default; |
| + | |
| + | /// Border radius for buttons, defaulted to global-radius. |
| + | /// @type Number |
| + | $button-radius: $global-radius !default; |
| + | |
| + | /// Border width for hollow outline buttons |
| + | /// @type Number |
| + | $button-hollow-border-width: 1px !default; |
| + | |
| + | /// Sizes for buttons. |
| + | /// @type Map |
| + | $button-sizes: ( |
| + | tiny: 0.6rem, |
| + | small: 0.75rem, |
| + | default: 0.9rem, |
| + | large: 1.25rem, |
| + | ) !default; |
| + | |
| + | /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on. |
| + | /// @type Map |
| + | $button-palette: $foundation-palette !default; |
| + | |
| + | /// opacity for a disabled button. |
| + | /// @type List |
| + | $button-opacity-disabled: 0.25 !default; |
| + | |
| + | /// Background color lightness on hover for buttons. |
| + | /// @type Number |
| + | $button-background-hover-lightness: -20% !default; |
| + | |
| + | /// Color lightness on hover for hollow buttons. |
| + | /// @type Number |
| + | $button-hollow-hover-lightness: -50% !default; |
| + | |
| + | // Internal: flip from margin-right to margin-left for defaults |
| + | @if $global-text-direction == 'rtl' { |
| + | $button-margin: 0 0 $global-margin $global-margin !default; |
| + | } |
| + | |
| + | /// transitions for buttons. |
| + | /// @type List |
| + | $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default; |
| + | |
| + | // TODO: Document button-base() mixin |
| + | @mixin button-base { |
| + | @include disable-mouse-outline; |
| + | display: inline-block; |
| + | vertical-align: middle; |
| + | margin: $button-margin; |
| + | font-family: $button-font-family; |
| + | |
| + | @if (type-of($button-padding) == 'map') { |
| + | @each $size, $padding in $button-padding { |
| + | @include breakpoint($size) { |
| + | padding: $padding; |
| + | } |
| + | } |
| + | } |
| + | @else { |
| + | padding: $button-padding; |
| + | } |
| + | |
| + | -webkit-appearance: none; |
| + | border: 1px solid transparent; |
| + | border-radius: $button-radius; |
| + | transition: $button-transition; |
| + | |
| + | font-size: map-get($button-sizes, default); |
| + | line-height: 1; |
| + | text-align: center; |
| + | cursor: pointer; |
| + | } |
| + | |
| + | /// Expands a button to make it full-width. |
| + | /// @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-right: 0; |
| + | margin-left: 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, |
| + | $background-hover-lightness: $button-background-hover-lightness |
| + | ) { |
| + | @if $color == auto { |
| + | $color: color-pick-contrast($background, ($button-color, $button-color-alt)); |
| + | } |
| + | |
| + | @if $background-hover == auto { |
| + | $background-hover: scale-color($background, $lightness: $background-hover-lightness); |
| + | } |
| + | |
| + | 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; |
| + | } |
| + | |
| + | &.disabled, |
| + | &[disabled] { |
| + | &, |
| + | &:hover, &:focus { |
| + | background-color: transparent; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin button-hollow-style( |
| + | $color: $button-background, |
| + | $hover-lightness: $button-hollow-hover-lightness, |
| + | $border-width: $button-hollow-border-width |
| + | ) { |
| + | $color-hover: scale-color($color, $lightness: $hover-lightness); |
| + | |
| + | border: $border-width solid $color; |
| + | color: $color; |
| + | |
| + | &:hover, &:focus { |
| + | border-color: $color-hover; |
| + | color: $color-hover; |
| + | &.disabled, |
| + | &[disabled] { |
| + | border: $border-width solid $color; |
| + | color: $color; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events. |
| + | /// @param [Color] $background [$button-background] - Background color of the disabled button. |
| + | /// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color. |
| + | @mixin button-disabled( |
| + | $background: $button-background, |
| + | $color: $button-color |
| + | ) { |
| + | @if $color == auto { |
| + | $color: color-pick-contrast($background, ($button-color, $button-color-alt)); |
| + | } |
| + | |
| + | opacity: $button-opacity-disabled; |
| + | cursor: not-allowed; |
| + | |
| + | &, &:hover, &:focus { |
| + | background-color: $background; |
| + | color: $color; |
| + | } |
| + | } |
| + | |
| + | /// 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 |
| + | |
| + | display: inline-block; |
| + | float: #{$global-right}; |
| + | margin-#{$global-left}: $offset; |
| + | } |
| + | } |
| + | |
| + | /// 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 |
| + | @each $size, $value in map-remove($button-sizes, default) { |
| + | &.#{$size} { |
| + | font-size: $value; |
| + | } |
| + | } |
| + | |
| + | &.expanded { @include button-expand; } |
| + | |
| + | // Colors |
| + | @each $name, $color in $button-palette { |
| + | @if $button-fill != hollow { |
| + | &.#{$name} { |
| + | @include button-style($color, auto, auto); |
| + | } |
| + | } |
| + | @else { |
| + | &.#{$name} { |
| + | @include button-hollow-style($color); |
| + | } |
| + | |
| + | &.#{$name}.dropdown::after { |
| + | border-top-color: $color; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Disabled style |
| + | &.disabled, |
| + | &[disabled] { |
| + | @include button-disabled; |
| + | |
| + | @each $name, $color in $button-palette { |
| + | &.#{$name} { |
| + | @include button-disabled($color, auto); |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Hollow style |
| + | @if $button-fill != hollow { |
| + | &.hollow { |
| + | @include button-hollow; |
| + | @include button-hollow-style; |
| + | |
| + | @each $name, $color in $button-palette { |
| + | &.#{$name} { |
| + | @include button-hollow-style($color); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Clear style |
| + | @if $button-fill != clear { |
| + | &.clear { |
| + | @include button-hollow; |
| + | @include button-hollow-style; |
| + | |
| + | &, &:hover, &:focus { |
| + | &, &.disabled, &[disabled] { |
| + | border-color: transparent; |
| + | } |
| + | } |
| + | |
| + | @each $name, $color in $button-palette { |
| + | &.#{$name} { |
| + | @include button-hollow-style($color); |
| + | |
| + | &, &:hover, |
| + | &:focus { |
| + | &, |
| + | &.disabled, |
| + | &[disabled] { |
| + | border-color: transparent; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Dropdown arrow |
| + | &.dropdown { |
| + | @include button-dropdown; |
| + | |
| + | @if $button-fill == hollow { |
| + | &::after { |
| + | border-top-color: $button-background; |
| + | } |
| + | } |
| + | |
| + | &.hollow { |
| + | &::after { |
| + | border-top-color: $button-background; |
| + | } |
| + | |
| + | @each $name, $color in $button-palette { |
| + | &.#{$name} { |
| + | &::after { |
| + | border-top-color: $color; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Button with dropdown arrow only |
| + | &.arrow-only::after { |
| + | top: -0.1em; |
| + | float: none; |
| + | margin-#{$global-left}: 0; |
| + | } |
| + | } |
| + | a.button { |
| + | &:hover, |
| + | &:focus { |
| + | text-decoration: none; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_callout.scss
+106
-0
| @@ | @@ -0,0 +1,106 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group callout |
| + | //// |
| + | |
| + | /// Default background color. |
| + | /// @type Color |
| + | $callout-background: $white !default; |
| + | |
| + | /// Default fade value for callout backgrounds. |
| + | /// @type Number |
| + | $callout-background-fade: 85% !default; |
| + | |
| + | /// Default 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() { |
| + | position: relative; |
| + | margin: $callout-margin; |
| + | padding: $callout-padding; |
| + | |
| + | border: $callout-border; |
| + | border-radius: $callout-radius; |
| + | |
| + | // 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; |
| + | color: color-pick-contrast($background, ($callout-font-color, $callout-font-color-alt)); |
| + | } |
| + | |
| + | @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-palette { |
| + | &.#{$name} { |
| + | @include callout-style($color); |
| + | } |
| + | } |
| + | |
| + | &.small { |
| + | @include callout-size(0.5rem); |
| + | } |
| + | |
| + | &.large { |
| + | @include callout-size(3rem); |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_card.scss
+129
-0
| @@ | @@ -0,0 +1,129 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group card |
| + | //// |
| + | |
| + | /// Defualt background color. |
| + | /// @type Color |
| + | $card-background: $white !default; |
| + | |
| + | /// Default font color for cards. |
| + | /// @type Color |
| + | $card-font-color: $body-font-color !default; |
| + | |
| + | /// Default background. |
| + | /// @type Color |
| + | $card-divider-background: $light-gray !default; |
| + | |
| + | /// Default border style. |
| + | /// @type List |
| + | $card-border: 1px solid $light-gray !default; |
| + | |
| + | /// Default card shadow. |
| + | /// @type List |
| + | $card-shadow: none !default; |
| + | |
| + | /// Default border radius. |
| + | /// @type List |
| + | $card-border-radius: $global-radius !default; |
| + | |
| + | /// Default padding. |
| + | /// @type Number |
| + | $card-padding: $global-padding !default; |
| + | |
| + | /// Default bottom margin. |
| + | /// @type number |
| + | $card-margin-bottom: $global-margin !default; |
| + | |
| + | /// Adds styles for a card container. |
| + | /// @param {Color} $background - Background color of the card. |
| + | /// @param {Color} $color - font color of the card. |
| + | /// @param {Number} $margin - Bottom margin of the card. |
| + | /// @param {List} $border - Border around the card. |
| + | /// @param {List} $radius - border radius of the card. |
| + | /// @param {List} $shadow - box shadow of the card. |
| + | @mixin card-container( |
| + | $background: $card-background, |
| + | $color: $card-font-color, |
| + | $margin: $card-margin-bottom, |
| + | $border: $card-border, |
| + | $radius: $card-border-radius, |
| + | $shadow: $card-shadow |
| + | ) { |
| + | @if $global-flexbox { |
| + | display: flex; |
| + | flex-direction: column; |
| + | flex-grow: 1; |
| + | } |
| + | |
| + | margin-bottom: $margin; |
| + | |
| + | border: $border; |
| + | border-radius: $radius; |
| + | |
| + | background: $background; |
| + | box-shadow: $shadow; |
| + | |
| + | overflow: hidden; |
| + | color: $color; |
| + | |
| + | & > :last-child { |
| + | margin-bottom: 0; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for a card divider. |
| + | @mixin card-divider( |
| + | $background: $card-divider-background, |
| + | $padding: $card-padding |
| + | ) { |
| + | @if $global-flexbox { |
| + | flex: 0 1 auto; |
| + | display: flex; |
| + | } |
| + | |
| + | padding: $padding; |
| + | background: $background; |
| + | |
| + | & > :last-child { |
| + | margin-bottom: 0; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for a card section. |
| + | @mixin card-section( |
| + | $padding: $card-padding |
| + | ) { |
| + | @if $global-flexbox { |
| + | flex: 1 0 auto; |
| + | } |
| + | |
| + | padding: $padding; |
| + | |
| + | & > :last-child { |
| + | margin-bottom: 0; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-card { |
| + | .card { |
| + | @include card-container; |
| + | } |
| + | |
| + | .card-divider { |
| + | @include card-divider; |
| + | } |
| + | |
| + | .card-section { |
| + | @include card-section; |
| + | } |
| + | |
| + | // For IE 11 - Flexbug |
| + | // https://github.com/philipwalton/flexbugs/issues/75 |
| + | .card-image { |
| + | min-height: 1px; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_close-button.scss
+102
-0
| @@ | @@ -0,0 +1,102 @@ |
| + | // 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(s) for a close button. |
| + | /// @type Number|Map |
| + | $closebutton-offset-horizontal: ( |
| + | small: 0.66rem, |
| + | medium: 1rem, |
| + | ) !default; |
| + | |
| + | /// Top (or bottom) offset(s) for a close button. |
| + | /// @type Number|Map |
| + | $closebutton-offset-vertical: ( |
| + | small: 0.33em, |
| + | medium: 0.5rem, |
| + | ) !default; |
| + | |
| + | /// Default font size(s) of the close button. |
| + | /// @type Number|Map |
| + | $closebutton-size: ( |
| + | small: 1.5em, |
| + | medium: 2em, |
| + | ) !default; |
| + | |
| + | /// The line-height of the close button. It affects the spacing of the element. |
| + | /// @type Number |
| + | $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; |
| + | |
| + | |
| + | /// Get the size and position for a close button. If the input value is a number, the number is returned. If the input value is a config map and the map has the key `$size`, the value is returned. |
| + | /// |
| + | /// @param {Number|Map} $value - A number or map that represents the size or position value(s) of the close button. |
| + | /// @param {Keyword} $size - The size of the close button to use. |
| + | /// |
| + | /// @return {Number} The given number or the value found in the map. |
| + | @function -zf-get-size-val($value, $size) { |
| + | // Check if the value is a number |
| + | @if type-of($value) == 'number' { |
| + | // If it is, just return the number |
| + | @return $value; |
| + | } |
| + | |
| + | // Check if the size name exists in the value map |
| + | @else if map-has-key($value, $size) { |
| + | // If it does, return the value |
| + | @return map-get($value, $size); |
| + | } |
| + | } |
| + | |
| + | /// Sets the size and position of a close button. |
| + | /// @param {Keyword} $size [medium] - The size to use. Set to `small` to create a small close button. The 'medium' values defined in `$closebutton-*` variables will be used as the default size and position of the close button. |
| + | @mixin close-button-size($size) { |
| + | $x: nth($closebutton-position, 1); |
| + | $y: nth($closebutton-position, 2); |
| + | |
| + | #{$x}: -zf-get-size-val($closebutton-offset-horizontal, $size); |
| + | #{$y}: -zf-get-size-val($closebutton-offset-vertical, $size); |
| + | font-size: -zf-get-size-val($closebutton-size, $size); |
| + | line-height: -zf-get-size-val($closebutton-lineheight, $size); |
| + | } |
| + | |
| + | /// Adds styles for a close button, using the styles in the settings variables. |
| + | @mixin close-button { |
| + | $x: nth($closebutton-position, 1); |
| + | $y: nth($closebutton-position, 2); |
| + | |
| + | @include disable-mouse-outline; |
| + | position: absolute; |
| + | color: $closebutton-color; |
| + | cursor: pointer; |
| + | |
| + | &:hover, |
| + | &:focus { |
| + | color: $closebutton-color-hover; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-close-button { |
| + | .close-button { |
| + | @include close-button; |
| + | |
| + | &.small { @include close-button-size(small) } |
| + | &, &.medium { @include close-button-size(medium) } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_drilldown.scss
+142
-0
| @@ | @@ -0,0 +1,142 @@ |
| + | // 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 menu item padding. |
| + | /// @type Number |
| + | $drilldown-padding: $global-menu-padding !default; |
| + | |
| + | /// Sets drilldown menu nested margin |
| + | /// @type Number |
| + | $drilldown-nested-margin: 0 !default; |
| + | |
| + | /// Background color for drilldown top level items. |
| + | /// @type Color |
| + | $drilldown-background: $white !default; |
| + | |
| + | /// Sets drilldown menu item padding in the submenu. |
| + | /// @type Number |
| + | $drilldown-submenu-padding: $drilldown-padding !default; |
| + | |
| + | /// Background color for drilldown submenus. |
| + | /// @type Color |
| + | $drilldown-submenu-background: $white !default; |
| + | |
| + | /// Sets drilldown arrow color if arrow is used. |
| + | /// @type Color |
| + | $drilldown-arrow-color: $primary-color !default; |
| + | |
| + | /// Sets drilldown arrow size if arrow is used. |
| + | /// @type Length |
| + | $drilldown-arrow-size: 6px !default; |
| + | |
| + | @mixin zf-drilldown-left-right-arrows { |
| + | .is-drilldown-submenu-parent > a { |
| + | position: relative; |
| + | &::after { |
| + | position: absolute; |
| + | top: 50%; |
| + | margin-top: -1 * $drilldown-arrow-size; |
| + | #{$global-right}: 1rem; |
| + | @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right); |
| + | } |
| + | } |
| + | |
| + | &.align-left .is-drilldown-submenu-parent > a::after { |
| + | left: auto; |
| + | right: 1rem; |
| + | @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right); |
| + | } |
| + | |
| + | &.align-right .is-drilldown-submenu-parent > a::after { |
| + | right: auto; |
| + | left: 1rem; |
| + | @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left); |
| + | } |
| + | |
| + | } |
| + | |
| + | @mixin foundation-drilldown-menu { |
| + | // Applied to the Menu container |
| + | .is-drilldown { |
| + | position: relative; |
| + | overflow: hidden; |
| + | |
| + | li { |
| + | display: block; |
| + | } |
| + | |
| + | &.animate-height { |
| + | transition: height 0.5s; |
| + | } |
| + | } |
| + | |
| + | // The top level <ul> |
| + | .drilldown { |
| + | a { |
| + | padding: $drilldown-padding; |
| + | background: $drilldown-background; |
| + | } |
| + | |
| + | // Applied to submenu <ul>s |
| + | .is-drilldown-submenu { |
| + | position: absolute; |
| + | top: 0; |
| + | #{$global-left}: 100%; |
| + | z-index: -1; |
| + | |
| + | width: 100%; |
| + | background: $drilldown-submenu-background; |
| + | transition: $drilldown-transition; |
| + | |
| + | &.is-active { |
| + | z-index: 1; |
| + | display: block; |
| + | transform: translateX(if($global-text-direction == ltr, -100%, 100%)); |
| + | } |
| + | |
| + | &.is-closing { |
| + | transform: translateX(if($global-text-direction == ltr, 100%, -100%)); |
| + | } |
| + | |
| + | // Submenu item padding |
| + | a { |
| + | padding: $drilldown-submenu-padding; |
| + | } |
| + | } |
| + | |
| + | .nested.is-drilldown-submenu { |
| + | @include menu-nested($drilldown-nested-margin); |
| + | } |
| + | |
| + | .drilldown-submenu-cover-previous { |
| + | min-height: 100%; |
| + | } |
| + | |
| + | @if $drilldown-arrows { |
| + | @include zf-drilldown-left-right-arrows; |
| + | |
| + | .js-drilldown-back > a::before { |
| + | @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left); |
| + | border-#{$global-left}-width: 0; |
| + | display: inline-block; |
| + | vertical-align: middle; |
| + | margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text |
| + | |
| + | border-#{$global-left}-width: 0; |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_dropdown-menu.scss
+274
-0
| @@ | @@ -0,0 +1,274 @@ |
| + | // 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; |
| + | |
| + | /// Sets dropdown menu arrow size if arrow is used. |
| + | /// @type Length |
| + | $dropdownmenu-arrow-size: 6px !default; |
| + | |
| + | /// Sets dropdown menu arrow padding for aligning the arrow correctly. |
| + | /// @type Length |
| + | $dropdownmenu-arrow-padding: 1.5rem !default; |
| + | |
| + | /// Minimum width of dropdown sub-menus. |
| + | /// @type Length |
| + | $dropdownmenu-min-width: 200px !default; |
| + | |
| + | /// Background color for top level items. |
| + | /// @type Color |
| + | $dropdownmenu-background: $white !default; |
| + | |
| + | /// Background color for dropdowns. |
| + | /// @type Color |
| + | $dropdownmenu-submenu-background: $dropdownmenu-background !default; |
| + | |
| + | /// Padding for top level items. |
| + | /// @type Number |
| + | $dropdownmenu-padding: $global-menu-padding !default; |
| + | |
| + | /// Sets dropdown menu nested margin |
| + | /// @type Number |
| + | $dropdownmenu-nested-margin: 0 !default; |
| + | |
| + | /// Padding for sub-menu items. |
| + | /// @type Number |
| + | $dropdownmenu-submenu-padding: $dropdownmenu-padding !default; |
| + | |
| + | /// Border for dropdown sub-menus. |
| + | /// @type List |
| + | $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); |
| + | |
| + | /// Text color of an active dropdown menu item. Explicit override for menu defaults |
| + | /// @type Color |
| + | $dropdown-menu-item-color-active: get-color(primary) !default; |
| + | |
| + | /// Background color of an active dropdown menu item. Explicit override for menu defaults |
| + | /// @type Color |
| + | $dropdown-menu-item-background-active: transparent !default; |
| + | |
| + | @mixin zf-dropdown-left-right-arrows { |
| + | > a::after { |
| + | #{$global-right}: 14px; |
| + | } |
| + | |
| + | &.opens-left > a::after { |
| + | right: auto; |
| + | left: 5px; |
| + | @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left); |
| + | } |
| + | |
| + | &.opens-right > a::after { |
| + | @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right); |
| + | } |
| + | } |
| + | |
| + | @mixin dropdown-menu-direction($dir: horizontal) { |
| + | @if $dir == horizontal { |
| + | > li.opens-left { |
| + | > .is-dropdown-submenu { |
| + | top: 100%; |
| + | right: 0; |
| + | left: auto; |
| + | } |
| + | } |
| + | |
| + | > li.opens-right { |
| + | > .is-dropdown-submenu { |
| + | top: 100%; |
| + | right: auto; |
| + | left: 0; |
| + | } |
| + | } |
| + | |
| + | @if $dropdownmenu-arrows { |
| + | > li.is-dropdown-submenu-parent > a { |
| + | position: relative; |
| + | padding-#{$global-right}: $dropdownmenu-arrow-padding; |
| + | } |
| + | |
| + | > li.is-dropdown-submenu-parent > a::after { |
| + | @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down); |
| + | #{$global-right}: 5px; |
| + | #{$global-left}: auto; |
| + | margin-top: -1 * ($dropdownmenu-arrow-size / 2); |
| + | } |
| + | } |
| + | } |
| + | @else if $dir == vertical { |
| + | > li { |
| + | .is-dropdown-submenu { |
| + | top: 0; |
| + | } |
| + | |
| + | &.opens-left { |
| + | > .is-dropdown-submenu { |
| + | right: 100%; |
| + | left: auto; |
| + | top: 0; |
| + | } |
| + | } |
| + | |
| + | &.opens-right { |
| + | > .is-dropdown-submenu { |
| + | right: auto; |
| + | left: 100%; |
| + | } |
| + | } |
| + | |
| + | @if $dropdownmenu-arrows { |
| + | @include zf-dropdown-left-right-arrows; |
| + | } |
| + | } |
| + | } |
| + | @else { |
| + | @warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.'; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-dropdown-menu { |
| + | .dropdown.menu { |
| + | @include dropdown-menu-direction(horizontal); |
| + | |
| + | a { |
| + | @include disable-mouse-outline; |
| + | padding: $dropdownmenu-padding; |
| + | } |
| + | |
| + | // Active state |
| + | .is-active > a { |
| + | background: $dropdown-menu-item-background-active; |
| + | color: $dropdown-menu-item-color-active; |
| + | } |
| + | |
| + | .no-js & ul { |
| + | display: none; |
| + | } |
| + | |
| + | .nested.is-dropdown-submenu { |
| + | @include menu-nested($dropdownmenu-nested-margin); |
| + | } |
| + | |
| + | &.vertical { |
| + | @include dropdown-menu-direction(vertical); |
| + | } |
| + | |
| + | @each $size in $breakpoint-classes { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | @include breakpoint($size) { |
| + | &.#{$size}-horizontal { |
| + | @include dropdown-menu-direction(horizontal); |
| + | } |
| + | |
| + | &.#{$size}-vertical { |
| + | @include dropdown-menu-direction(vertical); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | &.align-right { |
| + | .is-dropdown-submenu.first-sub { |
| + | top: 100%; |
| + | right: 0; |
| + | left: auto; |
| + | } |
| + | } |
| + | } |
| + | |
| + | .is-dropdown-menu.vertical { |
| + | width: 100px; |
| + | |
| + | &.align-right { |
| + | float: right; |
| + | } |
| + | } |
| + | |
| + | .is-dropdown-submenu-parent { |
| + | position: relative; |
| + | |
| + | a::after { |
| + | position: absolute; |
| + | top: 50%; |
| + | #{$global-right}: 5px; |
| + | #{$global-left}: auto; |
| + | margin-top: -1 * $dropdownmenu-arrow-size; |
| + | } |
| + | |
| + | &.opens-inner > .is-dropdown-submenu { |
| + | |
| + | top: 100%; |
| + | @if $global-text-direction == 'rtl' { |
| + | right: auto; |
| + | } |
| + | @else { |
| + | left: auto; |
| + | } |
| + | } |
| + | |
| + | &.opens-left > .is-dropdown-submenu { |
| + | right: 100%; |
| + | left: auto; |
| + | } |
| + | |
| + | &.opens-right > .is-dropdown-submenu { |
| + | right: auto; |
| + | left: 100%; |
| + | } |
| + | } |
| + | |
| + | .is-dropdown-submenu { |
| + | position: absolute; |
| + | top: 0; |
| + | #{$global-left}: 100%; |
| + | z-index: 1; |
| + | |
| + | display: none; |
| + | min-width: $dropdownmenu-min-width; |
| + | |
| + | border: $dropdownmenu-border; |
| + | background: $dropdownmenu-submenu-background; |
| + | |
| + | .dropdown & a { |
| + | padding: $dropdownmenu-submenu-padding; |
| + | } |
| + | |
| + | .is-dropdown-submenu-parent { |
| + | @if $dropdownmenu-arrows { |
| + | @include zf-dropdown-left-right-arrows; |
| + | } |
| + | } |
| + | |
| + | @if (type-of($dropdownmenu-border-width) == 'number') { |
| + | .is-dropdown-submenu { |
| + | margin-top: (-$dropdownmenu-border-width); |
| + | } |
| + | } |
| + | |
| + | > li { |
| + | width: 100%; |
| + | } |
| + | |
| + | // [TODO] Cut back specificity |
| + | //&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically... |
| + | &.js-dropdown-active { |
| + | display: block; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_dropdown.scss
+79
-0
| @@ | @@ -0,0 +1,79 @@ |
| + | // 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; |
| + | |
| + | /// Background for dropdown panes. |
| + | /// @type Color |
| + | $dropdown-background: $body-background !default; |
| + | |
| + | /// Border for dropdown panes. |
| + | /// @type List |
| + | $dropdown-border: 1px solid $medium-gray !default; |
| + | |
| + | /// Font size for dropdown panes. |
| + | /// @type List |
| + | $dropdown-font-size: 1rem !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 { |
| + | position: absolute; |
| + | z-index: 10; |
| + | |
| + | width: $dropdown-width; |
| + | padding: $dropdown-padding; |
| + | |
| + | visibility: hidden; |
| + | display: none; |
| + | border: $dropdown-border; |
| + | border-radius: $dropdown-radius; |
| + | background-color: $dropdown-background; |
| + | |
| + | font-size: $dropdown-font-size; |
| + | |
| + | |
| + | // Allow an intermittent state to do positioning before making visible. |
| + | &.is-opening { |
| + | display: block; |
| + | } |
| + | |
| + | &.is-open { |
| + | visibility: visible; |
| + | display: block; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-dropdown { |
| + | .dropdown-pane { |
| + | @include dropdown-container; |
| + | } |
| + | |
| + | @each $name, $size in $dropdown-sizes { |
| + | .dropdown-pane.#{$name} { |
| + | width: $size; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_flex-video.scss
+1
-0
| @@ | @@ -0,0 +1 @@ |
| + | @import 'responsive-embed'; |
public/stylesheets/foundation6/components/_flex.scss
+117
-0
| @@ | @@ -0,0 +1,117 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group Flexbox Utilities |
| + | //// |
| + | // |
| + | /// Default value for the count of source ordering` |
| + | /// @type Number |
| + | $flex-source-ordering-count: 6 !default; |
| + | |
| + | /// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers. |
| + | /// @type Boolean |
| + | $flexbox-responsive-breakpoints: true !default; |
| + | |
| + | @mixin flex-helpers { |
| + | .flex-container { |
| + | @include flex; |
| + | } |
| + | |
| + | .flex-child-auto { |
| + | flex: 1 1 auto; |
| + | } |
| + | |
| + | .flex-child-grow { |
| + | flex: 1 0 auto; |
| + | } |
| + | |
| + | .flex-child-shrink { |
| + | flex: 0 1 auto; |
| + | } |
| + | |
| + | @each $dir, $prop in $-zf-flex-direction { |
| + | .flex-dir-#{$dir} { |
| + | @include flex-direction($prop); |
| + | } |
| + | } |
| + | |
| + | @if ($flexbox-responsive-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-flex-container { |
| + | @include flex; |
| + | } |
| + | |
| + | .#{$size}-flex-child-auto { |
| + | flex: 1 1 auto; |
| + | } |
| + | |
| + | .#{$size}-flex-child-grow { |
| + | flex: 1 0 auto; |
| + | } |
| + | |
| + | .#{$size}-flex-child-shrink { |
| + | flex: 0 1 auto; |
| + | } |
| + | |
| + | @each $dir, $prop in $-zf-flex-direction { |
| + | .#{$size}-flex-dir-#{$dir} { |
| + | @include flex-direction($prop); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-flex-classes { |
| + | // Horizontal alignment using justify-content |
| + | @each $hdir, $prop in map-remove($-zf-flex-justify, 'left') { |
| + | .align-#{$hdir} { |
| + | @include flex-align($x: $hdir); |
| + | } |
| + | } |
| + | |
| + | // Horizontal alignment Specifically for Vertical Menu |
| + | @each $hdir, $prop in map-remove($-zf-flex-justify, 'left', 'justify', 'spaced') { |
| + | .align-#{$hdir} { |
| + | &.vertical.menu > li > a { |
| + | @include flex-align($x: $hdir); |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Vertical alignment using align-items and align-self |
| + | @each $vdir, $prop in $-zf-flex-align { |
| + | .align-#{$vdir} { |
| + | @include flex-align($y: $vdir); |
| + | } |
| + | |
| + | .align-self-#{$vdir} { |
| + | @include flex-align-self($y: $vdir); |
| + | } |
| + | } |
| + | |
| + | // Central alignment of content |
| + | .align-center-middle { |
| + | @include flex-align($x: center, $y: middle); |
| + | align-content: center; |
| + | } |
| + | |
| + | // Source ordering |
| + | @include -zf-each-breakpoint { |
| + | @for $i from 1 through $flex-source-ordering-count { |
| + | .#{$-zf-size}-order-#{$i} { |
| + | @include flex-order($i); |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Vanilla Flexbox Helpers |
| + | @include flex-helpers; |
| + | } |
public/stylesheets/foundation6/components/_float.scss
+27
-0
| @@ | @@ -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-right: auto; |
| + | margin-left: auto; |
| + | } |
| + | |
| + | .clearfix { |
| + | @include clearfix; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_label.scss
+64
-0
| @@ | @@ -0,0 +1,64 @@ |
| + | // 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: $white !default; |
| + | |
| + | /// Alternate text color for labels. |
| + | /// @type Color |
| + | $label-color-alt: $black !default; |
| + | |
| + | /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on. |
| + | /// @type Map |
| + | $label-palette: $foundation-palette !default; |
| + | |
| + | /// Default font size for labels. |
| + | /// @type Number |
| + | $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; |
| + | |
| + | border-radius: $label-radius; |
| + | |
| + | font-size: $label-font-size; |
| + | line-height: 1; |
| + | white-space: nowrap; |
| + | cursor: default; |
| + | } |
| + | |
| + | @mixin foundation-label { |
| + | .label { |
| + | @include label; |
| + | |
| + | background: $label-background; |
| + | color: $label-color; |
| + | |
| + | @each $name, $color in $label-palette { |
| + | &.#{$name} { |
| + | background: $color; |
| + | color: color-pick-contrast($color, ($label-color, $label-color-alt)); |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_media-object.scss
+114
-0
| @@ | @@ -0,0 +1,114 @@ |
| + | // 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; |
| + | |
| + | /// Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width. |
| + | /// @type Number |
| + | $mediaobject-image-width-stacked: 100% !default; |
| + | |
| + | /// Adds styles for a media object container. |
| + | @mixin media-object-container { |
| + | display: if($global-flexbox, flex, block); |
| + | margin-bottom: $mediaobject-margin-bottom; |
| + | |
| + | @if $global-flexbox { |
| + | flex-wrap: nowrap; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for sections within a media object. |
| + | /// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections. |
| + | @mixin media-object-section($padding: $mediaobject-section-padding) { |
| + | @if $global-flexbox { |
| + | flex: 0 1 auto; |
| + | } |
| + | @else { |
| + | display: table-cell; |
| + | vertical-align: top; |
| + | } |
| + | |
| + | &:first-child { |
| + | padding-#{$global-right}: $padding; |
| + | } |
| + | |
| + | &:last-child:not(:nth-child(2)) { |
| + | padding-#{$global-left}: $padding; |
| + | } |
| + | |
| + | > :last-child { |
| + | margin-bottom: 0; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles to stack sections of a media object. Apply this to the section elements, not the container. |
| + | @mixin media-object-stack { |
| + | padding: 0; |
| + | padding-bottom: $mediaobject-section-padding; |
| + | |
| + | @if $global-flexbox { |
| + | flex-basis: 100%; |
| + | max-width: 100%; |
| + | } |
| + | @else { |
| + | display: block; |
| + | } |
| + | |
| + | img { |
| + | width: $mediaobject-image-width-stacked; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-media-object { |
| + | .media-object { |
| + | @include media-object-container; |
| + | |
| + | img { |
| + | max-width: none; |
| + | } |
| + | |
| + | @if $global-flexbox { |
| + | &.stack-for-#{$-zf-zero-breakpoint} { |
| + | @include breakpoint($-zf-zero-breakpoint only) { |
| + | flex-wrap: wrap; |
| + | } |
| + | } |
| + | } |
| + | |
| + | &.stack-for-#{$-zf-zero-breakpoint} .media-object-section { |
| + | @include breakpoint($-zf-zero-breakpoint only) { |
| + | @include media-object-stack; |
| + | } |
| + | } |
| + | } |
| + | |
| + | .media-object-section { |
| + | @include media-object-section; |
| + | |
| + | @if $global-flexbox { |
| + | &.main-section { |
| + | flex: 1 1 0px; // sass-lint:disable-line zero-unit |
| + | } |
| + | } |
| + | @else { |
| + | &.middle { |
| + | vertical-align: middle; |
| + | } |
| + | |
| + | &.bottom { |
| + | vertical-align: bottom; |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_menu-icon.scss
+9
-0
| @@ | @@ -0,0 +1,9 @@ |
| + | @mixin foundation-menu-icon { |
| + | .menu-icon { |
| + | @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover); |
| + | } |
| + | |
| + | .menu-icon.dark { |
| + | @include hamburger; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_menu.scss
+495
-0
| @@ | @@ -0,0 +1,495 @@ |
| + | // 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-nested-margin: $global-menu-nested-margin !default; |
| + | |
| + | /// Padding for items in a pill menu. |
| + | /// @type Number |
| + | $menu-items-padding: $global-menu-padding !default; |
| + | |
| + | /// margin for items in a simple menu. |
| + | /// @type Number |
| + | $menu-simple-margin: 1rem !default; |
| + | |
| + | /// Text color of an active menu item. |
| + | /// @type Color |
| + | $menu-item-color-active: $white !default; |
| + | |
| + | /// Background color of an active menu item. |
| + | /// @type Color |
| + | $menu-item-background-active: get-color(primary) !default; |
| + | |
| + | /// Spacing between an icon and text in a menu item. |
| + | /// @type Number |
| + | $menu-icon-spacing: 0.25rem !default; |
| + | |
| + | /// Background color for an hovered menu item. |
| + | /// @type Color |
| + | $menu-item-background-hover: $light-gray !default; |
| + | |
| + | /// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`. |
| + | /// But please note that `active` will be removed in upcoming versions. |
| + | /// @type Boolean |
| + | $menu-state-back-compat: true !default; |
| + | |
| + | /// Backward compatibility for menu centered. If true, this duplicate `.menu-centered > .menu` with `.menu.align-center`. |
| + | /// But please note that `menu-centered` will be removed in upcoming versions. |
| + | /// @type Boolean |
| + | $menu-centered-back-compat: true !default; |
| + | |
| + | /// Backward compatibility for using `icon-*` classes without `.icons` classes |
| + | /// But please note that this backward compatibility will be removed in upcoming versions. |
| + | /// @type Boolean |
| + | $menu-icons-back-compat: true !default; |
| + | |
| + | /// Creates the base styles for a Menu. |
| + | @mixin menu-base { |
| + | padding: 0; |
| + | margin: 0; |
| + | list-style: none; |
| + | position: relative; |
| + | |
| + | @if $global-flexbox { |
| + | display: flex; |
| + | flex-wrap: wrap; |
| + | } |
| + | |
| + | li { |
| + | @include disable-mouse-outline; |
| + | } |
| + | |
| + | a, |
| + | .button { |
| + | line-height: 1; |
| + | text-decoration: none; |
| + | display: block; |
| + | padding: $menu-items-padding; |
| + | } |
| + | |
| + | // Reset styles of inner elements |
| + | input, |
| + | select, |
| + | a, |
| + | button { |
| + | margin-bottom: 0; |
| + | } |
| + | |
| + | input { |
| + | display: inline-block; |
| + | } |
| + | } |
| + | |
| + | /// Expands the items of a Menu, so each item is the same width. |
| + | @mixin menu-expand { |
| + | @if $global-flexbox { |
| + | li { |
| + | flex: 1 1 0px; // sass-lint:disable-line zero-unit |
| + | } |
| + | } |
| + | @else { |
| + | display: table; |
| + | width: 100%; |
| + | |
| + | > li { |
| + | display: table-cell; |
| + | vertical-align: middle; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Align menu items. |
| + | @mixin menu-align($alignment) { |
| + | @if $alignment == left { |
| + | @if $global-flexbox { |
| + | justify-content: flex-start; |
| + | } |
| + | @else { |
| + | text-align: $global-left; |
| + | } |
| + | } |
| + | @else if $alignment == right { |
| + | @if $global-flexbox { |
| + | li { |
| + | display: flex; |
| + | justify-content: flex-end; |
| + | |
| + | .submenu li { |
| + | justify-content: flex-start; |
| + | } |
| + | } |
| + | |
| + | &.vertical li { |
| + | display: block; |
| + | text-align: $global-right; |
| + | |
| + | .submenu li { |
| + | text-align: $global-right; |
| + | } |
| + | } |
| + | } |
| + | @else { |
| + | text-align: $global-right; |
| + | |
| + | .submenu li { |
| + | text-align: $global-left; |
| + | } |
| + | |
| + | &.vertical { |
| + | .submenu li { |
| + | text-align: $global-right; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | @else if $alignment == center { |
| + | @if $global-flexbox { |
| + | li { |
| + | display: flex; |
| + | justify-content: center; |
| + | |
| + | .submenu li { |
| + | justify-content: flex-start; |
| + | } |
| + | } |
| + | } |
| + | @else { |
| + | text-align: center; |
| + | |
| + | .submenu li { |
| + | text-align: $global-left; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// 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 { |
| + | @if $global-flexbox { |
| + | flex-wrap: wrap; |
| + | flex-direction: row; |
| + | } |
| + | @else { |
| + | li { |
| + | display: inline-block; |
| + | } |
| + | } |
| + | } |
| + | @else if $dir == vertical { |
| + | @if $global-flexbox { |
| + | flex-wrap: nowrap; |
| + | flex-direction: column; |
| + | } |
| + | @else { |
| + | 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. |
| + | /// @param {Keyword} $dir [$global-left] - Direction of the menu. This effects the side of the `<li>` that receives the margin. |
| + | /// @param {Number} $margin [$menu-simple-margin] - The margin to apply to each `<li>`. |
| + | @mixin menu-simple($dir: $global-left, $margin: $menu-simple-margin) { |
| + | @if $global-flexbox { |
| + | align-items: center; |
| + | } |
| + | |
| + | li + li { |
| + | margin-#{$dir}: $margin; |
| + | } |
| + | |
| + | a { |
| + | padding: 0; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for a nested Menu, by adding `margin-left` to the menu. |
| + | /// @param {Keyword|Number} $margin [$menu-nested-margin] - Length of the margin. |
| + | /// @param {Keyword} $nested-alignment [left] - Alignment of the nested class |
| + | @mixin menu-nested( |
| + | $margin: $menu-nested-margin, |
| + | $nested-alignment: left |
| + | ) { |
| + | @if $nested-alignment == right { |
| + | margin-#{$global-right}: $margin; |
| + | margin-#{$global-left}: 0; |
| + | } |
| + | @else { |
| + | margin-#{$global-right}: 0; |
| + | margin-#{$global-left}: $margin; |
| + | } |
| + | |
| + | } |
| + | |
| + | /// Adds basic styles for icons in menus. |
| + | @mixin menu-icons() { |
| + | @if $global-flexbox { |
| + | a { |
| + | display: flex; |
| + | } |
| + | } |
| + | @else { |
| + | img, |
| + | i, |
| + | svg { |
| + | vertical-align: middle; |
| + | |
| + | + span { |
| + | vertical-align: middle; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds position classes for icons within a menu. |
| + | @mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) { |
| + | @if $position == left { |
| + | li a { |
| + | @if $global-flexbox { |
| + | flex-flow: row nowrap; |
| + | } |
| + | |
| + | img, |
| + | i, |
| + | svg { |
| + | margin-#{$global-right}: $spacing; |
| + | |
| + | @if not $global-flexbox { |
| + | display: inline-block; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | @else if $position == right { |
| + | li a { |
| + | @if $global-flexbox { |
| + | flex-flow: row nowrap; |
| + | } |
| + | |
| + | img, |
| + | i, |
| + | svg { |
| + | margin-#{$global-left}: $spacing; |
| + | |
| + | @if not $global-flexbox { |
| + | display: inline-block; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | @else if $position == top { |
| + | li a { |
| + | @if $global-flexbox { |
| + | flex-flow: column nowrap; |
| + | } |
| + | @else { |
| + | text-align: center; |
| + | } |
| + | |
| + | img, |
| + | i, |
| + | svg { |
| + | @if not $global-flexbox { |
| + | display: block; |
| + | margin: 0 auto $spacing; |
| + | } |
| + | @else { |
| + | align-self: stretch; |
| + | margin-bottom: $spacing; |
| + | text-align: center; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | @else if $position == bottom { |
| + | li a { |
| + | @if $global-flexbox { |
| + | flex-flow: column nowrap; |
| + | } |
| + | @else { |
| + | text-align: center; |
| + | } |
| + | |
| + | img, |
| + | i, |
| + | svg { |
| + | @if not $global-flexbox { |
| + | display: block; |
| + | margin: $spacing auto 0; |
| + | } |
| + | @else { |
| + | align-self: stretch; |
| + | margin-bottom: $spacing; |
| + | text-align: center; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin menu-text { |
| + | padding: $global-menu-padding; |
| + | |
| + | font-weight: bold; |
| + | line-height: 1; |
| + | color: inherit; |
| + | } |
| + | |
| + | @mixin menu-state-active { |
| + | background: $menu-item-background-active; |
| + | color: $menu-item-color-active; |
| + | } |
| + | |
| + | @mixin foundation-menu { |
| + | .menu { |
| + | @include menu-base; |
| + | |
| + | // Default orientation: horizontal |
| + | &, &.horizontal { |
| + | @include menu-direction(horizontal); |
| + | } |
| + | |
| + | // Vertical orientation modifier |
| + | &.vertical { |
| + | @include menu-direction(vertical); |
| + | } |
| + | |
| + | // Even-width modifier for horizontal orientation |
| + | &.expanded { |
| + | @include menu-expand; |
| + | } |
| + | |
| + | // Simple |
| + | &.simple { |
| + | @include menu-simple; |
| + | } |
| + | |
| + | // Breakpoint specific versions |
| + | @include -zf-each-breakpoint($small: false) { |
| + | &.#{$-zf-size}-horizontal { |
| + | @include menu-direction(horizontal); |
| + | } |
| + | |
| + | &.#{$-zf-size}-vertical { |
| + | @include menu-direction(vertical); |
| + | } |
| + | |
| + | &.#{$-zf-size}-expanded { |
| + | @include menu-expand; |
| + | } |
| + | |
| + | &.#{$-zf-size}-simple { |
| + | @include menu-expand; |
| + | } |
| + | } |
| + | |
| + | // Nesting |
| + | &.nested { |
| + | @include menu-nested; |
| + | } |
| + | |
| + | // Icon Base Styles |
| + | &.icons { |
| + | @include menu-icons; |
| + | } |
| + | |
| + | // Backward Compatibility for active state |
| + | @if $menu-icons-back-compat { |
| + | &.icon-top, |
| + | &.icon-right, |
| + | &.icon-bottom, |
| + | &.icon-left { |
| + | @include menu-icons; |
| + | } |
| + | } |
| + | |
| + | // Icon Left |
| + | &.icon-left { |
| + | @include menu-icon-position(left); |
| + | } |
| + | |
| + | // Icon Right |
| + | &.icon-right { |
| + | @include menu-icon-position(right); |
| + | } |
| + | |
| + | // Icon Top |
| + | &.icon-top { |
| + | @include menu-icon-position(top); |
| + | } |
| + | |
| + | // Icon Bottom |
| + | &.icon-bottom { |
| + | @include menu-icon-position(bottom); |
| + | } |
| + | |
| + | // Active state |
| + | .is-active > a { |
| + | @include menu-state-active; |
| + | } |
| + | |
| + | // Backward Compatibility for active state |
| + | @if $menu-state-back-compat { |
| + | .active > a { |
| + | @include menu-state-active; |
| + | } |
| + | } |
| + | |
| + | // Align left |
| + | &.align-#{$global-left} { |
| + | @include menu-align(left); |
| + | } |
| + | |
| + | // Align right |
| + | &.align-#{$global-right} { |
| + | @include menu-align(right); |
| + | |
| + | .nested { |
| + | @include menu-nested($nested-alignment: right); |
| + | } |
| + | } |
| + | |
| + | // Align center |
| + | &.align-center { |
| + | @include menu-align(center); |
| + | } |
| + | |
| + | .menu-text { |
| + | @include menu-text; |
| + | } |
| + | } |
| + | |
| + | @if $menu-centered-back-compat { |
| + | .menu-centered { |
| + | > .menu { |
| + | @if $global-flexbox { |
| + | justify-content: center; |
| + | } |
| + | |
| + | @include menu-align(center); |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Prevent FOUC when using the Responsive Menu plugin |
| + | .no-js [data-responsive-menu] ul { |
| + | display: none; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_off-canvas.scss
+506
-0
| @@ | @@ -0,0 +1,506 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group off-canvas |
| + | //// |
| + | |
| + | /// Width map of a left/right off-canvas panel. |
| + | /// @type Map |
| + | $offcanvas-sizes: ( |
| + | small: 250px, |
| + | ) !default; |
| + | |
| + | /// Height map of a top/bottom off-canvas panel. |
| + | /// @type Map |
| + | $offcanvas-vertical-sizes: ( |
| + | small: 250px, |
| + | ) !default; |
| + | |
| + | /// Background color of an off-canvas panel. |
| + | /// @type Color |
| + | $offcanvas-background: $light-gray !default; |
| + | |
| + | /// Box shadow for the off-canvas overlap panel. |
| + | /// @type Shadow |
| + | $offcanvas-shadow: 0 0 10px rgba($black, 0.7) !default; |
| + | |
| + | /// Inner box shadow size for the off-canvas push panel. |
| + | /// @type Number |
| + | $offcanvas-inner-shadow-size: 20px !default; |
| + | |
| + | /// Inner box shadow color for the off-canvas push panel. |
| + | /// @type Color |
| + | $offcanvas-inner-shadow-color: rgba($black, 0.25) !default; |
| + | |
| + | /// Z-index of an off-canvas content overlay. |
| + | /// @type Number |
| + | $offcanvas-overlay-zindex: 11 !default; |
| + | |
| + | /// Z-index of an off-canvas panel with the `push` transition. |
| + | /// @type Number |
| + | $offcanvas-push-zindex: 12 !default; |
| + | |
| + | /// Z-index of an off-canvas panel with the `overlap` transition. |
| + | /// @type Number |
| + | $offcanvas-overlap-zindex: 13 !default; |
| + | |
| + | /// Z-index of an off-canvas panel using the `reveal-for-*` classes or mixin. |
| + | /// @type Number |
| + | $offcanvas-reveal-zindex: 12 !default; |
| + | |
| + | /// Length of the animation on an off-canvas panel. |
| + | /// @type Number |
| + | $offcanvas-transition-length: 0.5s !default; |
| + | |
| + | /// Timing function of the animation on an off-canvas panel. |
| + | /// @type Keyword |
| + | $offcanvas-transition-timing: ease !default; |
| + | |
| + | /// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen. |
| + | /// @type Bool |
| + | $offcanvas-fixed-reveal: true !default; |
| + | |
| + | /// Background color for the overlay that appears when an off-canvas panel 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 content. |
| + | $maincontent-class: 'off-canvas-content' !default; |
| + | |
| + | /// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work. |
| + | @mixin off-canvas-basics { |
| + | |
| + | /// Transform deprecated size settings into map & show warning |
| + | @if variable-exists(offcanvas-size) { |
| + | $offcanvas-sizes: (small: $offcanvas-size, medium: $offcanvas-size) !global; |
| + | @warn '$offcanvas-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-sizes instead'; |
| + | } |
| + | @if variable-exists(offcanvas-vertical-size) { |
| + | $offcanvas-vertical-sizes: (small: $offcanvas-vertical-size, medium: $offcanvas-vertical-size) !global; |
| + | @warn '$offcanvas-vertical-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-vertical-sizes instead'; |
| + | } |
| + | |
| + | // Checks the z-indexes and increase them due to backwards compatibility. |
| + | // This is necessary because the overlay's z-index is new since v6.4 and may be identical to the user custom settings of the push z-index. |
| + | @if $offcanvas-push-zindex <= $offcanvas-overlay-zindex { $offcanvas-push-zindex: $offcanvas-overlay-zindex + 1 !global; } |
| + | @if $offcanvas-overlap-zindex <= $offcanvas-push-zindex { $offcanvas-overlap-zindex: $offcanvas-push-zindex + 1 !global; } |
| + | @if $offcanvas-reveal-zindex <= $offcanvas-overlay-zindex { $offcanvas-reveal-zindex: $offcanvas-overlay-zindex + 1 !global; } |
| + | |
| + | // Hides overflow on body when an off-canvas panel is open. |
| + | .is-off-canvas-open { |
| + | overflow: hidden; |
| + | } |
| + | |
| + | // Off-canvas overlay (generated by JavaScript) |
| + | .js-off-canvas-overlay { |
| + | position: absolute; |
| + | top: 0; |
| + | left: 0; |
| + | z-index: $offcanvas-overlay-zindex; |
| + | |
| + | width: 100%; |
| + | height: 100%; |
| + | |
| + | transition: opacity $offcanvas-transition-length $offcanvas-transition-timing, visibility $offcanvas-transition-length $offcanvas-transition-timing; |
| + | |
| + | background: $offcanvas-exit-background; |
| + | |
| + | opacity: 0; |
| + | visibility: hidden; |
| + | |
| + | overflow: hidden; |
| + | |
| + | &.is-visible { |
| + | opacity: 1; |
| + | visibility: visible; |
| + | } |
| + | |
| + | &.is-closable { |
| + | cursor: pointer; |
| + | } |
| + | |
| + | &.is-overlay-absolute { |
| + | position: absolute; |
| + | } |
| + | |
| + | &.is-overlay-fixed { |
| + | position: fixed; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Adds basic styles for an off-canvas wrapper. |
| + | @mixin off-canvas-wrapper() { |
| + | position: relative; |
| + | overflow: hidden; |
| + | } |
| + | |
| + | /// Adds basic styles for an off-canvas panel. |
| + | @mixin off-canvas-base( |
| + | $background: $offcanvas-background, |
| + | $transition: $offcanvas-transition-length $offcanvas-transition-timing, |
| + | $fixed: true |
| + | ) { |
| + | @include disable-mouse-outline; |
| + | |
| + | @if $fixed == true { |
| + | position: fixed; |
| + | } |
| + | @else { |
| + | position: absolute; |
| + | } |
| + | |
| + | // Set the off-canvas z-index. |
| + | z-index: $offcanvas-push-zindex; |
| + | |
| + | // Increase CSS specificity |
| + | &.is-transition-push { |
| + | z-index: $offcanvas-push-zindex; |
| + | } |
| + | |
| + | transition: transform $transition; |
| + | backface-visibility: hidden; |
| + | |
| + | background: $background; |
| + | |
| + | // Hide inactive off-canvas within the content that have the same position |
| + | &.is-closed { |
| + | visibility: hidden; |
| + | } |
| + | |
| + | // Overlap only styles. |
| + | &.is-transition-overlap { |
| + | z-index: $offcanvas-overlap-zindex; |
| + | |
| + | &.is-open { |
| + | box-shadow: $offcanvas-shadow; |
| + | } |
| + | } |
| + | |
| + | // Sets transform to 0 to show an off-canvas panel. |
| + | &.is-open { |
| + | transform: translate(0, 0); |
| + | } |
| + | } |
| + | |
| + | /// Adds styles to position an off-canvas panel to the left/right/top/bottom. |
| + | @mixin off-canvas-position( |
| + | $position: left, |
| + | $orientation: horizontal, |
| + | $sizes: if($orientation == horizontal, $offcanvas-sizes, $offcanvas-vertical-sizes) |
| + | ) { |
| + | @if $position == left { |
| + | top: 0; |
| + | left: 0; |
| + | height: 100%; |
| + | overflow-y: auto; |
| + | |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | width: $size; |
| + | transform: translateX(-$size); |
| + | } |
| + | } |
| + | |
| + | // Sets the position for nested off-canvas element |
| + | @at-root .#{$maincontent-class} .off-canvas.position-#{$position} { |
| + | |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | transform: translateX(-$size); |
| + | } |
| + | } |
| + | &.is-transition-overlap.is-open { |
| + | transform: translate(0, 0); |
| + | } |
| + | } |
| + | |
| + | // Sets the open position for the content |
| + | @at-root .#{$maincontent-class}.is-open-#{$position} { |
| + | &.has-transition-push { |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | transform: translateX($size); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | @else if $position == right { |
| + | top: 0; |
| + | right: 0; |
| + | height: 100%; |
| + | overflow-y: auto; |
| + | |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | width: $size; |
| + | transform: translateX($size); |
| + | } |
| + | } |
| + | |
| + | // Sets the position for nested off-canvas element |
| + | @at-root .#{$maincontent-class} .off-canvas.position-#{$position} { |
| + | |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | transform: translateX($size); |
| + | } |
| + | } |
| + | &.is-transition-overlap.is-open { |
| + | transform: translate(0, 0); |
| + | } |
| + | } |
| + | |
| + | // Sets the open position for the content |
| + | @at-root .#{$maincontent-class}.is-open-#{$position} { |
| + | &.has-transition-push { |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | transform: translateX(-$size); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | @else if $position == top { |
| + | top: 0; |
| + | left: 0; |
| + | width: 100%; |
| + | overflow-x: auto; |
| + | |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | height: $size; |
| + | transform: translateY(-$size); |
| + | } |
| + | } |
| + | |
| + | // Sets the position for nested off-canvas element |
| + | @at-root .#{$maincontent-class} .off-canvas.position-#{$position} { |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | transform: translateY(-$size); |
| + | } |
| + | } |
| + | &.is-transition-overlap.is-open { |
| + | transform: translate(0, 0); |
| + | } |
| + | } |
| + | |
| + | // Sets the open position for the content |
| + | @at-root .#{$maincontent-class}.is-open-#{$position} { |
| + | &.has-transition-push { |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | transform: translateY($size); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | @else if $position == bottom { |
| + | bottom: 0; |
| + | left: 0; |
| + | width: 100%; |
| + | overflow-x: auto; |
| + | |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | height: $size; |
| + | transform: translateY($size); |
| + | } |
| + | } |
| + | |
| + | // Sets the position for nested off-canvas element |
| + | @at-root .#{$maincontent-class} .off-canvas.position-#{$position} { |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | transform: translateY($size); |
| + | } |
| + | } |
| + | &.is-transition-overlap.is-open { |
| + | transform: translate(0, 0); |
| + | } |
| + | } |
| + | |
| + | // Sets the open position for the content |
| + | @at-root .#{$maincontent-class}.is-open-#{$position} { |
| + | &.has-transition-push { |
| + | @each $name, $size in $sizes { |
| + | @include breakpoint($name) { |
| + | transform: translateY(-$size); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // If $offcanvas-inner-shadow-size is set, add inner box-shadow. |
| + | // This mimics the off-canvas panel having a lower z-index, without having to have one. |
| + | @if $offcanvas-inner-shadow-size { |
| + | &.is-transition-push { |
| + | @if $position == left { |
| + | @include inner-side-shadow(right, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color); |
| + | } |
| + | @else if $position == right { |
| + | @include inner-side-shadow(left, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color); |
| + | } |
| + | @else if $position == top { |
| + | @include inner-side-shadow(bottom, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color); |
| + | } |
| + | @else if $position == bottom { |
| + | @include inner-side-shadow(top, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color); |
| + | } |
| + | } |
| + | } |
| + | |
| + | } |
| + | |
| + | /// Sets the styles for the content container. |
| + | @mixin off-canvas-content() { |
| + | transform: none; |
| + | transition: transform $offcanvas-transition-length $offcanvas-transition-timing; |
| + | backface-visibility: hidden; |
| + | |
| + | // Transform scope until the element is closed (makes sure transitionend gets triggered) |
| + | &.has-transition-push { |
| + | transform: translate(0, 0); |
| + | } |
| + | |
| + | // Consider element & content, nested in another content |
| + | .off-canvas.is-open { |
| + | transform: translate(0, 0); |
| + | } |
| + | } |
| + | |
| + | /// Adds styles that reveal an off-canvas panel. |
| + | @mixin off-canvas-reveal( |
| + | $position: left, |
| + | $zindex: $offcanvas-reveal-zindex, |
| + | $content: $maincontent-class, |
| + | $breakpoint: small |
| + | ) { |
| + | transform: none; |
| + | z-index: $zindex; |
| + | transition: none; |
| + | visibility: visible; |
| + | |
| + | @if not $offcanvas-fixed-reveal { |
| + | position: absolute; |
| + | } |
| + | |
| + | .close-button { |
| + | display: none; |
| + | } |
| + | |
| + | // Consider revealed element is nested in content |
| + | .#{$maincontent-class} & { |
| + | transform: none; |
| + | } |
| + | |
| + | @at-root .#{$content}.has-reveal-#{$position} { |
| + | margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint); |
| + | } |
| + | |
| + | // backwards compatibility (prior to v6.4) |
| + | & ~ .#{$content} { |
| + | margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint); |
| + | } |
| + | } |
| + | |
| + | /// Overrides the off-canvas styles |
| + | @mixin in-canvas() { |
| + | visibility: visible; |
| + | height: auto; |
| + | position: static; |
| + | background: inherit; |
| + | width: inherit; |
| + | overflow: inherit; |
| + | transition: inherit; |
| + | |
| + | // Increase CSS specificity |
| + | &.position-left, |
| + | &.position-right, |
| + | &.position-top, |
| + | &.position-bottom { |
| + | box-shadow: none; |
| + | transform: none; |
| + | } |
| + | |
| + | .close-button { |
| + | display: none; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-off-canvas { |
| + | @include off-canvas-basics; |
| + | |
| + | // Off-canvas wrapper |
| + | .off-canvas-wrapper { |
| + | @include off-canvas-wrapper; |
| + | } |
| + | |
| + | // Off-canvas container |
| + | .off-canvas { |
| + | @include off-canvas-base; |
| + | |
| + | // Force position absolute for nested off-canvas because fixed doesn't work for push transition within the transform scope. |
| + | @at-root .#{$maincontent-class} & { |
| + | // NOTE: since overlap transition is currently forced if nested, there's no need to force position absolute until nested push transition is supported. |
| + | // position: absolute; |
| + | } |
| + | } |
| + | |
| + | // Off-canvas container with absolute position |
| + | .off-canvas-absolute { |
| + | @include off-canvas-base($fixed: false); |
| + | } |
| + | |
| + | // Off-canvas position classes |
| + | .position-left { @include off-canvas-position(left, horizontal); } |
| + | .position-right { @include off-canvas-position(right, horizontal); } |
| + | .position-top { @include off-canvas-position(top, vertical); } |
| + | .position-bottom { @include off-canvas-position(bottom, vertical); } |
| + | |
| + | .off-canvas-content { |
| + | @include off-canvas-content; |
| + | } |
| + | |
| + | // Reveal off-canvas panel on larger screens |
| + | @each $name, $value in $breakpoint-classes { |
| + | @if $name != $-zf-zero-breakpoint { |
| + | @include breakpoint($name) { |
| + | .position-left.reveal-for-#{$name} { |
| + | @include off-canvas-reveal(left, $offcanvas-reveal-zindex, $maincontent-class, $name); |
| + | } |
| + | |
| + | .position-right.reveal-for-#{$name} { |
| + | @include off-canvas-reveal(right, $offcanvas-reveal-zindex, $maincontent-class, $name); |
| + | } |
| + | |
| + | .position-top.reveal-for-#{$name} { |
| + | @include off-canvas-reveal(top, $offcanvas-reveal-zindex, $maincontent-class, $name); |
| + | } |
| + | |
| + | .position-bottom.reveal-for-#{$name} { |
| + | @include off-canvas-reveal(bottom, $offcanvas-reveal-zindex, $maincontent-class, $name); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Move in-canvas for larger screens |
| + | @each $name, $value in $breakpoint-classes { |
| + | @if $name != $-zf-zero-breakpoint { |
| + | @include breakpoint($name) { |
| + | .off-canvas.in-canvas-for-#{$name} { |
| + | @include in-canvas; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
public/stylesheets/foundation6/components/_orbit.scss
+196
-0
| @@ | @@ -0,0 +1,196 @@ |
| + | // 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; |
| + | height: 0; // Prevent FOUC by not showing until JS sets height |
| + | margin: 0; |
| + | list-style: none; |
| + | overflow: hidden; |
| + | } |
| + | |
| + | /// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class. |
| + | @mixin orbit-slide { |
| + | width: 100%; |
| + | |
| + | &.no-motionui { |
| + | &.is-active { |
| + | top: 0; |
| + | left: 0; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin orbit-figure { |
| + | margin: 0; |
| + | } |
| + | |
| + | /// Adds styles for a slide containing an image. These styles are used on the `.orbit-image` class. |
| + | @mixin orbit-image { |
| + | width: 100%; |
| + | max-width: 100%; |
| + | margin: 0; |
| + | } |
| + | |
| + | /// 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%; |
| + | margin-bottom: 0; |
| + | padding: $orbit-caption-padding; |
| + | |
| + | background-color: $orbit-caption-background; |
| + | color: color-pick-contrast($orbit-caption-background); |
| + | } |
| + | |
| + | /// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS. |
| + | @mixin orbit-control { |
| + | @include disable-mouse-outline; |
| + | @include 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; |
| + | |
| + | border-radius: 50%; |
| + | background-color: $orbit-bullet-background; |
| + | |
| + | &: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; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_pagination.scss
+193
-0
| @@ | @@ -0,0 +1,193 @@ |
| + | // 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 pagination 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: $white !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 |
| + | /// and optionally current page number. |
| + | /// @type Boolean |
| + | $pagination-mobile-items: false !default; |
| + | |
| + | /// If `true`, display the current page number on mobile even if `$pagination-mobile-items` is set to `false`. |
| + | /// This parameter will only override the visibility setting of the current item for `$pagination-mobile-items: false;`, |
| + | /// it will not affect the current page number visibility when `$pagination-mobile-items` is set to `true`. |
| + | /// @type Boolean |
| + | $pagination-mobile-current-item: false !default; |
| + | |
| + | /// If `true`, arrows are added to the next and previous links of pagination. |
| + | /// @type Boolean |
| + | $pagination-arrows: true !default; |
| + | |
| + | /// Adds styles for a pagination container. Apply this to a `<ul>`. |
| + | @mixin pagination-container ( |
| + | $margin-bottom: $pagination-margin-bottom, |
| + | $font-size: $pagination-font-size, |
| + | $spacing: $pagination-item-spacing, |
| + | $radius: $pagination-radius, |
| + | $color: $pagination-item-color, |
| + | $padding: $pagination-item-padding, |
| + | $background-hover: $pagination-item-background-hover |
| + | ) { |
| + | @include clearfix; |
| + | margin-#{$global-left}: 0; |
| + | margin-bottom: $margin-bottom; |
| + | |
| + | // List item |
| + | li { |
| + | margin-#{$global-right}: $spacing; |
| + | border-radius: $radius; |
| + | font-size: $font-size; |
| + | |
| + | @if $pagination-mobile-items { |
| + | display: inline-block; |
| + | } |
| + | @else { |
| + | display: none; |
| + | |
| + | &:last-child, |
| + | &:first-child { |
| + | display: inline-block; |
| + | } |
| + | |
| + | @if $pagination-mobile-current-item { |
| + | &.current { |
| + | display: inline-block; |
| + | } |
| + | } |
| + | |
| + | @include breakpoint(medium) { |
| + | display: inline-block; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Page links |
| + | a, |
| + | button { |
| + | display: block; |
| + | padding: $padding; |
| + | border-radius: $radius; |
| + | color: $color; |
| + | |
| + | &:hover { |
| + | background: $background-hover; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for the current pagination item. Apply this to an `<a>`. |
| + | @mixin pagination-item-current ( |
| + | $padding: $pagination-item-padding, |
| + | $background-current: $pagination-item-background-current, |
| + | $color-current: $pagination-item-color-current |
| + | ) { |
| + | padding: $padding; |
| + | background: $background-current; |
| + | color: $color-current; |
| + | cursor: default; |
| + | } |
| + | |
| + | /// Adds styles for a disabled pagination item. Apply this to an `<a>`. |
| + | @mixin pagination-item-disabled ( |
| + | $padding: $pagination-item-padding, |
| + | $color: $pagination-item-color-disabled |
| + | ) { |
| + | padding: $padding; |
| + | color: $color; |
| + | cursor: not-allowed; |
| + | |
| + | &:hover { |
| + | background: transparent; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for an ellipsis for use in a pagination list. |
| + | @mixin pagination-ellipsis ( |
| + | $padding: $pagination-item-padding, |
| + | $color: $pagination-ellipsis-color |
| + | ) { |
| + | padding: $padding; |
| + | content: '\2026'; |
| + | color: $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 { |
| + | display: inline-block; |
| + | margin-#{$global-right}: 0.5rem; |
| + | content: '\00ab'; |
| + | } |
| + | |
| + | .pagination-next a::after, |
| + | .pagination-next.disabled::after { |
| + | display: inline-block; |
| + | margin-#{$global-left}: 0.5rem; |
| + | content: '\00bb'; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_progress-bar.scss
+64
-0
| @@ | @@ -0,0 +1,64 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | /// Adds styles for a progress bar container. |
| + | @mixin progress-container { |
| + | height: $progress-height; |
| + | margin-bottom: $progress-margin-bottom; |
| + | border-radius: $progress-radius; |
| + | background-color: $progress-background; |
| + | } |
| + | |
| + | /// Adds styles for the inner meter of a progress bar. |
| + | @mixin progress-meter { |
| + | position: relative; |
| + | display: block; |
| + | width: 0%; |
| + | height: 100%; |
| + | background-color: $progress-meter-background; |
| + | |
| + | @if has-value($progress-radius) { |
| + | border-radius: $global-radius; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for text in the progress meter. |
| + | @mixin progress-meter-text { |
| + | @include absolute-center; |
| + | position: absolute; |
| + | margin: 0; |
| + | font-size: 0.75rem; |
| + | font-weight: bold; |
| + | color: $white; |
| + | white-space: nowrap; |
| + | |
| + | @if has-value($progress-radius) { |
| + | border-radius: $progress-radius; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-progress-bar { |
| + | // Progress bar |
| + | .progress { |
| + | @include progress-container; |
| + | |
| + | @each $name, $color in $foundation-palette { |
| + | &.#{$name} { |
| + | .progress-meter { |
| + | background-color: $color; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Inner meter |
| + | .progress-meter { |
| + | @include progress-meter; |
| + | } |
| + | |
| + | // Inner meter text |
| + | .progress-meter-text { |
| + | @include progress-meter-text; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_responsive-embed.scss
+70
-0
| @@ | @@ -0,0 +1,70 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group responsive-embed |
| + | //// |
| + | |
| + | /// Margin below a responsive embed container. |
| + | /// @type Number |
| + | $responsive-embed-margin-bottom: rem-calc(16) !default; |
| + | |
| + | /// Aspect ratios used to determine padding-bottom of responsive embed containers. |
| + | /// @type Map |
| + | $responsive-embed-ratios: ( |
| + | default: 4 by 3, |
| + | widescreen: 16 by 9, |
| + | ) !default; |
| + | |
| + | // WARNING: Will be removed in version 6.4 |
| + | $responsive-embed-ratio: default; |
| + | |
| + | /// Creates a responsive embed container. |
| + | /// @param {String|List} $ratio [default] - Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`. |
| + | @mixin responsive-embed($ratio: default) { |
| + | @if type-of($ratio) == 'string' { |
| + | $ratio: map-get($responsive-embed-ratios, $ratio); |
| + | } |
| + | position: relative; |
| + | height: 0; |
| + | margin-bottom: $responsive-embed-margin-bottom; |
| + | padding-bottom: ratio-to-percentage($ratio); |
| + | overflow: hidden; |
| + | |
| + | iframe, |
| + | object, |
| + | embed, |
| + | video { |
| + | position: absolute; |
| + | top: 0; |
| + | #{$global-left}: 0; |
| + | width: 100%; |
| + | height: 100%; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-responsive-embed { |
| + | .responsive-embed, |
| + | .flex-video { |
| + | @include responsive-embed($ratio: default); |
| + | |
| + | $ratios: map-remove($responsive-embed-ratios,default); |
| + | |
| + | @each $name, $ratio in $ratios { |
| + | &.#{$name} { |
| + | padding-bottom: ratio-to-percentage($ratio); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-flex-video { |
| + | @warn 'This mixin is being replaced by foundation-responsive-embed(). foundation-flex-video() will be removed in Foundation 6.4.'; |
| + | @include foundation-responsive-embed; |
| + | } |
| + | |
| + | @mixin flex-video($ratio: $responsive-embed-ratio) { |
| + | @warn 'This mixin is being replaced by responsive-embed(). flex-video() will be removed in Foundation 6.4.'; |
| + | @include responsive-embed($ratio); |
| + | } |
public/stylesheets/foundation6/components/_reveal.scss
+180
-0
| @@ | @@ -0,0 +1,180 @@ |
| + | // 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; |
| + | |
| + | /// 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; |
| + | |
| + | |
| + | // Placeholder selector for medium-and-up modals |
| + | // Prevents duplicate CSS when defining multiple Reveal sizes |
| + | @include breakpoint(medium) { |
| + | %reveal-centered { |
| + | right: auto; |
| + | left: auto; |
| + | margin: 0 auto; |
| + | } |
| + | } |
| + | |
| + | |
| + | /// Adds styles for a modal overlay. |
| + | /// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay. |
| + | @mixin reveal-overlay($background: $reveal-overlay-background) { |
| + | position: fixed; |
| + | top: 0; |
| + | right: 0; |
| + | bottom: 0; |
| + | left: 0; |
| + | z-index: $reveal-zindex; |
| + | |
| + | display: none; |
| + | background-color: $background; |
| + | overflow-y: scroll; |
| + | } |
| + | |
| + | /// Adds base styles for a modal. |
| + | @mixin reveal-modal-base { |
| + | @include disable-mouse-outline; |
| + | z-index: $reveal-zindex + 1; |
| + | // Workaround android browser z-index bug |
| + | backface-visibility: hidden; |
| + | |
| + | display: none; |
| + | padding: $reveal-padding; |
| + | |
| + | border: $reveal-border; |
| + | border-radius: $reveal-radius; |
| + | background-color: $reveal-background; |
| + | |
| + | @include breakpoint(medium) { |
| + | min-height: 0; |
| + | } |
| + | |
| + | // Make sure rows don't have a min-width on them |
| + | .column { |
| + | 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: $max-width; |
| + | } |
| + | } |
| + | |
| + | /// Creates a full-screen modal, which stretches the full width and height of the window. |
| + | @mixin reveal-modal-fullscreen { |
| + | top: 0; |
| + | left: 0; |
| + | |
| + | width: 100%; |
| + | max-width: none; |
| + | height: 100%; |
| + | height: 100vh; // sass-lint:disable-line no-duplicate-properties |
| + | min-height: 100vh; |
| + | margin-left: 0; |
| + | |
| + | border: 0; |
| + | border-radius: 0; |
| + | } |
| + | |
| + | @mixin foundation-reveal { |
| + | // [TODO] Is this necessary? |
| + | body.is-reveal-open { // sass-lint:disable-line no-qualifying-elements |
| + | overflow: hidden; |
| + | } |
| + | |
| + | // html gets this class only in iOS |
| + | html.is-reveal-open, |
| + | html.is-reveal-open body { |
| + | min-height: 100%; |
| + | overflow: hidden; |
| + | position: fixed; |
| + | user-select: none; |
| + | } |
| + | |
| + | // Overlay |
| + | .reveal-overlay { |
| + | @include reveal-overlay; |
| + | } |
| + | |
| + | // Modal container |
| + | .reveal { |
| + | @include reveal-modal-base; |
| + | @include reveal-modal-width($reveal-width); |
| + | position: relative; |
| + | top: 100px; |
| + | margin-right: auto; |
| + | margin-left: auto; |
| + | overflow-y: auto; |
| + | |
| + | // Remove padding |
| + | &.collapse { |
| + | padding: 0; |
| + | } |
| + | |
| + | // 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; |
| + | } |
| + | |
| + | @include breakpoint($-zf-zero-breakpoint only) { |
| + | @include reveal-modal-fullscreen; |
| + | } |
| + | |
| + | &.without-overlay { |
| + | position: fixed; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_slider.scss
+137
-0
| @@ | @@ -0,0 +1,137 @@ |
| + | // 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 slider width of a vertical slider. (Doesn't apply to the native slider.) |
| + | /// @type Number |
| + | $slider-width-vertical: 0.5rem !default; |
| + | |
| + | /// Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.) |
| + | /// @type Transition |
| + | $slider-transition: all 0.2s ease-in-out !default; |
| + | |
| + | /// 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; |
| + | left: 0; |
| + | z-index: 1; |
| + | |
| + | display: inline-block; |
| + | width: $slider-handle-width; |
| + | height: $slider-handle-height; |
| + | |
| + | border-radius: $slider-radius; |
| + | background-color: $slider-handle-background; |
| + | transition: $slider-transition; |
| + | touch-action: manipulation; |
| + | |
| + | &: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; |
| + | } |
| + | |
| + | // RTL support |
| + | @if $global-text-direction == rtl { |
| + | .slider:not(.vertical) { |
| + | transform: scale(-1, 1); |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_sticky.scss
+39
-0
| @@ | @@ -0,0 +1,39 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | @mixin foundation-sticky { |
| + | .sticky-container { |
| + | position: relative; |
| + | } |
| + | |
| + | .sticky { |
| + | position: relative; |
| + | z-index: 0; |
| + | transform: translate3d(0, 0, 0); |
| + | } |
| + | |
| + | .sticky.is-stuck { |
| + | position: fixed; |
| + | z-index: 5; |
| + | width: 100%; |
| + | |
| + | &.is-at-top { |
| + | top: 0; |
| + | } |
| + | |
| + | &.is-at-bottom { |
| + | bottom: 0; |
| + | } |
| + | } |
| + | |
| + | .sticky.is-anchored { |
| + | position: relative; |
| + | right: auto; |
| + | left: auto; |
| + | |
| + | &.is-at-bottom { |
| + | bottom: 0; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_switch.scss
+247
-0
| @@ | @@ -0,0 +1,247 @@ |
| + | // 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 { |
| + | position: relative; |
| + | margin-bottom: $switch-margin; |
| + | outline: 0; |
| + | |
| + | // These properties cascade down to the switch text |
| + | font-size: rem-calc(14); |
| + | font-weight: bold; |
| + | color: $white; |
| + | |
| + | user-select: none; |
| + | } |
| + | |
| + | /// Adds styles for a switch input. Apply this to an `<input>` within a switch. |
| + | @mixin switch-input { |
| + | position: absolute; |
| + | margin-bottom: 0; |
| + | opacity: 0; |
| + | } |
| + | |
| + | /// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch. |
| + | @mixin switch-paddle { |
| + | $switch-width: $switch-height * 2; |
| + | $paddle-height: $switch-height - ($switch-paddle-offset * 2); |
| + | $paddle-width: $switch-height - ($switch-paddle-offset * 2); |
| + | $paddle-active-offest: $switch-width - $paddle-width - $switch-paddle-offset; |
| + | |
| + | position: relative; |
| + | display: block; |
| + | width: $switch-width; |
| + | height: $switch-height; |
| + | |
| + | border-radius: $switch-radius; |
| + | background: $switch-background; |
| + | transition: $switch-paddle-transition; |
| + | |
| + | // Resetting these <label> presets so type styles cascade down |
| + | font-weight: inherit; |
| + | color: inherit; |
| + | |
| + | cursor: pointer; |
| + | |
| + | // Needed to override specificity |
| + | input + & { |
| + | margin: 0; |
| + | } |
| + | |
| + | // The paddle itself |
| + | &::after { |
| + | position: absolute; |
| + | top: $switch-paddle-offset; |
| + | #{$global-left}: $switch-paddle-offset; |
| + | |
| + | display: block; |
| + | width: $paddle-width; |
| + | height: $paddle-height; |
| + | |
| + | transform: translate3d(0, 0, 0); |
| + | border-radius: $switch-paddle-radius; |
| + | background: $switch-paddle-background; |
| + | transition: $switch-paddle-transition; |
| + | content: ''; |
| + | } |
| + | |
| + | // Change the visual style when the switch is active |
| + | input:checked ~ & { |
| + | background: $switch-background-active; |
| + | |
| + | &::after { |
| + | #{$global-left}: $paddle-active-offest; |
| + | } |
| + | } |
| + | |
| + | 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} $switch-height [2rem] - Height of the switch body. |
| + | /// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body. |
| + | @mixin switch-size( |
| + | $font-size: 1rem, |
| + | $switch-height: 2rem, |
| + | $paddle-offset: 0.25rem |
| + | ) { |
| + | |
| + | $switch-width: $switch-height * 2; |
| + | $paddle-width: $switch-height - ($paddle-offset * 2); |
| + | $paddle-height: $switch-height - ($paddle-offset * 2); |
| + | $paddle-active-offest: $switch-width - $paddle-width - $paddle-offset; |
| + | |
| + | height: $switch-height; |
| + | |
| + | .switch-paddle { |
| + | width: $switch-width; |
| + | height: $switch-height; |
| + | font-size: $font-size; |
| + | } |
| + | |
| + | .switch-paddle::after { |
| + | top: $paddle-offset; |
| + | #{$global-left}: $paddle-offset; |
| + | width: $paddle-width; |
| + | height: $paddle-height; |
| + | } |
| + | |
| + | input:checked ~ .switch-paddle::after { |
| + | #{$global-left}: $paddle-active-offest; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-switch { |
| + | // Container class |
| + | .switch { |
| + | height: $switch-height; |
| + | @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), $switch-height-tiny, $switch-paddle-offset); |
| + | } |
| + | |
| + | .switch.small { |
| + | @include switch-size(rem-calc(12), $switch-height-small, $switch-paddle-offset); |
| + | } |
| + | |
| + | .switch.large { |
| + | @include switch-size(rem-calc(16), $switch-height-large, $switch-paddle-offset); |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_table.scss
+330
-0
| @@ | @@ -0,0 +1,330 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | // sass-lint:disable force-element-nesting, no-qualifying-elements |
| + | |
| + | //// |
| + | /// @group table |
| + | //// |
| + | |
| + | /// Default color for table background. |
| + | /// @type Color |
| + | $table-background: $white !default; |
| + | |
| + | /// Default scale for darkening the striped table rows and the table border. |
| + | /// @type Number |
| + | $table-color-scale: 5% !default; |
| + | |
| + | /// Default style for table border. |
| + | /// @type List |
| + | $table-border: 1px solid smart-scale($table-background, $table-color-scale) !default; |
| + | |
| + | /// Default padding for table. |
| + | /// @type Number |
| + | $table-padding: rem-calc(8 10 10) !default; |
| + | |
| + | /// Default scale for darkening the table rows on hover. |
| + | /// @type Number |
| + | $table-hover-scale: 2% !default; |
| + | |
| + | /// Default color of standard rows on hover. |
| + | /// @type List |
| + | $table-row-hover: darken($table-background, $table-hover-scale) !default; |
| + | |
| + | /// Default color of striped rows on hover. |
| + | /// @type List |
| + | $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default; |
| + | |
| + | /// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created. |
| + | /// @type Boolean |
| + | $table-is-striped: true !default; |
| + | |
| + | /// Default background color for striped rows. |
| + | /// @type Color |
| + | $table-striped-background: smart-scale($table-background, $table-color-scale) !default; |
| + | |
| + | /// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping. |
| + | /// @type Keyword |
| + | $table-stripe: even !default; |
| + | |
| + | /// Default color for header background. |
| + | /// @type Color |
| + | $table-head-background: smart-scale($table-background, $table-color-scale / 2) !default; |
| + | |
| + | /// Default color of header rows on hover. |
| + | /// @type List |
| + | $table-head-row-hover: darken($table-head-background, $table-hover-scale) !default; |
| + | |
| + | /// Default color for footer background. |
| + | /// @type Color |
| + | $table-foot-background: smart-scale($table-background, $table-color-scale) !default; |
| + | |
| + | /// Default color of footer rows on hover. |
| + | /// @type List |
| + | $table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default; |
| + | |
| + | /// Default font color for header. |
| + | /// @type Color |
| + | $table-head-font-color: $body-font-color !default; |
| + | |
| + | /// Default font color for footer. |
| + | /// @type Color |
| + | $table-foot-font-color: $body-font-color !default; |
| + | |
| + | /// Default value for showing the header when using stacked tables. |
| + | /// @type Boolean |
| + | $show-header-for-stacked: false !default; |
| + | |
| + | /// Breakpoint at which stacked table switches from mobile to desktop view. |
| + | /// @type Breakpoint |
| + | $table-stack-breakpoint: medium !default; |
| + | |
| + | @mixin -zf-table-stripe($stripe: $table-stripe) { |
| + | tr { |
| + | // If stripe is set to even, darken the even rows. |
| + | @if $stripe == even { |
| + | &:nth-child(even) { |
| + | border-bottom: 0; |
| + | background-color: $table-striped-background; |
| + | } |
| + | } |
| + | |
| + | // If stripe is set to odd, darken the odd rows. |
| + | @else if $stripe == odd { |
| + | &:nth-child(odd) { |
| + | background-color: $table-striped-background; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin -zf-table-unstripe() { |
| + | tr { |
| + | border-bottom: 0; |
| + | border-bottom: $table-border; |
| + | background-color: $table-background; |
| + | } |
| + | } |
| + | |
| + | @mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) { |
| + | thead, |
| + | tbody, |
| + | tfoot { |
| + | border: $table-border; |
| + | background-color: $table-background; |
| + | } |
| + | |
| + | // Caption |
| + | caption { |
| + | padding: $table-padding; |
| + | font-weight: $global-weight-bold; |
| + | } |
| + | |
| + | // Table head |
| + | thead { |
| + | background: $table-head-background; |
| + | color: $table-head-font-color; |
| + | } |
| + | |
| + | // Table foot |
| + | tfoot { |
| + | background: $table-foot-background; |
| + | color: $table-foot-font-color; |
| + | } |
| + | |
| + | // Table head and foot |
| + | thead, |
| + | tfoot { |
| + | // Rows within head and foot |
| + | tr { |
| + | background: transparent; |
| + | } |
| + | |
| + | // Cells within head and foot |
| + | th, |
| + | td { |
| + | padding: $table-padding; |
| + | font-weight: $global-weight-bold; |
| + | text-align: #{$global-left}; |
| + | } |
| + | } |
| + | |
| + | // Table rows |
| + | tbody { |
| + | th, |
| + | td { |
| + | padding: $table-padding; |
| + | } |
| + | } |
| + | |
| + | // If tables are striped |
| + | @if $is-striped == true { |
| + | tbody { |
| + | @include -zf-table-stripe($stripe); |
| + | } |
| + | |
| + | &.unstriped { |
| + | tbody { |
| + | @include -zf-table-unstripe(); |
| + | background-color: $table-background; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // If tables are not striped |
| + | @else if $is-striped == false { |
| + | tbody { |
| + | @include -zf-table-unstripe(); |
| + | } |
| + | |
| + | &.striped { |
| + | tbody { |
| + | @include -zf-table-stripe($stripe); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds the general styles for tables. |
| + | /// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even. |
| + | @mixin table( |
| + | $stripe: $table-stripe, |
| + | $nest: false |
| + | ) { |
| + | border-collapse: collapse; |
| + | width: 100%; |
| + | margin-bottom: $global-margin; |
| + | border-radius: $global-radius; |
| + | |
| + | @if $nest { |
| + | @include -zf-table-children-styles($stripe); |
| + | } |
| + | @else { |
| + | @at-root { |
| + | @include -zf-table-children-styles($stripe); |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds the ability to horizontally scroll the table when the content overflows horizontally. |
| + | @mixin table-scroll { |
| + | display: block; |
| + | width: 100%; |
| + | overflow-x: auto; |
| + | } |
| + | |
| + | /// Slightly darkens the table rows on hover. |
| + | @mixin table-hover { |
| + | thead tr { |
| + | //Darkens the table header rows on hover. |
| + | &:hover { |
| + | background-color: $table-head-row-hover; |
| + | } |
| + | } |
| + | |
| + | tfoot tr { |
| + | //Darkens the table footer rows on hover. |
| + | &:hover { |
| + | background-color: $table-foot-row-hover; |
| + | } |
| + | } |
| + | |
| + | tbody tr { |
| + | //Darkens the non-striped table rows on hover. |
| + | &:hover { |
| + | background-color: $table-row-hover; |
| + | } |
| + | } |
| + | |
| + | @if $table-is-striped == true { |
| + | // Darkens the even striped table rows. |
| + | @if($table-stripe == even) { |
| + | &:not(.unstriped) tr:nth-of-type(even):hover { |
| + | background-color: $table-row-stripe-hover; |
| + | } |
| + | } |
| + | |
| + | // Darkens the odd striped table rows. |
| + | @elseif($table-stripe == odd) { |
| + | &:not(.unstriped) tr:nth-of-type(odd):hover { |
| + | background-color: $table-row-stripe-hover; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @else if $table-is-striped == false { |
| + | // Darkens the even striped table rows. |
| + | @if($table-stripe == even) { |
| + | &.striped tr:nth-of-type(even):hover { |
| + | background-color: $table-row-stripe-hover; |
| + | } |
| + | } |
| + | |
| + | // Darkens the odd striped table rows. |
| + | @elseif($table-stripe == odd) { |
| + | &.striped tr:nth-of-type(odd):hover { |
| + | background-color: $table-row-stripe-hover; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// 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 { |
| + | display: block; |
| + | } |
| + | } |
| + | } |
| + | @else { |
| + | thead { |
| + | display: none; |
| + | } |
| + | } |
| + | |
| + | tfoot { |
| + | display: none; |
| + | } |
| + | |
| + | tr, |
| + | th, |
| + | td { |
| + | display: block; |
| + | } |
| + | |
| + | td { |
| + | border-top: 0; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-table($nest: false) { |
| + | table { |
| + | @include table($nest: $nest); |
| + | } |
| + | |
| + | table.stack { |
| + | @include breakpoint($table-stack-breakpoint down) { |
| + | @include table-stack; |
| + | } |
| + | } |
| + | |
| + | table.scroll { |
| + | @include table-scroll; |
| + | } |
| + | |
| + | table.hover { |
| + | @include table-hover; |
| + | } |
| + | |
| + | .table-scroll { |
| + | overflow-x: auto; |
| + | |
| + | table { |
| + | width: auto; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_tabs.scss
+196
-0
| @@ | @@ -0,0 +1,196 @@ |
| + | // 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; |
| + | |
| + | /// Font color of tab item. |
| + | /// @type Color |
| + | $tab-color: $primary-color !default; |
| + | |
| + | /// Active background color of a tab bar. |
| + | /// @type Color |
| + | $tab-background-active: $light-gray !default; |
| + | |
| + | /// Active font color of tab item. |
| + | /// @type Color |
| + | $tab-active-color: $primary-color !default; |
| + | |
| + | /// Font size of tab items. |
| + | /// @type Number |
| + | $tab-item-font-size: rem-calc(12) !default; |
| + | |
| + | /// Default background color on hover for items in a Menu. |
| + | $tab-item-background-hover: $white !default; |
| + | |
| + | /// Default padding of a 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: $body-font-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 ( |
| + | $margin: $tab-margin, |
| + | $background: $tab-background, |
| + | $border-color: $tab-content-border |
| + | ) { |
| + | @include clearfix; |
| + | margin: $margin; |
| + | border: 1px solid $border-color; |
| + | background: $background; |
| + | list-style-type: none; |
| + | } |
| + | |
| + | /// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`. |
| + | @mixin tabs-container-vertical { |
| + | > li { |
| + | display: block; |
| + | float: none; |
| + | width: auto; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container. |
| + | @mixin tabs-title ( |
| + | $padding: $tab-item-padding, |
| + | $font-size: $tab-item-font-size, |
| + | $color: $tab-color, |
| + | $color-active: $tab-active-color, |
| + | $background-hover: $tab-item-background-hover, |
| + | $background-active: $tab-background-active |
| + | ) { |
| + | float: #{$global-left}; |
| + | |
| + | > a { |
| + | display: block; |
| + | padding: $padding; |
| + | font-size: $font-size; |
| + | line-height: 1; |
| + | color: $color; |
| + | |
| + | &:hover { |
| + | background: $background-hover; |
| + | color: scale-color($color, $lightness: -14%); |
| + | } |
| + | |
| + | &:focus, |
| + | &[aria-selected='true'] { |
| + | background: $background-active; |
| + | color: $color-active; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for the wrapper that surrounds a tab group's content panes. |
| + | @mixin tabs-content ( |
| + | $background: $tab-content-background, |
| + | $color: $tab-content-color, |
| + | $border-color: $tab-content-border |
| + | ) { |
| + | border: 1px solid $border-color; |
| + | border-top: 0; |
| + | background: $background; |
| + | color: $color; |
| + | transition: all 0.5s ease; |
| + | } |
| + | |
| + | /// Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with `tabs-content()`. |
| + | @mixin tabs-content-vertical ( |
| + | $border-color: $tab-content-border |
| + | ) { |
| + | border: 1px solid $border-color; |
| + | border-#{$global-left}: 0; |
| + | } |
| + | |
| + | /// Adds styles for an individual tab content panel within the tab content container. |
| + | @mixin tabs-panel ( |
| + | $padding: $tab-content-padding |
| + | ) { |
| + | display: none; |
| + | padding: $padding; |
| + | |
| + | &.is-active { |
| + | display: block; |
| + | } |
| + | } |
| + | |
| + | @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: color-pick-contrast($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; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_thumbnail.scss
+67
-0
| @@ | @@ -0,0 +1,67 @@ |
| + | // 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 { |
| + | display: inline-block; |
| + | max-width: 100%; |
| + | margin-bottom: $thumbnail-margin-bottom; |
| + | |
| + | border: $thumbnail-border; |
| + | border-radius: $thumbnail-radius; |
| + | box-shadow: $thumbnail-shadow; |
| + | |
| + | line-height: 0; |
| + | } |
| + | |
| + | @mixin thumbnail-link { |
| + | transition: $thumbnail-transition; |
| + | |
| + | &:hover, |
| + | &:focus { |
| + | box-shadow: $thumbnail-shadow-hover; |
| + | } |
| + | |
| + | image { |
| + | box-shadow: none; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-thumbnail { |
| + | .thumbnail { |
| + | @include thumbnail; |
| + | } |
| + | |
| + | a.thumbnail { |
| + | @include thumbnail-link; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_title-bar.scss
+84
-0
| @@ | @@ -0,0 +1,84 @@ |
| + | // 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 { |
| + | padding: $titlebar-padding; |
| + | background: $titlebar-background; |
| + | color: $titlebar-color; |
| + | |
| + | @if $global-flexbox { |
| + | display: flex; |
| + | justify-content: flex-start; |
| + | align-items: center; |
| + | } |
| + | @else { |
| + | @include clearfix; |
| + | } |
| + | |
| + | .menu-icon { |
| + | margin-#{$global-left}: $titlebar-icon-spacing; |
| + | margin-#{$global-right}: $titlebar-icon-spacing; |
| + | } |
| + | } |
| + | |
| + | @if $global-flexbox { |
| + | .title-bar-left, |
| + | .title-bar-right { |
| + | flex: 1 1 0px; // sass-lint:disable-line zero-unit |
| + | } |
| + | |
| + | .title-bar-right { |
| + | text-align: right; |
| + | } |
| + | } |
| + | @else { |
| + | .title-bar-left { |
| + | float: left; |
| + | } |
| + | |
| + | .title-bar-right { |
| + | float: right; |
| + | text-align: right; |
| + | } |
| + | } |
| + | |
| + | .title-bar-title { |
| + | display: inline-block; |
| + | vertical-align: middle; |
| + | font-weight: $titlebar-text-font-weight; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_tooltip.scss
+160
-0
| @@ | @@ -0,0 +1,160 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group tooltip |
| + | //// |
| + | |
| + | /// Default cursor of the defined term. |
| + | /// @type Keyword |
| + | $has-tip-cursor: help !default; |
| + | |
| + | /// Default font weight of the defined term. |
| + | /// @type Keyword | Number |
| + | $has-tip-font-weight: $global-weight-bold !default; |
| + | |
| + | /// Default border bottom of the defined term. |
| + | /// @type List |
| + | $has-tip-border-bottom: dotted 1px $dark-gray !default; |
| + | |
| + | /// Default color of the tooltip background. |
| + | /// @type Color |
| + | $tooltip-background-color: $black !default; |
| + | |
| + | /// Default color of the tooltip font. |
| + | /// @type Color |
| + | $tooltip-color: $white !default; |
| + | |
| + | /// Default padding of the tooltip background. |
| + | /// @type Number |
| + | $tooltip-padding: 0.75rem !default; |
| + | |
| + | /// Default max width for tooltips. |
| + | /// @type Number |
| + | $tooltip-max-width: 10rem !default; |
| + | |
| + | /// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy. |
| + | /// @type Number |
| + | $tooltip-font-size: $small-font-size !default; |
| + | |
| + | /// 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 radius for tooltips. |
| + | /// @type Number |
| + | $tooltip-radius: $global-radius !default; |
| + | |
| + | @mixin has-tip { |
| + | position: relative; |
| + | display: inline-block; |
| + | |
| + | border-bottom: $has-tip-border-bottom; |
| + | font-weight: $has-tip-font-weight; |
| + | cursor: $has-tip-cursor; |
| + | } |
| + | |
| + | @mixin tooltip { |
| + | position: absolute; |
| + | top: calc(100% + #{$tooltip-pip-height}); |
| + | z-index: 1200; |
| + | |
| + | max-width: $tooltip-max-width; |
| + | padding: $tooltip-padding; |
| + | |
| + | border-radius: $tooltip-radius; |
| + | background-color: $tooltip-background-color; |
| + | font-size: $tooltip-font-size; |
| + | color: $tooltip-color; |
| + | |
| + | &::before { |
| + | position: absolute; |
| + | } |
| + | |
| + | &.bottom { |
| + | &::before { |
| + | @include css-triangle($tooltip-pip-width, $tooltip-background-color, up); |
| + | bottom: 100%; |
| + | } |
| + | |
| + | &.align-center::before { |
| + | left: 50%; |
| + | transform: translateX(-50%); |
| + | } |
| + | } |
| + | |
| + | &.top { |
| + | &::before { |
| + | @include css-triangle($tooltip-pip-width, $tooltip-background-color, down); |
| + | top: 100%; |
| + | bottom: auto; |
| + | } |
| + | |
| + | &.align-center::before { |
| + | left: 50%; |
| + | transform: translateX(-50%); |
| + | } |
| + | } |
| + | |
| + | &.left { |
| + | &::before { |
| + | @include css-triangle($tooltip-pip-width, $tooltip-background-color, right); |
| + | left: 100%; |
| + | } |
| + | |
| + | &.align-center::before { |
| + | bottom: auto; |
| + | top: 50%; |
| + | transform: translateY(-50%); |
| + | } |
| + | } |
| + | |
| + | &.right { |
| + | &::before { |
| + | @include css-triangle($tooltip-pip-width, $tooltip-background-color, left); |
| + | right: 100%; |
| + | left: auto; |
| + | } |
| + | |
| + | &.align-center::before { |
| + | bottom: auto; |
| + | top: 50%; |
| + | transform: translateY(-50%); |
| + | } |
| + | } |
| + | |
| + | &.align-top::before { |
| + | bottom: auto; |
| + | top: 10%; |
| + | } |
| + | |
| + | &.align-bottom::before { |
| + | bottom: 10%; |
| + | top: auto; |
| + | } |
| + | |
| + | &.align-left::before { |
| + | left: 10%; |
| + | right: auto; |
| + | } |
| + | |
| + | &.align-right::before { |
| + | left: auto; |
| + | right: 10%; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-tooltip { |
| + | .has-tip { |
| + | @include has-tip; |
| + | } |
| + | |
| + | .tooltip { |
| + | @include tooltip; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_top-bar.scss
+175
-0
| @@ | @@ -0,0 +1,175 @@ |
| + | // 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; |
| + | |
| + | /// Background color submenus within the top bar. Usefull if $topbar-background is transparent. |
| + | /// @type Color |
| + | $topbar-submenu-background: $topbar-background !default; |
| + | |
| + | /// Spacing for the top bar title. |
| + | /// @type Number |
| + | $topbar-title-spacing: 0.5rem 1rem 0.5rem 0 !default; |
| + | |
| + | /// Maximum width of `<input>` elements inside the top bar. |
| + | /// @type Number |
| + | $topbar-input-width: 200px !default; |
| + | |
| + | /// Breakpoint at which top bar switches from mobile to desktop view. |
| + | /// @type Breakpoint |
| + | $topbar-unstack-breakpoint: medium !default; |
| + | |
| + | /// Adds styles for a top bar container. |
| + | @mixin top-bar-container { |
| + | @if $global-flexbox { |
| + | display: flex; |
| + | flex-wrap: nowrap; |
| + | justify-content: space-between; |
| + | align-items: center; |
| + | } |
| + | @else { |
| + | @include clearfix; |
| + | } |
| + | |
| + | padding: $topbar-padding; |
| + | |
| + | &, |
| + | ul { |
| + | background-color: $topbar-background; |
| + | } |
| + | |
| + | // Check if $topbar-background is differnt from $topbar-background-submenu |
| + | @if ($topbar-background != $topbar-submenu-background) { |
| + | ul ul { |
| + | background-color: $topbar-submenu-background; |
| + | } |
| + | } |
| + | |
| + | // Restrain width of inputs by default to make them easier to arrange |
| + | input { |
| + | max-width: $topbar-input-width; |
| + | margin-#{$global-right}: 1rem; |
| + | } |
| + | |
| + | // The above styles shouldn't apply to input group fields |
| + | .input-group-field { |
| + | width: 100%; |
| + | margin-#{$global-right}: 0; |
| + | } |
| + | |
| + | input.button { // sass-lint:disable-line no-qualifying-elements |
| + | width: auto; |
| + | } |
| + | } |
| + | |
| + | /// Makes sections of a top bar stack on top of each other. |
| + | @mixin top-bar-stacked { |
| + | @if $global-flexbox { |
| + | flex-wrap: wrap; |
| + | |
| + | // Sub-sections |
| + | .top-bar-left, |
| + | .top-bar-right { |
| + | flex: 0 0 100%; |
| + | max-width: 100%; |
| + | } |
| + | } |
| + | @else { |
| + | // Sub-sections |
| + | .top-bar-left, |
| + | .top-bar-right { |
| + | width: 100%; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Undoes the CSS applied by the `top-bar-stacked()` mixin. |
| + | @mixin top-bar-unstack { |
| + | @if $global-flexbox { |
| + | flex-wrap: nowrap; |
| + | |
| + | .top-bar-left { |
| + | flex: 1 1 auto; |
| + | margin-right: auto; |
| + | } |
| + | |
| + | .top-bar-right { |
| + | flex: 0 1 auto; |
| + | margin-left: auto; |
| + | } |
| + | } |
| + | @else { |
| + | .top-bar-left, |
| + | .top-bar-right { |
| + | width: auto; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-top-bar { |
| + | // Top bar container |
| + | .top-bar { |
| + | @include top-bar-container; |
| + | |
| + | // Stack on small screens by default |
| + | @include top-bar-stacked; |
| + | |
| + | @include breakpoint($topbar-unstack-breakpoint) { |
| + | @include top-bar-unstack; |
| + | } |
| + | |
| + | // Generate classes for stacking on each screen size (defined in $breakpoint-classes) |
| + | @each $size in $breakpoint-classes { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | &.stacked-for-#{$size} { |
| + | @include breakpoint($size down) { |
| + | @include top-bar-stacked; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Sub-sections |
| + | @if $global-flexbox { |
| + | .top-bar-title { |
| + | flex: 0 0 auto; |
| + | margin: $topbar-title-spacing; |
| + | } |
| + | |
| + | .top-bar-left, |
| + | .top-bar-right { |
| + | flex: 0 0 auto; |
| + | } |
| + | } |
| + | @else { |
| + | .top-bar-title { |
| + | display: inline-block; |
| + | float: left; |
| + | padding: $topbar-title-spacing; |
| + | |
| + | .menu-icon { |
| + | bottom: 2px; |
| + | } |
| + | } |
| + | |
| + | .top-bar-left { |
| + | float: left; |
| + | } |
| + | |
| + | .top-bar-right { |
| + | float: right; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_visibility.scss
+132
-0
| @@ | @@ -0,0 +1,132 @@ |
| + | // 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 strip-unit($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 != $-zf-zero-breakpoint { |
| + | .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; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_checkbox.scss
+41
-0
| @@ | @@ -0,0 +1,41 @@ |
| + | // 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; |
| + | vertical-align: baseline; |
| + | |
| + | margin-#{$global-left}: $form-spacing * 0.5; |
| + | margin-#{$global-right}: $form-spacing; |
| + | margin-bottom: 0; |
| + | |
| + | &[for] { |
| + | cursor: pointer; |
| + | } |
| + | } |
| + | |
| + | // Styles for inputs inside labels |
| + | label > [type='checkbox'], |
| + | label > [type='radio'] { |
| + | margin-#{$global-right}: $form-spacing * 0.5; |
| + | } |
| + | |
| + | // Normalize file input width |
| + | [type='file'] { |
| + | width: 100%; |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_error.scss
+88
-0
| @@ | @@ -0,0 +1,88 @@ |
| + | // 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: get-color(alert) !default; |
| + | |
| + | /// Color to use for labels of invalid inputs. |
| + | /// @type Color |
| + | $form-label-color-invalid: get-color(alert) !default; |
| + | |
| + | /// Default font color for form error text. |
| + | /// @type Color |
| + | $input-error-color: get-color(alert) !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. |
| + | /// @param {Number} $background-lighten [10%] - Lightness level of the background color. |
| + | @mixin form-input-error( |
| + | $background: $input-background-invalid, |
| + | $background-lighten: 10% |
| + | ) { |
| + | &:not(:focus) { |
| + | border-color: $background; |
| + | background-color: mix($background, $white, $background-lighten); |
| + | &::placeholder { |
| + | 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; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_fieldset.scss
+53
-0
| @@ | @@ -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 { |
| + | margin: $fieldset-margin; |
| + | padding: $fieldset-padding; |
| + | border: $fieldset-border; |
| + | |
| + | legend { |
| + | // Covers up the fieldset's border to create artificial padding |
| + | margin: 0; |
| + | margin-#{$global-left}: rem-calc(-3); |
| + | padding: $legend-padding; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-form-fieldset { |
| + | fieldset { |
| + | margin: 0; |
| + | padding: 0; |
| + | border: 0; |
| + | } |
| + | |
| + | legend { |
| + | max-width: 100%; |
| + | margin-bottom: $form-spacing * 0.5; |
| + | } |
| + | |
| + | .fieldset { |
| + | @include fieldset; |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_forms.scss
+34
-0
| @@ | @@ -0,0 +1,34 @@ |
| + | // 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'; |
| + | @import 'checkbox'; |
| + | @import 'label'; |
| + | @import 'help-text'; |
| + | @import 'input-group'; |
| + | @import 'fieldset'; |
| + | @import 'select'; |
| + | @import 'range'; |
| + | @import 'progress'; |
| + | @import 'meter'; |
| + | @import 'error'; |
| + | |
| + | @mixin foundation-forms { |
| + | @include foundation-form-text; |
| + | @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; |
| + | } |
public/stylesheets/foundation6/forms/_help-text.scss
+30
-0
| @@ | @@ -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: $black !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; |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_input-group.scss
+142
-0
| @@ | @@ -0,0 +1,142 @@ |
| + | // 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: if($global-flexbox, flex, table); |
| + | width: 100%; |
| + | margin-bottom: $form-spacing; |
| + | |
| + | @if $global-flexbox { |
| + | align-items: stretch; |
| + | } |
| + | |
| + | > :first-child { |
| + | border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius); |
| + | } |
| + | |
| + | > :last-child { |
| + | > * { |
| + | border-radius: if($global-text-direction == rtl, $input-radius 0 0 $input-radius, 0 $input-radius $input-radius 0); |
| + | } |
| + | } |
| + | } |
| + | |
| + | %input-group-child { |
| + | margin: 0; |
| + | white-space: nowrap; |
| + | |
| + | @if not $global-flexbox { |
| + | display: table-cell; |
| + | vertical-align: middle; |
| + | } |
| + | } |
| + | |
| + | .input-group-label { |
| + | @extend %input-group-child; |
| + | padding: 0 $input-prefix-padding; |
| + | border: $input-prefix-border; |
| + | background: $input-prefix-background; |
| + | |
| + | color: $input-prefix-color; |
| + | text-align: center; |
| + | white-space: nowrap; |
| + | |
| + | @if $global-flexbox { |
| + | display: flex; |
| + | flex: 0 0 auto; |
| + | align-items: center; |
| + | } |
| + | @else { |
| + | width: 1%; |
| + | height: 100%; |
| + | } |
| + | |
| + | @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; |
| + | |
| + | @if $global-flexbox { |
| + | flex: 1 1 0px; // sass-lint:disable-line zero-unit |
| + | height: auto; |
| + | min-width: 0; |
| + | } |
| + | @else { |
| + | height: $height; |
| + | } |
| + | } |
| + | |
| + | .input-group-button { |
| + | @extend %input-group-child; |
| + | padding-top: 0; |
| + | padding-bottom: 0; |
| + | text-align: center; |
| + | |
| + | @if $global-flexbox { |
| + | display: flex; |
| + | flex: 0 0 auto; |
| + | } |
| + | @else { |
| + | width: 1%; |
| + | height: 100%; |
| + | } |
| + | |
| + | a, |
| + | input, |
| + | button, |
| + | label { |
| + | @extend %input-group-child; |
| + | |
| + | @if $global-flexbox { |
| + | height: auto; |
| + | align-self: stretch; |
| + | } |
| + | @else { |
| + | height: $height; |
| + | } |
| + | padding-top: 0; |
| + | padding-bottom: 0; |
| + | font-size: $input-font-size; |
| + | } |
| + | } |
| + | |
| + | // Specificity bump needed to prevent override by buttons |
| + | @if not $global-flexbox { |
| + | .input-group .input-group-button { |
| + | display: table-cell; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_label.scss
+50
-0
| @@ | @@ -0,0 +1,50 @@ |
| + | // 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; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_meter.scss
+116
-0
| @@ | @@ -0,0 +1,116 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group meter |
| + | //// |
| + | |
| + | /// Height of a `<meter>` element. |
| + | /// @type Length |
| + | $meter-height: 1rem !default; |
| + | |
| + | /// Border radius of a `<meter>` element. |
| + | /// @type Length |
| + | $meter-radius: $global-radius !default; |
| + | |
| + | /// Background color of a `<meter>` element. |
| + | /// @type Color |
| + | $meter-background: $medium-gray !default; |
| + | |
| + | /// Meter fill for an optimal value in a `<meter>` element. |
| + | /// @type Color |
| + | $meter-fill-good: $success-color !default; |
| + | |
| + | /// Meter fill for an average value in a `<meter>` element. |
| + | /// @type Color |
| + | $meter-fill-medium: $warning-color !default; |
| + | |
| + | /// Meter fill for a suboptimal value in a `<meter>` element. |
| + | /// @type Color |
| + | $meter-fill-bad: $alert-color !default; |
| + | |
| + | @mixin foundation-meter-element { |
| + | meter { |
| + | display: block; |
| + | width: 100%; |
| + | height: $meter-height; |
| + | margin-bottom: 1rem; |
| + | |
| + | // Disable `-webkit-appearance: none` from getting prefixed, |
| + | // We have disabled autoprefixer first and are just only using |
| + | // `-moz-appearance: none` as a prefix and neglecting the webkit. |
| + | |
| + | /*! autoprefixer: off */ |
| + | -moz-appearance: none; |
| + | appearance: none; |
| + | |
| + | @if has-value($meter-radius) { |
| + | border-radius: $meter-radius; |
| + | } |
| + | |
| + | // For Firefox |
| + | border: 0; |
| + | background: $meter-background; |
| + | |
| + | // Chrome/Safari/Edge |
| + | &::-webkit-meter-bar { |
| + | border: 0; |
| + | @if has-value($meter-radius) { |
| + | border-radius: $meter-radius; |
| + | } |
| + | |
| + | background: $meter-background; |
| + | } |
| + | |
| + | &::-webkit-meter-inner-element { |
| + | @if has-value($meter-radius) { |
| + | border-radius: $meter-radius; |
| + | } |
| + | } |
| + | |
| + | &::-webkit-meter-optimum-value { |
| + | background: $meter-fill-good; |
| + | |
| + | @if has-value($meter-radius) { |
| + | border-radius: $meter-radius; |
| + | } |
| + | } |
| + | |
| + | &::-webkit-meter-suboptimum-value { |
| + | background: $meter-fill-medium; |
| + | |
| + | @if has-value($meter-radius) { |
| + | border-radius: $meter-radius; |
| + | } |
| + | } |
| + | |
| + | &::-webkit-meter-even-less-good-value { |
| + | background: $meter-fill-bad; |
| + | |
| + | @if has-value($meter-radius) { |
| + | border-radius: $meter-radius; |
| + | } |
| + | } |
| + | |
| + | &::-moz-meter-bar { |
| + | background: $primary-color; |
| + | |
| + | @if has-value($meter-radius) { |
| + | border-radius: $meter-radius; |
| + | } |
| + | } |
| + | |
| + | &:-moz-meter-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting |
| + | background: $meter-fill-good; |
| + | } |
| + | |
| + | &:-moz-meter-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting |
| + | background: $meter-fill-medium; |
| + | } |
| + | |
| + | &:-moz-meter-sub-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting |
| + | background: $meter-fill-bad; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_progress.scss
+94
-0
| @@ | @@ -0,0 +1,94 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group progress-bar |
| + | //// |
| + | |
| + | /// Height of a progress bar. |
| + | /// @type Number |
| + | $progress-height: 1rem !default; |
| + | |
| + | /// Background color of a progress bar. |
| + | /// @type Color |
| + | $progress-background: $medium-gray !default; |
| + | |
| + | /// Bottom margin of a progress bar. |
| + | /// @type Number |
| + | $progress-margin-bottom: $global-margin !default; |
| + | |
| + | /// Default color of a progress bar's meter. |
| + | /// @type Color |
| + | $progress-meter-background: $primary-color !default; |
| + | |
| + | /// Default radius of a progress bar. |
| + | /// @type Number |
| + | $progress-radius: $global-radius !default; |
| + | |
| + | @mixin foundation-progress-element { |
| + | progress { |
| + | display: block; |
| + | width: 100%; |
| + | height: $progress-height; |
| + | margin-bottom: $progress-margin-bottom; |
| + | |
| + | appearance: none; |
| + | |
| + | @if hasvalue($progress-radius) { |
| + | border-radius: $progress-radius; |
| + | } |
| + | |
| + | // For Firefox |
| + | border: 0; |
| + | background: $progress-background; |
| + | |
| + | &::-webkit-progress-bar { |
| + | background: $progress-background; |
| + | |
| + | @if hasvalue($progress-radius) { |
| + | border-radius: $progress-radius; |
| + | } |
| + | } |
| + | |
| + | &::-webkit-progress-value { |
| + | background: $progress-meter-background; |
| + | |
| + | @if hasvalue($progress-radius) { |
| + | border-radius: $progress-radius; |
| + | } |
| + | } |
| + | |
| + | &::-moz-progress-bar { |
| + | background: $progress-meter-background; |
| + | |
| + | @if hasvalue($progress-radius) { |
| + | border-radius: $progress-radius; |
| + | } |
| + | } |
| + | |
| + | @each $name, $color in $foundation-palette { |
| + | &.#{$name} { |
| + | // Internet Explorer sets the fill with color |
| + | color: $color; |
| + | |
| + | &::-webkit-progress-value { |
| + | background: $color; |
| + | } |
| + | |
| + | &::-moz-progress-bar { |
| + | background: $color; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // For IE and Edge |
| + | &::-ms-fill { |
| + | @if hasvalue($progress-radius) { |
| + | border-radius: $progress-radius; |
| + | } |
| + | |
| + | border: 0; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_range.scss
+149
-0
| @@ | @@ -0,0 +1,149 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group slider |
| + | //// |
| + | |
| + | /// Default height of the slider. |
| + | /// @type Number |
| + | $slider-height: 0.5rem !default; |
| + | |
| + | /// Default background color of the slider's track. |
| + | /// @type Color |
| + | $slider-background: $light-gray !default; |
| + | |
| + | /// Default color of the active fill color of the slider. |
| + | /// @type Color |
| + | $slider-fill-background: $medium-gray !default; |
| + | |
| + | /// Default height of the handle of the slider. |
| + | /// @type Number |
| + | $slider-handle-height: 1.4rem !default; |
| + | |
| + | /// Default width of the handle of the slider. |
| + | /// @type Number |
| + | $slider-handle-width: 1.4rem !default; |
| + | |
| + | /// Default color of the handle for the slider. |
| + | /// @type Color |
| + | $slider-handle-background: $primary-color !default; |
| + | |
| + | /// Default fade amount of a disabled slider. |
| + | /// @type Number |
| + | $slider-opacity-disabled: 0.25 !default; |
| + | |
| + | /// Default radius for slider. |
| + | /// @type Number |
| + | $slider-radius: $global-radius !default; |
| + | |
| + | @mixin foundation-range-input { |
| + | input[type="range"] { // sass-lint:disable-line no-qualifying-elements |
| + | $margin: ($slider-handle-height - $slider-height) / 2; |
| + | |
| + | display: block; |
| + | width: 100%; |
| + | height: auto; |
| + | margin-top: $margin; |
| + | margin-bottom: $margin; |
| + | |
| + | appearance: none; |
| + | border: 0; |
| + | line-height: 1; |
| + | cursor: pointer; |
| + | |
| + | @if has-value($slider-radius) { |
| + | border-radius: $slider-radius; |
| + | } |
| + | |
| + | &:focus { |
| + | outline: 0; |
| + | } |
| + | |
| + | &[disabled] { |
| + | opacity: $slider-opacity-disabled; |
| + | } |
| + | |
| + | // sass-lint:disable no-vendor-prefix |
| + | |
| + | // Chrome/Safari |
| + | &::-webkit-slider-runnable-track { |
| + | height: $slider-height; |
| + | background: $slider-background; |
| + | } |
| + | |
| + | &::-webkit-slider-handle { |
| + | width: $slider-handle-width; |
| + | height: $slider-handle-height; |
| + | margin-top: -$margin; |
| + | |
| + | -webkit-appearance: none; |
| + | background: $slider-handle-background; |
| + | |
| + | @if has-value($slider-radius) { |
| + | border-radius: $slider-radius; |
| + | } |
| + | } |
| + | |
| + | // Firefox |
| + | &::-moz-range-track { |
| + | height: $slider-height; |
| + | -moz-appearance: none; |
| + | background: $slider-background; |
| + | } |
| + | |
| + | &::-moz-range-thumb { |
| + | width: $slider-handle-width; |
| + | height: $slider-handle-height; |
| + | margin-top: -$margin; |
| + | |
| + | -moz-appearance: none; |
| + | background: $slider-handle-background; |
| + | |
| + | @if has-value($slider-radius) { |
| + | border-radius: $slider-radius; |
| + | } |
| + | } |
| + | |
| + | // Internet Explorer |
| + | &::-ms-track { |
| + | height: $slider-height; |
| + | |
| + | border: 0; |
| + | border-top: $margin solid $body-background; |
| + | border-bottom: $margin solid $body-background; |
| + | background: $slider-background; |
| + | |
| + | overflow: visible; |
| + | color: transparent; |
| + | } |
| + | |
| + | &::-ms-thumb { |
| + | width: $slider-handle-width; |
| + | height: $slider-handle-height; |
| + | border: 0; |
| + | background: $slider-handle-background; |
| + | |
| + | @if has-value($slider-radius) { |
| + | border-radius: $slider-radius; |
| + | } |
| + | } |
| + | |
| + | &::-ms-fill-lower { |
| + | background: $slider-fill-background; |
| + | } |
| + | |
| + | &::-ms-fill-upper { |
| + | background: $slider-background; |
| + | } |
| + | |
| + | @at-root { |
| + | output { |
| + | vertical-align: middle; |
| + | margin-left: 0.5em; |
| + | line-height: $slider-handle-height; |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_select.scss
+86
-0
| @@ | @@ -0,0 +1,86 @@ |
| + | // 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: $dark-gray !default; |
| + | |
| + | /// Default radius for select menus. |
| + | /// @type Color |
| + | $select-radius: $global-radius !default; |
| + | |
| + | @mixin form-select { |
| + | $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1); |
| + | |
| + | height: $height; |
| + | margin: 0 0 $form-spacing; |
| + | padding: $input-padding; |
| + | |
| + | appearance: none; |
| + | border: $input-border; |
| + | border-radius: $select-radius; |
| + | background-color: $select-background; |
| + | |
| + | font-family: $input-font-family; |
| + | font-size: $input-font-size; |
| + | font-weight: $input-font-weight; |
| + | line-height: $input-line-height; |
| + | color: $input-color; |
| + | |
| + | @if $select-triangle-color != transparent { |
| + | @include background-triangle($select-triangle-color); |
| + | background-origin: content-box; |
| + | background-position: $global-right (-$form-spacing) center; |
| + | background-repeat: no-repeat; |
| + | background-size: 9px 6px; |
| + | |
| + | padding-#{$global-right}: ($form-spacing * 1.5); |
| + | } |
| + | |
| + | @if has-value($input-transition) { |
| + | transition: $input-transition; |
| + | } |
| + | |
| + | // Focus state |
| + | &:focus { |
| + | outline: none; |
| + | border: $input-border-focus; |
| + | background-color: $input-background-focus; |
| + | box-shadow: $input-shadow-focus; |
| + | |
| + | @if has-value($input-transition) { |
| + | transition: $input-transition; |
| + | } |
| + | } |
| + | |
| + | // Disabled state |
| + | &:disabled { |
| + | background-color: $input-background-disabled; |
| + | cursor: $input-cursor-disabled; |
| + | } |
| + | |
| + | // Hide the dropdown arrow shown in newer IE versions |
| + | &::-ms-expand { |
| + | display: none; |
| + | } |
| + | |
| + | &[multiple] { |
| + | height: auto; |
| + | background-image: none; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-form-select { |
| + | select { |
| + | @include form-select; |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_text.scss
+179
-0
| @@ | @@ -0,0 +1,179 @@ |
| + | // 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 color of placeholder text within text inputs. |
| + | /// @type Color |
| + | $input-placeholder-color: $medium-gray !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; |
| + | |
| + | /// Font weight of text inputs. |
| + | /// @type Keyword |
| + | $input-font-weight: $global-weight-normal !default; |
| + | |
| + | /// Line height of text inputs. |
| + | /// @type Keyword |
| + | $input-line-height: $global-lineheight !default; |
| + | |
| + | /// Background color of text inputs. |
| + | /// @type Color |
| + | $input-background: $white !default; |
| + | |
| + | /// 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; |
| + | |
| + | /// Padding of text inputs. |
| + | /// @type Color |
| + | $input-padding: $form-spacing / 2 !default; |
| + | |
| + | /// Box shadow inside text inputs when not focused. |
| + | /// @type Shadow |
| + | $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default; |
| + | |
| + | /// 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: not-allowed !default; |
| + | |
| + | /// Properties to transition on text inputs. |
| + | /// @type Transition |
| + | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out !default; |
| + | |
| + | /// Enables the up/down buttons that Chrome and Firefox add to `<input type='number'>` elements. |
| + | /// @type Boolean |
| + | $input-number-spinners: true !default; |
| + | |
| + | /// Radius for text inputs. |
| + | /// @type Border |
| + | $input-radius: $global-radius !default; |
| + | |
| + | /// Border radius for form buttons, defaulted to global-radius. |
| + | /// @type Number |
| + | $form-button-radius: $global-radius !default; |
| + | |
| + | @mixin form-element { |
| + | $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1); |
| + | |
| + | display: block; |
| + | box-sizing: border-box; |
| + | width: 100%; |
| + | height: $height; |
| + | margin: 0 0 $form-spacing; |
| + | padding: $input-padding; |
| + | |
| + | border: $input-border; |
| + | border-radius: $input-radius; |
| + | background-color: $input-background; |
| + | box-shadow: $input-shadow; |
| + | |
| + | font-family: $input-font-family; |
| + | font-size: $input-font-size; |
| + | font-weight: $input-font-weight; |
| + | line-height: $input-line-height; |
| + | color: $input-color; |
| + | |
| + | @if has-value($input-transition) { |
| + | transition: $input-transition; |
| + | } |
| + | |
| + | // Focus state |
| + | &:focus { |
| + | outline: none; |
| + | border: $input-border-focus; |
| + | background-color: $input-background-focus; |
| + | box-shadow: $input-shadow-focus; |
| + | |
| + | @if has-value($input-transition) { |
| + | transition: $input-transition; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-form-text { |
| + | // Text inputs |
| + | #{text-inputs()}, |
| + | textarea { |
| + | @include form-element; |
| + | appearance: none; |
| + | } |
| + | |
| + | // Text areas |
| + | textarea { |
| + | max-width: 100%; |
| + | |
| + | &[rows] { |
| + | height: auto; |
| + | } |
| + | } |
| + | |
| + | input, |
| + | textarea { |
| + | // Placeholder text |
| + | &::placeholder { |
| + | color: $input-placeholder-color; |
| + | } |
| + | |
| + | // Disabled/readonly state |
| + | &:disabled, |
| + | &[readonly] { |
| + | background-color: $input-background-disabled; |
| + | cursor: $input-cursor-disabled; |
| + | } |
| + | } |
| + | |
| + | // Reset styles on button-like inputs |
| + | [type='submit'], |
| + | [type='button'] { |
| + | appearance: none; |
| + | border-radius: $form-button-radius; |
| + | } |
| + | |
| + | // Reset Normalize setting content-box to search elements |
| + | input[type='search'] { // sass-lint:disable-line no-qualifying-elements |
| + | box-sizing: border-box; |
| + | } |
| + | |
| + | // Number input styles |
| + | [type='number'] { |
| + | @if not $input-number-spinners { |
| + | -moz-appearance: textfield; // sass-lint:disable-line no-vendor-prefix |
| + | |
| + | &::-webkit-inner-spin-button, |
| + | &::-webkit-outer-spin-button { |
| + | -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefix |
| + | margin: 0; |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/foundation.scss
+133
-0
| @@ | @@ -0,0 +1,133 @@ |
| + | /** |
| + | * Foundation for Sites by ZURB |
| + | * Version 6.4.3 |
| + | * foundation.zurb.com |
| + | * Licensed under MIT Open Source |
| + | */ |
| + | |
| + | // Dependencies |
| + | @import './_vendor/normalize-scss/sass/normalize'; |
| + | @import './_vendor/sassy-lists/stylesheets/helpers/missing-dependencies'; |
| + | @import './_vendor/sassy-lists/stylesheets/helpers/true'; |
| + | @import './_vendor/sassy-lists/stylesheets/functions/contain'; |
| + | @import './_vendor/sassy-lists/stylesheets/functions/purge'; |
| + | @import './_vendor/sassy-lists/stylesheets/functions/remove'; |
| + | @import './_vendor/sassy-lists/stylesheets/functions/replace'; |
| + | @import './_vendor/sassy-lists/stylesheets/functions/to-list'; |
| + | |
| + | // Settings |
| + | // import your own `settings` here or |
| + | // import and modify the default settings through |
| + | // @import 'settings/settings'; |
| + | |
| + | // Sass utilities |
| + | @import 'util/util'; |
| + | |
| + | // Global variables and styles |
| + | @import 'global'; |
| + | |
| + | // Components |
| + | @import 'grid/grid'; |
| + | @import 'xy-grid/xy-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/card'; |
| + | @import 'components/close-button'; |
| + | @import 'components/drilldown'; |
| + | @import 'components/dropdown-menu'; |
| + | @import 'components/dropdown'; |
| + | @import 'components/flex'; |
| + | @import 'components/responsive-embed'; |
| + | @import 'components/label'; |
| + | @import 'components/media-object'; |
| + | @import 'components/menu'; |
| + | @import 'components/menu-icon'; |
| + | @import 'components/off-canvas'; |
| + | @import 'components/orbit'; |
| + | @import 'components/pagination'; |
| + | @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'; |
| + | @import 'prototype/prototype'; |
| + | |
| + | @mixin foundation-everything( |
| + | $flex: true, |
| + | $prototype: false |
| + | ) { |
| + | @if $flex { |
| + | $global-flexbox: true !global; |
| + | } |
| + | |
| + | @include foundation-global-styles; |
| + | @if not $flex { |
| + | @include foundation-grid; |
| + | } |
| + | @else { |
| + | @if $xy-grid { |
| + | @include foundation-xy-grid-classes; |
| + | } |
| + | @else { |
| + | @include foundation-flex-grid; |
| + | } |
| + | } |
| + | @include foundation-typography; |
| + | @include foundation-forms; |
| + | @include foundation-button; |
| + | @include foundation-accordion; |
| + | @include foundation-accordion-menu; |
| + | @include foundation-badge; |
| + | @include foundation-breadcrumbs; |
| + | @include foundation-button-group; |
| + | @include foundation-callout; |
| + | @include foundation-card; |
| + | @include foundation-close-button; |
| + | @include foundation-menu; |
| + | @include foundation-menu-icon; |
| + | @include foundation-drilldown-menu; |
| + | @include foundation-dropdown; |
| + | @include foundation-dropdown-menu; |
| + | @include foundation-responsive-embed; |
| + | @include foundation-label; |
| + | @include foundation-media-object; |
| + | @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; |
| + | @include foundation-visibility-classes; |
| + | @include foundation-float-classes; |
| + | |
| + | @if $flex { |
| + | @include foundation-flex-classes; |
| + | } |
| + | |
| + | @if $prototype { |
| + | @include foundation-prototype-classes; |
| + | } |
| + | } |
public/stylesheets/foundation6/grid/_classes.scss
+176
-0
| @@ | @@ -0,0 +1,176 @@ |
| + | // 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', |
| + | $gutter: 'gutter', |
| + | $push: 'push', |
| + | $pull: 'pull', |
| + | $center: 'centered', |
| + | $uncenter: 'uncentered', |
| + | $collapse: 'collapse', |
| + | $uncollapse: 'uncollapse', |
| + | $offset: 'offset', |
| + | $end: 'end', |
| + | $expanded: 'expanded', |
| + | $block: 'block' |
| + | ) { |
| + | // Row |
| + | .#{$row} { |
| + | @include grid-row; |
| + | |
| + | // Collapsing |
| + | &.#{$collapse} { |
| + | > .#{$column} { |
| + | @include grid-col-collapse; |
| + | } |
| + | } |
| + | |
| + | // Nesting |
| + | & .#{$row} { |
| + | @include grid-row-nest($grid-column-gutter); |
| + | |
| + | &.#{$collapse} { |
| + | margin-right: 0; |
| + | margin-left: 0; |
| + | } |
| + | } |
| + | |
| + | // Expanded (full-width) row |
| + | &.#{$expanded} { |
| + | @include grid-row-size(expand); |
| + | |
| + | .#{$row} { |
| + | margin-right: auto; |
| + | margin-left: auto; |
| + | } |
| + | } |
| + | |
| + | &:not(.#{$expanded}) .#{$row} { |
| + | @include grid-row-size(expand); |
| + | } |
| + | |
| + | @if type-of($grid-column-gutter) == 'map' { |
| + | // Static (unresponsive) row gutters |
| + | // |
| + | @each $breakpoint, $value in $grid-column-gutter { |
| + | &.#{$gutter}-#{$breakpoint} { |
| + | > .#{$column} { |
| + | @include grid-col-gutter($value); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // 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} .#{$column}.#{$row}.#{$row} { |
| + | margin-right: 0; |
| + | margin-left: 0; |
| + | padding-right: 0; |
| + | padding-left: 0; |
| + | } |
| + | |
| + | @include -zf-each-breakpoint { |
| + | @for $i from 1 through $grid-column-count { |
| + | // 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, '.#{$column}'); |
| + | } |
| + | } |
| + | |
| + | // Responsive collapsing |
| + | .#{$-zf-size}-#{$collapse} { |
| + | > .#{$column} { @include grid-col-collapse; } |
| + | |
| + | .#{$row} { |
| + | margin-right: 0; |
| + | margin-left: 0; |
| + | } |
| + | } |
| + | |
| + | .#{$expanded}.#{$row} .#{$-zf-size}-#{$collapse}.#{$row} { |
| + | margin-right: 0; |
| + | margin-left: 0; |
| + | } |
| + | |
| + | .#{$-zf-size}-#{$uncollapse} { |
| + | > .#{$column} { @include grid-col-gutter($-zf-size); } |
| + | } |
| + | |
| + | // Positioning |
| + | .#{$-zf-size}-#{$center} { |
| + | @include grid-col-pos(center); |
| + | } |
| + | |
| + | // Gutter adjustment |
| + | .#{$-zf-size}-#{$uncenter}, |
| + | .#{$-zf-size}-#{$push}-0, |
| + | .#{$-zf-size}-#{$pull}-0 { |
| + | @include grid-col-unpos; |
| + | } |
| + | } |
| + | |
| + | // Block grid columns |
| + | .#{$column}-#{$block} { |
| + | @include grid-column-margin; |
| + | } |
| + | |
| + | @if $column == 'column' and has-value($grid-column-alias) { |
| + | .#{$grid-column-alias} { |
| + | // sass-lint:disable-block placeholder-in-extend |
| + | @extend .column; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/grid/_column.scss
+112
-0
| @@ | @@ -0,0 +1,112 @@ |
| + | // 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 list of the format "x of y" (without quotes) will make a column that is *x* columns wide, assuming *y* total columns for the parent. |
| + | /// |
| + | /// @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 {Mixed} $gutters [$grid-column-gutter] - Spacing between columns. Refer to the `grid-column-gutter()` function to see possible values. |
| + | @mixin grid-column( |
| + | $columns: $grid-column-count, |
| + | $gutters: $grid-column-gutter |
| + | ) { |
| + | @include grid-column-size($columns); |
| + | float: $global-left; |
| + | |
| + | // Gutters |
| + | @include grid-column-gutter($gutters: $gutters); |
| + | |
| + | // Last column alignment |
| + | @if $grid-column-align-edge { |
| + | &:last-child:not(:first-child) { |
| + | float: $global-right; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element. |
| + | /// |
| + | /// @param {Mixed} $gutters [$grid-column-gutter] - Width of the gutters on either side of the column row. Refer to the `grid-column-gutter()` function to see possible values. |
| + | @mixin grid-column-row( |
| + | $gutters: $grid-column-gutter |
| + | ) { |
| + | @include grid-row; |
| + | @include grid-column($gutters: $gutters); |
| + | |
| + | &, |
| + | &: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, |
| + | $gutters: $grid-column-gutter |
| + | ) { |
| + | @include grid-column($columns, $gutters); |
| + | } |
| + | |
| + | /// Shorthand for `grid-column-row()`. |
| + | /// @alias grid-column-row |
| + | @mixin grid-col-row( |
| + | $gutters: $grid-column-gutter |
| + | ) { |
| + | @include grid-column-row($gutters); |
| + | } |
public/stylesheets/foundation6/grid/_flex-grid.scss
+259
-0
| @@ | @@ -0,0 +1,259 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group flex-grid |
| + | //// |
| + | |
| + | /// 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 {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width. |
| + | /// @param {Number} $columns [null] - Number of columns to use for this row. If set to `null` (the default), the global column count will be used. |
| + | /// @param {Boolean} $base [true] - Set to `false` to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output. |
| + | /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins, in case the row is nested. Responsive gutter settings by default. |
| + | @mixin flex-grid-row( |
| + | $behavior: null, |
| + | $size: $grid-row-width, |
| + | $columns: null, |
| + | $base: true, |
| + | $wrap: true, |
| + | $gutters: $grid-column-gutter |
| + | ) { |
| + | $margin: auto; |
| + | $wrap: if($wrap, wrap, nowrap); |
| + | |
| + | @if index($behavior, nest) != null { |
| + | @include grid-row-nest($gutters); |
| + | |
| + | @if index($behavior, collapse) != null { |
| + | margin-right: 0; |
| + | margin-left: 0; |
| + | } |
| + | } |
| + | @else { |
| + | @include grid-row-size($size); |
| + | margin-right: auto; |
| + | margin-left: 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: |
| + | /// - `expand` (the default) will make the column expand to fill space. |
| + | /// - `shrink` will make the column contract, so it only takes up the horizontal space it needs. |
| + | /// |
| + | /// @param {Mixed} $columns [expand] - Width of the column. |
| + | @function flex-grid-column($columns: expand) { |
| + | $flex: 1 1 0px; // sass-lint:disable-line zero-unit |
| + | |
| + | @if $columns == shrink { |
| + | $flex: 0 0 auto; |
| + | } |
| + | @else if $columns != expand { |
| + | $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 [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values. |
| + | /// @param {Number|Map} $gutters [$grid-column-gutter] - Map or single value for gutters width. See the `grid-column-gutter` mixin. |
| + | @mixin flex-grid-column( |
| + | $columns: expand, |
| + | $gutters: $grid-column-gutter |
| + | ) { |
| + | // Base properties |
| + | @include flex-grid-size($columns); |
| + | |
| + | // Gutters |
| + | @include grid-column-gutter($gutters: $gutters); |
| + | |
| + | // fixes recent Chrome version not limiting child width |
| + | // https://stackoverflow.com/questions/34934586/white-space-nowrap-and-flexbox-did-not-work-in-chrome |
| + | @if $columns == expand { |
| + | min-width: 0; |
| + | } |
| + | } |
| + | |
| + | /// Creates a block grid for a flex grid row. |
| + | /// |
| + | /// @param {Number} $n - Number of columns to display on each row. |
| + | /// @param {String} $selector - Selector to use to target columns within the row. |
| + | @mixin flex-grid-layout( |
| + | $n, |
| + | $selector: '.column' |
| + | ) { |
| + | flex-wrap: wrap; |
| + | |
| + | > #{$selector} { |
| + | $pct: percentage(1/$n); |
| + | |
| + | flex: 0 0 $pct; |
| + | max-width: $pct; |
| + | } |
| + | } |
| + | |
| + | /// Changes the width flex grid column. |
| + | /// @param {Mixed} $columns [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values. |
| + | @mixin flex-grid-size($columns: null) { |
| + | $columns: $columns or expand; |
| + | |
| + | flex: flex-grid-column($columns); |
| + | |
| + | // max-width fixes IE 10/11 not respecting the flex-basis property |
| + | @if $columns != expand and $columns != shrink { |
| + | max-width: grid-column($columns); |
| + | } |
| + | } |
| + | |
| + | |
| + | @mixin foundation-flex-grid { |
| + | // Row |
| + | .row { |
| + | @include flex-grid-row; |
| + | |
| + | // Nesting behavior |
| + | & .row { |
| + | @include flex-grid-row(nest, $base: false); |
| + | |
| + | &.collapse { |
| + | margin-right: 0; |
| + | margin-left: 0; |
| + | } |
| + | } |
| + | |
| + | // Expanded row |
| + | &.expanded { |
| + | @include grid-row-size(expand); |
| + | |
| + | .row { |
| + | margin-right: auto; |
| + | margin-left: auto; |
| + | } |
| + | } |
| + | |
| + | &:not(.expanded) .row { |
| + | @include grid-row-size(expand); |
| + | } |
| + | |
| + | &.collapse { |
| + | > .column { |
| + | @include grid-col-collapse; |
| + | } |
| + | } |
| + | |
| + | // Undo negative margins |
| + | // From collapsed child |
| + | &.is-collapse-child, |
| + | &.collapse > .column > .row { |
| + | margin-right: 0; |
| + | margin-left: 0; |
| + | } |
| + | } |
| + | |
| + | // Column |
| + | .column { |
| + | @include flex-grid-column; |
| + | } |
| + | |
| + | // Column row |
| + | // The double .row class is needed to bump up the specificity |
| + | .column.row.row { |
| + | float: none; |
| + | display: block; |
| + | } |
| + | |
| + | // To properly nest a column row, padding and margin is removed |
| + | .row .column.row.row { |
| + | margin-right: 0; |
| + | margin-left: 0; |
| + | padding-right: 0; |
| + | padding-left: 0; |
| + | } |
| + | |
| + | @include -zf-each-breakpoint { |
| + | @for $i from 1 through $grid-column-count { |
| + | // Sizing (percentage) |
| + | .#{$-zf-size}-#{$i} { |
| + | flex: flex-grid-column($i); |
| + | max-width: grid-column($i); |
| + | } |
| + | |
| + | // Offsets |
| + | $o: $i - 1; |
| + | |
| + | .#{$-zf-size}-offset-#{$o} { |
| + | @include grid-column-offset($o); |
| + | } |
| + | } |
| + | |
| + | // Block grid |
| + | @for $i from 1 through $block-grid-max { |
| + | .#{$-zf-size}-up-#{$i} { |
| + | @include flex-grid-layout($i); |
| + | } |
| + | } |
| + | |
| + | @if $-zf-size != $-zf-zero-breakpoint { |
| + | // 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 { |
| + | > .column { @include grid-col-gutter($-zf-size); } |
| + | } |
| + | } |
| + | |
| + | // Sizing (shrink) |
| + | .shrink { |
| + | flex: flex-grid-column(shrink); |
| + | max-width: 100%; |
| + | } |
| + | |
| + | // Block grid columns |
| + | .column-block { |
| + | @include grid-column-margin; |
| + | } |
| + | |
| + | .columns { |
| + | @extend .column; // sass-lint:disable-line placeholder-in-extend |
| + | |
| + | } |
| + | } |
public/stylesheets/foundation6/grid/_grid.scss
+48
-0
| @@ | @@ -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 at different screen sizes. To use just one size, set the variable to a number instead of a map. |
| + | /// @type Map | Length |
| + | /// @since 6.1.0 |
| + | $grid-column-gutter: ( |
| + | small: 20px, |
| + | medium: 30px, |
| + | ) !default; |
| + | |
| + | /// If `true`, the last column in a row will align to the opposite edge of the row. |
| + | /// @type Boolean |
| + | $grid-column-align-edge: true !default; |
| + | |
| + | /// Selector used for an alias of column (with @extend). If `false`, no alias is created. |
| + | /// @type String |
| + | $grid-column-alias: 'columns' !default; |
| + | |
| + | /// The highest number of `.x-up` classes available when using the block grid CSS. |
| + | /// @type Number |
| + | $block-grid-max: 8 !default; |
| + | |
| + | // Internal value to store the end column float direction |
| + | $-zf-end-float: if($grid-column-align-edge, $global-right, $global-left); |
| + | |
| + | @import 'row'; |
| + | @import 'column'; |
| + | @import 'size'; |
| + | @import 'position'; |
| + | @import 'gutter'; |
| + | @import 'classes'; |
| + | @import 'layout'; |
| + | |
| + | @import 'flex-grid'; |
public/stylesheets/foundation6/grid/_gutter.scss
+82
-0
| @@ | @@ -0,0 +1,82 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group grid |
| + | //// |
| + | |
| + | /// Set the gutters on a column |
| + | /// @param {Number|Keyword} $gutter [auto] |
| + | /// Spacing between columns, accepts multiple values: |
| + | /// - A single value will make the gutter that exact size. |
| + | /// - A breakpoint name will make the gutter the corresponding size in the $gutters map. |
| + | /// - "auto" will make the gutter responsive, using the $gutters map values. |
| + | /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use. Responsive gutter settings by default. |
| + | @mixin grid-column-gutter( |
| + | $gutter: auto, |
| + | $gutters: $grid-column-gutter |
| + | ) { |
| + | @include -zf-breakpoint-value($gutter, $gutters) { |
| + | $padding: rem-calc($-zf-bp-value) / 2; |
| + | |
| + | padding-right: $padding; |
| + | padding-left: $padding; |
| + | } |
| + | } |
| + | |
| + | /// Collapse the gutters on a column by removing the padding. **Note:** only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the `$gutter` parameter of the `grid-column()` mixin instead. |
| + | @mixin grid-column-collapse { |
| + | @include grid-column-gutter(0); |
| + | } |
| + | |
| + | /// Un-collapse the gutters on a column by re-adding the padding. |
| + | /// |
| + | /// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns. |
| + | @mixin grid-column-uncollapse($gutter: $grid-column-gutter) { |
| + | @warn 'This mixin is being replaced by grid-column-gutter(). grid-column-uncollapse() will be removed in Foundation 6.4.'; |
| + | @include grid-column-gutter($gutters: $gutter); |
| + | } |
| + | |
| + | /// Shorthand for `grid-column-gutter()`. |
| + | /// @alias grid-column-gutter |
| + | @mixin grid-col-gutter( |
| + | $gutter: auto, |
| + | $gutters: $grid-column-gutter |
| + | ) { |
| + | @include grid-column-gutter($gutter, $gutters); |
| + | } |
| + | |
| + | /// Shorthand for `grid-column-collapse()`. |
| + | /// @alias grid-column-collapse |
| + | @mixin grid-col-collapse { |
| + | @include grid-column-collapse; |
| + | } |
| + | |
| + | /// Shorthand for `grid-column-uncollapse()`. |
| + | /// @alias grid-column-uncollapse |
| + | @mixin grid-col-uncollapse($gutter: $grid-column-gutter) { |
| + | @warn 'This mixin is being replaced by grid-col-gutter(). grid-col-uncollapse() will be removed in Foundation 6.4.'; |
| + | @include grid-column-uncollapse($gutter); |
| + | } |
| + | |
| + | /// Sets bottom margin on grid columns to match gutters |
| + | /// @param {Number|Keyword} $margin [auto] |
| + | /// The bottom margin on grid columns, accepts multiple values: |
| + | /// - A single value will make the margin that exact size. |
| + | /// - A breakpoint name will make the margin the corresponding size in the $margins map. |
| + | /// - "auto" will make the margin responsive, using the $margins map values. |
| + | /// @param {Number|Map} $margins [$grid-column-gutter] - Map or single value to use. Responsive gutter settings by default. |
| + | @mixin grid-column-margin ( |
| + | $margin: auto, |
| + | $margins: $grid-column-gutter |
| + | ) { |
| + | @include -zf-breakpoint-value($margin, $margins) { |
| + | $margin-bottom: rem-calc($-zf-bp-value); |
| + | margin-bottom: $margin-bottom; |
| + | |
| + | > :last-child { |
| + | margin-bottom: 0; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/grid/_layout.scss
+76
-0
| @@ | @@ -0,0 +1,76 @@ |
| + | // 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. |
| + | /// @param {Number|List} $gutter |
| + | /// The gutter to apply to child elements. Accepts multiple values: |
| + | /// - $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes. |
| + | /// - A fixed numeric value will apply this gutter to all breakpoints. |
| + | @mixin grid-layout( |
| + | $n, |
| + | $selector: '.column', |
| + | $gutter: null |
| + | ) { |
| + | & > #{$selector} { |
| + | float: $global-left; |
| + | width: percentage(1/$n); |
| + | |
| + | // If a $gutter value is passed |
| + | @if($gutter) { |
| + | // Gutters |
| + | @if type-of($gutter) == 'map' { |
| + | @each $breakpoint, $value in $gutter { |
| + | $padding: rem-calc($value) / 2; |
| + | |
| + | @include breakpoint($breakpoint) { |
| + | padding-right: $padding; |
| + | padding-left: $padding; |
| + | } |
| + | } |
| + | } |
| + | @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 { |
| + | $padding: rem-calc($gutter) / 2; |
| + | padding-right: $padding; |
| + | padding-left: $padding; |
| + | } |
| + | } |
| + | |
| + | &:nth-of-type(1n) { |
| + | clear: none; |
| + | } |
| + | |
| + | &:nth-of-type(#{$n}n+1) { |
| + | clear: both; |
| + | } |
| + | |
| + | &:last-child { |
| + | float: $global-left; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row. |
| + | /// |
| + | /// @param {Number} $n - Number of items that appear in each row. |
| + | @mixin grid-layout-center-last($n) { |
| + | @for $i from 1 to $n { |
| + | @if $i == 1 { |
| + | &:nth-child(#{$n}n+1):last-child { |
| + | margin-left: (100 - 100/$n * $i) / 2 * 1%; |
| + | } |
| + | } |
| + | @else { |
| + | &:nth-child(#{$n}n+1):nth-last-child(#{$i}) { |
| + | margin-left: (100 - 100/$n * $i) / 2 * 1%; |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/grid/_position.scss
+76
-0
| @@ | @@ -0,0 +1,76 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group grid |
| + | //// |
| + | |
| + | /// Reposition a column. |
| + | /// |
| + | /// @param {Number|Keyword} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left. Set to center to center the column. |
| + | @mixin grid-column-position($position) { |
| + | @if type-of($position) == 'number' { |
| + | $offset: percentage($position / $grid-column-count); |
| + | |
| + | position: relative; |
| + | #{$global-left}: $offset; |
| + | } |
| + | @else if $position == center { |
| + | &, &:last-child:not(:first-child) { |
| + | float: none; |
| + | clear: both; |
| + | } |
| + | margin-right: auto; |
| + | margin-left: auto; |
| + | } |
| + | @else { |
| + | @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, or center.'; |
| + | } |
| + | } |
| + | |
| + | /// Reset a position definition. |
| + | @mixin grid-column-unposition { |
| + | position: static; |
| + | float: $global-left; |
| + | margin-right: 0; |
| + | margin-left: 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; |
| + | } |
public/stylesheets/foundation6/grid/_row.scss
+99
-0
| @@ | @@ -0,0 +1,99 @@ |
| + | // 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 !global; |
| + | } |
| + | |
| + | /// 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 {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width. |
| + | /// @param {Boolean} $cf [true] - Whether or not to include a clearfix. |
| + | /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default. |
| + | @mixin grid-row( |
| + | $columns: null, |
| + | $behavior: null, |
| + | $size: $grid-row-width, |
| + | $cf: true, |
| + | $gutters: $grid-column-gutter |
| + | ) { |
| + | $margin: auto; |
| + | |
| + | @if index($behavior, nest) != null { |
| + | @include grid-row-nest($gutters); |
| + | |
| + | @if index($behavior, collapse) != null { |
| + | margin-right: 0; |
| + | margin-left: 0; |
| + | } |
| + | } |
| + | @else { |
| + | @include grid-row-size($size); |
| + | margin-right: auto; |
| + | margin-left: 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 {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default. |
| + | @mixin grid-row-nest($gutters: $grid-column-gutter) { |
| + | @include -zf-each-breakpoint { |
| + | $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) / 2 * -1; |
| + | |
| + | margin-right: $margin; |
| + | margin-left: $margin; |
| + | } |
| + | } |
| + | |
| + | /// Set a grid row size |
| + | /// |
| + | /// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width. |
| + | @mixin grid-row-size($size: $grid-row-width) { |
| + | @if $size == expand { |
| + | $size: none; |
| + | } |
| + | |
| + | max-width: $size; |
| + | } |
public/stylesheets/foundation6/grid/_size.scss
+24
-0
| @@ | @@ -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); |
| + | } |
public/stylesheets/foundation6/prototype/_arrow.scss
+36
-0
| @@ | @@ -0,0 +1,36 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-arrow |
| + | //// |
| + | |
| + | /// Map containing all the `arrow` direction |
| + | /// @type Map |
| + | $prototype-arrow-directions: ( |
| + | down, |
| + | up, |
| + | right, |
| + | left |
| + | ) !default; |
| + | |
| + | /// Width of the Arrow, `0.4375rem` by default. |
| + | /// @type Number |
| + | $prototype-arrow-size: 0.4375rem; |
| + | |
| + | /// Color of the Arrow, `$black` by default. |
| + | /// @type Color |
| + | $prototype-arrow-color: $black; |
| + | |
| + | @mixin foundation-prototype-arrow { |
| + | @each $prototype-arrow-direction in $prototype-arrow-directions { |
| + | .arrow-#{$prototype-arrow-direction} { |
| + | @include css-triangle( |
| + | $prototype-arrow-size, |
| + | $prototype-arrow-color, |
| + | $prototype-arrow-direction |
| + | ); |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_border-box.scss
+35
-0
| @@ | @@ -0,0 +1,35 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-border-box |
| + | //// |
| + | |
| + | /// Responsive breakpoints for border box. |
| + | /// @type Boolean |
| + | $prototype-border-box-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Border box utility |
| + | @mixin border-box { |
| + | box-sizing: border-box !important; |
| + | } |
| + | |
| + | @mixin foundation-prototype-border-box { |
| + | .border-box { |
| + | @include border-box; |
| + | } |
| + | |
| + | @if ($prototype-border-box-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-border-box { |
| + | @include border-box; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_border-none.scss
+35
-0
| @@ | @@ -0,0 +1,35 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-border-none |
| + | //// |
| + | |
| + | /// Responsive breakpoints for border none. |
| + | /// @type Boolean |
| + | $prototype-border-none-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Border none utility |
| + | @mixin border-none { |
| + | border: none !important; |
| + | } |
| + | |
| + | @mixin foundation-prototype-border-none { |
| + | .border-none { |
| + | @include border-none; |
| + | } |
| + | |
| + | @if ($prototype-border-none-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-border-none { |
| + | @include border-none; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_bordered.scss
+54
-0
| @@ | @@ -0,0 +1,54 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-bordered |
| + | //// |
| + | |
| + | /// Responsive breakpoints for bordered utility. |
| + | /// @type Boolean |
| + | $prototype-bordered-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Default value for `prototype-border-width` |
| + | /// @type Number |
| + | $prototype-border-width: rem-calc(1) !default; |
| + | |
| + | /// Default value for `prototype-border-type` |
| + | /// @type String |
| + | $prototype-border-type: solid !default; |
| + | |
| + | /// Default value for `prototype-border-color` defaulted to `medium-gray` |
| + | /// @type Color |
| + | $prototype-border-color: $medium-gray !default; |
| + | |
| + | /// Bordered Utility: Adds a light border to an element by default. |
| + | /// @param {Number} $width [$prototype-border-width] Width of the border |
| + | /// @param {String} $type [$prototype-border-type] Type of the border |
| + | /// @param {Color} $color [$prototype-border-color] Color of the border |
| + | @mixin bordered( |
| + | $width: $prototype-border-width, |
| + | $type: $prototype-border-type, |
| + | $color: $prototype-border-color |
| + | ) { |
| + | border: $width $type $color; |
| + | } |
| + | |
| + | @mixin foundation-prototype-bordered { |
| + | .bordered { |
| + | @include bordered; |
| + | } |
| + | |
| + | @if ($prototype-bordered-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-bordered { |
| + | @include bordered; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_box.scss
+23
-0
| @@ | @@ -0,0 +1,23 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-box |
| + | //// |
| + | |
| + | /// Box Mixin: Easily create a square, rectangle or a circle |
| + | /// @param {Number} $width[] Width of the box |
| + | /// @param {Number} $height[$width] Height of the box, defaults to `$width` to easily make a square |
| + | /// @param {Boolean} $circle[false] Makes the box a circle, by default `false`. |
| + | @mixin box( |
| + | $width, |
| + | $height: $width, |
| + | $circle: false |
| + | ) { |
| + | width: $width; |
| + | height: $height; |
| + | @if $circle { |
| + | border-radius: 50% !important; |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_display.scss
+50
-0
| @@ | @@ -0,0 +1,50 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-display |
| + | //// |
| + | |
| + | /// Responsive breakpoints for display classes |
| + | /// @type Boolean |
| + | $prototype-display-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Map containing all the `display` classes |
| + | /// @type Map |
| + | $prototype-display: ( |
| + | inline, |
| + | inline-block, |
| + | block, |
| + | table, |
| + | table-cell |
| + | ) !default; |
| + | |
| + | /// Display classes, by default coming through a map `$prototype-display` |
| + | /// @param {String} $display [] Display classes |
| + | @mixin display($display) { |
| + | display: $display !important; |
| + | } |
| + | |
| + | @mixin foundation-prototype-display { |
| + | @each $display in $prototype-display { |
| + | .display-#{$display} { |
| + | @include display($display); |
| + | } |
| + | } |
| + | |
| + | @if ($prototype-display-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @each $display in $prototype-display { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-display-#{$display} { |
| + | @include display($display); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_font-styling.scss
+95
-0
| @@ | @@ -0,0 +1,95 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-font-styling |
| + | //// |
| + | |
| + | /// Responsive breakpoints for font styling types |
| + | /// @type Boolean |
| + | $prototype-font-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Letter spacing for `.font-wide` |
| + | /// @type Number |
| + | $prototype-wide-letter-spacing: rem-calc(4) !default; |
| + | |
| + | /// Default weight for `.font-normal`, defaulted to `global-weight-normal` |
| + | /// @type Number |
| + | $prototype-font-normal: $global-weight-normal !default; |
| + | |
| + | /// Default weight for `.font-bold`, defaulted to `global-weight-bold` |
| + | /// @type Number |
| + | $prototype-font-bold: $global-weight-bold !default; |
| + | |
| + | /// Font wide letter spacing! |
| + | /// @param {Number} $letter-spacing [$prototype-wide-letter-spacing] Wide letter spacing for the font |
| + | @mixin font-wide( |
| + | $letter-spacing: $prototype-wide-letter-spacing |
| + | ) { |
| + | letter-spacing: $letter-spacing; |
| + | } |
| + | |
| + | /// Font Weight Normal, default value coming through `global-weight-normal` |
| + | /// @param {Number} $weight [$prototype-font-normal] Weight of the font (normal) |
| + | @mixin font-normal( |
| + | $weight: $prototype-font-normal |
| + | ) { |
| + | font-weight: $weight; |
| + | } |
| + | |
| + | /// Font Weight Bold, default value coming through `global-weight-bold` |
| + | /// @param {Number} $weight [$prototype-font-bold] Weight of the font (bold) |
| + | @mixin font-bold( |
| + | $weight: $prototype-font-bold |
| + | ) { |
| + | font-weight: $weight; |
| + | } |
| + | |
| + | /// Font Style Italic |
| + | @mixin font-italic { |
| + | font-style: italic !important; |
| + | } |
| + | |
| + | @mixin foundation-prototype-font-styling { |
| + | .font-wide{ |
| + | @include font-wide; |
| + | } |
| + | |
| + | .font-normal { |
| + | @include font-normal; |
| + | } |
| + | |
| + | .font-bold { |
| + | @include font-bold; |
| + | } |
| + | |
| + | .font-italic { |
| + | @include font-italic; |
| + | } |
| + | |
| + | @if ($prototype-font-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-font-wide{ |
| + | @include font-wide; |
| + | } |
| + | |
| + | .#{$size}-font-normal { |
| + | @include font-normal; |
| + | } |
| + | |
| + | .#{$size}-font-bold { |
| + | @include font-bold; |
| + | } |
| + | |
| + | .#{$size}-font-italic { |
| + | @include font-italic; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_list-style-type.scss
+95
-0
| @@ | @@ -0,0 +1,95 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-list-style-type |
| + | //// |
| + | |
| + | /// Responsive breakpoints for list styling types |
| + | /// @type Boolean |
| + | $prototype-list-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Map containing all the `style-type-unordered` classes |
| + | /// @type Map |
| + | $prototype-style-type-unordered: ( |
| + | disc, |
| + | circle, |
| + | square |
| + | ) !default; |
| + | |
| + | /// Map containing all the `style-type-ordered` classes |
| + | /// @type Map |
| + | $prototype-style-type-ordered: ( |
| + | decimal, |
| + | lower-alpha, |
| + | lower-latin, |
| + | lower-roman, |
| + | upper-alpha, |
| + | upper-latin, |
| + | upper-roman |
| + | ) !default; |
| + | |
| + | |
| + | /// Style type for unordered Lists, by default coming through a map `$prototype-style-type-unordered` |
| + | /// @param {String} $style-type-unordered [] Style type for unordered Lists |
| + | @mixin style-type-unordered($style-type-unordered) { |
| + | list-style-type: $style-type-unordered !important; |
| + | } |
| + | |
| + | /// Style type for ordered Lists, by default coming through a map `$prototype-style-type-ordered` |
| + | /// @param {String} $style-type-ordered [] Style type for ordered Lists |
| + | @mixin style-type-ordered($style-type-ordered) { |
| + | list-style-type: $style-type-ordered !important; |
| + | } |
| + | |
| + | @mixin list-unordered { |
| + | @each $style-type-unordered in $prototype-style-type-unordered { |
| + | ul.list-#{$style-type-unordered} { |
| + | @include style-type-unordered($style-type-unordered); |
| + | } |
| + | } |
| + | |
| + | @if ($prototype-list-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @each $style-type-unordered in $prototype-style-type-unordered { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | ul.#{$size}-list-#{$style-type-unordered} { |
| + | @include style-type-unordered($style-type-unordered); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin list-ordered { |
| + | @each $style-type-ordered in $prototype-style-type-ordered { |
| + | ol.list-#{$style-type-ordered} { |
| + | @include style-type-ordered($style-type-ordered); |
| + | } |
| + | } |
| + | |
| + | @if ($prototype-list-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @each $style-type-ordered in $prototype-style-type-ordered { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | ol.#{$size}-list-#{$style-type-ordered} { |
| + | @include style-type-ordered($style-type-ordered); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-prototype-list-style-type { |
| + | @include list-unordered; |
| + | @include list-ordered; |
| + | } |
public/stylesheets/foundation6/prototype/_overflow.scss
+72
-0
| @@ | @@ -0,0 +1,72 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-overflow |
| + | //// |
| + | |
| + | /// Responsive breakpoints for overflow helper classes |
| + | /// @type Boolean |
| + | $prototype-overflow-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Map containing all the `overflow` classes |
| + | /// @type Map |
| + | $prototype-overflow: ( |
| + | visible, |
| + | hidden, |
| + | scroll |
| + | ) !default; |
| + | |
| + | /// Overflow classes, by default coming through a map `$prototype-overflow` |
| + | /// @param {String} $overflow [] Overflow classes |
| + | @mixin overflow($overflow) { |
| + | overflow: $overflow !important; |
| + | } |
| + | |
| + | /// Overflow classes on horizontal axis, by default coming through a map `$prototype-overflow` |
| + | /// @param {String} $overflow [] Overflow classes (horizontal axis) |
| + | @mixin overflow-x($overflow) { |
| + | overflow-x: $overflow !important; |
| + | } |
| + | |
| + | /// Overflow classes on vertical axis, by default coming through a map `$prototype-overflow` |
| + | /// @param {String} $overflow [] Overflow classes (vertical axis) |
| + | @mixin overflow-y($overflow) { |
| + | overflow-y: $overflow !important; |
| + | } |
| + | |
| + | @mixin foundation-prototype-overflow { |
| + | @each $overflow in $prototype-overflow { |
| + | .overflow-#{$overflow} { |
| + | @include overflow($overflow); |
| + | } |
| + | .overflow-x-#{$overflow} { |
| + | @include overflow-x($overflow); |
| + | } |
| + | .overflow-y-#{$overflow} { |
| + | @include overflow-y($overflow); |
| + | } |
| + | } |
| + | |
| + | @if ($prototype-overflow-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @each $overflow in $prototype-overflow { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-overflow-#{$overflow} { |
| + | @include overflow($overflow); |
| + | } |
| + | .#{$size}-overflow-x-#{$overflow} { |
| + | @include overflow-x($overflow); |
| + | } |
| + | .#{$size}-overflow-y-#{$overflow} { |
| + | @include overflow-y($overflow); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_position.scss
+114
-0
| @@ | @@ -0,0 +1,114 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-position |
| + | //// |
| + | |
| + | /// Responsive breakpoints for position helpers |
| + | /// @type Boolean |
| + | $prototype-position-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Map containing all the `position` classes |
| + | /// @type Map |
| + | $prototype-position: ( |
| + | static, |
| + | relative, |
| + | absolute, |
| + | fixed |
| + | ) !default; |
| + | |
| + | /// z-index for fixed positioning |
| + | /// @type Number |
| + | $prototype-position-z-index: 975 !default; |
| + | |
| + | /// Position classes, by default coming through a map `$prototype-position`, whereas all the offset values are multiplied by `$global-position` which by default is equal to `1rem`. |
| + | /// @param {String} $position [] Position classes, Either `static`, `relative`, `absolute` or `fixed` |
| + | /// @param {Number} $top [null] - Top offset |
| + | /// @param {Number} $right [null] - Right offset |
| + | /// @param {Number} $bottom [null] - Bottom offset |
| + | /// @param {Number} $left [null] - Left offset |
| + | @mixin position( |
| + | $position, |
| + | $top: null, |
| + | $right: null, |
| + | $bottom: null, |
| + | $left: null |
| + | ) { |
| + | position: $position !important; |
| + | @if $top != null { |
| + | top: $top * $global-position !important; |
| + | } |
| + | @if $right != null { |
| + | right: $right * $global-position !important; |
| + | } |
| + | @if $bottom != null { |
| + | bottom: $bottom * $global-position !important; |
| + | } |
| + | @if $left != null { |
| + | left: $left * $global-position !important; |
| + | } |
| + | } |
| + | |
| + | /// Position Fixed on top corners |
| + | /// @param {Number} $z-index [$prototype-position-z-index] z-index for `position-fixed-top` |
| + | @mixin position-fixed-top( |
| + | $z-index: $prototype-position-z-index |
| + | ) { |
| + | @include position(fixed, 0, 0, null, 0); |
| + | z-index: $z-index; |
| + | } |
| + | |
| + | /// Position Fixed on bottom corners |
| + | /// @param {Number} $z-index [$prototype-position-z-index] z-index for `position-fixed-bottom` |
| + | @mixin position-fixed-bottom( |
| + | $z-index: $prototype-position-z-index |
| + | ) { |
| + | @include position(fixed, null, 0, 0, 0); |
| + | z-index: $z-index; |
| + | } |
| + | |
| + | @mixin foundation-prototype-position { |
| + | // Position: Static, Relative, Fixed, Absolute |
| + | @each $position in $prototype-position { |
| + | .position-#{$position} { |
| + | @include position($position); |
| + | } |
| + | } |
| + | |
| + | // Position: Fixed Top, Fixed Bottom |
| + | .position-fixed-top { |
| + | @include position-fixed-top; |
| + | } |
| + | .position-fixed-bottom { |
| + | @include position-fixed-bottom; |
| + | } |
| + | |
| + | @if ($prototype-position-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | // Position: Static, Relative, Fixed, Absolute |
| + | @each $position in $prototype-position { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-position-#{$position} { |
| + | @include position($position); |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Position: Fixed Top, Fixed Bottom |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-position-fixed-top { |
| + | @include position-fixed-top; |
| + | } |
| + | |
| + | .#{$size}-position-fixed-bottom { |
| + | @include position-fixed-bottom; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_prototype.scss
+87
-0
| @@ | @@ -0,0 +1,87 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype |
| + | //// |
| + | |
| + | // Relational Mixins |
| + | @import 'relation'; |
| + | |
| + | // Box Mixin |
| + | @import 'box'; |
| + | |
| + | // Rotate Mixin |
| + | @import 'rotate'; |
| + | |
| + | // Text utilities |
| + | @import 'text-utilities'; |
| + | |
| + | // Text transformation classes |
| + | @import 'text-transformation'; |
| + | |
| + | // Text Decoration classes |
| + | @import 'text-decoration'; |
| + | |
| + | // Font Styling |
| + | @import 'font-styling'; |
| + | |
| + | // List Style type |
| + | @import 'list-style-type'; |
| + | |
| + | // Rounded Utility |
| + | @import 'rounded'; |
| + | |
| + | // Bordered Utility |
| + | @import 'bordered'; |
| + | |
| + | // Shadow Utility |
| + | @import 'shadow'; |
| + | |
| + | // Arrow Utility |
| + | @import 'arrow'; |
| + | |
| + | // Separator Utility |
| + | @import 'separator'; |
| + | |
| + | // Overflow helper classes |
| + | @import 'overflow'; |
| + | |
| + | // Display classes |
| + | @import 'display'; |
| + | |
| + | // Position Helpers |
| + | @import 'position'; |
| + | |
| + | // Border box |
| + | @import 'border-box'; |
| + | |
| + | // Border none Utilty |
| + | @import 'border-none'; |
| + | |
| + | // Sizing Utilities |
| + | @import 'sizing'; |
| + | |
| + | // Spacing Utilities |
| + | @import 'spacing'; |
| + | |
| + | @mixin foundation-prototype-classes { |
| + | @include foundation-prototype-text-utilities; |
| + | @include foundation-prototype-text-transformation; |
| + | @include foundation-prototype-text-decoration; |
| + | @include foundation-prototype-font-styling; |
| + | @include foundation-prototype-list-style-type; |
| + | @include foundation-prototype-rounded; |
| + | @include foundation-prototype-bordered; |
| + | @include foundation-prototype-shadow; |
| + | @include foundation-prototype-arrow; |
| + | @include foundation-prototype-separator; |
| + | @include foundation-prototype-overflow; |
| + | @include foundation-prototype-display; |
| + | @include foundation-prototype-position; |
| + | @include foundation-prototype-border-box; |
| + | @include foundation-prototype-border-none; |
| + | @include foundation-prototype-sizing; |
| + | @include foundation-prototype-spacing; |
| + | } |
public/stylesheets/foundation6/prototype/_relation.scss
+157
-0
| @@ | @@ -0,0 +1,157 @@ |
| + | /// Select all children from the first to `$num`. |
| + | /// @param {Number} $num[] First `n` numbers of total children |
| + | @mixin first($num) { |
| + | @if $num == 1 { |
| + | &:first-child { |
| + | @content; |
| + | } |
| + | } @else { |
| + | &:nth-child(-n + #{$num}) { |
| + | @content; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Select the first exact child |
| + | @mixin first-child { |
| + | &:first-of-type { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select all children from the last to `$num`. |
| + | /// @param {Number} $num[] Last `n` numbers of total children |
| + | @mixin last($num) { |
| + | &:nth-last-child(-n + #{$num}) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select the last exact child |
| + | @mixin last-child { |
| + | &:last-of-type { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select children every `$num`. |
| + | /// @param {Number} $num[] Every `n` number of all children |
| + | @mixin every($num) { |
| + | &:nth-child(#{$num}n) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select only the first and last child. |
| + | @mixin first-last { |
| + | &:first-child, |
| + | &:last-child { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select all children after the first to `$num`. |
| + | /// @param {Number} $num[] After First `n` numbers of total children |
| + | @mixin after-first($num) { |
| + | &:nth-child(n + #{$num + 1}) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select all children before `$num` from the last. |
| + | /// @param {Number} $num[] From Last `n` numbers of total children |
| + | @mixin from-last($num) { |
| + | &:nth-last-child(#{$num}) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select the `$num` child from the first and the `$num` child from the last. |
| + | /// @param {Number} $num[] `n` number called from first and last |
| + | @mixin from-first-last($num) { |
| + | &:nth-child(#{$num}), |
| + | &:nth-last-child(#{$num}) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select all children but `$num`. |
| + | /// @param {Number} $num[] `n` number that should be excluded from all other children |
| + | @mixin all-but($num) { |
| + | &:not(:nth-child(#{$num})) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select all children between the `$num` first and the `$num` last. |
| + | /// @param {Number} $num[] `n` number excluded from first and last from all other children |
| + | @mixin all-but-first-last($num) { |
| + | &:nth-child(n + #{$num}):nth-last-child(n + #{$num}) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Will only select the child if it’s unique. That means that if there are at least 2 children, the style will not be applied. |
| + | @mixin unique { |
| + | &:only-child { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Will only select children if they are not unique. That means that if there are at least 2 children, the style will be applied. |
| + | @mixin not-unique() { |
| + | &:not(:only-child) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select all children between `$first` and `$last`. |
| + | /// @param {Number} $first[] First `nth` number |
| + | /// @param {Number} $last[] Last `nth` number |
| + | @mixin between($first, $last) { |
| + | &:nth-child(n + #{$first}):nth-child(-n + #{$last}) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select all even children. |
| + | @mixin even { |
| + | &:nth-child(even) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select all even children between `$first` and `$last`. |
| + | /// @param {Number} $first[] First `nth` number |
| + | /// @param {Number} $last[] Last `nth` number |
| + | @mixin even-between($first, $last) { |
| + | &:nth-child(even):nth-child(n + #{$first}):nth-child(-n + #{$last}) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select all odd children. |
| + | @mixin odd { |
| + | &:nth-child(odd) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select all odd children between `$first` and `$last`. |
| + | /// @param {Number} $first[] First `nth` number |
| + | /// @param {Number} $last[] Last `nth` number |
| + | @mixin odd-between($first, $last) { |
| + | &:nth-child(odd):nth-child(n + #{$first}):nth-child(-n + #{$last}) { |
| + | @content; |
| + | } |
| + | } |
| + | |
| + | /// Select all `$num` children between `$first` and `$last`. |
| + | /// @param {Number} $num[] Every `n` number between `$first` and `$last`. |
| + | /// @param {Number} $first[] First `n` number |
| + | /// @param {Number} $last[] Last `n` number |
| + | @mixin number-between($num, $first, $last) { |
| + | &:nth-child(#{$num}n):nth-child(n + #{$first}):nth-child(-n + #{$last}) { |
| + | @content; |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_rotate.scss
+31
-0
| @@ | @@ -0,0 +1,31 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-rotate |
| + | //// |
| + | |
| + | /// Rotate Mixin: Rotate an element to a certain deg |
| + | /// @param {Number} $deg[] Degree of rotation |
| + | @mixin rotate($deg) { |
| + | transform:rotate($deg + deg); |
| + | } |
| + | |
| + | /// RotateX Mixin: Rotate an element to a certain deg on X-Axis |
| + | /// @param {Number} $deg[] Degree of rotation |
| + | @mixin rotateX($deg) { |
| + | transform:rotateX($deg + deg); |
| + | } |
| + | |
| + | /// RotateY Mixin: Rotate an element to a certain deg on Y-Axis |
| + | /// @param {Number} $deg[] Degree of rotation |
| + | @mixin rotateY($deg) { |
| + | transform:rotateY($deg + deg); |
| + | } |
| + | |
| + | /// RotateZ Mixin: Rotate an element to a certain deg on Z-Axis |
| + | /// @param {Number} $deg[] Degree of rotation |
| + | @mixin rotateZ($deg) { |
| + | transform:rotateZ($deg + deg); |
| + | } |
| \ No newline at end of file | |
public/stylesheets/foundation6/prototype/_rounded.scss
+54
-0
| @@ | @@ -0,0 +1,54 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-rounded |
| + | //// |
| + | |
| + | /// Responsive breakpoints for rounded utility. |
| + | /// @type Boolean |
| + | $prototype-rounded-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Default value for `prototype-border-radius` |
| + | /// @type Number |
| + | $prototype-border-radius: rem-calc(3) !default; |
| + | |
| + | /// Rounded utility (all corners): Adds radius corners (all corners) to an element by default. |
| + | /// @param {Number} $radius [$prototype-border-radius] Border radius (all corners) |
| + | @mixin border-radius( |
| + | $radius: $prototype-border-radius |
| + | ) { |
| + | border-radius: $radius; |
| + | } |
| + | |
| + | /// Rounded square utility or rectangle utility (all corners): Rounds all corners to an element by default to make a pill shape. |
| + | @mixin border-rounded { |
| + | border-radius: 5000px !important; |
| + | } |
| + | |
| + | @mixin foundation-prototype-rounded { |
| + | .rounded { |
| + | @include border-rounded; |
| + | } |
| + | |
| + | .radius { |
| + | @include border-radius; |
| + | } |
| + | |
| + | @if ($prototype-rounded-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-rounded { |
| + | @include border-rounded; |
| + | } |
| + | .#{$size}-radius { |
| + | @include border-radius; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_separator.scss
+96
-0
| @@ | @@ -0,0 +1,96 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-separator |
| + | //// |
| + | |
| + | /// Responsive breakpoints for separator. |
| + | /// @type Boolean |
| + | $prototype-separator-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Default alignment of a separator. |
| + | /// @type String |
| + | $prototype-separator-align: center !default; |
| + | |
| + | /// Height of a separator. |
| + | /// @type Number |
| + | $prototype-separator-height: rem-calc(2) !default; |
| + | |
| + | /// Width of a separator. |
| + | /// @type Number |
| + | $prototype-separator-width: 3rem !default; |
| + | |
| + | /// Default color of a separator. |
| + | /// @type Color |
| + | $prototype-separator-background: $primary-color !default; |
| + | |
| + | /// Top Margin of a separator. |
| + | /// @type Number |
| + | $prototype-separator-margin-top: $global-margin !default; |
| + | |
| + | /// Title separator Utility, mostly used to style the main heading of a section |
| + | /// @param {String} $align [$prototype-separator-align] - separator Alignment |
| + | /// @param {Number} $height [$prototype-separator-height] - Width |
| + | /// @param {Number} $width [$prototype-separator-width] - Height |
| + | /// @param {Color} $background [$prototype-separator-background] - Background |
| + | /// @param {Number} $top [$prototype-separator-margin-top] - Margin Top |
| + | @mixin separator ( |
| + | $align: $prototype-separator-align, |
| + | $height: $prototype-separator-height, |
| + | $width: $prototype-separator-width, |
| + | $background: $prototype-separator-background, |
| + | $top: $prototype-separator-margin-top |
| + | ) { |
| + | text-align: $align !important; |
| + | @include clearfix; |
| + | |
| + | &::after { |
| + | @include position(relative); |
| + | width: $width; |
| + | border-bottom: $height solid $background; |
| + | margin: $top auto 0; |
| + | |
| + | @if $align == left { |
| + | margin-left: 0 !important; |
| + | } |
| + | |
| + | @if $align == right { |
| + | margin-right: 0 !important; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-prototype-separator { |
| + | .separator-center { |
| + | @include separator(center); |
| + | } |
| + | |
| + | .separator-left { |
| + | @include separator(left); |
| + | } |
| + | |
| + | .separator-right { |
| + | @include separator(right); |
| + | } |
| + | |
| + | @if ($prototype-separator-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-separator-center { |
| + | @include separator(center); |
| + | } |
| + | .#{$size}-separator-left { |
| + | @include separator(left); |
| + | } |
| + | .#{$size}-separator-right { |
| + | @include separator(right); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_shadow.scss
+43
-0
| @@ | @@ -0,0 +1,43 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-shadow |
| + | //// |
| + | |
| + | /// Responsive breakpoints for shadow utility. |
| + | /// @type Boolean |
| + | $prototype-shadow-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Default value for `prototype-box-shadow` |
| + | /// @type Number |
| + | $prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), |
| + | 0 2px 10px 0 rgba(0,0,0,.12) !default; |
| + | |
| + | /// Shadow Utility: Adds a light box shadow to an element by default. |
| + | /// @param {Number} $shadow [$prototype-box-shadow] Box Shadow of a component |
| + | @mixin shadow( |
| + | $shadow: $prototype-box-shadow |
| + | ) { |
| + | box-shadow: $shadow; |
| + | } |
| + | |
| + | @mixin foundation-prototype-shadow { |
| + | .shadow { |
| + | @include shadow; |
| + | } |
| + | |
| + | @if ($prototype-shadow-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-shadow { |
| + | @include shadow; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_sizing.scss
+73
-0
| @@ | @@ -0,0 +1,73 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-sizing |
| + | //// |
| + | |
| + | /// Responsive breakpoints for spacing classes (margin and padding) |
| + | /// @type Boolean |
| + | $prototype-sizing-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Map containing all the `sizing` classes |
| + | /// @type Map |
| + | $prototype-sizing: ( |
| + | width, |
| + | height |
| + | ) !default; |
| + | |
| + | /// Map containing all the sizes. |
| + | /// @type Map |
| + | $prototype-sizes: ( |
| + | 25: 25%, |
| + | 50: 50%, |
| + | 75: 75%, |
| + | 100: 100% |
| + | ) !default; |
| + | |
| + | /// Max Width 100 utility. |
| + | @mixin max-width-100 { |
| + | max-width: 100% !important; |
| + | } |
| + | |
| + | /// Max Height 100 utility. |
| + | @mixin max-height-100 { |
| + | max-height: 100% !important; |
| + | } |
| + | |
| + | @mixin foundation-prototype-sizing { |
| + | // Element Sizing |
| + | @each $sizing in $prototype-sizing { |
| + | @each $length, $percentage in $prototype-sizes { |
| + | .#{$sizing}-#{$length} { |
| + | #{$sizing}: $percentage !important; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Max width & height |
| + | .max-width-100 { |
| + | @include max-width-100; |
| + | } |
| + | .max-height-100 { |
| + | @include max-height-100; |
| + | } |
| + | |
| + | @if ($prototype-sizing-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | @each $sizing in $prototype-sizing { |
| + | @each $length, $percentage in $prototype-sizes { |
| + | .#{$size}-#{$sizing}-#{$length} { |
| + | #{$sizing}: $percentage !important; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_spacing.scss
+204
-0
| @@ | @@ -0,0 +1,204 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-spacing |
| + | //// |
| + | |
| + | /// Responsive breakpoints for spacing classes (margin and padding) |
| + | /// @type Boolean |
| + | $prototype-spacing-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Default number of spacers count (margin and padding) |
| + | /// @type Number |
| + | $prototype-spacers-count: 3 !default; |
| + | |
| + | /// Margin helper mixin, all the values are multiplied by `$global-margin` which by default is equal to `1rem` |
| + | /// @param {Number} $top [null] - Margin Top |
| + | /// @param {Number} $right [null] - Margin Right |
| + | /// @param {Number} $bottom [null] - Margin Bottom |
| + | /// @param {Number} $left [null] - Margin Left |
| + | @mixin margin( |
| + | $top: null, |
| + | $right: null, |
| + | $bottom: null, |
| + | $left: null |
| + | ) { |
| + | @if $top != null { |
| + | margin-top: $top * $global-margin !important; |
| + | } |
| + | @if $right != null { |
| + | margin-right: $right * $global-margin !important; |
| + | } |
| + | @if $bottom != null { |
| + | margin-bottom: $bottom * $global-margin !important; |
| + | } |
| + | @if $left != null { |
| + | margin-left: $left * $global-margin !important; |
| + | } |
| + | } |
| + | |
| + | /// Padding helper mixin, all the values are multiplied by `$global-padding` which by default is equal to `1rem` |
| + | /// @param {Number} $top [null] - Padding Top |
| + | /// @param {Number} $right [null] - Padding Right |
| + | /// @param {Number} $bottom [null] - Padding Bottom |
| + | /// @param {Number} $left [null] - Padding Left |
| + | @mixin padding( |
| + | $top: null, |
| + | $right: null, |
| + | $bottom: null, |
| + | $left: null |
| + | ) { |
| + | @if $top != null { |
| + | padding-top: $top * $global-padding !important; |
| + | } |
| + | @if $right != null { |
| + | padding-right: $right * $global-padding !important; |
| + | } |
| + | @if $bottom != null { |
| + | padding-bottom: $bottom * $global-padding !important; |
| + | } |
| + | @if $left != null { |
| + | padding-left: $left * $global-padding !important; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-prototype-spacing { |
| + | @for $spacer from 0 through $prototype-spacers-count { |
| + | // All Sides |
| + | .margin-#{$spacer} { |
| + | @include margin($spacer, $spacer, $spacer, $spacer); |
| + | } |
| + | |
| + | .padding-#{$spacer} { |
| + | @include padding($spacer, $spacer, $spacer, $spacer); |
| + | } |
| + | |
| + | // Top Side |
| + | .margin-top-#{$spacer} { |
| + | @include margin($spacer, null, null, null); |
| + | } |
| + | |
| + | .padding-top-#{$spacer} { |
| + | @include padding($spacer, null, null, null); |
| + | } |
| + | |
| + | // Right Side |
| + | .margin-right-#{$spacer} { |
| + | @include margin(null, $spacer, null, null); |
| + | } |
| + | |
| + | .padding-right-#{$spacer} { |
| + | @include padding(null, $spacer, null, null); |
| + | } |
| + | |
| + | // Bottom Side |
| + | .margin-bottom-#{$spacer} { |
| + | @include margin(null, null, $spacer, null); |
| + | } |
| + | |
| + | .padding-bottom-#{$spacer} { |
| + | @include padding(null, null, $spacer, null); |
| + | } |
| + | |
| + | // Left Side |
| + | .margin-left-#{$spacer} { |
| + | @include margin(null, null, null, $spacer); |
| + | } |
| + | |
| + | .padding-left-#{$spacer} { |
| + | @include padding(null, null, null, $spacer); |
| + | } |
| + | |
| + | // Horizontal Axes |
| + | .margin-horizontal-#{$spacer} { |
| + | @include margin(null, $spacer, null, $spacer); |
| + | } |
| + | |
| + | .padding-horizontal-#{$spacer} { |
| + | @include padding(null, $spacer, null, $spacer); |
| + | } |
| + | |
| + | // Vertical Axes |
| + | .margin-vertical-#{$spacer} { |
| + | @include margin($spacer, null, $spacer, null) |
| + | } |
| + | |
| + | .padding-vertical-#{$spacer} { |
| + | @include padding($spacer, null, $spacer, null) |
| + | } |
| + | |
| + | @if ($prototype-spacing-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | // All Sides |
| + | .#{$size}-margin-#{$spacer} { |
| + | @include margin($spacer, $spacer, $spacer, $spacer); |
| + | } |
| + | |
| + | .#{$size}-padding-#{$spacer} { |
| + | @include padding($spacer, $spacer, $spacer, $spacer); |
| + | } |
| + | |
| + | // Top Side |
| + | .#{$size}-margin-top-#{$spacer} { |
| + | @include margin($spacer, null, null, null); |
| + | } |
| + | |
| + | .#{$size}-padding-top-#{$spacer} { |
| + | @include padding($spacer, null, null, null); |
| + | } |
| + | |
| + | // Right Side |
| + | .#{$size}-margin-right-#{$spacer} { |
| + | @include margin(null, $spacer, null, null); |
| + | } |
| + | |
| + | .#{$size}-padding-right-#{$spacer} { |
| + | @include padding(null, $spacer, null, null); |
| + | } |
| + | |
| + | // Bottom Side |
| + | .#{$size}-margin-bottom-#{$spacer} { |
| + | @include margin(null, null, $spacer, null); |
| + | } |
| + | |
| + | .#{$size}-padding-bottom-#{$spacer} { |
| + | @include padding(null, null, $spacer, null); |
| + | } |
| + | |
| + | // Left Side |
| + | .#{$size}-margin-left-#{$spacer} { |
| + | @include margin(null, null, null, $spacer); |
| + | } |
| + | |
| + | .#{$size}-padding-left-#{$spacer} { |
| + | @include padding(null, null, null, $spacer); |
| + | } |
| + | |
| + | // Horizontal Axes |
| + | .#{$size}-margin-horizontal-#{$spacer} { |
| + | @include margin(null, $spacer, null, $spacer); |
| + | } |
| + | |
| + | .#{$size}-padding-horizontal-#{$spacer} { |
| + | @include padding(null, $spacer, null, $spacer); |
| + | } |
| + | |
| + | // Vertical Axes |
| + | .#{$size}-margin-vertical-#{$spacer} { |
| + | @include margin($spacer, null, $spacer, null) |
| + | } |
| + | |
| + | .#{$size}-padding-vertical-#{$spacer} { |
| + | @include padding($spacer, null, $spacer, null) |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_text-decoration.scss
+48
-0
| @@ | @@ -0,0 +1,48 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-text-decoration |
| + | //// |
| + | |
| + | /// Responsive breakpoints for text decoration classes |
| + | /// @type Boolean |
| + | $prototype-decoration-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Map containing all the `text-decoration` classes |
| + | /// @type Map |
| + | $prototype-text-decoration: ( |
| + | overline, |
| + | underline, |
| + | line-through, |
| + | ) !default; |
| + | |
| + | /// Text Decoration, by default coming through a map `$prototype-text-decoration` |
| + | /// @param {String} $decoration [] Text Decoration |
| + | @mixin text-decoration($decoration) { |
| + | text-decoration: $decoration !important; |
| + | } |
| + | |
| + | @mixin foundation-prototype-text-decoration { |
| + | @each $decoration in $prototype-text-decoration { |
| + | .text-#{$decoration} { |
| + | @include text-decoration($decoration); |
| + | } |
| + | } |
| + | |
| + | @if ($prototype-decoration-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @each $decoration in $prototype-text-decoration { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-text-#{$decoration} { |
| + | @include text-decoration($decoration); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_text-transformation.scss
+48
-0
| @@ | @@ -0,0 +1,48 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-text-transformation |
| + | //// |
| + | |
| + | /// Responsive breakpoints for text transformation classes |
| + | /// @type Boolean |
| + | $prototype-transformation-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Map containing all the `text-transformation` classes |
| + | /// @type Map |
| + | $prototype-text-transformation: ( |
| + | lowercase, |
| + | uppercase, |
| + | capitalize |
| + | ) !default; |
| + | |
| + | /// Text Transformation, by default coming through a map `$prototype-text-transformation` |
| + | /// @param {String} $transformation [] Text Transformation |
| + | @mixin text-transform($transformation) { |
| + | text-transform: $transformation !important; |
| + | } |
| + | |
| + | @mixin foundation-prototype-text-transformation { |
| + | @each $transformation in $prototype-text-transformation { |
| + | .text-#{$transformation} { |
| + | @include text-transform($transformation); |
| + | } |
| + | } |
| + | |
| + | @if ($prototype-transformation-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @each $transformation in $prototype-text-transformation { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-text-#{$transformation} { |
| + | @include text-transform($transformation); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/prototype/_text-utilities.scss
+88
-0
| @@ | @@ -0,0 +1,88 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group prototype-text-utilities |
| + | //// |
| + | |
| + | /// Responsive breakpoints for text utilities |
| + | /// @type Boolean |
| + | $prototype-utilities-breakpoints: $global-prototype-breakpoints !default; |
| + | |
| + | /// Default Value for `text-overflow` variable |
| + | /// @type String |
| + | $prototype-text-overflow: ellipsis !default; |
| + | |
| + | /// Image Replacement utility. `text-hide` |
| + | @mixin text-hide { |
| + | font: 0/0 a !important; |
| + | color: transparent !important; |
| + | text-shadow: none !important; |
| + | background-color: transparent !important; |
| + | border: 0 !important; |
| + | } |
| + | |
| + | /// Truncating the text, elipsis by default. |
| + | /// @param {String} $overflow [$prototype-text-overflow] Text Truncate |
| + | @mixin text-truncate( |
| + | $overflow: $prototype-text-overflow |
| + | ) { |
| + | max-width: 100% !important; |
| + | overflow: hidden !important; |
| + | text-overflow: $overflow; |
| + | white-space: nowrap !important; |
| + | } |
| + | |
| + | /// No wrapping of the text. `text-nowrap` |
| + | @mixin text-nowrap { |
| + | white-space: nowrap !important; |
| + | } |
| + | |
| + | /// Wrapping of the text. `text-wrap` |
| + | @mixin text-wrap { |
| + | word-wrap: break-word !important; |
| + | } |
| + | |
| + | @mixin foundation-prototype-text-utilities { |
| + | .text-hide { |
| + | @include text-hide; |
| + | } |
| + | |
| + | .text-truncate { |
| + | @include text-truncate; |
| + | } |
| + | |
| + | .text-nowrap { |
| + | @include text-nowrap; |
| + | } |
| + | |
| + | .text-wrap { |
| + | @include text-wrap; |
| + | } |
| + | |
| + | @if ($prototype-utilities-breakpoints) { |
| + | // Loop through Responsive Breakpoints |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != $-zf-zero-breakpoint { |
| + | .#{$size}-text-hide { |
| + | @include text-hide; |
| + | } |
| + | |
| + | .#{$size}-text-truncate { |
| + | @include text-truncate; |
| + | } |
| + | |
| + | .#{$size}-text-nowrap { |
| + | @include text-nowrap; |
| + | } |
| + | |
| + | .#{$size}-text-wrap { |
| + | @include text-wrap; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/settings/_settings.scss
+869
-0
| @@ | @@ -0,0 +1,869 @@ |
| + | // 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. Card |
| + | // 15. Close Button |
| + | // 16. Drilldown |
| + | // 17. Dropdown |
| + | // 18. Dropdown Menu |
| + | // 19. Flexbox Utilities |
| + | // 20. Forms |
| + | // 21. Label |
| + | // 22. Media Object |
| + | // 23. Menu |
| + | // 24. Meter |
| + | // 25. Off-canvas |
| + | // 26. Orbit |
| + | // 27. Pagination |
| + | // 28. Progress Bar |
| + | // 29. Prototype Arrow |
| + | // 30. Prototype Border-Box |
| + | // 31. Prototype Border-None |
| + | // 32. Prototype Bordered |
| + | // 33. Prototype Display |
| + | // 34. Prototype Font-Styling |
| + | // 35. Prototype List-Style-Type |
| + | // 36. Prototype Overflow |
| + | // 37. Prototype Position |
| + | // 38. Prototype Rounded |
| + | // 39. Prototype Separator |
| + | // 40. Prototype Shadow |
| + | // 41. Prototype Sizing |
| + | // 42. Prototype Spacing |
| + | // 43. Prototype Text-Decoration |
| + | // 44. Prototype Text-Transformation |
| + | // 45. Prototype Text-Utilities |
| + | // 46. Responsive Embed |
| + | // 47. Reveal |
| + | // 48. Slider |
| + | // 49. Switch |
| + | // 50. Table |
| + | // 51. Tabs |
| + | // 52. Thumbnail |
| + | // 53. Title Bar |
| + | // 54. Tooltip |
| + | // 55. Top Bar |
| + | // 56. Xy Grid |
| + | |
| + | @import 'util/util'; |
| + | |
| + | // 1. Global |
| + | // --------- |
| + | |
| + | $global-font-size: 100%; |
| + | $global-width: rem-calc(1200); |
| + | $global-lineheight: 1.5; |
| + | $foundation-palette: ( |
| + | primary: #1779ba, |
| + | secondary: #767676, |
| + | success: #3adb76, |
| + | warning: #ffae00, |
| + | alert: #cc4b37, |
| + | ); |
| + | $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-position: 1rem; |
| + | $global-weight-normal: normal; |
| + | $global-weight-bold: bold; |
| + | $global-radius: 0; |
| + | $global-menu-padding: 0.7rem 1rem; |
| + | $global-menu-nested-margin: 1rem; |
| + | $global-text-direction: ltr; |
| + | $global-flexbox: true; |
| + | $global-prototype-breakpoints: false; |
| + | $global-button-cursor: auto; |
| + | $global-color-pick-contrast-tolerance: 0; |
| + | $print-transparent-backgrounds: true; |
| + | |
| + | @include add-foundation-colors; |
| + | |
| + | // 2. Breakpoints |
| + | // -------------- |
| + | |
| + | $breakpoints: ( |
| + | small: 0, |
| + | medium: 640px, |
| + | large: 1024px, |
| + | xlarge: 1200px, |
| + | xxlarge: 1440px, |
| + | ); |
| + | $print-breakpoint: large; |
| + | $breakpoint-classes: (small medium large); |
| + | |
| + | // 3. The Grid |
| + | // ----------- |
| + | |
| + | $grid-row-width: $global-width; |
| + | $grid-column-count: 12; |
| + | $grid-column-gutter: ( |
| + | small: 20px, |
| + | medium: 30px, |
| + | ); |
| + | $grid-column-align-edge: true; |
| + | $grid-column-alias: 'columns'; |
| + | $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-color: inherit; |
| + | $header-lineheight: 1.4; |
| + | $header-margin-bottom: 0.5rem; |
| + | $header-styles: ( |
| + | small: ( |
| + | 'h1': ('font-size': 24), |
| + | 'h2': ('font-size': 20), |
| + | 'h3': ('font-size': 19), |
| + | 'h4': ('font-size': 18), |
| + | 'h5': ('font-size': 17), |
| + | 'h6': ('font-size': 16), |
| + | ), |
| + | medium: ( |
| + | 'h1': ('font-size': 48), |
| + | 'h2': ('font-size': 40), |
| + | 'h3': ('font-size': 31), |
| + | 'h4': ('font-size': 25), |
| + | 'h5': ('font-size': 20), |
| + | 'h6': ('font-size': 16), |
| + | ), |
| + | ); |
| + | $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; |
| + | $cite-pseudo-content: '\2014 \0020'; |
| + | $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: get-color(alert); |
| + | $form-label-color-invalid: get-color(alert); |
| + | $input-error-color: get-color(alert); |
| + | $input-error-font-size: rem-calc(12); |
| + | $input-error-font-weight: $global-weight-bold; |
| + | |
| + | // 7. Accordion |
| + | // ------------ |
| + | |
| + | $accordion-background: $white; |
| + | $accordion-plusminus: true; |
| + | $accordion-title-font-size: rem-calc(12); |
| + | $accordion-item-color: $primary-color; |
| + | $accordion-item-background-hover: $light-gray; |
| + | $accordion-item-padding: 1.25rem 1rem; |
| + | $accordion-content-background: $white; |
| + | $accordion-content-border: 1px solid $light-gray; |
| + | $accordion-content-color: $body-font-color; |
| + | $accordion-content-padding: 1rem; |
| + | |
| + | // 8. Accordion Menu |
| + | // ----------------- |
| + | |
| + | $accordionmenu-padding: $global-menu-padding; |
| + | $accordionmenu-nested-margin: $global-menu-nested-margin; |
| + | $accordionmenu-submenu-padding: $accordionmenu-padding; |
| + | $accordionmenu-arrows: true; |
| + | $accordionmenu-arrow-color: $primary-color; |
| + | $accordionmenu-item-background: null; |
| + | $accordionmenu-border: null; |
| + | $accordionmenu-submenu-toggle-background: null; |
| + | $accordion-submenu-toggle-border: $accordionmenu-border; |
| + | $accordionmenu-submenu-toggle-width: 40px; |
| + | $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width; |
| + | $accordionmenu-arrow-size: 6px; |
| + | |
| + | // 9. Badge |
| + | // -------- |
| + | |
| + | $badge-background: $primary-color; |
| + | $badge-color: $white; |
| + | $badge-color-alt: $black; |
| + | $badge-palette: $foundation-palette; |
| + | $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-separator: true; |
| + | $breadcrumbs-item-separator-item: '/'; |
| + | $breadcrumbs-item-separator-item-rtl: '\\'; |
| + | $breadcrumbs-item-separator-color: $medium-gray; |
| + | |
| + | // 11. Button |
| + | // ---------- |
| + | |
| + | $button-font-family: inherit; |
| + | $button-padding: 0.85em 1em; |
| + | $button-margin: 0 0 $global-margin 0; |
| + | $button-fill: solid; |
| + | $button-background: $primary-color; |
| + | $button-background-hover: scale-color($button-background, $lightness: -15%); |
| + | $button-color: $white; |
| + | $button-color-alt: $black; |
| + | $button-radius: $global-radius; |
| + | $button-hollow-border-width: 1px; |
| + | $button-sizes: ( |
| + | tiny: 0.6rem, |
| + | small: 0.75rem, |
| + | default: 0.9rem, |
| + | large: 1.25rem, |
| + | ); |
| + | $button-palette: $foundation-palette; |
| + | $button-opacity-disabled: 0.25; |
| + | $button-background-hover-lightness: -20%; |
| + | $button-hollow-hover-lightness: -50%; |
| + | $button-transition: background-color 0.25s ease-out, color 0.25s ease-out; |
| + | |
| + | // 12. Button Group |
| + | // ---------------- |
| + | |
| + | $buttongroup-margin: 1rem; |
| + | $buttongroup-spacing: 1px; |
| + | $buttongroup-child-selector: '.button'; |
| + | $buttongroup-expand-max: 6; |
| + | $buttongroup-radius-on-each: true; |
| + | |
| + | // 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. Card |
| + | // -------- |
| + | |
| + | $card-background: $white; |
| + | $card-font-color: $body-font-color; |
| + | $card-divider-background: $light-gray; |
| + | $card-border: 1px solid $light-gray; |
| + | $card-shadow: none; |
| + | $card-border-radius: $global-radius; |
| + | $card-padding: $global-padding; |
| + | $card-margin-bottom: $global-margin; |
| + | |
| + | // 15. Close Button |
| + | // ---------------- |
| + | |
| + | $closebutton-position: right top; |
| + | $closebutton-offset-horizontal: ( |
| + | small: 0.66rem, |
| + | medium: 1rem, |
| + | ); |
| + | $closebutton-offset-vertical: ( |
| + | small: 0.33em, |
| + | medium: 0.5rem, |
| + | ); |
| + | $closebutton-size: ( |
| + | small: 1.5em, |
| + | medium: 2em, |
| + | ); |
| + | $closebutton-lineheight: 1; |
| + | $closebutton-color: $dark-gray; |
| + | $closebutton-color-hover: $black; |
| + | |
| + | // 16. Drilldown |
| + | // ------------- |
| + | |
| + | $drilldown-transition: transform 0.15s linear; |
| + | $drilldown-arrows: true; |
| + | $drilldown-padding: $global-menu-padding; |
| + | $drilldown-nested-margin: 0; |
| + | $drilldown-background: $white; |
| + | $drilldown-submenu-padding: $drilldown-padding; |
| + | $drilldown-submenu-background: $white; |
| + | $drilldown-arrow-color: $primary-color; |
| + | $drilldown-arrow-size: 6px; |
| + | |
| + | // 17. Dropdown |
| + | // ------------ |
| + | |
| + | $dropdown-padding: 1rem; |
| + | $dropdown-background: $body-background; |
| + | $dropdown-border: 1px solid $medium-gray; |
| + | $dropdown-font-size: 1rem; |
| + | $dropdown-width: 300px; |
| + | $dropdown-radius: $global-radius; |
| + | $dropdown-sizes: ( |
| + | tiny: 100px, |
| + | small: 200px, |
| + | large: 400px, |
| + | ); |
| + | |
| + | // 18. Dropdown Menu |
| + | // ----------------- |
| + | |
| + | $dropdownmenu-arrows: true; |
| + | $dropdownmenu-arrow-color: $anchor-color; |
| + | $dropdownmenu-arrow-size: 6px; |
| + | $dropdownmenu-arrow-padding: 1.5rem; |
| + | $dropdownmenu-min-width: 200px; |
| + | $dropdownmenu-background: $white; |
| + | $dropdownmenu-submenu-background: $dropdownmenu-background; |
| + | $dropdownmenu-padding: $global-menu-padding; |
| + | $dropdownmenu-nested-margin: 0; |
| + | $dropdownmenu-submenu-padding: $dropdownmenu-padding; |
| + | $dropdownmenu-border: 1px solid $medium-gray; |
| + | $dropdown-menu-item-color-active: get-color(primary); |
| + | $dropdown-menu-item-background-active: transparent; |
| + | |
| + | // 19. Flexbox Utilities |
| + | // --------------------- |
| + | |
| + | $flex-source-ordering-count: 6; |
| + | $flexbox-responsive-breakpoints: true; |
| + | |
| + | // 20. 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: $black; |
| + | $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: $dark-gray; |
| + | $select-radius: $global-radius; |
| + | $input-color: $black; |
| + | $input-placeholder-color: $medium-gray; |
| + | $input-font-family: inherit; |
| + | $input-font-size: rem-calc(16); |
| + | $input-font-weight: $global-weight-normal; |
| + | $input-line-height: $global-lineheight; |
| + | $input-background: $white; |
| + | $input-background-focus: $white; |
| + | $input-background-disabled: $light-gray; |
| + | $input-border: 1px solid $medium-gray; |
| + | $input-border-focus: 1px solid $dark-gray; |
| + | $input-padding: $form-spacing / 2; |
| + | $input-shadow: inset 0 1px 2px rgba($black, 0.1); |
| + | $input-shadow-focus: 0 0 5px $medium-gray; |
| + | $input-cursor-disabled: not-allowed; |
| + | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; |
| + | $input-number-spinners: true; |
| + | $input-radius: $global-radius; |
| + | $form-button-radius: $global-radius; |
| + | |
| + | // 21. Label |
| + | // --------- |
| + | |
| + | $label-background: $primary-color; |
| + | $label-color: $white; |
| + | $label-color-alt: $black; |
| + | $label-palette: $foundation-palette; |
| + | $label-font-size: 0.8rem; |
| + | $label-padding: 0.33333rem 0.5rem; |
| + | $label-radius: $global-radius; |
| + | |
| + | // 22. Media Object |
| + | // ---------------- |
| + | |
| + | $mediaobject-margin-bottom: $global-margin; |
| + | $mediaobject-section-padding: $global-padding; |
| + | $mediaobject-image-width-stacked: 100%; |
| + | |
| + | // 23. Menu |
| + | // -------- |
| + | |
| + | $menu-margin: 0; |
| + | $menu-nested-margin: $global-menu-nested-margin; |
| + | $menu-items-padding: $global-menu-padding; |
| + | $menu-simple-margin: 1rem; |
| + | $menu-item-color-active: $white; |
| + | $menu-item-background-active: get-color(primary); |
| + | $menu-icon-spacing: 0.25rem; |
| + | $menu-item-background-hover: $light-gray; |
| + | $menu-state-back-compat: true; |
| + | $menu-centered-back-compat: true; |
| + | $menu-icons-back-compat: true; |
| + | |
| + | // 24. Meter |
| + | // --------- |
| + | |
| + | $meter-height: 1rem; |
| + | $meter-radius: $global-radius; |
| + | $meter-background: $medium-gray; |
| + | $meter-fill-good: $success-color; |
| + | $meter-fill-medium: $warning-color; |
| + | $meter-fill-bad: $alert-color; |
| + | |
| + | // 25. Off-canvas |
| + | // -------------- |
| + | |
| + | $offcanvas-sizes: ( |
| + | small: 250px, |
| + | ); |
| + | $offcanvas-vertical-sizes: ( |
| + | small: 250px, |
| + | ); |
| + | $offcanvas-background: $light-gray; |
| + | $offcanvas-shadow: 0 0 10px rgba($black, 0.7); |
| + | $offcanvas-inner-shadow-size: 20px; |
| + | $offcanvas-inner-shadow-color: rgba($black, 0.25); |
| + | $offcanvas-overlay-zindex: 11; |
| + | $offcanvas-push-zindex: 12; |
| + | $offcanvas-overlap-zindex: 13; |
| + | $offcanvas-reveal-zindex: 12; |
| + | $offcanvas-transition-length: 0.5s; |
| + | $offcanvas-transition-timing: ease; |
| + | $offcanvas-fixed-reveal: true; |
| + | $offcanvas-exit-background: rgba($white, 0.25); |
| + | $maincontent-class: 'off-canvas-content'; |
| + | |
| + | // 26. 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; |
| + | |
| + | // 27. 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: $white; |
| + | $pagination-item-color-disabled: $medium-gray; |
| + | $pagination-ellipsis-color: $black; |
| + | $pagination-mobile-items: false; |
| + | $pagination-mobile-current-item: false; |
| + | $pagination-arrows: true; |
| + | |
| + | // 28. Progress Bar |
| + | // ---------------- |
| + | |
| + | $progress-height: 1rem; |
| + | $progress-background: $medium-gray; |
| + | $progress-margin-bottom: $global-margin; |
| + | $progress-meter-background: $primary-color; |
| + | $progress-radius: $global-radius; |
| + | |
| + | // 29. Prototype Arrow |
| + | // ------------------- |
| + | |
| + | $prototype-arrow-directions: ( |
| + | down, |
| + | up, |
| + | right, |
| + | left |
| + | ); |
| + | $prototype-arrow-size: 0.4375rem; |
| + | $prototype-arrow-color: $black; |
| + | |
| + | // 30. Prototype Border-Box |
| + | // ------------------------ |
| + | |
| + | $prototype-border-box-breakpoints: $global-prototype-breakpoints; |
| + | |
| + | // 31. Prototype Border-None |
| + | // ------------------------- |
| + | |
| + | $prototype-border-none-breakpoints: $global-prototype-breakpoints; |
| + | |
| + | // 32. Prototype Bordered |
| + | // ---------------------- |
| + | |
| + | $prototype-bordered-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-border-width: rem-calc(1); |
| + | $prototype-border-type: solid; |
| + | $prototype-border-color: $medium-gray; |
| + | |
| + | // 33. Prototype Display |
| + | // --------------------- |
| + | |
| + | $prototype-display-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-display: ( |
| + | inline, |
| + | inline-block, |
| + | block, |
| + | table, |
| + | table-cell |
| + | ); |
| + | |
| + | // 34. Prototype Font-Styling |
| + | // -------------------------- |
| + | |
| + | $prototype-font-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-wide-letter-spacing: rem-calc(4); |
| + | $prototype-font-normal: $global-weight-normal; |
| + | $prototype-font-bold: $global-weight-bold; |
| + | |
| + | // 35. Prototype List-Style-Type |
| + | // ----------------------------- |
| + | |
| + | $prototype-list-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-style-type-unordered: ( |
| + | disc, |
| + | circle, |
| + | square |
| + | ); |
| + | $prototype-style-type-ordered: ( |
| + | decimal, |
| + | lower-alpha, |
| + | lower-latin, |
| + | lower-roman, |
| + | upper-alpha, |
| + | upper-latin, |
| + | upper-roman |
| + | ); |
| + | |
| + | // 36. Prototype Overflow |
| + | // ---------------------- |
| + | |
| + | $prototype-overflow-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-overflow: ( |
| + | visible, |
| + | hidden, |
| + | scroll |
| + | ); |
| + | |
| + | // 37. Prototype Position |
| + | // ---------------------- |
| + | |
| + | $prototype-position-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-position: ( |
| + | static, |
| + | relative, |
| + | absolute, |
| + | fixed |
| + | ); |
| + | $prototype-position-z-index: 975; |
| + | |
| + | // 38. Prototype Rounded |
| + | // --------------------- |
| + | |
| + | $prototype-rounded-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-border-radius: rem-calc(3); |
| + | |
| + | // 39. Prototype Separator |
| + | // ----------------------- |
| + | |
| + | $prototype-separator-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-separator-align: center; |
| + | $prototype-separator-height: rem-calc(2); |
| + | $prototype-separator-width: 3rem; |
| + | $prototype-separator-background: $primary-color; |
| + | $prototype-separator-margin-top: $global-margin; |
| + | |
| + | // 40. Prototype Shadow |
| + | // -------------------- |
| + | |
| + | $prototype-shadow-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), |
| + | 0 2px 10px 0 rgba(0,0,0,.12); |
| + | |
| + | // 41. Prototype Sizing |
| + | // -------------------- |
| + | |
| + | $prototype-sizing-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-sizing: ( |
| + | width, |
| + | height |
| + | ); |
| + | $prototype-sizes: ( |
| + | 25: 25%, |
| + | 50: 50%, |
| + | 75: 75%, |
| + | 100: 100% |
| + | ); |
| + | |
| + | // 42. Prototype Spacing |
| + | // --------------------- |
| + | |
| + | $prototype-spacing-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-spacers-count: 3; |
| + | |
| + | // 43. Prototype Text-Decoration |
| + | // ----------------------------- |
| + | |
| + | $prototype-decoration-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-text-decoration: ( |
| + | overline, |
| + | underline, |
| + | line-through, |
| + | ); |
| + | |
| + | // 44. Prototype Text-Transformation |
| + | // --------------------------------- |
| + | |
| + | $prototype-transformation-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-text-transformation: ( |
| + | lowercase, |
| + | uppercase, |
| + | capitalize |
| + | ); |
| + | |
| + | // 45. Prototype Text-Utilities |
| + | // ---------------------------- |
| + | |
| + | $prototype-utilities-breakpoints: $global-prototype-breakpoints; |
| + | $prototype-text-overflow: ellipsis; |
| + | |
| + | // 46. Responsive Embed |
| + | // -------------------- |
| + | |
| + | $responsive-embed-margin-bottom: rem-calc(16); |
| + | $responsive-embed-ratios: ( |
| + | default: 4 by 3, |
| + | widescreen: 16 by 9, |
| + | ); |
| + | |
| + | // 47. Reveal |
| + | // ---------- |
| + | |
| + | $reveal-background: $white; |
| + | $reveal-width: 600px; |
| + | $reveal-max-width: $global-width; |
| + | $reveal-padding: $global-padding; |
| + | $reveal-border: 1px solid $medium-gray; |
| + | $reveal-radius: $global-radius; |
| + | $reveal-zindex: 1005; |
| + | $reveal-overlay-background: rgba($black, 0.45); |
| + | |
| + | // 48. Slider |
| + | // ---------- |
| + | |
| + | $slider-width-vertical: 0.5rem; |
| + | $slider-transition: all 0.2s ease-in-out; |
| + | $slider-height: 0.5rem; |
| + | $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; |
| + | |
| + | // 49. 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; |
| + | |
| + | // 50. 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-is-striped: true; |
| + | $table-striped-background: smart-scale($table-background, $table-color-scale); |
| + | $table-stripe: even; |
| + | $table-head-background: smart-scale($table-background, $table-color-scale / 2); |
| + | $table-head-row-hover: darken($table-head-background, $table-hover-scale); |
| + | $table-foot-background: smart-scale($table-background, $table-color-scale); |
| + | $table-foot-row-hover: darken($table-foot-background, $table-hover-scale); |
| + | $table-head-font-color: $body-font-color; |
| + | $table-foot-font-color: $body-font-color; |
| + | $show-header-for-stacked: false; |
| + | $table-stack-breakpoint: medium; |
| + | |
| + | // 51. Tabs |
| + | // -------- |
| + | |
| + | $tab-margin: 0; |
| + | $tab-background: $white; |
| + | $tab-color: $primary-color; |
| + | $tab-background-active: $light-gray; |
| + | $tab-active-color: $primary-color; |
| + | $tab-item-font-size: rem-calc(12); |
| + | $tab-item-background-hover: $white; |
| + | $tab-item-padding: 1.25rem 1.5rem; |
| + | $tab-expand-max: 6; |
| + | $tab-content-background: $white; |
| + | $tab-content-border: $light-gray; |
| + | $tab-content-color: $body-font-color; |
| + | $tab-content-padding: 1rem; |
| + | |
| + | // 52. 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; |
| + | |
| + | // 53. Title Bar |
| + | // ------------- |
| + | |
| + | $titlebar-background: $black; |
| + | $titlebar-color: $white; |
| + | $titlebar-padding: 0.5rem; |
| + | $titlebar-text-font-weight: bold; |
| + | $titlebar-icon-color: $white; |
| + | $titlebar-icon-color-hover: $medium-gray; |
| + | $titlebar-icon-spacing: 0.25rem; |
| + | |
| + | // 54. Tooltip |
| + | // ----------- |
| + | |
| + | $has-tip-cursor: help; |
| + | $has-tip-font-weight: $global-weight-bold; |
| + | $has-tip-border-bottom: dotted 1px $dark-gray; |
| + | $tooltip-background-color: $black; |
| + | $tooltip-color: $white; |
| + | $tooltip-padding: 0.75rem; |
| + | $tooltip-max-width: 10rem; |
| + | $tooltip-font-size: $small-font-size; |
| + | $tooltip-pip-width: 0.75rem; |
| + | $tooltip-pip-height: $tooltip-pip-width * 0.866; |
| + | $tooltip-radius: $global-radius; |
| + | |
| + | // 55. Top Bar |
| + | // ----------- |
| + | |
| + | $topbar-padding: 0.5rem; |
| + | $topbar-background: $light-gray; |
| + | $topbar-submenu-background: $topbar-background; |
| + | $topbar-title-spacing: 0.5rem 1rem 0.5rem 0; |
| + | $topbar-input-width: 200px; |
| + | $topbar-unstack-breakpoint: medium; |
| + | |
| + | // 56. Xy Grid |
| + | // ----------- |
| + | |
| + | $xy-grid: true; |
| + | $grid-container: $global-width; |
| + | $grid-columns: 12; |
| + | $grid-margin-gutters: ( |
| + | small: 20px, |
| + | medium: 30px |
| + | ); |
| + | $grid-padding-gutters: $grid-margin-gutters; |
| + | $grid-container-padding: $grid-padding-gutters; |
| + | $grid-container-max: $global-width; |
| + | $xy-block-grid-max: 8; |
| + | |
public/stylesheets/foundation6/typography/_alignment.scss
+22
-0
| @@ | @@ -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 != $-zf-zero-breakpoint { |
| + | .#{$size}-text-#{$align} { |
| + | text-align: $align; |
| + | } |
| + | } |
| + | @else { |
| + | .text-#{$align} { |
| + | text-align: $align; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/typography/_base.scss
+509
-0
| @@ | @@ -0,0 +1,509 @@ |
| + | // 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; |
| + | |
| + | /// 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; |
| + | |
| + | /// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles. |
| + | /// @type Map |
| + | $header-styles: ( |
| + | small: ( |
| + | 'h1': ('font-size': 24), |
| + | 'h2': ('font-size': 20), |
| + | 'h3': ('font-size': 19), |
| + | 'h4': ('font-size': 18), |
| + | 'h5': ('font-size': 17), |
| + | 'h6': ('font-size': 16), |
| + | ), |
| + | medium: ( |
| + | 'h1': ('font-size': 48), |
| + | 'h2': ('font-size': 40), |
| + | 'h3': ('font-size': 31), |
| + | 'h4': ('font-size': 25), |
| + | 'h5': ('font-size': 20), |
| + | 'h6': ('font-size': 16), |
| + | ), |
| + | ) !default; |
| + | |
| + | // $header-styles map is built from $header-sizes in order to ensure downward compatibility |
| + | // when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss |
| + | @function build_from_header-sizes($header-sizes) { |
| + | @warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.'; |
| + | $header-styles: (); |
| + | @each $size, $headers in $header-sizes { |
| + | $header-map: (); |
| + | @each $header, $font-size in $headers { |
| + | $header-map: map-merge($header-map, ($header: ('font-size': $font-size))); |
| + | } |
| + | $header-styles: map-merge($header-styles, ($size: $header-map)); |
| + | } |
| + | @return $header-styles; |
| + | } |
| + | |
| + | // If it exists $headers-sizes is used to build $header-styles. See the documentation. |
| + | @if variable-exists(header-sizes) { |
| + | $header-styles: build_from_header-sizes($header-sizes); |
| + | } |
| + | |
| + | /// Text rendering method of headers. |
| + | /// @type String |
| + | $header-text-rendering: optimizeLegibility !default; |
| + | |
| + | /// 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 decoration 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; |
| + | |
| + | /// Pseudo content for `<cite>` elements. |
| + | /// @type String |
| + | $cite-pseudo-content: '\2014 \0020' !default; |
| + | |
| + | /// Font family for `<kbd>` elements. |
| + | /// @type String | List |
| + | $keystroke-font: $font-family-monospace !default; |
| + | |
| + | /// 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 { |
| + | margin-bottom: $paragraph-margin-bottom; |
| + | |
| + | font-size: inherit; |
| + | line-height: $paragraph-lineheight; |
| + | 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, .h1, |
| + | h2, .h2, |
| + | h3, .h3, |
| + | h4, .h4, |
| + | h5, .h5, |
| + | h6, .h6 { |
| + | font-family: $header-font-family; |
| + | font-style: $header-font-style; |
| + | font-weight: $header-font-weight; |
| + | color: $header-color; |
| + | text-rendering: $header-text-rendering; |
| + | |
| + | small { |
| + | line-height: 0; |
| + | color: $header-small-font-color; |
| + | } |
| + | } |
| + | |
| + | // Heading styles |
| + | @each $size, $headers in $header-styles { |
| + | @include breakpoint($size) { |
| + | @each $header, $header-defs in $headers { |
| + | $font-size-temp: 1rem; |
| + | #{$header}, .#{$header} { |
| + | |
| + | @if map-has-key($header-defs, font-size) { |
| + | $font-size-temp: rem-calc(map-get($header-defs, font-size)); |
| + | font-size: $font-size-temp; |
| + | } @else if map-has-key($header-defs, fs) { |
| + | $font-size-temp: rem-calc(map-get($header-defs, fs)); |
| + | font-size: $font-size-temp; |
| + | } @else if $size == $-zf-zero-breakpoint { |
| + | font-size: $font-size-temp; |
| + | } |
| + | @if map-has-key($header-defs, line-height) { |
| + | line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp); |
| + | } @else if map-has-key($header-defs, lh) { |
| + | line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp); |
| + | } @else if $size == $-zf-zero-breakpoint { |
| + | line-height: unitless-calc($header-lineheight, $font-size-temp); |
| + | } |
| + | |
| + | @if map-has-key($header-defs, margin-top) { |
| + | margin-top: rem-calc(map-get($header-defs, margin-top)); |
| + | } @else if map-has-key($header-defs, mt) { |
| + | margin-top: rem-calc(map-get($header-defs, mt)); |
| + | } @else if $size == $-zf-zero-breakpoint { |
| + | margin-top: 0; |
| + | } |
| + | @if map-has-key($header-defs, margin-bottom) { |
| + | margin-bottom: rem-calc(map-get($header-defs, margin-bottom)); |
| + | } @else if map-has-key($header-defs, mb) { |
| + | margin-bottom: rem-calc(map-get($header-defs, mb)); |
| + | } @else if $size == $-zf-zero-breakpoint { |
| + | margin-bottom: rem-calc($header-margin-bottom); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Links |
| + | a { |
| + | line-height: inherit; |
| + | color: $anchor-color; |
| + | text-decoration: $anchor-text-decoration; |
| + | |
| + | 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 { |
| + | clear: both; |
| + | |
| + | max-width: $hr-width; |
| + | height: 0; |
| + | margin: $hr-margin; |
| + | |
| + | border-top: 0; |
| + | border-right: 0; |
| + | border-bottom: $hr-border; |
| + | border-left: 0; |
| + | } |
| + | |
| + | // Lists |
| + | ul, |
| + | ol, |
| + | dl { |
| + | margin-bottom: $list-margin-bottom; |
| + | list-style-position: $list-style-position; |
| + | line-height: $list-lineheight; |
| + | } |
| + | |
| + | // List items |
| + | li { |
| + | font-size: inherit; |
| + | } |
| + | |
| + | // Unordered lists |
| + | ul { |
| + | margin-#{$global-left}: $list-side-margin; |
| + | list-style-type: $list-style-type; |
| + | } |
| + | |
| + | // 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: $cite-pseudo-content; |
| + | } |
| + | } |
| + | |
| + | // Abbreviations |
| + | abbr, abbr[title] { |
| + | border-bottom: $abbr-underline; |
| + | cursor: help; |
| + | text-decoration: none; |
| + | } |
| + | |
| + | // Figures |
| + | figure { |
| + | margin: 0; |
| + | } |
| + | |
| + | // Code |
| + | code { |
| + | padding: $code-padding; |
| + | |
| + | border: $code-border; |
| + | background-color: $code-background; |
| + | |
| + | font-family: $code-font-family; |
| + | font-weight: $code-font-weight; |
| + | color: $code-color; |
| + | } |
| + | |
| + | // Keystrokes |
| + | kbd { |
| + | margin: 0; |
| + | padding: $keystroke-padding; |
| + | |
| + | background-color: $keystroke-background; |
| + | |
| + | font-family: $keystroke-font; |
| + | color: $keystroke-color; |
| + | |
| + | @if has-value($keystroke-radius) { |
| + | border-radius: $keystroke-radius; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/typography/_helpers.scss
+80
-0
| @@ | @@ -0,0 +1,80 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group typography-helpers |
| + | //// |
| + | |
| + | /// Default font size for lead paragraphs. |
| + | /// @type Number |
| + | $lead-font-size: $global-font-size * 1.25 !default; |
| + | |
| + | /// Default line height for lead paragraphs. |
| + | /// @type String |
| + | $lead-lineheight: 1.6 !default; |
| + | |
| + | /// Default line height for subheaders. |
| + | /// @type Number |
| + | $subheader-lineheight: 1.4 !default; |
| + | |
| + | /// Default font color for subheaders. |
| + | /// @type Color |
| + | $subheader-color: $dark-gray !default; |
| + | |
| + | /// Default font weight for subheaders. |
| + | /// @type String |
| + | $subheader-font-weight: $global-weight-normal !default; |
| + | |
| + | /// Default top margin for subhheaders. |
| + | /// @type Number |
| + | $subheader-margin-top: 0.2rem !default; |
| + | |
| + | /// Default bottom margin for subheaders. |
| + | /// @type Number |
| + | $subheader-margin-bottom: 0.5rem !default; |
| + | |
| + | /// Default font size for statistic numbers. |
| + | /// @type Number |
| + | $stat-font-size: 2.5rem !default; |
| + | |
| + | @mixin foundation-typography-helpers { |
| + | // Use to create a subheading under a main header |
| + | // Make sure you pair the two elements in a <header> element, like this: |
| + | // <header> |
| + | // <h1>Heading</h1> |
| + | // <h2>Subheading</h2> |
| + | // </header> |
| + | .subheader { |
| + | margin-top: $subheader-margin-top; |
| + | margin-bottom: $subheader-margin-bottom; |
| + | |
| + | font-weight: $subheader-font-weight; |
| + | line-height: $subheader-lineheight; |
| + | color: $subheader-color; |
| + | } |
| + | |
| + | // Use to style an introductory lead, deck, blurb, etc. |
| + | .lead { |
| + | font-size: $lead-font-size; |
| + | line-height: $lead-lineheight; |
| + | } |
| + | |
| + | // Use to style a large number to display a statistic |
| + | .stat { |
| + | font-size: $stat-font-size; |
| + | line-height: 1; |
| + | |
| + | p + & { |
| + | margin-top: -1rem; |
| + | } |
| + | } |
| + | |
| + | ul, ol { |
| + | // Use to remove numbers from ordered list & bullets from unordered list |
| + | &.no-bullet { |
| + | margin-#{$global-left}: 0; |
| + | list-style: none; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/typography/_print.scss
+86
-0
| @@ | @@ -0,0 +1,86 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | /// If `true`, all elements will have transparent backgrounds when printed, to save on ink. |
| + | /// @type Boolean |
| + | /// @group global |
| + | $print-transparent-backgrounds: true !default; |
| + | $print-hrefs: true !default; |
| + | |
| + | // sass-lint:disable-all |
| + | |
| + | @mixin foundation-print-styles { |
| + | .show-for-print { display: none !important; } |
| + | |
| + | @media print { |
| + | * { |
| + | @if $print-transparent-backgrounds { |
| + | background: transparent !important; |
| + | } |
| + | |
| + | box-shadow: none !important; |
| + | |
| + | color: black !important; // Black prints faster: h5bp.com/s |
| + | text-shadow: none !important; |
| + | } |
| + | |
| + | .show-for-print { display: block !important; } |
| + | .hide-for-print { display: none !important; } |
| + | |
| + | table.show-for-print { display: table !important; } |
| + | thead.show-for-print { display: table-header-group !important; } |
| + | tbody.show-for-print { display: table-row-group !important; } |
| + | tr.show-for-print { display: table-row !important; } |
| + | td.show-for-print { display: table-cell !important; } |
| + | th.show-for-print { display: table-cell !important; } |
| + | |
| + | // Display the URL of a link after the text |
| + | a, |
| + | a:visited { text-decoration: underline;} |
| + | @if $print-hrefs { |
| + | a[href]:after { content: ' (' attr(href) ')'; } |
| + | } |
| + | |
| + | // Don't display the URL for images or JavaScript/internal links |
| + | .ir a:after, |
| + | a[href^='javascript:']:after, |
| + | a[href^='#']:after { content: ''; } |
| + | |
| + | // Display what an abbreviation stands for after the text |
| + | abbr[title]:after { content: ' (' attr(title) ')'; } |
| + | |
| + | // Prevent page breaks in the middle of a blockquote or preformatted text block |
| + | pre, |
| + | blockquote { |
| + | border: 1px solid $dark-gray; |
| + | page-break-inside: avoid; |
| + | } |
| + | |
| + | // h5bp.com/t |
| + | thead { display: table-header-group; } |
| + | |
| + | tr, |
| + | img { page-break-inside: avoid; } |
| + | |
| + | img { max-width: 100% !important; } |
| + | |
| + | @page { margin: 0.5cm; } |
| + | |
| + | p, |
| + | h2, |
| + | h3 { |
| + | orphans: 3; |
| + | widows: 3; |
| + | } |
| + | |
| + | // Avoid page breaks after a heading |
| + | h2, |
| + | h3 { page-break-after: avoid; } |
| + | |
| + | // Helper to re-allow page breaks in the middle of certain elements (e.g. pre, blockquote, tr) |
| + | .print-break-inside { |
| + | page-break-inside: auto; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/typography/_typography.scss
+26
-0
| @@ | @@ -0,0 +1,26 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group typography |
| + | //// |
| + | |
| + | // Base typography styles (tags only) |
| + | @import 'base'; |
| + | |
| + | // Typography helper classes (classes only) |
| + | @import 'helpers'; |
| + | |
| + | // Text alignment classes |
| + | @import 'alignment'; |
| + | |
| + | // Print styles |
| + | @import 'print'; |
| + | |
| + | @mixin foundation-typography { |
| + | @include foundation-typography-base; |
| + | @include foundation-typography-helpers; |
| + | @include foundation-text-alignment; |
| + | @include foundation-print-styles; |
| + | } |
public/stylesheets/foundation6/util/_breakpoint.scss
+348
-0
| @@ | @@ -0,0 +1,348 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group breakpoints |
| + | //// |
| + | |
| + | /// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries. |
| + | /// @type Map |
| + | $breakpoints: ( |
| + | small: 0, |
| + | medium: 640px, |
| + | large: 1024px, |
| + | xlarge: 1200px, |
| + | xxlarge: 1440px, |
| + | ) !default; |
| + | |
| + | /// The largest named breakpoint in which to include print as a media type |
| + | /// @type Keyword |
| + | $print-breakpoint: large !default; |
| + | |
| + | $-zf-zero-breakpoint: small !default; |
| + | |
| + | $-zf-breakpoints-keys: map-to-list($breakpoints, 'keys'); |
| + | |
| + | @if nth(map-values($breakpoints), 1) != 0 { |
| + | @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".'; |
| + | } |
| + | @else { |
| + | $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1); |
| + | } |
| + | |
| + | /// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map. |
| + | /// @type List |
| + | $breakpoint-classes: (small medium large) !default; |
| + | |
| + | /// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are. |
| + | /// |
| + | /// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process. |
| + | @function breakpoint($val: $-zf-zero-breakpoint) { |
| + | // Size or keyword |
| + | $bp: nth($val, 1); |
| + | // Value for max-width media queries |
| + | $bp-max: 0; |
| + | // Direction of media query (up, down, or only) |
| + | $dir: if(length($val) > 1, nth($val, 2), up); |
| + | // Eventual output |
| + | $str: ''; |
| + | // Is it a named media query? |
| + | $named: false; |
| + | |
| + | // Orientation media queries have a unique syntax |
| + | @if $bp == 'landscape' or $bp == 'portrait' { |
| + | @return '(orientation: #{$bp})'; |
| + | } |
| + | @else if $bp == 'retina' { |
| + | @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'; |
| + | } |
| + | |
| + | // Try to pull a named breakpoint out of the $breakpoints map |
| + | @if type-of($bp) == 'string' { |
| + | @if map-has-key($breakpoints, $bp) { |
| + | @if $dir == 'only' or $dir == 'down' { |
| + | $bp-max: -zf-map-next($breakpoints, $bp); |
| + | } |
| + | |
| + | $bp: map-get($breakpoints, $bp); |
| + | $named: true; |
| + | } |
| + | @else { |
| + | $bp: 0; |
| + | @warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.'; |
| + | } |
| + | } |
| + | |
| + | // Convert any pixel, rem, or unitless value to em |
| + | $bp: -zf-bp-to-em($bp); |
| + | @if $bp-max { |
| + | $bp-max: -zf-bp-to-em($bp-max) - (1/16); |
| + | } |
| + | |
| + | // Conditions to skip media query creation |
| + | // - It's a named breakpoint that resolved to "0 down" or "0 up" |
| + | // - It's a numeric breakpoint that resolved to "0 " + anything |
| + | @if $bp > 0em or $dir == 'only' or $dir == 'down' { |
| + | // `only` ranges use the format `(min-width: n) and (max-width: n)` |
| + | @if $dir == 'only' { |
| + | // Only named media queries can have an "only" range |
| + | @if $named == true { |
| + | // Only use "min-width" if the floor is greater than 0 |
| + | @if $bp > 0em { |
| + | $str: $str + '(min-width: #{$bp})'; |
| + | |
| + | // Only add "and" to the media query if there's a ceiling |
| + | @if $bp-max != null { |
| + | $str: $str + ' and '; |
| + | } |
| + | } |
| + | |
| + | // Only use "max-width" if there's a ceiling |
| + | @if $bp-max != null { |
| + | $str: $str + '(max-width: #{$bp-max})'; |
| + | } |
| + | } |
| + | @else { |
| + | @warn 'breakpoint(): Only named media queries can have an `only` range.'; |
| + | } |
| + | } |
| + | |
| + | // `down` ranges use the format `(max-width: n)` |
| + | @else if $dir == 'down' { |
| + | $max: if($named, $bp-max, $bp); |
| + | |
| + | // Skip media query creation if input value is exactly "0 down", |
| + | // unless the function was called as "small down", in which case it's just "small only" |
| + | @if $named or $bp > 0em { |
| + | @if $max != null { |
| + | $str: $str + '(max-width: #{$max})'; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // `up` ranges use the format `(min-width: n)` |
| + | @else if $bp > 0em { |
| + | $str: $str + '(min-width: #{$bp})'; |
| + | } |
| + | } |
| + | |
| + | @return $str; |
| + | } |
| + | |
| + | /// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values: |
| + | /// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there. |
| + | /// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base. |
| + | /// - If a rem value is passed, the unit will be changed to em. |
| + | /// - If an em value is passed, the value will be used as-is. |
| + | /// |
| + | /// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process. |
| + | /// |
| + | /// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query. |
| + | @mixin breakpoint($value) { |
| + | $str: breakpoint($value); |
| + | $bp: index($-zf-breakpoints-keys, $value); |
| + | $pbp: index($-zf-breakpoints-keys, $print-breakpoint); |
| + | |
| + | $old-zf-size: null; |
| + | |
| + | // Make breakpoint size available as a variable |
| + | @if global-variable-exists(-zf-size) { |
| + | $old-zf-size: $-zf-size; |
| + | } |
| + | $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords |
| + | |
| + | // If $str is still an empty string, no media query is needed |
| + | @if $str == '' { |
| + | @content; |
| + | } |
| + | |
| + | // Otherwise, wrap the content in a media query |
| + | @else { |
| + | // For named breakpoints less than or equal to $print-breakpoint, add print to the media types |
| + | @if $bp != null and $bp <= $pbp { |
| + | @media print, screen and #{$str} { |
| + | @content; |
| + | } |
| + | } |
| + | @else { |
| + | @media screen and #{$str} { |
| + | @content; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @if $old-zf-size != null { |
| + | // Restore the old breakpoint size |
| + | $-zf-size: $old-zf-size !global; |
| + | } @else { |
| + | $-zf-size: null !global; |
| + | } |
| + | } |
| + | |
| + | /// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place. |
| + | /// @access private |
| + | /// |
| + | /// @param {Map} $map - Map to convert. |
| + | /// |
| + | /// @returns {String} A string containing the map's contents. |
| + | @function -zf-bp-serialize($map) { |
| + | $str: ''; |
| + | @each $key, $value in $map { |
| + | $str: $str + $key + '=' + -zf-bp-to-em($value) + '&'; |
| + | } |
| + | $str: str-slice($str, 1, -2); |
| + | |
| + | @return $str; |
| + | } |
| + | |
| + | /// Find the next key in a map. |
| + | /// @access private |
| + | /// |
| + | /// @param {Map} $map - Map to traverse. |
| + | /// @param {Mixed} $key - Key to use as a starting point. |
| + | /// |
| + | /// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`. |
| + | @function -zf-map-next($map, $key) { |
| + | |
| + | // Store the keys of the map as a list |
| + | $values: map-keys($map); |
| + | |
| + | $i: 0; |
| + | |
| + | // If the Key Exists, Get the index of the key within the map and add 1 to it for the next breakpoint in the map |
| + | @if (map-has-key($map, $key)) { |
| + | $i: index($values, $key) + 1; |
| + | } |
| + | |
| + | // If the key doesn't exist, or it's the last key in the map, return null |
| + | @if ($i > length($map) or $i == 0) { |
| + | @return null; |
| + | } |
| + | // Otherwise, return the value |
| + | @else { |
| + | @return map-get($map, nth($values, $i)); |
| + | } |
| + | |
| + | } |
| + | |
| + | /// Return a list of our named breakpoints less than $key. Useful for dealing with |
| + | /// responsive gutters for the grid. |
| + | /// @access private |
| + | /// |
| + | /// @param {String} $key - Key to use as last breakpoint. |
| + | /// |
| + | /// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero |
| + | @function -zf-breakpoints-less-than($key) { |
| + | $list: (); |
| + | $found_key: false; |
| + | |
| + | @each $name in $-zf-breakpoints-keys { |
| + | @if ($name == $key) { |
| + | $found_key: true; |
| + | } |
| + | @if not $found_key { |
| + | $list: append($list, $name); |
| + | } |
| + | } |
| + | @return $list; |
| + | } |
| + | |
| + | /// Return a list of our named breakpoints less than $key. Useful for dealing with |
| + | /// responsive gutters for the grid. |
| + | /// @access private |
| + | /// |
| + | /// @param {String} $breakpoing - a named or non-named breakpoing. |
| + | /// |
| + | /// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero |
| + | @function -zf-closest-named-breakpoint($breakpoint) { |
| + | $last: $-zf-zero-breakpoint; |
| + | $found: false; |
| + | |
| + | $value: unitless-calc($breakpoint, 1px); |
| + | @each $key, $val in $breakpoints { |
| + | @if not $found { |
| + | @if unitless-calc($val) > $value { |
| + | $found: true; |
| + | } @else { |
| + | $last: $key; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @return $last; |
| + | } |
| + | |
| + | /// Get a value for a breakpoint from a responsive config map or single value. |
| + | /// - If the config is a single value, return it regardless of `$value`. |
| + | /// - If the config is a map and has the key `$value`, the exact breakpoint value is returned. |
| + | /// - If the config is a map and does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned. |
| + | /// @access private |
| + | /// |
| + | /// @param {Number|Map} $map - Responsive config map or single value. |
| + | /// @param {Keyword} $value - Breakpoint name to use. |
| + | /// |
| + | /// @return {Mixed} The corresponding breakpoint value. |
| + | @function -zf-get-bp-val($map, $value) { |
| + | // If the given map is a single value, return it |
| + | @if type-of($map) == 'number' { |
| + | @return $map; |
| + | } |
| + | |
| + | |
| + | // Check if the breakpoint name exists globally |
| + | @if not map-has-key($breakpoints, $value) { |
| + | @if type-of($value) == 'number' { |
| + | $value: -zf-closest-named-breakpoint($value); |
| + | } @else { |
| + | @return null; |
| + | } |
| + | } |
| + | // Check if the breakpoint name exists in the local config map |
| + | @else if map-has-key($map, $value) { |
| + | // If it does, just return the value |
| + | @return map-get($map, $value); |
| + | } |
| + | // Otherwise, find the next lowest breakpoint and return that value |
| + | @else { |
| + | $anchor: null; |
| + | $found: false; |
| + | |
| + | @each $key, $val in $breakpoints { |
| + | @if not $found { |
| + | @if map-has-key($map, $key) { |
| + | $anchor: $key; |
| + | } |
| + | @if $key == $value { |
| + | $found: true; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @return map-get($map, $anchor); |
| + | } |
| + | } |
| + | |
| + | @if map-has-key($breakpoints, small) { |
| + | $small-up: screen; |
| + | $small-only: unquote('screen and #{breakpoint(small only)}'); |
| + | } |
| + | |
| + | @if map-has-key($breakpoints, medium) { |
| + | $medium-up: unquote('screen and #{breakpoint(medium)}'); |
| + | $medium-only: unquote('screen and #{breakpoint(medium only)}'); |
| + | } |
| + | |
| + | @if map-has-key($breakpoints, large) { |
| + | $large-up: unquote('screen and #{breakpoint(large)}'); |
| + | $large-only: unquote('screen and #{breakpoint(large only)}'); |
| + | } |
| + | |
| + | @if map-has-key($breakpoints, xlarge) { |
| + | $xlarge-up: unquote('screen and #{breakpoint(xlarge)}'); |
| + | $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}'); |
| + | } |
| + | |
| + | @if map-has-key($breakpoints, xxlarge) { |
| + | $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}'); |
| + | } |
public/stylesheets/foundation6/util/_color.scss
+129
-0
| @@ | @@ -0,0 +1,129 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | @import 'math'; |
| + | |
| + | $contrast-warnings: true !default; |
| + | |
| + | //// |
| + | /// @group functions |
| + | //// |
| + | |
| + | /// Checks the luminance of `$color`. |
| + | /// |
| + | /// @param {Color} $color - Color to check the luminance of. |
| + | /// |
| + | /// @returns {Number} The luminance of `$color`. |
| + | @function color-luminance($color) { |
| + | // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js |
| + | // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef |
| + | $rgba: red($color), green($color), blue($color); |
| + | $rgba2: (); |
| + | |
| + | @for $i from 1 through 3 { |
| + | $rgb: nth($rgba, $i); |
| + | $rgb: $rgb / 255; |
| + | |
| + | $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4)); |
| + | |
| + | $rgba2: append($rgba2, $rgb); |
| + | } |
| + | |
| + | @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3); |
| + | } |
| + | |
| + | /// Checks the contrast ratio of two colors. |
| + | /// |
| + | /// @param {Color} $color1 - First color to compare. |
| + | /// @param {Color} $color2 - Second color to compare. |
| + | /// |
| + | /// @returns {Number} The contrast ratio of the compared colors. |
| + | @function color-contrast($color1, $color2) { |
| + | // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js |
| + | // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef |
| + | $luminance1: color-luminance($color1) + 0.05; |
| + | $luminance2: color-luminance($color2) + 0.05; |
| + | $ratio: $luminance1 / $luminance2; |
| + | |
| + | @if $luminance2 > $luminance1 { |
| + | $ratio: 1 / $ratio; |
| + | } |
| + | |
| + | $ratio: round($ratio * 10) / 10; |
| + | |
| + | @return $ratio; |
| + | } |
| + | |
| + | /// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast. |
| + | /// |
| + | /// @param {Color} $base - Color to check luminance. |
| + | /// @param {List} $colors [($white, $black)] - Colors to compare. |
| + | /// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance. |
| + | /// |
| + | /// @returns {Color} the color from `$colors` (list of colors) that has the most contrast. |
| + | @function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) { |
| + | $contrast: color-contrast($base, nth($colors, 1)); |
| + | $best: nth($colors, 1); |
| + | |
| + | @for $i from 2 through length($colors) { |
| + | $current-contrast: color-contrast($base, nth($colors, $i)); |
| + | @if ($current-contrast - $contrast > $tolerance) { |
| + | $contrast: color-contrast($base, nth($colors, $i)); |
| + | $best: nth($colors, $i); |
| + | } |
| + | } |
| + | |
| + | @if ($contrast-warnings and $contrast < 3) { |
| + | @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}"; |
| + | } |
| + | |
| + | @return $best; |
| + | } |
| + | |
| + | /// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness. |
| + | /// |
| + | /// @param {Color} $color - Color to scale. |
| + | /// @param {Percentage} $scale [5%] - Amount to scale up or down. |
| + | /// @param {Percentage} $threshold [40%] - Threshold of lightness to check against. |
| + | /// |
| + | /// @returns {Color} A scaled color. |
| + | @function smart-scale($color, $scale: 5%, $threshold: 40%) { |
| + | @if lightness($color) > $threshold { |
| + | $scale: -$scale; |
| + | } |
| + | @return scale-color($color, $lightness: $scale); |
| + | } |
| + | |
| + | /// Get color from foundation-palette |
| + | /// |
| + | /// @param {key} color key from foundation-palette |
| + | /// |
| + | /// @returns {Color} color from foundation-palette |
| + | @function get-color($key) { |
| + | @if map-has-key($foundation-palette, $key) { |
| + | @return map-get($foundation-palette, $key); |
| + | } |
| + | @else { |
| + | @error 'given $key is not available in $foundation-palette'; |
| + | } |
| + | } |
| + | |
| + | /// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase. |
| + | @mixin add-foundation-colors() { |
| + | @if map-has-key($foundation-palette, primary) { |
| + | $primary-color: map-get($foundation-palette, primary) !global; |
| + | } |
| + | @if map-has-key($foundation-palette, secondary) { |
| + | $secondary-color: map-get($foundation-palette, secondary) !global; |
| + | } |
| + | @if map-has-key($foundation-palette, success) { |
| + | $success-color: map-get($foundation-palette, success) !global; |
| + | } |
| + | @if map-has-key($foundation-palette, warning) { |
| + | $warning-color: map-get($foundation-palette, warning) !global; |
| + | } |
| + | @if map-has-key($foundation-palette, alert) { |
| + | $alert-color: map-get($foundation-palette, alert) !global; |
| + | } |
| + | } |
public/stylesheets/foundation6/util/_direction.scss
+31
-0
| @@ | @@ -0,0 +1,31 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group functions |
| + | //// |
| + | |
| + | /// Returns the opposite direction of $dir |
| + | /// |
| + | /// @param {Keyword} $dir - Used direction between "top", "right", "bottom" and "left". |
| + | /// @return {Keyword} Opposite direction of $dir |
| + | @function direction-opposite( |
| + | $dir |
| + | ) { |
| + | $dirs: (top, right, bottom, left); |
| + | $place: index($dirs, $dir); |
| + | |
| + | @if $place == null { |
| + | @error 'direction-opposite: Invalid $dir parameter, expected a value from "#{$dirs}", found "#{$dir}".'; |
| + | @return null; |
| + | } |
| + | |
| + | // Calcul the opposite place in a circle, with a starting index of 1 |
| + | $length: length($dirs); |
| + | $demi: $length / 2; |
| + | $opposite-place: (($place + $demi - 1) % $length) + 1; |
| + | |
| + | @return nth($dirs, $opposite-place); |
| + | } |
| + | |
public/stylesheets/foundation6/util/_flex.scss
+85
-0
| @@ | @@ -0,0 +1,85 @@ |
| + | $-zf-flex-justify: ( |
| + | 'left': flex-start, |
| + | 'right': flex-end, |
| + | 'center': center, |
| + | 'justify': space-between, |
| + | 'spaced': space-around, |
| + | ); |
| + | |
| + | $-zf-flex-align: ( |
| + | 'top': flex-start, |
| + | 'bottom': flex-end, |
| + | 'middle': center, |
| + | 'stretch': stretch, |
| + | ); |
| + | |
| + | $-zf-flex-direction: ( |
| + | 'row': row, |
| + | 'row-reverse': row-reverse, |
| + | 'column': column, |
| + | 'column-reverse': column-reverse, |
| + | ); |
| + | |
| + | /// Enables flexbox by adding `display: flex` to the element. |
| + | @mixin flex { |
| + | display: flex; |
| + | } |
| + | |
| + | /// Horizontally or vertically aligns the items within a flex container. |
| + | /// |
| + | /// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment. |
| + | /// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment. |
| + | @mixin flex-align($x: null, $y: null) { |
| + | @if $x { |
| + | @if map-has-key($-zf-flex-justify, $x) { |
| + | $x: map-get($-zf-flex-justify, $x); |
| + | } |
| + | @else { |
| + | @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'; |
| + | } |
| + | } |
| + | |
| + | @if $y { |
| + | @if map-has-key($-zf-flex-align, $y) { |
| + | $y: map-get($-zf-flex-align, $y); |
| + | } |
| + | @else { |
| + | @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'; |
| + | } |
| + | } |
| + | |
| + | justify-content: $x; |
| + | align-items: $y; |
| + | } |
| + | |
| + | /// Vertically align a single column within a flex row. Apply this mixin to a flex column. |
| + | /// |
| + | /// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment. |
| + | @mixin flex-align-self($y: null) { |
| + | @if $y { |
| + | @if map-has-key($-zf-flex-align, $y) { |
| + | $y: map-get($-zf-flex-align, $y); |
| + | } |
| + | @else { |
| + | @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'; |
| + | } |
| + | } |
| + | |
| + | align-self: $y; |
| + | } |
| + | |
| + | /// Changes the source order of a flex child. Children with lower numbers appear first in the layout. |
| + | /// @param {Number} $order [0] - Order number to apply. |
| + | @mixin flex-order($order: 0) { |
| + | order: $order; |
| + | } |
| + | |
| + | /// Change flex-direction |
| + | /// @param {Keyword} $direction [row] - Flex direction to use. Can be |
| + | /// - row (default): same as text direction |
| + | /// - row-reverse: opposite to text direction |
| + | /// - column: same as row but top to bottom |
| + | /// - column-reverse: same as row-reverse top to bottom |
| + | @mixin flex-direction($direction: row) { |
| + | flex-direction: $direction; |
| + | } |
public/stylesheets/foundation6/util/_math.scss
+72
-0
| @@ | @@ -0,0 +1,72 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group functions |
| + | //// |
| + | |
| + | /// Finds the greatest common divisor of two integers. |
| + | /// |
| + | /// @param {Number} $a - First number to compare. |
| + | /// @param {Number} $b - Second number to compare. |
| + | /// |
| + | /// @returns {Number} The greatest common divisor. |
| + | @function gcd($a, $b) { |
| + | // From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript |
| + | @if ($b != 0) { |
| + | @return gcd($b, $a % $b); |
| + | } |
| + | @else { |
| + | @return abs($a); |
| + | } |
| + | } |
| + | |
| + | /// Handles decimal exponents by trying to convert them into a fraction and then use a nth-root-algorithm for parts of the calculation |
| + | /// |
| + | /// @param {Number} $base - The base number. |
| + | /// @param {Number} $exponent - The exponent. |
| + | /// |
| + | /// @returns {Number} The product of the exponentiation. |
| + | @function pow($base, $exponent, $prec: 16) { |
| + | @if (floor($exponent) != $exponent) { |
| + | $prec2 : pow(10, $prec); |
| + | $exponent: round($exponent * $prec2); |
| + | $denominator: gcd($exponent, $prec2); |
| + | @return nth-root(pow($base, $exponent / $denominator), $prec2 / $denominator, $prec); |
| + | } |
| + | |
| + | $value: $base; |
| + | @if $exponent > 1 { |
| + | @for $i from 2 through $exponent { |
| + | $value: $value * $base; |
| + | } |
| + | } |
| + | @else if $exponent < 1 { |
| + | @for $i from 0 through -$exponent { |
| + | $value: $value / $base; |
| + | } |
| + | } |
| + | |
| + | @return $value; |
| + | } |
| + | |
| + | @function nth-root($num, $n: 2, $prec: 12) { |
| + | // From: http://rosettacode.org/wiki/Nth_root#JavaScript |
| + | $x: 1; |
| + | |
| + | @for $i from 0 through $prec { |
| + | $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1))); |
| + | } |
| + | |
| + | @return $x; |
| + | } |
| + | |
| + | /// Calculates the height as a percentage of the width for a given ratio. |
| + | /// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`. |
| + | /// @return {Number} A percentage value for the height relative to the width of a responsive container. |
| + | @function ratio-to-percentage($ratio) { |
| + | $w: nth($ratio, 1); |
| + | $h: nth($ratio, 3); |
| + | @return $h / $w * 100%; |
| + | } |
public/stylesheets/foundation6/util/_mixins.scss
+313
-0
| @@ | @@ -0,0 +1,313 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group functions |
| + | //// |
| + | |
| + | /// Creates an inner box-shadow for only one side |
| + | /// |
| + | /// @param {Keyword} $side - Side the shadow is supposed to appear. Can be `top`, `left`, `right` or `bottom`. |
| + | /// @param {Number} $size - Width for the target side. |
| + | /// @param {Color} $color - Color of the shadow. |
| + | @mixin inner-side-shadow( |
| + | $side: bottom, |
| + | $size: 20px, |
| + | $color: rgba($black, 0.25) |
| + | ) { |
| + | |
| + | $helper: round($size * 0.65); |
| + | |
| + | @if ($side == top) { |
| + | box-shadow: inset 0 $helper $size (-1)*$helper $color; |
| + | } @else if ($side == left) { |
| + | box-shadow: inset $helper 0 $size (-1)*$helper $color; |
| + | } @else if ($side == right) { |
| + | box-shadow: inset (-1)*$helper 0 $size (-1)*$helper $color; |
| + | } @else if ($side == bottom) { |
| + | box-shadow: inset 0 (-1)*$helper $size (-1)*$helper $color; |
| + | } |
| + | } |
| + | |
| + | /// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element. |
| + | /// |
| + | /// @param {Number} $triangle-size - Width of the triangle. |
| + | /// @param {Color} $triangle-color - Color of the triangle. |
| + | /// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`. |
| + | @mixin css-triangle( |
| + | $triangle-size, |
| + | $triangle-color, |
| + | $triangle-direction |
| + | ) { |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | |
| + | border: inset $triangle-size; |
| + | |
| + | content: ''; |
| + | |
| + | @if ($triangle-direction == down) { |
| + | border-bottom-width: 0; |
| + | border-top-style: solid; |
| + | border-color: $triangle-color transparent transparent; |
| + | } |
| + | @if ($triangle-direction == up) { |
| + | border-top-width: 0; |
| + | border-bottom-style: solid; |
| + | border-color: transparent transparent $triangle-color; |
| + | } |
| + | @if ($triangle-direction == right) { |
| + | border-right-width: 0; |
| + | border-left-style: solid; |
| + | border-color: transparent transparent transparent $triangle-color; |
| + | } |
| + | @if ($triangle-direction == left) { |
| + | border-left-width: 0; |
| + | border-right-style: solid; |
| + | border-color: transparent $triangle-color transparent transparent; |
| + | } |
| + | } |
| + | |
| + | /// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div> |
| + | /// |
| + | /// @param {Color} $color [$black] - Color to use for the icon. |
| + | /// @param {Color} $color-hover [$dark-gray] - Color to use when the icon is hovered over. |
| + | /// @param {Number} $width [20px] - Width of the icon. |
| + | /// @param {Number} $height [16px] - Height of the icon. |
| + | /// @param {Number} $weight [2px] - Height of individual bars in the icon. |
| + | /// @param {Number} $bars [3] - Number of bars in the icon. |
| + | @mixin hamburger( |
| + | $color: $black, |
| + | $color-hover: $dark-gray, |
| + | $width: 20px, |
| + | $height: 16px, |
| + | $weight: 2px, |
| + | $bars: 3 |
| + | ) { |
| + | // box-shadow CSS output |
| + | $shadow: (); |
| + | $hover-shadow: (); |
| + | |
| + | // Spacing between bars is calculated based on the total height of the icon and the weight of each bar |
| + | $spacing: ($height - ($weight * $bars)) / ($bars - 1); |
| + | |
| + | @if unit($spacing) == 'px' { |
| + | $spacing: floor($spacing); |
| + | } |
| + | |
| + | @for $i from 2 through $bars { |
| + | $offset: ($weight + $spacing) * ($i - 1); |
| + | $shadow: append($shadow, 0 $offset 0 $color, comma); |
| + | } |
| + | |
| + | // Icon container |
| + | position: relative; |
| + | display: inline-block; |
| + | vertical-align: middle; |
| + | width: $width; |
| + | height: $height; |
| + | cursor: pointer; |
| + | |
| + | // Icon bars |
| + | &::after { |
| + | position: absolute; |
| + | top: 0; |
| + | left: 0; |
| + | |
| + | display: block; |
| + | width: 100%; |
| + | height: $weight; |
| + | |
| + | background: $color; |
| + | box-shadow: $shadow; |
| + | |
| + | content: ''; |
| + | } |
| + | |
| + | // Hover state |
| + | @if $color-hover { |
| + | // Generate CSS |
| + | @for $i from 2 through $bars { |
| + | $offset: ($weight + $spacing) * ($i - 1); |
| + | $hover-shadow: append($hover-shadow, 0 $offset 0 $color-hover, comma); |
| + | } |
| + | |
| + | &:hover::after { |
| + | background: $color-hover; |
| + | box-shadow: $hover-shadow; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included. |
| + | /// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color. |
| + | /// |
| + | /// @param {Color} $color [$black] - Color to use for the triangle. |
| + | @mixin background-triangle($color: $black) { |
| + | $rgb: 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29'; |
| + | |
| + | background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #{$rgb}'></polygon></svg>"); |
| + | |
| + | @media screen and (min-width:0\0) { |
| + | @if lightness($color) < 60% { |
| + | // White triangle |
| + | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=='); |
| + | } |
| + | @else { |
| + | // Black triangle |
| + | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg=='); |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height. |
| + | /// The clearfix is augmented with specific styles to prevent borders in flexbox environments |
| + | /// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack |
| + | /// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix |
| + | @mixin clearfix { |
| + | &::before, |
| + | &::after { |
| + | display: table; |
| + | content: ' '; |
| + | |
| + | @if $global-flexbox { |
| + | flex-basis: 0; |
| + | order: 1; |
| + | } |
| + | } |
| + | |
| + | &::after { |
| + | clear: both; |
| + | } |
| + | } |
| + | |
| + | /// Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container. |
| + | /// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS |
| + | /// |
| + | /// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items. |
| + | /// @param {Keyword} $elem [li] - Tag to use for sibling selectors. |
| + | @mixin auto-width($max, $elem: li) { |
| + | @for $i from 2 through $max { |
| + | &:nth-last-child(#{$i}):first-child, |
| + | &:nth-last-child(#{$i}):first-child ~ #{$elem} { |
| + | width: percentage(1 / $i); |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Removes the focus ring around an element when a mouse input is detected. |
| + | @mixin disable-mouse-outline { |
| + | [data-whatinput='mouse'] & { |
| + | outline: 0; |
| + | } |
| + | } |
| + | |
| + | /// Makes an element visually hidden, but still accessible to keyboards and assistive devices. |
| + | /// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility |
| + | /// @link http://hugogiraudel.com/2016/10/13/css-hide-and-seek/ |
| + | @mixin element-invisible { |
| + | position: absolute !important; |
| + | width: 1px; |
| + | height: 1px; |
| + | padding: 0; |
| + | overflow: hidden; |
| + | clip: rect(0,0,0,0); |
| + | white-space: nowrap; |
| + | clip-path: inset(50%); |
| + | border: 0; |
| + | } |
| + | |
| + | /// Reverses the CSS output created by the `element-invisible()` mixin. |
| + | @mixin element-invisible-off { |
| + | position: static !important; |
| + | width: auto; |
| + | height: auto; |
| + | overflow: visible; |
| + | clip: auto; |
| + | white-space: normal; |
| + | clip-path: none; |
| + | } |
| + | |
| + | /// Vertically centers the element inside of its first non-static parent, |
| + | /// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass |
| + | @mixin vertical-center { |
| + | position: absolute; |
| + | top: 50%; |
| + | transform: translateY(-50%); |
| + | } |
| + | |
| + | /// Horizontally centers the element inside of its first non-static parent, |
| + | /// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass |
| + | @mixin horizontal-center { |
| + | position: absolute; |
| + | left: 50%; |
| + | transform: translateX(-50%); |
| + | } |
| + | |
| + | /// Absolutely centers the element inside of its first non-static parent, |
| + | /// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass |
| + | @mixin absolute-center { |
| + | position: absolute; |
| + | top: 50%; |
| + | left: 50%; |
| + | transform: translate(-50%, -50%); |
| + | } |
| + | |
| + | /// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes. |
| + | /// |
| + | /// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up. |
| + | /// @param {Boolean} $auto-insert-breakpoints [true] - If `false`, the mixin will iterate over breakpoints without doing the media query itself. Useful for more complex media query generation as in the margin grid. |
| + | @mixin -zf-each-breakpoint($small: true, $auto-insert-breakpoints: true) { |
| + | $list: $breakpoint-classes; |
| + | |
| + | @if not $small { |
| + | $list: sl-remove($list, $-zf-zero-breakpoint); |
| + | } |
| + | |
| + | @each $name in $list { |
| + | $-zf-size: $name !global; |
| + | |
| + | @if $auto-insert-breakpoints { |
| + | @include breakpoint($name) { |
| + | @content; |
| + | } |
| + | } |
| + | @else { |
| + | @content; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Generate the `@content` passed to the mixin with a value `$-zf-bp-value` related to a breakpoint, depending on the `$name` parameter: |
| + | /// - For a single value, `$-zf-bp-value` is this value. |
| + | /// - For a breakpoint name, `$-zf-bp-value` is the corresponding breakpoint value in `$map`. |
| + | /// - For "auto", `$-zf-bp-value` is the corresponding breakpoint value in `$map` and is passed to `@content`, which is made responsive for each breakpoint of `$map`. |
| + | /// @param {Number|Array|Keyword} $name [auto] - Single value, breakpoint name, or list of breakpoint names to use. "auto" by default. |
| + | /// @param {Number|Map} $map - Map of breakpoints and values or single value to use. |
| + | @mixin -zf-breakpoint-value( |
| + | $name: auto, |
| + | $map: null |
| + | ) { |
| + | @if $name == auto and type-of($map) == 'map' { |
| + | // "auto" |
| + | @each $k, $v in $map { |
| + | @include breakpoint($k) { |
| + | @include -zf-breakpoint-value($v, $map) { |
| + | @content; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | @else { |
| + | // breakpoint name |
| + | @if type-of($name) == 'string' { |
| + | $name: -zf-get-bp-val($map, $name); |
| + | } |
| + | |
| + | // breakpoint value |
| + | $-zf-bp-value: $name !global; |
| + | @content; |
| + | } |
| + | } |
public/stylesheets/foundation6/util/_selector.scss
+41
-0
| @@ | @@ -0,0 +1,41 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group functions |
| + | //// |
| + | |
| + | /// Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors. |
| + | /// |
| + | /// @param {List|Keyword} $types [()] - A list of text input types to use. Leave blank to use all of them. |
| + | /// @param {Keyword} $modifier [''] - A modifier to be applied to each text input type (e.g. a class or a pseudo-class). Leave blank to ignore. |
| + | @function text-inputs($types: (), $modifier: '') { |
| + | $return: (); |
| + | |
| + | $all-types: |
| + | text |
| + | password |
| + | date |
| + | datetime |
| + | datetime-local |
| + | month |
| + | week |
| + | |
| + | number |
| + | search |
| + | tel |
| + | time |
| + | url |
| + | color; |
| + | |
| + | @if not has-value($types) { |
| + | $types: $all-types; |
| + | } |
| + | |
| + | @each $type in $types { |
| + | $return: append($return, unquote('[type=\'#{$type}\']#{$modifier}'), comma); |
| + | } |
| + | |
| + | @return $return; |
| + | } |
public/stylesheets/foundation6/util/_typography.scss
+26
-0
| @@ | @@ -0,0 +1,26 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group functions |
| + | //// |
| + | |
| + | $-zf-font-stack: ( |
| + | 'georgia': (Georgia, "URW Bookman L", serif), |
| + | 'helvetica': (Helvetica, Arial, "Nimbus Sans L", sans-serif), |
| + | 'lucida-grande': ("Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans", sans-serif), |
| + | 'monospace': ("Courier New", Courier, "Nimbus Sans L", monospace), |
| + | 'system': (-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif), |
| + | 'verdana': (Verdana, Geneva, "DejaVu Sans", sans-serif), |
| + | ); |
| + | |
| + | /// Return a font stack list from a map. Equivalent to `map-safe-get($name, $-zf-font-stack)`. |
| + | /// |
| + | /// @param {String} $stack - Name of the font stack. |
| + | /// @param {Map} $map [$-zf-font-stack] - Map of font stacks to retrieve a list from. |
| + | /// |
| + | /// @returns {List} Found font stack. |
| + | @function font-stack($stack, $map: $-zf-font-stack) { |
| + | @return map-safe-get($map, $stack); |
| + | } |
public/stylesheets/foundation6/util/_unit.scss
+152
-0
| @@ | @@ -0,0 +1,152 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group functions |
| + | //// |
| + | |
| + | $global-font-size: 100% !default; |
| + | |
| + | /// Removes the unit (e.g. px, em, rem) from a value, returning the number only. |
| + | /// |
| + | /// @param {Number} $num - Number to strip unit from. |
| + | /// |
| + | /// @returns {Number} The same number, sans unit. |
| + | @function strip-unit($num) { |
| + | @return $num / ($num * 0 + 1); |
| + | } |
| + | |
| + | /// Converts one or more pixel values into matching rem values. |
| + | /// |
| + | /// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses. |
| + | /// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base. |
| + | /// |
| + | /// @returns {List} A list of converted values. |
| + | @function rem-calc($values, $base: null) { |
| + | $rem-values: (); |
| + | $count: length($values); |
| + | |
| + | // If no base is defined, defer to the global font size |
| + | @if $base == null { |
| + | $base: $global-font-size; |
| + | } |
| + | |
| + | // If the base font size is a %, then multiply it by 16px |
| + | // This is because 100% font size = 16px in most all browsers |
| + | @if unit($base) == '%' { |
| + | $base: ($base / 100%) * 16px; |
| + | } |
| + | |
| + | // Using rem as base allows correct scaling |
| + | @if unit($base) == 'rem' { |
| + | $base: strip-unit($base) * 16px; |
| + | } |
| + | |
| + | @if $count == 1 { |
| + | @return -zf-to-rem($values, $base); |
| + | } |
| + | |
| + | @for $i from 1 through $count { |
| + | $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base)); |
| + | } |
| + | |
| + | @return $rem-values; |
| + | } |
| + | |
| + | // Converts a unitless, pixel, or rem value to em, for use in breakpoints. |
| + | @function -zf-bp-to-em($value) { |
| + | // Pixel and unitless values are converted to rems |
| + | @if unit($value) == 'px' or unitless($value) { |
| + | $value: rem-calc($value, $base: 16px); |
| + | } |
| + | |
| + | // Then the value is converted to ems |
| + | @return strip-unit($value) * 1em; |
| + | } |
| + | |
| + | /// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable. |
| + | /// @access private |
| + | /// |
| + | /// @param {Number} $value - Pixel value to convert. |
| + | /// @param {Number} $base [null] - Base for pixel conversion. |
| + | /// |
| + | /// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is. |
| + | @function -zf-to-rem($value, $base: null) { |
| + | // Check if the value is a number |
| + | @if type-of($value) != 'number' { |
| + | @warn inspect($value) + ' was passed to rem-calc(), which is not a number.'; |
| + | @return $value; |
| + | } |
| + | |
| + | // Transform em into rem if someone hands over 'em's |
| + | @if unit($value) == 'em' { |
| + | $value: strip-unit($value) * 1rem; |
| + | } |
| + | |
| + | // Calculate rem if units for $value is not rem or em |
| + | @if unit($value) != 'rem' { |
| + | $value: strip-unit($value) / strip-unit($base) * 1rem; |
| + | } |
| + | |
| + | // Turn 0rem into 0 |
| + | @if $value == 0rem { |
| + | $value: 0; |
| + | } |
| + | |
| + | @return $value; |
| + | } |
| + | |
| + | /// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights. |
| + | /// |
| + | /// @param {Number} $value - Value to convert to a unitless line height |
| + | /// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size |
| + | /// |
| + | /// @return {Number} - Unitless number |
| + | @function unitless-calc($value, $base: null) { |
| + | |
| + | // If no base is defined, defer to the global font size |
| + | @if $base == null { |
| + | $base: $global-font-size; |
| + | } |
| + | |
| + | // First, lets convert our $base to pixels |
| + | |
| + | // If the base font size is a %, then multiply it by 16px |
| + | @if unit($base) == '%' { |
| + | $base: ($base / 100%) * 16px; |
| + | } |
| + | |
| + | @if unit($base) == 'rem' { |
| + | $base: strip-unit($base) * 16px; |
| + | } |
| + | |
| + | @if unit($base) == 'em' { |
| + | $base: strip-unit($base) * 16px; |
| + | } |
| + | |
| + | // Now lets convert our value to pixels too |
| + | @if unit($value) == '%' { |
| + | $value: ($value / 100%) * $base; |
| + | } |
| + | |
| + | @if unit($value) == 'rem' { |
| + | $value: strip-unit($value) * $base; |
| + | } |
| + | |
| + | @if unit($value) == 'em' { |
| + | $value: strip-unit($value) * $base; |
| + | } |
| + | |
| + | // 'px' |
| + | @if unit($value) == 'px' { |
| + | @return strip-unit($value) / strip-unit($base); |
| + | } |
| + | |
| + | // assume that line-heights greatern then 10 are meant to be absolute in 'px' |
| + | @if unitless($value) and ($value > 10) { |
| + | @return $value / strip-unit($base); |
| + | } |
| + | |
| + | @return $value; |
| + | } |
public/stylesheets/foundation6/util/_util.scss
+14
-0
| @@ | @@ -0,0 +1,14 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | @import 'math'; |
| + | @import 'unit'; |
| + | @import 'value'; |
| + | @import 'direction'; |
| + | @import 'color'; |
| + | @import 'selector'; |
| + | @import 'flex'; |
| + | @import 'breakpoint'; |
| + | @import 'mixins'; |
| + | @import 'typography'; |
public/stylesheets/foundation6/util/_value.scss
+160
-0
| @@ | @@ -0,0 +1,160 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group functions |
| + | //// |
| + | |
| + | /// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list. |
| + | /// |
| + | /// @param {Mixed} $val - Value to check. |
| + | /// |
| + | /// @returns {Boolean} `true` if `$val` is not falsey. |
| + | @function has-value($val) { |
| + | @if $val == null or $val == none { |
| + | @return false; |
| + | } |
| + | @if type-of($val) == 'number' and strip-unit($val) == 0 { |
| + | @return false; |
| + | } |
| + | @if type-of($val) == 'list' and length($val) == 0 { |
| + | @return false; |
| + | } |
| + | @return true; |
| + | } |
| + | |
| + | /// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format. |
| + | /// |
| + | /// @param {List|Number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em" |
| + | /// @param {Keyword} $side - Side to return. Should be `top`, `right`, `bottom`, or `left`. |
| + | /// |
| + | /// @returns {Number} A single value based on `$val` and `$side`. |
| + | @function get-side($val, $side) { |
| + | $length: length($val); |
| + | |
| + | @if $length == 1 { |
| + | @return $val; |
| + | } |
| + | @if $length == 2 { |
| + | @return map-get(( |
| + | top: nth($val, 1), |
| + | bottom: nth($val, 1), |
| + | left: nth($val, 2), |
| + | right: nth($val, 2), |
| + | ), $side); |
| + | } |
| + | @if $length == 3 { |
| + | @return map-get(( |
| + | top: nth($val, 1), |
| + | left: nth($val, 2), |
| + | right: nth($val, 2), |
| + | bottom: nth($val, 3), |
| + | ), $side); |
| + | } |
| + | @if $length == 4 { |
| + | @return map-get(( |
| + | top: nth($val, 1), |
| + | right: nth($val, 2), |
| + | bottom: nth($val, 3), |
| + | left: nth($val, 4), |
| + | ), $side); |
| + | } |
| + | } |
| + | |
| + | /// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color. |
| + | /// |
| + | /// @param {List} $val - Border value to find a value in. |
| + | /// @param {Keyword} $elem - Border component to extract. |
| + | /// |
| + | /// @returns {Mixed} If the value exists, returns the value. If the value is not in the border definition, the function will return a 0px width, solid style, or black border. |
| + | @function get-border-value($val, $elem) { |
| + | // Find the width, style, or color and return it |
| + | @each $v in $val { |
| + | $type: type-of($v); |
| + | @if $elem == width and $type == 'number' { |
| + | @return $v; |
| + | } |
| + | @if $elem == style and $type == 'string' { |
| + | @return $v; |
| + | } |
| + | @if $elem == color and $type == 'color' { |
| + | @return $v; |
| + | } |
| + | } |
| + | |
| + | // Defaults |
| + | $defaults: ( |
| + | width: 0, |
| + | style: solid, |
| + | color: #000, |
| + | ); |
| + | |
| + | @return map-get($defaults, $elem); |
| + | } |
| + | |
| + | /// Finds a value in a nested map. |
| + | /// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Deep Get/Set in Maps |
| + | /// |
| + | /// @param {Map} $map - Map to pull a value from. |
| + | /// @param {String} $keys... - Keys to use when looking for a value. |
| + | /// @returns {Mixed} The value found in the map. |
| + | @function map-deep-get($map, $keys...) { |
| + | @each $key in $keys { |
| + | $map: map-get($map, $key); |
| + | } |
| + | @return $map; |
| + | } |
| + | |
| + | /// Casts a map into a list. |
| + | /// @link http://hugogiraudel.com/2014/04/28/casting-map-into-list/ |
| + | /// |
| + | /// @param {Map} $map - Map to pull a value from. |
| + | /// |
| + | /// @returns {List} Depending on the flag, returns either $keys or $values or both. |
| + | @function map-to-list($map, $keep: 'both') { |
| + | $keep: if(index('keys' 'values', $keep), $keep, 'both'); |
| + | |
| + | @if type-of($map) == 'map' { |
| + | $keys: (); |
| + | $values: (); |
| + | |
| + | @each $key, $val in $map { |
| + | $keys: append($keys, $key); |
| + | $values: append($values, $val); |
| + | } |
| + | |
| + | @if $keep == 'keys' { |
| + | @return $keys; |
| + | } |
| + | @else if $keep == 'values' { |
| + | @return $values; |
| + | } |
| + | @else { |
| + | @return zip($keys, $values); |
| + | } |
| + | } |
| + | |
| + | @return if(type-of($map) != 'list', ($value,), $map); |
| + | |
| + | } |
| + | |
| + | /// Safely return a value from a map. |
| + | /// |
| + | /// @param {Map} $map - Map to retrieve a value from. |
| + | /// @param {String} $key - Name of the map key. |
| + | /// |
| + | /// @returns {List} Found value. |
| + | @function map-safe-get($map, $key) { |
| + | @if (type-of($map) == 'map' or (type-of($map) == 'list' and length($map) == 0)) { |
| + | @if (map-has-key($map, $key)) { |
| + | @return map-get($map, $key); |
| + | } |
| + | @else { |
| + | @error 'Key: `#{$key}` is not available in `#{$map}`'; |
| + | } |
| + | } |
| + | @else { |
| + | @error '`#{$map}` is not a valid map'; |
| + | } |
| + | } |
public/stylesheets/foundation6/xy-grid/_cell.scss
+169
-0
| @@ | @@ -0,0 +1,169 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group xy-grid |
| + | //// |
| + | |
| + | /// Calculate the percentage size of a cell. |
| + | /// |
| + | /// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3. |
| + | @function xy-cell-size( |
| + | $size: $grid-columns |
| + | ) { |
| + | // Parsing percents, decimals, n of n and number counts |
| + | @if type-of($size) == 'number' { |
| + | @if unit($size) == '%' { |
| + | $size: $size; |
| + | } |
| + | @else if $size < 1 { |
| + | $size: percentage($size); |
| + | } |
| + | @else { |
| + | $size: percentage($size / $grid-columns); |
| + | } |
| + | } |
| + | |
| + | // Parsing "n of n" or "n/n" expressions |
| + | @elseif type-of($size) == 'list' { |
| + | @if length($size) != 3 { |
| + | @error 'Wrong syntax for xy-cell-size(). Use the format "n of n" or "n/n".'; |
| + | } |
| + | @else { |
| + | $size: percentage(nth($size, 1) / nth($size, 3)); |
| + | } |
| + | } |
| + | // Anything else is incorrect |
| + | @else { |
| + | @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".'; |
| + | } |
| + | |
| + | @return $size; |
| + | } |
| + | |
| + | /// Sets base flex properties for cells. |
| + | /// |
| + | /// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto` or `shrink`. |
| + | @mixin xy-cell-base($size: full) { |
| + | @if($size == 'full') { |
| + | // This is the base style, all others inherit from it |
| + | flex: 0 0 auto; |
| + | min-height: 0px; |
| + | min-width: 0px; |
| + | } |
| + | @elseif ($size == 'auto') { |
| + | flex: 1 1 0px; // sass-lint:disable-line zero-unit |
| + | } |
| + | @elseif ($size == 'shrink') { |
| + | flex: 0 0 auto; |
| + | } |
| + | } |
| + | |
| + | /// Resets a cells width (or height if vertical is true) as well as strips its gutters. |
| + | /// |
| + | /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths. |
| + | @mixin xy-cell-reset($vertical: true) { |
| + | $direction: if($vertical == true, width, height); |
| + | #{$direction}: auto; |
| + | } |
| + | |
| + | // Sets our cell widths or heights depending on gutter type. |
| + | @mixin -xy-cell-properties($size, $margin-gutter, $vertical) { |
| + | $direction: if($vertical == true, height, width); |
| + | @if($size == 'full') { |
| + | $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)})); |
| + | #{$direction}: $val; |
| + | } |
| + | @elseif ($size == 'auto') { |
| + | #{$direction}: auto; |
| + | $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)})); |
| + | } |
| + | @elseif ($size == 'shrink') { |
| + | #{$direction}: auto; |
| + | } |
| + | @else { |
| + | $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)})); |
| + | #{$direction}: $val; |
| + | } |
| + | } |
| + | |
| + | /// Creates a cell for your grid. |
| + | /// |
| + | /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space. |
| + | /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters |
| + | /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters. |
| + | /// @param {Keyword} $gutter-type [margin] - Map or single value for gutters. |
| + | /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. |
| + | /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered. |
| + | /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths. |
| + | @mixin xy-cell( |
| + | $size: full, |
| + | $gutter-output: true, |
| + | $gutters: $grid-margin-gutters, |
| + | $gutter-type: margin, |
| + | $gutter-position: right left, |
| + | $breakpoint: null, |
| + | $vertical: false |
| + | ) { |
| + | @if($breakpoint == null) { |
| + | // If `$bp-size` is available then use this, otherwise revert to the smallest bp. |
| + | @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null { |
| + | $breakpoint: $-zf-size; |
| + | } |
| + | @else { |
| + | $breakpoint: $-zf-zero-breakpoint; |
| + | } |
| + | } |
| + | |
| + | // Get our gutters from map if available, if not map just return the value. |
| + | $gutter: -zf-get-bp-val($gutters, $breakpoint); |
| + | |
| + | // Base flex properties |
| + | @include xy-cell-base($size); |
| + | |
| + | @if($gutter-type == 'margin') { |
| + | @include -xy-cell-properties($size, $gutter, $vertical); |
| + | } |
| + | @else { |
| + | @include -xy-cell-properties($size, 0, $vertical); |
| + | } |
| + | |
| + | @if $gutter-output { |
| + | @include xy-gutters($gutter, $gutter-type, $gutter-position); |
| + | } |
| + | } |
| + | |
| + | /// Creates a single breakpoint sized grid. Used to generate our grid classes. |
| + | /// |
| + | /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space. |
| + | /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters |
| + | /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters. |
| + | /// @param {Keyword} $gutter-type [margin] - Map or single value for gutters. |
| + | /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered. |
| + | /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths. |
| + | @mixin xy-cell-static( |
| + | $size: full, |
| + | $gutter-output: true, |
| + | $gutters: $grid-margin-gutters, |
| + | $gutter-type: margin, |
| + | $breakpoint: $-zf-zero-breakpoint, |
| + | $vertical: false |
| + | ) { |
| + | |
| + | $gutter: -zf-get-bp-val($gutters, $breakpoint); |
| + | $gutter-position: if($vertical == true, top bottom, left right); |
| + | |
| + | @if($gutter-type == 'margin') { |
| + | @include -xy-cell-properties($size, $gutter, $vertical); |
| + | } |
| + | @else { |
| + | @include -xy-cell-properties($size, 0, $vertical); |
| + | } |
| + | |
| + | // If we want to output the gutters |
| + | @if($gutter-output) { |
| + | // TODO: Figure out if we need to pass breakpoint in here too. |
| + | @include xy-gutters($gutter, $gutter-type, $gutter-position); |
| + | } |
| + | } |
public/stylesheets/foundation6/xy-grid/_classes.scss
+476
-0
| @@ | @@ -0,0 +1,476 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group xy-grid |
| + | //// |
| + | |
| + | // Margin Grid classes |
| + | @mixin xy-base-grid-classes { |
| + | |
| + | // Grid Container |
| + | .grid-container { |
| + | @include xy-grid-container; |
| + | |
| + | &.fluid { |
| + | @include xy-grid-container(100%); |
| + | } |
| + | |
| + | &.full { |
| + | @include xy-grid-container(100%, 0); |
| + | } |
| + | } |
| + | |
| + | // Base grid styles |
| + | .grid-x { |
| + | @include xy-grid; |
| + | } |
| + | |
| + | .cell { |
| + | @include xy-cell-base(); |
| + | @include xy-cell-static($grid-columns, false, $gutter-type: padding); |
| + | |
| + | &.auto { |
| + | @include xy-cell-base(auto); |
| + | } |
| + | |
| + | &.shrink { |
| + | @include xy-cell-base(shrink); |
| + | } |
| + | |
| + | } |
| + | .grid-x { |
| + | > .auto { |
| + | @include xy-cell-static(auto, false); |
| + | } |
| + | |
| + | > .shrink { |
| + | @include xy-cell-static(shrink, false); |
| + | } |
| + | } |
| + | |
| + | // Auto width |
| + | @include -zf-each-breakpoint() { |
| + | // This is a bit of a hack/workaround, see these issues & PRs for the backstory: |
| + | // https://github.com/zurb/foundation-sites/issues/10244 |
| + | // https://github.com/zurb/foundation-sites/pull/10222 and |
| + | // https://github.com/zurb/foundation-sites/pull/10164 |
| + | .grid-x { |
| + | $str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full"; |
| + | @for $i from 1 through $grid-columns { |
| + | $str: $str + ", > .#{$-zf-size}-#{$i}" |
| + | } |
| + | #{$str} { |
| + | flex-basis: auto; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @include -zf-each-breakpoint() { |
| + | @if not($-zf-size == small) { |
| + | .grid-x > .#{$-zf-size}-auto { |
| + | @include xy-cell-base(auto); |
| + | @include xy-cell-static(auto, false); |
| + | } |
| + | |
| + | .grid-x > .#{$-zf-size}-shrink { |
| + | @include xy-cell-base(shrink); |
| + | @include xy-cell-static(shrink, false); |
| + | } |
| + | } |
| + | |
| + | @for $i from 1 through $grid-columns { |
| + | // Sizing (percentage) |
| + | .grid-x > .#{$-zf-size}-#{$i} { |
| + | @include xy-cell-static($i, false, $gutter-type: padding); |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Reset width when using `.grid-margin-x` not on `.grid-x` |
| + | .grid-margin-x:not(.grid-x) > .cell { |
| + | width: auto; |
| + | } |
| + | |
| + | // Reset height when using `.grid-margin-y` not on `.grid-y` |
| + | .grid-margin-y:not(.grid-y) > .cell { |
| + | height: auto; |
| + | } |
| + | } |
| + | |
| + | @mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) { |
| + | $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-'); |
| + | > .#{$prefix}auto { |
| + | @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical); |
| + | } |
| + | |
| + | > .#{$prefix}shrink { |
| + | @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical); |
| + | } |
| + | |
| + | @for $i from 1 through $grid-columns { |
| + | // Sizing (percentage) |
| + | $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}'); |
| + | |
| + | > #{$classname} { |
| + | @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical); |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Margin Grid classes |
| + | @mixin xy-margin-grid-classes( |
| + | $gutter-position: left right, |
| + | $vertical: false, |
| + | $wrapping-selector: '.grid-margin-x' |
| + | ){ |
| + | #{$wrapping-selector} { |
| + | @include xy-gutters($negative: true, $gutter-position: $gutter-position); |
| + | |
| + | // Base cell styles |
| + | > .cell { |
| + | @include xy-cell-static($vertical: $vertical); |
| + | } |
| + | |
| + | // base styles need to all be before the auto and shrink styles |
| + | @include -zf-each-breakpoint() { |
| + | @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) { |
| + | > .cell { |
| + | @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical); |
| + | } |
| + | } |
| + | } |
| + | |
| + | @include -zf-each-breakpoint() { |
| + | |
| + | // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights) |
| + | // for prior breakpoints based on the responsive gutter. |
| + | @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) { |
| + | @each $bp in -zf-breakpoints-less-than($-zf-size) { |
| + | @if(map-has-key($grid-margin-gutters, $bp)) { |
| + | @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical); |
| + | } |
| + | } |
| + | } |
| + | |
| + | @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical); |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Padding Grid classes |
| + | @mixin xy-padding-grid-classes { |
| + | .grid-padding-x { |
| + | |
| + | // Negative margin for nested grids |
| + | .grid-padding-x { |
| + | @include xy-gutters($negative: true); |
| + | } |
| + | |
| + | // Negative margin for grids within `grid-container/grid-container.fluid` |
| + | // This allows margin and padding grids to line up with eachother |
| + | .grid-container:not(.full) > & { |
| + | @include xy-gutters($negative: true); |
| + | } |
| + | |
| + | // Base cell styles |
| + | > .cell { |
| + | @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding); |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Block Grid classes |
| + | @mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) { |
| + | @if $padding-grid { |
| + | @include -zf-each-breakpoint { |
| + | @for $i from 1 through $xy-block-grid-max { |
| + | .#{$-zf-size}-up-#{$i} { |
| + | @include xy-grid-layout($i, '.cell', false, $gutter-type: padding); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | @if $margin-grid { |
| + | @include -zf-each-breakpoint { |
| + | @for $i from 1 through $xy-block-grid-max { |
| + | // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights) |
| + | // for prior breakpoints based on the responsive gutter. |
| + | @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) { |
| + | @each $bp in -zf-breakpoints-less-than($-zf-size) { |
| + | @if(map-has-key($grid-margin-gutters, $bp)) { |
| + | .grid-margin-x.#{$bp}-up-#{$i} { |
| + | @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | @for $i from 1 through $xy-block-grid-max { |
| + | .grid-margin-x.#{$-zf-size}-up-#{$i} { |
| + | @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Collapse classes |
| + | @mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) { |
| + | @each $bp in $breakpoint-classes { |
| + | @if $margin-grid { |
| + | .#{$bp}-margin-collapse { |
| + | @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp); |
| + | } |
| + | } |
| + | |
| + | @if $padding-grid { |
| + | .#{$bp}-padding-collapse { |
| + | @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Offset classes |
| + | @mixin xy-offset-cell-classes { |
| + | @include -zf-each-breakpoint { |
| + | @for $i from 1 through $grid-columns { |
| + | // Offsets |
| + | $o: $i - 1; |
| + | |
| + | .#{$-zf-size}-offset-#{$o} { |
| + | @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size); |
| + | } |
| + | |
| + | .grid-margin-x > .#{$-zf-size}-offset-#{$o} { |
| + | @include xy-cell-offset($o, $breakpoint: $-zf-size); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Vertical Grid classes |
| + | @mixin xy-vertical-grid-classes( |
| + | $margin-grid: true, |
| + | $padding-grid: true |
| + | ) { |
| + | |
| + | @include -zf-each-breakpoint() { |
| + | @if not($-zf-size == small) { |
| + | } |
| + | } |
| + | |
| + | .grid-y { |
| + | @include xy-grid(vertical, false); |
| + | |
| + | |
| + | > .cell { |
| + | @include xy-cell-reset(); |
| + | } |
| + | |
| + | > .auto { |
| + | @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true); |
| + | } |
| + | |
| + | > .shrink { |
| + | @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true); |
| + | } |
| + | |
| + | |
| + | @include -zf-each-breakpoint() { |
| + | // This is a bit of a hack/workaround, see these issues and PRs for the backstory: |
| + | // https://github.com/zurb/foundation-sites/issues/10244 |
| + | // https://github.com/zurb/foundation-sites/pull/10222 and |
| + | // https://github.com/zurb/foundation-sites/pull/10164 |
| + | $str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full"; |
| + | @for $i from 1 through $grid-columns { |
| + | $str: $str + ", > .#{$-zf-size}-#{$i}" |
| + | } |
| + | #{$str} { |
| + | flex-basis: auto; |
| + | } |
| + | } |
| + | |
| + | @include -zf-each-breakpoint() { |
| + | @if not($-zf-size == small) { |
| + | > .#{$-zf-size}-auto { |
| + | @include xy-cell-base(auto); |
| + | @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true); |
| + | } |
| + | |
| + | > .#{$-zf-size}-shrink { |
| + | @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true); |
| + | } |
| + | |
| + | } |
| + | |
| + | @for $i from 1 through $grid-columns { |
| + | // Sizing (percentage) |
| + | > .#{$-zf-size}-#{$i} { |
| + | @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding); |
| + | } |
| + | } |
| + | |
| + | } |
| + | } |
| + | |
| + | @if $padding-grid { |
| + | .grid-padding-y { |
| + | // Negative margin for nested grids |
| + | .grid-padding-y { |
| + | @include xy-gutters($negative: true, $gutter-position: top bottom); |
| + | } |
| + | |
| + | // Base cell styles |
| + | > .cell { |
| + | @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom); |
| + | } |
| + | } |
| + | } |
| + | |
| + | @if $margin-grid { |
| + | @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y'); |
| + | } |
| + | |
| + | } |
| + | |
| + | @mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) { |
| + | // Framed grid styles |
| + | .grid-frame { |
| + | @include xy-grid-frame; |
| + | } |
| + | |
| + | .cell .grid-frame { |
| + | width: 100%; // Same as include with $nested, but with less css |
| + | } |
| + | |
| + | .cell-block { |
| + | @include xy-cell-block(); |
| + | } |
| + | |
| + | .cell-block-y { |
| + | @include xy-cell-block(true); |
| + | } |
| + | |
| + | |
| + | .cell-block-container { |
| + | @include xy-cell-block-container(); |
| + | } |
| + | |
| + | |
| + | @include -zf-each-breakpoint(false) { |
| + | |
| + | .#{$-zf-size}-grid-frame { |
| + | @include xy-grid-frame; |
| + | } |
| + | |
| + | .cell .#{$-zf-size}-grid-frame { |
| + | width: 100%; // Same as include with $nested, but with less css |
| + | } |
| + | |
| + | .#{$-zf-size}-cell-block { |
| + | @include xy-cell-block(); |
| + | } |
| + | |
| + | .#{$-zf-size}-cell-block-container { |
| + | @include xy-cell-block-container(); |
| + | } |
| + | |
| + | .#{$-zf-size}-cell-block-y { |
| + | @include xy-cell-block(true); |
| + | } |
| + | } |
| + | |
| + | @if $vertical-grid { |
| + | .grid-y { |
| + | &.grid-frame { |
| + | width: auto; |
| + | @include xy-grid-frame(true); |
| + | } |
| + | |
| + | @include -zf-each-breakpoint(false) { |
| + | &.#{$-zf-size}-grid-frame { |
| + | width: auto; |
| + | @include xy-grid-frame(true); |
| + | } |
| + | |
| + | } |
| + | } |
| + | .cell { |
| + | .grid-y.grid-frame { |
| + | height: 100%; // Same as include with $nested, but with less css |
| + | } |
| + | @include -zf-each-breakpoint(false) { |
| + | .grid-y.#{$-zf-size}-grid-frame { |
| + | height: 100%; // Same as include with $nested, but with less css |
| + | } |
| + | } |
| + | } |
| + | } |
| + | @if $margin-grid { |
| + | @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y'); |
| + | .grid-frame.grid-margin-y { |
| + | @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false); |
| + | } |
| + | @include -zf-each-breakpoint(false) { |
| + | .grid-margin-y.#{$-zf-size}-grid-frame { |
| + | @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Final classes |
| + | @mixin foundation-xy-grid-classes( |
| + | $base-grid: true, |
| + | $margin-grid: true, |
| + | $padding-grid: true, |
| + | $block-grid: true, |
| + | $collapse: true, |
| + | $offset: true, |
| + | $vertical-grid: true, |
| + | $frame-grid: true |
| + | ) { |
| + | |
| + | // Base grid styles |
| + | @if($base-grid) { |
| + | @include xy-base-grid-classes(); |
| + | } |
| + | |
| + | // Margin grid |
| + | @if($margin-grid) { |
| + | @include xy-margin-grid-classes(); |
| + | } |
| + | |
| + | // Padding grid |
| + | @if($padding-grid) { |
| + | @include xy-padding-grid-classes(); |
| + | } |
| + | |
| + | // Block grid |
| + | @if($block-grid) { |
| + | @include xy-block-grid-classes($margin-grid, $padding-grid); |
| + | } |
| + | |
| + | // Collapse gutters |
| + | @if($collapse) { |
| + | @include xy-collapse-grid-classes($margin-grid, $padding-grid); |
| + | } |
| + | |
| + | // Offset gutters |
| + | @if($offset) { |
| + | @include xy-offset-cell-classes(); |
| + | } |
| + | |
| + | // Vertical grid |
| + | @if($vertical-grid) { |
| + | @include xy-vertical-grid-classes($margin-grid, $padding-grid); |
| + | } |
| + | |
| + | @if ($frame-grid) { |
| + | @include xy-frame-grid-classes($vertical-grid, $margin-grid) |
| + | } |
| + | } |
public/stylesheets/foundation6/xy-grid/_collapse.scss
+74
-0
| @@ | @@ -0,0 +1,74 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group xy-grid |
| + | //// |
| + | |
| + | /// Collapses the grid a cells within it. |
| + | /// |
| + | /// @param {String} $selector [.cell] - The child element to remove the gutter from. |
| + | /// @param {Keyword} $gutter-type [margin] - The type of gutter to remove. |
| + | /// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination. |
| + | @mixin xy-grid-collapse( |
| + | $selector: '.cell', |
| + | $gutter-type: margin, |
| + | $gutter-position: right left, |
| + | $min-breakpoint: $-zf-zero-breakpoint |
| + | ) { |
| + | // First, lets negate any margins on the top level |
| + | @if ($gutter-type == 'margin') { |
| + | |
| + | @include breakpoint($min-breakpoint) { |
| + | @each $value in $gutter-position { |
| + | margin-#{$value}: 0; |
| + | } |
| + | |
| + | > #{$selector} { |
| + | @each $value in $gutter-position { |
| + | margin-#{$value}: 0; |
| + | } |
| + | } |
| + | } |
| + | |
| + | $excluded-bps: -zf-breakpoints-less-than($min-breakpoint); |
| + | |
| + | // Output new widths to not include gutters |
| + | @each $bp in $breakpoint-classes { |
| + | @if(sl-contain($excluded-bps, $bp)) { |
| + | @include breakpoint($min-breakpoint) { |
| + | @for $i from 1 through $grid-columns { |
| + | // Sizing (percentage) |
| + | > .#{$bp}-#{$i} { |
| + | @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding); |
| + | } |
| + | } |
| + | } |
| + | } @else { |
| + | @include breakpoint($bp) { |
| + | @for $i from 1 through $grid-columns { |
| + | // Sizing (percentage) |
| + | > .#{$bp}-#{$i} { |
| + | @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | @else { |
| + | |
| + | @include breakpoint($min-breakpoint) { |
| + | @each $value in $gutter-position { |
| + | margin-#{$value}: 0; |
| + | } |
| + | |
| + | > #{$selector} { |
| + | @each $value in $gutter-position { |
| + | padding-#{$value}: 0; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/xy-grid/_frame.scss
+85
-0
| @@ | @@ -0,0 +1,85 @@ |
| + | /// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior) |
| + | /// |
| + | /// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid. |
| + | /// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh. |
| + | /// @param {Number|Map} $gutters [null] - Map or single value for gutters. |
| + | /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. |
| + | /// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint. |
| + | @mixin xy-grid-frame( |
| + | $vertical: false, |
| + | $nested: false, |
| + | $gutters: null, |
| + | $breakpoint: null, |
| + | $include-base: true |
| + | ) { |
| + | |
| + | @if $include-base { |
| + | overflow: hidden; |
| + | position: relative; |
| + | flex-wrap: nowrap; |
| + | align-items: stretch; |
| + | } |
| + | |
| + | @if $breakpoint == null and type-of($gutters) == 'map' { |
| + | @include -zf-each-breakpoint() { |
| + | @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false); |
| + | } |
| + | } @else { |
| + | // Get our gutters if applicable |
| + | $gutter: -zf-get-bp-val($gutters, $breakpoint); |
| + | |
| + | // If we have a gutter, add it to the width/height |
| + | @if $gutter { |
| + | @if $vertical == true { |
| + | $unit: if($nested == true, 100%, 100vh); |
| + | $gutter: rem-calc($gutter); |
| + | height: calc(#{$unit} + #{$gutter}); |
| + | } @else { |
| + | $unit: if($nested == true, 100%, 100vw); |
| + | $gutter: rem-calc($gutter); |
| + | width: calc(#{$unit} + #{$gutter}); |
| + | } |
| + | } |
| + | @else { |
| + | @if $vertical == true { |
| + | height: if($nested == true, 100%, 100vh); |
| + | } @else { |
| + | width: if($nested == true, 100%, 100vw); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling) |
| + | /// |
| + | /// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid. |
| + | @mixin xy-cell-block( |
| + | $vertical: false |
| + | ) { |
| + | $property: if($vertical == true, 'overflow-y', 'overflow-x'); |
| + | |
| + | @if $vertical == true { |
| + | overflow-y: auto; |
| + | max-height: 100%; |
| + | } @else { |
| + | overflow-x: auto; |
| + | max-width: 100%; |
| + | } |
| + | |
| + | -webkit-overflow-scrolling: touch; |
| + | -ms-overflow-stype: -ms-autohiding-scrollbar; |
| + | } |
| + | |
| + | /// Container for inside a grid frame containing multiple blocks. Typically used |
| + | /// as a modifier for a `.cell` to allow the cell to pass along flex sizing |
| + | /// constraints / from parents to children. |
| + | @mixin xy-cell-block-container() { |
| + | display: flex; |
| + | flex-direction: column; |
| + | max-height: 100%; |
| + | |
| + | > .grid-x { |
| + | max-height: 100%; |
| + | flex-wrap: nowrap; |
| + | } |
| + | } |
public/stylesheets/foundation6/xy-grid/_grid.scss
+35
-0
| @@ | @@ -0,0 +1,35 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group xy-grid |
| + | //// |
| + | |
| + | /// Creates a max width container, designed to house your grid content. |
| + | /// |
| + | /// @param {Number} $width [$grid-container] - a width to limit the container to. |
| + | @mixin xy-grid-container( |
| + | $width: $grid-container, |
| + | $padding: $grid-container-padding |
| + | ) { |
| + | @include xy-gutters($gutters: $padding, $gutter-type: padding); |
| + | |
| + | max-width: $width; |
| + | margin: 0 auto; |
| + | } |
| + | |
| + | /// Creates a container for your flex cells. |
| + | /// |
| + | /// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within. |
| + | /// @param {Boolean} $wrap [true] - If the cells within should wrap or not. |
| + | @mixin xy-grid( |
| + | $direction: horizontal, |
| + | $wrap: true |
| + | ) { |
| + | $direction: if($direction == 'horizontal', row, column); |
| + | $wrap: if($wrap, wrap, nowrap); |
| + | |
| + | display: flex; |
| + | flex-flow: $direction $wrap; |
| + | } |
public/stylesheets/foundation6/xy-grid/_gutters (Torey\342\200\231s MacBook Pro's conflicted copy 2017-12-03).scss"
+40
-0
| @@ | @@ -0,0 +1,40 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group xy-grid |
| + | //// |
| + | |
| + | /// Create gutters for a cell/container. |
| + | /// |
| + | /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters. |
| + | /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding. |
| + | /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. |
| + | /// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids. |
| + | @mixin xy-gutters($gutters: $grid-margin-gutters, $gutter-type: margin, $gutter-position: right left, $negative: false) { |
| + | $operator: if($negative, "-", ""); |
| + | |
| + | // If we have declared negative gutters, force type to `margin. |
| + | $gutter-type: if($negative, "margin", $gutter-type); |
| + | |
| + | // Output our margin gutters. |
| + | @if type-of($gutters) == "map" { |
| + | @include -zf-breakpoint-value(auto, $gutters) { |
| + | $gutter: rem-calc($-zf-bp-value) / 2; |
| + | |
| + | // Loop through each gutter position |
| + | @each $value in $gutter-position { |
| + | #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}"); |
| + | } |
| + | } |
| + | } |
| + | @else if type-of($gutters) == "number" { |
| + | $gutter: rem-calc($gutters) / 2; |
| + | |
| + | // Loop through each gutter position |
| + | @each $value in $gutter-position { |
| + | #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}"); |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/xy-grid/_gutters.scss
+45
-0
| @@ | @@ -0,0 +1,45 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group xy-grid |
| + | //// |
| + | |
| + | /// Create gutters for a cell/container. |
| + | /// |
| + | /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters. |
| + | /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding. |
| + | /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. |
| + | /// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids. |
| + | @mixin xy-gutters( |
| + | $gutters: $grid-margin-gutters, |
| + | $gutter-type: margin, |
| + | $gutter-position: right left, |
| + | $negative: false |
| + | ) { |
| + | $operator: if($negative, '-', ''); |
| + | |
| + | // If we have declared negative gutters, force type to `margin. |
| + | $gutter-type: if($negative, 'margin', $gutter-type); |
| + | |
| + | // Output our margin gutters. |
| + | @if (type-of($gutters) == 'map') { |
| + | @include -zf-breakpoint-value(auto, $gutters) { |
| + | $gutter: rem-calc($-zf-bp-value) / 2; |
| + | |
| + | // Loop through each gutter position |
| + | @each $value in $gutter-position { |
| + | #{$gutter-type}-#{$value}: #{$operator}$gutter; |
| + | } |
| + | } |
| + | } |
| + | @elseif (type-of($gutters) == 'number') { |
| + | $gutter: rem-calc($gutters) / 2; |
| + | |
| + | // Loop through each gutter position |
| + | @each $value in $gutter-position { |
| + | #{$gutter-type}-#{$value}: #{$operator}$gutter; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/xy-grid/_layout.scss
+33
-0
| @@ | @@ -0,0 +1,33 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group xy-grid |
| + | //// |
| + | |
| + | /// Sizes child elements so that `$n` number of items appear on each row. |
| + | /// |
| + | /// @param {Number} $n - Number of elements to display per row. |
| + | /// @param {String} $selector ['.cell'] - Selector(s) to use for child elements. |
| + | /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters |
| + | /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters. |
| + | /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`. |
| + | /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. |
| + | /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths. |
| + | @mixin xy-grid-layout( |
| + | $n, |
| + | $selector: '.cell', |
| + | $gutter-output: true, |
| + | $gutters: $grid-margin-gutters, |
| + | $gutter-type: margin, |
| + | $gutter-position: right left, |
| + | $breakpoint: $-zf-zero-breakpoint, |
| + | $vertical: false |
| + | ) { |
| + | $size: percentage(1/$n); |
| + | |
| + | & > #{$selector} { |
| + | @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical); |
| + | } |
| + | } |
public/stylesheets/foundation6/xy-grid/_position.scss
+28
-0
| @@ | @@ -0,0 +1,28 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group xy-grid |
| + | //// |
| + | |
| + | /// Offsets a column to the right/bottom by `$n` columns. |
| + | /// |
| + | /// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`. |
| + | /// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead. |
| + | @mixin xy-cell-offset( |
| + | $n, |
| + | $gutters: $grid-margin-gutters, |
| + | $gutter-type: margin, |
| + | $breakpoint: $-zf-zero-breakpoint, |
| + | $vertical: false |
| + | ) { |
| + | $direction: if($vertical, 'top', $global-left); |
| + | |
| + | @include -zf-breakpoint-value($breakpoint, $gutters) { |
| + | $gutter: rem-calc($-zf-bp-value) / 2; |
| + | $size: if($gutter-type == 'margin', calc(#{xy-cell-size($n)} + #{$gutter}), #{xy-cell-size($n)}); |
| + | |
| + | margin-#{$direction}: #{$size}; |
| + | } |
| + | } |
public/stylesheets/foundation6/xy-grid/_xy-grid.scss
+51
-0
| @@ | @@ -0,0 +1,51 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group xy-grid |
| + | //// |
| + | |
| + | /// Enables the XY grid. |
| + | /// @type Boolean |
| + | $xy-grid: true !default; |
| + | |
| + | /// The maximum width of a grid container. |
| + | /// @type Number |
| + | $grid-container: $global-width !default; |
| + | |
| + | /// The number of columns used in the grid. |
| + | /// @type Number |
| + | $grid-columns: 12 !default; |
| + | |
| + | /// The amount of margin between cells at different screen sizes when using the margin grid. To use just one size, set the variable to a number instead of a map. |
| + | /// @type Map | Length |
| + | $grid-margin-gutters: ( |
| + | small: 20px, |
| + | medium: 30px |
| + | ) !default; |
| + | |
| + | /// The amount of padding in cells at different screen sizes when using the padding grid. To use just one size, set the variable to a number instead of a map. |
| + | /// @type Map | Length |
| + | $grid-padding-gutters: $grid-margin-gutters !default; |
| + | |
| + | /// The amount of padding to use when padding the grid-container. |
| + | /// @type Map | Length |
| + | $grid-container-padding: $grid-padding-gutters !default; |
| + | |
| + | /// The maximum width to apply to a grid container |
| + | /// @type Number |
| + | $grid-container-max: $global-width !default; |
| + | |
| + | /// The maximum number of cells in an XY block grid. |
| + | /// @type Number |
| + | $xy-block-grid-max: 8 !default; |
| + | |
| + | @import 'gutters'; |
| + | @import 'grid'; |
| + | @import 'cell'; |
| + | @import 'frame'; |
| + | @import 'position'; |
| + | @import 'layout'; |
| + | @import 'collapse'; |
| + | @import 'classes'; |