Browse Source

clean up some old example files

pull/249/head
connors 11 years ago
parent
commit
7d2391f569
  1. 43
      components.html
  2. 14
      dist/ratchet.css
  3. 2075
      docs-assets/css/docs.css
  4. 63
      examples/app-classic/checkout.html
  5. 103
      examples/app-classic/choose-movie.html
  6. 92
      examples/app-classic/choose-theater.html
  7. 16
      examples/app-classic/css/app.css
  8. BIN
      examples/app-classic/img/argo.png
  9. BIN
      examples/app-classic/img/ralph.png
  10. BIN
      examples/app-classic/img/skyfall.png
  11. 138
      examples/app-classic/index.html
  12. 50
      examples/app-classic/settings.html
  13. 109
      examples/app-classic/theaters.html
  14. 85
      examples/app-default/checkout.html
  15. 125
      examples/app-default/choose-movie.html
  16. 171
      examples/app-default/choose-theater.html
  17. 42
      examples/app-default/index.html
  18. 72
      examples/app-default/settings.html
  19. 131
      examples/app-default/theaters.html
  20. 2
      lib/sass/bars.scss
  21. 5
      lib/sass/base.scss
  22. 29
      lib/sass/docs.scss
  23. 2
      lib/sass/forms.scss
  24. 4
      lib/sass/segmented-controllers.scss

43
components.html

@ -76,8 +76,8 @@ base_url: "../"
<p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
<div class="component-example component-example-fullbleed">
<header class="bar-nav pull-left">
<a class="button">
<header class="bar-nav">
<a class="button pull-left">
Left
</a>
<a class="button pull-right">
@ -186,7 +186,7 @@ base_url: "../"
<div class="component-example component-example-fullbleed">
<nav class="bar-tab">
<a class="tab-item active" href="#">
<a class="tab-item selected" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
@ -211,7 +211,7 @@ base_url: "../"
{% highlight html %}
<nav class="bar-tab">
<a class="tab-item active" href="#">
<a class="tab-item selected" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
@ -555,6 +555,7 @@ base_url: "../"
<a class="button-primary">Button</a>
<a class="button-positive">Button</a>
<a class="button-negative">Button</a>
<a class="button-link">Button</a>
</div>
{% highlight html %}
@ -562,6 +563,7 @@ base_url: "../"
<a class="button-primary">Button</a>
<a class="button-positive">Button</a>
<a class="button-negative">Button</a>
<a class="button-link">Button</a>
{% endhighlight %}
</article>
@ -637,17 +639,9 @@ base_url: "../"
</li>
</ul>
<div class="card">
<ul class="table-view">
<li id="item1mobile" class="table-view-cell segmented-controller-item selected">
Item 1
</li>
<li id="item2mobile" class="table-view-cell segmented-controller-item">
Item 2
</li>
<li id="item3mobile" class="table-view-cell segmented-controller-item">
Item 3
</li>
</ul>
<p id="item1mobile" class="segmented-controller-item selected">Item 1</p>
<p id="item2mobile" class="segmented-controller-item">Item 2</p>
<p id="item3mobile" class="segmented-controller-item">Item 3</p>
</div>
</div>
@ -664,17 +658,10 @@ base_url: "../"
</li>
</ul>
<div class="card">
<ul class="table-view">
<li id="item1mobile" class="table-view-cell segmented-controller-item selected">
Item 1
</li>
<li id="item2mobile" class="table-view-cell segmented-controller-item">
Item 2
</li>
<li id="item3mobile" class="table-view-cell segmented-controller-item">
Item 3
</li>
</ul>
<p id="item1mobile" class="segmented-controller-item selected">Item 1</p>
<p id="item2mobile" class="segmented-controller-item">Item 2</p>
<p id="item3mobile" class="segmented-controller-item">Item 3</p>
</div>
</div>
{% endhighlight %}
@ -908,7 +895,7 @@ document
</a>
</header>
<div class="content content-padded">
<div class="content">
<p>The contents of my modal</p>
</div>
</div>
@ -924,7 +911,7 @@ document
</a>
</header>
<div class="content content-padded">
<div class="content">
<p>The contents of my modal</p>
</div>
</div>

14
dist/ratchet.css vendored

@ -262,10 +262,6 @@ strong {
transform: translateZ(0px);
}
.content-padded {
padding: 10px;
}
.bar-nav ~ .content {
padding-top: 44px;
}
@ -370,8 +366,8 @@ strong {
height: 24px;
margin-top: -2px;
}
.tab-item.active .tab-label,
.tab-item.active .icon, .tab-item:active .tab-label,
.tab-item.selected .tab-label,
.tab-item.selected .icon, .tab-item:active .tab-label,
.tab-item:active .icon {
color: #428bca;
}
@ -608,7 +604,7 @@ select {
[class*="bar-"] input[type=search] {
height: 29px;
margin: 2px 0;
margin: 6px 0;
}
[class*="button"] {
@ -838,6 +834,7 @@ input[type="button"] {
}
.segmented-controller {
position: relative;
display: table;
padding: 0;
overflow: hidden;
@ -940,7 +937,8 @@ input[type="button"] {
}
[class*="bar-"] .segmented-controller {
margin: 8px auto 0;
top: 8px;
margin: 0 auto;
}
.popover {

2075
docs-assets/css/docs.css

File diff suppressed because it is too large Load Diff

63
examples/app-classic/checkout.html

@ -1,63 +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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>
</head>
<body>
<header class="bar-nav">
<a class="button-prev" href="choose-theater.html" data-transition="slide-out">
Back
</a>
<h1 class="title">Buy tickets</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search for movies">
</form>
</nav>
<div class="content">
<div class="form-wrapper">
<form>
<div class="input-group">
<div class="input-row">
<input type="text" placeholder="Fullname">
</div>
<div class="input-row">
<input type="email" placeholder="Email">
</div>
</div>
<div class="input-group">
<div class="input-row">
<input type="text" placeholder="Name on card">
</div>
<div class="input-row">
<input type="text" placeholder="Credit card number">
</div>
<div class="input-row">
<input type="text" placeholder="Security code">
</div>
</div>
<a class="button-positive button-block button-filled">Checkout</a>
</form>
</div>
</div>
</body>
</html>

103
examples/app-classic/choose-movie.html

@ -1,103 +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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>
</head>
<body>
<header class="bar-nav">
<a class="button-prev" href="theaters.html" data-transition="slide-out">
Back
</a>
<h1 class="title">Choose a movie</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search for movies">
</form>
</nav>
<div class="content">
<ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell">
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell table-view-divider">Top movies</li>
<li class="table-view-cell">
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
</ul>
</div>
</body>
</html>

92
examples/app-classic/choose-theater.html

@ -1,92 +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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>
</head>
<body>
<header class="bar-nav">
<a class="button-prev" href="index.html" data-transition="slide-out">
Back
</a>
<h1 class="title">Argo</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search theaters">
</form>
</nav>
<div class="content">
<ul class="table-view">
<li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell">
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 10</strong>
<p>15 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
</ul>
</div>
</body>
</html>

16
examples/app-classic/css/app.css

@ -1,16 +0,0 @@
.slider {
margin-bottom: 0;
height: 150px;
}
.slider li img {
width: 100%;
}
.form-wrapper {
padding: 10px 0;
}
.form-wrapper [class*="button"] {
margin: 0 10px;
}

BIN
examples/app-classic/img/argo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 257 KiB

BIN
examples/app-classic/img/ralph.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

BIN
examples/app-classic/img/skyfall.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

138
examples/app-classic/index.html

@ -1,138 +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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>
</head>
<body>
<header class="bar-nav">
<h1 class="title">Movie finder</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
</form>
</nav>
<div class="content">
<div class="slider">
<ul>
<li>
<img src="img/argo.png">
</li>
<li>
<img src="img/skyfall.png">
</li>
<li>
<img src="img/ralph.png">
</li>
</ul>
</div>
<ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell table-view-divider">Top movies</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>
</html>

50
examples/app-classic/settings.html

@ -1,50 +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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>
</head>
<body>
<header class="bar-nav">
<h1 class="title">Settings</h1>
</header>
<div class="content">
<div class="form-wrapper">
<form>
<div class="input-group">
<div class="input-row">
<label>Full name</label>
<input type="text" placeholder="Mister Ratchet">
</div>
<div class="input-row">
<label>Email</label>
<input type="email" placeholder="ratchetframework@gmail.com">
</div>
<div class="input-row">
<label>Username</label>
<input type="text" placeholder="goRatchet">
</div>
</div>
<a class="button-block button-negative button-filled">Delete Account</a>
</form>
</div>
</div>
</body>
</html>

109
examples/app-classic/theaters.html

@ -1,109 +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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>
</head>
<body>
<header class="bar-nav">
<h1 class="title">Find a theater</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
</form>
</nav>
<div class="content">
<ul class="table-view">
<li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 10</strong>
<p>15 miles away</p>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>
</html>

85
examples/app-default/checkout.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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<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-nav">
<a class="button-prev" href="choose-theater.html" data-transition="slide-out">
Back
</a>
<h1 class="title">Buy tickets</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search for movies">
</form>
</nav>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
</li>
<li class="tab-item">
<a href="theaters.html" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
</li>
<li class="tab-item">
<a href="settings.html" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</li>
</ul>
</nav>
<div class="content">
<div class="form-wrapper">
<form>
<div class="input-group">
<div class="input-row">
<input type="text" placeholder="Fullname">
</div>
<div class="input-row">
<input type="email" placeholder="Email">
</div>
</div>
<div class="input-group">
<div class="input-row">
<input type="text" placeholder="Name on card">
</div>
<div class="input-row">
<input type="text" placeholder="Credit card number">
</div>
<div class="input-row">
<input type="text" placeholder="Security code">
</div>
</div>
<a class="button-positive button-block button-filled">Checkout</a>
</form>
</div>
</div>
</body>
</html>

125
examples/app-default/choose-movie.html

@ -1,125 +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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<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-nav">
<a class="button-prev" href="theaters.html" data-transition="slide-out">
Back
</a>
<h1 class="title">Choose a movie</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search for movies">
</form>
</nav>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item">
<a href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
</li>
<li class="tab-item active">
<a href="theaters.html" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
</li>
<li class="tab-item">
<a href="settings.html" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</li>
</ul>
</nav>
<div class="content">
<ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell">
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell table-view-divider">Top movies</li>
<li class="table-view-cell">
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
</ul>
</div>
</body>
</html>

171
examples/app-default/choose-theater.html

@ -18,97 +18,88 @@
</head>
<body>
<header class="bar-nav">
<a class="button-prev" href="index.html" data-transition="slide-out">
Back
</a>
<h1 class="title">Argo</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search theaters">
</form>
</nav>
<header class="bar-nav">
<a class="button pull-left" href="index.html" data-transition="slide-out">
Back
</a>
<h1 class="title">Argo</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search theaters">
</form>
</nav>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
</li>
<li class="tab-item">
<a href="theaters.html" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
</li>
<li class="tab-item">
<a href="settings.html" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</li>
</ul>
</nav>
<div class="content">
<ul class="table-view">
<li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell">
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 10</strong>
<p>15 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
</ul>
</div>
<nav class="bar-tab">
<a class="tab-item selected" href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
<a class="tab-item" href="#" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
<a class="tab-item" href="#" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</nav>
<div class="content">
<ul class="table-view">
<li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell">
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-cell">
<strong>AMC 10</strong>
<p>15 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
</ul>
</div>
</body>
</html>

42
examples/app-default/index.html

@ -17,10 +17,10 @@
</head>
<body>
<header class="bar-nav">
<h1 class="title">Movie finder</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
@ -28,26 +28,18 @@
</nav>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
</li>
<li class="tab-item">
<a href="theaters.html" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
</li>
<li class="tab-item">
<a href="settings.html" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</li>
</ul>
<a class="tab-item selected" href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
<a class="tab-item" href="#" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
<a class="tab-item" href="#" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</nav>
<div class="content">
@ -65,11 +57,6 @@
</ul>
</div>
<div id="myAlert2" class="alert alert-positive alert-inline">
<a href="#myAlert2" class="icon icon-share close"></a>
<strong>This</strong> is an inline alert.
</div>
<ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell">
@ -159,6 +146,5 @@
</li>
</ul>
</div>
</body>
</html>
</html>

72
examples/app-default/settings.html

@ -1,72 +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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<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-nav">
<h1 class="title">Settings</h1>
</header>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item">
<a href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
</li>
<li class="tab-item">
<a href="theaters.html" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
</li>
<li class="tab-item active">
<a href="settings.html" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</li>
</ul>
</nav>
<div class="content">
<div class="form-wrapper">
<form>
<div class="input-group">
<div class="input-row">
<label>Full name</label>
<input type="text" placeholder="Mister Ratchet">
</div>
<div class="input-row">
<label>Email</label>
<input type="email" placeholder="ratchetframework@gmail.com">
</div>
<div class="input-row">
<label>Username</label>
<input type="text" placeholder="goRatchet">
</div>
</div>
<a class="button-block button-negative button-filled">Delete Account</a>
</form>
</div>
</div>
</body>
</html>

131
examples/app-default/theaters.html

@ -1,131 +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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<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-nav">
<h1 class="title">Find a theater</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
</form>
</nav>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item">
<a href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
</li>
<li class="tab-item active">
<a href="theaters.html" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
</li>
<li class="tab-item">
<a href="settings.html" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</li>
</ul>
</nav>
<div class="content">
<ul class="table-view">
<li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 10</strong>
<p>15 miles away</p>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>
</html>

2
lib/sass/bars.scss

@ -113,7 +113,7 @@
}
// Active states for the tab bar
&.active,
&.selected,
&:active {
.tab-label,
.icon {

5
lib/sass/base.scss

@ -47,11 +47,6 @@ strong {
transform: translateZ(0px);
}
// Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed
.content-padded {
padding: 10px;
}
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
// Note: For these to work, content must come after both bars in the markup
.bar-nav ~ .content {

29
lib/sass/docs.scss

@ -1,14 +1,6 @@
@import "variables.scss";
@import "mixins.scss";
// Devices
.platform-ios {
@import "theme-ios.scss";
}
.platform-android {
@import "theme-android.scss";
}
//
// Documentation
// --------------------------------------------------
@ -302,7 +294,7 @@ body {
bottom: auto;
left: 0;
right: 0;
z-index: 3;
z-index: 20;
padding-top: 8px;
padding-bottom: 8px;
background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
@ -480,7 +472,7 @@ hr {
overflow: hidden;
font-size: $font-size-default;
line-height: $line-height-default;
background-color: #efeff4;
background-color: #fff;
}
.device .content,
.device [class*="bar"],
@ -642,6 +634,23 @@ hr {
}
}
// Devices
.platform-ios {
@import "theme-ios.scss";
.device .device-content {
background-color: #efeff4;
}
}
.platform-android {
@import "theme-android.scss";
.device .device-content {
background-color: #000;
background-image: linear-gradient(to bottom, #111111 0%, #2b2b2b 100%);
}
}
// Animations
@-webkit-keyframes fadeOverlay {
from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }

2
lib/sass/forms.scss

@ -135,5 +135,5 @@ select {
// Position/size search bar within the bar
[class*="bar-"] input[type=search] {
height: 29px;
margin: 2px 0;
margin: 6px 0;
}

4
lib/sass/segmented-controllers.scss

@ -3,6 +3,7 @@
// --------------------------------------------------
.segmented-controller {
position: relative;
display: table;
padding: 0;
overflow: hidden;
@ -136,5 +137,6 @@
// Remove standard segmented bottom margin
[class*="bar-"] .segmented-controller {
margin: 8px auto 0;
top: 8px;
margin: 0 auto;
}

Loading…
Cancel
Save