mirror of https://github.com/twbs/ratchet.git
connors
11 years ago
70 changed files with 3339 additions and 145 deletions
@ -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); |
||||
} |
||||
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 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); |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -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; |
||||
}); |
||||
|
||||
}(); |
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 257 KiB After Width: | Height: | Size: 257 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 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"> |
||||
Loading…
Reference in new issue