updated gulp and bower files
This commit is contained in:
@@ -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"
|
||||
}
|
22
sites/all/themes/gui/materiobasetheme/bower_components/foundation/LICENSE
vendored
Normal file
22
sites/all/themes/gui/materiobasetheme/bower_components/foundation/LICENSE
vendored
Normal 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.
|
46
sites/all/themes/gui/materiobasetheme/bower_components/foundation/README.md
vendored
Normal file
46
sites/all/themes/gui/materiobasetheme/bower_components/foundation/README.md
vendored
Normal file
@@ -0,0 +1,46 @@
|
||||
# [Foundation](http://foundation.zurb.com)
|
||||
|
||||
[](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.
|
@@ -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 it is too large
Load Diff
File diff suppressed because one or more lines are too long
1
sites/all/themes/gui/materiobasetheme/bower_components/foundation/css/foundation.min.css
vendored
Normal file
1
sites/all/themes/gui/materiobasetheme/bower_components/foundation/css/foundation.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -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.
|
||||
|
@@ -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"
|
||||
|
1
sites/all/themes/gui/materiobasetheme/bower_components/foundation/css/normalize.min.css
vendored
Normal file
1
sites/all/themes/gui/materiobasetheme/bower_components/foundation/css/normalize.min.css
vendored
Normal 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 it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -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));
|
||||
|
@@ -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 () {}
|
||||
|
@@ -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();
|
||||
});
|
||||
}
|
||||
|
@@ -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">×</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');
|
||||
}
|
||||
},
|
||||
|
@@ -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');
|
||||
|
||||
|
@@ -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');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
@@ -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;
|
||||
},
|
||||
|
||||
|
@@ -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 () {}
|
||||
|
@@ -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 = '­<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);
|
||||
}
|
||||
|
||||
|
@@ -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
|
||||
|
@@ -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);
|
||||
},
|
||||
|
||||
|
@@ -407,7 +407,7 @@
|
||||
Foundation.libs.orbit = {
|
||||
name : 'orbit',
|
||||
|
||||
version : '5.5.1',
|
||||
version : '5.5.3',
|
||||
|
||||
settings : {
|
||||
animation : 'slide',
|
||||
|
@@ -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();
|
||||
|
||||
|
@@ -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) {
|
||||
|
@@ -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 );
|
||||
},
|
||||
|
@@ -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');
|
||||
|
@@ -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
57
sites/all/themes/gui/materiobasetheme/bower_components/foundation/package.json
vendored
Normal file
57
sites/all/themes/gui/materiobasetheme/bower_components/foundation/package.json
vendored
Normal 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"
|
||||
}
|
||||
]
|
||||
}
|
@@ -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';
|
||||
|
@@ -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);
|
||||
}
|
||||
|
@@ -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
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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; }
|
||||
}
|
||||
|
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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: "/";
|
||||
}
|
||||
|
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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); }
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -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; }
|
||||
}
|
||||
}
|
||||
|
@@ -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; }
|
||||
|
@@ -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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -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;
|
||||
|
@@ -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);
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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; }
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
|
@@ -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
|
||||
|
@@ -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;
|
||||
|
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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 {
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
|
||||
|
@@ -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") {
|
||||
|
@@ -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); }
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;}
|
||||
}
|
||||
}
|
||||
|
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
|
@@ -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;
|
||||
|
@@ -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); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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%;
|
||||
}
|
||||
|
||||
}
|
||||
|
@@ -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();
|
||||
}
|
||||
|
@@ -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; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
@@ -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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
Reference in New Issue
Block a user