Merge pull request #164 from coreywagehoft/master
adding Foundation CSS Framework, thx @coreywagehoft
This commit is contained in:
Ben Word
33
css/foundation/app.css
Normal file
33
css/foundation/app.css
Normal file
@@ -0,0 +1,33 @@
|
||||
/* Artfully masterminded by ZURB */
|
||||
|
||||
/* --------------------------------------------------
|
||||
Table of Contents
|
||||
-----------------------------------------------------
|
||||
:: Shared Styles
|
||||
:: Page Name 1
|
||||
:: Page Name 2
|
||||
*/
|
||||
|
||||
|
||||
/* -----------------------------------------
|
||||
Shared Styles
|
||||
----------------------------------------- */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* -----------------------------------------
|
||||
Page Name 1
|
||||
----------------------------------------- */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* -----------------------------------------
|
||||
Page Name 2
|
||||
----------------------------------------- */
|
||||
|
||||
|
||||
83
css/foundation/forms.css
Normal file
83
css/foundation/forms.css
Normal file
@@ -0,0 +1,83 @@
|
||||
/* Artfully masterminded by ZURB
|
||||
|
||||
Make sure to include the app.js if you are going to use inline label inputs
|
||||
*/
|
||||
|
||||
|
||||
/* -----------------------------------------
|
||||
Standard Forms
|
||||
----------------------------------------- */
|
||||
|
||||
form { margin: 0 0 18px; }
|
||||
form label { display: block; font-size: 13px; line-height: 18px; cursor: pointer; margin-bottom: 9px; }
|
||||
|
||||
input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; }
|
||||
input.input-text, textarea, select { display: block; margin-bottom: 9px; }
|
||||
label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; }
|
||||
|
||||
/* Text input and textarea font and padding */
|
||||
input.input-text, textarea { font-size: 13px; padding: 4px 3px 2px; outline: none !important; background: #fff; }
|
||||
input.input-text.oversize, textarea.oversize { font-size: 18px !important; padding: 4px 5px !important; }
|
||||
input.input-text:focus, textarea:focus { background: #f9f9f9; }
|
||||
|
||||
/* Inlined Label Style */
|
||||
input.placeholder, textarea.placeholder { color: #888; }
|
||||
|
||||
/* Text input and textarea sizes */
|
||||
input.input-text, textarea { width: 254px; }
|
||||
input.small, textarea.small { width: 134px; }
|
||||
input.medium, textarea.medium { width: 254px; }
|
||||
input.large, textarea.large { width: 434px; }
|
||||
|
||||
/* Fieldsets */
|
||||
form fieldset { padding: 9px 9px 2px 9px; border: solid 1px #ddd; margin: 18px 0; }
|
||||
|
||||
/* Errors */
|
||||
input.input-text.red { border-color: red; background-color: rgba(255,0,0,0.15); }
|
||||
label.red { color: red; }
|
||||
small.error { margin-top: -6px; display: block; margin-bottom: 9px; font-size: 11px; color: red; width: 260px; }
|
||||
|
||||
.small + .error { width: 140px; }
|
||||
.medium + .error { width: 260px; }
|
||||
.large + .error { width: 440px; }
|
||||
|
||||
/* -----------------------------------------
|
||||
Nicer Forms
|
||||
----------------------------------------- */
|
||||
form.nice input.input-text, form.nice textarea { border: solid 1px #bbb; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
|
||||
form.nice input.input-text, form.nice textarea { font-size: 13px; padding: 6px 3px 4px; outline: none !important; background: url(../images/misc/input-bg.png) #fff; }
|
||||
form.nice input.input-text:focus, form.nice textarea:focus { background-color: #f9f9f9; }
|
||||
|
||||
form.nice fieldset { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
|
||||
|
||||
form.nice small.error { padding: 6px 4px; border: solid 0px red; border-width: 0px 1px 1px 1px; margin-top: -10px; background: red; color: #fff; font-size: 12px; font-weight: bold; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; }
|
||||
|
||||
form.nice .small + .error { width: 132px; }
|
||||
form.nice .medium + .error { width: 252px; }
|
||||
form.nice .large + .error { width: 432px; }
|
||||
|
||||
/* -----------------------------------------
|
||||
Custom Forms
|
||||
----------------------------------------- */
|
||||
|
||||
form.custom span.custom { display: inline-block; width: 14px; height: 14px; position: relative; top: 2px; border: solid 1px #ccc; background: url(../images/misc/custom-form-sprites.png) 0 0 no-repeat; }
|
||||
form.custom span.custom.radio { border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; }
|
||||
form.custom span.custom.radio.checked { background-position: 0px -14px; }
|
||||
form.custom span.custom.checkbox.checked { background-position: 0px -28px; }
|
||||
|
||||
form.custom div.custom.dropdown { position: relative; display: inline-block; width: auto; height: 28px; margin-bottom: 9px; }
|
||||
form.custom div.custom.dropdown a.current { display: block; width: auto; line-height: 26px; padding: 0 38px 0 6px; border: solid 1px #ddd; color: #141414; }
|
||||
form.custom div.custom.dropdown a.selector { position: absolute; width: 26px; height: 26px; display: block; background: url(../images/misc/custom-form-sprites.png) -14px 0 no-repeat; right: 0px; top: 0px; border: solid 1px #ddd; }
|
||||
form.custom div.custom.dropdown:hover a.selector,
|
||||
form.custom div.custom.dropdown.open a.selector { background-position: -14px -26px; }
|
||||
|
||||
form.custom div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; left: 0px; top: 27px; margin: 0; padding: 0; background: rgba(255,255,255,0.9); border: solid 1px #ddd; z-index: 10; }
|
||||
form.custom div.custom.dropdown ul li { cursor: pointer; padding: 3px 38px 3px 6px; margin: 0; }
|
||||
form.custom div.custom.dropdown ul li.selected { background: url(../images/misc/custom-form-sprites.png) right -52px no-repeat; }
|
||||
form.custom div.custom.dropdown ul li:hover { background-color: #2a85e8; color: #fff; }
|
||||
form.custom div.custom.dropdown ul li.selected:hover { background: url(../images/misc/custom-form-sprites.png) #2a85e8 right -78px no-repeat; }
|
||||
form.custom div.custom.dropdown ul.show { display: block; }
|
||||
|
||||
form.custom div.custom.dropdown.open ul { display: block; }
|
||||
|
||||
|
||||
127
css/foundation/globals.css
Normal file
127
css/foundation/globals.css
Normal file
@@ -0,0 +1,127 @@
|
||||
/* Arfully Masterminded by ZURB */
|
||||
|
||||
/* --------------------------------------------------
|
||||
Table of Contents
|
||||
-----------------------------------------------------
|
||||
:: Reset & Standards
|
||||
:: Links
|
||||
:: Lists
|
||||
:: Tables
|
||||
:: Misc
|
||||
*/
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Global Reset & Standards
|
||||
-------------------------------------------------- */
|
||||
|
||||
/*
|
||||
Eric Meyer's CSS Reset
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body { background: #fff; font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; color: #555; position: relative; -webkit-font-smoothing: antialiased; }
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Links
|
||||
-------------------------------------------------- */
|
||||
a { color: #2a85e8; text-decoration: none; outline: 0; line-height: inherit; }
|
||||
a:hover { color: #11639d; }
|
||||
p a, p a:visited { line-height: inherit; }
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Lists
|
||||
-------------------------------------------------- */
|
||||
ul, ol { margin-bottom: 18px; }
|
||||
ul { list-style: none outside; }
|
||||
ol { list-style: decimal; }
|
||||
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
|
||||
ul.square { list-style: square outside; }
|
||||
ul.circle { list-style: circle outside; }
|
||||
ul.disc { list-style: disc outside; }
|
||||
ul ul, ol ol { margin: 4px 0 5px 30px; }
|
||||
li { margin-bottom: 12px; }
|
||||
ul.large li { line-height: 21px; }
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Tables
|
||||
-------------------------------------------------- */
|
||||
table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; width: 100%; margin: 0 0 18px; border: 1px solid #ddd; }
|
||||
|
||||
table thead { background: #f5f5f5; }
|
||||
table thead tr th,
|
||||
table tbody tr td { font-size: 12px; line-height: 18px; text-align: left; }
|
||||
table thead tr th { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; }
|
||||
table thead tr th:first-child { border-left: none; }
|
||||
table thead tr th:last-child { border-right: none; }
|
||||
|
||||
table thead tr { }
|
||||
table tbody { }
|
||||
table tbody tr { }
|
||||
table tbody tr.even,
|
||||
table tbody tr.alt { background: #f9f9f9; }
|
||||
table tbody tr:nth-child(even) { background: #f9f9f9; }
|
||||
table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; }
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Misc
|
||||
---------------------------------------------------*/
|
||||
.left { float: left; }
|
||||
.right { float: right; }
|
||||
.hide { display: none; }
|
||||
.highlight { background: #ff0; }
|
||||
|
||||
103
css/foundation/grid.css
Normal file
103
css/foundation/grid.css
Normal file
@@ -0,0 +1,103 @@
|
||||
/* Arfully Masterminded by ZURB */
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Grid
|
||||
|
||||
This is the mobile-friendly, responsive grid that
|
||||
lets Foundation work much of its magic.
|
||||
|
||||
-------------------------------------------------- */
|
||||
|
||||
.container { padding: 0px 20px; }
|
||||
|
||||
.row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
|
||||
/* To fix the grid into a certain size, set max-width to width */
|
||||
.row .row { min-width: 0px; }
|
||||
|
||||
.column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
|
||||
.column:first-child, .columns:first-child { margin-left: 0px; }
|
||||
|
||||
.row .one.columns { width: 4.3%; }
|
||||
.row .two.columns { width: 13%; }
|
||||
.row .three.columns { width: 21.68%; }
|
||||
.row .four.columns { width: 30.4%; }
|
||||
.row .five.columns { width: 39.1%; }
|
||||
.row .six.columns { width: 47.8%; }
|
||||
.row .seven.columns { width: 56.5%; }
|
||||
.row .eight.columns { width: 65.2%; }
|
||||
.row .nine.columns { width: 73.9%; }
|
||||
.row .ten.columns { width: 82.6%; }
|
||||
.row .eleven.columns { width: 91.3%; }
|
||||
.row .twelve.columns { width: 100%; }
|
||||
|
||||
.row .offset-by-one { margin-left: 13.1%; }
|
||||
.row .offset-by-two { margin-left: 21.8%; }
|
||||
.row .offset-by-three { margin-left: 30.5%; }
|
||||
.row .offset-by-four { margin-left: 39.2%; }
|
||||
.row .offset-by-five { margin-left: 47.9%; }
|
||||
.row .offset-by-six { margin-left: 56.6%; }
|
||||
.row .offset-by-seven { margin-left: 65.3%; }
|
||||
.row .offset-by-eight { margin-left: 74.0%; }
|
||||
.row .offset-by-nine { margin-left: 82.7%; }
|
||||
.row .offset-by-ten { margin-left: 91.4%; }
|
||||
/*.row .offset-by-eleven { margin-left: 95.7%; }*/
|
||||
|
||||
.row .one.centered { margin-left: 47.9%; }
|
||||
.row .two.centered { margin-left: 43.5%; }
|
||||
.row .three.centered { margin-left: 39.2%; }
|
||||
.row .four.centered { margin-left: 34.8%; }
|
||||
.row .five.centered { margin-left: 30.5%; }
|
||||
.row .six.centered { margin-left: 26.1%; }
|
||||
.row .seven.centered { margin-left: 21.8%; }
|
||||
.row .eight.centered { margin-left: 17.4%; }
|
||||
.row .nine.centered { margin-left: 13.1%; }
|
||||
.row .ten.centered { margin-left: 8.7%; }
|
||||
.row .eleven.centered { margin-left: 4.3%; }
|
||||
|
||||
.row .offset-by-one:first-child { margin-left: 8.7%; }
|
||||
.row .offset-by-two:first-child { margin-left: 17.4%; }
|
||||
.row .offset-by-three:first-child { margin-left: 26.1%; }
|
||||
.row .offset-by-four:first-child { margin-left: 34.8%; }
|
||||
.row .offset-by-five:first-child { margin-left: 43.5%; }
|
||||
.row .offset-by-six:first-child { margin-left: 52.2%; }
|
||||
.row .offset-by-seven:first-child { margin-left: 60.9%; }
|
||||
.row .offset-by-eight:first-child { margin-left: 69.6%; }
|
||||
.row .offset-by-nine:first-child { margin-left: 78.3%; }
|
||||
.row .offset-by-ten:first-child { margin-left: 87%; }
|
||||
.row .offset-by-eleven:first-child { margin-left: 95.7%; }
|
||||
|
||||
img, object, embed { max-width: 100%; }
|
||||
img { -ms-interpolation-mode: bicubic; }
|
||||
|
||||
/* Nicolas Gallagher's micro clearfix */
|
||||
.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
|
||||
.row:after, .clearfix:after { clear: both; }
|
||||
.row, .clearfix { zoom: 1; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Block grids
|
||||
|
||||
These are 2-up, 3-up, 4-up and 5-up ULs, suited
|
||||
for repeating blocks of content. Add 'mobile' to
|
||||
them to switch them just like the layout grid
|
||||
(one item per line) on phones
|
||||
-------------------------------------------------- */
|
||||
|
||||
.block-grid { display: block; overflow: hidden; }
|
||||
.block-grid>li { display: block; height: auto; float: left; }
|
||||
|
||||
.block-grid.two-up { margin-left: -4% }
|
||||
.block-grid.two-up>li { margin-left: 4%; width: 46%; }
|
||||
|
||||
.block-grid.three-up { margin-left: -2% }
|
||||
.block-grid.three-up>li { margin-left: 2%; width: 31.3%; }
|
||||
|
||||
.block-grid.four-up { margin-left: -2% }
|
||||
.block-grid.four-up>li { margin-left: 2%; width: 23%; }
|
||||
|
||||
.block-grid.five-up { margin-left: -1.5% }
|
||||
.block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; }
|
||||
|
||||
4
css/foundation/ie.css
Normal file
4
css/foundation/ie.css
Normal file
@@ -0,0 +1,4 @@
|
||||
/* This is for all IE specfific style less than IE9 and
|
||||
we make IE 8 render like 7. We hate IE. */
|
||||
|
||||
div.panel { border: 1px solid #ccc; }
|
||||
112
css/foundation/mobile.css
Normal file
112
css/foundation/mobile.css
Normal file
@@ -0,0 +1,112 @@
|
||||
/* --------------------------------------------------
|
||||
:: Grid
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Tablet screens */
|
||||
@media only screen and (device-width: 768px), (device-width: 800px) {
|
||||
/* Currently unused */
|
||||
}
|
||||
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: 767px) {
|
||||
body { -webkit-text-size-adjust: none; }
|
||||
|
||||
.row, body, .container { width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; }
|
||||
.row .row .column, .row .row .columns { padding: 0; }
|
||||
.column, .columns { width: auto !important; float: none; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; }
|
||||
.column:last-child, .columns:last-child { margin-right: 0px; }
|
||||
.offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven { margin-left: 0% !important; }
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Block Grids
|
||||
-------------------------------------------------- */
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.block-grid.mobile li { float: none; width: 100%; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Mobile Visibility Affordances
|
||||
---------------------------------------------------*/
|
||||
|
||||
|
||||
.show-on-phones { display: none !important; }
|
||||
.show-on-tablets { display: none !important; }
|
||||
.show-on-desktops { display: block; }
|
||||
|
||||
.hide-on-phones { display: block !important; }
|
||||
.hide-on-tablets { display: block !important; }
|
||||
.hide-on-desktops { display: none; }
|
||||
|
||||
|
||||
@media only screen and (device-width: 768px), only screen and (device-width: 1280px), only screen and (device-width: 800px) {
|
||||
.hide-on-phones { display: block !important; }
|
||||
.hide-on-tablets { display: none !important; }
|
||||
.hide-on-desktops { display: block !important; }
|
||||
|
||||
.show-on-phones { display: none !important; }
|
||||
.show-on-tablets { display: block !important; }
|
||||
.show-on-desktops { display: none !important; }
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.hide-on-phones { display: none !important; }
|
||||
.hide-on-tablets { display: block !important; }
|
||||
.hide-on-desktops { display: block !important; }
|
||||
|
||||
.show-on-phones { display: block !important; }
|
||||
.show-on-tablets { display: none !important; }
|
||||
.show-on-desktops { display: none !important; }
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Forms
|
||||
---------------------------------------------------*/
|
||||
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
input.input-text, input.input-text.oversize, textarea,
|
||||
form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { display: block; width: 96%; padding: 6px 2% 4px; font-size: 18px; }
|
||||
form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { -webkit-border-radius: 2px; -moz-border-radius: 2px; }
|
||||
form.nice small.error { padding: 6px 2%; display: block; }
|
||||
form.nice .small + .error { width: auto; }
|
||||
form.nice .medium + .error { width: auto; }
|
||||
form.nice .large + .error { width: auto; }
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: UI
|
||||
---------------------------------------------------*/
|
||||
|
||||
/* Buttons */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.button { display: block; }
|
||||
button.button { width: 100%; padding-left: 0px; padding-right: 0px; }
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
dl.tabs.mobile, dl.nice.tabs.mobile { width: auto; margin: 20px -20px 40px; height: auto; }
|
||||
dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd { float: none; height: auto; }
|
||||
|
||||
dl.tabs.mobile dd a { display: block; width: auto; height: auto; padding: 18px 20px; line-height: 1; border: solid 0px #ccc; border-width: 1px 0px 0px; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; }
|
||||
dl.tabs.mobile dd a.active { height: auto; margin: 0; border-width: 1px 0px 0px; }
|
||||
|
||||
.nice.tabs.mobile { border-bottom: solid 1px #ccc; height: auto; }
|
||||
.nice.tabs.mobile dd a { padding: 18px 20px; border: none; border-left: none; border-right: none; border-top: 1px solid #ccc; background: #fff; }
|
||||
.nice.tabs.mobile dd a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0px; height: auto; }
|
||||
.nice.tabs.mobile dd:first-child a.active { margin: 0; }
|
||||
|
||||
dl.contained.mobile, dl.nice.contained.mobile { margin-bottom: 0px; }
|
||||
dl.contained.tabs.mobile dd a { padding: 18px 20px; }
|
||||
dl.nice.contained.tabs.mobile dd a { padding: 18px 20px; }
|
||||
}
|
||||
210
css/foundation/orbit.css
Normal file
210
css/foundation/orbit.css
Normal file
@@ -0,0 +1,210 @@
|
||||
/* CSS for jQuery Orbit Plugin 1.2.3
|
||||
* www.ZURB.com/playground
|
||||
* Copyright 2010, ZURB
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
|
||||
|
||||
|
||||
/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
|
||||
================================================== */
|
||||
#caseStudies {
|
||||
width: 1000px;
|
||||
height: 210px;
|
||||
background: #fff url('../images/orbit/loading.gif') no-repeat center center;
|
||||
overflow: hidden; }
|
||||
#caseStudies>img,
|
||||
#caseStudies>div,
|
||||
#caseStudies>a { display: none; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* CONTAINER
|
||||
================================================== */
|
||||
|
||||
div.orbit-wrapper {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
position: relative; }
|
||||
|
||||
div.orbit {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
position: relative;
|
||||
overflow: hidden }
|
||||
|
||||
div.orbit>img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* display: none; */ }
|
||||
|
||||
div.orbit>a {
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
line-height: 0;
|
||||
display: none; }
|
||||
|
||||
.orbit>div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */
|
||||
|
||||
|
||||
/* TIMER
|
||||
================================================== */
|
||||
|
||||
div.timer {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
opacity: .6;
|
||||
cursor: pointer;
|
||||
z-index: 1001; }
|
||||
|
||||
span.rotator {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -20px;
|
||||
background: url(../images/orbit/rotator-black.png) no-repeat;
|
||||
z-index: 3; }
|
||||
|
||||
span.mask {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
overflow: hidden; }
|
||||
|
||||
span.rotator.move {
|
||||
left: 0 }
|
||||
|
||||
span.mask.move {
|
||||
width: 40px;
|
||||
left: 0;
|
||||
background: url(../images/orbit/timer-black.png) repeat 0 0; }
|
||||
|
||||
span.pause {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url(../images/orbit/pause-black.png) no-repeat;
|
||||
z-index: 4;
|
||||
opacity: 0; }
|
||||
|
||||
span.pause.active {
|
||||
background: url(../images/orbit/pause-black.png) no-repeat 0 -40px }
|
||||
|
||||
div.timer:hover span.pause,
|
||||
span.pause.active {
|
||||
opacity: 1 }
|
||||
|
||||
|
||||
/* CAPTIONS
|
||||
================================================== */
|
||||
|
||||
.orbit-caption {
|
||||
display: none;
|
||||
font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }
|
||||
|
||||
.orbit-wrapper .orbit-caption {
|
||||
background: #000;
|
||||
background: rgba(0,0,0,.6);
|
||||
z-index: 1000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 7px 0;
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%; }
|
||||
|
||||
|
||||
/* DIRECTIONAL NAV
|
||||
================================================== */
|
||||
|
||||
div.slider-nav {
|
||||
display: block }
|
||||
|
||||
div.slider-nav span {
|
||||
width: 78px;
|
||||
height: 100px;
|
||||
text-indent: -9999px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
cursor: pointer; }
|
||||
|
||||
div.slider-nav span.right {
|
||||
background: url(../images/orbit/right-arrow.png);
|
||||
right: 0; }
|
||||
|
||||
div.slider-nav span.left {
|
||||
background: url(../images/orbit/left-arrow.png);
|
||||
left: 0; }
|
||||
|
||||
/* BULLET NAV
|
||||
================================================== */
|
||||
|
||||
.orbit-bullets {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
list-style: none;
|
||||
bottom: -40px;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
padding: 0; }
|
||||
|
||||
.orbit-bullets li {
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
text-indent: -9999px;
|
||||
background: url(../images/orbit/bullets.jpg) no-repeat 4px 0;
|
||||
width: 13px;
|
||||
height: 12px;
|
||||
overflow: hidden; }
|
||||
|
||||
.orbit-bullets li.active {
|
||||
color: #222;
|
||||
background-position: -8px 0; }
|
||||
|
||||
.orbit-bullets li.has-thumb {
|
||||
background: none;
|
||||
width: 100px;
|
||||
height: 75px; }
|
||||
|
||||
.orbit-bullets li.active.has-thumb {
|
||||
background-position: 0 0;
|
||||
border-top: 2px solid #000; }
|
||||
|
||||
/* FLUID LAYOUT
|
||||
================================================== */
|
||||
.orbit .fluid-placeholder {
|
||||
visibility: hidden;
|
||||
position: static;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
91
css/foundation/reveal.css
Normal file
91
css/foundation/reveal.css
Normal file
@@ -0,0 +1,91 @@
|
||||
/* --------------------------------------------------
|
||||
Reveal Modals
|
||||
-------------------------------------------------- */
|
||||
|
||||
.reveal-modal-bg {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
background: rgba(0,0,0,.8);
|
||||
z-index: 2000;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.reveal-modal {
|
||||
visibility: hidden;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
margin-left: -300px;
|
||||
width: 520px;
|
||||
background: #eee url(../images/misc/modal-gloss.png) no-repeat -200px -80px;
|
||||
position: absolute;
|
||||
z-index: 2001;
|
||||
padding: 30px 40px 34px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
.reveal-modal.small { width: 200px; margin-left: -140px;}
|
||||
.reveal-modal.medium { width: 400px; margin-left: -240px;}
|
||||
.reveal-modal.large { width: 600px; margin-left: -340px;}
|
||||
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
|
||||
|
||||
.reveal-modal .close-reveal-modal {
|
||||
font-size: 22px;
|
||||
line-height: .5;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 11px;
|
||||
color: #aaa;
|
||||
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile */
|
||||
|
||||
@media handheld, only screen and (device-width: 768px), (device-width: 800px) {
|
||||
.reveal-modal-bg { position: absolute; }
|
||||
|
||||
.reveal-modal,
|
||||
.reveal-modal.small,
|
||||
.reveal-modal.medium,
|
||||
.reveal-modal.large,
|
||||
.reveal-modal.xlarge { width: 60%; top: 30%; left: 15%; margin-left: 0px; padding: 5%; height: auto; }
|
||||
}
|
||||
|
||||
@media handheld, only screen and (max-width: 767px) {
|
||||
.reveal-modal-bg { position: absolute; }
|
||||
|
||||
.reveal-modal,
|
||||
.reveal-modal.small,
|
||||
.reveal-modal.medium,
|
||||
.reveal-modal.large,
|
||||
.reveal-modal.xlarge { width: 80%; top: 15%; left: 5%; margin-left: 0px; padding: 5%; height: auto; }
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
NOTES
|
||||
|
||||
Close button entity is ×
|
||||
|
||||
Example markup
|
||||
|
||||
<div id="myModal" class="reveal-modal">
|
||||
<h2>Awesome. I have it.</h2>
|
||||
<p class="lead">Your couch. I it's mine.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
|
||||
<a class="close-reveal-modal">×</a>
|
||||
</div>
|
||||
|
||||
*/
|
||||
64
css/foundation/typography.css
Normal file
64
css/foundation/typography.css
Normal file
@@ -0,0 +1,64 @@
|
||||
/* Arfully Masterminded by ZURB */
|
||||
|
||||
/* --------------------------------------------------
|
||||
:: Typography
|
||||
-------------------------------------------------- */
|
||||
h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: bold; line-height: 1.25 }
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
|
||||
h1 { font-size: 46px; font-size: 4.6rem; margin-bottom: 12px;}
|
||||
h2 { font-size: 35px; font-size: 3.5rem; margin-bottom: 9px; }
|
||||
h3 { font-size: 28px; font-size: 2.8rem; margin-bottom: 9px; }
|
||||
h4 { font-size: 21px; font-size: 2.1rem; margin-bottom: 3px; }
|
||||
h5 { font-size: 18px; font-size: 1.8rem; font-weight: normal; margin-bottom: 3px; }
|
||||
h6 { font-size: 15px; font-size: 1.5rem; font-weight: normal; }
|
||||
|
||||
.subheader { color: #777; font-weight: 300; margin-bottom: 24px; }
|
||||
|
||||
p { line-height: 17px; margin: 0 0 18px; }
|
||||
p img { margin: 0; }
|
||||
p.lead { font-size: 18px; font-size: 1.8rem; line-height: 24px; }
|
||||
|
||||
/* Mobile */
|
||||
|
||||
@media handheld, only screen and (max-width: 767px) {
|
||||
body, p { font-size: 15px; font-size: 1.5rem; line-height: 1.4; }
|
||||
}
|
||||
|
||||
em { font-style: italic; line-height: inherit; }
|
||||
strong { font-weight: bold; line-height: inherit; }
|
||||
small { font-size: 60%; line-height: inherit; }
|
||||
|
||||
h1 small, h2 small, h3 small, h4 small, h5 small { color: #777; }
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote, blockquote p { line-height: 20px; color: #777; }
|
||||
blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
|
||||
blockquote cite { display: block; font-size: 12px; font-size: 1.2rem; color: #555; }
|
||||
blockquote cite:before { content: "\2014 \0020"; }
|
||||
blockquote cite a, blockquote cite a:visited { color: #555; }
|
||||
|
||||
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; }
|
||||
|
||||
abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; }
|
||||
abbr { text-transform: none; }
|
||||
|
||||
/**
|
||||
* 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; text-shadow: none !important; filter:none !important;
|
||||
-ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
|
||||
p a, p a:visited { color: #444 !important; text-decoration: underline; }
|
||||
p a[href]:after { content: " (" attr(href) ")"; }
|
||||
abbr[title]:after { content: " (" attr(title) ")"; }
|
||||
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
|
||||
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
|
||||
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
|
||||
tr, img { page-break-inside: avoid; }
|
||||
@page { margin: 0.5cm; }
|
||||
p, h2, h3 { orphans: 3; widows: 3; }
|
||||
h2, h3{ page-break-after: avoid; }
|
||||
}
|
||||
227
css/foundation/ui.css
Normal file
227
css/foundation/ui.css
Normal file
@@ -0,0 +1,227 @@
|
||||
/* Artfully masterminded by ZURB */
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Table of Contents
|
||||
-----------------------------------------------------
|
||||
:: Buttons
|
||||
:: Alerts
|
||||
:: Notices/Alerts
|
||||
:: Tabs
|
||||
:: Pagination
|
||||
:: Lists
|
||||
:: Panels
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Buttons
|
||||
-------------------------------------------------- */
|
||||
|
||||
.button {
|
||||
background: #00a6fc;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 9px 34px 11px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button.nice {
|
||||
background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px;
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
|
||||
text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
|
||||
background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px, -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, transparent 100%);
|
||||
background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.4)), color-stop(100%,transparent));
|
||||
border: 1px solid #0593dc;
|
||||
-webkit-transition: background-color .15s ease-in-out;
|
||||
-moz-transition: background-color .15s ease-in-out;
|
||||
-o-transition: background-color .15s ease-in-out;
|
||||
}
|
||||
|
||||
.button.radius {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.button.round {
|
||||
-moz-border-radius: 1000px;
|
||||
-webkit-border-radius: 1000px;
|
||||
border-radius: 1000px;
|
||||
}
|
||||
|
||||
.button.full-width {
|
||||
width: 100%;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button.left-align {
|
||||
text-align: left;
|
||||
text-indent: 12px;
|
||||
}
|
||||
|
||||
.button:active {}
|
||||
|
||||
/* Sizes ---------- */
|
||||
.small.button { font-size: 11px; padding: 8px 20px 10px; }
|
||||
.medium.button { font-size: 13px; }
|
||||
.large.button { font-size: 18px; padding: 11px 48px 13px; }
|
||||
|
||||
/* Nice Sizes ---------- */
|
||||
.nice.small.button { background-position: 0 -36px; }
|
||||
.nice.large.button { background-position: 0 -30px; }
|
||||
|
||||
/* Colors ---------- */
|
||||
.blue.button { background-color: #00a6fc; }
|
||||
.red.button { background-color: #e91c21; }
|
||||
.white.button { background-color: #e9e9e9; color: #333; }
|
||||
.charcoal.button { background-color: #141414; }
|
||||
|
||||
/* Nice Colors ---------- */
|
||||
.nice.blue.button { border: 1px solid #0593dc; }
|
||||
.nice.red.button { border: 1px solid #b90b0b; }
|
||||
.nice.white.button { border: 1px solid #cacaca; text-shadow: none !important; }
|
||||
.nice.charcoal.button { border: 1px solid #000; }
|
||||
|
||||
/* Hovers ---------- */
|
||||
.button:hover { background-color: #0192dd; color: #fff; }
|
||||
.blue.button:hover { background-color: #0192dd; }
|
||||
.red.button:hover { background-color: #d01217; }
|
||||
.white.button:hover { background-color: #dadada; color: #333; }
|
||||
.charcoal.button:hover { background-color: #000; }
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Alerts
|
||||
-------------------------------------------------- */
|
||||
|
||||
div.alert-box { display: block; padding: 6px 7px; font-weight: bold; font-size: 13px; background: #eee; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 12px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0px 1px rgba(255,255,255,0.9); position: relative; }
|
||||
.alert-box.success { background-color: #7fae00; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); }
|
||||
.alert-box.warning { background-color: #c08c00; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); }
|
||||
.alert-box.error { background-color: #c00000; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); }
|
||||
|
||||
.alert-box a.close { color: #000; position: absolute; right: 4px; top: 0px; font-size: 18px; opacity: 0.2; padding: 4px; }
|
||||
.alert-box a.close:hover { opacity: 0.4; }
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Tabs
|
||||
-------------------------------------------------- */
|
||||
dl.tabs { display: block; margin: 0 0 20px 0; padding: 0; height: 30px; border-bottom: solid 1px #ddd; }
|
||||
dl.tabs dt { display: block; width: auto; height: 30px; padding: 0px 9px 0 20px; line-height: 30px; float: left; color: #999; font-size: 11px; text-transform: uppercase; cursor: default; }
|
||||
dl.tabs dt:first-child { padding: 0 9px 0 0px; }
|
||||
dl.tabs dd { display: block; width: auto; height: 30px; padding: 0; float: left; }
|
||||
dl.tabs dd a { display: block; width: auto; height: 29px; padding: 0px 9px; line-height: 30px; border: solid 1px #ddd; margin: 0 -1px 0 0; color: #555; background: #eee; }
|
||||
dl.tabs dd a.active { background: #fff; border-width: 1px 1px 0px 1px; height: 30px; }
|
||||
|
||||
.nice.tabs { border-bottom: solid 1px #eee; margin: 0 0 30px 0; height:43px; }
|
||||
.nice.tabs dd a { padding: 7px 18px 9px; font-size: 15px; font-size: 1.5rem; color: #555555; background: none; border: none; }
|
||||
.nice.tabs dd a.active { font-weight: bold; color: #333; background: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 3px solid #00a6fc; margin: 0 10px; position: relative; top: -5px; }
|
||||
.nice.tabs dd:first-child a.active { margin-left: 0; }
|
||||
|
||||
ul.tabs-content { margin: 0; display: block; }
|
||||
ul.tabs-content > li { display:none; }
|
||||
ul.tabs-content > li.active { display: block; }
|
||||
|
||||
dl.contained, dl.nice.contained { margin-bottom: 0px; }
|
||||
dl.contained.tabs dd a { padding: 0px 14px; }
|
||||
dl.nice.contained.tabs dd a { padding: 7px 18px 9px; }
|
||||
|
||||
ul.contained.tabs-content { padding: 0; }
|
||||
ul.contained.tabs-content li { padding: 20px; border: solid 0px #ddd; border-width: 0px 1px 1px 1px; }
|
||||
ul.nice.contained.tabs-content li { border-color: #eee; }
|
||||
|
||||
/* --------------------------------------------------
|
||||
Pagination
|
||||
-------------------------------------------------- */
|
||||
ul.pagination { display: block; height: 24px; margin-left: -5px; }
|
||||
ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 15px; margin-left: 5px; }
|
||||
ul.pagination li a { display: block; padding: 6px 7px 4px; color: #555; }
|
||||
ul.pagination li.current a, ul.pagination li:hover a { border-bottom: solid 2px #00a6fc; color: #141414; }
|
||||
ul.pagination li.unavailable a { cursor: default; color: #999; }
|
||||
ul.pagination li.unavailable:hover a { border-bottom: none; }
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Lists
|
||||
-------------------------------------------------- */
|
||||
ul.nice, ol.nice { list-style: none; margin: 0; }
|
||||
ul.nice li, ol.nice li { padding-left: 13px; position: relative }
|
||||
ul.nice li span.bullet, ol.nice li span.number { position: absolute; left: 0px; top: 0px; color: #ccc; }
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Notices/Alerts
|
||||
---------------------------------------------------*/
|
||||
/* Alerts cannot be closed and notices can */
|
||||
|
||||
.notice, .alert {
|
||||
position: relative;
|
||||
background: #222 url(../images/misc/button-overlay.png) repeat-x bottom;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
|
||||
font-weight: bold;
|
||||
}
|
||||
.notice>span, .alert>span {
|
||||
display: block;
|
||||
padding: 5px 10px 6px;
|
||||
}
|
||||
.notice a.close {
|
||||
font-size: 20px;
|
||||
line-height: .5;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 1px rbga(0,0,0,.25);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
/* NOTES
|
||||
|
||||
Close button entity is ×
|
||||
Sample Markup:
|
||||
<div class="notice"><span>
|
||||
This is awesome
|
||||
<a class="close" href="#">×</a>
|
||||
</span></div>
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Panels
|
||||
-------------------------------------------------- */
|
||||
div.panel {
|
||||
padding: 20px 20px 2px 20px;
|
||||
background: #efefef;
|
||||
background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#F4F4F4));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F4F4F4',GradientType=0 );
|
||||
box-shadow: 0px 2px 5px rgba(0,0,0,0.15);
|
||||
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.15);
|
||||
-moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.25);
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ add_action('roots_head', 'roots_google_analytics');
|
||||
add_action('roots_head', 'roots_fout_b_gone');
|
||||
add_action('roots_head', 'roots_1140_head');
|
||||
add_action('roots_head', 'roots_adapt_head');
|
||||
add_action('roots_head', 'roots_foundation_head');
|
||||
add_action('roots_stylesheets', 'roots_get_stylesheets');
|
||||
add_action('roots_header_before', 'roots_1140_header_before');
|
||||
add_action('roots_header_after', 'roots_1140_header_after');
|
||||
@@ -69,6 +70,26 @@ function roots_adapt_head() {
|
||||
}
|
||||
}
|
||||
|
||||
function roots_foundation_head() {
|
||||
global $roots_options;
|
||||
$roots_css_framework = $roots_options['css_framework'];
|
||||
$template_uri = get_template_directory_uri();
|
||||
if ($roots_css_framework === 'foundation') {
|
||||
echo "\t<!-- Combine and Compress These Javascript Files -->\n";
|
||||
echo "\t<script src=\"$template_uri/js/foundation/jquery.reveal.js\"></script>\n";
|
||||
echo "\t<script src=\"$template_uri/js/foundation/jquery.orbit-1.3.0.js\"></script>\n";
|
||||
echo "\t<script src=\"$template_uri/js/foundation/forms.jquery.js\"></script>\n";
|
||||
echo "\t<script src=\"$template_uri/js/foundation/jquery.customforms.js\"></script>\n";
|
||||
echo "\t<script src=\"$template_uri/js/foundation/jquery.placeholder.min.js\"></script>\n";
|
||||
echo "\t<!-- End Combine and Compress Javascript Files -->\n";
|
||||
echo "\t<script src=\"$template_uri/js/foundation/app.js\"></script>\n";
|
||||
echo "\t<!-- IE Fix for HTML 5 Tags -->\n";
|
||||
echo "\t<!--[if lt IE 9]>\n";
|
||||
echo "\t\t<script src=\"http://html5shiv.googlecode.com/svn/trunk/html5.js\"></script>\n";
|
||||
echo "\t<![endif]-->\n";
|
||||
}
|
||||
}
|
||||
|
||||
function roots_get_stylesheets() {
|
||||
global $roots_options;
|
||||
$roots_css_framework = $roots_options['css_framework'];
|
||||
@@ -99,6 +120,17 @@ function roots_get_stylesheets() {
|
||||
$styles .= stylesheet_link_tag('/adapt/mobile.css', 1);
|
||||
$styles .= "\t</noscript>\n";
|
||||
break;
|
||||
case 'foundation' :
|
||||
$styles .= stylesheet_link_tag('/foundation/globals.css');
|
||||
$styles .= stylesheet_link_tag('/foundation/typography.css', 1);
|
||||
$styles .= stylesheet_link_tag('/foundation/grid.css', 1);
|
||||
$styles .= stylesheet_link_tag('/foundation/ui.css', 1);
|
||||
$styles .= stylesheet_link_tag('/foundation/forms.css', 1);
|
||||
$styles .= stylesheet_link_tag('/foundation/orbit.css', 1);
|
||||
$styles .= stylesheet_link_tag('/foundation/reveal.css', 1);
|
||||
$styles .= stylesheet_link_tag('/foundation/mobile.css', 1);
|
||||
$styles .= stylesheet_link_tag('/foundation/app.css', 1);
|
||||
break;
|
||||
case 'less' :
|
||||
$styles .= stylesheet_link_tag('/less/less.css');
|
||||
break;
|
||||
@@ -122,6 +154,9 @@ function roots_get_stylesheets() {
|
||||
case '1140' :
|
||||
$styles .= "\t<!--[if lt IE 8]>" . stylesheet_link_tag('/1140/ie.css', 0, false) . "<![endif]-->\n";
|
||||
break;
|
||||
case 'foundation' :
|
||||
$styles .= "\t<!--[if lt IE 9]>" . stylesheet_link_tag('/foundation/ie.css', 0, false) . "<![endif]-->\n";
|
||||
break;
|
||||
}
|
||||
|
||||
echo $styles;
|
||||
|
||||
@@ -117,6 +117,15 @@ $roots_css_frameworks = array(
|
||||
'sidebar' => ''
|
||||
)
|
||||
),
|
||||
'foundation' => array(
|
||||
'name' => 'foundation',
|
||||
'label' => __('Foundation', 'roots'),
|
||||
'classes' => array(
|
||||
'container' => 'row',
|
||||
'main' => 'eight columns',
|
||||
'sidebar' => 'four columns'
|
||||
)
|
||||
),
|
||||
'none' => array(
|
||||
'name' => 'none',
|
||||
'label' => __('None', 'roots'),
|
||||
|
||||
43
js/foundation/app.js
Normal file
43
js/foundation/app.js
Normal file
@@ -0,0 +1,43 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
/* Use this js doc for all application specific JS */
|
||||
|
||||
/* TABS --------------------------------- */
|
||||
/* Remove if you don't need :) */
|
||||
|
||||
var tabs = $('dl.tabs');
|
||||
tabsContent = $('ul.tabs-content')
|
||||
|
||||
tabs.each(function(i) {
|
||||
//Get all tabs
|
||||
var tab = $(this).children('dd').children('a');
|
||||
tab.click(function(e) {
|
||||
|
||||
//Get Location of tab's content
|
||||
var contentLocation = $(this).attr("href")
|
||||
contentLocation = contentLocation + "Tab";
|
||||
|
||||
//Let go if not a hashed one
|
||||
if(contentLocation.charAt(0)=="#") {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
//Make Tab Active
|
||||
tab.removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
//Show Tab Content
|
||||
$(contentLocation).parent('.tabs-content').children('li').css({"display":"none"});
|
||||
$(contentLocation).css({"display":"block"});
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/* PLACEHOLDER FOR FORMS ------------- */
|
||||
/* Remove this and jquery.placeholder.min.js if you don't need :) */
|
||||
|
||||
$('input, textarea').placeholder();
|
||||
|
||||
});
|
||||
58
js/foundation/forms.jquery.js
Normal file
58
js/foundation/forms.jquery.js
Normal file
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* jQuery.placeholder - Placeholder plugin for input fields
|
||||
* Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
|
||||
* Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
|
||||
* Date: 2008/10/14
|
||||
*
|
||||
* @author Blair Mitchelmore
|
||||
* @version 1.0.1
|
||||
*
|
||||
**/
|
||||
new function($) {
|
||||
$.fn.placeholder = function(settings) {
|
||||
settings = settings || {};
|
||||
var key = settings.dataKey || "placeholderValue";
|
||||
var attr = settings.attr || "placeholder";
|
||||
var className = settings.className || "placeholder";
|
||||
var values = settings.values || [];
|
||||
var block = settings.blockSubmit || false;
|
||||
var blank = settings.blankSubmit || false;
|
||||
var submit = settings.onSubmit || false;
|
||||
var value = settings.value || "";
|
||||
var position = settings.cursor_position || 0;
|
||||
|
||||
|
||||
return this.filter(":input").each(function(index) {
|
||||
$.data(this, key, values[index] || $(this).attr(attr));
|
||||
}).each(function() {
|
||||
if ($.trim($(this).val()) === "")
|
||||
$(this).addClass(className).val($.data(this, key));
|
||||
}).focus(function() {
|
||||
if ($.trim($(this).val()) === $.data(this, key))
|
||||
$(this).removeClass(className).val(value)
|
||||
if ($.fn.setCursorPosition) {
|
||||
$(this).setCursorPosition(position);
|
||||
}
|
||||
}).blur(function() {
|
||||
if ($.trim($(this).val()) === value)
|
||||
$(this).addClass(className).val($.data(this, key));
|
||||
}).each(function(index, elem) {
|
||||
if (block)
|
||||
new function(e) {
|
||||
$(e.form).submit(function() {
|
||||
return $.trim($(e).val()) != $.data(e, key)
|
||||
});
|
||||
}(elem);
|
||||
else if (blank)
|
||||
new function(e) {
|
||||
$(e.form).submit(function() {
|
||||
if ($.trim($(e).val()) == $.data(e, key))
|
||||
$(e).removeClass(className).val("");
|
||||
return true;
|
||||
});
|
||||
}(elem);
|
||||
else if (submit)
|
||||
new function(e) { $(e.form).submit(submit); }(elem);
|
||||
});
|
||||
};
|
||||
}(jQuery);
|
||||
162
js/foundation/jquery.customforms.js
Normal file
162
js/foundation/jquery.customforms.js
Normal file
@@ -0,0 +1,162 @@
|
||||
/*
|
||||
* jQuery Custom Forms Plugin 1.0
|
||||
* www.ZURB.com
|
||||
* Copyright 2010, ZURB
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
jQuery(document).ready(function ($) {
|
||||
|
||||
function appendCustomMarkup(type) {
|
||||
$('form.custom input:' + type).each(function () {
|
||||
var $span = $('<span class="custom ' + type + '"></span>');
|
||||
if ($(this).next('span.custom.' + type).length === 0) {
|
||||
if (this.checked) {
|
||||
$span.addClass('checked');
|
||||
}
|
||||
$(this)
|
||||
.hide()
|
||||
.after($span);
|
||||
}
|
||||
});
|
||||
}
|
||||
appendCustomMarkup('checkbox');
|
||||
appendCustomMarkup('radio');
|
||||
|
||||
$('form.custom select').each(function () {
|
||||
var $this = $(this),
|
||||
$customSelect = $this.next('div.custom.dropdown'),
|
||||
$options = $this.find('option'),
|
||||
maxWidth = 0,
|
||||
$li;
|
||||
|
||||
if ($customSelect.length === 0) {
|
||||
$customSelect = $('<div class="custom dropdown"><a href="#" class="selector"></a><ul></ul></div>"');
|
||||
$options.each(function () {
|
||||
$li = $('<li>' + $(this).html() + '</li>');
|
||||
$customSelect.find('ul').append($li);
|
||||
});
|
||||
$customSelect.prepend('<a href="#" class="current">' + $options.first().html() + '</a>');
|
||||
|
||||
$this.after($customSelect);
|
||||
$this.hide();
|
||||
}
|
||||
|
||||
$options.each(function (index) {
|
||||
if (this.selected) {
|
||||
$customSelect.find('li').eq(index).addClass('selected');
|
||||
$customSelect.find('.current').html($(this).html());
|
||||
}
|
||||
});
|
||||
|
||||
$customSelect.find('li').each(function () {
|
||||
$customSelect.addClass('open');
|
||||
if ($(this).outerWidth() > maxWidth) {
|
||||
maxWidth = $(this).outerWidth();
|
||||
}
|
||||
$customSelect.removeClass('open');
|
||||
});
|
||||
$customSelect.css('width', maxWidth + 18 + 'px');
|
||||
$customSelect.find('ul').css('width', maxWidth + 16 + 'px');
|
||||
});
|
||||
});
|
||||
|
||||
(function ($) {
|
||||
|
||||
function toggleCheckbox($element) {
|
||||
var $input = $element.prev(),
|
||||
input = $input[0];
|
||||
|
||||
input.checked = ((input.checked) ? false : true);
|
||||
$element.toggleClass('checked');
|
||||
}
|
||||
|
||||
function toggleRadio($element) {
|
||||
var $input = $element.prev(),
|
||||
input = $input[0];
|
||||
|
||||
$('input:radio[name=' + $input.attr('name') + ']').each(function () {
|
||||
$(this).next().removeClass('checked');
|
||||
});
|
||||
input.checked = ((input.checked) ? false : true);
|
||||
$element.toggleClass('checked');
|
||||
}
|
||||
|
||||
$('form.custom span.custom.checkbox').live('click', function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
toggleCheckbox($(this));
|
||||
});
|
||||
|
||||
$('form.custom span.custom.radio').live('click', function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
toggleRadio($(this));
|
||||
});
|
||||
|
||||
$('form.custom label').live('click', function (event) {
|
||||
var $associatedElement = $('#' + $(this).attr('for')),
|
||||
$customCheckbox,
|
||||
$customRadio;
|
||||
if ($associatedElement.length !== 0) {
|
||||
if ($associatedElement.attr('type') === 'checkbox') {
|
||||
event.preventDefault();
|
||||
$customCheckbox = $(this).find('span.custom.checkbox');
|
||||
toggleCheckbox($customCheckbox);
|
||||
} else if ($associatedElement.attr('type') === 'radio') {
|
||||
event.preventDefault();
|
||||
$customRadio = $(this).find('span.custom.radio');
|
||||
toggleRadio($customRadio);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('form.custom div.custom.dropdown a.current, form.custom div.custom.dropdown a.selector').live('click', function (event) {
|
||||
var $this = $(this),
|
||||
$dropdown = $this.closest('div.custom.dropdown');
|
||||
|
||||
event.preventDefault();
|
||||
$dropdown.toggleClass('open');
|
||||
|
||||
if ($dropdown.hasClass('open')) {
|
||||
$(document).bind('click.customdropdown', function (event) {
|
||||
$dropdown.removeClass('open');
|
||||
$(document).unbind('.customdropdown');
|
||||
});
|
||||
} else {
|
||||
$(document).unbind('.customdropdown');
|
||||
}
|
||||
});
|
||||
|
||||
$('form.custom div.custom.dropdown li').live('click', function (event) {
|
||||
var $this = $(this),
|
||||
$customDropdown = $this.closest('div.custom.dropdown'),
|
||||
$select = $customDropdown.prev(),
|
||||
selectedIndex = 0;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
$this
|
||||
.closest('ul')
|
||||
.find('li')
|
||||
.removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
$customDropdown
|
||||
.removeClass('open')
|
||||
.find('a.current')
|
||||
.html($this.html());
|
||||
|
||||
$this.closest('ul').find('li').each(function (index) {
|
||||
if ($this[0] == this) {
|
||||
selectedIndex = index;
|
||||
}
|
||||
|
||||
});
|
||||
$select[0].selectedIndex = selectedIndex;
|
||||
});
|
||||
})(jQuery);
|
||||
596
js/foundation/jquery.orbit-1.3.0.js
Normal file
596
js/foundation/jquery.orbit-1.3.0.js
Normal file
@@ -0,0 +1,596 @@
|
||||
/*
|
||||
* jQuery Orbit Plugin 1.3.0
|
||||
* www.ZURB.com/playground
|
||||
* Copyright 2010, ZURB
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
|
||||
(function($) {
|
||||
|
||||
var ORBIT = {
|
||||
|
||||
defaults: {
|
||||
animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push, vertical-push
|
||||
animationSpeed: 600, // how fast animtions are
|
||||
timer: true, // true or false to have the timer
|
||||
advanceSpeed: 4000, // if timer is enabled, time between transitions
|
||||
pauseOnHover: false, // if you hover pauses the slider
|
||||
startClockOnMouseOut: false, // if clock should start on MouseOut
|
||||
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
|
||||
directionalNav: true, // manual advancing directional navs
|
||||
captions: true, // do you want captions?
|
||||
captionAnimation: 'fade', // fade, slideOpen, none
|
||||
captionAnimationSpeed: 600, // if so how quickly should they animate in
|
||||
bullets: false, // true or false to activate the bullet navigation
|
||||
bulletThumbs: false, // thumbnails for the bullets
|
||||
bulletThumbLocation: '', // location from this file where thumbs will be
|
||||
afterSlideChange: $.noop, // empty function
|
||||
fluid: true,
|
||||
centerBullets: true // center bullet nav with js, turn this off if you want to position the bullet nav manually
|
||||
},
|
||||
|
||||
activeSlide: 0,
|
||||
numberSlides: 0,
|
||||
orbitWidth: null,
|
||||
orbitHeight: null,
|
||||
locked: null,
|
||||
timerRunning: null,
|
||||
degrees: 0,
|
||||
wrapperHTML: '<div class="orbit-wrapper" />',
|
||||
timerHTML: '<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>',
|
||||
captionHTML: '<div class="orbit-caption"></div>',
|
||||
directionalNavHTML: '<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>',
|
||||
bulletHTML: '<ul class="orbit-bullets"></ul>',
|
||||
|
||||
init: function (element, options) {
|
||||
var $imageSlides,
|
||||
imagesLoadedCount = 0,
|
||||
self = this;
|
||||
|
||||
// Bind functions to correct context
|
||||
this.clickTimer = $.proxy(this.clickTimer, this);
|
||||
this.addBullet = $.proxy(this.addBullet, this);
|
||||
this.resetAndUnlock = $.proxy(this.resetAndUnlock, this);
|
||||
this.stopClock = $.proxy(this.stopClock, this);
|
||||
this.startTimerAfterMouseLeave = $.proxy(this.startTimerAfterMouseLeave, this);
|
||||
this.clearClockMouseLeaveTimer = $.proxy(this.clearClockMouseLeaveTimer, this);
|
||||
this.rotateTimer = $.proxy(this.rotateTimer, this);
|
||||
|
||||
this.options = $.extend({}, this.defaults, options);
|
||||
if (this.options.timer === 'false') this.options.timer = false;
|
||||
if (this.options.captions === 'false') this.options.captions = false;
|
||||
if (this.options.directionalNav === 'false') this.options.directionalNav = false;
|
||||
|
||||
this.$element = $(element);
|
||||
this.$wrapper = this.$element.wrap(this.wrapperHTML).parent();
|
||||
this.$slides = this.$element.children('img, a, div');
|
||||
|
||||
this.$element.bind('orbit.next', function () {
|
||||
self.shift('next');
|
||||
});
|
||||
|
||||
this.$element.bind('orbit.prev', function () {
|
||||
self.shift('prev');
|
||||
});
|
||||
|
||||
this.$element.bind('orbit.goto', function (event, index) {
|
||||
self.shift(index);
|
||||
});
|
||||
|
||||
this.$element.bind('orbit.start', function (event, index) {
|
||||
self.startClock();
|
||||
});
|
||||
|
||||
this.$element.bind('orbit.stop', function (event, index) {
|
||||
self.stopClock();
|
||||
});
|
||||
|
||||
$imageSlides = this.$slides.filter('img');
|
||||
|
||||
if ($imageSlides.length === 0) {
|
||||
this.loaded();
|
||||
} else {
|
||||
$imageSlides.bind('imageready', function () {
|
||||
imagesLoadedCount += 1;
|
||||
if (imagesLoadedCount === $imageSlides.length) {
|
||||
self.loaded();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
loaded: function () {
|
||||
this.$element
|
||||
.addClass('orbit')
|
||||
.css({width: '1px', height: '1px'});
|
||||
|
||||
this.setDimentionsFromLargestSlide();
|
||||
this.updateOptionsIfOnlyOneSlide();
|
||||
this.setupFirstSlide();
|
||||
|
||||
if (this.options.timer) {
|
||||
this.setupTimer();
|
||||
this.startClock();
|
||||
}
|
||||
|
||||
if (this.options.captions) {
|
||||
this.setupCaptions();
|
||||
}
|
||||
|
||||
if (this.options.directionalNav) {
|
||||
this.setupDirectionalNav();
|
||||
}
|
||||
|
||||
if (this.options.bullets) {
|
||||
this.setupBulletNav();
|
||||
this.setActiveBullet();
|
||||
}
|
||||
},
|
||||
|
||||
currentSlide: function () {
|
||||
return this.$slides.eq(this.activeSlide);
|
||||
},
|
||||
|
||||
setDimentionsFromLargestSlide: function () {
|
||||
//Collect all slides and set slider size of largest image
|
||||
var self = this,
|
||||
$fluidPlaceholder;
|
||||
|
||||
self.$element.add(self.$wrapper).width(this.$slides.first().width());
|
||||
self.$element.add(self.$wrapper).height(this.$slides.first().height());
|
||||
self.orbitWidth = this.$slides.first().width();
|
||||
self.orbitHeight = this.$slides.first().height();
|
||||
$fluidPlaceholder = this.$slides.first().clone();
|
||||
|
||||
this.$slides.each(function () {
|
||||
var slide = $(this),
|
||||
slideWidth = slide.width(),
|
||||
slideHeight = slide.height();
|
||||
|
||||
if (slideWidth > self.$element.width()) {
|
||||
self.$element.add(self.$wrapper).width(slideWidth);
|
||||
self.orbitWidth = self.$element.width();
|
||||
}
|
||||
if (slideHeight > self.$element.height()) {
|
||||
self.$element.add(self.$wrapper).height(slideHeight);
|
||||
self.orbitHeight = self.$element.height();
|
||||
$fluidPlaceholder = $(this).clone();
|
||||
}
|
||||
self.numberSlides += 1;
|
||||
});
|
||||
|
||||
if (this.options.fluid) {
|
||||
if (typeof this.options.fluid === "string") {
|
||||
$fluidPlaceholder = $('<img src="http://placehold.it/' + this.options.fluid + '" />')
|
||||
}
|
||||
|
||||
self.$element.prepend($fluidPlaceholder);
|
||||
$fluidPlaceholder.addClass('fluid-placeholder');
|
||||
self.$element.add(self.$wrapper).css({width: 'inherit'});
|
||||
self.$element.add(self.$wrapper).css({height: 'inherit'});
|
||||
|
||||
$(window).bind('resize', function () {
|
||||
self.orbitWidth = self.$element.width();
|
||||
self.orbitHeight = self.$element.height();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
//Animation locking functions
|
||||
lock: function () {
|
||||
this.locked = true;
|
||||
},
|
||||
|
||||
unlock: function () {
|
||||
this.locked = false;
|
||||
},
|
||||
|
||||
updateOptionsIfOnlyOneSlide: function () {
|
||||
if(this.$slides.length === 1) {
|
||||
this.options.directionalNav = false;
|
||||
this.options.timer = false;
|
||||
this.options.bullets = false;
|
||||
}
|
||||
},
|
||||
|
||||
setupFirstSlide: function () {
|
||||
//Set initial front photo z-index and fades it in
|
||||
var self = this;
|
||||
this.$slides.first()
|
||||
.css({"z-index" : 3})
|
||||
.fadeIn(function() {
|
||||
//brings in all other slides IF css declares a display: none
|
||||
self.$slides.css({"display":"block"})
|
||||
});
|
||||
},
|
||||
|
||||
startClock: function () {
|
||||
var self = this;
|
||||
|
||||
if(!this.options.timer) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.$timer.is(':hidden')) {
|
||||
this.clock = setInterval(function () {
|
||||
this.$element.trigger('orbit.next');
|
||||
}, this.options.advanceSpeed);
|
||||
} else {
|
||||
this.timerRunning = true;
|
||||
this.$pause.removeClass('active')
|
||||
this.clock = setInterval(this.rotateTimer, this.options.advanceSpeed / 180);
|
||||
}
|
||||
},
|
||||
|
||||
rotateTimer: function () {
|
||||
var degreeCSS = "rotate(" + this.degrees + "deg)"
|
||||
this.degrees += 2;
|
||||
this.$rotator.css({
|
||||
"-webkit-transform": degreeCSS,
|
||||
"-moz-transform": degreeCSS,
|
||||
"-o-transform": degreeCSS
|
||||
});
|
||||
if(this.degrees > 180) {
|
||||
this.$rotator.addClass('move');
|
||||
this.$mask.addClass('move');
|
||||
}
|
||||
if(this.degrees > 360) {
|
||||
this.$rotator.removeClass('move');
|
||||
this.$mask.removeClass('move');
|
||||
this.degrees = 0;
|
||||
this.$element.trigger('orbit.next');
|
||||
}
|
||||
},
|
||||
|
||||
stopClock: function () {
|
||||
if (!this.options.timer) {
|
||||
return false;
|
||||
} else {
|
||||
this.timerRunning = false;
|
||||
clearInterval(this.clock);
|
||||
this.$pause.addClass('active');
|
||||
}
|
||||
},
|
||||
|
||||
setupTimer: function () {
|
||||
this.$timer = $(this.timerHTML);
|
||||
this.$wrapper.append(this.$timer);
|
||||
|
||||
this.$rotator = this.$timer.find('.rotator');
|
||||
this.$mask = this.$timer.find('.mask');
|
||||
this.$pause = this.$timer.find('.pause');
|
||||
|
||||
this.$timer.click(this.clickTimer);
|
||||
|
||||
if (this.options.startClockOnMouseOut) {
|
||||
this.$wrapper.mouseleave(this.startTimerAfterMouseLeave);
|
||||
this.$wrapper.mouseenter(this.clearClockMouseLeaveTimer);
|
||||
}
|
||||
|
||||
if (this.options.pauseOnHover) {
|
||||
this.$wrapper.mouseenter(this.stopClock);
|
||||
}
|
||||
},
|
||||
|
||||
startTimerAfterMouseLeave: function () {
|
||||
var self = this;
|
||||
|
||||
this.outTimer = setTimeout(function() {
|
||||
if(!self.timerRunning){
|
||||
self.startClock();
|
||||
}
|
||||
}, this.options.startClockOnMouseOutAfter)
|
||||
},
|
||||
|
||||
clearClockMouseLeaveTimer: function () {
|
||||
clearTimeout(this.outTimer);
|
||||
},
|
||||
|
||||
clickTimer: function () {
|
||||
if(!this.timerRunning) {
|
||||
this.startClock();
|
||||
} else {
|
||||
this.stopClock();
|
||||
}
|
||||
},
|
||||
|
||||
setupCaptions: function () {
|
||||
this.$caption = $(this.captionHTML);
|
||||
this.$wrapper.append(this.$caption);
|
||||
this.setCaption();
|
||||
},
|
||||
|
||||
setCaption: function () {
|
||||
var captionLocation = this.currentSlide().attr('data-caption'),
|
||||
captionHTML;
|
||||
|
||||
if (!this.options.captions) {
|
||||
return false;
|
||||
}
|
||||
|
||||
//Set HTML for the caption if it exists
|
||||
if (captionLocation) {
|
||||
captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
|
||||
this.$caption
|
||||
.attr('id', captionLocation) // Add ID caption TODO why is the id being set?
|
||||
.html(captionHTML); // Change HTML in Caption
|
||||
//Animations for Caption entrances
|
||||
switch (this.options.captionAnimation) {
|
||||
case 'none':
|
||||
this.$caption.show();
|
||||
break;
|
||||
case 'fade':
|
||||
this.$caption.fadeIn(this.options.captionAnimationSpeed);
|
||||
break;
|
||||
case 'slideOpen':
|
||||
this.$caption.slideDown(this.options.captionAnimationSpeed);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
//Animations for Caption exits
|
||||
switch (this.options.captionAnimation) {
|
||||
case 'none':
|
||||
this.$caption.hide();
|
||||
break;
|
||||
case 'fade':
|
||||
this.$caption.fadeOut(this.options.captionAnimationSpeed);
|
||||
break;
|
||||
case 'slideOpen':
|
||||
this.$caption.slideUp(this.options.captionAnimationSpeed);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setupDirectionalNav: function () {
|
||||
var self = this;
|
||||
|
||||
this.$wrapper.append(this.directionalNavHTML);
|
||||
|
||||
this.$wrapper.find('.left').click(function () {
|
||||
self.stopClock();
|
||||
self.$element.trigger('orbit.prev');
|
||||
});
|
||||
|
||||
this.$wrapper.find('.right').click(function () {
|
||||
self.stopClock();
|
||||
self.$element.trigger('orbit.next');
|
||||
});
|
||||
},
|
||||
|
||||
setupBulletNav: function () {
|
||||
this.$bullets = $(this.bulletHTML);
|
||||
this.$wrapper.append(this.$bullets);
|
||||
this.$slides.each(this.addBullet);
|
||||
if (this.options.centerBullets) this.$bullets.css('margin-left', -this.$bullets.width() / 2);
|
||||
},
|
||||
|
||||
addBullet: function (index, slide) {
|
||||
var position = index + 1,
|
||||
$li = $('<li>' + (position) + '</li>'),
|
||||
thumbName,
|
||||
self = this;
|
||||
|
||||
if (this.options.bulletThumbs) {
|
||||
thumbName = $(slide).attr('data-thumb');
|
||||
if (thumbName) {
|
||||
$li
|
||||
.addClass('has-thumb')
|
||||
.css({background: "url(" + this.options.bulletThumbLocation + thumbName + ") no-repeat"});;
|
||||
}
|
||||
}
|
||||
this.$bullets.append($li);
|
||||
$li.data('index', index);
|
||||
$li.click(function () {
|
||||
self.stopClock();
|
||||
self.$element.trigger('orbit.goto', [$li.data('index')])
|
||||
});
|
||||
},
|
||||
|
||||
setActiveBullet: function () {
|
||||
if(!this.options.bullets) { return false; } else {
|
||||
this.$bullets.find('li')
|
||||
.removeClass('active')
|
||||
.eq(this.activeSlide)
|
||||
.addClass('active');
|
||||
}
|
||||
},
|
||||
|
||||
resetAndUnlock: function () {
|
||||
this.$slides
|
||||
.eq(this.prevActiveSlide)
|
||||
.css({"z-index" : 1});
|
||||
this.unlock();
|
||||
this.options.afterSlideChange.call(this, this.$slides.eq(this.prevActiveSlide), this.$slides.eq(this.activeSlide));
|
||||
},
|
||||
|
||||
shift: function (direction) {
|
||||
var slideDirection = direction;
|
||||
|
||||
//remember previous activeSlide
|
||||
this.prevActiveSlide = this.activeSlide;
|
||||
|
||||
//exit function if bullet clicked is same as the current image
|
||||
if (this.prevActiveSlide == slideDirection) { return false; }
|
||||
|
||||
if (this.$slides.length == "1") { return false; }
|
||||
if (!this.locked) {
|
||||
this.lock();
|
||||
//deduce the proper activeImage
|
||||
if (direction == "next") {
|
||||
this.activeSlide++;
|
||||
if (this.activeSlide == this.numberSlides) {
|
||||
this.activeSlide = 0;
|
||||
}
|
||||
} else if (direction == "prev") {
|
||||
this.activeSlide--
|
||||
if (this.activeSlide < 0) {
|
||||
this.activeSlide = this.numberSlides - 1;
|
||||
}
|
||||
} else {
|
||||
this.activeSlide = direction;
|
||||
if (this.prevActiveSlide < this.activeSlide) {
|
||||
slideDirection = "next";
|
||||
} else if (this.prevActiveSlide > this.activeSlide) {
|
||||
slideDirection = "prev"
|
||||
}
|
||||
}
|
||||
|
||||
//set to correct bullet
|
||||
this.setActiveBullet();
|
||||
|
||||
//set previous slide z-index to one below what new activeSlide will be
|
||||
this.$slides
|
||||
.eq(this.prevActiveSlide)
|
||||
.css({"z-index" : 2});
|
||||
|
||||
//fade
|
||||
if (this.options.animation == "fade") {
|
||||
this.$slides
|
||||
.eq(this.activeSlide)
|
||||
.css({"opacity" : 0, "z-index" : 3})
|
||||
.animate({"opacity" : 1}, this.options.animationSpeed, this.resetAndUnlock);
|
||||
}
|
||||
|
||||
//horizontal-slide
|
||||
if (this.options.animation == "horizontal-slide") {
|
||||
if (slideDirection == "next") {
|
||||
this.$slides
|
||||
.eq(this.activeSlide)
|
||||
.css({"left": this.orbitWidth, "z-index" : 3})
|
||||
.animate({"left" : 0}, this.options.animationSpeed, this.resetAndUnlock);
|
||||
}
|
||||
if (slideDirection == "prev") {
|
||||
this.$slides
|
||||
.eq(this.activeSlide)
|
||||
.css({"left": -this.orbitWidth, "z-index" : 3})
|
||||
.animate({"left" : 0}, this.options.animationSpeed, this.resetAndUnlock);
|
||||
}
|
||||
}
|
||||
|
||||
//vertical-slide
|
||||
if (this.options.animation == "vertical-slide") {
|
||||
if (slideDirection == "prev") {
|
||||
this.$slides
|
||||
.eq(this.activeSlide)
|
||||
.css({"top": this.orbitHeight, "z-index" : 3})
|
||||
.animate({"top" : 0}, this.options.animationSpeed, this.resetAndUnlock);
|
||||
}
|
||||
if (slideDirection == "next") {
|
||||
this.$slides
|
||||
.eq(this.activeSlide)
|
||||
.css({"top": -this.orbitHeight, "z-index" : 3})
|
||||
.animate({"top" : 0}, this.options.animationSpeed, this.resetAndUnlock);
|
||||
}
|
||||
}
|
||||
|
||||
//horizontal-push
|
||||
if (this.options.animation == "horizontal-push") {
|
||||
if (slideDirection == "next") {
|
||||
this.$slides
|
||||
.eq(this.activeSlide)
|
||||
.css({"left": this.orbitWidth, "z-index" : 3})
|
||||
.animate({"left" : 0}, this.options.animationSpeed, this.resetAndUnlock);
|
||||
this.$slides
|
||||
.eq(this.prevActiveSlide)
|
||||
.animate({"left" : -this.orbitWidth}, this.options.animationSpeed);
|
||||
}
|
||||
if (slideDirection == "prev") {
|
||||
this.$slides
|
||||
.eq(this.activeSlide)
|
||||
.css({"left": -this.orbitWidth, "z-index" : 3})
|
||||
.animate({"left" : 0}, this.options.animationSpeed, this.resetAndUnlock);
|
||||
this.$slides
|
||||
.eq(this.prevActiveSlide)
|
||||
.animate({"left" : this.orbitWidth}, this.options.animationSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
//vertical-push
|
||||
if (this.options.animation == "vertical-push") {
|
||||
if (slideDirection == "next") {
|
||||
this.$slides
|
||||
.eq(this.activeSlide)
|
||||
.css({top: -this.orbitHeight, "z-index" : 3})
|
||||
.animate({top : 0}, this.options.animationSpeed, this.resetAndUnlock);
|
||||
this.$slides
|
||||
.eq(this.prevActiveSlide)
|
||||
.animate({top : this.orbitHeight}, this.options.animationSpeed);
|
||||
}
|
||||
if (slideDirection == "prev") {
|
||||
this.$slides
|
||||
.eq(this.activeSlide)
|
||||
.css({top: this.orbitHeight, "z-index" : 3})
|
||||
.animate({top : 0}, this.options.animationSpeed, this.resetAndUnlock);
|
||||
this.$slides
|
||||
.eq(this.prevActiveSlide)
|
||||
.animate({top : -this.orbitHeight}, this.options.animationSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
this.setCaption();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.orbit = function (options) {
|
||||
return this.each(function () {
|
||||
var orbit = $.extend({}, ORBIT);
|
||||
orbit.init(this, options);
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
||||
/*!
|
||||
* jQuery imageready Plugin
|
||||
* http://www.zurb.com/playground/
|
||||
*
|
||||
* Copyright 2011, ZURB
|
||||
* Released under the MIT License
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
var options = {};
|
||||
|
||||
$.event.special.imageready = {
|
||||
|
||||
setup: function (data, namespaces, eventHandle) {
|
||||
options = data || options;
|
||||
},
|
||||
|
||||
add: function (handleObj) {
|
||||
var $this = $(this),
|
||||
src;
|
||||
|
||||
if ( this.nodeType === 1 && this.tagName.toLowerCase() === 'img' && this.src !== '' ) {
|
||||
if (options.forceLoad) {
|
||||
src = $this.attr('src');
|
||||
$this.attr('src', '');
|
||||
bindToLoad(this, handleObj.handler);
|
||||
$this.attr('src', src);
|
||||
} else if ( this.complete || this.readyState === 4 ) {
|
||||
handleObj.handler.apply(this, arguments);
|
||||
} else {
|
||||
bindToLoad(this, handleObj.handler);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
teardown: function (namespaces) {
|
||||
$(this).unbind('.imageready');
|
||||
}
|
||||
};
|
||||
|
||||
function bindToLoad(element, callback) {
|
||||
var $this = $(element);
|
||||
|
||||
$this.bind('load.imageready', function () {
|
||||
callback.apply(element, arguments);
|
||||
$this.unbind('load.imageready');
|
||||
});
|
||||
}
|
||||
|
||||
}(jQuery));
|
||||
2
js/foundation/jquery.placeholder.min.js
vendored
Normal file
2
js/foundation/jquery.placeholder.min.js
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/*! http://mths.be/placeholder v1.8.5 by @mathias */
|
||||
(function(g,a,$){var f='placeholder' in a.createElement('input'),b='placeholder' in a.createElement('textarea');if(f&&b){$.fn.placeholder=function(){return this};$.fn.placeholder.input=$.fn.placeholder.textarea=true}else{$.fn.placeholder=function(){return this.filter((f?'textarea':':input')+'[placeholder]').bind('focus.placeholder',c).bind('blur.placeholder',e).trigger('blur.placeholder').end()};$.fn.placeholder.input=f;$.fn.placeholder.textarea=b;$(function(){$('form').bind('submit.placeholder',function(){var h=$('.placeholder',this).each(c);setTimeout(function(){h.each(e)},10)})});$(g).bind('unload.placeholder',function(){$('.placeholder').val('')})}function d(i){var h={},j=/^jQuery\d+$/;$.each(i.attributes,function(l,k){if(k.specified&&!j.test(k.name)){h[k.name]=k.value}});return h}function c(){var h=$(this);if(h.val()===h.attr('placeholder')&&h.hasClass('placeholder')){if(h.data('placeholder-password')){h.hide().next().show().focus().attr('id',h.removeAttr('id').data('placeholder-id'))}else{h.val('').removeClass('placeholder')}}}function e(){var l,k=$(this),h=k,j=this.id;if(k.val()===''){if(k.is(':password')){if(!k.data('placeholder-textinput')){try{l=k.clone().attr({type:'text'})}catch(i){l=$('<input>').attr($.extend(d(this),{type:'text'}))}l.removeAttr('name').data('placeholder-password',true).data('placeholder-id',j).bind('focus.placeholder',c);k.data('placeholder-textinput',l).data('placeholder-id',j).before(l)}k=k.removeAttr('id').hide().prev().attr('id',j).show()}k.addClass('placeholder').val(k.attr('placeholder'))}else{k.removeClass('placeholder')}}}(this,document,jQuery));
|
||||
150
js/foundation/jquery.reveal.js
Normal file
150
js/foundation/jquery.reveal.js
Normal file
@@ -0,0 +1,150 @@
|
||||
/*
|
||||
* jQuery Reveal Plugin 1.0
|
||||
* www.ZURB.com
|
||||
* Copyright 2010, ZURB
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
|
||||
(function($) {
|
||||
|
||||
/*---------------------------
|
||||
Defaults for Reveal
|
||||
----------------------------*/
|
||||
|
||||
/*---------------------------
|
||||
Listener for data-reveal-id attributes
|
||||
----------------------------*/
|
||||
|
||||
$('a[data-reveal-id]').live('click', function(e) {
|
||||
e.preventDefault();
|
||||
var modalLocation = $(this).attr('data-reveal-id');
|
||||
$('#'+modalLocation).reveal($(this).data());
|
||||
});
|
||||
|
||||
/*---------------------------
|
||||
Extend and Execute
|
||||
----------------------------*/
|
||||
|
||||
$.fn.reveal = function(options) {
|
||||
|
||||
|
||||
var defaults = {
|
||||
animation: 'fadeAndPop', //fade, fadeAndPop, none
|
||||
animationspeed: 300, //how fast animtions are
|
||||
closeonbackgroundclick: true, //if you click background will modal close?
|
||||
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
|
||||
};
|
||||
|
||||
//Extend dem' options
|
||||
var options = $.extend({}, defaults, options);
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
/*---------------------------
|
||||
Global Variables
|
||||
----------------------------*/
|
||||
var modal = $(this),
|
||||
topMeasure = parseInt(modal.css('top')),
|
||||
topOffset = modal.height() + topMeasure,
|
||||
locked = false,
|
||||
modalBG = $('.reveal-modal-bg');
|
||||
|
||||
/*---------------------------
|
||||
Create Modal BG
|
||||
----------------------------*/
|
||||
if(modalBG.length == 0) {
|
||||
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
|
||||
}
|
||||
|
||||
/*---------------------------
|
||||
Open and add Closing Listeners
|
||||
----------------------------*/
|
||||
//Open Modal Immediately
|
||||
openModal();
|
||||
|
||||
//Close Modal Listeners
|
||||
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent',closeModal)
|
||||
if(options.closeonbackgroundclick) {
|
||||
modalBG.css({"cursor":"pointer"})
|
||||
modalBG.bind('click.modalEvent',closeModal)
|
||||
}
|
||||
|
||||
|
||||
/*---------------------------
|
||||
Open & Close Animations
|
||||
----------------------------*/
|
||||
//Entrance Animations
|
||||
function openModal() {
|
||||
modalBG.unbind('click.modalEvent');
|
||||
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
|
||||
if(!locked) {
|
||||
lockModal();
|
||||
if(options.animation == "fadeAndPop") {
|
||||
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
|
||||
modalBG.fadeIn(options.animationspeed/2);
|
||||
modal.delay(options.animationspeed/2).animate({
|
||||
"top": $(document).scrollTop()+topMeasure,
|
||||
"opacity" : 1
|
||||
}, options.animationspeed,unlockModal());
|
||||
}
|
||||
if(options.animation == "fade") {
|
||||
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
|
||||
modalBG.fadeIn(options.animationspeed/2);
|
||||
modal.delay(options.animationspeed/2).animate({
|
||||
"opacity" : 1
|
||||
}, options.animationspeed,unlockModal());
|
||||
}
|
||||
if(options.animation == "none") {
|
||||
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
|
||||
modalBG.css({"display":"block"});
|
||||
unlockModal()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Closing Animation
|
||||
function closeModal() {
|
||||
if(!locked) {
|
||||
lockModal();
|
||||
if(options.animation == "fadeAndPop") {
|
||||
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
|
||||
modal.animate({
|
||||
"top": $(document).scrollTop()-topOffset,
|
||||
"opacity" : 0
|
||||
}, options.animationspeed/2, function() {
|
||||
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
|
||||
unlockModal();
|
||||
});
|
||||
}
|
||||
if(options.animation == "fade") {
|
||||
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
|
||||
modal.animate({
|
||||
"opacity" : 0
|
||||
}, options.animationspeed, function() {
|
||||
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
|
||||
unlockModal();
|
||||
});
|
||||
}
|
||||
if(options.animation == "none") {
|
||||
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
|
||||
modalBG.css({'display' : 'none'});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------------------
|
||||
Animations Locks
|
||||
----------------------------*/
|
||||
function unlockModal() {
|
||||
locked = false;
|
||||
}
|
||||
function lockModal() {
|
||||
locked = true;
|
||||
}
|
||||
|
||||
});//each call
|
||||
}//orbit plugin call
|
||||
})(jQuery);
|
||||
|
||||
Reference in New Issue
Block a user