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

Resolve yo self.

pull/249/head
connors 11 years ago
parent
bdee3a1482 539b2fe5c1
commit
c716f075ed
24 changed files with 402 additions and 194 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. 3
      Gruntfile.js
  2. 18
      README.md
  3. 0
      dist/ratchet-theme.css
  4. 82
      dist/ratchet.css
  5. 57
      dist/ratchet.js
  6. 2
      examples/app-classic/checkout.html
  7. 2
      examples/app-classic/choose-movie.html
  8. 2
      examples/app-classic/choose-theater.html
  9. 2
      examples/app-classic/index.html
  10. 2
      examples/app-classic/settings.html
  11. 1
      examples/app-classic/theaters.html
  12. 268
      examples/app-default/index.html
  13. 2
      examples/components/classic/index.html
  14. 36
      lib/js/alerts.js
  15. 5
      lib/js/modals.js
  16. 11
      lib/js/popovers.js
  17. 4
      lib/js/sliders.js
  18. 52
      lib/sass/alerts.scss
  19. 13
      lib/sass/bars.scss
  20. 15
      lib/sass/forms.scss
  21. 8
      lib/sass/mixins.scss
  22. 1
      lib/sass/ratchet.scss
  23. 4
      lib/sass/table-views.scss
  24. 2
      package.json

3
Gruntfile.js
Unescape View File

@ -32,7 +32,8 @@ module.exports = function(grunt) {
'<%= meta.srcPath %>js/push.js', '<%= meta.srcPath %>js/push.js',
'<%= meta.srcPath %>js/segmented-controllers.js', '<%= meta.srcPath %>js/segmented-controllers.js',
'<%= meta.srcPath %>js/sliders.js', '<%= meta.srcPath %>js/sliders.js',
'<%= meta.srcPath %>js/toggles.js' '<%= meta.srcPath %>js/toggles.js',
'<%= meta.srcPath %>js/alerts.js'
], ],
dest: '<%= meta.distPath %><%= pkg.name %>.js' dest: '<%= meta.distPath %><%= pkg.name %>.js'
} }

18
README.md
Unescape View File

@ -12,19 +12,19 @@ Take note that our master branch is our active, unstable development branch and
## Documentation ## Documentation
Ratchet's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at [http://maker.github.io/ratchet](http://maker.github.io/ratchet). The docs may also be run locally. Ratchet's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://maker.github.io/ratchet>. The docs may also be run locally.
### Running documentation locally ### Running documentation locally
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation). 1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation).
2. From the root `/ratchet` directory, run `jekyll serve` in the command line. 2. From the root `/ratchet` directory, run `jekyll serve` in the command line.
3. Open [http://localhost:4000](http://localhost:4000) in your browser, and boom! 3. Open <http://localhost:4000> in your browser, and boom!
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/). Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
## Support ## Support
Ratchet was developed to support iOS 7+ for iPhone. Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@goRatchet](http://www.twitter.com/goratchet). Ratchet was developed to support iOS 7+ for iPhone. Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@GoRatchet](https://twitter.com/goratchet).
## Reporting bugs & contributing ## Reporting bugs & contributing
@ -45,18 +45,18 @@ A small list of "gotchas" are provided below for designers and developers starti
Connor Sears Connor Sears
- https://twitter.com/connors - <https://twitter.com/connors>
- https://github.com/connors - <https://github.com/connors>
Dave Gamache Dave Gamache
- https://twitter.com/dhg - <https://twitter.com/dhg>
- https://github.com/dhg - <https://github.com/dhg>
Jacob Thornton Jacob Thornton
- https://twitter.com/fat - <https://twitter.com/fat>
- https://github.com/fat - <https://github.com/fat>
## License ## License

0
dist/theme-classic.css → dist/ratchet-theme.css vendored
Unescape View File

82
dist/ratchet.css vendored
Unescape View File

@ -303,9 +303,11 @@ strong {
[class*="bar-"].bar-footer { [class*="bar-"].bar-footer {
bottom: 0; bottom: 0;
} }
[class*="bar-"].bar-footer.bar-standard, [class*="bar-"].bar-footer-secondary.bar-standard { [class*="bar-"].bar-footer-secondary {
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); bottom: 44px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); }
[class*="bar-"].bar-footer-secondary-tab {
bottom: 50px;
} }
.bar-nav { .bar-nav {
@ -346,8 +348,6 @@ strong {
bottom: 0; bottom: 0;
height: 50px; height: 50px;
padding: 0; padding: 0;
-webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
} }
.tab-inner { .tab-inner {
@ -409,7 +409,7 @@ strong {
.table-view .table-view-cell { .table-view .table-view-cell {
position: relative; position: relative;
padding: 11px 60px 12px 15px; padding: 11px 60px 12px 15px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>");
background-position: 15px 100%; background-position: 15px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -448,7 +448,7 @@ strong {
color: #999; color: #999;
font-weight: 500; font-weight: 500;
background-color: #fafafa; background-color: #fafafa;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>");
background-position: 0 100%, 0 0%; background-position: 0 100%, 0 0%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -537,6 +537,7 @@ input[type="color"],
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 21px;
background-color: #fff; background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px; border-radius: 3px;
@ -584,31 +585,35 @@ select {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0; border-radius: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
} }
.input-group input:last-child { .input-group input:last-child {
border-bottom-width: 0; background-image: none;
} }
.input-row { .input-row {
overflow: hidden; overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, 0.2); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
} }
.input-row:last-child { .input-row:last-child {
border-bottom-width: 0; background-image: none;
} }
.input-row label { .input-row label {
float: left; float: left;
width: 35%; width: 35%;
padding: 11px 10px 9px 15px; padding: 10px 15px;
font-family: "Helvetica Neue", Helvetica, sans-serif; font-family: "Helvetica Neue", Helvetica, sans-serif;
font-weight: 500; line-height: 1.1;
} }
.input-row label + input { .input-row label + input {
@ -616,7 +621,7 @@ select {
width: 65%; width: 65%;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
border-bottom: 0; background-image: none;
} }
[class*="bar-"] input[type=search] { [class*="bar-"] input[type=search] {
@ -988,6 +993,55 @@ input[type="button"] {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
} }
.alert {
position: fixed;
right: 15px;
left: 15px;
bottom: 65px;
padding: 15px;
color: #fff;
border-radius: 3px;
z-index: 10;
-webkit-transition: opacity;
transition: opacity;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.alert .close {
position: relative;
top: -2px;
float: right;
color: inherit;
cursor: pointer;
-webkit-transition: opacity;
transition: opacity;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.alert .close:active {
opacity: .6;
}
.alert.dismiss {
opacity: 0;
}
.alert-positive {
background-color: rgba(76, 217, 100, 0.97);
}
.alert-negative {
background-color: rgba(221, 82, 77, 0.97);
}
.alert-inline {
position: static;
margin: 15px;
}
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;

57
dist/ratchet.js vendored
Unescape View File

@ -15,8 +15,7 @@
!function () { !function () {
var findModals = function (target) { var findModals = function (target) {
var i; var i, modals = document.querySelectorAll('a');
var modals = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = modals.length; i--;) { if (modals[i] === target) return target; } for (i = modals.length; i--;) { if (modals[i] === target) return target; }
} }
@ -30,13 +29,14 @@
window.addEventListener('touchend', function (event) { window.addEventListener('touchend', function (event) {
var modal = getModal(event); var modal = getModal(event);
if (modal) { if (modal) {
modal.classList.toggle('active'); if (modal && modal.classList.contains('modal')) modal.classList.toggle('active');
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url) event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
} }
}); });
}(); }();
/* ---------------------------------- /* ----------------------------------
* POPOVER v1.0.0 * POPOVER v1.0.1
* Licensed under The MIT License * Licensed under The MIT License
* http://opensource.org/licenses/MIT * http://opensource.org/licenses/MIT
* ---------------------------------- */ * ---------------------------------- */
@ -76,7 +76,14 @@
if (!anchor || !anchor.hash) return; if (!anchor || !anchor.hash) return;
popover = document.querySelector(anchor.hash); try {
popover = document.querySelector(anchor.hash);
}
catch (error) {
popover = null;
}
if (popover == null) return;
if (!popover || !popover.classList.contains('popover')) return; if (!popover || !popover.classList.contains('popover')) return;
@ -626,8 +633,8 @@
startTime = +new Date; startTime = +new Date;
pageX = e.touches[0].pageX; pageX = e.touches[0].pageX;
pageY = e.touches[0].pageY; pageY = e.touches[0].pageY;
deltaX = 0; deltaX = 0;
deltaY = 0; deltaY = 0;
setSlideNumber(0); setSlideNumber(0);
@ -776,3 +783,39 @@
}); });
}(); }();
/* ----------------------------------
* ALERT v0.0.1
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
!function () {
var findAlerts = function (target) {
var i, alerts = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
for (i = alerts.length; i--;) { if (alerts[i] === target) return target; }
}
};
var onAlertHidden = function () {
var alert = getAlert(event);
alert.style.display = 'none';
alert.removeEventListener('webkitTransitionEnd', onAlertHidden);
}
var getAlert = function (event) {
var alertDismiss = findAlerts(event.target);
if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash);
};
window.addEventListener('click', function (event) {
var alert = getAlert(event);
if (alert) {
if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss');
alert.addEventListener('webkitTransitionEnd', onAlertHidden);
event.preventDefault();
}
});
}();

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

@ -12,7 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.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.css">
<link rel="stylesheet" href="../../dist/theme-classic.css"> <link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script> <script src="../../dist/ratchet.js"></script>

2
examples/app-classic/choose-movie.html
Unescape View File

@ -12,7 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.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.css">
<link rel="stylesheet" href="../../dist/theme-classic.css"> <link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script> <script src="../../dist/ratchet.js"></script>

2
examples/app-classic/choose-theater.html
Unescape View File

@ -12,7 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.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.css">
<link rel="stylesheet" href="../../dist/theme-classic.css"> <link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script> <script src="../../dist/ratchet.js"></script>

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

@ -12,7 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.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.css">
<link rel="stylesheet" href="../../dist/theme-classic.css"> <link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script> <script src="../../dist/ratchet.js"></script>

2
examples/app-classic/settings.html
Unescape View File

@ -12,7 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.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.css">
<link rel="stylesheet" href="../../dist/theme-classic.css"> <link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script> <script src="../../dist/ratchet.js"></script>

1
examples/app-classic/theaters.html
Unescape View File

@ -12,6 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.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.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script> <script src="../../dist/ratchet.js"></script>

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

@ -18,143 +18,153 @@
</head> </head>
<body> <body>
<header class="bar-nav"> <!-- Alert -->
<h1 class="title">Movie finder</h1> <div id="myAlert" class="alert alert-negative">
</header> <a href="#myAlert" class="icon icon-share close"></a>
<nav class="bar-standard bar-header-secondary"> <strong>This</strong> is an alert.
<form> </div>
<input type="search" placeholder="Search">
</form>
</nav>
<nav class="bar-tab"> <header class="bar-nav">
<ul class="tab-inner"> <h1 class="title">Movie finder</h1>
<li class="tab-item active"> </header>
<a href="index.html" data-transition="fade"> <nav class="bar-standard bar-header-secondary">
<span class="icon icon-share"></span> <form>
<div class="tab-label">Movies</div> <input type="search" placeholder="Search">
</a> </form>
</li> </nav>
<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"> <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="slider"> <div class="content">
<ul> <div class="slider">
<li> <ul>
<img src="img/argo.png"> <li>
<img src="img/argo.png">
</li>
<li>
<img src="img/skyfall.png">
</li>
<li>
<img src="img/ralph.png">
</li>
</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">
<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>
<li> <li class="table-view-cell table-view-divider">Top movies</li>
<img src="img/skyfall.png"> <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>
<li> <li class="table-view-cell">
<img src="img/ralph.png"> <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> </li>
</ul> </ul>
</div> </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> </body>
</html> </html>

2
examples/components/classic/index.html
Unescape View File

@ -7,7 +7,7 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> --> <!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
<link rel="stylesheet" href="../../../dist/ratchet.css"> <link rel="stylesheet" href="../../../dist/ratchet.css">
<link rel="stylesheet" href="../../../dist/theme-classic.css"> <link rel="stylesheet" href="../../../dist/ratchet-theme.css">
<script src="../../../dist/ratchet.js"></script> <script src="../../../dist/ratchet.js"></script>
<script src="../../../docs/js/fingerblast.js"></script> <script src="../../../docs/js/fingerblast.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

36
lib/js/alerts.js
Unescape View File

@ -0,0 +1,36 @@
/* ----------------------------------
* ALERT v0.0.1
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
!function () {
var findAlerts = function (target) {
var i, alerts = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
for (i = alerts.length; i--;) { if (alerts[i] === target) return target; }
}
};
var onAlertHidden = function () {
var alert = getAlert(event);
alert.style.display = 'none';
alert.removeEventListener('webkitTransitionEnd', onAlertHidden);
}
var getAlert = function (event) {
var alertDismiss = findAlerts(event.target);
if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash);
};
window.addEventListener('click', function (event) {
var alert = getAlert(event);
if (alert) {
if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss');
alert.addEventListener('webkitTransitionEnd', onAlertHidden);
event.preventDefault();
}
});
}();

5
lib/js/modals.js
Unescape View File

@ -6,8 +6,7 @@
!function () { !function () {
var findModals = function (target) { var findModals = function (target) {
var i; var i, modals = document.querySelectorAll('a');
var modals = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = modals.length; i--;) { if (modals[i] === target) return target; } for (i = modals.length; i--;) { if (modals[i] === target) return target; }
} }
@ -21,7 +20,7 @@
window.addEventListener('touchend', function (event) { window.addEventListener('touchend', function (event) {
var modal = getModal(event); var modal = getModal(event);
if (modal) { if (modal) {
modal.classList.toggle('active'); if (modal && modal.classList.contains('modal')) modal.classList.toggle('active');
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url) event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
} }
}); });

11
lib/js/popovers.js
Unescape View File

@ -1,5 +1,5 @@
/* ---------------------------------- /* ----------------------------------
* POPOVER v1.0.0 * POPOVER v1.0.1
* Licensed under The MIT License * Licensed under The MIT License
* http://opensource.org/licenses/MIT * http://opensource.org/licenses/MIT
* ---------------------------------- */ * ---------------------------------- */
@ -39,7 +39,14 @@
if (!anchor || !anchor.hash) return; if (!anchor || !anchor.hash) return;
popover = document.querySelector(anchor.hash); try {
popover = document.querySelector(anchor.hash);
}
catch (error) {
popover = null;
}
if (popover == null) return;
if (!popover || !popover.classList.contains('popover')) return; if (!popover || !popover.classList.contains('popover')) return;

4
lib/js/sliders.js
Unescape View File

@ -56,8 +56,8 @@
startTime = +new Date; startTime = +new Date;
pageX = e.touches[0].pageX; pageX = e.touches[0].pageX;
pageY = e.touches[0].pageY; pageY = e.touches[0].pageY;
deltaX = 0; deltaX = 0;
deltaY = 0; deltaY = 0;
setSlideNumber(0); setSlideNumber(0);

52
lib/sass/alerts.scss
Unescape View File

@ -0,0 +1,52 @@
//
// Alerts
// --------------------------------------------------
.alert {
position: fixed;
right: 15px;
left: 15px;
bottom: $bar-tab-height + 15px;
padding: 15px;
color: #fff;
border-radius: 3px;
z-index: 10;
@include transition(opacity);
@include transition-duration(.2s);
@include transition-timing-function(linear);
.close {
position: relative;
top: -2px;
float: right;
color: inherit;
cursor: pointer;
@include transition(opacity);
@include transition-duration(.2s);
@include transition-timing-function(linear);
&:active {
opacity: .6;
}
}
&.dismiss {
opacity: 0;
}
}
// Positive alert (Default color is green)
.alert-positive {
background-color: transparentize($positive-color, .03);
}
// Negative alert (Default color is red)
.alert-negative {
background-color: transparentize($negative-color, .03);
}
// Inline alert
.alert-inline {
position: static;
margin: 15px;
}

13
lib/sass/bars.scss
Unescape View File

@ -22,10 +22,14 @@
bottom: 0; bottom: 0;
} }
// Flip border position to top for footer bars // Modifier class to dock any bar above a standard bar
&.bar-footer.bar-standard, &.bar-footer-secondary {
&.bar-footer-secondary.bar-standard { bottom: $bar-base-height;
@include box-shadow(0 0 1px rgba(0,0,0,.85)); }
// Modifier class to dock any bar above a .bar-tab
&.bar-footer-secondary-tab {
bottom: $bar-tab-height;
} }
} }
@ -78,7 +82,6 @@
bottom: 0; bottom: 0;
height: $bar-tab-height; height: $bar-tab-height;
padding: 0; padding: 0;
@include box-shadow(0 0px 1px rgba(0,0,0,.85));
} }
// Wrapper for individual tab // Wrapper for individual tab

15
lib/sass/forms.scss
Unescape View File

@ -33,6 +33,7 @@ input[type="color"],
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
margin-bottom: 10px; margin-bottom: 10px;
line-height: $line-height-default;
background-color: #fff; background-color: #fff;
border: 1px solid rgba(0, 0, 0, .2); border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px; border-radius: 3px;
@ -87,14 +88,14 @@ select {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-radius: 0; border-radius: 0;
@include box-shadow(none); @include box-shadow(none);
@include hairline(single, #c8c7cc, 15px);
} }
// Remove bottom border on last input to avoid double bottom border // Remove bottom border on last input to avoid double bottom border
.input-group input:last-child { .input-group input:last-child {
border-bottom-width: 0; background-image: none;
} }
// Input groups with labels // Input groups with labels
@ -104,21 +105,21 @@ select {
// To use labels with input groups, wrap a label and an input in an .input-row // To use labels with input groups, wrap a label and an input in an .input-row
.input-row { .input-row {
overflow: hidden; overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, .2); @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
} }
// Remove bottom border on last input-row to avoid double bottom border // Remove bottom border on last input-row to avoid double bottom border
.input-row:last-child { .input-row:last-child {
border-bottom-width: 0; background-image: none;
} }
// Labels get floated left with a set percentage width // Labels get floated left with a set percentage width
.input-row label { .input-row label {
float: left; float: left;
width: 35%; width: 35%;
padding: 11px 10px 9px 15px; // Optimizing the baseline for mobile. padding: 10px 15px;
font-family: $font-family-default; font-family: $font-family-default;
font-weight: $font-weight; line-height: 1.1; // Put the text on the baseline.
} }
// Actual inputs float to right of labels and also have a set percentage // Actual inputs float to right of labels and also have a set percentage
@ -127,7 +128,7 @@ select {
width: 65%; width: 65%;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
border-bottom: 0; background-image: none;
} }

8
lib/sass/mixins.scss
Unescape View File

@ -71,14 +71,14 @@
// Misc // Misc
// -------------------------------------------------- // --------------------------------------------------
@mixin hairline($type, $color, $width, $offset) { @mixin hairline($type, $color, $offset) {
@if $type == single { @if $type == single {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: $offset 100%; background-position: $offset 100%;
} @else if $type == double { } @else if $type == double {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>"), background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' 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='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>"); url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: $offset 100%, $offset 0%; background-position: $offset 100%, $offset 0%;
} }
background-repeat: no-repeat; background-repeat: no-repeat;

1
lib/sass/ratchet.scss
Unescape View File

@ -18,6 +18,7 @@
@import "badges.scss"; @import "badges.scss";
@import "segmented-controllers.scss"; @import "segmented-controllers.scss";
@import "popovers.scss"; @import "popovers.scss";
@import "alerts.scss";
// Javascript components // Javascript components
@import "modals.scss"; @import "modals.scss";

4
lib/sass/table-views.scss
Unescape View File

@ -12,7 +12,7 @@
.table-view-cell { .table-view-cell {
position: relative; position: relative;
padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider. padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
@include hairline(single, #c8c7cc, 320px, 15px); // Single grey border with a width of 320px and 15px offset. @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
// Remove the border from the last table view item // Remove the border from the last table view item
@ -68,7 +68,7 @@
color: #999; color: #999;
font-weight: $font-weight; font-weight: $font-weight;
background-color: #fafafa; background-color: #fafafa;
@include hairline(double, #c8c7cc, 320px, 0); // Double (top and bottom) grey border with a width of 320px and no offset. @include hairline(double, #c8c7cc, 0); // Double (top and bottom) grey border with no offset.
// Rounding first divider on inset lists and remove border on the top // Rounding first divider on inset lists and remove border on the top
&:first-child { &:first-child {

2
package.json
Unescape View File

@ -6,7 +6,7 @@
"grunt": "~0.4.1", "grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0", "grunt-contrib-concat": "~0.3.0",
"grunt-contrib-jshint": "~0.6.4", "grunt-contrib-jshint": "~0.6.4",
"grunt-contrib-nodeunit": "~0.2.1", "grunt-contrib-nodeunit": "~0.2.2",
"grunt-contrib-sass": "~0.5.0", "grunt-contrib-sass": "~0.5.0",
"grunt-contrib-watch": "~0.5.3", "grunt-contrib-watch": "~0.5.3",
"grunt-jekyll": "~0.4.0" "grunt-jekyll": "~0.4.0"

Write Preview
Loading…
Cancel
Save