mirror of https://github.com/twbs/ratchet.git
connors
11 years ago
44 changed files with 0 additions and 8557 deletions
@ -1,61 +0,0 @@
|
||||
.hll { background-color: #ffffcc } |
||||
.c { color: #999988; font-style: italic } /* Comment */ |
||||
.err { color: #a61717; background-color: #e3d2d2 } /* Error */ |
||||
.k { color: #000000; font-weight: bold } /* Keyword */ |
||||
.o { color: #000000; font-weight: bold } /* Operator */ |
||||
.cm { color: #999988; font-style: italic } /* Comment.Multiline */ |
||||
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ |
||||
.c1 { color: #999988; font-style: italic } /* Comment.Single */ |
||||
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ |
||||
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ |
||||
.ge { color: #000000; font-style: italic } /* Generic.Emph */ |
||||
.gr { color: #aa0000 } /* Generic.Error */ |
||||
.gh { color: #999999 } /* Generic.Heading */ |
||||
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ |
||||
.go { color: #888888 } /* Generic.Output */ |
||||
.gp { color: #555555 } /* Generic.Prompt */ |
||||
.gs { font-weight: bold } /* Generic.Strong */ |
||||
.gu { color: #aaaaaa } /* Generic.Subheading */ |
||||
.gt { color: #aa0000 } /* Generic.Traceback */ |
||||
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */ |
||||
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ |
||||
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ |
||||
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ |
||||
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ |
||||
.kt { color: #445588; font-weight: bold } /* Keyword.Type */ |
||||
.m { color: #009999 } /* Literal.Number */ |
||||
.s { color: #d01040 } /* Literal.String */ |
||||
.na { color: #008080 } /* Name.Attribute */ |
||||
.nb { color: #0086B3 } /* Name.Builtin */ |
||||
.nc { color: #445588; font-weight: bold } /* Name.Class */ |
||||
.no { color: #008080 } /* Name.Constant */ |
||||
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ |
||||
.ni { color: #800080 } /* Name.Entity */ |
||||
.ne { color: #990000; font-weight: bold } /* Name.Exception */ |
||||
.nf { color: #990000; font-weight: bold } /* Name.Function */ |
||||
.nl { color: #990000; font-weight: bold } /* Name.Label */ |
||||
.nn { color: #555555 } /* Name.Namespace */ |
||||
.nt { color: #000080 } /* Name.Tag */ |
||||
.nv { color: #008080 } /* Name.Variable */ |
||||
.ow { color: #000000; font-weight: bold } /* Operator.Word */ |
||||
.w { color: #bbbbbb } /* Text.Whitespace */ |
||||
.mf { color: #009999 } /* Literal.Number.Float */ |
||||
.mh { color: #009999 } /* Literal.Number.Hex */ |
||||
.mi { color: #009999 } /* Literal.Number.Integer */ |
||||
.mo { color: #009999 } /* Literal.Number.Oct */ |
||||
.sb { color: #d01040 } /* Literal.String.Backtick */ |
||||
.sc { color: #d01040 } /* Literal.String.Char */ |
||||
.sd { color: #d01040 } /* Literal.String.Doc */ |
||||
.s2 { color: #d01040 } /* Literal.String.Double */ |
||||
.se { color: #d01040 } /* Literal.String.Escape */ |
||||
.sh { color: #d01040 } /* Literal.String.Heredoc */ |
||||
.si { color: #d01040 } /* Literal.String.Interpol */ |
||||
.sx { color: #d01040 } /* Literal.String.Other */ |
||||
.sr { color: #009926 } /* Literal.String.Regex */ |
||||
.s1 { color: #d01040 } /* Literal.String.Single */ |
||||
.ss { color: #990073 } /* Literal.String.Symbol */ |
||||
.bp { color: #999999 } /* Name.Builtin.Pseudo */ |
||||
.vc { color: #008080 } /* Name.Variable.Class */ |
||||
.vg { color: #008080 } /* Name.Variable.Global */ |
||||
.vi { color: #008080 } /* Name.Variable.Instance */ |
||||
.il { color: #009999 } /* Literal.Number.Integer.Long */ |
||||
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 266 KiB |
|
Before Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 221 KiB |
|
Before Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 1.4 MiB |
@ -1,172 +0,0 @@
|
||||
$(function() { |
||||
|
||||
var doc; |
||||
var device; |
||||
var platformToggle; |
||||
var windowWidth; |
||||
var windowHeight; |
||||
var pageHeight; |
||||
var contentPadding; |
||||
var footerHeight; |
||||
var navComponentLinks; |
||||
var componentsList; |
||||
var contentSection; |
||||
var currentActive; |
||||
var topCache; |
||||
var eventListeners; |
||||
var toolbarToggle; |
||||
var toggleTop; |
||||
var toggleHeight; |
||||
|
||||
|
||||
var initialize = function () { |
||||
currentActive = 0; |
||||
topCache = []; |
||||
win = $(window); |
||||
doc = $(document); |
||||
bod = $(document.body) |
||||
device = device || $('.js-device'); |
||||
navComponentLinks = $('.js-jump-menu'); |
||||
componentsList = $('.js-component-group'); |
||||
componentLinks = $('.component-example a'); |
||||
contentSection = $('.component'); |
||||
topCache = contentSection.map(function () { return $(this).offset().top }) |
||||
windowHeight = $(window).height() / 3 |
||||
windowWidth = $(window).width(); |
||||
pageHeight = $(document).height(); |
||||
contentPadding = parseInt($('.docs-content').css('padding-bottom')); |
||||
footerHeight = $('.docs-footer').outerHeight(false); |
||||
toolbarToggle = $('.js-docs-component-toolbar'); |
||||
|
||||
// Device placement
|
||||
if (windowWidth >= 768) { |
||||
device.initialLeft = device.offset().left; |
||||
device.initialTop = device.initialTop || device.offset().top; |
||||
device.dockingOffset = ($(window).height() - device.height())/2;
|
||||
} |
||||
|
||||
checkDesktopContent(); |
||||
calculateScroll(); |
||||
calculateToggle(); |
||||
|
||||
if (!eventListeners) addEventListeners(); |
||||
} |
||||
|
||||
var addEventListeners = function () { |
||||
eventListeners = true; |
||||
|
||||
device.on('click', function (e) { |
||||
e.preventDefault(); |
||||
}); |
||||
|
||||
// Mobile navigation
|
||||
$('.js-docs-nav-trigger').on('click', function () { |
||||
var nav = $('.docs-nav-group'); |
||||
var trigger = $('.js-docs-nav-trigger'); |
||||
|
||||
trigger.toggleClass('active'); |
||||
nav.toggleClass('active');
|
||||
}); |
||||
|
||||
navComponentLinks.click(function(e) { |
||||
e.stopPropagation(); |
||||
e.preventDefault(); |
||||
componentsList.toggleClass('active'); |
||||
}) |
||||
|
||||
doc.on('click', function () { |
||||
componentsList.removeClass('active'); |
||||
}) |
||||
|
||||
// Platform switcher
|
||||
$('.platform-switch').on('click', function () { |
||||
var components = $('.docs-components'); |
||||
var platform = $(this).attr('data-platform'); |
||||
|
||||
// Set platform
|
||||
if (components.hasClass('platform-ios')) { |
||||
components.removeClass('platform-ios'); |
||||
components.addClass(platform); |
||||
} else if (components.hasClass('platform-android')) { |
||||
components.removeClass('platform-android'); |
||||
components.addClass(platform); |
||||
} else { |
||||
components.addClass(platform); |
||||
} |
||||
|
||||
// Deal with active states
|
||||
$(this).siblings('.active').removeClass('active'); |
||||
$(this).addClass('active'); |
||||
}); |
||||
|
||||
win.on('scroll', calculateScroll); |
||||
win.on('scroll', calculateToggle); |
||||
} |
||||
|
||||
var checkDesktopContent = function () { |
||||
windowWidth = $(window).width(); |
||||
if (windowWidth <= 768) { |
||||
var content = $('.content') |
||||
if (content.length > 1) { |
||||
$(content[0]).remove() |
||||
} |
||||
} |
||||
} |
||||
|
||||
var calculateScroll = function() { |
||||
// if small screen don't worry about this
|
||||
if (windowWidth <= 768) return |
||||
|
||||
// Save scrollTop value
|
||||
var contentSectionItem; |
||||
var currentTop = win.scrollTop(); |
||||
|
||||
if((device.initialTop - currentTop) <= device.dockingOffset) { |
||||
device[0].className = "device device-fixed"; |
||||
device.css({top: device.dockingOffset}) |
||||
} else { |
||||
device[0].className = "device" |
||||
device[0].setAttribute('style','') |
||||
} |
||||
|
||||
// Injection of components into device
|
||||
for (var l = contentSection.length; l--;) { |
||||
if ((topCache[l] - currentTop) < windowHeight) { |
||||
if (currentActive == l) return; |
||||
currentActive = l; |
||||
bod.find('.component.active').removeClass('active'); |
||||
contentSectionItem = $(contentSection[l]) |
||||
contentSectionItem.addClass('active') |
||||
if(contentSectionItem.attr('id')) { |
||||
device.attr("id", contentSectionItem.attr('id') + "InDevice"); |
||||
} else { |
||||
device.attr("id", "") |
||||
} |
||||
if (!contentSectionItem.hasClass('informational')) { |
||||
updateContent(contentSectionItem.find('.highlight .html').text()) |
||||
} |
||||
break |
||||
} |
||||
} |
||||
|
||||
function updateContent(content) { |
||||
$('#iwindow').html(content); |
||||
} |
||||
} |
||||
|
||||
// Toolbar toggle
|
||||
var calculateToggle = function () { |
||||
var currentTop = win.scrollTop(); |
||||
var headerHeight = $('.docs-sub-header').outerHeight(); |
||||
|
||||
if(currentTop >= headerHeight) { |
||||
toolbarToggle.addClass('visible'); |
||||
} else if (currentTop <= headerHeight) { |
||||
toolbarToggle.removeClass('visible'); |
||||
componentsList.removeClass('active'); |
||||
} |
||||
} |
||||
|
||||
$(window).on('load resize', initialize); |
||||
$(window).on('load', function () { new FingerBlast('.device-content'); }); |
||||
}); |
||||
@ -1,221 +0,0 @@
|
||||
// FINGERBLAST.js
|
||||
// --------------
|
||||
// Adapted from phantom limb by brian cartensen
|
||||
|
||||
function FingerBlast(element) { |
||||
this.element = typeof element == 'string' ? document.querySelector(element) : element; |
||||
this.listen(); |
||||
} |
||||
|
||||
FingerBlast.prototype = { |
||||
x: NaN, |
||||
y: NaN, |
||||
|
||||
startDistance: NaN, |
||||
startAngle: NaN, |
||||
|
||||
mouseIsDown: false, |
||||
|
||||
listen: function () { |
||||
|
||||
var activate = this.activate.bind(this); |
||||
var deactivate = this.deactivate.bind(this); |
||||
|
||||
function contains (element, ancestor) { |
||||
var descendants, index, descendant; |
||||
if ("compareDocumentPosition" in ancestor) { |
||||
return !!(ancestor.compareDocumentPosition(element) & 16); |
||||
} else if ("contains" in ancestor) { |
||||
return ancestor != element && ancestor.contains(element); |
||||
} else { |
||||
for (descendants = ancestor.getElementsByTagName("*"), index = 0; descendant = descendants[index++];) { |
||||
if (descendant == element) return true; |
||||
} |
||||
return false; |
||||
} |
||||
} |
||||
|
||||
this.element.addEventListener('mouseover', function (e) { |
||||
var target = e.relatedTarget; |
||||
if (target != this && !contains(target, this)) activate(); |
||||
}); |
||||
|
||||
this.element.addEventListener("mouseout", function (e) { |
||||
var target = e.relatedTarget; |
||||
if (target != this && !contains(target, this)) deactivate(e); |
||||
}); |
||||
}, |
||||
|
||||
activate: function () { |
||||
if (this.active) return; |
||||
this.element.addEventListener('mousedown', (this.touchStart = this.touchStart.bind(this)), true); |
||||
this.element.addEventListener('mousemove', (this.touchMove = this.touchMove.bind(this)), true); |
||||
this.element.addEventListener('mouseup', (this.touchEnd = this.touchEnd.bind(this)), true); |
||||
this.element.addEventListener('click', (this.click = this.click.bind(this)), true); |
||||
this.active = true; |
||||
}, |
||||
|
||||
deactivate: function (e) { |
||||
this.active = false; |
||||
if (this.mouseIsDown) this.touchEnd(e); |
||||
this.element.removeEventListener('mousedown', this.touchStart, true); |
||||
this.element.removeEventListener('mousemove', this.touchMove, true); |
||||
this.element.removeEventListener('mouseup', this.touchEnd, true); |
||||
this.element.removeEventListener('click', this.click, true); |
||||
}, |
||||
|
||||
click: function (e) { |
||||
if (e.synthetic) return; |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
}, |
||||
|
||||
touchStart: function (e) { |
||||
if (e.synthetic || /input|textarea/.test(e.target.tagName.toLowerCase())) return; |
||||
|
||||
this.mouseIsDown = true; |
||||
|
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
this.fireTouchEvents('touchstart', e); |
||||
}, |
||||
|
||||
touchMove: function (e) { |
||||
if (e.synthetic) return; |
||||
|
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
this.move(e.clientX, e.clientY); |
||||
|
||||
if (this.mouseIsDown) this.fireTouchEvents('touchmove', e); |
||||
}, |
||||
|
||||
touchEnd: function (e) { |
||||
if (e.synthetic) return; |
||||
|
||||
this.mouseIsDown = false; |
||||
|
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
this.fireTouchEvents('touchend', e); |
||||
|
||||
if (!this.target) return; |
||||
|
||||
// Mobile Safari moves all the mouse events to fire after the touchend event.
|
||||
this.target.dispatchEvent(this.createMouseEvent('mouseover', e)); |
||||
this.target.dispatchEvent(this.createMouseEvent('mousemove', e)); |
||||
this.target.dispatchEvent(this.createMouseEvent('mousedown', e)); |
||||
}, |
||||
|
||||
fireTouchEvents: function (eventName, originalEvent) { |
||||
var events = []; |
||||
var gestures = []; |
||||
|
||||
if (!this.target) return; |
||||
|
||||
// Convert "ontouch*" properties and attributes to listeners.
|
||||
var onEventName = 'on' + eventName; |
||||
|
||||
if (onEventName in this.target) { |
||||
console.warn('Converting `' + onEventName + '` property to event listener.', this.target); |
||||
this.target.addEventListener(eventName, this.target[onEventName], false); |
||||
delete this.target[onEventName]; |
||||
} |
||||
|
||||
if (this.target.hasAttribute(onEventName)) { |
||||
console.warn('Converting `' + onEventName + '` attribute to event listener.', this.target); |
||||
var handler = new GLOBAL.Function('event', this.target.getAttribute(onEventName)); |
||||
this.target.addEventListener(eventName, handler, false); |
||||
this.target.removeAttribute(onEventName); |
||||
} |
||||
|
||||
// Set up a new event with the coordinates of the finger.
|
||||
var touch = this.createMouseEvent(eventName, originalEvent); |
||||
|
||||
events.push(touch); |
||||
|
||||
// Figure out scale and rotation.
|
||||
if (events.length > 1) { |
||||
var x = events[0].pageX - events[1].pageX; |
||||
var y = events[0].pageY - events[1].pageY; |
||||
|
||||
var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); |
||||
var angle = Math.atan2(x, y) * (180 / Math.PI); |
||||
|
||||
var gestureName = 'gesturechange'; |
||||
|
||||
if (eventName === 'touchstart') { |
||||
gestureName = 'gesturestart'; |
||||
this.startDistance = distance; |
||||
this.startAngle = angle; |
||||
} |
||||
|
||||
if (eventName === 'touchend') gestureName = 'gestureend'; |
||||
|
||||
events.forEach(function(event) { |
||||
var gesture = this.createMouseEvent.call(event._finger, gestureName, event); |
||||
gestures.push(gesture); |
||||
}.bind(this)); |
||||
|
||||
events.concat(gestures).forEach(function(event) { |
||||
event.scale = distance / this.startDistance; |
||||
event.rotation = this.startAngle - angle; |
||||
}); |
||||
} |
||||
|
||||
// Loop through the events array and fill in each touch array.
|
||||
events.forEach(function(touch) { |
||||
touch.touches = events.filter(function(e) { |
||||
return ~e.type.indexOf('touch') && e.type !== 'touchend'; |
||||
}); |
||||
|
||||
touch.changedTouches = events.filter(function(e) { |
||||
return ~e.type.indexOf('touch') && e._finger.target === touch._finger.target; |
||||
}); |
||||
|
||||
touch.targetTouches = touch.changedTouches.filter(function(e) { |
||||
return ~e.type.indexOf('touch') && e.type !== 'touchend'; |
||||
}); |
||||
}); |
||||
|
||||
// Then fire the events.
|
||||
events.concat(gestures).forEach(function(event, i) { |
||||
event.identifier = i; |
||||
event._finger.target.dispatchEvent(event); |
||||
}); |
||||
}, |
||||
|
||||
createMouseEvent: function (eventName, originalEvent) { |
||||
var e = document.createEvent('MouseEvent'); |
||||
|
||||
e.initMouseEvent(eventName, true, true, |
||||
originalEvent.view, originalEvent.detail, |
||||
this.x || originalEvent.screenX, this.y || originalEvent.screenY, |
||||
this.x || originalEvent.clientX, this.y || originalEvent.clientY, |
||||
originalEvent.ctrlKey, originalEvent.shiftKey, |
||||
originalEvent.altKey, originalEvent.metaKey, |
||||
originalEvent.button, this.target || originalEvent.relatedTarget |
||||
); |
||||
|
||||
e.synthetic = true; |
||||
e._finger = this; |
||||
|
||||
return e; |
||||
}, |
||||
|
||||
move: function (x, y) { |
||||
if (isNaN(x) || isNaN(y)) { |
||||
this.target = null; |
||||
} else { |
||||
this.x = x; |
||||
this.y = y; |
||||
|
||||
if (!this.mouseIsDown) { |
||||
this.target = document.elementFromPoint(x, y); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
@ -1,578 +0,0 @@
|
||||
/* |
||||
* ===================================================== |
||||
* Ratchet v2.0.0 |
||||
* Copyright 2014 Connor Sears |
||||
* Licensed under http://www.opensource.org/licenses/MIT |
||||
* |
||||
* V2.0.0 designed by @connors. |
||||
* ===================================================== |
||||
*/ |
||||
|
||||
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; |
||||
-webkit-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); |
||||
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; |
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); |
||||
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; |
||||
-webkit-box-shadow: none; |
||||
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; |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
} |
||||
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { |
||||
color: #fff; |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.btn-link { |
||||
color: #33b5e5; |
||||
background-color: transparent; |
||||
border: none; |
||||
-webkit-box-shadow: none; |
||||
box-shadow: none; |
||||
} |
||||
.btn-link:active, .btn-link.active { |
||||
color: #1a9bcb; |
||||
background-color: transparent; |
||||
-webkit-box-shadow: none; |
||||
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; |
||||
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07); |
||||
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 .bar-footer, |
||||
.bar .bar-footer-secondary, |
||||
.bar .bar-footer-secondary-tab { |
||||
border-bottom: 0; |
||||
border-top: 1px solid #b1b1b1; |
||||
-webkit-box-shadow: inset 0 -2px 0 #33b5e5; |
||||
box-shadow: inset 0 -2px 0 #33b5e5; |
||||
} |
||||
|
||||
.bar-tab { |
||||
top: 0; |
||||
bottom: auto; |
||||
height: 50px; |
||||
border-top: 0; |
||||
} |
||||
.bar-tab .tab-item { |
||||
color: #929292; |
||||
} |
||||
.bar-tab .tab-item.active { |
||||
color: #33b5e5; |
||||
-webkit-box-shadow: inset 0 -2px 0 #33b5e5; |
||||
box-shadow: inset 0 -2px 0 #33b5e5; |
||||
} |
||||
.bar-tab .tab-item:active { |
||||
color: #929292; |
||||
background-color: #78c6e3; |
||||
} |
||||
.bar-tab .tab-item .icon { |
||||
top: 3px; |
||||
padding-top: 0; |
||||
padding-bottom: 0; |
||||
} |
||||
|
||||
.title { |
||||
position: static; |
||||
padding-left: 15px; |
||||
font-size: 18px; |
||||
line-height: 49px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.bar .btn { |
||||
top: 7px; |
||||
padding-top: 10px; |
||||
padding-bottom: 10px; |
||||
} |
||||
.bar .btn-link { |
||||
top: 0; |
||||
padding: 0; |
||||
color: #33b5e5; |
||||
font-size: 18px; |
||||
line-height: 49px; |
||||
} |
||||
.bar .btn-link:active, .bar .btn-link.active { |
||||
color: #1a9bcb; |
||||
} |
||||
.bar .btn-link .icon { |
||||
top: 2px; |
||||
padding: 0; |
||||
} |
||||
.bar .btn-block { |
||||
top: 4px; |
||||
} |
||||
|
||||
.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); |
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); |
||||
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; |
||||
-webkit-box-shadow: none; |
||||
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; |
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); |
||||
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; |
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); |
||||
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; |
||||
-webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out; |
||||
-moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out; |
||||
transition: transform .1s ease-in-out, opacity .2s ease-in-out; |
||||
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); |
||||
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); |
||||
} |
||||
.popover:before { |
||||
display: none; |
||||
} |
||||
.popover.visible { |
||||
-webkit-transform: scale(1); |
||||
-ms-transform: scale(1); |
||||
transform: scale(1); |
||||
} |
||||
|
||||
.backdrop { |
||||
background-color: none; |
||||
} |
||||
|
||||
.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; |
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1); |
||||
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'; |
||||
} |
||||
@ -1,477 +0,0 @@
|
||||
/* |
||||
* ===================================================== |
||||
* Ratchet v2.0.0 |
||||
* Copyright 2014 Connor Sears |
||||
* Licensed under http://www.opensource.org/licenses/MIT |
||||
* |
||||
* V2.0.0 designed by @connors. |
||||
* ===================================================== |
||||
*/ |
||||
|
||||
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 .bar-footer, |
||||
.bar .bar-footer-secondary, |
||||
.bar .bar-footer-secondary-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); |
||||
} |
||||
|
||||
.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 { |
||||
color: #929292; |
||||
} |
||||
.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 .2s ease-in-out, opacity .2s ease-in-out; |
||||
-moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out; |
||||
transition: transform .2s ease-in-out, opacity .2s ease-in-out; |
||||
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; |
||||
-moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; |
||||
transition: -webkit-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-transition-property: -webkit-transform, border, width; |
||||
-moz-transition-property: -moz-transform, border, width; |
||||
transition-property: transform, border, width; |
||||
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); |
||||
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); |
||||
} |
||||
.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.sliding { |
||||
-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.sliding.sliding-in, .content.sliding.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.sliding.right:not([class*="sliding-in"]) { |
||||
-webkit-animation-direction: reverse; |
||||
-moz-animation-direction: reverse; |
||||
animation-direction: reverse; |
||||
} |
||||
.content.sliding.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); |
||||
} |
||||
} |
||||
@ -1,784 +0,0 @@
|
||||
/* |
||||
* ===================================================== |
||||
* Ratchet v2.0.0 |
||||
* Copyright 2014 Connor Sears |
||||
* Licensed under http://www.opensource.org/licenses/MIT
|
||||
* |
||||
* V2.0.0 designed by @connors. |
||||
* ===================================================== |
||||
*/ |
||||
/* ---------------------------------- |
||||
* MODAL v2.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 v2.0.0 |
||||
* 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 v2.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('sliding'); |
||||
container.classList.add('sliding'); |
||||
} |
||||
|
||||
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('sliding', '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 v2.0.0 |
||||
* 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 v2.0.0 |
||||
* 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 v2.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.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
Binary file not shown.
@ -1,74 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Ratchet template page</title> |
||||
|
||||
<!-- Sets initial viewport load and disables zooming --> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
|
||||
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen --> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<!-- Set a shorter title for iOS6 devices when saved to home screen --> |
||||
<meta name="apple-mobile-web-app-title" content="Ratchet"> |
||||
|
||||
<!-- Set Apple icons for when prototype is saved to home screen --> |
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icons/apple-touch-icon-114x114.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icons/apple-touch-icon-72x72.png"> |
||||
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="touch-icons/apple-touch-icon-57x57.png"> |
||||
|
||||
<!-- Include the compiled Ratchet CSS --> |
||||
<link rel="stylesheet" href="ratchet.css"> |
||||
|
||||
<!-- Include the compiled Ratchet JS --> |
||||
<script src="ratchet.js"></script> |
||||
|
||||
<!-- Intro paragraph styles. Delete once you start using this page --> |
||||
<style type="text/css"> |
||||
.welcome { |
||||
line-height: 1.5; |
||||
color: #555; |
||||
} |
||||
</style> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<!-- Make sure all your bars are the first things in your <body> --> |
||||
<header class="bar bar-nav"> |
||||
<h1 class="title">Ratchet</h1> |
||||
</header> |
||||
|
||||
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --> |
||||
<div class="content"> |
||||
<p class="welcome">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p> |
||||
<div class="card"> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="http://goratchet.com"> |
||||
<strong>Ratchet documentation</strong> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="https://goratchet.com"> |
||||
<strong>Ratchet on Github</strong> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet"> |
||||
<strong>Ratchet Google group</strong> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="http://www.twitter.com/GoRatchet"> |
||||
<strong>Ratchet on Twitter</strong> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -1,5 +0,0 @@
|
||||
.slider, |
||||
.slider img { |
||||
margin-bottom: 0; |
||||
height: 150px; |
||||
} |
||||
@ -1,140 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Notes</title> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/ratchet.css"> |
||||
<link rel="stylesheet" href="../../dist/ratchet-theme-android.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/ratchet.js"></script> |
||||
|
||||
|
||||
<!-- Roboto --> |
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'> |
||||
</head> |
||||
<body> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-compose pull-right" href="#composeModal"></a> |
||||
<a href="#navPopover"> |
||||
<h1 class="title"> |
||||
<span class="icon icon-home"></span> |
||||
Notes |
||||
<span class="icon icon-caret"></span> |
||||
</h1> |
||||
</a> |
||||
</header> |
||||
|
||||
<div class="content"> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
Note title goes here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<!-- Compose modal --> |
||||
<div id="composeModal" class="modal"> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-left pull-left" href="#composeModal"></a> |
||||
<h1 class="title">New note</h1> |
||||
</header> |
||||
|
||||
<div class="content"> |
||||
<form class="content-padded"> |
||||
<input type="text" placeholder="Title"> |
||||
<textarea rows="10"></textarea> |
||||
<a class="btn btn-positive btn-block" href="#composeModal">Save note</a> |
||||
</form> |
||||
</div> |
||||
</div><!-- /.modal --> |
||||
|
||||
<!-- Popover --> |
||||
<div id="navPopover" class="popover"> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell">New note</li> |
||||
<li class="table-view-cell">Email</li> |
||||
<li class="table-view-cell">Share</li> |
||||
</ul> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -1,12 +0,0 @@
|
||||
.updated-text { |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
padding: 10px 0; |
||||
font-size: 11px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.table-view-cell .icon { |
||||
color: #007aff; |
||||
} |
||||
@ -1,118 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Mail</title> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/ratchet.css"> |
||||
<link rel="stylesheet" href="../../dist/ratchet-theme-ios.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/ratchet.js"></script> |
||||
</head> |
||||
<body> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-left-nav pull-left" href="index.html" data-transition="slide-out"></a> |
||||
<a class="icon icon-refresh pull-right"></a> |
||||
<h1 class="title">All inboxes</h1> |
||||
</header> |
||||
|
||||
<div class="content"> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="#"> |
||||
Email subject line here |
||||
<p>Lorem ipsum dolor sit amet...</p> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div><!-- /.content --> |
||||
</body> |
||||
</html> |
||||
@ -1,98 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Mail</title> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/ratchet.css"> |
||||
<link rel="stylesheet" href="../../dist/ratchet-theme-ios.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/ratchet.js"></script> |
||||
</head> |
||||
<body> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-refresh pull-right"></a> |
||||
<h1 class="title">Mailboxes</h1> |
||||
</header> |
||||
|
||||
<div class="bar bar-footer"> |
||||
<a class="icon icon-compose pull-right" href="#composeModal"></a> |
||||
<small class="updated-text">Updated just now</small> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="inbox.html" data-transition="slide-in"> |
||||
<span class="media-object icon icon-pages pull-left"></span> |
||||
<div class="media-body"> |
||||
All inboxes |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="inbox.html" data-transition="slide-in"> |
||||
<span class="media-object icon icon-person pull-left"></span> |
||||
<div class="media-body"> |
||||
Personal email |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="inbox.html" data-transition="slide-in"> |
||||
<span class="media-object icon icon-star-filled pull-left"></span> |
||||
<div class="media-body"> |
||||
Starred |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="inbox.html" data-transition="slide-in"> |
||||
<span class="media-object icon icon-trash pull-left"></span> |
||||
<div class="media-body"> |
||||
Trash |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<h5 class="content-padded">Other accounts</h5> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="inbox.html" data-transition="slide-in"> |
||||
<span class="media-object icon icon-more pull-left"></span> |
||||
<div class="media-body"> |
||||
Misc |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div><!-- /.content --> |
||||
|
||||
<!-- Compose modal --> |
||||
<div id="composeModal" class="modal"> |
||||
<header class="bar bar-nav"> |
||||
<a class="btn btn-link pull-right" href="#composeModal"> |
||||
<strong>Send</strong> |
||||
</a> |
||||
<a class="btn btn-link pull-left" href="#composeModal"> |
||||
Cancel |
||||
</a> |
||||
<h1 class="title">New message</h1> |
||||
</header> |
||||
|
||||
<div class="content"> |
||||
<form class="input-group"> |
||||
<input type="text" placeholder="To:"> |
||||
<input type="email" placeholder="From:"> |
||||
<input type="text" placeholder="Subject:"> |
||||
<textarea rows="20"></textarea> |
||||
</form> |
||||
</div> |
||||
</div><!-- /.modal --> |
||||
</body> |
||||
</html> |
||||
@ -1,85 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Movie finder</title> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/ratchet.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/ratchet.js"></script> |
||||
</head> |
||||
<body> |
||||
<header class="bar bar-nav"> |
||||
<a class="btn btn-link btn-nav pull-left" href="index.html" data-transition="slide-out"> |
||||
<span class="icon icon-left-nav"></span> |
||||
Back |
||||
</a> |
||||
<h1 class="title">Argo</h1> |
||||
</header> |
||||
|
||||
<div class="bar bar-standard bar-header-secondary"> |
||||
<form> |
||||
<input type="search" placeholder="Search theaters"> |
||||
</form> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell table-view-divider">Theaters nearby</li> |
||||
<li class="table-view-cell"> |
||||
Metreon 16 |
||||
<p>1.3 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
AMC 5 |
||||
<p>3.5 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
Regal 42 |
||||
<p>7.3 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
Shorline theater |
||||
<p>12.5 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
AMC 16 |
||||
<p>12.2 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
BW3 16 |
||||
<p>13.4 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
MC Hammer 16 |
||||
<p>14.1 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
AMC 3 |
||||
<p>14.3 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
AMC 2 |
||||
<p>14.7 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
AMC 10 |
||||
<p>15 miles away</p> |
||||
<a class="btn btn-outlined btn-positive" href="#">Buy Tickets</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -1,8 +0,0 @@
|
||||
.slider, |
||||
.slider img { |
||||
margin-bottom: 0; |
||||
height: 150px; |
||||
} |
||||
.content-padded { |
||||
margin: 30px 15px 15px; |
||||
} |
||||
|
Before Width: | Height: | Size: 257 KiB |
|
Before Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 30 KiB |
@ -1,170 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Movie finder</title> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<link rel="stylesheet" href="../../dist/ratchet.css"> |
||||
<link rel="stylesheet" href="css/app.css"> |
||||
<script src="../../dist/ratchet.js"></script> |
||||
</head> |
||||
<body> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-gear pull-right" href="#settingsModal" ></a> |
||||
<h1 class="title">Movie finder</h1> |
||||
</header> |
||||
|
||||
<div class="bar bar-standard bar-header-secondary"> |
||||
<form> |
||||
<input type="search" placeholder="Search"> |
||||
</form> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
|
||||
<div class="slider"> |
||||
<div class="slide-group"> |
||||
<div class="slide"> |
||||
<img src="img/argo.png"> |
||||
</div> |
||||
<div class="slide"> |
||||
<img src="img/skyfall.png"> |
||||
</div> |
||||
<div class="slide"> |
||||
<img src="img/ralph.png"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-cell table-view-divider">Recommended movies</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64"> |
||||
<div class="media-body"> |
||||
Argo |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64"> |
||||
<div class="media-body"> |
||||
Skyfall: 007 |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64"> |
||||
<div class="media-body"> |
||||
Wreck-it Ralph |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64"> |
||||
<div class="media-body"> |
||||
Argo |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64"> |
||||
<div class="media-body"> |
||||
Skyfall: 007 |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64"> |
||||
<div class="media-body"> |
||||
Wreck-it Ralph |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64"> |
||||
<div class="media-body"> |
||||
Argo |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64"> |
||||
<div class="media-body"> |
||||
Skyfall: 007 |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> |
||||
<img class="media-object pull-left" src="http://placehold.it/64x64"> |
||||
<div class="media-body"> |
||||
Wreck-it Ralph |
||||
<p>Lorem ipsum dolor sit amet, consectetur.</p> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div><!-- /.content --> |
||||
|
||||
<!-- Settings modal --> |
||||
<div id="settingsModal" class="modal"> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-close pull-right" href="#settingsModal"></a> |
||||
<h1 class="title">Settings</h1> |
||||
</header> |
||||
|
||||
<div class="content"> |
||||
<form class="input-group"> |
||||
<input type="text" placeholder="Full name"> |
||||
<input type="email" placeholder="Email"> |
||||
<input type="text" placeholder="Username"> |
||||
</form> |
||||
|
||||
<h5 class="content-padded">App settings</h5> |
||||
|
||||
<ul class="table-view"> |
||||
<li class="table-view-cell media"> |
||||
<span class="media-object pull-left icon icon-sound"></span> |
||||
<div class="media-body"> |
||||
Enable sounds |
||||
</div> |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell media"> |
||||
<span class="media-object pull-left icon icon-person"></span> |
||||
<div class="media-body"> |
||||
Parental controls |
||||
</div> |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="container"> |
||||
<a class="btn btn-positive btn-block content-padded">Save settings</a> |
||||
</div> |
||||
</div> |
||||
</div><!-- /.modal --> |
||||
</body> |
||||
</html> |
||||
@ -1,143 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Examples · Ratchet</title> |
||||
<meta name="description" content="Ratchet: Prototype mobile apps with simple HTML, CSS, and JS components."> |
||||
<meta name="author" content="Connor Sears"> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<link rel="shortcut icon" href="../favicon.ico"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<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="../assets/img/apple-touch-icon-114x114.png"> |
||||
|
||||
<script src="http://code.jquery.com/jquery-1.7.2.min.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> |
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> |
||||
|
||||
<!-- Roboto --> |
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'> |
||||
|
||||
<script> |
||||
var _gaq = _gaq || []; |
||||
_gaq.push(['_setAccount', 'UA-36050008-1']); |
||||
_gaq.push(['_trackPageview']); |
||||
|
||||
(function() { |
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
||||
})(); |
||||
// Remove once I add back in the docs.js |
||||
// $(function() { |
||||
// $(window).on('load', function () { new FingerBlast('.body'); }); |
||||
// }); |
||||
</script> |
||||
</head> |
||||
<body ontouchstart=""> |
||||
<div class="docs-sub-header"> |
||||
<header class="docs-masthead clearfix"> |
||||
<div class="container"> |
||||
<div class="column units-2"> |
||||
<h1 class="docs-title"> |
||||
<a href="/" data-ignore="push">Ratchet</a> |
||||
</h1> |
||||
<nav class="docs-nav clearfix"> |
||||
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a> |
||||
<div class="docs-nav-group"> |
||||
<a class="docs-nav-item" href="/" data-ignore="push">Home</a> |
||||
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a> |
||||
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a> |
||||
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a> |
||||
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a> |
||||
</div> |
||||
</nav> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
|
||||
<div class="container"> |
||||
<div class="column-group"> |
||||
<div class="column units-2"> |
||||
<div class="docs-sub-content"> |
||||
<h2 class="page-title">Examples</h2> |
||||
<p class="page-description">Take a look at some of these example apps built on Ratchet.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="container"> |
||||
<div class="column-group"> |
||||
<div class="column units-2 lg-units-8 docs-examples"> |
||||
<p class="section-lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p> |
||||
|
||||
<div class="docs-example-group"> |
||||
<div class="example-wrap"> |
||||
<a class="example" href="../examples/app-movies" data-ignore="push"> |
||||
<img src="../assets/img/example.png"> |
||||
</a> |
||||
<h5>Movie finder</h5> |
||||
</div> |
||||
<div class="example-wrap"> |
||||
<a class="example" href="../examples/app-ios-mail" data-ignore="push"> |
||||
<img src="../assets/img/example-ios.png"> |
||||
</a> |
||||
<h5>iOS mail app</h5> |
||||
</div> |
||||
<div class="example-wrap"> |
||||
<a class="example" href="../examples/app-android-notes" data-ignore="push"> |
||||
<img src="../assets/img/example-android.png"> |
||||
</a> |
||||
<h5>Android notes app</h5> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="column units-2 lg-units-4"> |
||||
<div class="docs-module"> |
||||
<h4 class="docs-module-title">Download Ratchet</h4> |
||||
<p>If you haven't already, download the source code for Ratchet.</p> |
||||
<a href="https://github.com/twbs/ratchet/archive/v2.0.0.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="column units-2"> |
||||
<!-- Footer --> |
||||
<div class="docs-footer"> |
||||
<!-- Social links --> |
||||
<ul class="social"> |
||||
<li> |
||||
<iframe src="http://ghbtns.com/github-btn.html?user=twbs&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe> |
||||
</li> |
||||
<li> |
||||
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet – Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a> |
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
||||
</li> |
||||
<li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true"> |
||||
Follow @GoRatchet</a> |
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p class="docs-footer-content">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
|
Before Width: | Height: | Size: 8.2 KiB |
@ -1,221 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Getting started · Ratchet</title> |
||||
<meta name="description" content="Ratchet: Prototype mobile apps with simple HTML, CSS, and JS components."> |
||||
<meta name="author" content="Connor Sears"> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<link rel="shortcut icon" href="../favicon.ico"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<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="../assets/img/apple-touch-icon-114x114.png"> |
||||
|
||||
<script src="http://code.jquery.com/jquery-1.7.2.min.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> |
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> |
||||
|
||||
<!-- Roboto --> |
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'> |
||||
|
||||
<script> |
||||
var _gaq = _gaq || []; |
||||
_gaq.push(['_setAccount', 'UA-36050008-1']); |
||||
_gaq.push(['_trackPageview']); |
||||
|
||||
(function() { |
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
||||
})(); |
||||
// Remove once I add back in the docs.js |
||||
// $(function() { |
||||
// $(window).on('load', function () { new FingerBlast('.body'); }); |
||||
// }); |
||||
</script> |
||||
</head> |
||||
<body ontouchstart=""> |
||||
<div class="docs-sub-header"> |
||||
<header class="docs-masthead clearfix"> |
||||
<div class="container"> |
||||
<div class="column units-2"> |
||||
<h1 class="docs-title"> |
||||
<a href="/" data-ignore="push">Ratchet</a> |
||||
</h1> |
||||
<nav class="docs-nav clearfix"> |
||||
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a> |
||||
<div class="docs-nav-group"> |
||||
<a class="docs-nav-item" href="/" data-ignore="push">Home</a> |
||||
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a> |
||||
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a> |
||||
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a> |
||||
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a> |
||||
</div> |
||||
</nav> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
|
||||
<div class="container"> |
||||
<div class="column-group"> |
||||
<div class="column units-2"> |
||||
<div class="docs-sub-content"> |
||||
<h2 class="page-title">Getting started</h2> |
||||
<p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="container"> |
||||
<div class="column-group"> |
||||
<div class="column units-2 lg-units-8"> |
||||
<ol class="docs-steps"> |
||||
<li class="step"> |
||||
<h3 class="step-title">1. Create your pages</h3> |
||||
<p class="step-description">Use the <a href="/components" data-ignore="push">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples" data-ignore="push">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code><head></code> if you have a specific platform in mind.</p> |
||||
</li> |
||||
<li class="step"> |
||||
<h3 class="step-title">2. Connect pages with push.js</h3> |
||||
<p class="step-description">Read about <a href="/components/#push" data-ignore="push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p> |
||||
</li> |
||||
<li class="step"> |
||||
<h3 class="step-title">3. Save the prototype to your phone</h3> |
||||
<p class="step-description">There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw" data-ignore="push">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen" data-ignore="push">this guide</a>.</p> |
||||
</li> |
||||
</ol> |
||||
|
||||
<hr> |
||||
|
||||
<h2 class="section-heading">Page setup</h2> |
||||
<p class="section-lead">Three simple rules for structuring your Ratchet pages</p> |
||||
<ol class="docs-steps"> |
||||
<li class="step"> |
||||
<h3 class="step-title">1. Fixed bars come first</h3> |
||||
<p class="step-description">All fixed bars (<code>.bar</code>) should always be the first thing in the <code><body></code> of the page. This is really important!</p> |
||||
</li> |
||||
<li class="step"> |
||||
<h3 class="step-title">2. Everything else goes in <code>.content</code></h3> |
||||
<p class="step-description">Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code><body></code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p> |
||||
</li> |
||||
<li class="step"> |
||||
<h3 class="step-title">3. Don't forget your meta tags</h3> |
||||
<p class="step-description">They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.</p> |
||||
</li> |
||||
</ol> |
||||
|
||||
|
||||
<hr> |
||||
|
||||
<h2 id="pageLayout" class="section-heading">Basic template</h2> |
||||
<p class="section-lead">Use this basic template to get your app started.</p> |
||||
<div class="highlight"><pre><code class="html"><span class="cp"><!DOCTYPE html></span> |
||||
<span class="nt"><html></span> |
||||
<span class="nt"><head></span> |
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span> |
||||
<span class="nt"><title></span>Ratchet template page<span class="nt"></title></span> |
||||
|
||||
<span class="c"><!-- Sets initial viewport load and disables zooming --></span> |
||||
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"initial-scale=1, maximum-scale=1, user-scalable=no"</span><span class="nt">></span> |
||||
|
||||
<span class="c"><!-- Makes your prototype chrome-less once bookmarked to your phone's home screen --></span> |
||||
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"apple-mobile-web-app-capable"</span> <span class="na">content=</span><span class="s">"yes"</span><span class="nt">></span> |
||||
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"apple-mobile-web-app-status-bar-style"</span> <span class="na">content=</span><span class="s">"black"</span><span class="nt">></span> |
||||
|
||||
<span class="c"><!-- Include the compiled Ratchet CSS --></span> |
||||
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"ratchet.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span> |
||||
|
||||
<span class="c"><!-- Include the compiled Ratchet JS --></span> |
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"ratchet.js"</span><span class="nt">></script></span> |
||||
|
||||
<span class="nt"></head></span> |
||||
<span class="nt"><body></span> |
||||
|
||||
<span class="c"><!-- Make sure all your bars are the first things in your <body> --></span> |
||||
<span class="nt"><header</span> <span class="na">class=</span><span class="s">"bar bar-nav"</span><span class="nt">></span> |
||||
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>Ratchet<span class="nt"></h1></span> |
||||
<span class="nt"></header></span> |
||||
|
||||
<span class="c"><!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --></span> |
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span> |
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"content-padded"</span><span class="nt">></span>Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:<span class="nt"></p></span> |
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> |
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"table-view"</span><span class="nt">></span> |
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span> |
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"http://goratchet.com"</span><span class="nt">></span> |
||||
<span class="nt"><strong></span>Ratchet documentation<span class="nt"></strong></span> |
||||
<span class="nt"></a></span> |
||||
<span class="nt"></li></span> |
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span> |
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"https://www.github.com/twbs/ratchet/"</span><span class="nt">></span> |
||||
<span class="nt"><strong></span>Ratchet on Github<span class="nt"></strong></span> |
||||
<span class="nt"></a></span> |
||||
<span class="nt"></li></span> |
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span> |
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"https://groups.google.com/forum/#!forum/goratchet"</span><span class="nt">></span> |
||||
<span class="nt"><strong></span>Ratchet Google group<span class="nt"></strong></span> |
||||
<span class="nt"></a></span> |
||||
<span class="nt"></li></span> |
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span> |
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"http://www.twitter.com/GoRatchet"</span><span class="nt">></span> |
||||
<span class="nt"><strong></span>Ratchet on Twitter<span class="nt"></strong></span> |
||||
<span class="nt"></a></span> |
||||
<span class="nt"></li></span> |
||||
<span class="nt"></ul></span> |
||||
<span class="nt"></div></span> |
||||
<span class="nt"></div></span> |
||||
|
||||
<span class="nt"></body></span> |
||||
<span class="nt"></html></span> |
||||
</code></pre></div> |
||||
</div> |
||||
|
||||
<div class="column units-2 lg-units-4"> |
||||
<div class="docs-module"> |
||||
<h4 class="docs-module-title">Download Ratchet</h4> |
||||
<p>If you haven't already, download the source code for Ratchet.</p> |
||||
<a href="https://github.com/twbs/ratchet/archive/v2.0.0.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a> |
||||
<p class="version">Currently v2.0.0</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="column units-2"> |
||||
<!-- Footer --> |
||||
<div class="docs-footer"> |
||||
<!-- Social links --> |
||||
<ul class="social"> |
||||
<li> |
||||
<iframe src="http://ghbtns.com/github-btn.html?user=twbs&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe> |
||||
</li> |
||||
<li> |
||||
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet – Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a> |
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
||||
</li> |
||||
<li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true"> |
||||
Follow @GoRatchet</a> |
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p class="docs-footer-content">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -1,99 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Ratchet</title> |
||||
<meta name="description" content="Ratchet: Prototype mobile apps with simple HTML, CSS, and JS components."> |
||||
<meta name="author" content="Connor Sears"> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
||||
<link rel="shortcut icon" href="../favicon.ico"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
|
||||
<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="../assets/img/apple-touch-icon-114x114.png"> |
||||
|
||||
<script src="http://code.jquery.com/jquery-1.7.2.min.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> |
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> |
||||
|
||||
<!-- Roboto --> |
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'> |
||||
|
||||
<script> |
||||
var _gaq = _gaq || []; |
||||
_gaq.push(['_setAccount', 'UA-36050008-1']); |
||||
_gaq.push(['_trackPageview']); |
||||
|
||||
(function() { |
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
||||
})(); |
||||
// Remove once I add back in the docs.js |
||||
// $(function() { |
||||
// $(window).on('load', function () { new FingerBlast('.body'); }); |
||||
// }); |
||||
</script> |
||||
</head> |
||||
<body class="docs-home" ontouchstart=""> |
||||
<div class="docs-header"> |
||||
<header class="docs-masthead clearfix"> |
||||
<div class="container"> |
||||
<div class="column units-2"> |
||||
<h1 class="docs-title"> |
||||
<a href="/" data-ignore="push">Ratchet</a> |
||||
</h1> |
||||
<nav class="docs-nav clearfix"> |
||||
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a> |
||||
<div class="docs-nav-group"> |
||||
<a class="docs-nav-item" href="/" data-ignore="push">Home</a> |
||||
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a> |
||||
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a> |
||||
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a> |
||||
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a> |
||||
</div> |
||||
</nav> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
|
||||
<div class="docs-header-content"> |
||||
<p class="docs-subtitle">Build mobile apps with simple HTML‚ CSS‚ and JS components.</p> |
||||
<a data-ignore="push" href="https://github.com/twbs/ratchet/archive/v2.0.0.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a> |
||||
<p class="version">Currently v2.0.0</p> |
||||
</div> |
||||
|
||||
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> |
||||
<div class="docs-footer"> |
||||
<!-- Social links --> |
||||
<ul class="social"> |
||||
<li> |
||||
<iframe src="http://ghbtns.com/github-btn.html?user=twbs&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe> |
||||
</li> |
||||
<li> |
||||
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet – Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a> |
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
||||
</li> |
||||
<li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true"> |
||||
Follow @GoRatchet</a> |
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p class="docs-footer-content">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -1,32 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Ratchet</title> |
||||
<meta name="description" content=""> |
||||
<meta name="author" content=""> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
<link rel="shortcut icon" href="favicon.ico"/> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
<link rel="stylesheet" href="../dist/ratchet.css"> |
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
||||
<link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png"> |
||||
</head> |
||||
<body ontouchstart=""> |
||||
<header class="bar bar-nav"> |
||||
<h1 class="title">Push</h1> |
||||
</header> |
||||
<div class="content"> |
||||
<div class="card"> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell"> |
||||
<a class="push-right" href="two.html" data-transition="slide-in" data-selector=".device-content"> |
||||
Load new page with push |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -1,31 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Ratchet</title> |
||||
<meta name="description" content=""> |
||||
<meta name="author" content=""> |
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
<link rel="shortcut icon" href="favicon.ico"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
<link rel="stylesheet" href="../dist/ratchet.css"> |
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
||||
<link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png"> |
||||
</head> |
||||
<body ontouchstart=""> |
||||
<header class="bar bar-nav"> |
||||
<a class="icon icon-left-nav pull-left" href="one.html" data-transition="slide-out"></a> |
||||
<h1 class="title">Page two</h1> |
||||
</header> |
||||
<div class="content"> |
||||
<div class="card"> |
||||
<ul class="table-view"> |
||||
<li class="table-view-cell"> |
||||
<a href="one.html" data-transition="slide-out">Tap or click here to go back. You can also try your browser's back button.</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue