Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/ratchet.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorconnors <connor.sears@github.com>2014-02-16 23:09:47 +0400
committerconnors <connor.sears@github.com>2014-02-16 23:09:47 +0400
commit4cda16e4fc2ea8278e940bd2e42416fc6c93c595 (patch)
tree366bdca69822675b188c59e71aaa5193270dffc1
parentf8fc5cda090f59b480138ad8a40300444f7976ac (diff)
reorganizing the docs
-rw-r--r--Gruntfile.js34
-rw-r--r--_config.yml7
-rw-r--r--dist/ratchet-theme.css119
-rw-r--r--docs/_includes/footer.html (renamed from _includes/footer.html)0
-rw-r--r--docs/_includes/header.html (renamed from _includes/header.html)14
-rw-r--r--docs/_includes/nav.html (renamed from _includes/nav.html)0
-rw-r--r--docs/_layouts/default.html (renamed from _layouts/default.html)0
-rw-r--r--docs/_layouts/home.html (renamed from _layouts/home.html)0
-rw-r--r--docs/assets/css/docs.css (renamed from docs-assets/css/docs.css)0
-rw-r--r--docs/assets/css/pygments.css (renamed from docs-assets/css/pygments.css)0
-rw-r--r--docs/assets/img/android.png (renamed from docs-assets/img/android.png)bin102811 -> 102811 bytes
-rw-r--r--docs/assets/img/apple-touch-icon-114x114.png (renamed from docs-assets/img/apple-touch-icon-114x114.png)bin15538 -> 15538 bytes
-rw-r--r--docs/assets/img/apple-touch-icon-57x57.png (renamed from docs-assets/img/apple-touch-icon-57x57.png)bin5276 -> 5276 bytes
-rw-r--r--docs/assets/img/apple-touch-icon-72x72.png (renamed from docs-assets/img/apple-touch-icon-72x72.png)bin7362 -> 7362 bytes
-rw-r--r--docs/assets/img/iphone5c.png (renamed from docs-assets/img/iphone5c.png)bin68816 -> 68816 bytes
-rw-r--r--docs/assets/img/iphone5s.png (renamed from docs-assets/img/iphone5s.png)bin95740 -> 95740 bytes
-rw-r--r--docs/assets/img/slide-1.jpg (renamed from docs-assets/img/slide-1.jpg)bin49507 -> 49507 bytes
-rw-r--r--docs/assets/img/slide-2.jpg (renamed from docs-assets/img/slide-2.jpg)bin48610 -> 48610 bytes
-rw-r--r--docs/assets/img/slide-3.jpg (renamed from docs-assets/img/slide-3.jpg)bin45855 -> 45855 bytes
-rw-r--r--docs/assets/js/docs.js (renamed from docs-assets/js/docs.js)0
-rw-r--r--docs/assets/js/fingerblast.js (renamed from docs-assets/js/fingerblast.js)0
-rw-r--r--docs/components.html (renamed from components.html)1
-rw-r--r--docs/dist/android-theme.css563
-rw-r--r--docs/dist/ios-theme.css464
-rw-r--r--docs/dist/ratchet.css1423
-rw-r--r--docs/dist/ratchet.js793
-rw-r--r--docs/dist/ratchicons/ratchicons.eotbin0 -> 11856 bytes
-rw-r--r--docs/dist/ratchicons/ratchicons.svg62
-rw-r--r--docs/dist/ratchicons/ratchicons.ttfbin0 -> 11680 bytes
-rw-r--r--docs/dist/ratchicons/ratchicons.woffbin0 -> 6904 bytes
-rw-r--r--docs/examples/app-android-notes/css/app.css (renamed from examples/app-android-notes/css/app.css)0
-rw-r--r--docs/examples/app-android-notes/index.html (renamed from examples/app-android-notes/index.html)0
-rw-r--r--docs/examples/app-movies/choose-theater.html (renamed from examples/app-movies/choose-theater.html)0
-rw-r--r--docs/examples/app-movies/css/app.css (renamed from examples/app-movies/css/app.css)0
-rw-r--r--docs/examples/app-movies/img/argo.png (renamed from examples/app-movies/img/argo.png)bin262758 -> 262758 bytes
-rw-r--r--docs/examples/app-movies/img/ralph.png (renamed from examples/app-movies/img/ralph.png)bin50442 -> 50442 bytes
-rw-r--r--docs/examples/app-movies/img/skyfall.png (renamed from examples/app-movies/img/skyfall.png)bin30885 -> 30885 bytes
-rw-r--r--docs/examples/app-movies/index.html (renamed from examples/app-movies/index.html)0
-rw-r--r--docs/getting-started.html (renamed from getting-started.html)3
-rw-r--r--docs/index.html (renamed from index.html)1
-rw-r--r--docs/one.html (renamed from one.html)0
-rw-r--r--docs/two.html (renamed from two.html)0
-rw-r--r--js/modals.js (renamed from lib/js/modals.js)0
-rw-r--r--js/popovers.js (renamed from lib/js/popovers.js)0
-rw-r--r--js/push.js (renamed from lib/js/push.js)0
-rw-r--r--js/segmented-controllers.js (renamed from lib/js/segmented-controllers.js)0
-rw-r--r--js/sliders.js (renamed from lib/js/sliders.js)0
-rw-r--r--js/toggles.js (renamed from lib/js/toggles.js)0
-rw-r--r--sass/badges.scss (renamed from lib/sass/badges.scss)0
-rw-r--r--sass/bars.scss (renamed from lib/sass/bars.scss)0
-rw-r--r--sass/base.scss (renamed from lib/sass/base.scss)0
-rw-r--r--sass/buttons.scss (renamed from lib/sass/buttons.scss)0
-rw-r--r--sass/cards.scss (renamed from lib/sass/cards.scss)0
-rw-r--r--sass/docs.scss (renamed from lib/sass/docs.scss)0
-rw-r--r--sass/forms.scss (renamed from lib/sass/forms.scss)0
-rw-r--r--sass/mixins.scss (renamed from lib/sass/mixins.scss)0
-rw-r--r--sass/modals.scss (renamed from lib/sass/modals.scss)0
-rw-r--r--sass/normalize.scss (renamed from lib/sass/normalize.scss)0
-rw-r--r--sass/popovers.scss (renamed from lib/sass/popovers.scss)0
-rw-r--r--sass/push.scss (renamed from lib/sass/push.scss)0
-rw-r--r--sass/ratchet.scss (renamed from lib/sass/ratchet.scss)0
-rw-r--r--sass/ratchicons.scss (renamed from lib/sass/ratchicons.scss)0
-rw-r--r--sass/segmented-controls.scss (renamed from lib/sass/segmented-controls.scss)0
-rw-r--r--sass/sliders.scss (renamed from lib/sass/sliders.scss)0
-rw-r--r--sass/table-views.scss (renamed from lib/sass/table-views.scss)0
-rw-r--r--sass/theme-android.scss (renamed from lib/sass/theme-android.scss)0
-rw-r--r--sass/theme-ios.scss (renamed from lib/sass/theme-ios.scss)0
-rw-r--r--sass/toggles.scss (renamed from lib/sass/toggles.scss)0
-rw-r--r--sass/type.scss (renamed from lib/sass/type.scss)0
-rw-r--r--sass/variables.scss (renamed from lib/sass/variables.scss)0
70 files changed, 3339 insertions, 145 deletions
diff --git a/Gruntfile.js b/Gruntfile.js
index e98073f..8bee274 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -6,9 +6,9 @@ module.exports = function(grunt) {
// Metadata.
meta: {
- srcPath: 'lib/',
- distPath: 'dist/',
- docsPath: 'docs-assets/'
+ distPath: 'dist/',
+ docsPath: 'docs/dist/',
+ docsAssetsPath: 'docs/assets/'
},
banner: '/*\n' +
@@ -27,15 +27,20 @@ module.exports = function(grunt) {
},
ratchet: {
src: [
- '<%= meta.srcPath %>js/modals.js',
- '<%= meta.srcPath %>js/popovers.js',
- '<%= meta.srcPath %>js/push.js',
- '<%= meta.srcPath %>js/segmented-controllers.js',
- '<%= meta.srcPath %>js/sliders.js',
- '<%= meta.srcPath %>js/toggles.js'
+ 'js/modals.js',
+ 'js/popovers.js',
+ 'js/push.js',
+ 'js/segmented-controllers.js',
+ 'js/sliders.js',
+ 'js/toggles.js'
],
dest: '<%= meta.distPath %><%= pkg.name %>.js'
+ },
+ docs: {
+ src: '<%= meta.distPath %><%= pkg.name %>.js',
+ dest: '<%= meta.docsPath %><%= pkg.name %>.js'
}
+
},
sass: {
@@ -45,10 +50,13 @@ module.exports = function(grunt) {
},
dist: {
files: {
- '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss',
- '<%= meta.docsPath %>/css/docs.css': '<%= meta.srcPath %>sass/docs.scss',
- '<%= meta.distPath %>ios-theme.css': '<%= meta.srcPath %>sass/theme-ios.scss',
- '<%= meta.distPath %>android-theme.css': '<%= meta.srcPath %>sass/theme-android.scss'
+ '<%= meta.distPath %><%= pkg.name %>.css': 'sass/ratchet.scss',
+ '<%= meta.distPath %>ios-theme.css': 'sass/theme-ios.scss',
+ '<%= meta.distPath %>android-theme.css': 'sass/theme-android.scss',
+ '<%= meta.docsAssetsPath %>css/docs.css': 'sass/docs.scss',
+ '<%= meta.docsPath %><%= pkg.name %>.css': 'sass/ratchet.scss',
+ '<%= meta.docsPath %>ios-theme.css': 'sass/theme-ios.scss',
+ '<%= meta.docsPath %>android-theme.css': 'sass/theme-android.scss'
}
}
},
diff --git a/_config.yml b/_config.yml
index 9c1be2f..5530065 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,7 +1,12 @@
name: Ratchet
authors: Connor Sears, Dave Gamache, and Jacob Thornton
description: Prototype iPhone apps with simple HTML, CSS, and JS components.
-url: http://maker.github.io/ratchet
pygments: true
permalink: pretty
+
+# Server
+source: ./docs
+port: 4000
+baseurl: /
+url: http://localhost:4000
diff --git a/dist/ratchet-theme.css b/dist/ratchet-theme.css
deleted file mode 100644
index 0944fed..0000000
--- a/dist/ratchet-theme.css
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
- * =====================================================
- * Ratchet v2.0.0
- * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
- * Licensed under http://www.opensource.org/licenses/MIT
- *
- * Designed and built by @connors, @dhg, and @fat.
- * =====================================================
- */
-
-.bar-header-secondary ~ .content {
- padding-top: 108px;
-}
-
-.bar {
- background-color: rgba(30, 176, 233, 0.98);
-}
-.bar.bar-standard, .bar.bar-footer-secondary {
- background-color: rgba(245, 245, 245, 0.98);
-}
-
-.bar-nav {
- top: 20px;
- -webkit-box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
- box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
-}
-
-.bar.bar-header-secondary {
- top: 64px;
-}
-
-.title {
- color: #fff;
-}
-
-.tab-label {
- color: rgba(255, 255, 255, 0.5);
-}
-
-.tab-item.active .tab-label {
- color: white;
-}
-
-.btn {
- color: rgba(0, 0, 0, 0.3);
- border-color: rgba(0, 0, 0, 0.3);
-}
-.btn:active, .btn.active, .btn.btn-filled {
- background-color: rgba(0, 0, 0, 0.3);
-}
-
-.btn-primary {
- color: #1eb0e9;
- border-color: #1eb0e9;
-}
-.btn-primary:active, .btn-primary.active, .btn-primary.btn-filled {
- background-color: #1eb0e9;
-}
-
-.btn-positive {
- color: #34ba15;
- border-color: #34ba15;
-}
-.btn-positive:active, .btn-positive.active, .btn-positive.btn-filled {
- background-color: #34ba15;
-}
-
-.btn-negative {
- color: #e71e1e;
- border-color: #e71e1e;
-}
-.btn-negative:active, .btn-negative.active, .btn-negative.btn-filled {
- background-color: #e71e1e;
-}
-
-.bar-title .btn {
- color: #fff;
-}
-.bar-title .btn:active,
-.bar-title .btn.active,
-.bar-title .btn-prev:active,
-.bar-title .btn-prev.active,
-.bar-title .btn-next:active,
-.bar-title .btn-next.active,
-.bar-title .btn-primary:active,
-.bar-title .btn-primary.active {
- color: #fff;
-}
-
-.segmented-control {
- border-color: #1eb0e9;
-}
-.segmented-control li {
- border-left-color: #1eb0e9;
-}
-.segmented-control li > a {
- color: #1eb0e9;
-}
-.segmented-control li.active {
- background-color: #1eb0e9;
-}
-
-.bar-title .segmented-control {
- border-color: #fff;
-}
-.bar-title .segmented-control li {
- border-left-color: #fff;
-}
-.bar-title .segmented-control li > a {
- color: #fff;
-}
-.bar-title .segmented-control li.active {
- background-color: rgba(255, 255, 255, 0.4);
-}
-
-input[type=search] {
- color: #555;
- background-color: rgba(0, 0, 0, 0.1);
-}
diff --git a/_includes/footer.html b/docs/_includes/footer.html
index e652743..e652743 100644
--- a/_includes/footer.html
+++ b/docs/_includes/footer.html
diff --git a/_includes/header.html b/docs/_includes/header.html
index 88a210c..c197321 100644
--- a/_includes/header.html
+++ b/docs/_includes/header.html
@@ -7,19 +7,17 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-<link rel="stylesheet" href="{{ page.base_url }}dist/ratchet.css">
-<link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/docs.css">
-<link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/pygments.css">
+<link rel="stylesheet" href="../dist/ratchet.css">
+<link rel="stylesheet" href="../assets/css/docs.css">
+<link rel="stylesheet" href="../assets/css/pygments.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ page.base_url }}docs-assets/img/apple-touch-icon-114x114.png">
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ page.base_url }}docs-assets/img/apple-touch-icon-72x72.png">
-<link rel="apple-touch-icon-precomposed" sizes="57x57" href="{{ page.base_url }}docs-assets/img/apple-touch-icon-57x57.png">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
-<script src="{{ page.base_url }}dist/ratchet.js"></script>
-<script src="{{ page.base_url }}docs-assets/js/docs.js"></script>
-<script src="{{ page.base_url }}docs-assets/js/fingerblast.js"></script>
+<script src="../dist/ratchet.js"></script>
+<script src="../assets/js/docs.js"></script>
+<script src="../assets/js/fingerblast.js"></script>
<!-- Typekit -->
<script type="text/javascript" src="//use.typekit.net/asj6ttm.js"></script>
diff --git a/_includes/nav.html b/docs/_includes/nav.html
index 695b4ab..695b4ab 100644
--- a/_includes/nav.html
+++ b/docs/_includes/nav.html
diff --git a/_layouts/default.html b/docs/_layouts/default.html
index fa4e0fa..fa4e0fa 100644
--- a/_layouts/default.html
+++ b/docs/_layouts/default.html
diff --git a/_layouts/home.html b/docs/_layouts/home.html
index a4e6b5c..a4e6b5c 100644
--- a/_layouts/home.html
+++ b/docs/_layouts/home.html
diff --git a/docs-assets/css/docs.css b/docs/assets/css/docs.css
index c330d5a..c330d5a 100644
--- a/docs-assets/css/docs.css
+++ b/docs/assets/css/docs.css
diff --git a/docs-assets/css/pygments.css b/docs/assets/css/pygments.css
index 67fe210..67fe210 100644
--- a/docs-assets/css/pygments.css
+++ b/docs/assets/css/pygments.css
diff --git a/docs-assets/img/android.png b/docs/assets/img/android.png
index ebe34b7..ebe34b7 100644
--- a/docs-assets/img/android.png
+++ b/docs/assets/img/android.png
Binary files differ
diff --git a/docs-assets/img/apple-touch-icon-114x114.png b/docs/assets/img/apple-touch-icon-114x114.png
index de14661..de14661 100644
--- a/docs-assets/img/apple-touch-icon-114x114.png
+++ b/docs/assets/img/apple-touch-icon-114x114.png
Binary files differ
diff --git a/docs-assets/img/apple-touch-icon-57x57.png b/docs/assets/img/apple-touch-icon-57x57.png
index 5396942..5396942 100644
--- a/docs-assets/img/apple-touch-icon-57x57.png
+++ b/docs/assets/img/apple-touch-icon-57x57.png
Binary files differ
diff --git a/docs-assets/img/apple-touch-icon-72x72.png b/docs/assets/img/apple-touch-icon-72x72.png
index a214d69..a214d69 100644
--- a/docs-assets/img/apple-touch-icon-72x72.png
+++ b/docs/assets/img/apple-touch-icon-72x72.png
Binary files differ
diff --git a/docs-assets/img/iphone5c.png b/docs/assets/img/iphone5c.png
index 36d24d6..36d24d6 100644
--- a/docs-assets/img/iphone5c.png
+++ b/docs/assets/img/iphone5c.png
Binary files differ
diff --git a/docs-assets/img/iphone5s.png b/docs/assets/img/iphone5s.png
index d6cfc09..d6cfc09 100644
--- a/docs-assets/img/iphone5s.png
+++ b/docs/assets/img/iphone5s.png
Binary files differ
diff --git a/docs-assets/img/slide-1.jpg b/docs/assets/img/slide-1.jpg
index 23c671a..23c671a 100644
--- a/docs-assets/img/slide-1.jpg
+++ b/docs/assets/img/slide-1.jpg
Binary files differ
diff --git a/docs-assets/img/slide-2.jpg b/docs/assets/img/slide-2.jpg
index 6b5e15e..6b5e15e 100644
--- a/docs-assets/img/slide-2.jpg
+++ b/docs/assets/img/slide-2.jpg
Binary files differ
diff --git a/docs-assets/img/slide-3.jpg b/docs/assets/img/slide-3.jpg
index 2664eac..2664eac 100644
--- a/docs-assets/img/slide-3.jpg
+++ b/docs/assets/img/slide-3.jpg
Binary files differ
diff --git a/docs-assets/js/docs.js b/docs/assets/js/docs.js
index b2f6fbe..b2f6fbe 100644
--- a/docs-assets/js/docs.js
+++ b/docs/assets/js/docs.js
diff --git a/docs-assets/js/fingerblast.js b/docs/assets/js/fingerblast.js
index 58543c2..58543c2 100644
--- a/docs-assets/js/fingerblast.js
+++ b/docs/assets/js/fingerblast.js
diff --git a/components.html b/docs/components.html
index 12fb7d7..aa5e98a 100644
--- a/components.html
+++ b/docs/components.html
@@ -1,7 +1,6 @@
---
layout: default
title: Components &middot; Ratchet
-base_url: "../"
---
<div class="docs-header">
diff --git a/docs/dist/android-theme.css b/docs/dist/android-theme.css
new file mode 100644
index 0000000..7a43669
--- /dev/null
+++ b/docs/dist/android-theme.css
@@ -0,0 +1,563 @@
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+
+body {
+ font-family: "Roboto", sans-serif;
+ font-size: 18px;
+ line-height: 22px;
+ color: #222222;
+}
+
+a {
+ color: #33b5e5;
+}
+a:active {
+ color: #1a9bcb;
+}
+
+.content {
+ background-color: #f2f2f2;
+}
+
+.bar-nav ~ .content {
+ padding-top: 50px;
+}
+
+.bar-tab ~ .content {
+ padding-bottom: 50px;
+}
+
+.bar-header-secondary ~ .content {
+ padding-top: 100px;
+}
+
+.btn {
+ padding: 8px 15px;
+ font-size: 14px;
+ color: #222222;
+ background-color: #cecece;
+ border: 0;
+ border-radius: 2px;
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+.btn:active, .btn.active {
+ color: #222222;
+ border: 0;
+ background-color: #999999;
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.btn-primary {
+ color: #fff;
+ border: 0;
+ background-color: #33b5e5;
+}
+.btn-primary:active, .btn-primary.active {
+ color: #fff;
+ border: 0;
+ background-color: #1a9bcb;
+}
+
+.btn-positive {
+ color: #fff;
+ border: 0;
+ background-color: #99cc00;
+}
+.btn-positive:active, .btn-positive.active {
+ color: #fff;
+ border: 0;
+ background-color: #739900;
+}
+
+.btn-negative {
+ color: #fff;
+ border: 0;
+ background-color: #ff4444;
+}
+.btn-negative:active, .btn-negative.active {
+ color: #fff;
+ border: 0;
+ background-color: #ff1111;
+}
+
+.btn-outlined {
+ border: 1px solid #999999;
+ background-color: transparent;
+ box-shadow: none;
+}
+.btn-outlined.btn-primary {
+ border: 1px solid #33b5e5;
+ color: #33b5e5;
+}
+.btn-outlined.btn-primary:active {
+ border: 1px solid #33b5e5;
+ background-color: #33b5e5;
+}
+.btn-outlined.btn-positive {
+ border: 1px solid #99cc00;
+ color: #99cc00;
+}
+.btn-outlined.btn-positive:active {
+ border: 1px solid #99cc00;
+ background-color: #99cc00;
+}
+.btn-outlined.btn-negative {
+ border: 1px solid #ff4444;
+ color: #ff4444;
+}
+.btn-outlined.btn-negative:active {
+ border: 1px solid #ff4444;
+ background-color: #ff4444;
+}
+.btn-outlined:active {
+ border: 1px solid #999999;
+ background-color: #999999;
+ box-shadow: none;
+}
+.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
+ color: #fff;
+ box-shadow: none;
+}
+
+.btn-link {
+ color: #33b5e5;
+ background-color: transparent;
+ border: none;
+ box-shadow: none;
+}
+.btn-link:active, .btn-link.active {
+ color: #1a9bcb;
+ background-color: transparent;
+ box-shadow: none;
+}
+
+.btn-block {
+ padding: 15px 0;
+ font-size: 18px;
+}
+
+.btn .badge {
+ background-color: rgba(0, 0, 0, 0.15);
+}
+.btn .badge.badge-inverted {
+ background-color: transparent;
+}
+.btn:active .badge {
+ color: #fff;
+}
+
+.bar {
+ height: 50px;
+ background-color: #dddddd;
+ border-bottom: 1px solid #b1b1b1;
+ box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
+}
+.bar.bar-header-secondary {
+ top: 50px;
+}
+.bar.bar-footer-secondary {
+ bottom: 50px;
+}
+.bar.bar-footer-secondary-tab {
+ bottom: 50px;
+}
+
+.bar-tab {
+ top: 0;
+ bottom: auto;
+ height: 50px;
+ border-top: 0;
+}
+.bar-tab .tab-item.active {
+ color: #33b5e5;
+ border-bottom: 2px solid #33b5e5;
+}
+.bar-tab .tab-item:active {
+ color: #929292;
+ background-color: #78c6e3;
+}
+.bar-tab .tab-item .icon {
+ top: 3px;
+ padding: 0;
+}
+
+.title {
+ position: static;
+ padding-left: 15px;
+ font-size: 18px;
+ line-height: 49px;
+ text-align: left;
+}
+
+.bar .btn {
+ padding-top: 9px;
+ padding-bottom: 9px;
+}
+.bar .btn-link {
+ padding-top: 0;
+ padding-bottom: 0;
+ color: #33b5e5;
+ font-size: 18px;
+ line-height: 49px;
+}
+.bar .btn-link:active, .bar .btn-link.active {
+ color: #1a9bcb;
+}
+.bar .btn-link.pull-left {
+ padding-left: 12px;
+ padding-right: 0;
+}
+.bar .btn-link.pull-right {
+ padding-left: 0;
+ padding-right: 12px;
+}
+
+.bar-nav .btn {
+ margin-top: 7px;
+}
+.bar-nav .btn-link {
+ margin-top: 0;
+ color: #33b5e5;
+}
+.bar-nav .btn-link:active {
+ color: #33b5e5;
+ opacity: .6;
+}
+.bar-nav .btn-link .icon {
+ top: 2px;
+ padding: 0;
+}
+
+.bar .segmented-control {
+ top: 7px;
+}
+
+.bar .icon {
+ padding-top: 13px;
+ padding-bottom: 13px;
+}
+.bar .title .icon {
+ padding: 0;
+}
+.bar .title .icon.icon-caret {
+ top: 10px;
+ color: #777;
+}
+
+.bar input[type="search"] {
+ height: 35px;
+}
+
+.badge.badge-inverted {
+ color: #999999;
+ background-color: transparent;
+}
+
+.badge-primary {
+ color: #fff;
+ background-color: #33b5e5;
+}
+.badge-primary.badge-inverted {
+ color: #33b5e5;
+ background-color: transparent;
+}
+
+.badge-positive {
+ color: #fff;
+ background-color: #99cc00;
+}
+.badge-positive.badge-inverted {
+ color: #99cc00;
+ background-color: transparent;
+}
+
+.badge-negative {
+ color: #fff;
+ background-color: #ff4444;
+}
+.badge-negative.badge-inverted {
+ color: #ff4444;
+ background-color: transparent;
+}
+
+.card {
+ border-color: #d9d9d9;
+ border-radius: 2px;
+ background-color: transparent;
+}
+
+.table-view {
+ background-color: transparent;
+}
+.table-view .table-view-cell {
+ border-bottom: 1px solid #d9d9d9;
+}
+.table-view .table-view-cell:last-child {
+ background-image: none;
+}
+.table-view .table-view-cell > a:not(.btn):active {
+ background-color: #e0e0e0;
+}
+.table-view .table-view-cell > a:not(.btn):active .icon {
+ color: #fff;
+}
+.table-view .table-view-divider {
+ padding-top: 25px;
+ font-size: 12px;
+ font-weight: bold;
+ text-transform: uppercase;
+ border-top: 0;
+ border-bottom: 2px solid #a9a9a9;
+ background-color: transparent;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type="search"],
+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="tel"],
+input[type="color"],
+.input-group {
+ height: 40px;
+ padding: 10px 15px;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+input[type="search"] {
+ border-radius: 2px;
+}
+
+select,
+textarea,
+.input-group {
+ height: auto;
+}
+
+.input-group {
+ padding: 0;
+ border: 0;
+}
+
+.input-group input {
+ border: 0;
+ border-bottom: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+
+.input-group input:last-child {
+ background-image: none;
+}
+
+.input-row {
+ border-bottom: 1px solid #d9d9d9;
+}
+
+.input-row label + input {
+ background-image: none;
+ border-bottom: 0;
+}
+
+.segmented-control {
+ font-size: 14px;
+ background-color: #cecece;
+ border: 0;
+ border-radius: 2px;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+.segmented-control .control-item {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ color: #222222;
+ border-left: 1px solid #999;
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+.segmented-control .control-item:first-child {
+ border-left-width: 0;
+}
+.segmented-control .control-item:active, .segmented-control .control-item.active {
+ background-color: #999999;
+}
+
+.segmented-control-primary {
+ border: 0;
+}
+.segmented-control-primary .control-item {
+ color: #fff;
+ border-color: inherit;
+}
+.segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active {
+ color: #fff;
+ background-color: #33b5e5;
+}
+
+.segmented-control-positive {
+ border: 0;
+}
+.segmented-control-positive .control-item {
+ color: #fff;
+ border-color: inherit;
+}
+.segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
+ color: #fff;
+ background-color: #99cc00;
+}
+
+.segmented-control-negative {
+ border: 0;
+}
+.segmented-control-negative .control-item {
+ color: #fff;
+ border-color: inherit;
+}
+.segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
+ color: #fff;
+ background-color: #ff4444;
+}
+
+.popover {
+ top: 47px;
+ left: 15px;
+ width: 200px;
+ margin-left: 0;
+ border: 1px solid #9b9b9b;
+ border-radius: 0;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+ -webkit-transform: scale(0.75);
+ -ms-transform: scale(0.75);
+ transform: scale(0.75);
+ -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+.popover:before {
+ display: none;
+}
+.popover.visible {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+}
+
+.popover .bar {
+ border-radius: 0;
+}
+.popover .bar-nav ~ .table-view {
+ padding-top: 50px;
+}
+
+.popover .table-view {
+ border-radius: 12px;
+}
+
+.toggle {
+ width: 104px;
+ height: 28px;
+ border: 2px solid #d7d7d7;
+ border-radius: 0;
+ background-color: #d7d7d7;
+}
+.toggle .toggle-handle {
+ top: 0;
+ left: 0;
+ width: 50px;
+ height: 24px;
+ border: 1px solid #b5b5b5;
+ border-radius: 2px;
+ background-color: #bebebe;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+.toggle:before {
+ top: 1px;
+ right: auto;
+ left: 11px;
+ z-index: 3;
+ color: #fff;
+}
+.toggle.active {
+ border: 2px solid #d7d7d7;
+ background-color: #d7d7d7;
+}
+.toggle.active .toggle-handle {
+ margin-right: 2px;
+ background-color: #33b5e5;
+ border-color: #33b5e5;
+ -webkit-transform: translate3d(50px, 0, 0);
+ -ms-transform: translate3d(50px, 0, 0);
+ transform: translate3d(50px, 0, 0);
+}
+.toggle.active:before {
+ left: auto;
+ right: 14px;
+ color: #fff;
+ content: "On";
+}
+
+.push-left:after {
+ content: '\e803';
+}
+
+.push-right:after {
+ content: '\e806';
+}
+
+.icon-caret:before {
+ content: '\e800';
+}
+
+.icon-down:before,
+.icon-down-nav:before {
+ content: '\e801';
+}
+
+.icon-download:before {
+ content: '\e802';
+}
+
+.icon-left:before,
+.icon-left-nav:before {
+ content: '\e803';
+}
+
+.icon-more-vertical:before {
+ content: '\e804';
+}
+
+.icon-more:before {
+ content: '\e805';
+}
+
+.icon-right:before,
+.icon-right-nav:before {
+ content: '\e806';
+}
+
+.icon-search:before {
+ content: '\e807';
+}
+
+.icon-share:before {
+ content: '\e808';
+}
+
+.icon-up:before,
+.icon-up-nav:before {
+ content: '\e809';
+}
diff --git a/docs/dist/ios-theme.css b/docs/dist/ios-theme.css
new file mode 100644
index 0000000..c21ec25
--- /dev/null
+++ b/docs/dist/ios-theme.css
@@ -0,0 +1,464 @@
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+
+a {
+ color: #007aff;
+}
+a:active {
+ color: #0062cc;
+}
+
+.content {
+ background-color: #efeff4;
+}
+
+.h5, h5,
+.h6, h6,
+p {
+ color: #8f8f94;
+}
+
+.h5, h5,
+.h6, h6 {
+ font-weight: normal;
+ text-transform: uppercase;
+}
+
+.btn {
+ border: 1px solid #929292;
+ color: #929292;
+ background-color: rgba(247, 247, 247, 0.98);
+ -webkit-transition: all;
+ -moz-transition: all;
+ transition: all;
+ -webkit-transition-duration: 0.2s;
+ -moz-transition-duration: 0.2s;
+ transition-duration: 0.2s;
+ -webkit-transition-timing-function: linear;
+ -moz-transition-timing-function: linear;
+ transition-timing-function: linear;
+}
+.btn:active, .btn.active {
+ color: #fff;
+ background-color: #929292;
+}
+
+.btn-primary {
+ color: #fff;
+ border: 1px solid #007aff;
+ background-color: #007aff;
+}
+.btn-primary:active, .btn-primary.active {
+ border: 1px solid #0062cc;
+ background-color: #0062cc;
+}
+
+.btn-positive {
+ color: #fff;
+ border: 1px solid #4cd964;
+ background-color: #4cd964;
+}
+.btn-positive:active, .btn-positive.active {
+ border: 1px solid #2ac845;
+ background-color: #2ac845;
+}
+
+.btn-negative {
+ color: #fff;
+ border: 1px solid #dd524d;
+ background-color: #dd524d;
+}
+.btn-negative:active, .btn-negative.active {
+ border: 1px solid #cf2d28;
+ background-color: #cf2d28;
+}
+
+.btn-outlined {
+ background-color: transparent;
+}
+.btn-outlined.btn-primary {
+ color: #007aff;
+}
+.btn-outlined.btn-positive {
+ color: #4cd964;
+}
+.btn-outlined.btn-negative {
+ color: #dd524d;
+}
+.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
+ color: #fff;
+}
+
+.btn-link {
+ color: #007aff;
+ background-color: transparent;
+ border: none;
+}
+.btn-link:active, .btn-link.active {
+ color: #0062cc;
+ background-color: transparent;
+}
+
+.btn .badge {
+ background-color: rgba(0, 0, 0, 0.15);
+}
+.btn .badge.badge-inverted {
+ background-color: transparent;
+}
+.btn:active .badge {
+ color: #fff;
+}
+
+.bar {
+ border-bottom: 0;
+ background-color: rgba(247, 247, 247, 0.98);
+ -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
+}
+.bar.bar-header-secondary {
+ top: 44px;
+}
+.bar.bar-footer-secondary {
+ bottom: 44px;
+}
+.bar.bar-footer-secondary-tab {
+ bottom: 50px;
+}
+
+.bar-tab {
+ border-top: 0;
+ -webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
+ box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
+}
+
+.tab-item.active, .tab-item:active {
+ color: #007aff;
+}
+
+.bar-nav .btn-link {
+ color: #007aff;
+}
+.bar-nav .btn-link:active {
+ color: #007aff;
+ opacity: .6;
+}
+
+.badge.badge-inverted {
+ color: #929292;
+ background-color: transparent;
+}
+
+.badge-primary {
+ color: #fff;
+ background-color: #007aff;
+}
+.badge-primary.badge-inverted {
+ color: #007aff;
+ background-color: transparent;
+}
+
+.badge-positive {
+ color: #fff;
+ background-color: #4cd964;
+}
+.badge-positive.badge-inverted {
+ color: #4cd964;
+ background-color: transparent;
+}
+
+.badge-negative {
+ color: #fff;
+ background-color: #dd524d;
+}
+.badge-negative.badge-inverted {
+ color: #dd524d;
+ background-color: transparent;
+}
+
+.card .table-view {
+ background-image: none;
+}
+
+.card .table-view-cell:last-child {
+ background-image: none;
+}
+
+.table-view {
+ border-top: 0;
+ border-bottom: 0;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+ background-position: 0 100%, 0 0%;
+ background-repeat: no-repeat;
+}
+.table-view .table-view-cell {
+ border-bottom: 0;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+ background-position: 15px 100%;
+ background-repeat: no-repeat;
+}
+.table-view .table-view-cell:last-child {
+ background-image: none;
+}
+.table-view .table-view-divider {
+ border-top: 0;
+ border-bottom: 0;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+ background-position: 0 100%, 0 0%;
+ background-repeat: no-repeat;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type="search"],
+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="tel"],
+input[type="color"],
+.input-group {
+ height: 40px;
+ padding: 10px 15px;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+input[type="search"] {
+ height: 34px;
+ text-align: center;
+ background-color: rgba(0, 0, 0, 0.1);
+ border: 0;
+ border-radius: 6px;
+}
+
+input[type="search"]:focus {
+ text-align: left;
+}
+
+select,
+textarea,
+.input-group {
+ height: auto;
+}
+
+.input-group {
+ padding: 0;
+ border: 0;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+ background-position: 0 100%, 0 0%;
+ background-repeat: no-repeat;
+}
+
+.input-group input {
+ border: 0;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+ background-position: 15px 100%;
+ background-repeat: no-repeat;
+}
+
+.input-group input:last-child {
+ background-image: none;
+}
+
+.input-row {
+ border-bottom: 0;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+ background-position: 15px 100%;
+ background-repeat: no-repeat;
+}
+
+.input-row:last-child,
+.input-row label + input {
+ background-image: none;
+}
+
+.segmented-control {
+ background-color: transparent;
+ border: 1px solid #929292;
+}
+.segmented-control .control-item {
+ color: #929292;
+ border-color: #929292;
+ -webkit-transition: background-color 0.1s linear;
+ -moz-transition: background-color 0.1s linear;
+ transition: background-color 0.1s linear;
+}
+.segmented-control .control-item:active {
+ background-color: #ebebeb;
+}
+.segmented-control .control-item.active {
+ color: #fff;
+ background-color: #929292;
+}
+
+.segmented-control-primary {
+ border: 1px solid #007aff;
+}
+.segmented-control-primary .control-item {
+ color: #007aff;
+ border-color: inherit;
+}
+.segmented-control-primary .control-item:active {
+ background-color: #b3d7ff;
+}
+.segmented-control-primary .control-item.active {
+ color: #fff;
+ background-color: #007aff;
+}
+
+.segmented-control-positive {
+ border: 1px solid #4cd964;
+}
+.segmented-control-positive .control-item {
+ color: #4cd964;
+ border-color: inherit;
+}
+.segmented-control-positive .control-item:active {
+ background-color: #dff8e3;
+}
+.segmented-control-positive .control-item.active {
+ color: #fff;
+ background-color: #4cd964;
+}
+
+.segmented-control-negative {
+ border: 1px solid #dd524d;
+}
+.segmented-control-negative .control-item {
+ color: #dd524d;
+ border-color: inherit;
+}
+.segmented-control-negative .control-item:active {
+ background-color: #fae4e3;
+}
+.segmented-control-negative .control-item.active {
+ color: #fff;
+ background-color: #dd524d;
+}
+
+.popover {
+ border-radius: 12px;
+ -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+.popover:before {
+ border-bottom: 15px solid rgba(247, 247, 247, 0.98);
+}
+
+.popover .bar {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.popover .bar-nav {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.popover .table-view {
+ border-radius: 12px;
+ background-image: none;
+}
+
+.modal {
+ -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+ -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+ transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+}
+.modal.active {
+ -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+ -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+ transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+}
+
+.toggle {
+ width: 47px;
+ border: 2px solid #e6e6e6;
+ -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
+ box-shadow: inset 0 0 0 0 #e1e1e1;
+ -webkit-transition-property: box-shadow, border;
+ -moz-transition-property: box-shadow, border;
+ transition-property: box-shadow, border;
+ -webkit-transition-duration: 0.2s;
+ -moz-transition-duration: 0.2s;
+ transition-duration: 0.2s;
+}
+.toggle .toggle-handle {
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
+ box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
+ -webkit-transition-property: -webkit-transform, border, width;
+ -moz-transition-property: -webkit-transform, border, width;
+ transition-property: -webkit-transform, border, width;
+}
+.toggle:before {
+ display: none;
+}
+.toggle.active {
+ border: 2px solid #4cd964;
+ background-color: transparent;
+ -webkit-box-shadow: inset 0 0 0 13px #4cd964;
+ box-shadow: inset 0 0 0 13px #4cd964;
+}
+.toggle.active .toggle-handle {
+ -webkit-transform: translate3d(17px, 0, 0);
+ -ms-transform: translate3d(17px, 0, 0);
+ transform: translate3d(17px, 0, 0);
+}
+.toggle.active .toggle-handle {
+ border-color: #4cd964;
+}
+
+.content.fade {
+ -webkit-transition: opacity 0.2s ease-in-out;
+ -moz-transition: opacity 0.2s ease-in-out;
+ transition: opacity 0.2s ease-in-out;
+}
+.content.slide {
+ -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+ -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+ transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+}
+.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) {
+ -webkit-animation-name: fadeOverlay;
+ -moz-animation-name: fadeOverlay;
+ animation-name: fadeOverlay;
+ -webkit-animation-duration: 0.4s;
+ -moz-animation-duration: 0.4s;
+ animation-duration: 0.4s;
+}
+.content.slide.right:not([class*="sliding-in"]) {
+ -webkit-animation-direction: reverse;
+ -moz-animation-direction: reverse;
+ animation-direction: reverse;
+}
+.content.slide.left {
+ -webkit-transform: translate3d(-20%, 0, 0);
+ -ms-transform: translate3d(-20%, 0, 0);
+ transform: translate3d(-20%, 0, 0);
+}
+
+@-webkit-keyframes fadeOverlay {
+ from {
+ -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
+ }
+
+ to {
+ -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
+ }
+}
diff --git a/docs/dist/ratchet.css b/docs/dist/ratchet.css
new file mode 100644
index 0000000..2f1df19
--- /dev/null
+++ b/docs/dist/ratchet.css
@@ -0,0 +1,1423 @@
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+
+/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
+html {
+ font-family: sans-serif;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+}
+
+body {
+ margin: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+ display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+ vertical-align: baseline;
+}
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+[hidden],
+template {
+ display: none;
+}
+
+a {
+ background: transparent;
+}
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+b,
+strong {
+ font-weight: bold;
+}
+
+dfn {
+ font-style: italic;
+}
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+small {
+ font-size: 80%;
+}
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+img {
+ border: 0;
+}
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+figure {
+ margin: 1em 40px;
+}
+
+hr {
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+}
+
+pre {
+ overflow: auto;
+}
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit;
+ font: inherit;
+ margin: 0;
+}
+
+button {
+ overflow: visible;
+}
+
+button,
+select {
+ text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button;
+ cursor: pointer;
+}
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+input {
+ line-height: normal;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+input[type="search"] {
+ -webkit-appearance: textfield;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+ border: 0;
+ padding: 0;
+}
+
+textarea {
+ overflow: auto;
+}
+
+optgroup {
+ font-weight: bold;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+}
+
+* {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+body {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ font-family: "Helvetica Neue", Helvetica, sans-serif;
+ font-size: 17px;
+ line-height: 21px;
+ color: #000;
+ background-color: #fff;
+}
+
+a {
+ color: #428bca;
+ text-decoration: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+a:active {
+ color: #3071a9;
+}
+
+strong {
+ font-weight: 500;
+}
+
+.content {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ overflow: auto;
+ background-color: #fff;
+ -webkit-overflow-scrolling: touch;
+}
+
+.content > * {
+ -webkit-transform: translateZ(0px);
+ transform: translateZ(0px);
+}
+
+.bar-nav ~ .content {
+ padding-top: 44px;
+}
+
+.bar-tab ~ .content {
+ padding-bottom: 50px;
+}
+
+.bar-header-secondary ~ .content {
+ padding-top: 88px;
+}
+
+.container {
+ padding-right: 15px;
+ padding-left: 15px;
+}
+
+.pull-left {
+ float: left;
+}
+
+.pull-right {
+ float: right;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 10px 15px;
+ line-height: 1;
+}
+
+h1, .h1 {
+ font-size: 36px;
+}
+
+h2, .h2 {
+ font-size: 30px;
+}
+
+h3, .h3 {
+ font-size: 24px;
+}
+
+h4, .h4 {
+ font-size: 18px;
+}
+
+h5, .h5 {
+ font-size: 14px;
+ margin-top: 20px;
+}
+
+h6, .h6 {
+ font-size: 12px;
+ margin-top: 20px;
+}
+
+p {
+ margin: 10px 15px;
+ font-size: 14px;
+ color: #777;
+}
+
+.btn {
+ position: relative;
+ display: inline-block;
+ padding: 5px 8px;
+ margin: 0;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1.15;
+ color: #333;
+ text-align: center;
+ vertical-align: top;
+ cursor: pointer;
+ background-color: white;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+}
+.btn:active, .btn.active {
+ color: inherit;
+ background-color: #ccc;
+}
+.btn:disabled, .btn.disabled {
+ opacity: .6;
+}
+
+.btn-primary {
+ color: #fff;
+ border: 1px solid #428bca;
+ background-color: #428bca;
+}
+.btn-primary:active, .btn-primary.active {
+ color: #fff;
+ border: 1px solid #3071a9;
+ background-color: #3071a9;
+}
+
+.btn-positive {
+ color: #fff;
+ border: 1px solid #5cb85c;
+ background-color: #5cb85c;
+}
+.btn-positive:active, .btn-positive.active {
+ color: #fff;
+ border: 1px solid #449d44;
+ background-color: #449d44;
+}
+
+.btn-negative {
+ color: #fff;
+ border: 1px solid #d9534f;
+ background-color: #d9534f;
+}
+.btn-negative:active, .btn-negative.active {
+ color: #fff;
+ border: 1px solid #c9302c;
+ background-color: #c9302c;
+}
+
+.btn-outlined {
+ background-color: transparent;
+}
+.btn-outlined.btn-primary {
+ color: #428bca;
+}
+.btn-outlined.btn-positive {
+ color: #5cb85c;
+}
+.btn-outlined.btn-negative {
+ color: #d9534f;
+}
+.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
+ color: #fff;
+}
+
+.btn-link {
+ padding-top: 6px;
+ padding-bottom: 6px;
+ color: #428bca;
+ background-color: transparent;
+ border: none;
+}
+.btn-link:active, .btn-link.active {
+ color: #3071a9;
+ background-color: transparent;
+}
+
+.btn-block {
+ display: block;
+ padding: 15px 0;
+ margin-bottom: 10px;
+ font-size: 18px;
+}
+
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ width: 100%;
+}
+
+.btn .badge {
+ font-size: 12px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ margin: -2px -4px -2px 4px;
+ background-color: rgba(0, 0, 0, 0.15);
+}
+
+.btn .badge-inverted,
+.btn:active .badge-inverted {
+ background-color: transparent;
+}
+
+.btn-primary:active .badge-inverted,
+.btn-positive:active .badge-inverted,
+.btn-negative:active .badge-inverted {
+ color: #fff;
+}
+
+.btn-block .badge {
+ position: absolute;
+ right: 0;
+ margin-right: 10px;
+}
+
+.btn .icon {
+ font-size: inherit;
+}
+
+.bar {
+ position: fixed;
+ right: 0;
+ left: 0;
+ z-index: 10;
+ height: 44px;
+ padding-right: 10px;
+ padding-left: 10px;
+ border-bottom: 1px solid #dddddd;
+ background-color: white;
+}
+.bar.bar-header-secondary {
+ top: 44px;
+}
+.bar.bar-footer {
+ bottom: 0;
+}
+.bar.bar-footer-secondary {
+ bottom: 44px;
+}
+.bar.bar-footer-secondary-tab {
+ bottom: 50px;
+}
+
+.bar-nav {
+ top: 0;
+}
+
+.title {
+ position: absolute;
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ margin-left: -10px;
+ margin-right: -10px;
+ font-size: 17px;
+ font-weight: 500;
+ line-height: 44px;
+ color: #000;
+ text-align: center;
+ white-space: nowrap;
+}
+
+> a:not(.btn) {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.title a {
+ color: inherit;
+}
+
+.bar-tab {
+ display: table;
+ bottom: 0;
+ height: 50px;
+ width: 100%;
+ padding: 0;
+ border-top: 1px solid #dddddd;
+ table-layout: fixed;
+}
+.bar-tab .tab-item {
+ display: table-cell;
+ height: 100%;
+ width: 1%;
+ vertical-align: middle;
+ color: #929292;
+ text-align: center;
+}
+.bar-tab .tab-item.active, .bar-tab .tab-item:active {
+ color: #428bca;
+}
+.bar-tab .tab-item .icon {
+ top: 2px;
+ width: 24px;
+ height: 24px;
+ padding: 0;
+}
+.bar-tab .tab-item .icon ~ .tab-label {
+ display: block;
+ margin-top: -2px;
+ font-size: 11px;
+}
+
+.bar-nav .btn {
+ position: relative;
+ z-index: 20;
+ padding: 6px 12px;
+ margin-top: 8px;
+ font-weight: 400;
+}
+.bar-nav .btn.pull-right {
+ margin-left: 10px;
+}
+.bar-nav .btn.pull-left {
+ margin-right: 10px;
+}
+
+.bar-nav .btn-link {
+ margin-top: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ font-size: 16px;
+ color: #428bca;
+ line-height: 44px;
+ border: 0;
+}
+.bar-nav .btn-link:active, .bar-nav .btn-link.active {
+ color: #3071a9;
+}
+.bar-nav .btn-link .icon {
+ top: 2px;
+ padding: 0;
+}
+.bar-nav .btn-link.pull-left {
+ margin-left: -10px;
+}
+.bar-nav .btn-link.pull-left .icon {
+ margin-right: -5px;
+ margin-left: -7px;
+}
+.bar-nav .btn-link.pull-right {
+ margin-right: -10px;
+}
+.bar-nav .btn-link.pull-right .icon {
+ margin-right: -7px;
+ margin-left: -5px;
+}
+
+.bar .btn-block {
+ padding: 7px 0 6px;
+ margin-top: 5px;
+ margin-bottom: 0;
+ font-size: 16px;
+}
+
+.bar input[type="search"] {
+ height: 29px;
+ margin: 6px 0;
+}
+
+.bar .segmented-control {
+ top: 8px;
+ margin: 0 auto;
+}
+
+.bar .icon {
+ position: relative;
+ padding: 10px 13px;
+ z-index: 20;
+ font-size: 24px;
+}
+.bar > .icon {
+ padding-right: 5px;
+ padding-left: 5px;
+}
+.bar > .icon.pull-left {
+ margin-left: -10px;
+}
+.bar > .icon.pull-right {
+ margin-right: -10px;
+}
+.bar .title .icon {
+ padding: 0;
+}
+.bar .title .icon.icon-caret {
+ top: 4px;
+ margin-left: -5px;
+}
+
+.badge {
+ display: inline-block;
+ padding: 2px 9px;
+ font-size: 13px;
+ line-height: 1;
+ color: #333;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-radius: 100px;
+}
+.badge.badge-inverted {
+ padding: 0 5px 0 0;
+ background-color: transparent;
+}
+
+.badge-primary {
+ color: #fff;
+ background-color: #428bca;
+}
+.badge-primary.badge-inverted {
+ color: #428bca;
+}
+
+.badge-positive {
+ color: #fff;
+ background-color: #5cb85c;
+}
+.badge-positive.badge-inverted {
+ color: #5cb85c;
+}
+
+.badge-negative {
+ color: #fff;
+ background-color: #d9534f;
+}
+.badge-negative.badge-inverted {
+ color: #d9534f;
+}
+
+.card {
+ width: auto;
+ overflow: hidden;
+ margin: 10px;
+ background-color: white;
+ border: 1px solid #dddddd;
+ border-radius: 6px;
+}
+.card p {
+ margin: inherit;
+ font-size: inherit;
+ color: inherit;
+}
+
+.card .table-view {
+ margin: 0;
+ border-top: 0;
+ border-bottom: 0;
+}
+.card .table-view .table-view-divider:first-child {
+ top: 0;
+ border-radius: 6px 6px 0 0;
+}
+.card .table-view .table-view-divider:last-child {
+ border-radius: 0 0 6px 6px;
+}
+
+.card .table-view li:last-child {
+ border: 0;
+}
+
+.table-view {
+ padding: 0;
+ margin: 0 0 15px 0;
+ list-style: none;
+ background-color: #fff;
+ border-top: 1px solid #dddddd;
+ border-bottom: 1px solid #dddddd;
+}
+.table-view .table-view-cell {
+ position: relative;
+ overflow: hidden;
+ padding: 11px 65px 11px 15px;
+ border-bottom: 1px solid #dddddd;
+}
+.table-view .table-view-cell:last-child {
+ border-bottom: 0;
+}
+.table-view .table-view-cell > a:not(.btn) {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ padding: inherit;
+ margin: -11px -65px -11px -15px;
+ color: inherit;
+}
+.table-view .table-view-cell > a:not(.btn):active {
+ background-color: #eee;
+}
+.table-view .table-view-cell p {
+ margin: 0;
+}
+.table-view .table-view-divider {
+ padding-top: 6px;
+ padding-bottom: 6px;
+ padding-left: 15px;
+ margin-top: -1px;
+ margin-left: 0;
+ color: #999;
+ font-weight: 500;
+ border-top: 1px solid #dddddd;
+ border-bottom: 1px solid #dddddd;
+ background-color: #fafafa;
+}
+
+.table-view .media,
+.table-view .media-body {
+ overflow: hidden;
+ zoom: 1;
+}
+
+.table-view .media-object.pull-left {
+ margin-right: 10px;
+}
+.table-view .media-object.pull-right {
+ margin-left: 10px;
+}
+
+.table-view-cell > .btn,
+.table-view-cell > .badge,
+.table-view-cell > .toggle,
+.table-view-cell > a > .btn,
+.table-view-cell > a > .badge,
+.table-view-cell > a > .toggle {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+}
+.table-view-cell .push-left > .btn,
+.table-view-cell .push-left > .badge,
+.table-view-cell .push-left > .toggle,
+.table-view-cell .push-right > .btn,
+.table-view-cell .push-right > .badge,
+.table-view-cell .push-right > .toggle,
+.table-view-cell > a .push-left > .btn,
+.table-view-cell > a .push-left > .badge,
+.table-view-cell > a .push-left > .toggle,
+.table-view-cell > a .push-right > .btn,
+.table-view-cell > a .push-right > .badge,
+.table-view-cell > a .push-right > .toggle {
+ right: 35px;
+}
+
+input,
+textarea,
+button,
+select {
+ font-family: "Helvetica Neue", Helvetica, sans-serif;
+ font-size: 17px;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type="search"],
+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="tel"],
+input[type="color"],
+.input-group {
+ width: 100%;
+ height: 35px;
+ padding: 0 15px;
+ margin-bottom: 15px;
+ line-height: 21px;
+ background-color: #fff;
+ border: 1px solid #dddddd;
+ border-radius: 3px;
+ outline: none;
+ -webkit-appearance: none;
+}
+
+input[type="search"] {
+ padding: 0 10px;
+ font-size: 16px;
+ border-radius: 20px;
+ box-sizing: border-box;
+}
+
+input[type="search"]:focus {
+ text-align: left;
+}
+
+textarea {
+ height: auto;
+}
+
+select {
+ height: auto;
+ font-size: 14px;
+ background-color: #f8f8f8;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.input-group {
+ width: auto;
+ height: auto;
+ padding: 0;
+ border-left: 0;
+ border-right: 0;
+ border-radius: 0;
+}
+
+.input-group input {
+ margin-bottom: 0;
+ background-color: transparent;
+ border-bottom: 1px solid #dddddd;
+ border-top: 0;
+ border-left: 0;
+ border-right: 0;
+ border-radius: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.input-group input:last-child {
+ border-bottom: 0;
+}
+
+.input-row {
+ overflow: hidden;
+ border-bottom: 1px solid #dddddd;
+}
+
+.input-row:last-child {
+ border-bottom: 0;
+}
+
+.input-row label {
+ float: left;
+ width: 35%;
+ padding: 10px 15px;
+ font-family: "Helvetica Neue", Helvetica, sans-serif;
+ line-height: 1.1;
+}
+
+.input-row label + input {
+ float: right;
+ width: 65%;
+ padding-left: 0;
+ margin-bottom: 0;
+ border: 0;
+}
+
+.segmented-control {
+ position: relative;
+ display: table;
+ padding: 0;
+ overflow: hidden;
+ font-size: 12px;
+ font-weight: 400;
+ list-style: none;
+ background-color: white;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+.segmented-control .control-item {
+ display: table-cell;
+ overflow: hidden;
+ width: 1%;
+ padding-top: 6px;
+ padding-bottom: 7px;
+ line-height: 1;
+ color: #333;
+ text-align: center;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ border-left: 1px solid #ccc;
+}
+.segmented-control .control-item:first-child {
+ border-left-width: 0;
+}
+.segmented-control .control-item:active {
+ background-color: #eee;
+}
+.segmented-control .control-item.active {
+ background-color: #ccc;
+}
+
+.segmented-control-primary {
+ border: 1px solid #428bca;
+}
+.segmented-control-primary .control-item {
+ color: #428bca;
+ border-color: inherit;
+}
+.segmented-control-primary .control-item:active {
+ background-color: #cde1f1;
+}
+.segmented-control-primary .control-item.active {
+ color: #fff;
+ background-color: #428bca;
+}
+
+.segmented-control-positive {
+ border: 1px solid #5cb85c;
+}
+.segmented-control-positive .control-item {
+ color: #5cb85c;
+ border-color: inherit;
+}
+.segmented-control-positive .control-item:active {
+ background-color: #d8eed8;
+}
+.segmented-control-positive .control-item.active {
+ color: #fff;
+ background-color: #5cb85c;
+}
+
+.segmented-control-negative {
+ border: 1px solid #d9534f;
+}
+.segmented-control-negative .control-item {
+ color: #d9534f;
+ border-color: inherit;
+}
+.segmented-control-negative .control-item:active {
+ background-color: #f9e2e2;
+}
+.segmented-control-negative .control-item.active {
+ color: #fff;
+ background-color: #d9534f;
+}
+
+.control-content {
+ display: none;
+}
+.control-content.active {
+ display: block;
+}
+
+.popover {
+ position: fixed;
+ top: 55px;
+ left: 50%;
+ z-index: 20;
+ display: none;
+ width: 280px;
+ margin-left: -140px;
+ background-color: white;
+ border-radius: 6px;
+ opacity: 0;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ -webkit-transform: translate3d(0, -15px, 0);
+ -ms-transform: translate3d(0, -15px, 0);
+ transform: translate3d(0, -15px, 0);
+ -webkit-transition: all 0.25s linear;
+ -moz-transition: all 0.25s linear;
+ transition: all 0.25s linear;
+}
+.popover:before {
+ position: absolute;
+ top: -15px;
+ left: 50%;
+ width: 0;
+ height: 0;
+ margin-left: -15px;
+ border-right: 15px solid transparent;
+ border-bottom: 15px solid white;
+ border-left: 15px solid transparent;
+ content: '';
+}
+.popover.visible {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+.popover .bar ~ .table-view {
+ padding-top: 44px;
+}
+
+.backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 15;
+ background-color: none;
+}
+
+.popover .btn-block {
+ margin-bottom: 5px;
+}
+.popover .btn-block:last-child {
+ margin-bottom: 0;
+}
+
+.popover .bar-nav {
+ border-bottom: 1px solid #dddddd;
+ border-radius: 12px 12px 0 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.popover .table-view {
+ width: auto;
+ max-height: 300px;
+ margin-right: 0;
+ margin-bottom: 0;
+ margin-left: 0;
+ overflow: auto;
+ background-color: #fff;
+ border-top: 0;
+ border-bottom: 0;
+ border-radius: 6px;
+ -webkit-overflow-scrolling: touch;
+}
+
+.modal {
+ position: fixed;
+ top: 0;
+ opacity: 0;
+ z-index: 11;
+ width: 100%;
+ min-height: 100%;
+ overflow: hidden;
+ background-color: #fff;
+ -webkit-transform: translate3d(0, 100%, 0);
+ -ms-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
+ -moz-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
+ transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
+}
+.modal.active {
+ opacity: 1;
+ height: 100%;
+ -webkit-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ -webkit-transition: -webkit-transform 0.25s;
+ -moz-transition: -webkit-transform 0.25s;
+ transition: -webkit-transform 0.25s;
+}
+
+.slider,
+.slider > li {
+ width: 100%;
+}
+
+.slider {
+ overflow: hidden;
+ background-color: #000;
+}
+.slider .slide-group {
+ position: relative;
+ padding: 0;
+ font-size: 0;
+ white-space: nowrap;
+ -webkit-transition: all 0 linear;
+ -moz-transition: all 0 linear;
+ transition: all 0 linear;
+}
+.slider .slide-group .slide {
+ display: inline-block;
+ vertical-align: top;
+ width: 100%;
+ height: 100%;
+}
+.slider .slide-group .slide > * {
+ font-size: 14px;
+}
+
+.toggle {
+ display: block;
+ position: relative;
+ width: 74px;
+ height: 30px;
+ background-color: #fff;
+ border: 2px solid #ddd;
+ border-radius: 20px;
+ -webkit-transition-property: background-color, border;
+ -moz-transition-property: background-color, border;
+ transition-property: background-color, border;
+ -webkit-transition-duration: 0.2s;
+ -moz-transition-duration: 0.2s;
+ transition-duration: 0.2s;
+}
+.toggle .toggle-handle {
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ z-index: 2;
+ width: 28px;
+ height: 28px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 100px;
+ -webkit-transition-property: -webkit-transform, border, width;
+ -moz-transition-property: -webkit-transform, border, width;
+ transition-property: -webkit-transform, border, width;
+ -webkit-transition-duration: 0.2s;
+ -moz-transition-duration: 0.2s;
+ transition-duration: 0.2s;
+}
+.toggle:before {
+ position: absolute;
+ top: 3px;
+ right: 11px;
+ color: #999;
+ font-size: 14px;
+ text-transform: uppercase;
+ content: "Off";
+}
+.toggle.active {
+ border: 2px solid #5cb85c;
+ background-color: #5cb85c;
+}
+.toggle.active .toggle-handle {
+ border-color: #5cb85c;
+ -webkit-transform: translate3d(44px, 0, 0);
+ -ms-transform: translate3d(44px, 0, 0);
+ transform: translate3d(44px, 0, 0);
+}
+.toggle.active:before {
+ right: auto;
+ left: 15px;
+ color: #fff;
+ content: "On";
+}
+.toggle input[type="checkbox"] {
+ display: none;
+}
+
+.content.fade {
+ left: 0;
+ opacity: 0;
+}
+.content.fade.in {
+ opacity: 1;
+}
+.content.slide {
+ z-index: 2;
+ -webkit-transition: -webkit-transform 0.4s;
+ -moz-transition: -webkit-transform 0.4s;
+ transition: -webkit-transform 0.4s;
+ -webkit-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+.content.slide.left {
+ z-index: 1;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+}
+.content.slide.right {
+ z-index: 3;
+ -webkit-transform: translate3d(100%, 0, 0);
+ -ms-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+}
+
+.push-left:after,
+.push-right:after {
+ position: absolute;
+ top: 50%;
+ display: inline-block;
+ color: #bbb;
+ font-family: Ratchicons;
+ font-size: inherit;
+ text-decoration: none;
+ line-height: 1;
+ cursor: default;
+ -webkit-font-smoothing: antialiased;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+}
+
+.push-left:after {
+ left: 15px;
+ content: '\e80d';
+}
+
+.push-right:after {
+ right: 15px;
+ content: '\e811';
+}
+
+@font-face {
+ font-family: Ratchicons;
+ src: url("ratchicons/ratchicons.eot");
+ src: url("ratchicons/ratchicons.eot?#iefix") format("embedded-opentype"), url("ratchicons/ratchicons.woff") format("woff"), url("ratchicons/ratchicons.ttf") format("truetype"), url("ratchicons/ratchicons.svg#svgFontName") format("svg");
+ font-weight: normal;
+ font-style: normal;
+}
+
+.icon {
+ display: inline-block;
+ font-family: Ratchicons;
+ font-size: 24px;
+ text-decoration: none;
+ line-height: 1;
+ cursor: default;
+ -webkit-font-smoothing: antialiased;
+}
+
+.icon-back:before {
+ content: '\e80a';
+}
+
+.icon-bars:before {
+ content: '\e817';
+}
+
+.icon-caret:before {
+ content: '\e818';
+}
+
+.icon-check:before {
+ content: '\e819';
+}
+
+.icon-close:before {
+ content: '\e81a';
+}
+
+.icon-code:before {
+ content: '\e81b';
+}
+
+.icon-compose:before {
+ content: '\e81c';
+}
+
+.icon-down-nav:before {
+ content: '\e81d';
+}
+
+.icon-down:before {
+ content: '\e80b';
+}
+
+.icon-download:before {
+ content: '\e81e';
+}
+
+.icon-edit:before {
+ content: '\e81f';
+}
+
+.icon-forward:before {
+ content: '\e820';
+}
+
+.icon-gear:before {
+ content: '\e80c';
+}
+
+.icon-home:before {
+ content: '\e821';
+}
+
+.icon-info:before {
+ content: '\e822';
+}
+
+.icon-left-nav:before {
+ content: '\e823';
+}
+
+.icon-left:before {
+ content: '\e80d';
+}
+
+.icon-list:before {
+ content: '\e80e';
+}
+
+.icon-more-vertical:before {
+ content: '\e824';
+}
+
+.icon-more:before {
+ content: '\e825';
+}
+
+.icon-pages:before {
+ content: '\e80f';
+}
+
+.icon-pause:before {
+ content: '\e826';
+}
+
+.icon-person:before {
+ content: '\e827';
+}
+
+.icon-play:before {
+ content: '\e828';
+}
+
+.icon-plus:before {
+ content: '\e829';
+}
+
+.icon-refresh:before {
+ content: '\e810';
+}
+
+.icon-right-nav:before {
+ content: '\e82a';
+}
+
+.icon-right:before {
+ content: '\e811';
+}
+
+.icon-search:before {
+ content: '\e82b';
+}
+
+.icon-share:before {
+ content: '\e82c';
+}
+
+.icon-sound2:before {
+ content: '\e813';
+}
+
+.icon-sound3:before {
+ content: '\e814';
+}
+
+.icon-sound4:before {
+ content: '\e815';
+}
+
+.icon-sound:before {
+ content: '\e812';
+}
+
+.icon-star-filled:before {
+ content: '\e82e';
+}
+
+.icon-star:before {
+ content: '\e82d';
+}
+
+.icon-stop:before {
+ content: '\e82f';
+}
+
+.icon-trash:before {
+ content: '\e830';
+}
+
+.icon-up-nav:before {
+ content: '\e832';
+}
+
+.icon-up:before {
+ content: '\e816';
+}
+
+.icon-user:before {
+ content: '\e831';
+}
diff --git a/docs/dist/ratchet.js b/docs/dist/ratchet.js
new file mode 100644
index 0000000..6cf21e0
--- /dev/null
+++ b/docs/dist/ratchet.js
@@ -0,0 +1,793 @@
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+/* ----------------------------------
+ * MODAL v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+ var findModals = function (target) {
+ var i, modals = document.querySelectorAll('a');
+ for (; target && target !== document; target = target.parentNode) {
+ for (i = modals.length; i--;) { if (modals[i] === target) return target; }
+ }
+ };
+
+ var getModal = function (event) {
+ var modalToggle = findModals(event.target);
+ if (modalToggle && modalToggle.hash) return document.querySelector(modalToggle.hash);
+ };
+
+ window.addEventListener('touchend', function (event) {
+ var modal = getModal(event);
+ if (modal) {
+ if (modal && modal.classList.contains('modal')) modal.classList.toggle('active');
+ event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
+ }
+ });
+}();
+
+/* ----------------------------------
+ * POPOVER v1.0.1
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+ var popover;
+
+ var findPopovers = function (target) {
+ var i, popovers = document.querySelectorAll('a');
+ for (; target && target !== document; target = target.parentNode) {
+ for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
+ }
+ };
+
+ var onPopoverHidden = function () {
+ popover.style.display = 'none';
+ popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
+ }
+
+ var backdrop = function () {
+ var element = document.createElement('div');
+
+ element.classList.add('backdrop');
+
+ element.addEventListener('touchend', function () {
+ popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
+ popover.classList.remove('visible');
+ popover.parentNode.removeChild(backdrop);
+ });
+
+ return element;
+ }();
+
+ var getPopover = function (e) {
+ var anchor = findPopovers(e.target);
+
+ if (!anchor || !anchor.hash || (anchor.hash.indexOf("/") > 0)) return;
+
+ try {
+ popover = document.querySelector(anchor.hash);
+ }
+ catch (error) {
+ popover = null;
+ }
+
+ if (popover == null) return;
+
+ if (!popover || !popover.classList.contains('popover')) return;
+
+ return popover;
+ }
+
+ var showHidePopover = function (e) {
+ var popover = getPopover(e);
+
+ if (!popover) return;
+
+ popover.style.display = 'block';
+ popover.offsetHeight;
+ popover.classList.add('visible');
+
+ popover.parentNode.appendChild(backdrop);
+ };
+
+ window.addEventListener('touchend', showHidePopover);
+ window.addEventListener('click', showHidePopover);
+
+}();
+
+/* ----------------------------------
+ * PUSH v1.0.0
+ * Licensed under The MIT License
+ * inspired by chris's jquery.pjax.js
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+ var noop = function () {};
+
+
+ // Pushstate cacheing
+ // ==================
+
+ var isScrolling;
+ var maxCacheLength = 20;
+ var cacheMapping = sessionStorage;
+ var domCache = {};
+ var transitionMap = {
+ 'slide-in' : 'slide-out',
+ 'slide-out' : 'slide-in',
+ 'fade' : 'fade'
+ };
+
+ var bars = {
+ bartab : '.bar-tab',
+ barnav : '.bar-nav',
+ barfooter : '.bar-footer',
+ barheadersecondary : '.bar-header-secondary'
+ };
+
+ var cacheReplace = function (data, updates) {
+ PUSH.id = data.id;
+ if (updates) data = getCached(data.id);
+ cacheMapping[data.id] = JSON.stringify(data);
+ window.history.replaceState(data.id, data.title, data.url);
+ domCache[data.id] = document.body.cloneNode(true);
+ };
+
+ var cachePush = function () {
+ var id = PUSH.id;
+
+ var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
+ var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]');
+
+ cacheBackStack.push(id);
+
+ while (cacheForwardStack.length) delete cacheMapping[cacheForwardStack.shift()];
+ while (cacheBackStack.length > maxCacheLength) delete cacheMapping[cacheBackStack.shift()];
+
+ window.history.pushState(null, '', cacheMapping[PUSH.id].url);
+
+ cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
+ cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);
+ };
+
+ var cachePop = function (id, direction) {
+ var forward = direction == 'forward';
+ var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
+ var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]');
+ var pushStack = forward ? cacheBackStack : cacheForwardStack;
+ var popStack = forward ? cacheForwardStack : cacheBackStack;
+
+ if (PUSH.id) pushStack.push(PUSH.id);
+ popStack.pop();
+
+ cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
+ cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);
+ };
+
+ var getCached = function (id) {
+ return JSON.parse(cacheMapping[id] || null) || {};
+ };
+
+ var getTarget = function (e) {
+ var target = findTarget(e.target);
+
+ if (
+ ! target
+ || e.which > 1
+ || e.metaKey
+ || e.ctrlKey
+ || isScrolling
+ || location.protocol !== target.protocol
+ || location.host !== target.host
+ || !target.hash && /#/.test(target.href)
+ || target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '')
+ || target.getAttribute('data-ignore') == 'push'
+ ) return;
+
+ return target;
+ };
+
+
+ // Main event handlers (touchend, popstate)
+ // ==========================================
+
+ var touchend = function (e) {
+ var target = getTarget(e);
+
+ if (!target) return;
+
+ e.preventDefault();
+
+ PUSH({
+ url : target.href,
+ hash : target.hash,
+ timeout : target.getAttribute('data-timeout'),
+ transition : target.getAttribute('data-transition')
+ });
+ };
+
+ var popstate = function (e) {
+ var key;
+ var barElement;
+ var activeObj;
+ var activeDom;
+ var direction;
+ var transition;
+ var transitionFrom;
+ var transitionFromObj;
+ var id = e.state;
+
+ if (!id || !cacheMapping[id]) return;
+
+ direction = PUSH.id < id ? 'forward' : 'back';
+
+ cachePop(id, direction);
+
+ activeObj = getCached(id);
+ activeDom = domCache[id];
+
+ if (activeObj.title) document.title = activeObj.title;
+
+ if (direction == 'back') {
+ transitionFrom = JSON.parse(direction == 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack);
+ transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]);
+ } else {
+ transitionFromObj = activeObj;
+ }
+
+ if (direction == 'back' && !transitionFromObj.id) return PUSH.id = id;
+
+ transition = direction == 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition;
+
+ if (!activeDom) {
+ return PUSH({
+ id : activeObj.id,
+ url : activeObj.url,
+ title : activeObj.title,
+ timeout : activeObj.timeout,
+ transition : transition,
+ ignorePush : true
+ });
+ }
+
+ if (transitionFromObj.transition) {
+ activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true));
+ for (key in bars) {
+ barElement = document.querySelector(bars[key])
+ if (activeObj[key]) swapContent(activeObj[key], barElement);
+ else if (barElement) barElement.parentNode.removeChild(barElement);
+ }
+ }
+
+ swapContent(
+ (activeObj.contents || activeDom).cloneNode(true),
+ document.querySelector('.content'),
+ transition
+ );
+
+ PUSH.id = id;
+
+ document.body.offsetHeight; // force reflow to prevent scroll
+ };
+
+
+ // Core PUSH functionality
+ // =======================
+
+ var PUSH = function (options) {
+ var key;
+ var data = {};
+ var xhr = PUSH.xhr;
+
+ options.container = options.container || options.transition ? document.querySelector('.content') : document.body;
+
+ for (key in bars) {
+ options[key] = options[key] || document.querySelector(bars[key]);
+ }
+
+ if (xhr && xhr.readyState < 4) {
+ xhr.onreadystatechange = noop;
+ xhr.abort()
+ }
+
+ xhr = new XMLHttpRequest();
+ xhr.open('GET', options.url, true);
+ xhr.setRequestHeader('X-PUSH', 'true');
+
+ xhr.onreadystatechange = function () {
+ if (options._timeout) clearTimeout(options._timeout);
+ if (xhr.readyState == 4) xhr.status == 200 ? success(xhr, options) : failure(options.url);
+ };
+
+ if (!PUSH.id) {
+ cacheReplace({
+ id : +new Date,
+ url : window.location.href,
+ title : document.title,
+ timeout : options.timeout,
+ transition : null
+ });
+ }
+
+ if (options.timeout) {
+ options._timeout = setTimeout(function () { xhr.abort('timeout'); }, options.timeout);
+ }
+
+ xhr.send();
+
+ if (xhr.readyState && !options.ignorePush) cachePush();
+ };
+
+
+ // Main XHR handlers
+ // =================
+
+ var success = function (xhr, options) {
+ var key;
+ var barElement;
+ var data = parseXHR(xhr, options);
+
+ if (!data.contents) return locationReplace(options.url);
+
+ if (data.title) document.title = data.title;
+
+ if (options.transition) {
+ for (key in bars) {
+ barElement = document.querySelector(bars[key])
+ if (data[key]) swapContent(data[key], barElement);
+ else if (barElement) barElement.parentNode.removeChild(barElement);
+ }
+ }
+
+ swapContent(data.contents, options.container, options.transition, function () {
+ cacheReplace({
+ id : options.id || +new Date,
+ url : data.url,
+ title : data.title,
+ timeout : options.timeout,
+ transition : options.transition
+ }, options.id);
+ triggerStateChange();
+ });
+
+ if (!options.ignorePush && window._gaq) _gaq.push(['_trackPageview']) // google analytics
+ if (!options.hash) return;
+ };
+
+ var failure = function (url) {
+ throw new Error('Could not get: ' + url)
+ };
+
+
+ // PUSH helpers
+ // ============
+
+ var swapContent = function (swap, container, transition, complete) {
+ var enter;
+ var containerDirection;
+ var swapDirection;
+
+ if (!transition) {
+ if (container) container.innerHTML = swap.innerHTML;
+ else if (swap.classList.contains('content')) document.body.appendChild(swap);
+ else document.body.insertBefore(swap, document.querySelector('.content'));
+ } else {
+ enter = /in$/.test(transition);
+
+ if (transition == 'fade') {
+ container.classList.add('in');
+ container.classList.add('fade');
+ swap.classList.add('fade');
+ }
+
+ if (/slide/.test(transition)) {
+ swap.classList.add('sliding-in', enter ? 'right' : 'left');
+ swap.classList.add('slide');
+ container.classList.add('slide');
+ }
+
+ container.parentNode.insertBefore(swap, container);
+ }
+
+ if (!transition) complete && complete();
+
+ if (transition == 'fade') {
+ container.offsetWidth; // force reflow
+ container.classList.remove('in');
+ container.addEventListener('webkitTransitionEnd', fadeContainerEnd);
+
+ function fadeContainerEnd() {
+ container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
+ swap.classList.add('in');
+ swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
+ }
+ function fadeSwapEnd () {
+ swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
+ container.parentNode.removeChild(container);
+ swap.classList.remove('fade');
+ swap.classList.remove('in');
+ complete && complete();
+ }
+ }
+
+ if (/slide/.test(transition)) {
+ container.offsetWidth; // force reflow
+ swapDirection = enter ? 'right' : 'left'
+ containerDirection = enter ? 'left' : 'right'
+ container.classList.add(containerDirection);
+ swap.classList.remove(swapDirection);
+ swap.addEventListener('webkitTransitionEnd', slideEnd);
+
+ function slideEnd() {
+ swap.removeEventListener('webkitTransitionEnd', slideEnd);
+ swap.classList.remove('slide', 'sliding-in');
+ swap.classList.remove(swapDirection);
+ container.parentNode.removeChild(container);
+ complete && complete();
+ }
+ }
+ };
+
+ var triggerStateChange = function () {
+ var e = new CustomEvent('push', {
+ detail: { state: getCached(PUSH.id) },
+ bubbles: true,
+ cancelable: true
+ });
+
+ window.dispatchEvent(e);
+ };
+
+ var findTarget = function (target) {
+ var i, toggles = document.querySelectorAll('a');
+ for (; target && target !== document; target = target.parentNode) {
+ for (i = toggles.length; i--;) { if (toggles[i] === target) return target; }
+ }
+ };
+
+ var locationReplace = function (url) {
+ window.history.replaceState(null, '', '#');
+ window.location.replace(url);
+ };
+
+ var parseURL = function (url) {
+ var a = document.createElement('a'); a.href = url; return a;
+ };
+
+ var extendWithDom = function (obj, fragment, dom) {
+ var i;
+ var result = {};
+
+ for (i in obj) result[i] = obj[i];
+
+ Object.keys(bars).forEach(function (key) {
+ var el = dom.querySelector(bars[key]);
+ if (el) el.parentNode.removeChild(el);
+ result[key] = el;
+ });
+
+ result.contents = dom.querySelector(fragment);
+
+ return result;
+ };
+
+ var parseXHR = function (xhr, options) {
+ var head;
+ var body;
+ var data = {};
+ var responseText = xhr.responseText;
+
+ data.url = options.url;
+
+ if (!responseText) return data;
+
+ if (/<html/i.test(responseText)) {
+ head = document.createElement('div');
+ body = document.createElement('div');
+ head.innerHTML = responseText.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0]
+ body.innerHTML = responseText.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0]
+ } else {
+ head = body = document.createElement('div');
+ head.innerHTML = responseText;
+ }
+
+ data.title = head.querySelector('title');
+ data.title = data.title && data.title.innerText.trim();
+
+ if (options.transition) data = extendWithDom(data, '.content', body);
+ else data.contents = body;
+
+ return data;
+ };
+
+
+ // Attach PUSH event handlers
+ // ==========================
+
+ window.addEventListener('touchstart', function () { isScrolling = false; });
+ window.addEventListener('touchmove', function () { isScrolling = true; })
+ window.addEventListener('touchend', touchend);
+ window.addEventListener('click', function (e) { if (getTarget(e)) e.preventDefault(); });
+ window.addEventListener('popstate', popstate);
+ window.PUSH = PUSH;
+
+}();
+
+/* ----------------------------------
+ * Segmented controls v1.0.1
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+ var getTarget = function (target) {
+ var i, segmentedControls = document.querySelectorAll('.segmented-control .control-item');
+ for (; target && target !== document; target = target.parentNode) {
+ for (i = segmentedControls.length; i--;) { if (segmentedControls[i] === target) return target; }
+ }
+ };
+
+ window.addEventListener("touchend", function (e) {
+ var activeTab;
+ var activeBodies;
+ var targetBody;
+ var targetTab = getTarget(e.target);
+ var className = 'active';
+ var classSelector = '.' + className;
+
+ if (!targetTab) return;
+
+ activeTab = targetTab.parentNode.querySelector(classSelector);
+
+ if (activeTab) activeTab.classList.remove(className);
+
+ targetTab.classList.add(className);
+
+ if (!targetTab.hash) return;
+
+ targetBody = document.querySelector(targetTab.hash);
+
+ if (!targetBody) return;
+
+ activeBodies = targetBody.parentNode.querySelectorAll(classSelector);
+
+ for (var i = 0; i < activeBodies.length; i++) {
+ activeBodies[i].classList.remove(className);
+ }
+
+ targetBody.classList.add(className);
+ });
+
+ window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); });
+}();
+/* ----------------------------------
+ * SLIDER v1.0.1
+ * Licensed under The MIT License
+ * Adapted from Brad Birdsall's swipe
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+ var pageX;
+ var pageY;
+ var slider;
+ var deltaX;
+ var deltaY;
+ var offsetX;
+ var lastSlide;
+ var startTime;
+ var resistance;
+ var sliderWidth;
+ var slideNumber;
+ var isScrolling;
+ var scrollableArea;
+
+ var getSlider = function (target) {
+ var i, sliders = document.querySelectorAll('.slider > .slide-group');
+ for (; target && target !== document; target = target.parentNode) {
+ for (i = sliders.length; i--;) { if (sliders[i] === target) return target; }
+ }
+ }
+
+ var getScroll = function () {
+ var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
+ return parseInt(translate3d ? translate3d[1] : 0)
+ };
+
+ var setSlideNumber = function (offset) {
+ var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
+ slideNumber = Math[round](getScroll() / ( scrollableArea / slider.children.length) );
+ slideNumber += offset;
+ slideNumber = Math.min(slideNumber, 0);
+ slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
+ }
+
+ var onTouchStart = function (e) {
+ slider = getSlider(e.target);
+
+ if (!slider) return;
+
+ var firstItem = slider.querySelector('.slide');
+
+ scrollableArea = firstItem.offsetWidth * slider.children.length;
+ isScrolling = undefined;
+ sliderWidth = slider.offsetWidth;
+ resistance = 1;
+ lastSlide = -(slider.children.length - 1);
+ startTime = +new Date;
+ pageX = e.touches[0].pageX;
+ pageY = e.touches[0].pageY;
+ deltaX = 0;
+ deltaY = 0;
+
+ setSlideNumber(0);
+
+ slider.style['-webkit-transition-duration'] = 0;
+ };
+
+ var onTouchMove = function (e) {
+ if (e.touches.length > 1 || !slider) return; // Exit if a pinch || no slider
+
+ deltaX = e.touches[0].pageX - pageX;
+ deltaY = e.touches[0].pageY - pageY;
+ pageX = e.touches[0].pageX;
+ pageY = e.touches[0].pageY;
+
+ if (typeof isScrolling == 'undefined') {
+ isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
+ }
+
+ if (isScrolling) return;
+
+ offsetX = (deltaX / resistance) + getScroll();
+
+ e.preventDefault();
+
+ resistance = slideNumber == 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
+ slideNumber == lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
+
+ slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+ };
+
+ var onTouchEnd = function (e) {
+ if (!slider || isScrolling) return;
+
+ setSlideNumber(
+ (+new Date) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0
+ );
+
+ offsetX = slideNumber * sliderWidth;
+
+ slider.style['-webkit-transition-duration'] = '.2s';
+ slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+
+ e = new CustomEvent('slide', {
+ detail: { slideNumber: Math.abs(slideNumber) },
+ bubbles: true,
+ cancelable: true
+ });
+
+ slider.parentNode.dispatchEvent(e);
+ };
+
+ window.addEventListener('touchstart', onTouchStart);
+ window.addEventListener('touchmove', onTouchMove);
+ window.addEventListener('touchend', onTouchEnd);
+
+}();
+
+/* ----------------------------------
+ * TOGGLE v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+ var start = {};
+ var touchMove = false;
+ var distanceX = false;
+ var toggle = false;
+
+ var findToggle = function (target) {
+ var i, toggles = document.querySelectorAll('.toggle');
+ for (; target && target !== document; target = target.parentNode) {
+ for (i = toggles.length; i--;) { if (toggles[i] === target) return target; }
+ }
+ }
+
+ window.addEventListener('touchstart', function (e) {
+ e = e.originalEvent || e;
+
+ toggle = findToggle(e.target);
+
+ if (!toggle) return;
+
+ var handle = toggle.querySelector('.toggle-handle');
+ var toggleWidth = toggle.clientWidth;
+ var handleWidth = handle.clientWidth;
+ var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0;
+
+ start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
+ touchMove = false;
+ });
+
+ window.addEventListener('touchmove', function (e) {
+ e = e.originalEvent || e;
+
+ if (e.touches.length > 1) return; // Exit if a pinch
+
+ if (!toggle) return;
+
+ var handle = toggle.querySelector('.toggle-handle');
+ var current = e.touches[0];
+ var toggleWidth = toggle.clientWidth;
+ var handleWidth = handle.clientWidth;
+ var offset = toggleWidth - handleWidth;
+
+ touchMove = true;
+ distanceX = current.pageX - start.pageX;
+
+ if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) return;
+
+ e.preventDefault();
+
+ if (distanceX < 0) return handle.style.webkitTransform = 'translate3d(0,0,0)';
+ if (distanceX > offset) return handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
+
+ handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
+
+ toggle.classList[(distanceX > (toggleWidth/2 - handleWidth/2)) ? 'add' : 'remove']('active');
+ });
+
+ window.addEventListener('touchend', function (e) {
+ if (!toggle) return;
+
+ var handle = toggle.querySelector('.toggle-handle');
+ var toggleWidth = toggle.clientWidth;
+ var handleWidth = handle.clientWidth;
+ var offset = (toggleWidth - handleWidth);
+ var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
+
+ if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
+ else handle.style.webkitTransform = 'translate3d(0,0,0)';
+
+ toggle.classList[slideOn ? 'add' : 'remove']('active');
+
+ e = new CustomEvent('toggle', {
+ detail: { isActive: slideOn },
+ bubbles: true,
+ cancelable: true
+ });
+
+ toggle.dispatchEvent(e);
+
+ touchMove = false;
+ toggle = false;
+ });
+
+}();
diff --git a/docs/dist/ratchicons/ratchicons.eot b/docs/dist/ratchicons/ratchicons.eot
new file mode 100644
index 0000000..54b1a3c
--- /dev/null
+++ b/docs/dist/ratchicons/ratchicons.eot
Binary files differ
diff --git a/docs/dist/ratchicons/ratchicons.svg b/docs/dist/ratchicons/ratchicons.svg
new file mode 100644
index 0000000..4271d0e
--- /dev/null
+++ b/docs/dist/ratchicons/ratchicons.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
+<defs>
+<font id="ratchicons" horiz-adv-x="1000" >
+<font-face font-family="ratchicons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="and-caret" unicode="&#xe800;" d="m313 225l375 0v376" horiz-adv-x="1000" />
+<glyph glyph-name="user" unicode="&#xe831;" d="m736 128q204-72 204-122l0-106l-940 0l0 106q0 50 204 122q94 34 128 69t34 95q0 22-22 49t-32 73q-2 12-9 18t-14 8t-14 17t-9 43q0 16 5 26t9 12l4 4q-8 50-12 88q-4 54 41 112t157 58t158-58t40-112l-12-88q18-8 18-42q-2-28-9-43t-14-17t-14-8t-9-18q-8-48-31-74t-23-48q0-60 35-95t127-69z" horiz-adv-x="940" />
+<glyph glyph-name="and-download" unicode="&#xe802;" d="m875 38h-750v62h750v-62z m-312 375v250h-125v-250h-125l187-250l188 250h-125z" horiz-adv-x="1000" />
+<glyph glyph-name="and-left" unicode="&#xe803;" d="m306 349l325 373l67-59l-273-314l273-315l-67-59l-325 373l0 1z" horiz-adv-x="1000" />
+<glyph glyph-name="and-more-vertical" unicode="&#xe804;" d="m406-25v188h188v-188h-188z m0 563h188v188h-188v-188z m188-281v188h-188v-188h188z" horiz-adv-x="1000" />
+<glyph glyph-name="and-more" unicode="&#xe805;" d="m125 444h188v-187h-188v187z m563 0v-187h187v187h-187z m-281-187h187v187h-187v-187z" horiz-adv-x="1000" />
+<glyph glyph-name="and-right" unicode="&#xe806;" d="m698 348l-325-373l-67 59l274 315l-274 314l68 59l324-373l0-1z" horiz-adv-x="1000" />
+<glyph glyph-name="and-share" unicode="&#xe808;" d="m728 215c-33 0-63-14-84-36l-263 153c1 6 2 12 2 18c0 6-1 12-2 18l263 152c21-23 51-37 84-37c62 0 113 51 113 113s-51 114-113 114s-114-51-114-114c0-7 1-14 2-21l-261-150c-21 23-51 38-85 38c-63 0-114-50-114-113s51-113 114-113c33 0 64 15 85 38l261-151c-1-7-2-14-2-22c0-62 51-113 114-113s113 51 113 113s-51 113-113 113z" horiz-adv-x="1000" />
+<glyph glyph-name="and-up" unicode="&#xe809;" d="m500 548l374-325l-59-67l-315 273l-314-273l-59 67l373 325l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="back" unicode="&#xe80a;" d="m500 174l-313 176l313 176m312-352l-312 176l312 176" horiz-adv-x="1000" />
+<glyph glyph-name="down" unicode="&#xe80b;" d="m941 479l-124 127l-317-315l-318 315l-124-127l442-441l441 441z" horiz-adv-x="1000" />
+<glyph glyph-name="gear" unicode="&#xe80c;" d="m820 274l118 40l0 72l-118 40c-8 34-22 67-40 97l55 111l-51 51l-111-55c-30 18-62 32-97 40l-39 118l-73 0l-40-118c-34-8-67-22-97-40l-111 55l-51-51l55-111c-18-30-32-62-40-97l-117-39l0-73l117-40c9-34 22-67 41-96l-56-111l52-52l111 56c29-19 62-32 96-40l40-119l73 0l39 119c35 8 67 21 97 40l111-56l51 52l-55 111c18 29 32 62 40 96z m-320-174c-139 0-251 112-251 251s112 250 251 250s250-112 250-250s-112-251-250-251z" horiz-adv-x="1000" />
+<glyph glyph-name="left" unicode="&#xe80d;" d="m628-91l127 123l-314 318l314 318l-127 124l-441-442l441-441z" horiz-adv-x="1000" />
+<glyph glyph-name="list" unicode="&#xe80e;" d="m1000 632h-750v-62l750-1v63z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z m-250 406l125 1v125l-125 0v-126z m0-249h125v125h-125v-125z m0-250h125v125h-125v-125z" horiz-adv-x="1000" />
+<glyph glyph-name="pages" unicode="&#xe80f;" d="m63 601v-689h687l0 688l-687 1z m625-63v-563h-563v563h563z m-500 250v-125h62v62h625v-625l-62 0v-62h125v750h-750z" horiz-adv-x="1000" />
+<glyph glyph-name="refresh" unicode="&#xe810;" d="m813 288c-28-145-161-250-313-250c-172 0-312 139-312 312c0 173 141 312 312 313v-98l221 129l-221 128v-95c0-2 0-2 0-2c-206 0-375-167-375-375s169-375 375-375c187 0 347 133 375 313h-62z" horiz-adv-x="1000" />
+<glyph glyph-name="right" unicode="&#xe811;" d="m372 792l-127-124l314-318l-314-318l127-123l441 441l-441 442z" horiz-adv-x="1000" />
+<glyph glyph-name="sound" unicode="&#xe812;" d="m825-22c-2 0-3 0-5 0l-16 7c0 0 0 0 0 1c-5 1-8 3-10 6c-1 3-1 7 1 12c1 1 22 40 43 101c20 58 44 147 44 244c0 98-24 186-44 243c-21 61-42 100-43 102c-4 11-2 15 8 21l17 8c2 1 5 2 7 2c7 0 12-5 17-16c1-2 2-4 4-8c10-19 32-63 52-125c25-78 37-156 37-232c0-94-24-182-44-240c-22-63-44-104-45-104l-1-2c-5-11-9-20-22-20c0 0 0 0 0 0z m-574 248c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound2" unicode="&#xe813;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound3" unicode="&#xe814;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m390 3c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="sound4" unicode="&#xe815;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z" horiz-adv-x="1000" />
+<glyph glyph-name="up" unicode="&#xe816;" d="m58 222l124-126l318 314l317-314l124 126l-441 441l-442-441z" horiz-adv-x="1000" />
+<glyph glyph-name="bars" unicode="&#xe817;" d="m875 632h-750v-62l750-1l0 63l0 0z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z" horiz-adv-x="1000" />
+<glyph glyph-name="caret" unicode="&#xe818;" d="m438 475h-125l187-250l188 250h-125" horiz-adv-x="1000" />
+<glyph glyph-name="check" unicode="&#xe819;" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />
+<glyph glyph-name="and-down" unicode="&#xe801;" d="m500 156l-373 325l59 67l314-273l315 273l59-67l-374-325l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="code" unicode="&#xe81b;" d="m680 608l-74-72l184-186l-184-185l74-73l257 258l-257 258z m-360-516l74 72l-184 186l184 186l-74 72l-258-258l258-258z" horiz-adv-x="1000" />
+<glyph glyph-name="down-nav" unicode="&#xe81d;" d="m934 537l-81 83l-354-372l-353 372l-81-83l435-455l434 455z" horiz-adv-x="1000" />
+<glyph glyph-name="download" unicode="&#xe81e;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-344-323v635l-62 0v-635l-115 112l-41-39l187-188l188 188l-42 40l-115-113z" horiz-adv-x="1000" />
+<glyph glyph-name="edit" unicode="&#xe81f;" d="m749 511l-404-404l-110-22l22 110l404 404l16-16l-404-405l56-55l404 404l16-16z m16 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20" horiz-adv-x="1000" />
+<glyph glyph-name="forward" unicode="&#xe820;" d="m500 526l313-176l-313-176m-312 352l312-176l-312-176" horiz-adv-x="1000" />
+<glyph glyph-name="info" unicode="&#xe822;" d="m500 725c-207 0-375-168-375-375s168-375 375-375s375 168 375 375s-168 375-375 375z m63-625h-125v313h125v-313z m-63 375c-34 0-62 28-62 63c0 34 28 62 62 62s63-28 63-62c0-35-28-63-63-63z" horiz-adv-x="1000" />
+<glyph glyph-name="left-nav" unicode="&#xe823;" d="m663-84l83 81l-372 354l372 354l-83 81l-455-435l455-435z" horiz-adv-x="1000" />
+<glyph glyph-name="more-vertical" unicode="&#xe824;" d="m500 163c52 0 94-42 94-94c0-52-42-94-94-94s-94 42-94 94c0 52 42 94 94 94z m-94 468c0-51 42-93 94-93s94 42 94 93s-42 94-94 94s-94-42-94-94z m0-281c0-52 42-94 94-94s94 42 94 94s-42 94-94 94s-94-42-94-94z" horiz-adv-x="1000" />
+<glyph glyph-name="more" unicode="&#xe825;" d="m313 350c0-52-42-94-94-94s-94 42-94 94s42 94 94 94s94-42 94-94z m468 94c-52 0-93-42-93-94s41-94 93-94s94 42 94 94s-42 94-94 94z m-281 0c-52 0-94-42-94-94c0-52 42-94 94-94s94 42 94 94c0 52-42 94-94 94z" horiz-adv-x="1000" />
+<glyph glyph-name="pause" unicode="&#xe826;" d="m438 37h-188v625h188v-625z m312 1h-187v625h187v-625z" horiz-adv-x="1000" />
+<glyph glyph-name="person" unicode="&#xe827;" d="m501 847c-275 0-497-222-497-497s222-496 497-496s496 222 496 496s-222 497-496 497z m315-801c-25 11-53 26-79 28c-149 12-152 43-152 106c0 47 30 8 52 118c8 36 15 29 36 95c13 47-12 41-12 41s8 35 12 72c10 96-32 187-175 187c-64 0-94-27-133-57c-41-32-55-76-44-130c7-39 21-77 12-72c0 0-22 6-12-41c21-59 32-59 38-95c18-107 47-70 53-118c6-63-7-94-148-106c-25-2-55-16-79-27c-76 79-123 186-123 303c0 242 197 439 439 439s438-197 438-439c0-118-47-226-123-304z" horiz-adv-x="1000" />
+<glyph glyph-name="play" unicode="&#xe828;" d="m250 663l567-313l-567-312" horiz-adv-x="1000" />
+<glyph glyph-name="plus" unicode="&#xe829;" d="m469 725v-750h61l1 750l-62 0l0 0z m406-344h-750v-61l750-1l0 62l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="right-nav" unicode="&#xe82a;" d="m291 786l-83-81l372-354l-372-354l83-81l455 435l-455 435z" horiz-adv-x="1000" />
+<glyph glyph-name="share" unicode="&#xe82c;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-406 197v-572h62v572l115-112l42 40l-188 187l-187-187l41-41l115 113z" horiz-adv-x="1000" />
+<glyph glyph-name="stop" unicode="&#xe82f;" d="m812 37h-625v625h625v-625z" horiz-adv-x="1000" />
+<glyph glyph-name="trash" unicode="&#xe830;" d="m875 725h-250c0 22 0 50 0 62c0 18-15 34-34 34h-182c-19 0-34-16-34-34c0-14 0-41 0-62h-250v-63h69l57-715c0-19 16-34 34-34h432c19 0 34 15 34 34l58 715h66v63z m-459 33c0 14 11 25 24 25h120c13 0 24-11 24-25c0-6 0-20 0-33h-168c0 12 0 26 0 33z m287-757c0-15-11-26-26-26h-355c-14 0-25 11-25 26l-42 661h490l-42-661z m-273 37h-47l-39 562l46 0l40-562z m187 0l-46 0l39 562l47 0l-40-562z m-94 0h-47v562h47v-562z" horiz-adv-x="1000" />
+<glyph glyph-name="up-nav" unicode="&#xe832;" d="m65 146l81-83l354 372l353-372l81 83l-434 456l-435-456z" horiz-adv-x="1000" />
+<glyph glyph-name="star-filled" unicode="&#xe82e;" d="m500 812l116-354l371 0l-300-218l115-353l-301 218l-300-218l114 353l-300 218l371 0l114 354z" horiz-adv-x="1000" />
+<glyph glyph-name="star" unicode="&#xe82d;" d="m987 458l-372 0l-115 354l-114-354l-371 0l301-218l-115-353l301 218l299-218l-115 353l301 218z m-252-478l-234 174l-234-174l99 274l-252 171l295 0l92 290l91-290l296 0l-253-175l100-270z" horiz-adv-x="1000" />
+<glyph glyph-name="and-search" unicode="&#xe807;" d="m928 51l-167 167c-17 17-47 15-66-4l-3-3l-69 69c42 54 67 121 67 194c0 173-140 313-314 313s-313-140-313-313s140-314 313-314c71 0 137 24 190 64l69-70c-18-19-19-48-2-65l166-166c17-17 47-16 66 4l59 58c19 19 21 49 4 66z m-801 423c0 137 112 249 249 249s249-112 249-249s-111-249-249-249s-249 111-249 249z" horiz-adv-x="1000" />
+<glyph glyph-name="search" unicode="&#xe82b;" d="m935-10l-279 279c39 54 62 120 62 191c0 181-147 328-328 328s-327-147-327-328s147-327 327-327c71 0 136 22 190 61l279-280l76 76z m-808 470c0 146 118 263 263 263s264-117 264-263s-118-263-264-263s-263 118-263 263z" horiz-adv-x="1000" />
+<glyph glyph-name="home" unicode="&#xe821;" d="m939 350l-438 438l0 0l0 0l-438-438l48-47l54 54v-444h16h51h168h47h109h46h168h55h12v444l54-54l48 47z m-501-370v245h125v-245h-125z m332 444v-444h-161v291h-16h-30h-125h-34h-12v-291h-160v444h0l269 269l269-269h0z" horiz-adv-x="1000" />
+<glyph glyph-name="compose" unicode="&#xe81c;" d="m890 651l-405-404l-110-22l22 110l404 405l17-17l-405-404l56-56l404 405l17-17z m15 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20m-4-272v-445h-625v625h440l63 62h-566v-750h750v570l-62-62z" horiz-adv-x="1000" />
+<glyph glyph-name="close" unicode="&#xe81a;" d="m213 593l530-530l43 44l-529 530l-44-44l0 0z m530 44l-530-530l43-44l531 530l-44 44l0 0z" horiz-adv-x="1000" />
+</font>
+</defs>
+</svg> \ No newline at end of file
diff --git a/docs/dist/ratchicons/ratchicons.ttf b/docs/dist/ratchicons/ratchicons.ttf
new file mode 100644
index 0000000..5bddc91
--- /dev/null
+++ b/docs/dist/ratchicons/ratchicons.ttf
Binary files differ
diff --git a/docs/dist/ratchicons/ratchicons.woff b/docs/dist/ratchicons/ratchicons.woff
new file mode 100644
index 0000000..095ef1e
--- /dev/null
+++ b/docs/dist/ratchicons/ratchicons.woff
Binary files differ
diff --git a/examples/app-android-notes/css/app.css b/docs/examples/app-android-notes/css/app.css
index a003cb3..a003cb3 100644
--- a/examples/app-android-notes/css/app.css
+++ b/docs/examples/app-android-notes/css/app.css
diff --git a/examples/app-android-notes/index.html b/docs/examples/app-android-notes/index.html
index 343e9f5..343e9f5 100644
--- a/examples/app-android-notes/index.html
+++ b/docs/examples/app-android-notes/index.html
diff --git a/examples/app-movies/choose-theater.html b/docs/examples/app-movies/choose-theater.html
index 4371076..4371076 100644
--- a/examples/app-movies/choose-theater.html
+++ b/docs/examples/app-movies/choose-theater.html
diff --git a/examples/app-movies/css/app.css b/docs/examples/app-movies/css/app.css
index a003cb3..a003cb3 100644
--- a/examples/app-movies/css/app.css
+++ b/docs/examples/app-movies/css/app.css
diff --git a/examples/app-movies/img/argo.png b/docs/examples/app-movies/img/argo.png
index 743b3e7..743b3e7 100644
--- a/examples/app-movies/img/argo.png
+++ b/docs/examples/app-movies/img/argo.png
Binary files differ
diff --git a/examples/app-movies/img/ralph.png b/docs/examples/app-movies/img/ralph.png
index 34707de..34707de 100644
--- a/examples/app-movies/img/ralph.png
+++ b/docs/examples/app-movies/img/ralph.png
Binary files differ
diff --git a/examples/app-movies/img/skyfall.png b/docs/examples/app-movies/img/skyfall.png
index 0527e19..0527e19 100644
--- a/examples/app-movies/img/skyfall.png
+++ b/docs/examples/app-movies/img/skyfall.png
Binary files differ
diff --git a/examples/app-movies/index.html b/docs/examples/app-movies/index.html
index b9dc2cc..b9dc2cc 100644
--- a/examples/app-movies/index.html
+++ b/docs/examples/app-movies/index.html
diff --git a/getting-started.html b/docs/getting-started.html
index 7f944dd..b7e71b0 100644
--- a/getting-started.html
+++ b/docs/getting-started.html
@@ -1,7 +1,6 @@
---
layout: default
-title: Ratchet ~ Getting Started
-base_url: "../"
+title: Ratchet &middot; Getting Started
---
<!-- Getting started -->
diff --git a/index.html b/docs/index.html
index 9ffe711..478c1a1 100644
--- a/index.html
+++ b/docs/index.html
@@ -1,7 +1,6 @@
---
layout: home
title: Ratchet
-base_url: "./"
---
<div class="docs-header">
diff --git a/one.html b/docs/one.html
index ff13d4e..ff13d4e 100644
--- a/one.html
+++ b/docs/one.html
diff --git a/two.html b/docs/two.html
index 746828d..746828d 100644
--- a/two.html
+++ b/docs/two.html
diff --git a/lib/js/modals.js b/js/modals.js
index 2b1b725..2b1b725 100644
--- a/lib/js/modals.js
+++ b/js/modals.js
diff --git a/lib/js/popovers.js b/js/popovers.js
index b62a483..b62a483 100644
--- a/lib/js/popovers.js
+++ b/js/popovers.js
diff --git a/lib/js/push.js b/js/push.js
index b044a52..b044a52 100644
--- a/lib/js/push.js
+++ b/js/push.js
diff --git a/lib/js/segmented-controllers.js b/js/segmented-controllers.js
index f4a3468..f4a3468 100644
--- a/lib/js/segmented-controllers.js
+++ b/js/segmented-controllers.js
diff --git a/lib/js/sliders.js b/js/sliders.js
index b87931e..b87931e 100644
--- a/lib/js/sliders.js
+++ b/js/sliders.js
diff --git a/lib/js/toggles.js b/js/toggles.js
index 16f8db4..16f8db4 100644
--- a/lib/js/toggles.js
+++ b/js/toggles.js
diff --git a/lib/sass/badges.scss b/sass/badges.scss
index 31f0a43..31f0a43 100644
--- a/lib/sass/badges.scss
+++ b/sass/badges.scss
diff --git a/lib/sass/bars.scss b/sass/bars.scss
index db1d58e..db1d58e 100644
--- a/lib/sass/bars.scss
+++ b/sass/bars.scss
diff --git a/lib/sass/base.scss b/sass/base.scss
index 1d54e97..1d54e97 100644
--- a/lib/sass/base.scss
+++ b/sass/base.scss
diff --git a/lib/sass/buttons.scss b/sass/buttons.scss
index 1fb50f3..1fb50f3 100644
--- a/lib/sass/buttons.scss
+++ b/sass/buttons.scss
diff --git a/lib/sass/cards.scss b/sass/cards.scss
index 882216e..882216e 100644
--- a/lib/sass/cards.scss
+++ b/sass/cards.scss
diff --git a/lib/sass/docs.scss b/sass/docs.scss
index 7987378..7987378 100644
--- a/lib/sass/docs.scss
+++ b/sass/docs.scss
diff --git a/lib/sass/forms.scss b/sass/forms.scss
index a1e1812..a1e1812 100644
--- a/lib/sass/forms.scss
+++ b/sass/forms.scss
diff --git a/lib/sass/mixins.scss b/sass/mixins.scss
index 441bbe1..441bbe1 100644
--- a/lib/sass/mixins.scss
+++ b/sass/mixins.scss
diff --git a/lib/sass/modals.scss b/sass/modals.scss
index 5951e45..5951e45 100644
--- a/lib/sass/modals.scss
+++ b/sass/modals.scss
diff --git a/lib/sass/normalize.scss b/sass/normalize.scss
index e512a8c..e512a8c 100644
--- a/lib/sass/normalize.scss
+++ b/sass/normalize.scss
diff --git a/lib/sass/popovers.scss b/sass/popovers.scss
index e6daade..e6daade 100644
--- a/lib/sass/popovers.scss
+++ b/sass/popovers.scss
diff --git a/lib/sass/push.scss b/sass/push.scss
index bc6da86..bc6da86 100644
--- a/lib/sass/push.scss
+++ b/sass/push.scss
diff --git a/lib/sass/ratchet.scss b/sass/ratchet.scss
index 806f6d0..806f6d0 100644
--- a/lib/sass/ratchet.scss
+++ b/sass/ratchet.scss
diff --git a/lib/sass/ratchicons.scss b/sass/ratchicons.scss
index f43cc4f..f43cc4f 100644
--- a/lib/sass/ratchicons.scss
+++ b/sass/ratchicons.scss
diff --git a/lib/sass/segmented-controls.scss b/sass/segmented-controls.scss
index ed6143c..ed6143c 100644
--- a/lib/sass/segmented-controls.scss
+++ b/sass/segmented-controls.scss
diff --git a/lib/sass/sliders.scss b/sass/sliders.scss
index e77cddd..e77cddd 100644
--- a/lib/sass/sliders.scss
+++ b/sass/sliders.scss
diff --git a/lib/sass/table-views.scss b/sass/table-views.scss
index 40f58be..40f58be 100644
--- a/lib/sass/table-views.scss
+++ b/sass/table-views.scss
diff --git a/lib/sass/theme-android.scss b/sass/theme-android.scss
index 0302253..0302253 100644
--- a/lib/sass/theme-android.scss
+++ b/sass/theme-android.scss
diff --git a/lib/sass/theme-ios.scss b/sass/theme-ios.scss
index ac3de5b..ac3de5b 100644
--- a/lib/sass/theme-ios.scss
+++ b/sass/theme-ios.scss
diff --git a/lib/sass/toggles.scss b/sass/toggles.scss
index c87a528..c87a528 100644
--- a/lib/sass/toggles.scss
+++ b/sass/toggles.scss
diff --git a/lib/sass/type.scss b/sass/type.scss
index ee62ebc..ee62ebc 100644
--- a/lib/sass/type.scss
+++ b/sass/type.scss
diff --git a/lib/sass/variables.scss b/sass/variables.scss
index 482a040..482a040 100644
--- a/lib/sass/variables.scss
+++ b/sass/variables.scss