playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

clean up some old example files

pull/249/head
connors 11 years ago
parent
41fb59c1dc
commit
7d2391f569
24 changed files with 1181 additions and 2190 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 43
      components.html
  2. 14
      dist/ratchet.css
  3. 2073
      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. 19
      examples/app-default/choose-theater.html
  17. 22
      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
Unescape View File

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

14
dist/ratchet.css vendored
Unescape View File

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

2073
docs-assets/css/docs.css
View File

File diff suppressed because it is too large Load Diff

63
examples/app-classic/checkout.html
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 257 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 49 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

138
examples/app-classic/index.html
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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>

19
examples/app-default/choose-theater.html
Unescape View File

@ -19,11 +19,12 @@
<body> <body>
<header class="bar-nav"> <header class="bar-nav">
<a class="button-prev" href="index.html" data-transition="slide-out"> <a class="button pull-left" href="index.html" data-transition="slide-out">
Back Back
</a> </a>
<h1 class="title">Argo</h1> <h1 class="title">Argo</h1>
</header> </header>
<nav class="bar-standard bar-header-secondary"> <nav class="bar-standard bar-header-secondary">
<form> <form>
<input type="search" placeholder="Search theaters"> <input type="search" placeholder="Search theaters">
@ -31,30 +32,21 @@
</nav> </nav>
<nav class="bar-tab"> <nav class="bar-tab">
<ul class="tab-inner"> <a class="tab-item selected" href="index.html" data-transition="fade">
<li class="tab-item active">
<a href="index.html" data-transition="fade">
<span class="icon icon-share"></span> <span class="icon icon-share"></span>
<div class="tab-label">Movies</div> <div class="tab-label">Movies</div>
</a> </a>
</li> <a class="tab-item" href="#" data-transition="fade">
<li class="tab-item">
<a href="theaters.html" data-transition="fade">
<span class="icon icon-pages"></span> <span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div> <div class="tab-label">Theaters</div>
</a> </a>
</li> <a class="tab-item" href="#" data-transition="fade">
<li class="tab-item">
<a href="settings.html" data-transition="fade">
<span class="icon icon-sound"></span> <span class="icon icon-sound"></span>
<div class="tab-label">Settings</div> <div class="tab-label">Settings</div>
</a> </a>
</li>
</ul>
</nav> </nav>
<div class="content"> <div class="content">
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell table-view-divider">Theaters nearby</li> <li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell"> <li class="table-view-cell">
@ -109,6 +101,5 @@
</li> </li>
</ul> </ul>
</div> </div>
</body> </body>
</html> </html>

22
examples/app-default/index.html
Unescape View File

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

72
examples/app-default/settings.html
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

5
lib/sass/base.scss
Unescape View File

@ -47,11 +47,6 @@ strong {
transform: translateZ(0px); 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. // 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 // Note: For these to work, content must come after both bars in the markup
.bar-nav ~ .content { .bar-nav ~ .content {

29
lib/sass/docs.scss
Unescape View File

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

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

4
lib/sass/segmented-controllers.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save