updated gulp and bower files

This commit is contained in:
Bachir Soussi Chiadmi
2017-10-09 16:35:06 +02:00
parent 38648c1670
commit bf5f1a63ff
219 changed files with 23172 additions and 9607 deletions

View File

@@ -1,15 +1,13 @@
{
"name": "foundation",
"version": "5.5.1",
"main": [
"css/foundation.css",
"css/foundation.css.map",
"scss/foundation.scss",
"js/foundation.js"
],
"ignore": [],
"dependencies": {
"jquery": ">= 2.1.0",
"modernizr": ">= 2.7.2",
"modernizr": "2.8.3",
"fastclick": ">=0.6.11",
"jquery.cookie": "~1.4.0",
"jquery-placeholder": "~2.0.7"
@@ -20,14 +18,14 @@
},
"private": true,
"homepage": "https://github.com/zurb/bower-foundation",
"_release": "5.5.1",
"version": "5.5.3",
"_release": "5.5.3",
"_resolution": {
"type": "version",
"tag": "5.5.1",
"commit": "bf07a7551bc3e599404d9cb2eb2251a95c1ea782"
"tag": "5.5.3",
"commit": "b879716aa268e1f88fe43de98db2db4487af00ca"
},
"_source": "git://github.com/zurb/bower-foundation.git",
"_source": "https://github.com/zurb/bower-foundation.git",
"_target": "~5.5.1",
"_originalSource": "foundation",
"_direct": true
"_originalSource": "foundation"
}

View File

@@ -0,0 +1,22 @@
Copyright (c) 2013-2015 ZURB, inc.
MIT License
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,46 @@
# [Foundation](http://foundation.zurb.com)
[![Build Status](https://travis-ci.org/zurb/foundation.svg)](https://travis-ci.org/zurb/foundation)
Foundation is the most advanced responsive front-end framework in the world. You can quickly prototype and build sites or apps that work on any kind of device with Foundation, which includes layout constructs (like a fully responsive grid), elements and best practices.
To get started, check out <http://foundation.zurb.com/docs>
## Quickstart
To get going with Foundation you can:
* [Download the latest release](http://foundation.zurb.com/develop/download.html)
* [Install with Bower](http://bower.io): `bower install foundation`
* [Install with npm](http://npmjs.com): `npm install foundation-sites`
## Documentation
Foundation uses [Assemble.io](http://assemble.io) and [Grunt](http://gruntjs.com/) to generate its [documentation pages](http://foundation.zurb.com/docs). Documentation can also be run from your local computer:
### View documentation locally
You'll want to clone the Foundation repo first and install all the dependencies. You can do this using the following commands:
```
git clone git@github.com:zurb/foundation.git
cd foundation
npm install -g grunt-cli bower
npm install
bower install
bundle install
```
Then just run `grunt build` and the documentation will be compiled:
```
foundation/
├── dist/
│ └── ...
├────── docs/
│ └── ...
```
Copyright (c) 2015 ZURB, inc.

View File

@@ -1,16 +1,14 @@
{
"name": "foundation",
"version": "5.5.1",
"main": [
"css/foundation.css",
"css/foundation.css.map",
"scss/foundation.scss",
"js/foundation.js"
],
"ignore": [
],
"dependencies": {
"jquery": ">= 2.1.0",
"modernizr": ">= 2.7.2",
"modernizr": "2.8.3",
"fastclick": ">=0.6.11",
"jquery.cookie": "~1.4.0",
"jquery-placeholder": "~2.0.7"

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,8 +1,8 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
*/
html {
font-family: sans-serif;
@@ -64,7 +64,7 @@ audio:not([controls]) {
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
[hidden],
template {
@@ -79,7 +79,8 @@ a {
background-color: transparent; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
a:active,
a:hover {
@@ -169,7 +170,6 @@ figure {
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0; }
@@ -292,16 +292,13 @@ input[type="number"]::-webkit-outer-spin-button {
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box; }
box-sizing: content-box;
/* 2 */ }
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.

View File

@@ -1,6 +1,6 @@
{
"version": 3,
"mappings": ";;;;;;AAQA,IAAK;EACH,WAAW,EAAE,UAAU;;EACvB,oBAAoB,EAAE,IAAI;;EAC1B,wBAAwB,EAAE,IAAI;;;;;;AAOhC,IAAK;EACH,MAAM,EAAE,CAAC;;;;;;;;;;AAaX;;;;;;;;;;;;OAYQ;EACN,OAAO,EAAE,KAAK;;;;;;AAQhB;;;KAGM;EACJ,OAAO,EAAE,YAAY;;EACrB,cAAc,EAAE,QAAQ;;;;;;;AAQ1B,qBAAsB;EACpB,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,CAAC;;;;;;AAQX;QACS;EACP,OAAO,EAAE,IAAI;;;;;;;AAUf,CAAE;EACA,gBAAgB,EAAE,WAAW;;;;;AAO/B;OACQ;EACN,OAAO,EAAE,CAAC;;;;;;;AAUZ,WAAY;EACV,aAAa,EAAE,UAAU;;;;;AAO3B;MACO;EACL,WAAW,EAAE,IAAI;;;;;AAOnB,GAAI;EACF,UAAU,EAAE,MAAM;;;;;;AAQpB,EAAG;EACD,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,QAAQ;;;;;AAOlB,IAAK;EACH,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;;;;;AAOb,KAAM;EACJ,SAAS,EAAE,GAAG;;;;;AAOhB;GACI;EACF,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,CAAC;EACd,QAAQ,EAAE,QAAQ;EAClB,cAAc,EAAE,QAAQ;;AAG1B,GAAI;EACF,GAAG,EAAE,MAAM;;AAGb,GAAI;EACF,MAAM,EAAE,OAAO;;;;;;;AAUjB,GAAI;EACF,MAAM,EAAE,CAAC;;;;;AAOX,cAAe;EACb,QAAQ,EAAE,MAAM;;;;;;;AAUlB,MAAO;EACL,MAAM,EAAE,QAAQ;;;;;AAOlB,EAAG;EACD,eAAe,EAAE,WAAW;EAC5B,UAAU,EAAE,WAAW;EACvB,MAAM,EAAE,CAAC;;;;;AAOX,GAAI;EACF,QAAQ,EAAE,IAAI;;;;;AAOhB;;;IAGK;EACH,WAAW,EAAE,oBAAoB;EACjC,SAAS,EAAE,GAAG;;;;;;;;;;;;;;AAkBhB;;;;QAIS;EACP,KAAK,EAAE,OAAO;;EACd,IAAI,EAAE,OAAO;;EACb,MAAM,EAAE,CAAC;;;;;;AAOX,MAAO;EACL,QAAQ,EAAE,OAAO;;;;;;;;AAUnB;MACO;EACL,cAAc,EAAE,IAAI;;;;;;;;;AAWtB;;;oBAGqB;EACnB,kBAAkB,EAAE,MAAM;;EAC1B,MAAM,EAAE,OAAO;;;;;;AAOjB;oBACqB;EACnB,MAAM,EAAE,OAAO;;;;;AAOjB;uBACwB;EACtB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;;;AAQZ,KAAM;EACJ,WAAW,EAAE,MAAM;;;;;;;;;AAWrB;mBACoB;EAClB,UAAU,EAAE,UAAU;;EACtB,OAAO,EAAE,CAAC;;;;;;;;AASZ;+CACgD;EAC9C,MAAM,EAAE,IAAI;;;;;;;AASd,oBAAqB;EACnB,kBAAkB,EAAE,SAAS;;EAC7B,eAAe,EAAE,WAAW;EAC5B,kBAAkB,EAAE,WAAW;;EAC/B,UAAU,EAAE,WAAW;;;;;;;AASzB;+CACgD;EAC9C,kBAAkB,EAAE,IAAI;;;;;AAO1B,QAAS;EACP,MAAM,EAAE,iBAAiB;EACzB,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,qBAAqB;;;;;;AAQhC,MAAO;EACL,MAAM,EAAE,CAAC;;EACT,OAAO,EAAE,CAAC;;;;;;AAOZ,QAAS;EACP,QAAQ,EAAE,IAAI;;;;;;AAQhB,QAAS;EACP,WAAW,EAAE,IAAI;;;;;;;AAUnB,KAAM;EACJ,eAAe,EAAE,QAAQ;EACzB,cAAc,EAAE,CAAC;;AAGnB;EACG;EACD,OAAO,EAAE,CAAC",
"mappings": ";;;;;;AAQA,IAAK;EACH,WAAW,EAAE,UAAU;;EACvB,oBAAoB,EAAE,IAAI;;EAC1B,wBAAwB,EAAE,IAAI;;;;;;AAOhC,IAAK;EACH,MAAM,EAAE,CAAC;;;;;;;;;;AAaX;;;;;;;;;;;;OAYQ;EACN,OAAO,EAAE,KAAK;;;;;;AAQhB;;;KAGM;EACJ,OAAO,EAAE,YAAY;;EACrB,cAAc,EAAE,QAAQ;;;;;;;AAQ1B,qBAAsB;EACpB,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,CAAC;;;;;;AAQX;QACS;EACP,OAAO,EAAE,IAAI;;;;;;;AAUf,CAAE;EACA,gBAAgB,EAAE,WAAW;;;;;;AAQ/B;OACQ;EACN,OAAO,EAAE,CAAC;;;;;;;AAUZ,WAAY;EACV,aAAa,EAAE,UAAU;;;;;AAO3B;MACO;EACL,WAAW,EAAE,IAAI;;;;;AAOnB,GAAI;EACF,UAAU,EAAE,MAAM;;;;;;AAQpB,EAAG;EACD,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,QAAQ;;;;;AAOlB,IAAK;EACH,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;;;;;AAOb,KAAM;EACJ,SAAS,EAAE,GAAG;;;;;AAOhB;GACI;EACF,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,CAAC;EACd,QAAQ,EAAE,QAAQ;EAClB,cAAc,EAAE,QAAQ;;AAG1B,GAAI;EACF,GAAG,EAAE,MAAM;;AAGb,GAAI;EACF,MAAM,EAAE,OAAO;;;;;;;AAUjB,GAAI;EACF,MAAM,EAAE,CAAC;;;;;AAOX,cAAe;EACb,QAAQ,EAAE,MAAM;;;;;;;AAUlB,MAAO;EACL,MAAM,EAAE,QAAQ;;;;;AAOlB,EAAG;EACD,UAAU,EAAE,WAAW;EACvB,MAAM,EAAE,CAAC;;;;;AAOX,GAAI;EACF,QAAQ,EAAE,IAAI;;;;;AAOhB;;;IAGK;EACH,WAAW,EAAE,oBAAoB;EACjC,SAAS,EAAE,GAAG;;;;;;;;;;;;;;AAkBhB;;;;QAIS;EACP,KAAK,EAAE,OAAO;;EACd,IAAI,EAAE,OAAO;;EACb,MAAM,EAAE,CAAC;;;;;;AAOX,MAAO;EACL,QAAQ,EAAE,OAAO;;;;;;;;AAUnB;MACO;EACL,cAAc,EAAE,IAAI;;;;;;;;;AAWtB;;;oBAGqB;EACnB,kBAAkB,EAAE,MAAM;;EAC1B,MAAM,EAAE,OAAO;;;;;;AAOjB;oBACqB;EACnB,MAAM,EAAE,OAAO;;;;;AAOjB;uBACwB;EACtB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;;;AAQZ,KAAM;EACJ,WAAW,EAAE,MAAM;;;;;;;;;AAWrB;mBACoB;EAClB,UAAU,EAAE,UAAU;;EACtB,OAAO,EAAE,CAAC;;;;;;;;AASZ;+CACgD;EAC9C,MAAM,EAAE,IAAI;;;;;;AAQd,oBAAqB;EACnB,kBAAkB,EAAE,SAAS;;EAC7B,UAAU,EAAE,WAAW;;;;;;;;AASzB;+CACgD;EAC9C,kBAAkB,EAAE,IAAI;;;;;AAO1B,QAAS;EACP,MAAM,EAAE,iBAAiB;EACzB,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,qBAAqB;;;;;;AAQhC,MAAO;EACL,MAAM,EAAE,CAAC;;EACT,OAAO,EAAE,CAAC;;;;;;AAOZ,QAAS;EACP,QAAQ,EAAE,IAAI;;;;;;AAQhB,QAAS;EACP,WAAW,EAAE,IAAI;;;;;;;AAUnB,KAAM;EACJ,eAAe,EAAE,QAAQ;EACzB,cAAc,EAAE,CAAC;;AAGnB;EACG;EACD,OAAO,EAAE,CAAC",
"sources": ["../../../scss/normalize.scss"],
"names": [],
"file": "normalize.css"

View File

@@ -0,0 +1 @@
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}

File diff suppressed because one or more lines are too long

View File

@@ -4,14 +4,18 @@
Foundation.libs.abide = {
name : 'abide',
version : '5.5.1',
version : '5.5.3',
settings : {
live_validate : true,
validate_on_blur : true,
focus_on_invalid : true,
error_labels : true, // labels with a for="inputId" will recieve an `error` class
error_class : 'error',
live_validate : true, // validate the form as you go
validate_on_blur : true, // validate whenever you focus/blur on an input field
// validate_on: 'tab', // tab (when user tabs between fields), change (input changes), manual (call custom events)
focus_on_invalid : true, // automatically bring the focus to an invalid input field
error_labels : true, // labels with a for="inputId" will receive an `error` class
error_class : 'error', // labels with a for="inputId" will receive an `error` class
// the amount of time Abide will take before it validates the form (in ms).
// smaller time will result in faster validation
timeout : 1000,
patterns : {
alpha : /^[a-zA-Z]+$/,
@@ -26,7 +30,8 @@
// 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})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,
// http://blogs.lse.ac.uk/lti/2008/04/23/a-regular-expression-to-match-any-url/
url: /^(https?|ftp|file|ssh):\/\/([-;:&=\+\$,\w]+@{1})?([-A-Za-z0-9\.]+)+:?(\d+)?((\/[-\+~%\/\.\w]+)?\??([-\+=&;%@\.\w]+)?#?([\w]+)?)?/,
// abc.de
domain : /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,
@@ -68,36 +73,82 @@
this.invalid_attr = this.add_namespace('data-invalid');
function validate(originalSelf, e) {
clearTimeout(self.timer);
self.timer = setTimeout(function () {
self.validate([originalSelf], e);
}.bind(originalSelf), settings.timeout);
}
form
.off('.abide')
.on('submit.fndtn.abide validate.fndtn.abide', function (e) {
.on('submit.fndtn.abide', function (e) {
var is_ajax = /ajax/i.test(self.S(this).attr(self.attr_name()));
return self.validate(self.S(this).find('input, textarea, select').get(), e, is_ajax);
return self.validate(self.S(this).find('input, textarea, select').not(":hidden, [data-abide-ignore]").get(), e, is_ajax);
})
.on('reset', function () {
return self.reset($(this));
.on('validate.fndtn.abide', function (e) {
if (settings.validate_on === 'manual') {
self.validate([e.target], e);
}
})
.find('input, textarea, select')
.on('reset', function (e) {
return self.reset($(this), e);
})
.find('input, textarea, select').not(":hidden, [data-abide-ignore]")
.off('.abide')
.on('blur.fndtn.abide change.fndtn.abide', function (e) {
if (settings.validate_on_blur === true) {
self.validate([this], e);
var id = this.getAttribute('id'),
eqTo = form.find('[data-equalto="'+ id +'"]');
// old settings fallback
// will be deprecated with F6 release
if (settings.validate_on_blur && settings.validate_on_blur === true) {
validate(this, e);
}
// checks if there is an equalTo equivalent related by id
if(typeof eqTo.get(0) !== "undefined" && eqTo.val().length){
validate(eqTo.get(0),e);
}
// new settings combining validate options into one setting
if (settings.validate_on === 'change') {
validate(this, e);
}
})
.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);
var id = this.getAttribute('id'),
eqTo = form.find('[data-equalto="'+ id +'"]');
// old settings fallback
// will be deprecated with F6 release
if (settings.live_validate && settings.live_validate === true && e.which != 9) {
validate(this, e);
}
// checks if there is an equalTo equivalent related by id
if(typeof eqTo.get(0) !== "undefined" && eqTo.val().length){
validate(eqTo.get(0),e);
}
// new settings combining validate options into one setting
if (settings.validate_on === 'tab' && e.which === 9) {
validate(this, e);
}
else if (settings.validate_on === 'change') {
validate(this, e);
}
})
.on('focus', function (e) {
if (navigator.userAgent.match(/iPad|iPhone|Android|BlackBerry|Windows Phone|webOS/i)) {
$('html, body').animate({
scrollTop: $(e.target).offset().top
}, 100);
}
});
},
reset : function (form) {
form.removeAttr(this.invalid_attr);
$(this.invalid_attr, form).removeAttr(this.invalid_attr);
$('.' + this.settings.error_class, form).not('small').removeClass(this.settings.error_class);
reset : function (form, e) {
var self = this;
form.removeAttr(self.invalid_attr);
$('[' + self.invalid_attr + ']', form).removeAttr(self.invalid_attr);
$('.' + self.settings.error_class, form).not('small').removeClass(self.settings.error_class);
$(':input', form).not(':button, :submit, :reset, :hidden, [data-abide-ignore]').val('').removeAttr(self.invalid_attr);
},
validate : function (els, e, is_ajax) {
@@ -112,14 +163,14 @@
if (this.settings.focus_on_invalid) {
els[i].focus();
}
form.trigger('invalid').trigger('invalid.fndtn.abide');
form.trigger('invalid.fndtn.abide');
this.S(els[i]).closest('form').attr(this.invalid_attr, '');
return false;
}
}
if (submit_event || is_ajax) {
form.trigger('valid').trigger('valid.fndtn.abide');
form.trigger('valid.fndtn.abide');
}
form.removeAttr(this.invalid_attr);
@@ -166,8 +217,11 @@
// TODO: Break this up into smaller methods, getting hard to read.
check_validation_and_apply_styles : function (el_patterns) {
var i = el_patterns.length,
validations = [],
form = this.S(el_patterns[0][0]).closest('[data-' + this.attr_name(true) + ']'),
validations = [];
if (i == 0) {
return validations;
}
var form = this.S(el_patterns[0][0]).closest('[data-' + this.attr_name(true) + ']'),
settings = form.data(this.attr_name(true) + '-init') || {};
while (i--) {
var el = el_patterns[i][0],
@@ -192,15 +246,36 @@
parent = direct_parent.parent();
}
if (validator) {
valid = this.settings.validators[validator].apply(this, [el, required, parent]);
el_validations.push(valid);
}
if (is_radio && required) {
el_validations.push(this.valid_radio(el, required));
} else if (is_checkbox && required) {
el_validations.push(this.valid_checkbox(el, required));
} else if (validator) {
// Validate using each of the specified (space-delimited) validators.
var validators = validator.split(' ');
var last_valid = true, all_valid = true;
for (var iv = 0; iv < validators.length; iv++) {
valid = this.settings.validators[validators[iv]].apply(this, [el, required, parent])
el_validations.push(valid);
all_valid = valid && last_valid;
last_valid = valid;
}
if (all_valid) {
this.S(el).removeAttr(this.invalid_attr);
parent.removeClass('error');
if (label.length > 0 && this.settings.error_labels) {
label.removeClass(this.settings.error_class).removeAttr('role');
}
$(el).triggerHandler('valid');
} else {
this.S(el).attr(this.invalid_attr, '');
parent.addClass('error');
if (label.length > 0 && this.settings.error_labels) {
label.addClass(this.settings.error_class).attr('role', 'alert');
}
$(el).triggerHandler('invalid');
}
} else {
if (el_patterns[i][1].test(value) && valid_length ||
@@ -211,7 +286,6 @@
}
el_validations = [el_validations.every(function (valid) {return valid;})];
if (el_validations[0]) {
this.S(el).removeAttr(this.invalid_attr);
el.setAttribute('aria-invalid', 'false');
@@ -240,9 +314,9 @@
$(el).triggerHandler('invalid');
}
}
validations.push(el_validations[0]);
validations = validations.concat(el_validations);
}
validations = [validations.every(function (valid) {return valid;})];
return validations;
},
@@ -252,8 +326,10 @@
if (valid) {
el.removeAttr(this.invalid_attr).parent().removeClass(this.settings.error_class);
$(el).triggerHandler('valid');
} else {
el.attr(this.invalid_attr, '').parent().addClass(this.settings.error_class);
$(el).triggerHandler('invalid');
}
return valid;
@@ -267,27 +343,29 @@
disabled = false;
// Has to count up to make sure the focus gets applied to the top error
for (var i=0; i < count; i++) {
if( group[i].getAttribute('disabled') ){
disabled=true;
valid=true;
} else {
if (group[i].checked){
valid = true;
} else {
if( disabled ){
valid = false;
}
}
for (var i=0; i < count; i++) {
if( group[i].getAttribute('disabled') ){
disabled=true;
valid=true;
} else {
if (group[i].checked){
valid = true;
} else {
if( disabled ){
valid = false;
}
}
}
}
// Has to count up to make sure the focus gets applied to the top error
for (var i = 0; i < count; i++) {
if (valid) {
this.S(group[i]).removeAttr(this.invalid_attr).parent().removeClass(this.settings.error_class);
$(group[i]).triggerHandler('valid');
} else {
this.S(group[i]).attr(this.invalid_attr, '').parent().addClass(this.settings.error_class);
$(group[i]).triggerHandler('invalid');
}
}
@@ -335,6 +413,14 @@
}
return valid;
},
reflow : function(scope, options) {
var self = this,
form = self.S('[' + this.attr_name() + ']').attr('novalidate', 'novalidate');
self.S(form).each(function (idx, el) {
self.events(el);
});
}
};
}(jQuery, window, window.document));

View File

@@ -4,7 +4,7 @@
Foundation.libs.accordion = {
name : 'accordion',
version : '5.5.1',
version : '5.5.3',
settings : {
content_class : 'content',
@@ -18,30 +18,35 @@
this.bindings(method, options);
},
events : function () {
events : function (instance) {
var self = this;
var S = this.S;
self.create(this.S(instance));
S(this.scope)
.off('.fndtn.accordion')
.on('click.fndtn.accordion', '[' + this.attr_name() + '] > .accordion-navigation > a', function (e) {
.on('click.fndtn.accordion', '[' + this.attr_name() + '] > dd > a, [' + this.attr_name() + '] > li > a', function (e) {
var accordion = S(this).closest('[' + self.attr_name() + ']'),
groupSelector = self.attr_name() + '=' + accordion.attr(self.attr_name()),
settings = accordion.data(self.attr_name(true) + '-init') || self.settings,
target = S('#' + this.href.split('#')[1]),
aunts = $('> .accordion-navigation', accordion),
aunts = $('> dd, > li', accordion),
siblings = aunts.children('.' + settings.content_class),
active_content = siblings.filter('.' + settings.active_class);
e.preventDefault();
if (accordion.attr(self.attr_name())) {
siblings = siblings.add('[' + groupSelector + '] dd > ' + '.' + settings.content_class);
aunts = aunts.add('[' + groupSelector + '] .accordion-navigation');
siblings = siblings.add('[' + groupSelector + '] dd > ' + '.' + settings.content_class + ', [' + groupSelector + '] li > ' + '.' + settings.content_class);
aunts = aunts.add('[' + groupSelector + '] dd, [' + groupSelector + '] li');
}
if (settings.toggleable && target.is(active_content)) {
target.parent('.accordion-navigation').toggleClass(settings.active_class, false);
target.parent('dd, li').toggleClass(settings.active_class, false);
target.toggleClass(settings.active_class, false);
S(this).attr('aria-expanded', function(i, attr){
return attr === 'true' ? 'false' : 'true';
});
settings.callback(target);
target.triggerHandler('toggled', [accordion]);
accordion.triggerHandler('toggled', [target]);
@@ -51,15 +56,68 @@
if (!settings.multi_expand) {
siblings.removeClass(settings.active_class);
aunts.removeClass(settings.active_class);
aunts.children('a').attr('aria-expanded','false');
}
target.addClass(settings.active_class).parent().addClass(settings.active_class);
settings.callback(target);
target.triggerHandler('toggled', [accordion]);
accordion.triggerHandler('toggled', [target]);
S(this).attr('aria-expanded','true');
});
},
create: function($instance) {
var self = this,
accordion = $instance,
aunts = $('> .accordion-navigation', accordion),
settings = accordion.data(self.attr_name(true) + '-init') || self.settings;
aunts.children('a').attr('aria-expanded','false');
aunts.has('.' + settings.content_class + '.' + settings.active_class).addClass(settings.active_class).children('a').attr('aria-expanded','true');
if (settings.multi_expand) {
$instance.attr('aria-multiselectable','true');
}
},
toggle : function(options) {
var options = typeof options !== 'undefined' ? options : {};
var selector = typeof options.selector !== 'undefined' ? options.selector : '';
var toggle_state = typeof options.toggle_state !== 'undefined' ? options.toggle_state : '';
var $accordion = typeof options.$accordion !== 'undefined' ? options.$accordion : this.S(this.scope).closest('[' + this.attr_name() + ']');
var $items = $accordion.find('> dd' + selector + ', > li' + selector);
if ( $items.length < 1 ) {
if ( window.console ) {
console.error('Selection not found.', selector);
}
return false;
}
var S = this.S;
var active_class = this.settings.active_class;
$items.each(function() {
var $item = S(this);
var is_active = $item.hasClass(active_class);
if ( ( is_active && toggle_state === 'close' ) || ( !is_active && toggle_state === 'open' ) || toggle_state === '' ) {
$item.find('> a').trigger('click.fndtn.accordion');
}
});
},
open : function(options) {
var options = typeof options !== 'undefined' ? options : {};
options.toggle_state = 'open';
this.toggle(options);
},
close : function(options) {
var options = typeof options !== 'undefined' ? options : {};
options.toggle_state = 'close';
this.toggle(options);
},
off : function () {},
reflow : function () {}

View File

@@ -4,7 +4,7 @@
Foundation.libs.alert = {
name : 'alert',
version : '5.5.1',
version : '5.5.3',
settings : {
callback : function () {}
@@ -26,12 +26,12 @@
if (Modernizr.csstransitions) {
alertBox.addClass('alert-close');
alertBox.on('transitionend webkitTransitionEnd oTransitionEnd', function (e) {
S(this).trigger('close').trigger('close.fndtn.alert').remove();
S(this).trigger('close.fndtn.alert').remove();
settings.callback();
});
} else {
alertBox.fadeOut(300, function () {
S(this).trigger('close').trigger('close.fndtn.alert').remove();
S(this).trigger('close.fndtn.alert').remove();
settings.callback();
});
}

View File

@@ -4,14 +4,16 @@
Foundation.libs.clearing = {
name : 'clearing',
version : '5.5.1',
version : '5.5.3',
settings : {
templates : {
viewing : '<a href="#" class="clearing-close">&times;</a>' +
'<div class="visible-img" style="display: none"><div class="clearing-touch-label"></div><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />' +
'<p class="clearing-caption"></p><a href="#" class="clearing-main-prev"><span></span></a>' +
'<a href="#" class="clearing-main-next"><span></span></a></div>'
'<a href="#" class="clearing-main-next"><span></span></a></div>' +
'<img class="clearing-preload-next" style="display: none" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />' +
'<img class="clearing-preload-prev" style="display: none" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />'
},
// comma delimited list of selectors that, on click, will close clearing,
@@ -26,7 +28,7 @@
touch_label : '',
// event initializers and locks
// event initializer and locks
init : false,
locked : false
},
@@ -201,7 +203,8 @@
visible_image = self.S('.visible-img', container),
image = self.S('img', visible_image).not($image),
label = self.S('.clearing-touch-label', container),
error = false;
error = false,
loaded = {};
// Event to disable scrolling on touch devices when Clearing is activated
$('body').on('touchmove', function (e) {
@@ -227,6 +230,7 @@
function cb (image) {
var $image = $(image);
$image.css('visibility', 'visible');
$image.trigger('imageVisible');
// toggle the gallery
body.css('overflow', 'hidden');
root.addClass('clearing-blackout');
@@ -245,9 +249,17 @@
if (!this.locked()) {
visible_image.trigger('open.fndtn.clearing');
// set the image to the selected thumbnail
image
.attr('src', this.load($image))
.css('visibility', 'hidden');
loaded = this.load($image);
if (loaded.interchange) {
image
.attr('data-interchange', loaded.interchange)
.foundation('interchange', 'reflow');
} else {
image
.attr('src', loaded.src)
.attr('data-interchange', '');
}
image.css('visibility', 'hidden');
startLoad.call(this);
}
@@ -302,7 +314,7 @@
this.go(clearing, 'prev');
}
if (e.which === ESC_KEY) {
this.S('a.clearing-close').trigger('click').trigger('click.fndtn.clearing');
this.S('a.clearing-close').trigger('click.fndtn.clearing');
}
},
@@ -381,37 +393,55 @@
// image loading and preloading
load : function ($image) {
var href;
var href,
interchange,
closest_a;
if ($image[0].nodeName === 'A') {
href = $image.attr('href');
interchange = $image.data('clearing-interchange');
} else {
href = $image.closest('a').attr('href');
closest_a = $image.closest('a');
href = closest_a.attr('href');
interchange = closest_a.data('clearing-interchange');
}
this.preload($image);
if (href) {
return href;
return {
'src': href ? href : $image.attr('src'),
'interchange': href ? interchange : $image.data('clearing-interchange')
}
return $image.attr('src');
},
preload : function ($image) {
this
.img($image.closest('li').next())
.img($image.closest('li').prev());
.img($image.closest('li').next(), 'next')
.img($image.closest('li').prev(), 'prev');
},
img : function (img) {
img : function (img, sibling_type) {
if (img.length) {
var new_img = new Image(),
new_a = this.S('a', img);
var preload_img = $('.clearing-preload-' + sibling_type),
new_a = this.S('a', img),
src,
interchange,
image;
if (new_a.length) {
new_img.src = new_a.attr('href');
src = new_a.attr('href');
interchange = new_a.data('clearing-interchange');
} else {
new_img.src = this.S('img', img).attr('src');
image = this.S('img', img);
src = image.attr('src');
interchange = image.data('clearing-interchange');
}
if (interchange) {
preload_img.attr('data-interchange', interchange);
} else {
preload_img.attr('src', src);
preload_img.attr('data-interchange', '');
}
}
return this;
@@ -423,9 +453,9 @@
var caption = $image.attr('data-caption');
if (caption) {
container
.html(caption)
.show();
var containerPlain = container.get(0);
containerPlain.innerHTML = caption;
container.show();
} else {
container
.text('')
@@ -447,7 +477,7 @@
if (target.length) {
this.S('img', target)
.trigger('click', [current, target]).trigger('click.fndtn.clearing', [current, target])
.trigger('click.fndtn.clearing', [current, target])
.trigger('change.fndtn.clearing');
}
},

View File

@@ -4,7 +4,7 @@
Foundation.libs.dropdown = {
name : 'dropdown',
version : '5.5.1',
version : '5.5.3',
settings : {
active_class : 'open',
@@ -34,7 +34,7 @@
var settings = S(this).data(self.attr_name(true) + '-init') || self.settings;
if (!settings.is_hover || Modernizr.touch) {
e.preventDefault();
if (S(this).parent('[data-reveal-id]')) {
if (S(this).parent('[data-reveal-id]').length) {
e.stopPropagation();
}
self.toggle($(this));
@@ -131,8 +131,8 @@
close : function (dropdown) {
var self = this;
dropdown.each(function () {
var original_target = $('[' + self.attr_name() + '=' + dropdown[0].id + ']') || $('aria-controls=' + dropdown[0].id + ']');
dropdown.each(function (idx) {
var original_target = $('[' + self.attr_name() + '=' + dropdown[idx].id + ']') || $('aria-controls=' + dropdown[idx].id + ']');
original_target.attr('aria-expanded', 'false');
if (self.S(this).hasClass(self.settings.active_class)) {
self.S(this)
@@ -143,7 +143,7 @@
.removeClass(self.settings.active_class)
.removeData('target');
self.S(this).trigger('closed').trigger('closed.fndtn.dropdown', [dropdown]);
self.S(this).trigger('closed.fndtn.dropdown', [dropdown]);
}
});
dropdown.removeClass('f-open-' + this.attr_name(true));
@@ -161,7 +161,7 @@
.css(dropdown
.addClass(this.settings.active_class), target);
dropdown.prev('[' + this.attr_name() + ']').addClass(this.settings.active_class);
dropdown.data('target', target.get(0)).trigger('opened').trigger('opened.fndtn.dropdown', [dropdown, target]);
dropdown.data('target', target.get(0)).trigger('opened.fndtn.dropdown', [dropdown, target]);
dropdown.attr('aria-hidden', 'false');
target.attr('aria-expanded', 'true');
dropdown.focus();
@@ -209,10 +209,13 @@
css : function (dropdown, target) {
var left_offset = Math.max((target.width() - dropdown.width()) / 2, 8),
settings = target.data(this.attr_name(true) + '-init') || this.settings;
settings = target.data(this.attr_name(true) + '-init') || this.settings,
parentOverflow = dropdown.parent().css('overflow-y') || dropdown.parent().css('overflow');
this.clear_idx();
if (this.small()) {
var p = this.dirs.bottom.call(dropdown, target, settings);
@@ -224,7 +227,19 @@
});
dropdown.css(Foundation.rtl ? 'right' : 'left', left_offset);
} else {
}
// detect if dropdown is in an overflow container
else if (parentOverflow !== 'visible') {
var offset = target[0].offsetTop + target[0].offsetHeight;
dropdown.attr('style', '').css({
position : 'absolute',
top : offset
});
dropdown.css(Foundation.rtl ? 'right' : 'left', left_offset);
}
else {
this.style(dropdown, target, settings);
}
@@ -243,7 +258,7 @@
// `this` is the dropdown
dirs : {
// Calculate target offset
_base : function (t) {
_base : function (t, s) {
var o_p = this.offsetParent(),
o = o_p.offset(),
p = t.offset();
@@ -260,31 +275,36 @@
//lets see if the panel will be off the screen
//get the actual width of the page and store it
var actualBodyWidth;
var windowWidth = window.innerWidth;
if (document.getElementsByClassName('row')[0]) {
actualBodyWidth = document.getElementsByClassName('row')[0].clientWidth;
} else {
actualBodyWidth = window.outerWidth;
actualBodyWidth = windowWidth;
}
var actualMarginWidth = (window.outerWidth - actualBodyWidth) / 2;
var actualMarginWidth = (windowWidth - actualBodyWidth) / 2;
var actualBoundary = actualBodyWidth;
if (!this.hasClass('mega')) {
if (!this.hasClass('mega') && !s.ignore_repositioning) {
var outerWidth = this.outerWidth();
var o_left = t.offset().left;
//miss top
if (t.offset().top <= this.outerHeight()) {
p.missTop = true;
actualBoundary = window.outerWidth - actualMarginWidth;
actualBoundary = windowWidth - actualMarginWidth;
p.leftRightFlag = true;
}
//miss right
if (t.offset().left + this.outerWidth() > t.offset().left + actualMarginWidth && t.offset().left - actualMarginWidth > this.outerWidth()) {
if (o_left + outerWidth > o_left + actualMarginWidth && o_left - actualMarginWidth > outerWidth) {
p.missRight = true;
p.missLeft = false;
}
//miss left
if (t.offset().left - this.outerWidth() <= 0) {
if (o_left - outerWidth <= 0) {
p.missLeft = true;
p.missRight = false;
}
@@ -295,7 +315,7 @@
top : function (t, s) {
var self = Foundation.libs.dropdown,
p = self.dirs._base.call(this, t);
p = self.dirs._base.call(this, t, s);
this.addClass('drop-top');
@@ -322,7 +342,7 @@
bottom : function (t, s) {
var self = Foundation.libs.dropdown,
p = self.dirs._base.call(this, t);
p = self.dirs._base.call(this, t, s);
if (p.missRight == true) {
p.left = p.left - this.outerWidth() + t.outerWidth();
@@ -340,7 +360,7 @@
},
left : function (t, s) {
var p = Foundation.libs.dropdown.dirs._base.call(this, t);
var p = Foundation.libs.dropdown.dirs._base.call(this, t, s);
this.addClass('drop-left');
@@ -354,7 +374,7 @@
},
right : function (t, s) {
var p = Foundation.libs.dropdown.dirs._base.call(this, t);
var p = Foundation.libs.dropdown.dirs._base.call(this, t, s);
this.addClass('drop-right');

View File

@@ -4,13 +4,14 @@
Foundation.libs.equalizer = {
name : 'equalizer',
version : '5.5.1',
version : '5.5.3',
settings : {
use_tallest : true,
before_height_change : $.noop,
after_height_change : $.noop,
equalize_on_stack : false
equalize_on_stack : false,
act_on_hidden_el: false
},
init : function (scope, method, options) {
@@ -27,28 +28,38 @@
equalize : function (equalizer) {
var isStacked = false,
vals = equalizer.find('[' + this.attr_name() + '-watch]:visible'),
settings = equalizer.data(this.attr_name(true) + '-init');
group = equalizer.data('equalizer'),
settings = equalizer.data(this.attr_name(true)+'-init') || this.settings,
vals,
firstTopOffset;
if (settings.act_on_hidden_el) {
vals = group ? equalizer.find('['+this.attr_name()+'-watch="'+group+'"]') : equalizer.find('['+this.attr_name()+'-watch]');
}
else {
vals = group ? equalizer.find('['+this.attr_name()+'-watch="'+group+'"]:visible') : equalizer.find('['+this.attr_name()+'-watch]:visible');
}
if (vals.length === 0) {
return;
}
var firstTopOffset = vals.first().offset().top;
settings.before_height_change();
equalizer.trigger('before-height-change').trigger('before-height-change.fndth.equalizer');
equalizer.trigger('before-height-change.fndth.equalizer');
vals.height('inherit');
vals.each(function () {
var el = $(this);
if (el.offset().top !== firstTopOffset) {
isStacked = true;
}
});
if (settings.equalize_on_stack === false) {
firstTopOffset = vals.first().offset().top;
vals.each(function () {
if ($(this).offset().top !== firstTopOffset) {
isStacked = true;
return false;
}
});
if (isStacked) {
return;
}
};
}
var heights = vals.map(function () { return $(this).outerHeight(false) }).get();
@@ -59,17 +70,33 @@
var min = Math.min.apply(null, heights);
vals.css('height', min);
}
settings.after_height_change();
equalizer.trigger('after-height-change').trigger('after-height-change.fndtn.equalizer');
equalizer.trigger('after-height-change.fndtn.equalizer');
},
reflow : function () {
var self = this;
this.S('[' + this.attr_name() + ']', this.scope).each(function () {
var $eq_target = $(this);
var $eq_target = $(this),
media_query = $eq_target.data('equalizer-mq'),
ignore_media_query = true;
if (media_query) {
media_query = 'is_' + media_query.replace(/-/g, '_');
if (Foundation.utils.hasOwnProperty(media_query)) {
ignore_media_query = false;
}
}
self.image_loaded(self.S('img', this), function () {
self.equalize($eq_target)
if (ignore_media_query || Foundation.utils[media_query]()) {
self.equalize($eq_target)
} else {
var vals = $eq_target.find('[' + self.attr_name() + '-watch]:visible');
vals.css('height', 'auto');
}
});
});
}

View File

@@ -4,7 +4,7 @@
Foundation.libs.interchange = {
name : 'interchange',
version : '5.5.1',
version : '5.5.3',
cache : {},
@@ -48,14 +48,15 @@
// console.log($(this).html(), a, b, c);
// });
if (/IMG/.test(el[0].nodeName)) {
var orig_path = el[0].src;
if (el !== null && /IMG/.test(el[0].nodeName)) {
var orig_path = $.each(el, function(){this.src = path;});
// var orig_path = el[0].src;
if (new RegExp(path, 'i').test(orig_path)) {
return;
}
el[0].src = path;
el.attr("src", path);
return trigger(el[0].src);
}
@@ -88,8 +89,7 @@
this.data_attr = this.set_data_attr();
$.extend(true, this.settings, method, options);
this.bindings(method, options);
this.load('images');
this.load('nodes');
this.reflow();
},
get_media_hash : function () {
@@ -127,11 +127,10 @@
for (var uuid in cache) {
if (cache.hasOwnProperty(uuid)) {
var passed = this.results(uuid, cache[uuid]);
if (passed) {
this.settings.directives[passed
.scenario[1]].call(this, passed.el, passed.scenario[0], (function (passed) {
if (arguments[0] instanceof Array) {
if (arguments[0] instanceof Array) {
var args = arguments[0];
} else {
var args = Array.prototype.slice.call(arguments, 0);
@@ -241,7 +240,7 @@
this.object($(this['cached_' + type][i]));
}
return $(window).trigger('resize').trigger('resize.fndtn.interchange');
return $(window).trigger('resize.fndtn.interchange');
},
convert_directive : function (directive) {
@@ -258,19 +257,25 @@
parse_scenario : function (scenario) {
// This logic had to be made more complex since some users were using commas in the url path
// So we cannot simply just split on a comma
var directive_match = scenario[0].match(/(.+),\s*(\w+)\s*$/),
media_query = scenario[1];
// getting the mq has gotten a bit complicated since we started accounting for several use cases
// of URLs. For now we'll continue to match these scenarios, but we may consider having these scenarios
// as nested objects or arrays in F6.
// regex: match everything before close parenthesis for mq
media_query = scenario[1].match(/(.*)\)/);
if (directive_match) {
var path = directive_match[1],
directive = directive_match[2];
} else {
var cached_split = scenario[0].split(/,\s*$/),
path = cached_split[0],
directive = '';
}
return [this.trim(path), this.convert_directive(directive), this.trim(media_query)];
return [this.trim(path), this.convert_directive(directive), this.trim(media_query[1])];
},
object : function (el) {
@@ -280,10 +285,12 @@
if (i > 0) {
while (i--) {
var split = raw_arr[i].split(/\(([^\)]*?)(\))$/);
// split array between comma delimited content and mq
// regex: comma, optional space, open parenthesis
var scenario = raw_arr[i].split(/,\s?\(/);
if (split.length > 1) {
var params = this.parse_scenario(split);
if (scenario.length > 1) {
var params = this.parse_scenario(scenario);
scenarios.push(params);
}
}
@@ -301,7 +308,6 @@
}
el.attr(this.add_namespace('data-uuid'), uuid);
return this.cache[uuid] = scenarios;
},

View File

@@ -6,13 +6,13 @@
Foundation.libs.joyride = {
name : 'joyride',
version : '5.5.1',
version : '5.5.3',
defaults : {
expose : false, // turn on or off the expose feature
modal : true, // Whether to cover page with modal during the tour
keyboard : true, // enable left, right and esc keystrokes
tip_location : 'bottom', // 'top' or 'bottom' in relation to parent
tip_location : 'bottom', // 'top', 'bottom', 'left' or 'right' in relation to parent
nub_position : 'auto', // override on a per tooltip bases
scroll_speed : 1500, // Page scrolling speed in milliseconds, 0 = no scroll animation
scroll_animation : 'linear', // supports 'swing' and 'linear', extend with jQuery UI.
@@ -323,8 +323,8 @@
this.settings.tip_settings.tip_location_pattern = this.settings.tip_location_patterns[this.settings.tip_settings.tip_location];
// scroll and hide bg if not modal
if (!/body/i.test(this.settings.$target.selector)) {
// scroll and hide bg if not modal and not expose
if (!/body/i.test(this.settings.$target.selector) && !this.settings.expose) {
var joyridemodalbg = $('.joyride-modal-bg');
if (/pop/i.test(this.settings.tipAnimation)) {
joyridemodalbg.hide();
@@ -500,68 +500,68 @@
}
if (!/body/i.test(this.settings.$target.selector)) {
var topAdjustment = this.settings.tip_settings.tipAdjustmentY ? parseInt(this.settings.tip_settings.tipAdjustmentY) : 0,
leftAdjustment = this.settings.tip_settings.tipAdjustmentX ? parseInt(this.settings.tip_settings.tipAdjustmentX) : 0;
if (this.bottom()) {
if (this.rtl) {
this.settings.$next_tip.css({
top : (this.settings.$target.offset().top + nub_height + this.settings.$target.outerHeight() + topAdjustment),
left : this.settings.$target.offset().left + this.settings.$target.outerWidth() - this.settings.$next_tip.outerWidth() + leftAdjustment});
} else {
this.settings.$next_tip.css({
top : (this.settings.$target.offset().top + nub_height + this.settings.$target.outerHeight() + topAdjustment),
left : this.settings.$target.offset().left + leftAdjustment});
}
this.nub_position($nub, this.settings.tip_settings.nub_position, 'top');
} else if (this.top()) {
if (this.rtl) {
this.settings.$next_tip.css({
top : (this.settings.$target.offset().top - this.settings.$next_tip.outerHeight() - nub_height + topAdjustment),
left : this.settings.$target.offset().left + this.settings.$target.outerWidth() - this.settings.$next_tip.outerWidth()});
} else {
this.settings.$next_tip.css({
top : (this.settings.$target.offset().top - this.settings.$next_tip.outerHeight() - nub_height + topAdjustment),
left : this.settings.$target.offset().left + leftAdjustment});
}
this.nub_position($nub, this.settings.tip_settings.nub_position, 'bottom');
} else if (this.right()) {
var topAdjustment = this.settings.tip_settings.tipAdjustmentY ? parseInt(this.settings.tip_settings.tipAdjustmentY) : 0,
leftAdjustment = this.settings.tip_settings.tipAdjustmentX ? parseInt(this.settings.tip_settings.tipAdjustmentX) : 0;
if (this.bottom()) {
if (this.rtl) {
this.settings.$next_tip.css({
top : this.settings.$target.offset().top + topAdjustment,
left : (this.settings.$target.outerWidth() + this.settings.$target.offset().left + nub_width + leftAdjustment)});
this.nub_position($nub, this.settings.tip_settings.nub_position, 'left');
} else if (this.left()) {
top : (this.settings.$target.offset().top + nub_height + this.settings.$target.outerHeight() + topAdjustment),
left : this.settings.$target.offset().left + this.settings.$target.outerWidth() - this.settings.$next_tip.outerWidth() + leftAdjustment});
} else {
this.settings.$next_tip.css({
top : this.settings.$target.offset().top + topAdjustment,
left : (this.settings.$target.offset().left - this.settings.$next_tip.outerWidth() - nub_width + leftAdjustment)});
this.nub_position($nub, this.settings.tip_settings.nub_position, 'right');
top : (this.settings.$target.offset().top + nub_height + this.settings.$target.outerHeight() + topAdjustment),
left : this.settings.$target.offset().left + leftAdjustment});
}
if (!this.visible(this.corners(this.settings.$next_tip)) && this.settings.attempts < this.settings.tip_settings.tip_location_pattern.length) {
$nub.removeClass('bottom')
.removeClass('top')
.removeClass('right')
.removeClass('left');
this.settings.tip_settings.tip_location = this.settings.tip_settings.tip_location_pattern[this.settings.attempts];
this.settings.attempts++;
this.pos_default();
this.nub_position($nub, this.settings.tip_settings.nub_position, 'top');
} else if (this.top()) {
if (this.rtl) {
this.settings.$next_tip.css({
top : (this.settings.$target.offset().top - this.settings.$next_tip.outerHeight() - nub_height + topAdjustment),
left : this.settings.$target.offset().left + this.settings.$target.outerWidth() - this.settings.$next_tip.outerWidth()});
} else {
this.settings.$next_tip.css({
top : (this.settings.$target.offset().top - this.settings.$next_tip.outerHeight() - nub_height + topAdjustment),
left : this.settings.$target.offset().left + leftAdjustment});
}
this.nub_position($nub, this.settings.tip_settings.nub_position, 'bottom');
} else if (this.right()) {
this.settings.$next_tip.css({
top : this.settings.$target.offset().top + topAdjustment,
left : (this.settings.$target.outerWidth() + this.settings.$target.offset().left + nub_width + leftAdjustment)});
this.nub_position($nub, this.settings.tip_settings.nub_position, 'left');
} else if (this.left()) {
this.settings.$next_tip.css({
top : this.settings.$target.offset().top + topAdjustment,
left : (this.settings.$target.offset().left - this.settings.$next_tip.outerWidth() - nub_width + leftAdjustment)});
this.nub_position($nub, this.settings.tip_settings.nub_position, 'right');
}
if (!this.visible(this.corners(this.settings.$next_tip)) && this.settings.attempts < this.settings.tip_settings.tip_location_pattern.length) {
$nub.removeClass('bottom')
.removeClass('top')
.removeClass('right')
.removeClass('left');
this.settings.tip_settings.tip_location = this.settings.tip_settings.tip_location_pattern[this.settings.attempts];
this.settings.attempts++;
this.pos_default();
}
} else if (this.settings.$li.length) {
this.pos_modal($nub);
@@ -827,6 +827,10 @@
},
corners : function (el) {
if (el.length === 0) {
return [false, false, false, false];
}
var w = $(window),
window_half = w.height() / 2,
//using this to calculate since scroll may not have finished yet.
@@ -924,7 +928,6 @@
$('.joyride-close-tip, .joyride-next-tip, .joyride-modal-bg').off('.joyride');
$('.joyride-tip-guide, .joyride-modal-bg').remove();
clearTimeout(this.settings.automate);
this.settings = {};
},
reflow : function () {}

View File

@@ -1,7 +1,7 @@
/*
* Foundation Responsive Library
* http://foundation.zurb.com
* Copyright 2014, ZURB
* Copyright 2015, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
@@ -10,14 +10,12 @@
'use strict';
var header_helpers = function (class_array) {
var i = class_array.length;
var head = $('head');
while (i--) {
if (head.has('.' + class_array[i]).length === 0) {
head.append('<meta class="' + class_array[i] + '" />');
head.prepend($.map(class_array, function (class_name) {
if (head.has('.' + class_name).length === 0) {
return '<meta class="' + class_name + '" />';
}
}
}));
};
header_helpers([
@@ -157,42 +155,52 @@
}
};
/*
https://github.com/paulirish/matchMedia.js
*/
/*! 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 ( doc ) {
window.matchMedia || (window.matchMedia = function() {
"use strict";
'use strict';
// For browsers that support matchMedium api such as IE 9 and webkit
var styleMedia = (window.styleMedia || window.media);
var bool,
docElem = doc.documentElement,
refNode = docElem.firstElementChild || docElem.firstChild,
// fakeBody required for <FF4 when executed in <head>
fakeBody = doc.createElement( 'body' ),
div = doc.createElement( 'div' );
// For those that don't support matchMedium
if (!styleMedia) {
var style = document.createElement('style'),
script = document.getElementsByTagName('script')[0],
info = null;
div.id = 'mq-test-1';
div.style.cssText = 'position:absolute;top:-100em';
fakeBody.style.background = 'none';
fakeBody.appendChild(div);
style.type = 'text/css';
style.id = 'matchmediajs-test';
return function (q) {
script.parentNode.insertBefore(style, script);
div.innerHTML = '&shy;<style media="' + q + '"> #mq-test-1 { width: 42px; }</style>';
// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
docElem.insertBefore( fakeBody, refNode );
bool = div.offsetWidth === 42;
docElem.removeChild( fakeBody );
styleMedia = {
matchMedium: function(media) {
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
return {
matches : bool,
media : q
// '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'
};
};
};
}( document ));
}());
/*
* jquery.requestAnimationFrame
@@ -280,21 +288,30 @@
return string;
}
function MediaQuery(selector) {
this.selector = selector;
this.query = '';
}
MediaQuery.prototype.toString = function () {
return this.query || (this.query = S(this.selector).css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''));
};
window.Foundation = {
name : 'Foundation',
version : '5.5.1',
version : '5.5.3',
media_queries : {
'small' : S('.foundation-mq-small').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
'small-only' : S('.foundation-mq-small-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
'medium' : S('.foundation-mq-medium').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
'medium-only' : S('.foundation-mq-medium-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
'large' : S('.foundation-mq-large').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
'large-only' : S('.foundation-mq-large-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
'xlarge' : S('.foundation-mq-xlarge').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
'xlarge-only' : S('.foundation-mq-xlarge-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
'xxlarge' : S('.foundation-mq-xxlarge').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, '')
'small' : new MediaQuery('.foundation-mq-small'),
'small-only' : new MediaQuery('.foundation-mq-small-only'),
'medium' : new MediaQuery('.foundation-mq-medium'),
'medium-only' : new MediaQuery('.foundation-mq-medium-only'),
'large' : new MediaQuery('.foundation-mq-large'),
'large-only' : new MediaQuery('.foundation-mq-large-only'),
'xlarge' : new MediaQuery('.foundation-mq-xlarge'),
'xlarge-only' : new MediaQuery('.foundation-mq-xlarge-only'),
'xxlarge' : new MediaQuery('.foundation-mq-xxlarge')
},
stylesheet : $('<style></style>').appendTo('head')[0].sheet,
@@ -583,7 +600,7 @@
if (query !== undefined) {
Foundation.stylesheet.insertRule('@media ' +
Foundation.media_queries[media] + '{ ' + rule + ' }');
Foundation.media_queries[media] + '{ ' + rule + ' }', Foundation.stylesheet.cssRules.length);
}
}
},
@@ -599,7 +616,19 @@
var self = this,
unloaded = images.length;
if (unloaded === 0) {
function pictures_has_height(images) {
var pictures_number = images.length;
for (var i = pictures_number - 1; i >= 0; i--) {
if(images.attr('height') === undefined) {
return false;
};
};
return true;
}
if (unloaded === 0 || pictures_has_height(images)) {
callback(images);
}

View File

@@ -4,7 +4,7 @@
Foundation.libs['magellan-expedition'] = {
name : 'magellan-expedition',
version : '5.5.1',
version : '5.5.3',
settings : {
active_class : 'active',
@@ -32,38 +32,41 @@
S(self.scope)
.off('.magellan')
.on('click.fndtn.magellan', '[' + self.add_namespace('data-magellan-arrival') + '] a[href^="#"]', function (e) {
e.preventDefault();
var expedition = $(this).closest('[' + self.attr_name() + ']'),
settings = expedition.data('magellan-expedition-init'),
hash = this.hash.split('#').join(''),
target = $('a[name="' + hash + '"]');
.on('click.fndtn.magellan', '[' + self.add_namespace('data-magellan-arrival') + '] a[href*=#]', function (e) {
var sameHost = ((this.hostname === location.hostname) || !this.hostname),
samePath = self.filterPathname(location.pathname) === self.filterPathname(this.pathname),
testHash = this.hash.replace(/(:|\.|\/)/g, '\\$1'),
anchor = this;
if (target.length === 0) {
target = $('#' + hash);
if (sameHost && samePath && testHash) {
e.preventDefault();
var expedition = $(this).closest('[' + self.attr_name() + ']'),
settings = expedition.data('magellan-expedition-init'),
hash = this.hash.split('#').join(''),
target = $('a[name="' + hash + '"]');
}
if (target.length === 0) {
target = $('#' + hash);
// Account for expedition height if fixed position
var scroll_top = target.offset().top - settings.destination_threshold + 1;
if (settings.offset_by_height) {
scroll_top = scroll_top - expedition.outerHeight();
}
$('html, body').stop().animate({
'scrollTop' : scroll_top
}, settings.duration, settings.easing, function () {
if (history.pushState) {
history.pushState(null, null, '#' + hash);
} else {
location.hash = '#' + hash;
}
});
// Account for expedition height if fixed position
var scroll_top = target.offset().top - settings.destination_threshold + 1;
if (settings.offset_by_height) {
scroll_top = scroll_top - expedition.outerHeight();
}
$('html, body').stop().animate({
'scrollTop' : scroll_top
}, settings.duration, settings.easing, function () {
if (history.pushState) {
history.pushState(null, null, anchor.pathname + anchor.search + '#' + hash);
} else {
location.hash = anchor.pathname + anchor.search + '#' + hash;
}
});
}
})
.on('scroll.fndtn.magellan', self.throttle(this.check_for_arrivals.bind(this), settings.throttle_delay));
$(window)
.on('resize.fndtn.magellan', self.throttle(this.set_expedition_position.bind(this), settings.throttle_delay));
},
check_for_arrivals : function () {
@@ -194,6 +197,14 @@
this.S(window).off('.magellan');
},
filterPathname : function (pathname) {
pathname = pathname || '';
return pathname
.replace(/^\//,'')
.replace(/(?:index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
},
reflow : function () {
var self = this;
// remove placeholder expeditions used for height calculation purposes

View File

@@ -4,7 +4,7 @@
Foundation.libs.offcanvas = {
name : 'offcanvas',
version : '5.5.1',
version : '5.5.3',
settings : {
open_method : 'move',
@@ -20,16 +20,22 @@
S = self.S,
move_class = '',
right_postfix = '',
left_postfix = '';
left_postfix = '',
top_postfix = '',
bottom_postfix = '';
if (this.settings.open_method === 'move') {
move_class = 'move-';
right_postfix = 'right';
left_postfix = 'left';
top_postfix = 'top';
bottom_postfix = 'bottom';
} else if (this.settings.open_method === 'overlap_single') {
move_class = 'offcanvas-overlap-';
right_postfix = 'right';
left_postfix = 'left';
top_postfix = 'top';
bottom_postfix = 'bottom';
} else if (this.settings.open_method === 'overlap') {
move_class = 'offcanvas-overlap';
}
@@ -58,6 +64,7 @@
}
$('.left-off-canvas-toggle').attr('aria-expanded', 'true');
})
//end of left canvas
.on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
self.click_toggle_class(e, move_class + left_postfix);
if (self.settings.open_method !== 'overlap') {
@@ -81,6 +88,55 @@
}
$('.right-off-canvas-toggle').attr('aria-expanded', 'true');
})
//end of right canvas
.on('click.fndtn.offcanvas', '.top-off-canvas-toggle', function (e) {
self.click_toggle_class(e, move_class + bottom_postfix);
if (self.settings.open_method !== 'overlap') {
S('.top-submenu').removeClass(move_class + bottom_postfix);
}
$('.top-off-canvas-toggle').attr('aria-expanded', 'true');
})
.on('click.fndtn.offcanvas', '.top-off-canvas-menu a', function (e) {
var settings = self.get_settings(e);
var parent = S(this).parent();
if (settings.close_on_click && !parent.hasClass('has-submenu') && !parent.hasClass('back')) {
self.hide.call(self, move_class + bottom_postfix, self.get_wrapper(e));
parent.parent().removeClass(move_class + bottom_postfix);
} else if (S(this).parent().hasClass('has-submenu')) {
e.preventDefault();
S(this).siblings('.top-submenu').toggleClass(move_class + bottom_postfix);
} else if (parent.hasClass('back')) {
e.preventDefault();
parent.parent().removeClass(move_class + bottom_postfix);
}
$('.top-off-canvas-toggle').attr('aria-expanded', 'true');
})
//end of top canvas
.on('click.fndtn.offcanvas', '.bottom-off-canvas-toggle', function (e) {
self.click_toggle_class(e, move_class + top_postfix);
if (self.settings.open_method !== 'overlap') {
S('.bottom-submenu').removeClass(move_class + top_postfix);
}
$('.bottom-off-canvas-toggle').attr('aria-expanded', 'true');
})
.on('click.fndtn.offcanvas', '.bottom-off-canvas-menu a', function (e) {
var settings = self.get_settings(e);
var parent = S(this).parent();
if (settings.close_on_click && !parent.hasClass('has-submenu') && !parent.hasClass('back')) {
self.hide.call(self, move_class + top_postfix, self.get_wrapper(e));
parent.parent().removeClass(move_class + top_postfix);
} else if (S(this).parent().hasClass('has-submenu')) {
e.preventDefault();
S(this).siblings('.bottom-submenu').toggleClass(move_class + top_postfix);
} else if (parent.hasClass('back')) {
e.preventDefault();
parent.parent().removeClass(move_class + top_postfix);
}
$('.bottom-off-canvas-toggle').attr('aria-expanded', 'true');
})
//end of bottom
.on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
self.click_remove_class(e, move_class + left_postfix);
S('.right-submenu').removeClass(move_class + left_postfix);
@@ -97,6 +153,23 @@
self.click_remove_class(e, move_class + right_postfix);
$('.right-off-canvas-toggle').attr('aria-expanded', 'false');
}
})
.on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
self.click_remove_class(e, move_class + top_postfix);
S('.bottom-submenu').removeClass(move_class + top_postfix);
if (bottom_postfix) {
self.click_remove_class(e, move_class + bottom_postfix);
S('.top-submenu').removeClass(move_class + top_postfix);
}
$('.bottom-off-canvas-toggle').attr('aria-expanded', 'true');
})
.on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
self.click_remove_class(e, move_class + top_postfix);
$('.top-off-canvas-toggle').attr('aria-expanded', 'false');
if (bottom_postfix) {
self.click_remove_class(e, move_class + bottom_postfix);
$('.bottom-off-canvas-toggle').attr('aria-expanded', 'false');
}
});
},
@@ -111,13 +184,13 @@
show : function (class_name, $off_canvas) {
$off_canvas = $off_canvas || this.get_wrapper();
$off_canvas.trigger('open').trigger('open.fndtn.offcanvas');
$off_canvas.trigger('open.fndtn.offcanvas');
$off_canvas.addClass(class_name);
},
hide : function (class_name, $off_canvas) {
$off_canvas = $off_canvas || this.get_wrapper();
$off_canvas.trigger('close').trigger('close.fndtn.offcanvas');
$off_canvas.trigger('close.fndtn.offcanvas');
$off_canvas.removeClass(class_name);
},

View File

@@ -407,7 +407,7 @@
Foundation.libs.orbit = {
name : 'orbit',
version : '5.5.1',
version : '5.5.3',
settings : {
animation : 'slide',

View File

@@ -1,10 +1,12 @@
;(function ($, window, document, undefined) {
'use strict';
var openModals = [];
Foundation.libs.reveal = {
name : 'reveal',
version : '5.5.1',
version : '5.5.3',
locked : false,
@@ -21,6 +23,7 @@
opened : function(){},
close : function(){},
closed : function(){},
on_ajax_error: $.noop,
bg : $('.reveal-modal-bg'),
css : {
open : {
@@ -52,7 +55,8 @@
if (!self.locked) {
var element = S(this),
ajax = element.data(self.data_attr('reveal-ajax'));
ajax = element.data(self.data_attr('reveal-ajax')),
replaceContentSel = element.data(self.data_attr('reveal-replace-content'));
self.locked = true;
@@ -60,8 +64,7 @@
self.open.call(self, element);
} else {
var url = ajax === true ? element.attr('href') : ajax;
self.open.call(self, element, {url : url});
self.open.call(self, element, {url : url}, { replaceContentSel : replaceContentSel });
}
}
});
@@ -82,7 +85,7 @@
}
self.locked = true;
self.close.call(self, bg_clicked ? S('[' + self.attr_name() + '].open') : S(this).closest('[' + self.attr_name() + ']'));
self.close.call(self, bg_clicked ? S('[' + self.attr_name() + '].open:not(.toback)') : S(this).closest('[' + self.attr_name() + ']'));
}
});
@@ -153,7 +156,8 @@
var settings = modal.data(self.attr_name(true) + '-init');
settings = settings || this.settings;
if (modal.hasClass('open') && target.attr('data-reveal-id') == modal.attr('id')) {
if (modal.hasClass('open') && target !== undefined && target.attr('data-reveal-id') == modal.attr('id')) {
return self.close(modal);
}
@@ -165,8 +169,15 @@
.data('offset', this.cache_offset(modal));
}
modal.attr('tabindex','0').attr('aria-hidden','false');
this.key_up_on(modal); // PATCH #3: turning on key up capture only when a reveal window is open
// Prevent namespace event from triggering twice
modal.on('open.fndtn.reveal', function(e) {
if (e.namespace !== 'fndtn.reveal') return;
});
modal.on('open.fndtn.reveal').trigger('open.fndtn.reveal');
if (open_modal.length < 1) {
@@ -179,19 +190,27 @@
};
}
if (typeof ajax_settings === 'undefined' || !ajax_settings.url) {
if (open_modal.length > 0) {
if (settings.multiple_opened) {
this.to_back(open_modal);
var openModal = function() {
if(open_modal.length > 0) {
if(settings.multiple_opened) {
self.to_back(open_modal);
} else {
this.hide(open_modal, settings.css.close);
self.hide(open_modal, settings.css.close);
}
}
this.show(modal, settings.css.open);
// bl: add the open_modal that isn't already in the background to the openModals array
if(settings.multiple_opened) {
openModals.push(modal);
}
self.show(modal, settings.css.open);
};
if (typeof ajax_settings === 'undefined' || !ajax_settings.url) {
openModal();
} else {
var old_success = typeof ajax_settings.success !== 'undefined' ? ajax_settings.success : null;
$.extend(ajax_settings, {
success : function (data, textStatus, jqXHR) {
if ( $.isFunction(old_success) ) {
@@ -201,21 +220,26 @@
}
}
modal.html(data);
if (typeof options !== 'undefined' && typeof options.replaceContentSel !== 'undefined') {
modal.find(options.replaceContentSel).html(data);
} else {
modal.html(data);
}
self.S(modal).foundation('section', 'reflow');
self.S(modal).children().foundation();
if (open_modal.length > 0) {
if (settings.multiple_opened) {
this.to_back(open_modal);
} else {
this.hide(open_modal, settings.css.close);
}
}
self.show(modal, settings.css.open);
openModal();
}
});
// check for if user initalized with error callback
if (settings.on_ajax_error !== $.noop) {
$.extend(ajax_settings, {
error : settings.on_ajax_error
});
}
$.ajax(ajax_settings);
}
}
@@ -225,23 +249,47 @@
close : function (modal) {
var modal = modal && modal.length ? modal : this.S(this.scope),
open_modals = this.S('[' + this.attr_name() + '].open'),
settings = modal.data(this.attr_name(true) + '-init') || this.settings;
settings = modal.data(this.attr_name(true) + '-init') || this.settings,
self = this;
if (open_modals.length > 0) {
modal.removeAttr('tabindex','0').attr('aria-hidden','true');
this.locked = true;
this.key_up_off(modal); // PATCH #3: turning on key up capture only when a reveal window is open
modal.trigger('close').trigger('close.fndtn.reveal');
modal.trigger('close.fndtn.reveal');
if ((settings.multiple_opened && open_modals.length === 1) || !settings.multiple_opened || modal.length > 1) {
this.toggle_bg(modal, false);
this.to_front(modal);
self.toggle_bg(modal, false);
self.to_front(modal);
}
if (settings.multiple_opened) {
this.hide(modal, settings.css.close, settings);
this.to_front($($.makeArray(open_modals).reverse()[1]));
var isCurrent = modal.is(':not(.toback)');
self.hide(modal, settings.css.close, settings);
if(isCurrent) {
// remove the last modal since it is now closed
openModals.pop();
} else {
// if this isn't the current modal, then find it in the array and remove it
openModals = $.grep(openModals, function(elt) {
var isThis = elt[0]===modal[0];
if(isThis) {
// since it's not currently in the front, put it in the front now that it is hidden
// so that if it's re-opened, it won't be .toback
self.to_front(modal);
}
return !isThis;
});
}
// finally, show the next modal in the stack, if there is one
if(openModals.length>0) {
self.to_front(openModals[openModals.length - 1]);
}
} else {
this.hide(open_modals, settings.css.close, settings);
self.hide(open_modals, settings.css.close, settings);
}
}
},
@@ -276,7 +324,8 @@
// is modal
if (css) {
var settings = el.data(this.attr_name(true) + '-init') || this.settings,
root_element = settings.root_element;
root_element = settings.root_element,
context = this;
if (el.parent(root_element).length === 0) {
var placeholder = el.wrap('<div style="display: none;" />').parent();
@@ -304,29 +353,30 @@
return el
.css(css)
.animate(end_css, settings.animation_speed, 'linear', function () {
this.locked = false;
el.trigger('opened').trigger('opened.fndtn.reveal');
}.bind(this))
context.locked = false;
el.trigger('opened.fndtn.reveal');
})
.addClass('open');
}.bind(this), settings.animation_speed / 2);
}, settings.animation_speed / 2);
}
css.top = $(window).scrollTop() + el.data('css-top') + 'px';
if (animData.fade) {
css.top = $(window).scrollTop() + el.data('css-top') + 'px';
var end_css = {opacity: 1};
return setTimeout(function () {
return el
.css(css)
.animate(end_css, settings.animation_speed, 'linear', function () {
this.locked = false;
el.trigger('opened').trigger('opened.fndtn.reveal');
}.bind(this))
context.locked = false;
el.trigger('opened.fndtn.reveal');
})
.addClass('open');
}.bind(this), settings.animation_speed / 2);
}, settings.animation_speed / 2);
}
return el.css(css).show().css({opacity : 1}).addClass('open').trigger('opened').trigger('opened.fndtn.reveal');
return el.css(css).show().css({opacity : 1}).addClass('open').trigger('opened.fndtn.reveal');
}
var settings = this.settings;
@@ -340,11 +390,11 @@
return el.show();
},
to_back : function(el) {
el.addClass('toback');
},
to_front : function(el) {
el.removeClass('toback');
},
@@ -352,7 +402,8 @@
hide : function (el, css) {
// is modal
if (css) {
var settings = el.data(this.attr_name(true) + '-init');
var settings = el.data(this.attr_name(true) + '-init'),
context = this;
settings = settings || this.settings;
var animData = getAnimationData(settings.animation);
@@ -368,11 +419,11 @@
return setTimeout(function () {
return el
.animate(end_css, settings.animation_speed, 'linear', function () {
this.locked = false;
el.css(css).trigger('closed').trigger('closed.fndtn.reveal');
}.bind(this))
context.locked = false;
el.css(css).trigger('closed.fndtn.reveal');
})
.removeClass('open');
}.bind(this), settings.animation_speed / 2);
}, settings.animation_speed / 2);
}
if (animData.fade) {
@@ -381,14 +432,14 @@
return setTimeout(function () {
return el
.animate(end_css, settings.animation_speed, 'linear', function () {
this.locked = false;
el.css(css).trigger('closed').trigger('closed.fndtn.reveal');
}.bind(this))
context.locked = false;
el.css(css).trigger('closed.fndtn.reveal');
})
.removeClass('open');
}.bind(this), settings.animation_speed / 2);
}, settings.animation_speed / 2);
}
return el.hide().css(css).removeClass('open').trigger('closed').trigger('closed.fndtn.reveal');
return el.hide().css(css).removeClass('open').trigger('closed.fndtn.reveal');
}
var settings = this.settings;
@@ -438,7 +489,7 @@
},
cache_offset : function (modal) {
var offset = modal.show().height() + parseInt(modal.css('top'), 10);
var offset = modal.show().height() + parseInt(modal.css('top'), 10) + modal.scrollY;
modal.hide();

View File

@@ -4,13 +4,13 @@
Foundation.libs.slider = {
name : 'slider',
version : '5.5.1',
version : '5.5.3',
settings : {
start : 0,
end : 100,
step : 1,
precision : null,
precision : 2,
initial : null,
display_selector : '',
vertical : false,
@@ -28,7 +28,6 @@
events : function () {
var self = this;
$(this.scope)
.off('.slider')
.on('mousedown.fndtn.slider touchstart.fndtn.slider pointerdown.fndtn.slider',
@@ -53,6 +52,23 @@
}
})
.on('mouseup.fndtn.slider touchend.fndtn.slider pointerup.fndtn.slider', function (e) {
if(!self.cache.active) {
// if the user has just clicked into the slider without starting to drag the handle
var slider = $(e.target).attr('role') === 'slider' ? $(e.target) : $(e.target).closest('.range-slider').find("[role='slider']");
if (slider.length && (!slider.parent().hasClass('disabled') && !slider.parent().attr('disabled'))) {
self.set_active_slider(slider);
if ($.data(self.cache.active[0], 'settings').vertical) {
var scroll_offset = 0;
if (!e.pageY) {
scroll_offset = window.scrollY;
}
self.calculate_position(self.cache.active, self.get_cursor_position(e, 'y') + scroll_offset);
} else {
self.calculate_position(self.cache.active, self.get_cursor_position(e, 'x'));
}
}
}
self.remove_active_slider();
})
.on('change.fndtn.slider', function (e) {
@@ -63,6 +79,23 @@
.on('resize.fndtn.slider', self.throttle(function (e) {
self.reflow();
}, 300));
// update slider value as users change input value
this.S('[' + this.attr_name() + ']').each(function () {
var slider = $(this),
handle = slider.children('.range-slider-handle')[0],
settings = self.initialize_settings(handle);
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if ($(this).attr('value')) {
$(this).off('change').on('change', function () {
slider.foundation("slider", "set_value", $(this).val());
});
}
});
}
});
},
get_cursor_position : function (e, xy) {
@@ -139,11 +172,11 @@
$handle.siblings('.range-slider-active-segment').css('width', progress_bar_length + '%');
}
$handle_parent.attr(this.attr_name(), value).trigger('change').trigger('change.fndtn.slider');
$handle_parent.attr(this.attr_name(), value).trigger('change.fndtn.slider');
$hidden_inputs.val(value);
if (settings.trigger_input_change) {
$hidden_inputs.trigger('change');
$hidden_inputs.trigger('change.fndtn.slider');
}
if (!$handle[0].hasAttribute('aria-valuemin')) {
@@ -156,7 +189,7 @@
if (settings.display_selector != '') {
$(settings.display_selector).each(function () {
if (this.hasOwnProperty('value')) {
if (this.hasAttribute('value')) {
$(this).val(value);
} else {
$(this).text(value);
@@ -223,7 +256,7 @@
}
$.data(handle, 'bar', $(handle).parent());
$.data(handle, 'settings', settings);
return $.data(handle, 'settings', settings);
},
set_initial_position : function ($ele) {

View File

@@ -4,7 +4,7 @@
Foundation.libs.tab = {
name : 'tab',
version : '5.5.1',
version : '5.5.3',
settings : {
active_class : 'active',
@@ -20,40 +20,51 @@
var self = this,
S = this.S;
// Store the default active tabs which will be referenced when the
// location hash is absent, as in the case of navigating the tabs and
// returning to the first viewing via the browser Back button.
S('[' + this.attr_name() + '] > .active > a', this.scope).each(function () {
self.default_tab_hashes.push(this.hash);
});
this.bindings(method, options);
// store the initial href, which is used to allow correct behaviour of the
// browser back button when deep linking is turned on.
self.entry_location = window.location.href;
this.handle_location_hash_change();
// Store the default active tabs which will be referenced when the
// location hash is absent, as in the case of navigating the tabs and
// returning to the first viewing via the browser Back button.
S('[' + this.attr_name() + '] > .active > a', this.scope).each(function () {
self.default_tab_hashes.push(this.hash);
});
},
events : function () {
var self = this,
S = this.S;
var usual_tab_behavior = function (e) {
var settings = S(this).closest('[' + self.attr_name() + ']').data(self.attr_name(true) + '-init');
if (!settings.is_hover || Modernizr.touch) {
var usual_tab_behavior = function (e, target) {
var settings = S(target).closest('[' + self.attr_name() + ']').data(self.attr_name(true) + '-init');
if (!settings.is_hover || Modernizr.touch) {
// if user did not pressed tab key, prevent default action
var keyCode = e.keyCode || e.which;
if (keyCode !== 9) {
e.preventDefault();
e.stopPropagation();
self.toggle_active_tab(S(this).parent());
}
};
self.toggle_active_tab(S(target).parent());
}
};
S(this.scope)
.off('.tab')
// Key event: focus/tab key
.on('keydown.fndtn.tab', '[' + this.attr_name() + '] > * > a', function(e) {
var keyCode = e.keyCode || e.which;
// if user pressed tab key
if (keyCode === 13 || keyCode === 32) { // enter or space
var el = this;
usual_tab_behavior(e, el);
}
})
// Click event: tab title
.on('focus.fndtn.tab', '[' + this.attr_name() + '] > * > a', usual_tab_behavior )
.on('click.fndtn.tab', '[' + this.attr_name() + '] > * > a', usual_tab_behavior )
.on('click.fndtn.tab', '[' + this.attr_name() + '] > * > a', function(e) {
var el = this;
usual_tab_behavior(e, el);
})
// Hover event: tab title
.on('mouseenter.fndtn.tab', '[' + this.attr_name() + '] > * > a', function (e) {
var settings = S(this).closest('[' + self.attr_name() + ']').data(self.attr_name(true) + '-init');
@@ -169,17 +180,16 @@
go_to_hash = function(hash) {
// This function allows correct behaviour of the browser's back button when deep linking is enabled. Without it
// the user would get continually redirected to the default hash.
var is_entry_location = window.location.href === self.entry_location,
default_hash = settings.scroll_to_content ? self.default_tab_hashes[0] : is_entry_location ? window.location.hash :'fndtn-' + self.default_tab_hashes[0].replace('#', '')
var default_hash = settings.scroll_to_content ? self.default_tab_hashes[0] : 'fndtn-' + self.default_tab_hashes[0].replace('#', '');
if (!(is_entry_location && hash === default_hash)) {
if (hash !== default_hash || window.location.hash) {
window.location.hash = hash;
}
};
// allow usage of data-tab-content attribute instead of href
if (S(this).data(this.data_attr('tab-content'))) {
target_hash = '#' + S(this).data(this.data_attr('tab-content')).split('#')[1];
if (anchor.data('tab-content')) {
target_hash = '#' + anchor.data('tab-content').split('#')[1];
target = S(target_hash);
}
@@ -212,12 +222,12 @@
tab.addClass(settings.active_class).triggerHandler('opened');
tab_link.attr({'aria-selected' : 'true', tabindex : 0});
siblings.removeClass(settings.active_class)
siblings.find('a').attr({'aria-selected' : 'false', tabindex : -1});
target.siblings().removeClass(settings.active_class).attr({'aria-hidden' : 'true', tabindex : -1});
siblings.find('a').attr({'aria-selected' : 'false'/*, tabindex : -1*/});
target.siblings().removeClass(settings.active_class).attr({'aria-hidden' : 'true'/*, tabindex : -1*/});
target.addClass(settings.active_class).attr('aria-hidden', 'false').removeAttr('tabindex');
settings.callback(tab);
target.triggerHandler('toggled', [tab]);
tabs.triggerHandler('toggled', [target]);
target.triggerHandler('toggled', [target]);
tabs.triggerHandler('toggled', [tab]);
tab_link.off('keydown').on('keydown', interpret_keyup_action );
},

View File

@@ -4,7 +4,7 @@
Foundation.libs.tooltip = {
name : 'tooltip',
version : '5.5.1',
version : '5.5.3',
settings : {
additional_inheritable_classes : [],
@@ -13,6 +13,8 @@
touch_close_text : 'Tap To Close',
disable_for_touch : false,
hover_delay : 200,
fade_in_duration : 150,
fade_out_duration : 150,
show_on : 'all',
tip_template : function (selector, content) {
return '<span data-selector="' + selector + '" id="' + selector + '" class="'
@@ -57,6 +59,31 @@
self.create(this.S(instance));
function _startShow(elt, $this, immediate) {
if (elt.timer) {
return;
}
if (immediate) {
elt.timer = null;
self.showTip($this);
} else {
elt.timer = setTimeout(function () {
elt.timer = null;
self.showTip($this);
}.bind(elt), self.settings.hover_delay);
}
}
function _startHide(elt, $this) {
if (elt.timer) {
clearTimeout(elt.timer);
elt.timer = null;
}
self.hide($this);
}
$(this.scope)
.off('.tooltip')
.on('mouseenter.fndtn.tooltip mouseleave.fndtn.tooltip touchstart.fndtn.tooltip MSPointerDown.fndtn.tooltip',
@@ -72,7 +99,7 @@
if (/mouse/i.test(e.type) && self.ie_touch(e)) {
return false;
}
if ($this.hasClass('open')) {
if (Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type)) {
e.preventDefault();
@@ -85,17 +112,20 @@
e.preventDefault();
S(settings.tooltip_class + '.open').hide();
is_touch = true;
// close other open tooltips on touch
if ($('.open[' + self.attr_name() + ']').length > 0) {
var prevOpen = S($('.open[' + self.attr_name() + ']')[0]);
self.hide(prevOpen);
}
}
if (/enter|over/i.test(e.type)) {
this.timer = setTimeout(function () {
var tip = self.showTip($this);
}.bind(this), self.settings.hover_delay);
_startShow(this, $this);
} else if (e.type === 'mouseout' || e.type === 'mouseleave') {
clearTimeout(this.timer);
self.hide($this);
_startHide(this, $this);
} else {
self.showTip($this);
_startShow(this, $this, true);
}
}
})
@@ -109,11 +139,11 @@
} else if ($(this).data('tooltip-open-event-type') == 'mouse' && /MSPointerDown|touchstart/i.test(e.type)) {
self.convert_to_touch($(this));
} else {
self.hide($(this));
_startHide(this, $(this));
}
})
.on('DOMNodeRemoved DOMAttrModified', '[' + this.attr_name() + ']:not(a)', function (e) {
self.hide(S(this));
_startHide(this, S(this));
});
},
@@ -143,17 +173,16 @@
},
selector : function ($target) {
var id = $target.attr('id'),
dataSelector = $target.attr(this.attr_name()) || $target.attr('data-selector');
var dataSelector = $target.attr(this.attr_name()) || $target.attr('data-selector');
if ((id && id.length < 1 || !id) && typeof dataSelector != 'string') {
if (typeof dataSelector != 'string') {
dataSelector = this.random_str(6);
$target
.attr('data-selector', dataSelector)
.attr('aria-describedby', dataSelector);
}
return (id && id.length > 0) ? id : dataSelector;
return dataSelector;
},
create : function ($target) {
@@ -181,14 +210,14 @@
},
reposition : function (target, tip, classes) {
var width, nub, nubHeight, nubWidth, column, objPos;
var width, nub, nubHeight, nubWidth, objPos;
tip.css('visibility', 'hidden').show();
width = target.data('width');
nub = tip.children('.nub');
nubHeight = nub.outerHeight();
nubWidth = nub.outerHeight();
nubWidth = nub.outerWidth();
if (this.small()) {
tip.css({'width' : '100%'});
@@ -204,33 +233,46 @@
'right' : (right) ? right : 'auto'
}).end();
};
var o_top = target.offset().top;
var o_left = target.offset().left;
var outerHeight = target.outerHeight();
objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', target.offset().left);
objPos(tip, (o_top + outerHeight + 10), 'auto', 'auto', o_left);
if (this.small()) {
objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', 12.5, $(this.scope).width());
objPos(tip, (o_top + outerHeight + 10), 'auto', 'auto', 12.5, $(this.scope).width());
tip.addClass('tip-override');
objPos(nub, -nubHeight, 'auto', 'auto', target.offset().left);
objPos(nub, -nubHeight, 'auto', 'auto', o_left);
} else {
var left = target.offset().left;
if (Foundation.rtl) {
nub.addClass('rtl');
left = target.offset().left + target.outerWidth() - tip.outerWidth();
o_left = o_left + target.outerWidth() - tip.outerWidth();
}
objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', left);
objPos(tip, (o_top + outerHeight + 10), 'auto', 'auto', o_left);
// reset nub from small styles, if they've been applied
if (nub.attr('style')) {
nub.removeAttr('style');
}
tip.removeClass('tip-override');
var tip_outerHeight = tip.outerHeight();
if (classes && classes.indexOf('tip-top') > -1) {
if (Foundation.rtl) {
nub.addClass('rtl');
}
objPos(tip, (target.offset().top - tip.outerHeight()), 'auto', 'auto', left)
objPos(tip, (o_top - tip_outerHeight), 'auto', 'auto', o_left)
.removeClass('tip-override');
} else if (classes && classes.indexOf('tip-left') > -1) {
objPos(tip, (target.offset().top + (target.outerHeight() / 2) - (tip.outerHeight() / 2)), 'auto', 'auto', (target.offset().left - tip.outerWidth() - nubHeight))
objPos(tip, (o_top + (outerHeight / 2) - (tip_outerHeight / 2)), 'auto', 'auto', (o_left - tip.outerWidth() - nubHeight))
.removeClass('tip-override');
nub.removeClass('rtl');
} else if (classes && classes.indexOf('tip-right') > -1) {
objPos(tip, (target.offset().top + (target.outerHeight() / 2) - (tip.outerHeight() / 2)), 'auto', 'auto', (target.offset().left + target.outerWidth() + nubHeight))
objPos(tip, (o_top + (outerHeight / 2) - (tip_outerHeight / 2)), 'auto', 'auto', (o_left + target.outerWidth() + nubHeight))
.removeClass('tip-override');
nub.removeClass('rtl');
}
@@ -274,20 +316,19 @@
show : function ($target) {
var $tip = this.getTip($target);
if ($target.data('tooltip-open-event-type') == 'touch') {
this.convert_to_touch($target);
}
this.reposition($target, $tip, $target.attr('class'));
$target.addClass('open');
$tip.fadeIn(150);
$tip.fadeIn(this.settings.fade_in_duration);
},
hide : function ($target) {
var $tip = this.getTip($target);
$tip.fadeOut(150, function () {
$tip.fadeOut(this.settings.fade_out_duration, function () {
$tip.find('.tap-to-close').remove();
$tip.off('click.fndtn.tooltip.tapclose MSPointerDown.fndtn.tapclose');
$target.removeClass('open');

View File

@@ -4,17 +4,19 @@
Foundation.libs.topbar = {
name : 'topbar',
version : '5.5.1',
version : '5.5.3',
settings : {
index : 0,
start_offset : 0,
sticky_class : 'sticky',
custom_back_text : true,
back_text : 'Back',
mobile_show_parent_link : true,
is_hover : true,
scrolltop : true, // jump to top when sticky nav menu toggle is clicked
sticky_on : 'all'
sticky_on : 'all',
dropdown_autoclose: true
},
init : function (section, method, options) {
@@ -65,24 +67,20 @@
var smallMatch = matchMedia(Foundation.media_queries.small).matches;
var medMatch = matchMedia(Foundation.media_queries.medium).matches;
var lrgMatch = matchMedia(Foundation.media_queries.large).matches;
if (sticky && settings.sticky_on === 'all') {
return true;
}
if (sticky && this.small() && settings.sticky_on.indexOf('small') !== -1) {
if (smallMatch && !medMatch && !lrgMatch) { return true; }
}
if (sticky && this.medium() && settings.sticky_on.indexOf('medium') !== -1) {
if (smallMatch && medMatch && !lrgMatch) { return true; }
}
if (sticky && this.large() && settings.sticky_on.indexOf('large') !== -1) {
if (smallMatch && medMatch && lrgMatch) { return true; }
}
// fix for iOS browsers
if (sticky && navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
if (sticky && settings.sticky_on === 'all') {
return true;
}
}
if (sticky && this.small() && settings.sticky_on.indexOf('small') !== -1) {
if (smallMatch && !medMatch && !lrgMatch) { return true; }
}
if (sticky && this.medium() && settings.sticky_on.indexOf('medium') !== -1) {
if (smallMatch && medMatch && !lrgMatch) { return true; }
}
if (sticky && this.large() && settings.sticky_on.indexOf('large') !== -1) {
if (smallMatch && medMatch && lrgMatch) { return true; }
}
return false;
},
@@ -166,11 +164,19 @@
e.preventDefault();
self.toggle(this);
})
.on('click.fndtn.topbar', '.top-bar .top-bar-section li a[href^="#"],[' + this.attr_name() + '] .top-bar-section li a[href^="#"]', function (e) {
var li = $(this).closest('li');
if (self.breakpoint() && !li.hasClass('back') && !li.hasClass('has-dropdown')) {
self.toggle();
}
.on('click.fndtn.topbar contextmenu.fndtn.topbar', '.top-bar .top-bar-section li a[href^="#"],[' + this.attr_name() + '] .top-bar-section li a[href^="#"]', function (e) {
var li = $(this).closest('li'),
topbar = li.closest('[' + self.attr_name() + ']'),
settings = topbar.data(self.attr_name(true) + '-init');
if (settings.dropdown_autoclose && settings.is_hover) {
var hoverLi = $(this).closest('.hover');
hoverLi.removeClass('hover');
}
if (self.breakpoint() && !li.hasClass('back') && !li.hasClass('has-dropdown')) {
self.toggle();
}
})
.on('click.fndtn.topbar', '[' + this.attr_name() + '] li.has-dropdown', function (e) {
var li = S(this),
@@ -239,7 +245,7 @@
S(window).off('.topbar').on('resize.fndtn.topbar', self.throttle(function () {
self.resize.call(self);
}, 50)).trigger('resize').trigger('resize.fndtn.topbar').load(function () {
}, 50)).trigger('resize.fndtn.topbar').load(function () {
// Ensure that the offset is calculated after all of the pages resources have loaded
S(this).trigger('resize.fndtn.topbar');
});
@@ -372,7 +378,7 @@
if (!$dropdown.find('.title.back').length) {
if (settings.mobile_show_parent_link == true && url) {
$titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5></li><li class="parent-link hide-for-large-up"><a class="parent-link js-generated" href="' + url + '">' + $link.html() +'</a></li>');
$titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="' + url + '">' + $link.html() +'</a></li>');
} else {
$titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5>');
}
@@ -424,8 +430,8 @@
$window = this.S(window),
self = this;
if (self.settings.sticky_topbar && self.is_sticky(this.settings.sticky_topbar, this.settings.sticky_topbar.parent(), this.settings)) {
var distance = this.settings.sticky_topbar.data('stickyoffset');
if (self.settings.sticky_topbar && self.is_sticky(this.settings.sticky_topbar,this.settings.sticky_topbar.parent(), this.settings)) {
var distance = this.settings.sticky_topbar.data('stickyoffset') + this.settings.start_offset;
if (!self.S(klass).hasClass('expanded')) {
if ($window.scrollTop() > (distance)) {
if (!self.S(klass).hasClass('fixed')) {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,57 @@
{
"name": "foundation-sites",
"version": "5.5.3",
"main": "js/foundation/foundation.js",
"scripts": {
"start": "grunt"
},
"devDependencies": {
"assemble": "~0.4.37",
"grunt": "~0.4.4",
"grunt-cli": "^0.1.13",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-compress": "~0.7.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-connect": "~0.7.1",
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-cssmin": "^0.12.2",
"grunt-contrib-jasmine": "~0.6.3",
"grunt-contrib-jst": "~0.5.1",
"grunt-contrib-sass": "~0.8.1",
"grunt-contrib-uglify": "~0.4.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-karma": "~0.6.2",
"grunt-newer": "~0.7.0",
"grunt-rsync": "~0.2.1",
"grunt-string-replace": "~0.2.7",
"handlebars-helper-rel": "~0.1.2",
"handlebars-helper-slugify": "~0.2.0",
"highlight.js": "~7.3.0",
"jasmine-jquery": "imtapps/node-jasmine-jquery",
"karma": "~0.10.4",
"karma-browserstack-launcher": "0.0.4",
"karma-chrome-launcher": "~0.1.0",
"karma-firefox-launcher": "~0.1.0",
"karma-html2js-preprocessor": "~0.1.0",
"karma-ie-launcher": "~0.1.1",
"karma-jasmine": "~0.1.3",
"karma-phantomjs-launcher": "~0.1.0",
"karma-safari-launcher": "~0.1.1",
"karma-script-launcher": "~0.1.0",
"load-grunt-config": "~0.16.0"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation"
},
"keywords": [
"handlebars-helper-rel",
"handlebars-helper-slugify"
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/zurb/foundation/blob/master/LICENSE"
}
]
}

View File

@@ -1,45 +1,42 @@
@charset "UTF-8";
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// Make sure the charset is set appropriately
// Behold, here are all the Foundation components.
@import "foundation/components/grid";
@import "foundation/components/accordion";
@import "foundation/components/alert-boxes";
@import "foundation/components/block-grid";
@import "foundation/components/breadcrumbs";
@import "foundation/components/button-groups";
@import "foundation/components/buttons";
@import "foundation/components/clearing";
@import "foundation/components/dropdown";
@import "foundation/components/dropdown-buttons";
@import "foundation/components/flex-video";
@import "foundation/components/forms";
@import "foundation/components/icon-bar";
@import "foundation/components/inline-lists";
@import "foundation/components/joyride";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
@import "foundation/components/magellan";
@import "foundation/components/orbit";
@import "foundation/components/pagination";
@import "foundation/components/panels";
@import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/range-slider";
@import "foundation/components/reveal";
@import "foundation/components/side-nav";
@import "foundation/components/split-buttons";
@import "foundation/components/sub-nav";
@import "foundation/components/switches";
@import "foundation/components/tables";
@import "foundation/components/tabs";
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/top-bar";
@import "foundation/components/type";
@import "foundation/components/offcanvas";
@import "foundation/components/visibility";
@import 'foundation/components/grid';
@import 'foundation/components/accordion';
@import 'foundation/components/alert-boxes';
@import 'foundation/components/block-grid';
@import 'foundation/components/breadcrumbs';
@import 'foundation/components/button-groups';
@import 'foundation/components/buttons';
@import 'foundation/components/clearing';
@import 'foundation/components/dropdown';
@import 'foundation/components/dropdown-buttons';
@import 'foundation/components/flex-video';
@import 'foundation/components/forms';
@import 'foundation/components/icon-bar';
@import 'foundation/components/inline-lists';
@import 'foundation/components/joyride';
@import 'foundation/components/keystrokes';
@import 'foundation/components/labels';
@import 'foundation/components/magellan';
@import 'foundation/components/orbit';
@import 'foundation/components/pagination';
@import 'foundation/components/panels';
@import 'foundation/components/pricing-tables';
@import 'foundation/components/progress-bars';
@import 'foundation/components/range-slider';
@import 'foundation/components/reveal';
@import 'foundation/components/side-nav';
@import 'foundation/components/split-buttons';
@import 'foundation/components/sub-nav';
@import 'foundation/components/switches';
@import 'foundation/components/tables';
@import 'foundation/components/tabs';
@import 'foundation/components/thumbs';
@import 'foundation/components/tooltips';
@import 'foundation/components/top-bar';
@import 'foundation/components/type';
@import 'foundation/components/offcanvas';
@import 'foundation/components/visibility';

View File

@@ -8,6 +8,7 @@ $rem-base: 16px !default;
// IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for components that rely on other components.
$modules: () !default;
@mixin exports($name) {
// Import from global scope
$modules: $modules !global;
@@ -26,11 +27,11 @@ $modules: () !default;
// RANGES
// We use these functions to define ranges for various things, like media queries.
@function lower-bound($range){
@function lower-bound($range) {
@if length($range) <= 0 {
@return 0;
}
@return nth($range,1);
@return nth($range, 1);
}
@function upper-bound($range) {
@@ -50,45 +51,45 @@ $modules: () !default;
@function text-inputs( $types: all, $selector: input ) {
$return: ();
$return: ();
$all-text-input-types:
text
password
date
datetime
datetime-local
month
week
email
number
search
tel
time
url
color
textarea;
$all-text-input-types:
text
password
date
datetime
datetime-local
month
week
email
number
search
tel
time
url
color
textarea;
@if $types == all { $types: $all-text-input-types; }
@if $types == all { $types: $all-text-input-types; }
@each $type in $types {
@if $type == textarea {
@if $selector == input {
$return: append($return, unquote('#{$type}'), comma)
} @else {
$return: append($return, unquote('#{$type}#{$selector}'), comma)
}
} @else {
$return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma)
}
@each $type in $types {
@if $type == textarea {
@if $selector == input {
$return: append($return, unquote('#{$type}'), comma)
} @else {
$return: append($return, unquote('#{$type}#{$selector}'), comma)
}
} @else {
$return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma)
}
}
@return $return;
}
// CONVERT TO REM
@function convert-to-rem($value, $base-value: $rem-base) {
@function convert-to-rem($value, $base-value: $rem-base) {
$value: strip-unit($value) / strip-unit($base-value) * 1rem;
@if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
@return $value;
@@ -133,14 +134,23 @@ $modules: () !default;
@return $remValues;
}
// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
@function emCalc($values){
@return rem-calc($values);
@function em-calc($values, $base-value: $rem-base) {
$remValues: rem-calc($values, $base-value: $rem-base);
$max: length($remValues);
@if $max == 1 { @return strip-unit(nth($remValues, 1)) * 1em; }
$emValues: ();
@for $i from 1 through $max {
$emValues: append($emValues, strip-unit(nth($remValues, $i)) * 1em);
}
@return $emValues;
}
// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
@function em-calc($values){
@return rem-calc($values);
// Deprecated: OLD EM CALC
@function emCalc($values) {
@return em-calc($values);
}

View File

@@ -6,7 +6,7 @@
// Table of Contents
// Foundation Settings
//
// a. Base
// b. Grid
// c. Global
@@ -55,7 +55,7 @@
// $rem-base: 16px;
// Allows the use of rem-calc() or lower-bound() in your settings
@import "foundation/functions";
@import 'foundation/functions';
// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.
@@ -83,8 +83,6 @@ $include-html-global-classes: $include-html-classes;
// $total-columns: 12;
// $column-gutter: rem-calc(30);
// $last-child-float: $opposite-direction;
// c. Global
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -153,11 +151,16 @@ $include-html-global-classes: $include-html-classes;
// d. Media Query Ranges
// - - - - - - - - - - - - - - - - - - - - - - - - -
// $small-range: (0em, 40em);
// $medium-range: (40.063em, 64em);
// $large-range: (64.063em, 90em);
// $xlarge-range: (90.063em, 120em);
// $xxlarge-range: (120.063em, 99999999em);
// $small-breakpoint: em-calc(640);
// $medium-breakpoint: em-calc(1024);
// $large-breakpoint: em-calc(1440);
// $xlarge-breakpoint: em-calc(1920);
// $small-range: (0, $small-breakpoint);
// $medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint);
// $large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint);
// $xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint);
// $xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));
// $screen: "only screen";
@@ -179,6 +182,15 @@ $include-html-global-classes: $include-html-classes;
// $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
// $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
// $retina: (
// "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
// "#{$screen} and (min--moz-device-pixel-ratio: 2)",
// "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
// "#{$screen} and (min-device-pixel-ratio: 2)",
// "#{$screen} and (min-resolution: 192dpi)",
// "#{$screen} and (min-resolution: 2dppx)"
// );
// Legacy
// $small: $medium-up;
// $medium: $medium-up;
@@ -324,6 +336,7 @@ $include-html-global-classes: $include-html-classes;
// $accordion-navigation-bg-color: $silver;
// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
// $accordion-navigation-active-font-color: $jet;
// $accordion-navigation-font-color: $jet;
// $accordion-navigation-font-size: rem-calc(16);
// $accordion-navigation-font-family: $body-font-family;
@@ -362,8 +375,8 @@ $include-html-global-classes: $include-html-classes;
// $alert-close-top: 50%;
// $alert-close-position: rem-calc(4);
// $alert-close-font-size: rem-calc(22);
// $alert-close-opacity: 0.3;
// $alert-close-opacity-hover: 0.5;
// $alert-close-opacity: .3;
// $alert-close-opacity-hover: .5;
// $alert-close-padding: 9px 6px 4px;
// $alert-close-background: inherit;
@@ -419,6 +432,7 @@ $include-html-global-classes: $include-html-classes;
// We use these to control the slash between breadcrumbs
// $crumb-slash-color: $base;
// $crumb-slash: "/";
// $crumb-slash-position: 1px;
// 05. Buttons
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -471,7 +485,7 @@ $include-html-global-classes: $include-html-classes;
// $button-round: $global-rounded;
// We use this to set default opacity and cursor for disabled buttons.
// $button-disabled-opacity: 0.7;
// $button-disabled-opacity: .7;
// $button-disabled-cursor: $cursor-default-value;
// 06. Button Groups
@@ -504,7 +518,7 @@ $include-html-global-classes: $include-html-classes;
// We use these to style captions
// $clearing-caption-font-color: $iron;
// $clearing-caption-font-size: 0.875em;
// $clearing-caption-font-size: .875em;
// $clearing-caption-padding: 10px 30px 20px;
// We use these to make the image and carousel height and style
@@ -635,6 +649,7 @@ $include-html-global-classes: $include-html-classes;
// $input-font-family: inherit;
// $input-font-color: rgba(0,0,0,0.75);
// $input-font-size: rem-calc(14);
// $input-placeholder-font-color: #cccccc;
// $input-bg-color: $white;
// $input-focus-bg-color: scale-color($white, $lightness: -2%);
// $input-border-color: scale-color($white, $lightness: -20%);
@@ -645,7 +660,7 @@ $include-html-global-classes: $include-html-classes;
// $input-disabled-bg: $gainsboro;
// $input-disabled-cursor: $cursor-default-value;
// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
// $input-include-glowing-effect: true;
// $input-include-glowing-effect: false;
// We use these to style the fieldset border and spacing.
// $fieldset-border-style: solid;
@@ -682,9 +697,13 @@ $include-html-global-classes: $include-html-classes;
// $input-error-message-font-color-alt: $oil;
// We use this to style the glowing effect of inputs when focused
// $glowing-effect-fade-time: 0.45s;
// $glowing-effect-fade-time: .45s;
// $glowing-effect-color: $input-focus-border-color;
// We use this to style the transition when inputs are focused and when the glowing effect is disabled.
// $input-transition-fade-time: 0.15s;
// $input-transition-fade-timing-function: linear;
// Select variables
// $select-bg-color: $ghost;
// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
@@ -708,7 +727,7 @@ $include-html-global-classes: $include-html-classes;
// $icon-bar-item-padding: 1.25rem;
// We use this to set default opacity and cursor for disabled icons.
// $icon-bar-disabled-opacity: 0.7;
// $icon-bar-disabled-opacity: .7;
// 13. Inline Lists
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -840,9 +859,11 @@ $include-html-global-classes: $include-html-classes;
// Off Canvas Menu Variables
// $off-canvas-width: rem-calc(250);
// $off-canvas-bg: $oil;
// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
// $off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%);
// Off Canvas Menu List Variables
// $off-canvas-label-padding: 0.3rem rem-calc(15);
// $off-canvas-label-padding: .3rem rem-calc(15);
// $off-canvas-label-color: $aluminum;
// $off-canvas-label-text-transform: uppercase;
// $off-canvas-label-font-size: rem-calc(12);
@@ -852,7 +873,7 @@ $include-html-global-classes: $include-html-classes;
// $off-canvas-label-border-bottom: none;
// $off-canvas-label-margin:0;
// $off-canvas-link-padding: rem-calc(10, 15);
// $off-canvas-link-color: rgba($white, 0.7);
// $off-canvas-link-color: rgba($white, .7);
// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
// $off-canvas-back-bg: #444;
// $off-canvas-back-border-top: $off-canvas-label-border-top;
@@ -879,9 +900,9 @@ $include-html-global-classes: $include-html-classes;
// Off Canvas Back-Link Overlay
// $off-canvas-overlay-transition: background 300ms ease;
// $off-canvas-overlay-cursor: pointer;
// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5);
// $off-canvas-overlay-background: rgba($white, 0.2);
// $off-canvas-overlay-background-hover: rgba($white, 0.05);
// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, .5), 4px 0 4px rgba($black, .5);
// $off-canvas-overlay-background: rgba($white, .2);
// $off-canvas-overlay-background-hover: rgba($white, .05);
// Transition Variables
// $menu-slide: "transform 500ms ease";
@@ -893,7 +914,7 @@ $include-html-global-classes: $include-html-classes;
// We use these to control the caption styles
// $orbit-container-bg: none;
// $orbit-caption-bg: rgba(51,51,51, 0.8);
// $orbit-caption-bg: rgba(51,51,51, .8);
// $orbit-caption-font-color: $white;
// $orbit-caption-font-size: rem-calc(14);
// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
@@ -927,7 +948,7 @@ $include-html-global-classes: $include-html-classes;
// Hide controls on small
// $orbit-nav-hide-for-small: true;
// $orbit-bullet-hide-for-small: true;
// $orbit-timer-hide-for-small: true;
// $orbit-timer-hide-for-small: true;
// 20. Pagination
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -971,10 +992,10 @@ $include-html-global-classes: $include-html-classes;
// $panel-bg: scale-color($white, $lightness: -5%);
// $panel-border-style: solid;
// $panel-border-size: 1px;
// $callout-panel-bg: scale-color($primary-color, $lightness: 94%);
// We use this % to control how much we darken things on hover
// $panel-function-factor: -11%;
// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor);
// $panel-border-color: scale-color($panel-bg, $lightness: -11%);
// We use these to set default inner padding and bottom margin
// $panel-margin-bottom: rem-calc(20);
@@ -1070,7 +1091,7 @@ $include-html-global-classes: $include-html-classes;
// $include-html-range-slider-classes: $include-html-classes;
// These variabels define the slider bar styles
// These variables define the slider bar styles
// $range-slider-bar-width: 100%;
// $range-slider-bar-height: rem-calc(16);
@@ -1086,7 +1107,7 @@ $include-html-global-classes: $include-html-classes;
// $range-slider-vertical-bar-width: rem-calc(16);
// $range-slider-vertical-bar-height: rem-calc(200);
// These variabels define the slider handle styles
// These variables define the slider handle styles
// $range-slider-handle-width: rem-calc(32);
// $range-slider-handle-height: rem-calc(22);
// $range-slider-handle-position-top: rem-calc(-5);
@@ -1099,7 +1120,7 @@ $include-html-global-classes: $include-html-classes;
// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
// $range-slider-handle-cursor: pointer;
// $range-slider-disabled-opacity: 0.7;
// $range-slider-disabled-opacity: .7;
// $range-slider-disabled-cursor: $cursor-disabled-value;
// 25. Reveal
@@ -1155,7 +1176,7 @@ $include-html-global-classes: $include-html-classes;
// $side-nav-link-color: $primary-color;
// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
// $side-nav-link-bg-hover: hsla(0, 0, 0, 0.025);
// $side-nav-link-bg-hover: hsla(0, 0, 0, .025);
// $side-nav-link-margin: 0;
// $side-nav-link-padding: rem-calc(7 14);
// $side-nav-font-size: rem-calc(14);
@@ -1183,6 +1204,7 @@ $include-html-global-classes: $include-html-classes;
// We use these to control different shared styles for Split Buttons
// $split-button-function-factor: 10%;
// $split-button-pip-color: $white;
// $split-button-span-border-color: rgba(255,255,255,0.5);
// $split-button-pip-color-alt: $oil;
// $split-button-active-bg-tint: rgba(0,0,0,0.1);
@@ -1265,7 +1287,7 @@ $include-html-global-classes: $include-html-classes;
// $switch-paddle-bg: $white;
// $switch-paddle-transition-speed: .15s;
// $switch-paddle-transition-ease: ease-out;
// $switch-active-color: $primary-color;
// $switch-active-color: $primary-color;
// 30. Tables
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -1296,7 +1318,7 @@ $include-html-global-classes: $include-html-classes;
// $table-foot-padding: $table-head-padding;
// These control the caption
// table-caption-bg: transparent;
// $table-caption-bg: transparent;
// $table-caption-font-color: $table-head-font-color;
// $table-caption-font-size: rem-calc(16);
// $table-caption-font-weight: bold;
@@ -1401,7 +1423,7 @@ $include-html-global-classes: $include-html-classes;
// $topbar-link-font-size: rem-calc(13);
// $topbar-link-hover-lightness: -10%; // Darken by 10%
// $topbar-link-bg: $topbar-bg;
// $topbar-link-bg-hover: $oil;
// $topbar-link-bg-hover: $jet;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-active: $primary-color;
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
@@ -1410,7 +1432,7 @@ $include-html-global-classes: $include-html-classes;
// $topbar-link-padding: ($topbar-height / 3);
// $topbar-back-link-size: rem-calc(18);
// $topbar-link-dropdown-padding: rem-calc(20);
// $topbar-button-font-size: 0.75rem;
// $topbar-button-font-size: .75rem;
// $topbar-button-top: 7px;
// Style the top bar dropdown elements
@@ -1418,11 +1440,11 @@ $include-html-global-classes: $include-html-classes;
// $topbar-dropdown-link-color: $white;
// $topbar-dropdown-link-color-hover: $topbar-link-color-hover;
// $topbar-dropdown-link-bg: $oil;
// $topbar-dropdown-link-bg-hover: $oil;
// $topbar-dropdown-link-bg-hover: $jet;
// $topbar-dropdown-link-weight: $font-weight-normal;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: $white;
// $topbar-dropdown-toggle-alpha: 0.4;
// $topbar-dropdown-toggle-alpha: .4;
// $topbar-dropdown-label-color: $monsoon;
// $topbar-dropdown-label-text-transform: uppercase;
@@ -1444,7 +1466,7 @@ $include-html-global-classes: $include-html-classes;
// $topbar-transition-speed: 300ms;
// Using rem-calc for the below breakpoint causes issues with top bar
// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
// $topbar-media-query: $medium-up;
// $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";
// Top-bar input styles
// $topbar-input-height: rem-calc(28);
@@ -1456,7 +1478,7 @@ $include-html-global-classes: $include-html-classes;
// Sticky Class
// $topbar-sticky-class: ".sticky";
// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//
// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//
// 36. Visibility Classes
// - - - - - - - - - - - - - - - - - - - - - - - - -

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -14,6 +14,7 @@ $accordion-navigation-padding: rem-calc(16) !default;
$accordion-navigation-bg-color: $silver !default;
$accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
$accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
$accordion-navigation-active-font-color: $jet !default;
$accordion-navigation-font-color: $jet !default;
$accordion-navigation-font-size: rem-calc(16) !default;
$accordion-navigation-font-family: $body-font-family !default;
@@ -32,7 +33,7 @@ $accordion-content-active-bg-color: $white !default;
margin-bottom: 0;
}
// Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class, $font-color, $font-size, $font-family){
// Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class, $font-color, $font-size, $font-family) {
// @params $bg-color: [ color or string ]: Specify the background color for the navigation element
// @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered
// @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released.
@@ -40,8 +41,9 @@ $accordion-content-active-bg-color: $white !default;
// @params $font-color [ color or string ]: Color of the font for accordion
// @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
// @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
// @params $active-font [ color or string ]: Specify the font color for the navigation element when active.
@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){
@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family, $active-font: $accordion-navigation-active-font-color ) {
display: block;
margin-bottom: 0 !important;
@if type-of($active_class) != "string" {
@@ -50,6 +52,7 @@ $accordion-content-active-bg-color: $white !default;
@else {
&.#{ $active_class } > a {
background: $active-bg;
color: $active-font;
}
}
> a {
@@ -98,7 +101,7 @@ $accordion-content-active-bg-color: $white !default;
// @params $bg [ color ]: Background color for the content when it's visible
// @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible.
@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){
@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active') {
display: none;
@if type-of($padding) != "number" {
@warn "#{$padding} was read as a #{type-of($padding)}";
@@ -118,8 +121,8 @@ $accordion-content-active-bg-color: $white !default;
}
@else {
&.#{$active_class} {
display: block;
background: $bg;
display: block;
}
}
}
@@ -129,17 +132,18 @@ $accordion-content-active-bg-color: $white !default;
.accordion {
@include clearfix;
margin-bottom: 0;
margin-left: 0;
.accordion-navigation, dd {
display: block;
margin-bottom: 0 !important;
&.active > a { background: $accordion-navigation-active-bg-color; }
&.active > a { background: $accordion-navigation-active-bg-color; color: $accordion-navigation-active-font-color; }
> a {
background: $accordion-navigation-bg-color;
color: $accordion-navigation-font-color;
padding: $accordion-navigation-padding;
display: block;
font-family: $accordion-navigation-font-family;
font-size: $accordion-navigation-font-size;
padding: $accordion-navigation-padding;
&:hover { background: $accordion-navigation-hover-bg-color; }
}
@@ -147,8 +151,8 @@ $accordion-content-active-bg-color: $white !default;
display: none;
padding: $accordion-content-padding;
&.active {
display: block;
background: $accordion-content-active-bg-color;
display: block;
}
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// Alert Box Variables
@@ -35,8 +35,8 @@ $alert-close-color: $oil !default;
$alert-close-top: 50% !default;
$alert-close-position: rem-calc(4) !default;
$alert-close-font-size: rem-calc(22) !default;
$alert-close-opacity: 0.3 !default;
$alert-close-opacity-hover: 0.5 !default;
$alert-close-opacity: .3 !default;
$alert-close-opacity-hover: .5 !default;
$alert-close-padding: 0 6px 4px !default;
$alert-close-background: inherit !default;
@@ -55,11 +55,11 @@ $alert-transition-ease: ease-out !default;
border-style: $alert-border-style;
border-width: $alert-border-width;
display: block;
font-size: $alert-font-size;
font-weight: $alert-font-weight;
margin-bottom: $alert-bottom-margin;
position: relative;
padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
font-size: $alert-font-size;
position: relative;
@include single-transition(opacity, $alert-transition-speed, $alert-transition-ease)
}
@@ -83,16 +83,16 @@ $alert-transition-ease: ease-out !default;
// We use this to create the close button.
@mixin alert-close {
#{$opposite-direction}: $alert-close-position;
background: $alert-close-background;
color: $alert-close-color;
font-size: $alert-close-font-size;
padding: $alert-close-padding;
line-height: .9;
margin-top: -($alert-close-font-size / 2);
opacity: $alert-close-opacity;
padding: $alert-close-padding;
position: absolute;
top: $alert-close-top;
margin-top: -($alert-close-font-size / 2);
#{$opposite-direction}: $alert-close-position;
color: $alert-close-color;
opacity: $alert-close-opacity;
background: $alert-close-background;
&:hover,
&:focus { opacity: $alert-close-opacity-hover; }
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// Block Grid Variables
@@ -48,10 +48,10 @@ $block-grid-media-queries: true !default;
}
@include clearfix;
&>li {
> li {
display: block;
height: auto;
float: $default-float;
height: auto;
@if $include-spacing {
padding: 0 ($spacing/2) $spacing;
}
@@ -59,12 +59,12 @@ $block-grid-media-queries: true !default;
}
@if $per-row {
&>li {
width: 100%/$per-row;
> li {
list-style: none;
@if $include-spacing {
padding: 0 ($spacing/2) $spacing;
}
list-style: none;
width: 100%/$per-row;
&:nth-of-type(1n) { clear: none; }
&:nth-of-type(#{$per-row}n+1) { clear: both; }
@@ -93,10 +93,10 @@ $block-grid-media-queries: true !default;
// Generate presentational markup for block grid.
//
// $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
@mixin block-grid-html-classes($size,$include-spacing) {
@mixin block-grid-html-classes($size, $include-spacing) {
@for $i from 1 through $block-grid-elements {
.#{$size}-block-grid-#{($i)} {
@include block-grid($i,$block-grid-default-spacing,$include-spacing,false);
@include block-grid($i, $block-grid-default-spacing, $include-spacing, false);
}
}
}
@@ -108,24 +108,24 @@ $block-grid-media-queries: true !default;
@if $block-grid-media-queries {
@media #{$small-up} {
@include block-grid-html-classes($size:small,$include-spacing:false);
@include block-grid-html-classes($size:small, $include-spacing:false);
}
@media #{$medium-up} {
@include block-grid-html-classes($size:medium,$include-spacing:false);
@include block-grid-html-classes($size:medium, $include-spacing:false);
}
@media #{$large-up} {
@include block-grid-html-classes($size:large,$include-spacing:false);
@include block-grid-html-classes($size:large, $include-spacing:false);
}
@if $include-xl-html-block-grid-classes {
@media #{$xlarge-up} {
@include block-grid-html-classes($size:xlarge,$include-spacing:false);
@include block-grid-html-classes($size:xlarge, $include-spacing:false);
}
@media #{$xxlarge-up} {
@include block-grid-html-classes($size:xxlarge,$include-spacing:false);
@include block-grid-html-classes($size:xxlarge, $include-spacing:false);
}
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// Breadcrumb Variables
@@ -34,6 +34,7 @@ $crumb-link-decor: underline !default;
// We use these to control the slash between breadcrumbs
$crumb-slash-color: $base !default;
$crumb-slash: "/" !default;
$crumb-slash-position: 1px !default;
//
// Breadcrumb Mixins
@@ -41,13 +42,13 @@ $crumb-slash: "/" !default;
// We use this mixin to create a container around our breadcrumbs
@mixin crumb-container {
display: block;
padding: $crumb-padding;
overflow: hidden;
margin-#{$default-float}: 0;
list-style: none;
border-style: $crumb-border-style;
border-width: $crumb-border-size;
display: block;
list-style: none;
margin-#{$default-float}: 0;
overflow: hidden;
padding: $crumb-padding;
// We control which background color and border come through.
background-color: $crumb-bg;
@@ -58,12 +59,12 @@ $crumb-slash: "/" !default;
@mixin crumbs {
// A normal state will make the links look and act like clickable breadcrumbs.
margin: 0;
color: $crumb-font-color;
float: $default-float;
font-size: $crumb-font-size;
line-height: $crumb-font-size;
margin: 0;
text-transform: $crumb-font-transform;
color: $crumb-font-color;
&:hover a, &:focus a { text-decoration: $crumb-link-decor; }
@@ -73,11 +74,11 @@ $crumb-slash: "/" !default;
// Current is for the link of the current page
&.current {
cursor: $cursor-default-value;
color: $crumb-font-color-current;
cursor: $cursor-default-value;
a {
cursor: $cursor-default-value;
color: $crumb-font-color-current;
cursor: $cursor-default-value;
}
&:hover, &:hover a,
@@ -93,18 +94,18 @@ $crumb-slash: "/" !default;
&:hover a,
&:focus,
a:focus {
text-decoration: none;
color: $crumb-font-color-unavailable;
cursor: $cursor-disabled-value;
text-decoration: none;
}
}
&:before {
content: "#{$crumb-slash}";
color: $crumb-slash-color;
content: "#{$crumb-slash}";
margin: 0 $crumb-side-padding;
position: relative;
top: 1px;
top: $crumb-slash-position;
}
&:first-child:before {
@@ -119,14 +120,13 @@ $crumb-slash: "/" !default;
@include crumb-container;
@include radius($crumb-radius);
&>* {
> * {
@include crumbs;
}
}
/* Accessibility - hides the forward slash */
[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
content: "/";
}
}
}
/* Accessibility - hides the forward slash */
[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
content: "/";
}

View File

@@ -2,8 +2,8 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import "buttons";
@import 'global';
@import 'buttons';
//
// Button Group Variables
@@ -38,7 +38,7 @@ $button-group-border-width: 1px !default;
> button, .button {
border-#{$default-float}: $button-group-border-width solid;
border-color: rgba(255, 255, 255, 0.5);
border-color: rgba(255, 255, 255, .5);
}
&:first-child {
@@ -47,28 +47,31 @@ $button-group-border-width: 1px !default;
}
}
$button-group-display: list-item;
$button-group-margin: 0;
// We use this to control the flow, or remove those styles completely.
@if $float {
margin: 0;
$button-group-display: list-item;
$button-group-margin: 0;
float: $float;
display: list-item;
// Make sure the first child doesn't get the negative margin.
&:first-child { margin-#{$default-float}: 0; }
}
@else {
margin: 0 -2px;
display: inline-block;
$button-group-display: inline-block;
$button-group-margin: 0 -2px;
}
@if $orientation == vertical {
display:block;
margin:0;
$button-group-display: block;
$button-group-margin: 0;
> button, .button {
border-top: $button-group-border-width solid;
border-color: rgba(255, 255, 255, 0.5);
border-color: rgba(255, 255, 255, .5);
border-left-width: 0;
margin:0;
border-top: $button-group-border-width solid;
display: block;
margin:0;
}
> button {
width: 100%;
@@ -81,12 +84,16 @@ $button-group-border-width: 1px !default;
}
}
display: $button-group-display;
margin: $button-group-margin;
// We use these to control left and right radius on first/last buttons in the group.
@if $radius == true {
&,
& > a,
& > button,
& > .button { @include radius(0); }
> a,
> button,
> .button { @include radius(0); }
&:first-child,
&:first-child > a,
&:first-child > button,
@@ -112,9 +119,9 @@ $button-group-border-width: 1px !default;
}
@else if $radius {
&,
& > a,
& > button,
& > .button { @include radius(0); }
> a,
> button,
> .button { @include radius(0); }
&:first-child,
&:first-child > a,
&:first-child > button,
@@ -153,18 +160,19 @@ $button-group-border-width: 1px !default;
@for $i from 2 through 8 {
&.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
}
& > li { @include button-group-style(); }
> li { @include button-group-style(); }
&.stack {
& > li { @include button-group-style($orientation:vertical); float: none; }
> li { @include button-group-style($orientation:vertical); float: none; }
}
&.stack-for-small {
& > li {
> li {
@include button-group-style($orientation:horizontal);
@media #{$small-only} {
@include button-group-style($orientation:vertical);
width: 100%;
}
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -39,14 +39,19 @@ $button-border-style: solid !default;
$button-bg-color: $primary-color !default;
$button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default;
$button-border-color: $button-bg-hover !default;
$secondary-button-bg-color: $secondary-color !default;
$secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default;
$secondary-button-border-color: $secondary-button-bg-hover !default;
$success-button-bg-color: $success-color !default;
$success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor) !default;
$success-button-border-color: $success-button-bg-hover !default;
$alert-button-bg-color: $alert-color !default;
$alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor) !default;
$alert-button-border-color: $alert-button-bg-hover !default;
$warning-button-bg-color: $warning-color !default;
$warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor) !default;
$warning-button-border-color: $warning-button-bg-hover !default;
$info-button-bg-color: $info-color !default;
$info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor) !default;
$info-button-border-color: $info-button-bg-hover !default;
@@ -55,7 +60,7 @@ $button-radius: $global-radius !default;
$button-round: $global-rounded !default;
// We use this to set default opacity and cursor for disabled buttons.
$button-disabled-opacity: 0.7 !default;
$button-disabled-opacity: .7 !default;
$button-disabled-cursor: $cursor-default-value !default;
@@ -69,6 +74,9 @@ $button-disabled-cursor: $cursor-default-value !default;
@mixin button-base($style:true, $display:$button-display) {
@if $style {
-webkit-appearance: none;
-moz-appearance: none;
border-radius:0;
border-style: $button-border-style;
border-width: $button-border-width;
cursor: $cursor-pointer-value;
@@ -77,11 +85,8 @@ $button-disabled-cursor: $cursor-default-value !default;
line-height: normal;
margin: 0 0 $button-margin-bottom;
position: relative;
text-decoration: none;
text-align: $button-font-align;
-webkit-appearance: none;
-moz-appearance: none;
border-radius:0;
text-decoration: none;
}
@if $display { display: $display; }
}
@@ -98,11 +103,7 @@ $button-disabled-cursor: $cursor-default-value !default;
// We control which padding styles come through,
// these can be turned off by setting $padding:false
@if $padding {
padding-top: $padding;
padding-#{$opposite-direction}: $padding * 2;
padding-bottom: $padding + rem-calc(1);
padding-#{$default-float}: $padding * 2;
padding: $padding ($padding * 2) ($padding + rem-calc(1)) ($padding * 2);
// We control the font-size based on mixin input.
@if $padding == $button-med { font-size: $button-font-med; }
@else if $padding == $button-tny { font-size: $button-font-tny; }
@@ -114,14 +115,14 @@ $button-disabled-cursor: $cursor-default-value !default;
@if $full-width {
// We still need to check if $padding is set.
@if $padding {
padding-top: $padding;
padding-bottom: $padding + rem-calc(1);
padding-bottom: $padding + rem-calc(1);
padding-top: $padding;
} @else if $padding == false {
padding-top:0;
padding-bottom:0;
padding-top:0;
}
padding-right: 0;
padding-left: 0;
padding-left: $button-med;
padding-right: $button-med;
width: 100%;
}
}
@@ -173,9 +174,9 @@ $button-disabled-cursor: $cursor-default-value !default;
// We can set $disabled:true to create a disabled transparent button.
@if $disabled {
box-shadow: none;
cursor: $button-disabled-cursor;
opacity: $button-disabled-opacity;
box-shadow: none;
&:hover,
&:focus { background-color: $bg; }
}
@@ -221,16 +222,16 @@ $button-disabled-cursor: $cursor-default-value !default;
@include single-transition(background-color);
&.secondary { @include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
&.success { @include button-style($bg:$success-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
&.alert { @include button-style($bg:$alert-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
&.warning { @include button-style($bg:$warning-color, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
&.info { @include button-style($bg:$info-color, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
&.secondary { @include button-style($bg:$secondary-button-bg-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
&.success { @include button-style($bg:$success-button-bg-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
&.alert { @include button-style($bg:$alert-button-bg-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
&.warning { @include button-style($bg:$warning-button-bg-color, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
&.info { @include button-style($bg:$info-button-bg-color, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
&.large { @include button-size($padding:$button-lrg); }
&.small { @include button-size($padding:$button-sml); }
&.tiny { @include button-size($padding:$button-tny); }
&.expand { @include button-size($padding:null,$full-width:true); }
&.expand { @include button-size($full-width:true); }
&.left-align { text-align: left; text-indent: rem-calc(12); }
&.right-align { text-align: right; padding-right: rem-calc(12); }
@@ -239,11 +240,11 @@ $button-disabled-cursor: $cursor-default-value !default;
&.round { @include button-style($bg:false, $radius:$button-round); }
&.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color);
&.secondary { @include button-style($bg:$secondary-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
&.success { @include button-style($bg:$success-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
&.alert { @include button-style($bg:$alert-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
&.warning { @include button-style($bg:$warning-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
&.info { @include button-style($bg:$info-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
&.secondary { @include button-style($bg:$secondary-button-bg-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
&.success { @include button-style($bg:$success-button-bg-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
&.alert { @include button-style($bg:$alert-button-bg-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
&.warning { @include button-style($bg:$warning-button-bg-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
&.info { @include button-style($bg:$info-button-bg-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -25,7 +25,7 @@ $clearing-arrow-color: $clearing-close-color !default;
// We use these to style captions
$clearing-caption-font-color: $iron !default;
$clearing-caption-font-size: 0.875em !default;
$clearing-caption-font-size: .875em !default;
$clearing-caption-padding: 10px 30px 20px !default;
// We use these to make the image and carousel height and style
@@ -43,9 +43,9 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
/* Clearing Styles */
.clearing-thumbs, #{data('clearing')} {
@include clearfix;
margin-bottom: 0;
margin-#{$default-float}: 0;
list-style: none;
margin-#{$default-float}: 0;
margin-bottom: 0;
li {
float: $default-float;
@@ -59,30 +59,30 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
.clearing-blackout {
background: $clearing-bg;
position: fixed;
width: 100%;
height: 100%;
position: fixed;
top: 0;
#{$default-float}: 0;
width: 100%;
z-index: 998;
#{$default-float}: 0;
.clearing-close { display: block; }
}
.clearing-container {
height: 100%;
margin: 0;
overflow: hidden;
position: relative;
z-index: 998;
height: 100%;
overflow: hidden;
margin: 0;
}
.clearing-touch-label {
color: $base;
font-size: .6em;
left: 50%;
position: absolute;
top: 50%;
left: 50%;
color: $base;
font-size: 0.6em;
}
.visible-img {
@@ -94,14 +94,18 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
#{$default-float}: 50%;
top: 50%;
@if $default-float == left {
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
@else {
transform: translateY(-50%) translateX(50%);
-webkit-transform: translateY(-50%) translateX(50%);
-moz-transform: translateY(-50%) translateX(50%);
-ms-transform: translateY(-50%) translateX(50%);
-o-transform: translateY(-50%) translateX(50%);
transform: translateY(-50%) translateX(50%);
};
max-height: 100%;
max-width: 100%;
@@ -109,27 +113,27 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
}
.clearing-caption {
background: $clearing-caption-bg;
bottom: 0;
color: $clearing-caption-font-color;
font-size: $clearing-caption-font-size;
line-height: 1.3;
margin-bottom: 0;
text-align: center;
bottom: 0;
background: $clearing-caption-bg;
width: 100%;
padding: $clearing-caption-padding;
position: absolute;
text-align: center;
width: 100%;
#{$default-float}: 0;
}
.clearing-close {
z-index: 999;
padding-#{$default-float}: 20px;
padding-top: 10px;
font-size: $clearing-close-size;
line-height: 1;
color: $clearing-close-color;
display: none;
font-size: $clearing-close-size;
line-height: 1;
padding-#{$default-float}: 20px;
padding-top: 10px;
z-index: 999;
&:hover,
&:focus { color: $iron; }
@@ -151,23 +155,23 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
@media #{$medium-up} {
.clearing-main-prev,
.clearing-main-next {
position: absolute;
height: 100%;
width: 40px;
position: absolute;
top: 0;
& > span {
width: 40px;
> span {
border: solid $clearing-arrow-size;
display: block;
height: 0;
position: absolute;
top: 50%;
display: block;
width: 0;
height: 0;
border: solid $clearing-arrow-size;
&:hover { opacity: 0.8; }
&:hover { opacity: .8; }
}
}
.clearing-main-prev {
#{$default-float}: 0;
& > span {
> span {
#{$default-float}: 5px;
border-color: transparent;
border-#{$opposite-direction}-color: $clearing-arrow-color;
@@ -175,14 +179,14 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
}
.clearing-main-next {
#{$opposite-direction}: 0;
& > span {
> span {
border-color: transparent;
border-#{$default-float}-color: $clearing-arrow-color;
}
}
.clearing-main-prev.disabled,
.clearing-main-next.disabled { opacity: 0.3; }
.clearing-main-next.disabled { opacity: .3; }
.clearing-assembled .clearing-container {
@@ -192,7 +196,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
margin-top: 10px;
text-align: center;
& > ul {
> ul {
display: inline-block;
z-index: 999;
height: 100%;
@@ -200,17 +204,17 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
float: none;
li {
clear: none;
cursor: $cursor-pointer-value;
display: block;
width: $clearing-carousel-thumb-width;
min-height: inherit;
float: $default-float;
overflow: hidden;
margin-#{$opposite-direction}: 0;
min-height: inherit;
opacity: .4;
overflow: hidden;
padding: 0;
position: relative;
cursor: $cursor-pointer-value;
opacity: 0.4;
clear: none;
width: $clearing-carousel-thumb-width;
&.fix-height {
img {
@@ -226,29 +230,29 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
}
img {
cursor: $cursor-pointer-value !important;
width: 100% !important;
cursor: $cursor-pointer-value !important;
width: 100% !important;
}
&.visible { opacity: 1; }
&:hover { opacity: 0.8; }
&:hover { opacity: .8; }
}
}
}
.visible-img {
background: $clearing-img-bg;
overflow: hidden;
height: $clearing-active-img-height;
overflow: hidden;
}
}
.clearing-close {
padding-#{$default-float}: 0;
padding-top: 0;
position: absolute;
top: 10px;
#{$opposite-direction}: 20px;
padding-#{$default-float}: 0;
padding-top: 0;
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -53,23 +53,22 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
// $pip-color - Color of the little triangle that points to the dropdown. Default: $white.
// $base-style - Add in base-styles. This can be set to false. Default:true
@mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) {
@mixin dropdown-button($padding:medium, $pip-color:$dropdown-button-pip-color, $base-style:true) {
// We add in base styles, but they can be negated by setting to 'false'.
@if $base-style {
position: relative;
outline: none;
// This creates the base styles for the triangle pip
&::after {
position: absolute;
content: "";
width: 0;
height: 0;
display: block;
border-style: solid;
border-color: $dropdown-button-pip-color transparent transparent transparent;
border-style: solid;
content: "";
display: block;
height: 0;
position: absolute;
top: 50%;
width: 0;
}
}
@@ -122,9 +121,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
@include exports("dropdown-button") {
@if $include-html-button-classes {
.dropdown.button, button.dropdown { @include dropdown-button;
&.tiny { @include dropdown-button(tiny,$base-style:false); }
&.small { @include dropdown-button(small,$base-style:false); }
&.large { @include dropdown-button(large,$base-style:false); }
&.tiny { @include dropdown-button(tiny, $base-style:false); }
&.small { @include dropdown-button(small, $base-style:false); }
&.large { @include dropdown-button(large, $base-style:false); }
&.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -64,60 +64,67 @@ $f-dropdown-radius: $global-radius !default;
// $triangle - Sets if dropdown has triangle. Default:true.
// $max-width - Default: $f-dropdown-max-width || 200px.
@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
position: absolute;
display: none;
left: -9999px;
list-style: $f-dropdown-list-style;
margin-#{$default-float}: 0;
outline: none;
position: absolute;
&.open {
display: block;
}
> *:first-child { margin-top: 0; }
> *:last-child { margin-bottom: 0; }
@if $content == list {
width: 100%;
max-height: $f-dropdown-max-height;
height: $f-dropdown-height;
background: $f-dropdown-bg;
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
font-size: $f-dropdown-font-size;
height: $f-dropdown-height;
max-height: $f-dropdown-max-height;
width: 100%;
z-index: 89;
}
@else if $content == content {
padding: $f-dropdown-content-padding;
width: 100%;
height: $f-dropdown-height;
max-height: $f-dropdown-max-height;
background: $f-dropdown-bg;
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
font-size: $f-dropdown-font-size;
height: $f-dropdown-height;
max-height: $f-dropdown-max-height;
padding: $f-dropdown-content-padding;
width: 100%;
z-index: 89;
}
@if $triangle == bottom {
margin-top: $f-dropdown-margin-top;
&:before {
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
position: absolute;
top: -($f-dropdown-triangle-size * 2);
#{$default-float}: $f-dropdown-triangle-side-offset;
z-index: 89;
}
&:after {
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
position: absolute;
top: -(($f-dropdown-triangle-size + 1) * 2);
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
z-index: 88;
}
@if $f-dropdown-triangle-size != 0px {
&.right:before {
#{$default-float}: auto;
#{$opposite-direction}: $f-dropdown-triangle-side-offset;
}
&.right:after {
#{$default-float}: auto;
#{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
&:before {
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
position: absolute;
top: -($f-dropdown-triangle-size * 2);
#{$default-float}: $f-dropdown-triangle-side-offset;
z-index: 89;
}
&:after {
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
position: absolute;
top: -(($f-dropdown-triangle-size + 1) * 2);
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
z-index: 88;
}
&.right:before {
#{$default-float}: auto;
#{$opposite-direction}: $f-dropdown-triangle-side-offset;
}
&.right:after {
#{$default-float}: auto;
#{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
}
}
}
@@ -166,23 +173,23 @@ $f-dropdown-radius: $global-radius !default;
}
@if $triangle == top {
margin-top: -$f-dropdown-margin-bottom;
margin-left: 0;
margin-top: -$f-dropdown-margin-bottom;
&:before {
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, top);
bottom: -($f-dropdown-triangle-size * 2);
position: absolute;
top: auto;
bottom: -($f-dropdown-triangle-size * 2);
#{$default-float}: $f-dropdown-triangle-side-offset;
#{$opposite-direction}: auto;
z-index: 89;
}
&:after {
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top);
bottom: -($f-dropdown-triangle-size * 2) - 2;
position: absolute;
top: auto;
bottom: -($f-dropdown-triangle-size * 2) - 2;
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
#{$opposite-direction}: auto;
z-index: 88;
@@ -200,17 +207,14 @@ $f-dropdown-radius: $global-radius !default;
// We use this to style the list elements or content inside the dropdown.
@mixin dropdown-style {
font-size: $f-dropdown-font-size;
cursor: $cursor-pointer-value;
font-size: $f-dropdown-font-size;
line-height: $f-dropdown-line-height;
margin: 0;
&:hover,
&:focus { background: $f-dropdown-list-hover-bg; }
&.radius { @include radius($f-dropdown-radius); }
a {
display: block;
padding: $f-dropdown-list-padding;
@@ -243,6 +247,9 @@ $f-dropdown-radius: $global-radius !default;
// You can also put custom content in these dropdowns
&.content { @include dropdown-container(content, $triangle:false); }
// Radius of Dropdown
&.radius { @include radius($f-dropdown-radius); }
// Sizes
&.tiny { max-width: 200px; }
&.small { max-width: 300px; }

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -22,12 +22,12 @@ $flex-video-widescreen-padding-bottom: 56.34% !default;
//
@mixin flex-video-container {
position: relative;
padding-top: $flex-video-padding-top;
padding-bottom: $flex-video-padding-bottom;
height: 0;
margin-bottom: $flex-video-margin-bottom;
overflow: hidden;
padding-bottom: $flex-video-padding-bottom;
padding-top: $flex-video-padding-top;
position: relative;
&.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
&.vimeo { padding-top: 0; }
@@ -36,11 +36,11 @@ $flex-video-widescreen-padding-bottom: 56.34% !default;
object,
embed,
video {
height: 100%;
position: absolute;
top: 0;
#{$default-float}: 0;
width: 100%;
height: 100%;
#{$default-float}: 0;
}
}
@@ -48,4 +48,4 @@ $flex-video-widescreen-padding-bottom: 56.34% !default;
@if $include-html-media-classes {
.flex-video { @include flex-video-container; }
}
}
}

View File

@@ -2,8 +2,8 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import "buttons";
@import 'global';
@import 'buttons';
//
// @variables
@@ -23,6 +23,7 @@ $form-label-small-transform: capitalize !default;
$form-label-bottom-margin: 0 !default;
$input-font-family: inherit !default;
$input-font-color: rgba(0,0,0,0.75) !default;
$input-placeholder-font-color: $steel !default;
$input-font-size: rem-calc(14) !default;
$input-bg-color: $white !default;
$input-focus-bg-color: scale-color($white, $lightness: -2%) !default;
@@ -44,7 +45,6 @@ $fieldset-padding: rem-calc(20) !default;
$fieldset-margin: rem-calc(18 0) !default;
// We use these to style the legends when you use them
$legend-bg: $white !default;
$legend-font-weight: $font-weight-bold !default;
$legend-padding: rem-calc(0 3) !default;
@@ -71,9 +71,13 @@ $input-error-message-bg-color: $alert-color !default;
$input-error-message-font-color-alt: $oil !default;
// We use this to style the glowing effect of inputs when focused
$glowing-effect-fade-time: 0.45s !default;
$glowing-effect-fade-time: .45s !default;
$glowing-effect-color: $input-focus-border-color !default;
// We use this to style the transition when inputs are focused and when the glowing effect is disabled.
$input-transition-fade-time: 0.15s !default;
$input-transition-fade-timing-function: linear !default;
// Select variables
$select-bg-color: $ghost !default;
$select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
@@ -111,7 +115,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to give all basic form elements their style
@mixin form-element {
background-color: $input-bg-color;
font-family: $input-font-family;
border: {
style: $input-border-style;
width: $input-border-width;
@@ -120,10 +123,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
box-shadow: $input-box-shadow;
color: $input-font-color;
display: block;
font-family: $input-font-family;
font-size: $input-font-size;
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
margin: 0 0 $form-spacing 0;
padding: $form-spacing / 2;
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
width: 100%;
@include box-sizing(border-box);
@if $input-include-glowing-effect {
@@ -135,7 +139,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
border-color: $input-focus-border-color;
outline: none;
}
// Disbaled Styles
// Disabled Styles
&:disabled {
background-color: $input-disabled-bg;
cursor: $input-disabled-cursor;
@@ -160,10 +164,10 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// Control whether or not the base styles come through.
@if $base-style {
font-size: $form-label-font-size;
color: $form-label-font-color;
cursor: $form-label-pointer;
display: block;
font-size: $form-label-font-size;
font-weight: $form-label-font-weight;
line-height: $form-label-line-height;
margin-bottom: $form-label-bottom-margin;
@@ -182,19 +186,19 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to create postfix/prefix form Labels
@mixin prefix-postfix-base {
display: block;
position: relative;
z-index: 2;
text-align: center;
width: 100%;
padding-top: 0;
padding-bottom: 0;
border-style: $input-prefix-border-type;
border-width: $input-prefix-border-size;
overflow: $input-prefix-overflow;
display: block;
font-size: $form-label-font-size;
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
overflow: $input-prefix-overflow;
padding-bottom: 0;
padding-top: 0;
position: relative;
text-align: center;
width: 100%;
z-index: 2;
}
// @MIXIN
@@ -220,12 +224,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
}
@if $is-button {
border: none;
padding-#{$default-float}: 0;
padding-#{$opposite-direction}: 0;
padding-top: 0;
padding-bottom: 0;
padding-top: 0;
text-align: center;
border: none;
}
}
@@ -235,12 +239,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to create postfix label styles
// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
// $is-button - Toggle position settings if prefix is a button. Default: false
@mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
@mixin postfix($bg:$input-prefix-bg, $border-left-hidden:true, $border:$input-prefix-border-color, $is-button:false) {
@if $bg {
$bg-lightness: lightness($bg);
background: $bg;
border-#{$default-float}: none;
@if $border-left-hidden {
border-#{$default-float}: none;
}
// Control the font color based on background brightness
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
@@ -252,12 +258,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
}
@if $is-button {
border: none;
padding-#{$default-float}: 0;
padding-#{$opposite-direction}: 0;
padding-top: 0;
padding-bottom: 0;
padding-top: 0;
text-align: center;
border: none;
}
}
@@ -265,16 +271,15 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to style fieldsets
@mixin fieldset {
border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;
padding: $fieldset-padding;
margin: $fieldset-margin;
padding: $fieldset-padding;
// and legend styles
legend {
font-weight: $legend-font-weight;
background: $legend-bg;
padding: $legend-padding;
margin: 0;
margin-#{$default-float}: rem-calc(-3);
padding: $legend-padding;
}
}
@@ -283,8 +288,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to control border and background color of error inputs
// $color - Default: $alert-color (found in settings file)
@mixin form-error-color($color:$alert-color) {
background-color: rgba($color, .1);
border-color: $color;
background-color: rgba($color, 0.1);
// Go back to normal on focus
&:focus {
@@ -305,12 +310,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// $bg - Default: $alert-color (Found in settings file)
@mixin form-error-message($bg:$input-error-message-bg-color) {
display: block;
padding: $input-error-message-padding;
margin-top: $input-error-message-top;
margin-bottom: $form-spacing;
font-size: $input-error-message-font-size;
font-weight: $input-error-message-font-weight;
font-style: $input-error-message-font-style;
font-weight: $input-error-message-font-weight;
margin-bottom: $form-spacing;
margin-top: $input-error-message-top;
padding: $input-error-message-padding;
// We can control the text color based on the brightness of the background.
$bg-lightness: lightness($bg);
@@ -322,8 +327,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to style select elements
@mixin form-select {
-webkit-appearance: none !important;
border-radius: 0;
-moz-appearance: none !important;
background-color: $select-bg-color;
border-radius: 0;
// Hide the dropdown arrow shown in newer IE versions
&::-ms-expand {
@@ -332,7 +338,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// The custom arrow has some fake horizontal padding so we can align it
// from the right side of the element without relying on CSS3
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+');
// We can safely use leftmost and rightmost now
background-position: if($text-direction == 'rtl', 0%, 100%) center;
@@ -343,14 +349,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
width: $input-border-width;
color: $input-border-color;
}
padding: ($form-spacing / 2);
font-size: $input-font-size;
font-family: $body-font-family;
color: $input-font-color;
font-family: $input-font-family;
font-size: $input-font-size;
line-height: normal;
padding: ($form-spacing / 2);
@include radius(0);
&.radius { @include radius($global-radius); }
&:hover {
&:focus {
background-color: $select-hover-bg-color;
border-color: $input-focus-border-color;
}
@@ -362,12 +368,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
}
// We use this mixin to turn on/off HTML5 number spinners
@mixin html5number($browser, $on:true) {
@if $on==false {
@if $browser==webkit {
@mixin html5number($browser, $on: true) {
@if $on == false {
@if $browser == webkit {
-webkit-appearance: none;
margin: 0;
} @else if $browser==moz {
} @else if $browser == moz {
-moz-appearance: textfield;
}
}
@@ -383,8 +389,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
/* Label Styles */
label { @include form-label;
&.right { @include form-label(right,false); }
&.inline { @include form-label(inline,false); }
&.right { @include form-label(right, false); }
&.inline { @include form-label(inline, false); }
/* Styles for required inputs */
small {
text-transform: $form-label-small-transform;
@@ -397,8 +403,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
.postfix { @include prefix-postfix-base; }
/* Adjust padding, alignment and radius if pre/post element is a button */
.postfix.button { @include button-size(false,false); @include postfix(false, false, true); }
.prefix.button { @include button-size(false,false); @include prefix(false, false, true); }
.postfix.button { @include button-size(false, false); @include postfix(false, false, false, true); }
.prefix.button { @include button-size(false, false); @include prefix(false, false, true); }
.prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); }
.postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
@@ -406,16 +412,21 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
.postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
/* Separate prefix and postfix styles when on span or label so buttons keep their own */
span.prefix,label.prefix { @include prefix(); }
span.postfix,label.postfix { @include postfix(); }
span.prefix, label.prefix { @include prefix(); }
span.postfix, label.postfix { @include postfix(); }
/* We use this to get basic styling on all basic form elements */
#{text-inputs(all, 'input')} {
input:not([type]), #{text-inputs(all, 'input')} {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
@include form-element;
@if $input-include-glowing-effect == false {
@include single-transition(all, 0.15s, linear);
-webkit-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
-moz-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
-ms-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
-o-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
}
&.radius {
@include radius($input-border-radius);
@@ -457,6 +468,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
}
@@ -465,10 +477,28 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
height: auto;
}
/* Not allow resize out of parent */
textarea {
max-width: 100%;
}
/* Not allow resize out of parent */
textarea {
max-width: 100%;
}
// style placeholder text cross browser
::-webkit-input-placeholder {
color: $input-placeholder-font-color;
}
:-moz-placeholder { /* Firefox 18- */
color: $input-placeholder-font-color;
}
::-moz-placeholder { /* Firefox 19+ */
color: $input-placeholder-font-color;
}
:-ms-input-placeholder {
color: $input-placeholder-font-color;
}
/* Add height value for select elements to match text input height */
select {
@@ -551,14 +581,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
> label {
> small {
color: scale-color($form-label-font-color, $lightness: 15%);
background: transparent;
color: scale-color($form-label-font-color, $lightness: 15%);
display: inline;
font-size: 60%;
font-style: normal;
margin: 0;
padding: 0;
text-transform: $form-label-small-transform;
font-style: normal;
font-size: 60%;
margin: 0;
display: inline;
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "../functions";
@import '../functions';
//
// Foundation Variables
//
@@ -70,9 +70,76 @@ $base-line-height: 1.5 !default;
// We use this to add transitions to elements
// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
// $speed - Default: 300ms
// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
// $ease - Default: ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
transition: $property $speed $ease;
@include transition($property, $speed, $ease);
}
// @mixins
//
// We use this to add single or multiple transitions to elements
// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
// $speed - Default: 300ms
// $ease - Default: ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
// $delay - Default: null (0s)
@mixin transition($property:all, $speed:300ms, $ease:ease-out, $delay:null) {
$transition: none;
@if length($property) > 1 {
@each $transition_list in $property {
@for $i from 1 through length($transition_list) {
@if $i == 1 {
$_property: nth($transition_list, $i);
}
@if length($transition_list) > 1 {
@if $i == 2 {
$_speed: nth($transition_list, $i);
}
} @else {
$_speed: $speed;
}
@if length($transition_list) > 2 {
@if $i == 3 {
$_ease: nth($transition_list, $i);
}
} @else {
$_ease: $ease;
}
@if length($transition_list) > 3 {
@if $i == 4 {
$_delay: nth($transition_list, $i);
}
} @else {
$_delay: $delay;
}
}
@if $transition == none {
$transition: $_property $_speed $_ease $_delay;
} @else {
$transition: $transition, $_property $_speed $_ease $_delay;
}
}
}
@else {
@each $prop in $property {
@if $transition == none {
$transition: $prop $speed $ease $delay;
} @else {
$transition: $transition, $prop $speed $ease $delay;
}
}
}
transition: $transition;
}
// @mixins
@@ -91,11 +158,11 @@ $base-line-height: 1.5 !default;
// $triangle-color - Used to set border-color which makes up triangle. No default
// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
border: inset $triangle-size;
content: "";
display: block;
width: 0;
height: 0;
border: inset $triangle-size;
width: 0;
@if ($triangle-direction == top) {
border-color: $triangle-color transparent transparent transparent;
border-top-style: solid;
@@ -128,9 +195,9 @@ $base-line-height: 1.5 !default;
@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
span::after {
content: "";
position: absolute;
display: block;
height: 0;
position: absolute;
@if $offcanvas {
@if $top {
@@ -148,8 +215,8 @@ $base-line-height: 1.5 !default;
}
}
@else {
top: 50%;
margin-top: -($width/2);
top: 50%;
#{$opposite-direction}: $topbar-link-padding;
}
@@ -183,8 +250,8 @@ $base-line-height: 1.5 !default;
transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
&:#{$selector} {
box-shadow: 0 0 5px $glowing-effect-color;
border-color: $glowing-effect-color;
box-shadow: 0 0 5px $glowing-effect-color;
}
}
@@ -194,7 +261,7 @@ $base-line-height: 1.5 !default;
// $horizontal: Default: 0
// $vertical: Default: 0
@mixin translate2d($horizontal:0, $vertical:0) {
transform: translate($horizontal,$vertical)
transform: translate($horizontal, $vertical)
}
// @mixins
@@ -202,11 +269,11 @@ $base-line-height: 1.5 !default;
// Makes an element visually hidden, but accessible.
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
// @mixins
@@ -291,17 +358,22 @@ $shiny-edge-active-color: rgba(#000, .2) !default;
// We use this to control whether or not CSS classes come through in the gem files.
$include-html-classes: true !default;
$include-print-styles: true !default;
$include-js-meta-styles: true !default; // Warning! Meta styles are a dependancy of the Javascript.
$include-html-global-classes: $include-html-classes !default;
$column-gutter: rem-calc(30) !default;
// Media Query Ranges
$small-range: (0, 40em) !default;
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em, 99999999em) !default;
$small-breakpoint: em-calc(640) !default;
$medium-breakpoint: em-calc(1024) !default;
$large-breakpoint: em-calc(1440) !default;
$xlarge-breakpoint: em-calc(1920) !default;
$small-range: (0, $small-breakpoint) !default;
$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint) !default;
$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint) !default;
$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint) !default;
$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default;
$screen: "only screen" !default;
@@ -323,8 +395,17 @@ $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
$retina: (
"#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
"#{$screen} and (min--moz-device-pixel-ratio: 2)",
"#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
"#{$screen} and (min-device-pixel-ratio: 2)",
"#{$screen} and (min-resolution: 192dpi)",
"#{$screen} and (min-resolution: 2dppx)"
);
// Legacy
$small: $medium-up;
$small: $small-up;
$medium: $medium-up;
$large: $large-up;
@@ -341,61 +422,65 @@ $cursor-text-value: text !default;
@include exports("global") {
// Meta styles are included in all builds, as they are a dependancy of the Javascript.
// Meta styles are a dependancy of the Javascript.
// Used to provide media query values for javascript components.
// Forward slash placed around everything to convince PhantomJS to read the value.
meta.foundation-version {
font-family: "/5.5.1/";
}
@if $include-js-meta-styles {
meta.foundation-mq-small {
font-family: "/" + unquote($small-up) + "/";
width: lower-bound($small-range);
}
meta.foundation-version {
font-family: "/5.5.3/";
}
meta.foundation-mq-small-only {
font-family: "/" + unquote($small-only) + "/";
width: lower-bound($small-range);
}
meta.foundation-mq-small {
font-family: "/" + unquote($small-up) + "/";
width: lower-bound($small-range);
}
meta.foundation-mq-medium {
font-family: "/" + unquote($medium-up) + "/";
width: lower-bound($medium-range);
}
meta.foundation-mq-small-only {
font-family: "/" + unquote($small-only) + "/";
width: lower-bound($small-range);
}
meta.foundation-mq-medium-only {
font-family: "/" + unquote($medium-only) + "/";
width: lower-bound($medium-range);
}
meta.foundation-mq-medium {
font-family: "/" + unquote($medium-up) + "/";
width: lower-bound($medium-range);
}
meta.foundation-mq-large {
font-family: "/" + unquote($large-up) + "/";
width: lower-bound($large-range);
}
meta.foundation-mq-medium-only {
font-family: "/" + unquote($medium-only) + "/";
width: lower-bound($medium-range);
}
meta.foundation-mq-large-only {
font-family: "/" + unquote($large-only) + "/";
width: lower-bound($large-range);
}
meta.foundation-mq-large {
font-family: "/" + unquote($large-up) + "/";
width: lower-bound($large-range);
}
meta.foundation-mq-xlarge {
font-family: "/" + unquote($xlarge-up) + "/";
width: lower-bound($xlarge-range);
}
meta.foundation-mq-large-only {
font-family: "/" + unquote($large-only) + "/";
width: lower-bound($large-range);
}
meta.foundation-mq-xlarge-only {
font-family: "/" + unquote($xlarge-only) + "/";
width: lower-bound($xlarge-range);
}
meta.foundation-mq-xlarge {
font-family: "/" + unquote($xlarge-up) + "/";
width: lower-bound($xlarge-range);
}
meta.foundation-mq-xxlarge {
font-family: "/" + unquote($xxlarge-up) + "/";
width: lower-bound($xxlarge-range);
}
meta.foundation-mq-xlarge-only {
font-family: "/" + unquote($xlarge-only) + "/";
width: lower-bound($xlarge-range);
}
meta.foundation-mq-xxlarge {
font-family: "/" + unquote($xxlarge-up) + "/";
width: lower-bound($xxlarge-range);
}
meta.foundation-data-attribute-namespace {
font-family: #{$namespace};
}
meta.foundation-data-attribute-namespace {
font-family: #{$namespace};
}
@if $include-html-global-classes {
@@ -417,14 +502,14 @@ $cursor-text-value: text !default;
body {
background: $body-bg;
color: $body-font-color;
padding: 0;
margin: 0;
font-family: $body-font-family;
font-weight: $body-font-weight;
font-style: $body-font-style;
line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
position: relative;
cursor: $cursor-auto-value;
font-family: $body-font-family;
font-style: $body-font-style;
font-weight: $body-font-weight;
line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
margin: 0;
padding: 0;
position: relative;
}
a:hover { cursor: $cursor-pointer-value; }
@@ -435,7 +520,8 @@ $cursor-text-value: text !default;
img { -ms-interpolation-mode: bicubic; }
#map_canvas,
.map_canvas {
.map_canvas,
.mqa-display {
img,
embed,
object { max-width: none !important;

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -29,7 +29,9 @@ $last-child-float: $opposite-direction !default;
// $colNumber - Found in settings file
// $totalColumns - Found in settings file
@function grid-calc($colNumber, $totalColumns) {
@return percentage(($colNumber / $totalColumns));
$result: percentage(($colNumber / $totalColumns));
@if $result == 0% { $result: 0; }
@return $result;
}
//
@@ -44,36 +46,30 @@ $last-child-float: $opposite-direction !default;
// use @include grid-row(nest); to include a nested row
@if $behavior == nest {
width: auto;
margin-#{$default-float}: -($column-gutter/2);
margin-#{$opposite-direction}: -($column-gutter/2);
margin-top: 0;
margin-bottom: 0;
margin: 0 (-($column-gutter/2));
max-width: none;
width: auto;
}
// use @include grid-row(collapse); to collapsed a container row margins
@else if $behavior == collapse {
width: 100%;
margin: 0;
max-width: $row-width;
width: 100%;
}
// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
@else if $behavior == nest-collapse {
width: auto;
margin: 0;
max-width: none;
width: auto;
}
// use @include grid-row; to use a container row
@else {
width: 100%;
margin-#{$default-float}: auto;
margin-#{$opposite-direction}: auto;
margin-top: 0;
margin-bottom: 0;
margin: 0 auto;
max-width: $row-width;
width: 100%;
}
// Clearfix for all rows
@@ -132,7 +128,7 @@ $last-child-float: $opposite-direction !default;
@if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
@if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; }
@if $float {
@if $float and $last-column == false {
@if $float == left or $float == true { float: $default-float; }
@else if $float == right { float: $opposite-direction; }
@else { float: none; }
@@ -169,19 +165,19 @@ $last-child-float: $opposite-direction !default;
@for $i from 1 through $total-columns {
.#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
.#{$size}-#{$i} { @include grid-column($columns:$i, $collapse:null, $float:false); }
}
@for $i from 0 through $total-columns - 1 {
.#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
.#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null, $float:false); }
}
.#{$size}-reset-order {
float: $default-float;
left: auto;
margin-#{$default-float}: 0;
margin-#{$opposite-direction}: 0;
left: auto;
right: auto;
float: $default-float;
}
.column.#{$size}-centered,
@@ -189,9 +185,9 @@ $last-child-float: $opposite-direction !default;
.column.#{$size}-uncentered,
.columns.#{$size}-uncentered {
float: $default-float;
margin-#{$default-float}: 0;
margin-#{$opposite-direction}: 0;
float: $default-float;
}
// Fighting [class*="column"] + [class*="column"]:last-child
@@ -211,20 +207,20 @@ $last-child-float: $opposite-direction !default;
float: $opposite-direction;
}
.row {
&.#{$size}-collapse {
> .column,
> .columns { @include grid-column($collapse:true, $float:false); }
.row {
&.#{$size}-collapse {
> .column,
> .columns { @include grid-column($collapse:true, $float:false); }
.row {margin-left:0; margin-right:0;}
}
&.#{$size}-uncollapse {
> .column,
> .columns {
@include grid-column;
}
}
}
.row {margin-left:0; margin-right:0;}
}
&.#{$size}-uncollapse {
> .column,
> .columns {
@include grid-column;
}
}
}
}
@include exports("grid") {
@@ -247,8 +243,15 @@ $last-child-float: $opposite-direction !default;
.column,
.columns { @include grid-column($columns:$total-columns); }
[class*="column"] + [class*="column"]:last-child { float: $last-child-float; }
[class*="column"] + [class*="column"].end { float: $default-float; }
.column,
.columns {
& + &:last-child {
float: $last-child-float;
}
& + &.end {
float: $default-float;
}
}
@media #{$small-up} {
@include grid-html-classes($size:small);

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
// @name
@@ -27,7 +27,7 @@ $icon-bar-active-color: $primary-color !default;
$icon-bar-item-padding: 1.25rem !default;
// We use this to set default opacity and cursor for disabled icons.
$icon-bar-disabled-opacity: 0.7 !default;
$icon-bar-disabled-opacity: .7 !default;
$icon-bar-disabled-cursor: $cursor-disabled-value !default;
@@ -38,123 +38,123 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default;
// We use this mixin to create the base styles for our Icon bar element.
//
@mixin icon-bar-base() {
display: inline-block;
font-size: 0;
width: 100%;
width: 100%;
font-size: 0;
display: inline-block;
> * {
display: block;
float: left;
font-size: $icon-bar-font-size;
margin: 0 auto;
padding: $icon-bar-item-padding;
text-align: center;
width: 25%;
& > * {
text-align: center;
font-size: $icon-bar-font-size;
width: 25%;
margin: 0 auto;
display: block;
padding: $icon-bar-item-padding;
float: left;
i, img {
display: block;
margin: 0 auto;
i, img {
display: block;
margin: 0 auto;
& + label {
margin-top: .0625rem;
}
}
& + label {
margin-top: .0625rem;
}
}
i {
font-size: $icon-bar-icon-size;
vertical-align: middle;
}
i {
font-size: $icon-bar-icon-size;
vertical-align: middle;
}
img {
height: $icon-bar-image-height;
width: $icon-bar-image-width;
}
}
img {
width: $icon-bar-image-width;
height: $icon-bar-image-height;
}
}
&.label-right > * {
&.label-right > * {
i, img {
display: inline-block;
margin: 0 .0625rem 0 0;
i, img {
margin: 0 .0625rem 0 0;
display: inline-block;
& + label {
margin-top: 0;
}
}
& + label {
margin-top: 0;
}
}
label { display: inline-block; }
}
label { display: inline-block; }
}
&.vertical.label-right > * {
text-align: left;
}
&.vertical.label-right > * {
text-align: left;
}
&.vertical, &.small-vertical{
height: 100%;
width: auto;
&.vertical, &.small-vertical{
height: 100%;
width: auto;
.item {
float: none;
margin: auto;
width: auto;
}
}
.item {
width: auto;
margin: auto;
float: none;
}
}
&.medium-vertical {
@media #{$medium-up} {
height: 100%;
width: auto;
&.medium-vertical {
@media #{$medium-up} {
height: 100%;
width: auto;
.item {
float: none;
margin: auto;
width: auto;
}
}
}
&.large-vertical {
@media #{$large-up} {
height: 100%;
width: auto;
.item {
width: auto;
margin: auto;
float: none;
}
}
}
&.large-vertical {
@media #{$large-up} {
height: 100%;
width: auto;
.item {
width: auto;
margin: auto;
float: none;
}
}
}
.item {
float: none;
margin: auto;
width: auto;
}
}
}
}
// We use this mixin to create the size styles for icon bars.
@mixin icon-bar-size(
$padding: $icon-bar-item-padding,
$font-size: $icon-bar-font-size,
$icon-size: $icon-bar-icon-size,
$image-width: $icon-bar-image-width,
$image-height: $icon-bar-image-height) {
$padding: $icon-bar-item-padding,
$font-size: $icon-bar-font-size,
$icon-size: $icon-bar-icon-size,
$image-width: $icon-bar-image-width,
$image-height: $icon-bar-image-height) {
& > * {
font-size: $font-size;
padding: $padding;
> * {
font-size: $font-size;
padding: $padding;
i, img {
i, img {
& + label {
margin-top: .0625rem;
}
}
& + label {
margin-top: .0625rem;
font-size: $font-size;
}
}
i {
font-size: $icon-size;
}
i {
font-size: $icon-size;
}
img {
width: $image-width;
height: $image-height;
}
}
img {
height: $image-height;
width: $image-width;
}
}
}
@@ -169,38 +169,38 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default;
$base-style:true,
$disabled:false) {
@if $base-style {
@if $base-style {
background: $bar-bg;
background: $bar-bg;
& > * {
label { color: $bar-font-color; }
> * {
label { color: $bar-font-color; }
i { color: $bar-icon-color; }
}
i { color: $bar-icon-color; }
}
& > a:hover {
> a:hover {
background: $bar-hover-color;
background: $bar-hover-color;
label { color: $bar-font-color-hover; }
label { color: $bar-font-color-hover; }
i { color: $bar-icon-color-hover; }
}
i { color: $bar-icon-color-hover; }
}
& > a.active {
> a.active {
background: $bar-active-color;
background: $bar-active-color;
label { color: $bar-font-color-hover; }
label { color: $bar-font-color-hover; }
i { color: $bar-icon-color-hover; }
}
}
i { color: $bar-icon-color-hover; }
}
}
@if $disabled {
.item.disabled {
opacity: $icon-bar-disabled-opacity;
cursor: $icon-bar-disabled-cursor;
opacity: $icon-bar-disabled-opacity;
pointer-events: none;
>* {
opacity: $icon-bar-disabled-opacity;
@@ -230,15 +230,116 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default;
$bar-icon-color-hover:$icon-bar-icon-color-hover,
$bar-active-color:$icon-bar-active-color,
$padding: $icon-bar-item-padding,
$font-size: $icon-bar-font-size,
$icon-size: $icon-bar-icon-size,
$image-width: $icon-bar-image-width,
$image-height: $icon-bar-image-height,
$font-size: $icon-bar-font-size,
$icon-size: $icon-bar-icon-size,
$image-width: $icon-bar-image-width,
$image-height: $icon-bar-image-height,
$base-style:true,
$disabled:true) {
@include icon-bar-base();
@include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
@include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
// Counts
&.two-up {
.item { width: 50%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.three-up {
.item { width: 33.3333%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.four-up {
.item { width: 25%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.five-up {
.item { width: 20%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.six-up {
.item { width: 16.66667%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.seven-up {
.item { width: 14.28571%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.eight-up {
.item { width: 12.5%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
}
@include exports("icon-bar") {
@@ -251,109 +352,109 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default;
@if $include-html-icon-bar-classes {
// toolbar styles
// toolbar styles
.icon-bar {
.icon-bar {
// Counts
// Counts
&.two-up {
.item { width: 50%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.three-up {
.item { width: 33.3333%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.four-up {
.item { width: 25%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.five-up {
.item { width: 20%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.six-up {
.item { width: 16.66667%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.seven-up {
.item { width: 14.28571%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
&.two-up {
.item { width: 50%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.three-up {
.item { width: 33.3333%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.four-up {
.item { width: 25%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.five-up {
.item { width: 20%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.six-up {
.item { width: 16.66667%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.seven-up {
.item { width: 14.28571%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.eight-up {
.item { width: 12.5%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
.item { width: 12.5%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
}
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -32,19 +32,20 @@ $inline-list-children-display: block !default;
//
// We use this mixin to create inline lists
@mixin inline-list {
margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
list-style: none;
margin-top: $inline-list-top-margin;
margin-bottom: $inline-list-bottom-margin;
margin-#{$default-float}: $inline-list-default-float-margin;
margin-#{$opposite-direction}: $inline-list-opposite-margin;
padding: $inline-list-padding;
list-style: none;
overflow: $inline-list-overflow;
padding: $inline-list-padding;
& > li {
list-style: none;
float: $default-float;
margin-#{$default-float}: $inline-list-default-float-list-margin;
> li {
display: $inline-list-display;
&>* { display: $inline-list-children-display; }
float: $default-float;
list-style: none;
margin-#{$default-float}: $inline-list-default-float-list-margin;
> * { display: $inline-list-children-display; }
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -49,28 +49,27 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
/* Default styles for the container */
.joyride-tip-guide {
display: none;
position: absolute;
background: $joyride-tip-bg;
color: $joyride-tip-font-color;
z-index: 101;
top: 0;
#{$default-float}: 2.5%;
display: none;
font-family: inherit;
font-weight: $font-weight-normal;
position: absolute;
top: 0;
width: 95%;
z-index: 103;
#{$default-float}: 2.5%;
}
.lt-ie9 .joyride-tip-guide {
max-width:800px;
margin-#{$default-float}: -400px;
max-width: 800px;
#{$default-float}: 50%;
margin-#{$default-float}:-400px;
}
.joyride-content-wrapper {
width: 100%;
padding: $joyride-tip-padding;
width: 100%;
.button { margin-bottom: 0 !important; }
@@ -80,25 +79,25 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
.joyride-tip-guide {
.joyride-nub {
display: block;
position: absolute;
#{$default-float}: $joyride-tip-position-offset;
width: 0;
height: 0;
border: $joyride-tip-nub-size solid $joyride-tip-bg;
display: block;
height: 0;
position: absolute;
width: 0;
#{$default-float}: $joyride-tip-position-offset;
&.top {
border-top-style: solid;
border-color: $joyride-tip-bg;
border-top-color: transparent !important;
border-top-style: solid;
border-#{$default-float}-color: transparent !important;
border-#{$opposite-direction}-color: transparent !important;
top: -($joyride-tip-nub-size*2);
}
&.bottom {
border-bottom-style: solid;
border-color: $joyride-tip-bg !important;
border-bottom-color: transparent !important;
border-bottom-style: solid;
border-#{$default-float}-color: transparent !important;
border-#{$opposite-direction}-color: transparent !important;
bottom: -($joyride-tip-nub-size*2);
@@ -116,74 +115,73 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
.joyride-tip-guide h4,
.joyride-tip-guide h5,
.joyride-tip-guide h6 {
color: $joyride-tip-font-color;
font-weight: $joyride-tip-header-weight;
line-height: 1.25;
margin: 0;
font-weight: $joyride-tip-header-weight;
color: $joyride-tip-font-color;
}
.joyride-tip-guide p {
margin: rem-calc(0 0 18 0);
font-size: $joyride-tip-font-size;
line-height: 1.3;
margin: rem-calc(0 0 18 0);
}
.joyride-timer-indicator-wrap {
width: $joyride-tip-timer-width;
height: $joyride-tip-timer-height;
border: $joyride-tip-border;
position: absolute;
#{$opposite-direction}: rem-calc(17);
bottom: rem-calc(16);
height: $joyride-tip-timer-height;
position: absolute;
width: $joyride-tip-timer-width;
#{$opposite-direction}: rem-calc(17);
}
.joyride-timer-indicator {
display: block;
width: 0;
height: inherit;
background: $joyride-tip-timer-color;
display: block;
height: inherit;
width: 0;
}
.joyride-close-tip {
position: absolute;
#{$opposite-direction}: 12px;
top: 10px;
color: $joyride-tip-close-color !important;
text-decoration: none;
font-size: $joyride-tip-close-size;
font-weight: $joyride-tip-close-weight;
line-height: .5 !important;
position: absolute;
text-decoration: none;
top: 10px;
#{$opposite-direction}: 12px;
&:hover,
&:focus { color: $smoke !important; }
}
.joyride-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: transparent;
background: $joyride-screenfill;
z-index: 100;
display: none;
top: 0;
#{$default-float}: 0;
cursor: $cursor-pointer-value;
display: none;
height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
#{$default-float}: 0;
}
.joyride-expose-wrapper {
background-color: $white;
position: absolute;
border-radius: 3px;
z-index: 102;
box-shadow: 0 0 15px $white;
position: absolute;
z-index: 102;
}
.joyride-expose-cover {
background: transparent;
border-radius: 3px;
position: absolute;
z-index: 9999;
top: 0;
left: 0;
position: absolute;
top: 0;
z-index: 9999;
}
@@ -200,20 +198,20 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
}
&.right {
border-color: $joyride-tip-bg !important;
border-top-color: transparent !important;
border-right-color: transparent !important; border-bottom-color: transparent !important;
top: $joyride-tip-position-offset;
border-top-color: transparent !important;
left: auto;
right: -($joyride-tip-nub-size*2);
top: $joyride-tip-position-offset;
}
&.left {
border-color: $joyride-tip-bg !important;
border-top-color: transparent !important;
border-left-color: transparent !important;
border-bottom-color: transparent !important;
top: $joyride-tip-position-offset;
border-left-color: transparent !important;
border-top-color: transparent !important;
left: -($joyride-tip-nub-size*2);
right: auto;
top: $joyride-tip-position-offset;
}
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -34,7 +34,6 @@ $keystroke-radius: $global-radius !default;
@mixin keystroke($bg:$keystroke-bg) {
// This find the lightness percentage of the background color.
$bg-lightness: lightness($bg);
background-color: $bg;
border-color: scale-color($bg, $lightness: $keystroke-function-factor);
@@ -44,9 +43,9 @@ $keystroke-radius: $global-radius !default;
border-style: $keystroke-border-style;
border-width: $keystroke-border-width;
margin: 0;
font-family: $keystroke-font;
font-size: $keystroke-font-size;
margin: 0;
padding: $keystroke-padding;
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -25,15 +25,15 @@ $label-font-family: $body-font-family !default;
//
// We use this mixin to create a default label base.
@mixin label-base {
font-weight: $label-font-weight;
display: inline-block;
font-family: $label-font-family;
font-weight: $label-font-weight;
line-height: 1;
margin-bottom: auto;
position: relative;
text-align: center;
text-decoration: none;
line-height: 1;
white-space: nowrap;
display: inline-block;
position: relative;
margin-bottom: auto;
}
// @mixins

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -17,9 +17,9 @@ $magellan-padding: 10px !default;
#{data('magellan-expedition')}, #{data('magellan-expedition-clone')} {
background: $magellan-bg;
z-index: 50;
min-width: 100%;
padding: $magellan-padding;
z-index: 50;
.sub-nav {
margin-bottom: 0;

View File

@@ -2,8 +2,8 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import "type";
@import 'global';
@import 'type';
// Off Canvas Tab Bar Variables
$include-html-off-canvas-classes: $include-html-classes !default;
@@ -28,11 +28,13 @@ $tabbar-header-margin: 0 !default;
// Off Canvas Menu Variables
$off-canvas-width: rem-calc(250) !default;
$off-canvas-height: rem-calc(300) !default;
$off-canvas-bg: $oil !default;
$off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%) !default;
$off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%) !default;
// Off Canvas Menu List Variables
$off-canvas-label-padding: 0.3rem rem-calc(15) !default;
$off-canvas-label-padding: .3rem rem-calc(15) !default;
$off-canvas-label-color: $aluminum !default;
$off-canvas-label-text-transform: uppercase !default;
$off-canvas-label-font-size: rem-calc(12) !default;
@@ -42,7 +44,7 @@ $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $light
$off-canvas-label-border-bottom: none !default;
$off-canvas-label-margin:0 !default;
$off-canvas-link-padding: rem-calc(10, 15) !default;
$off-canvas-link-color: rgba($white, 0.7) !default;
$off-canvas-link-color: rgba($white, .7) !default;
$off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default;
$off-canvas-back-bg: #444 !default;
$off-canvas-back-border-top: $off-canvas-label-border-top !default;
@@ -69,9 +71,9 @@ $tabbar-hamburger-icon-gap: 6px !default;
// Off Canvas Back-Link Overlay
$off-canvas-overlay-transition: background 300ms ease !default;
$off-canvas-overlay-cursor: pointer !default;
$off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5) !default;
$off-canvas-overlay-background: rgba($white, 0.2) !default;
$off-canvas-overlay-background-hover: rgba($white, 0.05) !default;
$off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, .5), 4px 0 4px rgba($black, .5) !default;
$off-canvas-overlay-background: rgba($white, .2) !default;
$off-canvas-overlay-background-hover: rgba($white, .05) !default;
// Transition Variables
$menu-slide: "transform 500ms ease" !default;
@@ -90,39 +92,51 @@ $menu-slide: "transform 500ms ease" !default;
width: 100%;
}
@mixin translate3d($tx,$ty,$tz) {
-ms-transform: translate($tx,$ty);
-webkit-transform: translate3d($tx,$ty,$tz);
-moz-transform: translate3d($tx,$ty,$tz);
-ms-transform: translate3d($tx,$ty,$tz);
-o-transform: translate3d($tx,$ty,$tz);
transform: translate3d($tx,$ty,$tz)
@mixin translate3d($tx, $ty, $tz) {
-webkit-transform: translate3d($tx, $ty, $tz);
-moz-transform: translate3d($tx, $ty, $tz);
-ms-transform: translate($tx, $ty);
-o-transform: translate3d($tx, $ty, $tz);
transform: translate3d($tx, $ty, $tz)
}
// basic styles for off-canvas menu container
@mixin off-canvas-menu($position) {
@include kill-flicker;
* { @include kill-flicker; }
width: $off-canvas-width;
top: 0;
bottom: 0;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
background: $off-canvas-bg;
z-index: 1001;
bottom: 0;
box-sizing: content-box;
transition: transform 500ms ease 0s;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
transition: transform 500ms ease 0s;
width: $off-canvas-width;
z-index: 1001;
@if $position == left {
@include translate3d(-100%,0,0);
left: 0;
top: 0;
}
@if $position == right {
@include translate3d(100%,0,0);
right: 0;
top: 0;
}
@if $position == top {
@include translate3d(0,-100%,0);
top: 0;
width: 100%;
height: $off-canvas-height;
}
@if $position == bottom {
@include translate3d(0,100%,0);
bottom: 0;
width: 100%;
height: $off-canvas-height;
}
}
@@ -133,7 +147,9 @@ $menu-slide: "transform 500ms ease" !default;
@include wrap-base;
overflow: hidden;
&.move-right,
&.move-left { min-height: 100%; -webkit-overflow-scrolling: touch; }
&.move-left,
&.move-bottom,
&.move-top { min-height: 100%; -webkit-overflow-scrolling: touch; }
}
// INNER WRAP
@@ -166,22 +182,22 @@ $menu-slide: "transform 500ms ease" !default;
// z-index: 999;
// Typography
h1,h2,h3,h4,h5,h6 {
h1, h2, h3, h4, h5, h6 {
color: $tabbar-header-color;
font-weight: $tabbar-header-weight;
line-height: $tabbar-header-line-height;
margin: $tabbar-header-margin;
}
h1,h2,h3,h4 { font-size: $h5-font-size; }
h1, h2, h3, h4 { font-size: $h5-font-size; }
}
// SMALL SECTIONS
// These are small sections on the left and right that contain the off-canvas toggle buttons;
@mixin tabbar-small-section($position) {
width: $tabbar-icon-width;
height: $tabbar-height;
position: absolute;
top: 0;
width: $tabbar-icon-width;
@if $position == left {
border-right: $tabbar-left-section-border;
// box-shadow: 1px 0 0 scale-color($tabbar-bg, $lightness: 13%);
@@ -195,15 +211,14 @@ $menu-slide: "transform 500ms ease" !default;
}
@mixin tab-bar-section {
height: $tabbar-height;
padding: $tabbar-middle-padding;
position: absolute;
text-align: center;
height: $tabbar-height;
top: 0;
@media #{$medium-up} {
&.left { text-align: left; }
&.right { text-align: right; }
}
// still need to make these non-presentational
&.left {
@@ -224,31 +239,34 @@ $menu-slide: "transform 500ms ease" !default;
// This is the list of links in the off-canvas menu
@mixin off-canvas-list {
list-style-type: none;
padding:0;
margin:0;
padding:0;
li {
label {
display: block;
padding: $off-canvas-label-padding;
background: $off-canvas-label-bg;
border-bottom: $off-canvas-label-border-bottom;
border-top: $off-canvas-label-border-top;
color: $off-canvas-label-color;
text-transform: $off-canvas-label-text-transform;
display: block;
font-size: $off-canvas-label-font-size;
font-weight: $off-canvas-label-font-weight;
background: $off-canvas-label-bg;
border-top: $off-canvas-label-border-top;
border-bottom: $off-canvas-label-border-bottom;
margin: $off-canvas-label-margin;
padding: $off-canvas-label-padding;
text-transform: $off-canvas-label-text-transform;
}
a {
border-bottom: $off-canvas-link-border-bottom;
color: $off-canvas-link-color;
display: block;
padding: $off-canvas-link-padding;
color: $off-canvas-link-color;
border-bottom: $off-canvas-link-border-bottom;
transition: background 300ms ease;
&:hover {
background: $off-canvas-bg-hover;
}
&:active {
background: $off-canvas-bg-active;
}
}
}
@@ -257,28 +275,132 @@ $menu-slide: "transform 500ms ease" !default;
// BACK LINK
// This is an overlay that, when clicked, will toggle off the off canvas menu
@mixin back-link {
@include kill-flicker;
@include kill-flicker;
transition: $off-canvas-overlay-transition;
cursor: $off-canvas-overlay-cursor;
box-shadow: $off-canvas-overlay-box-shadow;
box-shadow: $off-canvas-overlay-box-shadow;
cursor: $off-canvas-overlay-cursor;
transition: $off-canvas-overlay-transition;
// fill the screen
display: block;
position: absolute;
background: $off-canvas-overlay-background;
// fill the screen
-webkit-tap-highlight-color: rgba(0,0,0,0);
background: $off-canvas-overlay-background;
bottom: 0;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1002;
@media #{$medium-up} {
&:hover {
background: $off-canvas-overlay-background-hover;
}
}
}
//
// Off-Canvas Submenu Classes
//
@mixin off-canvas-submenu($position) {
@include kill-flicker;
* { @include kill-flicker; }
-webkit-overflow-scrolling: touch;
background: $off-canvas-bg;
bottom: 0;
box-sizing: content-box;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
width: $off-canvas-width;
height: $off-canvas-height;
z-index: 1002;
@if $position == left {
@include translate3d(-100%,0,0);
left: 0;
}
@if $position == right {
@include translate3d(100%,0,0);
right: 0;
}
@if $position == top {
@include translate3d(0,-100%,0);
top: 0;
width: 100%;
}
@if $position == bottom {
@include translate3d(0,100%,0);
bottom: 0;
left:0;
right:0;
z-index: 1002;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
}
-webkit-transition: -webkit-#{$menu-slide};
-moz-transition: -moz-#{$menu-slide};
-ms-transition: -ms-#{$menu-slide};
-o-transition: -o-#{$menu-slide};
transition: #{$menu-slide};
@media #{$medium-up} {
&:hover {
background: $off-canvas-overlay-background-hover;
//back button style like label
.back > a {
background: $off-canvas-back-bg;
border-bottom: $off-canvas-back-border-bottom;
border-top: $off-canvas-back-border-top;
color: $off-canvas-label-color;
font-weight: $off-canvas-label-font-weight;
padding: $off-canvas-label-padding;
text-transform: $off-canvas-label-text-transform;
&:hover {
background: $off-canvas-back-hover-bg;
border-bottom: $off-canvas-back-hover-border-bottom;
border-top: $off-canvas-back-hover-border-top;
}
margin: $off-canvas-label-margin;
@if $position == right {
@if $text-direction == rtl {
&:before {
@include icon-double-arrows($position: left);
}
} @else {
&:after {
@include icon-double-arrows($position: right);
}
}
}
@if $position == left {
@if $text-direction == rtl {
&:after {
@include icon-double-arrows($position: right);
}
} @else {
&:before {
@include icon-double-arrows($position: left);
}
}
}
}
}
//Left double angle quote or Right double angle quote chars
@mixin icon-double-arrows ($position) {
@if $position == left {
content: "\AB";
@if $text-direction == rtl {
margin-left: .5rem;
} @else {
margin-right: .5rem;
}
}
@if $position == right {
content: "\BB";
@if $text-direction == rtl {
margin-right: .5rem;
} @else {
margin-left: .5rem;
}
}
display: inline;
}
//
@@ -300,14 +422,14 @@ $menu-slide: "transform 500ms ease" !default;
// MENU BUTTON
// This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future.
.tab-bar .menu-icon {
text-indent: $tabbar-menu-icon-text-indent;
width: $tabbar-menu-icon-width;
height: $tabbar-menu-icon-height;
display: block;
padding: $tabbar-menu-icon-padding;
color: $tabbar-menu-icon-color;
display: block;
height: $tabbar-menu-icon-height;
padding: $tabbar-menu-icon-padding;
position: relative;
text-indent: $tabbar-menu-icon-text-indent;
transform: translate3d(0,0,0);
width: $tabbar-menu-icon-width;
// @include for the hamburger menu-icon
//
@@ -325,6 +447,8 @@ $menu-slide: "transform 500ms ease" !default;
.left-off-canvas-menu { @include off-canvas-menu($position: left); }
.right-off-canvas-menu { @include off-canvas-menu($position: right); }
.top-off-canvas-menu { @include off-canvas-menu($position: top); }
.bottom-off-canvas-menu { @include off-canvas-menu($position: bottom); }
ul.off-canvas-list { @include off-canvas-list; }
@@ -345,8 +469,23 @@ $menu-slide: "transform 500ms ease" !default;
}
.exit-off-canvas { @include back-link; }
}
.move-top {
> .inner-wrap {
@include translate3d(0,-($off-canvas-height),0);
}
.exit-off-canvas { @include back-link; }
}
.move-bottom {
> .inner-wrap {
@include translate3d(0,($off-canvas-height),0);
}
.exit-off-canvas { @include back-link; }
}
.offcanvas-overlap {
.left-off-canvas-menu, .right-off-canvas-menu {
.left-off-canvas-menu, .right-off-canvas-menu,
.top-off-canvas-menu, .bottom-off-canvas-menu {
-ms-transform: none;
-webkit-transform: none;
-moz-transform: none;
@@ -378,138 +517,90 @@ $menu-slide: "transform 500ms ease" !default;
}
.exit-off-canvas { @include back-link; }
}
.offcanvas-overlap-top {
.bottom-off-canvas-menu {
-ms-transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
z-index: 1003;
}
.exit-off-canvas { @include back-link; }
}
.offcanvas-overlap-bottom {
.top-off-canvas-menu {
-ms-transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
z-index: 1003;
}
.exit-off-canvas { @include back-link; }
}
// Older browsers
.no-csstransforms {
.left-off-canvas-menu { left: -($off-canvas-width); }
.right-off-canvas-menu { right: -($off-canvas-width); }
.top-off-canvas-menu { top: -($off-canvas-height); }
.bottom-off-canvas-menu { bottom: -($off-canvas-height); }
.move-left > .inner-wrap { right: $off-canvas-width; }
.move-right > .inner-wrap { left: $off-canvas-width; }
.move-top > .inner-wrap { right: $off-canvas-height; }
.move-bottom > .inner-wrap { left: $off-canvas-height; }
}
}
}
//
// Off-Canvas Submenu Classes
//
@mixin off-canvas-submenu($position) {
@include kill-flicker;
* { @include kill-flicker; }
width: $off-canvas-width;
top: 0;
bottom: 0;
position: absolute;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
background: $off-canvas-bg;
z-index: 1002;
box-sizing: content-box;
-webkit-overflow-scrolling: touch;
@if $position == left {
@include translate3d(-100%,0,0);
left: 0;
}
@if $position == right {
@include translate3d(100%,0,0);
right: 0;
}
-webkit-transition: -webkit-#{$menu-slide};
-moz-transition: -moz-#{$menu-slide};
-ms-transition: -ms-#{$menu-slide};
-o-transition: -o-#{$menu-slide};
transition: #{$menu-slide};
//back button style like label
.back > a {
padding: $off-canvas-label-padding;
color: $off-canvas-label-color;
text-transform: $off-canvas-label-text-transform;
font-weight: $off-canvas-label-font-weight;
background: $off-canvas-back-bg;
border-top: $off-canvas-back-border-top;
border-bottom: $off-canvas-back-border-bottom;
&:hover {
background: $off-canvas-back-hover-bg;
border-top: $off-canvas-back-hover-border-top;
border-bottom: $off-canvas-back-hover-border-bottom;
}
margin: $off-canvas-label-margin;
@if $position == right {
@if $text-direction == rtl {
&:before {
@include icon-double-arrows($position: left);
}
} @else {
&:after {
@include icon-double-arrows($position: right);
}
.left-submenu {
@include off-canvas-submenu($position: left);
&.move-right, &.offcanvas-overlap-right, &.offcanvas-overlap {
@include translate3d(0%,0,0);
}
}
@if $position == left {
@if $text-direction == rtl {
&:after {
@include icon-double-arrows($position: right);
}
} @else {
&:before {
@include icon-double-arrows($position: left);
}
.right-submenu {
@include off-canvas-submenu($position: right);
&.move-left, &.offcanvas-overlap-left, &.offcanvas-overlap {
@include translate3d(0%,0,0);
}
}
}
}
//Left double angle quote or Right double angle quote chars
@mixin icon-double-arrows ($position){
@if $position == left {
content: "\AB";
.top-submenu {
@include off-canvas-submenu($position: top);
&.move-bottom, &.offcanvas-overlap-bottom, &.offcanvas-overlap {
@include translate3d(0,0%,0);
}
}
.bottom-submenu {
@include off-canvas-submenu($position: bottom);
&.move-top, &.offcanvas-overlap-top, &.offcanvas-overlap {
@include translate3d(0,0%,0);
}
}
@if $text-direction == rtl {
margin-left: 0.5rem;
.left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
@include icon-double-arrows($position: left);
}
.right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
@include icon-double-arrows($position: right);
}
} @else {
margin-right: 0.5rem;
.left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
@include icon-double-arrows($position: right);
}
.right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
@include icon-double-arrows($position: left);
}
}
}
@if $position == right {
content: "\BB";
@if $text-direction == rtl {
margin-right: 0.5rem;
} @else {
margin-left: 0.5rem;
}
}
display: inline;
}
@if $include-html-off-canvas-classes {
.left-submenu {
@include off-canvas-submenu($position: left);
&.move-right, &.offcanvas-overlap-right, &.offcanvas-overlap {
@include translate3d(0%,0,0);
}
}
.right-submenu {
@include off-canvas-submenu($position: right);
&.move-left, &.offcanvas-overlap-left, &.offcanvas-overlap {
@include translate3d(0%,0,0);
}
}
@if $text-direction == rtl {
.left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
@include icon-double-arrows($position: left);
}
.right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
@include icon-double-arrows($position: right);
}
} @else {
.left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
@include icon-double-arrows($position: right);
}
.right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
@include icon-double-arrows($position: left);
}
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
// @variables
//
@@ -10,7 +10,7 @@ $include-html-orbit-classes: $include-html-classes !default;
// We use these to control the caption styles
$orbit-container-bg: none !default;
$orbit-caption-bg: rgba(51,51,51, 0.8) !default;
$orbit-caption-bg: rgba(51,51,51, .8) !default;
$orbit-caption-font-color: $white !default;
$orbit-caption-font-size: rem-calc(14) !default;
$orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
@@ -51,20 +51,30 @@ $orbit-timer-hide-for-small: true !default;
@if $include-html-orbit-classes {
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotate {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-o-keyframes rotate {
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); }
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* Orbit Graceful Loading */
@@ -98,30 +108,30 @@ $orbit-timer-hide-for-small: true !default;
// Orbit preloader
.#{$preloader-class} {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
border: solid 3px;
border-color: $charcoal $white;
@include radius(1000px);
animation-name: rotate;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-name: rotate;
animation-timing-function: linear;
border-color: $charcoal $white;
border: solid 3px;
display: block;
height: 40px;
left: 50%;
margin-left: -20px;
margin-top: -20px;
position: absolute;
top: 50%;
width: 40px;
}
}
.orbit-container {
overflow: hidden;
width: 100%;
position: relative;
background: $orbit-container-bg;
overflow: hidden;
position: relative;
width: 100%;
.orbit-slides-container {
list-style: none;
@@ -131,10 +141,14 @@ $orbit-timer-hide-for-small: true !default;
// Prevents images (and captions) from disappearing after first rotation on Chrome for Android
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
img { display: block; max-width: 100%; }
&>* {
> * {
position: absolute;
top: 0;
width: 100%;
@@ -147,48 +161,51 @@ $orbit-timer-hide-for-small: true !default;
&:first-child {
@if $text-direction == rtl {
margin-right: 0;
margin-right: 0;
}
@else {
margin-left: 0;
margin-left: 0;
}
}
.orbit-caption {
@if $orbit-caption-position == "bottom" {
position: absolute;
bottom: 0;
position: absolute;
} @else if $orbit-caption-position == "under" {
position: relative;
}
background-color: $orbit-caption-bg;
color: $orbit-caption-font-color;
width: 100%;
padding: $orbit-caption-padding;
font-size: $orbit-caption-font-size;
padding: $orbit-caption-padding;
width: 100%;
}
}
}
.orbit-slide-number {
position: absolute;
top: 10px;
#{$default-float}: 10px;
font-size: 12px;
span { font-weight: 700; padding: $orbit-slide-number-padding;}
color: $orbit-slide-number-font-color;
background: $orbit-slide-number-bg;
color: $orbit-slide-number-font-color;
font-size: 12px;
position: absolute;
span { font-weight: 700; padding: $orbit-slide-number-padding;}
top: 10px;
z-index: 10;
}
.orbit-timer {
position: absolute;
top: 12px;
#{$opposite-direction}: 10px;
height: 6px;
width: 100px;
z-index: 10;
.orbit-progress {
@if $orbit-timer-show-progress-bar {
height: 3px;
@@ -198,26 +215,26 @@ $orbit-timer-hide-for-small: true !default;
position: relative;
right: 20px;
top: 5px;
}
}
// Play button
& > span {
border: solid 4px $white;
border-bottom: none;
border-top: none;
display: none;
height: 14px;
position: absolute;
top: 0;
#{$opposite-direction}: 0;
width: 11px;
height: 14px;
border: solid 4px $white;
border-top: none;
border-bottom: none;
#{$opposite-direction}: 0;
}
// Pause button
&.paused {
& > span {
#{$opposite-direction}: -4px;
top: 0;
width: 11px;
height: 14px;
@@ -225,6 +242,8 @@ $orbit-timer-hide-for-small: true !default;
border-left-style: solid;
border-color: transparent;
border-left-color: $white;
#{$opposite-direction}: -4px;
&.dark {
border-left-color: $oil;
}
@@ -239,15 +258,15 @@ $orbit-timer-hide-for-small: true !default;
// Let's get those controls to be right in the center on each side
.orbit-prev,
.orbit-next {
position: absolute;
top: 45%;
margin-top: -25px;
width: 36px;
background-color: $orbit-nav-bg;
color: white;
height: 60px;
line-height: 50px;
color: white;
background-color: $orbit-nav-bg;
margin-top: -25px;
position: absolute;
text-indent: -9999px !important;
top: 45%;
width: 36px;
z-index: 10;
&:hover {
@@ -255,13 +274,13 @@ $orbit-timer-hide-for-small: true !default;
}
& > span {
border: inset 10px;
display: block;
height: 0;
margin-top: -10px;
position: absolute;
top: 50%;
margin-top: -10px;
display: block;
width: 0;
height: 0;
border: inset 10px;
}
}
.orbit-prev { #{$default-float}: 0;
@@ -290,23 +309,24 @@ $orbit-timer-hide-for-small: true !default;
.orbit-bullets-container { text-align: center; }
.orbit-bullets {
display: block;
float: none;
margin: 0 auto 30px auto;
overflow: hidden;
position: relative;
top: 10px;
float: none;
text-align: center;
display: block;
top: 10px;
li {
cursor:pointer;
display: inline-block;
width: $orbit-bullet-radius;
height: $orbit-bullet-radius;
background: $orbit-bullet-nav-color;
cursor: pointer;
display: inline-block;
// float: $default-float;
float: none;
height: $orbit-bullet-radius;
margin-#{$opposite-direction}: 6px;
width: $orbit-bullet-radius;
@include radius(1000px);
&.active {
@@ -344,9 +364,9 @@ $orbit-timer-hide-for-small: true !default;
.orbit-stack-on-small {
.orbit-slides-container {height: auto !important;}
.orbit-slides-container > * {
margin:0 !important;
opacity: 1 !important;
position: relative;
margin:0 !important;
opacity:1 !important;
}
.orbit-slide-number {

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -51,6 +51,7 @@ $pagination-link-current-active-bg: $primary-color !default;
a, button {
cursor: $pagination-link-unavailable-cursor;
color: $pagination-link-unavailable-font-color;
pointer-events: none;
}
&:hover a,
& a:focus,
@@ -68,19 +69,19 @@ $pagination-link-current-active-bg: $primary-color !default;
a, button {
background: $pagination-link-current-background;
color: $pagination-link-current-font-color;
font-weight: $pagination-link-current-font-weight;
cursor: $pagination-link-current-cursor;
font-weight: $pagination-link-current-font-weight;
&:hover,
&:focus { background: $pagination-link-current-active-bg; }
}
} @else {
height: auto;
padding: $pagination-link-pad;
background: $pagination-link-current-background;
color: $pagination-link-current-font-color;
font-weight: $pagination-link-current-font-weight;
cursor: $pagination-link-current-cursor;
font-weight: $pagination-link-current-font-weight;
height: auto;
padding: $pagination-link-pad;
@include radius;
&:hover,
@@ -98,25 +99,25 @@ $pagination-link-current-active-bg: $primary-color !default;
@if $base-style {
display: block;
min-height: $pagination-height;
margin-#{$default-float}: $pagination-margin;
min-height: $pagination-height;
li {
height: $pagination-li-height;
color: $pagination-li-font-color;
font-size: $pagination-li-font-size;
height: $pagination-li-height;
margin-#{$default-float}: $pagination-li-margin;
a, button {
display: block;
padding: $pagination-link-pad;
color: $pagination-link-font-color;
background: none;
@include radius;
font-weight: normal;
font-size: 1em;
line-height: inherit;
@include single-transition(background-color);
background: none;
color: $pagination-link-font-color;
display: block;
font-size: 1em;
font-weight: normal;
line-height: inherit;
padding: $pagination-link-pad;
}
&:hover a,
@@ -135,11 +136,11 @@ $pagination-link-current-active-bg: $primary-color !default;
// Left or center align the li elements
li {
@if $center {
float: none;
display: inline-block;
float: none;
} @else {
float: $pagination-li-float;
display: block;
float: $pagination-li-float;
}
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -13,10 +13,10 @@ $include-html-panel-classes: $include-html-classes !default;
$panel-bg: scale-color($white, $lightness: -5%) !default;
$panel-border-style: solid !default;
$panel-border-size: 1px !default;
$callout-panel-bg: scale-color($primary-color, $lightness: 94%) !default;
// We use this % to control how much we darken things on hover
$panel-function-factor: -11% !default;
$panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor) !default;
$panel-border-color: scale-color($panel-bg, $lightness: -11%) !default;
// We use these to set default inner padding and bottom margin
$panel-margin-bottom: rem-calc(20) !default;
@@ -36,14 +36,20 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
// $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default
// $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
// $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {
@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust, $border:true) {
@if $bg {
$bg-lightness: lightness($bg);
border-style: $panel-border-style;
border-width: $panel-border-size;
border-color: scale-color($bg, $lightness: $panel-function-factor);
@if $border {
border-style: $panel-border-style;
border-width: $panel-border-size;
border-color: $panel-border-color;
} @else {
border-style: none;
border-width: 0;
}
margin-bottom: $panel-margin-bottom;
padding: $padding;
@@ -52,20 +58,20 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
@else { color: $panel-font-color-alt; }
// Respect the padding, fool.
&>:first-child { margin-top: 0; }
&>:last-child { margin-bottom: 0; }
> :first-child { margin-top: 0; }
> :last-child { margin-bottom: 0; }
@if $adjust {
// We set the font color based on the darkness of the bg.
@if $bg-lightness >= 50% {
h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; }
@if $bg-lightness >= 50% {
h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color; }
}
@else {
h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; }
@else {
h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color-alt; }
}
// reset header line-heights for panels
h1,h2,h3,h4,h5,h6 {
h1, h2, h3, h4, h5, h6 {
line-height: 1; margin-bottom: rem-calc(20) / 2;
&.subheader { line-height: 1.4; }
}
@@ -80,7 +86,7 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
.panel { @include panel;
&.callout {
@include panel(scale-color($primary-color, $lightness: 94%));
@include panel($callout-panel-bg);
a:not(.button) {
color: $callout-panel-link-color;

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -75,12 +75,12 @@ $price-cta-padding: rem-calc(20 20 0) !default;
// We use this mixin to create the pricing table title styles
@mixin pricing-table-title {
background-color: $price-title-bg;
color: $price-title-color;
font-family: $price-title-font-family;
font-size: $price-title-size;
font-weight: $price-title-weight;
padding: $price-title-padding;
text-align: $price-title-align;
color: $price-title-color;
font-weight: $price-title-weight;
font-size: $price-title-size;
font-family: $price-title-font-family;
}
// @mixins
@@ -88,12 +88,12 @@ $price-cta-padding: rem-calc(20 20 0) !default;
// We use this mixin to control the pricing table price styles
@mixin pricing-table-price {
background-color: $price-money-bg;
color: $price-money-color;
font-family: $price-money-font-family;
font-size: $price-money-size;
font-weight: $price-money-weight;
padding: $price-money-padding;
text-align: $price-money-align;
color: $price-money-color;
font-weight: $price-money-weight;
font-size: $price-money-size;
font-family: $price-money-font-family;
}
// @mixins
@@ -101,13 +101,13 @@ $price-cta-padding: rem-calc(20 20 0) !default;
// We use this mixin to create the description styles for the pricing table
@mixin pricing-table-description {
background-color: $price-bg;
padding: $price-desc-padding;
text-align: $price-desc-align;
border-bottom: $price-desc-bottom-border;
color: $price-desc-color;
font-size: $price-desc-font-size;
font-weight: $price-desc-weight;
line-height: $price-desc-line-height;
border-bottom: $price-desc-bottom-border;
padding: $price-desc-padding;
text-align: $price-desc-align;
}
// @mixins
@@ -115,12 +115,12 @@ $price-cta-padding: rem-calc(20 20 0) !default;
// We use this mixin to style the bullet items in the pricing table
@mixin pricing-table-bullet {
background-color: $price-bg;
padding: $price-item-padding;
text-align: $price-item-align;
border-bottom: $price-item-bottom-border;
color: $price-item-color;
font-size: $price-item-font-size;
font-weight: $price-item-weight;
border-bottom: $price-item-bottom-border;
padding: $price-item-padding;
text-align: $price-item-align;
}
// @mixins
@@ -128,8 +128,8 @@ $price-cta-padding: rem-calc(20 20 0) !default;
// We use this mixin to style the CTA area of the pricing tables
@mixin pricing-table-cta {
background-color: $price-cta-bg;
text-align: $price-cta-align;
padding: $price-cta-padding;
text-align: $price-cta-align;
}
@include exports("pricing-table") {

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -34,10 +34,10 @@ $progress-meter-alert-color: $alert-color !default;
// We use this to set up the progress bar container
@mixin progress-container {
background-color: $progress-bar-color;
height: $progress-bar-height;
border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
padding: $progress-bar-pad;
height: $progress-bar-height;
margin-bottom: $progress-bar-margin-bottom;
padding: $progress-bar-pad;
}
// @mixins
@@ -45,8 +45,10 @@ $progress-meter-alert-color: $alert-color !default;
// $bg - Default: $progress-meter-color || $primary-color
@mixin progress-meter($bg:$progress-meter-color) {
background: $bg;
height: 100%;
display: block;
height: 100%;
float: left;
width: 0%;
}
@@ -60,6 +62,10 @@ $progress-meter-alert-color: $alert-color !default;
// Meter
.meter {
@include progress-meter;
&.secondary { @include progress-meter($bg:$progress-meter-secondary-color); }
&.success { @include progress-meter($bg:$progress-meter-success-color); }
&.alert { @include progress-meter($bg:$progress-meter-alert-color); }
}
&.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
&.success .meter { @include progress-meter($bg:$progress-meter-success-color); }

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @name _range-slider.scss
@@ -15,7 +15,7 @@
$include-html-range-slider-classes: $include-html-classes !default;
// These variabels define the slider bar styles
// These variables define the slider bar styles
$range-slider-bar-width: 100% !default;
$range-slider-bar-height: rem-calc(16) !default;
@@ -31,7 +31,7 @@ $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness:
$range-slider-vertical-bar-width: rem-calc(16) !default;
$range-slider-vertical-bar-height: rem-calc(200) !default;
// These variabels define the slider handle styles
// These variables define the slider handle styles
$range-slider-handle-width: rem-calc(32) !default;
$range-slider-handle-height: rem-calc(22) !default;
$range-slider-handle-position-top: rem-calc(-5) !default;
@@ -44,7 +44,7 @@ $range-slider-handle-round: $global-rounded !default;
$range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default;
$range-slider-handle-cursor: pointer !default;
$range-slider-disabled-opacity: 0.7 !default;
$range-slider-disabled-opacity: .7 !default;
$range-slider-disabled-cursor: $cursor-disabled-value !default;
//
@@ -52,19 +52,19 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default;
//
@mixin range-slider-bar-base($vertical: false) {
position: relative;
border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color;
margin: rem-calc(20 0);
position: relative;
-ms-touch-action: none;
touch-action: none;
@if $vertical == true {
display: inline-block;
width: $range-slider-vertical-bar-width;
height: $range-slider-vertical-bar-height;
width: $range-slider-vertical-bar-width;
} @else {
display: block;
width: $range-slider-bar-width;
height: $range-slider-bar-height;
width: $range-slider-bar-width;
}
}
@mixin range-slider-bar-style(
@@ -89,19 +89,20 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default;
}
@mixin range-slider-handle-base() {
display: inline-block;
position: absolute;
z-index: 1;
top: $range-slider-handle-position-top;
width: $range-slider-handle-width;
height: $range-slider-handle-height;
border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color;
cursor: $range-slider-handle-cursor;
display: inline-block;
height: $range-slider-handle-height;
position: absolute;
top: $range-slider-handle-position-top;
width: $range-slider-handle-width;
z-index: 1;
// This removes the 300ms touch delay on Windows 8
-ms-touch-action: manipulation;
touch-action: manipulation;
touch-action: manipulation;
}
@mixin range-slider-handle-style(
$bg: true,
$radius: false,
@@ -118,6 +119,7 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default;
background: $range-slider-handle-bg-hover-color;
}
}
@mixin range-slider-handle() {
@include range-slider-handle-base;
@include range-slider-handle-style;
@@ -132,15 +134,18 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default;
&.vertical-range {
@include range-slider-bar-base($vertical: true);
.range-slider-handle {
margin-top: 0;
margin-#{$default-float}: -($range-slider-handle-width / 4);
position: absolute;
bottom: -($range-slider-vertical-bar-height - $range-slider-handle-width);
margin-#{$default-float}: -($range-slider-handle-width / 4);
margin-top: 0;
position: absolute;
}
.range-slider-active-segment {
width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
height: auto;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
border-top-left-radius: initial;
bottom: 0;
height: auto;
width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
}
}
&.radius {
@@ -157,10 +162,12 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default;
}
}
.range-slider-active-segment {
display: inline-block;
position: absolute;
height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
background: $range-slider-active-segment-bg-color;
border-bottom-left-radius: inherit;
border-top-left-radius: inherit;
display: inline-block;
height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
position: absolute;
}
.range-slider-handle {
@include range-slider-handle-base;

View File

@@ -2,8 +2,8 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import "grid";
@import 'global';
@import 'grid';
//
// @name _reveal.scss
@@ -21,7 +21,7 @@ $reveal-modal-bg: $white !default;
$reveal-position-top: rem-calc(100) !default;
$reveal-default-width: 80% !default;
$reveal-max-width: $row-width !default;
$reveal-modal-padding: rem-calc(20) !default;
$reveal-modal-padding: rem-calc(30) !default;
$reveal-box-shadow: 0 0 10px rgba($black,.4) !default;
// We use these to style the reveal close button
@@ -52,16 +52,16 @@ $z-index-base: 1005;
// We use this to create the reveal background overlay styles
@mixin reveal-bg( $include-z-index-value: true ) {
position: fixed;
// position: absolute; // allows modal background to extend beyond window position
top: 0;
bottom: 0;
left: 0;
right: 0;
background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
background: $reveal-overlay-bg;
z-index: if( $include-z-index-value, $z-index-base - 1, auto );
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: if( $include-z-index-value, $z-index-base - 1, auto );
#{$default-float}: 0;
}
@@ -72,13 +72,13 @@ $z-index-base: 1005;
//
@mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) {
@if $base-style {
visibility: hidden;
border-radius: $border-radius;
display: none;
position: absolute;
z-index: $z-index-base;
width: 100%;
top:0;
border-radius: $border-radius;
visibility: hidden;
width: 100%;
z-index: $z-index-base;
#{$default-float}: 0;
@media #{$small-only} {
@@ -89,18 +89,18 @@ $z-index-base: 1005;
.column, .columns { min-width: 0; }
// Get rid of margin from first and last element inside modal
& > :first-child { margin-top: 0; }
> :first-child { margin-top: 0; }
& > :last-child { margin-bottom: 0; }
> :last-child { margin-bottom: 0; }
}
@if $width {
@media #{$medium-up} {
width: $width;
max-width: $max-width;
left: 0;
right: 0;
margin: 0 auto;
max-width: $max-width;
right: 0;
width: $width;
}
}
}
@@ -136,6 +136,9 @@ $z-index-base: 1005;
@if $box-shadow {
box-shadow: $reveal-box-shadow;
}
@else{
box-shadow: none;
}
// We can control how much radius is used on the modal
@if $radius == true { @include radius($reveal-radius); }
@@ -152,14 +155,14 @@ $z-index-base: 1005;
//
// $color - Default: $reveal-close-color || $base
@mixin reveal-close($color:$reveal-close-color) {
color: $color;
cursor: $cursor-pointer-value;
font-size: $reveal-close-font-size;
font-weight: $reveal-close-weight;
line-height: 1;
position: absolute;
top: $reveal-close-top;
#{$opposite-direction}: $reveal-close-side;
color: $color;
font-weight: $reveal-close-weight;
cursor: $cursor-pointer-value;
}
@include exports("reveal") {
@@ -172,7 +175,7 @@ $z-index-base: 1005;
@include reveal-modal-base;
@include reveal-modal-style(
$bg:$reveal-modal-bg,
$padding:$reveal-modal-padding * 1.5,
$padding:$reveal-modal-padding,
$border:true,
$box-shadow:true,
$radius:false,
@@ -189,15 +192,15 @@ $z-index-base: 1005;
&.xlarge { @include reveal-modal-base(false, 95%); }
&.full {
@include reveal-modal-base(false, 100%);
top:0;
left:0;
height:100%;
height: 100vh;
min-height:100vh;
max-width: none !important;
height:100%;
left:0;
margin-left: 0 !important;
max-width: none !important;
min-height:100vh;
top:0;
}
// Modals pushed to back
&.toback {
z-index: $z-index-base - 2;

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @variables
@@ -22,7 +22,7 @@ $side-nav-list-margin: rem-calc(0 0 7 0) !default;
$side-nav-link-color: $primary-color !default;
$side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default;
$side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default;
$side-nav-link-bg-hover: hsla(0, 0, 0, 0.025) !default;
$side-nav-link-bg-hover: hsla(0, 0, 0, .025) !default;
$side-nav-link-margin: 0 !default;
$side-nav-link-padding: rem-calc(7 14) !default;
$side-nav-font-size: rem-calc(14) !default;
@@ -40,7 +40,7 @@ $side-nav-heading-text-transform: uppercase !default;
// We use these to control border styles
$side-nav-divider-size: 1px !default;
$side-nav-divider-style: solid !default;
$side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
$side-nav-divider-color: scale-color($white, $lightness: -10%) !default;
//
@@ -58,23 +58,24 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
$divider-color:$side-nav-divider-color,
$font-size:$side-nav-font-size,
$link-color:$side-nav-link-color,
$link-color-active:$side-nav-link-color-active,
$link-color-hover:$side-nav-link-color-hover,
$link-bg-hover:$side-nav-link-bg-hover) {
display: block;
font-family: $side-nav-font-family;
list-style-position: $side-nav-list-position;
list-style-type: $side-nav-list-type;
margin: 0;
padding: $side-nav-padding;
list-style-type: $side-nav-list-type;
list-style-position: $side-nav-list-position;
font-family: $side-nav-font-family;
li {
margin: $side-nav-list-margin;
font-size: $font-size;
font-weight: $side-nav-font-weight;
margin: $side-nav-list-margin;
a:not(.button) {
display: block;
color: $link-color;
display: block;
margin: $side-nav-link-margin;
padding: $side-nav-link-padding;
&:hover,
@@ -82,19 +83,22 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
background: $link-bg-hover;
color: $link-color-hover;
}
&:active {
color: $link-color-active;
}
}
&.active > a:first-child:not(.button) {
color: $side-nav-link-color-active;
font-weight: $side-nav-font-weight-active;
font-family: $side-nav-font-family-active;
font-weight: $side-nav-font-weight-active;
}
&.divider {
border-top: $side-nav-divider-size $side-nav-divider-style;
height: 0;
padding: 0;
list-style: none;
padding: 0;
border-top-color: $divider-color;
}
@@ -111,6 +115,6 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
@include exports("side-nav") {
@if $include-html-nav-classes {
.side-nav { @include side-nav; }
.side-nav {@include side-nav;}
}
}

View File

@@ -2,9 +2,9 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import "buttons";
@import "dropdown-buttons";
@import 'global';
@import 'buttons';
@import 'dropdown-buttons';
//
// @name _split-buttons.scss
@@ -22,6 +22,7 @@ $split-button-function-factor: 10% !default;
$split-button-pip-color: $white !default;
$split-button-pip-color-alt: $oil !default;
$split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
$split-button-span-border-color: rgba(255,255,255,0.5) !default;
// We use these to control tiny split buttons
$split-button-padding-tny: $button-pip-tny * 10 !default;
@@ -60,12 +61,12 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
//
// $padding - Type of padding to apply. Default: medium. Options: tiny, small, medium, large.
// $pip-color - Color of the triangle. Default: $split-button-pip-color.
// $span-border - Border color of button divider. Default: $primary-color.
// $span-border - Border color of button divider. Default: $split-button-span-border-color.
// $base-style - Apply base style to split button. Default: true.
@mixin split-button(
$padding:medium,
$pip-color:$split-button-pip-color,
$span-border:$primary-color,
$span-border:$split-button-span-border-color,
$base-style:true) {
// With this, we can control whether or not the base styles come through.
@@ -90,7 +91,6 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
display: block;
border-style: inset;
top: 50%;
#{$default-float}: 50%;
}
@@ -101,7 +101,7 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
// Control the border color for the span area of the split button
@if $span-border {
span {
border-#{$default-float}-color: rgba(255,255,255,0.5);
border-#{$default-float}-color: $span-border;
}
}
@@ -113,8 +113,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
&:after {
border-top-style: solid;
border-width: $split-button-pip-size-tny;
top: 48%;
margin-#{$default-float}: $split-button-pip-default-float-tny;
top: 48%;
}
}
}
@@ -127,8 +127,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
&:after {
border-top-style: solid;
border-width: $split-button-pip-size-sml;
top: 48%;
margin-#{$default-float}: $split-button-pip-default-float-sml;
top: 48%;
}
}
}
@@ -141,8 +141,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
&:after {
border-top-style: solid;
border-width: $split-button-pip-size-med;
top: 48%;
margin-#{$default-float}: $split-button-pip-default-float-med;
top: 48%;
}
}
}
@@ -155,8 +155,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
&:after {
border-top-style: solid;
border-width: $split-button-pip-size-lrg;
top: 48%;
margin-#{$default-float}: $split-button-pip-default-float-lrg;
top: 48%;
}
}
}
@@ -172,9 +172,9 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
.split.button { @include split-button;
&.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); }
&.alert { @include split-button(false, false, $alert-color, false); }
&.success { @include split-button(false, false, $success-color, false); }
&.secondary { @include split-button(false, $split-button-pip-color, $split-button-span-border-color, false); }
&.alert { @include split-button(false, false, $split-button-span-border-color, false); }
&.success { @include split-button(false, false, $split-button-span-border-color, false); }
&.tiny { @include split-button(tiny, false, false, false); }
&.small { @include split-button(small, false, false, false); }
@@ -189,12 +189,12 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
span:before{ border-style:none; }
span:after{ border-style:none; }
span>i{
top: 50%;
display: block;
position: absolute;
left: 50%;
margin-left: -0.28889em;
margin-top: -0.48889em;
position: absolute;
top: 50%;
}
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @name _sub-nav.scss
@@ -59,10 +59,10 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
$active-bg: $sub-nav-active-bg,
$active-bg-hover: $sub-nav-active-bg-hover) {
display: block;
width: auto;
margin: $sub-nav-list-margin;
overflow: hidden;
margin-bottom: $sub-nav-list-margin;
padding-top: $sub-nav-list-padding-top;
width: auto;
dt {
text-transform: uppercase;
@@ -71,18 +71,19 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
dt,
dd,
li {
color: $font-color;
float: $default-float;
font-family: $sub-nav-font-family;
font-size: $font-size;
font-weight: $sub-nav-font-weight;
margin-#{$default-float}: rem-calc(16);
margin-bottom: 0;
font-family: $sub-nav-font-family;
font-weight: $sub-nav-font-weight;
font-size: $font-size;
color: $font-color;
a {
text-decoration: $sub-nav-text-decoration;
color: $sub-nav-font-color;
padding: $sub-nav-padding;
text-decoration: $sub-nav-text-decoration;
&:hover {
color: $sub-nav-font-color-hover;
}
@@ -90,15 +91,17 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
&.active a {
@include radius($sub-nav-border-radius);
font-weight: $sub-nav-active-font-weight;
background: $active-bg;
padding: $sub-nav-active-padding;
cursor: $sub-nav-active-cursor;
color: $sub-nav-active-color;
cursor: $sub-nav-active-cursor;
font-weight: $sub-nav-active-font-weight;
padding: $sub-nav-active-padding;
&:hover {
background: $active-bg-hover;
}
}
@if $sub-nav-item-divider != "" {
margin-#{$default-float}: 0;

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @name
@@ -44,24 +44,26 @@ $switch-active-color: $primary-color !default;
$transition-speed:$switch-paddle-transition-speed,
$transition-ease:$switch-paddle-transition-ease) {
padding: 0;
border: none;
position: relative;
margin-bottom: $switch-bottom-margin;
outline: 0;
padding: 0;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
// Default label styles for type and transition
label {
background: $switch-bg;
color: transparent;
cursor: pointer;
display: block;
margin-bottom: ($switch-height-med / 2);
position: relative;
color: transparent;
background: $switch-bg;
text-indent: 100%;
width: $switch-height-med * 2; height: $switch-height-med;
cursor: pointer;
// Transition for the switch label to follow paddle
@include single-transition(left, $transition-speed, $transition-ease);
@@ -70,11 +72,11 @@ $switch-active-color: $primary-color !default;
// So that we don't need to recreate the form with any JS, we use the
// existing checkbox or radio button, but we cleverly position and hide it.
input {
left: 10px;
opacity: 0;
padding:0;
position: absolute;
top: 9px;
left: 10px;
padding:0;
& + label { margin-left: 0; margin-right: 0; }
}
@@ -84,14 +86,14 @@ $switch-active-color: $primary-color !default;
// the state of the input.
label:after {
background: $switch-paddle-bg;
content: "";
display: block;
background: $switch-paddle-bg;
height: $switch-height-med - .5rem;
left: .25rem;
position: absolute;
top: .25rem;
left: .25rem;
width: $switch-height-med - 0.5rem;
height: $switch-height-med - 0.5rem;
width: $switch-height-med - .5rem;
-webkit-transition: left $transition-speed $transition-ease;
-moz-transition: left $transition-speed $transition-ease;
@@ -100,6 +102,7 @@ $switch-active-color: $primary-color !default;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
@@ -109,7 +112,7 @@ $switch-active-color: $primary-color !default;
}
input:checked + label:after {
left: $switch-height-med + 0.25rem;
left: $switch-height-med + .25rem;
}
}
@@ -121,17 +124,17 @@ $switch-active-color: $primary-color !default;
@mixin switch-size($height: $switch-height-med) {
label {
width: $height * 2;
height: $height;
width: $height * 2;
}
label:after {
width: $height - 0.5rem;
height: $height - 0.5rem;
height: $height - .5rem;
width: $height - .5rem;
}
input:checked + label:after {
left: $height + 0.25rem;
left: $height + .25rem;
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @name _tables.scss
@@ -62,8 +62,8 @@ $table-margin-bottom: rem-calc(20) !default;
@mixin table {
background: $table-bg;
margin-bottom: $table-margin-bottom;
border: $table-border-style $table-border-size $table-border-color;
margin-bottom: $table-margin-bottom;
table-layout: $table-layout;
caption {
@@ -81,10 +81,10 @@ $table-margin-bottom: rem-calc(20) !default;
tr {
th,
td {
padding: $table-head-padding;
color: $table-head-font-color;
font-size: $table-head-font-size;
font-weight: $table-head-font-weight;
color: $table-head-font-color;
padding: $table-head-padding;
}
}
}
@@ -95,10 +95,10 @@ $table-margin-bottom: rem-calc(20) !default;
tr {
th,
td {
padding: $table-foot-padding;
color: $table-foot-font-color;
font-size: $table-foot-font-size;
font-weight: $table-foot-font-weight;
color: $table-foot-font-color;
padding: $table-foot-padding;
}
}
}
@@ -106,9 +106,9 @@ $table-margin-bottom: rem-calc(20) !default;
tr {
th,
td {
padding: $table-row-padding;
font-size: $table-row-font-size;
color: $table-row-font-color;
font-size: $table-row-font-size;
padding: $table-row-padding;
text-align: $default-float;
}

View File

@@ -2,8 +2,8 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import "grid";
@import 'global';
@import 'grid';
//
// @variables
@@ -31,46 +31,48 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
@include clearfix;
margin-bottom: 0 !important;
margin-left: 0;
dd, .tab-title {
position: relative;
margin-bottom: 0 !important;
list-style: none;
dd,
.tab-title {
float: $default-float;
list-style: none;
margin-bottom: 0 !important;
position: relative;
> a {
display: block;
background: {
color: $tabs-navigation-bg-color;
}
background-color: $tabs-navigation-bg-color;
color: $tabs-navigation-font-color;
padding: $tabs-navigation-padding $tabs-navigation-padding * 2;
font-family: $tabs-navigation-font-family;
font-size: $tabs-navigation-font-size;
padding: $tabs-navigation-padding $tabs-navigation-padding * 2;
&:hover {
background: {
color: $tabs-navigation-hover-bg-color;
}
}
&:focus{
outline: none;
background-color: $tabs-navigation-hover-bg-color;
}
}
&.active a {
background: {
color: $tabs-navigation-active-bg-color;
}
color:$tabs-navigation-active-font-color;
}
&.active > a {
background-color: $tabs-navigation-active-bg-color;
color: $tabs-navigation-active-font-color;
}
}
&.radius {
dd:first-child, .tab:first-child {
dd:first-child,
.tab:first-child {
a { @include side-radius($default-float, $global-radius); }
}
dd:last-child, .tab:last-child {
dd:last-child,
.tab:last-child {
a { @include side-radius($opposite-direction, $global-radius); }
}
}
&.vertical {
dd, .tab-title {
dd,
.tab-title {
position: inherit;
float: none;
display: block;
@@ -83,38 +85,53 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
@include clearfix;
margin-bottom: $tabs-content-margin-bottom;
width: 100%;
> .content {
display: none;
float: $default-float;
padding: $tabs-content-padding 0;
width: 100%;
&.active { display: block; float: none; }
&.contained { padding: $tabs-content-padding; }
&.active {
display: block;
float: none;
}
&.contained {
padding: $tabs-content-padding;
}
}
&.vertical {
display: block;
> .content { padding: 0 $tabs-content-padding; }
> .content {
padding: 0 $tabs-content-padding;
}
}
}
@media #{$medium-up} {
.tabs {
&.vertical {
width: 20%;
max-width: 20%;
float: $default-float;
margin: 0 0 $tabs-vertical-navigation-margin-bottom;
margin: 0;
margin-bottom: $tabs-vertical-navigation-margin-bottom !important;
max-width: 20%;
width: 20%;
}
}
.tabs-content {
&.vertical {
width: 80%;
max-width: 80%;
float: $default-float;
margin-#{$default-float}: -1px;
max-width: 80%;
padding-#{$default-float}: 1rem;
width: 80%;
}
}
}
.no-js {
.tabs-content > .content {
display: block;

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// @name _thumbs.scss
@@ -36,14 +36,14 @@ $thumb-transition-speed: 200ms !default;
// $box-shadow - Box shadow to apply to thumbnail. Default: $thumb-box-shadow.
// $box-shadow-hover - Box shadow to apply on hover. Default: $thumb-box-shadow-hover.
@mixin thumb(
$border-width:$thumb-border-width,
$box-shadow:$thumb-box-shadow,
$border-width:$thumb-border-width,
$box-shadow:$thumb-box-shadow,
$box-shadow-hover:$thumb-box-shadow-hover) {
line-height: 0;
display: inline-block;
border: $thumb-border-style $border-width $thumb-border-color;
max-width: 100%;
box-shadow: $box-shadow;
display: inline-block;
line-height: 0;
max-width: 100%;
&:hover,
&:focus {
@@ -58,9 +58,9 @@ $thumb-transition-speed: 200ms !default;
/* Image Thumbnails */
.th {
@include thumb;
@include single-transition(all,$thumb-transition-speed,ease-out);
@include single-transition(all, $thumb-transition-speed, ease-out);
&.radius { @include radius($thumb-radius); }
}
}
}
}

View File

@@ -1,72 +0,0 @@
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// toolbar styles
@import "global";
.toolbar {
background: $oil;
width: 100%;
font-size: 0;
display: inline-block;
&.label-bottom .tab .tab-content {
i, img { margin-bottom: 10px; }
}
&.label-right .tab .tab-content {
i, img { margin-right: 10px; display: inline-block;}
label { display: inline-block; }
}
&.vertical.label-right .tab .tab-content {
text-align: left;
}
&.vertical {
height: 100%;
width: auto;
.tab {
width: auto;
margin: auto;
float: none;
}
}
.tab {
text-align: center;
width: 25%;
margin: 0 auto;
display: block;
padding: 20px;
float: left;
&:hover {
background: rgba($white, 0.1);
}
}
}
.toolbar .tab-content {
font-size: 16px;
text-align: center;
label { color: $iron; }
i {
font-size: 30px;
display: block;
margin: 0 auto;
color: $iron;
vertical-align: middle;
}
img {
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// Tooltip Variables
@@ -37,9 +37,9 @@ $tooltip-max-width: 300px !default;
/* Tooltips */
.has-tip {
border-bottom: $has-tip-border-bottom;
color: $has-tip-font-color;
cursor: $has-tip-cursor-type;
font-weight: $has-tip-font-weight;
color: $has-tip-font-color;
&:hover,
&:focus {
@@ -52,29 +52,29 @@ $tooltip-max-width: 300px !default;
}
.tooltip {
display: none;
position: absolute;
z-index: 1006;
font-weight: $tooltip-font-weight;
font-size: $tooltip-font-size;
line-height: $tooltip-line-height;
padding: $tooltip-padding;
max-width: $tooltip-max-width;
#{$default-float}: 50%;
width: 100%;
color: $tooltip-font-color;
background: $tooltip-bg;
color: $tooltip-font-color;
display: none;
font-size: $tooltip-font-size;
font-weight: $tooltip-font-weight;
line-height: $tooltip-line-height;
max-width: $tooltip-max-width;
padding: $tooltip-padding;
position: absolute;
width: 100%;
z-index: 1006;
#{$default-float}: 50%;
&>.nub {
display: block;
#{$default-float}: $tooltip-pip-size;
position: absolute;
width: 0;
height: 0;
> .nub {
border: solid $tooltip-pip-size;
border-color: transparent transparent $tooltip-bg transparent;
top: -($tooltip-pip-size * 2);
display: block;
height: 0;
pointer-events: none;
position: absolute;
top: -($tooltip-pip-size * 2);
width: 0;
#{$default-float}: $tooltip-pip-size;
&.rtl {
left: auto;
@@ -87,34 +87,34 @@ $tooltip-max-width: 300px !default;
}
&.round {
@include radius($tooltip-rounded);
&>.nub {
> .nub {
left: 2rem;
}
}
&.opened {
color: $has-tip-font-color-hover !important;
border-bottom: $has-tip-border-bottom-hover !important;
color: $has-tip-font-color-hover !important;
}
}
.tap-to-close {
color: $tooltip-close-font-color;
display: block;
font-size: $tooltip-close-font-size;
color: $tooltip-close-font-color;
font-weight: $tooltip-close-font-weight;
}
@media #{$small} {
.tooltip {
&>.nub {
> .nub {
border-color: transparent transparent $tooltip-bg transparent;
top: -($tooltip-pip-size * 2);
}
&.tip-top>.nub {
border-color: $tooltip-bg transparent transparent transparent;
top: auto;
bottom: -($tooltip-pip-size * 2);
top: auto;
}
&.tip-left,
@@ -122,17 +122,17 @@ $tooltip-max-width: 300px !default;
&.tip-left>.nub {
border-color: transparent transparent transparent $tooltip-bg;
right: -($tooltip-pip-size * 2);
left: auto;
top: 50%;
margin-top: -$tooltip-pip-size;
right: -($tooltip-pip-size * 2);
top: 50%;
}
&.tip-right>.nub {
border-color: transparent $tooltip-bg transparent transparent;
right: auto;
left: -($tooltip-pip-size * 2);
top: 50%;
margin-top: -$tooltip-pip-size;
right: auto;
top: 50%;
}
}

View File

@@ -2,10 +2,10 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import "grid";
@import "buttons";
@import "forms";
@import 'global';
@import 'grid';
@import 'buttons';
@import 'forms';
//
// Top Bar Variables
@@ -33,7 +33,7 @@ $topbar-link-weight: $font-weight-normal !default;
$topbar-link-font-size: rem-calc(13) !default;
$topbar-link-hover-lightness: -10% !default; // Darken by 10%
$topbar-link-bg: $topbar-bg !default;
$topbar-link-bg-hover: $oil !default;
$topbar-link-bg-hover: $jet !default;
$topbar-link-bg-color-hover: $charcoal !default;
$topbar-link-bg-active: $primary-color !default;
$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
@@ -42,7 +42,7 @@ $topbar-link-text-transform: none !default;
$topbar-link-padding: ($topbar-height / 3) !default;
$topbar-back-link-size: rem-calc(18) !default;
$topbar-link-dropdown-padding: rem-calc(20) !default;
$topbar-button-font-size: 0.75rem !default;
$topbar-button-font-size: .75rem !default;
$topbar-button-top: 7px !default;
// Style the top bar dropdown elements
@@ -50,11 +50,11 @@ $topbar-dropdown-bg: $oil !default;
$topbar-dropdown-link-color: $white !default;
$topbar-dropdown-link-color-hover: $topbar-link-color-hover !default;
$topbar-dropdown-link-bg: $oil !default;
$topbar-dropdown-link-bg-hover: $oil !default;
$topbar-dropdown-link-bg-hover: $jet !default;
$topbar-dropdown-link-weight: $font-weight-normal !default;
$topbar-dropdown-toggle-size: 5px !default;
$topbar-dropdown-toggle-color: $white !default;
$topbar-dropdown-toggle-alpha: 0.4 !default;
$topbar-dropdown-toggle-alpha: .4 !default;
$topbar-dropdown-label-color: $monsoon !default;
$topbar-dropdown-label-text-transform: uppercase !default;
@@ -76,7 +76,7 @@ $topbar-menu-icon-position: $opposite-direction !default; // Change to $default-
$topbar-transition-speed: 300ms !default;
// Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout
$topbar-media-query: $medium-up !default;
$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})" !default;
// Top-bar input styles
$topbar-input-height: rem-calc(28) !default;
@@ -93,13 +93,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
// Accessibility mixins for hiding and showing the menu dropdown items
@mixin topbar-hide-dropdown {
// Makes an element visually hidden by default, but visible when focused.
display: block;
@include element-invisible();
display: block;
}
@mixin topbar-show-dropdown {
display: block;
@include element-invisible-off();
display: block;
position: absolute !important; // Reset the position from static to absolute
}
@@ -120,67 +120,76 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
width: 100%;
background: $topbar-bg;
.top-bar { margin-bottom: $topbar-margin-bottom; }
.top-bar {
margin-bottom: $topbar-margin-bottom;
}
}
// Wrapped around .top-bar to make it stick to the top
.fixed {
width: 100%;
#{$default-float}: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
#{$default-float}: 0;
&.expanded:not(.top-bar) {
overflow-y: auto;
height: auto;
width: 100%;
max-height: 100%;
overflow-y: auto;
width: 100%;
.title-area {
position: fixed;
width: 100%;
z-index: 99;
}
// Ensure you can scroll the menu on small screens
.top-bar-section {
z-index: 98;
margin-top: $topbar-height;
z-index: 98;
}
}
}
.top-bar {
overflow: hidden;
background: $topbar-bg;
height: $topbar-height;
line-height: $topbar-height;
position: relative;
background: $topbar-bg;
margin-bottom: $topbar-margin-bottom;
overflow: hidden;
position: relative;
// Topbar Global list Styles
ul {
margin-bottom: 0;
list-style: none;
margin-bottom: 0;
}
.row { max-width: none; }
.row {
max-width: none;
}
form,
input { margin-bottom: 0; }
input,
select {
margin-bottom: 0;
}
input {
height: $topbar-input-height;
padding-top: .35rem;
padding-bottom: .35rem;
font-size: $topbar-button-font-size;
input,
select {
font-size: $topbar-button-font-size;
height: $topbar-input-height;
padding-bottom: .35rem;
padding-top: .35rem;
}
.button, button {
padding-top: .35rem + rem-calc(1);
padding-bottom: .35rem + rem-calc(1);
margin-bottom: 0;
font-size: $topbar-button-font-size;
margin-bottom: 0;
padding-bottom: .35rem + rem-calc(1);
padding-top: .35rem + rem-calc(1);
// position: relative;
// top: -1px;
@@ -193,26 +202,26 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
// Title Area
.title-area {
position: relative;
margin: 0;
position: relative;
}
.name {
font-size: $rem-base;
height: $topbar-height;
margin: 0;
font-size: $rem-base;
// @if $topbar-menu-icon-position == $default-float {float: $opposite-direction;}
h1, h2, h3, h4, p, span {
line-height: $topbar-height;
font-size: $topbar-title-font-size;
line-height: $topbar-height;
margin: 0;
a {
font-weight: $topbar-title-weight;
color: $topbar-link-color;
width: 75%;
display: block;
font-weight: $topbar-title-weight;
padding: 0 $topbar-link-padding;
width: 75%;
}
}
}
@@ -225,59 +234,50 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
a {
color: $topbar-link-color;
text-transform: $topbar-menu-link-transform;
display: block;
font-size: $topbar-menu-link-font-size;
font-weight: $topbar-menu-link-weight;
position: relative;
display: block;
padding: 0 $topbar-link-padding;
height: $topbar-height;
line-height: $topbar-height;
padding: 0 $topbar-link-padding;
position: relative;
text-transform: $topbar-menu-link-transform;
}
// Adding the class "menu-icon" will add the 3-line icon people love and adore.
&.menu-icon {
top: 50%;
margin-top: -16px;
top: 50%;
a {
@include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);
@if $text-direction == rtl {
text-indent: -58px;
}
color: $topbar-menu-link-color;
height: 34px;
line-height: 33px;
padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding;
color: $topbar-menu-link-color;
position: relative;
& {
// @include hamburger icon
//
// We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
// $width - Width of hamburger icon
// $left - If false, icon will be centered horizontally || explicitly set value in rem
// $top - If false, icon will be centered vertically || explicitly set value in rem
// $thickness - thickness of lines in hamburger icon, set value in px
// $gap - spacing between the lines in hamburger icon, set value in px
// $color - icon color
// $hover-color - icon color during hover, here it isn't set b/c it would override $topbar-menu-icon-color-toggled
// $offcanvas - Set to false of @include in topbar
@include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);
}
}
}
}
// Change things up when the top-bar is expanded
&.expanded {
height: auto;
background: transparent;
height: auto;
.title-area { background: $topbar-bg; }
.title-area {
background: $topbar-bg;
}
.toggle-topbar {
a { color: $topbar-menu-link-color-toggled;
span::after {
a {
color: $topbar-menu-link-color-toggled;
span::after {
// Shh, don't tell, but box-shadows create the menu icon :)
// Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
@@ -286,6 +286,21 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
}
// Fixes an issue with Desktop and Mobile Safari where deeply-nested menus don't appear
@media screen and (-webkit-min-device-pixel-ratio:0) {
.top-bar-section {
.has-dropdown.moved > .dropdown,
.dropdown {
clip: initial;
}
// This was needed as parent ul's had padding, and the clip: was allowing content to peak through
.has-dropdown:not(.moved) > ul {
padding: 0;
}
}
}
}
}
@@ -297,12 +312,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
@include single-transition($default-float, $topbar-transition-speed);
ul {
padding: 0;
width: 100%;
height: auto;
display: block;
font-size: $rem-base;
height: auto;
margin: 0;
padding: 0;
width: 100%;
}
.divider,
@@ -314,55 +329,61 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
ul li {
background: $topbar-dropdown-bg;
& > a {
display: block;
width: 100%;
background: $topbar-dropdown-bg;
> a {
color: $topbar-link-color;
padding: 12px 0 12px 0;
padding-#{$default-float}: $topbar-link-padding;
display: block;
font-family: $topbar-link-font-family;
font-size: $topbar-link-font-size;
font-weight: $topbar-link-weight;
padding-#{$default-float}: $topbar-link-padding;
padding: 12px 0 12px $topbar-link-padding;
text-transform: $topbar-link-text-transform;
width: 100%;
&.button {
font-size: $topbar-link-font-size;
padding-#{$opposite-direction}: $topbar-link-padding;
padding-#{$default-float}: $topbar-link-padding;
padding-#{$opposite-direction}: $topbar-link-padding;
@include button-style($bg:$primary-color);
}
&.button.secondary { @include button-style($bg:$secondary-color); }
&.button.success { @include button-style($bg:$success-color); }
&.button.alert { @include button-style($bg:$alert-color); }
&.button.warning { @include button-style($bg:$warning-color); }
&.button.info { @include button-style($bg:$info-color); }
}
> button {
font-size: $topbar-link-font-size;
padding-#{$opposite-direction}: $topbar-link-padding;
padding-#{$default-float}: $topbar-link-padding;
padding-#{$opposite-direction}: $topbar-link-padding;
@include button-style($bg:$primary-color);
&.secondary { @include button-style($bg:$secondary-color); }
&.success { @include button-style($bg:$success-color); }
&.alert { @include button-style($bg:$alert-color); }
&.warning { @include button-style($bg:$warning-color); }
&.info { @include button-style($bg:$info-color); }
}
// Apply the hover link color when it has that class
&:hover:not(.has-form) > a {
background-color: $topbar-link-bg-color-hover;
color: $topbar-link-color-hover;
@if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
color: $topbar-link-color-hover;
}
// Apply the active link color when it has that class
&.active > a {
background: $topbar-link-bg-active;
color: $topbar-link-color-active;
&:hover {
background: $topbar-link-bg-active-hover;
color: $topbar-link-color-active-hover;
@@ -371,17 +392,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
// Add some extra padding for list items contains buttons
.has-form { padding: $topbar-link-padding; }
.has-form {
padding: $topbar-link-padding;
}
// Styling for list items that have a dropdown within them.
.has-dropdown {
position: relative;
& > a {
> a {
&:after {
@if ($topbar-arrows){
@if ($topbar-arrows) {
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
}
margin-#{$opposite-direction}: $topbar-link-padding;
margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
position: absolute;
@@ -390,12 +414,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
&.moved { position: static;
& > .dropdown {
&.moved {
position: static;
> .dropdown {
@include topbar-show-dropdown();
width: 100%;
}
& > a:after {
> a:after {
display: none;
}
}
@@ -403,16 +430,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
// Styling elements inside of dropdowns
.dropdown {
@include topbar-hide-dropdown();
padding: 0;
position: absolute;
#{$default-float}: 100%;
top: 0;
z-index: 99;
@include topbar-hide-dropdown();
#{$default-float}: 100%;
li {
width: 100%;
height: auto;
width: 100%;
a {
font-weight: $topbar-dropdown-link-weight;
@@ -422,7 +449,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
&.title h5, &.parent-link {
&.title h5,
&.parent-link {
// Back Button
margin-bottom: 0;
margin-top: 0;
@@ -434,17 +462,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
&:hover { background:none; }
}
}
&.has-form { padding: 8px $topbar-link-padding; }
.button, button { top: auto; }
&.has-form {
padding: 8px $topbar-link-padding;
}
.button,
button {
top: auto;
}
}
label {
padding: 8px $topbar-link-padding 2px;
margin-bottom: 0;
text-transform: $topbar-dropdown-label-text-transform;
color: $topbar-dropdown-label-color;
font-weight: $topbar-dropdown-label-font-weight;
font-size: $topbar-dropdown-label-font-size;
font-weight: $topbar-dropdown-label-font-weight;
margin-bottom: 0;
padding: 8px $topbar-link-padding 2px;
text-transform: $topbar-dropdown-label-text-transform;
}
}
}
@@ -455,8 +490,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
// Top Bar styles intended for screen sizes above the breakpoint.
@media #{$topbar-media-query} {
.top-bar {
background: $topbar-bg;
@include clearfix;
background: $topbar-bg;
overflow: visible;
.toggle-topbar { display: none; }
@@ -470,21 +505,32 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.name h6 a { width: auto; }
input,
select,
.button,
button {
font-size: rem-calc(14);
position: relative;
height: $topbar-input-height;
position: relative;
top: (($topbar-height - $topbar-input-height) / 2);
}
&.expanded { background: $topbar-bg; }
.has-form > .button,
.has-form > button {
font-size: rem-calc(14);
height: $topbar-input-height;
position: relative;
top: (($topbar-height - $topbar-input-height) / 2);
}
&.expanded {
background: $topbar-bg;
}
}
.contain-to-grid .top-bar {
max-width: $row-width;
margin: 0 auto;
margin-bottom: $topbar-margin-bottom;
max-width: $row-width;
}
.top-bar-section {
@@ -492,9 +538,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
#{$default-float}: 0 !important;
ul {
width: auto;
height: auto !important;
display: inline;
height: auto !important;
width: auto;
li {
float: $default-float;
@@ -512,11 +558,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
color: $topbar-link-color-hover;
}
}
&:not(.has-form) {
a:not(.button) {
padding: 0 $topbar-link-padding;
line-height: $topbar-height;
background: $topbar-link-bg;
line-height: $topbar-height;
padding: 0 $topbar-link-padding;
&:hover {
background-color: $topbar-link-bg-color-hover;
@if ($topbar-link-bg-hover) {
@@ -525,12 +572,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
}
&.active:not(.has-form) {
a:not(.button) {
padding: 0 $topbar-link-padding;
line-height: $topbar-height;
color: $topbar-link-color-active;
background: $topbar-link-bg-active;
color: $topbar-link-color-active;
line-height: $topbar-height;
padding: 0 $topbar-link-padding;
&:hover {
background: $topbar-link-bg-active-hover;
color: $topbar-link-color-active-hover;
@@ -540,8 +588,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
.has-dropdown {
@if($topbar-arrows){
& > a {
@if $topbar-arrows {
> a {
padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
&:after {
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
@@ -552,30 +600,30 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
&.moved { position: relative;
& > .dropdown {
> .dropdown {
@include topbar-hide-dropdown();
}
}
&.hover, &.not-click:hover {
& > .dropdown {
> .dropdown {
@include topbar-show-dropdown();
}
}
> a:focus + .dropdown {
@include topbar-show-dropdown();
}
.dropdown li.has-dropdown {
& > a {
@if ($topbar-dropdown-arrows){
> a {
@if ($topbar-dropdown-arrows) {
&:after {
border: none;
content: "\00bb";
top: 1rem;
margin-top: -1px;
top: rem-calc(3);
#{$opposite-direction}: 5px;
line-height: 1.2;
}
}
}
@@ -584,28 +632,28 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.dropdown {
#{$default-float}: 0;
top: auto;
background: transparent;
min-width: 100%;
top: auto;
li {
a {
background: $topbar-dropdown-link-bg;
color: $topbar-dropdown-link-color;
line-height: $topbar-height;
white-space: nowrap;
padding: 12px $topbar-link-padding;
background: $topbar-dropdown-link-bg;
white-space: nowrap;
}
&:not(.has-form):not(.active) {
& > a:not(.button) {
color: $topbar-dropdown-link-color;
> a:not(.button) {
background: $topbar-dropdown-link-bg;
color: $topbar-dropdown-link-color;
}
&:hover > a:not(.button) {
color: $topbar-dropdown-link-color-hover;
background-color: $topbar-link-bg-color-hover;
color: $topbar-dropdown-link-color-hover;
@if ($topbar-dropdown-link-bg-hover) {
background: $topbar-dropdown-link-bg-hover;
}
@@ -613,8 +661,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
label {
white-space: nowrap;
background: $topbar-dropdown-label-bg;
white-space: nowrap;
}
// Second Level Dropdowns
@@ -625,11 +673,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
& > ul > .divider,
& > ul > [role="separator"] {
> ul > .divider,
> ul > [role="separator"] {
border-#{$opposite-direction}: $topbar-divider-border-bottom;
border-bottom: none;
border-top: none;
border-#{$opposite-direction}: $topbar-divider-border-bottom;
clear: none;
height: $topbar-height;
width: 0;
@@ -637,8 +685,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.has-form {
background: $topbar-link-bg;
padding: 0 $topbar-link-padding;
height: $topbar-height;
padding: 0 $topbar-link-padding;
}
// Position overrides for ul.right and ul.left
@@ -682,10 +730,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.has-dropdown {
&:hover {
& > .dropdown {
> .dropdown {
@include topbar-show-dropdown();
}
}
> a:focus + .dropdown {
@include topbar-show-dropdown();
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
$include-html-type-classes: $include-html-classes !default;
@@ -124,6 +124,9 @@ $microformat-abbr-padding: rem-calc(0 1) !default;
$microformat-abbr-font-weight: $font-weight-bold !default;
$microformat-abbr-font-decoration: none !default;
// Controls the page margin when printing the website
$print-margin: 0.34in !default;
// Text alignment class names
$align-class-names:
small-only,
@@ -216,8 +219,8 @@ $align-class-breakpoints:
/* Default Link Styles */
a {
color: $anchor-font-color;
text-decoration: $anchor-text-decoration;
line-height: inherit;
text-decoration: $anchor-text-decoration;
&:hover,
&:focus {
@@ -233,8 +236,8 @@ $align-class-breakpoints:
/* Default paragraph styles */
p {
font-family: $paragraph-font-family;
font-weight: $paragraph-font-weight;
font-size: $paragraph-font-size;
font-weight: $paragraph-font-weight;
line-height: $paragraph-line-height;
margin-bottom: $paragraph-margin-bottom;
text-rendering: $paragraph-text-rendering;
@@ -243,25 +246,25 @@ $align-class-breakpoints:
& aside {
font-size: $paragraph-aside-font-size;
line-height: $paragraph-aside-line-height;
font-style: $paragraph-aside-font-style;
line-height: $paragraph-aside-line-height;
}
}
/* Default header styles */
h1, h2, h3, h4, h5, h6 {
font-family: $header-font-family;
font-weight: $header-font-weight;
font-style: $header-font-style;
color: $header-font-color;
text-rendering: $header-text-rendering;
margin-top: $header-top-margin;
margin-bottom: $header-bottom-margin;
font-family: $header-font-family;
font-style: $header-font-style;
font-weight: $header-font-weight;
line-height: $header-line-height;
margin-bottom: $header-bottom-margin;
margin-top: $header-top-margin;
text-rendering: $header-text-rendering;
small {
font-size: $small-font-size;
color: $small-font-color;
font-size: $small-font-size;
line-height: 0;
}
}
@@ -279,8 +282,8 @@ $align-class-breakpoints:
border: $hr-border-style $hr-border-color;
border-width: $hr-border-width 0 0;
clear: both;
margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width));
height: 0;
margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width));
}
/* Helpful Typography Defaults */
@@ -302,13 +305,13 @@ $align-class-breakpoints:
}
code {
background-color: $code-background-color;
border-color: $code-border-color;
border-style: $code-border-style;
border-width: $code-border-size;
color: $code-color;
font-family: $code-font-family;
font-weight: $code-font-weight;
color: $code-color;
background-color: $code-background-color;
border-width: $code-border-size;
border-style: $code-border-style;
border-color: $code-border-color;
padding: $code-padding;
}
@@ -316,26 +319,15 @@ $align-class-breakpoints:
ul,
ol,
dl {
font-family: $list-font-family;
font-size: $list-font-size;
line-height: $list-line-height;
margin-bottom: $list-margin-bottom;
list-style-position: $list-style-position;
font-family: $list-font-family;
margin-bottom: $list-margin-bottom;
}
ul {
margin-#{$default-float}: $list-side-margin;
&.no-bullet {
margin-#{$default-float}: $list-side-margin-no-bullet;
li {
ul,
ol {
margin-#{$default-float}: $list-nested-margin;
margin-bottom: 0;
list-style: none;
}
}
}
}
/* Unordered Lists */
@@ -356,7 +348,6 @@ $align-class-breakpoints:
&.square { list-style-type: square; margin-#{$default-float}: $list-side-margin;}
&.circle { list-style-type: circle; margin-#{$default-float}: $list-side-margin;}
&.disc { list-style-type: disc; margin-#{$default-float}: $list-side-margin;}
&.no-bullet { list-style: none; }
}
/* Ordered Lists */
@@ -371,6 +362,21 @@ $align-class-breakpoints:
}
}
// Lists without bullets
.no-bullet {
list-style-type: none;
margin-#{$default-float}: $list-side-margin-no-bullet;
li {
ul,
ol {
margin-#{$default-float}: $list-nested-margin;
margin-bottom: 0;
list-style: none;
}
}
}
/* Definition Lists */
dl {
dt {
@@ -452,7 +458,7 @@ $align-class-breakpoints:
@media #{$medium-up} {
h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
h1, h2, h3, h4, h5, h6 { line-height: $header-line-height; }
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
@@ -460,5 +466,60 @@ $align-class-breakpoints:
h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; }
}
// Only include these styles if you want them.
@if $include-print-styles {
/*
* Print styles.
*
* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
*/
@media print {
* {
background: transparent !important;
color: $black !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited { text-decoration: underline;}
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after { content: ""; }
pre,
blockquote {
border: 1px solid $aluminum;
page-break-inside: avoid;
}
thead { display: table-header-group; /* h5bp.com/t */ }
tr,
img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: $print-margin; }
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 { page-break-after: avoid; }
}
}
}
}

View File

@@ -2,7 +2,7 @@
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import 'global';
//
// Foundation Visibility Classes
@@ -276,8 +276,8 @@ $visibility-breakpoint-queries:
}
}
@if $include-html-visibility-classes != false {
@include exports("visibility"){
@if $include-html-visibility-classes != false {
@include visibility-loop;
@@ -390,79 +390,28 @@ $visibility-breakpoint-queries:
th.hide-for-touch { display: table-cell !important; }
.touch th.show-for-touch { display: table-cell !important; }
// Only include these styles if you want them.
@if $include-print-styles {
/*
* Print styles.
*
* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
*/
.print-only { 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; }
.hide-for-print { display: none; }
/* Screen reader-specific classes */
.show-for-sr {
@include element-invisible;
}
.show-on-focus {
@include element-invisible;
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) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after { content: ""; }
pre,
blockquote {
border: 1px solid $aluminum;
page-break-inside: avoid;
}
thead { display: table-header-group; /* h5bp.com/t */ }
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; }
.hide-on-print { display: none !important; }
.print-only { display: block !important; }
.hide-for-print { display: none !important; }
.show-for-print { display: inherit !important; }
}
&:focus,
&:active {
@include element-invisible-off;
}
}
/* Print visibility */
@if $include-print-styles {
.print-only,
.show-for-print { display: none !important; }
@media print {
.show-for-print { display: block; }
.hide-for-print { display: none; }
.print-only,
.show-for-print { display: block !important; }
.hide-on-print,
.hide-for-print { display: none !important; }
table.show-for-print { display: table !important; }
thead.show-for-print { display: table-header-group !important; }
@@ -470,5 +419,7 @@ $visibility-breakpoint-queries:
tr.show-for-print { display: table-row !important; }
td.show-for-print { display: table-cell !important; }
th.show-for-print { display: table-cell !important; }
}
}
}
}

View File

@@ -1,9 +1,9 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
*/
html {
@@ -71,7 +71,7 @@ audio:not([controls]) {
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
[hidden],
@@ -91,7 +91,8 @@ a {
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
a:active,
@@ -209,7 +210,6 @@ figure {
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
@@ -350,15 +350,12 @@ input[type="number"]::-webkit-outer-spin-button {
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
box-sizing: content-box; /* 2 */
}
/**