mirror of https://github.com/kidoman/embd
initial commit
This commit is contained in:
Karan Misra
commit
b3bad4e383
|
|
@ -0,0 +1,4 @@
|
|||
.bundle
|
||||
.sass-cache
|
||||
vendor/bundle
|
||||
bin
|
||||
|
|
@ -0,0 +1 @@
|
|||
ruby-2.1.1
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
source "https://rubygems.org"
|
||||
|
||||
gem "compass"
|
||||
gem "modular-scale"
|
||||
gem "sass"
|
||||
|
||||
gem "s3_website"
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
aws-sdk (1.38.0)
|
||||
json (~> 1.4)
|
||||
nokogiri (>= 1.4.4)
|
||||
uuidtools (~> 2.1)
|
||||
chunky_png (1.3.0)
|
||||
colored (1.2)
|
||||
compass (0.12.4)
|
||||
chunky_png (~> 1.2)
|
||||
fssm (>= 0.2.7)
|
||||
sass (~> 3.2.17)
|
||||
configure-s3-website (1.5.3)
|
||||
deep_merge (= 1.0.0)
|
||||
deep_merge (1.0.0)
|
||||
erubis (2.7.0)
|
||||
filey-diff (1.4.3)
|
||||
fssm (0.2.10)
|
||||
json (1.8.1)
|
||||
mime-types (1.25.1)
|
||||
mini_portile (0.5.3)
|
||||
modular-scale (2.0.4)
|
||||
compass (>= 0.12.0)
|
||||
nokogiri (1.6.1)
|
||||
mini_portile (~> 0.5.0)
|
||||
s3_website (1.7.1)
|
||||
aws-sdk (~> 1)
|
||||
configure-s3-website (= 1.5.3)
|
||||
erubis (~> 2.7.0)
|
||||
filey-diff (~> 1.4.3)
|
||||
mime-types (~> 1)
|
||||
simple-cloudfront-invalidator (~> 1)
|
||||
thor (= 0.18.1)
|
||||
zopfli (~> 0.0.3)
|
||||
sass (3.2.18)
|
||||
simple-cloudfront-invalidator (1.0.1)
|
||||
colored (= 1.2)
|
||||
thor (0.18.1)
|
||||
uuidtools (2.1.4)
|
||||
zopfli (0.0.3)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
compass
|
||||
modular-scale
|
||||
s3_website
|
||||
sass
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "gumby",
|
||||
"version": "2.6.3",
|
||||
"main": [
|
||||
"./js/libs/gumby.min.js",
|
||||
"./css/gumby.css"
|
||||
],
|
||||
"homepage": "https://github.com/GumbyFramework/Gumby",
|
||||
"_release": "2.6.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "2.6.3",
|
||||
"commit": "1f33931f7ea2b58a45e6aadd19985c6a0174b341"
|
||||
},
|
||||
"_source": "git://github.com/GumbyFramework/Gumby.git",
|
||||
"_target": "~2.6.3"
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
# Numerous always-ignore extensions
|
||||
*.bak
|
||||
*.diff
|
||||
*.err
|
||||
*.orig
|
||||
*.log
|
||||
*.rej
|
||||
*.swo
|
||||
*.swp
|
||||
*.vi
|
||||
.sass-cache
|
||||
|
||||
# OS or Editor folders
|
||||
.DS_Store
|
||||
._*
|
||||
Thumbs.db
|
||||
.cache
|
||||
.project
|
||||
.settings
|
||||
.tmproj
|
||||
nbproject
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
|
||||
# Dreamweaver added files
|
||||
_notes
|
||||
dwsync.xml
|
||||
|
||||
# Komodo
|
||||
*.komodoproject
|
||||
.komodotools
|
||||
|
||||
# Espresso
|
||||
*.esproj
|
||||
*.espressostorage
|
||||
|
||||
# Rubinius
|
||||
*.rbc
|
||||
|
||||
# Folders to ignore
|
||||
.hg
|
||||
.svn
|
||||
.CVS
|
||||
.idea
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
js/libs/*.min.js
|
||||
js/*.min.js
|
||||
*.min.js
|
||||
js/plugins.js
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"evil": false, // Make sure to warn about eval
|
||||
"regexdash": true,
|
||||
"browser": true,
|
||||
"jquery": true,
|
||||
"trailing": false,
|
||||
"sub": true,
|
||||
"multistr": true,
|
||||
"expr": true
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- '0.10'
|
||||
before_install:
|
||||
- npm install -g jshint
|
||||
- gem install sass compass modular-scale
|
||||
script:
|
||||
- jshint .
|
||||
- compass compile
|
||||
notifications:
|
||||
email:
|
||||
recipients:
|
||||
- secure: NYyWrnOzCZC5VrrZiVaBt1BMb3LAvDb/v0gtXnZyXJz4D8kpV4D+FMDcpc44cId5hx2NMfvv26bIKtCj9N8PHBgM2rlztH8rhlI5uC2d2WK4tl2+Do1NCp/MbJKkhDiRDQGukEf+QBoKv/f/xsbuJIHTvPfwNbpiqw1iwGKxzoo=
|
||||
campfire:
|
||||
secure: KMTupKSaR1ThG0rW8RpsXcyVCTPfFKvNhU/TJh1QwVx9mPEfU8oeYh65gSiw5IUYy65yL0cB3jAmzJt6pCpujKj/vdy3l6fq4WAzvVLuPOoGK2QYnAPrB3y3CkDH/rG/tfaktyhJ6DntEHqnwJ+GvTU5M5StPHaL1YnweU87FUE=
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
Gumby Framework [](https://travis-ci.org/GumbyFramework/Gumby)
|
||||
=====================
|
||||
|
||||
Gumby Framework is a flexible, responsive CSS Framework, Powered by SASS. Create rapid and logical page layout and app
|
||||
prototypes with a flexible and responsive grid system and UI kit.
|
||||
|
||||
Full documentation can be found at [http://gumbyframework.com](http://gumbyframework.com/docs).
|
||||
|
||||
More information, including our changelog, can be found in the [Wiki](https://github.com/GumbyFramework/Gumby/wiki).
|
||||
|
||||
Our [Google Plus Community](https://plus.google.com/u/0/communities/108760896951473344451) is rapidly growing, we recommend heading over there with any questions you may have or to geek out and discuss the framework and rwd in general.
|
||||
|
||||
Gumby is developed with love by your friends at [Digital Surgeons](http://www.digitalsurgeons.com).
|
||||
|
||||
Gumby has a few dependencies. Big thank you to the innovative geniuses behind these awesome technologies.
|
||||
|
||||
- [Sass](https://github.com/nex3/sass) - Nathan Weizenbaum
|
||||
- [Compass](https://github.com/chriseppstein/compass) - Chris Eppstein
|
||||
- [Modular Scale](https://github.com/Team-Sass/modular-scale) - Scott Kellum *Note: Please use modular scale 1.0.6, 2.x has not been integrated yet*
|
||||
- [FitText](http://fittextjs.com/) - Paravel
|
||||
- [jQuery](http://jquery.com/)
|
||||
- [Modernizr](http://modernizr.com/)
|
||||
|
||||
**MIT Open Source 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.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"name": "gumby",
|
||||
"version": "2.6.3",
|
||||
"main": ["./js/libs/gumby.min.js", "./css/gumby.css"]
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "gumbyframework/gumby",
|
||||
"description": "A Flexible, Responsive CSS Framework - Powered by Sass",
|
||||
"keywords": ["gumby", "gumby2", "css", "sass"],
|
||||
"homepage": "http://gumbyframework.com/",
|
||||
"license": "MIT",
|
||||
"authors" : [
|
||||
{
|
||||
"name": "Digital Surgeons",
|
||||
"email": "gumby@digitalsurgeons.com",
|
||||
"homepage": "http://www.digitalsurgeons.com"
|
||||
}
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/GumbyFramework/Gumby/issues",
|
||||
"source": "https://github.com/GumbyFramework/Gumby",
|
||||
"forum": "https://plus.google.com/u/0/communities/108760896951473344451"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
# Require any additional compass plugins here.
|
||||
|
||||
# Tell compass where to find local extensions
|
||||
# If you followed directions and ran 'gem install modular-scale' comment the next two lines out:
|
||||
extensions_dir = "sass/extensions"
|
||||
|
||||
Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))
|
||||
|
||||
# Uncomment these to use regular Ruby gems.
|
||||
# require 'modular-scale'
|
||||
# require 'sassy-math'
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "css"
|
||||
sass_dir = "sass"
|
||||
images_dir = "img"
|
||||
|
||||
# You can select your preferred output style here (can be overridden via the command line) :nested or :expanded or :compact or :compressed:
|
||||
output_style = :compact
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
|
||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||
line_comments = false
|
||||
|
||||
|
||||
# If you prefer the indented syntax, you might want to regenerate this
|
||||
# project again passing --syntax sass, or you can uncomment this:
|
||||
# preferred_syntax = :sass
|
||||
# and then run:
|
||||
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,4 @@
|
|||
/*
|
||||
We highly recommend you use SASS and write your custom styles in sass/_custom.scss.
|
||||
However, this blank file is available if you prefer
|
||||
*/
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,47 @@
|
|||
/* TEAM */
|
||||
|
||||
Digital Surgeons
|
||||
Twitter: @digitalsurgeons
|
||||
Twitter: @gumbycss
|
||||
Web: www.digitalsurgeons.com
|
||||
Web: www.gumbyframework.com
|
||||
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,:~~~====~,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,=================+,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,:==================,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,+=================:,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,==================:,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,~=================~,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,~=================~,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,=================~,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,==================,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,==================,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,==================,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,==================,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,==================,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,~==============:,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,==========:,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,:~=========:,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,:================,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,:=====================,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,=======================,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,=======================:,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,=======================~,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,=~====================~,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,=~~~~~~~~~~~~~~~~~~~~~=,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,~~==~~~~~~~~~~~~~~=====,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,=~~~~~~~~~~~~~~~~~~~~~,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,=~~~~~~~~~~~~~~~~~~~~~,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,~~~~~~~~~~~~~~~~~~~~,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,~~~~~~~~~~~~~~~~:,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,~~~~~~~~~~~~~:,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,~~~~~~~~,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,~~~~:,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,..
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,....
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,.....
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
|
|
@ -0,0 +1,123 @@
|
|||
<!doctype html>
|
||||
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
||||
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
|
||||
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
|
||||
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
|
||||
<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
|
||||
More info: h5bp.com/b/378 -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
|
||||
<title>Gumby - A Flexible, Responsive CSS Framework - Powered by SASS</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="author" content="humans.txt">
|
||||
|
||||
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
|
||||
|
||||
<!-- Facebook Metadata /-->
|
||||
<meta property="fb:page_id" content="" />
|
||||
<meta property="og:image" content="" />
|
||||
<meta property="og:description" content=""/>
|
||||
<meta property="og:title" content=""/>
|
||||
|
||||
<!-- Google+ Metadata /-->
|
||||
<meta itemprop="name" content="">
|
||||
<meta itemprop="description" content="">
|
||||
<meta itemprop="image" content="">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
|
||||
|
||||
<!-- We highly recommend you use SASS and write your custom styles in sass/_custom.scss.
|
||||
However, there is a blank style.css in the css directory should you prefer -->
|
||||
<link rel="stylesheet" href="css/gumby.css">
|
||||
<!-- <link rel="stylesheet" href="css/style.css"> -->
|
||||
|
||||
<script src="js/libs/modernizr-2.6.2.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Grab Google CDN's jQuery, fall back to local if offline -->
|
||||
<!-- 2.0 for modern browsers, 1.10 for .oldie -->
|
||||
<script>
|
||||
var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
|
||||
if(!oldieCheck) {
|
||||
document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');
|
||||
} else {
|
||||
document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
if(!window.jQuery) {
|
||||
if(!oldieCheck) {
|
||||
document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
|
||||
} else {
|
||||
document.write('<script src="js/libs/jquery-1.10.1.min.js"><\/script>');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Include gumby.js followed by UI modules followed by gumby.init.js
|
||||
Or concatenate and minify into a single file -->
|
||||
<script gumby-touch="js/libs" src="js/libs/gumby.js"></script>
|
||||
<script src="js/libs/ui/gumby.retina.js"></script>
|
||||
<script src="js/libs/ui/gumby.fixed.js"></script>
|
||||
<script src="js/libs/ui/gumby.skiplink.js"></script>
|
||||
<script src="js/libs/ui/gumby.toggleswitch.js"></script>
|
||||
<script src="js/libs/ui/gumby.checkbox.js"></script>
|
||||
<script src="js/libs/ui/gumby.radiobtn.js"></script>
|
||||
<script src="js/libs/ui/gumby.tabs.js"></script>
|
||||
<script src="js/libs/ui/gumby.navbar.js"></script>
|
||||
<script src="js/libs/ui/jquery.validation.js"></script>
|
||||
<script src="js/libs/gumby.init.js"></script>
|
||||
|
||||
<!--
|
||||
Google's recommended deferred loading of JS
|
||||
gumby.min.js contains gumby.js, all UI modules and gumby.init.js
|
||||
|
||||
Note: If you opt to use this method of defered loading,
|
||||
ensure that any javascript essential to the initial
|
||||
display of the page is included separately in a normal
|
||||
script tag.
|
||||
|
||||
<script type="text/javascript">
|
||||
function downloadJSAtOnload() {
|
||||
var element = document.createElement("script");
|
||||
element.src = "js/libs/gumby.min.js";
|
||||
document.body.appendChild(element);
|
||||
}
|
||||
if (window.addEventListener)
|
||||
window.addEventListener("load", downloadJSAtOnload, false);
|
||||
else if (window.attachEvent)
|
||||
window.attachEvent("onload", downloadJSAtOnload);
|
||||
else window.onload = downloadJSAtOnload;
|
||||
</script> -->
|
||||
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<!-- Change UA-XXXXX-X to be your site's ID -->
|
||||
<!--<script>
|
||||
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
|
||||
Modernizr.load({
|
||||
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
|
||||
});
|
||||
</script>-->
|
||||
|
||||
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
|
||||
chromium.org/developers/how-tos/chrome-frame-getting-started -->
|
||||
<!--[if lt IE 7 ]>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
|
||||
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
|
||||
<![endif]-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
/**
|
||||
* Gumby Init
|
||||
*/
|
||||
|
||||
!function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// not touch device or no touch events required so auto initialize here
|
||||
if((!Gumby.touchDevice || !Gumby.touchEvents) && Gumby.autoInit) {
|
||||
window.Gumby.init();
|
||||
|
||||
// load jQuery mobile touch events
|
||||
} else if(Gumby.touchEvents && Gumby.touchDevice) {
|
||||
Gumby.debug('Loading jQuery mobile touch events');
|
||||
// set timeout to 2sec
|
||||
yepnope.errorTimeout = 2000;
|
||||
Modernizr.load({
|
||||
test: Modernizr.touch,
|
||||
yep: Gumby.touchEvents+'/jquery.mobile.custom.min.js',
|
||||
complete: function() {
|
||||
// error loading jQuery mobile
|
||||
if(!$.mobile) {
|
||||
Gumby.error('Error loading jQuery mobile touch events');
|
||||
}
|
||||
|
||||
// if not auto initializing
|
||||
// this will allow helpers to fire when initialized
|
||||
Gumby.touchEventsLoaded = true;
|
||||
|
||||
// auto initialize
|
||||
if(Gumby.autoInit) {
|
||||
window.Gumby.init();
|
||||
|
||||
// if already manually initialized then fire helpers
|
||||
} else if(Gumby.uiModulesReady) {
|
||||
Gumby.helpers();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// if AMD return Gumby object to define
|
||||
if(typeof define == "function" && define.amd) {
|
||||
define(window.Gumby);
|
||||
}
|
||||
}(jQuery);
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
/**
|
||||
* Gumby Framework
|
||||
* ---------------
|
||||
*
|
||||
* Follow @gumbycss on twitter and spread the love.
|
||||
* We worked super hard on making this awesome and released it to the web.
|
||||
* All we ask is you leave this intact. #gumbyisawesome
|
||||
*
|
||||
* Gumby Framework
|
||||
* http://gumbyframework.com
|
||||
*
|
||||
* Built with love by your friends @digitalsurgeons
|
||||
* http://www.digitalsurgeons.com
|
||||
*
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
!function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
function Gumby() {
|
||||
this.$dom = $(document);
|
||||
this.$html = this.$dom.find('html');
|
||||
this.isOldie = !!this.$html.hasClass('oldie');
|
||||
this.click = 'click';
|
||||
this.onReady = this.onOldie = this.onTouch = false;
|
||||
this.autoInit = $('script[gumby-init]').attr('gumby-init') === 'false' ? false : true;
|
||||
this.debugMode = Boolean($('script[gumby-debug]').length);
|
||||
this.touchDevice = !!(Modernizr.touch || window.navigator.userAgent.indexOf("Windows Phone") > 0);
|
||||
this.gumbyTouch = false;
|
||||
this.touchEvents = 'js/libs';
|
||||
this.breakpoint = Number($('script[gumby-breakpoint]').attr('gumby-breakpoint')) || 768;
|
||||
this.touchEventsLoaded = false;
|
||||
this.uiModulesReady = false;
|
||||
this.uiModules = {};
|
||||
this.inits = {};
|
||||
|
||||
// jQuery mobile touch events
|
||||
var touch = $('script[gumby-touch]').attr('gumby-touch'),
|
||||
path = $('script[gumby-path]').attr('gumby-path');
|
||||
|
||||
// do not use touch events
|
||||
if(touch === 'false') {
|
||||
this.touchEvents = false;
|
||||
|
||||
// set path to jQuery mobile
|
||||
// support touch/path attrs for backwards compatibility
|
||||
} else {
|
||||
if(touch) {
|
||||
this.touchEvents = touch;
|
||||
} else if(path) {
|
||||
this.touchEvents = path;
|
||||
}
|
||||
}
|
||||
|
||||
// update click property to bind to click/tap
|
||||
if(this.touchDevice) {
|
||||
this.click += ' tap';
|
||||
}
|
||||
|
||||
// add gumby-touch/gumby-no-touch classes
|
||||
// gumby touch == touch enabled && smaller than defined breakpoint
|
||||
if(this.touchDevice && $(window).width() < this.breakpoint) {
|
||||
this.$html.addClass('gumby-touch');
|
||||
this.gumbyTouch = true;
|
||||
} else {
|
||||
this.$html.addClass('gumby-no-touch');
|
||||
}
|
||||
|
||||
if(this.debugMode) {
|
||||
this.debug('Gumby is in debug mode');
|
||||
}
|
||||
}
|
||||
|
||||
// initialize Gumby
|
||||
Gumby.prototype.init = function(options) {
|
||||
var scope = this,
|
||||
opts = options ? options : {};
|
||||
|
||||
// call ready() code when dom is ready
|
||||
this.$dom.ready(function() {
|
||||
if(opts.debug) {
|
||||
scope.debugMode = true;
|
||||
}
|
||||
|
||||
scope.debug("Initializing Gumby");
|
||||
|
||||
// init UI modules
|
||||
var mods = opts.uiModules ? opts.uiModules : false;
|
||||
scope.initUIModules(mods);
|
||||
|
||||
if(scope.onReady) {
|
||||
scope.onReady();
|
||||
}
|
||||
|
||||
// call oldie() callback if applicable
|
||||
if(scope.isOldie && scope.onOldie) {
|
||||
scope.onOldie();
|
||||
}
|
||||
|
||||
// call touch() callback if applicable
|
||||
if(Modernizr.touch && scope.onTouch) {
|
||||
scope.onTouch();
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
Gumby.prototype.helpers = function() {
|
||||
if(this.onReady) {
|
||||
this.onReady();
|
||||
}
|
||||
|
||||
// call oldie() callback if applicable
|
||||
if(this.isOldie && this.onOldie) {
|
||||
this.onOldie();
|
||||
}
|
||||
|
||||
// call touch() callback if applicable
|
||||
if(Modernizr.touch && this.onTouch) {
|
||||
this.onTouch();
|
||||
}
|
||||
};
|
||||
|
||||
// public helper - set Gumby ready callback
|
||||
Gumby.prototype.ready = function(code) {
|
||||
if(code && typeof code === 'function') {
|
||||
this.onReady = code;
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
// public helper - set oldie callback
|
||||
Gumby.prototype.oldie = function(code) {
|
||||
if(code && typeof code === 'function') {
|
||||
this.onOldie = code;
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
// public helper - set touch callback
|
||||
Gumby.prototype.touch = function(code) {
|
||||
if(code && typeof code === 'function') {
|
||||
this.onTouch = code;
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
// print to console if available and we're in debug mode
|
||||
Gumby.prototype.console = function(type, data) {
|
||||
if(!this.debugMode || !window.console) { return; }
|
||||
console[console[type] ? type : 'log'](data.length > 1 ? Array.prototype.slice.call(data) : data[0]);
|
||||
};
|
||||
|
||||
// pass args onto console method for output
|
||||
Gumby.prototype.log = function() { this.console('log', arguments); };
|
||||
Gumby.prototype.debug = function() { this.console('debug', arguments); };
|
||||
Gumby.prototype.warn = function() { this.console('warn', arguments); };
|
||||
Gumby.prototype.error = function() { this.console('error', arguments); };
|
||||
|
||||
// public helper - return debuggin object including uiModules object
|
||||
Gumby.prototype.dump = function() {
|
||||
return {
|
||||
$dom: this.$dom,
|
||||
isOldie: this.isOldie,
|
||||
touchEvents: this.touchEvents,
|
||||
debugMode: this.debugMode,
|
||||
autoInit: this.autoInit,
|
||||
uiModules: this.uiModules,
|
||||
click: this.click
|
||||
};
|
||||
};
|
||||
|
||||
// grab attribute value, testing data- gumby- and no prefix
|
||||
Gumby.prototype.selectAttr = function() {
|
||||
var i = 0;
|
||||
|
||||
// any number of attributes can be passed
|
||||
for(; i < arguments.length; i++) {
|
||||
// various formats
|
||||
var attr = arguments[i],
|
||||
dataAttr = 'data-'+arguments[i],
|
||||
gumbyAttr = 'gumby-'+arguments[i];
|
||||
|
||||
// first test for data-attr
|
||||
if(this.is('['+dataAttr+']')) {
|
||||
return this.attr(dataAttr) ? this.attr(dataAttr) : true;
|
||||
|
||||
// next test for gumby-attr
|
||||
} else if(this.is('['+gumbyAttr+']')) {
|
||||
return this.attr(gumbyAttr) ? this.attr(gumbyAttr) : true;
|
||||
|
||||
// finally no prefix
|
||||
} else if(this.is('['+attr+']')) {
|
||||
return this.attr(attr) ? this.attr(attr) : true;
|
||||
}
|
||||
}
|
||||
|
||||
// none found
|
||||
return false;
|
||||
};
|
||||
|
||||
// add an initialisation method
|
||||
Gumby.prototype.addInitalisation = function(ref, code) {
|
||||
this.inits[ref] = code;
|
||||
};
|
||||
|
||||
// initialize a uiModule, single / array of module refs
|
||||
Gumby.prototype.initialize = function(ref, all) {
|
||||
if(typeof ref === 'object') {
|
||||
var i = 0;
|
||||
for(i; i < ref.length; i++) {
|
||||
if(!this.inits[ref[i]] || typeof this.inits[ref[i]] !== 'function') {
|
||||
this.error('Error initializing module: '+ref[i]);
|
||||
continue;
|
||||
}
|
||||
|
||||
this.inits[ref[i]](all);
|
||||
}
|
||||
} else if(this.inits[ref] && typeof this.inits[ref] === 'function') {
|
||||
this.inits[ref](all);
|
||||
} else {
|
||||
this.error('Error initializing module: '+ref);
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
// store a UI module
|
||||
Gumby.prototype.UIModule = function(data) {
|
||||
var module = data.module;
|
||||
this.uiModules[module] = data;
|
||||
};
|
||||
|
||||
// loop round and init all UI modules
|
||||
Gumby.prototype.initUIModules = function(mods) {
|
||||
var x, m, arr = this.uiModules;
|
||||
|
||||
// only initialise specified modules
|
||||
if(mods) {
|
||||
arr = mods;
|
||||
}
|
||||
|
||||
// initialise everything
|
||||
for(x in arr) {
|
||||
m = mods ? arr[x] : x;
|
||||
this.uiModules[m].init();
|
||||
}
|
||||
};
|
||||
|
||||
window.Gumby = new Gumby();
|
||||
|
||||
}(jQuery);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,101 @@
|
|||
/**
|
||||
* Gumby Checkbox
|
||||
*/
|
||||
!function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
function Checkbox($el) {
|
||||
|
||||
Gumby.debug('Initializing Checkbox', $el);
|
||||
|
||||
this.$el = $el;
|
||||
this.$input = this.$el.find('input[type=checkbox]');
|
||||
|
||||
var scope = this;
|
||||
|
||||
// listen for click event and custom gumby check/uncheck events
|
||||
this.$el.on(Gumby.click, function(e) {
|
||||
// prevent checkbox checking, we'll do that manually
|
||||
e.preventDefault();
|
||||
|
||||
// do nothing if checkbox is disabled
|
||||
if(scope.$input.is('[disabled]')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// check/uncheck
|
||||
if(scope.$el.hasClass('checked')) {
|
||||
scope.update(false);
|
||||
} else {
|
||||
scope.update(true);
|
||||
}
|
||||
}).on('gumby.check', function() {
|
||||
Gumby.debug('Check event triggered', scope.$el);
|
||||
scope.update(true);
|
||||
}).on('gumby.uncheck', function() {
|
||||
Gumby.debug('Uncheck event triggered', scope.$el);
|
||||
scope.update(false);
|
||||
});
|
||||
|
||||
// update any prechecked on load
|
||||
if(this.$input.prop('checked') || this.$el.hasClass('checked')) {
|
||||
scope.update(true);
|
||||
}
|
||||
}
|
||||
|
||||
// update checkbox, check equals true/false to sepcify check/uncheck
|
||||
Checkbox.prototype.update = function(check) {
|
||||
var $span = this.$el.find('span');
|
||||
|
||||
// check checkbox - check input, add checked class, append <i>
|
||||
if(check) {
|
||||
|
||||
Gumby.debug('Checking Checkbox', this.$el);
|
||||
|
||||
$span.append('<i class="icon-check" />');
|
||||
this.$input.prop('checked', true);
|
||||
|
||||
Gumby.debug('Triggering onCheck event', this.$el);
|
||||
Gumby.debug('Triggering onChange event', this.$el);
|
||||
|
||||
this.$el.addClass('checked').trigger('gumby.onCheck').trigger('gumby.onChange');
|
||||
|
||||
// uncheck checkbox - uncheck input, remove checked class, remove <i>
|
||||
} else {
|
||||
|
||||
Gumby.debug('Unchecking Checkbox', this.$el);
|
||||
|
||||
this.$input.prop('checked', false);
|
||||
$span.find('i').remove();
|
||||
|
||||
Gumby.debug('Triggering onUncheck event', this.$el);
|
||||
Gumby.debug('Triggering onChange event', this.$el);
|
||||
|
||||
this.$el.removeClass('checked').trigger('gumby.onUncheck').trigger('gumby.onChange');
|
||||
}
|
||||
};
|
||||
|
||||
// add initialisation
|
||||
Gumby.addInitalisation('checkbox', function() {
|
||||
$('.checkbox').each(function() {
|
||||
var $this = $(this);
|
||||
// this element has already been initialized
|
||||
if($this.data('isCheckbox')) {
|
||||
return true;
|
||||
}
|
||||
// mark element as initialized
|
||||
$this.data('isCheckbox', true);
|
||||
new Checkbox($this);
|
||||
});
|
||||
});
|
||||
|
||||
// register UI module
|
||||
Gumby.UIModule({
|
||||
module: 'checkbox',
|
||||
events: ['onCheck', 'onUncheck', 'onChange', 'check', 'uncheck'],
|
||||
init: function() {
|
||||
Gumby.initialize('checkbox');
|
||||
}
|
||||
});
|
||||
}(jQuery);
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
/**
|
||||
* Gumby Fixed
|
||||
*/
|
||||
!function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
function Fixed($el) {
|
||||
|
||||
Gumby.debug('Initializing Fixed Position', $el);
|
||||
|
||||
this.$el = $el;
|
||||
|
||||
this.$window = $(window);
|
||||
this.fixedPoint = '';
|
||||
this.pinPoint = false;
|
||||
this.fixedPointjQ = false;
|
||||
this.pinPointjQ = false;
|
||||
this.offset = 0;
|
||||
this.pinOffset = 0;
|
||||
this.top = 0;
|
||||
this.constrainEl = true;
|
||||
this.state = false;
|
||||
this.measurements = {
|
||||
left: 0,
|
||||
width: 0
|
||||
};
|
||||
|
||||
// set up module based on attributes
|
||||
this.setup();
|
||||
|
||||
var scope = this;
|
||||
|
||||
// monitor scroll and update fixed elements accordingly
|
||||
this.$window.on('scroll load', function() {
|
||||
scope.monitorScroll();
|
||||
});
|
||||
|
||||
// reinitialize event listener
|
||||
this.$el.on('gumby.initialize', function() {
|
||||
Gumby.debug('Re-initializing Fixed Position', $el);
|
||||
scope.setup();
|
||||
scope.monitorScroll();
|
||||
});
|
||||
}
|
||||
|
||||
// set up module based on attributes
|
||||
Fixed.prototype.setup = function() {
|
||||
var scope = this;
|
||||
|
||||
this.fixedPoint = this.parseAttrValue(Gumby.selectAttr.apply(this.$el, ['fixed']));
|
||||
|
||||
// pin point is optional
|
||||
this.pinPoint = Gumby.selectAttr.apply(this.$el, ['pin']) || false;
|
||||
|
||||
// offset from fixed point
|
||||
this.offset = Number(Gumby.selectAttr.apply(this.$el, ['offset'])) || 0;
|
||||
|
||||
// offset from pin point
|
||||
this.pinOffset = Number(Gumby.selectAttr.apply(this.$el, ['pinoffset'])) || 0;
|
||||
|
||||
// top position when fixed
|
||||
this.top = Number(Gumby.selectAttr.apply(this.$el, ['top'])) || 0;
|
||||
|
||||
// constrain can be turned off
|
||||
this.constrainEl = Gumby.selectAttr.apply(this.$el, ['constrain']) || true;
|
||||
if(this.constrainEl === 'false') {
|
||||
this.constrainEl = false;
|
||||
}
|
||||
|
||||
// reference to the parent, row/column
|
||||
this.$parent = this.$el.parents('.columns, .column, .row');
|
||||
this.$parent = this.$parent.length ? this.$parent.first() : false;
|
||||
this.parentRow = this.$parent ? !!this.$parent.hasClass('row') : false;
|
||||
|
||||
// if optional pin point set then parse now
|
||||
if(this.pinPoint) {
|
||||
this.pinPoint = this.parseAttrValue(this.pinPoint);
|
||||
}
|
||||
|
||||
this.fixedPointjQ = this.fixedPoint instanceof jQuery;
|
||||
this.pinPointjQ = this.pinPoint instanceof jQuery;
|
||||
|
||||
// if we have a parent constrain dimenions
|
||||
if(this.$parent && this.constrainEl) {
|
||||
// measure up
|
||||
this.measure();
|
||||
// and on resize reset measurement
|
||||
this.$window.resize(function() {
|
||||
if(scope.state) {
|
||||
scope.measure();
|
||||
scope.constrain();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// monitor scroll and trigger changes based on position
|
||||
Fixed.prototype.monitorScroll = function() {
|
||||
var scrollAmount = this.$window.scrollTop(),
|
||||
// recalculate selector attributes as position may have changed
|
||||
fixedPoint = this.fixedPointjQ ? this.fixedPoint.offset().top : this.fixedPoint,
|
||||
pinPoint = false,
|
||||
timer;
|
||||
|
||||
// if a pin point is set recalculate
|
||||
if(this.pinPoint) {
|
||||
pinPoint = this.pinPointjQ ? this.pinPoint.offset().top : this.pinPoint;
|
||||
}
|
||||
|
||||
// apply offsets
|
||||
if(this.offset) { fixedPoint -= this.offset; }
|
||||
if(this.pinOffset) { pinPoint -= this.pinOffset; }
|
||||
|
||||
// fix it
|
||||
if((scrollAmount >= fixedPoint) && this.state !== 'fixed') {
|
||||
if(!pinPoint || scrollAmount < pinPoint) {
|
||||
this.fix();
|
||||
}
|
||||
// unfix it
|
||||
} else if(scrollAmount < fixedPoint && this.state === 'fixed') {
|
||||
this.unfix();
|
||||
|
||||
// pin it
|
||||
} else if(pinPoint && scrollAmount >= pinPoint && this.state !== 'pinned') {
|
||||
this.pin();
|
||||
}
|
||||
};
|
||||
|
||||
// fix the element and update state
|
||||
Fixed.prototype.fix = function() {
|
||||
Gumby.debug('Element has been fixed', this.$el);
|
||||
Gumby.debug('Triggering onFixed event', this.$el);
|
||||
|
||||
this.state = 'fixed';
|
||||
this.$el.css({
|
||||
'top' : this.top
|
||||
}).addClass('fixed').removeClass('unfixed pinned').trigger('gumby.onFixed');
|
||||
|
||||
// if we have a parent constrain dimenions
|
||||
if(this.$parent) {
|
||||
this.constrain();
|
||||
}
|
||||
};
|
||||
|
||||
// unfix the element and update state
|
||||
Fixed.prototype.unfix = function() {
|
||||
Gumby.debug('Element has been unfixed', this.$el);
|
||||
Gumby.debug('Triggering onUnfixed event', this.$el);
|
||||
|
||||
this.state = 'unfixed';
|
||||
this.$el.addClass('unfixed').removeClass('fixed pinned').trigger('gumby.onUnfixed');
|
||||
};
|
||||
|
||||
// pin the element in position
|
||||
Fixed.prototype.pin = function() {
|
||||
Gumby.debug('Element has been pinned', this.$el);
|
||||
Gumby.debug('Triggering onPinned event', this.$el);
|
||||
this.state = 'pinned';
|
||||
this.$el.css({
|
||||
'top' : this.$el.offset().top
|
||||
}).addClass('pinned fixed').removeClass('unfixed').trigger('gumby.onPinned');
|
||||
};
|
||||
|
||||
// constrain elements dimensions to match width/height
|
||||
Fixed.prototype.constrain = function() {
|
||||
Gumby.debug("Constraining element", this.$el);
|
||||
this.$el.css({
|
||||
left: this.measurements.left,
|
||||
width: this.measurements.width
|
||||
});
|
||||
};
|
||||
|
||||
// measure up the parent for constraining
|
||||
Fixed.prototype.measure = function() {
|
||||
var parentPadding;
|
||||
|
||||
this.measurements.left = this.$parent.offset().left;
|
||||
this.measurements.width = this.$parent.width();
|
||||
|
||||
// if element has a parent row then need to consider padding
|
||||
if(this.parentRow) {
|
||||
parentPadding = Number(this.$parent.css('paddingLeft').replace(/px/, ''));
|
||||
if(parentPadding) {
|
||||
this.measurements.left += parentPadding;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// parse attribute values, could be px, top, selector
|
||||
Fixed.prototype.parseAttrValue = function(attr) {
|
||||
// px value fixed point
|
||||
if($.isNumeric(attr)) {
|
||||
return Number(attr);
|
||||
// 'top' string fixed point
|
||||
} else if(attr === 'top') {
|
||||
return this.$el.offset().top;
|
||||
// selector specified
|
||||
} else {
|
||||
var $el = $(attr);
|
||||
if(!$el.length) {
|
||||
Gumby.error('Cannot find Fixed target: '+attr);
|
||||
return false;
|
||||
}
|
||||
return $el;
|
||||
}
|
||||
};
|
||||
|
||||
// add initialisation
|
||||
Gumby.addInitalisation('fixed', function(all) {
|
||||
$('[data-fixed],[gumby-fixed],[fixed]').each(function() {
|
||||
var $this = $(this);
|
||||
|
||||
// this element has already been initialized
|
||||
// and we're only initializing new modules
|
||||
if($this.data('isFixed') && !all) {
|
||||
return true;
|
||||
|
||||
// this element has already been initialized
|
||||
// and we need to reinitialize it
|
||||
} else if($this.data('isFixed') && all) {
|
||||
$this.trigger('gumby.initialize');
|
||||
return true;
|
||||
}
|
||||
|
||||
// mark element as initialized
|
||||
$this.data('isFixed', true);
|
||||
new Fixed($this);
|
||||
});
|
||||
});
|
||||
|
||||
// register UI module
|
||||
Gumby.UIModule({
|
||||
module: 'fixed',
|
||||
events: ['initialize', 'onFixed', 'onUnfixed'],
|
||||
init: function() {
|
||||
Gumby.initialize('fixed');
|
||||
}
|
||||
});
|
||||
}(jQuery);
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
/**
|
||||
* Gumby Navbar
|
||||
*/
|
||||
!function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// define and init module on touch enabled devices only
|
||||
if(!Gumby.gumbyTouch) {
|
||||
return;
|
||||
}
|
||||
|
||||
function Navbar($el) {
|
||||
|
||||
Gumby.debug('Initializing Navbar', $el);
|
||||
|
||||
this.$el = $el;
|
||||
this.$dropDowns = this.$el.find('li:has(.dropdown)');
|
||||
var scope = this;
|
||||
|
||||
var persist = this.$el.attr('gumby-persist');
|
||||
if(typeof persist === 'undefined' && persist !== 'false') {
|
||||
this.$el.find('li:not(:has(.dropdown)) a').on(Gumby.click, function() {
|
||||
scope.$el.find('ul').removeClass('active');
|
||||
});
|
||||
}
|
||||
|
||||
// when navbar items
|
||||
this.$dropDowns
|
||||
// are tapped hide/show dropdowns
|
||||
.on(Gumby.click, this.toggleDropdown)
|
||||
// are swiped right open link
|
||||
.on('swiperight', this.openLink);
|
||||
|
||||
// if there's a link set
|
||||
if(this.$dropDowns.children('a').attr('href') !== '#') {
|
||||
// append an icon
|
||||
this.$dropDowns.children('a').append('<i class="icon-popup"></i>').children('i')
|
||||
// and bind to click event to open link
|
||||
.on(Gumby.click, this.openLink);
|
||||
}
|
||||
|
||||
// override with childlinks
|
||||
this.$el.find('li:not(:has(.dropdown)) a[href]').on(Gumby.click, this.openLink);
|
||||
}
|
||||
|
||||
Navbar.prototype.toggleDropdown = function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if($(this).parents('.dropdown')) {
|
||||
e.stopImmediatePropagation();
|
||||
}
|
||||
|
||||
if($(e.target).is('i')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $this = $(this);
|
||||
|
||||
if($this.hasClass('active')) {
|
||||
$this.removeClass('active');
|
||||
} else {
|
||||
$this.addClass('active');
|
||||
}
|
||||
};
|
||||
|
||||
// handle opening list item link
|
||||
Navbar.prototype.openLink = function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var $this = $(this),
|
||||
$el = $this, href;
|
||||
|
||||
// tapped icon
|
||||
if($this.is('i')) {
|
||||
$el = $this.parent('a');
|
||||
// swiped li
|
||||
} else if($this.is('li')) {
|
||||
$el = $this.children('a');
|
||||
}
|
||||
|
||||
href = $el.attr('href');
|
||||
|
||||
// open in new window
|
||||
if($el.attr('target') == 'blank') {
|
||||
window.open(href);
|
||||
// regular relocation
|
||||
} else {
|
||||
window.location = href;
|
||||
}
|
||||
};
|
||||
|
||||
// add initialisation
|
||||
Gumby.addInitalisation('navbar', function() {
|
||||
$('.navbar').each(function() {
|
||||
var $this = $(this);
|
||||
// this element has already been initialized
|
||||
if($this.data('isNavbar')) {
|
||||
return true;
|
||||
}
|
||||
// mark element as initialized
|
||||
$this.data('isNavbar', true);
|
||||
new Navbar($this);
|
||||
});
|
||||
});
|
||||
|
||||
// register UI module
|
||||
Gumby.UIModule({
|
||||
module: 'navbar',
|
||||
events: [],
|
||||
init: function() {
|
||||
Gumby.initialize('navbar');
|
||||
}
|
||||
});
|
||||
}(jQuery);
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
/**
|
||||
* Gumby RadioBtn
|
||||
*/
|
||||
!function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
function RadioBtn($el) {
|
||||
|
||||
Gumby.debug('Initializing Radio Button', $el);
|
||||
|
||||
this.$el = $el;
|
||||
this.$input = this.$el.find('input[type=radio]');
|
||||
|
||||
var scope = this;
|
||||
|
||||
// listen for click event and custom gumby check event
|
||||
this.$el.on(Gumby.click, function(e) {
|
||||
// prevent radio button checking, we'll do that manually
|
||||
e.preventDefault();
|
||||
|
||||
// do nothing if radio is disabled
|
||||
if (scope.$input.is('[disabled]')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// check radio button
|
||||
scope.update();
|
||||
}).on('gumby.check', function() {
|
||||
Gumby.debug('Check event triggered', scope.$el);
|
||||
scope.update();
|
||||
});
|
||||
|
||||
// update any prechecked on load
|
||||
if(this.$input.prop('checked') || this.$el.hasClass('checked')) {
|
||||
scope.update(true);
|
||||
}
|
||||
}
|
||||
|
||||
// check radio button, uncheck all others in name group
|
||||
RadioBtn.prototype.update = function() {
|
||||
|
||||
// already checked so no need to update
|
||||
if(this.$el.hasClass('checked') && this.$input.prop('checked') && this.$el.find('i.icon-dot').length) {
|
||||
return;
|
||||
}
|
||||
|
||||
Gumby.debug('Updating Radio Button group', this.$el);
|
||||
|
||||
var $span = this.$el.find('span'),
|
||||
// the group of radio buttons
|
||||
group = 'input[name="'+this.$input.attr('name')+'"]';
|
||||
|
||||
// uncheck radio buttons in same group - uncheck input, remove checked class, remove <i>
|
||||
$('.radio').has(group).removeClass('checked')
|
||||
.find('input').prop('checked', false).end()
|
||||
.find('i').remove();
|
||||
|
||||
// check this radio button - check input, add checked class, append <i>
|
||||
this.$input.prop('checked', true);
|
||||
$span.append('<i class="icon-dot" />');
|
||||
|
||||
Gumby.debug('Triggering onCheck event', this.$el);
|
||||
|
||||
this.$el.addClass('checked').trigger('gumby.onCheck');
|
||||
};
|
||||
|
||||
// add initialisation
|
||||
Gumby.addInitalisation('radiobtn', function() {
|
||||
$('.radio').each(function() {
|
||||
var $this = $(this);
|
||||
// this element has already been initialized
|
||||
if($this.data('isRadioBtn')) {
|
||||
return true;
|
||||
}
|
||||
// mark element as initialized
|
||||
$this.data('isRadioBtn', true);
|
||||
new RadioBtn($this);
|
||||
});
|
||||
});
|
||||
|
||||
// register UI module
|
||||
Gumby.UIModule({
|
||||
module: 'radiobtn',
|
||||
events: ['onCheck', 'check'],
|
||||
init: function() {
|
||||
Gumby.initialize('radiobtn');
|
||||
}
|
||||
});
|
||||
}(jQuery);
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
/**
|
||||
* Gumby Retina
|
||||
*/
|
||||
!function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
function Retina($el) {
|
||||
|
||||
Gumby.debug('Initializing Retina', $el);
|
||||
|
||||
this.$el = $el;
|
||||
this.imageSrc = this.$el.attr('src');
|
||||
this.retinaSrc = this.fetchRetinaImage();
|
||||
this.$retinaImg = $(new Image());
|
||||
|
||||
var scope = this;
|
||||
|
||||
// image src not valid
|
||||
if(!this.retinaSrc) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// load retina image
|
||||
this.$retinaImg.attr('src', this.retinaSrc).load(function() {
|
||||
scope.retinaImageLoaded();
|
||||
}).error(function() {
|
||||
Gumby.error('Couln\'t load retina image: '+scope.retinaSrc);
|
||||
});
|
||||
}
|
||||
|
||||
// fetch retina src by appending '@2x' to image string before extension
|
||||
Retina.prototype.fetchRetinaImage = function() {
|
||||
var imgSrc = this.imageSrc,
|
||||
index = this.imageSrc.search(/(\.|\/)(gif|jpe?g|png)$/i);
|
||||
|
||||
// image src is not valid
|
||||
if(index < 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// return retina src
|
||||
return imgSrc.substr(0, index) + '@2x' + imgSrc.substr(index, imgSrc.length);
|
||||
};
|
||||
|
||||
// once retina image loaded swap original src
|
||||
Retina.prototype.retinaImageLoaded = function() {
|
||||
Gumby.debug('Swapping image for retina version', this.$el);
|
||||
Gumby.debug('Triggering onRetina event', this.$el);
|
||||
this.$el.attr('src', this.$retinaImg.attr('src')).trigger('gumby.onRetina');
|
||||
};
|
||||
|
||||
// add initialisation
|
||||
Gumby.addInitalisation('retina', function() {
|
||||
|
||||
// this module is for retina devices only
|
||||
if(!window.devicePixelRatio || window.devicePixelRatio <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
$('img[data-retina],img[gumby-retina],img[retina]').each(function() {
|
||||
var $this = $(this);
|
||||
// this element has already been initialized
|
||||
if($this.data('isRetina')) {
|
||||
return true;
|
||||
}
|
||||
// mark element as initialized
|
||||
$this.data('isRetina', true);
|
||||
new Retina($this);
|
||||
});
|
||||
});
|
||||
|
||||
// register UI module
|
||||
Gumby.UIModule({
|
||||
module: 'retina',
|
||||
events: ['onRetina'],
|
||||
init: function() {
|
||||
Gumby.initialize('retina');
|
||||
}
|
||||
});
|
||||
}(jQuery);
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
/**
|
||||
* Gumby SkipLink
|
||||
*/
|
||||
!function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
function SkipLink($el) {
|
||||
|
||||
Gumby.debug('Initializing Skiplink', $el);
|
||||
|
||||
this.$el = $el;
|
||||
this.targetPos = 0;
|
||||
this.duration = 0;
|
||||
this.offset = false;
|
||||
this.easing = '';
|
||||
this.update = false;
|
||||
|
||||
// set up module based on attributes
|
||||
this.setup();
|
||||
|
||||
var scope = this;
|
||||
|
||||
// skip to target element on click or trigger of gumby.skipTo event
|
||||
this.$el.on(Gumby.click+' gumby.skip', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if(e.namespace === 'skip') {
|
||||
Gumby.debug('Skip event triggered', scope.$el);
|
||||
}
|
||||
|
||||
// calculate target on each click if update var set to true
|
||||
if(scope.update) {
|
||||
scope.calculateTarget(scope.skipTo);
|
||||
|
||||
// skip straight to target
|
||||
} else {
|
||||
scope.skipTo();
|
||||
}
|
||||
}).on('gumby.initialize', function() {
|
||||
Gumby.debug('Re-initializing Skiplink', scope.$el);
|
||||
scope.setup();
|
||||
});
|
||||
}
|
||||
|
||||
// set up module based on attributes
|
||||
SkipLink.prototype.setup = function() {
|
||||
this.duration = Number(Gumby.selectAttr.apply(this.$el, ['duration'])) || 200;
|
||||
this.offset = Gumby.selectAttr.apply(this.$el, ['offset']) || false;
|
||||
this.easing = Gumby.selectAttr.apply(this.$el, ['easing']) || 'swing';
|
||||
this.update = Gumby.selectAttr.apply(this.$el, ['update']) ? true : false;
|
||||
|
||||
this.calculateTarget();
|
||||
};
|
||||
|
||||
// calculate target px point to skip to
|
||||
SkipLink.prototype.calculateTarget = function(cb) {
|
||||
|
||||
var scope = this,
|
||||
target = Gumby.selectAttr.apply(this.$el, ['goto']),
|
||||
$target;
|
||||
|
||||
// 'top' specified so target is 0px
|
||||
if(target == 'top') {
|
||||
this.targetPos = 0;
|
||||
|
||||
// px point specified
|
||||
} else if($.isNumeric(target)) {
|
||||
this.targetPos = Number(target);
|
||||
} else {
|
||||
|
||||
// check for element with target as selector
|
||||
$target = $(target);
|
||||
|
||||
// target does not exist, we need a target
|
||||
if(!$target.length) {
|
||||
Gumby.error('Cannot find skiplink target: '+target);
|
||||
return false;
|
||||
}
|
||||
|
||||
this.targetPos = $target.offset().top;
|
||||
}
|
||||
|
||||
if(cb) {
|
||||
cb.apply(this);
|
||||
}
|
||||
};
|
||||
|
||||
// animate body, html scrollTop value to target px point
|
||||
SkipLink.prototype.skipTo = function() {
|
||||
|
||||
Gumby.debug('Skipping to target', this.$el);
|
||||
|
||||
var scope = this;
|
||||
|
||||
// slide to position of target
|
||||
$('html,body').animate({
|
||||
'scrollTop' : this.calculateOffset()
|
||||
}, this.duration, this.easing).promise().done(function() {
|
||||
|
||||
Gumby.debug('Triggering onComplete event', scope.$el);
|
||||
scope.$el.trigger('gumby.onComplete');
|
||||
});
|
||||
};
|
||||
|
||||
// calculate offset with current target point
|
||||
SkipLink.prototype.calculateOffset = function() {
|
||||
// no offset so return target here
|
||||
if(!this.offset) {
|
||||
return this.targetPos;
|
||||
}
|
||||
|
||||
// negative / positive
|
||||
var op = this.offset.substr(0, 1),
|
||||
off = Number(this.offset.substr(1, this.offset.length));
|
||||
|
||||
// subtract offset from target position
|
||||
if(op === '-') {
|
||||
return this.targetPos - off;
|
||||
// add offset to target position
|
||||
} else if(op === '+') {
|
||||
return this.targetPos + off;
|
||||
}
|
||||
};
|
||||
|
||||
// add initialisation
|
||||
Gumby.addInitalisation('skiplink', function(all) {
|
||||
$('.skiplink > a, .skip').each(function() {
|
||||
var $this = $(this);
|
||||
|
||||
// this element has already been initialized
|
||||
// and we're only initializing new modules
|
||||
if($this.data('isSkipLink') && !all) {
|
||||
return true;
|
||||
|
||||
// this element has already been initialized
|
||||
// and we need to reinitialize it
|
||||
} else if($this.data('isSkipLink') && all) {
|
||||
$this.trigger('gumby.initialize');
|
||||
return true;
|
||||
}
|
||||
|
||||
// mark element as initialized
|
||||
$this.data('isSkipLink', true);
|
||||
new SkipLink($this);
|
||||
});
|
||||
});
|
||||
|
||||
// register UI module
|
||||
Gumby.UIModule({
|
||||
module: 'skiplink',
|
||||
events: ['initialize', 'onComplete', 'skip'],
|
||||
init: function() {
|
||||
Gumby.initialize('skiplink');
|
||||
}
|
||||
});
|
||||
}(jQuery);
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
/**
|
||||
* Gumby Tabs
|
||||
*/
|
||||
!function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
function Tabs($el) {
|
||||
|
||||
Gumby.debug('Initializing Tabs', $el);
|
||||
|
||||
this.$el = $el;
|
||||
this.$nav = this.$el.find('> ul.tab-nav > li');
|
||||
this.$content = this.$el.children('.tab-content');
|
||||
|
||||
var scope = this;
|
||||
|
||||
// listen for click event on tab nav and custom gumby set event
|
||||
this.$nav.children('a').on(Gumby.click, function(e) {
|
||||
e.preventDefault();
|
||||
scope.click($(this));
|
||||
});
|
||||
|
||||
// listen for gumby.set value for dynamically set tabs
|
||||
this.$el.on('gumby.set', function(e, index) {
|
||||
Gumby.debug('Set event triggered', scope.$el);
|
||||
scope.set(e, index);
|
||||
});
|
||||
}
|
||||
|
||||
// handle tab nav click event
|
||||
Tabs.prototype.click = function($this) {
|
||||
// index of item to activate
|
||||
var index = $this.parent().index();
|
||||
|
||||
if(this.$nav.eq(index).add(this.$content.eq(index)).hasClass('active')) {
|
||||
return;
|
||||
}
|
||||
|
||||
Gumby.debug('Setting active tab to '+index, this.$el);
|
||||
|
||||
// deactivate other tab navigation and content
|
||||
this.$nav.add(this.$content).removeClass('active');
|
||||
|
||||
// activate this tab nav link and content
|
||||
this.$nav.eq(index).add(this.$content.eq(index)).addClass('active');
|
||||
|
||||
// trigger gumby.change event and pass current active tab index
|
||||
Gumby.debug('Triggering onChange event', this.$el);
|
||||
this.$el.trigger('gumby.onChange', index);
|
||||
};
|
||||
|
||||
// set specific tab
|
||||
Tabs.prototype.set = function(e, index) {
|
||||
this.$nav.eq(index).find('a').trigger(Gumby.click);
|
||||
};
|
||||
|
||||
// add initialisation
|
||||
Gumby.addInitalisation('tabs', function() {
|
||||
$('.tabs').each(function() {
|
||||
var $this = $(this);
|
||||
// this element has already been initialized
|
||||
if($this.data('isTabs')) {
|
||||
return true;
|
||||
}
|
||||
// mark element as initialized
|
||||
$this.data('isTabs', true);
|
||||
new Tabs($this);
|
||||
});
|
||||
});
|
||||
|
||||
// register UI module
|
||||
Gumby.UIModule({
|
||||
module: 'tabs',
|
||||
events: ['onChange', 'set'],
|
||||
init: function() {
|
||||
Gumby.initialize('tabs');
|
||||
}
|
||||
});
|
||||
}(jQuery);
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
/**
|
||||
* Gumby Toggles/Switches
|
||||
*/
|
||||
!function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// Toggle constructor
|
||||
function Toggle($el) {
|
||||
this.$el = $($el);
|
||||
this.targets = [];
|
||||
this.on = '';
|
||||
this.className = '';
|
||||
this.self = false;
|
||||
|
||||
if(this.$el.length) {
|
||||
Gumby.debug('Initializing Toggle', $el);
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
// Switch constructor
|
||||
function Switch($el) {
|
||||
this.$el = $($el);
|
||||
this.targets = [];
|
||||
this.on = '';
|
||||
this.className = '';
|
||||
this.self = false;
|
||||
|
||||
if(this.$el.length) {
|
||||
Gumby.debug('Initializing Switch', $el);
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
// intialise toggles, switches will inherit method
|
||||
Toggle.prototype.init = function() {
|
||||
var scope = this;
|
||||
|
||||
// set up module based on attributes
|
||||
this.setup();
|
||||
|
||||
// bind to specified event and trigger
|
||||
this.$el.on(this.on, function(e) {
|
||||
e.preventDefault();
|
||||
scope.trigger(scope.triggered);
|
||||
|
||||
// listen for gumby.trigger to dynamically trigger toggle/switch
|
||||
}).on('gumby.trigger', function() {
|
||||
Gumby.debug('Trigger event triggered', scope.$el);
|
||||
scope.trigger(scope.triggered);
|
||||
// re-initialize module
|
||||
}).on('gumby.initialize', function() {
|
||||
Gumby.debug('Re-initializing '+scope.constructor, $el);
|
||||
scope.setup();
|
||||
});
|
||||
};
|
||||
|
||||
// set up module based on attributes
|
||||
Toggle.prototype.setup = function() {
|
||||
this.targets = this.parseTargets();
|
||||
this.on = Gumby.selectAttr.apply(this.$el, ['on']) || Gumby.click;
|
||||
this.className = Gumby.selectAttr.apply(this.$el, ['classname']) || 'active';
|
||||
this.self = Gumby.selectAttr.apply(this.$el, ['self']) === 'false';
|
||||
};
|
||||
|
||||
// parse data-for attribute, switches will inherit method
|
||||
Toggle.prototype.parseTargets = function() {
|
||||
var targetStr = Gumby.selectAttr.apply(this.$el, ['trigger']),
|
||||
secondaryTargets = 0,
|
||||
targets = [];
|
||||
|
||||
// no targets so return false
|
||||
if(!targetStr) {
|
||||
return false;
|
||||
}
|
||||
|
||||
secondaryTargets = targetStr.indexOf('|');
|
||||
|
||||
// no secondary targets specified so return single target
|
||||
if(secondaryTargets === -1) {
|
||||
if(!this.checkTargets([targetStr])) {
|
||||
return false;
|
||||
}
|
||||
return [$(targetStr)];
|
||||
}
|
||||
|
||||
// return array of both targets, split and return 0, 1
|
||||
targets = targetStr.split('|');
|
||||
if(!this.checkTargets(targets)) {
|
||||
return false;
|
||||
}
|
||||
return targets.length > 1 ? [$(targets[0]), $(targets[1])] : [$(targets[0])];
|
||||
};
|
||||
|
||||
Toggle.prototype.checkTargets = function(targets) {
|
||||
var i = 0;
|
||||
|
||||
for(i; i < targets.length; i++) {
|
||||
if(targets[i] && !$(targets[i]).length) {
|
||||
Gumby.error('Cannot find '+this.constructor.name+' target: '+targets[i]);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// call triggered event and pass target data
|
||||
Toggle.prototype.triggered = function() {
|
||||
// trigger gumby.onTrigger event and pass array of target status data
|
||||
Gumby.debug('Triggering onTrigger event', this.$el);
|
||||
this.$el.trigger('gumby.onTrigger', [this.$el.hasClass(this.className)]);
|
||||
};
|
||||
|
||||
// Switch object inherits from Toggle
|
||||
Switch.prototype = new Toggle();
|
||||
Switch.prototype.constructor = Switch;
|
||||
|
||||
// Toggle specific trigger method
|
||||
Toggle.prototype.trigger = function(cb) {
|
||||
|
||||
Gumby.debug('Triggering Toggle', this.$el);
|
||||
|
||||
var $target;
|
||||
|
||||
// no targets just toggle active class on toggle
|
||||
if(!this.targets) {
|
||||
this.$el.toggleClass(this.className);
|
||||
|
||||
// combine single target with toggle and toggle active class
|
||||
} else if(this.targets.length == 1) {
|
||||
this.$el.add(this.targets[0]).toggleClass(this.className);
|
||||
|
||||
// if two targets check active state of first
|
||||
// always combine toggle and first target
|
||||
} else if(this.targets.length > 1) {
|
||||
if(this.targets[0].hasClass(this.className)) {
|
||||
$target = this.targets[0];
|
||||
|
||||
// add this element to it unless gumby-self set
|
||||
if(!this.self) {
|
||||
$target = $target.add(this.$el);
|
||||
}
|
||||
|
||||
$target.removeClass(this.className);
|
||||
this.targets[1].addClass(this.className);
|
||||
} else {
|
||||
$target = this.targets[0];
|
||||
|
||||
// add this element to it unless gumby-self set
|
||||
if(!this.self) {
|
||||
$target = $target.add(this.$el);
|
||||
}
|
||||
|
||||
$target.addClass(this.className);
|
||||
this.targets[1].removeClass(this.className);
|
||||
}
|
||||
}
|
||||
|
||||
// call event handler here, applying scope of object Switch/Toggle
|
||||
if(cb && typeof cb === 'function') {
|
||||
cb.apply(this);
|
||||
}
|
||||
};
|
||||
|
||||
// Switch specific trigger method
|
||||
Switch.prototype.trigger = function(cb) {
|
||||
|
||||
Gumby.debug('Triggering Switch', this.$el);
|
||||
|
||||
var $target;
|
||||
|
||||
// no targets just add active class to switch
|
||||
if(!this.targets) {
|
||||
this.$el.addClass(this.className);
|
||||
|
||||
// combine single target with switch and add active class
|
||||
} else if(this.targets.length == 1) {
|
||||
$target = this.targets[0];
|
||||
|
||||
// add this element to it unless gumby-self set
|
||||
if(!this.self) {
|
||||
$target = $target.add(this.$el);
|
||||
}
|
||||
|
||||
$target.addClass(this.className);
|
||||
|
||||
// if two targets check active state of first
|
||||
// always combine switch and first target
|
||||
} else if(this.targets.length > 1) {
|
||||
$target = this.targets[0];
|
||||
|
||||
// add this element to it unless gumby-self set
|
||||
if(!this.self) {
|
||||
$target = $target.add(this.$el);
|
||||
}
|
||||
|
||||
$target.addClass(this.className);
|
||||
this.targets[1].removeClass(this.className);
|
||||
}
|
||||
|
||||
// call event handler here, applying scope of object Switch/Toggle
|
||||
if(cb && typeof cb === 'function') {
|
||||
cb.apply(this);
|
||||
}
|
||||
};
|
||||
|
||||
// add toggle initialisation
|
||||
Gumby.addInitalisation('toggles', function(all) {
|
||||
$('.toggle').each(function() {
|
||||
var $this = $(this);
|
||||
|
||||
// this element has already been initialized
|
||||
// and we're only initializing new modules
|
||||
if($this.data('isToggle') && !all) {
|
||||
return true;
|
||||
|
||||
// this element has already been initialized
|
||||
// and we need to reinitialize it
|
||||
} else if($this.data('isToggle') && all) {
|
||||
$this.trigger('gumby.initialize');
|
||||
}
|
||||
|
||||
// mark element as initialized
|
||||
$this.data('isToggle', true);
|
||||
new Toggle($this);
|
||||
});
|
||||
});
|
||||
|
||||
// add switches initialisation
|
||||
Gumby.addInitalisation('switches', function(all) {
|
||||
$('.switch').each(function() {
|
||||
var $this = $(this);
|
||||
|
||||
// this element has already been initialized
|
||||
// and we're only initializing new modules
|
||||
if($this.data('isSwitch') && !all) {
|
||||
return true;
|
||||
|
||||
// this element has already been initialized
|
||||
// and we need to reinitialize it
|
||||
} else if($this.data('isSwitch') && all) {
|
||||
$this.trigger('gumby.initialize');
|
||||
return true;
|
||||
}
|
||||
|
||||
// mark element as initialized
|
||||
$this.data('isSwitch', true);
|
||||
new Switch($this);
|
||||
});
|
||||
});
|
||||
|
||||
// register UI module
|
||||
Gumby.UIModule({
|
||||
module: 'toggleswitch',
|
||||
events: ['initialize', 'trigger', 'onTrigger'],
|
||||
init: function() {
|
||||
// Run initialize methods
|
||||
Gumby.initialize('switches');
|
||||
Gumby.initialize('toggles');
|
||||
}
|
||||
});
|
||||
}(jQuery);
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
/**
|
||||
* Gumby jQuery Validation Plugin
|
||||
*/
|
||||
!function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
function Validation($this, req) {
|
||||
|
||||
if(Gumby) {
|
||||
Gumby.debug('Initializing Validation', $this);
|
||||
}
|
||||
|
||||
// input and holder .field
|
||||
this.$this = $this;
|
||||
this.$field = this.$this.parents('.field');
|
||||
|
||||
// supplied validation function with default length check
|
||||
this.req = req || function() {
|
||||
return !!this.$this.val().length;
|
||||
};
|
||||
|
||||
// reference to this class
|
||||
var scope = this;
|
||||
|
||||
// checkboxes and radio buttons use gumby.onChange event to validate
|
||||
if(this.$this.is('[type=checkbox], [type=radio]')) {
|
||||
this.$field = this.$this.parent('label');
|
||||
this.$field.on('gumby.onChange', function() {
|
||||
scope.validate();
|
||||
});
|
||||
|
||||
// selects validate on change
|
||||
} else if(this.$this.is('select')) {
|
||||
this.$field = this.$this.parents('.picker');
|
||||
this.$field.on('change', function() {
|
||||
scope.validate();
|
||||
});
|
||||
|
||||
// others (text input, textarea) use blur
|
||||
} else {
|
||||
this.$this.on('blur', function(e) {
|
||||
// ignore tab
|
||||
if(e.which !== 9) {
|
||||
scope.validate();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// validate field
|
||||
Validation.prototype.validate = function() {
|
||||
|
||||
var result = this.req(this.$this);
|
||||
|
||||
// failed
|
||||
if(!result) {
|
||||
this.$field.removeClass('success').addClass('danger');
|
||||
|
||||
// passed
|
||||
} else {
|
||||
//} else if(this.$field.hasClass('danger')) {
|
||||
this.$field.removeClass('danger').addClass('success');
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
// jQuery plugin definition
|
||||
$.fn.validation = function(options) {
|
||||
|
||||
var // extend params with defaults
|
||||
settings = $.extend({
|
||||
submit : false,
|
||||
fail: false,
|
||||
required : []
|
||||
}, options),
|
||||
// store validation objects
|
||||
validations = [];
|
||||
|
||||
// init each form plugin is called on
|
||||
return this.each(function() {
|
||||
|
||||
// no required fields so plugin is pointless
|
||||
if(!settings.required.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var $this = $(this),
|
||||
reqLength = settings.required.length,
|
||||
i;
|
||||
|
||||
// loop round each required field and instantiate new validation object
|
||||
for(i = 0; i < reqLength; i++) {
|
||||
validations.push(new Validation(
|
||||
$this.find('[name="'+settings.required[i].name+'"]'),
|
||||
settings.required[i].validate || false
|
||||
));
|
||||
}
|
||||
|
||||
// hijack submit event
|
||||
$this.on('submit', function(e) {
|
||||
|
||||
// reference to whole form pass/fail
|
||||
var failed = false;
|
||||
|
||||
// if no passed attribute found we should halt form submit
|
||||
if(!$this.data('passed')) {
|
||||
e.preventDefault();
|
||||
|
||||
// loop round validation objects and validate each
|
||||
var reqLength = validations.length, i;
|
||||
for(i = 0; i < reqLength; i++) {
|
||||
if(!validations[i].validate()) {
|
||||
failed = true;
|
||||
}
|
||||
}
|
||||
|
||||
// passed
|
||||
if(!failed) {
|
||||
// if submit method present call that otherwise submit form
|
||||
if(settings.submit && typeof settings.submit === 'function') {
|
||||
settings.submit($this.serializeArray());
|
||||
return;
|
||||
}
|
||||
|
||||
// store passed bool and re-submit
|
||||
$this.data('passed', true).submit();
|
||||
|
||||
// failed
|
||||
} else {
|
||||
// call fail method if present
|
||||
if(settings.fail && typeof settings.fail === 'function') {
|
||||
settings.fail();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
}(jQuery);
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
// Gumby is ready to go
|
||||
Gumby.ready(function() {
|
||||
Gumby.log('Gumby is ready to go...', Gumby.dump());
|
||||
|
||||
// placeholder polyfil
|
||||
if(Gumby.isOldie || Gumby.$dom.find('html').hasClass('ie9')) {
|
||||
$('input, textarea').placeholder();
|
||||
}
|
||||
|
||||
// skip link and toggle on one element
|
||||
// when the skip link completes, trigger the switch
|
||||
$('#skip-switch').on('gumby.onComplete', function() {
|
||||
$(this).trigger('gumby.trigger');
|
||||
});
|
||||
|
||||
// Oldie document loaded
|
||||
}).oldie(function() {
|
||||
Gumby.warn("This is an oldie browser...");
|
||||
|
||||
// Touch devices loaded
|
||||
}).touch(function() {
|
||||
Gumby.log("This is a touch enabled device...");
|
||||
});
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/*! http://mths.be/placeholder v2.0.7 by @mathias */
|
||||
;(function(f,h,$){var a='placeholder' in h.createElement('input'),d='placeholder' in h.createElement('textarea'),i=$.fn,c=$.valHooks,k,j;if(a&&d){j=i.placeholder=function(){return this};j.input=j.textarea=true}else{j=i.placeholder=function(){var l=this;l.filter((a?'textarea':':input')+'[placeholder]').not('.placeholder').bind({'focus.placeholder':b,'blur.placeholder':e}).data('placeholder-enabled',true).trigger('blur.placeholder');return l};j.input=a;j.textarea=d;k={get:function(m){var l=$(m);return l.data('placeholder-enabled')&&l.hasClass('placeholder')?'':m.value},set:function(m,n){var l=$(m);if(!l.data('placeholder-enabled')){return m.value=n}if(n==''){m.value=n;if(m!=h.activeElement){e.call(m)}}else{if(l.hasClass('placeholder')){b.call(m,true,n)||(m.value=n)}else{m.value=n}}return l}};a||(c.input=k);d||(c.textarea=k);$(function(){$(h).delegate('form','submit.placeholder',function(){var l=$('.placeholder',this).each(b);setTimeout(function(){l.each(e)},10)})});$(f).bind('beforeunload.placeholder',function(){$('.placeholder').each(function(){this.value=''})})}function g(m){var l={},n=/^jQuery\d+$/;$.each(m.attributes,function(p,o){if(o.specified&&!n.test(o.name)){l[o.name]=o.value}});return l}function b(m,n){var l=this,o=$(l);if(l.value==o.attr('placeholder')&&o.hasClass('placeholder')){if(o.data('placeholder-password')){o=o.hide().next().show().attr('id',o.removeAttr('id').data('placeholder-id'));if(m===true){return o[0].value=n}o.focus()}else{l.value='';o.removeClass('placeholder');l==h.activeElement&&l.select()}}}function e(){var q,l=this,p=$(l),m=p,o=this.id;if(l.value==''){if(l.type=='password'){if(!p.data('placeholder-textinput')){try{q=p.clone().attr({type:'text'})}catch(n){q=$('<input>').attr($.extend(g(this),{type:'text'}))}q.removeAttr('name').data({'placeholder-password':true,'placeholder-id':o}).bind('focus.placeholder',b);p.data({'placeholder-textinput':q,'placeholder-id':o}).before(q)}p=p.removeAttr('id').hide().prev().attr('id',o).show()}p.addClass('placeholder');p[0].value=p.attr('placeholder')}else{p.removeClass('placeholder')}}}(this,document,jQuery));
|
||||
|
||||
// place any jQuery/helper plugins in here, instead of separate, slower script files.
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/* Base Styles */
|
||||
|
||||
@import "compass/typography/vertical_rhythm";
|
||||
@include establish-baseline;
|
||||
|
||||
* { @include box-sizing(border-box); }
|
||||
|
||||
body {
|
||||
background: $global-bg-color;
|
||||
font-family: $font-family;
|
||||
font-weight: $body-font-weight;
|
||||
color: $body-font-color;
|
||||
position: relative;
|
||||
-webkit-font-smoothing: $font-smoothing;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@include respond(all-phones) {
|
||||
-webkit-text-size-adjust: none;
|
||||
-ms-text-size-adjust: none;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide.active, .show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// include all entypo icon classes
|
||||
@include icon(all);
|
||||
|
||||
// .fixed elements will be static at supplied breakpoint
|
||||
// set arg to false for permanent .fixed elements
|
||||
@include fixed(portrait-tablets);
|
||||
|
||||
.text-center { @extend %text-center; }
|
||||
.text-left { @extend %text-left; }
|
||||
.text-right { @extend %text-right; }
|
||||
// Partial to align Text Left or Right
|
||||
%text-center { text-align: center; }
|
||||
%text-left { text-align: left; }
|
||||
%text-right { text-align: right; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
// Your custom SCSS should be written here...
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* Fonts */
|
||||
|
||||
// Import Google Web Fonts
|
||||
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
|
||||
|
||||
|
||||
// Set local icon font
|
||||
@font-face {
|
||||
font-family: '#{$icons}';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../fonts/icons/#{$icons}.eot);
|
||||
src: url('../fonts/icons/#{$icons}.eot?#iefix') format('ie9-skip-eot'),
|
||||
url('../fonts/icons/#{$icons}.woff') format('woff'),
|
||||
url('../fonts/icons/#{$icons}.ttf') format('truetype');
|
||||
}
|
||||
|
||||
// To include your own, local copies of fonts, use the following template
|
||||
//
|
||||
//@font-face {
|
||||
// font-family: '#{$some-font-variable}';
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
// src: url(../fonts/icons/#{$some-font-variable}.eot);
|
||||
// src: url('../fonts/icons/#{$some-font-variable}.eot?#iefix') format('ie9-skip-eot'),
|
||||
// url('../fonts/icons/#{$some-font-variable}.woff') format('woff'),
|
||||
// url('../fonts/icons/#{$some-font-variable}.ttf') format('truetype');
|
||||
//}
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
%zero-margin-left {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
/*=================================================
|
||||
|
||||
+++ LE GRID +++
|
||||
A Responsive Grid -- Gumby defaults to a standard 960 grid,
|
||||
but you can change it to whatever you'd like.
|
||||
|
||||
==================================================*/
|
||||
|
||||
// We're removing the container class in favor
|
||||
// of adding padding to rows at the $device-width
|
||||
// breakpoint.
|
||||
|
||||
/*.container {
|
||||
padding: 0 $gutter-in-px;
|
||||
}*/
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
max-width: $row-max-width + 40px;
|
||||
min-width: $min-device-width;
|
||||
margin: 0 auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
.row {
|
||||
min-width: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* To fix the grid into a different size, set max-width to your desired width */
|
||||
|
||||
.column, .columns {
|
||||
margin-left: $gutter;
|
||||
float: $default-float;
|
||||
min-height: 1px;
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
.column:first-child, .columns:first-child, .alpha {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.column.omega, .columns.omega {
|
||||
float: $switch-float;
|
||||
}
|
||||
|
||||
// Generate the Grid
|
||||
|
||||
/* Column Classes */
|
||||
|
||||
// Generate Column Classes
|
||||
.row {
|
||||
@for $i from 1 through $cols{
|
||||
@if $i == 1 {
|
||||
.one.column {
|
||||
width: columns($i);
|
||||
}
|
||||
}
|
||||
.#{number-as-word($i)}.columns {
|
||||
width: columns($i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Push and Pull Classes */
|
||||
|
||||
// Generate Push and Pull Classes
|
||||
.row {
|
||||
@for $i from 1 through $cols - 1 {
|
||||
.push_#{number-as-word($i)} {
|
||||
margin-left: push_x($i);
|
||||
&:first-child {
|
||||
margin-left: push_x($i, true);
|
||||
}
|
||||
}
|
||||
.pull_#{number-as-word($i)} {
|
||||
// pull classes need to know the width of the container being pulled
|
||||
@for $j from 1 through $cols - 1 {
|
||||
@if $i + $j == $cols {
|
||||
&.#{number-as-word($j)}.columns {
|
||||
@extend %pull-100-percent;
|
||||
}
|
||||
}
|
||||
@elseif $j == 1 {
|
||||
&.one.column {
|
||||
margin-left: pull_x($i, $j);
|
||||
&:first-child {
|
||||
@extend %zero-margin-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&.#{number-as-word($j)}.columns {
|
||||
margin-left: pull_x($i, $j);
|
||||
&:first-child {
|
||||
@extend %zero-margin-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Centered Classes */
|
||||
|
||||
// Generate Centered Classes
|
||||
.row {
|
||||
@for $i from 1 through $cols - 1 {
|
||||
.#{number-as-word($i)}.centered {
|
||||
margin-left: centered($i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hybrid Grid Columns */
|
||||
|
||||
// Generate Hybrid Grid Column Classes
|
||||
.#{number-as-word($hybrid)}.colgrid .row {
|
||||
@for $i from 1 through $hybrid{
|
||||
@if $i == 1 {
|
||||
.one.column {
|
||||
width: columns($i, true);
|
||||
}
|
||||
}
|
||||
.#{number-as-word($i)}.columns{
|
||||
width: columns($i, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hybrid Push and Pull Classes */
|
||||
|
||||
// Generate Hybrid Push Classes
|
||||
.#{number-as-word($hybrid)}.colgrid .row {
|
||||
@for $i from 1 through $hybrid - 1{
|
||||
.push_#{number-as-word($i)} {
|
||||
margin-left: push_x($i, false, true);
|
||||
&:first-child {
|
||||
margin-left: push_x($i, true, true);
|
||||
}
|
||||
}
|
||||
.pull_#{number-as-word($i)} {
|
||||
// pull classes need to know the width of the container being pulled
|
||||
@for $j from 1 through $hybrid - 1 {
|
||||
@if $i + $j == $hybrid {
|
||||
&.#{number-as-word($j)}.columns {
|
||||
@extend %pull-100-percent;
|
||||
}
|
||||
}
|
||||
@elseif $j == 1 {
|
||||
&.one.column {
|
||||
margin-left: pull_x($i, $j, true);
|
||||
&:first-child {
|
||||
@extend %zero-margin-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&.#{number-as-word($j)}.columns {
|
||||
margin-left: pull_x($i, $j, true);
|
||||
&:first-child {
|
||||
@extend %zero-margin-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// helper placeholder to condense the repeated
|
||||
// need for resetting first-child margins to zero
|
||||
%zero-margin-left {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
%pull-100-percent {
|
||||
margin-left: -100%;
|
||||
}
|
||||
|
||||
/* Hybrid Centered Classes */
|
||||
|
||||
// Generate Centered Classes
|
||||
.#{number-as-word($hybrid)}.colgrid .row {
|
||||
@for $i from 1 through $hybrid - 1 {
|
||||
.#{number-as-word($i)}.centered {
|
||||
margin-left: centered($i, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pull_right { @include pull(right); }
|
||||
|
||||
.pull_left { @include pull(left); }
|
||||
|
||||
img, object, embed {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
#map_canvas img, .map_canvas img {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
/* Tile Grid */
|
||||
|
||||
.tiles {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
> li, > .tile {
|
||||
display: block;
|
||||
height: auto;
|
||||
float: left;
|
||||
padding-bottom:0;
|
||||
}
|
||||
&.two_up {
|
||||
margin-left: -4%;
|
||||
> li, > .tile {
|
||||
margin-left: 4%;
|
||||
width: 46%;
|
||||
}
|
||||
}
|
||||
&.three_up, &.four_up {
|
||||
margin-left: -2%;
|
||||
}
|
||||
&.three_up > li, &.three_up > .tile {
|
||||
margin-left: 2%;
|
||||
width: 31.3%;
|
||||
}
|
||||
&.four_up > li, &.four_up > .tile {
|
||||
margin-left: 2%;
|
||||
width: 23%;
|
||||
}
|
||||
&.five_up {
|
||||
margin-left: -1.5%;
|
||||
> li, > .tile {
|
||||
margin-left: 1.5%;
|
||||
width: 18.5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Nicolas Gallagher's micro clearfix */
|
||||
|
||||
.clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.row {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
|
||||
// vertically align stuff
|
||||
|
||||
.valign {
|
||||
&:before {
|
||||
content:' ';
|
||||
display: inline-block;
|
||||
height: 400px;
|
||||
vertical-align: middle;
|
||||
margin-right: -0.25em;
|
||||
}
|
||||
> div, > article, > section, > figure {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Mobile */
|
||||
|
||||
@include respond(all-phones) {
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
-ms-text-size-adjust: none;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.container {
|
||||
min-width: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.row {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
.row {
|
||||
.column, .columns {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.centered {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
.column, .columns {
|
||||
width: auto !important;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.column:last-child, .columns:last-child {
|
||||
margin-right: 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
[class*="column"] {
|
||||
+ [class*="column"]:last-child {
|
||||
float: none;
|
||||
}
|
||||
&:before {
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
[class^="push_"],
|
||||
[class*="push_"],
|
||||
[class^="pull_"],
|
||||
[class*="pull_"] {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
/* SHAME */
|
||||
|
||||
.ie8 {
|
||||
//double input field fix
|
||||
.xxwide,
|
||||
.xwide,
|
||||
.wide,
|
||||
.normal,
|
||||
.narrow,
|
||||
.xnarrow {
|
||||
display: inline;
|
||||
&+input {
|
||||
display: inline;
|
||||
margin: 0 0 0 -.25em;
|
||||
}
|
||||
}
|
||||
|
||||
// tooltip 'fade' fix
|
||||
.ttip {
|
||||
&:before, &:after {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
&:before, &:after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ie9 {
|
||||
// IE9 checkbox fix
|
||||
.radio.checked i, .checkbox.checked i {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
/* Typography */
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: $font-family;
|
||||
font-weight: $header-font-weight;
|
||||
color: $header-font-color;
|
||||
text-rendering: optimizeLegibility;
|
||||
@include padding-leader($rhythm-spacing);
|
||||
@include adjust-leading-to($rhythm-height);
|
||||
@include padding-trailer($rhythm-spacing);
|
||||
a {
|
||||
color: $header-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond(all-phones) {
|
||||
|
||||
h1,h2,h3,h4,h5,h6 { word-wrap: break-word;}
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size($xxxlarge);
|
||||
&.xlarge {
|
||||
@include font-size($reallybig);
|
||||
}
|
||||
&.xxlarge {
|
||||
@include font-size($tremendous);
|
||||
}
|
||||
&.absurd {
|
||||
@include font-size($absurd);
|
||||
}
|
||||
}
|
||||
h2 { @include font-size($xlarge); }
|
||||
h3 { @include font-size($larger);}
|
||||
h4 { @include font-size($large);}
|
||||
h5 { @include font-size($med);}
|
||||
h6 { @include font-size($norm);}
|
||||
|
||||
@include respond(all-phones) {
|
||||
|
||||
h1 { @include font-size($xlarge);}
|
||||
h2 { @include font-size($larger + 6);}
|
||||
|
||||
}
|
||||
|
||||
.subhead {
|
||||
color: #777;
|
||||
font-weight: normal;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/*=====================================================
|
||||
|
||||
Links & Paragraph styles
|
||||
|
||||
======================================================*/
|
||||
|
||||
p {
|
||||
font-family: $font-family;
|
||||
font-weight: $body-font-weight;
|
||||
@include font-size($base-font-size);
|
||||
margin-bottom: $base-line-height / 2;
|
||||
@include adjust-leading-to(1);
|
||||
&.lead {
|
||||
@include font-size(ms(0) * 1.25);
|
||||
margin-bottom: ms(1);
|
||||
}
|
||||
@include respond(portrait-tablets) {
|
||||
@include font-size($base-font-size * 1.1);
|
||||
@include adjust-leading-to(1);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $body-link-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
line-height: inherit;
|
||||
&:hover {
|
||||
color: $body-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
/*=====================================================
|
||||
|
||||
Lists
|
||||
|
||||
======================================================*/
|
||||
|
||||
ul, ol {
|
||||
@include margin-trailer($rhythm-spacing);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none outside;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
ul {
|
||||
&.square, &.circle, &.disc {
|
||||
margin-left: 25px;
|
||||
}
|
||||
&.square {
|
||||
list-style: square outside;
|
||||
}
|
||||
&.circle {
|
||||
list-style: circle outside;
|
||||
}
|
||||
&.disc {
|
||||
list-style: disc outside;
|
||||
}
|
||||
ul {
|
||||
margin: 4px 0 5px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
ol ol {
|
||||
margin: 4px 0 5px 30px;
|
||||
}
|
||||
|
||||
li {
|
||||
@include padding-trailer($rhythm-spacing);
|
||||
}
|
||||
|
||||
ul.large li {
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-weight: bold;
|
||||
@include font-size($norm);
|
||||
}
|
||||
|
||||
@include respond(portrait-tablets) {
|
||||
|
||||
ul, ol, dl, p { text-align: left;}
|
||||
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 56.4%;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
h1 small, h2 small, h3 small, h4 small, h5 small {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
|
||||
blockquote {
|
||||
line-height: 20px;
|
||||
color: #777;
|
||||
p {
|
||||
line-height: 20px;
|
||||
color: #777;
|
||||
}
|
||||
margin: 0 0 18px;
|
||||
padding: 9px 20px 0 19px;
|
||||
border-left: 5px solid $horizontal-rule-color;
|
||||
cite {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-size: 1.2rem;
|
||||
color: $body-font-color;
|
||||
&:before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
a {
|
||||
color: $body-font-color;
|
||||
&:visited {
|
||||
color: $body-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid $horizontal-rule-color;
|
||||
clear: both;
|
||||
margin: 16px 0 18px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
abbr, acronym {
|
||||
text-transform: uppercase;
|
||||
font-size: 90%;
|
||||
color: #222;
|
||||
border-bottom: 1px solid $horizontal-rule-color;
|
||||
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 {
|
||||
color: $body-font-color !important;
|
||||
text-decoration: underline;
|
||||
&:visited {
|
||||
color: $body-font-color !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
&[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
}
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
a {
|
||||
&[href^="javascript:"]:after, &[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;
|
||||
}
|
||||
}
|
||||
128
bower_components/gumby/sass/extensions/modular-scale/lib/modular-scale.rb
vendored
Executable file
128
bower_components/gumby/sass/extensions/modular-scale/lib/modular-scale.rb
vendored
Executable file
|
|
@ -0,0 +1,128 @@
|
|||
require 'compass'
|
||||
# require 'sassy-math'
|
||||
|
||||
# This tells Compass what your Compass extension is called, and where to find
|
||||
# its files
|
||||
# Replace 'extension' with the name of your extension. Spaces allowed.
|
||||
extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
||||
Compass::Frameworks.register('modular-scale', :path => extension_path)
|
||||
|
||||
# Version and date of version for your Compass extension.
|
||||
# Replace Extension with the name of your extension
|
||||
# Letters, numbers, and underscores only
|
||||
# Version is a number. If a version contains alphas, it will be created as
|
||||
# a prerelease version
|
||||
# Date is in the form of YYYY-MM-DD
|
||||
module ModularScale
|
||||
VERSION = "1.0.6"
|
||||
DATE = "2012-08-13"
|
||||
end
|
||||
|
||||
# This is where any custom SassScript should be placed. The functions will be
|
||||
# available on require of your extension without the need for users to import
|
||||
# any partials. Uncomment below.
|
||||
|
||||
# Modular Scale Sass Script
|
||||
module Sass::Script
|
||||
class Number < Literal
|
||||
# Comparison
|
||||
def <=>(other)
|
||||
value <=> other.value
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
module Sass::Script::Functions
|
||||
# Modular Scale
|
||||
def double_octave
|
||||
value = 4 / 1.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def major_twelfth
|
||||
value = 3 / 1.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def major_eleventh
|
||||
value = 8 / 3.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def major_tenth
|
||||
value = 5 / 2.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def octave
|
||||
value = 2 / 1.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def major_seventh
|
||||
value = 15 / 8.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def minor_seventh
|
||||
value = 16 /9.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def major_sixth
|
||||
value = 5 / 3.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def minor_sixth
|
||||
value = 8 / 5.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def fifth
|
||||
value = 3 / 2.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def augmented_fourth
|
||||
value = Math.sqrt(2) / 1.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def fourth
|
||||
value = 4 / 3.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def major_third
|
||||
value = 5 / 4.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def minor_third
|
||||
value = 6 / 5.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def major_second
|
||||
value = 9 / 8.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
def minor_second
|
||||
value = 16 / 15.0
|
||||
Sass::Script::Number.new(value)
|
||||
end
|
||||
|
||||
# Lists
|
||||
def sort_list(list)
|
||||
sep = list.separator if list.is_a?(Sass::Script::List)
|
||||
list = list.to_a.sort
|
||||
Sass::Script::List.new(list, sep)
|
||||
end
|
||||
def reverse_list(list)
|
||||
sep = list.separator if list.is_a?(Sass::Script::List)
|
||||
list = list.to_a.reverse
|
||||
Sass::Script::List.new(list, sep)
|
||||
end
|
||||
def trim_list(list, threshold, ascending)
|
||||
# remove list items above or below a threshold
|
||||
sep = list.separator if list.is_a?(Sass::Script::List)
|
||||
list = list.to_a
|
||||
if ascending.value
|
||||
list = list.delete_if {
|
||||
|x| x.value <= threshold.value
|
||||
}
|
||||
else
|
||||
list = list.delete_if {
|
||||
|x| x.value >= threshold.value
|
||||
}
|
||||
end
|
||||
Sass::Script::List.new(list, sep)
|
||||
end
|
||||
end
|
||||
310
bower_components/gumby/sass/extensions/modular-scale/stylesheets/_modular-scale.scss
vendored
Executable file
310
bower_components/gumby/sass/extensions/modular-scale/stylesheets/_modular-scale.scss
vendored
Executable file
|
|
@ -0,0 +1,310 @@
|
|||
// SASSY MODULAR-SCALE
|
||||
// https://github.com/scottkellum/modular-scale
|
||||
|
||||
// Defaults
|
||||
$ratio: golden_ratio() !default;
|
||||
$base-size: 16px !default;
|
||||
$round-pixels: true !default;
|
||||
|
||||
// Modular Scale function
|
||||
@function modular-scale($multiple, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
||||
|
||||
// return the $base-size if $multiple is zero
|
||||
@if $multiple == 0 {
|
||||
@if type-of($base-size) == "list" {
|
||||
$base-size: sort_list($base-size);
|
||||
@return nth($base-size, 1);
|
||||
}
|
||||
|
||||
// return just the simple $base-size value if it's not a list
|
||||
@return $base-size;
|
||||
}
|
||||
|
||||
// if multiple base-sizes are passed in as a list
|
||||
// and multiple ratios are passed in as a list
|
||||
// calculate values in using each base-size / ratio combination
|
||||
@if type-of($base-size) == "list" and type-of($ratio) == "list" {
|
||||
@if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == "px" and $round-pixels == true {
|
||||
@return round(ms-multibase-multiratio($multiple, $base-size, $ratio));
|
||||
}
|
||||
@return ms-multibase-multiratio($multiple, $base-size, $ratio);
|
||||
}
|
||||
|
||||
// if multiple base-sizes are passed in as a list
|
||||
// calculate values in using each base-size
|
||||
@if type-of($base-size) == "list" and type-of($ratio) == "number" {
|
||||
@if unit(ms-multibase($multiple, $base-size, $ratio)) == "px" and $round-pixels == true {
|
||||
@return round(ms-multibase($multiple, $base-size, $ratio));
|
||||
}
|
||||
@return ms-multibase($multiple, $base-size, $ratio);
|
||||
}
|
||||
|
||||
// if multiple ratios are passed in as a list
|
||||
// calculate values in using each ratio
|
||||
@if type-of($base-size) == "number" and type-of($ratio) == "list" {
|
||||
@if unit(ms-multiratio($multiple, $base-size, $ratio)) == "px" and $round-pixels == true {
|
||||
@return round(ms-multiratio($multiple, $base-size, $ratio));
|
||||
}
|
||||
@return ms-multiratio($multiple, $base-size, $ratio);
|
||||
}
|
||||
|
||||
// If there are no lists just run the simple function
|
||||
@if unit(power($ratio, $multiple) * $base-size) == "px" and $round-pixels == true {
|
||||
@return round(power($ratio, $multiple) * $base-size);
|
||||
}
|
||||
@return power($ratio, $multiple) * $base-size;
|
||||
}
|
||||
|
||||
// calculate values in using each base-size / ratio combination
|
||||
@function ms-multibase-multiratio($multiple, $base-size: $base-size, $ratio: $ratio) {
|
||||
|
||||
// start with an empty list to place all values in
|
||||
$scale-values: ();
|
||||
|
||||
// make sure base sizes are in ascending order
|
||||
$base-size: sort_list($base-size);
|
||||
|
||||
// take each base-size in turn
|
||||
$k: 1;
|
||||
@while $k <= length($base-size) {
|
||||
|
||||
// add each $base-size to the list except the first
|
||||
@if $k > 1 {
|
||||
$scale-values: append($scale-values, nth($base-size, $k));
|
||||
}
|
||||
|
||||
// take each ratio in turn
|
||||
$j: 1;
|
||||
@while $j <= length($ratio) {
|
||||
|
||||
// reset $modular-scale for each set
|
||||
$modular-scale: nth($base-size, $k);
|
||||
|
||||
// do the scale for each base-size using this ratio
|
||||
@if $multiple > 0 {
|
||||
|
||||
// up $multiple times
|
||||
// and add the result to $scale-values
|
||||
@for $i from 1 through $multiple {
|
||||
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k);
|
||||
$scale-values: append($scale-values, $modular-scale);
|
||||
}
|
||||
|
||||
// and down until the value is lower than the lowest $base-size
|
||||
// and add the result to $scale-values
|
||||
$i: -1;
|
||||
$modular-scale: nth($base-size, $k);
|
||||
@while $modular-scale >= nth($base-size, 1) {
|
||||
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k);
|
||||
$scale-values: append($scale-values, $modular-scale);
|
||||
$i: $i - 1;
|
||||
}
|
||||
}
|
||||
@if $multiple < 0 {
|
||||
|
||||
// do the scale down for each set to below 1px
|
||||
$i: 0;
|
||||
$modular-scale: nth($base-size, $k);
|
||||
@while $i >= $multiple {
|
||||
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k);
|
||||
$scale-values: append($scale-values, $modular-scale);
|
||||
$i: $i - 1;
|
||||
}
|
||||
}
|
||||
$j: $j + 1;
|
||||
}
|
||||
$k: $k + 1;
|
||||
}
|
||||
|
||||
// return trimmed and sorted final list
|
||||
@return trim-sort($multiple, $scale-values, $base-size);
|
||||
}
|
||||
|
||||
// calculate values in using each base-size
|
||||
@function ms-multibase($multiple, $base-size: $base-size, $ratio: $ratio) {
|
||||
|
||||
// start with an empty list to place all values in
|
||||
$scale-values: ();
|
||||
|
||||
// make sure base sizes are in ascending order
|
||||
$base-size: sort_list($base-size);
|
||||
|
||||
// take each base-size in turn
|
||||
$k: 1;
|
||||
@while $k <= length($base-size) {
|
||||
|
||||
// add each $base-size to the list except the first
|
||||
@if $k > 1 {
|
||||
$scale-values: append($scale-values, nth($base-size, $k));
|
||||
}
|
||||
|
||||
// reset $modular-scale for each set
|
||||
$modular-scale: nth($base-size, $k);
|
||||
|
||||
// do the scale for each base-size using this ratio
|
||||
@if $multiple > 0 {
|
||||
|
||||
// up $multiple times
|
||||
// and add the result to $scale-values
|
||||
@for $i from 1 through $multiple {
|
||||
$modular-scale: power($ratio, $i) * nth($base-size, $k);
|
||||
$scale-values: append($scale-values, $modular-scale);
|
||||
}
|
||||
|
||||
// and down until the value is lower than the lowest $base-size
|
||||
// and add the result to $scale-values
|
||||
$i: -1;
|
||||
$modular-scale: nth($base-size, $k);
|
||||
@while $modular-scale >= nth($base-size, 1) {
|
||||
$modular-scale: power($ratio, $i) * nth($base-size, $k);
|
||||
$scale-values: append($scale-values, $modular-scale);
|
||||
$i: $i - 1;
|
||||
}
|
||||
}
|
||||
@if $multiple < 0 {
|
||||
|
||||
// do the scale down for each set to below 1px
|
||||
$i: 0;
|
||||
$modular-scale: nth($base-size, $k);
|
||||
@while $i >= $multiple {
|
||||
$modular-scale: power($ratio, $i) * nth($base-size, $k);
|
||||
$scale-values: append($scale-values, $modular-scale);
|
||||
$i: $i - 1;
|
||||
}
|
||||
}
|
||||
$k: $k + 1;
|
||||
}
|
||||
|
||||
// return trimmed and sorted final list
|
||||
@return trim-sort($multiple, $scale-values, $base-size);
|
||||
}
|
||||
|
||||
// calculate values in using each ratio
|
||||
@function ms-multiratio($multiple, $base-size: $base-size, $ratio: $ratio) {
|
||||
|
||||
// start with an empty list to place all values in
|
||||
$scale-values: ();
|
||||
|
||||
// If $multiple is a positive integer (up the scale)
|
||||
@if $multiple > 0 {
|
||||
|
||||
// take each ratio in turn
|
||||
$j: 1;
|
||||
@while $j <= length($ratio) {
|
||||
|
||||
// reset $modular-scale for each set
|
||||
$modular-scale: $base-size;
|
||||
|
||||
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
||||
@for $i from 1 through $multiple {
|
||||
$modular-scale: power(nth($ratio, $j), $i) * $base-size;
|
||||
$scale-values: append($scale-values, $modular-scale);
|
||||
}
|
||||
$j: $j + 1;
|
||||
}
|
||||
|
||||
// sort acsending
|
||||
$scale-values: sort_list($scale-values);
|
||||
|
||||
// return the final value using the laced list
|
||||
@return nth($scale-values, $multiple);
|
||||
}
|
||||
|
||||
// If $multiple is a negative integer (down the scale)
|
||||
@if $multiple < 0 {
|
||||
|
||||
// take each ratio in turn
|
||||
$j: 1;
|
||||
@while $j <= length($ratio) {
|
||||
|
||||
// reset $modular-scale for each set
|
||||
$modular-scale: $base-size;
|
||||
|
||||
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
||||
@for $i from 1 through $multiple * -1 {
|
||||
$modular-scale: power(nth($ratio, $j), -$i) * $base-size;
|
||||
$scale-values: append($scale-values, $modular-scale);
|
||||
}
|
||||
$j: $j + 1;
|
||||
}
|
||||
|
||||
// sort decending
|
||||
$scale-values: reverse_list(sort_list($scale-values));
|
||||
|
||||
// return the final value using the laced list
|
||||
@return nth($scale-values, $multiple * -1);
|
||||
}
|
||||
}
|
||||
|
||||
// trim and sort the final list
|
||||
@function trim-sort($multiple, $scale-values: $scale-values, $base-size: $base-size) {
|
||||
@if $multiple > 0 {
|
||||
|
||||
// trim list so we can count from the lowest $base-size
|
||||
$scale-values: trim_list($scale-values, nth($base-size, 1), true);
|
||||
|
||||
// sort acsending
|
||||
$scale-values: sort_list($scale-values);
|
||||
|
||||
// return the final value using the laced list
|
||||
@return nth($scale-values, $multiple);
|
||||
}
|
||||
@else {
|
||||
|
||||
// trim list so we can count from the lowest $base-size
|
||||
$scale-values: trim_list($scale-values, nth($base-size, 1), false);
|
||||
|
||||
// sort acsending
|
||||
$scale-values: reverse_list(sort_list($scale-values));
|
||||
|
||||
// return the final value using the laced list
|
||||
@return nth($scale-values, -$multiple);
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// alias for golden_ratio()
|
||||
@function golden() {
|
||||
@return golden_ratio();
|
||||
}
|
||||
|
||||
// Shortcut
|
||||
@function ms($multiple, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
||||
// Return the value from the Modular Scale function
|
||||
@return modular-scale($multiple, $base-size, $ratio, $round-pixels);
|
||||
}
|
||||
|
||||
// Write Modular Scale List
|
||||
@function modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
||||
$ms-list: unquote("MS-LIST:");
|
||||
@for $i from $start through $finish {
|
||||
$ms-list: append($ms-list, ms($i, $base-size, $ratio, $round-pixels));
|
||||
}
|
||||
@return $ms-list;
|
||||
}
|
||||
|
||||
@function ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
||||
@return modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels);
|
||||
}
|
||||
|
||||
@mixin modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
||||
@debug modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels);
|
||||
}
|
||||
|
||||
@mixin ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
||||
@debug modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels);
|
||||
}
|
||||
|
||||
@mixin modular-scale-list-output($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
||||
MODULAR-SCALE-LIST {
|
||||
ms-list: modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ms-list-output($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
||||
@include modular-scale-list-output($start, $finish, $base-size, $ratio, $round-pixels);
|
||||
}
|
||||
|
||||
// Other libraries can easily query if this function is avalible
|
||||
$modular-scale-loaded: true;
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
require 'compass'
|
||||
Compass::Frameworks.register("sassy-math", :path => "#{File.dirname(__FILE__)}/..")
|
||||
|
||||
# Sassy math Functions
|
||||
module Sass::Script::Functions
|
||||
# Exponents
|
||||
def exponent(base, powerNum, powerDen)
|
||||
base = base.value.to_f
|
||||
powerNum = powerNum.value.to_f
|
||||
powerDen = powerDen.value.to_f
|
||||
result = base ** (powerNum / powerDen)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def power(base, exponent)
|
||||
base = base.value.to_f
|
||||
exponent = exponent.value.to_f
|
||||
result = base ** exponent
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def sqrt(number)
|
||||
number = number.value.to_f
|
||||
result = Math.sqrt(number)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def nth_root(number, root)
|
||||
number = number.value.to_f
|
||||
root = root.value.to_f
|
||||
result = number ** (1.0 / root)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
# Logarithms
|
||||
def ln(num)
|
||||
result = Math.log(num.value)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def log10(num)
|
||||
result = Math.log10(num.value)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
# Miscellaneous
|
||||
def factorial(number)
|
||||
result = 1
|
||||
number = number.value
|
||||
if number > 0
|
||||
(1..number).each do |i|
|
||||
result = result * i
|
||||
end
|
||||
end
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def random(max = Sass::Script::Number.new(100)) ## shamelessly taken from here: https://gist.github.com/1561650
|
||||
Sass::Script::Number.new(rand(max.value), max.numerator_units, max.denominator_units)
|
||||
end
|
||||
def hypot(a, b)
|
||||
a = a.value.to_f
|
||||
b = b.value.to_f
|
||||
result = Math.hypot(a, b)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
# Constants
|
||||
def pi
|
||||
pi = Math::PI
|
||||
Sass::Script::Number.new(pi)
|
||||
end
|
||||
def e
|
||||
e = Math::E
|
||||
Sass::Script::Number.new(e)
|
||||
end
|
||||
def golden_ratio()
|
||||
result = (1.0 / 2.0) + (Math.sqrt(5) / 2.0)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
# Comparative Functions
|
||||
def is_int(number)
|
||||
number = number.value.to_f
|
||||
if number - number.floor != 0
|
||||
result = false
|
||||
else
|
||||
result = true
|
||||
end
|
||||
Sass::Script::Bool.new(result)
|
||||
end
|
||||
def is_float(number)
|
||||
number = number.value
|
||||
if number - number.floor != 0
|
||||
result = true
|
||||
else
|
||||
result = false
|
||||
end
|
||||
Sass::Script::Bool.new(result)
|
||||
end
|
||||
# Trigonometric Functions
|
||||
def deg_to_rad(degree)
|
||||
result = degree.value.to_f * Math::PI / 180
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def rad_to_deg(rad)
|
||||
result = rad.value.to_f * 180 / Math::PI
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def cosh(rad)
|
||||
rad = rad.value.to_f
|
||||
result = Math.cosh(rad)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def acos(rad)
|
||||
rad = rad.value.to_f
|
||||
result = Math.acos(rad)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def acosh(rad)
|
||||
rad = rad.value.to_f
|
||||
result = Math.acosh(rad)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def sinh(rad)
|
||||
rad = rad.value.to_f
|
||||
result = Math.sinh(rad)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def asin(rad)
|
||||
rad = rad.value.to_f
|
||||
result = Math.asin(rad)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def asinh(rad)
|
||||
rad = rad.value.to_f
|
||||
result = Math.asinh(rad)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def tanh(rad)
|
||||
rad = rad.value.to_f
|
||||
result = Math.tanh(rad)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def atan(rad)
|
||||
rad = rad.value.to_f
|
||||
result = Math.atan(rad)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def atan2(y, x)
|
||||
y = y.value.to_f
|
||||
x = x.value.to_f
|
||||
result = Math.atan2(y, x)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
def atanh(rad)
|
||||
rad = rad.value.to_f
|
||||
result = Math.atanh(rad)
|
||||
Sass::Script::Number.new(result)
|
||||
end
|
||||
end
|
||||
|
||||
module SassyMath
|
||||
|
||||
VERSION = "1.5"
|
||||
DATE = "2012-07-29"
|
||||
|
||||
end
|
||||
310
bower_components/gumby/sass/extensions/sassy-math/stylesheets/_math.scss
vendored
Executable file
310
bower_components/gumby/sass/extensions/sassy-math/stylesheets/_math.scss
vendored
Executable file
|
|
@ -0,0 +1,310 @@
|
|||
// SASSY MATH
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
//////////////////////////////
|
||||
// Variables
|
||||
//////////////////////////////
|
||||
$pi: 3.1415926535897932384626433832795028841971693993751;
|
||||
$π: $pi;
|
||||
$e: 2.71828182845904523536028747135266249775724709369995;
|
||||
|
||||
$iter: 50;
|
||||
|
||||
//////////////////////////////
|
||||
// Random Number
|
||||
// Working from http://xkcd.com/221/
|
||||
// Chosen by fair dice roll.
|
||||
// Guarenteed to be random.
|
||||
//////////////////////////////
|
||||
@function rand() {
|
||||
@return 4;
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// Percent
|
||||
//////////////////////////////
|
||||
@function percent($number) {
|
||||
@return $number * 0.01;
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// Exponent
|
||||
//////////////////////////////
|
||||
@function exponent($base, $exponent) {
|
||||
// reset value
|
||||
$value: $base;
|
||||
// positive intergers get multiplied
|
||||
@if $exponent > 1 {
|
||||
@for $i from 2 through $exponent {
|
||||
$value: $value * $base; } }
|
||||
// negitive intergers get divided. A number divided by itself is 1
|
||||
@if $exponent < 1 {
|
||||
@for $i from 0 through -$exponent {
|
||||
$value: $value / $base; } }
|
||||
// return the last value written
|
||||
@return $value;
|
||||
}
|
||||
|
||||
@function pow($base, $exponent) {
|
||||
@return exponent($base, $exponent);
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// Factorial
|
||||
//////////////////////////////
|
||||
@function factorial($number) {
|
||||
// reset value
|
||||
$value: 1;
|
||||
// positive intergers get multiplied
|
||||
@if $number > 0 {
|
||||
@for $i from 1 through $number {
|
||||
$value: $value * $i;
|
||||
}
|
||||
}
|
||||
@return $value;
|
||||
}
|
||||
|
||||
@function fact($number) {
|
||||
@return factorial($number);
|
||||
}
|
||||
|
||||
|
||||
//////////////////////////////
|
||||
// Polynomial Approximation
|
||||
//////////////////////////////
|
||||
// Maclaurin series can be used to estimate Sine and Consine
|
||||
@function maclaurin($start, $key, $number) {
|
||||
$value: $start;
|
||||
$add: 0;
|
||||
|
||||
@for $i from 1 through $iter {
|
||||
@if $add == 0 {
|
||||
$value: $value - ( exponent($number, $key) / factorial($key) );
|
||||
$add: 1;
|
||||
}
|
||||
@else {
|
||||
$value: $value + ( exponent($number, $key) / factorial($key) );
|
||||
$add: 0;
|
||||
}
|
||||
|
||||
$key: $key + 2;
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
// Taylor series can be used to estiamte ln
|
||||
@function taylor($number) {
|
||||
@return taylor;
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// Basic Trig Functions
|
||||
//////////////////////////////
|
||||
// Bundled in Compass: http://compass-style.org/reference/compass/helpers/trig/
|
||||
// References for implementing using MacLaurin series below:
|
||||
|
||||
//@function sin($number, $unit: 'deg') {
|
||||
// @if $unit == 'deg' {
|
||||
// $number: deg-to-rad($number);
|
||||
// }
|
||||
// @return maclaurin($number, 3, $number);
|
||||
//}
|
||||
//
|
||||
//@function cos($number, $unit: 'deg') {
|
||||
// @if $unit == 'deg' {
|
||||
// $number: deg-to-rad($number);
|
||||
// }
|
||||
// @return maclaurin(1, 2, $number);
|
||||
//}
|
||||
//
|
||||
//// Trig Identity: Tangent = Sine divided by Cosine.
|
||||
//@function tan($number, $unit: 'deg') {
|
||||
// @if $unit == 'deg' {
|
||||
// $number: deg-to-rad($number);
|
||||
// }
|
||||
// @return sin($number) / cos($number);
|
||||
//}
|
||||
|
||||
//////////////////////////////
|
||||
// Reciprocal Trig Functions
|
||||
//////////////////////////////
|
||||
@function csc($number, $unit: 'deg') {
|
||||
@if $unit == 'deg' {
|
||||
$number: deg-to-rad($number);
|
||||
}
|
||||
@return 1 / sin($number);
|
||||
}
|
||||
|
||||
@function scs($number, $unit: 'deg') {
|
||||
@if $unit == 'deg' {
|
||||
$number: deg-to-rad($number);
|
||||
}
|
||||
@return 1 / cos($number);
|
||||
}
|
||||
|
||||
@function cot($number, $unit: 'deg') {
|
||||
@if $unit == 'deg' {
|
||||
$number: deg-to-rad($number);
|
||||
}
|
||||
@return 1 / tan($number);
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// Hyperbolic Functions
|
||||
//////////////////////////////
|
||||
@function sinh($number) {
|
||||
$top: exponent($e, (2 * $number)) - 1;
|
||||
$bottom: 2 * exponent($e, $number);
|
||||
@return $top / $bottom;
|
||||
}
|
||||
|
||||
@function cosh($number) {
|
||||
$top: exponent($e, (2 * $number)) + 1;
|
||||
$bottom: 2 * exponent($e, $number);
|
||||
@return $top / $bottom;
|
||||
}
|
||||
|
||||
@function tanh($number) {
|
||||
$top: exponent($e, (2 * $number)) - 1;
|
||||
$bottom: exponent($e, (2 * $number)) + 1;
|
||||
@return $top / $bottom;
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// Reciprocal Hyperbolic Functions
|
||||
//////////////////////////////
|
||||
@function csch($number) {
|
||||
@return 1 / sinh($number);
|
||||
}
|
||||
|
||||
@function sech($number) {
|
||||
@return 1 / cosh($number);
|
||||
}
|
||||
|
||||
@function coth($number) {
|
||||
@return 1/ tanh($number);
|
||||
}
|
||||
|
||||
|
||||
@function log($number) {
|
||||
@return $number;
|
||||
}
|
||||
|
||||
@function ln($number) {
|
||||
@if $number > 0 and $number < 1 {
|
||||
$value: 0;
|
||||
@for $i from 1 through $iter {
|
||||
$value: $value + ( pow(-1, $i) * pow(-1 * (1 - $number), $i)) / $i;
|
||||
}
|
||||
$value: -1 * $value;
|
||||
|
||||
@return $value;
|
||||
}
|
||||
@else if $number == 1 {
|
||||
@return 0;
|
||||
}
|
||||
@else {
|
||||
@return ERROR;
|
||||
@warn ln input must be greater than zero and less than or equal to 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//////////////////////////////
|
||||
// Degree/Radian Conversion
|
||||
//////////////////////////////
|
||||
@function deg-to-rad($number) {
|
||||
@return $number * $pi / 180deg;
|
||||
}
|
||||
|
||||
@function rad-to-deg($number) {
|
||||
@return $number * 180deg / $pi;
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// Root Functions
|
||||
//////////////////////////////
|
||||
// Basic General-Purpose Root Function
|
||||
@function n-root($number, $n) {
|
||||
@if $number < 1 {
|
||||
@return ERROR;
|
||||
@warn ROOT ERROR;
|
||||
}
|
||||
// If a whole number, generate it quickly
|
||||
@for $i from 1 through $number {
|
||||
@if exponent($i, $n) == $number {
|
||||
@return $i;
|
||||
}
|
||||
}
|
||||
// Else, run through other options
|
||||
@for $i from 1 through $number * 1000 / 2 {
|
||||
@if round(exponent($i / 1000, $n) * 100) == round($number * 100) {
|
||||
@return $i / 1000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function root($number, $n) {
|
||||
@return n-root($number, $n);
|
||||
}
|
||||
|
||||
// Square Roots
|
||||
@function √($number) {
|
||||
@return sqrt($number);
|
||||
}
|
||||
|
||||
@function sqrt($number) {
|
||||
$guess: rand();
|
||||
$root: $guess;
|
||||
@for $i from 1 through $iter {
|
||||
$root: $root - (pow($root, 2) - $number) / (2 * $root);
|
||||
}
|
||||
@return $root;
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// Golden Ratio
|
||||
//////////////////////////////
|
||||
@function golden() {
|
||||
@return 1/2 + sqrt(5) / 2;
|
||||
}
|
||||
@function ϕ() {
|
||||
@return golden();
|
||||
}
|
||||
|
||||
$golden-ratio: golden();
|
||||
$ϕ: $golden-ratio;
|
||||
|
||||
//////////////////////////////
|
||||
// Is Int and Is Float
|
||||
//////////////////////////////
|
||||
@function is-int($number) {
|
||||
@if type-of($number) != 'number' {
|
||||
@warn '#{$number} is not a number! It cannot be an integer if it is not a number!';
|
||||
@return false;
|
||||
}
|
||||
@if $number - floor($number) != 0 {
|
||||
@return false;
|
||||
}
|
||||
@else {
|
||||
@return true;
|
||||
}
|
||||
}
|
||||
|
||||
@function is-float($number) {
|
||||
@if type-of($number) != 'number' {
|
||||
@warn '#{$number} is not a number! It cannot be an decimal if it is not a number!';
|
||||
@return false;
|
||||
}
|
||||
@if $number - floor($number) != 0 {
|
||||
@return true;
|
||||
}
|
||||
@else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@function is-decimal($number) {
|
||||
@return is-float($number);
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
// Global Gumby Functions
|
||||
|
||||
@import "breakpoints";
|
||||
@import "strip-units";
|
||||
@import "grid-calc";
|
||||
@import "height-calc";
|
||||
@import "em";
|
||||
@import "even";
|
||||
|
||||
// Global Gumby Mixins
|
||||
|
||||
@import "clearfix";
|
||||
@import "typography";
|
||||
@import "fixed";
|
||||
@import "palette";
|
||||
@import "shapes";
|
||||
@import "palette";
|
||||
@import "fade";
|
||||
@import "responsivity";
|
||||
@import "line-and-height";
|
||||
@import "semantic-grid";
|
||||
@import "tooltips";
|
||||
@import "visibility";
|
||||
@import "fancytiles";
|
||||
@import "icons";
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@function breakpoint($breakpoint) {
|
||||
@if $breakpoint == $document-width {
|
||||
@return $document-width - 1;
|
||||
}
|
||||
@if $breakpoint == $tablet-device-width {
|
||||
@return $tablet-device-width - 1;
|
||||
}
|
||||
@if $breakpoint == $min-device-width {
|
||||
@return $min-device-width + 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
@mixin button-size($size) {
|
||||
$n: 0;
|
||||
@if $size == xlarge {
|
||||
$n: $xlarge-button-font-size;
|
||||
}
|
||||
@if $size == large {
|
||||
$n: $large-button-font-size;
|
||||
}
|
||||
@if $size == medium {
|
||||
$n: $medium-button-font-size;
|
||||
}
|
||||
@if $size == small {
|
||||
$n: $small-button-font-size;
|
||||
}
|
||||
$button-font-size: $n;
|
||||
$button-height: ms($ratio, $button-font-size) + 1;
|
||||
$line-height: $button-height - 2;
|
||||
|
||||
@include font-size($button-font-size);
|
||||
@include line-and-height($button-height);
|
||||
|
||||
a {
|
||||
position:relative;
|
||||
padding: 0 ms(0, $button-font-size);
|
||||
}
|
||||
|
||||
&.icon-left {
|
||||
a {
|
||||
padding-left: $button-height;
|
||||
&:before {
|
||||
left: $button-font-size / 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-right {
|
||||
a {
|
||||
padding-right: $button-height;
|
||||
&:after {
|
||||
right: $button-font-size / 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
@mixin clearfix() {
|
||||
*zoom:1;
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mobilefix() {
|
||||
@include respond(all-phones) {
|
||||
&:before, &:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
&:last-child {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// Convert pixels to ems
|
||||
|
||||
@function em($size-in-px, $context: 16) {
|
||||
@if not unitless($size-in-px) {
|
||||
$size-in-px: strip-units($size-in-px);
|
||||
}
|
||||
@if not unitless($context) {
|
||||
$context: strip-units($context);
|
||||
}
|
||||
@return ($size-in-px / $context) * 1em;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// test for even numbers, do something with the result
|
||||
|
||||
@function even($number) {
|
||||
@if ($number % 2 == 0) {
|
||||
@return true;
|
||||
}
|
||||
@else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// Fade Mixin
|
||||
|
||||
$fade-duration: .6s;
|
||||
|
||||
@mixin fade($direction: out, $duration: $fade-duration) {
|
||||
|
||||
@if $direction != out {
|
||||
visibility: visible;
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
@else {
|
||||
visibility: hidden;
|
||||
@include opacity(0);
|
||||
}
|
||||
|
||||
@include transition-property(opacity);
|
||||
@include transition-duration($fade-duration);
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
@function divide-cols($colnum) {
|
||||
@return 100%/$colnum;
|
||||
}
|
||||
|
||||
|
||||
@mixin fancytiles($desktop-columns, $tablet-columns: $desktop-columns, $mobile-columns: 1, $small-break: 0px, $medium-break: $tablet-device-width, $large-break: $row-max-width) {
|
||||
|
||||
// These styles apply to all shift-columns
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding-left: $gutter / 2;
|
||||
padding-right: $gutter / 2;
|
||||
|
||||
// IE8 fallback
|
||||
width: divide-cols($mobile-columns);
|
||||
|
||||
@include respond("min-width: #{$small-break}") {
|
||||
width: divide-cols($mobile-columns);
|
||||
}
|
||||
|
||||
@include respond("min-width: #{$medium-break}") {
|
||||
width: divide-cols($tablet-columns);
|
||||
}
|
||||
|
||||
@include respond("min-width: #{$large-break}") {
|
||||
width: divide-cols($desktop-columns);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
@mixin fixed($removal-breakpoint) {
|
||||
.fixed {
|
||||
position: fixed;
|
||||
&.pinned {
|
||||
position: absolute;
|
||||
}
|
||||
@if $removal-breakpoint != false {
|
||||
@include respond($removal-breakpoint) {
|
||||
position: relative !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unfixed {
|
||||
position: relative !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
@mixin input-size($size) {
|
||||
@if $size == xxwide { $size: 100%; }
|
||||
@if $size == xwide { $size: 82.6666666667%; }
|
||||
@if $size == wide { $size: 65.3333333333%; }
|
||||
@if $size == normal { $size: 48%; }
|
||||
@if $size == narrow { $size: 30.6666666667%; }
|
||||
@if $size == xnarrow { $size: 13.3333333333%; }
|
||||
|
||||
width: $size;
|
||||
}
|
||||
|
||||
@mixin input-sizes-list() {
|
||||
$sizes: ();
|
||||
@each $item in $field-sizes {
|
||||
$sizes: join($sizes, unquote(".#{$item} "), comma);
|
||||
}
|
||||
#{$sizes} { @content }
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
// Calculate grid values
|
||||
$gutter: percentage($gutter-in-px / $row-max-width); // 2.1276596
|
||||
|
||||
// Return single column width
|
||||
@function oneCol($hybrid-grid: false) {
|
||||
@if ($hybrid-grid == true){
|
||||
@return (100% - ($gutter * ($hybrid - 1))) / $hybrid;
|
||||
}
|
||||
@else{
|
||||
@return (100% - ($gutter * ($cols - 1))) / $cols;
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate Grid Column Widths
|
||||
@function columns($num, $hybrid-grid: false){
|
||||
@if ($hybrid-grid == true) {
|
||||
@return (oneCol(true) * $num) + ($gutter * ($num - 1));
|
||||
}
|
||||
@else {
|
||||
@return (oneCol() * $num) + ($gutter * ($num - 1)); // (One column * 'x') + (gutter * ('x' - 1)) = Column Width
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Calculate the width required to acheive a desired global column number within a nested grid
|
||||
@function global-columns($desired_cols, $container_cols, $hybrid-grid: false){
|
||||
@if ($hybrid-grid == true) {
|
||||
@return (100% * (columns($desired_cols, true) / columns($container_cols, true)));
|
||||
}
|
||||
@else {
|
||||
@return (100% * (columns($desired_cols) / columns($container_cols)));
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate Push Class Margins
|
||||
@function push_x($num, $first-child: false, $is-hybrid: false) {
|
||||
@if $first-child and $is-hybrid {
|
||||
@return (oneCol(true) * $num) + ($gutter * ($num - 1)) + $gutter; // Column width + gutter
|
||||
}
|
||||
@else if $first-child != true and $is_hybrid{
|
||||
@return (oneCol(true) * $num) + ($gutter * ($num - 1)) + ($gutter * 2); // Column width + (gutter * 2)
|
||||
}
|
||||
@else if $first-child and $is_hybrid != true{
|
||||
@return (oneCol() * $num) + ($gutter * ($num - 1)) + $gutter;
|
||||
}
|
||||
@else {
|
||||
@return (oneCol() * $num) + ($gutter * ($num - 1)) + ($gutter * 2); // Column width + (gutter * 2)
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate Pull Class Margins
|
||||
// note absence of first-child; first-child column containers should not be pulled
|
||||
// $num is number of columns to be pulled
|
||||
// $width is number of columns of container that is being pulled
|
||||
@function pull_x($num, $width, $is-hybrid: false) {
|
||||
@if $is-hybrid {
|
||||
@return -((oneCol(true) * $num) + ($gutter * ($num - 1)) + (oneCol(true) * $width) + ($gutter * ($width - 1)) + $gutter); // Pull width + column width + gutter
|
||||
}
|
||||
@else {
|
||||
@return -((oneCol() * $num) + ($gutter * ($num - 1)) + (oneCol() * $width) + ($gutter * ($width - 1)) + $gutter); // Pull width + column width + gutter
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate Centered Class Margins
|
||||
@function centered($num, $hybrid-grid: false) {
|
||||
@if $hybrid-grid{
|
||||
@return 50% - ((($num * (oneCol(true))) + (($num - 1) * $gutter)) / 2);
|
||||
}
|
||||
@else{
|
||||
@return 50% - ((($num * (oneCol())) + (($num - 1) * $gutter)) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Create class names from column count integers
|
||||
@function number-as-word($number){
|
||||
$w: "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven",
|
||||
"twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen",
|
||||
"twenty", "twenty-one", "twenty-two", "twenty-three", "twenty-four", "twenty-five", "twenty-six", "twenty-seven",
|
||||
"twenty-eight", "twenty-nine", "thirty", "thirty-one", "thirty-two", "thirty-three",
|
||||
"thirty-four", "thirty-five", "thirty-six";
|
||||
@return nth($w, $number);
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
// Calculate the height of an object based on its scale
|
||||
|
||||
@function height-calc($size) {
|
||||
@return ms($ratio, $size) + 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
@function match($list, $icon) {
|
||||
@each $item in $list {
|
||||
$index: index($item, $icon);
|
||||
@if $index {
|
||||
$return: if($index == 1, 2, $index);
|
||||
@return nth($item, $return);
|
||||
}
|
||||
}
|
||||
@return false;
|
||||
}
|
||||
|
||||
@mixin i($icon) {
|
||||
.#{$icon}.icon-left a:before,
|
||||
.#{$icon}.icon-right a:after,
|
||||
i.#{$icon}:before {
|
||||
content: "#{match($entypo-icons, $icon)}";
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin icon($icon) {
|
||||
@if (type-of($icon) == list) {
|
||||
@each $i in $icon {
|
||||
@include i($i);
|
||||
}
|
||||
}
|
||||
@elseif ($icon == all) {
|
||||
@each $icon in $entypo-icons {
|
||||
@include i(nth($icon, 1));
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@include i($icon);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
|
||||
// Make line-height equal to an element's height
|
||||
|
||||
@mixin line-and-height($height) {
|
||||
height: $height;
|
||||
line-height: $height - 2;
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
// Color Pallete
|
||||
|
||||
@function getColor($key, $state: false, $list: $ui-coloring) {
|
||||
@each $color in $list {
|
||||
@if $key == nth($color, 1) and $state == default {
|
||||
@return nth($color, 2);
|
||||
}
|
||||
@else if $key == nth($color, 1) and $state == hover {
|
||||
@return nth($color, 3);
|
||||
}
|
||||
@else if $key == nth($color, 1) {
|
||||
@return nth($color, 1);
|
||||
}
|
||||
}
|
||||
@return false;
|
||||
}
|
||||
|
||||
@mixin palette($shade, $palette-text-color:false) {
|
||||
@if $shade == getColor($shade) {
|
||||
@if $palette-text-color != false {
|
||||
color: $palette-text-color;
|
||||
}
|
||||
@else {
|
||||
color: lighten(getColor($shade, default), 80%);
|
||||
}
|
||||
background: getColor($shade, default);
|
||||
border: 1px solid getColor($shade, default);
|
||||
&:hover {
|
||||
background: getColor($shade, hover);
|
||||
border: 1px solid darken(getColor($shade, hover), 3%);
|
||||
}
|
||||
&:active {
|
||||
background: darken(getColor($shade, default), 10%);
|
||||
border: 1px solid darken(getColor($shade, default), 10%);
|
||||
}
|
||||
|
||||
@if $shade == default {
|
||||
@if $palette-text-color != false {
|
||||
color: $palette-text-color;
|
||||
}
|
||||
@else {
|
||||
color: darken(getColor($shade, default), 61.5%);
|
||||
}
|
||||
border: 1px solid getColor($shade, default);
|
||||
&:hover {
|
||||
border: 1px solid darken(getColor($shade, hover), 5%);
|
||||
}
|
||||
}
|
||||
@if $shade == warning {
|
||||
@if $palette-text-color != false {
|
||||
color: $palette-text-color;
|
||||
}
|
||||
@else {
|
||||
color: darken(getColor($shade, hover), 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@if $palette-text-color != false {
|
||||
color: $palette-text-color;
|
||||
}
|
||||
@else {
|
||||
color: lighten($shade, 80%);
|
||||
}
|
||||
background: $shade;
|
||||
border: 1px solid $shade;
|
||||
&:hover {
|
||||
background: lighten($shade, 30%);
|
||||
border: 1px solid lighten($shade, 27%);
|
||||
}
|
||||
&:active {
|
||||
background: darken($shade, 10%);
|
||||
border: 1px solid darken($shade, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
// Responsive Mixins
|
||||
|
||||
@mixin respond($media) {
|
||||
@if $media == portrait-phones {
|
||||
@media only screen and (max-width: $min-device-width) { @content; }
|
||||
}
|
||||
@else if $media == landscape-phones {
|
||||
@media only screen and (min-width: breakpoint($min-device-width)) and (max-width: breakpoint($tablet-device-width)) { @content; }
|
||||
}
|
||||
@else if $media == all-phones {
|
||||
@media only screen and (max-width: breakpoint($tablet-device-width)) { @content; }
|
||||
}
|
||||
@else if $media == portrait-tablets {
|
||||
@media only screen and (max-width: $tablet-device-width) { @content; }
|
||||
}
|
||||
@else if $media == tablets {
|
||||
@media only screen and (min-width: $tablet-device-width) and (max-width: $document-width - 1) { @content; }
|
||||
}
|
||||
@else if $media == desktop {
|
||||
@media only screen and (min-width: $tablet-device-width) { @content; }
|
||||
}
|
||||
@else if $media == document-width {
|
||||
@media only screen and (max-width: $document-width + 20) { @content; }
|
||||
}
|
||||
@else if $media == large-screens {
|
||||
@media only screen and (min-width: $max-device-width) { @content; }
|
||||
}
|
||||
@else if $media == print {
|
||||
@media print { @content; }
|
||||
}
|
||||
@else {
|
||||
@media only screen and ('#{$media}') { @content; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
|
||||
|
||||
// Gumby Semantic Grid Mixin //
|
||||
|
||||
|
||||
// Mixin for rows
|
||||
|
||||
@mixin row($nested: false) {
|
||||
@if $nested == nested {
|
||||
@include nestedRow();
|
||||
}
|
||||
@else {
|
||||
width: 100%;
|
||||
max-width: $row-max-width + 40px;
|
||||
min-width: $min-device-width;
|
||||
margin: 0 auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
@extend %clearfix;
|
||||
}
|
||||
> *:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
@include respond(all-phones) {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin for rows that are nested within columns
|
||||
|
||||
@mixin nestedRow() {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
@extend %clearfix;
|
||||
}
|
||||
|
||||
|
||||
@mixin column($columns:$columns, $alignment: false, $behavior: false, $hybrid: false) {
|
||||
@extend %columnconfig;
|
||||
@if $alignment == center {
|
||||
float: none;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
width: columns($columns, $hybrid);
|
||||
@include respond(all-phones) {
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@else if $behavior == collapse {
|
||||
@extend %collapse;
|
||||
width: columns($columns, $hybrid);
|
||||
@include respond(all-phones) {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
width: columns($columns, $hybrid);
|
||||
@include respond(all-phones) {
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hybrid($columns:$columns, $alignment: false, $behavior: false) {
|
||||
@include column($columns, $alignment, $behavior, true);
|
||||
}
|
||||
|
||||
@mixin push($columns, $hybrid-grid: false) {
|
||||
@if $hybrid-grid == hybrid {
|
||||
margin-left: push_x($columns, false, true);
|
||||
&:first-child {
|
||||
margin-left: push_x($columns, true, true);
|
||||
}
|
||||
@include respond(all-phones) {
|
||||
margin-left: 0;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
margin-left: push_x($columns);
|
||||
&:first-child {
|
||||
margin-left: push_x($columns, true);
|
||||
}
|
||||
@include respond(all-phones) {
|
||||
margin-left: 0;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pull($direction: false, $columns: 0, $width: 0, $hybrid-grid: false) {
|
||||
@if $direction == left {
|
||||
@extend %pull-left;
|
||||
@if ($columns > 0 and $width > 0) {
|
||||
@if ($hybrid-grid == hybrid) {
|
||||
margin-left: pull_x($columns, $width, true);
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
margin-left: pull_x($columns, $width);
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@elseif $direction == none {
|
||||
@extend %pull-none;
|
||||
}
|
||||
@else {
|
||||
@extend %pull-right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Placeholders for the Semantic Grid
|
||||
|
||||
%container {
|
||||
padding: 0 $gutter-in-px + px;
|
||||
@include respond(all-phones) {
|
||||
min-width: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Clearfix placeholder
|
||||
%clearfix { @include clearfix(); }
|
||||
|
||||
// Clearfix placeholder for mobile
|
||||
%mobilefix { @include mobilefix(); }
|
||||
|
||||
// Row placeholders
|
||||
%row { @include row(); }
|
||||
%nestedrow { @include row(); }
|
||||
|
||||
// Column Configuration placeholder
|
||||
%columnconfig {
|
||||
margin-left: $gutter;
|
||||
float: $default-float;
|
||||
min-height: 1px;
|
||||
position: relative;
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
%pull-right { float: right; }
|
||||
%pull-left { float: left; }
|
||||
%pull-none { float: none; }
|
||||
|
||||
// Collapse Gutters
|
||||
%collapse {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
// Shapes
|
||||
|
||||
@mixin shape($shape: square, $shape-radius: false) {
|
||||
@if $shape == oval {
|
||||
@include border-radius(1000px);
|
||||
}
|
||||
@else if $shape == circle {
|
||||
@include border-radius(1000px);
|
||||
}
|
||||
@else if $shape == pill-left {
|
||||
@include border-radius(500px 0 0 500px);
|
||||
}
|
||||
@else if $shape == pill-right {
|
||||
@include border-radius(0 500px 500px 0);
|
||||
}
|
||||
@else if $shape-radius != false {
|
||||
@include border-radius($shape-radius);
|
||||
}
|
||||
@else {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
// Strip out units to do math functions.
|
||||
@function strip-units($number) {
|
||||
@return $number / ($number * 0 + 1);
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
// CSS Tooltips
|
||||
|
||||
@mixin tooltip($tt-min-width, $tt-bgcolor, $tt-position, $tt-align) {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
background: $tt-bgcolor;
|
||||
border: 1px solid $tt-bgcolor;
|
||||
border-bottom: 0;
|
||||
@include border-radius(3px);
|
||||
padding: em(8) em(12);
|
||||
width: auto;
|
||||
min-width: $tt-min-width;
|
||||
max-width: 500px;
|
||||
position: absolute;
|
||||
@if $tt-position == "bottom" {
|
||||
@if $tt-align == "right" { right: 0 } @else { left: 0; }
|
||||
top: 101%;
|
||||
margin-top: 8px;
|
||||
} @else if $tt-position == "top" {
|
||||
@if $tt-align == "right" { right: 0 } @else { left: 0; }
|
||||
bottom: 101%;
|
||||
margin-bottom: 8px;
|
||||
} @else if $tt-position == "left" {
|
||||
right: 101%;
|
||||
top: -35%;
|
||||
margin-right: 8px;
|
||||
} @else if $tt-position == "right" {
|
||||
left: 101%;
|
||||
top: -35%;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@if $tt-align == "right" {
|
||||
text-align: right;
|
||||
} @else if $tt-align == "left" {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
color: #fff;
|
||||
content: attr(data-tooltip);
|
||||
line-height: 1.5;
|
||||
font-size: $norm;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
@include transition(opacity 0.1s ease);
|
||||
@include opacity(0);
|
||||
pointer-events: none;
|
||||
|
||||
@if $tt-pretty != "no" {
|
||||
@include background-image(linear-gradient($tt-position, lighten($tt-bgcolor, 12.5%), $tt-bgcolor));
|
||||
@include box-shadow(0 0 5px 0 rgba($tt-bgcolor,.25));
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
@if $tt-position == "bottom" {
|
||||
top: 101%;
|
||||
@if $tt-align == "right" { right: 8px } @else { left: 8px; }
|
||||
border-bottom: 9px solid $tt-bgcolor !important;
|
||||
border-left: 9px solid transparent;
|
||||
border-right: 9px solid transparent;
|
||||
} @else if $tt-position == "top" {
|
||||
bottom: 101%;
|
||||
@if $tt-align == "right" { right: 8px } @else { left: 8px; }
|
||||
border-top: 9px solid $tt-bgcolor !important;
|
||||
border-left: 9px solid transparent;
|
||||
border-right: 9px solid transparent;
|
||||
} @else if $tt-position == "left" {
|
||||
top: 3px;
|
||||
right: 101%;
|
||||
border-left: 9px solid $tt-bgcolor !important;
|
||||
border-top: 9px solid transparent;
|
||||
border-bottom: 9px solid transparent;
|
||||
} @else if $tt-position == "right" {
|
||||
top: 3px;
|
||||
left: 101%;
|
||||
border-right: 9px solid $tt-bgcolor !important;
|
||||
border-top: 9px solid transparent;
|
||||
border-bottom: 9px solid transparent;
|
||||
}
|
||||
@include transition(opacity 0.1s ease);
|
||||
@include opacity(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover:after,
|
||||
&:hover:before {
|
||||
@include transition(opacity 0.1s ease);
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
// Typography mixins
|
||||
|
||||
// Fonts in rems with px fallback
|
||||
|
||||
@mixin font-size($size, $is-important: false) {
|
||||
$size: if(unitless($size), $size, $size / 1px);
|
||||
|
||||
@if $is-important {
|
||||
font-size: $size + px !important;
|
||||
font-size: ($size / strip-units($base-font-size)) + rem !important;
|
||||
} @else {
|
||||
font-size: $size + px;
|
||||
font-size: ($size / strip-units($base-font-size)) + rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
// Visibility Mixins
|
||||
|
||||
// Mixin for hidden
|
||||
|
||||
@mixin hidden($media) {
|
||||
@include respond($media) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin for visible
|
||||
|
||||
@mixin visible($media) {
|
||||
@include respond($media) {
|
||||
display: inherit !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
* Gumby Framework
|
||||
* ---------------
|
||||
*
|
||||
* Follow @gumbycss on twitter and spread the love.
|
||||
* We worked super hard on making this awesome and released it to the web.
|
||||
* All we ask is you leave this intact. #gumbyisawesome
|
||||
*
|
||||
* Gumby Framework
|
||||
* http://gumbyframework.com
|
||||
*
|
||||
* Built with love by your friends @digitalsurgeons
|
||||
* http://www.digitalsurgeons.com
|
||||
*
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
@import "modular-scale";
|
||||
|
||||
@import "var/settings";
|
||||
@import "var/lists";
|
||||
@import "var/icons/entypo";
|
||||
|
||||
@import "compass";
|
||||
@import "compass/reset";
|
||||
|
||||
@import "functions/all";
|
||||
|
||||
@import "base";
|
||||
@import "fonts";
|
||||
@import "typography";
|
||||
@import "grid";
|
||||
@import "ui/all";
|
||||
@import "shame";
|
||||
|
||||
@import "custom";
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import "navbar";
|
||||
@import "buttons";
|
||||
@import "icons";
|
||||
@import "forms";
|
||||
@import "labels";
|
||||
@import "tabs";
|
||||
@import "images";
|
||||
@import "video";
|
||||
@import "toggles";
|
||||
@import "tables";
|
||||
@import "tooltips";
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
/* Buttons */
|
||||
|
||||
// Buttons
|
||||
@import "../functions/button-size";
|
||||
|
||||
// Button structure
|
||||
.btn, .skiplink {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
background: $default-color;
|
||||
-webkit-appearance: none;
|
||||
font-family: $font-family;
|
||||
font-weight: $button-font-weight;
|
||||
padding: 0 !important;
|
||||
text-align: center;
|
||||
.pretty & { @extend .pretty.btn; }
|
||||
.metro & { @extend .metro.btn; }
|
||||
|
||||
> a, input, button {
|
||||
display: block;
|
||||
padding: 0 $default-button-padding;
|
||||
color: $white;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
input, button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
font-size: 100%;
|
||||
cursor: pointer;
|
||||
font-weight: $type-font-weight;
|
||||
@include appearance(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Button Shapes & Sizes
|
||||
.btn, .skiplink {
|
||||
&.xlarge {
|
||||
@include button-size(xlarge);
|
||||
}
|
||||
&.large {
|
||||
@include button-size(large);
|
||||
}
|
||||
&.medium {
|
||||
@include button-size(medium);
|
||||
a {
|
||||
padding: 0 ms(1);
|
||||
}
|
||||
}
|
||||
&.small {
|
||||
@include button-size(small);
|
||||
a {
|
||||
padding: 0 ms(-1);
|
||||
}
|
||||
}
|
||||
|
||||
&.oval {
|
||||
@include shape(oval);
|
||||
}
|
||||
|
||||
&.pill-left {
|
||||
@include shape(pill-left);
|
||||
}
|
||||
|
||||
&.pill-right {
|
||||
@include shape(pill-right);
|
||||
}
|
||||
}
|
||||
|
||||
// Button Colors & Styles
|
||||
.btn, .skiplink {
|
||||
@each $shade in $ui-coloring {
|
||||
&.#{nth($shade, 1)} {
|
||||
background: nth($shade, 2);
|
||||
border: 1px solid nth($shade, 2);
|
||||
&:hover {
|
||||
background: lighten(nth($shade, 2), 10%);
|
||||
}
|
||||
&:active {
|
||||
background: darken(nth($shade, 2), 10%);
|
||||
}
|
||||
@if nth($shade, 1) == default {
|
||||
color: darken(nth($shade, 2), 61.5%);
|
||||
border: 1px solid nth($shade, 2);
|
||||
&:hover {
|
||||
border: 1px solid darken(nth($shade, 2), 5%);
|
||||
}
|
||||
a, input, button {
|
||||
color: darken(nth($shade, 2), 61.5%);
|
||||
}
|
||||
}
|
||||
@if nth($shade, 1) == warning {
|
||||
color: darken(nth($shade, 2), 40%);
|
||||
a, input, button {
|
||||
color: darken(nth($shade, 2), 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn.metro,
|
||||
.skiplink.metro,
|
||||
.btn.pretty.squared,
|
||||
.pretty .btn.squared {
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.btn.pretty,
|
||||
.skiplink.pretty,
|
||||
.btn.metro.rounded,
|
||||
.metro .btn.rounded {
|
||||
@include border-radius($button-radius);
|
||||
}
|
||||
|
||||
|
||||
// Buttons with Gradients
|
||||
.btn, .skiplink {
|
||||
&.pretty {
|
||||
@each $grade in $ui-coloring {
|
||||
&.#{nth($grade, 1)} {
|
||||
@include background-image(linear-gradient(lighten(nth($grade, 2), 20%), saturate(nth($grade, 2), 5%)));
|
||||
@include box-shadow(inset 0 0 3px lighten(nth($grade, 2), 45%));
|
||||
border: 1px solid darken(nth($grade, 2), 15%);
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten(nth($grade, 3), 15%), saturate(nth($grade, 3), 5%)));
|
||||
@include box-shadow(inset 0 0 3px lighten(nth($grade, 3), 40%));
|
||||
border: 1px solid darken(nth($grade, 3), 15%);
|
||||
}
|
||||
&:active {
|
||||
@include background-image(linear-gradient(saturate(nth($grade, 2), 5%), lighten(nth($grade, 2), 20%)));
|
||||
@include box-shadow(inset 0 0 3px lighten(nth($grade, 2), 50%));
|
||||
}
|
||||
@if nth($grade, 1) == default {
|
||||
a, input, button {
|
||||
text-shadow: 0 1px 1px lighten(nth($grade, 2), 20%);
|
||||
}
|
||||
}
|
||||
@elseif nth($grade, 1) == warning {
|
||||
color: darken(nth($grade, 2), 40%);
|
||||
a, input, button {
|
||||
text-shadow: 0 1px 1px lighten(nth($grade, 2), 20%);
|
||||
}
|
||||
}
|
||||
@else {
|
||||
a, input, button {
|
||||
text-shadow: 0 1px 1px darken(nth($grade, 2), 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,392 @@
|
|||
/* Form Styles */
|
||||
|
||||
@import "../functions/forms";
|
||||
|
||||
|
||||
form {
|
||||
margin: 0 0 18px;
|
||||
label {
|
||||
display: block;
|
||||
@include font-size($norm);
|
||||
@include adjust-leading-to(1);
|
||||
cursor: pointer;
|
||||
margin-bottom: 9px;
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
dt {
|
||||
margin: 0;
|
||||
}
|
||||
textarea {
|
||||
height: 150px;
|
||||
}
|
||||
ul, ul li {
|
||||
margin-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
fieldset {
|
||||
@include rhythm-borders(1px,1,$norm,solid);
|
||||
border-color: darken($default-color, 10%);
|
||||
margin: 18px 0;
|
||||
legend {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
margin-bottom: 10px;
|
||||
vertical-align: middle;
|
||||
// Font-size 16px for weird form style error
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
&.metro, .metro {
|
||||
@include border-radius(0);
|
||||
}
|
||||
input, input[type="*"], textarea {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
-webkit-appearance: none;
|
||||
font-family: $font-family;
|
||||
font-weight: $font-weight-light;
|
||||
@include font-size($norm);
|
||||
@include box-shadow(none);
|
||||
}
|
||||
.input {
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
background: #fff;
|
||||
border: 1px solid darken($default-color, 10%);
|
||||
@include line-and-height(height-calc($norm));
|
||||
@include font-size($norm);
|
||||
@include border-radius(4px);
|
||||
&.search {
|
||||
@include line-and-height(height-calc($norm));
|
||||
@include shape(oval);
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.input.textarea {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
input, .input {
|
||||
@each $width in $field-sizes {
|
||||
&.#{nth($width, 1)} {
|
||||
@include input-size(#{nth($width, 1)});
|
||||
margin:0;
|
||||
&:last-child {
|
||||
margin-left: -4px;
|
||||
}
|
||||
&:first-child {
|
||||
margin-right: 3.94%;
|
||||
margin-left: 0;
|
||||
}
|
||||
&:first-child:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label + {
|
||||
@include input-sizes-list() {
|
||||
&:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond(document-width) {
|
||||
.xxwide:first-child, .xxwide:last-child {
|
||||
margin-right: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
/* remove inline-block white-space — A 0px font-size = 0px of white space */
|
||||
.prepend, .append {
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 3.5px;
|
||||
}
|
||||
|
||||
.prepend input,
|
||||
.prepend .input,
|
||||
.append input,
|
||||
.append .input {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.prepend input,
|
||||
.prepend .input,
|
||||
.prepend.append input:last-child,
|
||||
.append *:last-child {
|
||||
@include border-radius(0px $button-radius $button-radius 0);
|
||||
}
|
||||
|
||||
.append input,
|
||||
.append .input,
|
||||
.prepend.append input:first-child,
|
||||
.prepend *:first-child {
|
||||
@include border-radius($button-radius 0 0 $button-radius);
|
||||
}
|
||||
|
||||
.prepend.append input {
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.prepend.append input:last-child {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.prepend .adjoined, .append .adjoined, .prepend .btn, .append .btn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom:0;
|
||||
z-index: 99;
|
||||
}
|
||||
.prepend .btn, .append .btn {
|
||||
a, input, button {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.prepend .adjoined, .append .adjoined {
|
||||
padding: 0 10px 0 10px;
|
||||
background: $default-color;
|
||||
border: 1px solid darken($default-color, 10%);
|
||||
font-family: $font-family;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $body-font-color;
|
||||
@include font-size($norm);
|
||||
@include line-and-height(height-calc($norm));
|
||||
}
|
||||
|
||||
.prepend .adjoined, .prepend .btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.adjoined:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.append .adjoined, .append .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.append button, .prepend button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.prepend input:first-child,
|
||||
.append input:first-child,
|
||||
.prepend .input:first-child,
|
||||
.append .input:first-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.double input, .double .input {
|
||||
width: 50% !important;
|
||||
&:last-child {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
input, .input, textarea, .textarea, .radio span, .checkbox span, .picker {
|
||||
@include transition-duration(.2s);
|
||||
}
|
||||
@each $error in danger $danger-color, warning $warning-color, success $success-color {
|
||||
&.#{nth($error, 1)} {
|
||||
&:after {
|
||||
@if($icons != ""){
|
||||
font-family: "#{$icons}";
|
||||
@if nth($error, 1) == danger {
|
||||
content: "#{$entypo-icon-cancel-circled}";
|
||||
}
|
||||
@if nth($error, 1) == warning {
|
||||
content: "#{$entypo-icon-attention}";
|
||||
}
|
||||
@if nth($error, 1) == success {
|
||||
content: "#{$entypo-icon-check}";
|
||||
}
|
||||
font-size: $norm;
|
||||
position: absolute;
|
||||
top: percentage((strip-units($base-font-size)) / 100) - 2;
|
||||
right: 15px;
|
||||
z-index: 999;
|
||||
color: nth($error, 2);
|
||||
}
|
||||
}
|
||||
|
||||
&.no-icon:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// <input> does not allow :before & :after
|
||||
// pseudo elements. Removing validation
|
||||
// icons from those elements to avoid
|
||||
// edge-case styling issues
|
||||
&.append:after, &.prepend:after {
|
||||
content: "";
|
||||
}
|
||||
input, .input, textarea, .textarea, .radio span, .checkbox span, .picker {
|
||||
border-color: nth($error, 2);
|
||||
background: lighten(nth($error, 2), 35%);
|
||||
}
|
||||
|
||||
input, .input, textarea, .textarea,
|
||||
.radio span, .checkbox span, .picker,
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder,
|
||||
input:-moz-placeholder,
|
||||
textarea:-moz-placeholder
|
||||
textarea { color: nth($error, 2); }
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.picker {
|
||||
@each $error in danger $danger-color, warning $warning-color, success $success-color {
|
||||
&.#{nth($error, 1)} {
|
||||
border-color: nth($error, 2);
|
||||
color: nth($error, 2);
|
||||
background: lighten(nth($error, 2), 35%);
|
||||
@include transition-duration(.2s);
|
||||
select, &:after { color: nth($error, 2); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.field .text input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
// checkboxes/radio buttons only styled where JS supported
|
||||
.no-js {
|
||||
.radio input {
|
||||
-webkit-appearance: radio;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.checkbox input {
|
||||
-webkit-appearance: checkbox;
|
||||
}
|
||||
.radio input, .checkbox input {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.js .field {
|
||||
.radio, .checkbox {
|
||||
@each $error in danger $danger-color, warning $warning-color, success $success-color {
|
||||
&.#{nth($error, 1)} {
|
||||
color: nth($error, 2);
|
||||
@if nth($error, 1) == success {
|
||||
color: $body-font-color;
|
||||
i { color: nth($error, 2); }
|
||||
}
|
||||
span {
|
||||
border-color: nth($error, 2);
|
||||
color: nth($error, 2);
|
||||
background: lighten(nth($error, 2), 35%);
|
||||
@include transition-duration(.2s);
|
||||
}
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
&.checked i {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
border: solid 1px #ccc;
|
||||
background: #fefefe;
|
||||
}
|
||||
input[type="radio"], input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.radio span {
|
||||
@include border-radius(8px);
|
||||
}
|
||||
.checkbox span {
|
||||
@include border-radius(3px);
|
||||
}
|
||||
}
|
||||
|
||||
.field .text input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
|
||||
/* Form Picker Element (<select>) */
|
||||
|
||||
.picker {
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
margin: 0 0 2px 1.2%;
|
||||
overflow: hidden;
|
||||
border: 1px solid darken($default-color, 5%);
|
||||
@include border-radius(4px);
|
||||
font-family: $font-family;
|
||||
font-weight: $font-weight-semibold;
|
||||
height: auto;
|
||||
@include background-image(linear-gradient(lighten($default-color, 20%), $default-color));
|
||||
&:after {
|
||||
content: "\25BE";
|
||||
font-family: $icons;
|
||||
z-index: 0;
|
||||
position:absolute;
|
||||
right: 8%;
|
||||
top: 50%;
|
||||
margin-top: -12px;
|
||||
color: $body-font-color;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
select {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-width: 100%;
|
||||
width: 135%;
|
||||
height: 34px;
|
||||
padding: 6px 45px 6px 15px;
|
||||
color: $body-font-color;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
@include font-size($norm);
|
||||
}
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
/* Icons */
|
||||
|
||||
[class^="icon-"] a:before,
|
||||
[class*=" icon-"] a:before,
|
||||
[class^="icon-"] a:after,
|
||||
[class*=" icon-"] a:after,
|
||||
i[class^="icon-"],
|
||||
i[class*=" icon-"] {
|
||||
font-family: "#{$icons}";
|
||||
position:absolute;
|
||||
text-decoration:none;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
i[class^="icon-"],
|
||||
i[class*=" icon-"] {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
min-width: 20px;
|
||||
margin: 0 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
/* Images */
|
||||
|
||||
.image {
|
||||
line-height:0;
|
||||
margin-bottom: 20px;
|
||||
&.circle {
|
||||
@include border-radius(50% !important);
|
||||
overflow: hidden;
|
||||
width: auto;
|
||||
}
|
||||
&.rounded {
|
||||
overflow: hidden;
|
||||
@include border-radius($button-radius $button-radius);
|
||||
}
|
||||
&.photo {
|
||||
border: 5px solid #fff;
|
||||
@include box-shadow(0 0 1px $body-font-color);
|
||||
&.polaroid {
|
||||
padding-bottom: 50px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
/* Labels */
|
||||
|
||||
.badge, .label {
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
font-family: Helvetica, arial, verdana, sans-serif;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
text-align:center;
|
||||
color: #fff;
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
@each $shade in $ui-coloring {
|
||||
&.#{nth($shade, 1)} {
|
||||
background: nth($shade, 2);
|
||||
border: 1px solid nth($shade, 2);
|
||||
@if nth($shade, 1) == default {
|
||||
color: darken(nth($shade, 2), 61.5%);
|
||||
&:hover {
|
||||
border-color: darken(nth($shade, 2), 5%);
|
||||
}
|
||||
a {
|
||||
color: darken(nth($shade, 2), 61.5%);
|
||||
}
|
||||
}
|
||||
@if nth($shade, 1) == warning {
|
||||
color: darken(nth($shade, 2), 40%);
|
||||
a {
|
||||
color: darken(nth($shade, 2), 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.light {
|
||||
background: #fff;
|
||||
color: $body-font-color;
|
||||
border: 1px solid $default-color;
|
||||
a {
|
||||
color: $body-link-color;
|
||||
}
|
||||
}
|
||||
&.dark {
|
||||
background: #212121;
|
||||
border: 1px solid #212121;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0 10px;
|
||||
@include font-size(ms(0, 14px));
|
||||
@include border-radius(10px);
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 0 10px;
|
||||
@include font-size(ms(0, 12px));
|
||||
@include border-radius(2px);
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 0 10px;
|
||||
font-family: $font-family;
|
||||
font-weight: $font-weight-semibold;
|
||||
list-style-type: none;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: $norm / 2;
|
||||
@include font-size(ms(0, 14px));
|
||||
@include border-radius($button-radius);
|
||||
@each $shade in $ui-coloring {
|
||||
&.#{nth($shade, 1)} {
|
||||
background: lighten(nth($shade, 2), 20%);
|
||||
border: 1px solid nth($shade, 2);
|
||||
color: darken(nth($shade, 2), 20%);
|
||||
@if nth($shade, 1) == info {
|
||||
color: $default-color;
|
||||
}
|
||||
@if nth($shade, 1) == default {
|
||||
color: darken(nth($shade, 2), 61.5%);
|
||||
border: 1px solid nth($shade, 2);
|
||||
}
|
||||
@if nth($shade, 1) == warning {
|
||||
color: darken(nth($shade, 2), 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,440 @@
|
|||
/* Navigation (with dropdowns) */
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
background: $navbar-color; // Change this color in settings to change the navbar color
|
||||
position: relative;
|
||||
@include respond(all-phones) {
|
||||
border: none;
|
||||
.column, .columns {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
}
|
||||
&.pinned {
|
||||
position: absolute;
|
||||
}
|
||||
a.toggle {
|
||||
display: none;
|
||||
|
||||
// Navigation Toggle Mobile styles
|
||||
@include respond(all-phones) {
|
||||
top: 18%;
|
||||
right: 4%;
|
||||
width: 46px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: $navbar-link-color;
|
||||
background: $navbar-color;
|
||||
@include line-and-height(40px);
|
||||
@include border-radius($button-radius);
|
||||
@include font-size($larger);
|
||||
&:hover {
|
||||
background: lighten($navbar-color, 5%);
|
||||
}
|
||||
&:active, &.active {
|
||||
background: darken($navbar-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .logo {
|
||||
display: inline-block;
|
||||
margin: 0 $gutter 0 0;
|
||||
padding: 0;
|
||||
@include line-and-height(height-calc($larger - 3));
|
||||
a {
|
||||
display: block;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
@include line-and-height(height-calc($larger - 3));
|
||||
img {
|
||||
max-height: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar Logo Mobile Styles
|
||||
@include respond(all-phones) {
|
||||
float: $default-float;
|
||||
display: inline;
|
||||
a {
|
||||
padding: 0;
|
||||
img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar ul {
|
||||
display: table;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
float: none;
|
||||
|
||||
// Navbar Navigation List Mobile Specific Styles
|
||||
@include respond(all-phones) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background: darken($navbar-color, 5%);
|
||||
&.active {
|
||||
height: auto;
|
||||
max-height: 600px;
|
||||
z-index: 999998;
|
||||
@include transition-duration(.5s);
|
||||
@include box-shadow(0 2px 2px darken($navbar-color, 15%));
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
@include line-and-height(height-calc($larger - 3));
|
||||
|
||||
// Navbar List Item Mobile Specific Styles
|
||||
@include respond(all-phones) {
|
||||
display: block;
|
||||
position: relative;
|
||||
min-height: 50px;
|
||||
max-height: 320px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
border-right: 0 !important;
|
||||
@include box-shadow(none);
|
||||
@include transition-duration(.5s);
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
padding: 0 ms(0);
|
||||
white-space: nowrap;
|
||||
color: $navbar-link-color;
|
||||
text-shadow: 0 1px 2px darken($navbar-color, 20%),
|
||||
0 1px 0 darken($navbar-color, 20%);
|
||||
@include line-and-height(height-calc($larger - 3));
|
||||
@include font-size($norm);
|
||||
i.icon-popup {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border-color: darken($navbar-color, 30%) !important;
|
||||
}
|
||||
&.field {
|
||||
margin-bottom: 0 !important;
|
||||
margin-right: 0;
|
||||
@include respond(all-phones) {
|
||||
padding: 0 $gutter-in-px;
|
||||
}
|
||||
input.search {
|
||||
background: darken($navbar-color, 20%);
|
||||
border: none;
|
||||
color: $default-color;
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: $min-device-width;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
background: lighten($default-color, 3%);
|
||||
overflow: hidden;
|
||||
z-index: 999;
|
||||
}
|
||||
// Navigation Dropdown Mobile Specific Styles
|
||||
@include respond(all-phones) {
|
||||
.dropdown {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
@include box-shadow(none !important);
|
||||
}
|
||||
&.active .dropdown {
|
||||
border-bottom: 1px solid darken($navbar-color, 10%);
|
||||
}
|
||||
&.active .dropdown ul {
|
||||
position: relative;
|
||||
top: 0;
|
||||
background: darken($navbar-color, 8%);
|
||||
min-height: 50px;
|
||||
max-height: 250px;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
@include box-shadow(none !important);
|
||||
li {
|
||||
min-height: 50px;
|
||||
border-bottom: darken($navbar-color, 5%);
|
||||
a {
|
||||
color: $white;
|
||||
border-bottom: 1px solid darken($navbar-color, 10%);
|
||||
&:hover {color: $body-link-color;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
// Mobile Only Navbar Styles
|
||||
@include respond(tablets) {
|
||||
> ul > li > .btn a {
|
||||
padding: 0 $small 0 $small !important;
|
||||
}
|
||||
ul > li .dropdown ul li.active .dropdown {
|
||||
left: -$min-device-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navcontain {
|
||||
height: $navcontain-height;
|
||||
@include respond(portrait-tablets) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Pretty Navigation Styles
|
||||
|
||||
.pretty.navbar {
|
||||
@include background-image(linear-gradient(lighten($navbar-color, 20%),darken($navbar-color, 10%)));
|
||||
@include box-shadow(inset 0 1px 1px lighten($navbar-color, 20%),
|
||||
0 1px 2px rgba(0,0,0,0.80) !important); /* Remove this line if you dont want a dropshadow on your navigation*/
|
||||
|
||||
// Pretty Nav Toggle Styles
|
||||
@include respond(all-phones) {
|
||||
a.toggle {
|
||||
border: 1px solid darken($navbar-color, 5%);
|
||||
@include background-image(linear-gradient(lighten($navbar-color, 20%), $navbar-color));
|
||||
@include box-shadow(inset 0 1px 2px lighten($navbar-color, 25%),
|
||||
inset 0 -1px 1px lighten($navbar-color, 5%),
|
||||
inset 1px 0 1px lighten($navbar-color, 5%),
|
||||
inset -1px 0 1px lighten($navbar-color, 5%),
|
||||
0 1px 1px lighten($navbar-color, 10%));
|
||||
i {
|
||||
@include text-shadow(0 1px 1px darken($navbar-color, 20%));
|
||||
}
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($navbar-color, 25%), lighten($navbar-color, 5%)));
|
||||
}
|
||||
&:active, &.active {
|
||||
@include background-image(linear-gradient(darken($navbar-color, 5%), $navbar-color));
|
||||
@include box-shadow(0 1px 1px lighten($navbar-color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
&.row {
|
||||
@include border-radius($button-radius);
|
||||
@include respond(all-phones) {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
ul li.field input.search {
|
||||
@include background-image(linear-gradient(darken($navbar-color, 20%), lighten($navbar-color, 2%)));
|
||||
border: none;
|
||||
@include box-shadow(0 1px 2px lighten($navbar-color, 25%) !important); /* Remove this line if you dont want a dropshadow on your navigation*/
|
||||
}
|
||||
> ul > li:first-child, .pretty.navbar > ul > li:first-child a:hover {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown menu styles
|
||||
|
||||
.navbar li .dropdown {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: $min-device-width;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
background: lighten($default-color, 3%);
|
||||
overflow: hidden;
|
||||
z-index: 999;
|
||||
// Navigation Dropdown Mobile Specific Styles
|
||||
@include respond(all-phones) {
|
||||
.dropdown {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
@include box-shadow(none !important);
|
||||
}
|
||||
&.active .dropdown {
|
||||
border-bottom: 1px solid darken($navbar-color, 10%);
|
||||
}
|
||||
&.active .dropdown ul {
|
||||
position: relative;
|
||||
top: 0;
|
||||
background: darken($navbar-color, 8%);
|
||||
min-height: 50px;
|
||||
max-height: 250px;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
@include box-shadow(none !important);
|
||||
li {
|
||||
min-height: 50px;
|
||||
border-bottom: darken($navbar-color, 5%);
|
||||
a {
|
||||
color: $white;
|
||||
border-bottom: 1px solid darken($navbar-color, 10%);
|
||||
&:hover {color: $body-link-color;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar li .dropdown ul {
|
||||
margin: 0;
|
||||
display: block;
|
||||
> li {
|
||||
position:relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
@include border-radius(none);
|
||||
@include respond(tablets) {
|
||||
max-width: $min-device-width;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 0 20px;
|
||||
color: $body-link-color;
|
||||
border-bottom: 1px solid $horizontal-rule-color;
|
||||
text-shadow: none;
|
||||
@include line-and-height(height-calc($large - 3));
|
||||
@include respond(all-phones) {
|
||||
padding: 0 $gutter-in-px;
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
display: none;
|
||||
background: lighten($default-color, 10%);
|
||||
}
|
||||
}
|
||||
li:first-child a {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.gumby-no-touch .navbar ul li:hover > a,
|
||||
.gumby-touch .navbar ul li.active > a {
|
||||
position: relative;
|
||||
background: $info-hover-color;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.gumby-no-touch .navbar ul li:hover .dropdown,
|
||||
.gumby-touch .navbar ul li.active .dropdown {
|
||||
min-height: 50px;
|
||||
max-height: $tablet-device-width - 207;
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border-top: 1px solid darken($navbar-color, 5%);
|
||||
@include box-shadow(0px 3px 4px rgba(0,0,0,.3));
|
||||
}
|
||||
|
||||
.gumby-no-touch .navbar ul li:hover .dropdown ul {
|
||||
position: relative;
|
||||
top: 0;
|
||||
min-height: 50px;
|
||||
max-height: 250px;
|
||||
height: auto;
|
||||
@include box-shadow(none !important);
|
||||
@include transition-duration(.5s);
|
||||
@include respond(all-phones) {
|
||||
overflow: auto;
|
||||
background: darken($navbar-color, 8%);
|
||||
li {
|
||||
border-bottom: darken($navbar-color, 5%);
|
||||
a {
|
||||
color: $white;
|
||||
border-bottom: 1px solid darken($navbar-color, 10%);
|
||||
&:hover {color: $body-link-color;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gumby-no-touch .navbar li .dropdown ul > li:hover .dropdown,
|
||||
.gumby-touch .navbar li .dropdown ul > li.active .dropdown {
|
||||
border-top: none;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
left: 100%;
|
||||
top: $nav-distance;
|
||||
margin-top: 0;
|
||||
@include respond(all-phones) {
|
||||
position: relative;
|
||||
left: 0;
|
||||
ul {
|
||||
background: darken($navbar-color, 15%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gumby-no-touch .navbar li .dropdown ul li a:hover {
|
||||
background: $default-color;
|
||||
}
|
||||
|
||||
.gumby-touch .navbar a:hover {
|
||||
color: $navbar-link-color !important;
|
||||
}
|
||||
|
||||
.subnav {
|
||||
display: block;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
margin: 0 0 18px 0;
|
||||
padding-top: 4px;
|
||||
li, dt, dd {
|
||||
float: left;
|
||||
display: inline;
|
||||
margin-left: 9px;
|
||||
margin-bottom: 4px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
dt {
|
||||
color: $default-color;
|
||||
font-weight: normal;
|
||||
}
|
||||
li a, dd a {
|
||||
color: $navbar-link-color;
|
||||
font-size: 15px;
|
||||
text-decoration: none;
|
||||
@include border-radius(4px);
|
||||
}
|
||||
li.active a, dd.active a {
|
||||
background: $navbar-color;
|
||||
padding: 5px 9px;
|
||||
text-shadow: 0 1px 1px $navbar-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
/* Tables */
|
||||
|
||||
table {
|
||||
display: table;
|
||||
background-color: $table-bgcolor;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
border: $table-border-size $table-border-style $table-border-color;
|
||||
|
||||
caption {
|
||||
text-align: center;
|
||||
font-size: $larger;
|
||||
padding: .75em;
|
||||
}
|
||||
|
||||
thead th,
|
||||
tbody td,
|
||||
tr td {
|
||||
display: table-cell;
|
||||
padding: 10px;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
border-top: $table-cell-border-size $table-cell-border-style $table-cell-border-color;
|
||||
}
|
||||
|
||||
tr td, tbody tr td {
|
||||
font-size: $norm;
|
||||
}
|
||||
|
||||
tr td:first-child {
|
||||
font-weight: $table-row-first-cell-font-weight;
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: $table-thead-bgcolor;
|
||||
color: #fff;
|
||||
|
||||
tr th {
|
||||
font-size: $norm;
|
||||
font-weight: bold;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
&.striped tr:nth-of-type(even),
|
||||
table tr.stripe,
|
||||
table tr.striped {
|
||||
background-color: $table-stripe-bgcolor;
|
||||
}
|
||||
|
||||
&.rounded {
|
||||
border-radius: $table-border-radius;
|
||||
border-collapse: separate;
|
||||
|
||||
caption + thead tr:first-child th:first-child,
|
||||
caption + tr td:first-child,
|
||||
> thead tr:first-child th:first-child,
|
||||
> thead tr:first-child td:first-child,
|
||||
> tr:first-child td:first-child {
|
||||
border-top-left-radius: $table-border-radius;
|
||||
}
|
||||
|
||||
caption + thead tr:first-child th:last-child,
|
||||
caption + tr td:last-child,
|
||||
> thead tr:first-child th:last-child,
|
||||
> thead tr:first-child td:last-child,
|
||||
> tr:first-child td:last-child {
|
||||
border-top-right-radius: $table-border-radius;
|
||||
}
|
||||
|
||||
thead ~ tr:last-child td:last-child,
|
||||
tbody tr:last-child td:last-child {
|
||||
border-bottom-right-radius: $table-border-radius;
|
||||
}
|
||||
|
||||
thead ~ tr:last-child td:first-child,
|
||||
tbody tr:last-child td:first-child {
|
||||
border-bottom-left-radius: $table-border-radius;
|
||||
}
|
||||
|
||||
thead th, thead td,
|
||||
caption + tbody tr:first-child td,
|
||||
> tbody:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
/* Tabs */
|
||||
|
||||
.tabs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid darken($default-color, 5%);
|
||||
> li {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
margin: 0 $gutter 0 0;
|
||||
cursor: default;
|
||||
top: 1px;
|
||||
@include box-shadow(0 1px 0 $white);
|
||||
> li {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
margin: 0 $gutter 0 0;
|
||||
cursor: default;
|
||||
top: 1px;
|
||||
@include box-shadow(0 1px 0 $white);
|
||||
> a {
|
||||
display: block;
|
||||
width: auto;
|
||||
padding: 0 $norm;
|
||||
margin: 0;
|
||||
color: $body-font-color;
|
||||
font-family: $font-family;
|
||||
font-weight: $tabs-font-weight;
|
||||
border: 1px solid darken($default-color, 5%);
|
||||
border-width: 1px 1px 0 1px;
|
||||
text-shadow: 0 1px 1px lighten($default-color, 5%);
|
||||
background: $default-color;
|
||||
cursor: pointer;
|
||||
@include border-radius($button-radius $button-radius 0 0);
|
||||
@include line-and-height($tab-height);
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: lighten($default-color, 1%);
|
||||
}
|
||||
&:active {
|
||||
background: darken($default-color, 2%);
|
||||
}
|
||||
}
|
||||
&.active > a {
|
||||
@include line-and-height($tab-height + 1);
|
||||
background: $white;
|
||||
cursor: default;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-nav > li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.tab-nav > li > a {
|
||||
display: block;
|
||||
width: auto;
|
||||
padding: 0 $norm;
|
||||
margin: 0;
|
||||
color: $body-font-color;
|
||||
font-family: $font-family;
|
||||
font-weight: $tabs-font-weight;
|
||||
border: 1px solid darken($default-color, 5%);
|
||||
border-width: 1px 1px 0 1px;
|
||||
text-shadow: 0 1px 1px lighten($default-color, 5%);
|
||||
background: $default-color;
|
||||
cursor: pointer;
|
||||
@include border-radius($button-radius $button-radius 0 0);
|
||||
@include line-and-height($tab-height);
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: lighten($default-color, 1%);
|
||||
}
|
||||
&:active {
|
||||
background: darken($default-color, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-nav > li.active > a {
|
||||
@include line-and-height($tab-height + 1);
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.tabs.pill .tab-nav {
|
||||
width: 100%; /* remove if you dont want the tabs to span the full container width */
|
||||
display: table;
|
||||
overflow: hidden;
|
||||
border: 1px solid darken($default-color, 5%);
|
||||
@include border-radius($button-radius);
|
||||
> li {
|
||||
display: table-cell;
|
||||
margin: 0;
|
||||
margin-left: -4px;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
> a {
|
||||
border: none;
|
||||
border-right: 1px solid darken($default-color, 5%);
|
||||
@include border-radius(0);
|
||||
@include line-and-height($tab-height);
|
||||
}
|
||||
&:last-child > a {
|
||||
border-right:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
padding: 20px 10px;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs.vertical {
|
||||
.tab-nav {
|
||||
border: none;
|
||||
> li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
&.active {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
> a {
|
||||
border-right: 1px solid $global-bg-color;
|
||||
}
|
||||
}
|
||||
> a {
|
||||
border: 1px solid darken($default-color, 5%);
|
||||
@include border-radius($button-radius 0 0 $button-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
padding: 10px 0 30px 20px;
|
||||
margin-left: -1px;
|
||||
border-left: 1px solid darken($default-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
/* Toggles */
|
||||
|
||||
.drawer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
background: $drawer-background-color;
|
||||
@include box-shadow(
|
||||
inset $drawer-inner-shadow-x-offset #{-$drawer-inner-shadow-y-offset} $drawer-inner-shadow-blur $drawer-inner-shadow-color,
|
||||
inset $drawer-inner-shadow-x-offset $drawer-inner-shadow-y-offset $drawer-inner-shadow-blur $drawer-inner-shadow-color);
|
||||
;
|
||||
overflow: hidden;
|
||||
@include transition-duration(.3s);
|
||||
&.active {
|
||||
height: auto;
|
||||
max-height: 800px;
|
||||
@include transition-duration(.5s);
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999999;
|
||||
background: rgb(0, 0, 0);
|
||||
background: $modal-overlay-color;
|
||||
> .content {
|
||||
width: 50%;
|
||||
min-height: 50%;
|
||||
max-height: 65%;
|
||||
position: relative;
|
||||
top: 25%;
|
||||
margin: 0 auto;
|
||||
padding: $gutter-in-px;
|
||||
background: $modal-window-color;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
@include respond(portrait-tablets) {
|
||||
width: 80%;
|
||||
min-height: 80%;
|
||||
max-height: 80%;
|
||||
top: 10%;
|
||||
}
|
||||
@include respond(all-phones) {
|
||||
width: 92.5%;
|
||||
min-height: 92.5%;
|
||||
max-height: 92.5%;
|
||||
top: 3.75%;
|
||||
}
|
||||
> .close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
&, > .content {
|
||||
visibility: hidden;
|
||||
@include opacity(0);
|
||||
}
|
||||
&.active {
|
||||
@include transition-property(opacity);
|
||||
@include transition-duration(.3s);
|
||||
&, > .content {
|
||||
visibility: visible;
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
/* Tooltips */
|
||||
|
||||
.ttip {
|
||||
@include tooltip($tt-min-width, $tt-bgcolor, $tt-position, $tt-align);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ttip:after, .ttip:before {
|
||||
@include respond(portrait-tablets) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/* Video */
|
||||
|
||||
body .video {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
&.twitch, &.youtube.show_controls {
|
||||
padding-top: 30px;
|
||||
// Use .show_controls f you want the play/pause controls
|
||||
// to show before the video plays, like on older youtube.
|
||||
}
|
||||
&.youtube, &.vimeo {
|
||||
// Nothing goes here anymore. Both use overlay transports.
|
||||
}
|
||||
}
|
||||
|
||||
.video > video, .video > iframe, .video > object, .video > embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// Lists
|
||||
|
||||
// UI Coloring List
|
||||
$ui-coloring:
|
||||
primary $primary-color $primary-hover-color,
|
||||
secondary $secondary-color $secondary-hover-color,
|
||||
default $default-color $default-hover-color,
|
||||
info $info-color $info-hover-color,
|
||||
danger $danger-color $danger-hover-color,
|
||||
warning $warning-color $warning-hover-color,
|
||||
success $success-color $success-hover-color;
|
||||
|
||||
// UI Styling List
|
||||
$styling: metro $metro-radius, pretty $button-radius;
|
||||
|
||||
|
||||
// Form field types
|
||||
$field-types: text, email, password, numeric, search, combined, prepend, append, double;
|
||||
|
||||
$field-sizes: xnarrow, narrow, normal, wide, xwide, xxwide;
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
// Welcome to Gumby 2.0 Settings.
|
||||
// Happy Tinkering!
|
||||
|
||||
|
||||
// Grid Settings
|
||||
$row-max-width: 940px !default; // 940px
|
||||
$gutter-in-px: 20px !default; // 20px
|
||||
$cols: 12 !default; // 12 Column Default Grid
|
||||
$hybrid: 16 !default; // 16 Column Default Hybrid Grid
|
||||
|
||||
// Responsiveness Settings
|
||||
$min-device-width: 320px; // iPhone Portrait
|
||||
$tablet-device-width: 768px; // iPad Portrait
|
||||
$document-width: $row-max-width; // Default Document
|
||||
$max-device-width: 2880px; // Max Document Size
|
||||
|
||||
// Spacing
|
||||
$nav-distance: 0; // Navigation distance from the top of the viewport
|
||||
|
||||
// Typography
|
||||
$font-family: "Open Sans";
|
||||
$font-style-italic: italic;
|
||||
$icons: entypo;
|
||||
$font-smoothing: antialiased;
|
||||
|
||||
// Font Weights
|
||||
$font-weight-bold: 700;
|
||||
$font-weight-semibold: 600;
|
||||
$font-weight-medium: 400;
|
||||
$font-weight-regular: 400;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-thin: 300;
|
||||
|
||||
$header-font-weight: $font-weight-thin;
|
||||
$body-font-weight: $font-weight-regular;
|
||||
$type-font-weight: $font-weight-regular;
|
||||
$link-font-weight: $font-weight-regular;
|
||||
$button-font-weight: $font-weight-semibold;
|
||||
$tabs-font-weight: $font-weight-semibold;
|
||||
|
||||
// Vertical Rhythm Spacing
|
||||
$base-line-height: ms(1) !default;
|
||||
$rhythm-spacing: .168;
|
||||
$rhythm-height: .711;
|
||||
|
||||
// Modular Scale Settings
|
||||
// http://www.modularscale.com by Tim Brown
|
||||
// https://github.com/scottkellum/modular-scale
|
||||
$ratio: golden(); // Ratio for Modular Scale
|
||||
$base-font-size: 16px !default;
|
||||
$importantNum: 78px !default;
|
||||
$base-size: $base-font-size $importantNum;
|
||||
// Gumby Default Scale Values: 16, 18, 26, 30, 42, 48, 68, 78, 110, 126;
|
||||
|
||||
// Sizing
|
||||
$xsmall: ms(-2);
|
||||
$small: ms(-1);
|
||||
$norm: ms(0); // $base-font-size (16px == default)
|
||||
$med: ms(1);
|
||||
$large: ms(2);
|
||||
$larger: ms(3);
|
||||
$xlarge: ms(4);
|
||||
$xxlarge: ms(5);
|
||||
$xxxlarge: ms(6);
|
||||
$reallybig: ms(8);
|
||||
$tremendous: ms(9);
|
||||
$absurd: ms(10);
|
||||
|
||||
// Typography Colors
|
||||
$header-font-color: #444444 !default;
|
||||
$header-link-color: #d04526 !default;
|
||||
$header-link-hover-color: #c03d20 !default;
|
||||
$body-font-color: #555555 !default;
|
||||
$body-link-color: #d04526 !default;
|
||||
$body-link-hover-color: #c03d20 !default;
|
||||
|
||||
// User Interface Colors
|
||||
$global-bg-color: #fff;
|
||||
$navbar-color: #4a4d50;
|
||||
$navbar-link-color: #fff;
|
||||
|
||||
$primary-color: #3085d6;
|
||||
$secondary-color: #42a35a;
|
||||
$default-color: #f2f2f2;
|
||||
$info-color: #4a4d50;
|
||||
$danger-color: #ca3838;
|
||||
$warning-color: #f6b83f;
|
||||
$success-color: #58c026;
|
||||
|
||||
$primary-hover-color: #58b2fa;
|
||||
$secondary-hover-color: #6dbb80;
|
||||
$default-hover-color: #ffffff;
|
||||
$info-hover-color: #868d92;
|
||||
$danger-hover-color: #f14f4f;
|
||||
$warning-hover-color: #fdd27f;
|
||||
$success-hover-color: #66d92f;
|
||||
|
||||
$horizontal-rule-color: #ccc !default;
|
||||
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
|
||||
// Borders
|
||||
$button-radius: 4px !default;
|
||||
$metro-radius: 0 !default;
|
||||
$bigger-radius: 8px;
|
||||
|
||||
// Buttons
|
||||
// Font Sizing
|
||||
$xlarge-button-font-size: $larger;
|
||||
$large-button-font-size: $large;
|
||||
$medium-button-font-size: $norm;
|
||||
$small-button-font-size: $small;
|
||||
// Padding
|
||||
$default-button-padding: $med;
|
||||
// Height
|
||||
$default-button-height: 36px;
|
||||
|
||||
// Form Elements
|
||||
$form-text-input-stroke: #ccc;
|
||||
$form-text-input-background: $white;
|
||||
$form-text-input-placeholder-color: $default-color;
|
||||
$form-text-input-color: #555;
|
||||
|
||||
$form-select-stroke: #ccc;
|
||||
$form-select-background: $white;
|
||||
$form-select-color: #555;
|
||||
|
||||
// Tabs
|
||||
$tab-height: 42px;
|
||||
|
||||
// Navigation
|
||||
$navcontain-height: 80px; // makes space at the top of a document for when using a fixed nav
|
||||
|
||||
// Drawers & Modals
|
||||
$modal-overlay-color: rgba(0, 0, 0, 0.8);
|
||||
$modal-window-color: $white;
|
||||
$drawer-background-color: #3e4144;
|
||||
$drawer-inner-shadow-x-offset: 0;
|
||||
$drawer-inner-shadow-y-offset: 2px;
|
||||
$drawer-inner-shadow-blur: 5px;
|
||||
$drawer-inner-shadow-color: #313436;
|
||||
|
||||
// Tables
|
||||
$table-bgcolor: #fff;
|
||||
$table-thead-bgcolor: $primary-color;
|
||||
$table-row-first-cell-font-weight: bold;
|
||||
$table-border-size: 1px;
|
||||
$table-border-style: solid;
|
||||
$table-border-color: #e5e5e5;
|
||||
$table-cell-border-size: 1px;
|
||||
$table-cell-border-color: #e5e5e5;
|
||||
$table-cell-border-style: solid;
|
||||
// .rounded
|
||||
$table-border-radius: 4px;
|
||||
// .striped
|
||||
$table-stripe-bgcolor: #e5e5e5;
|
||||
|
||||
// Tooltips
|
||||
$tt-min-width: 130px;
|
||||
$tt-bgcolor: $primary-color;
|
||||
$tt-position: top; // position: top / bottom / left / right
|
||||
$tt-align: left; // text and caret alignment: left / right
|
||||
$tt-pretty: yes; // yes = pretty / no = flat
|
||||
|
||||
// Floats
|
||||
$default-float: left;
|
||||
$switch-float: right;
|
||||
|
||||
|
|
@ -0,0 +1,286 @@
|
|||
$entypo-icons:
|
||||
icon-note $entypo-icon-note,
|
||||
icon-note-beamed $entypo-icon-note-beamed,
|
||||
icon-music $entypo-icon-music,
|
||||
icon-search $entypo-icon-search,
|
||||
icon-flashlight $entypo-icon-flashlight,
|
||||
icon-mail $entypo-icon-mail,
|
||||
icon-heart $entypo-icon-heart,
|
||||
icon-heart-empty $entypo-icon-heart-empty,
|
||||
icon-star $entypo-icon-star,
|
||||
icon-star-empty $entypo-icon-star-empty,
|
||||
icon-user $entypo-icon-user,
|
||||
icon-users $entypo-icon-users,
|
||||
icon-user-add $entypo-icon-user-add,
|
||||
icon-video $entypo-icon-video,
|
||||
icon-picture $entypo-icon-picture,
|
||||
icon-camera $entypo-icon-camera,
|
||||
icon-layout $entypo-icon-layout,
|
||||
icon-menu $entypo-icon-menu,
|
||||
icon-check $entypo-icon-check,
|
||||
icon-cancel $entypo-icon-cancel,
|
||||
icon-cancel-circled $entypo-icon-cancel-circled,
|
||||
icon-cancel-squared $entypo-icon-cancel-squared,
|
||||
icon-plus $entypo-icon-plus,
|
||||
icon-plus-circled $entypo-icon-plus-circled,
|
||||
icon-plus-squared $entypo-icon-plus-squared,
|
||||
icon-minus $entypo-icon-minus,
|
||||
icon-minus-circled $entypo-icon-minus-circled,
|
||||
icon-minus-squared $entypo-icon-minus-squared,
|
||||
icon-help $entypo-icon-help,
|
||||
icon-help-circled $entypo-icon-help-circled,
|
||||
icon-info $entypo-icon-info,
|
||||
icon-info-circled $entypo-icon-info-circled,
|
||||
icon-back $entypo-icon-back,
|
||||
icon-home $entypo-icon-home,
|
||||
icon-link $entypo-icon-link,
|
||||
icon-attach $entypo-icon-attach,
|
||||
icon-lock $entypo-icon-lock,
|
||||
icon-lock-open $entypo-icon-lock-open,
|
||||
icon-eye $entypo-icon-eye,
|
||||
icon-tag $entypo-icon-tag,
|
||||
icon-bookmark $entypo-icon-bookmark,
|
||||
icon-bookmarks $entypo-icon-bookmarks,
|
||||
icon-flag $entypo-icon-flag,
|
||||
icon-thumbs-up $entypo-icon-thumbs-up,
|
||||
icon-thumbs-down $entypo-icon-thumbs-down,
|
||||
icon-download $entypo-icon-download,
|
||||
icon-upload $entypo-icon-upload,
|
||||
icon-upload-cloud $entypo-icon-upload-cloud,
|
||||
icon-reply $entypo-icon-reply,
|
||||
icon-reply-all $entypo-icon-reply-all,
|
||||
icon-forward $entypo-icon-forward,
|
||||
icon-quote $entypo-icon-quote,
|
||||
icon-code $entypo-icon-code,
|
||||
icon-export $entypo-icon-export,
|
||||
icon-pencil $entypo-icon-pencil,
|
||||
icon-feather $entypo-icon-feather,
|
||||
icon-print $entypo-icon-print,
|
||||
icon-retweet $entypo-icon-retweet,
|
||||
icon-keyboard $entypo-icon-keyboard,
|
||||
icon-comment $entypo-icon-comment,
|
||||
icon-chat $entypo-icon-chat,
|
||||
icon-bell $entypo-icon-bell,
|
||||
icon-attention $entypo-icon-attention,
|
||||
icon-alert $entypo-icon-alert,
|
||||
icon-vcard $entypo-icon-vcard,
|
||||
icon-address $entypo-icon-address,
|
||||
icon-location $entypo-icon-location,
|
||||
icon-map $entypo-icon-map,
|
||||
icon-direction $entypo-icon-direction,
|
||||
icon-compass $entypo-icon-compass,
|
||||
icon-cup $entypo-icon-cup,
|
||||
icon-trash $entypo-icon-trash,
|
||||
icon-doc $entypo-icon-doc,
|
||||
icon-docs $entypo-icon-docs,
|
||||
icon-doc-landscape $entypo-icon-doc-landscape,
|
||||
icon-doc-text $entypo-icon-doc-text,
|
||||
icon-doc-text-inv $entypo-icon-doc-text-inv,
|
||||
icon-newspaper $entypo-icon-newspaper,
|
||||
icon-book-open $entypo-icon-book-open,
|
||||
icon-book $entypo-icon-book,
|
||||
icon-folder $entypo-icon-folder,
|
||||
icon-archive $entypo-icon-archive,
|
||||
icon-box $entypo-icon-box,
|
||||
icon-rss $entypo-icon-rss,
|
||||
icon-phone $entypo-icon-phone,
|
||||
icon-cog $entypo-icon-cog,
|
||||
icon-tools $entypo-icon-tools,
|
||||
icon-share $entypo-icon-share,
|
||||
icon-shareable $entypo-icon-shareable,
|
||||
icon-basket $entypo-icon-basket,
|
||||
icon-bag $entypo-icon-bag,
|
||||
icon-calendar $entypo-icon-calendar,
|
||||
icon-login $entypo-icon-login,
|
||||
icon-logout $entypo-icon-logout,
|
||||
icon-mic $entypo-icon-mic,
|
||||
icon-mute $entypo-icon-mute,
|
||||
icon-sound $entypo-icon-sound,
|
||||
icon-volume $entypo-icon-volume,
|
||||
icon-clock $entypo-icon-clock,
|
||||
icon-hourglass $entypo-icon-hourglass,
|
||||
icon-lamp $entypo-icon-lamp,
|
||||
icon-light-down $entypo-icon-light-down,
|
||||
icon-light-up $entypo-icon-light-up,
|
||||
icon-adjust $entypo-icon-adjust,
|
||||
icon-block $entypo-icon-block,
|
||||
icon-resize-full $entypo-icon-resize-full,
|
||||
icon-resize-small $entypo-icon-resize-small,
|
||||
icon-popup $entypo-icon-popup,
|
||||
icon-publish $entypo-icon-publish,
|
||||
icon-window $entypo-icon-window,
|
||||
icon-arrow-combo $entypo-icon-arrow-combo,
|
||||
icon-down-circled $entypo-icon-down-circled,
|
||||
icon-left-circled $entypo-icon-left-circled,
|
||||
icon-right-circled $entypo-icon-right-circled,
|
||||
icon-up-circled $entypo-icon-up-circled,
|
||||
icon-down-open $entypo-icon-down-open,
|
||||
icon-left-open $entypo-icon-left-open,
|
||||
icon-right-open $entypo-icon-right-open,
|
||||
icon-up-open $entypo-icon-up-open,
|
||||
icon-down-open-mini $entypo-icon-down-open-mini,
|
||||
icon-left-open-mini $entypo-icon-left-open-mini,
|
||||
icon-right-open-mini $entypo-icon-right-open-mini,
|
||||
icon-up-open-mini $entypo-icon-up-open-mini,
|
||||
icon-down-open-big $entypo-icon-down-open-big,
|
||||
icon-left-open-big $entypo-icon-left-open-big,
|
||||
icon-right-open-big $entypo-icon-right-open-big,
|
||||
icon-up-open-big $entypo-icon-up-open-big,
|
||||
icon-down $entypo-icon-down,
|
||||
icon-arrow-left $entypo-icon-left,
|
||||
icon-arrow-right $entypo-icon-right,
|
||||
icon-up $entypo-icon-up,
|
||||
icon-down-dir $entypo-icon-down-dir,
|
||||
icon-left-dir $entypo-icon-left-dir,
|
||||
icon-right-dir $entypo-icon-right-dir,
|
||||
icon-up-dir $entypo-icon-up-dir,
|
||||
icon-down-bold $entypo-icon-down-bold,
|
||||
icon-left-bold $entypo-icon-left-bold,
|
||||
icon-right-bold $entypo-icon-right-bold,
|
||||
icon-up-bold $entypo-icon-up-bold,
|
||||
icon-down-thin $entypo-icon-down-thin,
|
||||
icon-left-thin $entypo-icon-left-thin,
|
||||
icon-right-thin $entypo-icon-right-thin,
|
||||
icon-up-thin $entypo-icon-up-thin,
|
||||
icon-ccw $entypo-icon-ccw,
|
||||
icon-cw $entypo-icon-cw,
|
||||
icon-arrows-ccw $entypo-icon-arrows-ccw,
|
||||
icon-level-down $entypo-icon-level-down,
|
||||
icon-level-up $entypo-icon-level-up,
|
||||
icon-shuffle $entypo-icon-shuffle,
|
||||
icon-loop $entypo-icon-loop,
|
||||
icon-switch $entypo-icon-switch,
|
||||
icon-play $entypo-icon-play,
|
||||
icon-stop $entypo-icon-stop,
|
||||
icon-pause $entypo-icon-pause,
|
||||
icon-record $entypo-icon-record,
|
||||
icon-to-end $entypo-icon-to-end,
|
||||
icon-to-start $entypo-icon-to-start,
|
||||
icon-fast-forward $entypo-icon-fast-forward,
|
||||
icon-fast-backward $entypo-icon-fast-backward,
|
||||
icon-progress-0 $entypo-icon-progress-0,
|
||||
icon-progress-1 $entypo-icon-progress-1,
|
||||
icon-progress-2 $entypo-icon-progress-2,
|
||||
icon-progress-3 $entypo-icon-progress-3,
|
||||
icon-target $entypo-icon-target,
|
||||
icon-palette $entypo-icon-palette,
|
||||
icon-list $entypo-icon-list,
|
||||
icon-list-add $entypo-icon-list-add,
|
||||
icon-signal $entypo-icon-signal,
|
||||
icon-trophy $entypo-icon-trophy,
|
||||
icon-battery $entypo-icon-battery,
|
||||
icon-back-in-time $entypo-icon-back-in-time,
|
||||
icon-monitor $entypo-icon-monitor,
|
||||
icon-mobile $entypo-icon-mobile,
|
||||
icon-network $entypo-icon-network,
|
||||
icon-cd $entypo-icon-cd,
|
||||
icon-inbox $entypo-icon-inbox,
|
||||
icon-install $entypo-icon-install,
|
||||
icon-globe $entypo-icon-globe,
|
||||
icon-cloud $entypo-icon-cloud,
|
||||
icon-cloud-thunder $entypo-icon-cloud-thunder,
|
||||
icon-flash $entypo-icon-flash,
|
||||
icon-moon $entypo-icon-moon,
|
||||
icon-flight $entypo-icon-flight,
|
||||
icon-paper-plane $entypo-icon-paper-plane,
|
||||
icon-leaf $entypo-icon-leaf,
|
||||
icon-lifebuoy $entypo-icon-lifebuoy,
|
||||
icon-mouse $entypo-icon-mouse,
|
||||
icon-briefcase $entypo-icon-briefcase,
|
||||
icon-suitcase $entypo-icon-suitcase,
|
||||
icon-dot $entypo-icon-dot,
|
||||
icon-dot-2 $entypo-icon-dot-2,
|
||||
icon-dot-3 $entypo-icon-dot-3,
|
||||
icon-brush $entypo-icon-brush,
|
||||
icon-magnet $entypo-icon-magnet,
|
||||
icon-infinity $entypo-icon-infinity,
|
||||
icon-erase $entypo-icon-erase,
|
||||
icon-chart-pie $entypo-icon-chart-pie,
|
||||
icon-chart-line $entypo-icon-chart-line,
|
||||
icon-chart-bar $entypo-icon-chart-bar,
|
||||
icon-chart-area $entypo-icon-chart-area,
|
||||
icon-tape $entypo-icon-tape,
|
||||
icon-graduation-cap $entypo-icon-graduation-cap,
|
||||
icon-language $entypo-icon-language,
|
||||
icon-ticket $entypo-icon-ticket,
|
||||
icon-water $entypo-icon-water,
|
||||
icon-droplet $entypo-icon-droplet,
|
||||
icon-air $entypo-icon-air,
|
||||
icon-credit-card $entypo-icon-credit-card,
|
||||
icon-floppy $entypo-icon-floppy,
|
||||
icon-clipboard $entypo-icon-clipboard,
|
||||
icon-megaphone $entypo-icon-megaphone,
|
||||
icon-database $entypo-icon-database,
|
||||
icon-drive $entypo-icon-drive,
|
||||
icon-bucket $entypo-icon-bucket,
|
||||
icon-thermometer $entypo-icon-thermometer,
|
||||
icon-key $entypo-icon-key,
|
||||
icon-flow-cascade $entypo-icon-flow-cascade,
|
||||
icon-flow-branch $entypo-icon-flow-branch,
|
||||
icon-flow-tree $entypo-icon-flow-tree,
|
||||
icon-flow-line $entypo-icon-flow-line,
|
||||
icon-flow-parallel $entypo-icon-flow-parallel,
|
||||
icon-rocket $entypo-icon-rocket,
|
||||
icon-gauge $entypo-icon-gauge,
|
||||
icon-traffic-cone $entypo-icon-traffic-cone,
|
||||
icon-cc $entypo-icon-cc,
|
||||
icon-cc-by $entypo-icon-cc-by,
|
||||
icon-cc-nc $entypo-icon-cc-nc,
|
||||
icon-cc-nc-eu $entypo-icon-cc-nc-eu,
|
||||
icon-cc-nc-jp $entypo-icon-cc-nc-jp,
|
||||
icon-cc-sa $entypo-icon-cc-sa,
|
||||
icon-cc-nd $entypo-icon-cc-nd,
|
||||
icon-cc-pd $entypo-icon-cc-pd,
|
||||
icon-cc-zero $entypo-icon-cc-zero,
|
||||
icon-cc-share $entypo-icon-cc-share,
|
||||
icon-cc-remix $entypo-icon-cc-remix,
|
||||
icon-github $entypo-icon-github,
|
||||
icon-github-circled $entypo-icon-github-circled,
|
||||
icon-flickr $entypo-icon-flickr,
|
||||
icon-flickr-circled $entypo-icon-flickr-circled,
|
||||
icon-vimeo $entypo-icon-vimeo,
|
||||
icon-vimeo-circled $entypo-icon-vimeo-circled,
|
||||
icon-twitter $entypo-icon-twitter,
|
||||
icon-twitter-circled $entypo-icon-twitter-circled,
|
||||
icon-facebook $entypo-icon-facebook,
|
||||
icon-facebook-circled $entypo-icon-facebook-circled,
|
||||
icon-facebook-squared $entypo-icon-facebook-squared,
|
||||
icon-gplus $entypo-icon-gplus,
|
||||
icon-gplus-circled $entypo-icon-gplus-circled,
|
||||
icon-pinterest $entypo-icon-pinterest,
|
||||
icon-pinterest-circled $entypo-icon-pinterest-circled,
|
||||
icon-tumblr $entypo-icon-tumblr,
|
||||
icon-tumblr-circled $entypo-icon-tumblr-circled,
|
||||
icon-linkedin $entypo-icon-linkedin,
|
||||
icon-linkedin-circled $entypo-icon-linkedin-circled,
|
||||
icon-dribbble $entypo-icon-dribbble,
|
||||
icon-dribbble-circled $entypo-icon-dribbble-circled,
|
||||
icon-stumbleupon $entypo-icon-stumbleupon,
|
||||
icon-stumbleupon-circled $entypo-icon-stumbleupon-circled,
|
||||
icon-lastfm $entypo-icon-lastfm,
|
||||
icon-lastfm-circled $entypo-icon-lastfm-circled,
|
||||
icon-rdio $entypo-icon-rdio,
|
||||
icon-rdio-circled $entypo-icon-rdio-circled,
|
||||
icon-spotify $entypo-icon-spotify,
|
||||
icon-spotify-circled $entypo-icon-spotify-circled,
|
||||
icon-qq $entypo-icon-qq,
|
||||
icon-instagram $entypo-icon-instagram,
|
||||
icon-dropbox $entypo-icon-dropbox,
|
||||
icon-evernote $entypo-icon-evernote,
|
||||
icon-flattr $entypo-icon-flattr,
|
||||
icon-skype $entypo-icon-skype,
|
||||
icon-skype-circled $entypo-icon-skype-circled,
|
||||
icon-renren $entypo-icon-renren,
|
||||
icon-sina-weibo $entypo-icon-sina-weibo,
|
||||
icon-paypal $entypo-icon-paypal,
|
||||
icon-picasa $entypo-icon-picasa,
|
||||
icon-soundcloud $entypo-icon-soundcloud,
|
||||
icon-mixi $entypo-icon-mixi,
|
||||
icon-behance $entypo-icon-behance,
|
||||
icon-google-circles $entypo-icon-google-circles,
|
||||
icon-vkontakte $entypo-icon-vkontakte,
|
||||
icon-smashing $entypo-icon-smashing,
|
||||
icon-sweden $entypo-icon-sweden,
|
||||
icon-db-shape $entypo-icon-db-shape,
|
||||
icon-logo-db $entypo-icon-logo-db
|
||||
;
|
||||
|
|
@ -0,0 +1,294 @@
|
|||
// Entypo Icon Charset
|
||||
|
||||
$entypo-icon-note: \266a; // \266a
|
||||
$entypo-icon-note-beamed: \266b; // \266b
|
||||
$entypo-icon-music: \1f3b5; // \1f3b5
|
||||
$entypo-icon-search: \1f50d; // \1f50d
|
||||
$entypo-icon-flashlight: \1f526; // \1f526
|
||||
$entypo-icon-mail: \2709; // \2709
|
||||
$entypo-icon-heart: \2665; // \2665
|
||||
$entypo-icon-heart-empty: \2661; // \2661
|
||||
$entypo-icon-star: \2605; // \2605
|
||||
$entypo-icon-star-empty: \2606; // \2606
|
||||
$entypo-icon-user: \1f464; // \1f464
|
||||
$entypo-icon-users: \1f465; // \1f465
|
||||
$entypo-icon-user-add: \e700; // \e700
|
||||
$entypo-icon-video: \1f3ac; // \1f3ac
|
||||
$entypo-icon-picture: \1f304; // \1f304
|
||||
$entypo-icon-camera: \1f4f7; // \1f4f7
|
||||
$entypo-icon-layout: \268f; // \268f
|
||||
$entypo-icon-menu: \2630; // \2630
|
||||
$entypo-icon-check: \2713; // \2713
|
||||
$entypo-icon-cancel: \2715; // \2715
|
||||
$entypo-icon-cancel-circled: \2716; // \2716
|
||||
$entypo-icon-cancel-squared: \274e; // \274e
|
||||
$entypo-icon-plus: \2b; // \2b
|
||||
$entypo-icon-plus-circled: \2795; // \2795
|
||||
$entypo-icon-plus-squared: \229e; // \229e
|
||||
$entypo-icon-minus: \2d; // \2d
|
||||
$entypo-icon-minus-circled: \2796; // \2796
|
||||
$entypo-icon-minus-squared: \229f; // \229f
|
||||
$entypo-icon-help: \2753; // \2753
|
||||
$entypo-icon-help-circled: \e704; // \e704
|
||||
$entypo-icon-info: \2139; // \2139
|
||||
$entypo-icon-info-circled: \e705; // \e705
|
||||
$entypo-icon-back: \1f519; // \1f519
|
||||
$entypo-icon-home: \2302; // \2302
|
||||
$entypo-icon-link: \1f517; // \1f517
|
||||
$entypo-icon-attach: \1f4ce; // \1f4ce
|
||||
$entypo-icon-lock: \1f512; // \1f512
|
||||
$entypo-icon-lock-open: \1f513; // \1f513
|
||||
$entypo-icon-eye: \e70a; // \e70a
|
||||
$entypo-icon-tag: \e70c; // \e70c
|
||||
$entypo-icon-bookmark: \1f516; // \1f516
|
||||
$entypo-icon-bookmarks: \1f4d1; // \1f4d1
|
||||
$entypo-icon-flag: \2691; // \2691
|
||||
$entypo-icon-thumbs-up: \1f44d; // \1f44d
|
||||
$entypo-icon-thumbs-down: \1f44e; // \1f44e
|
||||
$entypo-icon-download: \1f4e5; // \1f4e5
|
||||
$entypo-icon-upload: \1f4e4; // \1f4e4
|
||||
$entypo-icon-upload-cloud: \e711; // \e711
|
||||
$entypo-icon-reply: \e712; // \e712
|
||||
$entypo-icon-reply-all: \e713; // \e713
|
||||
$entypo-icon-forward: \27a6; // \27a6
|
||||
$entypo-icon-quote: \275e; // \275e
|
||||
$entypo-icon-code: \e714; // \e714
|
||||
$entypo-icon-export: \e715; // \e715
|
||||
$entypo-icon-pencil: \270e; // \270e
|
||||
$entypo-icon-feather: \2712; // \2712
|
||||
$entypo-icon-print: \e716; // \e716
|
||||
$entypo-icon-retweet: \e717; // \e717
|
||||
$entypo-icon-keyboard: \2328; // \2328
|
||||
$entypo-icon-comment: \e718; // \e718
|
||||
$entypo-icon-chat: \e720; // \e720
|
||||
$entypo-icon-bell: \1f514; // \1f514
|
||||
$entypo-icon-attention: \26a0; // \26a0
|
||||
$entypo-icon-alert: \1f4a5; // \1f4a5
|
||||
$entypo-icon-vcard: \e722; // \e722
|
||||
$entypo-icon-address: \e723; // \e723
|
||||
$entypo-icon-location: \e724; // \e724
|
||||
$entypo-icon-map: \e727; // \e727
|
||||
$entypo-icon-direction: \27a2; // \27a2
|
||||
$entypo-icon-compass: \e728; // \e728
|
||||
$entypo-icon-cup: \2615; // \2615
|
||||
$entypo-icon-trash: \e729; // \e729
|
||||
$entypo-icon-doc: \e730; // \e730
|
||||
$entypo-icon-docs: \e736; // \e736
|
||||
$entypo-icon-doc-landscape: \e737; // \e737
|
||||
$entypo-icon-doc-text: \1f4c4; // \1f4c4
|
||||
$entypo-icon-doc-text-inv: \e731; // \e731
|
||||
$entypo-icon-newspaper: \1f4f0; // \1f4f0
|
||||
$entypo-icon-book-open: \1f4d6; // \1f4d6
|
||||
$entypo-icon-book: \1f4d5; // \1f4d5
|
||||
$entypo-icon-folder: \1f4c1; // \1f4c1
|
||||
$entypo-icon-archive: \e738; // \e738
|
||||
$entypo-icon-box: \1f4e6; // \1f4e6
|
||||
$entypo-icon-rss: \e73a; // \e73a
|
||||
$entypo-icon-phone: \1f4de; // \1f4de
|
||||
$entypo-icon-cog: \2699; // \2699
|
||||
$entypo-icon-tools: \2692; // \2692
|
||||
$entypo-icon-share: \e73c; // \e73c
|
||||
$entypo-icon-shareable: \e73e; // \e73e
|
||||
$entypo-icon-basket: \e73d; // \e73d
|
||||
$entypo-icon-bag: \1f45c; // \1f45c
|
||||
$entypo-icon-calendar: \1f4c5; // \1f4c5
|
||||
$entypo-icon-login: \e740; // \e740
|
||||
$entypo-icon-logout: \e741; // \e741
|
||||
$entypo-icon-mic: \1f3a4; // \1f3a4
|
||||
$entypo-icon-mute: \1f507; // \1f507
|
||||
$entypo-icon-sound: \1f50a; // \1f50a
|
||||
$entypo-icon-volume: \e742; // \e742
|
||||
$entypo-icon-clock: \1f554; // \1f554
|
||||
$entypo-icon-hourglass: \23f3; // \23f3
|
||||
$entypo-icon-lamp: \1f4a1; // \1f4a1
|
||||
$entypo-icon-light-down: \1f505; // \1f505
|
||||
$entypo-icon-light-up: \1f506; // \1f506
|
||||
$entypo-icon-adjust: \25d1; // \25d1
|
||||
$entypo-icon-block: \1f6ab; // \1f6ab
|
||||
$entypo-icon-resize-full: \e744; // \e744
|
||||
$entypo-icon-resize-small: \e746; // \e746
|
||||
$entypo-icon-popup: \e74c; // \e74c
|
||||
$entypo-icon-publish: \e74d; // \e74d
|
||||
$entypo-icon-window: \e74e; // \e74e
|
||||
$entypo-icon-arrow-combo: \e74f; // \e74f
|
||||
$entypo-icon-down-circled: \e758; // \e758
|
||||
$entypo-icon-left-circled: \e759; // \e759
|
||||
$entypo-icon-right-circled: \e75a; // \e75a
|
||||
$entypo-icon-up-circled: \e75b; // \e75b
|
||||
$entypo-icon-down-open: \e75c; // \e75c
|
||||
$entypo-icon-left-open: \e75d; // \e75d
|
||||
$entypo-icon-right-open: \e75e; // \e75e
|
||||
$entypo-icon-up-open: \e75f; // \e75f
|
||||
$entypo-icon-down-open-mini: \e760; // \e760
|
||||
$entypo-icon-left-open-mini: \e761; // \e761
|
||||
$entypo-icon-right-open-mini: \e762; // \e762
|
||||
$entypo-icon-up-open-mini: \e763; // \e763
|
||||
$entypo-icon-down-open-big: \e764; // \e764
|
||||
$entypo-icon-left-open-big: \e765; // \e765
|
||||
$entypo-icon-right-open-big: \e766; // \e766
|
||||
$entypo-icon-up-open-big: \e767; // \e767
|
||||
$entypo-icon-down: \2b07; // \2b07
|
||||
$entypo-icon-left: \2b05; // \2b05
|
||||
$entypo-icon-right: \27a1; // \27a1
|
||||
$entypo-icon-up: \2b06; // \2b06
|
||||
$entypo-icon-down-dir: \25be; // \25be
|
||||
$entypo-icon-left-dir: \25c2; // \25c2
|
||||
$entypo-icon-right-dir: \25b8; // \25b8
|
||||
$entypo-icon-up-dir: \25b4; // \25b4
|
||||
$entypo-icon-down-bold: \e4b0; // \e4b0
|
||||
$entypo-icon-left-bold: \e4ad; // \e4ad
|
||||
$entypo-icon-right-bold: \e4ae; // \e4ae
|
||||
$entypo-icon-up-bold: \e4af; // \e4af
|
||||
$entypo-icon-down-thin: \2193; // \2193
|
||||
$entypo-icon-left-thin: \2190; // \2190
|
||||
$entypo-icon-right-thin: \2192; // \2192
|
||||
$entypo-icon-up-thin: \2191; // \2191
|
||||
$entypo-icon-ccw: \27f2; // \27f2
|
||||
$entypo-icon-cw: \27f3; // \27f3
|
||||
$entypo-icon-arrows-ccw: \1f504; // \1f504
|
||||
$entypo-icon-level-down: \21b3; // \21b3
|
||||
$entypo-icon-level-up: \21b0; // \21b0
|
||||
$entypo-icon-shuffle: \1f500; // \1f500
|
||||
$entypo-icon-loop: \1f501; // \1f501
|
||||
$entypo-icon-switch: \21c6; // \21c6
|
||||
$entypo-icon-play: \25b6; // \25b6
|
||||
$entypo-icon-stop: \25a0; // \25a0
|
||||
$entypo-icon-pause: \2389; // \2389
|
||||
$entypo-icon-record: \26ab; // \26ab
|
||||
$entypo-icon-to-end: \23ed; // \23ed
|
||||
$entypo-icon-to-start: \23ee; // \23ee
|
||||
$entypo-icon-fast-forward: \23e9; // \23e9
|
||||
$entypo-icon-fast-backward: \23ea; // \23ea
|
||||
$entypo-icon-progress-0: \e768; // \e768
|
||||
$entypo-icon-progress-1: \e769; // \e769
|
||||
$entypo-icon-progress-2: \e76a; // \e76a
|
||||
$entypo-icon-progress-3: \e76b; // \e76b
|
||||
$entypo-icon-target: \1f3af; // \1f3af
|
||||
$entypo-icon-palette: \1f3a8; // \1f3a8
|
||||
$entypo-icon-list: \e005; // \e005
|
||||
$entypo-icon-list-add: \e003; // \e003
|
||||
$entypo-icon-signal: \1f4f6; // \1f4f6
|
||||
$entypo-icon-trophy: \1f3c6; // \1f3c6
|
||||
$entypo-icon-battery: \1f50b; // \1f50b
|
||||
$entypo-icon-back-in-time: \e771; // \e771
|
||||
$entypo-icon-monitor: \1f4bb; // \1f4bb
|
||||
$entypo-icon-mobile: \1f4f1; // \1f4f1
|
||||
$entypo-icon-network: \e776; // \e776
|
||||
$entypo-icon-cd: \1f4bf; // \1f4bf
|
||||
$entypo-icon-inbox: \e777; // \e777
|
||||
$entypo-icon-install: \e778; // \e778
|
||||
$entypo-icon-globe: \1f30e; // \1f30e
|
||||
$entypo-icon-cloud: \2601; // \2601
|
||||
$entypo-icon-cloud-thunder: \26c8; // \26c8
|
||||
$entypo-icon-flash: \26a1; // \26a1
|
||||
$entypo-icon-moon: \263d; // \263d
|
||||
$entypo-icon-flight: \2708; // \2708
|
||||
$entypo-icon-paper-plane: \e79b; // \e79b
|
||||
$entypo-icon-leaf: \1f342; // \1f342
|
||||
$entypo-icon-lifebuoy: \e788; // \e788
|
||||
$entypo-icon-mouse: \e789; // \e789
|
||||
$entypo-icon-briefcase: \1f4bc; // \1f4bc
|
||||
$entypo-icon-suitcase: \e78e; // \e78e
|
||||
$entypo-icon-dot: \e78b; // \e78b
|
||||
$entypo-icon-dot-2: \e78c; // \e78c
|
||||
$entypo-icon-dot-3: \e78d; // \e78d
|
||||
$entypo-icon-brush: \e79a; // \e79a
|
||||
$entypo-icon-magnet: \e7a1; // \e7a1
|
||||
$entypo-icon-infinity: \221e; // \221e
|
||||
$entypo-icon-erase: \232b; // \232b
|
||||
$entypo-icon-chart-pie: \e751; // \e751
|
||||
$entypo-icon-chart-line: \1f4c8; // \1f4c8
|
||||
$entypo-icon-chart-bar: \1f4ca; // \1f4ca
|
||||
$entypo-icon-chart-area: \1f53e; // \1f53e
|
||||
$entypo-icon-tape: \2707; // \2707
|
||||
$entypo-icon-graduation-cap: \1f393; // \1f393
|
||||
$entypo-icon-language: \e752; // \e752
|
||||
$entypo-icon-ticket: \1f3ab; // \1f3ab
|
||||
$entypo-icon-water: \1f4a6; // \1f4a6
|
||||
$entypo-icon-droplet: \1f4a7; // \1f4a7
|
||||
$entypo-icon-air: \e753; // \e753
|
||||
$entypo-icon-credit-card: \1f4b3; // \1f4b3
|
||||
$entypo-icon-floppy: \1f4be; // \1f4be
|
||||
$entypo-icon-clipboard: \1f4cb; // \1f4cb
|
||||
$entypo-icon-megaphone: \1f4e3; // \1f4e3
|
||||
$entypo-icon-database: \e754; // \e754
|
||||
$entypo-icon-drive: \e755; // \e755
|
||||
$entypo-icon-bucket: \e756; // \e756
|
||||
$entypo-icon-thermometer: \e757; // \e757
|
||||
$entypo-icon-key: \1f511; // \1f511
|
||||
$entypo-icon-flow-cascade: \e790; // \e790
|
||||
$entypo-icon-flow-branch: \e791; // \e791
|
||||
$entypo-icon-flow-tree: \e792; // \e792
|
||||
$entypo-icon-flow-line: \e793; // \e793
|
||||
$entypo-icon-flow-parallel: \e794; // \e794
|
||||
$entypo-icon-rocket: \1f680; // \1f680
|
||||
$entypo-icon-gauge: \e7a2; // \e7a2
|
||||
$entypo-icon-traffic-cone: \e7a3; // \e7a3
|
||||
$entypo-icon-cc: \e7a5; // \e7a5
|
||||
$entypo-icon-cc-by: \e7a6; // \e7a6
|
||||
$entypo-icon-cc-nc: \e7a7; // \e7a7
|
||||
$entypo-icon-cc-nc-eu: \e7a8; // \e7a8
|
||||
$entypo-icon-cc-nc-jp: \e7a9; // \e7a9
|
||||
$entypo-icon-cc-sa: \e7aa; // \e7aa
|
||||
$entypo-icon-cc-nd: \e7ab; // \e7ab
|
||||
$entypo-icon-cc-pd: \e7ac; // \e7ac
|
||||
$entypo-icon-cc-zero: \e7ad; // \e7ad
|
||||
$entypo-icon-cc-share: \e7ae; // \e7ae
|
||||
$entypo-icon-cc-remix: \e7af; // \e7af
|
||||
$entypo-icon-github: \f300; // \f300
|
||||
$entypo-icon-github-circled: \f301; // \f301
|
||||
$entypo-icon-flickr: \f303; // \f303
|
||||
$entypo-icon-flickr-circled: \f304; // \f304
|
||||
$entypo-icon-vimeo: \f306; // \f306
|
||||
$entypo-icon-vimeo-circled: \f307; // \f307
|
||||
$entypo-icon-twitter: \f309; // \f309
|
||||
$entypo-icon-twitter-circled: \f30a; // \f30a
|
||||
$entypo-icon-facebook: \f30c; // \f30c
|
||||
$entypo-icon-facebook-circled: \f30d; // \f30d
|
||||
$entypo-icon-facebook-squared: \f30e; // \f30e
|
||||
$entypo-icon-gplus: \f30f; // \f30f
|
||||
$entypo-icon-gplus-circled: \f310; // \f310
|
||||
$entypo-icon-pinterest: \f312; // \f312
|
||||
$entypo-icon-pinterest-circled: \f313; // \f313
|
||||
$entypo-icon-tumblr: \f315; // \f315
|
||||
$entypo-icon-tumblr-circled: \f316; // \f316
|
||||
$entypo-icon-linkedin: \f318; // \f318
|
||||
$entypo-icon-linkedin-circled: \f319; // \f319
|
||||
$entypo-icon-dribbble: \f31b; // \f31b
|
||||
$entypo-icon-dribbble-circled: \f31c; // \f31c
|
||||
$entypo-icon-stumbleupon: \f31e; // \f31e
|
||||
$entypo-icon-stumbleupon-circled: \f31f; // \f31f
|
||||
$entypo-icon-lastfm: \f321; // \f321
|
||||
$entypo-icon-lastfm-circled: \f322; // \f322
|
||||
$entypo-icon-rdio: \f324; // \f324
|
||||
$entypo-icon-rdio-circled: \f325; // \f325
|
||||
$entypo-icon-spotify: \f327; // \f327
|
||||
$entypo-icon-spotify-circled: \f328; // \f328
|
||||
$entypo-icon-qq: \f32a; // \f32a
|
||||
$entypo-icon-instagram: \f32d; // \f32d
|
||||
$entypo-icon-dropbox: \f330; // \f330
|
||||
$entypo-icon-evernote: \f333; // \f333
|
||||
$entypo-icon-flattr: \f336; // \f336
|
||||
$entypo-icon-skype: \f339; // \f339
|
||||
$entypo-icon-skype-circled: \f33a; // \f33a
|
||||
$entypo-icon-renren: \f33c; // \f33c
|
||||
$entypo-icon-sina-weibo: \f33f; // \f33f
|
||||
$entypo-icon-paypal: \f342; // \f342
|
||||
$entypo-icon-picasa: \f345; // \f345
|
||||
$entypo-icon-soundcloud: \f348; // \f348
|
||||
$entypo-icon-mixi: \f34b; // \f34b
|
||||
$entypo-icon-behance: \f34e; // \f34e
|
||||
$entypo-icon-google-circles: \f351; // \f351
|
||||
$entypo-icon-vkontakte: \f354; // \f354
|
||||
$entypo-icon-smashing: \f357; // \f357
|
||||
$entypo-icon-sweden: \f601; // \f601
|
||||
$entypo-icon-db-shape: \f600; // \f600
|
||||
$entypo-icon-logo-db: \f603; // \f603
|
||||
|
||||
|
||||
// Grab the list of icons
|
||||
@import "entypo-icon-list";
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,33 @@
|
|||
# Require any additional compass plugins here.
|
||||
|
||||
# Tell compass where to find local extensions
|
||||
# If you followed directions and ran 'gem install modular-scale' comment the next two lines out:
|
||||
extensions_dir = "bower_components/gumby/sass/extensions"
|
||||
|
||||
Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))
|
||||
|
||||
# Uncomment these to use regular Ruby gems.
|
||||
# require 'modular-scale'
|
||||
# require 'sassy-math'
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "css"
|
||||
sass_dir = "sass"
|
||||
images_dir = "img"
|
||||
|
||||
# You can select your preferred output style here (can be overridden via the command line) :nested or :expanded or :compact or :compressed:
|
||||
output_style = :compact
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
|
||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||
line_comments = false
|
||||
|
||||
|
||||
# If you prefer the indented syntax, you might want to regenerate this
|
||||
# project again passing --syntax sass, or you can uncomment this:
|
||||
# preferred_syntax = :sass
|
||||
# and then run:
|
||||
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue