vs-america.com
Torey Heinz
committed Sep 28, 2017
commit bf9c85a0e381ad5d4f64f5dbe8c63397356779fd
Showing 110
changed files with
20460 additions
and 0 deletions
Gemfile
+24
-0
| @@ | @@ -0,0 +1,24 @@ |
| + | 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') |
| + | |
| + | # Unix |
| + | gem 'therubyracer', require: 'v8', platforms: :ruby unless RUBY_PLATFORM.include?('darwin') |
| + | |
| + | gem 'rb-inotify', '~> 0.9', require: 'rb-inotify' if RUBY_PLATFORM.include?('linux') |
| + | |
| + | # Windows |
| + | gem 'wdm', '~> 0.1.1', require: 'wdm' if RUBY_PLATFORM =~ /mswin|mingw/i |
| + | 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.10) |
| + | 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.1) |
| + | 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.pre.2 |
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 |
app/content_types/.gitkeep
+0
-0
app/views/pages/404.liquid
+11
-0
| @@ | @@ -0,0 +1,11 @@ |
| + | --- |
| + | title: Page not found |
| + | published: true |
| + | --- |
| + | {% extends index %} |
| + | |
| + | {% block 'main' %} |
| + | |
| + | <p>Page not found</p> |
| + | |
| + | {% endblock %} |
app/views/pages/index.liquid
+172
-0
| @@ | @@ -0,0 +1,172 @@ |
| + | --- |
| + | title: Home page |
| + | published: true |
| + | --- |
| + | <!doctype html> |
| + | <html class="no-js" lang="en"> |
| + | <head> |
| + | <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>Foundation for Sites</title> |
| + | {{ 'app.css' | stylesheet_tag }} |
| + | </head> |
| + | <body> |
| + | <div class="row"> |
| + | <div class="large-12 columns"> |
| + | <h1>Welcome to Foundation</h1> |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="row"> |
| + | <div class="large-12 columns"> |
| + | <div class="callout"> |
| + | <h3>We’re stoked you want to try Foundation! </h3> |
| + | <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p> |
| + | <p>Once you've exhausted the fun in this document, you should check out:</p> |
| + | <div class="row"> |
| + | <div class="large-4 medium-4 columns"> |
| + | <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p> |
| + | </div> |
| + | <div class="large-4 medium-4 columns"> |
| + | <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p> |
| + | </div> |
| + | <div class="large-4 medium-4 columns"> |
| + | <p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p> |
| + | </div> |
| + | </div> |
| + | <div class="row"> |
| + | <div class="large-4 medium-4 medium-push-2 columns"> |
| + | <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p> |
| + | </div> |
| + | <div class="large-4 medium-4 medium-pull-2 columns"> |
| + | <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="row"> |
| + | <div class="large-8 medium-8 columns"> |
| + | <h5>Here’s your basic grid:</h5> |
| + | <!-- Grid Example --> |
| + | |
| + | <div class="row"> |
| + | <div class="large-12 columns"> |
| + | <div class="primary callout"> |
| + | <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.</p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="row"> |
| + | <div class="large-6 medium-6 columns"> |
| + | <div class="primary callout"> |
| + | <p>Six columns</p> |
| + | </div> |
| + | </div> |
| + | <div class="large-6 medium-6 columns"> |
| + | <div class="primary callout"> |
| + | <p>Six columns</p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="row"> |
| + | <div class="large-4 medium-4 small-4 columns"> |
| + | <div class="primary callout"> |
| + | <p>Four columns</p> |
| + | </div> |
| + | </div> |
| + | <div class="large-4 medium-4 small-4 columns"> |
| + | <div class="primary callout"> |
| + | <p>Four columns</p> |
| + | </div> |
| + | </div> |
| + | <div class="large-4 medium-4 small-4 columns"> |
| + | <div class="primary callout"> |
| + | <p>Four columns</p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | |
| + | <hr /> |
| + | |
| + | <h5>We bet you’ll need a form somewhere:</h5> |
| + | <form> |
| + | <div class="row"> |
| + | <div class="large-12 columns"> |
| + | <label>Input Label</label> |
| + | <input type="text" placeholder="large-12.columns" /> |
| + | </div> |
| + | </div> |
| + | <div class="row"> |
| + | <div class="large-4 medium-4 columns"> |
| + | <label>Input Label</label> |
| + | <input type="text" placeholder="large-4.columns" /> |
| + | </div> |
| + | <div class="large-4 medium-4 columns"> |
| + | <label>Input Label</label> |
| + | <input type="text" placeholder="large-4.columns" /> |
| + | </div> |
| + | <div class="large-4 medium-4 columns"> |
| + | <div class="row collapse"> |
| + | <label>Input Label</label> |
| + | <div class="input-group"> |
| + | <input type="text" placeholder="small-9.columns" class="input-group-field" /> |
| + | <span class="input-group-label">.com</span> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="row"> |
| + | <div class="large-12 columns"> |
| + | <label>Select Box</label> |
| + | <select> |
| + | <option value="husker">Husker</option> |
| + | <option value="starbuck">Starbuck</option> |
| + | <option value="hotdog">Hot Dog</option> |
| + | <option value="apollo">Apollo</option> |
| + | </select> |
| + | </div> |
| + | </div> |
| + | <div class="row"> |
| + | <div class="large-6 medium-6 columns"> |
| + | <label>Choose Your Favorite</label> |
| + | <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label> |
| + | <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label> |
| + | </div> |
| + | <div class="large-6 medium-6 columns"> |
| + | <label>Check these out</label> |
| + | <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label> |
| + | <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label> |
| + | </div> |
| + | </div> |
| + | <div class="row"> |
| + | <div class="large-12 columns"> |
| + | <label>Textarea Label</label> |
| + | <textarea placeholder="small-12.columns"></textarea> |
| + | </div> |
| + | </div> |
| + | </form> |
| + | </div> |
| + | |
| + | <div class="large-4 medium-4 columns"> |
| + | <h5>Try one of these buttons:</h5> |
| + | <p><a href="#" class="button">Simple Button</a><br/> |
| + | <a href="#" class="success button">Success Btn</a><br/> |
| + | <a href="#" class="alert button">Alert Btn</a><br/> |
| + | <a href="#" class="secondary button">Secondary Btn</a></p> |
| + | <div class="callout"> |
| + | <h5>So many components, girl!</h5> |
| + | <p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p> |
| + | <a href="http://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | |
| + | <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> |
| + | {{'vendor/what-input.min.js' | javascript_tag }} |
| + | {{ 'vendor/foundation.min.js' | javascript_tag }} |
| + | {{'app.js' | javascript_tag }} |
| + | </body> |
| + | </html> |
app/views/snippets/.gitkeep
+0
-0
config/deploy.yml
+16
-0
| @@ | @@ -0,0 +1,16 @@ |
| + | # development: |
| + | # host: dev.example.com |
| + | # email: john@doe.net |
| + | # password: apassword |
| + | # # api_key: <your api key here> |
| + | # staging: |
| + | # host: staging.example.com |
| + | # email: john@doe.net |
| + | # password: apassword |
| + | # # api_key: <your api key here> |
| + | # production: |
| + | # host: www.example.com |
| + | # email: john@doe.net |
| + | # password: apassword |
| + | # # api_key: <your api key here> |
| + | # # ssl: true |
config/metafields_schema.yml
+56
-0
| @@ | @@ -0,0 +1,56 @@ |
| + | # Site metafield schema |
| + | # |
| + | # Syntax: |
| + | # |
| + | # <namespace_1>: # no empty spaces, only digits and underscores |
| + | # label: <my label> # used as the label of a tab in the back-office |
| + | # # label: # if you want to provide the label in another language (back-office) |
| + | # # en: <your label in English if the local of the current user is English> |
| + | # # fr: <your label in French> |
| + | # position: <0..n> # position of the tab in the menu |
| + | # fields: |
| + | # <name_1>: |
| + | # label: <my label> # used as the label of the HTML input. Use a hash if you want it in another languages. |
| + | # hint: <my hint> # used as the hint of the HTML input. Use a hash if you want it in another languages. |
| + | # type: <string|text|integer|float|image|boolean|select|color> |
| + | # localized: <true|false> # if the value is scoped by the current locale when rendering the site. |
| + | # position: <0..n> # position of the input in the form |
| + | # select_options: [array] |
| + | # # select_options: |
| + | # # <option_value_1>: <label> # use a hash instead if you want it in another languages. |
| + | # # <option_value_2>: <label> # use a hash instead if you want it in another languages. |
| + | # # <name_2>: |
| + | # # ... |
| + | # |
| + | # <namespace_2>: |
| + | # # ... |
| + | # |
| + | # |
| + | # Simple example: |
| + | # |
| + | # shop: |
| + | # label: My shop location |
| + | # fields: |
| + | # address: |
| + | # type: string |
| + | # hint: "Ex: 7 allee Albert Camus" |
| + | # city: |
| + | # type: string |
| + | # hint: "Chicago, Paris, Blagnac, Toulouse" |
| + | # zip_code: |
| + | # type: string |
| + | # hint: "Digits only" |
| + | # hours: |
| + | # type: text |
| + | # hint: "Free text here" |
| + | # theme: |
| + | # fields: |
| + | # background_image: |
| + | # type: image |
| + | # hint: full screen image (min: 3000px x 3000px) |
| + | # link_color: |
| + | # type: color |
| + | # font: |
| + | # type: select |
| + | # select_options: ['helvetica', 'Noto'] |
| + | |
config/site.yml
+48
-0
| @@ | @@ -0,0 +1,48 @@ |
| + | # The name of this site |
| + | # This text displays in the back-office and |
| + | # can be used in templates through the site.name global variable |
| + | name: "locomotive-foundation6" |
| + | |
| + | # An array of domain aliases for the site |
| + | # This option is for sites on multi-site engines |
| + | # domains: [www.example.com, example.com] |
| + | |
| + | # An array of locales (languages) the site is available in |
| + | # The locale listed first is the site's default locale |
| + | # Locales are specified using ISO language codes |
| + | # Possible locales include: en, de, fr, pl, pt-BR, it, nl, nb, es, ru, et, ja, zh-CN |
| + | locales: [en] |
| + | |
| + | # The site's timezone |
| + | # This converts the server's time to the site's time zone in templates |
| + | # The TimeZone class from Rail's ActiveSupport is used to interpret the string |
| + | # Sample timezone strings: Tokyo, Beijing, Moscow, Cairo, Paris, Pacific Time (US & Canada) |
| + | # timezone: Paris |
| + | |
| + | # For SEO purposes, sites may wish to add a relevant string to the <title> tag |
| + | # And include <meta type="keywords"> and <meta type="description"> |
| + | # For this purpose you can set values for these variables here |
| + | # They can be accessed in templates through the site.seo_title, site.meta_keywords, and site.meta_description variables |
| + | seo_title: locomotive-foundation6 |
| + | meta_keywords: "some meta keywords" |
| + | meta_description: "some meta description" |
| + | |
| + | # You can control the display of the "Properties" section in the back-office |
| + | # metafields_ui: |
| + | # label: Store settings # use a hash for localized versions |
| + | # icon: shopping-cart # FontAwesome icons without the leading "fa-" string. |
| + | # hint: "Lorem ipsum..." |
| + | |
| + | # Each site can have its own set of custom properties organized in namespaces. |
| + | # First, define namespaces and their fields in the config/metafields_schema.yml file. |
| + | # Finally, set default values below as described in the example. |
| + | # You can access them in your liquid templates and snippets: |
| + | # {{ site.metafields.<namespace>.<field> }} |
| + | # |
| + | # Example: |
| + | # |
| + | # metafields: |
| + | # shop: |
| + | # address: 700 South Laflin Street |
| + | # theme: |
| + | # background_image: "/samples/background.png" |
config/translations.yml
+8
-0
| @@ | @@ -0,0 +1,8 @@ |
| + | # Your translations go here. To be used with the 'translate' liquid filter |
| + | # Example: |
| + | # {{ 'hello_world' | translate }} |
| + | # |
| + | |
| + | # hello_world: |
| + | # en: Hello world ! |
| + | # fr: Bonjour le monde ! |
data/.gitkeep
+0
-0
log/.gitkeep
+0
-0
public/images/.gitkeep
+0
-0
public/javascripts/app.js
+1
-0
| @@ | @@ -0,0 +1 @@ |
| + | $(document).foundation(); |
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
+3
-0
| @@ | @@ -0,0 +1,3 @@ |
| + | !function(t){"use strict";function e(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 i(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}var n="6.0.3",s={version:n,_plugins:{},_uuids:[],_activePlugins:{},rtl:function(){return"rtl"===t("html").attr("dir")},plugin:function(t,n){var s=n||e(t),o=i(s);this._plugins[o]=this[s]=t},registerPlugin:function(t){var i=e(t.constructor).toLowerCase();t.uuid=this.GetYoDigits(6,i),t.$element.attr("data-"+i,t.uuid).trigger("init.zf."+i),this._activePlugins[t.uuid]=t},unregisterPlugin:function(t){var i=e(t.constructor).toLowerCase();delete this._activePlugins[t.uuid],t.$element.removeAttr("data-"+i).trigger("destroyed.zf."+i)},_reflow:function(t){var e=Object.keys(this._activePlugins),i=this;if(t){if("string"==typeof t){var n=t.split("-")[1];n?this._activePlugins[t]._init():(n=new RegExp(t,"i"),e.filter(function(t){return n.test(t)}).forEach(function(t){i._activePlugins[t]._init()}))}}else e.forEach(function(t){i._activePlugins[t]._init()})},GetYoDigits:function(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:"")},reflow:function(e,i){"undefined"==typeof i?i=Object.keys(this._plugins):"string"==typeof i&&(i=[i]);var n=this;t.each(i,function(i,s){var o=n._plugins[s],a=t(e).find("[data-"+s+"]").addBack("*");a.each(function(){return t(this).attr("zf-plugin")?void console.warn("Tried to initialize "+s+" on an element that already has a Foundation plugin."):void t(this).data("zf-plugin",new o(t(this)))})})},getFnName:e,transitionend:function(t){var e,i={transition:"transitionend",WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend"},n=document.createElement("div");for(var s in i)"undefined"!=typeof n.style[s]&&(e=i[s]);return e?e:(e=setTimeout(function(){t.triggerHandler("transitionend",[t])},1),"transitionend")}};s.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))}}};var o=function(i){var n=typeof i,o=t("meta.foundation-mq"),a=t(".no-js");if(o.length||t('<meta class="foundation-mq">').appendTo(document.head),a.length&&a.removeClass("no-js"),"undefined"===n)s.MediaQuery._init(),s.reflow(this);else{if("string"!==n)throw new TypeError("We're sorry, '"+n+"' is not a valid parameter. You must use a string representing the method you wish to invoke.");var r=Array.prototype.slice.call(arguments,1),l=this.data("zfPlugin");if(void 0===l||void 0===l[i])throw new ReferenceError("We're sorry, '"+i+"' is not an available method for "+(l?e(l):"this element")+".");1===this.length?l[i].apply(l,r):this.each(function(e,n){l[i].apply(t(n).data("zfPlugin"),r)})}return this};window.Foundation=s,t.fn.foundation=o,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})}(jQuery),!function(t,e){var i=function(t,e,i,s){var o,a,r,l,d=n(t);if(e){var h=n(e);a=d.offset.top+d.height<=h.height+h.offset.top,o=d.offset.top>=h.offset.top,r=d.offset.left>=h.offset.left,l=d.offset.left+d.width<=h.width}else a=d.offset.top+d.height<=d.windowDims.height+d.windowDims.offset.top,o=d.offset.top>=d.windowDims.offset.top,r=d.offset.left>=d.windowDims.offset.left,l=d.offset.left+d.width<=d.windowDims.width;var u=[a,o,r,l];return i?r===l==!0:s?o===a==!0:-1===u.indexOf(!1)},n=function(t,i){if(t=t.length?t[0]:t,t===e||t===document)throw new Error("I'm sorry, Dave. I'm afraid I can't do that.");var n=t.getBoundingClientRect(),s=t.parentNode.getBoundingClientRect(),o=document.body.getBoundingClientRect(),a=e.pageYOffset,r=e.pageXOffset;return{width:n.width,height:n.height,offset:{top:n.top+a,left:n.left+r},parentDims:{width:s.width,height:s.height,offset:{top:s.top+a,left:s.left+r}},windowDims:{width:o.width,height:o.height,offset:{top:a,left:r}}}},s=function(t,e,i,s,o,a){var r=n(t),l=e?n(e):null;switch(i){case"top":return{left:l.offset.left,top:l.offset.top-(r.height+s)};case"left":return{left:l.offset.left-(r.width+o),top:l.offset.top};case"right":return{left:l.offset.left+l.width+o,top:l.offset.top};case"center top":return{left:l.offset.left+l.width/2-r.width/2,top:l.offset.top-(r.height+s)};case"center bottom":return{left:a?o:l.offset.left+l.width/2-r.width/2,top:l.offset.top+l.height+s};case"center left":return{left:l.offset.left-(r.width+o),top:l.offset.top+l.height/2-r.height/2};case"center right":return{left:l.offset.left+l.width+o+1,top:l.offset.top+l.height/2-r.height/2};case"center":return{left:r.windowDims.offset.left+r.windowDims.width/2-r.width/2,top:r.windowDims.offset.top+r.windowDims.height/2-r.height/2};case"reveal":return{left:(r.windowDims.width-r.width)/2,top:r.windowDims.offset.top+s};case"reveal full":return{left:r.windowDims.offset.left,top:r.windowDims.offset.top};default:return{left:l.offset.left,top:l.offset.top+l.height+s}}};t.Box={ImNotTouchingYou:i,GetDimensions:n,GetOffsets:s}}(window.Foundation,window),!function(t,e){"use strict";e.Keyboard={};var i={9:"TAB",13:"ENTER",27:"ESCAPE",32:"SPACE",37:"ARROW_LEFT",38:"ARROW_UP",39:"ARROW_RIGHT",40:"ARROW_DOWN"},n=function(t){var e={};for(var i in t)e[t[i]]=t[i];return e}(i);e.Keyboard.keys=n;var s=function(t){var e=i[t.which||t.keyCode]||String.fromCharCode(t.which).toUpperCase();return t.shiftKey&&(e="SHIFT_"+e),t.ctrlKey&&(e="CTRL_"+e),t.altKey&&(e="ALT_"+e),e};e.Keyboard.parseKey=s;var o={},a=function(i,n,a){var r,l,d,h=o[e.getFnName(n)],u=s(i);return h?(r="undefined"==typeof h.ltr?h:e.rtl()?t.extend({},h.ltr,h.rtl):t.extend({},h.rtl,h.ltr),l=r[u],d=a[l],void(d&&"function"==typeof d?(d.apply(n),(a.handled||"function"==typeof a.handled)&&a.handled.apply(n)):(a.unhandled||"function"==typeof a.unhandled)&&a.unhandled.apply(n))):console.warn("Component not defined!")};e.Keyboard.handleKey=a;var r=function(e){return e.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!t(this).is(":visible")||t(this).attr("tabindex")<0?!1:!0})};e.Keyboard.findFocusable=r;var l=function(t,e){o[t]=e};e.Keyboard.register=l}(jQuery,window.Foundation),!function(t,e){function i(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}var n={queries:[],current:"",atLeast:function(t){var e=this.get(t);return e?window.matchMedia(e).matches:!1},get:function(t){for(var e in this.queries){var i=this.queries[e];if(t===i.name)return i.value}return null},_init:function(){var e,n=this,s=t(".foundation-mq").css("font-family");e=i(s);for(var o in e)n.queries.push({name:o,value:"only screen and (min-width: "+e[o]+")"});this.current=this._getCurrentSize(),this._watcher()},_getCurrentSize:function(){var t;for(var e in this.queries){var i=this.queries[e];window.matchMedia(i.value).matches&&(t=i)}return"object"==typeof t?t.name:t},_watcher:function(){var e=this;t(window).on("resize.zf.mediaquery",function(){var i=e._getCurrentSize();i!==e.current&&(t(window).trigger("changed.zf.mediaquery",[i,e.current]),e.current=i)})}};e.MediaQuery=n,window.matchMedia||(window.matchMedia=function(){"use strict";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.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"}}}())}(jQuery,Foundation),!function(t,e){function i(i,o,a,r){function l(){i||o.hide(),d(),r&&r.apply(o)}function d(){o[0].style.transitionDuration=0,o.removeClass(h+" "+u+" "+a)}if(o=t(o).eq(0),o.length){var h=i?n[0]:n[1],u=i?s[0]:s[1];d(),o.addClass(a).css("transition","none"),requestAnimationFrame(function(){o.addClass(h),i&&o.show()}),requestAnimationFrame(function(){o[0].offsetWidth,o.css("transition",""),o.addClass(u)}),o.one(e.transitionend(o),l)}}var n=["mui-enter","mui-leave"],s=["mui-enter-active","mui-leave-active"],o={animateIn:function(t,e,n){i(!0,t,e,n)},animateOut:function(t,e,n){i(!1,t,e,n)}},a=function(t,e,i){function n(r){a||(a=window.performance.now()),o=r-a,i.apply(e),t>o?s=window.requestAnimationFrame(n,e):(window.cancelAnimationFrame(s),e.trigger("finished.zf.animate",[e]).triggerHandler("finished.zf.animate",[e]))}var s,o,a=null;s=window.requestAnimationFrame(n)};e.Move=a,e.Motion=o}(jQuery,Foundation),!function(t,e){"use strict";e.Nest={Feather:function(e,i){e.attr("role","menubar"),i=i||"zf";var n=e.find("li").attr({role:"menuitem"}),s="is-"+i+"-submenu",o=s+"-item",a="is-"+i+"-submenu-parent";n.each(function(){var e=t(this),i=e.children("ul");i.length&&(e.addClass("has-submenu "+a),i.addClass("submenu "+s).attr("data-submenu","")),e.parent("[data-submenu]").length&&e.addClass("is-submenu-item "+o)})},Burn:function(t,e){var i=(t.find("li").removeAttr("tabindex"),"is-"+e+"-submenu"),n=i+"-item",s="is-"+e+"-submenu-parent";t.find("*").removeClass(i+" "+n+" "+s+" has-submenu is-submenu-item submenu is-active").removeAttr("data-submenu").css("display","")}}}(jQuery,window.Foundation),!function(t,e){"use strict";var i=function(t,e,i){var n,s,o=this,a=e.duration,r=Object.keys(t.data())[0]||"timer",l=-1;this.restart=function(){l=-1,clearTimeout(s),this.start()},this.start=function(){clearTimeout(s),l=0>=l?a:l,t.data("paused",!1),n=Date.now(),s=setTimeout(function(){e.infinite&&o.restart(),i()},l),t.trigger("timerstart.zf."+r)},this.pause=function(){clearTimeout(s),t.data("paused",!0);var e=Date.now();l-=e-n,t.trigger("timerpaused.zf."+r)}},n=function(e,i){var n=e.length;0===n&&i();var s=function(){n--,0===n&&i()};e.each(function(){this.complete?s():"undefined"!=typeof this.naturalWidth&&this.naturalWidth>0?s():t(this).one("load",function(){s()})})};e.Timer=i,e.onImagesLoaded=n}(jQuery,window.Foundation),function(t){function e(){this.removeEventListener("touchmove",i),this.removeEventListener("touchend",e),d=!1}function i(i){if(t.spotSwipe.preventDefault&&i.preventDefault(),d){var n,s=i.touches[0].pageX,h=i.touches[0].pageY,u=o-s,c=a-h;l=(new Date).getTime()-r,Math.abs(u)>=t.spotSwipe.moveThreshold&&l<=t.spotSwipe.timeThreshold?n=u>0?"left":"right":Math.abs(c)>=t.spotSwipe.moveThreshold&&l<=t.spotSwipe.timeThreshold&&(n=c>0?"down":"up"),n&&(e.call(this),t(this).trigger("swipe",n).trigger("swipe"+n))}}function n(t){1==t.touches.length&&(o=t.touches[0].pageX,a=t.touches[0].pageY,d=!0,r=(new Date).getTime(),this.addEventListener("touchmove",i,!1),this.addEventListener("touchend",e,!1))}function s(){this.addEventListener&&this.addEventListener("touchstart",n,!1)}t.spotSwipe={version:"1.0.0",enabled:"ontouchstart"in document.documentElement,preventDefault:!0,moveThreshold:75,timeThreshold:200};var o,a,r,l,d=!1;t.event.special.swipe={setup:s},t.each(["left","up","down","right"],function(){t.event.special["swipe"+this]={setup:function(){t(this).on("swipe",t.noop)}}})}(jQuery),!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=t.changedTouches,i=e[0],n={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"},s=n[t.type],o=document.createEvent("MouseEvent");o.initMouseEvent(s,!0,!0,window,1,i.screenX,i.screenY,i.clientX,i.clientY,!1,!1,!1,!1,0,null),i.target.dispatchEvent(o)}}}(jQuery),!function(t,e){"use strict";e(document).on("click.zf.trigger","[data-open]",function(){var t=e(this).data("open");e("#"+t).triggerHandler("open.zf.trigger",[e(this)])}),e(document).on("click.zf.trigger","[data-close]",function(){var t=e(this).data("close");t?e("#"+t).triggerHandler("close.zf.trigger",[e(this)]):e(this).trigger("close.zf.trigger")}),e(document).on("click.zf.trigger","[data-toggle]",function(){var t=e(this).data("toggle");e("#"+t).triggerHandler("toggle.zf.trigger",[e(this)])}),e(document).on("close.zf.trigger","[data-closable]",function(){var i=e(this).data("closable")||"fade-out";t.Motion?t.Motion.animateOut(e(this),i,function(){e(this).trigger("closed.zf")}):e(this).fadeOut().trigger("closed.zf")});var i=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}(),n=function(){r(),o(),a(),s()};e(window).load(function(){n()});var s=function(t){var i=e("[data-yeti-box]"),n=["dropdown","tooltip","reveal"];if(t&&("string"==typeof t?n.push(t):"object"==typeof t&&"string"==typeof t[0]?n.concat(t):console.error("Plugin names must be strings")),i.length){var s=n.map(function(t){return"closeme.zf."+t}).join(" ");e(window).off(s).on(s,function(t,i){var n=t.namespace.split(".")[0],s=e("[data-"+n+"]").not('[data-yeti-box="'+i+'"]');s.each(function(){var t=e(this);t.triggerHandler("close.zf.trigger",[t])})})}},o=function(t){var n,s=e("[data-resize]");s.length&&e(window).off("resize.zf.trigger").on("resize.zf.trigger",function(o){n&&clearTimeout(n),n=setTimeout(function(){i||s.each(function(){e(this).triggerHandler("resizeme.zf.trigger")}),s.attr("data-events","resize")},t||10)})},a=function(t){var n,s=e("[data-scroll]");s.length&&e(window).off("scroll.zf.trigger").on("scroll.zf.trigger",function(o){n&&clearTimeout(n),n=setTimeout(function(){i||s.each(function(){e(this).triggerHandler("scrollme.zf.trigger")}),s.attr("data-events","scroll")},t||10)})},r=function(){if(!i)return!1;var t=document.querySelectorAll("[data-resize], [data-scroll], [data-mutate]"),n=function(t){var i=e(t[0].target);switch(i.attr("data-events")){case"resize":i.triggerHandler("resizeme.zf.trigger",[i]);break;case"scroll":i.triggerHandler("scrollme.zf.trigger",[i,window.pageYOffset]);break;default:return!1}};if(t.length)for(var s=0;s<=t.length-1;s++){var o=new i(n);o.observe(t[s],{attributes:!0,childList:!1,characterData:!1,subtree:!1,attributeFilter:["data-events"]})}};t.IHearYou=n}(window.Foundation,window.jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,this.$element.data(),s),this.$window=e(window),this.name="Abide",this.attr="data-abide",this._init(),this._events(),t.registerPlugin(this)}i.defaults={validateOn:"fieldChange",labelErrorClass:"is-invalid-label",inputErrorClass:"is-invalid-input",formErrorSelector:".form-error",formErrorClass:"is-visible",patterns:{alpha:/^[a-zA-Z]+$/,alpha_numeric:/^[a-zA-Z0-9]+$/,integer:/^[-+]?\d+$/,number:/^[-+]?\d*(?:[\.\,]\d+)?$/,card:/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,cvv:/^([0-9]){3,4}$/,email:/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,url:/^(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,domain:/^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,datetime:/^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,date:/(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,time:/^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,dateISO:/^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,month_day_year:/^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,day_month_year:/^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,color:/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/},validators:{equalTo:function(t,e,i){var n=document.getElementById(t.getAttribute(this.add_namespace("data-equalto"))).value,s=t.value,o=n===s;return o}}},i.prototype._init=function(){},i.prototype._events=function(){var t=this;this.$element.off(".abide").on("reset.fndtn.abide",function(i){t.resetForm(e(this))}).on("submit.fndtn.abide",function(e){e.preventDefault(),t.validateForm(t.$element)}).find("input, textarea, select").off(".abide").on("blur.fndtn.abide change.fndtn.abide",function(i){"fieldChange"===t.options.validateOn&&t.validateInput(e(i.target),t.$element)}).on("keydown.fndtn.abide",function(t){})},i.prototype._reflow=function(){},i.prototype.requiredCheck=function(t){switch(t[0].type){case"text":return t.attr("required")&&!t.val()?!1:!0;case"checkbox":return t.attr("required")&&!t.is(":checked")?!1:!0;case"radio":return t.attr("required")&&!t.is(":checked")?!1:!0;default:return!t.attr("required")||t.val()&&t.val().length&&!t.is(":empty")?!0:!1}},i.prototype.findLabel=function(t){return t.next("label").length?t.next("label"):t.closest("label")},i.prototype.addErrorClasses=function(t){var e=this,i=e.findLabel(t),n=t.next(e.options.formErrorSelector)||t.find(e.options.formErrorSelector);i&&i.addClass(e.options.labelErrorClass),n&&n.addClass(e.options.formErrorClass),t.addClass(e.options.inputErrorClass)},i.prototype.removeErrorClasses=function(t){var e=this,i=e.findLabel(t),n=t.next(e.options.formErrorSelector)||t.find(e.options.formErrorSelector);i&&i.hasClass(e.options.labelErrorClass)&&i.removeClass(e.options.labelErrorClass),n&&n.hasClass(e.options.formErrorClass)&&n.removeClass(e.options.formErrorClass),t.hasClass(e.options.inputErrorClass)&&t.removeClass(e.options.inputErrorClass)},i.prototype.validateInput=function(t,i){var n,s,o=this;i.find('input[type="text"]'),i.find('input[type="checkbox"]');"text"===t[0].type?o.requiredCheck(t)&&o.validateText(t)?(o.removeErrorClasses(t),t.trigger("valid.fndtn.abide",t[0])):(o.addErrorClasses(t),t.trigger("invalid.fndtn.abide",t[0])):"radio"===t[0].type?(s=t.attr("name"),n=t.siblings("label"),o.validateRadio(s)?(e(n).each(function(){e(this).hasClass(o.options.labelErrorClass)&&e(this).removeClass(o.options.labelErrorClass)}),t.trigger("valid.fndtn.abide",t[0])):(e(n).each(function(){e(this).addClass(o.options.labelErrorClass)}),t.trigger("invalid.fndtn.abide",t[0]))):"checkbox"===t[0].type?o.requiredCheck(t)?(o.removeErrorClasses(t),t.trigger("valid.fndtn.abide",t[0])):(o.addErrorClasses(t),t.trigger("invalid.fndtn.abide",t[0])):o.requiredCheck(t)&&o.validateText(t)?(o.removeErrorClasses(t),t.trigger("valid.fndtn.abide",t[0])):(o.addErrorClasses(t),t.trigger("invalid.fndtn.abide",t[0]))},i.prototype.validateForm=function(t){for(var i=this,n=t.find("input"),s=t.find("input").length,o=0;s>o;)i.validateInput(e(n[o]),t),o++;t.find(".form-error.is-visible").length||t.find(".is-invalid-label").length?t.find("[data-abide-error]").css("display","block"):t.find("[data-abide-error]").css("display","none")},i.prototype.validateText=function(t){var i=this.options.patterns,n=e(t).val(),s=e(t).attr("pattern");return 0===n.length?!0:n.match(i[s])?!0:!1},i.prototype.validateRadio=function(t){var i=this,n=(e(':radio[name="'+t+'"]').siblings("label"),0);return e(':radio[name="'+t+'"]').each(function(){i.requiredCheck(e(this))||n++,e(this).is(":checked")&&(n=0)}),n>0?!1:!0},i.prototype.matchValidation=function(t,e){},i.prototype.resetForm=function(t){var i=this,n="data-invalid";e("["+i.invalidAttr+"]",t).removeAttr(n),e("."+i.options.labelErrorClass,t).not("small").removeClass(i.options.labelErrorClass),e("."+i.options.inputErrorClass,t).not("small").removeClass(i.options.inputErrorClass),e(".form-error.is-visible").removeClass("is-visible"),t.find("[data-abide-error]").css("display","none"),e(":input",t).not(":button, :submit, :reset, :hidden, [data-abide-ignore]").val("").removeAttr(n)},i.prototype.destroy=function(){},t.plugin(i,"Abide"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this),e.Keyboard.register("Accordion",{ENTER:"toggle",SPACE:"toggle",ARROW_DOWN:"next",ARROW_UP:"previous"})}i.defaults={slideSpeed:250,multiExpand:!1,allowAllClosed:!1},i.prototype._init=function(){this.$element.attr("role","tablist"),this.$tabs=this.$element.children("li"),this.$tabs.each(function(i,n){var s=t(n),o=s.find("[data-tab-content]"),a=o[0].id||e.GetYoDigits(6,"accordion"),r=n.id||a+"-label";s.find("a:first").attr({"aria-controls":a,role:"tab",id:r,"aria-expanded":!1,"aria-selected":!1}),o.attr({role:"tabpanel","aria-labelledby":r,"aria-hidden":!0,id:a})});var i=this.$element.find(".is-active").children("[data-tab-content]");i.length&&this.down(i,!0),this._events()},i.prototype._events=function(){var i=this;this.$tabs.each(function(){var n=t(this),s=n.children("[data-tab-content]");s.length&&n.children("a").off("click.zf.accordion keydown.zf.accordion").on("click.zf.accordion",function(t){t.preventDefault(),n.hasClass("is-active")?(i.options.allowAllClosed||n.siblings().hasClass("is-active"))&&i.up(s):i.down(s)}).on("keydown.zf.accordion",function(t){e.Keyboard.handleKey(t,i,{toggle:function(){i.toggle(s)},next:function(){n.next().find("a").focus().trigger("click.zf.accordion")},previous:function(){n.prev().find("a").focus().trigger("click.zf.accordion")},handled:function(){t.preventDefault(),t.stopPropagation()}})})})},i.prototype.toggle=function(t){if(t.parent().hasClass("is-active")){if(!this.options.allowAllClosed&&!t.parent().siblings().hasClass("is-active"))return;this.up(t)}else this.down(t)},i.prototype.down=function(i,n){var s=this;if(!this.options.multiExpand&&!n){var o=this.$element.find(".is-active").children("[data-tab-content]");o.length&&this.up(o)}i.attr("aria-hidden",!1).parent("[data-tab-content]").addBack().parent().addClass("is-active"),e.Move(s.options.slideSpeed,i,function(){i.slideDown(s.options.slideSpeed)}),n||e._reflow(this.$element.attr("data-accordion")),t("#"+i.attr("aria-labelledby")).attr({"aria-expanded":!0,"aria-selected":!0}),this.$element.trigger("down.zf.accordion",[i])},i.prototype.up=function(i){var n=i.parent().siblings(),s=this,o=this.options.multiExpand?n.hasClass("is-active"):i.parent().hasClass("is-active");(this.options.allowAllClosed||o)&&(e.Move(this.options.slideSpeed,i,function(){i.slideUp(s.options.slideSpeed)}),i.attr("aria-hidden",!0).parent().removeClass("is-active"),t("#"+i.attr("aria-labelledby")).attr({"aria-expanded":!1,"aria-selected":!1}),this.$element.trigger("up.zf.accordion",[i]))},i.prototype.destroy=function(){this.$element.find("[data-tab-content]").slideUp(0).css("display",""),this.$element.find("a").off(".zf.accordion"),e.unregisterPlugin(this)},e.plugin(i,"Accordion")}(jQuery,window.Foundation),!function(t){"use strict";function e(i,n){this.$element=i,this.options=t.extend({},e.defaults,this.$element.data(),n),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"})}e.defaults={slideSpeed:250,multiOpen:!0},e.prototype._init=function(){this.$element.find("[data-submenu]").not(".is-active").slideUp(0),this.$element.attr({role:"tablist","aria-multiselectable":this.options.multiOpen}),this.$menuLinks=this.$element.find(".has-submenu"),this.$menuLinks.each(function(){var e=this.id||Foundation.GetYoDigits(6,"acc-menu-link"),i=t(this),n=i.children("[data-submenu]"),s=n[0].id||Foundation.GetYoDigits(6,"acc-menu"),o=n.hasClass("is-active");i.attr({"aria-controls":s,"aria-expanded":o,"aria-selected":!1,role:"tab",id:e}),n.attr({"aria-labelledby":e,"aria-hidden":!o,role:"tabpanel",id:s})});var e=this.$element.find(".is-active");if(e.length){var i=this;e.each(function(){i.down(t(this))})}this._events()},e.prototype._events=function(){var e=this;this.$element.find("li").each(function(){var i=t(this).children("[data-submenu]");i.length&&t(this).children("a").off("click.zf.accordionmenu").on("click.zf.accordionmenu",function(t){t.preventDefault(),e.toggle(i)})}).on("keydown.zf.accordionmenu",function(i){var n,s,o=t(this),a=o.parent("ul").children("li"),r=o.children("[data-submenu]");a.each(function(e){return t(this).is(o)?(n=a.eq(Math.max(0,e-1)),s=a.eq(Math.min(e+1,a.length-1)),t(this).children("[data-submenu]:visible").length&&(s=o.find("li:first-child")),t(this).is(":first-child")?n=o.parents("li").first():n.children("[data-submenu]:visible").length&&(n=n.find("li:last-child")),void(t(this).is(":last-child")&&(s=o.parents("li").first().next("li")))):void 0}),Foundation.Keyboard.handleKey(i,e,{open:function(){r.is(":hidden")&&(e.down(r),r.find("li").first().focus())},close:function(){r.length&&!r.is(":hidden")?e.up(r):o.parent("[data-submenu]").length&&(e.up(o.parent("[data-submenu]")),o.parents("li").first().focus())},up:function(){n.focus()},down:function(){s.focus()},toggle:function(){o.children("[data-submenu]").length&&e.toggle(o.children("[data-submenu]"))},closeAll:function(){e.hideAll()},handled:function(){i.preventDefault(),i.stopImmediatePropagation()}})})},e.prototype.hideAll=function(){this.$element.find("[data-submenu]").slideUp(this.options.slideSpeed)},e.prototype.toggle=function(t){t.is(":hidden")?this.down(t):this.up(t)},e.prototype.down=function(t){var e=this;console.log(t),this.options.multiOpen||this.up(this.$element.find(".is-active").not(t.parentsUntil(this.$element))),t.addClass("is-active").attr({"aria-hidden":!1}).parent(".has-submenu").attr({"aria-expanded":!0,"aria-selected":!0}),Foundation.Move(this.options.slideSpeed,t,function(){t.slideDown(e.options.slideSpeed)}),this.$element.trigger("down.zf.accordionMenu",[t])},e.prototype.up=function(t){var e=this;Foundation.Move(this.options.slideSpeed,t,function(){t.slideUp(e.options.slideSpeed)}),t.attr("aria-hidden",!0).find("[data-submenu]").slideUp(0).attr("aria-hidden",!0).end().parent(".has-submenu").attr({"aria-expanded":!1,"aria-selected":!1}),this.$element.trigger("up.zf.accordionMenu",[t])},e.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(e,"AccordionMenu")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),e.Nest.Feather(this.$element,"drilldown"),this._init(),e.registerPlugin(this),e.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"})}i.defaults={backButton:'<li class="js-drilldown-back" tabindex="0"><a>Back</a></li>',wrapper:"<div></div>",closeOnClick:!1},i.prototype._init=function(){this.$submenuAnchors=this.$element.find("li.has-submenu"),this.$submenus=this.$submenuAnchors.children("[data-submenu]").addClass("is-drilldown-sub"),this.$menuItems=this.$element.find("li").not(".js-drilldown-back").attr("role","menuitem"),this._prepareMenu(),this._keyboardEvents()},i.prototype._prepareMenu=function(){var e=this;this.$submenuAnchors.each(function(){var i=t(this);i.find("a")[0].removeAttribute("href"),i.children("[data-submenu]").attr({"aria-hidden":!0,tabindex:0,role:"menu"}),e._events(i)}),this.$submenus.each(function(){var i=t(this),n=i.find(".js-drilldown-back");n.length||(i.prepend(e.options.backButton),e._back(i))}),this.$element.parent().hasClass("is-drilldown")||(this.$wrapper=t(this.options.wrapper).addClass("is-drilldown").css(this._getMaxDims()),this.$element.wrap(this.$wrapper))},i.prototype._events=function(e){var i=this;e.off("click.zf.drilldown").on("click.zf.drilldown",function(n){if(n.stopImmediatePropagation(),n.preventDefault(),n.target!==n.currentTarget.firstElementChild)return!1;if(i._show(e),i.options.closeOnClick){var s=t("body").not(i.$wrapper);s.off(".zf.drilldown").on("click.zf.drilldown",function(t){t.preventDefault(),i._hideAll(),s.off(".zf.drilldown")})}})},i.prototype._keyboardEvents=function(){var i=this;this.$menuItems.add(this.$element.find(".js-drilldown-back")).on("keydown.zf.drilldown",function(n){var s,o,a=t(this),r=a.parent("ul").children("li");r.each(function(e){return t(this).is(a)?(s=r.eq(Math.max(0,e-1)),void(o=r.eq(Math.min(e+1,r.length-1)))):void 0}),e.Keyboard.handleKey(n,i,{next:function(){a.is(i.$submenuAnchors)&&(i._show(a),a.on(e.transitionend(a),function(){a.find("ul li").filter(i.$menuItems).first().focus()}))},previous:function(){i._hide(a.parent("ul")),a.parent("ul").on(e.transitionend(a),function(){setTimeout(function(){a.parent("ul").parent("li").focus()},1)})},up:function(){s.focus()},down:function(){o.focus()},close:function(){i._back()},open:function(){a.is(i.$menuItems)?a.is(i.$submenuAnchors)&&(i._show(a),setTimeout(function(){a.find("ul li").filter(i.$menuItems).first().focus()},1)):(i._hide(a.parent("ul")),setTimeout(function(){a.parent("ul").parent("li").focus()},1))},handled:function(){n.preventDefault(),n.stopImmediatePropagation()}})})},i.prototype._hideAll=function(){var t=this.$element.find(".is-drilldown-sub.is-active").addClass("is-closing");t.one(e.transitionend(t),function(e){t.removeClass("is-active is-closing")}),this.$element.trigger("closed.zf.drilldown")},i.prototype._back=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)})},i.prototype._menuLinkEvents=function(){var t=this;this.$menuItems.not(".has-submenu").off("click.zf.drilldown").on("click.zf.drilldown",function(e){setTimeout(function(){t._hideAll()},0)})},i.prototype._show=function(t){t.children("[data-submenu]").addClass("is-active"),this.$element.trigger("open.zf.drilldown",[t])},i.prototype._hide=function(t){t.addClass("is-closing").one(e.transitionend(t),function(){t.removeClass("is-active is-closing")}),t.trigger("hide.zf.drilldown",[t])},i.prototype._getMaxDims=function(){var e=0,i={};return this.$submenus.add(this.$element).each(function(){var i=t(this).children("li").length;e=i>e?i:e}),i.height=e*this.$menuItems[0].getBoundingClientRect().height+"px",i.width=this.$element[0].getBoundingClientRect().width+"px",i},i.prototype.destroy=function(){this._hideAll(),e.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"),e.unregisterPlugin(this)},e.plugin(i,"Drilldown")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this),e.Keyboard.register("Dropdown",{ENTER:"open",SPACE:"open",ESCAPE:"close",TAB:"tab_forward",SHIFT_TAB:"tab_backward"})}i.defaults={hoverDelay:250,hover:!1,vOffset:1,hOffset:1,positionClass:"",trapFocus:!1},i.prototype._init=function(){var i=this.$element.attr("id");this.$anchor=t('[data-toggle="'+i+'"]')||t('[data-open="'+i+'"]'),this.$anchor.attr({"aria-controls":i,"data-is-focus":!1,"data-yeti-box":i,"aria-haspopup":!0,"aria-expanded":!1}),this.options.positionClass=this.getPositionClass(),this.counter=4,this.usedPositions=[],this.$element.attr({"aria-hidden":"true","data-yeti-box":i,"data-resize":i,"aria-labelledby":this.$anchor[0].id||e.GetYoDigits(6,"dd-anchor")}),this._events()},i.prototype.getPositionClass=function(){var t=this.$element[0].className.match(/(top|left|right)/g);return t=t?t[0]:""},i.prototype._reposition=function(t){this.usedPositions.push(t?t:"bottom"),!t&&this.usedPositions.indexOf("top")<0?this.$element.addClass("top"):"top"===t&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(t):"left"===t&&this.usedPositions.indexOf("right")<0?this.$element.removeClass(t).addClass("right"):"right"===t&&this.usedPositions.indexOf("left")<0?this.$element.removeClass(t).addClass("left"):!t&&this.usedPositions.indexOf("top")>-1&&this.usedPositions.indexOf("left")<0?this.$element.addClass("left"):"top"===t&&this.usedPositions.indexOf("bottom")>-1&&this.usedPositions.indexOf("left")<0?this.$element.removeClass(t).addClass("left"):"left"===t&&this.usedPositions.indexOf("right")>-1&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(t):"right"===t&&this.usedPositions.indexOf("left")>-1&&this.usedPositions.indexOf("bottom")<0?this.$element.removeClass(t):this.$element.removeClass(t),this.classChanged=!0,this.counter--},i.prototype._setPosition=function(){if("false"===this.$anchor.attr("aria-expanded"))return!1;var t=this.getPositionClass(),i=e.Box.GetDimensions(this.$element),n=(e.Box.GetDimensions(this.$anchor),"left"===t?"left":"right"===t?"left":"top"),s="top"===n?"height":"width";"height"===s?this.options.vOffset:this.options.hOffset;if(i.width>=i.windowDims.width||!this.counter&&!e.Box.ImNotTouchingYou(this.$element))return this.$element.offset(e.Box.GetOffsets(this.$element,this.$anchor,"center bottom",this.options.vOffset,this.options.hOffset,!0)).css({width:i.windowDims.width-2*this.options.hOffset,height:"auto"}),this.classChanged=!0,!1;for(this.$element.offset(e.Box.GetOffsets(this.$element,this.$anchor,t,this.options.vOffset,this.options.hOffset));!e.Box.ImNotTouchingYou(this.$element)&&this.counter;)this._reposition(t),this._setPosition()},i.prototype._events=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.options.hover&&this.$anchor.off("mouseenter.zf.dropdown mouseleave.zf.dropdown").on("mouseenter.zf.dropdown",function(){console.log("hover"),clearTimeout(t.timeout),t.timeOut=setTimeout(function(){t.open(),t.$anchor.data("hover",!0)},t.options.hoverDelay)}).on("mouseleave.zf.dropdown",function(){clearTimeout(t.timeout),t.timeOut=setTimeout(function(){t.close(),t.$anchor.data("hover",!1)},t.options.hoverDelay)}),this.$anchor.add(this.$element).on("keydown.zf.dropdown",function(i){var n=e.Keyboard.findFocusable(t.$element);e.Keyboard.handleKey(i,t,{tab_forward:function(){this.$element.find(":focus").is(n.eq(-1))&&(this.options.trapFocus?(n.eq(0).focus(),i.preventDefault()):this.close())},tab_backward:function(){(this.$element.find(":focus").is(n.eq(0))||this.$element.is(":focus"))&&(this.options.trapFocus?(n.eq(-1).focus(),i.preventDefault()):this.close())},open:function(){t.open(),t.$element.attr("tabindex",-1).focus()},close:function(){t.close(),t.$anchor.focus()}})})},i.prototype.open=function(){this.$element.trigger("closeme.zf.dropdown",this.$element.attr("id")),this.$anchor.addClass("hover").attr({"aria-expanded":!0}),this._setPosition(),this.$element.addClass("is-open").attr({"aria-hidden":!1}),this.$element.trigger("show.zf.dropdown",[this.$element])},i.prototype.close=function(){if(!this.$element.hasClass("is-open"))return!1;if(this.$element.removeClass("is-open").attr({"aria-hidden":!0}),this.$anchor.removeClass("hover").attr("aria-expanded",!1),this.classChanged){var t=this.getPositionClass();t&&this.$element.removeClass(t),this.$element.addClass(this.options.positionClass).css({height:"",width:""}),this.classChanged=!1,this.counter=4,this.usedPositions.length=0}this.$element.trigger("hide.zf.dropdown",[this.$element])},i.prototype.toggle=function(){if(this.$element.hasClass("is-open")){if(this.$anchor.data("hover"))return;this.close()}else this.open()},i.prototype.destroy=function(){this.$element.off(".zf.trigger").hide(),this.$anchor.off(".zf.dropdown"),e.unregisterPlugin(this)},e.plugin(i,"Dropdown")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,this.$element.data(),s),t.Nest.Feather(this.$element,"dropdown"),this._init(),t.registerPlugin(this),t.Keyboard.register("DropdownMenu",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"up",ARROW_DOWN:"down",ARROW_LEFT:"previous",ESCAPE:"close"})}i.defaults={clickOpen:!0,closeOnClick:!1,disableHover:!1,autoclose:!0,hoverDelay:150,closingTime:500,alignment:"left",verticalClass:"vertical",rightClass:"align-right"},i.prototype._init=function(){this.$element.hasClass(this.options.verticalClass)&&(this.vertical=!0),this._prepareMenu()},i.prototype._prepareMenu=function(){var t=this;this.$tabs=this.$element.children("li.has-submenu"),this.$tabs.children("[data-submenu]").addClass("first-sub"),this.$submenus=this.$element.find("li.has-submenu"),this.$menuItems=this.$element.find("li").attr({role:"menuitem",tabindex:0}),this.$menuItems.children("a").attr("tabindex",-1),this.$element.hasClass(this.options.rightClass)?(this.options.alignment="right",this.$submenus.addClass("is-left-arrow opens-left")):this.$submenus.addClass("is-right-arrow opens-right"),this.vertical||this.$tabs.removeClass("is-right-arrow is-left-arrow opens-left opens-right").addClass("is-down-arrow"),this.$tabs.each(function(){var t=e(this);t.attr({role:"menuitem",tabindex:0,"aria-label":t.children("a:first-child").text()}).children("a").attr("tabindex",-1),t.children("[data-submenu]")&&t.attr("aria-haspopup",!0)}),this.$submenus.each(function(){var i=e(this);i.children("[data-submenu]").attr({"aria-hidden":!0,tabindex:-1,role:"menu"}).addClass("vertical"),t._events(i)})},i.prototype._events=function(i){var n=this,s=void 0!==window.ontouchstart;(this.options.clickOpen||s)&&i.off("click.zf.dropdownmenu").on("click.zf.dropdownmenu",function(t){if(e(this).hasClass("is-dropdown-submenu-parent")){var o=i.data("isClick");s&&o||(t.preventDefault(),t.stopPropagation(),o?n._hide(i):(n._hideOthers(i),n._show(i),i.data("isClick",!0).parentsUntil("[data-dropdown-menu]",".is-dropdown-submenu-parent").data("isClick",!0),n.options.closeOnClick&&n._addBodyHandler()))}}),this.options.disableHover||(this.$menuItems.on("mouseenter.zf.dropdownmenu",function(t){var i=e(this);i.hasClass("is-active")||n._hideOthers(i)}),i.off("mouseenter.zf.dropdownmenu").on("mouseenter.zf.dropdownmenu",function(t){clearTimeout(i.closeTimer),i.hasClass("is-active")||(i.openTimer=setTimeout(function(){n._show(i)},n.options.hoverDelay))}).on("mouseleave.zf.dropdownmenu",function(t){!i.data("isClick")&&n.options.autoclose&&(clearTimeout(i.openTimer),i.closeTimer=setTimeout(function(){n._hide(i)},n.options.closingTime))})),this.$menuItems.on("keydown.zf.dropdownmenu",function(i){var s,o,a=e(this),r=n.$element.children("li"),l=a.is(r),d=l?r:a.parents("li").first().add(a.parent("ul").children("li"));d.each(function(t){return e(this).is(a)?(s=d.eq(t-1),void(o=d.eq(t+1))):void 0});var h=function(){a.is(":last-child")||o.focus()},u=function(){s.focus()},c=function(){a.has("ul").length&&(n._show(a),a.find("li").first().focus())},f=function(){a.parents("li").first().focus(),n._hide(a.parents("li").first())},p={open:c,close:function(){n._hideAll(),n.$menuItems.first().focus()},handled:function(){i.preventDefault(),i.stopImmediatePropagation()}};l?n.vertical?"left"===n.options.alignment?e.extend(p,{down:h,up:u,next:c,previous:f}):e.extend(p,{down:h,up:u,next:f,previous:c}):e.extend(p,{next:h,previous:u,down:c,up:f}):"left"===n.options.alignment?e.extend(p,{next:c,previous:f,down:h,up:u}):e.extend(p,{next:f,previous:c,down:h,up:u}),t.Keyboard.handleKey(i,n,p)})},i.prototype._toggle=function(t){t.hasClass("is-active")?this._hide(t):this._show(t)},i.prototype._addBodyHandler=function(){var t=e("body"),i=this;t.not(i.$element).on("click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu",function(e){i._hideAll(),t.off("click.zf.dropdownmenu tap.zf.dropdownmenu touchend.zf.dropdownmenu")})},i.prototype._show=function(e){this._hideOthers(e),e.focus();var i=e.children("[data-submenu]:first-of-type");e.addClass("is-active"),i.css("visibility","hidden").addClass("js-dropdown-active").attr("aria-hidden",!1);var n=t.Box.ImNotTouchingYou(i,null,!0);n||("left"===this.options.alignment?e.removeClass("opens-left").addClass("opens-right"):e.removeClass("opens-right").addClass("opens-left"),this.changed=!0,n=t.Box.ImNotTouchingYou(i,null,!0),n||(e.removeClass("opens-left opens-right").addClass("opens-inner"),this.changed=!0)),i.css("visibility",""),this.$element.trigger("show.zf.dropdownmenu",[e])},i.prototype._hide=function(t){this._hideSome(t)},i.prototype._hideSome=function(t){t.length&&(t.removeClass("is-active opens-inner").data("isClick",!1).find(".is-active").removeClass("is-active").data("isClick",!1).end().find(".js-dropdown-active").removeClass("js-dropdown-active").attr("aria-hidden",!0),t.parent(".has-submenu").removeClass("is-active"),this.changed&&("left"===this.options.alignment?t.find(".opens-left").removeClass("opens-left").addClass("opens-right"):t.find(".opens-right").removeClass("opens-right").addClass("opens-left")),this.$element.trigger("hide.zf.dropdownmenu"))},i.prototype._hideOthers=function(t){this._hideSome(t.siblings(".has-submenu.is-active"))},i.prototype._hideAll=function(){this._hideSome(this.$element)},i.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"),t.Nest.Burn(this.$element,"dropdown"),t.unregisterPlugin(this)},t.plugin(i,"DropdownMenu")}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,this.$element.data(),s),this.$window=e(window),this.name="equalizer",this.attr="data-equalizer",this._init(),this._events(),t.registerPlugin(this)}i.defaults={equalizeOnStack:!0,throttleInterval:50},i.prototype._init=function(){this._reflow()},i.prototype._events=function(){var e=this;this.$window.off(".equalizer").on("resize.fndtn.equalizer",t.util.throttle(function(){e._reflow()},e.options.throttleInterval))},i.prototype._killswitch=function(){},i.prototype._reflow=function(){var i=this;e("["+this.attr+"]").each(function(){var n=e(this),s=[],o=n.find("img");o.length?t.onImagesLoaded(o,function(){s=i.getHeights(n),i.applyHeight(n,s)}):(s=i.getHeights(n),i.applyHeight(n,s))})},i.prototype.getHeights=function(t){var i,n=t.data("equalizer"),s=n?t.find("["+this.attr+'-watch="'+n+'"]:visible'):t.find("["+this.attr+"-watch]:visible");return s.height("inherit"),i=s.map(function(){return e(this).outerHeight(!1)}).get(),console.log(i),i},i.prototype.applyHeight=function(t,i){var n=t.data("equalizer"),s=n?t.find("["+this.attr+'-watch="'+n+'"]:visible'):t.find("["+this.attr+"-watch]:visible"),o=Math.max.apply(null,i);t.trigger("preEqualized.zf.Equalizer");for(var a=0;a<s.length;a++)e(s[a]).css("height",o);t.trigger("postEqualized.zf.Equalizer")},i.prototype.destroy=function(){},t.plugin(i,"Equalizer"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,s),this.rules=[],this.currentPath="",this._init(),this._events(),t.registerPlugin(this)}i.defaults={rules:null},i.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)"},i.prototype._init=function(){this._addBreakpoints(),this._generateRules(),this._reflow()},i.prototype._events=function(){e(window).on("resize.fndtn.interchange",t.util.throttle(this._reflow.bind(this),50))},i.prototype._reflow=function(){var t;for(var e in this.rules){var i=this.rules[e];window.matchMedia(i.query).matches&&(t=i)}t&&this.replace(t.path)},i.prototype._addBreakpoints=function(){for(var e in t.MediaQuery.queries){var n=t.MediaQuery.queries[e];i.SPECIAL_QUERIES[n.name]=n.value}},i.prototype._generateRules=function(){var t,e=[];t=this.options.rules?this.options.rules:this.$element.data("interchange").match(/\[.*?\]/g);for(var n in t){var s=t[n].slice(1,-1).split(", "),o=s.slice(0,-1).join(""),a=s[s.length-1];i.SPECIAL_QUERIES[a]&&(a=i.SPECIAL_QUERIES[a]),e.push({path:o,query:a})}this.rules=e},i.prototype.replace=function(t){if(this.currentPath!==t){var i=this;"IMG"===this.$element[0].nodeName?this.$element.attr("src",t).load(function(){i.$element.trigger("replaced.zf.interchange"),i.currentPath=t}):t.match(/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i)?this.$element.css({"background-image":"url("+t+")"}):e.get(t,function(e){i.$element.html(e),i.$element.trigger("replaced.zf.interchange"),i.currentPath=t})}},i.prototype.destroy=function(){},t.plugin(i,"Interchange"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,s),this._init(),t.registerPlugin(this)}i.defaults={animationDuration:500,animationEasing:"linear",threshold:50,activeClass:"active",deepLinking:!1},i.prototype._init=function(){var i=this.$element[0].id||t.GetYoDigits(6,"magellan");this.$targets=e("[data-magellan-target]"),this.$links=this.$element.find("a"),this.$element.attr({"data-resize":i,"data-scroll":i,id:i}),this.$active=e(),this.scrollPos=parseInt(window.pageYOffset,10),this._events()},i.prototype.calcPoints=function(){var t=this,i=document.body,n=document.documentElement;this.points=[],this.winHeight=Math.round(Math.max(window.innerHeight,document.body.clientHeight)),this.docHeight=Math.round(Math.max(i.scrollHeight,i.offsetHeight,n.clientHeight,n.scrollHeight,n.offsetHeight)),this.$targets.each(function(){var i=e(this),n=Math.round(i.offset().top-t.options.threshold);i.targetPoint=n,t.points.push(n)})},i.prototype._events=function(){var t=this,i=e("html, body"),n={duration:t.options.animationDuration,easing:t.options.animationEasing};e(window).one("load",function(){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(s){s.preventDefault();var o=this.getAttribute("href"),a=e(o).offset().top-t.options.threshold/2;i.stop(!0).animate({scrollTop:a},n)})},i.prototype.reflow=function(){this.calcPoints(),this._updateActive()},i.prototype._updateActive=function(){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=0;else{var i=this.scrollPos<e,n=this,s=this.points.filter(function(t,s){return i?e>=t:t-n.options.threshold<=e});t=s.length?s.length-1:0}if(this.$active.removeClass(this.options.activeClass),this.$active=this.$links.eq(t).addClass(this.options.activeClass),this.options.deepLinking){var o=this.$active[0].getAttribute("href");window.history.pushState?window.history.pushState(null,null,o):window.location.hash=o}this.scrollPos=e,this.$element.trigger("update.zf.magellan",[this.$active])},i.prototype.destroy=function(){this.$element.off(".zf.trigger .zf.magellan").find("."+this.options.activeClass).removeClass(this.options.activeClass);var e=this.$active[0].getAttribute("href");window.location.hash.replace(e,""),t.unregisterPlugin(this)},t.plugin(i,"Magellan"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this.$lastTrigger=t(),this._init(),this._events(),e.registerPlugin(this)}i.defaults={closeOnClick:!0,transitionTime:0,position:"left",forceTop:!0,isRevealed:!1,revealOn:null,autoFocus:!0,revealClass:"reveal-for-"},i.prototype._init=function(){var e=this.$element.attr("id");if(this.$element.attr("aria-hidden","true"),t(document).find('[data-open="'+e+'"], [data-close="'+e+'"], [data-toggle="'+e+'"]').attr("aria-expanded","false").attr("aria-controls",e),this.options.closeOnClick)if(t(".js-off-canvas-exit").length)this.$exiter=t(".js-off-canvas-exit");else{var i=document.createElement("div");i.setAttribute("class","js-off-canvas-exit"),t("[data-off-canvas-content]").append(i),this.$exiter=t(i)}this.options.isRevealed=this.options.isRevealed||new RegExp(this.options.revealClass,"g").test(this.$element[0].className),this.options.isRevealed&&(this.options.revealOn=this.options.revealOn||this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split("-")[2],this._setMQChecker()),this.options.transitionTime||(this.options.transitionTime=1e3*parseFloat(window.getComputedStyle(t("[data-off-canvas-wrapper]")[0]).transitionDuration))},i.prototype._events=function(){if(this.$element.on({"open.zf.trigger":this.open.bind(this),"close.zf.trigger":this.close.bind(this),"toggle.zf.trigger":this.toggle.bind(this),"keydown.zf.offcanvas":this._handleKeyboard.bind(this)}),this.$exiter.length){this.$exiter.on({"click.zf.offcanvas":this.close.bind(this)})}},i.prototype._setMQChecker=function(){var i=this;t(window).on("changed.zf.mediaquery",function(){e.MediaQuery.atLeast(i.options.revealOn)?i.reveal(!0):i.reveal(!1)}).one("load.zf.offcanvas",function(){e.MediaQuery.atLeast(i.options.revealOn)&&i.reveal(!0)})},i.prototype.reveal=function(t){var e=this.$element.find("[data-close]");t?e.length&&e.hide():e.length&&e.show()},i.prototype.open=function(i,n){if(!this.$element.hasClass("is-open")){var s=this;t(document.body);t("body").scrollTop(0),e.Move(this.options.transitionTime,this.$element,function(){t("[data-off-canvas-wrapper]").addClass("is-off-canvas-open is-open-"+s.options.position),s.$element.addClass("is-open").attr("aria-hidden","false").trigger("opened.zf.offcanvas")}),n&&(this.$lastTrigger=n.attr("aria-expanded","true")),this.options.autoFocus&&this.$element.one("finished.zf.animate",function(){s.$element.find("a, button").eq(0).focus()})}},i.prototype.close=function(){if(this.$element.hasClass("is-open")){var i=this;e.Move(this.options.transitionTime,this.$element,function(){t("[data-off-canvas-wrapper]").removeClass("is-off-canvas-open is-open-"+i.options.position),i.$element.removeClass("is-open")}),this.$element.attr("aria-hidden","true").trigger("closed.zf.offcanvas"),this.$lastTrigger.attr("aria-expanded","false")}},i.prototype.toggle=function(t,e){this.$element.hasClass("is-open")?this.close(t,e):this.open(t,e)},i.prototype._handleKeyboard=function(t){27===t.which&&(t.stopPropagation(),t.preventDefault(),this.close(),this.$lastTrigger.focus())},i.prototype.destroy=function(){},e.plugin(i,"OffCanvas")}(jQuery,Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this),e.Keyboard.register("Orbit",{ltr:{ARROW_RIGHT:"next",ARROW_LEFT:"previous"},rtl:{ARROW_LEFT:"next",ARROW_RIGHT:"previous"}})}i.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"},i.prototype._init=function(){this.$wrapper=this.$element.find("."+this.options.containerClass),this.$slides=this.$element.find("."+this.options.slideClass);var t=this.$element.find("img"),i=this.$slides.filter(".is-active");i.length||this.$slides.eq(0).addClass("is-active"),t.length?e.onImagesLoaded(t,this._prepareForOrbit.bind(this)):this._prepareForOrbit(),this.options.bullets&&this._loadBullets(),this._events(),this.options.autoPlay&&this.geoSync(),this.options.accessible&&this.$wrapper.attr("tabindex",0)},i.prototype._loadBullets=function(){this.$bullets=this.$element.find("."+this.options.boxOfBullets).find("button")},i.prototype.geoSync=function(){var t=this;this.timer=new e.Timer(this.$element,{duration:this.options.timerDelay,infinite:!1},function(){t.changeSlide(!0)}),this.timer.start()},i.prototype._prepareForOrbit=function(){var t=this;this._setWrapperHeight(function(e){t._setSlideHeight(e)})},i.prototype._setWrapperHeight=function(e){var i,n=0,s=0;this.$slides.each(function(){i=this.getBoundingClientRect().height,t(this).attr("data-slide",s),s&&t(this).css({position:"relative",display:"none"}),n=i>n?i:n,s++}),s===this.$slides.length&&(this.$wrapper.css({height:n}),e(n))},i.prototype._setSlideHeight=function(e){this.$slides.each(function(){t(this).css("max-height",e)})},i.prototype._events=function(){var i=this;if(this.options.swipe&&this.$slides.off("swipeleft.zf.orbit swiperight.zf.orbit").on("swipeleft.zf.orbit",function(t){t.preventDefault(),i.changeSlide(!0)}).on("swiperight.zf.orbit",function(t){t.preventDefault(),i.changeSlide(!1)}),this.options.autoPlay&&(this.$slides.on("click.zf.orbit",function(){i.$element.data("clickedOn",i.$element.data("clickedOn")?!1:!0),i.timer[i.$element.data("clickedOn")?"pause":"start"]()}),this.options.pauseOnHover&&this.$element.on("mouseenter.zf.orbit",function(){i.timer.pause()}).on("mouseleave.zf.orbit",function(){i.$element.data("clickedOn")||i.timer.start()})),this.options.navButtons){var n=this.$element.find("."+this.options.nextClass+", ."+this.options.prevClass);n.attr("tabindex",0).on("click.zf.orbit touchend.zf.orbit",function(){i.changeSlide(t(this).hasClass(i.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=t(this).data("slide"),n=e>i.$slides.filter(".is-active").data("slide"),s=i.$slides.eq(e);i.changeSlide(n,s,e)}),this.$wrapper.add(this.$bullets).on("keydown.zf.orbit",function(n){e.Keyboard.handleKey(n,i,{next:function(){i.changeSlide(!0)},previous:function(){i.changeSlide(!1)},handled:function(){t(n.target).is(i.$bullets)&&i.$bullets.filter(".is-active").focus()}})})},i.prototype.changeSlide=function(t,i,n){var s=this.$slides.filter(".is-active").eq(0);if(/mui/g.test(s[0].className))return!1;var o,a=this.$slides.first(),r=this.$slides.last(),l=t?"Right":"Left",d=t?"Left":"Right",h=this;o=i?i:t?this.options.infiniteWrap?s.next("."+this.options.slideClass).length?s.next("."+this.options.slideClass):a:s.next("."+this.options.slideClass):this.options.infiniteWrap?s.prev("."+this.options.slideClass).length?s.prev("."+this.options.slideClass):r:s.prev("."+this.options.slideClass),o.length&&(this.options.bullets&&(n=n||this.$slides.index(o),this._updateBullets(n)),e.Motion.animateIn(o.addClass("is-active").css({position:"absolute",top:0}),this.options["animInFrom"+l],function(){o.css({position:"relative",display:"block"}).attr("aria-live","polite")}),e.Motion.animateOut(s.removeClass("is-active"),this.options["animOutTo"+d],function(){s.removeAttr("aria-live"),h.options.autoPlay&&h.timer.restart(),h.$element.trigger("slidechange.zf.orbit",[o])}))},i.prototype._updateBullets=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)},i.prototype.destroy=function(){delete this.timer,this.$element.off(".zf.orbit").find("*").off(".zf.orbit").end().hide(),e.unregisterPlugin(this)},e.plugin(i,"Orbit")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(i){this.$element=e(i),this.rules=this.$element.data("responsive-menu"),this.currentMq=null,this.currentPlugin=null,this._init(),this._events(),t.registerPlugin(this)}var n={dropdown:{cssClass:"dropdown",plugin:t._plugins["dropdown-menu"]||null},drilldown:{cssClass:"drilldown",plugin:t._plugins.drilldown||null},accordion:{cssClass:"accordion-menu",plugin:t._plugins["accordion-menu"]||null}};i.defaults={},i.prototype._init=function(){for(var t={},i=this.rules.split(" "),s=0;s<i.length;s++){var o=i[s].split("-"),a=o.length>1?o[0]:"small",r=o.length>1?o[1]:o[0];null!==n[r]&&(t[a]=n[r])}this.rules=t,e.isEmptyObject(t)||this._checkMediaQueries()},i.prototype._events=function(){var t=this;e(window).on("changed.zf.mediaquery",function(){t._checkMediaQueries()})},i.prototype._checkMediaQueries=function(){var i,s=this;e.each(this.rules,function(e){t.MediaQuery.atLeast(e)&&(i=e)}),i&&(this.currentPlugin instanceof this.rules[i].plugin||(e.each(n,function(t,e){s.$element.removeClass(e.cssClass)}),this.$element.addClass(this.rules[i].cssClass),this.currentPlugin&&this.currentPlugin.destroy(),this.currentPlugin=new this.rules[i].plugin(this.$element,{})))},i.prototype.destroy=function(){this.currentPlugin.destroy(),e(window).off(".zf.ResponsiveMenu"),t.unregisterPlugin(this)},t.plugin(i,"ResponsiveMenu")}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=t(n),this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),this._events(),e.registerPlugin(this)}i.defaults={hideFor:"medium"},i.prototype._init=function(){var e=this.$element.data("responsive-toggle");e||console.error("Your tab bar needs an ID of a Menu as the value of data-tab-bar."),this.$targetMenu=t("#"+e),this.$toggler=this.$element.find("[data-toggle]"),this._update()},i.prototype._events=function(){t(window).on("changed.zf.mediaquery",this._update.bind(this)),this.$toggler.on("click.zf.responsiveToggle",this.toggleMenu.bind(this))},i.prototype._update=function(){e.MediaQuery.atLeast(this.options.hideFor)?(this.$element.hide(),this.$targetMenu.show()):(this.$element.show(),this.$targetMenu.hide())},i.prototype.toggleMenu=function(){e.MediaQuery.atLeast(this.options.hideFor)||(this.$targetMenu.toggle(0),this.$element.trigger("toggled.zf.responsiveToggle"))},i.prototype.destroy=function(){},e.plugin(i,"ResponsiveToggle")}(jQuery,Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,this.$element.data(),s),this._init(),t.registerPlugin(this),t.Keyboard.register("Reveal",{ENTER:"open",SPACE:"open",ESCAPE:"close",TAB:"tab_forward",SHIFT_TAB:"tab_backward"})}i.defaults={animationIn:"",animationOut:"",showDelay:0,hideDelay:0,closeOnClick:!0,closeOnEsc:!0,multipleOpened:!1,vOffset:100,hOffset:0,fullScreen:!1,btmOffsetPct:10,overlay:!0,resetOnClose:!1},i.prototype._init=function(){if(this.id=this.$element.attr("id"),this.isActive=!1,this.$anchor=e(e('[data-open="'+this.id+'"]').length?'[data-open="'+this.id+'"]':'[data-toggle="'+this.id+'"]'),this.$anchor.length){var i=this.$anchor[0].id||t.GetYoDigits(6,"reveal");this.$anchor.attr({"aria-controls":this.id,id:i,"aria-haspopup":!0,tabindex:0}),this.$element.attr({"aria-labelledby":i})}(this.options.fullScreen||this.$element.hasClass("full"))&&(this.options.fullScreen=!0,this.options.overlay=!1),this.options.overlay&&(this.$overlay=this._makeOverlay(this.id)),this.$element.attr({role:"dialog","aria-hidden":!0,"data-yeti-box":this.id,"data-resize":this.id}),this._events()},i.prototype._makeOverlay=function(t){var i=e("<div></div>").addClass("reveal-overlay").attr({tabindex:-1,"aria-hidden":!0}).appendTo("body");return this.options.closeOnClick&&i.attr({"data-close":t}),i},i.prototype._events=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":function(){t.$element.is(":visible")&&t._setPosition(function(){})}}),this.$anchor.length&&this.$anchor.on("keydown.zf.reveal",function(e){(13===e.which||32===e.which)&&(e.stopPropagation(),e.preventDefault(),t.open())}),this.options.closeOnClick&&this.options.overlay&&this.$overlay.off(".zf.reveal").on("click.zf.reveal",this.close.bind(this))},i.prototype._setPosition=function(e){var i=t.Box.GetDimensions(this.$element),n=this.options.fullScreen?"reveal full":i.height>=.5*i.windowDims.height?"reveal":"center";"reveal full"===n?(console.log("full"),this.$element.offset(t.Box.GetOffsets(this.$element,null,n,this.options.vOffset)).css({height:i.windowDims.height,width:i.windowDims.width})):t.MediaQuery.atLeast("medium")&&t.Box.ImNotTouchingYou(this.$element,null,!0,!1)?this.$element.css({"max-height":i.windowDims.height-this.options.vOffset*(this.options.btmOffsetPct/100+1),width:""}).offset(t.Box.GetOffsets(this.$element,null,n,this.options.vOffset)):(this.$element.css({width:i.windowDims.width-2*this.options.hOffset}).offset(t.Box.GetOffsets(this.$element,null,"center",this.options.vOffset,this.options.hOffset)),this.changedSize=!0),e()},i.prototype.open=function(){var i=this;this.isActive=!0,this.$element.css({visibility:"hidden"}).show().scrollTop(0),this._setPosition(function(){i.$element.hide().css({visibility:""}),i.options.multipleOpened||i.$element.trigger("closeme.zf.reveal",i.id),i.options.animationIn?i.options.overlay?t.Motion.animateIn(i.$overlay,"fade-in",function(){t.Motion.animateIn(i.$element,i.options.animationIn,function(){})}):t.Motion.animateIn(i.$element,i.options.animationIn,function(){}):i.options.overlay?i.$overlay.show(0,function(){ |
| + | i.$element.show(i.options.showDelay,function(){})}):i.$element.show(i.options.showDelay,function(){})}),this.$element.attr({"aria-hidden":!1}).attr("tabindex",-1).focus().trigger("open.zf.reveal"),e("body").addClass("is-reveal-open").attr({"aria-hidden":this.options.overlay||this.options.fullScreen?!0:!1}),setTimeout(function(){i._extraHandlers()},0)},i.prototype._extraHandlers=function(){var i=this,n=this.$element.find("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]").filter(function(){return!e(this).is(":visible")||e(this).attr("tabindex")<0?!1:!0});this.options.overlay||!this.options.closeOnClick||this.options.fullScreen||e("body").on("click.zf.reveal",function(t){i.close()}),this.options.closeOnEsc&&e(window).on("keydown.zf.reveal",function(e){0===n.length&&e.preventDefault(),t.Keyboard.handleKey(e,i,{close:function(){this.options.closeOnEsc&&this.close()}})}),this.$element.on("keydown.zf.reveal",function(s){var o=e(this);t.Keyboard.handleKey(s,i,{tab_forward:function(){this.$element.find(":focus").is(n.eq(-1))&&(n.eq(0).focus(),s.preventDefault())},tab_backward:function(){(this.$element.find(":focus").is(n.eq(0))||this.$element.is(":focus"))&&(n.eq(-1).focus(),s.preventDefault())},open:function(){o.is(n)&&this.open()},close:function(){this.options.closeOnEsc&&this.close()}}),0===n.length&&s.preventDefault()})},i.prototype.close=function(){if(!this.isActive||!this.$element.is(":visible"))return!1;var i=this;this.options.animationOut?t.Motion.animateOut(this.$element,this.options.animationOut,function(){i.options.overlay&&t.Motion.animateOut(i.$overlay,"fade-out",function(){})}):this.$element.hide(i.options.hideDelay,function(){i.options.overlay&&i.$overlay.hide(0,function(){})}),this.options.closeOnEsc&&e(window).off("keydown.zf.reveal"),!this.options.overlay&&this.options.closeOnClick&&e("body").off("click.zf.reveal"),this.$element.off("keydown.zf.reveal"),this.changedSize&&this.$element.css({height:"",width:""}),e("body").removeClass("is-reveal-open").attr({"aria-hidden":!1,tabindex:""}),this.options.resetOnClose&&this.$element.html(this.$element.html()),this.isActive=!1,this.$element.attr({"aria-hidden":!0}).trigger("closed.zf.reveal")},i.prototype.toggle=function(){this.isActive?this.close():this.open()},i.prototype.destroy=function(){this.options.overlay&&this.$overlay.hide().off().remove(),this.$element.hide(),this.$anchor.off(),t.unregisterPlugin(this)},t.plugin(i,"Reveal"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this),e.Keyboard.register("Slider",{ltr:{ARROW_RIGHT:"increase",ARROW_UP:"increase",ARROW_DOWN:"decrease",ARROW_LEFT:"decrease",SHIFT_ARROW_RIGHT:"increase_fast",SHIFT_ARROW_UP:"increase_fast",SHIFT_ARROW_DOWN:"decrease_fast",SHIFT_ARROW_LEFT:"decrease_fast"},rtl:{ARROW_LEFT:"increase",ARROW_RIGHT:"decrease",SHIFT_ARROW_LEFT:"increase_fast",SHIFT_ARROW_RIGHT:"decrease_fast"}})}function n(t,e){return t/e}function s(t,e,i,n){return Math.abs(t.position()[e]+t[n]()/2-i)}i.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"},i.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):t("#"+this.$handle.attr("aria-controls")),this.$fill=this.$element.find("[data-slider-fill]").css(this.options.vertical?"height":"width",0);var e=!1,i=this;(this.options.disabled||this.$element.hasClass(this.options.disabledClass))&&(this.options.disabled=!0,this.$element.addClass(this.options.disabledClass)),this.inputs.length||(this.inputs=t().add(this.$input),this.options.binding=!0),this._setInitAttr(0),this._events(this.$handle),this.handles[1]&&(this.options.doubleSided=!0,this.$handle2=this.handles.eq(1),this.$input2=this.inputs.length?this.inputs.eq(1):t("#"+this.$handle2.attr("aria-controls")),this.inputs[1]||(this.inputs=this.inputs.add(this.$input2)),e=!0,this._setHandlePos(this.$handle,this.options.initialStart,!0,function(){i._setHandlePos(i.$handle2,i.options.initialEnd)}),this._setInitAttr(1),this._events(this.$handle2)),e||this._setHandlePos(this.$handle,this.options.initialStart,!0)},i.prototype._setHandlePos=function(t,i,s,o){i=parseFloat(i),i<this.options.start?i=this.options.start:i>this.options.end&&(i=this.options.end);var a=this.options.doubleSided;if(a)if(0===this.handles.index(t)){var r=parseFloat(this.$handle2.attr("aria-valuenow"));i=i>=r?r-this.options.step:i}else{var l=parseFloat(this.$handle.attr("aria-valuenow"));i=l>=i?l+this.options.step:i}this.options.vertical&&!s&&(i=this.options.end-i);var d=this,h=this.options.vertical,u=h?"height":"width",c=h?"top":"left",f=t[0].getBoundingClientRect()[u]/2,p=this.$element[0].getBoundingClientRect()[u],m=n(i,this.options.end).toFixed(this.options.decimal),g=(p-f)*m,v=(100*n(g,p)).toFixed(this.options.decimal),i=i>0?parseFloat(i.toFixed(this.options.decimal)):0,w={};if(this._setValues(t,i),this.options.doubleSided){var y,b=0===this.handles.index(t);this.handles.index(t);b?(w[c]=(m>0?100*m:0)+"%",y=(100*(n(this.$handle2.position()[c]+f,p)-parseFloat(m))).toFixed(this.options.decimal)+"%",w["min-"+u]=y,o&&"function"==typeof o&&o()):(i=(100>i?i:100)-(parseFloat(this.$handle[0].style.left)||this.options.end-i),w["min-"+u]=i+"%")}this.$element.one("finished.zf.animate",function(){d.animComplete=!0,d.$element.trigger("moved.zf.slider",[t])});var $=d.$element.data("dragging")?1e3/60:d.options.moveTime;e.Move($,t,function(){t.css(c,v+"%"),d.options.doubleSided?d.$fill.css(w):d.$fill.css(u,100*m+"%")})},i.prototype._setInitAttr=function(t){var i=this.inputs.eq(t).attr("id")||e.GetYoDigits(6,"slider");this.inputs.eq(t).attr({id:i,max:this.options.end,min:this.options.start}),this.handles.eq(t).attr({role:"slider","aria-controls":i,"aria-valuemax":this.options.end,"aria-valuemin":this.options.start,"aria-valuenow":0===t?this.options.initialStart:this.options.initialEnd,"aria-orientation":this.options.vertical?"vertical":"horizontal",tabindex:0})},i.prototype._setValues=function(t,e){var i=this.options.doubleSided?this.handles.index(t):0;this.inputs.eq(i).val(e),t.attr("aria-valuenow",e)},i.prototype._handleEvent=function(t,e,i){var o,a;if(i)o=i,a=!0;else{t.preventDefault();var r=this.options.vertical,l=r?"height":"width",d=r?"top":"left",h=r?t.pageY:t.pageX,u=this.$handle[0].getBoundingClientRect()[l]/2,c=this.$element[0].getBoundingClientRect()[l],f=this.$element.offset()[d]-h,p=f>0?-u:-c>f-u?c:Math.abs(f),m=n(p,c);if(o=(this.options.end-this.options.start)*m,a=!1,!e){var g=s(this.$handle,d,p,l),v=s(this.$handle2,d,p,l);e=v>=g?this.$handle:this.$handle2}}this._setHandlePos(e,o,a)},i.prototype._events=function(i){if(this.options.disabled)return!1;var n,s=this;if(this.inputs.off("change.zf.slider").on("change.zf.slider",function(e){var i=s.inputs.index(t(this));s._handleEvent(e,s.handles.eq(i),t(this).val())}),this.options.clickSelect&&this.$element.off("click.zf.slider").on("click.zf.slider",function(t){return s.$element.data("dragging")?!1:(s.animComplete=!1,void(s.options.doubleSided?s._handleEvent(t):s._handleEvent(t,s.$handle)))}),this.options.draggable){this.handles.addTouch();var o=t("body");i.off("mousedown.zf.slider").on("mousedown.zf.slider",function(e){i.addClass("is-dragging"),s.$fill.addClass("is-dragging"),s.$element.data("dragging",!0),s.animComplete=!1,n=t(e.currentTarget),o.on("mousemove.zf.slider",function(t){t.preventDefault(),s._handleEvent(t,n)}).on("mouseup.zf.slider",function(t){s.animComplete=!0,s._handleEvent(t,n),i.removeClass("is-dragging"),s.$fill.removeClass("is-dragging"),s.$element.data("dragging",!1),o.off("mousemove.zf.slider mouseup.zf.slider")})})}i.off("keydown.zf.slider").on("keydown.zf.slider",function(i){var n,o=s.options.doubleSided?s.handles.index(t(this)):0,a=parseFloat(s.inputs.eq(o).val()),r=t(this);e.Keyboard.handleKey(i,s,{decrease:function(){n=a-s.options.step},increase:function(){n=a+s.options.step},decrease_fast:function(){n=a-10*s.options.step},increase_fast:function(){n=a+10*s.options.step},handled:function(){i.preventDefault(),s._setHandlePos(r,n,!0)}})})},i.prototype.destroy=function(){this.handles.off(".zf.slider"),this.inputs.off(".zf.slider"),this.$element.off(".zf.slider"),e.unregisterPlugin(this)},e.plugin(i,"Slider")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this)}function n(t){return parseInt(window.getComputedStyle(document.body,null).fontSize,10)*t}i.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},i.prototype._init=function(){var i=this.$element.parent("[data-sticky-container]"),n=this.$element[0].id||e.GetYoDigits(6,"sticky"),s=this;i.length||(this.wasWrapped=!0),this.$container=i.length?i:t(this.options.container).wrapInner(this.$element),this.$container.addClass(this.options.containerClass),this.$element.addClass(this.options.stickyClass).attr({"data-resize":n}),this.scrollCount=this.options.checkEvery,this.isStuck=!1,""!==this.options.topAnchor?this._parsePoints():this.$anchor=t(this.options.anchor?"#"+this.options.anchor:document.body),this._setSizes(function(){s._calc(!1)}),this._events(n.split("-").reverse().join("-"))},i.prototype._parsePoints=function(){for(var e=this.options.topAnchor,i=this.options.btmAnchor,n=[e,i],s={},o=0,a=n.length;a>o&&n[o];o++){var r;if("number"==typeof n[o])r=n[o];else{var l=n[o].split(":"),d=t("#"+l[0]);r=d.offset().top,l[1]&&"bottom"===l[1].toLowerCase()&&(r+=d[0].getBoundingClientRect().height)}s[o]=r}this.points=s},i.prototype._events=function(e){var i=this,n="scroll.zf."+e;this.isOn||(this.canStick&&(this.isOn=!0,t(window).off(n).on(n,function(t){0===i.scrollCount?(i.scrollCount=i.options.checkEvery,i._setSizes(function(){i._calc(!1,window.pageYOffset)})):(i.scrollCount--,i._calc(!1,window.pageYOffset))})),this.$element.off("resizeme.zf.trigger").on("resizeme.zf.trigger",function(t,s){i._setSizes(function(){i._calc(!1),i.canStick?i.isOn||i._events(e):i.isOn&&i._pauseListeners(n)})}))},i.prototype._pauseListeners=function(e){this.isOn=!1,t(window).off(e),this.$element.trigger("pause.zf.sticky")},i.prototype._calc=function(t,e){return t&&this._setSizes(),this.canStick?(e||(e=window.pageYOffset),void(e>=this.topPoint?e<=this.bottomPoint?this.isStuck||this._setSticky():this.isStuck&&this._removeSticky(!1):this.isStuck&&this._removeSticky(!0))):(this.isStuck&&this._removeSticky(!0),!1)},i.prototype._setSticky=function(){var t=this.options.stickTo,e="top"===t?"marginTop":"marginBottom",i="top"===t?"bottom":"top",n={};n[e]=this.options[e]+"em",n[t]=0,n[i]="auto",n.left=this.$container.offset().left+parseInt(window.getComputedStyle(this.$container[0])["padding-left"],10),this.isStuck=!0,this.$element.removeClass("is-anchored is-at-"+i).addClass("is-stuck is-at-"+t).css(n).trigger("sticky.zf.stuckto:"+t)},i.prototype._removeSticky=function(t){var e,i,n=this.options.stickTo,s="top"===n,o={},a=(this.points?this.points[1]-this.points[0]:this.anchorHeight)-this.elemHeight;e=s?"marginTop":"marginBottom",i=s?"bottom":"top",o[e]=0,t&&!s||s&&!t?(o[n]=a,o[i]=0):(o[n]=0,o[i]=a),o.left="",this.isStuck=!1,this.$element.removeClass("is-stuck is-at-"+n).addClass("is-anchored is-at-"+(t?"top":"bottom")).css(o).trigger("top")},i.prototype._setSizes=function(t){this.canStick=e.MediaQuery.atLeast(this.options.stickyOn),this.canStick||t();var i=this.$container[0].getBoundingClientRect().width,n=window.getComputedStyle(this.$container[0]),s=parseInt(n["padding-right"],10);this.$anchor&&this.$anchor.length?this.anchorHeight=this.$anchor[0].getBoundingClientRect().height:this._parsePoints(),this.$element.css({"max-width":i-s+"px"});var o=this.$element[0].getBoundingClientRect().height||this.containerHeight;this.containerHeight=o,this.$container.css({height:o}),this.elemHeight=o,this.isStuck&&this.$element.css({left:this.$container.offset().left+parseInt(n["padding-left"],10)}),this._setBreakPoints(o,function(){t&&t()})},i.prototype._setBreakPoints=function(t,e){if(!this.canStick){if(!e)return!1;e()}var i=n(this.options.marginTop),s=n(this.options.marginBottom),o=this.points?this.points[0]:this.$anchor.offset().top,a=this.points?this.points[1]:o+this.anchorHeight,r=window.innerHeight;"top"===this.options.stickTo?(o-=i,a-=t+i):"bottom"===this.options.stickTo&&(o-=r-(t+s),a-=r-s),this.topPoint=o,this.bottomPoint=a,e&&e()},i.prototype.destroy=function(){this._removeSticky(!0),this.$element.removeClass(this.options.stickyClass+" is-anchored is-at-top").css({height:"",top:"",bottom:"","max-width":""}).off("resizeme.zf.trigger"),this.$anchor.off("change.zf.sticky"),t(window).off("scroll.zf.sticky"),this.wasWrapped?this.$element.unwrap():this.$container.removeClass(this.options.containerClass).css({height:""}),e.unregisterPlugin(this)},e.plugin(i,"Sticky")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=t.extend({},i.defaults,this.$element.data(),s),this._init(),e.registerPlugin(this),e.Keyboard.register("Tabs",{ENTER:"open",SPACE:"open",ARROW_RIGHT:"next",ARROW_UP:"previous",ARROW_DOWN:"next",ARROW_LEFT:"previous"})}i.defaults={autoFocus:!1,wrapOnKeys:!0,matchHeight:!1,linkClass:"tabs-title",panelClass:"tabs-panel"},i.prototype._init=function(){var i=this;if(this.$tabTitles=this.$element.find("."+this.options.linkClass),this.$tabContent=t('[data-tabs-content="'+this.$element[0].id+'"]'),this.$tabTitles.each(function(){var e=t(this),n=e.find("a"),s=e.hasClass("is-active"),o=n.attr("href").slice(1),a=o+"-label",r=t(o);e.attr({role:"presentation"}),n.attr({role:"tab","aria-controls":o,"aria-selected":s,id:a}),r.attr({role:"tabpanel","aria-hidden":!s,"aria-labelledby":a}),s&&i.options.autoFocus&&n.focus()}),this.options.matchHeight){var n=this.$tabContent.find("img");n.length?e.onImagesLoaded(n,this._setHeight.bind(this)):this._setHeight()}this._events()},i.prototype._events=function(){this._addKeyHandler(),this._addClickHandler(),this.options.matchHeight&&t(window).on("changed.zf.mediaquery",this._setHeight.bind(this))},i.prototype._addClickHandler=function(){var e=this;this.$tabTitles.off("click.zf.tabs").on("click.zf.tabs",function(i){i.preventDefault(),i.stopPropagation(),t(this).hasClass("is-active")||e._handleTabChange(t(this))})},i.prototype._addKeyHandler=function(){var i=this;i.$element.find("li:first-of-type"),i.$element.find("li:last-of-type");this.$tabTitles.off("keydown.zf.tabs").on("keydown.zf.tabs",function(n){n.stopPropagation(),n.preventDefault();var s,o,a=t(this),r=a.parent("ul").children("li");r.each(function(e){return t(this).is(a)?void(i.options.wrapOnKeys?(s=0===e?r.last():r.eq(e-1),o=e===r.length-1?r.first():r.eq(e+1)):(s=r.eq(Math.max(0,e-1)),o=r.eq(Math.min(e+1,r.length-1)))):void 0}),e.Keyboard.handleKey(n,i,{open:function(){a.find('[role="tab"]').focus(),i._handleTabChange(a)},previous:function(){s.find('[role="tab"]').focus(),i._handleTabChange(s)},next:function(){o.find('[role="tab"]').focus(),i._handleTabChange(o)}})})},i.prototype._handleTabChange=function(e){var i=e.find('[role="tab"]'),n=i.attr("href"),s=t(n),o=this.$element.find("."+this.options.linkClass+".is-active").removeClass("is-active").find('[role="tab"]').attr({"aria-selected":"false"}).attr("href");t(o).removeClass("is-active").attr({"aria-hidden":"true"}),e.addClass("is-active"),i.attr({"aria-selected":"true"}),s.addClass("is-active").attr({"aria-hidden":"false"}),this.$element.trigger("change.zf.tabs",[e])},i.prototype.selectTab=function(t){var e;e="object"==typeof t?t[0].id:t,e.indexOf("#")<0&&(e="#"+e);var i=this.$tabTitles.find('[href="'+e+'"]').parent("."+this.options.linkClass);this._handleTabChange(i)},i.prototype._setHeight=function(){var e=0;this.$tabContent.find("."+this.options.panelClass).css("height","").each(function(){var i=t(this),n=i.hasClass("is-active");n||i.css({visibility:"hidden",display:"block"});var s=this.getBoundingClientRect().height;n||i.css({visibility:"",display:""}),e=s>e?s:e}).css("height",e+"px")},i.prototype.destroy=function(){this.$element.find("."+this.options.linkClass).off(".zf.tabs").hide().end().find("."+this.options.panelClass).hide(),this.options.matchHeight&&t(window).off("changed.zf.mediaquery"),e.unregisterPlugin(this)},e.plugin(i,"Tabs")}(jQuery,window.Foundation),!function(t,e){"use strict";function i(n,s){this.$element=n,this.options=e.extend({},i.defaults,n.data(),s),this.className="",this._init(),this._events(),t.registerPlugin(this)}i.defaults={animate:!1},i.prototype._init=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"),"."===t[0]?this.className=t.slice(1):this.className=t);var i=this.$element[0].id;e('[data-open="'+i+'"], [data-close="'+i+'"], [data-toggle="'+i+'"]').attr("aria-controls",i),this.$element.is(":hidden")&&this.$element.attr("aria-expanded","false")},i.prototype._events=function(){var t=this;this.$element.on("toggle.zf.trigger",function(){return t.toggle(),!1})},i.prototype.toggle=function(){this.options.animate?this._toggleAnimate():this._toggleClass()},i.prototype._toggleClass=function(){var t=this;this.$element.toggleClass(this.className),this.$element.hasClass(this.className)?this.$element.trigger("on.zf.toggler"):this.$element.trigger("off.zf.toggler"),t._updateARIA()},i.prototype._toggleAnimate=function(){var e=this;this.$element.is(":hidden")?t.Motion.animateIn(this.$element,this.animationIn,function(){this.trigger("on.zf.toggler"),e._updateARIA()}):t.Motion.animateOut(this.$element,this.animationOut,function(){this.trigger("off.zf.toggler"),e._updateARIA()})},i.prototype._updateARIA=function(){this.$element.is(":hidden")?this.$element.attr("aria-expanded","false"):this.$element.attr("aria-expanded","true")},i.prototype.destroy=function(){this.$element.off(".zf.toggler"),t.unregisterPlugin(this)},t.plugin(i,"Toggler"),"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=i),"function"==typeof define&&define(["foundation"],function(){return i})}(Foundation,jQuery),!function(t,e,i){"use strict";function n(e,s){this.$element=e,this.options=t.extend({},n.defaults,this.$element.data(),s),this.isActive=!1,this.isClick=!1,this._init(),i.registerPlugin(this)}n.defaults={disableForTouch:!1,hoverDelay:200,fadeInDuration:150,fadeOutDuration:150,disableHover:!1,templateClasses:"",tooltipClass:"tooltip",triggerClass:"has-tip",showOn:"small",template:"",tipText:"",touchCloseText:"Tap to close.",clickOpen:!0,positionClass:"",vOffset:10,hOffset:12},n.prototype._init=function(){var n=this.$element.attr("aria-describedby")||i.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?t(this.options.template):this._buildTemplate(n),this.template.appendTo(e.body).text(this.options.tipText).hide(),this.$element.attr({title:"","aria-describedby":n,"data-yeti-box":n,"data-toggle":n,"data-resize":n}).addClass(this.triggerClass),this.usedPositions=[],this.counter=4,this.classChanged=!1,this._events()},n.prototype._getPositionClass=function(t){if(!t)return"";var e=t[0].className.match(/(top|left|right)/g);return e=e?e[0]:""},n.prototype._buildTemplate=function(e){var i=(this.options.tooltipClass+" "+this.options.positionClass).trim(),n=t("<div></div>").addClass(i).attr({role:"tooltip","aria-hidden":!0,"data-is-active":!1,"data-is-focus":!1,id:e});return n},n.prototype._reposition=function(t){this.usedPositions.push(t?t:"bottom"),!t&&this.usedPositions.indexOf("top")<0?this.template.addClass("top"):"top"===t&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(t):"left"===t&&this.usedPositions.indexOf("right")<0?this.template.removeClass(t).addClass("right"):"right"===t&&this.usedPositions.indexOf("left")<0?this.template.removeClass(t).addClass("left"):!t&&this.usedPositions.indexOf("top")>-1&&this.usedPositions.indexOf("left")<0?this.template.addClass("left"):"top"===t&&this.usedPositions.indexOf("bottom")>-1&&this.usedPositions.indexOf("left")<0?this.template.removeClass(t).addClass("left"):"left"===t&&this.usedPositions.indexOf("right")>-1&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(t):"right"===t&&this.usedPositions.indexOf("left")>-1&&this.usedPositions.indexOf("bottom")<0?this.template.removeClass(t):this.template.removeClass(t),this.classChanged=!0,this.counter--},n.prototype._setPosition=function(){var t=this._getPositionClass(this.template),e=i.Box.GetDimensions(this.template),n=i.Box.GetDimensions(this.$element),s="left"===t?"left":"right"===t?"left":"top",o="top"===s?"height":"width";"height"===o?this.options.vOffset:this.options.hOffset;if(e.width>=e.windowDims.width||!this.counter&&!i.Box.ImNotTouchingYou(this.template))return this.template.offset(i.Box.GetOffsets(this.template,this.$element,"center bottom",this.options.vOffset,this.options.hOffset,!0)).css({width:n.windowDims.width-2*this.options.hOffset,height:"auto"}),!1;for(this.template.offset(i.Box.GetOffsets(this.template,this.$element,"center "+(t||"bottom"),this.options.vOffset,this.options.hOffset));!i.Box.ImNotTouchingYou(this.template)&&this.counter;)this._reposition(t),this._setPosition()},n.prototype.show=function(){if("all"!==this.options.showOn&&!i.MediaQuery.atLeast(this.options.showOn))return!1;var t=this;this.template.css("visibility","hidden").show(),this._setPosition(),this.$element.trigger("closeme.zf.tooltip",this.template.attr("id")),this.template.attr({"data-is-active":!0,"aria-hidden":!1}),t.isActive=!0,this.template.stop().hide().css("visibility","").fadeIn(this.options.fadeInDuration,function(){}),this.$element.trigger("show.zf.tooltip")},n.prototype.hide=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,t.classChanged&&(t.template.removeClass(t._getPositionClass(t.template)).addClass(t.options.positionClass),t.usedPositions=[],t.counter=4,t.classChanged=!1)}),this.$element.trigger("hide.zf.tooltip")},n.prototype._events=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.hide():(t.isClick=!0,!t.options.disableHover&&t.$element.attr("tabindex")||t.isActive||t.show())}),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){return e=!0,console.log(t.isClick),t.isClick?!1:void t.show()}).on("focusout.zf.tooltip",function(i){e=!1,t.isClick=!1,t.hide()}).on("resizeme.zf.trigger",function(){t.isActive&&t._setPosition()})},n.prototype.toggle=function(){this.isActive?this.hide():this.show()},n.prototype.destroy=function(){this.$element.attr("title",this.template.text()).off(".zf.trigger .zf.tootip").removeAttr("aria-describedby").removeAttr("data-yeti-box").removeAttr("data-toggle").removeAttr("data-resize"),this.template.remove(),i.unregisterPlugin(this)},i.plugin(n,"Tooltip")}(jQuery,window.document,window.Foundation); |
| \ No newline at end of file | |
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}}); |
| \ No newline at end of file | |
public/stylesheets/_settings.scss
+529
-0
| @@ | @@ -0,0 +1,529 @@ |
| + | // Foundation for Sites Settings |
| + | // ----------------------------- |
| + | // |
| + | // Table of Contents: |
| + | // |
| + | // 1. Global |
| + | // 2. Breakpoints |
| + | // 3. The Grid |
| + | // 4. Base Typography |
| + | // 5. Typography Helpers |
| + | // 6. Abide |
| + | // 7. Accordion |
| + | // 8. Accordion Menu |
| + | // 9. Badge |
| + | // 10. Breadcrumbs |
| + | // 11. Button |
| + | // 12. Button Group |
| + | // 13. Callout |
| + | // 14. Close Button |
| + | // 15. Drilldown |
| + | // 16. Dropdown |
| + | // 17. Dropdown Menu |
| + | // 18. Flex Video |
| + | // 19. Forms |
| + | // 20. Label |
| + | // 21. Media Object |
| + | // 22. Menu |
| + | // 23. Off-canvas |
| + | // 24. Orbit |
| + | // 25. Pagination |
| + | // 26. Progress Bar |
| + | // 27. Reveal |
| + | // 28. Slider |
| + | // 29. Switch |
| + | // 30. Table |
| + | // 31. Tabs |
| + | // 32. Thumbnail |
| + | // 33. Tooltip |
| + | // 34. Top Bar |
| + | |
| + | @import 'foundation6/util/util'; |
| + | |
| + | // 1. Global |
| + | // --------- |
| + | |
| + | $global-width: rem-calc(1200); |
| + | $global-font-size: 100%; |
| + | $global-lineheight: 1.5; |
| + | $primary-color: #2199e8; |
| + | $secondary-color: #777; |
| + | $success-color: #3adb76; |
| + | $warning-color: #ffae00; |
| + | $alert-color: #ec5840; |
| + | $light-gray: #e6e6e6; |
| + | $medium-gray: #cacaca; |
| + | $dark-gray: #8a8a8a; |
| + | $black: #0a0a0a; |
| + | $white: #fefefe; |
| + | $body-background: $white; |
| + | $body-font-color: $black; |
| + | $body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; |
| + | $body-antialiased: true; |
| + | $text-direction: ltr; |
| + | $global-margin: 1rem; |
| + | $global-padding: 1rem; |
| + | $global-margin: 1rem; |
| + | $global-weight-normal: normal; |
| + | $global-weight-bold: bold; |
| + | $global-radius: 0; |
| + | $global-text-direction: ltr; |
| + | $rem-base: 16px; |
| + | |
| + | // 2. Breakpoints |
| + | // -------------- |
| + | |
| + | $breakpoints: ( |
| + | small: 0, |
| + | medium: 640px, |
| + | large: 1024px, |
| + | xlarge: 1200px, |
| + | xxlarge: 1440px, |
| + | ); |
| + | $breakpoint-classes: (small medium large); |
| + | |
| + | // 3. The Grid |
| + | // ----------- |
| + | |
| + | $grid-row-width: $global-width; |
| + | $grid-column-count: 12; |
| + | $grid-column-gutter: 30px; |
| + | $block-grid-max: 6; |
| + | |
| + | // 4. Base Typography |
| + | // ------------------ |
| + | |
| + | $header-font-family: $body-font-family; |
| + | $header-font-weight: $global-weight-normal; |
| + | $header-font-style: normal; |
| + | $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; |
| + | $header-sizes: ( |
| + | small: ( |
| + | 'h1': 24, |
| + | 'h2': 20, |
| + | 'h3': 19, |
| + | 'h4': 18, |
| + | 'h5': 17, |
| + | 'h6': 16, |
| + | ), |
| + | medium: ( |
| + | 'h1': 48, |
| + | 'h2': 40, |
| + | 'h3': 31, |
| + | 'h4': 25, |
| + | 'h5': 20, |
| + | 'h6': 16, |
| + | ), |
| + | ); |
| + | $header-color: inherit; |
| + | $header-lineheight: 1.4; |
| + | $header-margin-bottom: 0.5rem; |
| + | $header-text-rendering: optimizeLegibility; |
| + | $small-font-size: 80%; |
| + | $header-small-font-color: $medium-gray; |
| + | $paragraph-lineheight: 1.6; |
| + | $paragraph-margin-bottom: 1rem; |
| + | $paragraph-text-rendering: optimizeLegibility; |
| + | $code-color: $black; |
| + | $code-font-family: $font-family-monospace; |
| + | $code-font-weight: $global-weight-normal; |
| + | $code-background: $light-gray; |
| + | $code-border: 1px solid $medium-gray; |
| + | $code-padding: rem-calc(2 5 1); |
| + | $anchor-color: $primary-color; |
| + | $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); |
| + | $anchor-text-decoration: none; |
| + | $anchor-text-decoration-hover: none; |
| + | $hr-width: $global-width; |
| + | $hr-border: 1px solid $medium-gray; |
| + | $hr-margin: rem-calc(20) auto; |
| + | $list-lineheight: $paragraph-lineheight; |
| + | $list-margin-bottom: $paragraph-margin-bottom; |
| + | $list-style-type: disc; |
| + | $list-style-position: outside; |
| + | $list-side-margin: 1.25rem; |
| + | $list-nested-side-margin: 1.25rem; |
| + | $defnlist-margin-bottom: 1rem; |
| + | $defnlist-term-weight: $global-weight-bold; |
| + | $defnlist-term-margin-bottom: 0.3rem; |
| + | $blockquote-color: $dark-gray; |
| + | $blockquote-padding: rem-calc(9 20 0 19); |
| + | $blockquote-border: 1px solid $medium-gray; |
| + | $cite-font-size: rem-calc(13); |
| + | $cite-color: $dark-gray; |
| + | $keystroke-font: $font-family-monospace; |
| + | $keystroke-color: $black; |
| + | $keystroke-background: $light-gray; |
| + | $keystroke-padding: rem-calc(2 4 0); |
| + | $keystroke-radius: $global-radius; |
| + | $abbr-underline: 1px dotted $black; |
| + | |
| + | // 5. Typography Helpers |
| + | // --------------------- |
| + | |
| + | $lead-font-size: $global-font-size * 1.25; |
| + | $lead-lineheight: 1.6; |
| + | $subheader-lineheight: 1.4; |
| + | $subheader-color: $dark-gray; |
| + | $subheader-font-weight: $global-weight-normal; |
| + | $subheader-margin-top: 0.2rem; |
| + | $subheader-margin-bottom: 0.5rem; |
| + | $stat-font-size: 2.5rem; |
| + | |
| + | // 6. Abide |
| + | // -------- |
| + | |
| + | $abide-inputs: true; |
| + | $abide-labels: true; |
| + | $input-background-invalid: $alert-color; |
| + | $form-label-color-invalid: $alert-color; |
| + | $input-error-color: $alert-color; |
| + | $input-error-font-size: rem-calc(12); |
| + | $input-error-font-weight: $global-weight-bold; |
| + | |
| + | // 7. Accordion |
| + | // ------------ |
| + | |
| + | $accordion-background: $white; |
| + | $accordion-plusminus: true; |
| + | $accordion-item-color: foreground($accordion-background, $primary-color); |
| + | $accordion-item-background-hover: $light-gray; |
| + | $accordion-item-padding: 1.25rem 1rem; |
| + | $accordion-content-background: $white; |
| + | $accordion-content-border: 1px solid $light-gray; |
| + | $accordion-content-color: foreground($accordion-background, $primary-color); |
| + | $accordion-content-padding: 1rem; |
| + | |
| + | // 8. Accordion Menu |
| + | // ----------------- |
| + | |
| + | $accordionmenu-arrows: true; |
| + | |
| + | // 9. Badge |
| + | // -------- |
| + | |
| + | $badge-background: $primary-color; |
| + | $badge-color: foreground($badge-background); |
| + | $badge-padding: 0.3em; |
| + | $badge-minwidth: 2.1em; |
| + | $badge-font-size: 0.6rem; |
| + | |
| + | // 10. Breadcrumbs |
| + | // --------------- |
| + | |
| + | $breadcrumbs-margin: 0 0 $global-margin 0; |
| + | $breadcrumbs-item-font-size: rem-calc(11); |
| + | $breadcrumbs-item-color: $primary-color; |
| + | $breadcrumbs-item-color-current: $black; |
| + | $breadcrumbs-item-color-disabled: $medium-gray; |
| + | $breadcrumbs-item-margin: 0.75rem; |
| + | $breadcrumbs-item-uppercase: true; |
| + | $breadcrumbs-item-slash: true; |
| + | |
| + | // 11. Button |
| + | // ---------- |
| + | |
| + | $button-padding: 0.85em 1em; |
| + | $button-margin: 0 $global-margin $global-margin 0; |
| + | $button-fill: solid; |
| + | $button-background: $primary-color; |
| + | $button-background-hover: scale-color($button-background, $lightness: -15%); |
| + | $button-color: #fff; |
| + | $button-color-alt: #000; |
| + | $button-radius: $global-radius; |
| + | $button-sizes: ( |
| + | tiny: 0.6rem, |
| + | small: 0.75rem, |
| + | default: 0.9rem, |
| + | large: 1.25rem, |
| + | ); |
| + | $button-opacity-disabled: 0.25; |
| + | |
| + | // 12. Button Group |
| + | // ---------------- |
| + | |
| + | $buttongroup-margin: 1rem; |
| + | $buttongroup-spacing: 1px; |
| + | $buttongroup-child-selector: '.button'; |
| + | $buttongroup-expand-max: 6; |
| + | |
| + | // 13. Callout |
| + | // ----------- |
| + | |
| + | $callout-background: $white; |
| + | $callout-background-fade: 85%; |
| + | $callout-border: 1px solid rgba($black, 0.25); |
| + | $callout-margin: 0 0 1rem 0; |
| + | $callout-padding: 1rem; |
| + | $callout-font-color: $body-font-color; |
| + | $callout-font-color-alt: $body-background; |
| + | $callout-radius: $global-radius; |
| + | $callout-link-tint: 30%; |
| + | |
| + | // 14. Close Button |
| + | // ---------------- |
| + | |
| + | $closebutton-position: right top; |
| + | $closebutton-offset-horizontal: 1rem; |
| + | $closebutton-offset-vertical: 0.5rem; |
| + | $closebutton-size: 2em; |
| + | $closebutton-lineheight: 1; |
| + | $closebutton-color: $dark-gray; |
| + | $closebutton-color-hover: $black; |
| + | |
| + | // 15. Drilldown |
| + | // ------------- |
| + | |
| + | $drilldown-transition: transform 0.15s linear; |
| + | $drilldown-arrows: true; |
| + | |
| + | // 16. Dropdown |
| + | // ------------ |
| + | |
| + | $dropdown-padding: 1rem; |
| + | $dropdown-border: 1px solid $medium-gray; |
| + | $dropdown-font-size: 16rem; |
| + | $dropdown-width: 300px; |
| + | $dropdown-radius: $global-radius; |
| + | $dropdown-sizes: ( |
| + | tiny: 100px, |
| + | small: 200px, |
| + | large: 400px, |
| + | ); |
| + | |
| + | // 17. Dropdown Menu |
| + | // ----------------- |
| + | |
| + | $dropdownmenu-arrows: true; |
| + | $dropdownmenu-min-width: 200px; |
| + | $dropdownmenu-background: $white; |
| + | $dropdown-border: 1px solid $medium-gray; |
| + | |
| + | // 18. Flex Video |
| + | // -------------- |
| + | |
| + | $flexvideo-padding-top: rem-calc(25); |
| + | $flexvideo-margin-bottom: rem-calc(16); |
| + | $flexvideo-ratio: 4 by 3; |
| + | $flexvideo-ratio-widescreen: 16 by 9; |
| + | |
| + | // 19. Forms |
| + | // --------- |
| + | |
| + | $fieldset-border: 1px solid $medium-gray; |
| + | $fieldset-padding: rem-calc(20); |
| + | $fieldset-margin: rem-calc(18 0); |
| + | $legend-padding: rem-calc(0 3); |
| + | $form-spacing: rem-calc(16); |
| + | $helptext-color: #333; |
| + | $helptext-font-size: rem-calc(13); |
| + | $helptext-font-style: italic; |
| + | $input-prefix-color: $black; |
| + | $input-prefix-background: $light-gray; |
| + | $input-prefix-border: 1px solid $medium-gray; |
| + | $input-prefix-padding: 1rem; |
| + | $form-label-color: $black; |
| + | $form-label-font-size: rem-calc(14); |
| + | $form-label-font-weight: $global-weight-normal; |
| + | $form-label-line-height: 1.8; |
| + | $select-background: #fafafa; |
| + | $select-triangle-color: #333; |
| + | $select-radius: $global-radius; |
| + | $input-color: $dark-gray; |
| + | $input-font-family: inherit; |
| + | $input-font-size: rem-calc(16); |
| + | $input-background: $white; |
| + | $input-background-focus: $white; |
| + | $input-background-disabled: $light-gray; |
| + | $input-border: 1px solid $medium-gray; |
| + | $input-border-focus: 1px solid $dark-gray; |
| + | $input-shadow: inset 0 1px 2px rgba($black, 0.1); |
| + | $input-shadow-focus: 0 0 5px $medium-gray; |
| + | $input-cursor-disabled: default; |
| + | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; |
| + | $input-number-spinners: true; |
| + | $input-radius: $global-radius; |
| + | |
| + | // 20. Label |
| + | // --------- |
| + | |
| + | $label-background: $primary-color; |
| + | $label-color: foreground($label-background); |
| + | $label-font-size: 0.8rem; |
| + | $label-padding: 0.33333rem 0.5rem; |
| + | $label-radius: $global-radius; |
| + | |
| + | // 21. Media Object |
| + | // ---------------- |
| + | |
| + | $mediaobject-margin-bottom: $global-margin; |
| + | $mediaobject-section-padding: $global-padding; |
| + | $mediaobject-image-width-stacked: 100%; |
| + | |
| + | // 22. Menu |
| + | // -------- |
| + | |
| + | $menu-margin: 0; |
| + | $menu-margin-nested: 1rem; |
| + | $menu-item-padding: 0.7rem 1rem; |
| + | $menu-icon-spacing: 0.25rem; |
| + | $menu-expand-max: 6; |
| + | |
| + | // 23. Off-canvas |
| + | // -------------- |
| + | |
| + | $offcanvas-size: 250px; |
| + | $offcanvas-background: $light-gray; |
| + | $offcanvas-zindex: -1; |
| + | $offcanvas-transition-length: 0.5s; |
| + | $offcanvas-transition-timing: ease; |
| + | $offcanvas-exit-background: rgba($white, 0.25); |
| + | $maincontent-class: 'off-canvas-content'; |
| + | $maincontent-shadow: 0 0 10px rgba($black, 0.5); |
| + | |
| + | // 24. Orbit |
| + | // --------- |
| + | |
| + | $orbit-bullet-background: $medium-gray; |
| + | $orbit-bullet-background-active: $dark-gray; |
| + | $orbit-bullet-diameter: 1.2rem; |
| + | $orbit-bullet-margin: 0.1rem; |
| + | $orbit-bullet-margin-top: 0.8rem; |
| + | $orbit-bullet-margin-bottom: 0.8rem; |
| + | $orbit-caption-background: rgba($black, 0.5); |
| + | $orbit-caption-padding: 1rem; |
| + | $orbit-control-background-hover: rgba($black, 0.5); |
| + | $orbit-control-padding: 1rem; |
| + | $orbit-control-zindex: 10; |
| + | |
| + | // 25. Pagination |
| + | // -------------- |
| + | |
| + | $pagination-font-size: rem-calc(14); |
| + | $pagination-margin-bottom: $global-margin; |
| + | $pagination-item-color: $black; |
| + | $pagination-item-padding: rem-calc(3 10); |
| + | $pagination-item-spacing: rem-calc(1); |
| + | $pagination-radius: $global-radius; |
| + | $pagination-item-background-hover: $light-gray; |
| + | $pagination-item-background-current: $primary-color; |
| + | $pagination-item-color-current: foreground($pagination-item-background-current); |
| + | $pagination-item-color-disabled: $medium-gray; |
| + | $pagination-ellipsis-color: $black; |
| + | $pagination-mobile-items: false; |
| + | $pagination-arrows: true; |
| + | |
| + | // 26. Progress Bar |
| + | // ---------------- |
| + | |
| + | $progress-height: 1rem; |
| + | $progress-background: $medium-gray; |
| + | $progress-margin-bottom: $global-margin; |
| + | $progress-meter-background: $primary-color; |
| + | $progress-radius: $global-radius; |
| + | |
| + | // 27. Reveal |
| + | // ---------- |
| + | |
| + | $reveal-background: $white; |
| + | $reveal-width: 600px; |
| + | $reveal-max-width: $global-width; |
| + | $reveal-offset: rem-calc(100); |
| + | $reveal-padding: $global-padding; |
| + | $reveal-border: 1px solid $medium-gray; |
| + | $reveal-radius: $global-radius; |
| + | $reveal-zindex: 1005; |
| + | $reveal-overlay-background: rgba($black, 0.45); |
| + | |
| + | // 28. Slider |
| + | // ---------- |
| + | |
| + | $slider-height: 0.5rem; |
| + | $slider-width-vertical: $slider-height; |
| + | $slider-background: $light-gray; |
| + | $slider-fill-background: $medium-gray; |
| + | $slider-handle-height: 1.4rem; |
| + | $slider-handle-width: 1.4rem; |
| + | $slider-handle-background: $primary-color; |
| + | $slider-opacity-disabled: 0.25; |
| + | $slider-radius: $global-radius; |
| + | $slider-transition: all 0.2s ease-in-out; |
| + | |
| + | // 29. Switch |
| + | // ---------- |
| + | |
| + | $switch-background: $medium-gray; |
| + | $switch-background-active: $primary-color; |
| + | $switch-height: 2rem; |
| + | $switch-height-tiny: 1.5rem; |
| + | $switch-height-small: 1.75rem; |
| + | $switch-height-large: 2.5rem; |
| + | $switch-radius: $global-radius; |
| + | $switch-margin: $global-margin; |
| + | $switch-paddle-background: $white; |
| + | $switch-paddle-offset: 0.25rem; |
| + | $switch-paddle-radius: $global-radius; |
| + | $switch-paddle-transition: all 0.25s ease-out; |
| + | |
| + | // 30. Table |
| + | // --------- |
| + | |
| + | $table-background: $white; |
| + | $table-color-scale: 5%; |
| + | $table-border: 1px solid smart-scale($table-background, $table-color-scale); |
| + | $table-padding: rem-calc(8 10 10); |
| + | $table-hover-scale: 2%; |
| + | $table-row-hover: darken($table-background, $table-hover-scale); |
| + | $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); |
| + | $table-striped-background: smart-scale($table-background, $table-color-scale); |
| + | $table-stripe: even; |
| + | $table-head-background: smart-scale($table-background, $table-color-scale / 2); |
| + | $table-foot-background: smart-scale($table-background, $table-color-scale); |
| + | $table-head-font-color: $body-font-color; |
| + | $show-header-for-stacked: false; |
| + | |
| + | // 31. Tabs |
| + | // -------- |
| + | |
| + | $tab-margin: 0; |
| + | $tab-background: $white; |
| + | $tab-background-active: $light-gray; |
| + | $tab-border: $light-gray; |
| + | $tab-item-color: foreground($tab-background, $primary-color); |
| + | $tab-item-background-hover: $white; |
| + | $tab-item-padding: 1.25rem 1.5rem; |
| + | $tab-expand-max: 6; |
| + | $tab-content-background: $white; |
| + | $tab-content-border: $light-gray; |
| + | $tab-content-color: foreground($tab-background, $primary-color); |
| + | $tab-content-padding: 1rem; |
| + | |
| + | // 32. Thumbnail |
| + | // ------------- |
| + | |
| + | $thumbnail-border: solid 4px $white; |
| + | $thumbnail-margin-bottom: $global-margin; |
| + | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); |
| + | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); |
| + | $thumbnail-transition: box-shadow 200ms ease-out; |
| + | $thumbnail-radius: $global-radius; |
| + | |
| + | // 33. Tooltip |
| + | // ----------- |
| + | |
| + | $tooltip-background-color: $black; |
| + | $tooltip-color: $white; |
| + | $tooltip-padding: 0.75rem; |
| + | $tooltip-font-size: $small-font-size; |
| + | $tooltip-pip-width: 0.75rem; |
| + | $tooltip-pip-height: $tooltip-pip-width * 0.866; |
| + | $tooltip-pip-offset: 1.25rem; |
| + | $tooltip-radius: $global-radius; |
| + | |
| + | // 34. Top Bar |
| + | // ----------- |
| + | |
| + | $topbar-padding: 0.5rem; |
| + | $topbar-background: #eee; |
| + | $topbar-link-color: #fff; |
| + | $topbar-input-width: 200px; |
public/stylesheets/app.scss
+43
-0
| @@ | @@ -0,0 +1,43 @@ |
| + | @charset 'utf-8'; |
| + | |
| + | @import 'settings'; |
| + | @import 'foundation6/foundation'; |
| + | @import 'foundation6/motion-ui'; |
| + | |
| + | @include foundation-global-styles; |
| + | @include foundation-grid; |
| + | @include foundation-typography; |
| + | @include foundation-button; |
| + | @include foundation-forms; |
| + | @include foundation-visibility-classes; |
| + | @include foundation-float-classes; |
| + | @include foundation-accordion; |
| + | @include foundation-badge; |
| + | @include foundation-breadcrumbs; |
| + | @include foundation-button-group; |
| + | @include foundation-callout; |
| + | @include foundation-close-button; |
| + | @include foundation-drilldown-menu; |
| + | @include foundation-dropdown; |
| + | @include foundation-dropdown-menu; |
| + | @include foundation-flex-video; |
| + | @include foundation-label; |
| + | @include foundation-media-object; |
| + | @include foundation-menu; |
| + | @include foundation-off-canvas; |
| + | @include foundation-orbit; |
| + | @include foundation-pagination; |
| + | @include foundation-progress-bar; |
| + | @include foundation-slider; |
| + | @include foundation-sticky; |
| + | @include foundation-reveal; |
| + | @include foundation-switch; |
| + | @include foundation-table; |
| + | @include foundation-tabs; |
| + | @include foundation-thumbnail; |
| + | @include foundation-title-bar; |
| + | @include foundation-tooltip; |
| + | @include foundation-top-bar; |
| + | |
| + | @include motion-ui-transitions; |
| + | @include motion-ui-animations; |
public/stylesheets/foundation.css
+3499
-0
| @@ | @@ -0,0 +1,3499 @@ |
| + | @charset "UTF-8"; |
| + | /** |
| + | * Foundation for Sites by ZURB |
| + | * Version 6.2.1 |
| + | * foundation.zurb.com |
| + | * Licensed under MIT Open Source |
| + | */ |
| + | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ |
| + | /** |
| + | * 1. Set default font family to sans-serif. |
| + | * 2. Prevent iOS and IE text size adjust after device orientation change, |
| + | * without disabling user zoom. |
| + | */ |
| + | html { |
| + | font-family: sans-serif; |
| + | /* 1 */ |
| + | -ms-text-size-adjust: 100%; |
| + | /* 2 */ |
| + | -webkit-text-size-adjust: 100%; |
| + | /* 2 */ } |
| + | |
| + | /** |
| + | * Remove default margin. |
| + | */ |
| + | body { |
| + | margin: 0; } |
| + | |
| + | /* HTML5 display definitions |
| + | ========================================================================== */ |
| + | /** |
| + | * Correct `block` display not defined for any HTML5 element in IE 8/9. |
| + | * Correct `block` display not defined for `details` or `summary` in IE 10/11 |
| + | * and Firefox. |
| + | * Correct `block` display not defined for `main` in IE 11. |
| + | */ |
| + | article, |
| + | aside, |
| + | details, |
| + | figcaption, |
| + | figure, |
| + | footer, |
| + | header, |
| + | hgroup, |
| + | main, |
| + | menu, |
| + | nav, |
| + | section, |
| + | summary { |
| + | display: block; } |
| + | |
| + | /** |
| + | * 1. Correct `inline-block` display not defined in IE 8/9. |
| + | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. |
| + | */ |
| + | audio, |
| + | canvas, |
| + | progress, |
| + | video { |
| + | display: inline-block; |
| + | /* 1 */ |
| + | vertical-align: baseline; |
| + | /* 2 */ } |
| + | |
| + | /** |
| + | * Prevent modern browsers from displaying `audio` without controls. |
| + | * Remove excess height in iOS 5 devices. |
| + | */ |
| + | audio:not([controls]) { |
| + | display: none; |
| + | height: 0; } |
| + | |
| + | /** |
| + | * Address `[hidden]` styling not present in IE 8/9/10. |
| + | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. |
| + | */ |
| + | [hidden], |
| + | template { |
| + | display: none; } |
| + | |
| + | /* Links |
| + | ========================================================================== */ |
| + | /** |
| + | * Remove the gray background color from active links in IE 10. |
| + | */ |
| + | a { |
| + | background-color: transparent; } |
| + | |
| + | /** |
| + | * Improve readability of focused elements when they are also in an |
| + | * active/hover state. |
| + | */ |
| + | a:active, |
| + | a:hover { |
| + | outline: 0; } |
| + | |
| + | /* Text-level semantics |
| + | ========================================================================== */ |
| + | /** |
| + | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. |
| + | */ |
| + | abbr[title] { |
| + | border-bottom: 1px dotted; } |
| + | |
| + | /** |
| + | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. |
| + | */ |
| + | b, |
| + | strong { |
| + | font-weight: bold; } |
| + | |
| + | /** |
| + | * Address styling not present in Safari and Chrome. |
| + | */ |
| + | dfn { |
| + | font-style: italic; } |
| + | |
| + | /** |
| + | * Address variable `h1` font-size and margin within `section` and `article` |
| + | * contexts in Firefox 4+, Safari, and Chrome. |
| + | */ |
| + | h1 { |
| + | font-size: 2em; |
| + | margin: 0.67em 0; } |
| + | |
| + | /** |
| + | * Address styling not present in IE 8/9. |
| + | */ |
| + | mark { |
| + | background: #ff0; |
| + | color: #000; } |
| + | |
| + | /** |
| + | * Address inconsistent and variable font size in all browsers. |
| + | */ |
| + | small { |
| + | font-size: 80%; } |
| + | |
| + | /** |
| + | * Prevent `sub` and `sup` affecting `line-height` in all browsers. |
| + | */ |
| + | sub, |
| + | sup { |
| + | font-size: 75%; |
| + | line-height: 0; |
| + | position: relative; |
| + | vertical-align: baseline; } |
| + | |
| + | sup { |
| + | top: -0.5em; } |
| + | |
| + | sub { |
| + | bottom: -0.25em; } |
| + | |
| + | /* Embedded content |
| + | ========================================================================== */ |
| + | /** |
| + | * Remove border when inside `a` element in IE 8/9/10. |
| + | */ |
| + | img { |
| + | border: 0; } |
| + | |
| + | /** |
| + | * Correct overflow not hidden in IE 9/10/11. |
| + | */ |
| + | svg:not(:root) { |
| + | overflow: hidden; } |
| + | |
| + | /* Grouping content |
| + | ========================================================================== */ |
| + | /** |
| + | * Address margin not present in IE 8/9 and Safari. |
| + | */ |
| + | figure { |
| + | margin: 1em 40px; } |
| + | |
| + | /** |
| + | * Address differences between Firefox and other browsers. |
| + | */ |
| + | hr { |
| + | box-sizing: content-box; |
| + | height: 0; } |
| + | |
| + | /** |
| + | * Contain overflow in all browsers. |
| + | */ |
| + | pre { |
| + | overflow: auto; } |
| + | |
| + | /** |
| + | * Address odd `em`-unit font size rendering in all browsers. |
| + | */ |
| + | code, |
| + | kbd, |
| + | pre, |
| + | samp { |
| + | font-family: monospace, monospace; |
| + | font-size: 1em; } |
| + | |
| + | /* Forms |
| + | ========================================================================== */ |
| + | /** |
| + | * Known limitation: by default, Chrome and Safari on OS X allow very limited |
| + | * styling of `select`, unless a `border` property is set. |
| + | */ |
| + | /** |
| + | * 1. Correct color not being inherited. |
| + | * Known issue: affects color of disabled elements. |
| + | * 2. Correct font properties not being inherited. |
| + | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. |
| + | */ |
| + | button, |
| + | input, |
| + | optgroup, |
| + | select, |
| + | textarea { |
| + | color: inherit; |
| + | /* 1 */ |
| + | font: inherit; |
| + | /* 2 */ |
| + | margin: 0; |
| + | /* 3 */ } |
| + | |
| + | /** |
| + | * Address `overflow` set to `hidden` in IE 8/9/10/11. |
| + | */ |
| + | button { |
| + | overflow: visible; } |
| + | |
| + | /** |
| + | * Address inconsistent `text-transform` inheritance for `button` and `select`. |
| + | * All other form control elements do not inherit `text-transform` values. |
| + | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. |
| + | * Correct `select` style inheritance in Firefox. |
| + | */ |
| + | button, |
| + | select { |
| + | text-transform: none; } |
| + | |
| + | /** |
| + | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` |
| + | * and `video` controls. |
| + | * 2. Correct inability to style clickable `input` types in iOS. |
| + | * 3. Improve usability and consistency of cursor style between image-type |
| + | * `input` and others. |
| + | */ |
| + | button, |
| + | html input[type="button"], |
| + | input[type="reset"], |
| + | input[type="submit"] { |
| + | -webkit-appearance: button; |
| + | /* 2 */ |
| + | cursor: pointer; |
| + | /* 3 */ } |
| + | |
| + | /** |
| + | * Re-set default cursor for disabled elements. |
| + | */ |
| + | button[disabled], |
| + | html input[disabled] { |
| + | cursor: not-allowed; } |
| + | |
| + | /** |
| + | * Remove inner padding and border in Firefox 4+. |
| + | */ |
| + | button::-moz-focus-inner, |
| + | input::-moz-focus-inner { |
| + | border: 0; |
| + | padding: 0; } |
| + | |
| + | /** |
| + | * Address Firefox 4+ setting `line-height` on `input` using `!important` in |
| + | * the UA stylesheet. |
| + | */ |
| + | input { |
| + | line-height: normal; } |
| + | |
| + | /** |
| + | * It's recommended that you don't attempt to style these elements. |
| + | * Firefox's implementation doesn't respect box-sizing, padding, or width. |
| + | * |
| + | * 1. Address box sizing set to `content-box` in IE 8/9/10. |
| + | * 2. Remove excess padding in IE 8/9/10. |
| + | */ |
| + | input[type="checkbox"], |
| + | input[type="radio"] { |
| + | box-sizing: border-box; |
| + | /* 1 */ |
| + | padding: 0; |
| + | /* 2 */ } |
| + | |
| + | /** |
| + | * Fix the cursor style for Chrome's increment/decrement buttons. For certain |
| + | * `font-size` values of the `input`, it causes the cursor style of the |
| + | * decrement button to change from `default` to `text`. |
| + | */ |
| + | input[type="number"]::-webkit-inner-spin-button, |
| + | input[type="number"]::-webkit-outer-spin-button { |
| + | height: auto; } |
| + | |
| + | /** |
| + | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. |
| + | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. |
| + | */ |
| + | input[type="search"] { |
| + | -webkit-appearance: textfield; |
| + | /* 1 */ |
| + | box-sizing: content-box; |
| + | /* 2 */ } |
| + | |
| + | /** |
| + | * Remove inner padding and search cancel button in Safari and Chrome on OS X. |
| + | * Safari (but not Chrome) clips the cancel button when the search input has |
| + | * padding (and `textfield` appearance). |
| + | */ |
| + | input[type="search"]::-webkit-search-cancel-button, |
| + | input[type="search"]::-webkit-search-decoration { |
| + | -webkit-appearance: none; } |
| + | |
| + | /** |
| + | * Define consistent border, margin, and padding. |
| + | * [NOTE] We don't enable this ruleset in Foundation, because we want the <fieldset> element to have plain styling. |
| + | */ |
| + | /* fieldset { |
| + | border: 1px solid #c0c0c0; |
| + | margin: 0 2px; |
| + | padding: 0.35em 0.625em 0.75em; |
| + | } */ |
| + | /** |
| + | * 1. Correct `color` not being inherited in IE 8/9/10/11. |
| + | * 2. Remove padding so people aren't caught out if they zero out fieldsets. |
| + | */ |
| + | legend { |
| + | border: 0; |
| + | /* 1 */ |
| + | padding: 0; |
| + | /* 2 */ } |
| + | |
| + | /** |
| + | * Remove default vertical scrollbar in IE 8/9/10/11. |
| + | */ |
| + | textarea { |
| + | overflow: auto; } |
| + | |
| + | /** |
| + | * Don't inherit the `font-weight` (applied by a rule above). |
| + | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. |
| + | */ |
| + | optgroup { |
| + | font-weight: bold; } |
| + | |
| + | /* Tables |
| + | ========================================================================== */ |
| + | /** |
| + | * Remove most spacing between table cells. |
| + | */ |
| + | table { |
| + | border-collapse: collapse; |
| + | border-spacing: 0; } |
| + | |
| + | td, |
| + | th { |
| + | padding: 0; } |
| + | |
| + | .foundation-mq { |
| + | font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; } |
| + | |
| + | html { |
| + | font-size: 100%; |
| + | box-sizing: border-box; } |
| + | |
| + | *, |
| + | *::before, |
| + | *::after { |
| + | box-sizing: inherit; } |
| + | |
| + | body { |
| + | padding: 0; |
| + | margin: 0; |
| + | font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; |
| + | font-weight: normal; |
| + | line-height: 1.5; |
| + | color: #0a0a0a; |
| + | background: #fefefe; |
| + | -webkit-font-smoothing: antialiased; |
| + | -moz-osx-font-smoothing: grayscale; } |
| + | |
| + | img { |
| + | max-width: 100%; |
| + | height: auto; |
| + | -ms-interpolation-mode: bicubic; |
| + | display: inline-block; |
| + | vertical-align: middle; } |
| + | |
| + | textarea { |
| + | height: auto; |
| + | min-height: 50px; |
| + | border-radius: 0; } |
| + | |
| + | select { |
| + | width: 100%; |
| + | border-radius: 0; } |
| + | |
| + | #map_canvas img, |
| + | #map_canvas embed, |
| + | #map_canvas object, |
| + | .map_canvas img, |
| + | .map_canvas embed, |
| + | .map_canvas object, |
| + | .mqa-display img, |
| + | .mqa-display embed, |
| + | .mqa-display object { |
| + | max-width: none !important; } |
| + | |
| + | button { |
| + | -webkit-appearance: none; |
| + | -moz-appearance: none; |
| + | background: transparent; |
| + | padding: 0; |
| + | border: 0; |
| + | border-radius: 0; |
| + | line-height: 1; } |
| + | [data-whatinput='mouse'] button { |
| + | outline: 0; } |
| + | |
| + | .is-visible { |
| + | display: block !important; } |
| + | |
| + | .is-hidden { |
| + | display: none !important; } |
| + | |
| + | .row { |
| + | max-width: 75rem; |
| + | margin-left: auto; |
| + | margin-right: auto; } |
| + | .row::before, .row::after { |
| + | content: ' '; |
| + | display: table; } |
| + | .row::after { |
| + | clear: both; } |
| + | .row.collapse > .column, .row.collapse > .columns { |
| + | padding-left: 0; |
| + | padding-right: 0; } |
| + | .row .row { |
| + | max-width: none; |
| + | margin-left: -0.625rem; |
| + | margin-right: -0.625rem; |
| + | max-width: none; } |
| + | @media screen and (min-width: 40em) { |
| + | .row .row { |
| + | margin-left: -0.9375rem; |
| + | margin-right: -0.9375rem; } } |
| + | .row .row.collapse { |
| + | margin-left: 0; |
| + | margin-right: 0; } |
| + | .row.expanded { |
| + | max-width: none; } |
| + | .row.expanded .row { |
| + | margin-left: auto; |
| + | margin-right: auto; } |
| + | |
| + | .column, .columns { |
| + | width: 100%; |
| + | float: left; |
| + | padding-left: 0.625rem; |
| + | padding-right: 0.625rem; } |
| + | @media screen and (min-width: 40em) { |
| + | .column, .columns { |
| + | padding-left: 0.9375rem; |
| + | padding-right: 0.9375rem; } } |
| + | .column:last-child:not(:first-child), .columns:last-child:not(:first-child) { |
| + | float: right; } |
| + | .column.end:last-child:last-child, .end.columns:last-child:last-child { |
| + | float: left; } |
| + | |
| + | .column.row.row, .row.row.columns { |
| + | float: none; } |
| + | .row .column.row.row, .row .row.row.columns { |
| + | padding-left: 0; |
| + | padding-right: 0; |
| + | margin-left: 0; |
| + | margin-right: 0; } |
| + | |
| + | .small-1 { |
| + | width: 8.33333%; } |
| + | |
| + | .small-push-1 { |
| + | position: relative; |
| + | left: 8.33333%; } |
| + | |
| + | .small-pull-1 { |
| + | position: relative; |
| + | left: -8.33333%; } |
| + | |
| + | .small-offset-0 { |
| + | margin-left: 0%; } |
| + | |
| + | .small-2 { |
| + | width: 16.66667%; } |
| + | |
| + | .small-push-2 { |
| + | position: relative; |
| + | left: 16.66667%; } |
| + | |
| + | .small-pull-2 { |
| + | position: relative; |
| + | left: -16.66667%; } |
| + | |
| + | .small-offset-1 { |
| + | margin-left: 8.33333%; } |
| + | |
| + | .small-3 { |
| + | width: 25%; } |
| + | |
| + | .small-push-3 { |
| + | position: relative; |
| + | left: 25%; } |
| + | |
| + | .small-pull-3 { |
| + | position: relative; |
| + | left: -25%; } |
| + | |
| + | .small-offset-2 { |
| + | margin-left: 16.66667%; } |
| + | |
| + | .small-4 { |
| + | width: 33.33333%; } |
| + | |
| + | .small-push-4 { |
| + | position: relative; |
| + | left: 33.33333%; } |
| + | |
| + | .small-pull-4 { |
| + | position: relative; |
| + | left: -33.33333%; } |
| + | |
| + | .small-offset-3 { |
| + | margin-left: 25%; } |
| + | |
| + | .small-5 { |
| + | width: 41.66667%; } |
| + | |
| + | .small-push-5 { |
| + | position: relative; |
| + | left: 41.66667%; } |
| + | |
| + | .small-pull-5 { |
| + | position: relative; |
| + | left: -41.66667%; } |
| + | |
| + | .small-offset-4 { |
| + | margin-left: 33.33333%; } |
| + | |
| + | .small-6 { |
| + | width: 50%; } |
| + | |
| + | .small-push-6 { |
| + | position: relative; |
| + | left: 50%; } |
| + | |
| + | .small-pull-6 { |
| + | position: relative; |
| + | left: -50%; } |
| + | |
| + | .small-offset-5 { |
| + | margin-left: 41.66667%; } |
| + | |
| + | .small-7 { |
| + | width: 58.33333%; } |
| + | |
| + | .small-push-7 { |
| + | position: relative; |
| + | left: 58.33333%; } |
| + | |
| + | .small-pull-7 { |
| + | position: relative; |
| + | left: -58.33333%; } |
| + | |
| + | .small-offset-6 { |
| + | margin-left: 50%; } |
| + | |
| + | .small-8 { |
| + | width: 66.66667%; } |
| + | |
| + | .small-push-8 { |
| + | position: relative; |
| + | left: 66.66667%; } |
| + | |
| + | .small-pull-8 { |
| + | position: relative; |
| + | left: -66.66667%; } |
| + | |
| + | .small-offset-7 { |
| + | margin-left: 58.33333%; } |
| + | |
| + | .small-9 { |
| + | width: 75%; } |
| + | |
| + | .small-push-9 { |
| + | position: relative; |
| + | left: 75%; } |
| + | |
| + | .small-pull-9 { |
| + | position: relative; |
| + | left: -75%; } |
| + | |
| + | .small-offset-8 { |
| + | margin-left: 66.66667%; } |
| + | |
| + | .small-10 { |
| + | width: 83.33333%; } |
| + | |
| + | .small-push-10 { |
| + | position: relative; |
| + | left: 83.33333%; } |
| + | |
| + | .small-pull-10 { |
| + | position: relative; |
| + | left: -83.33333%; } |
| + | |
| + | .small-offset-9 { |
| + | margin-left: 75%; } |
| + | |
| + | .small-11 { |
| + | width: 91.66667%; } |
| + | |
| + | .small-push-11 { |
| + | position: relative; |
| + | left: 91.66667%; } |
| + | |
| + | .small-pull-11 { |
| + | position: relative; |
| + | left: -91.66667%; } |
| + | |
| + | .small-offset-10 { |
| + | margin-left: 83.33333%; } |
| + | |
| + | .small-12 { |
| + | width: 100%; } |
| + | |
| + | .small-offset-11 { |
| + | margin-left: 91.66667%; } |
| + | |
| + | .small-up-1 > .column, .small-up-1 > .columns { |
| + | width: 100%; |
| + | float: left; } |
| + | .small-up-1 > .column:nth-of-type(1n), .small-up-1 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .small-up-1 > .column:nth-of-type(1n+1), .small-up-1 > .columns:nth-of-type(1n+1) { |
| + | clear: both; } |
| + | .small-up-1 > .column:last-child, .small-up-1 > .columns:last-child { |
| + | float: left; } |
| + | |
| + | .small-up-2 > .column, .small-up-2 > .columns { |
| + | width: 50%; |
| + | float: left; } |
| + | .small-up-2 > .column:nth-of-type(1n), .small-up-2 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .small-up-2 > .column:nth-of-type(2n+1), .small-up-2 > .columns:nth-of-type(2n+1) { |
| + | clear: both; } |
| + | .small-up-2 > .column:last-child, .small-up-2 > .columns:last-child { |
| + | float: left; } |
| + | |
| + | .small-up-3 > .column, .small-up-3 > .columns { |
| + | width: 33.33333%; |
| + | float: left; } |
| + | .small-up-3 > .column:nth-of-type(1n), .small-up-3 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .small-up-3 > .column:nth-of-type(3n+1), .small-up-3 > .columns:nth-of-type(3n+1) { |
| + | clear: both; } |
| + | .small-up-3 > .column:last-child, .small-up-3 > .columns:last-child { |
| + | float: left; } |
| + | |
| + | .small-up-4 > .column, .small-up-4 > .columns { |
| + | width: 25%; |
| + | float: left; } |
| + | .small-up-4 > .column:nth-of-type(1n), .small-up-4 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .small-up-4 > .column:nth-of-type(4n+1), .small-up-4 > .columns:nth-of-type(4n+1) { |
| + | clear: both; } |
| + | .small-up-4 > .column:last-child, .small-up-4 > .columns:last-child { |
| + | float: left; } |
| + | |
| + | .small-up-5 > .column, .small-up-5 > .columns { |
| + | width: 20%; |
| + | float: left; } |
| + | .small-up-5 > .column:nth-of-type(1n), .small-up-5 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .small-up-5 > .column:nth-of-type(5n+1), .small-up-5 > .columns:nth-of-type(5n+1) { |
| + | clear: both; } |
| + | .small-up-5 > .column:last-child, .small-up-5 > .columns:last-child { |
| + | float: left; } |
| + | |
| + | .small-up-6 > .column, .small-up-6 > .columns { |
| + | width: 16.66667%; |
| + | float: left; } |
| + | .small-up-6 > .column:nth-of-type(1n), .small-up-6 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .small-up-6 > .column:nth-of-type(6n+1), .small-up-6 > .columns:nth-of-type(6n+1) { |
| + | clear: both; } |
| + | .small-up-6 > .column:last-child, .small-up-6 > .columns:last-child { |
| + | float: left; } |
| + | |
| + | .small-up-7 > .column, .small-up-7 > .columns { |
| + | width: 14.28571%; |
| + | float: left; } |
| + | .small-up-7 > .column:nth-of-type(1n), .small-up-7 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .small-up-7 > .column:nth-of-type(7n+1), .small-up-7 > .columns:nth-of-type(7n+1) { |
| + | clear: both; } |
| + | .small-up-7 > .column:last-child, .small-up-7 > .columns:last-child { |
| + | float: left; } |
| + | |
| + | .small-up-8 > .column, .small-up-8 > .columns { |
| + | width: 12.5%; |
| + | float: left; } |
| + | .small-up-8 > .column:nth-of-type(1n), .small-up-8 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .small-up-8 > .column:nth-of-type(8n+1), .small-up-8 > .columns:nth-of-type(8n+1) { |
| + | clear: both; } |
| + | .small-up-8 > .column:last-child, .small-up-8 > .columns:last-child { |
| + | float: left; } |
| + | |
| + | .small-collapse > .column, .small-collapse > .columns { |
| + | padding-left: 0; |
| + | padding-right: 0; } |
| + | |
| + | .small-collapse .row { |
| + | margin-left: 0; |
| + | margin-right: 0; } |
| + | |
| + | .small-uncollapse > .column, .small-uncollapse > .columns { |
| + | padding-left: 0.625rem; |
| + | padding-right: 0.625rem; } |
| + | |
| + | .small-centered { |
| + | float: none; |
| + | margin-left: auto; |
| + | margin-right: auto; } |
| + | |
| + | .small-uncentered, |
| + | .small-push-0, |
| + | .small-pull-0 { |
| + | position: static; |
| + | margin-left: 0; |
| + | margin-right: 0; |
| + | float: left; } |
| + | |
| + | @media screen and (min-width: 40em) { |
| + | .medium-1 { |
| + | width: 8.33333%; } |
| + | .medium-push-1 { |
| + | position: relative; |
| + | left: 8.33333%; } |
| + | .medium-pull-1 { |
| + | position: relative; |
| + | left: -8.33333%; } |
| + | .medium-offset-0 { |
| + | margin-left: 0%; } |
| + | .medium-2 { |
| + | width: 16.66667%; } |
| + | .medium-push-2 { |
| + | position: relative; |
| + | left: 16.66667%; } |
| + | .medium-pull-2 { |
| + | position: relative; |
| + | left: -16.66667%; } |
| + | .medium-offset-1 { |
| + | margin-left: 8.33333%; } |
| + | .medium-3 { |
| + | width: 25%; } |
| + | .medium-push-3 { |
| + | position: relative; |
| + | left: 25%; } |
| + | .medium-pull-3 { |
| + | position: relative; |
| + | left: -25%; } |
| + | .medium-offset-2 { |
| + | margin-left: 16.66667%; } |
| + | .medium-4 { |
| + | width: 33.33333%; } |
| + | .medium-push-4 { |
| + | position: relative; |
| + | left: 33.33333%; } |
| + | .medium-pull-4 { |
| + | position: relative; |
| + | left: -33.33333%; } |
| + | .medium-offset-3 { |
| + | margin-left: 25%; } |
| + | .medium-5 { |
| + | width: 41.66667%; } |
| + | .medium-push-5 { |
| + | position: relative; |
| + | left: 41.66667%; } |
| + | .medium-pull-5 { |
| + | position: relative; |
| + | left: -41.66667%; } |
| + | .medium-offset-4 { |
| + | margin-left: 33.33333%; } |
| + | .medium-6 { |
| + | width: 50%; } |
| + | .medium-push-6 { |
| + | position: relative; |
| + | left: 50%; } |
| + | .medium-pull-6 { |
| + | position: relative; |
| + | left: -50%; } |
| + | .medium-offset-5 { |
| + | margin-left: 41.66667%; } |
| + | .medium-7 { |
| + | width: 58.33333%; } |
| + | .medium-push-7 { |
| + | position: relative; |
| + | left: 58.33333%; } |
| + | .medium-pull-7 { |
| + | position: relative; |
| + | left: -58.33333%; } |
| + | .medium-offset-6 { |
| + | margin-left: 50%; } |
| + | .medium-8 { |
| + | width: 66.66667%; } |
| + | .medium-push-8 { |
| + | position: relative; |
| + | left: 66.66667%; } |
| + | .medium-pull-8 { |
| + | position: relative; |
| + | left: -66.66667%; } |
| + | .medium-offset-7 { |
| + | margin-left: 58.33333%; } |
| + | .medium-9 { |
| + | width: 75%; } |
| + | .medium-push-9 { |
| + | position: relative; |
| + | left: 75%; } |
| + | .medium-pull-9 { |
| + | position: relative; |
| + | left: -75%; } |
| + | .medium-offset-8 { |
| + | margin-left: 66.66667%; } |
| + | .medium-10 { |
| + | width: 83.33333%; } |
| + | .medium-push-10 { |
| + | position: relative; |
| + | left: 83.33333%; } |
| + | .medium-pull-10 { |
| + | position: relative; |
| + | left: -83.33333%; } |
| + | .medium-offset-9 { |
| + | margin-left: 75%; } |
| + | .medium-11 { |
| + | width: 91.66667%; } |
| + | .medium-push-11 { |
| + | position: relative; |
| + | left: 91.66667%; } |
| + | .medium-pull-11 { |
| + | position: relative; |
| + | left: -91.66667%; } |
| + | .medium-offset-10 { |
| + | margin-left: 83.33333%; } |
| + | .medium-12 { |
| + | width: 100%; } |
| + | .medium-offset-11 { |
| + | margin-left: 91.66667%; } |
| + | .medium-up-1 > .column, .medium-up-1 > .columns { |
| + | width: 100%; |
| + | float: left; } |
| + | .medium-up-1 > .column:nth-of-type(1n), .medium-up-1 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .medium-up-1 > .column:nth-of-type(1n+1), .medium-up-1 > .columns:nth-of-type(1n+1) { |
| + | clear: both; } |
| + | .medium-up-1 > .column:last-child, .medium-up-1 > .columns:last-child { |
| + | float: left; } |
| + | .medium-up-2 > .column, .medium-up-2 > .columns { |
| + | width: 50%; |
| + | float: left; } |
| + | .medium-up-2 > .column:nth-of-type(1n), .medium-up-2 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .medium-up-2 > .column:nth-of-type(2n+1), .medium-up-2 > .columns:nth-of-type(2n+1) { |
| + | clear: both; } |
| + | .medium-up-2 > .column:last-child, .medium-up-2 > .columns:last-child { |
| + | float: left; } |
| + | .medium-up-3 > .column, .medium-up-3 > .columns { |
| + | width: 33.33333%; |
| + | float: left; } |
| + | .medium-up-3 > .column:nth-of-type(1n), .medium-up-3 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .medium-up-3 > .column:nth-of-type(3n+1), .medium-up-3 > .columns:nth-of-type(3n+1) { |
| + | clear: both; } |
| + | .medium-up-3 > .column:last-child, .medium-up-3 > .columns:last-child { |
| + | float: left; } |
| + | .medium-up-4 > .column, .medium-up-4 > .columns { |
| + | width: 25%; |
| + | float: left; } |
| + | .medium-up-4 > .column:nth-of-type(1n), .medium-up-4 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .medium-up-4 > .column:nth-of-type(4n+1), .medium-up-4 > .columns:nth-of-type(4n+1) { |
| + | clear: both; } |
| + | .medium-up-4 > .column:last-child, .medium-up-4 > .columns:last-child { |
| + | float: left; } |
| + | .medium-up-5 > .column, .medium-up-5 > .columns { |
| + | width: 20%; |
| + | float: left; } |
| + | .medium-up-5 > .column:nth-of-type(1n), .medium-up-5 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .medium-up-5 > .column:nth-of-type(5n+1), .medium-up-5 > .columns:nth-of-type(5n+1) { |
| + | clear: both; } |
| + | .medium-up-5 > .column:last-child, .medium-up-5 > .columns:last-child { |
| + | float: left; } |
| + | .medium-up-6 > .column, .medium-up-6 > .columns { |
| + | width: 16.66667%; |
| + | float: left; } |
| + | .medium-up-6 > .column:nth-of-type(1n), .medium-up-6 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .medium-up-6 > .column:nth-of-type(6n+1), .medium-up-6 > .columns:nth-of-type(6n+1) { |
| + | clear: both; } |
| + | .medium-up-6 > .column:last-child, .medium-up-6 > .columns:last-child { |
| + | float: left; } |
| + | .medium-up-7 > .column, .medium-up-7 > .columns { |
| + | width: 14.28571%; |
| + | float: left; } |
| + | .medium-up-7 > .column:nth-of-type(1n), .medium-up-7 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .medium-up-7 > .column:nth-of-type(7n+1), .medium-up-7 > .columns:nth-of-type(7n+1) { |
| + | clear: both; } |
| + | .medium-up-7 > .column:last-child, .medium-up-7 > .columns:last-child { |
| + | float: left; } |
| + | .medium-up-8 > .column, .medium-up-8 > .columns { |
| + | width: 12.5%; |
| + | float: left; } |
| + | .medium-up-8 > .column:nth-of-type(1n), .medium-up-8 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .medium-up-8 > .column:nth-of-type(8n+1), .medium-up-8 > .columns:nth-of-type(8n+1) { |
| + | clear: both; } |
| + | .medium-up-8 > .column:last-child, .medium-up-8 > .columns:last-child { |
| + | float: left; } |
| + | .medium-collapse > .column, .medium-collapse > .columns { |
| + | padding-left: 0; |
| + | padding-right: 0; } |
| + | .medium-collapse .row { |
| + | margin-left: 0; |
| + | margin-right: 0; } |
| + | .medium-uncollapse > .column, .medium-uncollapse > .columns { |
| + | padding-left: 0.9375rem; |
| + | padding-right: 0.9375rem; } |
| + | .medium-centered { |
| + | float: none; |
| + | margin-left: auto; |
| + | margin-right: auto; } |
| + | .medium-uncentered, |
| + | .medium-push-0, |
| + | .medium-pull-0 { |
| + | position: static; |
| + | margin-left: 0; |
| + | margin-right: 0; |
| + | float: left; } } |
| + | |
| + | @media screen and (min-width: 64em) { |
| + | .large-1 { |
| + | width: 8.33333%; } |
| + | .large-push-1 { |
| + | position: relative; |
| + | left: 8.33333%; } |
| + | .large-pull-1 { |
| + | position: relative; |
| + | left: -8.33333%; } |
| + | .large-offset-0 { |
| + | margin-left: 0%; } |
| + | .large-2 { |
| + | width: 16.66667%; } |
| + | .large-push-2 { |
| + | position: relative; |
| + | left: 16.66667%; } |
| + | .large-pull-2 { |
| + | position: relative; |
| + | left: -16.66667%; } |
| + | .large-offset-1 { |
| + | margin-left: 8.33333%; } |
| + | .large-3 { |
| + | width: 25%; } |
| + | .large-push-3 { |
| + | position: relative; |
| + | left: 25%; } |
| + | .large-pull-3 { |
| + | position: relative; |
| + | left: -25%; } |
| + | .large-offset-2 { |
| + | margin-left: 16.66667%; } |
| + | .large-4 { |
| + | width: 33.33333%; } |
| + | .large-push-4 { |
| + | position: relative; |
| + | left: 33.33333%; } |
| + | .large-pull-4 { |
| + | position: relative; |
| + | left: -33.33333%; } |
| + | .large-offset-3 { |
| + | margin-left: 25%; } |
| + | .large-5 { |
| + | width: 41.66667%; } |
| + | .large-push-5 { |
| + | position: relative; |
| + | left: 41.66667%; } |
| + | .large-pull-5 { |
| + | position: relative; |
| + | left: -41.66667%; } |
| + | .large-offset-4 { |
| + | margin-left: 33.33333%; } |
| + | .large-6 { |
| + | width: 50%; } |
| + | .large-push-6 { |
| + | position: relative; |
| + | left: 50%; } |
| + | .large-pull-6 { |
| + | position: relative; |
| + | left: -50%; } |
| + | .large-offset-5 { |
| + | margin-left: 41.66667%; } |
| + | .large-7 { |
| + | width: 58.33333%; } |
| + | .large-push-7 { |
| + | position: relative; |
| + | left: 58.33333%; } |
| + | .large-pull-7 { |
| + | position: relative; |
| + | left: -58.33333%; } |
| + | .large-offset-6 { |
| + | margin-left: 50%; } |
| + | .large-8 { |
| + | width: 66.66667%; } |
| + | .large-push-8 { |
| + | position: relative; |
| + | left: 66.66667%; } |
| + | .large-pull-8 { |
| + | position: relative; |
| + | left: -66.66667%; } |
| + | .large-offset-7 { |
| + | margin-left: 58.33333%; } |
| + | .large-9 { |
| + | width: 75%; } |
| + | .large-push-9 { |
| + | position: relative; |
| + | left: 75%; } |
| + | .large-pull-9 { |
| + | position: relative; |
| + | left: -75%; } |
| + | .large-offset-8 { |
| + | margin-left: 66.66667%; } |
| + | .large-10 { |
| + | width: 83.33333%; } |
| + | .large-push-10 { |
| + | position: relative; |
| + | left: 83.33333%; } |
| + | .large-pull-10 { |
| + | position: relative; |
| + | left: -83.33333%; } |
| + | .large-offset-9 { |
| + | margin-left: 75%; } |
| + | .large-11 { |
| + | width: 91.66667%; } |
| + | .large-push-11 { |
| + | position: relative; |
| + | left: 91.66667%; } |
| + | .large-pull-11 { |
| + | position: relative; |
| + | left: -91.66667%; } |
| + | .large-offset-10 { |
| + | margin-left: 83.33333%; } |
| + | .large-12 { |
| + | width: 100%; } |
| + | .large-offset-11 { |
| + | margin-left: 91.66667%; } |
| + | .large-up-1 > .column, .large-up-1 > .columns { |
| + | width: 100%; |
| + | float: left; } |
| + | .large-up-1 > .column:nth-of-type(1n), .large-up-1 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .large-up-1 > .column:nth-of-type(1n+1), .large-up-1 > .columns:nth-of-type(1n+1) { |
| + | clear: both; } |
| + | .large-up-1 > .column:last-child, .large-up-1 > .columns:last-child { |
| + | float: left; } |
| + | .large-up-2 > .column, .large-up-2 > .columns { |
| + | width: 50%; |
| + | float: left; } |
| + | .large-up-2 > .column:nth-of-type(1n), .large-up-2 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .large-up-2 > .column:nth-of-type(2n+1), .large-up-2 > .columns:nth-of-type(2n+1) { |
| + | clear: both; } |
| + | .large-up-2 > .column:last-child, .large-up-2 > .columns:last-child { |
| + | float: left; } |
| + | .large-up-3 > .column, .large-up-3 > .columns { |
| + | width: 33.33333%; |
| + | float: left; } |
| + | .large-up-3 > .column:nth-of-type(1n), .large-up-3 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) { |
| + | clear: both; } |
| + | .large-up-3 > .column:last-child, .large-up-3 > .columns:last-child { |
| + | float: left; } |
| + | .large-up-4 > .column, .large-up-4 > .columns { |
| + | width: 25%; |
| + | float: left; } |
| + | .large-up-4 > .column:nth-of-type(1n), .large-up-4 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .large-up-4 > .column:nth-of-type(4n+1), .large-up-4 > .columns:nth-of-type(4n+1) { |
| + | clear: both; } |
| + | .large-up-4 > .column:last-child, .large-up-4 > .columns:last-child { |
| + | float: left; } |
| + | .large-up-5 > .column, .large-up-5 > .columns { |
| + | width: 20%; |
| + | float: left; } |
| + | .large-up-5 > .column:nth-of-type(1n), .large-up-5 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .large-up-5 > .column:nth-of-type(5n+1), .large-up-5 > .columns:nth-of-type(5n+1) { |
| + | clear: both; } |
| + | .large-up-5 > .column:last-child, .large-up-5 > .columns:last-child { |
| + | float: left; } |
| + | .large-up-6 > .column, .large-up-6 > .columns { |
| + | width: 16.66667%; |
| + | float: left; } |
| + | .large-up-6 > .column:nth-of-type(1n), .large-up-6 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .large-up-6 > .column:nth-of-type(6n+1), .large-up-6 > .columns:nth-of-type(6n+1) { |
| + | clear: both; } |
| + | .large-up-6 > .column:last-child, .large-up-6 > .columns:last-child { |
| + | float: left; } |
| + | .large-up-7 > .column, .large-up-7 > .columns { |
| + | width: 14.28571%; |
| + | float: left; } |
| + | .large-up-7 > .column:nth-of-type(1n), .large-up-7 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .large-up-7 > .column:nth-of-type(7n+1), .large-up-7 > .columns:nth-of-type(7n+1) { |
| + | clear: both; } |
| + | .large-up-7 > .column:last-child, .large-up-7 > .columns:last-child { |
| + | float: left; } |
| + | .large-up-8 > .column, .large-up-8 > .columns { |
| + | width: 12.5%; |
| + | float: left; } |
| + | .large-up-8 > .column:nth-of-type(1n), .large-up-8 > .columns:nth-of-type(1n) { |
| + | clear: none; } |
| + | .large-up-8 > .column:nth-of-type(8n+1), .large-up-8 > .columns:nth-of-type(8n+1) { |
| + | clear: both; } |
| + | .large-up-8 > .column:last-child, .large-up-8 > .columns:last-child { |
| + | float: left; } |
| + | .large-collapse > .column, .large-collapse > .columns { |
| + | padding-left: 0; |
| + | padding-right: 0; } |
| + | .large-collapse .row { |
| + | margin-left: 0; |
| + | margin-right: 0; } |
| + | .large-uncollapse > .column, .large-uncollapse > .columns { |
| + | padding-left: 0.9375rem; |
| + | padding-right: 0.9375rem; } |
| + | .large-centered { |
| + | float: none; |
| + | margin-left: auto; |
| + | margin-right: auto; } |
| + | .large-uncentered, |
| + | .large-push-0, |
| + | .large-pull-0 { |
| + | position: static; |
| + | margin-left: 0; |
| + | margin-right: 0; |
| + | float: left; } } |
| + | |
| + | div, |
| + | dl, |
| + | dt, |
| + | dd, |
| + | ul, |
| + | ol, |
| + | li, |
| + | h1, |
| + | h2, |
| + | h3, |
| + | h4, |
| + | h5, |
| + | h6, |
| + | pre, |
| + | form, |
| + | p, |
| + | blockquote, |
| + | th, |
| + | td { |
| + | margin: 0; |
| + | padding: 0; } |
| + | |
| + | p { |
| + | font-size: inherit; |
| + | line-height: 1.6; |
| + | margin-bottom: 1rem; |
| + | text-rendering: optimizeLegibility; } |
| + | |
| + | em, |
| + | i { |
| + | font-style: italic; |
| + | line-height: inherit; } |
| + | |
| + | strong, |
| + | b { |
| + | font-weight: bold; |
| + | line-height: inherit; } |
| + | |
| + | small { |
| + | font-size: 80%; |
| + | line-height: inherit; } |
| + | |
| + | h1, |
| + | h2, |
| + | h3, |
| + | h4, |
| + | h5, |
| + | h6 { |
| + | font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; |
| + | font-weight: normal; |
| + | font-style: normal; |
| + | color: inherit; |
| + | text-rendering: optimizeLegibility; |
| + | margin-top: 0; |
| + | margin-bottom: 0.5rem; |
| + | line-height: 1.4; } |
| + | h1 small, |
| + | h2 small, |
| + | h3 small, |
| + | h4 small, |
| + | h5 small, |
| + | h6 small { |
| + | color: #cacaca; |
| + | line-height: 0; } |
| + | |
| + | h1 { |
| + | font-size: 1.5rem; } |
| + | |
| + | h2 { |
| + | font-size: 1.25rem; } |
| + | |
| + | h3 { |
| + | font-size: 1.1875rem; } |
| + | |
| + | h4 { |
| + | font-size: 1.125rem; } |
| + | |
| + | h5 { |
| + | font-size: 1.0625rem; } |
| + | |
| + | h6 { |
| + | font-size: 1rem; } |
| + | |
| + | @media screen and (min-width: 40em) { |
| + | h1 { |
| + | font-size: 3rem; } |
| + | h2 { |
| + | font-size: 2.5rem; } |
| + | h3 { |
| + | font-size: 1.9375rem; } |
| + | h4 { |
| + | font-size: 1.5625rem; } |
| + | h5 { |
| + | font-size: 1.25rem; } |
| + | h6 { |
| + | font-size: 1rem; } } |
| + | |
| + | a { |
| + | color: #2199e8; |
| + | text-decoration: none; |
| + | line-height: inherit; |
| + | cursor: pointer; } |
| + | a:hover, a:focus { |
| + | color: #1585cf; } |
| + | a img { |
| + | border: 0; } |
| + | |
| + | hr { |
| + | max-width: 75rem; |
| + | height: 0; |
| + | border-right: 0; |
| + | border-top: 0; |
| + | border-bottom: 1px solid #cacaca; |
| + | border-left: 0; |
| + | margin: 1.25rem auto; |
| + | clear: both; } |
| + | |
| + | ul, |
| + | ol, |
| + | dl { |
| + | line-height: 1.6; |
| + | margin-bottom: 1rem; |
| + | list-style-position: outside; } |
| + | |
| + | li { |
| + | font-size: inherit; } |
| + | |
| + | ul { |
| + | list-style-type: disc; |
| + | margin-left: 1.25rem; } |
| + | |
| + | ol { |
| + | margin-left: 1.25rem; } |
| + | |
| + | ul ul, ol ul, ul ol, ol ol { |
| + | margin-left: 1.25rem; |
| + | margin-bottom: 0; } |
| + | |
| + | dl { |
| + | margin-bottom: 1rem; } |
| + | dl dt { |
| + | margin-bottom: 0.3rem; |
| + | font-weight: bold; } |
| + | |
| + | blockquote { |
| + | margin: 0 0 1rem; |
| + | padding: 0.5625rem 1.25rem 0 1.1875rem; |
| + | border-left: 1px solid #cacaca; } |
| + | blockquote, blockquote p { |
| + | line-height: 1.6; |
| + | color: #8a8a8a; } |
| + | |
| + | cite { |
| + | display: block; |
| + | font-size: 0.8125rem; |
| + | color: #8a8a8a; } |
| + | cite:before { |
| + | content: '\2014 \0020'; } |
| + | |
| + | abbr { |
| + | color: #0a0a0a; |
| + | cursor: help; |
| + | border-bottom: 1px dotted #0a0a0a; } |
| + | |
| + | code { |
| + | font-family: Consolas, "Liberation Mono", Courier, monospace; |
| + | font-weight: normal; |
| + | color: #0a0a0a; |
| + | background-color: #e6e6e6; |
| + | border: 1px solid #cacaca; |
| + | padding: 0.125rem 0.3125rem 0.0625rem; } |
| + | |
| + | kbd { |
| + | padding: 0.125rem 0.25rem 0; |
| + | margin: 0; |
| + | background-color: #e6e6e6; |
| + | color: #0a0a0a; |
| + | font-family: Consolas, "Liberation Mono", Courier, monospace; } |
| + | |
| + | .subheader { |
| + | margin-top: 0.2rem; |
| + | margin-bottom: 0.5rem; |
| + | font-weight: normal; |
| + | line-height: 1.4; |
| + | color: #8a8a8a; } |
| + | |
| + | .lead { |
| + | font-size: 125%; |
| + | line-height: 1.6; } |
| + | |
| + | .stat { |
| + | font-size: 2.5rem; |
| + | line-height: 1; } |
| + | p + .stat { |
| + | margin-top: -1rem; } |
| + | |
| + | .no-bullet { |
| + | margin-left: 0; |
| + | list-style: none; } |
| + | |
| + | .text-left { |
| + | text-align: left; } |
| + | |
| + | .text-right { |
| + | text-align: right; } |
| + | |
| + | .text-center { |
| + | text-align: center; } |
| + | |
| + | .text-justify { |
| + | text-align: justify; } |
| + | |
| + | @media screen and (min-width: 40em) { |
| + | .medium-text-left { |
| + | text-align: left; } |
| + | .medium-text-right { |
| + | text-align: right; } |
| + | .medium-text-center { |
| + | text-align: center; } |
| + | .medium-text-justify { |
| + | text-align: justify; } } |
| + | |
| + | @media screen and (min-width: 64em) { |
| + | .large-text-left { |
| + | text-align: left; } |
| + | .large-text-right { |
| + | text-align: right; } |
| + | .large-text-center { |
| + | text-align: center; } |
| + | .large-text-justify { |
| + | text-align: justify; } } |
| + | |
| + | .show-for-print { |
| + | display: none !important; } |
| + | |
| + | @media print { |
| + | * { |
| + | background: transparent !important; |
| + | color: black !important; |
| + | box-shadow: none !important; |
| + | 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; } |
| + | a, |
| + | a:visited { |
| + | text-decoration: underline; } |
| + | a[href]:after { |
| + | content: " (" attr(href) ")"; } |
| + | .ir a:after, |
| + | a[href^='javascript:']:after, |
| + | a[href^='#']:after { |
| + | content: ''; } |
| + | abbr[title]:after { |
| + | content: " (" attr(title) ")"; } |
| + | pre, |
| + | blockquote { |
| + | border: 1px solid #8a8a8a; |
| + | page-break-inside: avoid; } |
| + | 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; } |
| + | h2, |
| + | h3 { |
| + | page-break-after: avoid; } } |
| + | |
| + | [type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], |
| + | textarea { |
| + | display: block; |
| + | box-sizing: border-box; |
| + | width: 100%; |
| + | height: 2.4375rem; |
| + | padding: 0.5rem; |
| + | border: 1px solid #cacaca; |
| + | margin: 0 0 1rem; |
| + | font-family: inherit; |
| + | font-size: 1rem; |
| + | color: #0a0a0a; |
| + | background-color: #fefefe; |
| + | box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); |
| + | border-radius: 0; |
| + | transition: box-shadow 0.5s, border-color 0.25s ease-in-out; |
| + | -webkit-appearance: none; |
| + | -moz-appearance: none; } |
| + | [type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, |
| + | textarea:focus { |
| + | border: 1px solid #8a8a8a; |
| + | background-color: #fefefe; |
| + | outline: none; |
| + | box-shadow: 0 0 5px #cacaca; |
| + | transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } |
| + | |
| + | textarea { |
| + | max-width: 100%; } |
| + | textarea[rows] { |
| + | height: auto; } |
| + | |
| + | input::-webkit-input-placeholder, |
| + | textarea::-webkit-input-placeholder { |
| + | color: #cacaca; } |
| + | |
| + | input::-moz-placeholder, |
| + | textarea::-moz-placeholder { |
| + | color: #cacaca; } |
| + | |
| + | input:-ms-input-placeholder, |
| + | textarea:-ms-input-placeholder { |
| + | color: #cacaca; } |
| + | |
| + | input::placeholder, |
| + | textarea::placeholder { |
| + | color: #cacaca; } |
| + | |
| + | input:disabled, input[readonly], |
| + | textarea:disabled, |
| + | textarea[readonly] { |
| + | background-color: #e6e6e6; |
| + | cursor: default; } |
| + | |
| + | [type='submit'], |
| + | [type='button'] { |
| + | border-radius: 0; |
| + | -webkit-appearance: none; |
| + | -moz-appearance: none; } |
| + | |
| + | input[type='search'] { |
| + | box-sizing: border-box; } |
| + | |
| + | [type='file'], |
| + | [type='checkbox'], |
| + | [type='radio'] { |
| + | margin: 0 0 1rem; } |
| + | |
| + | [type='checkbox'] + label, |
| + | [type='radio'] + label { |
| + | display: inline-block; |
| + | margin-left: 0.5rem; |
| + | margin-right: 1rem; |
| + | margin-bottom: 0; |
| + | vertical-align: baseline; } |
| + | [type='checkbox'] + label[for], |
| + | [type='radio'] + label[for] { |
| + | cursor: pointer; } |
| + | |
| + | label > [type='checkbox'], |
| + | label > [type='radio'] { |
| + | margin-right: 0.5rem; } |
| + | |
| + | [type='file'] { |
| + | width: 100%; } |
| + | |
| + | label { |
| + | display: block; |
| + | margin: 0; |
| + | font-size: 0.875rem; |
| + | font-weight: normal; |
| + | line-height: 1.8; |
| + | color: #0a0a0a; } |
| + | label.middle { |
| + | margin: 0 0 1rem; |
| + | padding: 0.5625rem 0; } |
| + | |
| + | .help-text { |
| + | margin-top: -0.5rem; |
| + | font-size: 0.8125rem; |
| + | font-style: italic; |
| + | color: #0a0a0a; } |
| + | |
| + | .input-group { |
| + | display: table; |
| + | width: 100%; |
| + | margin-bottom: 1rem; } |
| + | .input-group > :first-child { |
| + | border-radius: 0 0 0 0; } |
| + | .input-group > :last-child > * { |
| + | border-radius: 0 0 0 0; } |
| + | |
| + | .input-group-label, .input-group-field, .input-group-button { |
| + | margin: 0; |
| + | display: table-cell; |
| + | vertical-align: middle; } |
| + | |
| + | .input-group-label { |
| + | text-align: center; |
| + | padding: 0 1rem; |
| + | background: #e6e6e6; |
| + | color: #0a0a0a; |
| + | border: 1px solid #cacaca; |
| + | white-space: nowrap; |
| + | width: 1%; |
| + | height: 100%; } |
| + | .input-group-label:first-child { |
| + | border-right: 0; } |
| + | .input-group-label:last-child { |
| + | border-left: 0; } |
| + | |
| + | .input-group-field { |
| + | border-radius: 0; |
| + | height: 2.5rem; } |
| + | |
| + | .input-group-button { |
| + | padding-top: 0; |
| + | padding-bottom: 0; |
| + | text-align: center; |
| + | height: 100%; |
| + | width: 1%; } |
| + | .input-group-button a, |
| + | .input-group-button input, |
| + | .input-group-button button { |
| + | margin: 0; } |
| + | |
| + | .input-group .input-group-button { |
| + | display: table-cell; } |
| + | |
| + | fieldset { |
| + | border: 0; |
| + | padding: 0; |
| + | margin: 0; } |
| + | |
| + | legend { |
| + | margin-bottom: 0.5rem; |
| + | max-width: 100%; } |
| + | |
| + | .fieldset { |
| + | border: 1px solid #cacaca; |
| + | padding: 1.25rem; |
| + | margin: 1.125rem 0; } |
| + | .fieldset legend { |
| + | background: #fefefe; |
| + | padding: 0 0.1875rem; |
| + | margin: 0; |
| + | margin-left: -0.1875rem; } |
| + | |
| + | select { |
| + | height: 2.4375rem; |
| + | padding: 0.5rem; |
| + | border: 1px solid #cacaca; |
| + | margin: 0 0 1rem; |
| + | font-size: 1rem; |
| + | font-family: inherit; |
| + | line-height: normal; |
| + | color: #0a0a0a; |
| + | background-color: #fefefe; |
| + | border-radius: 0; |
| + | -webkit-appearance: none; |
| + | -moz-appearance: none; |
| + | 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%28138, 138, 138%29"></polygon></svg>'); |
| + | background-size: 9px 6px; |
| + | background-position: right center; |
| + | background-origin: content-box; |
| + | background-repeat: no-repeat; } |
| + | @media screen and (min-width: 0\0) { |
| + | select { |
| + | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } } |
| + | select:disabled { |
| + | background-color: #e6e6e6; |
| + | cursor: default; } |
| + | select::-ms-expand { |
| + | display: none; } |
| + | select[multiple] { |
| + | height: auto; |
| + | background-image: none; } |
| + | |
| + | .is-invalid-input:not(:focus) { |
| + | background-color: rgba(236, 88, 64, 0.1); |
| + | border-color: #ec5840; } |
| + | |
| + | .is-invalid-label { |
| + | color: #ec5840; } |
| + | |
| + | .form-error { |
| + | display: none; |
| + | margin-top: -0.5rem; |
| + | margin-bottom: 1rem; |
| + | font-size: 0.75rem; |
| + | font-weight: bold; |
| + | color: #ec5840; } |
| + | .form-error.is-visible { |
| + | display: block; } |
| + | |
| + | .button { |
| + | display: inline-block; |
| + | text-align: center; |
| + | line-height: 1; |
| + | cursor: pointer; |
| + | -webkit-appearance: none; |
| + | transition: background-color 0.25s ease-out, color 0.25s ease-out; |
| + | vertical-align: middle; |
| + | border: 1px solid transparent; |
| + | border-radius: 0; |
| + | padding: 0.85em 1em; |
| + | margin: 0 0 1rem 0; |
| + | font-size: 0.9rem; |
| + | background-color: #2199e8; |
| + | color: #fefefe; } |
| + | [data-whatinput='mouse'] .button { |
| + | outline: 0; } |
| + | .button:hover, .button:focus { |
| + | background-color: #1583cc; |
| + | color: #fefefe; } |
| + | .button.tiny { |
| + | font-size: 0.6rem; } |
| + | .button.small { |
| + | font-size: 0.75rem; } |
| + | .button.large { |
| + | font-size: 1.25rem; } |
| + | .button.expanded { |
| + | display: block; |
| + | width: 100%; |
| + | margin-left: 0; |
| + | margin-right: 0; } |
| + | .button.primary { |
| + | background-color: #2199e8; |
| + | color: #fefefe; } |
| + | .button.primary:hover, .button.primary:focus { |
| + | background-color: #147cc0; |
| + | color: #fefefe; } |
| + | .button.secondary { |
| + | background-color: #777; |
| + | color: #fefefe; } |
| + | .button.secondary:hover, .button.secondary:focus { |
| + | background-color: #5f5f5f; |
| + | color: #fefefe; } |
| + | .button.success { |
| + | background-color: #3adb76; |
| + | color: #fefefe; } |
| + | .button.success:hover, .button.success:focus { |
| + | background-color: #22bb5b; |
| + | color: #fefefe; } |
| + | .button.warning { |
| + | background-color: #ffae00; |
| + | color: #fefefe; } |
| + | .button.warning:hover, .button.warning:focus { |
| + | background-color: #cc8b00; |
| + | color: #fefefe; } |
| + | .button.alert { |
| + | background-color: #ec5840; |
| + | color: #fefefe; } |
| + | .button.alert:hover, .button.alert:focus { |
| + | background-color: #da3116; |
| + | color: #fefefe; } |
| + | .button.hollow { |
| + | border: 1px solid #2199e8; |
| + | color: #2199e8; } |
| + | .button.hollow, .button.hollow:hover, .button.hollow:focus { |
| + | background-color: transparent; } |
| + | .button.hollow:hover, .button.hollow:focus { |
| + | border-color: #0c4d78; |
| + | color: #0c4d78; } |
| + | .button.hollow.primary { |
| + | border: 1px solid #2199e8; |
| + | color: #2199e8; } |
| + | .button.hollow.primary:hover, .button.hollow.primary:focus { |
| + | border-color: #0c4d78; |
| + | color: #0c4d78; } |
| + | .button.hollow.secondary { |
| + | border: 1px solid #777; |
| + | color: #777; } |
| + | .button.hollow.secondary:hover, .button.hollow.secondary:focus { |
| + | border-color: #3c3c3c; |
| + | color: #3c3c3c; } |
| + | .button.hollow.success { |
| + | border: 1px solid #3adb76; |
| + | color: #3adb76; } |
| + | .button.hollow.success:hover, .button.hollow.success:focus { |
| + | border-color: #157539; |
| + | color: #157539; } |
| + | .button.hollow.warning { |
| + | border: 1px solid #ffae00; |
| + | color: #ffae00; } |
| + | .button.hollow.warning:hover, .button.hollow.warning:focus { |
| + | border-color: #805700; |
| + | color: #805700; } |
| + | .button.hollow.alert { |
| + | border: 1px solid #ec5840; |
| + | color: #ec5840; } |
| + | .button.hollow.alert:hover, .button.hollow.alert:focus { |
| + | border-color: #881f0e; |
| + | color: #881f0e; } |
| + | .button.disabled, .button[disabled] { |
| + | opacity: 0.25; |
| + | cursor: not-allowed; } |
| + | .button.dropdown::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 0.4em; |
| + | border-color: #fefefe transparent transparent; |
| + | border-top-style: solid; |
| + | border-bottom-width: 0; |
| + | position: relative; |
| + | top: 0.4em; |
| + | float: right; |
| + | margin-left: 1em; |
| + | display: inline-block; } |
| + | .button.arrow-only::after { |
| + | margin-left: 0; |
| + | float: none; |
| + | top: -0.1em; } |
| + | |
| + | .accordion { |
| + | list-style-type: none; |
| + | background: #fefefe; |
| + | border: 1px solid #e6e6e6; |
| + | border-bottom: 0; |
| + | border-radius: 0; |
| + | margin-left: 0; } |
| + | |
| + | .accordion-title { |
| + | display: block; |
| + | padding: 1.25rem 1rem; |
| + | line-height: 1; |
| + | font-size: 0.75rem; |
| + | color: #2199e8; |
| + | position: relative; |
| + | border-bottom: 1px solid #e6e6e6; } |
| + | .accordion-title:hover, .accordion-title:focus { |
| + | background-color: #e6e6e6; } |
| + | .accordion-title::before { |
| + | content: '+'; |
| + | position: absolute; |
| + | right: 1rem; |
| + | top: 50%; |
| + | margin-top: -0.5rem; } |
| + | .is-active > .accordion-title::before { |
| + | content: '–'; } |
| + | |
| + | .accordion-content { |
| + | padding: 1rem; |
| + | display: none; |
| + | border-bottom: 1px solid #e6e6e6; |
| + | background-color: #fefefe; } |
| + | |
| + | .is-accordion-submenu-parent > a { |
| + | position: relative; } |
| + | .is-accordion-submenu-parent > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 6px; |
| + | border-color: #2199e8 transparent transparent; |
| + | border-top-style: solid; |
| + | border-bottom-width: 0; |
| + | position: absolute; |
| + | top: 50%; |
| + | margin-top: -4px; |
| + | right: 1rem; } |
| + | |
| + | .is-accordion-submenu-parent[aria-expanded='true'] > a::after { |
| + | -webkit-transform-origin: 50% 50%; |
| + | -ms-transform-origin: 50% 50%; |
| + | transform-origin: 50% 50%; |
| + | -webkit-transform: scaleY(-1); |
| + | -ms-transform: scaleY(-1); |
| + | transform: scaleY(-1); } |
| + | |
| + | .badge { |
| + | display: inline-block; |
| + | padding: 0.3em; |
| + | min-width: 2.1em; |
| + | font-size: 0.6rem; |
| + | text-align: center; |
| + | border-radius: 50%; |
| + | background: #2199e8; |
| + | color: #fefefe; } |
| + | .badge.secondary { |
| + | background: #777; |
| + | color: #fefefe; } |
| + | .badge.success { |
| + | background: #3adb76; |
| + | color: #fefefe; } |
| + | .badge.warning { |
| + | background: #ffae00; |
| + | color: #fefefe; } |
| + | .badge.alert { |
| + | background: #ec5840; |
| + | color: #fefefe; } |
| + | |
| + | .breadcrumbs { |
| + | list-style: none; |
| + | margin: 0 0 1rem 0; } |
| + | .breadcrumbs::before, .breadcrumbs::after { |
| + | content: ' '; |
| + | display: table; } |
| + | .breadcrumbs::after { |
| + | clear: both; } |
| + | .breadcrumbs li { |
| + | float: left; |
| + | color: #0a0a0a; |
| + | font-size: 0.6875rem; |
| + | cursor: default; |
| + | text-transform: uppercase; } |
| + | .breadcrumbs li:not(:last-child)::after { |
| + | color: #cacaca; |
| + | content: "/"; |
| + | margin: 0 0.75rem; |
| + | position: relative; |
| + | top: 1px; |
| + | opacity: 1; } |
| + | .breadcrumbs a { |
| + | color: #2199e8; } |
| + | .breadcrumbs a:hover { |
| + | text-decoration: underline; } |
| + | .breadcrumbs .disabled { |
| + | color: #cacaca; |
| + | cursor: not-allowed; } |
| + | |
| + | .button-group { |
| + | margin-bottom: 1rem; |
| + | font-size: 0; } |
| + | .button-group::before, .button-group::after { |
| + | content: ' '; |
| + | display: table; } |
| + | .button-group::after { |
| + | clear: both; } |
| + | .button-group .button { |
| + | margin: 0; |
| + | font-size: 0.9rem; } |
| + | .button-group .button:not(:last-child) { |
| + | margin-right: 1px; } |
| + | .button-group.tiny .button { |
| + | font-size: 0.6rem; } |
| + | .button-group.small .button { |
| + | font-size: 0.75rem; } |
| + | .button-group.large .button { |
| + | font-size: 1.25rem; } |
| + | .button-group.expanded { |
| + | margin-right: -1px; } |
| + | .button-group.expanded::before, .button-group.expanded::after { |
| + | display: none; } |
| + | .button-group.expanded .button:first-child:nth-last-child(2), .button-group.expanded .button:first-child:nth-last-child(2):first-child:nth-last-child(2) ~ .button { |
| + | display: inline-block; |
| + | width: calc(50% - 1px); |
| + | margin-right: 1px; } |
| + | .button-group.expanded .button:first-child:nth-last-child(3), .button-group.expanded .button:first-child:nth-last-child(3):first-child:nth-last-child(3) ~ .button { |
| + | display: inline-block; |
| + | width: calc(33.33333% - 1px); |
| + | margin-right: 1px; } |
| + | .button-group.expanded .button:first-child:nth-last-child(4), .button-group.expanded .button:first-child:nth-last-child(4):first-child:nth-last-child(4) ~ .button { |
| + | display: inline-block; |
| + | width: calc(25% - 1px); |
| + | margin-right: 1px; } |
| + | .button-group.expanded .button:first-child:nth-last-child(5), .button-group.expanded .button:first-child:nth-last-child(5):first-child:nth-last-child(5) ~ .button { |
| + | display: inline-block; |
| + | width: calc(20% - 1px); |
| + | margin-right: 1px; } |
| + | .button-group.expanded .button:first-child:nth-last-child(6), .button-group.expanded .button:first-child:nth-last-child(6):first-child:nth-last-child(6) ~ .button { |
| + | display: inline-block; |
| + | width: calc(16.66667% - 1px); |
| + | margin-right: 1px; } |
| + | .button-group.primary .button { |
| + | background-color: #2199e8; |
| + | color: #fefefe; } |
| + | .button-group.primary .button:hover, .button-group.primary .button:focus { |
| + | background-color: #147cc0; |
| + | color: #fefefe; } |
| + | .button-group.secondary .button { |
| + | background-color: #777; |
| + | color: #fefefe; } |
| + | .button-group.secondary .button:hover, .button-group.secondary .button:focus { |
| + | background-color: #5f5f5f; |
| + | color: #fefefe; } |
| + | .button-group.success .button { |
| + | background-color: #3adb76; |
| + | color: #fefefe; } |
| + | .button-group.success .button:hover, .button-group.success .button:focus { |
| + | background-color: #22bb5b; |
| + | color: #fefefe; } |
| + | .button-group.warning .button { |
| + | background-color: #ffae00; |
| + | color: #fefefe; } |
| + | .button-group.warning .button:hover, .button-group.warning .button:focus { |
| + | background-color: #cc8b00; |
| + | color: #fefefe; } |
| + | .button-group.alert .button { |
| + | background-color: #ec5840; |
| + | color: #fefefe; } |
| + | .button-group.alert .button:hover, .button-group.alert .button:focus { |
| + | background-color: #da3116; |
| + | color: #fefefe; } |
| + | .button-group.stacked .button, .button-group.stacked-for-small .button, .button-group.stacked-for-medium .button { |
| + | width: 100%; |
| + | border-right: 1px solid transparent; } |
| + | .button-group.stacked .button:not(:last-child), .button-group.stacked-for-small .button:not(:last-child), .button-group.stacked-for-medium .button:not(:last-child) { |
| + | border-bottom: 1px solid #fefefe; } |
| + | @media screen and (min-width: 40em) { |
| + | .button-group.stacked-for-small .button { |
| + | width: auto; } |
| + | .button-group.stacked-for-small .button:not(:last-child) { |
| + | margin-right: 1px; } } |
| + | @media screen and (min-width: 64em) { |
| + | .button-group.stacked-for-medium .button { |
| + | width: auto; } |
| + | .button-group.stacked-for-medium .button:not(:last-child) { |
| + | margin-right: 1px; } } |
| + | @media screen and (max-width: 39.9375em) { |
| + | .button-group.stacked-for-small.expanded { |
| + | display: block; } |
| + | .button-group.stacked-for-small.expanded .button { |
| + | display: block; |
| + | margin-right: 0; } } |
| + | |
| + | .callout { |
| + | margin: 0 0 1rem 0; |
| + | padding: 1rem; |
| + | border: 1px solid rgba(10, 10, 10, 0.25); |
| + | border-radius: 0; |
| + | position: relative; |
| + | color: #0a0a0a; |
| + | background-color: white; } |
| + | .callout > :first-child { |
| + | margin-top: 0; } |
| + | .callout > :last-child { |
| + | margin-bottom: 0; } |
| + | .callout.primary { |
| + | background-color: #def0fc; } |
| + | .callout.secondary { |
| + | background-color: #ebebeb; } |
| + | .callout.success { |
| + | background-color: #e1faea; } |
| + | .callout.warning { |
| + | background-color: #fff3d9; } |
| + | .callout.alert { |
| + | background-color: #fce6e2; } |
| + | .callout.small { |
| + | padding-top: 0.5rem; |
| + | padding-right: 0.5rem; |
| + | padding-bottom: 0.5rem; |
| + | padding-left: 0.5rem; } |
| + | .callout.large { |
| + | padding-top: 3rem; |
| + | padding-right: 3rem; |
| + | padding-bottom: 3rem; |
| + | padding-left: 3rem; } |
| + | |
| + | .close-button { |
| + | position: absolute; |
| + | color: #8a8a8a; |
| + | right: 1rem; |
| + | top: 0.5rem; |
| + | font-size: 2em; |
| + | line-height: 1; |
| + | cursor: pointer; } |
| + | [data-whatinput='mouse'] .close-button { |
| + | outline: 0; } |
| + | .close-button:hover, .close-button:focus { |
| + | color: #0a0a0a; } |
| + | |
| + | .menu { |
| + | margin: 0; |
| + | list-style-type: none; } |
| + | .menu > li { |
| + | display: table-cell; |
| + | vertical-align: middle; } |
| + | [data-whatinput='mouse'] .menu > li { |
| + | outline: 0; } |
| + | .menu > li > a { |
| + | display: block; |
| + | padding: 0.7rem 1rem; |
| + | line-height: 1; } |
| + | .menu input, |
| + | .menu a, |
| + | .menu button { |
| + | margin-bottom: 0; } |
| + | .menu > li > a img, |
| + | .menu > li > a i { |
| + | vertical-align: middle; } |
| + | .menu > li > a i + span, |
| + | .menu > li > a img + span { |
| + | vertical-align: middle; } |
| + | .menu > li > a img, |
| + | .menu > li > a i { |
| + | margin-right: 0.25rem; |
| + | display: inline-block; } |
| + | .menu > li { |
| + | display: table-cell; } |
| + | .menu.vertical > li { |
| + | display: block; } |
| + | @media screen and (min-width: 40em) { |
| + | .menu.medium-horizontal > li { |
| + | display: table-cell; } |
| + | .menu.medium-vertical > li { |
| + | display: block; } } |
| + | @media screen and (min-width: 64em) { |
| + | .menu.large-horizontal > li { |
| + | display: table-cell; } |
| + | .menu.large-vertical > li { |
| + | display: block; } } |
| + | .menu.simple li { |
| + | line-height: 1; |
| + | display: inline-block; |
| + | margin-right: 1rem; } |
| + | .menu.simple a { |
| + | padding: 0; } |
| + | .menu.align-right::before, .menu.align-right::after { |
| + | content: ' '; |
| + | display: table; } |
| + | .menu.align-right::after { |
| + | clear: both; } |
| + | .menu.align-right > li { |
| + | float: right; } |
| + | .menu.expanded { |
| + | width: 100%; |
| + | display: table; |
| + | table-layout: fixed; } |
| + | .menu.expanded > li:first-child:last-child { |
| + | width: 100%; } |
| + | .menu.icon-top > li > a { |
| + | text-align: center; } |
| + | .menu.icon-top > li > a img, |
| + | .menu.icon-top > li > a i { |
| + | display: block; |
| + | margin: 0 auto 0.25rem; } |
| + | .menu.nested { |
| + | margin-left: 1rem; } |
| + | .menu .active > a { |
| + | color: #fefefe; |
| + | background: #2199e8; } |
| + | |
| + | .menu-text { |
| + | font-weight: bold; |
| + | color: inherit; |
| + | line-height: 1; |
| + | padding-top: 0; |
| + | padding-bottom: 0; |
| + | padding: 0.7rem 1rem; } |
| + | |
| + | .menu-centered { |
| + | text-align: center; } |
| + | .menu-centered > .menu { |
| + | display: inline-block; } |
| + | |
| + | .no-js [data-responsive-menu] ul { |
| + | display: none; } |
| + | |
| + | .menu-icon { |
| + | position: relative; |
| + | display: inline-block; |
| + | vertical-align: middle; |
| + | cursor: pointer; |
| + | width: 20px; |
| + | height: 16px; } |
| + | .menu-icon::after { |
| + | content: ''; |
| + | position: absolute; |
| + | display: block; |
| + | width: 100%; |
| + | height: 2px; |
| + | background: #fefefe; |
| + | top: 0; |
| + | left: 0; |
| + | box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe; } |
| + | .menu-icon:hover::after { |
| + | background: #cacaca; |
| + | box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; } |
| + | |
| + | .menu-icon.dark { |
| + | position: relative; |
| + | display: inline-block; |
| + | vertical-align: middle; |
| + | cursor: pointer; |
| + | width: 20px; |
| + | height: 16px; } |
| + | .menu-icon.dark::after { |
| + | content: ''; |
| + | position: absolute; |
| + | display: block; |
| + | width: 100%; |
| + | height: 2px; |
| + | background: #0a0a0a; |
| + | top: 0; |
| + | left: 0; |
| + | box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a; } |
| + | .menu-icon.dark:hover::after { |
| + | background: #8a8a8a; |
| + | box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; } |
| + | |
| + | .is-drilldown { |
| + | position: relative; |
| + | overflow: hidden; } |
| + | .is-drilldown li { |
| + | display: block !important; } |
| + | |
| + | .is-drilldown-submenu { |
| + | position: absolute; |
| + | top: 0; |
| + | left: 100%; |
| + | z-index: -1; |
| + | height: 100%; |
| + | width: 100%; |
| + | background: #fefefe; |
| + | transition: -webkit-transform 0.15s linear; |
| + | transition: transform 0.15s linear; } |
| + | .is-drilldown-submenu.is-active { |
| + | z-index: 1; |
| + | display: block; |
| + | -webkit-transform: translateX(-100%); |
| + | -ms-transform: translateX(-100%); |
| + | transform: translateX(-100%); } |
| + | .is-drilldown-submenu.is-closing { |
| + | -webkit-transform: translateX(100%); |
| + | -ms-transform: translateX(100%); |
| + | transform: translateX(100%); } |
| + | |
| + | .is-drilldown-submenu-parent > a { |
| + | position: relative; } |
| + | .is-drilldown-submenu-parent > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 6px; |
| + | border-color: transparent transparent transparent #2199e8; |
| + | border-left-style: solid; |
| + | border-right-width: 0; |
| + | position: absolute; |
| + | top: 50%; |
| + | margin-top: -6px; |
| + | right: 1rem; } |
| + | |
| + | .js-drilldown-back > a::before { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 6px; |
| + | border-color: transparent #2199e8 transparent transparent; |
| + | border-right-style: solid; |
| + | border-left-width: 0; |
| + | border-left-width: 0; |
| + | display: inline-block; |
| + | vertical-align: middle; |
| + | margin-right: 0.75rem; } |
| + | |
| + | .dropdown-pane { |
| + | background-color: #fefefe; |
| + | border: 1px solid #cacaca; |
| + | border-radius: 0; |
| + | display: block; |
| + | font-size: 1rem; |
| + | padding: 1rem; |
| + | position: absolute; |
| + | visibility: hidden; |
| + | width: 300px; |
| + | z-index: 10; } |
| + | .dropdown-pane.is-open { |
| + | visibility: visible; } |
| + | |
| + | .dropdown-pane.tiny { |
| + | width: 100px; } |
| + | |
| + | .dropdown-pane.small { |
| + | width: 200px; } |
| + | |
| + | .dropdown-pane.large { |
| + | width: 400px; } |
| + | |
| + | .dropdown.menu > li.opens-left > .is-dropdown-submenu { |
| + | left: auto; |
| + | right: 0; |
| + | top: 100%; } |
| + | |
| + | .dropdown.menu > li.opens-right > .is-dropdown-submenu { |
| + | right: auto; |
| + | left: 0; |
| + | top: 100%; } |
| + | |
| + | .dropdown.menu > li.is-dropdown-submenu-parent > a { |
| + | padding-right: 1.5rem; |
| + | position: relative; } |
| + | |
| + | .dropdown.menu > li.is-dropdown-submenu-parent > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 5px; |
| + | border-color: #2199e8 transparent transparent; |
| + | border-top-style: solid; |
| + | border-bottom-width: 0; |
| + | right: 5px; |
| + | margin-top: -2px; } |
| + | |
| + | [data-whatinput='mouse'] .dropdown.menu a { |
| + | outline: 0; } |
| + | |
| + | .no-js .dropdown.menu ul { |
| + | display: none; } |
| + | |
| + | .dropdown.menu.vertical > li .is-dropdown-submenu { |
| + | top: 0; } |
| + | |
| + | .dropdown.menu.vertical > li.opens-left .is-dropdown-submenu { |
| + | left: auto; |
| + | right: 100%; } |
| + | |
| + | .dropdown.menu.vertical > li.opens-right .is-dropdown-submenu { |
| + | right: auto; |
| + | left: 100%; } |
| + | |
| + | .dropdown.menu.vertical > li > a::after { |
| + | right: 14px; |
| + | margin-top: -3px; } |
| + | |
| + | .dropdown.menu.vertical > li.opens-left > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 5px; |
| + | border-color: transparent #2199e8 transparent transparent; |
| + | border-right-style: solid; |
| + | border-left-width: 0; } |
| + | |
| + | .dropdown.menu.vertical > li.opens-right > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 5px; |
| + | border-color: transparent transparent transparent #2199e8; |
| + | border-left-style: solid; |
| + | border-right-width: 0; } |
| + | |
| + | @media screen and (min-width: 40em) { |
| + | .dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu { |
| + | left: auto; |
| + | right: 0; |
| + | top: 100%; } |
| + | .dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu { |
| + | right: auto; |
| + | left: 0; |
| + | top: 100%; } |
| + | .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a { |
| + | padding-right: 1.5rem; |
| + | position: relative; } |
| + | .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 5px; |
| + | border-color: #2199e8 transparent transparent; |
| + | border-top-style: solid; |
| + | border-bottom-width: 0; |
| + | right: 5px; |
| + | margin-top: -2px; } |
| + | .dropdown.menu.medium-vertical > li .is-dropdown-submenu { |
| + | top: 0; } |
| + | .dropdown.menu.medium-vertical > li.opens-left .is-dropdown-submenu { |
| + | left: auto; |
| + | right: 100%; } |
| + | .dropdown.menu.medium-vertical > li.opens-right .is-dropdown-submenu { |
| + | right: auto; |
| + | left: 100%; } |
| + | .dropdown.menu.medium-vertical > li > a::after { |
| + | right: 14px; |
| + | margin-top: -3px; } |
| + | .dropdown.menu.medium-vertical > li.opens-left > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 5px; |
| + | border-color: transparent #2199e8 transparent transparent; |
| + | border-right-style: solid; |
| + | border-left-width: 0; } |
| + | .dropdown.menu.medium-vertical > li.opens-right > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 5px; |
| + | border-color: transparent transparent transparent #2199e8; |
| + | border-left-style: solid; |
| + | border-right-width: 0; } } |
| + | |
| + | @media screen and (min-width: 64em) { |
| + | .dropdown.menu.large-horizontal > li.opens-left > .is-dropdown-submenu { |
| + | left: auto; |
| + | right: 0; |
| + | top: 100%; } |
| + | .dropdown.menu.large-horizontal > li.opens-right > .is-dropdown-submenu { |
| + | right: auto; |
| + | left: 0; |
| + | top: 100%; } |
| + | .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a { |
| + | padding-right: 1.5rem; |
| + | position: relative; } |
| + | .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 5px; |
| + | border-color: #2199e8 transparent transparent; |
| + | border-top-style: solid; |
| + | border-bottom-width: 0; |
| + | right: 5px; |
| + | margin-top: -2px; } |
| + | .dropdown.menu.large-vertical > li .is-dropdown-submenu { |
| + | top: 0; } |
| + | .dropdown.menu.large-vertical > li.opens-left .is-dropdown-submenu { |
| + | left: auto; |
| + | right: 100%; } |
| + | .dropdown.menu.large-vertical > li.opens-right .is-dropdown-submenu { |
| + | right: auto; |
| + | left: 100%; } |
| + | .dropdown.menu.large-vertical > li > a::after { |
| + | right: 14px; |
| + | margin-top: -3px; } |
| + | .dropdown.menu.large-vertical > li.opens-left > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 5px; |
| + | border-color: transparent #2199e8 transparent transparent; |
| + | border-right-style: solid; |
| + | border-left-width: 0; } |
| + | .dropdown.menu.large-vertical > li.opens-right > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 5px; |
| + | border-color: transparent transparent transparent #2199e8; |
| + | border-left-style: solid; |
| + | border-right-width: 0; } } |
| + | |
| + | .dropdown.menu.align-right .is-dropdown-submenu.first-sub { |
| + | top: 100%; |
| + | left: auto; |
| + | right: 0; } |
| + | |
| + | .is-dropdown-menu.vertical { |
| + | width: 100px; } |
| + | .is-dropdown-menu.vertical.align-right { |
| + | float: right; } |
| + | |
| + | .is-dropdown-submenu-parent { |
| + | position: relative; } |
| + | .is-dropdown-submenu-parent a::after { |
| + | position: absolute; |
| + | top: 50%; |
| + | right: 5px; |
| + | margin-top: -2px; } |
| + | .is-dropdown-submenu-parent.opens-inner .is-dropdown-submenu { |
| + | top: 100%; } |
| + | .is-dropdown-submenu-parent.opens-left .is-dropdown-submenu { |
| + | left: auto; |
| + | right: 100%; } |
| + | |
| + | .is-dropdown-submenu { |
| + | display: none; |
| + | position: absolute; |
| + | top: 0; |
| + | left: 100%; |
| + | min-width: 200px; |
| + | z-index: 1; |
| + | background: #fefefe; |
| + | border: 1px solid #cacaca; } |
| + | .is-dropdown-submenu .is-dropdown-submenu-parent > a::after { |
| + | right: 14px; |
| + | margin-top: -3px; } |
| + | .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 5px; |
| + | border-color: transparent #2199e8 transparent transparent; |
| + | border-right-style: solid; |
| + | border-left-width: 0; } |
| + | .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 5px; |
| + | border-color: transparent transparent transparent #2199e8; |
| + | border-left-style: solid; |
| + | border-right-width: 0; } |
| + | .is-dropdown-submenu .is-dropdown-submenu { |
| + | margin-top: -1px; } |
| + | .is-dropdown-submenu > li { |
| + | width: 100%; } |
| + | .is-dropdown-submenu:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > .is-dropdown-submenu, .is-dropdown-submenu.js-dropdown-active { |
| + | display: block; } |
| + | |
| + | .flex-video { |
| + | position: relative; |
| + | height: 0; |
| + | padding-bottom: 75%; |
| + | margin-bottom: 1rem; |
| + | overflow: hidden; } |
| + | .flex-video iframe, |
| + | .flex-video object, |
| + | .flex-video embed, |
| + | .flex-video video { |
| + | position: absolute; |
| + | top: 0; |
| + | left: 0; |
| + | width: 100%; |
| + | height: 100%; } |
| + | .flex-video.widescreen { |
| + | padding-bottom: 56.25%; } |
| + | .flex-video.vimeo { |
| + | padding-top: 0; } |
| + | |
| + | .label { |
| + | display: inline-block; |
| + | padding: 0.33333rem 0.5rem; |
| + | font-size: 0.8rem; |
| + | line-height: 1; |
| + | white-space: nowrap; |
| + | cursor: default; |
| + | border-radius: 0; |
| + | background: #2199e8; |
| + | color: #fefefe; } |
| + | .label.secondary { |
| + | background: #777; |
| + | color: #fefefe; } |
| + | .label.success { |
| + | background: #3adb76; |
| + | color: #fefefe; } |
| + | .label.warning { |
| + | background: #ffae00; |
| + | color: #fefefe; } |
| + | .label.alert { |
| + | background: #ec5840; |
| + | color: #fefefe; } |
| + | |
| + | .media-object { |
| + | margin-bottom: 1rem; |
| + | display: block; } |
| + | .media-object img { |
| + | max-width: none; } |
| + | @media screen and (max-width: 39.9375em) { |
| + | .media-object.stack-for-small .media-object-section { |
| + | padding: 0; |
| + | padding-bottom: 1rem; |
| + | display: block; } |
| + | .media-object.stack-for-small .media-object-section img { |
| + | width: 100%; } } |
| + | |
| + | .media-object-section { |
| + | display: table-cell; |
| + | vertical-align: top; } |
| + | .media-object-section:first-child { |
| + | padding-right: 1rem; } |
| + | .media-object-section:last-child:not(:nth-child(2)) { |
| + | padding-left: 1rem; } |
| + | .media-object-section.middle { |
| + | vertical-align: middle; } |
| + | .media-object-section.bottom { |
| + | vertical-align: bottom; } |
| + | |
| + | html, |
| + | body { |
| + | height: 100%; } |
| + | |
| + | .off-canvas-wrapper { |
| + | width: 100%; |
| + | overflow-x: hidden; |
| + | position: relative; |
| + | -webkit-backface-visibility: hidden; |
| + | backface-visibility: hidden; |
| + | -webkit-overflow-scrolling: auto; } |
| + | |
| + | .off-canvas-wrapper-inner { |
| + | position: relative; |
| + | width: 100%; |
| + | transition: -webkit-transform 0.5s ease; |
| + | transition: transform 0.5s ease; } |
| + | .off-canvas-wrapper-inner::before, .off-canvas-wrapper-inner::after { |
| + | content: ' '; |
| + | display: table; } |
| + | .off-canvas-wrapper-inner::after { |
| + | clear: both; } |
| + | |
| + | .off-canvas-content, |
| + | .off-canvas-content { |
| + | min-height: 100%; |
| + | background: #fefefe; |
| + | transition: -webkit-transform 0.5s ease; |
| + | transition: transform 0.5s ease; |
| + | -webkit-backface-visibility: hidden; |
| + | backface-visibility: hidden; |
| + | z-index: 1; |
| + | padding-bottom: 0.1px; |
| + | box-shadow: 0 0 10px rgba(10, 10, 10, 0.5); } |
| + | |
| + | .js-off-canvas-exit { |
| + | display: none; |
| + | position: absolute; |
| + | top: 0; |
| + | left: 0; |
| + | width: 100%; |
| + | height: 100%; |
| + | background: rgba(254, 254, 254, 0.25); |
| + | cursor: pointer; |
| + | transition: background 0.5s ease; } |
| + | |
| + | .off-canvas { |
| + | position: absolute; |
| + | background: #e6e6e6; |
| + | z-index: -1; |
| + | max-height: 100%; |
| + | overflow-y: auto; |
| + | -webkit-transform: translateX(0); |
| + | -ms-transform: translateX(0); |
| + | transform: translateX(0); } |
| + | [data-whatinput='mouse'] .off-canvas { |
| + | outline: 0; } |
| + | .off-canvas.position-left { |
| + | left: -250px; |
| + | top: 0; |
| + | width: 250px; } |
| + | .is-open-left { |
| + | -webkit-transform: translateX(250px); |
| + | -ms-transform: translateX(250px); |
| + | transform: translateX(250px); } |
| + | .off-canvas.position-right { |
| + | right: -250px; |
| + | top: 0; |
| + | width: 250px; } |
| + | .is-open-right { |
| + | -webkit-transform: translateX(-250px); |
| + | -ms-transform: translateX(-250px); |
| + | transform: translateX(-250px); } |
| + | |
| + | @media screen and (min-width: 40em) { |
| + | .position-left.reveal-for-medium { |
| + | left: 0; |
| + | z-index: auto; |
| + | position: fixed; } |
| + | .position-left.reveal-for-medium ~ .off-canvas-content { |
| + | margin-left: 250px; } |
| + | .position-right.reveal-for-medium { |
| + | right: 0; |
| + | z-index: auto; |
| + | position: fixed; } |
| + | .position-right.reveal-for-medium ~ .off-canvas-content { |
| + | margin-right: 250px; } } |
| + | |
| + | @media screen and (min-width: 64em) { |
| + | .position-left.reveal-for-large { |
| + | left: 0; |
| + | z-index: auto; |
| + | position: fixed; } |
| + | .position-left.reveal-for-large ~ .off-canvas-content { |
| + | margin-left: 250px; } |
| + | .position-right.reveal-for-large { |
| + | right: 0; |
| + | z-index: auto; |
| + | position: fixed; } |
| + | .position-right.reveal-for-large ~ .off-canvas-content { |
| + | margin-right: 250px; } } |
| + | |
| + | .orbit { |
| + | position: relative; } |
| + | |
| + | .orbit-container { |
| + | position: relative; |
| + | margin: 0; |
| + | overflow: hidden; |
| + | list-style: none; } |
| + | |
| + | .orbit-slide { |
| + | width: 100%; |
| + | max-height: 100%; } |
| + | .orbit-slide.no-motionui.is-active { |
| + | top: 0; |
| + | left: 0; } |
| + | |
| + | .orbit-figure { |
| + | margin: 0; } |
| + | |
| + | .orbit-image { |
| + | margin: 0; |
| + | width: 100%; |
| + | max-width: 100%; } |
| + | |
| + | .orbit-caption { |
| + | position: absolute; |
| + | bottom: 0; |
| + | width: 100%; |
| + | padding: 1rem; |
| + | margin-bottom: 0; |
| + | color: #fefefe; |
| + | background-color: rgba(10, 10, 10, 0.5); } |
| + | |
| + | .orbit-previous, .orbit-next { |
| + | position: absolute; |
| + | top: 50%; |
| + | -webkit-transform: translateY(-50%); |
| + | -ms-transform: translateY(-50%); |
| + | transform: translateY(-50%); |
| + | z-index: 10; |
| + | padding: 1rem; |
| + | color: #fefefe; } |
| + | [data-whatinput='mouse'] .orbit-previous, [data-whatinput='mouse'] .orbit-next { |
| + | outline: 0; } |
| + | .orbit-previous:hover, .orbit-next:hover, .orbit-previous:active, .orbit-next:active, .orbit-previous:focus, .orbit-next:focus { |
| + | background-color: rgba(10, 10, 10, 0.5); } |
| + | |
| + | .orbit-previous { |
| + | left: 0; } |
| + | |
| + | .orbit-next { |
| + | left: auto; |
| + | right: 0; } |
| + | |
| + | .orbit-bullets { |
| + | position: relative; |
| + | margin-top: 0.8rem; |
| + | margin-bottom: 0.8rem; |
| + | text-align: center; } |
| + | [data-whatinput='mouse'] .orbit-bullets { |
| + | outline: 0; } |
| + | .orbit-bullets button { |
| + | width: 1.2rem; |
| + | height: 1.2rem; |
| + | margin: 0.1rem; |
| + | background-color: #cacaca; |
| + | border-radius: 50%; } |
| + | .orbit-bullets button:hover { |
| + | background-color: #8a8a8a; } |
| + | .orbit-bullets button.is-active { |
| + | background-color: #8a8a8a; } |
| + | |
| + | .pagination { |
| + | margin-left: 0; |
| + | margin-bottom: 1rem; } |
| + | .pagination::before, .pagination::after { |
| + | content: ' '; |
| + | display: table; } |
| + | .pagination::after { |
| + | clear: both; } |
| + | .pagination li { |
| + | font-size: 0.875rem; |
| + | margin-right: 0.0625rem; |
| + | border-radius: 0; |
| + | display: none; } |
| + | .pagination li:last-child, .pagination li:first-child { |
| + | display: inline-block; } |
| + | @media screen and (min-width: 40em) { |
| + | .pagination li { |
| + | display: inline-block; } } |
| + | .pagination a, |
| + | .pagination button { |
| + | color: #0a0a0a; |
| + | display: block; |
| + | padding: 0.1875rem 0.625rem; |
| + | border-radius: 0; } |
| + | .pagination a:hover, |
| + | .pagination button:hover { |
| + | background: #e6e6e6; } |
| + | .pagination .current { |
| + | padding: 0.1875rem 0.625rem; |
| + | background: #2199e8; |
| + | color: #fefefe; |
| + | cursor: default; } |
| + | .pagination .disabled { |
| + | padding: 0.1875rem 0.625rem; |
| + | color: #cacaca; |
| + | cursor: not-allowed; } |
| + | .pagination .disabled:hover { |
| + | background: transparent; } |
| + | .pagination .ellipsis::after { |
| + | content: '\2026'; |
| + | padding: 0.1875rem 0.625rem; |
| + | color: #0a0a0a; } |
| + | |
| + | .pagination-previous a::before, |
| + | .pagination-previous.disabled::before { |
| + | content: '\00ab'; |
| + | display: inline-block; |
| + | margin-right: 0.5rem; } |
| + | |
| + | .pagination-next a::after, |
| + | .pagination-next.disabled::after { |
| + | content: '\00bb'; |
| + | display: inline-block; |
| + | margin-left: 0.5rem; } |
| + | |
| + | .progress { |
| + | background-color: #cacaca; |
| + | height: 1rem; |
| + | margin-bottom: 1rem; |
| + | border-radius: 0; } |
| + | .progress.primary .progress-meter { |
| + | background-color: #2199e8; } |
| + | .progress.secondary .progress-meter { |
| + | background-color: #777; } |
| + | .progress.success .progress-meter { |
| + | background-color: #3adb76; } |
| + | .progress.warning .progress-meter { |
| + | background-color: #ffae00; } |
| + | .progress.alert .progress-meter { |
| + | background-color: #ec5840; } |
| + | |
| + | .progress-meter { |
| + | position: relative; |
| + | display: block; |
| + | width: 0%; |
| + | height: 100%; |
| + | background-color: #2199e8; } |
| + | |
| + | .progress-meter-text { |
| + | position: absolute; |
| + | top: 50%; |
| + | left: 50%; |
| + | -webkit-transform: translate(-50%, -50%); |
| + | -ms-transform: translate(-50%, -50%); |
| + | transform: translate(-50%, -50%); |
| + | position: absolute; |
| + | margin: 0; |
| + | font-size: 0.75rem; |
| + | font-weight: bold; |
| + | color: #fefefe; |
| + | white-space: nowrap; } |
| + | |
| + | .slider { |
| + | position: relative; |
| + | height: 0.5rem; |
| + | margin-top: 1.25rem; |
| + | margin-bottom: 2.25rem; |
| + | background-color: #e6e6e6; |
| + | cursor: pointer; |
| + | -webkit-user-select: none; |
| + | -moz-user-select: none; |
| + | -ms-user-select: none; |
| + | user-select: none; |
| + | -ms-touch-action: none; |
| + | touch-action: none; } |
| + | |
| + | .slider-fill { |
| + | position: absolute; |
| + | top: 0; |
| + | left: 0; |
| + | display: inline-block; |
| + | max-width: 100%; |
| + | height: 0.5rem; |
| + | background-color: #cacaca; |
| + | transition: all 0.2s ease-in-out; } |
| + | .slider-fill.is-dragging { |
| + | transition: all 0s linear; } |
| + | |
| + | .slider-handle { |
| + | position: absolute; |
| + | top: 50%; |
| + | -webkit-transform: translateY(-50%); |
| + | -ms-transform: translateY(-50%); |
| + | transform: translateY(-50%); |
| + | position: absolute; |
| + | left: 0; |
| + | z-index: 1; |
| + | display: inline-block; |
| + | width: 1.4rem; |
| + | height: 1.4rem; |
| + | background-color: #2199e8; |
| + | transition: all 0.2s ease-in-out; |
| + | -ms-touch-action: manipulation; |
| + | touch-action: manipulation; |
| + | border-radius: 0; } |
| + | [data-whatinput='mouse'] .slider-handle { |
| + | outline: 0; } |
| + | .slider-handle:hover { |
| + | background-color: #1583cc; } |
| + | .slider-handle.is-dragging { |
| + | transition: all 0s linear; } |
| + | |
| + | .slider.disabled, |
| + | .slider[disabled] { |
| + | opacity: 0.25; |
| + | cursor: not-allowed; } |
| + | |
| + | .slider.vertical { |
| + | display: inline-block; |
| + | width: 0.5rem; |
| + | height: 12.5rem; |
| + | margin: 0 1.25rem; |
| + | -webkit-transform: scale(1, -1); |
| + | -ms-transform: scale(1, -1); |
| + | transform: scale(1, -1); } |
| + | .slider.vertical .slider-fill { |
| + | top: 0; |
| + | width: 0.5rem; |
| + | max-height: 100%; } |
| + | .slider.vertical .slider-handle { |
| + | position: absolute; |
| + | top: 0; |
| + | left: 50%; |
| + | width: 1.4rem; |
| + | height: 1.4rem; |
| + | -webkit-transform: translateX(-50%); |
| + | -ms-transform: translateX(-50%); |
| + | transform: translateX(-50%); } |
| + | |
| + | .sticky-container { |
| + | position: relative; } |
| + | |
| + | .sticky { |
| + | position: absolute; |
| + | z-index: 0; |
| + | -webkit-transform: translate3d(0, 0, 0); |
| + | transform: translate3d(0, 0, 0); } |
| + | |
| + | .sticky.is-stuck { |
| + | position: fixed; |
| + | z-index: 5; } |
| + | .sticky.is-stuck.is-at-top { |
| + | top: 0; } |
| + | .sticky.is-stuck.is-at-bottom { |
| + | bottom: 0; } |
| + | |
| + | .sticky.is-anchored { |
| + | position: absolute; |
| + | left: auto; |
| + | right: auto; } |
| + | .sticky.is-anchored.is-at-bottom { |
| + | bottom: 0; } |
| + | |
| + | body.is-reveal-open { |
| + | overflow: hidden; } |
| + | |
| + | .reveal-overlay { |
| + | display: none; |
| + | position: fixed; |
| + | top: 0; |
| + | bottom: 0; |
| + | left: 0; |
| + | right: 0; |
| + | z-index: 1005; |
| + | background-color: rgba(10, 10, 10, 0.45); |
| + | overflow-y: scroll; } |
| + | |
| + | .reveal { |
| + | display: none; |
| + | z-index: 1006; |
| + | padding: 1rem; |
| + | border: 1px solid #cacaca; |
| + | background-color: #fefefe; |
| + | border-radius: 0; |
| + | position: relative; |
| + | top: 100px; |
| + | margin-left: auto; |
| + | margin-right: auto; |
| + | overflow-y: auto; } |
| + | [data-whatinput='mouse'] .reveal { |
| + | outline: 0; } |
| + | @media screen and (min-width: 40em) { |
| + | .reveal { |
| + | min-height: 0; } } |
| + | .reveal .column, .reveal .columns, |
| + | .reveal .columns { |
| + | min-width: 0; } |
| + | .reveal > :last-child { |
| + | margin-bottom: 0; } |
| + | @media screen and (min-width: 40em) { |
| + | .reveal { |
| + | width: 600px; |
| + | max-width: 75rem; } } |
| + | @media screen and (min-width: 40em) { |
| + | .reveal .reveal { |
| + | left: auto; |
| + | right: auto; |
| + | margin: 0 auto; } } |
| + | .reveal.collapse { |
| + | padding: 0; } |
| + | @media screen and (min-width: 40em) { |
| + | .reveal.tiny { |
| + | width: 30%; |
| + | max-width: 75rem; } } |
| + | @media screen and (min-width: 40em) { |
| + | .reveal.small { |
| + | width: 50%; |
| + | max-width: 75rem; } } |
| + | @media screen and (min-width: 40em) { |
| + | .reveal.large { |
| + | width: 90%; |
| + | max-width: 75rem; } } |
| + | .reveal.full { |
| + | top: 0; |
| + | left: 0; |
| + | width: 100%; |
| + | height: 100%; |
| + | height: 100vh; |
| + | min-height: 100vh; |
| + | max-width: none; |
| + | margin-left: 0; |
| + | border: 0; |
| + | border-radius: 0; } |
| + | @media screen and (max-width: 39.9375em) { |
| + | .reveal { |
| + | top: 0; |
| + | left: 0; |
| + | width: 100%; |
| + | height: 100%; |
| + | height: 100vh; |
| + | min-height: 100vh; |
| + | max-width: none; |
| + | margin-left: 0; |
| + | border: 0; |
| + | border-radius: 0; } } |
| + | .reveal.without-overlay { |
| + | position: fixed; } |
| + | |
| + | .switch { |
| + | margin-bottom: 1rem; |
| + | outline: 0; |
| + | position: relative; |
| + | -webkit-user-select: none; |
| + | -moz-user-select: none; |
| + | -ms-user-select: none; |
| + | user-select: none; |
| + | color: #fefefe; |
| + | font-weight: bold; |
| + | font-size: 0.875rem; } |
| + | |
| + | .switch-input { |
| + | opacity: 0; |
| + | position: absolute; } |
| + | |
| + | .switch-paddle { |
| + | background: #cacaca; |
| + | cursor: pointer; |
| + | display: block; |
| + | position: relative; |
| + | width: 4rem; |
| + | height: 2rem; |
| + | transition: all 0.25s ease-out; |
| + | border-radius: 0; |
| + | color: inherit; |
| + | font-weight: inherit; } |
| + | input + .switch-paddle { |
| + | margin: 0; } |
| + | .switch-paddle::after { |
| + | background: #fefefe; |
| + | content: ''; |
| + | display: block; |
| + | position: absolute; |
| + | height: 1.5rem; |
| + | left: 0.25rem; |
| + | top: 0.25rem; |
| + | width: 1.5rem; |
| + | transition: all 0.25s ease-out; |
| + | -webkit-transform: translate3d(0, 0, 0); |
| + | transform: translate3d(0, 0, 0); |
| + | border-radius: 0; } |
| + | input:checked ~ .switch-paddle { |
| + | background: #2199e8; } |
| + | input:checked ~ .switch-paddle::after { |
| + | left: 2.25rem; } |
| + | [data-whatinput='mouse'] input:focus ~ .switch-paddle { |
| + | outline: 0; } |
| + | |
| + | .switch-active, .switch-inactive { |
| + | position: absolute; |
| + | top: 50%; |
| + | -webkit-transform: translateY(-50%); |
| + | -ms-transform: translateY(-50%); |
| + | transform: translateY(-50%); } |
| + | |
| + | .switch-active { |
| + | left: 8%; |
| + | display: none; } |
| + | input:checked + label > .switch-active { |
| + | display: block; } |
| + | |
| + | .switch-inactive { |
| + | right: 15%; } |
| + | input:checked + label > .switch-inactive { |
| + | display: none; } |
| + | |
| + | .switch.tiny .switch-paddle { |
| + | width: 3rem; |
| + | height: 1.5rem; |
| + | font-size: 0.625rem; } |
| + | |
| + | .switch.tiny .switch-paddle::after { |
| + | width: 1rem; |
| + | height: 1rem; } |
| + | |
| + | .switch.tiny input:checked ~ .switch-paddle::after { |
| + | left: 1.75rem; } |
| + | |
| + | .switch.small .switch-paddle { |
| + | width: 3.5rem; |
| + | height: 1.75rem; |
| + | font-size: 0.75rem; } |
| + | |
| + | .switch.small .switch-paddle::after { |
| + | width: 1.25rem; |
| + | height: 1.25rem; } |
| + | |
| + | .switch.small input:checked ~ .switch-paddle::after { |
| + | left: 2rem; } |
| + | |
| + | .switch.large .switch-paddle { |
| + | width: 5rem; |
| + | height: 2.5rem; |
| + | font-size: 1rem; } |
| + | |
| + | .switch.large .switch-paddle::after { |
| + | width: 2rem; |
| + | height: 2rem; } |
| + | |
| + | .switch.large input:checked ~ .switch-paddle::after { |
| + | left: 2.75rem; } |
| + | |
| + | table { |
| + | width: 100%; |
| + | margin-bottom: 1rem; |
| + | border-radius: 0; } |
| + | table thead, |
| + | table tbody, |
| + | table tfoot { |
| + | border: 1px solid #f1f1f1; |
| + | background-color: #fefefe; } |
| + | table caption { |
| + | font-weight: bold; |
| + | padding: 0.5rem 0.625rem 0.625rem; } |
| + | table thead, |
| + | table tfoot { |
| + | background: #f8f8f8; |
| + | color: #0a0a0a; } |
| + | table thead tr, |
| + | table tfoot tr { |
| + | background: transparent; } |
| + | table thead th, |
| + | table thead td, |
| + | table tfoot th, |
| + | table tfoot td { |
| + | padding: 0.5rem 0.625rem 0.625rem; |
| + | font-weight: bold; |
| + | text-align: left; } |
| + | table tbody tr:nth-child(even) { |
| + | background-color: #f1f1f1; } |
| + | table tbody th, |
| + | table tbody td { |
| + | padding: 0.5rem 0.625rem 0.625rem; } |
| + | |
| + | @media screen and (max-width: 63.9375em) { |
| + | table.stack thead { |
| + | display: none; } |
| + | table.stack tfoot { |
| + | display: none; } |
| + | table.stack tr, |
| + | table.stack th, |
| + | table.stack td { |
| + | display: block; } |
| + | table.stack td { |
| + | border-top: 0; } } |
| + | |
| + | table.scroll { |
| + | display: block; |
| + | width: 100%; |
| + | overflow-x: auto; } |
| + | |
| + | table.hover tr:hover { |
| + | background-color: #f9f9f9; } |
| + | |
| + | table.hover tr:nth-of-type(even):hover { |
| + | background-color: #ececec; } |
| + | |
| + | .table-scroll { |
| + | overflow-x: auto; } |
| + | .table-scroll table { |
| + | width: auto; } |
| + | |
| + | .tabs { |
| + | margin: 0; |
| + | list-style-type: none; |
| + | background: #fefefe; |
| + | border: 1px solid #e6e6e6; } |
| + | .tabs::before, .tabs::after { |
| + | content: ' '; |
| + | display: table; } |
| + | .tabs::after { |
| + | clear: both; } |
| + | |
| + | .tabs.vertical > li { |
| + | width: auto; |
| + | float: none; |
| + | display: block; } |
| + | |
| + | .tabs.simple > li > a { |
| + | padding: 0; } |
| + | .tabs.simple > li > a:hover { |
| + | background: transparent; } |
| + | |
| + | .tabs.primary { |
| + | background: #2199e8; } |
| + | .tabs.primary > li > a { |
| + | color: #fefefe; } |
| + | .tabs.primary > li > a:hover, .tabs.primary > li > a:focus { |
| + | background: #1893e4; } |
| + | |
| + | .tabs-title { |
| + | float: left; } |
| + | .tabs-title > a { |
| + | display: block; |
| + | padding: 1.25rem 1.5rem; |
| + | line-height: 1; |
| + | font-size: 0.75rem; } |
| + | .tabs-title > a:hover { |
| + | background: #fefefe; } |
| + | .tabs-title > a:focus, .tabs-title > a[aria-selected='true'] { |
| + | background: #e6e6e6; } |
| + | |
| + | .tabs-content { |
| + | background: #fefefe; |
| + | transition: all 0.5s ease; |
| + | border: 1px solid #e6e6e6; |
| + | border-top: 0; } |
| + | |
| + | .tabs-content.vertical { |
| + | border: 1px solid #e6e6e6; |
| + | border-left: 0; } |
| + | |
| + | .tabs-panel { |
| + | display: none; |
| + | padding: 1rem; } |
| + | .tabs-panel.is-active { |
| + | display: block; } |
| + | |
| + | .thumbnail { |
| + | border: solid 4px #fefefe; |
| + | box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2); |
| + | display: inline-block; |
| + | line-height: 0; |
| + | max-width: 100%; |
| + | transition: box-shadow 200ms ease-out; |
| + | border-radius: 0; |
| + | margin-bottom: 1rem; } |
| + | .thumbnail:hover, .thumbnail:focus { |
| + | box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5); } |
| + | |
| + | .title-bar { |
| + | background: #0a0a0a; |
| + | color: #fefefe; |
| + | padding: 0.5rem; } |
| + | .title-bar::before, .title-bar::after { |
| + | content: ' '; |
| + | display: table; } |
| + | .title-bar::after { |
| + | clear: both; } |
| + | .title-bar .menu-icon { |
| + | margin-left: 0.25rem; |
| + | margin-right: 0.5rem; } |
| + | |
| + | .title-bar-left { |
| + | float: left; } |
| + | |
| + | .title-bar-right { |
| + | float: right; |
| + | text-align: right; } |
| + | |
| + | .title-bar-title { |
| + | font-weight: bold; |
| + | vertical-align: middle; |
| + | display: inline-block; } |
| + | |
| + | .menu-icon.dark { |
| + | position: relative; |
| + | display: inline-block; |
| + | vertical-align: middle; |
| + | cursor: pointer; |
| + | width: 20px; |
| + | height: 16px; } |
| + | .menu-icon.dark::after { |
| + | content: ''; |
| + | position: absolute; |
| + | display: block; |
| + | width: 100%; |
| + | height: 2px; |
| + | background: #0a0a0a; |
| + | top: 0; |
| + | left: 0; |
| + | box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a; } |
| + | .menu-icon.dark:hover::after { |
| + | background: #8a8a8a; |
| + | box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; } |
| + | |
| + | .has-tip { |
| + | border-bottom: dotted 1px #8a8a8a; |
| + | font-weight: bold; |
| + | position: relative; |
| + | display: inline-block; |
| + | cursor: help; } |
| + | |
| + | .tooltip { |
| + | background-color: #0a0a0a; |
| + | color: #fefefe; |
| + | font-size: 80%; |
| + | padding: 0.75rem; |
| + | position: absolute; |
| + | z-index: 10; |
| + | top: calc(100% + 0.6495rem); |
| + | max-width: 10rem !important; |
| + | border-radius: 0; } |
| + | .tooltip::before { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 0.75rem; |
| + | border-color: transparent transparent #0a0a0a; |
| + | border-bottom-style: solid; |
| + | border-top-width: 0; |
| + | bottom: 100%; |
| + | position: absolute; |
| + | left: 50%; |
| + | -webkit-transform: translateX(-50%); |
| + | -ms-transform: translateX(-50%); |
| + | transform: translateX(-50%); } |
| + | .tooltip.top::before { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 0.75rem; |
| + | border-color: #0a0a0a transparent transparent; |
| + | border-top-style: solid; |
| + | border-bottom-width: 0; |
| + | top: 100%; |
| + | bottom: auto; } |
| + | .tooltip.left::before { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 0.75rem; |
| + | border-color: transparent transparent transparent #0a0a0a; |
| + | border-left-style: solid; |
| + | border-right-width: 0; |
| + | bottom: auto; |
| + | left: 100%; |
| + | top: 50%; |
| + | -webkit-transform: translateY(-50%); |
| + | -ms-transform: translateY(-50%); |
| + | transform: translateY(-50%); } |
| + | .tooltip.right::before { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset 0.75rem; |
| + | border-color: transparent #0a0a0a transparent transparent; |
| + | border-right-style: solid; |
| + | border-left-width: 0; |
| + | bottom: auto; |
| + | left: auto; |
| + | right: 100%; |
| + | top: 50%; |
| + | -webkit-transform: translateY(-50%); |
| + | -ms-transform: translateY(-50%); |
| + | transform: translateY(-50%); } |
| + | |
| + | .top-bar { |
| + | padding: 0.5rem; } |
| + | .top-bar::before, .top-bar::after { |
| + | content: ' '; |
| + | display: table; } |
| + | .top-bar::after { |
| + | clear: both; } |
| + | .top-bar, |
| + | .top-bar ul { |
| + | background-color: #e6e6e6; } |
| + | .top-bar input { |
| + | max-width: 200px; |
| + | margin-right: 1rem; } |
| + | .top-bar .input-group-field { |
| + | width: 100%; |
| + | margin-right: 0; } |
| + | .top-bar input.button { |
| + | width: auto; } |
| + | .top-bar .top-bar-left, |
| + | .top-bar .top-bar-right { |
| + | width: 100%; } |
| + | @media screen and (min-width: 40em) { |
| + | .top-bar .top-bar-left, |
| + | .top-bar .top-bar-right { |
| + | width: auto; } } |
| + | @media screen and (max-width: 63.9375em) { |
| + | .top-bar.stacked-for-medium .top-bar-left, |
| + | .top-bar.stacked-for-medium .top-bar-right { |
| + | width: 100%; } } |
| + | @media screen and (max-width: 74.9375em) { |
| + | .top-bar.stacked-for-large .top-bar-left, |
| + | .top-bar.stacked-for-large .top-bar-right { |
| + | width: 100%; } } |
| + | |
| + | .top-bar-title { |
| + | float: left; |
| + | margin-right: 1rem; } |
| + | |
| + | .top-bar-left { |
| + | float: left; } |
| + | |
| + | .top-bar-right { |
| + | float: right; } |
| + | |
| + | .hide { |
| + | display: none !important; } |
| + | |
| + | .invisible { |
| + | visibility: hidden; } |
| + | |
| + | @media screen and (max-width: 39.9375em) { |
| + | .hide-for-small-only { |
| + | display: none !important; } } |
| + | |
| + | @media screen and (max-width: 0em), screen and (min-width: 40em) { |
| + | .show-for-small-only { |
| + | display: none !important; } } |
| + | |
| + | @media screen and (min-width: 40em) { |
| + | .hide-for-medium { |
| + | display: none !important; } } |
| + | |
| + | @media screen and (max-width: 39.9375em) { |
| + | .show-for-medium { |
| + | display: none !important; } } |
| + | |
| + | @media screen and (min-width: 40em) and (max-width: 63.9375em) { |
| + | .hide-for-medium-only { |
| + | display: none !important; } } |
| + | |
| + | @media screen and (max-width: 39.9375em), screen and (min-width: 64em) { |
| + | .show-for-medium-only { |
| + | display: none !important; } } |
| + | |
| + | @media screen and (min-width: 64em) { |
| + | .hide-for-large { |
| + | display: none !important; } } |
| + | |
| + | @media screen and (max-width: 63.9375em) { |
| + | .show-for-large { |
| + | display: none !important; } } |
| + | |
| + | @media screen and (min-width: 64em) and (max-width: 74.9375em) { |
| + | .hide-for-large-only { |
| + | display: none !important; } } |
| + | |
| + | @media screen and (max-width: 63.9375em), screen and (min-width: 75em) { |
| + | .show-for-large-only { |
| + | display: none !important; } } |
| + | |
| + | .show-for-sr, |
| + | .show-on-focus { |
| + | position: absolute !important; |
| + | width: 1px; |
| + | height: 1px; |
| + | overflow: hidden; |
| + | clip: rect(0, 0, 0, 0); } |
| + | |
| + | .show-on-focus:active, .show-on-focus:focus { |
| + | position: static !important; |
| + | height: auto; |
| + | width: auto; |
| + | overflow: visible; |
| + | clip: auto; } |
| + | |
| + | .show-for-landscape, |
| + | .hide-for-portrait { |
| + | display: block !important; } |
| + | @media screen and (orientation: landscape) { |
| + | .show-for-landscape, |
| + | .hide-for-portrait { |
| + | display: block !important; } } |
| + | @media screen and (orientation: portrait) { |
| + | .show-for-landscape, |
| + | .hide-for-portrait { |
| + | display: none !important; } } |
| + | |
| + | .hide-for-landscape, |
| + | .show-for-portrait { |
| + | display: none !important; } |
| + | @media screen and (orientation: landscape) { |
| + | .hide-for-landscape, |
| + | .show-for-portrait { |
| + | display: none !important; } } |
| + | @media screen and (orientation: portrait) { |
| + | .hide-for-landscape, |
| + | .show-for-portrait { |
| + | display: block !important; } } |
| + | |
| + | .float-left { |
| + | float: left !important; } |
| + | |
| + | .float-right { |
| + | float: right !important; } |
| + | |
| + | .float-center { |
| + | display: block; |
| + | margin-left: auto; |
| + | margin-right: auto; } |
| + | |
| + | .clearfix::before, .clearfix::after { |
| + | content: ' '; |
| + | display: table; } |
| + | |
| + | .clearfix::after { |
| + | clear: both; } |
| + | |
| + | /*# sourceMappingURL=foundation.css.map */ |
public/stylesheets/foundation6/_global.scss
+197
-0
| @@ | @@ -0,0 +1,197 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group global |
| + | //// |
| + | |
| + | /// Global width of your site. Used by the grid to determine row width. |
| + | /// @type Number |
| + | $global-width: rem-calc(1200) !default; |
| + | |
| + | /// 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; |
| + | |
| + | /// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px |
| + | /// @type Number |
| + | $global-lineheight: 1.5 !default; |
| + | |
| + | /// Primary color for interactive components like links and buttons. |
| + | /// @type Color |
| + | $primary-color: #2199e8 !default; |
| + | |
| + | /// Secondary color, used with components that support the `.secondary` class. |
| + | /// @type Color |
| + | $secondary-color: #777 !default; |
| + | |
| + | /// Color to indicate a positive status or action, used with the `.success` class. |
| + | /// @type Color |
| + | $success-color: #3adb76 !default; |
| + | |
| + | /// Color to indicate a caution status or action, used with the `.warning` class. |
| + | /// @type Color |
| + | $warning-color: #ffae00 !default; |
| + | |
| + | /// Color to indicate a negative status or action, used with the `.alert` class. |
| + | /// @type Color |
| + | $alert-color: #ec5840 !default; |
| + | |
| + | /// Color used for light gray UI items. |
| + | /// @type Color |
| + | $light-gray: #e6e6e6 !default; |
| + | |
| + | /// Color used for medium gray UI items. |
| + | /// @type Color |
| + | $medium-gray: #cacaca !default; |
| + | |
| + | /// Color used for dark gray UI items. |
| + | /// @type Color |
| + | $dark-gray: #8a8a8a !default; |
| + | |
| + | /// Color used for black ui items. |
| + | /// @type Color |
| + | $black: #0a0a0a !default; |
| + | |
| + | /// Color used for white ui items. |
| + | /// @type Color |
| + | $white: #fefefe !default; |
| + | |
| + | /// Background color of the body. |
| + | /// @type Color |
| + | $body-background: $white !default; |
| + | |
| + | /// Text color of the body. |
| + | /// @type Color |
| + | $body-font-color: $black !default; |
| + | |
| + | /// Font stack of the body. |
| + | /// @type List |
| + | $body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default; |
| + | |
| + | /// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties. |
| + | /// @type Boolean |
| + | $body-antialiased: true !default; |
| + | |
| + | /// Text direction for the document. Set to `rtl` to reverse the orientation and direction of all components. |
| + | /// @type Keyword |
| + | $text-direction: ltr !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 margin between components. |
| + | /// @type Number |
| + | $global-margin: 1rem !default; |
| + | |
| + | /// Global font weight used for normal type. |
| + | /// @type Keyword | Number |
| + | $global-weight-normal: normal !default; |
| + | |
| + | /// Global font weight used for bold type. |
| + | /// @type Keyword | Number |
| + | $global-weight-bold: bold !default; |
| + | |
| + | /// Global value used for all elements that have a border radius. |
| + | /// @type Number |
| + | $global-radius: 0 !default; |
| + | |
| + | /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`. |
| + | $global-text-direction: ltr !default; |
| + | |
| + | // Internal variables used for text direction |
| + | $global-left: if($global-text-direction == rtl, right, left); |
| + | $global-right: if($global-text-direction == rtl, left, right); |
| + | |
| + | // Internal map used to iterate through colors, to generate CSS classes with less code |
| + | $foundation-colors: ( |
| + | primary: $primary-color, |
| + | secondary: $secondary-color, |
| + | success: $success-color, |
| + | alert: $alert-color, |
| + | warning: $warning-color, |
| + | ); |
| + | |
| + | @mixin foundation-global-styles { |
| + | html, |
| + | body { |
| + | font-size: $global-font-size; |
| + | box-sizing: border-box; |
| + | } |
| + | |
| + | // Set box-sizing globally to handle padding and border widths |
| + | *, |
| + | *:before, |
| + | *:after { |
| + | box-sizing: inherit; |
| + | } |
| + | |
| + | // Default body styles |
| + | body { |
| + | padding: 0; |
| + | margin: 0; |
| + | font-family: $body-font-family; |
| + | font-weight: $global-weight-normal; |
| + | line-height: $global-lineheight; |
| + | color: $body-font-color; |
| + | background: $body-background; |
| + | |
| + | @if ($body-antialiased) { |
| + | -webkit-font-smoothing: antialiased; |
| + | -moz-osx-font-smoothing: grayscale; |
| + | } |
| + | } |
| + | |
| + | img { |
| + | // Grid defaults to get images and embeds to work properly |
| + | max-width: 100%; |
| + | height: auto; |
| + | -ms-interpolation-mode: bicubic; |
| + | |
| + | // Get rid of gap under images by making them display: inline-block; by default |
| + | display: inline-block; |
| + | vertical-align: middle; |
| + | } |
| + | |
| + | // Make sure textarea takes on height automatically |
| + | textarea { |
| + | height: auto; |
| + | min-height: 50px; |
| + | border-radius: $global-radius; |
| + | } |
| + | |
| + | // Make select elements are 100% width by default |
| + | select { |
| + | width: 100%; |
| + | border-radius: $global-radius; |
| + | } |
| + | |
| + | // Styles Google Maps and MapQuest embeds properly |
| + | // scss-lint:disable IdSelector |
| + | #map_canvas, |
| + | .map_canvas, |
| + | .mqa-display { |
| + | img, |
| + | embed, |
| + | object { |
| + | max-width: none !important; |
| + | } |
| + | } |
| + | |
| + | // Reset <button> styles created by most browsers |
| + | button { |
| + | -webkit-appearance: none; |
| + | -moz-appearance: none; |
| + | background: transparent; |
| + | padding: 0; |
| + | border: 0; |
| + | border-radius: $global-radius; |
| + | line-height: 1; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_accordion-menu.scss
+28
-0
| @@ | @@ -0,0 +1,28 @@ |
| + | //// |
| + | /// @group accordion-menu |
| + | //// |
| + | |
| + | /// Sets if accordion menus have the default arrow styles. |
| + | /// @type Boolean |
| + | $accordionmenu-arrows: true; |
| + | |
| + | @mixin foundation-accordion-menu { |
| + | @if $accordionmenu-arrows { |
| + | .is-accordion-submenu-parent > a { |
| + | position: relative; |
| + | |
| + | &::after { |
| + | @include css-triangle(6px, $primary-color, down); |
| + | position: absolute; |
| + | top: 50%; |
| + | margin-top: -4px; |
| + | right: 1rem; |
| + | } |
| + | } |
| + | |
| + | .is-accordion-submenu-parent[aria-expanded="true"] > a::after { |
| + | transform-origin: 50% 50%; |
| + | transform: scaleY(-1); |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_accordion.scss
+112
-0
| @@ | @@ -0,0 +1,112 @@ |
| + | // 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; |
| + | |
| + | /// If `true`, adds plus and minus icons to the side of each accordion title. |
| + | /// @type Boolean |
| + | $accordion-plusminus: true; |
| + | |
| + | /// Default text color for items in a Menu. |
| + | /// @type Color |
| + | $accordion-item-color: foreground($accordion-background, $primary-color); |
| + | |
| + | /// Default background color on hover for items in a Menu. |
| + | /// @type Color |
| + | $accordion-item-background-hover: $light-gray !default; |
| + | |
| + | /// Default padding of an accordion item. |
| + | /// @type Number | List |
| + | $accordion-item-padding: 1.25rem 1rem !default; |
| + | |
| + | /// Default background color of tab content. |
| + | /// @type Color |
| + | $accordion-content-background: $white !default; |
| + | |
| + | /// Default border color of tab content. |
| + | /// @type Color |
| + | $accordion-content-border: 1px solid $light-gray !default; |
| + | |
| + | /// Default text color of tab content. |
| + | /// @type Color |
| + | $accordion-content-color: foreground($accordion-background, $primary-color); |
| + | |
| + | /// Default padding for tab content. |
| + | /// @type Number | List |
| + | $accordion-content-padding: 1rem !default; |
| + | |
| + | /// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`. |
| + | @mixin accordion-container { |
| + | list-style-type: none; |
| + | background: $accordion-background; |
| + | border: $accordion-content-border; |
| + | border-radius: $global-radius; |
| + | margin-#{$global-left}: 0; |
| + | } |
| + | |
| + | /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item. |
| + | @mixin accordion-title { |
| + | display: block; |
| + | padding: $accordion-item-padding; |
| + | line-height: 1; |
| + | font-size: rem-calc(12); |
| + | color: $accordion-item-color; |
| + | position: relative; |
| + | border-bottom: $accordion-content-border; |
| + | |
| + | &:hover, |
| + | &:focus { |
| + | background-color: $accordion-item-background-hover; |
| + | } |
| + | |
| + | // Remove the border on the last title |
| + | :last-child > & { |
| + | border-bottom-width: 0; |
| + | } |
| + | |
| + | @if $accordion-plusminus { |
| + | &::before { |
| + | content: '+'; |
| + | position: absolute; |
| + | #{$global-right}: 1rem; |
| + | top: 50%; |
| + | margin-top: -0.5rem; |
| + | } |
| + | |
| + | .is-active > &::before { |
| + | content: '–'; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for accordion content. Apply this to the content pane below an accordion item's title. |
| + | @mixin accordion-content { |
| + | padding: $accordion-item-padding; |
| + | display: none; |
| + | border-bottom: $accordion-content-border; |
| + | } |
| + | |
| + | @mixin foundation-accordion { |
| + | .accordion { |
| + | @include accordion-container; |
| + | } |
| + | |
| + | .accordion-item { |
| + | // This class doesn't need styles! |
| + | } |
| + | |
| + | .accordion-title { |
| + | @include accordion-title; |
| + | } |
| + | |
| + | .accordion-content { |
| + | @include accordion-content; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_badge.scss
+55
-0
| @@ | @@ -0,0 +1,55 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group badge |
| + | //// |
| + | |
| + | /// Default background color for badges. |
| + | /// @type Color |
| + | $badge-background: $primary-color !default; |
| + | |
| + | /// Default text color for badges. |
| + | /// @type Color |
| + | $badge-color: foreground($badge-background) !default; |
| + | |
| + | /// Default padding inside badges. |
| + | /// @type Number |
| + | $badge-padding: 0.3em !default; |
| + | |
| + | /// Minimum width of a badge. |
| + | /// @type Number |
| + | $badge-minwidth: 2.1em !default; |
| + | |
| + | /// Default font size for badges. |
| + | /// @type Number |
| + | $badge-font-size: 0.6rem !default; |
| + | |
| + | /// Generates the base styles for a badge. |
| + | @mixin badge { |
| + | display: inline-block; |
| + | padding: $badge-padding; |
| + | min-width: $badge-minwidth; |
| + | font-size: $badge-font-size; |
| + | text-align: center; |
| + | border-radius: 50%; |
| + | } |
| + | |
| + | @mixin foundation-badge { |
| + | .badge { |
| + | @include badge; |
| + | |
| + | background: $badge-background; |
| + | color: $badge-color; |
| + | |
| + | @each $name, $color in $foundation-colors { |
| + | @if $name != primary { |
| + | &.#{$name} { |
| + | background: $color; |
| + | color: foreground($color); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_breadcrumbs.scss
+94
-0
| @@ | @@ -0,0 +1,94 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group breadcrumbs |
| + | //// |
| + | |
| + | /// Margin around a breadcrumbs container. |
| + | /// @type Number |
| + | $breadcrumbs-margin: 0 0 $global-margin 0 !default; |
| + | |
| + | /// Font size of breadcrumb links. |
| + | /// @type Number |
| + | $breadcrumbs-item-font-size: rem-calc(11) !default; |
| + | |
| + | /// Color of breadcrumb links. |
| + | /// @type Color |
| + | $breadcrumbs-item-color: $primary-color !default; |
| + | |
| + | /// Color of the active breadcrumb link. |
| + | /// @type Color |
| + | $breadcrumbs-item-color-current: $black !default; |
| + | |
| + | /// Opacity of disabled breadcrumb links. |
| + | /// @type Number |
| + | $breadcrumbs-item-color-disabled: $medium-gray !default; |
| + | |
| + | /// Margin between breadcrumb items. |
| + | /// @type Number |
| + | $breadcrumbs-item-margin: 0.75rem !default; |
| + | |
| + | /// If `true`, makes breadcrumb links uppercase. |
| + | /// @type Boolean |
| + | $breadcrumbs-item-uppercase: true !default; |
| + | |
| + | /// If `true`, adds a slash between breadcrumb links. |
| + | /// @type Boolean |
| + | $breadcrumbs-item-slash: true !default; |
| + | |
| + | /// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it. |
| + | @mixin breadcrumbs-container { |
| + | @include clearfix; |
| + | list-style: none; |
| + | margin: $breadcrumbs-margin; |
| + | |
| + | // Item wrapper |
| + | li { |
| + | float: #{$global-left}; |
| + | color: $breadcrumbs-item-color-current; |
| + | font-size: $breadcrumbs-item-font-size; |
| + | cursor: default; |
| + | |
| + | @if $breadcrumbs-item-uppercase { |
| + | text-transform: uppercase; |
| + | } |
| + | |
| + | @if $breadcrumbs-item-slash { |
| + | // Need to escape the backslash |
| + | $slash: if($global-text-direction == 'ltr', '/', '\\'); |
| + | |
| + | &:not(:last-child)::after { |
| + | color: $medium-gray; |
| + | content: $slash; |
| + | margin: 0 $breadcrumbs-item-margin; |
| + | position: relative; |
| + | top: 1px; |
| + | opacity: 1; |
| + | } |
| + | } |
| + | @else { |
| + | margin-#{$global-right}: $breadcrumbs-item-margin; |
| + | } |
| + | } |
| + | |
| + | // Page links |
| + | a { |
| + | color: $breadcrumbs-item-color; |
| + | |
| + | &:hover { |
| + | text-decoration: underline; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-breadcrumbs { |
| + | .breadcrumbs { |
| + | @include breadcrumbs-container; |
| + | |
| + | .disabled { |
| + | color: $breadcrumbs-item-color-disabled; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_button-group.scss
+115
-0
| @@ | @@ -0,0 +1,115 @@ |
| + | // 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; |
| + | |
| + | /// Margin between buttons in a button group. |
| + | /// @type Border |
| + | $buttongroup-spacing: 1px; |
| + | |
| + | /// Selector for the buttons inside a button group. |
| + | /// @type String |
| + | $buttongroup-child-selector: '.button'; |
| + | |
| + | /// Maximum number of buttons that can be in an even-width button group. |
| + | /// @type Number |
| + | $buttongroup-expand-max: 6; |
| + | |
| + | /// Add styles for a button group container. |
| + | /// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group. |
| + | @mixin button-group( |
| + | $child-selector: $buttongroup-child-selector |
| + | ) { |
| + | @include clearfix; |
| + | margin-bottom: $buttongroup-margin; |
| + | font-size: map-get($button-sizes, default); |
| + | |
| + | #{$child-selector} { |
| + | float: #{$global-left}; |
| + | margin: 0; |
| + | font-size: inherit; |
| + | |
| + | &:not(:last-child) { |
| + | border-#{$global-right}: $buttongroup-spacing solid $body-background; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Creates a full-width button group, making each button equal width. |
| + | /// @param {Keyword|Number} $count [auto] - Number of buttons inside the button group. Set to `auto` to generate CSS that will account for a variable number of buttons. |
| + | /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group. |
| + | @mixin button-group-expand( |
| + | $count: auto, |
| + | $selector: $buttongroup-child-selector |
| + | ) { |
| + | #{$selector} { |
| + | @if $count == auto { |
| + | @include auto-width($buttongroup-expand-max, $selector); |
| + | } |
| + | @else if type-of($count) == 'number' { |
| + | width: percentage(1 / $count); |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Stacks the buttons in a button group. |
| + | /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group. |
| + | @mixin button-group-stack( |
| + | $selector: $buttongroup-child-selector |
| + | ) { |
| + | #{$selector} { |
| + | width: 100%; |
| + | border-#{$global-right}: 0; |
| + | } |
| + | } |
| + | |
| + | /// Un-stacks the buttons in a button group. |
| + | /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group. |
| + | @mixin button-group-unstack( |
| + | $selector: $buttongroup-child-selector |
| + | ) { |
| + | #{$selector} { |
| + | width: auto; |
| + | |
| + | &:not(:last-child) { |
| + | border-#{$global-right}: $buttongroup-spacing solid $body-background; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-button-group { |
| + | .button-group { |
| + | @include button-group; |
| + | |
| + | // Sizes |
| + | &.tiny { font-size: map-get($button-sizes, tiny); } |
| + | &.small { font-size: map-get($button-sizes, small); } |
| + | &.large { font-size: map-get($button-sizes, large); } |
| + | &.expanded { @include button-group-expand; } |
| + | |
| + | // Colors |
| + | @each $name, $color in $foundation-colors { |
| + | &.#{$name} #{$buttongroup-child-selector} { |
| + | @include button-style($color, auto, auto); |
| + | } |
| + | } |
| + | |
| + | &.stacked, |
| + | &.stacked-for-small { |
| + | @include button-group-stack; |
| + | } |
| + | |
| + | &.stacked-for-small { |
| + | @include breakpoint(medium) { |
| + | @include button-group-unstack; |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_button.scss
+264
-0
| @@ | @@ -0,0 +1,264 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group button |
| + | //// |
| + | |
| + | /// Padding inside buttons. |
| + | /// @type List |
| + | $button-padding: 0.85em 1em !default; |
| + | |
| + | /// Margin around buttons. |
| + | /// @type List |
| + | $button-margin: 0 $global-margin $global-margin 0 !default; |
| + | |
| + | /// Default fill for buttons. Can either be `solid` or `hollow`. |
| + | /// @type Keyword |
| + | $button-fill: solid !default; |
| + | |
| + | /// Default background color for buttons. |
| + | /// @type Color |
| + | $button-background: $primary-color !default; |
| + | |
| + | /// Background color on hover for buttons. |
| + | /// @type Color |
| + | $button-background-hover: scale-color($button-background, $lightness: -15%) !default; |
| + | |
| + | /// Font color for buttons. |
| + | /// @type List |
| + | $button-color: #fff !default; |
| + | |
| + | /// Font color for buttons, if the background is light. |
| + | /// @type List |
| + | $button-color-alt: #000 !default; |
| + | |
| + | /// Border radius for buttons, defaulted to global-radius. |
| + | /// @type Number |
| + | $button-radius: $global-radius !default; |
| + | |
| + | /// Sizes for buttons. |
| + | /// @type Map |
| + | $button-sizes: ( |
| + | tiny: 0.6rem, |
| + | small: 0.75rem, |
| + | default: 0.9rem, |
| + | large: 1.25rem, |
| + | ) !default; |
| + | |
| + | /// opacity for a disabled button. |
| + | /// @type List |
| + | $button-opacity-disabled: 0.25 !default; |
| + | |
| + | // Internal: flip from margin-right to margin-left for defaults |
| + | @if $global-text-direction == 'rtl' { |
| + | $button-margin: 0 0 $global-margin $global-margin; |
| + | } |
| + | |
| + | // TODO: Document button-base() mixin |
| + | @mixin button-base { |
| + | @include disable-mouse-outline; |
| + | display: inline-block; |
| + | text-align: center; |
| + | line-height: 1; |
| + | cursor: pointer; |
| + | -webkit-appearance: none; |
| + | transition: all 0.25s ease-out; |
| + | vertical-align: middle; |
| + | border: 1px solid transparent; |
| + | border-radius: $button-radius; |
| + | padding: $button-padding; |
| + | margin: $button-margin; |
| + | font-size: map-get($button-sizes, default); |
| + | } |
| + | |
| + | /// Expands a button to make it full-width. |
| + | /// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior. |
| + | @mixin button-expand($expand: true) { |
| + | @if $expand { |
| + | display: block; |
| + | width: 100%; |
| + | margin-left: 0; |
| + | margin-right: 0; |
| + | } |
| + | @else { |
| + | display: inline-block; |
| + | width: auto; |
| + | margin: $button-margin; |
| + | } |
| + | } |
| + | |
| + | /// Sets the visual style of a button. |
| + | /// @param {Color} $background [$button-background] - Background color of the button. |
| + | /// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color. |
| + | /// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color. |
| + | @mixin button-style( |
| + | $background: $button-background, |
| + | $background-hover: $button-background-hover, |
| + | $color: $button-color |
| + | ) { |
| + | @if $color == auto { |
| + | $color: isitlight($background); |
| + | } |
| + | |
| + | @if $background-hover == auto { |
| + | $background-hover: scale-color($background, $lightness: -20%); |
| + | } |
| + | |
| + | @if lightness($background) >= 70% { |
| + | $color: $button-color-alt; |
| + | } |
| + | @else { |
| + | $color: $button-color; |
| + | } |
| + | |
| + | background: $background; |
| + | color: $color; |
| + | |
| + | &:hover, &:focus { |
| + | background: $background-hover; |
| + | color: $color; |
| + | } |
| + | } |
| + | |
| + | /// Removes background fill on hover and focus for hollow buttons. |
| + | @mixin button-hollow { |
| + | &, |
| + | &:hover, &:focus { |
| + | background: transparent; |
| + | } |
| + | } |
| + | |
| + | @mixin button-hollow-style($color: $primary-color) { |
| + | $color-hover: scale-color($color, $lightness: -50%); |
| + | |
| + | border: 1px solid $color; |
| + | color: $color; |
| + | |
| + | &:hover, &:focus { |
| + | border-color: $color-hover; |
| + | color: $color-hover; |
| + | } |
| + | } |
| + | |
| + | /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events. |
| + | @mixin button-disabled { |
| + | opacity: $button-opacity-disabled; |
| + | cursor: not-allowed; |
| + | pointer-events: none; |
| + | } |
| + | |
| + | /// Adds a dropdown arrow to a button. |
| + | /// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons. |
| + | /// @param {Color} $color [white] - Color of the arrow. |
| + | /// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is. |
| + | @mixin button-dropdown( |
| + | $size: 0.4em, |
| + | $color: $white, |
| + | $offset: get-side($button-padding, right) |
| + | ) { |
| + | &::after { |
| + | @include css-triangle($size, $color, down); |
| + | position: relative; |
| + | top: 0.4em; // Aligns the arrow with the text of the button |
| + | float: #{$global-right}; |
| + | margin-#{$global-left}: get-side($button-padding, right); |
| + | display: inline-block; |
| + | } |
| + | } |
| + | |
| + | /// Adds all styles for a button. For more granular control over styles, use the individual button mixins. |
| + | /// @param {Boolean} $expand [false] - Set to `true` to make the button full-width. |
| + | /// @param {Color} $background [$button-background] - Background color of the button. |
| + | /// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color. |
| + | /// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color. |
| + | /// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button. |
| + | @mixin button( |
| + | $expand: false, |
| + | $background: $button-background, |
| + | $background-hover: $button-background-hover, |
| + | $color: $button-color, |
| + | $style: $button-fill |
| + | ) { |
| + | @include button-base; |
| + | |
| + | @if $style == solid { |
| + | @include button-style($background, $background-hover, $color); |
| + | } |
| + | @else if $style == hollow { |
| + | @include button-hollow; |
| + | @include button-hollow-style($background); |
| + | } |
| + | |
| + | @if $expand { |
| + | @include button-expand; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-button { |
| + | .button { |
| + | @include button; |
| + | |
| + | // Sizes |
| + | &.tiny { font-size: map-get($button-sizes, tiny); } |
| + | &.small { font-size: map-get($button-sizes, small); } |
| + | &.large { font-size: map-get($button-sizes, large); } |
| + | &.expanded { @include button-expand; } |
| + | |
| + | // Colors |
| + | @each $name, $color in $foundation-colors { |
| + | @if $button-fill != hollow { |
| + | &.#{$name} { |
| + | @include button-style($color, auto); |
| + | } |
| + | } |
| + | @else { |
| + | &.#{$name} { |
| + | @include button-hollow-style($color); |
| + | } |
| + | |
| + | &.#{$name}.dropdown::after { |
| + | border-top-color: $color; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Hollow style |
| + | @if $button-fill != hollow { |
| + | &.hollow { |
| + | @include button-hollow; |
| + | @include button-hollow-style; |
| + | |
| + | @each $name, $color in $foundation-colors { |
| + | &.#{$name} { |
| + | @include button-hollow-style($color); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Disabled style |
| + | &.disabled { |
| + | @include button-disabled; |
| + | } |
| + | |
| + | // Dropdown arrow |
| + | &.dropdown { |
| + | @include button-dropdown; |
| + | |
| + | @if $button-fill == hollow { |
| + | &::after { |
| + | border-top-color: $button-background; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Button with dropdown arrow only |
| + | &.arrow-only::after { |
| + | margin-#{$global-left}: 0; |
| + | float: none; |
| + | top: 0.2em; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_callout.scss
+115
-0
| @@ | @@ -0,0 +1,115 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group callout |
| + | //// |
| + | |
| + | /// Defualt background color. |
| + | /// @type Color |
| + | $callout-background: $white !default; |
| + | |
| + | /// Default fade value for callout backgrounds. |
| + | /// @type Number |
| + | $callout-background-fade: 85% !default; |
| + | |
| + | /// Defualt border style for callouts. |
| + | /// @type List |
| + | $callout-border: 1px solid rgba($black, 0.25) !default; |
| + | |
| + | /// Default bottom margin for callouts. |
| + | /// @type Number |
| + | $callout-margin: 0 0 1rem 0 !default; |
| + | |
| + | /// Default inner padding for callouts. |
| + | /// @type Number |
| + | $callout-padding: 1rem !default; |
| + | |
| + | /// Default font color for callouts. |
| + | /// @type Color |
| + | $callout-font-color: $body-font-color !default; |
| + | |
| + | /// Default font color for callouts, if the callout has a dark background. |
| + | /// @type Color |
| + | $callout-font-color-alt: $body-background !default; |
| + | |
| + | /// Default border radius for callouts. |
| + | /// @type Color |
| + | $callout-radius: $global-radius !default; |
| + | |
| + | /// Amount to tint links used within colored panels. Set to `false` to disable this feature. |
| + | /// @type Number | Boolean |
| + | $callout-link-tint: 30%; |
| + | |
| + | /// Adds basic styles for a callout, including padding and margin. |
| + | @mixin callout-base() { |
| + | margin: $callout-margin; |
| + | padding: $callout-padding; |
| + | border: $callout-border; |
| + | border-radius: $callout-radius; |
| + | position: relative; |
| + | |
| + | // 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. If `$callout-link-tint` is enabled, links within colored panels will be a darker version of the background. |
| + | /// @param {Color} $color [$callout-background] - Color to use. |
| + | @mixin callout-style($color: $callout-background) { |
| + | $background: scale-color($color, $lightness: $callout-background-fade); |
| + | $link-color: scale-color($color, $lightness: -$callout-link-tint); |
| + | |
| + | background-color: $background; |
| + | |
| + | @if $callout-link-tint and hue($background) > 0deg { |
| + | a { |
| + | color: $link-color; |
| + | |
| + | &:hover { |
| + | color: darken($link-color, 15%); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin callout-size($padding) { |
| + | padding-top: $padding; |
| + | padding-right: $padding; |
| + | padding-bottom: $padding; |
| + | padding-left: $padding; |
| + | } |
| + | |
| + | |
| + | /// Adds styles for a callout. |
| + | /// @param {Color} $color [$callout-background] - Color to use. |
| + | @mixin callout($color: $callout-background) { |
| + | @include callout-base; |
| + | @include callout-style($color); |
| + | } |
| + | |
| + | @mixin foundation-callout { |
| + | .callout { |
| + | @include callout; |
| + | |
| + | @each $name, $color in $foundation-colors { |
| + | &.#{$name} { |
| + | @include callout-style($color); |
| + | } |
| + | } |
| + | |
| + | &.small { |
| + | @include callout-size(.5rem); |
| + | } |
| + | |
| + | &.large { |
| + | @include callout-size(3rem); |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_close-button.scss
+61
-0
| @@ | @@ -0,0 +1,61 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group close-button |
| + | //// |
| + | |
| + | /// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`. |
| + | /// @type List |
| + | $closebutton-position: right top !default; |
| + | |
| + | /// Right (or left) offset for a close button. |
| + | /// @type Number |
| + | $closebutton-offset-horizontal: 1rem !default; |
| + | |
| + | /// Top (or bottom) offset for a close button. |
| + | /// @type Number |
| + | $closebutton-offset-vertical: 0.5rem !default; |
| + | |
| + | /// Default font size of the close button. |
| + | /// @type Number |
| + | $closebutton-size: 2em !default; |
| + | |
| + | /// The line-height of the close button. It affects the spacing of the element. |
| + | /// @type Number |
| + | $closebutton-lineheight: 1 !default; |
| + | |
| + | /// Default color of the close button. |
| + | /// @type Color |
| + | $closebutton-color: $dark-gray !default; |
| + | |
| + | /// Default color of the close button when being hovered on. |
| + | /// @type Color |
| + | $closebutton-color-hover: $black !default; |
| + | |
| + | /// Adds styles for a close button, using the styles in the settings variables. |
| + | @mixin close-button { |
| + | $x: nth($closebutton-position, 1); |
| + | $y: nth($closebutton-position, 2); |
| + | |
| + | @include disable-mouse-outline; |
| + | position: absolute; |
| + | color: $closebutton-color; |
| + | #{$x}: $closebutton-offset-horizontal; |
| + | #{$y}: $closebutton-offset-vertical; |
| + | font-size: $closebutton-size; |
| + | line-height: $closebutton-lineheight; |
| + | cursor: pointer; |
| + | |
| + | &:hover, |
| + | &:focus { |
| + | color: $closebutton-color-hover; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-close-button { |
| + | .close-button { |
| + | @include close-button; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_drilldown.scss
+67
-0
| @@ | @@ -0,0 +1,67 @@ |
| + | // 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; |
| + | |
| + | @mixin foundation-drilldown-menu { |
| + | // Applied to the Menu container |
| + | .is-drilldown { |
| + | position: relative; |
| + | overflow: hidden; |
| + | } |
| + | |
| + | // Applied to nested <ul>s |
| + | .is-drilldown-sub { |
| + | position: absolute; |
| + | top: 0; |
| + | left: 100%; |
| + | z-index: -1; |
| + | height: 100%; |
| + | width: 100%; |
| + | background: $white; |
| + | transition: $drilldown-transition; |
| + | |
| + | &.is-active { |
| + | z-index: 1; |
| + | display: block; |
| + | transform: translateX(-100%); |
| + | } |
| + | |
| + | &.is-closing { |
| + | transform: translateX(100%); |
| + | } |
| + | } |
| + | |
| + | @if $drilldown-arrows { |
| + | .is-drilldown-submenu-parent > a { |
| + | position: relative; |
| + | |
| + | &::after { |
| + | @include css-triangle(6px, $primary-color, right); |
| + | position: absolute; |
| + | top: 50%; |
| + | margin-top: -6px; |
| + | right: 1rem; |
| + | } |
| + | } |
| + | |
| + | .js-drilldown-back::before { |
| + | @include css-triangle(6px, $primary-color, left); |
| + | float: left; |
| + | margin-right: 0.75rem; // Creates space between the arrow and the text |
| + | margin-left: 0.6rem; // Lines the tip of the arrow with the items below |
| + | margin-top: 14px; // Aligns the arrow with the text |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_dropdown-menu.scss
+123
-0
| @@ | @@ -0,0 +1,123 @@ |
| + | // 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; |
| + | |
| + | /// Minimum width of dropdown sub-menus. |
| + | /// @type Length |
| + | $dropdownmenu-min-width: 200px !default; |
| + | |
| + | /// Background color for dropdowns. |
| + | /// @type Color |
| + | $dropdownmenu-background: $white !default; |
| + | |
| + | /// Border for dropdown panes. |
| + | /// @type List |
| + | $dropdown-border: 1px solid $medium-gray !default; |
| + | |
| + | @mixin foundation-dropdown-menu { |
| + | .dropdown.menu { |
| + | .has-submenu { |
| + | position: relative; |
| + | |
| + | a::after { |
| + | float: right; |
| + | margin-top: 3px; |
| + | margin-left: 10px; |
| + | } |
| + | |
| + | @if $dropdownmenu-arrows { |
| + | &.is-down-arrow a { |
| + | padding-right: 1.5rem; |
| + | position: relative; |
| + | } |
| + | &.is-down-arrow > a::after { |
| + | @include css-triangle(5px, $anchor-color, down); |
| + | position: absolute; |
| + | top: 12px; |
| + | right: 5px; |
| + | } |
| + | &.is-left-arrow > a::after { |
| + | @include css-triangle(5px, $anchor-color, left); |
| + | float: left; |
| + | margin-left: 0; |
| + | margin-right: 10px; |
| + | } |
| + | &.is-right-arrow > a::after { |
| + | @include css-triangle(5px, $anchor-color, right); |
| + | } |
| + | } |
| + | |
| + | &.is-left-arrow.opens-inner .submenu{ |
| + | right: 0; |
| + | left: auto; |
| + | } |
| + | &.is-right-arrow.opens-inner .submenu{ |
| + | left: 0; |
| + | right: auto; |
| + | } |
| + | &.opens-inner .submenu { |
| + | top: 100%; |
| + | } |
| + | } |
| + | |
| + | .submenu { |
| + | display: none; |
| + | position: absolute; |
| + | top: 0; |
| + | left: 100%; |
| + | min-width: $dropdownmenu-min-width; |
| + | z-index: 1; |
| + | background: $dropdownmenu-background; |
| + | border: $dropdown-border; |
| + | |
| + | > li { |
| + | width: 100%; |
| + | } |
| + | |
| + | &.first-sub { |
| + | top: 100%; |
| + | left: 0; |
| + | right: auto; |
| + | } |
| + | |
| + | &:not(.js-dropdown-nohover) > .has-submenu:hover > &, |
| + | &.js-dropdown-active { |
| + | display: block; |
| + | } |
| + | } |
| + | |
| + | .has-submenu.opens-left .submenu { |
| + | left: auto; |
| + | right: 100%; |
| + | } |
| + | |
| + | &.align-right { |
| + | .submenu.first-sub { |
| + | top: 100%; |
| + | left: auto; |
| + | right: 0; |
| + | } |
| + | } |
| + | } |
| + | |
| + | .is-dropdown-menu.vertical { |
| + | width: 100px; |
| + | |
| + | &.align-right { |
| + | float: right; |
| + | } |
| + | |
| + | > li .submenu { |
| + | top: 0; |
| + | left: 100%; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_dropdown.scss
+64
-0
| @@ | @@ -0,0 +1,64 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group dropdown |
| + | //// |
| + | |
| + | /// Padding for dropdown panes. |
| + | /// @type List |
| + | $dropdown-padding: 1rem !default; |
| + | |
| + | /// Border for dropdown panes. |
| + | /// @type List |
| + | $dropdown-border: 1px solid $medium-gray !default; |
| + | |
| + | /// Font size for dropdown panes. |
| + | /// @type List |
| + | $dropdown-font-size: 16rem !default; |
| + | |
| + | /// Width for dropdown panes. |
| + | /// @type Number |
| + | $dropdown-width: 300px !default; |
| + | |
| + | /// Border radius dropdown panes. |
| + | /// @type Number |
| + | $dropdown-radius: $global-radius !default; |
| + | |
| + | /// Sizes for dropdown panes. Each size is a CSS class you can apply. |
| + | /// @type Map |
| + | $dropdown-sizes: ( |
| + | tiny: 100px, |
| + | small: 200px, |
| + | large: 400px, |
| + | ) !default; |
| + | |
| + | /// Applies styles for a basic dropdown. |
| + | @mixin dropdown-container { |
| + | background-color: $body-background; |
| + | border: $dropdown-border; |
| + | display: block; |
| + | padding: $dropdown-padding; |
| + | position: absolute; |
| + | visibility: hidden; |
| + | width: 300px; |
| + | z-index: 10; |
| + | border-radius: $dropdown-radius; |
| + | |
| + | &.is-open { |
| + | visibility: visible; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-dropdown { |
| + | .dropdown-pane { |
| + | @include dropdown-container; |
| + | } |
| + | |
| + | @each $name, $size in $dropdown-sizes { |
| + | .dropdown-pane.#{$name} { |
| + | width: $size; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_flex-video.scss
+68
-0
| @@ | @@ -0,0 +1,68 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group flex-video |
| + | //// |
| + | |
| + | /// Padding above a flex video container. |
| + | /// @type Number |
| + | $flexvideo-padding-top: rem-calc(25) !default; |
| + | |
| + | /// Margin below a flex video container. |
| + | /// @type Number |
| + | $flexvideo-margin-bottom: rem-calc(16) !default; |
| + | |
| + | /// Padding used to create a 4:3 aspect ratio. |
| + | /// @type Number |
| + | $flexvideo-ratio: 4 by 3 !default; |
| + | |
| + | /// Padding used to create a 16:9 aspect ratio. |
| + | /// @type Number |
| + | $flexvideo-ratio-widescreen: 16 by 9 !default; |
| + | |
| + | /// Creates a percentage height that can be used as padding in a flex video container. |
| + | /// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`. |
| + | /// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a flex video container. |
| + | @function flex-video($ratio) { |
| + | $w: nth($ratio, 1); |
| + | $h: nth($ratio, 3); |
| + | @return $h / $w * 100%; |
| + | } |
| + | |
| + | /// Creates a flex video container. |
| + | /// @param {List} $ratio [$flexvideo-ratio] - Ratio to use for the container, formatted as `x by y`. |
| + | @mixin flex-video($ratio: $flexvideo-ratio) { |
| + | position: relative; |
| + | height: 0; |
| + | padding-top: $flexvideo-padding-top; |
| + | padding-bottom: flex-video($ratio); |
| + | margin-bottom: $flexvideo-margin-bottom; |
| + | overflow: hidden; |
| + | |
| + | iframe, |
| + | object, |
| + | embed, |
| + | video { |
| + | position: absolute; |
| + | top: 0; |
| + | #{$global-left}: 0; |
| + | width: 100%; |
| + | height: 100%; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-flex-video { |
| + | .flex-video { |
| + | @include flex-video; |
| + | |
| + | &.widescreen { |
| + | padding-bottom: flex-video($flexvideo-ratio-widescreen); |
| + | } |
| + | |
| + | &.vimeo { |
| + | padding-top: 0; |
| + | } |
| + | } |
| + | } |
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-left: auto; |
| + | margin-right: auto; |
| + | } |
| + | |
| + | .clearfix { |
| + | @include clearfix; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_label.scss
+56
-0
| @@ | @@ -0,0 +1,56 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group label |
| + | //// |
| + | |
| + | /// Default background color for labels. |
| + | /// @type Color |
| + | $label-background: $primary-color !default; |
| + | |
| + | /// Default text color for labels. |
| + | /// @type Color |
| + | $label-color: foreground($label-background) !default; |
| + | |
| + | /// Default font size for labels. |
| + | /// @type Number |
| + | $label-font-size: 0.8rem !default; |
| + | |
| + | /// Default padding inside labels. |
| + | /// @type Number |
| + | $label-padding: 0.33333rem 0.5rem !default; |
| + | |
| + | /// Default radius of labels. |
| + | /// @type Number |
| + | $label-radius: $global-radius !default; |
| + | |
| + | /// Generates base styles for a label. |
| + | @mixin label { |
| + | display: inline-block; |
| + | padding: $label-padding; |
| + | font-size: $label-font-size; |
| + | line-height: 1; |
| + | white-space: nowrap; |
| + | cursor: default; |
| + | border-radius: $label-radius; |
| + | } |
| + | |
| + | @mixin foundation-label { |
| + | .label { |
| + | @include label; |
| + | |
| + | background: $label-background; |
| + | color: $label-color; |
| + | |
| + | @each $name, $color in $foundation-colors { |
| + | @if $name != primary { |
| + | &.#{$name} { |
| + | background: $color; |
| + | color: foreground($color); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_media-object.scss
+74
-0
| @@ | @@ -0,0 +1,74 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group media-object |
| + | //// |
| + | |
| + | /// Bottom margin of a media object. |
| + | /// @type Number |
| + | $mediaobject-margin-bottom: $global-margin !default; |
| + | |
| + | /// Left and right padding on sections within a media object. |
| + | /// @type Number |
| + | $mediaobject-section-padding: $global-padding !default; |
| + | |
| + | /// With of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width. |
| + | /// @type Number |
| + | $mediaobject-image-width-stacked: 100% !default; |
| + | |
| + | /// Adds styles for a media object container. |
| + | @mixin media-object-container { |
| + | margin-bottom: $mediaobject-margin-bottom; |
| + | display: block; |
| + | } |
| + | |
| + | /// Adds styles for sections within a media object. |
| + | /// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections. |
| + | @mixin media-object-section($padding: $mediaobject-section-padding) { |
| + | display: table-cell; |
| + | vertical-align: top; |
| + | |
| + | &:first-child { |
| + | padding-#{$global-right}: $padding; |
| + | } |
| + | |
| + | &:last-child:not(+ &:first-child) { |
| + | padding-#{$global-left}: $padding; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles to stack sections of a media object. Apply this to the section elements, not the container. |
| + | @mixin media-object-stack { |
| + | display: block; |
| + | padding: 0; |
| + | padding-bottom: $mediaobject-section-padding; |
| + | |
| + | img { |
| + | width: $mediaobject-image-width-stacked; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-media-object { |
| + | .media-object { |
| + | @include media-object-container; |
| + | |
| + | img { |
| + | max-width: none; |
| + | } |
| + | |
| + | &.stack-for-small .media-object-section { |
| + | @include breakpoint(small only) { |
| + | @include media-object-stack; |
| + | } |
| + | } |
| + | } |
| + | |
| + | .media-object-section { |
| + | @include media-object-section; |
| + | |
| + | &.middle { vertical-align: middle; } |
| + | &.bottom { vertical-align: bottom; } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_menu.scss
+213
-0
| @@ | @@ -0,0 +1,213 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group menu |
| + | //// |
| + | |
| + | /// Margin of a menu. |
| + | /// @type Number |
| + | $menu-margin: 0 !default; |
| + | |
| + | /// Left-hand margin of a nested menu. |
| + | /// @type Number |
| + | $menu-margin-nested: 1rem !default; |
| + | |
| + | /// Padding for items in a menu. |
| + | /// @type Number |
| + | $menu-item-padding: 0.7rem 1rem !default; |
| + | |
| + | /// Spacing between an icon and text in a menu item. |
| + | /// @type Number |
| + | $menu-icon-spacing: 0.25rem !default; |
| + | |
| + | /// Maximum number of `expand-n` classes to include in the CSS. |
| + | /// @type Number |
| + | $menu-expand-max: 6 !default; |
| + | |
| + | /// Creates the base styles for a Menu. |
| + | @mixin menu-base { |
| + | margin: $menu-margin; |
| + | list-style-type: none; |
| + | |
| + | // List items are table cell to allow for vertical alignment |
| + | > li { |
| + | @include disable-mouse-outline; |
| + | display: table-cell; |
| + | vertical-align: middle; |
| + | } |
| + | |
| + | // Reset line height to make the height of the overall item easier to calculate |
| + | > li > a { |
| + | display: block; |
| + | padding: $menu-item-padding; |
| + | line-height: 1; |
| + | } |
| + | |
| + | // Reset styles of inner elements |
| + | input, |
| + | a, |
| + | button { |
| + | margin-bottom: 0; |
| + | } |
| + | } |
| + | |
| + | /// Expands the items of a Menu, so each item is the same width. |
| + | /// @param {Keyword|Number} $count [auto] - Number of items in the Menu. You can hardcode a number, or use `auto` to generate CSS that will adapt to the number of items inside the menu. |
| + | @mixin menu-expand($count: auto) { |
| + | display: table; |
| + | width: 100%; |
| + | |
| + | > li { |
| + | @if $count == auto { |
| + | @include auto-width($menu-expand-max); |
| + | } |
| + | @else if type-of($count) == 'number' { |
| + | width: percentage(1 / $count); |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Sets the direction of a Menu. |
| + | /// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`. |
| + | @mixin menu-direction($dir: horizontal) { |
| + | @if $dir == horizontal { |
| + | > li { |
| + | display: table-cell; |
| + | } |
| + | } |
| + | @else if $dir == vertical { |
| + | > li { |
| + | display: block; |
| + | } |
| + | } |
| + | @else { |
| + | @warn 'The direction used for menu-direction() must be horizontal or vertical.'; |
| + | } |
| + | } |
| + | |
| + | /// Creates a simple Menu, which has no padding or hover state. |
| + | @mixin menu-simple { |
| + | a { |
| + | padding: 0; |
| + | margin-#{$global-right}: get-side($menu-item-padding, $global-right); |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for a nested Menu, by adding `margin-left` to the menu. |
| + | /// @param {Keyword|Number} $padding [auto] - Length of the margin. |
| + | @mixin menu-nested($margin: $menu-margin-nested) { |
| + | margin-#{$global-left}: $margin; |
| + | } |
| + | |
| + | /// Adds support for icons to Menu items. |
| + | /// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`. |
| + | /// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element. |
| + | @mixin menu-icons($position: side, $base: true) { |
| + | @if $base { |
| + | > li > a { |
| + | > img, |
| + | > i { |
| + | vertical-align: middle; |
| + | } |
| + | |
| + | > span { |
| + | vertical-align: middle; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @if $position == side { |
| + | > li > a { |
| + | > img, |
| + | > i { |
| + | display: inline-block; |
| + | margin-#{$global-right}: $menu-icon-spacing; |
| + | } |
| + | } |
| + | } |
| + | @else if $position == top { |
| + | > li > a { |
| + | text-align: center; |
| + | |
| + | > img, |
| + | > i { |
| + | display: block; |
| + | margin: 0 auto $menu-icon-spacing; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin menu-text { |
| + | font-weight: bold; |
| + | color: inherit; |
| + | line-height: 1; |
| + | padding-top: 0; |
| + | padding-bottom: 0; |
| + | padding: $menu-item-padding; |
| + | } |
| + | |
| + | @mixin foundation-menu { |
| + | .menu { |
| + | @include menu-base; |
| + | @include menu-icons; |
| + | |
| + | // Orientation |
| + | @include menu-direction(horizontal); |
| + | |
| + | &.vertical { |
| + | @include menu-direction(vertical); |
| + | } |
| + | |
| + | @each $size in $breakpoint-classes { |
| + | @if $size != small { |
| + | @include breakpoint($size) { |
| + | &.#{$size}-horizontal { |
| + | @include menu-direction(horizontal); |
| + | } |
| + | |
| + | &.#{$size}-vertical { |
| + | @include menu-direction(vertical); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Simple |
| + | &.simple { |
| + | @include menu-simple; |
| + | } |
| + | |
| + | // Align right |
| + | &.align-#{$global-right} { |
| + | > li { |
| + | float: $global-right; |
| + | } |
| + | } |
| + | |
| + | // Even-width |
| + | &.expanded { |
| + | @include menu-expand; |
| + | |
| + | > li:first-child:last-child { |
| + | width: 100%; |
| + | } |
| + | } |
| + | |
| + | // Vertical icons |
| + | &.icon-top { |
| + | @include menu-icons(top, $base: false); |
| + | } |
| + | |
| + | // Nesting |
| + | &.nested { |
| + | @include menu-nested; |
| + | } |
| + | } |
| + | |
| + | .menu-text { |
| + | @include menu-text; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_off-canvas.scss
+170
-0
| @@ | @@ -0,0 +1,170 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group off-canvas |
| + | //// |
| + | |
| + | /// Width of an off-canvas menu. |
| + | /// @type Number |
| + | $offcanvas-size: 250px; |
| + | |
| + | /// Background color of an off-canvas menu. |
| + | /// @type Color |
| + | $offcanvas-background: $light-gray; |
| + | |
| + | /// Z-index of an off-canvas menu. |
| + | /// @type Number |
| + | $offcanvas-zindex: -1; |
| + | |
| + | /// Length of the animation on an off-canvas menu. |
| + | /// @type Number |
| + | $offcanvas-transition-length: 0.5s; |
| + | |
| + | /// Timing function of the animation on an off-canvas menu. |
| + | /// @type Keyword |
| + | $offcanvas-transition-timing: ease; |
| + | |
| + | /// Background color for the overlay that appears when an off-canvas menu is open. |
| + | /// @type Color |
| + | $offcanvas-exit-background: rgba($white, 0.25); |
| + | |
| + | /// CSS class used for the main content area. The off-canvas mixins use this to target the page body. |
| + | $maincontent-class: 'off-canvas-content'; |
| + | |
| + | /// Box shadow to place under the main content area. This shadow overlaps the off-canvas menus. |
| + | /// @type Shadow |
| + | $maincontent-shadow: 0 0 10px rgba($black, 0.5); |
| + | |
| + | /// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work. |
| + | @mixin off-canvas-basics { |
| + | // Extra properties needed on <html> and <body> to make off-canvas work |
| + | html, |
| + | body { |
| + | height: 100%; |
| + | } |
| + | |
| + | .off-canvas-wrapper { |
| + | width: 100%; |
| + | overflow-x: hidden; |
| + | position: relative; |
| + | backface-visibility: hidden; |
| + | -webkit-overflow-scrolling: touch; |
| + | } |
| + | |
| + | .off-canvas-wrapper-inner { |
| + | @include clearfix; |
| + | position: relative; |
| + | width: 100%; |
| + | transition: transform $offcanvas-transition-length $offcanvas-transition-timing; |
| + | } |
| + | |
| + | // Container for page content |
| + | .off-canvas-content { |
| + | min-height: 100%; |
| + | background: $body-background; |
| + | transition: transform $offcanvas-transition-length $offcanvas-transition-timing; |
| + | backface-visibility: hidden; |
| + | z-index: 1; |
| + | |
| + | @if hasvalue($maincontent-shadow) { |
| + | box-shadow: $maincontent-shadow; |
| + | } |
| + | } |
| + | |
| + | // Click-to-exit overlay (generated by JavaScript) |
| + | .js-off-canvas-exit { |
| + | display: none; |
| + | position: absolute; |
| + | top: 0; |
| + | left: 0; |
| + | width: 100%; |
| + | height: 100%; |
| + | background: $offcanvas-exit-background; |
| + | cursor: pointer; |
| + | transition: background $offcanvas-transition-length $offcanvas-transition-timing; |
| + | |
| + | .is-off-canvas-open & { |
| + | display: block; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds basic styles for an off-canvas menu. |
| + | @mixin off-canvas-base { |
| + | @include disable-mouse-outline; |
| + | position: absolute; |
| + | background: $offcanvas-background; |
| + | z-index: $offcanvas-zindex; |
| + | max-height: 100%; |
| + | overflow-y: auto; |
| + | transform: translateX(0px); |
| + | } |
| + | |
| + | @mixin off-canvas-position( |
| + | $position: left, |
| + | $size: $offcanvas-size, |
| + | $fixed: false |
| + | ) { |
| + | @if $position == left { |
| + | left: -$size; |
| + | top: 0; |
| + | width: $size; |
| + | } |
| + | @else if $position == right { |
| + | right: -$size; |
| + | top: 0; |
| + | width: $size; |
| + | } |
| + | |
| + | // Generates an open state class that matches the width of the menu |
| + | @at-root { |
| + | .is-open-#{$position} { |
| + | @if $position == left { |
| + | transform: translateX($size); |
| + | } |
| + | @else if $position == right { |
| + | transform: translateX(-$size); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds styles that reveal an off-canvas menu. |
| + | /// @param {Keyword} $position [left] - Position of the off-canvas menu being revealed. |
| + | @mixin off-canvas-reveal( |
| + | $position: left |
| + | ) { |
| + | #{$position}: 0; |
| + | |
| + | & ~ .#{$maincontent-class} { |
| + | margin-#{$position}: $offcanvas-size; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-off-canvas { |
| + | @include off-canvas-basics; |
| + | |
| + | // Off-canvas container |
| + | .off-canvas { |
| + | @include off-canvas-base; |
| + | |
| + | &.position-left { @include off-canvas-position(left); } |
| + | &.position-right { @include off-canvas-position(right); } |
| + | } |
| + | |
| + | // Reveal off-canvas menu on larger screens |
| + | @each $name, $value in $breakpoint-classes { |
| + | @if $name != small { |
| + | @include breakpoint($name) { |
| + | .position-left.reveal-for-#{$name} { |
| + | @include off-canvas-reveal(left); |
| + | } |
| + | .position-right.reveal-for-#{$name} { |
| + | @include off-canvas-reveal(right); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_orbit.scss
+186
-0
| @@ | @@ -0,0 +1,186 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group orbit |
| + | //// |
| + | |
| + | /// Default color for Orbit's bullets. |
| + | /// @type Color |
| + | $orbit-bullet-background: $medium-gray !default; |
| + | |
| + | /// Default active color for Orbit's bullets. |
| + | /// @type Color |
| + | $orbit-bullet-background-active: $dark-gray !default; |
| + | |
| + | /// Default diameter for Orbit's bullets. |
| + | /// @type Number |
| + | $orbit-bullet-diameter: 1.2rem !default; |
| + | |
| + | /// Default margin between Orbit's bullets. |
| + | /// @type Number |
| + | $orbit-bullet-margin: 0.1rem !default; |
| + | |
| + | /// Default distance from slide region for Orbit's bullets. |
| + | /// @type Number |
| + | $orbit-bullet-margin-top: 0.8rem !default; |
| + | |
| + | /// Default bottom margin from Orbit's bullets to whatever content may lurk below it. |
| + | /// @type Number |
| + | $orbit-bullet-margin-bottom: 0.8rem !default; |
| + | |
| + | /// Default background color for Orbit's caption. |
| + | /// @type Color |
| + | $orbit-caption-background: rgba($black, 0.5) !default; |
| + | |
| + | /// Default padding for Orbit's caption. |
| + | /// @type Number |
| + | $orbit-caption-padding: 1rem !default; |
| + | |
| + | /// Default background color for Orbit's controls when hovered. |
| + | /// @type Color |
| + | $orbit-control-background-hover: rgba($black, 0.5) !default; |
| + | |
| + | /// Default padding for Orbit's controls. |
| + | /// @type Number |
| + | $orbit-control-padding: 1rem !default; |
| + | |
| + | /// Default z-index for Orbit's controls. |
| + | /// @type Number |
| + | $orbit-control-zindex: 10 !default; |
| + | |
| + | /// Adds styles for the outer Orbit wrapper. These styles are used on the `.orbit` class. |
| + | @mixin orbit-wrapper { |
| + | position: relative; |
| + | } |
| + | |
| + | /// Adds styles for the inner Orbit slide container. These styles are used on the `.orbit-container` class. |
| + | @mixin orbit-container { |
| + | position: relative; |
| + | margin: 0; |
| + | overflow: hidden; |
| + | list-style: none; |
| + | } |
| + | |
| + | /// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class. |
| + | @mixin orbit-slide { |
| + | width: 100%; |
| + | max-height: 100%; |
| + | } |
| + | |
| + | @mixin orbit-figure { |
| + | margin: 0; |
| + | } |
| + | |
| + | @mixin orbit-image { |
| + | margin: 0; |
| + | width: 100%; |
| + | max-width: 100%; |
| + | } |
| + | |
| + | /// Adds styles for an orbit slide caption. These styles are used on the `.orbit-caption` class. |
| + | @mixin orbit-caption { |
| + | position: absolute; |
| + | bottom: 0; |
| + | width: 100%; |
| + | padding: $orbit-caption-padding; |
| + | margin-bottom: 0; |
| + | color: foreground($orbit-caption-background); |
| + | background-color: $orbit-caption-background; |
| + | } |
| + | |
| + | /// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS. |
| + | @mixin orbit-control { |
| + | @include disable-mouse-outline; |
| + | @include v-align-middle; |
| + | z-index: $orbit-control-zindex; |
| + | padding: $orbit-control-padding; |
| + | color: $white; |
| + | |
| + | &:hover, |
| + | &:active, |
| + | &:focus { |
| + | background-color: $orbit-control-background-hover; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-previous` class. |
| + | @mixin orbit-previous { |
| + | #{$global-left}: 0; |
| + | } |
| + | |
| + | /// Adds styles for the Orbit next button. These styles are used on the `.orbit-next` class. |
| + | @mixin orbit-next { |
| + | #{$global-left}: auto; |
| + | #{$global-right}: 0; |
| + | } |
| + | |
| + | /// Adds styles for a container of Orbit bullets. /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-bullets` class. |
| + | @mixin orbit-bullets { |
| + | @include disable-mouse-outline; |
| + | position: relative; |
| + | margin-top: $orbit-bullet-margin-top; |
| + | margin-bottom: $orbit-bullet-margin-bottom; |
| + | text-align: center; |
| + | |
| + | button { |
| + | width: $orbit-bullet-diameter; |
| + | height: $orbit-bullet-diameter; |
| + | margin: $orbit-bullet-margin; |
| + | background-color: $orbit-bullet-background; |
| + | border-radius: 50%; |
| + | |
| + | &:hover { |
| + | background-color: $orbit-bullet-background-active; |
| + | } |
| + | |
| + | &.is-active { |
| + | background-color: $orbit-bullet-background-active; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-orbit { |
| + | .orbit { |
| + | @include orbit-wrapper; |
| + | } |
| + | |
| + | .orbit-container { |
| + | @include orbit-container; |
| + | } |
| + | |
| + | .orbit-slide { |
| + | @include orbit-slide; |
| + | } |
| + | |
| + | .orbit-figure { |
| + | @include orbit-figure; |
| + | } |
| + | |
| + | .orbit-image { |
| + | @include orbit-image; |
| + | } |
| + | |
| + | .orbit-caption { |
| + | @include orbit-caption; |
| + | } |
| + | |
| + | %orbit-control { |
| + | @include orbit-control; |
| + | } |
| + | |
| + | .orbit-previous { |
| + | @extend %orbit-control; |
| + | @include orbit-previous; |
| + | } |
| + | |
| + | .orbit-next { |
| + | @extend %orbit-control; |
| + | @include orbit-next; |
| + | } |
| + | |
| + | .orbit-bullets { |
| + | @include orbit-bullets; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_pagination.scss
+161
-0
| @@ | @@ -0,0 +1,161 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group pagination |
| + | //// |
| + | |
| + | /// Font size of pagination items. |
| + | /// @type Number |
| + | $pagination-font-size: rem-calc(14) !default; |
| + | |
| + | /// Default bottom margin of the media object. |
| + | /// @type Number |
| + | $pagination-margin-bottom: $global-margin !default; |
| + | |
| + | /// Text color of pagination items. |
| + | /// @type Color |
| + | $pagination-item-color: $black !default; |
| + | |
| + | /// Padding inside of pagination items. |
| + | /// @type Number |
| + | $pagination-item-padding: rem-calc(3 10) !default; |
| + | |
| + | /// Right margin to separate pagination items. |
| + | /// @type Number |
| + | $pagination-item-spacing: rem-calc(1) !default; |
| + | |
| + | /// Default radius for pagination items. |
| + | /// @type Number |
| + | $pagination-radius: $global-radius !default; |
| + | |
| + | /// Background color of pagination items on hover. |
| + | /// @type Color |
| + | $pagination-item-background-hover: $light-gray !default; |
| + | |
| + | /// Background color of pagination item for the current page. |
| + | /// @type Color |
| + | $pagination-item-background-current: $primary-color !default; |
| + | |
| + | /// Text color of the pagination item for the current page. |
| + | /// @type Color |
| + | $pagination-item-color-current: foreground($pagination-item-background-current) !default; |
| + | |
| + | /// Text color of a disabled pagination item. |
| + | /// @type Color |
| + | $pagination-item-color-disabled: $medium-gray !default; |
| + | |
| + | /// Color of the ellipsis in a pagination menu. |
| + | /// @type Color |
| + | $pagination-ellipsis-color: $black !default; |
| + | |
| + | /// If `false`, don't display page number links on mobile, only next/previous links. |
| + | /// @type Boolean |
| + | $pagination-mobile-items: false !default; |
| + | |
| + | /// If `true`, arrows are added to the next and previous links of pagination. |
| + | /// @type Boolean |
| + | $pagination-arrows: true !default; |
| + | |
| + | /// Adds styles for a pagination container. Apply this to a `<ul>`. |
| + | @mixin pagination-container { |
| + | @include clearfix; |
| + | margin-#{$global-left}: 0; |
| + | margin-bottom: $pagination-margin-bottom; |
| + | |
| + | // List item |
| + | li { |
| + | font-size: $pagination-font-size; |
| + | margin-#{$global-right}: $pagination-item-spacing; |
| + | display: none; |
| + | border-radius: $pagination-radius; |
| + | |
| + | @if not $pagination-mobile-items { |
| + | &:last-child, |
| + | &:first-child { |
| + | display: inline-block; |
| + | } |
| + | |
| + | @include breakpoint(medium) { |
| + | display: inline-block; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Page links |
| + | a, |
| + | button { |
| + | color: $pagination-item-color; |
| + | display: block; |
| + | padding: $pagination-item-padding; |
| + | border-radius: $global-radius; |
| + | |
| + | &:hover { |
| + | background: $pagination-item-background-hover; |
| + | } |
| + | } |
| + | |
| + | // Symbols |
| + | @if $pagination-arrows { |
| + | [aria-label="previous"] { |
| + | &::before { |
| + | content: '«'; |
| + | display: inline-block; |
| + | margin-#{$global-right}: 0.75rem; |
| + | } |
| + | } |
| + | |
| + | [aria-label="next"] { |
| + | &::after { |
| + | content: '»'; |
| + | display: inline-block; |
| + | margin-#{$global-left}: 0.75rem; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for the current pagination item. Apply this to an `<a>`. |
| + | @mixin pagination-item-current { |
| + | padding: $pagination-item-padding; |
| + | background: $pagination-item-background-current; |
| + | color: $pagination-item-color-current; |
| + | cursor: default; |
| + | } |
| + | |
| + | /// Adds styles for a disabled pagination item. Apply this to an `<a>`. |
| + | @mixin pagination-item-disabled { |
| + | padding: $pagination-item-padding; |
| + | color: $pagination-item-color-disabled; |
| + | cursor: default; |
| + | |
| + | &:hover { |
| + | background: transparent; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for an ellipsis for use in a pagination list. |
| + | @mixin pagination-ellipsis { |
| + | content: '…'; |
| + | padding: $pagination-item-padding; |
| + | color: $pagination-ellipsis-color; |
| + | } |
| + | |
| + | @mixin foundation-pagination { |
| + | .pagination { |
| + | @include pagination-container; |
| + | |
| + | .current { |
| + | @include pagination-item-current; |
| + | } |
| + | |
| + | .disabled { |
| + | @include pagination-item-disabled; |
| + | } |
| + | |
| + | .ellipsis::after { |
| + | @include pagination-ellipsis; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_progress-bar.scss
+83
-0
| @@ | @@ -0,0 +1,83 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group progress-bar |
| + | //// |
| + | |
| + | /// Height of a progress bar. |
| + | /// @type Number |
| + | $progress-height: 1rem !default; |
| + | |
| + | /// Background color of a progress bar. |
| + | /// @type Color |
| + | $progress-background: $medium-gray !default; |
| + | |
| + | /// Bottom margin of a progress bar. |
| + | /// @type Number |
| + | $progress-margin-bottom: $global-margin !default; |
| + | |
| + | /// Default color of a progress bar's meter. |
| + | /// @type Color |
| + | $progress-meter-background: $primary-color !default; |
| + | |
| + | /// Default radius of a progress bar. |
| + | /// @type Number |
| + | $progress-radius: $global-radius !default; |
| + | |
| + | /// Adds styles for a progress bar container. |
| + | @mixin progress-container { |
| + | background-color: $progress-background; |
| + | height: $progress-height; |
| + | margin-bottom: $progress-margin-bottom; |
| + | border-radius: $progress-radius; |
| + | } |
| + | |
| + | /// Adds styles for the inner meter of a progress bar. |
| + | @mixin progress-meter { |
| + | position: relative; |
| + | display: block; |
| + | width: 0%; |
| + | height: 100%; |
| + | background-color: $progress-meter-background; |
| + | border-radius: $global-radius; |
| + | } |
| + | |
| + | /// Adds styles for text in the progress meter. |
| + | @mixin progress-meter-text { |
| + | position: absolute; |
| + | top: 50%; |
| + | #{$global-left}: 50%; |
| + | transform: translate(-50%, -50%); |
| + | margin: 0; |
| + | font-size: 0.75rem; |
| + | font-weight: bold; |
| + | color: $white; |
| + | white-space: nowrap; |
| + | } |
| + | |
| + | @mixin foundation-progress-bar { |
| + | // Progress bar |
| + | .progress { |
| + | @include progress-container; |
| + | |
| + | @each $name, $color in $foundation-colors { |
| + | &.#{$name} { |
| + | .progress-meter { |
| + | background-color: $color; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Progress bar meter |
| + | .progress-meter { |
| + | @include progress-meter; |
| + | |
| + | // Progress bar meter text |
| + | .progress-meter-text { |
| + | @include progress-meter-text; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_reveal.scss
+155
-0
| @@ | @@ -0,0 +1,155 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group reveal |
| + | //// |
| + | |
| + | /// Default background color of a modal. |
| + | /// @type Color |
| + | $reveal-background: $white !default; |
| + | |
| + | /// Default width of a modal, with no class applied. |
| + | /// @type Number |
| + | $reveal-width: 600px !default; |
| + | |
| + | /// Default maximum width of a modal. |
| + | /// @type Number |
| + | $reveal-max-width: $global-width !default; |
| + | |
| + | /// Offset from the top of the window when a modal is added. |
| + | /// @type Number |
| + | $reveal-offset: rem-calc(100) !default; |
| + | |
| + | /// Default padding inside a modal. |
| + | /// @type Number |
| + | $reveal-padding: $global-padding !default; |
| + | |
| + | /// Default border around a modal. |
| + | /// @type Number |
| + | $reveal-border: 1px solid $medium-gray !default; |
| + | |
| + | /// Default radius for modal. |
| + | /// @type Number |
| + | $reveal-radius: $global-radius !default; |
| + | |
| + | /// z-index for modals. The overlay uses this value, while the modal itself uses this value plus one. |
| + | /// @type Number |
| + | $reveal-zindex: 1005; |
| + | |
| + | /// Background color of modal overlays. |
| + | /// @type Color |
| + | $reveal-overlay-background: rgba($black, 0.45) !default; |
| + | |
| + | /// Adds styles for a modal overlay. |
| + | /// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay. |
| + | @mixin reveal-overlay { |
| + | display: none; |
| + | position: fixed; |
| + | top: 0; |
| + | bottom: 0; |
| + | left: 0; |
| + | right: 0; |
| + | z-index: $reveal-zindex; |
| + | background-color: $reveal-overlay-background; |
| + | overflow-y: scroll; |
| + | } |
| + | |
| + | /// Adds base styles for a modal. |
| + | @mixin reveal-modal-base { |
| + | @include disable-mouse-outline; |
| + | display: none; |
| + | z-index: $reveal-zindex + 1; |
| + | padding: $reveal-padding; |
| + | border: $reveal-border; |
| + | // margin: 100px auto 0 100px; |
| + | margin: 100px auto 0 auto; |
| + | background-color: $reveal-background; |
| + | border-radius: $reveal-radius; |
| + | |
| + | @include breakpoint(medium) { |
| + | min-height: 0; |
| + | } |
| + | |
| + | // Make sure rows don't have a min-width on them |
| + | .column, |
| + | .columns { |
| + | min-width: 0; |
| + | } |
| + | |
| + | // Strip margins from the last item in the modal |
| + | > :last-child { |
| + | margin-bottom: 0; |
| + | } |
| + | } |
| + | |
| + | /// Adjusts the width of a modal. |
| + | /// @param {Number} $width - Width of the modal. Generally a percentage. |
| + | /// @param {Number} $max-width [$reveal-max-width] - Maximum width of the modal. |
| + | @mixin reveal-modal-width( |
| + | $width: $reveal-width, |
| + | $max-width: $reveal-max-width |
| + | ) { |
| + | @include breakpoint(medium) { |
| + | @extend %reveal-centered; |
| + | width: $width; |
| + | max-width: $reveal-max-width; |
| + | } |
| + | } |
| + | |
| + | /// Creates a full-screen modal, which stretches the full width and height of the window. |
| + | @mixin reveal-modal-fullscreen { |
| + | // scss-lint:disable DuplicateProperty |
| + | top: 0; |
| + | left: 0; |
| + | width: 100%; |
| + | height: 100%; |
| + | height: 100vh; |
| + | min-height: 100vh; |
| + | max-width: none; |
| + | margin-left: 0; |
| + | } |
| + | |
| + | @mixin foundation-reveal { |
| + | // Overlay |
| + | .reveal-overlay { |
| + | @include reveal-overlay; |
| + | } |
| + | |
| + | // Modal container |
| + | .reveal { |
| + | @include reveal-modal-base; |
| + | @include reveal-modal-width($reveal-width); |
| + | position: absolute; |
| + | overflow-y: auto; |
| + | // Remove padding |
| + | &.collapse { |
| + | padding: 0; |
| + | } |
| + | |
| + | // Placeholder selector for medium-and-up modals |
| + | // Prevents duplicate CSS when defining multiple Reveal sizes |
| + | @include breakpoint(medium) { |
| + | %reveal-centered { |
| + | left: auto; |
| + | right: auto; |
| + | margin: 0 auto; |
| + | } |
| + | } |
| + | |
| + | // Sizing classes |
| + | &.tiny { @include reveal-modal-width(30%); } |
| + | &.small { @include reveal-modal-width(50%); } |
| + | &.large { @include reveal-modal-width(90%); } |
| + | |
| + | // Full-screen mode |
| + | &.full { |
| + | @include reveal-modal-fullscreen; |
| + | } |
| + | } |
| + | } |
| + | |
| + | body.is-reveal-open { |
| + | overflow: hidden; |
| + | } |
public/stylesheets/foundation6/components/_slider.scss
+158
-0
| @@ | @@ -0,0 +1,158 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | // [TODO] Check how plugin confirms disabled or vertical status |
| + | // [TODO] Check if transition: all; is necessary |
| + | |
| + | //// |
| + | /// @group slider |
| + | //// |
| + | |
| + | /// Default height of the slider. |
| + | /// @type Number |
| + | $slider-height: 0.5rem !default; |
| + | |
| + | /// Default slider width of a vertical slider. |
| + | /// @type Number |
| + | $slider-width-vertical: $slider-height !default; |
| + | |
| + | /// Default background color of the slider's track. |
| + | /// @type Color |
| + | $slider-background: $light-gray !default; |
| + | |
| + | /// Default color of the active fill color of the slider. |
| + | /// @type Color |
| + | $slider-fill-background: $medium-gray !default; |
| + | |
| + | /// Default height of the handle of the slider. |
| + | /// @type Number |
| + | $slider-handle-height: 1.4rem !default; |
| + | |
| + | /// Default width of the handle of the slider. |
| + | /// @type Number |
| + | $slider-handle-width: 1.4rem !default; |
| + | |
| + | /// Default color of the handle for the slider. |
| + | /// @type Color |
| + | $slider-handle-background: $primary-color !default; |
| + | |
| + | /// Default fade amount of a disabled slider. |
| + | /// @type Number |
| + | $slider-opacity-disabled: 0.25 !default; |
| + | |
| + | /// Default radius for slider. |
| + | /// @type Number |
| + | $slider-radius: $global-radius !default; |
| + | |
| + | /// Transition properties to apply to the slider handle and fill. |
| + | /// @type Transition |
| + | $slider-transition: all 0.2s ease-in-out !default; |
| + | |
| + | /// Adds the general styles for sliders. |
| + | @mixin slider-container { |
| + | position: relative; |
| + | height: $slider-height; |
| + | margin-top: 1.25rem; |
| + | margin-bottom: 2.25rem; |
| + | background-color: $slider-background; |
| + | cursor: pointer; |
| + | user-select: none; |
| + | touch-action: none; |
| + | } |
| + | |
| + | /// Adds the general styles for active fill for sliders. |
| + | @mixin slider-fill { |
| + | position: absolute; |
| + | top: 0; |
| + | left: 0; |
| + | display: inline-block; |
| + | max-width: 100%; |
| + | height: $slider-height; |
| + | background-color: $slider-fill-background; |
| + | transition: $slider-transition; |
| + | |
| + | &.is-dragging { |
| + | transition: all 0s linear; |
| + | } |
| + | } |
| + | |
| + | /// Adds the general styles for the slider handles. |
| + | @mixin slider-handle { |
| + | @include disable-mouse-outline; |
| + | @include v-align-middle; |
| + | position: absolute; |
| + | left: 0; |
| + | z-index: 1; |
| + | display: inline-block; |
| + | width: $slider-handle-width; |
| + | height: $slider-handle-height; |
| + | background-color: $slider-handle-background; |
| + | transition: $slider-transition; |
| + | touch-action: manipulation; |
| + | border-radius: $slider-radius; |
| + | |
| + | &:hover { |
| + | background-color: scale-color($slider-handle-background, $lightness: -15%); |
| + | } |
| + | |
| + | &.is-dragging { |
| + | transition: all 0s linear; |
| + | } |
| + | } |
| + | |
| + | @mixin slider-disabled { |
| + | opacity: $slider-opacity-disabled; |
| + | cursor: not-allowed; |
| + | } |
| + | |
| + | @mixin slider-vertical { |
| + | display: inline-block; |
| + | width: $slider-width-vertical; |
| + | height: 12.5rem; |
| + | margin: 0 1.25rem; |
| + | transform: scale(1, -1); |
| + | |
| + | .slider-fill { |
| + | top: 0; |
| + | width: $slider-width-vertical; |
| + | max-height: 100%; |
| + | } |
| + | |
| + | .slider-handle { |
| + | position: absolute; |
| + | top: 0; |
| + | left: 50%; |
| + | width: $slider-handle-height; |
| + | height: $slider-handle-width; |
| + | transform: translateX(-50%); |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-slider { |
| + | // Container |
| + | .slider { |
| + | @include slider-container; |
| + | } |
| + | |
| + | // Fill area |
| + | .slider-fill { |
| + | @include slider-fill; |
| + | } |
| + | |
| + | // Draggable handle |
| + | .slider-handle { |
| + | @include slider-handle; |
| + | } |
| + | |
| + | // Disabled state |
| + | .slider.disabled, |
| + | .slider[disabled] { |
| + | @include slider-disabled; |
| + | } |
| + | |
| + | // Vertical slider |
| + | .slider.vertical { |
| + | @include slider-vertical; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_sticky.scss
+38
-0
| @@ | @@ -0,0 +1,38 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | @mixin foundation-sticky { |
| + | .sticky-container { |
| + | position: relative; |
| + | } |
| + | |
| + | .sticky { |
| + | position: absolute; |
| + | z-index: 0; |
| + | transform: translate3d(0,0,0); |
| + | } |
| + | |
| + | .sticky.is-stuck { |
| + | position: fixed; |
| + | z-index: 5; |
| + | |
| + | &.is-at-top { |
| + | top: 0; |
| + | } |
| + | |
| + | &.is-at-bottom { |
| + | bottom: 0; |
| + | } |
| + | } |
| + | |
| + | .sticky.is-anchored { |
| + | position: absolute; |
| + | left: auto; |
| + | right: auto; |
| + | |
| + | &.is-at-bottom { |
| + | bottom: 0; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_switch.scss
+231
-0
| @@ | @@ -0,0 +1,231 @@ |
| + | // 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; |
| + | |
| + | /// border around a modal. |
| + | /// @type Number |
| + | $switch-margin: $global-margin !default; |
| + | |
| + | /// Background color for the switch container and paddle. |
| + | /// @type Color |
| + | $switch-paddle-background: $white !default; |
| + | |
| + | /// Spacing between a switch paddle and the edge of the body. |
| + | /// @type Number |
| + | $switch-paddle-offset: 0.25rem !default; |
| + | |
| + | /// border radius of the switch paddle |
| + | /// @type Number |
| + | $switch-paddle-radius: $global-radius !default; |
| + | |
| + | /// switch transition. |
| + | /// @type Number |
| + | $switch-paddle-transition: all 0.25s ease-out !default; |
| + | |
| + | // make them variables |
| + | // ask about accessibility on label |
| + | // change class name for text |
| + | |
| + | /// Adds styles for a switch container. Apply this to a container class. |
| + | @mixin switch-container { |
| + | margin-bottom: $switch-margin; |
| + | outline: 0; |
| + | position: relative; |
| + | user-select: none; |
| + | |
| + | // These properties cascade down to the switch text |
| + | color: $white; |
| + | font-weight: bold; |
| + | font-size: rem-calc(14); |
| + | } |
| + | |
| + | /// Adds styles for a switch input. Apply this to an `<input>` within a switch. |
| + | @mixin switch-input { |
| + | opacity: 0; |
| + | position: absolute; |
| + | } |
| + | |
| + | /// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch. |
| + | @mixin switch-paddle { |
| + | background: $switch-background; |
| + | cursor: pointer; |
| + | display: block; |
| + | position: relative; |
| + | width: 4rem; |
| + | height: $switch-height; |
| + | transition: $switch-paddle-transition; |
| + | border-radius: $switch-radius; |
| + | |
| + | // Resetting these <label> presets so type styles cascade down |
| + | color: inherit; |
| + | font-weight: inherit; |
| + | |
| + | // Needed to override specificity |
| + | input + & { |
| + | margin: 0; |
| + | } |
| + | |
| + | // The paddle itself |
| + | &::after { |
| + | background: $switch-paddle-background; |
| + | content: ''; |
| + | display: block; |
| + | position: absolute; |
| + | height: 1.5rem; |
| + | #{$global-left}: 0.25rem; |
| + | top: 0.25rem; |
| + | width: 1.5rem; |
| + | transition: $switch-paddle-transition; |
| + | transform: translate3d(0, 0, 0); |
| + | } |
| + | |
| + | // Change the visual style when the switch is active |
| + | input:checked ~ & { |
| + | background: $switch-background-active; |
| + | |
| + | &::after { |
| + | #{$global-left}: 2.25rem; |
| + | } |
| + | } |
| + | |
| + | input:focus ~ & { |
| + | @include disable-mouse-outline; |
| + | } |
| + | } |
| + | |
| + | /// Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch `<label>`. |
| + | @mixin switch-text { |
| + | position: absolute; |
| + | top: 50%; |
| + | transform: translateY(-50%); |
| + | } |
| + | |
| + | /// Adds styles for the active state text within a switch. |
| + | @mixin switch-text-active { |
| + | #{$global-left}: 8%; |
| + | display: none; |
| + | |
| + | input:checked + label > & { |
| + | display: block; |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for the inactive state text within a switch. |
| + | @mixin switch-text-inactive { |
| + | #{$global-right}: 15%; |
| + | |
| + | input:checked + label > & { |
| + | display: none; |
| + | } |
| + | } |
| + | |
| + | /// Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container. |
| + | /// @param {Number} $font-size [1rem] - Font size of label text within the switch. |
| + | /// @param {Number} $width [4rem] - Width of the switch body. |
| + | /// @param {Number} $height [2rem] - Height of the switch body. |
| + | /// @param {Number} $paddle-width [1.5rem] - Width of the switch paddle. |
| + | /// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body. |
| + | @mixin switch-size( |
| + | $font-size: 1rem, |
| + | $width: 4rem, |
| + | $height: 2rem, |
| + | $paddle-width: 1.5rem, |
| + | $paddle-offset: 0.25rem |
| + | ) { |
| + | $paddle-height: $height - ($paddle-offset * 2); |
| + | $paddle-left-active: $width - $paddle-width - $paddle-offset; |
| + | |
| + | .switch-paddle { |
| + | width: $width; |
| + | height: $height; |
| + | font-size: $font-size; |
| + | } |
| + | |
| + | .switch-paddle::after { |
| + | width: $paddle-width; |
| + | height: $paddle-height; |
| + | } |
| + | |
| + | input:checked ~ .switch-paddle:after { |
| + | #{$global-left}: $paddle-left-active; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-switch { |
| + | // Container class |
| + | .switch { |
| + | @include switch-container; |
| + | } |
| + | |
| + | // <input> element |
| + | .switch-input { |
| + | @include switch-input; |
| + | } |
| + | |
| + | // <label> element |
| + | .switch-paddle { |
| + | @include switch-paddle; |
| + | } |
| + | |
| + | // Base label text styles |
| + | %switch-text { |
| + | @include switch-text; |
| + | } |
| + | |
| + | // Active label text styles |
| + | .switch-active { |
| + | @extend %switch-text; |
| + | @include switch-text-active; |
| + | } |
| + | |
| + | // Inactive label text styles |
| + | .switch-inactive { |
| + | @extend %switch-text; |
| + | @include switch-text-inactive; |
| + | } |
| + | |
| + | // Switch sizes |
| + | .switch.tiny { |
| + | @include switch-size(rem-calc(10), 3rem, $switch-height-tiny, 1rem, $switch-paddle-offset); |
| + | } |
| + | |
| + | .switch.small { |
| + | @include switch-size(rem-calc(12), 3.5rem, $switch-height-small, 1.25rem, $switch-paddle-offset); |
| + | } |
| + | |
| + | .switch.large { |
| + | @include switch-size(rem-calc(16), 5rem, $switch-height-large, 2rem, $switch-paddle-offset); |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_table.scss
+212
-0
| @@ | @@ -0,0 +1,212 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | // scss-lint:disable MergeableSelector, QualifyingElement |
| + | |
| + | //// |
| + | /// @group table |
| + | //// |
| + | |
| + | /// Defualt color for table background. |
| + | /// @type Color |
| + | $table-background: $white !default; |
| + | |
| + | /// Defualt scale for darkening the striped table rows and the table border. |
| + | /// @type Number |
| + | $table-color-scale: 5% !default; |
| + | |
| + | /// Defualt style for table border. |
| + | /// @type List |
| + | $table-border: 1px solid smart-scale($table-background, $table-color-scale) !default; |
| + | |
| + | /// Defualt padding for table. |
| + | /// @type Number |
| + | $table-padding: rem-calc(8 10 10) !default; |
| + | |
| + | /// Defualt scale for darkening the table rows on hover. |
| + | /// @type Number |
| + | $table-hover-scale: 2% !default; |
| + | |
| + | /// Defualt color of standard rows on hover. |
| + | /// @type List |
| + | $table-row-hover: darken($table-background, $table-hover-scale) !default; |
| + | |
| + | /// Defualt color of striped rows on hover. |
| + | /// @type List |
| + | $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default; |
| + | |
| + | /// Defualt background color for striped rows. |
| + | /// @type Color |
| + | $table-striped-background: smart-scale($table-background, $table-color-scale) !default; |
| + | |
| + | /// Defualt value for showing the stripe on rows of the tables, excluding the header and footer If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or anyother value, the table rows will have no striping. |
| + | /// @type Keyoword |
| + | $table-stripe: even !default; |
| + | |
| + | /// Defualt color for header background. |
| + | /// @type Color |
| + | $table-head-background: smart-scale($table-background, $table-color-scale / 2) !default; |
| + | |
| + | /// Defualt color for footer background. |
| + | /// @type Color |
| + | $table-foot-background: smart-scale($table-background, $table-color-scale) !default; |
| + | |
| + | /// Defualt font color for header. |
| + | /// @type Color |
| + | $table-head-font-color: $body-font-color !default; |
| + | |
| + | /// Defualt value for showing the header when using stacked tables. |
| + | /// @type Boolean |
| + | $show-header-for-stacked: false; |
| + | |
| + | /// Adds the general styles for tables. |
| + | /// @param {Keyword} $stripe [$table-stripe] - Uses kewords even, odd, or none to darken rows of the table. The defualt value is even. |
| + | @mixin table($stripe: $table-stripe) { |
| + | margin-bottom: $global-margin; |
| + | border-radius: $global-radius; |
| + | |
| + | @at-root { |
| + | thead, |
| + | tbody, |
| + | tfoot { |
| + | border: $table-border; |
| + | background-color: $table-background; |
| + | } |
| + | |
| + | // Caption |
| + | caption { |
| + | font-weight: $global-weight-bold; |
| + | padding: $table-padding; |
| + | } |
| + | |
| + | // Table head and foot |
| + | thead, |
| + | tfoot { |
| + | background: $table-head-background; |
| + | color: $table-head-font-color; |
| + | |
| + | // Rows within head and foot |
| + | tr { |
| + | background: transparent; |
| + | } |
| + | |
| + | // Cells within head and foot |
| + | th, |
| + | td { |
| + | padding: $table-padding; |
| + | font-weight: $global-weight-bold; |
| + | text-align: #{$global-left}; |
| + | } |
| + | } |
| + | |
| + | // Table rows |
| + | tbody { |
| + | tr { |
| + | // If stripe is set to even, darken the even rows. |
| + | @if $stripe == even { |
| + | &:nth-child(even) { |
| + | background-color: $table-striped-background; |
| + | } |
| + | } |
| + | |
| + | // If stripe is set to odd, darken the odd rows. |
| + | @else if $stripe == odd { |
| + | &:nth-child(odd) { |
| + | background-color: $table-striped-background; |
| + | } |
| + | } |
| + | } |
| + | |
| + | th, |
| + | td { |
| + | padding: $table-padding; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds the ability to horizontally scroll the table when the content overflows horizontally. |
| + | @mixin table-scroll { |
| + | display: block; |
| + | width: 100%; |
| + | overflow-y: scroll; |
| + | } |
| + | |
| + | /// Slightly darkens the table rows on hover. |
| + | @mixin table-hover { |
| + | tr { |
| + | //Darkens the non-striped table rows on hover. |
| + | &:hover { |
| + | background-color: $table-row-hover; |
| + | } |
| + | |
| + | //Darkens the even striped table rows. |
| + | @if($table-stripe == even) { |
| + | &:nth-of-type(even):hover { |
| + | background-color: $table-row-stripe-hover; |
| + | } |
| + | } |
| + | |
| + | //Darkens the odd striped table rows. |
| + | @elseif($table-stripe == odd) { |
| + | &:nth-of-type(odd):hover { |
| + | background-color: $table-row-stripe-hover; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for a stacked table. Useful for small-screen layouts. |
| + | /// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked. |
| + | @mixin table-stack($header: $show-header-for-stacked) { |
| + | @if $header { |
| + | thead { |
| + | th:first-child { |
| + | display: block; |
| + | } |
| + | |
| + | th { |
| + | display: none; |
| + | } |
| + | } |
| + | } @else { |
| + | thead { |
| + | display: none; |
| + | } |
| + | } |
| + | |
| + | tfoot { |
| + | display: none; |
| + | } |
| + | |
| + | tr, |
| + | th, |
| + | td { |
| + | display: block; |
| + | } |
| + | |
| + | td { |
| + | border-top: 0; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-table { |
| + | table { |
| + | @include table; |
| + | } |
| + | |
| + | table.stack { |
| + | @include breakpoint(medium down) { |
| + | @include table-stack; |
| + | } |
| + | } |
| + | |
| + | table.scroll { |
| + | @include table-scroll; |
| + | } |
| + | |
| + | table.hover { |
| + | @include table-hover; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_tabs.scss
+137
-0
| @@ | @@ -0,0 +1,137 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group tabs |
| + | //// |
| + | |
| + | /// Default margin of the tab bar. |
| + | /// @type Number |
| + | $tab-margin: 0 !default; |
| + | |
| + | /// Default background color of a tab bar. |
| + | /// @type Color |
| + | $tab-background: $white !default; |
| + | |
| + | /// active background color of a tab bar. |
| + | /// @type Color |
| + | $tab-background-active: $light-gray !default; |
| + | |
| + | /// Default border color of tab content. |
| + | /// @type Color |
| + | $tab-border: $light-gray !default; |
| + | |
| + | /// Default text color for items in a Menu. |
| + | /// @type Color |
| + | $tab-item-color: foreground($tab-background, $primary-color) !default; |
| + | |
| + | /// Default background color on hover for items in a Menu. |
| + | $tab-item-background-hover: $white !default; |
| + | |
| + | /// Default padding of a a tab item. |
| + | /// @type Number |
| + | $tab-item-padding: 1.25rem 1.5rem !default; |
| + | |
| + | /// Maximum number of `expand-n` classes to include in the CSS. |
| + | /// @type Number |
| + | $tab-expand-max: 6 !default; |
| + | |
| + | /// Default background color of tab content. |
| + | /// @type Color |
| + | $tab-content-background: $white !default; |
| + | |
| + | /// Default border color of tab content. |
| + | /// @type Color |
| + | $tab-content-border: $light-gray !default; |
| + | |
| + | /// Default text color of tab content. |
| + | /// @type Color |
| + | $tab-content-color: foreground($tab-background, $primary-color) !default; |
| + | |
| + | /// Default padding for tab content. |
| + | /// @type Number | List |
| + | $tab-content-padding: 1rem !default; |
| + | |
| + | @mixin foundation-tabs { |
| + | .tabs { |
| + | @include clearfix; |
| + | margin: $tab-margin; |
| + | list-style-type: none; |
| + | background: $tab-background; |
| + | border: 1px solid $tab-content-border; |
| + | |
| + | // Simple |
| + | &.simple { |
| + | > li > a { |
| + | padding: 0; |
| + | |
| + | &:hover { |
| + | background: transparent; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Vertical |
| + | &.vertical { |
| + | > li { |
| + | width: auto; |
| + | float: none; |
| + | display: block; |
| + | } |
| + | } |
| + | |
| + | // Primary color |
| + | &.primary { |
| + | background: $primary-color; |
| + | |
| + | > li > a { |
| + | color: foreground($primary-color); |
| + | |
| + | &:hover, |
| + | &:focus { |
| + | background: smart-scale($primary-color); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | .tabs-title { |
| + | float: #{$global-left}; |
| + | |
| + | > a { |
| + | display: block; |
| + | padding: $tab-item-padding; |
| + | line-height: 1; |
| + | font-size: 12px; |
| + | color: $tab-item-color; |
| + | |
| + | &:hover, |
| + | &:focus, |
| + | &[aria-selected="true"] { |
| + | background: $tab-background-active; |
| + | } |
| + | } |
| + | } |
| + | |
| + | .tabs-content { |
| + | background: $tab-content-background; |
| + | transition: all 0.5s ease; |
| + | border: 1px solid $tab-content-border; |
| + | border-top: 0; |
| + | |
| + | &.vertical { |
| + | border: 1px solid $tab-content-border; |
| + | border-#{$global-left}: 0; |
| + | } |
| + | } |
| + | |
| + | .tabs-panel { |
| + | display: none; |
| + | padding: $tab-content-padding; |
| + | |
| + | &.is-active { |
| + | display: block; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_thumbnail.scss
+54
-0
| @@ | @@ -0,0 +1,54 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group thumbnail |
| + | //// |
| + | |
| + | /// Border around thumbnail images. |
| + | /// @type Border |
| + | $thumbnail-border: solid 4px $white !default; |
| + | |
| + | /// Bottom margin for thumbnail images. |
| + | /// @type Length |
| + | $thumbnail-margin-bottom: $global-margin !default; |
| + | |
| + | /// Box shadow under thumbnail images. |
| + | /// @type Shadow |
| + | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default; |
| + | |
| + | /// Box shadow under thumbnail images. |
| + | /// @type Shadow |
| + | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default; |
| + | |
| + | /// Transition proprties for thumbnail images. |
| + | /// @type Transition |
| + | $thumbnail-transition: box-shadow 200ms ease-out !default; |
| + | |
| + | /// Default radius for thumbnail images. |
| + | /// @type Number |
| + | $thumbnail-radius: $global-radius !default; |
| + | |
| + | /// Adds thumbnail styles to an element. |
| + | @mixin thumbnail { |
| + | border: $thumbnail-border; |
| + | box-shadow: $thumbnail-shadow; |
| + | display: inline-block; |
| + | line-height: 0; |
| + | max-width: 100%; |
| + | transition: $thumbnail-transition; |
| + | border-radius: $thumbnail-radius; |
| + | margin-bottom: $thumbnail-margin-bottom; |
| + | |
| + | &:hover, |
| + | &:focus { |
| + | box-shadow: $thumbnail-shadow-hover; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-thumbnail { |
| + | .thumbnail { |
| + | @include thumbnail; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_title-bar.scss
+44
-0
| @@ | @@ -0,0 +1,44 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group title-bar |
| + | //// |
| + | |
| + | @mixin foundation-title-bar { |
| + | .title-bar { |
| + | @include clearfix; |
| + | background: $black; |
| + | color: $white; |
| + | padding: 0.5rem; |
| + | |
| + | .menu-icon { |
| + | margin-#{$global-left}: 0.25rem; |
| + | margin-#{$global-right}: 0.5rem; |
| + | } |
| + | } |
| + | |
| + | .title-bar-left { |
| + | float: left; |
| + | } |
| + | |
| + | .title-bar-right { |
| + | float: right; |
| + | text-align: right; |
| + | } |
| + | |
| + | .title-bar-title { |
| + | font-weight: bold; |
| + | vertical-align: middle; |
| + | display: inline-block; |
| + | } |
| + | |
| + | .menu-icon { |
| + | @include hamburger($color: white, $color-hover: $medium-gray); |
| + | } |
| + | |
| + | .menu-icon.dark { |
| + | @include hamburger; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_tooltip.scss
+110
-0
| @@ | @@ -0,0 +1,110 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group tooltip |
| + | //// |
| + | |
| + | /// Default color of the tooltip background. |
| + | /// @type Color |
| + | $tooltip-background-color: $black !default; |
| + | |
| + | /// Default color of the tooltip font. |
| + | /// @type Color |
| + | $tooltip-color: $white; |
| + | |
| + | /// Default padding of the tooltip background. |
| + | /// @type Number |
| + | $tooltip-padding: 0.75rem !default; |
| + | |
| + | /// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy. |
| + | /// @type Number |
| + | $tooltip-font-size: $small-font-size !default; |
| + | |
| + | /// Default pip width for tooltips. |
| + | /// @type Number |
| + | $tooltip-pip-width: 0.75rem !default; |
| + | |
| + | /// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word. |
| + | /// @type Number |
| + | $tooltip-pip-height: $tooltip-pip-width * 0.866 !default; |
| + | |
| + | /// Default pip offset for tooltips. This controls how far the pip is indented from the left edge of the tooltip. |
| + | /// @type Number |
| + | $tooltip-pip-offset: 1.25rem !default; |
| + | |
| + | /// Default radius for tooltips. |
| + | /// @type Number |
| + | $tooltip-radius: $global-radius !default; |
| + | |
| + | @mixin has-tip { |
| + | border-bottom: dotted 1px $dark-gray; |
| + | font-weight: bold; |
| + | position: relative; |
| + | display: inline-block; |
| + | |
| + | &:hover { |
| + | cursor: help; |
| + | } |
| + | } |
| + | |
| + | @mixin tooltip { |
| + | background-color: $tooltip-background-color; |
| + | color: $tooltip-color; |
| + | font-size: $tooltip-font-size; |
| + | padding: $tooltip-padding; |
| + | position: absolute; |
| + | z-index: 10; |
| + | top: calc(100% + #{$tooltip-pip-height}); |
| + | max-width: 10rem !important; |
| + | border-radius: $tooltip-radius; |
| + | // visibility: hidden; |
| + | |
| + | &::before { |
| + | @include css-triangle($tooltip-pip-width, $tooltip-background-color, up); |
| + | bottom: 100%; |
| + | position: absolute; |
| + | left: 50%; |
| + | transform: translateX(-50%); |
| + | } |
| + | |
| + | &.top { |
| + | &::before { |
| + | @include css-triangle($tooltip-pip-width, $tooltip-background-color, down); |
| + | top: 100%; |
| + | bottom: auto; |
| + | } |
| + | } |
| + | |
| + | &.left { |
| + | &::before { |
| + | @include css-triangle($tooltip-pip-width, $tooltip-background-color, right); |
| + | bottom: auto; |
| + | left: 100%; |
| + | top: 50%; |
| + | transform: translateY(-50%); |
| + | } |
| + | } |
| + | |
| + | &.right { |
| + | &::before { |
| + | @include css-triangle($tooltip-pip-width, $tooltip-background-color, left); |
| + | bottom: auto; |
| + | left: auto; |
| + | right: 100%; |
| + | top: 50%; |
| + | transform: translateY(-50%); |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-tooltip { |
| + | .has-tip { |
| + | @include has-tip; |
| + | } |
| + | |
| + | .tooltip { |
| + | @include tooltip; |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_top-bar.scss
+57
-0
| @@ | @@ -0,0 +1,57 @@ |
| + | // 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: #eee !default; |
| + | |
| + | /// Color for links inside a top bar menu. |
| + | /// @type Color |
| + | $topbar-link-color: #fff !default; |
| + | |
| + | /// Width of `<input>` elements inside the top bar. |
| + | /// @type Number |
| + | $topbar-input-width: 200px !default; |
| + | |
| + | /// Adds styles for a top bar container. |
| + | @mixin top-bar-container { |
| + | @include clearfix; |
| + | padding: $topbar-padding; |
| + | |
| + | &, ul { |
| + | background-color: $topbar-background; |
| + | } |
| + | |
| + | input { |
| + | width: $topbar-input-width; |
| + | margin-#{$global-right}: 1rem; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-top-bar { |
| + | // Top bar container |
| + | .top-bar { |
| + | @include top-bar-container; |
| + | } |
| + | |
| + | // Sub-sections |
| + | // Stack on small screens |
| + | @include breakpoint(medium) { |
| + | .top-bar-left { |
| + | float: left; |
| + | } |
| + | |
| + | .top-bar-right { |
| + | float: right |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/components/_visibility.scss
+131
-0
| @@ | @@ -0,0 +1,131 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | /// Hide an element by default, only displaying it above a certain screen size. |
| + | /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** |
| + | @mixin show-for($size) { |
| + | $size: map-get($breakpoints, $size); |
| + | $size: -zf-bp-to-em($size) - (1/16); |
| + | |
| + | @include breakpoint($size down) { |
| + | display: none !important; |
| + | } |
| + | } |
| + | |
| + | /// Hide an element by default, only displaying it within a certain breakpoint. |
| + | /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** |
| + | @mixin show-for-only($size) { |
| + | $lower-bound-size: map-get($breakpoints, $size); |
| + | $upper-bound-size: -zf-map-next($breakpoints, $size); |
| + | |
| + | // more often than not this will be correct, just one time round the loop it won't so set in scope here |
| + | $lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16); |
| + | // test actual lower-bound-size, if 0 set it to 0em |
| + | @if $lower-bound-size == 0 { |
| + | $lower-bound: -zf-bp-to-em($lower-bound-size); |
| + | } |
| + | |
| + | @if $upper-bound-size == null { |
| + | @media screen and (max-width: $lower-bound) { |
| + | display: none !important; |
| + | } |
| + | } |
| + | @else { |
| + | $upper-bound: -zf-bp-to-em($upper-bound-size); |
| + | @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) { |
| + | display: none !important; |
| + | } |
| + | } |
| + | } |
| + | |
| + | |
| + | /// Show an element by default, and hide it above a certain screen size. |
| + | /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** |
| + | @mixin hide-for($size) { |
| + | @include breakpoint($size) { |
| + | display: none !important; |
| + | } |
| + | } |
| + | |
| + | /// Show an element by default, and hide it above a certain screen size. |
| + | /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.** |
| + | @mixin hide-for-only($size) { |
| + | @include breakpoint($size only) { |
| + | display: none !important; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-visibility-classes { |
| + | // Basic hiding classes |
| + | .hide { |
| + | display: none !important; |
| + | } |
| + | |
| + | .invisible { |
| + | visibility: hidden; |
| + | } |
| + | |
| + | // Responsive visibility classes |
| + | @each $size in $breakpoint-classes { |
| + | @if $size != small { |
| + | .hide-for-#{$size} { |
| + | @include hide-for($size); |
| + | } |
| + | |
| + | .show-for-#{$size} { |
| + | @include show-for($size); |
| + | } |
| + | } |
| + | |
| + | .hide-for-#{$size}-only { |
| + | @include hide-for-only($size); |
| + | } |
| + | |
| + | .show-for-#{$size}-only { |
| + | @include show-for-only($size); |
| + | } |
| + | } |
| + | |
| + | // Screen reader visibility classes |
| + | // Need a "hide-for-sr" class? Add aria-hidden="true" to the element |
| + | .show-for-sr, |
| + | .show-on-focus { |
| + | @include element-invisible; |
| + | } |
| + | |
| + | // Only display the element when it's focused |
| + | .show-on-focus { |
| + | &:active, |
| + | &:focus { |
| + | @include element-invisible-off; |
| + | } |
| + | } |
| + | |
| + | // Landscape and portrait visibility |
| + | .show-for-landscape, |
| + | .hide-for-portrait { |
| + | display: block !important; |
| + | |
| + | @include breakpoint(landscape) { |
| + | display: block !important; |
| + | } |
| + | |
| + | @include breakpoint(portrait) { |
| + | display: none !important; |
| + | } |
| + | } |
| + | |
| + | .hide-for-landscape, |
| + | .show-for-portrait { |
| + | display: none !important; |
| + | |
| + | @include breakpoint(landscape) { |
| + | display: none !important; |
| + | } |
| + | |
| + | @include breakpoint(portrait) { |
| + | display: block !important; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_checkbox.scss
+36
-0
| @@ | @@ -0,0 +1,36 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group forms |
| + | //// |
| + | |
| + | @mixin foundation-form-checkbox { |
| + | [type="file"], |
| + | [type="checkbox"], |
| + | [type="radio"] { |
| + | margin: 0 0 $form-spacing; |
| + | } |
| + | |
| + | // Styles for input/label siblings |
| + | [type="checkbox"] + label, |
| + | [type="radio"] + label { |
| + | display: inline-block; |
| + | margin-#{$global-left}: $form-spacing * 0.5; |
| + | margin-#{$global-right}: $form-spacing; |
| + | margin-bottom: 0; |
| + | vertical-align: baseline; |
| + | } |
| + | |
| + | // Styles for inputs inside labels |
| + | label > [type="checkbox"], |
| + | label > [type="label"] { |
| + | margin-#{$global-right}: $form-spacing * 0.5; |
| + | } |
| + | |
| + | // Normalize file input width |
| + | [type="file"] { |
| + | width: 100%; |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_error.scss
+81
-0
| @@ | @@ -0,0 +1,81 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group abide |
| + | //// |
| + | |
| + | /// Sets if error styles should be added to inputs. |
| + | /// @type Boolean |
| + | $abide-inputs: true !default; |
| + | |
| + | /// Sets if error styles should be added to labels. |
| + | /// @type Boolean |
| + | $abide-labels: true !default; |
| + | |
| + | /// Background color to use for invalid text inputs. |
| + | /// @type Color |
| + | $input-background-invalid: $alert-color !default; |
| + | |
| + | /// Color to use for labels of invalid inputs. |
| + | /// @type Color |
| + | $form-label-color-invalid: $alert-color !default; |
| + | |
| + | /// Default font color for form error text. |
| + | /// @type Color |
| + | $input-error-color: $alert-color !default; |
| + | |
| + | /// Default font size for form error text. |
| + | /// @type Number |
| + | $input-error-font-size: rem-calc(12) !default; |
| + | |
| + | /// Default font weight for form error text. |
| + | /// @type Keyword |
| + | $input-error-font-weight: $global-weight-bold !default; |
| + | |
| + | /// Styles the background and border of an input field to have an error state. |
| + | /// @param {Color} $background [$alert-color] - Color to use for the background and border. |
| + | @mixin form-input-error( |
| + | $background: $alert-color |
| + | ) { |
| + | &:not(:focus) { |
| + | background-color: rgba($background, 0.1); |
| + | border-color: $background; |
| + | } |
| + | } |
| + | |
| + | /// Adds error styles to a form element, using the values in the settings file. |
| + | @mixin form-error { |
| + | display: none; |
| + | margin-top: $form-spacing * -0.5; |
| + | margin-bottom: $form-spacing; |
| + | font-size: $input-error-font-size; |
| + | font-weight: $input-error-font-weight; |
| + | color: $input-error-color; |
| + | } |
| + | |
| + | @mixin foundation-form-error { |
| + | @if $abide-inputs { |
| + | // Error class for invalid inputs |
| + | .is-invalid-input { |
| + | @include form-input-error; |
| + | } |
| + | } |
| + | |
| + | @if $abide-labels { |
| + | // Error class for labels of invalid outputs |
| + | .is-invalid-label { |
| + | color: $form-label-color-invalid; |
| + | } |
| + | } |
| + | |
| + | // Form error element |
| + | .form-error { |
| + | @include form-error; |
| + | |
| + | &.is-visible { |
| + | display: block; |
| + | } |
| + | } |
| + | } |
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 { |
| + | border: $fieldset-border; |
| + | padding: $fieldset-padding; |
| + | margin: $fieldset-margin; |
| + | |
| + | legend { |
| + | // Covers up the fieldset's border to create artificial padding |
| + | background: $body-background; |
| + | padding: $legend-padding; |
| + | margin: 0; |
| + | margin-#{$global-left}: rem-calc(-3); |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-form-fieldset { |
| + | fieldset { |
| + | border: 0; |
| + | padding: 0; |
| + | margin: 0; |
| + | } |
| + | |
| + | legend { |
| + | margin-bottom: $form-spacing * 0.5; |
| + | } |
| + | |
| + | .fieldset { |
| + | @include fieldset; |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_forms.scss
+32
-0
| @@ | @@ -0,0 +1,32 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group forms |
| + | //// |
| + | |
| + | /// Global spacing for form elements. |
| + | /// @type Number |
| + | $form-spacing: rem-calc(16) !default; |
| + | |
| + | @import |
| + | 'text', |
| + | 'checkbox', |
| + | 'label', |
| + | 'help-text', |
| + | 'input-group', |
| + | 'fieldset', |
| + | 'select', |
| + | 'error'; |
| + | |
| + | @mixin foundation-forms { |
| + | @include foundation-form-text; |
| + | @include foundation-form-checkbox; |
| + | @include foundation-form-label; |
| + | @include foundation-form-helptext; |
| + | @include foundation-form-prepostfix; |
| + | @include foundation-form-fieldset; |
| + | @include foundation-form-select; |
| + | @include foundation-form-error; |
| + | } |
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: #333 !default; |
| + | |
| + | /// Default font size for help text. |
| + | /// @type Number |
| + | $helptext-font-size: rem-calc(13) !default; |
| + | |
| + | /// Default font style for help text. |
| + | /// @type Keyword |
| + | $helptext-font-style: italic !default; |
| + | |
| + | @mixin foundation-form-helptext { |
| + | .help-text { |
| + | $margin-top: ($form-spacing * 0.5) * -1; |
| + | |
| + | margin-top: $margin-top; |
| + | font-size: $helptext-font-size; |
| + | font-style: $helptext-font-style; |
| + | color: $helptext-color; |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_input-group.scss
+70
-0
| @@ | @@ -0,0 +1,70 @@ |
| + | // 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 { |
| + | .input-group { |
| + | display: table; |
| + | width: 100%; |
| + | margin-bottom: $form-spacing; |
| + | } |
| + | |
| + | %input-group-child { |
| + | display: table-cell; |
| + | margin: 0; |
| + | vertical-align: middle; |
| + | } |
| + | |
| + | .input-group-label { |
| + | @extend %input-group-child; |
| + | text-align: center; |
| + | width: 1%; |
| + | height: 100%; |
| + | padding: 0 $input-prefix-padding; |
| + | background: $input-prefix-background; |
| + | color: $input-prefix-color; |
| + | border: $input-prefix-border; |
| + | |
| + | @if hasvalue($input-prefix-border) { |
| + | &:first-child { |
| + | border-#{$global-right}: 0; |
| + | } |
| + | |
| + | &:last-child { |
| + | border-#{$global-left}: 0; |
| + | } |
| + | } |
| + | } |
| + | |
| + | .input-group-field { |
| + | @extend %input-group-child; |
| + | } |
| + | |
| + | .input-group-button { |
| + | @extend %input-group-child; |
| + | height: 100%; |
| + | padding-top: 0; |
| + | padding-bottom: 0; |
| + | text-align: center; |
| + | width: 1%; |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_label.scss
+48
-0
| @@ | @@ -0,0 +1,48 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group forms |
| + | //// |
| + | |
| + | /// Color for form labels. |
| + | /// @type Color |
| + | $form-label-color: $black !default; |
| + | |
| + | /// Font size for form labels. |
| + | /// @type Number |
| + | $form-label-font-size: rem-calc(14) !default; |
| + | |
| + | /// Font weight for form labels. |
| + | /// @type Keyword |
| + | $form-label-font-weight: $global-weight-normal !default; |
| + | |
| + | /// Line height for form labels. The higher the number, the more space between the label and its input field. |
| + | /// @type Number |
| + | $form-label-line-height: 1.8 !default; |
| + | |
| + | @mixin form-label { |
| + | display: block; |
| + | margin: 0; |
| + | font-size: $form-label-font-size; |
| + | font-weight: $form-label-font-weight; |
| + | line-height: $form-label-line-height; |
| + | color: $form-label-color; |
| + | } |
| + | |
| + | @mixin form-label-middle { |
| + | $input-border-width: get-border-value($input-border, width); |
| + | margin: 0 0 $form-spacing; |
| + | padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0; |
| + | } |
| + | |
| + | @mixin foundation-form-label { |
| + | label { |
| + | @include form-label; |
| + | |
| + | &.middle { |
| + | @include form-label-middle; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_select.scss
+64
-0
| @@ | @@ -0,0 +1,64 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group forms |
| + | //// |
| + | |
| + | /// Background color for select menus. |
| + | /// @type Color |
| + | $select-background: #fafafa !default; |
| + | |
| + | /// Color of the dropdown triangle inside select menus. Set to `transparent` to remove it entirely. |
| + | /// @type Color |
| + | $select-triangle-color: #333 !default; |
| + | |
| + | /// Default radius for select menus. |
| + | /// @type Color |
| + | $select-radius: $global-radius !default; |
| + | |
| + | @mixin form-select { |
| + | $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); |
| + | |
| + | height: $height; |
| + | padding: ($form-spacing / 2); |
| + | border: $input-border; |
| + | border-radius: $global-radius; |
| + | margin: 0 0 $form-spacing; |
| + | font-size: $input-font-size; |
| + | font-family: $input-font-family; |
| + | line-height: normal; |
| + | color: $input-color; |
| + | background-color: $select-background; |
| + | border-radius: $select-radius; |
| + | -webkit-appearance: none; |
| + | -moz-appearance: none; |
| + | |
| + | @if $select-triangle-color != transparent { |
| + | @include background-triangle($select-triangle-color); |
| + | background-size: 9px 6px; |
| + | background-position: $global-right ($form-spacing / 2) center; |
| + | background-repeat: no-repeat; |
| + | } |
| + | // Disabled state |
| + | &:disabled { |
| + | background-color: $input-background-disabled; |
| + | cursor: $input-cursor-disabled; |
| + | } |
| + | |
| + | // Hide the dropdown arrow shown in newer IE versions |
| + | &::-ms-expand { |
| + | display: none; |
| + | } |
| + | |
| + | &[multiple] { |
| + | height: auto; |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-form-select { |
| + | select { |
| + | @include form-select; |
| + | } |
| + | } |
public/stylesheets/foundation6/forms/_text.scss
+153
-0
| @@ | @@ -0,0 +1,153 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group forms |
| + | //// |
| + | |
| + | /// Font color of text inputs. |
| + | /// @type Color |
| + | $input-color: $dark-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; |
| + | |
| + | /// Background color of text inputs. |
| + | /// @type Color |
| + | $input-background: $white !default; |
| + | |
| + | /// Background color of focused of text inputs. |
| + | /// @type Color |
| + | $input-background-focus: $white !default; |
| + | |
| + | /// Background color of disabled text inputs. |
| + | /// @type Color |
| + | $input-background-disabled: $light-gray !default; |
| + | |
| + | /// Border around text inputs. |
| + | /// @type Border |
| + | $input-border: 1px solid $medium-gray !default; |
| + | |
| + | /// Border around focused text inputs. |
| + | /// @type Color |
| + | $input-border-focus: 1px solid $dark-gray !default; |
| + | |
| + | /// Box shadow inside text inputs when not focused. |
| + | /// @type Shadow |
| + | $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default; |
| + | |
| + | /// Box shadow outside text inputs when focused. |
| + | /// @type Shadow |
| + | $input-shadow-focus: 0 0 5px $medium-gray !default; |
| + | |
| + | /// Cursor to use when hovering over a disabled text input. |
| + | /// @type Cursor |
| + | $input-cursor-disabled: default !default; |
| + | |
| + | /// Properties to transition on text inputs. |
| + | /// @type Transition |
| + | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out !default; |
| + | |
| + | /// Enables the up/down buttons that Chrome and Firefox add to `<input type="number">` elements. |
| + | /// @type Boolean |
| + | $input-number-spinners: true !default; |
| + | |
| + | /// Radius for text inputs. |
| + | /// @type Border |
| + | $input-radius: $global-radius !default; |
| + | |
| + | @mixin form-element { |
| + | $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); |
| + | |
| + | display: block; |
| + | box-sizing: border-box; |
| + | width: 100%; |
| + | height: $height; |
| + | padding: $form-spacing / 2; |
| + | border: $input-border; |
| + | margin: 0 0 $form-spacing; |
| + | |
| + | font-family: $input-font-family; |
| + | font-size: $input-font-size; |
| + | color: $input-color; |
| + | background-color: $input-background; |
| + | box-shadow: $input-shadow; |
| + | border-radius: $input-radius; |
| + | |
| + | @if hasvalue($input-transition) { |
| + | transition: $input-transition; |
| + | } |
| + | |
| + | // Focus state |
| + | &:focus { |
| + | border: $input-border-focus; |
| + | background: $input-background-focus; |
| + | outline: none; |
| + | box-shadow: $input-shadow-focus; |
| + | |
| + | @if hasvalue($input-transition) { |
| + | transition: $input-transition; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @mixin foundation-form-text { |
| + | // Text inputs |
| + | #{text-inputs()}, |
| + | textarea { |
| + | @include form-element; |
| + | -webkit-appearance: none; |
| + | -moz-appearance: none; |
| + | } |
| + | |
| + | // Text areas |
| + | textarea { |
| + | max-width: 100%; |
| + | |
| + | &[rows] { |
| + | height: auto; |
| + | } |
| + | } |
| + | |
| + | // Disabled/readonly state |
| + | input, |
| + | textarea { |
| + | &:disabled, |
| + | &[readonly] { |
| + | background-color: $input-background-disabled; |
| + | cursor: $input-cursor-disabled; |
| + | } |
| + | } |
| + | |
| + | // Reset styles on button-like inputs |
| + | [type="submit"], |
| + | [type="button"] { |
| + | border-radius: $global-radius; |
| + | -webkit-appearance: none; |
| + | -moz-appearance: none; |
| + | } |
| + | |
| + | // Reset Normalize setting content-box to search elements |
| + | input[type="search"] { |
| + | box-sizing: border-box; |
| + | } |
| + | |
| + | // Number input styles |
| + | [type='number'] { |
| + | @if not($input-number-spinners) { |
| + | -moz-appearance: textfield; |
| + | |
| + | [type='number']::-webkit-inner-spin-button, |
| + | [type='number']::-webkit-outer-spin-button { |
| + | -webkit-appearance: none; |
| + | margin: 0; |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/foundation.scss
+91
-0
| @@ | @@ -0,0 +1,91 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | // Third-party libraries |
| + | @import 'vendor/normalize'; |
| + | |
| + | // Sass utilities |
| + | @import 'util/util'; |
| + | |
| + | // Global variables and styles |
| + | @import 'global'; |
| + | |
| + | // Components |
| + | @import 'grid/grid'; |
| + | @import 'typography/typography'; |
| + | @import 'forms/forms'; |
| + | @import 'components/visibility'; |
| + | @import 'components/float'; |
| + | @import 'components/button'; |
| + | @import 'components/button-group'; |
| + | @import 'components/accordion-menu'; |
| + | @import 'components/accordion'; |
| + | @import 'components/badge'; |
| + | @import 'components/breadcrumbs'; |
| + | @import 'components/callout'; |
| + | @import 'components/close-button'; |
| + | @import 'components/drilldown'; |
| + | @import 'components/dropdown-menu'; |
| + | @import 'components/dropdown'; |
| + | @import 'components/flex-video'; |
| + | @import 'components/label'; |
| + | @import 'components/media-object'; |
| + | @import 'components/menu'; |
| + | @import 'components/off-canvas'; |
| + | @import 'components/orbit'; |
| + | @import 'components/pagination'; |
| + | @import 'components/progress-bar'; |
| + | @import 'components/reveal'; |
| + | @import 'components/slider'; |
| + | @import 'components/sticky'; |
| + | @import 'components/switch'; |
| + | @import 'components/table'; |
| + | @import 'components/tabs'; |
| + | @import 'components/title-bar'; |
| + | @import 'components/top-bar'; |
| + | @import 'components/thumbnail'; |
| + | @import 'components/tooltip'; |
| + | |
| + | // These styles are applied to <meta> tags, which are read by the Foundation JavaScript |
| + | .foundation-mq { |
| + | font-family: "#{-zf-bp-serialize($breakpoints)}"; |
| + | } |
| + | |
| + | @mixin foundation-everything { |
| + | @include foundation-global-styles; |
| + | @include foundation-grid; |
| + | @include foundation-typography; |
| + | @include foundation-button; |
| + | @include foundation-forms; |
| + | @include foundation-visibility-classes; |
| + | @include foundation-float-classes; |
| + | @include foundation-accordion; |
| + | @include foundation-accordion-menu; |
| + | @include foundation-badge; |
| + | @include foundation-breadcrumbs; |
| + | @include foundation-button-group; |
| + | @include foundation-callout; |
| + | @include foundation-close-button; |
| + | @include foundation-drilldown-menu; |
| + | @include foundation-dropdown; |
| + | @include foundation-dropdown-menu; |
| + | @include foundation-flex-video; |
| + | @include foundation-label; |
| + | @include foundation-media-object; |
| + | @include foundation-menu; |
| + | @include foundation-off-canvas; |
| + | @include foundation-orbit; |
| + | @include foundation-pagination; |
| + | @include foundation-progress-bar; |
| + | @include foundation-slider; |
| + | @include foundation-sticky; |
| + | @include foundation-reveal; |
| + | @include foundation-switch; |
| + | @include foundation-table; |
| + | @include foundation-tabs; |
| + | @include foundation-thumbnail; |
| + | @include foundation-title-bar; |
| + | @include foundation-tooltip; |
| + | @include foundation-top-bar; |
| + | } |
public/stylesheets/foundation6/grid/_classes.scss
+132
-0
| @@ | @@ -0,0 +1,132 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group grid |
| + | //// |
| + | |
| + | /// Outputs CSS classes for the grid. |
| + | /// @access private |
| + | @mixin foundation-grid( |
| + | $row: 'row', |
| + | $column: 'column', |
| + | $column-row: 'column-row', |
| + | $push: 'push', |
| + | $pull: 'pull', |
| + | $center: 'centered', |
| + | $uncenter: 'uncenter', |
| + | $collapse: 'collapse', |
| + | $uncollapse: 'uncollapse', |
| + | $offset: 'offset', |
| + | $end: 'end', |
| + | $expanded: 'expanded', |
| + | $breakpoints: $breakpoint-classes |
| + | ) { |
| + | // Row |
| + | .#{$row} { |
| + | @include grid-row; |
| + | |
| + | // Collapsing |
| + | &.#{$collapse} { |
| + | > .#{$column} { @include grid-col-collapse; } |
| + | } |
| + | |
| + | // Nesting |
| + | & & { |
| + | @include grid-row($behavior: nest, $cf: false); |
| + | |
| + | &.#{$collapse} { |
| + | @include grid-row($behavior: nest collapse, $cf: false); |
| + | } |
| + | } |
| + | |
| + | // Responsive collapsing |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | &.#{$size}-#{$collapse} { |
| + | > .#{$column} { @include grid-col-collapse; } |
| + | } |
| + | |
| + | &.#{$size}-#{$uncollapse} { |
| + | > .#{$column} { @include grid-col-uncollapse; } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Expanded (full-width) row |
| + | &.#{$expanded} { |
| + | max-width: none; |
| + | } |
| + | } |
| + | |
| + | // Column |
| + | .#{$column} { |
| + | @include grid-col; |
| + | |
| + | &.#{$end} { |
| + | @include grid-col-end; |
| + | } |
| + | } |
| + | |
| + | // Column row |
| + | // The double .row class is needed to bump up the specificity |
| + | .#{$column}.#{$row}.#{$row} { |
| + | float: none; |
| + | } |
| + | |
| + | @each $size in $breakpoints { |
| + | @include breakpoint($size) { |
| + | @for $i from 1 through $grid-column-count { |
| + | // Column width |
| + | .#{$size}-#{$i} { |
| + | @include grid-col-size($i); |
| + | } |
| + | |
| + | // Source ordering |
| + | @if $i < $grid-column-count { |
| + | .#{$size}-#{$push}-#{$i} { |
| + | @include grid-col-pos($i); |
| + | } |
| + | |
| + | .#{$size}-#{$pull}-#{$i} { |
| + | @include grid-col-pos(-$i); |
| + | } |
| + | } |
| + | |
| + | // Offsets |
| + | $o: $i - 1; |
| + | |
| + | .#{$size}-#{$offset}-#{$o} { |
| + | @include grid-col-off($o); |
| + | } |
| + | } |
| + | |
| + | // Block grid |
| + | @for $i from 1 through $block-grid-max { |
| + | .#{$size}-up-#{$i} { |
| + | @include grid-layout($i); |
| + | } |
| + | } |
| + | |
| + | // Positioning |
| + | .#{$column}.#{$size}-#{$center} { |
| + | @include grid-col-pos(center); |
| + | } |
| + | |
| + | // Gutter adjustment |
| + | .#{$size}-#{$uncenter}, |
| + | .#{$size}-#{$push}-0, |
| + | .#{$size}-#{$pull}-0 { |
| + | @include grid-col-unpos; |
| + | } |
| + | } |
| + | } |
| + | |
| + | @if $column == 'column' { |
| + | .columns { |
| + | // scss-lint:disable PlaceholderInExtend |
| + | @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 string of the format "x of y" will make a column that is *x* columns wide, assuming *y* total columns for the parent. |
| + | /// |
| + | /// @return {Number} A calculated percentage value. |
| + | @function grid-column($columns) { |
| + | $width: 0%; |
| + | |
| + | // Parsing percents, decimals, and column counts |
| + | @if type-of($columns) == 'number' { |
| + | @if unit($columns) == '%' { |
| + | $width: $columns; |
| + | } |
| + | @else if $columns < 1 { |
| + | $width: percentage($columns); |
| + | } |
| + | @else { |
| + | $width: percentage($columns / $grid-column-count); |
| + | } |
| + | } |
| + | |
| + | // Parsing "n of n" expressions |
| + | @else if type-of($columns) == 'list' { |
| + | @if length($columns) != 3 { |
| + | @error 'Wrong syntax for grid-column(). Use the format "n of n".'; |
| + | } |
| + | @else { |
| + | $width: percentage(nth($columns, 1) / nth($columns, 3)); |
| + | } |
| + | } |
| + | |
| + | // Anything else is incorrect |
| + | @else { |
| + | @error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or "n of n".'; |
| + | } |
| + | |
| + | @return $width; |
| + | } |
| + | |
| + | /// Creates a grid column. |
| + | /// |
| + | /// @param {Mixed} $columns [$grid-column-count] - Width of the column. Refer to the `grid-column()` function to see possible values. |
| + | /// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns. |
| + | @mixin grid-column( |
| + | $columns: $grid-column-count, |
| + | $gutter: $grid-column-gutter |
| + | ) { |
| + | @if ($columns <= $grid-column-count) { |
| + | @include grid-column-size($columns); |
| + | } |
| + | |
| + | $gutter: rem-calc($gutter) / 2; |
| + | |
| + | float: $global-left; |
| + | padding-left: $gutter; |
| + | padding-right: $gutter; |
| + | |
| + | &:last-child:not(:first-child) { |
| + | float: $global-right; |
| + | } |
| + | } |
| + | |
| + | /// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element. |
| + | /// @param {Number} $gutter [$grid-column-gutter] - Width of the gutters on either side of the column row. |
| + | @mixin grid-column-row( |
| + | $gutter: $grid-column-gutter |
| + | ) { |
| + | @include grid-row; |
| + | @include grid-column($gutter: $gutter); |
| + | |
| + | &, |
| + | &:last-child { |
| + | float: none; |
| + | } |
| + | } |
| + | |
| + | /// Shorthand for `grid-column()`. |
| + | /// @alias grid-column |
| + | @function grid-col( |
| + | $columns: $grid-column-count |
| + | ) { |
| + | @return grid-column($columns); |
| + | } |
| + | |
| + | /// Shorthand for `grid-column()`. |
| + | /// @alias grid-column |
| + | @mixin grid-col( |
| + | $columns: $grid-column-count, |
| + | $gutter: $grid-column-gutter |
| + | ) { |
| + | @include grid-column($columns, $gutter); |
| + | } |
| + | |
| + | /// Shorthand for `grid-column-row()`. |
| + | /// @alias grid-column-row |
| + | @mixin grid-col-row( |
| + | $gutter: $grid-column-gutter |
| + | ) { |
| + | @include grid-column-row($gutter); |
| + | } |
public/stylesheets/foundation6/grid/_flex-grid.scss
+191
-0
| @@ | @@ -0,0 +1,191 @@ |
| + | // 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 {Number} $width [$grid-row-width] - Maximum width of the row. |
| + | /// @param {Number} $columns [null] - Number of columns to use for this row. If set to `null` (the default), the global column count will be used. |
| + | /// @param {Boolean} $base [true] - Set to `false` to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output. |
| + | @mixin flex-grid-row( |
| + | $behavior: null, |
| + | $width: $grid-row-width, |
| + | $columns: null, |
| + | $base: true |
| + | ) { |
| + | $behavior: -zf-get-options($behavior, nest collapse); |
| + | $margin: auto; |
| + | |
| + | @if map-get($behavior, nest) { |
| + | $margin: rem-calc($grid-column-gutter) / 2 * -1; |
| + | } |
| + | @else { |
| + | max-width: $width; |
| + | } |
| + | |
| + | @if $base { |
| + | display: flex; |
| + | flex-flow: row wrap; |
| + | } |
| + | |
| + | margin-left: $margin; |
| + | margin-right: $margin; |
| + | |
| + | @if $columns != null { |
| + | @include grid-context($columns, $base) { |
| + | @content; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Calculates the `flex` property for a flex grid column. It accepts all of the same values as the basic `grid-column()` function, along with two extras: |
| + | /// - `null` (the default) will make the column expand to fill space. |
| + | /// - `shrink` will make the column contract, so it only takes up the horizontal space it needs. |
| + | /// @param {Mixed} $columns [null] - Width of the column. |
| + | @function flex-grid-column($columns: null) { |
| + | $flex: 1 1 0px; |
| + | |
| + | @if $columns == shrink { |
| + | $flex: 0 0 auto; |
| + | } |
| + | @else if $columns != null { |
| + | $flex: 0 0 grid-column($columns); |
| + | } |
| + | |
| + | @return $flex; |
| + | } |
| + | |
| + | /// Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the `unstack` class on the parent flex row. |
| + | /// @param {Mixed} $columns [null] - Width of the column. Refer to the `flex-grid-column()` function to see possible values. |
| + | /// @param {Number} $gutter [$grid-column-gutter] - Space between columns, added as a left and right padding. |
| + | @mixin flex-grid-column( |
| + | $columns: null, |
| + | $gutter: $grid-column-gutter |
| + | ) { |
| + | $gutter: rem-calc($gutter) / 2; |
| + | |
| + | flex: flex-grid-column($columns); |
| + | padding-left: $gutter; |
| + | padding-right: $gutter; |
| + | |
| + | // max-width fixes IE 10/11 not respecting the flex-basis property |
| + | @if $columns != null and $columns != shrink { |
| + | max-width: grid-column($columns); |
| + | } |
| + | } |
| + | |
| + | /// Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout. |
| + | /// @param {Number} $order [0] - Order number to apply. |
| + | @mixin flex-grid-order($order: 0) { |
| + | order: $order; |
| + | } |
| + | |
| + | @mixin foundation-flex-grid { |
| + | // Row |
| + | .row { |
| + | @include flex-grid-row; |
| + | |
| + | // Nesting behavior |
| + | & &, |
| + | .column-row & { |
| + | @include flex-grid-row(nest, $base: false); |
| + | } |
| + | } |
| + | |
| + | // Column |
| + | %flex-column { |
| + | @include flex-grid-column; |
| + | } |
| + | |
| + | .column, |
| + | .columns { |
| + | @extend %flex-column; |
| + | } |
| + | |
| + | // Sizing (percentage) |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @for $i from 1 through $grid-column-count { |
| + | .#{$size}-#{$i} { |
| + | flex: flex-grid-column($i); |
| + | max-width: grid-column($i); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Sizing (expand) |
| + | @each $size in $breakpoint-classes { |
| + | @if $size != small { |
| + | @include breakpoint($size) { |
| + | .#{$size}-expand { |
| + | flex: flex-grid-column(); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Sizing (shrink) |
| + | .shrink { |
| + | flex: flex-grid-column(shrink); |
| + | } |
| + | |
| + | // Auto-stacking/unstacking |
| + | @each $size in $breakpoint-classes { |
| + | @if $size != small { |
| + | .row.#{$size}-unstack { |
| + | .column { |
| + | flex: flex-grid-column(100%); |
| + | |
| + | @include breakpoint($size) { |
| + | flex: flex-grid-column(); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Source ordering |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @for $i from 1 through 6 { |
| + | .#{$size}-order-#{$i} { |
| + | @include flex-grid-order($i); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Horizontal alignment using justify-content |
| + | @each $hdir, $prop in ( |
| + | 'right': flex-end, |
| + | 'center': center, |
| + | 'justify': space-between, |
| + | 'spaced': space-around, |
| + | ) { |
| + | .row.align-#{$hdir} { |
| + | justify-content: $prop; |
| + | } |
| + | } |
| + | |
| + | // Horizontal alignment using align-items and align-self |
| + | @each $vdir, $prop in ( |
| + | 'top': flex-start, |
| + | 'bottom': flex-end, |
| + | 'middle': center, |
| + | 'stretch': stretch, |
| + | ) { |
| + | .row.align-#{$vdir} { |
| + | align-items: $prop; |
| + | } |
| + | |
| + | .column.align-#{$vdir} { |
| + | align-self: $prop; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/grid/_grid.scss
+33
-0
| @@ | @@ -0,0 +1,33 @@ |
| + | // 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. |
| + | /// @type Number |
| + | $grid-column-gutter: 30px !default; |
| + | |
| + | /// The highest number of `.x-up` classes available when using the block grid CSS. |
| + | /// @type Number |
| + | $block-grid-max: 6 !default; |
| + | |
| + | @import 'row'; |
| + | @import 'column'; |
| + | @import 'size'; |
| + | @import 'position'; |
| + | @import 'gutter'; |
| + | @import 'classes'; |
| + | @import 'layout'; |
| + | |
| + | @import 'flex-grid'; |
public/stylesheets/foundation6/grid/_gutter.scss
+31
-0
| @@ | @@ -0,0 +1,31 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group grid |
| + | //// |
| + | |
| + | /// Collapse the gutters on a column by removing the padding. |
| + | @mixin grid-column-collapse() { |
| + | padding-left: 0; |
| + | padding-right: 0; |
| + | } |
| + | |
| + | /// Un-collapse the gutters on a column by re-adding the padding. |
| + | @mixin grid-column-uncollapse() { |
| + | padding-left: $grid-column-gutter; |
| + | padding-right: $grid-column-gutter; |
| + | } |
| + | |
| + | /// Shorthand for `grid-column-collapse()`. |
| + | /// @alias grid-column-collapse |
| + | @mixin grid-col-collapse() { |
| + | @include grid-column-collapse; |
| + | } |
| + | |
| + | /// Shorthand for `grid-column-uncollapse()`. |
| + | /// @alias grid-column-uncollapse |
| + | @mixin grid-col-uncollapse() { |
| + | @include grid-column-uncollapse; |
| + | } |
public/stylesheets/foundation6/grid/_layout.scss
+32
-0
| @@ | @@ -0,0 +1,32 @@ |
| + | // 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, .columns'] - Selector(s) to use for child elements. |
| + | @mixin grid-layout( |
| + | $n, |
| + | $selector: '.column' |
| + | ) { |
| + | #{$selector} { |
| + | width: percentage(1/$n); |
| + | float: $global-left; |
| + | |
| + | &:nth-of-type(1n) { |
| + | clear: none; |
| + | } |
| + | |
| + | &:nth-of-type(#{$n}n+1) { |
| + | clear: both; |
| + | } |
| + | |
| + | &:last-child { |
| + | float: left; |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/grid/_position.scss
+71
-0
| @@ | @@ -0,0 +1,71 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group grid |
| + | //// |
| + | |
| + | /// Reposition a column. |
| + | /// @param {Number} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left. |
| + | @mixin grid-column-position($position) { |
| + | @if type-of($position) == 'number' { |
| + | $offset: percentage($position / $grid-column-count); |
| + | |
| + | position: relative; |
| + | #{$global-left}: $offset; |
| + | } |
| + | @else if $position == center { |
| + | float: none; |
| + | margin-left: auto; |
| + | margin-right: auto; |
| + | } |
| + | @else { |
| + | @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, or center.'; |
| + | } |
| + | } |
| + | |
| + | /// Reset a position definition. |
| + | @mixin grid-column-unposition() { |
| + | position: static; |
| + | margin-left: 0; |
| + | margin-right: 0; |
| + | } |
| + | |
| + | /// Offsets a column to the right by `$n` columns. |
| + | /// @param {Number|List} $n - Width to offset by. You can pass in any value accepted by the `grid-column()` mixin, such as `6`, `50%`, or `1 of 2`. |
| + | @mixin grid-column-offset($n) { |
| + | margin-#{$global-left}: grid-column($n); |
| + | } |
| + | |
| + | /// Disable the default behavior of the last column in a row aligning to the opposite edge. |
| + | @mixin grid-column-end() { |
| + | // This extra specificity is required for the property to be applied |
| + | &:last-child { |
| + | 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
+72
-0
| @@ | @@ -0,0 +1,72 @@ |
| + | // 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 {Booleam} $root [false] |
| + | /// If `false`, selectors inside this mixin will nest inside the parent selector. |
| + | /// If `tru`, 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: $columns; |
| + | $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 {Number} $width [$grid-row-width] - Maximum width of the row. |
| + | @mixin grid-row( |
| + | $columns: null, |
| + | $behavior: null, |
| + | $width: $grid-row-width, |
| + | $cf: true |
| + | ) { |
| + | $behavior: -zf-get-options($behavior, nest collapse); |
| + | $margin: auto; |
| + | |
| + | @if map-get($behavior, nest) { |
| + | $margin: rem-calc($grid-column-gutter) / 2 * -1; |
| + | |
| + | @if map-get($behavior, collapse) { |
| + | $margin: 0; |
| + | } |
| + | } |
| + | @else { |
| + | max-width: $width; |
| + | } |
| + | |
| + | @if $cf { |
| + | @include clearfix; |
| + | } |
| + | |
| + | margin-left: $margin; |
| + | margin-right: $margin; |
| + | |
| + | @if $columns != null { |
| + | @include grid-context($columns) { |
| + | @content; |
| + | } |
| + | } |
| + | } |
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/motion-ui.scss
+4
-0
| @@ | @@ -0,0 +1,4 @@ |
| + | @import "motion-ui/motion-ui"; |
| + | |
| + | @include motion-ui-transitions; |
| + | @include motion-ui-animations; |
public/stylesheets/foundation6/motion-ui/_classes.scss
+102
-0
| @@ | @@ -0,0 +1,102 @@ |
| + | // scss-lint:disable ImportantRule, SpaceAfterComma, SingleLinePerProperty |
| + | |
| + | %mui-defaults { |
| + | transition-duration: map-get($motion-ui-speeds, default); |
| + | transition-timing-function: map-get($motion-ui-easings, default); |
| + | } |
| + | |
| + | // Transitions |
| + | // - - - - - - - - - - - - - - - |
| + | @mixin motion-ui-transitions { |
| + | // Slide |
| + | .slide-in-down { @include mui-slide(in, down); } |
| + | .slide-in-left { @include mui-slide(in, right); } |
| + | .slide-in-up { @include mui-slide(in, bottom); } |
| + | .slide-in-right { @include mui-slide(in, left); } |
| + | .slide-out-down { @include mui-slide(out, bottom); } |
| + | .slide-out-right { @include mui-slide(out, right); } |
| + | .slide-out-up { @include mui-slide(out, top); } |
| + | .slide-out-left { @include mui-slide(out, left); } |
| + | |
| + | // Fade |
| + | .fade-in { @include mui-fade(in, 0, 1); } |
| + | .fade-out { @include mui-fade(out, 1, 0); } |
| + | |
| + | // Hinge |
| + | .hinge-in-from-top { @include mui-hinge(in, top); } |
| + | .hinge-in-from-right { @include mui-hinge(in, right); } |
| + | .hinge-in-from-bottom { @include mui-hinge(in, bottom); } |
| + | .hinge-in-from-left { @include mui-hinge(in, left); } |
| + | .hinge-in-from-middle-x { @include mui-hinge(in, top, center); } |
| + | .hinge-in-from-middle-y { @include mui-hinge(in, right, center); } |
| + | .hinge-out-from-top { @include mui-hinge(out, top); } |
| + | .hinge-out-from-right { @include mui-hinge(out, right); } |
| + | .hinge-out-from-bottom { @include mui-hinge(out, bottom); } |
| + | .hinge-out-from-left { @include mui-hinge(out, left); } |
| + | .hinge-out-from-middle-x { @include mui-hinge(out, top, center); } |
| + | .hinge-out-from-middle-y { @include mui-hinge(out, right, center); } |
| + | |
| + | // Scale |
| + | .scale-in-up { @include mui-zoom(in, 0.5, 1); } |
| + | .scale-in-down { @include mui-zoom(in, 1.5, 1); } |
| + | .scale-out-up { @include mui-zoom(out, 1, 1.5); } |
| + | .scale-out-down { @include mui-zoom(out, 1, 0.5); } |
| + | |
| + | // Spin |
| + | .spin-in { @include mui-spin(in, cw); } |
| + | .spin-out { @include mui-spin(out, cw); } |
| + | .spin-in-ccw { @include mui-spin(in, ccw); } |
| + | .spin-out-ccw { @include mui-spin(out, ccw); } |
| + | |
| + | // Transition Modifiers |
| + | // - - - - - - - - - - - - - - - |
| + | |
| + | @each $name, $value in $motion-ui-speeds { |
| + | @if $name != default { |
| + | .#{$name} { transition-duration: $value !important; } |
| + | } |
| + | } |
| + | |
| + | @each $name, $value in $motion-ui-easings { |
| + | @if $name != default { |
| + | .#{$name} { transition-timing-function: $value !important; } |
| + | } |
| + | } |
| + | |
| + | @each $name, $value in $motion-ui-delays { |
| + | @if $name != default { |
| + | .#{$name}-delay { transition-delay: $value !important; } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Animations |
| + | // - - - - - - - - - - - - - - - |
| + | @mixin motion-ui-animations { |
| + | .shake { @include mui-animation(shake); } |
| + | .spin-cw { @include mui-animation(spin); } |
| + | .spin-ccw { @include mui-animation(spin(ccw)); } |
| + | .wiggle { @include mui-animation(wiggle); } |
| + | |
| + | // Animation Modifiers |
| + | // - - - - - - - - - - - - - - - |
| + | .infinite { animation-iteration-count: infinite; } |
| + | |
| + | @each $name, $value in $motion-ui-speeds { |
| + | @if $name != default { |
| + | .#{$name} { animation-duration: $value !important; } |
| + | } |
| + | } |
| + | |
| + | @each $name, $value in $motion-ui-easings { |
| + | @if $name != default { |
| + | .#{$name} { animation-timing-function: $value !important; } |
| + | } |
| + | } |
| + | |
| + | @each $name, $value in $motion-ui-delays { |
| + | @if $name != default { |
| + | .#{$name}-delay { animation-delay: $value !important; } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/motion-ui/_settings.scss
+61
-0
| @@ | @@ -0,0 +1,61 @@ |
| + | /// Format for CSS classes created with Motion UI. |
| + | /// @type Map |
| + | /// @prop {Boolean} append [true] - Defines if selectors are chained to the selector (`.class.enter`), or appended as a new class (`.class-enter`). |
| + | /// @prop {String} prefix ['mui-'] - Prefix to add before the state of a class. Enter an empty string to use no prefix. |
| + | /// @prop {String} prefix ['-active'] - Suffix to add to the active state class. |
| + | $motion-ui-classes: ( |
| + | chain: true, |
| + | prefix: 'mui-', |
| + | active: '-active', |
| + | ) !default; |
| + | |
| + | /// State names to reference when writing motion classes. To use multiple class names for one state, enter a list of strings instead of one string. |
| + | /// @type Map |
| + | $motion-ui-states: ( |
| + | in: 'enter', |
| + | out: 'leave', |
| + | ) !default; |
| + | |
| + | /// Default speed that transitions and animations play at, along with values for modifier classes to change the speed. |
| + | /// @type Map |
| + | $motion-ui-speeds: ( |
| + | default: 500ms, |
| + | slow: 750ms, |
| + | fast: 250ms, |
| + | ) !default; |
| + | |
| + | /// Default delay to add before motion, along with values for modifier classes to change the delay. |
| + | /// @type Map |
| + | $motion-ui-delays: ( |
| + | default: 0, |
| + | short: 300ms, |
| + | long: 700ms, |
| + | ) !default; |
| + | |
| + | /// Default easing for transitions and animations, along with values for modifier classes to change the easing. |
| + | /// @type Map |
| + | $motion-ui-easings: ( |
| + | default: linear, |
| + | linear: linear, |
| + | ease: ease, |
| + | ease-in: ease-in, |
| + | ease-out: ease-out, |
| + | ease-in-out: ease-in-out, |
| + | bounce-in: cubic-bezier(0.485, 0.155, 0.24, 1.245), |
| + | bounce-out: cubic-bezier(0.485, 0.155, 0.515, 0.845), |
| + | bounce-in-out: cubic-bezier(0.76, -0.245, 0.24, 1.245), |
| + | ) !default; |
| + | |
| + | /// Miscellaneous settings related to Motion UI. |
| + | /// @type Map |
| + | /// @prop {Boolean} slide-and-fade [false] - Defines if slide motions should also fade in/out. |
| + | /// @prop {Boolean} slide-and-fade [true] - Defines if hinge motions should also fade in/out. |
| + | /// @prop {Boolean} slide-and-fade [true] - Defines if scale motions should also fade in/out. |
| + | /// @prop {Boolean} slide-and-fade [true] - Defines if spin motions should also fade in/out. |
| + | $motion-ui-settings: ( |
| + | slide-and-fade: false, |
| + | hinge-and-fade: true, |
| + | scale-and-fade: true, |
| + | spin-and-fade: true, |
| + | activate-queue-class: 'is-animating', |
| + | ) !default; |
public/stylesheets/foundation6/motion-ui/effects/_fade.scss
+29
-0
| @@ | @@ -0,0 +1,29 @@ |
| + | /// Creates a fading animation. |
| + | /// @param {Number} $from [0] - Opacity to start at. |
| + | /// @param {Number} $to [1] - Opacity to end at. |
| + | /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. |
| + | @function fade( |
| + | $from: 0, |
| + | $to: 1 |
| + | ) { |
| + | $type: type-of($from); |
| + | $keyframes: (); |
| + | |
| + | @if $type == 'string' { |
| + | @if $from == in { |
| + | $from: 0; |
| + | $to: 1; |
| + | } @else if $from == out { |
| + | $from: 1; |
| + | $to: 0; |
| + | } |
| + | } |
| + | |
| + | $keyframes: ( |
| + | name: 'fade-#{$from}-to-#{$to}', |
| + | 0: (opacity: $from), |
| + | 100: (opacity: $to), |
| + | ); |
| + | |
| + | @return $keyframes; |
| + | } |
public/stylesheets/foundation6/motion-ui/effects/_hinge.scss
+65
-0
| @@ | @@ -0,0 +1,65 @@ |
| + | /// Creates a hinge effect by rotating the element. |
| + | /// @param {Keyword} $state [in] - State to transition to. |
| + | /// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. |
| + | /// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`. |
| + | /// @param {Number} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. |
| + | /// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. |
| + | @function hinge ( |
| + | $state: in, |
| + | $from: left, |
| + | $axis: edge, |
| + | $perspective: 2000px, |
| + | $turn-origin: from-back |
| + | ) { |
| + | // Rotation directions when hinging from back vs. front |
| + | $rotation-amount: 90deg; |
| + | $rotations-back: ( |
| + | top: rotateX($rotation-amount * -1), |
| + | right: rotateY($rotation-amount * -1), |
| + | bottom: rotateX($rotation-amount), |
| + | left: rotateY($rotation-amount), |
| + | ); |
| + | $rotations-from: ( |
| + | top: rotateX($rotation-amount), |
| + | right: rotateY($rotation-amount), |
| + | bottom: rotateX($rotation-amount * -1), |
| + | left: rotateY($rotation-amount * -1), |
| + | ); |
| + | |
| + | // Rotation origin |
| + | $rotation: ''; |
| + | @if $turn-origin == from-front { |
| + | $rotation: map-get($rotations-from, $from); |
| + | } @else if $turn-origin == from-back { |
| + | $rotation: map-get($rotations-back, $from); |
| + | } @else { |
| + | @warn '$turn-origin must be either "from-back" or "from-front"'; |
| + | } |
| + | |
| + | // Start and end state |
| + | $start: ''; |
| + | $end: ''; |
| + | @if $state == in { |
| + | $start: perspective($perspective) $rotation; |
| + | $end: perspective($perspective) rotate(0deg); |
| + | } @else { |
| + | $start: perspective($perspective) rotate(0deg); |
| + | $end: perspective($perspective) $rotation; |
| + | } |
| + | |
| + | // Turn axis |
| + | $origin: ''; |
| + | @if $axis == edge { |
| + | $origin: $from; |
| + | } @else { |
| + | $origin: center; |
| + | } |
| + | |
| + | $keyframes: ( |
| + | name: 'hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}', |
| + | 0: (transform: $start, transform-origin: $origin), |
| + | 100: (transform: $end), |
| + | ); |
| + | |
| + | @return $keyframes; |
| + | } |
public/stylesheets/foundation6/motion-ui/effects/_shake.scss
+15
-0
| @@ | @@ -0,0 +1,15 @@ |
| + | /// Creates a shaking animation. |
| + | /// @param {Percentage} $intensity [7%] - Intensity of the shake, as a percentage value. |
| + | /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. |
| + | @function shake($intensity: 7%) { |
| + | $right: (0, 10, 20, 30, 40, 50, 60, 70, 80, 90); |
| + | $left: (5, 15, 25, 35, 45, 55, 65, 75, 85, 95); |
| + | |
| + | $keyframes: ( |
| + | name: 'shake-#{($intensity / 1%)}', |
| + | $right: (transform: translateX($intensity)), |
| + | $left: (transform: translateX(-$intensity)), |
| + | ); |
| + | |
| + | @return $keyframes; |
| + | } |
public/stylesheets/foundation6/motion-ui/effects/_slide.scss
+41
-0
| @@ | @@ -0,0 +1,41 @@ |
| + | /// Creates a sliding animation. |
| + | /// @param {Keyword} $state [in] - Whether to move to (`in`) or from (`out`) the element's default position. |
| + | /// @param {Keyword} $direction [up] - Direction to move. Can be `up`, `down`, `left`, or `right`. |
| + | /// @param {Number} $amount [100%] - Distance to move. Can be any CSS length unit. |
| + | /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. |
| + | @function slide( |
| + | $state: in, |
| + | $direction: up, |
| + | $amount: 100% |
| + | ) { |
| + | $from: $amount; |
| + | $to: 0; |
| + | $func: 'translateY'; |
| + | |
| + | @if $direction == left or $direction == right { |
| + | $func: 'translateX'; |
| + | } |
| + | |
| + | @if $state == out { |
| + | $from: 0; |
| + | $to: $amount; |
| + | } |
| + | |
| + | @if $direction == down or $direction == right { |
| + | @if $state == in { |
| + | $from: -$from; |
| + | } |
| + | } @else { |
| + | @if $state == out { |
| + | $to: -$to; |
| + | } |
| + | } |
| + | |
| + | $keyframes: ( |
| + | name: 'slide-#{$state}-#{$direction}-#{strip-unit($amount)}', |
| + | 0: (transform: '#{$func}(#{$from})'), |
| + | 100: (transform: '#{$func}(#{$to})'), |
| + | ); |
| + | |
| + | @return $keyframes; |
| + | } |
public/stylesheets/foundation6/motion-ui/effects/_spin.scss
+28
-0
| @@ | @@ -0,0 +1,28 @@ |
| + | /// Creates a spinning animation. |
| + | /// @param {Keyword} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). |
| + | /// @param {Number} $amount [360deg] - Amount to spin. Can be any CSS angle unit. |
| + | /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. |
| + | @function spin( |
| + | $state: in, |
| + | $direction: cw, |
| + | $amount: 1turn |
| + | ) { |
| + | $start: 0; |
| + | $end: 0; |
| + | |
| + | @if $state == in { |
| + | $start: if($direction == ccw, $amount, $amount * -1); |
| + | $end: 0; |
| + | } @else { |
| + | $start: 0; |
| + | $end: if($direction == ccw, $amount * -1, $amount); |
| + | } |
| + | |
| + | $keyframes: ( |
| + | name: 'spin-#{$direction}-#{$amount}', |
| + | 0: (transform: rotate($start)), |
| + | 100: (transform: rotate($end)), |
| + | ); |
| + | |
| + | @return $keyframes; |
| + | } |
public/stylesheets/foundation6/motion-ui/effects/_wiggle.scss
+13
-0
| @@ | @@ -0,0 +1,13 @@ |
| + | /// Creates a wiggling animation. |
| + | /// @param {Number} $intensity [7deg] - Intensity of the wiggle. Can be any CSS angle unit. |
| + | /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. |
| + | @function wiggle($intensity: 7deg) { |
| + | $keyframes: ( |
| + | name: 'wiggle-#{$intensity}', |
| + | (40, 50, 60): (transform: rotate($intensity)), |
| + | (35, 45, 55, 65): (transform: rotate(-$intensity)), |
| + | (0, 30, 70, 100): (transform: rotate(0)), |
| + | ); |
| + | |
| + | @return $keyframes; |
| + | } |
public/stylesheets/foundation6/motion-ui/effects/_zoom.scss
+15
-0
| @@ | @@ -0,0 +1,15 @@ |
| + | /// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller. |
| + | /// @param {Number} $from [1.5] - Size to start at. |
| + | /// @param {Number} $from [1] - Size to end at. |
| + | @function zoom( |
| + | $from: 0, |
| + | $to: 1 |
| + | ) { |
| + | $keyframes: ( |
| + | name: 'scale-#{$to}-to-#{$from}', |
| + | 0: (transform: scale($from)), |
| + | 100: (transform: scale($to)), |
| + | ); |
| + | |
| + | @return $keyframes; |
| + | } |
public/stylesheets/foundation6/motion-ui/motion-ui.scss
+29
-0
| @@ | @@ -0,0 +1,29 @@ |
| + | // Motion UI by ZURB |
| + | // foundation.zurb.com/motion-ui |
| + | // Licensed under MIT Open Source |
| + | |
| + | @import 'settings'; |
| + | |
| + | @import 'util/animation'; |
| + | @import 'util/args'; |
| + | @import 'util/keyframe'; |
| + | @import 'util/selector'; |
| + | @import 'util/series'; |
| + | @import 'util/transition'; |
| + | @import 'util/unit'; |
| + | |
| + | @import 'effects/fade'; |
| + | @import 'effects/hinge'; |
| + | @import 'effects/spin'; |
| + | @import 'effects/zoom'; |
| + | @import 'effects/shake'; |
| + | @import 'effects/slide'; |
| + | @import 'effects/wiggle'; |
| + | |
| + | @import 'transitions/fade'; |
| + | @import 'transitions/hinge'; |
| + | @import 'transitions/zoom'; |
| + | @import 'transitions/slide'; |
| + | @import 'transitions/spin'; |
| + | |
| + | @import 'classes'; |
public/stylesheets/foundation6/motion-ui/transitions/_fade.scss
+28
-0
| @@ | @@ -0,0 +1,28 @@ |
| + | /// Creates a fade transition by adjusting the opacity of the element. |
| + | /// @param {Keyword} $state [in] - State to transition to. |
| + | /// @param {Number} $from [0] - Opacity to start at. Must be a number between 0 and 1. |
| + | /// @param {Number} $to [1] - Opacity to end on. |
| + | /// @param {Keyword} $duration [null] - Length (speed) of the transition. |
| + | /// @param {Keyword|Function} $timing [null] - Easing of the transition. |
| + | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. |
| + | @mixin mui-fade( |
| + | $state: in, |
| + | $from: 0, |
| + | $to: 1, |
| + | $duration: null, |
| + | $timing: null, |
| + | $delay: null |
| + | ) { |
| + | $fade: fade($from, $to); |
| + | |
| + | @include transition-start($state) { |
| + | @include transition-basics($duration, $timing, $delay); |
| + | @include -mui-keyframe-get($fade, 0); |
| + | |
| + | transition-property: opacity; |
| + | } |
| + | |
| + | @include transition-end($state) { |
| + | @include -mui-keyframe-get($fade, 100); |
| + | } |
| + | } |
public/stylesheets/foundation6/motion-ui/transitions/_hinge.scss
+43
-0
| @@ | @@ -0,0 +1,43 @@ |
| + | /// Creates a hinge transition by rotating the element. |
| + | /// @param {Keyword} $state [in] - State to transition to. |
| + | /// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. |
| + | /// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`. |
| + | /// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. |
| + | /// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. |
| + | /// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously. |
| + | /// @param {Duration} $duration [null] - Length (speed) of the transition. |
| + | /// @param {Keyword|Function} $timing [null] - Easing of the transition. |
| + | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. |
| + | @mixin mui-hinge ( |
| + | $state: in, |
| + | $from: left, |
| + | $axis: edge, |
| + | $perspective: 2000px, |
| + | $turn-origin: from-back, |
| + | $fade: map-get($motion-ui-settings, hinge-and-fade), |
| + | $duration: null, |
| + | $timing: null, |
| + | $delay: null |
| + | ) { |
| + | $hinge: hinge($state, $from, $axis, $perspective, $turn-origin); |
| + | |
| + | @include transition-start($state) { |
| + | @include transition-basics($duration, $timing, $delay); |
| + | @include -mui-keyframe-get($hinge, 0); |
| + | |
| + | @if $fade { |
| + | transition-property: transform, opacity; |
| + | opacity: if($state == in, 0, 1); |
| + | } @else { |
| + | transition-property: transform, opacity; |
| + | } |
| + | } |
| + | |
| + | @include transition-end($state) { |
| + | @include -mui-keyframe-get($hinge, 100); |
| + | |
| + | @if $fade { |
| + | opacity: if($state == in, 1, 0); |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/motion-ui/transitions/_slide.scss
+42
-0
| @@ | @@ -0,0 +1,42 @@ |
| + | /// Creates a sliding transition by translating the element horizontally or vertically. |
| + | /// @param {Keyword} $state [in] - State to transition to. |
| + | /// @param {Keyword} $direction [left] - Side of the element to slide from. Can be `top`, `right`, `bottom`, or `left`. |
| + | /// @param {Length} $amount [100%] - Length of the slide as a percentage value. |
| + | /// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously. |
| + | /// @param {Duration} $duration [null] - Length (speed) of the transition. |
| + | /// @param {Keyword|Function} $timing [null] - Easing of the transition. |
| + | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. |
| + | @mixin mui-slide ( |
| + | $state: in, |
| + | $direction: left, |
| + | $amount: 100%, |
| + | $fade: map-get($motion-ui-settings, slide-and-fade), |
| + | $duration: null, |
| + | $timing: null, |
| + | $delay: null |
| + | ) { |
| + | $slide: slide($state, $direction, $amount); |
| + | |
| + | // CSS Output |
| + | @include transition-start($state) { |
| + | @include transition-basics($duration, $timing, $delay); |
| + | @include -mui-keyframe-get($slide, 0); |
| + | |
| + | @if $fade { |
| + | transition-property: transform, opacity; |
| + | opacity: if($state == in, 0, 1); |
| + | } @else { |
| + | transition-property: transform, opacity; |
| + | } |
| + | |
| + | backface-visibility: hidden; |
| + | } |
| + | |
| + | @include transition-end($state) { |
| + | @include -mui-keyframe-get($slide, 100); |
| + | |
| + | @if $fade { |
| + | opacity: if($state == in, 1, 0); |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/motion-ui/transitions/_spin.scss
+39
-0
| @@ | @@ -0,0 +1,39 @@ |
| + | /// Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin. |
| + | /// @param {Keyword} $state [in] - State to transition to. |
| + | /// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). |
| + | /// @param {Number} $amount [0.75turn] - Amount to element the element. |
| + | /// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously. |
| + | /// @param {Duration} $duration [null] - Length (speed) of the transition. |
| + | /// @param {Keyword|Function} $timing [null] - Easing of the transition. |
| + | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. |
| + | @mixin mui-spin( |
| + | $state: in, |
| + | $direction: cw, |
| + | $amount: 0.75turn, |
| + | $fade: map-get($motion-ui-settings, spin-and-fade), |
| + | $duration: null, |
| + | $timing: null, |
| + | $delay: null |
| + | ) { |
| + | $spin: spin($state, $direction, $amount); |
| + | |
| + | @include transition-start($state) { |
| + | @include transition-basics($duration, $timing, $delay); |
| + | @include -mui-keyframe-get($spin, 0); |
| + | |
| + | @if $fade { |
| + | transition-property: transform, opacity; |
| + | opacity: if($state == in, 0, 1); |
| + | } @else { |
| + | transition-property: transform, opacity; |
| + | } |
| + | } |
| + | |
| + | @include transition-end($state) { |
| + | @include -mui-keyframe-get($spin, 100); |
| + | |
| + | @if $fade { |
| + | opacity: if($state == in, 1, 0); |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/motion-ui/transitions/_zoom.scss
+39
-0
| @@ | @@ -0,0 +1,39 @@ |
| + | /// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller. |
| + | /// @param {Keyword} $state [in] - State to transition to. |
| + | /// @param {Number} $from [1.5] - Size to start at. |
| + | /// @param {Number} $from [1] - Size to end at. |
| + | /// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously. |
| + | /// @param {Duration} $duration [null] - Length (speed) of the transition. |
| + | /// @param {Keyword|Function} $timing [null] - Easing of the transition. |
| + | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. |
| + | @mixin mui-zoom( |
| + | $state: in, |
| + | $from: 1.5, |
| + | $to: 1, |
| + | $fade: map-get($motion-ui-settings, scale-and-fade), |
| + | $duration: null, |
| + | $timing: null, |
| + | $delay: null |
| + | ) { |
| + | $scale: zoom($from, $to); |
| + | |
| + | @include transition-start($state) { |
| + | @include transition-basics($duration, $timing, $delay); |
| + | @include -mui-keyframe-get($scale, 0); |
| + | |
| + | @if $fade { |
| + | transition-property: transform, opacity; |
| + | opacity: if($state == in, 0, 1); |
| + | } @else { |
| + | transition-property: transform, opacity; |
| + | } |
| + | } |
| + | |
| + | @include transition-end($state) { |
| + | @include -mui-keyframe-get($scale, 100); |
| + | |
| + | @if $fade { |
| + | opacity: if($state == in, 1, 0); |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/motion-ui/util/_animation.scss
+7
-0
| @@ | @@ -0,0 +1,7 @@ |
| + | /// Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property. |
| + | /// @param {Function} $effects... - One or more effect functions to build the keyframe with. |
| + | @mixin mui-animation($args...) { |
| + | $name: map-get(-mui-process-args($args...), name); |
| + | @include mui-keyframes($name, $args...); |
| + | animation-name: unquote($name); |
| + | } |
public/stylesheets/foundation6/motion-ui/util/_args.scss
+15
-0
| @@ | @@ -0,0 +1,15 @@ |
| + | /// Processes a series of keyframe function arguments. |
| + | /// @access private |
| + | @function -mui-process-args($args...) { |
| + | @if length($args) == 1 { |
| + | $arg: nth($args, 1); |
| + | |
| + | @if type-of($arg) == 'string' { |
| + | @return call($arg); |
| + | } @else if type-of($arg) == 'map' { |
| + | @return $arg; |
| + | } |
| + | } |
| + | |
| + | @return -mui-keyframe-combine($args...); |
| + | } |
public/stylesheets/foundation6/motion-ui/util/_keyframe.scss
+136
-0
| @@ | @@ -0,0 +1,136 @@ |
| + | // Internal counter for creating unique keyframe names |
| + | $-mui-custom: 0; |
| + | |
| + | /// Creates a keyframe from one or more effect functions. Use this function instead of `mui-animation` if you want to create a keyframe animation *without* automatically assigning it to the element. |
| + | /// @param {String} $name - Name of the keyframe. |
| + | /// @param {Function} $effects... - One or more effect functions to build the keyframe with. |
| + | @mixin mui-keyframes($name, $effects...) { |
| + | $obj: -mui-process-args($effects...); |
| + | $obj: map-remove($obj, name); |
| + | |
| + | @keyframes #{$name} { |
| + | // Now iterate through each keyframe percentage |
| + | @each $pct, $props in $obj { |
| + | #{-mui-keyframe-pct($pct)} { |
| + | // Lastly, iterate through each CSS property within a percentage and print it out |
| + | @each $prop, $value in $props { |
| + | #{$prop}: #{$value}; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Creates a string for a CSS keyframe, by converting a list of numbers to a comma-separated list of percentage values. |
| + | /// @param {Number|List} $input - List of numbers to use. |
| + | /// @return {String} A set of comma-separated percentage values. |
| + | /// @access private |
| + | @function -mui-keyframe-pct($input) { |
| + | $output: (); |
| + | |
| + | @if type-of($input) == 'number' { |
| + | $output: ($input * 1%); |
| + | } @else if type-of($input) == 'list' { |
| + | @each $i in $input { |
| + | $output: append($output, ($i * 1%), comma); |
| + | } |
| + | } |
| + | |
| + | @return $output; |
| + | } |
| + | |
| + | /// Prints the CSS properties from a specific key in a keyframes map. Used to borrow CSS from keyframe functions for use in transitions. |
| + | /// @param {Map} $kf - Keyframe map to extract from. |
| + | /// @param {Number} $key - Key in the map to print the CSS of. |
| + | /// @access private |
| + | @mixin -mui-keyframe-get($kf, $key) { |
| + | $map: map-get($kf, $key); |
| + | |
| + | @each $prop, $value in $map or () { |
| + | // Some keyframe maps store transforms as quoted strings |
| + | @if type-of($value) == 'string' { |
| + | $value: unquote($value); |
| + | } |
| + | #{$prop}: $value; |
| + | } |
| + | } |
| + | |
| + | /// Reformats a map containing keys with a list of values, so that each key is a single value. |
| + | /// @param {Map} $map - Map to split up. |
| + | /// @return {Map} A reformatted map. |
| + | /// @access private |
| + | @function -mui-keyframe-split($map) { |
| + | $new-map: (); |
| + | |
| + | // Split keys with multiple values into individual keys |
| + | @each $key, $item in $map { |
| + | $key-type: type-of($key); |
| + | |
| + | @if $key-type == 'number' { |
| + | $new-map: map-merge($new-map, ($key: $item)); |
| + | } @else if $key-type == 'list' { |
| + | @each $k in $key { |
| + | $new-map: map-merge($new-map, ($k: $item)); |
| + | } |
| + | } |
| + | } |
| + | |
| + | @return $new-map; |
| + | } |
| + | |
| + | /// Combines a series of keyframe objects into one. |
| + | /// @param {Map} $maps... - A series of maps to merge, as individual parameters. |
| + | /// @return {Map} A combined keyframe object. |
| + | /// @access private |
| + | @function -mui-keyframe-combine($maps...) { |
| + | $new-map: (); |
| + | |
| + | // Iterate through each map passed in |
| + | @each $map in $maps { |
| + | @if type-of($map) == 'string' { |
| + | $map: call($map); |
| + | } |
| + | |
| + | $map: -mui-keyframe-split($map); |
| + | |
| + | // Iterate through each keyframe in the map |
| + | // $key is the keyframe percentage |
| + | // $value is a map of CSS properties |
| + | @each $key, $value in $map { |
| + | $new-value: (); |
| + | |
| + | @if map-has-key($new-map, $key) { |
| + | // If the map already has the keyframe %, append the new property |
| + | $new-value: -mui-merge-properties(map-get($new-map, $key), $value); |
| + | } @else { |
| + | // Otherwise, create a new map with the new property |
| + | $new-value: $value; |
| + | } |
| + | |
| + | // Finally, merge the modified keyframe value into the output map |
| + | $new-map: map-merge($new-map, ($key: $new-value)); |
| + | } |
| + | } |
| + | |
| + | // Make a name for the keyframes |
| + | $-mui-custom: $-mui-custom + 1 !global; |
| + | $map-name: (name: 'custom-#{$-mui-custom}'); |
| + | $new-map: map-merge($new-map, $map-name); |
| + | |
| + | @return $new-map; |
| + | } |
| + | |
| + | /// Combines two maps of CSS properties into one map. If both maps have a transform property, the values from each will be combined into one property. |
| + | /// @param {Map} $one - First map to merge. |
| + | /// @param {Map} $two - Second map to merge. |
| + | /// @return {Map} A combined map. |
| + | /// @access private |
| + | @function -mui-merge-properties($one, $two) { |
| + | @if map-has-key($one, transform) and map-has-key($two, transform) { |
| + | $transform: join(map-get($one, transform), map-get($two, transform)); |
| + | $one: map-merge($one, (transform: $transform)); |
| + | $two: map-remove($two, transform); |
| + | } |
| + | |
| + | @return map-merge($one, $two); |
| + | } |
public/stylesheets/foundation6/motion-ui/util/_selector.scss
+23
-0
| @@ | @@ -0,0 +1,23 @@ |
| + | /// Builds a selector for a motion class, using the settings defined in the `$motion-ui-classes` and `$motion-ui-states` maps. |
| + | /// @param {String|List} $states - One or more strings that correlate to a state. |
| + | /// @param {Boolean} $active - Defines if the selector is for the setup or active class. |
| + | /// @return {String} A selector that can be interpolated into your Sass code. |
| + | /// @access private |
| + | @function -mui-build-selector($states, $active: false) { |
| + | $return: ''; |
| + | $chain: map-get($motion-ui-classes, chain); |
| + | $prefix: map-get($motion-ui-classes, prefix); |
| + | $suffix: map-get($motion-ui-classes, active); |
| + | |
| + | @each $sel in $states { |
| + | $return: $return + if($chain, '&.', '#{&}-') + $prefix + $sel; |
| + | |
| + | @if $active { |
| + | $return: $return + if($chain, '.', '#{&}-') + $prefix + $sel + $suffix; |
| + | } |
| + | |
| + | $return: $return + ', '; |
| + | } |
| + | |
| + | @return str-slice($return, 1, -3); |
| + | } |
public/stylesheets/foundation6/motion-ui/util/_series.scss
+54
-0
| @@ | @@ -0,0 +1,54 @@ |
| + | $-mui-queue: (); |
| + | |
| + | /// Pauses the animation on an element by default, and then plays it when an active class is added to a parent. Also sets the fill mode of the animation to `both`. This pauses the element at the first frame of the animation, and holds it in place at the end. |
| + | /// @access private |
| + | %animated-element { |
| + | animation-play-state: paused; |
| + | animation-fill-mode: both; |
| + | |
| + | .#{map-get($motion-ui-settings, activate-queue-class)} & { |
| + | animation-play-state: running; |
| + | } |
| + | } |
| + | |
| + | /// Creates a new animation queue. |
| + | /// @param {Duration} $delay [0s] - Delay in seconds or milliseconds to place at the front of the animation queue. |
| + | @mixin mui-series($delay: 0s) { |
| + | $-mui-queue: () !global; |
| + | |
| + | @if $delay > 0 { |
| + | $item: ($delay, 0s); |
| + | $-mui-queue: append($-mui-queue, $item) !global; |
| + | } |
| + | |
| + | @content; |
| + | } |
| + | |
| + | /// Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`. |
| + | /// @param {Duration} $duration [1s] - Length of the animation. |
| + | /// @param {Duration} $gap [0s] - Amount of time to pause before playing the animation after this one. Use a negative value to make the next effect overlap with the current one. |
| + | /// @param {Function} $keyframes... - One or more effect functions to build the keyframe with. |
| + | @mixin mui-queue( |
| + | $duration: 1s, |
| + | $gap: 0s, |
| + | $keyframes... |
| + | ) { |
| + | // Build the animation |
| + | $kf: -mui-process-args($keyframes...); |
| + | |
| + | // Calculate the delay for this animation based on how long the previous ones take |
| + | $actual-delay: 0s; |
| + | @each $anim in $-mui-queue { |
| + | $actual-delay: $actual-delay + nth($anim, 1) + nth($anim, 2); |
| + | } |
| + | |
| + | // Append this animation's length and gap to the end of the queue |
| + | $item: ($duration, $gap); |
| + | $-mui-queue: append($-mui-queue, $item) !global; |
| + | |
| + | // CSS output |
| + | @extend %animated-element; |
| + | @include mui-animation($kf); |
| + | animation-duration: $duration; |
| + | animation-delay: $actual-delay; |
| + | } |
public/stylesheets/foundation6/motion-ui/util/_transition.scss
+45
-0
| @@ | @@ -0,0 +1,45 @@ |
| + | /// Applies basic transition settings to an element. |
| + | /// @param {Duration} $duration [null] - Length (speed) of the transition. |
| + | /// @param {Keyword|Function} $timing [null] - Easing of the transition. |
| + | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. |
| + | @mixin transition-basics( |
| + | $duration: null, |
| + | $timing: null, |
| + | $delay: null |
| + | ) { |
| + | @extend %mui-defaults; |
| + | transition-duration: $duration; |
| + | transition-timing-function: $timing; |
| + | transition-delay: $delay; |
| + | } |
| + | |
| + | /// Wraps the content in the setup class for a transition. |
| + | /// @param {Keyword} $dir - State to setup for transition. |
| + | @mixin transition-start($dir) { |
| + | $selector: -mui-build-selector(map-get($motion-ui-states, $dir)); |
| + | |
| + | @at-root { |
| + | #{$selector} { |
| + | @content; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Wraps the content in the active class for a transition. |
| + | /// @param {Keyword} $dir - State to activate a transition on. |
| + | @mixin transition-end($dir) { |
| + | $selector: -mui-build-selector(map-get($motion-ui-states, $dir), true); |
| + | |
| + | @at-root { |
| + | #{$selector} { |
| + | @content; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// Adds styles for a stagger animation, which can be used with Angular's `ng-repeat`. |
| + | /// @param {Duration} $delay-amount - Amount of time in seconds or milliseconds to add between each item's animation. |
| + | @mixin stagger($delay-amount) { |
| + | transition-delay: $delay-amount; |
| + | transition-duration: 0; // Prevent accidental CSS inheritance |
| + | } |
public/stylesheets/foundation6/motion-ui/util/_unit.scss
+7
-0
| @@ | @@ -0,0 +1,7 @@ |
| + | /// Removes the unit (e.g. px, em, rem) from a value, returning the number only. |
| + | /// @param {Number} $num - Number to strip unit from. |
| + | /// @return {Number} The same number, sans unit. |
| + | /// @access private |
| + | @function strip-unit($num) { |
| + | @return $num / ($num * 0 + 1); |
| + | } |
public/stylesheets/foundation6/settings/_settings.scss
+531
-0
| @@ | @@ -0,0 +1,531 @@ |
| + | // Foundation for Sites Settings |
| + | // ----------------------------- |
| + | // |
| + | // Table of Contents: |
| + | // |
| + | // 1. Global |
| + | // 2. Breakpoints |
| + | // 3. The Grid |
| + | // 4. Base Typography |
| + | // 5. Typography Helpers |
| + | // 6. Abide |
| + | // 7. Accordion |
| + | // 8. Accordion Menu |
| + | // 9. Badge |
| + | // 10. Breadcrumbs |
| + | // 11. Button |
| + | // 12. Button Group |
| + | // 13. Callout |
| + | // 14. Close Button |
| + | // 15. Drilldown |
| + | // 16. Dropdown |
| + | // 17. Dropdown Menu |
| + | // 18. Flex Video |
| + | // 19. Forms |
| + | // 20. Label |
| + | // 21. Media Object |
| + | // 22. Menu |
| + | // 23. Off-canvas |
| + | // 24. Orbit |
| + | // 25. Pagination |
| + | // 26. Progress Bar |
| + | // 27. Reveal |
| + | // 28. Slider |
| + | // 29. Switch |
| + | // 30. Table |
| + | // 31. Tabs |
| + | // 32. Thumbnail |
| + | // 33. Tooltip |
| + | // 34. Top Bar |
| + | |
| + | @import 'util/util'; |
| + | |
| + | // 1. Global |
| + | // --------- |
| + | |
| + | $global-width: rem-calc(1200); |
| + | $global-font-size: 100%; |
| + | $global-lineheight: 1.5; |
| + | $primary-color: #2199e8; |
| + | $secondary-color: #777; |
| + | $success-color: #3adb76; |
| + | $warning-color: #ffae00; |
| + | $alert-color: #ec5840; |
| + | $light-gray: #e6e6e6; |
| + | $medium-gray: #cacaca; |
| + | $dark-gray: #8a8a8a; |
| + | $black: #0a0a0a; |
| + | $white: #fefefe; |
| + | $body-background: $white; |
| + | $body-font-color: $black; |
| + | $body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; |
| + | $body-antialiased: true; |
| + | $text-direction: ltr; |
| + | $global-margin: 1rem; |
| + | $global-padding: 1rem; |
| + | $global-margin: 1rem; |
| + | $global-weight-normal: normal; |
| + | $global-weight-bold: bold; |
| + | $global-radius: 0; |
| + | $global-namespace: false; |
| + | $global-text-direction: ltr; |
| + | $rem-base: 16px; |
| + | |
| + | // 2. Breakpoints |
| + | // -------------- |
| + | |
| + | $breakpoints: ( |
| + | small: 0, |
| + | medium: 640px, |
| + | large: 1024px, |
| + | xlarge: 1200px, |
| + | xxlarge: 1440px, |
| + | ); |
| + | $breakpoint-classes: (small medium large); |
| + | |
| + | // 3. The Grid |
| + | // ----------- |
| + | |
| + | $grid-row-width: $global-width; |
| + | $grid-column-count: 12; |
| + | $grid-column-gutter: 30px; |
| + | $block-grid-max: 6; |
| + | |
| + | // 4. Base Typography |
| + | // ------------------ |
| + | |
| + | $header-font-family: $body-font-family; |
| + | $header-font-weight: $global-weight-normal; |
| + | $header-font-style: normal; |
| + | $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; |
| + | $header-sizes: ( |
| + | small: ( |
| + | 'h1': 24, |
| + | 'h2': 20, |
| + | 'h3': 19, |
| + | 'h4': 18, |
| + | 'h5': 17, |
| + | 'h6': 16, |
| + | ), |
| + | medium: ( |
| + | 'h1': 48, |
| + | 'h2': 40, |
| + | 'h3': 31, |
| + | 'h4': 25, |
| + | 'h5': 20, |
| + | 'h6': 16, |
| + | ), |
| + | ); |
| + | $header-color: inherit; |
| + | $header-lineheight: 1.4; |
| + | $header-margin-bottom: 0.5rem; |
| + | $header-text-rendering: optimizeLegibility; |
| + | $small-font-size: 80%; |
| + | $header-small-font-color: $medium-gray; |
| + | $paragraph-lineheight: 1.6; |
| + | $paragraph-margin-bottom: 1rem; |
| + | $paragraph-text-rendering: optimizeLegibility; |
| + | $code-color: $black; |
| + | $code-font-family: $font-family-monospace; |
| + | $code-font-weight: $global-weight-normal; |
| + | $code-background: $light-gray; |
| + | $code-border: 1px solid $medium-gray; |
| + | $code-padding: rem-calc(2 5 1); |
| + | $anchor-color: $primary-color; |
| + | $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); |
| + | $anchor-text-decoration: none; |
| + | $anchor-text-decoration-hover: none; |
| + | $hr-width: $global-width; |
| + | $hr-border: 1px solid $medium-gray; |
| + | $hr-margin: rem-calc(20) auto; |
| + | $list-lineheight: $paragraph-lineheight; |
| + | $list-margin-bottom: $paragraph-margin-bottom; |
| + | $list-style-type: disc; |
| + | $list-style-position: outside; |
| + | $list-side-margin: 1.25rem; |
| + | $list-nested-side-margin: 1.25rem; |
| + | $defnlist-margin-bottom: 1rem; |
| + | $defnlist-term-weight: $global-weight-bold; |
| + | $defnlist-term-margin-bottom: 0.3rem; |
| + | $blockquote-color: $dark-gray; |
| + | $blockquote-padding: rem-calc(9 20 0 19); |
| + | $blockquote-border: 1px solid $medium-gray; |
| + | $cite-font-size: rem-calc(13); |
| + | $cite-color: $dark-gray; |
| + | $keystroke-font: $font-family-monospace; |
| + | $keystroke-color: $black; |
| + | $keystroke-background: $light-gray; |
| + | $keystroke-padding: rem-calc(2 4 0); |
| + | $keystroke-radius: $global-radius; |
| + | $abbr-underline: 1px dotted $black; |
| + | |
| + | // 5. Typography Helpers |
| + | // --------------------- |
| + | |
| + | $lead-font-size: $global-font-size * 1.25; |
| + | $lead-lineheight: 1.6; |
| + | $subheader-lineheight: 1.4; |
| + | $subheader-color: $dark-gray; |
| + | $subheader-font-weight: $global-weight-normal; |
| + | $subheader-margin-top: 0.2rem; |
| + | $subheader-margin-bottom: 0.5rem; |
| + | $stat-font-size: 2.5rem; |
| + | |
| + | // 6. Abide |
| + | // -------- |
| + | |
| + | $abide-inputs: true; |
| + | $abide-labels: true; |
| + | $input-background-invalid: $alert-color; |
| + | $form-label-color-invalid: $alert-color; |
| + | $input-error-color: $alert-color; |
| + | $input-error-font-size: rem-calc(12); |
| + | $input-error-font-weight: $global-weight-bold; |
| + | |
| + | // 7. Accordion |
| + | // ------------ |
| + | |
| + | $accordion-background: $white; |
| + | $accordion-plusminus: true; |
| + | $accordion-item-color: foreground($accordion-background, $primary-color); |
| + | $accordion-item-background-hover: $light-gray; |
| + | $accordion-item-padding: 1.25rem 1rem; |
| + | $accordion-content-background: $white; |
| + | $accordion-content-border: 1px solid $light-gray; |
| + | $accordion-content-color: foreground($accordion-background, $primary-color); |
| + | $accordion-content-padding: 1rem; |
| + | |
| + | // 8. Accordion Menu |
| + | // ----------------- |
| + | |
| + | $accordionmenu-arrows: true; |
| + | |
| + | // 9. Badge |
| + | // -------- |
| + | |
| + | $badge-background: $primary-color; |
| + | $badge-color: foreground($badge-background); |
| + | $badge-padding: 0.3em; |
| + | $badge-minwidth: 2.1em; |
| + | $badge-font-size: 0.6rem; |
| + | |
| + | // 10. Breadcrumbs |
| + | // --------------- |
| + | |
| + | $breadcrumbs-margin: 0 0 $global-margin 0; |
| + | $breadcrumbs-item-font-size: rem-calc(11); |
| + | $breadcrumbs-item-color: $primary-color; |
| + | $breadcrumbs-item-color-current: $black; |
| + | $breadcrumbs-item-color-disabled: $medium-gray; |
| + | $breadcrumbs-item-margin: 0.75rem; |
| + | $breadcrumbs-item-uppercase: true; |
| + | $breadcrumbs-item-slash: true; |
| + | |
| + | // 11. Button |
| + | // ---------- |
| + | |
| + | $button-padding: 0.85em 1em; |
| + | $button-margin: 0 $global-margin $global-margin 0; |
| + | $button-fill: solid; |
| + | $button-background: $primary-color; |
| + | $button-background-hover: scale-color($button-background, $lightness: -15%); |
| + | $button-color: #fff; |
| + | $button-color-alt: #000; |
| + | $button-radius: $global-radius; |
| + | $button-sizes: ( |
| + | tiny: 0.6rem, |
| + | small: 0.75rem, |
| + | default: 0.9rem, |
| + | large: 1.25rem, |
| + | ); |
| + | $button-opacity-disabled: 0.25; |
| + | |
| + | // 12. Button Group |
| + | // ---------------- |
| + | |
| + | $buttongroup-margin: 1rem; |
| + | $buttongroup-spacing: 1px; |
| + | $buttongroup-child-selector: '.button'; |
| + | $buttongroup-expand-max: 6; |
| + | |
| + | // 13. Callout |
| + | // ----------- |
| + | |
| + | $callout-background: $white; |
| + | $callout-background-fade: 85%; |
| + | $callout-border: 1px solid rgba($black, 0.25); |
| + | $callout-margin: 0 0 1rem 0; |
| + | $callout-padding: 1rem; |
| + | $callout-font-color: $body-font-color; |
| + | $callout-font-color-alt: $body-background; |
| + | $callout-radius: $global-radius; |
| + | $callout-link-tint: 30%; |
| + | |
| + | // 14. Close Button |
| + | // ---------------- |
| + | |
| + | $closebutton-position: right top; |
| + | $closebutton-offset-horizontal: 1rem; |
| + | $closebutton-offset-vertical: 0.5rem; |
| + | $closebutton-size: 2em; |
| + | $closebutton-lineheight: 1; |
| + | $closebutton-color: $dark-gray; |
| + | $closebutton-color-hover: $black; |
| + | |
| + | // 15. Drilldown |
| + | // ------------- |
| + | |
| + | $drilldown-transition: transform 0.15s linear; |
| + | $drilldown-arrows: true; |
| + | |
| + | // 16. Dropdown |
| + | // ------------ |
| + | |
| + | $dropdown-padding: 1rem; |
| + | $dropdown-border: 1px solid $medium-gray; |
| + | $dropdown-font-size: 16rem; |
| + | $dropdown-width: 300px; |
| + | $dropdown-radius: $global-radius; |
| + | $dropdown-sizes: ( |
| + | tiny: 100px, |
| + | small: 200px, |
| + | large: 400px, |
| + | ); |
| + | |
| + | // 17. Dropdown Menu |
| + | // ----------------- |
| + | |
| + | $dropdownmenu-arrows: true; |
| + | $dropdownmenu-min-width: 200px; |
| + | $dropdownmenu-background: $white; |
| + | $dropdown-border: 1px solid $medium-gray; |
| + | |
| + | // 18. Flex Video |
| + | // -------------- |
| + | |
| + | $flexvideo-padding-top: rem-calc(25); |
| + | $flexvideo-margin-bottom: rem-calc(16); |
| + | $flexvideo-ratio: 4 by 3; |
| + | $flexvideo-ratio-widescreen: 16 by 9; |
| + | |
| + | // 19. Forms |
| + | // --------- |
| + | |
| + | $fieldset-border: 1px solid $medium-gray; |
| + | $fieldset-padding: rem-calc(20); |
| + | $fieldset-margin: rem-calc(18 0); |
| + | $legend-padding: rem-calc(0 3); |
| + | $form-spacing: rem-calc(16); |
| + | $helptext-color: #333; |
| + | $helptext-font-size: rem-calc(13); |
| + | $helptext-font-style: italic; |
| + | $input-prefix-color: $black; |
| + | $input-prefix-background: $light-gray; |
| + | $input-prefix-border: 1px solid $medium-gray; |
| + | $input-prefix-padding: 1rem; |
| + | $form-label-color: $black; |
| + | $form-label-font-size: rem-calc(14); |
| + | $form-label-font-weight: $global-weight-normal; |
| + | $form-label-line-height: 1.8; |
| + | $select-background: #fafafa; |
| + | $select-triangle-color: #333; |
| + | $select-radius: $global-radius; |
| + | $input-color: $dark-gray; |
| + | $input-font-family: inherit; |
| + | $input-font-size: rem-calc(16); |
| + | $input-background: $white; |
| + | $input-background-focus: $white; |
| + | $input-background-disabled: $light-gray; |
| + | $input-border: 1px solid $medium-gray; |
| + | $input-border-focus: 1px solid $dark-gray; |
| + | $input-shadow: inset 0 1px 2px rgba($black, 0.1); |
| + | $input-shadow-focus: 0 0 5px $medium-gray; |
| + | $input-cursor-disabled: default; |
| + | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; |
| + | $input-number-spinners: true; |
| + | $input-radius: $global-radius; |
| + | |
| + | // 20. Label |
| + | // --------- |
| + | |
| + | $label-background: $primary-color; |
| + | $label-color: foreground($label-background); |
| + | $label-font-size: 0.8rem; |
| + | $label-padding: 0.33333rem 0.5rem; |
| + | $label-radius: $global-radius; |
| + | |
| + | // 21. Media Object |
| + | // ---------------- |
| + | |
| + | $mediaobject-margin-bottom: $global-margin; |
| + | $mediaobject-section-padding: $global-padding; |
| + | $mediaobject-image-width-stacked: 100%; |
| + | |
| + | // 22. Menu |
| + | // -------- |
| + | |
| + | $menu-margin: 0; |
| + | $menu-margin-nested: 1rem; |
| + | $menu-item-padding: 0.7rem 1rem; |
| + | $menu-icon-spacing: 0.25rem; |
| + | $menu-expand-max: 6; |
| + | |
| + | // 23. Off-canvas |
| + | // -------------- |
| + | |
| + | $offcanvas-size: 250px; |
| + | $offcanvas-background: $light-gray; |
| + | $offcanvas-zindex: -1; |
| + | $offcanvas-transition-length: 0.5s; |
| + | $offcanvas-transition-timing: ease; |
| + | $offcanvas-exit-background: rgba($white, 0.25); |
| + | $maincontent-class: 'off-canvas-content'; |
| + | $maincontent-shadow: 0 0 10px rgba($black, 0.5); |
| + | |
| + | // 24. Orbit |
| + | // --------- |
| + | |
| + | $orbit-bullet-background: $medium-gray; |
| + | $orbit-bullet-background-active: $dark-gray; |
| + | $orbit-bullet-diameter: 1.2rem; |
| + | $orbit-bullet-margin: 0.1rem; |
| + | $orbit-bullet-margin-top: 0.8rem; |
| + | $orbit-bullet-margin-bottom: 0.8rem; |
| + | $orbit-caption-background: rgba($black, 0.5); |
| + | $orbit-caption-padding: 1rem; |
| + | $orbit-control-background-hover: rgba($black, 0.5); |
| + | $orbit-control-padding: 1rem; |
| + | $orbit-control-zindex: 10; |
| + | |
| + | // 25. Pagination |
| + | // -------------- |
| + | |
| + | $pagination-font-size: rem-calc(14); |
| + | $pagination-margin-bottom: $global-margin; |
| + | $pagination-item-color: $black; |
| + | $pagination-item-padding: rem-calc(3 10); |
| + | $pagination-item-spacing: rem-calc(1); |
| + | $pagination-radius: $global-radius; |
| + | $pagination-item-background-hover: $light-gray; |
| + | $pagination-item-background-current: $primary-color; |
| + | $pagination-item-color-current: foreground($pagination-item-background-current); |
| + | $pagination-item-color-disabled: $medium-gray; |
| + | $pagination-ellipsis-color: $black; |
| + | $pagination-mobile-items: false; |
| + | $pagination-arrows: true; |
| + | |
| + | // 26. Progress Bar |
| + | // ---------------- |
| + | |
| + | $progress-height: 1rem; |
| + | $progress-background: $medium-gray; |
| + | $progress-margin-bottom: $global-margin; |
| + | $progress-meter-background: $primary-color; |
| + | $progress-radius: $global-radius; |
| + | |
| + | // 27. Reveal |
| + | // ---------- |
| + | |
| + | $reveal-background: $white; |
| + | $reveal-width: 600px; |
| + | $reveal-max-width: $global-width; |
| + | $reveal-offset: rem-calc(100); |
| + | $reveal-padding: $global-padding; |
| + | $reveal-border: 1px solid $medium-gray; |
| + | $reveal-radius: $global-radius; |
| + | $reveal-zindex: 1005; |
| + | $reveal-overlay-background: rgba($black, 0.45); |
| + | |
| + | // 28. Slider |
| + | // ---------- |
| + | |
| + | $slider-height: 0.5rem; |
| + | $slider-width-vertical: $slider-height; |
| + | $slider-background: $light-gray; |
| + | $slider-fill-background: $medium-gray; |
| + | $slider-handle-height: 1.4rem; |
| + | $slider-handle-width: 1.4rem; |
| + | $slider-handle-background: $primary-color; |
| + | $slider-opacity-disabled: 0.25; |
| + | $slider-radius: $global-radius; |
| + | $slider-transition: all 0.2s ease-in-out; |
| + | |
| + | // 29. Switch |
| + | // ---------- |
| + | |
| + | $switch-background: $medium-gray; |
| + | $switch-background-active: $primary-color; |
| + | $switch-height: 2rem; |
| + | $switch-height-tiny: 1.5rem; |
| + | $switch-height-small: 1.75rem; |
| + | $switch-height-large: 2.5rem; |
| + | $switch-radius: $global-radius; |
| + | $switch-margin: $global-margin; |
| + | $switch-paddle-background: $white; |
| + | $switch-paddle-offset: 0.25rem; |
| + | $switch-paddle-radius: $global-radius; |
| + | $switch-paddle-transition: all 0.25s ease-out; |
| + | |
| + | // 30. Table |
| + | // --------- |
| + | |
| + | $table-background: $white; |
| + | $table-color-scale: 5%; |
| + | $table-border: 1px solid smart-scale($table-background, $table-color-scale); |
| + | $table-padding: rem-calc(8 10 10); |
| + | $table-hover-scale: 2%; |
| + | $table-row-hover: darken($table-background, $table-hover-scale); |
| + | $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); |
| + | $table-striped-background: smart-scale($table-background, $table-color-scale); |
| + | $table-stripe: even; |
| + | $table-head-background: smart-scale($table-background, $table-color-scale / 2); |
| + | $table-foot-background: smart-scale($table-background, $table-color-scale); |
| + | $table-head-font-color: $body-font-color; |
| + | $show-header-for-stacked: false; |
| + | |
| + | // 31. Tabs |
| + | // -------- |
| + | |
| + | $tab-margin: 0; |
| + | $tab-background: $white; |
| + | $tab-background-active: $light-gray; |
| + | $tab-border: $light-gray; |
| + | $tab-item-color: foreground($tab-background, $primary-color); |
| + | $tab-item-background-hover: $white; |
| + | $tab-item-padding: 1.25rem 1.5rem; |
| + | $tab-expand-max: 6; |
| + | $tab-content-background: $white; |
| + | $tab-content-border: $light-gray; |
| + | $tab-content-color: foreground($tab-background, $primary-color); |
| + | $tab-content-padding: 1rem; |
| + | |
| + | // 32. Thumbnail |
| + | // ------------- |
| + | |
| + | $thumbnail-border: solid 4px $white; |
| + | $thumbnail-margin-bottom: $global-margin; |
| + | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); |
| + | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); |
| + | $thumbnail-transition: box-shadow 200ms ease-out; |
| + | $thumbnail-radius: $global-radius; |
| + | |
| + | // 33. Tooltip |
| + | // ----------- |
| + | |
| + | $tooltip-background-color: $black; |
| + | $tooltip-color: $white; |
| + | $tooltip-padding: 0.75rem; |
| + | $tooltip-font-size: $small-font-size; |
| + | $tooltip-pip-width: 0.75rem; |
| + | $tooltip-pip-height: $tooltip-pip-width * 0.866; |
| + | $tooltip-pip-offset: 1.25rem; |
| + | $tooltip-radius: $global-radius; |
| + | |
| + | // 34. Top Bar |
| + | // ----------- |
| + | |
| + | $topbar-padding: 0.5rem; |
| + | $topbar-background: #eee; |
| + | $topbar-link-color: #fff; |
| + | $topbar-input-width: 200px; |
| + | |
public/stylesheets/foundation6/typography/_alignment.scss
+21
-0
| @@ | @@ -0,0 +1,21 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | @mixin foundation-text-alignment { |
| + | @each $align in (left, right, center, justify) { |
| + | .text-#{$align} { |
| + | text-align: $align; |
| + | } |
| + | |
| + | @each $size in $breakpoint-classes { |
| + | @include breakpoint($size) { |
| + | @if $size != 'small' { |
| + | .#{$size}-text-#{$align} { |
| + | text-align: $align; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
public/stylesheets/foundation6/typography/_base.scss
+436
-0
| @@ | @@ -0,0 +1,436 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group typography-base |
| + | //// |
| + | |
| + | // Base Typography |
| + | // - - - - - - - - - - - - - - - |
| + | // These are styles applied to basic HTML tags, including: |
| + | // - Paragraphs <p> |
| + | // - Bold/italics <b> <strong> <i> <em> |
| + | // - Small text <small> |
| + | // - Headings <h1>—<h6> |
| + | // - Anchors <a> |
| + | // - Dividers <hr> |
| + | // - Lists <ul> <ol> <dl> |
| + | // - Blockquotes <blockquote> |
| + | // - Code blocks <code> |
| + | // - Abbreviations <abbr> |
| + | // - Citations <cite> |
| + | // - Keystrokes <kbd> |
| + | |
| + | /// Font family for header elements. |
| + | /// @type String | List |
| + | $header-font-family: $body-font-family !default; |
| + | |
| + | /// Font weight of headers. |
| + | /// @type String |
| + | $header-font-weight: $global-weight-normal !default; |
| + | |
| + | /// Font style (e.g. italicized) of headers. |
| + | /// @type String |
| + | $header-font-style: normal !default; |
| + | |
| + | /// Font stack used for elements that use monospaced type, such as code samples |
| + | /// @type String | List |
| + | $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace !default; |
| + | |
| + | /// Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes. |
| + | /// @type Map |
| + | $header-sizes: ( |
| + | small: ( |
| + | 'h1': 24, |
| + | 'h2': 20, |
| + | 'h3': 19, |
| + | 'h4': 18, |
| + | 'h5': 17, |
| + | 'h6': 16, |
| + | ), |
| + | medium: ( |
| + | 'h1': 48, |
| + | 'h2': 40, |
| + | 'h3': 31, |
| + | 'h4': 25, |
| + | 'h5': 20, |
| + | 'h6': 16, |
| + | ), |
| + | ) !default; |
| + | |
| + | /// Color of headers. |
| + | /// @type Color |
| + | $header-color: inherit !default; |
| + | |
| + | /// Line height of headers. |
| + | /// @type Number |
| + | $header-lineheight: 1.4 !default; |
| + | |
| + | /// Bottom margin of headers. |
| + | /// @type Number |
| + | $header-margin-bottom: 0.5rem !default; |
| + | |
| + | /// Text rendering method of headers. |
| + | /// @type String |
| + | $header-text-rendering: optimizeLegibility !default; |
| + | |
| + | /// Font size of `<small>` elements. |
| + | /// @type Number |
| + | $small-font-size: 80% !default; |
| + | |
| + | /// Color of `<small>` elements when placed inside headers. |
| + | /// @type Color |
| + | $header-small-font-color: $medium-gray !default; |
| + | |
| + | /// Line height of text inside `<p>` elements. |
| + | /// @type Number |
| + | $paragraph-lineheight: 1.6 !default; |
| + | |
| + | /// Bottom margin of paragraphs. |
| + | /// @type Number |
| + | $paragraph-margin-bottom: 1rem !default; |
| + | |
| + | /// Text rendering method for paragraph text. |
| + | /// @type String |
| + | $paragraph-text-rendering: optimizeLegibility !default; |
| + | |
| + | /// Text color of code samples. |
| + | /// @type Color |
| + | $code-color: $black !default; |
| + | |
| + | /// Font family of code samples. |
| + | /// @type String | List |
| + | $code-font-family: $font-family-monospace !default; |
| + | |
| + | /// Font weight of text in code samples. |
| + | /// @type String |
| + | $code-font-weight: $global-weight-normal !default; |
| + | |
| + | /// Background color of code samples. |
| + | /// @type Color |
| + | $code-background: $light-gray !default; |
| + | |
| + | /// Border around code samples. |
| + | /// @type List |
| + | $code-border: 1px solid $medium-gray !default; |
| + | |
| + | /// Padding around text of code samples. |
| + | /// @type Number | List |
| + | $code-padding: rem-calc(2 5 1) !default; |
| + | |
| + | /// Default color for links. |
| + | /// @type Color |
| + | $anchor-color: $primary-color !default; |
| + | |
| + | /// Default color for links on hover. |
| + | /// @type Color |
| + | $anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default; |
| + | |
| + | /// Default text deocration for links. |
| + | /// @type String |
| + | $anchor-text-decoration: none !default; |
| + | |
| + | /// Default text decoration for links on hover. |
| + | /// @type String |
| + | $anchor-text-decoration-hover: none !default; |
| + | |
| + | /// Maximum width of a divider. |
| + | /// @type Number |
| + | $hr-width: $global-width !default; |
| + | |
| + | /// Default border for a divider. |
| + | /// @type List |
| + | $hr-border: 1px solid $medium-gray !default; |
| + | |
| + | /// Default margin for a divider. |
| + | /// @type Number | List |
| + | $hr-margin: rem-calc(20) auto !default; |
| + | |
| + | /// Line height for items in a list. |
| + | /// @type Number |
| + | $list-lineheight: $paragraph-lineheight !default; |
| + | |
| + | /// Bottom margin for items in a list. |
| + | /// @type Number |
| + | $list-margin-bottom: $paragraph-margin-bottom !default; |
| + | |
| + | /// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`). |
| + | /// @type String |
| + | $list-style-type: disc !default; |
| + | |
| + | /// Positioning for bullets on unordered list items. |
| + | /// @type String |
| + | $list-style-position: outside !default; |
| + | |
| + | /// Left (or right) margin for lists. |
| + | /// @type Number |
| + | $list-side-margin: 1.25rem !default; |
| + | |
| + | /// Left (or right) margin for a list inside a list. |
| + | /// @type Number |
| + | $list-nested-side-margin: 1.25rem !default; |
| + | |
| + | /// Bottom margin for `<dl>` elements. |
| + | /// @type Number |
| + | $defnlist-margin-bottom: 1rem !default; |
| + | |
| + | /// Font weight for `<dt>` elements. |
| + | /// @type String |
| + | $defnlist-term-weight: $global-weight-bold !default; |
| + | |
| + | /// Spacing between `<dt>` and `<dd>` elements. |
| + | /// @type Number |
| + | $defnlist-term-margin-bottom: 0.3rem !default; |
| + | |
| + | /// Text color of `<blockquote>` elements. |
| + | /// @type Color |
| + | $blockquote-color: $dark-gray !default; |
| + | |
| + | /// Padding inside a `<blockquote>` element. |
| + | /// @type Number | List |
| + | $blockquote-padding: rem-calc(9 20 0 19) !default; |
| + | |
| + | /// Side border for `<blockquote>` elements. |
| + | /// @type List |
| + | $blockquote-border: 1px solid $medium-gray !default; |
| + | |
| + | /// Font size for `<cite>` elements. |
| + | /// @type Number |
| + | $cite-font-size: rem-calc(13) !default; |
| + | |
| + | /// Text color for `<cite>` elements. |
| + | /// @type Color |
| + | $cite-color: $dark-gray !default; |
| + | |
| + | /// Font family for `<kbd>` elements. |
| + | /// @type String | List |
| + | $keystroke-font: $font-family-monospace !default; |
| + | |
| + | /// Text color for `<kbd>` elements. |
| + | /// @type Color |
| + | $keystroke-color: $black !default; |
| + | |
| + | /// Background color for `<kbd>` elements. |
| + | /// @type Color |
| + | $keystroke-background: $light-gray !default; |
| + | |
| + | /// Padding for `<kbd>` elements. |
| + | /// @type Number | List |
| + | $keystroke-padding: rem-calc(2 4 0) !default; |
| + | |
| + | /// Border radius for `<kbd>` elements. |
| + | /// @type Number | List |
| + | $keystroke-radius: $global-radius !default; |
| + | |
| + | /// Bottom border style for `<abbr>` elements. |
| + | /// @type List |
| + | $abbr-underline: 1px dotted $black !default; |
| + | |
| + | @mixin foundation-typography-base { |
| + | // Typography resets |
| + | div, |
| + | dl, |
| + | dt, |
| + | dd, |
| + | ul, |
| + | ol, |
| + | li, |
| + | h1, |
| + | h2, |
| + | h3, |
| + | h4, |
| + | h5, |
| + | h6, |
| + | pre, |
| + | form, |
| + | p, |
| + | blockquote, |
| + | th, |
| + | td { |
| + | margin: 0; |
| + | padding: 0; |
| + | } |
| + | |
| + | // Paragraphs |
| + | p { |
| + | font-size: inherit; |
| + | line-height: $paragraph-lineheight; |
| + | margin-bottom: $paragraph-margin-bottom; |
| + | text-rendering: $paragraph-text-rendering; |
| + | } |
| + | |
| + | // Emphasized text |
| + | em, |
| + | i { |
| + | font-style: italic; |
| + | line-height: inherit; |
| + | } |
| + | |
| + | // Strong text |
| + | strong, |
| + | b { |
| + | font-weight: $global-weight-bold; |
| + | line-height: inherit; |
| + | } |
| + | |
| + | // Small text |
| + | small { |
| + | font-size: $small-font-size; |
| + | line-height: inherit; |
| + | } |
| + | |
| + | // Headings |
| + | h1, |
| + | h2, |
| + | h3, |
| + | h4, |
| + | h5, |
| + | h6 { |
| + | font-family: $header-font-family; |
| + | font-weight: $header-font-weight; |
| + | font-style: $header-font-style; |
| + | color: $header-color; |
| + | text-rendering: $header-text-rendering; |
| + | margin-top: 0; |
| + | margin-bottom: $header-margin-bottom; |
| + | line-height: $header-lineheight; |
| + | |
| + | small { |
| + | color: $header-small-font-color; |
| + | line-height: 0; |
| + | } |
| + | } |
| + | |
| + | // Heading sizes |
| + | @each $size, $headers in $header-sizes { |
| + | @include breakpoint($size) { |
| + | @each $header, $font-size in $headers { |
| + | #{$header} { font-size: rem-calc($font-size); } |
| + | } |
| + | } |
| + | } |
| + | |
| + | // Links |
| + | a { |
| + | color: $anchor-color; |
| + | text-decoration: $anchor-text-decoration; |
| + | line-height: inherit; |
| + | cursor: pointer; |
| + | |
| + | &:hover, |
| + | &:focus { |
| + | color: $anchor-color-hover; |
| + | @if $anchor-text-decoration-hover != $anchor-text-decoration { |
| + | text-decoration: $anchor-text-decoration-hover; |
| + | } |
| + | } |
| + | |
| + | img { |
| + | border: 0; |
| + | } |
| + | } |
| + | |
| + | // Horizontal rule |
| + | hr { |
| + | max-width: $hr-width; |
| + | height: 0; |
| + | border-top: 0; |
| + | border-bottom: $hr-border; |
| + | margin: $hr-margin; |
| + | clear: both; |
| + | } |
| + | |
| + | // Lists |
| + | ul, |
| + | ol, |
| + | dl { |
| + | line-height: $list-lineheight; |
| + | margin-bottom: $list-margin-bottom; |
| + | list-style-position: $list-style-position; |
| + | } |
| + | |
| + | // List items |
| + | li { |
| + | font-size: inherit; |
| + | } |
| + | |
| + | // Unordered lists |
| + | ul { |
| + | list-style-type: $list-style-type; |
| + | margin-#{$global-left}: $list-side-margin; |
| + | } |
| + | |
| + | // Ordered lists |
| + | ol { |
| + | margin-#{$global-left}: $list-side-margin; |
| + | } |
| + | |
| + | // Nested unordered/ordered lists |
| + | ul, ol { |
| + | & & { |
| + | margin-#{$global-left}: $list-nested-side-margin; |
| + | margin-bottom: 0; |
| + | list-style-type: inherit; |
| + | } |
| + | } |
| + | |
| + | // Definition lists |
| + | dl { |
| + | margin-bottom: $defnlist-margin-bottom; |
| + | |
| + | dt { |
| + | margin-bottom: $defnlist-term-margin-bottom; |
| + | font-weight: $defnlist-term-weight; |
| + | } |
| + | } |
| + | |
| + | // Blockquotes |
| + | blockquote { |
| + | margin: 0 0 $paragraph-margin-bottom; |
| + | padding: $blockquote-padding; |
| + | border-#{$global-left}: $blockquote-border; |
| + | |
| + | &, p { |
| + | line-height: $paragraph-lineheight; |
| + | color: $blockquote-color; |
| + | } |
| + | } |
| + | |
| + | // Citations |
| + | cite { |
| + | display: block; |
| + | font-size: $cite-font-size; |
| + | color: $cite-color; |
| + | |
| + | &:before { |
| + | content: '\2014 \0020'; |
| + | } |
| + | } |
| + | |
| + | // Abbreviations |
| + | abbr { |
| + | color: $body-font-color; |
| + | cursor: help; |
| + | border-bottom: $abbr-underline; |
| + | } |
| + | |
| + | // Code |
| + | code { |
| + | font-family: $code-font-family; |
| + | font-weight: $code-font-weight; |
| + | color: $code-color; |
| + | background-color: $code-background; |
| + | border: $code-border; |
| + | padding: $code-padding; |
| + | } |
| + | |
| + | // Keystrokes |
| + | kbd { |
| + | padding: $keystroke-padding; |
| + | margin: 0; |
| + | background-color: $keystroke-background; |
| + | color: $keystroke-color; |
| + | font-family: $keystroke-font; |
| + | } |
| + | } |
public/stylesheets/foundation6/typography/_helpers.scss
+77
-0
| @@ | @@ -0,0 +1,77 @@ |
| + | // 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; |
| + | } |
| + | } |
| + | |
| + | // Use to remove the bullets from an unordered list |
| + | .no-bullet { |
| + | margin-#{$global-left}: 0; |
| + | list-style: none; |
| + | } |
| + | } |
public/stylesheets/foundation6/typography/_print.scss
+73
-0
| @@ | @@ -0,0 +1,73 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group typography |
| + | //// |
| + | |
| + | // scss-lint:disable all |
| + | |
| + | @mixin foundation-print-styles { |
| + | .show-for-print { display: none !important; } |
| + | |
| + | @media print { |
| + | * { |
| + | background: transparent !important; |
| + | color: black !important; // Black prints faster: h5bp.com/s |
| + | box-shadow: none !important; |
| + | 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;} |
| + | 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 #999; |
| + | 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; } |
| + | } |
| + | } |
public/stylesheets/foundation6/typography/_typography.scss
+28
-0
| @@ | @@ -0,0 +1,28 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group typography |
| + | //// |
| + | |
| + | // scss-lint:disable DeclarationOrder |
| + | |
| + | // 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
+182
-0
| @@ | @@ -0,0 +1,182 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group breakpoints |
| + | //// |
| + | |
| + | // scss-lint:disable ZeroUnit |
| + | |
| + | /// 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; |
| + | |
| + | /// 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 - Breakpoint name, or px, rem, or em value to process. |
| + | @function breakpoint($val: small) { |
| + | // 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' { |
| + | $next-bp: -zf-map-next($breakpoints, $bp); |
| + | |
| + | @if $next-bp == null { |
| + | $bp-max: null; |
| + | } |
| + | @else { |
| + | $bp-max: $next-bp; |
| + | } |
| + | } |
| + | |
| + | $bp: map-get($breakpoints, $bp); |
| + | $named: true; |
| + | } |
| + | @else { |
| + | $bp: 0; |
| + | } |
| + | } |
| + | |
| + | // 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); |
| + | } |
| + | |
| + | // Skip media query creation if the input is "0 up" or "0 down" |
| + | @if $bp > 0 or $dir == 'only' { |
| + | // "Only" ranges use the format "(min-width: n) and (max-width: n)" |
| + | @if $dir == 'only' { |
| + | @if $named == true { |
| + | $str: $str + '(min-width: #{$bp})'; |
| + | |
| + | @if $bp-max != null { |
| + | $str: $str + ' and (max-width: #{$bp-max})'; |
| + | } |
| + | } |
| + | @else { |
| + | @warn 'Only named media queries can have an "only" range.'; |
| + | } |
| + | } |
| + | |
| + | // "Down" ranges use the format "(max-width: n)" |
| + | @else if $dir == 'down' { |
| + | $max: 0; |
| + | |
| + | // For named breakpoints, subtract the breakpoint value by one "pixel", or 1/16em. |
| + | @if $named { |
| + | $max: $bp-max; |
| + | } |
| + | @else { |
| + | $max: $bp; |
| + | } |
| + | |
| + | $str: $str + '(max-width: #{$max})'; |
| + | } |
| + | |
| + | // "Up" ranges use the format "(min-width: n)" |
| + | @else if strip-unit($bp) > 0 { |
| + | $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 `$rem-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. |
| + | /// @content |
| + | /// @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); |
| + | |
| + | // If $str is still an empty string, no media query is needed |
| + | @if $str == '' { |
| + | @content; |
| + | } |
| + | |
| + | // Otherwise, wrap the content in a media query |
| + | @else { |
| + | @media screen and #{$str} { |
| + | @content; |
| + | } |
| + | } |
| + | } |
| + | |
| + | /// 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 values of the map as a list, so we can access them with nth |
| + | $values: map-values($map); |
| + | |
| + | // Ghetto for loop |
| + | $i: 1; |
| + | $found: false; |
| + | @each $val in map-keys($map) { |
| + | @if $found == false { |
| + | @if ($key == $val) { |
| + | $found: true; |
| + | } |
| + | $i: $i + 1; |
| + | } |
| + | } |
| + | |
| + | // If the key doesn't exist, or it's the last key in the map, return null |
| + | @if $i > length($map) { |
| + | @return null; |
| + | } |
| + | // Otherwise, return the value |
| + | @else { |
| + | @return nth($values, $i); |
| + | } |
| + | } |
public/stylesheets/foundation6/util/_color.scss
+41
-0
| @@ | @@ -0,0 +1,41 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group functions |
| + | //// |
| + | |
| + | /// Checks the lightness of `$color`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color. |
| + | /// |
| + | /// @param {color} $color - Color to check the lightness of. |
| + | /// @param {color} $yes [$black] - Color to return if `$color` is light. |
| + | /// @param {color} $no [$white] - Color to return if `$color` is dark. |
| + | /// @param {percentage} $threshold [60%] - Threshold of lightness to check against. |
| + | /// |
| + | /// @returns {Color} The $yes color or $no color. |
| + | @function foreground($color, $yes: $black, $no: $white, $threshold: 60%) { |
| + | @if $color == transparent { |
| + | $color: $body-background; |
| + | } |
| + | @if (lightness($color) > $threshold) { |
| + | @return $yes; |
| + | } |
| + | @else { |
| + | @return $no; |
| + | } |
| + | } |
| + | |
| + | /// Scales a color to be lighter if it's light, or darker if it's dark. Use this function to tint a color appropriate to its lightness. |
| + | /// |
| + | /// @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); |
| + | } |
public/stylesheets/foundation6/util/_mixins.scss
+190
-0
| @@ | @@ -0,0 +1,190 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group functions |
| + | //// |
| + | |
| + | /// 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 `top`, `right`, `bottom`, or `left`. |
| + | @mixin css-triangle( |
| + | $triangle-size, |
| + | $triangle-color, |
| + | $triangle-direction |
| + | ) { |
| + | content: ''; |
| + | display: block; |
| + | width: 0; |
| + | height: 0; |
| + | border: inset $triangle-size; |
| + | |
| + | @if ($triangle-direction == down) { |
| + | border-color: $triangle-color transparent transparent; |
| + | border-top-style: solid; |
| + | } |
| + | @if ($triangle-direction == up) { |
| + | border-color: transparent transparent $triangle-color; |
| + | border-bottom-style: solid; |
| + | } |
| + | @if ($triangle-direction == right) { |
| + | border-color: transparent transparent transparent $triangle-color; |
| + | border-left-style: solid; |
| + | } |
| + | @if ($triangle-direction == left) { |
| + | border-color: transparent $triangle-color transparent transparent; |
| + | border-right-style: solid; |
| + | } |
| + | } |
| + | |
| + | /// 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 - Color to use for the icon. |
| + | /// @param {Color} $color-hover - Color to use when the icon is hovered over. |
| + | /// @param {Number} $width - Width of the icon. |
| + | /// @param {Number} $height - Height of the icon. |
| + | /// @param {Number} $weight - Height of individual bars in the icon. |
| + | /// @param {Number} $bars - Number of bars in the icon. |
| + | @mixin hamburger( |
| + | $color: black, |
| + | $color-hover: #666, |
| + | $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: floor(($height - ($weight * $bars)) / ($bars - 1)); |
| + | |
| + | // Icon container |
| + | position: relative; |
| + | display: inline-block; |
| + | vertical-align: middle; |
| + | cursor: pointer; |
| + | width: $width; |
| + | height: $height; |
| + | |
| + | // Icon bars |
| + | &::after { |
| + | content: ''; |
| + | position: absolute; |
| + | display: block; |
| + | width: 100%; |
| + | height: $weight; |
| + | background: $color; |
| + | top: 0; |
| + | left: 0; |
| + | |
| + | @for $i from 2 through $bars { |
| + | $offset: ($weight + $spacing) * ($i - 1); |
| + | $shadow: append($shadow, 0 $offset 0 $color, comma); |
| + | } |
| + | |
| + | box-shadow: $shadow; |
| + | } |
| + | |
| + | // 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(#{red($color)}, #{green($color)}, #{blue($color)})'; |
| + | |
| + | 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) < 50% { |
| + | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=='); |
| + | } |
| + | @else { |
| + | 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. |
| + | /// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack |
| + | @mixin clearfix { |
| + | &::before, |
| + | &::after { |
| + | content: ' '; |
| + | display: table; |
| + | } |
| + | |
| + | &::after { |
| + | clear: both; |
| + | } |
| + | } |
| + | |
| + | /// Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container. |
| + | /// @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. |
| + | /// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS |
| + | @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 |
| + | @mixin element-invisible { |
| + | position: absolute !important; |
| + | width: 1px; |
| + | height: 1px; |
| + | overflow: hidden; |
| + | clip: rect(0, 0, 0, 0); |
| + | } |
| + | |
| + | /// Reverses the CSS output created by the `element-invisible()` mixin. |
| + | @mixin element-invisible-off { |
| + | position: static !important; |
| + | height: auto; |
| + | width: auto; |
| + | overflow: visible; |
| + | clip: auto; |
| + | } |
| + | |
| + | /// Vertically and horizontally centers an element using `transform`. |
| + | @mixin vertical-center { |
| + | position: absolute; |
| + | top: 50%; |
| + | left: 50%; |
| + | transform: translate(-50%, -50%); |
| + | } |
| + | |
| + | /// Vertically centers an element using `transform`. |
| + | @mixin v-align-middle { |
| + | position: absolute; |
| + | top: 50%; |
| + | transform: translateY(-50%); |
| + | } |
public/stylesheets/foundation6/util/_selector.scss
+39
-0
| @@ | @@ -0,0 +1,39 @@ |
| + | // 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. |
| + | @function text-inputs($types: ()) { |
| + | $return: (); |
| + | |
| + | $all-types: |
| + | text |
| + | password |
| + | date |
| + | datetime |
| + | datetime-local |
| + | month |
| + | week |
| + | |
| + | number |
| + | search |
| + | tel |
| + | time |
| + | url |
| + | color; |
| + | |
| + | @if not(hasvalue($types)) { |
| + | $types: $all-types; |
| + | } |
| + | |
| + | @each $type in $types { |
| + | $return: append($return, unquote('[type="#{$type}"]'), comma); |
| + | } |
| + | |
| + | @return $return; |
| + | } |
public/stylesheets/foundation6/util/_unit.scss
+69
-0
| @@ | @@ -0,0 +1,69 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | //// |
| + | /// @group functions |
| + | //// |
| + | |
| + | // scss-lint:disable ZeroUnit |
| + | |
| + | /// Defines the base font size of the page, which is the value `1rem` is equal to. |
| + | /// @type Number |
| + | /// @group global |
| + | $rem-base: 16px !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 [$rem-base] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. |
| + | /// @returns {List} A list of converted values. |
| + | @function rem-calc($values, $base: $rem-base) { |
| + | $rem-values: (); |
| + | $count: length($values); |
| + | |
| + | @if $base == null { |
| + | $base: $rem-base; |
| + | } |
| + | |
| + | @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 unit($value) == '' { |
| + | $value: rem-calc($value); |
| + | } |
| + | |
| + | // 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 `$rem-base` variable. |
| + | /// @param {Number} $value - Pixel value to convert. |
| + | /// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is. |
| + | /// @access private |
| + | @function -zf-to-rem($value, $base: $rem-base) { |
| + | // Calculate rem if units for $value is not rem |
| + | @if (unit($value) != 'rem') { |
| + | $value: strip-unit($value) / strip-unit($base) * 1rem; |
| + | } |
| + | // Turn 0rem into 0 |
| + | @if ($value == 0rem) { $value: 0; } |
| + | @return $value; |
| + | } |
public/stylesheets/foundation6/util/_util.scss
+15
-0
| @@ | @@ -0,0 +1,15 @@ |
| + | // Foundation for Sites by ZURB |
| + | // foundation.zurb.com |
| + | // Licensed under MIT Open Source |
| + | |
| + | // Utilities |
| + | @import 'unit'; |
| + | @import 'value'; |
| + | @import 'color'; |
| + | @import 'selector'; |
| + | |
| + | // Libraries |
| + | @import 'breakpoint'; |
| + | |
| + | // Mixins |
| + | @import 'mixins'; |
public/stylesheets/foundation6/util/_value.scss
+117
-0
| @@ | @@ -0,0 +1,117 @@ |
| + | // 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 $val - Value to check. |
| + | /// @returns {Boolean} `true` if `$val` is not falsey. |
| + | @function hasvalue($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); |
| + | } |
| + | |
| + | /// Calculates x^y, where x is `$base` and y is `$power`. |
| + | /// @access private |
| + | /// @param {Number} $base - Base number (x). |
| + | /// @param {Number} $power - Exponent (y). |
| + | @function pow($base, $power) { |
| + | @if $power == 0 { @return 1; } |
| + | @return $base * pow($base, $power - 1); |
| + | } |
| + | |
| + | // TODO: Remove this (it's used by the grid but is overkill) |
| + | /// Given a user-defined list of keywords and a list of possible keywords, find the ones that were passed in. |
| + | /// @param {List} $opts - List of values to find keywords in. |
| + | /// @param {List} $seeking - List of all possible keywords. |
| + | /// @access private |
| + | /// @returns {Map} A map of all keywords in $seeking. If a keyword was found in $opts, its value is true, otherwise false. |
| + | @function -zf-get-options($opts, $seeking) { |
| + | @if type-of($opts) != 'list' { |
| + | $opts: ($opts); |
| + | } |
| + | |
| + | $map: (); |
| + | @each $keyword in $seeking { |
| + | $val: if(index($opts, $keyword) != null, true, false); |
| + | $item: ($keyword: $val); |
| + | $map: map-merge($map, $item); |
| + | } |
| + | |
| + | @return $map; |
| + | } |
public/stylesheets/foundation6/vendor/normalize.scss
+424
-0
| @@ | @@ -0,0 +1,424 @@ |
| + | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ |
| + | |
| + | /** |
| + | * 1. Set default font family to sans-serif. |
| + | * 2. Prevent iOS and IE text size adjust after device orientation change, |
| + | * without disabling user zoom. |
| + | */ |
| + | |
| + | html { |
| + | font-family: sans-serif; /* 1 */ |
| + | -ms-text-size-adjust: 100%; /* 2 */ |
| + | -webkit-text-size-adjust: 100%; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Remove default margin. |
| + | */ |
| + | |
| + | body { |
| + | margin: 0; |
| + | } |
| + | |
| + | /* HTML5 display definitions |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * Correct `block` display not defined for any HTML5 element in IE 8/9. |
| + | * Correct `block` display not defined for `details` or `summary` in IE 10/11 |
| + | * and Firefox. |
| + | * Correct `block` display not defined for `main` in IE 11. |
| + | */ |
| + | |
| + | article, |
| + | aside, |
| + | details, |
| + | figcaption, |
| + | figure, |
| + | footer, |
| + | header, |
| + | hgroup, |
| + | main, |
| + | menu, |
| + | nav, |
| + | section, |
| + | summary { |
| + | display: block; |
| + | } |
| + | |
| + | /** |
| + | * 1. Correct `inline-block` display not defined in IE 8/9. |
| + | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. |
| + | */ |
| + | |
| + | audio, |
| + | canvas, |
| + | progress, |
| + | video { |
| + | display: inline-block; /* 1 */ |
| + | vertical-align: baseline; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Prevent modern browsers from displaying `audio` without controls. |
| + | * Remove excess height in iOS 5 devices. |
| + | */ |
| + | |
| + | audio:not([controls]) { |
| + | display: none; |
| + | height: 0; |
| + | } |
| + | |
| + | /** |
| + | * Address `[hidden]` styling not present in IE 8/9/10. |
| + | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. |
| + | */ |
| + | |
| + | [hidden], |
| + | template { |
| + | display: none; |
| + | } |
| + | |
| + | /* Links |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * Remove the gray background color from active links in IE 10. |
| + | */ |
| + | |
| + | a { |
| + | background-color: transparent; |
| + | } |
| + | |
| + | /** |
| + | * Improve readability of focused elements when they are also in an |
| + | * active/hover state. |
| + | */ |
| + | |
| + | a:active, |
| + | a:hover { |
| + | outline: 0; |
| + | } |
| + | |
| + | /* Text-level semantics |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. |
| + | */ |
| + | |
| + | abbr[title] { |
| + | border-bottom: 1px dotted; |
| + | } |
| + | |
| + | /** |
| + | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. |
| + | */ |
| + | |
| + | b, |
| + | strong { |
| + | font-weight: bold; |
| + | } |
| + | |
| + | /** |
| + | * Address styling not present in Safari and Chrome. |
| + | */ |
| + | |
| + | dfn { |
| + | font-style: italic; |
| + | } |
| + | |
| + | /** |
| + | * Address variable `h1` font-size and margin within `section` and `article` |
| + | * contexts in Firefox 4+, Safari, and Chrome. |
| + | */ |
| + | |
| + | h1 { |
| + | font-size: 2em; |
| + | margin: 0.67em 0; |
| + | } |
| + | |
| + | /** |
| + | * Address styling not present in IE 8/9. |
| + | */ |
| + | |
| + | mark { |
| + | background: #ff0; |
| + | color: #000; |
| + | } |
| + | |
| + | /** |
| + | * Address inconsistent and variable font size in all browsers. |
| + | */ |
| + | |
| + | small { |
| + | font-size: 80%; |
| + | } |
| + | |
| + | /** |
| + | * Prevent `sub` and `sup` affecting `line-height` in all browsers. |
| + | */ |
| + | |
| + | sub, |
| + | sup { |
| + | font-size: 75%; |
| + | line-height: 0; |
| + | position: relative; |
| + | vertical-align: baseline; |
| + | } |
| + | |
| + | sup { |
| + | top: -0.5em; |
| + | } |
| + | |
| + | sub { |
| + | bottom: -0.25em; |
| + | } |
| + | |
| + | /* Embedded content |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * Remove border when inside `a` element in IE 8/9/10. |
| + | */ |
| + | |
| + | img { |
| + | border: 0; |
| + | } |
| + | |
| + | /** |
| + | * Correct overflow not hidden in IE 9/10/11. |
| + | */ |
| + | |
| + | svg:not(:root) { |
| + | overflow: hidden; |
| + | } |
| + | |
| + | /* Grouping content |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * Address margin not present in IE 8/9 and Safari. |
| + | */ |
| + | |
| + | figure { |
| + | margin: 1em 40px; |
| + | } |
| + | |
| + | /** |
| + | * Address differences between Firefox and other browsers. |
| + | */ |
| + | |
| + | hr { |
| + | box-sizing: content-box; |
| + | height: 0; |
| + | } |
| + | |
| + | /** |
| + | * Contain overflow in all browsers. |
| + | */ |
| + | |
| + | pre { |
| + | overflow: auto; |
| + | } |
| + | |
| + | /** |
| + | * Address odd `em`-unit font size rendering in all browsers. |
| + | */ |
| + | |
| + | code, |
| + | kbd, |
| + | pre, |
| + | samp { |
| + | font-family: monospace, monospace; |
| + | font-size: 1em; |
| + | } |
| + | |
| + | /* Forms |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * Known limitation: by default, Chrome and Safari on OS X allow very limited |
| + | * styling of `select`, unless a `border` property is set. |
| + | */ |
| + | |
| + | /** |
| + | * 1. Correct color not being inherited. |
| + | * Known issue: affects color of disabled elements. |
| + | * 2. Correct font properties not being inherited. |
| + | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. |
| + | */ |
| + | |
| + | button, |
| + | input, |
| + | optgroup, |
| + | select, |
| + | textarea { |
| + | color: inherit; /* 1 */ |
| + | font: inherit; /* 2 */ |
| + | margin: 0; /* 3 */ |
| + | } |
| + | |
| + | /** |
| + | * Address `overflow` set to `hidden` in IE 8/9/10/11. |
| + | */ |
| + | |
| + | button { |
| + | overflow: visible; |
| + | } |
| + | |
| + | /** |
| + | * Address inconsistent `text-transform` inheritance for `button` and `select`. |
| + | * All other form control elements do not inherit `text-transform` values. |
| + | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. |
| + | * Correct `select` style inheritance in Firefox. |
| + | */ |
| + | |
| + | button, |
| + | select { |
| + | text-transform: none; |
| + | } |
| + | |
| + | /** |
| + | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` |
| + | * and `video` controls. |
| + | * 2. Correct inability to style clickable `input` types in iOS. |
| + | * 3. Improve usability and consistency of cursor style between image-type |
| + | * `input` and others. |
| + | */ |
| + | |
| + | button, |
| + | html input[type="button"], /* 1 */ |
| + | input[type="reset"], |
| + | input[type="submit"] { |
| + | -webkit-appearance: button; /* 2 */ |
| + | cursor: pointer; /* 3 */ |
| + | } |
| + | |
| + | /** |
| + | * Re-set default cursor for disabled elements. |
| + | */ |
| + | |
| + | button[disabled], |
| + | html input[disabled] { |
| + | cursor: default; |
| + | } |
| + | |
| + | /** |
| + | * Remove inner padding and border in Firefox 4+. |
| + | */ |
| + | |
| + | button::-moz-focus-inner, |
| + | input::-moz-focus-inner { |
| + | border: 0; |
| + | padding: 0; |
| + | } |
| + | |
| + | /** |
| + | * Address Firefox 4+ setting `line-height` on `input` using `!important` in |
| + | * the UA stylesheet. |
| + | */ |
| + | |
| + | input { |
| + | line-height: normal; |
| + | } |
| + | |
| + | /** |
| + | * It's recommended that you don't attempt to style these elements. |
| + | * Firefox's implementation doesn't respect box-sizing, padding, or width. |
| + | * |
| + | * 1. Address box sizing set to `content-box` in IE 8/9/10. |
| + | * 2. Remove excess padding in IE 8/9/10. |
| + | */ |
| + | |
| + | input[type="checkbox"], |
| + | input[type="radio"] { |
| + | box-sizing: border-box; /* 1 */ |
| + | padding: 0; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Fix the cursor style for Chrome's increment/decrement buttons. For certain |
| + | * `font-size` values of the `input`, it causes the cursor style of the |
| + | * decrement button to change from `default` to `text`. |
| + | */ |
| + | |
| + | input[type="number"]::-webkit-inner-spin-button, |
| + | input[type="number"]::-webkit-outer-spin-button { |
| + | height: auto; |
| + | } |
| + | |
| + | /** |
| + | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. |
| + | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. |
| + | */ |
| + | |
| + | input[type="search"] { |
| + | -webkit-appearance: textfield; /* 1 */ |
| + | box-sizing: content-box; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Remove inner padding and search cancel button in Safari and Chrome on OS X. |
| + | * Safari (but not Chrome) clips the cancel button when the search input has |
| + | * padding (and `textfield` appearance). |
| + | */ |
| + | |
| + | input[type="search"]::-webkit-search-cancel-button, |
| + | input[type="search"]::-webkit-search-decoration { |
| + | -webkit-appearance: none; |
| + | } |
| + | |
| + | /** |
| + | * Define consistent border, margin, and padding. |
| + | */ |
| + | |
| + | fieldset { |
| + | border: 1px solid #c0c0c0; |
| + | margin: 0 2px; |
| + | padding: 0.35em 0.625em 0.75em; |
| + | } |
| + | |
| + | /** |
| + | * 1. Correct `color` not being inherited in IE 8/9/10/11. |
| + | * 2. Remove padding so people aren't caught out if they zero out fieldsets. |
| + | */ |
| + | |
| + | legend { |
| + | border: 0; /* 1 */ |
| + | padding: 0; /* 2 */ |
| + | } |
| + | |
| + | /** |
| + | * Remove default vertical scrollbar in IE 8/9/10/11. |
| + | */ |
| + | |
| + | textarea { |
| + | overflow: auto; |
| + | } |
| + | |
| + | /** |
| + | * Don't inherit the `font-weight` (applied by a rule above). |
| + | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. |
| + | */ |
| + | |
| + | optgroup { |
| + | font-weight: bold; |
| + | } |
| + | |
| + | /* Tables |
| + | ========================================================================== */ |
| + | |
| + | /** |
| + | * Remove most spacing between table cells. |
| + | */ |
| + | |
| + | table { |
| + | border-collapse: collapse; |
| + | border-spacing: 0; |
| + | } |
| + | |
| + | td, |
| + | th { |
| + | padding: 0; |
| + | } |