Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Initial commit

I should have been making smaller commits along the way but oh well.
This is what it is.
  • Loading branch information...
commit 14ec39a71ba0cd4623bd896a22f19eab9221c49d 1 parent fcb20f2
@davatron5000 davatron5000 authored
Showing with 21,884 additions and 1 deletion.
  1. +3 −0  .gitignore
  2. +33 −0 CONTRIBUTING.md
  3. +84 −1 README.md
  4. +65 −0 Rakefile
  5. +27 −0 _config.yml
  6. +35 −0 _layouts/category_index.html
  7. +156 −0 _layouts/default.html
  8. +60 −0 _layouts/post.html
  9. +32 −0 _plugins/category.rb
  10. +24 −0 _plugins/category_list.rb
  11. +3 −0  _plugins/svg.rb
  12. +10 −0 _posts/2010-11-01-first-post.md
  13. +12 −0 _posts/2010-11-10-second-post.md
  14. +34 −0 _sass/_accordion.scss
  15. +79 −0 _sass/_alerts.scss
  16. +24 −0 _sass/_breadcrumbs.scss
  17. +227 −0 _sass/_button-groups.scss
  18. +230 −0 _sass/_buttons.scss
  19. +131 −0 _sass/_carousel.scss
  20. +31 −0 _sass/_close.scss
  21. +61 −0 _sass/_code.scss
  22. +22 −0 _sass/_component-animations.scss
  23. +233 −0 _sass/_dropdowns.scss
  24. +686 −0 _sass/_forms.scss
  25. +21 −0 _sass/_grid.scss
  26. +25 −0 _sass/_hero-unit.scss
  27. +334 −0 _sass/_jumbotron.scss
  28. +81 −0 _sass/_labels-badges.scss
  29. +19 −0 _sass/_layouts.scss
  30. +55 −0 _sass/_media.scss
  31. +684 −0 _sass/_mixins.scss
  32. +95 −0 _sass/_modals.scss
  33. +508 −0 _sass/_navbar.scss
  34. +391 −0 _sass/_navs.scss
  35. +41 −0 _sass/_pager.scss
  36. +121 −0 _sass/_pagination.scss
  37. +129 −0 _sass/_popovers.scss
  38. +122 −0 _sass/_progress-bars.scss
  39. +216 −0 _sass/_reset.scss
  40. +28 −0 _sass/_responsive-1200px-min.scss
  41. +193 −0 _sass/_responsive-767px-max.scss
  42. +19 −0 _sass/_responsive-768px-979px.scss
  43. +185 −0 _sass/_responsive-navbar.scss
  44. +26 −0 _sass/_responsive-utilities.scss
  45. +52 −0 _sass/_scaffolding.scss
  46. +193 −0 _sass/_sprites.scss
  47. +228 −0 _sass/_tables.scss
  48. +52 −0 _sass/_thumbnails.scss
  49. +70 −0 _sass/_tooltip.scss
  50. +235 −0 _sass/_type.scss
  51. +45 −0 _sass/_utilities.scss
  52. +301 −0 _sass/_variables.scss
  53. +29 −0 _sass/_wells.scss
  54. +63 −0 _sass/bootstrap.scss
  55. +60 −0 _sass/responsive.scss
  56. +139 −0 _sass/tests/buttons.html
  57. +139 −0 _sass/tests/css-tests.css
  58. +1,345 −0 _sass/tests/css-tests.html
  59. +71 −0 _sass/tests/forms-responsive.html
  60. +179 −0 _sass/tests/forms.html
  61. +104 −0 _sass/tests/navbar-fixed-top.html
  62. +107 −0 _sass/tests/navbar-static-top.html
  63. +107 −0 _sass/tests/navbar.html
  64. +10 −0 about.md
  65. +37 −0 archives.html
  66. +27 −0 atom.xml
  67. +7 −0 config.rb
  68. +5,739 −0 css/bootstrap.css
  69. +1,505 −0 css/responsive.css
  70. BIN  img/glyphicons-halflings-white.png
  71. BIN  img/glyphicons-halflings.png
  72. BIN  img/grid.png
  73. +3 −0  img/logo.svg
  74. +53 −0 index.html
  75. +12 −0 js/.jshintrc
  76. +117 −0 js/bootstrap-affix.js
  77. +99 −0 js/bootstrap-alert.js
  78. +105 −0 js/bootstrap-button.js
  79. +185 −0 js/bootstrap-carousel.js
  80. +167 −0 js/bootstrap-collapse.js
  81. +161 −0 js/bootstrap-dropdown.js
  82. +245 −0 js/bootstrap-modal.js
  83. +114 −0 js/bootstrap-popover.js
  84. +162 −0 js/bootstrap-scrollspy.js
  85. +144 −0 js/bootstrap-tab.js
  86. +287 −0 js/bootstrap-tooltip.js
  87. +60 −0 js/bootstrap-transition.js
  88. +323 −0 js/bootstrap-typeahead.js
  89. +56 −0 js/tests/index.html
  90. +63 −0 js/tests/phantom.js
  91. +14 −0 js/tests/server.js
  92. +25 −0 js/tests/unit/bootstrap-affix.js
  93. +62 −0 js/tests/unit/bootstrap-alert.js
  94. +102 −0 js/tests/unit/bootstrap-button.js
  95. +69 −0 js/tests/unit/bootstrap-carousel.js
  96. +94 −0 js/tests/unit/bootstrap-collapse.js
  97. +151 −0 js/tests/unit/bootstrap-dropdown.js
  98. +120 −0 js/tests/unit/bootstrap-modal.js
  99. +21 −0 js/tests/unit/bootstrap-phantom.js
  100. +113 −0 js/tests/unit/bootstrap-popover.js
  101. +37 −0 js/tests/unit/bootstrap-scrollspy.js
  102. +86 −0 js/tests/unit/bootstrap-tab.js
  103. +159 −0 js/tests/unit/bootstrap-tooltip.js
  104. +13 −0 js/tests/unit/bootstrap-transition.js
  105. +231 −0 js/tests/unit/bootstrap-typeahead.js
  106. +2 −0  js/tests/vendor/jquery.js
  107. +232 −0 js/tests/vendor/qunit.css
  108. +1,510 −0 js/tests/vendor/qunit.js
  109. +5 −0 robots.txt
  110. +43 −0 sitemap.xml
View
3  .gitignore
@@ -1 +1,4 @@
_site/
+.sass-cache/
+.DS_Store
+Icon
View
33 CONTRIBUTING.md
@@ -0,0 +1,33 @@
+---
+layout: post
+title: Contributing to SimpleA11Y
+---
+Do you enjoy web accessibility and want to help? **Here's how you can help.**
+
+## Writing articles
+We have a list of articles we'd love to see written. Have an idea for an article? We'd love to know what you want to contribute.
+
+1. Search to make sure someone hasn't snagged the article already.
+2. Claim an article by starting a new issue with the article title and assign the issue to yourself. The final title can (or probably should) be different.
+3. When you check-in, reference that issue number in the commit, i.e, `re: #32`
+
+## Reporting issues
+Notice something innaccurate? Noticed something inaccessible on this site? You think you can code something up better?
+
+- File an issue.
+- Tag your issue as either an `innaccuracy`, a `inaccessibility`, or a `bug` (for site issues).
+- **ISSUES ARE NOT** free help on your website. Use [StackOverflow](http://stackoverflow.com) for that.
+
+## Key branches
+
+- `gh-pages` is the "master" branch. This is the website.
+
+## Pull requests
+
+- Filing a descriptive issue then assigning it to yourself before you commit would really help get your commit accepted.
+- CSS changes must be done in .sass files first, never just the compiled files
+- Don't commit compiled CSS files, plskthx.
+
+## License
+
+By contributing your code, you agree to license your contribution under the terms of the [APLv2](https://github.com/twitter/bootstrap/blob/master/LICENSE).
View
85 README.md
@@ -1,4 +1,87 @@
simpleA11Y
==========
-Making #A11Y tips and tricks easier to digest and leveraging the community into the cloud.
+Making #A11Y tips and tricks easier to digest and leveraging the community into the cloud.
+
+
+# Jekyll Template
+
+This is a template project for jekyll that you can clone and customise to suit your needs. Its quite opinionated in what it provides, the idea is to get you up and running with feed support, analytics and comments and feedback. This is meant for a standalone blog, not for [github pages](http://pages.github.com/)
+
+Please don't fork otherwise I'll see lots of noise on the fork queue that are your customisation for your blog. I suggest you create a repo on github (public or private, its up to you) and do the following assuming the new repo is available at `https://github.com/username/reponame`:
+
+ git clone https://github.com/krisb/jekyll-template.git mysite
+ cd mysite
+ rm -rf .git
+ git init
+ git add -A
+ git commit -m 'initial template based on https://github.com/krisb/jekyll-template'
+ git remote add origin git@github.com:username/reponame.git
+ git push -u origin master
+
+The following sections detail how to set up and use the template. The commands are known to work on my macbook, YRMV.
+
+## Ruby 1.9.2 via RVM
+
+I recommend that you install [rvm](http://rvm.beginrescueend.com/) and set everything up using that. For single user install run the following:
+
+ bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head )
+
+Follow the instructions, adding the necessary lines in `.bashrc`, e.g.
+
+ # RVM
+ if [[ -s "$HOME/.rvm/scripts/rvm" ]] ; then
+ source "$HOME/.rvm/scripts/rvm"
+ fi
+
+Now source `.bashrc` (you don't need to do this normally as it runs on login, it is just to update the current term window)
+
+ source ~/.bashrc
+
+You can then install and use ruby 1.9.2:
+
+ rvm install 1.9.2
+ rvm use 1.9.2
+
+## Gems
+
+Run the following to install the necessary gems:
+
+ gem install jekyll rdiscount compass
+
+## Markup
+
+I prefer markdown, but you can use a number of supported markup formats.
+
+## Pygments (code highlighting)
+
+Assuming you have python installed with `easy_install` available:
+
+ sudo easy_install Pygments
+
+## Stylesheets
+
+I recommend that you use [compass](http://compass-style.org/). I've included `_sass/mixins/_syntax.scss` for the pygments syntax highlighting.
+
+## Rake deploy task
+
+The following tasks are available (use `rake -T` to list them):
+
+ rake build # Build site with Jekyll
+ rake check_links # Check links for site already running on localhost:4000
+ rake clean # Clean up generated site
+ rake deploy # Build and deploy
+ rake server # Start server with --auto
+
+The deploy task is simplistic and uses rsync to copy the generated site to your server. You will need to replace the username, servername and path as appropriate.
+
+## Configuration
+
+There are a number of values in `_config.yml` to customise your site. Change as appropriate.
+
+The following enhancements are baked in and enabled if you provide the configuration required.
+
+* [Google Analytics](http://www.google.com/analytics) - web analytics using the [async](http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=174090) script
+* [Disqus](http://disqus.com/) - comments and feedback
+* [Feedburner](http://feedburner.google.com/) - rss feeds
+* [Github Ribbon](https://github.com/blog/273-github-ribbons) - fork me on github ribbon
View
65 Rakefile
@@ -0,0 +1,65 @@
+task :default => :server
+
+desc 'Clean up generated site'
+task :clean do
+ cleanup
+end
+
+desc 'Build site with Jekyll'
+task :build => :clean do
+ compass
+ jekyll
+end
+
+desc 'Start server with --auto'
+task :server => :clean do
+ compass
+ jekyll('--server --auto')
+end
+
+desc 'Build and deploy'
+task :deploy => :build do
+ sh 'rsync -rtzh --progress --delete _site/ username@servername:/var/www/websitename/'
+end
+
+desc 'Check links for site already running on localhost:4000'
+task :check_links do
+ begin
+ require 'anemone'
+ root = 'http://localhost:4000/'
+ Anemone.crawl(root, :discard_page_bodies => true) do |anemone|
+ anemone.after_crawl do |pagestore|
+ broken_links = Hash.new { |h, k| h[k] = [] }
+ pagestore.each_value do |page|
+ if page.code != 200
+ referrers = pagestore.pages_linking_to(page.url)
+ referrers.each do |referrer|
+ broken_links[referrer] << page
+ end
+ end
+ end
+ broken_links.each do |referrer, pages|
+ puts "#{referrer.url} contains the following broken links:"
+ pages.each do |page|
+ puts " HTTP #{page.code} #{page.url}"
+ end
+ end
+ end
+ end
+
+ rescue LoadError
+ abort 'Install anemone gem: gem install anemone'
+ end
+end
+
+def cleanup
+ sh 'rm -rf _site'
+end
+
+def jekyll(opts = '')
+ sh 'jekyll ' + opts
+end
+
+def compass(opts = '')
+ sh 'compass compile -c config.rb --force ' + opts
+end
View
27 _config.yml
@@ -0,0 +1,27 @@
+# standard jekyll configuration
+
+permalink: /posts/:title
+pygments: false
+exclude: ['Rakefile', 'README.md', 'config.rb']
+markdown: kramdown
+
+# configuration required for some pages
+
+domain: simplea11y.com
+title: Simple Accessibility
+author: Dave Rupert
+email: dave@paravelinc.com
+
+# configuration for ehancements, uncomment to enable
+
+# feedburner:
+# id: feedburnerid
+
+# google_analytics:
+# account: UA-XXXXX-X
+
+# github:
+# username: ghusername
+
+# disqus:
+# id: disqusid
View
35 _layouts/category_index.html
@@ -0,0 +1,35 @@
+---
+layout: default
+description: A description about my blog homepage
+---
+<div class="container-fluid">
+
+ <div class="row-fluid">
+ <div class="span9">
+ <header class="page-header">
+ <h2>{{ page.title }}</h2>
+ </header>
+
+ <div class="row-fluid">
+ {% for post in site.categories[page.category] %}
+ <div class="span4">
+ <h4>{{ post.title }}</h4>
+ {% if post.tldr %}<p>{{ post.tldr }}</p>{% endif %}
+ <p><a class="btn" href="{{ post.url }}">Read more &raquo;</a></p>
+ </div><!--/span-->
+ {% endfor %}
+ </div><!--/row-->
+ </div><!--/span-->
+
+ <div class="span3">
+ <div class="well sidebar-nav">
+ <ul class="nav nav-list">
+ <li class="nav-header">Categories</li>
+ {% category_list %}
+ </ul>
+ </div><!--/.well -->
+ </div><!--/span-->
+
+
+ </div><!--/row-->
+</div>
View
156 _layouts/default.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
+ {% if page.description %}
+ <meta name="description" content="{{ page.description }}" />
+ {% endif %}
+ <link rel="stylesheet" href="/css/bootstrap.css" />
+ <style type="text/css">
+ body {
+ padding-top: 60px;
+ padding-bottom: 40px;
+ }
+ .sidebar-nav {
+ padding: 9px 0;
+ }
+ .logo {
+ width:0.75em;
+ height:auto;
+ position: relative;
+ top: -0.1em;
+ margin-right: 0.15em;
+ }
+ #contributors-list {
+ margin-left: 0;
+ }
+ #contributors-list li {
+ list-style-type: none;
+ display: inline-block;
+ margin-right: 0.5em;
+ width: 3.5em;
+ border-radius: 2em;
+ overflow: hidden;
+ }
+ #contributors-list a {
+ opacity: 0.6;
+ }
+ #contributors-list a:hover {
+ opacity: 1;
+ }
+
+ </style>
+
+ <link rel="stylesheet" href="/css/responsive.css" />
+ {% if site.feedburner %}
+ <link href="http://feeds.feedburner.com/{{ site.feedburner.id }}" rel="alternate" title="{{ site.title }}" type="application/atom+xml" />
+ {% endif %}
+ {% if site.google_analytics %}
+ <!-- google analytics async -->
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', '{{ site.google_analytics.account }}']);
+ _gaq.push(['_trackPageview']);
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ {% endif %}
+ </head>
+ <body>
+ <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar-inner">
+ <div class="container-fluid">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href="/"><img src="/img/logo.svg" class="logo" />Simple A11Y</a>
+ <div class="nav-collapse collapse">
+ <ul class="nav">
+ <li><a href="/">Home</a></li>
+ <li><a href="/about.html">About</a></li>
+ <li class="dropdown">
+ <a href="/archives.html" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ {% category_list %}
+ </ul>
+ </li>
+ </ul>
+ </div><!--/.nav-collapse -->
+ </div>
+ </div>
+ </div>
+
+ {{ content }}
+
+
+ <div class="container-fluid">
+ <hr>
+
+ <footer>
+ <div class="row-fluid">
+ <div class="span8">
+ <h5>Contributors</h5>
+ <ul id="contributors-list"></ul>
+ <p>Notice an issue or want to help? <a href="/contributing.html">Please contribute</a>.</p>
+ </div>
+
+ <div class="span4">
+ <h5>Colophon</h5>
+ <p>&copy;2013 SimpleA11Y<br/>
+ Powered by <a href="">Jekyll</a> & <a href="">Boostrap</a></p>
+ </div>
+
+ </div>
+ </footer>
+
+ </div> <!-- /container -->
+
+ {% if site.github %}
+ <a href="http://github.com/{{ site.github.username }}"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" /></a>
+ {% endif %}
+
+ <!-- Le javascript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
+ <script src="/js/bootstrap-dropdown.js"></script>
+ <script src="/js/bootstrap-collapse.js"></script>
+ <!--
+ <script src="/js/bootstrap-transition.js"></script>
+ <script src="/js/bootstrap-alert.js"></script>
+ <script src="/js/bootstrap-modal.js"></script>
+ <script src="/js/bootstrap-scrollspy.js"></script>
+ <script src="/js/bootstrap-tab.js"></script>
+ <script src="/js/bootstrap-tooltip.js"></script>
+ <script src="/js/bootstrap-popover.js"></script>
+ <script src="/js/bootstrap-button.js"></script>
+ <script src="/js/bootstrap-carousel.js"></script>
+ <script src="/js/bootstrap-typeahead.js"></script>
+ -->
+ <script>
+ (function($){
+ var url = 'https://api.github.com/repos/davatron5000/fitVids.js/contributors';
+
+ $.ajax(url)
+ .success(function(data) {
+
+ var html = '';
+ $(data).each(function(i, user){
+ html += '<li><a href="'+ user.url.replace('api.','').replace('users/','') +'"><img src="'+ user.avatar_url +'" alt="'+ user.login +'" class="contributor-avatar"></a></li>';
+ });
+
+ $(html).appendTo('#contributors-list');
+
+ });
+
+ })(jQuery);
+ </script>
+ </body>
+</html>
View
60 _layouts/post.html
@@ -0,0 +1,60 @@
+---
+layout: default
+---
+
+<div class="container-fluid">
+
+ <div class="row-fluid">
+ <div class="span8">
+
+ <div class="row-fluid">
+ <div class="span11">
+ <article>
+ {% if page.title %}
+ <header class="page-header">
+ <h1>{{ page.title }}</h1>
+ {% if page.date %}<div class="postdate">Posted <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time>{% if page.last_updated %}. Last updated <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.last_updated | date: "%B %d, %Y" }}</time>{% endif %}</div>{% endif %}
+
+ </header>
+ {% endif %}
+
+ <div class="post">
+ {{ content }}
+ </div>
+
+ {% if site.disq4s %}
+ <div id="comments">
+ <h2>Comments</h2>
+ <div id="disqus_thread"></div>
+ <script type="text/javascript">
+ var disqus_identifier = "{{ page.url }}";
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://{{ site.disqus.id }}.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+ </script>
+ <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript={{ site.disqus.id }}">comments powered by Disqus.</a></noscript>
+ <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
+ </div>
+ {% endif %}
+ </article>
+ </div>
+ </div>
+ </div>
+
+ <div class="span4">
+
+ <div id="related">
+ <div class="well sidebar-nav">
+ <ul class="nav nav-list">
+ <li class="nav-header">Related Posts</li>
+ {% for post in site.related_posts limit:5 %}
+ <li><a href="{{ post.url }}">{{ post.title }}</a></li>
+ {% endfor %}
+ </ul>
+ </div><!--/.well -->
+ </div>
+ </div>
+ </div>
+</div>
View
32 _plugins/category.rb
@@ -0,0 +1,32 @@
+module Jekyll
+
+ class CategoryPage < Page
+ def initialize(site, base, dir, category)
+ @site = site
+ @base = base
+ @dir = dir
+ @name = 'index.html'
+
+ self.process(@name)
+ self.read_yaml(File.join(base, '_layouts'), 'category_index.html')
+ self.data['category'] = category
+
+ category_title_prefix = site.config['category_title_prefix'] || 'Category: '
+ self.data['title'] = "#{category_title_prefix}#{category}"
+ end
+ end
+
+ class CategoryPageGenerator < Generator
+ safe true
+
+ def generate(site)
+ if site.layouts.key? 'category_index'
+ dir = site.config['category_dir'] || 'categories'
+ site.categories.keys.each do |category|
+ site.pages << CategoryPage.new(site, site.source, File.join(dir, category), category)
+ end
+ end
+ end
+ end
+
+end
View
24 _plugins/category_list.rb
@@ -0,0 +1,24 @@
+# place this file in your plugins directory and add the tag to your sidebar
+#$ cat source/_includes/custom/asides/categories.html
+#<section>
+# <h1>Categories</h1>
+# <ul id="categories">
+# {% category_list %}
+# </ul>
+#</section>
+
+module Jekyll
+ class CategoryListTag < Liquid::Tag
+ def render(context)
+ html = ""
+ categories = context.registers[:site].categories.keys
+ categories.sort.each do |category|
+ posts_in_category = context.registers[:site].categories[category].size
+ html << "<li class='category'><a href='/categories/#{category}/'>#{category} (#{posts_in_category})</a></li>\n"
+ end
+ html
+ end
+ end
+end
+
+Liquid::Template.register_tag('category_list', Jekyll::CategoryListTag)
View
3  _plugins/svg.rb
@@ -0,0 +1,3 @@
+require 'webrick'
+include WEBrick
+WEBrick::HTTPUtils::DefaultMimeTypes.store 'svg', 'image/svg+xml'
View
10 _posts/2010-11-01-first-post.md
@@ -0,0 +1,10 @@
+---
+layout: post
+title: |
+ How-to navigate using your keyboard
+categories:
+ - How-to
+last_updated: 2010-10-07
+---
+
+This is the first post. It has been updated since the post so has a last_updated value in the frontmatter.
View
12 _posts/2010-11-10-second-post.md
@@ -0,0 +1,12 @@
+---
+layout: post
+title: Second Post
+tags: [second post]
+---
+
+{% highlight ruby %}
+#!/usr/bin/env ruby
+42.times do
+ puts "Hello World!"
+end
+{% endhighlight %}
View
34 _sass/_accordion.scss
@@ -0,0 +1,34 @@
+//
+// Accordion
+// --------------------------------------------------
+
+
+// Parent container
+.accordion {
+ margin-bottom: $baseLineHeight;
+}
+
+// Group == heading + body
+.accordion-group {
+ margin-bottom: 2px;
+ border: 1px solid #e5e5e5;
+ @include border-radius($baseBorderRadius);
+}
+.accordion-heading {
+ border-bottom: 0;
+}
+.accordion-heading .accordion-toggle {
+ display: block;
+ padding: 8px 15px;
+}
+
+// General toggle styles
+.accordion-toggle {
+ cursor: pointer;
+}
+
+// Inner needs the styles because you can't animate properly with any styles on the element
+.accordion-inner {
+ padding: 9px 15px;
+ border-top: 1px solid #e5e5e5;
+}
View
79 _sass/_alerts.scss
@@ -0,0 +1,79 @@
+//
+// Alerts
+// --------------------------------------------------
+
+
+// Base styles
+// -------------------------
+
+.alert {
+ padding: 8px 35px 8px 14px;
+ margin-bottom: $baseLineHeight;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ background-color: $warningBackground;
+ border: 1px solid $warningBorder;
+ @include border-radius($baseBorderRadius);
+}
+.alert,
+.alert h4 {
+ // Specified for the h4 to prevent conflicts of changing $headingsColor
+ color: $warningText;
+}
+.alert h4 {
+ margin: 0;
+}
+
+// Adjust close link position
+.alert .close {
+ position: relative;
+ top: -2px;
+ right: -21px;
+ line-height: $baseLineHeight;
+}
+
+
+// Alternate styles
+// -------------------------
+
+.alert-success {
+ background-color: $successBackground;
+ border-color: $successBorder;
+ color: $successText;
+}
+.alert-success h4 {
+ color: $successText;
+}
+.alert-danger,
+.alert-error {
+ background-color: $errorBackground;
+ border-color: $errorBorder;
+ color: $errorText;
+}
+.alert-danger h4,
+.alert-error h4 {
+ color: $errorText;
+}
+.alert-info {
+ background-color: $infoBackground;
+ border-color: $infoBorder;
+ color: $infoText;
+}
+.alert-info h4 {
+ color: $infoText;
+}
+
+
+// Block alerts
+// -------------------------
+
+.alert-block {
+ padding-top: 14px;
+ padding-bottom: 14px;
+}
+.alert-block > p,
+.alert-block > ul {
+ margin-bottom: 0;
+}
+.alert-block p + p {
+ margin-top: 5px;
+}
View
24 _sass/_breadcrumbs.scss
@@ -0,0 +1,24 @@
+//
+// Breadcrumbs
+// --------------------------------------------------
+
+
+.breadcrumb {
+ padding: 8px 15px;
+ margin: 0 0 $baseLineHeight;
+ list-style: none;
+ background-color: #f5f5f5;
+ @include border-radius($baseBorderRadius);
+ > li {
+ display: inline-block;
+ @include ie7-inline-block();
+ text-shadow: 0 1px 0 $white;
+ > .divider {
+ padding: 0 5px;
+ color: #ccc;
+ }
+ }
+ .active {
+ color: $grayLight;
+ }
+}
View
227 _sass/_button-groups.scss
@@ -0,0 +1,227 @@
+//
+// Button groups
+// --------------------------------------------------
+
+
+// Make the div behave like a button
+.btn-group {
+ position: relative;
+ display: inline-block;
+ @include ie7-inline-block();
+ font-size: 0; // remove as part 1 of font-size inline-block hack
+ vertical-align: middle; // match .btn alignment given font-size hack above
+ white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
+ @include ie7-restore-left-whitespace();
+}
+
+// Space out series of button groups
+.btn-group + .btn-group {
+ margin-left: 5px;
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+ font-size: 0; // Hack to remove whitespace that results from using inline-block
+ margin-top: $baseLineHeight / 2;
+ margin-bottom: $baseLineHeight / 2;
+ > .btn + .btn,
+ > .btn-group + .btn,
+ > .btn + .btn-group {
+ margin-left: 5px;
+ }
+}
+
+// Float them, remove border radius, then re-add to first and last elements
+.btn-group > .btn {
+ position: relative;
+ @include border-radius(0);
+}
+.btn-group > .btn + .btn {
+ margin-left: -1px;
+}
+.btn-group > .btn,
+.btn-group > .dropdown-menu,
+.btn-group > .popover {
+ font-size: $baseFontSize; // redeclare as part 2 of font-size inline-block hack
+}
+
+// Reset fonts for other sizes
+.btn-group > .btn-mini {
+ font-size: $fontSizeMini;
+}
+.btn-group > .btn-small {
+ font-size: $fontSizeSmall;
+}
+.btn-group > .btn-large {
+ font-size: $fontSizeLarge;
+}
+
+// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+.btn-group > .btn:first-child {
+ margin-left: 0;
+ @include border-top-left-radius($baseBorderRadius);
+ @include border-bottom-left-radius($baseBorderRadius);
+}
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.btn-group > .btn:last-child,
+.btn-group > .dropdown-toggle {
+ @include border-top-right-radius($baseBorderRadius);
+ @include border-bottom-right-radius($baseBorderRadius);
+}
+// Reset corners for large buttons
+.btn-group > .btn.large:first-child {
+ margin-left: 0;
+ @include border-top-left-radius($borderRadiusLarge);
+ @include border-bottom-left-radius($borderRadiusLarge);
+}
+.btn-group > .btn.large:last-child,
+.btn-group > .large.dropdown-toggle {
+ @include border-top-right-radius($borderRadiusLarge);
+ @include border-bottom-right-radius($borderRadiusLarge);
+}
+
+// On hover/focus/active, bring the proper btn to front
+.btn-group > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group > .btn:active,
+.btn-group > .btn.active {
+ z-index: 2;
+}
+
+// On active and open, don't show outline
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+ outline: 0;
+}
+
+
+
+// Split button dropdowns
+// ----------------------
+
+// Give the line between buttons some depth
+.btn-group > .btn + .dropdown-toggle {
+ padding-left: 8px;
+ padding-right: 8px;
+ @include box-shadow(inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
+ *padding-top: 5px;
+ *padding-bottom: 5px;
+}
+.btn-group > .btn-mini + .dropdown-toggle {
+ padding-left: 5px;
+ padding-right: 5px;
+ *padding-top: 2px;
+ *padding-bottom: 2px;
+}
+.btn-group > .btn-small + .dropdown-toggle {
+ *padding-top: 5px;
+ *padding-bottom: 4px;
+}
+.btn-group > .btn-large + .dropdown-toggle {
+ padding-left: 12px;
+ padding-right: 12px;
+ *padding-top: 7px;
+ *padding-bottom: 7px;
+}
+
+.btn-group.open {
+
+ // The clickable button for toggling the menu
+ // Remove the gradient and set the same inset shadow as the :active state
+ .dropdown-toggle {
+ background-image: none;
+ @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
+ }
+
+ // Keep the hover's background when dropdown is open
+ .btn.dropdown-toggle {
+ background-color: $btnBackgroundHighlight;
+ }
+ .btn-primary.dropdown-toggle {
+ background-color: $btnPrimaryBackgroundHighlight;
+ }
+ .btn-warning.dropdown-toggle {
+ background-color: $btnWarningBackgroundHighlight;
+ }
+ .btn-danger.dropdown-toggle {
+ background-color: $btnDangerBackgroundHighlight;
+ }
+ .btn-success.dropdown-toggle {
+ background-color: $btnSuccessBackgroundHighlight;
+ }
+ .btn-info.dropdown-toggle {
+ background-color: $btnInfoBackgroundHighlight;
+ }
+ .btn-inverse.dropdown-toggle {
+ background-color: $btnInverseBackgroundHighlight;
+ }
+}
+
+
+// Reposition the caret
+.btn .caret {
+ margin-top: 8px;
+ margin-left: 0;
+}
+// Carets in other button sizes
+.btn-mini .caret,
+.btn-small .caret,
+.btn-large .caret {
+ margin-top: 6px;
+}
+.btn-large .caret {
+ border-left-width: 5px;
+ border-right-width: 5px;
+ border-top-width: 5px;
+}
+// Upside down carets for .dropup
+.dropup .btn-large .caret {
+ border-bottom-width: 5px;
+}
+
+
+
+// Account for other colors
+.btn-primary,
+.btn-warning,
+.btn-danger,
+.btn-info,
+.btn-success,
+.btn-inverse {
+ .caret {
+ border-top-color: $white;
+ border-bottom-color: $white;
+ }
+}
+
+
+
+// Vertical button groups
+// ----------------------
+
+.btn-group-vertical {
+ display: inline-block; // makes buttons only take up the width they need
+ @include ie7-inline-block();
+}
+.btn-group-vertical > .btn {
+ display: block;
+ float: none;
+ max-width: 100%;
+ @include border-radius(0);
+}
+.btn-group-vertical > .btn + .btn {
+ margin-left: 0;
+ margin-top: -1px;
+}
+.btn-group-vertical > .btn:first-child {
+ @include border-radius($baseBorderRadius $baseBorderRadius 0 0);
+}
+.btn-group-vertical > .btn:last-child {
+ @include border-radius(0 0 $baseBorderRadius $baseBorderRadius);
+}
+.btn-group-vertical > .btn-large:first-child {
+ @include border-radius($borderRadiusLarge $borderRadiusLarge 0 0);
+}
+.btn-group-vertical > .btn-large:last-child {
+ @include border-radius(0 0 $borderRadiusLarge $borderRadiusLarge);
+}
View
230 _sass/_buttons.scss
@@ -0,0 +1,230 @@
+//
+// Buttons
+// --------------------------------------------------
+
+
+// Base styles
+// --------------------------------------------------
+
+// Core
+.btn {
+ display: inline-block;
+ @include ie7-inline-block();
+ padding: 4px 12px;
+ margin-bottom: 0; // For input.btn
+ font-size: $baseFontSize;
+ line-height: $baseLineHeight;
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+ @include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
+ border: 1px solid $btnBorder;
+ *border: 0; // Remove the border to prevent IE7's black border on input:focus
+ border-bottom-color: darken($btnBorder, 10%);
+ @include border-radius($baseBorderRadius);
+ @include ie7-restore-left-whitespace(); // Give IE7 some love
+ @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
+
+ // Hover state
+ &:hover {
+ color: $grayDark;
+ text-decoration: none;
+ background-position: 0 -15px;
+
+ // transition is only when going to hover, otherwise the background
+ // behind the gradient (there for IE<=9 fallback) gets mismatched
+ @include transition(background-position .1s linear);
+ }
+
+ // Focus state for keyboard and accessibility
+ &:focus {
+ @include tab-focus();
+ }
+
+ // Active state
+ &.active,
+ &:active {
+ background-image: none;
+ outline: 0;
+ @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
+ }
+
+ // Disabled state
+ &.disabled,
+ &[disabled] {
+ cursor: default;
+ background-image: none;
+ @include opacity(65);
+ @include box-shadow(none);
+ }
+
+}
+
+
+
+// Button Sizes
+// --------------------------------------------------
+
+// Large
+.btn-large {
+ padding: $paddingLarge;
+ font-size: $fontSizeLarge;
+ @include border-radius($borderRadiusLarge);
+}
+.btn-large [class^="icon-"],
+.btn-large [class*=" icon-"] {
+ margin-top: 4px;
+}
+
+// Small
+.btn-small {
+ padding: $paddingSmall;
+ font-size: $fontSizeSmall;
+ @include border-radius($borderRadiusSmall);
+}
+.btn-small [class^="icon-"],
+.btn-small [class*=" icon-"] {
+ margin-top: 0;
+}
+.btn-mini [class^="icon-"],
+.btn-mini [class*=" icon-"] {
+ margin-top: -1px;
+}
+
+// Mini
+.btn-mini {
+ padding: $paddingMini;
+ font-size: $fontSizeMini;
+ @include border-radius($borderRadiusSmall);
+}
+
+
+// Block button
+// -------------------------
+
+.btn-block {
+ display: block;
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+ @include box-sizing(border-box);
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+ margin-top: 5px;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ &.btn-block {
+ width: 100%;
+ }
+}
+
+
+
+// Alternate buttons
+// --------------------------------------------------
+
+// Provide *some* extra contrast for those who can get it
+.btn-primary.active,
+.btn-warning.active,
+.btn-danger.active,
+.btn-success.active,
+.btn-info.active,
+.btn-inverse.active {
+ color: rgba(255,255,255,.75);
+}
+
+// Set the backgrounds
+// -------------------------
+.btn {
+ // reset here as of 2.0.3 due to Recess property order
+ border-color: #c5c5c5;
+ border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
+}
+.btn-primary {
+ @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
+}
+// Warning appears are orange
+.btn-warning {
+ @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
+}
+// Danger and error appear as red
+.btn-danger {
+ @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
+}
+// Success appears as green
+.btn-success {
+ @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
+}
+// Info appears as a neutral blue
+.btn-info {
+ @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
+}
+// Inverse appears as dark gray
+.btn-inverse {
+ @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
+}
+
+
+// Cross-browser Jank
+// --------------------------------------------------
+
+button.btn,
+input[type="submit"].btn {
+
+ // Firefox 3.6 only I believe
+ &::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+ }
+
+ // IE7 has some default padding on button controls
+ *padding-top: 3px;
+ *padding-bottom: 3px;
+
+ &.btn-large {
+ *padding-top: 7px;
+ *padding-bottom: 7px;
+ }
+ &.btn-small {
+ *padding-top: 3px;
+ *padding-bottom: 3px;
+ }
+ &.btn-mini {
+ *padding-top: 1px;
+ *padding-bottom: 1px;
+ }
+}
+
+
+// Link buttons
+// --------------------------------------------------
+
+// Make a button look and behave like a link
+.btn-link,
+.btn-link:active,
+.btn-link[disabled] {
+ background-color: transparent;
+ background-image: none;
+ @include box-shadow(none);
+}
+.btn-link {
+ border-color: transparent;
+ cursor: pointer;
+ color: $linkColor;
+ @include border-radius(0);
+}
+.btn-link:hover {
+ color: $linkColorHover;
+ text-decoration: underline;
+ background-color: transparent;
+}
+.btn-link[disabled]:hover {
+ color: $grayDark;
+ text-decoration: none;
+}
View
131 _sass/_carousel.scss
@@ -0,0 +1,131 @@
+//
+// Carousel
+// --------------------------------------------------
+
+
+.carousel {
+ position: relative;
+ margin-bottom: $baseLineHeight;
+ line-height: 1;
+}
+
+.carousel-inner {
+ overflow: hidden;
+ width: 100%;
+ position: relative;
+}
+
+.carousel-inner {
+
+ > .item {
+ display: none;
+ position: relative;
+ @include transition(.6s ease-in-out left);
+ }
+
+ // Account for jankitude on images
+ > .item > img {
+ display: block;
+ line-height: 1;
+ }
+
+ > .active,
+ > .next,
+ > .prev { display: block; }
+
+ > .active {
+ left: 0;
+ }
+
+ > .next,
+ > .prev {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+
+ > .next {
+ left: 100%;
+ }
+ > .prev {
+ left: -100%;
+ }
+ > .next.left,
+ > .prev.right {
+ left: 0;
+ }
+
+ > .active.left {
+ left: -100%;
+ }
+ > .active.right {
+ left: 100%;
+ }
+
+}
+
+// Left/right controls for nav
+// ---------------------------
+
+.carousel-control {
+ position: absolute;
+ top: 40%;
+ left: 15px;
+ width: 40px;
+ height: 40px;
+ margin-top: -20px;
+ font-size: 60px;
+ font-weight: 100;
+ line-height: 30px;
+ color: $white;
+ text-align: center;
+ background: $grayDarker;
+ border: 3px solid $white;
+ @include border-radius(23px);
+ @include opacity(50);
+
+ // we can't have this transition here
+ // because webkit cancels the carousel
+ // animation if you trip this while
+ // in the middle of another animation
+ // ;_;
+ // .transition(opacity .2s linear);
+
+ // Reposition the right one
+ &.right {
+ left: auto;
+ right: 15px;
+ }
+
+ // Hover state
+ &:hover {
+ color: $white;
+ text-decoration: none;
+ @include opacity(90);
+ }
+}
+
+
+// Caption for text below images
+// -----------------------------
+
+.carousel-caption {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 15px;
+ background: $grayDark;
+ background: rgba(0,0,0,.75);
+}
+.carousel-caption h4,
+.carousel-caption p {
+ color: $white;
+ line-height: $baseLineHeight;
+}
+.carousel-caption h4 {
+ margin: 0 0 5px;
+}
+.carousel-caption p {
+ margin-bottom: 0;
+}
View
31 _sass/_close.scss
@@ -0,0 +1,31 @@
+//
+// Close icons
+// --------------------------------------------------
+
+
+.close {
+ float: right;
+ font-size: 20px;
+ font-weight: bold;
+ line-height: $baseLineHeight;
+ color: $black;
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
+ @include opacity(20);
+ &:hover {
+ color: $black;
+ text-decoration: none;
+ cursor: pointer;
+ @include opacity(40);
+ }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+button.close {
+ padding: 0;
+ cursor: pointer;
+ background: transparent;
+ border: 0;
+ -webkit-appearance: none;
+}
View
61 _sass/_code.scss
@@ -0,0 +1,61 @@
+//
+// Code (inline and blocK)
+// --------------------------------------------------
+
+
+// Inline and block code styles
+code,
+pre {
+ padding: 0 3px 2px;
+ @include font-family-monospace;
+ font-size: $baseFontSize - 2;
+ color: $grayDark;
+ @include border-radius(3px);
+}
+
+// Inline code
+code {
+ padding: 2px 4px;
+ color: #d14;
+ background-color: #f7f7f9;
+ border: 1px solid #e1e1e8;
+ white-space: nowrap;
+}
+
+// Blocks of code
+pre {
+ display: block;
+ padding: ($baseLineHeight - 1) / 2;
+ margin: 0 0 $baseLineHeight / 2;
+ font-size: $baseFontSize - 1; // 14px to 13px
+ line-height: $baseLineHeight;
+ word-break: break-all;
+ word-wrap: break-word;
+ white-space: pre;
+ white-space: pre-wrap;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc; // fallback for IE7-8
+ border: 1px solid rgba(0,0,0,.15);
+ @include border-radius($baseBorderRadius);
+
+ // Make prettyprint styles more spaced out for readability
+ &.prettyprint {
+ margin-bottom: $baseLineHeight;
+ }
+
+ // Account for some code outputs that place code tags in pre tags
+ code {
+ padding: 0;
+ color: inherit;
+ white-space: pre;
+ white-space: pre-wrap;
+ background-color: transparent;
+ border: 0;
+ }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+ max-height: 340px;
+ overflow-y: scroll;
+}
View
22 _sass/_component-animations.scss
@@ -0,0 +1,22 @@
+//
+// Component animations
+// --------------------------------------------------
+
+
+.fade {
+ opacity: 0;
+ @include transition(opacity .15s linear);
+ &.in {
+ opacity: 1;
+ }
+}
+
+.collapse {
+ position: relative;
+ height: 0;
+ overflow: hidden;
+ @include transition(height .35s ease);
+ &.in {
+ height: auto;
+ }
+}
View
233 _sass/_dropdowns.scss
@@ -0,0 +1,233 @@
+//
+// Dropdown menus
+// --------------------------------------------------
+
+
+// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropup,
+.dropdown {
+ position: relative;
+}
+.dropdown-toggle {
+ // The caret makes the toggle a bit too tall in IE7
+ *margin-bottom: -3px;
+}
+.dropdown-toggle:active,
+.open .dropdown-toggle {
+ outline: 0;
+}
+
+// Dropdown arrow/caret
+// --------------------
+.caret {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ vertical-align: top;
+ border-top: 4px solid $black;
+ border-right: 4px solid transparent;
+ border-left: 4px solid transparent;
+ content: "";
+}
+
+// Place the caret
+.dropdown .caret {
+ margin-top: 8px;
+ margin-left: 2px;
+}
+
+// The dropdown menu (ul)
+// ----------------------
+.dropdown-menu {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: $zindexDropdown;
+ display: none; // none by default, but block on "open" of the menu
+ float: left;
+ min-width: 160px;
+ padding: 5px 0;
+ margin: 2px 0 0; // override default ul
+ list-style: none;
+ background-color: $dropdownBackground;
+ border: 1px solid #ccc; // Fallback for IE7-8
+ border: 1px solid $dropdownBorder;
+ *border-right-width: 2px;
+ *border-bottom-width: 2px;
+ @include border-radius(6px);
+ @include box-shadow(0 5px 10px rgba(0,0,0,.2));
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+
+ // Aligns the dropdown menu to right
+ &.pull-right {
+ right: 0;
+ left: auto;
+ }
+
+ // Dividers (basically an hr) within the dropdown
+ .divider {
+ @include nav-divider($dropdownDividerTop, $dropdownDividerBottom);
+ }
+
+ // Links within the dropdown menu
+ li > a {
+ display: block;
+ padding: 3px 20px;
+ clear: both;
+ font-weight: normal;
+ line-height: $baseLineHeight;
+ color: $dropdownLinkColor;
+ white-space: nowrap;
+ }
+}
+
+// Hover state
+// -----------
+.dropdown-menu li > a:hover,
+.dropdown-menu li > a:focus,
+.dropdown-submenu:hover > a {
+ text-decoration: none;
+ color: $dropdownLinkColorHover;
+ @include gradient-vertical($dropdownLinkBackgroundHover, darken($dropdownLinkBackgroundHover, 5%));
+}
+
+// Active state
+// ------------
+.dropdown-menu .active > a,
+.dropdown-menu .active > a:hover {
+ color: $dropdownLinkColorActive;
+ text-decoration: none;
+ outline: 0;
+ @include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%));
+}
+
+// Disabled state
+// --------------
+// Gray out text and ensure the hover state remains gray
+.dropdown-menu .disabled > a,
+.dropdown-menu .disabled > a:hover {
+ color: $grayLight;
+}
+// Nuke hover effects
+.dropdown-menu .disabled > a:hover {
+ text-decoration: none;
+ background-color: transparent;
+ background-image: none; // Remove CSS gradient
+ @include reset-filter();
+ cursor: default;
+}
+
+// Open state for the dropdown
+// ---------------------------
+.open {
+ // IE7's z-index only goes to the nearest positioned ancestor, which would
+ // make the menu appear below buttons that appeared later on the page
+ *z-index: $zindexDropdown;
+
+ & > .dropdown-menu {
+ display: block;
+ }
+}
+
+// Right aligned dropdowns
+// ---------------------------
+.pull-right > .dropdown-menu {
+ right: 0;
+ left: auto;
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// ------------------------------------------------------
+// Just add .dropup after the standard .dropdown class and you're set, bro.
+// TODO: abstract this so that the navbar fixed styles are not placed here?
+.dropup,
+.navbar-fixed-bottom .dropdown {
+ // Reverse the caret
+ .caret {
+ border-top: 0;
+ border-bottom: 4px solid $black;
+ content: "";
+ }
+ // Different positioning for bottom up menu
+ .dropdown-menu {
+ top: auto;
+ bottom: 100%;
+ margin-bottom: 1px;
+ }
+}
+
+// Sub menus
+// ---------------------------
+.dropdown-submenu {
+ position: relative;
+}
+// Default dropdowns
+.dropdown-submenu > .dropdown-menu {
+ top: 0;
+ left: 100%;
+ margin-top: -6px;
+ margin-left: -1px;
+ @include border-radius(0 6px 6px 6px);
+}
+.dropdown-submenu:hover > .dropdown-menu {
+ display: block;
+}
+
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+ top: auto;
+ bottom: 0;
+ margin-top: 0;
+ margin-bottom: -2px;
+ @include border-radius(5px 5px 5px 0);
+}
+
+// Caret to indicate there is a submenu
+.dropdown-submenu > a:after {
+ display: block;
+ content: " ";
+ float: right;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 5px 0 5px 5px;
+ border-left-color: darken($dropdownBackground, 20%);
+ margin-top: 5px;
+ margin-right: -10px;
+}
+.dropdown-submenu:hover > a:after {
+ border-left-color: $dropdownLinkColorHover;
+}
+
+// Left aligned submenus
+.dropdown-submenu.pull-left {
+ // Undo the float
+ // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
+ float: none;
+
+ // Positioning the submenu
+ > .dropdown-menu {
+ left: -100%;
+ margin-left: 10px;
+ @include border-radius(6px 0 6px 6px);
+ }
+}
+
+// Tweak nav headers
+// -----------------
+// Increase padding from 15px to 20px on sides
+.dropdown .dropdown-menu .nav-header {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+// Typeahead
+// ---------
+.typeahead {
+ z-index: 1051;
+ margin-top: 2px; // give it some space to breathe
+ @include border-radius($baseBorderRadius);
+}
View
686 _sass/_forms.scss
@@ -0,0 +1,686 @@
+//
+// Forms
+// --------------------------------------------------
+
+
+// GENERAL STYLES
+// --------------
+
+// Make all forms have space below them
+form {
+ margin: 0 0 $baseLineHeight;
+}
+
+fieldset {
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+// Groups of fields with labels on top (legends)
+legend {
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin-bottom: $baseLineHeight;
+ font-size: $baseFontSize * 1.5;
+ line-height: $baseLineHeight * 2;
+ color: $grayDark;
+ border: 0;
+ border-bottom: 1px solid #e5e5e5;
+
+ // Small
+ small {
+ font-size: $baseLineHeight * .75;
+ color: $grayLight;
+ }
+}
+
+// Set font for forms
+label,
+input,
+button,
+select,
+textarea {
+ @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+ font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
+}
+
+// Identify controls by their labels
+label {
+ display: block;
+ margin-bottom: 5px;
+}
+
+// Form controls
+// -------------------------
+
+// Shared size and type resets
+select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+ display: inline-block;
+ height: $baseLineHeight;
+ padding: 4px 6px;
+ margin-bottom: $baseLineHeight / 2;;
+ font-size: $baseFontSize;
+ line-height: $baseLineHeight;
+ color: $gray;
+ @include border-radius($inputBorderRadius);
+ vertical-align: middle;
+}
+
+// Reset appearance properties for textual inputs and textarea
+// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
+input,
+textarea,
+.uneditable-input {
+ width: 206px; // plus 12px padding and 2px border
+}
+// Reset height since textareas have rows
+textarea {
+ height: auto;
+}
+// Everything else
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+ background-color: $inputBackground;
+ border: 1px solid $inputBorder;
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+ @include transition(border linear .2s, box-shadow linear .2s);
+
+ // Focus state
+ &:focus {
+ border-color: rgba(82,168,236,.8);
+ outline: 0;
+ outline: thin dotted \9; /* IE6-9 */
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
+ }
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+ margin: 4px 0 0;
+ *margin-top: 0; /* IE7 */
+ margin-top: 1px \9; /* IE8-9 */
+ line-height: normal;
+}
+
+// Reset width of input images, buttons, radios, checkboxes
+input[type="file"],
+input[type="image"],
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+ width: auto; // Override of generic input selector
+}
+
+// Set the height of select and file controls to match text inputs
+select,
+input[type="file"] {
+ height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
+ *margin-top: 4px; /* For IE7, add top margin to align select with labels */
+ line-height: $inputHeight;
+}
+
+// Make select elements obey height by applying a border
+select {
+ width: 220px; // default input width + 10px of padding that doesn't get applied
+ border: 1px solid $inputBorder;
+ background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
+}
+
+// Make multiple select elements height not fixed
+select[multiple],
+select[size] {
+ height: auto;
+}
+
+// Focus for select, file, radio, and checkbox
+select:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+ @include tab-focus();
+}
+
+
+// Uneditable inputs
+// -------------------------
+
+// Make uneditable inputs look inactive
+.uneditable-input,
+.uneditable-textarea {
+ color: $grayLight;
+ background-color: darken($inputBackground, 1%);
+ border-color: $inputBorder;
+ @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+ cursor: not-allowed;
+}
+
+// For text that needs to appear as an input but should not be an input
+.uneditable-input {
+ overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
+ white-space: nowrap;
+}
+
+// Make uneditable textareas behave like a textarea
+.uneditable-textarea {
+ width: auto;
+ height: auto;
+}
+
+
+// Placeholder
+// -------------------------
+
+// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
+input,
+textarea {
+ @include placeholder();
+}
+
+
+// CHECKBOXES & RADIOS
+// -------------------
+
+// Indent the labels to position radios/checkboxes as hanging
+.radio,
+.checkbox {
+ min-height: $baseLineHeight; // clear the floating input if there is no label text
+ padding-left: 20px;
+}
+.radio input[type="radio"],
+.checkbox input[type="checkbox"] {
+ float: left;
+ margin-left: -20px;
+}
+
+// Move the options list down to align with labels
+.controls > .radio:first-child,
+.controls > .checkbox:first-child {
+ padding-top: 5px; // has to be padding because margin collaspes
+}
+
+// Radios and checkboxes on same line
+// TODO v3: Convert .inline to .control-inline
+.radio.inline,
+.checkbox.inline {
+ display: inline-block;
+ padding-top: 5px;
+ margin-bottom: 0;
+ vertical-align: middle;
+}
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
+ margin-left: 10px; // space out consecutive inline controls
+}
+
+
+
+// INPUT SIZES
+// -----------
+
+// General classes for quick sizes
+.input-mini { width: 60px; }
+.input-small { width: 90px; }
+.input-medium { width: 150px; }
+.input-large { width: 210px; }
+.input-xlarge { width: 270px; }
+.input-xxlarge { width: 530px; }
+
+// Grid style input sizes
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input[class*="span"],
+// Redeclare since the fluid row class is more specific
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"] {
+ float: none;
+ margin-left: 0;
+}
+// Ensure input-prepend/append never wraps
+.input-append input[class*="span"],
+.input-append .uneditable-input[class*="span"],
+.input-prepend input[class*="span"],
+.input-prepend .uneditable-input[class*="span"],
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"],
+.row-fluid .input-prepend [class*="span"],
+.row-fluid .input-append [class*="span"] {
+ display: inline-block;
+}
+
+
+
+// GRID SIZING FOR INPUTS
+// ----------------------
+
+// Grid sizes
+@include grid-input($gridColumnWidth, $gridGutterWidth);
+
+// Control row for multiple inputs per line
+.controls-row {
+ @include clearfix(); // Clear the float from controls
+}
+
+// Float to collapse white-space for proper grid alignment
+.controls-row [class*="span"],
+// Redeclare the fluid grid collapse since we undo the float for inputs
+.row-fluid .controls-row [class*="span"] {
+ float: left;
+}
+// Explicity set top padding on all checkboxes/radios, not just first-child
+.controls-row .checkbox[class*="span"],
+.controls-row .radio[class*="span"] {
+ padding-top: 5px;
+}
+
+
+
+
+// DISABLED STATE
+// --------------
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+ cursor: not-allowed;
+ background-color: $inputDisabledBackground;
+}
+// Explicitly reset the colors here
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+ background-color: transparent;
+}
+
+
+
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// Warning
+.control-group.warning {
+ @include formFieldState($warningText, $warningText, $warningBackground);
+}
+// Error
+.control-group.error {
+ @include formFieldState($errorText, $errorText, $errorBackground);
+}
+// Success
+.control-group.success {
+ @include formFieldState($successText, $successText, $successBackground);
+}
+// Info
+.control-group.info {
+ @include formFieldState($infoText, $infoText, $infoBackground);
+}
+
+// HTML5 invalid states
+// Shares styles with the .control-group.error above
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
+ color: #b94a48;
+ border-color: #ee5f5b;
+ &:focus {
+ border-color: darken(#ee5f5b, 10%);
+ @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
+ }
+}
+
+
+
+// FORM ACTIONS
+// ------------
+
+.form-actions {
+ padding: ($baseLineHeight - 1) 20px $baseLineHeight;
+ margin-top: $baseLineHeight;
+ margin-bottom: $baseLineHeight;
+ background-color: $formActionsBackground;
+ border-top: 1px solid #e5e5e5;
+ @include clearfix(); // Adding clearfix to allow for .pull-right button containers
+}
+
+
+
+// HELP TEXT
+// ---------
+
+.help-block,
+.help-inline {
+ color: lighten($textColor, 15%); // lighten the text some for contrast
+}
+
+.help-block {
+ display: block; // account for any element using help-block
+ margin-bottom: $baseLineHeight / 2;
+}
+
+.help-inline {
+ display: inline-block;
+ @include ie7-inline-block();
+ vertical-align: middle;
+ padding-left: 5px;
+}
+
+
+
+// INPUT GROUPS
+// ------------
+
+// Allow us to put symbols and text within the input field for a cleaner look
+.input-append,
+.input-prepend {
+ margin-bottom: 5px;
+ font-size: 0; // white space collapse hack
+ white-space: nowrap; // Prevent span and input from separating
+
+ // Reset the white space collapse hack
+ input,
+ select,
+ .uneditable-input,
+ .dropdown-menu {
+ font-size: $baseFontSize;
+ }
+
+ input,
+ select,
+ .uneditable-input {
+ position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
+ margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
+ *margin-left: 0;
+ vertical-align: top;
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+ // Make input on top when focused so blue border and shadow always show
+ &:focus {
+ z-index: 2;
+ }
+ }
+ .add-on {
+ display: inline-block;
+ width: auto;
+ height: $baseLineHeight;
+ min-width: 16px;
+ padding: 4px 5px;
+ font-size: $baseFontSize;
+ font-weight: normal;
+ line-height: $baseLineHeight;
+ text-align: center;
+ text-shadow: 0 1px 0 $white;
+ background-color: $grayLighter;
+ border: 1px solid #ccc;
+ }
+ .add-on,
+ .btn,
+ .btn-group > .dropdown-toggle {
+ vertical-align: top;
+ @include border-radius(0);
+ }
+ .active {
+ background-color: lighten($green, 30);
+ border-color: $green;
+ }
+}
+
+.input-prepend {
+ .add-on,
+ .btn {
+ margin-right: -1px;
+ }
+ .add-on:first-child,
+ .btn:first-child {
+ // FYI, `.btn:first-child` accounts for a button group that's prepended
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+ }
+}
+
+.input-append {
+ input,
+ select,
+ .uneditable-input {
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+ + .btn-group .btn:last-child {
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+ }
+ }
+ .add-on,
+ .btn,
+ .btn-group {
+ margin-left: -1px;
+ }
+ .add-on:last-child,
+ .btn:last-child,
+ .btn-group:last-child > .dropdown-toggle {
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+ }
+}
+
+// Remove all border-radius for inputs with both prepend and append
+.input-prepend.input-append {
+ input,
+ select,
+ .uneditable-input {
+ @include border-radius(0);
+ + .btn-group .btn {
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+ }
+ }
+ .add-on:first-child,
+ .btn:first-child {
+ margin-right: -1px;
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+ }
+ .add-on:last-child,
+ .btn:last-child {
+ margin-left: -1px;
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+ }
+ .btn-group:first-child {
+ margin-left: 0;
+ }
+}
+
+
+
+
+// SEARCH FORM
+// -----------
+
+input.search-query {
+ padding-right: 14px;
+ padding-right: 4px \9;
+ padding-left: 14px;
+ padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
+ margin-bottom: 0; // Remove the default margin on all inputs
+ @include border-radius(15px);
+}
+
+/* Allow for input prepend/append in search forms */
+.form-search .input-append .search-query,
+.form-search .input-prepend .search-query {
+ @include border-radius(0); // Override due to specificity
+}
+.form-search .input-append .search-query {
+ @include border-radius(14px 0 0 14px);
+}
+.form-search .input-append .btn {