reorganizing the docs
34
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'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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>
|
До Ширина: | Высота: | Размер: 100 KiB После Ширина: | Высота: | Размер: 100 KiB |
До Ширина: | Высота: | Размер: 15 KiB После Ширина: | Высота: | Размер: 15 KiB |
До Ширина: | Высота: | Размер: 5.2 KiB После Ширина: | Высота: | Размер: 5.2 KiB |
До Ширина: | Высота: | Размер: 7.2 KiB После Ширина: | Высота: | Размер: 7.2 KiB |
До Ширина: | Высота: | Размер: 67 KiB После Ширина: | Высота: | Размер: 67 KiB |
До Ширина: | Высота: | Размер: 94 KiB После Ширина: | Высота: | Размер: 94 KiB |
До Ширина: | Высота: | Размер: 48 KiB После Ширина: | Высота: | Размер: 48 KiB |
До Ширина: | Высота: | Размер: 48 KiB После Ширина: | Высота: | Размер: 48 KiB |
До Ширина: | Высота: | Размер: 45 KiB После Ширина: | Высота: | Размер: 45 KiB |
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
layout: default
|
||||
title: Components · Ratchet
|
||||
base_url: "../"
|
||||
---
|
||||
|
||||
<div class="docs-header">
|
|
@ -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';
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
});
|
||||
|
||||
}();
|
|
@ -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="" d="m313 225l375 0v376" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="user" unicode="" 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="" d="m875 38h-750v62h750v-62z m-312 375v250h-125v-250h-125l187-250l188 250h-125z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="and-left" unicode="" d="m306 349l325 373l67-59l-273-314l273-315l-67-59l-325 373l0 1z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="and-more-vertical" unicode="" d="m406-25v188h188v-188h-188z m0 563h188v188h-188v-188z m188-281v188h-188v-188h188z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="and-more" unicode="" d="m125 444h188v-187h-188v187z m563 0v-187h187v187h-187z m-281-187h187v187h-187v-187z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="and-right" unicode="" d="m698 348l-325-373l-67 59l274 315l-274 314l68 59l324-373l0-1z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="and-share" unicode="" 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="" d="m500 548l374-325l-59-67l-315 273l-314-273l-59 67l373 325l0 0z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="back" unicode="" d="m500 174l-313 176l313 176m312-352l-312 176l312 176" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="down" unicode="" d="m941 479l-124 127l-317-315l-318 315l-124-127l442-441l441 441z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="gear" unicode="" 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="" d="m628-91l127 123l-314 318l314 318l-127 124l-441-442l441-441z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="list" unicode="" 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="" 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="" 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="" d="m372 792l-127-124l314-318l-314-318l127-123l441 441l-441 442z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="sound" unicode="" 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="" 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="" 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="" 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="" d="m58 222l124-126l318 314l317-314l124 126l-441 441l-442-441z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="bars" unicode="" 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="" d="m438 475h-125l187-250l188 250h-125" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="check" unicode="" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="and-down" unicode="" d="m500 156l-373 325l59 67l314-273l315 273l59-67l-374-325l0 0z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="code" unicode="" 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="" d="m934 537l-81 83l-354-372l-353 372l-81-83l435-455l434 455z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="download" unicode="" 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="" 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="" d="m500 526l313-176l-313-176m-312 352l312-176l-312-176" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="info" unicode="" 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="" d="m663-84l83 81l-372 354l372 354l-83 81l-455-435l455-435z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="more-vertical" unicode="" 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="" 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="" d="m438 37h-188v625h188v-625z m312 1h-187v625h187v-625z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="person" unicode="" 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="" d="m250 663l567-313l-567-312" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="plus" unicode="" 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="" d="m291 786l-83-81l372-354l-372-354l83-81l455 435l-455 435z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="share" unicode="" 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="" d="m812 37h-625v625h625v-625z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="trash" unicode="" 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="" d="m65 146l81-83l354 372l353-372l81 83l-434 456l-435-456z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="star-filled" unicode="" 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="" 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="" 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="" 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="" 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="" 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="" 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>
|
После Ширина: | Высота: | Размер: 12 KiB |
До Ширина: | Высота: | Размер: 257 KiB После Ширина: | Высота: | Размер: 257 KiB |
До Ширина: | Высота: | Размер: 49 KiB После Ширина: | Высота: | Размер: 49 KiB |
До Ширина: | Высота: | Размер: 30 KiB После Ширина: | Высота: | Размер: 30 KiB |
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
layout: default
|
||||
title: Ratchet ~ Getting Started
|
||||
base_url: "../"
|
||||
title: Ratchet · Getting Started
|
||||
---
|
||||
|
||||
<!-- Getting started -->
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
layout: home
|
||||
title: Ratchet
|
||||
base_url: "./"
|
||||
---
|
||||
|
||||
<div class="docs-header">
|